/* =========================================================
   JORGE PASCUAL BLANCO · POETA — hoja de estilos
   Paleta: carbón cálido, papel, tinta, cobre envejecido.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --ink:          #1b1712;
  --coffee:       #221912;
  --coffee-2:     #32241a;
  --coffee-3:     #402d1f;
  --paper:        #f3ead9;
  --paper-2:      #ece0c8;
  --paper-3:      #e2d3b3;
  --ink-soft:     #4a3d30;
  --ink-softer:   #6d5c48;
  --copper:       #b8875a;
  --copper-bright:#d3a273;
  --gold-dim:     #a68a5c;
  --cream:        #f8f2e6;

  --line:         rgba(27, 23, 18, 0.14);
  --line-soft:    rgba(27, 23, 18, 0.08);
  --line-on-dark: rgba(243, 234, 217, 0.18);

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Lora", Georgia, "Times New Roman", serif;
  --font-mono:    "Space Mono", "Courier New", Courier, monospace;

  --container: 74rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease-editorial: cubic-bezier(.22,.61,.36,1);
  --dur-s: 200ms;
  --dur-m: 480ms;
  --dur-l: 900ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
/* Some browsers don't apply the UA [hidden]{display:none} rule to inline
   <svg> elements — make it explicit so JS-toggled icons hide reliably. */
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code { font-family: var(--font-mono); }

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

/* ---------- Utilities ---------- */
.sr-only {
  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: fixed; top: -3rem; left: 1rem; z-index: 1000;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; border-radius: 2px;
  font-family: var(--font-mono); font-size: .85rem;
  transition: top var(--dur-s) var(--ease-editorial);
}
.skip-link:focus { top: 1rem; }

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

.placeholder-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--copper);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: .1rem .35rem;
  opacity: .8;
  vertical-align: .1em;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .9rem 1.6rem;
  border-radius: 2px;
  transition: background var(--dur-s) var(--ease-editorial), color var(--dur-s) var(--ease-editorial), border-color var(--dur-s) var(--ease-editorial), transform var(--dur-s) var(--ease-editorial);
}
.btn--primary {
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
}
.btn--primary:hover { background: var(--coffee-2); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--copper); color: var(--ink); }

/* ---------- Section rhythm ---------- */
.section { padding-block: clamp(4.5rem, 10vw, 8rem); }
.section__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section__head { max-width: 40rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: .9rem;
}
.section__title {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  color: var(--ink);
}
.section__title em { color: var(--copper); font-style: italic; }

/* Revelado tipográfico al entrar en pantalla — como tinta asentándose
   sobre el papel: entra desenfocado y desplazado, y se asienta en su
   sitio. Se aplica por JS (initTitleReveal, main.js) solo cuando hay
   motion; el título es siempre legible sin JS.
   Nota técnica: se usa opacity + blur + translateY, no clip-path —
   un clip-path que oculta el 100% del elemento hace que Chromium
   calcule su intersección como 0 de forma permanente, y el propio
   IntersectionObserver que debía revelarlo nunca llega a dispararse. */
.js-anim .section__title.has-ink-reveal {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  transition: opacity 700ms var(--ease-editorial), transform 700ms var(--ease-editorial), filter 700ms var(--ease-editorial);
}
.js-anim .section__title.has-ink-reveal.is-inked {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.section__lede {
  margin-top: 1rem;
  color: var(--ink-softer);
  font-size: 1.05rem;
  max-width: 34rem;
}
.section__head--on-dark .section__title,
.section__head--on-dark .section__eyebrow { color: var(--cream); }
.section__head--on-dark .section__lede { color: var(--paper-3); }

/* reveal-on-scroll */
[data-reveal] {
  opacity: 1;
  transform: none;
}
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-l) var(--ease-editorial), transform var(--dur-l) var(--ease-editorial);
}
.js-anim [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(243, 234, 217, 0.82);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Envuelve .brand para que sea el único <h1> de la página sin alterar
   el aspecto del header: anula los estilos por defecto de <h1>
   (margen, tamaño, peso) y se comporta como texto en línea normal. */
.site-header__h1 {
  margin: 0;
  display: inline-flex;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.4rem, 1.5vw, 1.4rem);
  flex-wrap: wrap;
}
.site-nav__tag {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: .45rem .7rem;
  border: 1px solid transparent;
  border-radius: 1px;
  transition: color var(--dur-s) var(--ease-editorial), border-color var(--dur-s) var(--ease-editorial), background var(--dur-s) var(--ease-editorial);
}
.site-nav__tag:hover,
.site-nav__tag:focus-visible {
  color: var(--ink);
  border-color: var(--line);
  background: var(--paper-2);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav-toggle__icon { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.nav-toggle__icon span { display: block; height: 1.5px; background: currentColor; transition: transform var(--dur-s), opacity var(--dur-s); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: var(--ink-softer);
  border: 1px solid var(--line);
  flex-shrink: 0;
  transition: color var(--dur-s), border-color var(--dur-s), background var(--dur-s);
}
.sound-toggle:hover { border-color: var(--copper); color: var(--ink); }
.sound-toggle__icon { width: 18px; height: 18px; }
.sound-toggle__icon--on { display: none; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon--off { display: none; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon--on { display: block; }
.sound-toggle[aria-pressed="true"] { color: var(--copper); border-color: var(--copper); }

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-m) var(--ease-editorial);
  }
  .site-nav[data-open="true"] { max-height: 24rem; }
  .site-nav__list { flex-direction: column; align-items: flex-start; padding: 1rem var(--gutter) 1.5rem; gap: .25rem; }
  .site-nav__tag { width: 100%; padding: .75rem .5rem; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 3.5rem);
  padding-inline: 0; /* la fotografía debe llegar a los dos bordes */
  overflow: hidden;
  background: var(--coffee);
  color: var(--cream);
  isolation: isolate;
}

.hero__backdrop {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% 15%, var(--coffee-3) 0%, var(--coffee-2) 45%, var(--coffee) 78%, #150f0a 100%);
}

.hero__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  perspective: 1400px;
}

/* --- fotografía protagonista absoluta del hero: a todo el ancho,
   de borde a borde (foto real, sin texto incrustado) ---
   La caja conserva exactamente la relación de aspecto de la
   fotografía (1060/715 escritorio — 670/720 móvil, ver media query
   más abajo), así que nunca se recorta: solo cambia de tamaño. Por
   eso --paper-* (debajo) y KEY_ROWS_* (js/main.js), que están en %
   relativos a esta misma caja, siguen siendo válidos sin
   recalibrarlos. */
.hero__photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1060 / 715; /* proporción del recorte de escritorio */
  overflow: hidden;
  background: var(--coffee);
  transform-style: preserve-3d;
  transition: transform 260ms var(--ease-editorial);
  will-change: transform;

  /* Región de la hoja de papel, en % relativos a esta caja.
     Calibrado sobre assets/images/typewriter-hero-desktop.webp;
     recalibrar si cambia el encuadre de la fotografía. */
  --paper-top: 25%;
  --paper-left: 41%;
  --paper-width: 40%;
}

/* Red de seguridad solo para ventanas panorámicas extremas (p. ej.
   un monitor ultrawide 21:9/32:9, o una ventana deliberadamente muy
   ancha y baja): sin este límite, esas proporciones concretas harían
   la portada desmesuradamente alta. En cualquier pantalla normal
   (16:9, 16:10, portátil, tablet apaisado…) este mínimo nunca se
   activa y la fotografía sigue llegando a los dos bordes tal cual.
   Sin recortar ni un píxel: al derivar el ancho de una altura máxima
   y la propia relación de aspecto, la caja solo se encoge y se
   centra, nunca se deforma ni necesita recalibrar las variables de
   papel y teclas definidas más arriba y en js/main.js. */
@media (min-width: 861px) {
  .hero__photo-wrap {
    width: min(100%, calc(150vh * 1.4825));
  }
}
.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Red de seguridad si la imagen no carga: ver initHeroPhotoFallback() en main.js */
.hero__photo-wrap--missing::before {
  content: "Fotografía pendiente — coloca aquí assets/images/typewriter-hero-desktop.webp";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--paper-3);
}
.hero__photo-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 38%, transparent 45%, rgba(0,0,0,.4) 100%),
    linear-gradient(180deg, rgba(0,0,0,.14), transparent 22%, transparent 72%, rgba(0,0,0,.26));
}

/* --- capa de escritura: cubre el verso grabado en la foto y escribe el real --- */
.hero__paper {
  position: absolute;
  top: var(--paper-top);
  left: var(--paper-left);
  width: var(--paper-width);
  z-index: 2;
  padding: clamp(.55rem, 1.8vw, 1rem) clamp(.75rem, 2.1vw, 1.2rem);
  background: linear-gradient(115deg, rgba(255,222,178,.97) 0%, rgba(214,166,120,.96) 55%, rgba(171,131,103,.95) 100%);
  border-radius: 1px;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.45);
}
.hero__paper-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(.66rem, 1.5vw, .88rem);
  line-height: 1.55;
  color: var(--ink-soft);
  letter-spacing: .01em;
  white-space: pre-line;
}
.hero__paper-cursor {
  display: inline-block;
  width: .5em; height: 1em;
  margin-left: 1px;
  background: var(--copper);
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) { .hero__paper-cursor { animation: none; } }
@keyframes blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }

/* --- hotspots invisibles sobre las teclas de la fotografía --- */
.hero__keys {
  /* Cubre toda la fotografía: cada tecla se posiciona con left/top
     en % directamente sobre esta caja (ver KEY_ROWS_* en js/main.js). */
  position: absolute;
  inset: 0;
  z-index: 3;
}
.hero__key {
  /* El ancho debe ser menor que la separación real entre teclas (~5% en
     esta fotografía) para que los hotspots no se solapen: si se solapan,
     el navegador puede activar el :hover de la tecla vecina en vez de la
     que está bajo el cursor. Ver KEY_ROWS_* en js/main.js. */
  position: absolute;
  width: 4.4%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.hero__key::after {
  content: "";
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211,162,115,.6) 0%, rgba(211,162,115,.24) 45%, transparent 72%);
  opacity: 0;
  transition: opacity 220ms var(--ease-editorial), transform 220ms var(--ease-editorial);
  pointer-events: none;
}
.hero__key:hover::after,
.hero__key:focus-visible::after {
  opacity: 1;
  transform: scale(1.15);
}
.hero__key:active {
  transform: translate(-50%, -50%) translateY(2px) scale(.94);
}
.hero__key.is-flash::after {
  animation: heroKeyFlash 260ms ease-out;
}
@keyframes heroKeyFlash {
  0%   { opacity: 0;   transform: scale(.7); }
  35%  { opacity: 1;   transform: scale(1.3); }
  100% { opacity: 0;   transform: scale(1); }
}
@media (max-width: 860px) {
  /* En móvil/tablet no hay hover real y el objetivo táctil es
     demasiado pequeño para ser fiable: se desactiva la interacción
     de teclas, conservando el resto de la escena (foto + escritura). */
  .hero__key { pointer-events: none; }
}

/* --- pista de scroll, bajo la escena --- */
.hero__scroll-hint {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  width: fit-content;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(243,234,217,.5);
  transition: color var(--dur-s) var(--ease-editorial);
}
.hero__scroll-hint svg { width: 13px; height: 13px; animation: heroScrollHint 2.2s ease-in-out infinite; }
.hero__scroll-hint:hover { color: var(--copper-bright); }
@media (prefers-reduced-motion: reduce) { .hero__scroll-hint svg { animation: none; } }
@keyframes heroScrollHint {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50% { transform: translateY(5px); opacity: 1; }
}

.hero__placeholder-note {
  position: relative;
  z-index: 1;
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: rgba(243,234,217,.45);
  text-align: center;
}

/* --- composición lado a lado en pantallas amplias --- */
@media (max-width: 860px) {
  .hero { padding-top: 3.5rem; }
  .hero__photo-wrap {
    width: 100%;
    aspect-ratio: 670 / 720; /* proporción del recorte móvil */

    /* Región de la hoja, calibrada sobre
       typewriter-hero-mobile.webp. Las coordenadas de las teclas
       para este recorte viven en KEY_ROWS_MOBILE (js/main.js). */
    --paper-top: 26%;
    --paper-left: 23%;
    --paper-width: 63%;
  }
}

/* =========================================================
   EL AUTOR
   ========================================================= */
.author__grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.author__portrait-frame {
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(27,23,18,.16);
  background: linear-gradient(155deg, var(--paper-3), var(--paper-2));
}
.author__portrait-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem;
  color: var(--ink-softer);
  font-family: var(--font-mono);
  font-size: .8rem;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(27,23,18,.04) 0 2px, transparent 2px 14px);
}
.author__portrait-sub { font-size: .68rem; color: var(--copper); }
.author__caption { margin-top: .9rem; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-softer); }
.author__bio { margin-top: 1.4rem; display: grid; gap: 1.1rem; max-width: 38rem; font-size: 1.05rem; color: var(--ink-soft); }
.author__bio p { line-height: 1.75; }
.author__facts {
  margin-top: 2.2rem;
  display: grid;
  gap: .7rem;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  max-width: 26rem;
}
.author__facts li { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.author__facts-label { color: var(--ink-softer); }

@media (max-width: 760px) {
  .author__grid { grid-template-columns: 1fr; }
  .author__portrait-frame { max-width: 280px; margin-inline: auto; }
}

/* =========================================================
   POEMAS
   ========================================================= */
.poem-sheet {
  max-width: 44rem;
  margin-inline: auto;
}
.poem-sheet__paper {
  background: linear-gradient(180deg, var(--cream), var(--paper-2));
  border-radius: 2px;
  box-shadow: 0 30px 60px -20px rgba(27,23,18,.25), 0 1px 0 rgba(255,255,255,.4) inset;
  padding: clamp(2rem, 6vw, 3.6rem) clamp(1.6rem, 6vw, 4rem);
  position: relative;
  transition: transform var(--dur-m) var(--ease-editorial), box-shadow var(--dur-m) var(--ease-editorial);
}
.poem-sheet__paper::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.poem-sheet__number {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--copper);
  margin-bottom: 1.4rem;
}
.poem-sheet__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-style: italic;
  color: var(--ink);
}
.poem-sheet__body {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.9;
  color: var(--ink-soft);
  white-space: pre-line;
}
.poem-sheet__meta {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-softer);
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}
.poem-sheet.is-turning .poem-sheet__paper {
  transform: translateY(-4px) rotate(-0.4deg);
  box-shadow: 0 40px 70px -20px rgba(27,23,18,.3);
}

.poem-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.4rem;
  flex-wrap: wrap;
}

/* =========================================================
   OBRA — shelf
   ========================================================= */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1.75rem, 4vw, 2.75rem);
}
.book {
  display: flex;
  flex-direction: column;
}
.book__cover {
  aspect-ratio: 2 / 3;
  border-radius: 2px 5px 5px 2px;
  padding: 1.3rem;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 4px 6px 0 rgba(27,23,18,.08), 0 18px 34px -12px rgba(27,23,18,.28);
  transition: transform var(--dur-m) var(--ease-editorial), box-shadow var(--dur-m) var(--ease-editorial);
  position: relative;
}
.book__cover::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.book:hover .book__cover, .book:focus-within .book__cover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 6px 10px 0 rgba(27,23,18,.1), 0 26px 44px -14px rgba(27,23,18,.34);
}
.book__cover-year { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; opacity: .8; }
.book__cover-title { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.25; }
.book__meta { margin-top: 1.1rem; }
.book__title { font-size: 1.05rem; font-weight: 500; }
.book__pub { margin-top: .25rem; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-softer); }
.book__desc { margin-top: .7rem; font-size: .92rem; color: var(--ink-soft); line-height: 1.6; }
.book__details {
  margin-top: .9rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-m) var(--ease-editorial);
}
.book[data-open="true"] .book__details { max-height: 12rem; }
.book__excerpt {
  font-family: var(--font-display);
  font-style: italic;
  font-size: .95rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--copper);
  padding-left: .9rem;
  margin-top: .4rem;
}
.book__link {
  margin-top: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: .2rem;
}
.book__link:hover { color: var(--copper); border-color: var(--copper); }

/* ---------- Antologías / revistas ---------- */
.works__more {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(2rem, 5vw, 2.75rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.works__more-title {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1rem;
}
.works__more-list { display: grid; gap: .55rem; font-size: .94rem; color: var(--ink-soft); }
.works__more-meta { color: var(--ink-softer); font-size: .85rem; }
@media (max-width: 640px) {
  .works__more { grid-template-columns: 1fr; }
}

/* =========================================================
   ARCHIVO / PRENSA
   ========================================================= */
.archive__list { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.archive__item {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(260px, 1.1fr);
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
  background: #17130f;
  color: var(--cream);
  border-radius: 3px;
  padding: clamp(1.75rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.archive__item::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 85% -10%, rgba(211,162,115,.16), transparent 60%);
  pointer-events: none;
}
.archive__visual { margin: 0; position: relative; z-index: 1; }
.archive__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 2px;
  transform: rotate(-1.4deg);
  filter: drop-shadow(0 22px 32px rgba(0,0,0,.4));
  transition: transform var(--dur-m) var(--ease-editorial), filter var(--dur-m) var(--ease-editorial);
}
.archive__zoom:hover,
.archive__zoom:focus-visible {
  transform: rotate(0deg) translateY(-3px) scale(1.015);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.5));
}
.archive__zoom img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #e8dfcf;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
}
.archive__copy { position: relative; z-index: 1; }
.archive__eyebrow {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper-bright);
}
.archive__headline {
  margin-top: .6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  color: var(--cream);
  max-width: 16ch;
}
.archive__dek { margin-top: .9rem; font-size: .98rem; line-height: 1.65; color: var(--paper-3); max-width: 32rem; }
.archive__link {
  display: inline-flex;
  gap: .6rem;
  margin-top: 1.3rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--copper-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(211,168,109,.4);
  padding-bottom: .3rem;
}
.archive__link:hover { color: var(--cream); border-color: var(--copper-bright); }
@media (max-width: 760px) {
  .archive__item { grid-template-columns: 1fr; }
}

/* ---------- Lightbox (ampliar documento) ---------- */
.archive-lightbox {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(10, 8, 6, .92);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem);
}
.archive-lightbox__figure { margin: 0; max-width: 60rem; width: 100%; }
.archive-lightbox__figure img {
  width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: 2px; background: #e8dfcf;
}
.archive-lightbox__figure figcaption {
  margin-top: 1rem; text-align: center;
  font-family: var(--font-mono); font-size: .78rem; color: var(--paper-3);
}
.archive-lightbox__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream); border: 1px solid var(--line-on-dark);
  transition: border-color var(--dur-s), color var(--dur-s);
}
.archive-lightbox__close:hover { border-color: var(--copper); color: var(--copper-bright); }
.archive-lightbox__close svg { width: 16px; height: 16px; }
html.no-scroll { overflow: hidden; }

/* =========================================================
   PROYECTOS — hub escalable
   ========================================================= */
.projects-hub__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.25rem, 3vw, 1.75rem);
}
.projects-hub__cards a {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.6rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  text-decoration: none;
  transition: border-color var(--dur-s) var(--ease-editorial), transform var(--dur-s) var(--ease-editorial), background var(--dur-s) var(--ease-editorial);
}
.projects-hub__cards a:hover,
.projects-hub__cards a:focus-visible {
  border-color: var(--copper);
  transform: translateY(-3px);
  background: var(--cream);
}
.projects-hub__card-eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--copper);
}
.projects-hub__card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
}

/* =========================================================
   EL VIENTO YA ESTÁ ESCRITO
   ========================================================= */
.viento { background: var(--paper-2); overflow: hidden; }
.viento__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.viento__actions {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}
.viento__primary {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem 1.4rem;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  border-radius: 2px;
  transition: background var(--dur-s), transform var(--dur-s);
}
.viento__primary:hover { background: var(--coffee-2); transform: translateY(-1px); }
.viento__capsules { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.viento__capsules a {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: .2rem;
}
.viento__capsules a:hover { color: var(--copper); border-color: var(--copper); }
.viento__press { margin-top: 1.6rem; display: grid; gap: .5rem; }
.viento__press a {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-softer);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: .15rem;
}
.viento__press a:hover { color: var(--copper); border-color: var(--copper); }
.viento__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viento__word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  color: var(--ink);
  opacity: .1;
  letter-spacing: .02em;
}
.viento__line {
  position: absolute;
  background: var(--copper);
  opacity: .55;
  border-radius: 2px;
}
.viento__line--1 { width: 62%; height: 1px; top: 32%; left: 8%; transform: rotate(-6deg); }
.viento__line--2 { width: 44%; height: 1px; top: 55%; right: 10%; transform: rotate(4deg); }
.viento__line--3 { width: 30%; height: 1px; bottom: 22%; left: 18%; transform: rotate(-2deg); }
.js-anim .viento__line {
  transform-origin: left center;
  animation: vientoLine 5.5s var(--ease-editorial) infinite;
}
.viento__line--2 { animation-delay: .6s; }
.viento__line--3 { animation-delay: 1.2s; }
@keyframes vientoLine {
  0%, 100% { opacity: .35; }
  50% { opacity: .65; }
}
.viento__stamp {
  position: absolute;
  bottom: 6%;
  right: 6%;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-softer);
}
@media (max-width: 760px) {
  .viento__grid { grid-template-columns: 1fr; }
  .viento__visual { aspect-ratio: 16 / 9; order: -1; }
}

/* =========================================================
   PERIFERIAS CAMINADAS — territorio, ruta, cartografía
   ========================================================= */
.periferias { background: linear-gradient(180deg, var(--coffee) 0%, #1a130d 100%); }
.periferias__map {
  max-width: 40rem;
  margin: 0 auto clamp(2.5rem, 6vw, 3.5rem);
  color: var(--copper);
  opacity: .8;
}
.periferias__routes { width: 100%; height: auto; }
.periferias__routes path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  /* Sin JS o con prefers-reduced-motion, la ruta queda visible y
     estática (trazo sólido). Con JS, initPeriferiasRoutes() en
     main.js calcula dasharray/dashoffset y la dibuja al hacer scroll
     — ver ese archivo. */
}
.periferias__zones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .9rem 1.5rem;
  max-width: 62rem;
  margin: 0 auto;
  padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
  border-bottom: 1px solid var(--line-on-dark);
}
.periferias__zones li {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--paper-3);
  padding-left: 1.1rem;
  position: relative;
}
.periferias__zones li::before {
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 6px; height: 1px;
  background: var(--copper);
}
.periferias__pieces {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 62rem;
  margin-inline: auto;
}
.periferias__piece-title {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--copper-bright);
  margin-bottom: .7rem;
}
.periferias__piece p { font-size: .92rem; line-height: 1.65; color: var(--paper-3); }
.periferias__link {
  text-align: center;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.periferias__link a {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--line-on-dark);
  padding-bottom: .3rem;
}
.periferias__link a:hover { color: var(--copper-bright); border-color: var(--copper); }

/* =========================================================
   POEMAS CARNALES
   ========================================================= */
.carnales__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}
.carnales__meta {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--copper);
  margin-top: .3rem;
}
.carnales__text { margin-top: 1.4rem; font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); max-width: 36rem; }
.carnales__ritual {
  counter-reset: ritual;
  margin-top: 1.6rem;
  display: grid;
  gap: .55rem;
  max-width: 34rem;
}
.carnales__ritual li {
  counter-increment: ritual;
  position: relative;
  padding-left: 2rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-softer);
}
.carnales__ritual li::before {
  content: counter(ritual);
  position: absolute;
  left: 0; top: .05em;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--copper);
}
.carnales__video { margin-top: 1.8rem; }
.carnales__video-credit {
  margin-top: .6rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-softer);
}
.carnales__video-frame {
  margin-top: 1rem;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ink);
}
.carnales__video-frame iframe { width: 100%; height: 100%; border: 0; }
.carnales__press {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1.6rem 1.7rem;
}
.carnales__press-outlet {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-softer);
}
.carnales__press-headline {
  margin-top: .6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
}
.carnales__press-dek { margin-top: .6rem; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }
.carnales__press-date { margin-top: .9rem; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-softer); }
@media (max-width: 760px) {
  .carnales__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PROYECTOS
   ========================================================= */
.projects__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1.75rem, 4vw, 2.5rem);
}
.projects__item {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color var(--dur-s) var(--ease-editorial), transform var(--dur-s) var(--ease-editorial);
}
.projects__item:hover { border-color: var(--copper); transform: translateY(-3px); }
.projects__item-title { font-size: 1.05rem; color: var(--ink); }
.projects__item-text { margin-top: .6rem; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }

/* =========================================================
   CUADERNO — scrapbook, dark
   ========================================================= */
.notebook { background: linear-gradient(180deg, var(--coffee) 0%, #1a130d 100%); }
.scrapbook {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
}
.scrap {
  background: var(--paper);
  color: var(--ink-soft);
  padding: 1.4rem 1.3rem;
  border-radius: 1px;
  box-shadow: 0 18px 34px rgba(0,0,0,.35);
  font-family: var(--font-display);
  font-style: italic;
  font-size: .98rem;
  line-height: 1.6;
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--dur-m) var(--ease-editorial);
}
.scrap:hover { transform: rotate(0deg) translateY(-4px); }
.scrap__kind {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: .6rem;
}
.notebook__listen-link { margin-top: 2.4rem; text-align: center; }
.notebook__listen-link a {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--paper-3);
  text-decoration: none;
  border-bottom: 1px solid var(--line-on-dark);
  padding-bottom: .3rem;
}
.notebook__listen-link a:hover { color: var(--copper-bright); border-color: var(--copper); }

/* =========================================================
   RECITALES
   ========================================================= */
.events-list { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 46rem; }
.event {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.event__date { font-family: var(--font-mono); font-size: .82rem; color: var(--copper); }
.event__place { font-size: 1.05rem; }
.event__city { display: block; font-size: .85rem; color: var(--ink-softer); margin-top: .15rem; }
.event__status {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-softer);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .3rem .6rem;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; gap: .4rem; }
}

/* =========================================================
   ESCUCHAR — audio player
   ========================================================= */
.audio-player {
  max-width: 34rem;
  display: flex;
  align-items: center;
  gap: 1.3rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.3rem 1.5rem;
}
.audio-player__play {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-s);
}
.audio-player__play:hover { background: var(--coffee-2); }
.audio-player__icon { width: 18px; height: 18px; }
.audio-player__body { flex: 1; min-width: 0; }
.audio-player__title { font-size: .95rem; color: var(--ink-soft); }
.audio-player__track {
  margin-top: .7rem;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.audio-player__progress { height: 100%; width: 0%; background: var(--copper); transition: width .15s linear; }
.audio-player__status { margin-top: .5rem; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-softer); }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact__inner { max-width: 40rem; }
.contact__card { margin-top: 2.4rem; display: grid; gap: 1.6rem; }
.contact__copy {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .95rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .9rem 1.2rem;
  transition: border-color var(--dur-s), color var(--dur-s);
}
.contact__copy:hover { border-color: var(--copper); color: var(--copper); }
.contact__copy-icon { width: 16px; height: 16px; }
.contact__social { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.contact__social a {
  text-decoration: none;
  font-size: .92rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: .2rem;
}
.contact__social a:hover { color: var(--copper); border-color: var(--copper); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { border-top: 1px solid var(--line); padding-block: 2rem; }
.site-footer__inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-softer);
}
/* Crédito de diseño/desarrollo — mismo tratamiento de enlace discreto
   que el resto del sitio (ver .archive__link, .viento__press a...),
   para que no compita visualmente con el copyright. */
.site-footer__credit { margin-top: .4rem; }
.site-footer__credit a {
  color: var(--ink-softer);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: .1rem;
  transition: color var(--dur-s) var(--ease-editorial), border-color var(--dur-s) var(--ease-editorial);
}
.site-footer__credit a:hover { color: var(--copper); border-color: var(--copper); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translate(-50%, 0.6rem);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: .78rem;
  padding: .8rem 1.2rem;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-s) var(--ease-editorial), transform var(--dur-s) var(--ease-editorial);
  z-index: 200;
  max-width: min(90vw, 24rem);
  text-align: center;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mobile performance guard ---------- */
@media (max-width: 640px) {
  .hero__photo-vignette { opacity: .8; }
  .book:hover .book__cover, .book:focus-within .book__cover { transform: none; }
  .scrap:hover { transform: rotate(var(--tilt, 0deg)); }
}

/* Cubiertas auténticas: conservar la imagen completa sin recortarla. */
.book__cover--real { padding:0; overflow:hidden; background:#e6dfd4; }
.book__cover--real img { display:block; width:100%; height:100%; object-fit:contain; }
.book__cover--real::after { pointer-events:none; }

/* Retrato real de Jorge en la biografía; sin alterar el hero. */
.author__portrait-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }