@font-face {
    font-family: 'Roboto-Bold';
    
    src: url('font/Roboto/Roboto-Bold.ttf') format('truetype'),
        url('font/Roboto/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Medium';
    
    src: url('font/Roboto/Roboto-Medium.ttf') format('truetype'),
        url('font/Roboto/Roboto-MediumItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('font/Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto-Light';
    src: url('font/Roboto/Roboto-Light.ttf') format('truetype'),
        url('font/Roboto/Roboto-LightItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aalto-Bold'; 
    src: url('font/Roboto/Roboto-Bold.ttf') format('truetype'),
         url('font/Roboto/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: normal; 
    font-style: normal; 
    font-display: swap;
}

@font-face {
    font-family: 'Aalto-Medium'; 
    src: url('font/Roboto/Roboto-Medium.ttf') format('truetype'),
         url('font/Roboto/Roboto-MediumItalic.ttf') format('truetype');
    font-weight: normal; 
    font-style: normal; 
    font-display: swap;
}
/* @font-face {
    font-family: 'Aalto-Regular'; 
    src: url('/font/Aalto/AaltoSansPro-Regular.ttf') format('truetype'),
         url('/font/Aalto/AaltoSansPro-RegularIt.ttf') format('truetype');
    font-weight: normal; 
    font-style: normal; 
    font-display: swap;
} */
@font-face {
    font-family: 'Aalto-light'; 
    src: url('font/Roboto/Roboto-Light.ttf') format('truetype'),
         url('font/Roboto/Roboto-LightItalic.ttf') format('truetype');
    font-weight: normal; 
    font-style: normal; 
    font-display: swap;
}
:root {
  --gray-txt: #323639;
  --red-one: #E11E00;
  --red-two: #940a00;
  --red-three: #BF0909;
  --gray-nav: #D3D3D3;
  --gray-header: #F6F9FC;
  --gray-two: #EDF0F4;
  --gray-three: #DEE3EA;
  --gray-four: #A3A3A3;
  --yellow: #FFD147;
  --pie-pagina: #E9EAEA;
  --footer: #474747;
  --green: #3C9646 !important;
  }

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-family: Roboto-regular;
    color: var(--gray-txt);
}

body {
    min-width: 320px;
    display: flex;
    flex-direction: column;
}
/*======================= ANUNCIO =======================*/

.cuerpo-style-abajo, .cuerpo-style-arriba{
    width: 100%;
}

.ctn-cuerpo-completo-select{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.anuncio {
    /* background-color: #FFD147; */
    background: linear-gradient(90deg, #EC928E 25%, #F9DEDC 73%);
    height: 40px;
    display: flex;
    align-items: center;
}

.ctn-anuncio {
    display: flex;
    align-items: center;
    width: 96%;
    margin: 0px 2%;
}

.anuncio-contenido {
    display: flex;
    align-items: center;
    /*centrar de arriba y abajo*/
    justify-content: center;
    /* centrar de laterales */
    height: 100%;
    width: 99%;
    gap: 50px;
    cursor: pointer;
    font-size: 16px;
}

.anuncio-cerrar {
    width: 20px;
    height: 100%;
    display: flex;
    justify-content: end;
    cursor: pointer;
}

.seleccionado {
    filter: brightness(50%) !important;
    background-color: rgba(0, 0, 0, 0.50);
    pointer-events: none;
    /* Otros estilos según sea necesario */
}

.img-cerrar {
    display: flex;
    cursor: pointer;
}

.img-cerrar svg{
    width: 100%;
}
/*======================= FIN ANUNCIO =======================*/

/*======================= NAVBAR =======================*/
nav {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--gray-nav);
    height: 40px;
    font-size: 15px;
    justify-content: center;
}

.navbar {
    z-index: 4;
    width: 100%;
    padding: 0px 2%;
    box-sizing: border-box;
    max-width: 1920px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*--- Navbar Escudo ---*/
.nav-escudo {
    display: flex;
    align-items: center;
    width: 15%;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 14px;
}

.nav-escudo-img {
    background-color: white;
    border-radius: 50px;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
}

.nav-escudo-img img {
    height: 98%;
}
/*--- Fin de escudo ---*/

/*--- Navbar Titulos ---*/
.nav-enlaces {
    width: 64%;
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 10px;
    height: 32px;
}

.nav-enlaces p {
    font-size: 17px;
    font-family: Roboto-medium;
}

.nav-categoria{
    display: flex;
    flex-direction: column;
    border-radius: 10px 10px 0px 0px;
    padding: 5px 15px;
}

.nav-enlaces .active {
    border: 1px solid var(--gray-header);
    background-color: var(--gray-header);
}


/*--- fin de Navbar Titulos ---*/

/* --- Portal Transparencia ---*/
.nav-portal {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 20%;
    font-size: 14px;
}

.nav-portal-img-txt {
    display: flex;
    gap: 2px;
    align-items: center;

}
/*-- fin de portal Transparencia ---*/

/*======================= FIN NAVBAR =======================*/

/*======================= HEADER =======================*/
/* .ctn-header {
    height: 70px;
    width: 96%;
    padding: 0px 2%;
    background-color: #F6F9FC;
    display: flex;
    align-items: center;
    font-family: Roboto-Medium;
    justify-content: center;
} */
.ctn-menu{
    width: 60%;
}
.ctn-title-menu .svg-mas, .ctn-title-menu .svg-menos{
    display: none;
}
.ctn-title-menu{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ctn-title-menu .title-menu{
    width: max-content;
    font-family: Roboto-Medium;
    font-size: 17px;
}
.ctn-header {
    height: 70px;
    background-color: var(--gray-header);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Roboto-Medium;
    position: sticky;
    top: -1px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.subsubmenu-largo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.subsubmenu-largo li ul{
    width: 580px !important;
}

.subsubmenu-largo-li li{
    padding:0px 0px 0px 0px !important;
    justify-content: space-around;
}

.subsubmenu li a::before {
    content: "";
    display: inline-block;
    background-color: var(--footer);
    /* width: 4px; */
    /* height: 4px; */
    padding: 2px !important;
    margin-right: 8px; /* Ajusta el margen derecho según lo necesites */
}
.subsubmenu li a{
    display: flex;
    justify-content: center;
    align-items: center;
}

.subsubmenu li a:hover::before{
    background-color: var(--red-one);
}

.sub-abierto .adaptacion-subsubmenu-ul-li{
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
}
.ctn-header2{
    width: 100%;
    height: 80%;
    max-width: 1920px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 2%;
    box-sizing: border-box;
}

/*--- Logo BN ---*/
.header-logo {
    display: flex;
    align-items: center;
    width: 15%;
    height: 100%;
}

.header-logo-link {
    height: 100%;
}

.header-logo img {
    height: 100%;
}

/*--- fin de Logo BN ---*/

.txt-banca-2 {
    display: none;
}

/*--- Menus ---*/
.icono-menu {
    display: none;
}

.menu {
    display: flex;
    width: 52%;
    font-size: 15px;
    height: 65%;
    gap: 30px;
}

.item {
    list-style-type: none;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 5px 8px 5px 15px;
    border-radius: 16px;
    transition: all 0.3s ease-in-out;
    font-family: Roboto-Medium;
    font-size: 17px;
}
.item.solo{
    padding: 7px 15px;
}   

.item:hover {
    transition: all 0.3s ease-in-out;
    background-color: var(--gray-two);
}

.submenu {
    display: none;
    list-style-type: none;
    padding: 10px 10px 10px 15px;
    position: absolute;
    z-index: 2;
    top: 160%;
    left: 0;
    background-color: #F6F9FC;
    border-radius: 10px;
    width: 220px;
    height: max-content;
    font-size: 14px;
}

.submenu li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    height: 25px;
    line-height: 15px;
    font-size: 15px;
    /* margin: 1px 0px; */
}
.submenu li:hover, .subsubmenu li a:hover{
    color: var(--red-one);
}


.submenu li:hover svg {
    fill: var(--red-one) !important;
}


.sub-abierto {
    color: var(--red-one);
    background-color: white;
    border-radius: 10px 0px 0px 10px;
    font-family: Roboto-medium;
}

.sub-abierto svg {
    fill: var(--red-one) !important;
}

.subsubmenu {
    list-style-type: none;
    display: none;
    background-color: white;
    border-radius: 0px 10px 10px 0px;
    padding: 10px 10px 10px 25px;
    position: absolute;
    box-sizing: border-box;
    /* Cambia a 'border-box' para incluir padding en el tamaño total */
    top: 0;
    z-index: -2;
    height: 100%;
    width: 380px;
    left: 95%;
}

.subsubmenu li {
    padding: 5px 0;
}

.enlaces-linea {
    border: none;
    opacity: 60%;
    height: 0.5px;
    background-color: #D3D3D3;
}

.item svg {
    height: 24px;
    fill: var(--gray-txt);
    transition: transform 0.3s ease;
}

.abierto {
    background-color: var(--gray-two);
    color: var(--red-one);
}
.abierto .ctn-title-menu .title-menu{
    color: var(--red-one);
}

.abierto svg {
    transition: transform 0.3s ease;
    transform: rotate(180deg);
    fill: var(--red-one);
}

.item ul li svg {
    transform: rotate(0deg);
    fill: var(--gray-txt);
    width: 17px;
}

/*--- fin de Menus ---*/


/*--- Header Icono Buscar ---*/
.header-buscar {
    margin: 0px 2.5%;
    width: 6%;
    height: 65%;
    display: flex;
    padding: 0px 10px;
    box-sizing: border-box;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.header-buscar p {
    font-size: 15px;
    font-family: Roboto-medium;
}

.header-buscar:hover {
    transition: all 0.3s ease-in-out;
    background-color: var(--gray-two);
}

.buscar-activo {
    background-color: var(--gray-two);
}

/*--- FIN - Header Icono Buscar ---*/

/*--- Header Botones ---*/
.header-btn {
    width: 28%;
    height: 65%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.btn-pagalo {
    width: 28%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 0.5px solid var(--gray-txt); */
    box-shadow:  0 0 6px #C5CDDA;
    background-color: #C00000;
    border-radius: 16px;
    padding: 0px 10px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.btn-pagalo img{
    transition: all 0.3s ease-in-out;
    height: 80%;
}


.btn-pagalo:hover{
    background-color: #CB060F;
    transition: all 0.3s ease-in-out;
}

.btn-banca {
    width: 47%;
    height: 100%;
    background-color: #BA1400;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    padding: 0px 10px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    box-shadow: 0 0 8px #C5CDDA;
}

.btn-banca p {
    color: white;
    font-size: 17px;
    font-family: Roboto-medium;
}

.btn-banca:hover {
    transition: all 0.3s ease-in-out;
    background-color: var(--red-one);
}

/*--- Fin de Header Botones ---*/

/*======================= FIN HEADER =======================*/

/*======================= BUSCAR =======================*/
.ctn-buscar {
    height: 40px;
    width: 100%;
    background-color: var(--gray-two);
    display: flex;
    position: sticky;
    z-index: 3;
    top: 69px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.buscar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96%;
    margin: 0px 2%;
}

.input-btn {
    display: flex;
    width: 99%;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.buscador {
    display: flex;
    border: 1px solid #C5CDDA;
    border-radius: 10px;
    width: 50%;
    align-items: center;
    background-color: white;
}

.buscador input {
    border: none;
    width: 100%;
    border-radius: 10px;
    font-size: 16px;
    padding: 5px 0px;
    font-family: Roboto-regular;
}

input:focus {
    outline: none;
}

.btn-buscar {
    background-color: var(--gray-three);
    border-radius: 10px;
    padding: 5px 10px;
    box-shadow: 1px 1px 1px #7D7F82;
    transition: all 0.3s ease-in-out;
}

.btn-buscar:hover {
    cursor: pointer;
    background-color: var(--red-one);
    transition: all 0.3s ease-in-out;
    transform: scale(1.1);
}

.btn-buscar:hover p {
    color: white;
}

.buscador-cerrar {
    width: 1%;
    cursor: pointer;
}

/* .img-cerrar {
    display: flex;
} */
/*======================= FIN BUSCAR =======================*/

/*======================= BANNER PQ (PEQUEÑO)=======================*/
.ctn-banner-pq {
    height: 300px;
    background: linear-gradient(90deg, var(--red-two) 25%, var(--red-one) 73%);
}
/* .slider-txt-title-pq {
    font-size: 28px;
    color: #FFD147;
    font-family: Roboto-Bold;
} */

.slider-txt-title-pq {
    font-size: 28px;
    color: white;
    font-family: aalto-Bold;
}

/* .slider-txt-sub-pq p {
    color: white;
    font-size: 20px;
    font-family: Roboto-Medium;
} */
.slider-txt-sub-pq p {
    color: white;
    font-size: 20px;
    font-family: aalto-Medium;
}

/* ---- BANNER BOTON ---- */
/* .slider-btn-pq {
    width: 120px;
    border: none;
    border-radius: 10px;
    padding: 7px;
    background-color: #FFD147;
    color: var(--gray-txt);
    font-size: 16px;
    font-family: Roboto-Medium;
} */

.slider-btn-pq {
    width: 120px;
    border: none;
    border-radius: 10px;
    padding: 7px;
    background-color: #FFD147;
    color: var(--gray-txt);
    font-size: 16px;
    font-family: aalto-Medium;
}
/*======================= BANNER PQ (PEQUEÑO) =======================*/

/*======================= PRODUCTOS =======================*/
.ctn-all-items{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* overflow: hidden; */
    /* position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 5%;
    gap: 20px; */
}
.ctn-productos {
    width: 100%;
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.all-productos {
    position: relative;
    overflow: hidden;
    max-width: 1920px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 5%;
    gap: 20px;
}

/* Titulo de producto */
.productos-txt {
    font-size: 26px;
}
.productos-txt p {
    font-family: Roboto-medium;
}
/*fin de Titulo de producto */

.ctn-productos-items{
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    max-width: 1160px;
    width: 1094px;
    padding: 15px 0;
}
/*cuadro de producto */
.ctn-all-items .ctn-productos-items .productos-items:first-child{
    margin-left: 10px;
}
.productos-items {/* productos grupales */
    position: relative;
    display: flex;
    left: 0;
}

.productos { /* productos individuales */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    width: 160px;
    height: 160px;
    border-radius: 10px;
    border: 0.5px solid #DEE3EA;
    box-shadow: 0px 0px 6px #DEE3EA;
    transition: all 150ms ease-in;
    font-size: 15px;
    margin: 0 20px 0 0;
}

/* productos texto*/
.productos .txt {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    width: 97%;
    height: 25%;
}
.productos .txt p {
    font-family: Roboto-medium;
}

.productos:hover p {
    color: #E11E00;
}
/* productos texto */


/* productos cuadro */
.productos:hover {
    border-color: #E11E00;
    cursor: pointer;
    transform: scale(1.05);
}
/* productos cuadro */

/* productos imagen */
.productos .img {
    display: flex;
    padding: 5%;
    justify-content: center;
    width: 90%;
    height: 60%;
}
/* productos imagen */

/*cuadro de producto */
.prev-btn, .next-btn{
    background:white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border: 2px solid #E11E00;
    border-radius: 50%;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: center;
    fill: #E11E00;
    display: none;
}

.prev-btn {
    transform: translateY(-50%) rotate(180deg);
    /* left: 2%; */
    left: 0px;
}

.next-btn{
    transform: translateY(-50%);
    /* right: 2%; */
    right: 0px;
}

/*======================= FIN PRODUCTOS =======================*/


/* VER MAS */
.ctn-vermas {
    display: flex;
    align-items: center;
}

.ctn-vermas svg {
    height: 20px;
    fill: var(--gray-txt);
    transition: all 0.3s ease-in-out;
}

.ver-mas {
    font-size: 16px;
    transition: all 0.3s ease-in-out;
}

.ctn-vermas:hover svg {
    transition: all 0.3s ease-in-out;
    fill: var(--red-one);
}

.ctn-vermas:hover .ver-mas {
    transition: all 0.3s ease-in-out;
    color: var(--red-one);
}
/* FIN DE VER MAS */

/* BNbeneficios e Inclusión financiera */
.ctn-items-div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 50px 0 0 0 ;
}
.ctn-items-div .title{
    font: 24px roboto-medium;
    width: 100%;
}

.ctn-items{
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1366px;
    gap: 50px;
    padding: 0px 5%;
    box-sizing: border-box;
}

.items-div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 47%;
}

.div-item{
    /* display: grid;
    grid-template-columns: repeat(2, 1fr); */
    display: flex;
    align-items: center;
    width: 100%;
    height: 200px;
    overflow: hidden;
    /* background: linear-gradient(90deg, var(--red-two) 25%, var(--red-one) 73%); */
    background: linear-gradient(180deg, var(--red-two) 25%, var(--red-one) 75%);
    transition: all 0.3s ease-in-out;
    border-radius: 12px;
    box-shadow: 0 0 8px #C5CDDA;
}

.div-item:hover img,.div-item:hover .ctn-item-actual-txt {
    transition: all 0.3s ease-in-out;
    /* transform: scale(1.01); */
}
.div-item .ctn-title{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    width: 100%;
}
.div-item .ctn-title p{
    color: white;
    font: 20px roboto-medium;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.ctn-item-actual-txt, .ctn-item-actual-img{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.ctn-item-actual-txt{
    padding: 0 0 0 20px;
    width: 45%;
}
.ctn-item-actual-img{
    justify-content: end;
    width: 55%;
    height: 100%;
}
.ctn-item-actual-img img{
    object-fit: cover;
    height: 100%;
}
.ctn-item-actual-txt p{
    font: 18px roboto-medium;
    color: white;
}
.div-item .ctn-title .title-beneficios{
    color: var(--red-one); 
    font: 24px roboto-bold !important; 
    /* text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5); */
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.5);
}

.div-item .new-img-beneficios{
    user-select: none !important;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    filter: brightness(0.7);
}
/* Fin de BNbeneficios e Inclusión financiera  */

.ctn-countdown{
    display: flex;
    /* justify-content: center; */
    justify-content: start;
    align-items: center;
    gap: 15px;
    width: 100%;
}
.ctn-countdown p{
    color: white;
    font: 18px roboto-bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
#countdown .time-section .time-label,#countdown .time-section .time-number{
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
#countdown .time-section .time-label{
    font: 16px roboto-bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
#countdown .time-section .time-number{
    font: 23px roboto-bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.ctn-countdown #countdown{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    gap: 5px;
}
.ctn-countdown #countdown .puntos-dobles{
    font: 24px roboto-bold;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/*======================= BENEFICIOS =======================*/

.ctn-beneficios {
    display: flex;
    width: 100%;
    align-items: center;
    padding-top: 40px;
    justify-content: center;
}

.beneficios {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1920px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 5%;
    gap: 20px;
}

/* titulo de beneficios */
.beneficios-txt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px
}

.beneficios-txt p {
    font-family: Roboto-medium;
}
/* fin de titulo de beneficios */

/* imagenes de beneficios */
.beneficios-img {
    display: flex;
    justify-content: space-between;
    gap: 3%;
}

.beneficios-img .img {
    box-shadow: 0px 0px 8px #C5CDDA;
    border-radius: 15px;
    transition: all 0.3s ease-in;
    cursor: pointer;
    /* width: 21%; */ /* cambio */
    width: 240px;
}

.beneficios-img .img:hover {
    transform: scale(1.05);
}

.beneficios-img .img img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}
/* fin de imagenes de beneficios */
/*======================= FIN DE BENEFICIOS =======================*/



/*======================= FIN TODAS LAS NOTICIAS =======================*/

/*======================= Enlaces =======================*/
.pie-pagina {
    background-color: var(--pie-pagina);
    display: flex;
    width: 100%;
    justify-content: center;
}

.pie-pagina-ctn{
    width: 100%;
    display: flex;
    max-width: 1366px;
    box-sizing: border-box;
    padding: 30px 5%;
    gap: 5%;
}

.pp-txt {
    display: flex;
    width: 65%;
    gap: 10px;
    justify-content: space-between;
}

.pie-pagina .pp-title {
    font-family: Roboto-medium;
    font-size: 20px;
}

.nosotros,
.informacion,
.atencion {
    width: 230px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pp-txt-title svg {
    display: none;
    fill: var(--gray-txt);
    width: 24px;
    transition: transform 0.3s ease;
}

.nosotros-enlaces,
.informacion-enlaces,
.atc-presencial-enlaces,
.atc-cliente-enlaces {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
}
.pp-txt-enlaces a{
    width: fit-content;
}

.pp-enlaces:hover {
    color: var(--red-one);
    text-decoration: underline;
}


.atc-presencial,
.atc-cliente {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.servicio {
    width: 30%;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.svc-cliente {
    width: 84%;
    padding: 3% 8%;
    border-radius: 10px;
    
    gap: 8px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0px 0px 6px #C5CDDA;
}

.svc-cliente-title {
    height: 20%;
    text-align: center;
    font-size: 20px;
}

.svc-cliente-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50%;
    font-size: 15px;
    gap: 3px;
}

.libro-reclamacion {
    margin: 4% 0px;
    height: 16%;
    display: flex;
    align-items: center;
    font-size: 16px;
    gap: 5px;
}

.libro-reclamacion:hover p{
    color: var(--red-one);
}

.libro-reclamacion img {
    height: 100%;
}

.libro-reclamacion p {
    font-family: Roboto-medium;
}

.redes-sociales {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    height: 30%;
    width: 94%;
    margin: 0px 3%;
}

.redes-sociales-icons {
    display: flex;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
}

.iconos-redes-sociales {
    height: 30px;
    width: 30px;
    padding: 5px;
    border: 1px solid #8b8b8b;
    border-radius: 50%;
    transition: all 0.3s ease-in;
}

.redes-sociales-icons .iconos-redes-sociales img {
    /*hacemos que use el 100% del espacio del div de "iconos-redes-sociales"*/
    padding: 15%;
    height: 70%;
    width: 70%;
}

.iconos-redes-sociales:hover {
    background-color: var(--red-one);
    border-color: transparent;
}

.iconos-redes-sociales:hover img {
    /*para que la imagen se vuelva blanco*/
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(318deg) brightness(100%) contrast(101%);
}

/*======================= fin de Enlaces =======================*/

/* FOOTER */
footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: var(--footer) !important;
}
.footer-ctn{
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 2% 3%;
    max-width: 1920px;
    justify-content: space-between;
}

footer p {
    font-family: Roboto-regular;
    font-size: 13px;
    line-height: 18px;
    color: white;
}

footer .f-title {
    font-family: Roboto-medium;
    font-size: 14px;
    margin-bottom: 10px;
}

.f-c2 {
    display: flex;
    flex-direction: column;
    text-align: end;
}

.f-c2 a,.f-c1 a{
    font-family: roboto-bold;
    color: white;
    font-size: 14px;
}

.f-c2 a:hover,.f-c1 a:hover{
    text-decoration: underline;
}
.ocultar-linea {
    display: none;
}


/* probando menu */

.menu-cerrar{
    display: none;
}

.overlay {
    display: none;
    position: fixed;
    /* position: absolute; */
    overflow-y: auto;
    top: 58px;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    background-color: white;
    z-index: 5;
}

.menu-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background-color: #fff;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); */
}

.sb-rsv-solo{
    padding: 0px !important;
}


.ctn-all-screen{
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
}


/* =========== BTN SUBMENU =========== */

.btn-submenu{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-size: 15px;
    cursor: pointer;
    color: var(--gray-txt);
}

.btn-submenu:hover{
    color: var(--red-one);
}

.sub-abierto .btn-submenu{
    color: var(--red-one) !important;
    font-family: roboto-medium !important;
}

.mw-1366{
    max-width: 1366px !important;
}
.fs-12{
    font-size: 12px !important;
}
.fs-14{
    font-size: 14px !important;
}
.r-one{
    color: var(--red-one) !important;
}
.r-two{
    color: var(--red-two) !important;
}
.r-three{
    color: var(--red-three) !important;
}
.lh-16{
 line-height: 16px !important;
}
.lh-14{
 line-height: 14px !important;
}
.pl-10{
    padding-left: 10px;
}
.ml-0{
    margin-left: 0 !important;
}
/* ================================= */



/* DERECHOS DE AUTOR */
.derechos-a{
    position: relative;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px;
    text-align: center;
    background: #414142;
    color: white;
    font-family: 'Roboto-Medium';
    font-size: 12px;
}
/* FIN DE DERECHOS DE AUTOR */



.nivel-1-number{
    list-style-type: decimal;
}
.nivel-1-number li::marker{
    font-family: roboto-bold;
}
.nivel-1-number li{
    padding: 5px 0;
}

.span-svg-mid{
    display: flex;
    align-items: center;
}

.numero > li{
    list-style-type: decimal !important;
}

.letra > li{
    list-style-type: lower-alpha !important;
}
.romano > li {
    list-style-type: lower-roman !important;
}
.romano-ma > li{
    list-style-type: upper-roman !important;
}

.numero li::marker, .letra li::marker, .romano li::marker, .romano-ma li::marker{
    font-size: 18px;
    font-family: roboto-bold;
}

/* SCROLLBAR */
/* ::-webkit-scrollbar {
    width: 8px; Ancho del scrollbar
}

::-webkit-scrollbar-thumb {
    background-color:var(--red-one);
    border-radius: 6px; Radio de borde del scrollbar
    cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--red-two); Color del scrollbar al pasar el mouse sobre él
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    border-radius: 6px;
} */