@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

*  {
    box-sizing: border-box;
    text-decoration: none;
    }
    
    body {
      margin: 0; /* Elimina el margen predeterminado */
      font-family: "EB Garamond", serif;
      background-color: #f5efeb;
      color: hsla(0, 0%, 30%);
  }


  /* Header */

header {
    padding: 1.5rem;
    background-color: #c8d9e6;
    color: white;
    margin-bottom: 1rem;
  }
  
  .headercontenedora {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  #logodgpc {
    width: 80px;
    height: auto;
    margin: 0;
  }
  
  .botonesheader {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
  }
  
  .header-right a {
    color: hs1(0 0% 30%);
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
  }
  
  .header-right a:hover {
    color: #eef7ff;

  }
  
  /* Adaptación para móvil */
  @media (max-width: 768px) {
    .headercontenedora {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
  
    #logodgpc {
      width: 60px; /* Ajustar tamaño del logo en móvil */
    }
  
    .botonesheader {
      flex-direction: column;
      gap: 0.5rem;
      align-items: center; /* Centrar los botones en móvil */
      padding: 0;
    }
  
    .header-right a {
      padding: 0.5rem 2rem; /* Botones más amplios para facilitar el clic en móvil */
    }
  }
  
  

 img {
    max-width: 100%;
   }
    
    h1, h2, h3{
    color: #2f4156;
    }
    
    a{
        color:#2f4156
       
    }
    



    .contenedor {
    text-align: center;
    max-width: 100rem;
    border-radius: 1rem;
    background-color: #2f4156;
    padding: 2rem;
    color:#c8d9e6 ;
    }

.contenedor-eventos {
   margin: 2rem;
    }


    .tarjetas_rot {
      display: grid;
       grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
       gap: 1rem;
       }

    .tarjeta {
    text-align: center;
    max-width: 100rem;
    margin: 1rem;
    background-color: #c8d9e6;
    padding: 1rem; 
    a:hover {
        color: #eef7ff;
    }

    border-radius: 1rem;
        border: solid 4px #2f4156;
        img{
            clip-path: circle();
        }
    }




    .integrantes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
      gap: 1rem;
      text-align: left;
      margin-left: 2rem;
   }
    



.datos {
  margin: 2rem;
}
     
/* Footer */

footer {
    background-color:#c8d9e6;
    color: #2f4156; 
    margin-top: 2rem; /* Añade margen superior al footer */
  }
  
  footer p {
    margin: 0;
    padding: 1rem;
    font-size: small;
  }