/* ============================================================
   BOOST — landing de validación
   Paleta y tipografía derivadas de la guía de marca del proyecto.
   ============================================================ */

/* --- Tokens ------------------------------------------------ */
:root {
  /* El ground y la tinta los pisa main.js en cada frame de scroll.
     Estos valores son el estado inicial (hero, negro) y el fallback
     si el JS no llega a correr. */
  --bg: 7 7 7;
  --fg: 255 255 255;

  /* El rojo del logo, no un coral suave. Sampleado del prototipo y de
     los mockups de referencia (#F25D3B / #FD5C3A) y llevado al tono
     saturado del ícono de la app. */
  --coral: #EE4526;
  --coral-hi: #FF5C3B;   /* hover: un paso mas claro */

  /* Para TEXTO en acento. Se mezcla con la tinta actual, asi se oscurece
     solo sobre los grounds claros y se aclara sobre los oscuros, sin
     tener que interpolar un token aparte en JS. */
  --coral-txt: color-mix(in oklab, var(--coral) 84%, rgb(var(--fg)));

  /* Neutro con leve sesgo cálido hacia el coral, no gris puro. */
  --slate: 128 128 128;

  --hair: rgb(var(--fg) / 0.14);
  --hair-soft: rgb(var(--fg) / 0.07);

  --font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1440px;

  --step: clamp(5.5rem, 15vh, 11.5rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* lo maneja Lenis */
}

body {
  margin: 0;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.6;
  overflow-x: clip;
  transition: none; /* la transición de color la interpola JS, no CSS */
}

img, svg, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Tipografía -------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-transform: uppercase;
  margin: 0;
}

.d-xl { font-size: clamp(3rem, 9.5vw, 8.5rem); }
.d-lg { font-size: clamp(2.4rem, 6.5vw, 5.75rem); }
.d-md { font-size: clamp(1.75rem, 3.6vw, 3.25rem); }

.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--fg) / 0.5);
  margin: 0;
}

.lede {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: rgb(var(--fg) / 0.68);
  max-width: 34ch;
  margin: 0;
}

.prose { max-width: 62ch; color: rgb(var(--fg) / 0.7); }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* --- Layout ------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--step); position: relative; z-index: 2; }

/* content-visibility: auto le dice al navegador que no calcule layout ni
   pinte las secciones que estan lejos de la pantalla -es la optimizacion
   de mayor impacto para una pagina larga de una sola vista-. El alto de
   reserva es una medida real de cada seccion (no una estimacion), para
   que el salto al des-omitirla sea minimo. main.js trae un ResizeObserver
   que vuelve a medir los capitulos de color apenas el alto real reemplaza
   al de reserva, asi el sistema de scroll nunca corre con datos viejos. */
/* contain-intrinsic-size reserva el CONTENT-BOX; el padding-block de
   .section (--step, responsivo por vh) se suma aparte incluso con
   box-sizing:border-box -es una particularidad real de la propiedad,
   no un descuido-. Se resta con calc() para que el alto total (lo que
   el usuario ve reservado) sea el medido, en cualquier alto de pantalla. */
#problema    { content-visibility: auto; contain-intrinsic-size: 1440px calc(1830px - 2 * var(--step)); }
#dispositivo { content-visibility: auto; contain-intrinsic-size: 1440px calc(1135px - 2 * var(--step)); }
#metodo      { content-visibility: auto; contain-intrinsic-size: 1440px calc(1099px - 2 * var(--step)); }
#metricas    { content-visibility: auto; contain-intrinsic-size: 1440px calc(1300px - 2 * var(--step)); }
#estado      { content-visibility: auto; contain-intrinsic-size: 1440px calc(1109px - 2 * var(--step)); }
#acceso      { content-visibility: auto; contain-intrinsic-size: 1440px calc(864px  - 2 * var(--step)); }

/* --- Nav: pildora flotante ---------------------------------- */
/* El pill se construye con el INVERSO de la tinta de la pagina, asi
   se invierte solo mientras el scroll cambia el fondo: claro sobre
   el hero negro, oscuro sobre la seccion blanca. Sin JS extra. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: clamp(0.75rem, 1.6vw, 1.35rem) var(--gutter);
  pointer-events: none;
}

.nav__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  border-radius: 999px;
  background: rgb(var(--fg) / 0.93);
  color: rgb(var(--bg));
  border: 1px solid rgb(var(--bg) / 0.06);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 1px 0 0 rgb(var(--fg) / 0.5) inset,
    0 18px 40px -18px rgb(0 0 0 / 0.45),
    0 2px 8px -2px rgb(0 0 0 / 0.18);
  transition: padding .45s cubic-bezier(.2,.7,.2,1), gap .45s cubic-bezier(.2,.7,.2,1);
}
.nav.is-stuck .nav__pill {
  padding-block: 0.4rem;
  gap: clamp(0.85rem, 2.4vw, 2.1rem);
}

.nav .nav__brand {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: rgb(var(--bg));
  display: inline-flex;
  align-items: baseline;
  flex: none;
}
.nav .nav__brand .dot { color: var(--coral); }

.nav__links {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  font-size: 0.875rem;
  font-weight: 500;
  flex: none;
}
.nav__links a {
  color: rgb(var(--bg) / 0.62);
  transition: color .25s ease;
  white-space: nowrap;
}
.nav__links a:hover { color: rgb(var(--bg)); }

/* El pill mantiene su propio anillo de foco legible sobre cualquier ground */
.nav a:focus-visible { outline-color: var(--coral); }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__pill { padding-left: 1.15rem; gap: 1rem; }
}

/* Footer: la misma marca pero sobre el ground de la pagina */
.footer .nav__brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: rgb(var(--fg));
  display: inline-flex;
  align-items: baseline;
}
.footer .nav__brand .dot { color: var(--coral); }

/* --- Encendido/conexión: mini ficha, no una oración densa --------
   Antes esto era un solo párrafo largo que leía como un bloque
   compacto. Separado en tres capas -el hecho principal (lede), el
   cómo (esta mini ficha, mismo lenguaje que las specs de arriba) y
   la letra chica (footnote)- respira mejor y es más fácil de escanear. */
.encendido {
  list-style: none;
  margin: 1.75rem auto 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  flex-wrap: wrap;
}
.encendido li { display: grid; gap: 0.35rem; text-align: center; }
.encendido__k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--fg) / 0.45);
}
.encendido__v {
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgb(var(--fg) / 0.85);
}

/* --- Botones ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.95em 1.7em;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--coral);
  /* Sobre el rojo la tipografia va SIEMPRE en blanco, en toda la pagina. */
  color: #FFFFFF;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), background .25s ease;
}
.btn:hover { background: var(--coral-hi); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform .25s ease; }
.btn:hover .arw { transform: translateX(4px); }

.btn--pill {
  padding: 0.72em 1.35em;
  font-size: 0.8125rem;
  white-space: nowrap;
  flex: none;
}

.btn--ghost {
  background: transparent;
  color: var(--coral-txt);
  padding-inline: 0;
  font-weight: 700;
}
.btn--ghost:hover { background: transparent; color: var(--coral-hi); }

/* --- Hero -------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 6rem;
  overflow: clip;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: image-set(url("../assets/hero.webp") 1x);
  background-size: cover;
  background-position: 62% 50%;
  will-change: transform, opacity;
}
/* Vela sobre la foto: garantiza contraste del texto sobre cualquier zona. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(4 4 4 / 0.94) 0%, rgb(4 4 4 / 0.75) 34%, rgb(4 4 4 / 0.1) 62%),
    linear-gradient(to top, rgb(4 4 4 / 0.85), transparent 45%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}

.hero__copy { max-width: 40rem; }

.hero__rule {
  width: 84px;
  height: 5px;
  border-radius: 999px;
  background: var(--coral);
  margin: 1.75rem 0 1.5rem;
  transform-origin: left center;
}

.hero__cta { margin-top: 2.25rem; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }

/* --- Foto del producto (showcase) ---------------------------- */
.producto-shot {
  margin: 0 auto;
  width: min(520px, 82vw);
  will-change: transform;
}
.producto-shot img {
  width: 100%;
  height: auto;
  /* El ground de esta seccion vale exactamente el fondo de la foto
     (248,248,246). Aun asi los bordes se difuminan, para que mientras
     el scroll cambia el color no se marque el rectangulo de la imagen.
     mix-blend-mode no sirve aca: .section abre contexto de apilamiento
     con z-index y aisla la mezcla. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

.producto-shot.is-in img { animation: flotar 7s ease-in-out 1s infinite; }
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* --- Sección "El problema": negro + grilla de instrumentación --- */
/* La grilla vive detrás del texto de apertura, en tono instrumento de
   medición. La escena con foto real llega después, más abajo, como
   la resolución del argumento -no compite con el texto de arriba
   porque ocupa su propio bloque. */
/* Un poco más de aire que el resto antes de que arranque "El dispositivo":
   la ventana de cambio de color es corta pero no instantánea, y el
   cierre necesita algo de scroll de sobra para leerse sin que el fondo
   ya esté a mitad de camino hacia el blanco de la sección siguiente. */
.section--problema { overflow: clip; padding-bottom: calc(var(--step) + clamp(2rem, 6vh, 4rem)); }
.problema__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgb(var(--fg) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--fg) / 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Se apaga hacia los bordes: la grilla sostiene el centro sin
     dejar un borde recto y artificial contra el resto de la página. */
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 40%, transparent 100%);
}
.section--problema .wrap { position: relative; z-index: 1; }
.problema__intro { max-width: 40rem; margin-inline: auto; }

/* --- Ticker ------------------------------------------------- */
/* Uno solo. Antes habia dos franjas apiladas (specs + hero strip) y
   competian entre si sin que se leyera ninguna. */
.ticker {
  border-block: 1px solid var(--hair-soft);
  overflow: clip;
  padding-block: 1.35rem;
  position: relative;
  z-index: 2;
}
.ticker__track {
  display: flex;
  gap: 3.25rem;
  width: max-content;
  will-change: transform;
}
.ticker__item {
  /* Sans, no mono: a este tamano el monoespaciado se vuelve ilegible. */
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  color: rgb(var(--fg) / 0.5);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}
.ticker__item b {
  color: rgb(var(--fg) / 0.95);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ticker__item::before {
  content: "";
  align-self: center;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
  margin-right: 0.35rem;
}

/* --- Bloques genéricos -------------------------------------- */
.stack { display: grid; gap: 1.5rem; }
.center { text-align: center; justify-items: center; }
.center .lede { max-width: 46ch; margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral-txt);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--coral-txt); }

/* --- Problema: la escena, no una tabla ----------------------- */
/* Una fotografía real con dos capas de burbujas superpuestas: la duda
   dispersa por fuera (sin orden, sin foco) y la lectura agrupada cerca
   del centro (compacta, resuelta). Un pill alterna solo entre los dos
   estados -la animación ES el argumento: la incertidumbre se ordena
   sola en cuanto hay un dato real de por medio-. */
.escena {
  position: relative;
  margin: clamp(2.5rem, 6vh, 4.5rem) 0 0;
  overflow: clip;
  border-radius: clamp(8px, 0.9vw, 12px);
  border: 1px solid rgb(var(--fg) / 0.12);
}
.escena__bg {
  display: block; width: 100%; height: auto;
  transition: filter 0.9s ease, transform 0.9s ease;
}
/* Al resolverse, la foto cede protagonismo: se desenfoca un paso y se
   oscurece apenas, para que la lectura ordenada sea lo único nítido. */
.escena.is-resuelto .escena__bg { filter: blur(4px) brightness(0.82); transform: scale(1.045); }

/* Viñeta sutil: mantiene legibles las burbujas de las esquinas contra
   el fondo real de la foto, sin oscurecerla entera. */
.escena::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.4), transparent 22%, transparent 78%, rgb(0 0 0 / 0.45));
  pointer-events: none;
}

/* El pill NO cambia de lugar -es un interruptor real, como el de un
   celular-: lo que se desplaza es el círculo, de una punta a la otra,
   mientras la etiqueta le cede el espacio con el mismo movimiento. Por
   eso el ancho es fijo (no se ajusta al largo del texto): un ancho que
   respira con el contenido haría que el círculo "saltara" en vez de
   recorrer una distancia constante. */
.escena__toggle {
  position: absolute;
  z-index: 3;
  left: 50%; top: 40%;
  translate: -50% -50%;
  width: 10.25rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 0 16px 32px -12px rgb(0 0 0 / 0.6);
  transition: background 0.6s ease;
}
.escena.is-resuelto .escena__toggle { background: #22C55E; }

.escena__toggle-knob {
  position: absolute;
  z-index: 1;
  top: 0.3rem; left: 0.3rem;
  width: 2.15rem; height: 2.15rem;
  border-radius: 50%;
  background: #fff;
  color: #14161C;
  display: grid;
  place-items: center;
  overflow: clip;
  transition: left 0.55s cubic-bezier(.65,0,.35,1);
}
.escena.is-resuelto .escena__toggle-knob { left: calc(100% - 2.15rem - 0.3rem); }

.escena__toggle-label {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: calc(2.15rem + 0.3rem + 0.55rem);
  padding-right: 0.9rem;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
  transition: padding 0.55s cubic-bezier(.65,0,.35,1);
}
.escena.is-resuelto .escena__toggle-label {
  justify-content: flex-end;
  padding-left: 0.9rem;
  padding-right: calc(2.15rem + 0.3rem + 0.55rem);
}
/* El puntito de marca es coral sobre fondo blanco en el nav; acá el
   pill YA es coral/verde, así que el punto va en blanco -mismo gesto
   de marca, adaptado para no desaparecer contra su propio fondo. */
.escena__toggle-label .dot { color: rgb(255 255 255 / 0.65); }
/* La imagen completa, con su sombra suave intacta -recortarla de
   entrada dejaba un borde recto y artificial en la sombra-. El
   "zoom" se hace acá, escalando el círculo entero: la sombra se
   sigue apagando de forma natural, solo que más cerca del borde. */
.escena__toggle-knob img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }

.escena__dudas, .escena__respuestas {
  list-style: none;
  margin: 0; padding: 0;
  position: absolute; inset: 0;
  z-index: 2;
}
.escena__dudas li, .escena__respuestas li {
  position: absolute;
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  scale: 0.6;
  opacity: 0;
  background: rgb(var(--fg) / 0.95);
  color: #14161C;
  font-family: var(--font-body);
  font-weight: 700;
  /* Fluido, no fijo: el ancho del globo es fijo en rem pero el marco
     de la foto se angosta con el viewport -a los anchos intermedios
     (tablet) el texto quedaba más cerca del borde que las posiciones
     estaban pensadas para tolerar y se recortaba contra el clip. */
  font-size: clamp(0.8125rem, 0.6rem + 0.7vw, 1rem);
  padding: 0.6em 1.05em;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 10px 22px -10px rgb(0 0 0 / 0.5);
  /* La animación continua de flotación usa `transform` -una propiedad
     distinta de `translate`/`scale`- así se suma sin pisar el centrado
     ni el efecto de aparición/ocultamiento. */
  animation: escenaFlota 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.22s);
  transition: opacity 0.5s cubic-bezier(.2,.7,.2,1), scale 0.55s cubic-bezier(.34,1.56,.64,1), translate 0.55s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
@keyframes escenaFlota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.escena__dudas li::after,
.escena__respuestas li::after {
  position: absolute;
  top: -0.4rem; right: -0.4rem;
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
}
.escena__dudas li::after { content: "?"; background: var(--coral); }
.escena__respuestas li::after { content: "✓"; background: #22C55E; }

/* Las dudas aparecen apenas la escena entra en pantalla -con el mismo
   sistema de .reveal que usa el resto del sitio-, y se ocultan de
   nuevo (en cascada, por --i) apenas se resuelve. Las respuestas hacen
   el camino inverso: aparecen solo al resolverse. */
.escena.is-in .escena__dudas li { opacity: 1; scale: 1; }
.escena.is-resuelto .escena__dudas li { opacity: 0; scale: 0.85; translate: -50% calc(-50% - 10px); }
.escena.is-resuelto .escena__respuestas li { opacity: 1; scale: 1; }

@media (max-width: 640px) {
  .escena__toggle { width: 8.75rem; height: 2.4rem; }
  .escena__toggle-knob { width: 1.8rem; height: 1.8rem; top: 0.3rem; left: 0.3rem; }
  .escena.is-resuelto .escena__toggle-knob { left: calc(100% - 1.8rem - 0.3rem); }
  .escena__toggle-label {
    font-size: 0.75rem;
    padding-left: calc(1.8rem + 0.3rem + 0.4rem);
    padding-right: 0.7rem;
  }
  .escena.is-resuelto .escena__toggle-label {
    padding-left: 0.7rem;
    padding-right: calc(1.8rem + 0.3rem + 0.4rem);
  }
  .escena__dudas li, .escena__respuestas li { font-size: 0.8125rem; padding: 0.5em 0.85em; }

  /* La foto queda mucho más angosta que alta acá, así que la cantidad
     de burbujas del desktop no entra sin recortarse contra el borde.
     Se muestra un subconjunto más corto, reubicado dentro de un margen
     seguro para que nada quede cortado por el overflow:clip. */
  .escena__dudas li:nth-child(4),
  .escena__dudas li:nth-child(7),
  .escena__dudas li:nth-child(8),
  .escena__dudas li:nth-child(9) { display: none; }
  .escena__dudas li:nth-child(1) { left: 20%; top: 9%; }
  .escena__dudas li:nth-child(2) { left: 50%; top: 6%; }
  .escena__dudas li:nth-child(3) { left: 82%; top: 15%; }
  .escena__dudas li:nth-child(5) { left: 87%; top: 32%; }
  .escena__dudas li:nth-child(6) { left: 17%; top: 36%; }

  /* Con 5 respuestas no entran todas sin apretujarse: se muestran las
     3 más cortas, repartidas en un arco ancho debajo del pill. */
  .escena__respuestas li:nth-child(1),
  .escena__respuestas li:nth-child(4),
  .escena__respuestas li:nth-child(6),
  .escena__respuestas li:nth-child(7) { display: none; }
  .escena__respuestas li:nth-child(2) { left: 25%; top: 63%; }
  .escena__respuestas li:nth-child(3) { left: 75%; top: 63%; }
  .escena__respuestas li:nth-child(5) { left: 50%; top: 78%; }
}

@media (prefers-reduced-motion: reduce) {
  .escena__toggle, .escena__toggle-knob, .escena__toggle-label,
  .escena__dudas li, .escena__respuestas li { transition: none; animation: none; }
  .escena__bg { transition: none; }
}

/* --- Problema: el cierre, como conclusión, no como nota al pie --- */
/* Antes era un párrafo suelto del mismo gris que el resto del texto:
   se perdía. Ahora es una tarjeta con acento y dos cifras grandes -el
   mismo lenguaje visual que las especificaciones- para que el dato
   "esto ya existe, y costaba una fortuna" quede imposible de saltear.

   Colores FIJOS, no derivados de --fg/--bg: esta tarjeta cae justo en
   la ventana de transición hacia la próxima sección (donde el fondo
   pasa de negro a blanco), y si sus colores se interpolaran junto con
   el resto de la página quedaría gris sobre gris mientras se scrollea
   -exactamente el problema que la ventana corta de transición intenta
   evitar en primer lugar-. Ancla siempre a la paleta oscura de esta
   sección, así se lee igual en cualquier punto del scroll.

   El fondo tiene que ser sólido, no un tinte translúcido: con solo
   3-4% de blanco encima, el negro/blanco animado de --bg se seguía
   viendo por debajo y terminaba blanqueando la tarjeta entera bajo un
   texto fijado en blanco -quedaba invisible apenas la página cruzaba
   la mitad de la transición-. */
.problema__cierre {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 20px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-left: 3px solid var(--coral);
  background: #161616;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.problema__cierre-texto {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.45;
  color: rgb(255 255 255 / 0.92);
  max-width: 46ch;
}
.problema__cierre-texto strong { color: var(--coral-hi); font-weight: 700; }

.problema__cierre-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}
.problema__cierre-stat { display: grid; gap: 0.35rem; }
.problema__cierre-num {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 500;
  color: var(--coral-hi);
  line-height: 1;
}
.problema__cierre-stat span:last-child {
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.6);
  max-width: 20ch;
}

@media (min-width: 861px) {
  .problema__cierre { grid-template-columns: 1fr auto; align-items: center; }
}

/* --- Especificaciones alrededor del producto ------------------ */
.specs {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.15fr) 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  margin-top: clamp(1rem, 3vh, 2.5rem);
}
.specs__col { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.75rem, 5vh, 3.25rem); }
.specs__col li { display: grid; gap: 0.3rem; position: relative; }

.specs__k {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgb(var(--fg) / 0.62);
}
.specs__v {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2.0625rem);
  letter-spacing: -0.01em;
  color: rgb(var(--fg));
}

/* --- Líneas guía: quebradas, con un anillo hueco en la punta -----
   Antes eran un segmento recto con un punto sólido -leía como una
   barra de progreso, no como una llamada de atención a un objeto-.
   Ahora cada fila apunta hacia el centro con un quiebre: la de arriba
   baja, la del medio va derecho, la de abajo sube -como en un plano
   técnico con despiece- y termina en un anillo, no un punto relleno.

   Los 6 casos (arriba/medio/abajo × izquierda/derecha) están escritos
   a mano, cada uno con su línea Y su anillo en el mismo lugar. Antes
   el anillo (posicionado aparte) y la línea (con scaleX/scaleY
   compuestos) se podían desalinear -pasó con la fila de abajo: el
   signo de una traducción quedó invertido y el anillo no coincidía
   con la punta real de la línea-. Sin transforms compuestos no hay
   forma de que eso vuelva a pasar: lo que se ve es lo que se escribió. */
.specs__col li::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: clamp(2rem, 4.5vw, 3.75rem);
  height: 22px;
  background: rgb(var(--fg) / 0.55);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.specs__col li::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--coral);
  background: rgb(var(--bg));
}

.specs__col--izq { text-align: right; }
.specs__col--izq li { padding-right: clamp(2.25rem, 4.5vw, 4rem); }
.specs__col--izq li::after { right: 0; }
.specs__col--izq li::before { right: 0; translate: 50% -50%; }

/* Fila 1 (arriba): el texto queda por encima del centro del producto,
   la línea baja para señalarlo. */
.specs__col--izq li:nth-child(1)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M2 3H34L59 19' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M2 3H34L59 19' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.specs__col--izq li:nth-child(1)::before { translate: 50% calc(-50% + 8px); }

/* Fila 2 (medio): a la altura del producto, va derecho. */
.specs__col--izq li:nth-child(2)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M2 11H59' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M2 11H59' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.specs__col--izq li:nth-child(2)::before { translate: 50% -50%; }

/* Fila 3 (abajo): el texto queda por debajo del centro, la línea sube. */
.specs__col--izq li:nth-child(3)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M2 19H34L59 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M2 19H34L59 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.specs__col--izq li:nth-child(3)::before { translate: 50% calc(-50% - 8px); }

/* Columna derecha: mismas tres formas, con las coordenadas X escritas
   en espejo a mano -no via transform: scaleX-, para que no dependa de
   que dos transforms se combinen bien. */
.specs__col--der li { padding-left: clamp(2.25rem, 4.5vw, 4rem); }
.specs__col--der li::after { left: 0; }
.specs__col--der li::before { left: 0; translate: -50% -50%; }

.specs__col--der li:nth-child(1)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M62 3H30L5 19' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M62 3H30L5 19' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.specs__col--der li:nth-child(1)::before { translate: -50% calc(-50% + 8px); }

.specs__col--der li:nth-child(2)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M62 11H5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M62 11H5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.specs__col--der li:nth-child(2)::before { translate: -50% -50%; }

.specs__col--der li:nth-child(3)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M62 19H30L5 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M62 19H30L5 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.specs__col--der li:nth-child(3)::before { translate: -50% calc(-50% - 8px); }

@media (max-width: 900px) {
  .specs { grid-template-columns: 1fr; gap: 1.5rem; }
  .specs__col { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
  .specs__col--izq { text-align: left; order: 2; }
  .specs__col--der { order: 3; }
  .producto-shot { order: 1; }
  /* El punto coral es el remate de la linea guia: sin destino que
     señalar en la grilla de 2 columnas de mobile, y con valores largos
     partidos en 2 lineas quedaba flotando lejos del texto. */
  .specs__col li::after,
  .specs__col li::before { display: none; }
  .specs__col--izq li, .specs__col--der li { padding: 0; }
}

/* --- Pasos: galería fotográfica ------------------------------ */
/* Tres tarjetas con foto real del producto en uso. La numeración
   flota sobre la imagen porque es una secuencia real (paso 1, 2, 3),
   no una decoración. */
.steps-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.step-card {
  border-radius: 22px;
  overflow: hidden;
  background: rgb(var(--fg) / 0.04);
  border: 1px solid rgb(var(--fg) / 0.09);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.step-card:hover { transform: translateY(-4px); border-color: rgb(var(--fg) / 0.18); }

.step-card__img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0a0a0a; /* evita el flash blanco mientras la foto carga */
}
.step-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.step-card:hover .step-card__img img { transform: scale(1.045); }

.step-card__badge {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 1;
  width: 2.35rem; height: 2.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--coral);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: 0 10px 22px -8px rgb(0 0 0 / 0.55);
}

.step-card__body { padding: 1.5rem 1.6rem 1.85rem; }
.step-card__body h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 0.55rem;
}
.step-card__body p { margin: 0; color: rgb(var(--fg) / 0.62); font-size: 0.9375rem; line-height: 1.55; }

@media (max-width: 780px) {
  .steps-gallery { grid-template-columns: 1fr; gap: 1.5rem; }
  .step-card__img { aspect-ratio: 4 / 3; }
}

/* --- Sección "Lectura en vivo": panel de telemetría ----------- */
/* Antes esta sección era gris claro sobre gris claro -la tarjeta y el
   fondo casi del mismo tono-, la razón de que se sintiera plana. Pasa
   a un capítulo oscuro (ver CAPITULOS en main.js) y la tarjeta se
   trata como un instrumento real: número con halo, línea con brillo
   y relleno degradado debajo, grilla de fondo. Mismo lenguaje que "El
   problema", para que las dos secciones instrumentadas se sientan de
   la misma familia. */
.section--metricas { overflow: clip; }
.metricas__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgb(var(--fg) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--fg) / 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 40%, transparent 100%);
}
.section--metricas .wrap { position: relative; z-index: 1; }

.chart-card {
  border: 1px solid rgb(var(--fg) / 0.14);
  border-radius: 22px;
  background: rgb(var(--fg) / 0.035);
  box-shadow: 0 1px 0 rgb(var(--fg) / 0.06) inset;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  gap: 2rem;
}
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.chart-head .label { display: inline-flex; align-items: center; gap: 0.85em; }
.chart-head .big {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* El halo blanco detrás del número es lo que lo hace leer como una
     lectura de instrumento en vivo, no como un titular mas. */
  text-shadow: 0 0 46px rgb(var(--fg) / 0.45);
}
.chart-head .big em { font-style: normal; font-size: 0.35em; color: rgb(var(--fg) / 0.5); margin-left: 0.35em; text-shadow: none; }

/* Punto que respira junto a "Velocidad media": el mismo recurso que
   un indicador REC o LIVE en un panel real. */
.pulso {
  position: relative;
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
}
.pulso::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--coral);
  animation: pulso 2.2s ease-out infinite;
}
@keyframes pulso {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid-line { stroke: rgb(var(--fg) / 0.12); stroke-width: 1; stroke-dasharray: 3 5; }
.chart .fill-stop-a { stop-color: var(--coral); stop-opacity: 0.3; }
.chart .fill-stop-b { stop-color: var(--coral); stop-opacity: 0; }
.chart .area { opacity: 0.9; }
.chart .series { fill: none; stroke: var(--coral); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--coral); stroke: rgb(var(--bg)); stroke-width: 2.5; }
.chart .dot--final { filter: drop-shadow(0 0 8px var(--coral)); }
.chart .axis { font-family: var(--font-mono); font-weight: 500; font-size: 12px; fill: rgb(var(--fg) / 0.5); }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgb(var(--fg) / 0.1); border: 1px solid rgb(var(--fg) / 0.1); border-radius: 16px; overflow: hidden; }
.metric { background: rgb(var(--bg)); padding: 1.4rem clamp(1rem, 2vw, 1.75rem); }
.metric .v { font-family: var(--font-mono); font-size: clamp(1.4rem, 3vw, 2rem); font-variant-numeric: tabular-nums; display: block; line-height: 1.1; }
.metric .k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--fg) / 0.45); }
@media (max-width: 640px) { .metrics { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .pulso::after { animation: none; opacity: 0.5; transform: scale(1.4); }
}

/* --- Estado del proyecto ------------------------------------ */
.status-table { width: 100%; border-collapse: collapse; margin-top: 2.5rem; }
.status-table th, .status-table td { text-align: left; padding: 0.95rem 0.5rem; border-bottom: 1px solid var(--hair-soft); font-size: 0.9375rem; }
.status-table th { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(var(--fg) / 0.45); font-weight: 400; }
.status-table td:last-child { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3em 0.7em; border-radius: 999px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--ok { color: #4ADE80; background: rgb(74 222 128 / 0.1); }
.pill--wait { color: #FBBF24; background: rgb(251 191 36 / 0.1); }
.table-scroll { overflow-x: auto; }

/* --- Waitlist ----------------------------------------------- */
.waitlist { position: relative; }
.waitlist::before {
  content: "";
  position: absolute;
  left: 50%; top: 45%;
  width: min(760px, 90vw); aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle, rgb(238 69 38 / 0.16), transparent 66%);
  pointer-events: none;
  z-index: -1;
}
.form {
  display: flex;
  gap: 0.6rem;
  max-width: 30rem;
  margin: 2.25rem auto 0;
  flex-wrap: wrap;
  justify-content: center;
}
.form input[type="email"] {
  /* base chica para que entren input y boton en una sola linea */
  flex: 1 1 11rem;
  min-width: 0;
  background: rgb(var(--fg) / 0.06);
  border: 1px solid var(--hair);
  color: rgb(var(--fg));
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 0.95em 1.35em;
  border-radius: 999px;
}
.form input::placeholder { color: rgb(var(--fg) / 0.38); }
.form input:focus { border-color: var(--coral); outline: none; }
.form__note { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: rgb(var(--fg) / 0.4); margin-top: 1.1rem; }
.form__msg { min-height: 1.4em; font-family: var(--font-mono); font-size: 0.8125rem; margin-top: 1rem; }
.form__msg[data-state="ok"] { color: #4ADE80; }
.form__msg[data-state="err"] { color: #FB7185; }

/* --- FAQ ---------------------------------------------------- */
.faq { border-top: 1px solid var(--hair-soft); margin-top: 3rem; }
.faq details { border-bottom: 1px solid var(--hair-soft); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 2.5rem 1.35rem 0;
  font-size: 1.0625rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 0.25rem; top: 50%;
  translate: 0 -50%;
  font-family: var(--font-mono);
  color: var(--coral-txt);
  font-size: 1.25rem;
  transition: rotate .3s ease;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq p { margin: 0 0 1.5rem; color: rgb(var(--fg) / 0.65); max-width: 62ch; }

/* --- Footer ------------------------------------------------- */
.footer { border-top: 1px solid var(--hair-soft); padding-block: 3rem 2.5rem; position: relative; z-index: 2; }
.footer__row { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.footer small { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: rgb(var(--fg) / 0.4); text-transform: uppercase; }

/* --- Botón flotante de la sección "Dispositivo" ------------- */
/* Aparece deslizando desde abajo SOLO mientras esa sección está en
   pantalla, y se retrae con el mismo movimiento invertido al salir
   (para cualquier lado: siguiendo el scroll o volviendo atrás). */
.floating-cta {
  position: fixed;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  z-index: 55;
  translate: -50% 0;

  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.95em 1.75em;
  border-radius: 999px;
  background: var(--coral);
  color: #FFFFFF;
  box-shadow: 0 16px 32px -12px rgb(0 0 0 / 0.45);

  opacity: 0;
  transform: translateY(140%);
  pointer-events: none;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-cta:hover { background: var(--coral-hi); }
.floating-cta .arw { transition: transform .25s ease; }
.floating-cta:hover .arw { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .floating-cta { transition: opacity .3s ease; transform: translateY(0); }
}

/* --- Reveal de scroll --------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }

/* --- Accesibilidad ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .producto-shot.is-in img { animation: none; }
  .ticker__track { animation: none !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* Modo QA (?y=): congela transiciones para poder capturar el estado final */
html.qa-instant *,
html.qa-instant *::before,
html.qa-instant *::after {
  transition: none !important;
  animation: none !important;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Responsive del hero ------------------------------------ */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .hero {
    min-height: 100svh;
    padding-top: 5.75rem;
    padding-bottom: 4.5rem;
    align-items: flex-start;
  }
  /* Con background-size: cover el recorte es solo horizontal y el sensor
     cae siempre a media altura, justo detras del parrafo. Agrandando la
     imagen aparece margen vertical y se lo puede bajar bajo el CTA. */
  .hero__bg {
    /* hero-sm.webp: recorte propio para mobile, 1/3 del peso de hero.webp.
       Antes el telefono bajaba el mismo archivo de escritorio entero. */
    background-image: image-set(url("../assets/hero-sm.webp") 1x);
    background-size: auto 128%;
    background-position: 73% 0%;
  }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgb(4 4 4 / 0.95) 0%, rgb(4 4 4 / 0.86) 34%, rgb(4 4 4 / 0.12) 58%, rgb(4 4 4 / 0.22) 82%, rgb(4 4 4 / 0.78) 100%);
  }
  .hero__copy { max-width: none; }
  .hero__cta { margin-top: 1.75rem; gap: 1.1rem; }
}