/* =========================================================================
   BASE — reset + elementos HTML desnudos. Se carga en 2º lugar.
   =========================================================================
   Solo selectores de elemento. Ninguna clase (salvo dos utilidades de
   accesibilidad al final, que son parte del "suelo" de la página).
   ========================================================================= */

/* ---------------------------------------------------------------------
   RESET mínimo
   --------------------------------------------------------------------- */

/* Sin esto, un padding SUMA anchura a la caja y los cálculos no cuadran
   nunca. Es el primer ajuste de cualquier hoja de estilos moderna. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Los navegadores traen márgenes propios en encabezados, párrafos y listas.
   Se quitan todos y se ponen a mano donde hagan falta: es más predecible.
   Va dentro de :where() para que pese 0: si no, un simple `p` (0,0,1)
   ganaría al ritmo vertical de más abajo y lo dejaría sin efecto. */
:where(body,
       h1, h2, h3, h4, h5, h6,
       p, figure, blockquote,
       dl, dd, ul, ol) {
  margin: 0;
}

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

/* RITMO VERTICAL
   Como arriba se quitan todos los márgenes, hay que devolver el aire entre
   bloques. En vez de ponerlo pieza a pieza (y olvidar alguna), se da una
   vez a los hijos de los contenedores de texto:
     - entre dos bloques cualesquiera, --space-4;
     - antes de un título, más (--space-6): separa temas;
     - justo después de un título, menos (--space-3): el título va con lo
       que presenta, no con lo de arriba.
   :where() tiene especificidad 0, así que cualquier clase de componente
   que fije su propio margen gana sin pelear. Se excluyen los contenedores
   que son flex/grid (cabecera, pie, hero, rejillas partidas), donde el
   espacio ya lo pone gap. */
:where(.container:not(.site-header__inner, .site-footer__inner, .hero__inner, .grid--split),
       .grid--split > *) > * + * {
  margin-top: var(--space-4);
}

:where(.container:not(.site-header__inner, .site-footer__inner, .hero__inner, .grid--split),
       .grid--split > *) > * + :where(h2, h3) {
  margin-top: var(--space-6);
}

:where(.container:not(.site-header__inner, .site-footer__inner, .hero__inner, .grid--split),
       .grid--split > *) > :where(h2, h3) + * {
  margin-top: var(--space-3);
}

html {
  /* Las anclas (#catas-privadas) se desplazan suavemente... */
  scroll-behavior: smooth;
  /* ...y al saltar, el destino no queda pegado al borde superior ni tapado
     por la cabecera fija. */
  scroll-padding-top: 5rem;
}

/* Hay personas a las que el movimiento les provoca mareo real. El sistema
   operativo lo expone y aquí se respeta, anulando TODA animación. */
@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;
  }
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------
   Elementos
   --------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  /* Reparte las palabras entre líneas para que la última no quede huérfana.
     Solo conviene en textos cortos como los titulares. */
  text-wrap: balance;
  /* Fraunces es una fuente variable con eje óptico: se dibuja con más
     contraste a tamaños grandes y más robusta a tamaños pequeños. */
  font-optical-sizing: auto;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
  /* Una línea de 200 caracteres cansa la vista aunque quepa en pantalla.
     La unidad ch mide "anchos de cero", así que el límite sigue al tamaño
     de letra en vez de ser un número fijo de píxeles. */
  max-width: var(--max-width-prose);
  text-wrap: pretty;
}

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

a:hover {
  color: var(--color-link-hover);
}

/* display:block mata el hueco fantasma que deja el line-height debajo de
   las imágenes. max-width evita que se desborden del contenedor. */
img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* El atributo hidden solo pone display:none en la hoja del navegador, que
   pierde contra cualquier display del autor (como el de img justo arriba):
   sin esto, una <img hidden> se sigue viendo como un recuadro vacío. */
[hidden] {
  display: none !important;
}

/* Los controles de formulario NO heredan la fuente por defecto: hay que
   decírselo explícitamente o saldrán en la fuente del sistema. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   FOCO — no se elimina nunca
   ---------------------------------------------------------------------
   :focus-visible solo se activa cuando el navegador cree que el foco
   ayuda: navegando con teclado sí, al hacer clic con el ratón no. Así se
   consigue el aspecto limpio que la gente busca al escribir
   "outline: none", pero sin dejar la web inservible con teclado. */
:focus-visible {
  outline: 3px solid var(--color-accent-ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------
   Dos utilidades de accesibilidad
   --------------------------------------------------------------------- */

/* Oculta visualmente pero NO para lectores de pantalla.
   display:none o visibility:hidden lo esconderían de todo el mundo. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace "Saltar al contenido": invisible hasta que recibe el foco.
   Quien navega con Tab lo encuentra el primero y se ahorra los 5 enlaces
   del menú en cada una de las 5 páginas. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: none;
  background-color: var(--color-accent);
  border-radius: var(--radius);
  transform: translateY(-150%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}