/* ELIXIR GODS · tema claro (prueba del 02/10/2026)
   La portada del logo sigue oscura; de ahí para abajo la web va en blanco, con el azul para el texto.
   Se enciende desde tools/make_pages.py (THEME = "light"): añade la clase «light» al <html> y carga
   este fichero después de styles.css. Aquí solo se cambian colores, nada de estructura. */

html.light {
  --midnight: #FFFFFF; --midnight-deep: #F5F2EB; --midnight-up: #FFFFFF;
  --cream: #0B1633; --cream-2: rgba(11, 22, 51, 0.74); --cream-3: rgba(11, 22, 51, 0.54);
  --gold: #96773A; --gold-soft: rgba(150, 119, 58, 0.6); --gold-faint: rgba(150, 119, 58, 0.08);
  --line: rgba(11, 22, 51, 0.12); --line-strong: rgba(11, 22, 51, 0.28);
  background: #FFFFFF;
}
html.light body::before, html.light body::after { display: none; }      /* sin estrellas sobre el blanco */

/* Zonas que siguen en azul noche: la portada, la barra de avisos, la lista de espera, el pie, las fotos */
html.light .hero-slider, html.light .announce, html.light .waitlist, html.light .footer, html.light .popup-card,
html.light .product-media, html.light .ingredient .ph, html.light .gallery-stage, html.light .band, html.light .sticky-buy,
html.light .header--floating:not(.is-solid):not(:has(.mobile-nav.is-open)) {
  --midnight: #0B1633; --midnight-deep: #070F26; --midnight-up: #0F1D43;
  --cream: #F4EFE6; --cream-2: rgba(244, 239, 230, 0.72); --cream-3: rgba(244, 239, 230, 0.5);
  --gold: #B8975A; --gold-soft: rgba(184, 151, 90, 0.55); --gold-faint: rgba(184, 151, 90, 0.08);
  --line: rgba(244, 239, 230, 0.12); --line-strong: rgba(244, 239, 230, 0.26);
  color: var(--cream);
}
html.light .waitlist, html.light .footer { background: #0B1633; }
html.light .announce { background: #070F26; }

/* Cabecera: blanca cuando hay página debajo, transparente sobre la portada.
   Con el menú del móvil abierto va siempre blanca con letra azul, también arriba del todo. */
html.light .header { background: rgba(255, 255, 255, 0.9); }
html.light .header .brand img { content: url("../img/logo-elixir-gods-navy.png"); filter: none; }
html.light .header--floating:not(.is-solid):not(:has(.mobile-nav.is-open)) { background: transparent; }
html.light .header--floating:not(.is-solid):not(:has(.mobile-nav.is-open)) .brand img { content: url("../img/logo-elixir-gods.png"); }
html.light .header--floating.is-solid, html.light .header--floating:has(.mobile-nav.is-open) { background: rgba(255, 255, 255, 0.92); }
html.light .mobile-nav { background: #FFFFFF; }

/* Campos y cajas que tenían el fondo oscuro puesto a mano */
html.light .field { background: #FFFFFF; }
html.light .waitlist .field, html.light .popup-card .field { background: rgba(7, 15, 38, 0.55); }
html.light .launch { background: #F5F2EB; }
html.light .sort option { color: #0B1633; background: #FFFFFF; }

/* Un respiro entre bloques: la frase con sus fotos va sobre blanco roto */
html.light .lifestyle { background: #F5F2EB; padding-top: clamp(64px, 7.5vw, 104px); }
html.light .lifestyle + .section--home { padding-top: clamp(64px, 7.5vw, 104px); }
html.light .product-media { border-color: transparent; border-radius: 8px; }
html.light .tl-step.is-key .tl-dot { box-shadow: 0 0 14px rgba(150, 119, 58, 0.55); }