/* escenas.css — v0.2 (2026-09-28) · AF-059: escenas animadas del camino de pago.
   v0.2 (#0687): la foto fija del guardián se queda en el pago; el animado va delante con margen.

   Solo se emite con el interruptor de personajes en prueba | on (partials/escenas-checkout).
   Todo cuelga de `body.escenas-vivas`, que pone escenas.js SOLO cuando la escena arranca: en
   modo «prueba» sin ?personajes=1 esa clase no aparece y el checkout queda exactamente como hoy.

   ANC-117 (tienda-cristal.css) NO se toca: los dibujos fijos del guardián, Merlín y el grupo
   siguen ahí. Mientras su escena está encendida se ocultan desde aquí. Apagado = vuelven.

   ⚠️ ALERTA-PAGOS-001: pago y espera van DETRÁS del contenido (z-index -1), como los fijos. La
   entrega vive en su propio hueco dentro de la tarjeta, DEBAJO de los datos. Nada recibe clics.
   Colores del globo: el par ya medido #111B38 / #F2F6FF (PALETA_PASALA.md §7 bis, #0657). */

/* --- los dibujos fijos se van solo mientras su escena está viva ------------------------ */
/* #0687 — `arreglando 98.txt` (añadido): la FOTO del guardián en el pago ya no se oculta. «Quiero
   que el personaje de la foto que está detrás permanezca, ya que es una foto; el que tiene
   movimiento, adelante». Por eso aquí ya no está `.escena-pago:has(.datos-pago)::before`. */
body.tienda-pasala.escenas-vivas.escena-espera:has(#cuenta-refresco)::before,
body.tienda-pasala.escenas-vivas.escena-espera:has(.pasos)::before,
body.tienda-pasala.escenas-vivas .card.esc-con-escena::after {
    display: none;
}

/* --- capas ----------------------------------------------------------------------------- */
.esc-escenario {
    pointer-events: none;
    overflow: hidden;                 /* nadie asoma: sin scroll lateral de 320 a 1400 px */
    -webkit-user-select: none;
    user-select: none;
}
.esc-escenario * { pointer-events: none; }

/* PAGO — dos franjas a lo ancho (top y height los pone escenas.js):
   · .esc-pago: el guardián, DETRÁS de las tarjetas, como el fijo. Si no hay margen a la derecha
     de la tarjeta (teléfono, tableta), queda detrás de los valores: a media opacidad, como el
     fijo (0.5), y los valores conservan su sombra de texto. El globo «¡Fuera!» no se atenúa.
   · .esc-pago-perro: el perro, ENCIMA, pero recortado al pasillo vacío entre el último dato y la
     tarjeta siguiente. Su techo es el fondo del monto: no puede pintarse sobre un número. */
.esc-pago,
.esc-pago-perro {
    position: absolute;
    left: 0;
    width: 100%;
}
.esc-pago { z-index: -1; }
/* #0687 — Con margen a la derecha (ordenador) el guardián animado va DELANTE: ahí no hay ningún
   dato del pago que tapar, y la foto fija sigue detrás. Sin margen (teléfono) se queda DETRÁS a
   media opacidad, como antes: delante taparía el monto y la referencia (⚠️ ALERTA-PAGOS-001). */
.esc-pago:not(.esc-sin-margen) { z-index: 2; }
.esc-pago-perro { z-index: 1; }
.esc-pago.esc-sin-margen .esc-guardian .esc-cuerpo { opacity: .5; }
/* Sin margen el guardián está detrás de los valores: su «¡Fuera!» no se pinta ahí (dos textos
   superpuestos confunden). Con margen, el globo sale hacia la izquierda, hacia el perro. */
.esc-pago.esc-sin-margen .esc-globo { display: none; }
.esc-guardian .esc-globo { left: auto; right: 45%; transform: translate(0, 6px) scale(.8); }
.esc-guardian .esc-globo.visible { transform: translate(0, -2px) scale(1); }

/* ESPERA — el mismo sitio y tamaño que Merlín fijo (tienda-cristal.css, ANC-117). */
.esc-espera {
    position: absolute;
    z-index: -1;
    right: 0;
    top: 13rem;
    width: 11rem;
    height: 24rem;
}

/* ENTREGA — ocupa el hueco del grupo fijo (::after de la tarjeta), en flujo. */
.esc-entrega {
    position: relative;
    display: block;
    height: 15rem;
    margin: 1.1rem -0.9rem -0.25rem;
}

/* --- personajes ------------------------------------------------------------------------ */
.esc-pj { position: absolute; top: 0; left: 0; will-change: transform; }
.esc-cuerpo {
    background-repeat: no-repeat;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55)) drop-shadow(0 14px 22px rgba(0, 0, 0, .4));
}
.esc-guardian .esc-cuerpo {
    filter: drop-shadow(0 0 14px rgba(74, 222, 128, .35)) drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
}
.esc-globo {
    position: absolute; left: 50%; bottom: 100%;
    transform: translate(-50%, 6px) scale(.8); opacity: 0;
    transition: opacity .2s, transform .2s;
    background: #111B38; color: #F2F6FF; border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px; padding: .25rem .5rem; white-space: nowrap;
    font: 700 1rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.esc-globo.visible { opacity: 1; transform: translate(-50%, -2px) scale(1); }

/* --- botón de sonido (solo existe si hay un archivo de audio) -------------------------- */
.esc-sonido {
    position: fixed;
    right: max(.75rem, env(safe-area-inset-right));
    bottom: max(.75rem, env(safe-area-inset-bottom));
    z-index: 30;
    width: 2.75rem; height: 2.75rem;  /* 44 px: objetivo táctil mínimo */
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: #111B38; color: #F2F6FF;
    font-size: 1.15rem; line-height: 1; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.esc-sonido:focus-visible { outline: 3px solid #FDE08A; outline-offset: 2px; }
/* La burbuja de opinión vive abajo a la derecha: el botón se sube encima de ella. */
body:has(.opinion-burbuja:not([hidden])) .esc-sonido { bottom: 9.5rem; }

/* --- tamaños: los mismos cortes que los fijos de ANC-117 ------------------------------- */
@media (max-width: 519px) {
    .esc-espera { width: 8.5rem; height: 18rem; top: 11rem; }
    /* En el teléfono el mago queda detrás de «Tu compra» (monto y referencia): se mueve, así
       que va a media opacidad para no competir con los números (⚠️ ALERTA-PAGOS-001). */
    .esc-espera .esc-cuerpo { opacity: .5; }
    .esc-entrega { height: 10rem; }
}
@media (min-width: 1200px) {
    .esc-espera { width: 14rem; height: 30rem; }
    .esc-entrega { height: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
    .esc-globo { transition: none; }
}
@media print {
    .esc-escenario, .esc-sonido { display: none; }
}