/* Tarjeta de Quito Secreto en la portada (includes/portada-quito-secreto.php): «Códice holográfico» + radar.
   Mismo lenguaje que la Ticketera (Pase Holográfico): base de latón, haz verde neón, anillo de glifos,
   cian solo en las leyendas del holograma. Sin estilos en línea: los rombos del radar usan las clases .pqs-p0 … .pqs-p7. */
.pqs.banner-secreto {
    --neon: #3ddc84; --cian: #4de3ff; --viol: #a47bff;
    --brass: #c9a24b; --brass-hi: #efd48a; --brass-lo: #6e5120; --ap: #9a8f78;
    --mono: 'JetBrains Mono', ui-monospace, 'DejaVu Sans Mono', 'Courier New', monospace;
    --serif: 'Fraunces', Georgia, serif;
    position: relative; margin-top: 26px; color: #ece3d0;
    display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 6px; align-items: center;
    padding: 16px 16px 16px 4px; border-radius: 14px; border: 1px solid rgba(61, 220, 132, .28); overflow: hidden;
    background:
        radial-gradient(120% 90% at 20% 40%, rgba(18, 10, 36, .55), transparent 60%),
        radial-gradient(90% 90% at 0% 50%, rgba(61, 220, 132, .07), transparent 60%),
        linear-gradient(135deg, #0b1712, #07090b 60%, #0d0a14);
    box-shadow: inset 0 0 40px rgba(61, 220, 132, .05), 0 0 30px rgba(61, 220, 132, .07);
}
.pqs *, .pqs *::before, .pqs *::after { box-sizing: border-box; }
.pqs a { text-decoration: none; }
.pqs img { display: block; }

/* ---------- Escena: la portada del libro flotando sobre el proyector ---------- */
.pqs-escena { position: relative; height: 430px; display: flex; align-items: center; justify-content: center; perspective: 900px; overflow: hidden; }
.pqs-suelo {
    position: absolute; left: -6%; right: -6%; bottom: -8px; height: 130px; transform: perspective(260px) rotateX(62deg); transform-origin: 50% 100%; opacity: .9;
    background: repeating-linear-gradient(90deg, rgba(61, 220, 132, .35) 0 1px, transparent 1px 30px), repeating-linear-gradient(0deg, rgba(61, 220, 132, .35) 0 1px, transparent 1px 24px);
    -webkit-mask: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%); mask: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%);
}
.pqs-anillo { position: absolute; left: 50%; top: 46%; width: 310px; height: 310px; margin: -155px 0 0 -155px; opacity: .5; }
.pqs-anillo text { font: 13px var(--mono); fill: var(--cian); }
.pqs-base {
    position: absolute; left: 50%; bottom: 20px; width: 190px; height: 36px; margin-left: -95px; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, #0c2418 0 40%, transparent 41%), conic-gradient(from 0deg, var(--brass-lo), var(--brass-hi), var(--brass-lo), var(--brass), var(--brass-lo));
    box-shadow: 0 0 30px rgba(61, 220, 132, .35), 0 6px 12px #000;
}
.pqs-base::after { content: ''; position: absolute; inset: 7px 22px; border-radius: 50%; border: 2px solid var(--neon); box-shadow: 0 0 14px var(--neon), inset 0 0 12px rgba(61, 220, 132, .6); }
.pqs-vol { position: relative; width: 216px; height: 305px; margin-bottom: 46px; }
.pqs-haz {
    position: absolute; left: 50%; bottom: -56px; width: 216px; height: 350px; margin-left: -108px;
    clip-path: polygon(34% 100%, 66% 100%, 100% 0, 0 0); background: linear-gradient(0deg, rgba(61, 220, 132, .36), rgba(61, 220, 132, .04) 70%, transparent); opacity: .34;
}
.pqs-tilt { position: absolute; inset: 0; transform: perspective(900px) rotateX(3deg) rotateY(-10deg); }
.pqs-carta { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(61, 220, 132, .7); background: #050504; box-shadow: 0 0 28px rgba(61, 220, 132, .38), 0 0 60px rgba(77, 227, 255, .12); }
/* La imagen se muestra completa (contain), nunca recortada ni tintada. */
.pqs-carta img { width: 100%; height: 100%; object-fit: contain; filter: saturate(1.1) contrast(1.05); }
.pqs-brillo {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    background: repeating-linear-gradient(0deg, rgba(61, 220, 132, .07) 0 1px, transparent 1px 3px), linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .12) 44%, rgba(77, 227, 255, .2) 50%, rgba(164, 123, 255, .14) 56%, transparent 70%);
}

/* ---------- Panel de texto ---------- */
.pqs-panel { position: relative; min-width: 0; padding: 6px 0 0 6px; }
.pqs-kick { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--neon); }
.pqs-led { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); flex: none; }
.pqs-linea { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(61, 220, 132, .5), transparent); }
.pqs .pqs-tit { margin: 0; font: 600 34px/1.05 var(--serif); color: #fff; text-shadow: 0 0 18px rgba(61, 220, 132, .5); }
.pqs .pqs-lema { margin: 6px 0 16px; font: 13px/1.5 var(--mono); color: #cfd9d2; }

/* ---------- Radar + contadores ---------- */
.pqs-radar-fila { display: flex; align-items: center; gap: 18px; margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(61, 220, 132, .2); background: linear-gradient(90deg, rgba(61, 220, 132, .05), transparent 70%); }
.pqs-radar-caja { position: relative; flex: none; width: 150px; height: 150px; }
.pqs-bisel { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .7)); }
.pqs-bisel .g { stroke: #c9a24b; stroke-width: 1.1; opacity: .9; }
.pqs-bisel .p { stroke: #c9a24b; stroke-width: .5; opacity: .5; }
.pqs-radar {
    position: absolute; inset: 9px; border-radius: 50%; overflow: hidden;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0 13px, rgba(61, 220, 132, .17) 14px, transparent 15px), radial-gradient(circle, #0b140e, #060805);
    box-shadow: inset 0 0 22px #000, 0 0 22px rgba(61, 220, 132, .18);
}
.pqs-radar::before, .pqs-radar::after { content: ''; position: absolute; background: rgba(61, 220, 132, .28); }
.pqs-radar::before { left: 0; right: 0; top: 50%; height: 1px; }
.pqs-radar::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.pqs-giro { position: absolute; inset: 0; background: conic-gradient(from 30deg, rgba(61, 220, 132, 0) 0deg, rgba(61, 220, 132, .4) 70deg, rgba(61, 220, 132, 0) 72deg); animation: pqs-barrido 6s linear infinite; }
@keyframes pqs-barrido { to { transform: rotate(360deg); } }
.pqs-rombo { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 1px; transform: rotate(45deg); background: var(--brass-hi); box-shadow: 0 0 10px var(--brass), 0 0 2px #fff inset; }
.pqs-p0 { left: 62%; top: 34%; } .pqs-p1 { left: 36%; top: 62%; } .pqs-p2 { left: 58%; top: 70%; } .pqs-p3 { left: 70%; top: 56%; }
.pqs-p4 { left: 28%; top: 36%; } .pqs-p5 { left: 48%; top: 24%; } .pqs-p6 { left: 40%; top: 78%; } .pqs-p7 { left: 74%; top: 40%; }
.pqs-centro { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.pqs-datos { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pqs-dato { display: flex; flex-direction: column; gap: 5px; }
.pqs-et { font: 600 9.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--cian); }
.pqs-odo { display: flex; gap: 4px; }
.pqs-odo i {
    display: grid; place-items: center; width: 30px; height: 40px; border-radius: 5px; border: 1px solid var(--brass-lo);
    background: linear-gradient(180deg, #050806 0, #0f1a13 50%, #050806 51%, #0a110d);
    box-shadow: inset 0 0 8px #000, 0 1px 0 rgba(239, 212, 138, .15);
    font: 700 24px var(--mono); font-style: normal; color: #e8fff1; text-shadow: 0 0 12px rgba(61, 220, 132, .9);
}
.pqs-dato:nth-child(2) .pqs-odo i { color: var(--brass-hi); text-shadow: 0 0 12px rgba(201, 162, 75, .9); }
.pqs-dato small { display: flex; align-items: center; gap: 7px; font: 500 10.5px var(--mono); letter-spacing: .06em; color: var(--ap); }
.pqs-sub-ga u { display: inline-block; width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg); background: var(--brass-hi); box-shadow: 0 0 8px var(--brass); }

/* ---------- Botones ---------- */
.pqs-acc { display: flex; gap: 10px; flex-wrap: nowrap; }
.pqs .pqs-btn {
    flex: 1 1 0; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 8px; border-radius: 4px;
    font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #03140b;
    background: linear-gradient(90deg, #3ddc84, #8cffc0 50%, #4de3ff); box-shadow: 0 0 22px rgba(61, 220, 132, .45), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.pqs-btn svg { width: 18px; height: 18px; flex: none; }
.pqs .pqs-ghost {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 16px; border-radius: 4px;
    color: var(--neon); border: 1px solid rgba(61, 220, 132, .55); background: rgba(61, 220, 132, .06);
}
.pqs-ghost b { white-space: nowrap; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pqs-ghost small { white-space: nowrap; font: 500 8.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cian); }
.pqs .pqs-btn:hover { filter: brightness(1.08); }
.pqs .pqs-ghost:hover { background: rgba(61, 220, 132, .14); }
.pqs .pqs-btn:focus-visible, .pqs .pqs-ghost:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }

@media (max-width: 640px) {
    .pqs.banner-secreto { grid-template-columns: 1fr; padding: 12px 14px 18px; }
    .pqs-escena { height: 390px; }
    .pqs-radar-caja { width: 128px; height: 128px; }
    .pqs-odo i { width: 26px; height: 36px; font-size: 21px; }
    .pqs-radar-fila { gap: 14px; padding: 12px; }
    .pqs-panel { padding: 0; }
    .pqs-acc { flex-wrap: wrap; }
    .pqs .pqs-btn, .pqs .pqs-ghost { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .pqs-giro { animation: none; } }