/* ------------------------------------------- */
/* 9. FOOTER (PIE DE PÁGINA) */
/* ------------------------------------------- */

.main-footer {
    width: auto;
    box-sizing: border-box;
}

/* --- FILA 1: Principal (5 Columnas) --- */
.footer-row-1 {
    background-color: #873e07; 
    color: white; 
    display: flex;
    justify-content: space-between;
    padding: 40px 5%;
    flex-wrap: wrap; 
    /* ELIMINADA: min-width: 900px; */ 
}

.footer-col {
    width: 170px; /* AJUSTE: Ancho reducido para las columnas de enlace */
    margin: 15px 0;
}

.footer-col-logo {
    width: 200px; 
}

.footer-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 2px solid #fc5e27; 
    padding-bottom: 5px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col a {
    color: white;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: #fc5e27; 
}

.footer-logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 20px;
}

/* Redes Sociales */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%; 
    
    /* ESTILOS INICIALES */
    background-color: white; 
    color: #dd751a !important; /* Usamos !important para sobrescribir el color de Font Awesome */
    
    font-size: 1.2rem !important;
    transition: all 0.3s;
}

.social-icon:hover {
    /* ESTILOS HOVER INVERTIDOS */
    background-color: #dd751a; 
    color: white !important; 
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* --- FILA 2: Copyright (3 Columnas) --- */

.footer-row-2 {
    background-color: #fc5e27; 
    color: black; 
    display: flex;
    justify-content: space-between; /* AJUSTE: Para pegar los logos a los extremos */
    align-items: center;
    padding: 15px 5%;
    font-size: 0.85rem;
    flex-wrap: wrap; 
}

.footer-col-secondary {
    display: flex;
    align-items: center;
    flex-grow: 1; 
    padding: 5px 10px;
}

/* AJUSTE PARA EL LOGO DDR: Alineación a la izquierda */
.footer-col-ddr {
    justify-content: flex-start;
    flex-grow: 0; 
    width: 20%; 
    text-align: left;
}

.footer-col-copyright {
    justify-content: center;
    max-width: 65%; /* Espacio para centrar el texto */
    color: #fff;
}

/* AJUSTE PARA EL LOGO BANCO: Alineación a la derecha */
.footer-col-bank {
    justify-content: flex-end;
    flex-grow: 0; 
    width: 20%;
    text-align: right;
}

.footer-logo1-small {
    height: auto; 
    width: 100px;
    max-width: 100%; /* VITAL: Para evitar el desbordamiento en filas */
}

.footer-logo2-small {
    height: auto; 
    width: 200px;
    max-width: 100%; /* VITAL: Para evitar el desbordamiento en filas */
}

/* 8.2. Tablet y Móvil (max-width: 768px) */
@media (max-width: 768px) {
    
    .navbar-search,
    .main-menu-desktop {
        display: none;
    }
    
    .hamburger-desktop-link {
        display: none;
    }
    
    .profile-text {
        display: none;
    }
    
    .logo-img {
        width: 20vw; 
        min-width: 70px; 
    }

    .mobile-currency-top .dropdown-button {
        color: #fc5e27;
    }

    /* --- Mobile-menu  ---*/
    .mobile-menu-vertical {
        top: 56px;         
    }
    
    /* --- Footer en Móvil --- */
    
    /* AJUSTE CRÍTICO 1: Asegura que la fila 1 ocupe el 100% y se centre */
    .footer-row-1 {
        flex-direction: column;
        align-items: center;
        
        /* ¡VITAL! Eliminamos cualquier forzado de ancho y usamos 100% */
        min-width: 100% !important; 
        width: 100% !important; 
        padding: 30px 0; 
        box-sizing: border-box;
    }
    
    /* AJUSTE CRÍTICO 2: Aplicar box-sizing a las columnas y usar padding interno */
    .footer-col, 
    .footer-col-logo {
        width: 100% !important; /* Forzamos 100% */
        max-width: 300px; 
        text-align: center;
        margin-bottom: 25px;
        box-sizing: border-box; 
        padding: 0 5%; /* El padding ahora está DENTRO de la columna */
    }

    /* Sobrescribimos el padding de .footer-col-logo si es necesario, pero el anterior ya lo cubre */
    .footer-row-1 .footer-col-logo {
        padding: 0 5%;
    }

    .social-links {
        justify-content: center;
    }
    
    /* Copyright apilado (Fila 2) */
    .footer-row-2 {
        flex-direction: column;
        padding: 10px 5%;
        width: 100% !important; /* Asegurar que la fila 2 también respete el ancho */
        box-sizing: border-box;
    }

    .footer-col-secondary {
        width: 100%;
        margin: 5px 0;
        box-sizing: border-box;
    }
    
    .footer-col-copyright {
        order: 1; 
        max-width: 90%;
    }
    .footer-col-ddr {
        order: 2;
    }
    .footer-col-bank {
        order: 3;
    }
}