/* 1. Asegurar que los elementos de la galería tengan la misma altura en cada fila */
.gallery-row {
display: flex;
flex-wrap: wrap;
}

.gallery-row .col-lg-3, 
.gallery-row .col-md-6, 
.gallery-row .col-sm-6 {
display: flex;
margin-bottom: 30px;
}

/* Solución definitiva para altura uniforme */
.gallery-item {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
overflow: visible;
cursor: pointer;
transition: filter 0.3s ease;
text-align: center;
}

/* Contenedor de imagen con altura fija */
.gallery-item:before {
content: "";
display: block;
padding-top: 100%; /* Relación de aspecto cuadrada (1:1) */
}

/* Contenedor para todas las imágenes */
.gallery-item-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--gold);
    border-radius: 8px 8px 0 0;
    border-bottom: none;
    background-color: #1a1a1a; /* Fondo oscuro para consistencia */
}

/* Estilo para todas las imágenes dentro de gallery-item */
.gallery-item img,
.gallery-item .img-fluid {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
transition: none !important;
transform: none !important;
}

/* Sobreescribir estilos que puedan interferir */
.gallery-item .artifact-img,
.gallery-item .artifact-img:hover {
border: none !important;
transform: none !important;
box-shadow: none !important;
transition: none !important;
}

/* 2. Eliminar efecto de aumento en hover pero mantener imagen complementaria */
.gallery-item:hover {
transform: none !important;
box-shadow: none !important;
filter: brightness(1.05);
}

/* Mantener el efecto de hover para la imagen complementaria */
.hover-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}

.gallery-item:hover .hover-overlay {
opacity: 1;
}

/* Icono para indicar que hay imagen complementaria */
.hover-indicator {
position: absolute;
top: 8px;
right: 8px;
width: 52px !important;
height: auto !important;
z-index: 3;
opacity: 0.8;
transition: opacity 0.3s ease;
}

.hover-indicator-gallery {
position: absolute;
top: -6px;
right: 0px;
width: 80px !important;
height: auto !important;
z-index: 3;
opacity: 0.8;
transition: opacity 0.3s ease;
}

.gallery-item:hover .hover-indicator {
opacity: 1;
}

.gallery-item-title {

    padding-bottom: 16px !important;

position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #000;  /*var(--dark-less);*/
color: var(--gold);
padding: 8px;
font-family: 'Cinzel', serif;
font-size: 0.9rem;
text-align: center;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border: 1px solid var(--gold);
border-top: none;
height: 40px; /* Altura fija para el título */
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.img-fluid{
    padding: 10px 10px;
}



.mobile-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.85);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
z-index: 1050;
}

.mobile-modal.show {
opacity: 1;
pointer-events: auto;
}

.mobile-modal-content {
position: relative;
background-color: #121212;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 90%;
max-height: 80vh;
overflow: hidden;
text-align: center;
}

/* Mejoras para el contenedor de imagen */
.mobile-modal-image-container {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}

/* Para dispositivos móviles (valores predeterminados) */
.mobile-modal-image-container img,
.mobile-modal-image-container video {
max-width: 100%;
max-height: 60vh;
object-fit: contain;
border-radius: 4px;
}

/* Para escritorio: imagen más grande (70% del alto del viewport) */
@media (min-width: 992px) {
.mobile-modal-content {
    max-width: 80%;
    max-height: 85vh;
    padding: 30px;
}

.mobile-modal-image-container img,
.mobile-modal-image-container video {
    max-height: 70vh; /* 70% de la altura del viewport */
    max-width: 100%; /* Mantener proporción */
    width: auto;
    height: auto;
}

/* Botón de cierre más grande y mejor posicionado */
.mobile-modal-close {
    top: 15px;
    right: 20px;
    font-size: 36px;
}

}

.mobile-modal-close{
position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: var(--gold);
    cursor: pointer;
    z-index: 2001;
    animation: closeBeat 3s infinite ease-in-out;
}


/* Estilos para el contenedor de imágenes del modal */
.mobile-modal-image-container {
position: relative;
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: transparent;
overflow: hidden;
min-height: 60vh;
-webkit-tap-highlight-color: transparent;
}

/* Eliminar posible cuadro gris en el fondo */
.mobile-modal-content {
background-color: #121212;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 90%;
max-height: 80vh;
overflow: hidden;
text-align: center;
}

/* Estilos para las imágenes principal y de hover en el modal */
.modal-main-image,
.modal-hover-image {
max-width: 100%;
max-height: 60vh;
object-fit: contain;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none; /* Para que el clic pase al contenedor */
backface-visibility: hidden; /* Evitar posibles parpadeos */
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
will-change: opacity; /* Mejorar rendimiento de la transición */
}

/* Importante: ambas imágenes en el mismo z-index para el cross-fade */
.modal-main-image {
opacity: 1;
transition: opacity 0.5s ease;
z-index: 1;
}

.modal-hover-image {
opacity: 0;
transition: opacity 0.5s ease;
z-index: 1; /* Mismo z-index para permitir cross-fade */
}


/* Estilo para el indicador de tap */
.tap-indicator {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 14px;
transition: opacity 0.5s ease;
z-index: 1060;
font-family: 'Lato', sans-serif;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Animación de pulso para el indicador */
@keyframes pulse {
0% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.1); }
100% { transform: translateX(-50%) scale(1); }
}

.tap-indicator {
animation: pulse 2s infinite;
}

/* Ajustes para dispositivos más grandes */
@media (min-width: 768px) {
.modal-main-image,
.modal-hover-image {
    max-height: 70vh;
}

.mobile-modal-image-container {
    min-height: 70vh;
}
}




/* Solución final para footer con corrección de visibilidad */

/* ===== ESTILOS COMPARTIDOS ===== */
.pies-caminando,
.pies-caminando.siguiente {
margin: 0 auto !important;
position: relative !important;
left: 0 !important;
display: block !important;
max-width: 100px !important;
}

.avanzar-text {
text-align: center !important;
width: 100% !important;
margin-top: 8px !important;
position: relative !important;
left: 0 !important;
}

/* Animación para íconos */
@keyframes footprintPulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.pies-caminando.siguiente {
animation: footprintPulse 3s infinite !important;
}

/* Animación para texto */
@keyframes textPulse {
0% { transform: scale(1); color: #a50407; }
50% { transform: scale(1.05); color: #c50508; }
100% { transform: scale(1); color: #a50407; }
}

.nav-pulse .avanzar-text {
animation: textPulse 3s infinite !important;
}

/* ===== VERSIÓN ESCRITORIO ===== */
.nav-footprints-bottom {
justify-content: space-between !important;
width: 100% !important;
padding: 0 80px !important;
position: relative !important;
box-sizing: border-box !important;
/* NO sobrescribir display aquí para respetar las clases de Bootstrap */
}

.nav-footprints-bottom a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: auto !important;
text-decoration: none !important;
position: relative !important;
left: 0 !important;
}

.nav-footprints-bottom a img,
.nav-footprints-bottom a .avanzar-text {
left: 0 !important;
position: relative !important;
transform: translateX(0) !important;
}

/* ===== VERSIÓN MÓVIL ===== */
.mobile-nav {
align-items: center !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 0 20px !important;
margin: 20px auto !important;
/* NO sobrescribir display o flex-direction para respetar las clases de Bootstrap */
}

.mobile-nav a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
text-decoration: none !important;
text-align: center !important;
}

.mobile-nav .avanzar-text {
margin-top: 8px !important;
width: 100% !important;
}

.mobile-nav .enlace_avanzar {
margin: 5px auto !important;
}

/* Corrección de desplazamiento específico */
.nav-footprints-bottom a:first-child img,
.nav-footprints-bottom a:first-child .avanzar-text,
.nav-footprints-bottom a:last-child img,
.nav-footprints-bottom a:last-child .avanzar-text {
left: 0 !important;
transform: translateX(0) !important;
position: relative !important;
}

/* Anular cualquier transformación o desplazamiento */
.pies-caminando, .avanzar-text {
transform-origin: center center !important;
}

/* Añadir animación a todos los elementos "Regresar" también */
.enlace_avanzar .avanzar-text {
color: #a50407 !important;
}

/* Asegurar que ambos enlaces en escritorio estén balanceados */
.nav-footprints-bottom a:first-child,
.nav-footprints-bottom a:last-child {
flex: 0 0 auto !important;
width: auto !important;
max-width: 200px !important;
}

/* IMPORTANTE: Mantener las reglas de visibilidad de Bootstrap */
@media (max-width: 991.98px) {
.d-none.d-lg-flex {
    display: none !important;
}

.d-flex.d-lg-none {
    display: flex !important;
}
}

@media (min-width: 992px) {
.d-none.d-lg-flex {
    display: flex !important;
}

.d-flex.d-lg-none {
    display: none !important;
}
}
    
    /* Modal de Galería Virtual (nombres de clase distintos para evitar conflictos) */
    .virtual-gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.95);
    z-index: 2000; /* Z-index más alto que el modal existente */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    overflow: hidden;
    }
    
    .virtual-gallery-modal.show {
    opacity: 1;
    pointer-events: auto;
    }
    
    .virtual-gallery-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
    

    
    .virtual-gallery-image,
    .virtual-gallery-hover-image {
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease;
    z-index: 2100;
    }
    
    .virtual-gallery-hover-image {
    opacity: 0;
    z-index: 1;
    }
    
    .virtual-gallery-image-container.show-hover .virtual-gallery-image {
    opacity: 0;
    }
    
    .virtual-gallery-image-container.show-hover .virtual-gallery-hover-image {
    opacity: 1;
    }
    
    /* Botón de cierre */
    .virtual-gallery-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: var(--gold);
    cursor: pointer;
    z-index: 2001;
    animation: closeBeat 3s infinite ease-in-out;
    }
    
    /* Controles de navegación */
    .slideshow-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    transform: translateY(-50%);
    z-index: 2001;
    }
    
    .slideshow-controls img {
    width: 100px;
    height: auto;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .slideshow-controls img:hover {
    opacity: 1;
    transform: scale(1.1);
    }
    
    .slideshow-controls img.disabled {
    opacity: 0.3;
    cursor: default;
    }
    
    /* Información de la diapositiva */
    .slideshow-info {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    color: var(--gold);
    z-index: 2001;
    }
    
    .slide-counter {
    display: block;
    margin-bottom: 10px;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    }
    
    .slide-title {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    margin: 0;
    }
    
    /* Indicador de hover disponible */
    .hover-available-indicator {
    position: absolute;
    bottom: 50px;
    right: 20px;
    background-color: rgba(0,0,0,0.7);
    color: var(--gold);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    z-index: 2001;
    animation: pulse 2s infinite;
    }
    
    /* Spinner de carga */
    .vg-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--gold);
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    
    /* Pequeño ajuste para móviles */
    @media (max-width: 768px) {
    .virtual-gallery-close {
        top: 15px;
        right: 15px;
        font-size: 36px;
    }
    
    .slideshow-controls {
        padding: 0 15px;
    }
    
    .slideshow-controls img {
        width: 50px;
    }
    
    .slide-title {
        font-size: 1.2rem;
    }
    
    .virtual-gallery-image-container {
        height: 50vh;
    }
    
    .virtual-gallery-image,
    .virtual-gallery-hover-image {
        /* max-width: 95%;
        max-height: 70vh; */
        max-width: 94%;
        max-height: 50vh;
        top: 250px;
    }
    }



/* Mobile adjustments for hover indicator and navigation controls */
@media (max-width: 768px) {
/* Center the hover indicator horizontally and align with navigation controls */
.hover-available-indicator {
    position: absolute;
    bottom: 80px; /* Match the bottom position of slideshow-controls */
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.7);
    color: var(--gold);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    z-index: 2001;
    animation: pulse 2s infinite;
    text-align: center;
    width: auto;
    max-width: 80%;
}

/* Align hover-indicator-gallery to be centered */
.hover-indicator-gallery {
    position: relative;
    top: 80px;
    right: 0;
    margin: 0 auto 8px auto;
    display: block;
}

/* Adjust the layout for controls and indicator alignment */
.slideshow-controls {
    top: auto;
    bottom: 80px;
    transform: none;
    padding: 0 60px; /* Increase padding to give more room for the indicator */
    justify-content: space-between;
    z-index: 2000; /* Lower z-index than the indicator */
}

/* Make navigation arrows smaller on mobile */
.slideshow-controls img {
    width: 60px;
}

/* Adjust slideshow info to make room for the controls */
.slideshow-info {
    bottom: 130px;
}
}
.moda-individual{
width: 100px !important;
}
.galeria{
    cursor: pointer;
}


/* Agregar estos estilos a tu alfabeto.css existente */

/* ===== SOLUCIÓN PARA IMÁGENES DE DIFERENTE TAMAÑO ===== */

/* Asegurar que el contenedor de imagen tenga dimensiones consistentes */
.gallery-item-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px); /* Restar altura del título */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--gold);
    border-radius: 8px 8px 0 0;
    border-bottom: none;
    background-color: #000; /* Fondo oscuro para consistencia visual */
}

/* Estilo base para TODAS las imágenes (principal y hover) */
.gallery-item-image-container img:not(.hover-indicator),
.gallery-item-image-container .img-fluid:not(.hover-indicator) {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90% !important;  /* Mismo tamaño máximo */
    max-height: 90% !important;  /* Mismo tamaño máximo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: opacity 0.3s ease !important;
}

/* Imagen principal específica */
.gallery-item-image-container > .img-fluid {
    opacity: 1;
    z-index: 1;
}

/* Contenedor de overlay debe ocupar todo el espacio */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Imagen hover dentro del overlay */
.hover-overlay img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90% !important;  /* Mismo que la principal */
    max-height: 90% !important;  /* Mismo que la principal */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Mostrar overlay en hover */
.gallery-item:hover .hover-overlay {
    opacity: 1;
}

/* Para móviles - cuando se activa el hover por tap */
.gallery-item.mobile-hover-active .hover-overlay {
    opacity: 1;
}

/* ===== MODAL MEJORADO ===== */
/* Aplicar las mismas reglas al modal para consistencia */

.mobile-modal-image-container {
    position: relative;
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

.mobile-modal-image-container img,
.modal-main-image,
.modal-hover-image {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90% !important;
    max-height: 90% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ===== GALERÍA VIRTUAL MODAL ===== */
.virtual-gallery-image-container {
    position: relative;
    width: 70%;
    height: 60vh;            /* ajusta si lo necesitas */
    overflow: hidden;
    cursor: pointer !important;
  }

  .virtual-gallery-image,
  .virtual-gallery-hover-image {
    position: absolute !important;
    inset: 0 !important;     /* top/right/bottom/left: 0 */
    margin: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;  /* mismas “barras negras” si hace falta */
    transform: none !important;      /* anula translate(-50%, -50%) previos */
  }

.virtual-gallery-hover-image {
    opacity: 0;
    z-index: 2;
}

.virtual-gallery-image-container.show-hover .virtual-gallery-image {
    opacity: 0;
}

.virtual-gallery-image-container.show-hover .virtual-gallery-hover-image {
    opacity: 1;
}

/* ===== AJUSTES PARA EL INDICADOR ===== */
.hover-indicator {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important; /* Anular cualquier centrado */
    transform: none !important; /* Anular transform */
    width: 40px !important; /* Tamaño fijo pequeño */
    height: auto !important;
    max-width: 40px !important; /* Anular el max-width general */
    max-height: 40px !important;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    pointer-events: none;
    object-fit: contain !important;
}



/* Hacer el indicador un poco más visible en hover */
.gallery-item:hover .hover-indicator {
    opacity: 0.9;
}

/* ===== AJUSTES RESPONSIVOS ===== */
@media (max-width: 768px) {

    .virtual-gallery-image-container {
        height: 40vh;
    }

    .gallery-item-image-container img:not(.hover-indicator),
    .gallery-item-image-container .img-fluid:not(.hover-indicator),
    .hover-overlay img {
        max-width: 85% !important;  /* Un poco más pequeño en móvil */
        max-height: 85% !important;
    }
    
    /* Indicador aún más pequeño en móvil */
    .hover-indicator {
        width: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        top: 5px !important;
        right: 5px !important;
    }
    
    .virtual-gallery-image,
    .virtual-gallery-hover-image {
      top: 0 !important;      /* anula cualquier top: 250px previo */
      left: 0 !important;
    }
}

/* ===== OPCIONAL: EFECTO DE CARGA SUAVE ===== */
.gallery-item-image-container img {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* --- FIX: que solo las flechas reciban clicks, no la barra completa --- */
.slideshow-controls {
    pointer-events: none;      /* La barra completa NO capta eventos */
    z-index: 3000;             /* Encima de la imagen (pero sin bloquear) */
  }
  .slideshow-controls img {
    pointer-events: auto;      /* Solo las flechas son clicables */
  }
  
  /* --- Asegurar que la imagen no bloquee los controles y deje pasar taps --- */
  .virtual-gallery-image,
  .virtual-gallery-hover-image {
    pointer-events: none;      /* Clicks pasan al contenedor (toggle hover) */
  }
  
  /* --- Evitar que el indicador de hover bloquee toques --- */
  .hover-available-indicator,
  .hover-indicator-gallery {
    pointer-events: none;
  }
  
  /* (Opcional) Si moviste z-index de otros elementos, deja clara la jerarquía */
  .virtual-gallery-image-container { z-index: 2000; }  /* debajo de controles */
  

  /* ====== INDICADOR ENTRE FLECHAS (MÓVIL) + ESPACIADO ====== */
@media (max-width: 768px) {
    /* Las flechas no bloquean la imagen; solo ellas reciben click */
    .slideshow-controls {
      top: auto;
      bottom: 96px;                 /* sube/baja flechas */
      transform: none;
      padding: 0 50px;              /* deja “canales” libres para el indicador */
      justify-content: space-between;
      z-index: 2000;                /* por debajo del indicador */
      pointer-events: none;         /* solo flechas clicables */
    }
    .slideshow-controls img {
      width: 60px;
      pointer-events: auto;         /* flechas siguen funcionando */
    }
  
    /* El indicador se alinea al centro y por encima de las flechas */
    .hover-available-indicator {
      position: absolute;
      bottom: 74px;                 /* mismo nivel que flechas */
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.7);
      color: var(--gold);
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 0.95rem;
      z-index: 2001;                /* por encima de flechas */
      max-width: 82%;
      text-align: center;
      pointer-events: none;         /* no bloquea taps */
    }
  
    /* Si usas imagen/insignia dentro del indicador */
    .hover-indicator-gallery {
      display: block;
      margin: 0 auto 6px auto;
      position: relative;
      top: 0;
      right: 0;
      width: 80px !important;
      height: auto !important;
    }
  
    /* Info del slide sube un poco para que no se pisen */
    .slideshow-info { bottom: 144px; }
  }
  
  /* ====== INDICADOR MÁS GRANDE EN DESKTOP ====== */
  @media (min-width: 769px) {
    .hover-indicator-gallery {
      width: 120px !important;   /* ~120 px pedid@ */
      height: auto !important;
    }
  }
  
  /* ====== SEGURIDAD DE EVENTOS PARA EVITAR INTERFERENCIAS ====== */
  .slideshow-controls { pointer-events: none; z-index: 3000; }
  .slideshow-controls img { pointer-events: auto; }
  .virtual-gallery-image,
  .virtual-gallery-hover-image { pointer-events: none; }
  .hover-available-indicator,
  .hover-indicator-gallery { pointer-events: none; }
  .virtual-gallery-image-container { z-index: 2000; }
  
  /* ===== SOLO MÓVIL: indicador siempre visible y centrado entre flechas ===== */
@media (max-width: 768px) {
    /* Separar flechas y evitar interferencias con el indicador */
    .slideshow-controls {
      top: auto;
      bottom: 88px;          /* altura de las flechas */
      transform: none;
      padding: 0 36px;       /* deja carril central libre para el indicador */
      justify-content: space-between;
      z-index: 3000;
      pointer-events: none;  /* el contenedor no captura eventos */
    }
    .slideshow-controls img {
      width: 60px;
      pointer-events: auto;  /* las flechas sí capturan clic/tap */
    }
  
    /* Indicador SIEMPRE visible, centrado horizontal entre flechas */
    .virtual-gallery-image-container .hover-available-indicator {
      position: absolute;
      left: 50%;
      bottom: 88px;                 /* misma altura que flechas */
      transform: translateX(-50%);
      opacity: 1 !important;
      visibility: visible !important;
      background-color: rgba(0,0,0,0.65);
      color: inherit;
      padding: 6px 10px;
      border-radius: 8px;
      text-align: center;
      max-width: 82%;
      z-index: 3001;                /* por encima de flechas */
      pointer-events: none;         /* no bloquea taps */
    }
  
    /* Tamaño del ícono en móvil */
    .virtual-gallery-image-container .hover-available-indicator .hover-indicator-gallery {
      width: 80px !important;
      height: auto !important;
      display: block;
      margin: 0 auto;
    }
  
    /* Subir la info del slide para que no se empalme con indicador/flechas */
    .slideshow-info { bottom: 136px; }
  }
  
  /* ===== DESKTOP: mantener posición actual; solo asegurar tamaño si lo querías grande ===== */
  @media (min-width: 769px) {
    .virtual-gallery-image-container .hover-available-indicator .hover-indicator-gallery {
      width: 120px !important;  /* si prefieres el tamaño original, puedes borrar esta línea */
      height: auto !important;
    }
  }
  
  /* Importante: el toggle .show-hover SOLO afecta a las imágenes, NO al indicador */
  .virtual-gallery-image,
  .virtual-gallery-hover-image { pointer-events: none; }