/* ==========================================================================
   ISOTOPXS — site oficial
   sistema: maximalista, violento, alto contraste. sem tremedeira — a
   agressividade vem de escala, distorção estática, foto crua e cor.
   CSS puro, sem framework.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rubik+Beastly&family=Unbounded:wght@600;700;800;900&family=Special+Elite&family=Bebas+Neue&display=swap');

:root{
  --black:  #060606;
  --ink:    #0d0d0d;
  --white:  #f4f1ea;
  --red:    #ff1633;
  --red-dk: #8f0011;
  --lime:   #d4ff3f;

  --f-hero:  'Rubik Beastly', var(--f-display);
  --f-display: 'Unbounded', sans-serif;
  --f-body:  'Special Elite', monospace;
  --f-label: 'Bebas Neue', sans-serif;
  --f-btn:   'Bebas Neue', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--black);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  background-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
}

/* grimy grain */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 9999;
  mix-blend-mode: overlay;
  opacity:.34;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* scanlines — liked, pushed further */
body::after{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 9998;
  opacity:.05;
  background: repeating-linear-gradient(180deg, #000 0px, #000 1px, transparent 2px, transparent 3px);
}

a{ color: inherit; }
img{ max-width:100%; display:block; }
::selection{ background: var(--red); color: var(--black); }

h1,h2,h3{ font-family: var(--f-display); text-transform: uppercase; font-weight:700; line-height:.92; margin:0; }
p{ margin:0 0 1em; }
.eyebrow{
  font-family: var(--f-label);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity:.75;
  margin-bottom: 14px;
}

/* ---------- nav ---------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 700;
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px clamp(20px,4vw,48px);
  transition: background .25s ease, border-color .25s ease, padding .25s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  background: rgba(6,6,6,.92);
  backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,.08);
  padding-top:14px; padding-bottom:14px;
}
.nav__mark{
  font-family: var(--f-display);
  font-weight:700;
  font-size: 24px;
  letter-spacing: .5px;
  text-decoration:none;
  color: #fff;
  mix-blend-mode: difference;
  display:flex; align-items:center; gap:8px;
}
.nav__logo{ height:clamp(42px,6vw,60px); width:auto; display:block; }
.nav__links{ display:flex; gap:clamp(14px,2.4vw,32px); list-style:none; margin:0; padding:0; }
.nav__links a{
  font-family: var(--f-body);
  font-weight:400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration:none;
  position:relative;
  padding-bottom:3px;
  color:#fff;
  mix-blend-mode: difference;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background: var(--red); transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.nav__links a:hover::after, .nav__links a.active::after{ transform: scaleX(1); }
.nav__toggle{
  display:none;
  position:relative; z-index:600;
  width:38px; height:32px;
  padding:0; border:none; background:transparent;
  cursor:pointer;
  flex-direction:column; justify-content:space-between;
  mix-blend-mode: difference;
}
.nav__toggle span{
  display:block; width:100%; height:3px; background:#fff;
  transition: transform .25s ease, opacity .2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(14px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-14px) rotate(-45deg); }

.nav__links--mobile{
  display:none;
  position: fixed; inset:0; z-index:650;
  margin:0; padding: 120px clamp(20px,6vw,60px) 40px;
  list-style:none;
  background: var(--black);
  flex-direction:column; gap:6px;
  transform: translateY(-100%);
  transition: transform .3s ease;
}
.nav__links--mobile.is-open{ display:flex; transform: translateY(0); }
.nav__links--mobile li{ border-bottom:1px solid rgba(244,241,234,.14); }
.nav__links--mobile a{
  display:block; padding: 18px 2px;
  font-family: var(--f-display); font-weight:700;
  font-size: clamp(26px,7vw,40px); text-transform:uppercase;
  color:#fff; text-decoration:none; letter-spacing:-.5px;
}
.nav__links--mobile a.active{ color: var(--red); }

/* ---------- ticker ---------- */
.ticker{ overflow:hidden; position:relative; z-index: 20; }
.ticker--red{ background: var(--red); border-top:4px solid #000; border-bottom:4px solid #000; box-shadow: 0 0 0 1px #000; }
.ticker--white{ background: var(--white); border-top:4px solid #000; border-bottom:4px solid #000; box-shadow: 0 0 0 1px #000; }
.ticker--tilt{ transform: rotate(-2.6deg); width:108%; margin-left:-4%; }
.ticker--reverse.ticker--tilt{ transform: rotate(2.2deg); }
.ticker__track{
  display:flex; width:max-content; white-space:nowrap;
  animation: tick 15s linear infinite;
  padding: 11px 0;
}
.ticker--reverse .ticker__track{ animation-direction: reverse; animation-duration: 19s; }
.ticker__track span{
  font-family: var(--f-display);
  font-weight:700;
  font-size: clamp(22px,3.6vw,42px);
  color: #000;
  padding: 0 .55em;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ticker--white .ticker__track span:nth-child(odd){ color: var(--red); }
@keyframes tick{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation: none; }
}

/* ---------- hero (home — foto real) ---------- */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
  padding: 120px 20px 60px;
  isolation:isolate;
}
.hero__photo{
  position:absolute; inset:0; z-index:0;
  background-image: url('../img/hero-show.png');
  background-size: cover;
  background-position: center 26%;
  filter: grayscale(1) contrast(1.4) brightness(.8);
}
.hero__duotone{
  position:absolute; inset:0; z-index:0;
  background: var(--red);
  mix-blend-mode: color;
  opacity:.65;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(6,6,6,.45) 0%, rgba(6,6,6,.1) 38%, rgba(6,6,6,.55) 68%, rgba(6,6,6,.95) 100%),
    radial-gradient(ellipse at 50% 38%, transparent 25%, rgba(6,6,6,.6) 100%);
}
.hero__word{
  position:relative; z-index:2;
  font-family: var(--f-hero);
  font-weight: 400;
  font-size: clamp(50px, 12.5vw, 188px);
  color: var(--white);
  letter-spacing: 0;
  filter: url(#roughen);
  text-shadow:
    7px 6px 0 var(--red),
    -6px -5px 0 #00d9ff,
    0 0 60px rgba(0,0,0,.7);
}
.hero__lede{
  position:relative; z-index:2;
  max-width: 540px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(244,241,234,.85);
  margin: 22px auto 30px;
}
.hero__cta{ position:relative; z-index:2; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* small page hero (subpages — blocos de cor + manchas) */
.pagehero{
  min-height: 46vh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding: 140px clamp(20px,5vw,60px) 50px;
  position:relative; overflow:hidden;
}
.hero__blob{
  position:absolute; border-radius:50%;
  filter: blur(70px);
  opacity:.85;
  z-index:0;
  animation: drift 16s ease-in-out infinite;
}
.hero__blob.b1{ width:52vw; height:52vw; top:-14%; left:-12%; }
.hero__blob.b2{ width:44vw; height:44vw; bottom:-18%; right:-10%; animation-delay:-8s; }
@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(5%,7%) scale(1.18); }
}
.pagehero__word{
  font-size: clamp(44px,9vw,120px); position:relative; z-index:2; letter-spacing:-2px;
  filter: url(#roughen);
  text-shadow: 5px 4px 0 var(--red-dk), -4px -3px 0 #00d9ff;
}
.pagehero__sub{ font-family: var(--f-body); font-size:14px; line-height:1.6; margin-top:14px; max-width:520px; position:relative; z-index:2; }
.pagehero .hero__blob{ opacity:.7; }
.pagehero--black{ background: var(--black); color: var(--white); }
.pagehero--white{ background: var(--white); color: var(--black); }
.pagehero--red{ background: var(--red); color: var(--black); }
.pagehero--white .hero__blob.blob-a{ background: var(--red); }
.pagehero--white .hero__blob.blob-b{ background: var(--black); }
.pagehero--black .hero__blob.blob-a{ background: var(--red); }
.pagehero--black .hero__blob.blob-b{ background: var(--lime); }
.pagehero--red .hero__blob.blob-a{ background: var(--black); }
.pagehero--red .hero__blob.blob-b{ background: var(--white); }
.pagehero--black .pagehero__word{ color: var(--white); }
.pagehero--white .pagehero__word, .pagehero--red .pagehero__word{ color: var(--white); }
.pagehero--red .pagehero__sub{ color: var(--white); }

/* ---------- buttons — carimbo de cartaz: caixa serigrafada com borda irregular, texto continua nitido ---------- */
.btn{
  position:relative;
  isolation:isolate;
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-btn);
  font-weight: 400;
  font-size: 18px; text-transform:uppercase; letter-spacing:1.5px;
  padding: 16px 30px;
  text-decoration:none;
  color: var(--black);
  cursor:pointer;
  transition: color .12s ease;
}
.btn::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background: var(--white);
  border: 3px solid #000;
  filter: url(#roughen);
  transition: background .15s ease, border-color .15s ease;
}
.btn span{ position:relative; z-index:1; }
.btn:hover{ color: var(--white); }
.btn:hover::before{ background: var(--black); }

.btn--outline{ color: var(--white); }
.btn--outline::before{ background: transparent; border-color: var(--white); }
.btn--outline:hover{ color: var(--black); }
.btn--outline:hover::before{ background: var(--white); border-color:#000; }

.btn--dark{ color: var(--black); }
.btn--dark::before{ background: transparent; border-color:#000; }
.btn--dark:hover{ color: var(--white); }
.btn--dark:hover::before{ background:#000; }

.btn[aria-disabled="true"]{ opacity:.35; pointer-events:none; }

/* ---------- full-bleed sections ---------- */
.section{ padding: clamp(70px,10vw,130px) clamp(20px,5vw,60px); position:relative; }
.section--black{ background: var(--black); color: var(--white); }
.section--white{ background: var(--white); color: var(--black); }
.section--red{ background: var(--red); color: var(--black); }
.section__inner{ max-width: 1180px; margin:0 auto; }
.section--red a, .section--white a{ text-decoration-color: currentColor; }

.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,5vw,80px); align-items:start; }
@media (max-width:800px){ .split{ grid-template-columns:1fr; } }

.bigtext{ font-size: clamp(30px,5vw,64px); letter-spacing:-2px; }
.pull{
  font-family: var(--f-display);
  font-weight:700;
  font-size: clamp(26px,4vw,46px);
  line-height:1.05;
  text-transform:uppercase;
}
.pull em{ font-style:normal; color: var(--red); }
.section--red .pull em{ color: var(--black); }
.lead{ font-size: 19px; max-width: 60ch; }
.section--white .lead, .section--white p{ color: rgba(6,6,6,.68); }
.section--black .lead, .section--black p{ color: rgba(244,241,234,.68); }

/* ---------- stats ---------- */
.stats{ display:flex; flex-wrap:wrap; gap: clamp(28px,6vw,72px); margin-top: 40px; }
.stat__num{
  font-family: var(--f-display);
  font-weight:700;
  font-size: clamp(48px,7vw,92px);
  color: var(--red);
  line-height:1;
  letter-spacing:-2px;
  text-shadow: 4px 4px 0 var(--red-dk);
}
.section--red .stat__num{ text-shadow: 4px 4px 0 #000; color: var(--black); }
.stat__label{ font-family: var(--f-label); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; opacity:.65; margin-top:6px; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal-stagger > *{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal-stagger.is-visible > *{ opacity:1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.09s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.16s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.23s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.30s; }

/* ---------- tabs (musica) ---------- */
.tab-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 24px; }
.tab-btn{
  font-family: var(--f-display); font-weight:700;
  font-size: 15px;
  background: transparent;
  color: rgba(244,241,234,.6);
  border: 3px solid rgba(244,241,234,.25);
  padding: 9px 18px;
  cursor:pointer;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s, transform .15s;
}
.tab-btn:hover{ border-color: var(--red); color: var(--white); }
.tab-btn.active{ background: var(--red); color:#000; border-color: #000; box-shadow: 4px 4px 0 #000; transform: translate(-2px,-2px); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.lyrics{
  font-family: var(--f-body);
  white-space: pre-line;
  color: rgba(244,241,234,.85);
  line-height: 1.95;
  font-size: 14px;
}
.track-meta{
  font-family: var(--f-label);
  color: var(--red);
  font-size: 13px;
  letter-spacing:.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  display:block;
}

/* ---------- track / show / product lists ---------- */
.list-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 22px 18px;
  border-bottom: 1px solid rgba(244,241,234,.14);
  position:relative;
  transition: color .25s ease, padding-left .25s ease;
}
.section--white .list-row{ border-color: rgba(6,6,6,.14); }
.list-row::before{
  content:""; position:absolute; inset:0;
  background: var(--red); transform: scaleX(0); transform-origin:left;
  transition: transform .28s ease; z-index:0;
}
.list-row:hover::before{ transform: scaleX(1); }
.list-row:hover{ color:#000; padding-left:30px; }
.list-row > *{ position:relative; z-index:1; }
.list-row .idx{ font-family: var(--f-label); font-size:13px; opacity:.55; width:32px; }
.list-row .name{ font-family: var(--f-display); font-weight:700; font-size: clamp(18px,2.6vw,26px); flex:1; text-transform:uppercase; }
.list-row .meta{ font-family: var(--f-label); font-size:13px; opacity:.65; text-align:right; }

/* ---------- grids ---------- */
.grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width:820px){ .grid3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .grid3{ grid-template-columns: 1fr; } }

.card{
  border: 3px solid rgba(244,241,234,.2);
  padding: 22px;
  position:relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.section--white .card{ border-color: rgba(6,6,6,.2); }
.card:hover{ transform: translate(-4px,-4px); border-color: var(--red); box-shadow: 6px 6px 0 var(--red-dk); }
.section--red .card:hover{ border-color: #000; box-shadow: 6px 6px 0 #000; }
.card .thumb{
  aspect-ratio: 4/3;
  margin-bottom:16px;
  background: linear-gradient(135deg, var(--red), #7a0010 60%);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-weight:700; font-size:15px; letter-spacing:1px;
  color: rgba(255,255,255,.9);
  overflow:hidden;
}
.card .tag{
  position:absolute; top:14px; right:14px;
  background: var(--black); color: var(--white);
  font-family: var(--f-label); font-size:10px; letter-spacing:1px;
  padding:4px 9px; text-transform:uppercase;
  transform: skewX(-8deg);
  box-shadow: 3px 3px 0 var(--red-dk);
}
.section--white .card .tag{ background: var(--white); color: var(--black); border:1px solid var(--black); }
.card h3{ font-size: 20px; margin-bottom:4px; text-transform:uppercase; }
.card .price{ font-family: var(--f-label); color: var(--red); font-size:15px; }
.section--red .card .price{ color: var(--black); }

/* ---------- stage plot ---------- */
.stageplot{
  display:grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: repeat(3,74px);
  gap:8px;
  margin: 24px 0;
}
.sp-item{
  background: rgba(6,6,6,.06);
  border:2px solid rgba(6,6,6,.16);
  color: rgba(6,6,6,.75);
  font-family: var(--f-label);
  font-size: 12px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:4px;
}
.section--black .sp-item{ background: rgba(244,241,234,.05); border-color: rgba(244,241,234,.18); color: rgba(244,241,234,.75); }
.sp-item.drums{ grid-column: 3; grid-row: 1 / span 2; border-color: var(--red); }
.sp-item.guitar{ grid-column: 1 / span 2; grid-row: 2; }
.sp-item.bass{ grid-column: 4 / span 2; grid-row: 2; }
.sp-item.vox{ grid-column: 2 / span 3; grid-row: 3; background: var(--red); color:#000; border-color: var(--red); }
.sp-item.dj{ grid-column: 1; grid-row: 3; }
.sp-item.wedge{ grid-column: 5; grid-row: 3; }

/* ---------- table ---------- */
table{ width:100%; border-collapse: collapse; font-family: var(--f-label); font-size:14px; }
th,td{ border-bottom: 1px solid rgba(244,241,234,.16); padding: 14px 10px; text-align:left; }
.section--white th, .section--white td{ border-color: rgba(6,6,6,.16); }
th{ text-transform:uppercase; font-family: var(--f-body); font-weight:700; font-size:13px; letter-spacing:1px; opacity:.6; }

/* ---------- form ---------- */
.form{ display:flex; flex-direction:column; gap:12px; max-width:460px; }
.form input, .form textarea{
  background: transparent; border:none; border-bottom:2px solid rgba(244,241,234,.3);
  color: inherit; font-family: var(--f-body); font-size:16px; padding:10px 2px;
}
.section--white .form input, .section--white .form textarea{ border-color: rgba(6,6,6,.3); }
.form input:focus, .form textarea:focus{ outline:none; border-color: var(--red); }
.form input::placeholder, .form textarea::placeholder{ color: inherit; opacity:.45; }

/* ---------- footer ---------- */
footer{ background: var(--black); color: rgba(244,241,234,.55); padding: 50px clamp(20px,5vw,60px) 30px; }
.footer__top{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; border-bottom:1px solid rgba(244,241,234,.14); padding-bottom:34px; margin-bottom:22px; }
.footer__word{ font-family: var(--f-display); font-weight:700; text-transform:uppercase; font-size: clamp(34px,6vw,70px); color: var(--white); line-height:.92; }
.footer__links{ display:flex; gap:22px; flex-wrap:wrap; list-style:none; padding:0; margin:0; font-family: var(--f-label); font-size:13px; }
.footer__links a{ text-decoration:none; }
.footer__links a:hover{ color: var(--red); }
.footer__bottom{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family: var(--f-body); font-size:11px; }

/* ---------- press kit logos ---------- */
.presskit-logos{ display:flex; gap:28px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.presskit-logos img{ max-height:120px; width:auto; }
.presskit-logos .card{ padding:24px; display:flex; align-items:center; justify-content:center; }

/* ---------- embed ---------- */
.embed-wrap{ margin: 20px 0 28px; border: 3px solid rgba(244,241,234,.2); }
.embed-wrap iframe{ display:block; width:100%; border:0; }

/* ---------- misc ---------- */
.audio-toggle{
  position: fixed; bottom:22px; right:22px; z-index:600;
  width:48px; height:48px; border-radius:50%;
  background: var(--red); color:#000;
  border:none; font-family: var(--f-label); font-size:16px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  transition: transform .2s ease;
}
.audio-toggle:hover{ transform: scale(1.08); }

@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; margin-right: 6px; }
  .nav{ padding-right: calc(clamp(20px,4vw,48px) + 14px); }
  .list-row .meta{ display:none; }
}