/* ==========================================================================
   tokens.css — Dr. Rodrigo Mata · Sistema visual FINAL (producción)
   Derivado de 07_SISTEMA_VISUAL/tokens.css del handoff. Limpio: sin CSS del
   runtime de Design, sólo variables realmente usadas por base/components.
   ========================================================================== */
:root {
  /* ---------- Marca ---------- */
  --c-teal:          #2C7A7B;   /* acción única */
  --c-teal-hover:    #1F5F60;
  --c-teal-300:      #82B0B1;   /* etiquetas/enlaces sobre negro, focus ring */
  --c-teal-100:      #B9D3D3;   /* subrayados, eyebrow sobre gris */
  --c-teal-050:      #EEF4F4;   /* planos de apoyo */
  --c-peach:         #E9B176;   /* estrellas Doctoralia, recorte estético */
  --c-gold-pending:  #C9A063;   /* callout "pendiente" (UI-06) */

  /* ---------- Superficies ---------- */
  --s-white:     #FFFFFF;
  --s-gray:      #F5F4F2;
  --s-cream:     #EFEDE9;
  --s-cream-2:   #F3F1EE;
  --s-off-white: #FBFAF9;
  --s-black:     #0B0B0B;
  --s-black-2:   #111111;
  --s-black-3:   #1C1C1C;
  --s-black-4:   #232323;
  --s-black-5:   #2A2A2A;
  --s-black-6:   #3A3A3A;
  --s-hero-gray: #545454;
  --g-hero-interno: linear-gradient(90deg,#3E3E3E 0%,#585858 55%,#4A4A4A 100%);
  --g-hero-fade:    linear-gradient(180deg,rgba(11,11,11,0) 55%,rgba(11,11,11,.88) 100%);
  --g-hero-home-x:  linear-gradient(90deg,rgba(18,18,18,.5) 0%,rgba(18,18,18,.34) 38%,rgba(18,18,18,.06) 62%,rgba(18,18,18,0) 100%);
  --g-hero-home-y:  linear-gradient(180deg,rgba(11,11,11,0) 55%,rgba(11,11,11,.9) 100%);

  /* ---------- Texto ---------- */
  --t-ink:          #0B0B0B;
  --t-strong:       #3A3A3A;
  --t-body:         #6E6E6E;
  --t-muted:        #707070;   /* T-09A.1: 4.95:1 sobre blanco, 4.51:1 sobre #F5F4F2 (antes #8A8A8A, 3.45:1) */
  --t-faint:        #707070;   /* T-09A.1: 4.95:1 sobre blanco (antes #A1A1A1, 2.58:1) */
  --t-num:          #767676;   /* T-09A.1: numerales decorativos 4.54:1 sobre blanco (antes #B9B8B5, 1.98:1) */
  --t-nav:          #4C4C4C;
  --t-on-dark:      #F2F1EF;
  --t-on-dark-2:    #DADAD8;
  --t-on-dark-3:    #C9C7C3;
  --t-on-dark-muted:#9A9A9A;
  --t-on-dark-faint:#B9B8B5;

  /* ---------- Bordes ---------- */
  --b-200:    #E4E2DF;
  --b-150:    #EEECE8;   /* filete del topbar del header */
  --b-300:    #CFCDC9;
  --b-250:    #DDD9D3;
  --b-dark:   #232323;
  --b-dark-2: #2A2A2A;
  --b-dark-3: #1C1C1C;

  /* ---------- Tipografía ---------- */
  --f-sans:  Montserrat, Arial, sans-serif;
  --f-serif: 'Playfair Display', Georgia, serif;
  --fs-h1:      clamp(46px, 5.3vw, 74px);
  --fs-h1-int:  clamp(38px, 4.4vw, 60px);
  --fs-h2:      clamp(30px, 3.2vw, 44px);
  --fs-h2-home: clamp(32px, 3.6vw, 52px);
  --fs-h3:      30px;
  --fs-h4:      18px;
  --fs-lead:    27px;
  --fs-quote:   29px;
  --fs-body:    16.5px;
  --fs-body-s:  15px;
  --fs-small:   13.5px;
  --fs-micro:   12.5px;
  --fs-label:   11.5px;
  --fs-label-s: 10.5px;
  --fs-btn:     12px;
  --fs-nav:     14px;
  --lh-tight:   .96;
  --lh-heading: 1.1;
  --lh-h3:      1.2;
  --lh-lead:    1.35;
  --lh-body:    1.8;
  --lh-small:   1.7;
  --ls-h1:     -.045em;
  --ls-h2:     -.035em;
  --ls-h3:     -.03em;
  --ls-h4:     -.02em;
  --ls-label:   .2em;
  --ls-label-s: .18em;
  --ls-btn:     .14em;
  --ls-nav:    -.01em;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---------- Layout ---------- */
  --container:  1280px;
  --pad-x:      clamp(22px, 4vw, 48px);
  --gap-col:    clamp(48px, 7vw, 96px);
  --gap-col-l:  clamp(48px, 7vw, 112px);
  --gap-col-s:  clamp(32px, 6vw, 96px);
  --measure:    32em;
  --measure-legal: 42em;
  --section-y:   140px;
  --section-y-s: 120px;
  --section-y-m: 64px;
  --header-h:    84px;
  --header-h-m:  64px;
  --mobile-bar-h: 84px;   /* alto reservado bajo la barra fija móvil (barra 50 + 12 + 18 + safe-area) */
  --min-col-2: 380px;
  --min-col-3: 300px;
  --min-col-4: 230px;

  /* ---------- Espaciado ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px;
  --sp-7: 44px; --sp-8: 64px; --sp-9: 88px; --sp-10: 120px;

  /* ---------- Radios / bordes / sombras ---------- */
  --r-2:    2px;
  --r-full: 50%;
  --bw:        1px;
  --bw-accent: 2px;
  --bw-bar:    3px;
  --sh-portrait:      drop-shadow(0 30px 50px rgba(0,0,0,.45));
  --sh-portrait-soft: drop-shadow(0 18px 30px rgba(11,11,11,.18));
  --sh-card:          0 60px 90px -60px rgba(0,0,0,.6);
  --sh-card-light:    0 40px 80px -60px rgba(11,11,11,.35);
  --sh-circle:        0 30px 60px -40px rgba(11,11,11,.4);
  --sh-header:        0 10px 30px -22px rgba(11,11,11,.35);
  --sh-modal:         0 40px 90px -40px rgba(0,0,0,.6);

  /* ---------- Movimiento ---------- */
  --ease:             cubic-bezier(.22,.61,.36,1);
  --d-lines:          3.2s;
  --d-lines-home:     3.5s;
  --d-lines-stagger:  .3s;
  --d-reveal:         .8s;
  --reveal-offset:    18px;
  --d-hover:          180ms;
  --d-nav-underline:  320ms;
  --d-header:         350ms;
  --d-timeline:       .4s;
  --header-compact-at: 110;   /* scrollY, leído por site.js */
  --header-expand-at:  40;

  /* ---------- Capas ---------- */
  --z-header: 60;
  --z-dialog: 120;
  --z-panel:  200;
  --z-mobile-bar: 90;
}

/* Breakpoints de referencia (no usables como variables en @media):
   --bp-header 1100px · --bp-tablet 900px · --bp-mobile 640px */

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-lines: 0s; --d-lines-home: 0s; --d-reveal: 0s; --d-hover: 0s;
    --d-nav-underline: 0s; --d-header: 0s; --d-timeline: 0s; --reveal-offset: 0px;
  }
}