/* Base visual del Club — SOLO lo que usa el Pase de Acceso.
   ⚠️ No usar club.css aquí: ese archivo es del panel de la encuesta y ya define
   .hoja, .caja y .ficha, que chocaban con las de estas páginas. */
:root{
  --gold:#C9A040; --gold-light:#E8C060; --gold-xlight:#FFD97D; --gold-dark:#9B7520;
  --blue-deep:#05091a; --blue-dark:#080e22; --blue-mid:#0d1830; --blue-card:#0b1428;
  --blue-accent:#1e5ce8; --blue-glow:#2468ff;
  --white:#fff; --gray:#a8b8d0; --gray-2:#6b7c99; --line:rgba(120,150,200,.14);
  --green:#10b981; --red:#e5484d;
  --r:16px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--blue-deep); color:var(--white);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip;
  min-height:100dvh; display:flex; flex-direction:column;
}
/* el mismo cielo de la Boveda: azul dominante, un rescoldo dorado y luz desde abajo.
   Es el fondo de TODO el dominio del Club; no se cambia en una sola pagina. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    /* Ojo con `transparent`: en un degradado se interpola pasando por negro y
       deja una banda sucia que parece un corte de luz. Se apaga el MISMO color
       bajando su alfa, con un paso intermedio para que el final sea largo. */
    radial-gradient(1000px 760px at 12% 0%,rgba(30,92,232,.26),rgba(30,92,232,.1) 46%,rgba(30,92,232,0) 78%),
    radial-gradient(860px 680px at 92% 2%,rgba(201,160,64,.16),rgba(201,160,64,.06) 44%,rgba(201,160,64,0) 76%),
    radial-gradient(1300px 900px at 50% 112%,rgba(36,104,255,.18),rgba(36,104,255,.07) 48%,rgba(36,104,255,0) 80%)}
/* la trama fina que le quita el plano al fondo */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:3px 3px}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
::selection{background:rgba(201,160,64,.3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(120,150,200,.2);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(120,150,200,.35)}
.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.2);border-top-color:#1a1200;
  border-radius:50%;animation:sp .7s linear infinite;display:inline-block;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

header{position:sticky;top:0;z-index:60;background:rgba(5,9,26,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:12px;padding:10px clamp(12px,3vw,24px);
  max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:32px}
.brand b{font-family:'Space Grotesk',sans-serif;font-size:14px;letter-spacing:.03em;line-height:1.15}
.brand b i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.2em;color:var(--gold);font-weight:500}
/* ⚠️ LA FOTO DE LA ESQUINA NO SE SALE DE LA PANTALLA.
   «Volver al panel» + la marca con su texto + la foto solo caben juntos a
   partir de ~450 px: en un iPhone (390) la foto quedaba fuera, a la derecha,
   y no se veía. Donde hay botón de volver, en el celular la marca se queda
   en el logo (como en la Bóveda) y puede encoger: la foto siempre entra. */
@media(max-width:480px){
  .hd-volver~.brand,.club-volver~.brand{flex-shrink:1;min-width:0;gap:0}
  .hd-volver~.brand b,.club-volver~.brand b{display:none}
  .hd-volver~.brand img,.club-volver~.brand img{height:40px}
}
/* la foto va sola, sin nada detrás: ni el destello cuadrado que pinta el
   iPhone al tocarla */
.club-cuenta>button{-webkit-tap-highlight-color:transparent}
/* ⚠️ LA MARCA, PEGADA AL «VOLVER», NUNCA EN MEDIO. club-volver.js le da al
   botón `margin-right:auto` y la foto ya trae `margin-left:auto`: los dos
   márgenes se reparten el hueco y el nombre de la app acababa centrado en la
   cabecera («¿por qué está en medio el texto de la app?»). Aquí el botón no
   empuja: volver y marca a la izquierda, la foto a la derecha. */
.hd>a.club-volver{margin-right:0!important}


/* ══ el pie, responsivo en todo lo ancho ══
   Va con `body>footer` a propósito: gana sobre el `footer` que declara cada
   página y así no hay que arreglarlo cinco veces. */
/* main es un flex-item de body: sin esto no puede encoger por debajo del
   ancho mínimo de su contenido y la página se desborda en pantallas estrechas. */
body>main,body>header{min-width:0;max-width:100%}

body>footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:5px 9px;text-align:center;padding:20px clamp(14px,4vw,24px);
  font-size:clamp(10.5px,2.6vw,11.5px);line-height:1.5;color:var(--gray-2);
  overflow-wrap:anywhere}
body>footer a{color:var(--gray-2);text-decoration:underline;text-underline-offset:2px}
@media(max-width:380px){
  body>footer{gap:3px 7px;padding:18px 12px}
  body>footer .sep{display:none}
}

@media(prefers-reduced-motion:reduce){
  body::before,body::after{animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}