* {
  font-family: "acumin-pro", sans-serif;
}

header {
  display: flex;
  padding: 4px clamp(16px, 8vw, 142px);
  justify-content: flex-end;
  align-items: center;
  gap: 47px;
  background: #4c4184;
  color: #ffffff;
}

header p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
header a {
  color: white;
  text-decoration: none;
}

header p:last-child {
  gap: 16px;
}

.social-icon {
  color: white;
  font-size: 16px;
}

.nav-link {
  font-size: clamp(12px, 1vw, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #111518;
}

nav {
  .container-fluid {
    padding: 0px clamp(16px, 8vw, 142px);
  }
}

.navbar.scrolled {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombras para más realismo */
}

.navbar-nav {
  gap: clamp(16px, 4vw, 32px);
}

.hero-banner {
  display: flex;
  height: 657px;
  align-self: stretch;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background-image: url(img/banner4.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 0 clamp(16px, 10vw, 142px);

  .text-banner {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;

    h1 {
      color: #fff;

      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);

      font-size: clamp(24px, 5vw, 64px);
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }

    h2 {
      font-size: clamp(24px, 5vw, 64px);
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      color: #fff;

      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
    }

    h3 {
      color: #edecf3;
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }

    a {
      padding: 10px 59px;
      border-radius: 6px;
      background: #fcc65a;
      color: #333333;
      border: none;
      font-size: clamp(16px, 2vw, 24px);
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      text-decoration: none;
    }
  }
}

.main {
  margin: clamp(40px, 8vw, 80px) 0;
  display: flex;
  flex-wrap: wrap;
  padding: 0 clamp(16px, 8vw, 140px);
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  justify-content: center;
  align-self: stretch;

  .feature {
    display: flex;
    width: clamp(280px, 40vw, 376px);
    flex-direction: column;
    align-items: center;
    gap: 24px;

    img {
      width: 124.79px;
      height: 124px;
    }

    h3 {
      color: #333;
      text-align: center;
      font-size: clamp(16px, 2vw, 24px);
      font-weight: 700;
      line-height: normal;
      height: 58px;
    }

    p {
      color: #3e3e3e;
      text-align: center;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }
}

.about-us {
  display: flex;
  flex-wrap: wrap;
  padding: clamp(40px, 5vw, 80px) clamp(16px, 10vw, 140px);
  align-items: center;
  gap: 32px;
  align-self: stretch;
  background-image: url(img/banner3.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  .text {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;

    h2 {
      color: #4c4184;
      font-size: clamp(24px, 5vw, 48px);
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }

    h3 {
      color: #333;
      font-size: clamp(16px, 2vw, 24px);
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }

    p {
      color: #333;
      font-size: clamp(16px, 2vw, 24px);
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }
}

.services {
  display: flex;
  margin: clamp(40px, 8vw, 80px) 0;
  padding: 0 clamp(16px, 8vw, 140px);
  flex-direction: column;
  align-items: center;
  gap: 32px;
  align-self: stretch;

  .title {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;

    h2 {
      color: #333;
      font-size: clamp(24px, 5vw, 48px);
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }

    p {
      width: clamp(300px, 60vw, 864px);
      color: #3e3e3e;
      text-align: center;
      font-size: clamp(16px, 2vw, 24px);
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }

  .cards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;

    .card {
      display: flex;
      width: clamp(300px, 40vw, 375px);
      padding: clamp(16px, 4vw, 24px);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 24px;
      flex-shrink: 0;
      border-radius: 16px;
      background: #f8fafc;
      border: none;

      h4 {
        color: #4b4b4b;
        text-align: center;
        font-size: clamp(16px, 2vw, 24px);
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }

      button {
        color: #70679d;
        font-size: clamp(16px, 2vw, 24px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-decoration-line: underline;
        border: none;
        background: none;
      }
    }

    .card:hover {
      background: #4c4184;
      color: white;
      h4 {
        color: white;
      }

      img {
        filter: brightness(0) invert(1);
      }

      button {
        color: white;
      }
    }

    .active {
      background: #4c4184;
      color: white;
      h4 {
        color: white;
      }

      img {
        filter: brightness(0) invert(1);
      }

      button {
        color: white;
      }
    }
  }
}

.extra-content-container {
  margin: clamp(40px, 8vw, 80px) 0;
  display: flex;
  gap: 12px;
  margin-top: 20px;
  justify-content: center;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}

.extra-content-container.show {
  opacity: 1;
}

.extra-content-container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  padding: 20px;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
}

.extra-card {
  flex: 1;
  min-width: 250px; /* Tamaño mínimo */
  max-width: 300px; /* Tamaño máximo */
  border-radius: 0px 8px 8px 0px;
  border-left: 5px solid #4c4184;
  background: #f8fafc;
  padding: 15px;
  gap: 16px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease;
}

.extra-card:hover {
  transform: translateY(-5px);
}

.extra-card img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.extra-card h5 {
  font-size: 16px;
  color: #333;
}

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

.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slide-track {
  display: flex;
  align-items: center;
  gap: 3em;
  width: max-content; /* Asegura que la animación sea continua */
  animation: scroll 20s linear infinite;
}

.slide img {
  max-width: 150px;
}

/* 🛠 Ajuste de velocidad en mobile */
@media (max-width: 768px) {
  .slide-track {
    animation: scroll 50s linear infinite; /* Más lento en mobile */
  }
}

/* 🎥 Animación */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Se desplaza la mitad porque clonamos */
  }
}

.logos {
  display: flex;
  padding: 0 clamp(16px, 8vw, 140px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
  align-self: stretch;
  margin-bottom: 80px;

  h2 {
    color: #333;
    text-align: center;
    font-size: clamp(24px, 5vw, 48px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .subtitle {
    color: #4c4184;
    font-size: clamp(24px, 5vw, 48px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}

.news-banner {
  display: flex;
  padding: clamp(24px, 5vw, 48px) clamp(16px, 8vw, 140px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background-image: url(img/news-banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  p {
    color: #edecf3;
    text-align: center;
    font-size: clamp(16px, 2vw, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  h3 {
    color: #fff;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  a {
    display: flex;
    padding: 10px 59px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: clamp(16px, 2vw, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 6px;
    background: #fcc65a;
    border: none;
    text-decoration: none;
  }
}

.news {
  margin: clamp(40px, 8vw, 80px) 0;
  display: flex;
  padding: 0 clamp(16px, 8vw, 140px);
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .title {
    display: flex;
    width: clamp(300px, 60vw, 795px);
    flex-direction: column;
    align-items: center;
    gap: 16px;
    h2 {
      color: #333;
      text-align: center;
      font-size: clamp(24px, 5vw, 48px);
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }

    p {
      color: #3e3e3e;
      text-align: center;
      font-size: clamp(16px, 2vw, 24px);
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }

  .cards {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;

    .card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1 0 clamp(280px, 40vw, 376px);
      min-width: clamp(280px, 40vw, 376px);
      border-radius: 32px;
      box-shadow: 2px 2px 11.3px 0px rgba(0, 0, 0, 0.1);
      border: none;
      background: #f8fafc;
      overflow: hidden;

      img {
        width: 100%;
      }

      .info-news {
        display: flex;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;

        .date {
          display: flex;
          align-items: flex-end;
          gap: 16px;

          i {
            color: #4c4184;
            font-size: 20px;
          }
          p {
            color: #64748b;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin: 0;
          }
        }

        h4 {
          color: #000;
          font-size: 20px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }

        p {
          color: #3e3e3e;
          font-size: 20px;
          font-style: normal;

          line-height: normal;
        }

        a {
          color: #70679d;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          text-decoration-line: underline;
          text-decoration-style: solid;
          text-decoration-skip-ink: none;
          text-decoration-thickness: auto;
          text-underline-offset: auto;
          text-underline-position: from-font;
          border: none;
          background: none;
          padding-right: 4px;

          i {
            font-size: 20px;
          }
        }
      }
    }
  }
}

.contact-form {
  display: flex;
  padding: clamp(16px, 5vw, 80px) clamp(16px, 7vw, 140px);
  padding-top: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.contact-form .contact-info {
  display: flex;
  padding: 32px clamp(16px, 4vw, 32px);
  flex-direction: column;
  justify-content: center;
  align-items: left;
  align-self: stretch;
  gap: clamp(16px, 4vw, 48px);
  flex: 1 0 0;
  width: 100%;
  border-radius: 24px 0px 0px 24px;
  background: #4c4184;

  h2 {
    color: #f6f6f6;
    font-size: clamp(20px, 3vw, 32px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  a {
    color: #fff;
    font-size: clamp(12px, 2vw, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: clamp(4px, 2vw, 8px);
  }

  i {
    font-size: 20px;
    color: #fff;
  }

  .location {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(2px, 1vw, 4px);
  }
  .city {
    color: #fff;
    font-size: clamp(12px, 2vw, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: clamp(4px, 2vw, 8px);
  }

  .service {
    color: #fff;
    font-size: clamp(12px, 2vw, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}
.form-info {
  display: flex;
  width: clamp(90%, 784px, 100%); /* Se ajusta entre 90% y 784px */
  padding: clamp(16px, 4vw, 32px) clamp(16px, 3vw, 32px) clamp(16px, 4vw, 32px)
    clamp(24px, 5vw, 75px);
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  border-radius: 0px 24px 24px 0px;
  background: #f8fafc;
  box-shadow: 2px 3px 9.3px 0px rgba(0, 0, 0, 0.1);

  h2 {
    color: #333;
    font-size: clamp(24px, 4vw, 40px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  h4 {
    color: #3e3e3e;
    font-size: clamp(14px, 2vw, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(16px, 3vw, 33px);
    align-self: stretch;
  }

  input {
    display: flex;
    padding: 8px clamp(8px, 2vw, 16px);
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    border-radius: 8px;
    background: #fff;
    border: none;
    box-shadow: 1px 1px 1.6px 0px rgba(0, 0, 0, 0.1);
  }

  input:focus,
  textarea:focus {
    border: 1px solid #4c4184;
    outline: 1px solid #4c4184; /* Hace más visible el cambio */
  }

  textarea {
    display: flex;
    height: clamp(100px, 20vw, 154px);
    padding: 16px;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: none;
    background: #fff;
    box-shadow: 1px 1px 1.6px 0px rgba(0, 0, 0, 0.1);
  }

  button {
    display: flex;
    padding: 8px clamp(16px, 4vw, 64px);
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    background: #fcc65a;
    border: none;
    color: #fff;
    font-size: clamp(18px, 3vw, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .form-row {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 32px);
    flex-wrap: wrap;
    width: 100%;
  }
}

.footer-banner {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: clamp(16px, 5vw, 25px) clamp(16px, 8vw, 140px);
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  background: #edecf3;

  i {
    color: #4c4184;
    font-size: 20px;
  }

  .social-media {
    display: flex;
    gap: 16px;
    align-items: center;
  }
  p {
    color: #4c4184;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
  }

  a {
    color: #4c4184;
    text-decoration: none;
  }

  .location {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .subtitle {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}

footer {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se acomoden en varias líneas */
  padding: clamp(24px, 5vw, 32px) clamp(16px, 8vw, 140px);
  justify-content: space-between;
  align-items: center;
  background: #4c4184;
  color: white;
  text-align: center;
}

footer img {
  max-width: 150px; /* Ajusta el tamaño del logo en pantallas pequeñas */
}

.nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0;
  margin: 0;
}

.nav ul li {
  display: inline;
}

.nav ul li a {
  text-decoration: none;
  color: white;
  font-size: 14px;
  font-weight: 400;
}

footer p {
  font-size: 14px;
}

/* 🔹 Responsive para Tablets y Móviles */
@media (max-width: 1024px) {
  .contact-form {
    flex-direction: column;
  }
  .contact-form .contact-info {
    border-radius: 24px 24px 0px 0px;
  }
  .form-info {
    border-radius: 0px 0px 24px 24px;
  }

  footer {
    flex-direction: column; /* Acomoda los elementos en columna */
    padding: 24px;
    gap: 16px;
  }

  .nav ul {
    flex-wrap: wrap; /* Permite que los links se acomoden en varias líneas */
    justify-content: center;
    gap: 16px;
  }

  footer img {
    max-width: 120px; /* Reduce el tamaño del logo en móviles */
  }

  .about-us {
    img {
      width: 100%;
    }
  }

  header {
    display: none;
  }
}