* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  text-decoration: none;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf")
    format("truetype");
  font-weight: 400 800;
  font-display: optional;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit/Outfit-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 400 800;
  font-display: optional;
}
html {
  scroll-behavior: smooth;
  background-color: white;
}
h2 {
  font-family: "Outfit", sans-serif;
}
body {
  font-family: "Open Sans", sans-serif;
  font-family: inherit;
}
/* --------HEADER---------- */
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  z-index: 100000;
}

/* --------BARRA DE NAVEGACION---------- */
/* --------MENU---------- */
.container__menu {
  width: 100%;
  height: 45px;
  padding: 0px 20px;
  z-index: 100;
}
.nav__logo {
  display: none;
}
.menu {
  height: 100%;
}
.label__container {
  height: 100%;
  width: 24px;
}

.a-servicios img {
  display: none;
}
nav ul li a {
  color: white;
  transition: all 0.2s ease;
}
.svg__flecha {
  fill: white;
  display: none;
}
nav > ul > li:hover > a {
  /* transform: scale(1.1); */
  color: #f8dd2e;
}
nav > ul > li:hover > a > .svg__flecha {
  fill: #f8dd2e;
}
nav ul li ul a:hover {
  color: #bea923;
}
.selected:hover,
.selected:hover .svg__flecha {
  color: white;
  fill: white;
}

.sub-selected:hover {
  color: #8a8888;
}

/* --------BOTON MENU---------- */
.icon__menu {
  font-size: 24px;
  cursor: pointer;
  color: #ffffff;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon__menu {
  width: 24px;
  fill: white;
}

#check__menu {
  display: none;
}
#label__check {
  width: 24px;
  height: 100%;
}

/* ====================SIMULADOR CREDITO======================= */
.simulador {
  margin-top: 35px;
  box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 40px 0px;
  position: relative;
  z-index: 10;
  background-color: white;
}
.simulador__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: 2rem;
  row-gap: 2rem;
  padding-block: 2rem;
  padding-inline: 1rem;
}
/*=============== BUTTON ===============*/
.button {
  /* margin-block: 1.5rem; */
  /* margin-inline: auto; */
  display: inline-block;
  background-color: #f6d918;
  padding: 0.5rem 0.7rem;
  color: black;
  font-weight: var(--font-bold);
  border: 2px solid black;
  cursor: pointer;
  border-radius: 5px;
}
.button img {
  width: 20px;
  transition: transform 0.5s;
}
.button__flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.2rem;
}
.button__flex:hover img {
  transform: translateX(0.25rem);
}
/*=============== ICONOS CREDITO ===============*/

.icono__credito {
  width: 70px;
  cursor: pointer;
}
.icono__credito.ingresar {
  transition: all 0.5s ease;
}
.icono__credito.ingresar:hover {
  transform: scale(1.2);
}

/* ====================ACCEDE A UN CREDITO======================= */
.acc__credito {
  height: auto;
}
.bg__img {
  height: auto;
  background-image: url(../img/bg_conductor_formulario_home-mb.webp);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-attachment: local;
  /* background-position: center center; */
  background-repeat: no-repeat;
  position: relative;
  top: -70px;
  z-index: 0;
}
.bg__img.loaded {
  background-image: none;
}
.container__form {
  width: 509px;
  height: auto;
  padding-top: 90px;
}

/*=============== solicitud ===============*/
.solicitud__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.solicitud__description {
  text-align: center;
  margin-inline: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.solicitud__description img {
  width: 75%;
  height: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.solicitud__description h2 {
  font-size: 18px;
  text-align: left;
}
.solicitud__description p {
  text-align: left;
  font-size: 16px;
}

.solicitud__img {
  max-width: 40rem;
  height: auto;
  margin-inline: 1rem;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
}
.contenedor__img-logo {
  max-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.contenedor__img-logo img {
  aspect-ratio: 9200 /1407;
}
.solicitud__img img {
  width: 100%;
  aspect-ratio: 4/3;
  display: block;
  max-width: 100%;
  max-height: 100%;
}
/*=============== CONTADOR ===============*/
.contadores__container {
  margin-block: 2rem;
  margin-inline: 1rem;
  text-align: center;
  color: #4c594c;
}
.contador__cantidad {
  font-weight: bold;
  font-size: 28px;
  margin-bottom: 0.5rem;
}
.contadores__container p {
  letter-spacing: 0.2rem;
  font-weight: bold;
  font-size: 14px;
}
@keyframes aparecer {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.contador.ocultar {
  opacity: 0;
}
.contador.animar {
  animation: aparecer 1.3s;
}

/*=============== VIDEO ===============*/
.video__container {
  width: 100%;
  padding-inline: 1rem;
  position: relative;
}
.video {
  height: 0px;
  padding-bottom: 56.25%;
  position: relative;
}

.video video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.video__container.loaded .video__image {
  display: none;
}

.video__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/img-video.webp);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.productos {
  background-color: #1d1d25;
  color: white;
  margin-block: 3rem;
}
.contenedor__productos {
  margin-inline: 1rem;
}
.container__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: 0 auto;
}
.container__info h2 {
  padding-block: 3rem 3rem;
  font-family: "Outfit", sans-serif;
  max-width: 500px;
}
.container__info p {
  font-size: 16px;
  max-width: 500px;
}
.container__tarjetas {
  padding-block: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
.container__tarjeta {
  padding: 2rem 2rem 3rem 2rem;
  max-width: 400px;
  transition: all 0.6s ease;
}
.tarjeta1 {
  background-color: white;
  color: black;
}
.tarjeta2 {
  background-color: #f6d918;
  color: black;
}
.tarjeta3 {
  background-color: #686868;
  color: white;
}
.tarjeta1:hover {
  background-color: black;
  color: white;
}
.tarjeta2:hover {
  background-color: white;
  color: black;
}
.tarjeta3:hover {
  background-color: black;
  color: white;
}
.container__tarjeta:hover .icono_blanco {
  fill: white;
  transition: all 0.6s ease;
}

.container__tarjeta .icono_blanco-store {
  fill: white;
}
.container__tarjeta .icono__tarjeta {
  width: 2.4rem;
  height: auto;
  transition: all 0.6s ease;
}

.container__tarjeta h3 {
  margin-block: 1.5rem 1rem;
}
.container__tarjeta p {
  font-size: 16px;
  margin-bottom: 2rem;
}
.container__tarjeta a {
  text-decoration: underline;
  font-size: 14px;
  font-weight: 700;
  color: black;
  cursor: pointer;
}
.tarjeta1:hover a {
  color: white;
}
.tarjeta3 a {
  color: white;
}

/*=============== BENEFICIOS ===============*/
.beneficios {
  padding-top: 1rem;
}
.conteiner__beneficios {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  padding-bottom: 3rem;
  row-gap: 3rem;
}
.beneficios__img {
  max-width: 40rem;
  height: auto;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
  display: flex;
  align-self: center;
  justify-content: center;
}
.beneficios__img img {
  width: 100%;
  aspect-ratio: 4/3;
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.beneficios__info {
  /* margin-top: 3rem; */
  display: flex;
  flex-direction: column;
}
.beneficios__info img {
  max-width: 75%;
  display: flex;
  align-self: center;
  margin-bottom: 2rem;
  width: 100%;
  aspect-ratio: 9200/1407;
  max-height: 100%;
}
.beneficios__info ul {
  margin-left: 1rem;
  margin-top: 1rem;
}

.beneficios__info-data ul li {
  margin-bottom: 0.5rem;
  column-gap: 0.5rem;
  font-size: 16px;
  margin-left: 1.5rem;
}

.beneficios__info-data {
  max-width: 40rem;
  flex-direction: column;
  display: flex;
  align-self: center;
  padding-inline: 1rem;
}

/*=============== CREDITO ===============*/
.credito {
  background-color: #f6d918;
  display: flex;
}

.container__credito {
  padding-inline: 2rem;
  padding-block: 4rem;
  max-width: 40rem;
  margin: 0 auto;
}
.container__credito h2 {
  font-size: 20px;
  margin-bottom: 2rem;
}
.container__credito p {
  font-size: 16px;
  margin-bottom: 3rem;
  line-height: 2;
}
.b-credito {
  padding: 0.8rem 1.5rem;
  background-color: black;
  color: white;
  border: 1px solid white;
  font-size: 18px;
  font-weight: bold;
  border-radius: 0.5rem;
  transition: all 0.6s ease;
}
.b-credito:hover {
  border-color: black;
}
@keyframes scala {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: translateY(1);
  }
}
.container__credito.ocultar {
  opacity: 0;
}
.container__credito.animar {
  animation: scala 2s;
}

/*=============== TESTIMONIOS ===============*/
.container__clientes {
  padding-block: 3rem 4rem;
  padding-inline: 2rem;
  max-width: 40rem;
  margin: 0 auto;
}
.container__clientes h2 {
  font-size: 20px;
  margin-bottom: 2rem;
}
.container__testimonios {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}

.testimonio img {
  margin-bottom: 2rem;
  width: 70px;
  aspect-ratio: 1;
}
.testimonio h3 {
  font-size: 18px;
  font-family: "Outfit", sans-serif;
}
.testimonio h4 {
  font-size: 18px;
  font-family: "Outfit", sans-serif;
  margin: 1rem 0 1rem 1rem;
}
.testimonio h5 {
  margin: 0 0 0 1rem;
  font-weight: normal;
  font-size: 17px;
  color: #666;
}

/*=============== Footer ===============*/
.footer {
  border-top: 1rem solid #f6d918;
}
.footer__principal {
  background-color: black;
  width: 100%;
  padding-inline: 2rem;
}
.container__footer {
  color: white;

  padding-block: 3.5rem;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  max-width: 320px;
  margin: 0 auto;
}

.container__footer h2 {
  font-size: 16px;
  letter-spacing: 0.2rem;
  margin-bottom: 1.5rem;
}
.footer__menu ul li {
  list-style: none;
  margin-bottom: 1rem;
}
.footer__menu ul li a {
  color: white;
}
.footer__menu ul li a.dentro {
  color: #edf000;
}
.footer__menu ul li a:hover {
  color: #666;
}
.footer__grupo {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.ubicaciones {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.ubicacion-info {
  margin-top: 0.5rem;
}
.ubicacion {
  line-height: 1.6;
  margin-bottom: 1rem;
}
.ubicacion h3 {
  margin-bottom: 1rem;
  text-transform: capitalize;
  font-size: 16px;
}
.ubicaciones {
  display: inline;
}
.ubicaciones a {
  display: inline;
}
.ubicaciones a h3 {
  color: white;
  font-size: 16px;
  text-transform: capitalize;
  display: inline;
}
.ubicaciones a h3:hover {
  color: #edf000;
}
.ubicacion p {
  font-size: 14px;
}

.footer__grupo .contacto__container .contacto-info {
  line-height: 2;
}
.contacto-info a {
  color: white;
  cursor: pointer;
}
.contacto-info p:first-of-type a:hover {
  color: rgb(0, 208, 130);
}
.iconos__redes {
  display: flex;
  column-gap: 1rem;
}

.icono {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: black;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
  border-radius: 50%;
  overflow: hidden;
  font-family: "remixicon";
}
.icono__facebook {
  background-color: rgb(65, 88, 208);
}
.icono__instagram {
  background-color: #833ab4;
}

.icono__facebook::before {
  /* content: '\ECBC';
        display: block;
        margin: 13px 0;
        transition: all ease-in-out .3s; */
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  background-image: url("../img/Facebook_icon.svg");
  background-size: cover;
  margin: 4px 4.5px;
  transition: all ease-in-out 0.5s;
  background-position: center;
}

.icono__facebook:hover::before {
  margin-top: -50px;
}

.icono__facebook::after {
  /* content: '\ECBC';
        display: block;
        margin: 30px 0;
        transition: all ease-in-out .3s; */
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  background-image: url("../img/Facebook_icon.svg");
  background-size: cover;
  margin: 12px 4px;
  transition: all ease-in-out 0.5s;
}

.icono__instagram::before {
  /* content: '\EE66';
        display: block;
        margin: 13px 0;
        transition: all ease-in-out .3s; */
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  background-image: url("../img/Instagram_icon.svg");
  background-size: cover;
  margin: 4px 4.5px;
  transition: all ease-in-out 0.5s;
  background-position: center;
}

.icono__instagram:hover::before {
  margin-top: -50px;
}

.icono__instagram::after {
  /* content: '\EE66';
        display: block;
        margin: 30px 0;
        transition: all ease-in-out .3s; */
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  background-image: url("../img/Instagram_icon.svg");
  background-size: cover;
  margin: 12px 4px;
  transition: all ease-in-out 0.5s;
}
.footer__derechos {
  text-align: center;
  margin-block: 1.2rem;
  letter-spacing: 3px;
  font-size: 11px;
  font-weight: bold;
}
.selected-footer:hover {
  color: #f8dd2e;
}
/* --------BOTON WHATSAPP---------- */
.btn-ws {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  background-color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.btn-ws img {
  border-radius: 50%;
  /* fill:#25D366; */

  filter: invert(55%) sepia(56%) saturate(563%) hue-rotate(90deg)
    brightness(106%) contrast(100%);
}
.btn-ws img:hover {
  /* fill:#18813f; */
  filter: brightness(0) saturate(100%) invert(38%) sepia(68%) saturate(551%)
    hue-rotate(90deg) brightness(89%) contrast(87%);
}

/*=============== MODAL ===============*/
.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}
.modal {
  box-shadow: rgba(0, 0, 0, 0.6) 0px 5px 15px;
  border: none;
  position: fixed;
  margin: auto;
}
.modal a {
  max-width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
.modal a img {
  width: 100%;
  aspect-ratio: 1;
  max-height: 85vh;
  position: relative;
}
.modal button {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 1;
  background-color: white;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.6) 0px 5px 15px;
  cursor: pointer;
}
.modal button svg {
  position: absolute;
  display: flex;
  width: 30px;
  justify-self: center;
  align-self: center;
  top: 0px;
  right: 0px;
}

/* --------RESPONSIVE---------- */
@media screen and (max-width: 450px) {
  .simulador__container {
    flex-wrap: wrap;
    column-gap: 8rem;
    row-gap: 2rem;
    justify-content: center;
  }
}
@media screen and (min-width: 480px) {
  .container__footer {
    padding-block: 3.5rem;
    row-gap: 2rem;
    max-width: 600px;
    margin: 0 auto;
  }
  .footer__menu,
  .footer__ubicaciones,
  .contacto__container,
  .redes {
    flex: 1;
  }

  .footer__grupo {
    display: flex;
    flex-direction: row;
    column-gap: 3rem;
  }
}

@media screen and (max-width: 1000px) {
  .container__menu {
    height: 40px;
    padding: 0px 20px;
    z-index: 100;
    display: flex;
    justify-content: center;
  }
  nav > ul {
    flex-direction: column;
    align-items: baseline;
    background-color: rgb(42, 41, 41);
    border-top: 3px solid #f8dd2e;
    position: fixed;
    top: 35px;
    left: 0;
    width: 97%;
    height: 0px;
    transition: all 0.8s ease;
    opacity: 0;
    visibility: hidden;
    padding-block: 1rem;
  }
  #check__menu:checked ~ nav > ul {
    height: 28rem;
    visibility: visible;
    opacity: 1;
    transition: all 0.8s ease;
  }
  nav ul li {
    list-style: none;
    margin: 1.5rem 0.5rem 1.5rem 2.3rem;
  }
  nav ul li a {
    font-weight: bold;
    font-size: 16px;
  }
}
@media screen and (min-width: 1000px) {
  .menu {
    max-width: 1200px;
    margin: auto;
    height: 100%;
  }
  nav {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  .label__container {
    display: none;
  }
  .nav__logo {
    display: flex;
    align-items: center;
  }
  .nav__logo img {
    width: 125px;
  }
  nav > ul {
    height: 100%;
    display: flex;
    gap: 2rem;
  }
  nav > ul > li {
    height: 100%;
    /* list-style: none; */
    position: relative;
  }
  nav > ul > li > a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }

  .a-servicios {
    display: flex;
    gap: 0.3rem;
  }
  .svg__flecha {
    width: 20px;
    display: flex;
    align-self: center;
  }
  /* --------SUB-MENU---------- */
  nav ul li ul {
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: black;
    border-top: 3px solid #f8dd2e;
    top: 40px;
    left: -6px;
    padding: 2rem 2rem;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    z-index: 10;
    /* list-style: none; */
    transition: all 0.8s ease;
  }
  nav ul li:hover ul {
    visibility: visible;
    opacity: 1;
  }
  nav ul li ul a {
    color: white;
  }

  .a-servicios i {
    display: inline;
  }
  .icon__menu {
    display: none;
  }
  .button {
    margin: 0;
    padding: 0.7rem 0.7rem;
    font-size: 18px;
  }
  .simulador__container {
    max-width: 1200px;
    margin: auto;
    flex-direction: row;
    justify-content: space-between;
    padding-block: 2rem 1rem;
  }
  .iconos__credito {
    justify-content: center;
  }
  .icono__credito {
    width: 80px;
    margin: 0rem;
  }
  .bg__img {
    justify-content: right;
    /* top: -35px; */
    background-image: url(../img/bg_conductor_formulario_home.webp);
  }
  .container__form {
    max-width: 1080px;
    margin-inline: auto 20%;
  }

  .solicitud__container {
    max-width: 1200px;
    justify-content: space-between;
    margin: 0 auto;
    flex-direction: row;
    align-items: center;
    padding: 3rem 0 0 0;
    gap: 0;
  }
  .solicitud__description img {
    width: 100%;
  }
  .solicitud__description h2 {
    font-size: 32px;
    text-align: left;
  }
  .solicitud__description p {
    text-align: start;
    font-size: 18px;
  }
  .solicitud__description {
    flex: 1;
    align-items: start;
  }
  .solicitud__img {
    max-width: 100%;
    height: auto;
    margin-left: 3rem;
    flex: 1;
  }
  .solicitud__img img {
    width: 100%;
    height: auto;
    display: block;
  }
  .contadores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-block: 2rem;
  }
  .contador__cantidad {
    font-size: 46px;
    margin-bottom: 1.2rem;
  }
  .video__container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .container__info {
    flex-direction: row;
    column-gap: 2rem;
    flex: 1 1;
    max-width: 1200px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding-top: 2rem;
  }
  .container__info p {
    flex: 1;
    font-size: 15px;
  }
  .container__info h2 {
    flex: 1;
    font-size: 44px;
  }
  .container__tarjetas {
    display: flex;
    flex-direction: row;
    max-width: 1240px;
    margin: 0 auto;
    /* gap: 3rem; */
  }
  .container__tarjeta {
    flex: 1;
  }
  .container__tarjeta a {
    font-size: 16px;
  }
  .conteiner__beneficios {
    flex-direction: row;
    gap: 4rem;
    margin: 0 auto;
    max-width: 1200px;
    flex: 1 1;
    padding: 0;
    padding-bottom: 4rem;
  }
  .beneficios__info {
    flex: 1;
  }
  .beneficios__info h2 {
    font-size: 44px;
    padding-bottom: 1rem;
  }
  .beneficios__info ul {
    margin: 0;
  }
  .beneficios__img {
    flex: 1;
  }
  .beneficios__info-data {
    padding-inline: 0;
  }
  .container__credito {
    display: flex;
    flex-direction: row;
    gap: 4rem;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0;
    padding-block: 5rem 4rem;
  }
  .container__credito h2 {
    font-size: 44px;
    flex: 1;
    margin: 0;
  }
  .container__credito p {
    flex: 1;
    margin: 0;
    font-size: 16px;
  }
  .credito__enlace {
    flex: 1;
    margin-top: 1rem;
  }
  .container__clientes {
    padding: 0;
    padding-block: 3rem 5rem;
    margin: 0 auto;
    max-width: 1200px;
  }
  .container__testimonios {
    display: flex;
    flex-direction: row;
    gap: 4rem;
  }
  .testimonio {
    flex: 1;
  }
  .container__clientes h2 {
    font-size: 44px;
  }
  .container__clientes h3 {
    font-size: 25px;
  }
  .container__footer {
    max-width: 1200px;
    margin: 0 auto;
    flex-direction: row;
    gap: 3rem;
  }
  .footer__grupo {
    flex: 1;
  }
}