/* ==========================================================================
   ZAMA MOBILITY — Base: reset moderno, tipografía y accesibilidad
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* compensa el header fijo al usar anclas */
  hanging-punctuation: first last;
  /* Evita el scroll horizontal que genera el panel del menú móvil cuando
     está fuera de pantalla. `clip` no crea contexto de desplazamiento
     (a diferencia de `hidden`), por lo que no rompe position: sticky. */
  overflow-x: clip;
}

body {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-regular);
  font-size: var(--txt-base);
  line-height: var(--alto-linea-texto);
  color: var(--texto);
  background-color: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  overflow-x: clip;
  transition: background-color var(--t-media), color var(--t-media);
}

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

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

p, li, figcaption { text-wrap: pretty; }

/* ---------- Títulos --------------------------------------------------------
   Montserrat Bold / Black en mayúsculas para jerarquías 1–3, según manual.   */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulo);
  line-height: var(--alto-linea-titulo);
  color: var(--texto);
  text-wrap: balance;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--txt-4xl); font-weight: var(--peso-black); text-transform: uppercase; }
h2 { font-size: var(--txt-3xl); font-weight: var(--peso-bold);  text-transform: uppercase; }
h3 { font-size: var(--txt-xl);  font-weight: var(--peso-bold); letter-spacing: -0.005em; }
h4 { font-size: var(--txt-lg);  font-weight: var(--peso-semibold); letter-spacing: 0; }
h5, h6 { font-size: var(--txt-base); font-weight: var(--peso-semibold); letter-spacing: 0; }

/* Bloque de texto legible: nunca más de ~68 caracteres por línea */
.prosa { max-width: var(--ancho-texto); }
.prosa > * + * { margin-top: var(--e-4); }
.prosa h2, .prosa h3 { margin-top: var(--e-7); }
.prosa ul, .prosa ol { padding-left: 1.25rem; display: grid; gap: var(--e-2); }

/* ---------- Enlaces -------------------------------------------------------- */
a {
  color: var(--enlace);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.08em;
  transition: color var(--t-rapida), text-decoration-color var(--t-rapida);
}
a:hover { color: var(--enlace-hover); text-decoration-color: currentColor; }

/* ---------- Foco visible (WCAG 2.4.7) -------------------------------------- */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Selección ------------------------------------------------------ */
::selection { background: var(--naranja-500); color: var(--azul-900); }

/* ---------- Scrollbar discreta --------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border: 3px solid var(--fondo);
  border-radius: var(--r-full);
}

/* ---------- Utilidades de accesibilidad ------------------------------------ */
.solo-lectores {
  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;
}

.saltar-a-contenido {
  position: absolute;
  top: -100%; left: var(--e-4);
  z-index: var(--z-modal);
  background: var(--acento);
  color: var(--texto-sobre-acento);
  font-weight: var(--peso-bold);
  padding: var(--e-3) var(--e-5);
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top var(--t-rapida);
}
.saltar-a-contenido:focus { top: 0; }

/* ---------- Respeto por "reducir movimiento" (WCAG 2.3.3) ------------------ */
@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;
    scroll-behavior: auto !important;
  }
}

/* ---------- Alto contraste -------------------------------------------------- */
@media (prefers-contrast: more) {
  :root { --texto-suave: var(--texto); --borde: var(--texto); }
}

/* ---------- Impresión ------------------------------------------------------- */
@media print {
  .encabezado, .pie, .acciones-flotantes, .migas, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}