/* ── Type system ─────────────────────────────────────────────────────────────
   Roboto  — everything Elementor renders on dositec.com.do (headings, body,
             cards, buttons). The core face.
   Montserrat — bizberg theme chrome: header title 23px/600/uppercase,
             strapline 13px/300. Used for small uppercase labels.
   Questrial / Lato — also enqueued by the site; Questrial is the display
             alternate, Lato the long-form fallback. */
:root {
  --font-core: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Montserrat", "Roboto", sans-serif;
  --font-display-alt: "Questrial", "Roboto", sans-serif;
  --font-longform: "Lato", "Roboto", sans-serif;

  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black: 900; /* @kind font */

  /* Sizes — the literal scale in the site CSS (30/24/20 card titles,
     16/14 body, 13 strapline, 40 homepage section title). */
  --fs-hero: clamp(30px, 20.843px + 2.442vw, 56px);
  --fs-display: clamp(26px, 21.069px + 1.315vw, 40px);
  --fs-h1: clamp(24px, 20.48px + 0.94vw, 34px);
  --fs-h2: clamp(22px, 19.18px + 0.752vw, 30px);
  --fs-h3: clamp(20px, 18.59px + 0.38vw, 24px);
  --fs-h4: clamp(18px, 17.3px + 0.19vw, 20px);
  --fs-body-lg: clamp(17px, 16.648px + 0.094vw, 18px);
  /* --fs-body NO se fluidifica NUNCA: es el font-size de <input>/<textarea>
     (_ds_bundle.js:741 y :903). Por debajo de 16px iOS Safari hace zoom al enfocar. */
  --fs-body: 16px;
  --fs-body-sm: 14px;
  /* --fs-label y --fs-micro suben en movil/tablet (suelo legible) y recuperan
     el valor de marca en laptop. vw no sirve aqui: hace falta lo contrario. */
  --fs-label: 14px; /* @kind font */
  --fs-micro: 12px; /* @kind font */

  /* 1.07 esta calibrado para un titular de 1-2 lineas. En movil el hero ocupa 3-4 y
     las tildes de "Proteccion Radiologica" chocan con la linea de arriba. */
  --lh-tight: 1.15; /* @kind font */
  /* Interlineado propio de AnimatedHeadline. A partir de 1024px vuelve a 1.07,
     el valor con el que el hero se renderiza hoy en escritorio (usaba
     var(--lh-tight)); el 1.14 es solo para el hero de 3-4 lineas de movil. */
  --lh-hero: 1.14; /* @kind font */
  --lh-snug: 1.3; /* @kind font */
  --lh-normal: 1.5; /* @kind font */   /* theme default */
  --lh-relaxed: 1.6; /* @kind font */
  --lh-loose: 1.8; /* @kind font */    /* button line-height in the site CSS */

  --ls-tight: -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.06em; /* @kind font */
  --ls-button: clamp(2px, -0.82px + 0.752vw, 10px); /* @kind font */
  --ls-button-md: clamp(2px, 0.943px + 0.282vw, 5px); /* @kind font */
  --ls-button-sm: clamp(1.5px, 0.972px + 0.141vw, 3px); /* @kind font */
  --ls-eyebrow: 0.12em; /* @kind font */
}

/* Los tokens que no se pueden interpolar con vw porque necesitan ser MAYORES
   en pantallas pequenas. Recuperan el valor de marca a partir de laptop.
   Los dos @media van deliberadamente abiertos por arriba (min-width sin cota
   superior) en lugar de cerrar los rangos tablet 641-1023 y laptop 1024-1199
   del contrato: el valor de >=1024px es el mismo en laptop y en escritorio, y
   cerrar el rango obligaria a duplicarlo en un tercer bloque >=1200px.
   Excepcion consciente al listado literal de breakpoints del contrato. */
@media (min-width: 641px) {
  :root { --ls-eyebrow: 0.18em; }
}
/* El resaltado de AnimatedHeadline puede partirse por debajo de 1024px: a 320px
   "Proteccion Radiologica" en una sola linea no cabe ni al tamano minimo del hero.
   A partir de 1024px vuelve a nowrap, que es el render de hoy. */
@media (max-width: 1023px) {
  :root { --hl-wrap: normal; }
}
@media (min-width: 1024px) {
  :root {
    --fs-label: 13px;
    --fs-micro: 11px;
    --lh-tight: 1.07;
    /* Invariante de escritorio: el hero vuelve a su interlineado de hoy (1.07). */
    --lh-hero: 1.07;
  }
}