/* ===== Bitácora · páginas de entrada =====
   Comparte tokens y piezas de papel con styles.css (nav, tira, etiqueta, kicker,
   hojas rasgadas, marfil, cierre, meta, lightbox). Aquí solo vive lo propio
   de una crónica: cabecera con portada, prosa, citas, fotos y recortes de prensa. */

/* ----- Cabecera · papel carbón ----- */
.entrada-cabeza {
  position: relative;
  padding: clamp(40px, 7vh, 80px) clamp(20px, 6vw, 80px) calc(clamp(56px, 9vh, 104px) + var(--tear));
}
.entrada-cabeza-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
}
.miga {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--fg-muted);
  margin: 0 0 16px;
}
.miga a {
  color: var(--bone);
  border-bottom: 1px dashed rgba(237, 230, 214, .45);
  transition: background .2s ease, color .2s ease;
}
.miga a:hover { background: var(--blood); color: #fff; border-color: transparent; }
.entrada-titulo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--bone);
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.02;
  margin: 0 0 22px;
}
.entrada-titulo .tira {
  display: inline-block;
  font-size: .5em;
  line-height: 1.25;
  margin-top: .4em;
  transform: rotate(-.8deg);
}
.entrada-sub {
  max-width: 560px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--fg-muted);
  margin: 0 0 26px;
}
.entrada-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
/* Portada: lámina con borde hueso, ligeramente girada */
.portada {
  justify-self: center;
  width: min(100%, 520px);
  margin: 0;
  padding: 10px 10px 12px;
  background: var(--bone);
  box-shadow: var(--shadow-paper);
  transform: rotate(1.6deg);
  cursor: zoom-in;
}
.portada img { width: 100%; height: auto; background: #d8d0bf; }
.portada figcaption {
  margin: 10px 2px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* ----- Cuerpo · papel marfil ----- */
.entrada-cuerpo {
  padding: calc(var(--tear) + 72px) clamp(24px, 6vw, 80px) calc(96px + var(--tear));
}
.entrada-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.prosa p {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 34em;
}
.prosa p em {
  font-style: italic;
  background: var(--blood);
  color: #fff;
  padding: 0 .3em .08em;
}
.prosa h2,
.fotos-cabeza h2,
.prensa h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  margin: 40px 0 16px;
  color: var(--ink);
}
.prosa a {
  border-bottom: 1px dashed rgba(26, 22, 20, .45);
  transition: background .2s ease, color .2s ease;
}
.prosa a:hover { background: var(--blood); color: #fff; border-color: transparent; }
/* Cita: nota de papel fibra con la atribución en etiqueta */
.cita {
  position: relative;
  margin: 30px 0;
  padding: 24px 28px 20px;
  background: var(--fiber);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 16px -10px rgba(0, 0, 0, .4);
  transform: rotate(-.6deg);
}
.cita p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 12px;
}
.cita footer {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
/* Columna lateral: ficha de datos (reusa .meta) + enlaces */
.lateral .kicker { color: var(--blood); margin-bottom: 10px; }
.lateral .meta { margin: 0 0 30px; }
.lateral .meta li { font-size: 15px; }
.lateral-nota {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.lateral .etiqueta { transition: transform .2s ease, background .2s ease, color .2s ease; }
.lateral .etiqueta:hover { background: var(--blood); color: #fff; transform: rotate(-1.5deg); }

/* ----- Fotos: láminas sobre el marfil ----- */
.fotos-cabeza { max-width: 1120px; margin: clamp(48px, 7vw, 80px) auto 0; }
.fotos-cabeza h2 { margin-top: 0; }
.fotos-cabeza p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.fotos {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 40px);
  align-items: start;
}
.foto {
  margin: 0;
  padding: 10px 10px 12px;
  background: var(--bone);
  box-shadow: var(--shadow-paper);
  cursor: zoom-in;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.foto:nth-child(odd) { transform: rotate(-1.2deg); }
.foto:nth-child(even) { transform: rotate(1deg); }
.foto:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35), 0 22px 30px -10px rgba(0, 0, 0, .5);
  z-index: 2;
}
.foto img { width: 100%; height: auto; background: #d8d0bf; }
.foto figcaption {
  margin: 10px 2px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.foto.ancha { grid-column: 1 / -1; }

/* Lámina con video: no abre lightbox, el reproductor va dentro del marco hueso */
.foto.video { cursor: default; }
.foto.video video { display: block; width: 100%; height: auto; background: #000; }

/* ----- Recortes de prensa ----- */
.prensa { max-width: 1120px; margin: clamp(48px, 7vw, 80px) auto 0; }
.prensa h2 { margin-top: 0; }
.prensa > p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.prensa-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: start;
}
.recorte {
  padding: 22px 24px 20px;
  background: var(--fiber);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 16px -10px rgba(0, 0, 0, .4);
}
.recorte:nth-child(odd) { transform: rotate(-.5deg); }
.recorte:nth-child(even) { transform: rotate(.45deg); }
.recorte .tira { font-size: 14px; margin-bottom: 12px; }
.recorte h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
}
.recorte p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 12px;
}
.recorte .fuente {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--ink-soft);
  margin: 0;
}
.recorte .fuente a { border-bottom: 1px dashed rgba(26, 22, 20, .45); }
.recorte .fuente a:hover { background: var(--blood); color: #fff; border-color: transparent; }

/* ----- Pie de la entrada · papel carbón ----- */
.entrada-pie { max-width: 1040px; margin: 0 auto; }
.entrada-pie h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.1;
  color: var(--bone);
  margin: 0 0 24px;
}
.pie-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}
.pie-links .etiqueta {
  font-size: 15px;
  padding: 10px 18px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.pie-links .etiqueta:nth-child(odd) { transform: rotate(-.8deg); }
.pie-links .etiqueta:nth-child(even) { transform: rotate(.7deg); }
.pie-links .etiqueta:hover { background: var(--blood); color: #fff; transform: rotate(0) translateY(-2px); }

/* ----- Índice de la bitácora ----- */
.bitacora-indice { max-width: 1120px; margin: 0 auto; }
.bitacora-indice .kicker { color: var(--blood); }
.bitacora-indice h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1;
  margin: 0 0 14px;
  color: var(--ink);
}
.bitacora-indice .tira { font-size: 17px; margin-bottom: 36px; transform: rotate(-.5deg); }

/* Cabecera sin portada (página de obra) */
.entrada-cabeza-grid.sola { grid-template-columns: 1fr; }
.entrada-cabeza-grid.sola .entrada-titulo .tira { font-size: .42em; }

/* ----- Móvil ----- */
@media (max-width: 860px) {
  .entrada-cabeza-grid { grid-template-columns: 1fr; }
  .portada { width: min(100%, 440px); justify-self: start; }
  .entrada-inner { grid-template-columns: 1fr; }
  .fotos { gap: 22px; }
}
@media (max-width: 560px) {
  .fotos { grid-template-columns: 1fr; }
  .foto:nth-child(odd) { transform: rotate(-.8deg); }
  .foto:nth-child(even) { transform: rotate(.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .foto, .portada, .recorte, .cita { transform: none !important; }
}

/* Entrevistas en video dentro de "En los medios" */
.prensa .fotos { margin: 28px 0 clamp(36px, 5vw, 56px); }
.foto figcaption a { border-bottom: 1px dashed rgba(26, 22, 20, .45); white-space: nowrap; }
.foto figcaption a:hover { background: var(--blood); color: #fff; border-color: transparent; }