/* ─────────────────────────────────────────────────────────────
   jorgegalindo.eu · paleta pastel · turquesa + lavanda
   tipografía: Spectral (display + body) + Roboto Mono (señalización)
   ───────────────────────────────────────────────────────────── */

:root {
  /* paper — crema ligeramente más fría */
  --paper:        #F4EFE2;
  --paper-soft:   #FAF6ED;
  --paper-deep:   #ECE5D2;

  /* ink — gris-azulado oscuro, no marrón */
  --ink:          #232631;
  --ink-soft:     #535868;
  --ink-mute:     #8A8E9C;

  /* verdiazulado / turquesa clarito — el protagonista.
     Mid-tone para texto y links: legible sobre crema sin perder vivacidad.
     Pastel para fondos de hover y highlights. Deep para botón primario. */
  --green:         #3FA3A0;
  --green-deep:    #1F7E7B;
  --green-pastel:  #A8E0DA;
  --green-soft:    rgba(63, 163, 160, 0.11);
  --green-haze:    rgba(168, 224, 218, 0.22);

  /* turquesa secundario más profundo (alias retro-compat) */
  --teal:         #1F7E7B;
  --teal-deep:    #115453;
  --teal-pastel:  #A8E0DA;
  --teal-soft:    rgba(31, 126, 123, 0.10);

  /* lavanda — terciaria, solo notas puntuales */
  --lav:          #7B6FA8;
  --lav-deep:     #5C5188;
  --lav-pastel:   #D9D0E8;
  --lav-soft:     rgba(123, 111, 168, 0.10);

  /* rules */
  --rule:         #D9D2C0;
  --rule-strong:  #BFB6A2;

  /* layout */
  --max:          760px;
  --max-wide:     1080px;
  --gutter:       clamp(1.25rem, 4vw, 2rem);

  /* type */
  --display:      "Spectral", "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --serif:        "Spectral", "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --mono:         "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* motion */
  --ease:         cubic-bezier(.2, .6, .2, 1);
  --t-fast:       .18s;
  --t-med:        .32s;
  --t-slow:       .56s;
}

/* ─────────────────────────  reset / base  ───────────────────────── */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Evita scroll horizontal accidental causado por pseudo-elementos posicionados
   con left/right negativos (los halos de los degradados). 'clip' es preferible
   a 'hidden' porque NO crea un contexto de scroll y por tanto no rompe el
   position:sticky del nav. */
html, body { overflow-x: clip; }

/* Spectral (Production Type, Google Fonts): serif editorial cálida con personalidad,
   pero más legible y contemporánea que Instrument Serif. Pesos múltiples (300/400/500/600).
   Pareja oficial-de-la-casa con Roboto Mono según ecosistema editorial. */
body {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
a:hover { color: var(--green); text-decoration-color: var(--green); }

cite { font-style: italic; }
em { font-style: italic; }
strong { font-weight: 600; }

::selection { background: var(--green-pastel); color: var(--ink); }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; padding: .5rem 1rem;
  background: var(--ink); color: var(--paper);
  z-index: 100; border-radius: 2px;
}

.rule--ascii {
  border: 0;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--rule) 0 8px,
    transparent 8px 14px
  );
  max-width: var(--max-wide);
  margin: clamp(1.25rem, 3vw, 2rem) auto;
  opacity: .8;
}

/* ─────────────────────────  nav  ───────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--rule); }

.nav__inner {
  max-width: var(--max-wide);
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  font-family: var(--mono);
  font-size: .8rem;
}
.nav__brand {
  font-family: var(--mono);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: 0;
}
.nav__brand-bracket {
  color: var(--green);
  transition: color var(--t-fast) var(--ease);
}
.nav__brand:hover .nav__brand-bracket { color: var(--green-deep); }

.nav__list {
  display: flex; gap: clamp(.85rem, 2vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__list a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 400;
  position: relative;
  padding-bottom: 2px;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav__list a:hover { color: var(--ink); }
.nav__list a:hover::after { transform: scaleX(1); }

/* ── separador vertical entre el último link del nav y el switcher de idioma ── */
.nav__sep {
  width: 1px;
  align-self: stretch;
  margin: .25rem .25rem;
  background: var(--rule);
}

/* ── language switcher: muy discreto, gris claro; el activo solo subrayado ── */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.nav__lang a {
  color: var(--rule-strong);    /* gris claro, casi línea */
  text-decoration: none;
  padding-bottom: 2px;
  font-size: .92em;             /* un punto menos que el resto del nav */
}
.nav__lang a::after { display: none; }   /* sin underline animada del nav */
.nav__lang a:hover { color: var(--ink-mute); }
.nav__lang a.is-active {
  color: var(--ink-mute);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.nav__lang-sep {
  color: var(--rule);           /* aún más tenue que los textos */
  user-select: none;
}

@media (max-width: 860px) {
  .nav__list { gap: .8rem; font-size: .74rem; }
}
@media (max-width: 720px) {
  .nav__list { gap: .65rem; font-size: .7rem; flex-wrap: wrap; justify-content: flex-end; }
  /* en pantallas chicas dejamos newsletter al final del wrap si hace falta, pero
     no ocultamos "quién" — ya estaba antes y se perdía ahí */
  .nav__list li:nth-child(4) { display: none; }   /* newsletter cae primero */
}
@media (max-width: 480px) {
  .nav__list li:nth-child(3) { display: none; }   /* escribir cae después */
  .nav__lang { font-size: .68rem; }
}

/* ─────────────────────────  hero  ───────────────────────── */

.hero { padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 7vw, 5rem); }
.hero__inner { max-width: var(--max); }

.hero__hello {
  font-family: var(--mono);
  font-size: .92rem;
  color: var(--green);
  margin: 0 0 1.75rem;
  letter-spacing: .04em;
  min-height: 1.4em;
}
.hero__hello .caret {
  display: inline-block;
  color: var(--green);
  margin-left: .15rem;
  font-weight: 300;
  animation: blink 1.2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .15; }
}

.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 1.75rem;
  color: var(--ink);
  max-width: 32ch;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--green-deep);
  font-weight: 500;
}
/* Frases del titular: cada una es un bloque, con pausa visual entre ellas. */
.hero__title .phrase { display: block; }
.hero__title .phrase + .phrase { margin-top: .55em; }

/* Typing por carácter dentro de spans por palabra. Los espacios entre palabras son
   literales en el DOM (nunca dentro de un span), así el navegador respeta los
   line-breaks naturales. Cada .word va con `white-space: nowrap` para no romperse
   por dentro. Los .char no escritos llevan opacity:0 — ocupan espacio, pero son
   invisibles. Resultado: el wrap final está fijado desde la primera renderización,
   los caracteres se "encienden" en su sitio definitivo y el text-wrap: balance
   sigue funcionando sobre el conjunto de palabras. */
.hero__title .word {
  white-space: nowrap;
}
.hero__title .char {
  display: inline;
  transition: opacity .04s linear;
}
.hero__title .char--pending {
  opacity: 0;
}
.hero__title .char--em {
  color: var(--green-deep);
  font-style: italic;
  font-weight: 500;
}
.hero__title .caret-inline {
  display: inline-block;
  color: var(--green);
  font-weight: 300;
  margin-left: .03em;
  animation: blink 1.2s ease-in-out infinite;
}
.hero__title.is-typed .caret-inline { display: none; }

.hero__sig {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 .85rem;
  max-width: 56ch;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  flex-wrap: wrap;
}
.hero__sig-text { flex: 1 1 320px; }
.hero__sig strong { color: var(--ink); font-weight: 500; }
.hero__sig a { color: var(--ink-soft); text-decoration-color: var(--rule-strong); }

.hero__avatar {
  display: inline-block;
  flex: 0 0 auto;
  width: 64px; height: 64px;
  margin-top: .15rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-deep);
}
.hero__avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* ─────────────────────────  buttons  ───────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 500; font-size: .82rem;
  padding: .8rem 1.15rem;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer; line-height: 1;
  letter-spacing: .015em;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn--primary {
  background: var(--green);
  color: var(--paper);
  border-color: var(--green);
}
.btn--primary:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
}
.btn--lav {
  background: var(--lav);
  color: var(--paper);
  border-color: var(--lav);
}
.btn--lav:hover {
  background: var(--lav-deep);
  border-color: var(--lav-deep);
}
.btn--outline {
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn--outline:hover {
  border-color: var(--green);
  color: var(--green);
}
.btn--ghost {
  color: var(--ink-soft);
  padding-left: 0; padding-right: 0;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 4px;
}
.btn--ghost:hover { color: var(--green); text-decoration-color: var(--green); }
.btn--lg { padding: .95rem 1.4rem; font-size: .88rem; }

/* ─────────────────────────  section heads  ───────────────────────── */

.section__head {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin: 0 0 1.5rem;
  text-transform: lowercase;
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}
/* ─── Secciones con degradados orgánicos suaves estilo CFG ─── */
.section--gradient {
  position: relative;
  isolation: isolate;
  /* Recorta los halos pseudo-elemento (left/right negativos) al ancho de la
     sección, para que no provoquen scroll horizontal en móvil/iPad. */
  overflow: clip;
}
.section--gradient > .container,
.section--gradient > .container.newsletter__inner {
  position: relative;
  z-index: 1;
}

.section--gradient::before,
.section--gradient::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
}

/* A — escribir: halo verde-agua arriba-derecha + verde-pastel suave abajo-izq */
.section--gradient-a::before {
  top: -10%; right: -8%;
  width: 55%; height: 75%;
  background: radial-gradient(circle at center, var(--green-pastel) 0%, transparent 65%);
  opacity: .45;
}
.section--gradient-a::after {
  bottom: -15%; left: -10%;
  width: 50%; height: 60%;
  background: radial-gradient(circle at center, var(--green-haze) 0%, transparent 70%);
  opacity: .65;
}

/* B — newsletter: combo lavanda + verde, más expresivo */
.section--gradient-b::before {
  top: 5%; left: -12%;
  width: 60%; height: 80%;
  background: radial-gradient(circle at center, var(--lav-pastel) 0%, transparent 65%);
  opacity: .40;
}
.section--gradient-b::after {
  bottom: -15%; right: -10%;
  width: 55%; height: 70%;
  background: radial-gradient(circle at center, var(--green-pastel) 0%, transparent 65%);
  opacity: .35;
}

/* C — directo: turquesa abajo-centro + verde arriba-izq */
.section--gradient-c::before {
  top: -10%; left: -5%;
  width: 50%; height: 65%;
  background: radial-gradient(circle at center, var(--teal-pastel) 0%, transparent 65%);
  opacity: .40;
}
.section--gradient-c::after {
  bottom: -15%; left: 30%;
  width: 60%; height: 75%;
  background: radial-gradient(circle at center, var(--green-haze) 0%, transparent 70%);
  opacity: .55;
}

/* ─────────────────────────  shared titles  ───────────────────────── */

.log__title,
.band__title,
.book__title,
.tray__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 .85rem;
  color: var(--ink);
  text-wrap: balance;
}

/* ─────────────────────────  book  ───────────────────────── */

.book {
  padding: clamp(1.75rem, 4.5vw, 3rem) 0;
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.book > * { position: relative; z-index: 1; }
/* Halo colorista detrás de la portada del libro: verde + lavanda combinados.
   Usamos z-index:0 (no -1) y subimos opacidad para que sea claramente visible. */
.book::before,
.book::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(45px);
}
.book::before {
  top: 8%;
  left: -3%;
  width: 32%;
  height: 75%;
  background: radial-gradient(circle at center, var(--green-pastel) 0%, transparent 60%);
  opacity: .85;
}
.book::after {
  top: 35%;
  left: 18%;
  width: 22%;
  height: 50%;
  background: radial-gradient(circle at center, var(--lav-pastel) 0%, transparent 60%);
  opacity: .7;
}
@media (max-width: 800px) {
  .book::before { left: -10%; width: 65%; }
  .book::after { left: 30%; width: 50%; opacity: .55; }
}

.book__inner {
  max-width: var(--max-wide);
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 800px) {
  .book__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .book__cover { max-width: 200px; }
}

.book__cover { display: block; width: 100%; }
.book__cover-img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  border-radius: 1px;
  box-shadow:
    0 22px 40px -22px rgba(35, 38, 49, .35),
    0 4px 12px -8px rgba(35, 38, 49, .15);
  transition: transform var(--t-med) var(--ease);
}
.book__cover-img:hover { transform: translateY(-2px); }

.book__copy { max-width: 56ch; }
.book__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.8vw, 2.55rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin-bottom: .25rem;
}
.book__subtitle {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  color: var(--green-deep);
  margin: 0 0 1.5rem;
}
.book__points {
  list-style: none; padding: 0; margin: 0 0 1.75rem;
  border-top: 1px solid var(--rule);
}
.book__points li {
  padding: .9rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: .5rem;
}
.book__points li::before {
  content: counter(book-points, decimal-leading-zero);
  counter-increment: book-points;
  color: var(--green);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  padding-top: .15em;
}
.book__points { counter-reset: book-points; }
.book__points strong { color: var(--green-deep); font-weight: 500; }
.book__buy { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ─────────────────────────  band (ecpol)  ───────────────────────── */

.band { padding: clamp(1.75rem, 4.5vw, 3rem) 0; }
.band__inner { max-width: var(--max-wide); }
.band__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 760px) { .band__grid { grid-template-columns: 1fr; } }

.band__copy {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
}
.band__cta { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.band__note {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-mute);
  margin: 0;
}

/* ─────────────────────────  ecpol — policy briefs destacados  ───────────────────────── */

.ecpol__briefs {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding-top: clamp(1rem, 3vw, 1.5rem);
  position: relative;
  isolation: isolate;
}
.ecpol__briefs > * { position: relative; z-index: 1; }
/* Halos detrás del grid de briefs: teal arriba-derecha + lavanda abajo-izq. */
.ecpol__briefs::before,
.ecpol__briefs::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(55px);
}
.ecpol__briefs::before {
  top: -8%;
  right: -6%;
  width: 45%;
  height: 85%;
  background: radial-gradient(circle at center, var(--teal-pastel) 0%, transparent 58%);
  opacity: .8;
}
.ecpol__briefs::after {
  bottom: -10%;
  left: 12%;
  width: 42%;
  height: 75%;
  background: radial-gradient(circle at center, var(--lav-pastel) 0%, transparent 58%);
  opacity: .65;
}
.ecpol__briefs-head {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--lav);
  letter-spacing: .04em;
  margin: 0 0 1rem;
  text-transform: lowercase;
}
.ecpol__briefs-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (max-width: 760px) {
  .ecpol__briefs-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}
.brief {
  min-width: 0;
}
.brief__link {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: .65rem;
  text-decoration: none;
  color: var(--ink);
  height: 100%;
}
.brief__cover {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  box-shadow: 0 12px 30px -22px rgba(35, 38, 49, .35);
  transition: transform var(--t-med) var(--ease);
}
.brief__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-med) var(--ease);
}
.brief__link:hover .brief__cover { transform: translateY(-2px); }
.brief__link:hover .brief__cover img { transform: scale(1.02); }
.brief__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  background-image: linear-gradient(var(--lav), var(--lav));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-med) var(--ease), color var(--t-fast) var(--ease);
  padding-bottom: 2px;
  align-self: start;
}
.brief__link:hover .brief__title {
  background-size: 100% 1px;
  color: var(--lav);
}

/* ─────────────────────────  log (escribir) — TRES feeds  ───────────────────────── */

.log { padding: clamp(1.75rem, 4.5vw, 3rem) 0; }
.log__title { margin-bottom: 1.5rem; }

.log__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.log__list--unified { max-width: var(--max); margin: 0 auto; }

.log__item {
  position: relative;
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 110px 90px 1fr;
  gap: 1.25rem;
  align-items: baseline;
}
@media (max-width: 600px) {
  .log__item {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
}

.log__tag {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--ink-mute);
  display: inline-block;
  padding: .15em .5em;
  border-radius: 2px;
  border: 1px solid var(--rule-strong);
  width: fit-content;
}
.log__tag--ecpol {
  color: var(--green-deep);
  border-color: var(--green);
  background: var(--green-soft);
}
.log__tag--elpais {
  color: var(--ink-soft);
  border-color: var(--rule-strong);
  background: transparent;
}

.log__date {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  color: var(--ink-mute);
  letter-spacing: .02em;
}

.log__body { min-width: 0; }
.log__title-link {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.28;
  margin: 0;
  letter-spacing: -0.005em;
}
.log__title-link a {
  text-decoration: none;
  color: var(--ink);
  background-image: linear-gradient(var(--green), var(--green));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-med) var(--ease), color var(--t-fast) var(--ease);
  padding-bottom: 2px;
}
.log__title-link a:hover {
  background-size: 100% 1px;
  color: var(--green);
}

.log__excerpt {
  /* solo se usa en el placeholder "// pronto." del log */
  font-family: var(--serif);
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.5;
  margin: .25rem 0 0;
  max-width: 38ch;
}

/* ─────────────────────────  newsletter  ───────────────────────── */

.newsletter { padding: clamp(1.75rem, 4.5vw, 3rem) 0; }
.newsletter__inner { max-width: var(--max-wide); }
.newsletter__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.newsletter__lede {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 .65rem;
  max-width: 48ch;
}
.newsletter__lede em {
  color: var(--green-deep);
  font-style: italic;
}

.newsletter__feed { padding-top: .25rem; }

/* Asegurar que el grid de la newsletter va sobre el degradado */
.newsletter .newsletter__inner { position: relative; z-index: 1; }

/* Bloques de obsesiones con sus posts del tag substack */
.obsesion-block {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
  align-items: baseline;
}
.obsesion-block:first-child { padding-top: .25rem; }
.obsesion-block:last-child { border-bottom: 0; }
.obsesion-block__num {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--green);
  line-height: 1;
  padding-top: .25em;
  text-align: center;
}
.obsesion-block__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 .55rem;
  letter-spacing: -0.005em;
}
.obsesion-block__title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--green-pastel), var(--green-pastel));
  background-size: 100% 0;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-med) var(--ease);
  padding: 0 .15em;
}
.obsesion-block__title a:hover { background-size: 100% 60%; color: var(--ink); }
/* (.obsesion-block__copy retirado — los leads ya no se muestran) */
.obsesion-block__posts {
  list-style: none; padding: 0; margin: 0;
}
.obsesion-block__posts li { padding: .25rem 0; }
.obsesion-block__post-date {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  color: var(--ink-mute);
  margin-right: .5rem;
}
.obsesion-block__post-link {
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--green), var(--green));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-med) var(--ease), color var(--t-fast) var(--ease);
  padding-bottom: 1px;
}
.obsesion-block__post-link:hover {
  background-size: 100% 1px;
  color: var(--green-deep);
}
.obsesion-block__empty {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-mute);
  margin: 0;
}

@media (max-width: 600px) {
  .obsesion-block { grid-template-columns: 1fr; gap: .35rem; }
}

/* ─────────────────────────  directo  ───────────────────────── */

.directo { padding: clamp(1.75rem, 4.5vw, 3rem) 0; }
.directo__group { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.directo__group:last-child { margin-bottom: 0; }
.directo__group-head {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--green);
  margin: 0 0 .5rem;
  text-transform: lowercase;
}
.directo__list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.directo__list--media .directo__title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--lav), var(--lav));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-med) var(--ease), color var(--t-fast) var(--ease);
  padding-bottom: 2px;
}
.directo__list--media .directo__title a:hover { background-size: 100% 1px; color: var(--lav); }
.directo__item {
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 130px 1fr 1fr;
  gap: 1.25rem;
  align-items: baseline;
}
@media (max-width: 760px) {
  .directo__item { grid-template-columns: 1fr; gap: .15rem; }
}
.directo__when {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-mute);
  letter-spacing: .04em;
  margin: 0;
}
.directo__when::before { content: ">>> "; color: var(--green); }
.directo__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0;
}
.directo__where {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-soft);
  margin: 0;
}
.directo__where em { color: var(--green-deep); font-style: normal; font-weight: 500; }

/* ─────────────────────────  quien  ───────────────────────── */

.quien { padding: clamp(1.75rem, 4.5vw, 3rem) 0; }
.quien__inner { max-width: var(--max-wide); }
.quien__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 760px) {
  .quien__layout { grid-template-columns: 1fr; }
  .quien__photo { max-width: 220px; }
}

.quien__photo { margin: 0; }
.quien__photo-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule);
  border-radius: 1px;
  filter: grayscale(100%);
  transition: filter var(--t-slow) var(--ease);
}
.quien__photo-img:hover { filter: grayscale(0%); }

.quien__copy { max-width: 60ch; }
.quien__copy p {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1rem;
}
.quien__lede {
  font-family: var(--display) !important;
  font-style: italic;
  font-size: 1.25rem !important;
  line-height: 1.4 !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
}

/* Trayectoria fusionada dentro de quién: bloque inferior, separado solo por aire. */
.quien__tray {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
  isolation: isolate;
}
.quien__tray > * { position: relative; z-index: 1; }
/* Halo discreto detrás del bloque de libros antiguos + paper: verde-pastel. */
.quien__tray::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  bottom: 0;
  right: -5%;
  width: 45%;
  height: 70%;
  background: radial-gradient(circle at center, var(--green-pastel) 0%, transparent 60%);
  filter: blur(55px);
  opacity: .7;
  border-radius: 50%;
}
.quien__tray::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 5%;
  left: -8%;
  width: 30%;
  height: 50%;
  background: radial-gradient(circle at center, var(--lav-pastel) 0%, transparent 60%);
  filter: blur(50px);
  opacity: .55;
  border-radius: 50%;
}

/* ─────────────────────────  trayectoria  ───────────────────────── */

.tray { padding: clamp(1.75rem, 4.5vw, 3rem) 0; }
.tray__title { font-size: clamp(1.5rem, 2.8vw, 1.9rem); margin-bottom: 1.5rem; }
.tray__grid {
  max-width: var(--max-wide);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 760px) { .tray__grid { grid-template-columns: 1fr; } }

.tray__col { /* sin línea superior; el grid ya da el ritmo */ }
.tray__col-title {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  color: var(--green);
  margin: 0 0 1rem;
  letter-spacing: .03em;
  text-transform: lowercase;
}
.tray__col-copy {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1rem;
  max-width: 44ch;
}
.tray__books {
  list-style: none; padding: 0; margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
}
.tray__books li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .55rem 0;
}
.tray__book-title { min-width: 0; }
.tray__subhead {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--green);
  letter-spacing: .04em;
  margin: 1.5rem 0 .75rem;
  text-transform: lowercase;
}
.tray__cover {
  display: block;
  width: 36px;
  aspect-ratio: 2 / 3;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 1px;
  overflow: hidden;
}
.tray__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tray__paper-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 1rem;
  align-items: start;
  margin: 0 0 .85rem;
}
.tray__cover--paper {
  width: 50px;
  aspect-ratio: 1 / 1.3;
}
.tray__paper { margin: 0; }
.tray__year {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.tray__paper {
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 .85rem;
}
.tray__more {
  font-family: var(--mono);
  font-size: .8rem;
  margin: 0;
}

/* ─────────────────────────  footer  ───────────────────────── */

.footer {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.25rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-soft);
}
.footer__inner {
  max-width: var(--max-wide);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.footer__write { display: flex; flex-direction: column; gap: .75rem; max-width: 56ch; }
.footer__label {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.5;
  letter-spacing: .01em;
  margin: 0;
}
.footer__email {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  letter-spacing: -0.005em;
  transition: color var(--t-fast) var(--ease), border-bottom-color var(--t-fast) var(--ease);
}
.footer__email:hover { color: var(--green); border-bottom-color: var(--green); }
.footer__links {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 1.25rem;
  font-family: var(--mono);
  font-size: .85rem;
  flex-wrap: wrap;
}
.footer__links a { color: var(--ink-soft); text-decoration: none; }
.footer__links a:hover { color: var(--green); }
.footer__bottom {
  max-width: var(--max-wide);
  padding-top: 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-mute);
  letter-spacing: .02em;
}
.footer__bottom p { margin: 0; }

/* ─────────────────────────  reveal animations  ───────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.is-in > * { animation: stagger var(--t-slow) var(--ease) backwards; }
.reveal.is-in > *:nth-child(1) { animation-delay: 0ms; }
.reveal.is-in > *:nth-child(2) { animation-delay: 80ms; }
.reveal.is-in > *:nth-child(3) { animation-delay: 160ms; }
.reveal.is-in > *:nth-child(4) { animation-delay: 240ms; }
.reveal.is-in > *:nth-child(5) { animation-delay: 320ms; }

@keyframes stagger {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

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

/* ── basics: visible only when active language is English ── */
.basics-link { display: none; }
html[lang="en"] .basics-link { display: block; }

.hero__sig-note {
  margin: .85rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: var(--max);
}
.hero__sig-note a {
  color: var(--ink);
  font-weight: 500;
  font-style: normal;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero__sig-note a:hover {
  color: var(--green-deep);
  border-bottom-color: var(--green);
}
.hero__sig-note-arrow {
  display: inline-block;
  color: var(--green);
  font-style: normal;
  transition: transform var(--t-fast) var(--ease);
  will-change: transform;
}
.hero__sig-note a:hover .hero__sig-note-arrow {
  transform: translateX(3px);
}