/* AI Popular — Historia: "un viaje del taller al cielo nocturno".
   Capítulos 1 a 8: recuerdos cálidos (papel, lámpara de escritorio). Desde el 9: cielo de la app.
   historia.js calcula --p (progreso de cada escena) y --noche (de 0 cálida a 1 nocturna). */

/* ---------- Página y atmósfera ---------- */
.historia-pagina { position: relative; padding: 120px 0 80px; --noche: 0; --warm-base: #2a1d16; }
:root[data-tema="claro"] .historia-pagina { --warm-base: #f6e9d3; }
.historia-pagina::before, .historia-pagina::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
/* Cálida: color de papel con luz de lámpara y una textura de líneas muy suave */
.historia-pagina::before {
  opacity: calc(1 - var(--noche)); background-color: var(--warm-base);
  background-image:
    radial-gradient(ellipse 60% 50% at 14% 6%, rgba(255, 190, 120, .22), transparent 70%),
    radial-gradient(ellipse 50% 45% at 90% 60%, rgba(255, 143, 177, .12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(120, 80, 50, .05) 0 1px, transparent 1px 5px);
}
/* Nocturna: el cielo de la app */
.historia-pagina::after { opacity: var(--noche); background: #070a14; }
.ahorro .historia-pagina::before { background-image: none; }

/* Desde el capítulo 9 el texto cambia a tonos claros sobre el cielo (cambia a mitad de la transición) */
.historia-pagina.es-noche {
  --texto: #eef2ff; --texto-2: #b9c2d0; --borde: rgba(255, 255, 255, .16);
  --vidrio: rgba(255, 255, 255, .06); --vidrio-fuerte: rgba(255, 255, 255, .1);
}

.historia-inicio { margin-bottom: 40px; }
.historia-inicio h1 { font-size: clamp(40px, 6.4vw, 84px); }

/* ---------- Índice de capítulos ---------- */
.historia-layout { display: grid; gap: 40px; }
.indice-titulo { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); margin: 0 0 10px; }
.indice-capitulos ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.indice-capitulos a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: 12px;
  color: var(--texto-2); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap;
  transition: color var(--dur-corta) var(--ease-suave), background var(--dur-corta) var(--ease-suave);
}
.indice-capitulos a span {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--borde); font-size: .78rem; font-weight: 700;
}
.indice-capitulos a:hover, .indice-capitulos a:focus-visible { color: var(--texto); background: var(--vidrio); }
.indice-capitulos a[aria-current="location"] { color: var(--texto); background: var(--vidrio-fuerte); }
.indice-capitulos a[aria-current="location"] span {
  background: linear-gradient(120deg, var(--cian), var(--violeta)); border-color: transparent; color: #05101a;
}
:root[data-tema="claro"] .indice-capitulos a[aria-current="location"] span { color: #ffffff; }

@media (min-width: 1000px) {
  .historia-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
  .indice-capitulos { position: sticky; top: 110px; align-self: start; }
  .indice-titulo { margin-left: 12px; }
}
@media (max-width: 999px) {
  .indice-titulo { display: none; }
  .indice-capitulos { position: sticky; top: 64px; z-index: 5; margin: 0 -16px; padding: 10px 16px; background: color-mix(in srgb, var(--fondo) 97%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width: 0; }
  .indice-capitulos ol { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .indice-capitulos ol::-webkit-scrollbar { display: none; }
  .historia-pagina { padding-top: 96px; }
  .historia-layout { gap: 16px; grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Capítulos ---------- */
.capitulos { position: relative; min-width: 0; padding-left: 40px; }
.linea-capitulos { position: absolute; left: 11px; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--borde); }
.linea-capitulos-llena {
  position: absolute; inset: 0; border-radius: 3px; transform: scaleY(0); transform-origin: 0 0;
  background: linear-gradient(180deg, var(--naranja), var(--cian), var(--violeta));
}
.capitulo { position: relative; padding: 56px 0; scroll-margin-top: 96px; }
.capitulo::before {
  content: ""; position: absolute; left: -36px; top: 64px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--fondo); border: 3px solid var(--borde); transition: background var(--dur-media) var(--ease-suave), border-color var(--dur-media) var(--ease-suave);
}
.capitulo.activo::before { background: var(--naranja); border-color: var(--naranja); }
.capitulo.noche.activo::before { background: var(--cian); border-color: var(--cian); }
.capitulo-numero {
  margin: 0 0 8px; font-family: var(--titulo); font-size: .95rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--naranja);
}
.capitulo.noche .capitulo-numero { color: var(--cian); }
.capitulo-titulo {
  margin: 0 0 24px; font-family: var(--titulo); font-size: clamp(32px, 5vw, 58px); line-height: 1.05; max-width: 20ch;
}
.capitulo-cuerpo { margin-top: 8px; }
.capitulo-texto { max-width: 66ch; min-width: 0; }
.capitulo-texto p { font-size: 1.06rem; line-height: 1.7; color: var(--texto-2); margin: 0 0 1em; }
.capitulo-texto p:last-child { margin-bottom: 0; }
.capitulo .porque { color: var(--texto); font-weight: 600; border-left: 3px solid var(--violeta); padding-left: 12px; }
.frase-capitulo { font-family: var(--titulo); font-size: clamp(22px, 3vw, 30px) !important; line-height: 1.3 !important; font-weight: 700; color: var(--texto) !important; margin-top: 1.2em !important; }

/* Capítulo 9: la línea de tiempo de 2026 */
.hitos-2026 { list-style: none; margin: 0; padding: 0; max-width: 66ch; }
.hitos-2026 li {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--borde);
}
.hitos-2026 li.hitos-2026 time { font-weight: 700; color: var(--texto); font-family: var(--titulo); }
.hitos-2026 span { color: var(--texto-2); line-height: 1.6; font-size: 1.02rem; }
.hitos-2026 em { display: block; margin-top: 6px; color: var(--texto); font-style: normal; font-weight: 600; }
@media (max-width: 560px) { .hitos-2026 li { grid-template-columns: 1fr; } }

/* Capítulo 10: lista de lo que viene */
.lo-que-viene { margin: 0 0 1em; padding-left: 1.2em; color: var(--texto-2); font-size: 1.06rem; line-height: 1.8; }
.lo-que-viene li { padding-left: 4px; }
.lo-que-viene li::marker { color: var(--cian); }

/* ---------- Escenas ---------- */
.escena {
  position: relative; margin: 8px 0 36px; aspect-ratio: 2 / 1; border-radius: 28px; overflow: hidden;
  isolation: isolate; --p: 0;
}
.escena.cal { background: #f4dcb8; }
.escena.noc { background: #070a14; }
.escena-dibujo { display: block; width: 100%; height: 100%; }
/* El ancla marca dónde se queda Teo dentro de cada escena */
.escena .ancla { position: absolute; width: 1px; height: 1px; }
.escena.e1 .ancla { left: 60%; top: 66%; }
.escena.e2 .ancla { left: 76%; top: 62%; }
.escena.e3 .ancla { left: 86%; top: 70%; }
.escena.e4 .ancla { left: 50%; top: 64%; }
.escena.e5 .ancla { left: 50%; top: 62%; }
.escena.e6 .ancla { left: 84%; top: 62%; }
.escena.e7 .ancla { left: 30%; top: 72%; }
.escena.e8 .ancla { left: 50%; top: 66%; }
.escena.e9 .ancla { left: 84%; top: 58%; }
.escena.e10 .ancla { left: 50%; top: 50%; }
.escena.e11 .ancla { left: 40%; top: 72%; }
.escena.e12 .ancla { left: 50%; top: 66%; }

/* Profundidad en 3 capas: fondo (6 px), objetos (12 px) y Teo (viaja aparte). Máximo 16 px. */
.s-capa-fondo { transform: translateX(calc((var(--p) - .5) * -6px)); }
.s-capa-objetos { transform: translateX(calc((var(--p) - .5) * -12px)); }
.ahorro .s-capa-fondo, .ahorro .s-capa-objetos { transform: none; }
/* Fuera de pantalla no se anima nada */
.escena.en-pausa * { animation-play-state: paused !important; }

/* Escena 1: engranajes que encajan y la tapa del radio que se levanta */
.s-gira-a, .s-gira-b { transform-box: fill-box; transform-origin: center; }
.s-gira-a { transform: rotate(calc(var(--p) * 720deg)); }
.s-gira-b { transform: rotate(calc(var(--p) * -720deg)); }
.s-tapa { transform-box: view-box; transform-origin: 230px 152px; transform: rotate(calc(var(--p) * -72deg)); }
.s-luz-radio { opacity: clamp(0, calc((var(--p) - .45) * 4), 1); }

/* Escena 2: barras de señal que se apagan una a una; luego "sin conexión" */
.s-b1 { --t: .2; } .s-b2 { --t: .35; } .s-b3 { --t: .5; } .s-b4 { --t: .65; }
.s-barra { opacity: clamp(.15, calc(1 - (var(--p) - var(--t)) * 12), 1); }
.s-sin { opacity: clamp(0, calc((var(--p) - .7) * 5), 1); }

/* Escena 3: errores en rojo, y al tercer intento una línea verde */
.s-e1 { opacity: clamp(0, calc((var(--p) - .15) * 8), 1); }
.s-e2 { opacity: clamp(0, calc((var(--p) - .35) * 8), 1); }
.s-ok { opacity: clamp(0, calc((var(--p) - .6) * 8), 1); }
.s-cursor { animation: h-parpadeo 1s steps(2) infinite; }

/* Escena 4: el hilo de luz se dibuja entre el celular y el computador; se prende el bombillo */
.s-hilo, .s-hilo-glow { stroke-dasharray: 320; stroke-dashoffset: calc((1 - var(--p)) * 320); }
.s-bombilla { opacity: clamp(0, calc((var(--p) - .45) * 5), 1); }
.s-luz-foco { opacity: clamp(0, calc((var(--p) - .45) * 2.5), .35); }

/* Escena 5: las gotas se acercan y la nota cambia de color (roja al revisar, verde al final) */
.s-gota-a { transform: translateX(calc(var(--p) * 180px)); }
.s-gota-c { transform: translateX(calc(var(--p) * -180px)); }
.s-nota { transform: translateX(calc(var(--p) * 360px)); }
.escena.visible .s-nota rect { animation: h-colorear 5s linear both; }

/* Escena 6: la incubadora se empaña y el medidor sube hasta Fase 1 y se detiene */
.s-medidor { transform-box: fill-box; transform-origin: bottom; transform: scaleY(min(calc(var(--p) * 2), .6)); }
.s-niebla { opacity: clamp(0, calc((var(--p) - .3) * 3), .55); }

/* Escena 7: la lupa recorre el papel y la línea falsa se tacha sola */
.s-tachado { stroke-dasharray: 220; stroke-dashoffset: calc((1 - clamp(0, (var(--p) - .25) * 3, 1)) * 220); }
.s-lupa-p { transform: translate(calc(var(--p) * 170px), calc(var(--p) * 100px)); }

/* Escena 8: todas las gotas se iluminan a la vez, y empieza a anochecer */
.s-glow { opacity: clamp(0, calc((var(--p) - .4) * 4), .5); }
.s-crepusculo { opacity: calc(var(--p) * .6); }

/* Escena 9: la línea de tiempo se dibuja y cada hito de 2026 se enciende cuando Teo pasa */
.s-linea-9 { stroke-dasharray: 700; stroke-dashoffset: calc((1 - var(--p)) * 700); }
.s-nodo { opacity: clamp(.25, calc((var(--p) - var(--t)) * 12 + .25), 1); }
.s-n1 { --t: .05; } .s-n2 { --t: .15; } .s-n3 { --t: .25; } .s-n4 { --t: .35; } .s-n5 { --t: .45; }
.s-n6 { --t: .55; } .s-n7 { --t: .65; } .s-n8 { --t: .75; } .s-n9 { --t: .85; }

/* Escena 10: amanece detrás de las montañas y las estrellas forman un camino */
.s-alba { opacity: clamp(0, calc((var(--p) - .2) * 2), .45); }
.s-sol { opacity: clamp(0, calc((var(--p) - .5) * 3), 1); }
.s-c1 { --t: .1; } .s-c2 { --t: .2; } .s-c3 { --t: .3; } .s-c4 { --t: .55; } .s-c5 { --t: .65; } .s-c6 { --t: .75; }
.s-camino { opacity: clamp(0, calc((var(--p) - var(--t)) * 8), 1); }

/* Escena 7 · Nace el nombre: el nombre se escribe letra por letra y un hilo lleva el candado al celular */
.s-tipeo { width: calc(clamp(0, (var(--p) - .1) * 2.5, 1) * 170px); }
.s-hilo-candado { stroke-dasharray: 140; stroke-dashoffset: calc((1 - clamp(0, (var(--p) - .5) * 3, 1)) * 140); }
.s-candado { opacity: clamp(0, calc((var(--p) - .75) * 6), 1); }

/* Escena 8 · La nave: las estrellas se estiran; «SIMULACIÓN» aparece y se apaga; la pantalla se levanta y deja ver la pista */
.s-sim { opacity: clamp(0, calc(1 - (var(--p) - .25) * 3), 1); }
.s-raya { opacity: clamp(0, calc(1 - (var(--p) - .25) * 3), 1); stroke-dasharray: 40 20; animation: h-raya 1.2s linear infinite; }
.s-simulacion { opacity: calc(clamp(0, (var(--p) - .3) * 7, 1) - clamp(0, (var(--p) - .5) * 8, 1)); }
.s-pantalla { opacity: clamp(0, calc((var(--p) - .5) * 6), 1); transform: translateY(calc(clamp(0, (var(--p) - .62) * 3, 1) * -200px)); }
.s-afuera { opacity: clamp(0, calc((var(--p) - .58) * 6), 1); }
@keyframes h-raya { to { stroke-dashoffset: -120; } }

@keyframes h-colorear {
  0% { fill: #fff7ea; } 30%, 55% { fill: #e05d4b; } 75%, 100% { fill: #7ef0a0; }
}
@keyframes h-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- Teo viajero: un solo Teo que se desliza de escena en escena ---------- */
/* Sin transición mientras se hace scroll (sigue la página); solo vuela al cambiar de escena */
.teo-viajero { position: fixed; left: 0; top: 0; z-index: 4; width: 120px; pointer-events: none; overflow: visible; }
.teo-viajero.volando {
  transition: transform var(--dur-larga) var(--ease-gelatina), opacity var(--dur-media) var(--ease-suave);
}
.teo-viajero .teo { --teo-w: 120px; }
.teo-viajero[hidden] { display: none; }
/* En movimiento reducido, cada escena lleva su propio Teo fijo en el ancla */
.escena .ancla .teo { position: absolute; left: -60px; top: -60px; --teo-w: 120px; }

/* ---------- Estados de Teo por escena (gestos nuevos) ---------- */
@keyframes h-girar-leve { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes h-mirar { 0%, 100% { transform: rotate(0); } 35%, 60% { transform: rotate(-12deg); } 80% { transform: rotate(0); } }
@keyframes h-ojos { 0%, 100% { transform: translate(0, 0); } 35%, 60% { transform: translate(-2px, 3px); } }
@keyframes h-aplastar {
  0%, 100% { transform: scale(1, 1); } 15% { transform: scale(1.12, .8); } 35% { transform: scale(1, 1); }
  50% { transform: scale(.96, 1.08); }
}
@keyframes h-estirar { 0%, 100% { transform: scale(.94, 1.1); } 50% { transform: scale(1.07, .93); } }
@keyframes h-sacudir { 0%, 100% { transform: rotate(0) translateX(0); } 25% { transform: rotate(-5deg) translateX(-2px); } 75% { transform: rotate(5deg) translateX(2px); } }
@keyframes h-asentir { 0%, 40%, 80%, 100% { transform: translateY(0); } 20%, 60% { transform: translateY(5px); } }
@keyframes h-correr { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes h-velocidad { from { transform: translateX(10px); } to { transform: translateX(-18px); } }

/* 1 · Desarmar: el engranaje (con dientes) gira mientras Teo se inclina sobre el trabajo */
.teo[data-estado="desarmar"] .teo-cuerpo { animation: h-girar-leve 2.4s ease-in-out infinite; }
.teo[data-estado="desarmar"] .p-engranaje { opacity: 1; animation: girar 2.4s linear infinite; }
.teo .p-engranaje path { fill: #9fe8ff; }

/* 2 · Sin señal: Teo mira el celular, inclina la cabeza y luego mira al lector */
.teo[data-estado="sin-senal"] .teo-cuerpo { animation: h-mirar 4s ease-in-out infinite; }
.teo[data-estado="sin-senal"] .teo-ojos { animation: h-ojos 4s ease-in-out infinite; }

/* 3 · Terminal: se aplasta de cansancio, respira y rebota cuando sale bien */
.teo[data-estado="terminal"] .teo-cuerpo { animation: h-aplastar 2.8s ease-in-out infinite; }

/* 4 · La pregunta: Teo se estira hacia los dos lados; se prende la bombilla */
.teo[data-estado="idea"] .teo-cuerpo { animation: h-estirar 3s ease-in-out infinite; }
.teo[data-estado="idea"] .p-bombilla { opacity: 1; }
.teo[data-estado="idea"] .p-bombilla .p-destello { animation: destello-bombilla 2.4s ease-in-out infinite; }

/* 5 · Dexter, Ester y Tom: Teo se divide en las gotas de la escena (él no se ve) */
.teo[data-estado="dividido"] .teo-cuerpo, .teo[data-estado="dividido"] .teo-ojos { opacity: 0; }

/* 6 · Incubadora: Teo sale por su cuenta y se sacude */
.teo[data-estado="sacudir"] .teo-cuerpo { animation: h-sacudir .9s ease-in-out infinite; }

/* 7 · Verificar: Teo asiente con la línea falsa ya tachada */
.teo[data-estado="asentir"] .teo-cuerpo { animation: h-asentir 1.8s ease-in-out infinite; }

/* 8 · Para todas las personas: Teo se ensancha, abierto a todas */
.teo[data-estado="abrir"] .teo-cuerpo { animation: latir 2.4s ease-in-out infinite; }

/* 9 · Presente: Teo corre por la línea de tiempo con líneas de velocidad */
.teo[data-estado="correr"] .teo-cuerpo { animation: h-correr .8s ease-in-out infinite; }
.teo[data-estado="correr"] .p-lineas { opacity: 1; }
.teo[data-estado="correr"] .p-lineas line { animation: h-velocidad .6s linear infinite; }

/* 10 · Lo que viene: Teo de espaldas, sin ojos, mirando el amanecer */
.teo[data-estado="espalda"] .teo-cuerpo { animation: latir 3s ease-in-out infinite; }
.teo[data-estado="espalda"] .teo-ojos, .teo[data-estado="espalda"] .teo-props { opacity: 0; }


/* Capítulo 7 · Nace el nombre: Teo escribe el nombre en el computador */
.teo[data-estado="teclear"] .teo-cuerpo { animation: h-girar-leve 1.2s ease-in-out infinite; }
/* Capítulo 8 · La nave: Teo lleva el casco de piloto; cuando aparece SIMULACIÓN el casco sube flotando y Teo baja los ojos */
.teo .p-casco { transition: opacity var(--dur-media) var(--ease-suave), transform var(--dur-larga) var(--ease-salida); }
.teo[data-estado="casco"] .p-casco { opacity: 1; }
.teo[data-estado="casco-fuera"] .p-casco { opacity: 0; transform: translate(0, -90px) rotate(-14deg); }
.teo[data-estado="casco"] .teo-cuerpo, .teo[data-estado="casco-fuera"] .teo-cuerpo { animation: latir 3.2s ease-in-out infinite; }
.teo[data-estado="casco-fuera"] .teo-ojos { transform: translateY(5px); }

/* ---------- Cierre ---------- */
.historia-cierre { margin-top: 40px; padding-left: 40px; }
.cierre-historia { margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; font-family: var(--titulo); }
.firma-historia { color: var(--texto-2); font-weight: 600; margin: 0 0 22px; }
.cierre-botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Celular ---------- */
@media (max-width: 560px) {
  .capitulos { padding-left: 28px; }
  .linea-capitulos { left: 7px; }
  .capitulo { padding: 44px 0; }
  .capitulo::before { left: -25px; top: 52px; }
  .historia-cierre { padding-left: 0; }
  .capitulo-texto p { font-size: 1.04rem; }
  .escena { aspect-ratio: 16 / 10; border-radius: 20px; margin-bottom: 28px; }
  .teo-viajero { width: 96px; }
  .teo-viajero .teo { --teo-w: 96px; }
}