/* ========================================= */
/* 1. Fondo Infantil para la Página (body) */
/* ========================================= */
.header_fondo {
    /* **IMPORTANTE:** Cambia esta ruta a tu imagen de fondo infantil */
    background-image: url('../media/image/fonfoHeader.png'); 
    background-repeat: repeat; /* O 'no-repeat' y 'background-size: cover;' */
    background-color: #f0f8ff; /* Color de respaldo (azul muy claro) */
    background-size: 200px 200px; /* Ajusta el tamaño del patrón según sea necesario */
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco semi-transparente para mejorar la legibilidad */
}

/* ====================================================== */
/* 2. Reemplazar texto con Imágenes en el Menú */
/* ====================================================== */

/* Estilo base para todos los enlaces del menú */
.template-header-top-menu a {
    /* Hace que el enlace sea un bloque para poder darle dimensiones */
    display: block; 
    
    /* Dimensiones sugeridas para la imagen del botón. AJUSTA ESTOS VALORES */
    width: 150px; 
    height: 100px;
    
    /* Propiedades para mostrar la imagen de fondo */
    background-size: 120px; 
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; /* Fondo transparente */
    /* Oculta el texto dentro del enlace de manera accesible (si lo hubiera) */
    text-indent: -9999px; 
    overflow: hidden;

    /* Necesario para la transición suave del filtro de grises */
    transition: filter 0.3s ease; 
    /* padding-top: 10px; */
}

/* Imágenes específicas para cada ítem. **IMPORTANTE:** Cambia las rutas. */
.menu-item-menu {
    background-image: url('../media/image/icon/menu/menu.png'); 
    background-size: 75px  !important; /* Ajusta el tamaño del patrón según sea necesario */

}
.menu-item-inicio {
    background-image: url('../media/image/icon/menu/home.png'); 
    background-size: 75px  !important; /* Ajusta el tamaño del patrón según sea necesario */

}

.menu-item-nosotros {
    background-image: url('../media/image/icon/menu/nosotros.png');
    background-size: 75px  !important; /* Ajusta el tamaño del patrón según sea necesario */
}

.menu-item-extra {
    background-image: url('../media/image/icon/menu/extra.png');
        background-size: 75px  !important; /* Ajusta el tamaño del patrón según sea necesario */
}

.menu-item-galeria {
    background-image: url('../media/image/icon/menu/galeria.png');
        background-size: 75px  !important; /* Ajusta el tamaño del patrón según sea necesario */
}

.menu-item-contacto {
    background-image: url('../media/image/icon/menu/contacto.png');
        background-size: 75px  !important; /* Ajusta el tamaño del patrón según sea necesario */
}


.ruta_escolar {
    background-image: url('../media/image/icon/social/ruta_escolar.png');
        background-size: 184px  !important; /* Ajusta el tamaño del patrón según sea necesario */
}
.menu_escolar {
    background-image: url('../media/image/icon/social/menu.png');
        background-size: 184px  !important; /* Ajusta el tamaño del patrón según sea necesario */
}
.psicologo_escolar {
    background-image: url('../media/image/icon/social/psicologo.png');
        background-size: 184px  !important; /* Ajusta el tamaño del patrón según sea necesario */
}

.natacion_escolar {
    background-image: url('../media/image/icon/social/natacion.png');
        background-size: 184px  !important; /* Ajusta el tamaño del patrón según sea necesario */
}


/* ================================================= */
/* 3. Efecto Escala de Grises al pasar el mouse */
/* ================================================= */

.template-header-top-menu a:hover {
    /* Aplica el filtro de escala de grises al 100% */
    filter: grayscale(100%); 
}
.background-overlay {
    /* Ocupa el 100% del ancho y alto del body */
    width: 100%;
    /* min-height: 100vh;  */

    /* Esta es la clave: un color de fondo semi-transparente.
       Aquí, un blanco con 50% de opacidad. Ajusta el color y el valor de alfa (0.5). */
    background-color: rgba(255, 255, 255, 0.7); /* Blanco semi-transparente */

    /* Para asegurar que el contenido dentro de él sea legible */
    position: relative;
    z-index: 1; /* Asegura que esté por encima de la imagen de fondo del body */
}