/* RESPONSIVE: un solo breakpoint, en 1200px, con los dos lados MUTUAMENTE EXCLUYENTES:
   (max-width: 1200px) es mobile, (min-width: 1201px) escritorio. Por eso todo refinamiento
   de escritorio (1300, 1500, 1700, 1925, 1930) lleva además su (min-width: 1201px), incluso
   cuando ya arranca más arriba: están escritos asumiendo el layout de escritorio y si
   alcanzaran al teléfono habría que neutralizar sus paddings y tipografías una por una. */

/********************* BRASIL ****************************/


@font-face {
    font-family: 'OpenSans_Regular';
    src: local('OpenSans-Regular'), /* Para el resto de navegadores */ url('fonts/OpenSans-Regular.ttf') format('truetype');
	font-display:swap;
}

@font-face {
    font-family: 'OpenSans_Bold';
    src: local('OpenSans-Bold'), /* Para el resto de navegadores */ url('fonts/OpenSans-Bold.ttf') format('truetype');
	font-display:swap;
}



@font-face {
    font-family: 'KievitOT';
    src: local('KievitOT'), url('KievitOT.ttf') format('truetype');
	font-display:swap;
}


@font-face {
    font-family: 'KievitOT_Regular';
    src: local('KievitOT-Regular'), /* Para el resto de navegadores */ url('fonts/KievitOT-Regular.ttf') format('truetype');
	font-display:swap;
}


@font-face {
    font-family: 'KievitOT_Light';
    src: local('KievitOT-Light'), url('fonts/KievitOT-Light.ttf') format('truetype');
	font-display:swap;
}


@font-face {
    font-family: 'KievitOT_Medium';
    src: local('KievitOT-Medium'), url('fonts/KievitOT-Medium.ttf') format('truetype');
	font-display:swap;
}

a[data-toggle="collapse"] {
    cursor: pointer;
}

.input-validation-error {
    border: 1px solid red;
}

.field-validation-error {
    color: red;
}

.nav-link {
    padding: 0rem 1rem !important;
}

.hamburger-menu {
    display: none;
    background-color: #005F86;
    position: absolute;
    top: 70px;
    right: 30px;
    z-index: 1000;
    padding: 10px;
    border-radius: 5px;
}

    .hamburger-menu div {
        margin: 3px 0;
    }

    .hamburger-menu a {
        color: white;
        text-decoration: none;
    }



.bar1, .bar2, .bar3 {
    width: 30px;
    height: 3px;
    background-color: white;
    margin: 7px 0;
    transition: 0.4s;
}

.change .bar1 {
    transform: translate(0, 10px) rotate(-45deg);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: translate(0, -10px) rotate(45deg);
}



html, body {
    margin: 0;
    padding: 0;
}





/* Escala fluida entre 1201 y 1920px: el tamaño crece con el ancho sin escalones y, por encima
   de 1920, queda clampeado al máximo. Esa cota es la que hace que bajar el zoom SIEMPRE achique.
   El término rem es el que responde al zoom (el vw es constante en px físicos), así que su
   coeficiente nunca puede ser negativo: si lo fuera, hacer zoom in achicaría el texto y se
   rompería WCAG 1.4.4. Donde la pendiente lo exigía se bajó el máximo unos px (ver commit). */
h1 {
    color: #fff;
    font-family: 'KievitOT_Medium',Arial, Helvetica, sans-serif;
    font-size: clamp(2.812rem, 3.747vw, 4.496rem);
    font-weight: 400;
    margin: 0;
    padding: 0;
    line-height: 1em;
    margin-bottom: 45px;
}

    h1 span {
        color: #fff;
        font-family: 'KievitOT_Light', Arial, Helvetica, sans-serif;
        font-weight: 200;
        margin: 0;
        padding: 0;
    }

h2 {
    font-weight: 100;
}

section .content {
    margin: auto;
}

.col {
    display: inline-block;
    width: 49%;
    vertical-align: top;
}

a {
    color: #fff;
}
    a:hover {
        color: #fff;
    }

    a.boton:hover {
        color: white;
        text-decoration: none;
    }

    a[data-toggle="collapse"]:hover {
        text-decoration: none;
        color: white;
    }

p {
    font-family: 'KievitOT_Regular',Arial, Helvetica, sans-serif;
    font-size: 1.2em;
}

#collapseSaberMasPortugues567, #collapseSaberMas647 {
    margin-top: 30px;
}

.collapse .collapse.show {
    padding-left: 30px !important;
}

.interna .collapse div > a {
    margin-left: 20px;
}

.content .collapse h3 {
    color: white !important;
    margin-bottom: 5px;
    padding: 0;
    margin-top: 10px;
    font-weight: 400;
}

.seccion-productos .content .collapse h3 {    	font-size: 1em !important;}


.seccion-productos .collapse .collapse.show { padding-bottom: 20px!important;}
.interna .interna-contenido h3 {
    font-size: 1.4em !important;
    margin-bottom: 0;
}

.interna .collapse.show {
    margin-left: 20px;
}

h3.nombreSucursal {
    font-weight: 500 !important;
}

header nav {
    text-align: center;
}

header .itemsMenu {
    display: inline-block;
    margin: auto;
}

header .lang-btn {
    float: right;
    text-transform: uppercase;
}

    header .lang-btn:hover {
        color: #9be0fd !important;
    }


header .menuIntVert a {
    color: white;
}

    header .menuIntVert a:hover {
        color: #9be0fd;
        text-decoration: none;
    }

header {
    padding: 10px 130px;
}

    header a {
        color: white;
        text-decoration: none;
        font-family: 'KievitOT_Regular', Arial, Helvetica, sans-serif;
        font-size: clamp(1.062rem, calc(0.3317rem + 0.9736vw), 1.5rem);
        margin: 0 20px;
        line-height: 85px;
        display: inline-block;
    }

        header a:hover {
            text-decoration: underline;
        }

        header a.bnaLogo {
            margin: 0;
            float: left;
        }
.interna-contenido h2 {
    font-size: 2.5em !important;
}
.interna-contenido h3 {
    font-family: 'KievitOT_Regular', Arial, Helvetica, sans-serif;
    font-size: 2em !important;
}
.interna-contenido.content {
    padding-bottom: 110px;
    padding-top: 60px;
}
.interna-contenido .collapse.show {
    margin-bottom: 30px;
}
.interna-contenido a h2 {
    font-size: 1.6em !important;
}
.interna-contenido .accordion-header {
    font-family: 'Expert-Sans-Light', helvetica, arial, clean, sans-serif;
    font-size: 2em;
    line-height: 1.3;
    margin: 0;
    margin-bottom: 20px;
    font-weight: 600;
    border-bottom: 1px solid #266187;
    padding: 30PX 0 10px 0;
}
.interna-contenido .accordion-content h3 {
    font-size: 1.5em !important;
    margin-bottom: 0;
}


button {
    cursor: pointer;
}

.hero .btnBlanco {
    background: white;
    color: #162E55;
    border: none;
    margin-right: 30px;
}

    .hero .btnBlanco:hover {
        color: white;
        background: #162E55;
    }

.hero .btonLinea {
    background: #0000003d;
    border: 2px solid white;
    color: white;
}

    .hero .btonLinea:hover {
        color: white;
        background: #162E55;
    }

.hero button {
    padding: 15px 40px;
    border-radius: 40px;
    font-family: 'OpenSans_Bold', Arial, Helvetica, sans-serif;
    font-size: clamp(1.25rem, calc(0.206rem + 1.391vw), 1.875rem);
}

footer a:hover {
    color: #9be0fd !important;
    text-decoration: none;
}

header button {
    font-family: 'OpenSans_Bold', Arial, Helvetica, sans-serif;
    font-size: 22px;
    border-radius: 7px;
    padding: 10PX 30px;
    cursor: pointer;
    margin-top: 4px;
}

.btnAzul {
    background: #3FA0CB;
    font-family: 'OpenSans_Bold', Arial, Helvetica, sans-serif;
    font-size: clamp(1.562rem, calc(1.041rem + 0.6954vw), 1.875rem);
    color: white;
    border-radius: 40px;
    padding: 10px 30px;
    border: none;
    box-shadow: 3px 3px 10px #0009;
    margin-top: 20px;
    display: inline-block;
}



/* ------------------------------------------------------------------
   Sección de contenido: título + párrafos + botón, con imagen opcional.
   Sin imagen -> centrada. Con imagen -> dos columnas (imagen a la izquierda
   por defecto; a la derecha con .img-derecha). Colores por sitio (--sec-*).
   ------------------------------------------------------------------ */
.seccion-contenido {
    background: var(--sec-bg, #fff);
    color: var(--sec-fg, #162E55);
    text-align: center;
    padding: 100px 150px;
}

    .seccion-contenido h1,
    .seccion-contenido h2 {
        color: var(--sec-fg, #162E55);
    }

    /* Sin imagen: párrafos acotados y centrados. */
    .seccion-contenido .cs-texto h2 {
        width: 55%;
        margin: 0 auto 20px auto;
    }

/* Con imagen: dos columnas (imagen + texto). */
.seccion-contenido.con-imagen {
    text-align: left;
}

    .seccion-contenido.con-imagen .cs-fila {
        display: flex;
        align-items: center;
        gap: 70px;
    }

    .seccion-contenido.con-imagen.img-derecha .cs-fila {
        flex-direction: row-reverse;
    }

    .seccion-contenido.con-imagen .cs-fila > img {
        width: 45%;
        max-width: 600px;
        height: auto;
    }

    /* El texto ocupa ~45% (no crece para llenar todo): la fila queda alineada a la
       izquierda y deja aire a la derecha, como el diseño original. */
    .seccion-contenido.con-imagen .cs-texto {
        flex: 0 1 45%;
    }

    /* Con imagen los párrafos ocupan la columna completa (sin el acotado centrado). */
    .seccion-contenido.con-imagen .cs-texto h2 {
        width: auto;
        margin: 0 0 20px 0;
    }

/* Responsive de la sección de contenido (co-locado). */
@media only screen and (min-width: 1201px) and (max-width: 1300px) {
    .seccion-contenido { padding: 70px 50px; }
}

@media only screen and (max-width: 1200px) {
.seccion-contenido { padding: 50px 0; }
/* Los selectores repiten .con-imagen / .img-derecha para empatarle en especificidad a las reglas base
   de esas variantes: una media query no aporta especificidad y sin esto pierden. */
.seccion-contenido .cs-texto h2,
.seccion-contenido.con-imagen .cs-texto h2 { width: 100%; }
.seccion-contenido.con-imagen .cs-fila,
.seccion-contenido.con-imagen.img-derecha .cs-fila { flex-direction: column; gap: 30px; }
.seccion-contenido.con-imagen .cs-fila > img { display: none; }
.seccion-contenido.con-imagen .cs-texto { flex: 0 0 auto; }
}

/* ------------------------------------------------------------------
   Variante de seccion-contenido: renderiza una <ul> larga en 2 columnas
   (p. ej. listados de servicios). Se activa agregando la clase
   "lista-columnas" junto a "seccion-contenido". En mobile cae a 1 columna.
   ------------------------------------------------------------------ */
.seccion-contenido.lista-columnas .cs-texto h1 {
    margin-bottom: 20px;
}

.seccion-contenido.lista-columnas .cs-texto h2:has(ul) {
    width: 100%;
}

.seccion-contenido.lista-columnas .cs-texto ul {
    display: block;
    margin: 30px auto 0 auto;
    padding-left: 20px;
    text-align: left;
    font-size: 1.2rem;
    column-count: 2;
    column-gap: 130px;
}

    .seccion-contenido.lista-columnas .cs-texto ul li {
        break-inside: avoid;
        margin-bottom: 8px;
    }

@media only screen and (max-width: 1200px) {
.seccion-contenido.lista-columnas .cs-texto ul {
    column-count: 1;
    font-size: 1rem;
}

.seccion-contenido.lista-columnas .cs-texto h2:first-of-type {
    font-size: 1.4em !important;
}
}

/* ------------------------------------------------------------------
   TEXTO LIBRE: banda de HTML arbitrario, centrada. Colores por sitio
   (--sec-*); por defecto fondo blanco y texto oscuro. Los enlaces
   heredan el color de texto de la sección.
   ------------------------------------------------------------------ */
.seccion-texto-libre {
    background: var(--sec-bg, #fff);
    color: var(--sec-fg, #333);
    text-align: center;
    padding: 24px 20px;
}

    .seccion-texto-libre .content {
        max-width: 1200px;
        margin: 0 auto;
    }

    .seccion-texto-libre a {
        color: inherit;
        font-weight: 600;
    }

@media only screen and (max-width: 1200px) {
.seccion-texto-libre { padding: 20px 15px; }
}

/* ------------------------------------------------------------------
   Sección acordeón (FAQ): título + ítems colapsables, con imagen opcional.
   Sin imagen -> centrada, a lo ancho. Con imagen -> dos columnas (izq por
   defecto; a la derecha con .img-derecha). Colores por sitio (--sec-*).
   ------------------------------------------------------------------ */
.seccion-acordeon {
    background: var(--sec-bg, #fff);
    color: var(--sec-fg, #162E55);
    text-align: center;
    padding: 100px 150px;
}

    .seccion-acordeon h1 {
        color: var(--sec-fg, #162E55);
        margin-bottom: 40px;
    }

/* Con imagen: dos columnas (imagen + acordeón). */
.seccion-acordeon.con-imagen {
    text-align: left;
}

    .seccion-acordeon.con-imagen .acc-fila {
        display: flex;
        /* Anclada arriba: al abrir/cerrar los acordeones cambia el alto del texto; con center la
           imagen se recentraba y "saltaba". Con flex-start queda fija. */
        align-items: flex-start;
        gap: 70px;
    }

    .seccion-acordeon.con-imagen.img-derecha .acc-fila {
        flex-direction: row-reverse;
        /* row-reverse deja el orden visual [texto][imagen]. flex-end empaqueta ese par contra el
           borde izquierdo (main-end en row-reverse), dejando el espacio en blanco a la DERECHA,
           después de la imagen (no entre texto e imagen). */
        justify-content: flex-end;
    }

    /* Más contenida que en seccion-contenido (cuyo texto es largo): el acordeón plegado es corto,
       así que la imagen se acota para quedar proporcionada. */
    .seccion-acordeon.con-imagen .acc-fila > img {
        width: 40%;
        max-width: 460px;
        height: auto;
    }

    /* Ancho fijo (no crece): el sobrante se reparte entre las columnas vía justify-content del
       .acc-fila, dejando el texto a la izquierda, la imagen a la derecha y aire en el medio. */
    .seccion-acordeon.con-imagen .acc-texto {
        flex: 0 1 55%;
    }

/* Ítems del acordeón (clases propias para no chocar con .accordion-* de la BD). */
.seccion-acordeon .acordeon {
    text-align: left;
}

.seccion-acordeon .acordeon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid currentColor;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.2em;
}

    .seccion-acordeon .acordeon-header:hover {
        color: inherit;
        text-decoration: none;
    }

    .seccion-acordeon .acordeon-icono::before {
        content: "+";
        font-weight: 400;
    }

    .seccion-acordeon .acordeon-header:not(.collapsed) .acordeon-icono::before {
        content: "\2212"; /* signo menos */
    }

.seccion-acordeon .acordeon-body {
    padding: 12px 0 18px 0;
}

    /* Los enlaces del contenido usan el color de la sección (--sec-fg). Sin esto tomarían el
       color de link global (blanco) y quedarían invisibles en un acordeón de fondo claro. */
    .seccion-acordeon .acordeon-body a {
        color: var(--sec-fg, #162E55);
        text-decoration: underline;
    }

/* Responsive del acordeón (co-locado). */
@media only screen and (min-width: 1201px) and (max-width: 1300px) {
    .seccion-acordeon { padding: 70px 50px; }
}

@media only screen and (max-width: 1200px) {
.seccion-acordeon { padding: 50px 0; }
/* En columna el align-items:center de desktop centraría/encogería el texto (cross-axis horizontal);
   se restaura stretch para que título y acordeones ocupen el ancho completo.

   Se repite el selector con .img-derecha para empatarle en especificidad al base de esa variante, que
   define flex-direction y justify-content: una media query no aporta especificidad y sin esto pierden. */
.seccion-acordeon.con-imagen .acc-fila,
.seccion-acordeon.con-imagen.img-derecha .acc-fila {
    flex-direction: column;
    gap: 30px;
    align-items: stretch;
    justify-content: flex-start;
}
.seccion-acordeon.con-imagen .acc-fila > img { display: none; }
.seccion-acordeon.con-imagen .acc-texto { flex: 0 0 auto; }
}

.seccion-iconos {
    background: var(--sec-bg, #fff);
}

.seccion-productos {
    background: var(--sec-bg, #fff);
}


.links {
    background: var(--sec-bg, #fff);
}

footer {
    background: #266187;
}

body {
    background-image: var(--hero-img, none);
    background-size: contain;
    background-repeat: no-repeat;
}

/* ------------------------------------------------------------------
   Banda-banner del hero (DESKTOP). La imagen se pinta acá, en una franja de ALTO FIJO arriba del
   documento y detrás del header y del hero (z-index negativo), no como fondo del <body>.

   El alto fijo es lo importante: el bloque que sigue al hero (el <main>, o la franja de indicadores
   si el sitio la tiene) arranca siempre en el mismo punto —depende del alto del header y del hero,
   no de la imagen— y tapa la banda ahí. Si en cambio la imagen se dibuja con su proporción natural
   ("background-size: 100% auto" sobre el body), su borde inferior se mueve con el ancho del viewport
   y con la proporción de la foto de cada sitio: a algunos anchos termina ANTES de donde arranca el
   contenido y queda una banda de fondo asomando entre las dos (blanca, o gris si el degradado llega
   más abajo que la foto). Con el alto fijo la imagen siempre llega, y el contenido siempre la corta
   en el mismo lugar.

   Cada sitio puede pisar los background-* en su site.css (encuadre y foto propia); lo que no
   conviene cambiar es el alto. En mobile no aplica: ahí la imagen va sobre el .hero, cuyo alto es el
   del contenido, así que no deja sobrante.
   ------------------------------------------------------------------ */
@media only screen and (min-width: 1201px) {
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 740px;
    z-index: -1;
    background-image: var(--hero-img);
    background-position: center 45%;
    background-size: cover;
    background-repeat: no-repeat;
}
}

.hero {
    min-height: clamp(26.88rem, calc(9.127rem + 23.64vw), 37.5rem);
    background: var(--sec-bg, transparent);
}

    .hero h2 {
        font-size: clamp(1.7rem, 2.265vw, 2.718rem);
        line-height: 1.3em;
        margin-bottom: 40px;
    }

    .hero p {
        color: #266187;
        font-family: 'KievitOT_Regular', Arial, Helvetica, sans-serif;
        font-size: 32px;
        margin: 0;
        line-height: 1.4em;
    }

    /* El título del hero (h1 + spans) respeta el color configurado; sin config, blanco. */
    .hero h1,
    .hero h1 span {
        color: var(--sec-fg, #fff);
    }

img {
    border: 0;
}

h2 {
    font-family: 'KievitOT_Regular', Arial, Helvetica, sans-serif;
    font-size: clamp(1.5rem, calc(0.9989rem + 0.6676vw), 1.8rem);
}



.hero .content,
.seccion-iconos .content,
.seccion-productos .content,
.links,
footer {
    padding: 100px 150px;
    color: var(--sec-fg, #162E55);
}

/* La primera sección del home queda pegada al hero (si no, mucho blanco entre ambos). Las
   secciones del home viven dentro de <main> (Home/Index.cshtml), por eso NO alcanza con
   ".hero + <seccion>": la primera sección no es hermana directa del hero.
   Solo DESKTOP (>= 1201px): en mobile el hero usa cover con alto = contenido, no deja sobrante
   blanco, así que subir el <main> lo pisaría. En mobile queda como está.
   (1) Se sube el bloque que sigue al hero, para absorber el espacio que el hero deja por debajo de
       la imagen (el hero mide 600px y la imagen suele ser más baja). Ese bloque es el <main>, salvo
       en las homes con franja de indicadores, donde la franja va primero: entonces es ella la que
       tiene que subir, o queda el fondo del hero asomando entre la imagen y la franja. */
@media only screen and (min-width: 1201px) {
.hero + main,
.hero + .franja-indicadores {
    margin-top: -60px;
}

/* (2) La primera sección lleva menos padding-top. El padding vive en la sección
       (content-section / accordion) o en su .content (product-cards / icon-cards). */
main > section:first-of-type.seccion-productos .content,
main > section:first-of-type.seccion-iconos .content,
main > section:first-of-type.seccion-contenido,
main > section:first-of-type.seccion-acordeon {
    padding-top: 55px;
}
}

/* El hero es la banda-banner (con imagen de fondo): su texto por defecto es blanco. */
.hero .content {
    color: var(--sec-fg, #fff);
}

    .seccion-iconos .content {
        padding-bottom: 50px;
    }

    .seccion-iconos h1 {
        color: var(--sec-fg, #162E55);
    }

    .seccion-iconos h2 {
        color: var(--sec-fg, #162E55);
    }

    .seccion-iconos .item {
        color: var(--sec-fg, #162E55);
        display: block;
    }

        .seccion-iconos .item p {
            margin-bottom: 40px;
            font-size: clamp(1rem, calc(0.4989rem + 0.6676vw), 1.3rem);
        }

        .seccion-iconos .item img {
            float: left;
            margin-right: 30px;
            margin-bottom: 10px;
        }

        .seccion-iconos .item img {
            float: left;
            margin-right: 30px;
            margin-bottom: 10px;
            background: #3FA0CB;
            padding: 50px;
        }

        .seccion-iconos .item p {
            margin-top: 0;
        }

        .seccion-iconos .item h4,
        .seccion-productos .item h4 {
            font-family: 'KievitOT_Bold', Arial, Helvetica, sans-serif;
            font-size: clamp(1.4rem, calc(0.0637rem + 1.78vw), 2.2rem);
            margin: 0 0 10px 0;
        }

    .seccion-iconos .col.der {
        width: 45%;
    }

    .seccion-iconos .col.izq {
        width: 53%;
        padding-right: 0;
    }

/* Variante "grilla": título a lo ancho arriba + íconos en columnas explícitas.
   Reutiliza el markup y los estilos de .seccion-iconos .item. */
.seccion-iconos.iconos-grilla .iconos-titulo {
    margin-bottom: 40px;
}

.seccion-iconos.iconos-grilla .iconos-grid {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

    .seccion-iconos.iconos-grilla .iconos-col {
        flex: 1;
    }

    /* Ícono a la izquierda + título/texto en columna a la derecha (como la variante lateral).
       El glifo se dimensiona por CSS: los SVG traen viewBox pero no width/height. Con
       box-sizing:border-box (global, Bootstrap 5) el width INCLUYE el padding, así que el
       recuadro celeste queda en 110px y el glifo en 60px (110 - 25*2). Scoped a "grilla"
       para no alterar la variante lateral (Brasil). */
    .seccion-iconos.iconos-grilla .item img {
        box-sizing: border-box;
        width: 130px;
        height: 130px;
        padding: 15px;
        object-fit: contain;
    }

    /* El texto no se envuelve por debajo del ícono flotado: queda como una columna a su
       derecha (130px de recuadro + 30px de margin-right del ícono = 160px). */
    .seccion-iconos.iconos-grilla .item h4,
    .seccion-iconos.iconos-grilla .item p {
        margin-left: 160px;
    }

    /* Los enlaces dentro del texto de una tarjeta de íconos (p. ej. "Consulte aquí") van en su
       propia línea. No se usa <br> porque los <br> dentro de .seccion-iconos .item p se ocultan
       en desktop (regla de colapso del texto decorativo más abajo). */
    .seccion-iconos .item p a {
        display: block;
        width: fit-content;
    }

    /* Lista con viñetas (opcional) dentro de una tarjeta de íconos. Se despliega a lo ancho debajo
       del texto (clear) y queda alineada con la columna de texto en la variante grilla. Color = --sec-fg. */
    .seccion-iconos .item .item-lista {
        margin: 0;
        padding-left: 20px;
        color: var(--sec-fg, #162E55);
        font-size: 1em;
    }

    .seccion-iconos.iconos-grilla .item .item-lista {
        margin-left: 160px;
    }

        .seccion-iconos .item .item-lista li {
            font-family: 'KievitOT_Regular', Arial, Helvetica, sans-serif;
            margin-bottom: 3px;
        }

@media only screen and (max-width: 1200px) {
    .seccion-iconos.iconos-grilla .item .item-lista {
        margin-left: 0;
    }
}

    /* Toggle "Ver más / Ver menos" del colapsable de la lista. Alineado con la columna de texto en
       la variante grilla. Color = --sec-fg. */
    /* display:block + fit-content para que quede alineado a la izquierda (bajo la lista) y no lo
       centre el text-align:center que toma el .item en pantallas medianas. */
    .seccion-iconos .item .item-lista-toggle {
        display: block;
        width: fit-content;
        margin-top: 10px;
        color: var(--sec-fg, #162E55);
        text-decoration: underline;
        cursor: pointer;
        font-size: 1em;
    }

    .seccion-iconos.iconos-grilla .item .item-lista-toggle {
        margin-left: 160px;
    }

@media only screen and (max-width: 1200px) {
    .seccion-iconos.iconos-grilla .item .item-lista-toggle {
        margin-left: 0;
    }
}

    /* Bootstrap agrega .collapsed al toggle cuando la lista está cerrada y la quita al abrirla:
       cerrado -> "Ver más"; abierto (:not(.collapsed)) -> "Ver menos". */
    .seccion-iconos .item .item-lista-toggle .lbl-menos {
        display: none;
    }

    .seccion-iconos .item .item-lista-toggle:not(.collapsed) .lbl-mas {
        display: none;
    }

    .seccion-iconos .item .item-lista-toggle:not(.collapsed) .lbl-menos {
        display: inline;
    }


.seccion-productos .item img.imgMobile {
    display: none;
}

.seccion-productos h1 {
    color: var(--sec-fg, #162E55);
    margin-bottom: 60px;
}

/* Grilla de tarjetas: se reparten parejo según la cantidad (3 o 4) y envuelven en pantallas
   angostas. flex-basis define el ancho mínimo antes de envolver; max-width, el máximo por tarjeta. */
.seccion-productos .items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 40px 25px;
}

.seccion-productos .item a {
    color: var(--sec-fg, #162E55);
    text-decoration: underline;
}

.seccion-productos .item {
    flex: 1 1 220px;
    max-width: 480px;
}

/* Grilla multi-fila balanceada cuando hay más de 4 tarjetas (el componente agrega .grilla y setea
   --cols con la cantidad de columnas). Cada tarjeta ocupa 1/cols descontando los gaps (25px). La
   última fila queda alineada a la izquierda (justify-content: flex-start heredado de .items).
   Solo escritorio (>= 1201px); en mobile las tarjetas se apilan. */
@media only screen and (min-width: 1201px) {
.seccion-productos .items.grilla .item {
    flex: 0 1 calc((100% - (var(--cols) - 1) * 25px) / var(--cols));
    max-width: none;
}
}

    .seccion-productos .item h4 {
        margin: 40px 0 25px 0;
    }

    .seccion-productos .item .prod-texto {
        font-size: clamp(1rem, calc(0.6659rem + 0.4451vw), 1.2rem);
        padding-right: 40px;
    }

        /* Párrafos internos del texto (cuando el contenido trae bloques HTML). */
        .seccion-productos .item .prod-texto p {
            margin: 0 0 10px 0;
        }

    .seccion-productos .item img {
        width: 100%;
        max-width: 480px;
    }

        /* Se iguala la altura SOLO de la imagen de escritorio (misma relación de aspecto, sin
           depender del tamaño original; object-fit: cover recorta sin deformar). La imagen mobile
           (.imgMobile) se excluye para que conserve su forma rectangular. */
        .seccion-productos .item img:not(.imgMobile) {
            aspect-ratio: 3 / 2;
            object-fit: cover;
        }

header .btn {
    display: none;
}


.links {
    text-align: center;
}

    .links a {
        display: inline-block;
        margin: 0 20px;
        font-family: 'OpenSans_Regular', Arial, Helvetica, sans-serif;
        font-size: clamp(0.8125rem, calc(0.6037rem + 0.2782vw), 0.9375rem);
        text-decoration: none;
        font-weight: 600;
        color: var(--sec-fg, #162E55);
        vertical-align: top;
        max-width: 150px;
    }

        /* Disco del logo: tile circular común a TODOS los sitios (antes cada site.css lo pisaba).
           El color se define por logo vía --logo-bg (LinkItem.Fondo, o LinksGridModel.LogoFondo como
           fallback); default blanco. La forma (redonda/cuadrada) decide cómo se ubica la imagen. */
        .links .circulo {
            width: 150px;
            height: 150px;
            margin: 0 auto 20px;
            border-radius: 50%;
            background-color: var(--logo-bg, #fff);
            box-shadow: 2px 2px 10px #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: transform .22s ease, box-shadow .22s ease;
        }

            /* Redonda (default): la imagen llena el disco. El scale compensa el aire propio del logo
               para que llegue al borde, igual que la maqueta (el overflow:hidden recorta al círculo). */
            .links .circulo.redonda img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                transform: scale(1.122);
            }

            /* Cuadrada: imagen cuadrada/rectangular contenida con aire dentro del disco (no se recorta). */
            .links .circulo.cuadrada {
                padding: 22px;
            }

                .links .circulo.cuadrada img {
                    max-width: 100%;
                    max-height: 100%;
                    object-fit: contain;
                }

    /* Microinteracción unificada (antes vivía por sitio): el disco se eleva al pasar el mouse. */
    .links a:hover .circulo {
        transform: translateY(-6px);
        box-shadow: 0 12px 26px rgba(15, 42, 61, .20);
    }

    .links h1 {
        margin-bottom: 70px;
        color: var(--sec-fg, #162E55);
    }

    /* ---- Carrusel (Swiper) para secciones con muchos logos (LinksGridModel.UsaCarrusel) ---- */
    .links-carrusel-wrap {
        position: relative;
        padding: 0 3rem;                 /* espacio lateral para las flechas */
    }

        .links-carrusel-wrap .swiper {
            overflow: hidden;
        }

        /* El ancho del slide lo calcula Swiper según slidesPerView (por breakpoint); no se fija acá. */
        .links-swiper .swiper-slide {
            height: auto;
        }

        /* El disco se adapta al ancho del slide (con un tope) para no cortarse y acompañar la pantalla. */
        .links-swiper .circulo {
            width: 100%;
            max-width: 150px;
            height: auto;
            aspect-ratio: 1;
        }

            .links-swiper .swiper-slide a {
                margin: 0;
                max-width: 100%;
            }

        .links-carrusel-wrap .swiper-button-prev,
        .links-carrusel-wrap .swiper-button-next {
            color: var(--sec-fg, #162E55);
            --swiper-navigation-size: 26px;
            /* Alineadas al centro del disco (no del slide, que incluye la descripción). */
            --swiper-navigation-top-offset: 65px;
        }

        .links-carrusel-wrap .swiper-button-prev { left: 0; }
        .links-carrusel-wrap .swiper-button-next { right: 0; }

@media only screen and (max-width: 1200px) {
        /* En mobile NO hay carrusel (Swiper queda con enabled:false, así que no escribe transforms):
           el mismo markup se muestra como grilla estática de 2 logos por fila. */
        .links-carrusel-wrap {
            padding: 0;
        }

            .links-carrusel-wrap .swiper-button-prev,
            .links-carrusel-wrap .swiper-button-next {
                display: none;
            }

            .links-swiper .swiper-wrapper {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                transform: none !important;
            }

                .links-swiper .swiper-slide {
                    width: 50%;
                    margin: 0 0 24px;
                    padding: 0 6px;
                    box-sizing: border-box;
                }

                    .links-swiper .swiper-slide a {
                        width: 100%;
                        margin: 0;
                    }
}

footer {
    color: white;
    /* El padding base del footer es 100px arriba y abajo (regla compartida con las secciones).
       Arriba queda demasiado espacio vacío, así que se reduce (aplica a todos los footers; los
       que tienen franja superior de enlaces ya usaban este mismo valor). */
    padding-top: 40px;
}

    footer .logoBlanco {
        display: block;
    }

    footer div {
        display: inline-block;
        vertical-align: top;
    }

    /* Franja superior opcional del footer: enlaces centrados sobre el resto (p. ej. Política de
       privacidad | Información legal | Política de cookies). Ocupa su propia fila (width:100%) y
       existe solo si el sitio configura Model.EnlacesSuperiores. */
    footer .footer-top {
        width: 100%;
        text-align: center;
        padding-bottom: 35px;
        margin-bottom: 35px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

        footer .footer-top a {
            display: inline-block;
            font-family: 'KievitOT_Regular', Arial, Helvetica, sans-serif;
            font-size: 21px;
            color: white;
            text-decoration: underline;
            padding: 0 22px;
            line-height: 1.4em;
        }

        footer .footer-top a:not(:last-child) {
            border-right: 1px solid #fff;
        }

@media only screen and (max-width: 1200px) {
    footer .footer-top a {
        font-size: 16px;
        padding: 0 12px;
    }
}

    /* Con la franja superior el footer reduce su padding-top (si no, queda mucho espacio en
       blanco sobre los enlaces, porque la franja es el primer elemento). Solo afecta a los
       footers que la usan (clase agregada por el componente). */
    footer.con-enlaces-superiores {
        padding-top: 40px;
    }

@media only screen and (max-width: 1200px) {
    footer.con-enlaces-superiores {
        padding-top: 25px;
    }
}

    footer .col1 {
        width: 45%;
        vertical-align: bottom;
    }

    footer .col2 {
        width: 25%;
    }

    footer .col3 {
        width: 25%;
    }

    footer .col1 p {
        padding-left: 12px;
        font-size: clamp(1.062rem, calc(0.7493rem + 0.4172vw), 1.25rem);
        margin-bottom: 0;
    }

    footer span {
        font-family: 'KievitOT_Bold', Arial, Helvetica, sans-serif;
        font-size: 30px;
        margin-bottom: 15px;
        display: block;
    }

    footer a, footer .col3 p, footer .col2 p {
        font-family: 'KievitOT_Regular', Arial, Helvetica, sans-serif;
        font-size: clamp(1.062rem, calc(0.7493rem + 0.4172vw), 1.25rem);
        display: block;
        color: white;
        text-decoration: none;
        line-height: 1.5em;
        margin: 0;
        padding: 0;
    }

    /* Nota/aviso debajo de los enlaces de la col2 (p. ej. FDIC): separada de los links. */
    footer .col2 p {
        margin-top: 18px;
    }

    footer .col3 a {
        display: inline-block;
    }

    footer .col3 {
        border-left: 1px solid #fff;
        padding-left: 60px;
    }
    /* Banda inferior: franja genérica a lo ancho, debajo de las columnas. El layout lo define el
       propio HTML del contenido (footer.banda.contenido); el theme solo aporta el separador. */
    footer .col4 {
        width: 100%;
        padding-top: 30px;
        margin-top: 50px;
        border-top: 1px solid #4b7895;
    }

    /* Contenedor del HTML libre de la banda: se neutralizan las reglas de columnas/enlaces del footer
       (footer div => inline-block, footer a => block 25px) para que el layout lo defina íntegramente
       el HTML del contenido con sus estilos inline. */
    footer .col4 .footer-banda {
        display: block;
        width: 100%;
    }

        footer .col4 .footer-banda div {
            display: block;
        }

        footer .col4 .footer-banda a {
            display: inline;
            font-size: inherit;
            color: inherit;
        }

        footer .col4 .footer-banda p {
            margin: 0;
        }


.seccion-productos .collapse p { font-size: 1em; margin-bottom: 5px;}


/* ------------------------------------------------------------------
   Panel desplegable con contenido de una interna (botón CTA modo "interna").
   Va DENTRO del .content de la sección, debajo del botón, así que hereda el
   fondo y el color de texto de la sección. Solo aporta separación.
   La tipografía del contenido reutiliza .interna-contenido (reglas ya en este archivo).
   ------------------------------------------------------------------ */
.cta-panel {
    display: block;
    width: 100%;
    clear: both;
    margin-top: 30px;
    text-align: left;
}









/****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************
*****************************************************************************/




/* Sin techo de ancho: este bloque era (min-width:1201px) and (max-width:1930px) y era el ÚNICO que
   definía estos valores, así que arriba de 1930px regían las declaraciones base, que son mayores. En
   una pantalla de 1920 el ancho CSS a 100% es ~1905, o sea que el umbral se cruzaba a ~98,7% de zoom:
   cualquier zoom por debajo de 100% agrandaba el contenido en lugar de achicarlo. Los tamaños de
   tipografía que estaban acá pasaron a clamp() en las reglas base. */
@media only screen and (min-width: 1201px) {
    .seccion-productos .item br, .seccion-iconos .item p br {
        display: none;
    }

    .seccion-productos .item img {
        max-width: 470px;
    }

    .links a {
        margin: 0 12px;
    }

    footer .col1 {
        width: 40%;
    }

    footer .col2 {
        width: 29%;
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1500px) {
    .seccion-iconos .col.der {
        width: 45%;
    }

    .seccion-iconos .col.izq {
        width: 53%;
    }

    /* Sin min-width: forzaba el ancho del body por encima del viewport y metía scroll horizontal
       entre 1301 y 1400px, el rango al que se llega con zoom 125-150% en una pantalla de 1920. */
    body {
        background-size: auto 740px;
    }

    .seccion-iconos .content {
        padding-bottom: 50px !important;
    }

    footer .col2 {
        width: 27%;
    }

    footer .col3 {
        padding-left: 40px;
    }
	
	
	
	.hero .content,
	.seccion-iconos .content,
	.seccion-productos .content,
	.links, footer {
		padding: 70px 80px;}
	/* seccion-contenido / seccion-acordeon llevan el padding en el <section> (no en .content),
	   por eso van aparte. Sin esto quedaban en 150px y más angostas que el resto en esta franja. */
	.seccion-contenido,
	.seccion-acordeon {
		padding: 70px 80px;}
	header { padding-right: 80px; padding-left: 80px;}
	
	header a { margin: 0 17px; }
	
.seccion-iconos .item img { margin-bottom: 40px;}
	
	
	
	
	
}




@media only screen and (min-width: 1925px) {

    header,
    .hero,
    .seccion-contenido .content,
    .seccion-acordeon .content,
    .seccion-iconos .content,
    .seccion-productos .content,
    footer .content {
        max-width: 2000px;
        margin: auto;
    }

    footer .content {
        display: block;
    }
}
/* end max-width: 1400px */



@media only screen and (min-width: 1201px) and (max-width: 1300px) {
	
	
		.hero .content, .seccion-iconos .content, .links, footer {
		padding: 70px 50px;}
	
	header { padding-right: 50px; padding-left: 50px;}

	p { font-size: 1.1em;}
	
	header a { margin: 0 10px; }
	
	.bnaLogo img { width: 160px;}
	
	    h1 { margin-bottom: 20px; }
	
	
	
	
	
	.seccion-iconos .item img {padding: 20px; margin-right: 20px; margin-bottom: 30px;}
	.BancaCorpP {
    font-size: 0.9em !important;
}
	.seccion-iconos .item { min-height: 170px;}
	.seccion-iconos .item br { display: none;}
	
	
	.seccion-productos .content { padding:70px 50px;}

	.seccion-productos .item .prod-texto { line-height: inherit; }
	.seccion-productos .item h4 { margin: 15px 0 10px 0; }
	
	
	
}
/* end max-width: 1300px */


/* Columnas del footer en la franja angosta de escritorio. Los porcentajes de más arriba (col1 40% /
   col2 27% / col3 25%) están pensados para 1500px o más: por debajo, la col3 —que lleva el texto largo
   de seguridad— baja a ~190px y el párrafo wrappea de a dos o tres palabras.

   Se le pone un piso en px en lugar de subirle el porcentaje: así el ancho no salta al cruzar el borde
   del bloque (a 1500px el 25% ya vale 335px, casi lo mismo que el piso) y el layout de las pantallas
   grandes queda intacto. El ancho que necesita sale de la col1, que solo tiene el título y un enlace.
   Va último para ganarles por orden a los bloques de 1930 y 1500. */
@media only screen and (min-width: 1201px) and (max-width: 1500px) {
    footer .col1 { width: 33%; }
    footer .col3 { min-width: 340px; }
}


/***************** SOLO MOBILE ****************/
@media only screen and (max-width: 1200px) {




	header .hamburger-menu {         background-color: #162E55;    }

    /* Abierto por Alpine (x-bind:class). Solo acá: por encima del breakpoint el desplegable no existe
       como tal y el menú va en el header, así que la clase no tiene efecto aunque quede puesta. */
    .hamburger-menu.is-open {
        display: block;
    }

    header .links_menu a {
        line-height: 2em;
        margin: 0;
        font-size: 16px;
    }

    header .hamburger-menu a {
        float: none;
        display: block;
    }

    header .hamburger-menu .btn_home {
        display: inline-block;
    }

    header .hamburger-menu .links_menu {
        margin: 15px 0;
    }

    header .hamburger-menu .btn_home, header .hamburger-menu .btn_lag {
        margin: 5px 10px;
        height: auto;
        line-height: unset;
        padding: 4px 9px;
        background: white;
        color: #555;
        font-size: 13px;
        border-radius: 2px;
    }

    header .hamburger-menu .btn_lag {
        background: none;
        border: 1px solid white;
        color: white;
        padding: 3px 8px;
        text-transform: uppercase;
    }

    header .content {
        width: 100%;
    }


    header {
        margin-bottom: 0;
        padding: 10px 30px;
    }


    /* Lleva "header" para empatarle en especificidad a header .itemsMenu (display:inline-block)
       y ganarle por orden. */
    header .itemsMenu {        display: none;    }

    header {
        padding: 15px 20px;
        position: absolute;
        width: 100%;
    }
.col { padding-left: 0;}
    h1 {
        font-size: 2.1em;
        margin-bottom: 15px;
    }

    /* Explícito porque .seccion-acordeon h1 (40px) y .links h1 (70px) le ganan por especificidad
       al h1 global de acá arriba. Son valores de escritorio. */
    .seccion-acordeon h1,
    .links h1 {
        margin-bottom: 15px;
    }

	.hero h1 {
        font-size: 1.8em;
        margin-bottom: 25px;
    }


    .hero h2 {        font-size: 1.2em !important;    }
    h2 { font-size: 1.1em !important;    }
    /* Ídem: el 2.5em de las internas es !important y le gana al h2 global de acá arriba. */
    .interna-contenido h2 { font-size: 1.1em !important; }

    h2 br, 
	p br, 
	.item br {
            display: none;
        }

    .col {        width: 100% !important;    }

    .btnAzul {
        font-family: 'OpenSans_Regular', Arial, Helvetica, sans-serif;
        font-size: 1em;
    }

    .hero .content, 
	.seccion-iconos .content, 
	.seccion-productos .content, 
	.links, 
	footer {
        padding: 50px 35px;
    }

    .bnaLogo img {
        width: 130px;
    }

header a {
    line-height: inherit;
}
    body  {
        background: none;
    }

    section .content {
        padding-left: 40px;
        padding-right: 40px;
    }

    .hero {
        background-image: var(--hero-img-mobile, none);
        background-size: cover;
        background-repeat: no-repeat;
        min-height: inherit;
    }

        .hero .content {
            padding: 110px 30px 50px 30px;
        }

        .hero button {
            font-size: 0.9em;
            padding: 5px 15px;
            margin-bottom: 10px;
        }

        .hero .btnBlanco {
            margin-right: 12px;
            border: 3px solid white;
        }

        /* Incluye :hover para empatarle al del base: en táctil el :hover queda pegado tras el tap. */
        .hero .btonLinea,
        .hero .btonLinea:hover {            background: #00000052;        }

        .hero h2 {            margin-bottom: 30px;        }




    .seccion-iconos {        padding: 0;    }

    /* Variante grilla en mobile: las columnas se apilan en una sola. */
    .seccion-iconos.iconos-grilla .iconos-grid {
        flex-direction: column;
        gap: 0;
    }

    /* En mobile el ícono va arriba y el texto abajo (sin recuadro ni float): se anulan
       el indent y el alto fijo que usa la grilla en escritorio.

       El tamaño lo manda el alto y el ancho lo sigue: cada país sirve sus propios .svg y un mismo
       nombre puede venir con otra relación de aspecto, que en un cuadrado con object-fit:contain
       quedaría con bandas y se vería chico. max-width acota uno muy apaisado.

       El padding va acá y no en la regla general de abajo, que pierde contra el padding:15px del base
       de la grilla; con su box-sizing:border-box esos 15px se comían del alto. */
    .seccion-iconos.iconos-grilla .item img {
        height: 80px;
        width: auto;
        max-width: 150px;
        padding: 0 0 10px 0;
    }

    .seccion-iconos.iconos-grilla .item h4,
    .seccion-iconos.iconos-grilla .item p {
        margin-left: 0;
    }

        .seccion-iconos .item img {
            background: none;
            float: none;
            padding: 0px 0 10px 0;
            margin-bottom: 0;
			width: 80px;
        }

        .seccion-iconos .item {
            padding-top: 20px;
        }

            .seccion-iconos .item h4 {
                font-family: 'KievitOT_Regular', Arial, Helvetica, sans-serif;
                font-weight: 100;
                font-size: 1.6em;
                margin-bottom: 10px;
            }

            .seccion-iconos .item p {
                font-size: 1em;
                line-height: 1.3em;
                margin-bottom: 22px;
                margin-top: 0;
            }



    .seccion-productos .items {
        flex-direction: column;
        gap: 20px;
    }

    .seccion-productos .item img.oculta-mobile {
        display: none
    }

        .seccion-productos .item img.imgMobile {
            display: block;
        }

    .seccion-productos h1 {
        margin-bottom: 30px;
    }

    .seccion-productos .item {
        flex: 0 0 auto;
        margin: 0;
    }


.collapse h4 { font-size: 15px;}

        .seccion-productos .item h4 {
            font-family: 'KievitOT_Regular', Arial, Helvetica, sans-serif;
            font-weight: 100;
            margin: 10px 0 5px 0;
            font-size: 1.6em;
        }

        .seccion-productos .item .prod-texto {
            font-size: 1em;
            line-height: 1.3em;
            margin: 0;
            margin-bottom: 20px;
        }

        .seccion-productos .item a {
            color: var(--sec-fg, #162E55);
            text-decoration: underline;
        }


    /* La banda se centra como el resto del footer. Va acá y no en los estilos inline del contenido
       porque un style inline no puede tener media query y quedaría centrado también en escritorio. */
    footer .col4 {
        border-top: 1px solid #ffffff73;
        text-align: center;
    }







    .links {
        padding-left: 25px;
        padding-right: 25px;
    }

       .links .content {
            padding: 0;
        }

        /* Disco de tamaño fijo y centrado (unifica la lista y el markup de carrusel en mobile). */
        .links .circulo {
            width: 110px;
            height: 110px;
            aspect-ratio: auto;
            margin: 0 auto 12px;
            box-sizing: border-box;
        }

        /* La descripción usa el ancho de la columna (sin el cap de 150px de escritorio) para wrappear menos. */
        .links a {
            vertical-align: top;
            max-width: none;
            font-size: 14px;
        }

        /* Lista sin carrusel (≤ umbral): los enlaces son hermanos directos; 2 por fila. */
        .links .content > a {
            width: 50%;
            margin: 0 0 24px;
            padding: 0 6px;
            box-sizing: border-box;
        }



    footer .col1 {
        order: 1;
    }

    footer .col2 {
        order: 3;
    }

    footer .col3 {
        order: 2;
    }

    footer .col1, 
	footer .col2, 
	footer .col3 {
        width: 100%;
        text-align: center;
        border: none;
        padding: 0;
    }

    footer {
        display: flex;
        flex-direction: column-reverse;
    }

        footer a,
	footer .col3 p,
	footer .col2 p {
            font-size: 1.1em;
        }

        footer .col3 {
            margin-top: 30px;
            padding-top: 30px;
            border-top: 1px solid #ffffff73;
            margin-bottom: 50px;
        }

        footer .logoBlanco {
            margin: auto;
            width: 60%;
        }

        footer .col1 p {
            padding-left: 0;
            font-size: 1em;
        }

    .btn.bd-search-docs-toggle {
        position: absolute;
        right: 30px;
        top: 25px;
    }

    .menuIntVert,
	.lang-btn {
        display: none;
    }

    header .btn {
        display: inline-block;
    }
}


/* Tipografía para la parte ancha del rango mobile (tablets y teléfonos apaisados). El bloque de arriba
   está calibrado para ~390px y a 800-1200px achata la jerarquía: el h1 de sección queda a 1,3x del h4
   de las tarjetas. Solo cambia tamaños, no la estructura. Va DESPUÉS del bloque mobile porque varios
   de estos selectores le empatan en especificidad y se resuelven por orden. */
@media only screen and (min-width: 768px) and (max-width: 1200px) {
    /* 3em ~= 48px, apenas arriba de los 45px con que arranca escritorio: así el h1 no se hace más
       chico al ensanchar la ventana cruzando el breakpoint. */
    h1 {
        font-size: 3em;
    }

    .hero h1 {
        font-size: 2.6em;
    }

    h2 {
        font-size: 1.4em !important;
    }

    .hero h2 {
        font-size: 1.6em !important;
    }

    .seccion-iconos .item h4,
    .seccion-productos .item h4 {
        font-size: 1.9em;
    }

    /* ---------------- LAYOUT ----------------
       El bloque mobile apila todo en una columna, que a 768-1200px desperdicia la mitad del ancho.
       Acá las secciones vuelven a dos columnas. Son todas flex ya, así que es reconfigurar, no
       rediseñar. El footer y el hamburguesa quedan como en mobile a propósito. */

    /* Tarjetas de producto: 2 por fila. Se anula el max-width del base porque a partir de ~1000px
       dejaría las tarjetas cortas y un hueco a la derecha. */
    .seccion-productos .items {
        flex-direction: row;
        gap: 30px 25px;
    }

    .seccion-productos .item {
        flex: 0 1 calc((100% - 25px) / 2);
        max-width: none;
    }

    /* Íconos de la variante grilla: las columnas vuelven a ponerse lado a lado. No hace falta darles
       ancho: .iconos-col ya trae flex:1 del base y se reparten solas. */
    .seccion-iconos.iconos-grilla .iconos-grid {
        flex-direction: row;
        gap: 40px;
    }

    /* Enlaces de interés: 4 por fila en vez de 2. Cubre las dos formas del markup, con carrusel
       (swiper-slide) y sin él. */
    .links .content > a,
    .links-swiper .swiper-slide {
        width: 25%;
    }

    /* Content-section y acordeón con imagen: vuelven a dos columnas y se recupera la imagen, que el
       bloque mobile oculta.

       Las variantes .img-derecha van con su propia regla y NO se unifican con las de arriba: el base
       les define row-reverse para dejar la imagen a la derecha, y si acá se les impusiera "row" se
       perdería el sentido de la variante. Hay que repetirlas igual porque el bloque mobile las puso
       en column con una clase más de especificidad, y una media query no aporta especificidad. */
    .seccion-contenido.con-imagen .cs-fila {
        flex-direction: row;
        gap: 40px;
    }

    .seccion-contenido.con-imagen.img-derecha .cs-fila {
        flex-direction: row-reverse;
        gap: 40px;
    }

    .seccion-contenido.con-imagen .cs-fila > img {
        display: block;
        width: 38%;
    }

    .seccion-contenido.con-imagen .cs-texto {
        flex: 1 1 auto;
    }

    .seccion-acordeon.con-imagen .acc-fila {
        flex-direction: row;
        gap: 40px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .seccion-acordeon.con-imagen.img-derecha .acc-fila {
        flex-direction: row-reverse;
        gap: 40px;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .seccion-acordeon.con-imagen .acc-fila > img {
        display: block;
        width: 35%;
    }

    .seccion-acordeon.con-imagen .acc-texto {
        flex: 1 1 auto;
    }
}


/********************* FRANJA DE INDICADORES FINANCIEROS ****************************/

/* Banda full-width de cotizaciones y tasas, apenas debajo del header y del hero. El contenido interno
   (un .container con utilidades de Bootstrap) lo trae armado la vista view_indicadores_financieros de
   la base del país; acá va sólo la banda: fondo, color, tipografía y alto. */
.franja-indicadores {
    background: #162E55;
    color: #fff;
    padding: .75rem 0;
    font-family: 'KievitOT_Regular', Arial, Helvetica, sans-serif;
}

/* El alto de la banda lo fija la franja, no el fragmento: cada país trae su propio py-* de Bootstrap
   (Uruguay py-1, Bolivia py-3) y si no se neutraliza, la banda queda de distinto alto según el país.
   Lleva !important porque las utilidades py-* de Bootstrap también lo llevan. */
.franja-indicadores > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* El contenido va siempre centrado, sin importar cómo lo alinee el fragmento de cada país (Uruguay
   trae justify-content-start; Bolivia, justify-content-center justify-content-md-start). Lleva
   !important porque las utilidades justify-content-* de Bootstrap también lo llevan. */
.franja-indicadores > .container > .d-flex {
    justify-content: center !important;
}

/* Las etiquetas del fragmento ("COMPRA", "VENTA", "vigente del ...") vienen con opacity-75 de
   Bootstrap. Sobre el azul de la banda eso las deja demasiado apagadas: se levanta un poco. */
.franja-indicadores .opacity-75 {
    opacity: .85 !important;
}

@media only screen and (max-width: 1200px) {
.franja-indicadores {
    padding: .75rem 0;
}
}

/* Entre 1301px y 1700px el menú del header no entra en una línea en los sitios con más ítems o con
   títulos largos (Bolivia: 5 ítems, uno de ellos "Oferta exportable argentina") y se parte en dos
   líneas. Eso agranda el header de 129px a 214px y corre todo el hero 85px hacia abajo, más allá del
   alto de la imagen del banner, dejando una banda de fondo asomando entre la imagen y lo que sigue.
   Con el tipo y los márgenes un poco más chicos en ese rango, el menú entra en una línea y el header
   mantiene su alto. Por debajo de 1301px ya no aplica: ahí el menú pasa a ser el hamburguesa. */
@media only screen and (max-width: 1700px) and (min-width: 1301px) {
    .menuIntVert a {
        font-size: 20px;
        margin: 0 12px;
    }
}