@import url('https://fonts.cdnfonts.com/css/open-sans');
*{
  font-family: 'Open Sans', sans-serif;
}

html, body {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #3A6D8C;
  color: black;
  letter-spacing: 0.003em;
  line-height: 1.6;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* Inicio del header */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 94px;
  background: #001F3F;
  padding: 0 20px;
  position: sticky;
  top: 0;
}

.logo {
  display: flex;
  align-items: center;
}

.logo1 {
  width: 55px;
  height: auto;
  margin-right: 10px;
}

.logo-title {
  text-decoration: underline;
  color: white;
}

.menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.menu-center {
  display: flex;
  justify-content: center;
  width: 100%;
}

.menu a {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  transition: 0.4s;
}



.recientes {
  text-align: center;
  text-decoration: underline;
  color: white;
  margin: 20px 0;
}

.hamburguesa {
  display: none;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Ocultar el checkbox */
.menu-toggle {
  display: none;
}

/* Menú */
.menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/*Fin del header*/

/* tarjetas */
.event-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;
  height: auto;
  width: 100%;
  margin: 0 auto;
  
}

.event-date {
  color: #ffffff;
  font-size: 1em;
  font-weight: bold;
}

.event-item {
  display: flex;  
  background-color: #2c2c2c;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  max-width: 800px;
  margin-top: 10px;
}

.event-image {
  width: 300px;
  height: auto;
  object-fit: cover;
}

/*Tarjetas de sobre nosotros*/
.event-item-about {
  display: flex;
  flex-direction: column; /* Organiza el contenido en columna */
  background-color: #2c2c2c;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  max-width: 800px;
  margin-top: 10px;
}

.event-image-about {
  width: 100%; /* Asegura que la imagen ocupe el ancho completo */
  height: auto;
  object-fit: cover;
}

.mailto {
  color: #0159b1;
  text-decoration: none;
}

.mailto:hover {
  text-decoration: underline;
}

.event-content {
  padding: 20px;
}

.event-title {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #fff;
}


.event-description {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: white;
}

hr {
  background-color: white;
  width: 80%;
  height: 3px;
  margin-top: 20px;
  margin-bottom: 20px;
  
}


/* Contenedor para centrar el formulario */
.form-container {
  top: 0;
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
}


/* Formulario */
form {
  top: 0;
  display: flex; 
  flex-direction: column; /* Organiza los elementos en columna */
  align-items: center; /* Centra horizontalmente los elementos del formulario */
  padding: 20px;
  background-color: #2c2c2c; 
  border-radius: 10px; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.form-element {
  margin: 10px 0; 
  width: 100%;
}

input {
  padding: 10px;
  margin: 3px;
  border-radius: 10px;
  border: 1px solid #ccc;
  max-width: 300px;
  width: 100%;
  box-sizing: border-box;
}

button {
  border: 0;
  border-radius: 10px;
  background: #6A9AB0;
  font-size: 15px;
  padding: 10px;
  margin: 3px;
  cursor: pointer;
  
  box-sizing: border-box;
}

button:hover {
  background: #001F3F;
}

label {
  padding: 10px;
  margin: 3px;
  max-width: 300px;
  width: 100%;
  box-sizing: border-box;
  color: azure;
}
/* Footer */
footer {
  background-color: #001F3F;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; /* Reduce el padding para hacer el footer más bajo */
  margin-top: auto; /* Empuja el footer hacia abajo */
}

.footer-text {
  color: azure;
  font-size: 0.9rem; /* Ajusta el tamaño de la fuente si es necesario */
}

.footer-icons {
  display: flex;
}


.footer-icons img {
  padding: 5px; /* Reduce el espacio alrededor de los iconos */
  height: 30px; /* Reduce el tamaño de los iconos */
  width: 30px;
}

.contact-content {
  padding: 20px;
}

/*Media query para que solo se aplique la animacion del header en desktop*/
@media (min-width: 576px) {
  .text-center:hover {
    padding: 0 80px;
    transition: padding 0.4s ease;
  }
}


/*Movil*/
@media (max-width: 575.98px) {
  /* Mostrar el ícono del menú hamburguesa */
  .hamburguesa {
    display: block;
    position: absolute; /* Hacemos que la hamburguesa flote */
    left: 80%; /* Alineamos a la derecha del header */
    top: 15px; /* Ajusta la altura del ícono dentro del header */
  }

  /* Ocultar menú inicialmente */
  .menu {
    display: none;
    flex-direction: column;
    background-color: #001F3F;
    position: absolute;
    top: 94px;
    left: 0;
    width: 100%;
  }

  /* Mostrar menú al hacer click en el ícono */
  .menu-toggle:checked + .hamburguesa + .menu {
    display: flex;
  }

  /* Alinear elementos en una columna */
  .menu-center {
    display: flex;
    flex-direction: column; /* Apilar verticalmente */
  }

  .menu-center a {
    padding: 15px;
    border-bottom: 1px solid white;
    width: 100%;
  }



  header {
    width: 100%;
    padding: 10px;
  }
  .event-item {
    display: grid;
    background-color: #2c2c2c;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    margin-top: 10px;
    width: 95%;

  }
  .event-title {
    /* arriba | derecha | abajo | izquierda */
    padding-left: 10px;
  }
  .event-date {
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    text-align: left; /* Asegura la alineación a la izquierda */
    margin: 0; /* Elimina márgenes indeseados */
    padding: 10px;
  }


 
  .event-description {
    padding: 10px;
  }

  .event-image {
    width: 100%;
    height: auto;
  }


}