@font-face {
  font-family: 'bdgrotesk-medium';
  src: url('../fonts/BDOGrotesk/BDOGrotesk-Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Outfit, "Arial", sans-serif;
 /* background-color: #fafafb;*/
  color: #000;

}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.flotante {
  animation: flotar 3s ease-in-out infinite;
  display: block;
  margin: 0 auto;
}

/* Animación para el efecto de flotar */
@keyframes flotar {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between; /* Espacia los elementos dentro del navbar */
  align-items: center;            /* Centra verticalmente los elementos */
  max-width: 1320px;              /* Limita el ancho máximo del navbar */
  width: 100%;                     /* Ocupa todo el ancho disponible */
  margin: 0 auto;                 /* Centra horizontalmente */
  padding: 0 15px;                /* 👈 Garantiza 15px a los lados */
  background-color: transparent;
  flex-wrap: wrap;                /* Permite que los elementos bajen en móvil */
  gap: 12px;                      /* Separación entre logo, links y botón */
  margin-top: 16px;
}


.navbar .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 120px;
}

.logo-icon {
  width: 140px;
  cursor: pointer;
}

.navbar .logo span {
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
}

.navbar .nav-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;   /* que no se desborde */
  gap: 14px;         /* reduce espacio en móvil */

}

.navbar .nav-links a {
  font-size: 1.2rem;
  color: #000;
  font-family: Outfit, Arial;
  text-transform: capitalize;
  position: relative;
  font-size: bold;
}

.navbar .nav-links a:hover {
  color: #000;
}

.navbar .nav-links a:hover::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #00c853;
}




.navbar .btn.get-started {
  padding: 0.5rem 1rem;
  background-color: #00c853;
  color: #fff;
  border-radius: 0px;
  font-size: 1rem;
  font-weight: 500;
  /*border: 2px solid #00c853;*/
}

.navbar .btn.get-started:hover {
  padding: 0.5rem 1rem;
  background-color: #000;
  /*border: 2px solid #00c853;*/
  color: white;
  transition: color 0.3s ease;
}

/* Hero Section */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 2rem;
  max-width: 1320px;
  margin: 0 auto;
}

.hero-text_1 {
  max-width: 1320px;
  margin: 0 auto;
  font-size: clamp(1.6rem, 2.6vw + 0.6rem, 2.75rem);
  color: black;
  font-family: Hanken Grotesk, Arial;
  font-weight: 400;
  text-align: center;
}

.hero-text {
  max-width: 100%;
}



.hero-text p {
  font-size: 26px;
  color: #000;
  margin-bottom: 1.5rem;
  text-align: center;
  font-family: Outfit, Arial;
  font-weight: 500;
}

.hero-text p strong {
  color: #000;
}

.hero-buttons {
  margin-top: 40px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.hero-buttons .btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  font-family: Outfit;
}

.hero-buttons .btn.primary {
  background-color: #00c853;
  color: #fff;
  border: 1px solid #00c853;
}

.hero-buttons .btn.primary:hover {
  background-color: #000;
  color: #fff;
  transition: color 0.3s ease;
  border: 1px solid #000;
}

.hero-buttons .btn.secondary {
  background-color: white;
  color: #000;
  border: 1px dashed #ccc;
}

.hero-buttons .btn.secondary:hover {
  background-color: rgb(245, 248, 244);
  color: #000;
  border: 1px solid #000;
  transition: color 0.3s ease;
}

.hero-image {
  max-width: 80%;
  min-width: 50%;
  margin-left: 105px;
}

.hero-image img {
  width: 70%;
  height: auto;
  display: block;
  max-width: 800px; /* El tamaño máximo será 500px */
  min-width: 500px; /* El tamaño mínimo será 200px */
}


/* Inicio espacio lista */

.testimonial-container {
  width: 100%;
  overflow: hidden;
  background-color: white;
}

.testimonial-list {
  display: flex;
  animation: scrollTestimonial 70s linear infinite;
  list-style: none;
  padding: 0;
  margin: 0;
}

.testimonial-item {
  flex: 0 0 auto;
  width: 33.33%; /* Ajusta el tamaño de cada testimonio */
  padding: 20px;
  text-align: center;
}

.testimonial-item h3 {
  font-size: 1.2em;
  font-weight: bold;
}

.testimonial-item .state {
  font-size: 1em;
  color: #666;
}

.testimonial-item .review {
  font-size: 1em;
  color: #333;
  word-wrap: break-word; /* Permite que el texto largo se ajuste al contenedor */
  overflow-wrap: break-word;
  line-height: 1.5;
}

.testimonial-container:hover .testimonial-list {
  animation-play-state: paused; /* Pausa el movimiento cuando el cursor está sobre la lista */
}

/* Aquí duplicamos la lista para que la animación se vea como un bucle continuo */
.testimonial-list::after {
  content: "";
  display: block;
  width: 100%;
  flex: 0 0 auto;
}

/* Separando la velocidad de traslación de la duración de la animación */
@keyframes scrollTestimonial {
  0% {
    transform: translateX(0); /* Comienza en la posición inicial */
  }
  100% {
    transform: translateX(-300%); /* Desplaza toda la lista fuera de la vista (2 veces su ancho) */
  }
}


/* ====== BENEFITS — base segura ====== */
.benefits-container {
  display: flex;
  align-items: center;
  /* NO centres el contenido interno aquí; lo hacemos por desktop */
  gap: 20px;
  background-color: rgb(245, 248, 244);
  border: 1px dashed #ccc;
  padding: 20px 20px;         /* mantén tu padding */
  box-sizing: border-box;     /* incluye padding/border dentro del max-width */
}


/* ====== Desktop (≥1025px): centrado horizontal real ====== */
@media (min-width: 1025px) {
  .benefits-container {
    box-sizing: border-box;                 /* incluye padding/borde en el ancho */
    width: min(1320px, calc(100% - 30px));  /* 1320px o (viewport - 30px) */
    margin-inline: auto;                    /* centra SIEMPRE */
    justify-content: space-between;         /* texto izq / anim der */
  }

  /* columnas equilibradas y sin desbordes raros */
  .benefits-container .left,
  .benefits-container .right {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ===== Desktop: centra .benefits-container y neutraliza márgenes internos ===== */
@media (min-width: 1025px) {
  .benefits-container {
    box-sizing: border-box;
    /* 1320px centrado, pero si la ventana es más estrecha, deja 15px por lado */
    width: min(1320px, calc(100% - 30px));
    margin-inline: auto !important;   /* SIEMPRE centrado */
    padding-inline: 15px;             /* espacio lateral simétrico */
    justify-content: space-between;   /* texto izq / anim der */
  }

  /* Evita que una columna “auto-centre” por su cuenta */
  .benefits-container .left,
  .benefits-container .right {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
  }
}


/* ====== Tablet/Móvil (≤1024px): si usas márgenes laterales de 15px ====== */
@media (max-width: 1024px) {
  .benefits-container {
    margin-left: 15px;
    margin-right: 15px;
    flex-direction: column;
    justify-content: flex-start;
  }
}




.benefits-container:hover {
  border: 1px dashed #00b86b;
}

#last-benefits-container{
  margin-bottom: 30px;
}

.benefits-container .left {
  width: 50%; /* El texto ocupará el 50% */
  align-items: center;
  justify-content: center;
  margin: 0 auto;

}

.benefits-container .left h3, .benefits-container .right h3 {
  color: black;
  margin: 0 0 24px;
  font-size: clamp(28px, 4vw, 44px); /* mínimo 26px, máximo 44px */
  font-weight: 500;
  line-height: 1.2; /* Ajuste automático según el tamaño del texto */
  letter-spacing: -2px;
}

.benefits-container .left p, .benefits-container .right p{
  color: #000;
  font-size: 16px;
  margin: 0 0 24px;
  font-weight: 400;
  line-height: 150%;
}

.benefits-container .right {
  width: 50%; /* El div sigue ocupando el 50% */
  text-align: left; /* Centra el contenido dentro del div */
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.benefits-container .right img,  .benefits-container .left img{
  width: 120px; /* Establece el ancho fijo de la imagen */
  height: auto; /* Mantén las proporciones de la imagen */
  margin: 0 auto; /* Centra la imagen dentro del div */
}







/* EJEMPLO DE JANES */


.example-container {
  max-width: 1320px;
  background-color: rgb(245, 248, 244);
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  border: 1px dashed #ccc;
  margin-top: 20px;
  width: min(1320px, calc(100% - 30px)); /* deja 15px por lado si la ventana se achica */
  margin-inline: auto;
  box-sizing: border-box;
}

/* 2) Tipografías fluidas */
.example-container .left h1{
  font-size: clamp(22px, 2.2vw + 1rem, 36px); /* min 22px, max 36px */
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.example-container .left h3{
  font-size: clamp(18px, 1.5vw + 0.6rem, 24px) !important; 
}

/* 3) Imagen arriba del texto en tamaños pequeños + escalado estético */
@media (max-width: 1024px){
  .example-container{
    display: flex;
    flex-direction: column;   /* apilar */
    gap: 16px;
    padding-inline: 15px;     /* refuerza el “aire” lateral mínimo */
  }
  .example-container .right{ order: -1; } /* imagen primero */
  .example-container .left{  order:  0; }

  .example-container .right{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Escalado de imagen: límite superior 420px, fluido en móvil/tablet */
  .example-container .right .jane-sad{
    width: clamp(330px, 90vw, 630px) !important; 
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* El bloque de texto ocupa todo el ancho en móvil */
  .example-container .left{
    width: 100%;
  }
}

#janekeys{
  background-color: #f7f8f9;
  color: black;
  border: 1px solid #ccd3db;
}

.example-container .left {
  align-items: center;
  justify-content: center;
  margin: 0 auto;

}

#left-results{
  width: 100%;
  text-align: center;
  font-size: 28px;
}

#billexamplecontainerheader{
  background-color: transparent;
  border: none;
}

.example-container .left h1, .example-container .right h1 {
  color: black; /* Cambia el color del encabezado a azul */
  margin: 0 0 24px;
  font-size: 42px;
  font-weight: 500;
  line-height: 46px;
  text-align: left;
  padding-top: 10px;
}


.example-container .left h3, .example-container .right h3 {
  color: black; /* Cambia el color del encabezado a azul */
  margin: 0 0 24px;
  font-size: 24px;
  text-align: left;
  font-family: Outfit, Ariel;
  font-weight: 400;
}

.example-container .left p, .example-container .right p{
  color: #425366;
  font-size: 14px;
  margin: 0 0 24px;
  font-weight: 400;
  line-height: 150%;
}

.example-container .right {
  width: 30%; /* El div ocupa el 30% del contenedor padre */
  display: flex; /* Activa Flexbox */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  height: 100%; /* Asegúrate de que tenga altura definida */
  margin: 0 auto;
  text-align: center; /* Opcional, por si el texto necesita centrarse */
}

.example-container .right img, 
.example-container .left img {
  width: 80%; /* La imagen ocupa el 50% del ancho del contenedor */
  min-width: 120px;
  height: auto; /* Mantén las proporciones de la imagen */
}

#janedetails{
  background-color: #f7f8f9;
  padding: 0;
}


/* Estilo para los divs hijos */
.child {
  flex: 1; /* Hace que cada hijo ocupe la misma proporción (1/4) */
  flex-direction: column; /* Los elementos se apilan verticalmente */
  border-right: 1px solid #ccd3db;
  border-bottom: 1px solid #ccd3db;
  height: 150px; /* Ajusta la altura según necesites */
  box-sizing: border-box; /* Asegura que los bordes no se superpongan al ancho */
  padding: 36px 0 0 28px;
  display: flex;
  position: relative;
  background-color: white;
}

#initial-child-border{
  border-left: 1px solid #ccd3db;
}


.child img {
  
  width: 24px; /* Asegura que la imagen no se salga de su contenedor */
  height: auto; /* Mantiene las proporciones de la imagen */
}

.title {
  margin-top: 16px;
  text-align: left; /* Alinea el texto a la izquierda */
  box-sizing: border-box; /* Incluye padding en el ancho total */
  color: black;
}

#results-title{
  text-align: center;
  font-size: 24px;
  margin-top: 0px;
}

.example-p{
  margin-top: 16px;
  font-size: 14px;
  
  text-align: left; /* Alinea el texto a la izquierda */
  padding-right: 10px;
  color: #425366;
}

.data-points{
  font-family: Outfit, Arial;
  font-weight: 700;
  font-size: 40px;
  padding-right: 16px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #00b86b;
}

.results-container {
  max-width: 1320px;
  /* centrado, con mínimo 15px por lado */
  margin-inline: max(15px, calc(50% - 660px));
  margin-block: 30px;

  background-color: #fff;
  border: 1px dashed #ccd3db;
  box-sizing: border-box;
}


#just-title{
  max-width: 1320px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 30px;
  color: #000;
  font-size: 22px;
  font-weight: 500;
}

.results-container h1{
  color: black; /* Cambia el color del encabezado a azul */
  margin-top: 30px;
  margin: 0 auto;
  font-size: 30px;
  font-weight: 500;
  line-height: 46px;
  text-align: center;
  text-transform: capitalize;
  padding-top: 10px;
  padding-bottom: 10px;
}

#results-special-background{
  background-color: rgb(245, 248, 244);
  font-size: 2em;
  font-weight: bold;
  border: 1px dashed #ccc;
}

#results-special-background-2{
  background-color: #f7f8f9;
  font-size: 2em;
  font-weight: bold;
}

.results-container-child{
  max-width: 1320px;
  background-color: white;
  align-items: stretch;
  justify-content: center;
  margin: 0 auto;
  display: flex;
}

.child-2 {
  flex: 1; /* Hace que cada hijo ocupe la misma proporción (1/4) */
  flex-direction: column; /* Los elementos se apilan verticalmente */
  border: 1px dashed #ccc;
  box-sizing: border-box; /* Asegura que los bordes no se superpongan al ancho */
  display: flex;
  position: relative;
}

.child-2:hover {
  background-color: #f5f8f4;
}

#child-eliminar-border{
  border-right: transparent;
}

.half {
  flex: 1; /* Cada div ocupa el mismo porcentaje del espacio disponible */
  padding: 15px;
  text-align: center;
}

.half h1{
  font-family: Outfit, Arial;
  font-weight: 700;
  font-size: 40px;
  right: 10px;
  color: #00b86b;
  text-align: center;
}

.child-2 .half .values-title-results{
  font-size: 50px;
  padding: 0px;
  padding-top: 15px;
}

.lottie-container {
  justify-content: flex-end; /* Alinea los elementos al final (derecha) */
  align-items: center; /* Centra verticalmente el contenido */
  display: flex; /* Convierte el contenedor en flexbox */
  padding: 0; /* Ajusta el padding si es necesario */
}

.lottie-container dotlottie-player {
  margin-right: 10px; /* Espaciado adicional desde el borde derecho */
}









/* FINAL EJEMPLO DE JANE */

/* Final Espacio lista */

.second-section {
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
  margin-top: 40px;
  margin: 0 auto;
  background: white;
  padding-top: 30px;
  padding-bottom: 30px;
}

.second-section h2 {
  text-align: center;
  max-width: 1320px;; /* Ocupa el 80% del ancho */
  margin: 0 auto; /* Centra el contenido horizontalmente */
  margin-bottom: 20px; /* Espaciado inferior */
  font-size: 60px;
  font-weight: 500;
  font-family: Outfit, Arial;
  position: relative;
  line-height: 110%;
  letter-spacing: -3px;
  margin-top: 0;
  text-transform: capitalize;
  color: black;
  margin-top: 50px;
}

.second-section h3 {
  text-align: center;
  max-width: 1320px;; /* Ocupa el 80% del ancho */
  margin: 0 auto; /* Centra el contenido horizontalmente */
  margin-bottom: 20px; /* Espaciado inferior */
  font-size: 24px;
  font-weight: 500;
  font-family: Outfit, Arial;
  position: relative;
  line-height: 100%;
  margin-top: 0;
  color: black;
  margin-top: 30px;
}

h2 {
  text-align: center; /* Centra el texto dentro del h2 */
  width: 100%; /* Limita el ancho del texto al 80% del contenedor */
  margin: 0; /* Elimina márgenes externos por defecto */
  font-size: 2rem;
  font-weight: 500;
  color: black;
}

/* Grid second section */

#second-section-inline{
  background-color: rgb(245, 248, 244);
}


#second-section-resume {
  background: rgb(245, 248, 244);
}



.grid-container {
  display: grid; /* Activa Grid */
  grid-template-columns: repeat(3, 1fr); /* Siempre 3 columnas */
  grid-auto-rows: auto; /* Ajusta automáticamente la altura de las filas */
  gap: 20px; /* Espacio entre los elementos */
  padding: 20px;
  width: 1320px; /* Contenedor ocupa el 70% del ancho */
  margin: 0 auto; /* Centra el contenedor en la página */
  align-items: center;
  justify-content: center;
}

.item {
  flex: 1 1 calc(33.33% - 20px); /* Cada elemento ocupa 1/3 del contenedor con espacio entre ellos */
  text-align: center; /* Centra el contenido */
  box-sizing: border-box; /* Asegura que el padding no afecte el tamaño */
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.item img {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin-bottom: 10px;
}

.item h3 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.item p {
  color: #000;
}

.our-mission-spot {
  background: rgb(245, 248, 244);
  padding: 20px;
  padding-top: 10px;
  padding-bottom: 50px;
  margin: 0 auto;
}

.our-mission-spot-head {
  text-align: center;
  max-width: 1320px;; /* Ocupa el 80% del ancho */
  margin: 0 auto; /* Centra el contenido horizontalmente */
  margin-bottom: 20px; /* Espaciado inferior */
}
.our-mission-spot-head h2{
  text-align: center;
  max-width: 1320px;; /* Ocupa el 80% del ancho */
  margin: 0 auto; /* Centra el contenido horizontalmente */
  margin-bottom: 20px; /* Espaciado inferior */
  font-size: 60px;
  font-weight: 500;
  font-family: Outfit, Arial;
  position: relative;
  line-height: 110%;
  letter-spacing: -3px;
  margin-top: 0;
  padding-top: 40px;
}

.our-mission-spot-body {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se muevan a la siguiente fila */
  max-width: 1320px;
  margin: 0 auto;
  gap: 15px; /* Espaciado entre columnas y filas */
}

.our-mission-spot-body-1, .our-mission-spot-body-2 {
  flex: 1; /* Cada uno ocupa el mismo espacio proporcional */
  padding: 10px;
  border: 1px dashed #ccc;
  background-color: white;
}

.our-mission-spot-body-1:hover, .our-mission-spot-body-2:hover{
  border: 1px dashed #00b86b;
}

.our-mission-spot-body-3 {
  flex: 0 0 100%; /* Ocupa el 100% del ancho de la fila */
  padding: 15px;
  border: 1px dashed #ccc;
  background-color: white;
  display: flex;
}

.our-mission-spot-body-3:hover {
  border: 1px dashed #00b86b;
}

.our-mission-spot-body-3 .left{
  width: 60%;
  margin-bottom: 20px;
}

.our-mission-spot-body-3 .left p{
margin-bottom: 20px;
}



.our-mission-spot-body-3 .right{
  width: 40%;
}

.our-mission-spot-body-texts {
  font-size: clamp(1.4rem, 2vw + 1rem, 2.5rem) !important;
}

.our-mission-spot-body h2 {
  text-align: left;
  font-size: 44px;
  font-weight: 500;
  margin-top: 16px;
  margin-left: 16px;
  margin-right: 16px;
}

.our-mission-spot-body p {
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  margin-top: 16px;
  color: #000;
  margin-left: 16px;
  margin-right: 16px;
}



/* Grid altervatives */

.section-4 {
  padding-bottom: 30px;
  background-color: rgb(245, 248, 244);
}

.section-4-alternatives-grid {
  display: grid; /* Cambiamos a grid */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Siempre al menos dos columnas */
  gap: 15px;
  /* Centrado y margen lateral mínimo */
  max-width: 1100px;
  width: 100%;
  padding-inline: 15px;   /* 15px a cada lado */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.section-4-alternatives-grid .item {
  display: grid;
  grid-template-rows: 
    auto
    auto
    auto
    auto
    1fr;
  align-items: center; /* Centra los elementos horizontalmente */
  border: dashed 1px #ccc;
  background-color: white;
  height: 400px;
  padding: 10px; /* Espacio interno */
  row-gap: 0.75rem;
  margin: 0;       /* evita “auto” que centra cada tarjeta */
  flex: unset;     /* anula reglas de flex heredadas */
  width: 100%;
  max-width: none; /* importante: que llene su columna */
}



.section-4-alternatives-grid .item:hover{
  border: dashed 1px #00b86b;
}

.basic-bar,
.standard-bar,
.premium-bar,
.ideal-bar,
.quick-bar,
.max-bar {
  width: 80%;
  height: 10px;
  border-radius: 10px;
  align-items: center;
  margin: 0  auto;
  margin-bottom: 20px;
}

.basic-bar {
  background-color: #E0E0E0;
}
.standard-bar {
  background-color: #AED6F1;
}
.premium-bar {
  background-color: #A3E4D7;
}
.ideal-bar {
  background-color: #82E0AA;
}
.quick-bar {
  background-color: #F7DC6F;
}
.max-bar {
  background-color: #F1948A;
}

.section-4-alternatives-grid .item h2,
.section-4-alternatives-grid .item h1,
.section-4-alternatives-grid .item h3 {
  color: black;
  font-family: Outfit, Arial, sans-serif;
  text-align: center;
}

.section-4-alternatives-grid .item h1 {
  font-size: 50px;
  font-weight: 500;
  color: #00b86b;
  margin-bottom: 10px;
}

.section-4-alternatives-grid .item h3 {
  font-size: 20px;
  font-weight: 400;
  margin-top: -30px;
}

.section-4-alternatives-grid .item p {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  max-height: 200px; /* Controla la altura del párrafo */
  overflow: hidden; /* Evita que el texto exceda el contenedor */
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.stars {
  margin-top: 20px; /* Espacio adicional para evitar que cubran texto */
  width: 50px; /* Ajusta el tamaño de las estrellas */
  height: auto; /* Mantiene la proporción */
}



.separador {
  width: 80%; /* El div ocupa el 80% del ancho del contenedor */
  max-width: 1320px;
  height: 3px; /* Le da una altura de 1px, para que actúe como una línea */
  background-color: rgb(
    186,
    190,
    202
  );
  margin: 20px auto;
  border-radius: 2px; /* Centra el div en el contenedor, con un margen superior e inferior */
}

.jane-example-block {
  background-color: white;
  width: 80%;
  border-radius: 20px;
  margin: 40px auto;
  min-height: 250px;
  padding-bottom: 10px;
}

.jane-example {
  display: flex; /* Activa Flexbox */
  justify-content: space-between; /* Distribuye el contenido de forma que haya espacio entre la imagen y el texto */
  align-items: center; /* Alinea verticalmente la imagen y el texto */
}

.jane-sad {
  width: 20%; /* La imagen ocupa el 20% del ancho del div */
  height: auto;
  margin-left: 20px; /* Mantiene la proporción de la imagen */
  margin-top: 10px;
}

.text-jane-sad {
  width: 80%;
  margin-left: 50px;
  margin-right: 20px; /* El texto ocupa el 80% restante del div */
}

.text-jane-sad p {
  font-size: 20px; /* El texto ocupa el 80% restante del div */
}

.jane-details {
  display: flex; /* Activa Flexbox */
  flex-wrap: nowrap; /* Evita que los elementos pasen a nuevas filas */
  gap: 10px; /* Espaciado fijo entre los elementos */
  justify-content: center; /* Centra los elementos horizontalmente */
  align-items: flex-start; /* Alinea verticalmente los elementos arriba */
  margin: 20px auto;
  overflow-x: auto; /* Permite desplazamiento horizontal si el espacio no es suficiente */
}

.jane-details .item {
  display: flex; /* Activa Flexbox dentro de cada item */
  flex-direction: column; /* Apila los elementos dentro del item verticalmente */
  align-items: center; /* Centra los elementos dentro del item */
  justify-content: space-between; /* Espacia los elementos verticalmente */
  border-radius: 20px;
  border: solid 1px rgb(49, 112, 100);
  background-color: rgb(249, 247, 242);
  height: 260px;
  width: 120px; /* Fija un ancho específico para cada item */
  box-sizing: border-box; /* Incluye padding y borde en el tamaño */
}

.jane-details .item img {
  height: 80px; /* Mantiene la proporción de la imagen */
  width: auto; /* Ajusta el tamaño deseado */
  margin-top: 10px;
}

.jane-details .item h2 {
  font-family: Outfit, Arial;
  font-size: 30px;
  color: rgb(49, 112, 100);
}

.jane-details .item p {
  font-family: Outfit, Arial;
  font-size: 30px;
  color: black;
}

.jane-details-2 {
  display: flex; /* Activa Flexbox */
  justify-content: center; /* Distribuye los elementos con espacio entre ellos */
  align-items: flex-start; /* Alinea verticalmente los elementos dentro del div */
  width: 90%;
  margin: 20px auto;
}

.jane-details-2 .item-2 {
  display: flex; /* Activa Flexbox dentro de cada item */
  flex-direction: column; /* Asegura que los elementos dentro del item se apilen verticalmente */
  align-items: center; /* Centra los elementos dentro del item */
  justify-content: space-between; /* Espacia los elementos verticalmente */
  border-radius: 20px;
  border: solid 1px rgb(49, 112, 100);
  background-color: rgb(249, 247, 242);
  margin: 8px 10px;
  min-width: 80px;
  padding: 10px;
}

.jane-details-2 .item-2 h2 {
  font-family: Outfit, Arial;
  font-size: 30px;
  color: rgb(49, 112, 100);
}

.jane-details-2 .item-2 p {
  font-family: Outfit, Arial;
  font-size: 30px;
  color: black;
}

.lets-see {
  font-weight: 300;
  font-size: 35px;
  color: black;
  width: 80%;
  align-items: center;
  justify-self: center;
  text-align: center;
}

/* Jane Details for each alternative */

.section-5 {
  margin-top: 20px;
}
.h2-title-section {
  width: 70%;
  align-items: center;
  justify-content: center;
}

.section-5-alternatives-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Por defecto, 3 columnas */
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
}

.section-5-alternatives-grid .item2 {
  border-radius: 20px;
  border: solid;
  background-color: white;
  border-width: 1px;
  border-color: rgb(49, 112, 100);
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 1024px) {
  .section-5-alternatives-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas medianas */
  }
}

@media (max-width: 600px) {
  .section-5-alternatives-grid {
    grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
  }
}


.section-5-alternatives-grid .item2 h2,
.section-5-alternatives-grid .item2 h1 {
  color: rgb(49, 112, 100);
  font-family: Outfit, Arial, sans-serif;
}

.section-5-alternatives-grid .item2 h1 {
  font-size: 50px;
  font-weight: 500;
  text-align: center;
}

.section-5-alternatives-grid .item2 h3 {
  color: #005c36;
  font-family: Outfit, Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  background-color: #d5f3e6;
  border: 1px solid #007b47;
  border-radius: 20px;
  width: 90%;
  margin: 0 auto;
  margin-top: 40px;
}

.section-5-alternatives-grid .item2 .more-info-p{
  font-size: 20px;
  color: #005c36;
  max-width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  background-color: #d5f3e6;
  border: 1px solid #007b47;
  border-radius: 20px;
  padding: 10px; /* Espacio interno de 5px */
}


.section-5-alternatives-grid .item2 p {
  font-size: 30px;
  font-weight: 300;
  text-align: center;
  color: black;
}



.section-5-alternatives-grid .item2 img {
  width: 100px;
  margin-bottom: 30px;
  margin-top: 30px;
}

.section-5 .separador {
  margin: 10px auto;
}

/* Fondo completo del círculo */
.circle-bg {
  fill: white;
}

/* Parte faltante en verde */
.circle-fill {
  fill: none;
  stroke: rgb(243, 243, 245); /* Color para la parte faltante */
  stroke-width: 4;
  stroke-dasharray: 100, 100; /* Rellenar todo el círculo */
}



.circular-chart {
  display: block;
  margin: 5px auto;
  max-width: 70%;
  max-height: 250px;
  margin-top: 20px;
}

/* Parte progresiva */
.circle_basic {
  fill: none;
  stroke: #00b86b;
  stroke-width: 2.8;
  stroke-dashoffset: 0;
  animation: progress 1s ease-out forwards;
  stroke-linecap: round;
}

.circle_standard {
  fill: none;
  stroke: #00b86b;
  stroke-width: 2.8;
  /*este es el de los bordes stroke-linecap: round;*/
  /*stroke-dasharray: 3.3, 100;  Progreso dinámico */
  stroke-dashoffset: 0;
  animation: progress 1s ease-out forwards;
  stroke-linecap: round;
}

.circle_premium {
  fill: none;
  stroke: #00b86b;
  stroke-width: 2.8;
  stroke-dashoffset: 0;
  animation: progress 1s ease-out forwards;
  stroke-linecap: round;
}

.circle_ideal {
  fill: none;
  stroke: #00b86b;
  stroke-width: 2.8;
  /*stroke-dasharray: 3.3, 100;  Progreso dinámico */
  stroke-dashoffset: 0;
  animation: progress 1s ease-out forwards;
  stroke-linecap: round;
}

.circle_quick {
  fill: none;
  stroke: #00b86b;
  stroke-width: 2.8;
  /*stroke-dasharray: 3.3, 100;  Progreso dinámico */
  stroke-dashoffset: 0;
  animation: progress 1s ease-out forwards;
  stroke-linecap: round;
}

.circle_max {
  fill: none;
  stroke: #00b86b;
  stroke-width: 2.8;
  stroke-linecap: round;
  /*stroke-dasharray: 3.3, 100;  Progreso dinámico */
  stroke-dashoffset: 0;
  animation: progress 1s ease-out forwards;
}

/* Texto centrado */
.percentage_basic {
  fill: black;
  font-family: Outfit,Arial, sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
  dominant-baseline: central;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0, 100;
  }
}

.container-results {
  display: flex; /* Activa Flexbox para alinear los divs horizontalmente */
  max-width: 1320px; /* El contenedor ocupa todo el ancho disponible */
  background-color: transparent;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 30px;
}

.container-results h1{
  font-size: 40px;
  text-align: left;
  color: #000;
  font-family: Outfit, Arial;
}

.container-results-left {
  flex: 7; /* Ocupa 60% del espacio */
  padding: 20px;
  text-align: center;
  margin: 0 auto;
}

.container-results-left p {
  color: black;
  font-family: Outfit;
  font-size: 24px;
  text-align: left;
  margin-bottom: 20px;
}

.container-results-right {
  flex: 3; /* Ocupa 40% del espacio */
  padding: 20px;
  text-align: center;
  margin: 0 auto;
}

.jane-happy {
  width: 90%; /* Imagen ocupa todo el ancho del div */
  height: 90%; /* Imagen ocupa toda la altura del div */
  object-fit: cover; /* Ajusta la imagen sin deformarla */
}






.optimization-text {
  
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  background: linear-gradient(180deg, #00884e, #006a3d);
  border-radius: 20px;
  max-width: 1320px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 30px;
  padding-top: 20px;
}

.optimization-text p {
  width: 98%; /* Ocupa toda la horizontal */
  text-align: center; /* Centra el texto dentro del párrafo */
  margin: 0 auto; /* Opcional: Elimina márgenes predeterminados */
  font-size: 30px;
  font-family: Outfit;
  font-weight: 300;
  color: white;
  margin-top: 20px;
}

#download-report{
  margin-bottom: 20px;
}





/* Estilo para el contenedor principal */
.add-container {
  width: 1320px; /* Ocupa el 70% del ancho de la pantalla */
  background-color: transparent; /* Color de fondo del contenedor principal */
  margin: 0 auto; /* Centrado horizontal */
  display: flex; /* Activa flexbox para disposición en línea */
  justify-content: space-between; /* Espaciado entre los div internos */
  align-items: center; /* Centra verticalmente los div internos */
}

/* Estilo para los div hijos */
.left-div,
.right-div {
  display: flex; /* Flexbox para organizar el contenido */
  flex-direction: column; /* Coloca los elementos en columna */
  justify-content: center; /* Centra verticalmente el contenido */
  align-items: center; /* Centra horizontalmente el contenido */ /* Color de fondo azul */
  border-radius: 30px; /* Bordes redondeados */
  margin: 10px; /* Espaciado alrededor de cada div */
  height: 680px;
}

/* Proporciones de ancho para los div */
.left-div {
  width: 60%; /* Ocupa el 60% del contenedor principal */
  border: solid 1px rgb(49, 112, 100);
  background-color: white;
}

.right-div {
  width: 40%; /* Ocupa el 40% del contenedor principal */
  background-color: #d5f3e6;
}

/* Estilo para las imágenes */
.left-div img,
.right-div img {
  width: 260px; /* Ajusta el ancho de las imágenes a 10px */
  height: auto; /* Mantiene la proporción de la imagen */
}

.left-div h3 {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: center; /* Centrado horizontal del texto */
  font-size: 32px; /* Tamaño de fuente ajustado */
  color: black; /* Color del texto */
  font-family: Outfit, Arial;
  font-weight: 500;
}

.left-div h1,
.right-div h1 {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: center; /* Centrado horizontal del texto */
  font-size: 44px; /* Tamaño de fuente ajustado */
  color: rgb(51, 219, 90); /* Color del texto */
}

/* Estilo para el texto debajo de las imágenes */
.left-div p {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: center; /* Centrado horizontal del texto */
  font-size: 28px; /* Tamaño de fuente ajustado */
  color: #425366; /* Color del texto */
  width: 80%;
  font-weight: 300;
  margin-top: 20px;
  margin-bottom: 20px;
}

.right-div p {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: center; /* Centrado horizontal del texto */
  font-size: 28px; /* Tamaño de fuente ajustado */
  color: black; /* Color del texto */
  width: 80%;
  font-weight: 300;
  margin-top: 20px;
  margin-bottom: 20px;
}

.right-div h3 {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: center; /* Centrado horizontal del texto */
  font-size: 32px; /* Tamaño de fuente ajustado */
  color: black; /* Color del texto */
  font-family: Outfit, Arial;
  font-weight: 400;
}

.add-container-2 {
  width: 1320px; /* Ocupa el 70% del ancho de la pantalla */
  background-color: transparent; /* Color de fondo del contenedor principal */
  margin: 0 auto; /* Centrado horizontal */
  display: flex; /* Activa flexbox para disposición en línea */
  justify-content: space-between; /* Espaciado entre los div internos */
  align-items: center; /* Centra verticalmente los div internos */
  background-color: transparent;
}

/* Estilo para los div hijos */
.left2-div,
.right2-div {
  display: flex; /* Flexbox para organizar el contenido */
  flex-direction: column; /* Coloca los elementos en columna */
  justify-content: center; /* Centra verticalmente el contenido */
  align-items: center; /* Centra horizontalmente el contenido */ /* Color de fondo azul */
  border-radius: 30px; /* Bordes redondeados */
  margin: 10px; /* Espaciado alrededor de cada div */
}

/* Proporciones de ancho para los div */
.left2-div {
  width: 80%; /* Ocupa el 60% del contenedor principal */
  border: solid 1px rgb(49, 112, 100);
  background-color: white;
  height: 340px;
}

.right2-div {
  width: 20%; /* Ocupa el 40% del contenedor principal */
  background-color: transparent;
}

/* Estilo para las imágenes */
.left2-div img,
.right2-div img {
  width: 260px; /* Ajusta el ancho de las imágenes a 10px */
  height: auto; /* Mantiene la proporción de la imagen */
}

.left2-div h3 {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: center; /* Centrado horizontal del texto */
  font-size: 32px; /* Tamaño de fuente ajustado */
  color: black; /* Color del texto */
  font-family: Outfit, Arial;
  font-weight: 400;
}

.left2-div h1 {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: center; /* Centrado horizontal del texto */
  font-size: 44px; /* Tamaño de fuente ajustado */
  color: rgb(51, 219, 90); /* Color del texto */
}

/* Estilo para el texto debajo de las imágenes */
.left2-div p {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: center; /* Centrado horizontal del texto */
  font-size: 28px; /* Tamaño de fuente ajustado */
  color: #425366; /* Color del texto */
  width: 80%;
  font-weight: 300;
  margin-top: 20px;
  margin-bottom: 20px;
}

.add-container-3 {
  width: 90%; /* Ocupa el 70% del ancho de la pantalla */
  background-color: transparent; /* Color de fondo del contenedor principal */
  margin: 0 auto; /* Centrado horizontal */
  display: flex; /* Activa flexbox para disposición en línea */
  justify-content: space-between; /* Espaciado entre los div internos */
  align-items: center; /* Centra verticalmente los div internos */
}

/* Estilo para los div hijos */
.left3-div,
.right3-div {
  display: flex; /* Flexbox para organizar el contenido */
  flex-direction: column; /* Coloca los elementos en columna */
  justify-content: center; /* Centra verticalmente el contenido */
  align-items: center; /* Centra horizontalmente el contenido */ /* Color de fondo azul */
  border-radius: 30px; /* Bordes redondeados */
  margin-bottom: 10px; /* Espaciado alrededor de cada div */
}

/* Proporciones de ancho para los div */
.left3-div {
  width: 30%; /* Ocupa el 60% del contenedor principal */
  background-color: white;
}

.right3-div {
  width: 70%; /* Ocupa el 40% del contenedor principal */
  background-color: transparent;
}

/* Estilo para las imágenes */
.left3-div img,
.right3-div img {
  width: 260px; /* Ajusta el ancho de las imágenes a 10px */
  height: auto; /* Mantiene la proporción de la imagen */
}

.left3-div h3 {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: center; /* Centrado horizontal del texto */
  font-size: 32px; /* Tamaño de fuente ajustado */
  color: rgb(38, 48, 84); /* Color del texto */
  font-family: Outfit, Arial;
  font-weight: 400;
}

.left3-div h1 {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: center; /* Centrado horizontal del texto */
  font-size: 44px; /* Tamaño de fuente ajustado */
  color: rgb(51, 219, 90); /* Color del texto */
}

/* Estilo para el texto debajo de las imágenes */
.left3-div p {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: center; /* Centrado horizontal del texto */
  font-size: 28px; /* Tamaño de fuente ajustado */
  color: rgb(38, 48, 84); /* Color del texto */
  width: 80%;
  font-weight: 200;
  margin-top: 20px;
  margin-bottom: 20px;
}

.right2-div img {
  max-height: 340px;
}

.parent-container {
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */
  background-color: transparent;
  max-width: 1320px;
  margin: 0 auto;
}

.tailor-container {
  
  background-color: #d5f3e6;
  margin: 10px auto; /* Elimina los márgenes adicionales */
  border-radius: 30px;
  align-items: center;
}

.tailor-container h1 {
  color: #005c36;
  align-items: center;
  font-weight: 400;
  font-family: Outfit, Arial;
  text-align: center;
  margin-top: 10px;
  font-size: 40px;
}

.tailor-container-inside {
  display: flex;
  background-color: transparent;
  margin: 16px auto;
  align-items: center;
}

.tailor-container-inside .left {
  width: 70%;
  background-color: transparent;
}

.tailor-container-inside h3 {
  color: #005c36;
  font-size: 30px;
  font-family: Outfit, Arial;
  text-align: center;
  font-weight: 300;
  margin: 10px auto;
  width: 90%;
}

.tailor-container-inside .right {
  width: 30%;
  background-color: transparent;
}

.container-steps {
  max-width: 1320px; /* Ocupa el 80% del ancho del contenedor */
  margin: 5px auto; /* Centra el div horizontalmente */
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
  background-color: white;
  text-align: center; /* Alineación de texto para múltiples líneas */
  border-radius: 30px;
  padding-bottom: 10px;
}

.container-steps h1 {
  font-weight: bold;
  font-size: 50px;
  color: black;
  width: 80%;
  align-items: center;
  justify-self: center;
  text-align: center;
  font-family: Outfit, Arial;
}

.step-items {
  width: 95%; /* Ocupa el 80% del ancho del contenedor */
  margin: 0 auto; /* Centra el div horizontalmente */
  display: flex; /* Activa flexbox */
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
  text-align: center; /* Alineación de texto para múltiples líneas */
  border-radius: 5px;
  margin-bottom: 20px;
  background-color: #d5f3e6;
}

.step-items .left {
  width: 15%;
  background-color: transparent;
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
  height: 98%;
}

.step-items .left h1 {
  font-size: 120px;
  line-height: 1; /* Ajusta la altura de línea al mismo tamaño del texto */
  background-color: transparent;
  color: #005c36;
}

.step-items .right {
  width: 85%;
  background-color: rgb(249, 247, 242);
  border-radius: 5px;
  margin-top: 4px;
  margin-bottom: 4px;
  margin-right: 4px;
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
}

.step-items .right h2 {
  font-family: Outfit, Arial;
  font-size: 34px;
  font-weight: 500;
  text-align: left;
  margin-left: 10px;
}

.step-items .right h3 {
  font-family: Outfit, Arial;
  font-size: 28px;
  font-weight: 300;
  text-align: left;
  margin-left: 10px;
}

.accordion-container {
  background-color: transparent;
  padding: 20px;
}

.accordion-container h1 {
  text-align: center;
  font-family: Outfit, Arial;
  font-weight: 300;
  color: rgb(50, 110, 100);
  font-size: 50px;
}

#accordion {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 50px auto;
  max-width: 1000px;
}

#accordion li {
  list-style: none;
  width: 100%;
  background: rgb(245, 248, 244);
  padding: 10px;
  border: 1px dashed #ccc;
}

#accordion p {
  font-family: Outfit, Arial;
}

#accordion li label {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  color: #000;
}

#accordion li label span {
  transform: rotate(90deg);
  font-size: 22px;
  color: rgb(50, 110, 100);
}

#accordion label + input[type="checkbox"] {
  display: none;
}

#accordion .content {
  padding: 0 10px;
  line-height: 26px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

#accordion label + input[type="checkbox"]:checked + .content {
  max-height: 400px;
}

.end-page {
  background: linear-gradient(180deg, #00884e, #006a3d);
  text-align: center; /* Centrar el contenido en el contenedor */
  max-width: 1320px; 
  margin:0 auto;
  padding-bottom: 30px;
  margin-top: 30px;
  border-radius: 4px;
  margin-bottom: 30px;

}

.end-page img {
  width: 140px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.navbar-end {
  display: flex;
  justify-content: center; /* Espacia los elementos dentro del navbar */
  align-items: center; /* Centra verticalmente los elementos */
  max-width: 1400px; /* Limita el ancho máximo del navbar */
  margin: 0 auto; /* Centra horizontalmente en la ventana */
  margin-bottom: 30px;
  padding: 0 2rem; /* Agrega espacio interno para evitar que los elementos estén pegados a los bordes */
  background-color: transparent;
  margin-top: 30px;
}

.navbar-end .nav-links {
  display: flex;
  gap: 3rem;
}

.navbar-end .nav-links a {
  font-size: 1.5rem;
  color: white;
  font-family: Outfit, Arial;
  text-transform: capitalize;
  position: relative;
  font-size: bold;
}

.navbar-end .nav-links a:hover {
  color: #000;
}

.navbar-end .nav-links a:hover::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #00c853;
}

#small-icons {
  width: clamp(28px, 2.2vw, 40px);
  height: auto;
}

@media (max-width: 1024px) {
  .footer-top-27 {
    grid-template-columns: 1fr;   /* logo arriba, links abajo */
    text-align: center;
  }

  .footer-links-27 {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
  }

  .add-container-cu-hiw {
    grid-template-columns: 1fr 360px; /* texto + animación un poco más compacto */
  }
}
@media (max-width: 1024px) {
  .add-container-cu-hiw {
    grid-template-columns: 1fr min(360px, 34vw);
    gap: 28px;
  }
}


@media (max-width: 768px) {
  .navbar {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }

  .navbar .nav-links {
    width: 100%;
    justify-content: center;
  }

  .add-container-cu-hiw {
    grid-template-columns: 1fr; /* texto arriba, animación abajo */
    text-align: center;
  }
}

@media (max-width: 480px) {
  #small-icons {
    width: 28px;
  }

  .add-container-cu-hiw {
    gap: 16px;
    margin-block: 16px;
  }
}


.end-page h2 {
  font-family: Roboto, Arial;
  font-size: 26px;
  font-weight: 300;
  color: white;
}

#end-button{
  margin: 0 auto;
}


.tittle-examples-section{
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
  max-width: 1320px;
  font-size: 60px;
  font-family: Outfit,Arial;
  font-weight: 600;
}



#janeexamplecontainerheader h1{
  font-size: 2em;
}

#janeexamplecontainerheader h3{
  font-size: 26px;
}

#janeexamplecontainerheader img{
  width: 300px;
  height: auto;
}

.info-beyond{
  max-width: 1320px;
  margin: 0 auto;
  text-align: center;
}

.alternatives-container{
  border: 1px solid #ccd3db;
  background-color: white;
  border-radius: 6px;
  padding: 10px;
  max-width: 1320px;
  margin: 0 auto;
}

.alternatives-collect{

    flex: 0 0 100%; /* Ocupa el 100% del ancho de la fila */
    border: 1px solid #ccd3db;
    border-radius: 6px;
    display: flex;
    width: 100%;
    margin: 0 auto;
}

.alternatives-collect .left{
  margin-left: 20px;
  margin-right: 10px;
  width: calc(50% - 30px);
  margin-bottom: 20px;
}

.alternatives-collect .left p{
  margin-left: 20px;
}




.alternatives-collect .right{
  margin-right: 20px;
  margin-left:10px;
  width: calc(50% - 30px);
  margin-bottom: 20px;
}

.alternatives-container h1{
  text-align: center;
  font-size: 40px;
  margin-bottom: 10px;
}

.subtitulo{
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
  width: 90%;
  margin: 0 auto;
}




.progress-container {
  display: flex;
  flex-direction: column;
  width: 100%; /* Contenedor con 100% del ancho disponible */
}

.progress-container .left {
  width: calc(50% - 20px);
  margin-left: 20px;
}

.progress-container .header {
  display: flex;
  justify-content: space-between; /* Distribuye el espacio entre "Original" y "50%" */
  align-items: flex-end; /* Asegura que h3 y el p estén alineados al límite inferior */
  width: 100%; /* Asegura que ocupe todo el ancho disponible */
  margin-bottom: 5px; /* Espacio entre el texto y la barra */
  margin-top: 20px;
}

.progress-container h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  color: #333;
}

#percentage {
  margin: 0; /* Elimina márgenes predeterminados */
  font-size: 20px;
  font-weight: 400;
  color: #333;
  align-self: flex-end; /* Asegura que el p esté en la parte inferior */
}

.progress-container .progress-bar {
  width: 100%; /* Asegura que la barra ocupe todo el ancho del contenedor */
  height: 10px; /* Grosor de la barra */
  background-color: #ccc; /* Color gris para el fondo */
  border-radius: 5px; /* Bordes redondeados */
  overflow: hidden; /* Asegura que la parte rellena no se desborde */
  position: relative; /* Necesario para posicionar la barra rellena */
}

.progress-container .filled {
  height: 100%;
  border-radius: 5px 0 0 5px; /* Bordes redondeados en la parte izquierda */
  position: absolute; /* Permite ajustar correctamente dentro de la barra */
  top: 0;
  left: 0;
  width: 0%; /* Esto permite manejar el ancho dinámicamente */
}

#original-bar .filled {
  width: 50%; /* Ancho según el porcentaje */
  background-color: black;
}

#basic-bar .filled {
  width: 50%;
  background-color: #e0e0e0;
}

#standard-bar .filled {
  width: 50%;
  background-color: rgb(236, 131, 74);
}

#premium-bar .filled {
  width: 50%;
  background-color: #a3e4d7;
}

#ideal-bar .filled {
  width: 50%;
  background-color: #82e0aa;
}

#quick-bar .filled {
  width: 50%;
  background-color: rgb(185, 132, 250);
}

#max-bar .filled {
  width: 50%;
  background-color: rgb(192, 52, 24);
}







.grid-container-unique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px
}

.chart-container-unique {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%
}

.chart-title-unique {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.circular-chart-unique {
  max-width: 120px;
  max-height: 120px;
}

.circle-bg-unique {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle-progress-unique {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  
}

.percentage-text-unique {
  fill: #333;
  font-size: 7px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: central;
}

#basic-unique{
  stroke: #e0e0e0;
}
#standard-unique{
  stroke: #aed6f1;
}
#premium-unique{
  stroke: #a3e4d7;
}
#ideal-unique{
  stroke: #82e0aa;
}
#quick-unique{
  stroke: #f7dc6f;
}
#max-unique{
  stroke: #f1948a;
}

#examples-subtitles{
  text-align: center;
}

#graph-final {
  display: flex; /* Activa flexbox */
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
  width: 90%;
  margin: 50px auto; /* Centra el contenedor respecto al documento */
}

#last-container{
  margin-top: 50px;
}

#efficiency-graph{
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 60px;
  display: flex;
  width: 80%;
}



/* Parent container */
.unique-container-xyz123 {
  display: flex; /* Coloca los hijos en línea horizontal */
  width: 100%; /* Ocupa todo el ancho disponible */
  background-color: rgb(245, 248, 244); /* Fondo opcional para diferenciarlo */
  justify-content: space-between; /* Espaciado uniforme entre los hijos */
  align-items: stretch; /* Asegura que los hijos tengan la misma altura */
  padding: 10px; /* Espaciado interno opcional */
  gap: 10px; /* Espaciado entre los hijos */
  margin-top: 24px;
  border: 1px dashed #ccc;
}

/* Child divs */
.unique-child-xyz123 {
  flex: 1; /* Cada hijo ocupa el mismo espacio proporcional */
  margin: 0; /* Elimina márgenes adicionales */
  background-color: transparent; /* Fondo blanco para destacar */
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
  font-size: 1.2rem; /* Tamaño de fuente para los textos */
  color: #000; /* Color del texto */
  box-sizing: border-box; /* Asegura que padding y border no afecten las dimensiones */
}

/* Opcional: Para estilos de texto */
.unique-child-xyz123 p {
  margin: 0 auto;
  width: 90%;
  text-align: center;
}



.unique-child-xyz123 h3 {
  margin: 0;
  text-align: center;
  margin-bottom: 20px;
}

.unique-child-xyz123 h2 {
  margin: 0;
  text-align: center;
  font-size: 40px;
}

.unique-child-xyz123 .fix-size{
  font-size: 20px;
}

#number-order{
  background-color: #00b86b;
  width: 24%;
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 30px;
  color: #000;
}


#child-end{
  max-width: 1320px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-top: 30px;
}


#child-left{
  width: 35%;
  flex: none;
  margin-top: 20px;
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  border: none;
}

#child-right{
  width: 65%;
  flex: none;
  margin-top: 20px;
  border: none;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  border: none;
}

.unique-child-xyz123 img{
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  width: 60%;
  margin: 0 auto;
}

#end-example-p{
  margin-top: 20px;
  color: #000;
  font-size: 22px;
  font-weight: 500;
}











/* About us */

.add-container-au {
  width: 1320px; /* Ocupa el 70% del ancho de la pantalla */
  background-color: transparent; /* Color de fondo del contenedor principal */
  margin: 0 auto; /* Centrado horizontal */
  display: flex; /* Activa flexbox para disposición en línea */
  justify-content: space-between; /* Espaciado entre los div internos */
}

/* Estilo para los div hijos */
.add-container-au .left-div,
.add-container-au .right-div {
  display: flex; /* Flexbox para organizar el contenido */
  flex-direction: column; /* Coloca los elementos en columna */
  justify-content: center; /* Centra verticalmente el contenido */
  border-radius: 0px; /* Bordes redondeados */
  margin: 10px; /* Espaciado alrededor de cada div */
  height: 480px;
}

/* Proporciones de ancho para los div */
.add-container-au .left-div, .add-container-au .right-div {
  background-color: rgb(245, 248, 244);
}

.add-container-au .left-div:hover, .add-container-au .right-div:hover {
  background-color: white;
}


.add-container-au .left-div h3, .add-container-au .right-div h3 {
  text-align: left; /* Centrado horizontal del texto */
  font-size: 38px; /* Tamaño de fuente ajustado */
  color: black; /* Color del texto */
  font-family: Outfit, Arial;
  font-weight: 500;
}


/* Estilo para el texto debajo de las imágenes */
.add-container-au .left-div p, .add-container-au .right-div p {
  margin: 5px 0 0; /* Margen superior para separar el texto de la imagen */
  text-align: left; /* Centrado horizontal del texto */
  font-size: 20px; /* Tamaño de fuente ajustado */
  color: #425366; /* Color del texto */
  width: 80%;
  font-weight: 300;
  margin-top: 20px;
  margin-bottom: 20px;
}

#a1{
  width: 50%; /* Ocupa el 60% del contenedor principal */
  border: 1px dashed #ccc
}

#a1:hover,#b1:hover,#a2:hover,#b2:hover,#a3:hover,#b3:hover,#a4:hover,#b4:hover {
  border: 1px dashed #00c853;
}


#b1{
  width: 50%; /* Ocupa el 60% del contenedor principal */
  border: 1px dashed #ccc
}

#a2{
  width: 60%; /* Ocupa el 60% del contenedor principal */
  border: 1px dashed #ccc
}

#b2{
  width: 40%; /* Ocupa el 60% del contenedor principal */
  border: 1px dashed #ccc
}

#a3{
  width: 40%; /* Ocupa el 60% del contenedor principal */
  height: 300px;
  border: 1px dashed #ccc
}

#b3{
  width: 60%; /* Ocupa el 60% del contenedor principal */
  height: 300px;
  border: 1px dashed #ccc
}

#a4{
  width: 50%; /* Ocupa el 60% del contenedor principal */
  height: 300px;
  border: 1px dashed #ccc
}

#b4{
  width: 50%; /* Ocupa el 60% del contenedor principal */
  height: 300px;
  border: 1px dashed #ccc
}

#headp{
  align-items: center;
  text-align: center;
  margin: 0 auto;
  max-width: 1320px;
}

#headcontact {
  box-sizing: border-box;
  max-width: 1320px;
  /* Margen superior/inferior fijo y auto en laterales para centrar */
  margin: 20px auto;
  /* Esto limita el ancho y deja 15px libres a cada lado */
  padding: 20px;
  flex-wrap: wrap;
}



@media (max-width: 1024px) {
  #headcontact {
    display: block; /* Si antes era flex, esto lo sobrescribe */
    /* opcional: ajustar ancho y paddings en mobile
    max-width: 100%;
    */
  }
}




.input-box {
  margin: 20px;
}

.input-box label, .dropdown-section label, #state-dropdown{
  font-size: 18px; /* Cambia el tamaño de la letra */
  font-weight: 600;
  color: #000;
}


input[type="text"] {
  width: 100%;
  max-width: 600px;
  padding: 10px;
  font-size: 20px;
  border: 1px solid #ccc;
}

.dropdown-section {
  margin: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 26px;
}

select {
  width: 100%;
  padding: 10px;
  font-size: 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
}



/* Ocultar el dropdown de estados por defecto */
.hidden {
  display: none;
}





.form-left-1{
  width: 50%;
  padding: 10px;
}




.form-left, .form-right {
  width: 100%;
  padding: 10px;
}

.form-right {
  display: flex; /* Usar Flexbox */
  justify-content: center; /* Centra la imagen horizontalmente */
  align-items: center; /* Centra la imagen verticalmente */
  height: 100%; /* Asegura que el contenedor tenga altura para centrar verticalmente */
}

.form-right img {
  width: 80%; /* Ajusta el tamaño de la imagen */
  height: auto; /* Mantiene la proporción */
}

.input-box {
  margin-bottom: 10px;
}


input[type="text"], input[type="email"], select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 5px;
}


.dropdown-section {
  margin-bottom: 20px;
}

.hidden {
  display: none;
}

.radio-group {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centra los radios en el contenedor */
  align-items: center; /* Centra los radios verticalmente (opcional) */
  margin: 20px auto; /* Centra el contenedor y agrega un margen arriba y abajo */
  width: fit-content; /* Asegura que el contenedor se ajuste al tamaño de su contenido */
}

.radio-btn {
  margin-right: 20px; /* Espacio entre los radios */
}

.radio-group input[type="radio"] {
  margin-right: 10px;
  accent-color: green; /* Cambia el color del radio button seleccionado a verde */
}

.radio-group label {
  font-size: 24px;
}





.contact-us-message {
  width: 100%;
  align-self: center;
  text-align: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 50px;
}

.form-group label {
  font-size: 18px;
  font-weight: bold;
}



textarea:focus {
  border-color: #28A745;
}

.submit-btn {
  padding: 12px 20px;
  font-size: 18px;
  background-color: #00c853;
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  width: 200px;
  align-self: center;
  font-weight: 700;
}

.submit-btn:hover {
  background-color: #45a049;
}

@media (max-width: 768px) {
  .form-left, .form-right {
    width: 100%;
  }

  .submit-btn {
    width: 100%;
  }
}



.termsitems{
  margin-top: 16px;
}

.termsitemsp{
  font-size: 20px;
}

.headtext-tp{
  font-size: clamp(16px, 1.8vw, 20px); /* min 14px, crece con 1.8vw, max 18px */
  font-weight: 400;
  text-align: center;
  margin-bottom: 20px;
  color: #000;
}


.Fynia-container-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  gap: 20px;
}

.Fynia-btn {
  width: 350px;
  height: 300px;
  padding: 15px;
  text-decoration: none;
  display: block; /* Cambié a block para que ocupe toda el área */
  justify-content: space-between;
  align-items: center;
  position: relative; /* Para asegurarnos de que el hover sea detectado correctamente */
}

.Fynia-btn-text {
  text-align: left;
  font-size: 30px;
}

.Fynia-btn-image {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.Fynia-btn img {
  width: 200px;
  height: 200px;
}



#textbuytoken{
  display: inline-block;
  color: #005c36;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgb(245, 248, 244);
  border: 1px dashed #00c853;
  border-radius: 128px;
  font-family: Outfit, Arial;
  font-size: 18px;
  font-weight: 400;
}

#textbuytoken-p{
  color: #000;
  font-family: Outfit, Arial;
  font-size: 16px;
  text-align: left;
  margin-top: 10px;
}



#buytokenbt, #startopti {
  background-color: white;
  border: dashed 1px #ccc;
}

.get-title-text{
  text-align: left;
  font-size: 28px;
  margin-top: 10px;
  font-weight: 600;
  color: #000;
}



#buytokenbt:hover, #startopti:hover {
  border: 1px dashed #00c853;
}

#endforced{
  position: fixed; /* Fija el contenido en la parte inferior */
  bottom: 20px; /* Deja un pequeño margen desde el borde inferior */
  left: 50%; /* Mueve el inicio del div al centro de la pantalla */
  transform: translateX(-50%); /* Lo traslada hacia la izquierda la mitad de su ancho */
  text-align: center; /* Centrar el contenido en el contenedor */
  justify-content: center;
  padding-bottom: 30px;
  border-radius: 8px;
  margin: 0 auto;
  max-width: 1320px;
  width: 1320px;
}




#billing-title{
  font-size: 50px;
}

#left-billing{
  background-color: white;
  border: 1px dashed #ccc;
}

#left-billing-de{
  background-color: white;
  border-top: 1px dashed #ccc;
border-left: 1px dashed #ccc;
border-bottom: 1px dashed #ccc;
border-right: none;
}

#right-billing{
  background-color: #19D079;
  width: 100%;
}


#input-container {
  display: flex;
  gap: 20px; /* Espaciado entre los elementos */
  justify-content: space-between;
}

#card-number-box,
#email-box {
  width: 50%; /* Asegura que ambos elementos ocupen la misma proporción */
}



#dropdown-container {
  display: flex;
  gap: 20px; /* Espaciado entre los select */
  justify-content: space-between;
}

#state-dropdown,
#city-dropdown {
  width: 100%; /* Ajusta el ancho para que entren en la misma línea */
}







.input-box-card {
  display: flex;
  flex-direction: column;
  /* Evita que se desborde fuera del contenedor */
  overflow: hidden; /* Asegura que nada se salga */
  box-sizing: border-box; /* Incluye padding y border en el cálculo del ancho */;
}

.card-label-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 95%;
}

.card-icons-container {
  display: flex;
  gap: 10px;
}

.card-icons-container img {
  height: 20px;
  width: auto;
  max-width: 100%; /* Evita que las imágenes se salgan */
}

.input-box-card input {
  width: 95%;
  margin-top: 5px;
  box-sizing: border-box; /* Asegura que el padding y border no desborden */
}





.card-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.credit-card {
  width: 350px;
  height: 200px;
  background: linear-gradient(180deg, #00884e, #006a3d);
  border-radius: 12px;
  color: white;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-chip {
  width: 50px;
  height: 30px;
  background: gold;
  border-radius: 5px;
  margin-bottom: 15px;
}

.card-number {
  font-size: 22px;
  text-align: center;
  letter-spacing: 2px;
  font-family: Outfit, Arial;
}

.card-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  align-items: center;
}

.card-holder, .card-expiration, .card-cvv {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.card-holder span, .card-expiration span, .card-cvv span {
  font-size: 12px;
  opacity: 0.7;
}

.card-holder div, .card-expiration div, .card-cvv div {
  font-size: 16px;
  font-weight: bold;
}

/* Mover el CVV a la derecha */
.card-cvv {
  margin-left: auto;
}

.green-link {
  color: green; /* Color del texto verde */
  text-decoration: underline; /* Subrayado */
}

.green-link:hover {
  color: darkgreen; /* Cambiar color al pasar el ratón sobre el enlace */
}

#organizer-p{
  margin: 20px;
}


#reflected-data{
  transform: scaleX(-1); /* Esto reflejará el video respecto a la vertical */
}


#video-dataentry{
  background-color: white;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  border-top: 1px dashed #ccc;
  border-right: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  border-left: none;
}


#head-dataentry{
  max-width: 800px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: rgb(245, 248, 244);
  border: 1px dashed #ccc
}


#p-dataentry{
  background-color: white;
  justify-content: center;
  margin: 0;
  text-align: left;

}








.Fynia-radio-container {
  display: flex;
  gap: 20px; /* Espacio entre los botones */
  align-items: center;
}
.form-left .input-box .Fynia-radio-container .Fynia-radio-label {
  display: flex;
  align-items: center;
  font-size: 18px; /* Cambia el tamaño del texto */
  font-family: Outfit, Arial, sans-serif; /* Cambia la fuente */
  font-weight: 500; /* Usa 'bold' para negrilla, 'normal' para texto normal */
  cursor: pointer;
  color: #000;
}


.form-left-examples{
  width: 500px;
}

.Fynia-radio-input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.Fynia-radio-input:checked {
  border-color: green;
}

.Fynia-radio-input::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: green;
  border-radius: 50%;
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.Fynia-radio-input:checked::before {
  opacity: 1;
}

.subtitle-p{
  color: #000;
}


#end-confirmation{
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}



#card-example{
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  background-color: white;
  align-items: stretch;
}

.add-container-cu {
  display: grid ; 
  grid-template-columns: repeat(2, 1fr); /* 2 columnas del mismo tamaño */
  gap: 15px; /* espacio entre las cards, puedes ajustar este valor */
  padding: 2rem; /* opcional, para darle margen interno al contenedor */
  border: 1px dashed #ccc;
  background-color: rgb(245, 248, 244);
}

.add-container-gs {
  display: grid ; 
  gap: 15px; /* espacio entre las cards, puedes ajustar este valor */
  padding: 2rem; /* opcional, para darle margen interno al contenedor */
  border: 1px dashed #ccc;
  background-color: rgb(245, 248, 244);
  margin: 0 auto !important;
}


.add-container-pp {
  grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
  gap: 15px; /* espacio entre cards */
  padding: 2rem;
  border: 1px dashed #ccc;
  background-color: rgb(245, 248, 244);

}

#left-card-example{
  background-color: white;
  border: solid 1px rgb(190, 190, 190);
  border-radius: 4px;
  position: relative;
  margin-top: 15px;
  cursor: pointer;
  transition: border-color 0.3s ease; /* Transición suave para el cambio de color */
  padding: 0px;
  display: grid;
  
  grid-template-rows: 
    auto    /* imagen */
    auto    /* título */
    1fr     /* párrafo: ocupa el espacio sobrante */
    auto;   /* grid de datos */

    width: 50%;
}

#left-card-example:hover {
  border-color: #19D079; /* Cambia a rojo cuando se pone el cursor */
}


#p-card-examples{
  font-size: 18px;
  text-align: left;
  padding: 0 15px 15px;
  color: #000;
}




.card-examples {
  padding: 15px;
  bottom: 15px;
  left: 15px;
  right: 15px;
  
}

.card-header-examples {
  background: transparent;
  border: 1px solid #ccc;
  padding: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  
}

.card-examples .card-header-examples h2 {
  font-weight: 500;
  font-size: 30px;
}

.card-body-examples {
  background: transparent;
  padding: 16px;
  border: 1px solid #ccc;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}


.grid-item-examples {
  background: transparent;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
}


#examples-title{
  font-size: 2em;
}



.img-examples-card{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}


.end-message {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 16px;   /* respiro lateral en móvil */
  text-align: center;
}

/* END MESSAGE: centra el botón */
.end-message .hero-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}


#end-message-h3 {
  font-size: clamp(1.25rem, 1.6vw + 0.7rem, 1.75rem);
  line-height: 1.35;
  max-width: 70ch;      /* limita longitud de línea */
  margin: 16px auto 8px;
}

#get-started-aux{
  display: inline-flex;
  margin-bottom: 30px;
  background-color: #00c853;
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  font-family: Outfit;
  border-radius: 0px;
  justify-content: center;
  min-height: 44px;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 768px) {
  #end-message-h3 {
    font-size: clamp(1.15rem, 1.2vw + 0.9rem, 1.5rem);
    margin-top: 12px;
  }
  #get-started-aux {
    width: 100%;               /* que no se “achique” */
    max-width: 360px;          /* ancho cómodo en móvil */
    padding: 12px 16px;        /* un poco menos de padding */
  }
}

@media (max-width: 480px) {
  #end-message-h3 { 
    margin-bottom: 6px; 
  }
  #get-started-aux {
    max-width: 320px;
  }
}



#get-started-aux:hover {
  background-color: #000;
  /*border: 2px solid #00c853;*/
  color: white;
  transition: color 0.3s ease;
}

#card-howitworks-left{
  border: solid 1px rgb(190, 190, 190);
  border-radius: 0px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: white;
  
}


#p-card-howitworks-left{
  font-size: 20px;
  text-align: left;
  max-width: 50%;
  line-height: 1.2;
}

#card-howitworks-right{
  border: solid 1px rgb(190, 190, 190);
  border-radius: 0px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  background-color: white;
}

#p-card-howitworks-right{
  font-size: 20px;
  text-align: right;
  max-width: 50%;
  line-height: 1.2;

}



.title-cards-h2-right{
  font-size: 40px;
  text-align: right;
}

/* css/styles.css */

/* Estilos comunes para todos los pasos */

.add-container-cu-hiw {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px;
  display: grid;
  grid-template-columns: 1fr min(420px, 35vw); /* texto flexible + animación */
  gap: 32px;
  align-items: center;
  justify-content: initial;
  background-color: rgb(245, 248, 244);
  grid-auto-flow: dense;
  border: 1px dashed #ccc; /* opcional, solo depuración */
  justify-items: stretch;
}





  @media (max-width: 768px) {
  .add-container-cu-hiw {
    grid-template-columns: 1fr;   /* apila: texto arriba, animación abajo */
    gap: 20px;
    text-align: center;
  }
  .add-container-cu-hiw .text-content-hiw,
  .add-container-cu-hiw .anim-content-hiw {
    grid-column: 1 !important;    /* fuerza una sola columna en móvil */
  }
  .add-container-cu-hiw .text-content-hiw { text-align: center; }
  .add-container-cu-hiw .anim-content-hiw dotlottie-player {
    width: min(92vw, 420px) !important;
  }
}




.add-container-cu-hiw:hover{
  border: 1px dashed#00c853;
}

/* Paso con texto a la izquierda, animación a la derecha */
.add-container-cu-hiw.left-hiw {
  flex-direction: row;
}



/* Paso con texto a la derecha, animación a la izquierda */
.add-container-cu-hiw.right-hiw {
  flex-direction: row-reverse;
  grid-template-columns: min(420px, 35vw) 1fr;
}

/* Bloque de texto: ocupa 50% */
.add-container-cu-hiw .text-content-hiw {
  grid-column: 1; 
  min-width: 0;  
}

/* Títulos dentro del bloque de texto */
.add-container-cu-hiw .text-content-hiw h2 {
  font-size: 40px;
  margin-bottom: 10px;
  line-height: 1.1;
  text-align: left;
}

.text-content-hiw-left{
  text-align: right !important;
}

/* Párrafos dentro del bloque de texto */
.add-container-cu-hiw .text-content-hiw p {
  font-size: 20px;
  line-height: 1.4;
  color: #000;
}



/* Bloque de animación: ocupa 50% */
.add-container-cu-hiw .anim-content-hiw {
  grid-column: 2; 
  justify-self: center;    /* centra la Lottie en su columna */
}

.add-container-cu-hiw .anim-content-hiw dotlottie-player {
  width: min(90vw, 360px) !important;
  height: auto !important;
  max-width: 100% !important;
}


/* === HIW: Alternancia izquierda/derecha — REEMPLAZAR ESTE BLOQUE === */

/* ayuda al autocolocador a rellenar huecos al invertir columnas */
.add-container-cu-hiw { 
  grid-auto-flow: dense;
}

/* Texto a la izquierda, animación a la derecha */
.add-container-cu-hiw.left-hiw  .text-content-hiw { 
  grid-column: 1; 
  grid-row: 1; 
  text-align: left; 
}
.add-container-cu-hiw.left-hiw  .anim-content-hiw { 
  grid-column: 2; 
  grid-row: 1; 
  justify-self: end; 
  align-self: center; 
}

/* Texto a la derecha, animación a la izquierda */
.add-container-cu-hiw.right-hiw .text-content-hiw { 
  grid-column: 2; 
  grid-row: 1; 
  text-align: right; 
}
.add-container-cu-hiw.right-hiw .anim-content-hiw { 
  grid-column: 1; 
  grid-row: 1; 
  justify-self: start; 
  align-self: center; 
}

/* Evita que el texto empuje a la animación por desborde */


/* En móvil apila y neutraliza la alternancia */
@media (max-width: 768px) {
  .add-container-cu-hiw .text-content-hiw,
  .add-container-cu-hiw .anim-content-hiw {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: center;
    text-align: center;
  }
}








.opti-h2{
  font-size: clamp(18px, 1.2vw + 0.6rem, 1.25rem);
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 1.2;
  margin-inline: auto;  /* centrar texto */
}


.Fynia-grandchild{
  background-color: white;
  border: dashed 1px #ccc;
}

.Fynia-grandchild:hover {
  border: 0;
  border: 1px dashed #00c853;
}






/* Parent container: two children side by side with 15px spacing */
#Fynia-parent-container {
  border: dashed 1px #ccc;
  display: flex;
  gap: 15px;
  padding: 15px;
  max-width: 1320px;
  margin: 0 auto;
  background-color: rgb(245, 248, 244);
}

/* Common style for all divs that should have grey background, border-radius, and margin */
.Fynia-box {
  gap: 15px;
  flex: 1;
  padding: 5px;
}

#svg-h2-text{
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 15px;
}

/* Left child: stack its content vertically */
#Fynia-child-left {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  padding: 0px;
  text-align: center;
  margin: 0 auto;
}

#Fynia-child-left img {
  width: 70%;
  height: auto;

}


/* Right child: arrange grandchild divs vertically */
#Fynia-child-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espacio de 15px entre cada hijo */
  border-color: transparent;
  padding: 0px;
}

/* Optionally, style the paragraph as needed; it's not affected by the .Fynia-box class */


.optimization-h2{
font-size: 26px;
font-weight: 500;
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}

.optimization-h3{
  font-size: 20px;
  font-weight: 500;
  text-align: left;
  }

.optimization-title-p{
  font-size: 16px;
}

.optimization-title-p-2{
  font-size: 16px;
  font-family: Outfit, Arial;
  font-weight: 700;
  color: #00b86b;
  text-align: center;
}





.titles-optimizacion-h1{
  font-size: 60px;
  max-width: 1320px;
  margin: 0 auto;
  font-weight: 500;
  margin-top: 90px;
}

.titles-optimizacion-h3{  
  font-size: 22px;
  max-width: 1320px;
  text-align: left;
  margin: 0 auto;
  font-weight: 400;
  margin-bottom: 30px;
}


#titles-optimizacion-left{
  text-align: left;
}

#titles-optimizacion-right{
  text-align: right;
}


/* DASHBOARD DASHBOARD DASHBOARD DASHBOARD DASHBOARD DASHBOARD DASHBOARD */
/*******************
  Contenedor Principal
********************/
#Fynia-advanced-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px dashed #ccc;
  padding: 0;
  max-width: 1320px;
  margin-block-start: 30px;
  /* centrado cuando hay espacio y, si no, mínimo 15px por lado */
  margin-inline: max(15px, calc((100vw - 1320px) / 2));
  background-color: rgb(245, 248, 244);
}


/*******************
  Sección Superior
********************/
.Fynia-adv-header {
  display: flex;
  gap: 20px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;      /* Sin margen para que toque el borde superior */
  padding: 10px;  /* Ajusta si quieres más espacio */
  
}

#Fynia-adv-header-baseline{
  background-color: black;
}

#Fynia-adv-header-basic{
  background-color: #E0E0E0;
}

#Fynia-adv-header-standard{
  background-color: #AED6F1;
}

#Fynia-adv-header-premium{
  background-color: #A3E4D7;
}

#Fynia-adv-header-ideal{
  background-color: #82E0AA;
}

#Fynia-adv-header-quick{
  background-color: #F7DC6F;
}

#Fynia-adv-header-max{
  background-color: #F1948A;
}

#Fynia-adv-header-left {
  flex: 1;
  margin: 0;
}

#Fynia-adv-header-right {
  flex: 2;
  margin: 0;
  padding: 10px;
}

#Fynia-adv-title {
  margin: 0;
  font-size: 46px;
  color: white;
}

#Fynia-adv-subtitle {
  margin: 5px 0 0;
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
}

.subtitle-p-results{
  text-align: right;
  font-size: 18px;
  color: #000;
}

/*******************
  Primera Fila: Loan Details + Key Metrics
********************/
#Fynia-adv-top-row {
  display: flex;
  gap: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

#Fynia-adv-loan-details{
  flex: 0 0 310px;
  display: flex;
  flex-direction: column;
  height: 560px;
  gap: 15px;
}

#Fynia-adv-loan-details .Fynia-adv-loan-details-h2-title{
  font-size: 20px;
  color: black;
}

.loan-details-h3-details{
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

#h3-monthly-payment{
  background-color: #000;
  color: white;
  display: block;
  width: 100%;

  background-clip: border-box;
}

.loan-details-h2-details{
  font-size: 32px;
  font-weight: 700;
  text-align: right;
  padding-right: 10px;
}

.Fynia-adv-detail-box {
  background-color: white;
  border: 1px dashed #e5e7eb;
  flex: 1;
  height: 272px;
  border-radius: 0px;
}

.Fynia-adv-detail-box:hover {
  border: 1px dashed #00c853;
}

.Fynia-adv-detail-box h3 {
  margin-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
}

.title-results-1{
  font-size: 32px;
}

.final-insights{
  font-size: 20px;
  text-align: center;
  flex-grow: 1;
  justify-content: center; /* Centra horizontalmente */
  align-items: center;     /* Centra verticalmente */
  color: #000;
  margin: 0 auto;
  min-width: 0;              /* permite que se adapte al ancho disponible */
  width: 100%;               /* ocupa el ancho del contenedor */
  white-space: normal;       /* permite saltos de línea */
  overflow-wrap: anywhere;   /* rompe palabras/líneas muy largas */
  word-break: break-word;    /* respaldo */
}

#Fynia-adv-key-metrics-org{
  flex: 4;
  display: flex;
  flex-direction: column;
}

#Fynia-adv-key-metrics {
  display: flex;
  gap: 15px;
  justify-content: space-around;
  height: 180px;
}



.Fynia-adv-metric-box {
  border: 1px dashed #e5e7eb;
  flex: 1;
  text-align: center;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Para evitar desbordamientos */
  border-radius: 0px;
}

.Fynia-adv-metric-box:hover {
  border: 1px dashed #00c853;
}


.Fynia-adv-metric-box h3{
  font-size: 24px;
  font-weight: 400;
  background-color: transparent;
  display: block;              /* asegura barra a todo el ancho */
  width: 100%;
  padding: 8px 12px;           /* (opcional) mejor altura visual */
  color: black;
  margin: 0;
  /*border-radius: 12px 12px 0 0;*/
  border-radius: 0px;
  border-bottom: 1px dashed #e5e7eb;
}




.Fynia-adv-metric-box h2{
  font-size: 40px;
  font-weight: 600;
  margin-top: 0;
  display: flex;               /* nuevo */
  align-items: center;         /* nuevo: centrado vertical */
  justify-content: center;     /* nuevo: centrado horizontal */
  flex: 1 1 auto;              /* ocupa el espacio bajo el h3 */
}


.comparison-p-aux{
  background-color: #D5F3E6;
  border: 1px solid #007B47;
  border-radius: 300px;
  text-align: center;
  align-items: center;
  margin: 0 auto; 
  padding-left: 20px;
  padding-right: 20px;
  color: #27ae60;
  font-weight: 500;
  font-size: 20px;
}

#basic-metric-box-tra{
  margin-top: 26px;
}

#Fynia-adv-chart-row-1 {
  display: flex; /* ensure it's a flex container */
  margin-top: 15px;
  gap: 15px; /* separación entre columnas */
}

#Fynia-adv-main-chart-1 {
  flex: 1;
  text-align: center;
  overflow: hidden;
  position: relative;
  background-color: white;
  border: 1px dashed #e5e7eb;
  border-radius: 0px;
}

#Fynia-adv-main-chart-1:hover{
  border: 1px dashed #00c853;
}

/*******************
  Segunda Fila: Primera Gráfica
********************/
#Fynia-adv-chart-row {
  border: 1px dashed #e5e7eb;
  padding: 15px;
  border-radius: 0px;
  height: auto;
  display: flex;
  margin-left: 15px;
  margin-right: 15px;
  background-color: white;
}

#Fynia-adv-chart-row:hover{
  border: 1px dashed #00c853;
}

#Fynia-adv-main-chart {
  text-align: center;
  flex: 1;
  position: relative;
}

/*******************
  Tercera Fila: 4 Métricas Intermedias
********************/
#Fynia-adv-middle-row {
  display: flex;
  gap: 15px;
  margin-left: 15px;
  margin-right: 15px;
  background-color: transparent;
}

.Fynia-adv-middle-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.Fynia-adv-middle-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px dashed #e5e7eb;
  text-align: center;
  background-color: white;
  overflow: hidden; /* Ensure inner content doesn't overflow the borders */
  justify-content: center; /* Centra horizontalmente */
  align-items: center;     /* Centra verticalmente */
  border-radius: 0px;
  padding: 10px;
}

.Fynia-adv-middle-box:hover {
  border: 1px dashed #00c853;
}

.Fynia-adv-middle-box h2 {
  margin: 0;
  font-size: 40px;
}

.Fynia-adv-middle-top{
  height: 40px;
}

.Fynia-adv-middle-top,
.Fynia-adv-middle-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Títulos de secciones pequeñas: escalan fluido sin romper el desktop */
.Fynia-adv-middle-top h3{
  /* min = 14px (mobile), fluido con 1.6vw, max = 18px (desktop actual aprox.) */
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.2;          /* cabe bien dentro de los 40px de alto */
  margin: 0;
  text-align: center;        /* por si acaso en algún contenedor cambia el alineado */
}




/*******************
  Cuarta Fila: 2 Fechas
********************/
#Fynia-adv-dates-row {
  display: flex;
  gap: 15px;
  margin-left: 15px;
  margin-right: 15px;
  background-color: transparent;
}

.Fynia-adv-date-box {
  flex: 1;
  border: 1px dashed #e5e7eb;
  padding: 10px;
  background-color: white;
  border-radius: 0px;
}

.Fynia-adv-date-box:hover{
  border: 1px dashed #00c853;
}

/*******************
  Quinta Fila: Final Insights + Efficiency
********************/
#Fynia-adv-bottom-row {
  display: flex;
  gap: 15px;
  margin-right:15px;
  margin-left:15px;
  margin-bottom: 15px;
  flex-wrap: wrap;               /* <-- clave */
  align-items: stretch;
}

/* 2) Todos los hijos de la fila pueden encoger y no exceder el ancho */
#Fynia-adv-bottom-row > * {
  flex: 1 1 0;                   /* <-- en lugar de flex:none */
  min-width: 0;                  /* <-- clave en flexbox */
  max-width: 100%;
}

#Fynia-adv-final-insights {
  flex: 3;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 15px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  background-color: white;
  white-space: normal;
}

#Fynia-adv-efficiency {
  flex: 1;
  border: 1px dashed #ccc;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  background-color: white;
}

#Fynia-adv-efficiency:hover{
  border: 1px dashed #00c853;
}

#Fynia-adv-efficiency-circle {
  margin: 20px auto 0;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* DASHBOARD DASHBOARD DASHBOARD DASHBOARD DASHBOARD DASHBOARD DASHBOARD */


/* DASHBOARD MINI INICIO DASHBOARD MINI INICIO DASHBOARD MINI INICIO DASHBOARD MINI INICIO DASHBOARD MINI INICIO DASHBOARD MINI INICIO DASHBOARD MINI INICIO */

#Fynia-compare-container {
  display: flex;
  gap: 15px;
  max-width: 1320px;
  margin: 0 auto;
  margin-bottom: 15px;
  background: #f9f9f9;
  font-family: Arial, sans-serif;
}

/************
  Dashboard Card
************/
.Fynia-dash-card {
  flex: 1;
  background: #fff;
  border: 2px solid rgb(49, 112, 100);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Header with color background */
.Fynia-dash-header {
  display: flex;
  border-radius: 4px;
  width: 100%;
  background-clip: border-box;
  padding: 15px;

}

/* Different background colors for Basic vs. Standard */
.Fynia-basic-header {
  background: #e0e0e0; /* Yellowish tone for Basic */

}

.Fynia-standard-header {
  background: #AED6F1; /* Orangish tone for Standard */
}

.Fynia-premium-header {
  background: #A3E4D7; /* Orangish tone for Standard */
}

.Fynia-ideal-header {
  background: #82E0AA; /* Orangish tone for Standard */
}

.Fynia-quick-header {
  background: #F7DC6F; /* Orangish tone for Standard */
}

.Fynia-max-header {
  background: #F1948A; /* Orangish tone for Standard */
}

.Fynia-dash-title-subtitle {
  flex: 0 0 70%;
}

.Fynia-dash-title-subtitle h2 {
  margin: 0;
  font-size: 50px;
  font-weight: 600;
  text-align: left;
  flex: 1;
  color: black;
}

.Fynia-dash-title-subtitle h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  text-align: left;
  flex: 1;
  color: black;
}



.Fynia-dash-title-subtitle p {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.2;
  margin-top: 10px;
}


.Fynia-dash-subtitle {
  font-size: 24px;
  color: #444;
}


/* CIRCULO EFICIENCIA MINI  CIRCULO EFICIENCIA MINI  CIRCULO EFICIENCIA MINI  CIRCULO EFICIENCIA MINI  */
.Fynia-dash-efficiency-circle-mini {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex: 0 0 30%;
  align-self: stretch; 
}


.Fynia-dash-efficiency-circle-mini h3 {
  font-family: Outfit, Arial;
  font-weight: 500;
  font-size: 20px;
}

.Fynia-dash-efficiency-circle-mini svg {
  width: 100%;
  height: 100%;
}

.circle-bg-mini {
  fill: white;
}

/* Parte faltante en verde */
.circle-fill-mini {
  fill: none;
  stroke: white; /* Color para la parte faltante */
  stroke-width: 4;
  stroke-dasharray: 100, 100; /* Rellenar todo el círculo */
}

.circular-chart-mini {
  display: block;
  margin: 5px auto;
  max-width: 80%;
  max-height: 250px;
  margin-top: 20px;
}

/* Parte progresiva */
.circle_general-mini {
  fill: none;
  stroke-width: 4;
  stroke-dashoffset: 0;
  animation: progress 1s ease-out forwards;
}

#circle_basic-mini {
  stroke: #e0e0e0;
}

#circle_standard-mini {
  stroke: #aed6f1;
}

#circle_premium-mini {
  stroke: #a3e4d7;
}

#circle_ideal-mini {
  stroke: #82e0aa;
}

#circle_quick-mini {
  stroke: #f7dc6f;
}

#circle_max-mini {
  stroke: rgb(192, 52, 24);
}

/* Texto centrado */
.percentage_basic-mini {
  fill: black;
  font-family: Outfit,Arial, sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
  dominant-baseline: central;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0, 100;
  }
}


/* CIRCULO EFICIENCIA MINI FINAL  CIRCULO EFICIENCIA MINI FINAL  CIRCULO EFICIENCIA MINI FINAL  CIRCULO EFICIENCIA MINI FINAL    */


/************
  Payment Section
************/
.Fynia-payment-section {
  margin-left: 15px;
  margin-right: 15px;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 15px;
  display: flex;
  gap: 15px;
}

.Fynia-payment-left {
  flex: 0 0 80%;
}

.Fynia-payment-amounts {
  display: flex;
  justify-content: space-between;
}

.Fynia-payment-amount-left {
  text-align: left;
  margin-top: auto;
}

.Fynia-payment-amount-right {
  text-align: right;
  margin-top: auto;
}



.Fynia-payment-right {
  flex: 0 0 20%;
  text-align: right;
  padding-right: 15px;
  justify-content: center;
}


.Fynia-payment-section h2 {
  font-size: 26px;
  font-weight: 600;
  font-family: 'Outfit', Arial;
  text-align: left;
}

.Fynia-payment-section h3 {
  font-size: 22px;
  font-weight: 500;
  font-family: 'Outfit', Arial;
}

.Fynia-progress-bar {
  position: relative;
  width: 100%;
  height: 20px;
  background: #eee;
  border-radius: 5px;
  overflow: hidden;
}

.Fynia-progress-fill {
  height: 100%;
  width: 50%; /* This will be overridden by the inline style (e.g., style="width: 60%") */
}

#Fynia-progress-fill-basic{
  background: #e0e0e0;
}


#Fynia-progress-fill-standard{
  background: #aed6f1;
}

#Fynia-progress-fill-premium{
  background: #00B0FF;
}

#Fynia-progress-fill-ideal{
  background: #8DFF00;
}

#Fynia-progress-fill-quick{
  background: #f7dc6f;
}

#Fynia-progress-fill-max{
  background: #f1948a;
}

.Fynia-payment-stats {
  display: flex;
  gap: 10px;
  justify-content: center;
  font-size: 14px;
  color: #333;
}

/************
  Benefits
************/
.Fynia-benefits-title {
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  background-color: #d5f3e6;
  border: 1px solid #007b47;
  color: #005c36;
}

.Fynia-benefit-box {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-top: 5px;
  position: relative; /* for absolute positioning of the diff circle if needed */
}

.Fynia-benefit-box h5 {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 600;
}
.Fynia-benefit-box p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/************
  Small Bar for Differences
************/
.Fynia-small-bar {
  position: relative;
  width: 100%;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  margin: 5px 0;
  overflow: hidden;
}
.Fynia-small-fill {
  background: #ff9800;
  height: 100%;
  width: 50%; /* Overridden by inline style e.g. style="width: 37.9%;" */
}

/************
  Diff Circle
************/
.Fynia-diff-circle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 8px;
  text-align: center;
  color: #333;
}

/************
  Responsive (Optional)
************/
/* Example media query for smaller screens */
@media (max-width: 768px) {
  #Fynia-compare-container {
    flex-direction: column;
  }
}



/* CIRCULO EFICIENCIA MICRO  CIRCULO EFICIENCIA MICRO  CIRCULO EFICIENCIA MICRO  CIRCULO EFICIENCIA MICRO  */


.circle-bg-micro {
  fill: white;
}

/* Parte faltante en verde */
.circle-fill-micro {
  fill: none;
  stroke: #eee; /* Color para la parte faltante */
  stroke-width: 4;
  stroke-dasharray: 100, 100; /* Rellenar todo el círculo */
}

.circular-chart-micro {
  display: block;
  max-width: 100%;
  max-height: 250px;
  display: inline-block;
}

/* Parte progresiva */
.circle_general-micro {
  fill: none;
  stroke-width: 4;
  stroke-dashoffset: 0;
  animation: progress 1s ease-out forwards;
}

#circle_basic-micro {
  stroke: #e0e0e0;
}

#circle_standard-micro {
  stroke: #aed6f1;
}

#circle_premium-micro {
  stroke: #a3e4d7;
}

#circle_ideal-micro {
  stroke: #82e0aa;
}

#circle_quick-micro {
  stroke: #f7dc6f;
}

#circle_max-micro {
  stroke: #f1948a;
}

/* Texto centrado */
.percentage-micro {
  fill: black;
  font-family: Outfit,Arial, sans-serif;
  font-size: 0.55em;
  text-anchor: middle;
  dominant-baseline: central;
  font-weight: 500;
}


@keyframes progress {
  0% {
    stroke-dasharray: 0, 100;
  }
}



/* CIRCULO EFICIENCIA MICRO FINAL  CIRCULO EFICIENCIA MICRO FINAL  CIRCULO EFICIENCIA MICRO FINAL  CIRCULO EFICIENCIA MICRO FINAL    */

#total-repayment-micro-general-basic{
  background-color: #FEF6D9;
  margin-bottom: 15px;
}

#total-repayment-micro-general-standard{
  background-color: #FFE5D7;
  margin-bottom: 15px;
}

#total-repayment-micro-general-premium{
  background-color: #A3E4D7;
  margin-bottom: 15px;
}

#total-repayment-micro-general-ideal{
  background-color: #82E0AA;
  margin-bottom: 15px;
}

#total-repayment-micro-general-quick{
  background-color: #F7DC6F;
  margin-bottom: 15px;
}

#total-repayment-micro-general-max{
  background-color: #F1948A;
  margin-bottom: 15px;
}

#total-repayment-micro{
  flex: 0 0 100%;
}


#total-repayment-amount-micro h2{
  text-align: right;
  font-size: 40px;
}






























/* Contenedor principal gris con padding */
#Fynia-dashboard-2 {
  background-color: transparent; /* Gris suave */
  padding: 15px;
  box-sizing: border-box;
}

/* Contenedor interno blanco */
#Fynia-dashboard-container-2 {
  max-width: 1320px;
  margin: 0 auto;
  background: #E7E9ED;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 20px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  margin-bottom: 40px;
}

/* Título y descripción generales (aplican a ambos contenedores) */
#Fynia-monthly-title-7 {
  max-width: 1320px;
  margin: 0 auto;
  font-size: clamp(24px,2.5vw, 36px); /* Min 22px, escala, Max 36px */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  font-family: Outfit, Arial;
  margin-bottom: 30px;
}

.Fynia-monthly-title-7-aux{
  max-width: 1320px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
}


#Fynia-monthly-intro-7 {
  margin: 0 0 20px;
  font-size: clamp(17px, 2vw, 20px); /* Min 16px, escala, Max 20px */
  line-height: 1.4;
  text-align: center;
  font-family: Outfit, Arial;
  color: black;
}

/* Contenedor que agrupa la sección izquierda y derecha (50% cada uno) */
#Fynia-monthly-content-7 {
  display: flex;
  gap: 15px;
}

/* Sección izquierda: Barras de Pago */
#Fynia-monthly-left-7 {
  flex: 1;
  background-color: white;
  padding: 15px;
  border-radius: 4px;
}

/* Cada fila de barra (colocada en columna) */
.Fynia-bar-row-7 {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#Fynia-monthly-bars-7 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Define una altura mínima (puedes ajustarla según tu diseño) */
  min-height: 500px;
  box-sizing: border-box;
}

/* Contenedor de etiquetas, sobre la barra, ocupando toda la anchura */
.Fynia-bar-labels-7 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
}

.Fynia-bar-label-left-7 {
  text-align: left;
}

.Fynia-bar-label-left-7-h3{
  font-size: 22px;
  font-family: Outfit, Arial;
  font-weight: 400;
}

.Fynia-bar-label-left-7-h4{
  font-size: 16px;
  font-family: Outfit, Arial;
  font-weight: 600;
  bottom: 0px;
}



.Fynia-bar-label-right-7 {
  text-align: right;
  width: auto;
  display: flex;
  align-items: flex-end;
}

/* Fondo de la barra */
.Fynia-bar-bg-7 {
  position: relative;
  width: 100%;
  height: 12px;
  background: #eee;
  border-radius: 6px;
  overflow: hidden;
}

/* Relleno de la barra */
.Fynia-bar-fill-7 {
  height: 100%;
  background-color: #999;
}

/* Sección derecha: Donut Chart */
#Fynia-monthly-right-7 {
  flex: 1;
  /* Se reparte 50% del ancho */
  width: 400px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
}

/* Contenedor del Donut Chart y título */
#Fynia-increase-container-8 {
  max-width: 900px;
  margin: 0 auto;
  padding: 15px;
  background: transparent; /* Fondo gris suave */
  border-radius: 6px;
  box-sizing: border-box;
}
#Fynia-increase-title-8 {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  font-family: Outfit, Arial;
  margin-bottom: 30px;
}

/* Grid de 6 contenedores, 3 columnas x 2 filas */
#Fynia-increase-grid-8 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

/* Cada contenedor individual del grid */
.Fynia-increase-box-8 {
  background: #F3F3F6;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  padding-bottom: 15px;
  box-sizing: border-box;
}

/* Encabezado colorido */
.Fynia-increase-heading-8 {
  margin: 0 0 10px;
  padding: 5px 0;
  color: black;
  font-size: 24px;
  font-weight: 600;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  box-sizing: border-box;
  font-family: Outfit, Arial;
}

/* Contenedor para el SVG y porcentaje */
.Fynia-increase-chart-8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* SVG Donut */
.Fynia-increase-svg-8 {
  width: 100px;
  height: auto;
  margin-bottom: 8px;
  transform: rotate(-90deg); /* Rota para que el progreso inicie a las 12 */
}

/* Fondo del círculo del donut */
.Fynia-increase-bg-8 {
  fill: none;
  stroke: #eee;
  stroke-width: 2.8;
}

/* Slice de progreso del donut */
.Fynia-increase-slice-8 {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress-8 1s ease-out forwards;
}

/* Texto en el centro del donut (contrarotado para legibilidad) */
.Fynia-increase-text-8 {
  fill: #333;
  text-anchor: middle;
  dominant-baseline: middle;
  /* Usa clamp() para que el tamaño de la fuente sea responsivo */
  font-size: clamp(8px, 2vw, 16px);
}

/* Porcentaje debajo del donut */
.Fynia-increase-percent-8 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

/* Animación para el donut */
@keyframes progress-8 {
  0% {
    stroke-dasharray: 0, 100;
  }
}

/* Estilos para los cuadros de porcentaje en el grid */
.Fynia-percent-box-8 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 10px;
  box-sizing: border-box;
}
.Fynia-percent-circle-8 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #999;
}
.Fynia-percent-label-8 {
  font-size: 14px;
  color: #333;
}



.circular-chart-micro-v2 {
  display: block;
  max-width: 70%;
  max-height: 250px;
  display: inline-block;
}


.circle-bg-micro-v2 {
  fill: #F3F3F6;
}

.circle-fill-micro-v2 {
  fill: none;
  stroke: white; /* Color para la parte faltante */
  stroke-width: 4;
  stroke-dasharray: 100, 100; /* Rellenar todo el círculo */
}
















/* Contenedor principal gris suave con padding de 15px */
#Fynia-efficiency-9 {
  background-color: rgb(245, 248, 244); /* Gris suave */
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  box-sizing: border-box;
  max-width: 1320px;
  margin: 0 auto;
  border: 1px dashed #ccc;
  font-family: Outfit, Arial, sans-serif;
  margin-bottom: 30px;
}

/* Título principal */
#Fynia-efficiency-9-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 10px;
  text-align: left;
}

/* Subtítulo */
#Fynia-efficiency-9-subtitle {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 20px;
  text-align: left;
}

/* Div para la imagen (placeholder) */
#Fynia-efficiency-9-image {
  margin-bottom: 20px;
  
}

#Fynia-efficiency-9-image img {
  display: block;       /* elimina posibles espacios en línea */
  max-width: 1320px;     /* ancho máximo */
  width: 100%;          /* escala hasta el ancho del contenedor */
  height: auto;         /* ajusta la altura proporcionalmente */
  margin: 0 auto;
  border: 1px dashed #ccc;       /* opcional: centra la imagen si es más pequeña */
}

#Fynia-efficiency-9-image img:hover {
  border: 1px dashed #00c853;
}

.img-first-dashboard{
  width: 100%;
  height: auto;
  object-fit: cover; /* o contain, según el efecto deseado */
  display: block;
}

.img-first-dashboard-micro, .img-first-dashboard-micro-2{
  object-fit: cover; /* o contain, según el efecto deseado */
  display: block;
  margin: 0 auto;
  align-items: center;
}

.img-first-dashboard-micro {
  margin-top: -20px;
  clip-path: inset(15px 0 0 0);
  height: 90%;
  width: auto;
}

.img-first-dashboard-micro-2{
  height: 220px;
  width: auto;
}


/* Contenedor de íconos / diagramas en la misma línea */
#Fynia-efficiency-9-icons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* Cada ícono / diagrama (espacio para tus SVG) */
.Fynia-efficiency-9-icon {
  background-color: #fff; /* Placeholder */
  border: 1px solid #ccc;
  border-radius: 4px;
  flex: 1;
  padding: 15px;
  justify-content: center;
  align-items: center;
  text-align: center;
}










#loan-details-h3-details-basic, #basic-metric-box{
  background-color: #e0e0e0;
  color: #000;
}

#loan-details-h3-details-standard, #standard-metric-box{
  background-color: #AED6F1;
  color: #000;
}

#loan-details-h3-details-premium, #premium-metric-box{
  background-color: #A3E4D7;
  color: #000;
}

#loan-details-h3-details-ideal, #ideal-metric-box{
  background-color: #82E0AA;
  color: #000;
}

#loan-details-h3-details-quick, #quick-metric-box{
  background-color: #F7DC6F;
  color: #000;
}

#loan-details-h3-details-max, #max-metric-box{
  background-color: #F1948A;
  color: #000;
}




#Fynia-adv-final-insights-alternatives {
  display: block;                /* más simple (no flex adentro) */
  border: 1px dashed #e5e7eb;
  padding: 15px;
  background: #fff;
  border-radius: 0px;
  min-width: 0;
  max-width: 100%;
}

#Fynia-adv-final-insights-alternatives:hover{
  border: 1px dashed #00c853;
}

#Fynia-adv-final-insights-alternatives p.final-insights {
  margin: 0;
  display: block;
  white-space: normal !important;  /* por si heredó nowrap */
  overflow-wrap: anywhere;         /* parte URLs/palabras largas */
  word-break: break-word;          /* respaldo */
  text-align: center;
}










/*****************
 Container 
******************/
#loan-comparison-11 {
  max-width: 1320px;
  margin: 0 auto;
  background: #fff;
  margin-top: 60px;
  margin-bottom: 60px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/*****************
 Table 
******************/
#loan-comparison-table-11 {
  width: min(100% - 30px, 1320px); /* 15px por lado = 30px total */
  margin-inline: auto;             /* centra el elemento */
  border-collapse: collapse;
}

/* Top row: columns with monthly payment info */
#loan-comparison-toprow-11 td {
  text-align: center;
  border: 1px solid #ccc;
  padding: 10px;
}

/* Empty cell in top-left corner */
.loan-comparison-emptycell-11 {
  border: 1px solid #ccc;
  width: 100px;
  background-color: rgb(245, 248, 244);
}

/* Each column for Ideal, Premium, etc. */
.loan-comparison-col-11 {
  border: 1px solid #ccc;
  background-color: #fdfdfd;
  width: 150px;
}

/*****************
 Alternative Titles / Payment
******************/
.loan-comparison-alt-title-11 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: Outfit, Arial;
}

#loan-comparison-alt-title-11-ideal{
  background-color: #82E0AA;
}
#loan-comparison-alt-title-11-premium{
  background-color: #A3E4D7;
}
#loan-comparison-alt-title-11-standard{
  background-color: #AED6F1;
}
#loan-comparison-alt-title-11-basic{
  background-color: #e0e0e0;
}
#loan-comparison-alt-title-11-quick{
  background-color: #F7DC6F;
}
#loan-comparison-alt-title-11-max{
  background-color: #F1948A;
}

#loan-comparison-alt-title-11-baseline{
  background-color: #30313C;
  color: #fff;
}

.loan-comparison-alt-month-11 {
  font-size: 30px;
  font-weight: 600;
  color: #000;
  font-family: Outfit, Arial;
}

.loan-comparison-small-11 {
  font-size: 20px;
  color: #000;
  font-weight: 400;
}

/*****************
 Table Body Rows
******************/
#loan-comparison-table-11 td,
#loan-comparison-table-11 th {
  text-align: center;
  border: 1px dashed #ccc;
  padding: 10px;
  vertical-align: top;
  font-size: 20px;
  font-weight: 700;
  font-family: Outfit, Arial;
}

#loan-comparison-table-11 td:hover, #loan-comparison-table-11 th:hover{
  border: 1px dashed #00c853;
  background-color: rgb(245, 248, 244);
  color: #000;
}

/* Label column (Rank Order, Interest, etc.) */
.loan-comparison-label-11 {
  background-color: rgb(245, 248, 244);
  font-weight: 600;
  width: 120px;
  text-align: left;
  font-family: Outfit, Arial;
}

#loan-comparison-label-11-aux{
  background-color: #00b86b;
  color: white;
}

/*****************
 Rank Order Row
******************/
.loan-comparison-rank-11 {
  font-size: 18px;
  font-weight: 600;
}

.loan-comparison-consider-11 {
  font-size: 20px !important;
  font-weight: 300 !important;
  text-align: center !important;
  padding: 15px !important;
}

.rank-1st-11 { color: #2eb82e; }
.rank-1st-11, .rank-2nd-11,.rank-3rd-11, .rank-4th-11 { background-color: rgb(245,248,244);}


.rank-2nd-11,.rank-3rd-11, .rank-4th-11 { color: black; }

/*****************
 Savings / Shorter info
******************/
.loan-comparison-savings-11 {
  display: block;
  color: #27ae60; /* Verde para savings */
  font-size: 18px;
  font-weight: 500;
  background: #fff;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 300px;
  border: 1px dashed #007B47;
  margin-top: 10px;
  margin-bottom: 10px;
}

.loan-comparison-savings-monthly {
  display: block;
  color: #000; /* Verde para savings */
  font-size: 16px;
  font-weight: 500;
  background: white;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 300px;
  border: 1px dashed #000;
  margin-top: 10px;
  margin-bottom: 10px;
}

#lcsm-empty {
  display: block;
  color: #000; /* Verde para savings */
  font-size: 16px;
  font-weight: 500;
  background: transparent;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 300px;
  border: 1px dashed transparent;
  margin-top: 10px;
  margin-bottom: 10px;
}


#lcsm-empty-2{
  width: 100%;
  border: transparent;
  background: transparent;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  padding: 0;
}

.loan-comparison-shorter-11 {
  color: #27ae60; /* Verde para tiempo más corto */
  font-size: 13px;
}

/*****************
 Efficiency
******************/
.efficiency-11 {
  font-size: 16px;
  font-weight: 600;
}

.eff-100-11 { color: #27ae60; }
.eff-90-11,.eff-80-11, .eff-70-11   { color: black; }













/***************
  Contenedor principal
***************/
#Fynia-container-20 {
  max-width: 1320px;
  margin: 0 auto;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: Outfit,Arial, sans-serif;
  background-color: #fff; /* Opcional: color de fondo */
  font-weight: 400;
}

/***************
  Fila superior
***************/
#Fynia-top-row-20 {
  display: flex;         /* Para colocar imagen y texto en la misma fila */
  gap: 20px;             /* Espacio entre imagen y texto */
  align-items: center;   /* Centra verticalmente los elementos */
  margin-bottom: 20px;   /* Espacio debajo antes de la siguiente sección */
}

/* Contenedor de la imagen */
#Fynia-image-wrapper-20 {
  flex: 0 0 200px; /* Ajusta el ancho de la imagen si deseas un tamaño fijo */
  text-align: center;
}

/* Imagen */
#Fynia-image-20 {
  max-width: 100%; /* Escala la imagen a su contenedor */
  height: auto;
  border-radius: 6px; /* Opcional: bordes redondeados */
}

/* Contenedor del texto */
#Fynia-text-20 {
  flex: 1; /* Ocupará el espacio restante */
}

#Fynia-heading-20 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 500;
  color: #333;
  text-align: center;
}

#Fynia-paragraph-20 {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #555;
}

/***************
  Fila inferior
***************/
#Fynia-bottom-row-20 {
  text-align: center; /* Centra el texto y el botón */
}

#Fynia-download-text-20 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

#Fynia-download-button-20 {
  background-color: #00c853;
  color: white;
  border: none;
  padding: 15px 25px;
  font-size: 18px;
  cursor: pointer;
  font-weight: 500;
  margin-top: 20px;
}

/* Efecto hover opcional */
#Fynia-download-button-20:hover {
  background-color: #000;
}
















.comparison-bg {
  background-color: rgb(245, 248, 244);
  padding-bottom: 20px;
  padding-top: 20px;
  padding-inline: 15px;
}

/***************************************************
  Contenedor Principal
****************************************************/
#comparison-container-21 {
  display: flex;              /* Para tener 2 columnas: izq y der */
  border: 1px dashed #ccc;
  overflow: hidden;           /* Para que no sobresalgan bordes */
  font-family: Arial, sans-serif;
  max-width: 1320px;
  margin: 0 auto;
  background-color: rgb(245, 248, 244);     /* Fondo blanco */
  margin-bottom: 30px;
}

#comparison-container-21:hover{
  border: 1px dashed #00c853;
}

/***************************************************
  Columna Izquierda
****************************************************/
.comparison-left-21 {
  display: flex;
  flex-direction: column;
  flex: 0 0 220px;            /* Ancho fijo o ajusta según prefieras */  /* Gris suave */
  padding: 20px;
  border-right: 1px dashed #ccc;
  text-align: center;
  justify-content: center;
}

#comparison-container-21-basic{
  background-color: #E0E0E0;
}

#comparison-container-21-standard{
  background-color: #AED6F1;
}

#comparison-container-21-premium{
  background-color: #A3E4D7;
}

#comparison-container-21-ideal{
  background-color: #82E0AA;
}

#comparison-container-21-quick{
  background-color: #F7DC6F;
}

#comparison-container-21-max{
  background-color: #F1948A;
}

#comparison-left-title-21 {
  margin: 0 0 10px;
  font-size: 36px;
  font-weight: 600;
  color: #000;
  font-family: Outfit, Arial;
}

#comparison-left-descrip-21 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #000;
  font-family: Outfit, Arial;
}

#comparison-left-amount-21 {
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  color: #000;
  font-family: Outfit, Arial;
}

#comparison-left-unit-21 {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  margin-left: 4px;
}

/***************************************************
  Columna Derecha
****************************************************/
#comparison-right-21 {
  flex: 1;                     /* Ocupará el espacio restante */
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 columnas */
  grid-template-rows: repeat(2, auto);    /* 2 filas */                   /* Línea de 1px entre cajas */
  background-color: #ccc;       /* Para simular líneas entre las cajas */
}

/***************************************************
  Cajas de la Columna Derecha
****************************************************/
.comparison-box-21 {
  background-color: #fff;       /* Cada caja con fondo blanco */
  padding: 15px;
  text-align: center;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  border: 1px dashed #ccc;
}

.comparison-box-21:hover {
  background-color: rgb(245, 248, 244);
  border: 1px dashed #00c853;
}

/* Solo el párrafo del recuadro descriptivo */
.comparison-box-desc-21#comparison-box-desc-21-textdescript{
  display: block !important;     /* anula el display:flex de la clase */
  align-self: center;            /* centra en el eje cruzado del flex padre */
  margin-block: auto;            /* empuja hacia el centro vertical */
  margin-inline: 0;
  height: auto !important;       /* evita height:100% que rompía el centrado */
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  font-family: Outfit, Arial;
}

/* Los spans destacados se mantienen en línea y sin saltos raros */
#comparison-box-desc-21-textdescript .highlight-21{
  display: inline;
  white-space: nowrap;
}


/* 1) El <p> vuelve a ser un bloque normal (nada de flex/grid) */
#comparison-box-desc-21-textdescript{
  display: block !important;
  margin: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Caja "Rating": mantiene el h3 arriba y centra verticalmente el <p> GOOD */
#comparison-right-21 .comparison-box-21:has(.comparison-box-score-21) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* h3 arriba */
  align-items: center;           /* centrado horizontal */
}

#comparison-right-21 .comparison-box-score-21 {
  margin: auto 0;                /* centra el GOOD en la vertical */
}


/* 2) Solo el tile que contiene ese <p> se convierte en flex y centra en vertical */
#comparison-right-21 .comparison-box-21:has(#comparison-box-desc-21-textdescript){
  display: flex;
  align-items: center;   /* centro vertical */
  justify-content: center; /* centro horizontal */
}





.highlight-21 {
  display: inline; /* Asegura que sea en línea */
  font-weight: bold;
  color: #00b86b;  /* O el color que prefieras */
  /* Sin width, sin margin-left o right grandes, etc. */
}

/* Títulos de cada caja (Interest, Loan Term, etc.) */
.comparison-box-title-21 {
  margin: 0 0 5px;
  font-size: 20px;
  font-weight: 600;
  color: #000;
  font-family: Outfit, Arial;
}

/* Valores principales (p.ej. $222,467, 20y 4mo, etc.) */
.comparison-box-value-21 {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  color: #000;
  font-family: Outfit, Arial;
}

#comparison-box-value-21-align-tra{
  margin-top: 40px;
  font-size: 44px;
}

/* Subtítulos como "Savings: $134,733" o "9y 8mo shorter" */
.comparison-box-sub-21 {
  margin: 5px 0 0;
  font-size: 20px;
  font-weight: 500;
  color: #27ae60; /* Verde para destacar ahorro */
  display: block;
  background: #D5F3E6;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 300px;
  border: 1px solid #007B47;
  width: 60%;
  margin: 0  auto;
  text-align: center;
  font-family: Outfit, Arial;
}

#comparison-box-sub-21-left {
  width: 100%;
  background: white;
  font-size: 16px;
  font-weight: 500;
}

#comparison-box-sub-21-left-2 {
  width: 100%;
  border: transparent;
  background: transparent;
  font-size: 18px;
  font-weight: 500;
  text-decoration: underline;
}

#comparison-box-sub-21-left-3 {
  width: 100%;
  border: transparent;
  background: transparent;
  font-size: 18px;
  font-weight: 500;
  text-decoration: underline;
  text-align: right;
  padding-top: 0px;
}

#comparison-box-sub-21-left-211 {
  width: 100%;
  border: transparent;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  padding: 0;
}

#comparison-box-sub-21-left-211:hover {font-weight: 700;}

#h2-metric-box-aux{
  margin-top: 36px;
}

#Fynia-adv-middle-top-h3-aux{
  text-align: center;
  font-size: 17px;
  font-weight: 700;
}

/* Descripción larga (texto) */
.comparison-box-desc-21 {
  display: flex;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  line-height: 1.4;
  text-align: center;
  justify-content: center;
}

/* Score (GOOD, etc.) */
.comparison-box-score-21 {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  color: #2ecc71; /* Verde para "GOOD" */
  margin-top: 26px;
}

/***************************************************
  Donut Chart
****************************************************/
#donut-chart-21 {
  display: inline-block;
  margin-top: 8px;
}

/* Ajusta tamaño del SVG donut */
/* El SVG NO debe rotarse */
.donut-svg-21 {
  width: 100px;
  height: 100px;
  /* ❌ QUITAR ESTA LÍNEA */
  /* transform: rotate(-90deg); */
}

/* Rota únicamente el círculo que dibuja el avance */
.donut-fill-21 {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}


/* Fondo circular */
.donut-bg-21 {
  fill: none;
  stroke: #eee;
  stroke-width: 3;
}

/* Relleno circular (70% por ejemplo) */
.donut-fill-21 {
  fill: none;
  stroke: #00b86b;
  stroke-width: 3;
  stroke-linecap: round;
  animation: donut-anim-21 1s ease-out forwards;
}

/* Texto en el centro del donut (centrado y orientado correctamente) */
/* Texto en el centro del donut (centrado y horizontal) */
.donut-text-21 {
  font-family: Outfit, Arial, sans-serif;
  font-size: 8px;
  font-weight: 600;
  fill: #000;

  /* centrado dentro del SVG */
  text-anchor: middle;
  dominant-baseline: middle;

  /* forzamos que NO tenga ninguna rotación */
  transform: none !important;
}




/***************************************************
  Animación Donut
****************************************************/
@keyframes donut-anim-21 {
  0% {
    stroke-dasharray: 0, 100;
  }
}














/********************
  Grid Container
*********************/
.second-section #features-grid-22 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  grid-template-rows: repeat(2, auto);   /* 2 filas (para 4 items) */  
  max-width: 1320px;                          /* Espacio entre cards */
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;        /* Ajusta la tipografía */
  background-color: rgb(245, 248, 244);
}

/********************
  Each Card
*********************/
.feature-card-22 {
  background-color: rgb(245, 248, 244);       /* Fondo blanco */
  border: 1px dashed #ccc;       /* Borde suave */
  padding: 20px;
  box-sizing: border-box;
}

.feature-card-22:hover{
  border: 1px dashed #00b86b;
  background-color: white;       /* Borde suave */
}

/* Ícono en la parte superior */
.feature-icon-22 {
  margin-bottom: 10px;
}
.feature-icon-22 img {
  width: 24px;   /* Ajusta según necesites */
  height: 24px;
}

/* Título de la tarjeta */
.second-section .feature-title-22 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  line-height: 1.2;
  font-family: Outfit, Arial;
  text-align: left;
}

/* Texto descriptivo */
.feature-text-22 {
  margin: 0;
  font-size: 16px;
  color: #000;
  line-height: 1.4;
  font-family: Outfit, Arial;
}
















/* Contenedor principal */
.contact-container-23 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 60px auto;
  padding: 20px;
}

/* Para pantallas de smartphone (máximo 768px de ancho) */
@media (max-width: 768px) {
  .contact-container-23 {
    margin: 0 auto; /* Elimina el margen de 60px */
  }
}

/* Estilo de la sección de texto */
.contact-text-23 {
  flex: 1;
  max-width: 50%;
}

.contact-text-23 h1 {
  font-size: 40px;
  color: #000;
  margin-bottom: 20px;
}

.contact-text-23 p {
  font-size: 20px;
  color: #000;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Sección del formulario */
.contact-form-23 {
  flex: 1;
  max-width: 45%;
  background-color: rgb(245, 248, 244);
  padding: 25px;
  border: 1px dashed #ccc;
}

/* Campos del formulario */
form {
  display: flex;
  flex-direction: column;
}

label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #000;
}

#first-name-23,
#last-name-23,
#email-23,
#company-23,
#phone-23,
#usage-23,
#countries,
#states {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

textarea#usage-23 {
  height: 80px;
  resize: none;
}

@media (max-width: 768px) {
  .contact-text-23 p {
    margin: 0 auto;       /* Elimina el margen de 60px */
    font-size: 16px !important;   
    margin-bottom: 12px;   /* Ajusta el tamaño de letra a 16px en móvil */
  }
}

/* Texto de privacidad */
.privacy-text-23 {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
}

.privacy-text-23 a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

/* Botón de envío */
.submit-button-23 {
  background-color: #00c853;
  color: white;
  border: none;
  padding: 12px;
  font-size: 16px;
  cursor: pointer;
}

.submit-button-23:hover {
  background-color: #000;
}

/* Responsive */
@media (max-width: 900px) {
  .contact-container-23 {
      flex-direction: column;
      text-align: center;
  }

  .contact-text-23,
  .contact-form-23 {
      max-width: 100%;
  }
}


.submit-button-24 {
  background-color: #00c853;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  display: block;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 40px;
  max-width: 80%;
  min-width: 200px;
}

.submit-button-24:hover {
  background-color: #000;
}









.site-footer-27 {
  background: #000;
  color: #fff;
  font-family: Outfit ,Arial;
  padding: 40px 0;
  text-align: center;
  max-width: 1320px;
  margin: 0 auto;
  margin-top: 40px;
}

.footer-top-27 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto 20px;
}

.footer-logo-27 h2 {
  margin: 0;
  font-size: 24px;
  text-transform: uppercase;
}

.footer-logo-27 img {
  width: 140px;
  height: auto;
}

.footer-logo-27 p {
  margin: 5px 0 0;
  color: #fff;
  font-size: 14px;
}

.footer-links-27 {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(12px, 4vw, 28px);
}

.footer-links-27 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.footer-links-27 ul li {
  margin: 8px 0;
}

.footer-links-27 ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.footer-links-27 ul li a:hover {
  color: #ccc;
}

.footer-divider-27 {
  width: 80%;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid white;
  margin-bottom: 20px;
}

.footer-middle-27 {
  margin-bottom: 20px;
}

.social-icons-27 {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-flex;
  gap: 20px;
}

.social-icons-27 li a {
  color: #ccc;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.social-icons-27 li a:hover {
  color: #fff;
}

.footer-bottom-27 {
  font-size: 14px;
  color: #fff;
}














/* 1) Hacemos que el contenedor input-box sea relativo */
.input-box {
  position: relative;
}







/* 1) Contenedor relativo sólo alrededor del input */
.input-icon-wrapper-loanoptimization {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* 2) Icono posicionado justo al centro vertical del input */
.Fynia-tooltip-icon-loanoptimization {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2em;
  color: #00b86b;
  line-height: 1;
}

/* 3) Tooltip: más ancho para que no se quiebre tan pronto */
.Fynia-tooltip-icon-loanoptimization::before {
  content: attr(data-tooltip);
  position: fixed;
  max-width: none !important;  
  width: 320px;                     /* O el ancho que necesites */
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: pre-wrap;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  font-size: 0.75em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 100;
  text-align: left;
}

/* 4) Flecha personalizada */
.Fynia-tooltip-icon-loanoptimization::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 100;
}

/* 5) Mostrar al hover */
.Fynia-tooltip-icon-loanoptimization:hover::before,
.Fynia-tooltip-icon-loanoptimization:hover::after {
  opacity: 1;
}




/* overlay semi-transparente */
.modal-overlay {
  display: none;          /* antes era grid */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  place-items: center;
  z-index: 1000;
}

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

/* caja del modal */
.modal {
  background: #fff;
  padding: 1.5em;
  border-radius: 6px;
  text-align: center;
  min-width: 280px;
}

/* contenedor de botones */
.modal-buttons {
  margin-top: 1em;
  display: flex;
  justify-content: space-around;
}

/* opcional: añade algo de estilo a los botones */
.modal-buttons button {
  padding: 0.5em 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


#modal-ok{
  gap: 8px;
  background-color: #00c853;
  color: white;
  font-family: Outfit, Arial;
  padding: 15px 24px;
  font-size: 16px;
  font-weight: 500;
}

#modal-ok:hover{
  background-color: #000;
}


#modal-cancel{
  color: #425366;
    background: #fff;
    border: 1px solid #ccd3db;
    box-shadow: inset 0 -2px 4px 0 rgba(0, 0, 0, .07), 0 2px 4px 0 rgba(0, 0, 0, .04);
    font-family: Outfit, Arial;
    padding: 15px 24px;
    font-size: 14px;
    font-weight: 500;
}







/* css/styles.css */

/* Contenedor principal: grid 2×2 en desktop, 1 columna en móvil */
#card-examples-examples {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: center;      /* centrado vertical de cada celda */
  text-align: center;
  margin: 0 auto;
}

/* Cards internas */
.form-left-examples {
  background-color: rgb(245, 248, 244);
  border: 1px dashed #ccc;
  border-radius: 0px;
  cursor: pointer;
  transition: border-color 0.3s ease;
  display: grid;
  height: 100%;     /* si prefieres que ajuste a contenido, retira esta línea */
}

.form-left-examples:hover .grid-item-examples,
.form-left-examples:hover{
  border-color: #19D079;
}

/* Imagen de la card */


.form-left-examples:nth-child(odd) {
  justify-self: end;
}

.form-left-examples:nth-child(even) {
  justify-self: start;
}

/* Título dentro de la card */
.title-cards-h2 {
  padding-left: 15px;
  padding-right: 15px;
  text-align: left;
  font-size: clamp(1.25rem, 1.1vw + 1rem, 1.75rem);
  line-height: 1;
  margin-top: 15px;
  margin-bottom: 15px;
}



/* Párrafo */
.p-card-examples {
  font-size: 1rem;
  padding-left: 15px;
  padding-right: 15px;
  color: #000;
  text-align: left;
}

/* Grid interno de datos (4 items en 2×2) */
.grid-container-examples {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-top: 15px;
}

.grid-item-examples {
  padding: 0.75rem;
  border: 1px dashed #ccc;
  text-align: center;
  background-color: white;
  border-radius: 0px;
}

.grid-item-examples h2{
  font-size: clamp(1.25rem, 1.1vw + 1rem, 1.75rem);
}

.grid-item-examples h3{
  font-size: clamp(0.5rem, 1.1vw + 1rem, 1rem);
}

/* Mensaje final ocupa ambas columnas */




/* Botón “Get Started” auxiliar */
.submit-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  background-color: #00b86b;
  color: #fff;
  text-decoration: none;
}


.auxiliar-h3{
  text-align: center;
  max-width: 1320px;
  margin: 0 auto;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 500;
  font-family: Outfit, Arial;
  position: relative;
  line-height: 100%;
  margin-top: 0;
  color: black;
  background-color: rgb(245, 248, 244);
}

.progress-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.progress-bar-results {
  width: 90%;               /* Ocupa el 90% del ancho de .Fynia-adv-metric-box */
  height: 15px;             /* Altura de la barra (ajústala a tu gusto) */
  background-color: #D5F3E6;/* Color de la zona vacía */
  /*background-color: #30313C;*/
  border-radius: 10px;      /* Redondea ambos extremos */
  overflow: hidden;         /* Para que el .progress-fill no sobresalga de los bordes */
  border: 1px solid #ccc;
}

.progress-bar-results-mp {
  width: 90%;               /* Ocupa el 90% del ancho de .Fynia-adv-metric-box */
  height: 15px;             /* Altura de la barra (ajústala a tu gusto) */
  background-color: #FFA6A6;/* Color de la zona vacía */
  border-radius: 10px;      /* Redondea ambos extremos */
  overflow: hidden;         /* Para que el .progress-fill no sobresalga de los bordes */
  border: 1px solid #ccc;
}

.progress-fill-results {
  height: 100%;             /* Ocupa toda la altura de .progress-bar */
  background-color: #B0B0B0;/* Color de la zona de progreso */
  border-radius: 10px; /* Solo esquinas izquierdas redondeadas */
}

.progress-fill-results-standard {
  height: 100%;             /* Ocupa toda la altura de .progress-bar */
  background-color: #5DADE2;/* Color de la zona de progreso */
  border-radius: 10px; /* Solo esquinas izquierdas redondeadas */
}

.progress-fill-results-premium {
  height: 100%;             /* Ocupa toda la altura de .progress-bar */
  background-color: #48C9B0;/* Color de la zona de progreso */
  border-radius: 10px; /* Solo esquinas izquierdas redondeadas */
}

.progress-fill-results-ideal {
  height: 100%;             /* Ocupa toda la altura de .progress-bar */
  background-color: #28B463;/* Color de la zona de progreso */
  border-radius: 10px; /* Solo esquinas izquierdas redondeadas */
}

.progress-fill-results-quick {
  height: 100%;             /* Ocupa toda la altura de .progress-bar */
  background-color: #F39C12;/* Color de la zona de progreso */
  border-radius: 10px; /* Solo esquinas izquierdas redondeadas */
}

.progress-fill-results-max {
  height: 100%;             /* Ocupa toda la altura de .progress-bar */
  background-color: #C0392B;/* Color de la zona de progreso */
  border-radius: 10px; /* Solo esquinas izquierdas redondeadas */
}

.progress-fill-results-mp {
  height: 100%;             /* Ocupa toda la altura de .progress-bar */
  background-color: #B0B0B0;/* Color de la zona de progreso */
  border-radius: 10px; /* Solo esquinas izquierdas redondeadas */
}

/* 5. Flecha verde apuntando hacia abajo */
/* 4. Contenedor que posiciona los dos textos en la misma línea */
.progress-info {
  width: 90%;                     /* Coincide con el ancho de .progress-bar */
  margin: 4px auto 0;             /* Centra horizontalmente; separa un poco de la barra */
  display: flex;                  
  justify-content: space-between; /* Un elemento a la izquierda, el otro a la derecha */
  align-items: center;
  margin-top: 20px;
}

/* 5. Flecha verde apuntando hacia abajo y texto en negrilla */
.arrow {
  color: #11B823;           /* Color de la flecha */
  font-size: 26px;        /* Tamaño de la flecha */
  font-weight: bold;      /* Negrilla para la flecha */
  line-height: 1;         /* Asegura alineación vertical */
}

.arrow-mp {
  color: #AE0000;           /* Color de la flecha */
  font-size: 26px;        /* Tamaño de la flecha */
  font-weight: bold;      /* Negrilla para la flecha */
  line-height: 1;         /* Asegura alineación vertical */
}

.percent-text {
  font-size: 26px;        /* Tamaño del texto “23.9%” */
  font-weight: bold;      /* Negrilla */
  line-height: 1;
  color: #00b86b;
}

.percent-text-mp{
    font-size: 26px;        /* Tamaño del texto “23.9%” */
  font-weight: bold;      /* Negrilla */
  line-height: 1;
  color: #000000;
}

/* 6. Texto derecho en negrilla y tamaño mayor */
.progress-info-right {
  font-size: 26px;        /* Tamaño del texto “1264” */
  font-weight: bold;      /* Negrilla */
  line-height: 1;
  color: #00b86b;
}

.progress-info-right-mp{
    font-size: 26px;        /* Tamaño del texto “1264” */
  font-weight: bold;      /* Negrilla */
  line-height: 1;
  color: #000000;
}

/* 1) Contenedor SVG: centrado, tamaño máximo y fondo negro */
.circular-chart-firstaux {
  display: block;
  margin: 20px auto;
  max-width: 40%;
  max-height: 250px;
  background-color: black;    /* Fondo negro detrás del SVG */
}

/* 2) Pista blanca completa (grosor 4, bordes redondeados) */
.circle-bg-firstaux {
  fill: none;
  stroke: white;
  stroke-width: 4;
  stroke-linecap: round;
}

/* 3) Propiedades comunes a las secciones verde y azul */
.circle-green-firstaux,
.circle-blue-firstaux {
  fill: none;
  stroke-width: 4;            /* Mismo grosor que la pista blanca */
  stroke-linecap: round;      /* Bordes redondeados en ambos extremos */
  transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
}

/* 4) Sección verde (20%) */
.circle-green-firstaux {
  stroke: #00b86b;            /* Verde */
  /* stroke-dasharray="20 80" dibuja el 20% del perímetro */
  /* stroke-dashoffset="0" inicia en 0° (3 en punto) */
}

/* 5) Sección azul (30%) */
.circle-blue-firstaux {
  stroke: #0000FF;            /* Azul */
  /* stroke-dasharray="30 70" dibuja el 30% del perímetro */
  /* stroke-dashoffset="50" inicia en 180° (9 en punto) */
}


.footer-words{
  font-size: 14px;
  font-family: Outfit, Arial;
  color: white;
}

.footer-words:hover{
  color: rgb(25, 231, 110) !important;
  transition: color 0.3s ease;
}

#name-payment::placeholder, 
#email-payment::placeholder, 
#card-number-payment::placeholder, 
#exp-date-payment::placeholder, 
#cvv-payment::placeholder,
#countries-payment::placeholder {
  color: gray;
  font-size: 16px;
  font-family: Outfit, Arial;
}

/* === Estilo para el texto introducido en los campos === */
#name-payment,
#email-payment,
#card-number-payment,
#exp-date-payment,
#cvv-payment,
#countries-payment {
  color: black;              /* texto de usuario en negro */
  font-size: 16px;           /* mismo tamaño que el placeholder */
  font-family: Outfit, Arial;/* misma familia que el placeholder */
}


/* estados por defecto */
#countries-payment {
  color: black;
  font-size: 20px;
  font-family: Outfit, Arial;
}

/* cuando esté en placeholder, vía JS o :has() */
#countries-payment:has(option.choose-country:checked),
#countries-payment.placeholder-active {
  color: gray;
  font-size: 16px;
  font-family: Outfit, Arial;
}

/* Estado “normal” una vez que el usuario selecciona algo */
#state {
  color: black;
  font-size: 20px;
  font-family: Outfit, Arial;
}

/* Estado “placeholder” mientras siga seleccionado el option.choose-state */
#state:has(option.choose-state:checked) {
  color: gray;
  font-size: 16px;
  font-family: Outfit, Arial;
}

/* Aplica el estilo placeholder también si la clase está presente */
#state.placeholder-active {
  color: gray;
  font-size: 16px;
  font-family: Outfit, Arial;
}

#state-dropdown {
  display: none !important;
}

/* Muestra el dropdown de estado cuando tenga .visible */
#state-dropdown.visible {
  display: block !important;
}

/* Estilo para el texto seleccionado en los <select> */
#countries-payment,
#state {
  color: black;
  font-size: 16px;
  font-family: Outfit, Arial;
}

/* Estilo para el texto del placeholder */
#countries-payment:has(option.choose-country:checked),
#state:has(option.choose-state:checked) {
  color: gray;
}

/* Estilo para las <option> dentro del <select> */
#countries-payment option,
#state option {
  font-size: 16px;
  font-family: Outfit, Arial;
  color: black;
}

/* Estilo específico para los placeholders */
#countries-payment option.choose-country,
#state option.choose-state {
  color: gray;
}


.submit-btn-payment{
    padding: 0.5rem 1rem;
    background-color: #00c853;
    color: #fff;
    border-radius: 0px;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid #00c853;
    cursor: pointer;
}

.submit-btn-payment:hover{
  background-color: #000;
  border: #000 1px solid;
  transition: .2s;
  border: 2px solid #000;
}


.payment-box-pp {
  /* Ya existentes */
  background: transparent;
  padding: 2rem 2.5rem;
  max-width: 420px;
  text-align: center;

  /* Nuevo: centrado horizontal */
  margin: 0 auto;
}

    .payment-title-pp {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .payment-price-pp {
      font-size: 2rem;
      color: #00c853;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .payment-subtitle-pp {
      font-size: 1rem;
      font-weight: 500;
      margin-bottom: 1.5rem;
      color: #333;
    }

    .payment-features-pp {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .payment-features-pp li {
      font-size: 0.95rem;
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
    }

    .payment-features-pp li::before {
      content: "✓";
      color: #00c853;
      font-weight: bold;
      margin-right: 0.5rem;
    }

.title-payment-aux{
    text-align: center;
    width: 100%;
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    color: black;
}




#token-de, #loan-principal-de, 
#current-loan-amount-de, 
#interest-rate-de, 
#current-monthly-payment-de{
  color: 000;
  font-size: 16px;
  font-family: Outfit, Arial;

}


#modal-submit{
  background-color: #00c853;
  color: #fff;
  border: 1px solid #00c853;
  font-family: Outfit, Arial;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0px;
}

#modal-submit:hover {
  background-color: #000;
  color: #fff;
  transition: color 0.3s ease;
  border: 1px solid #000;
}

#modal-cancel {
  background-color: white;
  color: #000;
  border: 1px dashed #ccc;
  font-family: Outfit, Arial;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0px;
}

#modal-cancel:hover {
  background-color: rgb(245, 248, 244);
  color: #000;
  border: 1px solid #000;
  transition: color 0.3s ease;
}


.note-text-examples {
  font-size: 18px !important;
  color: #000 !important;
  font-style: italic !important;
  font-weight: normal !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.date-dropdown {
  padding: 6px 10px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: white;
  color: #000;
  font-family: 'Outfit', sans-serif;
}

.date-dropdown option.highlight-year {
  background-color: #d9f7e4;
  font-weight: bold;
}




.callout{
  display:flex;
  gap:12px;
  padding:14px 16px;
  border:1px dashed #ccc;
  background-color: rgb(245, 248, 244);
  border-radius:0px;
  align-items:flex-start;
  max-width: 1320px;
  justify-content: center;
  margin: 0 auto;
}

.callout__icon{
  font-size:22px;
  line-height:1;
  margin-top:2px
}

.callout__title{
  font-weight:600;
  font-size:16px;
  margin:0 0 4px
}

.callout__text{
  margin:0 0 8px;
  color:#000
}

.chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:8px 0
}

.chip{
  background:#D5F3E6;
  border:1px solid #007b47;
  border-radius:999px;
  padding:6px 10px;
  display:flex;
  gap:6px;
  align-items:baseline;
  box-shadow:0 1px 0 rgba(0,0,0,.04)
}

.chip__label{
  color:#27ae60;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.02em
}

.chip__value{
  font-weight:700;
  font-size:14px
}

.callout__details summary{
  cursor:pointer;
  color:#00b86b;
  font-weight:600;
  margin-top:6px
}

.callout__details[open] .callout__details-body{
  margin-top:8px
}

.callout__details-body{
  color:#444
}

@media (prefers-color-scheme: dark){
  .callout{
    border-color:#ccc;
    background: rgb(245, 248, 244);
  }

  .chip{
    background:#D5F3E6;
    border-color:#007b47;
    color:#27ae60}

  .callout__text,.callout__details-body{
    color:#000
  }

  .chip__label{
    color: #27ae60;
  }
}
















/* Franja inferior comparativa */
.kpi-compare{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
}
.kpi-compare__item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.kpi-compare__value{
  font-weight:800;
  font-size:18px;
  line-height:1.1;
  display:flex;
  align-items:center;
  gap:6px;
  color:#0aa15f; /* verde ahorro */
}
.kpi-compare__label{
  margin-top:2px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#404040; /* gris medio */
  margin-bottom: 10px;
}
.kpi-compare__divider{
  width:1px;
  height:24px;
  background:rgba(0,0,0,.12);
  border-radius:1px;
}
.arrow{font-size:16px;line-height:1}
@media (prefers-color-scheme: dark){
  .kpi-compare__label{color:#404040}
  .kpi-compare__divider{background:rgba(255,255,255,.16)}
}

/* Variante neutra (negro) para valores cuando hay aumento */
.kpi-compare__value--neutral{
  color:#111; /* texto negro */
}

/* Flecha de aumento en rojo */
.arrow--up { color: #DC2626; } /* rojo */

/* ===== Scoped to the insights block ===== */
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 900px){
  #Fynia-adv-final-insights-alternatives.fynia-insights .ins-grid{
    grid-template-columns: 1fr;
  }
}

#Fynia-adv-final-insights-alternatives.fynia-insights .ins-box{
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:12px;
  padding:16px;
}
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-box h4{
  margin:0 0 12px 0;
  font-size:16px;
  font-weight:700;
  color:#111827;
}

#Fynia-adv-final-insights-alternatives.fynia-insights .ins-kpi-row{
  display:flex;
  align-items:center;
  gap:12px;
}
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-kpi{
  flex:1;
  text-align:center;
}
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-kpi__value{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  font-size:18px;
  line-height:1.1;
}
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-kpi__value--up{ color:#111; }     /* incremento: texto negro */
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-kpi__value--down{ color:#0aa15f; }/* reducción: verde */
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-kpi__label{
  margin-top:4px;
  color:#6B7280;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-sep{
  flex:0 0 1px;
  align-self:stretch;
  background:#D1D5DB;
  border-radius:1px;
}

#Fynia-adv-final-insights-alternatives.fynia-insights .ins-chips{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid #E5E7EB;
  background:#F9FAFB;
  color:#374151;
}
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-chip--good{
  border-color: rgba(16,185,129,.25);
  background: rgba(16,185,129,.08);
  color:#065F46;
}
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-note{
  margin-top:6px;
  font-size:11px;
  color:#9CA3AF;
}

#Fynia-adv-final-insights-alternatives.fynia-insights .ins-nominal{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-nominal li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px dashed #E5E7EB;
  border-radius:10px;
  padding:8px 10px;
}
#Fynia-adv-final-insights-alternatives.fynia-insights .ins-nl-label{
  color:#6B7280;
  font-size:13px;
}

/* Flechas */
#Fynia-adv-final-insights-alternatives.fynia-insights .arrow{ font-size:16px; line-height:1; color:inherit; }
#Fynia-adv-final-insights-alternatives.fynia-insights .arrow--up{ color:#DC2626; } /* rojo para aumento */


/* ===== Insights comparison (scoped) ===== */
.fx-compare{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 900px){
  .fx-compare{ grid-template-columns: 1fr; }
}

/* Cards */
.fx-card{
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:12px;
  padding:16px;
}
.fx-card h4{
  margin:0 0 12px 0;
  font-size:16px;
  font-weight:700;
  color:#111827;
}

/* Mapa explícito: ↑ cuota → ↓ interés / ↓ plazo */
.fx-map{
  display:flex;
  align-items:center;
  gap:16px;
}
.fx-item{
  display:flex;
  align-items:center;
  gap:10px;
}
.fx-item .fx-copy{ display:flex; flex-direction:column; }
.fx-label{
  font-size:12px;
  color:#6B7280;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.fx-value{
  font-size:20px;
  font-weight:800;
  line-height:1.1;
}
.fx-item--up .fx-value{ color:#111; }           /* texto negro para aumento */
.fx-item--down .fx-value{ color:#0EA463; }      /* verde para reducciones */

/* Iconos flecha */
.fx-icon{
  font-size:18px;
  line-height:1;
}
.fx-item--up .fx-icon{ color:#DC2626; }         /* ↑ rojo */
.fx-item--down .fx-icon{ color:#0EA463; }       /* ↓ verde */

/* Conector central y bloque de resultados */
.fx-connector{
  font-size:18px;
  color:#9CA3AF;
}
.fx-results{
  display:flex;
  align-items:center;
  gap:16px;
}
.fx-vert-sep{
  width:1px;
  align-self:stretch;
  background:#D1D5DB;      /* separador vertical gris */
  border-radius:1px;
}

/* Nota y resumen */
.fx-note{
  margin-top:10px;
  font-size:11px;
  color:#9CA3AF;
}
.fx-summary{
  margin:0;
  color:#374151;
  font-size:14px;
  line-height:1.45;
}
.fx-summary strong{ color:#111827; }






/* ====================== FYNIA – Insights Row (FULL CSS) ====================== */
/* Global sizing */
*, *::before, *::after { box-sizing: border-box; }

/* ===== Bottom row (3 equal columns) ===== */
.ix-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;  
  gap: 16px;
  align-items: stretch !important;     /* same height */
  justify-items: stretch;   /* full width in each cell */
}
@media (max-width: 1100px){
  .ix-row{ grid-template-columns: 1fr; }
}

/* Each direct child acts as a flex wrapper (helps equalize heights) */
.ix-row > * {
  display: flex;
  flex-direction: column; /* para que el contenido interno distribuya bien */
  box-sizing: border-box;
  margin: 0; /* evita que un margin altere alturas visuales */
}

/* Card base */
.ix-row > .ix-card,
.ix-card{
  background: #fff;
  border: 1px dashed #E5E7EB;
  border-radius: 0px;
  padding: 16px;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.ix-row > .ix-card:hover {
  border: 1px dashed #00c853;
}


.ix-row > * > .ix-card{ flex: 1; } /* card stretches to fill wrapper height */

.ix-card h4{
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

/* --- Defensive: old rules that might shrink the 3rd card (gauge) --- */
#Fynia-adv-final-insights-alternatives,
#Fynia-adv-efficiency{
  width: auto;
  flex: none;
}

/* ===== Percent comparison map ===== */
.ix-map{
  display: flex;
  align-items: center;
  gap: 16px;
}
.ix-item{
  display: flex;
  align-items: center;
  gap: 10px;
}
.ix-item .ix-copy{
  display: flex;
  flex-direction: column;
}
.ix-label{
  font-size: 12px;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ix-value{
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}
.ix-item--up .ix-value{ color: #111; }       /* increase: black */
.ix-item--down .ix-value{ color: #0EA463; }  /* reduction: green */

.ix-icon{ font-size: 18px; line-height: 1; }
.ix-item--up .ix-icon{ color: #DC2626; }     /* ↑ red */
.ix-item--down .ix-icon{ color: #0EA463; }   /* ↓ green */

.ix-connector{
  font-size: 18px;
  color: #9CA3AF;
}
.ix-results{
  display: flex;
  align-items: center;
  gap: 16px;
}
.ix-vert-sep{
  width: 1px;
  align-self: stretch;
  background: #D1D5DB;
  border-radius: 1px;
}

/* ===== Explanation & equation ===== */
.ix-explain{
  margin: 12px 0 6px 0;
  font-size: 14px;
  line-height: 1.45;
  color: #374151;
}
.ix-equation{
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #111827;
}
.ix-equation strong{ font-weight: 800; }

.ix-note{
  margin-top: 6px;
  font-size: 11px;
  color: #9CA3AF;
}
.ix-note-center{
  margin-top: 10px;
  font-size: 11px;
  color: #9CA3AF;
  text-align: center;
}

/* ===== Nominal text ===== */
.ix-summary{
  margin: 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.45;
}
.ix-summary strong{ color: #111827; }

/* ===== Efficiency gauge ===== */
.ix-gauge{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
  min-width: 0;
}
/* Mobile + Tablet: 100% */
.ix-gauge .circular-chart {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.ix-gauge .circle-bg{
  fill: none;
  stroke: #F3F4F6;
  stroke-width: 3.2;
}
.ix-gauge .circle-fill{
  fill: none;
  stroke: #E5E7EB;
  stroke-width: 3.2;
}
.ix-gauge .circle_basic{
  fill: none;
  stroke: #10B981;
  stroke-width: 3.2;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}
.ix-gauge .percentage_basic{
  fill: #111827;
  font-size: 8px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}

/* =================== HARD OVERRIDES (place at very end) =================== */

/* ===== Unificar tipografía de placeholders en el formulario de optimización ===== */
.input-icon-wrapper-loanoptimization input,
.input-box input {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Placeholder consistente (color y tipografía) */
.input-icon-wrapper-loanoptimization input::placeholder,
.input-box input::placeholder {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;   /* o fija 500 si usas semibold en inputs */
  font-style: normal;     /* evita italics en algunos navegadores */
  color: #9CA3AF;         /* mismo gris que usas en UI */
  opacity: 1;             /* que no se vea deslavado */
}

/* Compatibilidad cross-browser */
.input-icon-wrapper-loanoptimization input::-webkit-input-placeholder,
.input-box input::-webkit-input-placeholder { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: normal; color:#9CA3AF; opacity:1; }
.input-icon-wrapper-loanoptimization input::-moz-placeholder,
.input-box input::-moz-placeholder { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: normal; color:#9CA3AF; opacity:1; }
.input-icon-wrapper-loanoptimization input:-ms-input-placeholder,
.input-box input:-ms-input-placeholder { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: normal; color:#9CA3AF; opacity:1; }
.input-icon-wrapper-loanoptimization input::-ms-input-placeholder,
.input-box input::-ms-input-placeholder { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: normal; color:#9CA3AF; opacity:1; }











/* ---------- Fees Card (All-in Impact) ---------- */
:root{
  --ix-fees-bg:#ffffff;
  --ix-fees-border:#E5E7EB;
  --ix-fees-sep:#E5E7EB;
  --ix-fees-text:#111827;
  --ix-fees-sub:#6B7280;
  --ix-fees-accent:#10B981;      /* verde */
  --ix-fees-accent-2:#22C55E;    /* verde claro */
  --ix-fees-accent-3:#0EA5E9;    /* azul para gradiente */
  --ix-fees-shadow:0 10px 28px rgba(0,0,0,.06);
  --ix-fees-radius:16px;
}

.ix-card--fees{
  position: relative;
  background: var(--ix-fees-bg);
  border:1px solid var(--ix-fees-border);
  border-radius: var(--ix-fees-radius);
  /*box-shadow: var(--ix-fees-shadow);*/
  padding: 18px 18px 16px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}


/* Barra decorativa superior */
.ix-card--fees::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px;
  /*background: linear-gradient(90deg,var(--ix-fees-accent),var(--ix-fees-accent-2),var(--ix-fees-accent-3));*/
  opacity:.9;
}

/* Header (título + chip) */
.fees-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}
.fees-header h4{
  margin:0; font-size:16px; font-weight:800; color:var(--ix-fees-text);
}
.fees-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:#ECFDF5; color:#065F46; font-weight:700; font-size:12px;
  border:1px solid #A7F3D0;
  white-space:nowrap;
}

/* Grid interno */
.fees-grid{
  display:flex; gap:22px; align-items:stretch;
  padding: 6px 2px 10px;
}
.fees-item{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  min-height:84px;
}
.fees-label{
  font-size:12px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ix-fees-sub); margin-bottom:6px;
}
.fees-value{
  font-size:22px; font-weight:800; line-height:1.15;
  color:var(--ix-fees-text);
  font-variant-numeric: tabular-nums;
  word-break:break-word;
}
.fees-value strong{ font-weight:900; color:#065F46; }
.fees-ops{ opacity:.45; margin:0 6px; font-weight:800; }

.fees-sub{
  margin-top:6px; font-size:12px; color:var(--ix-fees-sub);
}

/* Separadores verticales específicos del card de fees */
.fees-sep{
  width:1px; align-self:stretch; background:var(--ix-fees-sep);
  border-radius:1px; opacity:.9;
}

/* Bloque total */
.fees-total{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:14px; padding:12px 14px;
  background: linear-gradient(180deg, rgba(16,185,129,.07), rgba(16,185,129,.02));
  border:1px dashed #A7F3D0;
  border-radius:12px;
}
.fees-total-label{
  font-size:13px; color:#065F46; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.fees-total-value strong{
  font-size:22px; font-weight:900; color:#065F46; text-shadow:0 1px 0 rgba(255,255,255,.6);
}

/* Nota (hereda tu ix-note-center si ya existe) */
.ix-card--fees .ix-note-center{
  margin-top:10px; font-size:11px; color:#9CA3AF; text-align:center;
}

/* Responsive */
@media (max-width: 900px){
  .fees-grid{ flex-direction:column; gap:14px; }
  .fees-sep{ display:none; }
  .fees-total{ flex-direction:column; align-items:flex-start; }
}

#Fynia-adv-fees-impact{
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}























/* =============================
   FIX 1 — Título del FAQ: tamaño adaptativo SIN tocar desktop
   ============================= */

/* Mantén solo el line-height como base (no cambia desktop) */
.second-section .lets-see {
  line-height: 1.25;
  white-space: normal;
  letter-spacing: normal;     /* evita que las letras se junten demasiado */
  word-spacing: 0.05em;  
}

/* En ≤1280px vuelve a ser fluido (desktop grande ≥1281px queda igual) */
@media (max-width: 1280px) {
  .second-section .lets-see {
    font-size: clamp(1.25rem, 2vw + 1rem, 2rem);
    max-width: 70ch;
    margin: 24px auto 12px;
    text-align: center;
  }
}

/* Extra compacto en teléfonos pequeños */
@media (max-width: 480px) {
  .second-section .lets-see { margin: 16px auto 8px; }
}


/* =============================
   FIX 2 — About Us: solo tablet/phone (desktop intacto)
   ============================= */

/* ≤1024px (tablet): 2 columnas equilibradas, alturas auto */
@media (max-width: 1024px) {
  .add-container-au {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 16px;
    display: flex;
    flex-wrap: wrap;    /* permite salto */
    gap: 20px;
    justify-content: space-between;
  }

  /* dos columnas 50/50 en tablet */
  #a1, #b1, #a2, #b2, #a3, #b3, #a4, #b4 {
    width: calc(50% - 10px);
    margin: 0;
  }

  .add-container-au .left-div,
  .add-container-au .right-div {
    height: auto;       /* quita alturas rígidas */
    min-height: 0;
    padding: 20px;
    align-items: flex-start;
  }

  /* tipografías internas cómodas en tablet */
  .add-container-au .left-div h3,
  .add-container-au .right-div h3 {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
    line-height: 1.25;
    margin-bottom: 8px;
  }
  .add-container-au .left-div p,
  .add-container-au .right-div p {
    width: 100%;
    max-width: 70ch;
    line-height: 1.6;
    font-size: 1rem;
  }
}

/* ≤768px (teléfono): 1 columna */
@media (max-width: 768px) {
  .add-container-au { gap: 16px; }

  #a1, #b1, #a2, #b2, #a3, #b3, #a4, #b4 {
    width: 100%;
    margin: 0;
  }

  .add-container-au .left-div,
  .add-container-au .right-div {
    padding: 16px;
    align-items: flex-start;
  }

  .add-container-au .left-div,
  .add-container-au .right-div {
    margin-bottom: 16px; /* separa las tarjetas verticalmente */
  }
  
}




/* FAQ — Forzar UNA columna en ≤1024px, sin tocar desktop */
@media (max-width: 1024px) {
  .accordion-container #accordion,
  #accordion {
    display: grid !important;
    grid-template-columns: 1fr !important; /* 1 por fila */
    gap: 12px !important;
    padding-inline: 16px;
  }
  .accordion-container #accordion > li,
  #accordion > li {
    grid-column: 1 / -1 !important; /* cada ítem ocupa toda la fila */
    width: 100% !important;
    margin: 0 !important;
  }
}


/* === ABOUT US — Separación vertical en tablet/phone === */

/* Tablet y abajo: espacio entre CADA fila (cada .add-container-au) */
@media (max-width: 1024px) {
  .add-container-au {
    margin-bottom: 24px; /* separa Vision de Value Proposition, etc. */
  }
  .add-container-au:last-of-type {
    margin-bottom: 0;
  }
}

/* Teléfono: más espacio y fallback por si el gap de flex no aplica */
@media (max-width: 768px) {
  .add-container-au {
    margin-bottom: 28px; /* un pelín más en phone */
    gap: 16px;           /* mantiene aire entre tarjetas dentro de la fila */
  }

  /* Fallback de separación entre tarjetas dentro de la MISMA fila
     (por si alguna versión de navegador ignora gap en flex-wrap) */
  .add-container-au > .left-div,
  .add-container-au > .right-div {
    margin-bottom: 16px;
  }
  .add-container-au > .left-div:last-child,
  .add-container-au > .right-div:last-child {
    margin-bottom: 0; /* que la última tarjeta de la fila no deje hueco extra */
  }
}









/* ============================
   GET STARTED — Tablet y Móvil
   (Desktop intacto)
   ============================ */

/* TABLET: hasta 1024px */
@media (max-width: 1024px) {
  /* Permite que los dos cards se acomoden en dos columnas */
  .Fynia-container-row {
    display: flex;
    flex-wrap: wrap;           /* se permite salto de línea */
    justify-content: center;   /* centrado horizontal */
    gap: 20px;                  /* espacio entre cards */

  }

  /* Cada tarjeta ocupa la mitad del ancho con espacio entre ellas */
  .Fynia-container-row .Fynia-btn {
    /*flex: 1 1 calc(50% - 20px);*/
    width: 330px;
    text-align: center;         /* centrado visual para tablet */
  }

  /* Texto de Step centrado dentro de la tarjeta */
  .Fynia-container-row .Fynia-btn .Fynia-btn-text {
    justify-self: center;
    align-self: start;
  }

  /* Título superior */
  .headtext-tp {
    text-align: center;
    margin: 0 auto 20px;
    max-width: 90%;
  }
}

/* MÓVIL: hasta 768px */
@media (max-width: 768px) {
  /* Cards apilados, uno por fila */
  .Fynia-container-row .Fynia-btn {
    flex: 1 1 100%;
    max-width: 320px;
    text-align: left; /* lectura natural en móvil */
  }

  /* Alinear Step y contenido al inicio en móvil */
  .Fynia-container-row .Fynia-btn .Fynia-btn-text {
    justify-self: start;
  }

  /* Párrafos más cómodos */
  .Fynia-container-row .Fynia-btn p {
    max-width: none;
  }

  /* Botón ancho y táctil */
  .Fynia-container-row .submit-button-24 {
    width: 80%;
    max-width: 360px;
  }
}





























/* ============================
   PAYMENT — Tablet & Mobile
   (NO cambia desktop)
   ============================ */

/* --- util: oculta el dropdown de estado salvo cuando JS agrega .visible --- */
#state-dropdown { display: none; }
#state-dropdown.visible { display: block; }

/* Asegura layout correcto del label con iconos de tarjeta */
.card-label-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Inputs y selects a ancho completo dentro de su caja */
.input-box input,
.input-box select,
.input-box-card input {
  width: 100%;
  box-sizing: border-box;
}

/* ===== TABLET (≤1024px) ===== */
@media (max-width: 1024px) {

  /* Contenedor principal: permite salto de columna y centra */
  .add-container-cu{
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
  }

  /* Dos columnas 50/50 en tablet (caja precio y caja formulario) */
  .add-container-cu .form-left{
    flex: 1 1 calc(50% - 12px);
    min-width: 360px;
  }

  .payment-box-pp,
  #left-billing{
    width: 100%;
  }

  /* “Exp Date” y “CVV” aún en fila en tablet */
  #input-container{
    display: flex;
    gap: 12px;
  }
  #input-container .input-box{
    flex: 1 1 0;
    min-width: 0;
  }

  /* Botón de pago cómodo */
  .contact-us-message .submit-btn-payment{
    min-height: 44px;
    padding: 12px 18px;
  }

  /* Títulos un poco más fluidos (opcional) */
  #billing-title,
  .payment-title-pp,
  .title-payment-aux{
    line-height: 1.25;
  }
}

/* ===== MOBILE (≤768px) ===== */
@media (max-width: 768px) {

  /* Una sola columna: primero el precio, luego el formulario */
  .add-container-cu .form-left{
    flex: 1 1 100%;
    min-width: 0;
  }

  /* “Exp Date” y “CVV” en columna para que no se aprieten */
  #input-container{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Selects e inputs a ancho completo; respiro lateral */
  .dropdown-section select,
  .input-box input,
  .input-box-card input{
    width: 100%;
  }

  /* Centrar botón y hacerlo ancho cómodo */
  .contact-us-message{
    display: flex;
    justify-content: center;
  }
  .contact-us-message .submit-btn-payment{
    width: 100%;
    max-width: 360px;
  }

  /* Ajustes de tipografía para caber mejor */
  .payment-title-pp{
    font-size: clamp(1.1rem, 2.2vw + 0.8rem, 1.5rem);
  }
  .payment-subtitle-pp,
  .payment-features-pp li{
    font-size: clamp(0.95rem, 1.2vw + 0.7rem, 1.05rem);
    line-height: 1.6;
  }
}

/* ===== Small Phones (≤480px) ===== */
@media (max-width: 480px){
  .add-container-cu{ gap: 16px; }
  .payment-box-pp{ padding: 16px; }
  #left-billing .input-box,
  #left-billing .input-box-card{ margin-bottom: 12px; }
  .contact-us-message .submit-btn-payment{ max-width: 320px; }
}
















/* =========================================
   OPTI-DETAILS — Tablet & Mobile ONLY
   (Desktop intacto)
   ========================================= */

/* Utilidades: inputs/selects a ancho completo */
.input-box input,
.input-box select,
.input-box-card input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Wrapper genérico de input + icono/ayuda (no deforma) */
.input-icon-wrapper-loanoptimization{
  display: grid;
  grid-template-columns: 1fr auto; /* input | icono */
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.Fynia-tooltip-icon-loanoptimization{ flex: 0 0 auto; }

/* ====== RADIOS: circulares y fila completa a la izquierda ====== */
.Fynia-radio-container{
  display: flex;
  width: 100%;
  flex-wrap: nowrap;            /* misma línea */
  justify-content: flex-start;  /* alineados a la izquierda */
  align-items: center;
  gap: 16px;
}
.Fynia-radio-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;          /* evita cortes raros */
}
.Fynia-radio-input{
  width: 18px !important;
  height: 18px !important;      /* círculo exacto */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: none !important;   /* evita elipses por escalados */
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: #00b86b;        /* color de marca (soportado moderno) */
  flex: 0 0 auto;
}

/* ===== TABLET (≤1024px): TODO VERTICAL, sin 2×2 ===== */
@media (max-width: 1024px){

  /* Bloque superior (Token + Video): apilado */
  #head-dataentry{
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 16px;
    display: flex;
    flex-direction: column;     /* <— vertical */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
  }
  .form-left-1,
  #video-dataentry{
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
  }
  #reflected-data,
  #video-dataentry video{
    max-width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
  }

  /* BLOQUE “Loan Details”: apilado 1 debajo del otro (sin 2×2) */
  .add-container-cu#head-dataentry{
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 16px;
    display: flex;
    flex-direction: column;     /* <— vertical */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
  }
  .add-container-cu#head-dataentry > .form-left{
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
  }

  /* Mes / Año: apilados (el div tiene inline display:flex; lo forzamos) */
  .add-container-cu#head-dataentry .input-box .input-icon-wrapper-loanoptimization{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .date-dropdown{ width: 100%; min-width: 0; }

  /* Botón SUBMIT cómodo */
  .contact-us-message .submit-btn-payment{
    min-height: 44px;
    padding: 12px 18px;
  }
}

/* ===== MÓVIL (≤768px): ajustes finos ===== */
@media (max-width: 768px){

  /* Hero/subtítulo un poco más compacto */
  .opti-h2{
    line-height: 1.35;
    padding-inline: 12px;
  }

  /* Botón centrado y ancho cómodo */
  .contact-us-message{
    display: flex;
    justify-content: center;
  }
  .contact-us-message .submit-btn-payment{
    width: 100%;
    max-width: 360px;
  }
}

/* ===== Teléfonos pequeños (≤480px) ===== */
@media (max-width: 480px){
  #head-dataentry{ gap: 12px; }
  .add-container-cu#head-dataentry{ gap: 12px; }
  .contact-us-message .submit-btn-payment{ max-width: 320px; }
}







/* ==========================
   OPTI-DETAILS — ajustes M/T
   (NO cambia desktop)
   ========================== */

/* 1) Token: en ≤1024px el video va ARRIBA del texto */
@media (max-width: 1024px){
  /* bloque superior: apilado con el video primero */
  #head-dataentry{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-inline: 16px;
  }
  /* orden: video primero */
  #video-dataentry{ order: -1; width: 100%; border: 1px dashed #ccc; }
  .form-left-1{ order: 0; width: 100%; }
  #left-billing-de{border: 1px dashed #ccc; }

  /* centra el video y hazlo fluido */
  #video-dataentry video,
  #reflected-data{
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
  }
}

/* 2) Margin-top extra antes de “Loan Details” en tamaños pequeños */
@media (max-width: 1024px){
  /* el segundo bloque también usa id=head-dataentry en tu HTML */
  .add-container-cu#head-dataentry{
    margin-top: 24px;      /* separa del bloque Token+Video */
    padding-inline: 16px;
  }
}
@media (max-width: 768px){
  .add-container-cu#head-dataentry{ margin-top: 28px; } /* un pelín más en móvil */
}

/* 3) Inputs clave SIEMPRE alineados a la izquierda y ocupando su fila */
@media (max-width: 1024px){
  /* wrapper input+icono: estirar el input al 100% */
  .add-container-cu#head-dataentry .input-icon-wrapper-loanoptimization{
    display: grid;
    grid-template-columns: minmax(0,1fr) auto; /* input | icono */
    justify-items: stretch;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  /* inputs problemáticos */
  #current-loan-amount-de,
  #interest-rate-de,
  #current-monthly-payment-de,
  #loan-linked-fees{
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    box-sizing: border-box;
    font-size: clamp(14px, 1.8vw, 18px); /* min 14px, crece con 1.8vw, max 18px */
  }
}

/* 4) Radios más limpios (sin borde negro) y redondos; usar todo el ancho de su fila */
@media (max-width: 1024px){
  .Fynia-radio-container{
    display: flex;
    width: 100%;
    flex-wrap: nowrap;             /* misma línea */
    justify-content: flex-start;   /* a la izquierda */
    align-items: center;
    gap: 16px;
    margin-top: 8px;
  }
  .Fynia-radio-label{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  /* estilo del control */
  .Fynia-radio-input{
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #00b86b;     /* borde verde limpio */
    border-radius: 50%;
    background: #fff;
    position: relative;
    cursor: pointer;
  }
  .Fynia-radio-input:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,184,107,0.2);
  }
  .Fynia-radio-input:checked{
    border-color: #00b86b;
    background:
      radial-gradient(circle at 50% 50%, #00b86b 0 50%, transparent 52% 100%);
  }
}

/* ===== AÑADIDO: Desktop (≥1025px) con el MISMO estilo visual que en M/T ===== */
@media (min-width: 1025px){
  .Fynia-radio-input{
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #00b86b;     /* mismo borde verde */
    border-radius: 50%;
    background: #fff;
    position: relative;
    cursor: pointer;
  }
  .Fynia-radio-input:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,184,107,0.2); /* mismo enfoque */
  }
  .Fynia-radio-input:checked{
    border-color: #00b86b;
    background:
      radial-gradient(circle at 50% 50%, #00b86b 0 50%, transparent 52% 100%); /* mismo “dot” */
  }
}












/* ==========================
   FOOTER — solo móviles y tablets
   ========================== */
@media (max-width: 1024px) {

  /* Footer en columna */
  .footer-top-27 {
    display: flex;
    flex-direction: column; /* logo arriba, links debajo */
    align-items: center;
    text-align: center;
    gap: 20px; /* espacio entre logo y links */
  }

  /* Logo centrado arriba */
  .footer-logo-27 {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* Menú de enlaces ocupa toda la horizontal */
  .footer-links-27 {
    display: flex;
    flex-wrap: wrap; /* permite que se ajusten en varias líneas */
    justify-content: space-evenly; /* distribuye uniformemente */
    width: 100%;
    gap: 16px;
  }

  .footer-links-27 ul {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  .footer-links-27 li {
    list-style: none;
  }

  /* Opcional: tamaño más amigable para pantallas pequeñas */
  .footer-links-27 a.footer-words {
    font-size: 14px;
    text-align: center;
  }
}













/* ================================
   EXAMPLES — responsive T/M (solo ≤1024px)
   ================================ */

/* Tablet (≤1024px): 2 columnas cómodas, cards centradas y fluidas */
@media (max-width: 1024px) {
  /* grid principal en 2 columnas */
  #card-examples-examples {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    justify-items: center; /* centra cada card dentro de su celda */
  }

  /* cada card ocupa todo el ancho disponible de su celda */
  .form-left-examples {
    width: 100%;
    max-width: 640px;   /* límite agradable para tablet */
    margin: 0;
    display: grid;
  }

  /* imagen fluida dentro de la card */
  .img-examples-card {
    width: 100%;
    height: auto;
    display: block;
  }

  /* grid interno de datos en 2×2 */
  .grid-container-examples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* títulos un poco más contenidos en tablet */
  .title-cards-h2 {
    /*font-size: clamp(1.25rem, 1.1vw + 1rem, 1.75rem);*/
    line-height: 1.15;
  }

  /* mensaje final centrado y con respiro */
  .end-message {
    padding: 24px 16px;
    text-align: center;
  }
}

/* Móvil (≤768px): 1 columna, todo apilado */
@media (max-width: 768px) {
  #card-examples-examples {
    grid-template-columns: 1fr; /* una sola columna */
    gap: 20px;
    padding-inline: 16px;
    justify-items: stretch;
  }

  .form-left-examples {
    max-width: 680px;
    width: 100%;
    margin-inline: auto;
  }

  /* datos en columna para máxima legibilidad */
  .grid-container-examples {
    /*grid-template-columns: 1fr;*/
    gap: 10px;
  }

  /* botón final centrado */
  .contact-us-message,
  .end-message .contact-us-message {
    display: flex;
    justify-content: center;
  }

  /* pequeño ajuste de tamaño del título de cada card en móvil */
  .title-cards-h2 {
    font-size: clamp(1.15rem, 2.2vw + 0.8rem, 1.5rem);
  }
}






/* ================================
   PRIVACY — responsive T/M (solo ≤1024px)
   ================================ */
@media (max-width: 1024px) {
  /* contenedor principal: centrado y con respiración lateral */
  .add-container-pp {
    max-width: 1320px;
    /*width: 100%;*/
    margin-left: 15px;
    margin-right: 15px;
    padding-inline: 15px;
  }

  /* título del hero */
  .hero-text_1 h1 {
    text-align: center;
  }

  /* subtítulo introductorio */
  .headtext-tp {
    max-width: 72ch;
    margin: 0 auto 20px;
    text-align: center;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  /* secciones (h1 dentro del contenido) */
  .termsitems {
    font-size: clamp(1.25rem, 1.4vw + 1rem, 1.6rem);
    line-height: 1.2;
    margin-top: 24px;
    margin-bottom: 6px;
    text-align: left;
  }

  /* párrafos del contenido */
  .termsitemsp {
    font-size: clamp(0.95rem, 1vw + 0.8rem, 1.05rem);
    line-height: 1.5;
    margin: 10px 0 16px;
    overflow-wrap: anywhere; /* evita desbordes con palabras largas */
  }

   #headcontact.add-container-pp {
    margin-left: 15px;
    margin-right: 15px;
    padding-inline: 15px;
  }

}

@media (max-width: 768px) {
  

  .headtext-tp { max-width: 65ch; }
  .termsitems { margin-top: 22px; }
  .termsitemsp { margin-bottom: 18px; }
}





















/* ====== HERO — tablet/móvil (NO cambia desktop) ====== */
@media (max-width: 1024px) {
  .hero {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 2rem 1rem;
  }

  /* La imagen va arriba del texto/botones y no desborda */
  .hero-image {
    order: -1;          /* aparece antes del bloque de texto */
    margin: 0 auto;
    max-width: 100%;
    min-width: 0;       /* anula min-width de desktop */
  }
  .hero-image img {
    display: block;
    margin: 0 auto;
    width: min(420px, 90vw);
    max-width: 100%;
    height: auto;
    min-width: 0;       /* anula min-width:500px de desktop */
  }

  /* Texto un poco más cómodo en tablet */
  .hero-text p {
    font-size: clamp(18px, 2.6vw + 0.4rem, 22px);
    text-align: center;
  }
}

@media (max-width: 768px) {
  .hero {
    gap: 12px;
    padding: 1.5rem 1rem;
  }
  .hero-image img {
    width: min(220px, 88vw);
  }
}

/* ====== TESTIMONIOS — asegurar que se vean y no “desaparezcan” ====== */
.testimonial-container {
  margin-top: 24px;   /* separarlo del hero */
}

@media (max-width: 1024px) {
  /* cada tarjeta más estrecha para que quepan en el carrusel */
  .testimonial-item {
    width: 60%;
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .testimonial-item {
    width: 85%;
    padding: 16px;
  }
  /* por si algún gap del layout hace que se “pierdan”, añadimos un pequeño espacio */
  .testimonial-list {
    gap: 8px;
  }
}











/* ==========================
   OUR MISSION SPOT — Responsive
   (NO cambia Desktop)
   ========================== */

/* ==========================
   OUR MISSION SPOT — Responsive
   (NO cambia Desktop)
   ========================== */

/* Ajustes para ≤1024px (tablet y mobile) */
@media (max-width: 1024px) {
  /* Contenedor principal: margen y padding */
  .our-mission-spot {
    padding: 0 15px;
  }

  /* El título superior centrado y con mejor espaciado */
  .our-mission-spot-head h2 {
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.3;
    letter-spacing: 0.5px; /* evita que las letras se solapen */
    word-spacing: 2px;
  }

  /* Cada bloque se apila verticalmente y se centra */
  .our-mission-spot-body {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center; /* centra las tarjetas dentro del stack */
  }

  /* Tarjetas: límite de ancho y centradas */
  .our-mission-spot-body-1,
  .our-mission-spot-body-2,
  .our-mission-spot-body-3 {
    max-width: 600px;      /* ancho máximo en tamaños intermedios */
    width: 100%;           /* permite encoger por debajo de 600px */
    margin-inline: auto;   /* centrado horizontal */
    box-sizing: border-box;
  }

  /* Bloques 1 y 2: texto + animación en columna */
  .our-mission-spot-body-1,
  .our-mission-spot-body-2 {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

/* Párrafos con tipografía fluida (sin saltos entre breakpoints) */
  .our-mission-spot-body-1 p,
  .our-mission-spot-body-2 p,
  .our-mission-spot-body-3 p {
    font-size: clamp(1rem, 0.4vw + 0.95rem, 1.125rem); /* min → fluido → max */
    line-height: 1.6;
  }


  /* Animaciones fluidas */
  .our-mission-spot-body-1 dotlottie-player,
  .our-mission-spot-body-2 dotlottie-player,
  .our-mission-spot-body-3 dotlottie-player {
    max-width: 90%;
    height: auto !important;
  }

  /* Bloque 3: texto arriba, animación en medio y botón debajo */
  .our-mission-spot-body-3 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  /* Texto centrado */
  .our-mission-spot-body-3 .left {
    width: 100%;
    text-align: center;
    order: 1; /* texto primero */
  }

  /* Animación centrada */
  .our-mission-spot-body-3 .right {
    width: 100%;
    display: flex;
    justify-content: center;
    order: 2; /* animación después del texto */
  }

  /* Botón final debajo de la animación */
  #end-button {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    order: 3; /* botón después de la animación */
  }
}



.our-mission-spot {
  max-width: 1320px;          /* Tamaño máximo centrado */
  margin: 0 auto;             /* Centra el div cuando sobra espacio */
  padding: 10px 15px 50px;    /* 15px de espacio interno a los lados */
  background: rgb(245, 248, 244);
  box-sizing: border-box;     /* Asegura que el padding no rompa el ancho */
}



@media (max-width: 1024px) {
  .our-mission-spot {
    /* Mantén un padding-top > 0 para evitar colapsar el margin-top */
    padding: 10px 15px 50px;   /* antes: 0 15px */
    margin-top: 30px !important;
    /* (opcional pero útil) evita colapso 100% seguro */
    border-top: 1px solid transparent;
  }
}





/* Ajustes para ≤768px (mobile) */
@media (max-width: 768px) {
  /* Texto aún más compacto */
 

  .our-mission-spot-head h2 {
    font-size: 1.6rem;
    letter-spacing: 0.6px; /* más espacio en móviles */
    word-spacing: 2.5px;
  }

  .our-mission-spot-body-1 h2,
  .our-mission-spot-body-2 h2,
  .our-mission-spot-body-3 h2 {
    font-size: 1.4rem;
  }

  .our-mission-spot-body-1 p,
  .our-mission-spot-body-2 p,
  .our-mission-spot-body-3 p {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  /* Espaciado general */
  .our-mission-spot-body {
    gap: 20px;
  }
}

/* Forzar que el botón quede DEBAJO de la animación en pantallas ≤1024px */
@media (max-width: 1024px) {
  .our-mission-spot-body-3 {
    display: flex;
    flex-direction: column;
  }

  /* Hace que los hijos de .left pasen a ser flex-items del contenedor */
  .our-mission-spot-body-3 .left {
    display: contents;
  }

  /* Texto primero */
  .our-mission-spot-body-3 .left > :not(#end-button) {
    order: 1;
  }

  /* Animación después del texto */
  .our-mission-spot-body-3 .right {
    order: 2;
  }

  /* Botón al final, centrado */
  #end-button {
    order: 3;
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
}

/* Unificar padding/alineación de títulos y párrafos SOLO en ≤1024px */
@media (max-width: 1024px) {
  /* Quita el margen propio del h2 y alinéalo como en desktop */
  .our-mission-spot-body h2 {
    margin-left: 0;        /* ← elimina el empuje extra */
    width: auto;           /* no fuerces 100% aquí */
    text-align: left;      /* igual que el párrafo */
  }

  /* Da el padding al contenedor, no al h2 */
  .our-mission-spot-body-1,
  .our-mission-spot-body-2,
  .our-mission-spot-body-3 {
    padding-inline: 15px;  /* mismo “gutter” para h2 y p */
  }

  /* Asegura que el párrafo no tenga márgenes laterales raros */
  .our-mission-spot-body p {
    margin-left: 0;
    margin-right: 0;
  }
}













/* ===========================
   Benefits Section Responsive (reemplazo)
   =========================== */

/* 1) Margen lateral fijo de 15px en todos los tamaños */
.benefits-container{
  max-width: 1320px;
  width: 100%;
  margin-inline: auto;         /* centra el bloque */
  padding: 20px;               /* mantiene respiración interna */
  padding-inline: 15px;        /* mínimo 15px laterales */
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: rgb(245, 248, 244);
  border: 1px dashed #ccc;
  box-sizing: border-box;
}

/* 2) Tablet/Móvil: apilar y forzar orden Texto → Animación */
@media (max-width: 1024px){
  .benefits-container{
    max-width: 600px;          /* tope en intermedios */
    margin-inline: auto;       /* asegúrate de centrar */
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 18px;
    text-align: left;
  }

  /* Ambas columnas ocupan el 100% */
  .benefits-container > .left,
  .benefits-container > .right {
    width: 100%;
  }

  /* Cualquier lado que tenga la animación va SEGUNDO (debajo) */
  .benefits-container > .left:has(dotlottie-player),
  .benefits-container > .right:has(dotlottie-player) {
    order: 2;
    display: flex;
    justify-content: center;   /* centramos la animación */
  }

  /* Cualquier lado que tenga el texto principal (h3/p) va PRIMERO (arriba) */
  .benefits-container > .left:has(h3),
  .benefits-container > .left:has(p),
  .benefits-container > .right:has(h3),
  .benefits-container > .right:has(p) {
    order: 1;
  }

  /* Animación fluida y sin desbordes */
  .benefits-container dotlottie-player {
    max-width: 260px;
    width: 100%;
    height: auto !important;
  }

  /* Títulos un poco más contenidos en tablet */
  .benefits-container h3 {
    font-size: 1.25rem;  /* antes 1.4rem aprox */
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .benefits-container p {
    font-size: 1rem;
    line-height: 1.5;
  }
}

/* 3) Móvil: aún más compacto */
@media (max-width: 768px) {
  .benefits-container {
    gap: 14px;
  }

  .benefits-container dotlottie-player {
    max-width: 200px;
  }

  .benefits-container h3 {
    font-size: 1.15rem; /* un poco más pequeño en móvil */
  }

  .benefits-container p {
    font-size: 0.95rem;
    line-height: 1.45;
  }
}


.our-mission-spot-body-texts{
  font-weight: 500;
  text-align: left;
}

/* Permitir que los bloques se encojan por debajo del ancho de su contenido */
@media (max-width: 1024px) {
  .our-mission-spot-body,
  .our-mission-spot-body-1,
  .our-mission-spot-body-2,
  .our-mission-spot-body-3 {
    min-width: 0;              /* clave en flex para que sí se contraiga */
  }

  /* Forzar que las animaciones sean fluidas y no impongan 350/400px fijos */
  .our-mission-spot-body-1 dotlottie-player,
  .our-mission-spot-body-2 dotlottie-player,
  .our-mission-spot-body-3 dotlottie-player {
    width: 100% !important;    /* sobreescribe el width inline del HTML */
    max-width: 100% !important;
    height: auto !important;
  }

  /* Si algún contenedor lateral usa flex/grid, asegúrate de esto también */
  .our-mission-spot-body-3 .left,
  .our-mission-spot-body-3 .right {
    min-width: 0;
  }
}



















/* ===========================
   Five Tailored Payment Options (responsive, sin cambios en desktop)
   =========================== */

/* Tablet & Mobile */
@media (max-width: 1024px) {
  /* Encabezado: centrado, títulos más grandes */
  #second-section-inline {
    margin-left: 0;   /* ocupa todo el ancho */
    margin-right: 0;  /* ocupa todo el ancho */
    text-align: center;
  }
  #second-section-inline h2 {
    /* subir un poco respecto a lo anterior */
    font-size: clamp(1.6rem, 3vw, 2rem);
    line-height: 1.25;
    letter-spacing: 0.2px;
  }
  #second-section-inline .auxiliar-h3 {
    font-size: clamp(1.05rem, 2.4vw, 1.2rem);
    line-height: 1.5;
    margin-top: 8px;
  }

  /* Contenedor padre: sin márgenes laterales (ocupa toda la horizontal) */
  .section-4 {
    margin-left: 0;
    margin-right: 0;
  }

  /* Grid: 2 columnas en tablet, sin márgenes añadidos ni padding extra */
  .section-4-alternatives-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding-inline: 15px;
  }

  /* Cards: SIN bordes redondeados, evitar desbordes, tipografías legibles */
  .section-4-alternatives-grid .item {
    min-width: 0;
    padding: 16px;
    border: 1px dashed #ccc;   /* mantiene tu estética */
    border-radius: 0;          /* sin redondeo */
    text-align: center;
    background: #fff;          /* si ya lo tienes, no pasa nada */
    max-width: none; /* override explícito del 420px */
    margin: 0;
    flex: unset;
    width: 100%;
  }



  .section-4-alternatives-grid .item p {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Barras: siempre dentro del card, sin redondear */
  .section-4-alternatives-grid .item > div[class$="-bar"] {
    width: 100%;
    max-width: 100%;
    height: 10px;
  }
}

/* Mobile: 1 columna, ajusta tipografías un poco más */
@media (max-width: 768px) {
  #second-section-inline h2 {
    font-size: 1.7rem;       /* que no quede pequeño en móviles */
  }
  #second-section-inline .auxiliar-h3 {
    font-size: 1.3rem;
  }

  .section-4-alternatives-grid {
    display: grid;
    grid-template-columns: 1fr;      /* una sola tarjeta por fila */
    justify-content: center;         /* centra el contenido */
    gap: 15px;                        /* espacio entre tarjetas */
    padding-inline: 15px;             /* margen mínimo a los bordes */
  }
  .section-4-alternatives-grid .item {
    width: 100%;
    max-width: 420px;                 /* tope máximo */
    margin: 0 auto;                   /* centra el bloque */
    padding: 14px;
  }

}


#negativo-aux{
  background-color: rgb(245, 248, 244);
}

.titulos-aux{
  text-align: center !important; 
  max-width: 1320px !important;
  margin: 0 auto !important;
  margin-bottom: 20px !important;
  font-size: clamp(2.75rem, 5vw, 4rem) !important;
  font-weight: 500 !important;
  font-family: Outfit, Arial !important;
  position: relative !important;
  line-height: 110% !important;
  letter-spacing: -3px !important;
  margin-top: 20px !important;
  text-transform: capitalize !important;
  color: black !important;
  margin-top: 50px !important;
  padding-inline: clamp(15px, 5vw, 50px) !important;
}

.titulos-aux-h1{
  text-align: center !important; 
  max-width: 1320px !important;
  margin: 0 auto !important;
  margin-bottom: 20px !important;
  font-size: clamp(3rem, 5vw, 5.5rem) !important;
  font-weight: 500 !important;
  font-family: Outfit, Arial !important;
  position: relative !important;
  line-height: 110% !important;
  letter-spacing: -3px !important;
  text-transform: capitalize !important;
  color: black !important;
  margin-top: 60px !important;
  padding-inline: clamp(15px, 5vw, 50px) !important;
}

@media (max-width: 768px) {
  .titulos-aux-h1 {
    margin-top: 10px !important;      /* que no quede pequeño en móviles */
  }

}







/* ===== Results: tablet y móvil (reemplaza lo anterior) ===== */
@media (max-width: 1024px){
  /* Contenedor principal: centrado + 15px laterales + separación superior */
  .results-container {
    /* mantén el gap mínimo de 15px respecto a los bordes */
    margin-inline: 15px !important;
    margin-block: 30px;

    /* evita que el ancho fuerce el borde a tocar el viewport */
    max-width: calc(100% - 30px);
    width: auto;

    /* opcional: si quieres resguardo interno del contenido */
    /* padding-inline: 15px; */
    box-sizing: border-box;
  }

  /* Una sola columna en tablet y móvil */
  .results-container-child{
    display: grid;
    grid-template-columns: 1fr; /* <- siempre 1 columna */
  }

  /* Tarjetas full-width y sin bordes laterales de desktop */
  .results-container-child .child-2{
    width: 100%;
    margin: 0;
    border-right: none !important;
  }

  /* Centrados internos */
  .results-container-child .half{
    display: grid;
    place-items: center;
    text-align: center;
    padding: 8px 6px;
  }

  /* Títulos que escalan suavemente */
  #results-special-background{
    font-size: clamp(22px, 5.5vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-align: center;
  }
  #results-title{
    font-size: clamp(16px, 3.5vw, 18px);
    line-height: 1.25;
    letter-spacing: -0.25px;
    text-align: center;
  }
  .values-title-results{
    font-size: clamp(20px, 5.2vw, 28px);
    line-height: 1.2;
    text-align: center;
  }
}

/* Ajuste fino para móviles pequeños */
@media (max-width: 768px){
   .results-container {
    /* borde nunca pega a los lados */
    margin-inline: 15px !important;
    margin-block: 30px;

    /* asegura que el ancho respete esos 15px por lado */
    max-width: calc(100% - 30px);
    width: auto;

    /* opcional: si quieres padding interno del contenido, actívalo;
       no afecta la posición del borde */
    /* padding-inline: 15px; */

    box-sizing: border-box;
  }
  .results-container-child .child-2{
    padding: 10px 8px;
  }
}
























/* ============ FIXES GLOBALES (afectan también desktop en beneficio del centrado) ============ */
/* Mantén el donut SIEMPRE centrado (horizontal y vertical) dentro de su tarjeta */
.comparison-box-21:has(#donut-chart-21){
  display: block;      /* <- antes era flex */
  text-align: center;
}

/* El contenedor del donut centrado */
#donut-chart-21{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* El donut NO crece en pantallas pequeñas (tamaño fijo) */
.donut-svg-21{
  width: 150px;
  height: 150px;
  max-width: 150px;
  max-height: 150px;
}

/* ============ MÓVIL / TABLET (≤1024px) — sin tocar desktop ============ */
@media (max-width: 1024px){
  /* Contenedor principal en columna + margen lateral mínimo */
  #comparison-container-21{
    max-width: 650px;                /* mismo tope que el contenido */
    width: calc(100% - 30px);        /* respeta 15px por lado cuando falte espacio */
    margin-inline: auto;             /* céntralo */
    box-sizing: border-box;
  }

  /* Columna izquierda (Basic): centrada y con ancho máx 650 */
  .comparison-left-21{
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    border: 1px dashed #ccd3db;
    padding: 16px;
    box-sizing: border-box;
  }

  /* Columna derecha: UNA SOLA COLUMNA, sin gap, centrada y con ancho máx 650 */
  #comparison-right-21{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;                 /* quitamos el espacio entre tarjetas */
    max-width: 650px;
    width: 100%;
    margin: 0 auto;         /* centrado */
  }

  /* Cada tarjeta: centrado vertical/horizontal del contenido */
  .comparison-box-21{
    border: 1px dashed #ccc;
    padding: 14px;
    box-sizing: border-box;
    display: flex;                 /* centrado estable */
    flex-direction: column;
    align-items: center;
    justify-content: center;       /* centra TÍTULO + VALOR en el eje vertical */
    text-align: center;
  }

  /* “Total Repayment Amount”: asegura el número centrado también */
  #comparison-box-value-21-align-tra{
    align-self: center;
    margin: 8px 0 0 0; /* pequeño respiro sin empujarlo hacia abajo */
  }

  /* Tipos fluidos (ligeros para móvil/tablet) */
  #comparison-left-title-21{        /* “Basic” */
    font-size: clamp(20px, 4.2vw, 28px);
  }
  #comparison-left-descrip-21{
    font-size: clamp(14px, 3.6vw, 18px);
  }
  #comparison-left-amount-21{       /* $1,313 */
    font-size: clamp(36px, 6vw, 56px);
  }
  #comparison-left-unit-21{
    font-size: clamp(14px, 3.6vw, 18px);
  }
  .comparison-box-title-21{
    font-size: clamp(16px, 3.6vw, 20px);
  }
  .comparison-box-value-21{
    font-size: clamp(22px, 5vw, 36px);
  }
  .comparison-box-sub-21,
  .comparison-box-desc-21{
    font-size: clamp(14px, 2.5vw, 16px) !important;
    line-height: 1.45;
  }
  .comparison-box-score-21{          /* “GOOD” */
    font-size: clamp(20px, 5vw, 32px);
  }
}

/* Extra por si el viewport es muy estrecho */
@media (max-width: 480px){
  .comparison-left-21,
  #comparison-right-21{
    max-width: 100%;
  }
}



/* ====== Comparison (pantallas muy pequeñas) ====== */
@media (max-width: 480px){
  /* El contenedor abraza el viewport y queda centrado con 15px laterales */
  #comparison-container-21{
    width: calc(100% - 30px);
    max-width: 650px;
    margin-inline: auto;
    flex-direction: column;
  }

  /* La columna derecha se vuelve 1 sola columna y permite encogerse */
  #comparison-right-21{
    display: grid;
    grid-template-columns: 1fr;   /* 1 columna */
    gap: 0;                       /* sin espacios extra */
    min-width: 0;
  }

  /* Cajas sin anchos mínimos que provoquen overflow */
  .comparison-left-21,
  .comparison-box-21{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;      /* evita desbordes por textos largos */
  }

  /* Números grandes: escalan para caber siempre */
  .comparison-box-value-21{
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    line-height: 1.1;
  }

  /* Centrado vertical/horizontal estable del donut y tamaño controlado */
  #donut-chart-21{
    width: min(180px, 70vw);      /* nunca crece de más en chico */
    height: auto;
    margin: 0 auto;
    display: grid;
    place-items: center;
  }
  .donut-svg-21{ width: 100%; height: auto; }

  /* Asegura que el valor de “Total Repayment Amount” quede centrado siempre */
  #comparison-box-value-21-align-tra{
    display: grid;
    place-items: center;          /* centra H y V */
    min-height: 3.5rem;           /* base visual para el centrado */
    margin: 0;                    /* sin márgenes que lo desplacen */
    line-height: 1.1;
  }
}

















/* Ajustes responsive para la sección container-results */
@media (max-width: 1024px) {
  .container-results {
    display: flex;
    flex-direction: column-reverse; /* Imagen arriba, texto abajo */
    align-items: center;
    gap: 20px;
    padding-inline: 15px; /* Respeta margen lateral mínimo */
    text-align: center;
  }

  .container-results-left,
  .container-results-right {
    width: 100%;
    max-width: 650px; /* Mantiene un ancho máximo estético */
    margin: 0 auto;
  }

  /* Imagen adaptativa */
  .container-results-right img.jane-happy {
    width: 100%;
    max-width: 300px; /* Tamaño máximo en tablet */
    height: auto;
    margin: 0 auto;
    display: block;
  }

  /* Botones centrados en tablet */
  .container-results-left .hero-buttons {
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  /* Ajustes para móviles */
  .container-results {
    gap: 15px;
  }

  .container-results-left h1 {
    font-size: 1.8rem; /* Escala título */
  }

  .container-results-left p {
    font-size: 1rem; /* Texto más pequeño y legible */
    line-height: 1.5;
  }

  .container-results-right img.jane-happy {
    max-width: 250px; /* Imagen ligeramente más pequeña en móviles */
  }
}






/* Smartphones: 1 columna (≤768px) */
@media (max-width: 768px) {
  .second-section #features-grid-22 {
    grid-template-columns: 1fr !important;   /* fuerza 1 columna */
    grid-template-rows: auto !important;     /* resetea filas fijas */
    gap: 20px;
    padding: 15px;                           /* 15px laterales mínimos */
  }

  .second-section #features-grid-22 .feature-card-22 {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}





/* ====== Estilos móviles ====== */
@media (max-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px; /* margen lateral de 15px */
  }

  /* Ocultar menú normal y botón en móvil */
  .nav-links,
  .get-started {
    display: none !important;
  }

  /* Estilos botón hamburguesa */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .hamburger .bar {
    width: 24px;
    height: 2px;
    background: #000;
    margin: 4px 0;
    transition: transform 0.2s ease;
  }

  /* Menú desplegable */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 60px; /* altura navbar */
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px dashed #ccc;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    z-index: 999;
  }

  .mobile-menu.open {
    display: block;
  }

  .mobile-menu ul {
    list-style: none;
    padding: 10px 15px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mobile-menu ul li a {
    text-decoration: none;
    color: #000;
    font-size: 1rem;
    padding: 10px 0;
  }

  /* Evitar scroll al abrir menú */
  body.no-scroll {
    overflow: hidden;
  }
}



/* ====== NAV móvil: mejoras de menú ====== */
@media (max-width: 768px) {
  /* Asegura una altura uniforme de la barra para calcular el top del menú */
  .navbar { min-height: 60px; }

  /* Desplaza el desplegable un poco más abajo para no tapar el botón */
  .mobile-menu {
    top: 72px;                /* antes: 60px */
    border-top: 1px dashed #ccc;
  }

  /* Tipografía más grande y separadores dashed entre opciones */
  .mobile-menu ul {
    list-style: none;
    padding: 12px 15px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;                   /* sin gap, usamos bordes como separador */
  }

  .mobile-menu ul li {
    border-bottom: 1px dashed #ddd;
  }
  .mobile-menu ul li:last-child {
    border-bottom: 0;
  }

  .mobile-menu ul li a {
    display: block;
    text-decoration: none;
    color: #000;
    font-size: 1.1rem;        /* ↑ tamaño */
    padding: 12px 0;          /* ↑ área táctil */
  }

  /* === Botón hamburguesa: líneas perfectamente simétricas === */
.hamburger{
  width: 44px;
  height: 44px;
  position: relative;
  display: inline-block;
  line-height: 0;                 /* evita herencias raras */
  background: #fff;
}

/* Las 3 líneas */
.hamburger span,
.hamburger .line{
  position: absolute;
  left: 50%;
  width: 26px;
  height: 2px;
  background: #111;
  border-radius: 2px;
  transform: translateX(-50%);    /* centra horizontalmente */
  transform-origin: 50% 50%;      /* ROTAN desde el centro */
  transition: transform .22s ease, top .22s ease, opacity .18s ease;
}

/* Posiciones cerradas (3 barras) */
.hamburger span:nth-child(1),
.hamburger .line:nth-child(1){ top: 12px; }
.hamburger span:nth-child(2),
.hamburger .line:nth-child(2){ top: 20px; }
.hamburger span:nth-child(3),
.hamburger .line:nth-child(3){ top: 28px; }

/* Estado abierto: forma una X perfectamente centrada */
.hamburger.open span:nth-child(1),
.hamburger.open .line:nth-child(1){
  top: 20px;
  transform: translateX(-50%) rotate(45deg);
}
.hamburger.open span:nth-child(2),
.hamburger.open .line:nth-child(2){
  opacity: 0;
}
.hamburger.open span:nth-child(3),
.hamburger.open .line:nth-child(3){
  top: 20px;
  transform: translateX(-50%) rotate(-45deg);
}

}


/* ===== Desktop (≥769px): menú móvil SIEMPRE oculto ===== */
@media (min-width: 769px){
  .mobile-menu{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }
  .hamburger{ display: none !important; }
  .nav-links{ display: flex !important; }      /* el menú normal visible */
  .get-started{ display: inline-flex !important; }
}

/* ===== Móvil (≤768px): por defecto oculto; visible solo con .open ===== */
@media (max-width: 768px){
  .nav-links{ display: none !important; }
  .get-started{ display: none !important; }

  .mobile-menu{
    position: absolute;
    top: 64px;               /* que no tape el botón */
    left: 15px;
    right: 15px;
    display: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .mobile-menu.open{
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
}




/* ===== Fynia - imagen arriba y responsive en móviles/tablets ===== */
@media (max-width: 1024px){
  /* apilar columnas y dar respiro a los lados */
  #Fynia-parent-container{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-inline: 15px;      /* mínimo 15px lateral */
  }

  /* ambas columnas ocupan 100% */
  #Fynia-child-left,
  #Fynia-child-right{
    width: 100%;
  }

  /* la imagen va arriba y escala fluidamente */
  #Fynia-grandchild-left img{
    display: block;
    max-width: 50%;
    height: auto;
    margin: 0 auto;           /* centrada */
  }
}






























/* === Key Metrics — centrado del valor (todas las resoluciones) === */
#Fynia-adv-key-metrics .Fynia-adv-metric-box h2{
  margin: 0;
  display: flex;
  align-items: center;      /* centrado vertical */
  justify-content: center;  /* centrado horizontal */
  line-height: 1.1;
  /* tamaño fluido del número (no afecta desktop, solo limita arriba) */
  font-size: clamp(24px, 3.2vw, 40px);
  
}

/* === Tablet (≤1024px): pasa a 2x2 === */
@media (max-width: 1024px){
  #Fynia-adv-key-metrics{
    display: grid;                           /* de flex → grid */
    grid-template-columns: repeat(2, 1fr);   /* 2 columnas */
    gap: 12px;
    height: auto;                            /* anula la altura fija de desktop */
  }
  #Fynia-adv-key-metrics .Fynia-adv-metric-box{
    min-height: 110px;                       /* altura cómoda del card */
  }
  #Fynia-adv-key-metrics .Fynia-adv-metric-box h2{
    font-size: clamp(22px, 4.8vw, 34px); 
        /* tamaño del número en tablet */
  }
}

/* === Mobile (≤768px): 1 columna === */
@media (max-width: 768px){
  #Fynia-adv-key-metrics{
    grid-template-columns: 1fr;              /* apila 4 filas */
  }
  #Fynia-adv-key-metrics .Fynia-adv-metric-box{
    min-height: 96px;
  }
  #Fynia-adv-key-metrics .Fynia-adv-metric-box h2{
    font-size: clamp(38px, 6vw, 42px); 
    margin-top: 10px;    /* número un poco más compacto */
    margin-bottom: 10px;
  }
}










/* =========================
   Charts (mini + main)
   ========================= */

/* Tablet (≤1024px): los 2 mini-charts lado a lado; el chart grande abajo */
@media (max-width: 1024px){
  /* Rompe la fila horizontal de desktop */
  #Fynia-adv-chart-row-1{
    display: block;           /* desktop es flex en fila */
  }

  /* Los 2 mini-charts (izquierda) en 2 columnas */
  #Fynia-adv-loan-details{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    height: auto;             /* override de alturas fijas */
  }

  /* Card de cada mini-chart: altura automática para que la imagen no se deforme */
  #Fynia-adv-loan-details .Fynia-adv-detail-box{
    height: auto;             /* desktop tiene 272px */
    display: flex;
    flex-direction: column;
    padding: 8px 8px 12px;
    min-width: 0;
  }

  /* Imágenes: que escalen sin recortar (son PNG) */
  #Fynia-adv-loan-details .Fynia-adv-detail-box img,
  .img-first-dashboard-micro,
  .img-first-dashboard-micro-2{
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;      /* evita “crop” */
    margin: 0 auto;
    clip-path: none;          /* anula el recorte del desktop */
  }

  /* El chart grande va debajo ocupando todo el ancho */
  #Fynia-adv-main-chart-1{
    width: 100%;
    margin-top: 12px;
  }
  #Fynia-adv-main-chart-1 .img-first-dashboard{
    width: 100%;
    height: auto;
    object-fit: contain;      /* desktop usa cover; aquí evitamos recorte */
    display: block;
  }
}

/* Mobile (≤768px): cada gráfica en su propia fila (apila los 2 mini-charts) */
@media (max-width: 768px){
  #Fynia-adv-loan-details{
    grid-template-columns: 1fr; /* 2 → 1 columna */
    gap: 10px;
  }

  /* Limita altura visual sin deformar, por si el PNG es muy alto */
  #Fynia-adv-loan-details .Fynia-adv-detail-box img,
  .img-first-dashboard-micro,
  .img-first-dashboard-micro-2{
    max-width: 100%;
    max-height: clamp(180px, 40vh, 320px);
  }
}

/* Teléfono pequeño (≤480px): pequeños ajustes de espaciado */
@media (max-width: 480px){
  #Fynia-adv-loan-details{ gap: 8px; }
  #Fynia-adv-loan-details .Fynia-adv-detail-box{ padding: 6px 6px 10px; }
}


/* Desktop (≥1025px): la imagen grande llena la ALTURA del contenedor */
@media (min-width: 1025px){
  #Fynia-adv-main-chart-1{
    display: flex;                 /* establece contexto para el img */
  }
  #Fynia-adv-main-chart-1 .img-first-dashboard{
    width: 100%;
    height: 100%;                  /* ocupa toda la altura disponible (≈560px) */
    object-fit: contain;           /* sin recortes, respeta proporción */
    display: block;
  }
}



/* Desktop: apila TÍTULO arriba e IMAGEN abajo en #Fynia-adv-main-chart-1 */
@media (min-width: 1025px){
  #Fynia-adv-main-chart-1{
    display: grid;                 /* fuerza layout vertical */
    grid-template-rows: auto 1fr;  /* h3 arriba (alto auto), img debajo */
  }

  #Fynia-adv-main-chart-1 .Fynia-adv-middle-top{
    height: 40px;                  /* mismo alto que usas en otras cards */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  #Fynia-adv-main-chart-1 .img-first-dashboard{
    display: block;
    width: 100%;
    height: auto;                  /* mantiene proporción */
  }
}



/* Desktop (≥1025px): igualar alturas entre las dos columnas de la fila */
@media (min-width: 1025px){
  /* Asegura que los dos hijos se estiren verticalmente en la fila */
  #Fynia-adv-chart-row-1 { align-items: stretch; }

  /* Columna derecha (gráfica grande): misma altura que la izquierda */
  #Fynia-adv-main-chart-1{
    display: flex !important;
    flex-direction: column !important;
    height: 560px !important;        /* ← iguala a la izquierda */
  }

  /* Título arriba, centrado */
  #Fynia-adv-main-chart-1 .Fynia-adv-middle-top{
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  /* La imagen rellena el resto de la tarjeta sin deformarse */
  #Fynia-adv-main-chart-1 .img-first-dashboard{
    flex: 1 1 auto;
    width: 100%;
    height: calc(100% - 40px) !important;  /* ocupa todo el espacio bajo el título */
    object-fit: contain;                   /* sin recortes */
    display: block;
  }
}





/* Mobile (≤768px): fechas en una sola columna */
@media (max-width: 768px){
  #Fynia-adv-dates-row{
    display: grid;                 /* sin asumir layout previo */
    grid-template-columns: 1fr;    /* una sobre la otra */
    gap: 12px;                     /* separación entre las dos cajas */
  }
  #Fynia-adv-dates-row .Fynia-adv-date-box{
    width: 100%;
  }
}


/* Tipografía fluida en métricas intermedias (h2 y p) */
#Fynia-adv-middle-row .Fynia-adv-middle-box h2{
  /* max = 40px (igual que desktop actual), min cómodo para móvil */
  font-size: clamp(38px, 6vw, 42px);
  line-height: 1.1;
}

/* Subtexto ("lower is better" / "higher is better") escalable */
#Fynia-adv-middle-row .Fynia-adv-middle-bottom p{
  /* asumiendo ~16px como tamaño desktop: mantenemos 16px max */
  font-size: clamp(14px, 2.5vw, 16px) !important;
  line-height: 1.25;
  margin: 0; /* evita saltos verticales en móvil */
  opacity: 0.9; /* opcional: un pelín más sutil */
}



/* Mobile (≤768px): apila las 3 cajas de métricas intermedias */
@media (max-width: 768px){
  #Fynia-adv-middle-row{
    display: flex;              /* mantiene compatibilidad con tu layout actual */
    flex-direction: column;     /* de fila → columna */
    gap: 12px;                  /* separación entre cajas */
    margin-inline: 15px;        /* aire lateral mínimo en móvil */
  }
  #Fynia-adv-middle-row .Fynia-adv-middle-box{
    width: 100%;                /* cada card ocupa todo el ancho */
  }
}












/* ====== Titles: tablet & mobile only (desktop queda igual) ====== */

/* Tablet (≤1024px): tipografías moderadamente más compactas + 15px laterales */
@media (max-width: 1024px){
  .titles-optimizacion-h1{
    /* máx: tu tamaño actual; min razonable; curva suave */
    font-size: clamp(3rem, 5vw, 5.5rem) !important;
    line-height: 1.2;
    
  }
  .titles-optimizacion-h3{
    font-size: clamp(17px, 1.4vw + 0.4rem, 18px);
    line-height: 1.45;
    opacity: 0.95; /* sutil, opcional */
    margin-top: 10px;
  }

  /* aire mínimo para que nunca toquen los bordes */
  #titles-optimizacion-left,
  .titles-optimizacion-h1#titles-optimizacion-left,
  .titles-optimizacion-h3#titles-optimizacion-left{
    margin-inline: 15px;
  }
}

/* Mobile (≤768px): aún más compacto + margen lateral 15px garantizado */
@media (max-width: 768px){
  .titles-optimizacion-h1{
    
    line-height: 1;
  }
  .titles-optimizacion-h3{
    /*font-size: clamp(13px, 3.6vw, 16px);*/
    line-height: 1.5;
  }

  #titles-optimizacion-left,
  .titles-optimizacion-h1#titles-optimizacion-left,
  .titles-optimizacion-h3#titles-optimizacion-left{
    margin-inline: 15px;   /* mantiene el “acolchado” lateral mínimo */
  }
}


/* Desktop (≥1025px): 15px de aire lateral en los títulos */
@media (min-width: 1025px){
  .titles-optimizacion-h1,
  .titles-optimizacion-h3{
    padding-inline: 15px;
  }
}


/* Desktop (≥1025px): 15px de respiro a la DERECHA en los títulos del bloque derecho */
@media (min-width: 1025px){
  /* h1 y h3 con id="titles-optimizacion-right" */
  #titles-optimizacion-right.titles-optimizacion-h1,
  #titles-optimizacion-right.titles-optimizacion-h3{
    padding-right: 15px !important;
    margin-bottom: 10px;
  }
}

.Fynia-bottom-row-2011{margin-top: 40px;}




/* Tablet + Mobile (≤1024px): 15px por la DERECHA en los títulos del bloque derecho */
@media (max-width: 1024px){
  #titles-optimizacion-right{
    padding-right: 15px !important;
    padding-left: 15px !important;
    
  }
}










/* Min. 15px de aire lateral en TODOS los tamaños */
#Fynia-monthly-title-7{
  padding-inline: 15px !important;
}





/* === Tablet (≤1024px): textos escalan y el párrafo pasa debajo === */
@media (max-width: 1024px){
  #Fynia-adv-header-basic,#Fynia-adv-header-standard,#Fynia-adv-header-premium,#Fynia-adv-header-ideal,
  #Fynia-adv-header-quick,#Fynia-adv-header-max{
    display: flex;
    flex-direction: column;  /* h1 + subtítulo arriba, párrafo debajo */
    gap: 0px;
    padding-inline: 10px;    /* evita tocar bordes */
  }
  #Fynia-adv-header-left,
  #Fynia-adv-header-right{
    width: 100%;
    text-align: center;
  }

  /* Escalado suave */
  #Fynia-adv-title{
    font-size: clamp(26px, 3.6vw + 0.6rem, 42px);
    line-height: 1.15;
  }
  #Fynia-adv-subtitle{
    font-size: clamp(14px, 1.6vw + 0.4rem, 20px);
    line-height: 1.35;
    margin-top: 4px;
  }
  .subtitle-p-results{
    font-size: clamp(14px, 1.6vw + 0.4rem, 16px);
    line-height: 1.45;
    margin-top: 8px;
  }
}

/* === Mobile (≤768px): afinado de tamaños === */
@media (max-width: 768px){
  #Fynia-adv-title{
    font-size: clamp(22px, 6vw, 34px);
  }
  #Fynia-adv-subtitle{
    font-size: clamp(17px, 3.8vw, 19px);
  }
  .subtitle-p-results{
    font-size: clamp(12px, 3.8vw, 16px);
  }
}


/* Tablet + Mobile: alinear títulos y párrafo a la IZQUIERDA */
@media (max-width: 1024px){
  #Fynia-adv-header-left,
  #Fynia-adv-header-right{
    text-align: left !important;
    align-items: flex-start; 
    padding: 0px;          /* por si dentro usas flex */
  }
  /* Asegura que los propios textos no traigan centrado heredado */
  #Fynia-adv-title,
  #Fynia-adv-subtitle,
  .subtitle-p-results{
    text-align: left !important;
  }
}



/* ===== Mobile (≤768px): apilar Summary y Gauge + tipografía fluida ===== */
@media (max-width: 768px){
  /* Los dos <section> uno debajo del otro */
  #Fynia-adv-bottom-row.ix-row{
    display: grid;                 /* sobreescribe el layout horizontal */
    grid-template-columns: 1fr;    /* una sola columna */
    gap: 12px;
  }

  /* Que cada tarjeta ocupe todo el ancho disponible */
  #Fynia-adv-bottom-row .ix-card{
    width: 100%;
  }

  /* Títulos dentro de cada tarjeta (h4) — escala suave */
  #Fynia-adv-bottom-row .ix-card h4{
    font-size: clamp(16px, 4.8vw, 20px);
    line-height: 1.25;
    margin: 0;
    text-align: center;              /* consistente con el resto del copy en móvil */
  }

  /* Párrafo largo del summary — más compacto en móvil */
  #Fynia-adv-bottom-row .final-insights{
    font-size: clamp(13px, 3.8vw, 16px);
    line-height: 1.5;
    margin: 8px 0 0 0;
    text-align: left;
  }

  /* Nota bajo el gauge */
  #Fynia-adv-bottom-row .ix-note-center{
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.4;
    margin-top: 8px;
    text-align: center;            /* esta sí centrada por intención del diseño */
  }

  /* El SVG del gauge se adapta al ancho del móvil sin deformarse */
  #Fynia-adv-bottom-row .ix-gauge svg{
    width: 100%;
    max-width: 220px;              /* límite razonable en móviles */
    height: auto;
    display: block;
    margin: 0 auto;                /* centrado del gauge */
  }
}

/* Mobile (≤768px): cada card con su altura, sin “igualar” */
@media (max-width: 768px){
  #Fynia-adv-bottom-row.ix-row{
    display: grid;                 /* ya lo tienes para apilar */
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;            /* evita estirar a la misma altura */
    grid-auto-rows: auto;          /* no fuerces 1fr en filas */
  }

  /* Anula alturas igualadas heredadas */
  #Fynia-adv-bottom-row .ix-card{
    height: auto !important;
    min-height: auto !important;   /* o 'unset' si prefieres */
    align-self: start;             /* nada de stretch */
  }
}






























/* ===== Mini-tablas: por defecto ocultas (desktop usa la tabla grande) ===== */
#loan-mini-tables-11{ display:none; }

/* Cuando el JS termina, ocultamos la tabla grande SOLO en ≤1024px */
@media (max-width: 1024px){
  body.mini-tables-ready #loan-comparison-table-11{ display:none; }

  body.mini-tables-ready #loan-mini-tables-11{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr)); /* tablet: 2 col */
    gap:12px;
    padding-inline:15px;   /* aire lateral mínimo */
    margin-top:10px;
  }
}

/* Móvil: 1 columna por legibilidad */
@media (max-width: 768px){
  body.mini-tables-ready #loan-mini-tables-11{
    grid-template-columns: 1fr;
  }
}

/* ===== Estilo de cada mini-tabla ===== */
.mini-table-11{
  width:100%;
  border:1px dashed #ccc;
  border-radius:0px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}

/* Cabecera (1ª fila completa) con color solicitado */
.mini-table-11 thead th{
  background: rgb(245, 248, 244);   /* <— pedido #1 */
  font-weight:600;
  text-align:center;
  padding:10px 12px;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height:1.25;
  font-family: Outfit, Arial;
}

/* Celdas del cuerpo */
.mini-table-11 tbody td{
  padding:10px 12px;
  border-bottom:1px dashed #e5e7eb;
  vertical-align:top;
}
.mini-table-11 tbody tr:last-child td{ border-bottom:0; }

/* Columna izquierda: alternativa (chip coloreado) */
.mini-table-11 .alt-cell{ width:42%; }
.mini-table-11 .alt-chip{
  display:inline-block;
  padding:6px 8px;
  border-radius:4px;
  font-size: clamp(18px, 1.4vw, 20px);
  line-height:1.2;
  font-family: Outfit, Arial;
}

/* Columna derecha: valor principal + sublíneas (compactas) */
.mini-table-11 .val-cell{ width:58%; }
.mini-table-11 .val-main{
  font-size: clamp(20px, 1.8vw, 24px);
  line-height:1.25;
  font-weight:600;
  font-family: Outfit, Arial;
  text-align: right;
}
.mini-table-11 .val-sub{
  display:block;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height:1.25;
  opacity:.9;
  margin-top:4px;
  text-align: right;
  font-family: Outfit, Arial;
  font-weight: 500;
}

/* Chips por alternativa (mismos colores de tu tabla) */
.alt-baseline{ background:#30313C; color:#fff; }
.alt-basic   { background:#e0e0e0; color:#000; }
.alt-standard{ background:#AED6F1; color:#000; }
.alt-premium { background:#A3E4D7; color:#000; }
.alt-ideal   { background:#82E0AA; color:#000; }
.alt-quick   { background:#F7DC6F; color:#000; }
.alt-max     { background:#F1948A; color:#000; }



/* Subtexto que sea porcentaje → verde */
.mini-table-11 .val-sub.val-pct{
  color: #00b86b;
  font-weight: 600; /* opcional, para mejor lectura */
}

/* Ideal en Efficiency Ratio y Payment Efficiency → verde */
.mini-table-11[data-metric="efficiency-ratio"] tr.row-variant-ideal .val-main,
.mini-table-11[data-metric="payment-efficiency"] tr.row-variant-ideal .val-main{
  color: #00b86b;
  font-weight: 600;
}



/* ===================== TABLET (≤1024px) ===================== */
@media (max-width: 1024px){
  /* Contenedor principal centrado y con aire lateral simétrico */
  #child-end.unique-container-xyz123{
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 2 columnas en tablet */
    gap: 16px;
    justify-content: center;          /* centra la grilla si no ocupa todo el ancho */
    justify-items: center;            /* centra los hijos en su celda */
    align-items: center;
    margin-inline: auto;              /* centra el bloque respecto a la ventana */
    padding-inline: 15px;             /* 15px laterales mínimos */
    box-sizing: border-box;
    width: 100%;
    
  }

  /* Imagen centrada y fluida */
  #child-end #child-left img{
    display: block;
    margin-inline: auto;              /* centra la imagen */
    width: 100%;
    max-width: 560px;                 /* límite visual opcional */
    height: auto;
    object-fit: contain;
  }

  /* Texto y botones centrados */
  #child-end #child-right{
    width: 100%;
    text-align: center;               /* centra el texto */
  }
  #child-end #end-example-p{
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1.45;
    margin: 0 0 12px 0;
  }
  #child-end .hero-buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;          /* centra los botones */
  }
  #child-end .hero-buttons .btn{
    flex: 0 1 auto;
    min-width: min(240px, 100%);
  }
}

/* ===================== MOBILE (≤768px) ===================== */
@media (max-width: 768px){
  #child-end.unique-container-xyz123{
    grid-template-columns: 1fr;
  }
  #child-end #end-example-p{
    font-size: clamp(13px, 3.8vw, 16px);
    line-height: 1.5;
    width: 100%;
  }
  #child-end .hero-buttons .btn{
    width: 100%;                      /* botones a ancho completo en móviles pequeños */
  }
}

/* ===================== MOBILE PEQUEÑO (≤480px) ===================== */
@media (max-width: 480px){
  #child-end .hero-buttons{ gap: 8px; }
}

/* Mantén SIEMPRE un gutter mínimo de 15px entre #child-end y los bordes del viewport */
#child-end.unique-container-xyz123{
  box-sizing: border-box;
  /* centra y garantiza 15px por lado: 100% - 30px */
  width: min(100% - 30px, 1320px);
  margin-inline: auto;
}





/* Desktop (>= 1025px): 30% */
@media (min-width: 1025px) {
  .ix-gauge .circular-chart {
    width: 30%;
    min-width: 180px;
  }
}
















/* =================== MODAL A PRUEBA DE OVERFLOW =================== */
/* 1) Por defecto NO ocupa layout (aunque otra regla intente mostrarlo) */
#confirm-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none !important; /* ⬅️ clave: invisible y sin ocupar ancho/alto */
  background: rgba(0,0,0,.45);
  box-sizing: border-box;
  overscroll-behavior: contain;
}

/* 2) Cuando está activo, centrado y sin desbordar */
#confirm-modal.active{
  display: flex !important;             /* ⬅️ centrado con flex */
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 4vw, 24px);      /* respiración sin romper el viewport */
}

/* Caja de contenido del modal */
#modal-content{
  background: #fff;
  width: min(640px, 100%);              /* nunca más ancho que el viewport */
  max-width: 100%;
  max-height: calc(100dvh - 2 * clamp(10px, 4vw, 24px));
  /* 100dvh evita bugs de 100vh en móviles */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  overflow: auto;                        /* si hay mucho contenido, scroll interno */
  padding: 24px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  word-break: break-word;                /* por si hay tokens largos */
  overflow-wrap: anywhere;
}

/* Tipografía */
#modal-content h2{
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  margin: 0 0 8px 0;
}
#modal-content p{
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.45;
  margin: 6px 0;
}

/* Botonera */
#modal-content .modal-buttons{
  display: flex;
  gap: 10px;
  /*justify-content: flex-end;*/
  margin-top: 16px;
}
#modal-content .modal-buttons button{
  padding: 10px 14px;
  border-radius: 8px;
  font-family: Outfit, Arial, sans-serif;
  font-weight: 500;
  cursor: pointer;
}
#modal-submit{ background:#00b86b; color:#fff; border:1px solid #00b86b; }
#modal-submit:hover{ background:#000; border-color:#000; }
#modal-cancel, #modal-ok{ background:#fff; color:#000; border:1px dashed #ccc; }
#modal-cancel:hover, #modal-ok:hover{ background: rgb(245,248,244); border-color:#000; }

/* Tablet/Mobile ajustes */
@media (max-width: 1024px){
  #modal-content{ width: min(560px, 100%); }
}
@media (max-width: 768px){
  #modal-content{
    width: 100%;
    border-radius: 10px;
    padding: 18px;
  }
  #modal-content .modal-buttons{
    flex-direction: column;
    align-items: stretch;
  }
  #modal-content .modal-buttons button{ width: 100%; }
}

/* Bloquear scroll del body cuando el modal está abierto */
body.modal-open{ overflow: hidden; }

/* Extra: si alguna otra parte del sitio causa scroll horizontal en móvil,
   recortamos el overflow X solo en pantallas pequeñas para evitar “huecos”. */
@media (max-width: 768px){
  html, body{ overflow-x: clip; } /* fallback compatible: usa hidden si tu navegador no soporta clip */
}




/* Texto que escala con el ancho de la ventana */
.subtitle-p{
  font-size: clamp(14px, 1.8vw, 18px); /* min 14px, crece con 1.8vw, max 18px */
  line-height: 1.45;
}












/* Sticky footer *sólo* dentro de .page-sticky-27 */
.page-sticky-27{
  min-height: 100svh;        /* alto mínimo = alto de la ventana (seguro en móviles) */
  display: flex;
  flex-direction: column;
}

.page-sticky-27 > .site-footer-27{
  margin-top: auto;          /* empuja el footer al fondo cuando hay poco contenido */
  flex-shrink: 0;
  width: 100%;
}













/* ===== Loading Overlay — FULL CSS ===== */
#loading-overlay{
  position: fixed;
  inset: 0;
  display: none;                 /* oculto por defecto */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background: rgba(0,0,0,.45);
  z-index: 99999;
  padding: 16px;
  color: #fff;
  text-align: center;
}

#loading-overlay.active{ 
  display: flex; 
}

/* Spinner: grande y responsivo (desktop/tablet/móvil) */
#loading-overlay .spinner{
  width: clamp(72px, 10vw, 128px);
  height: clamp(72px, 10vw, 128px);
  border: clamp(4px, 1vw, 6px) solid rgba(255,255,255,.35);
  border-top-color: #00b86b;
  border-radius: 50%;
  animation: spin .9s linear infinite;
}

/* Mensaje: responsivo + fade suave entre frases */
#loading-overlay .loading-msg{
  font-size: clamp(14px, 2.4vw, 20px);
  line-height: 1.35;
  max-width: 28ch;
  opacity: 1;
  transition: opacity .35s ease;
  will-change: opacity;
}
#loading-overlay .loading-msg.is-fading{
  opacity: 0;
}

@keyframes spin{ 
  to { transform: rotate(360deg); } 
}

/* Respeta “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  #loading-overlay .spinner{ animation: none; }
  #loading-overlay .loading-msg{ transition: none; }
}

/* Evita scroll de fondo mientras el overlay está activo */
body.loading-active{ 
  overflow: hidden; 
}


/* ── Loader: más contraste y legibilidad ─────────────────────────── */
#loading-overlay{
  /* antes: rgba(0,0,0,.45) */
  background: rgba(0,0,0,.78) !important;     /* fondo más opaco */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);                  /* sutil blur si el navegador lo soporta */
}

#loading-overlay .loading-msg{
  /* mantiene blanco, agrega sombra para contraste en fondos claros */
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
}

#loading-overlay .spinner{
  /* anillo menos “lavado” para que destaque sobre el fondo oscuro */
  border-color: rgba(255,255,255,.28);
  border-top-color: #00b86b;                   /* mantiene el acento Fynia */
}







/* Barra solo con el logo centrado */
.navbar-logo-only {
  height: 80px;                /* pon aquí la misma altura que tu navbar original */
  display: flex;
  align-items: center;         /* centra verticalmente */
  justify-content: center;     /* centra horizontalmente */
}

/* Enlace del logo */
.navbar-logo-only__link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Imagen del logo */
.navbar-logo-only__img {
  max-height: 40px;            /* ajusta al tamaño que uses en la otra navbar */
  display: block;
}








/* Contenedor principal */
.access-token-container {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;            /* centrado horizontal */
  padding: 32px 24px;
  border: 1px dashed #ccc;
  background-color: #F5F8F4;
  box-sizing: border-box;
  text-align: center;
}

/* Título */
.access-token-title {
  margin: 0 0 24px;
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 600;
  font-family: Outfit, Arial;
}

/* Caja blanca del token */
.access-token-box {
  width: 100%;
  max-width: 480px;             /* tamaño estable, no depende de % */
  margin: 0 auto 24px;
  padding: 20px 24px;
  border: 1px dashed #ccc;
  background-color: #ffffff;
  box-sizing: border-box;
}

.access-token-box-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;                    /* espacio entre texto y botón */
}

/* Token */
.access-token-code {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;          /* una línea en pantallas amplias */
}

/* Botón copiar */
.access-token-copy-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #F5F8F4;
  cursor: pointer;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.access-token-copy-icon {
  font-size: 20px;
  line-height: 1;
}

/* Textos con check verde */
.access-token-info {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 6px 0;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 300;
  text-align: left;
}

/* Icono de check */
.access-token-check {
  color: #28a745;
  font-size: 1.1em;
  line-height: 1.2;
}

/* Texto de ayuda final */
.access-token-help {
  margin-top: 24px;
  font-size: clamp(14px, 1.9vw, 18px);
  font-weight: 300;
  text-align: center;
}

/* Enlace de correo */
.access-token-help a {
  color: inherit;
  text-decoration: underline;
}

/* --------- RESPONSIVE --------- */

/* Tablet: ajustamos padding, NO agrandamos el contenedor */
@media (max-width: 1024px) {
  .access-token-container {
    padding: 28px 20px;
  }

  .access-token-box {
    padding: 18px 20px;
  }
}

/* Protección para que el texto nunca tape el botón */
@media (max-width: 900px) {
  .access-token-box-inner {
    flex-wrap: wrap;            /* permite salto de línea */
    justify-content: center;
  }

  .access-token-code {
    text-align: center;
    white-space: normal;        /* ahora sí puede partirse */
    word-break: break-all;      /* por si el token no tiene espacios */
  }

  .access-token-info {
    text-align: center;
  }
}

/* Móviles: caja casi a ancho completo y botón algo más pequeño */
@media (max-width: 600px) {
  .access-token-container {
    margin: 24px auto;
    padding: 24px 16px;
  }

  .access-token-box {
    max-width: 100%;
  }

  .access-token-copy-btn {
    width: 36px;
    height: 36px;
  }
}

/* Móviles muy pequeños: texto arriba, botón abajo */
@media (max-width: 420px) {
  .access-token-box-inner {
    flex-direction: column;
    align-items: center;
  }

  .access-token-copy-btn {
    width: 32px;
    height: 32px;
  }
}


.access-token-copy-feedback {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 300;
  color: #00b86b;         /* verde de Fynia o similar */
  min-height: 1em;        /* reserva espacio aunque no haya texto */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.access-token-copy-feedback--visible {
  opacity: 1;
}


/* --------- MODAL COPY FEEDBACK --------- */

.copy-modal-overlay {
  position: fixed;
  inset: 0;                          /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.35);   /* fondo semi-transparente */
  opacity: 0;
  pointer-events: none;              /* no bloquea clicks cuando está oculto */
  transition: opacity 0.25s ease-in-out;
  z-index: 9999;
}

/* Cuando está visible, sí recibe eventos y se ve */
.copy-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Caja del modal centrada EXACTAMENTE en pantalla */
.copy-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background: #ffffff;
  padding: 18px 28px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  max-width: 360px;
  width: 90%;
  text-align: center;
}

/* Texto más grande y claro */
.copy-modal__text {
  margin: 0;
  font-size: 20px;        /* subimos el tamaño del texto */
  font-weight: 500;
  color: #00b86b;         /* verde Fynia, cambia si prefieres otro */
}




/* Footer fijo solo en pantallas grandes (desktop) */
@media screen and (min-width: 992px) {
  .site-footer-27--fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: 1320px;

    z-index: 100;
  }
}

/* Footer en pantallas pequeñas (mobile / tablet) */
@media screen and (max-width: 991px) {
  .site-footer-27--fixed-bottom {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

  


/* Versión más angosta del botón, solo para ciertas páginas */
.submit-button-24--narrow {
  max-width: 260px;   /* antes era 80% del contenedor */
  width: auto;        /* que se adapte al contenido + padding */
}

















/* ===========================
   PAYMENT ERROR PAGE
   =========================== */

.payment-error-container {
  width: 100%;
  max-width: 800px;
  margin: 40px auto 32px;
  padding: 0 24px;
  box-sizing: border-box;
  text-align: center;
  font-family: Outfit, Arial, sans-serif;
}

.payment-error-box {
  margin: 0 auto;
  padding: 24px 28px;
  max-width: 520px;
  background-color: #F5F8F4;
  border: 1px dashed #e0e0e0;
  border-radius: 0px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* Cabecera: icono rojo + texto */
.payment-error-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.payment-error-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffe5e5;
  color: #e53935;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}

.payment-error-title {
  font-size: 18px;
  font-weight: 600;
}

/* Texto y lista de motivos */
.payment-error-body-heading {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
}

.payment-error-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 300;
}

.payment-error-list li + li {
  margin-top: 4px;
}

/* Botones TRY AGAIN / HOME */
.payment-error-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.payment-error-btn {
  min-width: 140px;
  padding: 0.55rem 1.4rem;
  border-radius: 0px;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Outfit, Arial, sans-serif;
}

/* Botón principal (verde) */
.payment-error-btn--primary {
  background-color: #00c853;
  color: #ffffff;
}

.payment-error-btn--primary:hover {
  background-color: #000000;
  color: #ffffff;
}

/* Botón secundario (borde verde) */
.payment-error-btn--secondary {
  background-color: #ffffff;
  color: #00c853;
  border-color: #00c853;
}

.payment-error-btn--secondary:hover {
  background-color: #00c853;
  color: #ffffff;
}

/* Texto de ayuda debajo */
.payment-error-help {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 300;
}

.payment-error-help a {
  color: inherit;
  text-decoration: underline;
}

/* Pequeños ajustes responsive */
@media (max-width: 768px) {
  .payment-error-container {
    margin-top: 24px;
    padding: 0 16px;
  }

  .payment-error-box {
    padding: 20px 18px;
  }
}











.token-error-list {
  margin-top: 8px;
  padding-left: 0;
  list-style: none;
  color: #c0392b; /* rojo discreto */
  font-size: 0.875rem;
}

.token-error {
  margin: 0;
}