/* Importar Fuentes de Entretenimiento y Circo desde Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Montserrat:wght@400;700;900&family=Rye&display=swap');
:root {
    /* NUEVAS TIPOGRAFÍAS DE ESPECTÁCULO */
    --font-circus-title: 'Rye', serif;
    /* Estilo cartel de circo clásico */
    --font-magic-title: 'Cinzel Decorative', serif;
    /* Estilo show de magia premium / elegante */
    --font-body: 'Montserrat', sans-serif;
    /* Moderna, legible y con mucha fuerza */
    /* Tu Paleta de Colores (Se mantiene) */
    --azul-noche: #071A33;
    --azul-circo: #0B3D91;
    --azul-premium: #0E4FB8;
    --azul-claro: #2E6BE6;
    --azul-suave: #74A8FF;
    --azul-muy-claro: #EAF3FF;
    --dorado-principal: #D4AF37;
    --dorado-oscuro: #B88A1E;
    --dorado-claro: #E8CB6B;
    --dorado-suave: #F6E7B3;
    --blanco: #FFFFFF;
    --blanco-calido: #FAFBFC;
    --negro-suave: #1A2233;
    --negro: #0B0F17;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--azul-noche);
    color: var(--blanco-calido);
    overflow-x: hidden;
}


/* Títulos principales con la tipografía de cartel de Circo */

h1,
.titulo-circo {
    font-family: var(--font-circus-title);
    font-weight: 400;
    /* Rye es nativamente gruesa y estilizada */
    letter-spacing: 2px;
}


/* Títulos secundarios con estilo de magia premium */

h2,
h3,
.titulo-magia {
    font-family: var(--font-magic-title);
    letter-spacing: 1px;
}


/* Estilos del Header / Menú */

header {
    background-color: rgba(11, 15, 23, 0.95);
    /* Un tono más oscuro para contraste */
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--dorado-principal);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.logo img {
    height: 60px;
    /* Un poco más grande para lucir tu logo */
    display: block;
}

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

.menu-link {
    font-family: var(--font-body);
    color: var(--blanco-calido);
    text-decoration: none;
    font-weight: 700;
    /* Más gruesa para que tenga impacto de entretenimiento */
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
}

.menu-link:hover,
.menu-link.active {
    color: var(--dorado-claro);
    text-shadow: 0 0 10px var(--dorado-principal);
    /* Efecto sutil de iluminación de cartelera */
}


/* Estilos del Footer */

footer {
    background-color: var(--negro);
    text-align: center;
    padding: 30px;
    color: var(--azul-suave);
    font-size: 0.9rem;
    font-family: var(--font-body);
    border-top: 2px solid rgba(212, 175, 55, 0.2);
}


/* --- MENÚ HAMBURGUESA Y RESPONSIVE --- */

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
}

.menu-toggle .bar {
    width: 30px;
    height: 3px;
    background-color: var(--dorado-principal);
    transition: all 0.3s ease;
}


/* Animación de la hamburguesa al activarse */

.menu-toggle.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: rgba(7, 26, 51, 0.98);
        border-left: 2px solid var(--dorado-principal);
        padding: 100px 40px;
        transition: right 0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    }
    .nav-menu.active {
        right: 0;
    }
    nav ul {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    .menu-link {
        font-size: 1.2rem;
    }
}