/* ==========================================================================
   Base: fuentes autoalojadas (SIL OFL 1.1, subconjunto latino: cubre español de México)
   ========================================================================== */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/fraunces-italic-latin-var.woff2") format("woff2");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-bottom: 4.75rem; /* barra fija móvil */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-main);
  font-size: var(--text-base);
  font-weight: 600; /* texto corrido semibold en todo el sitio (mismo grosor que el lede del hero) */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

strong, b { font-weight: 800; } /* conserva el énfasis sobre el texto semibold */

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
a { color: inherit; }
section[id] { scroll-margin-top: calc(var(--header-h) + 0.5rem); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); }

/* Foco visible: azul sobre claro, blanco sobre oscuro */
:focus-visible {
  outline: 3px solid var(--focus, var(--blue));
  outline-offset: 3px;
  border-radius: 4px;
}
.hero__panel, .video, .tile--navy, .site-footer, .quien-block--navy, .serv-card--red, .serv-card--navy, .serv-card--blue { --focus: var(--white); }

.skip {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 200;
  padding: 0.75rem 1rem; background: var(--navy); color: var(--white);
  font-weight: 800; border-radius: var(--r-sm); transform: translateY(-200%);
}
.skip:focus { transform: none; }

::selection { background: var(--blue); color: var(--white); }

/* ---------- Tipografía de sección ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue-text);
}
.eyebrow::before { content: ""; flex: none; width: 2rem; height: var(--hard); background: currentColor; }

h2, h3 { overflow-wrap: break-word; }
h2 { font-weight: 800; font-size: var(--text-h2); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
h3 { font-weight: 800; font-size: var(--text-h3); line-height: 1.15; }

/* Acento editorial (P2): una palabra por titular */
.ac {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.5em;
  color: var(--blue-text);
}

.section-head { display: grid; gap: 0.75rem; margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3.25rem); max-width: 46rem; }
.section-intro { color: var(--muted); max-width: 54ch; }
.section-intro strong { color: var(--ink); font-weight: 600; }
.marker { font-weight: 600; color: var(--blue-text); }