/*
 * footer.css
 *
 * Estilos y estructura visual del Footer del sitio.
 * Clases relacionadas con filas, columnas, enlaces, iconos sociales y contenido del pie de página.
 * Incluye ajustes específicos para responsive y accesibilidad del Footer.
 */

*, *::before, *::after {
    box-sizing: border-box;
}

.pre-footer,
footer{
    padding: 0 24px;
}

.pre-footer .container {
    box-sizing: border-box;
    width: 1553px;
    max-width: 100%;
    background-color: #FFFFFF;
    margin: clamp(16px, 4vw, 64px) auto 24px;
    border-radius: 16px;
    min-height: 360px;
    padding: 64px clamp(32px, 10vw, 164px);
}

.pre-footer .container .row {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: clamp(0, 14.71%, 180px);
}

.pre-footer .container .row .col-md-4 {
    flex: 0 1 288px;
}

.pre-footer .container .row .xs-title {
    margin-bottom: 16px;
    color: #070E46;
    font-family: BentonSansBBVA-Medium;
    font-size: 20px;
    line-height: 32px;
    font-weight: 500;
}

.pre-footer .container .row .col-md-4 .secondary-nav .menu{
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.pre-footer .container .row .col-md-4 .secondary-nav .menu li a,
.pre-footer .container .row .xs-title {
    display: block;
    max-width: calc(100% - 15px);
}

footer .navbar {
    box-sizing: border-box;
    width: 1553px;
    max-width: 100%;
    background-color: #001391;
    margin: 0 auto 24px;
    padding: 48px clamp(32px, 10vw, 164px) 32px clamp(32px, 10vw, 164px);
    border-radius: 16px;
    min-height: 326px;
    display:flex;
    flex-flow: column;
    justify-content: space-between;
}

footer .navbar .container{
    display:flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

footer .navbar .container .brand.links {
    display: flex;
    flex-flow: column nowrap;
    gap: 64px;
}

footer .navbar .container .brand.links .row.brand .navbar-header .navbar-brand img{
    color: #FFFFFF;
    display: block;
    margin-bottom: 4px;
}

footer .navbar .container .brand.links .row.brand .navbar-text.navbar-right {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 16px;
    margin-left: 63px;
}

footer .navbar .container .brand.links .navbar-nav {
    display: flex;
    flex-flow: row nowrap;
    gap:24px;
}

footer .navbar .container .social-media-group {
    display: flex;
    flex-flow: column nowrap;
    gap:16px;
    align-items: end;
}

footer .navbar .container .social-media-group .social-media {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
    height: 24px;
}

footer .navbar .container .social-media-group .social-media li a i {
    color: #85C8FF;
    font-size: 24px;
    letter-spacing: 8px; 
}

footer .navbar .container .social-media-group .social-media li {
    width: 24px;
}

footer .navbar .copyright {
    color: #FFFFFF;
    margin-top: auto;
} 

footer .navbar .container .social-media-group .bbva-social-media li a,
footer .navbar .container .brand.links .navbar-nav li a {
    color: #85C8FF;
}