/* ============================================================
   Newsletter "El Enfoque" — Edición N.º 01
   "Entre el orden y la sobrecarga."

   CSS propio de esta pieza. Escrito mobile first: la base es
   móvil y el bloque @media (min-width: 841px) agrega el layout
   de escritorio — 841px es el complemento exacto del único
   breakpoint del design system (max-width: 840px).

   Los valores de tipografía, color y espaciado salen del
   diseño de Claude Design; lo que estaba en style="" inline
   está acá con clases semánticas.
   ============================================================ */

/* ───── Estado inicial de lo que anima ─────
   .has-anim la pone un script inline en el <head>, antes del primer
   pintado, y sólo si el sistema no pide movimiento reducido. Si GSAP
   no llega a cargar, main.js la saca y todo queda visible. */
.has-anim .nl-tag,
.has-anim .nl-title,
.has-anim .nl-standfirst,
.has-anim .nl-byline,
.has-anim .nl-meta,
.has-anim .nl-hero-photo,
.has-anim .problem-title,
.has-anim .article-body > *,
.has-anim .article-stat,
.has-anim .article-callout,
.has-anim .article-figure,
.has-anim .article-bio,
.has-anim .article-refs,
.has-anim .nl-index-media,
.has-anim .nl-index-copy > *,
.has-anim .nl-tabs,
.has-anim .nl-person,
.has-anim .nl-person-hero-photo {
  opacity: 0;
}
/* Las líneas del índice se "dibujan" de izquierda a derecha */
.has-anim .nl-index-rule { transform: scaleX(0); }

/* SplitText no puede medir líneas con text-wrap: balance (el design
   system lo aplica a todos los h1–h4) — por eso no usamos balance acá.
   pretty sí es compatible: evita la huérfana sin tocar cómo SplitText
   mide las líneas para la animación. */
.problem-title { text-wrap: pretty; }

/* Cada línea de la cita se revela desde atrás de su propia máscara.
   El padding evita que se corten las colas de la "p" y la "j"; el
   margen negativo lo compensa para no alterar el interlineado. */
.quote-line-mask {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* Sólo para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ───── Estados del menú ─────
   El design system deja el panel y el backdrop ocultos y sin
   definir el estado abierto (en producción lo maneja el JS).
   Acá lo definimos con una clase; el movimiento lo pone GSAP. */
.menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.menu-panel.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* ───── Barra de newsletter ───── */
.nl-bar {
  background: var(--c-orange);
  padding: 14px var(--margin-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.nl-bar-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--display);
  font-size: 13px;
  color: var(--c-cream);
}
.nl-bar-issue { font-family: var(--body); font-weight: 600; }
.nl-bar-date  { font-family: var(--body); font-weight: 500; opacity: .85; }
.nl-bar-link {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  color: var(--c-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}
.nl-bar-link:hover { opacity: .7; }

/* Separador "·" reutilizado en la barra y en el meta del hero */
.nl-dot { opacity: .5; }

/* ───── Hero ───── */
.nl-hero-shell { position: relative; }

.nl-hero {
  background: linear-gradient(
    180deg,
    var(--c-orange) 0 58%,
    rgba(255,151,101,0.72) 78%,
    var(--c-cream) 100%
  );
  /* Espacio para el nav (position:absolute, se superpone arriba del hero).
     = 2x el padding-block del nav + lo que sea más alto entre el logo (su
     ancho clamp() / relación de aspecto 457:216) y el botón de menú (su ícono
     clamp() + 16px de padding) — a los anchos chicos manda el ícono, no el
     logo. +2px de margen de seguridad para no quedar pegado por redondeo. */
  padding-top: calc(
    2 * clamp(18px, 4.8vw, 28px) +
    max(
      clamp(107px, 28.8vw, 139px) * 0.4726,
      clamp(34px, 9vw, 42px) + 16px
    ) + 2px
  );
  padding-bottom: 64px;
  overflow: hidden;
}

.nl-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.nl-tag {
  font-family: var(--display);
  /* Un paso atrás del 6.3px (se veía ilegible una vez que el CSS se
     actualizaba de verdad); el tamaño original vuelve en el bloque
     desktop de más abajo. */
  font-size: 9px;
  color: var(--c-cream);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: 3px 8px;
}

/* Escala alineada con el hero del sitio: a cuerpo chico esta display se
   lee más gruesa, así que el titular sube y el interlineado se cierra.
   Pero no menos de 1.04: en GC Bargain las colas (j g p q y) bajan 0.25 em y
   las letras altas (i l d b h) suben 0.73 em. Con 0.96 se tocaban cuando una
   caía sobre la otra ("Viajeros / el tiempo"); 1.04 deja 0.06 em de aire en
   el peor caso. */
.nl-title {
  color: var(--c-cream);
  font-size: clamp(44px, 6.6vw, 104px);
  line-height: 1.04;
  margin: 0;
}
/* Títulos con una palabra muy larga ("neurodivergentes:"): a tamaño normal esa
   palabra sola es más ancha que la columna y se sale. El generador de ediciones
   agrega esta clase cuando alguna palabra del título tiene 14 letras o más. */
.nl-title--long { font-size: clamp(34px, 11vw, 44px); }
/* Cortes de línea fijos (campo "titulo-cortes" del borrador). Excepción
   puntual de la 05: la autora no acepta cambiar el título. En móvil los
   cortes no se aplican; en escritorio sí, con una letra apenas más chica
   para que su línea más larga ("las mujeres y niñas", 8,1 em) siempre entre
   en la columna, que desde 1440 px deja de crecer. */
.nl-title-br { display: none; }

.nl-standfirst {
  margin: 28px 0 0;
  max-width: 440px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
  color: var(--c-cream);
}

.nl-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}
.nl-byline-photo {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.nl-byline-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 16.5px;
  color: var(--c-cream);
  margin: 0 0 3px;
}
.nl-byline-role {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  color: rgba(239,240,235,.78);
  max-width: 360px;
}

.nl-meta {
  display: flex;
  align-items: center;
  /* Achicado para mobile (gap y font-size) así fecha + tiempo de lectura +
     "copiar enlace" entran en una sola línea sin desbordar. El tamaño
     original vuelve en el bloque desktop de más abajo. */
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-weight: 600;
  font-size: 10px;
  color: var(--c-cream);
  opacity: .85;
}
.nl-meta .nl-dot { opacity: .4; }
.nl-meta-read { font-weight: 500; }

.nl-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(35,31,32,.15);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  color: var(--c-ink);
  cursor: pointer;
  transition: background .2s;
}
.nl-copy-btn:hover { background: rgba(255,255,255,.75); }
.nl-copy-btn svg { width: 12px; height: 12px; flex: none; }

.nl-hero-photo {
  width: 100%;
  /* height:auto es necesario: sin esto el atributo height="" del <img>
     gana y el aspect-ratio no se aplica */
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  object-fit: cover;
}

/* ───── Cuerpo del artículo ───── */
.article {
  background: var(--c-cream);
  padding-block: 64px 0;
}
.article--continues { padding-block: 0; }

/* Cita destacada dentro del artículo. .problem viene del design system (la
   sección "El problema" del sitio), con 64/120px en escritorio y 0/80px en
   móvil: una asimetría pensada para separar secciones del sitio, no para ir
   en medio de un texto. Acá el aire es el mismo arriba y abajo, y lo pone
   sólo la cita: lo que la rodea (párrafo, lista, foto, dato, subtítulo)
   pierde su margen propio, así el espacio no depende de qué haya al lado. */
.problem { padding-block: 56px; }
.article:has(+ .problem) .grid > :last-child,
.article:has(+ .problem) .grid > .article-body:last-child > :last-child { margin-bottom: 0; }
.problem + .article .grid > :first-child,
.problem + .article .grid > .article-body:first-child > :first-child { margin-top: 0; }

.article-body p {
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 22px;
  /* Evita que quede una palabra sola colgando en la última línea del
     párrafo (huérfana). Chrome/Safari/Edge recientes; en los navegadores
     que todavía no lo soportan (Firefox), el corte de línea sigue igual
     que antes — no rompe nada, sólo no mejora ahí. */
  text-wrap: pretty;
}

.article-lede {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 24px;
}
.article-lede::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 400;
  font-size: 76px;
  line-height: 0.75;
  color: var(--c-orange);
  padding: 4px 8px 0 0;
}

.article-body h2 {
  color: var(--c-orange);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  margin: 52px 0 18px;
}
/* Primer h2 de un bloque: no necesita el aire de arriba */
.article-body h2:first-child { margin-top: 8px; }

/* Frase que presenta una lista: "Con los años podemos sentir:" */
.article-body .article-lead-in {
  font-weight: 600;
  margin: 0 0 14px;
}

.article-list {
  margin: 0 0 28px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.article-list li {
  font-size: 17px;
  line-height: 1.6;
}

/* Epígrafe: la frase que abre una nota, antes del cuerpo */
.article-epigraph {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.2;
  color: var(--c-orange);
  margin: 0 0 36px;
  text-wrap: balance;
}

/* Recuadro tipo "¿Sabías que…?" — ficha aparte del hilo del texto */
.article-callout {
  background: #fff;
  border-radius: 18px;
  padding: 32px 30px 36px;
  box-shadow: 0 1px 3px rgba(35,31,32,.06);
}
.article-callout h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  color: var(--c-orange);
  margin: 0 0 22px;
}
.article-callout ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.article-callout li {
  position: relative;
  padding-left: 36px;
  font-size: 16px;
  line-height: 1.55;
}
.article-callout li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-orange);
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}

/* Nota al margen, para una aclaración que no puede pasarse por alto */
.article-note {
  border-left: 3px solid var(--c-orange);
  padding-left: 22px;
  margin: 36px 0;
}
.article-note-title {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  color: var(--c-orange);
  margin-bottom: 8px;
}
.article-note p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* Lista numerada: el número en la tipografía display, en naranja */
.article-list--numbered {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
}
.article-list--numbered li {
  counter-increment: item;
  position: relative;
  padding-left: 40px;
}
.article-list--numbered li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: -0.06em;
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.35;
  color: var(--c-orange);
}

/* ───── Reproductor de audio ─────
   Arriba del texto. Cerrado: el botón redondo y "Escuchar la nota ·
   N minutos". Al tocarlo se abre: tiempo, barra, ±15 s y velocidad.
   El botón es naranja con la flecha blanca (Alvi descartó el blanco);
   al pasar el mouse sube apenas y gana sombra, como .btn-primary. */
.audio-player {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
}
.audio-play {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-orange);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.audio-play:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(254,84,0,.28);
}
.audio-play:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
.audio-play svg { width: 24px; height: 24px; grid-area: 1 / 1; }
.audio-ico-pause,
.audio-player.is-playing .audio-ico-play { display: none; }
.audio-player.is-playing .audio-ico-pause { display: block; }

/* Con .audio-player adelante para ganarle a .article-body p */
.audio-player .audio-intro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  font-size: 15px;
}
.audio-intro-time { font-weight: 500; color: rgba(35,31,32,.6); }

/* En el celular, dos renglones: tiempo y barra arriba; botones abajo */
.audio-controls {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}
.audio-track {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.audio-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.audio-time {
  flex: none;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(35,31,32,.65);
}

/* Barra de avance: lo escuchado en naranja (--pct lo actualiza main.js) */
.audio-seek {
  --pct: 0%;
  flex: 1;
  min-width: 0;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.audio-seek::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--c-orange) var(--pct), rgba(35,31,32,.15) var(--pct));
}
.audio-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border: 0;
  border-radius: 50%;
  background: var(--c-orange);
}
.audio-seek::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(35,31,32,.15); }
.audio-seek::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--c-orange); }
.audio-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--c-orange); }
.audio-seek:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 4px; border-radius: 4px; }

.audio-skip {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(35,31,32,.7);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.audio-skip svg { width: 26px; height: 26px; }
.audio-skip:hover { color: var(--c-orange); background: rgba(254,84,0,.08); }
.audio-speed {
  min-width: 52px;
  margin-left: 6px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(35,31,32,.07);
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.audio-speed:hover { background: rgba(254,84,0,.12); color: var(--c-orange); }
.audio-skip:focus-visible,
.audio-speed:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

/* Dato destacado */
.article-stat {
  margin: 36px 0 8px;
  padding: 36px 0;
  border-top: 1px solid rgba(35,31,32,0.12);
  border-bottom: 1px solid rgba(35,31,32,0.12);
  display: grid;
  gap: 16px;
  align-items: center;
}
.article-stat-figure {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(52px, 6vw, 88px);
  color: var(--c-orange);
  line-height: 0.9;
}
.article-stat-text {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  max-width: 44ch;
}

/* Variante de dos cifras, una al lado de la otra */
.article-stat--duo { gap: 32px; }
.article-stat--duo .article-stat-figure {
  display: block;
  font-size: clamp(38px, 4.2vw, 60px);
  margin-bottom: 10px;
}
.article-stat--duo .article-stat-text { max-width: 30ch; }

/* Fotos del artículo */
.article-figure { margin: 40px 0 56px; }
.article-figure--tight { margin: 16px 0 56px; }
.article-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  object-fit: cover;
}
/* Pie de foto: créditos de imagen */
.article-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(35,31,32,.55);
}
.article-figure figcaption a { color: inherit; }
/* Par de fotos verticales lado a lado (dos imágenes seguidas en el borrador).
   Respeta la foto vertical entera en vez de recortarla a 16:9. */
.article-figure--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.article-figure--pair img { aspect-ratio: 2 / 3; }
.article-figure--pair figcaption { grid-column: 1 / -1; }

/* Firma */
.article-signoff {
  margin: 44px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  color: var(--c-ink);
}
.article-signoff-column {
  font-family: var(--body);
  font-weight: 500;
  font-size: 14.5px;
  color: rgba(35,31,32,0.65);
}

/* Bio de la autora.
   La foto va siempre arriba, a la altura del nombre: así se leen juntos
   aunque la bio sea larga. Regla de Alvi, vale para todas las ediciones. */
.article-bio {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(35,31,32,0.12);
}
.article-bio-photo {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.article-bio-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  color: var(--c-orange);
  margin: 0 0 6px;
}
.article-bio-text {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.article-bio-text + .article-bio-text { margin-top: 12px; }

/* Para profundizar */
.article-refs { padding: 40px 0 72px; }
.article-refs h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--c-orange);
  font-size: 22px;
  margin: 0 0 22px;
  padding-top: 32px;
  border-top: 1px solid rgba(35,31,32,0.15);
}
/* Párrafo de introducción antes de la lista (edición 02) */
.article-refs p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 22px;
}
/* Subtítulos dentro de las referencias (edición 05): sin la línea de arriba */
.article-refs .article-refs-subtitle {
  font-size: 20px;
  margin: 26px 0 14px;
  padding-top: 0;
  border-top: 0;
}
.article-refs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.article-refs li {
  font-size: 15px;
  line-height: 1.55;
}
.article-refs a {
  color: var(--c-orange);
  transition: opacity .2s;
}
.article-refs a:hover { opacity: 0.6; }

/* ───── Suscripción ───── */
.subscribe {
  background: var(--c-cream);
  padding-block: 72px 80px;
}
.subscribe-inner { text-align: center; }
.subscribe h2 {
  color: var(--c-orange);
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 28px;
}
.subscribe-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.subscribe-input {
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid rgba(35,31,32,.2);
  min-width: min(280px, 100%);
  background: #fff;
  color: var(--c-ink);
}
.subscribe-submit {
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  background: var(--c-orange);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 15px 30px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.subscribe-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(254,84,0,.28);
}
.subscribe-submit:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.subscribe-error {
  font-weight: 500;
  font-size: 15px;
  margin: 16px 0 0;
}
.subscribe-done { margin-top: 32px; }
.subscribe-thanks {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;   /* en 500 la í de "Psicología" y "Línea" se dibuja mal */
  text-wrap: balance; /* dos líneas parejas, sin "de" colgando al final */
  color: var(--c-orange);
  margin: 0;
}
.subscribe-note {
  font-weight: 500;
  font-size: 16px;
  margin: 16px 0 0;
}
[hidden] { display: none !important; }

/* ───── Índice y autoría (index.html, autores/) ─────
   Los arma armar-edicion.mjs leyendo las páginas edicion-NN.html.
   El encabezado reusa las clases del hero de las notas (.nl-title,
   .nl-standfirst), así entra con la misma animación. */
/* El encabezado del índice no tiene foto: es corto, y con el degradé de las
   ediciones (que se mide en %) el texto caía sobre el naranja ya aclarado.
   Acá el naranja es pleno hasta --fade antes del final, medido en px, así
   el texto siempre queda sobre naranja. El degradé tiene varias paradas
   para que arranque suave (con sólo dos se veía el borde donde empezaba)
   y sigue dentro de la lista hasta fundirse en crema.
   Va con doble clase para que no lo pise el .nl-hero del bloque de
   escritorio (más abajo en el archivo). */
.nl-hero.nl-hero--index {
  overflow: visible;   /* que no recorte el menú de ediciones abierto */
  --fade: 100px;
  padding-bottom: var(--fade);
  background: linear-gradient(
    180deg,
    var(--c-orange) 0 calc(100% - var(--fade)),
    color-mix(in srgb, var(--c-orange) 90%, var(--c-cream)) calc(100% - var(--fade) * .75),
    color-mix(in srgb, var(--c-orange) 68%, var(--c-cream)) calc(100% - var(--fade) * .45),
    color-mix(in srgb, var(--c-orange) 42%, var(--c-cream)) calc(100% - var(--fade) * .2),
    color-mix(in srgb, var(--c-orange) 24%, var(--c-cream)) 100%
  );
}
/* Titular del índice: siempre en dos líneas, "Un newsletter / sobre
   neurodivergencia." La línea larga mide 10,2 em en GC Bargain; en móvil
   la letra se calcula para que entre justo en el ancho de la columna. */
.nl-title--index .nl-title-br { display: inline; }
.nl-title--index { font-size: clamp(28px, calc(9.8vw - 5.2px), 64px); }

/* Pestañas "Por edición / Por autoría", debajo del título. Son links a
   dos páginas (index.html y autores/), no pestañas con JS: cada vista
   tiene su dirección y se puede compartir. Mismo lenguaje que los tags
   de las notas: píldora con borde crema; la activa, rellena. */
.nl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.nl-tab {
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
  color: var(--c-cream);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  padding: 9px 18px;
  /* Explícito: un <button> no hereda el alto de línea y quedaba más bajo
     que el link de al lado */
  line-height: 1.25;
  transition: background .2s, color .2s;
}
.nl-tab:hover { background: rgba(255,255,255,.14); }
.nl-tab.is-active {
  background: var(--c-cream);
  border-color: var(--c-cream);
  color: var(--c-orange);
}
.nl-tab:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 3px; }

/* Botón de ediciones: dice la edición que se ve y despliega la lista.
   Las pestañas van por encima del resto de la página (z-index) para que
   el menú abierto no quede tapado por las filas de abajo. */
.nl-tabs { position: relative; z-index: 30; }
.nl-tab-menu { position: relative; }
.nl-tab--menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  cursor: pointer;
}
.nl-tab--menu svg {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform .25s ease;
}
.nl-tab--menu[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Mismo vidrio crema que el menú principal del sitio */
.nl-tab-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: rgba(239, 240, 235, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.12);
  transform-origin: top left;
  visibility: hidden;
  opacity: 0;
}
.nl-tab-dropdown.is-open { visibility: visible; opacity: 1; }
.nl-tab-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 10px;
  transition: background .15s;
}
.nl-tab-option:hover,
.nl-tab-option.is-current { background: rgba(254,84,0,0.08); }
.nl-tab-option-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.1;
  color: var(--c-orange);
}
.nl-tab-option-date {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(35,31,32,.55);
}

/* Encabezado de la página de una persona: foto redonda, nombre, bio */
.nl-person-hero-photo {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 24px;
}
/* Sin foto (por ahora, Cristina): iniciales en un círculo */
.nl-person-hero-photo--iniciales,
.nl-person-photo--iniciales {
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
}
.nl-person-hero-photo--iniciales {
  background: var(--c-cream);
  color: var(--c-orange);
  font-size: 34px;
}
.nl-person-bio p + p { margin-top: 12px; }
.nl-person-bio a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Nombre en la firma y en la bio de cada nota: lleva a su página */
.nl-byline-name a:hover,
.article-bio-name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nl-index {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c-orange) 24%, var(--c-cream)) 0,
    var(--c-cream) 160px
  );
  padding-block: 0 16px;
}
.nl-index-list {
  grid-column: 1 / -1;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nl-index-item { position: relative; }


/* Línea naranja fina entre un artículo y el siguiente */
.nl-index-rule {
  display: block;
  height: 1px;
  background: var(--c-orange);
  transform-origin: left center;
}

.nl-index-link {
  display: grid;
  gap: 24px;
  padding-block: 40px;
}
.nl-index-item:first-child .nl-index-link { padding-top: 16px; }

/* La foto va dentro de un marco que recorta: así el zoom del hover
   queda adentro de las puntas redondeadas. isolation evita que Safari
   pierda el redondeo mientras la foto se agranda. */
.nl-index-media {
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}
.nl-index-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.nl-index-kicker {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 14px;
}
/* El titular grande y en naranja: con la portada cuadrada la fila es
   alta, y el titular es lo que la llena. */
.nl-index-title {
  color: var(--c-orange);
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.04;   /* no menos: ver la nota de .nl-title */
  text-wrap: pretty;
  transition: color .2s;
}
.nl-index-text {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.55;
  max-width: 56ch;
  text-wrap: pretty;
}

.nl-index-link:hover .nl-index-photo { transform: scale(1.04); }
.nl-index-link:hover .nl-index-title { color: rgba(254,84,0,0.7); }
.nl-index-link:focus-visible,
.nl-person-link:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 6px;
  border-radius: 20px;
}

/* "Por autoría": una persona por fila en el celular (foto a la
   izquierda), en tres columnas en escritorio. */
.nl-people {
  grid-column: 1 / -1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}
.nl-person-link {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: center;
  padding-block: 28px;
  border-top: 1px solid var(--c-orange);
}
.nl-person:first-child .nl-person-link { border-top: 0; padding-top: 24px; }
.nl-person-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.nl-person-photo--iniciales {
  background: var(--c-orange);
  color: var(--c-cream);
  font-size: 26px;
}
.nl-person-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  color: var(--c-orange);
  margin: 0 0 6px;
  transition: color .2s;
}
.nl-person-role {
  font-size: 14.5px;
  line-height: 1.45;
}
.nl-person-count {
  margin-top: 10px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(35,31,32,.6);
}
.nl-person-link:hover .nl-person-name { color: rgba(254,84,0,0.7); }
.nl-person-link:hover .nl-person-photo { transform: scale(1.04); }

/* Placeholder de foto: se ve mientras no haya imagen real en img/ */
.photo-slot {
  background: rgba(35,31,32,.06);
  border: 1px dashed rgba(35,31,32,.22);
}

/* ───────────────────────────── */
/* DESKTOP — grilla de 12        */
/* ───────────────────────────── */
@media (min-width: 841px) {
  .nl-hero {
    padding-top: 190px;
    padding-bottom: 96px;
  }
  .nl-hero-copy  { grid-column: 1 / span 6; }
  .nl-hero-media { grid-column: 7 / -1; }
  .nl-title--long { font-size: clamp(44px, 5.4vw, 84px); }
  .nl-title-br { display: inline; }
  .nl-title--cortes { font-size: clamp(40px, calc(5.9vw - 8px), 80px); }
  /* Degradé del hero en escritorio (aprobado por Alvi, 2026-09-23).
     Con el degradé original (58 % / 78 % / 100 %) el autor y la fecha caían
     donde el naranja ya aclaraba y quedaban al límite. Naranja pleno hasta el
     70 % y una transición larga que no termina en el borde del hero: llega a
     un durazno claro y sigue ~260px dentro del artículo hasta fundirse en
     crema. En móvil sigue el original: ahí el autor ya cae sobre naranja pleno. */
  .nl-hero {
    background: linear-gradient(
      180deg,
      var(--c-orange) 0 70%,
      color-mix(in srgb, var(--c-orange) 62%, var(--c-cream)) 86%,
      color-mix(in srgb, var(--c-orange) 24%, var(--c-cream)) 100%
    );
  }
  .nl-hero-shell + article > .article:first-child {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-orange) 24%, var(--c-cream)) 0,
      var(--c-cream) 260px
    );
  }

  /* Tamaño original de los tags — el achique de arriba es sólo para mobile */
  .nl-tags { gap: 8px; }
  .nl-tag  { font-size: 13px; padding: 6px 16px; }

  /* Tamaño y espaciado originales de la fila fecha/lectura/enlace —
     el achique de arriba es sólo para mobile */
  .nl-meta { gap: 10px; margin-top: 18px; font-size: 13px; }

  .article { padding-block: 64px 0; }
  /* Va después de .article: si no, su 64px pisa a la continuación (era un bug) */
  .article--continues { padding-block: 0; }
  .problem { padding-block: 96px; }
  .article-body,
  .article-bio,
  .article-refs { grid-column: 4 / span 6; }
  .article-stat,
  .article-callout {
    grid-column: 3 / span 8;
  }
  .article-stat {
    grid-template-columns: auto 1fr;
    gap: 32px;
  }
  .article-stat--duo { grid-template-columns: 1fr 1fr; gap: 48px; }
  .article-callout { padding: 40px 44px 44px; }
  .article-figure { grid-column: 2 / span 10; }
  /* Reproductor en una sola fila */
  .audio-player { margin-bottom: 48px; gap: 20px; }
  .audio-controls { flex-wrap: nowrap; gap: 16px; }
  .audio-track { flex: 1 1 auto; }
  .article-figure--pair { gap: 16px; }

  .subscribe { padding-block: 96px 100px; }
  .subscribe-inner { grid-column: 4 / span 6; }

  /* Índice: el encabezado no tiene foto, así que el texto toma más ancho.
     Arriba, más aire que en las ediciones: ahí el primer elemento son los
     tags, chicos; acá es el título grande y quedaba pegado al logo. */
  .nl-hero.nl-hero--index {
    --fade: 150px;
    padding-top: 230px;
  }
  .nl-hero--index .nl-hero-copy { grid-column: 1 / span 8; }
  .nl-title--index { font-size: clamp(44px, 5.4vw, 84px); }
  .nl-tabs { margin-top: 36px; }
  .nl-tab { font-size: 17px; padding: 11px 22px; }
  .nl-person-hero-photo { width: 132px; height: 132px; margin-bottom: 32px; }
  .nl-person-hero-photo--iniciales { font-size: 46px; }
  .nl-index {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-orange) 24%, var(--c-cream)) 0,
      var(--c-cream) 260px
    );
    padding-block: 16px 24px;
  }
  /* Portada en 4 columnas, texto desde la 5 con un margen propio: queda
     más cerca de la foto que si dejara una columna entera vacía. */
  .nl-index-link {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    align-items: center;
    padding-block: 56px;
  }
  .nl-index-item:first-child .nl-index-link { padding-top: 24px; }

  .nl-people {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--gutter);
    row-gap: 24px;
  }
  .nl-person-link,
  .nl-person:first-child .nl-person-link {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
    padding-block: 24px;
    /* En escritorio, sin líneas sobre los perfiles (Alvi, 2026-10-11);
       en el celular siguen separando una persona de la otra. */
    border-top: 0;
  }
  .nl-person-photo { width: 132px; height: 132px; }
  .nl-person-photo--iniciales { font-size: 46px; }
  .nl-person-name { font-size: 30px; }
  .nl-person-role { font-size: 15px; max-width: 34ch; }
  .nl-index-media { grid-column: 1 / span 4; }
  .nl-index-copy  {
    grid-column: 5 / -1;
    padding-left: clamp(16px, 3vw, 48px);
  }
  .nl-index-kicker { font-size: 13px; margin-bottom: 18px; }
  .nl-index-title { font-size: clamp(40px, 4.4vw, 64px); }
  .nl-index-text { margin-top: 24px; font-size: 18px; }
}