/* ══════════════════════════════════════════════════════════════════
   BASE · reinicio, tipografía y primitivas de composición
   ══════════════════════════════════════════════════════════════════ */

/* ── Tipografías autoalojadas ─────────────────────────────
   Variables, subconjunto latino. Sin CDN de terceros: la política
   de privacidad declara que el sitio no transfiere datos de navegación,
   y la CSP del despliegue solo admite font-src 'self'.
   Si los archivos no están presentes, la pila de respaldo del sistema
   mantiene el sitio legible. Ver fonts/LEEME.md.
   ───────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-variable.woff2') format('woff2');
  font-weight: 400 500;
  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+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable.woff2') format('woff2');
  font-weight: 400 600;
  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+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── Reinicio ─────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, fieldset {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, picture, svg { max-width: 100%; display: block; }

input, button, textarea, select { font: inherit; color: inherit; }

textarea { resize: vertical; }

:target { scroll-margin-top: 6rem; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── Página ───────────────────────────────────────────────── */

body {
  background: var(--beige-base);
  color: var(--tinta-cuerpo);
  font-family: var(--tipo-texto);
  font-size: var(--texto);
  line-height: var(--interlineado-texto);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Ninguna página debe desbordar en horizontal en móvil. */
  overflow-x: hidden;
}

main { flex: 1; }


/* ── Titulares ────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--tipo-titulo);
  font-weight: 500;
  line-height: var(--interlineado-titulo);
  color: var(--tinta);
  text-wrap: balance;
}

h1 { font-size: var(--titulo-servicio); letter-spacing: -0.02em; }
h2 { font-size: var(--seccion-interior); letter-spacing: -0.02em; }
h3 { font-size: var(--titulo-ficha); }
h4 { font-size: var(--titulo-menor); }

/* Los titulares de la portada respiran más que los de las páginas
   interiores, y los de las páginas legales menos. */
.portada h1 { font-size: var(--titulo-portada); }
.portada h2 { font-size: var(--seccion-portada); }

.legal h1 { font-size: var(--titulo-legal); letter-spacing: -0.01em; }
.legal h2 { font-size: var(--seccion-legal); }

p { max-width: var(--medida); }


/* ── Antetítulo de sección ───────────────────────────────── */

.antetitulo {
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.4;
  color: var(--acento);
  margin-bottom: var(--e-3);
}

/* Variante gris, para rótulos que no deben competir con el acento
   (cabeceras del pie, etiquetas dentro de tarjetas). */
.antetitulo--tenue { color: var(--tinta-tenue); letter-spacing: 0.1em; }


/* ── Enlaces ──────────────────────────────────────────────── */

a {
  color: var(--acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }


/* ── Foco visible ─────────────────────────────────────────── */

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: var(--radio);
}

/* Sobre el bloque macizo de organizaciones el anillo oscuro no se
   distinguiría: se invierte al color de texto del propio bloque. */
.otra-area:focus-visible,
.diagrama__paso--destacado :focus-visible { outline-color: var(--solido-sobre, #FFFFFF); }


/* ── Enlace de salto ──────────────────────────────────────── */

.salto {
  position: absolute;
  left: var(--e-4);
  top: var(--e-4);
  z-index: 100;
  background: var(--tinta);
  color: var(--beige-base);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--radio);
  font-size: var(--texto-m);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--transicion);
}

.salto:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .salto { transition: none; }
}


/* ── Composición ──────────────────────────────────────────── */

.contenedor {
  width: 100%;
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.seccion         { padding-block: var(--e-8); }
.seccion--hero   { padding-block: var(--e-9) var(--e-8); }
.seccion--compacta { padding-block: var(--e-7); }

.banda { background: var(--acento-suave); }

.estrecho { max-width: var(--ancho-estrecho); }
.texto    { max-width: var(--ancho-texto); }

.cabecera-seccion { max-width: var(--ancho-estrecho); margin-bottom: var(--e-7); }
.cabecera-seccion--corta { margin-bottom: var(--e-6); }
.cabecera-seccion p { margin-top: var(--e-4); }


/* ── Utilidades ───────────────────────────────────────────── */

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Utilidades de separación. Sustituyen a los atributos style= en línea, que
   la política de seguridad (style-src 'self') bloquea en producción. */
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }
.mb-5 { margin-bottom: var(--e-5); }