/* ==========================================================================
   Coletivo Candango — página inicial
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.display em { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--sun); letter-spacing: -0.035em; }

/* ---------------------------------------------------------------- HERO */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.hero__meta {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--nav-h) + 4vh);
  display: grid;
  gap: 9px;
  color: var(--cream-2);
  z-index: 3;
}
.hero__title {
  position: absolute;
  left: calc(var(--gutter) - 0.04em);
  bottom: 13vh;
  margin: 0;
  z-index: 4;
  font-size: clamp(76px, 14.2vw, 250px);
  font-weight: 900;
  line-height: 0.8;
  pointer-events: none;
}
.hero__title .mask { padding: 0.02em 0 0.07em; margin-bottom: -0.07em; }
.hero__title em { padding-right: 0.06em; }
.hero__lede {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--nav-h) + 4vh + 120px);
  width: min(400px, 30vw);
  z-index: 3;
  display: grid;
  gap: 18px;
}
.hero__lede p { margin: 0; font-size: clamp(21px, 1.85vw, 30px); line-height: 1.18; }
.hero__lede .lbl { color: var(--sun); line-height: 1.6; }

/* A vitrola (disco + capa + braço) */
.deck {
  --D: min(78vh, 49vw);
  position: absolute;
  width: var(--D);
  height: var(--D);
  right: calc(var(--D) * 0.1);
  top: 50%;
  margin-top: calc(var(--D) * -0.47);
  z-index: 2;
}
.deck__sleeve {
  position: absolute;
  inset: 0;
  transform: translate(-30%, -9%) rotate(-7deg);
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(244, 180, 26, 0.18), transparent 60%),
    linear-gradient(160deg, #2a2219, #16120d 70%);
  border-radius: 3px;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(241, 231, 208, 0.08);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.deck__sleeve img { width: 40%; transform: translate(-36%, -34%) rotate(4deg); opacity: 0.95; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
.deck__sleeve .lbl { position: absolute; left: 7%; bottom: 7%; color: var(--cream-2); }
.deck__sleeve::after { /* desgaste da capa (ring wear) */
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px solid rgba(241, 231, 208, 0.05);
  box-shadow: 0 0 0 10px rgba(241, 231, 208, 0.015);
}
.deck__vinyl { position: absolute; inset: 0; touch-action: none; }
.deck__label { --label-bg: var(--sun); }
.deck__label .c-title { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; }

.deck__ctrl {
  position: absolute;
  right: 0;
  bottom: 3%;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 5;
}
.rpm { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 2px; background: var(--bg); }
.deck__ctrl .box { background: var(--bg); }
.rpm button { height: 22px; padding: 0 10px; border-radius: 999px; transition: background-color 0.3s, color 0.3s; }
.rpm button[aria-pressed='true'] { background: var(--sun); color: var(--bg); }
.deck__hint { position: absolute; left: 14%; top: 10%; color: var(--cream-2); transform: rotate(-8deg); z-index: 5; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cream-2);
}
.hero__scroll i { width: 1px; height: 46px; background: linear-gradient(var(--cream-2), transparent); transform-origin: top; animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1) translateY(30%); opacity: 0; } }

.skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 14vh;
  z-index: 1;
  fill: none;
  stroke: rgba(241, 231, 208, 0.13);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.skyline path { vector-effect: non-scaling-stroke; }

@media (max-width: 860px) {
  .hero { display: flex; flex-direction: column; padding: calc(var(--nav-h) + 12px) var(--gutter) 90px; gap: 22px; }
  .hero__meta, .hero__title, .hero__lede { position: relative; left: auto; top: auto; bottom: auto; width: auto; }
  .hero__meta { order: 1; grid-template-columns: 1fr; gap: 6px; font-size: 10px; }
  .deck { order: 2; position: relative; --D: min(84vw, 52svh); right: auto; top: auto; margin: 6px 0 18px calc(50% - var(--D) * 0.6); }
  .deck__sleeve { transform: translate(-18%, -6%) rotate(-7deg); }
  .deck__hint { display: none; }
  .deck__ctrl { bottom: -16%; left: 0; }
  .hero__title { order: 3; font-size: clamp(64px, 21vw, 120px); margin-top: 26px; }
  .hero__lede { order: 4; }
  .hero__scroll { display: none; }
}

/* ---------------------------------------------------------------- FITAS */
.tape {
  position: relative;
  z-index: 6;
  height: 170px;
  margin: -60px 0 0;
  overflow: hidden;
  pointer-events: none;
}
.tape__track {
  position: absolute;
  left: 0;
  top: 50%;
  display: flex;
  white-space: nowrap;
  will-change: transform;
}
.tape__track span, .tape__track b {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(30px, 4.2vw, 62px);
  line-height: 1;
  padding: 12px 0.4em 10px;
}
.tape__track b { color: var(--mato); font-size: clamp(20px, 2.6vw, 38px); align-self: center; }
.tape__band {
  position: absolute;
  left: -5%;
  right: -5%;
  top: 50%;
  height: 74px;
  margin-top: -37px;
  display: block;
}
.tape__band--sun { background: var(--sun); color: var(--bg); transform: rotate(-2.4deg); z-index: 2; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7); }
.tape__band--mato { background: var(--mato); color: var(--bg); transform: rotate(2deg); z-index: 1; }
.tape__band--mato .tape__track b { color: var(--sun); }
.tape__band .tape__track { top: 50%; transform: translateY(-50%); }
@media (max-width: 860px) { .tape { height: 120px; margin-top: 0; } .tape__band { height: 52px; margin-top: -26px; } }

/* ------------------------------------------------------------ SEÇÕES */
.sec-head { display: grid; gap: 0; margin-bottom: clamp(40px, 7vw, 100px); }
.sec-head .lbl { color: var(--sun); margin: 0 0 18px; }
.sec-head h2 { margin: 0; font-size: clamp(64px, 11vw, 190px); font-weight: 900; }

/* ---------------------------------------------------------- QUEM GIRA */
.quem { position: relative; padding: clamp(90px, 16vh, 200px) var(--gutter) clamp(80px, 12vh, 160px); }
.quem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.quem__main { position: relative; margin: 0; padding-right: 22%; }
.quem__vinyl { position: absolute; right: 0; top: 50%; width: 76%; transform: translateY(-50%); }
.quem__label { --label-bg: var(--mato); }
.quem__photo { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 2px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.quem__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease); }
.quem__photo:hover img { transform: scale(1.09); }
.quem__main figcaption { margin-top: 14px; color: var(--muted); }

.quem__text p { margin: 0 0 1.1em; color: var(--cream-2); max-width: 46ch; }
.quem__text .quem__big { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.12; color: var(--cream); max-width: 22ch; }
.quem__big em { color: var(--sun); }

.stats { list-style: none; margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stats li { display: grid; gap: 8px; }
.stats b { font-family: var(--f-display); font-weight: 900; font-size: clamp(48px, 5vw, 76px); line-height: 0.85; color: var(--sun); }
.stats .lbl { color: var(--cream-2); line-height: 1.4; }

.contact-strip {
  margin-top: clamp(70px, 12vh, 150px);
  display: flex;
  justify-content: center;
  padding: 0 4vw;
}
.contact-strip figure {
  margin: 0 -1.2vw;
  width: clamp(130px, 19vw, 280px);
  aspect-ratio: 4 / 5;
  padding: 8px 8px 30px;
  background: #ece3cc;
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.85);
  transform: rotate(var(--r)) translateY(var(--py, 0px));
  transition: transform 0.7s var(--ease), z-index 0s;
  position: relative;
}
.contact-strip figure:hover { z-index: 2; transform: rotate(0deg) translateY(calc(var(--py, 0px) - 16px)) scale(1.06); }
.contact-strip img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.12) contrast(1.04); }

@media (max-width: 860px) {
  .quem__grid { grid-template-columns: 1fr; }
  .quem__main { padding-right: 16%; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .contact-strip { overflow-x: auto; justify-content: flex-start; padding: 20px 8vw 30px; scroll-snap-type: x mandatory; }
  .contact-strip figure { flex: 0 0 52vw; margin: 0 -3vw; scroll-snap-align: center; }
}

/* -------------------------------------------------------- PORTFÓLIO */
.groove { position: relative; height: calc(var(--n, 20) * 46vh + 100vh); border-top: 1px solid var(--rule); }
.groove__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--nav-h) + 10px) var(--gutter) 26px;
}
.groove__head { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 28px; }
.groove__head .lbl { grid-column: 1 / -1; color: var(--sun); margin: 0 0 10px; }
.groove__head h2 { margin: 0; font-size: clamp(54px, 7vw, 120px); font-weight: 900; }
.groove__sub { margin: 0 0 0.5em; color: var(--cream-2); max-width: 30ch; font-size: 18px; line-height: 1.25; }

.groove__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; gap: 2vw; align-items: center; min-height: 0; }
.groove__disc-wrap {
  --D: min(62vh, 36vw);
  position: relative;
  width: var(--D);
  height: var(--D);
  justify-self: center;
  perspective: 1400px;
}
.groove__flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1.1s var(--ease-io);
}
.groove__flip.is-b { transform: rotateY(180deg); }
.groove__disc { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; overflow: visible; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.7)); }
.groove__disc + .groove__disc { transform: rotateY(180deg); }
.groove__disc .band { fill: none; stroke: transparent; cursor: none; pointer-events: stroke; transition: stroke 0.4s; }
.groove__disc .band:hover { stroke: rgba(241, 231, 208, 0.06); }
.groove__disc .band.is-on { stroke: rgba(244, 180, 26, 0.16); }
.groove__disc .gap { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.5; pointer-events: none; }
.groove__disc .rings { fill: none; stroke: rgba(255, 255, 255, 0.035); stroke-width: 0.45; pointer-events: none; }
.groove__disc .sheen { pointer-events: none; mix-blend-mode: screen; }
.tonearm--groove { z-index: 4; }

.groove__info { position: relative; display: grid; align-content: center; gap: 14px; padding-left: clamp(0px, 2vw, 40px); min-height: 0; }
.swap { position: relative; display: block; overflow: hidden; }
.swap > span { display: block; }
.swap > span + span { position: absolute; left: 0; top: 0; width: 100%; }
.swap--inline { display: inline-block; vertical-align: bottom; min-width: 4.6em; }
.groove__track { margin: 0; color: var(--sun); }
.groove__name { margin: 0; font-size: clamp(40px, 5vw, 92px); font-weight: 900; line-height: 0.88; min-height: 1.76em; display: flex; align-items: flex-end; }
.groove__name .swap { width: 100%; }
.groove__place { margin: 0; font-size: 22px; color: var(--cream-2); min-height: 1.3em; }

.groove__media { position: relative; width: min(100%, 420px); aspect-ratio: 5 / 4; margin-top: 10px; }
.poster {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  padding: 16px 18px 18px;
  color: var(--bg);
  background: var(--pc, var(--sun));
  transform: rotate(var(--rot, 0deg));
  clip-path: polygon(0% 2%, 6% 0%, 14% 1.5%, 25% 0%, 38% 1.2%, 50% 0%, 63% 1.6%, 75% 0.2%, 88% 1.4%, 100% 0%, 99% 20%, 100% 45%, 98.6% 70%, 100% 100%, 86% 98.4%, 72% 100%, 58% 98.6%, 44% 100%, 30% 98.2%, 16% 100%, 0% 98.4%, 1.2% 74%, 0% 50%, 1.4% 24%);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
}
.poster::before { /* papel colado: vincos e cola */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.18) 48%, transparent 56%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.12), transparent 30%),
    repeating-linear-gradient(90deg, transparent 0 32%, rgba(0, 0, 0, 0.06) 32% 32.3%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.poster__top, .poster__bot { position: relative; display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.poster__name { position: relative; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: 0.82; font-size: clamp(34px, 4.2vw, 70px); margin: 0; letter-spacing: -0.01em; max-width: 92%; }
.poster__disc { position: absolute; right: -18%; bottom: -30%; width: 66%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 1.4px, #1c1c1c 1.8px 2.6px); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.poster__disc::after { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: var(--pl, var(--cream)); }
.poster--photo { padding: 0; background: #000; }
.poster--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.groove__list {
  position: relative;
  align-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: auto;
  row-gap: 0;
  border-left: 1px solid var(--rule);
  padding-left: 18px;
}
.groove__list li:nth-child(11) { margin-top: 12px; }
.groove__list button { display: flex; gap: 10px; padding: 2.5px 0; color: var(--muted); font-size: 10px; text-align: left; transition: color 0.3s; }
.groove__list button b { font-weight: 500; color: var(--cream-2); width: 2.2em; }
.groove__list button:hover, .groove__list button.is-on { color: var(--cream); }
.groove__list button.is-on b { color: var(--sun); }
.groove__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; height: 1px; background: var(--rule); }
.groove__progress i { position: absolute; inset: 0; background: var(--sun); transform-origin: left; transform: scaleX(0); }

@media (max-width: 1100px) { .groove__list { display: none; } .groove__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 860px) {
  .groove { height: calc(var(--n, 20) * 40vh + 100vh); }
  .groove__head { grid-template-columns: 1fr; }
  .groove__sub { display: none; }
  .groove__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 10px; }
  .groove__disc-wrap { --D: min(62vw, 34svh); margin-top: 6px; }
  .groove__info { padding: 0; gap: 8px; }
  .groove__name { font-size: 40px; min-height: 0; }
  .groove__place { font-size: 18px; }
  .groove__media { width: min(74vw, 320px); margin-top: 8px; }
  .poster__name { font-size: 40px; }
}

/* ------------------------------------------------------------ CAIXOTE */
.crate-cta {
  position: relative;
  padding: clamp(100px, 18vh, 220px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6vw;
  align-items: center;
  border-top: 1px solid var(--rule);
}
.crate-cta__text .lbl { color: var(--sun); margin: 0 0 18px; }
.crate-cta__text h2 { margin: 0 0 30px; font-size: clamp(64px, 10vw, 170px); font-weight: 900; }
.crate-cta__lede { font-size: clamp(21px, 1.8vw, 28px); line-height: 1.25; margin: 0 0 36px; max-width: 26ch; color: var(--cream-2); }
.btn-big {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(26px, 2.4vw, 38px);
  text-decoration: none;
  padding: 16px 28px 14px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--bg);
  transition: background-color 0.3s, transform 0.5s var(--ease);
}
.btn-big i { font-style: normal; transition: transform 0.5s var(--ease); }
.btn-big:hover { background: var(--cream); }
.btn-big:hover i { transform: translateX(8px); }

.crate-cta__fan { position: relative; display: block; aspect-ratio: 1.2; text-decoration: none; }
.fan-item {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 52%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translateX(var(--x)) rotate(var(--r));
  transition: transform 0.9s var(--ease);
}
.fan-item .vinyl { position: absolute; inset: 3%; transform: translateY(var(--vy, -24%)); transition: transform 0.9s var(--ease); }
.fan-item .sleeve { position: absolute; inset: 0; background: center / cover no-repeat; border-radius: 2px; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255,255,255,.06); }
.fan-item .sleeve::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 40%, rgba(0,0,0,.25)); }
.crate-cta__fan:hover .fan-item { transform: translate(-50%, -50%) translateX(calc(var(--x) * 1.7)) rotate(calc(var(--r) * 1.6)); }
.crate-cta__fan:hover .fan-item .vinyl { --vy: -42%; }

@media (max-width: 860px) {
  .crate-cta { grid-template-columns: 1fr; }
  .crate-cta__fan { order: -1; width: 100%; }
}

/* ---------------------------------------------------------------- SET */
.set {
  padding: clamp(80px, 14vh, 180px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 5vw;
  align-items: center;
  border-top: 1px solid var(--rule);
}
.set__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #000; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.set__frame > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.6s; filter: saturate(0.9); }
.set__frame:hover > img { transform: scale(1.04); filter: saturate(1.05); }
.set__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.set__play { position: absolute; left: 50%; top: 50%; width: 21%; transform: translate(-50%, -50%); }
.set__vinyl { display: block; width: 100%; }
.set__vinyl .vinyl__disc { transition: transform 3s linear; }
.set__frame:hover .set__vinyl .vinyl__disc { transform: rotate(540deg); }
.set__label { --label-bg: var(--sun); }
.set__label::before { content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: 15px solid var(--bg); border-top: 9px solid transparent; border-bottom: 9px solid transparent; z-index: 1; }
.set__label::after { display: none; }
.set__text .lbl { color: var(--sun); margin: 0 0 16px; }
.set__text h2 { margin: 0 0 22px; font-size: clamp(64px, 9vw, 150px); font-weight: 900; }
.set__text p { margin: 0 0 24px; font-size: 22px; line-height: 1.3; color: var(--cream-2); max-width: 28ch; }
@media (max-width: 860px) { .set { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ CONTATO */
.contato {
  position: relative;
  padding: clamp(80px, 14vh, 180px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 6vw;
  align-items: center;
  border-top: 1px solid var(--rule);
  overflow: hidden;
}
.contato__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; filter: grayscale(0.15) contrast(1.05); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.contato__text .lbl { color: var(--sun); margin: 0 0 18px; }
.contato__text h2 { margin: 0; font-size: clamp(64px, 10vw, 180px); font-weight: 900; }
.contato__text p { font-size: 22px; line-height: 1.3; color: var(--cream-2); max-width: 30ch; }
.contato__text h2 + h2 + p { margin-top: 30px; }
.contato__links span { display: flex !important; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) { .contato { grid-template-columns: 1fr; } .contato__photo { width: 70%; } }

/* rótulos dentro de blocos de texto mantêm o tamanho de etiqueta */
.set__text p.lbl, .contato__text p.lbl, .crate-cta__text p.lbl { font-size: 11px; line-height: 1.4; }