#fotogaleria[hidden] { display: none; }

#fotogaleria {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  /* Hueco del menu fijo: el JS mide --alto-nav; 64px es solo el respaldo. */
  padding-top: var(--alto-nav, 64px);
}

/* ---- Fondo: una de las fotos, como en la Agenda ---- */
#fotogaleria.fotogaleria--foto { background: var(--col-noche); }

#fotogaleria .fotogaleria-fondo {
  position: absolute;
  inset: 0;
  background-color: var(--col-noche);
  background-size: cover;
  background-position: center;
  filter: brightness(.72) saturate(.82) sepia(.08) contrast(1.05);
  opacity: 0;
  transition: opacity .8s ease-in-out;
}
#fotogaleria .fotogaleria-fondo.cargado { opacity: 1; }

#fotogaleria.fotogaleria--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, var(--trans-10negro) 0%, var(--trans-40negro) 100%),
    linear-gradient(90deg, var(--trans-40negro) 0%, transparent 72%);
  pointer-events: none;
}

#fotogaleria .fotogaleria-marco {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, 1.6vh, 1rem);
  height: 100%;
  padding-top: clamp(.75rem, 2.2vh, 1.75rem);
  padding-bottom: clamp(.75rem, 2.2vh, 1.75rem);
  box-sizing: border-box;
}

#fotogaleria .fotogaleria-cabecera .etiqueta { margin-bottom: .25rem; }

#fotogaleria .fotogaleria-cabecera h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  color: var(--col-blanco);
  text-shadow: 0 2px 12px rgb(0 0 0 / 45%);
}

/* ---- El escenario y sus paginas ---- */

#fotogaleria .fotogaleria-escenario {
  position: relative;
  flex: 1;
  min-height: 0;
  outline: none;
  touch-action: pan-y;
}

#fotogaleria .fotogaleria-escenario:focus-visible {
  outline: 3px solid var(--col-dorado);
  outline-offset: 4px;
  border-radius: var(--espacio-2xsmall);
}

#fotogaleria .fotogaleria-pagina {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(var(--filas, 3), minmax(0, 1fr));
  gap: var(--espacio-small);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}

#fotogaleria .fotogaleria-pagina.activa {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease;
}

/* Sin el relleno de proporcion de figure:before (site.css). */
#fotogaleria .fotogaleria-pagina figure {
  min-height: 0;
  height: 100%;
  margin: 0;
  border-radius: var(--espacio-2xsmall);
}
#fotogaleria .fotogaleria-pagina figure:before { display: none; }

/* ---- Collage justificado (anchos y altos los calcula fotogaleria.js) ---- */
#fotogaleria .fotogaleria-pagina.fotogaleria-collage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#fotogaleria .fotogaleria-columna {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-small);
  min-width: 0;
}
#fotogaleria .fotogaleria-collage figure {
  width: 100%;
  flex: none;
}

#fotogaleria .fg-span-1 { grid-column: span 1; }
#fotogaleria .fg-span-2 { grid-column: span 2; }
#fotogaleria .fg-span-3 { grid-column: span 3; }
#fotogaleria .fg-span-4 { grid-column: span 4; }
#fotogaleria .fg-span-5 { grid-column: span 5; }
#fotogaleria .fg-span-6 { grid-column: span 6; }
#fotogaleria .fg-span-7 { grid-column: span 7; }
#fotogaleria .fg-span-8 { grid-column: span 8; }

#fotogaleria figure img {
  -webkit-user-drag: none;
  user-select: none;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
#fotogaleria figure:hover img { transform: scale(1.03); }

#fotogaleria .fotogaleria-pagina figure {
  box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
}

#fotogaleria .fotogaleria-esqueleto {
  background: linear-gradient(100deg, rgb(255 255 255 / 6%) 30%, rgb(255 255 255 / 18%) 50%, rgb(255 255 255 / 6%) 70%);
  background-size: 300% 100%;
  animation: fotogaleria-brillo 1.4s ease-in-out infinite;
}

@keyframes fotogaleria-brillo {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

#fotogaleria .fotogaleria-credito {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  margin: 0;
  padding: 1.6rem .75rem .5rem;
  background: linear-gradient(to top, rgb(0 0 0 / 55%), transparent);
  color: #fff;
  font-size: var(--fontsize-4xsmall);
  line-height: 1.3;
  text-align: right;
  pointer-events: none;
}

/* ---- Descargar en alta (solo en el album de prensa) ---- */
#fotogaleria .fotogaleria-descargar {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border: 0;
  border-radius: 999px;
  color: var(--col-blanco);
  background: rgb(0 0 0 / 60%);
  font: 700 var(--fontsize-4xsmall)/1 var(--font-san-serif), sans-serif;
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease;
}
#fotogaleria .fotogaleria-descargar:hover,
#fotogaleria .fotogaleria-descargar:focus-visible {
  outline: none;
  background: var(--timeline-rojo);
}
#fotogaleria .fotogaleria-descargar:focus-visible { box-shadow: 0 0 0 3px var(--col-dorado); }
/* Anula la caja de "figure i" de site.css. */
#fotogaleria .fotogaleria-descargar i {
  position: static;
  display: inline-block;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: 1em;
  line-height: 1;
}
#fotogaleria .fotogaleria-descargar:disabled { cursor: progress; }
#fotogaleria .fotogaleria-descargar.fallo { background: var(--col-rojo); }

@media (hover: hover) {
#fotogaleria .fotogaleria-descargar { opacity: 0; }
#fotogaleria figure:hover .fotogaleria-descargar,
#fotogaleria .fotogaleria-descargar:focus-visible,
#fotogaleria .fotogaleria-descargar:disabled,
#fotogaleria .fotogaleria-descargar.fallo { opacity: 1; }
}
@media only screen and (max-width:600px) {
#fotogaleria .fotogaleria-descargar span { display: none; }
#fotogaleria .fotogaleria-descargar { padding: .5rem; }
}

/* ---- Paginacion ---- */

#fotogaleria .fotogaleria-paginacion[hidden] { display: none; }
#fotogaleria .fotogaleria-paginacion.esperando { visibility: hidden; }

#fotogaleria .fotogaleria-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 1.5vw, 1rem);
}

#fotogaleria .fotogaleria-flecha {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--col-blanco);
  background: var(--timeline-rojo);
  box-shadow: 0 6px 18px rgb(0 0 0 / 28%);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .2s ease, opacity .25s ease, transform .2s ease;
}

#fotogaleria .fotogaleria-flecha:not(:disabled):hover {
  background: var(--col-rojo);
  transform: scale(1.08);
}
#fotogaleria .fotogaleria-flecha:focus-visible {
  outline: 2px solid var(--col-dorado);
  outline-offset: 2px;
}
/* La flecha apagada guarda su sitio para que los puntos no se muevan. */
#fotogaleria .fotogaleria-flecha:disabled {
  opacity: .3;
  box-shadow: none;
  cursor: default;
}

#fotogaleria .fotogaleria-contador {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#fotogaleria .fotogaleria-paginas {
  display: flex;
  align-items: center;
  max-width: min(80vw, 520px);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
#fotogaleria .fotogaleria-paginas::-webkit-scrollbar { display: none; }

/* Sin el relieve, esquinas ni oscurecido que site.css da a <button>. */
#fotogaleria .fotogaleria-pagina-boton,
#fotogaleria .fotogaleria-pagina-boton:hover,
#fotogaleria .fotogaleria-pagina-boton:active,
#fotogaleria .fotogaleria-flecha:hover,
#fotogaleria .fotogaleria-flecha:active {
  filter: none;
}

#fotogaleria .fotogaleria-pagina-boton {
  box-shadow: none;
  border-radius: 999px;
  letter-spacing: 0;
  flex: none;
  display: grid;
  place-items: center;
  height: 1.5rem;
  padding: 0 .25rem;
  border: 0;
  background: none;
  cursor: pointer;
}
#fotogaleria .fotogaleria-pagina-boton::before {
  content: "";
  display: block;
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 45%);
  transition: width .3s ease, background-color .2s ease;
}
#fotogaleria .fotogaleria-pagina-boton:hover::before { background: rgb(255 255 255 / 80%); }
#fotogaleria .fotogaleria-pagina-boton[aria-current="true"]::before {
  width: 1.75rem;
  background: var(--timeline-rojo);
}
#fotogaleria .fotogaleria-pagina-boton:focus-visible {
  outline: 2px solid var(--col-dorado);
  outline-offset: -2px;
  border-radius: 999px;
}

/* ---- Dias de la visita (solo en el album de prensa) ---- */

#fotogaleria .fotogaleria-dias {
  flex: none;
  display: flex;
  gap: .5rem;
  justify-content: center;
  overflow-x: auto;
  padding: .15rem .1rem .35rem;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
#fotogaleria .fotogaleria-dias::-webkit-scrollbar { display: none; }

#fotogaleria .fotogaleria-dia {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  min-width: 7.5rem;
  padding: .5rem 1rem;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 999px;
  color: var(--col-noche);
  background: var(--col-blanco);
  box-shadow: none;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#fotogaleria .fotogaleria-dia:hover,
#fotogaleria .fotogaleria-dia:active { filter: none; border-color: var(--timeline-rojo); color: var(--col-noche); }
#fotogaleria .fotogaleria-dia[aria-selected="true"] {
  border-color: var(--timeline-rojo);
  color: var(--col-blanco);
  background: var(--timeline-rojo);
}
#fotogaleria .fotogaleria-dia:focus-visible {
  outline: 2px solid var(--col-dorado);
  outline-offset: 2px;
}
#fotogaleria .fotogaleria-dia-num {
  font: 700 .9rem/1.1 var(--font-san-serif), sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#fotogaleria .fotogaleria-dia-lugar {
  display: flex;
  gap: .25em;
  max-width: 14rem;
  font: 400 .72rem/1.2 var(--font-san-serif), sans-serif;
  white-space: nowrap;
  opacity: .8;
}
#fotogaleria .fotogaleria-dia-sitio {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fotogaleria .fotogaleria-dia-sitio:empty { display: none; }
#fotogaleria .fotogaleria-dia-total { flex: none; }
@media only screen and (max-width:600px) {
#fotogaleria .fotogaleria-dias { justify-content: flex-start; }
#fotogaleria .fotogaleria-dia { min-width: 6.5rem; padding: .4rem .8rem; }
}

#fotogaleria .fotogaleria-jornada {
  margin-top: .35rem;
  color: var(--col-fuente);
  font: 600 var(--fontsize-4xsmall, .85rem)/1.3 var(--font-san-serif), sans-serif;
  letter-spacing: .04em;
}

/* ---- Avance de la portada ---- */

#fotogaleria .fotogaleria-acciones {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(2.6rem, 6vh, 3.4rem);
}

#fotogaleria .fotogaleria-vermas {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.6rem;
  border-radius: 999px;
  color: var(--col-blanco);
  background: var(--timeline-rojo);
  box-shadow: 0 8px 22px rgb(0 0 0 / 25%);
  font: 700 var(--fontsize-3xsmall, .95rem)/1 var(--font-san-serif), sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}
#fotogaleria .fotogaleria-vermas i { transition: transform .2s ease; }
#fotogaleria .fotogaleria-vermas:hover,
#fotogaleria .fotogaleria-vermas:focus-visible {
  outline: none;
  background: var(--col-rojo);
  transform: translateY(-2px);
}
#fotogaleria .fotogaleria-vermas:hover i,
#fotogaleria .fotogaleria-vermas:focus-visible i { transform: translateX(4px); }
#fotogaleria .fotogaleria-vermas:focus-visible {
  box-shadow: 0 0 0 3px var(--col-dorado);
}

/* ---- Album sin fotos todavia ---- */

#fotogaleria .fotogaleria-vacio[hidden] { display: none; }
#fotogaleria .fotogaleria-vacio {
  flex: 1;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--col-blanco);
  font-size: var(--fontsize-small, 1.1rem);
  text-align: center;
}
#fotogaleria.crema .fotogaleria-vacio { color: var(--col-fuente); }

/* ---- Sobre crema (sin foto de fondo) ---- */

#fotogaleria.crema .fotogaleria-cabecera h2 {
  color: var(--col-noche);
  text-shadow: none;
}
#fotogaleria.crema .fotogaleria-pagina figure { box-shadow: 0 6px 18px rgb(0 0 0 / 12%); }
#fotogaleria.crema .fotogaleria-esqueleto {
  background: linear-gradient(100deg, rgb(0 0 0 / 5%) 30%, rgb(0 0 0 / 12%) 50%, rgb(0 0 0 / 5%) 70%);
  background-size: 300% 100%;
}
#fotogaleria.crema .fotogaleria-pagina-boton::before { background: rgb(0 0 0 / 18%); }
#fotogaleria.crema .fotogaleria-pagina-boton:hover::before { background: rgb(0 0 0 / 40%); }
#fotogaleria.crema .fotogaleria-pagina-boton[aria-current="true"]::before { background: var(--timeline-rojo); }

/* ---- Adaptaciones por pantalla y movimiento ---- */
@media only screen and (max-width:600px) {
#fotogaleria { min-height: 480px; }
#fotogaleria .fotogaleria-pagina { gap: var(--espacio-2xsmall); }
#fotogaleria .fotogaleria-columna { gap: var(--espacio-2xsmall); }
#fotogaleria .fotogaleria-flecha { width: 2.5rem; height: 2.5rem; }
#fotogaleria .fotogaleria-paginas { max-width: calc(100vw - 9rem); }
}
@media (prefers-reduced-motion:reduce) {
#fotogaleria .fotogaleria-pagina,
#fotogaleria .fotogaleria-pagina.activa { transition: none; }
#fotogaleria .fotogaleria-esqueleto { animation: none; }
#fotogaleria .fotogaleria-fondo { transition: none; }
#fotogaleria figure img,
#fotogaleria .fotogaleria-pagina-boton::before { transition: none; }
#fotogaleria figure:hover img { transform: none; }
#fotogaleria .fotogaleria-vermas,
#fotogaleria .fotogaleria-vermas i { transition: none; }
#fotogaleria .fotogaleria-paginas { scroll-behavior: auto; }
}

/* ---- Visor (fuera de #fotogaleria para ir sobre el menu fijo) ---- */
html.fg-visor-abierto { overflow: hidden; }

.fg-visor[hidden] { display: none; }
.fg-visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  background: #000;
  color: #fff;
  touch-action: pan-y;
  animation: fg-visor-entra .25s ease;
}
@keyframes fg-visor-entra { from { opacity: 0; } to { opacity: 1; } }

.fg-visor-barra {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem clamp(.75rem, 2vw, 1.5rem);
}
.fg-visor-contador {
  font: 600 var(--fontsize-4xsmall)/1 var(--font-san-serif), sans-serif;
  letter-spacing: .06em;
  color: rgb(255 255 255 / 75%);
}
.fg-visor-acciones { margin-left: auto; display: flex; gap: .5rem; }

.fg-visor .fotogaleria-descargar {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 999px;
  color: #fff;
  background: rgb(255 255 255 / 10%);
  font: 700 var(--fontsize-4xsmall)/1 var(--font-san-serif), sans-serif;
  cursor: pointer;
  opacity: 1;
}
.fg-visor .fotogaleria-descargar:hover,
.fg-visor .fotogaleria-descargar:focus-visible { outline: none; background: var(--timeline-rojo); border-color: var(--timeline-rojo); }
.fg-visor .fotogaleria-descargar.fallo { background: var(--col-rojo); }

/* Sin el relieve que site.css da a <button>. */
#fotogaleria .fotogaleria-descargar,
.fg-visor .fotogaleria-descargar,
.fg-visor-cerrar,
.fg-visor-flecha { box-shadow: none; letter-spacing: 0; }
#fotogaleria .fotogaleria-descargar:hover,
#fotogaleria .fotogaleria-descargar:active,
.fg-visor button:hover,
.fg-visor button:active { filter: none; }

.fg-visor-cerrar,
.fg-visor-flecha {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  color: #fff;
  background: rgb(255 255 255 / 8%);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.fg-visor-cerrar { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
.fg-visor-flecha {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 clamp(.5rem, 2vw, 1.5rem);
  border-color: transparent;
  color: var(--col-noche);
  background: rgb(255 255 255 / 92%);
  font-size: 1.15rem;
}
.fg-visor-flecha:hover, .fg-visor-flecha:focus-visible { color: #fff; }
.fg-visor-cerrar:hover, .fg-visor-cerrar:focus-visible,
.fg-visor-flecha:hover, .fg-visor-flecha:focus-visible {
  outline: none;
  background: var(--timeline-rojo);
  border-color: var(--timeline-rojo);
  transform: scale(1.06);
}

.fg-visor-foto {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: .75rem;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding-bottom: clamp(.75rem, 2vh, 1.5rem);
  box-sizing: border-box;
}
.fg-visor-foto:before { display: none; }
.fg-visor-foto img {
  position: static;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
/* site.css pone el figcaption sobre la foto; aqui va debajo. */
.fg-visor-foto figcaption {
  position: static;
  inset: auto;
  padding: 0;
  background: none;
  max-width: 70ch;
  text-align: center;
}
.fg-visor-comision {
  display: inline-block;
  margin: 0 0 .4rem;
  padding: .2rem .8rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  color: #fff;
  font-size: var(--fontsize-4xsmall);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fg-visor-comision:empty { display: none; }
.fg-visor-leyenda {
  margin: 0;
  color: rgb(255 255 255 / 90%);
  font-size: var(--fontsize-4xsmall);
  line-height: 1.5;
}
.fg-visor-credito {
  color: rgb(255 255 255 / 60%);
  font-size: var(--fontsize-4xsmall);
}

@media only screen and (max-width:600px) {
.fg-visor {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.fg-visor-foto { grid-column: 1 / -1; grid-row: 2; }
.fg-visor-flecha {
  grid-row: 3;
  width: 3rem;
  height: 3rem;
  margin: 0 .6rem max(1rem, env(safe-area-inset-bottom));
}
.fg-visor-anterior { grid-column: 1; justify-self: end; }
.fg-visor-siguiente { grid-column: 2; justify-self: start; }
.fg-visor .fotogaleria-descargar span { display: none; }
.fg-visor .fotogaleria-descargar { padding: .6rem; }
}
@media (prefers-reduced-motion:reduce) {
.fg-visor { animation: none; }
.fg-visor-cerrar, .fg-visor-flecha { transition: none; }
}

#fotogaleria .fotogaleria-pagina figure[data-id] { cursor: zoom-in; }
#fotogaleria .fotogaleria-pagina figure[data-id]:focus-visible {
  outline: 3px solid var(--timeline-rojo);
  outline-offset: 2px;
}