/* ════════════════ CHIMI DOS FUEGOS ════════════════
   Chimi camina por la orilla de la pantalla (capa fija que NO recibe
   toques: solo su cuerpo, cuando está en una zona libre, y su burbuja).
   La posición la calcula escena.js con transform (CSSOM, compatible
   con la CSP).                                                        */

.chimi-escenario { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; contain: strict; }
.chimi-escenario:not(.chimi-escenario--activo) .chimi { visibility: hidden; }

.chimi {
  position: absolute; left: 0; top: 0; will-change: transform;
  opacity: 0; transition: opacity 0.35s var(--curva);
}
.chimi--visible { opacity: 1; }
.chimi--fundido { opacity: 0; }
.chimi--minimizado { opacity: 0; }

/* ── Cuerpo: lienzo con el video recortado, o pose fija ── */
.chimi__cuerpo { position: relative; }
.chimi__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5)); }
.chimi__pose { position: absolute; max-width: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5)); transition: opacity 0.25s var(--curva); }
.chimi__pose--espejo { transform: scaleX(-1); }
/* Sombra de contacto: lo "asienta" sobre la página */
.chimi__sombra {
  position: absolute; left: calc(var(--chimi-ancla-x) - var(--chimi-alto) * 0.2); bottom: calc(var(--chimi-pies) - var(--chimi-alto) * 0.018);
  width: calc(var(--chimi-alto) * 0.4); height: calc(var(--chimi-alto) * 0.05); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); pointer-events: none;
}
.chimi--caminando .chimi__sombra { opacity: 0.8; }

/* Toque sobre el cuerpo (libreta → pinzas → termómetro) */
.chimi__toque {
  position: absolute; left: calc(var(--chimi-ancla-x) - var(--chimi-alto) * 0.19); bottom: var(--chimi-pies);
  width: calc(var(--chimi-alto) * 0.38); height: calc(var(--chimi-alto) * 0.96);
  padding: 0; border: 0; border-radius: 40% 40% 20% 20%; background: transparent; cursor: pointer;
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.chimi__toque:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
.chimi:not(.chimi--visible) .chimi__toque, .chimi--caminando .chimi__toque, .chimi__toque[hidden] { pointer-events: none; }

/* ── Burbuja: una hoja de su libreta (la crema vive aquí, no en toda la página) ── */
.chimi__dialogo {
  position: absolute; bottom: calc(var(--chimi-pies) + var(--chimi-alto) * 1.02); left: var(--chimi-ancla-x);
  width: min(16rem, calc(100vw - 1.5rem)); translate: var(--chimi-dx, -50%) var(--chimi-dy, 0px);
  padding: 0.6rem 0.8rem 0.4rem; border-radius: 3px 3px 12px 12px; color: var(--tinta);
  /* El texto deja pasar los toques a lo que haya debajo: solo sus botones responden */
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0.62rem, rgba(146, 44, 26, 0.28) 0.62rem, rgba(146, 44, 26, 0.28) calc(0.62rem + 1px), transparent calc(0.62rem + 1px)),
    linear-gradient(180deg, #f5eee2 0%, #ebe1cf 100%);
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.9), 0 2px 0 rgba(255, 255, 255, 0.5) inset, 0 0 0 1px rgba(122, 80, 32, 0.22);
  opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: 50% 100%;
  transition: opacity 0.3s var(--curva), transform 0.3s var(--curva);
}
/* Borde superior "arrancado" de la libreta */
.chimi__dialogo::before {
  content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 6px;
  background: radial-gradient(circle at 5px 0, transparent 3.5px, #f5eee2 4px) 0 0 / 10px 6px repeat-x;
}
.chimi__dialogo--visible { opacity: 1; transform: none; }
.chimi__quien {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem;
  font-family: var(--rol-etiquetas-familia, var(--titulo)); font-style: var(--rol-etiquetas-estilo, normal); font-variant-caps: var(--rol-etiquetas-variante, normal); font-weight: var(--rol-etiquetas-peso, var(--peso-secundaria, 700)); font-size: calc(0.6rem * var(--rol-etiquetas-escala, 1)); letter-spacing: var(--rol-etiquetas-espaciado, 0.2em); text-transform: var(--rol-etiquetas-transform, uppercase); color: var(--oro-oscuro);
}
.chimi__brasa { width: 6px; height: 6px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 8px 2px rgba(232, 115, 44, 0.55); }
.chimi__lineas { display: grid; gap: 0.2rem; }
.chimi__linea { font-family: var(--texto); font-size: clamp(0.86rem, 0.84rem + 0.15vw, 0.95rem); line-height: 1.42; min-height: 1.42em; }
.chimi__linea:not(:last-child) { color: var(--humo); font-size: 0.8rem; }
.chimi__opciones { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; }
.chimi__opcion, .chimi__control { pointer-events: auto; }
.chimi__dialogo:not(.chimi__dialogo--visible) .chimi__opcion, .chimi__dialogo:not(.chimi__dialogo--visible) .chimi__control { pointer-events: none; }
.chimi__opciones:empty { display: none; }
.chimi__opcion {
  min-height: 2.6rem; padding: 0.45rem 1.05rem; border: 1px solid var(--sangre); border-radius: 99px; background: var(--sangre); color: var(--papel);
  font-family: var(--rol-etiquetas-familia, var(--titulo)); font-style: var(--rol-etiquetas-estilo, normal); font-variant-caps: var(--rol-etiquetas-variante, normal); font-weight: var(--rol-etiquetas-peso, var(--peso-secundaria, 700)); font-size: calc(0.7rem * var(--rol-etiquetas-escala, 1)); letter-spacing: var(--rol-etiquetas-espaciado, 0.12em); text-transform: var(--rol-etiquetas-transform, uppercase);
}
.chimi__opcion:hover { background: var(--sangre-2); }
.chimi__opcion--discreta { background: transparent; color: var(--humo); border-color: transparent; text-decoration: underline; text-transform: none; letter-spacing: 0; font-family: var(--texto); font-weight: 400; font-size: 0.85rem; }
.chimi__controles { display: flex; justify-content: flex-end; gap: 0.1rem; margin-top: 0.2rem; border-top: 1px dashed rgba(122, 80, 32, 0.25); padding-top: 0.15rem; }
.chimi__control { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 1.8rem; padding: 0.15rem 0.4rem; border: 0; background: none; color: var(--humo); font-size: 0.72rem; text-decoration: underline; text-underline-offset: 2px; }
.chimi__control svg { width: 0.85rem; height: 0.85rem; }
@media (max-width: 759px) {
  .chimi__dialogo { width: min(14rem, calc(100vw - 1.5rem)); padding: 0.55rem 0.7rem 0.35rem; }
  .chimi__linea { font-size: 0.86rem; }
}

/* ── Inicio: banda del anfitrión (solo texto; Chimi llega caminando) ── */
.anfitrion { color: var(--papel); overflow: hidden; }
.anfitrion .contenedor { display: grid; gap: 1.2rem; justify-items: start; }
.anfitrion__texto { display: grid; gap: 1rem; max-width: 40rem; }

/* ── Chip en la cabecera (Chimi minimizado) ── */
.chip-chimi { padding: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(201, 153, 90, 0.5); background: var(--caoba-2); overflow: hidden; flex: none; }
.chip-chimi img { width: 100%; height: 100%; object-fit: cover; }
.chip-chimi:hover { border-color: var(--oro-claro); }

/* ── Movimiento reducido ── */
.chimi--quieto, .chimi--quieto * { transition-duration: 0.001ms !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .chimi, .chimi * { animation: none !important; transition-duration: 0.001ms !important; }
}
@media print { .chimi-escenario { display: none; } }