/* Variables de colores y estilos */
:root {
  --primColor: #dcdcdc; /* Color principal del fondo */
  --secoColor: #555555; /* Color secundario para el texto */
  --cornerRad: 4px; /* Radio de las esquinas */
}

/* Estilo del body */
body {
  background-color: var(--primColor); /* Establece el color de fondo del body */
  font-family: Arial, Helvetica, sans-serif; /* Tipo de fuente para el texto */
  font-size: 20px; /* Tamaño de fuente por defecto */
  background-repeat: no-repeat; /* Evita que el fondo se repita */
  background-size: cover; /* El fondo cubre todo el área */
  background-position: center; /* Centra el fondo */
  height: 100vh; /* Altura del viewport */
  overflow: visible; /* Evita el scroll si el fondo es más grande que la ventana */
}

/* Reset de márgenes y relleno */
body, margin, padding {
  margin: 0; /* Elimina márgenes del body */
  padding: 0; /* Elimina relleno del body */
}
html, body {
  height: 100%; /* Altura del html y body al 100% */
  margin: 0; /* Elimina márgenes por defecto */
}

body {
  display: flex; /* Utiliza Flexbox para el diseño */
  flex-direction: column; /* Coloca los elementos en columna */
}

/* Estilo del encabezado */
header {
  background-color: #1c335b; /* Color de fondo de la barra de navegación */
  color: #fff; /* Color del texto */
  position: relative; /* Permite posicionar el menú hamburguesa */
}

/* Estilo de la barra de navegación */
.navbar {
  display: flex; /* Utiliza Flexbox */
  justify-content: flex-start; /* Alinea el contenido a la izquierda */
  align-items: center; /* Centra verticalmente */
  height: 80px; /* Altura de la barra de navegación */
  padding: 0 30px; /* Espaciado lateral */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera debajo de la barra */
  position: relative; /* Para posicionar el menú hamburguesa */
}

/* Ajustes generales para el logo */
.navbar-logo {
  height: auto; /* Mantiene proporciones originales */
  max-height: 60px; /* Altura máxima del logo */
  width: auto; /* Ajusta el ancho automáticamente */
}

/* Responsividad para pantallas más pequeñas */
@media (max-width: 768px) {
  .navbar-logo {
      max-height: 40px; /* Ajusta la altura del logo en pantallas pequeñas */
      width: auto; /* Mantiene la proporción correcta */
  }
}

/* Estilo para el icono de menú hamburguesa */
.menu-toggle {
  font-size: 24px; /* Tamaño del icono */
  cursor: pointer; /* Cambia el cursor al pasar sobre él */
  color: white; /* Color del icono */
  position: absolute; /* Posiciona el icono en relación a la barra */
  right: 30px; /* Espacio desde el borde derecho */
}

/* Ocultar el menú por defecto */
.menu {
  display: none; /* Inicialmente oculto */
  position: absolute; /* Posiciona el menú debajo de la barra */
  right: 0; /* Se alinea a la derecha */
  top: 80px; /* Espacio desde el fondo del encabezado */
  background-color: #1c335b; /* Color de fondo del menú */
  width: 200px; /* Ancho del menú */
}

/* Mostrar el menú cuando se activa */
.menu.active {
  display: block; /* Muestra el menú cuando se activa */
}

/* Estilo de los enlaces en el menú */
.menu a {
  display: block; /* Cada enlace ocupa todo el ancho */
  color: white; /* Color del texto del enlace */
  padding: 15px; /* Espaciado interno */
  text-decoration: none; /* Elimina subrayado */
  border-bottom: 1px solid #fff; /* Línea separadora entre enlaces */
}

.menu a:hover {
  background-color: #375688; /* Cambia el color al pasar el cursor */
}

/* Estilo para imágenes en contenedores */
* {
  box-sizing: border-box; /* Incluye padding y border en el tamaño total */
  padding: 0; /* Elimina padding global */
  margin: 0; /* Elimina márgenes globales */
}

body {
  background: #dcdcdc; /* Color de fondo del body */
}

.container {
  display: flex; /* Utiliza Flexbox para el diseño */
  justify-content: center; /* Centra el contenido horizontalmente */
  flex-wrap: wrap; /* Permite que los elementos se envuelvan */
  margin-top:auto; /* Espacio superior para bajar el contenido */
}

.img {
  background: white; /* Fondo blanco para cada tarjeta */
  width: 300px; /* Ancho de la tarjeta */
  height: 500px; /* Altura de la tarjeta */
  margin: 15px; /* Margen alrededor de la tarjeta */
  border-radius: 15px; /* Esquinas redondeadas */
  text-align: center; /* Centra el texto dentro de la tarjeta */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 600px) {
  .img {
    width: 90%; /* Ajusta el ancho para pantallas pequeñas */
    height: auto; /* Altura automática */
    margin: 10px auto; /* Reduce el margen y centra la tarjeta */
  }

  .container {
    padding: 5px; /* Espaciado pequeño alrededor del contenedor */
    margin: 0; /* Elimina margen del contenedor */
  }
}

.img-imagen {
  height: 200px; /* Altura de la imagen dentro de la tarjeta */
  margin-bottom: 15px; /* Espacio debajo de la imagen */
  background-size: cover; /* Cubre el área del contenedor */
  border-radius: 15px 15px 0 0; /* Esquinas redondeadas superiores */
}

/* Clases para las imágenes de las tarjetas */
.img-1 {
  background-image: url(img/Image_20240828142153.jpg); /* URL de la imagen */
}

.img-2 {
  background-image: url(img/f768x1-573243_573370_79.webp); /* URL de la imagen */
}

.img-3 {
  background-image: url(img/186328919-se-entregan-medallas-a-los-ganadores-de-los-eventos-deportivos.jpg); /* URL de la imagen */
}

.img-4 {
  background-image: url(img/Idea-de-negocio-300x200.jpg); /* URL de la imagen */
}

.img-5 {
  background-image: url(img/filosophi.jpg); /* URL de la imagen */
}

.img-6 {
  background-image: url(img/u3M4PQCc_400x400.jpg); /* URL de la imagen */
}

.img-7 {
  background-image: url(img/1630575052657.jpg); /* URL de la imagen */
}

.img-8 {
  background-image: url(img/mejores-universidades-de-Mexico.jpg); /* URL de la imagen */
}

.img-9 {
  background-image: url(img/aabb85182a2ec900735a98b050fcc0e2.jpg); /* URL de la imagen */
}

.img-10 {
  background-image: url(img/grandes-almcenes-dubai-recurso-interior-728.jpg); /* URL de la imagen */
}

.img-11 {
  background-image: url(img/preview-mabe.jpg); /* URL de la imagen */
}

.img-12 {
  background-image: url(img/294858656_186511797151649_2456528765513487864_n.jpg); /* URL de la imagen */
}


/* Espaciado para encabezados y párrafos dentro de las tarjetas */
.img h1, .img p  {
  margin: 30px 0; /* Espaciado alrededor de h1 y p */
}

.img p {
  margin: 20px 0; /* Espaciado arriba y abajo del párrafo */
  padding: 0 20px; /* Espacio lateral para el párrafo */
  text-align: center; /* Justifica el texto */
  font-size: 16px; /* Tamaño de fuente reducido */
}

.img a {
  background-color: #1c335b; /* Color de fondo del botón */
  color: white; /* Color del texto del botón */
  padding: 12px 20px; /* Espaciado interno del botón */
  display: inline-block; /* Botón se ajusta al contenido */
  text-align: center; /* Centra el texto dentro del botón */
  margin: 20px 0; /* Margen para centrar el botón */
  text-decoration: none; /* Elimina subrayado del enlace */
  border-radius: 5px; /* Esquinas redondeadas del botón */
  font-size: 16px; /* Tamaño de fuente del botón */
  width: auto; /* Ajusta el ancho al contenido */
}

.img:hover {
  background-color: #003487; /* Cambia el color al pasar el cursor */
  color: white; /* Mantiene el texto blanco */
  cursor: pointer; /* Cambia el cursor al pasar sobre la tarjeta */
  transform: scale(1.05); /* Aumenta la escala del hover */
  transition: all 0.3s ease; /* Suaviza la transición */
}

/* ESTILO ARTÍCULOS */
article.convenio {
  padding: 10px; /* Espaciado interno del artículo */
  margin: 5px 10px; /* Margen en los lados */
  border-radius: 10px; /* Esquinas redondeadas */
  background-color: #f7f7f7; /* Fondo suave para el artículo */
}

/* Ajustes para pantallas más pequeñas */
@media (max-width: 768px) {
  .main-content {
    max-width: 100%; /* Ocupa el ancho completo */
    margin: 10px auto; /* Centra el contenido */
    padding: 20px; /* Espaciado interno */
    min-height: auto; /* Altura mínima ajustada */
  }
}

/* Contenedor para centrar la imagen */
.img-contenido {
  text-align: center; /* Centra el contenido */
}

/* Imagen ajustada */
.img-contenido img {
  width: 100%; /* Ancho completo del contenedor */
  max-width: 600px; /* Ancho máximo */
  border-radius: 8px; /* Esquinas redondeadas */
  margin-bottom: 20px; /* Espacio debajo de la imagen */
}

.txt-contenido {
  margin-top: 20px; /* Espacio superior */
}

/* Estilo para el botón */
.botton-map {
  display: block; /* Cambia a block para que se pueda centrar */
  padding: 10px 20px; /* Espaciado interno */
  background-color: #1c335b; /* Color de fondo */
  color: white; /* Color del texto */
  text-decoration: none; /* Elimina subrayado */
  font-weight: bold; /* Negrita para el texto */
  border-radius: 25px; /* Botón redondeado */
  box-shadow: 0 4px 8px rgba(26, 19, 72, 0.2); /* Sombra del botón */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
  text-align: center; /* Centra el texto del botón */
  width: fit-content; /* Ajusta el tamaño al contenido */
  margin: 20px auto; /* Centra el botón horizontalmente */
}

.botton-map:hover {
  background-color: #003487; /* Color más claro al pasar el ratón */
  transform: scale(1.05); /* Pequeño zoom al hacer hover */
}

/* Responsividad para el mapa */
.maps {
  width: 50%; /* Ancho del mapa */
  height: 300px; /* Altura del mapa */
  border: 0; /* Sin borde */
  border-radius: 10px; /* Esquinas redondeadas */
}

/* Ajustes de responsividad para móviles */
@media (max-width: 768px) {
  .maps {
    width: 320px; /* Ajusta el ancho para móviles */
    height: 250px; /* Ajusta la altura del mapa para móviles */
  }

  .botton-map {
    padding: 8px 15px; /* Botón más pequeño en pantallas pequeñas */
    font-size: 1rem; /* Tamaño de fuente ajustado */
  }

  .txt-contenido {
    margin: 10px; /* Espacio ajustado */
  }
}

/* ESTILO PARA PIE DE PÁGINA */
footer {
  background-color: #1c335b; /* Color de fondo del pie de página */
  color: #fff; /* Color del texto */
  text-align: center; /* Centra el texto */
  padding: 15px; /* Espaciado interno */
  width: 100%; /* Ancho completo */
  margin-top: auto; /* Empuja el footer hacia abajo */
}

.footer-content p {
  margin: 0; /* Elimina margen */
  font-size: 14px; /* Tamaño de fuente */
}

/* Estilos específicos para pantallas pequeñas */
@media (max-width: 768px) {
  footer {
    padding: 10px; /* Reduce el padding en pantallas más pequeñas */
  }

  .footer-content p {
    font-size: 12px; /* Reduce el tamaño de la fuente */
  }
}