/* Pombo Bravo — sistema visual do brandbook (16/09/2026)
   Cores institucionais: #000000, #FFFFFF, #F76400
   Display: Beack Street (licença Envato Elements do Axel, projeto AGÊNCIA EVERGREEN, 20/09/2026), desde 05/10.
   Arquivo em assets/fontes/ (gitignorado). Anton fica de reserva: cobre o º, que a Beack Street não tem
   Texto: Inter
   Regra do brandbook: imagem sempre monocromatica, laranja entra POR CIMA como intervencao. */

@font-face {
  font-family: 'Beack Street';
  src: url('fontes/beack-street.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
  /* a Beack Street NAO tem acento: mapeia É->E, Ç->C, Ã->A (conferido no cmap, 05/10). So as letras sem
     acento vem dela; a letra acentuada cai na Anton, a proxima da pilha. */
  unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+00F7, U+2013-2014, U+2018-201E, U+2022, U+2026;
}

:root {
  --preto:   #000000;
  --branco:  #FFFFFF;
  --laranja: #F76400;

  /* neutros derivados, so para linha e texto secundario */
  --tinta-70: rgba(0, 0, 0, 0.68);
  --linha:    rgba(0, 0, 0, 0.16);
  --linha-i:  rgba(255, 255, 255, 0.22);
  --tinta-70-i: rgba(255, 255, 255, 0.72);

  --f-display: 'League Gothic', 'Anton', 'Arial Narrow', sans-serif;  /* a mais perto da Beack Street com acento (05/10).
     A Beack Street NAO tem acento: fica fora ate o Axel resolver. Pra voltar: 'Beack Street' na frente */
  --f-texto: 'Inter', system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --banda-y: clamp(44px, 5.4vw, 80px);   /* era clamp(64px, 9vw, 132px): 260px entre secoes no desktop (Lucas, 05/10) */

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--preto);
  font-family: var(--f-texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.band--acento :focus-visible { outline-color: var(--preto); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.pula {
  position: absolute; left: -9999px;
  background: var(--preto); color: var(--branco); padding: 12px 18px; z-index: 99;
}
.pula:focus { left: 8px; top: 8px; }

/* ---------- bandas ---------- */
.band { padding-block: var(--banda-y); }
.band--claro  { background: var(--branco); color: var(--preto); }
.band--escuro { background: var(--preto);  color: var(--branco); }
.band--acento { background: var(--laranja); color: var(--preto); }
.band--compacta { padding-block: clamp(40px, 4.6vw, 68px); }
.band--escuro { --linha: var(--linha-i); --tinta-70: var(--tinta-70-i); }

/* ---------- tipografia ---------- */
.h-hero, .h-secao {
  font-weight: 900;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
.h-hero  { font-size: clamp(2.15rem, 1.1rem + 4.6vw, 4.5rem); }
/* titulo de secao na fonte de display da marca, caixa alta condensada, voz de placa (Axel, direcao criativa;
   05/10). Beack Street licenciada ausente: Anton no lugar, troca so em --f-display. */
.h-secao { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em;
  line-height: 1.02; font-size: clamp(2.5rem, 1.35rem + 4.2vw, 4.8rem); max-width: 24ch; }
/* League Gothic (05/10): mais estreita e mais leve que a Anton, entao maior e com entrelinha 1.02, que ainda
   deixa o acento da maiuscula longe do Ç e do J da linha de cima */

h3 { font-weight: 800; letter-spacing: -0.015em; line-height: 1.18; margin: 0; }

/* display caps: so em frase curta, como o brandbook usa Beack Street */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.94;
  margin: 0;
}

.rot {
  font-family: var(--f-texto);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.76rem;
  line-height: 1.4;
  margin: 0;
  color: var(--laranja);
}
.band--acento .rot { color: var(--preto); }

.intro { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; margin: 0; max-width: 56ch; }
.fonte { font-size: 0.8rem; line-height: 1.45; color: var(--tinta-70); margin: 0; }
.band--acento .fonte { color: rgba(0, 0, 0, 0.72); }

.mt-m { margin-top: clamp(12px, 1.6vw, 20px); }
.mt-g { margin-top: clamp(22px, 3vw, 36px); }

.secao-topo { max-width: 68ch; margin-bottom: clamp(30px, 4.4vw, 60px); display: grid; gap: clamp(12px, 1.6vw, 20px); }

/* ---------- botoes ---------- */
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px;
  font-family: var(--f-texto); font-weight: 800; font-size: 0.97rem;
  letter-spacing: 0.005em; text-decoration: none;
  border: 2px solid transparent; border-radius: 0;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn--cta { background: var(--laranja); color: var(--preto); border-color: var(--laranja); }
.btn--cta:hover { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.btn--linha { background: transparent; color: currentColor; border-color: currentColor; }
.btn--linha:hover { background: currentColor; }
.band--claro  .btn--linha:hover { color: var(--branco); }
.band--escuro .btn--linha:hover { color: var(--preto); }
.band--acento .btn--cta { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.band--acento .btn--cta:hover { background: var(--branco); color: var(--preto); border-color: var(--preto); }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--branco);
  border-bottom: 2px solid var(--preto);
}
.topo__in { display: flex; align-items: center; gap: 20px; min-height: 74px; }
.marca { display: block; flex: 0 0 auto; line-height: 0; }
.marca img { height: 30px; width: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); }
.nav a {
  text-decoration: none; font-weight: 600; font-size: 0.93rem;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover { border-bottom-color: var(--laranja); }
.nav .btn { padding: 11px 20px; font-size: 0.9rem; }

.menu-btn {
  margin-left: auto; display: none;
  background: none; border: 2px solid var(--preto); color: var(--preto);
  padding: 8px; cursor: pointer; line-height: 0;
}

@media (max-width: 940px) {
  .menu-btn { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--branco); border-bottom: 2px solid var(--preto);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 22px;
    display: none;
  }
  .topo.aberto .nav { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--linha); }
  .nav .btn { margin-top: 14px; border: 2px solid var(--laranja); }
}

/* ---------- hero ---------- */
.heroi-mapa { display: grid; gap: clamp(30px, 4.4vw, 58px); align-items: center; }
@media (min-width: 940px) { .heroi-mapa { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); } }
.heroi-mapa .h-hero { max-width: 17ch; }

/* o laranja entra como intervencao por cima da palavra */
.marca-texto {
  background: var(--laranja);
  padding: 0 0.14em 0.06em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Filete no topo, e nao barra lateral: e o mesmo device de .ficha e .metodo.
   O brandbook pede o laranja como marcacao por cima, nao como moldura. */
.apoio {
  margin: clamp(22px, 2.8vw, 32px) 0 0;
  padding-top: 14px;
  border-top: 3px solid var(--laranja);
  font-size: 0.95rem; line-height: 1.5; font-weight: 700;
  max-width: 46ch;
}

.heroi-centro { max-width: 62ch; }

/* ---------- mapa ---------- */
.mapa { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #111; border: 2px solid var(--preto); }
.band--escuro .mapa { border-color: var(--branco); }
/* Excecao declarada a regra de imagem monocromatica do brandbook: mapa aqui e PROVA,
   nao fotografia. A legenda cita cor ("azul = consultorio particular, laranja = laboratorio"),
   entao dessaturar apaga a informacao que a legenda promete. A regra monocromatica vale
   para a fotografia de ambiente, nao para evidencia com legenda de cor. */
.mapa img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 48%; }
.mapa--largo { aspect-ratio: 4 / 3; }
/* evidencia do bastidor: menor que o mapa do hero, de proposito */
.mapa--prova { aspect-ratio: 1 / 1; }
.mapa--prova img { object-position: 50% 50%; }
.mapa--largo img { object-position: 50% 50%; }
.mapa__leg { margin-top: 12px; }

/* ---------- bastidor ----------
   O hero ja gastou o mapa em escala grande. Aqui a estrela e a DECISAO: o texto
   domina e o mapa entra menor, como evidencia. Dispositivo diferente, mesma prova. */
.bastidor { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 940px) { .bastidor { grid-template-columns: minmax(0, 13fr) minmax(0, 8fr); } }
.bastidor .h-secao { font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3.4rem); max-width: 17ch; }
.linhas p { margin: 0; max-width: 44ch; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.24rem); line-height: 1.48; }
.linhas p + p { margin-top: 15px; }
.linhas p.forte { font-weight: 800; border-top: 3px solid var(--laranja); padding-top: 16px; margin-top: 26px; }

/* ---------- metodo (3 passos) ---------- */
.metodo { list-style: none; counter-reset: p; padding: 0; margin: 0; display: grid; gap: clamp(24px, 3.2vw, 40px); }
@media (min-width: 860px) { .metodo { grid-template-columns: repeat(3, 1fr); } }
.metodo li { counter-increment: p; border-top: 3px solid var(--preto); padding-top: 18px; }
.metodo li::before {
  content: counter(p, decimal-leading-zero);
  display: block; font-family: var(--f-display); font-size: 2.6rem; line-height: 1;
  color: var(--laranja); margin-bottom: 10px;
}
.metodo h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); }
.metodo p { margin: 10px 0 0; max-width: 40ch; }

/* ---------- entregas (6 taticas) ---------- */
.entregas { list-style: none; counter-reset: e; padding: 0; margin: 0; display: grid; gap: 0; }
@media (min-width: 860px) { .entregas { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); } }
.entregas li {
  counter-increment: e;
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 18px 0; border-top: 1px solid var(--linha);
  font-size: clamp(1rem, 0.97rem + 0.24vw, 1.12rem); line-height: 1.45;
}
.entregas li::before {
  content: counter(e, decimal-leading-zero);
  font-family: var(--f-display); font-size: 1.1rem; line-height: 1.45; color: var(--laranja);
}

/* ---------- fichas de resultado ---------- */
.fichas-3 { display: grid; gap: clamp(30px, 4vw, 48px); }
@media (min-width: 980px) { .fichas-3 { grid-template-columns: repeat(3, 1fr); } }
.ficha { border-top: 3px solid var(--laranja); padding-top: 18px; }
.ficha__h { font-size: clamp(1.14rem, 1.06rem + 0.4vw, 1.34rem); max-width: 24ch; }
.ficha p { margin-top: 10px; max-width: 40ch; }

.medida { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-family: var(--f-display); }
.medida .de { font-size: 1.85rem; opacity: .55; text-decoration: line-through; }
.medida .seta { font-size: 1.2rem; color: var(--laranja); font-family: var(--f-texto); font-weight: 800; }
.medida .para { font-size: 2.9rem; color: var(--laranja); }
.medida .unid { font-family: var(--f-texto); font-weight: 600; font-size: 0.86rem; letter-spacing: 0; text-transform: none; }

.barras { display: block; width: 100%; height: auto; margin-top: 14px; }
.b-eixo { fill: currentColor; opacity: .25; }
.b-de   { fill: currentColor; opacity: .38; }
.b-para { fill: var(--laranja); }

/* ---------- pra quem e ---------- */
.duas { display: grid; gap: clamp(26px, 3.4vw, 48px); }
@media (min-width: 800px) { .duas { grid-template-columns: 1fr 1fr; } }
.duas h3 { font-size: clamp(1.1rem, 1.04rem + 0.34vw, 1.3rem); max-width: 26ch; }
.duas ul { list-style: none; padding: 0; margin: 18px 0 0; }
.duas li { padding: 12px 0; border-top: 1px solid var(--linha); }
.duas li:last-child { border-bottom: 1px solid var(--linha); }
.duas--nao li { color: var(--tinta-70); }

/* ---------- garantias ---------- */
.garantias { display: grid; gap: clamp(22px, 3vw, 40px); margin-top: clamp(28px, 3.4vw, 44px); }
@media (min-width: 800px) { .garantias { grid-template-columns: 1fr 1fr; } }
.garantias > div { border-top: 3px solid var(--preto); padding-top: 18px; }
.garantias h3 { font-size: clamp(1.1rem, 1.04rem + 0.36vw, 1.32rem); max-width: 24ch; }
.garantias p { margin: 10px 0 0; max-width: 46ch; }

/* ---------- time ---------- */
.time { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(22px, 2.8vw, 34px); }
@media (min-width: 720px) { .time { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .time { grid-template-columns: repeat(3, 1fr); } }
.time li { border-top: 1px solid var(--linha); padding-top: 16px; }
.time h3 { font-size: 1.1rem; }
.time__fn { margin: 5px 0 9px; font-family: var(--f-texto); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--laranja); }
.time p:last-child { margin: 0; font-size: .95rem; color: var(--tinta-70); max-width: 34ch; }

/* ---------- rodape ---------- */
.rodape { background: var(--preto); color: var(--branco); --linha: var(--linha-i); --tinta-70: var(--tinta-70-i); padding-top: clamp(52px, 6vw, 80px); }
.rodape__grade { display: grid; gap: clamp(30px, 4vw, 52px); }
@media (min-width: 860px) { .rodape__grade { grid-template-columns: minmax(0, 2fr) 1fr 1fr; } }
.rodape .marca img { height: 28px; }
.rodape__tag { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); line-height: .98; margin: 18px 0 0; }
.rodape__tag em { font-style: normal; color: var(--laranja); }
.rodape__desc { margin: 16px 0 0; font-size: .95rem; color: var(--tinta-70); max-width: 42ch; }
.rodape h2 { font-size: .74rem; font-family: var(--f-texto); font-weight: 800; text-transform: uppercase; letter-spacing: .13em; margin: 0 0 14px; color: var(--laranja); }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rodape ul a { text-decoration: none; font-size: .95rem; }
.rodape ul a:hover { color: var(--laranja); }
.rodape__base {
  margin-top: clamp(40px, 5vw, 64px); padding-block: 22px;
  border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
}
.rodape__base a { text-decoration: none; }
.rodape__base a:hover { color: var(--laranja); }

/* ---------- resultados: um domina, dois embaixo ----------
   Sharp pede que uma coisa domine (nada de tres pesos iguais).
   Ritson pede mecanismo e procedencia em cada uma. Os dois cabem. */
.ficha--destaque { border-top-width: 4px; padding-top: 22px; margin-bottom: clamp(36px, 4.6vw, 60px); }
.ficha--destaque .ficha__h { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem); max-width: 20ch; }
.ficha--destaque > p { max-width: 52ch; }

.par-medidas { display: grid; gap: clamp(14px, 2.4vw, 34px); }
@media (min-width: 720px) { .par-medidas { grid-template-columns: auto auto; justify-content: start; } }
.ficha--destaque .medida .para { font-size: clamp(2.6rem, 2rem + 2.2vw, 4rem); }
.ficha--destaque .medida .de { font-size: 1.8rem; }

.fichas-2 { display: grid; gap: clamp(28px, 4vw, 52px); }
@media (min-width: 860px) { .fichas-2 { grid-template-columns: 1fr 1fr; } }

/* o par de medidas: cada bloco fecha em si, numero em cima e unidade embaixo */
.par-medidas .medida { display: grid; grid-template-columns: auto auto auto; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.par-medidas .medida .unid { grid-column: 1 / -1; }
.ficha--destaque .rot, .fichas-2 .rot { max-width: 44ch; }

/* o cliente fica numa linha propria, abaixo do papel da ficha */
.cli { margin: 5px 0 0; font-size: .86rem; line-height: 1.35; color: var(--tinta-70); }
.ficha--destaque .ficha__h, .fichas-2 .ficha__h { margin-top: clamp(10px, 1.4vw, 16px); }

/* ---------- as quatro frentes: hierarquia com motivo, nao lista de servico ---------- */
.frentes { list-style: none; counter-reset: f; padding: 0; margin: 0; display: grid; gap: 0; }
.frentes li {
  counter-increment: f;
  display: grid; gap: 4px 20px; align-items: start;
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--linha);
}
.frentes li:last-child { border-bottom: 1px solid var(--linha); }
@media (min-width: 820px) { .frentes li { grid-template-columns: auto minmax(0, 15ch) minmax(0, 1fr); gap: 4px 40px; align-items: baseline; } }
.frentes li::before {
  content: counter(f, decimal-leading-zero);
  font-family: var(--f-display); font-size: 1.15rem; line-height: 1.2; color: var(--laranja);
}
.frentes h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); }
.frentes p { margin: 0; max-width: 54ch; }

/* ---------- faixa de logos: carrossel duplo ----------
   Esteira de cima anda pra esquerda, a de baixo pra direita, em velocidades diferentes
   (mesma velocidade faz as duas "baterem" e o olho percebe o padrao).
   Monocromatico branco sobre preto: e a regra do brandbook e resolve as logos que vieram
   em versao branca, que sumiriam numa banda clara.
   O loop so e continuo porque a lista e duplicada e o translate e de exatamente -50%. */
.band-logos {
  background: var(--preto); color: var(--branco);
  --linha: var(--linha-i); --tinta-70: var(--tinta-70-i);
  padding-block: clamp(26px, 3vw, 40px);
  overflow: hidden;
}
.logos__linha {
  margin: 12px auto 0; max-width: 76ch; text-align: center;
  font-size: clamp(.9rem, .86rem + .2vw, 1rem); line-height: 1.55; color: var(--tinta-70);
}
.band-logos .rot { text-align: center; }

.esteiras {
  margin-top: 0; display: grid; gap: clamp(16px, 1.8vw, 24px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.esteira { overflow: hidden; }
.track {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(34px, 4.4vw, 66px);
  width: max-content; will-change: transform;
}
.track li { flex: 0 0 auto; }
.track img {
  height: clamp(24px, 2.4vw, 36px); width: auto; max-width: 190px;
  object-fit: contain; display: block;
  filter: brightness(0) invert(1); opacity: .8; transition: opacity .2s ease;
}
.track li:hover img { opacity: 1; }

@keyframes esteira-esq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes esteira-dir { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
.e1 .track { animation: esteira-esq 60s linear infinite; }
.e2 .track { animation: esteira-dir 72s linear infinite; }
.esteiras:hover .track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .track { animation: none; } }

/* ---------- hero centralizado (21/09), com o bairro de fundo (01/10) ---------- */
/* o hero ocupa a tela menos o topo (74px + 2px de borda), e a faixa de logos so aparece
   na rolagem. svh = tela com a barra do navegador aberta.
   Texto no alto, nao no meio (01/10, Lucas): centralizado sobrava mapa vazio entre o menu e o titulo. */
.band--hero {
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
  display: grid; align-items: start;
  padding-block: clamp(36px, 8vh, 96px) clamp(40px, 6vw, 80px);
  position: relative; overflow: hidden; isolation: isolate;
}
/* O bairro: quarteiroes em cinza e o laranja tomando as quadras a partir do pino com coroa,
   gerado por _gerar_hero_dono.py (simulacao, nao e cliente real). A camada e presa ao FIM do
   bloco de texto, nao a tela: a coroa fica sempre --folga abaixo do botao, em qualquer aparelho,
   e a mancha sobe por tras do texto (com um veu branco que ja vem na imagem).
   --coroa = altura da ponta do pino na imagem; --pino = altura do pino com a coroa. Os dois saem
   do script. A altura minima (125svh no desktop, 120svh no celular) garante que a imagem cubra o hero inteiro pra cima e pra baixo. */
.hero-centro { position: relative; }
.hero-centro::before {
  --coroa: 62%; --pino: 10%; --folga: 22px;
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 100%;
  height: max(56.25vw, 125vh); height: max(56.25vw, 125svh);
  width: calc(max(56.25vw, 125vh) * 16 / 9); width: calc(max(56.25vw, 125svh) * 16 / 9);
  transform: translate(-50%, calc(var(--pino) - var(--coroa) + var(--folga)));
  background: url("hero-dono.webp?v=2026-10-02a") center / 100% 100% no-repeat;
}
@media (max-width: 599px) {
  .hero-centro::before {
    --coroa: 56%; --pino: 9.8%;
    height: max(200vw, 120vh); height: max(200vw, 120svh);
    width: calc(max(200vw, 120vh) / 2); width: calc(max(200vw, 120svh) / 2);
    background-image: url("hero-dono-m.webp?v=2026-10-02a");
  }
}
/* mascara de contraste (02/10): o laranja sobe por tras do texto e esta elipse branca segura a
   leitura. Fica entre o mapa (::before) e o texto, acompanha o tamanho real do bloco em qualquer tela
   e some nas bordas, entao o laranja continua aparecendo em volta. Cobre ate o botao, que e laranja
   e sumiria em cima da mancha. */
.hero-centro::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -10% -14% -12%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .86) 50%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, 0) 100%);
}
.hero-centro { max-width: 1120px; margin-inline: auto; text-align: center; }
.hero-centro .intro { max-width: 52ch; margin-inline: auto; }
.hero-centro .acoes { justify-content: center; }

/* manchete em duas linhas, um tamanho so: a tese em cima, a briga embaixo.
   O tamanho acompanha a largura para a linha da briga (a mais longa) nunca quebrar do tablet pra cima.
   .nq segura a expressao que nao pode partir na quebra. */
.hero-centro .h-hero { line-height: 1.04; letter-spacing: -0.03em; }
/* proporcao da V4 (02/10): a tese vai na fonte de display da marca, a mesma da assinatura no rodape,
   em caixa alta condensada. E o que deixa a frase inteira ficar enorme sem cortar palavra.
   Desktop: tese numa linha, briga na outra. Celular: TODO BAIRRO / TEM DONO. em duas linhas grandes,
   e a briga numa linha so, um degrau abaixo. */
.hero-centro .h-hero__tese, .hero-centro .h-hero__briga {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.005em; line-height: 0.94;
}
.hero-centro .h-hero__tese { font-size: clamp(2.6rem, 8.8vw, 7rem); }
/* a briga na mesma fonte e com a mesma largura da linha de cima: um bloco so (02/10, Lucas achou
   a Inter solta embaixo da Anton). Largura medida a 100px: tese 9,25em com o laranja, briga 13,11em,
   entao a briga e 0,7056 do tamanho da tese. */
.hero-centro .h-hero__briga { font-size: clamp(1.83rem, 6.21vw, 4.94rem); margin-top: 0.2em; }
.h-hero__tese, .h-hero__briga { display: block; text-wrap: balance; }
.h-hero__briga { margin-top: 0.3em; } /* o bloco laranja desce abaixo da linha da tese */
/* no celular, duas linhas tambem (pedido do Lucas, 30/09): cada frase cabe inteira numa linha,
   entao a briga desce um degrau de tamanho. A tese fica no tamanho maximo que cabe. */
@media (max-width: 599px) {
  /* TODO BAIRRO / TEM DONO. e a briga com a largura de TODO BAIRRO (4,78em), razao 0,3646 */
  .hero-centro .h-hero__tese { font-size: 18vw; }
  .hero-centro .h-hero__briga { font-size: 6.56vw; margin-top: 0.3em; }
}
.nq { white-space: nowrap; }
.hero-sub { margin-top: clamp(24px, 3.2vw, 40px); text-wrap: balance; }

/* ---------- 1c. o mapa (30/09): H2 em duas linhas, texto + mapa de territorio ---------- */
.h-duas { max-width: none; }
.h-duas > span { display: block; text-wrap: balance; }
.terr { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: clamp(32px, 4.4vw, 60px); }
@media (min-width: 940px) { .terr { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.terr__mapa { margin: 0; }
.mapa-terr { position: relative; border: 2px solid var(--preto); background: #EFEFEF; }
.mapa-terr img { width: 100%; height: auto; }
.mapa-terr__rot {
  position: absolute; transform: translate(-50%, -50%);
  font-weight: 800; font-size: clamp(.78rem, .7rem + .3vw, .95rem); letter-spacing: -0.01em; line-height: 1;
  white-space: nowrap;
}
.mapa-terr__rot--pin { transform: translate(-50%, calc(-100% - 14px)); background: var(--preto); color: var(--branco); padding: 5px 8px; }
.terr__chave { margin: 14px 0 12px; display: grid; }
.terr__chave > div {
  display: grid; grid-template-columns: 7.2rem 1fr 1fr; gap: 12px; align-items: baseline;
  border-top: 1px solid var(--linha); padding-block: 9px;
}
.terr__chave dt { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.terr__chave dd { margin: 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.terr__chave .sw { width: 12px; height: 12px; flex-shrink: 0; }
.sw--laranja { background: var(--laranja); }
.sw--cinza { background: #A9A9A9; }
@media (max-width: 599px) {
  .terr__chave > div { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .terr__chave dt { grid-column: 1 / -1; }
}
/* o fundo inline cobre a altura total da fonte, e na Anton isso e muito maior que a maiuscula:
   o laranja invadia a linha de cima e a de baixo. Como bloco em linha, com entrelinha propria,
   a caixa abraca so a letra. */
.hero-centro .h-hero__tese .marca-texto { display: inline-block; line-height: 0.86; padding: 0.03em 0.1em 0; }

/* ---------- secao 2: as cinco brigas em pilha (16/10, molde do Veyra) ----------
   Cinco paineis alternando preto e branco. Desktop alto (>=1024 e >=700 de altura): cada painel gruda abaixo do
   topo fixo e o seguinte sobe por cima; o de baixo encolhe ate 93%, sobe 40px e escurece ate 45% (--cobre, 0 a 1,
   escrito pelo script da pilha). Celular e tela baixa: um painel embaixo do outro, sem grudar. */
.brigas-s { padding-bottom: 0; }
.pilha { margin-top: clamp(28px, 4vw, 56px); }
.pilha__painel { position: relative; background: var(--branco); }
.pilha__miolo { position: relative; display: grid; align-items: center; padding-block: clamp(52px, 9vw, 88px); }
.pilha__painel--escuro .pilha__miolo { background: var(--preto); color: var(--branco); --linha: var(--linha-i); --tinta-70: var(--tinta-70-i); }
.pilha__painel--claro .pilha__miolo { background: var(--branco); color: var(--preto); }
.pilha__grade { display: grid; gap: clamp(28px, 4vw, 44px); align-items: center; width: 100%; max-width: 1600px; }
.pilha__texto { display: grid; gap: 0; align-content: center; min-width: 0; }
.pilha__texto > .brigas__itens { margin-top: 28px; }
.pilha__texto > .acoes { margin-top: 32px; }
.pilha__rotulo { margin: 0; display: flex; align-items: center; gap: 14px; font: 800 0.76rem/1.2 var(--f-texto); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-70); }
.pilha__n { font: 400 2.6rem/0.8 var(--f-display); letter-spacing: 0; color: var(--laranja); }
.pilha__fio { width: 44px; height: 1px; background: currentColor; opacity: .5; flex: 0 0 auto; }
.pilha__texto h3 { margin: 22px 0 0; font: 400 clamp(2.3rem, 1.25rem + 2.7vw, 3.9rem)/1.0 var(--f-display); text-transform: uppercase;
  letter-spacing: 0; max-width: 17ch; text-wrap: balance; }
.pilha__texto > p:not(.pilha__rotulo) { margin: 18px 0 0; max-width: 42ch; font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem); line-height: 1.5;
  color: var(--tinta-70); text-wrap: balance; }
/* 16/10: os itens viraram baloes (pilulas) com um ponto laranja; o fundo e a borda vem do painel */
.pilha__painel--escuro { --balao: rgba(255, 255, 255, .07); --balao-b: rgba(255, 255, 255, .14); }
.pilha__painel--claro  { --balao: #F1F1EF; --balao-b: rgba(0, 0, 0, .07); }
.brigas__itens { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 52ch; }
.brigas__itens li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 13px; border-radius: 999px;
  background: var(--balao); border: 1px solid var(--balao-b); font-size: .9rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; }
.brigas__itens li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--laranja); flex: none; }
.pilha__fig { margin: 0; min-width: 0; }
.pilha__quadro { position: relative; width: 100%; aspect-ratio: 1448 / 1086; overflow: hidden; margin-inline: auto; }
.pilha__quadro > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pilha__fig .brigas__legenda { border-color: rgba(0, 0, 0, .16); }
.pilha__painel--claro .pilha__quadro { box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 30px 60px -28px rgba(0, 0, 0, .28); }
.pilha__painel--escuro .pilha__quadro { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
@media (min-width: 1024px) {
  .pilha__grade { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 4.5vw, 88px); }
  .pilha__painel:nth-child(even) .pilha__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .pilha__painel:nth-child(even) .pilha__fig { order: -1; }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .pilha__painel { position: sticky; top: var(--topo-h, 76px); height: calc(100svh - var(--topo-h, 76px)); }
  .pilha__miolo { height: 100%; padding-block: clamp(24px, 4.5vh, 52px);
    transform: scale(calc(1 - var(--cobre, 0) * .06)); }
  .pilha__miolo::after { content: ""; position: absolute; inset: 0; background: #000; pointer-events: none; opacity: calc(var(--cobre, 0) * .28); }
  .pilha__quadro { max-width: calc((100svh - var(--topo-h, 76px) - 2 * clamp(24px, 4.5vh, 52px)) * 1.3333); }
}
/* celular e tablet em pe (16/10): a pilha tambem gruda. Cada painel cabe numa tela: texto compacto em cima e a
   imagem no espaco que sobra (a celula da imagem e um container; o quadro 4:3 usa a largura ou a altura que couber) */
@media (max-width: 1023px) and (min-height: 560px) {
  .pilha__painel { position: sticky; top: var(--topo-h, 76px); height: calc(100svh - var(--topo-h, 76px)); }
  .pilha__miolo { height: 100%; padding-block: clamp(16px, 3.2svh, 32px); align-items: stretch; grid-template-rows: minmax(0, 1fr);
    transform: scale(calc(1 - var(--cobre, 0) * .05)); }
  .pilha__miolo::after { content: ""; position: absolute; inset: 0; background: #000; pointer-events: none; opacity: calc(var(--cobre, 0) * .28); }
  .pilha__grade { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2.6svh, 26px);
    container-type: inline-size; }
  .pilha__texto { flex: none; }
  .pilha__texto { align-content: start; }
  .pilha__rotulo { gap: 10px; font-size: .72rem; letter-spacing: .07em; }
  .pilha__n { font-size: 2rem; }
  .pilha__fio { width: 26px; }
  .pilha__texto h3 { font-size: clamp(1.65rem, 1.05rem + 3vw, 2.5rem); line-height: .98; max-width: none; }
  .pilha__texto > p:not(.pilha__rotulo) { font-size: .95rem; line-height: 1.42; max-width: 46ch; }
  .brigas__itens { gap: 6px; }
  .brigas__itens li { font-size: .78rem; padding: 6px 11px 6px 9px; gap: 7px; }
  .brigas__itens li::before { width: 6px; height: 6px; }
  .pilha__texto h3 { margin-top: clamp(10px, 1.6svh, 14px); }
  .pilha__texto > p:not(.pilha__rotulo) { margin-top: clamp(8px, 1.4svh, 12px); }
  .pilha__texto > .brigas__itens { margin-top: clamp(12px, 1.8svh, 16px); }
  .pilha__texto > .acoes { margin-top: clamp(12px, 1.8svh, 16px); }
  .pilha__texto .acoes .btn { padding-block: 12px; }
  .pilha__fig { flex: 0 1 calc(100cqw * .75); min-height: 0; align-self: stretch; container-type: size; display: grid; place-items: center; }
  .pilha__quadro { width: min(100cqw, 133.33cqh); }
}

/* ===== S3: antes e depois (05/10/2026). Selo e placar, usados pela secao do mapa na rolagem ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 15/10: a barra de arrastar saiu (ficou o mapa que muda na rolagem, secao 3b). Sobram o selo e o placar. */
.ad__selo { position: absolute; bottom: 12px; font: 800 0.78rem/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 11px; border: 2px solid var(--preto); }
.ad__selo--antes { left: 12px; background: var(--branco); color: var(--preto); }
.ad__selo--depois { right: 12px; background: var(--laranja); color: var(--preto); }
/* placar enxuto (08/10): dois paineis lado a lado, tarja preta + 3 linhas (rotulo a esquerda, antes -> depois a direita) */
.ad__placar { margin: clamp(20px, 2.4vw, 32px) 0 0; display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; }
@media (min-width: 860px) { .ad__placar { grid-template-columns: 1fr 1fr; } }
.ad__grupo { border: 2px solid var(--preto); background: var(--branco); min-width: 0; }
.ad__grupo-h { margin: 0; padding: 10px 16px; display: flex; justify-content: space-between; gap: 12px; background: var(--preto); color: var(--branco);
  font: 800 0.78rem/1.2 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; }
.ad__grupo-h span { color: var(--laranja); }
.ad__grupo ul { list-style: none; padding: 0; margin: 0; }
.ad__grupo li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px; min-width: 0; }
.ad__grupo li + li { border-top: 1px solid var(--linha); }
.ad__rot { margin: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.3; text-wrap: balance; }
.ad__placar .medida { margin: 0; gap: 0 8px; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; }
.ad__placar .medida .para { font-size: clamp(2rem, 1.7rem + 1vw, 2.6rem); line-height: 1; }
.ad__placar .medida .de { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.5rem); line-height: 1; }
.ad__placar .medida .seta { font-size: 1rem; }

/* cabecalho de secao centralizado (S3, 05/10) */
.secao-topo--centro { margin-inline: auto; text-align: center; justify-items: center; }
.secao-topo--centro > * { margin-inline: auto; }

/* ===== S4: casos reais em carrossel (05/10/2026) ===== */
@property --f { syntax: '<number>'; inherits: false; initial-value: 0; }
.casos { display: grid; gap: 18px; }
.casos__trilho { display: grid; grid-auto-flow: column; grid-auto-columns: 92%; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.casos__trilho::-webkit-scrollbar { display: none; }
@media (min-width: 940px) { .casos__trilho { grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; } }
.casos__trilho:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; }
.caso { scroll-snap-align: start; border: 2px solid var(--branco); padding: clamp(20px, 2.4vw, 32px);
  display: grid; gap: 20px; align-content: start; min-width: 0; }
.caso__quem { margin: 0; font: 800 0.76rem/1.3 var(--f-texto); letter-spacing: .09em; text-transform: uppercase; color: var(--laranja); }
.caso__periodo { margin: -14px 0 0; font: 600 .76rem/1.3 var(--f-texto); color: var(--tinta-70); font-variant-numeric: tabular-nums; }
.caso__h { margin: 0; font-family: var(--f-texto); font-weight: 800; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem);
  line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; max-width: 26ch; }
.caso__medida { display: grid; gap: 8px; }
.caso__rot { margin: 0 0 2px; font-weight: 600; font-size: .92rem; line-height: 1.35; }
.caso__linha { display: grid; grid-template-columns: 4.4em auto 1fr; align-items: center; gap: 10px; }
.caso__quando { font: 700 .72rem/1.2 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-70); }
.caso__linha b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.45rem, 1.25rem + .5vw, 1.7rem); line-height: 1; color: var(--tinta-70); }
.caso__linha--hoje b { font-size: clamp(1.95rem, 1.6rem + 1vw, 2.4rem); color: var(--laranja); }
.pontos { display: flex; gap: clamp(3px, .5vw, 6px); --cor: #9A9A9A; }
.caso__linha--hoje .pontos { --cor: var(--laranja); }
.pontos i { --f: var(--alvo); flex: none; width: clamp(9px, 2.3vw, 16px); aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(90deg, var(--cor) calc(var(--f) * 100%), #333 0); transition: --f .45s ease calc(var(--i) * 70ms); }
.casos.espera .caso:not(.vivo) .pontos i { --f: 0; }
.caso .fonte { margin-top: 2px; }
.casos__nav { display: flex; align-items: center; gap: 14px; }
.casos__seta { width: 46px; height: 46px; border: 2px solid var(--branco); background: transparent; color: var(--branco);
  font: 800 1.2rem/1 var(--f-texto); cursor: pointer; }
.casos__seta:hover:not(:disabled) { background: var(--laranja); border-color: var(--laranja); color: var(--preto); }
.casos__seta:disabled { opacity: .3; cursor: default; }
.casos__conta { font: 700 .9rem/1 var(--f-texto); font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: center; }
@media (prefers-reduced-motion: reduce) { .pontos i { transition: none; } }

/* o retorno dito pelo cliente: numero grande, separado do que a conta mediu */
.caso__retorno { display: grid; gap: 4px; padding-block: 14px; border-block: 1px solid rgba(255, 255, 255, .22); }
.caso__retorno p { margin: 0; }
.caso__retorno-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--f-display); line-height: 1; }
.caso__retorno-n b { font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem); color: var(--laranja); }
.caso__retorno-n b.de { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.7rem); color: var(--branco); }
.caso__retorno-n .seta { font: 800 1.1rem/1 var(--f-texto); color: var(--laranja); }
.caso__retorno-rot { font-weight: 600; font-size: .92rem; line-height: 1.35; }
.caso__retorno-fonte { font: 700 .7rem/1.2 var(--f-texto); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-70); }
/* tres casos lado a lado a partir de 1200px (abaixo disso, dois e as setas); fica no FIM pra vencer as regras base */
@media (min-width: 1200px) {
  .casos__trilho { grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px; }
  .caso { padding: 24px; }
  .caso__linha { grid-template-columns: 4em auto 1fr; gap: 8px; }
  .pontos { gap: 4px; }
  .pontos i { width: 12px; }
  .caso__linha--hoje b { font-size: 2.05rem; }
  .caso__linha b { font-size: 1.45rem; }
  /* mais de 3 casos: o 4o aparece cortado na borda, pra mostrar que tem mais */
  .casos.muitos .casos__trilho { grid-auto-columns: calc((100% - 3 * 20px) / 3.2); }
  .casos.muitos .pontos { gap: 3px; }
  .casos.muitos .pontos i { width: 11px; }
}
[data-carrossel].cabe .casos__nav { display: none; }

/* ===== S5: depoimentos em vídeo, carrossel vertical (05/10/2026, molde BMidia) ===== */
.depo { display: grid; gap: 18px; }
.depo__trilho { display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.depo__trilho::-webkit-scrollbar { display: none; }
.depo__trilho:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; }
@media (min-width: 640px) { .depo__trilho { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; } }
@media (min-width: 1024px) { .depo__trilho { grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; } }
.depo__card { scroll-snap-align: start; margin: 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.depo__video { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; margin: 0;
  border: 2px solid var(--preto); background: #111; cursor: pointer; overflow: hidden; }
.depo__video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.depo__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 3px var(--preto); display: grid; place-items: center;
  transition: transform .2s ease; }
.depo__play::before { content: ""; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--preto); }
.depo__video:hover .depo__play, .depo__video:focus-visible .depo__play { transform: translate(-50%, -50%) scale(1.08); }
.depo__iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 2px solid var(--preto); background: #000; }
.depo__quem { margin: 0; font-size: .9rem; line-height: 1.35; }
.depo__quem b { font-weight: 800; }
/* setas da S4 servem na S5; na banda clara, em preto */
.band--claro .casos__seta { border-color: var(--preto); color: var(--preto); }
@media (prefers-reduced-motion: reduce) { .depo__play { transition: none; } }

/* ===== S6: pra quem é, o bairro cheio de pino com a sua ficha (05/10/2026) ===== */
.quem { display: grid; gap: clamp(22px, 3vw, 40px); grid-template-areas: "h" "mapa" "listas"; }
@media (min-width: 940px) {
  .quem { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "h mapa" "listas mapa"; align-items: start; column-gap: clamp(32px, 4vw, 64px); }
}
.quem__h { grid-area: h; margin: 0; }
.quem__listas { grid-area: listas; display: grid; gap: 22px; }
.quem__listas h3 { margin: 0 0 10px; font: 800 1rem/1.3 var(--f-texto); }
.quem__listas ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.quem__listas li { position: relative; padding-left: 22px; line-height: 1.45; }
.quem__listas li::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; }
.quem__sim li::before { background: var(--laranja); }
.quem__nao li { color: var(--tinta-70); }
.quem__nao li::before { top: .72em; height: 2px; background: currentColor; }  /* traço, não caixa de marcar */
.quem__mapa { grid-area: mapa; position: relative; margin: 0; aspect-ratio: 640 / 560; max-width: 100%; overflow: hidden;
  border: 2px solid var(--preto); background: var(--branco); container-type: inline-size; }
.quem__mapa > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a ficha abre a direita do pino laranja (left 34%, top 62% no desenho) */
.ficha-g { position: absolute; left: calc(34% + 14px); bottom: calc(38% + 4px); width: clamp(178px, 44cqw, 250px);
  background: var(--branco); border: 2px solid var(--preto); padding: clamp(10px, 2.4cqw, 14px); display: grid; gap: 4px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .12); }
.ficha-g p { margin: 0; }
.ficha-g__nome { font: 800 clamp(.88rem, 3.2cqw, 1.05rem)/1.2 var(--f-texto); }
.ficha-g__nota { font-size: clamp(.74rem, 2.6cqw, .86rem); display: flex; align-items: center; gap: 4px; }
.ficha-g__nota b { font-weight: 700; }
.ficha-g__est { color: var(--laranja); letter-spacing: 1px; }
.ficha-g__est i { font-style: normal; color: #CFCFCF; }
.ficha-g__n, .ficha-g__meta { color: var(--tinta-70); }
.ficha-g__meta { font-size: clamp(.7rem, 2.4cqw, .8rem); }
.ficha-g__botoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; border-top: 1px solid #E3E3E3; padding-top: 8px; }
.ficha-g__botoes span { display: grid; justify-items: center; gap: 3px; font: 600 clamp(.6rem, 2.1cqw, .7rem)/1 var(--f-texto); }
.ficha-g__botoes svg { width: clamp(24px, 6cqw, 30px); height: clamp(24px, 6cqw, 30px); padding: 5px; border-radius: 50%;
  border: 1.5px solid var(--preto); fill: var(--preto); }
/* o Instagram, menor: o cliente confere antes de chamar */
.perfil-g { position: absolute; left: calc(34% + 14px); top: calc(62% + 10px); display: flex; align-items: center; gap: 8px;
  background: var(--branco); border: 2px solid var(--preto); padding: 6px 10px 6px 8px; font: 700 clamp(.66rem, 2.3cqw, .76rem)/1 var(--f-texto); }
.perfil-g__cam { width: 18px; height: 18px; border: 2px solid var(--preto); border-radius: 5px; position: relative; flex: none; }
.perfil-g__cam::after { content: ""; position: absolute; inset: 3px; border: 2px solid var(--preto); border-radius: 50%; }
.perfil-g__grade { display: flex; gap: 2px; }
.perfil-g__grade i { width: 10px; height: 10px; background: var(--laranja); }
.perfil-g__grade i:nth-child(2) { background: var(--preto); }

/* ===== S7: sem atalho, a linha do tempo (05/10/2026) ===== */
.etapas__h { margin: clamp(8px, 1.5vw, 16px) 0 18px; font: 800 clamp(1.1rem, 1rem + .5vw, 1.35rem)/1.25 var(--f-texto); }
.etapas { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px clamp(20px, 3vw, 40px); grid-template-columns: 1fr; counter-reset: etapa; }
@media (min-width: 760px) { .etapas { grid-template-columns: repeat(3, 1fr); } }
.etapas li { border-top: 3px solid currentColor; padding-top: 14px; display: grid; gap: 8px; align-content: start; min-width: 0; counter-increment: etapa; }
.etapas p { margin: 0; line-height: 1.45; max-width: 34ch; }
.etapas__quando { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); line-height: 1; }
.etapas__quando::before { content: counter(etapa, decimal-leading-zero) " · "; color: var(--laranja); }
.garantia { margin-top: clamp(30px, 3.6vw, 48px); border: 2px solid var(--laranja); color: inherit; padding: clamp(20px, 2.6vw, 32px) clamp(20px, 3vw, 40px);
  display: grid; gap: 8px; }
.garantia p { margin: 0; }
.garantia__rot { font: 800 .76rem/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--laranja); }
.garantia__txt { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.04; }
.garantia__txt > span { display: block; text-wrap: balance; }
.garantia__se { color: var(--laranja); }

/* ===== S7: perguntas que todo dono faz (05/10/2026) ===== */
.faq { display: grid; gap: clamp(22px, 3vw, 40px); }
@media (min-width: 940px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; } .faq__h { position: sticky; top: 110px; } }
.faq__h { margin: 0; }
.faq__lista { display: grid; border-bottom: 2px solid var(--preto); }
.faq__item { border-top: 2px solid var(--preto); }
.faq__q { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 16px 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); line-height: 1.05; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; flex: none; font: 800 1.6rem/1 var(--f-texto); color: var(--laranja); transition: transform .2s ease; }
.faq__item[open] > .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: #333; }
.faq__q:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; }
.faq__r { margin: 0 0 20px; max-width: 62ch; line-height: 1.55; }
.faq__r a { color: inherit; font-weight: 700; text-decoration-color: var(--laranja); text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }

/* ===== S9: a conversa, com o mapa como presente e o filtro no formulário (05/10/2026) ===== */
.conversa { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 940px) { .conversa { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.conversa__texto .intro { max-width: 48ch; }
.conversa__zap { margin: 22px 0 0; font-weight: 700; }
.conversa__zap a { color: var(--branco); text-decoration-color: var(--laranja); text-underline-offset: 4px; }
.form { display: grid; gap: 14px; }
.form__linha { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 560px) { .form__linha { grid-template-columns: 1fr 1fr; } }
.form__campo { display: grid; gap: 6px; min-width: 0; }
.form__campo span { font-weight: 700; font-size: .86rem; }
.form__campo input, .form__campo select { width: 100%; min-width: 0; font: 500 1rem/1.3 var(--f-texto); color: var(--preto); background: var(--branco);
  border: 2px solid var(--branco); border-radius: 0; padding: 0 12px; height: 50px; appearance: none; -webkit-appearance: none; }
.form__campo select { background-image: linear-gradient(45deg, transparent 50%, var(--preto) 50%), linear-gradient(-45deg, transparent 50%, var(--preto) 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 34px; }
.form__campo input:focus-visible, .form__campo select:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.form__campo input::placeholder { color: #8A8A8A; }
.form__btn { justify-self: start; margin-top: 6px; }
.form__btn:disabled { opacity: .6; cursor: default; }
.form__lgpd { margin: 0; font-size: .8rem; color: var(--tinta-70); }
.form__lgpd a { color: inherit; }
.form__ok { margin: 0; font-weight: 700; color: var(--laranja); }
.rodape__aviso { max-width: 70ch; }
.rodape { border-top: 1px solid rgba(255, 255, 255, .18); }  /* a conversa (preta) emendava no rodape (preto) */

/* ===== celular (08/10): a home montada pro dedo, nao o desktop espremido ===== */
/* topo: o botao fica fora do menu, que no celular vive fechado */
.topo__cta { display: none; }
@media (max-width: 940px) {
  .topo__in { gap: 10px; }
  .topo__cta { display: inline-flex; margin-left: auto; padding: 10px 12px; font-size: 0.8rem; white-space: nowrap; }
  .topo__cta + .menu-btn { margin-left: 0; }
}
.menu-btn { flex-shrink: 0; }
@media (max-width: 420px) { .marca img { height: 24px; } .topo__cta { padding: 9px 10px; font-size: 0.76rem; } }
@media (max-width: 380px) { .topo__in { gap: 8px; } .marca img { height: 21px; } .topo__cta { padding: 9px 8px; font-size: 0.7rem; } .menu-btn { padding: 7px; } }
/* casos: a etiqueta de ramo e cidade nao deixa "(RJ)" sozinho na linha */
.caso__quem { text-wrap: balance; }
/* formulario: botao na largura toda */
@media (max-width: 559px) { .form__btn { justify-self: stretch; } }
/* rodape: navegue e contato lado a lado */
@media (max-width: 859px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .rodape__grade > :first-child { grid-column: 1 / -1; }
}
/* v2 (15/10): a caixa gravada foi pra x 42-355, y 704-941 e ganhou Concorrentes e Avaliacoes. A HTML fica presa
   pela base e cresce pra cima quando a letra pede mais altura que a caixa gravada (no celular) */
.brigas__legenda { position: absolute; left: 2.6%; bottom: 12.9%; min-width: 22.2%; min-height: 22.6%; display: grid; align-content: center; gap: 3px;
  padding: 6px 10px 7px; background: var(--branco); border: 1px solid var(--linha); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.10); font: 600 clamp(0.62rem, 0.5rem + 0.35vw, 0.8rem)/1.25 var(--f-texto); color: var(--preto); }
.brigas__legenda b { font-weight: 800; margin-bottom: 1px; white-space: nowrap; }
.brigas__legenda span { display: flex; align-items: center; gap: 6px; }
.brigas__legenda i { width: 1.6em; height: 0.85em; background: var(--c); flex: 0 0 auto; }
.brigas__legenda svg { width: 1.6em; height: 1.1em; flex: 0 0 auto; }
.brigas__leg-pino { margin-top: 3px; }
.brigas__leg-pino svg { fill: var(--preto); }
.brigas__leg-estrela svg { fill: var(--laranja); }
@media (max-width: 600px) { .brigas__legenda { gap: 1px; padding: 4px 7px 5px; font-size: 0.56rem; } .brigas__legenda span { gap: 4px; } .brigas__leg-pino { margin-top: 1px; } }

/* ===== 3b: o bairro mudando de dono na rolagem (15/10/2026) =====
   Padrao (sem JS / reduzir movimento): parado, ja no depois. Com .rolagem: trilha alta, palco grudado abaixo do topo
   e o depois aberto por uma mascara radial com borda suave, centrada no pino; o anel laranja marca a frente. */
.dominio { --r: 108%; --d: 0px; --topo: 76px; --cx: 52.7%; --cy: 52%; --reserva: 15rem; --prop: 1442 / 1005; --prop-n: 1.4348; }
@media (min-width: 940px) { .dominio { --reserva: 20rem; } }
/* celular: mapa quadrado (cover corta as laterais) e o centro do circulo acompanha o pino: 0,5 + 0,027 x 1,4348 */
@media (max-width: 639px) { .dominio { --prop: 1 / 1; --prop-n: 1; --cx: 53.9%; } }
.dominio__palco { display: grid; gap: clamp(18px, 2.4vw, 30px); justify-items: center; }
.dominio__topo { margin-bottom: 0; }
.dominio__topo .intro { text-wrap: balance; }
.dominio__mapa { position: relative; margin: 0; width: min(100%, calc((100svh - var(--topo) - var(--reserva)) * var(--prop-n))); min-width: min(100%, 320px);
  aspect-ratio: var(--prop); overflow: hidden; background: var(--branco); }
.dominio__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  pointer-events: none; user-select: none; -webkit-user-drag: none; }
.dominio__depois {
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--r) - 7%), transparent var(--r));
          mask-image: radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--r) - 7%), transparent var(--r)); }
.dominio__frente { position: absolute; left: var(--cx); top: var(--cy); width: var(--d); height: var(--d); transform: translate(-50%, -50%);
  border: 2px solid var(--laranja); border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.dominio.rolagem:not(.vazio):not(.cheio) .dominio__frente { opacity: .9; }
.dominio__selo { transition: opacity .3s ease; }
.dominio__selo--antes { opacity: 0; }
.dominio.rolagem .dominio__selo--depois { opacity: 0; }
.dominio.rolagem.vazio .dominio__selo--antes, .dominio.rolagem.cheio .dominio__selo--depois { opacity: 1; }
/* trilha: a rolagem extra que move o mapa; o palco gruda logo abaixo do topo fixo */
.dominio.rolagem { padding-top: 0; }
.dominio__numeros .ad__placar { margin-top: clamp(4px, 1.2vw, 16px); }
.dominio.rolagem .dominio__numeros { position: relative; margin-top: calc(var(--sobra, 0px) * -1); }
.dominio.rolagem .dominio__trilho { height: 260svh; }
.dominio.rolagem .dominio__palco { position: sticky; top: var(--topo); height: calc(100svh - var(--topo)); align-content: center;
  padding-block: clamp(16px, 3vh, 36px); }
@media (max-width: 939px) { .dominio.rolagem .dominio__trilho { height: 220svh; } }

/* ===== 16/10: mais leve (Lucas: "grotesco", "linha grossa", "site dos anos 2000") =====
   Mesmas cores e fontes. Linhas finas no lugar das molduras pretas de 2px, cantos arredondados em foto, cartao e
   botao, e os titulos de secao centralizados. Pra voltar: apagar este bloco (backup em scratchpad/pb-antes-suavizar.css). */
:root { --raio: 14px; --raio-p: 8px; }
/* topo: uma linha fina */
.topo { border-bottom: 1px solid var(--linha); }
.topo__in { min-height: 75px; }  /* topo segue com 76px no total: os paineis e o mapa grudam em 76 */
@media (max-width: 940px) { .nav { border-bottom: 1px solid var(--linha); } }
.menu-btn { border: 1px solid var(--linha); border-radius: var(--raio-p); }
/* botoes */
.btn { border-radius: var(--raio-p); }
/* titulos de secao centralizados (as secoes em duas colunas, pra quem e e conversa, ficam como estao) */
.secao-topo--centro .h-secao { max-width: 20ch; }
.secao-topo--centro .intro { text-wrap: balance; }
/* fotos e quadros */
.pilha__quadro, .dominio__mapa, .quem__mapa { border-radius: var(--raio); }
.quem__mapa { border: 1px solid var(--linha); }
.ad__selo { border-width: 1px; border-radius: 999px; padding: 7px 12px; }
/* placar: sem a tarja preta */
.ad__grupo { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.ad__grupo-h { background: transparent; color: var(--tinta-70); border-bottom: 1px solid var(--linha); padding-block: 14px; }
/* casos */
.caso { border: 1px solid var(--linha-i); border-radius: var(--raio); background: rgba(255, 255, 255, .03); }
.casos__seta { border: 1px solid var(--linha-i); border-radius: 50%; }
.band--claro .casos__seta { border-color: var(--linha); }
/* depoimentos */
.depo__video, .depo__iframe { border: 0; border-radius: var(--raio); }
.depo__play { box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
/* ficha do Google e Instagram no mapa (S6): cartao de app, nao caixa de papel */
.ficha-g { border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .14); }
.ficha-g__botoes svg { border-width: 1px; border-color: var(--linha); }
.perfil-g { border: 1px solid rgba(0, 0, 0, .08); border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
/* FAQ: titulo em cima, centralizado, e a lista no meio com linhas finas */
@media (min-width: 940px) { .faq { grid-template-columns: minmax(0, 1fr); justify-items: center; } .faq__h { position: static; } }
.faq__h { text-align: center; max-width: 20ch; margin-inline: auto; }
.faq__lista { width: 100%; max-width: 780px; margin-inline: auto; border-bottom: 1px solid var(--linha); }
.faq__item { border-top: 1px solid var(--linha); }
.faq__q { padding: 20px 0; }
/* formulario */
.form__campo input, .form__campo select { border-radius: var(--raio-p); }

/* ===== 16/10: placas flutuantes (Lucas escolheu entre 3 direcoes) =====
   A pagina deixa de ser uma pilha de faixas de parede a parede. Fundo cinza-concreto continuo; as secoes que
   precisam de peso viram placas de canto redondo com margem (hero, logos, casos, pra quem e, conversa, rodape,
   os paineis das brigas); as outras ficam soltas no fundo. Titulos de secao em caixa normal (caixa alta so na
   frase do topo e na assinatura do rodape). Pra voltar: apagar este bloco (backup scratchpad/pb-antes-placas.css). */
:root { --fundo: #EDEDEA;  /* cinza-concreto, o mesmo tom das ruas nos mapas (o creme saiu: paleta batida) */
   --placa-m: clamp(8px, 1.3vw, 20px); --placa-r: clamp(20px, 2.2vw, 34px); --placa-gap: clamp(8px, 1.1vw, 16px); }
body { background: var(--fundo); }
.topo { background: var(--fundo); }
@media (max-width: 940px) { .nav { background: var(--fundo); } }
/* placas */
main > section { margin-inline: var(--placa-m); border-radius: var(--placa-r); }
main > section + section { margin-top: var(--placa-gap); }
.band--hero { margin-top: var(--placa-gap); min-height: calc(100svh - 76px - 2 * var(--placa-gap)); }
#mudancas, #quem, #conversa { overflow: clip; }
/* soltas no fundo: as secoes de titulo + conteudo e as que grudam na rolagem (sem overflow, senao o sticky quebra) */
.brigas-s, .dominio, #depoimentos, #perguntas { background: transparent; }
/* rodape tambem e placa */
.rodape { margin: var(--placa-gap) var(--placa-m) var(--placa-m); border-radius: var(--placa-r); border-top: 0; }
/* paineis das brigas: cada um e uma placa; o respiro entre eles mostra o fundo */
.pilha__painel { background: transparent; padding-block: calc(var(--placa-gap) / 2); }
.pilha__miolo { border-radius: var(--placa-r); overflow: hidden; }
.pilha__painel--claro .pilha__miolo { box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
/* titulos em caixa normal, mesma fonte */
.h-secao { text-transform: none; letter-spacing: 0; line-height: 1; }
.pilha__texto h3 { text-transform: none; line-height: 1; }
/* FAQ: a lista vira uma placa branca; a pergunta em Inter, como numa conversa */
.faq__lista { background: var(--branco); border: 0; border-radius: var(--placa-r); padding: 6px clamp(18px, 2.6vw, 36px); }
.faq__item { border-top: 1px solid var(--linha); }
.faq__item:first-child { border-top: 0; }
.faq__q { font: 700 clamp(1.02rem, .97rem + .3vw, 1.2rem)/1.35 var(--f-texto); text-transform: none; letter-spacing: -.01em; align-items: center; }
.faq__q::after { font-size: 1.4rem; }
.faq__q:hover { color: var(--preto); opacity: .75; }
/* placar e caixas brancas soltas no fundo: sem linha, so a placa */
.ad__grupo { border: 0; background: var(--branco); }

/* ===== 21/10: FAQ em formato de conversa (referencia: FAQ da Strawberry, medidas lidas do CSS deles) =====
   Pergunta e balao branco na esquerda com ponta no canto de baixo; a resposta abre logo embaixo como balao preto,
   na direita. Raio 28, padding 14/22, sombra suave: do Strawberry. Cor e fonte seguem o brandbook (preto puro, Inter).
   Uma aberta por vez (atributo name="faq" nos <details>). Sem JS. Pra voltar: apagar este bloco e o .faq__lado do HTML. */
.faq__lado { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.faq__lado .faq__h { max-width: 20ch; }
.faq__sub { margin: 0; color: var(--tinta-70, rgba(0, 0, 0, .65)); line-height: 1.5; }
@media (min-width: 940px) {
  .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); justify-items: stretch; align-items: start; gap: clamp(32px, 5vw, 72px); }
  .faq__lado { align-items: flex-start; text-align: left; position: sticky; top: 110px; }
  .faq__lado .faq__h { text-align: left; margin-inline: 0; max-width: 14ch; }
}
.faq__lista { background: transparent; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
@media (min-width: 940px) { .faq__lista { margin-inline: 0; } }
.faq__item { border: 0; display: block; }
.faq__item:first-child { border: 0; }
.faq__q { display: block; width: fit-content; max-width: 92%; position: relative; padding: 14px 22px; background: var(--branco); border: 2px solid transparent;
  border-radius: 28px; box-shadow: 0 10px 34px rgba(15, 23, 42, .06); transition: transform .15s ease, border-color .15s ease; }
.faq__q::after, .faq__r::after { content: ""; position: absolute; bottom: 0; width: 14px; height: 14px; font-size: 0; transform: none; transition: none; }
.faq__q::after { left: -5px; background: var(--branco); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.faq__q:hover { opacity: 1; transform: translateY(-1px); }
.faq__item[open] > .faq__q { border-color: var(--preto); box-shadow: none; }
.faq__item[open] > .faq__q::after { content: none; }
.faq__r { position: relative; width: fit-content; max-width: min(94%, 46ch); margin: 10px 0 14px auto; padding: 14px 22px; background: var(--preto); color: var(--branco);
  border-radius: 28px; line-height: 1.5; animation: faq-resposta .28s ease both; }
.faq__r::after { right: -5px; background: var(--preto); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.faq__r a { text-decoration-color: var(--laranja); }
@keyframes faq-resposta { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .faq__q { max-width: 96%; padding: 13px 20px; } .faq__r { max-width: 96%; padding: 13px 20px; } }
@media (prefers-reduced-motion: reduce) { .faq__r { animation: none; } .faq__q { transition: none; } }

/* ===== 21/10: mural (resultados + videos + artigos num trilho so), molde da secao "Used by..." da superpower.com =====
   Medidas lidas do CSS deles: cards de mesma altura (~394 la, 470 aqui por causa do caso com numeros), raio 11-12px,
   gap 15px, larguras diferentes por tipo, texto em cima de degrade no pe da foto, trilho que sangra pra direita.
   Cor e fonte seguem o brandbook. Pra voltar: apagar este bloco e restaurar _bk-mural-pre.html + _bk-mural-pre-pb.css. */
#mudancas { background: transparent; overflow: visible; }
.mural__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3.6vw, 48px); }
.mural__topo .secao-topo { margin: 0; max-width: 62ch; }
.mural__topo .h-secao { max-width: none; }
.mural__nav { flex: none; }
@media (max-width: 700px) { .mural__nav { display: none; } }
.mural { --lado: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); }
.mural__trilho { display: flex; align-items: stretch; gap: 16px; overflow-x: auto; padding-inline: var(--lado); scroll-padding-inline: var(--lado);
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
.mural__trilho::-webkit-scrollbar { display: none; }
.mural__trilho { cursor: grab; }
.mural__trilho.arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.mural__card img, .mural__card a { -webkit-user-drag: none; }
.mural__trilho:focus-visible { outline: 3px solid var(--laranja); outline-offset: -3px; }
.mural__card { flex: none; position: relative; margin: 0; min-height: 470px; border-radius: 12px; overflow: hidden; scroll-snap-align: start;
  background: #111; color: var(--branco); text-decoration: none; }
/* foto de capa com degrade no pe e o texto por cima */
.mural__card--video::after, .mural__card--artigo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 38%, transparent 62%); }
.mural__card--artigo::after { background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .72) 40%, rgba(0, 0, 0, .12) 78%); }
/* video: vertical 9:16 */
.mural__card--video { width: 264px; display: block; }
.mural__card--video .depo__video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.mural__card--video .depo__play { width: 54px; height: 54px; z-index: 1; }
.mural__card--video .depo__play::before { border-width: 9px 0 9px 15px; margin-left: 4px; }
.mural__card--video .depo__quem { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; pointer-events: none;
  color: var(--branco); font-size: .95rem; line-height: 1.35; }
.mural__card--video .depo__iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
/* artigo: largo, foto cheia, tag + titulo + chamada */
.mural__card--artigo { width: 420px; display: flex; align-items: flex-end; }
.mural__card--artigo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mural__card--artigo:hover img, .mural__card--artigo:focus-visible img { transform: scale(1.03); }
.mural__card--artigo:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.mural__txt { position: relative; z-index: 1; display: grid; gap: 10px; padding: 22px 22px 20px; }
.mural__tag { font: 800 .72rem/1.2 var(--f-texto); letter-spacing: .09em; text-transform: uppercase; color: var(--laranja); }
.mural__tit { margin: 0; font: 700 clamp(1.15rem, 1.05rem + .45vw, 1.4rem)/1.25 var(--f-texto); letter-spacing: -.01em; text-wrap: balance; }
.mural__ler { font: 700 .88rem/1 var(--f-texto); opacity: .85; }
.mural__card--artigo:hover .mural__ler { opacity: 1; text-decoration: underline; text-decoration-color: var(--laranja); text-underline-offset: 4px; }
/* caso com numeros: card preto, mesmo conteudo de antes */
.mural__card--caso { width: 372px; padding: 24px; background: var(--preto); border: 0; align-content: start;
  --linha: var(--linha-i); --tinta-70: var(--tinta-70-i); }
.mural .caso__linha { grid-template-columns: 4.2em auto 1fr; gap: 8px; }
.mural .pontos { gap: 4px; }
.mural .pontos i { width: 12px; }
.mural .caso__linha--hoje b { font-size: 2.05rem; }
.mural .caso__linha b { font-size: 1.45rem; }
.mural.espera .caso:not(.vivo) .pontos i { --f: 0; }
@media (max-width: 700px) {
  .mural__trilho { gap: 12px; }
  .mural__card { min-height: 440px; }
  .mural__card--video { width: 70vw; max-width: 264px; }
  .mural__card--artigo { width: 82vw; max-width: 420px; }
  .mural__card--caso { width: 84vw; max-width: 372px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .mural__card--artigo img { transition: none; } }

/* ===== 21/10: ancora do menu ===== o menu fixo tem ~76px e o link caia com o topo da secao embaixo dele, comendo o
   respiro e deixando o titulo colado na barra. Compensa a altura do menu em todo salto de ancora (menu, rodape, CTAs). */
html { scroll-padding-top: 76px; }

/* 21/10: painel 5 com o mapa de zona de calor (briga-5.webp). A legenda de cores (Alto/Medio/Baixo) saiu, porque
   o mapa novo e um degrade laranja; sobraram so Concorrentes e Avaliacoes, entao a caixa nao precisa da altura minima. */
#briga-5 .brigas__legenda { min-height: 0; min-width: 0; padding-block: .55em; }

/* ===== 21/10: menos vao entre as secoes (Lucas: "tem que ficar mais conectado um no outro") =====
   1) As secoes soltas no fundo tinham padding de banda cheio (~78px em cima e embaixo, ~160px entre uma e outra).
      Agora o respiro entre elas e de ~60-80px no computador e ~45-60px no celular.
   2) O palco do mapa antes/depois tinha a altura da tela inteira com o conteudo no meio (sobravam ~120px em branco no
      computador e ~170px no celular, em cima e embaixo do mapa). Agora tem a altura do conteudo e gruda no meio da
      tela; a altura vem do JS em --alt. Pra voltar: apagar este bloco e restaurar _bk-espacos-pre*. */
#brigas { padding-top: clamp(24px, 3vw, 44px); }  /* 22/10: era clamp(32px, 4vw, 56px) (Lucas: reduzir o respiro acima do titulo) */
#dominio { padding-bottom: 0; }
#mudancas { padding-block: clamp(28px, 3.2vw, 48px) clamp(8px, 1vw, 16px); }
#perguntas { padding-block: clamp(28px, 3.2vw, 48px) clamp(36px, 4vw, 56px); }
.dominio.rolagem .dominio__palco { height: auto; top: max(var(--topo), calc((100svh - var(--alt, 100svh)) / 2)); padding-block: clamp(8px, 1.6vh, 20px); }

/* ===== 22/10: texto centralizado no celular, no site inteiro (Lucas) =====
   Vale ate 1023px, o mesmo corte em que os paineis ja empilham em uma coluna (celular e tablet). Computador segue como estava.
   Centraliza o texto e, onde o item e flex/grid, tambem o conjunto (chips, botoes, listas). So vale em body.pg-centro (home e Sobre); o blog fica de fora (texto longo, segue à esquerda). Pra voltar: apagar este bloco. */
@media (max-width: 1023px) {
  body.pg-centro main, body.pg-centro .rodape, body.pg-centro .topo { text-align: center; }
  body.pg-centro main :is(h1, h2, h3, h4, p, li, figcaption, blockquote, summary, dt, dd, small) { text-align: center; }
  body.pg-centro main :is(ul, ol):not(.track) { list-style-position: inside; padding-left: 0; }
  body.pg-centro .pilha__rotulo, body.pg-centro .brigas__itens, body.pg-centro .btn-linha, body.pg-centro .acoes, body.pg-centro .hero__acoes { justify-content: center; }
  body.pg-centro .mural__topo, body.pg-centro .rodape__base { justify-content: center; }
  body.pg-centro .rodape .marca { display: block; }
  body.pg-centro .rodape .marca img { margin-inline: auto; }
  body.pg-centro .rodape__base, body.pg-centro .rodape__base > * { text-align: center; }
  body.pg-centro .pilha__texto > :is(h3, p) { margin-inline: auto; }
  body.pg-centro .tm-rot { justify-content: center; }
  body.pg-centro .tm-trilha li { justify-content: center; }
  body.pg-centro .tm-trilha .tm-ico { margin-inline: auto; }
  body.pg-centro .cta-fim__txt { align-items: center; }
  body.pg-centro .cta-fim__btn { margin-inline: auto; }
}

/* 22/10: texto do painel mais perto do topo no celular (Lucas: "ta mto pra baixo"). O painel ocupa a tela inteira e o conteudo
   vinha centralizado na vertical, entao a sobra de altura abria um vao em cima. Agora o conteudo comeca ~56px abaixo do topo e a sobra fica embaixo. */
@media (max-width: 1023px) and (min-height: 560px) {
  .pilha__grade { justify-content: flex-start; }
  .pilha__miolo { padding-top: clamp(40px, 7svh, 64px); }
}

/* 22/10: antes/depois no celular, menos vao (Lucas: "essa parte ta estranha, reduzir o espacamento"). O mapa e quadrado e nao
   cresce alem da largura da tela, entao com o palco centrado na vertical sobrava um bloco em branco em cima e outro embaixo, e a
   rolagem do trilho (220svh) arrastava isso por muito tempo. Agora o trilho e mais curto (a animacao anda mais rapido) e o palco
   gruda mais perto do topo (1/3 da sobra em cima, 2/3 embaixo, em vez de metade e metade). */
@media (max-width: 939px) {
  .dominio.rolagem .dominio__trilho { height: 150svh; }
  .dominio.rolagem .dominio__palco { top: max(var(--topo), calc((100svh - var(--alt, 100svh)) / 3)); }
}

/* 22/10: FAQ no celular, "Nao achou a sua? + botao" depois dos baloes (Lucas). O titulo continua em cima; o aviso e o botao
   descem pra depois da ultima pergunta. .faq__lado vira display: contents so pra seus filhos entrarem na ordem do grid. */
@media (max-width: 939px) {
  .faq__lado { display: contents; }
  .faq__h { order: 0; justify-self: center; }
  .faq__lista { order: 1; }
  .faq__sub { order: 2; text-align: center; justify-self: center; }
  .faq__lado .btn { order: 3; justify-self: center; }
}

/* 22/10: titulo do FAQ em uma linha so no celular, com mais ar embaixo (Lucas). Tamanho pela largura da tela pra nao quebrar. */
@media (max-width: 939px) {
  .faq__h { max-width: none; white-space: nowrap; font-size: clamp(1.6rem, 10vw, 3rem); margin-bottom: clamp(10px, 3vw, 22px); }
}