/* ============================================================
   DAMIAN — Web Visual System v1 — PROTÓTIPO VISUAL DESCARTÁVEL
   Este CSS existe só para testar a aparência aprovada.
   Não é a arquitetura de código do site de produção.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:ital,wght@0,400;0,500;0,700;0,900;1,400&display=swap');

:root {
  /* Paleta real do manual — sem alteração de hex */
  --concrete: #141414;   /* estrutural — fundo escuro / texto sobre claro */
  --uncut: #efe9e4;      /* estrutural — fundo claro / texto sobre escuro */
  --no-corre: #d6321d;   /* ação — CTA primário */
  --ferrugem: #7f1e0a;   /* acento editorial — badges, destaque secundário */
  --bluesman: #192f4d;   /* gráfico/estrutural pontual — nunca texto pequeno sobre ela */
  --raiz: #676127;       /* acento pontual, sem território fixo — disponível, sem uso obrigatório */

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Work Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --max-width: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --reading-width: 62ch;
}

/* -------- assinatura tipográfica: tracking fechado --------
   Preferência pessoal do DAMIAN (referência dele é -2px; aqui usamos -1px
   como direção predominante do site). Aplicado como -1px LITERAL em texto
   de título/headline/navegação/parágrafo editorial/botão — a mesma escala
   onde -1px é perceptível sem comprimir demais. Nos poucos títulos que vão
   de texto médio a tamanho de pôster (newsletter, stat da página Sobre),
   -1px fixo desapareceria no topo do clamp, então esses usam um valor em
   em (~-0.015em) que se mantém proporcional em qualquer tamanho renderizado.
   NÃO é uma regra universal (`* { letter-spacing: -1px }`): rótulos em
   caixa alta (eyebrow, badges, .listen-label, .ad-*-title, credit-fn, etc.),
   metadados, inputs de formulário e nomes na ficha técnica mantêm o
   tracking normal/aberto que já tinham — em texto pequeno ou em caixa alta,
   fechar o tracking prejudica leitura em vez de ajudar. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--uncut);
  color: var(--concrete);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* -------- placeholder tags (conteúdo provisório) -------- */
.placeholder {
  font-style: italic;
  opacity: 0.55;
  font-size: 0.85em;
}
.placeholder-box {
  border: 1px dashed rgba(20,20,20,0.35);
  color: rgba(20,20,20,0.5);
  font-size: 0.8rem;
  font-style: italic;
  padding: 1em;
  text-align: center;
  border-radius: 4px;
}

/* -------- header -------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--uncut);
  border-bottom: 1px solid rgba(20,20,20,0.08);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.logo-mark { height: 42px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -1px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.main-nav a:hover { border-color: var(--no-corre); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.hamburger { display: none; background: none; border: none; cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -1px;
  padding: 13px 24px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn-primary { background: var(--no-corre); color: var(--uncut); }
.btn-primary:hover { background: #b8280f; }
/* estado de loading do envio (contato-form.js) — mesma opacidade já usada
   como convenção de "desabilitado" no site (botões Spotify/Substack antes
   do link real existir) */
.btn:disabled { opacity: 0.6; cursor: default; pointer-events: none; }
.btn-secondary {
  background: transparent;
  color: var(--concrete);
  border: 1.5px solid var(--concrete);
}
.btn-secondary:hover { background: var(--concrete); color: var(--uncut); }
.btn-ghost {
  background: none;
  padding: 0;
  border-radius: 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -1px;
  border-bottom: 2px solid var(--no-corre);
}
.btn-ghost:hover { color: var(--no-corre); }
.btn-outline-light {
  border: 1.5px solid var(--uncut);
  color: var(--uncut);
  background: transparent;
}
.btn-outline-light:hover { background: var(--uncut); color: var(--concrete); }

/* -------- eyebrow / section titles -------- */
/* eyebrow: rótulo pontual, só onde adiciona informação real — sem caixa alta
   forçada, o conteúdo já vem em sentence case */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ferrugem);
  margin-bottom: 8px;
  display: block;
}
/* Anton fica reservada a poucos momentos de impacto (manifesto, títulos de
   trabalho/serviço); títulos de seção recorrentes usam Work Sans em peso alto
   para não diluir o impacto da display */
.section-title {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0;
}

/* -------- hero --------
   Fotografia real do DAMIAN integrada ao próprio Hero (não um card ao lado):
   .hero-photo cobre a seção inteira como camada de fundo, com um degradê em
   --concrete por cima (não uma caixa atrás do texto) que escurece só o lado
   onde a identidade mora e se dissolve antes de alcançar o rosto — ele
   continua o ponto focal, sem recorte adicional nem tratamento decorativo
   por cima da foto em si (sem waveform, sem neon). Logo, role e headline
   continuam o mesmo bloco compacto de sempre (gap mínimo entre eles), só que
   agora em --uncut (mesma troca de cor que a logo já recebe no footer, aqui
   aplicada por estar sobre a foto escurecida em vez do fundo claro do site).
   Mobile tem tratamento próprio (ver @media max-width:900px): a foto vira uma
   faixa contida no topo, sem sobrepor texto — ver nota lá. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 68vh, 680px);
  padding: 84px var(--gutter) 72px;
}
.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Y baixo o suficiente pra garantir ZERO corte no topo: como a caixa do
     Hero é bem mais larga que a foto, o corte de object-fit:cover acontece
     na vertical, e o boné/cabeça do DAMIAN ficam perto do topo do quadro
     original — "center 20%" ainda cortava a ponta do boné em telas mais
     baixas. Em 4% sobra a pedra acima do boné como respiro natural (parte
     da própria foto, não um espaço em branco criado aqui) e todo o corte
     necessário vem de baixo (tronco/cadeira), que pode perder área sem
     problema. */
  object-position: center 4%;
  filter: grayscale(32%) contrast(1.08) brightness(0.88);
  display: block;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--concrete) 0%,
    var(--concrete) 30%,
    rgba(20,20,20,0.85) 40%,
    rgba(20,20,20,0.35) 50%,
    rgba(20,20,20,0) 62%
  );
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 640px;
}
/* logo_padrao.png tem ~30% de margem transparente acima/abaixo do traço
   dentro do próprio arquivo (canvas 1080x1080) — isso não é espaço de CSS,
   então nenhum gap/margin resolve sozinho. A margem negativa abaixo puxa o
   texto seguinte pra dentro dessa margem vazia da imagem, sem recortar,
   redimensionar ou alterar a composição/posição da logo em si. Cor original
   do arquivo (vermelho) preservada — sem filtro de inversão: o vermelho já
   tem contraste real contra o degradê escuro atrás dela, sem precisar virar
   branco nem ganhar uma caixa atrás. */
/* Medido no arquivo real (logo_padrao.png, canvas 1080×1080): o traço
   ocupa só a faixa vertical entre 31,1% e 70,4% do canvas (margem inferior
   de 29,63%) e a faixa horizontal entre 5,74% e 94,26% (margem esquerda de
   5,74%). Em vez de um px fixo (que só bate numa largura específica dentro
   do clamp), a margem negativa e o recuo do texto usam calc() sobre o
   MESMO clamp() da largura da logo — proporcional em qualquer ponto do
   intervalo responsivo, sem depender de um número mágico. -0.26 (contra os
   -0.2963 exatos da margem real) deixa a logo BEM colada ao texto seguinte
   sem nunca alcançar o traço. */
.hero-logo {
  width: clamp(150px, 15vw, 224px);
  margin-bottom: calc(clamp(150px, 15vw, 224px) * -0.26);
}
/* "Engenheiro de Áudio" + "Faço sua música respirar." tratados como UM
   bloco de texto (mesmo wrapper) — o recuo horizontal (~5,74% da largura da
   logo, a margem real medida à esquerda do "D") é aplicado uma única vez
   aqui, não em cada linha separadamente, então as duas sempre compartilham
   o mesmo eixo vertical à esquerda por construção. */
.hero-text {
  margin-left: calc(clamp(150px, 15vw, 224px) * 0.0574);
}
/* Uma linha só no desktop (nowrap): três palavras curtas, não corre risco
   de estourar os 640px do bloco. Mobile reseta pra normal (ver
   @media max-width:900px) — lá a fonte é a mesma escala, mas a coluna é
   bem mais estreita. */
.hero-role {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0;
  color: var(--uncut);
  white-space: nowrap;
}
/* headline final — mesmo tamanho/posição do rascunho em itálico que existia
   aqui antes (nenhum redesign), só sem o tratamento de "texto pendente" */
.hero-headline {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -1px;
  color: var(--uncut);
  max-width: 44ch;
  margin: 1em 0;
}
/* -------- authority band -------- */
.authority-band {
  background: var(--concrete);
  color: var(--uncut);
  padding: 26px var(--gutter);
  text-align: center;
}
.authority-band p {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -1px;
}
.authority-band .placeholder {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.55;
}

/* -------- generic section spacing -------- */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-header { margin-bottom: 48px; }

/* -------- serviços (Home) -------- */
.servicos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.servico-item {
  border-top: 3px solid var(--concrete);
  padding-top: 22px;
}
.servico-item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -1px;
  margin: 0 0 10px;
}
.servico-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--uncut);
  background: var(--ferrugem);
  border-radius: 2px;
  padding: 4px 9px;
  margin-bottom: 16px;
}
.servico-item p { font-size: 15px; color: rgba(20,20,20,0.75); max-width: 42ch; }
.servicos-footer-link { margin-top: 40px; text-align: left; }

/* -------- portfólio grid (Home) --------
   Grid uniforme, alinhado e com espaçamento consistente — cada módulo é
   sempre um quadrado perfeito (proporção original dos arquivos), sem crop,
   sem distorção. A riqueza visual vem do contraste natural entre as artes,
   não de variação de escala/posição do grid. */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.portfolio-tile {
  cursor: pointer;
}

/* a capa vive isolada, sem nada sobreposto, sem crop e sem zoom no hover —
   quem chama atenção é a arte, não um efeito de interface */
.portfolio-tile-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--concrete);
}
.portfolio-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* legenda fica FORA da imagem, abaixo, em fluxo normal */
.portfolio-caption {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(20,20,20,0.6);
  transition: color 0.2s ease, transform 0.2s ease;
}
.portfolio-caption strong {
  display: block;
  font-weight: 900;
  font-size: 13.5px;
  color: var(--concrete);
  transition: color 0.2s ease;
}
.portfolio-tile:hover .portfolio-caption { color: var(--no-corre); transform: translateX(2px); }
.portfolio-tile:hover .portfolio-caption strong { color: var(--no-corre); }

.portfolio-footer-link { margin-top: 40px; text-align: center; }

/* Home: as duas transições que tocam o Portfólio (Serviços→Portfólio e
   Portfólio→Depoimentos, na ordem real do HTML) ficavam com respiro
   excessivo por herdarem o padding genérico de .section (96px). Reduzido
   só aqui, via #portfolio — .section continua 96px em qualquer outra
   seção/página que a use, sem redução global indiscriminada. */
#portfolio { padding-top: 56px; padding-bottom: 56px; }

/* -------- depoimentos (Home + Mixagem & Masterização) --------
   Falas reais dos clientes, recortadas do print original — sem card, sem
   estrela, sem avatar/nome inventado. Sistema compartilhado entre as duas
   páginas (mesmas classes, mesma leitura): um único container editorial
   (.depoimentos-block — mesmo tratamento de fundo/borda do container do
   Antes e Depois, pra ler como parte do mesmo sistema visual do site) reúne
   as duas falas, em vez de dois blocos soltos flutuando na página. UMA aspa
   grande (Anton, sempre a mesma cor/opacidade do resto da tipografia
   editorial fraca do site) assina o bloco inteiro — não uma por depoimento.
   Sem numeração: nenhum dado real (posição, ordem, contagem) dependia dela,
   então era só decoração — a aspa + o container já bastam pra unidade
   visual. As duas falas mantêm o mesmo peso visual (mesmo tamanho/
   tratamento) — nenhuma lê como secundária. */
.depoimentos-block {
  position: relative;
  background: rgba(20,20,20,0.035);
  border: 1px solid rgba(20,20,20,0.14);
  border-radius: 2px;
  padding: 48px 40px 40px;
}
.depoimentos-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: rgba(20,20,20,0.15);
  margin-bottom: 16px;
}
.depoimentos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.depoimento { margin: 0; }
.depoimento p {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -1px;
  color: var(--concrete);
  margin: 0;
}
.depoimento + .depoimento {
  border-left: 1px solid rgba(20,20,20,0.14);
  padding-left: 40px;
}
/* Depoimentos na página de Mixagem & Masterização seguem o mesmo padding
   vertical dos demais módulos da página (.oque-e/.service-diferencial) */
.service-depoimentos { padding: 8px var(--gutter) 56px; }

/* -------- manifesto -------- */
.manifesto {
  background: var(--ferrugem);
  color: var(--uncut);
  padding: 110px var(--gutter);
  text-align: center;
}
.manifesto blockquote {
  margin: 0 auto;
  max-width: 46ch;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.25;
  letter-spacing: -1px;
  font-style: normal;
}

/* -------- cta final band -------- */
.cta-final {
  background: var(--no-corre);
  color: var(--uncut);
  padding: 72px var(--gutter);
  text-align: center;
}
.cta-final .reforco { font-size: 15px; margin-bottom: 22px; opacity: 0.9; }
.cta-final .btn-primary { background: var(--concrete); }
.cta-final .btn-primary:hover { background: #000; }

/* -------- produtos educacionais (lista) -------- */
.produtos-lista { border-top: 1px solid rgba(20,20,20,0.14); }
.produto-row {
  display: grid;
  grid-template-columns: 48px 88px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(20,20,20,0.14);
}
.produto-num {
  font-family: var(--font-display);
  font-size: 22px;
  color: rgba(20,20,20,0.3);
}
.produto-thumb {
  position: relative;
  width: 88px; height: 88px;
  background: var(--concrete);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.produto-thumb .logo-mark { height: 22px; filter: brightness(0) invert(1); opacity: 0.5; }
/* Oficina do Artista: imagem real do produto (banner 720×128) — cobre o
   quadrado do thumb (mesmo tratamento de .portfolio-tile-image: sem crop
   manual, o object-fit resolve), em vez do ícone genérico da logo. */
.produto-thumb--real img { width: 100%; height: 100%; object-fit: cover; }
/* Harmonia Funcional / Como Crescer no Spotify: capa real em retrato
   (320×480) — contain em vez de cover garante a arte inteira visível (o
   "em breve" já desenhado na própria imagem nunca é cortado); o fundo
   escuro do .produto-thumb já bate com o fundo da imagem, então a
   margem do contain não cria uma barra visível. */
.produto-thumb--contain img { width: 100%; height: 100%; object-fit: contain; }
/* aviso "Em breve" direto sobre a imagem-placeholder dos dois produtos
   ainda sem material — overlay editorial (texto + scrim translúcido em
   Concrete Jungle), não um badge/card novo; não altera o arquivo de
   imagem, só cobre visualmente. */
.produto-thumb-soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  background: rgba(20,20,20,0.6);
  color: var(--uncut);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}
.produto-info h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -1px;
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 10px;
}
/* sem Raiz — tom neutro derivado de Concrete Jungle, sem território cromático fixo */
.formato-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.55);
  border: 1px solid rgba(20,20,20,0.3);
  border-radius: 3px;
  padding: 2px 7px;
}
/* único status realmente disponível hoje — mesmo acento (Ferrugem) já usado
   em .servico-badge, pra não depender só da palavra "Disponível" pra
   diferenciar de "Em breve": cor + texto juntos, nunca só a cor. */
.formato-tag--disponivel { color: var(--ferrugem); border-color: var(--ferrugem); }
.produto-info p { margin: 0; font-size: 14px; color: rgba(20,20,20,0.65); }

/* -------- sobre teaser -------- */
.sobre-teaser {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 56px;
  align-items: center;
}
.sobre-photo-placeholder {
  aspect-ratio: 4/5;
  background: var(--concrete);
  display: flex; align-items: center; justify-content: center;
}
.sobre-photo-placeholder span { color: rgba(239,233,228,0.4); font-size: 12px; font-style: italic; }
/* Foto real da página Sobre é widescreen (1920×1080), não o retrato 4/5
   presumido antes de ela existir — 4/3 é um recorte bem mais próximo do
   original (menos corte lateral) e ainda cabe numa coluna de 42% ao lado
   da bio sem ficar baixa/desproporcional. object-position desloca o corte
   pra manter o DAMIAN (à direita do quadro original) enquadrado, em vez de
   cortar o centro geométrico da foto. Só usada aqui — a Home ainda usa
   .sobre-photo-placeholder nessa mesma seção-teaser, intocada. */
.sobre-photo {
  aspect-ratio: 4/3;
  width: 100%;
  object-fit: cover;
  object-position: 68% center;
}
.sobre-teaser h2 { font-family: var(--font-body); font-weight: 700; font-size: 24px; margin: 0 0 12px; }
.sobre-teaser p { font-size: 15px; max-width: 52ch; color: rgba(20,20,20,0.75); }

/* -------- newsletter -------- */
.newsletter-band {
  background: var(--uncut);
  border-top: 1px solid rgba(20,20,20,0.12);
  padding: 40px 0;
}
/* .newsletter-inner usa a classe .wrap pra herdar o mesmo eixo de alinhamento
   das demais seções (Sobre incluso) — antes tinha seu próprio max-width
   centralizado dentro de um padding já aplicado no pai, o que desalinhava
   o conteúdo em telas largas. */
.newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.newsletter-inner p { margin: 0; font-size: 14px; color: rgba(20,20,20,0.7); }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input {
  border: 1px solid rgba(20,20,20,0.25);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  min-width: 220px;
}
.newsletter-form button {
  background: none;
  border-bottom: 2px solid var(--concrete);
  border-radius: 0;
  padding: 10px 4px;
  font-weight: 700;
  font-size: 13px;
}

/* -------- footer -------- */
.site-footer {
  background: var(--concrete);
  color: var(--uncut);
  padding: 56px var(--gutter) 32px;
}
.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(239,233,228,0.15);
}
.footer-grid .logo-mark { height: 34px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.footer-grid h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(239,233,228,0.5); margin: 0 0 14px; font-weight: 700;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { font-size: 14px; opacity: 0.85; }
.footer-grid a:hover { opacity: 1; color: var(--no-corre); }
/* ícones de rede social — monocromáticos (currentColor), mesma cor/hover dos
   links de texto ao lado; padding em vez de largura fixa pra dar área de
   clique confortável sem depender de fundo/círculo/sombra */
.footer-social { display: flex; gap: 8px; margin: 14px -8px 0; }
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: var(--uncut);
  opacity: 0.85;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.footer-social-link:hover { opacity: 1; color: var(--no-corre); }
.footer-social-link:focus-visible {
  outline: 2px solid var(--uncut);
  outline-offset: 1px;
  opacity: 1;
}
.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 20px;
  font-size: 12px;
  opacity: 0.5;
}

/* ============================================================
   PÁGINA INDIVIDUAL DE TRABALHO
   ============================================================ */
/* Bloco principal: capa + identidade + ficha técnica, dentro do mesmo eixo
   de margem/grid do resto do site (usa .wrap) — a capa não é mais full-bleed.
   Ficha técnica mora aqui dentro, na coluna direita, não como banda separada:
   é dado sobre a obra, lido junto com título/artista/tipo. */
.work-open { padding: 72px 0 80px; }
.work-open-grid {
  display: grid;
  grid-template-columns: minmax(0, 52%) 1fr;
  gap: 64px;
  align-items: start;
}
.work-cover { aspect-ratio: 1/1; overflow: hidden; background: var(--concrete); }
.work-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.work-identity {
  display: flex;
  flex-direction: column;
}
/* hierarquia: título > artista > tipo — o tipo é só um dado complementar */
.work-artist {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -1px;
  color: rgba(20,20,20,0.7);
  margin: 0 0 6px;
}
.work-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 0.95;
  letter-spacing: -1px;
  margin: 0 0 10px;
}
.work-type {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ferrugem);
  margin: 0;
}

/* ficha técnica — mesmo tratamento visual pra todo mundo creditado,
   DAMIAN incluso, sem badge ou destaque especial */
.work-credits-inline { margin-top: 48px; }
.work-credits-inline .eyebrow { margin-bottom: 14px; }
.work-credits-inline .credits-list { max-width: 420px; }

/* navegação funcional de volta — discreta, não é um CTA */
.back-link {
  display: inline-block;
  margin-top: 40px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(20,20,20,0.55);
}
.back-link:hover { color: var(--no-corre); }

/* créditos por faixa — só existe quando o trabalho tem `tracks` no JSON
   (EPs/álbuns com créditos diferentes por música). Reaproveita o mesmo
   componente de linha (.credits-list/.credit-row) da ficha técnica geral,
   pra ler como parte do mesmo sistema, não como um bloco novo. */
.work-tracklist { padding: 0 0 80px; }
/* grid responsivo — cabe o máximo de faixas (mín. 240px cada) que couber
   confortavelmente na largura do .wrap, lê sempre L→R e quebra sozinho pra
   linha seguinte. Sem max-width: usa toda a largura principal do conteúdo.
   Encarte editorial, não dashboard: sem fundo, borda ou sombra por bloco —
   só espaço negativo e, a partir de 2 colunas, um divisor vertical contínuo
   entre as faixas.

   Os divisores verticais são a razão de os degraus de coluna abaixo serem
   breakpoints explícitos (600/920/1240px) em vez de puro `auto-fit`: pra
   colocar a linha só ENTRE colunas (nunca na borda externa, nunca sobrando
   depois do último item de uma linha mais curta), o CSS precisa saber com
   certeza quantas colunas existem em cada item — coisa que `auto-fit`
   calcula internamente no navegador sem expor pra seletores CSS. Os números
   abaixo replicam exatamente a mesma conta (itens de 240px mínimo + 48px de
   gap) que o auto-fit faria; o comportamento responsivo é o mesmo, só que
   com a contagem de colunas explícita o suficiente pra desenhar a linha no
   lugar certo com segurança. */
.tracklist {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 48px;
  row-gap: 40px;
}
.track-block { border-left: none; padding-left: 0; }

@media (min-width: 600px) {
  .tracklist { grid-template-columns: repeat(2, 1fr); }
  .track-block { border-left: 1px solid rgba(20,20,20,0.14); padding-left: 32px; }
  .track-block:nth-child(2n+1) { border-left: none; padding-left: 0; }
}
@media (min-width: 920px) {
  .tracklist { grid-template-columns: repeat(3, 1fr); }
  .track-block:nth-child(2n+1) { border-left: 1px solid rgba(20,20,20,0.14); padding-left: 32px; }
  .track-block:nth-child(3n+1) { border-left: none; padding-left: 0; }
}
@media (min-width: 1240px) {
  .tracklist { grid-template-columns: repeat(4, 1fr); }
  .track-block:nth-child(3n+1) { border-left: 1px solid rgba(20,20,20,0.14); padding-left: 32px; }
  .track-block:nth-child(4n+1) { border-left: none; padding-left: 0; }
}

.track-header {
  margin-bottom: 12px;
}
.track-num {
  font-family: var(--font-display);
  font-size: 18px;
  color: rgba(20,20,20,0.35);
}
.track-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--concrete);
}
.track-block .credit-row:last-child { border-bottom: none; }

/* área de audição — mesmo eixo/margem do bloco principal, sem centralização */
.work-listen {
  padding: 0 0 96px;
}
.listen-module {
  max-width: 520px;
  border: 1px solid rgba(20,20,20,0.15);
  border-radius: 2px;
  padding: 28px;
}
.listen-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.45);
  margin-bottom: 14px;
  display: block;
}
.listen-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* embed real do Spotify (iframe oficial, sem script/lib de terceiros) —
   flexível dentro da linha, sempre 100% da coluna disponível (nunca maior
   que o container, mesmo em 360/390px), com um teto pra não esticar demais
   quando sobra espaço ao lado do botão. */
.listen-row iframe {
  display: block;
  width: 100%;
  max-width: 400px;
  flex: 1 1 260px;
  border: none;
  border-radius: 2px;
}

/* lista de créditos — sempre lida à esquerda, dentro da coluna de identidade;
   linha contínua separando as entradas (sem tracejado); cada linha tem o
   mesmo tratamento pra qualquer nome, DAMIAN incluso */
.credits-list { max-width: 420px; }
.credit-row {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(20,20,20,0.12);
}
.credit-row:first-child { padding-top: 0; }
.credit-fn {
  flex: 0 0 128px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.5);
}
.credit-name { font-size: 16px; font-weight: 700; color: var(--concrete); }
/* créditos por faixa: nome nunca quebra linha — se for longo demais pro
   espaço da coluna, encolhe (só ele, não a lista inteira) em vez de
   quebrar. O teto de colunas do grid (ver .tracklist / build.py) já evita
   comprimir demais antes de chegar a precisar do tamanho mínimo abaixo. */
.track-block .credit-name { white-space: nowrap; }
.credit-name--md { font-size: 14px; }
.credit-name--sm { font-size: 13px; }

.work-cta-final {
  background: var(--concrete);
  color: var(--uncut);
  text-align: center;
  padding: 72px var(--gutter);
}
.work-cta-final p { margin: 0 0 22px; font-size: 16px; opacity: 0.85; }
.work-cta-final .btn-primary { background: var(--no-corre); }
/* CTAs de navegação/continuação antes do footer (ex: Sobre → Serviços/Portfólio):
   ambos os links com o mesmo peso — sem botão preenchido aqui, só o
   sublinhado do .btn-ghost já usado no resto do site. CTA comercial único
   (Solicitar orçamento) nas outras páginas não usa .btn-row e não é afetado. */
.work-cta-final .btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ============================================================
   PÁGINA SOBRE — foto grande + bio editorial (não repete a Home:
   lá é teaser curto, aqui é a trajetória completa)
   ============================================================ */
.sobre-hero { padding: 96px 0 56px; }
.sobre-hero-grid {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 64px;
  align-items: start;
}
.sobre-role {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -1px;
  color: var(--concrete);
  margin: 0 0 22px;
}
.sobre-bio p {
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -1px;
  color: rgba(20,20,20,0.85);
  max-width: 56ch;
  margin: 0 0 20px;
}
.sobre-bio p:last-child { margin-bottom: 0; }

.sobre-autoridade { padding: 0 var(--gutter) 88px; }
.sobre-autoridade .inner { max-width: var(--reading-width); }
.sobre-stat { display: block; margin: 0 0 28px; }
.sobre-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--concrete);
}
.sobre-stat-label {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: rgba(20,20,20,0.6);
  max-width: 38ch;
}
.sobre-oficina { font-size: 16px; line-height: 1.7; letter-spacing: -1px; color: rgba(20,20,20,0.75); margin: 0; max-width: 56ch; }

/* ============================================================
   PÁGINA NEWSLETTER — ponte curta pro Substack, um bloco só.
   Não compete com Serviços: sem btn-primary/No Corre aqui.
   ============================================================ */
.newsletter-hero { padding: 120px var(--gutter) 120px; }
.newsletter-hero .inner { max-width: 720px; }
.newsletter-kicker {
  font-size: 14px;
  font-weight: 700;
  color: var(--ferrugem);
  margin: 0 0 18px;
}
.newsletter-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
}
.newsletter-status {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.5);
  margin: 0 0 26px;
}
.newsletter-lede { font-size: 17px; line-height: 1.7; letter-spacing: -1px; max-width: 52ch; margin: 0 0 34px; }

/* ============================================================
   PÁGINA CONTATO — formulário editorial. Escopado só a .form-field
   e afins (esta página) — não toca em .btn nem em nada usado pela
   Newsletter, que está aprovada e não deve mudar.
   Cada campo é uma área com borda sólida + fundo branco (contraste
   real contra o Uncut do corpo da página), pra ficar óbvio onde
   clicar/escrever — sem virar caixa SaaS (raio mínimo, sem sombra).
   ============================================================ */
.contato-form-section { padding: 8px 0 112px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
  max-width: 760px;
}
.form-field {
  border: 1px solid rgba(20,20,20,0.32);
  background: #ffffff;
  border-radius: 2px;
  padding: 14px 16px;
  transition: border-color 0.15s ease;
}
.form-field--full { grid-column: 1 / -1; }
.form-field:hover { border-color: rgba(20,20,20,0.5); }
.form-field:focus-within {
  border-color: var(--no-corre);
  border-width: 1.5px;
  padding: 13.5px 15.5px; /* compensa o 0.5px extra da borda, sem "pular" o layout */
}
.form-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.5);
  margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--concrete);
  padding: 2px 0;
  outline: none;
  cursor: text;
}
.form-field select { cursor: pointer; }
.form-field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.form-hint { font-size: 12.5px; color: rgba(20,20,20,0.55); margin-top: 8px; }
.form-submit-row { margin-top: 20px; max-width: 760px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* honeypot antispam: fora da tela por posição, não display:none/
   visibility:hidden (alguns bots simples ignoram essas duas e preenchem
   assim mesmo) — nunca visível nem alcançável por tab pra quem usa o site
   de verdade. */
.form-field--hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}
/* mensagem de status do envio — mesmo peso tipográfico do .form-hint,
   só troca de cor conforme sucesso/erro; nenhuma cor nova na paleta
   (Concrete Jungle pro sucesso, No Corre — já usado como cor de alerta/
   ação no resto do site — pro erro). */
.form-feedback {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.form-feedback--success { color: var(--concrete); }
.form-feedback--error { color: var(--no-corre); }

/* ============================================================
   ABERTURA DE PÁGINA (/servicos, /portfolio — sem hero fotográfico)
   ============================================================ */
.page-open {
  padding: 100px var(--gutter) 48px;
}
.page-open .intro {
  max-width: var(--reading-width);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -1px;
  color: rgba(20,20,20,0.7);
  margin-top: 8px;
}

/* ============================================================
   /SERVICOS — dois painéis editoriais numerados, mesmo fundo claro.
   A separação entre eles é só uma linha horizontal contínua (ver
   ".servico-painel-wrap + .servico-painel-wrap" abaixo), não cor. */
.servico-painel-wrap { padding: 80px 0; }
.servico-painel-wrap + .servico-painel-wrap {
  border-top: 1px solid rgba(20,20,20,0.14);
}
.servico-painel {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
}
.painel-identidade .servico-badge { margin-bottom: 14px; }
.painel-identidade h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0;
}
.painel-corpo p {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -1px;
  max-width: 62ch;
  color: rgba(20,20,20,0.8);
  margin: 0 0 26px;
}
.painel-corpo .btn-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* ============================================================
   PÁGINA INDIVIDUAL DE SERVIÇO
   ============================================================ */
.service-hero {
  padding: 96px var(--gutter) 8px;
}
.service-hero .badge-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 26px;
  flex-wrap: wrap;
}
.service-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 0.95;
  letter-spacing: -1px;
  margin: 0 0 8px;
}
.service-hero .resumo {
  font-size: 17px;
  letter-spacing: -1px;
  max-width: 56ch;
  color: rgba(20,20,20,0.75);
  margin: 0 0 30px;
}

/* topo em 56px pra CTA→"O que é?" ficar com o MESMO respiro nas duas
   páginas de serviço (Mixagem e Direcionamento) — antes só a Mixagem tinha
   esse valor, via um modificador exclusivo (.oque-e--intro-gap); agora é o
   padrão de .oque-e pras duas, sem regra por página. */
.oque-e { padding: 56px var(--gutter) 56px; }
.oque-e .inner { max-width: var(--reading-width); }
.oque-e p { font-size: 17px; line-height: 1.75; letter-spacing: -1px; color: rgba(20,20,20,0.82); }

/* diferencial real (Posicionamento/Depoimentos) — só onde faz sentido pro
   serviço, não é um módulo obrigatório repetido em toda página de serviço */
.service-diferencial { padding: 8px var(--gutter) 56px; }
.service-diferencial .inner { max-width: var(--reading-width); }
.service-diferencial p {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -1px;
  color: var(--concrete);
  margin: 0;
}
/* Investimento (Oficina do Artista): valor parcelado com presença real —
   Anton, mesma escala usada em outros números de destaque do site
   (.sobre-stat-num) — e o CTA de compra logo abaixo, no mesmo bloco. */
.service-diferencial .investimento-valor {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--concrete);
  margin: 0 0 28px;
}
.investimento-nota {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  color: rgba(20,20,20,0.55);
  margin-left: 10px;
}

/* divisores entre O que é? / Diferencial / Para quem é? — linha sólida
   contínua (Concrete Jungle a 14%, mesma opacidade de outros divisores do
   site, ex. .servico-painel-wrap + .servico-painel-wrap), nunca pontilhada,
   sem virar card/caixa/fundo novo. Via seletor de irmão adjacente porque a
   sequência muda por página: Mixagem tem os 3 blocos (2 linhas), Direcio-
   namento só tem O que é?/Para quem é? (1 linha, sem Diferencial) — cobrindo
   as duas combinações possíveis sem tocar no conteúdo/estrutura de nenhuma
   página.
   A linha mora dentro de .inner (não na section inteira): .inner já é a
   coluna de leitura (max-width: var(--reading-width)), o mesmo wrapper que
   controla o texto — então a linha nasce e termina exatamente na largura
   do conteúdo, nunca atravessa a página. O padding-top da SECTION some
   nesses casos (volta a 8px/4px, igual ao resto) porque o respiro real
   passa a viver no padding-top do próprio .inner, junto com a linha. */
.oque-e + .service-diferencial,
.service-diferencial + .oque-e,
.oque-e + .oque-e {
  padding-top: 8px;
}
.oque-e + .service-diferencial .inner,
.service-diferencial + .oque-e .inner,
.oque-e + .oque-e .inner {
  border-top: 1px solid rgba(20,20,20,0.14);
  padding-top: 48px;
}

/* ============================================================
   OFICINA DO ARTISTA — estrutura da formação (módulos/aulas reais,
   extraídos de "5. Cursos/1. Oficina do Artista"). Lista editorial única,
   empilhada 0→7 (sem colunas, sem grid alternando módulos, sem masonry) —
   cada módulo é UM bloco (fundo muito sutil em --concrete + borda fina,
   mesmo dispositivo já usado em .ad-track/.depoimentos-block, não um card
   de interface), com o título nitidamente mais forte que a lista de aulas
   logo abaixo, recuada só o suficiente pra não ler como elemento solto.
   Coluna com max-width = mesma largura de leitura usada no resto da
   página (.oque-e .inner etc.), alinhada ao grid principal via .wrap —
   não a largura inteira da viewport. */
.oficina-modulos { padding: 8px 0 80px; }
.modulos-lista {
  max-width: var(--reading-width);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modulo-block {
  background: rgba(20,20,20,0.035);
  border: 1px solid rgba(20,20,20,0.14);
  border-radius: 2px;
  padding: 24px 28px;
}
.modulo-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -1px;
  color: var(--concrete);
  margin: 0 0 12px;
}
.modulo-aulas {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
}
.modulo-aulas li {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(20,20,20,0.7);
  padding: 3px 0;
}
/* Só na Oficina do Artista: "Para quem não é?" vem logo depois da lista de
   módulos. .oque-e tem 56px de padding-top por padrão (pro respiro
   CTA→"O que é?" nas páginas de serviço) — aqui, seguindo .oficina-modulos
   (que já fecha com 80px embaixo), isso somava mais de 130px de vazio.
   Reduzido ao mesmo respiro "normal" entre seções adjacentes já usado em
   outros pontos do site (ex. .service-proof), só nesta transição
   específica — .oque-e continua 56px em qualquer outro contexto. */
.oficina-modulos + .oque-e { padding-top: 8px; }

/* prova via portfólio real — reaproveita .portfolio-grid/.portfolio-tile,
   sem grade nova; alimentado por data/portfolio.json (ver build.py) */
.service-proof { padding: 8px 0 80px; }
.service-proof .section-header { margin-bottom: 32px; }

/* ============================================================
   ANTES E DEPOIS — demonstração auditiva (Mixagem & Masterização)
   Editorial, não "player de plugin": rótulos de texto + <audio> nativo do
   navegador (sem skin custom, sem waveform decorativa). Antes/Depois usam
   volume equalizado (preparado à parte, o site só reproduz); Mix final vem
   à parte, deliberadamente separada por régua e espaçamento, no loudness
   real de entrega — a diferença nunca é comunicada só por cor.

   Cada música é UM bloco editorial (container com fundo sutil em
   --concrete a 3.5%), não três cards separados: cabeçalho, comparador e
   mix final moram dentro do mesmo container, alinhados à mesma margem
   interna. A separação entre os dois trabalhos é feita pela existência
   dos dois containers + respiro entre eles, não por uma linha solta. */
.service-antes-depois { padding: 8px 0 88px; }
.service-antes-depois .section-header { margin-bottom: 40px; }
.ad-intro {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -1px;
  color: rgba(20,20,20,0.65);
  max-width: 56ch;
}

.ad-tracks { display: flex; flex-direction: column; gap: 64px; }
.ad-track {
  background: rgba(20,20,20,0.035);
  border: 1px solid rgba(20,20,20,0.14);
  border-radius: 2px;
  padding: 40px;
}

.ad-track-header { margin-bottom: 32px; }
.ad-track-artist {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: rgba(20,20,20,0.6);
  margin-bottom: 4px;
}
.ad-track-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -1px;
  margin: 0;
}

.ad-compare-heading { margin-bottom: 20px; }
.ad-compare-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ferrugem);
  margin-bottom: 4px;
}
.ad-compare-caption {
  display: block;
  font-size: 13px;
  color: rgba(20,20,20,0.55);
}
/* grade simétrica: as duas colunas ocupam exatamente a mesma largura, o
   rótulo (ANTES/DEPOIS) é a primeira linha da grade nas duas — sem altura
   extra em nenhum lado, então os dois começam no mesmo ponto. */
.ad-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
/* linha contínua entre Antes e Depois — mesmo tratamento de divisor já
   usado em .tracklist, pra ler como duas metades do mesmo comparador */
.ad-compare-grid .ad-player + .ad-player {
  border-left: 1px solid rgba(20,20,20,0.14);
  padding-left: 40px;
}

.ad-player-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.5);
  margin-bottom: 10px;
}
/* sem max-width fixo: o player usa 100% da coluna disponível, então as
   duas metades do comparador sempre têm a mesma largura real */
.ad-player audio { display: block; width: 100%; }
.ad-player audio a { color: var(--no-corre); }

/* régua mais presente que o divisor interno do A/B — marca a Mix Final
   como a etapa seguinte, não como mais uma metade do comparador */
.ad-final { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(20,20,20,0.22); }
.ad-final-heading { margin-bottom: 14px; }
.ad-final-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--concrete);
  margin-bottom: 4px;
}
.ad-final-caption {
  display: block;
  font-size: 13px;
  color: rgba(20,20,20,0.55);
}
/* largura amarrada à mesma matemática da grade do A/B (1fr 1fr, gap 40px)
   em vez de um número arbitrário: a Mix Final ocupa exatamente a largura
   de UMA metade do comparador acima dela, não a linha inteira do container */
.ad-player--final audio { max-width: calc(50% - 20px); }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 900px) {
  /* menu mobile: .main-nav some da linha do header e volta como um painel
     de largura total abaixo dela quando .hamburger recebe .is-open (via
     script.js) — mesmo header, sem drawer/overlay, sem posicionamento
     absoluto. Fechado, a linha do header fica idêntica a antes. */
  .site-header .wrap { flex-wrap: wrap; height: auto; min-height: 76px; }
  .main-nav {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 20px;
    margin-top: 12px;
    border-top: 1px solid rgba(20,20,20,0.08);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 14px 2px; border-bottom: 1px solid rgba(20,20,20,0.08); }
  .main-nav a:last-child { border-bottom: none; }
  .hamburger { display: block; }
  .work-open-grid, .sobre-teaser, .sobre-hero-grid { grid-template-columns: 1fr; }
  /* Hero mobile: MESMA linguagem do desktop (foto de fundo + degradê +
     identidade sobre a foto), só recalibrada pra proporção retrato do
     celular — não é mais "foto em cima, bloco claro embaixo".
     A caixa do Hero aqui é mais ESTREITA que a foto (ao contrário do
     desktop, que é mais LARGO), então o corte de object-fit:cover passa a
     acontecer nas LATERAIS, não em cima/embaixo — a altura inteira da foto
     fica visível (cabeça, corpo e o estúdio ao redor, sem cortar nada na
     vertical), então não existe mais risco nenhum de cortar o rosto por
     enquadramento. Degradê vira vertical (de baixo pra cima) em vez de
     lateral: escurece só a faixa de baixo, onde a identidade mora, e some
     antes de chegar na altura do rosto — o estúdio continua visível acima.
     Identidade ancorada embaixo (justify-content:flex-end) em vez de
     centralizada, criando separação clara entre rosto (livre, no terço de
     cima) e texto (no bloco escurecido de baixo). */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(500px, 80vh, 640px);
    padding: 0 0 40px;
  }
  .hero-photo img { object-position: center; }
  .hero-photo::after {
    background: linear-gradient(to top,
      var(--concrete) 0%,
      var(--concrete) 22%,
      rgba(20,20,20,0.85) 32%,
      rgba(20,20,20,0.35) 45%,
      rgba(20,20,20,0) 60%
    );
  }
  .hero-inner { max-width: none; }
  .hero-logo { width: 140px; margin-bottom: -36px; }
  .hero-text { margin-left: 8px; }
  .hero-role { white-space: normal; }
  .servicos-grid { grid-template-columns: 1fr; gap: 40px; }
  #portfolio { padding-top: 32px; padding-bottom: 32px; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  /* empilha 01 / imagem / info em vez de espremer numa linha só — a caixa
     de 88px da capa não cabia na coluna de 60px que existia aqui antes
     (colisão real, não só estética) */
  .produto-row { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
  /* "Saiba mais" antes ficava escondido no mobile pros 3 produtos, porque
     os 3 eram só placeholder (href="#"). Agora só a Oficina do Artista tem
     link real — Harmonia Funcional/Como Crescer no Spotify nem têm mais o
     <a> no HTML —, então esconder deixaria o único CTA funcional
     inacessível no mobile. */
  /* título/(nome provisório)/badge saem do flex de uma linha só e cada um
     vira sua própria linha — nenhum texto é cortado, só reflui verticalmente */
  .produto-info h3 { display: block; }
  .produto-info h3 .placeholder,
  .produto-info h3 .formato-tag { display: block; margin-top: 6px; }
  .sobre-photo-placeholder { max-width: 220px; }
  .newsletter-inner { flex-direction: column; align-items: flex-start; }

  .work-open { padding: 40px 0 48px; }
  .work-open-grid { gap: 28px; }
  .work-identity { margin-top: 4px; }
  .work-credits-inline { margin-top: 32px; }
  .back-link { margin-top: 28px; }
  .work-tracklist { padding: 0 0 56px; }
  /* sem override de grid-template-columns aqui: o auto-fit/minmax de
     .tracklist já chega em 1 coluna sozinho quando a largura não comporta
     mais que um bloco confortavelmente — não é um número forçado. */
  .tracklist { row-gap: 32px; }
  .credit-row { flex-direction: column; gap: 4px; }
  .credit-fn { flex-basis: auto; }
  .credit-name { font-size: 15px; }
  .work-listen { padding: 0 0 56px; }
  .listen-row { flex-direction: column; align-items: stretch; }

  .page-open { padding: 56px var(--gutter) 32px; }
  .servico-painel-wrap { padding: 48px 0; }
  .servico-painel { grid-template-columns: 1fr; gap: 20px; }
  .painel-identidade h2 { font-size: 26px; }

  .service-hero { padding: 56px var(--gutter) 4px; }
  .oque-e { padding: 32px var(--gutter) 40px; }
  .service-diferencial { padding: 4px var(--gutter) 40px; }
  .service-diferencial p { font-size: 18px; }
  .service-diferencial .investimento-valor { margin-bottom: 24px; }
  .oque-e + .service-diferencial,
  .service-diferencial + .oque-e,
  .oque-e + .oque-e {
    padding-top: 4px;
  }
  .oque-e + .service-diferencial .inner,
  .service-diferencial + .oque-e .inner,
  .oque-e + .oque-e .inner {
    border-top: 1px solid rgba(20,20,20,0.14);
    padding-top: 32px;
  }
  .oficina-modulos { padding: 4px 0 56px; }
  .modulos-lista { gap: 16px; }
  .modulo-block { padding: 18px 20px; }
  .oficina-modulos + .oque-e { padding-top: 4px; }
  .service-proof { padding: 4px 0 56px; }
  .service-depoimentos { padding: 4px var(--gutter) 40px; }
  .depoimentos-block { padding: 32px 24px 28px; }
  .depoimentos-mark { font-size: 52px; }
  .depoimentos-grid { grid-template-columns: 1fr; gap: 32px; }
  .depoimento + .depoimento {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(20,20,20,0.14);
    padding-top: 28px;
  }

  .service-antes-depois { padding: 4px 0 56px; }
  .service-antes-depois .section-header { margin-bottom: 28px; }
  .ad-tracks { gap: 40px; }
  .ad-track { padding: 28px 20px; }
  .ad-track-header { margin-bottom: 24px; }
  .ad-compare-grid { grid-template-columns: 1fr; gap: 24px; }
  /* empilhado: divisor vira linha horizontal sutil entre Antes e Depois —
     mais leve que a régua da Mix Final, que marca a etapa seguinte */
  .ad-compare-grid .ad-player + .ad-player {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(20,20,20,0.12);
    padding-top: 24px;
  }
  .ad-player audio, .ad-player--final audio { max-width: none; }
  .ad-final { margin-top: 28px; padding-top: 24px; }

  .sobre-hero { padding: 48px 0 40px; }
  .sobre-hero-grid { gap: 28px; }
  .sobre-autoridade { padding: 0 var(--gutter) 56px; }

  .newsletter-hero { padding: 56px var(--gutter) 64px; }
  .newsletter-title { margin-bottom: 16px; }

  .contato-form-section { padding: 4px 0 64px; }
  .form-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* -------- mobile-frame preview (só para visualização no protótipo) -------- */
.device-frame-label {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.5);
  padding: 28px 0 12px;
  background: #d9d3cb;
}
.device-frame {
  width: 390px;
  margin: 0 auto 60px;
  border: 10px solid #111;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  background: #d9d3cb;
  padding-bottom: 60px;
}
.device-frame iframe {
  width: 100%;
  height: 780px;
  border: none;
  display: block;
}