/* ============================================================================
   AbyNova · styles.css
   Depende de tokens.css. Todo va scopeado bajo #abn porque en Bitrix el HTML
   entra dentro de la página del constructor y comparte documento con su tema.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fw-regular) var(--fs-400)/var(--lh-body) var(--font-sans);
}
/* -webkit-font-smoothing: antialiased SALIÓ del body.
   Cambia de suavizado subpíxel a suavizado de grises, lo que ADELGAZA el texto
   sobre fondo claro y le baja el contraste percibido: sobre papel cálido con
   el cuerpo a 400 se veía débil. Se queda solo donde sí ayuda — texto claro
   sobre oscuro, que con subpíxel engorda de más. */
#abn .noche { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ============================================================================
   TODAS las reglas de base van dentro de :where(#abn), no de #abn.

   Por qué importa y no es un detalle: el HTML se publica dentro del constructor
   de Bitrix y comparte documento con su tema, así que hay que scopear con el id.
   Pero un id pesa (1,0,0) y le gana a cualquier clase, así que `#abn h2` pisaba
   a `.noche h2` — y el resultado fue tinta #17151F sobre fondo #120E1E:
   **1.03:1, un titular invisible**, que es justo lo que el dueño prohibió.

   `:where()` aporta CERO especificidad: el scope se conserva y las clases de
   sección vuelven a ganar. La salida es bajar la especificidad de la base, no
   subir la de todo lo demás.
   ========================================================================= */
:where(#abn) img, :where(#abn) video, :where(#abn) canvas {
  max-width: 100%; height: auto; display: block;
}
:where(#abn) svg { width: 1em; height: 1em; display: block; }

:where(#abn) :is(h1, h2, h3, h4) {
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}
/* El serif SOLO en h1 y h2. Si bajara hasta h4 dejaría de significar jerarquía
   y sería una decoración. Y va en 400: un serif a peso normal en 64 px se lee
   más caro que cualquier grotesca en 700. */
:where(#abn) :is(h1, h2) { font-family: var(--font-display); font-weight: 400; }
:where(#abn) :is(h3, h4) { font-family: var(--font-sans); font-weight: var(--fw-semibold); }
/* El interlineado y el tracking se calibran POR TAMAÑO, no una vez.
   Un serif a 52 px con 1.2 flota; a 26 px con 1.12 se choca. Y -.02em fijo
   daba proporcionalmente el mismo apretón a 34 px que a 52: el tracking óptico
   tiene que aflojarse cuando el tamaño baja, sobre todo en un serif con
   acentos. El piso de 1.08 en h1 no se toca: es lo que salva a las MAYÚSCULAS
   ACENTUADAS de chocarse. */
:where(#abn) h1 { font-size: var(--fs-900); line-height: var(--lh-tight);
                  letter-spacing: -.008em; }
:where(#abn) h2 { font-size: var(--fs-800); line-height: 1.16;
                  letter-spacing: -.004em; }
:where(#abn) h3 { font-size: var(--fs-700); line-height: 1.25; }
@media (min-width: 62em) {
  :where(#abn) h1 { letter-spacing: -.026em; }
  :where(#abn) h2 { letter-spacing: -.018em; }
}
:where(#abn) p  { margin: 0; max-width: var(--measure); text-wrap: pretty; }
:where(#abn) :is(ul, ol) { margin: 0; padding: 0; }

/* Enlaces de texto: bronce, nunca oro. El oro sobre papel da 1.73:1 y es
   ilegible — es el error número uno de las marcas amarillas.
   También va en :where(): si no, este color le ganaba al del botón dorado y
   dejaba texto bronce sobre oro, 4.47:1, por debajo de AA. */
:where(#abn) a { color: var(--accent-text); text-underline-offset: .18em; }

/* Un solo anillo de foco para toda la página. Se toca desde teclado. */
#abn :where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
#abn .noche :where(a, button, summary):focus-visible { outline-color: var(--focus-noche); }

.saltar {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--text);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); z-index: var(--z-modal);
}
.saltar:focus { left: var(--sp-4); top: var(--sp-4); }

/* ------------------------------------------------------------------ layout */
.container, .container-narrow, .container-wide {
  width: 100%; margin-inline: auto; padding-inline: var(--gutter);
}
.container        { max-width: var(--container); }
.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }

.sec { padding-block: var(--section-py); }
/* Los momentos respiran, el apoyo se aprieta. Sin esto el scroll era
   129,6 · 129,6 · 129,6 · … doce veces, que es un metrónomo y no una partitura. */
.sec--mayor { padding-block: var(--section-py-lg); }
.sec--ap    { padding-block: var(--section-py-sm); }
/* Un h2 de momento pesa 52 px; uno de apoyo, 36. Tres alturas de titular en la
   página —68 / 52 / 36— es lo que hace que se lea como si alguien la dirigiera. */
.sec--mayor h2 { font-size: var(--fs-850); line-height: 1.1; }
.sec--alt { background: var(--bg-alt); }
.sec__enc { margin-block-end: var(--section-gap); }
.sec__bajada {
  font-size: var(--fs-500); color: var(--text-muted);
  max-width: var(--measure-bajada); margin-block-start: var(--sp-4);
}
.sec--pagina { padding-block-start: calc(var(--section-py) * .6); }
.sec--pagina h2 { margin-block: var(--sp-10) var(--sp-4); font-size: var(--fs-700); }
.sec--pagina h3 { margin-block: var(--sp-6) var(--sp-3); font-size: var(--fs-600); }
.sec--pagina p, .sec--pagina li { color: var(--text-muted); margin-block-start: var(--sp-4); }
.sec--pagina ul, .sec--pagina ol { padding-inline-start: var(--sp-6); }
.sec--pagina li { list-style: initial; }
.sec--pagina ol li { list-style: decimal; }

.eyebrow {
  font-size: var(--fs-200); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 var(--sp-3);
}
.nota {
  margin-block-start: var(--sp-6); font-size: var(--fs-300);
  color: var(--text-muted); max-width: var(--measure);
}

/* ------------------------------------------------------------------ botones */
.btn {
  --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: var(--sp-3) var(--sp-6);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-btn);
  font: var(--fw-semibold) var(--fs-400)/1 var(--font-sans);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
/* hover solo donde hay puntero: en táctil el trabajo lo hace :active */
@media (hover: hover) { .btn:hover { --btn-bg: var(--accent-hover); box-shadow: var(--e2); } }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn--fantasma { --btn-bg: transparent; --btn-fg: var(--accent-text); --btn-bd: var(--border-strong); }
.btn--lg { min-height: 52px; padding-inline: var(--sp-8); font-size: var(--fs-500); }
.btn--block { width: 100%; }

/* ------------------------------------------------------------------ cabecera */
.cab {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  border-block-end: 1px solid var(--border);
}
.cab__in {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--header-h);
}
.cab__marca {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--fs-500); color: var(--text); text-decoration: none;
  margin-inline-end: auto;
}
/* El glifo de marca: núcleo lleno + anillo. Se dibuja con CSS, sin SVG, para
   que el sanitizador de Bitrix no tenga nada que borrar. Sobrevive a 16 px
   porque es un punto y una elipse, y nada más. */
/* 🔑 SIN degradado radial. El anterior era
   `radial-gradient(circle at 42% 38%, ...)`: una esfera con brillo especular
   descentrado, y eso se lee como caramelo INDEPENDIENTEMENTE del color. Cuando
   la paleta pasó de oro a latón, al glifo solo le cambió el tono a la yema: la
   forma seguía siendo la misma. Es la variable que más pesa de todas, más que
   el color.
   El reemplazo es un disco de latón MECANIZADO: cónico sutil, que se lee como
   las marcas de torneado del disco del héroe, y una arista dura en vez de un
   brillo. Plano y facetado, no volumétrico. */
.marca__glifo {
  width: 1.4em; height: 1.4em; border-radius: 50%; position: relative;
  background:
    conic-gradient(from 210deg,
      var(--laton-noche) 0deg, #F0DCAE 60deg, var(--laton-noche) 130deg,
      var(--laton) 200deg, var(--laton-noche) 290deg, #F0DCAE 340deg, var(--laton-noche) 360deg);
  box-shadow: inset 0 0 0 1px var(--bronce);
  flex: none;
}
.marca__glifo::after {
  content: ""; position: absolute; inset: -22% -8%;
  /* Latón y no magenta: dos metales peleando en un glifo de 22 px es ruido.
     El magenta sobrevive donde sí diferencia, en el fresnel de la escena. */
  border: 1.5px solid var(--laton); border-radius: 50%;
  transform: rotate(-28deg); opacity: .9;
}
.cab__nav { display: none; gap: var(--sp-5); }
.cab__nav a { color: var(--text-muted); text-decoration: none; font-size: var(--fs-300); }
.cab__nav a[aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); }
.cab__idiomas { display: flex; gap: var(--sp-1); }
/* El selector de idioma se toca con el pulgar en un sitio que sirve tres
   idiomas: tiene que llegar al mínimo táctil. Con padding solo quedaba en
   29 px de alto. `min-height` + centrado lo lleva a 44 sin agrandar la
   tipografía ni romper la altura de la cabecera. */
.cab__idiomas a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); min-width: 2.25rem;
  padding-inline: var(--sp-2); border-radius: var(--r-xs);
  font-size: var(--fs-200); font-weight: var(--fw-semibold);
  color: var(--text-subtle); text-decoration: none;
}
.cab__idiomas a[aria-current="true"] { color: var(--text); background: var(--bg-alt); }
.cab__cta { display: none; }

@media (min-width: 48em) {
  .cab__nav { display: flex; }
  .cab__cta { display: inline-flex; }
}

/* ------------------------------------------------------------------ héroe */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 6vw, 4rem); }
.hero__in { display: grid; gap: var(--sp-10); }
.hero__sub {
  font-size: var(--fs-500); color: var(--text-muted);
  max-width: var(--measure-tight); margin-block-start: var(--sp-5);
}
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-block-start: var(--sp-8);
}
.hechos {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-block-start: var(--sp-8); list-style: none;
  font-size: var(--fs-300); color: var(--text-muted);
}
.hechos li { display: flex; align-items: center; gap: var(--sp-2); }
.hechos li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* La escena: la marca como pieza de latón, fotografiada.
   Ya no hay canvas ni póster. El objeto trae su propio fondo índigo, así que la
   caja no necesita ni fondo ni recorte: el borde se disuelve con una máscara
   radial en vez de terminar en un rectángulo redondeado. Un cuadrado oscuro con
   esquinas de 24 px al lado del texto no era una escena, era un icono de app
   grande — y es la mitad del efecto "widget" que se quería sacar. */
.hero__escena {
  position: relative; aspect-ratio: 1; width: 100%;
  max-width: 30rem; margin-inline: auto;
}
/* MEDALLÓN, no difuminado.
   El render trae su propio fondo índigo, y fundirlo en el papel con una máscara
   que muere en `transparent` dejaba un nubarrón gris-marrón sobre crema: se
   leía como un PNG que alguien no supo recortar. Un disco de borde limpio se
   lee como una decisión; un halo difuso se lee como un error.
   El corte de la máscara (46/47%) y el disco de atrás comparten centro y radio:
   si se separan, vuelve a aparecer un anillo sucio. */
.hero__escena::before {
  content: ""; position: absolute; inset: 4%;
  border-radius: 50%; background: var(--noche);
}
.hero__pieza {
  position: relative;
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 46%, transparent 47%);
          mask-image: radial-gradient(circle at 50% 50%, #000 46%, transparent 47%);
}

@media (min-width: 62em) {
  .hero__in { grid-template-columns: 6fr 5fr; align-items: center; }
  /* El OBJETO sangra hacia el borde; el TEXTO nunca sale de la rejilla. Esa es
     la asimetría deliberada que reemplaza a la caja simétrica — y el motivo por
     el que el h1 volvió a .container: si el titular arranca 128 px a la
     izquierda del logo, la página no tiene rejilla, tiene dos. */
  .hero__escena {
    max-width: none;
    margin-inline-end: calc((var(--container-wide) - var(--container)) / -2);
  }
}

/* ------------------------------------------------------------------ chat */
.chat { list-style: none; max-width: 34rem; display: grid; gap: var(--sp-3); }
.chat__turno { display: grid; gap: var(--sp-1); }
.chat__quien {
  font-size: var(--fs-100); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-subtle);
}
.chat__texto {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  font-size: var(--fs-400); max-width: none;
}
.chat__turno--cliente { justify-items: start; }
.chat__turno--cliente .chat__texto {
  background: var(--surface); border: 1px solid var(--border);
  border-end-start-radius: var(--r-xs);
}
.chat__turno--bot { justify-items: end; text-align: right; }
/* La burbuja del bot era un relleno de oro saturado, y es el área grande de
   amarillo más repetida del sitio después del botón. Arena con tinta: sigue
   distinguiéndose de la burbuja del cliente (papel con filete) y deja de
   gritar. */
.chat__turno--bot .chat__texto {
  background: var(--arena); color: var(--text);
  border: 1px solid var(--laton-linea);
  border-end-end-radius: var(--r-xs);
}

/* ------------------------------------------------------------------ pasos */
.pasos { list-style: none; display: grid; gap: var(--sp-8); counter-reset: p; }
.paso { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-5); }
.paso__n {
  grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
}
.paso h3 { align-self: center; }
.paso p { grid-column: 2; color: var(--text-muted); }
@media (min-width: 48em) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
  .paso { grid-template-columns: 1fr; }
  .paso__n { grid-row: auto; }
}

/* ------------------------------------------------------------------ chips */
.rubros { display: grid; gap: var(--sp-8); align-items: start; }
.rubros__foto { order: -1; }   /* en móvil la foto va ARRIBA de los chips */
.rubro-foto {
  width: 100%; max-width: 22rem; margin-inline: auto;
  aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--e2);
  /* Sin transición de opacidad: la imagen nueva se baja al tocar el chip, y
     un fundido sobre algo que todavía no llegó se ve como un parpadeo. */
}
@media (min-width: 56em) {
  .rubros { grid-template-columns: 1fr auto; gap: var(--sp-12); }
  .rubros__foto { order: 0; }
  .rubro-foto { max-width: 20rem; }
}

/* --------------------------------------------- páginas de rubro (Fase 2)
   El menú real de la plantilla. Va NUMERADO porque en el chat el cliente
   contesta con el número: la lista ordenada no es decoración, es lo que ve.
   El número usa --accent-text (bronce) y no --accent (oro): el oro sobre papel
   da 1.73:1 y es relleno, nunca texto. */
.menu-real {
  margin-block-start: var(--sp-4); padding: 0; list-style: none;
  counter-reset: opcion;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden;
}
.menu-real li {
  counter-increment: opcion; margin: 0;
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text); font-size: var(--fs-400);
}
.menu-real li + li { border-block-start: 1px solid var(--border); }
.menu-real li::before {
  content: counter(opcion); flex: none; min-width: 1.4em; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--accent-text);
}

/* Las cifras de la plantilla: mismo componente que .hechos, con el número
   grande, que es el dato que se recuerda. */
.hechos--cifras { font-size: var(--fs-400); gap: var(--sp-3) var(--sp-8); }
.hechos--cifras b {
  font-size: var(--fs-700); color: var(--text); margin-inline-end: .35em;
  font-variant-numeric: tabular-nums;
}

/* Los 13 enlaces. Es lo único que un rastreador puede seguir: los chips son
   <button> y sin JS no llevan a ningún lado. */
.rubro-indice { margin-block-start: var(--sp-12); }
.rubro-enlaces {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-block-start: var(--sp-4); padding: 0;
}
/* list-style va en el LI y no en la UL: la lista de prosa de .sec--pagina lo
   fija en el li, y ponerlo en la ul no lo pisa — salían viñetas sueltas. */
.rubro-enlaces li { margin: 0; list-style: none; }
/* Medido en 375 px: estos 13 enlaces daban 88x18 --la mitad del minimo
   tactil-- y son los UNICOS enlaces de texto que un pulgar tiene que acertar
   en toda la home. Se les da la altura con el area de toque, no con padding
   visible: un enlace de prosa con caja pintada alrededor se lee como boton, y
   estos no son botones, son un indice. El margen negativo cancela el alto
   extra para que la lista no se separe. */
.rubro-enlaces a {
  font-size: var(--fs-400);
  display: inline-flex; align-items: center;
  min-height: var(--tap-min); margin-block: calc((var(--tap-min) - 1.5em) / -2);
}

.cierre-ctas {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-block-start: var(--sp-10);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: var(--sp-2) var(--sp-4);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  font: var(--fw-medium) var(--fs-300)/1.2 var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
@media (hover: hover) { .chip:hover { border-color: var(--accent-icon); } }
.chip[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
  font-weight: var(--fw-semibold);
}
.chip__nota {
  font-size: var(--fs-100); color: var(--text-subtle);
  padding: 2px var(--sp-2); border-radius: var(--r-full); background: var(--bg-alt);
}
.chip[aria-pressed="true"] .chip__nota { color: var(--on-accent); background: rgba(255,255,255,.16); }

/* El contador que se niega a subir. Es la única cifra de toda la página y
   funciona precisamente porque no crece. */
.contador {
  display: inline-flex; align-items: baseline; gap: var(--sp-3);
  margin-block-start: var(--sp-8); padding: var(--sp-4) var(--sp-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.contador__et { font-size: var(--fs-300); color: var(--text-muted); }
.contador__n {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-800);
  font-weight: var(--fw-semibold); color: var(--accent-text); line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ tarjetas */
.tarjetas {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.tarj {
  padding: var(--pad-card); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
}
.tarj__ic {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-md); background: var(--aviso-soft); color: var(--accent-icon);
  font-size: 1.5rem; margin-block-end: var(--sp-4);
}
.tarj h3 { font-size: var(--fs-600); }
.tarj p { margin-block-start: var(--sp-3); color: var(--text-muted); font-size: var(--fs-300); }

/* ------------------------------------------------------------------ noche */
/* Banda oscura. Acá el texto claro no es estética: es lo único que lo hace
   visible. Bitrix fuerza h1..h6 a #111, que sobre este fondo da 1.00:1. */
.noche {
  background: var(--noche); color: var(--noche-text);
  background-image: radial-gradient(ellipse at 82% -10%, rgba(255,194,77,.13), transparent 55%);
}
.noche h2, .noche h3 { color: var(--noche-text); }
.noche .sec__bajada { color: var(--noche-text-2); }
.noche .eyebrow { color: var(--noche-oro); }
.pisos { list-style: none; display: grid; gap: var(--sp-6); }
.piso {
  padding: var(--pad-card); border: 1px solid var(--noche-divisor);
  border-radius: var(--r-card); background: var(--noche-1);
}
.piso h3 { font-size: var(--fs-600); color: var(--noche-oro); }
.piso p { margin-block-start: var(--sp-3); color: var(--noche-text-2); font-size: var(--fs-300); }
@media (min-width: 48em) { .pisos { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ secuencia */
/* Tres columnas y no cuatro: son CINCO planos, y con cuatro por fila el quinto
   queda huérfano al costado y se lee como un error de maquetado. Con tres da
   3 + 2, y como la última fila reparte el ancho entre dos, esos dos quedan más
   grandes — que además son el turno agendado y la seña cobrada, o sea el pago
   de toda la secuencia. */
.secuencia {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.plano { margin: 0; display: grid; gap: var(--sp-3); }
.plano__marco {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-md); background: var(--gl-fondo);
  border: 1px solid var(--noche-divisor);
}
.plano__video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* El número ancla el orden de lectura. Sin él, una grilla que reflowea en
   móvil deja la secuencia sin secuencia. */
.plano__n {
  position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2);
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  /* El ÚNICO relleno metálico que sobrevive, y sobrevive porque vive sobre el
     video oscuro: ahí el metal es luz, no pintura. 9.64:1. */
  background: var(--laton-relleno); color: var(--sobre-laton);
  font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-semibold);
}
.plano__pie {
  font-size: var(--fs-300); line-height: var(--lh-body);
  color: var(--noche-text-2); max-width: 34ch;
}

/* ------------------------------------------------------------------ tablas */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
.cmp caption {
  text-align: start; color: var(--text-subtle);
  font-size: var(--fs-200); padding-block-end: var(--sp-3);
}
.cmp th, .cmp td {
  text-align: start; padding: var(--sp-3) var(--sp-4);
  border-block-end: 1px solid var(--border); vertical-align: top;
}
.cmp thead th { font-weight: var(--fw-semibold); color: var(--text); white-space: nowrap; }
.cmp tbody th { font-weight: var(--fw-regular); color: var(--text-muted); }
.cmp__si { color: var(--ok); font-weight: var(--fw-semibold); }
.cmp__no { color: var(--text-muted); }

/* Reflow a tarjetas en móvil: una tabla de 3 columnas en 360 px es ilegible. */
@media (max-width: 47.99em) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp tr {
    display: block; padding: var(--sp-4); margin-block-end: var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  }
  .cmp tbody th { display: block; border: 0; padding: 0 0 var(--sp-3);
                  color: var(--text); font-weight: var(--fw-semibold); }
  .cmp td { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4);
            padding: var(--sp-2) 0; border-block-end: 0; }
  .cmp td::before {
    content: attr(data-label); color: var(--text-subtle); font-size: var(--fs-200);
  }
}

/* ------------------------------------------------------------------ planes */
.planes {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
/* El filete lo RESERVAN las dos y solo cambia de color. Antes solo la
   destacada sumaba 3 px de borde y --sp-2 de relleno, así que "Básico" quedaba
   10 px más abajo que "Pro" — y con él el precio, y cada viñeta. Dos tarjetas
   iguales con todas las filas corridas 10 px es de esos detalles que nadie
   nombra y todos sienten. */
.plan {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--pad-card); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
  border-block-start: 3px solid transparent;
  padding-block-start: calc(var(--pad-card) + var(--sp-2));
}
@media (hover: hover) {
  .plan { transition: border-color var(--dur-2) var(--ease-out),
                      box-shadow var(--dur-2) var(--ease-out); }
  .plan:hover { border-color: var(--borde-control); box-shadow: var(--e2); }
}
/* Borde de color + sombra grande es el patrón exacto de toda plantilla de
   precios. Un filete de latón arriba y nada más: sobre papel, ese es el gesto
   más caro de la página. */
.plan[data-destacado="true"] { border-block-start-color: var(--laton); }
.plan__nombre { font-size: var(--fs-600); }
.plan__prueba {
  align-self: start;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  background: var(--ok-soft); color: var(--ok);
  font-size: var(--fs-200); font-weight: var(--fw-semibold);
}
.plan__precio { display: flex; align-items: baseline; gap: var(--sp-2); }
/* El precio es lo que se decide en esta página, así que es el número grande.
   Antes medía 40 px —lo mismo que TODOS los h2— y heredaba --lh-body 1.55, o
   sea una caja de 62 px de alto para 40 px de glifo: de ahí el hueco raro
   entre la cifra y "al mes". */
.plan__cifra, .servicio__cifra {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-precio); line-height: 1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums lining-nums;
}
.plan__periodo { font-size: var(--fs-300); color: var(--text-subtle); }
.plan__para { font-size: var(--fs-300); color: var(--text-muted); }
.plan__incluye { list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-300);
                 color: var(--text-muted); margin-block: var(--sp-2) auto; }
.plan__incluye li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); }
.plan__incluye li::before { content: "·"; color: var(--accent-icon); font-weight: var(--fw-semibold); }
.plan .btn { margin-block-start: var(--sp-5); }

/* ------------------------------------------------------------------ servicio */
/* La puesta en marcha va visualmente SEPARADA de los planes, en una sola tarjeta
   ancha. Si se pareciera a un cuarto plan, el visitante lee US$400 al mes. */
.servicio-zona { margin-block-start: var(--sp-16); }
.servicio-zona__t { font-size: var(--fs-700); }
.servicio-zona__b {
  margin-block-start: var(--sp-3); color: var(--text-muted);
  font-size: var(--fs-500); max-width: var(--measure);
}
.servicio {
  margin-block-start: var(--sp-8);
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
  box-shadow: var(--e2);
  display: grid; gap: var(--sp-6);
}
/* La foto va ARRIBA en móvil y a la derecha en escritorio. En móvil primero
   porque es lo que explica el servicio de un vistazo; en escritorio al costado
   para no empujar el precio abajo del pliegue. */
.servicio__foto {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-md);
}
@media (min-width: 56em) {
  .servicio { grid-template-columns: 1fr 16rem; align-items: start; }
  .servicio__foto { grid-column: 2; grid-row: 1 / span 5; }
  .servicio__cab, .servicio__para, .servicio__et,
  .servicio__incluye, .servicio__cierre { grid-column: 1; }
  .servicio__incluye { grid-template-columns: 1fr; }
}
.servicio__cab {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-6);
  padding-block-end: var(--sp-5); border-block-end: 1px solid var(--border);
}
.servicio__nombre { font-size: var(--fs-600); margin-inline-end: auto; }
.servicio__precio { display: flex; align-items: baseline; gap: var(--sp-2); }
.servicio__cifra {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-800);
  font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
/* "pago único" es la palabra que evita el malentendido más caro de la página.
   Va con el peso de una etiqueta, no de una nota al pie. */
.servicio__periodo {
  font-size: var(--fs-200); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--accent-text);
  padding: var(--sp-1) var(--sp-3);
  background: var(--aviso-soft); border-radius: var(--r-full);
}
.servicio__para {
  margin-block-start: var(--sp-5); font-size: var(--fs-500); color: var(--text);
}
.servicio__et {
  margin-block-start: var(--sp-6); font-size: var(--fs-200);
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-subtle);
}
.servicio__incluye {
  list-style: none; display: grid; gap: var(--sp-3);
  margin-block-start: var(--sp-4);
}
.servicio__incluye li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  color: var(--text-muted); font-size: var(--fs-300);
}
.servicio__incluye li::before {
  content: ""; width: 8px; height: 8px; margin-block-start: .5em; border-radius: 2px;
  background: var(--accent); flex: none;
}
.servicio__cierre {
  margin-block-start: var(--sp-6); padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-300); color: var(--text-muted);
}
@media (min-width: 48em) {
  .servicio__incluye { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-8); }
}

/* ------------------------------------------------------------------ confianza */
.verificable { list-style: none; display: grid; gap: var(--sp-3); }
.verificable li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  color: var(--text-muted);
}
.verificable li::before {
  content: ""; width: 8px; height: 8px; margin-block-start: .55em; border-radius: 2px;
  background: var(--ok); flex: none;
}

/* ------------------------------------------------------------------ faq */
.faq details { border-block-end: 1px solid var(--border); }
.faq summary {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--tap-min); padding-block: var(--sp-4);
  font-size: var(--fs-500); font-weight: var(--fw-semibold);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: var(--fs-600); color: var(--accent-icon); line-height: 1;
  transition: transform var(--dur-2) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-block-end: var(--sp-5); }
.faq details p { color: var(--text-muted); line-height: var(--lh-loose); }

/* ------------------------------------------------------------------ cierre */
.cierre {
  padding-block: var(--section-py); text-align: center;
  background: var(--bg-alt); border-block: 1px solid var(--border);
}
.cierre p {
  margin: var(--sp-4) auto var(--sp-8); color: var(--text-muted);
  font-size: var(--fs-500);
}

/* ------------------------------------------------------------------ pie */
.pie { padding-block: var(--sp-12) var(--sp-8); border-block-start: 1px solid var(--border); }
.pie__grid { display: grid; gap: var(--sp-8); }
.pie__marca { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-500); }
.pie__frase { color: var(--text-muted); font-size: var(--fs-300); margin-block-start: var(--sp-2); }
/* Los enlaces del pie son una columna de textos cortos: sin altura mínima
   quedan en 22 px y en el celular se toca el de al lado. El `gap: 0` es a
   propósito — el espacio ahora lo pone el área táctil de cada uno, y sumarle
   gap encima estiraría el pie sin necesidad. */
.pie__enlaces { display: grid; gap: 0; }
.pie__enlaces a {
  display: flex; align-items: center; min-height: var(--tap-min);
  color: var(--text-muted); text-decoration: none; font-size: var(--fs-300);
}
.cab__marca { min-height: var(--tap-min); }
.pie__dato { font-size: var(--fs-300); color: var(--text-muted); margin-block-end: var(--sp-2); }
.pie__aviso { color: var(--text); font-weight: var(--fw-medium); }
.pie__legal {
  margin-block-start: var(--sp-10); padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-100); color: var(--text-subtle); max-width: none;
}
@media (min-width: 48em) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ------------------------------------------------------------------ CTA móvil */
.cta-barra {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-cta-movil);
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + var(--safe-b));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-block-start: 1px solid var(--border);
  transform: translateY(115%);
  transition: transform var(--dur-3) var(--ease-out);
}
.cta-barra[data-visible="true"] { transform: none; }
@media (min-width: 48em) { .cta-barra { display: none; } }
body[data-cta="1"] { padding-block-end: calc(var(--cta-movil-h) + var(--safe-b)); }

/* ============================================================ el recorrido
   Un riel de latón con dockets colgando. No tarjetas, no carrusel, no burbujas
   de chat: las burbujas ya viven una sección más arriba, y repetirlas convierte
   la página en una app de mensajería.
   Todo se dibuja con CSS y no con SVG, por la misma razón que .marca__glifo: en
   Bitrix los <svg> se extraen y los reinyecta el JS DESPUÉS de DOMContentLoaded.
   Si el riel fuera SVG, la sección sería una caja vacía hasta que corra el JS. */
.recorrido__est { list-style: none; display: grid; gap: 0; }
.est {
  position: relative; padding: 0 0 var(--sp-10) var(--sp-10);
  border-inline-start: 1px solid var(--laton-linea);
}
.est:last-child { border-inline-start-color: transparent; padding-bottom: var(--sp-6); }
/* El nodo reusa el disco de .plano__n, que ya está verificado a 9.64:1. */
.est__n {
  position: absolute; inset-inline-start: -14px; inset-block-start: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--laton-relleno); color: var(--sobre-laton);
  font: var(--fw-semibold) var(--fs-200)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.est__area {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-200); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--noche-oro);
  margin-block-end: var(--sp-2);
}
.est__ic { width: 1.15em; height: 1.15em; color: var(--noche-oro); flex: none; }
/* La hora exacta —23:07, no "de noche"— es lo que separa un sistema de un
   afiche. Va en tabular para que las cinco se alineen entre estaciones. */
.est__hora {
  margin-inline-start: auto; color: var(--noche-text-3);
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.est h3 { color: var(--noche-text); font-size: var(--fs-600); }
.est__d { color: var(--noche-text-2); margin-block-start: var(--sp-3); max-width: var(--measure); }

/* El docket: el registro que deja cada área. Es texto con hora, no una tarjeta
   con sombra — por eso sobrevive impreso en blanco y negro. */
.dk {
  margin-block-start: var(--sp-5); padding: var(--sp-4);
  border: 1px solid var(--noche-divisor); border-radius: var(--r-card);
  background: var(--noche-1); max-width: 26rem;
}
.dk__t {
  font-size: var(--fs-100); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--noche-text-3);
  margin-block-end: var(--sp-3);
}
.dk__filas { list-style: none; display: grid; gap: var(--sp-2); }
.dk__filas li {
  display: flex; gap: var(--sp-4); align-items: baseline;
  font-size: var(--fs-300); color: var(--noche-text);
}
.dk__k { color: var(--noche-text-2); }
.dk__v { margin-inline-start: auto; text-align: right; font-variant-numeric: tabular-nums; }
/* Mostrar lo que el bot NO ofreció es la única forma de probar que cruzó la
   agenda. El estado no se comunica solo con la línea: la palabra "descartado"
   está escrita, porque entre el 6 y el 8 % de los varones no distingue bien
   rojo y verde y el comprador es mayoritariamente varón de 35 a 60. */
.dk__filas li[data-tachado] { color: var(--noche-text-3); text-decoration: line-through; }
.dk__filas li[data-aviso] .dk__v { color: var(--aviso-noche); }

.est__bif {
  margin-block-start: var(--sp-4); padding-inline-start: var(--sp-4);
  border-inline-start: 1px dashed var(--laton-linea);
  font-size: var(--fs-300); color: var(--noche-text-2); max-width: 26rem;
}

.recorrido__coda { margin-block-start: var(--sp-8); }
.recorrido__coda p { color: var(--noche-text-2); max-width: var(--measure); }
.tics {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  margin-block-start: var(--sp-4); padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--noche-divisor);
  font-size: var(--fs-200); color: var(--noche-oro);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.recorrido__cierre { color: var(--noche-text-3); margin-block-start: var(--sp-10); }

@media (min-width: 48em) {
  .est { padding-inline-start: var(--sp-12); }
}
/* En escritorio el docket se va a la derecha del texto. Sin esto queda media
   pantalla vacía y el recorrido se lee como una columna angosta perdida en la
   banda. El docket es el REGISTRO que deja el área: enfrentado al párrafo, se
   lee como el sistema respondiendo a lo que el texto acaba de contar. */
@media (min-width: 64em) {
  .est {
    display: grid; grid-template-columns: 1fr 24rem;
    column-gap: var(--sp-12); align-items: start;
  }
  .est__area, .est h3, .est__d { grid-column: 1; }
  .est .dk { grid-column: 2; grid-row: 1 / span 4; margin-block-start: 0; max-width: none; }
  .est__bif { grid-column: 1; }
}

/* --------------------------------------------------- la animación del riel
   SOLO se aplica con data-anim="1", que lo pone el JS. Sin JS, la sección se
   ve entera y quieta. Los tiempos son los del guion: riel 0, nodo 260,
   título 340, párrafo 440, docket 560, valores 740. Ese hueco de 180 ms entre
   la etiqueta y el valor es lo que hace que se lea como el sistema
   respondiendo y no como una caja que aparece. */
@media (prefers-reduced-motion: no-preference) {
  [data-anim="1"] .est { border-inline-start-color: transparent; }
  [data-anim="1"] .est::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: -1px;
    width: 1px; background: var(--laton-linea);
    transform: scaleY(0); transform-origin: top;
    transition: transform 380ms var(--ease-out);
  }
  [data-anim="1"] .est:last-child::before { display: none; }
  [data-anim="1"] .est > * { opacity: 0; transform: translateY(8px); }
  [data-anim="1"] .est__n { opacity: 0; transform: scale(.5); }

  [data-anim="1"] .est[data-visto]::before { transform: scaleY(1); }
  [data-anim="1"] .est[data-visto] > *,
  [data-anim="1"] .est[data-visto] .est__n {
    opacity: 1; transform: none;
    transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
  }
  [data-anim="1"] .est[data-visto] .est__n  { transition-duration: 240ms; transition-delay: 260ms; }
  [data-anim="1"] .est[data-visto] .est__area { transition-delay: 340ms; }
  [data-anim="1"] .est[data-visto] h3         { transition-delay: 340ms; }
  [data-anim="1"] .est[data-visto] .est__d    { transition-delay: 440ms; }
  [data-anim="1"] .est[data-visto] .dk        { transition-delay: 560ms; }
  [data-anim="1"] .est[data-visto] .est__bif  { transition-delay: 740ms; }
  [data-anim="1"] .dk__filas li { opacity: 0; transition: opacity 240ms var(--ease-out) 740ms; }
  [data-anim="1"] .est[data-visto] .dk__filas li { opacity: 1; }
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================================
   MOVIMIENTO — lo que faltaba
   De 12 secciones se movía una. Estas tres cosas son las que el visitante
   necesita ver moverse para entender el argumento.
   ⚠️ Regla que NO se rompe: ninguna opacidad arranca en 0 en contenido
   crítico. Todo lo de acá sale de 1, baja, y vuelve a 1: si el JS no llega,
   el texto está visible.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* --- La reescritura del chat ------------------------------------------
     Hoy el textContent se reemplaza de golpe y el ojo no lo registra: es
     literalmente el argumento del producto y pasa sin que se note. Baja a .35,
     se reescribe, y vuelve. El retardo de 90 ms en el segundo turno hace que
     se lea como el sistema respondiendo y no como dos cajas parpadeando. */
  .chat__texto {
    transition: opacity var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out);
  }
  .chat[data-cambiando="1"] .chat__turno:nth-child(1) .chat__texto,
  .chat[data-cambiando="1"] .chat__turno:nth-child(2) .chat__texto {
    opacity: .35; transform: translateY(-2px);
  }
  .chat[data-cambiando="1"] .chat__turno:nth-child(2) .chat__texto {
    transition-delay: 90ms;
  }

  /* --- El contador que se niega a subir ---------------------------------
     Es la mejor idea de la página y hoy es una caja quieta en la esquina. La
     broma solo funciona si se ve que ALGO pasó y el número igual no se movió.
     Por eso se anima el marco y JAMÁS la cifra. */
  .contador { position: relative; overflow: hidden; }
  .contador::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
    background: var(--laton); transform: scaleX(0); transform-origin: left;
    transition: transform 520ms var(--ease-out);
  }
  .contador[data-pulso="1"]::after { transform: scaleX(1); }

  /* --- La cabecera ------------------------------------------------------
     Llevaba el velo y el filete SIEMPRE, también en scroll 0, donde no hay
     nada detrás que velar. Un filete permanente en la primera pantalla es
     firma de plantilla. Solo se animan color de fondo y de borde: ninguna
     propiedad de layout. */
  .cab {
    background: transparent; backdrop-filter: none;
    border-block-end-color: transparent;
    transition: background var(--dur-3) var(--ease-out),
                border-color var(--dur-3) var(--ease-out);
  }
  .cab[data-pegado="1"] {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(1.3) blur(10px);
    border-block-end-color: var(--border);
  }
}

/* ============================================================================
   EL CIRCUITO — las fotos de las estaciones y la mitad DÍA
   El arco de latón entra por el borde izquierdo y sale por el derecho en las
   ocho fotos. Eso —y no las fotos— es lo que las vuelve un circuito. En la
   columna de noche el riel vertical hace de conector y el arco de cada foto le
   rima; en la fila de día los tres arcos SÍ se encadenan de izquierda a
   derecha, que es donde el circuito se lee literal.
   ========================================================================= */
.est__foto {
  /* Sin aspect-ratio: el arte se generó en 21:9 PARA este hueco, así que la
     proporción natural del archivo es la correcta y no hay nada que recortar.
     En móvil se ve entera; en escritorio se recorta al 47% central, que es
     donde entran el arco y el objeto a la vez. */
  display: block; width: 100%; height: auto; object-fit: cover;
  border-radius: var(--r-media); margin-block-end: var(--sp-5);
  /* Sin borde duro contra el fondo: la foto y la sección comparten el mismo
     índigo, y un filete ahí solo delataría el recorte. */
  box-shadow: 0 1px 0 color-mix(in srgb, var(--laton-noche) 12%, transparent) inset;
}

/* La estación YA tenía su grilla de escritorio: texto a la izquierda y ficha a
   la derecha, enfrentada al párrafo para que se lea como el sistema
   respondiendo a lo que el texto acaba de contar. Mi primer intento le puso la
   foto en esa segunda columna y empujó la ficha a la fila 1 de la primera: el
   orden de lectura quedó al revés —la ficha antes que el título que la
   explica— y el área, el h3 y la descripción cayeron debajo de la foto.
   La causa fue no haber leído la regla que ya existía antes de escribir otra.
   La foto va como BANDA sobre las dos columnas. Es mejor de todos modos: el
   arco de latón cruza el ancho entero de la estación, que es exactamente lo
   que lo vuelve un circuito y no una ilustración. */
@media (min-width: 64em) {
  .est__foto {
    grid-column: 1 / -1; grid-row: 1;
    /* Medido: a 21/9 la banda daba 411 px y se comía el 62% de la estación
       —cinco así y el texto, que es la sustancia, queda de pie de foto. A
       190 px la foto ocupa el 43% y el texto vuelve a mandar.
       El arte es 21:9 y a lo ancho de la estación daría 408 px de alto: el
       62% otra vez. Recortado al 47% central entran el arco —que cruza arriba—
       y el objeto —que se apoya abajo—, que es lo que NO entraba cuando el
       arte era cuadrado y había que quedarse con el 20%.
       Ese fue el camino largo: primero recorté al 57% suponiendo dónde estaba
       el arco, después "medí" y me dio 64% porque mi métrica encontró el
       brillo del objeto y no el arco, y con las dos se perdía algo. La salida
       no era encontrar el recorte bueno: era hacer el arte del tamaño del
       hueco. */
    height: clamp(150px, 19vw, 200px);
    margin-block-end: var(--sp-7);
  }
  /* La ficha empieza en la fila 2 porque la fila 1 ahora es la banda. Sin
     esto vuelve a montarse encima de la foto. */
  .est .dk { grid-row: 2 / span 4; }
}

/* --- la mitad DÍA ---------------------------------------------------------
   Las cinco estaciones de arriba cuentan el TRABAJO. La ganancia no estaba
   contada en ninguna parte y era literalmente lo pedido. Se cuenta sin un solo
   porcentaje inventado: no hay un cliente pago del que sacarlo. */
.ganancia {
  margin-block-start: var(--section-py-sm);
  padding-block-start: var(--section-py-sm);
  border-block-start: 1px solid var(--laton-linea);
}
.ganancia__enc { margin-block-end: var(--sp-8); }
.ganancia__t { color: var(--noche-text); font-size: var(--fs-800); line-height: 1.15; }
.ganancia__enc .sec__bajada { color: var(--noche-text-2); }

.ganancia__cuadros {
  list-style: none; display: grid; gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  /* Tres columnas y no dos: con dos, el tercer cuadro cae solo en la fila de
     abajo y el encadenado de los arcos —que es el argumento— se corta. */
  .ganancia__cuadros { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}
.gan { position: relative; }
.gan__foto {
  /* Generada en 4:3 para esta grilla de tres columnas: proporción natural,
     cero recorte. */
  display: block; width: 100%; height: auto;
  border-radius: var(--r-media); margin-block-end: var(--sp-4);
}
.gan__hora {
  font-size: var(--fs-300); letter-spacing: .06em; text-transform: uppercase;
  color: var(--noche-oro); font-variant-numeric: tabular-nums;
  margin-block-end: var(--sp-2);
}
.gan h3 { color: var(--noche-text); font-size: var(--fs-500); line-height: 1.25; }
.gan__d { color: var(--noche-text-2); margin-block-start: var(--sp-2); font-size: var(--fs-400); }

.ganancia__cierre {
  margin-block-start: var(--sp-8); color: var(--noche-text);
  font-size: var(--fs-600); line-height: 1.4; max-width: 46ch;
  border-inline-start: 2px solid var(--laton-noche);
  padding-inline-start: var(--sp-5);
}

/* La entrada de los tres cuadros de día, encadenada de izquierda a derecha para
   que el ojo siga el arco. Sale de 1: si el JS no llega, están visibles. */
@media (prefers-reduced-motion: no-preference) {
  /* data-visto lo pone el observador sobre CADA .gan, igual que sobre cada
     .est. Escribirlo como `[data-visto] .gan` —un ancestro marcado— dejaba los
     tres cuadros en opacidad 0 para siempre, porque el observador nunca mira
     el contenedor. Contenido invisible, y en silencio. */
  [data-anim="1"] .gan { opacity: 0; transform: translateY(10px); }
  [data-anim="1"] .gan[data-visto] {
    opacity: 1; transform: none;
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  }
  [data-anim="1"] .gan[data-visto]:nth-child(2) { transition-delay: 120ms; }
  [data-anim="1"] .gan[data-visto]:nth-child(3) { transition-delay: 240ms; }
}


/* ============================================================================
   ACABADO — los cinco del informe del 22-ago, cada uno medido antes de existir
   ========================================================================= */

/* 1. Veintisiete enlaces de la cabecera y el pie no reaccionaban al mouse: de
      267 reglas había TRES :hover. El enlace de nav además declaraba
      `transition: all` hacia un estado que nunca llegaba a existir.
      @media (hover: hover) para que un dedo no herede un estado de mouse. */
@media (hover: hover) {
  #abn .cab__nav a,
  #abn .pie__enlaces a { transition: color var(--dur-2) var(--ease-out); }
  #abn .cab__nav a:hover,
  #abn .pie__enlaces a:hover {
    color: var(--text); text-decoration: underline;
    text-underline-offset: .18em; text-decoration-thickness: 1px;
  }
}

/* 2. La jerarquía estaba invertida: el h2 medía 36 px en serif regular y el h3
      33 px en sans semibold. Ratio 1,09 —empate— y la sans bold gana
      ópticamente, así que el subtítulo pesaba más que el título que lo manda. */
#abn h3 { letter-spacing: -.01em; }

/* 3. El legal del pie medía 147 caracteres por línea: el único bloque de la
      página sin medida, y con `max-width: none` puesto a mano. Arriba de 85 el
      ojo pierde el renglón al volver. */
#abn .pie__legal { max-width: 70ch; }

/* 4. Un margen que se fugaba: la bajada lleva margin-top 16 px y colapsaba a
      través de .sec__enc y .container, así que #plantillas respiraba 95,2 px
      arriba mientras sus tres hermanas con la MISMA clase respiraban 79,2. Un
      desajuste de 16 px entre secciones que deberían ser idénticas. */
#abn .sec__enc > :first-child { margin-block-start: 0; }

/* 5. El selector de idioma medía 36×44 px: el único fallo táctil de 66
      elementos. La altura ya usaba --tap-min y el ancho se había quedado en
      2.25rem. */
#abn .cab__idiomas a { min-width: var(--tap-min); }