html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/********Experimento de las cookies*******/

.mainFog{opacity: 0.5;pointer-events:none;}
.noFog{opacity: 1; pointer-events:all}
.decorationCookie{
    text-decoration: underline;
    cursor: pointer
}
.decorationCookie:hover{
    color:#028484 !important
}

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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap');

.selectNone{user-select: none;
overflow-x: hidden;
max-width: 100%;}

.logoWhatsapp{
    width:90px;
    cursor: pointer;
    position: fixed;
    bottom: 0;
    right: 0;
}

@media only screen and (max-width:1350px){
    .logoWhatsapp{
        width:85px;
    }
}

.logoWhatsapp:hover{
    opacity: 0.8;
}

@media only screen and (max-width:991px){
    .logoWhatsapp{
        width:75px;
        margin-bottom: 10px;
        margin-right: 10px;
    }
}

.inter{font-family: inter,sans-serif}

.frekostLogo{
    display:table;
    margin:0 auto;
    max-width:184px
}

.logoCAC{
    max-width:170px;
    cursor: pointer;
}
.fondoCAC{
    background-color: #028484 ;
}
.fondoCACbis{
    background-color: #028484 ;
    margin-top:0px !important
} /*Borrar el margin top*/ /*&&&&*/

.fondoCAC:hover{
    background-color: #028484a7;
}
.fondoCAC2{
    background-color: #002E5D;
}
.fondoBlanco{
    background-color: white;
}
.fondoGris{
    background-color: #F9FAFB ;
}
.colorCAC{
    color: #028484;
}
.colorCAC2{
    color: #002E5D;
}
.colorBlanco{
    color:white !important
}

.center-text{
    display:table;
    margin:0 auto;
}

/* ESTILOS DEL HEADER*/


.hypervinculo{
    text-decoration: underline;
    cursor:pointer}

.header{
    z-index: 4;
    height:80px;
    background-color: white;
    box-shadow: 0 0 0px 0px lightgray;
    border-bottom:solid 1px lightgray;
    max-width:100%;
    position:fixed;
    top:0px;
    width:100%}

    /*top:52px*/ /*&&&&*/

@media only screen and (max-width:991px){
    .header{
        height:auto;
        background-color: white;
        box-shadow: 0 0 0px 0px lightgray;
        max-width:100%}

}


.botonHeader{
    color:white;
    border: solid 0px;
    width:221px;
    border-radius: 8px;
}
.botonHeader2{
    color:white;
    border: solid 0px;
    width:95%;
    margin-left:-1%;
    border-radius: 8px;
}

.letraHeader{
    font-size: 16px;
    color:#667085;
    font-weight: 500;
    cursor: pointer;
}

@media only screen and (max-width:1140px){
    .botonHeader{
    color:white;
    border: solid 0px;
    width:200px;
    border-radius: 8px;
    }
}

.positionLetras{
    margin-left: 30%;
    gap:32px
}

.positionLogo{
    position:relative;
    left: 5%;
}

@media only screen and (max-width:1800px){
    .positionLetras{
    margin-left: 20%;
    }
}

@media only screen and (max-width:1550px){
    .positionLetras{
    margin-left: 10%;
    }
}

@media only screen and (max-width:1350px){
    .positionLetras{
    margin-left: 15%;
    gap:20px
    }
}

@media only screen and (max-width:1280px){
    .positionLetras{
    margin-left: 10%;
    gap:10px
    }
}

@media only screen and (max-width:1140px){
    .positionLetras{
    margin-left: 10%;
    gap:2px
    }
    .letraHeader{
        font-size: 13px;
    }
}

.dropdown-menu{
    width:336px
}

.dropdown-item:focus, .dropdown-item:hover {
    color: var(--bs-dropdown-link-hover-color);
    background-color: transparent
}

.dropdown-subitem{
    margin-top:-10px;
    margin-left:64px;
    color:#667085;
    font-size: 12px;
    line-height: 18px !important;
    font-weight: 400;
    max-width:248px !important;
    

}

.dropdown-superitem{
    margin-left:64px;
    color:#101828;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    justify-content: center;
    cursor:pointer
}

.dropdown-superitem:hover{
    color:#002E5D;
    font-weight: 600;
}

.imagenRayito{
    position:absolute;
    top:9%;
    left:7%}
.imagenTelefono{
    position:absolute;
    top:38%;
    left:7%}
.imagenPregunta{
    position:absolute; 
    top:68%;
    left:7%}
.imagenDivorcio{
    position:absolute;
    top:8%;
    left:7%}
.imagenHerencia{
    position:absolute;
    top:30%;
    left:7%}
.imagenTarjeta{
    position:absolute; 
    top:53%;
    left:7%}
.imagenClausula{
    position:absolute; 
    top:75%;
    left:7%}
.support-text{
    display: none
}
.apañoHeader{display: none;}

.header2{background-color: #EAECF0;
        height: 52px;
    display: none;}

.textoHeader2{
    width:100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    color: #475467;


}

@media only screen and (max-width:1200px){
    .textoHeader2{
        width:100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        color: #475467;
    
    
    }
    

}
   
    @media only screen and (max-width:991px){

        .letraHeader{
            margin-bottom: 0px;
            margin-top: 20px;
            font-size: 15px;
        }

        .header2{
            display: none;}
        .header{
            position: fixed;
            top:0%;
            width:100%}
        .apañoHeader{
            display: block;
            width:200%;
            margin-left:-20%
        }
        .support-text{
            display: block;
        }
        .support-parrafo{
            font-weight: 500;
            font-size: 13px;
            line-height: 24px;
            width:80%;
            color: #667085;
        }
        .botonHeader{display: none;}
        .dropdown-superitem{
            margin-left: 30px;
        }
        .dropdown-menu{
            width:100%;
            border:0px
        }
        .dropdown-subitem{display: none;}

        .imagenRayito{
            position:absolute;
            top:40%;
            left:0%}
        .imagenTelefono{
            position:absolute;
            top:59%;
            left:0%}
        .imagenPregunta{
            position:absolute; 
            top:78%;
            left:0%}
        .imagenDivorcio{
            position:absolute;
            top:34%;
            left:0%}
        .imagenHerencia{
            position:absolute;
            top:49%;
            left:0%}
        .imagenTarjeta{
            position:absolute; 
            top:67%;
            left:0%}
        .imagenClausula{
            position:absolute; 
            top:81.5%;
            left:0%}
    }

    @media only screen and (max-width:367px){
        .imagenDivorcio{
            position:absolute;
            top:31%;
            left:0%}
        .imagenHerencia{
            position:absolute;
            top:45.5%;
            left:0%}
        .imagenTarjeta{
            position:absolute; 
            top:61%;
            left:0%}
        .imagenClausula{
            position:absolute; 
            top:75%;
            left:0%}

    }

/* ESTILOS DEL MAIN*/


.boton-modal{
    width:90%
}

.colorNegro{
    color: #101828;
}


/********************************Experimento del footer************************************/

.destrozoFooter{
    width:84.44%;
    margin:0 auto;
    margin-top:40px
}

.negrita{
    font-weight: bold;
}

.footer{
    padding-bottom: 48px;

}

.margenFooter0{
    padding-top: 64px;
}

.textoFooter1{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #EAECF0;
}

.textoFooter2{
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.textoFooter3{
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}
.textoFooter3:hover{
    opacity: 0.6;
}

.textoFooter4{
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.textoFooter5{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #98A2B3;
    margin-top:32px
}

.margenFooter1{
    margin-left:7.777777%;
    width: 38.54%
}

.margenFooter2{
    width: 9.375%
}



.margenFooter0_1{
    margin-top: 34.82px;
}
.margenFooter0_2{
    margin-top:32px
}

.fantasiaFooter{
    border-top: 2px solid #98A2B3;
    width: 84.44%;
    margin-top: 64px;
}
.loguitoFooter1{
    float: right;
    cursor: pointer;
}
.loguitoFooter2{
    float:right;
    margin-right:24px;
    cursor: pointer;
}
.loguitoFooter1small{
    display: none;
    cursor: pointer;
}
.loguitoFooter2small{
    display: none;
    cursor: pointer;
}

@media only screen and (max-width:991px){
    .textoFooter5{
        font-size: 15px;
    }
    .margenFooter1{
        margin-left:0%;
        width: 82.9333333%
    }
    .margenFooter2{
        width: 36%
    }
    .margenFooter0{
        margin-left: 8.55%;
    }
    .margenFooter0_2{
        margin-bottom:64px
    }
    .textoFooter5{
        width:55.2%
    }

    .loguitoFooter1{
        display: none;
    }
    .loguitoFooter2{
        display:none
    }
    .loguitoFooter1small{
        display: block;
        float:right;
        margin-top:-40px
    }
    .loguitoFooter2small{
        display: block;
        float: right;
        margin-right:48px;
        margin-top:-40px
    }
}

@media only screen and (max-width:490px){
    .margenFooter2{
        width: 46%
    }
}




/***************Experimento del carrusel***********************/

.colorAux{
    color:#667085
}

.botonCarrusel{
    width:56px;
    height:56px;
    border-radius: 28px;
    border:solid 1px lightgray;
    background-color: white;

}

.margenAux4{
    margin-left:16px
}
.estrellitas{
    width:116px;
    margin-left:15px;
    margin-top: 24px;
}

.carousel-inner{
    width:97%
}
.cards-wrapper {
    display: flex;
    justify-content: space-between;
    margin-left:15px;
    margin-left: 15px;
    margin-bottom: 30px;
  }
.custom_card-body{
    margin-left:15px;
    width:91.466666%
}

  .custom_card {
    width: 312px;
    height: 276px;

    
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Shadow/xl */
    
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  }


  .tresOpis{
    display: none;
  }
  .dosOpis{
    display: none;
  }
  .unoOpis{
    display: none;
  }


  @media only screen and (max-width:1430px){
    .cuatroOpis{display: none;}
    .tresOpis{display:block}
}

@media only screen and (max-width:1070px){
    .tresOpis{display: none;}
    .dosOpis{display:block}
}

@media only screen and (max-width:710px){
    .dosOpis{display: none;}
    .unoOpis{display:block}
}

/*************Experimento del acordeón********/ 

.accordion{
    width:53.3333333%
}

.margen16_3{
    margin-top: 64px;
}

@media only screen and (max-width:991px){
    .accordion{
        width:100%
    }
    .margen16_3{
        margin-top: 48px;
    }
}

.accordion {
    --bs-accordion-active-color: black;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0;
 
}
/*
--bs-accordion-btn-icon: none;
--bs-accordion-btn-active-icon:none
*/

.apaño2 {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.desaparece{
    display: none !important;
}

/*en donde esta esta linea: (AQUICOLOCAELCOLOR) tienen que colocar el color en haxadecimal sin el #*/
 .accordion-button:is(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 7V15M7 11H15M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");   
    }
/*/ejemplo de como colocar en color blanco la flecha*/
    .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 11H15M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    }

.accordion-button{
    height:84px
}

.accordion{
    border-top: solid 1px #EAECF0;
}


/********************Experimento cápsula**************************/

.margen102{
    padding-top: 48px !important;
    padding-bottom: 48px !important;

}

.apaño100{
    width:84.44444444%;
    height: 218px;
    border-radius: 24px;
    margin: 0 auto;
}



.milagro100{
    background-image: url('./familia_ahorrando_con_CAC.svg');
    background-size: cover; /* Ajustar la imagen al ancho y alto del div */
    background-repeat: no-repeat; /* Evitar la repetición de la imagen */
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}


.texto102{
    margin-left:4%;
    font-weight: 500;
    font-size: 36px;
    line-height: 44px;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    width:90%
}

@media only screen and (max-width:1200px){
    .texto102{
        font-size: 30px;
        line-height: 35px;
    }
}

@media only screen and (max-width:800px){
    .margen102{
        padding-top: 0px !important;
        padding-bottom: 48px !important;
    
    }
    .texto102{
        font-size: 25px;
        line-height: 30px;
    }
    .milagro100{
        background-image: url('./familia_ahorrando_con_CAC4.png');
    }
}

@media only screen and (max-width:600px){
    .texto102{
        margin-left:0%;
        font-size: 20px;
        line-height: 25px;
    }
    .milagro100{
        background-image: url('familia_ahorrando_con_CAC2.png');
    }
}

@media only screen and (max-width:450px){
    .texto102{
        margin-left:0%;
        font-size: 16px;
        line-height: 21px;
    }
}

@media only screen and (max-width:400px){
    .milagro100{
        background-image: url('familia_ahorrando_con_CAC3.png');
    }
}


@media only screen and (max-width:991px){
.apaño100{
    width:91.466666666%
}
}




/*******Icono en placeholder***********/

.milagroMail{
    position: absolute;
    margin-top: 7px;
    margin-left: 12px;
    color: #999
}

.asterisco{
    color:red
}

/*******Letras de las opiniones***********/ 
.card-title{
    margin-top:8px;
    font-size: 17px;
    margin-bottom:8px;
}
.card-text{
    font-size: 12.5px;}


/*******************Experimento de las noticias**************************/

.imagenSecundaria{
    width:84.44444%;
    margin-top:48px;
    margin-bottom: 48px;
}

.margenNoti1{
    margin-top:64px !important
}
.textoNoti1{
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}
.margenNoti2{
    margin-top:12px !important
}
.textoNoti2{
    font-weight: 600;
    font-size: 48px;
    line-height: 60px;
    text-align: center;
    letter-spacing: -0.02em;
    width:66.66666666%
}
.margenNoti3{
    margin-top:24px !important
}
.textoNoti3{
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #667085;
    width:66.66666666%
}
.margenNoti4{
    margin-top:40px !important
}
.margenNoti5{
    margin-top:96px !important;
    margin-left:7.777777%;
    padding-bottom: 90px;
    border-bottom: solid 1px #EAECF0;
}

.textoNoti4{
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #667085;
    width:84.44444%
}
.margenNoti6_bis{
    margin-left:7.777777%;
    margin-top:48px
}

.margenNoti6{
    margin-left:7.777777%;
    margin-top:48px
}
.margenNoti7{
    margin-left:7.777777%;
    margin-top:16px
    
}

.textoItemNoti{
    width:84.444%;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}
.textoNoti{
    width:84.444%;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #667085;
}

.margenNoti8{
    width:84.444%;
    margin:0 auto;
    border-top: solid 1px #EAECF0;
    padding-top:34px
}

.apañoNoti1{
    margin-left:5%;
    margin-top:5px;
    margin-bottom: 0px;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #101828;
}
.apañoNoti2{
    margin-top:0px;
    margin-left:5%;
    margin-bottom: 0px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #667085;
}

@media only screen and (max-width:1300px){
    .apañoNoti1{
        margin-left:10%
    }
    .apañoNoti2{
        margin-left:10%
    }
}

@media only screen and (max-width:900px){
    .apañoNoti1{
        margin-left:15%
    }
    .apañoNoti2{
        margin-left:15%;
        font-size: 12px;
    }
}

@media only screen and (max-width:700px){
    .apañoNoti1{
        margin-left:20%
    }
    .apañoNoti2{
        margin-left:20%;
        
    }
    .textoNoti2{
        width:84.44444444%;
        font-size: 24px;
        line-height: 30px;
    }
    .textoNoti3{
        width:84.44444444%;
        font-size: 20px;
        line-height: 32px;
    }
    .margenNoti5{
        margin-top: 40px !important;
    }
}

@media only screen and (max-width:681px){
    .apañoNoti1{
        margin-left:0%;
        font-size: 16px;
    }
    .apañoNoti2{
        margin-left:0%;
        line-height: 20px;
        
    }
}

.apañoNoti3{
    text-align: right;
}

.botonNoti{
    cursor: pointer;
}
.botonNoti:hover{
    opacity: 0.7;
}

.quitar{
    margin-bottom: 96px !important;
}


/*********************** Estilos de las cookies**************************/

.cookie-container {
	display: flex;
	align-content: center;
	align-items: center;
	padding: 1rem 2rem;
	background: var(--background);
	color: var(--white-text);
	position: fixed;
	bottom:0;
	font-size: 1rem;
	gap: 2rem;
	opacity: 1 !important;
	visibility: visible;
	flex-wrap: wrap;
    z-index:1;
    background-color: #002E5D !important;
}

.cookie-container.hide {
	opacity: 0;
	visibility: hidden;
}

.cookie-container a {
	color: var(--white-color);
}

.cookie-container a:hover {
	color: var(--hover-text);
}

.cookie-container .cookie-text {
	flex: 8 768px;
}

.cookie-container .agree {
	flex: 1 150px;
	text-align: center;
}

.agree{border-radius: 8px !important;}

.agree button {
	background: var(--button-background);
	color: var(--button-text);
	border: none;
	padding: 0.4rem 1.2rem;
	cursor: pointer;
	border-radius: 20px !important;
	font-size: 1rem;
}

.agree button:hover {
	background: var(--button-background-hover);
		color: var(--white-text);
}




/*******************SEO*****************/

.customh1{
    font-size: 48px !important;
    line-height: 60px !important;
}

.customh2{
font-size: 35px !important;
line-height: 40px !important;
}

.customh3{
    font-size: 25px !important;
}

.position-relative{
    position: relative !important;
}

.centraColumna{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:100%
}

.textoPosicionamiento{
    width:60%;
    margin:0 auto;
    margin-bottom:24px !important;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #667085;
}

.textoArt{
    width:80%;
    margin:0 auto;
    margin-bottom:24px !important;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color:#667085;
}

.tituloArt{
    width:90%;
    margin:0 auto;
    margin-bottom:24px !important;
    font-weight: 600;
    color:black;
    text-align: center;
}

.tituloArth3{
    margin-bottom:24px !important;
    font-weight: 600;
    color:black;
    position: relative;
    left:60%;
    transform: translateX(-50%);
}

.margenArt{margin-top: 64px !important;}

.imagenArt{width:100%}

@media only screen and (max-width:991px){
    .margenArt{margin-top: 0px !important;}
    .margenArt2{margin-top: 24px !important;}
    .customh1{
        font-size: 36px !important;
        line-height: 44px !important;
    }
    .imagenArt{
        position: relative;
        left:50%;
        transform: translateX(-50%);
        width:90%
    }
    .centraColumna{
        position: relative;
        top:0%;
        left: 0%;
        transform: translate(0%,0%);
        width:100%
    }
    .textoPosicionamiento{
        width:85%;
        margin:0 auto;
        margin-bottom:24px !important;
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
        color: #667085;
    }
    .textoArt{
        width:90%;
        margin:0 auto;
        margin-bottom:24px !important;
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
        color: #667085;
    }
    .tituloArt{
        width:90%;
        margin:0 auto;
        margin-bottom:24px !important;
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        color: black
    }
    .tituloArth3{
        width:90%;
        margin:0 auto;
        margin-bottom:24px !important;
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        color: black;
        left:0%;
        transform: translateX(0%);
    }
}