/* ============================================================================
   base.css — Reset + variables + tipografía
   Academia Q.F. - SERUMS 2026 Landing
   ============================================================================ */

/* ---- Reset mínimo (no modern-reset pesado) ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
html:focus-within { scroll-behavior: smooth; }
body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; }
img, picture, svg, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }
button { background: none; border: 0; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---- Variables (paleta + tipografía + espacios) ---- */
:root {
  /* Paleta Academia Q.F. */
  --c-bg:         #0B1E3F;  /* azul marino */
  --c-bg-2:       #0f2750;  /* azul marino 2 */
  --c-bg-3:       #142e5f;  /* azul marino 3 */
  --c-surface:    #16325a;  /* superficie tarjetas */
  --c-gold:       #E8C86A;  /* dorado Academia */
  --c-gold-2:     #f4d882;
  --c-gold-dark:  #b88f2f;
  --c-white:      #FFFFFF;
  --c-gray-1:     #e6e8ef;
  --c-gray-2:     #a3a8b8;
  --c-gray-3:     #6b7085;
  --c-red:        #E63946;  /* acento urgencia */
  --c-green:      #25D366;  /* WhatsApp */
  --c-blue-acc:   #4C9BE6;  /* enlaces/acento */

  /* Tipografía */
  --f-title: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-body:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala tipográfica (mobile-first) */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.375rem;   /* 22px */
  --fs-xl:   1.75rem;    /* 28px */
  --fs-2xl:  2.25rem;    /* 36px */
  --fs-3xl:  3rem;       /* 48px */

  /* Espacios */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Radios */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 9999px;

  /* Sombras */
  --sh-1: 0 2px 8px rgba(0,0,0,.15);
  --sh-2: 0 6px 24px rgba(0,0,0,.25);
  --sh-3: 0 12px 40px rgba(0,0,0,.35);
  --sh-gold: 0 0 32px rgba(232,200,106,.35);

  /* Transiciones */
  --t-fast: 120ms ease;
  --t-mid: 280ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 520ms cubic-bezier(.2,.7,.2,1);

  /* Contenedores */
  --container-max: 1200px;

  /* Z-index scale */
  --z-sticky: 10;
  --z-float: 20;
  --z-modal: 30;
}

@media (min-width: 768px) {
  :root {
    --fs-xl:  2rem;
    --fs-2xl: 2.75rem;
    --fs-3xl: 3.75rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --fs-2xl: 3.25rem;
    --fs-3xl: 4.25rem;
  }
}

/* ---- Tipografía base ---- */
html { font-size: 16px; scroll-padding-top: 80px; }
body {
  font-family: var(--f-body);
  font-size: var(--fs-base);
  color: var(--c-white);
  background: var(--c-bg);
  font-weight: 400;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--f-title);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-white);
}
h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p  { font-size: var(--fs-base); color: var(--c-gray-1); line-height: 1.6; }
strong { color: var(--c-white); font-weight: 700; }
em { color: var(--c-gold); font-style: normal; font-weight: 600; }

/* Selección de texto */
::selection { background: var(--c-gold); color: var(--c-bg); }

/* Accesibilidad: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html:focus-within { scroll-behavior: auto; }
}

/* ---- Modos LITE/FULL: controlan visibilidad y animaciones ---- */
html[data-mode="lite"] .only-full { display: none !important; }
html[data-mode="full"] .only-lite { display: none !important; }
html[data-mode="lite"] .fade-in { opacity: 1 !important; transform: none !important; }