main {

      display: flex;
      justify-content: center; /* Centra horizontalmente */
      align-items: center;    /* Centra verticalmente */
            /* Ocupa el 100% de la altura visible */
     
    }

    /* 
      CONTENEDOR DE TARJETAS 
      Permite colocar las tarjetas en fila con separación entre ellas.
    */
    .cards-container {
      display: flex;
      flex-direction: column ; 
      gap: 2rem; /* Separnación horizontal entre tarjetas */
      align-items:center ;
    }

    /* 
      TARJETA 
      Diseño de cada tarjeta con fondo, borde redondeado, sombra y espaciado.
    */
    .card {

      border-radius: 8px;
      text-align: center; 
      width: 90%;   /* Ancho fijo para mantener uniforme la presentación */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      cursor: pointer;
      display:flex ;
      flex-direction: row ;
      align-items: center ; 
      justify-content: space-around;
      border: 1px solid #ffffff;
      color: #ffffff ;
      height: 150px;
      padding: 10px;

    }
    

    /* 
      EFECTO HOVER 
      Un pequeño “zoom” al pasar el mouse, para atraer la atención.
    */
    .card:hover {
      transform: scale(1.05);
    }

    /* 
      TITULOS DE TARJETA
    */
    .card h2 {
      margin: 0px 10px;
      font-size: 1.5rem;
      color: #f2f2f2;
    }

    /* 
      DESCRIPCIÓN DE TARJETA
    */
    .card p {
      margin-bottom: 1.5rem;
      color: #f3f3f3;
      max-width: 250px ;
      
    }


    /* Estilos para responsividad y menú de hamburguesa */
@media screen and (max-width: 868px) {
 
  .cards-container {
    display: flex;
    flex-direction: column ; 
    gap: 2rem; /* Separnación horizontal entre tarjetas */
    align-items:center ;
    margin: 90px 0px;
  }

   }