@font-face { font-family: "Caslon"; src: url(fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caslon"; src: url(fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caslon"; src: url(fonts/libre-caslon-text-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Franklin"; src: url(fonts/libre-franklin-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Franklin"; src: url(fonts/libre-franklin-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Franklin"; src: url(fonts/libre-franklin-latin-900-normal.woff2) format("woff2"); font-weight: 900; font-display: swap; }

/* Esquela de periódico: papel blanco, tinta negra, un marco grueso. Nada más. */
:root {
  --papel: #FFFFFF; --tinta: #111111; --gris: #5C5C5C; --gris2: #8A8A8A; --velo: #F2F2F0;
  --serif: "Caslon", Georgia, "Times New Roman", serif;
  --sans: "Franklin", "Helvetica Neue", Arial, sans-serif;
  --marco: 12px;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--papel); color: var(--tinta); font-family: var(--serif); font-size: 19px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }

/* Menú */
.menu { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 28px; padding: 0 max(20px, 4vw); background: var(--papel); border-bottom: 3px solid var(--tinta); }
.logo { font-family: var(--serif); font-weight: 700; font-size: 22px; text-decoration: none; white-space: nowrap; padding: 16px 0; }
.pestanas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { font-family: var(--sans); font-weight: 700; font-size: 14.5px; text-decoration: none; white-space: nowrap; padding: 19px 12px 16px; border-bottom: 4px solid transparent; margin-bottom: -3px; color: var(--gris); }
.pestanas a:hover { color: var(--tinta); }
.pestanas a.on { color: var(--tinta); border-bottom-color: var(--tinta); }

/* Páginas: una cada vez */
body.js .pag { display: none; }
body.js .pag.activa { display: block; }
.pag { padding: 0 max(20px, 5vw); }

/* La esquela */
.esquela { max-width: 820px; margin: 56px auto 0; border: var(--marco) solid var(--tinta); padding: 56px 64px 60px; text-align: center; }
.esquela h1 { font-size: clamp(42px, 6vw, 72px); line-height: 1.05; margin-bottom: 24px; }
.esquela p { font-size: 21px; line-height: 1.6; max-width: 34ch; margin: 0 auto; }
.esquela .e-pre { font-size: 18px; margin-bottom: 20px; }
.esquela hr { width: 80px; border: 0; border-top: 2px solid var(--tinta); margin: 28px auto; }
.esquela .e-fin { font-family: var(--sans); font-weight: 700; font-size: 15px; }
.esquela.final { margin: 72px auto 0; }
.esquela .e-grande { font-size: clamp(36px, 5vw, 60px); line-height: 1.1; max-width: 16ch; }

/* Índice */
.indice { max-width: 820px; margin: 72px auto 96px; }
.indice h2 { font-size: 30px; text-align: center; margin-bottom: 28px; }
.indice ol { list-style: none; padding: 0; }
.indice a { display: grid; grid-template-columns: 200px 1fr auto; gap: 24px; align-items: baseline; padding: 18px 0; border-top: 2px solid var(--tinta); text-decoration: none; font-size: 28px; line-height: 1.2; }
.indice li:last-child a { border-bottom: 2px solid var(--tinta); }
.indice a span { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--gris); }
.indice a:hover { background: var(--velo); }
.indice a::after { content: "→"; font-family: var(--sans); font-size: 20px; }

/* Cabecera de capítulo */
.cab { max-width: 760px; margin: 0 auto; padding: 72px 0 8px; text-align: center; }
.fecha { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--gris); margin-bottom: 14px; }
.cab h2 { font-size: clamp(44px, 6.5vw, 80px); line-height: 1.04; }
.cab::after { content: ""; display: block; width: 80px; margin: 32px auto 0; border-top: 2px solid var(--tinta); }

.cuerpo { max-width: 760px; margin: 0 auto; padding: 40px 0 24px; }
.cuerpo > * + * { margin-top: 28px; }
.lead { font-size: 23px; line-height: 1.5; }
.prosa p + p { margin-top: 1em; }
h3, .sub { font-size: 30px; line-height: 1.15; margin-top: 64px; }
.fuente { font-family: var(--sans); font-size: 13px; line-height: 1.7; color: var(--gris); }
.fuente a { color: var(--gris); }

/* Fotos en blanco y negro */
.foto img { width: 100%; filter: grayscale(1) contrast(1.05); }
.foto figcaption, .app figcaption, figcaption { font-family: var(--sans); font-size: 12.5px; color: var(--gris); margin-top: 8px; }
.app img { width: 100%; border: 3px solid var(--tinta); }

/* Cronología */
.registro { list-style: none; padding: 0; }
.registro li { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 14px 0; border-top: 2px solid var(--tinta); }
.registro li:last-child { border-bottom: 2px solid var(--tinta); }
.registro time { font-family: var(--sans); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }
.registro li.rojo { background: var(--tinta); color: var(--papel); padding-left: 16px; padding-right: 16px; margin: 0 -16px; }

/* Avisos y voces */
.partes, .voces, .hallazgos, .citas { list-style: none; padding: 0; }
.partes li { display: grid; grid-template-columns: 140px 1fr; gap: 6px 24px; padding: 16px 0; border-top: 2px solid var(--tinta); }
.partes li:last-child { border-bottom: 2px solid var(--tinta); }
.partes .cuando { font-family: var(--sans); font-weight: 700; font-size: 14.5px; grid-row: span 2; }
.partes a { font-family: var(--sans); font-size: 13px; color: var(--gris); }
.voces { display: grid; gap: 36px; }
.voces li { padding-left: 24px; border-left: 4px solid var(--tinta); }
.voces blockquote, .citas blockquote { font-style: italic; font-size: 27px; line-height: 1.3; }
.voces p { font-size: 16.5px; color: var(--gris); margin-top: 8px; }
.voces a { font-family: var(--sans); font-size: 13px; color: var(--gris); }
.citas { display: grid; gap: 30px; }
.citas span { display: block; font-family: var(--sans); font-size: 13.5px; color: var(--gris); margin-top: 6px; }
.hallazgos li { padding: 16px 0 16px 28px; position: relative; border-top: 2px solid var(--tinta); }
.hallazgos li:last-child { border-bottom: 2px solid var(--tinta); font-weight: 700; }
.hallazgos li::before { content: ""; position: absolute; left: 2px; top: 28px; width: 10px; height: 10px; background: var(--tinta); }


/* Notas en negro */
.nota { background: var(--tinta); color: var(--papel); padding: 26px 30px; font-size: 18px; }
.nota b { display: block; font-size: 25px; line-height: 1.2; font-weight: 700; margin-bottom: 10px; }
.nota p + p { margin-top: 12px; }
.nota .fuente, .nota .fuente a { color: #BDBDBD; }

/* Su versión */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 3px solid var(--tinta); }
.dos > div { padding: 22px 24px; }
.ellos { border-right: 3px solid var(--tinta); }
.nosotros { background: var(--tinta); color: var(--papel); }
.dos h3 { margin: 0 0 12px; font-size: 22px; font-weight: 700; }
.dos ul { padding-left: 1.1em; display: grid; gap: 10px; font-size: 17px; line-height: 1.5; }
.aparte { font-size: 17px; color: var(--gris); }

/* Desplegables */
.mas { border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); }
.mas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 22px; }
.mas summary::-webkit-details-marker { display: none; }
.mas summary::after { content: "Leer"; font-family: var(--sans); font-weight: 700; font-size: 13.5px; align-self: center; text-decoration: underline; text-underline-offset: 3px; }
.mas[open] summary::after { content: "Cerrar"; }
.mas > *:not(summary) { margin-bottom: 20px; }

/* Por qué */
.pregunta { font-size: clamp(30px, 4vw, 44px); line-height: 1.2; max-width: 24ch; margin-left: auto; margin-right: auto; text-align: center; margin-top: 56px !important; }
.cola { font-family: var(--sans); font-weight: 700; font-size: 15px; text-align: center; }

/* Siguiente */
.siguiente { display: block; max-width: 760px; margin: 48px auto 96px; padding: 22px 0; border-top: var(--marco) solid var(--tinta); text-decoration: none; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; }
.siguiente span { display: block; font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--gris); margin-bottom: 6px; }
.siguiente::after { content: " →"; font-family: var(--sans); }
.siguiente:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* Pie */
.pie { border-top: 3px solid var(--tinta); padding: 28px max(20px, 5vw) 40px; font-family: var(--sans); font-size: 13px; color: var(--gris); }
.pie p { max-width: 90ch; margin: 0 auto; text-align: center; }
.pie p + p { margin-top: 6px; }

@media (max-width: 720px) {
  body { font-size: 18px; }
  .menu { gap: 12px; }
  .logo { font-size: 19px; }
  .pestanas a { padding: 17px 9px 14px; font-size: 14px; }
  .esquela { --marco: 8px; padding: 36px 22px 40px; margin-top: 28px; }
  .esquela p { font-size: 19px; }
  .indice a { grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 24px; }
  .indice a span { grid-column: 1 / -1; }
  .registro li { grid-template-columns: 64px 1fr; gap: 14px; }
  .registro time { font-size: 16px; }
  .partes li { grid-template-columns: 1fr; }
  .ellos { border-right: 0; border-bottom: 3px solid var(--tinta); }
  .voces blockquote, .citas blockquote { font-size: 23px; }
  .cab { padding-top: 48px; }
}

.foto.vertical img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 40%; }

/* Se lo avisaron (portada) */
.avisados { max-width: 820px; margin: 72px auto 0; }
.avisados h2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; text-align: center; margin-bottom: 28px; }
.avisados ol { list-style: none; padding: 0; }
.avisados li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 0; border-top: 2px solid var(--tinta); font-size: 20px; line-height: 1.5; }
.avisados li:last-child { border-bottom: 2px solid var(--tinta); }
.avisados li span { font-family: var(--sans); font-weight: 700; font-size: 14.5px; padding-top: 4px; }
.todos { display: inline-block; margin-top: 20px; font-family: var(--sans); font-weight: 700; font-size: 15px; }
.todos::after { content: " →"; }
.h-ademas { margin-top: 48px; }
.ver-mapa { font-weight: 700; color: var(--tinta); }
.ver-mapa::after { content: " ↗"; }
@media (max-width: 720px) { .avisados li { grid-template-columns: 1fr; gap: 4px; font-size: 18px; } .avisados { margin-top: 48px; } }

/* Móvil: enlaces más fáciles de tocar */
@media (max-width: 720px) {
  .fuente { line-height: 2.1; }
  .fuente a, .partes a, .voces a, figcaption a { display: inline-block; padding: 6px 0; }
  .todos, .ver-mapa { display: inline-block; padding: 10px 0; }
  .mas summary { padding: 18px 0; }
  .registro li.rojo { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
}
.pie .contacto { font-size: 14.5px; color: var(--tinta); margin-bottom: 10px; }
.pie .contacto a { font-weight: 700; }

/* Sin JavaScript: una página cada vez gracias al ancla de la dirección */
.pag { display: none; }
.pag:target, #inicio { display: block; }
main:has(.pag:target:not(#inicio)) #inicio { display: none; }
body.js .pag { display: none; }
body.js .pag.activa { display: block; }

/* Botón de menú (solo móvil) */
.abrir { display: none; }
@media (max-width: 720px) {
  .menu { flex-wrap: wrap; gap: 0; padding: 0 max(16px, env(safe-area-inset-left, 0px)); }
  .logo { padding: 14px 0; width: auto; text-align: left; flex: 1; }
  .abrir { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; margin-right: -10px; padding: 0 11px; background: none; border: 0; cursor: pointer; color: var(--tinta); }
  .abrir span { display: block; height: 2.5px; background: currentColor; transition: transform .2s, opacity .2s; }
  .abierto .abrir span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .abierto .abrir span:nth-child(2) { opacity: 0; }
  .abierto .abrir span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
  .pestanas { display: none; width: 100%; margin: 0; padding: 4px 0 12px; flex-direction: column; gap: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .menu.abierto .pestanas { display: flex; }
  .pestanas a { padding: 14px 0; margin: 0; border: 0; border-top: 2px solid var(--velo); font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--tinta); }
  .pestanas a.on { border-bottom: 0; font-weight: 700; }
  .pestanas a.on::before { content: "→ "; font-family: var(--sans); }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .abrir span { transition: none; } }