@charset "utf-8";
/* =============================================================================
   SIMULADOR AGENCIA NEGOCIADORA — SimuladorEstilos.css
   Todos los valores visuales vienen de las variables CSS inyectadas por
   SimuladorRender.js desde SimuladorConfig.estilos
   NO editar los valores aquí directamente — usar el Configurador o SimuladorConfig.js
   ============================================================================= */

/* ---- Variables CSS (inyectadas por JS desde SimuladorConfig.estilos) ---- */
:root {
  /* Colores de marca */
  --sim-color-primario:          #1E99B0;
  --sim-color-primario-oscuro:   #177a8c;
  --sim-color-fondo:             rgba(50,153,176,0.1);
  --sim-color-cta:               #E53558;
  --sim-color-cta-hover:         #AA0A29;
  --sim-color-comenzar:          #34c738;
  --sim-color-comenzar-hover:    #2d9721;

  /* Colores semánticos resultado */
  --sim-color-viable:            #34A853;
  --sim-color-posible:           #FFB117;
  --sim-color-no-viable:         #E53558;

  /* Colores texto y bordes */
  --sim-color-texto:             #454545;
  --sim-color-borde-respuesta:   #444444;

  /* Tipografía */
  --sim-fuente:                  'Lato', sans-serif;
  --sim-tamano-base:             14px;
  --sim-tamano-pregunta:         1.2em;
  --sim-tamano-respuesta:        1.1em;
  --sim-tamano-h1:               2em;
  --sim-tamano-claim:            2em;
  --sim-tamano-datos:            1.3em;

  /* Geometría simulador */
  --sim-radio-respuesta:         18px;
  --sim-radio-boton:             8px;
  --sim-ancho-respuesta:         250px;
  --sim-alto-respuesta:          36px;
  --sim-ancho-cta:               200px;
  --sim-ancho-comenzar:          280px;

  /* Progress bar */
  --sim-progress-activo:         #1e99b0;
  --sim-progress-inactivo:       #ececeb;
  --sim-progress-alto:           6px;
}

/* =============================================================================
   BASE
   ============================================================================= */
body {
  font-family: var(--sim-fuente);
  font-size: var(--sim-tamano-base);
  color: var(--sim-color-texto);
  padding: 0;
  margin: 0;
  background: var(--sim-color-fondo);
}
.azul  { color: var(--sim-color-primario); }
h1     { margin-block-start: 0; margin-block-end: 0; }
.vacio, .Vacio { clear: both; }

/* =============================================================================
   SIMULADOR — CONTENEDOR
   ============================================================================= */
#NewSimulator {
  margin: auto;
  box-shadow: 2px 2px 2px #f1f2f3;
  border: 1px solid #f1f2f3;
  border-radius: 0 0 10px 10px;
  background: var(--sim-color-fondo);
}
#StepsFrame {
  min-height: 615px;
  background: #ffffff;
  border-radius: 0 0 10px 10px;
}
#LeftSimulator {
  padding: 150px 15px 0 0;
  vertical-align: bottom;
  text-align: right;
}
#LeftSimulator img { width: 191px; height: auto; }

/* =============================================================================
   PROGRESS BAR
   ============================================================================= */
.stepMarker {
  margin-bottom: 20px;
  background: #ffffff;
  z-index: 20;
  padding: 0 5px;
}
.mrk1, .mrk2 {
  width: 7.7%;
  border: 2px solid #ffffff;
  float: left;
  height: var(--sim-progress-alto);
}
.mrk1 { background: var(--sim-progress-activo); }
.mrk2 { background: var(--sim-progress-inactivo); }

/* =============================================================================
   PASO 0 — PANTALLA INICIO
   ============================================================================= */
#Step0 {
  padding: 0 20px 20px 20px;
  min-height: 470px;
  vertical-align: bottom;
}
#Step0 h1 {
  font-size: var(--sim-tamano-h1);
  color: var(--sim-color-primario);
  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; }
.GBADGE { width: 240px; margin: 10px auto 0 auto; }
#BotonIniciar { cursor: pointer; }

/* =============================================================================
   BOTONES
   ============================================================================= */
.BtnAComenzar {
  width: var(--sim-ancho-comenzar);
  background: var(--sim-color-comenzar);
  font-size: 1.6em;
  padding: 10px 0;
  text-align: center;
  font-weight: bold;
  border-radius: var(--sim-radio-boton);
  color: #ffffff;
  margin: -17px auto 0 auto;
}
.BtnAComenzar:hover {
  background: var(--sim-color-comenzar-hover);
  cursor: pointer;
}
.BtnAccion, .BtnAccion2, .regresarNo {
  width: var(--sim-ancho-cta);
  background: var(--sim-color-cta);
  font-size: 1.2em;
  padding: 10px 0;
  text-align: center;
  font-weight: bold;
  border-radius: var(--sim-radio-boton);
  color: #ffffff;
}
.BtnAccion  { margin: 20px auto 0 auto; }
.regresarNo { margin: 45px auto 0 auto; }
.BtnAccion2 { margin: -17px auto 0 auto; }
.BtnAccion:hover, .BtnAccion2:hover, .regresarNo:hover {
  background: var(--sim-color-cta-hover);
  cursor: pointer;
}

/* =============================================================================
   PREGUNTAS Y RESPUESTAS
   ============================================================================= */
#Step1, #Step2, #Step3, #Step4, #Step5, #Step6,
#Step7, #Step8, #Step9, #Step10, #Step11,
#Step12, #Step13, #Step14, #Step15 {
  min-height: 470px;
  padding: 0 20px;
}
.NavMob { padding: 5px 10px; background: #ffffff; z-index: 20; }
#Flechas { height: 40px; }
.Regresar { width: 40px; float: left; }
.Regresar img { width: 39px; height: auto; }

.Question {
  text-align: center;
  font-size: var(--sim-tamano-pregunta);
  font-weight: bold;
  -webkit-user-select: none;
  user-select: none;
}
.Question:hover { cursor: default; }

.Answer {
  width: var(--sim-ancho-respuesta);
  margin: 22px auto 5px auto;
  height: var(--sim-alto-respuesta);
  text-align: center;
  border-radius: var(--sim-radio-respuesta);
  line-height: var(--sim-alto-respuesta);
  border: 1px solid var(--sim-color-borde-respuesta);
  font-size: var(--sim-tamano-respuesta);
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.Answer:hover {
  border-color: var(--sim-color-primario);
  color: var(--sim-color-primario);
  box-shadow: 0 0 6px 0 rgba(147,207,247,0.7);
}
.Answer:focus, .Answer:active {
  border: 1px solid var(--sim-color-primario);
  color: var(--sim-color-primario);
  box-shadow: 0 0 6px 0 #93cff7;
}

/* =============================================================================
   FORMULARIO DE CONTACTO
   ============================================================================= */
.BoxInput, .selecthora {
  margin: 5px 5%;
  border: 1px solid #444444;
  height: 36px;
  line-height: 36px;
  border-radius: var(--sim-radio-respuesta);
  padding: 0 10px;
  font-size: 1.1em;
}
.BoxInput { width: 90%; }
.selecthora { width: 96%; height: 36px; }
.BoxInput:focus, .selecthora:focus {
  color: var(--sim-color-primario);
  border-color: var(--sim-color-primario);
  outline: none !important;
  box-shadow: 0 0 6px 0 #93cff7;
}
.clausulado { width: 82%; margin: 15px 9%; font-size: .85em; text-align: center; }
#chkClausula { margin: 8px 8px 0 0; }

/* =============================================================================
   RESULTADOS
   ============================================================================= */
.ClaimResultado {
  font-weight: bold;
  font-size: var(--sim-tamano-claim);
  padding: 20px 10px 0 10px;
}
.viable   { color: var(--sim-color-viable); }
.Posible  { color: var(--sim-color-posible); }
.NoViable { color: var(--sim-color-no-viable); }

.DatosOperacion1, .DatosOperacion2, .DatosOperacion3, .DatosOperacion4 {
  padding: 30px 20px 0 20px;
  font-size: var(--sim-tamano-datos);
}
.DatosGRacias { font-size: var(--sim-tamano-datos); text-align: center; }

#NuevaCuota1, .AhorroRefi1 {
  font-weight: bold;
  color: var(--sim-color-primario);
}
.ExpSimulador { margin: 30px 0 0 0; font-size: .85em; }

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

/* =============================================================================
   LOADING
   ============================================================================= */
.Loading { text-align: center; padding: 30% 0; }

/* =============================================================================
   ALERTAS / ERRORES
   ============================================================================= */
.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;
}
.alertaError:hover {
  background: url(Images/closeAlert.png) left center no-repeat #aa091f;
  cursor: pointer;
}
#ErrorNombre, #ErrorMail, #ErrorMailB, #ErrorTel, #ErrorTelB, #ErrorClau,
#ErrorNombre2, #ErrorMail2, #ErrorMail2B, #ErrorTel2, #ErrorTel2B, #ErrorClau2 {
  display: none;
  user-select: none;
}

/* =============================================================================
   HEADER
   ============================================================================= */
header {
  width: 100%;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  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 { height: 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: var(--sim-color-cta);
  border-radius: 16px;
  padding: 10px;
  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; float: left; }
.TopPhone { font-weight: bolder; color: #ffffff; float: right; font-size: 30px; }
#TelMovil { width: 48px; padding: 4px 0; float: right; }
#WHatsMovil { width: 48px; padding: 4px 0; margin-right: 20px; float: right; }

/* =============================================================================
   MENÚ MÓVIL
   ============================================================================= */
#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; }

/* =============================================================================
   SECCIONES LANDING
   ============================================================================= */
#Resenas, #Porque, #flujo { height: auto; background: #ffffff; }
#Resenas { margin: 20px 0 0 0; }
#Porque { margin: 0; padding: 20px 0 0 0; }
#Como { padding: 20px 0; }
#WHY { padding: 30px 0; }
.BTC2C {
  margin: 0;
  background: var(--sim-color-primario);
  box-shadow: inset 0px 3px 6px 4px rgba(170,168,169,0.22);
}
.BottomBtn {
  width: 300px;
  background: var(--sim-color-cta);
  text-align: center;
  height: 40px;
  line-height: 40px;
  margin: 40px auto;
  border-radius: var(--sim-radio-boton);
  font-weight: bold;
  color: #ffffff;
  font-size: 1.1em;
}
#Resenas h2, #Como h2, #Porque h2 {
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0 0 25px 0;
  color: var(--sim-color-primario);
  text-align: center;
  font-size: 1.6em;
  line-height: 1.2em;
}
p.TExtoInterior { font-size: 1em; }
.Video { width: 100%; max-width: 310px; background: #ffffff; margin: 15px auto; border-radius: 10px; }
.bgvid { position: relative; width: auto; max-height: 170px; height: auto; background: #ffffff; border-radius: 8px; overflow: hidden; }
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.Ventajas li { padding-bottom: 1em; }
#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; }
#SubClaimMobile { display: none; }

/* =============================================================================
   FOOTER
   ============================================================================= */
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; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media only screen and (max-width: 540px) {
  #LeftSimulator { display: none; }
  .NavMob { padding: 80px 10px 5px 10px; }
  #Step1, #Step2, #Step3, #Step4, #Step5, #Step6,
  #Step7, #Step8, #Step9, #Step10, #Step11,
  #Step12, #Step13, #Step14, #Step15 { min-height: 530px; padding: 0 20px 20px 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;
  }
  .Answer { width: 75%; height: auto; line-height: 1.1; padding: 10px 20px; }
}
@media only screen and (min-width: 541px) and (max-width: 766px) {
  #NewSimulator { max-width: 370px; margin: auto; }
  #LeftSimulator { display: none; }
  .NavMob { padding: 80px 10px 5px 10px; }
  #Step1, #Step2, #Step3, #Step4, #Step5, #Step6,
  #Step7, #Step8, #Step9, #Step10, #Step11,
  #Step12, #Step13, #Step14, #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;
  }
  .Answer { width: 75%; height: auto; line-height: 1.1; padding: 10px 20px; }
}
@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; }
  #Callout { display: block; margin-left: -60px; }
  .ClaimResultado { font-size: 2.3em; }
  .DatosOperacion1, .DatosGRacias { font-size: 1.3em; }
  header { height: 90px; }
  #LogoMovil, #TelMovil, #WHatsMovil { display: none; }
  #Logo { display: block; width: 240px; float: left; margin-left: 15px; }
  #Telefono { display: block; width: 230px; }
  .topllama { font-size: 1em; }
  .TopPhone { font-size: 30px; }
  .Answer { width: 96%; }
}
@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, .DatosGRacias { font-size: 1.8em; }
  .DatosOperacion3 { font-size: 1.5em; }
  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; }
  #MainMEnu { display: block; width: 35%; margin: 10px 20px 0 0; float: right; }
  ul.TopMenu li { font-size: .9em; margin: 0 5px; }
  .Answer { width: 90%; }
  #Callout { display: block; }
  .Video { max-width: 800px; }
  .bgvid { max-height: 420px; }
  ul.Ventajas { background: url(Images/Justo.svg) left bottom no-repeat; background-size: 300px 432px; padding: 20px 0 0 340px; }
}
@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, .DatosGRacias { font-size: 1.8em; }
  .DatosOperacion3 { font-size: 1.5em; }
  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: 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; }
  .Answer { width: 90%; }
  .BoxInput { width: 80%; }
  .BoxInput, .selecthora { margin: 5px 10%; }
  .selecthora { width: 85%; height: 36px; background: #fff; }
  #Callout { display: block; }
  .Video { max-width: 800px; }
  .bgvid { max-height: 420px; }
  ul.Ventajas { background: url(Images/Justo.svg) left bottom no-repeat; background-size: auto 450px; padding: 20px 0 0 420px; }
  p.TExtoInterior { font-size: 1.3em; max-width: 970px; margin: auto; }
  .DatosOperacion4 { font-size: 1.5em; }
}