/* Alto del navbar fijo (lo determinan el logo y los botones; medido en el navegador: 58,6 / 66,2 / 72,1 px).
   Se redondea hacia abajo para que lo que va debajo quede apenas bajo el navbar, sin un filete por subpíxeles.
   Si cambia el header, actualizar estos valores. */
:root {
  --navbar-alto: 58px;
}
@media (min-width: 768px) {
  :root {
    --navbar-alto: 66px;
  }
}
@media (min-width: 1200px) {
  :root {
    --navbar-alto: 72px;
  }
}
html {
  scrollbar-gutter: stable;
  background-color: #19233E;
}
/* Fuente base: sin esto, enlaces, botones, listas y formularios caen en la fuente del sistema de Bootstrap. */
body {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
body.modal-open {
  padding-right: 0 !important;
}
.josefin-sans, h1, h2, h3, h4, h5 {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
h4 {
  font-weight: 400;
}
p {
  font-family: "Inter", Arial, Helvetica, sans-serif;
}
/*p {font-size: 1.2em;}*/

/*COLORS*/
/*Background*/
.bg-azul {
  background-color: #19233E;
}
.bg-celeste {
  background-color: #EBF2FF;
}
.bg-naranjo {
  background-color: #E9540D;
}
.bg-gris-claro {
  background-color: #F9F9F9;
}
.bg-blanco {
  background-color: #fff;
}
.bg-azul-secundario {
  background-color: #5268A4;
}
/*Text*/
.text-blanco {
  color: #ffff;
}
.text-azul {
  color: #19233E;
}
.text-celeste {
  color: #EBF2FF;
}
.text-naranjo {
  color: #E9540D;
}
.text-gris {
  color: #5E5E5E;
}
.title-text {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.2em;
  color: #ffffff;
  text-shadow: 0 0 3px rgba(31, 37, 66, 0.5);
}
.title-text span {
  background-color: #E9540D;
  color: #ffff;
}
.frase-action {
  font-size: 2em;
  font-weight: 620;
  line-height: 1em;
  text-align: center;
}
.frase-action span {
  color: #E9540D;
}
.hero-content {
  height: 400px;
  background-color: #253151;
  margin-bottom: 2%;
  display: flex;
  align-items: center;
}
.hero-content .box-head,
.hero-content .box-text {
  margin-top: 0;
}
.hero-content--somos .box-text {
  margin-top: 50px;
}
/* Hero con video (Hazte cliente, Centro de ayuda, Simulador) o imagen (Quiénes somos) de fondo:
   mantiene los 400px de alto del hero */
.hero-content--video,
.hero-content--imagen {
  position: relative;
  overflow: hidden;
  background-color: #19233E;
}
.hero-content--video {
  background: #19233E url("../imagenes/hero-home-poster.webp") center / cover no-repeat;
}
.hero-content__video,
.hero-content__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Quiénes somos: encuadre más alto para no cortar la cabeza en escritorio; en pantallas angostas
   (bajo ~1100px se recorta a los lados) deja el rostro completo, algo a la derecha del centro */
.hero-content--somos .hero-content__imagen {
  object-position: 60% 20%;
}
.hero-content--video::after,
.hero-content--imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(25, 35, 62, 0.4); /* mismo velo #19233E del Home y Factoring */
  z-index: 1;
  pointer-events: none;
}
.hero-content--video > .container,
.hero-content--imagen > .container {
  position: relative;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .hero-content__video {
    display: none; /* queda la imagen de respaldo como fondo */
  }
}
@media (max-width: 767.98px) {
  .hero-content--simular {
    margin-top: 35px;
  }
}
@media (max-width: 767.98px) {
  .navbar-brand img.d-xl-none {
    width: 120px;
  }
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler {
  border-color: none;
}
.navbar-actions-mobile {
  align-items: center;
  gap: 0.5rem;
}
/* Botones del navbar móvil (bajo 1200px): "Hazte cliente" e "Ingresar" de escritorio en versión compacta,
   con el mismo relleno al pasar o enfocar (ver .nav-cta-cliente y .btn-ingresar).
   "Hazte cliente": bajo 360px el texto no cabe junto al logo y el menú, y queda el ícono (persona con "+",
   lucide user-plus) en un círculo naranjo, con el texto solo para lectores de pantalla.
   "Ingresar": solo desde 576px, donde cabe con holgura; más angosto, sigue en el menú desplegable. */
.navbar-cta-movil,
.navbar-cta-movil:focus,
.navbar-ingresar-movil,
.navbar-ingresar-movil:focus {
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border: 2px solid;
  border-radius: 40px;
  background-repeat: no-repeat;
  background-position: right center;
  background-origin: border-box;
  background-size: 0% 100%;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-size 0.35s ease-out, color 0.35s ease-out;
}
.navbar-cta-movil:hover,
.navbar-cta-movil:focus-visible,
.navbar-ingresar-movil:hover,
.navbar-ingresar-movil:focus-visible {
  background-position: left center;
  background-size: 100% 100%;
  transition: background-size 0.15s ease-out, color 0.15s ease-out;
}
.navbar-cta-movil:focus-visible,
.navbar-ingresar-movil:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}
.navbar-cta-movil {
  display: inline-flex;
  border-color: #E9540D;
  background-color: #E9540D;
  background-image: linear-gradient(#fff, #fff);
  color: #fff;
}
.navbar-cta-movil:hover,
.navbar-cta-movil:focus-visible {
  color: #bf3f04;
}
.navbar-ingresar-movil {
  display: none;
  border-color: #fff;
  background-color: #fff;
  background-image: linear-gradient(#5268A4, #5268A4);
  color: #19233E;
}
.navbar-ingresar-movil:hover,
.navbar-ingresar-movil:focus-visible {
  color: #fff;
}
@media (min-width: 576px) {
  .navbar-ingresar-movil {
    display: inline-flex;
  }
}
.navbar-cta-movil__icono {
  display: none;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 359.98px) {
  .navbar-cta-movil {
    width: 40px;
    padding: 0;
  }
  .navbar-cta-movil__icono {
    display: inline-block;
  }
  .navbar-cta-movil__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .navbar-cta-movil,
  .navbar-cta-movil:hover,
  .navbar-cta-movil:focus-visible,
  .navbar-ingresar-movil,
  .navbar-ingresar-movil:hover,
  .navbar-ingresar-movil:focus-visible {
    transition: none;
  }
}
.navbar {
  position: fixed;
  width: 100%;
  z-index: 15;
  top: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.navbar .nav-link {
  color: #fff;
  font-weight: 300;
}
.box-banner {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: 0;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.box-banner picture,
.box-banner img {
  
  width: 100%;
}
/*.box-banner picture {
  display: block;
  transform: scale(1.15);
  transform-origin: top;
  will-change: transform;
}*/
@media (prefers-reduced-motion: reduce) {
  .box-banner picture {
    transform: none;
  }
}
.reveal {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-group > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-group > .reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal-group > .reveal:nth-child(4) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Sin efecto de entrada en celular: el bloque se ve desde el inicio, sin esperar el scroll (formulario de Hazte cliente). */
@media (max-width: 767.98px) {
  .js .reveal.reveal--sin-movil {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.box-text {
  z-index: 10;
  margin-top: 100px;
}

.box-form {
  z-index: 8;
}
.box-2 {
  margin-top: 28%;
  color: #19233E;
}
.box-2 h2 {
  font-weight: 620;
}
.card-step .step-number {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
  font-size: 1.4em;
  line-height: 1;
}
.card-step p {
  font-size: 1em;
  font-family: "Inter", Arial, Helvetica, sans-serif;
}
.card-step-b .step-number {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
  font-size: 1.4em;
  line-height: 1;
}
.card-step-b p {
  font-size: 1em;
  font-family: "Inter", Arial, Helvetica, sans-serif;
}
.card-box {
  padding: 25px;
}
.requisitos li {
  list-style: none;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.como-funciona {
  width: 70%;
  position: static;
  z-index: 14;
  top: 50%;
}
@media (max-width: 767.98px) {
  .como-funciona {
    margin-left: 0;
    margin-right: 0;
  }
}
.bullets li {
  background-color: #10172990;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 3px rgba(31, 37, 66, 0.9);
}
.hero-subtitle {
  font-size: 1.1rem;
  line-height: 1.5;
  text-shadow: 0 0 3px rgba(31, 37, 66, 0.5);
  max-width: 40em;
}
.hero-cta.btn-action-2 {
  width: auto;
  display: inline-block;
  text-align: center;
  margin-bottom: 0;
}
.cta-evaluacion {
  border-radius: 20px;
  padding: 3em 1.5em;
}
.cta-evaluacion__subtitle {
  max-width: 50em;
  font-size: 1.2em;
  font-weight: 300;
}
.cta-evaluacion .btn-action-2 {
  margin-bottom: 0;
}
.mt-lg-6 {
  margin-top: 6rem !important;
}
/*Buttons*/
.btn-action {
  color: #E9540D;
  border: 3px solid #E9540D;
  font-weight: 500;
  background-color: transparent;
  padding: 5px 10px;
  border-radius: 40px;
  font-size: 1em;
  text-decoration: none;
}
.btn-action:hover {
  background-color: #E9540D;
  color: #ffff;
  transition: 0.15s;
}
.btn-action-2 {
  width: 250px;
  display: block;
  color: #ffff;
  font-weight: 500;
  background-color: #E9540D;
  padding: 10px 20px;
  border-radius: 40px;
  font-size: 1.2em;
  text-decoration: none;
  margin-bottom: 30px;
}
.btn-action-2:hover {
  background-color: #bf3f04;
  transition: 0.15s;
}
/*Formulario*/
.form-financia {
  background-color: #E0E5ED;
  padding: 2em;
  border-radius: 15px;
}
.form-financia h3 {
  letter-spacing: -1px;
}
.form-financia button {
  background-color: #E9540D;
  color: #ffff;
  width: 100%;
  padding: 10px;
  border-radius: 40px; /* como los botones de Contacto y Hazte cliente */
  font-size: 1.2em;
  font-weight: 500;
  border: 3px solid #E9540D;
}
/* Botón Enviar (.btn-primary): Bootstrap le daba su azul en hover, foco, clic y mientras envía
   (deshabilitado). Se redefinen sus variables con el naranjo oscuro de los CTA del sitio. */
.form-financia .btn-primary {
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bf3f04;
  --bs-btn-hover-border-color: #bf3f04;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #bf3f04;
  --bs-btn-active-border-color: #bf3f04;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #E9540D;
  --bs-btn-disabled-border-color: #E9540D;
  --bs-btn-focus-shadow-rgb: 233, 84, 13;
}
.opiniones h3 {
  font-size: 1.3em;
  font-weight: 650;
}
.opiniones-swiper {
  padding: 0 3rem 3rem;
}
.opiniones-swiper .swiper-slide {
  height: auto;
}
.opiniones-swiper .swiper-button-prev,
.opiniones-swiper .swiper-button-next {
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
  border: none;
  color: #19233E;
  --swiper-navigation-size: 1.5rem;
  --swiper-navigation-color: #19233E;
  transition: opacity .2s ease, transform .2s ease;
  opacity: 0.6;
}
.opiniones-swiper .swiper-button-prev:hover,
.opiniones-swiper .swiper-button-next:hover {
  opacity: 1;
  transform: scale(1.15);
}
.opiniones-swiper .swiper-button-prev::after,
.opiniones-swiper .swiper-button-next::after {
  font-weight: 700;
}
.opiniones-swiper .swiper-pagination {
  bottom: 0;
}
.opiniones-swiper .swiper-pagination-bullet {
  background-color: #19233E;
  opacity: 0.4;
}
.opiniones-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

.preguntas .accordion-button {
  font-size: 1.25rem;
}

/*footer*/
.footer-financia {
  background-color: #19233E;
  padding: 3em;
  color: #ffff;
}
.footer-logos-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: nowrap;
  margin-top: 3rem;
}
@media (min-width: 992px) {
  .footer-logos-row {
    justify-content: flex-start;
  }
}
.footer-cmf-corfo {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  width: auto;
  margin-top: 0;
}
@media (min-width: 992px) {
  .footer-logos-row {
    margin-top: 176px;
  }
}
.footer-financia .menu-ft p{
  font-size: 0.9em;
  font-family: "Inter", Arial, Helvetica, sans-serif;
   color: #b0b0b0;
}
.footer-financia .menu-ft ul{
  list-style: none;
  padding-left:0;
  color: #b0b0b0;
}
.footer-financia .menu-ft li{
  font-size: 0.9em;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  margin-bottom: 5px;;
}
.footer-financia .menu-ft a:hover{
  color: #ff7f44;
  cursor: pointer;
}
.footer-financia .menu-ft a{
  color: #b0b0b0;
  text-decoration: none;
}
/* Canales de atención: los enlaces van en lista para no quedar mezclados con texto (accesibilidad),
   con el mismo tamaño y espaciado que tenían como líneas sueltas */
.footer-financia .menu-ft .footer-contacto {
  margin-bottom: 0;
}
.footer-financia .menu-ft .footer-contacto li {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 4px;
}
.sub-footer {
  background-color: #101729;
  padding: 15px;
}
.transform-lg-scale-1 {
  transform: initial;
}
/*Quienes Somos*/
/* "Somos Financia Capital" es H2 (la página tiene un solo H1, en el hero); conserva el aspecto que tenía como H1. */
.somos-fc__title {
  font-weight: 620;
  font-size: 2em;
  line-height: 1em;
}
/* Mismo escalado responsive que .frase-action, para que coincida con títulos como "Conoce nuestra historia". */
@media (min-width: 768px) {
  .somos-fc__title {
    font-size: 1.8em;
  }
}
@media (min-width: 992px) {
  .somos-fc__title {
    font-size: 2em;
  }
}
@media (min-width: 1200px) {
  .somos-fc__title {
    font-size: 2.5em;
  }
}
.somos-fc p{
  font-family: "Inter", Arial, Helvetica, sans-serif;
}
.somos-fc__lead {
  font-size: 1.3em;
  line-height: 1.4em;
}
/* Cifras de Quiénes somos (reemplazan a imagenes/datos-somos.png, 579 px): tres bloques cuadrados en L,
   con las proporciones de la imagen. Las medidas en cqi escalan con el ancho del bloque. */
.cifras {
  container-type: inline-size;
  width: 100%;
  max-width: 579px;
}
.cifras__grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25cqi;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cifra {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  padding: 23cqi 5.5cqi 0;
  border-radius: 1.1cqi;
  color: #fff;
  font-family: "Josefin Sans", sans-serif;
}
.cifra--anios { grid-column: 2; grid-row: 1; background-color: #5268A4; }
.cifra--clientes { grid-column: 1; grid-row: 2; background-color: #083368; }
.cifra--facturas { grid-column: 2; grid-row: 2; background-color: #FF6900; }
.cifra__numero {
  font-size: 10.6cqi;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.cifra__texto {
  margin-top: 1.6cqi;
  font-size: max(12px, 3.4cqi);
  line-height: 1.2;
}
/*Breakpoints*/
@media (min-width: 340px) {
  .container-sm, .container {
    max-width: 540px;
  }
  .title-text {
    font-size: 2em;
    text-align: center;
    /*text-shadow: 0 0 8px rgb(230, 237, 243);*/
  }
  .title-text span {
    text-shadow: none;
  }
  .title-text br { display: none; }
  .box-2 {
    margin-top: 0;
  }
  .box-2 h2 {
    font-size: 1.8em;
  }
  .subtitulo {
    display: none;
  }
  .btn-action {
    margin-top: 0.5em;
    background-color: #E9540D;
    color: #ffff;
  }
  .opiniones {
    border-right: 0px;
    border-radius: 10px;
    border-left: 15px solid #ffff;
    background-color: #fffdf0;
  }
  .card-step {
    border-radius:20px;
    /*border-radius: 55px 10px 10px 10px;*/
    border-right: 0px;
  }
  .opiniones p {
    font-size: 1.2em;
    margin-bottom: 0;
  }
  .box-text {
    margin-top: 5px;
    text-align: center;
  }
  .card-box {
    padding: 25px;
  }
  .como-funciona {
    width: 100%;
    position: static;
    z-index: 14;
    top: 50%;
  }
  .requisitos ul {
    padding-left: 0 !important;
  }
  .box-form-movil {
    margin-top: 30px;
  }
}
@media (min-width: 352px) {
  .box-text{
    margin-top:125px;
  }
  .navbar .nav-link {
  color: #fff;
  border-bottom: 1px solid #374775;
  padding: 20px 10px;
}
}
@media (min-width: 365px) {
  .box-form-movil {
    margin-top: 40px;
  }
  .box-text{
    margin-top:65px;
  }
}
@media (min-width: 375px) {
  .box-form-movil {
    margin-top: 40px;
  }
  .box-text{
    margin-top:175px;
  }
  .box-caracteristicas {
    margin-top:80px;
  }
}
@media (min-width: 391px) {
  .box-form-movil {
    margin-top: 100px;
  }
}
@media (min-width: 403px) {
  .box-form-movil {
    margin-top: 110px;
  }
}
/* El banner móvil es cuadrado y absoluto: crece 1px de alto por cada px de ancho,
   así que el margen de la sección siguiente debe crecer al mismo ritmo. */
@media (min-width: 412px) and (max-width: 575.98px) {
  .box-caracteristicas {
    margin-top: calc(80px + (100vw - 375px));
  }
}

@media (min-width: 425px) {  
  .box-form-movil {
    margin-top: 120px;
  }
}
@media (min-width: 435px) {  
  .box-form-movil {
    margin-top: 140px;
  }
}
@media (min-width: 450px) {
  .title-text {
    font-size: 2em;
    text-align: left;
  }
  .box-text {
    text-align: left;
  }
  .box-form-movil {
    margin-top: 160px;
  }
}
@media (min-width: 475px) {
  .box-form-movil {
    margin-top: 180px;
  }
  .navbar .nav-link {
  color: #fff;
  border-bottom: 1px solid #374775;
  padding: 20px 10px;
}
}
@media (min-width: 500px) {
  .box-form-movil {
    margin-top: 210px;
  }
}
@media (min-width: 525px) {
  .box-form-movil {
    margin-top: 230px;
  }
}
@media (min-width: 550px) {
  .box-form-movil {
    margin-top: 260px;
  }
}
@media (min-width: 576px) {
  .box-head {
    margin-top: 50px;
  }
  .navbar .nav-link {
  color: #fff;
  border-bottom: 1px solid #374775;
  padding: 20px 10px;
}
  .box-banner {
    border-radius: 0px;
    /*max-width: calc(100% - 20px);
    aspect-ratio: 1500 / 600;*/
    margin-left: auto;
    margin-right: auto;
    max-height:600px;
  }
  .title-text {
    font-size: 2em;
    text-align: left;
  }
  .box-text {
    margin-top: 20px;
    text-align: left;
  }
   .box-caracteristicas {
    margin-top:100px;
  }
  .box-2 {
    margin-top: 80px;
  }
  .card-box {
    padding: 25px;
  }
  .bullets li {
    font-size: .9em;
  }
  .frase-action {
    font-size: 2em;
  }
  .box-form-movil {
    margin-top: 280px;
  }
  .title-text br {
      display: initial;
  }
}
@media (min-width: 600px) {
  .box-2 {
    margin-top: 90px;
  }
}
@media (min-width: 645px) {
  .frase-action {
    font-size: 2em;
  }
}
@media (min-width: 650px) {
  .title-text {
    font-size: 2em;
  }
  .box-text {
    margin-top: 35px;
  }
  .box-2 {
    margin-top: 100px;
  }
}
@media (min-width: 700px) {
  .box-2 {
    margin-top: 110px;
  }
}
@media (min-width: 750px) {
  .box-2 {
    margin-top: 120px;
  }
}
@media (min-width: 768px) {
  .container-sm, .container {
    max-width: 540px;
  }
.navbar .nav-link {
  color: #fff;
  border-bottom: 1px solid #374775;
  padding: 20px 10px;
}
  .sticky-lg-top {
    top: 100px;
  }
  .title-text {
    font-size: 2.5em;
  }
  .title-text br { display: none; }
  .box-form-movil {
    margin-top: 48%;
  }
  .box-2 {
    margin-top: 70px;
  }
  .box-2 h2 {
    font-size: 1.8em;
  }
  .subtitulo {
    display: none;
  }
  .btn-action {
    margin-top: 0.5em;
    color: #E9540D;
    border: 3px solid #E9540D;
    background-color: transparent;
  }
  .opiniones {
    border-right: 0px;
    border-radius: 10px;
    border-left: 15px solid #ffff;
    background-color: #fffdf0;
  }
  .card-step {
    border-radius:20px;
    border-right: 15px solid #ffff;
  }
  .opiniones p {
    font-size: 1.2em;
    margin-bottom: 0;
  }
  .box-text {
    margin-top: 50px;
  }
   .box-caracteristicas {
    margin-top:90px;
  }
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
  .subtitulo {
    display: none;
  }
  .card-box {
    padding: 25px;
  }
  .frase-action {
    font-size: 1.8em;
  }
  .box-2 .frase-action {
    text-align: left;
  }
  .requisitos .btn-action-2 {
    margin-bottom: 3em !important;
  }
}
@media (min-width: 815px) {
  .title-text {
    font-size: 2.5em;
  }
}
@media (min-width: 800px) {
  .box-2 {
    margin-top: 90px;
  }
}
@media (min-width: 830px) {
  .box-2 {
    margin-top: 100px;
  }
}
@media (min-width: 870px) {
  .box-2 {
    margin-top: 115px;
  }
}
@media (min-width: 910px) {
  .box-2 {
    margin-top: 130px;
  }
}
@media (max-width: 1199.98px) {
  .navbar .nav-item .active {
    border-right: 3px solid #E9540D;
    padding-right: 7px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
  .box-banner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    max-height:640px;
    aspect-ratio: 1500 / 640;
  }
   .box-caracteristicas {
    margin-top:120px;
  }
  .title-text {
    font-size: 3.2em;
  }
  .title-text br { display: initial; }
  .box-2 {
    margin-top: 150px;
  }
  .subtitulo {
    display: none;
  }
  .btn-action {
    margin-top: 1em;
    display: block;
  }
  .bullets li {
    font-size: 0.8em;
  }
  .frase-action {
    font-size: 2em;
  }
  .requisitos ul {
    padding-left: 0 !important;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
  .navbar .nav-link {
  color: #fff;
  border-bottom: none;
  padding: 7px 0;
}
.navbar .nav-link:hover {
  border-bottom: 3px solid #E9540D;
}
.navbar .nav-item .active {
  border-bottom: 3px solid #E9540D;
}
  .subtitulo {
    display: block;
  }
  .box-text .subtitulo {
    margin-left: 2.5em;
    font-size: 1.4em;
  }
  .box-text {
    margin-top: 120px;
  }
   .box-caracteristicas {
    margin-top:200px;
  }
  .btn-action {
    margin-top: 1em;
  }
  .sticky-lg-top {
    top: 150px;
  }
  .box-2 {
    margin-top: 220px;
  }
  .bullets li {
    font-size: 1em;
  }
  .box-form {
    margin-top: 7%;
  }
  .frase-action {
    font-size: 2.5em;
  }
  .como-funciona {
    width: 90%;
    top: 280px;
    position: absolute;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1500px;
  }
  .box-text {
    margin-top: 140px;
  }
  .box-text .subtitulo {
    margin-left: 3em;
    font-size: 1.4em;
  }
  .box-caracteristicas {
    margin-top:210px;
  }
  .title-text {
    font-size: 4em;
  }
  .card-step {
    border-radius:20px;
    /*border-radius: 55px 10px 10px 10px;*/
    border-right: 15px solid #ffff;
  }
  .box-2 {
    margin-top: 25%;
    margin-bottom: 4rem;
  }
  .box-2 p {
    font-size: 1.1em;
    color: #5E5E5E;
    letter-spacing: -0.5px;
  }
  .box-2 h2 {
    font-size: 2.3em;
  }
  .subtitulo {
    display: block;
  }
  .btn-action {
    margin-top: 1em;
  }
  .opiniones {
    border-right: 8px solid #ffff;
    border-radius: 20px;
    background-color: #fffdf0;
  }
  .opiniones p {
    font-size: 1em;
    margin-bottom: 0;
  }
  .sticky-lg-top {
    top: 250px;
  }
  .bullets li {
    font-size: 1.3em;
  }
  .como-funciona {
    top: 45%;
  }
  .frase-action {
    font-size: 2.5em;
  }
}
/*Animations*/

#svg-exito {
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

#bg-circle-01 {
  transform: scale(0);
  animation: showUp .25s ease-in-out forwards;
}

#bg-circle-02 {
  transform: scale(0);
  animation: showUp .25s ease-in-out forwards;
  animation-delay: 0.1s;
}

#plane-01 {
  animation: flyRight 5s ease-in-out infinite;
}

#line-01 {
  opacity: 0;
  animation: drawLine 2s linear infinite, flyLine 1s linear infinite;
}

#line-02 {
  opacity: 0;
  animation: drawLine 3s linear infinite, flyLine 2s linear infinite;
  animation-delay: 0.5s;
}

#line-03 {
  opacity: 0;
  animation: drawLine 4s linear infinite, flyLine 3s linear infinite;
  animation-delay: 1s;
}

@keyframes showUp {
  0% { transform: scale(0); opacity: 0; transform-origin: center; }
  100% { transform: scale(1); opacity: 1; transform-origin: center; }
}

@keyframes drawLine {
  0% { stroke-dasharray: 0, 200; }
  50% { stroke-dasharray: 200, 200; }
  100% { stroke-dasharray: 0, 200; }
}

@keyframes flyRight {
  0% { transform: translateX(-5px) translateY(5px); }
  50% { transform: translateX(5px) translateY(-5px); }
  100% { transform: translateX(-5px) translateY(5px); }
}

@keyframes flyLine {
  0% { transform: translateX(-40px) translateY(40px); opacity: 0; }
  50% { transform: translateX(40px) translateY(-40px); opacity: 0; }
  55% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translateX(-40px) translateY(40px); opacity: 0; }
}

/*Blog / Novedades*/
/* Grid fluido: se adapta al ancho disponible sin necesitar un breakpoint por resolución. */
.blog-section {
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.ayuda-detalle-article,
.blog-detalle-article {
  padding-top: calc(clamp(2.5rem, 2rem + 2vw, 4rem) + 40px);
}
.canal-denuncias-hero {
  padding-top: calc(clamp(2.5rem, 2rem + 2vw, 4rem) - 52px);
}
.canal-denuncias-frame {
  width: 100%;
  height: 80vh;
  min-height: 600px;
  border-top: 1px solid #E9ECEF;
  border-bottom: 1px solid #E9ECEF;
}
.canal-denuncias-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.blog-filters .filtro-pill {
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  border: 2px solid #E9540D;
  color: #E9540D;
  background-color: transparent;
  border-radius: 40px;
  padding: 6px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: 0.15s;
}
.blog-filters .filtro-pill.active,
.blog-filters .filtro-pill:hover {
  background-color: #E9540D;
  color: #fff;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.blog-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(25, 35, 62, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(25, 35, 62, 0.14);
}
.blog-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #EBF2FF;
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-card__body {
  padding: 1.25rem 1.4rem 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.blog-card__tag {
  align-self: flex-start;
  background-color: #5268A4;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 12px;
  border-radius: 40px;
  margin-bottom: 0.75rem;
}
.blog-card__meta {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  color: #5E5E5E;
  margin-bottom: 0.4rem;
}
.blog-card__title {
  font-size: 1.2em;
  font-weight: 600;
  color: #19233E;
  margin-bottom: 0.6rem;
}
.blog-card__excerpt {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.95em;
  color: #5E5E5E;
  margin-bottom: 1rem;
  flex-grow: 1;
}
.blog-card__link {
  color: #E9540D;
  font-weight: 500;
  font-size: 1em;
  text-align: right;
}
.blog-card:hover .blog-card__link {
  text-decoration: underline;
}
/*Novedades (home) - grid tipo bento*/
.novedades-eyebrow {
  display: inline-block;
  background-color: #FBE0CE;
  color: #E9540D;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 6px 18px;
  border-radius: 40px;
  margin-bottom: 0.75rem;
}
.novedades-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  align-items: stretch;
}
.novedades-bento__post {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.novedades-bento__media {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: #EBF2FF;
}
.novedades-bento__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.novedades-bento__post:hover .novedades-bento__media img {
  transform: scale(1.04);
}
.novedades-bento__body {
  background-color: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(25, 35, 62, 0.06);
  transition: box-shadow 0.2s ease;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.novedades-bento__post:hover .novedades-bento__body {
  box-shadow: 0 10px 30px rgba(25, 35, 62, 0.12);
}
/* Imagen y texto quedan pegados: solo se redondean las esquinas externas del bloque. */
.novedades-bento__post > *:first-child {
  border-radius: 10px 10px 0 0;
}
.novedades-bento__post > *:last-child {
  border-radius: 0 0 10px 10px;
}
.novedades-bento__date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #E9540D;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.novedades-bento__title {
  font-size: 1.15em;
  font-weight: 650;
  color: #19233E;
  margin-bottom: 0.5rem;
}
.novedades-bento__excerpt {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.95em;
  color: #5E5E5E;
  margin-bottom: 0.75rem;
}
.novedades-bento__link {
  color: #E9540D;
  font-weight: 700;
  font-size: 0.9em;
  margin-top: auto;
}
.novedades-bento__post:hover .novedades-bento__link {
  text-decoration: underline;
}
@media (max-width: 767.98px) {
  .novedades-bento {
    grid-template-columns: 1fr;
  }
}
/* El botón "Ver todas las novedades" no debe estirarse: .btn-action se vuelve
   display:block (full width) en breakpoints >= 992px para otros usos del sitio. */
.btn-action.novedades-cta {
  display: inline-block;
  width: auto;
}
/* "Ver todas las publicaciones": mismo hover "background fill" que Hazte cliente (ver navbar), en versión
   de contorno: el relleno naranja entra por la izquierda y sale por la derecha; el texto pasa a blanco.
   Entrada 0,15 s (regla de hover) y salida 0,35 s (regla de reposo). */
.btn-action.novedades-cta,
.btn-action.novedades-cta:focus {
  background-color: transparent;
  background-image: linear-gradient(#E9540D, #E9540D);
  background-repeat: no-repeat;
  background-position: right center;
  background-origin: border-box;
  background-size: 0% 100%;
  color: #E9540D;
  transition: background-size 0.35s ease-out, color 0.35s ease-out;
}
.btn-action.novedades-cta:hover,
.btn-action.novedades-cta:focus-visible {
  background-color: transparent;
  background-position: left center;
  background-size: 100% 100%;
  color: #fff;
  transition: background-size 0.15s ease-out, color 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn-action.novedades-cta,
  .btn-action.novedades-cta:hover,
  .btn-action.novedades-cta:focus-visible {
    transition: none;
  }
}
.modal-hazte-cliente__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.15s;
  z-index: 2;
}
.modal-hazte-cliente__close:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 575.98px) {
  .modal-hazte-cliente__close {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
  }
}
/* Quiénes somos: línea de tiempo (nodos circulares con icono sobre una línea vertical) */
.timeline {
  --timeline-nodo: clamp(52px, 15vw, 64px);
  position: relative;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  top: calc(var(--timeline-nodo) / 2);
  bottom: 0;
  left: calc(var(--timeline-nodo) / 2);
  width: 10px;
  border-radius: 5px;
  background-color: #E4E9F5;
  transform: translateX(-50%);
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--timeline-nodo) 1fr;
  column-gap: 1.25rem;
  align-items: start;
  padding-bottom: 1.75rem;
}
.timeline__nodo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--timeline-nodo);
  height: var(--timeline-nodo);
  border-radius: 50%;
  color: #fff;
}
.timeline__nodo svg {
  width: 42%;
  height: 42%;
}
.timeline__nodo--azul {
  background-color: #19233E;
}
.timeline__nodo--azul-secundario {
  background-color: #5268A4;
}
.timeline__nodo--celeste {
  background-color: #7FCDE3;
  color: #19233E;
}
.timeline__nodo--naranjo {
  background-color: #E9540D;
}
/* El año (línea de 1.5rem) queda centrado en vertical con su círculo */
.timeline__contenido {
  padding-top: calc((var(--timeline-nodo) - 1.5rem) / 2);
}
.timeline__anio {
  display: block;
  margin-bottom: .5rem;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: #E9540D;
}
.timeline__texto {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .timeline {
    --timeline-nodo: 72px;
    max-width: 820px;
    margin: 3rem auto 0;
  }
  .timeline::before {
    left: 50%;
  }
  .timeline__item {
    grid-template-columns: 1fr var(--timeline-nodo) 1fr;
    column-gap: 2.5rem;
    min-height: calc(var(--timeline-nodo) + 3.5rem);
    padding-bottom: 1rem;
  }
  /* Zigzag: los hitos se alternan a cada lado y se solapan en vertical */
  .timeline__item + .timeline__item {
    margin-top: -1.5rem;
  }
  .timeline__nodo {
    grid-column: 2;
    grid-row: 1;
  }
  .timeline__contenido {
    grid-column: 1;
    grid-row: 1;
  }
  .timeline__item:nth-child(even) .timeline__contenido {
    grid-column: 3;
  }
  .timeline__texto {
    font-size: calc(1.275rem + .3vw);
    font-weight: 400;
  }
}
@media (min-width: 1200px) {
  .timeline__texto {
    font-size: 1.5rem;
  }
}
.proposito-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(3rem + 25px) 25px;
}
.proposito-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  margin-bottom: 1rem;
}
.proposito-visual {
  display: flex;
  justify-content: center;
}
.proposito-visual img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 767.98px) {
  .proposito-visual {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .proposito-row {
    display: flex;
    flex-wrap: wrap;
  }
  .proposito-visual {
    order: -1;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
  }
  .proposito-visual img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    transform: none;
  }
  .proposito-card {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
  }
}
.galeria-grid {
  display: flex;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
}
.galeria-item {
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 1 / 1;
  background-color: #D9D9D9;
  border-radius: 12px;
  scroll-snap-align: start;
  position: relative;
}
.galeria-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  background-color: #9AA5B1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Zm-14 0 4.5-6 3 4L18 12l3 5.5V19H7ZM8 10.5A1.5 1.5 0 1 0 8 7.5a1.5 1.5 0 0 0 0 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Zm-14 0 4.5-6 3 4L18 12l3 5.5V19H7ZM8 10.5A1.5 1.5 0 1 0 8 7.5a1.5 1.5 0 0 0 0 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.blog-pagination__btn {
  border: 2px solid #19233E;
  color: #19233E;
  background-color: transparent;
  border-radius: 40px;
  min-width: 40px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: 0.15s;
}
.blog-pagination__btn:hover:not(:disabled) {
  background-color: #19233E;
  color: #fff;
}
.blog-pagination__btn.active {
  background-color: #E9540D;
  border-color: #E9540D;
  color: #fff;
}
.blog-pagination__btn--nav {
  font-weight: 700;
}
.blog-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/*Artículo individual*/
.article-breadcrumb {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  color: #5E5E5E;
}
.article-breadcrumb a {
  color: #5E5E5E;
  text-decoration: none;
}
.article-breadcrumb a:hover {
  color: #E9540D;
}
.article-hero h1 {
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem);
  font-weight: 700;
  color: #19233E;
  line-height: 1.15;
  max-width: 63rem; /* mismo ancho que .article-body (60em a 1.05rem) */
}
.article-tag {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border: 1px solid #5268A4;
  background-color: #5268A4;
  border-radius: 50px;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.article-tag:hover {
  border-color: #E9540D;
  background-color: #E9540D;
  color: #fff;
}
.article-byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  max-width: 63rem; /* mismo ancho que .article-body (60em a 1.05rem) */
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #E3E7EF;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  color: #5E5E5E;
}
.article-byline__author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.article-byline__author img {
  padding: 5px;
  border-radius: 50%;
  background-color: #EBF2FF;
  object-fit: contain;
}
.article-byline__author strong {
  color: #19233E;
}
.article-byline__dates span + span::before {
  content: "·";
  margin: 0 0.4rem;
}
.article-lead {
  max-width: 63rem;
  margin: 1.5rem 0 1.1rem;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}
@media (min-width: 992px) {
  .article-sidebar {
    position: sticky;
    top: 120px;
  }
}
.article-share {
  flex-wrap: wrap;
}
.article-share__label {
  width: 100%;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1rem;
  color: #19233E;
}
.article-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background-color: #EBF2FF;
  border-radius: 15px;
}
.article-author img {
  flex-shrink: 0;
  object-fit: contain;
}
.article-author__label,
.article-author__name,
.article-author__info {
  display: block;
}
.article-author__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5E5E5E;
}
.article-author__name {
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #19233E;
}
.article-author__info {
  font-size: 0.85rem;
  color: #5E5E5E;
}
.article-author__info a {
  color: #E9540D;
}
.article-cover {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 1;
}
@media (max-width: 767.98px) {
  .article-cover {
    aspect-ratio: 2 / 1;
  }
}
.article-cover img {
  /* content-factoring-01.png trae ~7px transparentes en su borde derecho;
     el 2% extra los empuja fuera del recorte para que las esquinas redondeadas se vean parejas. */
  width: 102%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  display: block;
}@media (max-width: 767.98px) {
  .article-hero,
  .article-body {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.article-body {
  max-width: 60em;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
}
.article-body h2 {
  font-size: 1.5em;
  font-weight: 700;
  color: #19233E;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-family: "Josefin Sans", sans-serif;
}
.article-body p, .article-body ul, .article-body ol {
  margin-bottom: 1.1rem;
}
.article-body blockquote {
  border-left: 4px solid #E9540D;
  background-color: #EBF2FF;
  padding: 1rem 1.5rem;
  border-radius: 0 15px 15px 0;
  font-style: italic;
  color: #19233E;
  margin: 1.5rem 0;
}
.article-body a:not(.btn-action-2) {
  color: #E9540D;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:not(.btn-action-2):hover {
  color: #bf3f04;
}
.article-callout {
  margin: 2rem 0;
  padding: 1.5rem;
  border-radius: 15px;
  background-color: #19233E;
  color: #fff;
  text-align: center;
}
.article-callout p {
  margin-bottom: 1rem;
}
.article-callout__title {
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.4rem !important;
}
.article-table {
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
}
.article-table th {
  background-color: #EBF2FF;
  color: #19233E;
  font-weight: 700;
}
.article-table td:first-child {
  font-weight: 600;
  color: #19233E;
  white-space: nowrap;
}
.article-table tbody th {
  font-weight: 600;
  color: #19233E;
}
.article-table--comparativa td:first-child,
.article-table--comparativa tbody th {
  white-space: normal;
  min-width: 9rem;
}
.article-table--comparativa td:first-child {
  background-color: transparent;
}
.article-table--comparativa td {
  min-width: 12rem;
}
@media (max-width: 575.98px) {
  .article-table td:first-child {
    white-space: normal;
  }
}
.article-share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.article-share a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #EBF2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s;
}
.article-share a:hover {
  background-color: #E9540D;
}
.article-share a:hover img {
  filter: brightness(0) invert(1);
}

/*Simulador*/
.simulador-section {
  padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.simulador-badge {
  display: inline-block;
  background-color: #EBF2FF;
  color: #19233E;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 40px;
}
.simulador-panel {
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(25, 35, 62, 0.12);
}
.simulador-form, .simulador-resultado {
  flex: 1 1 320px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.simulador-form {
  background-color: #fff;
}
.simulador-resultado {
  background-color: #19233E;
  color: #fff;
}
.simulador-panel__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.3em;
  font-weight: 650;
  margin-bottom: 1.5rem;
}
.simulador-panel__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.simulador-form .simulador-panel__icon {
  background-color: #E9540D;
  color: #fff;
}
.simulador-resultado .simulador-panel__icon {
  background-color: #E9540D;
  color: #fff;
}
.simulador-label-icon {
  flex-shrink: 0;
  color: #fff;
}
.simulador-field {
  margin-bottom: 1.5rem;
}
.simulador-field label {
  display: block;
  font-weight: 450;
  color: #19233E;
  margin-bottom: 0.6rem;
}
.simulador-field__hint {
  display: block;
  font-size: 0.8rem;
  color: #5E5E5E;
  margin-top: 0.5rem;
}
.simulador-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.simulador-dias button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.simulador-input {
  width: 100%;
  border: none;
  background-color: #F1F3F7;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 1.1rem;
  font-weight: 650;
  color: #19233E;
  font-family: "Josefin Sans", sans-serif;
}
.simulador-input:focus {
  outline: 2px solid #E9540D;
  outline-offset: 1px;
}
.simulador-dias {
  display: flex;
  gap: 0.6rem;
}
.simulador-dias button {
  flex: 1;
  border: none;
  background-color: #F1F3F7;
  color: #19233E;
  font-weight: 650;
  padding: 12px 0;
  border-radius: 12px;
  transition: 0.15s;
}
.simulador-dias button.active {
  background-color: #E9540D;
  color: #fff;
}
.simulador-slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.simulador-slider-value {
  background-color: #FCE6D8;
  color: #E9540D;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 3px 12px;
  border-radius: 40px;
}
.simulador-slider {
  width: 100%;
  accent-color: #E9540D;
  height: 6px;
}
.simulador-slider-minmax {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #5E5E5E;
  margin-top: 0.4rem;
}
.simulador-resultado__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.simulador-resultado__row:first-of-type {
  border-bottom: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding-top: 0;
}
.simulador-resultado__row .label {
  font-size: 0.95rem;
  opacity: 0.85;
}
.simulador-resultado__row .value {
  font-weight: 700;
}
.simulador-resultado__row:first-of-type .value {
  font-size: 2rem;
}
.simulador-resultado__row.descuento .value {
  color: #ff8f66;
  font-weight: 650;
}
.simulador-resultado__highlight {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}
.simulador-resultado__highlight .label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: 0.3rem;
}
.simulador-resultado__highlight .value {
  font-size: 1.8rem;
  font-weight: 700;
}
.simulador-cta {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #E9540D;
  color: #fff;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 14px 0;
  border-radius: 40px;
  text-decoration: none;
  margin-top: 0.5rem;
  border: none;
  transition: 0.15s;
}
.simulador-cta:hover {
  background-color: #bf3f04;
  color: #fff;
}
.simulador-info {
  max-width: 960px;
  margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) auto 0;
  background-color: #EBF2FF;
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.simulador-info__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #19233E;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.simulador-info strong {
  color: #19233E;
}
.simulador-info p {
  color: #33415f;
  margin-bottom: 0;
}
.simulador-info a {
  color: #19233E;
  font-weight: 700;
  text-decoration: underline;
}
.simulador-info a:hover {
  color: #E9540D;
}

/*Destacados (slide de novedades)*/
.destacados-section {
  padding-top: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
}
.destacados-section--top {
  /* Sustituye el hero: deja espacio para que el navbar fijo no tape el slide. */
  padding-top: clamp(3.78125rem, 3.09375rem + 2.0625vw, 5.15625rem);
}
@media (max-width: 767.98px) {
  .destacados-section--top {
    padding-top: calc(3.78125rem + 25px);
  }
}
.destacados-swiper {
  position: relative;
  width: 100%;
  height: 500px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(25, 35, 62, 0.12);
}
.destacados-swiper .swiper-wrapper,
.destacados-swiper .swiper-slide {
  height: 100%;
}
.destacado-slide {
  display: flex;
  height: 100%;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.destacado-slide__info {
  flex: 0 0 33%;
  max-width: 33%;
  height: 100%;
  background-color: #19233E;
  color: #fff;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  /* Espacio extra abajo para que los bullets no tapen la fecha. */
  padding-bottom: calc(clamp(1.5rem, 1rem + 2vw, 3rem) + 1.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.destacado-slide__eyebrow {
  color: #E9540D;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  display: block;
}
.destacado-slide__title {
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
  font-family: "Josefin Sans", sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.destacado-slide__excerpt {
  opacity: 0.85;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.destacado-slide__fecha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  opacity: 0.85;
  flex-shrink: 0;
}
.destacado-slide__media {
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
}
.destacado-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .destacados-swiper {
    width: 100%;
    height: auto;
  }
  /* Todos los slides con el alto del más largo, y el azul hasta abajo: si no, en los cortos
     quedaba una franja blanca bajo el texto, justo donde van los bullets. */
  .destacados-swiper {
    background-color: #19233E;
  }
  .destacados-swiper .swiper-wrapper {
    align-items: stretch;
  }
  .destacados-swiper .swiper-slide.destacado-slide {
    flex-direction: column;
    height: auto;
  }
  .destacado-slide__info {
    flex: 1 0 auto;
    max-width: 100%;
    height: auto;
  }
  .destacado-slide__title,
  .destacado-slide__excerpt {
    -webkit-line-clamp: unset;
  }
  .destacado-slide__media {
    flex: none;
    height: 220px;
    order: -1;
  }
}
.destacados-pagination.swiper-pagination {
  /* Bullets en la esquina inferior izquierda, dentro de la caja de info y alineados con su padding. */
  position: absolute;
  bottom: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  left: clamp(1.5rem, 1rem + 2vw, 3rem);
  right: auto;
  top: auto;
  width: auto;
  display: flex;
  gap: 6px;
  z-index: 5;
}
.destacados-pagination .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  width: 22px;
  height: 5px;
  border-radius: 3px;
  margin: 0 !important;
  transition: 0.2s;
}
.destacados-pagination .swiper-pagination-bullet-active {
  background-color: #E9540D;
  width: 34px;
}

/*Centro de ayuda*/
.ayuda-hero {
  position: relative;
  background-image: linear-gradient(180deg, rgba(16, 23, 41, 0.35), rgba(16, 23, 41, 0.75)), url("../imagenes/banner-content.webp");
  background-size: cover;
  background-position: center;
  color: #fff;
  /* Contenido centrado verticalmente: arriba = alto del navbar fijo + mismo espacio que abajo. */
  padding: calc(clamp(3.78125rem, 3.09375rem + 2.0625vw, 5.15625rem) + clamp(5rem, 4rem + 3vw, 7rem)) 0 clamp(5rem, 4rem + 3vw, 7rem);
}
/* Centro de ayuda: video o imagen de fondo detrás del hero. La altura sigue dada por el padding de
   .ayuda-hero; el video o la imagen (.hero-content__video / __imagen, absolutos) solo cubren ese espacio
   y el velo degradado se mantiene encima. */
.ayuda-hero--video {
  overflow: hidden;
  background: #19233E url("../imagenes/hero-home-poster.webp") center / cover no-repeat;
}
.ayuda-hero--imagen {
  overflow: hidden;
  background: #19233E;
}
.ayuda-hero--video::after,
.ayuda-hero--imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 23, 41, 0.35), rgba(16, 23, 41, 0.75));
  z-index: 1;
  pointer-events: none;
}
.ayuda-hero--video > .container,
.ayuda-hero--imagen > .container {
  position: relative;
  z-index: 2;
}
.hero-breadcrumb {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
}
.hero-breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.hero-breadcrumb a:hover {
  color: #fff;
}
.ayuda-hero__title {
  font-size: clamp(2.2rem, 1.8rem + 1.8vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0;
}
.ayuda-section {
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.ayuda-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.ayuda-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: #F1F3F5;
  border-radius: 14px;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.ayuda-card:hover {
  background-color: #E9ECEF;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(25, 35, 62, 0.1);
}
.ayuda-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
}
.ayuda-card__title {
  font-size: 1.05em;
  font-weight: 700;
  color: #19233E;
  margin-bottom: 0.3rem;
}
.ayuda-card__desc {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  color: #5E5E5E;
  margin-bottom: 0;
}
.ayuda-faq-section {
  background-color: #F9F9F9;
}
.ayuda-hero__lead {
  max-width: 46rem;
  margin: 1rem 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.ayuda-hero__lead a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ayuda-hero__lead a:hover {
  color: #E9540D;
}
@media (max-width: 767.98px) {
  .ayuda-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }
}
/*Vistas de detalle del Centro de ayuda (manuales y carta de cortesía)*/
.ayuda-detalle-contenido {
  margin: 0 auto;
}
@media (min-width: 992px) {
  .ayuda-detalle-contenido {
    width: 85%;
  }
}
@media (max-width: 767.98px) {
  /* Mismo margen lateral que .article-hero y .article-body en celular. */
  .ayuda-detalle-contenido .article-breadcrumb {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* Preguntas frecuentes del Centro de ayuda y de los detalles de ayuda y blog:
   pregunta a 1.2em del texto base (el h3 se normaliza a 1rem para que el em
   no herede su tamaño de título). */
.ayuda-faq-section .accordion-header,
.ayuda-detalle-article .accordion-header,
.blog-detalle-article .accordion-header {
  font-size: 1rem;
}
.ayuda-faq-section .accordion-button,
.ayuda-detalle-article .accordion-button,
.blog-detalle-article .accordion-button {
  font-size: 1.2em;
}
/* En estas vistas el texto ocupa todo el ancho de la caja. */
.ayuda-detalle-contenido .article-hero h1,
.ayuda-detalle-contenido .article-lead,
.ayuda-detalle-contenido .article-body {
  max-width: none;
}
.ayuda-faq__mas {
  color: #E9540D;
  font-weight: 600;
  text-decoration: none;
}
.ayuda-faq__mas:hover {
  text-decoration: underline;
}

/* Menú móvil (sidebar, hasta 1199px): logo con "Menú" debajo, y los CTAs con el mismo estilo que en escritorio */
@media (max-width: 1199.98px) {
  /* Logo del sidebar: mismo tamaño y posición que el logo del navbar móvil (120px, a 12px del borde y 15px arriba) */
  .navbar .offcanvas-header {
    padding: 15px 12px 15px 11px; /* 11px + 1px del borde del panel = 12px, igual que el navbar */
    align-items: flex-start;
  }
  .offcanvas-brand {
    display: flex;
    align-items: center;
  }
  .offcanvas-brand img {
    width: 120px;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Desde 768px el logo del navbar mide 150px y queda a 13px del borde superior */
  .navbar .offcanvas-header {
    padding-top: 13px;
  }
  .offcanvas-brand img {
    width: 150px;
  }
}
@media (max-width: 1199.98px) {
  /* Menú lateral: Ingresar y Hazte cliente, en el orden del sitio anterior, separados del menú */
  .navbar .nav-item-ingresar {
    margin-top: 1.75rem;
  }
  /* Menú lateral: línea también sobre el primer ítem (Factoring), igual a la que separa los demás */
  .navbar .navbar-nav-principal .nav-item:first-child .nav-link {
    border-top: 1px solid #374775;
  }
  .navbar .nav-link.nav-cta-cliente {
    display: block;
    text-align: center;
    color: #E9540D;
    border: 3px solid #E9540D;
    border-radius: 40px;
    padding: 10px 14px;
    font-weight: 500;
    line-height: 1.5;
  }
  .navbar .nav-link.nav-cta-cliente:hover,
  .navbar .nav-link.nav-cta-cliente:focus {
    background-color: #E9540D;
    color: #fff;
  }
  .navbar .nav-item-ingresar + .nav-item-cta {
    margin-top: 0.75rem;
  }
  .navbar .btn-action.btn-ingresar {
    display: block;
    text-align: center;
    color: #fff;
    background-color: transparent;
    border: 3px solid #fff;
    border-radius: 40px;
    padding: 10px 14px;
    line-height: 1.5;
  }
  .navbar .btn-action.btn-ingresar:hover,
  .navbar .btn-action.btn-ingresar:focus {
    background-color: #fff;
    color: #19233E;
  }
}

/* Navbar escritorio (desde 1200px): links centrados y CTAs destacados a la derecha */
@media (min-width: 1200px) {
  .navbar .offcanvas-xl .offcanvas-body {
    flex-grow: 1;
  }
  .navbar-nav-principal {
    flex-grow: 1;
    align-items: center;
  }
  .navbar-nav-principal .nav-item:first-child {
    margin-left: auto;
  }
  .navbar-nav-principal .nav-link {
    margin-right: 1.25rem !important;
  }
  /* Ingresar y Hazte cliente (en ese orden, como el sitio anterior) a la derecha */
  .navbar-nav-principal .nav-item-ingresar {
    margin-left: auto;
  }
  .navbar .nav-link.nav-cta-cliente {
    color: #E9540D;
    border: 3px solid #E9540D;
    border-radius: 40px;
    padding: 5px 20px;
    margin-right: 0 !important;
    font-weight: 500;
    line-height: 1.5;
  }
  .navbar .nav-link.nav-cta-cliente:hover,
  .navbar .nav-link.nav-cta-cliente:focus {
    background-color: #E9540D;
    color: #fff;
    border-bottom: 3px solid #E9540D;
    transition: 0.15s;
  }
  .btn-action.btn-ingresar {
    display: inline-block;
    color: #fff;
    border-color: #fff;
    padding: 5px 20px;
    line-height: 1.5;
  }
  .btn-action.btn-ingresar:hover,
  .btn-action.btn-ingresar:focus {
    background-color: #fff;
    color: #19233E;
  }
}

/* Navbar (escritorio y menú móvil): CTAs sólidos con hover "background fill".
   El relleno entra por la izquierda y, al salir, sigue de largo por la derecha: el ancla cambia sin
   transición (derecha en reposo, izquierda en hover), así que solo se anima el ancho. El borde es
   fijo y del mismo color del botón en reposo: no se distingue del fondo, pero en hover enmarca el
   relleno y nunca cambia de golpe al salir. La transición de la regla de hover rige la entrada (0,15 s)
   y la de reposo rige la salida (0,35 s). */
.navbar .nav-link.nav-cta-cliente,
.navbar .nav-link.nav-cta-cliente:focus {
  background-color: #E9540D;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: right center;
  background-origin: border-box;
  background-size: 0% 100%;
  border-color: #E9540D;
  color: #fff;
  transition: background-size 0.35s ease-out, color 0.35s ease-out;
}
.navbar .nav-link.nav-cta-cliente:hover,
.navbar .nav-link.nav-cta-cliente:focus-visible {
  background-position: left center;
  background-size: 100% 100%;
  border-color: #E9540D;
  color: #bf3f04;
  transition: background-size 0.15s ease-out, color 0.15s ease-out;
}
.navbar .btn-action.btn-ingresar,
.navbar .btn-action.btn-ingresar:focus {
  background-color: #fff;
  background-image: linear-gradient(#5268A4, #5268A4);
  background-repeat: no-repeat;
  background-position: right center;
  background-origin: border-box;
  background-size: 0% 100%;
  border-color: #fff;
  color: #19233E;
  transition: background-size 0.35s ease-out, color 0.35s ease-out;
}
.navbar .btn-action.btn-ingresar:hover,
.navbar .btn-action.btn-ingresar:focus-visible {
  background-position: left center;
  background-size: 100% 100%;
  border-color: #fff;
  color: #fff;
  transition: background-size 0.15s ease-out, color 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .navbar .nav-link.nav-cta-cliente,
  .navbar .nav-link.nav-cta-cliente:hover,
  .navbar .nav-link.nav-cta-cliente:focus-visible,
  .navbar .btn-action.btn-ingresar,
  .navbar .btn-action.btn-ingresar:hover,
  .navbar .btn-action.btn-ingresar:focus-visible {
    transition: none;
  }
}

/* Hero home con video de fondo */
.box-banner--video {
  aspect-ratio: 1 / 1;
  background: #19233E url("../imagenes/hero-home-poster.webp") center / cover no-repeat;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 12px 0 #5268A4, 0 24px 0 #7BA0DB;
  overflow: hidden;
}
.box-banner--video .hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Degradado para asegurar la lectura del texto sobre el video */
.box-banner--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(25, 35, 62, 0.4); /* velo homogéneo #19233E, igual en Home y Factoring */
  pointer-events: none;
}
@media (min-width: 576px) {
  .box-banner--video {
    aspect-ratio: 1512 / 664;
  }
}
@media (min-width: 992px) {
  .box-banner--video {
    aspect-ratio: 1500 / 600;
    border-radius: 0 0 32px 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .box-banner--video .hero-video {
    display: none;
  }
}

/* Hero: indicador de carga del video (componente HeroVideo), en la esquina inferior derecha del contenedor.
   Aparece con 0,3 s de retraso para no parpadear cuando el video ya está en caché; se oculta sin retraso. */
.hero-loader {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3; /* sobre el velo (::after) del contenedor */
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0s 0.2s;
  animation: hero-loader-giro 0.8s linear infinite;
  pointer-events: none;
}
.hero-loader.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-out 0.3s, visibility 0s 0.3s;
}
@media (min-width: 992px) {
  .hero-loader {
    right: 32px;
    bottom: 32px;
  }
}
@keyframes hero-loader-giro {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-loader {
    display: none;
  }
}

/* Hero: entrada de los textos (desvanecido de izquierda a derecha) al cargar la página, sin esperar al video.
   fill-mode backwards: al terminar, el elemento vuelve a sus propios estilos (no bloquea transform de hover). */
.hero-anim {
  animation: hero-entrada 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.hero-anim--2 { animation-delay: 0.12s; }
.hero-anim--3 { animation-delay: 0.24s; }
@keyframes hero-entrada {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-anim {
    animation: none;
  }
}

/* Hero del home: la sección parte bajo el navbar fijo, el video es su fondo y el contenido se centra
   verticalmente en él. La sección toma la proporción del video; si el contenido no cabe (celulares angostos),
   crece en vez de desbordarse. Reemplaza al banner absoluto y a los márgenes fijos por ancho de .box-text. */
.hero--video {
  position: relative;
  display: flex;
  align-items: center;
  /* Ancho explícito: con width auto, el max-height se traspasa al ancho por el aspect-ratio
     (a 1920px la sección quedaba de 1600px y cargada a la izquierda). */
  width: 100%;
  margin-top: var(--navbar-alto);
  padding: 24px 0;
  aspect-ratio: 1 / 1;
}
.hero--video .box-banner {
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  max-height: none;
}
.hero--video > .box-head {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 0;
}
.hero--video .box-text {
  margin-top: 0;
}
.hero--video + .box-caracteristicas {
  margin-top: 48px;
}
@media (min-width: 576px) {
  .hero--video {
    aspect-ratio: 1512 / 664;
    max-height: 600px;
  }
}
@media (min-width: 992px) {
  .hero--video {
    aspect-ratio: 1500 / 600;
    max-height: 640px;
    padding: 40px 0;
  }
  .hero--video + .box-caracteristicas {
    margin-top: 80px;
  }
}

/* Home: CTA secundario del hero (Simular mi factura) */
.hero-cta.hero-cta--secundario {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px #fff;
  margin-left: 0.75rem;
}
.hero-cta.hero-cta--secundario:hover {
  background-color: #fff;
  color: #19233E;
}
@media (max-width: 575.98px) {
  .hero-cta.hero-cta--secundario {
    margin-left: 0;
    margin-top: 0.75rem;
  }
}
/* CTAs con chevron (.btn-chevron, texto en .btn-chevron__texto): en hover el texto se corre 10px a la izquierda
   y a 10px del texto entra un chevron (desvanecido de izquierda a derecha). El padding horizontal deja el espacio
   para el chevron; el botón no cambia de tamaño porque solo se mueven el texto y el chevron (transform).
   El chevron va anclado al texto, no al borde, para quedar a la misma distancia también en botones de ancho fijo. */
.btn-chevron.btn-action-2 {
  padding-left: 32px;
  padding-right: 32px;
}
/* Requisitos: el botón crece con su texto ("Hablar con un ejecutivo" no cabe en 250px y quedaba en dos
   líneas, con el chevron a un costado); los textos cortos, como "Evaluar ahora" del Home, mantienen 250px. */
.requisitos .btn-chevron.btn-action-2 {
  width: fit-content;
  min-width: 250px;
  white-space: nowrap;
}
.btn-chevron__texto {
  position: relative;
  display: inline-block;
  transition: transform 0.2s ease-out;
}
.btn-chevron__texto::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  width: 0.8em;
  height: 0.8em;
  margin-top: -0.4em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: none;
}
/* Solo con mouse: en pantallas táctiles el hover queda pegado tras el toque. El foco de teclado lo activa siempre. */
@media (hover: hover) {
  .btn-chevron:hover .btn-chevron__texto {
    transform: translateX(-10px);
  }
  .btn-chevron:hover .btn-chevron__texto::after {
    opacity: 1;
    transform: none;
  }
}
.btn-chevron:focus-visible .btn-chevron__texto {
  transform: translateX(-10px);
}
.btn-chevron:focus-visible .btn-chevron__texto::after {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn-chevron__texto,
  .btn-chevron__texto::after {
    transition: none;
  }
}
/* Home: enlace "Conocer más sobre el factoring" */
.link-conocer-mas {
  display: inline-block;
  margin-top: 0.5rem;
  color: #E9540D;
  font-weight: 600;
  text-decoration: none;
}
.link-conocer-mas:hover {
  color: #bf3f04;
  text-decoration: underline;
}

/*Contacto*/
.contacto-section {
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.contacto-intro {
  max-width: 42em;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 0;
}
.btn-action-2.contacto-whatsapp {
  width: 100%;
  max-width: 320px;
  text-align: center;
  margin-bottom: 1.5rem;
}
.contacto-card,
.contacto-form-card {
  background-color: #fff;
  border-radius: 15px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.contacto-form-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-bottom: 0;
}
.contacto-card__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #19233E;
  margin-bottom: 1rem;
}
.contacto-datos {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 0.6rem 1rem;
  margin: 0;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
}
.contacto-datos dt {
  font-weight: 600;
  color: #19233E;
}
.contacto-datos dd {
  margin: 0;
  color: #333;
  overflow-wrap: anywhere;
}
.contacto-datos a,
.contacto-deudores a,
.lead-form__check a {
  color: #E9540D;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contacto-datos a:hover,
.contacto-deudores a:hover,
.lead-form__check a:hover {
  color: #bf3f04;
}
.contacto-deudores {
  border-left: 4px solid #E9540D;
  background-color: #EBF2FF;
  padding: 1rem 1.25rem;
  border-radius: 0 15px 15px 0;
  font-size: 0.95rem;
  color: #19233E;
  margin-bottom: 0;
}
.contacto-feedback {
  font-size: 0.9rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
}
.contacto-submit {
  width: 100%;
  border: none;
  border-radius: 40px;
  background-color: #E9540D;
  color: #fff;
  font-weight: 500;
  padding: 0.85rem;
  font-size: 1.05rem;
  transition: 0.15s;
}
.contacto-submit:hover {
  background-color: #bf3f04;
}
/* Mapa full-width: fuera del .container para ocupar todo el ancho del viewport */
.contacto-mapa {
  width: 100%;
  height: clamp(320px, 45vw, 480px);
  line-height: 0;
}
.contacto-mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 575.98px) {
  .contacto-datos {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .contacto-datos dd {
    margin-bottom: 0.6rem;
  }
  .btn-action-2.contacto-whatsapp {
    max-width: none;
  }
}
/* Contacto: íconos de los canales de atención (círculo naranjo, ícono blanco) */
.contacto-datos--iconos {
  grid-template-columns: minmax(10rem, auto) 1fr;
  row-gap: 0.85rem;
  align-items: center;
}
.contacto-datos--iconos dt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.contacto-icono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #E9540D;
  color: #fff;
}
.contacto-icono svg {
  width: 0.67rem;
  height: 0.67rem;
}
@media (max-width: 575.98px) {
  .contacto-datos--iconos {
    grid-template-columns: 1fr;
    row-gap: 0.1rem;
  }
  .contacto-datos--iconos dd {
    padding-left: 2.25rem; /* alinea el valor con el texto, a la derecha del ícono */
  }
}
/* Contacto: botón para copiar el correo, junto a la dirección */
.contacto-correo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}
.contacto-copiar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid #19233E;
  border-radius: 999px;
  background-color: transparent;
  color: #19233E;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contacto-copiar:hover,
.contacto-copiar:focus-visible {
  background-color: #19233E;
  color: #fff;
}
.contacto-copiar.is-copiado {
  background-color: #E6F4EA;
  border-color: #1E6B34;
  color: #1E6B34;
}

/* Hazte cliente: formulario en la card blanca del panel (mismo estilo del simulador) y pasos en la card azul */
.hazte-cliente__feedback {
  margin: 1rem 0 0;
}
.hazte-cliente__feedback.alert-success {
  background-color: #E6F4EA;
  border: none;
  color: #1E6B34;
  font-size: 0.9rem;
  border-radius: 12px;
}
.hazte-cliente__submit {
  margin-top: 1.5rem;
}
.hazte-cliente__pasos {
  list-style: none;
  counter-reset: paso;
  padding: 0;
  margin: 0;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
.hazte-cliente__pasos li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 1.25rem 2.75rem;
}
.hazte-cliente__pasos li:last-child {
  padding-bottom: 0;
}
/* Línea que une los números de cada paso */
.hazte-cliente__pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 2rem;
  bottom: 0.25rem;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}
.hazte-cliente__pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background-color: #596A7F;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hazte-cliente__pasos strong {
  display: block;
  color: #fff;
}
/* En el panel la card del formulario es más ancha que la de los pasos */
@media (min-width: 992px) {
  .hazte-cliente-section .simulador-form {
    flex: 3 1 0;
  }
  .hazte-cliente-section .simulador-resultado {
    flex: 2 1 0;
  }
}
/* Footer escritorio: Conocenos e Informaciones más a la derecha (Canales de atención no se mueve) */
@media (min-width: 992px) {
  .footer-financia .menu-ft:not(:last-child) {
    padding-left: 2.5rem;
  }
}
@media (min-width: 1200px) {
  .footer-financia .menu-ft:not(:last-child) {
    padding-left: 4.5rem;
  }
}
/* Footer escritorio: Conocenos 120px adicionales a la derecha */
@media (min-width: 992px) {
  .footer-financia .row > .menu-ft:nth-child(2) {
    padding-left: calc(2.5rem + 60px); /* entre 992 y 1199px no hay espacio para más sin cortar "Quienes Somos" */
  }
}
@media (min-width: 1200px) {
  .footer-financia .row > .menu-ft:nth-child(2) {
    padding-left: calc(4.5rem + 120px);
  }
}
/* Simulador: consentimiento de uso de datos bajo "Solicitar Adelanto" (card azul) */
.simulador-cta[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.simulador-cta[aria-disabled="true"]:hover {
  background-color: #E9540D;
}
.simulador-consentimiento {
  margin-top: 1rem;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.8);
}
.simulador-consentimiento .form-check-input {
  border-color: rgba(255, 255, 255, 0.5);
}
.simulador-consentimiento .form-check-input:checked {
  background-color: #E9540D;
  border-color: #E9540D;
}
.simulador-consentimiento a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.simulador-consentimiento a:hover {
  color: #E9540D;
}
.simulador-consentimiento__error {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  color: #FFB3B3;
  margin: 0.4rem 0 0;
}
.simulador-consentimiento__error:empty {
  display: none;
}
/* Blog: etiqueta de categoría en el slide de destacados (mismo estilo que las cards) */
.blog-card__tag.destacado-slide__tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 4px 14px;
  margin-bottom: 1rem;
}
/* Blog: CTA fijo de la columna lateral (WhatsApp + Hazte cliente) */
.article-sidebar__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.article-sidebar__ctas .btn-action-2,
.article-sidebar__ctas .btn-action {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  font-size: 1.05em;
}
/* Blog: firma "Equipo Financia Capital" enlazada a la Política editorial */
.article-byline__autor {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-byline__autor:hover {
  color: #E9540D;
}
/* Factoring: H1 de 3.5em en escritorio. Entre 992 y 1199px baja a 3.2em: a 3.5em ocupa 4 líneas y se sale del fondo del hero. */
@media (min-width: 992px) {
  .hero--factoring .title-text {
    font-size: 3.5em;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero--factoring .title-text {
    font-size: 3.2em;
  }
}
/* Factoring: hero en grilla. La primera fila es la franja con el video de fondo y el texto centrado
   verticalmente; el formulario se superpone a la franja y los beneficios van debajo del texto.
   Celular: texto / formulario (sube 48px sobre la franja) / beneficios. Desde 768px: texto y beneficios
   a la izquierda, formulario a la derecha abarcando ambas filas. La franja crece si el texto no cabe. */
.hero--factoring {
  margin-top: var(--navbar-alto);
  padding-bottom: 48px;
  overflow-x: clip; /* el fondo mide 100vw, que incluye la barra de desplazamiento */
}
.hero-factoring {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* Fondo de la franja: ocupa la fila del texto y se extiende al ancho de la ventana */
.hero-factoring__fondo {
  position: absolute;
  grid-row: 1 / 2; /* en un elemento absoluto, un final auto llegaría al borde de la grilla */
  grid-column: 1 / -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: #19233E url("../imagenes/hero-home-poster.webp") center / cover no-repeat;
  overflow: hidden;
}
.hero-factoring__fondo .hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-factoring__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(25, 35, 62, 0.4); /* mismo velo del Home */
  pointer-events: none;
}
/* Indicador de carga: en celular va arriba a la derecha (abajo lo tapa el formulario) y desde 768px
   abajo a la izquierda (a la derecha está el formulario) */
.hero-factoring__fondo .hero-loader {
  top: 20px;
  bottom: auto;
}
.hero-factoring__texto {
  position: relative;
  z-index: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vw; /* franja cuadrada del ancho de la pantalla */
  padding: 32px 0 80px; /* abajo, los 48px que sube el formulario */
}
.hero-factoring__texto .hero-breadcrumb {
  margin-bottom: 1rem;
}
.hero-factoring__form {
  position: relative;
  z-index: 2;
  grid-row: 2;
  margin-top: -48px;
}
/* Celular: como el antiguo formulario móvil, título y bajada centrados y 24px de relleno */
@media (max-width: 575.98px) {
  .hero-factoring__form .form-financia {
    padding: 1.5rem;
  }
  .hero-factoring__form h2,
  .hero-factoring__form h2 + p {
    text-align: center;
  }
}
/* Mientras el título de beneficios va centrado, su bajada también */
@media (max-width: 767.98px) {
  .hero-factoring__beneficios .beneficios__intro {
    text-align: center;
  }
}
/* Destinos del CTA final: quedan bajo el navbar fijo al desplazarse hasta ellos */
.hero--factoring {
  scroll-margin-top: var(--navbar-alto);
}
.hero-factoring__form {
  scroll-margin-top: calc(var(--navbar-alto) + 16px);
}
/* Usa .box-2 por su tipografía; sus márgenes por ancho no aplican aquí */
.hero-factoring__beneficios {
  grid-row: 3;
  margin: 48px 0 0;
}
@media (min-width: 576px) {
  .hero-factoring__texto {
    min-height: 360px;
  }
}
@media (min-width: 768px) {
  .hero-factoring {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
  }
  .hero-factoring__texto {
    grid-column: 1;
    min-height: 420px;
    padding: 48px 0;
  }
  .hero-factoring__fondo .hero-loader {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 20px;
  }
  .hero-factoring__form {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: calc(100px - var(--navbar-alto));
  }
  .hero-factoring__beneficios {
    grid-column: 1;
    grid-row: 2;
  }
}
/* El formulario acompaña al bajar por los beneficios, si cabe en la pantalla */
@media (min-width: 768px) and (min-height: 720px) {
  .hero-factoring__form {
    position: sticky;
    top: calc(var(--navbar-alto) + 24px);
  }
}
@media (min-width: 992px) {
  .hero-factoring {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  /* Proporción de la franja de escritorio: 1500/640, hasta 640px de alto */
  .hero-factoring__texto {
    min-height: min(640px, 100vw * 640 / 1500);
  }
  .hero-factoring__fondo .hero-loader {
    bottom: 32px;
    left: 32px;
  }
  /* Posición y ancho que tenía el formulario antes de la grilla: parte a 100px del borde superior
     de la página (176px desde 1200 y 250px desde 1400) y su columna tenía 12px de relleno a la
     izquierda y 24px a la derecha (48px por lado desde 1400) */
  .hero-factoring__form {
    margin-right: 12px;
    margin-left: 4px;
  }
  .hero-factoring__beneficios {
    margin-top: 64px;
  }
}
@media (min-width: 1200px) {
  .hero-factoring__form {
    margin-top: calc(176px - var(--navbar-alto));
  }
}
@media (min-width: 1400px) {
  .hero-factoring__form {
    margin: calc(250px - var(--navbar-alto)) 36px 0 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-factoring__fondo .hero-video {
    display: none;
  }
}
/* Factoring: consentimiento en el formulario del hero (el formulario móvil centra su texto) */
.form-financia .lead-form__check {
  text-align: left;
}
/* Formularios de leads (Factoring, Contacto y Hazte cliente): campos con etiqueta flotante de
   Bootstrap, errores de lead-form-validation.js y casillas de consentimiento. */
.lead-form {
  /* Radio de campos, selects y prefijo +56 (Bootstrap usa 0.375rem). */
  --bs-border-radius: 10px;
}
.lead-form .form-control[aria-invalid="true"],
.lead-form .form-select[aria-invalid="true"],
.lead-form .form-check-input[aria-invalid="true"],
.lead-form__telefono:has(.form-control[aria-invalid="true"]) .input-group-text {
  border-color: #D93025;
}
/* Etiqueta flotante más chica y más arriba que la de Bootstrap (scale(.85) translateY(-.5rem)), para
   separarla del ejemplo (placeholder), que se ve al enfocar el campo. */
.lead-form .form-floating > .form-control:focus ~ label,
.lead-form .form-floating > .form-control:not(:placeholder-shown) ~ label,
.lead-form .form-floating > .form-select ~ label {
  transform: scale(0.75) translateY(-0.75rem) translateX(0.15rem);
}
.lead-form .form-floating > .form-control:focus::placeholder {
  color: #6C757D;
}
/* Teléfono: con foco o con valor, Bootstrap baja el texto del input 0.5rem (padding 1.625rem arriba y
   0.625rem abajo). El «+56» baja lo mismo (1rem más de padding arriba en un bloque centrado), con la
   misma duración que la etiqueta, para quedar alineado con el número. */
.lead-form__telefono .input-group-text {
  transition: padding-top 0.1s ease-in-out;
}
.lead-form__telefono:has(.form-control:focus, .form-control:not(:placeholder-shown)) .input-group-text {
  padding-top: calc(0.375rem + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  .lead-form__telefono .input-group-text {
    transition: none;
  }
}
/* Contacto y Hazte cliente: campos sin borde, con fondo azul claro (#EBF2FF). El borde
   queda transparente para que el foco y el error se sigan marcando sin cambiar el alto. */
.lead-form--relleno .form-control,
.lead-form--relleno .form-control:focus,
.lead-form--relleno .form-select,
.lead-form--relleno .form-select:focus,
.lead-form--relleno .input-group-text {
  background-color: #EBF2FF;
}
.lead-form--relleno .form-control,
.lead-form--relleno .form-select,
.lead-form--relleno .input-group-text {
  border-color: transparent;
}
/* Comuna, deshabilitada hasta elegir la región. */
.lead-form--relleno .form-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.lead-form--relleno .form-floating > textarea ~ label::after {
  background-color: #EBF2FF;
}
/* Sobre el gris, etiqueta y ejemplo más oscuros para mantener el contraste (WCAG AA, 4,5:1). */
.lead-form--relleno .form-floating > label {
  color: rgba(33, 37, 41, 0.8);
}
.lead-form--relleno .form-floating > .form-control:focus::placeholder {
  color: #575E65;
}
.lead-form .form-floating > .lead-form__mensaje {
  height: 140px;
  min-height: 100px;
  resize: vertical;
}
.lead-form__opcional {
  color: #6C757D;
  font-size: 0.85em;
}
.lead-form__check {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #333;
}
.lead-form__check .form-check-input:checked {
  background-color: #E9540D;
  border-color: #E9540D;
}
.lead-form__error {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  color: #D93025;
  text-align: left;
  margin: 0.4rem 0 0;
}
.lead-form__error:empty {
  display: none;
}
/* Factoring: beneficios de operar con Financia Capital (lista vertical con ícono en círculo) */
.beneficios {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  max-width: 34rem;
}
.beneficio {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}
.beneficio:last-child {
  margin-bottom: 0;
}
.beneficio__icono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: #fff;
}
.beneficio__titulo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #19233E;
  margin: 0.35rem 0 0.35rem;
}
.beneficio__texto {
  font-size: 1rem;
  line-height: 1.5;
  color: #5E5E5E;
  margin: 0;
}
.beneficio {
  text-align: left; /* en móvil la sección centra su texto */
}
@media (max-width: 767.98px) {
  .beneficios {
    margin-left: auto;
    margin-right: auto;
  }
}
/* Factoring: sección "¿Qué facturas puedes ceder?" sobre naranjo institucional */
/* Enlace de cierre al artículo de cesión (blanco sobre naranjo) */
.requisitos--naranjo .link-cesion {
  display: inline-block;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.requisitos--naranjo .link-cesion:hover,
.requisitos--naranjo .link-cesion:focus-visible {
  color: #19233E;
}
@media (max-width: 767.98px) {
  .requisitos--naranjo .link-cesion {
    display: block;
    margin: 0 0 2.5rem;
    text-align: center;
  }
}
.requisitos--naranjo .requisitos__nota {
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 36rem;
}
.btn-action-2.btn-blanco {
  background-color: #fff;
  color: #E9540D;
}
.btn-action-2.btn-blanco:hover,
.btn-action-2.btn-blanco:focus-visible {
  background-color: #19233E;
  color: #fff;
}
/* Imágenes de "¿Qué facturas puedes ceder?" y "¿Qué significa factorizar?": mismo tamaño */
.requisitos--naranjo img[src$="que-facturas-se-pueden-ceder.png"],
.factorizar-section .factorizar-section__img {
  display: block;
  width: 85%; /* 15% más pequeña que el ancho de su columna */
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767.98px) {
  .requisitos--naranjo img[src$="que-facturas-se-pueden-ceder.png"],
  .factorizar-section .factorizar-section__img {
    width: 100%; /* en celular, a todo el ancho de la columna */
  }
}
.requisitos--naranjo .frase-action span {
  color: #19233E; /* sobre naranjo, el acento del título pasa a azul */
}
.requisitos--naranjo img[src$="financia-capital-logo-blanco.png"] {
  filter: brightness(0) invert(1); /* logo 100% blanco: la flecha naranja se perdía sobre el fondo */
}
/* Factoring: sección "¿Qué significa factorizar una factura?" (dos columnas, imagen a la derecha, fondo blanco) */
.factorizar-section__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover; /* la imagen trae sus esquinas redondeadas y sombra incluidas */
}
@media (min-width: 992px) {
  .factorizar-section {
    padding-top: 80px; /* solo escritorio */
  }
}
.factorizar-section h2 {
  line-height: 1.2; /* el título ocupa dos líneas y el interlineado heredado las junta demasiado */
}
.factorizar-section__texto {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
  max-width: 36rem;
}
/* Quiénes somos: "Cómo trabajamos" (usa la lista .beneficios de Factoring, en dos columnas) */
.como-trabajamos {
  padding-top: 3rem; /* 48px en móvil y tablet, el espacio que tenía antes */
  padding-bottom: 3rem;
}
@media (min-width: 992px) {
  .como-trabajamos {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
.beneficios.como-trabajamos__lista {
  max-width: 60rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.como-trabajamos__lista .beneficio {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .beneficios.como-trabajamos__lista {
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
    row-gap: 2.5rem;
  }
}
/* Escritorio: 4 columnas, con el ícono sobre el título para que el texto aproveche el ancho de cada columna */
@media (min-width: 992px) {
  .beneficios.como-trabajamos__lista {
    max-width: none;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
  }
  .como-trabajamos__lista .beneficio {
    flex-direction: column;
    gap: 0.75rem;
  }
  .como-trabajamos__lista .beneficio__titulo {
    margin-top: 0;
  }
}
/* Quiénes somos: "Ética, integridad y canal de denuncias" (mismo espaciado que "Cómo trabajamos") */
.etica {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 992px) {
  .etica {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
.etica h2 {
  line-height: 1.2;
}
.etica__texto {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
}
.etica__texto strong {
  color: #19233E;
}
.btn-action-2.etica__cta {
  margin-bottom: 0;
}
/* Móvil/tablet: título e intro, luego el resto del texto y el botón al final.
   Escritorio: título, intro y botón a la izquierda; el resto del texto a la derecha. */
.etica__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "intro" "detalle" "accion";
  row-gap: 0.5rem;
}
.etica__intro { grid-area: intro; }
.etica__detalle { grid-area: detalle; }
.etica__accion { grid-area: accion; }
@media (max-width: 991.98px) {
  .etica h2 {
    text-align: center;
  }
  .etica__accion {
    margin-top: 0.5rem;
  }
  .btn-action-2.etica__cta {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 992px) {
  .etica__grid {
    grid-template-columns: 5fr 7fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro detalle" "accion detalle";
    column-gap: 3rem;
    row-gap: 0.5rem;
  }
}
/* Párrafo de respuesta (Notion): bajo el H2 de la sección, centrado y a 1240px de ancho como máximo */
.parrafo-respuesta {
  max-width: 1240px;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  line-height: 1.7;
  color: #333;
}
.parrafo-respuesta.beneficios__intro {
  max-width: 46rem;
}
@media (max-width: 767.98px) {
  .parrafo-respuesta.beneficios__intro {
    margin-left: auto;
    margin-right: auto;
  }
}
/* Quiénes somos: "Nuestro respaldo" (imagen a la izquierda, título y lista vertical a la derecha) */
.respaldo__link {
  color: #E9540D;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.respaldo__link:hover {
  color: #bf3f04;
}
.respaldo h2 {
  line-height: 1.2;
}
.respaldo__img {
  width: 100%;
  max-width: 666px; /* mismo ancho máximo que la imagen anterior (666px de ancho natural) */
}
@media (max-width: 767.98px) {
  .beneficios.respaldo__lista {
    margin-left: auto;
    margin-right: auto;
  }
}
/* Hazte cliente: hero con textos centrados y formulario pegado al hero (sin título de sección) */
.hero-content--centrado .box-text {
  margin-left: auto;
  margin-right: auto;
}
.hazte-cliente-section {
  padding-top: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}
.hazte-cliente-section .simulador-panel {
  margin-top: 0;
}
/* Hazte cliente, tablet: formulario y pasos apilados para que los campos en dos columnas no queden apretados */
@media (max-width: 991.98px) {
  .hazte-cliente-section .simulador-form,
  .hazte-cliente-section .simulador-resultado {
    flex-basis: 100%;
  }
}

/* Página 404 */
.pagina-404 {
  padding: calc(var(--navbar-alto) + clamp(3rem, 2rem + 4vw, 6rem)) 0 clamp(3rem, 2rem + 4vw, 6rem);
}
.pagina-404__codigo {
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(4rem, 3rem + 6vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: #E9540D;
  margin-bottom: 0.5rem;
}
.pagina-404__texto {
  max-width: 34rem;
  font-size: 1.1rem;
  color: #5E5E5E;
}
.pagina-404__enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}
.pagina-404__enlaces a {
  color: #19233E;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pagina-404__enlaces a:hover,
.pagina-404__enlaces a:focus-visible {
  color: #E9540D;
}