/* ==========================================================================
   SAVOR & MINT — GUÍA TIPOGRÁFICA (headings + tiers de texto)
   Extraída de design/index.html. Es la referencia para cualquier página
   nueva: se puede linkear directo (<link rel="stylesheet" ...>) o copiar
   los bloques al <style> de la página, pero los valores salen de acá.

   FUENTES — cargar en el <head> antes de estos estilos:

     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://cdn.fontshare.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Zalando+Sans:wght@400;500;600&display=swap" rel="stylesheet">
     <link href="https://api.fontshare.com/v2/css?f%5B%5D=epilogue@700,800,900&display=swap" rel="stylesheet">

   Dos tiers:
     · Display  — Epilogue 700 (títulos de sección y piezas display)
     · Texto/UI — Zalando Sans 400/500 (body, cards, labels, botones)
   ========================================================================== */

:root{
  --display:"Epilogue", "Zalando Sans", system-ui, sans-serif;
  --display-weight:700;
}

/* ============ BASE (body) ============ */
body{
  font-family:"Zalando Sans", system-ui, sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ============ HEADINGS ============
   Una sola medida por nivel, para toda la página. NUNCA pisar el font-size
   de un heading dentro de una regla de sección — se cambia acá o los
   niveles se desfasan entre páginas.

   Roles en la home (usar el mismo criterio en páginas nuevas):
     h1  hero                    clamp(44px, 5.35vw, 74px)
     h2  títulos de sección XL   clamp(36px, 4.4vw,  64px)   Method / Pricing / Testimonials
     h3  títulos de sección M    clamp(28px, 3.2vw,  42px)   Manifesto / Services / FAQ
     h4  cierre / CTA final      clamp(40px, 5.6vw,  84px)   (más grande que h2: es pieza display)
     h5  títulos de card         28px fijo                   phases, plans, modal

   Los clamp ya resuelven mobile: no hay overrides de tamaño en @media. */

h1,h2,h3,h4,h5{
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.08;
}

/* Tier display: h1–h4 pasan a Epilogue. h5 (cards) queda en Zalando Sans. */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:var(--display-weight);
  letter-spacing:-0.01em;
}

h1{font-size:clamp(44px,5.35vw,74px);letter-spacing:-0.025em;}  /* en la home: .hero h1, max-width:27ch */
h2{font-size:clamp(36px,4.4vw,64px);}
h3{font-size:clamp(28px,3.2vw,42px);}
h4{font-size:clamp(40px,5.6vw,84px);}
h5{font-size:28px;}

/* ============ EYEBROW ============
   Label chiquito arriba de un título de sección. */
.eyebrow{
  display:block;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:28px;
  /* color: var(--muted) en la página que lo use */
}

/* ============ PIEZAS DISPLAY FUERA DE LA ESCALA ============
   Casos especiales de la home que también usan el tier display.
   Se documentan para replicar el criterio, no hace falta copiarlos
   si la página no tiene el componente. */

/* Palabras gigantes de la tira de servicios (.svc .word) */
.display-xxl{
  font-family:var(--display);font-weight:var(--display-weight);
  font-size:clamp(64px,9vw,132px);
  line-height:1;
  letter-spacing:-.04em;
  white-space:nowrap;
}

/* Cifra display mediana: precio de plan (.plan .price) y título de plan
   (.plan h5 mientras el precio está oculto) */
.display-figure{
  font-family:var(--display);font-weight:var(--display-weight);
  font-size:44px;
  line-height:1;
  letter-spacing:-.01em;
}

/* Número de estadística (.stat b) — tier texto, no display */
.stat-figure{
  font-size:44px;
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1;
}

/* Cita de testimonio (.testi blockquote) — tier texto, grande y aireado */
.quote{
  font-size:clamp(20px,1.9vw,28px);
  line-height:1.42;
  letter-spacing:-.01em;
  max-width:42ch;
}

/* ============ TIER TEXTO — referencia rápida ============
   Body / párrafo de sección ... 15–16px, 400, line-height 1.5, color var(--muted), max-width 50–62ch
   Lead del hero ................ 18px, color var(--muted), max-width 50ch
   Botones (.btn) ............... 15px, 500, letter-spacing 0
   Pregunta FAQ / p final ....... 17px, 500 (FAQ) / 400 (p del cierre)
   Metadata / captions .......... 13–14px, color var(--muted)
   Números de fase (.num) ....... 12px, 500, uppercase, letter-spacing .14em
   Placeholder (.ph) ............ 11px, uppercase, letter-spacing .1em
   ========================================================================== */
