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

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
body{font-family: 'Lato', sans-serif; font-size:14px; color:#454545; padding:0; margin:0; background:rgba(50,153,176,0.1)}
.azul{color:#1E99B0}
.gris{color:#575858}
h1{ margin-block-start: 0em; margin-block-end: 0em;}
.vacio, .Vacio{clear:both}

/*.regresarNo{color:#1e99b0; text-align:center;font-size:1.2em; font-weight:600; padding-top:25px}
.regresarNo:hover{cursor:pointer}*/


#NewSimulator{margin:auto; box-shadow: 2px 2px 2px #f1f2f3; border:1px solid #f1f2f3;-webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; background:rgba(50,153,176,0.1)}
#StepsFrame{ min-height:615px;background:#ffffff; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px}
#LeftSimulator{padding:150px 15px 0 0; vertical-align: bottom; text-align:right;  }
#LeftSimulator img{width:191px; height:auto}
.BotonIniciar:hover{background:#c41033}

.ClaimResultado{font-weight:bold; font-size:2em; padding:20px 10px 0 10px}
.viable{color: #34A853;}
.Posible{color:#FFB117}
.NoViable{color:#E53558}
.DatosOperacion1, .DatosOperacion2,.DatosOperacion3{padding:30px 20px 0 20px;font-size:1.3em}
	.DatosGRacias{font-size:1.3em; text-align:center}
#NuevaCuota1, .AhorroRefi1{font-weight:bold; color:#1E99B0}

.BtnAccion, .BtnAccion2, .regresarNo, .BtnAComenzar{ padding:10px 0; text-align:center; font-weight:bold; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; color:#ffffff}
.BtnAccion, .BtnAccion2, .regresarNo{width:200px; background:#e53759; font-size:1.2em; padding:10px 0; text-align:center; font-weight:bold; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; color:#ffffff}
.BtnAComenzar{width:280px;background:#34c738; font-size:1.6em}
.BtnAccion{ margin:20px auto 0 auto;}
.regresarNo{ margin:45px auto 0 auto;}
.BtnAccion2, .BtnAComenzar{margin:-17px auto 0 auto;}
.BtnAccion:hover, .BtnAccion2:hover, .regresarNo:hover{background-color:#AA0A29; cursor:pointer}
.BtnAComenzar:hover{background:#2d9721; cursor:pointer}
	#BotonIniciar{cursor:pointer}
/*TAMAÑO MOBILE POR DEFECTO*/


#Step0{padding:0 20px 20px 20px; min-height:470px; vertical-align: bottom }
.GBADGE{width:240px; margin:10px auto 0 auto}
#LeftSimulator img{width:191px; height:auto}
#Step1, #Step2, #Step3, #Step4, #Step7, #Step8, #Step9, #Step10, #Step11, #Step12, #Step13, #Step14, #Step5, #Step6, #Step15{min-height:470px; padding:0 20px}

/*#Step5, #Step6{min-height:610px; padding:0 20px 15px 20px}*/
#Step0 h1{font-size:2em; color:#1e99b0; text-align:center; font-weight:normal}
#Step0 h1 span{font-weight:900}
.Explicacion{text-align:center}
.Explicacion img{width:300px; height:auto; max-height:250px}
#BotonIniciar{}
.ExpSimulador{margin:30px 0 0 0; font-size:.85em}
.Explicacion img{width:300px; height:auto;}

.NavMob{padding:5px 10px; background:#ffffff; z-index:20}
.CerrarSimulador{width:150px; text-align:right; line-height:40px; font-size:1.1em; font-weight:bold; float:right}
#Flechas{height:40px;}
.CerrarSimulador a{color:#1e99b0; text-decoration:none}
.Regresar{width:40px; float:left}
.Regresar img{width:39px; height:auto}
.stepMarker{margin-bottom:20px; background:#ffffff; z-index:20}
.stepMarker{padding:0 5px;}
.mrk1, .mrk2{width:7.7%; border:2px solid #ffffff; float:left; height:6px}
.mrk1{background:#1e99b0;}
.mrk2{ background:#ececeb;}

.Question{text-align:center; font-size:1.2em; font-weight:bold}
.Question:hover{cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;}
.Answer{width:250px; margin:22px auto 5px auto; height:36px; text-align:center; -webkit-border-radius:15px; -moz-border-radius:18px; border-radius:18px; line-height:36px; border:1px solid #444444;font-size:1.1em}
.Answer:hover{border:1px solid #1e99b0; color:#1e99b0; box-shadow:0 0 6px 0 #93cff7; cursor:pointer;-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;}
.BoxInput, .selecthora{ margin:5px 5%; border:1px solid #444444; height:36px; line-height:36px; -webkit-border-radius:18px; -moz-border-radius:18px; border-radius:18px; padding:0 10px; font-size:1.1em}
.BoxInput{width:90%;}
.selecthora{width:96%; height:36px}
.BoxInput:focus, .selecthora:focus{color:#1e99b0; border-color:#1e99b0; outline:none!important; box-shadow:0 0 6px 0 #93cff7;}
.selecthora option{line-height:30px}
.clausulado{font-size:.85em;  text-align:center}
.clausulado labe{padding:0; line-height:1}
#chkClausula{margin:8px 8px 0 0}

.ClaimGracias{font-weight:bold; font-size:2em; padding:0 20px; text-align:center}
.IcoGracias{text-align:center; }
.IcoGracias img{width:90px; height:auto}


header{ width:100%;background:#ffffff; position:fixed;top:0; left:0; -webkit-box-shadow: 0px 5px 13px -11px #000000; box-shadow: 0px 5px 13px -11px #000000; z-index:99; height:76px}
.HeaderWrapper, .Wrapper{padding:10px 20px;  max-width:1240px; margin:0 auto;}
 .Wrapper{height:auto!important;}
#BtnMenu{height: 25px;width: 37px; margin-top:10px; float:left}
#LogoMovil{display:block;  width:48px;height:56px; margin-left:20px; float:left}
#LogoMovil img{width:38px; height:56px;}
#Logo{display:none}
#Logo img{heigth:auto; width:99%}
#MainMEnu{display:none}
ul.TopMenu{padding:0; margin:0; list-style:none}
ul.TopMenu li{font-weight:bold; line-height:40px; float:left;}
ul.TopMenu li a, ul.MobileMenu li a {color:#444444!important; text-decoration:none}
#Telefono, #TelefonoNV{background:#E53558;border-radius:16px; padding:10px;box-shadow: 0 0 0 0 rgb(255,255,255,0);-webkit-transition:  background .3s ease; -moz-transition:  background .3s ease; -o-transition:  background .3s ease; transition: background .3s ease;}
#Telefono{display:none;float:right; margin:0}
#TelefonoNV{margin:20px auto 20px auto; width:240px}
#Telefono:hover, #TelefonoNV:hover{background:#b71e5e;box-shadow:0 0 8px 0 rgba(223,2,46,0.2)}
.topllama{color:#ffffff; font-weight:bold; text-align:left; width:auto; float:left; }
.TopPhone{font-weight:bolder; color:#ffffff; float:right}
 .TopPhone{font-size:30px;}
#TelMovil{width:48px; padding:4px 0; float:right}
#WHatsMovil{width:48px; padding:4px 0; margin-right:20px; float:right}
/*MENU MOVIL-TABLET*/

#OutMobileMenu{width:100%; height:100vh; background:#ffffff; position:fixed; top:0; left:0; z-index:100;}
.InMobileMenu{Padding:15px 20px}
#CloseMenu{width:30px; margin:9px 0;float:left}
#CloseMenu img{width:24px; height:22px}
#LogoMenuANPB{margin:0 0 0 15px;width:200px; float:left}
ul.MobileMenu{padding:0; margin:0; list-style:none}
ul.MobileMenu li {font-weight:bold;font-size: 1.1em; line-height: 60px;}
ul.MobileMenu li.WA{background:url(Images/IconoWSP1.png) right center no-repeat; background-size:30px 30px}
ul.MobileMenu li.TM{background:url(Images/icontelmovil.png) right center no-repeat; background-size:30px 30px}


#Resenas,#Beneficios, #Porque,  #flujo{ height:auto; background:#ffffff;}
#Adecuada, #Porque,  #Diferencias,  #WHY, #WHEN,#preg{ height:auto;}
#Resenas{margin:20px 0 0 0;}
#Porque, #Adecuada, #WHEN{margin:0; Padding:20px 0 0 0}
#Beneficios, #flujo ,#preg{margin: 0;}
#WHY{padding:30px 0}

#Resenas h2, #Como h2, #Porque h2, #preg h2, #Adecuada h2, #Diferencias h2, #WHY h2,#WHEN h2 {width:100%;display:inline-block;margin:0; padding:0 0 25px 0; color:#2e99b0; text-align:center; font-size:1.6em; line-height:1.2em}
#Beneficios h2, #flujo h2 {width:100%;display:inline-block;margin:0; padding:25px 0 25px 0; color:#2e99b0; text-align:center; font-size:1.6em; line-height:1.2em}
#ContentResenas{padding:10px 0}

#Como{ padding:20px 0}
p.TExtoInterior{font-size:1em;color:#44444}
.Video{width:100%; max-width:310px;background:#ffffff; margin:15px auto;border-radius:10px}
.bgvid{position: relative; right: 0;bottom: 0; width: auto; max-height: 170px; height: auto;background-size: cover;  overflow: hidden; background: #ffffff;border-radius:8px;}
ul.Ventajas{margin:10px 0 0 20px; list-style: disc outside; background:url(Images/Justomovil.svg) center bottom no-repeat; background-size:300px 300px; padding:10px 0 320px 0}
ul.Ventajas2{margin:10px 0 0 20px; list-style: decimal outside; background:url(Images/VentajasMobile.svg)center bottom no-repeat; background-size:300px 300px; padding:10px 0 280px 0}
ul.When{margin:10px 0 0 20px; list-style: disc outside; background:url(Images/ThinkMobile.svg) center bottom no-repeat; background-size:300px auto; padding:10px 0 280px 0}
ol.Bene{margin:10px 0 0 20px; list-style: decimal outside;background:url(Images/ConvieneMobile.svg) center bottom no-repeat;  background-size:300px 300px; padding:10px 0 320px 0}
ul.Benepasos{margin:10px 0 0 20px; list-style: decimal outside;background:url(Images/FlujoMobile.svg)center bottom no-repeat;  background-size:300px auto; padding:10px 0 320px 0}
ol.when2{margin:10px 0 0 20px; list-style: disc outside; background:url(Images/ThinkMobile.svg) center bottom no-repeat; background-size:300px auto; padding:10px 0 320px 0}

ul.Ventajas li, ul.Ventajas2 li, ol.Bene li, ul.Benepasos li, ul.When li, ol.when2 li{padding-bottom:1em}
.qya{background:url(Images/FaqMobile.svg) center bottom no-repeat;  background-size:280px; padding:10px 0 300px 0}
	.faqs{font-size:1.1em; }
	.Question2{font-weight:normal; font-size:1.1em; display:inline}
.Question2:hover{cursor:pointer}
	.Answer2{font-size:1.1em; display:inline}
.BTC2C{margin: 0; background:rgba(30,153,176,1); -webkit-box-shadow: inset 0px 3px 6px 4px rgba(170,168,169,0.22); 
    box-shadow: inset 0px 3px 6px 4px rgba(170,168,169,0.22); }
.BottomBtn{width:300px; background:#E53558; text-align:center; height:40px; line-height:40px; margin:40px auto; border-radius:8px; font-weight:bold; color:#ffffff; font-size:1.1em}
footer {padding:10px 0}
#Copy{text-align:center;padding:0 0 10px 0; font-size:.9em}
#Legales{padding:5px 0 10px 0; text-align:center; font-size:.9em}
#Legales a{color:#444444; text-decoration:none; padding:0 5px}
.Reacciona{text-align:center; padding:10px 0 0 0}
.section{  scroll-margin-top: 90px;}
#cookiescript_badge{display:none!important}
#Callout{background:url(Images/Callout.png) center center no-repeat; width:190px;padding:8px 60px 50px 60px; text-align:center; color:#ffffff; font-size:1.5em; display:none}
@media only screen and (max-width:540px) {
	#LeftSimulator{display:none}
	.NavMob{padding:80px 10px 5px 10px; }
#Step1, #Step2, #Step3, #Step4, #Step7, #Step8, #Step9, #Step10, #Step11, #Step12, #Step13, #Step14, #Step5, #Step6, #Step15 {
  min-height: 530px;
  padding: 0 20px;
}
	#SubClaimMobile{background:url(Images/MobileCallout.png) center center no-repeat; width:116px; height:50px; float:right; margin-right:7px; text-align:center; color:#ffffff; font-weight:600; padding:6px 5px 0 10px; line-height:1; display:block}
}
@media only screen and (min-width:541px) and (max-width:766px) {
	#NewSimulator{max-width:370px; margin:auto}
	#StepsFrame{}
	#LeftSimulator{display:none}
	.NavMob{padding:80px 10px 5px 10px; }
	#Step1, #Step2, #Step3, #Step4, #Step7, #Step8, #Step9, #Step10, #Step11, #Step12, #Step13, #Step14, #Step5, #Step6, #Step15 {
  min-height: 530px;
  padding: 0 20px;
}
	#SubClaimMobile{background:url(Images/MobileCallout.png) center center no-repeat; width:116px; height:50px; float:right; margin-right:7px; text-align:center; color:#ffffff; font-weight:600; padding:6px 5px 0 10px; line-height:1; display:block}
}
@media only screen and (min-width:767px) and (max-width:989px) {
	#NewSimulator{width:720px; margin:auto; background:none; box-shadow:none; margin-top:15px}
	#StepsFrame{width:430px; float:right; margin-right:20px;}
	.stepMarker{padding:0 10px;}
	.NavMob {
  padding: 90px 10px 5px 10px;
}
	#LeftSimulator{display:block; width:250px}
	.ClaimResultado { font-size: 2.3em;}
	.DatosOperacion1, .DatosOperacion2, .DatosGRacias { font-size: 1.3em;}
	.ExpSimulador { margin: 40px 0 0 0;}
	 header{height:90px}

	#LogoMovil, #TelMovil, #WHatsMovil{display:none}
    #Logo{display:block; width:240px; float:left; margin-left:15px;}
    #Telefono, #TelefonoNV{display:block;width:230px; }
    ul.MobileMenu{max-width:540px; margin:0 auto}
    .topllama{font-size:1em}
    .TopPhone{font-size:30px;}
	#Step1, #Step2, #Step3, #Step4, #Step7, #Step8, #Step9, #Step10, #Step11, #Step12, #Step13, #Step14, #Step5, #Step6 {
  min-height: 530px;
  padding: 0 20px;
}
	 #Resenas, #Porque{margin:35px 0}
	
		#Resenas h2, #Como h2, #Porque h2, #preg h2, #Adecuada h2,#Beneficios h2, #flujo h2,#Diferencias h2, #WHY h2, #WHEN h2 { font-size:2em; line-height:1.2em}

	#ContentResenas{padding:10px 0}
	
	#Resenas{background:#ffffff}
	#Resenas{margin:35px 0 00; padding-top:20px}
	#Porque, #Diferencias, #WHY{margin:0; padding-top:20px}
	#Como, .BTC2C{padding:10px 0; }
	
	.Video{width:100%; max-width:700px;background:#ffffff; margin:15px auto;border-radius:10px}
	.bgvid{ max-height: 370px;}
    .DatosOperacion1{padding:30px 0 30px 0!important;font-size:1.2em}
	.DatosGRacias{font-size:1.2em}
	#SubClaimMobile{ display:none}
	#Callout{ display:block; margin-left:-60px}
}
@media only screen and (min-width:990px) and (max-width:1199px) {
	#NewSimulator{width:800px; margin:auto; background:none; box-shadow:none; margin-top:15px}
	#StepsFrame{width:480px; float:right; margin:0 20px 0 0}
	#LeftSimulator{display:block; width:300px}
		.NavMob {
  padding: 90px 10px 5px 10px;
}
	.Explicacion img{width:450px; }
	.stepMarker{padding:0 10px;}
	.mrk1, .mrk2{width:8%;}
	.ClaimResultado { font-size: 2.6em;}
	.DatosOperacion1, .DatosOperacion2, .DatosGRacias { font-size: 1.8em;}
	.DatosOperacion3{font-size:1.5em}
	.ExpSimulador { margin: 40px 0 0 0;}
	header{height:90px}
    #BtnMenu, #LogoMovil, #TelMovil, #WHatsMovil{display:none}
    #OutMobileMenu{display:none}
    #Logo{display:block; width:262px; float:left; margin-left:15px;}
    #Telefono{display:block;width:240px; }
    .topllama{font-size:1em}
    .TopPhone{font-size:30px;}
    #MainMEnu{display:block; width:35%; margin:10px 20px 0 0; float:right}
    ul.TopMenu li{font-size:.9em;margin:0 5px}
    .ast{font-size:1em}
	#Resenas{background:#ffffff}
	#Resenas{margin:50px 0 0 0; padding-top:30px}
	#Porque, #Diferencias, #WHY{margin:0; padding-top:30px}
	#Como, .BTC2C{padding:10px 0; }
	 p.TExtoInterior{font-size:1.2em; max-width:970px; margin:auto}
    .Video{width:100%; max-width:800px;background:#ffffff; margin:15px auto;border-radius:10px}
	.bgvid{ max-height: 420px;}
    .whyANPB p, ul.Ventajas,ul.Ventajas2, ol.Bene,ul.Benepasos, ul.When, ol.when2{font-size:1.2em}

    .whyANPB{max-width:970px; margin:auto}
    ul.Ventajas{background:url(Images/Justo.svg) left bottom no-repeat; background-size: 300px 432px; padding:20px 0 0 340px}
		ul.Ventajas2 {background:url(Images/VentajasMobile.svg)left bottom no-repeat; background-size:300px; padding:20px 0 0 340px}
	ul.When, ol.when2{ background:url(Images/ThinkMobile.svg) 40px top no-repeat; background-size:230px auto; padding:10px 0 0 320px}

ol.Bene{margin:10px 0 0 20px; list-style: decimal outside;background:url(Images/ConvieneMobile.svg) left bottom no-repeat;  background-size:300px auto; padding:10px 0 0 340px}
ul.Benepasos{margin:10px 0 0 20px; list-style: decimal outside;background:url(Images/FlujoTablet.svg)left top no-repeat;  background-size:300px auto; padding:10px 0 0 340px}
		.qya{background:url(Images/FaqMobile.svg) 40px bottom no-repeat;  background-size:230px auto; padding:10px 0 0 300px}

	#Callout{ display:block}
	#SubClaimMobile{ display:none}
	#Step14 {  min-height: 530px;  padding: 40px 20px 0 20px;}
}
	
	
@media only screen and (min-width:1200px)  {
	#NewSimulator{width:800px; margin:auto; background:none; box-shadow:none; margin-top:15px}
	#StepsFrame{width:480px; float:right; margin:80px 20px 0 0}
	#LeftSimulator{display:block;  padding: 125px 15px 0 0; width:300px}

	.Explicacion img{width:450px; }
	.stepMarker{padding:0 10px;}
	.mrk1, .mrk2{width:8%;}
	.ClaimResultado { font-size: 2.6em;}
	.DatosOperacion1, .DatosOperacion2, .DatosGRacias { font-size: 1.8em;}
	.DatosOperacion3{font-size:1.5em}
	.ExpSimulador { margin: 40px 0 0 0;}
	header{height:90px}
    #BtnMenu, #LogoMovil, #TelMovil, #WHatsMovil{display:none}
    #OutMobileMenu{display:none}
    #Logo{display:block; width:262px; float:left; margin-left:15px;}
    #Telefono, #TelefonoNV{display:block;width:290px; }
     .topllama{font-size:1.1em; margin-top:5px;}
    .TopPhone{font-size:36px;}
   #MainMEnu{display:block; width:45%; margin:10px 20px 0 0; float:right}
	ul.TopMenu li{font-size:.9em;margin:0 8px}
	#Resenas, #WHY{background:#ffffff}
	#Resenas{margin:50px 0 0 0; padding-top:30px}
	#Porque, #Diferencias{margin:0; padding-top:30px}
	#Como, .BTC2C{padding:10px 0; }
	
	#Resenas h2, #Como h2, #Porque h2, #preg h2, #Adecuada h2,#Beneficios h2, #flujo h2, #Diferencias h2,  #WHY h2,#WHEN h2 { font-size:2em; line-height:1.2em}
    #ContentResenas{padding:10px 0}
    
    p.TExtoInterior{font-size:1.3em; max-width:970px; margin:auto}
    .Video{width:100%; max-width:800px;background:#ffffff; margin:15px auto;border-radius:10px}
    .bgvid{ max-height: 420px;}
 .whyANPB{max-width:970px; margin:auto; padding-bottom:25px;}
    .whyANPB p, ul.Ventajas, ol.Bene, ul.Ventajas2, ul.Benepasos, ul.When, ol.when2{font-size:1.3em}
     ul.Ventajas{background:url(Images/Justo.svg) left bottom no-repeat; background-size: auto 450px; padding:20px 0 0 420px}
	ul.Ventajas2 {background:url(Images/VentajasMobile.svg)60px -20px no-repeat; background-size: 300px auto; padding:20px 0 0 420px}
		ul.When{ background:url(Images/ThinkMobile.svg) 40px bottom no-repeat; background-size:260px auto; padding:10px 0 0 270px}
	ol.when2{background:url(Images/ThinkMobile.svg) left top no-repeat; background-size:300px auto; padding:10px 0 0 270px}


	ol.Bene{margin:10px 0 0 20px; list-style: decimal outside;background:url(Images/Exito2.svg) 150px  bottom no-repeat;  background-size:300px; padding:10px 0 0 420px}
ul.Benepasos{margin:10px 0 0 20px; list-style: decimal outside;background:url(Images/FlujoTablet.svg)left  top no-repeat;  background-size:300px auto; padding:10px 0 0 330px}
	ul.Benepasos li{padding-bottom:1em}
	.qya{background:url(Images/FaqMobile.svg) 40px bottom no-repeat;  background-size:260px auto; padding:10px 0 0 420px}

	.Question2,.Answer2{font-size:1.3em;}

	.selecthora {
  width: 80%;
  height: 36px;
  background: #fff;
}
	elemento {
}
.selecthora {  width: 85%;  height: 36px;  background: #fff;}
	.BoxInput {
		width: 80%;}
.BoxInput, .selecthora {
	margin: 5px 10%;}
	#Callout{ display:block}
	#SubClaimMobile{ display:none}
}


details{margin-bottom:1em}
summary{padding-bottom:1em}

dt{border-bottom:1px solid #565656}
dd{margin:4px 0 4px 15px}

.alertaError{background:url(Images/closeAlert.png) left center no-repeat #e01834;line-height:18px; padding:15px 0; text-align:center; color:#ffffff; margin:15px -20px; width:100%; max-width:480px; position:absolute; z-index:3;}
#ErrorNombre, #ErrorMail,#ErrorMailB, #ErrorTel, #ErrorTelB, #ErrorClau, #ErrorNombre2, #ErrorMail2, #ErrorMail2B, #ErrorTel2, #ErrorTel2B, #ErrorClau2{ display:none; -webkit-user-select: none; -ms-user-select: none;  user-select: none; }
.alertaError:hover{background:#aa091f;cursor:pointer}