/* ==========================================================================
   Blue&Yellow — página de lectura
   Titulares con la marca (Archivo Black). El texto va en serifa del sistema:
   se lee mejor en tiradas largas y no suma peso de descarga.
   ========================================================================== */

:root{
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --escala-lectura: 1;
}

/* Temas del lector ------------------------------------------------------ */
.pagina-lectura{
  --papel: var(--crema);
  --letra: #24211d;
  --letra-suave: rgba(36,33,29,.64);
  --linea: rgba(30,30,30,.14);
  --acento: var(--azul);
  --marca-cita: var(--amarillo);
  background: var(--papel);
}
html[data-tema="sepia"] .pagina-lectura{
  --papel: #F1E7D2;
  --letra: #3a2e21;
  --letra-suave: rgba(58,46,33,.68);
  --linea: rgba(58,46,33,.2);
  --acento: #9a4f0b;
  --marca-cita: #d9a441;
}
html[data-tema="noche"] .pagina-lectura{
  --papel: #161616;
  --letra: #e7e2d5;
  --letra-suave: rgba(231,226,213,.6);
  --linea: rgba(255,255,255,.14);
  --acento: var(--amarillo);
  --marca-cita: var(--amarillo);
}
html[data-tema="noche"]{ color-scheme: dark; }

::selection{ background: var(--amarillo); color: var(--tinta); }

/* La página de lectura ocupa todo el ancho (anula la regla vieja de .lectura) */
.pagina-lectura .lectura{ max-width:none; }

/* Barra de progreso ------------------------------------------------------ */
.lectura-progreso{
  position: fixed; inset: 0 0 auto; z-index: 150;
  height: 4px; pointer-events: none;
}
.lectura-progreso span{
  display: block; height: 100%;
  background: var(--amarillo);
  box-shadow: 0 0 10px rgba(255,232,0,.5);
  transform: scaleX(0); transform-origin: 0 50%;
}

.banda-previa{
  position: relative; z-index: 120;
  background: var(--azul); color: #fff;
  padding: .7rem var(--gutter); text-align: center;
  font-size: var(--t-sm);
}
.banda-previa a{ color: var(--amarillo); font-weight: 700; }

/* Cabecera --------------------------------------------------------------- */
.lectura__cabeza{
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.2rem, 5vw, 3.6rem);
  border-bottom: 6px solid var(--amarillo);
}
.lectura__cabeza::after{            /* semitono de marca, discreto */
  content: ""; position: absolute; right: -60px; top: -40px;
  width: clamp(160px, 26vw, 360px); aspect-ratio: 1;
  background: url("../img/estrella-halftone.svg") center/contain no-repeat;
  opacity: .16; pointer-events: none;
}
.lectura__cabeza-inner{ position: relative; z-index: 1; max-width: 920px; }
.lectura--poesia .lectura__cabeza-inner{ max-width: 820px; }

.migas{
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-bottom: 1.6rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.migas a{ color: rgba(255,255,255,.7); text-decoration: none; }
.migas a:hover{ color: var(--amarillo); }
.migas span{ color: rgba(255,255,255,.35); }

.lectura__numero{
  display: inline-block; margin: 0 0 1rem;
  padding: .35rem .75rem; border-radius: 999px;
  background: var(--amarillo); color: var(--tinta);
  font: 400 var(--t-xs)/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.lectura--entrevistas .lectura__numero{ background: #4D9BFF; color: #fff; }
.lectura--poesia .lectura__numero{ background: #fff; }

.lectura__titulo{
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.6rem);
  line-height: .95; color: var(--amarillo) !important;
  max-width: 18ch; overflow-wrap: break-word; hyphens: auto;
}
.lectura__bajada{
  max-width: 44ch; margin: 1.3rem 0 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.45;
  color: rgba(255,255,255,.86);
}

.lectura__firma{ display: flex; align-items: center; gap: .9rem; margin-top: 2rem; }
.lectura__avatar{
  flex: none; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--azul); color: #fff;
  font: 400 var(--t-sm)/1 var(--display); letter-spacing: .02em;
}
.lectura__autor{ margin: 0; font-size: var(--t-base); color: #fff; }
.lectura__autor strong{ color: var(--amarillo); }
.lectura__datos{ margin: .15rem 0 0; font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.62); }

/* Herramientas ----------------------------------------------------------- */
.lectura__papel{ color: var(--letra); padding-block: clamp(1.4rem, 3vw, 2.2rem) clamp(3rem, 7vw, 5rem); transition: background-color .25s ease, color .25s ease; }
.lectura__herramientas{
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end;
  max-width: 66ch; margin: 0 auto clamp(1.6rem, 4vw, 2.8rem);
  font-size: calc(var(--t-lg) * 1);
}
.lectura__herramientas[hidden]{ display: none; }
.herr{ display: inline-flex; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; }
.herr button{
  font: 700 var(--t-xs)/1 var(--texto); letter-spacing: .06em; text-transform: uppercase;
  background: transparent; color: var(--letra-suave); border: 0;
  padding: .55rem .8rem; cursor: pointer; min-height: 36px;
}
.herr button + button{ border-left: 1px solid var(--linea); }
.herr button:hover{ color: var(--letra); }
.herr button[aria-pressed="true"]{ background: var(--letra); color: var(--papel); }
.herr button:disabled{ opacity: .35; cursor: default; }

/* El texto --------------------------------------------------------------- */
.lectura__texto{
  max-width: 66ch; margin-inline: auto;
  font-family: var(--serif);
  font-size: calc(clamp(1.13rem, 1.02rem + .45vw, 1.32rem) * var(--escala-lectura));
  line-height: 1.75;
  color: var(--letra);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  hyphens: auto; -webkit-hyphens: auto;
  overflow-wrap: break-word;
  hanging-punctuation: first;
}
.lectura__texto > *{ margin: 0 0 1.15em; }
.lectura__texto > :last-child{ margin-bottom: 0; }
.lectura__texto p{ text-wrap: pretty; }

/* Narrativa: sangría de libro y letra capital */
.lectura--narrativa .lectura__texto > p{ margin-bottom: 0; }
.lectura--narrativa .lectura__texto > p + p{ text-indent: 1.6em; }
.lectura--narrativa .lectura__texto > p:has(+ :not(p)){ margin-bottom: 1.15em; }
.lectura--narrativa .lectura__texto > p:first-child::first-letter,
.lectura--ensayo .lectura__texto > p:first-child::first-letter{
  float: left;
  margin: .06em .12em 0 0;
  font-family: var(--display);
  font-size: 4.1em; line-height: .76;
  color: var(--acento);
}
/* Tras un cambio de escena: sin sangría y con versalitas, como en los libros */
.lectura--narrativa .lectura__texto > hr + p{ text-indent: 0; }

/* Primeras palabras en versalitas, como en las revistas impresas */
.lectura--narrativa .lectura__texto > p:first-child::first-line,
.lectura--narrativa .lectura__texto > hr + p::first-line,
.lectura--ensayo .lectura__texto > p:first-child::first-line{ font-variant-caps: all-small-caps; letter-spacing: .04em; }

.lectura__texto h2,
.lectura__texto h3{
  font-family: var(--display); text-transform: uppercase; letter-spacing: -.01em;
  line-height: 1.02; color: var(--letra);
  margin: 2.2em 0 .8em !important;
  hyphens: manual;
}
.lectura__texto h2{ font-size: 1.45em; }
.lectura__texto h3{ font-size: 1.1em; color: var(--acento); }

.lectura__texto a{
  color: inherit;
  text-decoration: underline; text-decoration-color: var(--acento);
  text-decoration-thickness: 2px; text-underline-offset: .18em;
}
.lectura__texto a:hover{ background: rgba(255,232,0,.35); }

.lectura__texto strong{ font-weight: 700; }
.lectura__texto em{ font-style: italic; }

.lectura__texto blockquote{
  position: relative;
  margin: 2em 0 !important; padding: .2em 0 .2em 1.3em;
  border-left: 5px solid var(--marca-cita);
  font-size: 1.16em; line-height: 1.5; font-style: italic;
  text-indent: 0;
}
.lectura__texto blockquote p{ margin: 0 0 .6em; text-indent: 0 !important; }
.lectura__texto blockquote p:last-child{ margin: 0; }

.lectura__texto ul,
.lectura__texto ol{ padding-left: 1.4em; }
.lectura__texto li{ margin-bottom: .4em; }
.lectura__texto li::marker{ color: var(--acento); }

/* Separador de escena */
.lectura__texto hr{
  border: 0; height: auto;
  margin: 2.4em auto !important;
  text-align: center; overflow: visible;
}
.lectura__texto hr::before{
  content: "✦   ✦   ✦";
  white-space: pre;
  color: var(--acento); font-size: .9em; letter-spacing: .2em;
}

/* Marca de fin, como en las revistas impresas */
.lectura__texto > p:last-child::after{
  content: ""; display: inline-block;
  width: .55em; height: .55em; margin-left: .45em;
  background: var(--amarillo); vertical-align: baseline;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

/* Poesía: sin sangrías ni cortes de palabra, versos respetados */
.lectura--poesia .lectura__texto{
  max-width: 44ch; hyphens: manual; -webkit-hyphens: manual;
  line-height: 1.7; font-size: calc(clamp(1.15rem, 1.04rem + .5vw, 1.38rem) * var(--escala-lectura));
}
.lectura--poesia .lectura__texto > p{ margin-bottom: 1.7em; text-wrap: wrap; }
.lectura--poesia .lectura__texto h2,
.lectura--poesia .lectura__texto h3{ text-align: left; margin-top: 2.6em !important; }

/* Entrevistas: las preguntas (en negrita) en la tipografía de la marca */
.lectura--entrevistas .lectura__texto strong{
  font-family: var(--texto); font-weight: 700; font-size: .92em;
  color: var(--acento);
}
html:not([data-tema="noche"]) .lectura--entrevistas .lectura__texto strong{ color: var(--azul-oscuro); }

/* Final del texto -------------------------------------------------------- */
.lectura__pie{ max-width: 66ch; margin: clamp(2.5rem, 6vw, 4rem) auto 0; }
.quien{
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.3rem 0; margin-bottom: 1.4rem;
  border-block: 1px solid var(--linea);
}
.quien__nombre{ margin: 0 0 .25rem; font: 400 var(--t-base)/1.1 var(--display); text-transform: uppercase; color: var(--letra); }
.quien__bio{ margin: 0; font-family: var(--serif); color: var(--letra-suave); font-size: var(--t-base); line-height: 1.55; }
.lectura__publicado{ font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--letra-suave); }

.compartir{ margin-top: 1.4rem; }
.compartir__titulo{ margin: 0 0 .7rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--letra); }
.compartir__botones{ display: flex; flex-wrap: wrap; gap: .5rem; }
.compartir__boton{
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .55rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--linea); background: transparent; color: var(--letra);
  font: 700 var(--t-xs)/1 var(--texto); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.compartir__boton:hover{ border-color: var(--letra); }
.compartir__boton--nativo{ background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
.compartir__boton[hidden]{ display: none; }

/* Anterior / siguiente --------------------------------------------------- */
.vecinas{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  padding-block: 0 clamp(2.5rem, 6vw, 4rem);
  max-width: 720px;
}
.vecina{
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem 1.2rem; border-radius: var(--radio);
  border: 1px solid var(--linea); color: var(--letra); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.vecina:hover{ border-color: var(--acento); transform: translateY(-2px); }
.vecina span{ font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.vecina strong{ font: 400 var(--t-base)/1.1 var(--display); text-transform: uppercase; }
.vecina small{ color: var(--letra-suave); font-size: var(--t-sm); }
.vecina--despues{ text-align: right; align-items: flex-end; }
@media (max-width: 640px){
  .vecinas{ grid-template-columns: 1fr; }
  .vecina--despues{ text-align: left; align-items: flex-start; }
}

/* Sigue leyendo ---------------------------------------------------------- */
.sigue{ padding-block: clamp(3rem, 7vw, 5rem); }
.sigue__titulo{ font-size: var(--t-2xl); margin-bottom: 1.8rem; }
.sigue__lista{
  list-style: none; margin: 0 0 1.8rem; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.tarjeta-lectura a{
  display: flex; flex-direction: column; gap: .5rem; height: 100%;
  padding: 1.3rem; border-radius: 20px; text-decoration: none; color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 10px, transparent 10px 20px), rgba(255,255,255,.04);
  transition: border-color .15s ease, transform .15s ease;
}
.tarjeta-lectura a:hover{ border-color: var(--amarillo); transform: translateY(-3px); }
.tarjeta-lectura__seccion{ font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amarillo); }
.tarjeta-lectura__titulo{ font: 400 var(--t-lg)/1 var(--display); text-transform: uppercase; }
.tarjeta-lectura__bajada{ font-family: var(--serif); font-style: italic; color: rgba(255,255,255,.75); }
.tarjeta-lectura__meta{ margin-top: auto; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }

.seccion-invitacion{ padding-block: clamp(2.5rem, 6vw, 4rem); }

/* Movimiento reducido ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .vecina:hover, .tarjeta-lectura a:hover{ transform: none; }
}

/* Impresión -------------------------------------------------------------- */
@media print{
  .sitio-header, .sitio-footer, .lectura-progreso, .lectura__herramientas,
  .compartir, .vecinas, .sigue, .seccion-invitacion, .migas, .saltar, .banda-previa{ display: none !important; }
  .pagina-lectura, .lectura__papel{ background: #fff !important; color: #000 !important; }
  .lectura__cabeza{ background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; padding: 0 0 1rem; }
  .lectura__cabeza::after{ display: none; }
  .lectura__titulo{ color: #000 !important; }
  .lectura__bajada, .lectura__autor, .lectura__datos{ color: #333 !important; }
  .lectura__avatar{ display: none; }
  .lectura__texto{ font-size: 11.5pt; color: #000; max-width: none; }
  .lectura__texto a::after{ content: " (" attr(href) ")"; font-size: .8em; }
}