/*
 * responsive.css
 *
 * Media queries y reglas adaptativas para mejorar visualización en dispositivos móviles y tablet.
 * Clases y reglas para ajustar widths, flex, grillas, visibilidad y jerarquía según breakpoints.
 * Garantiza accesibilidad y armonía visual en todos los formatos de pantalla.
 */

/* Móviles: ancho máximo 576px */
@media (max-width: 576px) {

}

/* Tablets: entre 577px y 1024px */
@media (min-width: 577px) and (max-width: 1024px) {
}

/* Desktop grande: a partir de 1200px */
@media (min-width: 1200px) {

}
/*Footer*/
@media (max-width: 1022px) {
    .pre-footer .container .row {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap:10px;
    }

    .pre-footer .container .row .col-md-4 {
        flex: 0 0 100%;
        width: 100%;
    }

    .pre-footer .container .row .col-md-4 .secondary-nav .menu li a,
    .pre-footer .container .row .xs-title {
        max-width: 100%;
    }
    .pre-footer .container .row .xs-title {
        margin-bottom: 5px;
    }

    .pre-footer .container {
        padding: 32px clamp(24px, 10vw, 100px);
        margin: clamp(24px, 4vw, 32px) auto 24px;
    }

    .pre-footer .container .row .col-md-4 .secondary-nav .menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    footer .navbar {
        padding: 32px 24px;
        min-height: unset; 
    }

    footer .navbar .container {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    footer .navbar .container .brand.links {
        gap:10px;
    }

    footer .navbar .container .brand.links .row.brand {
        align-self: center;
        /*text-align: center; Deja logo BBVA centrado */
    }

    footer .navbar .container .brand.links .navbar-nav {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        gap: 5px;
        text-align: center;
    }

    footer .navbar .copyright {
        text-align: center;
    }

    footer .navbar .container .social-media-group {
        gap: 5px;
        margin-bottom: 10px;
        align-items: center;
    }
}

@media (max-width: 1024px) {
    /**
    ======================
    [PAGE] imagen_col.php
    ======================
     */
    .component.img2cols {
        width: 100%;
    }
}

@media (max-width: 320px) {

    .pre-footer .container .row {
        gap:5px;
    }
    .pre-footer .container .row .col-md-4 .secondary-nav .menu {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pre-footer .container .row .col-md-4 .secondary-nav .menu li a {
        max-width: 100%;
    }
    .pre-footer .container .row .xs-title {
        margin-bottom: 5px;
    }

}

/*Tarjetas*/
@media (max-width: 768px) {

    .component.promo.shadow,
    .component.horizontal.shadow,
    .wrapper-full .banner .bannerInfo,
    .component.ficha.shadow {
        flex-flow: column nowrap;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .component.ficha.shadow {
        flex: 1 1 auto;
        max-width: none;
    }
    .component.promo.shadow .content-img,
    .component.horizontal.shadow .content-img {
        flex: 0 1 auto;
        width: 100%;
        min-height: 0;
    }
    .component.promo.shadow .content-img img {
        position: relative;
    }

    .component.promo.shadow .content-text,
    .component.horizontal.shadow .content-text,
    .component.sicav.shadow .content-text,
    .component.ficha.shadow .infoficha {
        flex: 1 1 auto;
        align-items: center;
        text-align: center;
        gap: 12px;
        width: 100%;
        padding: 0;
    }

    .component.promo.shadow .content-text .card.buttons,
    .component.horizontal.shadow .content-text .links,
    .component.sicav.shadow .content-text .card.buttons {
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 420px; 
    }

    .component.promo.shadow .content-text .card.buttons a,
    .component.horizontal.shadow .content-text .links a,
    .component.sicav.shadow .content-text .card.buttons a {      
        min-width: 0;
        flex: 1;
    }

    .component.vertical.shadow {
        width: 100%;
        display: flex;
        flex: 0 1 clamp(180px, 40vw, 392px);
        margin: 0 auto;
    }

    .component.img1col {
        max-width: none;
        margin: 0 auto;
    }

    /**
    ======================
    [PAGE] imagen_col.php
    ======================
     */
    .component.img2cols {
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: auto;
        position: relative;
    }

    .component.img2cols img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .component.img2cols h3 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
}

/*Extra breakpoint to avoid excessive narrowness */
@media (max-width: 900px) {
        .component.vertical.shadow,
        .component.sicav.shadow,
        .component.info.shadow {
        flex: 1 1 clamp(180px, 40vw, 392px);
    }
}

@media (max-width: 480px) {

    .wrapper {
        padding: 0 clamp(8px, 4vw, 16px);
    }

    .wrapper .area-main-centered,
    .wrapper .area-main {
        padding: clamp(16px, 7vw, 24px) clamp(12px, 6vw, 24px) 0;
        gap: 20px;
    }

    .component.promo.shadow,
    .component.horizontal.shadow,
    .component.sicav.shadow,
    .component.vertical.shadow,
    .wrapper table.blueTable {
        padding: 20px;
        gap: 12px;
        border-radius: 12px;
        height: auto;
        flex: 1 1 auto;
    }

    .component.promo.shadow .content-text,
    .component.horizontal.shadow .content-text,
    .component.sicav.shadow .content-text {
        flex: 0 1 auto;
        align-items: center;
        text-align: center;
        gap: clamp(12px, 3vw, 20px);
        width: 100%;
    }

    .component.promo.shadow .content-text h4,
    .component.horizontal.shadow .content-text .header h4,
    .component.sicav.shadow .content-text h4 {
        font-size: 24px;
        line-height: 30px;
    }

    .component.promo.shadow .content-text .card.buttons a,
    .component.horizontal.shadow .content-text .links a,
    .component.sicav.shadow .content-text .card.buttons a {
        font-size: 16px;
        line-height: 24px;
    }

    .component.delegacion.shadow .infodelegacion {
    display: flex;
    flex-flow: column nowrap;
    }
    
    .component.search.custom-select.shadow {

    flex-flow: column nowrap;
    gap: 5px;
    }

    .component.search.custom-select.shadow .select-selected {
    width: 100%;
    }
    .component.info.shadow {
        min-height: 0;
    }
}