/* ==========================================================================
   PAMM CLEAN · base.css
   Tokens de diseño, reset, tipografía y utilidades.
   Metodología: mobile-first. Todas las media queries usan min-width.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color · superficies */
  --c-bg:            #0A1826;
  --c-surface:       #0F2438;
  --c-surface-alt:   #0C1E30;

  /* Color · texto */
  --c-text:          #F4F8FB;
  --c-text-soft:     #C6D4E0;
  --c-text-muted:    #8CA3B8;

  /* Color · marca */
  --c-brand:         #6EB741;
  --c-brand-soft:    #A8D98A;
  --c-navy:          #18467A;

  /* Verde profundo, solo para superficies que llevan texto blanco encima.
     El verde de marca da 2.47:1 contra el blanco: reprueba WCAG AA (mín. 4.5:1).
     Este da 4.72:1. Para volver al verde brillante, iguala este token a
     --c-brand, sabiendo que el texto de botones y banner dejará de ser legible
     para muchas personas. */
  --c-brand-deep:    #4D802E;

  /* Color · estados */
  --c-error:         #D65A5A;
  --c-error-text:    #F4C9C9;

  /* Bordes translúcidos */
  --c-line:          rgb(140 163 184 / 0.12);
  --c-line-strong:   rgb(140 163 184 / 0.24);

  /* Degradado de marca · decorativo (aros, filetes, barras). Nunca lleva texto. */
  --grad-brand:      linear-gradient(90deg, var(--c-navy) 0%, var(--c-brand) 100%);

  /* Degradado de marca · para superficies con texto blanco (botones, banner). */
  --grad-brand-cta:  linear-gradient(90deg, var(--c-navy) 0%, var(--c-brand-deep) 100%);

  /* Tipografía */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Serif", Georgia, serif;

  /* Escala fluida: se adapta sola entre móvil y escritorio */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 0.9375rem;  /* 15px */
  --fs-md:   1.0625rem;  /* 17px */
  --fs-lg:   clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --fs-h3:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-h2:   clamp(1.875rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-h2-sm:clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  --fs-h1:   clamp(2.375rem, 1.6rem + 4vw, 5.375rem);

  /* Espaciado */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.75rem;
  --sp-12: 3.5rem;

  /* Ritmo vertical de las secciones */
  --sp-section: clamp(4.5rem, 10vw, 8.75rem);
  --sp-gutter:  clamp(1.25rem, 5vw, 3rem);

  /* Radios */
  --r-sm:   0.75rem;
  --r-md:   1rem;
  --r-lg:   1.5rem;
  --r-xl:   1.625rem;
  --r-pill: 999px;

  /* Sombras */
  --sh-card: 0 24px 60px rgb(0 0 0 / 0.4);
  --sh-nav:  0 12px 34px rgb(0 0 0 / 0.4);
  --sh-cta:  0 12px 30px rgb(110 183 65 / 0.28);

  /* Curvas y duraciones */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast:    0.2s;
  --t-base:    0.3s;
  --t-slow:    0.5s;

  /* Layout */
  --w-content: 75rem;   /* 1200px */
  --w-wide:    77.5rem; /* 1240px */
  --w-narrow:  68.75rem;/* 1100px */

  /* Alto real del banner promocional; JS lo mantiene sincronizado. */
  --promo-h: 0px;

  /* Fondo decorativo del banner promocional. El texto SIEMPRE es HTML real.
     Para usar tu diseño, coloca las imágenes en src/img/promo/, ejecuta
     `npm run images` y descomenta las reglas de `.promo` en components.css. */
  --promo-bg: var(--grad-brand-cta);

  --z-scene:   1;
  --z-nav:     800;
  --z-fab:     900;
  --z-preload: 9999;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* Compensa la barra fija al saltar a un ancla */
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Bloquea el scroll cuando el menú móvil está abierto */
body.is-locked { overflow: hidden; }

img,
video,
svg {
  display: block;
  max-width: 100%;
}

img,
video { height: auto; }

/* `<picture>` es solo un contenedor de decisión: no debe crear una caja propia,
   o rompería el `object-fit` y el posicionamiento del `<img>` que envuelve. */
picture { display: contents; }

input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; }

ul,
ol {
  list-style: none;
  padding: 0;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: var(--c-brand-soft);
  text-decoration: none;
  transition: color var(--t-base) ease;
}

a:hover { color: var(--c-brand); }

::selection {
  background: var(--c-brand);
  color: var(--c-bg);
}

:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Utilidades
   -------------------------------------------------------------------------- */
.accent {
  color: var(--c-brand);
  font-weight: 700;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: calc(var(--z-preload) + 1);
  background: var(--c-brand);
  color: var(--c-bg);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--t-fast) ease;
}

.skip-link:focus-visible {
  top: 0;
  color: var(--c-bg);
}

/* --------------------------------------------------------------------------
   4. Animaciones compartidas
   -------------------------------------------------------------------------- */
@keyframes dust-drift {
  0%   { transform: translate(0, 0);          opacity: 0; }
  20%  {                                      opacity: 0.5; }
  100% { transform: translate(40px, -120px);  opacity: 0; }
}

@keyframes scroll-line {
  from { transform: translateY(-100%); }
  to   { transform: translateY(260%); }
}

@keyframes soft-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

@keyframes live-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

@keyframes bar-grow {
  from { width: 6%; }
  to   { width: 100%; }
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* --------------------------------------------------------------------------
   5. Movimiento reducido
   Respeta la preferencia del sistema operativo del visitante.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}