/* =====================================================================
   Nelo — la mascota, su cara viva y el chat que le sale por la boca
   ---------------------------------------------------------------------
   El cuerpo y la cabeza son dos WebP apilados sobre el mismo lienzo
   (los genera scripts/preparar-nelo.mjs). La cabeza va en su propia capa
   para poder inclinarse siguiendo al cursor sin arrastrar el torso.
   Los ojos y la boca son vector encima: pesan nada y se animan a gusto.

   Regla del sistema de diseño: dark PLANO. Cero glow, cero blur, cero
   glass. El acento es lima sólido.
   ===================================================================== */

/* ---------- Tokens propios de Nelo ---------- */
.nelo,
.nelo-lanzador {
  --nelo-ojo: var(--lima, #d7ff3e);
  --nelo-boca: var(--lima, #d7ff3e);
  --nelo-parpadeo: 1;      /* 1 = ojo abierto · 0.06 = ojo cerrado */
  --nelo-boca-abre: 0.2;   /* 0.2 = boca en reposo (línea) · 1 = boca abierta */
  --nelo-mirada-x: 0px;    /* desplazamiento del ojo siguiendo al cursor */
  --nelo-mirada-y: 0px;
  --nelo-cabeza-x: 0px;    /* inclinación de la cabeza siguiendo al cursor */
  --nelo-cabeza-y: 0px;
  --nelo-cabeza-giro: 0deg;
}

/* ---------- La cara vectorial ---------- */
.nelo-cara {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.nelo-cara__ojo {
  fill: var(--nelo-ojo);
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--nelo-mirada-x), var(--nelo-mirada-y)) scaleY(var(--nelo-parpadeo));
  transition: transform 90ms linear;
}

.nelo-cara__boca {
  fill: var(--nelo-boca);
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(var(--nelo-boca-abre));
  transition: transform 70ms linear;
}

/* Nelo pensando: la boca late mientras espera la respuesta del agente. */
.nelo.is-pensando .nelo-cara__boca,
.nelo-lanzador.is-pensando .nelo-cara__boca {
  animation: nelo-pensar 1s ease-in-out infinite;
  transition: none;
}

@keyframes nelo-pensar {
  0%, 100% { transform: scaleY(0.2); }
  50%      { transform: scaleY(0.5); }
}

/* ---------- Nelo entero (hero) ---------- */
.nelo {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--nelo-ancho, 380px);
  margin-inline: auto;
  /* El aspecto sale del lienzo compartido de las dos imágenes: sin esto la
     página salta cuando terminan de cargar. */
  aspect-ratio: var(--nelo-aspecto, 699 / 949);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nelo__cuerpo,
.nelo__cabeza {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* La respiración: un vaivén mínimo de todo el cuerpo. */
.nelo__cuerpo {
  animation: nelo-respirar 5.5s ease-in-out infinite;
}

/* La cabeza respira igual que el cuerpo Y ADEMÁS sigue al cursor. Las dos
   cosas se suman en una sola capa contenedora para no pelear transforms. */
.nelo__cabeza-capa {
  position: absolute;
  inset: 0;
  animation: nelo-respirar 5.5s ease-in-out infinite;
  transform: translate(var(--nelo-cabeza-x), var(--nelo-cabeza-y)) rotate(var(--nelo-cabeza-giro));
  transition: transform 320ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  transform-origin: 50% 42%;
}

@keyframes nelo-respirar {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -1.1%; }
}

/* Sombra de contacto: elipse plana, sin desenfoque (regla del sistema). */
.nelo__sombra {
  position: absolute;
  left: 47%;
  bottom: 1.5%;
  width: 30%;
  height: 2.2%;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  animation: nelo-sombra 5.5s ease-in-out infinite;
}

@keyframes nelo-sombra {
  0%, 100% { scale: 1 1; opacity: 0.5; }
  50%      { scale: 0.9 1; opacity: 0.36; }
}

/* Nelo reacciona al pasar el mouse y al recibir el foco de teclado. */
.nelo:hover .nelo__cabeza-capa,
.nelo:focus-visible .nelo__cabeza-capa {
  --nelo-cabeza-giro: -2.5deg;
}

.nelo:focus-visible {
  outline: 3px solid var(--lima, #d7ff3e);
  outline-offset: 10px;
  border-radius: 8px;
}

/* ---------- El globo que le sale de la boca ---------- */
/* El globo sale HACIA LA IZQUIERDA de la boca, invadiendo el espacio libre
   entre el titular y Nelo. Si crece hacia la derecha le tapa el torso y deja
   de leerse como un robot: se lee como una tarjeta encima de un dibujo. */
.nelo__globo {
  position: absolute;
  right: calc(100% - var(--nelo-boca-x, 42%));
  top: var(--nelo-boca-y, 33%);
  z-index: 3;
  width: max-content;
  max-width: min(19rem, 58vw);
  translate: 0 -62%;
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  background: var(--lima, #d7ff3e);
  color: var(--lima-ink, #0e0e10);
  font-family: var(--body, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  /* Nace en la boca: crece desde su punta derecha, que es donde está la colita. */
  transform-origin: 100% 70%;
  scale: 0;
  opacity: 0;
  pointer-events: none;
  transition: scale 260ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 180ms linear;
}

/* La colita: un triángulo sólido que apunta a la boca. */
.nelo__globo::after {
  content: "";
  position: absolute;
  right: -0.55rem;
  top: 62%;
  width: 0;
  height: 0;
  border-block: 0.5rem solid transparent;
  border-left: 0.6rem solid var(--lima, #d7ff3e);
}

.nelo__globo.is-visible {
  scale: 1;
  opacity: 1;
}

/* En pantallas angostas Nelo está centrado y no queda hueco a su izquierda.
   El globo se va ARRIBA de él, centrado y con la colita apuntándole. No se
   superpone: la figura reserva el espacio con un padding. Si se lo dejaba
   encima, en celular caía justo sobre el botón flotante de WhatsApp. */
@media (max-width: 860px) {
  .nelo__globo {
    right: auto;
    left: 50%;
    top: 0;
    translate: -50% 0;
    max-width: min(20rem, 82vw);
    text-align: center;
    font-size: 0.95rem;
    transform-origin: 50% 100%;
  }
  .nelo__globo::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -0.55rem;
    translate: -50% 0;
    border-block: 0;
    border-inline: 0.5rem solid transparent;
    border-top: 0.6rem solid var(--lima, #d7ff3e);
  }
}

/* ---------- Lanzador de esquina: la cabeza de Nelo ----------
   Vive DENTRO de .chat-widget (que ya es position:fixed abajo-derecha), igual
   que el botón redondo al que reemplaza. El de WhatsApp queda abajo-izquierda,
   así que no se pisan. */
.nelo-lanzador {
  position: relative;
  display: block;
  width: clamp(76px, 15vw, 104px);
  aspect-ratio: var(--nelo-cabeza-aspecto, 541 / 360);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: translate 220ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), scale 220ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.nelo-lanzador__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Contorno oscuro plano para que el casco claro no se pierda sobre fondos
     claros (páginas de blog). Sin blur: son sombras duras. */
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}

.nelo-lanzador:hover { scale: 1.06; }
.nelo-lanzador:active { scale: 0.97; }

.nelo-lanzador:focus-visible {
  outline: 3px solid var(--lima, #d7ff3e);
  outline-offset: 6px;
  border-radius: 8px;
}

/* Cartelito de invitación que asoma al costado del lanzador. */
.nelo-lanzador__aviso {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  translate: 0 -50%;
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  background: var(--lima, #d7ff3e);
  color: var(--lima-ink, #0e0e10);
  font-family: var(--body, system-ui, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  scale: 0.9;
  transform-origin: 100% 50%;
  pointer-events: none;
  transition: opacity 200ms linear, scale 200ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.nelo-lanzador.is-invitando .nelo-lanzador__aviso,
.nelo-lanzador:hover .nelo-lanzador__aviso {
  opacity: 1;
  scale: 1;
}

/* Con el chat abierto, el lanzador se esconde para no tapar la ventana. */
.nelo-lanzador.is-abierto {
  translate: 0 130%;
}

/* En pantallas chicas conviven el botón de WhatsApp (izquierda) y Nelo
   (derecha): no se pisan porque están en esquinas opuestas. */

/* ---------- Respeto por quien pidió menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .nelo__cuerpo,
  .nelo__cabeza-capa,
  .nelo__sombra,
  .nelo.is-pensando .nelo-cara__boca,
  .nelo-lanzador.is-pensando .nelo-cara__boca {
    animation: none;
  }
  .nelo-cara__ojo,
  .nelo-cara__boca,
  .nelo__cabeza-capa,
  .nelo__globo,
  .nelo-lanzador,
  .nelo-lanzador__aviso {
    transition-duration: 1ms;
  }
}