:root {
        --bg: #000;
        --fg: #eee;
        --gold: #e0b539;
    }
    html, body {
        height: 100%;
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font-family: 'Inter', system-ui, sans-serif;
    }

    #particulas-reactivas {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: var(--bg);
    }
    
    /* === Hero Section (Home) === */
    .hero {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        text-align: center;
        gap: 1rem;
    }
    .hero h1 {
        font-size: clamp(2.5rem, 8vw, 4.5rem);
        letter-spacing: .2rem;
        font-weight: 700;
        color: var(--gold); /* Usamos el color dorado */
        text-shadow: 0 0 10px rgba(224, 181, 57, 0.4);
    }
    .hero .lead {
        opacity: .8;
        font-size: 1.125rem;
    }

    /* === Navigation Menu (Home) === */
    .menu a {
        display: inline-block;
        margin: .5rem .5rem;
        padding: .8rem 1.4rem;
        border: 2px solid var(--gold); /* Borde dorado */
        color: var(--fg);
        text-decoration: none;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        text-transform: uppercase;
    }
    .menu a:hover {
        background: rgba(224, 181, 57, 0.15); /* Fondo dorado sutil al pasar el mouse */
        box-shadow: 0 0 15px rgba(224, 181, 57, 0.5);
        color: var(--gold);
    }

    /* === Age Gate Styles (Modernizado) === */
    .agegate-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .94);
        color: #fff;
        display: grid;
        place-items: center;
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s;
    }
    .agegate-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    .agegate-card {
        width: min(520px, 92vw);
        background: rgba(0, 0, 0, 0.85); /* Negro más oscuro */
        border: 2px solid var(--gold); /* Borde de tarjeta dorado */
        border-radius: 14px;
        padding: 24px;
        text-align: center;
        backdrop-filter: blur(6px);
        box-shadow: 0 4px 30px rgba(224, 181, 57, 0.2);
    }
    .agegate-video {
        width: 100%;
        height: auto;
        max-height: 300px;
        border-radius: 8px;
        margin: 12px 0;
        object-fit: cover;
        background: #111;
    }
    .agegate-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-top: 16px;
        flex-wrap: wrap;
    }
    
    /* Estilos de botones de Age Gate */
    .btn {
        padding: .7rem 1.1rem;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s;
        flex-grow: 1;
        min-width: 150px;
    }
    .btn.primary-gold {
        border: 1px solid var(--gold);
        background: var(--gold);
        color: #000;
    }
    .btn.primary-gold:hover {
        background: #f0c950;
        box-shadow: 0 0 10px var(--gold);
    }
    .btn.ghost-gold {
        background: transparent;
        color: var(--gold);
        border: 1px solid var(--gold);
    }
    .btn.ghost-gold:hover {
        background: rgba(224, 181, 57, 0.1);
        color: #fff;
    }
    .agegate-note {
        opacity: .6;
        margin-top: 15px;
        font-size: .85rem;
    }