@charset "utf-8";
/* CSS Document */

/***** tipografias 


font-family: 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif;
font-family: 'Expert-Sans-Bold', Expert-Sans-Regular, helvetica, arial, clean, sans-serif;
font-family: 'Expert-Sans-Light', helvetica, arial, clean, sans-serif;

font-family: 'KievitOT-ExtraBold', Expert-Sans-Regular, helvetica, arial, clean, sans-serif;
font-family: 'KievitOT-Bold', 'Expert-Sans-Bold', helvetica, arial, clean, sans-serif !important;
font-family: 'KievitOT-Medium', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
font-family: 'KievitOT-Regular', Expert-Sans-Regular, helvetica, arial, clean, sans-serif !important;


*********/


						html { scroll-behavior: smooth;}


						body {
                            background: #fff !important;
                        }

						.interna .col-md-3, .breadcrumb, #titulo, #descripcion {
						    display: none;
                        }
						
						.link-info{
							color: #00628b;
							text-decoration:underline;	
						}

						.menutop {
						width: 100%;
						background-color: #00628B;
						padding: 10px;
						margin: 0 auto;
						text-align: center;
						}

						.menutop a {
							color: #fff;
							padding: 0 20px;
						}

						.menutop a:hover {
							text-decoration: underline;
						}

						.menutop a.border {
							border-right: 1px solid #fff;

						}

						.mobile .menutop, .mobile .LinkTop {
						display: none;
						}


						.link {
    						font-family: 'KievitOT', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
    						font-size: 15px!important;
							color: #00628b!important;
							cursor: pointer!important;
						}

						.LinkTop {
							font-size: 19px;
							line-height: 23px;
							color: #00586D;
							text-decoration: top;
							font-family: 'KievitOT', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
						}


						.interna .NuevaBNAMAS h1 {
    						margin-bottom: 30px;
                            font-size: 53px;
                            margin-top: 40px;
						    font-family: 'KievitOT-ExtraBold', Expert-Sans-Regular, helvetica, arial, clean, sans-serif;
						    text-align: center;
							color: #00628b!important;
						}

						.interna .NuevaBNAMAS h1 br {
							display: none;
						}

						.mobile .interna .NuevaBNAMAS h1 {
    						margin-bottom: 26px;
                            font-size: 34px;
                            margin-top: 40px;
						}

						.mobile .interna .NuevaBNAMAS h1 br {
							display: block!important;
						}


						.interna .NuevaBNAMAS .Videos h2 {
						    font-family: 'KievitOT-Bold', Expert-Sans-Regular, helvetica, arial, clean, sans-serif!important;
							text-align: left!important;
							font-size: 25px!important;
							line-height: 30px!important;
							margin-bottom: 10px;
							color: #00628b!important;
							}

						.mobile .interna .NuevaBNAMAS .Videos h2 {
						display: none;
						}	

						.interna .NuevaBNAMAS h3 {
							text-align: center!important;
							font-size: 27px!important;
							line-height: 34px!important;
							}

						.interna .NuevaBNAMAS p.detalle {
							font-size: 21px;
							text-align: left;
							line-height: 25px;
							color: #00586D;
							margin: 10px 20px 30px;
							}

						.mobile .interna .NuevaBNAMAS p.detalle {
							margin: 10px 10px 30px;
							}


                        #InfoApp {
                            text-align: center;
                        }


						#InfoApp .panel-default > .panel-heading {
							padding: 0 !important;
							width: 17%;
							display: inline-block;
						    border-bottom: none;
							margin: 5px 10px;
						}

						
						.mobile #InfoApp .panel-default > .panel-heading {
							width: 18%;
							margin: 5px 2px;
						}






						/*FONDO NORMAL*/
						#contenidoMicroView a.card_destinos.collapsed .card_app {
							background-color: #fff!important;
						}
						#contenidoMicroView a.card_destinos.collapsed .card_app h2 {
							color: #00628b!important;
						}

						/*IMAGEN NORMAL*/
						#contenidoMicroView a.card_destinos.collapsed .card_app img.blue {
							display: inline-block!important;
						}
						#contenidoMicroView a.card_destinos.collapsed .card_app img.white {
							display: none!important;
						}




						/*FONDO HOVER*/
						#contenidoMicroView a.card_destinos.collapsed:hover .card_app {
							background-color: #00628b!important;
						}
						#contenidoMicroView a.card_destinos.collapsed:hover .card_app h2 {
							color: #fff!important;
						}

						/*IMAGEN HOVER*/
						#contenidoMicroView a.card_destinos.collapsed:hover .card_app img.blue {
							display: none!important;
						}
						#contenidoMicroView a.card_destinos.collapsed:hover .card_app img.white {
							display: inline-block!important;
						}




						/*FONDO ABIERTO*/
						#contenidoMicroView a.card_destinos .card_app {
							background-color: #00628b!important;
						}
						#contenidoMicroView a.card_destinos .card_app h2 {
							color: #fff!important;
						}

						/*IMAGEN ABIERTO*/
						#contenidoMicroView a.card_destinos .card_app img.blue {
							display: none;
						}
						#contenidoMicroView a.card_destinos .card_app img.white {
							display: inline-block;
						}
						
				



						/*MOBILE*/
						.mobile #contenidoMicroView a.card_destinos .card_app img.blue {
							display: inline-block;
						}
						.mobile #contenidoMicroView a.card_destinos .card_app img.white {
							display: none;
						}

						.mobile #contenidoMicroView a.card_destinos:hover .card_app img.blue {
							display: none;
						}
						.mobile #contenidoMicroView a.card_destinos:hover .card_app img.white {
							display: inline-block;
						}

						.mobile .card_app {
							width: 95%;
							padding: 14px 5px 14px;
							font-size: 12px;
							min-height: 79px;
						}

						.mobile .card_app.empresas {
							width: 100%;
							padding: 15px 0px 15px;
							font-size: 12px;
							min-height: 94px;
						}

						.mobile .interna .panel-group#accordion a.card_destinos .card_app img {
							top: -4px!important;
							position: relative;
						}

						.mobile .interna .panel-group#accordion a.card_destinos:hover .card_app img {
							top: -4px!important;
							position: relative;
						}




       					.interna #InfoApp .panel-group#accordion {
							background-color: unset;
							box-shadow: none;
							padding: 0;
							margin: 0;
							width: 100%;
						}
						
						#InfoApp  .panel-group .panel {
							border-bottom: none;
							border-radius: 0;
							padding-bottom: 0px !important;
						}


	                    .card_app {
							display: inline-block;
							text-align: center;
                            margin: 0px;
                            padding: 25px 10px 27px;
							background: #fff;
							vertical-align: top;
							color: #00586D;
							font-size: 15px;
							min-height: 150px;
							border-radius: 20px;
    						box-shadow: 2px 2px 2px #ddd;
   							border: 1px solid #e6e6e7;
						    width: 100%;
						}

						.card_app.empresas {
                            padding: 25px 10px 20px;
							min-height: 170px;
						}
					

							.interna .panel-title .card_app h2 {
								font-family: 'KievitOT-Bold', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
								font-size: 16px!important;
								color: #006189 !important;
								min-height: auto;
							    margin-top: 15px !important;
								line-height: 18px!important;
							}

							.mobile .interna .panel-title .card_app h2 {
								font-size: 9px!important;
							    margin-top: 2px !important;
							    line-height: 11px !important;
							}

							.card_app p {
								margin-bottom: 8px;
								margin-top: 5px;
								padding-top:0;
								font-family: 'KievitOT', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
								font-size: 15px;
								color: #006189 !important;
							}

							.card_app img {
								height: 70px;
								float: none!important;
							}

							.mobile .card_app img {
								height: 38px;
								float: none!important;
							}


							





							.bloque_infoApps {
								text-align: left;
								display: block;

							}
							
							.interna .bloque_infoApps h2{
								font-family: 'KievitOT-Bold', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
								font-size: 28px;
								color: #00628b!important;
							}

							.interna .bloque_infoApps p, .interna .bloque_infoApps ul li {
								font-family: 'KievitOT', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
								font-size: 17px;
								color: #00628b;
							}



						section.gris {
							text-align: center;
							background-color: #efefef;
							padding: 50px 30px;
                            margin-top: 50px;
						}

						.mobile section.gris {
                            margin-top: 30px;
							padding: 50px 10px;
						}


						section.gris h1{
							margin-top: 0px;
						}


							.NuevaBNAMAS .btnNaranja {
								margin-bottom: 0!important;
								margin-top:25px!important;
								box-shadow: none!important;
								background: #ed6c2e!important;
							}

							a.btnNaranja:hover, a.btnNaranja:focus {
								background: #fc6207!important;
								color: #fff;
								box-shadow: none!important;
							}

							.mobile .NuevaBNAMAS .btnNaranja {
							    font-size: 16px!important;	
							}


							.NuevaBNAMAS .btnBlanco {
								margin-bottom: 0 !important;
								background: #fff !important;
								box-shadow: 2px 2px 5px 0px #bdbdbd;
								padding: 15px 15px 15px 20px;
								border-radius: 15px;
							}

							
							a.btnBlanco:hover, a.btnBlanco:focus {
								background: #fff !important;
								color: #00628b;
								box-shadow: 2px 2px 5px 0px #999797;
							}


							.NuevaBNAMAS .btnBlanco span{
								color: #00628b;
								text-align: left;
								display: inline-block;
								font-family: 'KievitOT-Medium', Expert-Sans-Regular, helvetica, arial, clean, sans-serif;
								font-size: 18px;
								margin-right: 40px;							
							}

							.NuevaBNAMAS .btnBlanco img{
								width: 23px;
								display: inline-block;
								margin: 0 !important;
							}





							.mobile .NuevaBNAMAS .btnBlanco {
							    font-size: 16px!important;	
							}




							section#Bonos {
								padding: 50px 0px 30px 0px;
								text-align: center;
							}


						


							.CardCuentaRem {
								display: inline-block;
								text-align: left;
								margin: 30px 10px 10px 10px;
								padding: 10px 20px;
								background: white;
								width: 45%;
								vertical-align: top;
								color: #f37338;
								font-size: 15px;
							    border-radius: 20px;
    							box-shadow: 2px 2px 2px #ddd;
							}

							.mobile .CardCuentaRem {
								width: 100%;
							}

							.CardCuentaRem h2 {
								margin-top: 15px;
								font-family: 'KievitOT-Bold', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
								font-size: 22px!important;
								color: #fff !important;
								min-height: auto;
								display: block;
								text-align: left!important;
								margin-bottom: 0 !important;
							}

							.CardCuentaRem p {
								font-family: 'KievitOT', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
								font-size: 15px;
								color: #fff !important;
								margin-left: 48px;
								margin-top: 0 !important;
								margin-bottom: 8px;
								padding-top: 0;
							}

							.CardCuentaRem img {
								width: 42px;
								margin-right: 3px;

							}

							.BannerResulDSK {
								position: relative;
							}

							.BannerResulMOB {
								position: relative;
							}




                            .NuevaBNAMAS .boxes .box {
                                min-width: 250px;
                                width: 250px;
                                display: inline-block;
                                text-align: center;
                                margin: 20px 15px 0 0;
                                padding: 0;
                            }

							.mobile .NuevaBNAMAS .boxes .box {
                                min-width: unset;
                                width: auto;
								margin: 0px 2px;
                            }


                            .NuevaBNAMAS .boxes .box img {
                                width: 100%;
                                border-radius: 20px;
                            }

							.mobile .NuevaBNAMAS .boxes .box img {
                                width: 100%;
                                border-radius: 10px;
                            }
							


                            .NuevaBNAMAS .boxes .box .dataImagen {
                                position: absolute;
                                bottom: 30px;
                                padding: 6px 10px;
                                width: 250px;
                                text-align: center;
							}

                            .mobile .NuevaBNAMAS .boxes .box .dataImagen {
                                position: absolute;
                                bottom: 20px;
                                padding: 6px 0px;
                                width: 31%;
                                text-align: center;
							}

 
                            .NuevaBNAMAS .boxes .box h2.titulo {
                                color: #fff!important;
                                padding: 6px 10px;
								margin: 0px 0 20px;
                                border-radius: 0 20px 20px 0;
                                font-family: 'KievitOT-Bold', Expert-Sans-Regular, helvetica, arial, clean, sans-serif !important;
                                font-size: 27px;
                                line-height: 18px;
                            }

                            .mobile .NuevaBNAMAS .boxes .box h2.titulo {
                                font-size: 14px;
                                line-height: 21px;
							    margin: 0px 0px 2px;
							    padding: 6px 4px;
                            }

							.mobile .carousel-indicators {
								    bottom: -30px!important;
							}

                            #contenidoMicroView .NuevaBNAMAS .boxes .box a.vermas {
                                bottom: 30px;
                                background-color: transparent;
                                color: #fff;
								border: 1px solid #fff!important;
                                border-radius: 20px;
                                font-family: 'KievitOT-Bold', Expert-Sans-Regular, helvetica, arial, clean, sans-serif !important;
                                font-size: 15px;
                                line-height: 18px;
							    padding: 6px 15px;
                            }
						                            
							 #contenidoMicroView .NuevaBNAMAS .boxes .box a.vermas:hover {
                                color: #ed6c2e;
								border: 1px solid #ed6c2e!important;
                            }

                           
							.mobile #contenidoMicroView .NuevaBNAMAS .boxes .box a.vermas {
                                bottom: 30px;
                                background-color: transparent;
                                color: #fff;
								border: 1px solid #fff!important;
                                border-radius: 20px;
                                font-family: 'KievitOT-Bold', Expert-Sans-Regular, helvetica, arial, clean, sans-serif !important;
                                font-size: 12px;
                                line-height: 18px;
							    padding: 3px 10px;
                            }

                            .media, .media .media {
                            margin-top: 0;
                            display: inline-block;
                            }


                            .mobile .media, .mobile .media .media {
                            width: 32%;
                            }

                            .carousel-control.right, .carousel-control.left {
                            background-image: none;
                            }

                            .carousel-indicators .active {
                            background-color: #00628B!important;
                            }

                            .carousel-indicators li {
                            border: 1px solid #666!important;
                            }

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

                            .carousel-indicators {
                            bottom: -35px!important;}

                            }

                            .carousel-control {
                                width: 25px!important;}



						.interna .panel-group#accordion {
							background-color: #fff;
							border-radius: 20px;
							padding: 15px 33px;
							width: 97%;
							display: block;
							margin: 5px 15px;
							box-shadow: 2px 2px 5px 0px #bdbdbd;
						}

						.mobile .interna .panel-group#accordion {
							background-color: #fff;
							border-radius: 20px;
							padding: 15px 5px;
							width: 97%;
							display: block;
							margin: 5px 15px;
							box-shadow: 2px 2px 5px 0px #bdbdbd;
						}


						.panel.panel-default:last-child {
							border-bottom: none;
							padding-
						}

						a.tc_cuadro_Boton {
							background-color: unset!important;
							border-radius: 0!important;
							text-align: left;
							width: 97%;
							display: block;
							margin: 15px 0px!important;
							box-shadow: none!important;
							padding:0px !important;
						    font-family: 'KievitOT-Medium', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
							font-size: 20px;
							color: #00628b;
						}

						.mobile a.tc_cuadro_Boton {
							width: 97%!important;
							margin: 15px 0px!important;
							padding:0px !important;
							font-size: 12px;
							color: #00628b;
						    padding-left: 15px !important;
						}


						.panel-group .panel {
							border-bottom: 1px solid #eee;
							border-radius: 0;
						    padding-bottom: 0px!important;}


						.panel-default > .panel-heading {
							padding: 0!important;
						}

						.panel-body {
							border-radius: 0!important;
							box-shadow: none!important;
							padding: 0px!important;
						    margin: 0 0 22px 0;
							text-align: left;
						}

						.panel-body p, .panel-body ul li {
							font-family: 'KievitOT', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
                            font-size: 15px;
						}

						.mobile .panel-body p, .mobile .panel-body ul li {
							font-family: 'KievitOT', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
                            font-size: 11px;
							margin: 0 15px;
						}

						.interna .panel-group#accordion img {
							float: right;
							display: inline-block;
							margin: 0 !important;
						}

						.mobile .interna .panel-group#accordion img {
							float: right;
							margin-right: 5px;
							display: inline-block;
							top: -7px;
							position: relative;
						}


						.seguridad {
							color: #00628b;
							background-color: #dbe8f1;
							border-radius: 20px;
							font-family: 'KievitOT-Medium', Expert-Sans-Regular, helvetica, arial, clean, sans-serif;
							display: inline-block;
							padding: 6px 22px;
							font-size: 18px;
						}

						.seguridad img{
							width:20px;
							margin-right: 5px;
						}

						.mobile .seguridad {
							font-size: 15px;
						}


						.mobile .seguridad img{
							width: 15px;
							margin-right: 5px;
						}






.tutorial-tabs {
    max-width: 1300px;
    margin: auto;
}

.section-title {
    color: #005c8f;
    font-size: 32px;
    margin-bottom: 20px;
}

input[type="radio"] {
    display: none;
}

.tabs-layout {
    display: flex;
    gap: 12px;
}

/* ==================
   IMAGEN IZQUIERDA
=================== */

.image-container {
    flex: 1;
    position: relative;
    min-height: 500px;
}

.mobile .image-container {
	display: none;}

.tab-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: all .35s ease;
}

.tab-image img {
    width: 100%;
    object-fit: cover;
    border-radius: 22px;
    display: block;
}

/* ==================
   PANELS ACTIVOS
=================== */

#tab1:checked ~ .tabs-layout .image-1,
#tab2:checked ~ .tabs-layout .image-2,
#tab3:checked ~ .tabs-layout .image-3,
#tab4:checked ~ .tabs-layout .image-4,
#tab5:checked ~ .tabs-layout .image-5,
#tab6:checked ~ .tabs-layout .image-6,
#tab7:checked ~ .tabs-layout .image-7 {
    opacity: 1;
    visibility: visible;
}

/* ==================
   TABS
=================== */

.tabs-nav {
    width: 262px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mobile .tabs-nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 6px;
	flex-wrap: wrap;
    justify-content: space-evenly;
}

.tabs-nav label {
    position: relative;
    padding: 10px 28px;
    cursor: pointer;
    background: #ffffff;
    border-radius: 12px;
    color: #00628b;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: .25s;
	font-family: 'KievitOT-Medium', 'Expert-Sans-Regular', helvetica, arial, clean, sans-serif !important;
	font-weight: unset!important;
}

.tabs-nav.empresas  label{
    padding: 14px 28px;

}

.mobile .tabs-nav label {
	width: 45%;
	color: #00628b!IMPORTANT;
}

.tabs-nav label a {
	color: unset!important;
}

.tabs-nav label a:hover {
	color:unset!important;
}

.tabs-nav label:hover {
	background-color: #00628b!important;
	color: #fff!important;
}


.mobile .tabs-nav label a {
	color #00628b!important;
}

.mobile .tabs-nav label a:hover {
	color: #fff!important;
}


.tabs-nav label:hover {
    transform translateX(4px);
}

.tabs-nav label::after {
    content: "›";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #f58220;
    font-size: 24px;
}

/* ==================
   TAB ACTIVO
=================== */

#tab1:checked ~ .tabs-layout .tabs-nav label[for="tab1"],
#tab2:checked ~ .tabs-layout .tabs-nav label[for="tab2"],
#tab3:checked ~ .tabs-layout .tabs-nav label[for="tab3"],
#tab4:checked ~ .tabs-layout .tabs-nav label[for="tab4"],
#tab5:checked ~ .tabs-layout .tabs-nav label[for="tab5"],
#tab6:checked ~ .tabs-layout .tabs-nav label[for="tab6"],
#tab7:checked ~ .tabs-layout .tabs-nav label[for="tab7"] {
    background: #fff;
    color: #00628b;
}

/* ==================
   RESPONSIVE
=================== */



@media (max-width: 768px) {

    .tutorial-tabs {
        padding: 0 15px;
    }

    .section-title {
        font-size: 24px;
        text-align: center;
    }

    .tabs-layout {
        flex-direction: column;
    }

    .tabs-nav {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 10px;
    }

	.tabs-nav label {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 14px;
        padding: 10px 16px;
    }

	.mobile .tabs-nav label {
		font-size: 12px;
	}

    .image-container {
        width: 100%;
        min-height: 250px;
    }

    .tab-image img {
        width: 100%;
        height: auto;
        border-radius: 16px;
    }

	.tabs-nav label::after {
		right: 4px;
	}


}