/* COMPONENTES E SECOES - pele Grafismo. Consomem so tokens semanticos (--cor-*) e de escala.
   Formas (friso, grao, filete) e letras vem de tokens-escala.css, entao um tema troca cor, fonte e desenho sem tocar aqui.
   Temas de secao: cada .tema-* aponta seus papeis locais para os papeis do modo (tokens-semanticos.css). */

/* ---------- Temas de secao (papeis locais) ---------- */
/* Neutro: fundo do modo (papel no claro, tinta no escuro) */
.tema-neutro {
  --cor-fundo: var(--cor-superficie);
  --cor-texto: var(--cor-texto-neutro);
  --cor-texto-suave: var(--cor-texto-neutro);
  --cor-destaque: var(--cor-destaque-neutro);
  --cor-linha: var(--cor-texto-neutro);
  --cor-foco: var(--cor-destaque-neutro);
  --cor-acao-fundo: var(--cor-texto-neutro);
  --cor-acao-texto: var(--cor-superficie);
  --cor-realce-fundo: var(--cor-acento-3);
  --cor-realce-texto: var(--cor-tinta);
}
/* Escuro: abertura, video, fotos, rodape e barra */
.tema-escuro {
  --cor-fundo: var(--cor-superficie-escura);
  --cor-texto: var(--cor-texto-escuro);
  --cor-texto-suave: var(--cor-texto-escuro);
  --cor-destaque: var(--cor-destaque-escuro);
  --cor-linha: var(--cor-texto-escuro);
  --cor-foco: var(--cor-destaque-escuro);
  --cor-acao-fundo: var(--cor-destaque-escuro);
  --cor-acao-texto: var(--cor-tinta);
  --cor-realce-fundo: var(--cor-acento-3);
  --cor-realce-texto: var(--cor-tinta);
}
/* Elevada: mesma pele da escura, so o fundo muda. Veste as faixas internas (video, fotos, rodape).
   No modo claro e identica a escura; no escuro sobe para se separar da superficie. A barra e a
   abertura ficam na .tema-escuro, porque elas querem ser a coisa mais escura da pagina. */
.tema-elevado {
  --cor-fundo: var(--cor-superficie-elevada);
  --cor-texto: var(--cor-texto-escuro);
  --cor-texto-suave: var(--cor-texto-escuro);
  --cor-destaque: var(--cor-destaque-escuro);
  --cor-linha: var(--cor-texto-escuro);
  --cor-foco: var(--cor-destaque-escuro);
  --cor-acao-fundo: var(--cor-destaque-escuro);
  --cor-acao-texto: var(--cor-tinta);
  --cor-realce-fundo: var(--cor-acento-3);
  --cor-realce-texto: var(--cor-tinta);
}
/* Cores chapadas de secao. A pele Grafismo usa a acento-3 (escuta, shows, contato); 1 e 2 ficam disponiveis. */
.tema-acento-1 {
  --cor-fundo: var(--cor-acento-1);
  --cor-texto: var(--cor-papel);
  --cor-texto-suave: var(--cor-papel);
  --cor-destaque: var(--cor-acento-3);
  --cor-linha: var(--cor-papel);
  --cor-foco: var(--cor-acento-3);
  --cor-acao-fundo: var(--cor-acento-3);
  --cor-acao-texto: var(--cor-tinta);
  --cor-realce-fundo: var(--cor-acento-3);
  --cor-realce-texto: var(--cor-tinta);
}
.tema-acento-2 {
  --cor-fundo: var(--cor-acento-2);
  --cor-texto: var(--cor-tinta);
  --cor-texto-suave: var(--cor-tinta);
  --cor-destaque: var(--cor-tinta);
  --cor-linha: var(--cor-tinta);
  --cor-foco: var(--cor-tinta);
  --cor-acao-fundo: var(--cor-tinta);
  --cor-acao-texto: var(--cor-papel);
  --cor-realce-fundo: var(--cor-tinta);
  --cor-realce-texto: var(--cor-papel);
}
.tema-acento-3 {
  --cor-fundo: var(--cor-acento-3);
  --cor-texto: var(--cor-tinta);
  --cor-texto-suave: var(--cor-tinta);
  --cor-destaque: var(--cor-tinta);
  --cor-linha: var(--cor-tinta);
  --cor-foco: var(--cor-tinta);
  --cor-acao-fundo: var(--cor-tinta);
  --cor-acao-texto: var(--cor-papel);
  --cor-realce-fundo: var(--cor-tinta);
  --cor-realce-texto: var(--cor-papel);
}

/* ---------- Barra superior (usa o tema da propria barra: .barra.tema-escuro) ---------- */
.barra {
  position: relative;
  z-index: 20;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}
.barra-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--espaco-3);
  padding: 0 var(--gutter);
}
.barra-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  width: 100%;
}
.barra-linha-2 {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-bottom: var(--espaco-1);
  border-top: 1px solid var(--cor-linha);
}
.marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--fonte-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--fs-marca);
  letter-spacing: var(--titulo-tracking);
  line-height: 1;
  text-transform: var(--titulo-caixa);
  text-decoration: none;
  color: inherit;
}
.barra-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--espaco-1);
}
.barra-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--espaco-1);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.barra-nav a:hover { color: var(--cor-destaque); }
.barra-acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-left: auto;
}
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--espaco-2);
  background: var(--cor-badge-fundo);
  color: var(--cor-badge-texto);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-left: auto;
}
.idiomas,
.modo {
  display: inline-flex;
  border: 2px solid var(--cor-texto);
}
.idiomas button,
.modo button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--espaco-2);
  border: 0;
  background: transparent;
  color: var(--cor-texto);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.idiomas button[aria-pressed="true"],
.modo button[aria-pressed="true"] {
  background: var(--cor-texto);
  color: var(--cor-fundo);
}
.modo { margin-left: auto; }
.ctl-som { display: inline-flex; }

/* ---------- Botoes e links de acao ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: 52px;
  min-width: 44px;
  padding: var(--espaco-2) var(--espaco-5);
  border: 2px solid transparent;
  background: var(--cor-acao-fundo);
  color: var(--cor-acao-texto);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn:active { transform: translate3d(0, 2px, 0); }
.btn-linha {
  background: transparent;
  color: var(--cor-texto);
  border-color: var(--cor-texto);
}
.btn-acao { background: var(--cor-acao-fundo); color: var(--cor-acao-texto); }
.btn-pequeno { min-height: 44px; padding: var(--espaco-1) var(--espaco-3); }
@media (hover: hover) {
  .btn:hover { box-shadow: 4px 4px 0 var(--cor-texto); transform: translate3d(-2px, -2px, 0); }
  .btn:active { box-shadow: none; }
}
.link-externo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-underline-offset: .25em;
}

/* ---------- Tags e chips (rotulos em mono) ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .25rem .5rem;
  border: 2px solid var(--cor-tinta);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
.tag-pendente { background: var(--cor-tag-pendente-fundo); color: var(--cor-tag-pendente-texto); }
.tag-provisorio { background: var(--cor-tag-provisorio-fundo); color: var(--cor-tag-provisorio-texto); }
/* Etiqueta de conteudo real (nao e aviso de pendencia): marca o set em destaque como o mais recente. */
.tag-atual { background: var(--cor-tag-atual-fundo); color: var(--cor-tag-atual-texto); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .25rem .6rem;
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
.chip-dj-set { background: var(--cor-chip-dj-fundo); color: var(--cor-chip-dj-texto); }
.chip-autoral { background: var(--cor-chip-autoral-fundo); color: var(--cor-chip-autoral-texto); }
.chip-remix { background: var(--cor-chip-remix-fundo); color: var(--cor-chip-remix-texto); }

/* ---------- Grafismo: friso, faixa lateral, grao e traco de pincel ---------- */
/* Friso: faixa entre secoes com o modulo repetido. O desenho e uma mascara (--friso-modulo), a cor e do tema. */
.friso {
  position: relative;
  height: var(--friso-altura);
  background: var(--cor-friso-fundo);
  color: var(--cor-friso-figura);
  overflow: hidden;
}
.friso-fita {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: -15%;
  width: 130%;
  background: currentColor;
  -webkit-mask: var(--friso-modulo) repeat-x left center / auto 100%;
  mask: var(--friso-modulo) repeat-x left center / auto 100%;
  will-change: transform;
}
/* Faixa lateral com o friso em pe (so a partir de 900px; ver breakpoints) */
.lado { display: none; }
.lado-fita {
  position: absolute;
  left: 14%;
  right: 14%;
  top: -15%;
  height: 130%;
  background: currentColor;
  -webkit-mask: var(--friso-modulo-v) repeat-y center top / 100% auto;
  mask: var(--friso-modulo-v) repeat-y center top / 100% auto;
  will-change: transform;
}
/* Grao: textura fixa por cima de tudo, nao recebe clique */
.grao {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: var(--grao);
  opacity: .22;
  mix-blend-mode: overlay;
}
.grafismo-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* Borda de pincel nos titulos grandes (filtros SVG inseridos pelo render.js) */
.hero-nome { filter: url(#pincel); }
.titulo-xl { filter: url(#pincel-fino); }

/* ---------- Secoes ---------- */
.secao {
  position: relative;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  overflow-x: hidden;
  overflow-x: clip;
}
.secao-topo { padding-block: 0; }
.kicker {
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cor-texto);
}
.titulo-xl {
  font-size: var(--fs-h2);
  color: var(--cor-texto);
  margin-top: var(--espaco-3);
  overflow-wrap: break-word;
}
.lead {
  font-size: var(--fs-frase);
  font-weight: 600;
  line-height: 1.22;
  max-width: 30ch;
  margin-top: var(--espaco-4);
}
.pendencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  font-weight: 600;
}

/* ---------- Abertura (celular: coluna unica; painel depois do texto) ---------- */
.hero {
  position: relative;
  display: grid;
}
.hero-col {
  display: grid;
  gap: var(--espaco-5);
  align-content: start;
  min-width: 0;
  padding: var(--espaco-4) var(--gutter) var(--espaco-7);
}
.hero-rotulos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espaco-1) var(--espaco-4);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cor-destaque);
}
/* Nome em uma linha: o tamanho cede para nomes longos (--nome-letras vem do render.js) */
.hero-nome {
  font-size: min(var(--fs-nome), calc(86vw / var(--nome-letras, 6)));
  line-height: .86;
  text-transform: uppercase;
  color: var(--cor-destaque);
  white-space: nowrap;
}
/* Nome quebrado em linhas (identidade.nomeQuebra): cheio, contorno, cor do texto, em escada */
.hero-nome.nome-quebrado { font-size: var(--fs-nome); }
.nome-linha { display: block; }
.nome-linha:nth-child(3n+2) {
  margin-left: .5em;
  color: var(--cor-fundo);
  -webkit-text-stroke: .05em var(--cor-destaque);
  paint-order: stroke fill;
}
.nome-linha:nth-child(3n) {
  margin-left: 1em;
  color: var(--cor-texto);
}
.hero-txt {
  display: grid;
  gap: var(--espaco-4);
}
.hero-frase {
  font-size: var(--fs-frase);
  font-weight: 600;
  line-height: 1.2;
  max-width: 24ch;
}
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}
/* Painel chapado: foto em cinza multiplicada sobre a cor, marca por cima */
.hero-painel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  background: var(--cor-painel-fundo);
  color: var(--cor-painel-tinta);
}
.hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: multiply;
}
/* Marca recortada: PNG com transparencia usado como mascara, pintado com a cor do painel */
.simbolo {
  position: absolute;
  left: 5%;
  top: 4%;
  width: 30%;
  aspect-ratio: 1 / 1;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  will-change: transform;
}

/* ---------- Escuta ---------- */
.escuta-grid {
  position: relative;
  display: grid;
  gap: var(--espaco-6);
}
.escuta-player { position: relative; }

/* ---------- Players (fachada com clique) ---------- */
.player {
  display: grid;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
  border: var(--filete) solid var(--cor-linha);
  background: var(--cor-fundo);
}
.player-titulo {
  font-family: var(--fonte-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--fs-h4);
  letter-spacing: var(--titulo-tracking);
  line-height: 1.05;
  text-transform: var(--titulo-caixa);
  overflow-wrap: anywhere;
  color: var(--cor-texto);
}
.player-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-4);
}
.player-pendente { gap: var(--espaco-2); }
.player-nota { font-weight: 600; }
.player iframe {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
}
.player-embed:focus { outline-offset: 0; }
.player-embed { min-height: 120px; }
/* So o player aberto: o widget da plataforma e claro e nao aceita tema, entao o cartao
   e de papel nos dois modos. Nao vale para .player-pendente nem para o player so com link,
   que tem texto e seguem a cor da secao. */
.player-aberto {
  background: var(--cor-player-fundo);
  border-color: var(--cor-player-linha);
}

/* ---------- Sets (lista editorial: numero em mono, titulo grande, regua grossa) ---------- */
.grupo-titulo {
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--cor-texto);
  margin-top: var(--espaco-7);
}
.grupo-titulo + .lista-sets { margin-top: var(--espaco-3); }
.lista-sets {
  margin-top: var(--espaco-6);
  border-top: var(--filete) solid var(--cor-linha);
}
.set {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--espaco-3) var(--espaco-4);
  padding-block: var(--espaco-5);
  border-bottom: var(--filete) solid var(--cor-linha);
}
.set-num {
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  padding-top: .5em;
  color: var(--cor-texto);
}
.set-corpo {
  display: grid;
  gap: var(--espaco-3);
  align-content: start;
}
.set-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}
.set-titulo {
  font-size: var(--fs-h3);
  line-height: 1.02;
  color: var(--cor-texto);
  overflow-wrap: break-word;
}
.set-capa {
  grid-column: 2;
  width: 62%;
  justify-self: end;
}
.set-capa img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* Item sem capa: o corpo ocupa tambem a coluna da capa. */
.set-sem-capa .set-corpo { grid-column: 2 / -1; }

/* ---------- Video ---------- */
.video-corpo { margin-top: var(--espaco-6); }

/* ---------- Fotos (galeria em 12 colunas, linhas compactas) ---------- */
.galeria {
  display: grid;
  gap: var(--espaco-7) var(--espaco-4);
  margin-top: var(--espaco-6);
}
.foto { width: 86%; justify-self: start; }
.foto:nth-child(even) { justify-self: end; }
.foto-fig { margin: 0; }
.foto-quadro {
  position: relative;
  overflow: hidden;
  background: var(--cor-linha);
}
.foto-quadro[data-ratio="4-5"] { aspect-ratio: 4 / 5; }
.foto-quadro[data-ratio="3-2"] { aspect-ratio: 3 / 2; }
.foto-quadro[data-ratio="1-1"] { aspect-ratio: 1 / 1; }
.foto-quadro[data-ratio="3-4"] { aspect-ratio: 3 / 4; }
.foto-quadro img {
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}
.foto-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
  margin-top: var(--espaco-2);
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-kicker);
  font-weight: 400;
  color: var(--cor-texto);
}

/* ---------- Sobre ---------- */
.sobre-grid {
  display: grid;
  gap: var(--espaco-7);
  margin-top: var(--espaco-6);
}
.bio-curta {
  font-family: var(--fonte-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--fs-titulo-m);
  letter-spacing: var(--titulo-tracking);
  line-height: 1.05;
  text-transform: var(--titulo-caixa);
  max-width: 22ch;
  margin-top: var(--espaco-5);
}
.bio-longa {
  display: grid;
  gap: var(--espaco-4);
  margin-top: var(--espaco-5);
  max-width: 60ch;
  font-size: var(--fs-corpo);
}
.estilos {
  margin-top: var(--espaco-7);
  border-top: var(--filete) solid var(--cor-linha);
}
.estilo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-1) var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-2);
  border-bottom: var(--filete) solid var(--cor-linha);
}
.estilo-nome {
  font-family: var(--fonte-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--fs-titulo-m);
  letter-spacing: var(--titulo-tracking);
  line-height: 1;
  text-transform: var(--titulo-caixa);
}
.estilo-papel,
.lista-simples .item-meta {
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sobre-foto { margin: 0; }

/* ---------- Shows e materiais ---------- */
.lista-simples {
  margin-top: var(--espaco-6);
  border-top: var(--filete) solid var(--cor-linha);
}
.lista-simples li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2) var(--espaco-4);
  padding: var(--espaco-4) var(--espaco-2);
  border-bottom: var(--filete) solid var(--cor-linha);
}
.lista-simples .item-titulo {
  font-family: var(--fonte-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--fs-h3);
  letter-spacing: var(--titulo-tracking);
  text-transform: var(--titulo-caixa);
  line-height: 1.02;
}
/* Linha em destaque ao passar o mouse: troca fundo e texto pelos papeis de realce do tema */
@media (hover: hover) {
  .estilo,
  .lista-simples li { transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
  .estilo:hover,
  .lista-simples li:hover {
    --cor-texto: var(--cor-realce-texto);
    background: var(--cor-realce-fundo);
    color: var(--cor-realce-texto);
  }
}

/* ---------- Contato ---------- */
.email-grande {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--espaco-5);
  font-family: var(--fonte-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--fs-titulo-g);
  letter-spacing: var(--titulo-tracking);
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
  color: var(--cor-texto);
}
.contato-extra {
  display: grid;
  gap: var(--espaco-4);
  margin-top: var(--espaco-7);
}
.link-grande {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: max-content;
  font-family: var(--fonte-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--fs-h3);
  letter-spacing: var(--titulo-tracking);
  text-transform: var(--titulo-caixa);
}
.redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-5);
}
.redes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
}
.redes a, .redes span.nome {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: var(--fs-corpo-g);
}

/* ---------- Rodape ---------- */
.rodape-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
}
.rodape-nome {
  font-family: var(--fonte-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--fs-titulo-m);
  letter-spacing: var(--titulo-tracking);
  line-height: .95;
  text-transform: var(--titulo-caixa);
}
.rodape-nota {
  font-family: var(--fonte-rotulo);
  font-size: var(--fs-kicker);
  margin-top: var(--espaco-2);
}

.erro {
  padding: var(--espaco-7) var(--gutter);
  font-weight: 700;
}
.noscript-aviso {
  padding: var(--espaco-7) var(--gutter);
  font-weight: 700;
  font-size: var(--fs-corpo-g);
  color: var(--cor-texto-neutro);
  background: var(--cor-superficie);
}
.noscript-aviso p + p { margin-top: var(--espaco-3); }
.noscript-nome {
  font-family: var(--fonte-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--fs-titulo-m);
  line-height: .95;
  text-transform: var(--titulo-caixa);
}

/* ============ Breakpoints ============ */

@media (min-width: 600px) {
  .set-capa { width: 46%; }
  .foto { width: 72%; }

  .barra { position: sticky; top: 0; }
  .barra-linha, .barra-linha-2 { width: auto; }
  .barra-linha-2 { border-top: 0; padding-bottom: 0; }
  .barra-in { flex-wrap: nowrap; gap: var(--espaco-4); }
  .barra-linha-2 { flex: 1; flex-wrap: nowrap; }
  .barra-nav a { padding: 0 var(--espaco-2); }
}

@media (min-width: 900px) {
  /* Abertura em duas colunas, de borda a borda: texto a esquerda, painel chapado a direita */
  .hero {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    min-height: min(calc(100vh - 7.5rem), 58rem);
  }
  .hero-col {
    grid-template-rows: auto 1fr auto;
    gap: var(--espaco-4);
    padding-block: var(--espaco-4) var(--espaco-6);
  }
  .hero-nome {
    align-self: center;
    font-size: min(var(--fs-nome-largo), calc(52vw / var(--nome-letras, 6)));
  }
  .hero-nome.nome-quebrado { font-size: var(--fs-nome-largo); }
  .hero-painel { aspect-ratio: auto; min-height: 100%; }

  /* Faixa lateral com friso em pe */
  .secao.com-lado { padding-left: var(--lado-largura); }
  .lado {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--lado-largura);
    background: var(--cor-friso-fundo);
    color: var(--cor-friso-figura);
    overflow: hidden;
  }

  .escuta-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: var(--espaco-8);
  }

  .set {
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 16rem);
    align-items: start;
  }
  .set-capa { grid-column: 3; grid-row: 1; width: 100%; justify-self: stretch; }

  /* 12 colunas, 4 linhas. Pares de fotos com a mesma altura visual (4:5 x 4:5, 3:2 x 3:2, 1:1 x 1:1). */
  .galeria {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: var(--espaco-7) var(--espaco-4);
  }
  .foto { width: auto; justify-self: stretch; }
  .foto:nth-child(even) { justify-self: stretch; }
  .foto[data-pos="1"] { grid-row: 1; grid-column: 2 / span 4; }
  .foto[data-pos="3"] { grid-row: 1; grid-column: 7 / span 5; }
  .foto[data-pos="2"] { grid-row: 2; grid-column: 1 / span 6; }
  .foto[data-pos="7"] { grid-row: 2; grid-column: 8 / span 4; }
  .foto[data-pos="4"] { grid-row: 3; grid-column: 1 / span 4; }
  .foto[data-pos="6"] { grid-row: 3; grid-column: 7 / span 4; }
  .foto[data-pos="5"] { grid-row: 4; grid-column: 1 / span 6; }
  .foto[data-pos="8"] { grid-row: 4; grid-column: 7 / span 6; }

  .sobre-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: end;
    gap: var(--espaco-8);
  }
  .sobre-foto { margin-bottom: var(--espaco-5); }
}

@media (min-width: 1100px) {
  .barra-nav { margin-left: var(--espaco-5); }
}

/* ============ Modificadores opt-in ============ */

/* Logo no cabecalho e no rodape (kit com logo.arquivo). Quadrado com canto arredondado total (circulo). */
.marca-logo { gap: var(--espaco-2); }
.marca-img {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--raio-total);
}
.rodape-logo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--raio-total);
  margin-bottom: var(--espaco-3);
}

/* Sobre sem foto: uma coluna (sem celula vazia ao lado do texto) */
.sobre-grid.sem-foto { grid-template-columns: minmax(0, 1fr); }

/* Galeria em ritmo: 12 colunas, 3 fotos por ciclo (7 + 5, depois 12). Celulas da mesma linha
   tem a mesma altura (a foto e cortada com cover), entao nao sobra buraco. */
.galeria-ritmo .foto,
.galeria-ritmo .foto:nth-child(even) { width: 100%; justify-self: stretch; }
.galeria-ritmo .foto-fig { margin: 0; }
@media (min-width: 900px) {
  .galeria-ritmo {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-items: stretch;
    gap: var(--espaco-7) var(--espaco-4);
  }
  .galeria-ritmo .foto { display: flex; flex-direction: column; grid-row: auto; grid-column: auto; }
  .galeria-ritmo .foto-fig { display: flex; flex-direction: column; flex: 1 1 auto; }
  .galeria-ritmo .foto-quadro { flex: 1 1 auto; }
  .galeria-ritmo .foto:nth-child(3n+1) { grid-column: 1 / span 7; }
  .galeria-ritmo .foto:nth-child(3n+2) { grid-column: 8 / span 5; }
  .galeria-ritmo .foto:nth-child(3n) { grid-column: 1 / span 12; }
  .galeria-ritmo .foto:nth-child(3n) .foto-quadro { aspect-ratio: 3 / 2; }
  .galeria-ritmo .foto-quadro img { object-position: center 30%; }
  .galeria-ritmo .foto-quadro img { top: -15%; height: 130%; }
}

/* Clipes verticais: faixa com rolagem horizontal (teclado: a faixa recebe foco, setas rolam) */
.clipes-nota { margin-top: var(--espaco-4); font-family: var(--fonte-rotulo); font-size: var(--fs-kicker); }
.clipes {
  margin-top: var(--espaco-5);
  padding-block: var(--espaco-4) var(--espaco-3);
  border-top: var(--filete) solid var(--cor-linha);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.clipes-lista {
  display: flex;
  gap: var(--espaco-4);
  width: max-content;
  padding-right: var(--espaco-4);
}
.clipe {
  flex: 0 0 clamp(170px, 56vw, 280px);
  scroll-snap-align: start;
}
.clipe-fig { margin: 0; display: grid; gap: var(--espaco-2); }
.clipe-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: var(--cor-fundo);
  border: var(--filete) solid var(--cor-linha);
}
.clipe-titulo {
  font-family: var(--fonte-titulo);
  font-weight: var(--titulo-peso);
  font-size: var(--fs-h4);
  letter-spacing: var(--titulo-tracking);
  line-height: 1.05;
  text-transform: var(--titulo-caixa);
  color: var(--cor-texto);
}
.clipe-erro { font-weight: 700; }