/* VIA · hoja de estilos común */

/* ---------- Fuentes (alojadas en la web) ---------- */
@font-face { font-family: "Overpass"; src: url("/assets/fonts/overpass-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("/assets/fonts/overpass-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass Mono"; src: url("/assets/fonts/overpass-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass Mono"; src: url("/assets/fonts/overpass-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* Fuente de destacado: solo para la parte clave de titulares y slogans (SIL OFL) */
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* Fuente de reserva ajustada a las medidas de Overpass (medidas en el navegador):
   mientras carga Overpass, el texto ocupa casi lo mismo y no salta al cambiar. */
@font-face { font-family: "Overpass Fallback"; src: local("Arial"), local("Helvetica"); font-weight: 400; size-adjust: 98.33%; ascent-override: 89.5%; descent-override: 38.6%; line-gap-override: 0%; }
@font-face { font-family: "Overpass Fallback"; src: local("Arial Bold"), local("Arial"), local("Helvetica Bold"); font-weight: 800; size-adjust: 97.11%; ascent-override: 90.6%; descent-override: 39.1%; line-gap-override: 0%; }

/* ---------- Marca y temas ---------- */
:root {
  --grafito: #16181D;
  --tiza: #F5F5F2;
  --azul: #2E5BFF;
  --azul-claro: #6F8BFF;
  --senal: #FFD23F;
  --asfalto: #8A8F98;
  --grafito-2: #1E2127;      /* grafito un punto más claro: superficies sobre grafito */
  --gris-claro: #A9AEB6;     /* texto secundario sobre grafito */
  --azul-hover: #1F49E6;
  --rojo-claro: #FF6B74;     /* error sobre fondos oscuros (5,9:1) */

  --bg: var(--tiza);
  --surface: #FFFFFF;
  --text: var(--grafito);
  --muted: #555A63;
  --line: rgba(22, 24, 29, .12);
  --line-strong: rgba(22, 24, 29, .24);
  --accent: var(--azul);
  --accent-text: var(--azul);
  --on-accent: #FFFFFF;
  --band-bg: var(--grafito);
  --band-text: var(--tiza);
  --band-muted: var(--gris-claro);
  --error: #D1343F;
  --hueco-borde: #B8920A;
  --header-bg: rgba(245, 245, 242, .86);

  --font: "Overpass", "Overpass Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --radius: 14px;
  --radius-sm: 10px;
  --wrap: 1160px;
  --gutter: 16px;
  --diag: 68deg;
  --intro-wait: 0ms;   /* con la intro activa, la entrada del hero espera a que termine */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entradas y respuestas */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* movimiento en pantalla */

  color-scheme: light;
}

/* Claro por defecto; el oscuro se activa con el botón de la cabecera */
:root[data-theme="dark"] {
  --bg: var(--grafito);
  --surface: var(--grafito-2);
  --text: var(--tiza);
  --muted: var(--gris-claro);
  --line: rgba(245, 245, 242, .12);
  --line-strong: rgba(245, 245, 242, .24);
  --accent-text: var(--azul-claro);
  --band-bg: var(--grafito-2);
  --error: var(--rojo-claro);
  --header-bg: rgba(22, 24, 29, .86);
  color-scheme: dark;
}

@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent-text); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--azul); color: #fff; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; border-radius: var(--radius-sm); }
.skip:focus { top: 12px; }

.mono, .eyebrow { font-family: var(--mono); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 3px; background: var(--accent); transform: skewX(-22deg); }

/* Huecos pendientes de rellenar: bien visibles para no olvidarlos */
.hueco {
  background: rgba(255, 210, 63, .28);
  color: inherit;
  border: 1px dashed var(--hueco-borde);
  border-radius: 6px;
  padding: 0 .35em;
  font-family: var(--mono);
  font-size: .85em;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .75rem 1.35rem;
  font-family: var(--mono); font-weight: 600; font-size: .9375rem; letter-spacing: .01em;
  text-decoration: none; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform 160ms var(--ease-out);
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--azul-hover); }
.btn--ghost { color: var(--text); border-color: var(--line-strong); background: transparent; }
.btn--ghost:hover { border-color: var(--text); }
.btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .875rem; }
.btn:active { transform: scale(0.97); }
.btn .arrow { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { transform: translateX(3px); }
}

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--text); }
.brand img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: 1rem; }
@media (min-width: 820px) { .nav { gap: 1.75rem; } }

/* Logo según el tema (los archivos de marca, sin tocar) */
.logo-dark { display: none !important; }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }

/* Botón de tema */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  color: var(--text); background: transparent;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--text); }
.theme-toggle { transition: border-color .2s ease, color .2s ease, transform 160ms var(--ease-out); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: opacity 200ms ease, transform 300ms var(--ease-out); }
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.8); }
:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.8); }
.nav a:not(.btn) { color: var(--text); text-decoration: none; font-size: .9375rem; }
.nav a:not(.btn):hover { color: var(--accent-text); }
.nav__links { display: none; gap: 1.75rem; }
@media (min-width: 820px) { .nav__links { display: flex; } }

/* ---------- Secciones ---------- */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section__head { display: grid; gap: 1rem; max-width: 760px; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section__head h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
.section__head p { color: var(--muted); font-size: 1.125rem; }

/* Separador diagonal: el recurso del logo, usado con moderación */
.hatch {
  height: 14px;
  background: repeating-linear-gradient(var(--diag), transparent 0 9px, var(--line-strong) 9px 11px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---------- Hero: mensaje corto arriba, la vía a todo lo ancho debajo ---------- */
.hero {
  display: flex; flex-direction: column;
  min-height: calc(100svh - 68px);
  padding-top: clamp(1.75rem, 4.5vh, 3.25rem);
  overflow: hidden;
}
.hero__center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.9rem); max-width: 17ch; margin-top: 1rem; }
.hero__lead { margin-top: 1.25rem; max-width: 38rem; font-size: clamp(1.125rem, 1.7vw, 1.35rem); color: var(--muted); }
.hero__lead strong { color: var(--text); font-weight: 800; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin-top: 1.6rem; }
.hero__facts { margin-top: 1.1rem; font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.hero__facts span { margin-inline: .45rem; color: var(--accent-text); }

/* Botón grande para la llamada principal */
.btn--lg { min-height: 56px; padding: 1rem 1.75rem; font-size: 1rem; border-radius: 12px; }
@media (max-width: 479px) {
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
}

/* Servicios: el ejemplo del resumen, al lado del titular */
.services-intro { display: grid; gap: 2rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.services-intro .section__head { margin-bottom: 0; }
.services-intro .summary { grid-area: auto; max-width: 460px; }
@media (min-width: 1000px) { .services-intro { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: center; } }

/* Ejemplo del resumen que recibe el gestor */
.summary {
  grid-area: card; position: relative; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: 0 30px 60px -30px rgba(22, 24, 29, .35);
}
:root[data-theme="dark"] .summary { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.summary__tag { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.summary__chip { background: var(--senal); color: var(--grafito); font-weight: 600; padding: .15rem .55rem; border-radius: 999px; letter-spacing: .06em; }
.summary__head { display: flex; align-items: center; gap: .85rem; margin: 1.25rem 0 1.25rem; }
.summary__head img { width: 44px; height: 44px; flex: none; }
.summary__head strong { display: block; font-weight: 800; font-size: 1.125rem; line-height: 1.2; }
.summary__head span { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.summary__meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .8125rem; margin-bottom: .5rem; }
.summary__meta b { font-weight: 600; color: var(--accent-text); }
.summary__bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: repeating-linear-gradient(var(--diag), transparent 0 5px, var(--line-strong) 5px 7px);
  border: 1px solid var(--line);
}
.summary__bar span { display: block; height: 100%; width: 79%; background: var(--accent); border-radius: 999px; }
.summary ul { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.summary li { display: flex; align-items: baseline; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.summary li b { font-family: var(--mono); font-weight: 600; min-width: 2ch; text-align: right; }
.summary .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-1px); }
.dot--ok { background: var(--accent); }
.dot--wait { background: var(--senal); }
.dot--check { border: 2px solid var(--asfalto); }
.summary__foot { margin-top: 1rem; font-size: .875rem; color: var(--muted); }

/* Animación protagonista: lo que entra, sale resuelto (pasando por VIA) */
.flow {
  grid-area: flow;
  position: relative;
  height: 200px;
  border-block: 1px solid var(--line);
}
.flow__label {
  position: absolute; top: 12px; z-index: 3;
  font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.flow__label--in { left: 0; }
.flow__label--out { right: 0; color: var(--accent-text); }
.flow__gate {
  position: absolute; left: 47%; top: 50%; z-index: 2;
  width: 76px; height: 76px; transform: translate(-50%, -50%);
  border-radius: 30%;
  box-shadow: 0 0 0 12px var(--bg), 0 14px 28px -14px rgba(22, 24, 29, .45);
}
.flow__gate img { width: 100%; height: 100%; }
.flow__gate::after {
  content: ""; position: absolute; top: -4px; right: -4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--senal); box-shadow: 0 0 0 3px var(--bg);
}
.flow__lane {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.flow__item {
  position: absolute; inset: 0;
  animation: flow-x var(--t, 18s) linear infinite;
  animation-delay: var(--d);
}
.flow__item i {
  position: absolute; left: -16px; top: 28%;
  width: 10px; height: 44%;
  border-radius: 10px;
  background: var(--asfalto);
  animation: flow-shape var(--t, 18s) linear infinite;
  animation-delay: var(--d);
}
/* El azul es una capa encima que aparece por opacidad: sin repintar en cada fotograma */
.flow__item i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--accent); opacity: 0;
  animation: flow-tint var(--t, 18s) linear infinite;
  animation-delay: inherit;
}
@keyframes flow-x {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100% + 32px)); }
}
/* Entran torcidas, de cualquier tamaño y en gris; salen iguales, alineadas a 68° y en azul */
@keyframes flow-shape {
  0%   { transform: translateY(var(--y)) rotate(var(--r)) scaleY(var(--s, 1)); opacity: .6; }
  /* El giro al pasar por VIA acelera y frena (ease-in-out fuerte); el resto del viaje es lineal */
  43%  { transform: translateY(var(--y)) rotate(var(--r)) scaleY(var(--s, 1)); opacity: .85; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  50%  { transform: translateY(0) rotate(-22deg) scaleY(1); opacity: 1; }
  100% { transform: translateY(0) rotate(-22deg) scaleY(1); opacity: 1; }
}
@keyframes flow-tint {
  0% { opacity: 0; }
  43% { opacity: 0; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  50% { opacity: 1; }
  100% { opacity: 1; }
}
.flow.is-paused .flow__item, .flow.is-paused .flow__item i, .flow.is-paused .flow__item i::after { animation-play-state: paused; }
@media (max-width: 719px) {
  .flow { height: 150px; }
  .flow__gate { width: 60px; height: 60px; box-shadow: 0 0 0 10px var(--bg), 0 12px 24px -12px rgba(22, 24, 29, .45); }
  .flow__item:nth-child(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flow__item, .flow__item i, .flow__item i::after { animation-play-state: paused !important; }
  .btn, .btn .arrow, .card { transition: none; }
}

/* ---------- Problema ---------- */
.problems { display: grid; gap: 1rem; }
@media (min-width: 820px) { .problems { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.problem {
  padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.problem__num { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.problem h3 { font-size: 1.5rem; margin: .9rem 0 .6rem; }
.problem p { color: var(--muted); }
.problems-close { margin-top: 2.25rem; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; max-width: 34ch; }

/* ---------- Servicios ---------- */
.cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } .card { min-height: 280px; } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.card {
  position: relative; display: flex; flex-direction: column; gap: .75rem;
  padding: 1.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s ease, transform 250ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
}
.card:focus-within { border-color: var(--accent); }
.card--available { border-color: var(--accent); }
.card__for { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.card h3 { font-size: 1.5rem; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card__result { color: var(--muted); flex: 1; }
.card__more { font-family: var(--mono); font-size: .875rem; font-weight: 600; color: var(--accent-text); }

.status {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .25rem .65rem; border-radius: 999px;
  font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--on { background: var(--accent); color: var(--on-accent); }
.status--soon { border: 1px dashed var(--line-strong); color: var(--muted); }

/* ---------- Pasos ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.step { position: relative; padding: 0 0 2rem 3.5rem; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-weight: 600; font-size: .875rem;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 1.5px solid var(--accent); color: var(--accent-text); border-radius: var(--radius-sm);
  background: var(--bg);
}
.step::after { content: ""; position: absolute; left: calc(1.25rem - .5px); top: 2.75rem; bottom: .25rem; width: 1px; background: var(--line-strong); }
.step:last-child::after { display: none; }
.step h3 { font-size: 1.25rem; margin: .45rem 0 .5rem; }
.step p { color: var(--muted); }
@media (min-width: 900px) {
  .step { padding: 3.75rem 0 0; }
  .step::after { left: 3.25rem; right: -1.25rem; top: 1.25rem; bottom: auto; width: auto; height: 1px; }
}

/* ---------- Por qué VIA (banda oscura) ---------- */
.band {
  position: relative; overflow: hidden;
  background: var(--band-bg); color: var(--band-text);
  --text: var(--band-text); --muted: var(--band-muted);
  --line: rgba(245, 245, 242, .12); --line-strong: rgba(245, 245, 242, .24);
  --accent-text: var(--azul-claro);
}
.band::before {
  content: ""; position: absolute; top: 0; right: 0; width: min(46vw, 520px); height: 100%;
  background: repeating-linear-gradient(var(--diag), transparent 0 22px, rgba(245, 245, 242, .05) 22px 24px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
  pointer-events: none;
}
.band .wrap { position: relative; }
.reasons { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 720px) { .reasons { grid-template-columns: repeat(2, 1fr); } }
.reason { background: var(--band-bg); padding: 2rem; }
.reason h3 { font-size: 1.375rem; margin-bottom: .6rem; }
.reason p { color: var(--muted); }

/* ---------- Preguntas ---------- */
.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.4rem 0; font-weight: 800; font-size: 1.1875rem; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--accent-text), var(--accent-text)) center / 100% 2px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) center / 2px 100% no-repeat;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-text); }
.faq__answer { padding: 0 0 1.5rem; color: var(--muted); max-width: 68ch; }
.faq__answer p + p { margin-top: .75rem; }

/* ---------- Contacto y formularios ---------- */
.contact { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contact { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } }
.contact__intro h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.contact__intro p { color: var(--muted); margin-top: 1rem; font-size: 1.125rem; }
.contact__mail { display: inline-block; padding-block: .3rem; margin-top: 1.5rem; font-family: var(--mono); font-weight: 600; font-size: 1.125rem; }
.signature { margin-top: 2rem; font-family: var(--mono); color: var(--muted); font-size: .9375rem; }

.form { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 640px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.form__row { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: .8rem .9rem; min-height: 48px;
  transition: border-color .15s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 91, 255, .2); }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem; }
.check input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--azul); flex: none; }
.form__legal { font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.form__status { font-family: var(--mono); font-size: .9375rem; min-height: 1.5em; }
.form__status.is-ok { color: var(--accent-text); }
.form__status.is-error { color: var(--error); }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }

/* ---------- Pie ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 3rem 2.5rem; font-size: .9375rem; }
.site-footer .wrap { display: grid; gap: 2rem; }
@media (min-width: 820px) { .site-footer .wrap { grid-template-columns: 1fr auto; align-items: end; } }
.site-footer img { height: 48px; width: auto; }
.footer__tagline { margin-top: 1rem; color: var(--muted); }
.footer__tagline strong { color: var(--text); font-weight: 800; }
.footer__links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .8125rem; }
.footer__links a { display: inline-block; padding-block: .5rem; color: var(--muted); text-decoration: none; }
.footer__links a:hover { color: var(--accent-text); }
.footer__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .8125rem; }

/* =========================================================
   Páginas de servicio
   ========================================================= */
.page-hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.crumbs { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }
.crumbs span[aria-hidden] { margin-inline: .5rem; }
.page-hero .status { margin-top: 1.75rem; }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); max-width: 16ch; margin-top: 1rem; }
.page-hero__lead { margin-top: 1.25rem; max-width: 40rem; font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--muted); }
.facts { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.facts li {
  font-family: var(--mono); font-size: .875rem;
  padding: .45rem .85rem; border: 1px solid var(--line-strong); border-radius: 999px;
}
.facts li b { font-weight: 600; color: var(--accent-text); }
.page-hero .hero__actions { margin-top: 2rem; }

/* Vídeo de presentación (o su marcador mientras no exista) */
.media { padding-bottom: clamp(1rem, 3vw, 2rem); }
.media .video { max-width: 980px; margin-inline: auto; }
.video {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: var(--grafito); color: var(--tiza);
  display: grid; place-items: center; text-align: center;
}
.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.video__placeholder::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(var(--diag), transparent 0 26px, rgba(245, 245, 242, .05) 26px 28px);
}
.video__inner { position: relative; display: grid; justify-items: center; gap: 1.1rem; padding: 1.5rem; }
.video__play {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid rgba(245, 245, 242, .3);
}
.video__play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--azul-claro); }
.video__text { font-weight: 800; font-size: clamp(1.25rem, 2.6vw, 1.75rem); letter-spacing: -.01em; }
.video__sub { font-family: var(--mono); font-size: .8125rem; color: var(--gris-claro); }

/* Bloque "en construcción" con el formulario de aviso */
.construction {
  position: relative; overflow: hidden;
  display: grid; gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  border-radius: 18px;
  background: var(--grafito); color: var(--tiza);
  --text: var(--tiza); --muted: var(--gris-claro); --bg: var(--grafito-2); --surface: var(--grafito-2); --error: var(--rojo-claro);
  --line: rgba(245, 245, 242, .12); --line-strong: rgba(245, 245, 242, .24);
  --accent-text: var(--azul-claro);
}
@media (min-width: 900px) { .construction { grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; } }
/* Cinta de obras: el amarillo señal, solo aquí */
.construction::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: repeating-linear-gradient(var(--diag), var(--senal) 0 14px, var(--grafito) 14px 28px);
}
.construction__label { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--senal); }
.construction h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); margin-top: .75rem; }
.construction p { color: var(--muted); margin-top: 1rem; max-width: 30rem; }
.construction .form { background: rgba(245, 245, 242, .04); }
.construction .form__legal a, .construction .check a { color: var(--azul-claro); }

/* Paso a paso */
.timeline { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.timeline li { position: relative; display: grid; gap: .35rem; padding: 0 0 2rem 2.25rem; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: .35rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2.5px solid var(--accent);
}
.timeline li::after { content: ""; position: absolute; left: 5px; top: 1.35rem; bottom: .2rem; width: 2px; background: var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline__when { font-family: var(--mono); font-size: .8125rem; font-weight: 600; color: var(--accent-text); letter-spacing: .04em; }
.timeline h3 { font-size: 1.3rem; }
.timeline p { color: var(--muted); }

.note {
  margin-top: 2.5rem; max-width: 860px;
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 1.5rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
}
/* Señal amarilla pequeña, como un piloto de aviso */
.note::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .5rem; border-radius: 50%; background: var(--senal); box-shadow: 0 0 0 4px rgba(255, 210, 63, .25); }
.note strong { font-weight: 800; }

/* Qué recibes */
.receive { display: grid; gap: 2rem; }
@media (min-width: 900px) { .receive { grid-template-columns: 6fr 5fr; gap: 4rem; align-items: start; } }
.receive .summary { grid-area: auto; box-shadow: none; background: rgba(245, 245, 242, .04); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start; }
.ticks svg { width: 22px; height: 22px; color: var(--accent-text); margin-top: .1rem; }
.ticks strong { font-weight: 800; display: block; }
.ticks span { color: var(--muted); }

/* Para quién / qué necesitamos */
.duo { display: grid; gap: 1rem; }
@media (min-width: 820px) { .duo { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.panel { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: .9rem 0 1.25rem; }
.panel > p { color: var(--muted); }
.panel .ticks { margin-top: 1.25rem; }
.panel__never { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--muted); }
.panel__never strong { color: var(--text); font-weight: 800; }

/* Precio */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-top: 1.25rem; }
.price__amount { font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: -.02em; line-height: 1; }
.price__amount small { font-size: .45em; font-weight: 400; color: var(--muted); letter-spacing: 0; }

/* Llamada final */
.cta-band {
  position: relative; overflow: hidden;
  display: grid; gap: 1.5rem; align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 18px; background: var(--azul); color: #fff;
}
@media (min-width: 820px) { .cta-band { grid-template-columns: 1fr auto; } }
.cta-band::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 45%;
  background: repeating-linear-gradient(var(--diag), transparent 0 22px, rgba(255, 255, 255, .08) 22px 24px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 80%);
  mask-image: linear-gradient(90deg, transparent, #000 80%);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); max-width: 22ch; }
.cta-band p { margin-top: .75rem; color: rgba(255, 255, 255, .85); }
.btn--light { background: #fff; color: var(--azul); }
.btn--light:hover { background: var(--tiza); }
.cta-band :focus-visible { outline-color: #fff; }

.page-contact { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
@media (max-width: 599px) {
  .video.video__placeholder { aspect-ratio: auto; min-height: 260px; }
  .video__play { width: 60px; height: 60px; }
}

/* ---------- Contacto: qué pasa después ---------- */
.next { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.next li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .9rem; align-items: start; }
.next__n {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: .875rem;
  border: 1.5px solid var(--accent); color: var(--accent-text); border-radius: var(--radius-sm);
}
.next strong { display: block; font-weight: 800; }
.next span:not(.next__n) { color: var(--muted); font-size: .9375rem; }

/* ---------- Páginas legales ---------- */
.legal .wrap { max-width: calc(800px + var(--gutter) * 2); }
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-top: 1.25rem; }
.legal__updated { margin-top: .75rem; font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.legal__body { margin-top: 2.5rem; }
.legal__body h2 { font-size: 1.375rem; letter-spacing: -.01em; margin: 2.5rem 0 .75rem; }
.legal__body p, .legal__body li { color: var(--muted); }
.legal__body p + p { margin-top: .75rem; }
.legal__body strong { color: var(--text); font-weight: 800; }
.legal__body ul { padding-left: 1.2rem; margin: .75rem 0 0; display: grid; gap: .5rem; }
.legal__body code { font-family: var(--mono); font-size: .9em; }
.legal__intro { font-size: 1.1875rem; color: var(--text) !important; padding: 1.25rem 1.5rem; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); }
.legal__data { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.5rem; margin: 1rem 0 0; padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.legal__data dt { font-family: var(--mono); font-size: .8125rem; font-weight: 600; color: var(--muted); padding-top: .15rem; }
.legal__data dd { margin: 0; }
@media (max-width: 519px) { .legal__data { grid-template-columns: 1fr; gap: .15rem; } .legal__data dd { margin-bottom: .6rem; } }
.legal__table { margin-top: 1rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.legal__table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .9375rem; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.legal__table th { font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.legal__table tr:last-child td { border-bottom: 0; }
.legal__table td { color: var(--muted); }
.legal__table td:first-child { color: var(--text); }

/* ---------- 404 ---------- */
.notfound { min-height: 62vh; display: grid; align-items: center; }
.notfound h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); max-width: 14ch; margin-top: 1rem; }
.notfound__text { margin-top: 1.25rem; font-size: 1.125rem; color: var(--muted); max-width: 34rem; }
/* Todas alineadas a 68°, menos una que se ha salido de la vía */
.notfound__lines { display: flex; gap: 22px; height: 84px; align-items: center; margin-bottom: 2.5rem; }
.notfound__lines i { width: 10px; height: 64px; border-radius: 10px; background: var(--accent); transform: rotate(-22deg); }
.notfound__lines i.is-lost { background: var(--senal); transform: translateY(14px) rotate(38deg); }
.form__hint { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }

/* Móviles muy estrechos: que el botón de la cabecera quepa en una línea */
@media (max-width: 360px) {
  .nav { gap: .5rem; }
  .site-header .btn--sm { padding-inline: .75rem; font-size: .8125rem; }
}

/* =========================================================
   Movimiento de apoyo (las barras del hero siguen siendo la protagonista)
   Reglas: solo transform y opacity, una sola vez, curvas de --ease-*,
   y con "reducir movimiento" se quedan en fundidos cortos.
   ========================================================= */

/* 1 · Entrada del hero: el titular está desde el primer instante (no retrasa la carga);
   alrededor se asientan el lema, los botones y la vía. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fill { from { transform: scaleX(0); } }
.hero__center > .eyebrow, .hero__lead, .hero__actions, .hero__facts, .hero .flow {
  animation: rise 600ms var(--ease-out) both;
}
.hero__center > .eyebrow { animation-delay: calc(var(--intro-wait) + 0ms); }
.hero__lead { animation-delay: calc(var(--intro-wait) + 80ms); }
.hero__actions { animation-delay: calc(var(--intro-wait) + 160ms); }
.hero__facts { animation-delay: calc(var(--intro-wait) + 240ms); }
.hero .flow { animation-delay: calc(var(--intro-wait) + 200ms); }

/* 2 · Revelados al hacer scroll: una vez, con escalonado corto.
   Solo si hay JavaScript (clase .js): sin él, todo se ve desde el principio. */
.js [data-reveal],
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
/* Si algo de dentro recibe el foco (teclado), se muestra ya: nunca un foco sobre algo invisible */
.js [data-reveal]:focus-within,
.js [data-reveal-group] > :focus-within { opacity: 1; transform: none; transition-duration: 0ms; transition-delay: 0ms; }
.js [data-reveal].is-in,
.js [data-reveal-group].is-in > * { opacity: 1; transform: none; }

/* 3 · Cómo trabajamos: la vía entre pasos se dibuja detrás de cada número */
.js .steps .step::after {
  transform: scaleY(0); transform-origin: top center;
  transition: transform 700ms var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * 140ms + 250ms);
}
@media (min-width: 900px) { .js .steps .step::after { transform: scaleX(0); transform-origin: left center; } }
.js .steps.is-in .step::after { transform: none; }
.steps .step::after { background: var(--accent); opacity: .45; width: 2px; left: calc(1.25rem - 1px); }
@media (min-width: 900px) { .steps .step::after { width: auto; height: 2px; left: 3.25rem; } }
.js .steps[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 140ms); }

/* 4 · Preguntas que se despliegan (donde el navegador lo permite; si no, se abren al instante) */
:root { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0; overflow: clip;
  transition: block-size 250ms var(--ease-out), content-visibility 250ms allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq__answer { transition: opacity 250ms ease, transform 250ms var(--ease-out); }
.faq details:not([open]) .faq__answer { opacity: 0; transform: translateY(-4px); }
.faq summary::after { transition: transform 250ms var(--ease-out); }

/* 5 · Cambio de tema: el nuevo color se abre en círculo desde el botón (ver main.js) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  /* Menos y más suave, no cero: se quedan los fundidos, se va el desplazamiento */
  .hero__center > .eyebrow, .hero__lead, .hero__actions, .hero__facts, .hero .flow { animation-name: fade-only; animation-duration: 200ms; animation-delay: 0ms !important; }
  .hero .summary__bar span { animation: none; }
  .js [data-reveal], .js [data-reveal-group] > * { transform: none; transition: opacity 200ms ease; transition-delay: 0ms; }
  .js .steps .step::after { transform: none; transition: none; }
  .faq details::details-content, .faq__answer { transition: none; }
  .theme-toggle svg { transition: opacity 150ms ease; }
}
@keyframes fade-only { from { opacity: 0; } }

/* =========================================================
   Logo animado: el logo de VIA se forma con barras (pie de página)
   Fuente única: tools/logo-anim.mjs (también genera la pieza de marca aparte)
   ========================================================= */
.logo-anim { overflow: visible; }
.logo-anim .la-b, .logo-anim .la-n { transform-box: fill-box; transform-origin: center; }
.logo-anim .la-n { opacity: 0; }
.logo-anim__bars { opacity: 0; }
.logo-anim.is-playing .logo-anim__final { opacity: 0; animation: la-final 320ms ease 1450ms both; }
.logo-anim.is-playing .logo-anim__bars { opacity: 1; animation: la-out 320ms ease 1500ms both; }
.logo-anim.is-playing .la-b { animation: la-bar 1100ms cubic-bezier(0.23, 1, 0.32, 1) var(--d) both; }
.logo-anim.is-playing .la-n { animation: la-noise 1300ms cubic-bezier(0.77, 0, 0.175, 1) var(--d) both; }
@keyframes la-bar {
  from { opacity: 0; fill: #8A8F98; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.8); }
  25%  { opacity: 1; }
  60%  { fill: #8A8F98; }
  to   { opacity: 1; fill: currentColor; transform: none; }
}
@keyframes la-noise {
  from { opacity: 0; fill: #8A8F98; transform: translate(var(--fx), var(--fy)); }
  30%  { opacity: .7; }
  70%  { opacity: .5; }
  to   { opacity: 0; fill: #8A8F98; transform: translate(var(--tx), var(--ty)); }
}
@keyframes la-final { from { opacity: 0; } to { opacity: 1; } }
@keyframes la-out { from { opacity: 1; } to { opacity: 0; } }
.site-footer .logo-anim { display: block; height: 72px; width: auto; color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .logo-anim.is-playing .logo-anim__final { animation: none; opacity: 1; }
  .logo-anim.is-playing .logo-anim__bars { animation: none; opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .logo-anim:not(.is-playing) .logo-anim__final { opacity: 0; }
}

/* =========================================================
   Textos más visuales (portada)
   ========================================================= */
/* Idea clave de titulares y slogans: en azul y en cursiva de contraste.
   Overpass gruesa + Instrument Serif cursiva: el contraste de formas hace saltar la frase. */
.hl {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 400;
  font-size: 1.12em; line-height: 0; letter-spacing: -.005em;
  color: var(--accent-text);
  font-synthesis: none;
}
.band .hl { color: var(--azul-claro); }

/* Mensajes de chat en "El problema": se reconocen al instante */
.chat { display: grid; gap: .4rem; justify-items: start; margin: .9rem 0 1rem; }
.bubble {
  margin: 0; padding: .45rem .8rem; max-width: 100%;
  font-size: .9375rem; line-height: 1.35; color: var(--text);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
}
.bubble--out { justify-self: end; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.bubble__again { display: block; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.problem .chat + p, .problem .loop + p { color: var(--muted); }

/* El bucle de revisar a mano */
.loop { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .9rem 0 1rem; padding: 0; }
.loop li { font-family: var(--mono); font-size: .8125rem; padding: .3rem .6rem; border: 1px solid var(--line-strong); border-radius: 999px; }
.loop li:not(:last-child)::after { content: "→"; margin-left: .55rem; color: var(--muted); }
.loop::after { content: "↻ y otra vez"; font-family: var(--mono); font-size: .8125rem; color: var(--accent-text); padding-left: .2rem; }

/* Antes / Con VIA en las tarjetas de servicio */
.ba { display: grid; gap: .55rem; margin: .25rem 0 0; flex: 1; }
.ba div { display: grid; grid-template-columns: 4.6rem 1fr; gap: .6rem; align-items: baseline; }
.ba dt { font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ba div + div dt { color: var(--accent-text); }
.ba dd { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.ba div + div dd { color: var(--text); }
.card__meta { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.card__meta b { color: var(--accent-text); font-weight: 600; }

/* Quién hace qué en cada paso */
.step__who { display: inline-block; margin-top: .45rem; font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.step__who--auto { color: var(--accent-text); }
.step h3 { margin-top: .25rem; }

/* =========================================================
   Intro: lo primero que se ve es el logo formándose en grande
   Una vez por visita (sessionStorage), nunca con "reducir movimiento".
   Funciona solo con CSS: aunque fallara el JavaScript, la cortina se retira sola.
   ========================================================= */
.intro-screen { display: none; }
html.intro { --intro-wait: 2350ms; }
html.intro .intro-screen {
  display: grid; position: fixed; inset: 0; z-index: 100;
  place-content: center; justify-items: center; gap: clamp(1rem, 3vh, 2rem);
  background: var(--bg); color: var(--text);
  /* La cortina se retira con el borde inclinado a 68°, como las diagonales del logo */
  clip-path: polygon(-40vh 0, calc(100% + 40vh) 0, calc(100% + 40vh) 100%, 0 100%);
  animation: intro-out 750ms cubic-bezier(0.77, 0, 0.175, 1) 2000ms both;
}
.intro__logo { width: min(62vw, 46vh, 420px); height: auto; }
.intro__tag {
  margin: 0; font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: -.02em;
  animation: rise 600ms var(--ease-out) 1400ms both;
}
@keyframes intro-out {
  to { clip-path: polygon(100% 0, calc(100% + 40vh) 0, calc(100% + 40vh) 100%, calc(100% + 40vh) 100%); visibility: hidden; }
}
html.intro.intro-skip .intro-screen { animation-duration: 450ms; animation-delay: 0ms; }
html.intro-done .intro-screen { display: none; }

/* =========================================================
   Tipografía afinada (Overpass 800 en titulares, 400 en texto, Mono en datos)
   ========================================================= */
html { font-kerning: normal; font-synthesis: none; }
body { line-height: 1.65; font-variant-ligatures: common-ligatures contextual; }

/* Titulares: cuanto más grandes, más apretados (el tamaño abre el espacio entre letras) */
h1, h2, h3 { font-kerning: normal; }
.hero h1, .page-hero h1 { line-height: 1; letter-spacing: -.038em; }
.section__head h2, .contact__intro h2, .construction h2, .cta-band h2, .legal h1 { line-height: 1.04; letter-spacing: -.03em; }
.section__head h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); max-width: 20ch; }
h3 { letter-spacing: -.018em; line-height: 1.15; }

/* Texto: líneas de lectura cómoda (60–68 caracteres) y párrafos que no dejan viudas */
.section__head p, .page-hero__lead, .hero__lead, .faq__answer, .legal__body p, .legal__body li { max-width: 64ch; }
.hero__lead, .page-hero__lead { line-height: 1.55; }
.section__head > p:not(.eyebrow) { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.6; }
p, li, dd { text-wrap: pretty; }

/* Cifras: en columnas iguales, para que se lean y comparen de un vistazo */
.mono, .summary, .facts, .card__meta, .price__amount, .timeline__when, [data-count] { font-variant-numeric: tabular-nums; }

/* Etiquetas en mayúsculas: más aire entre letras y nunca en frases largas */
.eyebrow, .status, .summary__tag, .flow__label, .ba dt, .step__who { letter-spacing: .1em; }

/* En móvil, partir palabras largas con guion antes que dejar huecos */
@media (max-width: 599px) {
  p, li, dd { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
  .hero h1 { letter-spacing: -.032em; }
}

/* ---------- Páginas de servicio: problema con escena y comparativa ---------- */
@media (min-width: 900px) {
  .problem-split { display: grid; grid-template-columns: 7fr 5fr; gap: 4rem; align-items: center; }
  .problem-split .section__head { margin-bottom: 0; }
}
.chat--panel {
  margin: 0; padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  justify-items: start;
}
.chat__note { margin: 0; justify-self: center; font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; color: var(--muted); }
.chat--panel .bubble--out + .chat__note { justify-self: end; }

.compare-section { padding-top: 0; }
.compare { display: grid; gap: 1rem; }
@media (min-width: 820px) { .compare { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.compare__col { padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.compare__col--after { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.compare__label { margin: 0 0 1rem; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.compare__col--after .compare__label { color: var(--accent-text); }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.compare li { position: relative; padding-left: 1.6rem; line-height: 1.5; }
.compare__col--before li { color: var(--muted); }
.compare__col--before li::before { content: "×"; position: absolute; left: 0; top: -.05em; font-family: var(--mono); color: var(--muted); }
.compare__col--after li::before { content: "→"; position: absolute; left: 0; top: 0; font-family: var(--mono); color: var(--accent-text); }
/* Huecos pendientes sobre fondos oscuros: texto claro para que se lean (contraste AA) */
.construction .hueco, .band .hueco, :root[data-theme="dark"] .hueco { color: var(--tiza); border-color: var(--senal); }

/* ---------- Slogans de venta ---------- */
.card__slogan { margin: -.15rem 0 .1rem; font-weight: 800; font-size: 1.125rem; line-height: 1.25; letter-spacing: -.02em; color: var(--text); }
.page-hero__slogan {
  margin-top: 1.1rem; max-width: 24ch;
  font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -.03em;
  color: var(--text); text-wrap: balance;
}
.footer__slogan {
  grid-column: 1 / -1; margin: 0 0 .5rem;
  font-weight: 800; font-size: clamp(2rem, 6vw, 4.25rem); line-height: 1; letter-spacing: -.04em;
  text-wrap: balance;
}

/* ---------- La vía como escenario del hero ---------- */
.hero .flow--stage {
  flex: 1 1 auto;
  height: auto; min-height: clamp(240px, 38vh, 420px); max-height: 520px;
  margin-top: clamp(1.25rem, 3.5vh, 2.5rem);
  border-block: 0; border-top: 1px solid var(--line);
}
.flow--stage .flow__label { top: 18px; font-size: .8125rem; }
.flow--stage .flow__label--in { left: var(--gutter); }
.flow--stage .flow__label--out { right: var(--gutter); }
.flow--stage .flow__gate {
  width: clamp(72px, 9vw, 132px); height: clamp(72px, 9vw, 132px);
  box-shadow: 0 0 0 clamp(10px, 1.2vw, 16px) var(--bg), 0 20px 40px -20px rgba(22, 24, 29, .5);
}
.flow--stage .flow__gate::after { width: clamp(12px, 1.3vw, 18px); height: clamp(12px, 1.3vw, 18px); }
.flow--stage .flow__item i { width: clamp(10px, 1.1vw, 16px); top: 27%; height: 46%; }
.flow--stage .flow__lane {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
@media (max-width: 719px) {
  .hero .flow--stage { min-height: 200px; }
}
/* En el hero centrado, la etiqueta va sin el guion lateral (al partirse en dos líneas quedaba suelto) */
.hero__center > .eyebrow::before { display: none; }

/* ---------- Fondo interactivo del hero (ver assets/js/bar-field.js) ---------- */
.hero { position: relative; }
.bar-field {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  /* Se difumina antes de llegar a la vía, para no competir con ella */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 70%, transparent 100%);
}
.hero__center, .hero .flow { position: relative; z-index: 1; }
/* Modo página entera: fondo fijo detrás de todo el contenido (las secciones con fondo propio lo tapan) */
.bar-field--page { position: fixed; inset: 0; z-index: -1; -webkit-mask-image: none; mask-image: none; }

/* ---------- Páginas de servicio: las cuentas (vídeo de venta con cifras) ---------- */
.cifras { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 960px) { .cifras { grid-template-columns: 5fr 7fr; gap: 3.5rem; } }
.cifras__text h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.03em; margin-top: 1rem; max-width: 16ch; }
.cifras__gana { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.4; max-width: 34ch; }
.cifras__gana .summary__chip { display: inline-block; margin-right: .4rem; vertical-align: .15em; font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; }
.cifras__nota { margin-top: .9rem; color: var(--muted); font-size: .9375rem; max-width: 46ch; }
.cifras__text .btn { margin-top: 1.5rem; }
.cifras .video { border-radius: 18px; }

/* ---------- Calculadora «Lo que gana tu despacho» (tools/calculadora.mjs + assets/js/calculadora.js) ---------- */
.calc { display: grid; gap: 1.25rem; }
@media (min-width: 960px) { .calc { grid-template-columns: 5fr 7fr; gap: 1.5rem; align-items: start; } }
.calc__form { display: grid; gap: 1.75rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.calc__pair { display: flex; gap: .9rem; align-items: center; }
.calc .field input[type="number"] { width: 7.5rem; flex: none; font-family: var(--mono); font-size: 1.125rem; font-weight: 600; }
.calc .field input[type="range"] { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--azul); }
.calc__unidad { font-family: var(--mono); color: var(--muted); }
.calc__chip { display: inline-block; margin-left: .35rem; padding: .2rem .5rem .1rem; border: 1px solid currentColor; border-radius: 999px; font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); vertical-align: middle; }
.calc__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.calc__opcion { min-height: 40px; padding: .5rem .85rem .4rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font: 600 .8125rem/1 var(--mono); cursor: pointer; transition: background .15s, border-color .15s; }
.calc__opcion:hover { border-color: var(--text); }
.calc__opcion[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.calc__ayuda { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--muted); }

.calc__res { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--band-bg); color: var(--band-text); border-radius: var(--radius); }
.calc__bloque + .calc__bloque { padding-top: 1.25rem; border-top: 1px solid rgba(245, 245, 242, .14); }
.calc__ceja { margin: 0; font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--band-muted); }
.calc__cifra { margin: .55rem 0 0; font-family: var(--mono); font-weight: 600; font-size: clamp(2.25rem, 7vw, 3.5rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.calc__cifra small { margin-left: .4rem; font-family: var(--font); font-weight: 400; font-size: 1rem; letter-spacing: 0; color: var(--band-muted); }
.calc__cifra--sec { font-size: clamp(1.75rem, 5vw, 2.5rem); }
.calc__cifra--clave span { color: var(--senal); }
.calc--pierde .calc__cifra--clave span { color: var(--band-text); }
.calc__texto { margin: .55rem 0 0; font-size: 1rem; color: var(--band-muted); }
.calc__texto b { color: var(--band-text); font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.calc__recupera { margin: .75rem 0 0; font-weight: 800; font-size: 1.125rem; line-height: 1.35; }
.calc__barras { display: grid; gap: .45rem; margin-top: 1rem; }
.calc__barra { display: grid; grid-template-columns: 2.75rem 1fr; gap: .6rem; align-items: center; }
.calc__barra span { font-family: var(--mono); font-size: .75rem; color: var(--band-muted); }
.calc__barra i { display: block; width: var(--w, 0%); height: 12px; border-radius: 6px; background: #5B606A; transition: width .45s var(--ease-out); }
.calc__barra--via i { background: var(--azul); }
.calc__btn { justify-content: center; text-align: center; white-space: normal; line-height: 1.3; }
.calc__nota { margin: -.5rem 0 0; font-size: .8125rem; color: var(--band-muted); }
.calc-section noscript .calc__nota { margin-top: 1rem; color: var(--muted); }

.calc__fuentes { margin-top: clamp(2rem, 5vw, 3rem); max-width: 80ch; }
.calc__fuentes h3 { font-size: 1.125rem; margin: 0 0 .5rem; }
.calc__fuentes > p { color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.calc__fuentes ol { display: grid; gap: .85rem; margin: 1rem 0 0; padding-left: 1.25rem; }
.calc__fuentes li { color: var(--muted); font-size: .875rem; line-height: 1.55; }
.calc__fuentes li strong { color: var(--text); }
.calc__fuentes li > span:last-child { display: block; }
.calc__fuentes a { color: var(--accent-text); overflow-wrap: anywhere; }

/* Formulario de contacto cuando se llega desde la calculadora (assets/js/contacto.js) */
.form__cifras { padding: .9rem 1rem; border-left: 4px solid var(--azul); border-radius: 8px; background: rgba(46, 91, 255, .08); }
.form__cifras-titulo { margin: 0; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.form__cifras ul { display: grid; gap: .25rem; margin: .5rem 0 0; padding: 0; list-style: none; font-size: .9375rem; }
.check[hidden], .form__cifras[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .calc__barra i { transition: none; } }

/* ---------- Cuestionario de diagnóstico para gestorías (tools/diagnostico.mjs + assets/js/diagnostico.js) ---------- */
.diag { max-width: 860px; gap: 0; }
.diag > .form__hint { margin-bottom: 1rem; }
.diag__bloque { margin: 0; padding: 1.5rem 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.diag__titulo { float: left; width: 100%; margin: 0; display: flex; gap: .75rem; align-items: baseline; padding: 0; font-weight: 800; font-size: clamp(1.0625rem, 2.2vw, 1.25rem); line-height: 1.3; letter-spacing: -.01em; }
.diag__n { flex: none; font-family: var(--mono); font-size: .875rem; font-weight: 600; color: var(--accent-text); }
.diag__req { color: var(--accent-text); }
.diag__titulo + * { clear: both; }
.diag__ayuda { margin: .5rem 0 0 2.1rem; font-size: .9375rem; color: var(--muted); max-width: 62ch; }
.diag__campos { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin: 1rem 0 0 2.1rem; align-items: end; }
.diag__campos > .field { flex: 1 1 260px; }
.diag__campos > .diag__corto { flex: 0 1 200px; }
.diag__tres { margin-top: 1rem; }
@media (min-width: 640px) { .diag__tres { grid-template-columns: repeat(3, 1fr); } }
.diag__opciones { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; border: 0; flex: 1 1 100%; }
.diag__opcion { position: relative; display: inline-flex; }
.diag__opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.diag__opcion span { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1rem .5rem; border: 1.5px solid var(--line-strong); border-radius: 999px; font-size: .9375rem; transition: background .15s, border-color .15s, color .15s; }
.diag__opcion:hover span { border-color: var(--text); }
.diag__opcion input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.diag__opcion input:focus-visible + span { box-shadow: 0 0 0 3px rgba(46, 91, 255, .35); }
.diag__total { flex: 1 1 100%; margin: 0; font-family: var(--mono); font-size: .9375rem; color: var(--muted); }
.diag__total b { color: var(--text); }
.diag__sugerencias { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: .35rem; }
.diag__campos > .check { flex: 1 1 100%; }
.diag [data-si][hidden] { display: none; }
.diag > .check, .diag > .form__legal, .diag > .btn, .diag > .form__status { margin-top: 1.1rem; }
.diag > .check:first-of-type { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.diag__pdf { margin-top: 1rem; font-size: .9375rem; color: var(--muted); }
.diag__pdf a { color: var(--accent-text); font-weight: 800; }
@media (max-width: 560px) { .diag__ayuda, .diag__campos { margin-left: 0; } }