@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url('../fonts/fraunces-variable.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-variable.woff2') format('woff2')}

:root {
  /* MARCA — títulos y estructura. Nunca en botones. */
  --brand-900: #1E3D33;
  --brand-700: #2F5D50;
  --brand-500: #4E8574;
  --brand-100: #DCE8E3;
  --brand-050: #EFF5F2;

  /* CTA — EXCLUSIVO de botones que llevan al checkout */
  --cta:        #0B7A43;
  --cta-hover:  #0A6E3D;
  --cta-active: #085C33;
  --cta-shadow: #085C33;
  --cta-text:   #FFFFFF;

  /* NEUTROS */
  --surface:       #FDFBF7;
  --surface-alt:   #F5F1EA;
  --surface-card:  #FFFFFF;
  --ink:           #1F2A26;  /* 15.9:1 sobre surface */
  --ink-soft:      #4A5852;  /* 6.9:1 */
  --ink-muted:     #6B7873;  /* 4.6:1 — el más claro permitido */
  --border:        #E3DED4;
  --border-strong: #CFC7B8;

  /* ESTADO */
  --success:    #2F5D50;
  --success-bg: #EFF5F2;
  --urgent:     #B45309;  /* solo bloque de precio y estrellas */
  --urgent-bg:  #FFF8ED;
  --error:      #B42318;
  --error-bg:   #FEF3F2;

  /* TIPOGRAFÍA — Fraunces/Inter self-hosted en fonts/ (sin dependencia externa) */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-h1: 2.125rem;  --fs-h2: 1.625rem;  --fs-h3: 1.25rem;
  --fs-lead: 1.0625rem; --fs-body: 1rem;  --fs-small: .875rem;
  --fs-eyebrow: .75rem; --fs-price: 3rem;

  --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.65;
  --ls-tight: -0.02em; --ls-eyebrow: 0.12em;
  --measure: 34rem;

  /* ESPACIADO — escala 4px. Usar SOLO estos valores. */
  --s-1:4px;  --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-6:24px; --s-8:32px;  --s-12:48px; --s-16:64px; --s-24:96px;
  --pad-x: 20px;
  --section-y: 64px;

  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-full:999px;
  --shadow-card: 0 1px 2px rgba(31,42,38,.04), 0 8px 24px -8px rgba(31,42,38,.10);
  --shadow-cta:  0 6px 0 -1px var(--cta-shadow), 0 10px 24px -6px rgba(11,122,67,.4);
}

@media (min-width: 768px) {
  :root {
    --fs-h1: 3.25rem; --fs-h2: 2.25rem; --fs-h3: 1.5rem;
    --fs-lead: 1.25rem; --fs-body: 1.0625rem; --fs-price: 3.5rem;
    --pad-x: 32px; --section-y: 96px;
  }
}