/* ═══════════════════════════════════════════════════════════
   LUVA · BASE
   Reset, tipografía, layout y utilidades
   ═══════════════════════════════════════════════════════════ */

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

* { margin: 0; padding: 0; }

/* El atributo `hidden` debe ganar siempre. Si una clase pone
   `display: grid` o `display: flex`, el navegador lo ignora y el
   elemento sigue en pantalla. Esta regla lo evita para todos los
   casos, sin tener que acordarse de escribir `.algo[hidden]`. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Lavado de color de fondo: manchas suaves de acuarela */
  background-image:
    radial-gradient(58% 42% at 8% 4%,  rgba(243,214,208,.55), transparent 70%),
    radial-gradient(46% 38% at 94% 10%, rgba(220,213,240,.55), transparent 72%),
    radial-gradient(52% 40% at 78% 96%, rgba(248,214,178,.4),  transparent 70%);
  background-attachment: fixed;
}

img, svg, picture { display: block; max-width: 100%; }
svg { flex: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--seal); color: var(--paper-3); }

/* Bloquea el scroll de fondo con el menú móvil abierto */
body.no-scroll { overflow: hidden; }

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

/* ── Sprite de iconos ───────────────────────────────────────── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic { width: 1.1em; height: 1.1em; }

/* ── Layout ─────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* ── Tipografía editorial ───────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 28, "WONK" 1;
  text-wrap: balance;
}

h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--seal);
}

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .6em;
}

.mono-label__num {
  color: var(--seal);
  font-weight: 700;
}
.mono-label__num::after {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  margin-left: .5em;
  vertical-align: middle;
  opacity: .7;
}

.eyebrow {
  font-family: var(--font-hand);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--seal-deep);
}

.skip-link {
  position: fixed;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }

/* ── Textura global de papel ────────────────────────────────── */
.grain {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 90;
  background-image: var(--tex-noise);
  opacity: .13;
  mix-blend-mode: multiply;
  will-change: transform;
  animation: grainShift 6s steps(6) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ── Barra de progreso de lectura ───────────────────────────── */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 120;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blush-deep), var(--lavender-deep) 40%, var(--seal));
  transform-origin: left;
}

/* ── Animación de entrada al hacer scroll ───────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity .82s var(--ease-out) var(--d, 0s),
    transform .82s var(--ease-soft) var(--d, 0s),
    filter .82s var(--ease-out) var(--d, 0s);
  filter: blur(4px);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Sin JavaScript el contenido se muestra igualmente:
   nunca dejamos la página en blanco. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .grain { animation: none; }
  .seal-badge__ring, .vcard__stamp-ring, .art__star, .art__bunting,
  .pcard--cta__star { animation: none; }
}