@font-face {
  font-family: "Oswald";
  src: url("/fonts/oswald-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/work-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 0.75rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
/* Taps answer at once: no double-tap zoom wait, and our own press states replace the grey flash */
a, button, select, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--yellow); color: var(--on-accent); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* Headings: Oswald, uppercase, semibold (decided 2026-10-25) */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.95;
  text-wrap: balance;
  hyphens: none;
}
/* Sized so "NUESTRO DISEÑO." (7.1em in Oswald 600) always fits on one line */
.display { font-size: min(var(--step-display), calc((100vw - 2 * var(--margin)) / 7.5)); line-height: 0.92; }
/* Each headline line is written in the markup ("Tu idea," / "nuestro diseño."), so the break holds with reduced motion too */
.lines .line { display: block; }
.page-head .display { font-size: clamp(2.5rem, 1.2rem + 5vw, 7rem); }
h2, .heading-lg { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); line-height: 1.1; letter-spacing: 0.015em; }

p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 40ch; }
.muted { color: var(--muted); }
.icon { flex: none; width: 1.25em; height: 1.25em; fill: currentColor; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.section { padding-top: var(--section-gap); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem; background: var(--yellow); color: var(--on-accent); }
.skip-link:focus { top: 1rem; }