:root {
    --bg: #0b0c10;
    --panel: #0f1117;
    --paper: #f3f4f6;
    --muted: #b6bcc9;
    --ink: #0e0f14;
    --neo: #00ffd1;
    --pink: #ff2ecd;
    --yellow: #ffe600;
    --orbit: #9aa4ff;
    --red: #ed5d5d;
    --radius: 18px;
    --gap: clamp(14px, 1.6vw, 22px);
    --shadow: 0 24px 80px rgba(0, 0, 0, .55);
    --r: 12px
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    color: var(--paper);
    background: #0b0c10;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 99px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px
}

/* ===== Top bar ===== */
.bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #070707;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

/* Solo previsión: botón menú hamburguesa para mobile */
.menu-toggle {
    appearance: none;
    background: #070707;
    border: 2.5px solid var(--yellow);
    color: var(--yellow);
    padding: 10px 18px;
    line-height: 1;
    cursor: pointer;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: none;
    align-items: center;
    border-radius: 0;
    gap: 10px;
}

.menu-toggle svg {
    stroke: var(--yellow);
}

.menu-toggle span {
    color: var(--yellow);
    font-weight: 900;
    font-size: 1.1em;
}

.bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px clamp(16px, 4vw, 48px)
}

.logo {
    display: flex;
    flex-direction: column;
    line-height: .9
}

.logo__title {
    font-family: 'Bebas Neue', system-ui, Arial, sans-serif;
    letter-spacing: 1px;
    color: var(--yellow);
    font-size: clamp(26px, 4.8vw, 69px);
    position: relative;
    display: inline-block;
}

.logo__sub {
    color: var(--muted);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 12px
}

.nav a {
    color: var(--paper);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .6px;
    position: relative;
    padding: 8px 16px;
    display: block;
    transition: color 0.18s;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
}

.nav li {
    position: relative;
}

.nav li a {
    color: var(--paper);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .6px;
    padding: 12px 18px;
    display: block;
    transition: color 0.18s;
}

.nav li a:hover {
    color: var(--yellow);
}

.nav .has-submenu>a::after {
    content: ' ▼';
    font-size: 0.7em;
    color: var(--yellow);
    margin-left: 4px;
}

.nav .submenu {
    clip-path: polygon(0 0, 92% 0, 100% 30%, 100% 100%, 8% 100%, 0 70%);
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #070707;
    border: 2.5px solid var(--yellow);
    box-shadow: 0 8px 32px #000b;
    z-index: 100;
    text-align: left;
}

.nav .has-submenu:hover>.submenu,
.nav .has-submenu:focus-within>.submenu {
    display: block;
}

.nav .submenu li a {
    color: var(--yellow);
    font-size: 1.08em;
    padding: 15px 22px;
    background: none;
    border-radius: 0;
    transition: background 0.18s, color 0.18s;
}

.nav .submenu li:first-child a {
    padding-bottom: 0px;
}

.nav .submenu li a:hover {
    color: #00fff7;
}

.nav a:hover {
    color: var(--yellow)
}

/* Validation feedback */
.invalid {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 4px rgba(255,107,107,0.06);
}

/* Make form containers show invalid state (useful for BO .sub-form and 404's .subscribe-form) */
.sub-form.invalid,
.subscribe-form.invalid {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 6px rgba(255,107,107,0.06);
}

/* Modal feedback styles */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.modal.open { display: flex; }
.modal__backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.6);
}
.modal__panel {
    position: relative; z-index: 2; max-width: 520px; width: calc(100% - 40px);
    background: #0b0c10; border: 2px solid #ffe600; padding: 22px; box-shadow: 0 24px 80px rgba(0,0,0,0.7);
    border-radius: 8px; color: #fff;
}
.modal__close { position: absolute; right: 10px; top: 6px; background: none; border: none; color: #ffe600; font-size: 22px; cursor: pointer; }
.modal__body { margin-top: 12px; color: #e6e6e6; }
.modal__panel.success { border-color: #9bffde; }
.modal__panel.error { border-color: #ff6b6b; }

/* GLOBAL STYLES */
.h1 {
    font-family: 'Bebas Neue', system-ui, Arial, sans-serif;
    font-size: clamp(40px, 8vw, 96px);
    letter-spacing: 1px;
    margin: 0 auto;
    max-width: 1100px;
    text-shadow: 0 2px 0 #000;
    line-height: 1;
}

.kicker {
    font-weight: 800;
    color: var(--yellow);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0 auto 6px;
    max-width: 1100px;
}

.btn {
    padding: 12px 16px;
    border: 2px solid var(--yellow);
    color: #111;
    background: var(--yellow);
    border-radius: 10px;
    font-weight: 900;
    display: inline-block;
}

.title-glitch {
    position: relative;
    display: inline-block
}

.title-glitch::before,
.title-glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0
}

.title-glitch::before {
    transform: translateX(-1px);
    color: var(--pink)
}

.title-glitch::after {
    transform: translateX(1px);
    color: var(--cyan)
}

/* FOOTER */
footer {
    background: #0e0f13;
    border-top: 2px solid var(--yellow);
}

.foot__in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 18px;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 22px;
    align-items: center
}

.foot__brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.foot__brand img {
    width: 120px;
}

.foot__links {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap
}

.foot__links a {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px
}

.legal {
    opacity: .7;
    font-size: 12px;
    margin-top: 6px
}

@media (max-width:960px) {
    .foot__in {
        grid-template-columns: 1fr;
    }

    .foot__links {
        justify-content: center;
    }

    .foot__brand {
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .menu-toggle {
        display: flex !important;
    }

    .nav {
        position: absolute;
        top: 85px;
        left: 0;
        width: 100vw;
        background: #070707;
        border-top: 2px solid var(--yellow);
        flex-direction: column;
        box-shadow: 0 8px 32px #000b;
        z-index: 100;
        opacity: 0;
        transform: translateY(-16px);
        pointer-events: none;
        transition: opacity 0.28s cubic-bezier(.4, .8, .4, 1), transform 0.28s cubic-bezier(.4, .8, .4, 1);
        padding-bottom: 15px;
        padding-top: 15px;
    }

    .nav.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav ul {
        flex-direction: column;
        width: 100%;
    }

    .nav .submenu {
        display: block;
        position: relative;
        border: none;
        background: var(--yellow);
        width: 94%;
        margin: 0 auto;
        clip-path: none;
    }

    .nav li:first-child {
        border-bottom: solid var(--ink);
        padding-bottom: 10px;
    }

    .nav .submenu li a {
        color: var(--ink);
    }

    .nav .submenu li:hover a {
        color: var(--bg);
    }
}