/* ==========================================================================
   Clínica Paula Vega — Tokens del sistema de diseño "Corporativa moderna"
   Compartido por todas las páginas. Cambiar aquí, nunca en componentes.

   Dirección: corporativa sanitaria. Navy del logo como color dominante
   (bloques sólidos), teal del logo como único acento, fondos blanco y gris
   frío. Una sola familia sans (Archivo, variable 400-800). Radios 4-6 px,
   sombras casi nulas, líneas finas como divisores.

   Contraste medido (WCAG 2.x):
     ink #1C384A sobre blanco          12,25:1
     ink-2 #4A5B66 sobre blanco         7,05:1  · sobre gris #F2F5F7 6,44:1
     ink-3 #5A6A74 sobre gris           5,12:1
     teal-ink #006B66 sobre blanco      6,37:1  · sobre gris 5,82:1
     blanco sobre CTA #00756F           5,56:1  (botón principal)
     blanco sobre navy #1C384A         12,25:1  · on-navy-2 #C9D6DD 8,25:1
     teal #00A19B                       solo trazos, iconos y cifras grandes
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback métrico: reduce el salto al cargar Archivo (CLS). */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial');
  size-adjust: 101%;
  ascent-override: 88%;
  descent-override: 21%;
}

:root {
  /* --- Superficies ------------------------------------------------------ */
  --white: #ffffff;
  --gray-50: #f2f5f7;      /* bloques alternos, gris muy frío */
  --gray-100: #e6ecf0;
  --line: #dbe3e8;         /* divisores */
  --line-strong: #c3cfd7;

  /* --- Texto ------------------------------------------------------------ */
  --ink: #1c384a;          /* navy del logo */
  --ink-2: #4a5b66;
  --ink-3: #5a6a74;        /* notas y metadatos */

  /* --- Marca y acción --------------------------------------------------- */
  --navy: #1c384a;
  --navy-900: #122a3a;
  --navy-700: #24475d;
  --on-navy: #ffffff;
  --on-navy-2: #c9d6dd;
  --on-navy-line: rgb(255 255 255 / 0.16);
  --teal: #00a19b;         /* acento gráfico: barras, iconos, cifras grandes */
  --teal-ink: #006b66;     /* teal para texto y enlaces */
  --teal-tint: #e3f3f1;
  --teal-on-navy: #7fd3ce; /* foco y trazos sobre navy */
  --cta: #00756f;          /* botón principal */
  --cta-hover: #005f5a;
  --star: #e3a008;
  --warn-tint: #fdf3e1;    /* avisos sanitarios */
  --error: #a3361b;        /* errores de formulario, 6,1:1 sobre blanco */

  /* --- Tipografía ------------------------------------------------------- */
  --font: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --fs-xs: 0.8125rem;      /* 13 */
  --fs-sm: 0.9375rem;      /* 15 */
  --fs-base: 1.0625rem;    /* 17 */
  --fs-lg: 1.1875rem;      /* 19 */
  --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.625rem);
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --measure: 62ch;

  /* --- Espacio y rejilla ------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(16px, 3vw, 32px);
  --col-gap: clamp(16px, 2.2vw, 32px);
  --section-y: clamp(64px, 8vw, 112px);

  /* --- Forma ------------------------------------------------------------ */
  --r-sm: 4px;
  --r-md: 6px;
  --shadow-1: 0 1px 2px rgb(18 42 58 / 0.06), 0 2px 8px rgb(18 42 58 / 0.05);
  --shadow-2: 0 8px 28px rgb(18 42 58 / 0.12);

  /* --- Movimiento (emil-design-eng) ------------------------------------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
  --t-menu: 200ms;
  --t-enter: 560ms;

  /* --- Capas ------------------------------------------------------------ */
  --z-header: 20;
  --z-callbar: 30;
  --z-consent: 35;
  --z-skip: 40;

  --header-h: 76px;
  --bar-h: 72px;
}

@media (max-width: 1023px) {
  :root { --header-h: 68px; }
}