/* La escena de la IA (2026-09-25): la pregunta, el asistente escribiendo y la recomendación.
   Compartida: la usan la portada (tarjeta de GEO), Diseño Web y Tiendas Online. Cada página
   pone su propia pregunta y respuesta; el color sale de --c en el .esc. */
.ia-chat { inset: 12px 14%; padding: 9px 11px; display: grid; gap: 6px; align-content: start; grid-template-rows: auto auto auto; }
.ia-cab { display: flex; align-items: center; gap: 4px; padding-bottom: 5px; border-bottom: 1px solid #EEF2F6; font-size: 8px; font-weight: 800; color: #64748b; white-space: nowrap; }
.ia-cab svg { width: 12px; height: 12px; }
.ia-cab span { margin-left: 3px; }
.ia-pre { justify-self: end; max-width: 80%; padding: 5px 9px; border-radius: 10px 10px 2px 10px; background: #F2F5F7; font-size: 8.5px; font-weight: 600; line-height: 1.35; }
.ia-escribe, .ia-resp { grid-row: 3; grid-column: 1; justify-self: start; align-self: start; }
.ia-escribe { display: flex; gap: 3px; padding: 7px 9px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, #fff); animation: ia-escribe 8s infinite; }
.ia-escribe i { width: 4px; height: 4px; border-radius: 50%; background: var(--c); animation: at-punto .9s ease-in-out infinite; }
.ia-escribe i:nth-child(2) { animation-delay: .15s; }
.ia-escribe i:nth-child(3) { animation-delay: .3s; }
.ia-resp { max-width: 92%; padding: 6px 9px; border-radius: 10px 10px 10px 2px; border: 1px solid #EEF2F6; font-size: 8.5px; line-height: 1.45; animation: ia-resp 8s infinite both; }
.ia-resp b { color: var(--c); font-weight: 800; }
.ia-resp u { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 99px; background: var(--c); color: #fff; font-size: 7.5px; font-weight: 800; text-decoration: none; }
@keyframes ia-escribe { 0%, 10% { opacity: 0; } 14%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes ia-resp { 0%, 40% { opacity: 0; transform: translateY(5px); } 46%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes at-punto { 0%, 100% { transform: none; opacity: .5; } 50% { transform: translateY(-2px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ia-escribe { display: none; }
    .ia-resp { animation: none; }
    .ia-escribe i { animation: none; }
}