/* =============================================================================
   ÁLBUM DE FOTOS · Estilos propios de album.html
   El libro (tapas, guardas, paso de página y controles) es el de libro.css;
   aquí van las páginas de fotos, la vista de todas, el visor y la presentación.
   ============================================================================= */

/* ─────────────────────────── 1. HERRAMIENTAS ─────────────────────────── */
.selector-anio { position: relative; flex: 1 1 200px; max-width: 250px; }
.selector-anio select {
  -webkit-appearance: none; appearance: none;
  width: 100%; padding: .8rem 2.4rem .8rem 2.8rem;
  border: 1px solid var(--linea); border-radius: 999px;
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: .97rem; cursor: pointer;
}
.selector-anio select:disabled { opacity: .5; cursor: default; }
.selector-anio select:focus-visible { outline: 3px solid var(--oro-500); outline-offset: 2px; }
.selector-anio svg {
  position: absolute; left: 1.05rem; top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; fill: none; stroke: var(--texto-suave); stroke-width: 1.8; stroke-linecap: round;
  pointer-events: none;
}
/* Flecha del desplegable */
.selector-anio::after {
  content: ""; position: absolute; right: 1.15rem; top: 50%;
  width: 7px; height: 7px; translate: 0 -70%; rotate: 45deg;
  border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave);
  pointer-events: none;
}
.btn--pase { gap: .5rem; }
.btn--pase svg { width: 17px; height: 17px; fill: currentColor; }

@media (max-width: 560px) {
  /* Fila 1: año y PDF · fila 2: la presentación, a todo el ancho ·
     fila 3: los otros dos, a partes iguales */
  .selector-anio { flex: 1 1 150px; max-width: none; order: 1; }
  .selector-anio select { padding: .72rem 2rem .72rem 2.5rem; font-size: .9rem; }
  .selector-anio svg { left: .9rem; }
  .libro-herramientas .btn--pdf { order: 2; }
  .libro-herramientas .btn--pase { order: 3; flex: 1 1 100%; }
  .libro-herramientas__par { order: 4; }
}
/* En pantallas muy estrechas, «Presentación» a secas */
@media (max-width: 340px) {
  .btn--pase__resto { display: none; }
}

/* ─────────────────────────── 2. PÁGINAS DE FOTOS ─────────────────────────── */
/* Menos margen entre cabecera, fotos y número de página: más sitio para la foto */
.folio--fotos { row-gap: calc(var(--renglon) * .45); }
.folio--fotos .folio__cuerpo { background-image: none; }

.album-hoja {
  --cap: calc(var(--renglon) * 1.3);                /* alto del pie de foto */
  display: grid; grid-template-rows: minmax(0, 1fr);
  gap: calc(var(--renglon) * .5);
}
.album-hoja--juntas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--renglon) * .6); }
.album-hoja--anio { grid-template-rows: auto minmax(0, 1fr); }

/* El año, al empezar sus páginas */
.album-hoja__anio {
  grid-column: 1 / -1; margin: 0;
  display: flex; align-items: center; gap: .45em;
  font: italic 600 calc(var(--pw) * .075)/1 var(--fuente-titulo); color: var(--meta-libro);
}
.album-hoja__anio::before,
.album-hoja__anio::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--meta-libro)); opacity: .6; }
.album-hoja__anio::after { background: linear-gradient(90deg, var(--meta-libro), transparent); }

/* Cada hueco mide lo que le toca; la foto se ajusta dentro sin deformarse */
.hueco { container-type: size; min-width: 0; min-height: 0; display: grid; place-items: center; }
/* La figura ocupa el ancho del hueco: así el título tiene sitio aunque la foto sea estrecha */
.foto-album { width: 100cqw; margin: 0; display: flex; flex-direction: column; align-items: center; rotate: var(--giro, 0deg); }
.foto-album__marco {
  --esquinera: #3a2f23;
  --e: calc(var(--renglon) * .7);
  position: relative; display: block;
  width: min(100cqw - 12px, (100cqh - var(--cap)) * var(--ar));
  aspect-ratio: var(--ar);
  padding: calc(var(--renglon) * .2); border: 0; cursor: zoom-in;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 8px 16px -8px rgba(0, 0, 0, .4);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.foto-album__marco:hover { transform: scale(1.025); box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 14px 26px -10px rgba(0, 0, 0, .45); }
.foto-album__marco img,
.foto-album__marco .marco { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Esquineras de papel, como en los álbumes de antes */
.foto-album__marco::after {
  content: ""; position: absolute; inset: -3px; pointer-events: none;
  background:
    linear-gradient(135deg, var(--esquinera) 50%, transparent 50.5%) top left / var(--e) var(--e) no-repeat,
    linear-gradient(225deg, var(--esquinera) 50%, transparent 50.5%) top right / var(--e) var(--e) no-repeat,
    linear-gradient(45deg, var(--esquinera) 50%, transparent 50.5%) bottom left / var(--e) var(--e) no-repeat,
    linear-gradient(315deg, var(--esquinera) 50%, transparent 50.5%) bottom right / var(--e) var(--e) no-repeat;
  opacity: .88;
}
.foto-album__pie {
  width: 100%; height: var(--cap); padding-inline: .3em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  font: 600 calc(var(--renglon) * .9)/var(--cap) "Caveat", "Segoe Script", "Bradley Hand", cursive;
  color: var(--firma-libro);
}

/* Esquina que invita a pasar página, como en el libro de visitas */
.libro__lado--der .folio--fotos::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 0; height: 0;
  background: linear-gradient(135deg, var(--papel-libro) 45%, var(--papel-borde) 50%, #d4c9b1 100%);
  box-shadow: -2px -2px 6px rgba(0, 0, 0, .12);
  border-top-left-radius: 6px;
  transition: width .25s ease, height .25s ease;
}
.libro__lado--der:hover .folio--fotos::after { width: 34px; height: 34px; }

/* ─────────────────────────── 3. TODAS LAS FOTOS ─────────────────────────── */
.rejilla { margin-top: 1.8rem; }
.rejilla__anio { margin-bottom: 2.6rem; }
.rejilla__titulo {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  font-size: clamp(1.6rem, 4vw, 2.2rem); scroll-margin-top: 96px;
  padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linea);
}
.rejilla__titulo small {
  font: 600 .78rem/1 var(--fuente-texto); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-suave);
}
.rejilla__fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; }
.rejilla__foto {
  position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden;
  border-radius: var(--radio-s); background: var(--superficie); box-shadow: var(--sombra); cursor: zoom-in;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.rejilla__foto:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.rejilla__foto img, .rejilla__foto .marco { display: block; width: 100%; height: 100%; object-fit: cover; }
.rejilla__pie {
  position: absolute; inset: auto 0 0 0; padding: 1.8rem .7rem .55rem;
  background: linear-gradient(transparent, rgba(11, 31, 19, .85));
  color: #fff; text-align: left; font-size: .86rem; font-weight: 600; line-height: 1.25;
}
@media (max-width: 460px) {
  .rejilla__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
}

/* ─────────────────────────── 4. VISOR ─────────────────────────── */
.visor--album { overflow: visible; }
.visor--album figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.visor__cuenta { flex-shrink: 0; font-size: .88rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.visor__paso {
  position: absolute; top: calc(50% - 1.6rem); translate: 0 -50%; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(0, 0, 0, .5); color: #fff;
  transition: background var(--transicion), opacity var(--transicion);
}
.visor__paso:hover { background: rgba(0, 0, 0, .75); }
.visor__paso:disabled { opacity: 0; pointer-events: none; }
.visor__paso--ant { left: .7rem; }
.visor__paso--sig { right: .7rem; }
.visor__paso svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ─────────────────────────── 5. PRESENTACIÓN ─────────────────────────── */
.pase {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: #050a07; color: #fff;
}
.pase::backdrop { background: #050a07; }
.pase--quieto { cursor: none; }

.pase__lienzo { position: absolute; inset: 0; }
/* Oscurece la parte de abajo de las fotos para que el rótulo se lea sobre
   cualquiera (en la portada y el cierre no hace falta) */
.pase__capa[data-tipo="foto"]::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%; pointer-events: none;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
}
.pase__capa {
  position: absolute; inset: 0; overflow: hidden;
  display: grid; place-items: center;
  opacity: 0; transition: opacity 1.2s ease;
}
.pase__capa--visible { opacity: 1; }
.pase__capa[data-tipo="portada"],
.pase__capa[data-tipo="cierre"],
.pase__capa:has(.pase__hueco) {
  background: radial-gradient(120% 90% at 30% 18%, #2b5e39 0%, #1c4428 55%, #0b1f13 100%);
}
/* La misma foto, ampliada y desenfocada, rellena los lados */
.pase__fondo {
  position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover;
  filter: blur(34px) brightness(.45) saturate(1.1);
}
.pase__img {
  position: relative; width: 100%; height: 100%; object-fit: contain;
  animation: acercar 9s ease-out forwards;
}
/* Vista previa sin fotos: el hueco ilustrado de cada una, como en el álbum */
.pase__hueco {
  height: min(70vh, 56vw); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
  animation: acercar 9s ease-out forwards;
}
.pase__hueco .marco { width: 100%; height: 100%; }
.pase__aviso {
  position: absolute; top: 1.1rem; left: 50%; translate: -50% 0; max-width: 92vw; margin: 0;
  padding: .45rem 1.05rem; border-radius: 999px;
  background: rgba(0, 0, 0, .5); color: #f3d58a; backdrop-filter: blur(8px);
  font: 600 .85rem/1.3 var(--fuente-texto); letter-spacing: .03em; text-align: center;
}
.pase__capa[data-efecto="1"] .pase__img { transform-origin: 30% 35%; }
.pase__capa[data-efecto="2"] .pase__img { transform-origin: 70% 40%; }
.pase__capa[data-efecto="3"] .pase__img { transform-origin: 50% 70%; }
@keyframes acercar { from { scale: 1; } to { scale: 1.08; } }
.pase--pausado .pase__img, .pase--pausado .pase__hueco { animation-play-state: paused; }

.pase__portada { display: grid; justify-items: center; gap: clamp(.4rem, 1.4vh, .9rem); padding: 2rem; text-align: center; }
/* El logotipo del aniversario, sobre su papel crema, abre la presentación */
.pase__logo {
  padding: clamp(.8rem, 2.4vh, 1.6rem); border-radius: clamp(16px, 2.6vh, 26px);
  background: var(--crema); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}
.pase__logo img { display: block; width: auto; height: min(58vh, 520px); max-width: 70vw; object-fit: contain; }
.pase__lema { margin: 0; font: italic 500 clamp(1.6rem, 4.6vw, 3.2rem)/1.15 var(--fuente-titulo); color: #f1d58c; }
.pase__fechas { margin: .4rem 0 0; font: 600 clamp(.85rem, 1.8vw, 1.1rem)/1 var(--fuente-texto); letter-spacing: .4em; color: rgba(243, 205, 109, .75); }
.pase__anillos { width: clamp(60px, 10vw, 110px); height: auto; margin-bottom: .6rem; }
.pase__anillos circle { fill: none; stroke: #e7c877; stroke-width: 1.2; }
.pase__anillos .nucleo { fill: #e7c877; stroke: none; }

.pase__rotulo {
  position: absolute; left: clamp(1.2rem, 4vw, 3.2rem); right: clamp(1.2rem, 4vw, 3.2rem);
  bottom: clamp(5.2rem, 12vh, 7rem);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
  pointer-events: none;
}
.pase__anio { margin: 0; font: 900 clamp(2.6rem, 8vh, 5.4rem)/1 var(--fuente-titulo); color: var(--oro-300); }
.pase__titulo { margin: .35rem 0 0; max-width: 40ch; font: 500 clamp(1.1rem, 3vh, 1.8rem)/1.3 var(--fuente-titulo); }

.pase__barra { position: absolute; inset: 0 0 auto 0; height: 3px; background: rgba(255, 255, 255, .12); transition: opacity .5s; }
.pase__barra span { display: block; width: 0; height: 100%; background: var(--oro-300); transition: width .8s ease; }

.pase__mandos {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 1.8rem); translate: -50% 0;
  display: flex; align-items: center; gap: .35rem;
  padding: .4rem .55rem; border-radius: 999px;
  background: rgba(0, 0, 0, .5); backdrop-filter: blur(10px);
  transition: opacity .5s;
}
.pase--quieto .pase__mandos, .pase--quieto .pase__barra { opacity: 0; }
.pase__btn {
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: #fff;
  transition: background var(--transicion);
}
.pase__btn:hover { background: rgba(255, 255, 255, .15); }
.pase__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pase__btn--grande { width: 56px; height: 56px; background: var(--oro-500); color: var(--verde-950); }
.pase__btn--grande:hover { background: var(--oro-300); }
.pase__btn--grande svg { fill: currentColor; stroke: none; }
.pase__btn--grande .icono-play { translate: 2px 0; }
.pase .icono-play, .pase--pausado .icono-pausa { display: none; }
.pase--pausado .icono-play { display: block; }
.pase__btn .icono-silencio, .pase__btn[aria-pressed="false"] .icono-musica { display: none; }
.pase__btn[aria-pressed="false"] .icono-silencio { display: block; }

@media (prefers-reduced-motion: reduce) {
  .pase__img, .pase__hueco { animation: none; }
}

/* ─────────────────────────── 6. EDICIÓN IMPRESA ─────────────────────────── */
/* Tapa, contratapa, portadilla y colofón son los de libro.css. Aquí, las
   páginas del álbum, que se componen una a una (album.js): A4 sin márgenes
   del navegador, con su cabecera, su cuerpo y su número dentro. */
@page album {
  size: A4; margin: 0;
  @top-left { content: none; } @top-right { content: none; } @bottom-center { content: none; }
}

@media print {
  .impresion .imp-pagina {
    page: album; break-before: auto; break-after: page;
    width: 210mm; height: 297mm; min-height: 0; overflow: hidden;
    padding: 17mm 18mm 14mm;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 7mm;
  }
  /* Portadilla, índice y colofón: centrados en la hoja (con grid, no con flex) */
  .impresion .imp-pagina--centro {
    grid-template-rows: none; align-content: center; justify-items: center; row-gap: 3mm;
    padding: 25mm 20mm 22mm; text-align: center;
  }
  .impresion .imp-colofon { row-gap: 4mm; }

  /* Cabecera y número */
  .imp-cabeza {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 2.6mm; border-bottom: .5pt solid #e3d7bc;
  }
  .imp-cabeza span:first-child { font: italic 500 9pt/1 var(--fuente-titulo); color: #97772c; }
  .imp-cabeza span:last-child { font: 600 6.5pt/1 var(--fuente-texto); letter-spacing: .18em; text-transform: uppercase; color: #97772c; }
  .imp-folio { text-align: center; font: italic 500 9pt/1 var(--fuente-titulo); color: #97772c; }

  /* Cuerpo: dos filas de fotos (o una); el primer pliego de cada año, con su número */
  .imp-cuerpo { min-height: 0; display: grid; grid-template-rows: repeat(var(--filas), minmax(0, 1fr)); gap: 8mm; }
  .imp-cuerpo--apertura { grid-template-rows: auto repeat(var(--filas), minmax(0, 1fr)); }
  .imp-anio { text-align: center; padding-top: 1mm; }
  .imp-anio__num {
    margin: 0; display: flex; align-items: center; gap: 6mm;
    font: italic 600 34pt/1 var(--fuente-titulo); color: #97772c;
  }
  .imp-anio__num::before,
  .imp-anio__num::after { content: ""; flex: 1; height: .5pt; background: #dccda6; }
  .imp-anio__cuenta {
    margin: 3mm 0 0; font: 600 7pt/1 var(--fuente-texto); letter-spacing: .3em; text-transform: uppercase; color: #97772c;
  }

  /* Cada foto, ajustada a su hueco sin deformarse ni recortarse, con su pie */
  .imp-fila { min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8mm; }
  .imp-hueco { container-type: size; min-width: 0; min-height: 0; display: grid; place-items: center; }
  .imp-foto { --cap: 10mm; width: 100cqw; margin: 0; display: grid; justify-items: center; }
  .imp-foto img {
    display: block; width: min(100cqw, (100cqh - var(--cap)) * var(--ar)); aspect-ratio: var(--ar);
    object-fit: cover;
    outline: .3mm solid rgba(0, 0, 0, .12); outline-offset: -.3mm;   /* que una foto clara no se funda con el papel */
  }
  .imp-foto figcaption {
    width: 100%; height: var(--cap); padding-top: 3mm; text-align: center;
    font: italic 400 10pt/1.3 var(--fuente-titulo); color: #3a2f23;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Índice de años, con puntos guía hasta la página */
  .imp-indice__titulo { margin: 0 0 11mm; font: italic 600 32pt/1.05 var(--fuente-titulo); color: var(--tinta-libro); }
  .imp-indice__lista { width: 110mm; margin: 0; padding: 0; list-style: none; text-align: left; }
  .imp-indice__lista--dos { width: 170mm; columns: 2; column-gap: 14mm; }
  .imp-indice__lista li { display: flex; align-items: baseline; gap: 2.5mm; padding: 1.7mm 0; break-inside: avoid; }
  .imp-indice__anio { font: 600 13pt/1 var(--fuente-titulo); color: var(--tinta-libro); }
  .imp-indice__cuenta { font: 600 6.5pt/1 var(--fuente-texto); letter-spacing: .14em; text-transform: uppercase; color: #97772c; }
  .imp-indice__guia { flex: 1; min-width: 6mm; border-bottom: 1pt dotted #c9b88f; }
  .imp-indice__pag { font: italic 500 11.5pt/1 var(--fuente-titulo); color: #97772c; font-variant-numeric: tabular-nums; }

  .visor, .pase { display: none !important; }
}