/* styles.css */

.card-custom {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 
    .card-custom:
    - Aplica una transición suave de 0.3 segundos para las propiedades `transform` y `box-shadow`.
    - Facilita un efecto visual agradable al interactuar con la tarjeta.
  */

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  /* 
    - Establece una sombra inicial más notable en la tarjeta para darle un efecto de elevación.
  */

  border: none;
  /* 
    - Elimina el borde alrededor de la tarjeta.
  */

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

.card-custom:hover {
  transform: scale(1.02);
  /* 
    - Al hacer hover sobre la tarjeta, se escala ligeramente (2% más grande).
  */

  box-shadow: 0 10px 20px rgba(0, 191, 255, 0.5);
  /* 
    - Cambia la sombra al hacer hover, dándole un efecto de elevación más pronunciado con un color celeste.
  */

  cursor: pointer;
  /* 
    - Cambia el cursor a una mano para indicar que es interactivo.
  */
}

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

  transition: color 0.3s ease;
  /* 
    - Aplica una transición suave de 0.3 segundos para el color del icono.
  */
}

/* Estilos para la lista */
.list-unstyled {
  padding-left: 0;
  /* 
    - Elimina el padding izquierdo para que la lista esté alineada a la izquierda.
  */

  list-style: none;
  /* 
    - Elimina los puntos o viñetas de la lista.
  */
}

.list-unstyled li {
  margin-bottom: 10px;
  /* 
    - Agrega un margen inferior de 10px entre cada elemento de la lista.
  */
}

.list-unstyled li a {
  text-decoration: none;
  /* 
    - Elimina el subrayado de los enlaces.
  */

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

  transition: color 0.3s ease;
  /* 
    - Aplica una transición suave de 0.3 segundos para el color del enlace.
  */

  display: block;
  /* 
    - Hace que el enlace ocupe todo el ancho del elemento padre, facilitando la interacción.
  */
}

.list-unstyled li a:hover {
  color: #25e0ee;
  /* 
    - Cambia el color del texto del enlace a celeste al hacer hover.
  */
}

.section {
  background-color: #e0f7fa;
  /* 
    - Establece un fondo celeste claro para las secciones.
  */

  margin-bottom: 10px;
  /* 
    - Agrega un margen inferior de 10px entre las secciones.
  */

  padding: 10px 20px;
  /* 
    - Aplica un padding de 10px en la parte superior e inferior y 20px a los lados.
  */

  border-radius: 5px;
  /* 
    - Redondea las esquinas del contenedor de la sección.
  */

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 
    - Agrega una sombra sutil para dar un efecto de profundidad.
  */
}

.section h3 {
  color: #1255b3;
  /* 
    - Define el color azul para los títulos de las secciones.
  */

  cursor: pointer;
  /* 
    - Cambia el cursor a una mano, indicando que es interactivo.
  */

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

  margin: 0;
  /* 
    - Elimina el margen superior e inferior del título.
  */

  padding-bottom: 8px;
  /* 
    - Añade un espacio inferior entre el título y el contenido.
  */
}

.content {
  display: none;
  /* 
    - Inicialmente oculta el contenido, para que no sea visible hasta que se active.
  */

  margin-top: 10px;
  /* 
    - Agrega un margen superior de 10px para espaciar el contenido de otros elementos.
  */
}

.animated-line {
  animation: expand-line 1s ease-out forwards;
  /* 
    - Aplica una animación llamada "expand-line" que dura 1 segundo, usando una transición fácil y que avanza en dirección al final.
  */
}

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

@media (max-width: 768px) {
  h2 span {
    display: block;
    /* 
      - Cambia el comportamiento del elemento `span` dentro de los `h2` a bloque en pantallas más pequeñas.
    */

    padding: 10px;
    /* 
      - Añade un padding de 10px alrededor del `span` para mejor separación.
    */
  }

  .animated-line {
    width: 80%;
    /* 
      - En pantallas más pequeñas, ajusta el ancho de la línea animada al 80%.
    */
  }
}