/* ─────────────────────────────────────────────────────────────────────────────
   FaenApp Aprende · hoja de estilos única (renovada el 10/11/2026, m181)
   La misma casa que faenapp.com ("Caja que Cuadra"): Montserrat 800 con UNA palabra en cursiva azul,
   rótulos en Red Hat Mono con su raya, botón azul con texto oscuro y flecha en círculo, tirillas de ticket
   con dientes y el sello. Paleta 60/30/10: #1D1D1B fondo · #0437B3 superficies · #128BEC acento.
   Claro y oscuro por tokens (el oscuro es el de la landing). Solo se anima transform y opacity.
   Capas: 1 tokens · 2 base · 3 cabecera · 4 botones · 5 hero · 6 mockups · 7 secciones · 8 guías en video
   (tarjetas + reproductor + ventana) · 9 escenas · 10 cierre, tapas y texto · 11 movimiento · 12 teléfono (al final).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 1 · Tokens ──────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --f-tit: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Red Hat Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --seca: cubic-bezier(.16, 1, .3, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --sup: #0437B3; --acento: #128BEC; --sobre-acento: #1D1D1B;
  --noche: #02165A; --loma: #02114A; --fin: #0A5AD6; --cielo: #7FC4FF; --em-claro: #8FCBFF;
  --hondo: #0437B3; --brillo: #128BEC;
  --accion: #0A5AD6; --accion-hover: #0437B3;      /* fondos azules con texto blanco (Eco) */
  --resalte: #0437B3;                               /* texto de marca sobre papel */
  --eti: #0A5AD6;                                   /* rótulos mono (5,6:1 sobre blanco) */
  --em: #128BEC;                                    /* la palabra en cursiva de los títulos grandes */
  --tinta: #1D1D1B; --suave: #566072;
  --papel: #F3F5F9; --carta: #FFFFFF; --carta-2: #EBEFF6; --hundida: #E8EDF5;
  --tirilla: #FFFFFF; --tirilla-linea: rgba(4, 55, 179, .28);
  --marco: #1D1D1B; --pantalla: #FFFFFF;
  --cabecera: rgba(243, 245, 249, .94);
  --borde: rgba(4, 55, 179, .12); --borde-suave: rgba(4, 55, 179, .08); --borde-fuerte: rgba(4, 55, 179, .22);
  --tono-6: rgba(4, 55, 179, .06); --tono-10: rgba(4, 55, 179, .1); --tono-16: rgba(4, 55, 179, .16);
  --hueco-a: #F3F5F9; --hueco-b: #E8EEF8;
  --tinte-0: #F3F5F9; --tinte-1: #EEF2F9; --tinte-2: #E9EFF9; --tinte-3: #E4ECF9; --tinte-4: #DFE8F8;
  --sombra-mockup: 0 40px 80px -30px rgba(4, 55, 179, .5);
  --sombra-tarjeta: 0 24px 40px -24px rgba(4, 55, 179, .38);
  --sombra-monitor: drop-shadow(0 40px 80px rgba(4, 55, 179, .3));
  --error-fondo: #FFF2F0; --error-texto: #8A2A24; --error-borde: #F0605D;
  --ok: #1E9E5A;
  --dientes: radial-gradient(circle 6px at 50% 0, #0000 95%, #000 100%) 50% 0 / 16px 51% repeat-x,
             radial-gradient(circle 6px at 50% 100%, #0000 95%, #000 100%) 50% 100% / 16px 51% repeat-x;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --accion: #1F5EEA; --accion-hover: #3B74FF; --resalte: #8EC5FF; --eti: #128BEC; --em: #128BEC; --brillo: #4FB0FF;
    --tinta: #F5F7FA; --suave: #A7B0BE;
    --papel: #1D1D1B; --carta: #182236; --carta-2: #1F2C48; --hundida: #232321;
    --tirilla: #182236; --tirilla-linea: rgba(18, 139, 236, .34);
    --marco: #0B0B0A; --cabecera: rgba(29, 29, 27, .94);
    --borde: rgba(167, 176, 190, .14); --borde-suave: rgba(167, 176, 190, .1); --borde-fuerte: rgba(18, 139, 236, .34);
    --tono-6: rgba(127, 196, 255, .08); --tono-10: rgba(127, 196, 255, .12); --tono-16: rgba(127, 196, 255, .2);
    --hueco-a: #182236; --hueco-b: #1F2C48;
    --tinte-0: #1D1D1B; --tinte-1: #1C1F24; --tinte-2: #1B212B; --tinte-3: #1A2232; --tinte-4: #192439;
    --sombra-mockup: 0 40px 80px -30px rgba(0, 0, 0, .8); --sombra-tarjeta: 0 24px 40px -24px rgba(0, 0, 0, .7);
    --sombra-monitor: drop-shadow(0 40px 80px rgba(0, 0, 0, .6));
    --error-fondo: #3A1715; --error-texto: #FFB4AD; --ok: #3DCB7F;
  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --accion: #1F5EEA; --accion-hover: #3B74FF; --resalte: #8EC5FF; --eti: #128BEC; --em: #128BEC; --brillo: #4FB0FF;
  --tinta: #F5F7FA; --suave: #A7B0BE;
  --papel: #1D1D1B; --carta: #182236; --carta-2: #1F2C48; --hundida: #232321;
  --tirilla: #182236; --tirilla-linea: rgba(18, 139, 236, .34);
  --marco: #0B0B0A; --cabecera: rgba(29, 29, 27, .94);
  --borde: rgba(167, 176, 190, .14); --borde-suave: rgba(167, 176, 190, .1); --borde-fuerte: rgba(18, 139, 236, .34);
  --tono-6: rgba(127, 196, 255, .08); --tono-10: rgba(127, 196, 255, .12); --tono-16: rgba(127, 196, 255, .2);
  --hueco-a: #182236; --hueco-b: #1F2C48;
  --tinte-0: #1D1D1B; --tinte-1: #1C1F24; --tinte-2: #1B212B; --tinte-3: #1A2232; --tinte-4: #192439;
  --sombra-mockup: 0 40px 80px -30px rgba(0, 0, 0, .8); --sombra-tarjeta: 0 24px 40px -24px rgba(0, 0, 0, .7);
  --sombra-monitor: drop-shadow(0 40px 80px rgba(0, 0, 0, .6));
  --error-fondo: #3A1715; --error-texto: #FFB4AD; --ok: #3DCB7F;
}

/* ── 2 · Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 500 16px/1.55 var(--f-tit); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .3s ease, color .3s ease; }
a { color: var(--resalte); text-decoration: none; transition: color .15s ease; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2 { font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
h3 { font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
em { font-style: italic; font-weight: inherit; color: var(--em); }
.ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; width: 1em; height: 1em; overflow: hidden; flex: none; user-select: none; vertical-align: -.2em; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--acento); color: var(--sobre-acento); font-weight: 700; }
.saltar:focus { top: 12px; }

/* Rótulo de la casa (Red Hat Mono, mayúsculas, raya delante) */
.eti { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1.2 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--eti); }
.eti::before { content: ''; width: 22px; height: 2px; background: currentColor; flex: none; }
.eti--claro { color: var(--em-claro); }
.eti--chica { font-size: 10.5px; letter-spacing: .14em; gap: 0; }
.eti--chica::before { display: none; }

.barra-lectura { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 61; }
.barra-lectura > span { display: block; height: 100%; width: 100%; background: var(--acento); transform-origin: left; transform: scaleX(0); }

/* ── 3 · Cabecera ────────────────────────────────────────────────────────── */
.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 18px; padding: 11px clamp(16px, 3vw, 34px); background: var(--cabecera); border-bottom: 1px solid var(--borde-suave); transition: background-color .3s ease; }
.cabecera__marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; color: var(--tinta); }
.cabecera__marca img { width: 30px; height: 30px; border-radius: 8px; }
.cabecera__marca em { color: var(--resalte); }
.cabecera__nav { display: flex; gap: 4px; }
.cabecera__nav a { padding: 8px 11px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--suave); white-space: nowrap; transition: background .2s ease, color .2s ease; }
.cabecera__nav a:hover { background: var(--tono-6); color: var(--tinta); }
.cabecera__nav a[aria-current="page"] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--acento); border-radius: 9px 9px 0 0; }
.cabecera__miga { font: 700 11.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); white-space: nowrap; padding-left: 14px; border-left: 1px solid var(--borde-fuerte); }
.cabecera__espacio { flex: 1; }
.tema { width: 38px; height: 38px; border-radius: 11px; border: 1.5px solid var(--borde-fuerte); background: var(--carta); color: var(--resalte); cursor: pointer; display: grid; place-items: center; flex: none; padding: 0; transition: transform .2s ease, border-color .2s ease; }
.tema:hover { transform: translateY(-1px) rotate(-8deg); border-color: var(--acento); }
.tema .ms { grid-area: 1 / 1; transition: transform .35s var(--rebote), opacity .25s ease; }
.tema .tema__luna { opacity: 1; }
.tema .tema__sol { opacity: 0; transform: rotate(-90deg) scale(.6); }
html.tema-oscuro .tema .tema__luna { opacity: 0; transform: rotate(90deg) scale(.6); }
html.tema-oscuro .tema .tema__sol { opacity: 1; transform: none; }

/* ── 4 · Botones (la casa: acento, texto oscuro, flecha en círculo, brillo cada ~4,6 s) ─ */
.boton, .boton-fantasma { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; max-width: 100%; padding: 13px 18px; border-radius: 12px; border: 1.5px solid transparent; cursor: pointer; font: 700 15px/1.15 var(--f-tit); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; overflow: hidden; transition: transform .2s var(--seca), background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.boton { background: var(--acento); color: var(--sobre-acento); box-shadow: 0 10px 26px rgba(18, 139, 236, .3); }
.boton:hover { color: var(--sobre-acento); animation: latido 1s ease-in-out infinite; }
.boton:active { transform: scale(.97); }
.boton::after { content: ''; position: absolute; inset: -2px auto -2px 0; width: 42%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-140%) skewX(-12deg); animation: barre 4.6s ease-in-out infinite; pointer-events: none; }
@keyframes barre { 0% { transform: translateX(-140%) skewX(-12deg); } 26%, 100% { transform: translateX(300%) skewX(-12deg); } }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.boton .mono { font-size: 13px; opacity: .8; font-weight: 700; }
.boton--claro { background: #fff; color: var(--sup); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }
.boton--claro:hover { color: var(--sup); }
.boton--claro::after { background: linear-gradient(100deg, transparent, rgba(4, 55, 179, .16), transparent); }
.boton--chico { font-size: 13px; padding: 8px 12px; border-radius: 10px; box-shadow: none; }
.boton.boton--eco { background: var(--sup); color: #fff; box-shadow: 0 10px 24px rgba(4, 55, 179, .3); }
.boton.boton--eco:hover { color: #fff; }
.boton-fantasma { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); font-weight: 600; }
.boton-fantasma:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
.boton-fantasma--tinta { color: var(--resalte); border-color: var(--borde-fuerte); }
.boton-fantasma--tinta:hover { color: var(--resalte); border-color: var(--acento); background: var(--tono-6); }
.boton-fantasma--chico { font-size: 13px; padding: 8px 11px; border-radius: 10px; color: var(--resalte); border-color: var(--borde-fuerte); }
.boton-fantasma--chico:hover { color: var(--resalte); border-color: var(--acento); background: var(--tono-6); }
.flecha { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sobre-acento); color: var(--acento); }
.flecha .ms { font-size: 17px; vertical-align: 0; }
.enlace-suave { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--resalte); }
.enlace-suave .ms { font-size: 18px; transition: transform .2s ease; }
.enlace-suave:hover .ms { transform: translateX(3px); }

/* ── 5 · Hero con parallax ───────────────────────────────────────────────── */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; color: #fff; background: linear-gradient(175deg, var(--noche) 0%, var(--sup) 58%, var(--fin) 100%); }
.capa { position: absolute; will-change: transform; }
.capa--lejos { left: 0; right: 0; bottom: 0; height: 62%; display: flex; align-items: flex-end; gap: 3.4%; padding: 0 4%; opacity: .14; }
.capa--lejos i { flex: 1; background: var(--cielo); border-radius: 16px 16px 0 0; transform-origin: bottom; }
.capa--medio { left: 0; right: 0; bottom: -4%; height: 44%; display: flex; align-items: flex-end; gap: 5%; padding: 0 9%; opacity: .3; }
.capa--medio i { flex: 1; background: var(--acento); border-radius: 20px 20px 0 0; transform-origin: bottom; }
.capa--loma { left: -6%; right: -6%; bottom: -10%; height: 22%; background: var(--loma); border-radius: 50% 50% 0 0; }
.capa--sol { right: 8%; top: 16%; width: min(340px, 26vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(127, 196, 255, .5), rgba(18, 139, 236, 0) 68%); }
.hero .capa--lejos i, .hero .capa--medio i { animation: crecer 1.1s var(--seca) backwards; }
.hero .capa i:nth-child(2) { animation-delay: .08s; } .hero .capa i:nth-child(3) { animation-delay: .16s; }
.hero .capa i:nth-child(4) { animation-delay: .24s; } .hero .capa i:nth-child(5) { animation-delay: .32s; } .hero .capa i:nth-child(6) { animation-delay: .4s; }
@keyframes crecer { from { transform: scaleY(0); } }

.hero__contenido { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 86px clamp(24px, 7vw, 120px) 40px; }
.hero__titulo { margin: 18px 0 0; font-size: clamp(42px, 6.6vw, 94px); line-height: .96; color: #fff; max-width: 13ch; font-weight: 800; }
.hero__titulo em, .tapa h1 em, .seccion--eco h2 em { color: var(--em-claro); }
.hero p:not(.eti):not(.hero__meta) { margin: 20px 0 0; max-width: 46ch; font-weight: 500; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, .8); }
.hero__acciones { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; align-items: center; }
.hero__indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; max-width: 900px; }
.hero__indice a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 13px; font-weight: 600; transition: background .2s ease, transform .2s ease; }
.hero__indice a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.hero__indice .mono { color: var(--em-claro); font-size: 12px; font-weight: 700; }
.hero__indice .ms { font-size: 17px; color: var(--em-claro); }
.hero__meta { margin-top: 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.hero__contenido > *, .carrusel__panel--activo .carrusel__texto > * { animation: subir .7s var(--seca) backwards; }
.hero__contenido > :nth-child(2), .carrusel__panel--activo .carrusel__texto > :nth-child(2) { animation-delay: .08s; }
.hero__contenido > :nth-child(3), .carrusel__panel--activo .carrusel__texto > :nth-child(3) { animation-delay: .16s; }
.hero__contenido > :nth-child(4), .carrusel__panel--activo .carrusel__texto > :nth-child(4) { animation-delay: .24s; }
.hero__contenido > :nth-child(5) { animation-delay: .32s; } .hero__contenido > :nth-child(6) { animation-delay: .4s; }
.carrusel__panel--activo .carrusel__mockup { animation: entrar-derecha .8s var(--seca) backwards .15s; }
@keyframes subir { from { opacity: 0; transform: translateY(26px); } }
@keyframes entrar-derecha { from { opacity: 0; transform: translateX(60px) rotate(4deg); } }

.carrusel { position: absolute; inset: 0; overflow: hidden; }
.carrusel__pista { display: flex; height: 100%; transition: transform .6s cubic-bezier(.6, .05, .2, 1); }
.carrusel__panel { flex: 0 0 100%; height: 100%; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(20px, 4vw, 60px); padding: 96px clamp(24px, 7vw, 120px) 120px; }
.carrusel__texto .hero__titulo { font-size: clamp(38px, 5.6vw, 80px); max-width: 14ch; }
.carrusel__mockup { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; }
.carrusel__mockup .telefono { width: auto; height: min(100%, 60vh); animation: mecer 6s ease-in-out infinite; }
@keyframes mecer { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.chapa-video { position: absolute; left: max(0px, calc(50% - min(30vh, 200px))); bottom: 12%; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border: 0; border-radius: 16px; background: #fff; color: var(--sobre-acento); cursor: pointer; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); animation: flota 3.4s ease-in-out infinite; text-align: left; }
.chapa-video > .ms { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); font-size: 24px; font-variation-settings: 'FILL' 1; }
.chapa-video b { display: block; font-size: 14px; color: var(--sup); } .chapa-video small { font-size: 12px; font-weight: 700; color: #566072; }
.chapa-video:hover { transform: scale(1.04); animation-play-state: paused; }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.carrusel__controles { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 0 clamp(24px, 7vw, 120px); }
.redondo { width: 46px; height: 46px; border-radius: 50%; cursor: pointer; background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .34); display: grid; place-items: center; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.redondo:hover { border-color: #fff; background: rgba(255, 255, 255, .1); transform: scale(1.06); }
.puntitos { display: flex; gap: 7px; }
.puntitos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, .35); transition: width .3s ease, background .3s ease; }
.puntitos button[aria-current="true"] { width: 26px; background: #fff; }
.carrusel__saltar { margin-left: auto; color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; }
.carrusel__saltar:hover { color: #fff; }

/* Cifras bajo el hero */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 22px clamp(20px, 6vw, 96px); background: var(--carta); border-bottom: 1px solid var(--borde-suave); }
.cifra { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 14px; background: var(--papel); border: 1.5px solid var(--borde-suave); }
.cifra strong { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; letter-spacing: -.02em; color: var(--resalte); line-height: 1; }
.cifra span { font-size: 12.5px; font-weight: 600; color: var(--suave); }

/* ── 6 · Mockups ─────────────────────────────────────────────────────────── */
.telefono { width: min(330px, 27vw); aspect-ratio: 9 / 19.2; border-radius: 42px; background: var(--marco); padding: 10px; box-shadow: var(--sombra-mockup), 0 0 0 1.5px rgba(255, 255, 255, .06) inset; }
.telefono__pantalla { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: var(--pantalla); }
.telefono__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 38%; height: 24px; background: var(--marco); border-radius: 0 0 16px 16px; z-index: 2; }
.monitor { width: min(560px, 42vw); filter: var(--sombra-monitor); }
.monitor__marco { width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--marco); padding: 12px; }
.monitor__pantalla { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: var(--pantalla); }
.monitor__base { width: 34%; height: 12px; margin: 0 auto; background: var(--marco); border-radius: 0 0 8px 8px; }
.monitor__pie { width: 22%; height: 6px; margin: 0 auto; background: var(--marco); opacity: .55; border-radius: 999px; }
.hueco { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px; text-align: center; background: repeating-linear-gradient(135deg, var(--hueco-a) 0 12px, var(--hueco-b) 12px 24px); color: var(--suave); }
.hueco__texto { font-size: 12px; font-weight: 600; line-height: 1.45; max-width: 22ch; }
.hueco__slot { font: 700 10px var(--f-mono); letter-spacing: .1em; opacity: .65; }
.captura { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.captura[data-visible="1"] { opacity: 1; }
.captura > img, .tarjeta__imagen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ── 7 · Secciones ───────────────────────────────────────────────────────── */
.seccion { padding: clamp(60px, 7.5vw, 104px) clamp(20px, 6vw, 96px); }
.seccion--hundida { background: var(--hundida); }
.tit { text-align: center; max-width: 860px; margin: 0 auto clamp(28px, 4vw, 46px); }
.tit h2 { margin-top: 14px; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.06; }
.tit__bajada { margin: 14px auto 0; max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--suave); text-wrap: pretty; }
.seccion__bajada { margin: 14px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--suave); }
.seccion__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 38px; }
.indice__estado { margin-top: 12px; font: 700 12.5px var(--f-mono); letter-spacing: .08em; color: var(--resalte); min-height: 1em; }

/* Conceptos */
.conceptos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; max-width: 1280px; margin: 0 auto; }
.concepto { position: relative; background: var(--carta); border: 1.5px solid var(--borde); border-radius: 18px; padding: 22px 20px; transition: transform .25s var(--seca), box-shadow .25s ease, border-color .25s ease; }
.concepto:hover { transform: translateY(-4px); box-shadow: var(--sombra-tarjeta); border-color: var(--borde-fuerte); }
.concepto__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sup); color: #fff; }
.concepto__ic .ms { font-size: 24px; vertical-align: 0; }
.concepto__n { position: absolute; top: 20px; right: 18px; font-size: 13px; font-weight: 700; color: var(--suave); opacity: .7; }
.concepto h3 { margin: 16px 0 0; font-size: 17px; line-height: 1.25; }
.concepto p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--suave); }

/* Índice de bloques */
.indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; max-width: 1280px; margin: 0 auto; }
.tarjeta { display: flex; flex-direction: column; background: var(--carta); border: 1.5px solid var(--borde); border-radius: 20px; padding: 16px 16px 18px; color: inherit; transition: transform .25s var(--seca), box-shadow .25s ease, border-color .25s ease; }
.tarjeta:hover { transform: translateY(-5px); box-shadow: var(--sombra-tarjeta); color: inherit; border-color: var(--borde-fuerte); }
.tarjeta__imagen { position: relative; height: 140px; border-radius: 13px; overflow: hidden; margin-bottom: 16px; background: linear-gradient(150deg, var(--carta-2), var(--papel)); }
.tarjeta__imagen > img { transition: transform .5s var(--seca); }
.tarjeta:hover .tarjeta__imagen > img { transform: scale(1.04); }
.tarjeta__ic { position: absolute; left: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--sup); color: #fff; box-shadow: 0 8px 18px rgba(4, 55, 179, .35); }
.tarjeta__ic .ms { vertical-align: 0; }
.tarjeta h3 { margin: 8px 0 0; font-size: 21px; }
.tarjeta > p:not(.eti) { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--suave); }
.tarjeta .eti { color: var(--eti); }
.tarjeta__pie { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--suave); }
.tarjeta__pie .ms { color: var(--resalte); transition: transform .2s ease; }
.tarjeta:hover .tarjeta__pie .ms { transform: translateX(4px); }
.tarjeta__barra { height: 5px; border-radius: 999px; background: var(--tono-10); margin-top: auto; padding: 0; overflow: hidden; position: relative; top: 0; }
.etiquetas + .tarjeta__barra { margin-top: 14px; }
.tarjeta__barra > span { display: block; height: 100%; width: 100%; background: var(--acento); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--seca) .2s; }
.tarjeta--completa { border-color: rgba(18, 139, 236, .5); }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.etiqueta { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 8px; font: 700 11px var(--f-mono); letter-spacing: .04em; background: var(--tono-6); color: var(--suave); }
.etiqueta .ms { font-size: 15px; font-variation-settings: 'FILL' 1; }
.etiqueta--video { background: rgba(18, 139, 236, .14); color: var(--resalte); }

/* PDF */
.pdfs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; max-width: 1280px; margin: 0 auto; }
.pdfs--fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pdf { display: flex; flex-direction: column; gap: 12px; }
.pdf__portada { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--carta-2); border: 1.5px solid var(--borde); box-shadow: var(--sombra-tarjeta); transition: transform .3s var(--seca); }
.pdf__portada:hover { transform: translateY(-6px) rotate(-1deg); }
.pdf__portada img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pdf__sin { position: absolute; inset: 0; display: grid; place-items: center; color: var(--resalte); }
/* Las portadas de los PDF de venta son apaisadas (1280×720): tarjeta 16:9 y rejilla más ancha, nada recortado */
.pdfs--anchas { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.pdfs--fila.pdfs--anchas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pdf--ancha .pdf__portada { aspect-ratio: 16 / 9; }
.pdf__sin .ms { font-size: 48px; }
.pdf h3 { font-size: 16px; line-height: 1.25; }
.pdf p { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pdf__acciones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Referencia (dos columnas) */
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; max-width: 1180px; margin: 0 auto; }
.columnas__tit { font-size: 19px; }
.lista-fichas { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ficha-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--carta); border: 1.5px solid var(--borde); border-radius: 14px; color: inherit; transition: border-color .2s ease, transform .2s var(--seca), box-shadow .2s ease; }
.ficha-link:hover { border-color: rgba(18, 139, 236, .5); transform: translateX(6px); color: inherit; box-shadow: var(--sombra-tarjeta); }
.ficha-link__ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--tono-10); color: var(--resalte); }
.ficha-link__ic .ms { vertical-align: 0; }
.ficha-link strong { font-size: 15.5px; }
.ficha-link small { display: block; margin-top: 2px; font-size: 13px; color: var(--suave); }
.ficha-link__flecha { margin-left: auto; color: var(--resalte); transition: transform .2s ease; }
.ficha-link:hover .ficha-link__flecha { transform: translateX(4px); }

/* ── 8 · Guías en video ──────────────────────────────────────────────────── */
/* Tarjeta de guía */
.fila-guias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(188px, 208px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 14px; max-width: 1280px; margin: 34px auto 0; scrollbar-width: thin; }
.rejilla-guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; max-width: 1280px; margin: 0 auto; }
.tguia { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.tguia__poster { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--marco); cursor: pointer; box-shadow: var(--sombra-tarjeta); transition: transform .3s var(--seca); }
.tguia__poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .5s var(--seca); }
.tguia__poster:hover { transform: translateY(-5px); }
.tguia__poster:hover img { transform: scale(1.05); }
.tguia__play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); transition: transform .25s var(--rebote); }
.tguia__play .ms { font-size: 30px; vertical-align: 0; font-variation-settings: 'FILL' 1; }
.tguia__poster:hover .tguia__play { transform: scale(1.12); }
.tguia__dur { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 7px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 12px; font-weight: 700; }
.tguia.on .tguia__poster { box-shadow: 0 0 0 3px var(--acento), var(--sombra-tarjeta); }
.tguia .eti { color: var(--eti); }
.tguia h3 { margin-top: 4px; font-size: 15.5px; line-height: 1.25; }
.tguia h3 a { color: var(--tinta); }
.tguia h3 a:hover { color: var(--resalte); }
.tguia p { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Tirilla de ticket (la de faenapp.com): dientes arriba y abajo con una máscara estática */
.tirilla { position: relative; background: var(--tirilla); -webkit-mask: var(--dientes); mask: var(--dientes); }
.sello { position: absolute; z-index: 3; display: inline-block; font: 800 20px/1 var(--f-tit); letter-spacing: .16em; text-transform: uppercase; color: #F5F7FA; background: var(--sup); padding: 9px 15px 8px 17px; border-radius: 9px; box-shadow: inset 0 0 0 3px var(--sup), inset 0 0 0 5px #F5F7FA; transform: rotate(-8deg); pointer-events: none; }

/* Reproductor con los pasos marcados en la línea de tiempo */
.gp { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cab cab" "video lado" "barra barra"; gap: 16px clamp(18px, 3vw, 36px); align-items: stretch; }
.gp > video { width: min(100%, 360px); aspect-ratio: 9 / 16; border-radius: 22px; background: #000; }
.gp__cab { grid-area: cab; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.gp__video { grid-area: video; }
.gp__lado { grid-area: lado; position: relative; min-height: 260px; }
.gp__barra { grid-area: barra; }
.gp__lado > .gp__tirilla { position: absolute; inset: 0; display: flex; flex-direction: column; }
.gp__lado > .gp__tirilla > .gp__pasos { flex: 1; min-height: 0; max-height: none; }
.gp__cab h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; margin-top: 8px; }
.gp__cab .eti { color: var(--eti); }
.gp__cab-acc { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.gp__video { width: min(calc(min(64svh, 640px) * 9 / 16), 380px); justify-self: center; }   /* sin %: la columna es auto y mide al video */
.gp__marco { position: relative; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #000; border: 7px solid var(--marco); box-shadow: var(--sombra-mockup); }
.gp__marco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gp__marco:fullscreen { border: 0; border-radius: 0; }
.gp__marco:fullscreen video { object-fit: contain; }
.gp__grande { position: absolute; left: 50%; top: 50%; z-index: 2; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); cursor: pointer; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); transition: opacity .25s ease, transform .25s var(--rebote); }
.gp__grande .ms { font-size: 44px; vertical-align: 0; font-variation-settings: 'FILL' 1; }
.gp__grande:hover { transform: scale(1.08); }
.gp:not(.gp--pausa) .gp__grande { opacity: 0; transform: scale(.6); pointer-events: none; }
.gp__toque { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; }
.gp__rotulo { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 12px; background: rgba(13, 15, 20, .82); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s var(--seca); pointer-events: none; }
.gp__rotulo.vis { opacity: 1; transform: none; }
.gp__rotulo .mono { color: var(--em-claro); font-weight: 700; font-size: 12px; }
.gp--pausa .gp__rotulo { opacity: 0; }

.gp__barra { background: var(--carta); border: 1.5px solid var(--borde); border-radius: 16px; padding: 4px 10px 8px; }
.gp__linea { position: relative; height: 46px; cursor: pointer; touch-action: none; }
.gp__pista { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 99px; background: var(--tono-16); overflow: hidden; }
.gp__lleno { position: absolute; inset: 0; background: var(--acento); transform-origin: left; transform: scaleX(0); }
.gp__cabezal { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 3px var(--carta), 0 2px 8px rgba(0, 0, 0, .3); z-index: 3; pointer-events: none; }
.gp__marca { position: absolute; top: 50%; z-index: 2; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border-radius: 50%; border: 2px solid var(--acento); background: var(--carta); color: var(--resalte); font: 700 11px/1 var(--f-mono); display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--rebote), background .2s ease, color .2s ease; }
.gp__marca .ms { font-size: 14px; vertical-align: 0; }
.gp__marca:hover, .gp__marca:focus-visible { transform: scale(1.22); }
.gp__marca.ya { background: var(--acento); color: var(--sobre-acento); }
.gp__marca.on { transform: scale(1.28); box-shadow: 0 0 0 5px rgba(18, 139, 236, .28); background: var(--acento); color: var(--sobre-acento); }
.gp__sub { position: absolute; top: 50%; z-index: 1; width: 4px; height: 12px; margin: -6px 0 0 -2px; border-radius: 2px; background: var(--acento); opacity: .55; pointer-events: none; }
.gp__globo { position: absolute; bottom: calc(100% - 4px); left: 0; z-index: 5; max-width: 240px; padding: 7px 10px; border-radius: 9px; background: var(--tinta); color: var(--papel); font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: normal; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.gp__globo.vis { opacity: 1; transform: translateX(-50%); }
.gp__globo .mono { color: var(--acento); margin-right: 6px; }
.gp__mandos { display: flex; align-items: center; gap: 4px; }
.gp__btn { width: 40px; height: 40px; border-radius: 11px; border: 0; background: transparent; color: var(--tinta); display: grid; place-items: center; cursor: pointer; transition: background .2s ease; }
.gp__btn:hover { background: var(--tono-10); }
.gp__btn .ms { font-size: 24px; vertical-align: 0; }
.gp__btn--play { width: 44px; height: 44px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); }
.gp__btn--play:hover { background: var(--acento); transform: scale(1.06); }
.gp__btn--play .ms { font-variation-settings: 'FILL' 1; }
.gp__tiempo { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--suave); white-space: nowrap; }
.gp__esp { flex: 1; }
.gp__vel { width: auto; padding: 0 10px; font: 700 13px var(--f-mono); }

.gp__lado { min-width: 0; }
.gp__tirilla { padding: 22px 20px 24px; filter: drop-shadow(0 18px 30px rgba(4, 55, 179, .14)); }
.gp__tirilla > header, .gp__tirilla > footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gp__tirilla > header { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1.5px dashed var(--tirilla-linea); }
.gp__tirilla > header .mono { font-size: 12px; font-weight: 700; color: var(--suave); }
.gp__tirilla > footer { padding-top: 12px; margin-top: 8px; border-top: 1.5px dashed var(--tirilla-linea); font: 700 12px var(--f-mono); color: var(--suave); letter-spacing: .04em; }
.gp__tirilla > footer a { display: inline-flex; align-items: center; gap: 5px; color: var(--resalte); }
.gp__pasos { position: relative; display: grid; gap: 2px; max-height: min(52svh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; scrollbar-width: thin; }
.gp__paso { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; font: 500 14.5px/1.35 var(--f-tit); color: var(--tinta); transition: background .2s ease; }
.gp__paso:hover { background: var(--tono-6); }
.gp__paso b { font-weight: 700; }
.gp__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--acento); color: var(--resalte); font: 700 12px var(--f-mono); }
.gp__n .ms { font-size: 15px; vertical-align: 0; }
.gp__t { font: 700 12px var(--f-mono); color: var(--suave); }
.gp__paso.ya .gp__n { background: var(--acento); color: var(--sobre-acento); }
.gp__paso.on { background: rgba(18, 139, 236, .14); box-shadow: inset 3px 0 0 var(--acento); }
.gp__paso.on .gp__n { background: var(--acento); color: var(--sobre-acento); transform: scale(1.1); }
.gp__paso.on .gp__t { color: var(--resalte); }
.gp__paso--sub { padding-left: 20px; font-size: 13.5px; color: var(--suave); }
.gp__paso--sub .gp__n { width: 10px; height: 10px; margin-left: 8px; border-width: 2px; font-size: 0; }
.gp__paso--sub.on { color: var(--tinta); }
.gp__nota { margin-top: 12px; font-size: 13px; color: var(--suave); }

/* Ventana del reproductor */
.gp-modal { width: min(1120px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--papel); color: var(--tinta); box-shadow: 0 40px 100px rgba(0, 0, 0, .5); overflow: hidden; }
.gp-modal::backdrop { background: rgba(10, 12, 20, .74); }
.gp-modal[open] { animation: modal-entra .35s var(--seca); }
@keyframes modal-entra { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.gp-modal__cuerpo { max-height: calc(100svh - 32px); overflow-y: auto; padding: 20px clamp(16px, 2.6vw, 30px) 26px; }
.gp-modal__cerrar { position: absolute; right: 14px; top: 14px; z-index: 5; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--borde-fuerte); background: var(--carta); color: var(--tinta); display: grid; place-items: center; cursor: pointer; }
.gp-modal__cerrar:hover { border-color: var(--acento); }
.gp-modal .gp__cab { padding-right: 56px; }
.gp-modal .gp__video { width: min(calc(min(56svh, 600px) * 9 / 16), 360px); }

/* ── 9 · Escenas con parallax (página de bloque) ─────────────────────────── */
.escenas { position: relative; background: var(--papel); }
.escenario { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 0; }
.escenario__tinte { position: absolute; inset: 0; background: var(--tinte-0); transition: background .5s ease; }
.capa2 { position: absolute; will-change: transform; }
.capa2--barras { left: 0; right: 0; bottom: -8%; height: 46%; display: flex; align-items: flex-end; gap: 4%; padding: 0 3%; opacity: .08; }
.capa2--barras i { flex: 1; background: var(--sup); border-radius: 18px 18px 0 0; }
.capa2--halo { left: -10%; top: 22%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(18, 139, 236, .18), rgba(18, 139, 236, 0) 70%); }
.escenario__mockups { position: absolute; right: clamp(24px, 7vw, 120px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 24px; }
.escenario__mockups .telefono { width: auto; height: min(calc(100svh - 140px), 700px); animation: mecer 7s ease-in-out infinite; }
.escenario__mockups .monitor { width: min(560px, 42vw, calc((100svh - 160px) * 1.6)); }
.escenario__mockups > * { transition: opacity .4s ease, transform .4s ease; }
.escenario__mockups [data-apagado="1"] { opacity: 0; pointer-events: none; position: absolute; }
.escenas__columna { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; width: min(580px, 52%); padding-left: clamp(24px, 7vw, 120px); }
.escena { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0; }
.escena h2 { margin: 14px 0 0; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.03; }
.escena__resumen { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--suave); }
.escena__nota { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: var(--suave); padding-left: 14px; border-left: 3px solid var(--acento); }
.escena__nota b { color: var(--tinta); }

/* La guía en video dentro de la lección */
.leccion-video { margin-top: 24px; display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 18px 10px 10px; border: 1.5px solid var(--borde-fuerte); border-radius: 18px; background: var(--carta); text-align: left; cursor: pointer; box-shadow: var(--sombra-tarjeta); transition: transform .25s var(--seca), border-color .2s ease; }
.leccion-video:hover { transform: translateY(-3px); border-color: var(--acento); }
.leccion-video__poster { position: relative; flex: none; width: 74px; aspect-ratio: 9 / 16; border-radius: 11px; overflow: hidden; background: var(--marco); }
.leccion-video__poster img { width: 100%; height: 100%; object-fit: cover; }
.leccion-video__play { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); transition: transform .25s var(--rebote); }
.leccion-video__play .ms { font-size: 24px; vertical-align: 0; font-variation-settings: 'FILL' 1; }
.leccion-video:hover .leccion-video__play { transform: scale(1.14); }
.leccion-video__texto { display: grid; gap: 3px; }
.leccion-video__texto .eti { color: var(--eti); }
.leccion-video__texto b { font-size: 17px; letter-spacing: -.01em; color: var(--tinta); }
.leccion-video__texto > span:last-child { font-size: 13px; color: var(--suave); }

.pasos { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.pasos li { display: flex; gap: 14px; align-items: flex-start; }
.pasos b { font-weight: 700; }
.pasos .n { width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--acento); color: var(--sobre-acento); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.pasos .t { font-size: 15.5px; line-height: 1.5; padding-top: 3px; }
.puntos { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.puntos li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.5; }   /* bloque, no flex: el texto con <b> tiene que poder cortarse */
.puntos li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--acento); transform: rotate(45deg); }
.pastillas { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.pastilla { padding: 9px 15px; border-radius: 10px; font-size: 14px; font-weight: 600; background: var(--carta); border: 1.5px solid var(--borde-fuerte); }
.pastilla--activa { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); font-weight: 700; }
.mini-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.mini-tarjeta { padding: 16px; border-radius: 14px; background: var(--carta); border: 1.5px solid var(--borde); }
.mini-tarjeta small { font: 700 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.mini-tarjeta strong { display: block; font-size: 16px; margin-top: 4px; }
.escena__acciones { display: flex; align-items: center; gap: 12px 16px; margin-top: 28px; flex-wrap: wrap; }

/* ── 10 · Cierre "Ojo con esto", tapas y páginas de texto ────────────────── */
.ojo { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, var(--noche), var(--sup)); padding: clamp(70px, 9vw, 120px) clamp(20px, 6vw, 96px); display: grid; justify-items: start; gap: 34px; }
.ojo::before { content: ''; position: absolute; right: -6%; top: -30%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(18, 139, 236, .42), transparent 68%); }
.ojo__caja { position: relative; max-width: 760px; padding: 34px clamp(22px, 3vw, 38px) 34px; color: var(--tinta); }
.ojo__caja .sello { right: 22px; top: -4px; transform: rotate(8deg); }
.ojo__caja h2 { margin: 14px 0 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.12; max-width: 24ch; }
.ojo__caja h2 em { color: var(--em); }
.ojo__caja > p:not(.eti) { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--suave); max-width: 56ch; }
.ojo__enlace a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--resalte); }
.ojo__acciones { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }

.tapa { position: relative; overflow: hidden; padding: calc(clamp(60px, 8vw, 100px) + 46px) clamp(20px, 6vw, 96px) clamp(48px, 6vw, 76px); background: linear-gradient(160deg, var(--noche), var(--sup)); color: #fff; }
.tapa::before { content: ''; position: absolute; right: -8%; top: -40%; width: 48%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(18, 139, 236, .45), transparent 68%); }
.tapa > * { position: relative; }
.tapa h1 { margin: 16px 0 0; font-size: clamp(36px, 5vw, 70px); line-height: 1; max-width: 18ch; }
.tapa > p:not(.eti) { margin: 18px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.tapa__datos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tapa__datos > * { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.tapa__datos a:hover { background: rgba(255, 255, 255, .2); }
.tapa__datos .ms { font-size: 17px; color: var(--em-claro); }
.tapa > * { animation: subir .7s var(--seca) backwards; }
.tapa > :nth-child(2) { animation-delay: .08s; } .tapa > :nth-child(3) { animation-delay: .16s; } .tapa > :nth-child(4) { animation-delay: .24s; } .tapa > :nth-child(5) { animation-delay: .32s; }
.seccion--guias { padding-top: clamp(44px, 5vw, 70px); }

/* Paso a paso escrito de una guía */
.escritos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; max-width: 1280px; margin: 0 auto; counter-reset: e; }
.escrito { display: flex; flex-direction: column; background: var(--carta); border: 1.5px solid var(--borde); border-radius: 18px; overflow: hidden; transition: transform .25s var(--seca), box-shadow .25s ease; }
.escrito:hover { transform: translateY(-4px); box-shadow: var(--sombra-tarjeta); }
.escrito__captura { aspect-ratio: 4 / 5; overflow: hidden; background: var(--carta-2); border-bottom: 1.5px solid var(--borde); }
.escrito__captura img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.escrito__texto { padding: 16px 18px 20px; }
.escrito__n { font-size: 12px; font-weight: 700; color: var(--eti); letter-spacing: .12em; }
.escrito h3 { margin-top: 6px; font-size: 17px; line-height: 1.25; }
.escrito p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--suave); }
.escrito p b { color: var(--tinta); }

.articulo { max-width: 800px; }
.articulo--ancho { max-width: 960px; margin: 0 auto; }
.columnas--ficha { align-items: center; }
.columnas__medio { display: flex; justify-content: center; }
.columnas__medio .telefono { width: min(300px, 70vw); }
.articulo > p { margin-top: 18px; font-size: 17px; line-height: 1.7; color: var(--suave); }
.articulo > p:first-child { margin-top: 0; }
.articulo p b { color: var(--tinta); }
.articulo h3 { margin: 40px 0 0; font-size: 22px; }
.tabla-envoltorio { overflow-x: auto; margin-top: 22px; border: 1.5px solid var(--borde); border-radius: 16px; background: var(--carta); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--borde-suave); vertical-align: top; }
th { font: 700 11.5px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); background: var(--tono-6); }
tr:last-child td { border-bottom: 0; }
td.camino { font: 700 13.5px var(--f-mono); color: var(--resalte); }
.nube { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nube span { padding: 8px 13px; border-radius: 10px; background: var(--carta); border: 1.5px solid var(--borde); font-size: 13.5px; font-weight: 600; }
.grupos-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; }
.grupo-pasos { padding: 20px; border-radius: 16px; background: var(--carta); border: 1.5px solid var(--borde); }
.grupo-pasos__cab { display: flex; align-items: center; gap: 10px; }
.grupo-pasos__cab .ms { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--sup); color: #fff; font-size: 22px; vertical-align: 0; }
.grupo-pasos__cab h3 { margin: 0; font-size: 18px; }
.grupo-pasos .pasos { margin-top: 16px; gap: 10px; }

.pie { display: grid; grid-template-columns: auto 1fr; gap: 14px 30px; align-items: center; padding: 34px clamp(20px, 6vw, 96px); background: #1D1D1B; color: #A7B0BE; font-size: 13px; }
.pie__marca { display: flex; align-items: center; gap: 10px; color: #F5F7FA; font-size: 15px; }
.pie__marca img { width: 28px; height: 28px; border-radius: 7px; }
.pie__marca em { color: #128BEC; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; }
.pie__nav a { color: #F5F7FA; font-weight: 600; }
.pie__nav a:hover { color: #8FCBFF; }
.pie__nota { grid-column: 1 / -1; padding-top: 14px; border-top: 1px dashed rgba(18, 139, 236, .34); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.pie__nota a { color: #8FCBFF; }

/* ── 11 · Movimiento: cada sección entra animada cada vez que llega ──────── */
[data-entra] > * { animation-duration: .7s; animation-timing-function: var(--seca); animation-fill-mode: backwards; }
.animar [data-entra="subir"] > * { animation-name: subir; }
.animar [data-entra="reparto"] > *:nth-child(odd) { animation-name: desde-izquierda; }
.animar [data-entra="reparto"] > *:nth-child(even) { animation-name: desde-derecha; }
.animar [data-entra="zoom"] > * { animation-name: zoom-rebote; animation-timing-function: var(--rebote); }
.animar [data-entra="caida"] > * { animation-name: caida; animation-timing-function: var(--rebote); }
.animar [data-entra="lista"] > * { animation-name: desde-izquierda; animation-duration: .5s; }
[data-entra] > :nth-child(1) { animation-delay: 0s; } [data-entra] > :nth-child(2) { animation-delay: .06s; }
[data-entra] > :nth-child(3) { animation-delay: .12s; } [data-entra] > :nth-child(4) { animation-delay: .18s; }
[data-entra] > :nth-child(5) { animation-delay: .24s; } [data-entra] > :nth-child(6) { animation-delay: .3s; }
[data-entra] > :nth-child(7) { animation-delay: .36s; } [data-entra] > :nth-child(8) { animation-delay: .42s; }
[data-entra] > :nth-child(9) { animation-delay: .48s; } [data-entra] > :nth-child(n+10) { animation-delay: .52s; }
.animar > .tit > *, .animar > .seccion__cta, .animar > .eti, .animar > h2, .animar > .escena__resumen, .animar > .escena__nota, .animar > .escena__acciones,
.animar > .pastillas, .animar > .mini-tarjetas, .animar > .leccion-video, .animar > .ojo__caja, .animar > .ojo__acciones, .animar > .gp { animation: subir .6s var(--seca) backwards; }
.animar > .tit > :nth-child(2), .animar > h2 { animation-delay: .06s; } .animar > .tit > :nth-child(3), .animar > .escena__resumen { animation-delay: .12s; }
.animar > .leccion-video { animation-name: zoom-rebote; animation-timing-function: var(--rebote); animation-delay: .16s; }
.animar > .escena__nota, .animar > .tit > :nth-child(4) { animation-delay: .18s; } .animar > .escena__acciones, .animar > .seccion__cta, .animar > .ojo__acciones { animation-delay: .24s; }
.animar > .ojo__caja { animation-name: imprime; animation-duration: .9s; }
.animar > .ojo__caja .sello { animation: sello-cae .6s var(--seca) .7s backwards; }
@keyframes desde-izquierda { from { opacity: 0; transform: translateX(-40px) rotate(-1.5deg); } }
@keyframes desde-derecha { from { opacity: 0; transform: translateX(40px) rotate(1.5deg); } }
@keyframes zoom-rebote { from { opacity: 0; transform: scale(.84); } }
@keyframes caida { from { opacity: 0; transform: translateY(-30px); } }
@keyframes imprime { from { opacity: 0; transform: translateY(-34px) scaleY(.9); transform-origin: top; } }
@keyframes sello-cae { 0% { opacity: 0; transform: scale(2.3) rotate(-24deg); } 55% { opacity: 1; transform: scale(.9) rotate(10deg); } 78% { transform: scale(1.04) rotate(7deg); } 100% { opacity: 1; transform: rotate(8deg); } }

/* ── 12 · Tablet y teléfono (al final: gana) ─────────────────────────────── */
@media (max-width: 1180px) {
  .conceptos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cabecera__miga { display: none; }
}
@media (max-width: 1020px) {
  .cabecera { flex-wrap: wrap; row-gap: 6px; padding-bottom: 0; }
  .cabecera__nav { order: 10; width: calc(100% + 2 * clamp(16px, 3vw, 34px)); margin: 0 calc(-1 * clamp(16px, 3vw, 34px)); padding: 0 clamp(12px, 3vw, 30px) 6px; overflow-x: auto; scrollbar-width: none; }
  .cabecera__nav::-webkit-scrollbar { display: none; }
  html { scroll-padding-top: 120px; }
  .hero__contenido, .carrusel__panel { padding-top: 120px; }
  .tapa { padding-top: calc(clamp(60px, 8vw, 100px) + 70px); }
  .pdfs--fila, .pdfs--fila.pdfs--anchas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cabecera { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .cabecera__marca { font-size: 15px; }
  .cabecera__app { display: none; }
  .tema { width: 36px; height: 36px; }
  .carrusel__panel { grid-template-columns: 1fr; align-content: center; padding: 120px 20px 150px; gap: 14px; }
  .carrusel__texto .hero__titulo { font-size: clamp(34px, 9.4vw, 52px); }
  .carrusel__texto p { font-size: 15px; }
  .carrusel__mockup { display: none; }
  .carrusel__controles { bottom: 22px; padding: 0 20px; flex-wrap: wrap; }
  .hero { min-height: 600px; }
  .hero__contenido { padding: 116px 20px 40px; }
  .hero__titulo { font-size: clamp(38px, 10vw, 60px); }
  .hero__indice { display: none; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px 20px; }
  .cifra { padding: 12px 14px; }
  .seccion { padding: 56px 20px; }
  .tit { text-align: left; margin-left: 0; }
  .tit__bajada { margin-left: 0; }
  .seccion__cta { justify-content: flex-start; }
  .conceptos { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(250px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -20px; padding-inline: 20px; scrollbar-width: none; }
  .concepto { scroll-snap-align: start; }
  .indice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tarjeta { padding: 10px 10px 14px; border-radius: 16px; }
  .tarjeta__imagen { height: 96px; margin-bottom: 10px; }
  .tarjeta h3 { font-size: 17px; }
  .tarjeta > p:not(.eti) { display: none; }
  .pdfs, .pdfs--fila { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(170px, 46%); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 10px; scrollbar-width: none; }
  .pdf { scroll-snap-align: start; }
  .pdfs.pdfs--anchas, .pdfs--fila.pdfs--anchas { grid-template-columns: none; grid-auto-columns: minmax(240px, 80%); }
  .rejilla-guias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .fila-guias { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; grid-auto-columns: minmax(150px, 44%); }
  .escritos { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(240px, 80%); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 10px; }
  .escrito { scroll-snap-align: start; }
  .telefono { width: min(280px, 62vw); }

  /* Las escenas se apilan: captura arriba, texto abajo */
  .escenario { position: static; height: auto; }
  .escenario__tinte, .capa2 { display: none; }
  .escenario__mockups { position: static; transform: none; display: none; }
  .escenas__columna { margin-top: 0; width: 100%; padding: 0 20px; }
  .escena { min-height: 0; padding: 48px 0; }
  .escena__movil { display: block; margin: 0 0 20px; border-radius: 20px; overflow: hidden; border: 1.5px solid var(--borde); background: var(--pantalla); aspect-ratio: 4 / 5; position: relative; box-shadow: var(--sombra-tarjeta); }
  .escena__movil > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .escena__movil--ancho { aspect-ratio: 16 / 10; }
  .animar .escena__movil { animation: zoom-rebote .6s var(--rebote) backwards; }
  .monitor { width: 100%; }
  .ojo { padding: 60px 20px; }
  .tapa { padding: 140px 20px 44px; }
  .pie { grid-template-columns: 1fr; padding: 28px 20px; }
  .pie__nav { justify-content: flex-start; }
  .columnas { gap: 28px; }
  .columnas__medio { display: none; }

  /* Reproductor en el teléfono: el video arriba, los pasos en una tira que se desliza */
  .gp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "video" "barra" "lado"; gap: 12px; }
  .gp__video { width: min(100%, calc(min(62svh, 600px) * 9 / 16)); }
  .gp__lado { min-height: 0; }
  .gp__lado > .gp__tirilla { position: static; }
  .gp__tirilla { padding: 16px 0 18px; }
  .gp__tirilla > header, .gp__tirilla > footer { padding-left: 16px; padding-right: 16px; }
  .gp__pasos { display: flex; gap: 8px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 4px 16px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .gp__pasos > li { flex: 0 0 auto; scroll-snap-align: start; }
  .gp__paso { width: auto; max-width: 230px; grid-template-columns: 26px minmax(0, 1fr); border: 1.5px solid var(--borde); background: var(--carta); padding: 8px 12px 8px 8px; font-size: 13.5px; }
  .gp__paso .gp__t { display: none; }
  .gp__marca { width: 14px; height: 14px; margin: -7px 0 0 -7px; font-size: 0; border-width: 2px; }
  .gp__marca .ms { display: none; }
  .gp__marca.on { transform: scale(1.35); }
  .gp__sub { height: 8px; margin-top: -4px; }
  .gp__mandos { gap: 0; }
  .gp__btn { width: 38px; }
  .gp__tiempo { margin-left: 4px; font-size: 12px; }
  .gp__paso--sub { padding-left: 8px; }
  .gp__paso--sub .gp__n { margin-left: 8px; }
  .gp-modal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .gp-modal__cuerpo { max-height: 100%; height: 100%; padding: 14px 14px 22px; }
  .gp-modal .gp__video { width: min(100%, calc(min(58svh, 560px) * 9 / 16)); }
}
@media (max-width: 900px) and (min-height: 700px) {
  .carrusel__panel { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; padding: 118px 20px 104px; gap: 10px; }
  .carrusel__mockup { display: flex; align-items: flex-start; justify-content: center; height: auto; min-height: 0; }
  .carrusel__mockup .telefono { height: min(36svh, calc(100svh - 500px)); width: auto; animation: none; }
  .chapa-video { left: auto; right: 4%; bottom: 8%; padding: 7px 12px 7px 7px; }
  .chapa-video > .ms { width: 32px; height: 32px; font-size: 20px; }
}
@media (max-width: 480px) {
  .indice { grid-template-columns: 1fr 1fr; }
  .mini-tarjetas { grid-template-columns: 1fr; }
}
@media (min-width: 901px) { .escena__movil { display: none; } }

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