/* ============================================================
   PROMO BAGS — Sistema de diseño v1 (Bloque A)
   Fuente de verdad visual: DESIGN.md v2.0 (Parte C) + CONTEXTO_NEGOCIO.md
   Paleta exacta del logo · tipografía anti-slop (cero Inter) · mobile-first
   Extiende y reemplaza a tokens.css (viejo) — este es el sistema completo.
   ============================================================ */

:root {
  /* ---- COLOR (C2 · exactos del logo) ---- */
  --verde-marca:     #7DC05D;  /* verde principal · lo eco · vida */
  --verde-vibrante:  #A2ED55;  /* acento/CTA — SOLO en lo que convierte (Von Restorff) */
  --carbon:          #2A3335;  /* fondo base premium */
  --carbon-profundo: #1E2527;  /* profundidad, secciones más oscuras */
  --azul-confianza:  #6EB0C8;  /* calma · secciones de confianza */
  --verde-bosque:    #204730;  /* sombras, degradados, contraste */
  --blanco:          #FFFFFF;
  --crema:           #F4F1E8;  /* calidez · baja la ansiedad · alterna con carbón */

  /* ---- SUPERFICIES / TEXTO derivados ---- */
  --texto:            var(--crema);
  --texto-tenue:      rgba(244,241,232,.74);   /* AA sobre carbón */
  --texto-suave:      rgba(244,241,232,.56);
  --linea:            rgba(244,241,232,.11);
  --panel:            rgba(244,241,232,.045);   /* tarjeta translúcida sobre oscuro */
  --panel-borde:      rgba(244,241,232,.09);

  /* texto sobre crema (secciones claras) */
  --tinta:            #23302B;                  /* carbón verdoso para texto sobre crema */
  --tinta-tenue:      rgba(35,48,43,.72);
  --linea-crema:      rgba(35,48,43,.12);

  /* ---- TIPOGRAFÍA (C3) — Bricolage · Satoshi · Fraunces. CERO Inter ---- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Satoshi', system-ui, sans-serif;
  --font-accent:  'Fraunces', Georgia, serif;

  /* Escala de tipo (saltos 3x, no tímidos — C3). Fluida clamp(min, pref, max) */
  --t-eyebrow: .78rem;
  --t-body:    clamp(1rem, .95rem + .35vw, 1.14rem);
  --t-lead:    clamp(1.12rem, 1.02rem + .6vw, 1.35rem);
  --t-h3:      clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  --t-h2:      clamp(2rem, 1.4rem + 3vw, 3.4rem);
  --t-h1:      clamp(2.5rem, 1.9rem + 3.2vw, 4.2rem);   /* P2-2.2: bajado (5.4rem era excesivo en desktop) */

  /* ---- ESPACIADO (ritmo consistente) ---- */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;   --sp-10: 8rem;
  --sección-y: clamp(4rem, 3rem + 6vw, 7.5rem);        /* padding vertical de sección */

  /* ---- RADIOS / SOMBRAS / GLOW (C5) ---- */
  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;
  --sombra-suave: 0 24px 60px rgba(0,0,0,.42);
  --sombra-card:  0 12px 34px rgba(0,0,0,.28);
  --glow-verde:   0 18px 50px rgba(162,237,85,.28);

  /* ---- MOVIMIENTO (C6 · ease-out con inercia, natural) ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-suave: cubic-bezier(.4, 0, .2, 1);
  --dur: .5s;

  /* ---- LAYOUT ---- */
  --maxw: 1240px;
  --gutter: clamp(1.15rem, .6rem + 2.4vw, 2.75rem);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;           /* nav sticky no tapa las anclas */
}
body {
  margin: 0;
  background: var(--carbon);
  color: var(--texto);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--verde-vibrante); color: var(--verde-bosque); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 800; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p  { margin: 0; }

/* Acento editorial cálido (C3) — Fraunces, solo en momentos especiales */
.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--verde-vibrante);
  letter-spacing: -.01em;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section  { padding-block: var(--sección-y); }
.section--crema { background: var(--crema); color: var(--tinta); }
.section--profundo { background: var(--carbon-profundo); }

/* ============================================================
   COMPONENTES REUTILIZABLES
   ============================================================ */

/* Eyebrow (etiqueta pequeña sobre el titular) */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--t-eyebrow); letter-spacing: .04em; text-transform: uppercase;
  color: var(--verde-marca);
}
.eyebrow i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde-vibrante); box-shadow: 0 0 12px var(--verde-vibrante);
}

/* CTA primario — verde vibrante SOLO aquí (Von Restorff). Ley de Fitts: grande */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--verde-vibrante); color: var(--verde-bosque);
  font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em;
  padding: .95rem 1.5rem; border-radius: var(--r-pill); border: 0;
  box-shadow: var(--glow-verde); cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 22px 60px rgba(162,237,85,.42); filter: saturate(1.06); }
.cta:active { transform: translateY(0) scale(.99); }
.cta__wa { width: 1.2em; height: 1.2em; flex: none; }
.cta--lg { font-size: 1.08rem; padding: 1.12rem 1.9rem; }
.cta--sm { padding: .6rem 1.05rem; font-size: .95rem; box-shadow: none; }

/* Secundario "ghost" (no compite con el CTA — Ley de Hick) */
.ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 1.35rem; border-radius: var(--r-pill);
  color: var(--texto); font-weight: 600;
  border: 1px solid var(--panel-borde); background: var(--panel);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ghost:hover { border-color: rgba(244,241,232,.28); background: rgba(244,241,232,.08); transform: translateY(-2px); }

/* Chip de confianza (con palomita) */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .92rem; color: var(--texto-tenue); font-weight: 500;
}
.chip svg { width: 1.05em; height: 1.05em; color: var(--verde-marca); flex: none; }

/* ============================================================
   REVEAL ON SCROLL (C6) — degrada a visible SIN JS
   El JS añade .js al <html>; sin JS todo se ve normal (no depende de JS para leerse).
   ============================================================ */
.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.js .reveal.in { opacity: 1; transform: none; }

/* Accesibilidad: respeta reduce-motion (C6) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Foco visible (accesibilidad — PROPUESTA punto 13) */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--verde-vibrante); outline-offset: 3px; border-radius: 6px;
}