.section-leasing{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 15px 0;
}

.hsfc-RichText {
 color: rgb(234, 78, 50)!important;
}

.container-leasing{
  max-width: 1500px;
  width: 95%;
  height: auto;
  position: relative;
  margin: 0 auto;
}

.img-fondo-leasing{
  max-width: 1500px;
  width: 100%;
  height: 487px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  position: relative;
  top: 0px;
  z-index: 1;
}

.img-fondo-leasing img{
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  display: block;  
}

.img-fondo-leasing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 54, 72, 0.75) 10%, rgba(15, 54, 72, 0) 75%);
  mix-blend-mode: multiply;
  opacity: 1;
  z-index: 1;
}


.separador{ 
 display: flex;
 gap: 20px;
 width: 100%;
 padding: 0 60px;
 z-index: 5;
 position: relative;
 margin-top: -50px;

}



/* Formulario de contacto */
.tarjet-form-leasing{
  width: 535px;
  max-height: 600px;
  height: 100%;
  opacity: 1;
  border-radius: 15px;
  border-width: 1px;
  padding: 40px 56px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
}

.header-form-leasing{
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
}

.title-form-leasing {
  width: 100%;
  height: 47px;
}

.title-form-leasing p{
  font-family: "Futura PT";
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  color: #74D3D2;
}

.line-cuadrado {
    border: 1px solid #74D3D2;
    border-radius: 30px;
    height: 1000px;
    max-width: 1000px;
    position: relative;
    /*top: -1390px;*/
    top: -1200px;
    width: 100%;
    margin: 0 auto;
    z-index: 1;
    margin-bottom: -1000px;
}

/* Tarjeta financiero */
.tarjet-financiero{
  width: 753px;
  max-height: 1300px;
  height: 100%;
  border-radius: 20px;
  padding: 60px 30px;
  gap: 40px;
  z-index: 5;
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 
    15px 10px 39px 0px rgba(0, 0, 0, 0.15),
    59px 41px 72px 0px rgba(0, 0, 0, 0.13),
    132px 92px 97px 0px rgba(0, 0, 0, 0.08),
    235px 164px 115px 0px rgba(0, 0, 0, 0.02),
    367px 257px 125px 0px rgba(0, 0, 0, 0);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  
}

.title-fn{
  width: 100%;
}

.title-fn p{
  font-family: "Futura PT";
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.description-financiero {
  width: 100%;
  height: auto;
  font-family: "Futura PT-BOOK";
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.description-financiero span{
  font-family: "Futura PT";
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  color: #74D3D2;
}

.description-financiero  li {
  margin-left: 20px;
  margin-bottom: 10px;
}
.benef {
  width: 100%

}

.benef h3{
  font-family: "Futura PT-BOOK";
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  color: #74D3D2;
}


.beneficios{
  width: 100%;
  gap: 20px;
  display: flex;
  flex-direction: column;
  padding-left: 30px;
}

.beneficios .lista-beneficios {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.item-bf {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 24px;
  font-family: 'Futura PT';
  line-height: 1;
  letter-spacing: 0;
}

.item-bf svg{
  max-width: 20px;
  height: 20px;
  fill: #74D3D2;
  flex-shrink: 0;
}

.item-bf p{
  color: #fff;
  font-size: 24px;
  font-family: 'Futura PT';
}

/* ===== Carrusel imagen footer financiero ===== */

.img-footer-financiero{
  width: 100%;
  height: 450px;
  border-radius: 10px;
  overflow: hidden;
  display: block;              /* el track será el que sea flex */
}

/* Track que se desliza de lado a lado */
.img-footer-financiero .footer-track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;  /* efecto de deslizamiento */
}

/* Cada slide ocupa el 100% del ancho del contenedor */
.img-footer-financiero .footer-slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* (Opcional) bajar un poco la altura en móviles */
@media (max-width: 768px){
  .img-footer-financiero{
    height: 320px;
  }
}


.submitted-message{
  display: none;
}

.submitted-message .title .description{
  text-align: center;
}


/* Reset general */
.inputs-form *,
.inputs-form *::before,
.inputs-form *::after {
  box-sizing: border-box !important;
}

/* Contenedor del formulario generado por {% form %} */
.inputs-form form,
.inputs-form .hs-form,
.inputs-form form[id*="hsForm"],
.inputs-form div[class*="hs_"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fieldsets */
.inputs-form fieldset,
.inputs-form .hs-form fieldset {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}




/* Cada campo del formulario (filas) */
.inputs-form .hs-form-field,
.inputs-form .field,
.inputs-form .hs_firstname,
.inputs-form .hs_lastname,
.inputs-form .hs_email,
.inputs-form .hs_phone,
.inputs-form .hs_mobilephone,
.inputs-form .hs_numero_de_telefono,
.inputs-form .hs_mensaje,
.inputs-form .hs_area_interes,
.inputs-form .hs_profesion_oficio,
.inputs-form .hs_input,
.inputs-form div[class^="hs_"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 70px !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Labels */
.inputs-form label,
.inputs-form .hs-form-field > label,
.inputs-form label.hs-form-label {
  width: 100% !important;
  font-family: "Futura PT", sans-serif !important;
  font-size: 16px !important;
  font-weight: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  display: block !important;
}





/* Span requerido */
.inputs-form .hs-form-required {
  color: #fff !important;
}

/* Contenedor de inputs */
.inputs-form .input,
.inputs-form .hs-input {
  width: 100% !important;
  margin: 0 !important;
}

/* TODOS los tipos de inputs */
.inputs-form input,
.inputs-form input[type="text"],
.inputs-form input[type="email"],
.inputs-form input[type="tel"],
.inputs-form input[type="number"],
.inputs-form input[type="file"],
.inputs-form textarea,
.inputs-form select,
.inputs-form input.hs-input,
.inputs-form textarea.hs-input,
.inputs-form select.hs-input {
  width: 100% !important;
  max-width: 100% !important;
  height: 40px !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  border-radius: 5px !important;
  border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #fff !important;
  font-family: "Futura PT-BOOK", sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Textarea específico */
.inputs-form textarea,
.inputs-form textarea.hs-input {
  min-height: 40px !important;
  height: auto !important;
  resize: vertical !important;
  padding-top: 10px !important;
}

/* Placeholder */
.inputs-form input::placeholder,
.inputs-form textarea::placeholder,
.inputs-form select::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: "Futura PT-BOOK", sans-serif !important;
  font-size: 16px !important;
  opacity: 1 !important;
}

/* Focus */
.inputs-form input:focus,
.inputs-form textarea:focus,
.inputs-form select:focus {
  border-color: rgba(255, 255, 255, 0.6) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Select con flecha personalizada */
.inputs-form select,
.inputs-form select.hs-input {
  cursor: pointer !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 18px !important;
  background-color: transparent !important;
  padding-right: 45px !important;
}

.inputs-form select option {
  background: #0f3648 !important;
  color: #fff !important;
  padding: 10px !important;
}

/* Contenedor del botón submit */
.inputs-form .hs-submit,
.inputs-form .hs_submit,
.inputs-form .actions {
  width: 100% !important;
  height: 55px !important;
  position: relative !important;
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  text-align: right !important;
  display: block !important;
}

/* Botón de envío */
.inputs-form .hs-button,
.inputs-form input[type="submit"],
.inputs-form button[type="submit"] {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  left: auto !important;
  width: 180px !important;
  height: 40px !important;
  padding: 10px 30px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 1) !important;
  background-color: rgba(255, 255, 255, 1) !important;
  color: #000 !important;
  font-family: "Futura PT", sans-serif !important;
  font-size: 16px !important;
  font-weight: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  text-transform: none !important;
  display: inline-block !important;
}

.inputs-form .hs-button:hover,
.inputs-form input[type="submit"]:hover,
.inputs-form button[type="submit"]:hover {
  background: #ea4e32 !important;
  background-color: #ea4e32 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* Mensajes de error */
.inputs-form .hs-error-msg,
.inputs-form .hs-error-msgs,
.inputs-form .hs-error-msgs label {
  color: #ff6b6b !important;
  font-size: 13px !important;
  font-family: "Futura PT-BOOK", sans-serif !important;
  margin-top: 5px !important;
  display: block !important;
}

.inputs-form .hs-form-field.error input,
.inputs-form .hs-form-field.error textarea,
.inputs-form .hs-form-field.error select {
  border-color: #ff6b6b !important;
}

/* Checkbox y radio */
.inputs-form input[type="checkbox"],
.inputs-form input[type="radio"] {
  width: auto !important;
  height: auto !important;
  margin-right: 10px !important;
}

.inputs-form .hs-form-booleancheckbox label,
.inputs-form .hs-form-radio label {
  display: flex !important;
  align-items: flex-start !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Ocultar rich text */
.inputs-form .hs-richtext {
  margin-top: 10px !important;
}

.inputs-form .hs-richtext p {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
}


/* Estilizar el input file */
.inputs-form input[type="file"] {
  width: 100% !important;
  height: 40px !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 16px !important;
}

/* Ocultar el texto "No file chosen" */
.inputs-form input[type="file"]::file-selector-button {
  display: none !important;
}

/* Personalizar con webkit */
.inputs-form input[type="file"]::-webkit-file-upload-button {
  display: none !important;
}

/* Personalizar con -moz */
.inputs-form input[type="file"]::-moz-file-upload-button {
  display: none !important;
}

/* Estilo del contenedor cuando tiene input file */
.inputs-form input[type="file"] {
  position: relative !important;
  padding-left: 50px !important;
}

/* Crear el icono + usando background */
.inputs-form input[type="file"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 385px center !important;
  background-size: 20px !important;
}



/* ========================================
   MEDIA QUERIES 
   ======================================== */

  /* Altura automática para description */
  .description-financiero {
    height: auto;
  }
  
  /* Ajuste de fuentes proporcional */
  .title-fn p {
    font-size: 32px;
  }
  
  .description-financiero,
  .description-financiero span {
    font-size: 20px;
    line-height: 1.2;
  }
  
  .item-bf,
  .item-bf p {
    font-size: 20px;
  }
  
  .img-footer-financiero {
    height: 380px;
  }
  
  .title-form-leasing p {
    font-size: 22px;
  }
  
  /* HubSpot Forms */
  .inputs-form label,
  .inputs-form label.hs-form-label {
    font-size: 15px !important;
  }
  
  .inputs-form input,
  .inputs-form textarea,
  .inputs-form select,
  .inputs-form input::placeholder,
  .inputs-form textarea::placeholder {
    font-size: 15px !important;
  }
  
  .inputs-form .hs-button,
  .inputs-form input[type="submit"],
  .inputs-form button[type="submit"] {
    font-size: 15px !important;
  }
}

/* Ajustes adicionales para 1300px - 1024px */
@media (max-width: 1300px) {
  .container-leasing {
    height: auto;
  }
  
  .img-fondo-leasing {
    height: 450px;
  }
  
  .tarjet-financiero {
    padding: 45px 22px;
    gap: 35px;
  }
  
  .tarjet-form-leasing {
    padding: 38px 40px;
  }
  
  .title-fn p {
    font-size: 30px;
  }
  
  .description-financiero,
  .description-financiero span {
    font-size: 19px;
  }
  
  .item-bf,
  .item-bf p {
    font-size: 19px;
  }
  
  .item-bf svg {
    max-width: 18px;
    height: 18px;
  }
  
  .img-footer-financiero {
    height: 350px;
  }
  
  .title-form-leasing p {
    font-size: 21px;
  }
  
  /* HubSpot Forms */
  .inputs-form label,
  .inputs-form label.hs-form-label {
    font-size: 14px !important;
  }
  
  .inputs-form input,
  .inputs-form textarea,
  .inputs-form select,
  .inputs-form input::placeholder,
  .inputs-form textarea::placeholder {
    font-size: 14px !important;
  }
}

/* 1024px - Cambio a static: Tarjeta 100% + Formulario 50% */
@media (max-width: 1024px) {
  .container-leasing {
    height: auto;
  }
  
  .img-fondo-leasing {
    height: 420px;
  }
  
  /* Tarjeta financiera - 100% ancho, static */
  .tarjet-financiero {
    position: static;
    width: 100%;
    height: auto;
    padding: 45px 30px;
    gap: 30px;
  }
  
  /* Formulario - 50% ancho, static */
  .tarjet-form-leasing {
    position: static;
    width: 60%;
    height: auto;
    padding: 35px 35px;
    margin: 0 auto 30px;
  }
  
  .title-fn p {
    font-size: 28px;
  }
  
  .description-financiero,
  .description-financiero span {
    font-size: 18px;
    line-height: 1.3;
  }
  
  .item-bf,
  .item-bf p {
    font-size: 18px;
  }
  
  .img-footer-financiero {
    height: 320px;
  }
  
  .beneficios {
    padding-left: 25px;
  }
  
  .title-form-leasing p {
    font-size: 20px;
  }
  
  /* HubSpot Forms */
  .inputs-form .hs-button,
  .inputs-form input[type="submit"],
  .inputs-form button[type="submit"] {
    width: 160px !important;
    font-size: 14px !important;
    padding: 10px 25px !important;
  }
}

/* Ajustes para 900px */
@media (max-width: 900px) {
  .section-leasing {
    padding: 40px 0;
  }
  
  .img-fondo-leasing {
    height: 380px;
  }
  
  .tarjet-financiero {
    padding: 40px 28px;
    gap: 28px;
  }
  
  .tarjet-form-leasing {
    width: 60%;
    padding: 32px 30px;
  }
  
  .title-fn p {
    font-size: 26px;
  }
  
  .description-financiero,
  .description-financiero span {
    font-size: 17px;
  }
  
  .item-bf,
  .item-bf p {
    font-size: 17px;
  }
  
  .img-footer-financiero {
    height: 300px;
  }
}


/* Columna única: Imagen → Tarjeta → Formulario */
@media (max-width: 850px) {
  
  .separador{
    flex-direction: column;
    padding: 0;
    transform: translateY(-109px); /* Ajusta este valor según necesites */
    margin-bottom: -109px; /* Compensar para no dejar espacio vacío */
  }
  
  .section-leasing {
    padding: 35px 0;
  }
  
  .container-leasing {
    width: 92%;
    height: auto;
  }
  
  /* Imagen */
  .img-fondo-leasing {
    position: static;
    width: 100%;
    max-width: 600px;
    height: 320px;
    margin: 0 auto 35px;
  }
  
  .img-fondo-leasing::after{
    opacity:0;
  }
  
  /* Tarjeta financiera - 100% */
  .tarjet-financiero {
    position: static;
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 40px 30px;
    gap: 30px;
    margin: 0 auto 35px;
  }
  
  /* Formulario - 100% */
  .tarjet-form-leasing {
    position: static;
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 35px 30px;
    margin: 0 auto;
  }
  
  .title-fn p {
    font-size: 30px;
    line-height: 1.2;
  }
  
  .description-financiero,
  .description-financiero span {
    font-size: 18px;
    line-height: 1.4;
  }
  
  .item-bf,
  .item-bf p {
    font-size: 18px;
    line-height: 1.3;
  }
  
  .item-bf svg {
    max-width: 18px;
    height: 18px;
  }
  
  .img-footer-financiero {
    height: 280px;
  }
  
  .beneficios {
    padding-left: 25px;
  }
  
  .title-form-leasing p {
    font-size: 22px;
  }
  
  /* HubSpot Forms */
  .inputs-form label,
  .inputs-form label.hs-form-label {
    font-size: 15px !important;
  }
  
  .inputs-form input,
  .inputs-form textarea,
  .inputs-form select,
  .inputs-form input::placeholder,
  .inputs-form textarea::placeholder {
    font-size: 15px !important;
    padding: 10px 20px !important;
  }
  
  .inputs-form .hs-button,
  .inputs-form input[type="submit"],
  .inputs-form button[type="submit"] {
    width: 170px !important;
    font-size: 15px !important;
    padding: 11px 28px !important;
  }
  
  .inputs-form .hs-form-field,
  .inputs-form div[class^="hs_"] {
    min-height: 70px !important;
  }
}

  
  @media( max-width: 620px){
  .container-leasing{
/*     min-height: 1950px; */
  }

}

/* 480px - Móviles medianos */
@media (max-width: 490px) {
  .section-leasing {
    padding: 30px 0;
  }
  
  .container-leasing {
    width: 90%;
/*     min-height: 1900px; */
  }
  
  .img-fondo-leasing {
    height: 280px;
    margin-bottom: 30px;
  }
  
  .tarjet-financiero {
    padding: 35px 25px;
    gap: 25px;
    margin-bottom: 30px;
  }
  
  .tarjet-form-leasing {
    padding: 30px 25px;
  }
  
  .title-fn p {
    font-size: 26px;
  }
  
  .description-financiero,
  .description-financiero span {
    font-size: 16px;
    line-height: 1.4;
  }
  
  .item-bf,
  .item-bf p {
    font-size: 16px;
  }
  
  .item-bf svg {
    max-width: 16px;
    height: 16px;
  }
  
  .img-footer-financiero {
    height: 240px;
  }
  
  .beneficios {
    padding-left: 20px;
    gap: 18px;
  }
  
  .title-form-leasing p {
    font-size: 20px;
  }
  
  /* HubSpot Forms */
  .inputs-form label,
  .inputs-form label.hs-form-label {
    font-size: 14px !important;
  }
  
  .inputs-form input,
  .inputs-form textarea,
  .inputs-form select,
  .inputs-form input::placeholder,
  .inputs-form textarea::placeholder {
    font-size: 14px !important;
    padding: 9px 18px !important;
  }
  
  .inputs-form .hs-button,
  .inputs-form input[type="submit"],
  .inputs-form button[type="submit"] {
    width: 160px !important;
    font-size: 14px !important;
    padding: 10px 25px !important;
  }
  
  .inputs-form .hs-form-field,
  .inputs-form div[class^="hs_"] {
    min-height: 65px !important;
  }
}

/* 400px - Móviles pequeños */
@media (max-width: 400px) {
  
  .separador{
/*     top: 175px; */
  }
  .container-leasing {
    width: 90%;
/*     min-height: 1850px; */
  }
  
  .img-fondo-leasing {
    height: 250px;
    margin-bottom: 25px;
  }
  
  .tarjet-financiero {
    padding: 30px 20px;
    gap: 22px;
    margin-bottom: 25px;
  }
  
  .tarjet-form-leasing {
    padding: 28px 22px;
  }
  
  .title-fn p {
    font-size: 24px;
  }
  
  .description-financiero,
  .description-financiero span {
    font-size: 15px;
  }
  
  .item-bf,
  .item-bf p {
    font-size: 15px;
  }
  
  .item-bf svg {
    max-width: 15px;
    height: 15px;
  }
  
  .img-footer-financiero {
    height: 220px;
  }
  
  .beneficios {
    padding-left: 18px;
  }
  
  .title-form-leasing p {
    font-size: 19px;
  }
  
  /* HubSpot Forms */
  .inputs-form label,
  .inputs-form label.hs-form-label {
    font-size: 13px !important;
  }
  
  .inputs-form input,
  .inputs-form textarea,
  .inputs-form select,
  .inputs-form input::placeholder,
  .inputs-form textarea::placeholder {
    font-size: 13px !important;
    padding: 8px 16px !important;
  }
  
  .inputs-form .hs-button,
  .inputs-form input[type="submit"],
  .inputs-form button[type="submit"] {
    width: 150px !important;
    font-size: 13px !important;
    padding: 9px 22px !important;
  }
  
  .inputs-form .hs-form-field,
  .inputs-form div[class^="hs_"] {
    min-height: 62px !important;
  }
}
  
@media(max-width: 360px){
  .container-leasing{
/*     min-height: 1980px; */
  }
}
  
/* 320px - Móviles muy pequeños */
@media (max-width: 320px) {
  .container-leasing{
/*     min-height: 1870px; */
  }
  
  
  .img-fondo-leasing {
    height: 220px;
    margin-bottom: 20px;
    border-radius: 15px;
  }
  
  .tarjet-financiero {
    padding: 25px 18px;
    gap: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
  }
  
  .tarjet-form-leasing {
    padding: 25px 20px;
    border-radius: 12px;
  }
  
  .title-fn p {
    font-size: 22px;
  }
  
  .description-financiero,
  .description-financiero span {
    font-size: 14px;
  }
  
  .item-bf,
  .item-bf p {
    font-size: 14px;
  }
  
  .img-footer-financiero {
    height: 200px;
  }
  
  .title-form-leasing p {
    font-size: 18px;
  }
  
  /* HubSpot Forms */
  .inputs-form .hs-button,
  .inputs-form input[type="submit"],
  .inputs-form button[type="submit"] {
    width: 140px !important;
    font-size: 12px !important;
  }
}
/* 1) El botón NO debe ser absolute */
.inputs-form .hs-button,
.inputs-form input[type="submit"],
.inputs-form button[type="submit"]{
  position: static !important;           /* quita absolute */
  right: auto !important;
  top: auto !important;
  left: auto !important;
  min-width: 180px !important;           /* opcional */
}

/* 2) El contenedor del botón al final, alineado a la derecha */
.inputs-form .hs-submit,
.inputs-form .hs_submit,
.inputs-form .actions{
  position: static !important;           /* el padre ya no “posiciona” hijos */
  display: flex !important;
  justify-content: flex-end !important;  /* botón a la derecha */
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  margin: 16px 0 0 0 !important;         /* separarlo del campo anterior */
  padding: 0 !important;
  text-align: right !important;
}

/* 3) Evitar cortes del formulario: quita límites artificiales */
.tarjet-form-leasing{
  max-height: none !important;           /* antes 600px; podía cortar contenido */
  height: auto !important;
}

/* 4) (Opcional) En mobile el botón a ancho completo */
@media (max-width: 480px){
  .inputs-form .hs-submit,
  .inputs-form .hs_submit,
  .inputs-form .actions{
    justify-content: stretch !important;
  }
  .inputs-form .hs-button,
  .inputs-form input[type="submit"],
  .inputs-form button[type="submit"]{
    width: 100% !important;
  }
}
/* El contenedor de ambas tarjetas */
.separador{
  align-items: flex-start !important;   /* NO estirar las columnas */
}

/* La tarjeta del formulario debe tomar solo la altura de su contenido */
.tarjet-form-leasing{
  height: auto !important;
  max-height: none !important;
  align-self: flex-start !important;    /* por si algún override la estiraba */
}

/* (Opcional) Asegura que la izquierda tampoco fuerce alturas raras */
.tarjet-financiero{
  height: auto !important;
  /* max-height: 1300px;  // si te estorba, quítala o déjala */
}
/* Menos aire arriba y entre campos */
.header-form-leasing{
  margin-bottom: 8px !important;          /* antes 20px */
}

.title-form-leasing p{
  margin: 0 !important;                    /* quita espacio extra del título */
}

/* Campos más pegados */
.inputs-form .hs-form-field{
  min-height: 58px !important;             /* antes 70px */
  margin: 0 0 12px 0 !important;           /* antes 20px */
}

/* Etiquetas más compactas */
.inputs-form label,
.inputs-form .hs-form-field > label,
.inputs-form label.hs-form-label{
  margin-bottom: 6px !important;           /* antes 10px */
}

/* Mensaje de error más cercano al input */
.inputs-form .hs-error-msg,
.inputs-form .hs-error-msgs,
.inputs-form .hs-error-msgs label{
  margin-top: 4px !important;
}

/* Menos padding interno de la tarjeta del formulario */
.tarjet-form-leasing{
  padding: 28px 56px !important;           /* antes 40px 56px */
  height: auto !important;                 /* garantiza que se encoja */
}
/* 1) El encabezado del form casi sin aire */
.tarjet-form-leasing .header-form-leasing{
  margin-bottom: 6px !important;
}

/* 2) Quitar margen/padding que HubSpot mete arriba del form */
.tarjet-form-leasing .inputs-form .hs-form,
.tarjet-form-leasing .inputs-form form[id*="hsForm"]{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) Quitar margen/padding del primer fieldset */
.tarjet-form-leasing .inputs-form .hs-form fieldset:first-of-type{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 4) Quitar margen superior del PRIMER campo (fila) */
.tarjet-form-leasing .inputs-form .hs-form .hs-form-field:first-of-type{
  margin-top: 0 !important;
}

/* 5) Compactar todas las filas para que la tarjeta se encoja */
.tarjet-form-leasing .inputs-form .hs-form .hs-form-field{
  margin: 8px 0 10px 0 !important;   /* menos aire entre filas */
  min-height: 50px !important;
}

/* 6) Labels e inputs un poco más compactos (opcional) */
.tarjet-form-leasing .inputs-form label{
  margin-bottom: 4px !important;
}
.tarjet-form-leasing .inputs-form input,
.tarjet-form-leasing .inputs-form select,
.tarjet-form-leasing .inputs-form textarea{
  height: 36px !important;
  padding: 8px 14px !important;
}
/* ========== SERVICIOS: mejora de UI en móvil ========== */
@media (max-width: 480px){

  /* La tarjeta del form más cómoda y sin tope de altura */
  .tarjet-form-leasing{
    padding: 18px 16px !important;
    border-radius: 14px !important;
    max-height: none !important;
  }

  .title-form-leasing p{
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  /* Filas compactas */
  .tarjet-form-leasing .inputs-form .hs-form .hs-form-field{
    margin: 10px 0 !important;
    min-height: auto !important;
  }

  /* Inputs full-width, buena área táctil */
  .tarjet-form-leasing .inputs-form input,
  .tarjet-form-leasing .inputs-form select,
  .tarjet-form-leasing .inputs-form textarea{
    width: 100% !important;
    height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }
  .tarjet-form-leasing .inputs-form textarea{
    min-height: 90px !important;
  }

  /* Teléfono: país + número en la misma línea, tamaños cómodos */
  .tarjet-form-leasing .inputs-form .hs-form .hs_phone .input,
  .tarjet-form-leasing .inputs-form .hs-form .hs_numero_de_telefono .input{
    display: grid !important;
    grid-template-columns: 95px 1fr !important; /* ancho del selector de país */
    gap: 10px !important;
    align-items: center !important;
  }
  .tarjet-form-leasing .inputs-form .hs-form .hs_phone select,
  .tarjet-form-leasing .inputs-form .hs-form .hs_numero_de_telefono select{
    width: 100% !important;
  }

  /* Botón 100% ancho y sin posición absoluta */
  .tarjet-form-leasing .inputs-form .hs-submit,
  .tarjet-form-leasing .inputs-form .actions{
    height: auto !important;
    margin-top: 12px !important;
    text-align: center !important;
  }
  .tarjet-form-leasing .inputs-form .hs-button{
    position: static !important;
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
  }

  /* Errores legibles pero compactos */
  .tarjet-form-leasing .inputs-form .hs-error-msg,
  .tarjet-form-leasing .inputs-form .hs-error-msgs label{
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
  }
}

/* En pantallas MUY pequeñas, apila país y número en dos filas */
@media (max-width: 360px){
  .tarjet-form-leasing .inputs-form .hs-form .hs_phone .input,
  .tarjet-form-leasing .inputs-form .hs-form .hs_numero_de_telefono .input{
    grid-template-columns: 1fr !important;
  }
}
/* ==== Desktop: compactar tarjeta derecha ==== */
.separador{
  padding: 0 24px !important;                 /* menos margen lateral del bloque */
  align-items: flex-start !important;
}

.tarjet-form-leasing{
  padding: 22px 28px !important;              /* antes 40px 56px */
  max-height: none !important;
  height: auto !important;
  align-self: flex-start !important;
}

.header-form-leasing{ margin-bottom: 6px !important; }

.inputs-form .hs-form-field{
  margin: 8px 0 10px !important;              /* menos separación entre filas */
  min-height: 52px !important;
}
.inputs-form label{ margin-bottom: 4px !important; }

.inputs-form input,
.inputs-form select,
.inputs-form textarea{
  height: 38px !important;
  padding: 8px 14px !important;
}
.inputs-form textarea{ min-height: 70px !important; }

.inputs-form .actions{
  margin-top: 12px !important;
  position: static !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* ==== Móvil: aún más compacto y cómodo ==== */
@media (max-width: 900px){
  .separador{ padding: 0 !important; }
}

@media (max-width: 600px){
  .tarjet-form-leasing{
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .inputs-form .hs-form-field{
    margin: 10px 0 !important;
    min-height: auto !important;
  }
  .inputs-form input,
  .inputs-form select{
    height: 48px !important;
    padding: 12px 14px !important;
  }
  .inputs-form textarea{
    min-height: 90px !important;
    padding: 12px 14px !important;
  }
  .inputs-form .actions{
    justify-content: stretch !important;      /* botón a ancho completo */
    margin-top: 12px !important;
  }
  .inputs-form .hs-button{
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    position: static !important;
  }
}
/* --- Compacta y evita estiramiento --- */
.separador{
  align-items: flex-start !important;   /* NO estires las columnas */
  padding: 0 24px !important;           /* antes 0 60px */
}

.tarjet-form-leasing{
  height: auto !important;              /* quita el estiramiento */
  max-height: none !important;
  padding: 16px 20px !important;        /* antes 40px 56px */
  align-self: flex-start !important;    /* por si algún override insiste */
}

/* Botón y contenedor sin espacios raros */
.inputs-form .actions,
.inputs-form .hs-submit,
.inputs-form .hs_submit{
  position: static !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;              /* antes 55px */
  margin: 8px 0 0 !important;
  padding: 0 !important;
}

.inputs-form .hs-button{
  position: static !important;          /* quita absolute */
  width: 180px !important;
  height: 40px !important;
}

/* Móvil: sin padding extra y botón full-width */
@media (max-width: 600px){
  .separador{ padding: 0 !important; }
  .tarjet-form-leasing{ padding: 14px !important; }
  .inputs-form .actions{ justify-content: stretch !important; }
  .inputs-form .hs-button{
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
  }
}
/* Quitar el padding interno que mete HubSpot (hsfc) */
.tarjet-form-leasing .inputs-form .hsfc-Step__Content,
.tarjet-form-leasing .inputs-form div[class*="hsfc-Step__Content"]{
  padding: 10px !important;
}

/* Por si tu formulario es multistep y usa “Screen/Body/Step” */
.tarjet-form-leasing .inputs-form .hsfc-Form__body,
.tarjet-form-leasing .inputs-form .hsfc-Screen__Content,
.tarjet-form-leasing .inputs-form .hsfc-Step{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Compensar con un espaciamiento mínimo entre filas (opcional) */
.tarjet-form-leasing .inputs-form .hs-form-field{
  margin: 8px 0 !important;
}
/* ==== 1) Layout responsive sólido (grid) ==== */
.separador{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) 520px; /* texto -> 1fr, form ~520 */
  gap: 24px !important;
  padding: 0 20px !important;
  align-items:start !important;
}
.tarjet-financiero{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  min-width:0 !important; /* evita overflow por contenidos largos */
  padding: 40px 28px !important;
}
.tarjet-form-leasing{
  width:auto !important;
  max-width:520px !important;
  height:auto !important;
  padding: 22px 24px !important;
  align-self:start !important;
}

/* Desktop ancho: deja respirar el form un poco más */
@media (min-width: 1400px){
  .separador{ grid-template-columns: minmax(0,1fr) 560px; }
  .tarjet-form-leasing{ max-width:560px !important; }
}

/* <=1024px: apilar en una columna */
@media (max-width: 1024px){
  .separador{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }
  .tarjet-form-leasing{ max-width: 100% !important; }
}

/* <=600px: compactar tipografías/paddings */
@media (max-width: 600px){
  .tarjet-financiero{ padding: 22px 16px !important; }
  .tarjet-form-leasing{ padding: 16px !important; }
}

/* ==== 2) Tablas dentro de la descripción: full-width y legibles ==== */
.description-financiero table{
  width:100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important; /* reparte columnas */
  margin: 10px 0 !important;
  font-size: 16px !important;
}
.description-financiero th,
.description-financiero td{
  border: 1px solid rgba(255,255,255,.35) !important;
  padding: 8px 10px !important;
  vertical-align: top !important;
  word-break: break-word !important; /* evita desbordes */
}
.description-financiero thead th{
  font-weight: 700 !important;
}
@media (max-width: 600px){
  .description-financiero table{ font-size: 14px !important; }
  .description-financiero th, .description-financiero td{ padding: 6px 8px !important; }
}
/* Si la tabla es MUY ancha, permite scroll local, no en toda la página */
.description-financiero .tabla-wrap,
.description-financiero table:where(:not(.no-scroll)){
  display:block !important;
  overflow-x:auto !important;
}

/* ==== 3) Botón del formulario y campos sin estirar ==== */
.inputs-form .actions,
.inputs-form .hs-submit,
.inputs-form .hs_submit{
  position: static !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  width:100% !important;
  height:auto !important;
  margin-top: 12px !important;
}
.inputs-form .hs-button{
  position: static !important;
  min-width: 180px !important;
  height: 44px !important;
}
@media (max-width: 480px){
  .inputs-form .actions{ justify-content: stretch !important; }
  .inputs-form .hs-button{ width:100% !important; }
}

/* ==== 4) Línea decorativa sin provocar scroll ni empujar layout ==== */
.line-cuadrado{
  position:absolute !important;
  inset: auto 20px 0 20px !important;  /* pegada a los lados internos */
  top: calc( var(--line-top, -120px) ); /* puedes ajustar con --line-top */
  height: 900px !important;            /* alto razonable; no suma al flujo */
  pointer-events:none !important;
  margin:0 !important;
  max-width:none !important;
  z-index: 0 !important;
}
.container-leasing{ position:relative !important; overflow-x:hidden !important; }

/* ==== 5) Hard-stops que causaban overflow (elimina topes) ==== */
.tarjet-form-leasing,
.tarjet-financiero{ max-height:none !important; }
/* ——— Tablas SIN scroll interno, que crezcan en altura ——— */
.description-financiero .tabla-wrap,
.description-financiero table {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;      /* <– quita el scroll interno */
}

/* Por si HubSpot/inline styles inyectan alturas */
.description-financiero [style*="height"],
.description-financiero [style*="max-height"] {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Asegura que el contenedor no meta scroll */
.tarjet-financiero,
.description-financiero {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Estética y legibilidad de la tabla (opcional) */
.description-financiero th,
.description-financiero td{
  border: 1px solid rgba(255,255,255,.35) !important;
  padding: 8px 10px !important;
  vertical-align: top !important;
  word-break: break-word !important;
}

/* Si en móviles muy angostos llegara a desbordar a lo ancho,
   permite solo scroll horizontal del bloque (no vertical interno) */
@media (max-width: 480px){
  .description-financiero table{
    display: block !important;         /* mantiene filas completas */
    overflow-x: auto !important;       /* solo horizontal si es necesario */
    overflow-y: visible !important;    /* nunca scroll vertical interno */
  }
}
/* =========================================================
   SCROLL HORIZONTAL INTERNO PARA TODAS LAS TABLAS
   DE .description-financiero (desktop y responsive)
   ========================================================= */

.description-financiero {
  overflow-x: visible !important;
}

/* La tabla puede ser más ancha que el contenedor y scrollea en X */
.description-financiero table {
  display: block !important;         /* permite overflow */
  width: auto !important;            /* NO la fuerces a 100% */
  min-width: 100% !important;        /* al menos el ancho del contenedor */
  max-width: none !important;
  table-layout: auto !important;     /* deja que el contenido defina el ancho */
  border-collapse: collapse !important;
  margin: 10px 0 !important;

  overflow-x: auto !important;       /* scroll horizontal local */
  overflow-y: visible !important;    /* sin scroll vertical interno */
}

/* Celdas legibles y sin “aplastar” columnas */
.description-financiero th,
.description-financiero td {
  white-space: nowrap !important;    /* mantiene cada celda en una línea */
  word-break: normal !important;     /* quita el break-word agresivo */
  border: 1px solid rgba(255,255,255,.35) !important;
  padding: 8px 10px !important;
  vertical-align: top !important;
}

/* Opcional: tamaño de fuente un poco menor en móvil */
@media (max-width: 600px) {
  .description-financiero table {
    font-size: 14px !important;
  }
  .description-financiero th,
  .description-financiero td {
    padding: 6px 8px !important;
  }
}
/* ================================
   SCROLL HORIZONTAL PARA TABLAS
   DE .description-financiero
   ================================ */

/* El contenedor del texto/tabla scrollea en X */
.description-financiero{
  width: 100% !important;
  overflow-x: auto !important;     /* scroll horizontal local */
  overflow-y: visible !important;
}

/* Las tablas pueden ser más anchas que el contenedor */
.description-financiero table{
  display: table !important;
  width: max-content !important;   /* ancho según columnas */
  min-width: 100% !important;      /* que nunca sea más chica que el contenedor */
  max-width: none !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  white-space: nowrap !important;  /* no parte el texto en varias líneas */
}

/* Estética de celdas (puedes ajustar valores) */
.description-financiero th,
.description-financiero td{
  border: 1px solid rgba(255,255,255,.35) !important;
  padding: 8px 10px !important;
  vertical-align: top !important;
}
/* ===========================
   TABLAS: DESKTOP (sin scroll)
   =========================== */

.description-financiero{
  width: 100% !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.description-financiero table{
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  white-space: normal !important;      /* texto normal en desktop */
}

.description-financiero th,
.description-financiero td{
  border: 1px solid rgba(255,255,255,.35) !important;
  padding: 8px 10px !important;
  vertical-align: top !important;
}


/* ===========================
   TABLAS: MÓVIL (con scroll)
   =========================== */
@media (max-width: 768px){   /* puedes bajar a 600px si quieres */

  .description-financiero{
    overflow-x: auto !important;       /* scroll horizontal local */
    overflow-y: visible !important;
  }

  .description-financiero table{
    display: table !important;
    width: max-content !important;     /* ancho según columnas */
    min-width: 100% !important;        /* al menos el ancho del contenedor */
    max-width: none !important;
    table-layout: auto !important;
    white-space: nowrap !important;    /* no se rompen las celdas */
  }

  .description-financiero th,
  .description-financiero td{
    padding: 6px 8px !important;
    font-size: 14px !important;
  }
}
/* ===== Mensaje de agradecimiento HUBSPOT – módulo leasing ===== */

/* 1) Ocultar el mensaje personalizado que está DESPUÉS del form */
.section-leasing .tarjet-form-leasing > .submitted-message{
  display: none !important;
}

/* 2) Mostrar el mensaje que pinta HubSpot DENTRO del formulario */
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message{
  display: block !important;
  margin-top: 16px !important;
  text-align: left !important;
}

/* 3) Título "Formulario enviado" (naranja, grande) */
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message h1,
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message h2,
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message h3,
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message strong,
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message b{
  color: rgb(234, 78, 50) !important;
  font-family: "Futura PT", sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  margin: 0 0 4px 0 !important;
}

/* 4) Texto "Gracias por enviar el formulario" */
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message p,
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message span{
  color: rgb(234, 78, 50) !important;
  font-family: "Futura PT-BOOK", sans-serif !important;
  font-size: 16px !important;
  margin: 0 !important;
}
/* ===== Mensaje de agradecimiento HUBSPOT – módulo leasing ===== */

/* 1) Ocultar el mensaje personalizado que está DESPUÉS del form */
.section-leasing .tarjet-form-leasing > .submitted-message{
  display: none !important;
}

/* 2) Mostrar el mensaje que pinta HubSpot DENTRO del formulario */
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message{
  display: block !important;
  margin-top: 16px !important;
  text-align: left !important;
}

/* 3) Título "Formulario enviado" (naranja, grande) */
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message h1,
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message h2,
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message h3,
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message strong,
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message b{
  color: #EA4E32 !important;                     /* mismo naranja */
  font-family: "Futura PT", sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  margin: 0 0 4px 0 !important;
}

/* 4) Texto secundario del mensaje */
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message p,
.section-leasing .tarjet-form-leasing .inputs-form .submitted-message span{
  color: #EA4E32 !important;
  font-family: "Futura PT-BOOK", sans-serif !important;
  font-size: 16px !important;
  margin: 0 !important;
}
/* === Altura única para los campos del formulario leasing === */

/* Alto “base” de los campos (ajusta aquí si lo quieres más alto/bajo) */
.section-leasing .tarjet-form-leasing{
  --leasing-input-height: 43px;   /* prueba 38px, 42px, etc. si quieres */
}

/* Todos los inputs y selects del formulario */
.section-leasing .tarjet-form-leasing .inputs-form input,
.section-leasing .tarjet-form-leasing .inputs-form select{
  height: var(--leasing-input-height) !important;
  line-height: var(--leasing-input-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Botón del código de país (GT) del campo teléfono */
.section-leasing .tarjet-form-leasing .inputs-form
.hs-form-field[data-hs-fieldtype="phone"] .input button,
.section-leasing .tarjet-form-leasing .inputs-form
.hs-form-field[data-hs-field-type="phone"] .input button,
.section-leasing .tarjet-form-leasing .inputs-form
.hs_phone .input button{
  height: var(--leasing-input-height) !important;
  line-height: var(--leasing-input-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}