.card-custom {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 
    - Define una transición suave de 0.3 segundos para los cambios de transformación 
    - y de sombra (box-shadow) en la tarjeta personalizada.
  */

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  /* 
    - Añade una sombra inicial notable a la tarjeta, lo que le da un efecto de elevación 
    - con un desplazamiento de 5 píxeles hacia abajo y 15 píxeles de desenfoque.
  */

  border: none;
  /* 
    - Elimina cualquier borde predeterminado en la tarjeta para un diseño más limpio.
  */

  background-color: #e0f7fa;
  /* 
    - Establece un color de fondo celeste claro para la tarjeta.
  */
}

.card-custom:hover {
  transform: scale(1.02);
  /* 
    - Aplica un efecto de escala al pasar el mouse sobre la tarjeta, 
    - aumentándola un 2% para crear un efecto de elevación.
  */

  box-shadow: 0 10px 20px rgba(0, 191, 255, 0.5);
  /* 
    - Aumenta la sombra al pasar el mouse, dándole un tono celeste 
    - más intenso para acentuar el efecto de elevación.
  */

  cursor: pointer;
  /* 
    - Cambia el cursor a una mano al pasar el mouse sobre la tarjeta, 
    - indicando que es interactiva.
  */
}

.icono-card {
  color: #1255b3;
  /* 
    - Establece el color inicial del icono en un tono azul oscuro.
  */

  transition: color 0.3s ease;
  /* 
    - Añade una transición suave para el cambio de color del icono.
  */
}

/* Estilos para la lista */
.list-unstyled {
  padding-left: 0;
  /* 
    - Elimina el relleno izquierdo de la lista no ordenada.
  */

  list-style: none;
  /* 
    - Elimina los estilos de lista predeterminados (puntos o números).
  */
}

.list-unstyled li {
  margin-bottom: 10px;
  /* 
    - Añade un margen inferior de 10 píxeles a cada elemento de la lista 
    - para separarlos visualmente.
  */
}

.list-unstyled li a {
  text-decoration: none;
  /* 
    - Elimina el subrayado del texto del enlace para un diseño más limpio.
  */

  color: #007bff;
  /* 
    - Establece el color del texto de los enlaces en un azul brillante.
  */

  transition: color 0.3s ease;
  /* 
    - Añade una transición suave para el cambio de color del enlace.
  */

  display: block;
  /* 
    - Hace que el enlace ocupe todo el ancho disponible del contenedor 
    - para facilitar la interacción.
  */
}

.list-unstyled li a:hover {
  color: #25e0ee;
  /* 
    - Cambia el color del texto del enlace a un tono celeste claro al pasar el mouse,
    - indicando que es interactivo.
  */
}

.section {
  background-color: #e0f7fa;
  /* 
    - Establece un color de fondo celeste claro para la sección, 
    - similar al de las tarjetas.
  */

  margin-bottom: 10px;
  /* 
    - Añade un margen inferior de 10 píxeles para separar la sección de otros elementos.
  */

  padding: 10px 20px;
  /* 
    - Aplica un relleno de 10 píxeles en la parte superior e inferior y 20 píxeles a los lados,
    - para un espaciado adecuado.
  */

  border-radius: 5px;
  /* 
    - Redondea las esquinas de la sección para un diseño más suave.
  */

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 
    - Añade una sombra sutil a la sección para darle profundidad.
  */
}

.section h3 {
  color: #1255b3;
  /* 
    - Establece el color del texto del título en un tono azul oscuro.
  */

  cursor: pointer;
  /* 
    - Cambia el cursor a una mano al pasar el mouse, 
    - indicando que el título es interactivo.
  */

  font-size: 1.2rem;
  /* 
    - Establece un tamaño de fuente ligeramente mayor para los títulos.
  */

  margin: 0;
  /* 
    - Elimina el margen superior e inferior para un ajuste más limpio.
  */

  padding-bottom: 8px;
  /* 
    - Añade espacio inferior entre el título y el contenido de la sección.
  */
}

.content {
  display: none;
  /* 
    - Oculta el contenido de la sección por defecto.
  */

  margin-top: 10px;
  /* 
    - Añade un margen superior al contenido para separarlo del título cuando sea visible.
  */
}

.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.
    */
  }
}