/* Fuente autoalojada: Jost* (suministrada), renombrada "Jost" para @font-face
   (evita el asterisco del nombre interno). woff2 primero, ttf de respaldo. */
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-300-Light.24a961a10f4a.woff2") format("woff2"),
       url("../fonts/Jost-300-Light.2d7286e1a1bb.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-400-Book.3f56a919c908.woff2") format("woff2"),
       url("../fonts/Jost-400-Book.a69dce7811e6.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-500-Medium.58e9f5787d1f.woff2") format("woff2"),
       url("../fonts/Jost-500-Medium.c61fcfcf0ffd.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Serif de titulares: Fraunces 72pt (óptica display), suministrada en F1. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Light.35159b6f4093.woff2") format("woff2"),
       url("../fonts/Fraunces-Light.176a539442c6.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-LightItalic.1f26fced8ebc.woff2") format("woff2"),
       url("../fonts/Fraunces-LightItalic.8a44cde6f536.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Regular.7f700e5b5f72.woff2") format("woff2"),
       url("../fonts/Fraunces-Regular.3d77e1804718.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Italic.74a65ee78f3c.woff2") format("woff2"),
       url("../fonts/Fraunces-Italic.6ac1c7474a2d.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Reset moderno, mínimo */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

ul[class], ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

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

button {
  cursor: pointer;
}

a {
  color: inherit;
}

/* Tipografía base */
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-book);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

h3 {
  font-weight: 400;
}

h1 { font-size: var(--text-display-xl); }
h2 { font-size: var(--text-display-lg); }
h3 { font-size: var(--text-display-sm); }

::selection {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* Neutraliza el fondo azul que Chrome/Safari imponen al autocompletar
   inputs, para que respeten la paleta B&N. El box-shadow inset "engaña"
   al navegador (no se puede quitar el fondo directamente); la transition
   larga evita el flash de color mientras carga. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--color-paper) inset !important;
  -webkit-text-fill-color: var(--color-ink) !important;
  caret-color: var(--color-ink);
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* Foco visible consistente en toda la app (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* Skip-link: oculto hasta recibir foco por teclado */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100%;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-1) var(--space-2);
  z-index: 100;
  transition: top var(--duration-ui) var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-2);
}

@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;
  }
}