/* CABECERA */
#header-layout {
  display: flex;
  flex-direction: column; /* Apila los elementos verticalmente */
  align-items: center;    /* Centra el logo y el menú horizontalmente */
  justify-content: center;
  text-align: center;
  padding: 20px 0;        /* Espaciado arriba y abajo */
}

/* 1. Forzar que el contenedor del logo centre su contenido */
#header-logo-header-layout {
    display: flex;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important; /* Asegura que ocupe todo el ancho disponible */
    max-width: 100% !important; 
  	margin-bottom: 20px !important; /* Ajusta el espacio a tu gusto */
}

/* Eliminar efectos de sombra del menu */
.module-navigation-default a:active {
    box-shadow: none !important;
}

/* BODY */
/* Cuerpo con margen a los lados */
.main-content {
  	max-width: 1750px; /* Ajusta este número a tu gusto */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* 1. Estilos del ENLACE PRINCIPAL */
.contenedor-imagen-enlace {
    position: relative; /* FUNDAMENTAL para que .capa-hover se posicione correctamente */
    overflow: hidden;
    display: inline-block; /* Ocupa solo el espacio necesario */
    text-decoration: none; /* Quita el subrayado si lo tiene */
    color: inherit; /* Hereda el color del texto */
}

/* 2. Estilos de la imagen (Para que ocupe todo el espacio del enlace) */
.contenedor-imagen-enlace img {
    display: block;
    width: auto;	/* El ancho se adapta a la altura */
    height: 400px;	/* Hace que la altura sea siempre 400 */
  	object-fit: cover;     /* Recorta la imagen para llenar el espacio sin deformarse */
}

/* 3. Estilos de la capa de hover (inicialmente oculta) */
.contenedor-imagen-enlace .capa-hover-personalizado {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(245, 136, 39, 0.8); /* Color y opacidad del hover */
    opacity: 0;
    transition: opacity 0.3s ease;

    /* Centrado del texto */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    font-size: 1.5em;
    z-index: 10; /* Asegura que la capa de hover esté por encima de la imagen */
}

/* 4. El efecto al pasar el ratón */
.contenedor-imagen-enlace:hover .capa-hover-personalizado {
    opacity: 1; /* Hace visible la capa de hover */
}

/* 5. Centrar la cuadrícula */
.boxhome {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center;     /* Centra el contenido verticalmente si es necesario */
    text-align: center;
}

.mw-row {
  	display: flex;            /* Activa el modo flexible */
    justify-content: center;  /* Centra las columnas horizontalmente */
    flex-wrap: wrap;          /* Permite que bajen si no caben en pantalla */
}

/* FOOTER */
/* 6. Ocultar flecha hacia arriba y creditos web */
#to-top  {
	visibility: hidden !important;
}

.mw-powered-by {
	visibility: hidden !important;
}

.col-sm-6 {
	visibility: hidden !important;
}