/* Tema base (fallback). O renderer injeta os design tokens do artista via
   <style>:root{...}</style> (Fatia 7, engine 7.2 — src/lib/templates.ts).
   Estes valores garantem a pagina renderizar mesmo sem o inline. */
:root {
  --bg: #0a0a0f;
  --panel: #141318;
  --fg: #ffffff;
  --muted: #a1a1aa;
  --accent: #7c3aed;
  --line: #2f3037;
  --radius: 14px;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --space: 2rem;
  --hero-overlay: 0.85;
  /* Texto SOBRE o accent (CTA/selo/ingressos). O renderer deriva por luminancia
     (onAccentColor) e sobrescreve; este fallback repete o antigo `color:#fff`. */
  --on-accent: #ffffff;
  /* Texto do hero: o scrim e sempre escuro, entao o tema CLARO manda branco aqui
     em vez do proprio --fg (que seria quase-preto sobre foto escurecida). */
  --hero-fg: var(--fg);
  --hero-muted: var(--muted);
  /* Multiplicador do nome do artista. Entra DENTRO do clamp de CADA camada que
     define o h1 (base + kit clean + kit underground) — as tres tem o mesmo peso
     (0,2,1), entao uma classe modificadora empataria e dependeria da ordem do
     arquivo. Com multiplicador nao ha briga, e kit novo herda de graca. */
  --name-scale: 1;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  /* Torna 100cqw a largura útil da página, sem contar a barra vertical do browser. */
  container-type: inline-size;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.5;
}
.epk,
.landing {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
}
/* Largura do conteudo (ajuste global de "Aparencia", nao por-secao). Seletor
   combinado .epk.epk--width-* (0,2,0) vence .epk (0,1,0) E .epk--kit-underground
   (0,1,0, que tem seu PROPRIO max-width:1120px mais abaixo no arquivo) independente
   da ordem no arquivo. Sobrescrever max-width explicitamente e obrigatorio -- so
   redefinir "width" NAO basta, pois width e max-width sao propriedades
   independentes na cascata e o max-width do kit continuaria capando o resultado.
   "default" nao emite classe -> markup/CSS atuais (inclusive o cap do underground)
   ficam intactos. */
.epk.epk--width-wide {
  width: 100%;
  max-width: 1366px;
}
.epk.epk--width-full {
  width: 100%;
  max-width: none;
  /* Sem max-width nao existe margem automatica -> o unico respiro lateral e o
     padding, que no kit para em 24px (clamp(...,1.5rem)). Em tela larga isso
     encosta o conteudo na borda ("colado na tela, sem margem" — achado do dono).
     Aqui o gutter volta a crescer com a viewport. So nesta variante: `default` e
     `wide` centram sozinhos e nao precisam. */
  padding-inline: clamp(1rem, 4vw, 5rem);
}
/* ---- Alinhamento do conteudo (ajuste do modelo, global) --------------------
   `left` e o default e NAO emite classe (markup/CSS atuais intactos, zero
   regressao). `center` centraliza o hero, os titulos de secao e o texto — e,
   crucial, RECENTRA o que tem limite de leitura: `.bio p` para em 68ch/760px e
   sem `margin-inline:auto` ficaria alinhado a esquerda dentro de um bloco
   centrado, o que le como bug. Mesmo raciocinio do vao morto da largura.
   Peso 0,2,0 (.epk--align-center .hero) — acima das regras base (0,1,x) e
   empatando com o kit so onde o kit fala de text-align, o que ele nao faz. */
.epk--align-center .hero,
.epk--align-center .hero-body,
.epk--align-center .section {
  text-align: center;
}
.epk--align-center .hero-ctas,
.epk--align-center .social--buttons ul,
.epk--align-center .stat-grid {
  justify-content: center;
}
.epk--align-center .bio p,
.epk--align-center .tagline {
  margin-inline: auto;
}
/* A linha do tempo tem eixo vertical a esquerda: centralizar o texto dela
   descolaria o texto dos marcadores. Fica como esta. */
.epk--align-center .highlights--timeline .highlights-list {
  text-align: left;
}
/* Largura sem contrapartida era metade do bug: alargar o container esticava os
   titulos mas NAO o conteudo -- o texto para no limite de leitura (760px/68ch,
   correto) e o resto virava vao morto de um lado so. Quem tem de aproveitar o
   espaco extra e a MIDIA. Sem isto, "Larga"/"Total" so afastam as coisas. */
.epk--width-wide .photo-grid,
.epk--width-full .photo-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.epk--width-wide .photo-grid--masonry,
.epk--width-full .photo-grid--masonry {
  columns: 3;
}
/* Overrides por widget (style_tokens.section_layouts). Sem classe significa
   herdar o padrão global; cada regra abaixo atua somente na seção marcada. */
.epk .section.section--width-default {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(100cqw, 920px);
  max-width: 920px;
  margin-right: 0;
  margin-left: 0;
}
.epk .section.section--width-wide {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(100cqw, 1366px);
  max-width: 1366px;
  margin-right: 0;
  margin-left: 0;
}
.epk .section.section--width-full {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100cqw;
  max-width: none;
  padding-inline: clamp(1rem, 4vw, 5rem);
}
.epk .section.section--align-left {
  text-align: left;
}
.epk .section.section--align-center {
  text-align: center;
}
.epk .section.section--align-center.bio p,
.epk .section.section--align-center .tagline {
  margin-inline: auto;
}
.epk .section.section--align-center .stat-grid,
.epk .section.section--align-center.social--buttons ul {
  justify-content: center;
}
.epk .section.section--align-center.highlights--timeline .highlights-list {
  text-align: left;
}
.epk .section.section--align-left .bio p,
.epk .section.section--align-left .tagline {
  margin-inline: 0;
}
.epk .section.section--align-left .stat-grid,
.epk .section.section--align-left.social--buttons ul {
  justify-content: flex-start;
}
.epk .hero.hero--layout-width-default {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(100cqw, 920px);
  margin: -1rem 0 0;
}
.epk .hero.hero--layout-width-wide {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(100cqw, 1366px);
  margin: -1rem 0 0;
}
.epk .hero.hero--layout-width-full {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100cqw;
  max-width: none;
  margin: -1rem 0 0;
}
.epk .hero.hero--layout-align-left,
.epk .hero.hero--layout-align-left .hero-body {
  text-align: left;
}
.epk .hero.hero--layout-align-center,
.epk .hero.hero--layout-align-center .hero-body {
  text-align: center;
}
.epk .hero.hero--layout-align-center .hero-ctas {
  justify-content: center;
}
.epk .hero.hero--layout-align-center .tags {
  justify-content: center;
}
.hero {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: -1rem -1rem 0;
  padding: 8rem 1rem 2rem;
  background-color: var(--panel);
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--line);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(
    calc(2.5rem * var(--name-scale)),
    calc(9vw * var(--name-scale)),
    calc(4.5rem * var(--name-scale))
  );
  margin: 0.25rem 0;
  letter-spacing: 0;
}
.tags {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}
.tagline {
  color: var(--muted);
  font-size: 1.1rem;
}
.loc {
  color: var(--muted);
}
/* Texto do hero SO nas variantes que tem area cheia + scrim escuro sobre a foto
   (full-bleed/video-bg). `split` e `minimal` NAO tem scrim — o texto deles vive
   sobre o fundo da pagina e continua em --fg/--muted, senao um tema claro
   renderizaria branco sobre bege. Nos temas escuros --hero-fg == --fg, entao
   estas regras sao no-op e nada muda. */
.hero--full-bleed,
.hero--video {
  color: var(--hero-fg);
}
.hero--full-bleed .tags,
.hero--full-bleed .tagline,
.hero--full-bleed .loc,
.hero--video .tags,
.hero--video .tagline,
.hero--video .loc {
  color: var(--hero-muted);
}
.cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  /* O CTA de booking carrega o e-mail do contato, que nao tem limite de tamanho
     e nao tem ponto de quebra natural. Sem estas duas linhas ele estoura o card
     e chega a sair da tela no mobile. max-width prende ao container; break-word
     permite a quebra do endereco quando nem assim couber. */
  max-width: 100%;
  overflow-wrap: break-word;
}
/* Os dois CTAs do hero (Booking + pasta do presskit) lado a lado, quebrando
   juntos no celular. O margin-top vem do .cta; aqui o gap cuida do resto. */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
/* O botao da pasta e um `.cta` e MAIS NADA: herda o tratamento do tema/kit
   inteiro (neon do underground, tinta do clean, e o que vier depois), igual ao
   Booking. `.cta--folder` fica so como gancho semantico — SEM declaracao visual.

   Historico, pra nao repetirem: aqui existia um "contorno secundario" (background
   transparente + color:inherit + border:currentColor) pra ele nao competir com o
   Booking. Deu invisibilidade: `.cta--folder` (0,1,0) EMPATA com `.cta` e vence o
   `background` por ordem no arquivo, mas PERDE a `color` pra `.epk--kit-* .cta`
   (0,2,0) — resultado, texto --on-accent (quase preto, feito pra ficar SOBRE o
   accent) num fundo transparente sobre hero preto. Mesma armadilha de
   especificidade ja documentada nas variantes de secao. Hierarquia visual entre os
   dois CTAs, se for desejada, tem de nascer no KIT (onde o `.cta` ja e estilizado),
   nunca numa modificadora de peso menor. */
/* Variantes de hero (Fatia 7 - 7.3): estrutura funcional; estilo fino vem depois. */
.hero--split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: auto;
  padding: 0;
  gap: 0;
}
.hero--split .hero-media {
  min-height: 240px;
  background-position: center;
  background-size: cover;
  background-color: var(--panel);
}
.hero--split .hero-body {
  padding: 2rem 1rem;
}
.hero--minimal {
  min-height: 42vh;
  justify-content: center;
  padding-top: 4rem;
  background-color: var(--bg);
}
@media (min-width: 720px) {
  .hero--split {
    grid-template-columns: 1.1fr 1fr;
  }
  .hero--split .hero-media {
    min-height: 420px;
  }
}
/* ---- Video de fundo da Capa (opt-in, presentation.hero_video) --------------
   Camadas empilhadas: a FOTO (poster) e o background do .hero; o video cobre por
   cima; o scrim (.hero-scrim) fica ACIMA do video pra o texto continuar legivel;
   o conteudo no topo. No reduced-motion o video some e sobra foto + scrim — o
   fallback perfeito, sem JS. */
.hero--has-video {
  position: relative;
  overflow: hidden;
}
/* Conteudo do hero acima das camadas de fundo (o :not evita empurrar as proprias
   camadas). z-index 2 = topo; scrim = 1; video = 0; foto = background do header. */
.hero--has-video > *:not(.hero-video-bg):not(.hero-scrim) {
  position: relative;
  z-index: 2;
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Cobre o quadro sem barras: o iframe (16:9) e dimensionado pela viewport e
   centralizado; sendo maior que a caixa do hero, o overflow:hidden do pai recorta.
   E o padrao consagrado de hero de video. */
.hero-video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw; /* 16:9 pela largura da viewport */
  min-width: 177.78vh; /* 16:9 pela altura da viewport (o maior cobre) */
  min-height: 100vh;
  border: 0;
}
/* No split o video vive no bloco de midia (sem scrim); a foto e o poster embaixo. */
.hero--split .hero-media {
  position: relative;
  overflow: hidden;
}
/* ---- Capa do celular (opt-in) --------------------------------------------
   Uma foto landscape de desktop vira uma fatia vertical no celular. Quando o
   artista define uma capa mobile propria, o SSR marca o elemento de fundo com
   .hero--has-mobile-cover e injeta a custom prop --hero-mobile-bg (a imagem, ja
   com o scrim no full-bleed). Em telas <=640px trocamos a imagem por essa var.
   `!important` e proposital: sobrepoe o background-image/position INLINE do
   desktop, e SO nesta classe opt-in + SO no celular retrato (o desktop fica
   intacto, zero regressao). Enquadramento mobile = center/cover (v1). */
@media (max-width: 640px) {
  .hero--has-mobile-cover {
    background-image: var(--hero-mobile-bg) !important;
    background-position: center !important;
    background-size: cover !important;
  }
}
/* Decisao do dono (2026-07-17): o video de fundo e opt-in do artista e MUDO, entao
   toca para TODOS — inclusive em prefers-reduced-motion. NAO reintroduzir um
   `display:none` do .hero-video-bg aqui: antes ele sumia pra quem tinha "reduzir
   movimento" ligado (comum no desktop), e o dono so via a foto e achava quebrado.
   A foto segue sendo o poster/fallback quando o video nao pode tocar (autoplay
   bloqueado, rede). A marquee do underground (mais abaixo) continua parando em
   reduced-motion — la o movimento e superfluo; aqui e o proprio conteudo da Capa. */
.section {
  margin-top: var(--space);
  padding-top: var(--space);
  border-top: 1px solid var(--line);
}
.section h2 {
  margin: 0 0 1rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.bio {
  color: var(--fg);
}
.link-list {
  display: grid;
  gap: 0.75rem;
}
.item-link {
  display: block;
  min-height: 44px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.photos__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.photo-grid--carousel {
  display: flex;
  overflow-x: auto;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.photo-grid--carousel figure {
  flex: 0 0 min(78%, 320px);
  min-width: 0;
  scroll-snap-align: start;
}
.photo-grid--carousel img {
  width: 100%;
}
.photo-lightbox-trigger {
  display: block;
  cursor: zoom-in;
}
.photo-download,
.photo-zip-download {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.photo-download svg,
.photo-zip-download svg {
  width: 1em;
  height: 1em;
}
.photo-zip-status {
  flex-basis: 100%;
  font-size: 0.875rem;
}
.photo-zip-status.is-error {
  color: var(--danger, #b42318);
}
.photo-zip-download.is-loading {
  opacity: 0.65;
  pointer-events: none;
}
.photo-lightbox {
  width: min(96vw, 1100px);
  max-width: 96vw;
  max-height: 94dvh;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--panel);
}
.photo-lightbox::backdrop {
  background: rgb(0 0 0 / 0.86);
}
.photo-lightbox__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.photo-lightbox__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}
.photo-lightbox__body figure {
  min-width: 0;
  margin: 0;
  text-align: center;
}
.photo-lightbox__body img {
  display: block;
  width: 100%;
  max-height: calc(88dvh - 4rem);
  object-fit: contain;
}
.photo-lightbox__caption {
  min-height: 1.25em;
  padding-top: 0.4rem;
}
.photo-lightbox__close,
.photo-lightbox__nav {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  background: var(--panel);
  cursor: pointer;
}
.photo-lightbox__nav {
  font-size: 1.5rem;
}
/* Variantes por secao (Fatia 7 - 7.4): estrutura funcional. */
.photo-grid--masonry {
  display: block;
  columns: 2;
  column-gap: 0.75rem;
}
.photo-grid--masonry figure {
  break-inside: avoid;
  margin-bottom: 0.75rem;
}
/* stats "inline" (P.3): números em linha compacta, sem cartões, divididos por linha. */
.stats--inline .stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.stats--inline .stat-card {
  flex: 1 1 auto;
  padding: 0.25rem 1.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}
.stats--inline .stat-card + .stat-card {
  border-left: 1px solid var(--line);
}
/* social "buttons" (P.3): redes como pílulas tocáveis em vez de lista. */
.social--buttons ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social--buttons li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
}
/* highlights "timeline" (P.3): marcadores sobre um eixo vertical. */
.highlights--timeline .highlights-list {
  position: relative;
  padding-left: 1.25rem;
}
.highlights--timeline .highlights-list::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--line);
}
.highlights--timeline .highlights-list li {
  position: relative;
  padding: 0.35rem 0 0.9rem;
  border-bottom: 0;
}
.highlights--timeline .highlights-list li::before {
  content: "";
  position: absolute;
  left: -1.02rem;
  top: 0.6rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg);
}
/* highlights "cards" (P.3): destaques em grade de cartões (2º modelo). */
.highlights--cards .highlights-list {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.highlights--cards .highlights-list li {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
/* press "quotes" (P.3): citações grandes, estilo pull-quote. */
.press--quotes .press-item {
  margin-bottom: 1.75rem;
}
.press--quotes .press-item blockquote {
  font-size: 1.4rem;
  line-height: 1.35;
  font-style: normal;
  color: var(--fg);
}
/* events "compact" (P.3): agenda densa, linhas curtas. */
.events--compact ol {
  display: grid;
  gap: 0.25rem;
}
.events--compact ol li {
  padding: 0.4rem 0;
}
/* downloads "cards" (P.3): materiais como cartões em grade. */
.downloads--cards .downloads-list {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.downloads--cards .downloads-list li {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
/* ---- Galeria de midia por link (tier base): CTA da pasta + carrossel horizontal
   script-free (scroll-snap, arrasta no touch). O CTA reusa .cta -> herda o estilo
   de cada kit (inclusive o botao neon do underground). ---- */
.gallery-cta {
  margin-bottom: 1rem;
}
.gallery-carousel {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}
.gallery-slide {
  flex: 0 0 auto;
  width: min(78%, 320px);
  margin: 0;
  scroll-snap-align: start;
}
/* Fotos reais do artista vem em proporcoes variadas (retrato/paisagem/etc.);
   aspect-ratio + object-fit:cover forca uma altura CONSISTENTE entre os slides
   (recorta sem distorcer) - sem isso, um slide mais "baixo" (imagem mais larga
   que alta) deixava um vao vazio embaixo enquanto o vizinho ocupava a linha
   inteira (o <figure> esticava pelo align-items:stretch padrao do flex, mas o
   <img> com height:auto nao preenchia o espaco esticado). */
.gallery-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.gallery-slide--video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--panel);
}
.gallery-slide--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Kit underground: cantos retos + borda de linha (mesma linguagem dos cards). */
.epk--kit-underground .gallery-slide img,
.epk--kit-underground .gallery-slide--video {
  border: 1px solid var(--line);
  border-radius: 2px;
}
.music--player-first .music-item:first-child .item-link,
.music--player-first .music-item:first-child .embed-slot {
  border: 1px solid var(--accent);
}
figure {
  margin: 0;
}
img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
figcaption {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.events ol {
  display: grid;
  gap: 0.25rem;
  padding: 0;
  list-style: none;
}
.events li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.events li:last-child {
  border-bottom: 0;
}
.events time {
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}
/* Coluna de conteudo: titulo do show + acoes empilhados. */
.ev-info {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}
.ev-title {
  font-weight: 600;
  color: var(--fg);
}
.events li.cancelled {
  opacity: 0.6;
}
/* Acoes do evento: Ingressos (primario) + adicionar ao calendario (secundario). */
.ev-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}
/* Ingressos: CTA primario preenchido. */
.ev-tickets {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
/* Adicionar ao calendario (Fatia 7 - 7.6): botoes-CTA amigaveis, nao texto puro. */
.add-to-calendar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}
.add-to-calendar__label {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cal-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.cal-link:hover,
.cal-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.cal-ico {
  flex-shrink: 0;
}
.past-events {
  margin-top: 1rem;
  color: var(--muted);
}
.past-events summary {
  cursor: pointer;
  font-size: 0.9rem;
}
.past-events ol {
  margin-top: 0.75rem;
}
.downloads-list,
.highlights-list {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}
.downloads-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.highlights-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.highlights-list p {
  margin: 0.35rem 0 0;
  color: var(--muted);
}
.meta {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.press-item {
  margin: 0 0 1.25rem;
}
.press-item blockquote {
  margin: 0 0 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  font-size: 1.05rem;
  font-style: italic;
}
.press-item figcaption {
  color: var(--muted);
  font-size: 0.85rem;
}
.stat-group {
  margin-bottom: 1.5rem;
}
.stat-group:last-child {
  margin-bottom: 0;
}
.stat-group h3 {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.stat-card strong {
  font-size: 1.5rem;
}
.stat-card span,
.stat-card a {
  color: var(--muted);
  font-size: 0.85rem;
}
.featured-badge {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.embed-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background-color: var(--panel);
  background-position: center;
  background-size: cover;
  overflow: hidden;
}
.embed-slot--video {
  aspect-ratio: 16 / 9;
}
/* Variantes da secao de video (section_variants.videos). Valem nos dois kits.
   Padrao = 16:9 na grade (no desktop 1 video ocupa metade). */
/* Largura total: uma coluna ocupando toda a largura disponivel do conteudo. */
.videos--full .video-grid,
.videos--cinema .video-grid {
  grid-template-columns: 1fr;
}
/* Cinema (faixa): proporcao cinematografica ~21:9. O poster cobre e corta topo/base;
   ao dar play o player 16:9 fica centralizado (as bordas viram moldura do frame). */
.videos--cinema .embed-slot--video {
  aspect-ratio: 21 / 9;
}
.videos--cinema .embed-slot--video iframe {
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}
/* Contido: vídeo compacto e centralizado (não ocupa a largura toda) — para quem
   quer o vídeo como um detalhe, não um banner. 16:9 preservado. */
.videos--contain .video-grid {
  grid-template-columns: 1fr;
  /* width:100% e necessario: margin-inline:auto sozinho, sem width explicita,
     faz o item de grid abandonar o stretch padrao e encolher pro conteudo (o
     botao ▶ do trigger, ~300px) em vez de esticar ate o max-width. */
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
.embed-slot--audio {
  background-color: var(--panel);
  border: 1px solid var(--line);
}
/* Altura do player de audio por tipo de conteudo e plataforma (Fatia 7 - 7.5).
   Alturas verificadas nas docs oficiais: Spotify track 152 / coletanea 352;
   SoundCloud track 166 / coletanea (set/playlist) 450. Faixa unica e o default. */
.embed-slot--single {
  min-height: 166px;
}
.embed-slot--collection {
  min-height: 450px;
}
.embed-slot--single[data-platform="spotify"] {
  min-height: 152px;
}
/* Templates padrao (nao-premium): o player do Spotify fica compacto mesmo para
   coletanea/artista — mostra ate ~3 faixas ("Top tracks") rente, sem a faixa
   preta morta que a altura 352 deixava sob o player do embed de artista.
   160px (nao 152): em 152 o embed cai exatamente no breakpoint do Spotify e
   colapsa pro player de uma linha (deixando folga); 160 mantem a lista de top
   tracks e fica rente. Full track-list (352) fica reservado ao tier premium
   bespoke, que serve o proprio bundle (7.8) e nao usa estas regras. */
.embed-slot--collection[data-platform="spotify"] {
  min-height: 160px;
}
/* Spotify ja traz seu proprio card arredondado; a borda do slot duplicava o
   contorno e ficava desalinhada. Sem borda o widget fica mais limpo. A dupla
   classe + atributo (0,3,0) vence a borda de .embed-slot--audio (0,1,0) E a do
   kit underground (.epk--kit-underground .embed-slot, 0,2,0), em qualquer kit. */
.embed-slot.embed-slot--audio[data-platform="spotify"] {
  border: none;
}
/* Destaque da faixa em destaque (is_featured), por dado (7.5). */
.music-item--featured .embed-slot,
.music-item--featured .item-link {
  border-color: var(--accent);
}
/* Link secundario "ouvir na plataforma" (7.5). */
.platform-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
}
.embed-slot iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 90%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.embed-slot--audio .embed-trigger {
  background: transparent;
  color: var(--fg);
}
.embed-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0;
}
.social a {
  color: var(--accent);
  text-decoration: none;
}
.foot {
  margin-top: 3rem;
  color: var(--muted);
  font-size: 0.85rem;
}
a {
  color: var(--accent);
}

/* =========================================================================
   Kit de estilo "underground" (Fatia 7.7) — layout profissional neon/tech,
   destilado do design "Bob Puretz" (Claude Design) COMO DADO. So cor vem dos
   tokens; o kit aplica a LINGUAGEM VISUAL (display condensado com contorno+brilho,
   rotulos mono, numeros de secao, cards com borda, marquee) sobre o MESMO markup
   dos temas clean. Gated por .epk--kit-underground -> zero efeito nos temas clean.
   Fontes: todas de sistema (Impact/Arial Narrow/mono), sem dependencia externa.
   ========================================================================= */
.epk--kit-underground {
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  /* --on-accent saiu daqui: cravado no kit, ele vencia (0,1,0 > :root) o valor
     derivado do accent REAL, entao um artista no underground que trocasse a cor
     de destaque para um tom escuro ficava com texto escuro sobre fundo escuro no
     CTA. Agora vem de themeCssVariables() -> onAccentColor(accent). Para o accent
     padrao (#86ff12) o derivado e #111111 — mesmo resultado visual de antes. */
  --glow-strong: 0 0 30px color-mix(in srgb, var(--accent) 35%, transparent);
  --card: color-mix(in srgb, var(--surface) 85%, var(--bg));
  max-width: min(100%, 1120px);
  counter-reset: sec;
}

/* ---- Barra superior do hero (◆ NOME / EPK · EST. ano — local) ---- */
.epk--kit-underground .hero-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px clamp(0.5rem, 3vw, 1.5rem);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.epk--kit-underground .hero-topbar span:last-child {
  color: var(--muted);
  text-align: right;
}

/* ---- Hero: display com contorno + brilho neon (a assinatura do tema) ---- */
.epk--kit-underground .hero {
  min-height: 92vh;
}
.epk--kit-underground .hero h1 {
  text-transform: uppercase;
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.01em;
  font-size: clamp(
    calc(3.5rem * var(--name-scale)),
    calc(18vw * var(--name-scale)),
    calc(9rem * var(--name-scale))
  );
  color: color-mix(in srgb, var(--bg), var(--accent) 6%);
  -webkit-text-stroke: clamp(1px, 0.28vw, 3px) var(--accent);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 70px
    color-mix(in srgb, var(--accent) 28%, transparent);
}
.epk--kit-underground .tags {
  font-family: var(--mono);
  color: var(--accent);
  letter-spacing: 0.28em;
  font-size: clamp(11px, 1.4vw, 13px);
}
.epk--kit-underground .tagline {
  color: var(--fg);
  max-width: 640px;
  font-size: clamp(1rem, 2vw, 1.25rem);
}
.epk--kit-underground .loc {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Botoes: texto escuro sobre accent claro, mono, cantos retos, brilho ---- */
.epk--kit-underground .cta,
.epk--kit-underground .featured-badge {
  color: var(--on-accent);
  border-radius: 2px;
}
.epk--kit-underground .cta {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 800;
  box-shadow: var(--glow-strong);
}

/* ---- Marquee (faixa rolante de generos + nome) ---- */
.epk--kit-underground .marquee {
  margin: 0 calc(-1 * clamp(1rem, 5vw, 1.5rem));
  background: var(--accent);
  color: var(--on-accent);
  overflow: hidden;
  padding: 11px 0;
  border-block: 1px solid rgba(0, 0, 0, 0.3);
}
/* As larguras `wide` usam gutter fixo de 1rem em qualquer viewport. */
.epk.epk--width-wide.epk--kit-underground .marquee {
  margin-inline: -1rem;
}
@media (max-width: 991.98px) {
  .epk--kit-underground:not(.epk--width-full) .marquee {
    /* Default/wide têm gutter de 1rem; 5vw passava dele em 390px. */
    margin-inline: -1rem;
  }
  .epk.epk--width-full.epk--kit-underground .marquee {
    /* No full, o gutter acompanha a mesma escala do padding do root. */
    margin-inline: calc(-1 * clamp(1rem, 4vw, 5rem));
  }
}
.epk--kit-underground .marquee-track {
  display: inline-flex;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 15px;
  animation: kp-marq 26s linear infinite;
}
@keyframes kp-marq {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .epk--kit-underground .marquee-track {
    animation: none;
  }
}

/* ---- Cabecalho de secao: numero /0N (via counter) + titulo display ---- */
.epk--kit-underground .section {
  counter-increment: sec;
  border-top-color: var(--line);
}
.epk--kit-underground .section h2 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.9rem, 6vw, 3.6rem);
  line-height: 0.9;
  color: var(--fg);
}
.epk--kit-underground .section h2::before {
  content: "/ " counter(sec, decimal-leading-zero);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  align-self: center;
}
.epk--kit-underground.epk--no-section-numbers .section h2::before {
  content: none;
}

/* ---- Bio + chips de genero ---- */
.epk--kit-underground .bio p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
  max-width: 760px;
}
.epk--kit-underground .bio p:last-child {
  color: var(--muted);
}

/* ---- Musica: player em card, destaque com brilho, link mono ---- */
.epk--kit-underground .embed-slot {
  border: 1px solid var(--line);
  /* background-COLOR (nao o atalho `background`): o atalho reseta background-size
     pra auto e derrubaria o `cover`/`center` do slot base — a thumbnail do video
     (7.5) ladrilharia no tamanho natural em vez de preencher o slot 16:9. */
  background-color: var(--card);
}
.epk--kit-underground .music-item--featured .embed-slot {
  border-color: var(--accent);
  box-shadow: 0 0 44px color-mix(in srgb, var(--accent) 14%, transparent);
}
.epk--kit-underground .platform-link {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}

/* ---- Videos: card com borda + botao play verde grande ---- */
.epk--kit-underground .embed-slot--video {
  border: 1px solid var(--line);
}
.epk--kit-underground .embed-slot--video .embed-trigger {
  width: 58px;
  height: 58px;
  max-width: none;
  padding: 0;
  /* Botao redondo com so o ▶ (o <span> do titulo fica display:none): centrar o
     glifo. Sem isso o flex herdado (justify-content normal + gap) jogava o ▶ pra
     esquerda com folga, quebrando o circulo. gap:0 remove a folga do gap herdado. */
  justify-content: center;
  gap: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 22px;
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 50%, transparent);
}
.epk--kit-underground .embed-slot--video .embed-trigger span {
  display: none;
}

/* ---- Agenda: dia grande + mes (coluna) | titulo + acoes (coluna) ---- */
.epk--kit-underground .events li {
  grid-template-columns: 4rem 1fr;
  align-items: start;
  gap: 0 20px;
  padding: 22px 2px;
}
.epk--kit-underground .events time {
  display: flex;
  flex-direction: column;
  font-size: inherit;
  white-space: normal;
}
.epk--kit-underground .events .ev-day {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 0.9;
  color: var(--accent);
}
.epk--kit-underground .events .ev-mon {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.epk--kit-underground .ev-title {
  font-size: 1.1rem;
  font-weight: 600;
}
/* Botoes-CTA da agenda no visual underground (mono, contorno, brilho no primario). */
.epk--kit-underground .ev-tickets {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 2px;
  color: var(--on-accent);
  box-shadow: var(--glow-strong);
}
.epk--kit-underground .cal-link {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  border-radius: 2px;
  color: var(--muted);
}
.epk--kit-underground .cal-link .cal-ico {
  color: var(--accent);
}
.epk--kit-underground .cal-link:hover,
.epk--kit-underground .cal-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.epk--kit-underground .cal-link:hover .cal-ico,
.epk--kit-underground .cal-link:focus-visible .cal-ico {
  color: inherit;
}

/* ---- Numeros: stat cards com borda + numero display verde ---- */
.epk--kit-underground .stat-group h3 {
  font-family: var(--mono);
  color: var(--accent);
  letter-spacing: 0.14em;
}
.epk--kit-underground .stat-card {
  border-color: var(--line);
  background: var(--card);
  padding: 20px;
}
.epk--kit-underground .stat-card strong {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 0.9;
}
.epk--kit-underground .stat-card span,
.epk--kit-underground .stat-card a {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}

/* ---- Destaques: ano (coluna propria) mono verde + titulo/descricao ---- */
.epk--kit-underground .highlights-list li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: 18px;
}
.epk--kit-underground .highlights-list .meta {
  grid-column: 1;
  grid-row: 1 / 3;
  font-family: var(--mono);
  color: var(--accent);
}
.epk--kit-underground .highlights-list strong,
.epk--kit-underground .highlights-list p {
  grid-column: 2;
}

/* ---- Press: card com barra lateral accent + brilho sutil ---- */
.epk--kit-underground .press-item {
  padding: 24px;
  background: var(--card);
  border-left: 2px solid var(--accent);
}
.epk--kit-underground .press-item blockquote {
  border: 0;
  padding: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
}
.epk--kit-underground .press-item figcaption {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---- Downloads: linhas viram botoes com borda accent ---- */
.epk--kit-underground .downloads-list .item-link {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--card);
}

/* ---- Booking: card com borda accent + brilho interno ---- */
.epk--kit-underground .booking {
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: clamp(1.5rem, 5vw, 3rem);
  margin-top: var(--space);
  background: radial-gradient(
      120% 120% at 0% 0%,
      color-mix(in srgb, var(--accent) 10%, transparent),
      transparent 60%
    ), var(--card);
  box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 12%, transparent);
}
.epk--kit-underground .booking h2 {
  color: var(--fg);
}
/* O CTA do kit e mono/caixa-alta com letter-spacing largo -> o e-mail tipico fica
   ~350px e nao cabe no card abaixo de ~445px de viewport. Encolhe a fonte (e o
   padding) conforme a largura pra ele voltar a caber numa linha. So a fonte: o
   letter-spacing do kit e 0.14em e escala junto por ser relativo — a proporcao
   tipografica do design fica identica em qualquer largura, e no desktop o clamp
   bate o teto (1rem) e nada muda. Enderecos MUITO longos ainda estouram; quem
   segura esses e o max-width/break-word do .cta base. */
.epk--kit-underground .booking .cta {
  font-size: clamp(0.75rem, 3.4vw, 1rem);
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}

/* ---- Redes sociais: pilulas com borda ---- */
.epk--kit-underground .social ul {
  gap: 10px;
}
.epk--kit-underground .social a {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

/* ---- Rodape ---- */
.epk--kit-underground .foot {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}

@media (min-width: 720px) {
  .epk,
  .landing {
    padding-inline: 1.5rem;
  }

  .hero {
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
  }

  .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .photo-grid--masonry {
    columns: 3;
  }

  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================================
   Kit "clean" — DIREÇÃO EDITORIAL / REVISTA (síntese vencedora).
   Irmão quieto do underground: hierarquia de revista impressa, cabeçalhos
   display grandes com numeração "01 —", hairlines, microlabels MONO, accent
   SÓ como marcador. Escopo TOTAL em .epk--kit-clean -> zero efeito no
   underground. Só o separador da legenda de foto é base (universalmente seguro).
   Sem cor hardcoded: tudo via tokens + color-mix. Prioridade 375–575px.

   SÍNTESE (enxertos do júri):
   - Swiss (D2): guardas :not() de variante de seção; tabular-nums; trilho
     sticky 2-col só em >=760px (progressive enhancement, título grande no mobile).
   - Minimal Luxe (D3): :has(.ev-day) p/ degradar a agenda antes do renderer;
     min-height:44px nos alvos de toque.
   - NOVO — contraste: --accent-ink (accent misturado ao --fg) para TODO texto
     pequeno em accent. Roxo #7c3aed sobe de ~3.4:1 p/ ~5.8:1 (passa AA);
     âmbar segue alto. --accent PURO fica só em filetes/ticks/bordas (gráficos).
   ========================================================================= */
.epk--kit-clean {
  /* Stack mono de sistema p/ microlabels (mesma família do underground). */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  /* Card editorial: painel levemente rebaixado no fundo (sutil, não "caixa"). */
  --card: color-mix(in srgb, var(--panel) 55%, var(--bg));
  --hair: var(--line);
  /* Accent legível p/ TEXTO pequeno: roxo ~3.4:1 -> ~5.8:1 (AA); âmbar segue
     alto. Usar SÓ em texto; filete/tick/borda continuam com --accent puro. */
  --accent-ink: color-mix(in srgb, var(--accent) 72%, var(--fg));
  /* Contador PRÓPRIO (edsec) p/ não colidir com o `sec` do underground. */
  counter-reset: edsec;
}

/* ---- Ritmo de seção + marcador de accent no topo (hairline + tique) ------ */
.epk--kit-clean .section {
  position: relative;
  counter-increment: edsec;
  margin-top: calc(var(--space) * 1.6);
  padding-top: calc(var(--space) * 1.15);
  border-top: 1px solid var(--hair);
}
.epk--kit-clean .section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--accent); /* tique gráfico: --accent puro OK */
}

/* ---- Cabeçalho de seção (FRAQUEZA #1): eyebrow "01 —" mono + título display
   grande em caixa-normal (não mais uppercase/muted de 1rem). ---------------- */
.epk--kit-clean .section h2 {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-size: clamp(1.9rem, 7vw, 3rem);
  line-height: 1.03;
  text-wrap: balance;
}
.epk--kit-clean .section h2::before {
  content: counter(edsec, decimal-leading-zero) "  —";
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--accent-ink); /* texto pequeno -> ink */
}

/* ---- Hero: nome display editorial (FRAQUEZA #2) + eyebrow/tagline/local --- */
.epk--kit-clean .hero .tags {
  font-family: var(--mono);
  color: var(--accent-ink);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: clamp(0.68rem, 2.6vw, 0.8rem);
  margin-bottom: 0.4rem;
}
.epk--kit-clean .hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(
    calc(2.9rem * var(--name-scale)),
    calc(13vw * var(--name-scale)),
    calc(6rem * var(--name-scale))
  );
  line-height: 0.98;
  letter-spacing: -0.035em; /* aperto de display editorial */
  margin: 0.1rem 0 0.6rem;
  text-wrap: balance;
}
.epk--kit-clean .hero .tagline {
  color: var(--fg);
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  line-height: 1.4;
  max-width: 42ch; /* medida editorial */
  margin: 0 0 0.7rem;
}
.epk--kit-clean .hero .loc {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--muted);
}

/* ---- Hero MINIMAL (FRAQUEZA #3): vira "página de rosto" de revista — filete
   de topo com tique de accent + respiro; deixa de parecer inacabado. ------- */
.epk--kit-clean .hero--minimal {
  min-height: 56vh;
  justify-content: center;
  padding: 5rem 1rem 3rem;
  border-bottom: 1px solid var(--hair);
}
.epk--kit-clean .hero--minimal .hero-body {
  position: relative;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hair);
}
.epk--kit-clean .hero--minimal .hero-body::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 2px;
  background: var(--accent);
}

/* ---- Masthead do hero (OPCIONAL — requer desgatear a topbar no renderer;
   ver rendererNotes, mudança #2). Se não emitir, o seletor só não casa. ----- */
.epk--kit-clean .hero-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px clamp(1rem, 4vw, 1.5rem);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
}
.epk--kit-clean .hero-topbar span:last-child {
  color: var(--muted);
  text-align: right;
}

/* ---- CTA "tinta" (FRAQUEZA #9): fill=--fg / texto=--bg. Contraste ~18:1
   garantido para roxo E âmbar (branco sobre âmbar seria ilegível — bug da
   base). Tier primário. ---------------------------------------------------- */
.epk--kit-clean .cta {
  background: var(--fg);
  color: var(--bg);
  border-radius: 6px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  box-shadow: none;
}
.epk--kit-clean .cta:hover,
.epk--kit-clean .cta:focus-visible {
  background: color-mix(in srgb, var(--fg) 86%, var(--bg));
}

/* ---- Bio: lead / standfirst editorial + medida controlada ---------------- */
.epk--kit-clean .bio p {
  font-size: clamp(1rem, 2.5vw, 1.12rem);
  line-height: 1.7;
  max-width: 68ch;
}
.epk--kit-clean .bio p:first-of-type {
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  line-height: 1.45;
  font-weight: 400;
  color: var(--fg);
  margin-bottom: 1rem;
}
.epk--kit-clean .bio p:last-of-type {
  color: var(--muted);
}

/* ---- Destaques (FRAQUEZA #4): coluna de ANO (mono accent-ink) + título/desc.
   Resolve o "2022Início do projeto" colado. GUARDA de variante (Swiss): não
   sobrescreve timeline/cards (empate de especificidade -> quebra sem o :not). */
.epk--kit-clean .highlights-list .meta {
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  white-space: nowrap;
}
/* Nas variantes timeline/cards o ano fica INLINE (o grid nao aplica por causa do
   guarda :not) -> dar respiro do titulo pra nao colar ("2022Inicio"). No layout
   grid padrao o ano vive em coluna propria, entao esta regra so afeta as variantes. */
.epk--kit-clean .highlights--timeline .highlights-list .meta,
.epk--kit-clean .highlights--cards .highlights-list .meta {
  margin-right: 0.55rem;
}
.epk--kit-clean .highlights:not(.highlights--timeline):not(.highlights--cards) .highlights-list li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  column-gap: 1.25rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hair);
}
.epk--kit-clean
  .highlights:not(.highlights--timeline):not(.highlights--cards)
  .highlights-list
  .meta {
  grid-column: 1;
  grid-row: 1 / 3;
}
.epk--kit-clean
  .highlights:not(.highlights--timeline):not(.highlights--cards)
  .highlights-list
  strong {
  grid-column: 2;
  font-weight: 600;
  font-size: 1.05rem;
}
.epk--kit-clean .highlights:not(.highlights--timeline):not(.highlights--cards) .highlights-list p {
  grid-column: 2;
  margin: 0.3rem 0 0;
  color: var(--muted);
}
.epk--kit-clean
  .highlights:not(.highlights--timeline):not(.highlights--cards)
  .highlights-list
  li:last-child {
  border-bottom: 0;
}

/* ---- Agenda (FRAQUEZA #5): dia GRANDE em tinta + mês mono accent-ink.
   :has(.ev-day) (Minimal Luxe) = degrada sozinha p/ o ISO base se o renderer
   ainda não foi tocado. :not(.events--compact) preserva a variante compacta. */
.epk--kit-clean .events li:has(.ev-day) time {
  display: flex;
  flex-direction: column;
  white-space: normal;
  font-size: inherit;
}
.epk--kit-clean .events .ev-day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; /* enxerto Swiss: algarismos alinhados */
  color: var(--fg);
}
.epk--kit-clean .events .ev-mon {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.epk--kit-clean .events:not(.events--compact) li:has(.ev-day) {
  grid-template-columns: 3.5rem 1fr;
  align-items: start;
  gap: 0 1.25rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--hair);
}
.epk--kit-clean .events:not(.events--compact) li:has(.ev-day):last-child {
  border-bottom: 0;
}
.epk--kit-clean .ev-title {
  font-weight: 600;
  font-size: 1.05rem;
}
/* Ingressos = tier 2 (outline accent, texto em ink -> legível nos 2 accents;
   corrige o bug base de #fff-sobre-âmbar). Alvo de toque 44px (Minimal Luxe). */
.epk--kit-clean .ev-tickets {
  min-height: 44px;
  background: transparent;
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--hair));
  border-radius: 6px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
}
.epk--kit-clean .ev-tickets:hover,
.epk--kit-clean .ev-tickets:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Calendário = tier 3 (hairline mono discreto). */
.epk--kit-clean .cal-link {
  min-height: 44px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  border-radius: 6px;
  color: var(--muted);
}
.epk--kit-clean .cal-link .cal-ico {
  color: var(--accent-ink);
}
.epk--kit-clean .add-to-calendar__label {
  font-family: var(--mono);
}

/* ---- Números (FRAQUEZA #8): figuras display GRANDES em tinta, rótulo mono,
   card sem caixa (hairline no topo, tabela de dados de revista). GUARDA
   :not(.stats--inline) (Swiss) preserva a variante inline. tabular-nums. ---- */
.epk--kit-clean .stat-group h3 {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: var(--accent-ink);
  margin-bottom: 1rem;
}
.epk--kit-clean .stat-card strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.8rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.epk--kit-clean .stat-card span,
.epk--kit-clean .stat-card a {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  color: var(--muted);
}
.epk--kit-clean .stats:not(.stats--inline) .stat-card {
  border: 0;
  border-top: 1px solid var(--hair);
  border-radius: 0;
  background: transparent;
  padding: 0.9rem 0 0;
  gap: 0.35rem;
}

/* ---- Redes (FRAQUEZA #7): links crus viram pílulas hairline mono. Tipografia
   mono em TODAS (coesão). O box de pílula só fora da variante .social--buttons
   (Swiss guard) -> a variante mantém o próprio box, herdando só a tipografia. */
.epk--kit-clean .social a {
  color: var(--fg);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}
.epk--kit-clean .social:not(.social--buttons) ul {
  gap: 0.6rem;
}
.epk--kit-clean .social:not(.social--buttons) a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.epk--kit-clean .social:not(.social--buttons) a:hover,
.epk--kit-clean .social:not(.social--buttons) a:focus-visible {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ---- Press: pull-quote grande editorial + atribuição mono ---------------- */
.epk--kit-clean .press-item {
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.epk--kit-clean .press-item blockquote {
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}
.epk--kit-clean .press-item blockquote::before {
  content: "\201C"; /* aspa decorativa de abertura */
  color: var(--accent-ink);
  margin-right: 0.08em;
}
.epk--kit-clean .press-item figcaption {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--muted);
}
.epk--kit-clean .press-item figcaption a {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---- Cards genéricos / ritmo (FRAQUEZA #9): item-link, downloads, embeds -- */
.epk--kit-clean .item-link {
  border: 1px solid var(--hair);
  background: var(--card);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.epk--kit-clean .item-link:hover,
.epk--kit-clean .item-link:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--hair));
}
.epk--kit-clean .downloads-list .meta {
  font-family: var(--mono);
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: var(--muted);
}
.epk--kit-clean .embed-slot {
  border: 1px solid var(--hair);
  background-color: var(--card);
  border-radius: var(--radius);
}
.epk--kit-clean .music-item--featured .embed-slot,
.epk--kit-clean .music-item--featured .item-link {
  border-color: var(--accent);
}
.epk--kit-clean .platform-link {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  color: var(--accent-ink);
}
/* Badge "Destaque": de pílula preenchida -> selo outline mono editorial. */
.epk--kit-clean .featured-badge {
  background: transparent;
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--hair));
  font-family: var(--mono);
  letter-spacing: 0.14em;
}

/* ---- Booking: bloco de contato editorial (nome como microlabel mono) ----- */
.epk--kit-clean .booking p {
  margin: 0.3rem 0;
}
.epk--kit-clean .booking p:first-of-type {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---- Rodapé mono discreto com hairline ----------------------------------- */
.epk--kit-clean .foot {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
}

/* ---- Fotos (refino editorial só no clean): legenda mono + link sublinhado
   (o SEPARADOR em si é base-safe, ver bloco base no fim). ------------------- */
.epk--kit-clean .photo-grid figcaption {
  font-family: var(--mono);
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}
.epk--kit-clean .photo-download {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

/* =========================================================================
   Trilho editorial (enxerto Swiss como PROGRESSIVE ENHANCEMENT): só em
   >=760px o cabeçalho migra para uma coluna sticky à esquerda (run-in side-
   head), reduzindo o título p/ caber no trilho. No mobile (375–575px, viewport
   PRIORITÁRIO) o título display grande de D1 permanece — o fix da fraqueza #1
   NÃO é gateado a desktop. min-width:0 evita estouro do track 1fr.
   ========================================================================= */
@media (min-width: 760px) {
  .epk--kit-clean .section {
    display: grid;
    grid-template-columns: clamp(8rem, 16vw, 12rem) 1fr;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }
  .epk--kit-clean .section > h2 {
    grid-column: 1;
    position: sticky;
    top: 1.5rem;
    margin: 0;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  }
  .epk--kit-clean .section > :not(h2) {
    grid-column: 2;
    min-width: 0;
  }
}

/* =========================================================================
   BASE (SEM escopo) — FRAQUEZA #6: separa "Foto: Studio" do link "Baixar em
   alta". flex+gap+space-between na legenda da grade de fotos (crédito à
   esquerda / download à direita). O crédito é um nó de texto anônimo e o link
   é o único outro item -> quando não há crédito, o link cai sozinho à esquerda
   (sem recuo). Universalmente seguro; conserta a MESMA colisão no underground.
   ========================================================================= */
.photo-grid figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.6rem;
}
.photo-download {
  white-space: nowrap;
}

@media (min-width: 720px) {
  .photo-grid--carousel figure {
    flex-basis: min(42%, 360px);
  }
}

/* ── Paginas legais (Termos/Privacidade) + rodape do site — Fatia 15 (lancamento) ── */
.legal {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}
.legal h1 {
  margin: .25rem 0;
}
.legal h2 {
  margin-top: 1.75rem;
}
.legal-meta {
  opacity: 0.7;
  font-size: .9rem;
  margin-top: 0;
}
.legal .prelim {
  border: 1px solid #d9a406;
  background: #fff8e1;
  color: #6b5200;
  padding: .75rem 1rem;
  border-radius: 8px;
  margin: 1rem 0 1.75rem;
}
.site-foot {
  border-top: 1px solid rgba(128, 128, 128, 0.25);
  margin-top: 3rem;
  padding-top: 1rem;
  font-size: .9rem;
  opacity: 0.85;
}
.site-foot nav a {
  margin-right: 1.25rem;
}
@media (prefers-color-scheme: dark) {
  .legal .prelim {
    background: #2a2410;
    color: #f0d580;
    border-color: #6b5200;
  }
}