/* ==========================================================================
   base.css — tipografía base, fondos, helpers de papel y firma
   ========================================================================== */

body {
  font-family: var(--font);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  color: var(--ink);
  background-color: var(--bg); /* gris muy suave, NUNCA blanco pleno */
}

/* ---- Tipografía editorial ---- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--cyan-ink);
}

h1, .h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-tight); font-weight: var(--fw-black); }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); font-weight: var(--fw-black); }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-tight); font-weight: var(--fw-extrabold); }

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}

.text-soft { color: var(--ink-soft); }
.measure { max-width: 60ch; }

p + p { margin-top: var(--sp-4); }

a:not(.btn) {
  color: var(--cyan-ink);
  text-decoration: none;
}
/* sin subrayado en links, tampoco al pasar el mouse */

strong { font-weight: var(--fw-bold); }

/* ==========================================================================
   Palabra resaltada en títulos (§4): bloque de color o trazo a mano.
   Cada título grande lleva una.
   ========================================================================== */

/* Bloque de color sólido detrás de la palabra */
.mark {
  position: relative;
}
/* nowrap sólo cuando el bloque sólido no debe partirse */
.mark--block { white-space: nowrap; }

/* Trazo de marcador amarillo (resaltador) bajo/detrás de la palabra */
.mark--marker {
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.38em;
  padding: 0 0.06em;
  transition: background-size var(--dur-slow) var(--ease-out);
}
/* Estado inicial para animar el "subrayado que se dibuja" */
.js-anim .mark--marker { background-size: 0% 0.38em; }
.js-anim .mark--marker.is-drawn { background-size: 100% 0.38em; }

/* Bloque sólido (tinta / cian) con la palabra en claro */
.mark--block {
  background: var(--ink);
  color: var(--bg);
  padding: 0.02em 0.22em;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transform: rotate(-1.2deg);
  display: inline-block;
}
.mark--block-cyan { background: var(--cyan); color: var(--white); }

/* Trazo cian fino (subrayado a mano) */
.mark--ink {
  background-image: linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.14em;
  padding-bottom: 0.04em;
}

/* ==========================================================================
   Superficies con textura de papel (§5.6) — sólo para DESTACAR
   ========================================================================== */
/* Las texturas provistas son fuertes: las suavizamos con un velo del color
   base para que queden sutiles y no bajen el contraste del texto (§5.6). */
.paper {
  background-color: var(--bg);
  background-image: linear-gradient(rgba(247, 249, 252, 0.74), rgba(247, 249, 252, 0.74)), var(--paper-white);
  background-repeat: repeat; /* la textura se tilea en su tamaño natural, sin estirar */
}
.paper--celeste {
  background-color: var(--bg-alt);
  background-image: linear-gradient(rgba(238, 248, 251, 0.82), rgba(238, 248, 251, 0.82)), var(--paper-celeste);
  background-repeat: repeat;
}
/* En mobile reducimos presencia de textura para no bajar contraste */
@media (max-width: 640px) {
  .paper, .paper--celeste { background-image: none; }
  .paper { background-color: #FBFCFE; }
  .paper--celeste { background-color: var(--bg-alt); }
}

/* Fondos lisos de sección */
.bg-default { background-color: var(--bg); }
.bg-soft { background-color: var(--bg-soft); }
.bg-alt { background-color: var(--bg-alt); }
.bg-ink { background-color: var(--ink); color: var(--ink-on-dark); }

.bg-ink .eyebrow { color: var(--sky); }
.bg-ink .lead, .bg-ink .text-soft { color: var(--ink-on-dark-soft); }
.bg-ink a:not(.btn) { color: var(--sky); }