/* CSS Document */


  @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


:root{
	--morado: #440099;
	--rosa:#EA468E;
	--rosa50:#EE6BA5;
	--verdeLima:#A7D500;
	--verdeCRA:#004C45;
	--neon:#D2FF00;
	--verdeOscuro:#004b3a;
	--grey:#313131;
	--grisito: #f1f1f1;
	--turquesa: #41A399;
	--verdeRuralvia: #00685d;
	--amarilloCRA:#FFCD00;
}

body{
	font-family: 'Plus Jakarta Sans', sans-serif;
	background-color: #FFF;
	font-size: 16px;
	font-weight: 500;
}
 


/*
modal-cookes

*/

/*nav bar*/

.custom-container{
	max-width: 700px;
}


.custom-container-1000{
	max-width: 1000px;
}

.custom-container-800{
	max-width: 800px;
}

.custom-container-850{
	max-width: 850px;
}

.custom-container-900{
	max-width: 900px;
}

.custom-container-700{
	max-width: 700px;
}


.custom-container-500{
	max-width: 500px;
}


.bg-light {
    background-color: var(--morado) !important;
}


.nav-link{
	color:var(--neon);
	font-weight: 500;
	font-size: 0.9rem;
}

.nav-link:focus, .nav-link:hover {
    color: #FFF;
}


@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}


.listaIconosCabecera {
    list-style-type: none;
    margin: 0;
}


.listaIconosCabecera li {
    display: inline;
    margin-right: calc(15px / 2);
    margin-left: calc(15px / 2);
	color:var(--verdeLima);
	font-size: 25px;
}


.listaIconosCabecera a{
	color:var(--verdeLima);
}

.listaIconosCabecera a:hover{
	color:#FFF;
}


/*fin nav bar*/



/*indicadores*/

.riesgo{
	font-size: 34px;
	font-weight: 700;
	margin-bottom: 5px;
}
#indicadores{
	font-size: 10px;
	max-width: 800px;
    margin: 0 auto;
}

#indicadores .row{
	/*max-width: 800px;*/
}

#indicadores .uno{
	color:#BDBDBD;
}


/*daleAlPlay*/
#daleAlPlay{
	max-height: 45vh;
	background-color: #000;
}

#videoModal .modal-content{
	background-color: transparent;
}

.btnPlay{
			border:0;
			
			background-color: transparent;
		}
	video {
    width: 100vw;
    height: 46vh;
    object-fit: cover;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
}

.dale {
	position: absolute;
	display: flex;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	align-items: center; /* Centers the content vertically within the flex container */
	flex-direction: column;
	font-size: 1.4rem;
	color:#FFF;
	font-weight: 300;
}

.dale span{
	color:var(--verdeLima);
	font-weight: 600;
}



/*sinCuentos*/

#sinCuentos {
    background-image: url(../images/banner-menores-3.jpg);
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 350px;
    color: #FFF;
	padding-bottom: 25px;
	padding-top: 15px;
}


#sinCuentos.heroPagos{
    background-image: url(../images/hero-pagos.jpg);
    background-position: top center;
    background-size: cover;
    min-height: 350px;
    color: #FFF;
	padding-bottom: 25px;
}





#sinCuentos.heroPagos h2{
background-image: url("../images/deco-rosa2.png");
    color: var(--neon);
}

#sinCuentos.heroPagos p{

    color: var(--neon);
}



#sinCuentos h2 {
    text-align: left;
    background-image: url(../images/deco-verde.png);
    background-repeat: no-repeat;
    background-position: 7% top;
    background-size: 45px auto;
    overflow: visible;
    padding-top: 40px;
    padding-left: 10%;
    font-size: 3.2rem;
    color: #FFF;
    line-height: 2.8rem;
    font-weight: 700;
}


#sinCuentos.heroPagos h1 {
    background-image: url(../images/deco-rosa2.png);
    color: var(--neon);
}
#sinCuentos h1 {
    text-align: left;
    background-image: url(../images/deco-verde.png);
    background-repeat: no-repeat;
    background-position: 7% top;
    background-size: 45px auto;
    overflow: visible;
    padding-top: 40px;
    padding-left: 10%;
    font-size: 3.2rem;
    color: #FFF;
    line-height: 2.8rem;
    font-weight: 700;
}


#sinCuentos p {
    padding-left: 10%;
    margin-top: 15px;
    font-size: 1.4rem;
    font-weight: 400;
	margin-bottom: 2rem;
}

#sinCuentos p span {
    color: var(--verdeLima);
}

#sinCuentos .btnHazte{
	margin-left: 10%;
}


#sinCuentos .btnHazte {
    color: var(--morado);
    border: 0;
    background-image: url("../images/flecha-morado.png");
    background-color: var(--neon);
}


#sinCuentos .btnHazte:hover {
    color: #FFF;
    border: 0;
    background-image: url("../images/caritaLima.png");
    background-color: var(--morado);
}



/*beneficios*/

.beneficios {
	background-color: var(--neon);
    padding-top: 50px;
	/*padding-bottom: 50px;*/
}

#beneficios .container {
	/*
    background-image: url(../images/beneficios-fondo.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: auto 80%;
	*/
}


.beneficios h2 {
    text-align: left;
    background-image: url(../images/deco-rosa2.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 40px auto;
    overflow: visible;
    padding-top: 30px;
    padding-left: 5%;
    font-size: 3rem;
    color: var(--morado);
    line-height: 2.8rem;
    font-weight: 700;
	margin-bottom: 0;
}

.titulo p {
    margin-left: 5%;
    font-size: 1rem;
    font-weight: 700;
    color: var(--rosa);
}


.contenedorBeneficios {
    display: flex;
    flex-wrap: wrap;
   /* gap: 10px;*/
    width: 100%;
	justify-content: center;
}

.contenedorBeneficios.bizum {
    display: flex;
    flex-wrap: wrap;
   /* gap: 10px;*/
    width: 100%;
}


.cuadroBeneficio {
    width: calc(33% - 5px);
    aspect-ratio: 1 / 1;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    perspective: 1000px;
    box-sizing: border-box;
	padding: 1%;
}


 @media (max-width: 768px) {
	.cuadroBeneficio {
    	width: calc(50% - 5px);
    
	}

}

 @media (max-width: 400px) {
	.flip-card-front h3 {
	    font-size: 0.8rem !important;
	}
	
	 
}


	 @media (max-width: 350px) {
	.flip-card-front h3 {
	    font-size: 0.6rem !important;
	} 
}


.flip-card2 {
    perspective: 1000px;
    height: 100%;
}


.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}


.flip-card2 .flip-card-inner .flip-card-front {
    text-align: center;
}

.flip-card-front {
    color: #000;
	padding-top: 4%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	height: 800px;
	overflow: hidden;
    background-color: var(--morado);
	border-radius: 10px;
}

.flip-card-front img{
	width: 40%;
	height: auto;
	margin-top: 10%;
}

.flip-card-front h3{
	color:var(--verdeLima)!important;
	text-transform: uppercase!important;
	font-size: 0.9rem!important;
	/*align-self: flex-end;*/
	padding: 4%!important;
	font-weight: 500!important;
	background-image: none;
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-back{
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Aligns content vertically in the middle */
	align-items: center;
	text-align: center;
	border-radius: 10px;
	
}

.flip-card-back button{
	margin-bottom: 15px;
	align-self: center;	
}


.flip-card2 .flip-card-inner .flip-card-front span {
    color: #FFF;
    font-size: 3.2rem;
    line-height: 2.8rem;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
}


.flip-card2 .flip-card-inner .flip-card-front p {
    color: #FFF;
    font-size: 1.2rem;
    line-height: 2.8rem;
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    margin-bottom: 0;
    line-height: normal;
}



.freebirdMaterialHeaderbannerSectionTriangle>polygon {
    stroke-width: 10;
}


.freebirdSolidFill {
    fill: rgb(255, 205, 0);
    stroke: rgb(255, 205, 0);
}


#cuadroBeneficio1 .flip-card-back {
    overflow: hidden;
    background-position: center center;
}


.flip-card-back {
    color: #000;
    transform: rotateY(180deg);
    text-align: center;
	background-color: var(--rosa50);
}

.flip-card-back p{
	font-size: 0.9rem !important;
	color:var(--morado) !important;
		padding: 10px !important;
	padding-top: 15px !important;
	padding-bottom: 0 !important;
	
}

 

.rotar {
    transform: rotateY(180deg);
}


.btnMasInfo{
	font-size: 0.9rem;
	color: var(--verdeLima);
    text-decoration: none;
    border: 1px solid var(--morado);
    padding: 5px 20px 5px 20px !important;
    border-radius: 20px;
    margin-left: 15px;
    margin-right: 15px;
    font-weight: normal !important;
    font-weight: 700 !important;
    background-color: var(--morado);
}


.btnMasInfo:hover {
    border-color: var(--verdeLima);
    color: var(--verdeLima) !important;
}




.btnHazteCliente {
    color: var(--verdeLima);
    text-decoration: none;
    border: 1px solid var(--morado);
    padding: 5px 40px 5px 20px !important;
    border-radius: 20px;
    margin-left: 15px;
    margin-right: 15px;
    font-size: 1.2rem !important;
    font-weight: normal !important;
    background-image: url(../images/flecha-lima.png);
    background-position: 92% center;
    background-size: 12%;
    background-repeat: no-repeat;
    font-weight: 700 !important;
    background-color: var(--morado);
}

.btnHazteCliente:hover {
    border-color: var(--verdeLima);
    color: var(--verdeLima) !important;
    background-image: url(../images/caritaLima.png);
}



.btnSaber{
	font-size: 1rem;
	color: var(--neon);
    text-decoration: none;
    border: 1px solid var(--morado);
    padding: 5px 60px 5px 30px !important;
    border-radius: 50px;
    font-weight: normal !important;
    font-weight: 700 !important;
    background-color: var(--morado);
	background-image: url(../images/flecha-lima.png);
    background-position: 95% center;
    background-size: 6%;
    background-repeat: no-repeat;
}


.btnSaber:hover {
    border-color: var(--verdeLima);
    color: var(--neon) !important;
	background-image: url(../images/caritaLima.png);
}





#modalBeneficio {
    --bs-modal-footer-border-color: var(--grisito) !important;
    z-index: 9999999999999999;
}

#modalBeneficio .modal-content {
    background-color: var(--grisito) !important;
}


#modalBeneficio.modal-body {
    border-bottom: solid 2px var(--grisito) !important;
}
.modal-body {
    border: 0;
}

.modal-content {
    border: 0;
    border-radius: 0;
}

.tituloModal h3{
	font-size: 2rem !important;
	line-height: 1.4 !important;
	background-image: url("../images/deco-lima.png") !important;
	padding-left: 4% !important;
	margin-left: -4%;
}


.beneficios-cuenta .flip-card-back p {
    font-size: 0.8rem;
	margin-bottom: 5px;
	
 }

#modalBeneficio .modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 50px;
	padding-bottom: 15px;
}


#beneficios.beneficios-cuenta{
	background-color: var(--neon);
}


#beneficios.beneficios-cuenta .titulo p{
	color:var(--rosa);
}

.beneficios-cuenta .flip-card-back .inner-back {
    margin: 0;
    flex-grow: 1; /* Allow the paragraph to grow and take up available space */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	
 }


#beneficios.beneficios-cuenta h2 {
    background-image: url("../images/deco-rosa2.png");
}



.inner-back {
    margin: 0;
    flex-grow: 1; /* Allow the paragraph to grow and take up available space */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	
 }

.beneficios-cuenta .btnMasInfo{
 }



/*contenido modal extranjero*/


.tituloElemento {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--grey);
}

.tituloElemento p {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--grey);
}

.elemento h3 {
    text-align: left;
    background-image: url(../images/deco-verde.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 40px auto;
    overflow: visible;
    padding-top: 15px;
    padding-left: 4%;
    font-size: 3rem;
    color: var(--morado);
    line-height: 3.2rem;
    font-weight: 700;
}






.contenidoElemento {
    margin-left: 0;
}



.listaTarjeta {
    list-style-type: none;
    padding-left: 25px;
    margin-top: 25px;
}

.listaTarjeta li {
    background-image: url(../images/flecha-rosa.png);
    font-size: 1rem;
    margin-bottom: 15px;
    background-repeat: no-repeat;
    background-position: 0 2px;
    padding-left: 30px;
	background-size: 20px;
}


/*--pagos--*/

#pagos{
	background-color: var(--grisito);
}

#pagos.beneficios-cuenta{
	background-color: var(--neon);
}

#pagos.beneficios-cuenta .titulo p{
	color: var(--rosa);
}

#pagos .titulo p{
	color:var(--verdeLima);
}

#pagos .flip-card-front{
	background-color: var(--rosa);
}


#pagos.beneficios-cuenta .flip-card-front{
	background-color: var(--morado);
}

#pagos .flip-card-back{
	background-color: var(--neon);
}


#pagos.beneficios-cuenta .flip-card-back{
	background-color: var(--rosa);
}


#pagos .flip-card-back p{
	color:var(--morado);
}


#pagos .flip-card-front h3 {
    color: var(--morado);
}

#pagos.beneficios-cuenta .flip-card-front h3{
	color: var(--neon);
}


#pagos .btnMasInfo{
	background-color: var(--neon);
	color:var(--morado);
}


#pagos.beneficios-cuenta  .btnMasInfo{
	background-color: var(--morado);
	color:var(--verdeLima);
}



#pagos .btnMasInfo:hover {
    background-color: var(--verdeLima);
    color: var(--morado) !important;
}


#pagos .btnSaber{
	font-size: 1.5rem;
	color: var(--morado);
    text-decoration: none;
    border: 0;
    padding: 5px 60px 5px 30px !important;
    border-radius: 50px;
    font-weight: normal !important;
    font-weight: 700 !important;
    background-color: var(--rosa);
	background-image: url("../images/flecha-morado.png");
    background-position: 92% center;
    background-size: 12%;
    background-repeat: no-repeat;
}


#pagos .btnSaber:hover {
    color: var(--morado) !important;
	background-color: var(--neon);
	background-image: url("../images/caritaMorado.png");
}



/*----ruralvia--*/

#ruralvia {
    background-color: var(--verdeOscuro);
}

#ruralvia.elemento h3 {
    background-size: 40px;
    padding-top: 25px;
}



#ruralvia.elemento .listaTarjeta {
    color: #FFF;
}

#ruralvia.elemento .listaTarjeta li {
    background-image: url(../images/flecha-verdeLima.png);
}

.btnHazteMorado {
    color: var(--neon);
    text-decoration: none;
    border: 1px solid var(--morado);
    padding: 5px 40px 5px 20px !important;
    border-radius: 20px;
    margin-left: 15px;
    margin-right: 15px;
    font-size: 1.2rem !important;
    font-weight: normal !important;
    background-image: url(../images/flecha-lima.png);
    background-position: 92% center;
    background-size: 12%;
    background-repeat: no-repeat;
    font-weight: 700 !important;
    background-color: var(--morado);
}

.btnHazteMorado:hover {
    border-color: var(--verdeLima);
    color: var(--verdeLima) !important;
    background-image: url(../images/caritaLima.png);
}

#ruralvia.elemento .btnHazteMorado {
    background-color: var(--neon);
    color: var(--verdeOscuro);
    border: 0;
    background-image: url(../images/flecha-verdeOscuro.png);
    background-size: 7%;
    margin-left: 0;
    padding: 5px 55px 5px 20px !important;
}

#ruralvia.elemento .btnHazteMorado:hover {
    background-color: var(--rosa);
	 background-image: url("../images/caritaLima.png");
	color: var(--neon) !important;
}


#ruralvia.elemento h3 img {
    max-width: 250px;
    height: auto;
    margin-left: 15px;
}

 @media (max-width: 768px) {
	.imgTelefonos {
		margin-top:2rem;
    	max-width: 350px;
    
	}

}


/*quees---*/

#quees{
	background-color: var(--neon);
	padding-top: 80px;
	padding-bottom: 80px;
}

#quees p{
	 max-width: 85%;
}
#quees h2{
	font-size: 4rem;
	color: var(--morado);
	font-weight: 800;
	margin-bottom: 20px;
	background-image: url("../images/deco-rosa2.png");
	background-position: left top;
    background-repeat: no-repeat;
	overflow: visible;
	padding-left: 5%;
	background-size: 45px auto;
	padding-top: 25px;
}



#quees h1{
	font-size: 2.5rem;
	color: var(--morado);
	font-weight: 800;
	margin-bottom: 20px;
	background-image: url("../images/deco-rosa2.png");
	background-position: left top;
    background-repeat: no-repeat;
	overflow: visible;
	padding-left: 5%;
	background-size: 45px auto;
	padding-top: 25px;
}

#quees h1 span{
	color: #FFF;
	
}



#quees p{
	font-size:1.2rem;
	color:var(--morado);
}


#quees p span{
	color:var(--verdeLima);
}

#quees .btnSaber{
	padding: 5px 80px 5px 30px !important;
	background-size: 8%;
	font-size: 1.2rem;
}

/*-----estamos*/



#estamos h2{
	font-size: 3rem;
	color: var(--morado);
	font-weight: 800;
	margin-bottom: 20px;
	background-image: url("../images/deco-verde.png");
	background-position: left top;
    background-repeat: no-repeat;
	overflow: visible;
	padding-left: 3%;
	background-size: 45px auto;
	padding-top: 25px;
	
}


/*
	.contenedorEstamos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}
		
		.cuadroEstamos {
    width: calc(20% - 5px);
    aspect-ratio: 1 / 1;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    perspective: 1000px;
    box-sizing: border-box;
    padding: 1%;
			background-color: aqua
}
		*/
		


		.fila-cuadros{
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
			.inner-cuadro{
				text-align: center;
				display: flex;
				flex-direction: column;
				text-align: center;
				flex-basis: min-content;
			}
			
			         /* Responsive design */
            @media (max-width: 768px) {
				.fila-cuadros{
					flex-wrap: wrap;
				}
				
                .inner-cuadro {
                    flex-basis: min-content; /* Still 2 per row but with less gap */
                }
            }

            @media (max-width: 480px) {
				
				.fila-cuadros{
					flex-wrap: wrap;
				} 
				
                .inner-cuadro {
                    flex-basis: min-content; /* Full width on very small screens */
                }

             
            }

		.cuadro{
			aspect-ratio: 1/1;
			perspective: 500px;
			box-sizing: border-box;
			margin: 10px;
			padding: 40px;
			background-color: var(--morado);
			width: 140px
			
		}

#estamos span{
	font-size: 1rem;
	color: var(--morado);
	font-weight: 600;
}

/*----footer1---*/
#footer1{
	background-color: var(--morado);
	padding-top: 10px;
	padding-bottom: 10px;
}

footer a{
	color:#FFF;
	text-decoration: none;
}

footer a:hover{
	color:#FFF;
	text-decoration: underline;
}

.fila{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}



#footer1 span{
	color:var(--verdeLima);
	font-weight: 700;
	padding-left: 25px;
	font-size: 1.2rem;
}

.logoSmall{
	max-width: 80px;
	height: auto;
}

.bloqueSiguenos{
	margin-left: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
}

#footer1 .listaIconosCabecera{
	padding-left: 15px;
}

#footer1 .listaIconosCabecera li{
	font-size: 25px;
}

/*-----footer -------*/

footer{
	background-color: var(--verdeCRA);
	padding-top: 25px;
	/*padding-bottom: 25px;*/
	color:#FFF;
	
}


footer p{
	text-align: left;font-size: 0.8rem;
	font-weight: 300;
}

.conLinea{
	border-left: 2px solid #FFF;
}

/*---sticky block--*/


.btnHazte{
	color: #FFF;
	text-decoration: none;
	border: 1px solid #FFF;
	padding: 5px 40px 5px 20px !important;
	border-radius: 20px;
	margin-left:15px;
	margin-right: 15px;
	font-size: 14px !important;
	font-weight: normal !important;
	background-image: url(../images/carita.png);
	background-position: 92% center;
	background-size: 12%;
	background-repeat: no-repeat;
	background-color: var(--morado);
	font-weight: 700 !important;
}

.btnHazte:hover{
	border-color:var(--verdeLima);
	color:var(--verdeLima) !important;
	background-image: url(../images/caritaLima.png);
}

.btnCliente{
	color: var(--morado) !important;
	background-color: var(--neon) !important;
	text-decoration: none;
	border: 1px solid var(--neon) !important;
	padding: 5px 40px 5px 20px !important;
	border-radius: 20px;
	margin-left:15px;
	margin-right: 15px;
	font-size: 14px !important;
	font-weight: normal !important;
	background-image: url(../images/bolsa.png);
	background-position: 90% center;
	background-size: 10%;
	background-repeat: no-repeat;
}

.btnCliente:hover{
	border-color:var(--neon);
	background-color: var(--morado) !important;
	color:var(--neon) !important;
	background-image: url(../images/bolsaLima.png);
}



.sticky-block{
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: var(--morado);
	position: sticky;
	bottom: 0;
	padding-top: 15px;
	padding-bottom: 15px;
}

.sticky-block .btnCliente{
	font-weight: 700 !important;
}


.sticky-block .btnCliente{
	font-weight: 700 !important;
}

/*---letraPequena--*/

#letraPequena{
	background-color:#FFF;
}


.letraPequena {
    font-size: 0.8rem;
}

/*-----------------*/





.modal-content {
	background-color: var(--verdeLima);
}


#cookieModal .btn-success{
	background-color: var(--morado) !important;
	border:0;
}


.infoPremiado p {
    margin-bottom: 0;
    font-size: 0.9rem;
}

#cookieModal .btn-warning {
	background-color: var(--morado) !important;
	color:#FFF;
	border:0;
}


#cookieModal .btn-secondary {
	background-color: var(--morado) !important;
	border:0;
}




/*hamburguesa*/
.navbar {
  width: 100%;
	background-color: var(--morado);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.navbar .menu-items {
  display: flex;
}

.navbar .nav-container li {
  list-style: none;
}

.navbar .nav-container a {
  text-decoration: none;
  color: #FFF;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
	padding-top: 0;
	padding-bottom: 0;
}

.navbar .nav-container a:hover{
    font-weight: 500;
	color:var(--verdeLima);
}

.nav-container {
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  right: 10px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #FFF;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(210, 255, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0;
}

.navbar .menu-items {
	position:absolute;
	right:10px;
  padding-top: 50px;
  height: 50px;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  margin-left: 0px;
  padding-left: 50px;
  transition: transform 0.5s ease-in-out;
  text-align: right;
}

.navbar .menu-items li {
  /*margin-bottom: 1.2rem;*/
  font-size: 1.5rem;
  font-weight: 500;
}

.logo {
  position: absolute;
  top: 25px;
  left: 15px;
  font-size: 1.2rem;
  color: #0e2431;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo{
  display: none;
}

#sumate{
	position: absolute;
    right: 55px;
	z-index: 9999999;
}


/*fin hamburgeusa*/

.enlaceMenu{
	color:#FFF;
	text-decoration: none;
	font-size: 1.3rem;
	border-right: 2px solid #FFF;
	padding-right: 15px;
}

.enlaceMenu:hover{
	color:var(--verdeLima);
}


.enlace{
	text-decoration: none;
	color:var(--morado);
}


#seccion1{
	background-color: var(--morado);
	color:#FFF;
}

.descubre{
		font-size:1.3rem;
	}

.descubre span:first-child{
	margin-right: 65px;
}

.descubre span:last-child{
	/*margin-left: 15px;*/
}


#seccion2{
	background-color: var(--rosa);
	max-height: 580px;
	/*height: 520px;*/
	overflow: visible;
}

#seccion3{
	background-color: var(--neon);
	padding-top: 50px;
	color:var(--morado);
	padding-bottom: 200px;
}

#seccion3 h2{
	font-size: 4rem;
	font-weight: 700;
	text-align: center;
	background-image: url(../images/deco-rosa.png);
	background-repeat: no-repeat;
	background-position: right top;
	overflow: visible;
	padding-top: 60px;
}

#seccion3 h2 {
    text-align: left;
    background-image: url(../images/deco-rosa2.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 40px auto;
    overflow: visible;
    padding-top: 45px;
    padding-left: 2%;
    font-size: 3rem;
    color: var(--morado);
    line-height: 2.8rem;
    font-weight: 700;
}



.contenedor-flex{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 250px;
	padding-bottom: 250px;
}

.que{
	font-size: 4rem;
	font-weight: 300;
	font-style: italic;
	line-height: 5rem;
	padding-right: 100px;
	text-align: right;
	flex-grow: 1;
	width: 33%
	
	
}

.logo{
	max-width: 45px;
	height: auto;
	
}


.logo2{
	width: 33%;
	flex-grow: 1;
}

.texto1{
	padding-left: 100px;
	flex-grow: 1;
	width: 33%;
}

.pantallas{
	position: absolute; top:-260px;left:-20px;
}

#redes{
	padding-bottom: 140px;
}

#redes img:first-child{
	margin-right: 15px;
}

#redes img:last-child{
	margin-left: 15px;
}



.left-div { 
  width: 50%;
	flex-grow:1;
flex-shrink: 1;
	text-align: right;
	padding-right: 25px;
} 
 
.vertical-line { 
  width: 0px; 
  border-left: 3px solid var(--morado); 
  height: 240px;
	flex-grow: 1;
	flex-shrink: 1;
 
} 
 
.right-div { 
  width: 50%;
	padding-left: 25px;
	flex-grow: 1;
	flex-shrink: 1;
} 


.contenedor-flex2{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 50px;
	padding-bottom: 0;
	align-items: flex-start;
}


.contenedor-flex3{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	align-items: flex-start;
	margin-top: -2px;
}


.vertical-line2 { 
  width: 0px; 
  border-left: 3px solid var(--morado); 
  height: 240px 
 
}

.vertical-line3 { 
  width: 0px; 
  border-left: 3px solid #b3cc28; 
  height: 150px 
 
}


.vertical-line4 { 
  width: 0px; 
  border-left: 3px solid var(--morado); 
  height: 250px; 
	  position:relative;
 
}


.vertical-line4::after {
  content: '';
  position: absolute;
  width: 21px;
  height: 21px;
  right: -9px;
  background-color: var(--morado);
  border: 0;
  bottom: 0px;
  border-radius: 50%;
  z-index: 1;
}


 .right-align { margin-left: auto; }




.cuadro1{
	background-color: #FFF;
	border: 0;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	min-height: 550px;
	margin-left: 90px;
	margin-right: 90px;
	margin-top: 80px;
	padding: 100px;
	color:var(--rosa);
	display: flex;
	align-items: center;
	justify-content: center;
	
}



.blanco{
	color:#FFF;
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 4rem;
}

.verdeLima{
	color:var(--verdeLima);
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 4rem;
}


.verdeLimaColor{
	color:var(--verdeLima);
}



.paso1{
	text-align: center;
	color:var(--morado);
}


.txt1{
	font-size: 3rem;
	line-height: 3rem;
}

.txt2{
	padding-top: 25px;
	font-size: 2rem;
	font-weight: 300;
	line-height: 2rem;
	margin-bottom: 40px;
}

.txt3{
	margin-top: 15px;
}

.miBoton {
	background-color:#cdff03;
	border-radius:50px;
	border:0;
	display:inline-block;
	cursor:pointer;
	color:var(--morado);
	font-size:2rem;
	font-weight: 700;
	padding:5px 31px;
	text-decoration:none;
}
.miBoton:hover {
	background-color:var(--morado);
	color:#FFF;
}
.miBoton:active {
	position:relative;
	top:1px;
}




.paso2{
	display: none;
}

.paso3{
	display: none;
}

.paso4{
	display: none;
}


.paso5{
	display: none;
}


.paso6{
	display: none;
}

.paso7{
	display: none;
}



.paso .txt1{
	color:var(--morado);
	font-size: 2rem;
}

.paso .txt2{
	color:var(--morado);
	font-size: 1.5rem;
	padding-top: 0px;
	/*margin-left: 38px;*/
}

.paso .txt4{
	color:var(--morado);
	font-size: 1.4rem;
	padding-top: 0px;
	/*margin-left: 38px;*/
}

.paso ul{

	padding-left: 0;
}

.paso ul li{
	padding-left: 10px;;
}

.paso2 ul li::marker{
	content: "1 \f061"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
	font-size: 1rem;
	margin-right: 5px;
	margin-left: 0px;
}

.paso2 ul li:marker{
	content: "1 \f061"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
	font-size: 1rem;
	margin-right: 5px;
	margin-left: 0px;
}


.paso3 ul li::marker{
	content: "2 \f061"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
	font-size: 1rem;
	margin-right: 5px;
	margin-left: 0px;
}


.paso4 ul li::marker{
	content: "3 \f061"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
	font-size: 1rem;
	margin-right: 5px;
	margin-left: 0px;
}

.paso5 ul li::marker{
	content: "4 \f061"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
	font-size: 1rem;
	margin-right: 5px;
	margin-left: 0px;
}

.paso6 ul li::marker{
	content: "5 \f061"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
	font-size: 1rem;
	margin-right: 5px;
	margin-left: 0px;
}

.paso7 ul li::marker{
	content: "6 \f061"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
	font-size: 1rem;
	margin-right: 5px;
	margin-left: 0px;
}



label{
	font-size: 1.2rem;
	color: var(--rosa);
}

.form-control{
	font-size: 1.8rem;
	color:var(--rosa);
	border:0;
	border-bottom: 1px solid var(--rosa);
	border-radius: 0;
	
}

.form-control:focus{
	color:var(--rosa);
}

#btnPaso2{
	font-size: 1.5rem;
	margin-top: 35px;
}


#btnPaso3{
	font-size: 1.5rem;
	margin-top: 35px;
}

#btnPaso4{
	font-size: 1.5rem;
	margin-top: 35px;
}


#btnPaso5{
	font-size: 1.5rem;
	margin-top: 35px;
}

#btnPaso6{
	font-size: 1.5rem;
	margin-top: 35px;
}

#btnPaso7{
	font-size: 1.5rem;
	margin-top: 35px;
}



.barra{
	    max-width: 24px;
    padding-top: 31px;
    font-size: 3rem;
    font-weight: 100;
}

.form-control::placeholder {
  color: var(--rosa);
  opacity: 0.6; /* Firefox */
}

.form-control::-ms-input-placeholder { /* Edge 12 -18 */
  color: var(--rosa);
}


.txt3{
	color: var(--rosa);
	font-size: 1rem;
	margin-left:0;
	line-height: 1.3rem;
}


.ulOpciones li{
	color:var(--rosa);
	background-color: #fee8f2;
	border-radius: 25px;
	border: 1px solid var(--rosa);
	display: block;
	max-width: 325px;
	margin-bottom: 10px;
	font-size: 1.2rem;
	padding-top: 3px;
	padding-bottom: 6px;
	padding-left: 5px;
}

.paso7 .ulOpciones li{
	max-width: 160px;
}

.txt4 a{
	color: var(--morado);
	text-decoration: underline;
}


.txt4 a:hover{
	color: var(--morado);
	text-decoration: underline;
}


.pulsado{
	color:var(--morado) !important;
	background-color: var(--verdeLima) !important;
}


.ulOpciones li:hover{
	cursor: pointer;
}

.ulOpciones li:before{
	content: "" !important;
}

.ulOpciones i{
	font-size: 1rem;
	background-color: #FFF;
	border: 1px solid var(--rosa);
	padding: 6px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 0.7rem;
	text-align: right;
	
}

#opcionesPaso5 li{
	max-width: 100%;
}

.bordeRojo{
	border: 2px #CC0000 solid;
}

#txtResultado{
	text-align: center;
    font-weight: 400;
    font-size: 2.5rem;
	color: var(--morado);
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/* CSS de boombastic.php */


.imgCentro{
	    margin-top: 220px
}

.imgDcha{
	    margin-top:25px; margin-left: -50px;
}

.imgIz{
	margin-top: 150px; margin-left: 50px;
}

.marca{
	position: absolute;
    left: -117px;
}

#topBtns{
	position: absolute;
	top:0;
	width: 50%;
	text-align: center;
	z-index: 999999999999999999;
	padding-top: 25px;
	left: 50%;
  transform: translateX(-50%);
}


.btnDescubre{
	color:#FFF !important;
	background-color: var(--verdeOscuro) !important;
	text-decoration: none;
	border: none !important;
	padding: 5px 40px 5px 40px !important;
	border-radius: 40px;
	font-size: 14px !important;
	font-weight: normal !important;
	
}

.btnDescubre:hover{
	background-color: var(--verdeLima) !important;
	color: var(--morado) !important;
	
}

.btnDescubre:hover span{
	color: var(--morado) !important;
	
}

.btnDescubreV2{
width: 100%;
	max-width: 370px;
	text-align: left;
}

.btnDescubreV2:hover{
	background-color: var(--morado) !important;
	color:#FFF !important;
}


.btnDescubreV2:hover span{
	color:var(--verdeLima) !important;
}


.btnVideo{
	color:#FFF !important;
	background-color: var(--morado) !important;
	text-decoration: none;
	border: 1px solid var(--rosa) !important;
	padding: 5px 90px 5px 15px !important;
	border-radius: 40px;
	font-size: 16px !important;
	font-weight: normal !important;
	margin-top: 35px;
	background-image: url(../images/play.png);
	background-position: 95% center;
	background-size: 5%;
	background-repeat: no-repeat;
	
}

.btnVideo:hover{
	border: 1px solid var(--verdeLima) !important;
}

#bienvenido{
	background-color: var(--verdeLima);
	padding-top: 75px;
	padding-bottom: 25px;
}

#bienvenido h2{
	font-weight: 700;
	color:var(--verdeOscuro);
	font-size: 2.5rem;
	margin-bottom: 20px;
}

.tarjetas{
	margin-top:-100px;  max-height: 315px;
}

#seccion5{
	background-color: var(--rosa);
}

#seccion5 p{
	font-size: 1.5rem;
	color:#FFF;
	margin-bottom:4rem;
}


.btnDescubrePlanes{
	color:#FFF !important;
	background-color: var(--morado) !important;
	text-decoration: none;
	border: none !important;
	padding: 10px 40px 10px 40px !important;
	border-radius: 40px;
	font-size: 1.2rem !important;
	font-weight: normal !important;
	
}

.btnDescubrePlanes:hover{
	background-color: var(--verdeLima) !important;
	color: var(--morado) !important;
	
}

.btnDescubrePlanes:hover span{
	color: var(--morado) !important;
	
}

.tooltip {
  position: absolute;
  background-color: var(--morado);
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 99999999999999999999999999;
  white-space: nowrap;
	opacity: 1 !important;
	color: #000 !important;
	padding: 0;
	border-radius: 15px;
}

.tooltipPlan {
    background-color: var(--morado);
    padding: 10px;
    padding-left: 62px;
    background-image: url(../images/marca-tooltip.jpg);
    background-position: 15px 15px;
    background-repeat: no-repeat;
    min-height: 80px;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    max-width: 400px;
    background-size: 50px;
}
.tooltipTitulo {
    color: var(--verdeLima);
    text-transform: uppercase;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    text-wrap: balance;
    padding-left: 15px;
}

.tooltipFecha {
    color: var(--rosa);
    font-size: 16px;
    padding-right: 15px;
    text-transform: uppercase;
    font-weight: 700;
	padding-left: 15px;;
}

#seccionMapa{
	background-color: var(--grisito);
	
}


/*docs*/

#docs.elemento h3 {
    background-image: url(../images/deco-rosa2.png);
    background-size: 40px;
    padding-top: 35px;
    color: var(--turquesa);
    font-size: 2.1rem;
}

#docs.elemento h4 {
    color: #000;
    font-size: 3.5rem;
    padding-left: 2%;
    font-weight: 700;
}

.cuadroLima p {
    font-weight: 400 !important;
    color: var(--morado) !important;
}

.cuadroTurquesa {
    padding: 25px;
}

#docs{
	margin-top: 50px;
    padding-top: 50px;
}

.cuadroTurquesa p {
    font-weight: 400 !important;
}

#docs.elemento p {
    color: var(--turquesa);
    font-size: 1.5rem;
    padding-left: 2%;
    font-weight: 700;
}

.cuadroTurquesa .btnHazteMorado {
    font-size: 1rem !important;
    background-size: 18px !important;
	color:var(--neon);
	border:0;
	background-color: var(--rosa);
}

.cuadroLima {
    padding: 25px;
}

.cuadroLima .btnHazteMorado {
    font-size: 1rem !important;
    background-size: 18px !important;
    padding: 5px 60px 5px 20px !important;
	color: var(--neon);
}

/*--mas-ventajas--*/
#masVentajas{
	background-color: var(--morado);
}

.puzzle{
	background-repeat: no-repeat;
	background-position: 90% center;
	background-size: contain;
}


#masVentajas h2 {
    text-align: left;
    background-image: url(../images/deco-rosa2.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 40px auto;
    overflow: visible;
    padding-top: 45px;
    padding-left: 2%;
    font-size: 3rem;
    color: #FFF;
    line-height: 2.8rem;
    font-weight: 700;
}
.col1 {
    margin-right: 25px;
}
.col1, .col2 {
   /* max-width: 300px;*/
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.contColumnas {
    display: flex;
    flex-direction: row;
    justify-content: center; /* Center the items horizontally */
    align-items: stretch; /* Stretch items vertically to match the container's height */
}

.contColumnas img {
    width: 50px;
    height: auto;
}


.contColumnas h3 {
    color: var(--neon);
    font-size: 1.2rem;
    font-weight: 700;
    padding-top: 15px;
    margin-bottom: 25px;
}

.lineaIz {
    border-left: var(--neon) 3px solid;
    padding-top: 15px;
    padding-bottom: 15px;
    flex: 1;
    /* height: 130px; */
}

.contColumnas p {
    font-size: 1rem;
    padding-left: 10px;
	color:#FFF;
}

.col2 {
    margin-left: 25px;
}

/*---apsos--*/

#pasos {
    background-color: var(--verdeRuralvia);
    color: var(--neon);
}


#pasosBizum {
    background-color: var(--morado);
    color: var(--verdeOscuro);
}

#pasosBizum .numero {
    color: var(--neon);
}

#pasosBizum.elemento h3{
	color:var(--neon);
	background-image: url("../images/deco-verde.png");
}


#pasos.pasosProgramaFyin{
	background-color: var(--morado);
}

.numero {
    text-align: center;
    font-size: 4rem;
    font-weight: 800;
}

#pasos.elemento h4 {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px var(--verdeLima) solid;
    padding-bottom: 20px;
    margin-bottom: 10px;
    min-height: 90px;
}

#pasosBizum.elemento h4 {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px var(--neon) solid;
    padding-bottom: 20px;
    margin-bottom: 10px;
    min-height: 100px;
	color:var(--neon);
	display: flex;
    flex-direction: column;
    justify-content: center;
}

#pasos.elemento p:not(.numero) {
    font-size: 0.7rem;
}

#pasosBizum.elemento p:not(.numero) {
    font-size: 0.7rem;
}

#pasos.elemento h3 {
    color: var(--neon);
}


/*estoEs*/

#estoEs {
    background-image: url(../images/chica-movil.jpg);
    background-size: cover;
    background-position: center center;
    min-height: 470px;
}


.esto {
    display: flex;
    top: 50%;
    left: 50%;
    text-align: left;
    align-items: left;
    flex-direction: column;
    font-size: 1.4rem;
    color: #FFF;
    font-weight: 700;
    margin-left: 2%;
}

/*----banca-digital--*/





#banca-digital {
    background-color: var(--grisito);
}

#banca-digital.elemento h3 {
    background-size: 40px;
    padding-top: 25px;
	background-image: url("../images/deco-morado2.png");
}

#banca-digital p {
    font-size: 2rem;
    color: var(--morado);
    font-weight: 700;
}

#banca-digital.elemento .listaTarjeta {
    color: #FFF;
}

#banca-digital.elemento .listaTarjeta li {
    background-image: url("../images/flecha-morado.png");
	color: #000;
}

#banca-digital .btnHazteMorado {
    color: var(--neon);
    text-decoration: none;
    border: 1px solid var(--morado);
    padding: 5px 40px 5px 20px !important;
    border-radius: 20px;
    margin-left: 15px;
    margin-right: 15px;
    font-size: 1.2rem !important;
    font-weight: normal !important;
    background-image: url(../images/flecha-lima.png);
    background-position: 92% center;
    background-size: 12%;
    background-repeat: no-repeat;
    font-weight: 700 !important;
    background-color: var(--morado);
}

#banca-digital .btnHazteMorado:hover {
    border-color: var(--neon);
    color: var(--neon) !important;
    background-image: url(../images/caritaLima.png);
}

#banca-digital.elemento .btnHazteMorado {
    background-color: var(--verdeLima);
    color: var(--verdeOscuro);
    border: 0;
    background-image: url(../images/flecha-verdeOscuro.png);
    background-size: 7%;
    margin-left: 0;
    padding: 5px 55px 5px 20px !important;
}

#banca-digital.elemento .btnHazteMorado:hover {
    background-color: var(--rosa);
	 background-image: url("../images/caritaLima.png");
}


#banca-digital.elemento h3 img {
    max-width: 250px;
    height: auto;
    margin-left: 15px;
}


/*quees .comunidad*/

#quees.comunidad{
	background-color: var(--morado);
}

#quees.comunidad h2{
	color:var(--neon);
}

#quees.comunidad p{
	color:#FFF;
}


/* comunidad */

#seccionMapa h2 {
    text-align: left;
    background-image: url(../images/deco-rosa2.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 40px auto;
    overflow: visible;
    padding-top: 45px;
    padding-left: 2%;
    font-size: 3rem;
    color: var(--morado);
    line-height: 2.8rem;
    font-weight: 700;
}


#seccionMapa .parrafoGrande{
	color:var(--morado);
	font-weight: 700;
	font-size:1.2rem;
		padding-left: 2%;
}

#seccionMapa .parrafoPequeno{
	color:var(--rosa);
	font-weight: 700;
	font-size:0.9rem;
	padding-left: 2%;
}


/*tienes-dudas.php*/

#cabeceraDudas{
	background-color: var(--grisito);
}

#cabeceraDudas .puzzle{
	/*background-image: url("../images/pregunta-rosa.svg");*/
	background-repeat: no-repeat;
	background-position: 80% 40%;
	background-size: 200px auto;
}


#cabeceraDudas h2 {
    text-align: left;
    background-image: url(../images/deco-rosa2.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 40px auto;
    overflow: visible;
    padding-top: 45px;
    padding-left: 2%;
    font-size: 3rem;
    color: var(--morado);
    line-height: 2.8rem;
    font-weight: 700;
}

.tituloAcordeon h3 {
    text-align: left;
    overflow: visible;
    padding-top: 15px;
    font-size: 2rem;
    color: var(--morado);
    line-height: 3.2rem;
    font-weight: 700;
	margin-bottom: 15px;
}

#acordeones{
	background-color: var(--grisito)
}

.accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-bg: transparent;
    --bs-accordion-border-radius: 0;
}

.accordion-item:first-of-type .accordion-button {
    border-top: 1px solid var(--morado);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-button:after {
    width: 22px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.accordion, .accordion-button {
    font-size: 0.8rem;
}

.accordion-button:not(.collapsed) {
    color: var(--verdeLima);
    background-color: var(--morado);
}

.accordion-button {
    background-color: transparent;
    outline: unset;
    border-bottom: 1px solid var(--morado);
}

.accordion-button {
    font-weight: 700;
    color: var(--morado);
}

.accordion-body {
    background-color: #FFF;
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.accordion-button:focus{
	outline: unset;
}

.accordion-button:focus {
    z-index: 3;
    border-color: var(--morado);
    outline: unset;
	box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0);
}

/*
.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-button::after {
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
}

*/

/*somos-cra*/




#plataforma h2{
	font-weight: 700;
	font-size: 2.1rem;
	color: #000;
	margin-bottom: 2rem;
}

#plataforma p{
	font-weight: 300;
	font-size: 1.2rem;
	color: #000;
}

#plataforma span.caja{
	color:var(--verdeOscuro);
	font-weight: 700;
}

/*--form contacto---*/

#form-contacto{
	background-color: var(--verdeLima);
}


#form-contacto label{
	font-size: 0.9rem;
	color: #000; 
	
}

#form-contacto .form-control{
	font-size: 0.9rem;
	color:#000;
	border:0;
	background-color: #F0F0F0;
}

#form-contacto select{
		border:0;
	background-color: #F0F0F0;
	border-radius: 0;
	font-size: 0.9rem;
}

#sinCuentos.heroFormulario{
    background-image: url("../images/fond-contacto.jpg");
    background-position: top center;
    background-size: cover;
    min-height: 350px;
    color: #FFF;
	padding-bottom: 25px;
}


#sinCuentos.heroSorteo{
    background-image: url("../images/fond-sorteo.jpg");
    background-position: top center;
    background-size: cover;
    min-height: 350px;
    color: #FFF;
	padding-bottom: 25px;
}



.bordeRojo {
    border: 1px solid #CC0000 !important;
}

#leido, #leido2{
	font-size: 0.9rem;
	margin-left: 10px;
}

#form-contacto .btnSaber{
	font-size: 1rem;
	background-size: 9%;
}


#manifiesto h3{
	font-size:1rem;
	margin-top: 1.5rem;
	color: var(--morado);
	font-weight: 700;
}

.fila-cuadros-iconos{
				display: flex;
				flex-direction: row;
				justify-content: center;
	flex-wrap: wrap;

			}

.cuadroIcono{

	box-sizing: border-box;
	background-color: var(--neon);
	padding-top: 2rem;
	border-radius: 10px;
}

.cuadroIcono img{
	max-height: 50px;
}


.cuadroIcono {
    aspect-ratio: 1 / 1;
	 flex: 1 1 calc(25% - 10px); /* 25% width minus gap for 4 columns */
  aspect-ratio: 1;
    box-sizing: border-box;
    margin: 10px;
    background-color: var(--neon);
    width: 140px;
}


.cuadroIcono:hover{
	cursor: pointer;
}

.fila-cuadros-iconos-2 {
  display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.square {
  flex: 1 1 calc(25% - 10px); /* 25% width minus gap for 4 columns */
  aspect-ratio: 1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--neon);
	color: var(--morado)
}

.square i {
  font-size: 24px;
  margin-bottom: 10px;
}

.square img {
  width: 50%;
  height: auto;
  border-radius: 5px;
}
			
			.square img{

	max-height: 50px;
}

			
			@media (max-width: 768px) {
  .square {
    flex: 1 1 calc(50% - 10px); /* 50% width for 2 columns */
  }
}



#modalProposito .modal-content, #modalValores .modal-content, #modalManifiesto .modal-content {
    background-color: var(--grisito) !important;
}


#modalVision .modal-content {
    background-color: var(--grisito) !important;
}



#datosCRA{
	background-color: #EFEFEF;
	padding-top: 50px;
	padding-bottom: 50px;
}

.filaDatosCRA{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap:10px;
	justify-content: space-between;
}


.filaDatosBizum{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap:10px;
	justify-content: space-between;
}


.cuadroCRA{
	background-color: #000;
	color:#FFF;
	padding: 2rem;
	border-radius: 10px;
	flex: 1 1 calc(25% - 10px); /* Take up 25% of the width with space between items */
  box-sizing: border-box;
}

.cuadroBizum{
	background-color: var(--morado);
	color:var(--neon);
	padding: 2rem;
	border-radius: 10px;
	flex: 1 1 calc(25% - 10px); /* Take up 25% of the width with space between items */
  box-sizing: border-box;
	font-weight: 700;
}


.cuadroBizum.rosa{
	background-color: var(--rosa);
}

.cuadroBizum.verdeLima2{
	background-color: var(--verdeLima);
}

.cuadroBizum.turquesa{
	background-color: var(--turquesa);
}






.cuadroBizum .tituloCRA {
	color: var(--neon);
}

.cuadroBizum .textCRA {
	color: var(--neon);
}

.imgCRA{
	max-width: 50px;
	height: auto;
}

.tituloCRA{
	margin-top:15px;
	font-size: 1.2rem;
}

.textCRA{
	margin-top:8px;
	font-size: 0.8rem;
}



#CRA{
	background-color: var(--verdeCRA);
	color:#FFF;

}

#CRA h2{
	font-size:2.5rem;
	font-weight: 700;
}

#CRA h3:before {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 80px;
    height: 2px;
    content: "";
    background-color: var(--neon);
}

#CRA h3{
	font-size:1.6rem;
	margin-bottom:25px;
	position: relative;
}

#CRA ul li{
	margin-bottom: 1rem;
	padding-right: 50px;
}

#CRA .btnCliente{
	background-image: none;
	padding: 5px 30px 5px 20px !important;
	font-weight: 700 !important;
	margin-left: 0;
}

#CRA .btnCliente:after{
	background-image: none;
	content: "\f30b";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 700;
    left: 10px;
    position: relative;
    -webkit-transition: left 0.5s;
    -o-transition: left 0.5s;
    transition: left 0.5s;
}

#CRA .btnCliente:hover:after{
    left: 15px;
}


#grupo{
	background-color: var(--amarilloCRA);
	color:#FFF;

}

#grupo h2{
	font-size:2.5rem;
	font-weight: 700;
	color:var(--verdeCRA);
}

#grupo h3:before {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 80px;
    height: 2px;
    content: "";
    background-color: var(--morado);
}

#grupo h3{
	font-size:1.6rem;
	margin-bottom:25px;
	position: relative;
	color:var(--verdeCRA)
}

#grupo ul li{
	margin-bottom: 1rem;
	padding-right: 50px;
}

#grupo .btnCliente{
	background-image: none;
	padding: 5px 30px 5px 20px !important;
	font-weight: 700 !important;
	margin-left: 0;
}

#grupo .btnCliente:after{
	background-image: none;
	content: "\f30b";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 700;
    left: 10px;
    position: relative;
    -webkit-transition: left 0.5s;
    -o-transition: left 0.5s;
    transition: left 0.5s;
}

#grupo .btnCliente:hover:after{
    left: 15px;
}


/*antiguo grupo
#grupo{
	background-color:#FFCD00;
	color:#31475E;

}

#grupo h2{
	font-size:2.5rem;
	font-weight: 700;
}

#grupo h3:before {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 80px;
    height: 2px;
    content: "";
    background-color: var(--morado);
}

#grupo h3{
	font-size:1.6rem;
	margin-bottom:25px;
	position: relative;
}

#grupo ul li{
	margin-bottom: 1rem;
	padding-right: 50px;
}

#grupo .btnCliente{
	background-image: none;
	padding: 5px 30px 5px 20px !important;
	font-weight: 700 !important;margin-left: 0;
	background-color: var(--morado) !important;
	color:var(--neon) !important;
	border-color: var(--morado) !important;
}

#grupo .btnCliente:after{
	background-image: none;
	content: "\f30b";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 700;
    left: 10px;
    position: relative;
    -webkit-transition: left 0.5s;
    -o-transition: left 0.5s;
    transition: left 0.5s;
	
}

#grupo .btnCliente:hover:after{
    left: 15px;
}

*/


.col-cifras{
	background-color: rgb(242, 242, 242);
	display: flex;
	align-items: center;
}

.cifras{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap:10px;
	justify-content: space-around;
	flex-direction: row;
	align-items: center;
}

.cuadroCifra{
	padding: 1rem;
	flex: calc(50% - 10px); /* Take up 25% of the width with space between items */
  box-sizing: border-box;
}

.imgCifra{
    padding: 5px;
    margin-right: 10px;
    width: 100%;
	text-align: center;
}

.imgCifra img{
	width:80%;
	height: auto;
}

.tituloCifra{
	margin-top:15px;
	font-size: 1.2rem;
}

.subtituloCifra{
	margin-top:5px;
	font-size: 0.8rem;
}
#sinCuentos.heroBizum{
	    background-image: url(../images/hero-bizum6.jpg);
    background-position: center center;
    background-size: cover;
    min-height: 600px;
    color: #FFF;
	padding-bottom: 25px;
}


.ventajas h2{
	
    text-align: left;
    background-image: url(../images/deco-lima.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 40px auto;
    overflow: visible;
    padding-top: 45px;
    padding-left: 4%;
    font-size: 3rem;
    color: var(--verdeRuralvia);
    line-height: 3rem;
    font-weight: 700;

}

.rowflex{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap:10px;
	flex-direction: row;
	justify-content: center;
}

.colflex-8{
	 flex: 0 0 66%; /* 8/12 = 66.67% */
}

.colflex-4{
	 flex: 0 0 33%; /* 4/12 = 33.33% */
}

.colflex-3{
	 flex: 0 0 21.5%; /* 3/12 = 25.00% */
}

.filaVentajasBizum {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.cuadroVentajasBizum{
	background-color: #000;
	aspect-ratio: 1/1;
	cursor:pointer;
	color:#FFF;
	padding: 2rem;
	border-radius: 10px;
	flex: 1 1 calc(33.33% - 10px); /* Take up 25% of the width with space between items */
  box-sizing: border-box;
	max-width: 250px;
}

#ademas{
	background-color: #FFF;;
}


#ademas h2 {
    text-align: left;
    background-image: url(../images/deco-lima.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 40px auto;
    overflow: visible;
    padding-top: 45px;
    padding-left: 4%;
    font-size: 3rem;
    color: var(--morado);
    line-height: 3rem;
    font-weight: 700;
	margin-bottom: 2rem;
}

#dudas{
	background-color: var(--verdeOscuro);
}


/*quees---*/

#queesfeb{
	background-color: var(--neon);
	padding-top: 40px;
	overflow: hidden;
}

#queesfeb p{
	 max-width: 85%;
}
#queesfeb h2{
	font-size: 4rem;
	color: var(--morado);
	font-weight: 800;
	margin-bottom: 20px;
	background-image: url("../images/deco-rosa2.png");
	background-position: left top;
    background-repeat: no-repeat;
	overflow: visible;
	padding-left: 5%;
	background-size: 45px auto;
	padding-top: 25px;
}



#queesfeb h1{
	font-size: 2.5rem;
	color: var(--morado);
	font-weight: 800;
	margin-bottom: 20px;
	background-image: url("../images/deco-rosa2.png");
	background-position: left top;
    background-repeat: no-repeat;
	overflow: visible;
	padding-left: 5%;
	background-size: 45px auto;
	padding-top: 25px;
}

#queesfeb h1 span{
	color: var(--rosa);
	
}



#quees p{
	font-size:1.2rem;
	color:var(--morado);
}


#queesfeb p span{
	color:var(--verdeLima);
}

#queesfeb .btnSaber{
	padding: 5px 80px 5px 30px !important;
	background-size: 8%;
	font-size: 1.2rem;
}

.fila-cuadros-iconosfeb{
	/*
				display: flex;
				flex-direction: row;
				justify-content: center;
	*/
	    display: flex
;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

			}

			.inner-cuadrofeb{
				text-align: center;
				display: flex;
				flex-direction: column;
				text-align: center;
				flex-basis: min-content;
			}


.cuadroIconofeb {
    aspect-ratio: 1 / 1;
    flex: 1 1 calc(25% - 10px);
    aspect-ratio: 1;
    box-sizing: border-box;
    /* margin: 10px; */
    background-color: var(--neon);
    width: 140px;
	padding-top: 2rem;
    border-radius: 10px;
	cursor: pointer;
}

.cuadroIconofeb img{
	max-height: 50px;
}



#datosIconos {
    display: none; /* Inicialmente oculto */
}


#datosIconos h2{
	background-image: url("../images/deco-rosa2.png");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 25px auto;
    overflow: visible;
    padding-top: 15px;
    padding-left: 20px;;
	margin-bottom: 1rem;
	color: var(--morado);
}






#datosIconos p{
	font-size: 1rem;
	color:var(--morado);
	font-weight: 500;
	padding-left: 20px;
}





			         /* Responsive design */

   @media (max-width: 1399px) {
.fila-cuadros-iconosfeb{
					flex-wrap: wrap;
	justify-content: center;
	gap:50px;
				}
			
     
            }


            @media (max-width: 768px) {
				.fila-cuadrosfeb, .fila-cuadros-iconosfeb{
					flex-wrap: wrap;
				}
				
                .inner-cuadrofeb {
                    flex-basis: min-content; /* Still 2 per row but with less gap */
                }
            }

            @media (max-width: 480px) {
				
				.fila-cuadrosfeb{
					flex-wrap: wrap;
				} 
				
                .inner-cuadrofeb {
                    flex-basis: min-content; /* Full width on very small screens */
                }

             
            }


/*responsive*/

.hazClic{
    color: var(--verdeLima) !important;
}

.efectoFadeIn {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.efectoFadeIn.visible {
    opacity: 1;
    transform: translateY(0);
}

.efectoFadeIn .flip-card-front{
	background-color: var(--verdeRuralvia);
}

.efectoFadeIn .flip-card-front h3{
	color: var(--neon) !important;
}


.efectoFadeIn .flip-card-back{
	background-color: var(--neon);
}

.efectoFadeIn .flip-card-back p{
	color: var(--verdeOscuro) !important;
}




.efectoFadeIn:nth-child(2) {
    animation-delay: 0.3s; /* Delay for the second element */
}

.efectoFadeIn:nth-child(3) {
    animation-delay: 0.6s; /* Delay for the second element */
}

.efectoFadeIn:nth-child(4) {
    animation-delay: 0.9s; /* Delay for the second element */
}

.efectoFadeIn:nth-child(5) {
    animation-delay: 1.2s; /* Delay for the second element */
}

.efectoFadeIn:nth-child(6) {
    animation-delay: 1.5s; /* Delay for the second element */
}


@keyframes fadeInCuadro {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@media (max-width: 870px) {
	.bizumBack p{
		font-size: 0.8rem !important;
	}			
	
 }


@media (max-width: 768px) {
    .rowflex {
        /*flex-direction: column;*/ /* Cambia de fila a columna */
    }

    .colflex-8, .colflex-4, .colflex-3 {
        flex: 0 0 100%; /* Cada columna ocupa el 100% del ancho */
    }
	
	.bizumBack p{
		font-size: 0.9rem !important;
	}	
	
}


@media (max-width: 767px) {
				
	#masVentajas .puzzle{
		background-image: none;
	}

	#pac-input {
		width: 250px !important;
	}
	
       	#cabeceraDudas .puzzle {
    background-position: 100% 60%;
    background-size: 100px auto;
}      
            }




@media (max-width: 535px) {
				
	#masVentajas .puzzle{
		background-image: none;
	}

	#pac-input {
		width: 250px !important;
	}
 }



@media (max-width: 460px) {
	
       	#cabeceraDudas .puzzle {
background-image: none;
		
}      
	
	
	#quees h1 {

    background-size: 30px auto;

}
	
            }


#cuadroCRA{
	border-radius: 10px;
	background-color: #FFCD00;
	color:#000;
	padding: 40px;
	height: 100%;
}


#cuadroGrupo{
	border-radius: 10px;
	background-color: var(--verdeCRA);
	color:#FFF;
	padding: 40px;
	height: 100%;
}

.cuadroCRAgrupo{
	background-color: var(--verdeCRA);
	color:#FFF;
	padding: 15px;
	border-radius: 10px;
	
  box-sizing: border-box;
}



.cuadroCRAgrupo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: calc(50% - 20px); /* Dos por fila */
    max-width: 300px; /* Evitar que sean demasiado grandes */
}


.filaDatosCRAgrupo{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}


.imgCRAgrupo{
	max-width: 150px;
	height: auto;
}

.imgCRAgrupo img{
	max-width: 80px;
	height: auto;
}

.selectedCuadro{
	background-color: var(--grisito);
}


#dudas .accordion-item:first-of-type .accordion-button {
    border-top: 1px solid var(--neon);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


#dudas .accordion-button {
    color: var(--neon);
	border-bottom: 1px solid var(--neon);
}

.flip-card-back p.parrafoBizum {
    font-size: 0.8rem !important;
    color: var(--verdeOscuro) !important;
    padding: 10px !important;
    padding-top: 15px !important;
    padding-bottom: 0 !important;
	font-weight: 500 !important;
}