/* AI Popular — Inicio: hero con Teo, Sin señal, promesas y teasers. */
/* ---------- 5. Hero ---------- */
.hero {
  position: relative; overflow: hidden; min-height: min(100vh, 860px);
  padding: 130px 0 170px; display: flex; align-items: center;
}
.orbes { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orbe { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; animation: flotar 16s ease-in-out infinite; }
.orbe-1 { width: 42vw; height: 42vw; max-width: 520px; max-height: 520px; left: -10%; top: -6%; background: var(--cian); }
.orbe-2 { width: 36vw; height: 36vw; max-width: 440px; max-height: 440px; right: -8%; top: 18%; background: var(--violeta); animation-delay: -6s; }
.orbe-3 { width: 24vw; height: 24vw; max-width: 280px; max-height: 280px; left: 40%; bottom: 8%; background: var(--rosa); opacity: .25; animation-delay: -10s; }
@keyframes flotar {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -30px) scale(1.06); }
}
.estrellas { position: absolute; inset: 0; background-image: radial-gradient(1.2px 1.2px at 12% 22%, var(--texto) 50%, transparent 51%), radial-gradient(1px 1px at 70% 12%, var(--texto) 50%, transparent 51%), radial-gradient(1.4px 1.4px at 86% 58%, var(--texto) 50%, transparent 51%), radial-gradient(1px 1px at 34% 70%, var(--texto) 50%, transparent 51%); opacity: .35; }

.hero-grid { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; grid-template-columns: 1.1fr .9fr; }
.hero-texto .titulo-hero { margin-bottom: 18px; }
.hero-subtitulo { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--texto-2); max-width: 36ch; margin-bottom: 28px; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.hero-version { font-size: .95rem; color: var(--texto-2); margin: 0 0 8px; }
.hero-aviso { font-size: .9rem; color: var(--texto-2); margin: 0; }

.hero-escena { position: relative; perspective: 900px; display: grid; place-items: center; min-height: 360px; }
.hero-teo-marco {
  position: relative; width: min(330px, 80vw); aspect-ratio: 1;
  display: grid; place-items: center;
  /* Paralaje: máximo 12 px, solo con puntero fino (lo mueve app.js) */
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform var(--dur-media) var(--ease-salida);
}
.hero-sombra {
  position: absolute; left: 50%; bottom: 6%; width: 52%; height: 10%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(6px);
  animation: sombra-flota 3.2s ease-in-out infinite;
}
@keyframes sombra-flota { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .9; } 50% { transform: translateX(-50%) scale(.84); opacity: .5; } }
.hero-teo-marco .teo { --teo-w: min(230px, 62vw); }
.hero-teo-marco .teo.en-vuelo { visibility: hidden; }
.montanas { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; color: var(--fondo-2); z-index: 0; pointer-events: none; }
.montanas-2 { color: var(--fondo); opacity: .9; }

/* Vuelo del hero: alas pequeñas (solo al volar) y una estela suave bajo Teo */
.teo-alas { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-media) var(--ease-suave); }
.teo-alas i {
  position: absolute; top: 34%; width: 36%; height: 24%; border-radius: 50%;
  background: linear-gradient(120deg, var(--brillo), transparent); border: 1px solid var(--borde);
}
.teo-alas i:first-child { left: -24%; transform-origin: 100% 50%; }
.teo-alas i:last-child { right: -24%; transform-origin: 0 50%; }
.teo.volando .teo-alas { opacity: 1; }
.teo.volando .teo-alas i { animation: aletear .24s ease-in-out infinite alternate; }
.teo.volando .teo-alas i:last-child { animation-delay: -.12s; }
@keyframes aletear { from { transform: scaleY(1) rotate(-12deg); } to { transform: scaleY(.45) rotate(14deg); } }
.teo::before {
  content: ""; position: absolute; left: 50%; top: 96%; width: 110%; height: 24%; z-index: -1;
  transform: translate(-50%, -50%) scaleX(0); opacity: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cian) 45%, transparent), transparent);
  transition: opacity var(--dur-media) var(--ease-suave), transform var(--dur-larga) var(--ease-suave);
}
.teo.volando::before { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }

/* ---------- Hero v4: entrada, caída de Teo, título palabra por palabra, estrellas ---------- */
.hero-texto { position: relative; z-index: 2; }
.js .titulo-hero .palabra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.js .titulo-hero .palabra > span { display: inline-block; animation: subir-palabra var(--dur-media) var(--ease-salida) both; animation-delay: calc(var(--i, 0) * 70ms + 250ms); }
@keyframes subir-palabra { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes fundir { from { opacity: 0; } to { opacity: 1; } }
/* Teo cae desde arriba, aplasta al tocar el suelo y rebota con gelatina */
.js .hero-teo-marco .teo { animation: caer-teo 1.3s var(--ease-salida) both; }
@keyframes caer-teo {
  0% { transform: translateY(-60vh) scale(.9, 1.1); }
  62% { transform: translateY(0) scale(1.14, .86); }
  74% { transform: translateY(-7%) scale(.96, 1.04); }
  86% { transform: translateY(0) scale(1.03, .97); }
  100% { transform: translateY(0) scale(1, 1); }
}
/* Los ojos siguen el puntero o la inclinación: se mueven con translate, separado del parpadeo */
.hero-teo-marco .teo-ojos i { translate: var(--ojo-x, 0px) var(--ojo-y, 0px); transition: translate var(--dur-micro) var(--ease-salida), transform var(--dur-micro) var(--ease-salida); }
/* Estrellas que titilan (solo opacidad) */
.estrellas i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--texto); animation: titilar 3.2s ease-in-out infinite; }
.estrellas i:nth-child(1) { left: 12%; top: 22%; }
.estrellas i:nth-child(2) { left: 70%; top: 12%; animation-delay: -1.1s; }
.estrellas i:nth-child(3) { left: 86%; top: 58%; animation-delay: -2.2s; width: 2px; height: 2px; }
.estrellas i:nth-child(4) { left: 34%; top: 70%; animation-delay: -.7s; }
.estrellas i:nth-child(5) { left: 56%; top: 36%; animation-delay: -1.8s; width: 2px; height: 2px; }
@keyframes titilar { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
/* Montañas en dos capas: se corren con el puntero en sentido contrario, para dar profundidad */
.montanas { translate: calc(var(--cam-x, 0px) * -.3) 0; transition: translate var(--dur-larga) var(--ease-suave); }
.montanas-2 { translate: calc(var(--cam-x, 0px) * -.6) 0; }
/* ---------- Escena "Sin señal": el scroll la recorre en etapas (app.js pone data-etapa 0 a 5) ---------- */
.sin-senal { position: relative; height: 320vh; }
.sin-senal-pegado { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; overflow: hidden; }
.sin-senal-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.celular {
  justify-self: center; width: min(290px, 72vw); aspect-ratio: 9 / 18.5; padding: 16px 14px; border-radius: 40px;
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(160deg, var(--fondo-2), var(--fondo)); border: 2px solid var(--borde);
  box-shadow: var(--sombra), inset 0 1px 0 var(--brillo);
  transition: transform var(--dur-larga) var(--ease-suave), opacity var(--dur-media) var(--ease-suave);
}
.sin-senal[data-etapa="5"] .celular { transform: scale(.8) translateY(6%); opacity: .85; }
.celular-barra { display: flex; justify-content: space-between; align-items: center; min-height: 26px; }
.senal { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.senal i { display: block; width: 4px; border-radius: 2px; background: var(--cian); transition: opacity var(--dur-corta) var(--ease-suave); }
.senal i:nth-child(1) { height: 5px; }
.senal i:nth-child(2) { height: 8px; }
.senal i:nth-child(3) { height: 12px; }
.senal i:nth-child(4) { height: 16px; }
.senal i.apagada { opacity: .18; }
.sin-internet { font-size: .8rem; font-weight: 700; color: var(--naranja); opacity: 0; transition: opacity var(--dur-media) var(--ease-suave); }
.sin-senal[data-etapa="2"] .sin-internet, .sin-senal[data-etapa="3"] .sin-internet { opacity: 1; }
.celular-chat { display: grid; gap: 10px; align-content: start; flex: 1; }
.burbuja-usuario, .burbuja-teo, .nube-red, .pregunta-red {
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-media) var(--ease-suave), transform var(--dur-media) var(--ease-salida);
}
.burbuja-usuario { justify-self: end; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--vidrio-fuerte); font-size: .88rem; }
.burbuja-teo { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; font-size: .88rem; }
.burbuja-teo p { margin: 0; }
.teo-celular .teo { --teo-w: 52px; }
.nube-red svg { width: 110px; height: auto; justify-self: center; fill: var(--vidrio-fuerte); stroke: var(--violeta); stroke-width: 2; }
.pregunta-red { display: grid; gap: 6px; font-size: .88rem; }
.pregunta-red p { margin: 0; }
.opciones-red { display: flex; gap: 6px; }
.opcion { flex: 1; text-align: center; padding: 8px; border-radius: 12px; border: 1px solid var(--borde); background: var(--vidrio); }
.nota-avisa { font-size: .8rem; font-weight: 700; color: var(--cian); opacity: 0; transition: opacity var(--dur-media) var(--ease-suave), text-shadow var(--dur-media) var(--ease-suave); }
.sin-senal[data-etapa="3"] .burbuja-usuario, .sin-senal[data-etapa="3"] .burbuja-teo,
.sin-senal[data-etapa="4"] .burbuja-usuario, .sin-senal[data-etapa="4"] .burbuja-teo,
.sin-senal[data-etapa="5"] .burbuja-usuario, .sin-senal[data-etapa="5"] .burbuja-teo,
.sin-senal[data-etapa="4"] .nube-red, .sin-senal[data-etapa="4"] .pregunta-red,
.sin-senal[data-etapa="5"] .nube-red, .sin-senal[data-etapa="5"] .pregunta-red { opacity: 1; transform: none; }
.sin-senal[data-etapa="4"] .nota-avisa { opacity: 1; text-shadow: 0 0 14px var(--cian); }
.sin-senal-texto { display: grid; }
.sin-senal-texto p {
  grid-area: 1 / 1; margin: 0; font-family: var(--titulo); font-size: clamp(32px, 4.6vw, 56px); line-height: 1.1; font-weight: 700;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-media) var(--ease-suave), transform var(--dur-media) var(--ease-salida);
}
.sin-senal-texto p.activo { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .sin-senal { height: 300vh; }
  .sin-senal-grid { grid-template-columns: 1fr; gap: 18px; }
  .celular { width: min(250px, 62vw); }
  .sin-senal-texto p { font-size: clamp(26px, 7vw, 36px); }
}
.promesas { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.promesa { padding: 24px; }
.promesa .numero { font-family: var(--titulo); font-size: 2rem; font-weight: 700; color: var(--cian); display: block; line-height: 1; margin-bottom: 8px; }
.promesa h3 { margin-bottom: 6px; }


/* Teo del hero: su nombre de transición lo hace viajar a la página nueva */
.hero-teo-marco { view-transition-name: teo-principal; }

/* Teasers: una tarjeta por página, cada una con Teo haciendo algo distinto */
.teasers { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-top: 36px; }
.teaser {
  display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; padding: 24px;
  color: var(--texto); text-decoration: none; transition: transform var(--dur-corta) var(--ease-gelatina);
}
.teaser:hover, .teaser:focus-visible { transform: translateY(-4px); }
.teaser-teo .teo { --teo-w: 96px; }
.teaser h3 { margin-bottom: 6px; font-size: 1.3rem; }
.teaser p { color: var(--texto-2); margin: 0 0 12px; }
.teaser-enlace { color: var(--cian); font-weight: 700; }
@media (max-width: 560px) { .teaser { grid-template-columns: 90px 1fr; } .teaser-teo .teo { --teo-w: 80px; } }

/* Celular: Teo y el titular caben en la primera pantalla (360 × 800) */
@media (max-width: 960px) {
  .hero { padding-top: 96px; padding-bottom: 80px; }
  .hero-grid { gap: 22px; }
  .hero-escena { min-height: 250px; }
  .hero-teo-marco { width: min(230px, 62vw); }
  .hero-teo-marco .teo { --teo-w: min(190px, 52vw); }
  .hero-subtitulo { margin-bottom: 20px; }
}

/* Celular: una sola columna (esta hoja se carga después de base.css) */
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .hero { min-height: auto; } }

/* Teasers: Teo se levanta y se inclina al pasar el puntero o el foco */
.teaser-teo .teo { transition: transform var(--dur-media) var(--ease-gelatina); }
.teaser:hover .teaser-teo .teo, .teaser:focus-visible .teaser-teo .teo { transform: translateY(-6px) rotate(-4deg); }