/* ==========================================================================
   Sproochegalerie — Base
   Fuentes, reset, contenedor y tipografía por defecto. Mobile first.
   ========================================================================== */

/* --- Fuentes de marca ------------------------------------------------------
   Archivos TRIAL: mismos dibujos que la charte, sin licencia de producción.
   Al comprar, reemplazar por .woff2 y cambiar sólo los `src` de acá abajo —
   los nombres de familia y los pesos no se tocan, así el resto del CSS sigue
   funcionando igual. */

@font-face {
  font-family: "Sans Plomb";
  src: url("../assets/fonts/SansPlomb_TRIAL-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sans Plomb";
  src: url("../assets/fonts/SansPlomb_TRIAL-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Sans Plomb";
  src: url("../assets/fonts/SansPlomb_TRIAL-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
/* La condensada es la del titular: es la que usa el cliente en sus mesas y la
   que aguanta "PLAYGROUND" a cuerpo grande en 375px sin partirse. */
@font-face {
  font-family: "Sans Plomb Condensed";
  src: url("../assets/fonts/SansPlomb_TRIAL-CondensedMedium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Sans Plomb Condensed";
  src: url("../assets/fonts/SansPlomb_TRIAL-CondensedBold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

/* El ancho extendido sólo aparece en la bajada del logo. Queda declarado por
   si hace falta en interfaz, pero no se usa en texto corrido. */
@font-face {
  font-family: "Sans Plomb Extended";
  src: url("../assets/fonts/SansPlomb_TRIAL-ExtendedMedium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Area";
  src: url("../assets/fonts/Area-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Area";
  src: url("../assets/fonts/Area-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Area";
  src: url("../assets/fonts/Area-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;   /* iOS no reescala al girar */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;               /* los bloques con skew sobresalen a propósito */
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* Objetivos táctiles de 44px como mínimo: es el piso de WCAG 2.5.5 y, en un
   sitio cuyo público principal usa el teléfono, no es negociable. */
a, button { min-height: 44px; }
a.inline, button.inline { min-height: 0; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* --- Contenedor ----------------------------------------------------------- */

.container {
  width: 100%;
  padding-inline: var(--gutter);
  margin-inline: auto;
}

/* Cada banda declara su par de colores y todo lo de adentro lo hereda. */
.band {
  /* El header es fijo: sin esto, un ancla deja el título debajo de la barra. */
  scroll-margin-top: var(--header-h);
  background: var(--paper);
  color: var(--ink);
  padding-block: var(--band-pt) var(--band-pb);
  position: relative;
  overflow: hidden;
}
.band--oat   { --paper: var(--pair-oat-paper);   --ink: var(--pair-oat-ink); }
.band--green { --paper: var(--pair-green-paper); --ink: var(--pair-green-ink); }
.band--lilac { --paper: var(--pair-lilac-paper); --ink: var(--pair-lilac-ink); }
.band--red   { --paper: var(--pair-red-paper);   --ink: var(--pair-red-ink); }
.band--blue  { --paper: var(--pair-blue-paper);  --ink: var(--pair-blue-ink); }
/* Invertida: el par al revés, fondo oscuro. */
.band--green-dark { --paper: var(--pair-green-ink); --ink: var(--pair-green-paper); }
.band--navy       { --paper: var(--pair-blue-ink);  --ink: var(--pair-blue-paper); }
.band--burgundy   { --paper: var(--pair-red-ink);   --ink: var(--pair-red-paper); }

/* --- Tipografía ----------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  margin: 0;
  /* Sans Plomb es condensada y va en cajas angostas: sin esto, LU y DE parten
     palabras largas fuera de la caja. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: var(--fs-hero); }
/* Los títulos de sección van en la condensada bold, el mismo corte que la
   composición del hero. Es lo que les da carácter y lo que ata las secciones al
   titular: con la Medium normal competían con el texto en vez de mandar sobre
   él. Más cuerpo y el tracking más cerrado, que es como respira una condensada
   a tamaño grande. */
h2 {
  font-family: var(--font-display-cond);
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  /* 1 y no el 1,15 del texto: en dos o tres líneas, los títulos se leían como
     renglones sueltos. La condensada tiene ascendentes cortas y aguanta. */
  line-height: 1;
}
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--fs-lead); line-height: 1.4; }
.small { font-size: var(--fs-sm); }

.label {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Movimiento ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}