.card {
  margin: 10px;
  /*
    .card:
    - Añade un margen de 10px alrededor de cada tarjeta para separarlas visualmente.
  */
}

.slick-slide {
  margin: 0 10px;
  /*
    .slick-slide:
    - Añade márgenes laterales de 10px a cada diapositiva en el carrusel, separando las diapositivas entre sí.
  */
}

.slick-dots li button:before {
  font-size: 16px;
  color: #25e0ee;
  /* 
    .slick-dots li button:before:
    - Cambia el tamaño de fuente de los indicadores (puntos) a 16px.
    - Cambia el color de los indicadores a celeste (#25e0ee).
  */
}

.slick-dots li.slick-active button:before {
  color: #25e0ee;
  /* 
    .slick-dots li.slick-active button:before:
    - Cambia el color del indicador activo a celeste (#25e0ee).
  */
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 
    .video-container:
    - Usa un padding-bottom del 56.25% para mantener un ratio de aspecto 16:9 (ancho:alto).
    - Establece `position: relative;` para permitir que el iframe o video se posicione de manera absoluta dentro de este contenedor.
  */
  height: 0;
  /* Inicialmente, la altura es 0 para crear el ratio de aspecto. */
  overflow: hidden;
  /* Evita que el contenido sobrepase el contenedor. */
  max-width: 100%;
  /* Asegura que el contenedor no exceda el ancho máximo. */
  background: #000;
  /* Establece un fondo negro para el contenedor del video. */
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 
    iframe y video dentro de .video-container:
    - Se posicionan absolutamente para ocupar todo el espacio del contenedor.
    - Se asegura que ambos elementos (iframe o video) llenen el contenedor completamente.
  */
}

/* Modal */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  /* 
    .modal-backdrop:
    - Establece un fondo semitransparente para el fondo del modal (0.5 de opacidad).
    - Cambiar el último valor (0.5) ajustará la opacidad del fondo.
  */
}

/* ./Modal */
.my-carousel {
  position: relative;
  width: 100%;
  /* 
    .my-carousel:
    - Establece el carrusel en posición relativa y ocupa el 100% del ancho de su contenedor.
  */
}

.my-carousel-item {
  display: flex !important;
  justify-content: center;
  align-items: center;
  /* 
    .my-carousel-item:
    - Usa Flexbox para centrar el contenido horizontal y verticalmente.
    - `!important` asegura que estas reglas tengan prioridad sobre otras.
  */
}

.my-carousel-img {
  width: 100%;
  height: auto;
  /* 
    .my-carousel-img:
    - Asegura que la imagen en el carrusel ocupe el 100% del ancho de su contenedor.
    - `height: auto;` mantiene la proporción original de la imagen.
  */
}

.my-slick-prev,
.my-slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  width: 30px;
  height: 30px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  /* 
    .my-slick-prev y .my-slick-next:
    - Botones para navegar en el carrusel.
    - Se posicionan de manera absoluta en el centro vertical del carrusel.
    - `z-index: 9999;` asegura que estén por encima de otros elementos.
    - Tamaño de 30px por 30px y fondo transparente.
  */
}

.my-slick-dots {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;
  /* 
    .my-slick-dots:
    - Posiciona los indicadores de navegación en la parte inferior del carrusel.
    - Centra los puntos horizontalmente.
    - Elimina el padding y margen para una mejor alineación.
  */
}

.my-slick-dots li {
  display: inline-block;
  margin: 0 5px;
  /* 
    .my-slick-dots li:
    - Muestra los puntos de navegación en línea y agrega un margen de 5px entre ellos.
  */
}

.my-slick-dots li button {
  font-size: 0;
  line-height: 0;
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  /* 
    .my-slick-dots li button:
    - Configura el botón para los puntos de navegación.
    - Se oculta el texto del botón y tiene un tamaño de 10px por 10px.
    - `border-radius: 50%;` lo hace circular.
  */
}

.my-slick-dots li button:before {
  content: " ";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #25e0ee;
  /* 
    .my-slick-dots li button:before:
    - Crea un pseudo-elemento que representa el punto de navegación.
    - Establece el color del punto en celeste.
  */
}

.my-slick-dots li.slick-active button:before {
  background-color: #25e0ee;
  /* 
    .my-slick-dots li.slick-active button:before:
    - Cambia el color del punto activo a celeste.
  */
}

/* Tamaño de las noticias */
.car-noticias .card {
  min-height: 480px;
  /* 
    .car-noticias .card:
    - Establece una altura mínima de 480px para las tarjetas de noticias.
    - Puedes ajustar esta altura según tus necesidades.
  */
}