/* ============================================================================
   CREGEN — CHROME COMPARTIDO
   Barra de anuncios, navegacion y pie. Nada mas.

   GENERADO por tools/build_chrome_css.py desde cregen-dark.css. No editar a
   mano: se pierde al regenerar. Para cambiar el chrome, edita cregen-dark.css
   y vuelve a ejecutar el script.

   Se carga el ULTIMO del <head> de cada pagina, despues de su <style> inline.
   Esta aislado para que ganar en el chrome no signifique pisar la pagina:
     · variables prefijadas --crg-*, no pueden chocar
     · no toca html, body, :root de la pagina, ni etiquetas sueltas
     · los reset estan acotados a #announce, .nav y .footer
   ========================================================================== */

:root{
  --crg-navy:#030812; --crg-navy-2:#07101f; --crg-navy-3:#0d1a30; --crg-navy-4:#112040;
  --crg-accent:#5a90d8; --crg-accent-2:#7aaee8; --crg-accent-glow:rgba(90,144,216,.35);
  --crg-white:#fff; --crg-white-60:rgba(255,255,255,.6); --crg-white-55:rgba(255,255,255,.62);
  --crg-white-40:rgba(255,255,255,.55);  /* .4 daba 3,75 sobre navy */ --crg-white-20:rgba(255,255,255,.2);
  --crg-white-10:rgba(255,255,255,.1); --crg-white-06:rgba(255,255,255,.06);
  --crg-white-03:rgba(255,255,255,.03);
  --crg-glass-bg:rgba(255,255,255,.03); --crg-glass-border:rgba(255,255,255,.06);
  --crg-glass-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  --crg-radius:12px; --crg-radius-lg:18px;
  --crg-transition:cubic-bezier(.25,.46,.45,.94);
  --crg-font-body:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* Reset acotado al chrome. Nada de esto se escapa al contenido. */
#announce *,.nav *,.footer *{box-sizing:border-box}
.nav a,.footer a,#announce a{text-decoration:none;color:inherit}
.nav ul,.footer ul{list-style:none;margin:0;padding:0}
.nav img,.footer img{display:block;max-width:100%;height:auto}
/* #nav-mobile tambien, no solo .nav: el cajon es un <nav> SIN la clase .nav,
   asi que no entraba en este reset. En las 22 paginas que cargan style.css no
   se notaba porque alli hay un reset global de button; science.html no lo
   carga, y sus dos botones del cajon salian con el gris del sistema
   (#efefef) y el texto blanco heredado encima: 1,09 a 1. */
.nav button,#nav-mobile button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.nav,#announce,.footer{font-family:var(--crg-font-body)}
.nav .container,.footer .container,#announce .container{
  width:100%;max-width:1200px;margin:0 auto;padding:0 2rem}
@media(max-width:768px){.nav .container,.footer .container{padding:0 1.25rem}}

/* ============================================================
   ANNOUNCEMENT BAR
============================================================ */
#announce {
  background: var(--crg-navy-3);
  border-bottom: 1px solid var(--crg-white-06);
  overflow: hidden;
  height: 36px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 200;
}
.announce-track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: ticker 32s linear infinite;
  will-change: transform;
}
.announce-item {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--crg-white-60);
  padding: 0 2.5rem;
  flex-shrink: 0;
}
.announce-item::after {
  content: '·';
  margin-left: 2.5rem;
  color: var(--crg-white-55);   /* .2 daba 1,82 sobre navy */
}
.announce-link {
  color: var(--crg-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ============================================================
   NAV
============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(3,8,18,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: var(--crg-white-06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 68px;
  padding: 0 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.nav-logo img { height: 30px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}
.nav-links > li { position: relative; }
.nav-links > li > a,
.nav-links > li > button {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--crg-white-60);
  padding: .5rem .9rem;
  border-radius: 6px;
  transition: color .2s, background .2s;
  cursor: pointer;
}
.nav-links > li > a:hover,
.nav-links > li > button:hover,
.nav-links > li:hover > a,
.nav-links > li:hover > button { color: var(--crg-white); background: var(--crg-white-06); }
.nav-chevron { width: 14px; height: 14px; transition: transform .2s; }
.nav-links > li:hover .nav-chevron { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: rgba(7,16,31,0.96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--crg-white-06);
  border-radius: var(--crg-radius);
  padding: .5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  transform: translateX(-50%) translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), var(--crg-glass-shadow);
}
.nav-links > li:hover .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--crg-white-60);
  padding: .55rem .9rem;
  border-radius: 6px;
  letter-spacing: .04em;
  transition: color .15s, background .15s;
}
.nav-dropdown a:hover { color: var(--crg-white); background: var(--crg-white-06); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crg-navy);
  background: var(--crg-accent);
  padding: .6rem 1.4rem;
  border-radius: 6px;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 20px var(--crg-accent-glow);
  white-space: nowrap;
}
.nav-cta:hover { background: var(--crg-accent-2); transform: translateY(-1px); box-shadow: 0 6px 28px rgba(90,144,216,0.5); }
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  border-radius: 6px;
  transition: background .2s;
}
.nav-hamburger:hover { background: var(--crg-white-06); }
.nav-hamburger span {
  display: block; height: 1.5px; width: 22px; margin: 0 auto;
  background: var(--crg-white); border-radius: 2px;
  transition: transform .25s, opacity .25s;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 98; opacity: 0; transition: opacity .3s;
}
.nav-overlay.open { display: block; opacity: 1; }
#nav-mobile {
  position: fixed; top: 0; right: -100%; width: min(340px,100%); height: 100dvh;
  background: var(--crg-navy-2); z-index: 99;
  border-left: 1px solid var(--crg-white-06);
  display: flex; flex-direction: column;
  padding: 5rem 1.5rem 2rem;
  transition: right .35s var(--crg-transition);
  overflow-y: auto;
}
#nav-mobile.open { right: 0; }
.nav-mobile-links { flex: 1; }
.nav-mobile-links li { border-bottom: 1px solid var(--crg-white-06); }
.nav-mobile-links li a,
.nav-mobile-links li button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1rem 0;
  font-size: .95rem; font-weight: 600; color: var(--crg-white-60);
  transition: color .2s;
}
.nav-mobile-links li a:hover,
.nav-mobile-links li button:hover { color: var(--crg-white); }
.nav-mobile-sub { display: none; padding: .25rem 0 .75rem 1rem; }
.nav-mobile-sub.open { display: block; }
.nav-mobile-sub a {
  display: block; padding: .55rem 0;
  font-size: .85rem; color: var(--crg-white-40); transition: color .2s;
  border-bottom: none;
}
.nav-mobile-sub a:hover { color: var(--crg-white-60); }
.nav-mobile-ctas { padding-top: 1.5rem; }
.btn-block {
  display: block; width: 100%; text-align: center;
  padding: .9rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--crg-accent); color: var(--crg-navy);
  border-radius: 6px;
  box-shadow: 0 4px 20px var(--crg-accent-glow);
  transition: background .2s;
}
.btn-block:hover { background: var(--crg-accent-2); }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crg-navy);
  background: var(--crg-accent);
  padding: .95rem 2.25rem;
  border-radius: 6px;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 24px var(--crg-accent-glow);
}
.btn-primary:hover { background: var(--crg-accent-2); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(90,144,216,0.55); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--crg-white-60);
  border: 1px solid var(--crg-white-20);
  padding: .95rem 1.75rem;
  border-radius: 6px;
  transition: color .2s, border-color .2s, background .2s;
}
.btn-ghost:hover { color: var(--crg-white); border-color: var(--crg-white-40); background: var(--crg-white-06); }
.hero-stat-num {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--crg-white);
  line-height: 1;
  margin-bottom: .2rem;
}
.hero-stat-num span { color: var(--crg-accent); }
.hero-stat-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--crg-white-40);
}
/* ============================================================
   FOOTER
============================================================ */
.footer {
  background: var(--crg-navy);
  border-top: 1px solid var(--crg-white-06);
  padding: 5rem 0 2.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}
.footer-logo img { height: 26px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 1.25rem; }
.footer-tagline {
  font-size: .82rem;
  color: var(--crg-white-40);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 280px;
}
.footer-trust-badges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.footer-trust-badge {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--crg-white-40);
  background: var(--crg-white-03);
  border: 1px solid var(--crg-white-06);
  border-radius: 4px;
  padding: .25rem .6rem;
}
.footer-col-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crg-white-40);
  margin-bottom: 1.25rem;
}
.footer-links { display: flex; flex-direction: column; gap: .55rem; }
.footer-links a {
  font-size: .82rem;
  color: var(--crg-white-40);
  transition: color .2s;
}
.footer-links a:hover { color: var(--crg-white-60); }
.footer-hr { border: none; border-top: 1px solid var(--crg-white-06); margin: 0 0 2rem; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.footer-legal a {
  font-size: .72rem;
  color: var(--crg-white-40);
  transition: color .2s;
}
.footer-legal a:hover { color: var(--crg-white-60); }
.footer-copy {
  font-size: .72rem;
  /* Estaba a .2, que sobre navy da 1,82 a 1: el aviso legal y el copyright
     eran ilegibles en las 23 paginas. .55 da 4,6 y cumple AA. */
  color: rgba(255,255,255,.55);
}
.footer-contact {
  font-size: .75rem;
  color: var(--crg-white-40);
  line-height: 1.7;
  margin-top: 1.5rem;
}
/* ============================================================================
   PARTIALS COMPARTIDOS
   Clases que pide tools/partials/nav.html y que no estaban en el inline
   original porque alli iban como atributo style.
   ========================================================================== */

.nav-acciones{display:flex;align-items:center;gap:.75rem}

/* Saber en que pagina estas. Hoy ninguna nav lo indica. */
.nav-links > li.nav-activo > a,
.nav-links > li.nav-activo > button{color:var(--crg-white)}
.nav-links > li.nav-activo{position:relative}
.nav-links > li.nav-activo::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:var(--crg-accent);border-radius:2px}

/* El aviso de la FDA completo, no solo la primera frase */
.footer-fda{margin:.75rem 0 0;font-size:.68rem;line-height:1.6;color:var(--crg-white-55);
  max-width:80ch}

/* El codigo de socio no se publica: si esta en la web lo usa cualquiera
   y deja de ser un beneficio de socio. Cada club reparte el suyo. */
.club-nota{margin-top:.75rem;font-size:.82rem;line-height:1.6;color:var(--crg-white-55)}

/* El desplegable del nav tambien se abre por teclado, no solo al pasar el
   raton. Lo marca cregen-chrome.js con .abierto. */
.nav-links > li.abierto > .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}


/* ============================================================================
   BLINDAJE
   La cascada no resetea: lo que el chrome no declara, lo sigue poniendo la
   hoja de la pagina. Aqui se fija explicitamente todo lo que style.css o un
   <style> inline podrian estar tocando. Va al final a proposito.
   ========================================================================== */

/* El nav va OPACO por defecto. Medido el 20-sep-2026: de las 28 paginas del
   sistema, 22 tienen fondo blanco y solo 6 son navy. Un nav transparente con
   texto blanco desaparecia entero en esas 22. Opaco funciona en las dos. */
.nav{
  background:rgba(3,8,18,.94);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  left:0; right:0; width:auto; margin:0; padding:0;
  box-shadow:none; color:var(--crg-white);
  border-bottom:1px solid var(--crg-white-06);
}
.nav.scrolled{background:rgba(3,8,18,.94)}

/* Transparente solo donde hay un hero oscuro debajo que lo sostenga.
   Lo marca build_site.py con data-nav-hero en el <body>, desde site.json. */
body[data-nav-hero] .nav:not(.scrolled){
  background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom-color:transparent;
}

#announce{left:auto;right:auto;width:auto;margin:0}

/* El cajon movil: style.css lo ancla con `left`, el chrome con `right`.
   Sin left:auto se quedaba abierto y pegado a la izquierda en escritorio. */
#nav-mobile{
  left:auto; right:-100%; transform:none; margin:0;
  max-width:min(340px,100%);
  /* Cerrado lleva aria-hidden="true" y 15 enlaces dentro. Sin esto siguen en
     el orden de tabulacion: quien navega con teclado entra en un menu que no
     ve. visibility los saca; el retardo deja que termine el deslizamiento. */
  visibility:hidden;
  transition:right .35s var(--crg-transition), visibility 0s linear .35s;
}
#nav-mobile.open{
  left:auto; right:0; visibility:visible;
  transition:right .35s var(--crg-transition), visibility 0s;
}

/* Salto al contenido: existia en 2 de las 23 paginas. Ahora lo pone el partial
   de anuncios, que es lo primero del body, y solo se ve al tabular. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--crg-accent-2); color:#04101f;
  padding:.75rem 1.25rem; font-weight:700; text-decoration:none;
  border-radius:0 0 var(--crg-radius) 0;
}
.skip-link:focus{left:0}

.nav-overlay{left:0;right:0;top:0;bottom:0;display:none}
.nav-overlay.open{display:block}

.footer{
  background:var(--crg-navy-2); color:var(--crg-white-60);
  margin:0; border-top:1px solid var(--crg-white-06);
}
.footer a{color:inherit}

/* Texto oscuro sobre el cobalto, y tambien en los hijos. El boton es azul
   claro: con texto blanco da 2,9 a 1. La regla de .nav-cta ya lo ponia navy,
   pero un <span> o un <svg> dentro se llevaba el blanco heredado. */
.nav .nav-cta,.nav .nav-cta *,#nav-mobile .nav-cta,#nav-mobile .nav-cta *{color:#04101f}
.nav .nav-cta svg{stroke:currentColor}
/* Con .nav-cta a secas no ganaba: el reset .nav a{color:inherit} de mas
   arriba tiene (0,0,1,1) y le pasa por encima, asi que el boton heredaba el
   blanco del nav y quedaba en 3,27 a 1. Con .nav .nav-cta son (0,0,2,0). */

/* El breakpoint tiene que vivir AQUI. Estaba solo dentro de style.css y del
   inline de cada pagina, y como esta hoja carga la ultima y declara
   .nav-links{display:flex}, anulaba el @media que los escondia: a 956 px se
   veian los enlaces de escritorio Y el cajon movil a la vez. Si el chrome
   gana, tiene que ganar tambien en movil. 1024 px es el corte que ya usaba
   style.css. */
@media (max-width:1024px){
  .nav-links{display:none}
  .nav-hamburger{display:inline-flex}
}
@media (min-width:1025px){
  .nav-links{display:flex}
  .nav-hamburger{display:none}
  #nav-mobile,.nav-overlay{display:none}
}

/* UNICA regla de esta hoja que sale del chrome, y a proposito. Safari en iOS
   hace zoom al enfocar un campo cuya letra mide menos de 16 px, y despues la
   pagina se queda desplazada. Pasaba en los seis formularios del sitio
   (affiliates, contact, wholesale, faq, index y shop), cada uno con su propio
   tamano: .72rem, .875rem, .9rem, 0.9375rem. Se arregla una vez aqui en vez de
   seis veces por pagina, y solo por debajo del corte movil.
   Va con !important porque no es cuestion de orden sino de especificidad:
   `input` es (0,0,0,1) y pierde contra `.form-input{font-size:.9rem}`, que es
   (0,0,1,0), aunque esta hoja cargue despues. */
@media (max-width:768px){
  input:not([type=checkbox]):not([type=radio]),textarea,select{font-size:16px !important}
}

/* El pie tiene el mismo problema que el nav, y por la misma razon. La seccion
   FOOTER declara .footer-grid a 5 columnas sin @media; como esta hoja carga la
   ultima, anulaba los tres colapsos de style.css (1024, 768 y 480 px) y el pie
   se quedaba en cinco columnas en movil en las 22 paginas que lo llevan.
   Los cortes son los mismos que ya usaba style.css. */
/* Movimiento reducido. Solo 3 de las 23 respetaban la preferencia del sistema,
   y la cinta de anuncios se mueve en bucle infinito en todas. A quien lo tenga
   activado por mareo o migrana, una cinta que no para le arruina la pagina.
   Se para la cinta y se neutralizan las animaciones y los desplazamientos de
   entrada; el resto de la pagina se ve igual, solo que quieta. */
@media (prefers-reduced-motion: reduce){
  #announce .announce-track{animation:none !important; transform:none !important}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-animate],[data-reveal],[data-sube],[data-aos]{opacity:1 !important; transform:none !important}
}

@media (max-width:1024px){ .footer-grid{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:768px){  .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){  .footer-grid{grid-template-columns:1fr} }


/* ============================================================================
   DESPLEGABLES DEL NAV: fix 27-oct-2026
   Fallos que daban "a veces no se puede clicar, a veces se bugea":
   1. Entre el boton y el panel habia 8 px sin nada. Al cruzarlos el raton
      salia del <li>, el panel empezaba a cerrarse con pointer-events:none y
      el clic caia en el vacio. El ::before lo puentea.
   2. .abierto ponia transform:translateY(0) y pisaba el translateX(-50%):
      el panel saltaba medio ancho a un lado. Y no devolvia pointer-events,
      asi que se veia pero no se podia clicar.
   3. Ese .abierto se quedaba pegado tras un clic con el raton.
   ========================================================================== */
.nav-dropdown::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-links > li.abierto > .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s}
/* Sin raton (tablet, movil en horizontal): solo abre el toque, no el hover
   emulado ni el foco, que dejaban el panel a medias. */
@media (hover:none){
  .nav-links > li:hover > .nav-dropdown,
  .nav-links > li:focus-within > .nav-dropdown{
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateX(-50%) translateY(-6px)}
  .nav-links > li.abierto > .nav-dropdown{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0)}
}