/* =====================================================
   ESTRUCTURA DE GALERÍA
====================================================== */
.gallery-container {
    width: calc(100% - 200px);
    position: relative;
    margin: -24px auto;
    max-width: 1200px;
  }
  
  .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;
  }
  
  .gallery-image-container {
    position: relative;
    width: 100%;
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  .gallery-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .gallery-slide.active {
    display: flex;
  }
  
  .gallery-slide img,
  .manuscript-img,
  .main-image,
  .hover-image {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  
  /* =====================================================
     ITEMS DE GALERÍA
  ====================================================== */
  .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;
  }
  
  .gallery-item:before {
    content: "";
    display: block;
    padding-top: 100%; /* Relación de aspecto cuadrada (1:1) */
  }
  
  .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;
  }
  
  .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;
  }
  
  .gallery-item:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: brightness(1.05);
  }
  
  .gallery-item-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--dark-less);
    color: var(--gold);
    padding: 8px;
    padding-bottom: 16px !important;
    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;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  
  .img-fluid {
    padding: 10px 10px;
  }
  
  /* =====================================================
     CONTROLES DE NAVEGACIÓN
  ====================================================== */
  .gallery-controls {
    position: absolute;
    top: 115px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 150px;
    z-index: 1001;
    pointer-events: none;
  }
  
  .gallery-controls img {
    max-width: 100px;
    width: 100px;
    height: auto;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
  }
  
  .gallery-controls img:hover {
    opacity: 1;
    transform: scale(1.1);
  }
  
  .gallery-info {
    margin-top: 10px;
    width: 100%;
    text-align: center;
    color: var(--gold);
  }
  
  .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;
  }
  
  /* =====================================================
     CONTENEDOR DE IMÁGENES CON HOVER
  ====================================================== */
.hover-image-container {
    position: relative;
    /* inline-flex ajusta la caja al tamaño exacto de su contenido */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    
    /* NO pongas width/height fijos aquí, deja que la imagen mande */
    line-height: 0;
    z-index: 1002;
    cursor: pointer;
}
  
  .touch-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background-color: transparent !important;
    cursor: pointer;
  }
  
  .hover-image-container .main-image,
  .hover-image-container .hover-image {
    pointer-events: none;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  
.hover-image-container .main-image {
    display: block;
    
    /* 1. Límite de altura (ajusta esto según tu media query) */
    max-height: 38vh; 
    
    /* 2. Límite de ancho (para que no se salga en móviles) */
    max-width: 100%;  
    
    /* 3. CLAVE: Esto evita que se "reestire". Mantiene la proporción original */
    width: auto;      
    height: auto;     
    
    /* Aseguramos que la imagen se comporte como bloque para layout */
    object-fit: contain; 
    border-radius: 4px;
}
  
.hover-image-container .hover-image {
    position: absolute;
    top: 0;
    left: 0;
    
    /* Ocupa el 100% del padre (que es del tamaño exacto de la main-image) */
    width: 100%;
    height: 100%;
    
    object-fit: contain; /* Asegura que coincida pixel por pixel */
    
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 4px;
    z-index: 5;
    pointer-events: none;
}
  
  .hover-image-container:hover .hover-image,
  .hover-image-container.show-hover .hover-image {
    opacity: 1;
  }
  
  .hover-image-container:hover .main-image,
  .hover-image-container.show-hover .main-image {
    opacity: 0;
  }
  
  .hover-image-container.show-hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    pointer-events: none;
  }
  
  /* =====================================================
     INDICADORES Y ANIMACIONES
  ====================================================== */
  .hover-indicator {
    position: absolute;
    top: 14px !important;
    right: -90px !important;
    width: 52px !important;
    height: auto !important;
    z-index: 15 !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
    animation: pulse 2s infinite !important;
  }
  
  .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;
  }
  
  .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;
  }
  
  .tap-instructions {
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }
  
  .hover-image-container:active .tap-instructions {
    opacity: 0;
  }
  
  @keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
  }
  
  /* =====================================================
     ELEMENTOS DECORATIVOS
  ====================================================== */
  .decorative-column {
    position: fixed;
    top: 180px;
    height: calc(100vh - 137px);
    z-index: 1015;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 255px;
    pointer-events: none;
  }
  
  .decorative-column.left {
    left: 0;
    background-image: url('/static/img/columna_izq.png');
  }
  
  .decorative-column.right {
    right: 0;
    background-image: url('/static/img/columna_der.png');
  }
  
  .mesoamerican-border {
    display: none;
  }
  
  /* =====================================================
     MODAL PARA VISUALIZACIÓN MÓVIL
  ====================================================== */
  .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;
  }
  
  .mobile-modal-image-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .mobile-modal-image-container img,
  .mobile-modal-image-container video {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 4px;
  }
  
  .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;
  }
  
  @keyframes closeBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  
  /* =====================================================
     MEDIA QUERIES
  ====================================================== */
  @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;
      max-width: 100%;
      width: auto;
      height: auto;
    }
  
    .mobile-modal-close {
      top: 15px;
      right: 20px;
      font-size: 36px;
    }
  }
  
  @media (max-width: 991px) {
    .decorative-column {
      display: none;
      top: 147px;
      height: calc(100vh - 147px);
      width: 60px;
    }
    
    .gallery-container {
      width: calc(100% - 120px);
    }
  }
  
  @media (max-width: 768px) {
    /* Ajustes para la galería */
    .gallery-image-container {
      height: 35vh;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    .gallery-slide {
      height: 100%;
    }
    
    /* Ajustes para controles */
    .gallery-controls {
      top: auto;
      bottom: -24%;
      transform: none;
      padding: 0 15px;
    }
    
    .gallery-controls img {
      max-width: 60px;
      width: 60px;
      height: auto;
    }
    
    /* Ajustes para información */
    .gallery-info {
      margin-top: 60px;
    }
    
    /* Ajustes para indicador */
    .hover-indicator {
      width: 40px !important;
      height: auto;
      top: 5px;
      right: 5px;
    }
    
    .hover-indicator-gallery {
      position: relative;
      top: 24px;
      right: 0;
      margin: 0 auto 8px auto;
      display: block;
    }
    
    /* Ajustes para contenedor hover */
    .hover-image-container {
      height: 100%;
      width: 100%;
    }
    
    .manuscript-img {
      max-width: 90%;
    }
    
    .mobile-nav {
      margin-top: 100px !important;
    }
  
    /* Ajustes específicos para móvil */
    .mobile-modal-slide.has-hover .hover-icon {
      position: absolute;
      top: 22px;
      right: 10px;
      width: 65px;
      height: auto;
      object-fit: contain;
      opacity: 0.8;
      z-index: 3;
      animation: pulse 2s infinite;
    }
  }
  
  @media (max-width: 576px) {
    .decorative-column {
      display: none;
      width: 40px;
    }
    
    .gallery-container {
      width: 100%; /* En pantallas muy pequeñas ocupar todo el ancho */
    }
  }

  .nav-footprints-bottom {
    bottom: 76px;
  }

  .gallery-image-container{
    margin-top: -40px;
}
.title-container{
    margin-top: -30px;
}
.nav-footprints-bottom {
    padding: 0 170px !important;
}
.footer{
    margin-top: -96px;
}
/* On mobile footer 0px o margin top */
@media (max-width: 768px) {
    .gallery-image-container{
    margin-top: -25px;
}
    .footer{
        margin-top: 0px;
    }
}

@media (min-width: 992px) and (max-width: 1440px) {
    .hover-image-container {
        /* Solo definimos restricciones al contenedor, no tamaños fijos */
        max-width: 65% !important; 
    }

    .hover-image-container .main-image {
        /* Reducimos la altura máxima permitida en estas pantallas */
        max-height: 32vh !important; 
        
        /* REFORZAMOS: ¡No te estires! */
        width: auto !important;
        height: auto !important;
    }
}