/* AI Popular — Teo: los 12 estados y accesorios. */
/* ---- Coreografía de los 12 estados (ciclos de 1,6 a 3 s, sin saltos) ---- */

/* Pensando (2,4 s): el cuerpo se amasa; burbujas suben y forman una nube; un engranaje gira y al final
 * se prende una bombilla con un destello. */
.teo[data-estado="pensando"] .teo-cuerpo { animation: amasar 2.4s ease-in-out infinite; }
.teo[data-estado="pensando"] .p-nube,
.teo[data-estado="pensando"] .p-engranaje,
.teo[data-estado="pensando"] .p-bombilla { opacity: 1; }
.teo[data-estado="pensando"] .p-subiendo circle { animation: subir-nube 2.4s ease-in infinite; }
.teo[data-estado="pensando"] .p-subiendo circle:nth-child(2) { animation-delay: -.8s; }
.teo[data-estado="pensando"] .p-subiendo circle:nth-child(3) { animation-delay: -1.6s; }
.teo[data-estado="pensando"] .p-engranaje { animation: girar 2.4s linear infinite; }
.teo[data-estado="pensando"] .p-bombilla .p-destello { animation: destello-bombilla 2.4s ease-in-out infinite; }

/* Triangulando (2,4 s): el cuerpo se encoge y se vuelve una pirámide que gira en 3D y flota. */
.teo[data-estado="triangulando"] .teo-cuerpo { opacity: 0; transform: scale(.6); }
.teo[data-estado="triangulando"] .teo-ojos { opacity: 0; }
.teo[data-estado="triangulando"] .p-piramide { opacity: 1; animation: girar-3d 2.4s linear infinite; }
.teo[data-estado="triangulando"] .p-ojos-piramide { opacity: 1; }

/* Buscando (2,4 s): el cuerpo se vuelve el aro de la lupa; le sale el mango; un rayo barre y prende
 * puntitos de resultados. */
.teo[data-estado="buscando"] .teo-cuerpo {
  background: transparent; box-shadow: inset 0 0 0 9px var(--teo-b); border-radius: 50%; transform: scale(.82);
}
.teo[data-estado="buscando"] .p-lupa { opacity: 1; animation: oscilar 2.4s ease-in-out infinite; }
.teo[data-estado="buscando"] .p-rayo { opacity: 1; animation: barrer 2.4s ease-in-out infinite; }
.teo[data-estado="buscando"] .p-resultados circle { opacity: 1; animation: prender 2.4s ease-in-out infinite; }
.teo[data-estado="buscando"] .p-resultados circle:nth-child(2) { animation-delay: -.8s; }
.teo[data-estado="buscando"] .p-resultados circle:nth-child(3) { animation-delay: -1.6s; }

/* Investigando (2,8 s): salta entre tres pistas; cada pista brilla al llegar; los hilos se dibujan;
 * al final aparece un "!". */
.teo[data-estado="investigando"] .teo-cuerpo { animation: saltar-pistas 2.8s ease-in-out infinite; }
.teo[data-estado="investigando"] .p-pistas circle { opacity: 1; animation: brillar-pista 2.8s ease-in-out infinite; }
.teo[data-estado="investigando"] .p-pistas circle:nth-child(2) { animation-delay: -.9s; }
.teo[data-estado="investigando"] .p-pistas circle:nth-child(3) { animation-delay: -1.8s; }
.teo[data-estado="investigando"] .p-hilos { opacity: 1; }
.teo[data-estado="investigando"] .p-hilos line { stroke-dasharray: 120; animation: dibujar-hilo 2.8s ease-in-out infinite; }
.teo[data-estado="investigando"] .p-exclamacion { opacity: 1; animation: aparecer-excl 2.8s ease-out infinite; }

/* Imaginando (2,4 s): el cuerpo se desvanece; el pincel pinta un arco de colores que se dibuja. */
.teo[data-estado="imaginando"] .teo-cuerpo { opacity: .15; transform: scale(.8); }
.teo[data-estado="imaginando"] .p-pincel { opacity: 1; animation: pincelar 2.4s ease-in-out infinite; }
.teo[data-estado="imaginando"] .p-arco { opacity: 1; }
.teo[data-estado="imaginando"] .p-arco path { stroke-dasharray: 220; animation: dibujar-arco 2.4s ease-in-out infinite; }
.teo[data-estado="imaginando"] .p-arco path:nth-child(2) { animation-delay: -.12s; }
.teo[data-estado="imaginando"] .p-arco path:nth-child(3) { animation-delay: -.24s; }
.teo[data-estado="imaginando"] .p-arco path:nth-child(4) { animation-delay: -.36s; }

/* Leyendo (2,4 s): los ojos recorren las líneas; el texto pasa de derecha a izquierda. */
.teo[data-estado="leyendo"] .teo-cuerpo { transform: rotate(-6deg); }
.teo[data-estado="leyendo"] .teo-ojos { animation: mirar-lineas 2.4s ease-in-out infinite; }
.teo[data-estado="leyendo"] .teo-ojos i { transform: scaleY(.6); }
.teo[data-estado="leyendo"] .p-lineas { opacity: 1; }
.teo[data-estado="leyendo"] .p-lineas line { animation: pasar-texto 2.4s linear infinite; }

/* Escribiendo (1,8 s): el lápiz escribe una línea que avanza; al terminar lo levanta y vuelve a empezar. */
.teo[data-estado="escribiendo"] .teo-cuerpo { animation: temblar 1.8s ease-in-out infinite; }
.teo[data-estado="escribiendo"] .p-trazo { opacity: 1; }
.teo[data-estado="escribiendo"] .p-trazo line { stroke-dasharray: 150; animation: escribir-trazo 1.8s linear infinite; }
.teo[data-estado="escribiendo"] .p-lapiz { opacity: 1; animation: escribir-lapiz 1.8s ease-in-out infinite; }

/* Resumiendo (2,4 s): varias hojas se apilan y se comprimen en una sola tarjeta pequeña. */
.teo[data-estado="resumiendo"] .teo-cuerpo { animation: comprimir 2.4s ease-in-out infinite; }
.teo[data-estado="resumiendo"] .p-hojas { opacity: 1; }
.teo[data-estado="resumiendo"] .p-hojas rect { animation: apilar 2.4s ease-in-out infinite; }
.teo[data-estado="resumiendo"] .p-hojas rect:nth-child(2) { animation-delay: -.1s; }
.teo[data-estado="resumiendo"] .p-hojas rect:nth-child(3) { animation-delay: -.2s; }

/* Recordando (2,6 s): cierra los ojos y las burbujas de la conversación vuelven hacia él. */
.teo[data-estado="recordando"] .teo-ojos i { transform: scaleY(.08); }
.teo[data-estado="recordando"] .p-burbujas { opacity: 1; }
.teo[data-estado="recordando"] .p-burbujas circle { animation: volver-burbuja 2.6s ease-in infinite; }
.teo[data-estado="recordando"] .p-burbujas circle:nth-child(2) { animation-delay: -.9s; }
.teo[data-estado="recordando"] .p-burbujas circle:nth-child(3) { animation-delay: -1.7s; }

/* Escuchando (2 s): ondas salen a los lados al ritmo de una voz; los ojos se abren un poco más. */
.teo[data-estado="escuchando"] .teo-cuerpo { animation: latir 2s ease-in-out infinite; }
.teo[data-estado="escuchando"] .teo-ojos i { transform: scaleY(1.1); }
.teo[data-estado="escuchando"] .p-ondas { opacity: 1; }
.teo[data-estado="escuchando"] .p-ondas circle { animation: onda 2s ease-out infinite; }
.teo[data-estado="escuchando"] .p-ondas circle:nth-child(2) { animation-delay: -1s; }

/* Conectando (2,2 s): puntos de luz viajan entre Teo y una nube. */
.teo[data-estado="conectando"] .p-nube-conect { opacity: 1; }
.teo[data-estado="conectando"] .p-hilos { opacity: 1; }
.teo[data-estado="conectando"] .p-hilos line { stroke-dasharray: 6 6; animation: viajar-hilo 2.2s linear infinite; }
.teo[data-estado="conectando"] .p-puntos { opacity: 1; }
.teo[data-estado="conectando"] .p-puntos circle { animation: viajar-punto 2.2s ease-in-out infinite; }
.teo[data-estado="conectando"] .p-puntos circle:nth-child(2) { animation-delay: -.7s; }
.teo[data-estado="conectando"] .p-puntos circle:nth-child(3) { animation-delay: -1.4s; }

/* Puliendo (2 s): destellos en el borde, como si se estuviera brillando a sí mismo. */
.teo[data-estado="puliendo"] .p-brillos { opacity: 1; }
.teo[data-estado="puliendo"] .p-brillos path { animation: destello 2s ease-in-out infinite; }
.teo[data-estado="puliendo"] .p-brillos path:nth-child(2) { animation-delay: -.7s; }
.teo[data-estado="puliendo"] .p-brillos path:nth-child(3) { animation-delay: -1.3s; }

/* Amasar: ondula sin cambiar el volumen */
@keyframes amasar {
  0%, 100% { transform: scale(1.04, .96); border-radius: 48% 52% 46% 54% / 55% 50% 50% 45%; }
  50% { transform: scale(.96, 1.04); border-radius: 52% 48% 55% 45% / 46% 56% 44% 54%; }
}
@keyframes girar { to { transform: rotate(360deg); } }
/* Giro de la pirámide: simula la vuelta 3D con el ancho que cambia (SVG no tiene 3D real) */
@keyframes girar-3d {
  0%, 100% { transform: scaleX(1) translateY(0); }
  25% { transform: scaleX(.25) translateY(-6px); }
  50% { transform: scaleX(-1) translateY(0); }
  75% { transform: scaleX(-.25) translateY(-6px); }
}
@keyframes oscilar { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes pincelar { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes temblar { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.2px); } }
@keyframes escribir-lapiz {
  0% { transform: translate(-40px, 0) rotate(20deg); }
  75% { transform: translate(40px, 0) rotate(20deg); }
  85% { transform: translate(40px, -10px) rotate(10deg); }
  100% { transform: translate(-40px, 0) rotate(20deg); }
}
@keyframes escribir-trazo { 0% { stroke-dashoffset: 150; } 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes subir-nube {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(-70px); opacity: 0; }
}
@keyframes destello-bombilla { 0%, 60% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes saltar-pistas {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-44px, -26px) scale(1.04, .96); }
  50% { transform: translate(44px, -26px) scale(1.04, .96); }
  75% { transform: translate(0, 30px) scale(1.04, .96); }
}
@keyframes brillar-pista { 0%, 100% { opacity: .35; } 20%, 30% { opacity: 1; } }
@keyframes dibujar-hilo { 0% { stroke-dashoffset: 120; } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes aparecer-excl { 0%, 70% { opacity: 0; } 85%, 100% { opacity: 1; } }
@keyframes barrer { 0% { transform: translateX(-50px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(50px); opacity: 0; } }
@keyframes prender { 0%, 40% { opacity: .2; } 55%, 100% { opacity: 1; } }
@keyframes dibujar-arco { 0% { stroke-dashoffset: 220; } 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes mirar-lineas { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes pasar-texto { from { transform: translateX(14px); } to { transform: translateX(-14px); } }
@keyframes comprimir { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.82) scaleX(1.06); } }
@keyframes apilar {
  0% { transform: translate(0, 0); opacity: 1; }
  50% { transform: translate(-30px, 0); opacity: 1; }
  80%, 100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes volver-burbuja { 0% { transform: translateY(40px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
@keyframes latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes onda { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes viajar-hilo { to { stroke-dashoffset: -24; } }
@keyframes viajar-punto { 0% { transform: translate(-30px, 20px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(50px, -40px); opacity: 0; } }
@keyframes destello { 0%, 100% { transform: scale(.5); opacity: .3; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes saludo { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes risa { 0%, 100% { transform: translateX(-3px) rotate(-2deg); } 50% { transform: translateX(3px) rotate(2deg); } }
@keyframes alcancia { 0%, 100% { transform: scale(1.12, .9); } 50% { transform: scale(1.06, .96); } }
@keyframes aura { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
@keyframes hilo-bajo { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* ---- Accesorios (SVG dentro de .teo-props) ---- */
.p-bombilla circle:first-child { fill: #ffe27a; }
.p-bombilla rect { fill: #cbd5e1; }
.p-destello { fill: rgba(255, 226, 122, .45); }
.p-engranaje circle { fill: none; stroke: #eef2ff; stroke-width: 6; stroke-dasharray: 6 5; }
.p-subiendo circle { fill: rgba(238, 242, 255, .85); }
.p-nube path { fill: rgba(238, 242, 255, .85); }
.p-piramide polygon { fill: #22d3ee; }
.p-piramide polygon:nth-child(2) { fill: #8b5cf6; }
.p-piramide polygon:nth-child(3) { fill: #ff8fb1; }
.p-ojos-piramide circle { fill: #1b1f3b; }
.p-lupa line { stroke: #eef2ff; stroke-width: 9; stroke-linecap: round; }
.p-rayo rect { fill: rgba(255, 255, 255, .55); }
.p-resultados circle { fill: #22d3ee; opacity: .2; }
.p-pistas circle { fill: #22d3ee; opacity: .5; }
.p-hilos line { stroke: #8b5cf6; stroke-width: 2.5; }
.p-hilos circle { fill: #22d3ee; }
.p-exclamacion text { fill: #ffe27a; font-size: 22px; font-weight: 800; text-anchor: middle; font-family: var(--titulo); }
.p-pincel path { fill: #eef2ff; }
.p-arco path { fill: none; stroke-width: 6; stroke-linecap: round; }
.p-arco path:nth-child(1) { stroke: #22d3ee; }
.p-arco path:nth-child(2) { stroke: #8b5cf6; }
.p-arco path:nth-child(3) { stroke: #ff8fb1; }
.p-arco path:nth-child(4) { stroke: #ffe27a; }
.p-lineas line { stroke: #22d3ee; stroke-width: 4; stroke-linecap: round; }
.p-lapiz rect { fill: #ffe27a; }
.p-lapiz polygon { fill: #ff8fb1; }
.p-trazo line { stroke: #22d3ee; stroke-width: 4; stroke-linecap: round; }
.p-hojas rect { fill: rgba(238, 242, 255, .85); }
.p-burbujas circle { fill: rgba(238, 242, 255, .8); }
.p-ondas circle { fill: none; stroke: #22d3ee; stroke-width: 3; }
.p-nube-conect path { fill: rgba(139, 92, 246, .75); }
.p-puntos circle { fill: #ffe27a; }
.p-brillos path { fill: #ffe27a; }
.p-mejillas ellipse { fill: rgba(255, 110, 140, .6); }
.p-ranura line { stroke: #161a2e; stroke-width: 5; stroke-linecap: round; }
.p-aura circle { fill: rgba(255, 226, 122, .35); }
/* Opacidad por defecto de los accesorios, para que no se vean en reposo */
.teo-props .p-mejillas, .teo-props .p-ranura, .teo-props .p-aura, .teo-props .p-nube-conect { opacity: 0; }

/* ---- Gestos propios de cada página (accesorios nuevos en la plantilla de Teo) ---- */
/* Packs: Teo empuja un carrito de modelos hacia la derecha */
.teo[data-estado="empujar"] .teo-cuerpo { animation: empujar 2.4s ease-in-out infinite; }
.teo[data-estado="empujar"] .p-carrito { opacity: 1; animation: empujar-carrito 2.4s ease-in-out infinite; }
.p-carrito rect { fill: rgba(238, 242, 255, .85); }
.p-carrito circle { fill: #22d3ee; }
@keyframes empujar {
  0%, 100% { transform: translateX(0) scale(1.04, .96); }
  50% { transform: translateX(14px) scale(.96, 1.04); }
}
@keyframes empujar-carrito { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }

/* Descargar: Teo sostiene una flecha que baja, como si dijera "aquí" */
.teo[data-estado="flecha"] .p-flecha { opacity: 1; animation: bajar-flecha 1.6s ease-in-out infinite; }
.p-flecha path { fill: none; stroke: #22d3ee; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bajar-flecha { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* Ayuda: Teo levanta la mano, como quien pregunta */
.teo[data-estado="mano"] .p-mano { opacity: 1; animation: levantar-mano 1.6s ease-in-out infinite; }
.p-mano path { fill: none; stroke: #eef2ff; stroke-width: 9; stroke-linecap: round; }
.p-mano circle { fill: #eef2ff; }
@keyframes levantar-mano {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-14deg); }
}

/* Tus datos: Teo baja una persiana sobre su cuerpo y la vuelve a subir */
.teo[data-estado="persiana"] .p-persiana { opacity: 1; animation: bajar-persiana 2.4s ease-in-out infinite; }
.p-persiana rect { fill: rgba(27, 31, 59, .92); }
.p-persiana line { stroke: rgba(238, 242, 255, .35); stroke-width: 3; }
@keyframes bajar-persiana {
  0%, 15% { transform: translateY(-80px); }
  55%, 85% { transform: translateY(0); }
  100% { transform: translateY(-80px); }
}