/*
  Grid propio de Alpa Jaguar — reemplaza Bootstrap 5.0.0-beta1 (153 KB)
  Replica únicamente las clases de grid realmente usadas en el sitio:
  container, row, col-xs/sm/md/lg-N, offset-lg-1, align-self-center.
  Bootstrap no aportaba ningún componente JS (modal/dropdown/collapse/etc.),
  así que dejar de cargarlo no quita ninguna funcionalidad.
*/

.container {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}

[class^="col-"], [class*=" col-"] {
  position: relative;
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

.align-self-center { align-self: center; }
.align-center { text-align: center; }

/* --- Base (móvil, equivalente a col-xs-N) --- */
.col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xs-6 { flex: 0 0 50.0%; max-width: 50.0%; }
.col-xs-12 { flex: 0 0 100.0%; max-width: 100.0%; }

/* --- >= 576px (equivalente a col-sm-N) --- */
@media (min-width: 576px) {
  .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-6 { flex: 0 0 50.0%; max-width: 50.0%; }
  .col-sm-12 { flex: 0 0 100.0%; max-width: 100.0%; }
}

/* --- >= 768px (equivalente a col-md-N) --- */
@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-6 { flex: 0 0 50.0%; max-width: 50.0%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100.0%; max-width: 100.0%; }
}

/* --- >= 992px (equivalente a col-lg-N + offset-lg-1) --- */
@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-lg-3 { flex: 0 0 25.0%; max-width: 25.0%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6 { flex: 0 0 50.0%; max-width: 50.0%; }
  .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9 { flex: 0 0 75.0%; max-width: 75.0%; }
  .col-lg-12 { flex: 0 0 100.0%; max-width: 100.0%; }
  .offset-lg-1 { margin-left: 8.333333%; }
}

/*
  Carrusel del hero — reemplaza Swiper.js (reemplazo directo de las
  mismas clases: swiper-container, swiper-wrapper, swiper-slide,
  swiper-slide-active — cero cambios de markup en las 34 páginas
  que lo usan).
*/
.swiper-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.swiper-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease;
  z-index: 0;
}

.swiper-slide.swiper-slide-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}