/* Asegurar que todo el contenido se ajuste al viewport */
html, body {
    overflow-x: hidden !important; /* Eliminar scroll horizontal */
    max-width: 100vw; /* Ancho máximo del viewport */
    min-height: 100vh;
    margin: 0;
    padding: 0;
  }
  
  /* Forzar que todos los elementos respeten el ancho del viewport */
  body > * {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  /* Controlar elementos problemáticos */
  img, video, iframe, table, .container, .row, .col {
    max-width: 100%;
    height: auto;
    object-fit: cover; /* Para imágenes y videos */
  }
  
  /* Evitar desbordamiento en elementos posicionados */
  .position-absolute,
  .position-fixed {
    left: 0;
    right: 0;
    width: 100%;
    transform: translateX(-50%); /* Para centrar elementos */
  }
  
  /* Asegurar que los contenedores no generen overflow */
  .container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Ajustes específicos para pantallas pequeñas */
  @media (max-width: 768px) {
    /* Eliminar márgenes/paddings laterales */
    body {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  
    /* Forzar imágenes y videos a ocupar el 100% del ancho */
    img, video {
      width: 100%;
      height: auto;
    }
  
    /* Evitar desbordamiento en elementos flotantes */
    .position-absolute,
    .position-fixed {
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
    }
  
    /* Ajustar tablas para que no sobresalgan */
    table {
      display: block;
      overflow-x: auto;
    }
  }
  
  /*------------SLIDER--------------*/
/* Contenedor principal */
.swiper-container {
    display: flex;
    flex-direction: column; /* Coloca los carruseles en dos filas */
    /*gap: 20px;  Espacio entre los dos carruseles */
}

/* Estilos generales para ambos carruseles */
.swiper {
    width:50%; /* Cada carrusel ocupa todo el ancho disponible */
    height: auto; /* Altura fija del carrusel */
}

/* Ajuste de los slides */
.swiper-slide {
    display: flex; /* Centra la imagen horizontal y verticalmente */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    overflow: hidden; /* Evita que la imagen sobresalga del contenedor */
    /*background-color: #f8f8f8;  Fondo opcional para ver mejor el centrado */
}

/* Ajuste de las imágenes dentro de los slides */
.swiper-slide img {
    max-width: 100%; /* La imagen no superará el ancho del contenedor */
    max-height: 100%; /* La imagen no superará la altura del contenedor */
    object-fit: contain; /* Asegura que la imagen se ajuste completamente dentro del contenedor */
    width: auto; /* Permite que la imagen mantenga su proporción */
    height: auto; /* Permite que la imagen mantenga su proporción */
}