/* ==========================================================================
   Club SusAstros | Piel cósmica oscura, para que todo el club se sienta
   parte del mismo mundo que susastros.com. La cargan todas las páginas de
   cliente (catálogo, blog, login, producto, mi cuenta...) — admin.html es
   la única que no, queda con el tema claro de siempre (es la herramienta
   de uso interno del equipo, no hace falta que combine con la marca).

   Truco: club.css ya construye TODO (barra, botones, tarjetas, mensajes)
   sobre variables semánticas (--paper, --ink, --accent, etc.), nunca
   colores sueltos. Así que alcanza con redefinir esas variables acá —
   nada se reescribe.

   Excepción a propósito: el panel de lectura de un producto (".lectura"
   en producto.html — el que tiene, por ejemplo, los audios de cada
   semana) se deja BLANCO adentro de este tema oscuro, redefiniendo ahí
   mismo las mismas variables de vuelta a sus valores claros — así hace
   contraste con el fondo en vez de perderse en él. Como son variables
   CSS, alcanza con pisarlas en ".lectura" para que todo lo de adentro
   (textos, reproductores, botones) las vuelva a leer solas, sin tocar
   ninguna regla de club.css.
   ========================================================================== */

:root{
  --paper:#0b0b1d; --blanco:#14142e; --paper-3:#1b1b42;
  --rule:rgba(220,203,255,.16); --rule-2:rgba(220,203,255,.32);
  --ink:#f6f3ff; --ink-2:rgba(246,243,255,.66);
  --accent:#7c4dff; --accent-oscuro:#6a3af0; --accent-suave:rgba(124,77,255,.16);
  --bien:#8ff0d4; --bien-suave:rgba(143,240,212,.14);
  --mal:#ff8a9a; --mal-suave:rgba(255,138,154,.14);
}

body{position:relative; overflow-x:hidden}
body::before{
  content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(220,203,255,.14), transparent 60%),
    radial-gradient(900px 600px at 6% 10%, rgba(205,231,255,.10), transparent 60%),
    radial-gradient(1000px 800px at 50% 118%, rgba(247,214,224,.10), transparent 60%),
    linear-gradient(180deg,var(--paper),#14142e 40%,var(--paper));
}
#stars{position:fixed; inset:0; z-index:-2; pointer-events:none}

input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(124,77,255,.28) !important}

.barra{background:rgba(11,11,29,.74) !important}

/* ---------- Encabezado de la portada ---------- */
.cabeza-club h1{font-size:clamp(1.9rem,4vw,2.5rem)}
.cabeza-club p{margin-top:.4rem}

/* ---------- Tarjetas con un poco más de presencia ---------- */
.tarjeta-prod{box-shadow:0 1px 0 rgba(255,255,255,.02) inset}
.tarjeta-prod:hover{box-shadow:0 22px 54px -24px rgba(0,0,0,.65)}
.tarjeta-imagen{box-shadow:0 1px 0 rgba(255,255,255,.04) inset}

/* ---------- Unidad activa (producto.html): verde, no violeta ---------- */
/* El violeta de siempre (--accent-suave/--accent-oscuro, ver club.css)
   casi no se nota acá: es muy parecido al resto del tema oscuro, violeta
   sobre violeta. Un verde (--bien, el mismo que ya usa el resto del sitio
   para "esto anduvo bien") se lee mucho más claro como "esta es la que
   estás viendo ahora" — no se toca la versión bloqueada (gris), que a
   propósito se mantiene neutra aunque esté seleccionada. */
.unidad-btn[aria-current=true]{
  border-color:var(--bien);
  background:rgba(143,240,212,.18);
  color:var(--bien);
}

/* ---------- Panel de lectura de un producto: isla clara ---------- */
/* Ver la nota del encabezado — pisa las mismas variables de vuelta a sus
   valores de siempre (los de club.css, tema claro), solo adentro de
   ".lectura" y lo que tenga dentro. */
.lectura{
  --blanco:#FFFFFF; --paper-3:#E3DFEE;
  --rule:#C9C2DD; --rule-2:#A79EC4;
  --ink:#171429; --ink-2:#575074;
  --accent:#5B2BD9; --accent-oscuro:#4720AE; --accent-suave:#EDE6FF;
  --bien:#0F7B57; --bien-suave:#DCF3EA;
  --mal:#B3261E; --mal-suave:#FCE8E6;
  /* "color" (no solo la variable) para que el texto que no pisa su propio
     color a mano (h2, párrafos del cuerpo, título de un audio/video) deje
     de heredar el --ink claro del body de arriba y pase a heredar este
     oscuro en cambio — ver la nota del encabezado. */
  color:var(--ink);
  box-shadow:0 22px 54px -28px rgba(0,0,0,.45);
}

@media (prefers-reduced-motion:reduce){#stars{display:none}}