/* Footer Styles Override */
.footer {
    background-color: #001331 !important; /* Cetacean Blue - darker shade */
    padding: 4rem 2rem 2rem 2rem; /* Reduced bottom padding */
    position: relative;
    overflow: hidden; 
    min-height: 320px; 
    display: flex; 
    flex-direction: column;
    z-index: 1; /* Asegurar posición en stack */
}

/* Estilo adicional para asegurar el fondo */
footer.footer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #001331;
    z-index: -1;
}

/* Estilos para corregir el texto "Descubre cómo" */
.toggle-prompt-text {
    display: block !important;
    text-align: center !important;
    font-family: Manrope, sans-serif !important;
    font-size: 14.4px !important;
    height: 19px !important;
    margin-top: 24px !important;
    margin-bottom: 8px !important;
    color: rgb(240, 240, 240) !important;
    opacity: 0.6 !important;
}

/* Footer Content */
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2.5rem; 
    margin-bottom: 3rem; 
    position: relative;
    z-index: 1;
}

/* Texto Legal */
.footer-legal {
    margin-top: auto; 
    padding-top: 2rem; 
    border-top: 1px solid rgba(255, 255, 255, 0.05); 
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 2rem;
}

/* Estilos para la imagen de fondo del footer */
.footer-background-image {
    position: relative;
    display: block;
    width: 100%; 
    height: auto;
    margin-top: 3rem; /* Space between content and logo */
    max-height: 180px; /* Control height */
    object-fit: contain;
    object-position: center bottom;
    opacity: 0.9; /* Higher visibility */
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .footer-background-image {
        opacity: 0.9;
        max-height: 150px; /* Slightly smaller on mobile */
    }
}