/* =============================================================
   GALERÍA — barra de navegación + visor a pantalla completa
   ============================================================= */

/* -------------------------------------------------------------
   BARRA DE NAVEGACIÓN (botón GALERÍA + puntitos)
   Vive dentro de la sección y queda por encima del visor, para
   que al abrir una foto los puntitos no se muevan de lugar.
   ------------------------------------------------------------- */

.galeria-nav {
  position: absolute;
  left: var(--texto-x);
  top: var(--nav-y, 88%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1.9em;
  translate: 0 -50%;   /* no con transform: lo escribe la animación de entrada */

  font-size: clamp(11px, 0.85vw, 16px);  /* escala todo el componente */
  color: var(--blanco);
}

.galeria-nav__abrir {
  display: inline-flex;
  align-items: center;
  gap: 0.95em;
  padding: 0;
}

.galeria-nav__icono {
  width: 1.75em;
  flex: none;
  transition: transform var(--dur-media) var(--ease-suave);
}

.galeria-nav__icono svg { width: 100%; height: auto; }

.galeria-nav__texto {
  width: 5.5em;
  opacity: 0.9;
  transition: opacity var(--dur-media) var(--ease-suave);
}

.galeria-nav__texto svg { width: 100%; height: auto; }

.galeria-nav__abrir:hover .galeria-nav__icono { transform: translateX(3px); }
.galeria-nav__abrir:hover .galeria-nav__texto { opacity: 1; }

/* --- Puntitos: uno por foto --- */
.galeria-nav__puntos {
  display: flex;
  align-items: center;
  gap: 0.85em;
}

.punto {
  width: 0.75em;
  height: 0.75em;
  padding: 0;
  border: 1px solid var(--blanco);
  border-radius: 50%;
  background: transparent;
  opacity: 0.75;
  transition:
    background-color var(--dur-rapida) var(--ease-suave),
    transform var(--dur-rapida) var(--ease-suave),
    opacity var(--dur-rapida) var(--ease-suave);
}

.punto:hover {
  opacity: 1;
  transform: scale(1.25);
}

/* El punto de la foto abierta queda pintado */
.punto.esta-activo {
  background: var(--blanco);
  opacity: 1;
}

/* -------------------------------------------------------------
   NAVEGADOR DE MINIATURAS
   Alternativa a los puntitos: una tira de fotos chicas, todas de
   la misma altura, cada una conservando su proporción.
   ------------------------------------------------------------- */

.tumbs {
  position: absolute;
  transition: filter var(--dur-media) var(--ease-suave);
  left: var(--tumbs-x, 10%);
  top: var(--tumbs-y, 74%);
  z-index: 60;
  display: flex;
  gap: var(--tumbs-separacion, 0px);
  /* La tira ocupa un ancho —el mismo que el bloque de texto, si se le pasa
     el mismo valor— y las miniaturas se lo reparten en partes iguales. El
     alto sale solo, de la proporción de las fotos. */
  width: var(--tumbs-ancho, 76%);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;          /* la barra se oculta: se arrastra */
}

.tumbs::-webkit-scrollbar { display: none; }

.tumb {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  opacity: 0.72;
  transition:
    opacity var(--dur-media) var(--ease-suave),
    transform var(--dur-media) var(--ease-suave);
}

.tumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.tumb:hover { opacity: 1; }

/* La miniatura de la foto abierta */
.tumb.esta-activo {
  opacity: 1;
  transform: translateY(-4px);
}

/* -------------------------------------------------------------
   VISOR A PANTALLA COMPLETA
   ------------------------------------------------------------- */

.galeria {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
}

.galeria.esta-abierta {
  visibility: visible;
}

.galeria__fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  cursor: pointer;
}

.galeria__marco {
  position: relative;
  margin: 0;
  width: min(78vw, 1500px);
  /* El alto y el margen de abajo se ajustan por sección para que la foto
     nunca tape al navegador (los puntitos o la tira de miniaturas). */
  height: var(--galeria-alto, 70svh);
  margin-bottom: var(--galeria-margen-abajo, 5svh);
}

/* Dos capas de imagen que se cruzan al cambiar de foto.
   `margin: auto` las centra cuando la foto es chica y no se agranda
   hasta llenar el marco (ver el tope de ampliación en galeria.js). */
.galeria__foto {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

/* --- Flechas y cierre --- */
.galeria__flecha,
.galeria__cerrar {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--blanco);
  opacity: 0.65;
  transition:
    opacity var(--dur-media) var(--ease-suave),
    transform var(--dur-media) var(--ease-suave);
}

.galeria__flecha:hover,
.galeria__cerrar:hover { opacity: 1; }

.galeria__flecha {
  top: 50%;
  width: clamp(34px, 3.4vw, 54px);
  height: clamp(34px, 3.4vw, 54px);
  margin-top: clamp(-27px, -1.7vw, -17px);
}

.galeria__flecha svg { width: 100%; height: 100%; }

.galeria__flecha--anterior { left: clamp(12px, 4vw, 70px); }
.galeria__flecha--siguiente { right: clamp(12px, 4vw, 70px); }

.galeria__flecha--anterior:hover { transform: translateX(-3px); }
.galeria__flecha--siguiente:hover { transform: translateX(3px); }

.galeria__flecha[disabled] {
  opacity: 0.18;
  pointer-events: none;
}

.galeria__cerrar {
  top: clamp(16px, 3svh, 40px);
  right: clamp(16px, 3vw, 56px);
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
}

/* Con la galería abierta, la foto manda: la tira de miniaturas y el botón
   GALERÍA pasan por detrás del visor. Aunque las medidas ya evitan que se
   toquen, una foto más ancha o más alta nunca queda tapada por ellos. */
body.galeria-abierta .tumbs,
body.galeria-abierta .galeria-nav { z-index: 40; }

/* Las flechas de abajo son sólo para celular */
.galeria__pasos { display: none; }

/* Mientras hay una foto abierta no se scrollea la página */
body.galeria-abierta { overflow: hidden; }

/* Con la galería abierta, los controles de la sección se apagan para
   que no compitan con los del visor (los puntitos sí quedan).
   Se atenúan con `filter` y no con `opacity`: la opacidad de estos
   elementos ya la maneja la animación de entrada de la sección, y las
   dos cosas se pisarían. */
.colgante,
.articulo__volver {
  transition: filter var(--dur-media) var(--ease-suave);
}

body.galeria-abierta .colgante,
body.galeria-abierta .articulo__volver {
  filter: opacity(0.1);
  pointer-events: none;
}

/* -------------------------------------------------------------
   PANTALLAS CHICAS
   ------------------------------------------------------------- */

@media (max-width: 860px) {
  .galeria__marco {
    width: 92vw;
    height: 62svh;
  }

  .galeria-nav {
    flex-wrap: wrap;
    gap: 1.2em;
    max-width: 80vw;
  }
}


/* -------------------------------------------------------------
   MOBILE — el navegador toma las medidas de celular de la sección
   ------------------------------------------------------------- */

@media (max-width: 760px) {
  .galeria-nav {
    left: var(--texto-x-mobile, var(--texto-x));
    top: var(--nav-y-mobile, var(--nav-y, 88%));
    /* el tamaño de todo el componente (con muchas fotos, los
       puntitos son los que más lugar ocupan) */
    font-size: var(--nav-tamano-mobile, clamp(10.3px, 2.85vw, 16px));
    gap: 1.6em;
  }

  .galeria-nav__texto { width: 4.4em; }

  /* En celular la tira mide por alto y se arrastra de costado: si las
     miniaturas se repartieran el ancho quedarían diminutas */
  .tumbs {
    left: var(--tumbs-x-mobile, var(--tumbs-x, 10%));
    top: var(--tumbs-y-mobile, var(--tumbs-y, 74%));
    width: auto;
    max-width: var(--tumbs-ancho-mobile, 68.3%);
    height: var(--tumbs-alto-mobile, 8.1svh);
  }

  .tumb { flex: none; height: 100%; }
  .tumb img { height: 100%; width: auto; }

  .galeria-nav__puntos { gap: 0.62em; }
}


/* -------------------------------------------------------------
   MOBILE — la galería abierta

   Las flechas de los costados quedaban pegadas a los bordes y era
   fácil errarles y tocar el fondo, que cierra la galería. En celular
   se esconden y las fotos se pasan con el par de flechas de abajo o
   arrastrando el dedo sobre la imagen.
   ------------------------------------------------------------- */

@media (max-width: 760px) {
  /* La foto arriba y las flechas debajo, en una sola columna */
  .galeria {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--galeria-separacion-mobile, 3svh);
  }

  .galeria__marco {
    width: var(--galeria-ancho-mobile, 88vw);
    height: var(--galeria-alto-mobile, 60svh);
    margin-bottom: 0;
    flex: none;
    touch-action: pan-y;   /* el gesto horizontal es nuestro */
  }

  .galeria__flecha { display: none; }

  .galeria__pasos {
    display: flex;
    align-items: center;
    gap: var(--galeria-pasos-separacion-mobile, 22vw);
  }

  .galeria__paso {
    width: var(--galeria-paso-tamano-mobile, 15px);
    padding: 12px 20px;
    box-sizing: content-box;
    color: var(--blanco);
    opacity: 0.75;
    transition: opacity var(--dur-media) var(--ease-suave);
  }

  .galeria__paso svg { width: 100%; height: auto; display: block; }
  .galeria__paso--anterior svg { transform: scaleX(-1); }
  .galeria__paso:active { opacity: 1; }

  .galeria__paso[disabled] {
    opacity: 0.18;
    pointer-events: none;
  }

  /* El navegador de la sección queda con el ícono y GALERÍA nada más */
  .galeria-nav__puntos { display: none; }

  /* Con la galería abierta, ese botón se apaga: sin los puntitos ya no
     sirve de nada y, si lo tocaban, la galería volvía a la primera foto */
  body.galeria-abierta .galeria-nav {
    filter: opacity(0.12);
    pointer-events: none;
  }

  /* Y la tira de miniaturas se aparta: en una pantalla angosta la foto
     grande ocupa el centro y la tira le quedaba encima. Se pasa de foto
     con las flechas de abajo o arrastrando el dedo sobre la imagen. */
  body.galeria-abierta .tumbs {
    filter: opacity(0);
    pointer-events: none;
  }
}