/*
 * parís.info — tema «Álbum art déco»
 * Noche de París en azul profundo, oro y papel crema; abanicos, rayos, marcos dobles y la torre en línea.
 * Playfair Display (titulares, cursivas románticas) + Josefin Sans (rótulos geométricos en mayúsculas).
 */

:root {
  --noche: #101a2e;
  --noche-2: #17233b;
  --noche-3: #22314f;
  --oro: #d4b06a;
  --oro-claro: #ecd9a8;
  --oro-oscuro: #7d5f24;
  --crema: #f7f1e6;
  --crema-2: #efe5d2;
  --rosa: #e8c3bd;
  --tinta: #1b1f2a;
  --tenue: #5a5650;

  --fuente-titulos: "Playfair Display", "Didot", Georgia, serif;
  --fuente-texto: "Josefin Sans", "Futura", "Century Gothic", system-ui, sans-serif;

  --ancho-texto: 40rem;
  --ancho-amplio: 72rem;
  --hueco: clamp(1rem, 2.5vw, 2rem);
  --radio: 0px;
  --color-texto: var(--tinta);
  --color-fondo: var(--crema);
  --color-suave: var(--crema-2);
  --color-borde: #ddd0b4;
  --color-acento: var(--oro-oscuro);
  --color-acento-texto: #fff;
  --color-tenue: var(--tenue);

  --margen: clamp(1.1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--crema); color: var(--tinta); font: 400 1.1rem/1.7 var(--fuente-texto); -webkit-font-smoothing: antialiased; }
img, svg, iframe { max-width: 100%; }
a { color: var(--oro-oscuro); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--noche); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
::selection { background: var(--oro-claro); color: var(--noche); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
main:focus { outline: none; }

.envoltorio { width: min(100% - 2 * var(--margen), 76rem); margin-inline: auto; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--oro); color: var(--noche); padding: .7rem 1rem; text-decoration: none; font-weight: 600; }
.saltar:focus { top: 1rem; color: var(--noche); }

.antetitulo { margin: 0 0 1rem; font: 600 .82rem/1.3 var(--fuente-texto); letter-spacing: .32em; text-transform: uppercase; color: var(--oro); }

/* separador: línea, rombo, línea */
.separador-deco { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 1.6rem auto; width: min(18rem, 70%); color: var(--oro); }
.separador-deco i { flex: 1; height: 5px; border-block: 1px solid currentColor; }
.separador-deco b { width: 10px; height: 10px; background: currentColor; transform: rotate(45deg); flex: none; }

.abanico { display: block; color: var(--oro); }
.torre { display: block; color: var(--oro); }

/* botones */
.boton-deco {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .85rem 1.6rem .7rem;
  border: 1px solid var(--oro); outline: 1px solid rgba(212, 176, 106, .45); outline-offset: 3px;
  color: var(--oro-claro); text-decoration: none; font: 600 .8rem/1 var(--fuente-texto); letter-spacing: .26em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.boton-deco:hover { background: rgba(212, 176, 106, .14); color: #fff; }
.boton-deco-lleno { background: var(--oro); color: var(--noche); }
.boton-deco-lleno:hover { background: var(--oro-claro); color: var(--noche); }

/* ------------------------------------------------------------------ cabecera */

.cabecera { background: var(--noche); color: var(--oro-claro); border-bottom: 1px solid rgba(212, 176, 106, .35); box-shadow: 0 3px 0 -1px var(--noche), 0 4px 0 -1px rgba(212, 176, 106, .35); position: relative; z-index: 20; }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.marca { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--crema); }
.marca:hover { color: #fff; }
.marca-torre { width: 18px; height: 42px; }
.marca-nombre { font: italic 500 1.3rem/1.1 var(--fuente-titulos); }
.menu { list-style: none; display: flex; gap: .5rem; margin: 0; padding: 0; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: .2rem .9rem 0; color: var(--oro-claro); text-decoration: none; font: 600 .78rem/1 var(--fuente-texto); letter-spacing: .26em; text-transform: uppercase; }
.menu a:hover, .menu a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: .7em; }
.menu-boton { display: none; }
@media (max-width: 40rem) {
  .menu-boton {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .2rem .9rem 0; cursor: pointer;
    background: none; border: 1px solid var(--oro); color: var(--oro-claro); font: 600 .75rem/1 var(--fuente-texto); letter-spacing: .22em; text-transform: uppercase;
  }
  .menu-boton-lineas { width: 16px; height: 9px; border-block: 1px solid currentColor; margin-top: -.2rem; }
  .navegacion { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--noche); border-bottom: 1px solid rgba(212, 176, 106, .35); padding: .5rem var(--margen) 1.25rem; }
  .navegacion.abierto { display: block; }
  .menu { flex-direction: column; }
  .menu a { min-height: 52px; width: 100%; border-bottom: 1px solid rgba(212, 176, 106, .2); font-size: .85rem; }
  .marca-nombre { font-size: 1.1rem; }
}

/* ------------------------------------------------------------------ portada */

.portada-deco { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 80% 70% at 50% 100%, var(--noche-3), var(--noche) 70%); color: var(--crema); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.rayos { position: absolute; inset: 0; z-index: -1; background: repeating-conic-gradient(from -90deg at 50% 108%, rgba(212, 176, 106, .085) 0 1.2deg, transparent 1.2deg 7deg); -webkit-mask: linear-gradient(transparent, #000 35%); mask: linear-gradient(transparent, #000 35%); }
.portada-interior {
  position: relative; text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
  border: 1px solid rgba(212, 176, 106, .6); outline: 1px solid rgba(212, 176, 106, .35); outline-offset: 7px; max-width: 62rem;
}
.portada-interior::before, .portada-interior::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--oro); transform: rotate(45deg); }
.portada-interior::before { top: -8px; left: calc(50% - 7px); }
.portada-interior::after { bottom: -8px; left: calc(50% - 7px); }
.portada-abanico { width: clamp(9rem, 22vw, 14rem); margin: 0 auto 1.5rem; }
.portada-titulo { margin: 0; line-height: 1; font-family: var(--fuente-titulos); }
.portada-titulo-1 { display: block; font: italic 400 clamp(1.8rem, 5vw, 3.6rem)/1.1 var(--fuente-titulos); color: var(--crema); }
.portada-titulo-2 {
  display: block; margin-top: .05em; font: italic 700 clamp(4.5rem, 16vw, 11.5rem)/.95 var(--fuente-titulos); letter-spacing: -.01em;
  background: linear-gradient(180deg, #f3e2b4 10%, var(--oro) 55%, #a8803c 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portada-lema { margin: 1.25rem 0 0; font: 600 .9rem/1.4 var(--fuente-texto); letter-spacing: .34em; text-transform: uppercase; color: var(--oro-claro); }
.dedicatoria { margin: 0 auto; max-width: 36rem; }
.dedicatoria p { margin: 0; font: italic 400 clamp(1.3rem, 2.6vw, 1.75rem)/1.4 var(--fuente-titulos); color: var(--crema); }
.dedicatoria footer { margin-top: .9rem; font: 400 .95rem/1.4 var(--fuente-texto); letter-spacing: .08em; color: var(--rosa); }
.portada-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: 2.25rem 0 0; }
@media (max-width: 40rem) { .portada-interior { outline-offset: 4px; } }

/* ------------------------------------------------------------------ encabezados de sección */

.encabezado-deco { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.encabezado-deco .separador-deco { color: var(--oro-oscuro); margin-top: 0; }
.encabezado-deco h2 { margin: 0; font: italic 400 clamp(2.4rem, 6vw, 4rem)/1.05 var(--fuente-titulos); color: var(--noche); }
.encabezado-deco p { margin: .9rem auto 0; max-width: 34rem; color: var(--tenue); }
.encabezado-claro .separador-deco { color: var(--oro); }
.encabezado-claro h2 { color: var(--crema); }
.encabezado-claro p { color: rgba(247, 241, 230, .78); }

/* ------------------------------------------------------------------ diario */

.diario { padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--crema) linear-gradient(90deg, transparent calc(50% - .5px), rgba(125, 95, 36, .12) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.dias { list-style: none; margin: 0 auto; padding: 0; max-width: 52rem; display: grid; gap: 1.25rem; }
.dia {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.25rem); align-items: start;
  background: #fffaf1; padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid #e3d5b6; box-shadow: inset 0 0 0 5px #fffaf1, inset 0 0 0 6px #ecdfc2;
}
.dia-fecha { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding-right: clamp(1rem, 3vw, 2rem); border-right: 1px solid #e3d5b6; }
.dia-num { font: 700 3.4rem/1 var(--fuente-titulos); color: var(--noche); font-variant-numeric: lining-nums; }
.dia-mes { margin-top: .35rem; font: 600 .74rem/1.2 var(--fuente-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--oro-oscuro); }
.dia-texto { margin: 0; font-size: 1.16rem; line-height: 1.7; }
@media (max-width: 36rem) {
  .dia { grid-template-columns: 1fr; }
  .dia-fecha { flex-direction: row; align-items: baseline; gap: .6rem; border-right: 0; border-bottom: 1px solid #e3d5b6; padding: 0 0 .75rem; }
  .dia-num { font-size: 2.4rem; }
}

/* ------------------------------------------------------------------ álbum */

.album { background: var(--noche); color: var(--crema); padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; isolation: isolate; }
.album::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(212, 176, 106, .05) 79px 80px); }
.contenido-album { counter-reset: pagina; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2.5vw, 2rem); }
.contenido-album > * { max-width: none; margin: 0; }
.contenido-album > :not(figure) { grid-column: 1 / -1; }
.contenido-album > figure.imagen:first-child { grid-column: 1 / -1; max-width: 56rem; justify-self: center; width: 100%; }
.contenido-album figure.imagen { counter-increment: pagina; display: flex; flex-direction: column; align-items: center; }
.contenido-album figure.imagen img {
  display: block; width: 100%; height: auto; border-radius: 0; box-sizing: border-box;
  padding: clamp(.4rem, 1vw, .7rem); border: 1px solid rgba(212, 176, 106, .55); background: var(--noche-2);
  cursor: zoom-in; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.contenido-album figure.imagen img:hover { border-color: var(--oro); transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8); }
.contenido-album figure.imagen img:active { transform: translateY(0); }
.contenido-album figure.imagen img:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
.contenido-album figure.imagen::after {
  content: "Página " counter(pagina, decimal-leading-zero); margin-top: .8rem;
  font: 600 .72rem/1 var(--fuente-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--oro);
}
.contenido-album figcaption { color: var(--oro-claro); font-family: var(--fuente-titulos); font-style: italic; }
@media (min-width: 44.01rem) and (max-width: 60rem) { .contenido-album > figure.imagen:last-child:nth-child(even) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 1rem); } }
/* escritorio: miniaturas a tres columnas (retícula de 6 con piezas de 2) y la última fila centrada */
@media (min-width: 60.01rem) {
  .contenido-album { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .contenido-album > figure.imagen { grid-column: span 2; }
  .contenido-album > figure.imagen:first-child { grid-column: 1 / -1; }
  .contenido-album > figure.imagen:nth-last-child(2):nth-child(3n+2) { grid-column: 2 / span 2; }
  .contenido-album > figure.imagen:last-child:nth-child(3n):nth-last-child(1) { grid-column: 4 / span 2; }
  .contenido-album > figure.imagen:nth-last-child(2):nth-child(3n+2) + figure.imagen { grid-column: 4 / span 2; }
  .contenido-album > figure.imagen:last-child:nth-child(3n+2) { grid-column: 3 / span 2; }
}
@media (max-width: 44rem) { .contenido-album { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ epílogo */

.epilogo { padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; }
.epilogo-torre { width: 34px; height: 80px; margin: 0 auto 1.5rem; color: var(--oro-oscuro); }
.epilogo-texto { margin: 0 auto; max-width: 34rem; font: italic 400 clamp(1.7rem, 4vw, 2.6rem)/1.3 var(--fuente-titulos); color: var(--noche); }
.epilogo .separador-deco { color: var(--oro-oscuro); }

/* ------------------------------------------------------------------ páginas (hoja) */

.hoja-cabecera { background: var(--noche); color: var(--crema); text-align: center; padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); }
.hoja-abanico { width: 7rem; margin: 0 auto 1rem; }
.hoja-titulo { margin: 0; font: italic 400 clamp(2.2rem, 5vw, 3.6rem)/1.1 var(--fuente-titulos); }
.hoja-cabecera .antetitulo { margin-bottom: .5rem; }
.hoja-cabecera .x-buscador { margin: 0 auto; }
.hoja-cabecera .x-buscador input { color: var(--tinta); background: #fffaf1; }
.hoja-cabecera .cuenta { margin: 1rem 0 0; color: var(--oro-claro); font-size: .95rem; }
.hoja-cuerpo { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem); }
.contenido { line-height: 1.75; }
.contenido h2, .contenido h3 { font-family: var(--fuente-titulos); font-weight: 500; font-style: italic; }
.lista-simple { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho-texto); }
.lista-simple li { padding: 1rem 0; border-bottom: 1px solid #e3d5b6; display: flex; flex-direction: column; gap: .2rem; }
.lista-simple a { font: italic 500 1.4rem/1.25 var(--fuente-titulos); color: var(--noche); text-decoration: none; }
.lista-simple a:hover { color: var(--oro-oscuro); text-decoration: underline; }
.lista-simple time, .lista-extracto { font-size: .95rem; color: var(--tenue); }
.vacio { text-align: center; color: var(--tenue); }
.vecinos { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 3rem; }
.x-buscador input { border-radius: 0; border-color: var(--oro); min-height: 48px; font-family: var(--fuente-texto); }
.x-buscador button { border-radius: 0; background: var(--oro); border-color: var(--oro); color: var(--noche); font: 600 .8rem/1 var(--fuente-texto); letter-spacing: .2em; text-transform: uppercase; min-height: 48px; }
.x-buscador button:hover { background: var(--oro-claro); }
.paginacion a, .paginacion span[aria-current] { border-radius: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

.portada-404 .portada-titulo-2 { font-size: clamp(2.8rem, 9vw, 6rem); }
.torre-404 { width: 40px; height: 94px; margin: 0 auto 1.25rem; }

/* ------------------------------------------------------------------ pie */

.pie { background: var(--noche); color: rgba(247, 241, 230, .8); text-align: center; padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; border-top: 1px solid rgba(212, 176, 106, .35); }
.pie-abanico { width: 6rem; margin: 0 auto 1.25rem; }
.pie-nombre { margin: 0; font: italic 400 clamp(1.8rem, 4vw, 2.6rem)/1.15 var(--fuente-titulos); color: var(--crema); }
.pie-lema { margin: .6rem 0 0; font: 600 .8rem/1.4 var(--fuente-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--oro); }
.pie-texto { margin: .75rem auto 0; max-width: 36rem; }
.pie-menu { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin: 2rem 0 0; padding: 0; }
.pie-menu a { display: inline-flex; align-items: center; min-height: 44px; color: var(--oro-claro); text-decoration: none; font-size: .95rem; }
.pie-menu a:hover { color: #fff; text-decoration: underline; }
.pie-final { margin: 1.5rem 0 0; font-size: .82rem; color: rgba(247, 241, 230, .6); }

/* ------------------------------------------------------------------ visor, movimiento, impresión */

.x-visor { background: rgba(16, 26, 46, .96); }
.x-visor img { border: 1px solid var(--oro); padding: 6px; background: var(--noche-2); border-radius: 0; }
.x-visor button { color: var(--oro-claro); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .contenido-album figure.imagen img:hover { transform: none; }
}
@media print {
  .cabecera, .pie, .portada-botones, .menu-boton, .saltar, .rayos { display: none !important; }
  .portada-deco, .album, .hoja-cabecera { background: #fff; color: #000; }
  .portada-titulo-1, .portada-titulo-2, .encabezado-claro h2 { color: #000; -webkit-text-fill-color: #000; background: none; }
  .contenido-album { grid-template-columns: 1fr; }
  .contenido-album figure.imagen { break-inside: avoid; }
}

/* vídeos bajo demanda (botón del motor): pantalla de cine art déco */
.x-video { border-radius: 0; background: radial-gradient(ellipse 70% 80% at 50% 100%, var(--noche-3), var(--noche) 70%); box-shadow: inset 0 0 0 1px rgba(212, 176, 106, .55), inset 0 0 0 7px var(--noche), inset 0 0 0 8px rgba(212, 176, 106, .3); }
.x-video::before { opacity: 1; background: repeating-conic-gradient(from -90deg at 50% 110%, rgba(212, 176, 106, .08) 0 1.2deg, transparent 1.2deg 7deg); }
.x-video-icono { color: var(--oro); }
.x-video-icono svg path + path { fill: var(--noche); }
.x-video-texto { font: 600 .78rem/1.4 var(--fuente-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--oro-claro); text-shadow: none; }
.x-video-texto small { letter-spacing: .06em; text-transform: none; color: var(--rosa); opacity: 1; }
.x-video:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* estados activos */
.boton-deco:active { transform: translateY(1px); }
.menu a:active, .pie-menu a:active { color: var(--oro); }

/* ------------------------------------------------------------------ ronda 2: hojear el álbum y volver */
.album-acciones { margin: 1.75rem 0 0; }
.album-arriba { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; text-align: center; }
@media print { .album-acciones, .album-arriba { display: none; } }

/* ==================================================================
 * Ronda 3 — sistema visual y acabado profesional
 * ================================================================== */
:root {
  --margen: clamp(1.25rem, 4vw, 2.5rem);
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-6: 1.5rem; --e-8: 2rem; --e-12: 3rem; --e-16: 4rem;
  --sec: clamp(3.5rem, 8vw, 6.5rem);
  --track: .26em;
}
html { scrollbar-color: var(--oro-oscuro) var(--crema); accent-color: var(--oro-oscuro); }
a { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }

/* ritmo vertical común */
.diario, .album, .epilogo { padding-block: var(--sec); }
.encabezado-deco { margin-bottom: var(--e-12); }
.hoja-cuerpo { padding-block: var(--e-12) var(--sec); }

/* rótulos largos legibles en móvil (antetítulo de portada y lema de la 404) */
@media (max-width: 40rem) {
  .portada-deco .antetitulo { font-size: .9375rem; letter-spacing: .16em; line-height: 1.5; }
  .portada-404 .portada-lema { font-size: 1rem; letter-spacing: .1em; text-transform: none; }
  .portada-lema { font-size: .9375rem; }
  .contenido p, .dia-texto { hyphens: auto; }
}

/* cabecera y menú móvil: 64 px y panel a pantalla completa */
@media (max-width: 40rem) {
  .cabecera-fila { min-height: 64px; }
  .marca-nombre { font-size: 1.05rem; }
  .navegacion {
    position: fixed; top: 64px; left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--e-8) var(--margen) calc(var(--e-8) + env(safe-area-inset-bottom));
    background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--noche-3), var(--noche) 70%); text-align: center;
  }
  .menu a { justify-content: center; font: italic 400 2.2rem/1.1 var(--fuente-titulos); letter-spacing: 0; text-transform: none; color: var(--crema); min-height: 72px; }
  .menu a:hover, .menu a[aria-current="page"] { color: var(--oro); text-decoration: none; }
  html.menu-abierto { overflow: hidden; }
}
.portada-deco .antetitulo { font-size: .9375rem; letter-spacing: .22em; line-height: 1.5; }
.portada-404 .portada-lema { font-size: 1.0625rem; letter-spacing: .06em; text-transform: none; color: var(--crema); }
@media (max-width: 40rem) { .portada-deco .antetitulo { letter-spacing: .16em; } }

/* ==================================================================
 * Ronda 4 — portada rica: cifras del viaje, lugares, página a sangre
 * ================================================================== */
.cifras-viaje { background: var(--crema); padding-block: var(--e-12) 0; }
.cifras-deco { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: 0 auto; max-width: 52rem; border-block: 1px solid #e3d5b6; }
.cifras-deco div { flex: 1 1 12rem; display: flex; flex-direction: column; align-items: center; padding: var(--e-6) var(--e-4); text-align: center; }
.cifras-deco div + div { border-left: 1px solid #e3d5b6; }
.cifras-deco dd { margin: 0; font: italic 700 clamp(2.6rem, 6vw, 4rem)/1 var(--fuente-titulos); color: var(--noche); font-variant-numeric: lining-nums; }
.cifras-deco dt { margin-top: var(--e-2); font: 600 .8125rem/1.3 var(--fuente-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--oro-oscuro); }
@media (max-width: 30rem) { .cifras-deco div + div { border-left: 0; border-top: 1px solid #e3d5b6; } }

.lugares { background: var(--crema); padding-block: 0 var(--sec); }
.lugares-lista { list-style: none; margin: 0 auto; padding: 0; max-width: 60rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--e-2) 0; text-align: center; }
.lugares-lista li { font: italic 400 clamp(1.6rem, 3.6vw, 2.6rem)/1.3 var(--fuente-titulos); color: var(--noche); }
.lugares-lista li:nth-child(even) { color: var(--oro-oscuro); }
.lugares-lista li:not(:last-child)::after { content: ""; display: inline-block; width: .32em; height: .32em; margin: 0 .55em; background: var(--oro); transform: rotate(45deg) translateY(-.15em); }
/* el rombo que queda al final de una línea se oculta (tema.js marca .fin-linea) para que las líneas centradas no cuelguen */
.lugares-lista li.fin-linea::after { visibility: hidden; margin-right: 0; width: 0; }

.banda-deco { background: var(--noche); padding: 0; }
.banda-figura { margin: 0 auto; max-width: 125rem; position: relative; }
.banda-figura > * { max-width: none; }
.banda-figura img { display: block; width: 100%; height: auto; border-radius: 0; cursor: zoom-in; border-block: 1px solid rgba(212, 176, 106, .55); }
.banda-figura figcaption { margin: 0; padding: var(--e-3) var(--margen); text-align: center; font: 600 .8125rem/1.4 var(--fuente-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.diario + .lugares { padding-top: 0; }

/* =====================================================================================================
   Mejora de diseño (25/10/2026) — el diario como una página del álbum con línea de tiempo, páginas
   interiores en hoja enmarcada y búsqueda vacía con los lugares del viaje
   ===================================================================================================== */
/* diario: una sola página enmarcada (doble filete dorado) con los cinco días unidos por un hilo de oro */
.diario { background: var(--crema); }
.dias { position: relative; gap: 0; max-width: 54rem; padding: clamp(1rem, 3vw, 1.75rem) clamp(1.25rem, 4vw, 3rem); background: #fffaf1;
  border: 1px solid var(--oro); box-shadow: 0 0 0 6px #fffaf1, 0 0 0 7px rgba(125, 95, 36, .35), 0 30px 50px -36px rgba(16, 26, 46, .45); }
.dias::before, .dias::after { content: ""; position: absolute; width: 12px; height: 12px; background: var(--oro); transform: rotate(45deg); left: calc(50% - 6px); }
.dias::before { top: -13px; }
.dias::after { bottom: -13px; }
.dia { position: relative; background: none; border: 0; box-shadow: none; padding: clamp(1.25rem, 3vw, 1.75rem) 0; border-bottom: 1px solid #ecdfc2; }
.dia:last-child { border-bottom: 0; }
.dia-fecha { position: relative; z-index: 1; border-right: 0; padding-right: 0; }
.dia-num { font: italic 700 clamp(3.2rem, 6vw, 4.2rem)/.95 var(--fuente-titulos); color: var(--oro-oscuro); }
.dia-mes { color: var(--noche); }
.dia-fecha::after { content: ""; width: 9px; height: 9px; margin-top: .75rem; background: var(--oro); transform: rotate(45deg); }
.dia-texto { font-size: 1.2rem; line-height: 1.75; padding-top: .35rem; }
.dia:first-child .dia-texto::first-letter { float: left; margin: .02em .12em 0 0; font: italic 700 3.3em/.8 var(--fuente-titulos); color: var(--oro-oscuro); }
@media (min-width: 36.01rem) {
  .dias::before { left: calc(clamp(1.25rem, 4vw, 3rem) + 4.25rem - 6px); }
  .dias::after { left: calc(clamp(1.25rem, 4vw, 3rem) + 4.25rem - 6px); }
  .dia::before { content: ""; position: absolute; left: 4.25rem; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(212, 176, 106, .2), var(--oro) 50%, rgba(212, 176, 106, .2)); }
  .dia-fecha { background: #fffaf1; padding-block: .25rem .35rem; }
}
@media (max-width: 36rem) { .dia-fecha::after { display: none; } .dia:first-child .dia-texto::first-letter { font-size: 2.8em; } }

/* páginas interiores: el texto en una hoja crema enmarcada como las del álbum, con la torre al pie */
.hoja-cuerpo { padding-block: clamp(2.5rem, 6vw, 4rem); }
.hoja-papel { position: relative; max-width: 46rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.25rem); background: #fffaf1;
  border: 1px solid var(--oro); box-shadow: 0 0 0 6px #fffaf1, 0 0 0 7px rgba(125, 95, 36, .35), 0 30px 50px -36px rgba(16, 26, 46, .45); }
.hoja-papel::before, .hoja-papel::after { content: ""; position: absolute; left: calc(50% - 6px); width: 12px; height: 12px; background: var(--oro); transform: rotate(45deg); }
.hoja-papel::before { top: -13px; }
.hoja-papel::after { bottom: -13px; }
.hoja-papel .contenido { font-size: 1.125rem; line-height: 1.75; }
.hoja-papel .contenido > p:first-child::first-letter { float: left; margin: .04em .12em 0 0; font: italic 700 3.4em/.8 var(--fuente-titulos); color: var(--oro-oscuro); }
.hoja-pie { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.hoja-torre { width: 34px; height: 80px; margin: 0 auto 1.25rem; color: var(--oro-oscuro); }
.hoja-pie p { margin: 0; }

/* botón art déco para fondos claros */
.boton-deco-oscuro { color: var(--noche); border-color: var(--oro-oscuro); outline-color: rgba(125, 95, 36, .4); }
.boton-deco-oscuro:hover { background: var(--noche); color: var(--oro-claro); }
.boton-deco-oscuro.boton-deco-lleno { background: var(--noche); color: var(--oro-claro); border-color: var(--noche); }
.boton-deco-oscuro.boton-deco-lleno:hover { background: var(--oro-oscuro); color: #fff; }

/* búsqueda sin resultados: los lugares del viaje y las dos entradas a la web */
.vacio-deco { text-align: center; padding-block: clamp(1rem, 3vw, 2rem); }
.vacio-deco .vacio { margin: 0 0 2rem; font: italic 400 clamp(1.3rem, 2.6vw, 1.7rem)/1.4 var(--fuente-titulos); color: var(--noche); }
.vacio-rotulo { margin: 0 0 1rem; font: 600 .82rem/1.3 var(--fuente-texto); letter-spacing: .32em; text-transform: uppercase; color: var(--oro-oscuro); }
.lugares-mini li { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.vacio-deco .portada-botones { margin-bottom: 2.5rem; }