/* PlayManager — web comercial. Mobile-first: los estilos base son los del móvil
   y las media queries solo añaden columnas.
   Tres niveles de fondo: navy (por defecto), .noche (navy más oscuro) y .claro
   (papel azulado, una sola sección). Cada variante redefine los mismos tokens,
   así que el resto de reglas no sabe en cuál está.
   Movimiento: solo transform/opacity; todo lo que arranca oculto vive dentro de
   `prefers-reduced-motion: no-preference`, así sin animación se ve todo. */

@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* El navy y el azul son los de la app (mobile/src/theme/colors.ts). */
  --navy: #1b2a4a;
  --navy-hondo: #12224f;
  --navy-noche: #0f1a33;
  --azul: #2e6bf6;
  --azul-hover: #1f58dc;
  --azul-claro: #8db0ff;
  --foco: #ffd166;
  --ok: #1f9d55;
  --ancho: 1160px;
  --gutter: 16px;
  --radio: 16px;
  --radio-g: 24px;
  --cabecera: 64px;
  --titular: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --cuerpo: "Instrument Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  /* Tokens de la variante oscura (la de siempre). */
  --fondo: var(--navy);
  --tarjeta: rgba(255, 255, 255, 0.04);
  --caja: var(--navy-noche);
  --texto: #f3f6fb;
  --texto-suave: #b8c6df;
  --acento: #8db0ff;
  --cal: rgba(255, 255, 255, 0.08);
  --cal-fuerte: rgba(255, 255, 255, 0.16);
  --borde: rgba(255, 255, 255, 0.08);
  --borde-hover: rgba(255, 255, 255, 0.16);
  --brillo: rgba(255, 255, 255, 0.07);
  --divisor: linear-gradient(90deg, transparent, var(--cal-fuerte), transparent);
  --sombra-tarjeta: inset 0 1px 0 var(--brillo), 0 1px 2px rgba(0, 0, 0, 0.25);
  /* Grano: ruido SVG estático, se rasteriza una vez y se repite. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
.noche { --fondo: var(--navy-noche); --caja: #0b1327; }

/* Variante clara: fondo «papel» azulado y texto navy. Contrastes (AA):
   texto #14213d / #f2f5fb ≈ 15:1 · suave #46536d ≈ 7:1 · acento #1f58dc ≈ 5,6:1. */
.claro {
  --fondo: #f2f5fb;
  --tarjeta: #ffffff;
  --caja: #ffffff;
  --texto: #14213d;
  --texto-suave: #46536d;
  --acento: #1f58dc;
  --cal: rgba(27, 42, 74, 0.1);
  --cal-fuerte: rgba(27, 42, 74, 0.2);
  --borde: rgba(27, 42, 74, 0.12);
  --borde-hover: rgba(27, 42, 74, 0.28);
  --brillo: #fff;
  --sombra-tarjeta: 0 1px 2px rgba(27, 42, 74, 0.08), 0 18px 40px -26px rgba(27, 42, 74, 0.45);
  color-scheme: light;
}
.seccion, .portada, .cifras { background: var(--fondo); color: var(--texto); }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--texto);
  font: 400 1.02rem/1.6 var(--cuerpo);
  font-feature-settings: "ss03";
}
/* Nada de overflow-x en body: convertiría el body en contenedor de scroll y las
   animaciones ligadas al scroll (view()) dejarían de medir la ventana. */
main { overflow-x: clip; }

/* Las bandas del campo: dos líneas de cal fijas que enmarcan la página. Las
   secciones claras las tapan con su fondo; las oscuras las dejan ver. */
body::before {
  content: "";
  position: fixed;
  inset: 0 max(8px, calc(50% - var(--ancho) / 2 - 24px));
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--texto); }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 6px;
}
/* El amarillo no se ve sobre claro: ahí el foco es navy. */
.claro :focus-visible { outline-color: var(--navy); }

.salto {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: #fff; color: var(--navy); padding: 10px 14px; border-radius: 8px; font-weight: 600;
}
.salto:focus { top: 12px; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.centinela { position: absolute; top: 0; left: 0; width: 1px; height: 24px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }

/* ── Tipografía ──────────────────────────────────────────────────────────── */
h1, h2 { font-family: var(--titular); font-weight: 600; line-height: 1.02; text-transform: uppercase; letter-spacing: 0.005em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h3 { font: 500 1.35rem/1.25 var(--cuerpo); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0; }
.acento { color: var(--acento); }

.antetitulo {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.8rem/1 var(--cuerpo); letter-spacing: 0.14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--acento); margin-bottom: 16px;
}
.antetitulo .num { font-weight: 700; letter-spacing: 0.08em; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font: 600 1rem/1.2 var(--cuerpo); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s;
}
.boton-principal {
  background: var(--azul); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.boton-principal:hover, .boton-principal:focus-visible {
  background: var(--azul-hover); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 4px rgba(46, 107, 246, 0.25);
}
.boton-secundario { border-color: var(--cal-fuerte); color: var(--texto); background: transparent; }
.boton-secundario:hover { border-color: var(--texto); color: var(--texto); }
.boton-peq { min-height: 40px; padding: 8px 16px; font-size: 0.95rem; }
.boton-grande { min-height: 56px; padding: 14px 28px; font-size: 1.08rem; }
.flecha { width: 18px; height: 18px; flex: none; transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.flecha path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .boton-principal:hover .flecha { transform: translateX(3px); }
}

.insignia-play { display: inline-block; line-height: 0; border-radius: 10px; }
.insignia-play img { width: 135px; height: 40px; }

/* ── Cabecera: transparente arriba, compacta al bajar ────────────────────── */
.cabecera {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .25s, border-color .25s;
}
.cabecera .contenedor { display: flex; align-items: center; gap: 14px; min-height: var(--cabecera); transition: min-height .25s; }
.cabecera.compacta, .sin-js .cabecera {
  background: rgba(15, 26, 51, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .cabecera.compacta, .sin-js .cabecera { background: rgba(15, 26, 51, 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.cabecera.compacta .contenedor { min-height: 56px; }
.marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; }
.marca .icono { width: 34px; height: 32px; }
.marca .nombre { width: 118px; height: 37px; }
.nav { display: none; gap: 24px; margin-right: 12px; }
.nav a, .entrar { color: var(--texto-suave); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.nav a:hover, .entrar:hover { color: #fff; }
.cabecera .entrar { display: none; margin-right: 6px; }

/* ── Check del logo: se dibuja al entrar la sección en pantalla ──────────── */
.check { width: 30px; height: 30px; flex: none; overflow: visible; }
.check path { fill: none; stroke: var(--azul); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.check path + path { stroke: #cfe0ff; stroke-width: 2; }
.claro .check path + path { stroke: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .check path { stroke-dasharray: 70; stroke-dashoffset: 70; transition: stroke-dashoffset .7s cubic-bezier(.6, 0, .2, 1) .15s; }
  .check path + path { transition-delay: .35s; }
  .visto .check path, .sin-js .check path { stroke-dashoffset: 0; }
}

/* ── Marco de móvil (CSS puro): bisel en dos tonos, sombra en capas, reflejo ── */
.movil {
  position: relative; margin: 0;
  padding: 8px; border-radius: 34px;
  background: linear-gradient(160deg, #3b4f78 0%, #1b2947 42%, #0c1529 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 3px #080e1c,
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 2px 3px rgba(0, 0, 0, 0.35),
    0 24px 44px -18px rgba(0, 0, 0, 0.65),
    0 60px 110px -40px rgba(4, 10, 28, 0.9);
}
.claro .movil {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 3px #0f1a33,
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 2px 3px rgba(15, 26, 51, 0.25),
    0 24px 44px -18px rgba(15, 26, 51, 0.5),
    0 60px 110px -40px rgba(15, 26, 51, 0.6);
}
.movil::before {
  /* La isla de la cámara, sobre la cabecera navy de la app. */
  content: ""; position: absolute; top: 15px; left: 50%; width: 22%; height: 7px; transform: translateX(-50%);
  border-radius: 99px; background: #070d1a; z-index: 2;
}
.movil::after {
  /* Reflejo diagonal del cristal. */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.09) 45%, rgba(255, 255, 255, 0.03) 50%, transparent 57%);
}
.movil picture { display: block; border-radius: 26px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7); }
.movil picture, .movil img { width: 100%; }
/* Las capturas son de la web a 390×844. */
.movil img { aspect-ratio: 390 / 844; object-fit: cover; object-position: top; background: #f3f6fb; border-radius: 26px; }
/* Versión pequeña para las tarjetas de «Para quién». */
.movil-mini { padding: 4px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 2px #080e1c, inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 14px 28px -14px rgba(0, 0, 0, 0.7); }
.movil-mini::before { top: 8px; height: 4px; width: 24%; }
.movil-mini picture, .movil-mini img { border-radius: 14px; }

/* ── Grano (ruido estático) ──────────────────────────────────────────────── */
.grano { position: relative; }
.grano::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--grano); background-size: 160px 160px;
  opacity: .05; mix-blend-mode: overlay;
}

/* ── Portada ─────────────────────────────────────────────────────────────── */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--cabecera) + 28px) 0 56px;
  background:
    radial-gradient(ellipse 70% 38% at 50% 92%, rgba(46, 107, 246, 0.38), transparent 70%),
    radial-gradient(ellipse 60% 36% at 18% 12%, rgba(46, 107, 246, 0.16), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy) 70%, var(--navy-noche) 100%);
}
/* Rejilla fina de «campo», desvanecida por una máscara radial. */
.portada::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 64px);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 55% 55%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 70% at 55% 55%, #000 10%, transparent 72%);
}
.atmosfera { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.campo-centro { position: absolute; left: 50%; top: 68%; width: 720px; transform: translate(-50%, -50%); }
.cal { stroke: var(--cal-fuerte); fill: none; stroke-width: 1.5; }
.portada-rejilla { display: grid; gap: 40px; align-items: center; }
.portada h1 { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; margin-top: 2px; }
.portada h1 .linea { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.portada h1 .linea > span { display: block; }
.portada .entradilla { font-size: 1.15rem; color: var(--texto-suave); margin-top: 22px; max-width: 32rem; text-wrap: pretty; }
.acciones { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; align-items: center; }
.enlace-entrar { color: var(--texto-suave); text-decoration: none; }
.enlace-entrar strong { color: var(--texto); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--cal-fuerte); }
.enlace-entrar:hover strong { text-decoration-color: var(--texto); }
.portada-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.portada .nota { font-size: 0.9rem; color: var(--texto-suave); }

/* Un solo móvil grande con dos avisos encima y una luz detrás. */
.heroe { position: relative; display: flex; justify-content: center; padding-top: 30px; }
.heroe::before {
  content: ""; position: absolute; left: 50%; top: 55%; width: min(140vw, 620px); aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(46, 107, 246, 0.55) 0%, rgba(46, 107, 246, 0.18) 32%, transparent 62%);
}
.heroe-escena { position: relative; z-index: 1; width: min(60vw, 240px); }
.avisos { position: absolute; inset: 30px 0 0; pointer-events: none; z-index: 3; }
.aviso {
  position: absolute; display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255, 255, 255, 0.97); color: #14213d;
  border-radius: 16px; padding: 10px 12px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .5), inset 0 1px 0 #fff;
  font-size: 0.85rem; line-height: 1.3;
}
.aviso picture { flex: none; }
.aviso img { width: 30px; height: 28px; margin-top: 2px; }
.aviso-cab { display: flex; justify-content: space-between; gap: 12px; font-size: 0.72rem; color: #55617a; letter-spacing: .02em; white-space: nowrap; }
.aviso-cab span:first-child { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.aviso-tit { font-weight: 700; margin-top: 2px; }
.aviso-txt { display: flex; align-items: center; gap: 6px; }
.aviso-ok { width: 17px; height: 17px; flex: none; }
.aviso-ok circle { fill: var(--ok); }
.aviso-ok path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aviso-1 { top: 0; left: 0; width: min(80vw, 292px); }
.aviso-2 { bottom: 15%; right: 0; width: min(62vw, 224px); font-size: 0.8rem; padding: 9px 11px; }
.aviso-2 img { width: 24px; height: 22px; }

/* Entrada de la portada: líneas del título, luego entradilla, botones y pie; el
   móvil solo se desplaza (nunca arranca invisible: es la imagen LCP). */
@media (prefers-reduced-motion: no-preference) {
  .portada h1 .linea > span { animation: sube .6s cubic-bezier(.2, .7, .2, 1) both; }
  .portada h1 .linea:nth-child(2) > span { animation-delay: .07s; }
  .portada h1 .linea:nth-child(3) > span { animation-delay: .14s; }
  .portada h1 .linea:nth-child(4) > span { animation-delay: .21s; }
  .entra { animation: aparece .55s cubic-bezier(.2, .7, .2, 1) both; }
  .entra-0 { animation-delay: 0s; }
  .entra-1 { animation-delay: .24s; }
  .entra-2 { animation-delay: .32s; }
  .entra-3 { animation-delay: .4s; }
  .heroe .movil { animation: asienta .7s cubic-bezier(.2, .7, .2, 1) .16s both; }
  .aviso { animation: aviso-entra .6s cubic-bezier(.2, .8, .2, 1) both; }
  .aviso-1 { animation-delay: .9s; }
  .aviso-2 { animation-delay: 1.5s; }
  /* El círculo central y la línea de medio campo se dibujan al cargar. */
  .traza { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traza 1.6s cubic-bezier(.4, 0, .2, 1) .2s forwards; }
  .traza-2 { animation-delay: .6s; animation-duration: 1.2s; }
}
@keyframes sube { from { transform: translateY(108%); } to { transform: none; } }
@keyframes aparece { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes asienta { from { transform: translateY(28px) scale(.97); } to { transform: none; } }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes traza { to { stroke-dashoffset: 0; } }

/* ── Cifras del producto ─────────────────────────────────────────────────── */
.cifras { position: relative; padding: 36px 0 40px; }
.cifras::before, .cifras::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--divisor); }
.cifras::before { top: 0; }
.cifras::after { bottom: 0; }
.cifras-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.cifra { position: relative; }
.cifra-num { font: 700 clamp(3.4rem, 10vw, 5rem)/1 var(--titular); font-variant-numeric: tabular-nums; color: #fff; letter-spacing: -0.01em; }
.cifra-num small { font-size: .36em; font-weight: 600; color: var(--acento); letter-spacing: .03em; }
.cifra-txt { color: var(--texto-suave); margin-top: 8px; max-width: 20rem; font-size: 0.98rem; }

/* ── Secciones ───────────────────────────────────────────────────────────── */
.seccion { position: relative; padding: 64px 0; }
.seccion-cabeza { max-width: 46rem; margin-bottom: 32px; }
.titulo { display: flex; align-items: center; gap: 14px; }
.seccion-cabeza > p:last-child { color: var(--texto-suave); margin-top: 14px; font-size: 1.1rem; text-wrap: pretty; }
/* Divisores en degradado entre secciones oscuras contiguas. */
.seccion + .seccion::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--divisor); }
.seccion.claro::before, .seccion.claro + .seccion::before { display: none; }

/* ── Sistema de profundidad: tarjetas y piezas del bento ─────────────────── */
.tarjeta, .tile {
  position: relative; border-radius: var(--radio-g);
  border: 1px solid var(--borde);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  box-shadow: var(--sombra-tarjeta);
}
.claro .tarjeta { background: #fff; }
@media (hover: hover) {
  .tarjeta, .tile { transition: translate .25s cubic-bezier(.2, .7, .2, 1), border-color .25s; }
  .tarjeta:hover, .tile:hover { translate: 0 -2px; border-color: var(--borde-hover); }
}

/* ── Reveals al hacer scroll (sin JS) ────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .revela { animation: revela linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .revela-2 { animation-range: entry 6% cover 36%; }
    .revela-3 { animation-range: entry 12% cover 42%; }
  }
}
@keyframes revela { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ── La semana ───────────────────────────────────────────────────────────── */
/* En móvil: cada paso con su captura pequeña, para que la sección sea corta. */
.semana-pista { position: relative; }
.semana { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--cal-fuerte); display: grid; gap: 30px; }
/* Barra de progreso: se llena con el scroll de la sección (sin JS). */
.semana-progreso { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--azul); transform-origin: top; transform: scaleY(0); z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .semana-progreso { animation: llena linear both; animation-timeline: view(); animation-range: cover 45vh cover calc(100% - 45vh); }
  }
}
@keyframes llena { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.dia { position: relative; display: grid; gap: 18px; }
.dia::before {
  /* Marca de cal en la banda: un punto por día. */
  content: ""; position: absolute; left: -31px; top: 8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--fondo); border: 2px solid var(--acento); z-index: 2; transition: background-color .3s;
}
.dia.activo::before { background: var(--azul); border-color: var(--azul); }
/* El día en contorno; se rellena cuando es el activo. */
.dia-nombre { font: 600 clamp(2rem, 9vw, 4.6rem)/0.9 var(--titular); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--acento); letter-spacing: 0.02em; transition: color .4s; }
.dia.activo .dia-nombre { color: var(--acento); }
.paso { display: grid; gap: 18px; }
.paso .movil { width: min(70%, 280px); margin: 0 auto; }
.dia-cuando { font: 600 0.78rem/1.2 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.paso h3 { margin-top: 6px; }
.paso .texto p:last-child { color: var(--texto-suave); margin-top: 8px; font-size: 0.98rem; line-height: 1.55; }
.escenario { display: none; }

/* ── Funciones: foto a sangre en duotono + bento ─────────────────────────── */
.funciones { isolation: isolate; padding-top: 0; }
.foto-sangre {
  position: absolute; left: 0; right: 0; top: 0; height: min(78vh, 620px); overflow: hidden; z-index: 0;
  background: linear-gradient(135deg, var(--azul) 0%, var(--navy) 55%, var(--navy-noche) 100%);
}
.foto-sangre picture, .foto-sangre img { width: 100%; height: 100%; }
.foto-sangre img { object-fit: cover; object-position: 30% 62%; filter: grayscale(1) contrast(1.15) brightness(.8); mix-blend-mode: luminosity; opacity: .95; }
.foto-sangre::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 26, 51, 0.42) 0%, rgba(15, 26, 51, 0.3) 35%, rgba(15, 26, 51, 0.9) 78%, var(--navy-noche) 100%),
    linear-gradient(90deg, rgba(15, 26, 51, 0.55), transparent 35%, transparent 65%, rgba(15, 26, 51, 0.55));
}
.seccion-cabeza-foto { padding-top: 220px; margin-bottom: 36px; text-shadow: 0 2px 14px rgba(15, 26, 51, 0.7); }

.bento { display: grid; gap: 14px; }
.tile { padding: 22px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.tile h3 { font-size: 1.22rem; font-weight: 600; }
.tile-texto p { color: var(--texto-suave); margin-top: 6px; font-size: 0.97rem; text-wrap: pretty; }
.tile-alin { padding: 0; }
.tile-alin .tile-captura { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--borde); }
.tile-alin .tile-captura picture { position: absolute; inset: 0; }
.tile-alin .tile-captura img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.tile-alin .tile-texto { padding: 4px 22px 22px; }
/* Mini-interfaces en HTML (como los avisos): blancas sobre navy. */
.chat { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.burbuja { max-width: 86%; background: #fff; color: #14213d; border-radius: 16px 16px 16px 5px; padding: 8px 12px; font-size: 0.86rem; line-height: 1.35; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6); }
.burbuja .quien { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #55617a; margin-bottom: 2px; }
.burbuja.mia { align-self: flex-end; background: var(--azul); color: #fff; border-radius: 16px 16px 5px 16px; }
.burbuja.mia .quien { color: rgba(255, 255, 255, 0.8); }
.burbuja.privada { border: 1px dashed rgba(46, 107, 246, 0.5); }
.porcentaje { font: 700 clamp(3.6rem, 9vw, 5rem)/1 var(--titular); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.barra { height: 6px; border-radius: 3px; background: var(--cal-fuerte); overflow: hidden; }
.barra i { display: block; width: 78%; height: 100%; background: linear-gradient(90deg, var(--azul), var(--azul-claro)); border-radius: 3px; }
.mini-lista, .mini-agenda, .mini-staff { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.86rem; }
.mini-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: #fff; color: #14213d; border-radius: 10px; }
.mini-lista li span { color: #55617a; }
.mini-agenda li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; background: #fff; color: #14213d; border-radius: 10px; }
.mini-agenda .fecha { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--azul); white-space: nowrap; }
.estado-ok, .estado-pend { font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.estado-ok { background: #e3f5ea; color: #16703d; }
.estado-pend { background: #fff2d6; color: #8a5a00; }
.mini-staff li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; background: #fff; color: #14213d; border-radius: 10px; }
.mini-staff .inicial { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e4ecff; color: var(--azul); font-weight: 700; font-size: 0.78rem; }
.mini-staff .datos { display: grid; line-height: 1.25; }
.mini-staff .datos span { color: #55617a; font-size: 0.78rem; }
.icono-tel { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--azul); }
.icono-tel svg { width: 16px; height: 16px; fill: #fff; }
.y-tambien { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; color: var(--texto-suave); font-size: 0.9rem; }
.y-tambien-tit { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 0.76rem; margin-right: 6px; color: var(--acento); }
.chip-txt { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); }

/* ── Selector de perfil (pestañas con indicador deslizante) ──────────────── */
.selector {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 4px; border: 1px solid var(--borde); border-radius: 999px; width: 100%; max-width: 540px; margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 0 var(--brillo);
}
.selector::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3);
  border-radius: 999px; background: var(--azul); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.selector[data-activa="1"]::before { transform: translateX(100%); }
.selector[data-activa="2"]::before { transform: translateX(200%); }
.selector button {
  position: relative; z-index: 1; font: 600 0.95rem/1.15 var(--cuerpo); color: var(--texto-suave); background: transparent; border: 0;
  min-height: 48px; padding: 4px 8px; border-radius: 999px; cursor: pointer; transition: color .2s;
}
.selector button[aria-selected="true"] { color: #fff; }
.selector .largo { display: none; }
.selector button:hover:not([aria-selected="true"]) { color: var(--texto); }
.perfil-intro { color: var(--texto-suave); max-width: 40rem; margin-bottom: 22px; font-size: 1.05rem; text-wrap: pretty; }
/* Una tarjeta estrella (la función más usada del rol) y dos pequeñas. */
.tarjetas { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.tarjeta { padding: 18px; display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
.tarjeta .movil { width: 96px; }
.tarjeta h3 { font-size: 1.15rem; font-weight: 600; }
.tarjeta p { color: var(--texto-suave); margin-top: 6px; font-size: 0.95rem; text-wrap: pretty; }
.tarjeta .etiqueta { font: 600 0.72rem/1 var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; color: var(--acento); margin: 0 0 10px; }
.tarjeta.estrella { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 26px 22px; }
.tarjeta.estrella .movil { width: min(56vw, 220px); }
.estrella h3 { font-size: 1.4rem; }
.estrella p { font-size: 1rem; }
.estrella > div { max-width: 28rem; }
[role="tabpanel"][hidden] { display: none; }
/* Sin JS no hay selector: se ven los tres perfiles seguidos. */
.sin-js .selector { display: none; }
.sin-js [role="tabpanel"][hidden] { display: block; margin-top: 40px; }

/* ── Prueba social (oculta hasta tener permiso: ver README) ──────────────── */
.testimonio { margin: 0 0 64px; display: grid; gap: 18px; justify-items: start; padding: 28px 24px; border: 1px solid var(--borde); border-radius: var(--radio-g); background: var(--tarjeta); box-shadow: var(--sombra-tarjeta); }
.escudo img, .escudo-hueco { width: 72px; height: 72px; border-radius: 50%; background: #fff; object-fit: contain; padding: 6px; }
.escudo-hueco { display: grid; place-items: center; color: var(--navy); font-size: .7rem; font-weight: 600; }
.testimonio blockquote { margin: 0; }
.testimonio blockquote p { font: 500 clamp(1.4rem, 5vw, 2rem)/1.2 var(--titular); }
.testimonio blockquote p::before { content: "«"; color: var(--acento); }
.testimonio blockquote p::after { content: "»"; color: var(--acento); }
.testimonio figcaption { color: var(--texto-suave); }
.testimonio .cifras-testimonio { font-weight: 600; color: var(--acento); border-top: 1px solid var(--cal); padding-top: 14px; width: 100%; }

/* ── Pasos: sin cajas, numeración editorial ──────────────────────────────── */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.pasos li { position: relative; padding-top: 22px; }
.pasos li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--divisor); }
.paso-num { font: 700 clamp(3rem, 7vw, 4.6rem)/1 var(--titular); color: var(--acento); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.pasos h3 { font-size: 1.3rem; }
.pasos p:last-child { color: var(--texto-suave); margin-top: 8px; max-width: 24rem; text-wrap: pretty; }

/* ── Preguntas: lista sin cajas, «+» que gira, respuesta con altura animada ─ */
.preguntas { max-width: 52rem; }
.preguntas details { position: relative; }
.preguntas details::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--divisor); }
.preguntas details:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--divisor); }
.preguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; padding: 20px 4px; font: 500 1.1rem/1.35 var(--cuerpo); letter-spacing: -0.005em; border-radius: 8px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary:hover { color: var(--acento); }
.mas { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--cal-fuerte); transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .2s; }
.mas::before, .mas::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--acento); border-radius: 1px; transform: translate(-50%, -50%); }
.mas::before { width: 12px; height: 2px; }
.mas::after { width: 2px; height: 12px; }
details[open] > summary .mas { transform: rotate(45deg); border-color: var(--acento); }
.preguntas details > div { padding: 0 4px 22px; color: var(--texto-suave); max-width: 46rem; font-size: 1rem; }
.preguntas details > div p + p { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .preguntas { interpolate-size: allow-keywords; }
    .preguntas details::details-content { height: 0; overflow: clip; transition: height .32s cubic-bezier(.2, .7, .2, 1), content-visibility .32s allow-discrete; }
    .preguntas details[open]::details-content { height: auto; }
  }
}

/* ── Formulario: la única pieza de cristal de la página ──────────────────── */
.demo {
  background:
    radial-gradient(ellipse 55% 60% at 70% 45%, rgba(46, 107, 246, 0.4), transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 90%, rgba(46, 107, 246, 0.14), transparent 70%),
    var(--navy);
}
.demo-rejilla { display: grid; gap: 36px; }
.demo-texto > p { color: var(--texto-suave); margin-top: 14px; font-size: 1.1rem; text-wrap: pretty; }
.demo-texto ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.demo-texto li { padding-left: 24px; position: relative; }
.demo-texto li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 11px; height: 6px; border-left: 2.5px solid var(--acento); border-bottom: 2.5px solid var(--acento); transform: rotate(-45deg); }
.cristal {
  position: relative; border-radius: var(--radio-g); padding: 24px 20px;
  background: rgba(27, 42, 74, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 30px 80px -30px rgba(0, 0, 0, 0.75);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .cristal { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.cristal .campos { display: grid; gap: 16px; }
.campo label, .chips legend { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 7px; }
.campo .opcional, .chips .opcional { font-weight: 400; color: var(--texto-suave); }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  /* 16 px mínimo: así el iPhone no hace zoom al tocar el campo. */
  font: 400 1rem/1.4 var(--cuerpo); color: #fff;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.campo input::placeholder, .campo textarea::placeholder { color: rgba(243, 246, 251, 0.45); }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: none; border-color: var(--azul-claro); background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 4px rgba(46, 107, 246, 0.3);
}
.campo [aria-invalid="true"] { border-color: #ff8a80; background: rgba(255, 138, 128, 0.08); }
.campo .fallo { color: #ffb4ac; font-size: 0.9rem; margin-top: 6px; }
.campo .fallo:empty { display: none; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Cargo: chips de un toque (radios ocultos, pero con foco visible). */
.chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips legend { padding: 0; }
.chips-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04); color: var(--texto); font-weight: 500; font-size: 0.95rem;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.chip input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.chip input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
@media (hover: hover) { .chip input:not(:checked) + span:hover { border-color: rgba(255, 255, 255, 0.5); } }
/* Comentario opcional, escondido tras un enlace. */
.comentario summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; color: var(--acento); font-weight: 500; font-size: 0.95rem; border-radius: 8px; padding: 4px 0; }
.comentario summary::-webkit-details-marker { display: none; }
.comentario .mas { width: 24px; height: 24px; }
.comentario .mas::before { width: 10px; }
.comentario .mas::after { height: 10px; }
.comentario[open] summary { margin-bottom: 10px; }
.clausula { font-size: 0.84rem; line-height: 1.5; color: var(--texto-suave); margin-top: 10px; }
.clausula a, .cristal a { color: var(--azul-claro); }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; }
.casilla input { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 2px 0 0; flex: none; border: 0; background: transparent; accent-color: var(--azul); }
.casilla label { margin: 0; font-weight: 500; }
.cristal .boton { width: 100%; margin-top: 4px; }
.cristal .boton[disabled] { opacity: .7; cursor: progress; }
.estado { margin-top: 14px; font-weight: 600; }
.estado:empty { display: none; }
.estado.mal { color: #ffb4ac; }
.gracias { text-align: center; padding: 28px 8px; }
.gracias .check { width: 64px; height: 64px; margin: 0 auto 14px; }
.gracias h3 { font-size: 1.5rem; }
.gracias p { margin-top: 10px; color: var(--texto-suave); }

/* ── CTA fijo en móvil ───────────────────────────────────────────────────── */
.cta-fija { display: none; }
@media (max-width: 759px) {
  .cta-fija {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 26, 51, 0.94); border-top: 1px solid rgba(255, 255, 255, 0.14);
    transform: translateY(110%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .cta-fija .boton { width: 100%; }
  .cta-fija.visible { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  /* Que el pie no quede debajo de la barra si se llega al final con ella fuera. */
  .pie { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie { position: relative; padding: 48px 0 40px; background: var(--navy-noche); z-index: 1; }
.pie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--divisor); }
.pie-rejilla { display: grid; gap: 28px; }
.pie p { color: var(--texto-suave); font-size: 0.92rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie a { color: var(--texto); }
.pie .legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--cal); font-size: 0.85rem; }
.pie-lema { margin-top: 14px; }

/* Decoración de cal por sección (SVG con aria-hidden) */
.cal-seccion { position: absolute; pointer-events: none; z-index: 0; }
.cal-area { right: max(8px, calc(50% - var(--ancho) / 2 - 24px)); top: -1px; width: min(70vw, 420px); }

/* Páginas de texto (aviso legal, 404) */
.texto-largo { max-width: 46rem; padding: calc(var(--cabecera) + 48px) 0 72px; }
.texto-largo h1 { font-size: clamp(2.2rem, 8vw, 3.4rem); margin-bottom: 24px; }
.texto-largo h2 { font-size: 1.5rem; margin: 36px 0 12px; }
.texto-largo p, .texto-largo li { color: var(--texto-suave); }
.texto-largo p + p { margin-top: 12px; }
.texto-largo dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.texto-largo dt { font-weight: 600; }
.texto-largo dd { margin: 0; color: var(--texto-suave); }

/* ── Escalas mayores ─────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  :root { --gutter: 28px; }
  .selector .corto { display: none; }
  .selector .largo { display: inline; }
  .cristal { padding: 32px; }
  .pie-rejilla { grid-template-columns: 2fr 1fr 1fr; }
  .paso .movil { width: 300px; }
  .testimonio { grid-template-columns: auto 1fr; column-gap: 28px; padding: 36px; }
  .testimonio .escudo { grid-row: span 2; }
  .testimonio .cifras-testimonio { grid-column: 1 / -1; }
  .tarjeta { grid-template-columns: 110px 1fr; padding: 20px 22px; }
  .tarjeta .movil { width: 110px; }
}

@media (min-width: 760px) {
  .cabecera .entrar { display: inline-flex; }
  /* El móvil de la portada, girado en perspectiva (solo con sitio para verlo). */
  .heroe-escena { transform: perspective(1200px) rotateY(-8deg); transform-style: preserve-3d; }
  .cifras-lista { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .cifra { padding: 4px 28px; }
  .cifra:first-child { padding-left: 0; }
  .cifra + .cifra::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--cal-fuerte), transparent); }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-areas: "alin alin" "chat chat" "normas medica" "pre org"; }
  .tile-alin { grid-area: alin; }
  .tile-chat { grid-area: chat; }
  .tile-normas { grid-area: normas; }
  .tile-medica { grid-area: medica; }
  .tile-pre { grid-area: pre; }
  .tile-org { grid-area: org; }
  .tile-alin .tile-captura { aspect-ratio: 16 / 7; }
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .tarjeta.estrella { grid-column: 1 / -1; grid-template-columns: auto 1fr; text-align: left; justify-items: start; gap: 32px; padding: 28px 32px; }
  .tarjeta.estrella .movil { width: 220px; }
}

/* «La semana» con móvil fijo: de 900 px en adelante. */
@media (min-width: 900px) {
  .semana-escena { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; }
  .semana { padding-left: 44px; gap: 0; }
  .dia::before { left: -53px; top: 14px; }
  .dia { gap: 0; padding-bottom: 4vh; }
  .paso { display: flex; align-items: center; min-height: 46vh; grid-template-columns: none; }
  .paso .movil { display: none; }
  /* El paso activo se marca con una raya azul (no con transparencia: bajaría el contraste). */
  .paso .texto { max-width: 30rem; padding-left: 20px; border-left: 3px solid transparent; transition: border-color .3s; }
  .paso.activo .texto { border-left-color: var(--azul); }
  .paso h3 { font-size: 1.75rem; margin-top: 12px; }
  .paso .texto p:last-child { font-size: 1.06rem; margin-top: 12px; }
  .escenario { display: block; position: relative; }
  .movil-escena {
    position: sticky; top: calc(var(--cabecera) + (100vh - var(--cabecera) - 666px) / 2);
    width: 300px; margin-top: 20px;
  }
  /* Cambio de pantalla: la nueva sube y aparece; la anterior se va. */
  .movil-escena .pantalla { position: absolute; inset: 8px; opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
  .movil-escena .pantalla:first-of-type { position: relative; inset: auto; }
  .movil-escena .pantalla.activa { opacity: 1; transform: none; }
  .sin-js .movil-escena .pantalla:first-of-type { opacity: 1; transform: none; }
}

@media (min-width: 960px) {
  .nav { display: flex; }
  .portada { padding: calc(var(--cabecera) + 64px) 0 96px; background:
    radial-gradient(ellipse 36% 60% at 76% 52%, rgba(46, 107, 246, 0.42), transparent 70%),
    radial-gradient(ellipse 40% 36% at 14% 22%, rgba(46, 107, 246, 0.16), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy) 70%, var(--navy-noche) 100%); }
  .portada::before { -webkit-mask-image: radial-gradient(ellipse 60% 80% at 70% 50%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 80% at 70% 50%, #000 10%, transparent 70%); }
  .campo-centro { left: 76%; top: 52%; width: 900px; }
  .portada-rejilla { grid-template-columns: 1.08fr 0.92fr; gap: 48px; }
  .heroe { padding-top: 24px; }
  .heroe::before { width: 640px; top: 50%; }
  .heroe-escena { width: 300px; }
  .aviso { font-size: 0.92rem; }
  .aviso-1 { width: 320px; left: -16px; top: 6px; }
  .aviso-2 { width: 250px; right: -12px; bottom: 16%; }
  .seccion { padding: 112px 0; }
  .seccion-cabeza { margin-bottom: 44px; }
  .funciones { padding-top: 0; }
  .seccion-cabeza-foto { padding-top: 300px; margin-bottom: 44px; }
  .bento { grid-template-columns: repeat(4, 1fr); grid-template-areas: "alin alin chat chat" "alin alin normas medica" "pre pre org org"; gap: 16px; }
  .tile { padding: 26px; }
  .tile-alin .tile-captura { aspect-ratio: auto; flex: 1 1 auto; min-height: 340px; }
  .tile-alin .tile-texto { padding: 6px 26px 26px; }
  .tarjetas { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 16px; }
  .tarjeta.estrella { grid-column: auto; grid-row: span 2; grid-template-columns: auto 1fr; align-items: center; padding: 32px 36px; }
  .tarjeta.estrella .movil { width: 240px; }
  .estrella h3 { font-size: 1.55rem; }
  .tarjeta { grid-template-columns: 120px 1fr; padding: 22px 26px; gap: 22px; }
  .tarjeta .movil { width: 120px; }
  .demo-rejilla { grid-template-columns: 0.85fr 1.15fr; align-items: start; gap: 64px; }
  .demo-texto { position: sticky; top: calc(var(--cabecera) + 40px); }
}

/* ── Sin movimiento: todo se ve, nada se anima ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .semana-progreso { display: none; }
  * { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}