/* ═══════════════════════════════════════════════════════════════════
   ROOT — Design tokens
   Tema: oscuro único. No hay variante light.
   Accent: #a78d04 (brand gold, AA-compliant con --ink y --bg)
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ──────────────────────────────────────────────────────────────
     COLOR
     ────────────────────────────────────────────────────────────── */
  --bg:             #141210;
  --bg-2:           #1E1B17;
  --ink:            #F2ECE1;
  --ink-dim:        #B8AC9C;
  --accent:         #a78d04;
  --accent-deep:    #806a03;
  --accent-ink:     #FFFFFF;
  --bold:           #FFFFFF;
  --line:           rgba(242,236,225,0.12);
  --line-2:         rgba(242,236,225,0.24);
  --ph-bg:          #251F1A;
  --card-bg:        #1E1B17;
  --nav-scroll-bg:  rgba(20,18,16,0.72);
  --card-shadow:    0 1px 2px rgba(0,0,0,0.3), 0 24px 60px -24px rgba(0,0,0,0.55);
  --overlay:        rgba(5,3,2,0.74);
  color-scheme: dark;


  /* ──────────────────────────────────────────────────────────────
     TIPOGRAFÍA — familias
     ────────────────────────────────────────────────────────────── */
  --font-serif: 'Cormorant Garamond', serif;    /* display, headings, editorial */
  --font-sans:  'Manrope', sans-serif;           /* UI, body, botones           */
  --font-mono:  'JetBrains Mono', monospace;     /* tags, timestamps, micro      */


  /* ──────────────────────────────────────────────────────────────
     TIPOGRAFÍA — pesos
     ────────────────────────────────────────────────────────────── */
  --fw-light:   300;   /* headings serif, body base      */
  --fw-regular: 400;   /* card h3, texto editorial        */
  --fw-medium:  500;   /* nav links, labels UI, kpi       */
  --fw-bold:    700;   /* botones, énfasis UI              */
  --fw-black:   900;   /* <strong>                         */


  /* ──────────────────────────────────────────────────────────────
     TIPOGRAFÍA — escala fluida (clamp: min | vw | max)
     Mapeo:
       display    → hero h1 split
       headline   → hero h2 full-bg
       h2         → todas las section-head h2
       h3         → card h3, modal h3, step h3
       h4         → faq pregunta
       lede       → about lede, review text
       body-lg    → section p, about p
       body       → modal lede/para, faq meta
       body-sm    → card bullets, btn label, gallery meta
       caption    → lang-toggle, kpi, price-suffix
       label      → footer col-label, modal h4
       micro      → hero-tag (JetBrains Mono)
       nano       → review timestamp, wa-time
     ────────────────────────────────────────────────────────────── */
  --fs-display:  clamp(44px, 6.2vw, 104px);
  --fs-headline: clamp(40px, 5.5vw,  92px);
  --fs-h2:       clamp(36px, 5.0vw,  72px);
  --fs-h3:       clamp(24px, 3.0vw,  46px);
  --fs-h4:       clamp(20px, 2.2vw,  28px);
  --fs-lede:     clamp(18px, 1.8vw,  24px);
  --fs-body-lg:  18px;
  --fs-body:     15px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-label:    12px;
  --fs-micro:    11px;
  --fs-nano:     10px;


  /* ──────────────────────────────────────────────────────────────
     TIPOGRAFÍA — interlineado
     ────────────────────────────────────────────────────────────── */
  --lh-flat:    0.98;   /* hero display h1/h2 pegado         */
  --lh-solid:   1.00;   /* section headings                  */
  --lh-snug:    1.20;   /* sub-headings, faq pregunta        */
  --lh-normal:  1.45;   /* lede, review text, wa burbuja     */
  --lh-relaxed: 1.60;   /* body, hero-sub, nav               */
  --lh-loose:   1.75;   /* párrafos largos, about p          */


  /* ──────────────────────────────────────────────────────────────
     TIPOGRAFÍA — tracking (letter-spacing)
     ────────────────────────────────────────────────────────────── */
  --ls-display:  -0.02em;   /* h1/h2 headings grandes     */
  --ls-heading:  -0.01em;   /* h3, precio                 */
  --ls-body:      0em;      /* cuerpo normal              */
  --ls-ui:        0.02em;   /* kpi, price-suffix, wa      */
  --ls-btn:       0.04em;   /* botones                    */
  --ls-label:     0.10em;   /* labels uppercase sans      */
  --ls-meta:      0.12em;   /* review meta, footer label  */
  --ls-mono:      0.16em;   /* hero-tag JetBrains Mono    */


  /* ──────────────────────────────────────────────────────────────
     ESPACIADO — escala en pasos de 4px
     Nomenclatura: --sp-{n} = n × 4px
     ────────────────────────────────────────────────────────────── */
--sp-1:   4px;    /*  4 */
--sp-2:   8px;    /*  8 — masonry gap, scrollbar border */
--sp-3:  12px;    /* 12 — padding btn base, nav gap     */
--sp-4:  16px;    /* 16 — nav top, padding base         */
--sp-5:  20px;    /* 20 — section-head mb small         */
--sp-6:  24px;    /* 24 — section px móvil, modal pad   */
--sp-7:  28px;    /* 28 — review card padding, mb modal */
--sp-8:  32px;    /* 32 — hero-right gap, about gap sm  */
--sp-9:  36px;    /* 36                               */
--sp-10: 40px;    /* 40 — section-head mb móvil         */
--sp-11: 44px;    /* 44                               */
--sp-12: 48px;    /* 48 — section px lg, about gap      */
--sp-13: 52px;    /* 52                               */
--sp-14: 56px;    /* 56 — section-head mb lg            */
--sp-15: 60px;    /* 60                               */
--sp-16: 64px;    /* 64                               */
--sp-17: 68px;    /* 68                               */
--sp-18: 72px;    /* 72 — footer py base                */
--sp-19: 76px;    /* 76                               */
--sp-20: 80px;    /* 80 — section py móvil              */
--sp-21: 84px;    /* 84                               */
--sp-22: 88px;    /* 88                               */
--sp-23: 92px;    /* 92                               */
--sp-24: 96px;    /* 96 — footer py lg                  */
--sp-25: 100px;   /* 100                              */
--sp-26: 104px;   /* 104                              */
--sp-27: 108px;   /* 108                              */
--sp-28: 112px;   /* 112                              */
--sp-29: 116px;   /* 116                              */
--sp-30: 120px;   /* 120 — section py lg                */


  /* ──────────────────────────────────────────────────────────────
     ESPACIADO — tokens de layout semánticos
     ────────────────────────────────────────────────────────────── */
  --section-px:    clamp(24px, 4vw,  48px);    /* padding horizontal secciones  */
  --section-py:    clamp(80px, 10vw, 120px);   /* padding vertical secciones    */
  --content-max:   1400px;                      /* max-width contenido principal */
  --nav-top:       16px;                        /* distancia nav al borde        */


  /* ──────────────────────────────────────────────────────────────
     BORDES — radios
     ────────────────────────────────────────────────────────────── */
  --radius-sm:   8px;    /* masonry tile, wa-popup-cta, gallery tile */
  --radius-md:   12px;   /* card, btn, reviews-score                  */
  --radius-lg:   16px;   /* modal                                     */
  --radius-xl:   24px;   /* reservado                                 */
  --radius-pill: 999px;  /* nav, lang-toggle, kpi, scrollbar thumb    */


  /* ──────────────────────────────────────────────────────────────
     TRANSICIONES — curvas y duraciones
     ────────────────────────────────────────────────────────────── */
  --ease-fast:   .2s ease;                          /* hovers, color toggles        */
  --ease-base:   .25s ease;                         /* botones, elementos UI        */
  --ease-theme:  .5s ease;                          /* cambio de tema global        */
  --ease-reveal: .9s ease;                          /* reveal scroll (opacity+Y)    */
  --ease-slide:  1s cubic-bezier(.77,0,.18,1);      /* hero slider track            */
  --ease-pop:    .35s cubic-bezier(.2,.9,.3,1);     /* modal/popup entrada          */
  --ease-fold:   .45s ease;                         /* faq accordion max-height     */

}