/* ═══════════════════════════════════════════════════════════
   VÓRTICE · Festival de música electrónica
   Universo: retro-futuro synthwave — neón sobre negro
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:      #08030F;
  --bg-2:    #0E0619;
  --bg-3:    #150A23;
  --white:   #FFFFFF;
  --grey:    #A79DBA;
  --grey-2:  #6E6383;
  --magenta: #FF2E97;
  --cyan:    #00F0FF;
  --violet:  #7A2BFF;
  --yellow:  #FFE600;
  --line:    rgba(255,255,255,.12);
  --line-2:  rgba(255,255,255,.06);

  --display: "Syncopate", "Arial Narrow", Impact, sans-serif;
  --mono: "Space Mono", ui-monospace, Consolas, monospace;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px;
  --s5:64px; --s6:96px; --s7:140px;

  --pad: clamp(18px, 4.5vw, 72px);
  --maxw: 1400px;
  --ease: cubic-bezier(.16,1,.3,1);
  --glow-m: 0 0 18px rgba(255,46,151,.55);
  --glow-c: 0 0 18px rgba(0,240,255,.5);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
section[id]{ scroll-margin-top:92px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--white);
  font-family:var(--mono); font-size:15px; line-height:1.66;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--magenta); color:#0A0212; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

/* Líneas de barrido de televisor */
.scan{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.6;
}

/* ── Tipografía ──────────────────────────────────────────── */
.h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem, 4.6vw, 4rem);
  line-height:1.06; letter-spacing:-.01em; text-transform:uppercase;
}
.h2--c{ text-align:center; }
.tag{
  display:flex; align-items:center; gap:12px;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:var(--s3);
}
.tag i{ width:32px; height:1px; background:var(--cyan); display:block; flex:none; box-shadow:var(--glow-c); }
.tag--c{ justify-content:center; }

/* ── Botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 30px; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase;
  border:2px solid transparent; border-radius:2px;
  position:relative; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn--neon{
  background:linear-gradient(96deg, var(--magenta), var(--violet));
  color:#fff; box-shadow:0 0 0 rgba(255,46,151,0), 0 10px 34px -10px rgba(255,46,151,.8);
}
.btn--neon:hover{ transform:translateY(-3px); box-shadow:0 0 26px rgba(255,46,151,.55), 0 16px 40px -12px rgba(255,46,151,.9); }
.btn--wire{ border-color:var(--cyan); color:var(--cyan); background:transparent; }
.btn--wire:hover{ background:var(--cyan); color:#04121A; box-shadow:var(--glow-c); transform:translateY(-3px); }
.btn--full{ width:100%; }
.btn:active{ transform:translateY(0) scale(.99); }

/* ── Nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:16px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(8,3,15,.82); border-bottom-color:var(--line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.nav__brand{
  font-family:var(--display); font-weight:700; font-size:.95rem;
  letter-spacing:.2em;
  text-shadow:0 0 14px rgba(0,240,255,.5);
}
.nav__links{ display:flex; gap:var(--s4); }
.nav__links a{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
  position:relative; transition:color .25s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px;
  background:var(--magenta); box-shadow:var(--glow-m); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--white); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  border:2px solid var(--magenta); color:var(--magenta);
  padding:9px 18px; font-family:var(--display); font-weight:700;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__cta:hover{ background:var(--magenta); color:#12030A; box-shadow:var(--glow-m); }

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center; overflow:hidden; isolation:isolate;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; display:block; }
.hero__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* Velo suave: protege la lectura sin apagar el sol, que es la pieza de color */
  background:
    radial-gradient(50% 38% at 50% 54%, rgba(8,3,15,.52) 0%, rgba(8,3,15,.14) 60%, transparent 80%),
    linear-gradient(to bottom, rgba(8,3,15,.74) 0%, transparent 24%, transparent 72%, rgba(8,3,15,.88) 100%);
}
.hero__content{ text-align:center; padding:96px var(--pad) var(--s6); position:relative; z-index:1; }
.hero__where{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:var(--s3); text-shadow:var(--glow-c);
}
.hero__title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.2rem, 11vw, 10rem);
  letter-spacing:.02em; line-height:1;
  position:relative; display:inline-block;
  color:var(--white);
  text-shadow:0 0 30px rgba(255,255,255,.28), 0 0 70px rgba(122,43,255,.5);
}
/* Aberración cromática: dos copias desplazadas en magenta y cian */
.hero__title::before, .hero__title::after{
  content:attr(data-glitch); position:absolute; inset:0;
  pointer-events:none;
}
.hero__title::before{ color:var(--magenta); transform:translate(-2px,1px); mix-blend-mode:screen; opacity:.7; animation:gl1 4.4s steps(1) infinite; }
.hero__title::after{ color:var(--cyan); transform:translate(2px,-1px); mix-blend-mode:screen; opacity:.7; animation:gl2 4.4s steps(1) infinite; }
@keyframes gl1{
  0%,92%,100%{ transform:translate(-3px,1px); clip-path:none; }
  93%{ transform:translate(-11px,2px); clip-path:inset(18% 0 62% 0); }
  95%{ transform:translate(7px,-2px); clip-path:inset(58% 0 22% 0); }
  97%{ transform:translate(-5px,0); clip-path:inset(38% 0 44% 0); }
}
@keyframes gl2{
  0%,92%,100%{ transform:translate(3px,-1px); clip-path:none; }
  93%{ transform:translate(10px,-3px); clip-path:inset(52% 0 28% 0); }
  95%{ transform:translate(-8px,2px); clip-path:inset(12% 0 68% 0); }
  97%{ transform:translate(4px,0); clip-path:inset(44% 0 36% 0); }
}
.hero__dates{
  font-family:var(--display); font-weight:700;
  font-size:clamp(.8rem,2.1vw,1.5rem); letter-spacing:.3em;
  margin-top:var(--s3); color:var(--white);
}

.count{
  display:flex; justify-content:center; gap:clamp(14px,3vw,42px);
  margin:var(--s5) 0 var(--s4);
}
.count div{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:64px; }
.count b{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem,4.4vw,3.2rem); line-height:1;
  color:var(--white); font-variant-numeric:tabular-nums;
  text-shadow:0 0 22px rgba(0,240,255,.55);
}
.count span{
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey);
}
.hero__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero__hint.is-gone{ opacity:0; }
.hero__hint{
  position:absolute; bottom:26px; left:0; right:0; text-align:center; z-index:1;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey);
  transition:opacity .5s;
}

/* ── Ticker ──────────────────────────────────────────────── */
.ticker{
  border-block:1px solid var(--line);
  background:linear-gradient(90deg, rgba(255,46,151,.16), rgba(0,240,255,.14));
  overflow:hidden; padding:12px 0;
}
.ticker__track{
  display:flex; gap:var(--s4); align-items:center; width:max-content;
  font-family:var(--display); font-weight:700;
  font-size:clamp(.72rem,1.7vw,1.05rem); letter-spacing:.2em;
  will-change:transform;
}
.ticker__track i{ color:var(--magenta); font-style:normal; }

/* ── Cartel ──────────────────────────────────────────────── */
.line{ padding:var(--s7) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.line .h2{ margin-bottom:var(--s6); }
.line__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.artist{ position:relative; }
.artist__img{
  position:relative; aspect-ratio:1; overflow:hidden;
  border:1px solid var(--line);
}
.artist__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.35) brightness(.78);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
/* Duotono neón: el color se aplica sobre la imagen en gris */
.artist__img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(148deg, var(--magenta) 0%, var(--violet) 52%, var(--cyan) 100%);
  mix-blend-mode:color; opacity:.92;
  transition:opacity .5s var(--ease);
}
.artist__img::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 4px);
  opacity:.55;
}
.artist:hover .artist__img img{ transform:scale(1.06); filter:grayscale(1) contrast(1.2) brightness(1); }
.artist:hover .artist__img::after{ opacity:.45; }
.artist h3{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1rem,1.9vw,1.5rem); letter-spacing:.02em;
  text-transform:uppercase; margin-top:var(--s2);
}
.artist__meta{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey-2); margin-top:6px;
  display:flex; flex-direction:column; gap:2px;
}
.artist__meta span{ color:var(--magenta); }

.line__rest{
  margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--line);
  text-align:center; color:var(--grey); font-size:clamp(.82rem,1.5vw,1.05rem);
  line-height:2; max-width:1000px; margin-inline:auto;
}
.line__rest b{ color:var(--cyan); }

/* ── Sonido ──────────────────────────────────────────────── */
.sound{
  padding:var(--s7) var(--pad);
  background:linear-gradient(180deg, transparent, rgba(122,43,255,.10), transparent);
  border-block:1px solid var(--line-2);
}
.sound__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--s6); align-items:center;
}
.sound__lead{ color:var(--grey); max-width:44ch; margin:var(--s3) 0 var(--s4); }
.player{
  display:inline-flex; align-items:center; gap:14px;
  background:transparent; border:2px solid var(--magenta); border-radius:2px;
  padding:0 26px 0 16px; min-height:60px; cursor:pointer;
  color:var(--white);
  transition:background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.player:hover{ background:rgba(255,46,151,.14); box-shadow:var(--glow-m); transform:translateY(-2px); }
.player__ico{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(96deg,var(--magenta),var(--violet)); flex:none;
}
.player__ico svg{ width:17px; height:17px; }
.player .ico-stop{ display:none; }
.player[aria-pressed="true"] .ico-play{ display:none; }
.player[aria-pressed="true"] .ico-stop{ display:block; }
.player__txt{
  font-family:var(--display); font-weight:700; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.sound__note{ font-size:.72rem; color:var(--grey-2); margin-top:var(--s2); letter-spacing:.06em; }

.viz{
  position:relative; aspect-ratio:16/9; border:1px solid var(--line);
  background:radial-gradient(70% 90% at 50% 100%, rgba(122,43,255,.24), transparent 68%), #05010B;
  overflow:hidden;
}
.viz canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.viz__frame{
  position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 90px rgba(122,43,255,.34);
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}
.viz__idle{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:.8rem;
  letter-spacing:.34em; color:var(--grey-2);
  transition:opacity .4s;
}
.viz__idle.is-off{ opacity:0; }

/* ── Programa ────────────────────────────────────────────── */
.prog{ padding:var(--s7) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.prog .h2{ margin-bottom:var(--s5); }
.prog__days{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--s4); }
.day{
  background:transparent; border:1px solid var(--line); border-radius:2px;
  padding:12px 22px; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.day:hover{ color:var(--white); border-color:var(--grey); }
.day.is-on{
  color:#0A0212; background:var(--cyan); border-color:var(--cyan);
  box-shadow:var(--glow-c);
}
.prog__panels{ position:relative; }
.panel{ display:none; }
.panel.is-on{ display:block; }
.slot{
  display:grid; grid-template-columns:110px 1fr 130px; gap:var(--s3); align-items:center;
  padding:20px 0; border-bottom:1px solid var(--line-2);
  transition:background .25s var(--ease), padding-left .25s var(--ease);
}
.slot:hover{ background:rgba(255,255,255,.03); padding-left:12px; }
.slot b{
  font-family:var(--display); font-weight:700; font-size:.9rem;
  color:var(--cyan); font-variant-numeric:tabular-nums; letter-spacing:.06em;
}
.slot span{
  font-family:var(--display); font-weight:700;
  font-size:clamp(.95rem,2vw,1.45rem); text-transform:uppercase; letter-spacing:.02em;
}
.slot span em{
  font-style:normal; font-family:var(--mono); font-weight:400;
  font-size:.68rem; letter-spacing:.14em; color:var(--magenta);
  border:1px solid var(--magenta); padding:2px 7px; margin-left:10px;
  vertical-align:middle;
}
.slot i{
  font-style:normal; text-align:right; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2);
}
.slot--hi span{ color:var(--magenta); text-shadow:var(--glow-m); }

/* ── Galería ─────────────────────────────────────────────── */
.gal{ padding:var(--s5) 0 var(--s7); overflow:hidden; }
.gal .tag{ margin-bottom:var(--s4); }
.gal__strip{ display:flex; gap:var(--s2); padding-inline:var(--pad); will-change:transform; }
.gal__strip figure{ margin:0; flex:0 0 clamp(240px,28vw,420px); overflow:hidden; border:1px solid var(--line); }
.gal__strip img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  filter:saturate(1.25) contrast(1.16) brightness(.82) hue-rotate(-8deg);
  transition:filter .5s var(--ease), transform .8s var(--ease);
}
.gal__strip figure:hover img{ filter:saturate(1.5) contrast(1.1) brightness(1); transform:scale(1.05); }

/* ── Entradas ────────────────────────────────────────────── */
.tix{ padding:var(--s6) var(--pad) var(--s7); max-width:var(--maxw); margin-inline:auto; }
.tix .h2{ margin-bottom:var(--s6); }
.tix__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); align-items:stretch; }
.tcard{
  border:1px solid var(--line); background:var(--bg-2);
  padding:var(--s4) var(--s3); display:flex; flex-direction:column; gap:var(--s2);
  position:relative;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.tcard:hover{ transform:translateY(-5px); border-color:var(--cyan); box-shadow:0 22px 50px -24px rgba(0,240,255,.6); }
.tcard--hi{
  border-color:var(--magenta);
  background:linear-gradient(180deg, rgba(255,46,151,.10), var(--bg-2) 42%);
  box-shadow:0 26px 60px -28px rgba(255,46,151,.75);
}
.tcard--hi:hover{ border-color:var(--magenta); box-shadow:0 30px 66px -26px rgba(255,46,151,.9); }
.tcard__flag{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--magenta); color:#12030A; padding:4px 14px;
  font-family:var(--display); font-weight:700; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  box-shadow:var(--glow-m);
}
.tcard__kind{
  font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
}
.tcard__price{ display:flex; align-items:baseline; gap:5px; }
.tcard__price b{
  font-family:var(--display); font-weight:700; font-size:3rem; line-height:1;
  font-variant-numeric:tabular-nums;
}
.tcard__price span{ color:var(--grey-2); font-size:1.1rem; }
.tcard ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:var(--s2); }
.tcard li{
  font-size:.84rem; color:var(--grey); padding-left:20px; position:relative;
}
.tcard li::before{
  content:""; position:absolute; left:0; top:9px; width:8px; height:8px;
  background:var(--cyan); box-shadow:var(--glow-c);
}
.tcard--hi li::before{ background:var(--magenta); box-shadow:var(--glow-m); }
.tcard .btn{ margin-top:auto; }
.tcard__left{ font-size:.7rem; letter-spacing:.1em; color:var(--grey-2); text-align:center; }
.tcard__left--hot{ color:var(--yellow); }
.tix__note{ text-align:center; font-size:.72rem; color:var(--grey-2); margin-top:var(--s4); }

/* ── Info ────────────────────────────────────────────────── */
.info{ padding:0 var(--pad) var(--s7); max-width:var(--maxw); margin-inline:auto; }
.info__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
  border:1px solid var(--line); padding:var(--s4) var(--s3);
  background:var(--bg-2);
}
.info__grid h4{
  font-family:var(--display); font-weight:700; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--magenta); margin-bottom:10px;
}
.info__grid p{ font-size:.86rem; color:var(--grey); line-height:1.9; }

/* ── Footer ──────────────────────────────────────────────── */
.foot{ padding:0 var(--pad) var(--s2); overflow:hidden; }
.foot__big{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2rem, 13vw, 12rem); line-height:1;
  letter-spacing:.02em; text-align:center;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.22);
  user-select:none; padding-bottom:var(--s3);
}
.foot__bar{
  display:flex; justify-content:space-between; gap:var(--s2); flex-wrap:wrap;
  border-top:1px solid var(--line-2); padding-top:var(--s2);
  font-size:.72rem; color:var(--grey-2); letter-spacing:.06em;
}
.foot__bar a:hover{ color:var(--cyan); }

[data-reveal]{ opacity:0; transform:translateY(26px); }

/* ═══ Responsive ═══════════════════════════════════════════ */
@media (max-width:1080px){
  .sound__inner{ grid-template-columns:1fr; gap:var(--s4); }
  .line__grid{ grid-template-columns:repeat(2,1fr); }
  .tix__grid{ grid-template-columns:1fr; }
  .tcard--hi{ order:-1; }
  .info__grid{ grid-template-columns:repeat(2,1fr); gap:var(--s4); }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .line__grid{ grid-template-columns:1fr; }
  .slot{ grid-template-columns:74px 1fr; gap:var(--s2); }
  .slot i{ grid-column:2; text-align:left; }
  .count{ gap:12px; }
  .count div{ min-width:56px; }
  .hero__hint{ display:none; }
  .info__grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__title::before, .hero__title::after{ display:none; }
  .scan{ display:none; }
  .gal__strip{ transform:none !important; overflow-x:auto; }
}


/* ── Contacto del autor ─────────────────────────────────────
   Bloque propio del autor de la demo. Va deliberadamente aparte
   del pie del sitio: los datos de contacto de arriba pertenecen a
   la marca inventada, estos son reales. */
.mk{
  position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px);
  z-index:100;
  /* El contenedor no debe interceptar clics: sólo lo hacen la pastilla y el
     panel. Sin esto quedaría un bloque invisible tapando la esquina. */
  pointer-events:none;
}
.mk__toggle{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  pointer-events:auto;
}
/* El panel se coloca ENCIMA de la pastilla y en posición absoluta: si formara
   parte del flujo, ocuparía sitio incluso cerrado y la pastilla flotaría a
   media altura en vez de quedarse en la esquina. */
.mk__panel{
  position:absolute; right:0; bottom:calc(100% + 10px);
  width:min(310px, calc(100vw - 34px));
  pointer-events:auto;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mk.is-open .mk__panel{ opacity:1; visibility:visible; transform:none; }
.mk__link{ display:flex; align-items:center; gap:11px; }
.mk__link svg{ width:18px; height:18px; flex:none; }
.mk__link span{ display:flex; flex-direction:column; }

.mk__toggle{
  background:rgba(14,6,25,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:2px solid var(--magenta); border-radius:2px; padding:11px 18px; color:var(--magenta);
  font-family:var(--display); font-weight:700; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.mk__toggle:hover{ background:var(--magenta); color:#12030A; box-shadow:var(--glow-m); transform:translateY(-2px); }
.mk__dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); flex:none; display:block;
  box-shadow:var(--glow-c); }
.mk__panel{ background:var(--bg-2); border:1px solid var(--line); border-radius:2px; padding:18px;
  box-shadow:0 24px 60px -26px rgba(255,46,151,.7); }
.mk__lead{ font-family:var(--mono); font-size:.79rem; color:var(--grey); margin-bottom:14px; }
.mk__link{ padding:10px 12px; margin-bottom:8px; border:1px solid var(--line); color:var(--white);
  transition:border-color .25s var(--ease), background .25s var(--ease); }
.mk__link:hover{ border-color:var(--cyan); background:rgba(0,240,255,.08); }
.mk__link svg{ color:var(--cyan); }
.mk__link span{ font-family:var(--display); font-weight:700; font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grey-2); line-height:1.7; }
.mk__link b{ font-family:var(--mono); font-size:.83rem; font-weight:400; color:var(--white);
  letter-spacing:.02em; text-transform:none; }
.mk__sign{ font-family:var(--display); font-weight:700; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cyan); text-align:right; margin-top:12px; }

@media (max-width:640px){
  .mk__toggle{ font-size:.70rem; padding:10px 14px; }
  .mk__panel{ padding:15px; }
}
@media (prefers-reduced-motion: reduce){ .mk__dot{ animation:none; } }