/* Web pública de Sinapsis. Marca propia (web/MARCA.md): tinta #0C0D1C, pulso #5A47FF, chispa #22D3C5,
   tipografía Manrope autoalojada. Estructura y ritmo al estilo de las páginas de producto de Apple:
   titulares grandes centrados, mucho aire, secciones que alternan blanco y niebla, tarjetas redondeadas,
   animaciones de entrada al hacer scroll (.rv → .visto, web.js) y una película animada (.pelicula). */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fuentes/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fuentes/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --tinta: #0C0D1C;
  --tinta-2: #1B1D33;
  --pizarra: #4E5168;
  --niebla-texto: #8A8DA3;
  --linea: #E6E7EF;
  --niebla: #F5F6FA;
  --papel: #FFFFFF;
  --pulso: #5A47FF;
  --pulso-oscuro: #3F2DD6;
  --chispa: #22D3C5;
  --tinte: #EEEDFF;
  --tinte-chispa: #E4FAF7;
  --ok: #15A36B;
  --ok-fondo: #E7F7F0;
  --av: #C97A07;
  --av-fondo: #FFF4E0;
  --no: #E5484D;
  --no-fondo: #FDEBEC;
  --tinta-fondo: #0C0D1C;
  --tinta-fondo-2: #1B1D33;
  --barra-fondo: rgba(255,255,255,.72);
  --menu-fondo: rgba(255,255,255,.96);
  --pronto-fondo: rgba(255,255,255,.6);
  --pronto-borde: #CBCDDB;
  --nav-hover: rgba(12,13,28,.05);
  --nav-activo: rgba(12,13,28,.06);
  --degradado: linear-gradient(100deg, var(--pulso) 0%, var(--chispa) 100%);
  --sombra-flota: 0 30px 60px -30px rgba(12,13,28,.35), 0 8px 20px -12px rgba(12,13,28,.15);
  --sombra-tarjeta: 0 1px 2px rgba(12,13,28,.04), 0 10px 30px -20px rgba(12,13,28,.2);
  --ancho: 1120px;
  --ancho-texto: 760px;
  --radio: 24px;
  --suave: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

/* Modo oscuro: sigue al sistema, o lo fuerza el botón de la barra (data-tema en <html>, tema.js). Los bloques
   que ya eran oscuros (película, seguridad, historias oscuras) se elevan un tono para seguir destacando. */
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --tinta: #F2F3FA; --tinta-2: #E6E7F2; --pizarra: #B4B7CC; --niebla-texto: #8D90A8; --linea: #262840; --niebla: #13152A; --papel: #0C0D1C; --tinte: #251F57; --tinte-chispa: #0F2F2D; --ok-fondo: #0F2A20; --av-fondo: #33250A; --no-fondo: #3A1418; --pulso-oscuro: #7D70FF; --tinta-fondo: #181A30; --tinta-fondo-2: #242745; --barra-fondo: rgba(12,13,28,.72); --menu-fondo: rgba(12,13,28,.96); --pronto-fondo: rgba(255,255,255,.03); --pronto-borde: #33365A; --nav-hover: rgba(255,255,255,.08); --nav-activo: rgba(255,255,255,.1); --sombra-flota: 0 30px 60px -30px rgba(0,0,0,.7), 0 8px 20px -12px rgba(0,0,0,.5); --sombra-tarjeta: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -20px rgba(0,0,0,.6); color-scheme: dark; } }
:root[data-tema="oscuro"] { --tinta: #F2F3FA; --tinta-2: #E6E7F2; --pizarra: #B4B7CC; --niebla-texto: #8D90A8; --linea: #262840; --niebla: #13152A; --papel: #0C0D1C; --tinte: #251F57; --tinte-chispa: #0F2F2D; --ok-fondo: #0F2A20; --av-fondo: #33250A; --no-fondo: #3A1418; --pulso-oscuro: #7D70FF; --tinta-fondo: #181A30; --tinta-fondo-2: #242745; --barra-fondo: rgba(12,13,28,.72); --menu-fondo: rgba(12,13,28,.96); --pronto-fondo: rgba(255,255,255,.03); --pronto-borde: #33365A; --nav-hover: rgba(255,255,255,.08); --nav-activo: rgba(255,255,255,.1); --sombra-flota: 0 30px 60px -30px rgba(0,0,0,.7), 0 8px 20px -12px rgba(0,0,0,.5); --sombra-tarjeta: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -20px rgba(0,0,0,.6); color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tinta); background: var(--papel); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--pulso); text-decoration: none; }
a:hover { color: var(--pulso-oscuro); }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--pulso); outline-offset: 3px; border-radius: 6px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding-left: 24px; padding-right: 24px; width: 100%; }
.pagina { min-height: 100vh; display: flex; flex-direction: column; }
.degradado { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Enlaces estilo Apple: texto + chevron */
.mas { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 17px; }
.mas::after { content: "›"; font-size: 20px; line-height: 1; transition: transform .2s var(--suave); }
.mas:hover::after { transform: translateX(3px); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; color: #fff; background: var(--pulso); border: 1px solid transparent; cursor: pointer; transition: transform .18s var(--suave), background-color .18s, box-shadow .18s; white-space: nowrap; }
.boton:hover { color: #fff; background: var(--pulso-oscuro); transform: translateY(-1px); box-shadow: 0 12px 28px -14px rgba(90,71,255,.7); }
.boton:active { transform: translateY(0); }
.boton-claro { color: var(--tinta); background: var(--papel); border-color: var(--linea); }
.boton-claro:hover { color: var(--tinta); background: var(--niebla); box-shadow: none; }
.boton-tinta { background: var(--tinta-fondo); }
.boton-tinta:hover { background: var(--tinta-fondo-2); box-shadow: 0 12px 28px -14px rgba(12,13,28,.6); }
.boton-grande { padding: 14px 26px; font-size: 17px; }
.boton-bloque { width: 100%; }
.boton-pequeno { padding: 7px 14px; font-size: 13px; }

/* Barra de navegación: fina, translúcida, fija */
.barra { position: sticky; top: 0; z-index: 20; height: 52px; background: var(--barra-fondo); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(12,13,28,.06); transition: background-color .3s; }
.barra .contenedor { height: 100%; display: flex; align-items: center; gap: 28px; white-space: nowrap; }
.logo { display: inline-flex; flex-shrink: 0; align-items: center; gap: 9px; color: var(--tinta); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.logo:hover { color: var(--tinta); }
.logo svg { width: 26px; height: 26px; }
.nav { display: flex; flex-shrink: 0; gap: 2px; margin: 0 auto; }
.nav a { white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--pizarra); transition: background-color .15s, color .15s; }
.nav a:hover { background: var(--nav-hover); color: var(--tinta); }
.barra-acciones { display: flex; flex-shrink: 0; align-items: center; gap: 6px; margin-left: auto; }
.idioma { padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--pizarra); border: 1px solid var(--linea); }
.idioma:hover { color: var(--tinta); background: var(--niebla); }
.entrar-enlace { white-space: nowrap; padding: 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.menu-boton { display: none; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; color: var(--tinta); cursor: pointer; place-items: center; }
.menu-barras { position: relative; display: block; width: 20px; height: 14px; }
.menu-barras i { position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--suave), top .3s var(--suave); }
.menu-barras i:first-child { top: 2px; }
.menu-barras i:last-child { top: 10px; }
.menu-boton[aria-expanded="true"] .menu-barras i:first-child { top: 6px; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-barras i:last-child { top: 6px; transform: rotate(-45deg); }
.menu-movil { display: none; }
html[data-menu="abierto"] { overflow: hidden; }
html[data-menu="abierto"] .barra { background: var(--papel); border-bottom-color: transparent; }

/* Portada */
.portada { position: relative; overflow: hidden; padding: 96px 0 40px; text-align: center; }
.portada .contenedor, .cabecera-pagina .contenedor, .ia-portada .contenedor { position: relative; }
.cabecera-pagina, .ia-portada, .precio-pagina { position: relative; overflow: hidden; }
.portada-sobre { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pulso); }
.portada h1 { margin-top: 14px; font-size: 76px; line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; color: var(--tinta); }
.portada h1 span { display: block; }
.portada-texto { margin: 22px auto 0; max-width: 680px; font-size: 21px; line-height: 1.45; color: var(--pizarra); font-weight: 500; }
.portada-enlaces { margin-top: 24px; display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.portada-nota { margin-top: 18px; font-size: 14px; color: var(--niebla-texto); }
.portada-visual { position: relative; margin: 56px auto 0; max-width: 720px; }
.halo { position: absolute; inset: -40px -80px; background: radial-gradient(60% 60% at 50% 40%, rgba(90,71,255,.16), transparent 70%), radial-gradient(40% 40% at 70% 70%, rgba(34,211,197,.18), transparent 70%); filter: blur(10px); pointer-events: none; }

/* Ventana de la app (portada) */
.ventana { position: relative; background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); border-radius: 20px; box-shadow: var(--sombra-flota); overflow: hidden; text-align: left; }
.ventana-barra { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--tinta-fondo); color: #fff; font-size: 13px; }
.ventana-puntos { display: inline-flex; gap: 6px; }
.ventana-puntos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); }
.ventana-url { font-weight: 600; opacity: .9; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ventana-chip { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11.5px; font-weight: 700; white-space: nowrap; flex: none; }
.ventana-cuerpo { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo-nombre { font-size: 11px; font-weight: 700; color: var(--niebla-texto); text-transform: uppercase; letter-spacing: .06em; }
.campo-valor { padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--niebla); }
.resultados { display: flex; flex-direction: column; gap: 8px; }
.fila { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--papel); font-size: 14px; font-weight: 600; }
.fila-ok { background: var(--ok-fondo); border-color: transparent; }
.fila-av { background: var(--av-fondo); border-color: transparent; }
.fila .estado { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--pizarra); white-space: nowrap; }
.fila-ok .estado { color: var(--ok); }
.fila-av .estado { color: var(--av); }
.punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--pulso); }
.fila-ok .punto { background: var(--ok); }
.fila-av .punto { background: var(--av); }
.portada-pie { margin-top: 18px; font-size: 14px; color: var(--niebla-texto); }

/* Secciones */
.seccion { padding: 120px 0 0; }
.seccion-niebla { background: var(--niebla); padding: 120px 0; margin-top: 120px; }
.sobre { display: block; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pulso); }
.titular { margin: 0 auto; max-width: var(--ancho-texto); text-align: center; }
.titular h2, .titular h1 { margin-top: 12px; font-size: 52px; line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; color: var(--tinta); }
.titular p { margin: 18px auto 0; max-width: 640px; font-size: 19px; line-height: 1.5; color: var(--pizarra); font-weight: 500; }

/* Concepto: una frase grande */
.concepto { padding: 120px 0 0; }
.concepto .titular h2 { font-size: 60px; }
.concepto .titular p { max-width: 720px; font-size: 21px; }

/* Capítulos: texto y visual alternando, visual pegajoso en escritorio */
.capitulos { display: flex; flex-direction: column; gap: 120px; margin-top: 72px; }
.capitulo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.capitulo:nth-child(even) .capitulo-texto { order: 2; }
.capitulo-texto { max-width: 480px; }
.capitulo-texto .sobre { color: var(--niebla-texto); }
.capitulo-texto h3, .capitulo-texto h2 { margin-top: 12px; font-size: 38px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; color: var(--tinta); }
.capitulo-texto p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--pizarra); }
.capitulo-texto .mas { margin-top: 18px; }
.capitulo-visual { position: relative; }
.visual { position: relative; border-radius: var(--radio); background: var(--niebla); padding: 36px; min-height: 360px; display: grid; place-items: center; overflow: hidden; }
.visual-oscuro { background: var(--tinta-fondo); color: #fff; }
.tarjeta-visual { width: 100%; max-width: 420px; background: var(--papel); color: var(--tinta); border-radius: 18px; box-shadow: var(--sombra-tarjeta); border: 1px solid var(--linea); overflow: hidden; }
.tarjeta-visual-cab { padding: 12px 16px; background: var(--niebla); font-size: 12.5px; font-weight: 700; color: var(--pizarra); border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 8px; }
.tarjeta-visual-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 10px; background: var(--niebla); }
.check i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: var(--ok); flex: none; }
.check-av i { background: var(--av); }
.check-av { background: var(--av-fondo); }
.motivo { font-size: 13px; color: var(--pizarra); padding: 8px 12px; border: 1px dashed var(--linea); border-radius: 10px; }

/* Móvil del profesor */
.movil { width: 250px; background: var(--tinta-fondo); border-radius: 36px; padding: 10px; box-shadow: var(--sombra-flota); }
.movil-pantalla { background: var(--papel); border-radius: 28px; overflow: hidden; color: var(--tinta); }
.movil-cab { padding: 18px 16px 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.movil-clase { margin: 0 12px; padding: 12px; border-radius: 14px; background: var(--tinte); font-size: 13px; font-weight: 700; color: var(--pulso-oscuro); }
.movil-tema { margin: 8px 12px 0; font-size: 12px; color: var(--pizarra); }
.lista { margin: 10px 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.alumno { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--niebla); font-size: 13.5px; font-weight: 600; }
.alumno .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--linea); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--pizarra); }
.alumno .toggle { margin-left: auto; width: 34px; height: 20px; border-radius: 999px; background: var(--linea); position: relative; transition: background-color .3s; }
.alumno .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--suave); }
.alumno.presente .toggle { background: var(--ok); }
.alumno.presente .toggle::after { transform: translateX(14px); }

/* Informe (documento) */
.documento-visual { width: 100%; max-width: 380px; aspect-ratio: 1 / 1.25; background: var(--papel); border-radius: 12px; box-shadow: var(--sombra-flota); padding: 26px; display: flex; flex-direction: column; gap: 12px; color: var(--tinta); }
.doc-cab { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--niebla-texto); text-transform: uppercase; letter-spacing: .06em; }
.doc-marca { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta); }
.doc-marca i { width: 16px; height: 16px; border-radius: 5px; background: var(--degradado); }
.doc-titulo { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.doc-sub { font-size: 12px; color: var(--pizarra); margin-top: -8px; }
.doc-seccion { font-size: 10.5px; font-weight: 700; color: var(--niebla-texto); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.doc-linea { display: flex; justify-content: space-between; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.doc-palabra { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--tinte); color: var(--pulso-oscuro); font-size: 11.5px; font-weight: 700; }
.doc-comentario { font-size: 12.5px; line-height: 1.5; color: var(--pizarra); }
.doc-firma { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--pizarra); }
.qr { width: 34px; height: 34px; border-radius: 6px; background:
  linear-gradient(90deg, var(--tinta) 2px, transparent 2px) 0 0 / 6px 6px,
  linear-gradient(var(--tinta) 2px, transparent 2px) 0 0 / 6px 6px, var(--niebla); border: 2px solid var(--tinta); flex: none; }

/* Portal con marca */
.navegador { width: 100%; max-width: 420px; background: var(--papel); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra-tarjeta); border: 1px solid var(--linea); color: var(--tinta); }
.navegador-barra { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--niebla); border-bottom: 1px solid var(--linea); font-size: 12.5px; color: var(--pizarra); }
.navegador-barra .candado { width: 10px; height: 12px; border: 2px solid var(--ok); border-radius: 3px; border-top-width: 3px; }
.navegador-cuerpo { padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.marca-cliente { width: 56px; height: 56px; border-radius: 16px; background: #0F766E; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 22px; }
.navegador-cuerpo h4 { font-size: 18px; font-weight: 800; }
.boton-identidad { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid var(--linea); font-size: 13.5px; font-weight: 600; background: var(--papel); }
.boton-identidad.google { background: var(--tinta-fondo); color: #fff; border-color: transparent; }
.insignias { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.insignia { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--tinte-chispa); color: #0B7A70; }

/* Módulos: mosaico de tarjetas */
.mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; list-style: none; padding: 0; }
.tarjeta { position: relative; padding: 28px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--suave), box-shadow .3s; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-flota); }
.tarjeta h3, .tarjeta h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.tarjeta p { font-size: 15px; line-height: 1.55; color: var(--pizarra); }
.tarjeta-cab { display: flex; align-items: center; gap: 12px; }
.icono { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tinte); color: var(--pulso); flex: none; }
.icono-chispa { background: var(--tinte-chispa); color: #0B7A70; }
.icono-gris { background: var(--niebla); color: var(--pizarra); }
.etiqueta { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.etiqueta-ok { background: var(--ok-fondo); color: var(--ok); }
.etiqueta-marca { background: var(--tinte); color: var(--pulso-oscuro); }
.etiqueta-gris { background: var(--niebla); color: var(--pizarra); }
.tarjeta-pronto { background: var(--pronto-fondo); border: 1px dashed var(--pronto-borde); }
.tarjeta-pronto h3 { color: var(--pizarra); }

/* Seguridad: sección oscura */
.oscura { background: var(--tinta-fondo); color: #fff; padding: 120px 0; margin-top: 120px; }
.oscura .titular h2, .oscura .titular h1 { color: #fff; }
.oscura .titular p { color: rgba(255,255,255,.72); }
.oscura .sobre { color: var(--chispa); }
.garantias { margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; }
.garantias li { padding: 24px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 8px; }
.garantias strong { font-size: 17px; font-weight: 700; }
.garantias span { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72); }

/* Precio */
.precio { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 120px; }
.precio .titular { text-align: left; margin: 0; }
.precio .titular p { margin-left: 0; }
.plan { border-radius: var(--radio); padding: 32px; background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra-flota); display: flex; flex-direction: column; gap: 18px; }
.plan-cifra strong { display: block; font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.plan-cifra span { display: block; margin-top: 6px; font-size: 14px; color: var(--pizarra); }
.plan ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li i { width: 20px; height: 20px; border-radius: 50%; background: var(--ok-fondo); color: var(--ok); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; flex: none; margin-top: 1px; }
.plan li i.mas-i { background: var(--tinte); color: var(--pulso-oscuro); }
.plan-nota { font-size: 13px; color: var(--niebla-texto); text-align: center; }

/* Pasos */
.pasos { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; counter-reset: paso; }
.paso { padding: 28px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); display: flex; flex-direction: column; gap: 10px; }
.paso::before { counter-increment: paso; content: counter(paso); width: 34px; height: 34px; border-radius: 50%; background: var(--tinta-fondo); color: #fff; font-weight: 800; font-size: 15px; display: grid; place-items: center; }
.paso h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.paso p { font-size: 15px; line-height: 1.55; color: var(--pizarra); }

/* Cierre */
.cierre { padding: 120px 0; text-align: center; }
.cierre h2 { font-size: 52px; line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; }
.cierre p { margin: 16px auto 0; max-width: 560px; font-size: 19px; color: var(--pizarra); }
.cierre-acciones { margin-top: 28px; display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cierre-correo { font-size: 15px; font-weight: 600; color: var(--pizarra); }

/* Pie */
.pie { border-top: 1px solid var(--linea); background: var(--niebla); }
.pie .contenedor { padding: 32px 24px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; font-size: 12.5px; color: var(--niebla-texto); }
.pie .logo { font-size: 15px; }
.pie .logo svg { width: 20px; height: 20px; }
.pie nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.pie nav a { color: var(--pizarra); }
.pie nav a:hover { color: var(--tinta); }
.pie-derechos { flex-basis: 100%; }

/* Película animada */
.pelicula { padding-top: 120px; }
.cine { position: relative; margin: 48px auto 0; max-width: 980px; border-radius: 28px; background: var(--tinta-fondo); color: #fff; box-shadow: var(--sombra-flota); overflow: hidden; }
.escenario { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.escena { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px 48px; opacity: 0; visibility: hidden; transition: opacity .6s var(--suave), visibility 0s .6s; }
.escena.activa { opacity: 1; visibility: visible; transition: opacity .6s var(--suave); }
.escena .paso-anim { opacity: 0; transform: translateY(14px); }
.escena.activa .paso-anim { animation: aparecer .6s var(--suave) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes aparecer { to { opacity: 1; transform: none; } }
.escena.activa .desaparecer { animation: desaparecer .5s var(--suave) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes desaparecer { to { opacity: 0; transform: scale(.96); } }
.cine-controles { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.08); }
.cine-boton { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .15s; }
.cine-boton:hover { background: rgba(255,255,255,.14); }
.cine-boton svg { width: 16px; height: 16px; fill: currentColor; }
.cine-boton .pausa { display: none; }
.cine.reproduciendo .cine-boton .play { display: none; }
.cine.reproduciendo .cine-boton .pausa { display: block; }
.cine-puntos { display: flex; gap: 6px; }
.cine-puntos button { width: 28px; height: 6px; border-radius: 999px; border: 0; background: rgba(255,255,255,.18); cursor: pointer; padding: 0; overflow: hidden; position: relative; }
.cine-puntos button i { position: absolute; inset: 0; width: 0; background: var(--chispa); border-radius: 999px; }
.cine-puntos button[aria-current="true"] i { width: 100%; transition: width var(--dur, 6s) linear; }
.cine.pausado .cine-puntos button[aria-current="true"] i { transition: none; }
.cine-puntos button.vista i { width: 100%; background: rgba(255,255,255,.5); }
.cine-pie { margin-left: auto; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }

/* Escena 1: logo */
.e1-logo { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.e1-logo svg { width: 120px; height: 120px; color: #fff; }
.e1-logo .trazo { stroke-dasharray: 90; stroke-dashoffset: 90; }
.escena.activa .e1-logo .trazo { animation: trazar 1.1s var(--suave) forwards; }
.escena.activa .e1-logo .trazo-2 { animation-delay: .35s; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.e1-logo .senal { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.escena.activa .e1-logo .senal { animation: chispa 1.2s var(--suave) 1.2s forwards; }
@keyframes chispa { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
.e1-nombre { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; }
.e1-lema { font-size: 17px; color: rgba(255,255,255,.72); }


/* Escena 3: llamada y búsqueda */
.e-visual .llamada { flex-direction: row; align-items: center; gap: 14px; width: 100%; max-width: 440px; padding: 12px 16px; margin-bottom: 12px; }
.e-visual .llamada .timbre { flex: none; }
.llamada { padding: 18px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 8px; }
.llamada .timbre { width: 44px; height: 44px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; animation: timbre 1s ease-in-out infinite; }
@keyframes timbre { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } }
.llamada .timbre svg { width: 20px; height: 20px; fill: #fff; }
.llamada small { font-size: 12px; color: rgba(255,255,255,.6); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.llamada q { font-size: 15px; font-weight: 600; quotes: none; }
.e-visual .ventana { width: 100%; max-width: 440px; }
.e-visual .campo-valor { color: var(--tinta); }
.e-visual .teclea { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; }
.escena.activa .e-visual .teclea { animation: teclear 1s steps(6) 2.2s forwards; }
@keyframes teclear { to { width: 100%; } }

/* Escena 4: reglas */
.guardado { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ok-fondo); color: var(--ok); font-size: 14px; font-weight: 700; }
.guardado b { margin-left: auto; font-weight: 700; color: var(--pulso-oscuro); }

/* Escena 5: móvil */
.e5 .movil { transform: scale(.86); }
.e5 { position: relative; }
.e5 .enviado { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: var(--ok); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }

/* Escena 6: informe */
.e6 .documento-visual { max-width: 340px; aspect-ratio: auto; padding: 20px; gap: 8px; transform: scale(.9); }
.e6 .teclea-largo { display: inline-block; }

/* Escena 7: portal */
.e7 .navegador { max-width: 400px; }
.e7 .insignias { margin-top: 4px; }

/* Escena 8: cierre */
.e8 { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.e8 p { font-size: 17px; color: rgba(255,255,255,.72); }
.mas-claro { color: rgba(255,255,255,.8); }
.mas-claro:hover { color: #fff; }

/* Páginas sencillas: entrar, legal, 404 */
.centro { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 24px; gap: 28px; background: var(--niebla); overflow: hidden; }
.centro-cabecera { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.centro-cabecera svg { width: 56px; height: 56px; color: var(--tinta); }
.centro-cabecera h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--tinta); }
.centro-cabecera p { font-size: 15px; color: var(--pizarra); }
.caja { position: relative; width: 100%; max-width: 460px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 32px; box-shadow: var(--sombra-flota); display: flex; flex-direction: column; gap: 16px; }
.caja h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--tinta); }
.caja p { font-size: 14px; line-height: 1.5; color: var(--pizarra); }
.caja label { font-size: 12px; font-weight: 700; color: var(--niebla-texto); text-transform: uppercase; letter-spacing: .06em; }
.subdominio { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: var(--papel); }
.subdominio:focus-within { border-color: var(--pulso); box-shadow: 0 0 0 4px var(--tinte); }
.subdominio input { flex: 1 1 auto; min-width: 0; border: 0; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--tinta); background: transparent; outline: none; }
.subdominio span { padding: 13px 14px 13px 0; font-size: 14px; color: var(--niebla-texto); white-space: nowrap; }
.aviso { display: none; width: 100%; max-width: 460px; padding: 12px 14px; border-radius: 14px; background: var(--no-fondo); border: 1px solid rgba(229,72,77,.3); color: #B3261E; font-size: 13.5px; line-height: 1.5; }
.aviso[data-visible="si"] { display: block; }
.centro-pie { position: relative; font-size: 12.5px; color: var(--niebla-texto); display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.centro-pie a { color: var(--pizarra); }
.documento { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; display: flex; flex-direction: column; gap: 14px; }
.documento h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--tinta); }
.documento .actualizado { font-size: 14px; color: var(--niebla-texto); margin-bottom: 16px; }
.documento h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); margin-top: 28px; }
.documento h3 { font-size: 18px; font-weight: 700; color: var(--tinta); margin-top: 12px; }
.documento p, .documento li { font-size: 16.5px; line-height: 1.65; color: var(--pizarra); }
.documento ul, .documento ol { padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.documento .destacado { padding: 16px 20px; border-radius: 16px; background: var(--niebla); border: 1px solid var(--linea); }


/* Animaciones de entrada con scroll */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--suave), transform .9s var(--suave); }
.js .rv.visto { opacity: 1; transform: none; }
.rv-2 { transition-delay: .12s; } .rv-3 { transition-delay: .24s; } .rv-4 { transition-delay: .36s; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.flota { animation: flotar 7s ease-in-out infinite; }
@keyframes latido { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .55; } }
.late { animation: latido 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .flota, .late, .llamada .timbre, .sn-imp { animation: none !important; }
  .escena .paso-anim, .escena.activa .paso-anim, .escena.activa .e2 .chip, .escena.activa .e1-logo .trazo, .escena.activa .e1-logo .senal, .escena.activa .e3 .teclea { animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; width: auto; }
  .escena.activa .desaparecer { animation: none !important; }
  .escena { transition: none; }
  .boton, .tarjeta, .mas::after { transition: none; }
}

/* Tableta y móvil */
@media (max-width: 1024px) {
  .portada h1 { font-size: 60px; }
  .titular h2, .titular h1, .cierre h2 { font-size: 42px; }
  .concepto .titular h2 { font-size: 48px; }
  .mosaico, .garantias, .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capitulo { gap: 40px; }
  .capitulo-texto h3, .capitulo-texto h2 { font-size: 32px; }
}
@media (max-width: 1040px) {
  .barra .contenedor { gap: 16px; }
  .nav a { padding: 6px 10px; }
}
@media (max-width: 920px) {
  .nav { display: none; }
  .menu-boton { display: grid; }
  .barra-acciones .boton, .barra-acciones .entrar-enlace { display: none; }
  .menu-movil { position: fixed; inset: 0; z-index: 19; background: var(--papel); padding: 72px 24px 32px; padding-bottom: max(32px, env(safe-area-inset-bottom)); flex-direction: column; overflow-y: auto; }
  .menu-movil[data-abierto="si"] { display: flex; animation: menu-entra .35s var(--suave) both; }
  .menu-movil-lista { display: flex; flex-direction: column; }
  .menu-movil-lista a { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--tinta); border-bottom: 1px solid var(--linea); opacity: 0; transform: translateY(14px); }
  .menu-movil[data-abierto="si"] .menu-movil-lista a { animation: menu-enlace .5s var(--suave) both; }
  .menu-movil-lista a:nth-child(1) { animation-delay: .05s; } .menu-movil-lista a:nth-child(2) { animation-delay: .1s; } .menu-movil-lista a:nth-child(3) { animation-delay: .15s; } .menu-movil-lista a:nth-child(4) { animation-delay: .2s; } .menu-movil-lista a:nth-child(5) { animation-delay: .25s; }
  .menu-movil-lista a::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--niebla-texto); border-bottom: 2px solid var(--niebla-texto); transform: rotate(-45deg); margin-right: 6px; }
  .menu-movil-lista a[aria-current="page"] { color: var(--pulso-oscuro); }
  .menu-movil-acciones { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 28px; opacity: 0; }
  .menu-movil[data-abierto="si"] .menu-movil-acciones { animation: menu-enlace .5s .3s var(--suave) both; }
  .menu-movil-acciones .boton { width: 100%; padding: 14px 20px; font-size: 16px; }
  @keyframes menu-entra { from { opacity: 0; } to { opacity: 1; } }
  @keyframes menu-enlace { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 760px) {
  .portada { padding-top: 64px; }
  .portada h1 { font-size: 42px; }
  .portada-texto { font-size: 17px; }
  .portada-visual { margin-top: 40px; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .seccion, .concepto, .pelicula, .precio { padding-top: 80px; }
  .seccion-niebla, .oscura, .cierre { padding: 80px 0; margin-top: 80px; }
  .titular h2, .titular h1, .cierre h2, .concepto .titular h2 { font-size: 34px; }
  .titular p, .concepto .titular p { font-size: 17px; }
  .capitulos { gap: 72px; margin-top: 48px; }
  .capitulo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .capitulo:nth-child(even) .capitulo-texto { order: 0; }
  .capitulo-texto h3, .capitulo-texto h2 { font-size: 28px; }
  .visual { padding: 24px; min-height: 0; }
  .mosaico, .garantias, .pasos { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .precio { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .plan { padding: 24px; }
  .pie nav { margin-left: 0; }
  .cine { border-radius: 18px; margin-top: 32px; }
  .escena { padding: 20px; }
  .cine-controles { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .e1-logo svg { width: 72px; height: 72px; }
  .e1-nombre { font-size: 30px; }
  .escenario { aspect-ratio: auto; height: 640px; }
  .escena-dos { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 14px; }
  .e-texto h3 { font-size: 20px; }
  .e-texto li { font-size: 13.5px; padding-left: 16px; }
  .e-texto li::before { top: 8px; width: 6px; height: 6px; }
  .e-visual { transform: scale(.78); transform-origin: top center; }
  .e-visual .llamada { display: none; }
  .documento h1 { font-size: 32px; }
  .documento h2 { font-size: 21px; }
}

/* Película: escena en dos columnas (texto que explica + visual) */
.escena-dos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; width: 100%; height: 100%; }
.e-texto { display: flex; flex-direction: column; gap: 14px; }
.e-texto h3 { margin: 0; font-size: 28px; line-height: 1.12; font-weight: 800; letter-spacing: -0.025em; }
.e-texto ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.e-texto li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.45; color: rgba(255,255,255,.82); }
.e-texto li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--chispa); }
.e-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.e-visual .e1-logo svg { width: 150px; height: 150px; }
.e-visual .e1-nombre { font-size: 36px; }
.e-visual .e1-lema { font-size: 15px; }
.e-visual .tarjeta-visual { max-width: 440px; }
.e-visual .navegador { max-width: 400px; }
.e-visual.e8 p { font-size: 16px; color: rgba(255,255,255,.72); text-align: center; }
/* Hoja de cálculo del «antes» */
.hoja { position: relative; width: 100%; max-width: 480px; background: #fff; color: var(--tinta); border-radius: 12px; box-shadow: var(--sombra-flota); overflow: hidden; font-size: 12px; }
.hoja-barra { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #1D6F42; color: #fff; font-size: 11.5px; }
.hoja-barra span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); }
.hoja-barra b { margin-left: 6px; font-weight: 700; }
.hoja table { width: 100%; border-collapse: collapse; }
.hoja th, .hoja td { padding: 6px 8px; border: 1px solid #E3E5EC; text-align: left; white-space: nowrap; }
.hoja th { background: #F2F3F7; color: var(--pizarra); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.hoja td:first-child, .hoja th:first-child { background: #F2F3F7; color: var(--niebla-texto); width: 22px; text-align: center; }
.hoja tbody tr { display: table-row; }
.escena.activa .hoja td.mal-1 { animation: marcar .4s var(--suave) 5.2s forwards; }
.escena.activa .hoja td.mal-2 { animation: marcar .4s var(--suave) 6.2s forwards; }
.escena.activa .hoja td.mal-3 { animation: marcar .4s var(--suave) 7.2s forwards; }
@keyframes marcar { to { background: #FDEBEC; color: #B3261E; box-shadow: inset 0 0 0 1.5px #E5484D; font-weight: 700; } }
.hoja-errores { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: #FFF7F7; border-top: 1px solid #F3C9CB; }
.hoja .error { padding: 3px 9px; border-radius: 999px; background: var(--no); color: #fff; font-size: 11px; font-weight: 700; }
.nota-suelta { position: absolute; padding: 8px 12px; border-radius: 10px; background: #FFF1A8; color: #5a4a00; font-size: 12px; font-weight: 600; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); transform: rotate(var(--rot, 0)); white-space: nowrap; }
.escena.activa .nota-suelta.paso-anim { animation: aparecer-nota .5s var(--suave) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes aparecer-nota { to { opacity: 1; transform: rotate(var(--rot, 0)); } }
/* Cabecera de página interior y bloque «siguiente» */
.cabecera-pagina { padding: 88px 0 24px; }
.cabecera-pagina .titular p { max-width: 720px; }
.seccion-capitulos { padding-top: 48px; }
.seccion-capitulos .capitulos { margin-top: 24px; }
.seccion-modulos { margin-top: 48px; }
.oscura-pagina { margin-top: 0; padding-top: 88px; }
.legal-enlaces { margin-top: 40px; text-align: center; font-size: 15px; color: rgba(255,255,255,.7); }
.legal-enlaces a { color: #fff; font-weight: 600; }
.precio-pagina { padding-top: 88px; }
.siguiente { border-top: 1px solid var(--linea); margin-top: 96px; }
.siguiente .contenedor { padding-top: 40px; padding-bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.siguiente-etiqueta { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--niebla-texto); }
.siguiente-enlace { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; color: var(--tinta); }
.siguiente-enlace:hover { color: var(--pulso); }
.siguiente-enlace span { color: var(--pulso); }
.siguiente + .pie, .seccion-niebla + .pie { margin-top: 0; }
/* Portada: accesos a las páginas */
.atajos-seccion { margin-top: 120px; }
.atajos { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.atajo { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); color: var(--tinta); transition: transform .3s var(--suave), box-shadow .3s; }
.atajo:hover { color: var(--tinta); transform: translateY(-4px); box-shadow: var(--sombra-flota); }
.atajo-icono { width: 44px; height: 44px; border-radius: 14px; background: var(--tinte); color: var(--pulso); display: grid; place-items: center; }
.atajo h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.atajo p { font-size: 14.5px; line-height: 1.5; color: var(--pizarra); flex: 1 1 auto; }
.atajo .mas { font-size: 15px; color: var(--pulso); }
/* Enlace activo de la barra */
.barra[data-pagina="como"] .nav a[data-p="como"], .barra[data-pagina="modulos"] .nav a[data-p="modulos"], .barra[data-pagina="seguridad"] .nav a[data-p="seguridad"], .barra[data-pagina="precio"] .nav a[data-p="precio"], .barra[data-pagina="ia"] .nav a[data-p="ia"] { color: var(--tinta); background: var(--nav-activo); }
.pie-legal { flex-basis: 100%; display: flex; gap: 20px; flex-wrap: wrap; margin-left: 0 !important; }
@media (max-width: 1024px) { .atajos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .atajos { grid-template-columns: minmax(0, 1fr); }
  .atajos-seccion { margin-top: 80px; }
  .siguiente-enlace { font-size: 24px; }
  .cabecera-pagina, .oscura-pagina, .precio-pagina { padding-top: 56px; }
  .hoja { font-size: 11px; }
  .nota-suelta { display: none; }
}

/* IA integrada: chat del asistente, sección de portada y banda en módulos */
/* Ventana del asistente, al estilo de Siri: cristal translúcido con borde de luz, pregunta en burbuja, respuesta en texto */
.chat { position: relative; width: 100%; max-width: 440px; border-radius: 28px; background: rgba(18,20,40,.62); backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); color: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; }
.chat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(90,71,255,.9), rgba(34,211,197,.55) 45%, rgba(255,255,255,.08) 70%, rgba(90,71,255,.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.chat-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 4px; }
.chat-icono { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #fff; }
.chat-icono svg { width: 14px; height: 14px; }
.chat-cab .icono-ia { width: 30px; height: 30px; }
.chat-cuerpo { padding: 14px 20px 8px; display: flex; flex-direction: column; gap: 16px; }
.burbuja { font-size: 15.5px; line-height: 1.5; color: #fff; }
.burbuja-yo { align-self: flex-end; max-width: 86%; padding: 9px 14px; border-radius: 18px 18px 6px 18px; background: rgba(255,255,255,.16); font-weight: 500; }
.burbuja p { margin: 0; }
.burbuja ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.burbuja li { padding-left: 14px; position: relative; font-weight: 600; }
.burbuja li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--chispa); }
.burbuja-aviso { margin-top: 10px !important; color: #F4C06A; font-size: 14.5px; }
.chat-nota { padding: 4px 20px 10px; font-size: 12px; color: rgba(255,255,255,.55); }
.chat-entrada { margin: 0 14px 14px; display: flex; align-items: center; gap: 10px; }
.chat-mas, .chat-mic { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 22px; font-weight: 500; color: #fff; flex: none; }
.chat-mic svg { width: 18px; height: 18px; }
.chat-campo { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 40px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; padding: 0 16px; font-size: 14.5px; color: rgba(255,255,255,.55); }
.chat-campo::before { content: ""; width: 1.5px; height: 18px; background: rgba(255,255,255,.7); margin-right: 6px; animation: cursor 1s steps(2) infinite; }
@keyframes cursor { to { opacity: 0; } }
.historia-oscura .capa .chat { color: #fff; }
.ia-bloque { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.ia-puntos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.ia-puntos li { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 3px solid var(--chispa); }
.ia-puntos strong { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.ia-puntos span { font-size: 15.5px; line-height: 1.55; color: var(--pizarra); }
.banda-ia { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-radius: 18px; background: var(--papel); border: 1px solid var(--linea); font-size: 15px; font-weight: 600; margin-bottom: 18px; }
.banda-ia .mas { margin-left: auto; font-size: 15px; }
@media (max-width: 760px) {
  .ia-bloque { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 36px; }
  .banda-ia .mas { margin-left: 0; }
}

/* Formulario de demo */
.demo-seccion { padding-top: 40px; padding-bottom: 96px; }
.demo-bloque { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.formulario { display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra-flota); }
.campo-f { display: flex; flex-direction: column; gap: 6px; }
.campos-f { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo-f label, .campo-etiqueta { font-size: 13px; font-weight: 700; color: var(--pizarra); }
.campo-f input[type="text"], .campo-f input[type="email"], .campo-f input[type="tel"], .campo-f textarea { font: inherit; font-size: 16px; color: var(--tinta); padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; }
.campo-f textarea { resize: vertical; min-height: 110px; }
.campo-f input:focus, .campo-f textarea:focus { border-color: var(--pulso); box-shadow: 0 0 0 4px var(--tinte); }
.campo-mal input, .campo-mal textarea, .campo-mal .opciones { border-color: var(--no) !important; box-shadow: 0 0 0 4px var(--no-fondo); border-radius: 12px; }
.opciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.opciones label { position: relative; display: block; cursor: pointer; }
.opciones input { position: absolute; opacity: 0; inset: 0; }
.opciones span { display: block; padding: 11px 8px; text-align: center; border-radius: 12px; border: 1px solid var(--linea); font-size: 14px; font-weight: 600; color: var(--pizarra); transition: background-color .15s, border-color .15s, color .15s; }
.opciones input:checked + span { background: var(--tinte); border-color: var(--pulso); color: var(--pulso-oscuro); }
.opciones input:focus-visible + span { box-shadow: 0 0 0 3px var(--tinte); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario-nota { font-size: 13px; color: var(--niebla-texto); text-align: center; }
.aviso-f[hidden] { display: none; }
.aviso-f { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.aviso-f strong { font-size: 16px; }
.aviso-ok { background: var(--ok-fondo); color: #0B6B45; }
.aviso-mal { background: var(--no-fondo); color: #B3261E; }
.demo-puntos { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 22px; }
.demo-puntos li { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 3px solid var(--chispa); }
.demo-puntos strong { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.demo-puntos span { font-size: 15.5px; line-height: 1.55; color: var(--pizarra); }
@media (max-width: 860px) {
  .demo-bloque { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .campos-f { grid-template-columns: minmax(0, 1fr); }
  .opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulario { padding: 22px; }
}

/* Logo de la IA: burbuja puntillista animada (anillos que giran, puntos que laten, núcleo que respira) */
.ia-logo { display: block; width: 100%; height: 100%; overflow: visible; }
.ia-anillo { transform-box: fill-box; transform-origin: center; animation: ia-girar var(--giro, 40s) linear infinite; }
.ia-anillo:nth-child(odd) { animation-direction: reverse; }
@keyframes ia-girar { to { transform: rotate(360deg); } }
.ia-anillo circle { animation: ia-latir 3.2s ease-in-out infinite; animation-delay: var(--t, 0s); }
@keyframes ia-latir { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.ia-nucleo { transform-box: fill-box; transform-origin: center; animation: ia-nucleo 3.2s ease-in-out infinite; }
@keyframes ia-nucleo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.icono-ia { width: 28px; height: 28px; display: inline-grid; place-items: center; flex: none; }
.galeria-item .icono-ia { width: 44px; height: 44px; }
.ia-grande { width: 300px; height: 300px; filter: drop-shadow(0 20px 40px rgba(90,71,255,.35)); animation: ia-respirar 6s ease-in-out infinite; }
@keyframes ia-respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.ia-visual { position: relative; }
.ia-fondo { position: absolute; width: 460px; height: 460px; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .22; pointer-events: none; }
.ia-visual .chat { position: relative; }

/* Galería horizontal («Lo principal») */
.destacados { margin-top: 48px; }
.destacados-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.destacados-cab h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.galeria-botones { display: flex; gap: 8px; }
.galeria-botones .cine-boton { border-color: var(--linea); background: var(--papel); color: var(--tinta); }
.galeria-botones .cine-boton:hover { background: var(--niebla); }
.galeria { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(24px, calc((100vw - var(--ancho)) / 2 + 24px)) 24px; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria-item { flex: 0 0 340px; scroll-snap-align: start; padding: 28px; border-radius: var(--radio); background: var(--niebla); display: flex; flex-direction: column; gap: 12px; min-height: 220px; }
.galeria-item h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: auto; }
.galeria-item p { font-size: 15px; line-height: 1.5; color: var(--pizarra); }

/* Historias de módulo: sección fijada que avanza con el scroll (como las subsecciones de Apple) */
.historias { margin-top: 64px; }
.historias > .contenedor { text-align: center; }
.historia { position: relative; height: 320vh; }
.historia-fija { position: sticky; top: 52px; height: calc(100vh - 52px); display: flex; align-items: center; overflow: hidden; }
.historia-oscura .historia-fija { background: var(--tinta-fondo); color: #fff; }
.historia-oscura .historia-texto .sobre { color: var(--chispa); }
.historia-oscura .paso-h span { color: rgba(255,255,255,.72); }
.historia-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.historia-texto { display: flex; flex-direction: column; gap: 18px; }
.historia-texto h2 { font-size: 46px; line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; }
.revela .palabra { display: inline-block; opacity: clamp(0.12, calc(var(--p, 0) * 6 - var(--i, 0)), 1); transform: translateY(calc((1 - clamp(0, calc(var(--p, 0) * 6 - var(--i, 0)), 1)) * 6px)); transition: none; }
.pasos-h { position: relative; min-height: 120px; }
.paso-h { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--suave), transform .5s var(--suave); pointer-events: none; }
.paso-h strong { font-size: 21px; font-weight: 800; letter-spacing: -0.015em; }
.paso-h span { font-size: 16.5px; line-height: 1.55; color: var(--pizarra); }
.historia[data-paso="0"] .paso-h[data-paso="0"], .historia[data-paso="1"] .paso-h[data-paso="1"], .historia[data-paso="2"] .paso-h[data-paso="2"] { opacity: 1; transform: none; }
.historia-puntos { display: flex; gap: 6px; }
.historia-puntos i { width: 28px; height: 5px; border-radius: 999px; background: var(--linea); transition: background-color .3s; }
.historia-oscura .historia-puntos i { background: rgba(255,255,255,.2); }
.historia[data-paso="0"] .historia-puntos i:nth-child(1), .historia[data-paso="1"] .historia-puntos i:nth-child(-n+2), .historia[data-paso="2"] .historia-puntos i { background: var(--pulso); }
.historia-oscura[data-paso="0"] .historia-puntos i:nth-child(1), .historia-oscura[data-paso="1"] .historia-puntos i:nth-child(-n+2), .historia-oscura[data-paso="2"] .historia-puntos i { background: var(--chispa); }
.historia-visual { position: relative; min-height: 460px; display: grid; place-items: center; transform: scale(calc(0.92 + clamp(0, var(--p, 0), 0.2) * 0.4)); opacity: clamp(0, calc(var(--p, 0) * 8), 1); }
.capa { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .55s var(--suave), transform .55s var(--suave); pointer-events: none; }
.historia[data-paso="0"] .capa[data-capa="0"], .historia[data-paso="1"] .capa[data-capa="1"], .historia[data-paso="2"] .capa[data-capa="2"] { opacity: 1; transform: none; }
.capa .ventana { width: 100%; max-width: 460px; }
.capa .tarjeta-visual, .capa .chat { width: 100%; max-width: 440px; }
.capa .chat .chat-cuerpo .burbuja { color: #fff; }
.capa .tarjeta-visual .boton { align-self: stretch; justify-content: center; }
.documento-corto { aspect-ratio: auto; max-width: 360px; }
.doc-firma-grande { margin-top: 24px; font-size: 13px; }
.doc-firma-grande .qr { width: 64px; height: 64px; }
.nota-movil { margin: 10px 12px 16px; padding: 12px; border-radius: 14px; background: var(--niebla); display: flex; flex-direction: column; gap: 6px; }
.nota-movil p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta); }
.nota-movil p + p { color: var(--pizarra); }
.historia-oscura .capa .documento-visual { color: var(--tinta); }
@media (prefers-reduced-motion: reduce) {
  .historia { height: auto; }
  .historia-fija { position: static; height: auto; padding: 72px 0; }
  .pasos-h { min-height: 0; display: flex; flex-direction: column; gap: 16px; }
  .paso-h { position: static; opacity: 1; transform: none; }
  .historia-puntos { display: none; }
  .historia-visual { transform: none; opacity: 1; }
  .capa { position: static; opacity: 1; transform: none; }
  .capa + .capa { display: none; }
  .revela .palabra { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .historia { height: 260vh; }
  .historia-rejilla { grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: center; }
  .historia-texto h2 { font-size: 30px; }
  .historia-texto { gap: 10px; }
  .paso-h strong { font-size: 17px; }
  .paso-h span { font-size: 14px; }
  .pasos-h { min-height: 96px; }
  .historia-visual { min-height: 300px; transform: none; }
  .capa > * { transform: scale(.8); }
  .capa .movil { transform: scale(.68); }
  .ia-grande { width: 200px; height: 200px; }
  .galeria-item { flex-basis: 280px; }
  .destacados-cab h2 { font-size: 22px; }
  .ia-fondo { width: 360px; height: 360px; }
}

/* Modo oscuro: retoques puntuales */
.tema-boton { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: var(--pizarra); display: grid; place-items: center; cursor: pointer; }
.tema-boton:hover { color: var(--tinta); background: var(--niebla); }
.tema-boton svg { width: 16px; height: 16px; }
.tema-boton .luna { display: none; }
:root[data-tema="oscuro"] .tema-boton .sol { display: none; }
:root[data-tema="oscuro"] .tema-boton .luna { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .tema-boton .sol { display: none; } :root:not([data-tema="claro"]) .tema-boton .luna { display: block; } }
:root[data-tema="oscuro"] .halo { opacity: .7; }
:root[data-tema="oscuro"] .hoja { color: #0C0D1C; }
:root[data-tema="oscuro"] .nota-suelta { color: #5a4a00; }
:root[data-tema="oscuro"] .marca-cliente, :root[data-tema="oscuro"] .boton-identidad.google { color: #fff; }
:root[data-tema="oscuro"] .doc-firma .qr { border-color: var(--tinta); }
:root[data-tema="oscuro"] .oscura, :root[data-tema="oscuro"] .cine, :root[data-tema="oscuro"] .historia-oscura .historia-fija, :root[data-tema="oscuro"] .visual-oscuro { border: 1px solid var(--linea); }
:root[data-tema="oscuro"] .oscura, :root[data-tema="oscuro"] .historia-oscura .historia-fija { border-left: 0; border-right: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .halo { opacity: .7; }
  :root:not([data-tema="claro"]) .hoja { color: #0C0D1C; }
  :root:not([data-tema="claro"]) .nota-suelta { color: #5a4a00; }
  :root:not([data-tema="claro"]) .doc-firma .qr { border-color: var(--tinta); }
  :root:not([data-tema="claro"]) .oscura, :root:not([data-tema="claro"]) .cine, :root:not([data-tema="claro"]) .visual-oscuro { border: 1px solid var(--linea); }
}

/* Página de la IA */
.ia-portada { padding: 72px 0 24px; text-align: center; }
.ia-portada .ia-grande { margin: 0 auto 28px; width: 220px; height: 220px; }
.ia-portada h1 { font-size: 60px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; max-width: 820px; margin: 0 auto; }
.ia-portada p { margin: 20px auto 0; max-width: 680px; font-size: 19px; line-height: 1.5; color: var(--pizarra); font-weight: 500; }
.ia-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
.ia-tarea { padding: 32px; border-radius: var(--radio); background: var(--niebla); display: flex; flex-direction: column; gap: 14px; }
.ia-tarea h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.ia-tarea p { font-size: 15.5px; line-height: 1.55; color: var(--pizarra); }
.ejemplos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ejemplos span { padding: 8px 12px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linea); font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.ia-tarea .visual { min-height: 0; padding: 20px; margin-top: auto; }
.ia-tarea .documento-visual { max-width: 300px; aspect-ratio: auto; padding: 18px; gap: 7px; font-size: 12px; }
.flujo { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: flujo; position: relative; }
.flujo-paso { position: relative; padding: 26px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); display: flex; flex-direction: column; gap: 10px; }
.flujo-paso::before { counter-increment: flujo; content: counter(flujo); width: 34px; height: 34px; border-radius: 50%; background: var(--degradado); color: #fff; font-weight: 800; font-size: 15px; display: grid; place-items: center; }
.flujo-paso::after { content: "›"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--niebla-texto); }
.flujo-paso:last-child::after { content: none; }
.flujo-paso strong { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; }
.flujo-paso span { font-size: 14.5px; line-height: 1.5; color: var(--pizarra); }
.ia-ve { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
.ia-lista { padding: 28px; border-radius: var(--radio); display: flex; flex-direction: column; gap: 14px; }
.ia-lista-no { background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.25); }
.ia-lista-si { background: var(--tinte-chispa); border: 1px solid rgba(34,211,197,.35); }
.ia-lista h3 { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ia-lista-no h3 { color: var(--no); } .ia-lista-si h3 { color: #0B7A70; }
.ia-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ia-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.ia-lista li i { font-style: normal; font-weight: 800; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; margin-top: 1px; }
.ia-lista-no li i { background: var(--no); color: #fff; } .ia-lista-si li i { background: var(--chispa); color: #0C0D1C; }
.ia-mas { border-left: 0 !important; padding-left: 0 !important; }
@media (max-width: 860px) {
  .ia-portada h1 { font-size: 36px; }
  .ia-portada .ia-grande { width: 150px; height: 150px; }
  .ia-dos, .ia-ve { grid-template-columns: minmax(0, 1fr); }
  .flujo { grid-template-columns: minmax(0, 1fr); }
  .flujo-paso::after { content: none; }
}

.cine-voz svg { width: 18px; height: 18px; }
.cine-voz[aria-pressed="true"] { background: var(--chispa); border-color: var(--chispa); color: #0C0D1C; }
.cine-voz[hidden] { display: none; }

/* Destacados grandes («Lo principal»): una diapositiva a la vez, avance automático, píldora con progreso */
.grandes { margin-top: 56px; }
.grandes-titulo { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 20px; }
.grandes-pista { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px max(24px, calc((100vw - var(--ancho)) / 2 + 24px)) 8px; scrollbar-width: none; }
.grandes-pista::-webkit-scrollbar { display: none; }
.grande { flex: 0 0 min(var(--ancho), calc(100vw - 48px)); scroll-snap-align: center; border-radius: 32px; background: var(--tinta-fondo); color: #fff; min-height: 720px; padding: 56px 48px 40px; display: flex; flex-direction: column; align-items: center; gap: 36px; overflow: hidden; position: relative; }
.grande::before { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%; background: radial-gradient(50% 60% at 50% 100%, rgba(90,71,255,.35), transparent 70%); pointer-events: none; }
.grande h3 { position: relative; font-size: 38px; line-height: 1.12; font-weight: 800; letter-spacing: -0.025em; text-align: center; max-width: 820px; }
.grande-visual { position: relative; flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center; }
.grande-visual .ventana, .grande-visual .tarjeta-visual, .grande-visual .documento-visual { width: 100%; color: var(--tinta); }
.grande-visual .chat { width: 100%; }
.grande-visual .ventana-cuerpo { padding: 24px; gap: 18px; }
.grande-visual .campo-valor, .grande-visual .fila { font-size: 16px; }
.grande-visual .tarjeta-visual-cuerpo { padding: 22px; gap: 12px; }
.grande-visual .check { font-size: 16px; padding: 13px 16px; }
.movil-grande { transform: scale(1.18); transform-origin: center; }
.grande-ia { gap: 40px; }
.grande-ia .ia-grande { width: 260px; height: 260px; flex: none; }
.grande-ia .chat { max-width: 440px; }
.grandes-control { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.pildora { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--niebla); }
.pildora button { width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; background: var(--niebla-texto); opacity: .5; cursor: pointer; position: relative; overflow: hidden; transition: width .4s var(--suave), opacity .3s; }
.pildora button[aria-current="true"] { width: 72px; opacity: 1; background: var(--linea); }
.pildora button i { position: absolute; inset: 0; width: 0; border-radius: 999px; background: var(--tinta); }
.pildora button[aria-current="true"] i { width: 100%; transition: width var(--dur, 7s) linear; }
.grandes.pausado .pildora button[aria-current="true"] i { transition: none; }
.pildora-play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--niebla); color: var(--tinta); display: grid; place-items: center; cursor: pointer; }
.pildora-play svg { width: 16px; height: 16px; fill: currentColor; }
.pildora-play .play { display: none; }
.grandes.pausado .pildora-play .pausa { display: none; }
.grandes.pausado .pildora-play .play { display: block; }
@media (max-width: 860px) {
  .grande { min-height: 0; padding: 32px 20px 28px; gap: 20px; border-radius: 22px; }
  .grande h3 { font-size: 24px; }
  .grande-visual .ventana-cuerpo { padding: 14px; gap: 10px; }
  .grande-visual .campo-valor, .grande-visual .fila, .grande-visual .check { font-size: 13px; }
  .movil-grande { transform: none; }
  .grande-ia { flex-direction: column; gap: 16px; }
  .grande-ia .ia-grande { width: 150px; height: 150px; }
  .grandes-titulo { font-size: 24px; }
}

/* Fondo con el patrón del logo de la IA: burbujas puntillistas grandes y tenues que giran y flotan despacio */
.fondo-puntos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.burbuja-fondo { position: absolute; opacity: .13; animation: burbuja-flotar 22s ease-in-out infinite alternate; }
.burbuja-fondo-1 { width: 720px; height: 720px; right: -200px; top: -180px; }
.burbuja-fondo-2 { width: 460px; height: 460px; left: -160px; top: 30%; animation-duration: 28s; animation-delay: -9s; }
.burbuja-fondo-3 { width: 300px; height: 300px; right: 18%; bottom: -120px; animation-duration: 19s; animation-delay: -4s; }
.burbuja-fondo .ia-anillo { animation-duration: calc(var(--giro, 40s) * 3); }
.burbuja-fondo .ia-nucleo { animation: none; opacity: 0; }
@keyframes burbuja-flotar { from { transform: translate(0, 0); } to { transform: translate(24px, -18px); } }
.cabecera-pagina .burbuja-fondo, .precio-pagina .burbuja-fondo, .centro .burbuja-fondo { opacity: .1; }
:root[data-tema="oscuro"] .burbuja-fondo { opacity: .2; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .burbuja-fondo { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .burbuja-fondo { animation: none; } }
@media (max-width: 760px) { .burbuja-fondo-1 { width: 420px; height: 420px; right: -160px; top: -120px; } .burbuja-fondo-2 { width: 260px; height: 260px; } .burbuja-fondo-3 { display: none; } }

/* Tarjetas interactivas: inclinación 3D y brillo que sigue al cursor (solo con ratón; web.js pone --mx/--my/--rx/--ry) */
.js .interactiva { position: relative; transform-style: preserve-3d; transition: transform .25s var(--suave), box-shadow .3s; }
.js .interactiva::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.js .interactiva.viva { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); box-shadow: var(--sombra-flota); }
.js .interactiva.viva::after { opacity: 1; }
.oscura .interactiva::after, .grande.interactiva::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(90,71,255,.25), transparent 60%); }
.tarjeta.interactiva:hover { transform: none; }
/* Maqueta viva de la portada: resultados que se eligen y explican */
.resultados-vivos .fila { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.resultados-vivos .fila:hover { transform: translateX(2px); }
.resultados-vivos .fila[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pulso); }
.explica { margin-top: 2px; min-height: 40px; padding: 10px 12px; border-radius: 10px; background: var(--niebla); font-size: 13px; line-height: 1.45; color: var(--pizarra); transition: background-color .3s; }
.explica.lista { color: var(--tinta); background: var(--tinte); }
.alumno .toggle { cursor: pointer; }

/* Barra inferior fija con «Pedir una demo» (solo móvil; web.js la muestra al pasar la portada) */
.cta-movil { display: none; }
@media (max-width: 760px) {
  .cta-movil { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 18; padding: 10px 20px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: var(--barra-fondo); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--linea); transform: translateY(110%); transition: transform .35s var(--suave); }
  .cta-movil.visible { transform: none; }
  .cta-movil .boton { width: 100%; padding: 13px 20px; font-size: 16px; }
  .barra[data-pagina="demo"] ~ .cta-movil, .barra[data-pagina="contacto"] ~ .cta-movil, .barra[data-pagina="entrar"] ~ .cta-movil, html[data-menu="abierto"] .cta-movil { display: none; }
}

/* =========================================================
   Diseño móvil (hasta 760 px). Va al final para ganar a las reglas base.
   Ritmo más corto, titulares grandes y ajustados, botones a todo el ancho,
   tarjetas que se deslizan en horizontal, película en vertical, historias
   estáticas y barra inferior con la llamada a la acción.
   ========================================================= */
@media (max-width: 760px) {
  :root { --radio: 20px; }
  .contenedor { padding-left: 20px; padding-right: 20px; }
  .boton { padding: 12px 20px; font-size: 15.5px; }
  .boton-grande { padding: 14px 22px; font-size: 16px; }

  /* Secciones: menos aire, titulares más compactos */
  .seccion, .concepto, .pelicula, .precio { padding-top: 64px; }
  .seccion-niebla, .oscura, .cierre { padding: 64px 0; margin-top: 64px; }
  .sobre, .portada-sobre { font-size: 12px; letter-spacing: .1em; }
  .titular h2, .titular h1, .cierre h2, .concepto .titular h2 { margin-top: 10px; font-size: 32px; line-height: 1.08; letter-spacing: -0.03em; }
  .titular p, .concepto .titular p { margin-top: 14px; font-size: 16.5px; line-height: 1.5; }
  .cabecera-pagina, .oscura-pagina, .precio-pagina { padding-top: 44px; }
  .oscura-pagina { margin-top: 0; }
  .cabecera-pagina { padding-bottom: 8px; }

  /* Portada: titular grande, dos botones apilados, maqueta a todo el ancho */
  .portada { padding: 44px 0 32px; }
  .portada h1 { margin-top: 10px; font-size: 40px; line-height: 1.04; letter-spacing: -0.035em; }
  .portada-texto { margin-top: 16px; font-size: 16.5px; line-height: 1.5; }
  .portada-enlaces { margin-top: 22px; flex-direction: column; gap: 10px; }
  .portada-enlaces .mas { justify-content: center; width: 100%; padding: 13px 20px; border-radius: 999px; font-size: 16px; color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); }
  .portada-enlaces .mas-principal { color: #fff; background: var(--pulso); border-color: transparent; }
  .portada-enlaces .mas::after { font-size: 18px; }
  .portada-nota { margin-top: 14px; font-size: 13px; }
  .portada-visual { margin-top: 32px; }
  .ventana { border-radius: 18px; }
  .ventana-cuerpo { padding: 14px; gap: 12px; }
  .campos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .campo-nombre { font-size: 10px; }
  .campo-valor { padding: 8px 10px; font-size: 13px; }
  .fila { padding: 10px 12px; font-size: 13.5px; gap: 8px; }
  .fila .estado { font-size: 12px; }
  .explica { font-size: 12.5px; }
  .portada-pie { margin-top: 14px; font-size: 13px; }

  /* Película: visual arriba, texto debajo, controles compactos */
  .cine { margin-top: 28px; border-radius: 20px; }
  .escenario { aspect-ratio: auto; height: 580px; }
  .escena { padding: 18px 16px 16px; align-items: start; grid-template-columns: minmax(0, 1fr); }
  .escena-dos { min-width: 0; }
  .escena-dos { display: flex; flex-direction: column; gap: 16px; height: 100%; }
  /* El visual se reduce con zoom (no con transform) para que ocupe su sitio real y no pise el texto */
  .e-visual { order: -1; flex: none; width: 100%; max-height: 310px; display: flex; align-items: center; justify-content: center; overflow: hidden; transform: none; }
  .e-visual > * { flex: none; transform: none; min-width: 0; max-width: 100%; }
  .e-visual .fila { flex-wrap: wrap; }
  .e-visual .ventana, .e-visual .tarjeta-visual, .e-visual .navegador, .e-visual .hoja, .e-visual .chat { width: 100%; max-width: none; }
  .e-visual .ventana .campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .e-visual .ventana-cuerpo { padding: 12px; gap: 10px; }
  .e-visual .tarjeta-visual { zoom: .85; }
  .e-visual .hoja { zoom: .8; }
  .e-visual .navegador, .e-visual .chat { zoom: .75; }
  .e-visual .llamada { display: none; }
  .e-visual .e1-logo { gap: 10px; }
  .e-visual .e1-logo svg { width: 88px; height: 88px; }
  .e-visual .e1-nombre { font-size: 28px; }
  .e-visual .e1-lema { font-size: 14px; }
  .e5 .movil, .e-visual .movil { transform: none; zoom: .62; }
  .e5 .enviado { top: 6px; zoom: 1.3; }
  .e6 .documento-visual { transform: none; zoom: .8; max-width: none; }
  .e-visual.e8 { gap: 10px; }
  .e-visual.e8 p { font-size: 15px; }
  .e-texto { gap: 10px; text-align: center; align-items: center; }
  .e-texto h3 { font-size: 21px; line-height: 1.15; }
  .e-texto ul { gap: 6px; align-items: center; }
  .e-texto li { padding-left: 0; font-size: 14px; line-height: 1.4; }
  .e-texto li::before { display: none; }
  .nota-suelta { display: none; }
  .cine-controles { gap: 8px; padding: 10px 12px; flex-wrap: nowrap; }
  .cine-boton { width: 36px; height: 36px; }
  .cine-puntos { gap: 4px; flex: 1 1 auto; justify-content: center; }
  .cine-puntos button { width: 14px; height: 5px; }
  .cine-pie { font-size: 12px; white-space: nowrap; }

  /* IA en la portada: ventana del asistente a todo el ancho */
  .ia-bloque { margin-top: 28px; gap: 28px; }
  .ia-visual.visual { padding: 14px; border-radius: 20px; }
  .ia-fondo { width: 300px; height: 300px; }
  .chat { border-radius: 22px; }
  .chat-cuerpo { padding: 12px 16px 6px; gap: 12px; }
  .burbuja { font-size: 14.5px; }
  .chat-nota { padding: 2px 16px 8px; }
  .chat-entrada { margin: 0 12px 12px; gap: 8px; }
  .chat-mas, .chat-mic { width: 34px; height: 34px; }
  .chat-campo { height: 36px; font-size: 14px; padding: 0 12px; }
  .ia-puntos { gap: 18px; }
  .ia-puntos strong { font-size: 17px; }
  .ia-puntos span { font-size: 15px; }

  /* Tarjetas que se deslizan en horizontal (accesos de la portada, módulos próximos) */
  .atajos, .mosaico { display: flex; gap: 12px; margin: 32px -20px 0; padding: 4px 20px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .atajos::-webkit-scrollbar, .mosaico::-webkit-scrollbar { display: none; }
  .atajo, .mosaico .tarjeta { flex: 0 0 76%; scroll-snap-align: start; padding: 22px; }
  .atajo h3 { font-size: 19px; }
  .atajo p { font-size: 14px; }
  .atajo:hover, .tarjeta:hover { transform: none; box-shadow: none; }

  /* Capítulos (Cómo funciona): texto y visual en columna */
  .seccion-capitulos { padding-top: 32px; }
  .capitulos { gap: 56px; margin-top: 32px; }
  .capitulo { gap: 20px; }
  .capitulo-texto h3, .capitulo-texto h2 { margin-top: 8px; font-size: 26px; line-height: 1.12; }
  .capitulo-texto p { margin-top: 12px; font-size: 16px; }
  .visual { padding: 16px; border-radius: 20px; }
  .visual .movil { width: 230px; }

  /* Garantías (Seguridad): lista limpia en vez de cajas */
  .garantias { margin-top: 28px; gap: 0; }
  .garantias li { padding: 18px 0; border: 0; border-top: 1px solid rgba(255,255,255,.12); border-radius: 0; background: transparent; gap: 4px; }
  .garantias li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
  .garantias strong { font-size: 17px; }
  .garantias span { font-size: 14.5px; }
  .js .garantias li.interactiva.viva { transform: none; box-shadow: none; }
  .legal-enlaces { margin-top: 28px; font-size: 14.5px; }

  /* Pasos y flujo: número a la izquierda, texto a la derecha */
  .pasos, .flujo { margin-top: 28px; gap: 10px; }
  .paso, .flujo-paso { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 18px; border-radius: 18px; }
  .paso::before, .flujo-paso::before { grid-row: 1 / span 2; width: 30px; height: 30px; font-size: 14px; }
  .paso h3, .flujo-paso strong { grid-column: 2; font-size: 17px; }
  .paso p, .flujo-paso span { grid-column: 2; font-size: 14.5px; }

  /* Precio */
  .precio { gap: 28px; padding-top: 48px; }
  .precio .titular { text-align: center; }
  .precio .titular p { margin-left: auto; margin-right: auto; }
  .plan { padding: 22px; gap: 14px; }
  .plan-cifra strong { font-size: 24px; }
  .plan ul { font-size: 14.5px; }
  .plan .boton { width: 100%; }

  /* Módulos: destacados grandes e historias sin fijar */
  .grandes { margin-top: 28px; }
  .grandes-titulo { font-size: 22px; margin-bottom: 14px; }
  .grandes-pista { gap: 12px; padding-left: 20px; padding-right: 20px; }
  .grande { flex-basis: calc(100vw - 40px); padding: 26px 16px 22px; gap: 18px; border-radius: 22px; }
  .grande h3 { font-size: 22px; }
  .grande-visual .ventana-cuerpo { padding: 12px; gap: 10px; }
  .grande-visual .campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grande-visual .tarjeta-visual-cuerpo { padding: 14px; gap: 8px; }
  .grande-visual .check { font-size: 13.5px; padding: 10px 12px; }
  .grande-ia .ia-grande { width: 120px; height: 120px; }
  .grandes-control { margin-top: 18px; }
  .pildora { padding: 12px 18px; }
  .pildora-play { width: 44px; height: 44px; }

  .historias { margin-top: 48px; }
  .historia { height: auto; }
  .historia-fija { position: static; height: auto; padding: 56px 0; display: block; overflow: visible; }
  .historia-rejilla { display: flex; flex-direction: column; gap: 24px; }
  .historia-texto { gap: 10px; text-align: left; }
  .historia-texto h2 { font-size: 30px; line-height: 1.08; }
  .revela .palabra { opacity: 1 !important; transform: none !important; }
  .pasos-h { min-height: 0; display: flex; flex-direction: column; gap: 0; margin-top: 8px; counter-reset: pasoh; }
  .paso-h { position: static; opacity: 1; transform: none; pointer-events: auto; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: start; padding: 14px 0; border-top: 1px solid var(--linea); }
  .historia-oscura .paso-h { border-top-color: rgba(255,255,255,.12); }
  .paso-h::before { counter-increment: pasoh; content: counter(pasoh); grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--tinte); color: var(--pulso-oscuro); font-size: 13px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }
  .historia-oscura .paso-h::before { background: rgba(34,211,197,.18); color: var(--chispa); }
  .paso-h > span, .paso-h > strong { grid-column: 2; }
  .paso-h strong { font-size: 16.5px; }
  .paso-h span { font-size: 14.5px; }
  .historia-puntos { display: none; }
  .historia-visual { min-height: 0; transform: none; opacity: 1; order: -1; display: block; }
  .capa { display: none; position: static; opacity: 1; transform: none; pointer-events: auto; }
  .capa > * { transform: none; }
  .capa .movil { transform: none; }
  #asignador .capa[data-capa="0"], #profesor .capa[data-capa="1"], #informes .capa[data-capa="1"], #asistente .capa[data-capa="1"] { display: grid; }
  .capa .ventana, .capa .tarjeta-visual, .capa .chat, .capa .documento-visual { max-width: none; width: 100%; }
  .capa .documento-visual { max-width: 340px; margin: 0 auto; }
  .capa-movil .movil { width: 230px; margin: 0 auto; }
  .seccion-modulos { margin-top: 0; }
  .siguiente { margin-top: 64px; }
  .siguiente .contenedor { padding: 32px 20px; }
  .siguiente-enlace { font-size: 22px; }

  /* Página de la IA */
  .ia-portada { padding: 40px 0 16px; }
  .ia-portada .ia-grande { width: 130px; height: 130px; margin-bottom: 20px; }
  .ia-portada h1 { font-size: 34px; }
  .ia-portada p { margin-top: 14px; font-size: 16.5px; }
  .ia-dos, .ia-ve { margin-top: 28px; gap: 12px; }
  .ia-tarea { padding: 20px; gap: 12px; }
  .ia-tarea h3 { font-size: 22px; }
  .ia-tarea p { font-size: 15px; }
  .ia-tarea .visual { padding: 10px; }
  .ejemplos span { font-size: 13px; padding: 7px 10px; }
  .ia-lista { padding: 20px; gap: 12px; }
  .ia-lista li { font-size: 15px; }

  /* Formularios */
  .demo-seccion { padding-top: 24px; padding-bottom: 72px; }
  .formulario { padding: 20px; gap: 14px; border-radius: 20px; }
  .campo-f input[type="text"], .campo-f input[type="email"], .campo-f input[type="tel"], .campo-f textarea { padding: 12px; }
  .formulario .boton { width: 100%; }
  .demo-puntos { gap: 16px; }
  .demo-puntos strong { font-size: 17px; }
  .demo-puntos span { font-size: 15px; }

  /* Cierre y pie */
  .cierre h2 { font-size: 32px; }
  .cierre p { font-size: 16.5px; }
  .cierre-acciones { flex-direction: column; gap: 14px; }
  .cierre-acciones .boton { width: 100%; }
  .pie .contenedor { padding: 28px 20px 32px; gap: 18px; flex-direction: column; align-items: flex-start; }
  .pie > .contenedor > span { font-size: 13px; }
  .pie nav { margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; width: 100%; font-size: 14px; }
  .pie nav a { color: var(--tinta); font-weight: 600; }
  .pie-legal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding-top: 18px; border-top: 1px solid var(--linea); font-size: 13px; }
  .pie-legal a { font-weight: 500; color: var(--pizarra); }
  .pie-legal span { grid-column: 1 / -1; margin-top: 6px; }

  /* Entrar y legal */
  .centro { padding: 40px 20px 56px; gap: 22px; }
  .centro-cabecera h1 { font-size: 28px; }
  .caja { padding: 22px; }
  .documento { padding: 40px 20px 64px; }
  .documento h1 { font-size: 30px; }
}