/* ============================================================================
   tienda-cristal.css — La piel de cristal de la propuesta 14, aplicada a la
   tienda real.  v1.1 (2026-09-14, #0642)

   # @ANCLA — ANC-117 · #0642 LIVE. Orden del socio tras verla desplegada en
   `tienda.mipasala.com`: «listo todo!! necesito que ancles la piel que hemos
   creado». Lo anclado es TODA esta hoja mas su interruptor y su enganche:
     · el archivo entero, que es una capa ADITIVA — nada de reescribirla
     · `TIENDA_PIEL_CRISTAL` presente en `.env.production.example` (#0641: si no
       esta en la plantilla, NO llega al servidor por mucho hashtable que haya)
     · el `<link>` de `layouts/tienda.blade.php` en su sitio exacto de la cascada:
       DESPUES del <style> en linea y ANTES de `@stack('estilos')`
     · la colocacion de los personajes (ANC-116 para los del catalogo)
     · las fichas transparentes de movil con la sombra de texto que las compensa
       (#0638 — quitarla deja el monto ilegible sobre el personaje, ALERTA-PAGOS-001)
   Costo siete turnos (#0634 a #0641) y cuatro rondas de correcciones del socio.
   No se reescribe al arreglar otra cosa: extension aditiva o nada.

   QUÉ ES: una capa ADITIVA. No sustituye a `tienda.css` ni reescribe ninguna
   vista Blade — se carga DESPUÉS y solo repinta. Si este archivo no se carga,
   la tienda vuelve al aspecto anterior sin tocar nada más.

   POR QUÉ ASÍ: `catalogo/index.blade.php` es `@ANCLA #0591` («la tarjeta que
   vende»). Lo que ese ancla protege es el COMPORTAMIENTO — la tarjeta entera
   lleva a comprar (#0477 / ANC-090), la ficha agotada sale sin precio (#0502 /
   #0523) y las tres promesas viven en la tarjeta (#0584). Nada de eso es CSS,
   así que la piel puede cambiar por completo sin rozar el ancla.

   INTERRUPTOR: `config('tienda.piel_cristal')` → env `TIENDA_PIEL_CRISTAL`.
   Apagado por defecto. El <link> se emite en `layouts/tienda.blade.php`.

   ORDEN EN LA CASCADA: va después del <style> en línea del layout (que define
   --bg, --card, .btn…) y antes de `@stack('estilos')`, para que una vista
   concreta pueda seguir teniendo la última palabra.
   ========================================================================= */

body.tienda-pasala {
    /* Paleta del cristal. Nombres con prefijo cr- para no pisar los tokens que
       ya usa tienda.css (--bg, --card, --accent…), que siguen vivos. */
    --cr-ink: #F2F6FF;
    --cr-mut: #9BAECE;
    --cr-tenue: #6E80A3;
    --cr-filo: rgba(255, 255, 255, 0.24);
    --cr-filo2: rgba(255, 255, 255, 0.10);
    --cr-oro1: #FDE08A;
    --cr-oro2: #B45309;
    --cr-nar: #F97316;
    --cr-ok: #4ADE80;
    --cr-warn: #FBBF24;
    --cr-vidrio: rgba(255, 255, 255, 0.045);
    --cr-vidrio2: rgba(18, 29, 54, 0.46);

    /* Color de neón por defecto; cada tarjeta lo reescribe por servicio. */
    --neon: #7C5CFF;
}

/* --- El fondo: las mismas tres luces de la propuesta ---------------------- */
body.tienda-pasala {
    background:
        radial-gradient(115% 62% at 50% -8%, rgba(124, 58, 237, 0.42), transparent 62%),
        radial-gradient(80% 52% at 112% 38%, rgba(34, 211, 238, 0.16), transparent 62%),
        radial-gradient(70% 44% at -12% 76%, rgba(168, 85, 247, 0.20), transparent 64%),
        linear-gradient(180deg, #0B1430 0%, #070C1C 58%, #05080F 100%);
    background-attachment: fixed;
    color: var(--cr-ink);
}

/* --- Cabecera y pie: cristal esmerilado ---------------------------------- */
body.tienda-pasala .top {
    background: rgba(6, 11, 24, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

body.tienda-pasala .confianza {
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--cr-filo2);
    color: var(--cr-mut);
}

/* --- Titulares ----------------------------------------------------------- */
body.tienda-pasala .catalogo-hero h1.page,
body.tienda-pasala .tienda-seccion-titulo,
body.tienda-pasala .catalogo-seccion-titulo {
    color: var(--cr-ink);
    letter-spacing: -0.02em;
}

body.tienda-pasala .catalogo-hero .sub,
body.tienda-pasala .card-serv .serv-desc,
body.tienda-pasala .card-serv .serv-promesas {
    color: var(--cr-mut);
}

body.tienda-pasala .catalogo-seccion-titulo {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--cr-tenue);
}

/* --- Los tres pasos de la marca: fichas de cristal ------------------------ */
body.tienda-pasala .pasos-marca li {
    background: var(--cr-vidrio);
    border: 1px solid var(--cr-filo2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ==========================================================================
   LA TARJETA QUE VENDE
   Cristal + filo de neón por servicio. El octágono de la propuesta se deja
   para los paneles: en una rejilla de tarjetas comería las esquinas del
   contenido, y aquí manda que el precio y el botón se lean.
   ========================================================================== */

body.tienda-pasala .catalogo-grid {
    position: relative; /* ancla de los dos personajes (ver más abajo) */
}

body.tienda-pasala .card-serv {
    background: var(--cr-vidrio);
    border: 1px solid color-mix(in srgb, var(--neon) 55%, transparent);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow:
        0 0 18px color-mix(in srgb, var(--neon) 22%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    /* Por encima de los personajes: el cristal los difumina y el texto queda
       legible. Es lo que hace que la figura esté DENTRO y no ENCIMA. */
    z-index: 1;
}

body.tienda-pasala .card-serv:hover {
    transform: translateY(-4px);
    background: var(--cr-vidrio);
    border-color: color-mix(in srgb, var(--neon) 85%, transparent);
    box-shadow:
        0 0 28px color-mix(in srgb, var(--neon) 38%, transparent),
        0 14px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.tienda-pasala .card-serv:focus-visible,
body.tienda-pasala .card-serv .serv-enlace:focus-visible {
    outline: 3px solid var(--cr-warn);
    outline-offset: 3px;
}

/* El logo oficial, plano, dentro de un marco de cristal.
   Decisión del #0632: el marco es CSS y el logo va tal cual lo entrega la
   plataforma — redibujarlo en vidrio es alterar una marca registrada. */
body.tienda-pasala .card-serv .serv-logo-wrap {
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.05));
    border: 1px solid var(--cr-filo);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    padding: 8px;
}

body.tienda-pasala .card-serv .serv-logo {
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}

body.tienda-pasala .card-serv .serv-ini {
    border-radius: 16px;
    background: var(--cr-vidrio);
    border: 1px solid var(--cr-filo);
    color: var(--cr-warn);
}

body.tienda-pasala .card-serv .serv-nombre {
    color: var(--cr-ink);
    letter-spacing: -0.01em;
}

/* El precio: es lo que se lee. Blanco puro y peso máximo. */
body.tienda-pasala .card-serv .precio {
    color: var(--cr-ink);
    font-weight: 900;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

body.tienda-pasala .card-serv .precio-nota,
body.tienda-pasala .card-serv .precio-mensual {
    color: var(--cr-mut);
}

body.tienda-pasala .card-serv .serv-promesas li::before {
    color: var(--cr-ok);
}

body.tienda-pasala .card-serv .serv-promesas .serv-pocos,
body.tienda-pasala .card-serv .aviso-dias {
    color: var(--cr-warn);
}

/* La chapa de «Más elegido»: dorado degradado, como el CONTINUAR de la 14. */
body.tienda-pasala .card-serv .serv-destacado {
    background: linear-gradient(180deg, var(--cr-oro1) 0%, #F59E0B 46%, var(--cr-oro2) 100%);
    color: #2A1904;
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.45);
}

/* La ficha en espera: apagada, sin neón, como en el maquetado. */
body.tienda-pasala .card-serv--espera {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    opacity: 0.72;
}

body.tienda-pasala .card-serv--espera:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

body.tienda-pasala .card-serv--espera .serv-destacado--espera {
    background: rgba(255, 255, 255, 0.14);
    color: var(--cr-mut);
    box-shadow: none;
}

body.tienda-pasala .precio-espera {
    color: var(--cr-tenue);
}

/* --- El neón, servicio por servicio --------------------------------------
   Lo alimenta el atributo `data-serv` que la tarjeta escribe con su slug.
   Un servicio nuevo sin línea aquí no se rompe: hereda el violeta por
   defecto de `--neon`. */
body.tienda-pasala .card-serv[data-serv="netflix"]        { --neon: #E50914; }
body.tienda-pasala .card-serv[data-serv="amazon-prime"]   { --neon: #38BDF8; }
body.tienda-pasala .card-serv[data-serv="prime-video"]    { --neon: #38BDF8; }
body.tienda-pasala .card-serv[data-serv="max"]            { --neon: #A855F7; }
body.tienda-pasala .card-serv[data-serv="max-platino"]    { --neon: #A855F7; }
body.tienda-pasala .card-serv[data-serv="hbo-max"]        { --neon: #A855F7; }
body.tienda-pasala .card-serv[data-serv="paramount"]      { --neon: #C9D2DC; }
body.tienda-pasala .card-serv[data-serv="paramount-plus"] { --neon: #C9D2DC; }
body.tienda-pasala .card-serv[data-serv="flujo-tv"]       { --neon: #F97316; }
body.tienda-pasala .card-serv[data-serv="crunchyroll"]    { --neon: #F47521; }
body.tienda-pasala .card-serv[data-serv="disney"]         { --neon: #4A7BF7; }
body.tienda-pasala .card-serv[data-serv="disney-plus"]    { --neon: #4A7BF7; }
body.tienda-pasala .card-serv[data-serv="spotify"]        { --neon: #1DB954; }
body.tienda-pasala .card-serv[data-serv="deezer"]         { --neon: #A238FF; }
body.tienda-pasala .card-serv[data-serv="youtube"]        { --neon: #FF0033; }
body.tienda-pasala .card-serv[data-serv="vix"]            { --neon: #FF5C00; }

/* ==========================================================================
   BOTONES
   El COMPRAR de la 14 es naranja degradado con texto blanco, no el ámbar
   plano con texto oscuro de antes.
   ========================================================================== */

body.tienda-pasala .btn {
    background: linear-gradient(180deg, #FB923C, #EA580C);
    color: #FFFFFF;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow:
        0 8px 20px rgba(234, 88, 12, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.tienda-pasala .btn:hover {
    box-shadow:
        0 12px 26px rgba(234, 88, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body.tienda-pasala .btn.ghost,
body.tienda-pasala .btn-sec {
    background: var(--cr-vidrio);
    color: var(--cr-ink);
    border: 1px solid var(--cr-filo);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.tienda-pasala .btn.ghost:hover,
body.tienda-pasala .btn-sec:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--cr-filo);
}

body.tienda-pasala .btn:focus-visible {
    outline: 3px solid var(--cr-warn);
    outline-offset: 3px;
}

/* ==========================================================================
   PANELES DE CRISTAL — pagar, esperando, entregada, opiniones, FAQ…
   Todo lo que antes era una caja sólida pasa a vidrio esmerilado.
   ========================================================================== */

body.tienda-pasala .pago-metodo-card,
body.tienda-pasala .checkout-pasos,
body.tienda-pasala .modal-compra-panel,
body.tienda-pasala .tienda-seccion > .panel,
body.tienda-pasala .panel {
    background: var(--cr-vidrio2);
    border: 1px solid var(--cr-filo);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.tienda-pasala .pago-metodo-card.activo {
    border-color: color-mix(in srgb, var(--cr-ok) 55%, transparent);
    box-shadow:
        0 0 20px color-mix(in srgb, var(--cr-ok) 20%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* ==========================================================================
   LOS DOS PERSONAJES DEL CATÁLOGO

   # @ANCLA — ANC-116 · #0638 LIVE. Orden literal del socio en `Ajustes.txt`: «ninja y robot
   está en lo lugares adecuado (ancla esto)». Lo que queda anclado es la COLOCACIÓN
   ya verificada por él en pantalla, y son cinco números, no un gusto:
     · la diagonal    — ninja arriba-izquierda, robot abajo-derecha
     · `z-index: 2`   — los dos POR DELANTE de las fichas (#0636)
     · `left/right: -1rem` — el filo exacto que NO mete scroll horizontal
     · `top: 10%` / `bottom: 8%` — la separación que deja los 6 precios legibles
     · el `top: 482px` del robot en el tramo ancho (#0635: a 424 enterraba un precio)
   No se reescribe este bloque al arreglar otra pantalla. Si hay que mover algo
   aquí, es con orden expresa del socio y volviendo a medir el desborde a los
   trece anchos del #0635.

   Van como pseudo-elementos de la rejilla: ni una etiqueta nueva en el Blade.
   La ninja arriba a la izquierda y el robot abajo a la derecha — la diagonal
   que pidió el socio. Los dos POR DELANTE del fondo y POR DETRÁS del texto
   de las fichas (la tarjeta lleva z-index:1), así que nunca tapan un precio
   de forma ilegible.
   ========================================================================== */

body.tienda-pasala .catalogo-grid::before,
body.tienda-pasala .catalogo-grid::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    /* DELANTE de las fichas (la tarjeta lleva z-index:1). Orden expresa del socio
       en el #0636: los quiere al frente, no difuminados por detras del cristal.
       Antes esto era 0 y solo se ponian delante por debajo de 520 px; por eso en
       su pantalla de escritorio salian detras. */
    z-index: 2;
    /* Sombra de contacto corta + ambiental larga: es lo que los apoya en la
       escena en vez de dejarlos flotando recortados. */
    filter:
        drop-shadow(0 5px 7px rgba(0, 0, 0, 0.6))
        drop-shadow(0 22px 38px rgba(0, 0, 0, 0.55));
    opacity: 0.97;
}

/* OJO CON EL DESBORDE HORIZONTAL — medido, no supuesto.
   La rejilla vive dentro de `.wrap`, que solo tiene `padding: 0 1rem`. Cualquier
   desplazamiento mayor que ese 1rem se sale de la pantalla y le añade scroll
   horizontal a TODA la tienda (medido: 489 px de contenido en 477 de viewport).
   Por eso la base es exactamente -1rem: el personaje llega justo al filo y ni un
   píxel más. Solo cuando la ventana es más ancha que las 60rem de `.wrap` hay
   margen de sobra, y ahí sí se les deja salir (los dos tramos de abajo). */

/* La ninja — arriba a la izquierda */
body.tienda-pasala .catalogo-grid::before {
    background-image: url("../img/personajes/ninja.webp");
    background-position: left bottom;
    left: -1rem;
    top: 10%;
    width: 8.5rem;
    height: 17rem;
}

/* El robot — abajo a la derecha, en diagonal con la ninja */
body.tienda-pasala .catalogo-grid::after {
    background-image: url("../img/personajes/robot.webp");
    background-position: right bottom;
    right: -1rem;
    bottom: 8%;
    width: 9.5rem;
    height: 15rem;
}

/* Teléfono estrecho: OJO, aquí la rejilla real es de UNA columna —no de dos
   como el maquetado—, así que las fichas ocupan el ancho entero y no queda
   margen lateral donde poner a nadie. Por eso en este tramo los personajes
   pasan DELANTE (z-index 2), pegados al filo de la pantalla: es la misma
   solución de la propuesta, donde la ninja arranca en left:-2px sobre un
   teléfono de 312 px. Van a los lados, y el precio va centrado, así que lo
   que cruzan es el margen de la ficha, nunca la cifra. Aquí solo cambia el
   tamaño: ir delante ya es lo normal en todos los anchos. */
@media (max-width: 519px) {
    body.tienda-pasala .catalogo-grid::before {
        top: 6%;
        width: 8rem;
        height: 16rem;
    }
    body.tienda-pasala .catalogo-grid::after {
        bottom: 6%;
        width: 8.5rem;
        height: 13.5rem;
    }
}

/* A partir de aquí la ventana ya es más ancha que las 60rem de `.wrap`, así que
   existe margen real fuera de la rejilla y los personajes pueden salirse sin
   añadir scroll. El cálculo del hueco libre es (ancho - 60rem) / 2 + 1rem:
   a 1100 px son 86 px, así que -4rem (64 px) entra holgado. */
@media (min-width: 1100px) {
    body.tienda-pasala .catalogo-grid::before { left: -4rem; width: 10rem; height: 20rem; }
    body.tienda-pasala .catalogo-grid::after  { right: -4rem; width: 11rem; height: 17.5rem; }
}

/* A 1200 px el hueco libre son 136 px: -7rem (112 px) entra, y asi en un portatil
   corriente el robot se aparta del texto de la ficha en espera. */
@media (min-width: 1200px) {
    body.tienda-pasala .catalogo-grid::before { left: -7rem; width: 11rem; height: 22rem; }
    body.tienda-pasala .catalogo-grid::after  { right: -7rem; width: 12rem; height: 19rem; }
}

/* Quien pide menos movimiento no necesita tampoco dos figuras encima. */
@media (prefers-reduced-motion: reduce) {
    body.tienda-pasala .card-serv,
    body.tienda-pasala .btn {
        transition: none;
    }
}

/* Impresión: fuera cristal y fuera personajes. */
@media print {
    body.tienda-pasala .catalogo-grid::before,
    body.tienda-pasala .catalogo-grid::after {
        display: none;
    }
}

/* ==========================================================================
   LOS DEMÁS PERSONAJES — pagar, esperando y entregada
   #0636. El socio los echó en falta: solo salían la ninja y el robot.

   Ni una etiqueta nueva en el Blade: cada pantalla se reconoce por algo que
   SOLO existe en ella, con `:has()`.
     · pagar     → `.datos-pago`     (el bloque con teléfono, cédula y monto)
     · esperando → `#cuenta-refresco` (el contador que recarga la página sola)
     · entregada → `.card.acceso`     (la tarjeta con las credenciales)

   #0637. Los anclajes de arriba solo existen en `checkout/orden.blade.php`
   —la pantalla del cliente CON cuenta—. El que compra sin registrarse acaba
   en OTRA vista, `checkout/gracias.blade.php`, que no tiene ninguno de esos
   tres: por eso al socio le faltaban el mago y el grupo justo en el camino
   que recorre su cliente real. Se añaden los anclajes de esa vista, también
   únicos y también sin tocar el Blade:
     · esperando → `.pasos`      (la lista «no vuelvas a comprar», #0593)
     · entregada → `.card.exito` (la tarjeta verde del acceso ya salido)

   Estos tres van DETRÁS del contenido (`z-index:-1`), al revés que los del
   catálogo. No es incoherencia: en el catálogo lo que hay detrás son fichas
   de cristal y el personaje se luce; aquí detrás hay TEXTO QUE SE LEE —el
   monto, la referencia, la contraseña— y ahí no se juega. Con z-index
   negativo se pintan por encima del fondo y por debajo de todo lo demás.
   ========================================================================== */

/* Las tarjetas del checkout también pasan a cristal. Hace falta para que el
   personaje de detrás se transparente: las vistas de checkout empujan su
   propio `.card` opaco por `@push('estilos')`, que va después de esta hoja,
   así que se le gana por especificidad (body.tienda-pasala .card), no por
   orden. */
body.tienda-pasala .card {
    background: var(--cr-vidrio2);
    border: 1px solid var(--cr-filo);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.tienda-pasala .datos-pago,
body.tienda-pasala .monto-grande,
body.tienda-pasala .select-banco {
    position: relative;
    z-index: 1;
}

/* Base común de los tres. `position:absolute` sin ancestro posicionado se
   resuelve contra el bloque inicial, así que `right:0` es el filo derecho de
   la página: nunca desborda a lo ancho. */
body.tienda-pasala::before,
body.tienda-pasala::after {
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
}

/* --- 3 · PAGAR — el guardián verde ---------------------------------------
   Al 50 %, detrás del panel del monto, como en la propuesta aprobada. */
body.tienda-pasala:has(.datos-pago)::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    top: 9rem;
    width: 13rem;
    height: 26rem;
    background-image: url("../img/personajes/guardian.webp");
    opacity: 0.5;
    filter:
        drop-shadow(0 0 16px rgba(74, 222, 128, 0.35))
        drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}

/* --- 4 · ESPERANDO — el mago Merlín --------------------------------------
   Arranca por debajo del titular para no cruzar «estamos revisando». */
body.tienda-pasala:has(#cuenta-refresco)::before,
body.tienda-pasala:has(.pasos)::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    top: 13rem;
    width: 11rem;
    height: 24rem;
    background-image: url("../img/personajes/mago.webp");
    opacity: 0.9;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5));
}

/* --- 5 · ENTREGADA — el grupo celebrando ---------------------------------
   Este no se posiciona: va EN FLUJO, justo debajo de las credenciales. Así
   celebra donde el cliente acaba de leer su acceso, y no hay manera de que
   tape nada ni de que añada scroll lateral. */
body.tienda-pasala .card.acceso,
body.tienda-pasala .card.exito {
    padding-bottom: 0.5rem;
}

body.tienda-pasala .card.acceso::after,
body.tienda-pasala .card.exito::after {
    content: "";
    display: block;
    height: 15rem;
    margin: 1.1rem -0.9rem -0.25rem;
    background: url("../img/personajes/grupo.webp") center bottom / contain no-repeat;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
}

/* ==========================================================================
   TELÉFONO — LAS FICHAS SE VUELVEN TRANSPARENTES DE VERDAD
   #0638, pedido del socio: «en móvil, como no estás aplicando transparencia a
   las fichas, el personaje se ve difuminado; las fichas deben ser transparentes,
   debe ser posible visualizar a los personajes». Y llevaba razón: lo que
   emborronaba al guardián y a Merlín no era su opacidad, era el
   `backdrop-filter: blur(12px)` de la tarjeta de delante. En el ordenador da
   igual — el personaje vive en el margen, fuera de la tarjeta —, pero en el
   teléfono la tarjeta ocupa el ancho entero y se lo come.

   Aquí el desenfoque se QUITA (no se baja: a 2 px seguía emborronando la cara) y
   el fondo de la tarjeta pasa de 46 % a 26 % de opacidad.

   LO QUE NO SE NEGOCIA (⚠️ ALERTA-PAGOS-001): el monto, la referencia y la
   contraseña tienen que seguir leyendose. Un dígito mal leído manda la orden a
   revisión a mano. Por eso, a cambio de la transparencia, los VALORES llevan
   sombra de texto — que es lo que los separa del personaje sin tapar a nadie —
   y solo en este tramo. Comprobado a 390 px sobre las tres pantallas.
   ========================================================================== */
@media (max-width: 519px) {
    body.tienda-pasala .card {
        background: rgba(11, 20, 48, 0.26);
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
    }

    /* El precio de la tarjeta del catálogo NO entra aquí: esa rejilla es otra
       cosa y su colocación está anclada más arriba. Esto es solo el checkout. */
    body.tienda-pasala .card .kv b,
    body.tienda-pasala .card .ref,
    body.tienda-pasala .card h2,
    body.tienda-pasala .monto-grande,
    body.tienda-pasala .card .pasos strong {
        text-shadow:
            0 1px 3px rgba(3, 6, 16, 0.95),
            0 0 10px rgba(3, 6, 16, 0.8);
    }
}

/* En teléfono el grupo son siete figuras en 350 px: se encoge para que se
   distingan, en vez de quedar en una fila de manchas. */
@media (max-width: 519px) {
    body.tienda-pasala:has(.datos-pago)::before { width: 9.5rem; height: 19rem; top: 8rem; }
    body.tienda-pasala:has(#cuenta-refresco)::before,
    body.tienda-pasala:has(.pasos)::before { width: 8.5rem; height: 18rem; top: 11rem; }
    body.tienda-pasala .card.acceso::after,
    body.tienda-pasala .card.exito::after { height: 10rem; }
}

@media (min-width: 1200px) {
    body.tienda-pasala:has(.datos-pago)::before { width: 17rem; height: 34rem; opacity: 0.55; }
    body.tienda-pasala:has(#cuenta-refresco)::before,
    body.tienda-pasala:has(.pasos)::before { width: 14rem; height: 30rem; }
    body.tienda-pasala .card.acceso::after,
    body.tienda-pasala .card.exito::after { height: 20rem; }
}