/* Estilos para las tarjetas */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 
    - Aplica una transición suave de 0.3 segundos para `transform` y `box-shadow`.
    - Mejora la interacción visual al mover el mouse sobre la tarjeta.
  */

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

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

/* Efecto hover para la sombra */
.card-hover:hover {
  transform: scale(1.05);
  /* 
    - Al hacer hover, la tarjeta se agranda un 5%.
  */

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

.mision {
  background-color: #e0f7fa;
  /* 
    - Establece un fondo celeste claro para la tarjeta de misión.
  */

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  /* 
    - Sombra inicial más notable para la tarjeta de misión.
  */

  border: none;
  /* 
    - Elimina el borde alrededor de la tarjeta de misión.
  */
}

.mision:hover {
  transform: scale(1.05);
  /* 
    - Al hacer hover, la tarjeta de misión se agranda un 5%.
  */

  border-radius: 5px;
  /* 
    - Redondea las esquinas de la tarjeta de misión al hacer hover.
  */

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

.vision {
  background-color: #e0f7fa;
  /* 
    - Establece un fondo celeste claro para la tarjeta de visión.
  */

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  /* 
    - Sombra inicial más notable para la tarjeta de visión.
  */

  border: none;
  /* 
    - Elimina el borde alrededor de la tarjeta de visión.
  */
}

.vision:hover {
  transform: scale(1.05);
  /* 
    - Al hacer hover, la tarjeta de visión se agranda un 5%.
  */

  border-radius: 5px;
  /* 
    - Redondea las esquinas de la tarjeta de visión al hacer hover.
  */

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

/* Estilos adicionales para el contenido de las tarjetas */
.card-body h4 {
  font-size: 1.5rem;
  /* 
    - Define un tamaño de fuente de 1.5rem para los encabezados de nivel 4 dentro de las tarjetas.
  */

  font-weight: 600;
  /* 
    - Establece un peso de fuente más grueso para resaltar los títulos.
  */

  color: #1255b3;
  /* 
    - Define un color azul oscuro para los títulos.
  */
}

.card-body p {
  font-size: 1rem;
  /* 
    - Establece un tamaño de fuente de 1rem para los párrafos dentro de las tarjetas.
  */

  color: #6c757d;
  /* 
    - Define un color gris para el texto del párrafo, proporcionando un contraste suave con el fondo.
  */

  line-height: 1.5;
  /* 
    - Establece la altura de línea para mejorar la legibilidad del texto.
  */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  .card-body {
    padding-top: 20px;
    /* 
      - Aplica un padding superior de 20px para espaciar el contenido en pantallas pequeñas.
    */

    text-align: center;
    /* 
      - Centra el contenido en pantallas pequeñas para una mejor presentación.
    */
  }

  .card {
    margin-bottom: 30px;
    /* 
      - Añade espacio adicional entre las tarjetas en pantallas pequeñas.
    */
  }
}

:root {
  --bs-gutter-x: 0;
  /* 
    - Establece la variable CSS `--bs-gutter-x` a 0, eliminando el espacio horizontal entre columnas.
  */
}

.animated-line {
  width: 0%;
  /* 
    - Comienza desde el centro con un ancho de 0, lo que significa que no es visible inicialmente.
  */

  animation: expandLine 1s ease forwards;
  /* 
    - Aplica una animación llamada "expandLine" que dura 1 segundo, utilizando una transición suave y avanza en dirección al final.
  */
}

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

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