/* Lex Raíz — design tokens v2
   Paleta medida por muestreo de píxeles sobre la referencia del estudio (src/ref-v2.png).
   Reemplaza la paleta verde del brand kit por indicación del estudio. Ver BRAND.md.

   Este archivo es la fuente de verdad del sistema de diseño.
   No inventar colores: sólo se documentan valores que ya se usan en el sitio.
   Los nombres existentes se mantienen; lo nuevo es aditivo. */

:root{
  /* ---------- Paleta de marca ---------- */
  --lr-navy:        #14202D; /* azul marino profundo — paneles navy de la referencia */
  --lr-navy-noche:  #08131C; /* sombras / fondos más profundos */
  --lr-negro:       #05090C; /* negro de marca (footer, texto máximo) */
  --lr-oro:         #A09382; /* latón — comillas, filetes, marco del monograma */
  --lr-oro-claro:   #B5ACA4; /* latón sobre navy en textos pequeños (7.4:1) */
  --lr-oro-oscuro:  #746552; /* latón para texto sobre marfil/blanco (AA 4.8:1) */
  --lr-marfil:      #EFECE5; /* bloques claros de la referencia */
  --lr-blanco:      #FFFFFF;
  --lr-gris:        #5A5A5A; /* texto secundario sobre claro (5.9:1) */
  --lr-linea-clara: #D6D0C4; /* divisores sobre marfil */
  --lr-linea-navy:  rgb(181 172 164 / .28); /* divisores sobre navy = oro-claro al 28% */

  /* Latón de filete sobre navy (components.css). Derivado de --lr-oro; 9.0:1 sobre navy.
     Cercano a --lr-oro-claro (#B5ACA4): no unificar, el brillo se usa en el dash del hero. */
  --lr-oro-brillo:  #CDBB98;

  /* ---------- Alfas de la paleta (valores reales ya usados) ---------- */
  /* Navy #14202D = rgb(20 32 45) */
  --lr-navy-94:     rgb(20 32 45 / .94);  /* header compacto al hacer scroll */
  --lr-navy-97:     rgb(20 32 45 / .97);  /* header de subpágina / desktop */

  /* Oro #A09382 = rgb(160 147 130) */
  --lr-oro-22:      rgb(160 147 130 / .22); /* fondo de placeholder */
  --lr-oro-35:      rgb(160 147 130 / .35); /* borde header scrolled, principios */
  --lr-oro-45:      rgb(160 147 130 / .45); /* marco de foto de subpágina */
  --lr-oro-60:      rgb(160 147 130 / .6);  /* filete de foto del hero desktop */
  --lr-oro-70:      rgb(160 147 130 / .7);  /* contorno dashed de placeholder */

  /* Oro claro #B5ACA4 = rgb(181 172 164) */
  --lr-oro-claro-55: rgb(181 172 164 / .55); /* subrayado de inputs sobre navy */

  /* Oro brillo #CDBB98 = rgb(205 187 152) */
  --lr-oro-brillo-25: rgb(205 187 152 / .25); /* divisor de fundadores (móvil) */
  --lr-oro-brillo-45: rgb(205 187 152 / .45); /* filete del lema en el hero */

  /* Marfil #EFECE5 = rgb(239 236 229) */
  --lr-marfil-86:   rgb(239 236 229 / .86); /* lead del hero */
  --lr-marfil-82:   rgb(239 236 229 / .82); /* texto secundario USS seleccionado */
  --lr-marfil-80:   rgb(239 236 229 / .8);  /* checkbox del formulario */
  --lr-marfil-78:   rgb(239 236 229 / .78); /* lead sobre navy, pasos del método */
  --lr-marfil-72:   rgb(239 236 229 / .72); /* disclaimer sobre navy */
  --lr-marfil-62:   rgb(239 236 229 / .62); /* enlace Portal en nav desktop */
  --lr-marfil-60:   rgb(239 236 229 / .6);  /* legal del footer, .note */

  /* Blanco */
  --lr-blanco-55:   rgb(255 255 255 / .55); /* hover de .area en desktop */

  /* ---------- Cercanos (no idénticos a la paleta; no unificar) ---------- */
  /* Fundadores móvil (v11): navy #131f2e vs --lr-navy #14202D; marfil #f3efe6 vs --lr-marfil #EFECE5 */
  --lr-navy-panel:  #131f2e;
  --lr-navy-mid:    #1b2a3d; /* gradiente de foto de fundadores */
  --lr-navy-deep:   #0f1824; /* gradiente de foto de fundadores */
  --lr-marfil-warm: #f3efe6;
  --lr-marfil-warm-75: rgb(243 239 230 / .75);

  /* ---------- Co-marca Clínica USS (sólo body.page-uss) ---------- */
  --uss-navy:       #0f2b41;
  --uss-oro:        #ceb37c;
  --uss-blue:       #0f487a;
  --uss-navy-2:     #1b3860;
  --uss-red:        #c8102e;
  --uss-oro-72:     rgb(206 179 124 / .72); /* filete vertical de co-marca */

  /* ---------- Roles ---------- */
  --color-bg: var(--lr-marfil);
  --color-surface: var(--lr-blanco);
  --color-text: var(--lr-navy);
  --color-text-muted: var(--lr-gris);
  --color-dark: var(--lr-navy);
  --color-on-dark: var(--lr-marfil);
  --color-on-dark-muted: var(--lr-marfil-78);
  --color-accent: var(--lr-oro);
  --color-accent-on-dark: var(--lr-oro-claro);
  --color-accent-text: var(--lr-oro-oscuro);
  --color-border: var(--lr-linea-clara);
  --color-focus: var(--lr-oro);
  --color-error: var(--lr-oro-oscuro); /* sin rojo en la marca; el error es latón oscuro */

  /* ---------- Tipografía ---------- */
  --font-caps: "Cinzel", "Trajan Pro", Georgia, serif;            /* versalitas: marca, eyebrows, lema */
  --font-display: "Cormorant Garamond", Garamond, Georgia, serif; /* titulares y citas */
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;      /* texto corrido */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* sólo snippets del sistema */

  --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem;
  --fs-lg: clamp(1.35rem, 1.2rem + .6vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-3xl: clamp(2.75rem, 1.8rem + 4.2vw, 5.5rem);
  /* Tamaños reales fuera de la escala (no unificar con --fs-xs: no son idénticos) */
  --fs-micro: .65rem;   /* hero__cue, hero__meta */
  --fs-kicker: .68rem;  /* page-kicker, more-link, lema estrecho */
  --fs-badge: .66rem;   /* page-badge, culture */
  --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.7;
  --tracking-caps: .28em;   /* LEX RAIZ, lema */
  --tracking-label: .2em;   /* etiquetas */
  --tracking-kicker: .18em; /* page-kicker */
  --tracking-nav: .12em;    /* nav desktop ≥1024px */

  /* ---------- Espaciado y retícula ---------- */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;
  --space-6:2rem;--space-7:3rem;--space-8:4.5rem;--space-9:7rem;
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --rule: 1px;            /* filetes finos */
  --dash: 36px;           /* guion dorado sobre titulares */
  --dash-hero: 56px;      /* guion del hero; más largo que --dash */
  --radius: 0;            /* esquinas rectas, sin excepción */
  --header-h: 84px;
  --header-h-compact: 64px; /* header is-scrolled */
  --touch: 44px;          /* mínimo táctil (summary, toggle, inputs) */
  --cols: 12;
  --col-gap: clamp(1.5rem, 2vw, 2.5rem);
  --rhythm: clamp(7rem, 9vw, 10rem); /* padding de .block en la retícula ≥1041px */

  /* ---------- Sombras ----------
     La marca no usa sombras proyectadas ni radios. Lo que existe:
     blur del header al hacer scroll, filete interior USS, y el resto `none`. */
  --shadow-none: none;
  --shadow-uss: inset 0 -2px 0 var(--uss-red); /* co-marca clínica, no núcleo */
  --blur-header: 8px;

  /* ---------- Movimiento ----------
     --ease: botones (base.css). --ease-out: el resto del sitio (components.css).
     Cercanos, no idénticos: no unificar. */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-instant: .2s;   /* foco, dropdown, tap de área */
  --dur-fast: .25s;     /* hover de .btn */
  --dur-short: .3s;     /* color, opacidad */
  --dur-mid: .35s;      /* flecha FAQ, color gold */
  --dur-base: .4s;      /* header, subrayado de nav */
  --dur-panel: .45s;    /* ocultar header, relleno gold, FAQ */
  --dur-med: .5s;       /* ítems de nav, títulos de área */
  --dur-slow: .6s;      /* clip del menú, retratos */
  --dur: .9s;           /* revelado al scroll */
  --dur-enter: 1s;      /* rise / draw del hero */
  --dur-section: 1.2s;  /* filete entre secciones */
  --dur-logo: 1.3s;
  --dur-line: 1.4s;     /* líneas de áreas / pasos */
  --dur-photo: 1.6s;    /* zoom de foto, progreso del método */
  --dur-cue: 2.6s;      /* indicador de scroll del hero */
  --dur-zoom: 14s;      /* kenburns del hero */
  --stagger: 90ms;      /* delay entre ítems data-reveal */

  /* ---------- Z-index ---------- */
  --z-under: -1;     /* relleno ::before de botón gold */
  --z-base: 0;
  --z-photo: 1;
  --z-content: 3;    /* .hero__inner sobre la foto */
  --z-header: 20;    /* .lr-header */
  --z-nav: 30;       /* panel móvil */
  --z-toggle: 31;    /* .lr-nav-toggle y .lr-brand sobre el panel */
  --z-dropdown: 40;  /* .lr-nav__sub desktop */
  --z-skip: 100;     /* .skip-link */

  /* ---------- Breakpoints (documentados; las custom properties no sirven en @media) ----------
     370px   extra-estrecho (gutter 1.125rem, lema reducido)
     390px   móvil de QA; page-hero compacto
     620px   corte móvil principal (formas a 1 col, áreas 2 col, lema)
     700px   clientes 6 col; fichas de subpágina a 2 col
     760px   valores a 4 col
     800px   equipo a 3 col
     900px   mosaic, footer, head--split, clientes con rótulo
     1000px  hero a 2 col; método, FAQ y contacto a 2 col
     1024px  nav de escritorio (el menú móvil es max-width: 1023px)
     1041px  maquetación editorial (components.css; max-width: 1040px es el complemento)
     1280px  culture a 6 col
     1320px  desktop compacto (1041–1320)
     1360px  tracking de nav más abierto
     1600px  --container: 1480px; html 17px

     Cercanos, no unificar:
     999 / 1000, 1023–1024 / 1040–1041, 699 / 700.
     El menú usa 1024; la retícula editorial usa 1041. */
}