/* --- Variables de Color y Fuentes --- */
:root {
    --dark-background: #0a0a0a; /* Negro profundo */
    --deep-space-gray: #151515; /* Gris espacial oscuro */
    --accent-color: #d4af37;    /* Dorado metálico / bronce para acentos */
    --secondary-accent: #8b4513; /* Marrón oscuro para profundidad */
    --text-light: #e0e0e0;     /* Texto principal claro */
    --text-gray: #aaaaaa;      /* Texto secundario */
    --text-dim: #555555;       /* Texto muy atenuado */

    --font-main: 'Orbitron', sans-serif;
    --font-logo: 'Press Start 2P', cursive;
    --font-accent: 'Audiowide', cursive;
    --font-tech: 'Roboto Mono', monospace; /* Fuente monoespaciada para detalles técnicos */
}

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

body {
    font-family: var(--font-main);
    background-color: var(--dark-background);
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
}

h1, h2, h3, h4 {
    font-family: var(--font-accent);
    text-shadow: 0 0 8px var(--accent-color), 0 0 15px var(--accent-color);
}

h2 {
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    color: var(--text-light);
}

h2 .highlight {
    color: var(--accent-color);
    text-shadow: 0 0 8px var(--accent-color), 0 0 15px var(--accent-color);
}

h3 {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 25px;
    border-bottom: 2px solid var(--secondary-accent);
    padding-bottom: 10px;
    font-family: var(--font-tech); /* Títulos de categoría en monoespaciado */
    letter-spacing: 1px;
}

h4 {
    font-family: var(--font-main);
    font-size: 1.5rem;
    color: var(--text-light);
    text-shadow: none;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: var(--secondary-accent);
    text-shadow: 0 0 10px var(--secondary-accent);
}

/* --- Header --- */
header {
    background-color: var(--deep-space-gray);
    padding: 20px 0;
    border-bottom: 3px solid var(--accent-color);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5); /* Sombra dorada */
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.logo .main-logo {
    height: 60px;
    display: block;
}

.logo p {
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-top: 5px;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin-left: 30px;
}

nav ul li a {
    font-size: 1.8rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 0;
    position: relative;
    letter-spacing: 1px;
    color: var(--text-light); /* Color del enlace del header */
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--secondary-accent);
    transition: width 0.3s ease;
}

nav ul li a:hover::after {
    width: 100%;
}

/* --- Hero Section --- */
#hero {
    background: url('images/area51_background.jpg') no-repeat center center/cover;
    height: 75vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    color: var(--text-light);
    border-bottom: 3px solid var(--secondary-accent);
    box-shadow: 0 0 20px rgba(139, 69, 19, 0.5); /* Sombra marrón */
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
}

#hero .container {
    position: relative;
    z-index: 1;
}

#hero h2 {
    font-size: 3.8rem;
    margin-bottom: 20px;
    color: var(--text-light);
    text-shadow: 0 0 15px var(--accent-color), 0 0 30px var(--accent-color);
}

#hero p {
    font-size: 1.6rem;
    margin-bottom: 40px;
    color: var(--text-gray);
    font-family: var(--font-main);
}

.btn-main, .btn-call {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--dark-background);
    padding: 18px 35px;
    font-size: 1.3rem;
    font-weight: bold;
    font-family: var(--font-logo);
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 0 15px var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-main:hover, .btn-call:hover {
    background-color: var(--secondary-accent);
    color: var(--text-light);
    box-shadow: 0 0 20px var(--secondary-accent);
    transform: translateY(-5px) scale(1.05);
}

/* --- Menu Section --- */
#menu {
    padding: 80px 0;
    background-color: var(--deep-space-gray);
    position: relative;
}

/* Patrón sutil - si lo usas, ajústalo */
#menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.08;
    background-image: url('images/menu_pattern.png'); /* Asegúrate de tener esta imagen */
    background-repeat: repeat;
    z-index: 0;
}

#menu .container {
    position: relative;
    z-index: 1;
}

.menu-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.menu-category {
    margin-bottom: 40px; /* Espacio entre categorías */
}

.menu-item-card {
    background-color: var(--dark-background);
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid var(--deep-space-gray);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* Indica que es clickeable */
}

.menu-item-card.simple { /* Estilos para ítems sin la foto/alérgenos */
    background-color: rgba(21, 21, 21, 0.8); /* Ligeramente distinto */
    border: 1px dashed var(--secondary-accent);
}

.menu-item-card:not(.simple):hover { /* Solo para ítems clickeables */
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6); /* Sombra dorada */
}

.menu-item-card h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.menu-item-card .price {
    font-weight: bold;
    color: var(--accent-color);
    font-size: 1.2rem;
    text-shadow: 0 0 5px var(--accent-color);
}

.menu-item-card p {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-top: 10px;
}

.delivery-info {
    text-align: center;
    margin-top: 40px;
    font-size: 1.1rem;
    padding: 20px;
    background-color: rgba(10, 10, 10, 0.5);
    border-radius: 8px;
    border: 1px dashed var(--accent-color);
}

.delivery-info .phone-number {
    font-weight: bold;
    color: var(--accent-color);
    text-shadow: 0 0 8px var(--accent-color);
}

/* --- Burger Detail Section --- */
#burger-detail {
    background-color: var(--dark-background);
    padding: 60px 0;
    border-top: 3px solid var(--secondary-accent);
    border-bottom: 3px solid var(--secondary-accent);
    margin-top: -3px; /* Para que se vea continuo con el header/menu */
    position: relative;
    z-index: 5;
}

#burger-detail.hidden {
    display: none;
}

#burger-detail .container {
    position: relative;
}

#close-detail-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 3rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

#close-detail-btn:hover {
    color: var(--accent-color);
}

.detail-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start; /* Alinea al inicio */
    justify-content: center;
    padding-top: 20px; /* Espacio extra debajo del botón de cerrar */
}

.detail-image {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.detail-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 3px solid var(--accent-color);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
}

.detail-info {
    flex: 1;
    min-width: 300px;
}

.detail-info h3 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    text-shadow: none; /* Quitar el text-shadow principal */
    color: var(--accent-color);
    font-family: var(--font-accent);
}

.detail-info p {
    font-size: 1.1rem;
    color: var(--text-gray);
    margin-bottom: 25px;
}

.allergen-info h4 {
    font-size: 1.4rem;
    color: var(--text-light);
    margin-bottom: 15px;
    font-family: var(--font-main);
}

.allergen-info ul {
    list-style: none;
    padding: 0;
}

.allergen-info li {
    font-family: var(--font-tech); /* Alérgenos en monoespaciado */
    font-size: 1rem;
    color: var(--accent-color);
    background-color: rgba(21, 21, 21, 0.7);
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    display: inline-block; /* Para que se pongan uno al lado del otro si hay espacio */
    margin-right: 10px;
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 5px var(--accent-color);
}

/* --- Horario Section --- */
#horario {
    padding: 80px 0;
    background-color: var(--dark-background);
    text-align: center;
    position: relative;
}

.horario-content {
    display: flex;
    justify-content: center;
    gap: 100px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.horario-days, .horario-time {
    font-size: 1.6rem;
}

.horario-days p, .horario-time p {
    margin-bottom: 20px;
}

.horario-time .closed {
    color: var(--secondary-accent); /* Usamos marrón oscuro para cerrado */
    font-weight: bold;
    text-shadow: 0 0 10px var(--secondary-accent);
}

/* --- Contacto Section --- */
#contacto {
    padding: 80px 0;
    background-color: var(--deep-space-gray);
    text-align: center;
    position: relative;
}

.contact-details {
    font-size: 1.2rem;
    margin-bottom: 40px;
}

.contact-details p {
    margin-bottom: 15px;
    color: var(--text-gray);
}

.contact-details strong {
    color: var(--text-light);
    margin-right: 10px;
}

/* --- Alien Element Animation --- */
.area51-element {
    margin-top: 50px;
}

.alien-icon {
    width: 100px;
    opacity: 0.5;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* --- Footer --- */
footer {
    background-color: var(--dark-background);
    color: var(--text-gray);
    text-align: center;
    padding: 30px 0;
    border-top: 1px solid var(--deep-space-gray);
    font-size: 0.9rem;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
    }
    .logo {
        margin-bottom: 15px;
    }
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    nav ul li {
        margin: 10px 0;
    }
    #hero h2 {
        font-size: 3rem;
    }
    #hero p {
        font-size: 1.3rem;
    }
    .menu-sections {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }
    .horario-content {
        flex-direction: column;
        gap: 20px;
    }
    .horario-days, .horario-time {
        font-size: 1.4rem;
    }
    .detail-content {
        flex-direction: column;
        align-items: center;
    }
    .detail-image, .detail-info {
        min-width: unset;
        width: 100%;
        max-width: 400px; /* Limitar el ancho de la imagen y detalles */
    }
    .detail-image img {
        max-width: 100%;
    }
    .alien-icon {
        width: 80px;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 2.2rem;
    }
    #hero h2 {
        font-size: 2.5rem;
    }
    #hero p {
        font-size: 1.1rem;
    }
    .btn-main, .btn-call {
        font-size: 1rem;
        padding: 15px 25px;
    }
    .menu-item-card h4 {
        font-size: 1.1rem;
    }
    .menu-item-card .price {
        font-size: 1rem;
    }
    .menu-item-card p {
        font-size: 0.85rem;
    }
    .horario-days, .horario-time {
        font-size: 1.2rem;
    }
    .contact-details {
        font-size: 1.1rem;
    }
    .logo .main-logo {
        height: 50px;
    }
    .detail-image img {
        max-width: 100%;
    }
}
/* Estilos para los mapas pequeños al final de la página */
.map-section-container {
    display: flex; /* Permite colocar los elementos uno al lado del otro */
    justify-content: center; /* Centra el grupo de mapas */
    flex-wrap: wrap; /* Permite que los mapas pasen a la siguiente línea si no caben */
    gap: 20px; /* Espacio entre los mapas */
    margin-top: 40px; /* Espacio por encima de la sección de mapas */
    margin-bottom: 40px; /* Espacio por debajo de la sección de mapas */
}

.map-wrapper {
    text-align: center; /* Centra el título y el mapa dentro de su contenedor */
    flex: 1; /* Permite que cada wrapper ocupe el espacio disponible */
    max-width: 300px; /* Ancho máximo para cada mapa y su contenedor */
}

.map-title {
    margin-bottom: 10px; /* Espacio entre el título y el mapa */
    font-size: 1.1em;
    color: #ddd; /* Color del texto del título */
    font-family: 'Press Start 2P', cursive; /* O la fuente que estés usando */
}

.mini-map-container {
    position: relative;
    width: 100%;
    max-width: 300px; /* Coincide con el max-width del map-wrapper */
    height: 0;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9. Ajusta si tus iframes tienen otra relación */
    overflow: hidden;
    margin: 0 auto; /* Asegura que el mapa esté centrado dentro de su wrapper */
    border: 1px solid rgba(212, 175, 55, 0.5); /* Borde sutil en color dorado */
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4); /* Sombra sutil */
}

.mini-map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Quita el borde por defecto del iframe */
}
header.scrolled-down {
    transform: translateY(-100%); /* Mueve el header hacia arriba fuera de la vista */
    transition: transform 0.3s ease-in-out;
}
/* --- Estilos para el Logo Centrado --- */

/* Asegura que el contenedor principal del header esté bien configurado para centrar el logo */
header .container {
    display: flex;
    flex-direction: column; /* Apila todos los elementos del header verticalmente */
    align-items: center; /* Centra horizontalmente todos los elementos del header */
    justify-content: center; /* Centra verticalmente los elementos del header */
    padding: 0;
    width: 90%; /* Asegura que el contenedor interno tenga un ancho */
    max-width: 1200px;
    margin: 0 auto;
}

/* Estilos para el contenedor del logo */
.logo {
    display: flex;
    flex-direction: column; /* Apila el icono y el texto */
    align-items: center; /* Centra horizontalmente los elementos */
    text-align: center; /* Centra el texto */
    font-family: var(--font-logo); /* Aplica la fuente del logo al contenedor */
    font-size: 1.1rem; /* Tamaño base para el texto */
    color: var(--accent-color);
    text-shadow: 0 0 5px var(--accent-color);
    margin-bottom: 5px; /* Espacio adicional debajo del logo si es necesario */
}

/* Asegura que el icono alien tenga el tamaño correcto y esté espaciado del texto */
.logo img.alien-icon {
    height: 150px; /* Tamaño fijo para el icono */
    width: auto; /* Mantiene la proporción de la imagen */
    animation: float 4s ease-in-out infinite; /* Animación sutil */
    margin-bottom: 10px; /* Espacio entre el icono y el texto debajo */
}

/* Asegura que el texto 'Smash de Otro Mundo' use la fuente correcta y esté bien espaciado */
.logo p {
    font-size: 1.6rem; /* El tamaño de fuente se aplica desde el contenedor .logo */
    margin-left: 0; /* Elimina cualquier margen izquierdo que pudiera interferir */
    display: block; /* Asegura que el párrafo ocupe su propia línea */
    text-decoration: underline; /* Añade el subrayado */
    text-underline-offset: 5px; /* Opcional: ajusta la distancia del subrayado */
    text-decoration-color: var(--accent-color); /* Opcional: define el color del subrayado */
}


/* Si el elemento .area51-element y la <nav> también deben centrarse,
   la configuración de flex-direction: column en header .container ya se encarga de ello. */

/* --- Animación --- */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}