.navbar-fixed-sticky {
    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.20);
}

.navbar-fixed-sticky .navbar-fixed {
    height: auto !important;
}



.fixed-action-btn {
    bottom: 23px;
    right: 24px;
    z-index: 999;
    /* Asegura que esté por encima de otros elementos */
}

.css-arrow-up {
    /* Asegura que el span sea un elemento de bloque para que podamos transformarlo */
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    /* Base para el pseudo-elemento */
}

.css-arrow-up::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 12px;
    /* Ancho de la flecha */
    height: 12px;
    /* Alto de la flecha */

    border: solid white;
    /* Color del borde (el color de la flecha) */
    border-width: 0 4px 4px 0;
    /* Solo bordes derecho e inferior */

    transform: translate(-50%, -50%) rotate(-135deg);

    transition: all 0.2s ease-in-out;
}





/* ESTILOS PARA LA SOLUCIÓN CON <img> */
.image-section {
    width: 100%;
    overflow: hidden;
    position: relative;
    min-height: 200px; /* Altura mínima de respaldo */
}





/* -------------------------------------------------------------------------- */
/* ESTILOS BASE PARA IMÁGENES RESPONSIVE */
/* -------------------------------------------------------------------------- */
.responsive-imgCustom {
    width: 100%;
    height: auto;
    display: block;
    
    /* 🔥 Asegurar que la imagen siempre se vea completa */
    object-fit: contain;
    object-position: center center;
    
    /* Altura máxima para controlar el tamaño */
    max-height: 980px;
    
    /* 🔥 Fondo de respaldo por si la imagen carga lento */
    background-color: #f8f9fa;
}

/* -------------------------------------------------------------------------- */
/* CONTENEDOR PARA CONTROLAR EL ESPACIADO */
/* -------------------------------------------------------------------------- */
.img-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* -------------------------------------------------------------------------- */
/* MEDIA QUERIES ESPECÍFICAS */
/* -------------------------------------------------------------------------- */

/* ESCRITORIO (default ya está bien) */

/* TABLETS (hasta 992px) */
@media (max-width: 992px) {
    .responsive-imgCustom {
        /* 🔥 Mantener contain para ver imagen completa */
        object-fit: contain;
        max-height: 600px;
        min-height: 400px;
    }
}

/* MÓVILES GRANDES (hasta 768px) */
@media (max-width: 768px) {
    .responsive-imgCustom {
        max-height: 500px;
        min-height: 300px;
        /* 🔥 CRÍTICO: contain en móviles para ver imagen completa */
        object-fit: contain;
    }
}

/* MÓVILES PEQUEÑOS (hasta 480px) */
@media (max-width: 480px) {
    .responsive-imgCustom {
        max-height: 400px;
        min-height: 250px;
        object-fit: contain;
    }
}

/* -------------------------------------------------------------------------- */
/* ORIENTACIÓN HORIZONTAL EN MÓVILES */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) and (orientation: landscape) {
    .responsive-imgCustom {
        max-height: 350px;
        min-height: 200px;
        object-fit: contain;
    }
}

/* -------------------------------------------------------------------------- */
/* PANTALLAS MUY GRANDES */
/* -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
    .responsive-imgCustom {
        max-height: 1200px;
    }
}