.container {
  width: 100%;
  /* 
    - Establece el contenedor con un ancho del 100% del elemento padre,
    - ocupando todo el espacio disponible.
  */

  display: flex;
  /* 
    - Utiliza un modelo de caja flexible (flexbox) para organizar el contenido 
    - de manera horizontal.
  */

  padding: 0 20px;
  /* 
    - Aplica un relleno horizontal de 20 píxeles a ambos lados del contenedor 
    - para un mejor espaciado interno.
  */
}

.slide {
  height: 80vh;
  /* 
    - Establece la altura de cada slide (diapositiva) al 80% de la altura del viewport, 
    - lo que permite que ocupe una parte significativa de la pantalla.
  */

  border-radius: 20px;
  /* 
    - Redondea las esquinas de la diapositiva con un radio de 20 píxeles 
    - para un diseño más suave.
  */

  margin: 10px;
  /* 
    - Añade un margen de 10 píxeles alrededor de cada diapositiva para separarlas 
    - visualmente.
  */

  cursor: pointer;
  /* 
    - Cambia el cursor a una mano cuando se pasa sobre la diapositiva, 
    - indicando que es interactiva.
  */

  color: #fff;
  /* 
    - Establece el color del texto en blanco para el contenido de la diapositiva.
  */

  flex: 1;
  /* 
    - Permite que cada diapositiva ocupe el mismo espacio proporcionalmente dentro 
    - del contenedor flexible.
  */

  background-size: cover;
  /* 
    - Asegura que la imagen de fondo cubra toda la diapositiva sin deformarse.
  */

  background-position: center;
  /* 
    - Centra la imagen de fondo dentro de la diapositiva.
  */

  background-repeat: no-repeat;
  /* 
    - Evita que la imagen de fondo se repita si no cubre todo el espacio.
  */

  position: relative;
  /* 
    - Establece el contexto para posicionar elementos secundarios (como el texto) 
    - de manera absoluta dentro de la diapositiva.
  */

  transition: all 500ms ease-in-out;
  /* 
    - Añade una transición suave de 500 milisegundos para todos los cambios de estilo,
    - mejorando la interacción visual.
  */
}

.slide h4 {
  position: absolute;
  /* 
    - Posiciona el título de la diapositiva de forma absoluta dentro de su contenedor.
  */

  font-size: 15px;
  /* 
    - Establece un tamaño de fuente de 15 píxeles para el título.
  */

  bottom: 0px;
  /* 
    - Posiciona el título en la parte inferior de la diapositiva.
  */

  margin: 0;
  /* 
    - Elimina el margen predeterminado del título para un ajuste más limpio.
  */

  opacity: 0;
  /* 
    - Inicialmente oculta el título estableciendo su opacidad en 0.
  */

  background-color: rgba(224, 247, 250, 0.7);
  /* 
    - Establece un fondo semitransparente con el color e0f7fa, 
    - mejorando la legibilidad del texto.
  */

  padding: 5px 10px;
  /* 
    - Añade un espacio interno alrededor del texto, con 5 píxeles verticalmente 
    - y 10 píxeles horizontalmente.
  */

  color: #1255b3;
  /* 
    - Establece el color del texto en un tono azul oscuro.
  */
}

.slide.active {
  flex: 10;
  /* 
    - Aumenta la proporción de la diapositiva activa a 10, haciendo que ocupe 
    - más espacio en comparación con las otras diapositivas.
  */
}

.slide.active h4 {
  opacity: 1;
  /* 
    - Muestra el título de la diapositiva activa al establecer su opacidad en 1.
  */

  transition: opacity 0.3s ease-in-out 0.4s;
  /* 
    - Añade una transición suave a la opacidad del título, con una duración de 
    - 0.3 segundos y un retraso de 0.4 segundos, para que aparezca suavemente 
    - después de que la diapositiva se active.
  */
}

.animated-line {
  animation: expand-line 1s ease-out forwards;
  /* 
    - Aplica una animación llamada "expand-line" que dura 1 segundo y usa 
    - una transición suave para expandir el ancho.
  */
}

@keyframes expand-line {
  0% {
    width: 0;
    /* 
      - Al inicio de la animación, el ancho es 0.
    */
  }

  100% {
    width: 100%;
    /* 
      - Al final de la animación, el ancho se expande al 100%, 
      - haciéndola completamente visible.
    */
  }
}

@media (max-width: 768px) {
  h2 span {
    display: block;
    /* 
      - Cambia el span dentro del h2 a bloque en pantallas pequeñas, 
      - para que ocupe toda la línea.
    */

    padding: 10px;
    /* 
      - Añade un relleno de 10 píxeles alrededor del span para mejorar el 
      - espaciado.
    */
  }

  .animated-line {
    width: 80%;
    /* 
      - Reduce el ancho de la línea animada al 80% en pantallas pequeñas 
      - para que se ajuste mejor.
    */
  }
}