/* base.css — fuentes, reset, tipografía base y utilidades.
   Segundo en la cascada: tokens.css → base.css → layout.css → componentes.css → carrusel.css
   No define ni redefine ningún token: solo los consume. */

/* ============================ 1. FUENTES ============================
   Self-hosted, subset latin. font-display: swap para que el texto se lea
   con la fuente de sistema mientras baja el woff2 (LCP del hero). */

@font-face {
  font-family: "Viga";
  src: url("../assets/fonts/viga-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================= 2. RESET ============================= */

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

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

/* El scroll suave del menú ancla solo si el sistema no pide menos movimiento */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

ul, ol {
  padding: 0;
  list-style: none;
}

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

img { height: auto; }

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

button { cursor: pointer; }

textarea { resize: vertical; }

[hidden] { display: none; }

/* ========================== 3. TIPOGRAFÍA ========================== */

body {
  min-height: 100vh;
  background-color: var(--hueso);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-size: var(--txt-base);
  font-weight: 400;
  line-height: var(--alto-cuerpo);
  -webkit-font-smoothing: antialiased;
}

/* Los tres niveles van en la display (Viga), peso 400 y en petróleo, con la
   capitalización normal: es el tratamiento de la referencia. El uppercase
   anterior venía de Anton, que sin caja alta no funciona. */
h1, h2, h3 {
  font-family: var(--fuente-display);
  font-weight: 400;
  line-height: var(--alto-display);
  letter-spacing: normal;
  color: var(--acento-hondo);
}

h1 { font-size: var(--txt-3xl); }
h2 { font-size: var(--txt-2xl); }
h3 { font-size: var(--txt-xl); }

h1, h2, h3, p, li { overflow-wrap: break-word; }

/* Nunca líneas de 120 caracteres. Los bloques centrados que necesiten
   ancho completo lo anulan en su propio componente. */
p { max-width: var(--medida); }

a { color: inherit; }

strong, b { font-weight: 600; }

/* ========================= 4. UTILIDADES ========================== */

/* Visible solo para lectores de pantalla */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprite de <symbol> del index: no debe ocupar espacio ni tocar el flujo */
.sprite-iconos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Saltar al contenido: fuera de la vista hasta que el teclado lo enfoca */
.salto-contenido {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: var(--z-menu);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--radio-btn);
  background-color: var(--tinta);
  color: var(--hueso);
  font-family: var(--fuente-utilidad);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(-300%);
}

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

/* ============================= 5. FOCO ============================= */

:focus-visible {
  outline: var(--grosor-foco) solid var(--acento-hondo);
  outline-offset: var(--offset-foco);
}

/* ====================== 6. MOVIMIENTO REDUCIDO =====================
   Especificidad (0,1,1) a propósito: sin !important, un `*` pelado
   perdería contra cualquier `.clase { transition: … }` posterior. */

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

  html:root *,
  html:root *::before,
  html:root *::after {
    animation-delay: 0s;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-delay: 0s;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}