/* =============================================================================
   ASCOR SECURITY — Reset + base tipográfica
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;  /* iOS: no reescalar al rotar */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--safe-top) + 1rem);
  -moz-tab-size: 4;
  tab-size: 4;
  overflow-x: clip;   /* sin scroll lateral, sin romper position: sticky */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* EL FONDO DEL BODY ES PLANO A PROPÓSITO — no le devuelvas el degradado.
 *
 * Hasta el rediseño de agosto de 2026 aquí había un `body::before` fijo con dos
 * radiales de azul institucional que teñían el marino de forma desigual: hasta
 * #0F224B en la esquina superior derecha.
 *
 * Se quitó porque bloqueaba el mecanismo central del rediseño. Las secciones
 * cambian de fondo con una CURVA superior (.section--zona / .section--base), y
 * para que la sección marino vuelva a montarse sobre la banda elevada tiene que
 * poder pintarse con el color exacto del body. Con un degradado detrás, ese
 * parche opaco se nota como un rectángulo más claro o más oscuro según dónde
 * caiga en la rampa del radial.
 *
 * La profundidad que aportaba ahora la dan los orbes (.orbe), que van sueltos y
 * medidos en el hero y en una o dos secciones por página, no en todo el sitio a
 * la vez. */
body.is-locked { overflow: hidden; }

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

img { background-color: var(--marino-700); }

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

button { background: none; border: none; }

/* ---- Titulares: Sora 800, CAJA DE ORACIÓN --------------------------------
   Ningún titular va en mayúsculas. La versalita corrida era, junto con los
   kickers monoespaciados, lo que le daba al sitio el aire de panel de control.
   La única excepción es el logotipo (.brand), que es una marca, no un texto. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  overflow-wrap: normal;   /* nunca partir una palabra a la mitad */
  hyphens: manual;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-xl); }

p { text-wrap: pretty; }

/* Palabra-acento: UNA sola palabra del titular en royal (manual p.6). Sigue
   siendo señal y no decoración; lo que cambió es el tono.

   --royal-400 (#6B80FE) en vez de --royal-500 (#3D5AFE): 5.49:1 contra 3.66:1.
   El 500 solo cumplía como "texto grande" (peso 800 y ≥18.66px), y eso ataba el
   piso de --fs-h3 a 19px. El 400 cumple AA como texto normal a cualquier
   tamaño, que es lo que permitió bajar toda la escala de titulares. */
.accent { color: var(--royal-400); }

/* Antetítulo — reemplaza al kicker monoespaciado.
   Inter, caja de oración, 13px, sin tracking y sin la barrita royal previa. Se
   usa SOLO donde aporta un contexto que el h2 no dice; si el titular ya lo
   explica, el antetítulo no va. royal-300 mide 8.55:1 sobre --bg. */
.antetitulo {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.4;
  color: var(--royal-300);
  margin-bottom: var(--sp-3);
}

/* Nota al pie de un bloque: el antiguo .mono, ahora en Inter. Sirve para la
   letra chica que acompaña a un formulario o una fecha de actualización. */
.nota {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  max-width: var(--measure);
}

a {
  color: var(--royal-400);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--royal-300); }

/* ---- Foco visible y consistente (accesibilidad) -------------------------- */
:focus { outline: none; }

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

::selection {
  background: var(--royal-500);
  color: var(--claridad);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--sp-7) 0;
}

ul, ol { padding-left: 1.15em; }

/* ---- Utilidades ---------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-5);
  background: var(--royal-500);
  color: var(--claridad);
  font-weight: 600;
  border-radius: 0 0 var(--radius-campo) 0;
  transform: translateY(-110%);
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--claridad);
}

[hidden] { display: none !important; }

.no-js .js-only { display: none !important; }

/* -----------------------------------------------------------------------------
   RITMO VERTICAL — separación por defecto entre elementos consecutivos.
   Usa :where() para especificidad 0: cualquier utilidad la sobrescribe.
   -------------------------------------------------------------------------- */
:where(h1, h2, h3, h4) + :where(p, .lead, ul, ol) { margin-top: var(--sp-4); }
:where(p, .lead) + :where(.pill-row, .btn-row, .lista, .hitos, .gallery) { margin-top: var(--sp-6); }
:where(.lista, .hitos, .gallery, .faq) + .aviso-legal { margin-top: var(--sp-5); }
:where(h1, h2, h3, h4) + :where(.lista, .hitos) { margin-top: var(--sp-5); }