/* ==========================================================================
   BE SKILLZ — STYLESHEET CONSOLIDADO
   Limpio, sin parches V8/V10/V11/V12. Misma estética, código sano.
   ========================================================================== */

/* ---------- 1. TOKENS / RESET ---------- */
:root {
    --black: #010102;
    --panel: #08070d;
    --panel-2: #0d0b12;
    --white: #ffffff;
    --muted: #928899;
    --muted-2: #635a6b;
    --line: rgba(255,255,255,.095);
    --red: #ff174d;
    --magenta: #ff2a7f;
    --violet: #9d31ff;
    --green: #42ffbc;
    --spotify: #1ed760;
    --beatport: #00e8ff;
    --youtube: #ff0033;
    --soundcloud: #ff6a00;
    --ease: cubic-bezier(.16,1,.3,1);
    --ease-soft: cubic-bezier(.19,1,.22,1);
    --nav-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--black); scroll-padding-top: var(--nav-h); }
body {
    font-family: Inter, system-ui, sans-serif;
    color: var(--white);
    background: radial-gradient(circle at 50% 0%, rgba(157,49,255,.075), transparent 34%), var(--black);
    overflow-x: hidden;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--red); color: var(--white); }
.container { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }

/* ---------- 2. HERO ---------- */
.scroll-master-container { height: 270vh; position: relative; background: var(--black); }
#hero {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--black);
}
#scrolly-video,
.hero-gradient,
.noise-layer,
.scanline-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#scrolly-video {
    object-fit: cover;
    z-index: 0;
    opacity: .38;
    filter: contrast(1.18) brightness(.92) saturate(1.1);
    transform-origin: center;
    will-change: transform;
}
.hero-gradient {
    z-index: 1;
    background:
        radial-gradient(circle at 50% 44%, rgba(157,49,255,.20), transparent 30%),
        radial-gradient(circle at 52% 56%, rgba(255,23,77,.13), transparent 20%),
        linear-gradient(180deg, rgba(1,1,2,.65), rgba(1,1,2,.12) 38%, rgba(1,1,2,.96));
}
.noise-layer {
    z-index: 6;
    opacity: .08;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.12) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 1.8px);
    background-size: 6px 6px, 9px 9px;
    animation: noiseShift 1s steps(2) infinite;
}
.scanline-layer {
    z-index: 7;
    opacity: .09;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.032) 0 1px, transparent 1px 8px);
}
#hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 0 30%, rgba(1,1,2,.72) 76%, var(--black));
}

/* ---------- 3. NAV ---------- */
.hud-nav {
    position: absolute;
    z-index: 50;
    top: 26px;
    left: 38px;
    right: 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: Syncopate, sans-serif;
    font-size: .64rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.brand-chip,
.nav-links a {
    color: rgba(255,255,255,.78);
    text-decoration: none;
    transition: color .28s var(--ease), text-shadow .28s var(--ease);
}
.brand-chip { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-dot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    background: radial-gradient(circle, #fff 0 12%, transparent 14%), radial-gradient(circle at 50% 120%, var(--violet), transparent 62%);
    box-shadow: 0 0 18px rgba(157,49,255,.4);
}

.nav-links {
    display: flex;
    gap: clamp(8px, 1.05vw, 16px);
    justify-content: flex-end;
    flex-wrap: wrap;
}
.nav-links a {
    position: relative;
    padding: 6px 2px 10px;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.nav-links a::before { content:'['; color: rgba(255,255,255,.34); }
.nav-links a::after { content:']'; color: rgba(255,255,255,.34); }

.nav-label {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}
.nav-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    background: linear-gradient(90deg, var(--red) 0%, var(--magenta) 48%, var(--violet) 100%);
    box-shadow:
        0 0 8px rgba(255, 23, 77, 0.34),
        0 0 18px rgba(157, 49, 255, 0.24);
    transition:
        transform 1.05s var(--ease-soft),
        opacity .38s ease,
        box-shadow .8s ease;
}

.nav-links a:hover,
.brand-chip:hover,
.nav-links a:focus-visible {
    color: #fff;
    text-shadow:
        0 0 14px rgba(255, 23, 77, 0.48),
        0 0 24px rgba(157, 49, 255, 0.32);
}
.nav-links a:hover .nav-label::after,
.nav-links a:focus-visible .nav-label::after,
.nav-links a.is-active .nav-label::after {
    transform: scaleX(1);
    opacity: 1;
    box-shadow:
        0 0 12px rgba(255, 23, 77, 0.46),
        0 0 24px rgba(157, 49, 255, 0.34);
}
.nav-links a.is-active { color: #fff; }

.nav-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    background: rgba(5,5,10,.55);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    z-index: 60;
    transition: border-color .28s var(--ease), background .28s var(--ease);
}
.nav-toggle:hover { border-color: rgba(255,23,77,.42); }
.nav-toggle span {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 99px;
    background: #fff;
    transition: transform .42s var(--ease-soft), opacity .28s ease, top .42s var(--ease-soft);
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- 4. HERO CONTENT ---------- */
.hero-content {
    position: relative;
    z-index: 12;
    text-align: center;
    width: min(980px, calc(100% - 40px));
    perspective: 1500px;
    margin-top: -2vh;
}
.logo-wrapper {
    display: inline-block;
    position: relative;
    margin-bottom: 28px;
    transform-style: preserve-3d;
    animation: logoMicroOrbit 16s ease-in-out infinite;
    will-change: transform;
}
.logo-wrapper:hover { animation-duration: 8s; }
.logo-wrapper .logo-3d,
.logo-wrapper .logo-fallback { position: relative; z-index: 2; }

.logo-3d {
    width: min(560px, 76vw);
    height: auto;
    filter: invert(1) brightness(1.85) drop-shadow(0 0 38px rgba(157,49,255,.45));
    pointer-events: none;
    will-change: transform, filter;
}
.logo-fallback {
    display: none;
    font-family: Syncopate, sans-serif;
    font-size: clamp(2.9rem, 7vw, 7rem);
    line-height: .9;
    letter-spacing: .03em;
    text-shadow: 0 0 34px rgba(255,23,77,.45), 0 0 72px rgba(157,49,255,.35);
}

.logo-wrapper::before,
.logo-wrapper::after {
    content: '';
    position: absolute;
    inset: -12%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
}
.logo-wrapper::before {
    background:
        linear-gradient(90deg, transparent 0 8%, rgba(255, 23, 77, 0.38) 9% 10%, transparent 11% 48%, rgba(157, 49, 255, 0.28) 49% 50%, transparent 51%),
        linear-gradient(180deg, transparent 0 46%, rgba(255,255,255,0.20) 47% 48%, transparent 49%);
    filter: blur(0.35px);
}
.logo-wrapper::after {
    inset: -18% -10%;
    background:
        radial-gradient(circle at 22% 42%, rgba(255, 23, 77, 0.45), transparent 8%),
        radial-gradient(circle at 72% 48%, rgba(157, 49, 255, 0.36), transparent 10%),
        linear-gradient(110deg, transparent 0 41%, rgba(255,255,255,0.24) 42% 43%, transparent 44% 100%);
    filter: blur(1px);
}
.logo-wrapper.is-electrocuting::before { animation: logoElectricScan .86s steps(3, end) 1; }
.logo-wrapper.is-electrocuting::after { animation: logoElectricAura .86s var(--ease-soft) 1; }

.subtitle {
    font-size: .72rem;
    letter-spacing: clamp(4px, 1vw, 10px);
    color: rgba(255,255,255,.43);
    margin: 14px 0 28px;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    transition: opacity .25s var(--ease);
}
.cta-scroll,
.btn-download,
.inline-link,
.booking-secondary-link {
    font-family: Syncopate, sans-serif;
    font-size: .55rem;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    padding: 13px 22px;
    border: 1px solid rgba(255,23,77,.35);
    background: linear-gradient(90deg, rgba(255,23,77,.10), rgba(157,49,255,.08));
    color: rgba(255,255,255,.86);
    transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.cta-scroll:hover,
.btn-download:hover,
.inline-link:hover,
.booking-secondary-link:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 0 28px rgba(255,23,77,.25);
}
.scroll-hint {
    display: inline-block;
    font-family: Syncopate, sans-serif;
    font-size: .5rem;
    letter-spacing: 2.6px;
    color: rgba(255,255,255,.35);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}

/* ---------- 5. SECTIONS BASE ---------- */
.main-content-wrapper {
    position: relative;
    z-index: 30;
    background: linear-gradient(180deg, rgba(1,1,2,.12), var(--black) 90px), var(--black);
}
.content-section {
    padding: 92px 0;
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.content-section.is-visible { opacity: 1; transform: translate3d(0,0,0); }

.section-kicker {
    display: block;
    margin-bottom: 16px;
    font-family: Syncopate, sans-serif;
    font-size: .56rem;
    letter-spacing: 3.5px;
    color: var(--red);
    text-transform: uppercase;
}
h2 {
    font-family: Syncopate, sans-serif;
    font-size: clamp(1.45rem, 2.6vw, 2.35rem);
    letter-spacing: clamp(6px, 1.1vw, 13px);
    margin-bottom: 38px;
    padding-left: 20px;
    border-left: 3px solid var(--red);
    color: var(--white);
    text-shadow: 0 0 28px rgba(157,49,255,.20);
}
h3 { font-size: .82rem; letter-spacing: 3.6px; color: var(--violet); margin-bottom: 18px; text-transform: uppercase; }
p { font-size: .9rem; line-height: 1.7; color: var(--muted); }
.section-lead { max-width: 720px; font-size: .88rem; }
.split-section { display: grid; grid-template-columns: minmax(260px, .78fr) 1.22fr; gap: 54px; align-items: start; }

.glass-panel,
.holo-card,
.platform-card,
.press-card,
.press-media-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,255,255,.052), rgba(255,255,255,.014)), rgba(5,5,10,.72);
    border: 1px solid var(--line);
    box-shadow: 0 24px 58px rgba(0,0,0,.35), inset 0 0 22px rgba(255,255,255,.018);
}
.glass-panel,
.holo-card,
.press-card { padding: 28px; }
.holo-card { transition: transform .32s var(--ease), border-color .32s var(--ease); }
.holo-card:hover { transform: translateY(-6px); border-color: rgba(255,23,77,.36); }
.holo-card span { display:block; font-family: Syncopate, sans-serif; font-size:.5rem; letter-spacing:2.8px; color:var(--red); margin-bottom:12px; }
.holo-card strong { display:block; color:#fff; font-size:1rem; margin-bottom:12px; }

/* ---------- 6. TOUR ---------- */
.tour-format-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 20px; }
.featured-tour-card {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 12%, rgba(255,23,77,.13), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.014)),
        rgba(5,5,10,.72);
}

/* ---------- 7. SHOWS ---------- */
.shows-section {
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 23, 77, 0.055), transparent 30%),
        radial-gradient(circle at 84% 28%, rgba(157, 49, 255, 0.07), transparent 34%);
}
.shows-header {
    display: grid;
    grid-template-columns: minmax(260px, 0.78fr) 1.22fr;
    gap: 54px;
    align-items: end;
    margin-bottom: 30px;
}
.selected-shows-grid {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr 0.88fr;
    gap: 18px;
}
.show-card {
    min-height: 190px;
    padding: 24px;
    transition:
        transform .55s var(--ease),
        border-color .55s var(--ease),
        box-shadow .55s var(--ease),
        background .55s var(--ease);
}
.show-card::after {
    content: '';
    position: absolute;
    inset: auto 18px 18px 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 23, 77, 0.58), rgba(157, 49, 255, 0.45), transparent);
    transform: scaleX(0.22);
    opacity: 0.5;
    transform-origin: left center;
    transition: transform .7s var(--ease), opacity .7s var(--ease);
}
.show-card:hover {
    transform: translateY(-7px);
    border-color: rgba(255, 23, 77, 0.36);
    box-shadow: 0 34px 86px rgba(0,0,0,0.48), 0 0 46px rgba(157,49,255,0.13);
}
.show-card:hover::after { transform: scaleX(1); opacity: 1; }
.show-card-featured {
    grid-row: span 2;
    min-height: 398px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 23, 77, 0.14), transparent 32%),
        radial-gradient(circle at 84% 80%, rgba(157, 49, 255, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.014)),
        rgba(5,5,10,.72);
}
.show-card-wide { grid-column: span 2; }
.show-country {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 16px;
    font-family: Syncopate, sans-serif;
    font-size: 0.52rem;
    letter-spacing: 3px;
    color: var(--red);
}
.show-card h3 { color: var(--white); margin-bottom: 12px; }
.show-card p { font-size: 0.85rem; line-height: 1.62; }

/* ---------- 8. ACADEMY ---------- */
.academy-proof {
    position: relative;
    display: grid;
    grid-template-columns: minmax(140px,.32fr) 1fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 24px;
    isolation: isolate;
    overflow: hidden;
}
.academy-proof::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,0.13) 46%, transparent 58% 100%);
    transform: translateX(-130%);
    opacity: 0;
    pointer-events: none;
    animation: academyPanelShine 6.8s ease-in-out infinite;
}
.academy-number {
    position: relative;
    display: inline-block;
    font-family: Syncopate, sans-serif;
    font-size: clamp(3rem, 7.2vw, 6.8rem);
    line-height: .9;
    letter-spacing: -.08em;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.9) 42%, rgba(255,23,77,0.58) 72%, rgba(157,49,255,0.42) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 24px rgba(255,23,77,0.25)) drop-shadow(0 0 54px rgba(157,49,255,0.16));
}
.academy-number::before {
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -0.34em;
    height: 0.42em;
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,23,77,0.05), transparent);
    transform: scaleY(-1);
    filter: blur(6px);
    opacity: 0.38;
    pointer-events: none;
}
.academy-number::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 0 34%, rgba(255,255,255,0.92) 47%, transparent 59% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transform: translateX(-135%);
    animation: academyNumberScan 4.8s var(--ease) infinite;
    pointer-events: none;
}
.academy-result-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.academy-result-strip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.085);
    background: rgba(255,255,255,0.035);
    font-size: 0.72rem;
    color: rgba(255,255,255,0.68);
}
.academy-result-strip span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 10px rgba(255,23,77,0.6);
}
.bio-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }

/* ---------- 9. RIDER ---------- */
.rider-section { padding-top: 84px; background: radial-gradient(circle at 50% 18%, rgba(255,23,77,.055), transparent 32%); }
.rider-intro { max-width: 760px; margin-bottom: 26px; }
.booth-rig { max-width: 910px; margin-inline: auto; padding: 20px; border-radius: 24px; }
.booth-stage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,.88fr)) minmax(128px,.95fr) repeat(2, minmax(0,.88fr));
    gap: 10px;
    align-items: end;
    min-height: 205px;
    padding: 17px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.07);
    background: radial-gradient(circle at 50% 0%, rgba(255,23,77,.12), transparent 32%), rgba(255,255,255,.025);
}
.console-module {
    position: relative;
    z-index: 2;
    min-height: 168px;
    padding: 10px;
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.012)), #06060a;
    border: 1px solid rgba(255,255,255,.095);
    box-shadow: inset 0 0 25px rgba(0,0,0,.82), 0 18px 42px rgba(0,0,0,.35);
    transform: perspective(800px) rotateX(8deg);
    transition: transform .32s var(--ease), border-color .32s var(--ease);
}
.console-module:hover { transform: perspective(800px) rotateX(3deg) translateY(-8px) scale(1.012); border-color: rgba(255,23,77,.42); }
.mixer-module { min-height: 190px; transform: perspective(800px) rotateX(7deg) translateY(-5px); }
.module-label { align-self: flex-start; font-family: Syncopate, sans-serif; font-size:.32rem; letter-spacing:1.85px; color: rgba(255,255,255,.72); }
.deck-screen {
    position: relative; width: 88%; height: 30px; border-radius: 7px; overflow: hidden;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 10px), linear-gradient(90deg, rgba(255,23,77,.18), rgba(157,49,255,.18)), #050610;
    border: 1px solid rgba(255,255,255,.08);
}
.waveform { position: absolute; inset: 10px 10px 9px; background: repeating-linear-gradient(90deg, var(--red) 0 2px, transparent 2px 6px, var(--violet) 6px 8px, transparent 8px 12px); opacity: .74; }
.screen-line { position: absolute; top: 50%; left: 10px; right: 10px; height: 1px; background: rgba(255,255,255,.25); }
.jog-wheel {
    position: relative; width: clamp(68px, 6.3vw, 88px); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center;
    background:
        repeating-radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 1px 7px),
        conic-gradient(rgba(255,23,77,.24), rgba(157,49,255,.2), rgba(255,255,255,.05), rgba(255,23,77,.24)),
        #000;
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: inset 0 0 26px rgba(0,0,0,.88), 0 0 30px rgba(157,49,255,.15);
}
.jog-rings { position: absolute; inset: 7px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.16); }
.jog-rings::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgba(255,23,77,.23); }
.jog-spokes {
    position: absolute; inset: 15px; border-radius: 50%;
    background: conic-gradient(rgba(255,255,255,.18) 0 2deg, transparent 2deg 30deg, rgba(157,49,255,.18) 30deg 32deg, transparent 32deg 60deg);
    mask-image: radial-gradient(circle, transparent 0 42%, black 43%);
    opacity: .55;
}
.jog-center { width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 6%, var(--red) 7% 18%, rgba(157,49,255,.56) 19% 44%, #050505 45%); }
.player-module:hover .jog-wheel { animation: jogSpin 1.1s linear infinite; }
.deck-control-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; width: 82%; }
.deck-control-grid span { height: 6px; border-radius: 99px; background: rgba(255,255,255,.72); }
.deck-control-grid span:first-child { background: var(--green); }
.deck-control-grid span:nth-child(2) { background: var(--red); }
.mixer-display { width: 72%; height: 19px; border-radius: 6px; overflow: hidden; background: linear-gradient(90deg, rgba(66,255,188,.12), rgba(157,49,255,.20)), #030508; border: 1px solid rgba(255,255,255,.08); }
.mixer-display span { display: block; width: 38%; height: 100%; background: linear-gradient(90deg, transparent, rgba(66,255,188,.42), transparent); animation: vuScan 2s ease-in-out infinite; }
.mixer-knob-row,
.mixer-channel-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 5px; width: 100%; }
.mixer-knob-row span,
.eq-dot { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 12%), rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.12); }
.channel-strip { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.eq-dot { width: 7px; height: 7px; }
.fader-line { position: relative; width: 5px; height: 62px; border-radius: 99px; background: linear-gradient(180deg, rgba(255,23,77,.36), rgba(157,49,255,.18)); }
.fader-line i { position: absolute; left: 50%; bottom: 8px; width: 14px; height: 8px; border-radius: 99px; background: #fff; transform: translateX(-50%); transition: transform .42s var(--ease), background .42s var(--ease); }
.mixer-module:hover .fader-line i { transform: translate3d(-50%,-38px,0); background: var(--red); }
.mixer-crossfader { position: relative; width: 78%; height: 6px; border-radius: 99px; background: rgba(255,255,255,.10); }
.mixer-crossfader span { position: absolute; left: 40%; top: 50%; width: 20px; height: 9px; border-radius: 99px; background: #fff; transform: translateY(-50%); transition: left .42s var(--ease); }
.mixer-module:hover .mixer-crossfader span { left: 58%; }

/* Hybrid rider */
.hybrid-rider-row { max-width: 910px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.hybrid-module {
    position: relative;
    min-height: 210px;
    padding: 22px;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 22px;
    align-items: center;
    background: radial-gradient(circle at 14% 12%, rgba(255,23,77,.09), transparent 28%), rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.075);
    transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.hybrid-module:hover { transform: translateY(-5px); border-color: rgba(157,49,255,.38); }
.optional-badge {
    position: absolute; top: 16px; right: 16px;
    font-family: Syncopate, sans-serif; font-size: .46rem; letter-spacing: 2.3px;
    color: rgba(255,255,255,.64);
    border: 1px solid rgba(255,255,255,.10); border-radius: 99px;
    padding: 8px 13px; background: rgba(255,255,255,.035);
}
.hybrid-module h3 { color: #fff; font-size: .78rem; letter-spacing: 4.5px; margin-bottom: 14px; }
.hybrid-module p { font-size: .84rem; line-height: 1.6; max-width: 300px; }

.theremin-visual {
    position: relative;
    width: 172px;
    height: 134px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    isolation: isolate;
    overflow: visible;
}
.theremin-visual::after {
    content: '';
    position: absolute;
    inset: -10px -12px -8px -12px;
    z-index: -1;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        radial-gradient(circle at 38% 38%, rgba(255, 23, 77, 0.12), transparent 36%),
        radial-gradient(circle at 72% 48%, rgba(157, 49, 255, 0.11), transparent 40%),
        linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014)),
        rgba(3, 3, 7, 0.58);
    box-shadow:
        inset 0 0 34px rgba(0, 0, 0, 0.72),
        0 18px 46px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.theremin-module:hover .theremin-visual::after,
.theremin-module:focus-within .theremin-visual::after {
    border-color: rgba(157, 49, 255, 0.34);
    box-shadow:
        inset 0 0 36px rgba(0, 0, 0, 0.72),
        0 22px 54px rgba(0, 0, 0, 0.34),
        0 0 36px rgba(157, 49, 255, 0.16);
}
.theremin-visual span { position: absolute; display: block; }
.theremin-body { left: 14px; bottom: 12px; width: 118px; height: 52px; border-radius: 50% 50% 46% 46% / 64% 64% 34% 34%; background: radial-gradient(circle at 22% 32%, rgba(255,255,255,.78), transparent 9%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(170,176,190,.72) 42%, rgba(44,48,60,.86) 72%, rgba(9,10,16,.96)); border: 1px solid rgba(255,255,255,.30); box-shadow: inset 0 12px 22px rgba(255,255,255,.10), inset 0 -16px 24px rgba(0,0,0,.45), 0 22px 44px rgba(0,0,0,.38), 0 0 32px rgba(157,49,255,.16); }
.theremin-panel { left: 46px; bottom: 35px; width: 60px; height: 22px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,23,77,.12), rgba(157,49,255,.18)), rgba(5,5,10,.86); border: 1px solid rgba(255,255,255,.18); overflow: hidden; }
.theremin-panel::before { content: ''; position: absolute; left: -38%; top: 0; width: 34%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); opacity: 0; }
.theremin-knob { bottom: 42px; width: 5px; height: 5px; border-radius: 99px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.32); }
.knob-one { left: 58px; }
.knob-two { left: 76px; background: var(--red); }
.knob-three { left: 96px; background: var(--violet); }
.theremin-loop { left: -1px; bottom: 47px; width: 62px; height: 20px; border: 1.5px solid rgba(255,255,255,.42); border-right: 0; border-radius: 80px 0 0 80px; transform: rotate(-8deg); opacity: .72; }
.theremin-antenna { right: 16px; bottom: 58px; width: 2px; height: 82px; border-radius: 99px; transform-origin: bottom center; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.30)); box-shadow: 0 0 12px rgba(255,255,255,.32), 0 0 24px rgba(157,49,255,.18); }
.theremin-module:hover .theremin-antenna { animation: thereminAntennaVibe .42s ease-in-out infinite; }
.theremin-module:hover .theremin-panel::before { opacity: 1; animation: thereminSignalSweep 1.15s ease-in-out infinite; }

.v5-synth-visual { position: relative; min-height: 138px; border-radius: 22px; background: radial-gradient(circle at 50% 38%, rgba(255,23,77,.13), transparent 42%), linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.018)), rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.085); box-shadow: inset 0 0 38px rgba(0,0,0,.75); }
.v5-synth-body { position: absolute; left: 13%; right: 19%; bottom: 21%; height: 60px; border-radius: 16px; background: linear-gradient(180deg, rgba(33,34,42,.98), rgba(7,7,12,.98)); border: 1px solid rgba(255,255,255,.13); }
.v5-synth-screen { position: absolute; left: 14px; top: 11px; width: 46%; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--red), var(--violet)); }
.v5-synth-keys { position: absolute; left: 14px; right: 14px; bottom: 10px; display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }
.v5-synth-keys span { height: 28px; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(205,205,215,.68)); }
.v5-synth-controls { position: absolute; right: 14px; top: 10px; display: flex; gap: 5px; }
.v5-synth-controls i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.38); }
.v5-vocoder-arm { position: absolute; right: 17%; top: 32%; width: 48px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(157,49,255,.78)); transform: rotate(-32deg); transform-origin: right center; }
.v5-vocoder-mic { position: absolute; right: 10%; top: 20%; width: 17px; height: 54px; border-radius: 99px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.68) 0 2px, transparent 2px 6px), linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,23,77,.56)); border: 1px solid rgba(255,255,255,.18); }
.vocoder-module:hover .v5-synth-keys span { animation: v5KeyPulse 1.1s ease-in-out infinite; }
.vocoder-module:hover .v5-vocoder-mic { animation: v5MicPulse .9s ease-in-out infinite; }

.rider-requirements { max-width: 910px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.rider-requirements article { padding: 18px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.022); }
.rider-requirements span,
.gear-kicker { display: block; font-family: Syncopate, sans-serif; font-size: .46rem; letter-spacing: 2.3px; color: var(--red); margin-bottom: 10px; }
.rider-requirements h3 { color: #fff; font-size: .85rem; letter-spacing: 3px; margin-bottom: 10px; }
.rider-requirements p { font-size: .8rem; line-height: 1.58; }
.monitor-row { display: none; }

/* ---------- 10. RELEASES ---------- */
.releases-section {
    background:
        radial-gradient(circle at 16% 22%, rgba(30,215,96,.04), transparent 24%),
        radial-gradient(circle at 50% 35%, rgba(0,240,255,.03), transparent 30%);
}
.releases-lead { margin-bottom: 30px; }
.release-platform-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    max-width: 880px;
    margin-inline: auto;
    gap: 18px;
    isolation: isolate;
    overflow: visible;
    perspective: 1400px;
}
.platform-card {
    position: relative;
    z-index: 1;
    min-height: 230px;
    padding: 22px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform-origin: center center;
    will-change: transform, opacity, filter;
    transition:
        transform .92s var(--ease-soft),
        opacity .68s ease,
        filter .68s ease,
        border-color .68s ease,
        box-shadow .68s ease;
}
.platform-card:hover { transform: translateY(-7px) scale(1.02); }
.platform-halo {
    position: absolute;
    inset: 22% auto auto 50%;
    width: 160px; height: 160px;
    border-radius: 50%;
    transform: translateX(-50%);
    opacity: .16;
    filter: blur(26px);
    z-index: -1;
}
.spotify-card .platform-halo { background: var(--spotify); }
.beatport-card .platform-halo { background: var(--beatport); }
.youtube-card .platform-halo { background: var(--youtube); }
.soundcloud-card .platform-halo { background: var(--soundcloud); }

.platform-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: Syncopate, sans-serif; font-size: .48rem; letter-spacing: 2.4px; color: rgba(255,255,255,.5); margin-bottom: 20px; }
.platform-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.platform-icon svg { width: 30px; height: 30px; }
.spotify-card .platform-icon { color: var(--spotify); }
.beatport-card .platform-icon { color: var(--beatport); }
.youtube-card .platform-icon { color: var(--youtube); }
.soundcloud-card .platform-icon { color: var(--soundcloud); }

.platform-card h3 { color: #fff; font-family: Syncopate, sans-serif; font-size: clamp(1.18rem,2.1vw,1.65rem); letter-spacing: clamp(5px,.8vw,9px); margin-bottom: 12px; }
.platform-card p { font-size: .82rem; line-height: 1.55; max-width: 92%; }

.profile-preview {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding: 12px 14px;
    min-height: 72px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    opacity: .72;
    transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.platform-card:hover .profile-preview { opacity: 1; transform: translateY(-3px); }
.profile-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: Syncopate, sans-serif; font-size: .58rem; color: #fff; background: linear-gradient(135deg, rgba(255,23,77,.84), rgba(157,49,255,.74)); }
.spotify-card .profile-avatar { background: linear-gradient(135deg, var(--spotify), rgba(157,49,255,.55)); }
.beatport-card .profile-avatar { background: linear-gradient(135deg, var(--beatport), rgba(255,23,77,.55)); }
.soundcloud-card .profile-avatar { background: linear-gradient(135deg, var(--soundcloud), var(--red)); }
.profile-copy strong { display: block; color: #fff; font-size: .78rem; }
.profile-copy small { color: rgba(255,255,255,.48); font-size: .66rem; }
.profile-meter,
.profile-bars,
.profile-wave { grid-column: 1/-1; height: 5px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 4px; }
.profile-meter span,
.profile-wave span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--spotify), var(--violet)); width: 72%; animation: meterBreath 2s ease-in-out infinite; }
.profile-wave span { width: 88%; background: linear-gradient(90deg, var(--soundcloud), var(--red)); }
.profile-bars { height: 22px; display: flex; gap: 5px; background: transparent; align-items: end; }
.profile-bars span { flex: 1; border-radius: 99px; background: linear-gradient(180deg, var(--beatport), var(--violet)); animation: barDance 1.2s ease-in-out infinite; }
.video-frame { grid-column: 1/-1; position: relative; height: 68px; overflow: hidden; border-radius: 14px; background: linear-gradient(90deg, rgba(255,0,51,.18), rgba(157,49,255,.12)), rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08); }
.video-frame span { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; border-radius: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,.12); }
.video-frame span::after { content: ''; position: absolute; left: 17px; top: 12px; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.video-frame i { display: none; }
.platform-cta { margin-top: 14px; font-family: Syncopate, sans-serif; font-size: .48rem; letter-spacing: 2.4px; color: rgba(255,255,255,.78); }
.platform-cta::after { content: ' →'; }

.release-platform-grid:has(.platform-card:hover) .platform-card:not(:hover),
.release-platform-grid:has(.platform-card:focus-visible) .platform-card:not(:focus-visible) {
    opacity: 0.42;
    filter: blur(2px) saturate(0.68) brightness(0.62);
    transform: scale(0.955) translateZ(-20px);
}
.release-platform-grid .platform-card:hover,
.release-platform-grid .platform-card:focus-visible {
    z-index: 20;
    opacity: 1;
    filter: none;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        0 44px 120px rgba(0, 0, 0, 0.72),
        0 0 72px rgba(157, 49, 255, 0.2),
        0 0 42px rgba(255, 23, 77, 0.13);
    outline: none;
}
.release-platform-grid .platform-card:nth-child(1):hover,
.release-platform-grid .platform-card:nth-child(1):focus-visible { transform: translate3d(42%, 42%, 92px) scale(1.085); }
.release-platform-grid .platform-card:nth-child(2):hover,
.release-platform-grid .platform-card:nth-child(2):focus-visible { transform: translate3d(-42%, 42%, 92px) scale(1.085); }
.release-platform-grid .platform-card:nth-child(3):hover,
.release-platform-grid .platform-card:nth-child(3):focus-visible { transform: translate3d(42%, -42%, 92px) scale(1.085); }
.release-platform-grid .platform-card:nth-child(4):hover,
.release-platform-grid .platform-card:nth-child(4):focus-visible { transform: translate3d(-42%, -42%, 92px) scale(1.085); }
.release-platform-grid .platform-card:hover .platform-halo,
.release-platform-grid .platform-card:focus-visible .platform-halo { opacity: 0.34; transform: translateX(-50%) scale(1.18); }
.release-platform-grid .platform-card:hover .profile-preview,
.release-platform-grid .platform-card:focus-visible .profile-preview { opacity: 1; transform: translateY(-5px) scale(1.018); }

/* ---------- 11. PRENSA ---------- */
.press-section { background: radial-gradient(circle at 18% 15%, rgba(255,23,77,.055), transparent 30%); }
.press-header-row {
    display: grid;
    grid-template-columns: minmax(260px,.74fr) 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 32px;
}
.press-dashboard {
    display: grid;
    grid-template-columns: minmax(250px,.72fr) minmax(300px,.9fr) minmax(340px,1.08fr);
    grid-template-areas:
        'intro charts video'
        'media media video';
    gap: 18px;
    align-items: stretch;
}
.press-intro-panel { grid-area: intro; padding: 22px; }
.press-achievements-card { grid-area: charts; padding: 22px; }
.live-set-feature {
    grid-area: video;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
    align-items: stretch;
}
.live-set-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}
.live-set-copy .press-eyebrow,
.live-set-copy h3,
.live-set-copy p { margin-bottom: 0; }
.live-set-copy p { max-width: 430px; }
.live-set-copy .inline-link { margin-top: 6px; }

.press-eyebrow { display: inline-flex; margin-bottom: 14px; font-family: Syncopate, sans-serif; font-size: .5rem; letter-spacing: 2.8px; color: var(--red); }
.press-intro-panel h3,
.press-achievements-card h3,
.live-set-copy h3,
.press-media-card h3 { color: #fff; margin-bottom: 12px; }
.press-intro-panel p,
.press-achievements-card p,
.live-set-copy p,
.press-media-card p { font-size: .84rem; line-height: 1.58; }
.press-stat-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.065);
}
.press-stat-line strong { font-family: Syncopate, sans-serif; color: var(--red); font-size: 1rem; }
.press-stat-line span { color: var(--muted); font-size: .76rem; }
.chart-list { display: grid; gap: 8px; margin-top: 14px; }
.chart-row {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: #fff;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.075);
    transition: transform .28s var(--ease), border-color .28s var(--ease);
}
.chart-row:hover { transform: translateX(6px); border-color: rgba(255,23,77,.38); }
.chart-rank { font-family: Syncopate, sans-serif; color: var(--red); font-size: .76rem; }
.chart-row strong { display: block; font-size: .92rem; }
.chart-row small { display: block; color: var(--muted); font-size: .76rem; }

.video-poster-link {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 210px;
    margin-top: 10px;
    border-radius: 20px;
    text-decoration: none;
    background:
        linear-gradient(135deg, rgba(255,23,77,.18), rgba(157,49,255,.14)),
        url('https://img.youtube.com/vi/wr6T5Yk8Mqk/maxresdefault.jpg') center/cover;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 22px 56px rgba(0,0,0,.42), inset 0 0 70px rgba(0,0,0,.36);
    transition: transform .28s var(--ease), filter .28s var(--ease);
}
.video-poster-link:hover { transform: scale(1.018); filter: saturate(1.12); }
.video-poster-link::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(1,1,2,.58)); }
.video-play-core {
    position: absolute; z-index: 2;
    left: 50%; top: 50%;
    width: 62px; height: 62px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
}
.video-play-core::before { content: ''; position: absolute; left: 26px; top: 20px; border-left: 17px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.video-poster-label { position: absolute; z-index: 2; left: 16px; bottom: 14px; font-family: Syncopate, sans-serif; font-size: .55rem; letter-spacing: 2.5px; }

.press-media-grid { grid-area: media; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.press-media-card {
    min-height: 170px;
    padding: 18px;
    text-decoration: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    transition: transform .28s var(--ease), border-color .28s var(--ease);
}
.press-media-card::before { content: ''; position: absolute; inset: 0; opacity: .18; background: radial-gradient(circle at 18% 0%, var(--red), transparent 34%), radial-gradient(circle at 100% 0%, var(--violet), transparent 38%); pointer-events: none; }
.press-media-card:hover { transform: translateY(-5px); border-color: rgba(255,23,77,.35); }
.press-cta { margin-top: auto; padding-top: 16px; font-family: Syncopate, sans-serif; font-size: .5rem; letter-spacing: 2.4px; }
.press-cta::after { content: ' →'; color: var(--red); }
.press-cta.inactive::after { content: ''; }

/* ---------- 12. PRESSKIT ---------- */
.presskit-section { background: linear-gradient(180deg, transparent, rgba(255,23,77,.035)); }
.presskit-layout { display: grid; gap: 24px; }
.download-links { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 34px; }
.booking p { font-family: Syncopate, monospace; color: #fff; font-size: clamp(.78rem,1.7vw,1.08rem); letter-spacing: 2px; }
.booking a {
    text-decoration: none;
    border-bottom: 1px solid rgba(255,23,77,.45);
    transition: border-color .28s var(--ease), text-shadow .28s var(--ease);
}
.booking a:hover {
    border-color: #fff;
    text-shadow: 0 0 14px rgba(255,23,77,.48);
}

/* ---------- 13. FINAL BOOKING + FOTO ---------- */
.final-booking-section {
    position: relative;
    height: 135vh;
    margin-top: 0;
    background: #000;
    overflow: clip;
    border-top: none;
}

/* Transición — degradé suave + aberración cromática horizontal continua */
.final-booking-section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 180px;
    z-index: 4;
    pointer-events: none;
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, var(--black) 0%, rgba(1,1,2,.85) 40%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.final-booking-section::after {
    content: '';
    position: absolute;
    top: 18px;
    left: -2%;
    right: -2%;
    height: 22px;
    z-index: 5;
    pointer-events: none;
    background:
        /* Tres líneas horizontales finas RGB continuas — aberración cromática */
        linear-gradient(180deg,
            transparent 0 3px,
            rgba(255, 23, 77, 0.78) 3px 4px,
            transparent 4px 9px,
            rgba(157, 49, 255, 0.68) 9px 10px,
            transparent 10px 15px,
            rgba(0, 232, 255, 0.55) 15px 16px,
            transparent 16px),
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 3px);
    opacity: 0.7;
    mix-blend-mode: screen;
    filter: blur(0.35px);
    animation: glitchSliceShift 7s steps(24) infinite;
}

.final-booking-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 72% 42%, rgba(157,49,255,.12), transparent 28%),
        radial-gradient(circle at 16% 55%, rgba(255,23,77,.10), transparent 24%),
        #000;
}

.booking-photo-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.booking-photo-img {
    --parallax-y: 0px;
    position: absolute;
    inset: -12% -4% -4% -4%;
    background-image: url('../img/beskillz.jpg');
    background-size: cover;
    background-position: center 8%;
    background-repeat: no-repeat;
    filter: grayscale(0.65) contrast(1.08) brightness(0.62) saturate(0.9);
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 1.6s var(--ease);
    animation: bookingPhotoBreath 14s ease-in-out infinite alternate;
}
.final-booking-section.is-visible .booking-photo-img { opacity: 0.78; }

.booking-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 38%, rgba(157,49,255,0.32), transparent 40%),
        radial-gradient(circle at 18% 70%, rgba(255,23,77,0.26), transparent 38%),
        linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.85) 100%),
        radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.65) 100%);
}
.booking-photo-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,255,255,.04) 0 1px, transparent 1.8px);
    background-size: 6px 6px, 9px 9px;
    opacity: .07;
    animation: noiseShift 1s steps(2) infinite;
    mix-blend-mode: overlay;
}

.final-logo-marquee {
    position: absolute;
    left: 0;
    bottom: 18vh;
    z-index: 2;
    display: flex;
    width: max-content;
    gap: .18em;
    font-family: Syncopate, sans-serif;
    font-weight: 700;
    font-size: clamp(7rem, 19vw, 22rem);
    line-height: .78;
    letter-spacing: -.09em;
    white-space: nowrap;
    animation: finalLogoSlide 52s linear infinite;
    pointer-events: none;
    opacity: .9;
    mix-blend-mode: screen;
}
.final-logo-marquee span {
    padding-right: .16em;
    color: transparent;
    background: linear-gradient(90deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.25) 15%, rgba(255,255,255,.98) 46%, rgba(255,255,255,.52) 72%, rgba(255,255,255,.02) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 70px rgba(255,255,255,.05);
}

.final-booking-inner {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
    width: min(1180px, calc(100% - 44px));
    margin-inline: auto;
    padding-bottom: 70px;
    opacity: 0;
    transform: translateY(110px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.final-booking-section.is-visible .final-booking-inner { opacity: 1; transform: translateY(0); }
.final-booking-copy { max-width: 520px; }
.final-booking-copy h2 { margin-bottom: 22px; }
.final-booking-copy p { color: rgba(255,255,255,.68); }
.final-booking-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.booking-main-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    padding: 18px 28px;
    text-decoration: none;
    font-family: Syncopate, sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.75rem);
    letter-spacing: 5px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.42);
    background: linear-gradient(90deg, rgba(255,23,77,.25), rgba(157,49,255,.20));
    box-shadow: 0 0 36px rgba(255,23,77,.18), inset 0 0 24px rgba(255,255,255,.04);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.booking-main-link:hover {
    transform: translateY(-6px);
    border-color: #fff;
    box-shadow: 0 0 48px rgba(255,23,77,.28), 0 0 80px rgba(157,49,255,.16);
}

footer {
    position: relative;
    z-index: 40;
    padding: 36px 0;
    border-top: 1px solid rgba(255,255,255,.12);
    background: #000;
    text-align: center;
}
footer p { font-family: Syncopate, sans-serif; font-size: .55rem; letter-spacing: 2.5px; color: rgba(255,255,255,.42); text-align: center; }

/* ---------- 14. ANIMATIONS ---------- */
@keyframes noiseShift { 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-2px,2px,0)} 100%{transform:translate3d(2px,-1px,0)} }
@keyframes logoMicroOrbit { 0%,100%{transform:translate3d(0,0,0) rotateY(-5deg) rotateX(1deg)} 35%{transform:translate3d(0,-5px,0) rotateY(4deg) rotateX(-1deg)} 70%{transform:translate3d(0,2px,0) rotateY(6deg) rotateX(.8deg)} }
@keyframes jogSpin { to{transform:rotate(360deg) scale(1.02)} }
@keyframes vuScan { 0%,100%{transform:translateX(-110%)} 50%{transform:translateX(260%)} }
@keyframes thereminAntennaVibe { 0%,100%{transform:rotate(0)} 25%{transform:rotate(1.6deg)} 50%{transform:rotate(-1.4deg)} 75%{transform:rotate(1deg)} }
@keyframes thereminSignalSweep { 0%{transform:translateX(0)} 100%{transform:translateX(420%)} }
@keyframes v5KeyPulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.28)} }
@keyframes v5MicPulse { 0%,100%{transform:scaleY(1);filter:brightness(1)} 50%{transform:scaleY(1.06);filter:brightness(1.25)} }
@keyframes meterBreath { 0%,100%{transform:scaleX(.72)} 50%{transform:scaleX(1)} }
@keyframes barDance { 0%,100%{height:35%} 50%{height:100%} }
@keyframes finalLogoSlide { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes logoElectricScan {
    0% { opacity: 0; transform: translate3d(-6px, 0, 0) skewX(-4deg); clip-path: inset(0 100% 0 0); }
    18% { opacity: .72; clip-path: inset(0 58% 0 0); }
    34% { opacity: .22; transform: translate3d(5px, -1px, 0) skewX(3deg); clip-path: inset(0 8% 0 0); }
    55% { opacity: .58; transform: translate3d(-2px, 1px, 0) skewX(-2deg); }
    100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); }
}
@keyframes logoElectricAura {
    0% { opacity: 0; transform: scale(.98); }
    22% { opacity: .56; transform: scale(1.012); }
    58% { opacity: .18; transform: scale(1.006); }
    100% { opacity: 0; transform: scale(1); }
}
@keyframes academyPanelShine {
    0%, 58%, 100% { opacity: 0; transform: translateX(-130%); }
    66% { opacity: 1; }
    82% { opacity: 0; transform: translateX(130%); }
}
@keyframes academyNumberScan {
    0%, 46%, 100% { transform: translateX(-135%); opacity: 0; }
    56% { opacity: .82; }
    76% { transform: translateX(135%); opacity: 0; }
}
@keyframes bookingPhotoBreath {
    0% { transform: scale(1.04) translate3d(0, var(--parallax-y, 0), 0); filter: grayscale(0.65) contrast(1.08) brightness(0.62) saturate(0.9); }
    100% { transform: scale(1.10) translate3d(-1.5%, calc(var(--parallax-y, 0px) - 1%), 0); filter: grayscale(0.55) contrast(1.12) brightness(0.68) saturate(1.05); }
}
@keyframes glitchSliceShift {
    0%, 100% { transform: translate3d(0, 0, 0); opacity: .7; }
    20% { transform: translate3d(-6px, 0, 0); opacity: .82; }
    40% { transform: translate3d(4px, 0, 0); opacity: .48; }
    60% { transform: translate3d(-2px, 0, 0); opacity: .76; }
    80% { transform: translate3d(3px, 0, 0); opacity: .55; }
}

/* ---------- 15. RESPONSIVE ---------- */
@media (max-width: 1120px) {
    .booth-stage { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mixer-module { grid-column: 1 / -1; max-width: 260px; width: 100%; justify-self: center; }
    .rider-requirements { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .press-dashboard { grid-template-columns: 1fr 1fr; grid-template-areas: 'intro charts' 'video video' 'media media'; }
    .press-media-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1100px) {
    .selected-shows-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .show-card-featured,
    .show-card-wide { grid-column: auto; grid-row: auto; min-height: 210px; }
}
@media (max-width: 900px) {
    .hud-nav { left: 22px; right: 22px; top: 20px; align-items: center; }
    .nav-toggle { display: block; }
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 80vw);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 18px;
        padding: 90px 36px 40px;
        background:
            radial-gradient(circle at 80% 18%, rgba(255,23,77,.16), transparent 38%),
            radial-gradient(circle at 30% 90%, rgba(157,49,255,.14), transparent 42%),
            rgba(5,5,10,.96);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-left: 1px solid rgba(255,255,255,.08);
        box-shadow: -30px 0 80px rgba(0,0,0,.6);
        transform: translateX(100%);
        transition: transform .42s var(--ease-soft);
        z-index: 55;
        font-size: .9rem;
        letter-spacing: 3px;
    }
    .nav-links.is-open { transform: translateX(0); }
    .nav-links a { padding: 4px 0 12px; }
    .nav-label::after { bottom: -3px; }

    body.nav-open { overflow: hidden; }
    body.nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 45;
        animation: navOverlayIn .3s ease forwards;
    }

    .split-section,
    .tour-format-grid,
    .academy-proof,
    .bio-grid,
    .hybrid-rider-row { grid-template-columns: 1fr; }
    .featured-tour-card { grid-row: auto; }
    .final-booking-inner { flex-direction: column; align-items: flex-start; padding-bottom: 52px; }
    .final-logo-marquee { bottom: 28vh; font-size: clamp(5rem, 22vw, 12rem); }
    .shows-header { grid-template-columns: 1fr; gap: 20px; }
}

@keyframes navOverlayIn { from { opacity: 0 } to { opacity: 1 } }

@media (max-width: 760px) {
    .selected-shows-grid { grid-template-columns: 1fr; }
    .release-platform-grid:has(.platform-card:hover) .platform-card:not(:hover),
    .release-platform-grid:has(.platform-card:focus-visible) .platform-card:not(:focus-visible) {
        opacity: 0.58;
        filter: blur(1px) brightness(0.72);
        transform: scale(0.98);
    }
    .release-platform-grid .platform-card:nth-child(n):hover,
    .release-platform-grid .platform-card:nth-child(n):focus-visible {
        transform: translate3d(0, -8px, 42px) scale(1.035);
    }
}

@media (max-width: 720px) {
    .scroll-master-container { height: 230vh; }
    .content-section { padding: 74px 0; }
    .container { width: min(100% - 30px, 1180px); }
    .glass-panel,
    .holo-card,
    .press-card,
    .platform-card { padding: 20px; }
    .booth-rig { padding: 14px; }

    .booth-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
        min-height: auto;
    }
    .console-module {
        min-height: 130px;
        padding: 8px;
        max-width: 100%;
        gap: 6px;
    }
    .console-module .deck-screen { height: 22px; }
    .console-module .jog-wheel { width: 54px; }
    .console-module .deck-control-grid span { height: 4px; }
    .mixer-module {
        grid-column: 1 / -1;
        max-width: 320px;
        margin-inline: auto;
        min-height: 170px;
    }
    .mixer-module .fader-line { height: 44px; }
    .mixer-module .channel-strip { gap: 4px; }

    .hybrid-module {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
    }
    .hybrid-module .theremin-visual {
        width: 150px !important;
        height: 110px !important;
        margin-inline: auto;
    }
    .hybrid-module .v5-synth-visual {
        max-width: 240px;
        min-height: 110px;
        margin-inline: auto;
    }
    .hybrid-module p { max-width: 100%; text-align: left; }

    .release-platform-grid,
    .rider-requirements,
    .press-dashboard,
    .press-media-grid { grid-template-columns: 1fr; }
    .press-dashboard { grid-template-areas: 'intro' 'charts' 'video' 'media'; }
    .platform-card { min-height: 210px; }

    .final-booking-section { height: 125vh; }
    .booking-main-link { min-width: 100%; }
    .final-logo-marquee {
        bottom: 32vh;
        font-size: clamp(4rem, 26vw, 7rem);
        opacity: .78;
        animation-duration: 38s;
    }
    .final-booking-inner { padding-bottom: 36px; }
    .booking-photo-img { background-position: center 6%; }
}

@media (max-width: 420px) {
    .booth-stage { grid-template-columns: 1fr 1fr; gap: 6px; }
    .console-module { min-height: 110px; padding: 6px; }
    .console-module .jog-wheel { width: 46px; }
    .console-module .deck-screen { height: 18px; }
    .module-label { font-size: .28rem; }
    .mixer-module { max-width: 280px; min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   16. BOOT LOADER — cinematográfico cyberpunk
   ========================================================================== */
body.is-booting { overflow: hidden; }

.boot-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(157,49,255,.10), transparent 38%),
        radial-gradient(circle at 50% 50%, rgba(255,23,77,.07), transparent 42%),
        #010102;
    transition: opacity .9s var(--ease), visibility .9s var(--ease);
}
.boot-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Grid de fondo (estilo blueprint cyberpunk) */
.boot-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,23,77,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(157,49,255,.05) 1px, transparent 1px);
    background-size: 64px 64px, 64px 64px;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
    animation: bootGridSlide 22s linear infinite;
    pointer-events: none;
}
.boot-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 8px);
    opacity: .45;
    pointer-events: none;
}
.boot-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.10) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 1.8px);
    background-size: 6px 6px, 9px 9px;
    opacity: .07;
    animation: noiseShift 1s steps(2) infinite;
    pointer-events: none;
}

.boot-frame {
    position: relative;
    text-align: left;
    width: min(560px, 88vw);
    padding: 42px 38px 32px;
    border: 1px solid rgba(255,23,77,.22);
    background:
        linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.005)),
        rgba(5,5,10,.78);
    box-shadow:
        0 0 100px rgba(255,23,77,.22),
        0 0 200px rgba(157,49,255,.12),
        inset 0 0 60px rgba(0,0,0,.7);
    animation: bootFrameIn .9s var(--ease) both;
    overflow: hidden;
}

/* Crosshairs en las 4 esquinas */
.boot-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--red);
    box-shadow: 0 0 12px rgba(255,23,77,.55);
}
.boot-corner-tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.boot-corner-tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.boot-corner-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.boot-corner-br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Eyebrow superior */
.boot-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    font-family: Syncopate, sans-serif;
    font-size: .5rem;
    letter-spacing: 2.6px;
    color: rgba(255,255,255,.62);
    text-transform: uppercase;
}
.boot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 12px rgba(255,23,77,.8);
    animation: bootDotPulse 1.1s ease-in-out infinite;
}
.boot-eyebrow-meta {
    margin-left: auto;
    color: rgba(255,255,255,.36);
    letter-spacing: 1.8px;
}

/* Logo central */
.boot-logo {
    font-family: Syncopate, sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    letter-spacing: .14em;
    color: #fff;
    margin-bottom: 6px;
    text-shadow:
        0 0 22px rgba(255,23,77,.6),
        0 0 44px rgba(157,49,255,.42);
    animation: bootLogoFlicker 2s linear both;
}
.boot-subtitle {
    font-family: Syncopate, sans-serif;
    font-size: .54rem;
    letter-spacing: 4.2px;
    color: rgba(255,255,255,.36);
    margin-bottom: 30px;
}

/* Counter % imponente */
.boot-counter-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 8px 0 20px;
    font-family: Syncopate, sans-serif;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow:
        0 0 24px rgba(255,23,77,.55),
        0 0 60px rgba(157,49,255,.32);
}
.boot-counter-prefix,
.boot-counter-suffix {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--red);
    opacity: .82;
    text-shadow: 0 0 12px rgba(255,23,77,.6);
}
.boot-counter {
    font-size: clamp(3rem, 8vw, 4.6rem);
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.85) 45%, rgba(255,23,77,0.85) 78%, rgba(157,49,255,0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(255,23,77,.4));
    letter-spacing: -.02em;
    padding: 0 6px;
}
.boot-counter-symbol {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    color: var(--violet);
    opacity: .9;
    text-shadow: 0 0 14px rgba(157,49,255,.6);
}

/* Progress bar */
.boot-line {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
    margin: 0 auto 24px;
    box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}
.boot-line-fill {
    display: block;
    height: 100%;
    width: 60%;
    background: linear-gradient(90deg, var(--red) 0%, var(--magenta) 50%, var(--violet) 100%);
    box-shadow: 0 0 14px rgba(255,23,77,.65), 0 0 24px rgba(157,49,255,.4);
    animation: bootLineFill 3s var(--ease-soft) both;
}

/* Status rows (aparecen secuencialmente desde JS via clase .is-checked) */
.boot-status {
    margin: 0 0 26px;
    font-family: 'Courier New', monospace;
    font-size: .68rem;
    line-height: 1.9;
    color: rgba(255,255,255,.52);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.boot-status-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), color .3s ease;
}
.boot-status-row.is-checked {
    opacity: 1;
    transform: translateX(0);
}
.boot-status-row.is-checked .boot-status-value {
    color: var(--green);
    text-shadow: 0 0 10px rgba(66,255,188,.45);
}
.boot-status-marker {
    color: var(--red);
    width: 12px;
    text-shadow: 0 0 8px rgba(255,23,77,.5);
}
.boot-status-label {
    flex-shrink: 0;
    color: rgba(255,255,255,.72);
}
.boot-status-dots {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    color: rgba(255,255,255,.22);
    letter-spacing: 2px;
}
.boot-status-value {
    flex-shrink: 0;
    color: rgba(255,255,255,.55);
    font-weight: bold;
}

/* Coords inferiores */
.boot-coords {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px dashed rgba(255,255,255,.08);
    font-family: Syncopate, sans-serif;
    font-size: .48rem;
    letter-spacing: 2.6px;
    color: rgba(255,255,255,.42);
    text-transform: uppercase;
}
.boot-coords-sep { color: var(--red); }

/* Línea de escaneo que baja */
.boot-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    top: 0;
    background: linear-gradient(90deg, transparent, rgba(255,23,77,.85), rgba(157,49,255,.65), transparent);
    box-shadow: 0 0 16px rgba(255,23,77,.55);
    opacity: .85;
    animation: bootScanMove 3s var(--ease-soft) infinite;
}

@keyframes bootFrameIn {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bootLogoFlicker {
    0%, 100% { opacity: 1; }
    8% { opacity: .35; }
    12% { opacity: 1; }
    28% { opacity: .75; }
    32% { opacity: 1; }
    52% { opacity: .55; }
    56% { opacity: 1; }
    78% { opacity: .85; }
    82% { opacity: 1; }
}
@keyframes bootLineFill {
    from { width: 60%; }
    to { width: 100%; }
}
@keyframes bootScanMove {
    0% { top: 0; opacity: .9; }
    100% { top: 100%; opacity: .25; }
}
@keyframes bootDotPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(255,23,77,.8); }
    50% { transform: scale(1.4); box-shadow: 0 0 22px rgba(255,23,77,1); }
}
@keyframes bootGridSlide {
    from { background-position: 0 0, 0 0; }
    to { background-position: 64px 64px, 64px 64px; }
}

/* ==========================================================================
   17. TILT 3D PARALLAX EN CARDS
   ========================================================================== */
.holo-card,
.show-card,
.press-media-card {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
    transform-style: preserve-3d;
    transition: transform .42s var(--ease), border-color .42s var(--ease), box-shadow .42s var(--ease);
}
.holo-card:hover {
    transform: perspective(900px) translateY(-6px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.show-card:hover {
    transform: perspective(900px) translateY(-7px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.press-media-card:hover {
    transform: perspective(900px) translateY(-5px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

/* ==========================================================================
   18. CURSOR MAGNÉTICO
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .cta-scroll,
    .booking-main-link,
    .booking-secondary-link,
    .video-poster-link {
        transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0);
        transition:
            transform .35s var(--ease-soft),
            border-color .28s var(--ease),
            box-shadow .28s var(--ease),
            filter .28s var(--ease);
    }
    .cta-scroll:hover {
        transform: translate3d(var(--mag-x, 0), calc(var(--mag-y, 0px) - 3px), 0);
    }
    .booking-main-link:hover {
        transform: translate3d(var(--mag-x, 0), calc(var(--mag-y, 0px) - 6px), 0);
    }
    .video-poster-link:hover {
        transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0) scale(1.018);
    }
}