/* ══════════════════════════════════════════════════════════════════
   /nosotros — lo unico que NO tiene molde servible

   El carrusel de "Leadership" de company.html lo mueve Swiper, que no
   esta en este sitio. El markup es el del molde (swiper-group > swiper >
   swiper-wrapper > swiper-slide, con sus data-swiper-*); lo que falta es
   el desplazamiento, que se resuelve con scroll-snap nativo.

   Regla de la casa: clases propias con prefijo `ot-` y SOLO variables de
   Huge. Ni un color, ni un tamano ni un radio fuera de las variables.
══════════════════════════════════════════════════════════════════ */

.ot-carrusel .swiper {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Huge deja `.swiper{overflow:visible!important}` porque ahi manda la
     libreria. Sin libreria, la pista tiene que poder desplazarse. */
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.ot-carrusel .swiper::-webkit-scrollbar { display: none; }

.ot-carrusel .swiper-slide {
  scroll-snap-align: start;
  width: 100%;
  max-width: var(--spacing-70);
}

@media (min-width: 768px) {
  .ot-carrusel .swiper-slide { width: 50%; }
}

@media (min-width: 1024px) {
  .ot-carrusel .swiper-slide { width: 33.3333%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ot-carrusel .swiper { scroll-behavior: auto; }
}