/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Maps*/

.map-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 700px;   /* ?? límite de ancho en pantallas grandes */
}

.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Submenú desplegable en escritorio */
.submenu {
    display: none;
    position: absolute;
    top: 100%; /* Justo debajo del menú principal */
    left: 0;
    background-color: #444;
    min-width: 150px;
    padding: 5px 0;
    border-radius: 5px;
}

.submenu a {
    display: block;
    color: #fff;
    padding: 10px;
    text-decoration: none;
}

.submenu a:hover {
    background-color: #555;
    color: #ffcc00;
}

/* Mostrar submenú al pasar por encima en escritorio */
.menu-item:hover .submenu {
    display: block;
}

/* Imagen central */
.central-image img {
    width: 150px;
    cursor: pointer;
}
/* Textos */

.encabezadonoticia {
color:#D99502;
}


/* Imagen principal */
.fullscreen-image {
background-image:url(../img/IMGCENTER.jpg); /* Ruta de la imagen */
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 30vh; /* Altura inicial al 30% de la altura de la pantalla */
    max-height: 300px; /* Altura máxima de 300px */
    min-height: 200px; /* Altura mínima de 200px */
}

.image-container {
    width: 100%; /* El div ocupa el 80% del ancho de la pantalla */
    height: 250px; /* Altura fija de 200px */
    margin: 0 auto; /* Centrar el div horizontalmente */
    background-size: cover; /* Ajustar imagen para cubrir el área */
    background-position: center; /* Centrar la imagen */
    background-repeat: no-repeat; /* Evitar que la imagen se repita */
}

/* Encabezado de la sección */
.section-header {
    width: 80%; /* Alineado con el contenedor de columnas */
    margin: 0 auto 15px; /* Centrado y con margen inferior para separar del contenido */
    text-align: left; /* Texto alineado a la izquierda */
	padding: 30px;
}

.section-header h2 {
    font-size: 1.8rem; /* Tamaño del texto ajustable */
    font-weight: bold;
    margin: 0; /* Sin margen adicional */
}

/* Encabezado de la sección */
.section-footer {
    width: 100%; /* Alineado con el contenedor de columnas */
    margin: 0 auto 15px; /* Centrado y con margen inferior para separar del contenido */
    text-align: center; /* Texto alineado a la izquierda */
	padding: 30px;
	background-color:#D99502;
}

.section-footer h2 {
    font-size: 1.8rem; /* Tamaño del texto ajustable */
    font-weight: bold;
    margin: 0; /* Sin margen adicional */
}

/* Espaciador */
.spacer {
    height: 30px; /* Tamaño del espacio (puedes ajustarlo o hacerlo dinámico) */
    width: 100%; /* Ocupa el ancho completo del contenedor */
}

/* Espaciador adaptable para diferentes tamaños */
.spacer.small {
    height: 10px;
}

.spacer.large {
    height: 50px;
}

/* Contenedor principal */
.content-container {
    display: flex;
    flex-wrap: wrap; /* Permitir que las columnas se ajusten a la siguiente fila */
    justify-content: center; /* Centrar el contenido horizontalmente */
    gap: 10px; /* Espaciado entre columnas */
    width: 90%; /* Ocupa el 90% del espacio disponible */
    max-width: 1440px; /* Nunca superar este ancho */
    margin: 0 auto; /* Centrar el contenedor */
}

/* Estilo general de las columnas */
.column {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    box-sizing: border-box;
    flex: 1 1 calc(22% - 10px); /* 22% para que quepan 4 columnas con espacio */
    max-width: calc(22% - 10px);
}

.column img {
  width: 100%; /* Ocupará el ancho del contenedor */
  height: auto; /* Mantendrá la proporción */
  max-height: 150px; /* Altura máxima de la imagen */
  object-fit: cover; /* Ajusta la imagen dentro del contenedor */
}

.title {
  background-color: #D99502; /* Fondo de la caja del título */
  color: #000; /* Color del texto */
  text-align: left; /* Centra el texto dentro de la caja */
  padding: 10px; /* Espaciado interno del título */
  font-size: 16px; /* Tamaño del texto */
  margin-bottom: 10px; /* Espacio entre el título y el contenido debajo */
  border-radius: 5px; /* Bordes redondeados opcionales */
}

.columnfooter {
    background-color: #fff;
    border: 0px solid #ddd;
    padding: 15px;
    box-sizing: border-box;
    flex: 1 1 calc(22% - 10px); /* 22% para que quepan 4 columnas con espacio */
    max-width: calc(22% - 10px);
text-align:center;
}

/* Para pantallas medianas (3 columnas) */
@media (max-width: 1024px) {
    .column {
        flex: 1 1 calc(30% - 10px); /* 30% para 3 columnas */
        max-width: calc(30% - 10px);
    }
}

/* Para pantallas pequeñas (2 columnas) 
@media (max-width: 768px) {
    .column {
        flex: 1 1 calc(45% - 10px);  45% para 2 columnas 
        max-width: calc(45% - 10px);
    }
}  */


/* CSS AGENDA */
/* Encabezado */
.agenda {
    display: flex;
    justify-content: space-between;
    justify-content: flex-end; /* Alinea el contenido hacia la parte baja */
    width: 100%;
    background-color: #D99502;
    padding: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.agenda-left {
    flex: 1;
    display: flex;
    flex-direction: column; /* Asegura que los elementos dentro se distribuyan verticalmente */
    justify-content: flex-end; /* Alinea el contenido hacia la parte baja */
    text-align: left;
    padding: 0px;
    box-sizing: border-box;
}

.agenda-right {
    flex: 1;
    display: flex;
    flex-direction: column; /* Asegura que los elementos dentro se distribuyan verticalmente */
    justify-content: flex-end; /* Alinea el contenido hacia la parte baja */
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
}

.agenda img {
    width: 50vw; /* 50% del ancho de la ventana */
    max-width: 100%; /* No excede el ancho disponible */
    height: auto; /* Mantiene la proporción de aspecto */
    object-fit: cover; /* Asegura que la imagen se recorte adecuadamente */
    display: block; /* Elimina el espacio extra que podría dejar `inline-block` */
    margin: 0 auto; /* Centra la imagen horizontalmente */
}

/* Contenido principal */
.agendacontent {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 20px auto;
    gap: 10px; /* Espacio entre columnas */
}

.agendacontent-col {
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}

.agendacol-20 {
    width: 20%;
}

.agendacol-50 {
    width: 50%;
}





/* Estilos para vista móvil */
@media (max-width: 768px) {

.menu-item-oculto {
	display:block;
	text-align:center;
    position: relative;
    margin: 5px;

}

.menu-item-oculto a {
    color: #333;
    text-decoration: none;
    padding: 0 15px;
}

.menu-item-oculto a:hover {
    color: #ffcc00;
}
    .navbar {
        flex-direction: column;
        align-items: center;
    }

    .menu-section {
        display: none; /* Ocultar las secciones inicialmente */
        flex-direction: column;
        align-items: center;
    }

.central-image {
        order: -1; /* Mueve la imagen al principio */
        margin-bottom: 15px; /* Agrega un poco de espacio debajo */
    }
    /* Menú desplegable cuando esté activo */
    .menu-section.active {
        display: flex;
    }

    /* Submenú desplegable al hacer clic en móvil */
    .submenu {
        display: none !important;
}

    .column {
        flex: 1 1 100%; /* Ocupa el 100% del ancho */
        max-width: 100%;
    }

/* Estilos responsivos agenda */
    .agenda {
        flex-direction: column;
        align-items: center;
    }

    .agendacontent {
        flex-direction: column;
        align-items: center;
        gap: 20px; /* Espacio entre columnas apiladas */
    }

    .agendacontent-col {
        width: 90%; /* Cada columna ocupa el 90% del espacio disponible */
    }

/* IMAGEN */
    .image-container {
        width: 100vw; /* 80% del ancho del viewport en móviles */
    }