/* ===== Fuentes ===== */
@font-face { font-display: swap; font-family: 'Rubik'; font-style: normal; font-weight: 300; src: url('./fonts/rubik-v28-latin-300.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Rubik'; font-style: normal; font-weight: 400; src: url('./fonts/rubik-v28-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Rubik'; font-style: normal; font-weight: 500; src: url('./fonts/rubik-v28-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Rubik'; font-style: normal; font-weight: 600; src: url('./fonts/rubik-v28-latin-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Rubik'; font-style: normal; font-weight: 700; src: url('./fonts/rubik-v28-latin-700.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Rubik'; font-style: normal; font-weight: 800; src: url('./fonts/rubik-v28-latin-800.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Rubik'; font-style: normal; font-weight: 900; src: url('./fonts/rubik-v28-latin-900.woff2') format('woff2'); }

@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('./fonts/roboto-v32-latin-300.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('./fonts/roboto-v32-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('./fonts/roboto-v32-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('./fonts/roboto-v32-latin-700.woff2') format('woff2'); }

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("./fonts/Inter-Thin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("./fonts/Inter-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/Inter-Light.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/Inter-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/Inter-Black.woff2") format("woff2"); }

/* ===== Variables ===== */
:root{
  font-variant-ligatures: none;
  --font-primary-family: "Rubik", sans-serif;
  --font-secondary-family: "Roboto", serif;
  --font-inter-family: "Inter", sans-serif;
  --primary-color: #002159;
  --secondary-color: #2186EB;
  --primary-bg: #F0F5FB;
  --neutral-color: #375470;
  --neutral-color-strong: #0F273E;
}

/* ===== Utilidades / helpers ===== */
.primaryColor{ color:var(--primary-color); }
.secondaryColor{ color:var(--secondary-color); }
.white-text{ color:#fff !important; }
.gray-text{ color:rgba(55,84,112,1); }
.footnote-section {
  width: 100%;
  display: flex;
  justify-content: center; 
  padding: 40px 0;
}

.footnote-section .legal-text {
  max-width: 912px;          
  width: 90%;                
  font-size: 14px;           
  line-height: 20px;
  color: #5c6b7a;
  margin: 0 auto;
}
.hidden {
  transform: translateY(20px);
  transition: all 2s ease;
}
.show{ 
  opacity: 1;
  transform: translateY(0);
 }

.flex{ display:flex; } .flex-col{ flex-direction:column; } .flex-row{ flex: row; }
.justify-center{ justify-content:center; } .align-center{ align-items:center; }
*{ box-sizing:border-box; }

@media (prefers-reduced-motion){ .hidden{ transition:none; } }
@media (min-width:576px){ .flex-sm-col{flex-direction:column;} .flex-sm-row{flex-direction:row;} .justify-sm-center{justify-content:center;} .align-sm-center{align-items:center;} .texto-sm-izquierda{text-align:left;} }
@media (min-width:768px){ .flex-md-col{flex-direction:column;} .flex-md-row{flex-direction:row;} .justify-md-center{justify-content:center;} .align-md-center{align-items:center;} .texto-md-izquierda{text-align:left;} }
@media (min-width:992px){ .flex-lg-col{flex-direction:column;} .flex-lg-row{flex-direction:row;} .justify-lg-center{justify-content:center;} .align-lg-center{align-items:center;} .texto-lg-izquierda{text-align:left;} }

/* ===== Body ===== */
body{
  margin:0; padding:0; box-sizing:border-box;
  font-family: var(--font-primary-family);
  background-color:#fff;
}

/* ===== Header ===== */
header{ display:flex; justify-content:center; }
header > div{ width:960px; max-width:90vw; display:flex; justify-content:space-between; align-items:center; padding:16px 0; }
.button-header{ border-radius:56px; padding:12px 25px; background:var(--primary-color); color:#fff; border:none; font-weight:400; cursor:pointer; }
.button-header:hover{ background:#065bd1; }
@media (min-width:766px){ header{ position:sticky; top:0; background:#fff; z-index:100; height:71px; } }
@media (max-width:765px){ .button-header{ display:none !important; } }

/* ===== Banner + hero formulario (wrapper) ===== */
.banner-form-wrapper{ display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; gap:40px; padding:40px 20px; }
.banner-left{ flex:1; max-width:520px; text-align:left; }
.container-banner-images img{ width:100%;  height:auto; }
.text-container-banner p{ font-weight: SemiBold; color:#03449E; }
.text-container-banner h1{ color:#03449E; font-size:24px; }
.text-container-banner h2{ color:#03449E; font-size:19px; }

.form-section{ max-width:500px; }
.form-section .title{ font-size:18px; margin-bottom:24px; }

.campo-salesforce{ margin:10px 0 10px; display:flex; flex-direction:column; }
.checkbox-salesforce{ display:flex; margin:20px 0; }
.label-checkbox-salesforce{ font-family:var(--font-secondary-family); font-weight:400; font-size:12px; margin-left:7px; }
.label-salesforce{ font-family:var(--font-secondary-family); letter-spacing:.02rem; margin-bottom:8px; color:#647180; font-size:12px; }
.label-description-salesforce{ font-family:var(--font-secondary-family); letter-spacing:.02rem; margin-top:5px; color:#6D89A4; font-size:12px; }
.input-salesforce{ font-family:var(--font-primary-family); font-size:.95rem; padding:4px 15px; border:1px solid #B6C5D5; border-radius:40px; width:100%; box-sizing:border-box; }

.formulario-salesforce{ display:flex; flex-direction:column; background-color:var(--white-color); border-radius:20px; max-width:400px; max-height:456px; }

.double-field{ display:flex; gap:16px; }
.double-field .campo-salesforce{ flex:1; margin:0; }
.double-field-row{ display:flex; flex-direction:row; gap:16px; margin-bottom:20px; }
.double-field-row .input-wrapper{ flex:1; display:flex; flex-direction:column; }

/* Botón (versión transparente con borde suave) */
.submit-salesforce{
  font-family:var(--font-primary-family);
  margin-top:10px; padding:8px 24px;
  width:auto; font-size:16px; cursor:pointer; align-self:flex-start;
  background-color:transparent; color:#0967D2;
  border:2px solid #cfd8e3; border-radius:25px;
  transition:all .3s ease;
  text-decoration: none;
}
.submit-salesforce:hover{ background-color:#0967D2; color:#fff; border-color:#0967D2; }
.submit-salesforce:disabled{ background-color:#B6C5D5; color:#647180; cursor:default; }

@media (max-width:1024px){ .submit-salesforce{ 
  width: 187px;
  } 
}
@media (max-width:768px){
  .banner-form-wrapper{ 
    align-items:center; 
    justify-content: center;
  }
  .banner-left{ 
  max-width:100%; 
  display: flex;
  justify-content: center; 
  align-items: center;     
  }
.form-section{ 
  max-width: 480px; 
  display: flex;
   flex-direction: column;
  justify-content: center; 
  align-items: center;   
  }
}

@media (max-width:574px){
  .banner-form-wrapper{ 
    align-items:center; 
    justify-content: center;
  }
  .banner-left{ 
    flex-direction: column;
    max-width:100%; 
  display: flex;
  justify-content: center; 
  align-items: center;    
  }
.form-section{ 
  max-width: 480px; 
  display: flex;
   flex-direction: column;
  justify-content: center; 
  align-items: center;    /
  }
}


/* ===== Sección “beneficios / plazos” ===== */
.section-plazos-acreditacion{ display:flex; flex-direction:column; gap:30px; margin-top:50px; text-align:center; color:#0F273E; }
.section-plazos-acreditacion > h2{ font-size:clamp(28px,3vw,36px); font-weight:400; text-align:center; margin:0; color:#0F273E; }
.section-plazos-acreditacion > h2 > span{ font-weight:600; }
.section-plazos-acreditacion-text{ display:flex; flex-direction:column; gap:30px; text-align:center; color:#375470; }

/* Grid de tarjetas (otros componentes de la página) */
.container-plazos{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; width:960px; max-width:90vw; margin:0 auto; }
.container-plazos > div{ position:relative; }
.card-plazos{ border:1px solid #D9E2EC; border-radius:16px; padding:24px 16px; width:100%; display:flex; flex-direction:column; justify-content:space-between; gap:clamp(16px,3vw,24px); height:max-content; }
.card-plazos > h3{ margin:0; font-weight:400; font-size:14px; color:var(--neutral-color); }
.card-plazos > p{ margin:0; color:var(--neutral-color); }
.card-plazos > h5{ border-top:1px solid #D9E2EC; padding-top:16px; margin:0; color:var(--neutral-color-strong); }
.card-plazos > h3 > span{ font-weight:600; font-size:clamp(28px,3vw,36px); color:var(--neutral-color-strong); font-family:var(--font-primary-family); }

@media (max-width:765px){
  .container-plazos{ grid-template-columns:1fr; grid-template-rows:1fr 1fr 1fr; justify-items:center; align-items:center; overflow:hidden; gap:0; }
  .card-plazos{ max-width:90vw; }
  .second-card{ margin-bottom:30px; }
}

/* ===== COMISION (cards) ===== */
#comision{ display:flex; flex-direction:column; }

.card-container{
  display:flex;
  justify-content:center;
  gap:35px;
  flex-wrap:wrap;
  padding:0;
  margin-top: 25px;
}

.bottom-comision-section{
  display:flex; 
  flex-direction:column; 
  align-items:flex-start; text-align:left;
  gap:7px; padding:18px; width:288px; height: 243px;
  border:1px solid #e0e6ed; border-radius:16px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.03); box-sizing:border-box;
}
.bottom-comision-section h4{ color:#0F273E; font-size:24px; margin:0;font-weight: 600; }

.icon-box{
  padding:10px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; gap: 7px;
  margin-left: -12px;
}
.icon-box i{ font-size:20px; color:#4a6c8a;  }

.icon-image{ width:36px; height:36px; object-fit:contain;  }

.icon-image-credit-card{ width:48px; height:30px; object-fit:contain; gap: 7px; }

.card-text{ color:#0F273E; font-size:16px; line-height:1.4; margin:0; max-width:100%; word-wrap:break-word; }

@media (max-width: 768px){
  .bottom-comision-section{
    width: 208px;
    height: 312px;
  }
}

@media (max-width: 574px){
  .bottom-comision-section{
    width: 272px;
    height: 240px;
  }
}

/* seccion texto entre cards */

.label-texto-between-cards {
    font-family: var(--font-secondary-family);
    letter-spacing: .02rem;
    margin: 30px 0 -50px 0;  /* top | right | bottom | left */
    color: #647180;
    font-size: 12px;
    text-align: center;
}




/* ===== Footer ===== */
#footer{ background: radial-gradient(ellipse at bottom right,#002159 0%,#03449E 100%); }
#footer > div{ width:960px; max-width:90vw; margin:0 auto; display:flex; flex-direction:column; padding:2% 0; position:relative; gap:25px; }
.footer-icon-container{ display:flex; justify-content:space-between; gap:16px; }
.store-container{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.store-container-images{ display:flex; gap:16px; }
.socials-container{ display:flex; align-items:center; gap:16px; }

@media (max-width:790px){
  #footer{ justify-content:center; align-items:center; padding:5% 5%; }
  .footer-icon-container{ flex-direction:column; justify-content:space-between; }
  .store-container{ justify-content:center; align-items:center; }
  .store-container p{ width:100%; text-align:center; }
  .socials-container{ justify-content:center; }
  #footer > p{ text-align:center; }
}

@media (max-width: 640px) {
  .faq-section > div > h1 { font-size: 28px; }
  .acordion { padding: 8px 0 20px; }
  .acordion:last-child { flex-direction: column; align-items: flex-start; }
  .acordion:last-child .submit-salesforce { margin-left: 0; }
}

/* ====================
    * Wallets *
==================== */

.wallets-section { 
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 5vw 9vw 6vw 9vw;
  gap: 24px;
}

.wallets-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;

}

.wallets-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 912px;
  gap: 16px;
}

@media (max-width: 768px) {

  .wallets-icons img {
    width: 48px;
  }

  .wallets-section { 
    margin: 5vw 9vw 12vw 9vw;
  }

}


/* ====================
	* card Rectangular *
==================== */

.beneficio-exclusivo-section {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  padding: 80px 0 80px 0;
  margin-bottom: -90px;
}

.beneficio-exclusivo-section > div {
  width: 912px;
  height: 215px;
  max-width: 90vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  border-radius: 8px;
  padding-top: 72px;
  padding-bottom: 72px;
  border: 1px solid #e0e6ed;
}

.beneficio-exclusivo-texto > div {
  display: flex;
  align-items: center;   /* centra verticalmente ícono y texto */
  gap: 10px;             /* espacio entre ícono y texto */
  margin: 25px 0;        /* 25px arriba y abajo, 0 a los costados */
}


.beneficio-exclusivo-texto p {
  margin: 0;             /* elimina el margin por defecto del <p> */
}

.texto-inter-light {
  font-family: 'Inter', sans-serif;
  font-weight: 300;       /* Light */
  font-style: normal;     /* "Light" va en font-weight */
  font-size: 20px;
  line-height: 28px;
  /* leading-trim: none; */  /* experimental, no soportado aún */
  letter-spacing: -0.01em; /* equivale aprox a -1% */
  color: #375470;
}


/* MODAL FORMULARIO */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}


.modal-content {
    background: white;
    padding: 20px;
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    position: relative;
    text-align: center;
}


.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: #333;
    cursor: pointer;
}

.modal-btn {
    font-family: var(--font-primary-family);
	margin-top: 10px;
    padding: 10px 15px;
	width: auto;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-size: 16px;
	align-self: flex-start;
}

.modal-overlay.active {
    display: flex;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: var(--blue-primary-color);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}