/* Ready2Party — tokens del brand book (brand/tokens.json) */
/* Las letras se cargan con <link> en cada página (no @import: bloquea la carga). Dos familias: Josefin Sans + Mrs Saint Delafield. */

:root {
  --petroleo: #1E4A5C;
  --celeste: #7FB3C2;
  --bruma: #DCEDF2;
  --arena: #F4EFE8;
  --blanco: #FFFFFF;
  --tinta: #1B2B33;
  --gris-suave: #5E6F76;
  --linea: #E3E8EA;

  --sans: "Josefin Sans", "Century Gothic", "Futura", system-ui, sans-serif;
  --script: "Mrs Saint Delafield", "Brush Script MT", cursive;
  --serif: var(--sans); /* frases: Josefin Sans fina e itálica */

  --espacio-1: 8px;
  --espacio-2: 16px;
  --espacio-3: 24px;
  --espacio-4: 48px;
  --espacio-5: 96px;

  --radio-recto: 0px;
  --radio-suave: 4px;
  --radio-pastilla: 999px;
}

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

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

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
}

h1, h2, h3 { font-weight: 400; color: var(--petroleo); text-wrap: balance; margin: 0; }

.display { font-size: clamp(40px, 7vw, 56px); line-height: 1.08; letter-spacing: .06em; text-transform: uppercase; }
.titulo  { font-size: 28px; line-height: 34px; letter-spacing: .04em; }
.nota    { font-size: 13px; line-height: 20px; color: var(--gris-suave); }
.cursiva { font-family: var(--script); font-size: 48px; line-height: 1; color: var(--petroleo); font-weight: 400; }
.frase   { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 22px; line-height: 32px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--petroleo); color: var(--blanco); padding: 10px 16px; border-radius: var(--radio-pastilla); }
.skip:focus { top: 8px; }

img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 3px; }

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