main img {
    margin-bottom: .5rem;
 }

 figcaption {
    background-color: rgba(255,255,255,0.95);
    width: max-content;
    margin: 0 auto;
    padding: .3em;
    border-radius: 0.3rem;
 }
 
 #galeria figure img,
 #galeria figure video {
     transition: transform 0.15s ease;
     cursor: pointer;
 }

 #galeria figure:hover img,
 #galeria figure:hover video {
     transform: scale(1.04);
 }

 #carouselModal .carousel-item img,
 #carouselModal .carousel-item video {
     width: 100%;
     max-height: 80vh;
     object-fit: contain;
     display: block;
     background: #fff;
 }

 #carouselModal .carousel-control-prev,
 #carouselModal .carousel-control-next,
 .control-360-custom {
     width: 16%;
     opacity: 0.80;
     z-index: 10;
     border: none;
     background: none;
 }

 .carousel-control-prev:focus-visible span, .carousel-control-next:focus-visible span{
    outline: 3px solid black;
    box-shadow: 0 0 0 7px white;
 }

 #carouselModal .carousel-control-prev-icon,
 #carouselModal .carousel-control-next-icon,
 .icon-360-custom {
     background-color: rgba(0, 0, 0, 0.4);
     background-size: 60%;
     border-radius: 50%;
     width: 3rem;
     height: 3rem;
     filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
     display: inline-block;
 }

 .carrusel-360-relativo {
     position: relative;
     width: 100%;
     background-color: #fff;
     display: flex;
     align-items: center;
 }

 #panorama-container,
 #video360-container {
     width: 94%;
     height: 60vh;
     background: #000;
     margin: 0 auto;
     position: relative;
 }

 .a-canvas {
     width: 100% !important;
     height: 100% !important;
     background: #111111 !important;
 }

 .a-loader,
 .a-loader-title {
     display: none !important;
 }

 .a-scene {
     background: #111111 !important;
 }

 .prev-360 {
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
 }

 .next-360 {
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
 }

 .icono {
     width: 30px;
     height: auto;
 }

 .pnlm-controls-container,
 .pnlm-zoom-controls {
     display: none !important;
 }

 .loading-360 {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.85);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 25;
     color: white;
     flex-direction: column;
 }

 .loading-360.hidden {
     display: none;
 }

/* =============================================
   IMÁGENES CUADRADAS 
   ============================================= */

.mano {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    border-radius: 8px 8px 0 0 !important;
}

/* EFECTO ZOOM */
#galeria figure,
#galeria-360 figure,
#visita figure {
    overflow: hidden;
    margin-bottom: 0;
    background: white;
    border-radius: 8px;
    transition: transform 0.35s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

#galeria figure:hover,
#galeria-360 figure:hover,
#visita figure:hover {
    transform: scale(1.05);
    cursor: pointer;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.figure-caption {
    margin-top: -6px;
    padding: 10px 10px 9px;
    background-color: #ffffff !important;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 0.93rem;
    line-height: 1.3;
    width: 100%;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* =============================================
   HEADER MODAL - ALINEACIÓN PERFECTA (360º y Normal)
   ============================================= */

#imagenModal .modal-header {
    padding: 12px 16px 8px 16px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 97%;
    max-width: 97%;
    margin: 0 auto;
    border-bottom: none;
    box-sizing: border-box;
}

#imagenModal .modal-header .d-flex {
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

#imagenModalLabel {
    margin: 0;
    font-size: 1.25rem;
    flex-grow: 1;
}

.botones-modal {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.btn-fullscreen-360 {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
}

/* Ajustes finos por tamaño de pantalla */
@media (min-width: 1200px) {
    #imagenModal .modal-header {
        width: 97%;           
        padding: 12px 20px 8px 20px;
    }
}

/* =============================================
   CAPTIONS COMPACTOS 360º
   ============================================= */

.custom-caption {
    font-size: 1.05rem;
    text-align: center;
    margin: 6px 0 4px 0;
    padding: 4px 15px;
    line-height: 1.4;
    color: #333;
    white-space: pre-line;
    word-break: break-word;
}

#caption360,
#captionVideo360 {
    font-size: 1.05rem;
    background-color: transparent;
    padding: 4px 15px;
    margin: 6px auto 4px auto;
    max-width: 92%;
}

/* Móvil */
@media (max-width: 768px) {
    .mano {
        height: 220px !important;
    }
    #galeria-360 figure, #visita figure {
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .custom-caption,
    #caption360,
    #captionVideo360 {
        font-size: 1rem;
        margin: 5px auto 3px auto;
        padding: 3px 12px;
    }

    #imagenModal .modal-header {
        width: 96%;
        padding: 10px 12px 6px 12px;
    }
}

@media (max-width: 480px) {
    .mano {
        height: 200px !important;
    }
    #galeria-360 figure, #visita figure {
        max-width: 78%;
    }
}

/* Ocultar navegación en vídeos 360 */
#carruselVideo360 .control-360-custom {
    display: none !important;
}

#carruselVideo360 .carrusel-360-relativo {
    justify-content: center;
}
#iconoVideo360 {
    filter: hue-rotate(340deg) saturate(1.3);
}