/* armand71.com — la web pública, en formato de periódico.
   Papel de prensa frío, tinta índigo, lapislázuli para secciones y capitulares y un único punto
   azafrán: el sol de las nueve. Marcellus (letra de inscripción romana) para cabecera y titulares,
   Marcellus SC para cintillos y secciones, Literata para leer. */

@font-face { font-family: "Marcellus"; src: url("../fonts/marcellus.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Marcellus SC"; src: url("../fonts/marcellus-sc.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/lit.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/liti.woff") format("woff"); font-weight: 400 600; font-style: italic; font-display: swap; }

:root {
  --papel: #EBECE8;
  --papel-2: #E1E3DE;
  --tinta: #15192B;
  --niebla: #565C6E;
  --lapis: #23367D;
  --azafran: #C9800F;
  --linea: #BEC2CA;
  --regla: #15192B;
  --ancho: 76rem;
  --medida: 36rem;
  --gutter: clamp(1rem, 3.5vw, 2.5rem);
  --display: "Marcellus", Georgia, serif;
  --versalitas: "Marcellus SC", "Marcellus", Georgia, serif;
  --texto: "Literata", Georgia, "Times New Roman", serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #10142A; --papel-2: #171C36; --tinta: #E4E6EE; --niebla: #9CA3B8;
    --lapis: #9DB0F0; --azafran: #E8A33D; --linea: #2B3355; --regla: #C9CEDC;
  }
}
:root[data-theme="dark"] {
  --papel: #10142A; --papel-2: #171C36; --tinta: #E4E6EE; --niebla: #9CA3B8;
  --lapis: #9DB0F0; --azafran: #E8A33D; --linea: #2B3355; --regla: #C9CEDC;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--texto); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); line-height: 1.62;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lapis); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--lapis); outline-offset: 3px; border-radius: 2px; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--tinta); color: var(--papel); padding: .5rem 1rem; z-index: 10; }
.saltar:focus { left: 1rem; top: 1rem; }
.sol { width: .55rem; height: .55rem; border-radius: 50%; background: var(--azafran); display: inline-block; vertical-align: .05em; box-shadow: 0 0 0 3px color-mix(in srgb, var(--azafran) 22%, transparent); }

main { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Cabecera de periódico ---------- */
.mancheta { max-width: var(--ancho); margin: 0 auto; padding: clamp(1rem, 2.5vw, 1.75rem) var(--gutter) 0; }
.orejas { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: -.2rem; }
.oreja { margin: 0; font-style: italic; font-size: .86rem; line-height: 1.35; color: var(--niebla); max-width: 14rem; }
.oreja-dcha { text-align: right; }
.cabecera-nombre {
  margin: 0; text-align: center; font-family: var(--display); font-weight: 400; line-height: .95;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -0.005em; padding: .35rem 0 .6rem;
}
.mancheta-portada .cabecera-nombre { font-size: clamp(2.9rem, 1rem + 7.6vw, 7.4rem); padding: .2rem 0 .9rem; }
.cabecera-nombre a { color: var(--tinta); text-decoration: none; }
.linea-fecha {
  display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0;
  border-top: 1px solid var(--regla); border-bottom: 3px double var(--regla);
  font-family: var(--versalitas); font-size: .9rem; letter-spacing: .02em;
}
.secciones {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem 1.6rem; padding: .55rem 0;
  border-bottom: 1px solid var(--regla); font-family: var(--versalitas); font-size: .95rem;
}
.secciones a { color: var(--tinta); text-decoration: none; padding: .1rem 0; }
.secciones a:hover, .secciones a[aria-current="page"] { color: var(--lapis); box-shadow: inset 0 -1px 0 currentColor; }

/* ---------- Piezas tipográficas ---------- */
.kicker { display: inline-block; font-family: var(--versalitas); color: var(--lapis); font-size: .95rem; letter-spacing: .03em; text-decoration: none; margin-bottom: .35rem; }
.kicker:hover { text-decoration: underline; }
.titular { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0 0 .7rem; text-wrap: balance; font-size: clamp(1.45rem, 1.2rem + .9vw, 1.85rem); }
.titular a { color: var(--tinta); text-decoration: none; }
.titular a:hover { color: var(--lapis); }
.titular-gran { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); line-height: 1.02; max-width: 16ch; letter-spacing: -0.01em; margin-bottom: 1rem; }
.entradilla { font-style: italic; font-size: 1.22em; line-height: 1.48; color: var(--niebla); margin: 0 0 1.1rem; max-width: 40em; text-wrap: pretty; }
.entradilla-peq { font-size: 1.04em; margin-bottom: .8rem; }
.firma {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem;
  font-family: var(--versalitas); font-size: .86rem; color: var(--niebla);
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: .35rem 0; margin: 0 0 1.25rem;
}
.firma-fecha { font-family: var(--texto); font-style: italic; font-size: .9rem; }

.cuerpo p { margin: 0 0 .95em; text-wrap: pretty; }
.cuerpo h2 { font-family: var(--display); font-weight: 400; font-size: 1.35em; line-height: 1.2; margin: 1.4em 0 .5em; break-after: avoid; }
.cuerpo blockquote { margin: 1.3em 0; padding: .9em 0; border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla); font-family: var(--display); font-size: 1.28em; line-height: 1.3; text-align: center; break-inside: avoid; }
.cuerpo blockquote p { margin: 0; }
.cuerpo blockquote cite { display: block; font-family: var(--versalitas); font-style: normal; font-size: .7em; color: var(--niebla); margin-top: .5em; }
.cuerpo ul { padding-left: 1.2em; }
.cuerpo li { margin-bottom: .35em; }
.cuerpo hr { border: 0; text-align: center; margin: 1.6em 0; }
.cuerpo hr::after { content: "· · ·"; color: var(--niebla); letter-spacing: .6em; }
.capitular > p:first-child::first-letter,
.reflexion .cuerpo > p:first-child::first-letter,
.pagina-historia .cuerpo > p:first-child::first-letter {
  font-family: var(--display); color: var(--lapis); float: left; font-size: 4.1em; line-height: .8; margin: .07em .09em 0 0;
}

/* ---------- Primera plana ---------- */
.primera { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 0 2.25rem; padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 2rem; }
.apertura { min-width: 0; }
.imagen-apertura { margin: 0 0 1.25rem; width: 100%; max-height: 28rem; object-fit: cover; filter: grayscale(.15); }
.cuerpo-columnas { columns: 3 17rem; column-gap: 2.1rem; column-rule: 1px solid var(--linea); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.cuerpo-columnas p { text-wrap: wrap; }
.columna-lateral { border-left: 1px solid var(--regla); padding-left: 1.6rem; display: flex; flex-direction: column; gap: 1.6rem; }
.recuadro { font-size: .95rem; }
.recuadro p { margin: 0 0 .6rem; }
.recuadro-tit { font-family: var(--versalitas); font-weight: 400; font-size: 1rem; margin: 0 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--regla); letter-spacing: .02em; }
.recuadro-foto { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: 50%; filter: grayscale(.3); float: right; margin: 0 0 .5rem .75rem; }
.recuadro-manana { background: var(--papel-2); padding: .8rem .9rem; }
.recuadro-manana .recuadro-tit { border-bottom-color: var(--linea); }
.manana-tit { font-family: var(--display); font-size: 1.25rem; line-height: 1.2; margin: 0 0 .25rem !important; }
.manana-tema { font-family: var(--versalitas); color: var(--lapis); font-size: .85rem; }
.indice, .sumario { list-style: none; margin: 0; padding: 0; }
.indice li + li, .sumario li + li { border-top: 1px dotted var(--linea); }
.indice a { display: flex; justify-content: space-between; padding: .35rem 0; color: var(--tinta); text-decoration: none; }
.indice a:hover span:first-child { color: var(--lapis); }
.indice-n { font-variant-numeric: tabular-nums; color: var(--niebla); }
.sumario { counter-reset: sum; }
.sumario a { display: block; padding: .4rem 0; color: var(--tinta); text-decoration: none; line-height: 1.3; font-family: var(--display); }
.sumario a:hover { color: var(--lapis); }
.acciones-lectura { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.4rem 0 0; padding-top: .8rem; border-top: 1px solid var(--linea); font-size: .9rem; color: var(--niebla); }
.acciones-lectura a { color: var(--niebla); }
.acciones-lectura a:hover { color: var(--lapis); }

/* el pliego de días anteriores */
.pliego { border-top: 3px double var(--regla); padding: 1.2rem 0 2.5rem; }
.cintillo { display: flex; align-items: center; gap: 1rem; font-family: var(--versalitas); font-weight: 400; font-size: 1.15rem; margin: 0 0 1.6rem; letter-spacing: .03em; }
.cintillo::before, .cintillo::after { content: ""; flex: 1; border-top: 1px solid var(--regla); }
.rejilla-articulos { columns: 3 19rem; column-gap: 2.4rem; column-rule: 1px solid var(--linea); }
.articulo { break-inside: avoid; margin: 0 0 1.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--linea); }
.articulo .cuerpo { text-align: justify; hyphens: auto; -webkit-hyphens: auto; font-size: .97rem; line-height: 1.58; }
.articulo .cuerpo > p:first-child::first-letter { font-family: var(--display); color: var(--lapis); float: left; font-size: 3.1em; line-height: .8; margin: .08em .08em 0 0; }
.mas { margin: 1rem 0 0; text-align: center; font-family: var(--versalitas); }
.portada-vacia { padding: 4rem 0; text-align: center; }
.portada-vacia .titular-gran { margin-left: auto; margin-right: auto; max-width: 22ch; }

/* una sola animación: el sol de las nueve sale al abrir la portada */
@media (prefers-reduced-motion: no-preference) {
  .mancheta-portada .oreja .sol { animation: amanecer 1.1s cubic-bezier(.2,.7,.2,1) .2s both; }
  @keyframes amanecer { from { transform: translateY(.7rem); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- Página de una reflexión ---------- */
.reflexion {
  display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, var(--medida)) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}
.reflexion > .texto { grid-column: 2; }
.fecha-col { grid-column: 1; display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding-top: .2rem; }
.fecha-num { font-family: var(--display); color: var(--lapis); font-size: clamp(5rem, 3.5rem + 7vw, 9rem); line-height: .8; }
.fecha-mes { font-family: var(--display); font-size: 1.3rem; margin-top: .55rem; }
.fecha-dia { font-style: italic; color: var(--niebla); font-size: .95rem; display: inline-flex; align-items: center; gap: .5rem; }
.fecha-tema { margin-top: 1.1rem; font-family: var(--versalitas); font-size: .95rem; color: var(--lapis); text-decoration: none; border-top: 1px solid var(--regla); padding-top: .5rem; }
.titulo { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); line-height: 1.05; margin: 0 0 1.1rem; max-width: 18ch; text-wrap: balance; }
.reflexion .cuerpo { font-size: 1.1rem; line-height: 1.72; hyphens: auto; -webkit-hyphens: auto; }
.imagen-post { margin: 0 0 2rem; }
.vecinos { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1.5rem 0 3rem; border-top: 3px double var(--regla); }
.vecino { display: flex; flex-direction: column; gap: .25rem; color: inherit; text-decoration: none; }
.vecino-sig { text-align: right; grid-column: 2; }
.vecino-etq { font-family: var(--versalitas); font-size: .85rem; color: var(--niebla); }
.vecino-tit { font-family: var(--display); font-size: 1.25rem; line-height: 1.25; }
.vecino:hover .vecino-tit { color: var(--lapis); }
.aviso-previa { margin: 1.5rem 0 0; padding: .6rem 1rem; background: var(--papel-2); border-left: 3px solid var(--azafran); font-size: .95rem; }

/* ---------- Secciones, hemeroteca y «Mi historia» ---------- */
.cab-pagina { padding: clamp(2rem, 5vw, 3.5rem) 0 1rem; max-width: 46rem; }
.seccion { padding: 1.5rem 0 2rem; border-top: 1px solid var(--regla); }
.seccion-tit { font-family: var(--versalitas); font-weight: 400; font-size: 1.2rem; margin: 0 0 1rem; }
.dias { list-style: none; margin: 0; padding: 0; }
.dias li + li { border-top: 1px solid var(--linea); }
.dia { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: baseline; padding: 1rem 0; color: inherit; text-decoration: none; }
.dia-fecha { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.dia-num { font-family: var(--display); font-size: 2.3rem; color: var(--lapis); }
.dia-mes { font-size: .82rem; color: var(--niebla); margin-top: .25rem; }
.dia-texto { display: flex; flex-direction: column; gap: .25rem; max-width: 42rem; }
.dia-tit { font-family: var(--display); font-size: 1.35rem; line-height: 1.25; }
.dia-ext { color: var(--niebla); font-size: .95rem; line-height: 1.55; }
.dia-tema { font-family: var(--versalitas); color: var(--lapis); font-size: .9rem; white-space: nowrap; }
.dia:hover .dia-tit { color: var(--lapis); }
.vacio-txt { color: var(--niebla); font-style: italic; }
.pagina-historia { max-width: 40rem; padding-bottom: 3rem; }
.pagina-historia .cuerpo { font-size: 1.1rem; line-height: 1.72; }
.historia-foto { width: 100%; max-width: 22rem; margin: 0 0 2rem; filter: grayscale(.2); }

/* ---------- Pie ---------- */
.pie { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--ancho) - 2 * var(--gutter)); margin: 1rem auto 0; padding: 1.4rem 0 2.2rem; border-top: 3px double var(--regla); color: var(--niebla); font-size: .9rem; }
.pie-fila { display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between; align-items: center; }
.pie-nombre { margin: 0; font-family: var(--display); font-size: 1.3rem; color: var(--tinta); }
.pie-nav { display: flex; gap: 1.25rem; font-family: var(--versalitas); }
.pie a { color: var(--niebla); }
.pie-legal { margin-top: 1rem; font-size: .82rem; }
.acceso { color: inherit !important; text-decoration: none; cursor: default; }
.acceso:focus-visible { outline: 1px dotted var(--niebla); }
.punto-circulo {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .3rem .2rem .3rem .6rem;
  color: var(--niebla) !important; text-decoration: none; font-family: var(--versalitas); font-size: .92rem;
  opacity: .75; transition: opacity .3s;
}
.punto-circulo:hover, .punto-circulo:focus-visible { opacity: 1; color: var(--lapis) !important; }
.punto-circulo svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.punto-circulo .relleno { fill: currentColor; stroke: none; }

/* ---------- Tableta y móvil ---------- */
@media (max-width: 1000px) {
  .primera { grid-template-columns: minmax(0, 1fr); }
  .columna-lateral { border-left: 0; padding-left: 0; border-top: 3px double var(--regla); padding-top: 1.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem 2rem; }
}
@media (max-width: 860px) {
  .reflexion { grid-template-columns: minmax(0, 1fr); }
  .reflexion > .texto { grid-column: 1; }
  .fecha-col { grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: baseline; text-align: left; gap: .2rem .9rem; margin-bottom: 1.5rem; }
  .fecha-num { font-size: clamp(4.2rem, 20vw, 6rem); }
  .fecha-mes { margin-top: 0; }
  .fecha-tema { margin-top: .1rem; border-top: 0; padding-top: 0; flex-basis: 100%; }
}
@media (max-width: 640px) {
  .pie-legal { flex-direction: column-reverse; align-items: flex-start; }
  .punto-circulo { opacity: 1; padding-left: 0; font-size: 1rem; }
  .orejas { display: none; }
  .mancheta-portada .cabecera-nombre { padding-top: .5rem; }
  .linea-fecha { font-size: .8rem; }
  .linea-centro { display: none; }
  .secciones { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 1.2rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .secciones::-webkit-scrollbar { display: none; }
  .secciones a { white-space: nowrap; }
  .cuerpo-columnas, .articulo .cuerpo { text-align: left; hyphens: manual; }
  .dia { grid-template-columns: 3.2rem minmax(0, 1fr); gap: .9rem; }
  .dia-num { font-size: 2rem; }
  .dia-tema { grid-column: 2; }
  .vecinos { grid-template-columns: 1fr; }
  .vecino-sig { grid-column: 1; text-align: left; }
}

@media print {
  .secciones, .pie, .vecinos, .acciones-lectura, .columna-lateral { display: none; }
  body { background: #fff; color: #000; }
}