/* General styles */
/* Aseguramos que el body comience debajo del header */
body {
    margin: 0; /* Eliminar márgenes predeterminados */
    padding: 0; /* Eliminar paddings que puedan afectar */
   
   
}

/* Estilos para el header */
header.mobile-header {
    position: fixed; /* Fijamos el header en la parte superior */
    top: 0; /* Alineación al inicio de la página */
    left: 0;
    width: 100%; /* Aseguramos que el header cubra todo el ancho */
    background-color: black; /* Fondo negro */
    z-index: 1000; /* Asegura que el header esté por encima de otros elementos */
    display: flex;
    justify-content: space-between; /* Espaciado entre la imagen y el botón */
    align-items: center; /* Centrar la imagen y el botón en el eje vertical */
    padding: 10px 20px; /* Añadir padding para un poco de espacio */
    box-sizing: border-box; /* Asegurarnos que los padding no afecten el tamaño del header */
    height: 60px; /* Altura del header */
}


header .header-image {
    max-width: 80%;   /* Imagen responsive: ajusta el ancho al 80% del contenedor */
    max-height: 100px; /* Limita la altura máxima a 100px */
    height: auto;      /* Mantiene proporción */
}

header .menu-button {
    background: none;
    border: none;
    color: white;
    font-size: 34px; /* Tamaño de los iconos */
    cursor: pointer;
    margin-left: auto; /* Esto asegura que el botón de menú se empuje a la derecha */
    margin-right: 20px; /* Margen derecho ajustado a 20px */
}

/* Menú desplegable */
nav.menu {
    display: none; /* Ocultar el menú por defecto */
    position: fixed;
    top: 60px; /* Para que no se solape con el header */
    width: 50%; /* Establece el ancho del menú al 50% de la pantalla */
    right: 0; /* Menú comienza desde el lado derecho */
    left: auto; /* Aseguramos que no se use el lado izquierdo */
    background-color: rgba(68, 68, 68, 0.9); /* Color gris oscuro con opacidad mínima */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    opacity: 0.9; /* Opacidad mínima */
    transition: opacity 0.3s ease-in-out; /* Suavizar la transición */
    padding: 10px 0; /* Ajuste de padding */
    max-height: calc(100% - 60px); /* Ajustar la altura máxima del menú para que no sobrepase la pantalla */
    overflow-y: auto; /* Permite desplazamiento si es necesario */
    box-sizing: border-box; /* Asegurarnos de que el padding no afecte el ancho total */
    z-index: 900; /* Aseguramos que el menú esté por encima de otros elementos */
}

/* Mostrar el menú cuando está activo */
nav.menu.active {
    display: block; /* Mostrar el menú cuando tiene la clase active */
   
}

nav.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* Centrar los elementos dentro del ul */
}

nav.menu ul li {
    padding: 10px 0; /* Reducir el padding para que los títulos estén más juntos */
    text-align: left; /* Centrar los elementos dentro del li */
}

/* Estilos para los títulos con corazón */
nav.menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold; /* Poner los títulos en negrita */
    display: inline-flex; /* Usar inline-flex para los elementos en línea */
    align-items: center; /* Centrar el texto y el corazón verticalmente */
    justify-content: flex-start; /* Asegurar que el contenido se alinee a la izquierda */
    width: 100%; /* Asegurar que los enlaces ocupen el ancho completo */
}

/* Icono con una imagen de fondo */
nav.menu ul li a .icono {
    display: inline-block; /* Asegura que actúe como un bloque en línea */
    width: 25px; /* Ancho del icono */
    height: 25px; /* Alto del icono */
    margin-right: 10px; /* Espaciado entre el icono y el texto */
    background-image: url('/elem/icono/cor.png'); /* Ruta de la imagen */
    background-size: contain; /* Ajusta la imagen al tamaño del contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen dentro del espacio */
    z-index: 900;
}

/* Estilo cuando el menú se muestra */
nav.menu ul li a:hover {
    text-decoration: underline;
}

/* Para dispositivos móviles, aseguramos que el header se vea */
@media (max-width: 800px) {
    header.mobile-header {
        display: flex; /* Aseguramos que el header se mantenga visible en móviles */
    }
}

/* Mostrar el header solo en resoluciones de 800px o menos */
@media screen and (max-width: 800px) {
    header.mobile-header {
        display: flex; /* Mostrar el header en resoluciones pequeñas */
    }

    nav.menu ul li:first-child {
    margin-top: 35px;
}

body {
    
    padding-top: 60px; /* Dejar un espacio superior para que el contenido no quede cubierto por el header */
}

}

/* Ocultar el menú en resoluciones grandes (PC) */
@media screen and (min-width: 801px) {
    nav.menu {
        display: none; /* Ocultar el menú en pantallas grandes */
    }
}

/* Ocultar el menú en pantallas mayores a 800px */
@media (min-width: 801px) {
    nav.menu {
        display: none; /* Ocultar el menú desplegable */
    }
}

/* Ocultar completamente el menú en pantallas mayores a 800px */
@media (min-width: 801px) {
    nav.menu {
        display: none !important; /* Forzar ocultación en cualquier circunstancia */
    }
}

/* Estilos para el botón de menú */
button.menu-button {
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin borde */
    cursor: pointer;
    position: relative;
    font-size: 30px; /* Tamaño del icono del botón */
    z-index: 3000; /* Asegura que el botón esté encima de otros elementos */
    animation: blink 1s infinite; /* Llama a la animación blink que dura 1 segundo y se repite infinitamente */
}

/* Definir la animación para el parpadeo */
@keyframes blink {
    0% {
        opacity: 1; /* Al inicio, el botón es completamente visible */
    }
    50% {
        opacity: 0; /* A la mitad de la animación, el botón se hace invisible */
    }
    100% {
        opacity: 1; /* Al final, el botón vuelve a ser visible */
    }
}