/* =========================================================
   Base: reset, tipografía, utilidades
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-p);
  line-height: 1.6;
  color: var(--cafe);
  background: var(--acento);
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--cafe); outline-offset: 4px; border-radius: 6px; }
.sobre-oscuro :focus-visible, .hero :focus-visible, .fondo-animado :focus-visible { outline-color: var(--blanco); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--cafe); color: var(--blanco); padding: 10px 16px; border-radius: 10px;
  text-decoration: none; font-weight: 700;
}
.saltar:focus { top: 16px; }

.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }

/* Titulares: todos los h1, h2 y .titulo usan Bricolage Grotesque ExtraBold.
   Excepción: las frases de firma (.firma) en Dancing Script. */
h1, h2, .titulo {
  font-family: var(--f-titulo); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.02;
  text-wrap: balance;
}
.firma {
  font-family: var(--f-firma); font-weight: 700; font-size: var(--t-firma);
  color: var(--naranja-oscuro); line-height: 1.1;
  transform: rotate(-3deg);
}
.texto-blanco { color: var(--blanco); }
.texto-blanco p { text-shadow: var(--sombra-texto); }

.solo-escritorio { display: none; }
@media (min-width: 1024px) { .solo-escritorio { display: inline; } }