/* ============================================================
   Nimbo — mascota nube (assets/css/mascota.css)
   Acompaña al visitante desde una esquina fija y cambia de pose/objeto
   según la sección visible. Se apoya en las variables de style.css.
   ============================================================ */

.nimbo {
  position: fixed;
  right: 22px;
  bottom: 18px;
  width: 132px;
  z-index: 40;               /* debajo del aviso de cookies (2000) */
  pointer-events: none;      /* el contenedor no bloquea clics... */
}
.nimbo__float {
  pointer-events: auto;      /* ...solo la mascota es interactiva */
  cursor: pointer;
  will-change: transform;
  animation: nimboFloat 3.6s ease-in-out infinite;
}
.nimbo svg { width: 100%; height: auto; display: block; overflow: visible;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45)); }

.nimbo .body { fill: #eef0f4; stroke: #c9c9d0; stroke-width: 2.4; }
.nimbo .mitt { fill: #eef0f4; stroke: #c9c9d0; stroke-width: 2.2; }
.nimbo .eye { transition: transform 0.08s linear; }
.nimbo .lid {
  transform-box: fill-box; transform-origin: center top;
  transform: scaleY(0);
  animation: nimboBlink 4.8s ease-in-out infinite;
}
.nimbo .brow { transform-box: fill-box; transform-origin: center; transition: transform 0.25s ease; }

.nimbo .wink-r,
.nimbo .acc,
.nimbo .mouth,
.nimbo .hold-hands { display: none; }
.nimbo .mouth-smile { display: block; }

/* ── Poses que sostienen un objeto con ambas manos ── */
.nimbo[data-pose="gaming"] .acc-gaming,
.nimbo[data-pose="pay"] .acc-pay,
.nimbo[data-pose="ticket"] .acc-ticket,
.nimbo[data-pose="web"] .acc-web,
.nimbo[data-pose="nosotros"] .acc-nosotros { display: block; }

.nimbo[data-pose="gaming"] .hold-hands,
.nimbo[data-pose="pay"] .hold-hands,
.nimbo[data-pose="ticket"] .hold-hands,
.nimbo[data-pose="web"] .hold-hands,
.nimbo[data-pose="nosotros"] .hold-hands { display: block; }

.nimbo[data-pose="gaming"] .hand,
.nimbo[data-pose="pay"] .hand,
.nimbo[data-pose="ticket"] .hand,
.nimbo[data-pose="web"] .hand,
.nimbo[data-pose="nosotros"] .hand { opacity: 0; }

/* ── Expresiones faciales ── */
.nimbo[data-pose="hola"] .mouth-smile { display: none; }
.nimbo[data-pose="hola"] .mouth-open { display: block; }
.nimbo[data-pose="gaming"] .mouth-smile { display: none; }
.nimbo[data-pose="gaming"] .mouth-small { display: block; }
.nimbo[data-pose="gaming"] .brow-l { transform: translateY(4px) rotate(14deg); }
.nimbo[data-pose="gaming"] .brow-r { transform: translateY(4px) rotate(-14deg); }
.nimbo[data-pose="nosotros"] .eye-r { display: none; }
.nimbo[data-pose="nosotros"] .wink-r { display: block; }
.nimbo[data-pose="nosotros"] .mouth-smile { display: none; }
.nimbo[data-pose="nosotros"] .mouth-smirk { display: block; }
.nimbo[data-pose="contacto"] .brow-l,
.nimbo[data-pose="contacto"] .brow-r { transform: translateY(-2px); }

/* ── Burbuja de diálogo ── */
.nimbo__bubble {
  position: absolute;
  bottom: calc(100% - 22px);
  right: 8px;
  background: #fafafa; color: #0a0a0b;
  font-family: var(--fuente-titulos, system-ui), sans-serif;
  font-size: 12.5px; font-weight: 600; line-height: 1.2;
  padding: 7px 12px; border-radius: 12px 12px 3px 12px;
  white-space: nowrap;
  opacity: 0; transform: translateY(6px) scale(0.94);
  transform-origin: bottom right;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.nimbo.show-bubble .nimbo__bubble { opacity: 1; transform: translateY(0) scale(1); }

/* Entrada de la mascota al cargar la página */
.nimbo { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.nimbo.nimbo--in { opacity: 1; transform: translateY(0); }

/* Saltito al cambiar de pose / al hacer clic */
.nimbo__float.hop { animation: nimboHop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes nimboFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes nimboHop { 0% { transform: translateY(0); } 35% { transform: translateY(-16px); } 100% { transform: translateY(0); } }
@keyframes nimboBlink { 0%, 90%, 100% { transform: scaleY(0); } 94%, 96% { transform: scaleY(1); } }

/* ============================================================
   Chat de Nimbo (ventana que se abre al hacer clic en la mascota)
   ============================================================ */
.nimbo-chat {
  position: fixed;
  right: 22px;
  bottom: 168px;            /* justo encima de la mascota */
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 440px;
  max-height: calc(100vh - 220px);
  z-index: 45;
  display: flex; flex-direction: column;
  background: #101012;
  border: 1px solid #2a2a2f;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(16px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nimbo-chat.nimbo-chat--open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.nimbo-chat__cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #2a2a2f;
  background: rgba(255, 255, 255, 0.02);
}
.nimbo-chat__marca {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--fuente-titulos, system-ui), sans-serif;
  font-size: 0.9rem; font-weight: 600; color: var(--blanco, #fafafa);
}
.nimbo-chat__punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
.nimbo-chat__cerrar {
  background: none; border: none; cursor: pointer;
  color: var(--gris-400, #8b8b93); font-size: 1.4rem; line-height: 1;
  padding: 0 0.3rem; transition: color 0.2s;
}
.nimbo-chat__cerrar:hover { color: var(--blanco, #fafafa); }

.nimbo-chat__mensajes {
  flex: 1; overflow-y: auto;
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  font-size: 0.9rem; line-height: 1.5;
}
.nimbo-msg { max-width: 82%; padding: 0.6rem 0.85rem; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.nimbo-msg--bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  color: var(--blanco-suave, #ececef);
  border-bottom-left-radius: 4px;
}
.nimbo-msg--user {
  align-self: flex-end;
  background: var(--blanco, #fafafa);
  color: #0a0a0b;
  border-bottom-right-radius: 4px;
}
.nimbo-msg--error { align-self: center; background: rgba(248, 113, 113, 0.12); color: #f87171; font-size: 0.82rem; }
/* indicador "escribiendo…" */
.nimbo-msg--typing { display: inline-flex; gap: 4px; }
.nimbo-msg--typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--gris-400, #8b8b93); animation: nimboTyping 1s infinite ease-in-out; }
.nimbo-msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.nimbo-msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes nimboTyping { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.nimbo-chat__form {
  display: flex; gap: 0.5rem; align-items: center;
  padding: 0.7rem;
  border-top: 1px solid #2a2a2f;
}
.nimbo-chat__input {
  flex: 1; min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #2a2a2f; border-radius: 999px;
  padding: 0.6rem 0.95rem;
  color: var(--blanco, #fafafa); font-size: 0.88rem;
  outline: none; transition: border-color 0.2s;
}
.nimbo-chat__input:focus { border-color: #3a3a41; }
.nimbo-chat__input::placeholder { color: var(--gris-600, #55555c); }
.nimbo-chat__enviar {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanco, #fafafa); color: #0a0a0b;
  border: none; cursor: pointer; transition: opacity 0.2s, transform 0.2s;
}
.nimbo-chat__enviar:hover { transform: scale(1.06); }
.nimbo-chat__enviar:disabled { opacity: 0.4; cursor: default; transform: none; }
.nimbo-chat__enviar svg { width: 16px; height: 16px; }

/* ── Responsive: en pantallas chicas, más pequeña y discreta ── */
@media (max-width: 768px) {
  .nimbo { width: 92px; right: 12px; bottom: 12px; }
  .nimbo__bubble { font-size: 11px; padding: 6px 10px; }
  .nimbo-chat { right: 12px; left: 12px; width: auto; bottom: 118px; height: 60vh; }
}
@media (max-width: 420px) {
  .nimbo { width: 78px; }
  /* si el espacio es muy justo, la burbuja no se fuerza */
  .nimbo__bubble { display: none; }
}

/* ── Accesibilidad: menos movimiento ──
   Respeta prefers-reduced-motion como el resto del sitio: se mantiene un
   flote muy suave (que es lo que le da vida), pero se apagan el parpadeo,
   el saltito y el seguimiento de ojos (js/mascota.js también lo respeta). */
@media (prefers-reduced-motion: reduce) {
  /* Sin animación de entrada: Nimbo aparece visible directamente (evita
     quedar invisible si el usuario pidió menos movimiento). */
  .nimbo { opacity: 1; transform: none; transition: none; }
  .nimbo__float { animation-duration: 7s; }
  .nimbo .lid { animation: none; }
  .nimbo__float.hop { animation: none; }
}