/* Asistente visual «¿Qué se te antoja?» (prototipo, rama asistente-visual). Esfera negra con aro dorado, halo cálido y
   dos ojos. Referencias: references/asistente-ia/. Solo transform y opacidad animados (liviano en Safari). */
.lp-asis {
  --d: 54px;
  position: relative; display: inline-block; width: var(--d); height: var(--d); padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
/* Instancia flotante en la carta: abajo a la derecha, respetando las áreas seguras. Detrás de los diálogos modales
   (visor, paneles: capa superior del navegador) y de la apertura (z-index 100). */
.lp-asis--flotante {
  position: fixed; z-index: 20;
  right: max(22px, calc(env(safe-area-inset-right) + 16px));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px));
}
/* Área táctil estable que cubre el vuelo de la esfera (el botón no se mueve). */
.lp-asis::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.lp-asis:focus-visible { outline: 2px solid var(--lp-gold, #CFA550); outline-offset: 5px; }

/* Halo cálido: base (respira) y extra (toque, respuesta). Fuera de la esfera, sin recibir toques. */
.lp-asis__halo, .lp-asis__halo-extra {
  position: absolute; inset: -42%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(232, 160, 72, .5), rgba(224, 150, 60, .2) 54%, rgba(207, 140, 60, 0) 76%);
}
.lp-asis__halo { opacity: .7; animation: lp-asis-halo 4.5s ease-in-out infinite; }
.lp-asis__halo-extra {
  opacity: 0; transform: scale(.94);
  background: radial-gradient(closest-side, rgba(255, 205, 120, .55), rgba(232, 160, 72, .22) 56%, rgba(207, 140, 60, 0) 78%);
  transition: opacity .25s ease-out, transform .25s ease-out;
}
@keyframes lp-asis-halo { 0%, 100% { opacity: .62; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.05); } }

/* Vuelo juguetón (HAPPY ORBIT V6): la esfera completa —halo, campo y cuerpo— flota libre ±7,5 px en horizontal y
   ±5,5 px en vertical (a 54 px) y se inclina ±5° hacia donde va. Tres capas con ciclos distintos (5 s, 5 s desfasado,
   4,2 s): el recorrido no se repite de forma evidente. El botón no se mueve: el área táctil queda estable. */
.lp-asis__vuelo, .lp-asis__inclina, .lp-asis__flota { position: absolute; inset: 0; }
.lp-asis__vuelo { animation: lp-asis-vuelo 2.5s ease-in-out infinite alternate; }
.lp-asis__inclina { animation: lp-asis-inclina 2.5s ease-in-out -1.25s infinite alternate; }
.lp-asis__flota { animation: lp-asis-flota 2.1s ease-in-out -.7s infinite alternate; }
@keyframes lp-asis-vuelo { from { transform: translateX(calc(var(--d) * -.139)); } to { transform: translateX(calc(var(--d) * .139)); } }
@keyframes lp-asis-inclina { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes lp-asis-flota { from { transform: translateY(calc(var(--d) * .1)); } to { transform: translateY(calc(var(--d) * -.1)); } }

/* Campo de energía (ENERGY ORBIT V1): tres partículas en órbitas elípticas distintas (6, 9 y 12 s; la del medio al
   revés) con estelas cortas, y dos arcos finos que aparecen, recorren un tramo y se desvanecen. Fuera del aro. */
.lp-asis__campo { position: absolute; inset: -34%; pointer-events: none; z-index: -1; opacity: .9; transition: opacity .25s ease-out; }
.lp-asis__elipse { position: absolute; }
.lp-asis__elipse--1 { inset: 5%; transform: rotate(-24deg) scaleY(.8); }
.lp-asis__elipse--2 { inset: 13%; transform: rotate(32deg) scaleY(.86); }
.lp-asis__elipse--3 { inset: 1%; transform: rotate(8deg) scaleY(.72); }
.lp-asis__part { position: absolute; inset: 0; border-radius: 50%; }
.lp-asis__part--1 { animation: lp-asis-gira 6s linear infinite; }
.lp-asis__part--2 { animation: lp-asis-gira 9s linear infinite reverse; }
.lp-asis__part--3 { animation: lp-asis-gira 12s linear -4s infinite; }
.lp-asis__part::before {   /* estela corta sobre su propia órbita */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(255, 220, 150, 0) 0deg 322deg, rgba(255, 226, 166, .55) 359deg, rgba(255, 220, 150, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, #0000 calc(100% - 3px), #000 calc(100% - 2.4px), #000 calc(100% - .8px), #0000 100%);
  mask: radial-gradient(closest-side, #0000 calc(100% - 3px), #000 calc(100% - 2.4px), #000 calc(100% - .8px), #0000 100%);
}
.lp-asis__part--2::before { background: conic-gradient(rgba(255, 220, 150, 0) 0deg, rgba(255, 226, 166, .55) 1deg, rgba(255, 220, 150, 0) 38deg); }
.lp-asis__part::after {    /* el punto luminoso */
  content: ""; position: absolute; left: 50%; top: 1.6px; width: var(--p, 5px); height: var(--p, 5px); border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #FFF6E0, rgba(255, 214, 140, .85) 45%, rgba(240, 180, 90, 0) 100%);
}
.lp-asis__part--1 { --p: calc(var(--d) * .11); }
.lp-asis__part--2 { --p: calc(var(--d) * .075); }
.lp-asis__part--3 { --p: calc(var(--d) * .09); }
.lp-asis__arco {
  position: absolute; inset: 7%; border-radius: 50%; opacity: 0;
  background: conic-gradient(rgba(255, 220, 150, 0) 0deg, rgba(255, 226, 166, .75) 40deg, rgba(255, 220, 150, 0) 80deg, rgba(255, 220, 150, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, #0000 calc(100% - 1.6px), #000 calc(100% - 1px), #0000 100%);
  mask: radial-gradient(closest-side, #0000 calc(100% - 1.6px), #000 calc(100% - 1px), #0000 100%);
}
.lp-asis__arco--1 { animation: lp-asis-arco 7s ease-in-out infinite; }
.lp-asis__arco--2 { inset: 2%; animation: lp-asis-arco2 9.5s ease-in-out -3s infinite; }
@keyframes lp-asis-arco { 0% { opacity: 0; transform: rotate(-40deg); } 12% { opacity: .9; } 38% { opacity: 0; transform: rotate(120deg); } 100% { opacity: 0; transform: rotate(120deg); } }
@keyframes lp-asis-arco2 { 0% { opacity: 0; transform: rotate(200deg) scaleX(-1); } 14% { opacity: .8; } 42% { opacity: 0; transform: rotate(70deg) scaleX(-1); } 100% { opacity: 0; transform: rotate(70deg) scaleX(-1); } }

/* Mirada exploradora: transición suave entre posiciones (las fija asistente.js). */
.lp-asis__mirada { transition: transform .42s cubic-bezier(.4, 0, .2, 1); }

/* Cuerpo: respiración 1 → 1,025 → 1 en 4,5 s, sin desplazamiento. */
.lp-asis__cuerpo { position: absolute; inset: 0; animation: lp-asis-respira 4.5s ease-in-out infinite; }
@keyframes lp-asis-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.lp-asis svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Rostro orgánico (V1.1): capa propia para la superficie y el aro; la deforma asistente.js junto con la mirada. */
.lp-asis__rostro { position: absolute; inset: 0; transform-origin: 50% 50%; }

/* Reflejo que recorre el aro muy lentamente (casi imperceptible): capa propia que solo rota. */
.lp-asis__brillo {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: .55;
  background: conic-gradient(from 200deg, rgba(255, 244, 214, 0) 0deg, rgba(255, 244, 214, .7) 26deg, rgba(255, 244, 214, 0) 58deg,
    rgba(255, 244, 214, 0) 180deg, rgba(255, 244, 214, .35) 206deg, rgba(255, 244, 214, 0) 236deg);
  -webkit-mask: radial-gradient(closest-side, #0000 81.5%, #000 83.5%, #000 92.5%, #0000 94.5%);
  mask: radial-gradient(closest-side, #0000 81.5%, #000 83.5%, #000 92.5%, #0000 94.5%);
  animation: lp-asis-gira 22s linear infinite;
}
@keyframes lp-asis-gira { to { transform: rotate(1turn); } }
.lp-asis__brillo { opacity: .35; }

/* Órbita dorada: una luz con estela recorre el aro (una vuelta cada 7 s). La capa rota; el aro queda quieto. */
.lp-asis__orbita {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  animation: lp-asis-gira 7s linear infinite;
}
.lp-asis__orbita::before {   /* estela, solo sobre la banda del aro */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(255, 226, 166, 0) 0deg 290deg, rgba(255, 226, 166, .25) 330deg, rgba(255, 240, 205, .9) 359deg, rgba(255, 226, 166, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, #0000 82%, #000 84.5%, #000 92%, #0000 94.5%);
  mask: radial-gradient(closest-side, #0000 82%, #000 84.5%, #000 92%, #0000 94.5%);
}
.lp-asis__orbita::after {    /* punto más brillante, en la cabeza de la estela */
  content: ""; position: absolute; left: 50%; top: 5.8%; width: 13%; height: 13%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #FFF6E0, rgba(255, 220, 150, .75) 38%, rgba(240, 180, 90, 0) 100%);
}

/* Luz líquida interior: un reflejo dorado tenue que viaja bajo el vidrio oscuro (ciclo de 8 s, recorrido irregular). */
.lp-asis__liquida { transform-box: view-box; animation: lp-asis-liquida 8.2s ease-in-out infinite; }
@keyframes lp-asis-liquida {
  0%, 100% { transform: translate(-17px, 9px); opacity: .7; }
  22% { transform: translate(-4px, 17px); opacity: 1; }
  47% { transform: translate(15px, 8px); opacity: .85; }
  68% { transform: translate(10px, -8px); opacity: .55; }
  86% { transform: translate(-9px, -4px); opacity: .8; }
}
.lp-asis__mirada { transform-box: view-box; }

/* Movimiento ambiental apagado (comparación en la demo). */
.lp-asis--quieta .lp-asis__vuelo, .lp-asis--quieta .lp-asis__inclina, .lp-asis--quieta .lp-asis__flota,
.lp-asis--quieta .lp-asis__liquida { animation: none; }
.lp-asis--quieta .lp-asis__orbita, .lp-asis--quieta .lp-asis__campo { display: none; }

/* Aro encendido (toque, pensando, respuesta). */
.lp-asis__aro-luz { opacity: 0; transition: opacity .25s ease-out; }

/* Ojos y puntos: tres posiciones; en reposo el central no se ve. */
.lp-asis__ojos, .lp-asis__ojo, .lp-asis__punto { transform-box: fill-box; transform-origin: center; }
.lp-asis__ojo { transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease; }
.lp-asis__ojo--i { transform: translateX(-15px) scale(1); }
.lp-asis__ojo--c { transform: translateX(0) scale(.2); opacity: 0; }
.lp-asis__ojo--d { transform: translateX(15px) scale(1); }

/* Al tocar: aro y halo se encienden ~250 ms; los ojos crecen apenas. */
.lp-asis--activo .lp-asis__aro-luz { opacity: .85; }
.lp-asis--activo .lp-asis__campo { opacity: 1; }
.lp-asis--activo .lp-asis__halo-extra { opacity: 1; transform: scale(1.1); }
.lp-asis--activo .lp-asis__ojo--i { transform: translateX(-15px) scale(1.12); }
.lp-asis--activo .lp-asis__ojo--d { transform: translateX(15px) scale(1.12); }

/* Pensando: los dos ojos se transforman en tres puntos que pulsan en secuencia; aro con resplandor moderado. */
.lp-asis--pensando .lp-asis__aro-luz { opacity: .4; }
.lp-asis--pensando .lp-asis__campo { opacity: .5; }
.lp-asis--pensando .lp-asis__arco { visibility: hidden; }
.lp-asis--pensando .lp-asis__ojo--i { transform: translateX(-13px) scale(.62); }
.lp-asis--pensando .lp-asis__ojo--c { transform: translateX(0) scale(.62); opacity: 1; }
.lp-asis--pensando .lp-asis__ojo--d { transform: translateX(13px) scale(.62); }
.lp-asis--pensando .lp-asis__punto { animation: lp-asis-pulso 1.2s ease-in-out infinite; }
.lp-asis--pensando .lp-asis__ojo--c .lp-asis__punto { animation-delay: .2s; }
.lp-asis--pensando .lp-asis__ojo--d .lp-asis__punto { animation-delay: .4s; }
@keyframes lp-asis-pulso { 0%, 70%, 100% { opacity: .5; transform: scale(.86); } 30% { opacity: 1; transform: scale(1.12); } }

/* Respondiendo: los puntos vuelven a ser ojos (transición), el halo hace un destello breve y el aro se apaga
   gradualmente hasta el reposo. */
.lp-asis--respondiendo .lp-asis__halo-extra { animation: lp-asis-destello 1.3s ease-out both; }
.lp-asis--respondiendo .lp-asis__aro-luz { animation: lp-asis-aro-baja 1.4s ease-out both; }
@keyframes lp-asis-destello { 0% { opacity: .2; transform: scale(.96); } 28% { opacity: 1; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1); } }
@keyframes lp-asis-aro-baja { 0% { opacity: .55; } 25% { opacity: .75; } 100% { opacity: 0; } }

/* Página oculta: todo en pausa (batería). */
.lp-asis--pausa, .lp-asis--pausa * { animation-play-state: paused !important; }

/* Movimiento reducido: sin respiración, giro ni pulso; los estados cambian con fundidos breves. */
@media (prefers-reduced-motion: reduce) {
  .lp-asis__cuerpo, .lp-asis__brillo, .lp-asis__halo, .lp-asis--pensando .lp-asis__punto,
  .lp-asis__vuelo, .lp-asis__inclina, .lp-asis__flota, .lp-asis__liquida { animation: none; }
  .lp-asis__orbita, .lp-asis__campo { display: none; }
  .lp-asis__mirada { transition: none; }
  .lp-asis--respondiendo .lp-asis__halo-extra, .lp-asis--respondiendo .lp-asis__aro-luz { animation: none; }
  .lp-asis__ojo { transition: opacity .2s linear; }
}