/*=========================================================
   RESPONSIVE
   =========================================================*/

/*=========================================================
   ESCRITORIO MEDIANO
   =========================================================*/

@media (max-width:1199px) {
  .navbar__menu {
    gap: .9rem;
    font-size: .86rem;
  }

  .product-grid {
    grid-template-columns: repeat(3,1fr);
  }
}

/*=========================================================
   TABLET HORIZONTAL Y MENÚ MÓVIL
   =========================================================*/

@media (max-width:991px) {
  :root {
    --header-height: 68px;
  }

  .topbar {
    display: none;
  }

  .menu-toggle {
    display: block;
    position: relative;
    z-index: 2;
  }

  .navbar__menu {
    position: fixed;
    inset: 0 0 0 auto;
    display: flex;
    width: min(84vw,380px);
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0;
    padding: 100px 24px 32px;
    color: var(--white);
    background: var(--blue-950);
    box-shadow: -20px 0 40px rgba(0,0,0,.25);
    transform: translateX(110%);
    transition: transform var(--transition-base);
  }

  .navbar__menu.is-open {
    transform: none;
  }

  .navbar__menu>a {
    padding: 1rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  .navbar__menu>a::after {
    display: none;
  }

  .menu-toggle.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .hero__content {
    padding-top: 110px;
  }

  .hero-arrow {
    display: none;
  }

  .intro-strip {
    margin-top: -28px;
  }

  .intro-strip__grid {
    grid-template-columns: 1fr;
  }

  .intro-strip article+article {
    border-top: 1px solid var(--gray-200);
    border-left: 0;
  }

  .split,.faq-layout,.contact-grid {
    grid-template-columns: 1fr;
  }

  .experience-badge {
    right: 18px;
  }

  .stats__grid {
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
  }

  .stat+.stat {
    border-left: 0;
  }

  .service-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .logo-track__inner {
    grid-template-columns: repeat(3,1fr);
  }

  .project-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .client-grid {
    grid-template-columns: repeat(3,1fr);
  }

  .faq-layout__intro {
    position: static;
  }

  .footer__grid {
    grid-template-columns: repeat(2,1fr);
  }
}

/*=========================================================
   TABLET Y CELULAR
   =========================================================*/

@media (max-width:767px) {
  .section {
    padding-block: 3.5rem;
  }

  .brand__text small {
    display: none;
  }

  .hero {
    min-height: 780px;
  }

  .hero__content {
    padding-bottom: 110px;
  }

  .hero-copy h1,.hero-copy h2 {
    font-size: clamp(2.1rem,10vw,3.2rem);
  }

  .hero-slide__overlay {
    background: linear-gradient(90deg,rgba(6,42,77,.9),rgba(6,42,77,.68));
  }

  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .check-grid,.form-grid {
    grid-template-columns: 1fr;
  }

  .stats__grid {
    grid-template-columns: 1fr 1fr;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .product-grid {
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
  }

  .product-card__body {
    padding: 1rem;
  }

  .project-grid {
    grid-auto-rows: 180px;
  }

  .client-grid {
    grid-template-columns: repeat(2,1fr);
  }

  /*Footer centrado en móviles*/

  .footer {
    padding-top: 3.5rem;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2.5rem;
    text-align: center;
  }

  .footer__brand {
    align-items: center;
  }

  .brand--footer {
    justify-content: center;
  }

  .brand__logo--footer {
    height: 58px;
    max-width: 220px;
  }

  .footer__brand p {
    max-width: 320px;
    text-align: center;
  }

  .footer__column {
    align-items: center;
    width: 100%;
  }

  .footer__grid h3,.footer__grid a,.footer__grid span {
    text-align: center;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__bottom {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .footer__legal {
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
  }
}

/*=========================================================
   CELULAR PEQUEÑO
   =========================================================*/

@media (max-width:480px) {
  .container {
    width: min(calc(100% - 1.25rem),var(--container));
  }

  .brand__mark {
    width: 42px;
    height: 42px;
  }

  .hero {
    min-height: 730px;
  }

  .hero-dots {
    bottom: 18px;
  }

  .stats__grid {
    grid-template-columns: 1fr;
  }

  .stat+.stat {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.14);
  }

  .product-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-card__title {
    font-size: .96rem;
  }

  .product-card__description {
    font-size: .84rem;
  }

  .product-card__action {
    padding: .65rem .6rem;
    font-size: .84rem;
  }

  .project-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .project-card--wide {
    grid-column: auto;
  }
}

/*=========================================================
   CELULAR MUY COMPACTO
   =========================================================*/

@media (max-width:360px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/*Logotipo responsive*/

/*=========================================================
   LOGOTIPO EN TABLET
   =========================================================*/

@media (max-width: 991px) {
  .brand__logo {
    height: 50px;
    max-width: 195px;
  }
}

/*=========================================================
   LOGOTIPO EN CELULAR
   =========================================================*/

@media (max-width: 576px) {
  .brand__logo {
    height: 44px;
    max-width: 170px;
  }
}

/*=========================================================
   LOGOTIPO EN CELULAR COMPACTO
   =========================================================*/

@media (max-width: 390px) {
  .brand__logo {
    height: 40px;
    max-width: 150px;
  }
}

/*=========================================================
   MARCAS RESPONSIVE
   =========================================================*/

@media (max-width: 767px) {
  .brand-marquee {
    padding-bottom: 1rem;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      #000 4%,
      #000 96%,
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      #000 4%,
      #000 96%,
      transparent
    );
  }

  .brand-logo-card {
    flex-basis: 160px;
    width: 160px;
    height: 92px;
    padding: 12px;
  }

  .brand-logo-card img {
    filter: grayscale(0%);
    opacity: 1;
  }

  .brand-marquee__track {
    animation-duration: 36s;
  }
}

@media (max-width: 480px) {
  .brand-logo-card {
    flex-basis: 145px;
    width: 145px;
    height: 84px;
  }

  .brand-marquee__group {
    gap: 12px;
    padding-right: 12px;
  }

  .brand__logo--footer {
    height: 50px;
    max-width: 190px;
  }

  .footer__legal {
    flex-direction: column;
  }
}

/*=========================================================
   ACCESIBILIDAD: MOVIMIENTO REDUCIDO
   =========================================================*/

@media (prefers-reduced-motion: reduce) {
  .brand-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .brand-marquee__track {
    animation: none;
  }
}


/*=========================================================
   BANNER MÓVIL - DESPLAZAMIENTO SUAVE
   =========================================================*/

@media (max-width:767px) {
  .hero__content {
    min-height: 780px;
    padding-top: 110px;
    padding-bottom: 110px;
  }

  .hero-copy {
    transform: translate3d(58px,-50%,0);
  }

  .hero-copy.is-active {
    transform: translate3d(0,-50%,0);
  }

  .hero-copy.text-enter-left,
  .hero-copy.text-leave-left {
    transform: translate3d(-58px,-50%,0);
  }

  .hero-copy.text-enter-right,
  .hero-copy.text-leave-right {
    transform: translate3d(58px,-50%,0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-slide {
    transition: none;
  }

  .hero-copy,
  .hero-copy.is-active,
  .hero-copy.text-enter-left,
  .hero-copy.text-enter-right,
  .hero-copy.text-leave-left,
  .hero-copy.text-leave-right {
    transform: translate3d(0,-50%,0);
    transition: opacity .25s ease;
  }
}