/* Las tarjetas en 3D (includes/niveles_tarjetas.php: tarjeta3d(), escenaTarjeta()),
   de la página Tarjetas (tarjetas.php, con niveles-tarjetas.css) y de «Mis
   tarjetas VIP» (mis-tarjetas.php, con tarjetas.css). Cada tipo tiene su color
   (--nivel). La tarjeta mide en cqw (el ancho de .tarjeta-3d): se ve igual de
   grande o de pequeña. Sin fuentes de fuera (docs/frontend.md): la estrecha que
   tenga el sistema (Bahnschrift en Windows, DIN Condensed en Apple, Roboto
   Condensed en Android). js/tarjeta-3d.js la gira al tocarla y la inclina con el ratón. */

:root {
    --nivel-lista-gratis: #b9a7ff; /* el lila de su diseño (2026-10-24) */
    --nivel-vip: #2fd6ec;
    --nivel-gold: #e3b860;
    --oro: linear-gradient(180deg, #fbe7a6 0%, #e9c165 40%, #b4822c 58%, #f3d488 100%);
    --fuente-tarjeta: Bahnschrift, "DIN Condensed", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", var(--fuente);
    --curva: cubic-bezier(.2, .8, .2, 1);
}
.nivel--lista-gratis, .tarjeta-3d--lista-gratis { --nivel: var(--nivel-lista-gratis); }
.nivel--vip, .tarjeta-3d--vip { --nivel: var(--nivel-vip); }
.nivel--gold, .tarjeta-3d--gold { --nivel: var(--nivel-gold); }

/* ----- La escena: el resplandor detrás, la tarjeta y sus botones ----- */
.escena-tarjeta {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: 12px 0;
}
.escena-tarjeta::before {
    content: "";
    position: absolute;
    inset: -4% 0 10%;
    z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--nivel) 22%, transparent), transparent);
    pointer-events: none;
}
.escena-tarjeta__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.escena-tarjeta__boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    background: var(--fondo-elevado);
    color: var(--texto-suave);
    font-size: .875rem;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: color var(--transicion), border-color var(--transicion);
}
.escena-tarjeta__boton:hover { color: var(--texto); border-color: color-mix(in srgb, var(--nivel) 60%, var(--borde-fuerte)); }
.escena-tarjeta__boton svg { width: 16px; height: 16px; transition: transform .6s var(--curva); }
.escena-tarjeta__casilla:checked ~ .escena-tarjeta__botones label svg { transform: rotate(-180deg); }
.escena-tarjeta__casilla:focus-visible ~ .escena-tarjeta__botones label { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Los puntos de las personas: encendidos, gastados esta noche y libres. */
.personas { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 300px; }
.personas__punto { aspect-ratio: 1; border: 1.5px solid var(--borde-fuerte); border-radius: 50%; }
.personas__punto--on {
    background: var(--nivel);
    border-color: var(--nivel);
    box-shadow: 0 0 10px color-mix(in srgb, var(--nivel) 55%, transparent);
}
.personas__punto--usado { background: color-mix(in srgb, var(--nivel) 18%, transparent); border-color: color-mix(in srgb, var(--nivel) 30%, var(--borde)); }

/* ----- La tarjeta: se inclina (__inclinacion) y se gira (__cuerpo) ----- */
.tarjeta-3d {
    container-type: inline-size;
    position: relative;
    width: 100%;
    max-width: 540px;
    aspect-ratio: 1712 / 1080;
    perspective: 1400px;
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tarjeta-3d__inclinacion,
.tarjeta-3d__cuerpo {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
.tarjeta-3d__inclinacion {
    transform: rotateX(var(--inclina-x, 0deg)) rotateY(var(--inclina-y, 0deg));
    transition: transform .6s var(--curva);
}
.tarjeta-3d--siguiendo .tarjeta-3d__inclinacion { transition-duration: .12s; }
.tarjeta-3d__cuerpo { transition: transform .85s cubic-bezier(.2, .75, .15, 1); }
.escena-tarjeta__casilla:checked ~ .tarjeta-3d .tarjeta-3d__cuerpo { transform: rotateY(180deg); }

.tarjeta-3d__cara {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 4.6cqw;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Cielo de estrellas: unas sueltas y una trama fina que se repite. */
    background:
        radial-gradient(1.4px 1.4px at 8% 22%, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1px 1px at 23% 64%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(1.6px 1.6px at 41% 12%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1px 1px at 57% 83%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1.3px 1.3px at 68% 37%, rgba(255, 255, 255, .45), transparent),
        radial-gradient(1px 1px at 79% 71%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(1.5px 1.5px at 91% 18%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1px 1px at 95% 92%, rgba(255, 255, 255, .4), transparent),
        radial-gradient(1px 1px at 33% 93%, rgba(255, 255, 255, .45), transparent),
        radial-gradient(1px 1px at 15% 47%, rgba(255, 255, 255, .35), transparent),
        radial-gradient(.8px .8px at 50% 50%, rgba(255, 255, 255, .3), transparent) 0 0 / 53px 41px,
        radial-gradient(ellipse at 50% 0%, #0e0e15, #040406 72%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 50px -18px rgba(0, 0, 0, .9), 0 18px 70px -34px var(--nivel);
}
.tarjeta-3d__cara--dorso { transform: rotateY(180deg); }
/* El brillo que sigue al ratón (js/tarjeta-3d.js pone --brillo-x/-y). */
.tarjeta-3d__cara::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--brillo-x, 22%) var(--brillo-y, 12%), rgba(255, 255, 255, .14), transparent 52%);
    opacity: var(--brillo, .6);
    transition: opacity .4s;
    pointer-events: none;
}

.muestra {
    position: absolute;
    inset: 0;
    padding: 7cqw 7.5cqw;
    color: #f4f4f6;
    font-family: var(--fuente-tarjeta);
    font-stretch: condensed;
    line-height: 1.1;
}
/* Sin márgenes propios (los de base.css); cada pieza pone los suyos después. */
.muestra :where(p, dl, dd) { margin: 0; }

/* Lo común de los textos de la tarjeta. */
.muestra__antetitulo { color: var(--nivel); font-size: 2.3cqw; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; }
.muestra__titulo {
    max-width: 60cqw;
    overflow: hidden;
    color: var(--nivel);
    font-size: 6.4cqw;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 0 1.4cqw color-mix(in srgb, var(--nivel) 55%, transparent);
}
.muestra__subtitulo { margin-top: 1.8cqw; font-size: 2.3cqw; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.muestra__qr {
    position: absolute;
    top: 6.4cqw;
    right: 7.5cqw;
    width: 17.4cqw;
    padding: 1.2cqw;
    border: .2cqw dashed color-mix(in srgb, var(--nivel) 85%, transparent);
    border-radius: 2cqw;
}
.muestra__qr svg.qr { display: block; width: 100%; height: auto; border-radius: 1cqw; }
/* El código escrito bajo el QR de una física (la Gold, y lo que va a la imprenta): si el QR no se lee, la puerta lo teclea. */
.muestra__codigo { margin-top: .9cqw; color: #f4f1ea; font-size: 1.35cqw; font-weight: 600; letter-spacing: .12em; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Sin QR en pantalla: el chip de una física o el estado de un pase que no vale. */
.muestra__qr--hueco { display: grid; place-content: center; justify-items: center; gap: 1.2cqw; aspect-ratio: 1; }
.muestra__chip { width: 7.4cqw; height: auto; filter: drop-shadow(0 0 .8cqw rgba(220, 185, 99, .35)); }
.muestra__hueco { color: color-mix(in srgb, var(--nivel) 55%, #fff); font-size: 1.45cqw; font-weight: 600; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.muestra__raya { display: block; width: 14cqw; height: .25cqw; background: var(--nivel); box-shadow: 0 0 1cqw color-mix(in srgb, var(--nivel) 60%, transparent); }
.muestra__rotulo { color: #a9a7a0; font-size: 1.75cqw; letter-spacing: .24em; text-transform: uppercase; }
.muestra__numero { margin-top: 1.2cqw; font-size: 7.4cqw; font-weight: 500; letter-spacing: .1em; line-height: 1; font-variant-numeric: tabular-nums; }
.muestra__ventajas { margin-top: 3cqw; color: #ecebea; font-family: var(--fuente); font-size: 2cqw; font-stretch: normal; }
.muestra__pie {
    position: absolute;
    right: 7.5cqw;
    bottom: 5.6cqw;
    left: 7.5cqw;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 3cqw;
}
.muestra__legal { max-width: 62cqw; color: #a3a19b; font-family: var(--fuente); font-size: 1.45cqw; font-stretch: normal; line-height: 1.3; }
.muestra__web { color: var(--nivel); font-size: 1.7cqw; letter-spacing: .12em; white-space: nowrap; }

/* El sello del frente: aro de puntos, resplandor y, dentro, el logo de la
   discoteca sobre su foto desenfocada y teñida (como en los diseños) o la luna
   con la marca. */
.muestra__sello { position: absolute; display: grid; place-items: center; aspect-ratio: 1; color: var(--nivel); }
.muestra__sello::before {
    content: "";
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--nivel) 26%, transparent) 0%, color-mix(in srgb, var(--nivel) 7%, transparent) 55%, transparent 72%);
}
.muestra__sello-foto {
    position: absolute;
    inset: 6%;
    overflow: hidden;
    isolation: isolate;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 71%);
    mask-image: radial-gradient(circle, #000 55%, transparent 71%);
}
.muestra__sello-foto img { width: 100%; height: 100%; object-fit: cover; filter: blur(.5cqw) grayscale(1) brightness(.55); transform: scale(1.12); }
.muestra__sello-foto::after { content: ""; position: absolute; inset: 0; background: var(--nivel); mix-blend-mode: color; opacity: .6; }
.muestra__aro { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.muestra__sello-dentro { position: relative; display: grid; justify-items: center; gap: 1.4cqw; text-align: center; }
/* Un logo ancho, entero y con su brillo; uno cuadrado (los más, con su fondo), en
   círculo con un halo del color de la tarjeta, como un avatar dentro del aro. */
.muestra__logo {
    width: 30cqw;
    max-width: none;
    height: 22cqw;
    object-fit: contain;
    filter: drop-shadow(0 0 .6cqw color-mix(in srgb, var(--nivel) 80%, #fff)) drop-shadow(0 0 2cqw var(--nivel));
}
.muestra__logo--redondo {
    width: 34cqw;
    height: 34cqw;
    object-fit: cover;
    border-radius: 50%;
    filter: none;
    box-shadow:
        0 0 0 .3cqw color-mix(in srgb, var(--nivel) 75%, transparent),
        0 0 2.4cqw color-mix(in srgb, var(--nivel) 75%, transparent),
        0 0 7cqw color-mix(in srgb, var(--nivel) 40%, transparent);
}
.muestra--lista-gratis-frente .muestra__logo { width: 24cqw; height: 18cqw; }
.muestra--lista-gratis-frente .muestra__logo--redondo { width: 25cqw; height: 25cqw; }
.muestra__luna {
    width: 12cqw;
    height: 12cqw;
    color: color-mix(in srgb, var(--nivel) 40%, #fff);
    filter: drop-shadow(0 0 1.2cqw var(--nivel));
}
.muestra__sello-texto {
    color: color-mix(in srgb, var(--nivel) 30%, #fff);
    font-size: 1.9cqw;
    font-weight: 600;
    letter-spacing: .3em;
    text-indent: .3em;
    text-transform: uppercase;
    text-shadow: 0 0 1cqw var(--nivel);
}

/* Lista Gratis: «LISTA GRATIS» enorme a la izquierda y el sello a la derecha. */
.muestra__gigante { display: grid; margin-top: 8.5cqw; font-size: 15cqw; font-weight: 700; line-height: .86; text-transform: uppercase; }
.muestra__gigante span:first-child { color: #fff; text-shadow: 0 0 2cqw rgba(255, 255, 255, .22); }
.muestra__color { color: var(--nivel); text-shadow: 0 0 1.6cqw color-mix(in srgb, var(--nivel) 65%, transparent); }
.muestra__nota { position: absolute; bottom: 6.6cqw; left: 7.5cqw; color: #d8d6d0; font-family: var(--fuente); font-size: 2.1cqw; font-stretch: normal; }
.muestra--lista-gratis-frente .muestra__sello { top: 50%; right: 4.5cqw; width: 41cqw; transform: translateY(-50%); }
.muestra--lista-gratis-dorso .muestra__raya { margin-top: 12cqw; }
.muestra__campos { display: grid; gap: 2cqw; margin-top: 2.8cqw; }
.muestra__campos div { display: grid; grid-template-columns: 21cqw 1fr; align-items: baseline; }
.muestra__campos dt { color: #a9a7a0; font-size: 1.6cqw; letter-spacing: .2em; text-transform: uppercase; }
.muestra__campos dd { color: #f1efe9; font-family: var(--fuente); font-size: 2.2cqw; font-stretch: normal; }

/* VIP: el sello grande en el centro, con el logo de su discoteca o «VIP» en neón. */
.muestra--vip-frente .muestra__sello { top: 50%; left: 50%; width: 56cqw; transform: translate(-50%, -50%); }
.muestra--vip-frente .muestra__luna { width: 9cqw; height: 9cqw; }
.muestra__neon {
    color: #e9fdff;
    font-size: 13cqw;
    font-weight: 700;
    letter-spacing: .08em;
    text-indent: .08em;
    line-height: .9;
    text-shadow: 0 0 .5cqw #fff, 0 0 1.6cqw var(--nivel), 0 0 4cqw var(--nivel);
}
.muestra--vip-dorso .muestra__socio { margin-top: 10cqw; }
.muestra--vip-dorso .muestra__raya,
.muestra--gold-dorso .muestra__raya { margin-top: 2.4cqw; }

/* VIP Gold: marco doble, esquinas, anillos y letras de oro. */
.tarjeta-3d--gold .tarjeta-3d__cara { background-color: #060504; }
.tarjeta-3d--gold .muestra::before,
.tarjeta-3d--gold .muestra::after {
    content: "";
    position: absolute;
    border-radius: 3.4cqw;
    pointer-events: none;
}
.tarjeta-3d--gold .muestra::before { inset: 1.8cqw; border: .22cqw solid #d9ad55; }
.tarjeta-3d--gold .muestra::after { inset: 2.7cqw; border: .08cqw solid rgba(217, 173, 85, .45); border-radius: 2.6cqw; }
.muestra--gold-frente { background: radial-gradient(ellipse 60% 70% at 50% 42%, rgba(227, 184, 96, .12), transparent 70%); }
.muestra--gold-dorso { background: repeating-radial-gradient(circle at 20% 82%, rgba(227, 184, 96, .07) 0 1px, transparent 1px 8px); }
.muestra__esquinas {
    --largo: 4cqw;
    --grueso: .32cqw;
    --dorado: linear-gradient(#f0cd7a, #f0cd7a);
    position: absolute;
    inset: 4cqw;
    background:
        var(--dorado) left top / var(--largo) var(--grueso) no-repeat,
        var(--dorado) left top / var(--grueso) var(--largo) no-repeat,
        var(--dorado) right top / var(--largo) var(--grueso) no-repeat,
        var(--dorado) right top / var(--grueso) var(--largo) no-repeat,
        var(--dorado) left bottom / var(--largo) var(--grueso) no-repeat,
        var(--dorado) left bottom / var(--grueso) var(--largo) no-repeat,
        var(--dorado) right bottom / var(--largo) var(--grueso) no-repeat,
        var(--dorado) right bottom / var(--grueso) var(--largo) no-repeat;
}
.muestra--gold-frente .muestra__sello { top: 43%; left: 50%; width: 40cqw; transform: translate(-50%, -50%); }
.muestra__oro,
.muestra--gold-dorso .muestra__titulo {
    background: var(--oro);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}
.muestra__oro {
    position: absolute;
    right: 0;
    bottom: 8cqw;
    left: 0;
    font-size: 5.8cqw;
    font-weight: 700;
    letter-spacing: .5em;
    text-indent: .5em;
    text-align: center;
    text-transform: uppercase;
}
.muestra--gold-dorso .muestra__socio { margin-top: 7cqw; }
.muestra--gold-dorso .muestra__raya { background: var(--oro); box-shadow: none; }
.muestra__nombre { margin-top: 1.8cqw; font-size: 2.7cqw; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }

/* ----- Movimiento: en pantallas táctiles la tarjeta se mece sola; con
   movimiento reducido, ni se mece ni gira despacio. ----- */
@media (prefers-reduced-motion: no-preference) and (hover: none) {
    .tarjeta-3d__inclinacion { animation: tarjeta-mece 7s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
    .tarjeta-3d__inclinacion,
    .tarjeta-3d__cuerpo,
    .escena-tarjeta__boton svg { transition: none; }
}
@keyframes tarjeta-mece {
    0%, 100% { transform: rotateX(4deg) rotateY(-7deg); }
    50% { transform: rotateX(-3deg) rotateY(7deg); }
}