/* =========================================================================
   Tokens de marca — Clínica Valdivia
   Fuente: Recursos/3. Gama Cromática /Gama cromatica- Clinica Valdivia - Branding.pdf
           Recursos/7. Web - Assets/3. Web - Escritorio /Assets/Colores.svg (tintas 20–90 %)
           Recursos/7. Web - Assets/1. Tipografias / (Manrope, Arapey)
   Los nombres de color vienen del PDF; la correspondencia nombre ↔ código se
   dedujo por el tono (el PDF no la deja explícita) y está pendiente de confirmar.
   ========================================================================= */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arapey";
  src: url("../fonts/Arapey-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Arapey";
  src: url("../fonts/Arapey-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta aprobada (códigos exactos del PDF) */
  --c-azul-noche: #23333f;
  --c-carbon: #2f3338;
  --c-pizarra: #586369;
  --c-arena: #b9aa9c;
  --c-piedra: #d9d8d0;
  --c-lino: #efeee6;
  --c-niebla: #f1f8f2;
  --c-salvia: #d1e2aa;
  --c-limon: #edf0c2;
  --c-blanco: #ffffff;
  /* Verde petróleo aprobado por la clínica (estado activo del menú móvil; no figura en el PDF de gama) */
  --c-petroleo: #213338;

  /* Tintas aprobadas (Colores.svg: cada color al 20–90 % sobre blanco), medidas en la maqueta */
  --c-azul-noche-30: #bdc2c5;  /* Rehabilitación Oral */
  --c-azul-noche-40: #a7adb2;  /* Trastornos Temporomandibulares (aprox. aprobada más cercana) */
  --c-limon-60: #f4f6da;       /* Estética Orofacial */
  --c-piedra-40: #f0efec;      /* paneles de nombre en tarjetas */
  --c-salvia-20: #f6f9ee;      /* fondo panel equipo clínico */

  /* Roles */
  --color-text: var(--c-carbon);
  --color-text-soft: var(--c-pizarra);
  --color-bg: var(--c-blanco);
  --color-surface: var(--c-lino);
  --color-primary: var(--c-azul-noche);
  --color-on-primary: var(--c-limon);
  --color-accent: var(--c-salvia);
  --color-on-dark: var(--c-lino);
  --color-focus: var(--c-pizarra);

  /* Tipografía */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Arapey", Georgia, "Times New Roman", serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-xs: 0.75rem;                                   /* 12 */
  --fs-sm: 0.875rem;                                  /* 14 */
  --fs-base: 1rem;                                    /* 16 */
  --fs-md: 1.125rem;                                  /* 18 */
  --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);   /* 18–22 */
  --fs-xl: clamp(1.375rem, 1.1rem + 1vw, 2rem);       /* 22–32 */
  --fs-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);   /* 28–40 */
  --fs-3xl: clamp(2rem, 1.3rem + 2.4vw, 3rem);        /* 32–48 */
  --fs-4xl: clamp(2.25rem, 1.3rem + 3.4vw, 3.75rem);  /* 36–60 */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  /* Espaciado y forma */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 5vw, 6rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 1284px;
  --container-narrow: 1120px;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 33px;
  --radius-xl: 48px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px rgb(35 51 63 / 0.12);
  --glass-bg: rgb(239 238 230 / 0.72);
  --glass-line: rgb(255 255 255 / 0.55);
  --glass-blur: 18px;

  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 240ms;
}