/* ============ NAV ============
   Barra branca, logo ao centro, links dos dois lados — como na referencia. */
.nav { position: sticky; top: 0; z-index: 100; background: var(--branco);
  border-bottom: 1px solid var(--linha); }
/* min-height derivado do token: e o mesmo valor que o hero subtrai para caber na
   primeira tela. Mudar aqui na mao, sem mexer no --nav-h, quebra a dobra. */
.nav__interno {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1.5rem; min-height: calc(var(--nav-h) - 1px); padding-block: .9rem;
}
.nav__lista { display: flex; gap: 2rem; list-style: none; padding: 0; align-items: center; }
.nav__lista--dir { justify-content: flex-end; }
.nav__lista a {
  text-decoration: none; font-size: .6875rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--marrom);
  transition: color var(--transicao);
}
.nav__lista a:hover { color: var(--dourado-texto); }
.nav__logo { display: block; justify-self: center; }
.nav__logo img { height: 30px; width: auto; border-radius: 0; }
.nav__movel { display: none; }
@media (max-width: 940px) {
  .nav__interno { min-height: 64px; }
  .nav__lista { display: none; }
  .nav__logo img { height: 24px; }
  .nav__movel { display: flex; justify-content: flex-end; }
}

/* ============ HERO ============
   Bloco de cor a esquerda, foto a direita atravessando a borda do bloco.
   A foto fica NA GRADE, nao absoluta: a altura da linha passa a ser governada
   pelo mais alto dos dois e a foto nunca invade a secao de baixo (aconteceu). */
.hero { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) 0; }
.hero__quadro {
  position: relative; display: grid;
  grid-template-columns: 1fr minmax(240px, 330px);
  align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
/* camada de cor: vai da esquerda ate 76%, e a foto a atravessa */
.hero__quadro::before {
  content: ""; position: absolute; inset: 0 24% 0 0; background: var(--creme); z-index: 0;
}
.hero__bloco {
  position: relative; z-index: 1;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0
           clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2.5vw, 4rem);
}
.hero__bloco p { max-width: 38ch; font-size: .9375rem; }
.hero h1 { margin-bottom: 1.1rem; max-width: 12ch; }
.hero .botao { margin-top: 1.9rem; }
.hero__foto { position: relative; z-index: 1; }
.hero__foto img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
@media (max-width: 900px) {
  .hero__quadro { grid-template-columns: 1fr; gap: 0; }
  .hero__quadro::before { inset: 0 0 22% 0; }
  .hero__bloco { padding: clamp(2.2rem, 2rem + 2vw, 3rem); padding-bottom: 2rem; }
  .hero__foto { width: min(78%, 320px); margin: 0 auto; }
  .hero h1 { max-width: none; }
}

/* ============ INTRO CENTRADA ============ */
.intro { max-width: 62ch; margin-inline: auto; }
.intro p { margin-top: .9rem; }

/* ============ NUMEROS ============ */
.numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  margin-top: var(--esp-bloco); padding-top: var(--esp-bloco); border-top: 1px solid var(--linha);
}
.numeros__item { text-align: center; }
.numeros dt {
  font-family: var(--fonte-titulo); font-size: var(--t-numero);
  line-height: 1; color: var(--marrom);
}
.numeros dd {
  margin: .6rem 0 0; font-size: .625rem;
  text-transform: uppercase; letter-spacing: .2em; color: var(--dourado-texto);
}
@media (max-width: 700px) { .numeros { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } }

/* ============ FAIXA ATRAS DAS FOTOS ============
   O gesto central do estilo: uma faixa de cor corre por tras da metade de baixo
   das fotos, e elas atravessam a fronteira entre o branco e a cor. */
.com-faixa { position: relative; padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.com-faixa::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 100vw; background: var(--creme); z-index: 0;
}
.com-faixa > * { position: relative; z-index: 1; }
/* a faixa termina ABAIXO dos botoes, como na referencia — nao no meio do texto */
.faixa-baixa::before { top: 44%; bottom: 0; }

/* ============ BRONZES ============ */
.bronzes__grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 1rem + 1vw, 2rem); margin-top: var(--esp-bloco);
}
/* coluna flex + botao com margin-top:auto: os 3 botoes alinham na mesma base
   mesmo com descricoes de tamanhos diferentes. */
.bronze { text-align: center; display: flex; flex-direction: column; }
.bronze__foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.bronze h3 { margin-top: 1.4rem; }
.bronze__tagline { font-size: .8125rem; color: var(--dourado-texto); margin: .3rem auto 0; }
.bronze__desc { margin: .9rem auto 0; font-size: .875rem; max-width: 34ch; }
.bronze__tempo {
  margin: 1.1rem auto 0; font-family: var(--fonte-titulo);
  font-size: 1.05rem; color: var(--marrom);
}
.bronze__tempo { margin-top: auto; padding-top: 1.1rem; }
.bronze .botao { margin: 1.2rem auto 0; align-self: center; }
@media (max-width: 860px) {
  .bronzes__grade { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; gap: 3rem; }
  .faixa-baixa::before { top: 18%; bottom: 18%; }
}

/* ============ DUAS COLUNAS: foto + texto ============ */
.dupla {
  display: grid; grid-template-columns: .85fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
}
.dupla--invertida { grid-template-columns: 1fr .85fr; }
.dupla--invertida .dupla__foto { order: 2; }
.dupla__foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover;
  object-position: var(--foco, center); }
/* 3ª e ultima ocorrencia da mesma doenca (hero, Sobre e agora as duas .dupla):
   com `aspect-ratio` a altura da secao vem da LARGURA da janela e ignora a
   altura dela — 814px num viewport util de 678px. Este bloco atende AS DUAS
   secoes que usam o componente (#diferencial e #casa-bronzear), porque a causa e
   do componente, nao da secao. Travado por tools/audit_dobras.py. */
@media (min-width: 901px) {
  .dupla__foto img {
    aspect-ratio: auto;
    height: min(52vh, 520px);
    height: min(52svh, 520px);
  }
}
.dupla__texto p { margin-top: 1rem; }
.dupla__texto .destaque {
  font-family: var(--fonte-titulo); font-size: 1.15rem;
  color: var(--marrom); margin-top: 1.6rem;
}
@media (max-width: 860px) {
  .dupla, .dupla--invertida { grid-template-columns: 1fr; }
  .dupla--invertida .dupla__foto { order: 0; }
}

/* ============ BLOCO DE COR CHEIO ============ */
.bloco-cor { background: var(--creme); padding-block: var(--esp-secao); }
.bloco-cor--suave { background: var(--creme-suave); }

/* ============ JORNADA ============ */
.jornada__lista {
  list-style: none; padding: 0; margin-top: var(--esp-bloco);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 2.2rem;
}
.jornada__lista li { text-align: center; }
.jornada__num {
  display: block; font-family: var(--fonte-titulo);
  font-size: 1.9rem; color: var(--dourado-texto); line-height: 1;
}
.jornada__lista h3 { margin-top: .7rem; font-size: 1.1rem; }
.jornada__lista p { margin: .4rem auto 0; font-size: .8125rem; max-width: 30ch; }
@media (max-width: 860px) { .jornada__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .jornada__lista { grid-template-columns: 1fr; gap: 2rem; } }

/* ============ SELO E LISTA ============ */
.lista-limpa { list-style: none; padding: 0; margin-top: 1.2rem; display: grid; gap: .45rem; }
.lista-limpa li { padding-left: 1.4rem; position: relative; font-size: .875rem; }
.lista-limpa li::before {
  content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 1px;
  background: var(--dourado);
}

/* ============ UNIDADES ============ */
.unidades__grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; margin-top: var(--esp-bloco);
}
.unidade { padding: 2rem 1.6rem; text-align: center; background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio-foto);
  display: flex; flex-direction: column; transition: var(--transicao); }
.unidade:hover { border-color: var(--dourado); }
.unidade h3 { font-size: 1.35rem; }
.unidade__uf {
  display: block; font-family: var(--fonte-corpo); font-style: normal;
  font-size: .5625rem; font-weight: 700; letter-spacing: .2em;
  color: var(--dourado-texto); margin-top: .4rem;
}
.unidade__modalidade { margin-top: .8rem; font-size: .75rem; }
.unidade__endereco, .unidade__horario { margin-top: .5rem; font-size: .8125rem; }
/* ⚠️ CARD ORFAO. Com 7 unidades em 3 colunas o ultimo card fica sozinho na
   linha, encostado a esquerda, com dois vaos vazios do lado — foi o que a
   entrada de Brasilia (21/08) criou. A regra so dispara quando o ULTIMO card
   e tambem o primeiro da sua linha (indice 3n+1), entao ela se desliga sozinha
   quando a base voltar a 6 ou chegar a 9. Nao mexer na contagem na mao.
   ⚠️ E PRECISA ficar presa a faixa de 3 colunas. Solta, ela valia tambem no
   celular, onde a grade e de UMA coluna: o `grid-column: 2` inventava uma
   segunda coluna e o documento estourava para 559px num viewport de 390.
   Quem pegou foi o tools/shoot.py, no mesmo minuto. */
@media (min-width: 901px) {
  .unidades__grade > .unidade:last-child:nth-child(3n+1) { grid-column: 2; }
}
.unidade .botao { margin-top: 1.5rem; align-self: center; }
@media (max-width: 900px) { .unidades__grade { grid-template-columns: repeat(2, 1fr); } }

/* ---------- UNIDADES: GRADE NO DESKTOP, CARROSSEL NO CELULAR ----------
   A grade usa as duas classes: `unidades__grade` (a grade de sempre) e
   `galeria__trilho` (o trilho que rola). ⚠️ O trilho vence por vir depois no
   arquivo, entao ACIMA de 620px e preciso devolver a grade explicitamente —
   com 2 classes na regra, para ganhar do `.galeria__trilho` de 1 classe.
   Acima de 620px a seta tambem some: nao ha o que rolar numa grade. */
@media (min-width: 621px) {
  .galeria--unidades .galeria__trilho {
    display: grid; overflow: visible; scroll-snap-type: none;
    /* o gap vem do .galeria__trilho (.75rem) e apertaria a grade do desktop,
       que sempre teve 1.25rem. Devolvido aqui. */
    gap: 1.25rem;
  }
  .galeria--unidades .galeria__seta { display: none; }
}
@media (max-width: 620px) {
  /* ⚠️ O `max-width: 340px` da versao empilhada tinha de sair: num trilho ele
     estrangula a area rolavel inteira, nao o card. Quem define a largura agora
     e o proprio card. 78vw deixa a proxima unidade espiando na borda — e essa
     fatia e a unica pista de que da para arrastar. */
  .galeria--unidades .galeria__trilho { max-width: none; margin-inline: 0; }
  .galeria--unidades .unidade { flex: 0 0 78vw; scroll-snap-align: center; }
}

/* ============ MODALIDADE ============ */
.modalidade__grade {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: var(--esp-bloco);
}
.modalidade__item {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-foto);
  padding: 2.4rem 2rem; text-align: center; display: flex; flex-direction: column;
}
.modalidade__item p { margin: .9rem auto 0; max-width: 34ch; font-size: .875rem; }
.modalidade__nota {
  font-size: .625rem; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; color: var(--dourado-texto);
}
.modalidade__item .botao { margin-top: 1.6rem; align-self: center; }
@media (max-width: 760px) { .modalidade__grade { grid-template-columns: 1fr; } }

/* ============ GALERIAS (placeholder declarado) ============ */
/* ============ GALERIAS DE FOTO ============ */
/* ---------- GALERIA COM ROLAGEM (substituiu a tira de 5 fotos em 21/08) ----------
   ⚠️ Quem rola e o TRILHO, nao a pagina: o overflow-x vive no <ul>, entao o
   documento continua com a largura do viewport e o portao do shoot.py (que
   reprova overflow horizontal do documento) segue verde.
   `scrollbar-width: none` some com a barra sem tirar a rolagem — a navegacao
   por teclado continua, porque o <ul> tem tabindex="0". */
.galeria { position: relative; margin-top: var(--esp-bloco); }
.galeria__trilho {
  display: flex; gap: .75rem; list-style: none; padding: 0; margin: 0;
  /* ⚠️ `safe center` e nao `center`. Com `center` puro, um trilho que
     TRANSBORDA empurra o comeco para fora da area rolavel e as primeiras fotos
     ficam inalcançaveis — some conteudo sem nenhum aviso. O `safe` manda o
     navegador cair para `start` exatamente nesse caso, entao a galeria curta
     (Antes e depois, 3 fotos) fica centrada e as longas seguem rolando do
     comeco. Navegador antigo que nao entende `safe` descarta a declaracao
     inteira e cai em flex-start, que era o comportamento anterior. */
  justify-content: safe center;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.galeria__trilho::-webkit-scrollbar { display: none; }
.galeria__trilho:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.galeria__trilho > li { flex: 0 0 clamp(150px, 20vw, 250px); scroll-snap-align: start; }
.galeria__trilho img {
  display: block; width: 100%; aspect-ratio: var(--proporcao, 3/4); object-fit: cover;
  border-radius: var(--raio-foto);
}
/* ⚠️ A galeria de ANTES E DEPOIS mostra a imagem INTEIRA, nao recortada: os
   rotulos "ANTES" e "DEPOIS" ficam na BASE da arte, e o corte de 3/4 comeria
   exatamente eles. 4/5 e a proporcao nativa das 3 pecas (1080x1350), entao aqui
   o `cover` nao descarta um pixel. Se chegar arte com outra proporcao, medir
   antes de jogar nesta galeria. */
.galeria--integra { --proporcao: 4/5; }
/* As setas ficam POR CIMA das bordas do trilho. `pointer-events` so no botao,
   para o vao entre eles nao roubar o arrasto do dedo. */
.galeria__seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--branco); color: var(--acento);
  border: 1px solid var(--linha); box-shadow: var(--sombra-suave);
  font-size: 1.1rem; cursor: pointer; transition: var(--transicao);
}
.galeria__seta:hover { border-color: var(--acento); color: var(--acento-escuro); }
/* ⚠️ `visibility: hidden` ALEM do opacity, e nao no lugar dele. Medido em
   21/08: a seta desligada da galeria curta continuava PINTADA na captura,
   com getComputedStyle devolvendo opacity 0 — o estilo dizia invisivel e o
   pixel mostrava o contrario. Com visibility a peca sai do render de vez, e
   de quebra sai da arvore de acessibilidade. O opacity fica porque e ele que
   da a transicao suave; a visibility troca em degrau no fim dela. */
.galeria__seta[disabled] { opacity: 0; visibility: hidden; pointer-events: none; }
.galeria__seta--ant  { left: -14px; }
.galeria__seta--prox { right: -14px; }
@media (max-width: 700px) {
  .galeria__trilho > li { flex-basis: 46vw; }
}
/* ⚠️ A seta some por TIPO DE PONTEIRO, nao por largura. Medido em 21/08: numa
   janela ESTREITA de navegador de mesa (390px, ponteiro fino, sem toque) a
   regra por largura escondia a seta, e como a barra de rolagem do trilho
   tambem e oculta (`scrollbar-width: none`), sobrava ZERO jeito de avancar a
   galeria — nem dedo, nem seta, nem barra. So `shift + roda`, que ninguem
   descobre. Com `hover: none` + `pointer: coarse` a seta some so onde existe
   dedo para rolar, que era a intencao original. */
@media (hover: none) and (pointer: coarse) {
  .galeria__seta { display: none; }
}

/* ============ FAQ ============ */
.faq__lista { max-width: 62ch; margin: var(--esp-bloco) auto 0; text-align: left; }
.faq__lista details { border-bottom: 1px solid var(--linha); }
.faq__lista summary {
  padding: 1.25rem 2.2rem 1.25rem 0; cursor: pointer; list-style: none;
  font-family: var(--fonte-titulo); font-size: 1.15rem;
  color: var(--marrom); position: relative; transition: color var(--transicao);
}
.faq__lista summary:hover { color: var(--dourado-texto); }
.faq__lista summary::-webkit-details-marker { display: none; }
.faq__lista summary::after,
.faq__lista summary::before {
  content: ""; position: absolute; right: .3rem; top: 50%; width: 11px; height: 1px;
  background: var(--dourado-texto);
}
.faq__lista summary::before { transform: rotate(90deg); transition: transform var(--transicao); }
.faq__lista details[open] summary::before { transform: rotate(0); }
.faq__lista details p { padding-bottom: 1.4rem; font-size: .875rem; }
.faq__lista details ul { padding: 0 0 1.4rem 1.1rem; font-size: .875rem; }
.faq__lista details li + li { margin-top: .45rem; }

/* ============ FECHAMENTO ============ */
.fechamento { background: var(--creme); padding-block: var(--esp-secao); text-align: center; }
.fechamento p { margin: 1rem auto 1.9rem; max-width: 46ch; }

/* ============ RODAPE ============ */
.rodape { background: var(--branco); padding-block: 3rem 2.5rem; border-top: 1px solid var(--linha); }
.rodape__interno { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.rodape img { height: 26px; width: auto; border-radius: 0; }
.rodape__cidades { font-size: .8125rem; }
.rodape__nota { font-size: .6875rem; color: var(--dourado-texto); letter-spacing: .06em; }

/* ============ FRONTEIRA SEM TROCA DE FUNDO ============
   Onde a cor MUDA de uma secao para a outra, a propria troca marca a divisao e
   um vao grande le como intencional. Onde o fundo NAO muda, o mesmo vao le como
   buraco — e ele vem dobrado, porque e o fundo de uma somado ao topo da outra.
   Medido em 12/08 (tools/medir_vaos.py): 277px em Sobre -> Bronzes e 263px em
   Modalidades -> Resultados, contra 113px nas fronteiras que trocam de cor.
   Nestes dois pontos o respiro passa a ser UM so, nao dois. */
/* #bronzes usa a MESMA formula do respiro de baixo do #sobre para a onda do
   divisor ficar centrada no vao; com valores diferentes ela puxa para um lado. */
#bronzes    { padding-top: min(var(--esp-secao), 6vh); }
#resultados { padding-top: calc(var(--esp-secao) * .4); }

/* ============ ANCORAS SOB A NAV ============ */
[id="bronzes"], [id="experiencia"], [id="unidades"],
[id="resultados"], [id="faq"], [id="sobre"], [id="conteudo"] { scroll-margin-top: 96px; }
@media (max-width: 940px) {
  [id="bronzes"], [id="experiencia"], [id="unidades"],
  [id="resultados"], [id="faq"], [id="sobre"], [id="conteudo"] { scroll-margin-top: 76px; }
}

/* ============================================================
   ESTRUTURA DA REFERENCIA HARPER QUINN
   ============================================================ */

/* ---------- NAV: logo + assinatura a esquerda, links ao centro, pilula a direita ---------- */
/* ⚠️ `align-items: flex-start` NAO e enfeite. Sem ele o flex em coluna usa
   `stretch` (o padrao) e a LOGO estica para a largura do pai; com a altura fixa
   por CSS, ela sai deformada. Medido em 12/08: 16% esticada no celular e 4% no
   desktop, onde a largura do pai vinha da assinatura "BRONZEAMENTO A JATO"
   (removida em 21/08 a pedido do cliente — a regra FICA: sem ela o stretch
   ainda estica a logo ate a largura da celula da grade).
   O menu, o seletor e o rodape no celular nao sofriam disso porque nenhum deles
   e um flex em coluna com a logo dentro. */
.nav__marca { display: flex; flex-direction: column; align-items: flex-start;
  gap: .18rem; text-decoration: none; }
.nav__marca img { height: 26px; width: auto; border-radius: 0; }
.nav--3col .nav__interno { grid-template-columns: auto 1fr auto; }
.nav--3col .nav__lista { justify-content: center; }
.nav__cta { justify-self: end; display: flex; align-items: center; gap: .6rem; }

/* ⚠️ A NAV QUEBRAVA EM DUAS LINHAS no celular: a grade caia para 2 colunas mas
   continuava com 3 filhos (marca, <nav>, acoes), entao as acoes desciam para a
   linha de baixo, coladas a esquerda embaixo do logo. Resultado medido: 139px de
   altura em vez de ~65 — 74px roubados de TODA tela, no aparelho onde a tela e
   mais curta. O <nav> some junto com a lista, senao ele continua ocupando celula
   mesmo com o <ul> em display:none. */
@media (max-width: 980px) {
  .nav--3col .nav__interno { grid-template-columns: 1fr auto; }
  .nav--3col > .container > nav { display: none; }
}
@media (max-width: 480px) {
  /* Em 390px cabem logo + Agendar + sanduba, mas so encolhendo os tres. */
  .nav__marca img { height: 21px; }
  .nav__cta .botao { padding: .7rem 1rem; letter-spacing: .1em; }
  .nav__cta .botao .seta { display: none; }
}

/* ---------- HERO DIVIDIDO ---------- */
.hero2 { position: relative; background: var(--creme-suave); overflow: hidden; }
.hero2__interno {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  padding-block: clamp(2.5rem, 2rem + 4vw, 5.5rem);
}
.hero2__texto { position: relative; z-index: 2; }
.hero2 h1 { max-width: 15ch; font-style: normal; }
/* O <em> "desejado" em ouro com gradiente leve. O `color` sozinho e o que
   aparece em navegador sem background-clip; o @supports so entao pinta o texto
   com o gradiente. Sem essa guarda, `text-fill-color: transparent` apagaria a
   palavra em quem nao suporta. ⚠️ O audit_contrast_dom declara background-clip
   NAO AUDITAVEL, entao esta e a unica cor da pagina cujo contraste ninguem mede
   por mim: os 2 tons estao travados no audit_contrast, com piso de texto grande. */
.hero2 h1 em { font-style: italic; color: var(--ouro-fundo); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero2 h1 em {
    background-image: linear-gradient(100deg,
      var(--ouro-claro) 0%, var(--ouro-fundo) 52%, var(--ouro-claro) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* ⚠️ O "o" final saia PARTIDO AO MEIO (apontado pelo cliente em 21/08).
       Causa: o italico projeta o glifo para FORA da caixa do inline, e o
       `background-clip: text` so pinta dentro da caixa — o que passa dela fica
       sem gradiente e, com text-fill-color transparent, some.
       O padding alarga a area pintada; a margem negativa de mesmo valor
       devolve o espaco, entao " do Brasil." nao anda um pixel.
       Em `em` para escalar junto com o H1, que e clamp(). */
    padding-inline: .06em .16em;
    margin-inline: -.06em -.16em;
  }
}
.hero2__sub { margin-top: 1.2rem; max-width: 42ch; }
.hero2__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
/* prova social: pilha de fotinhas + frase, como na referencia */
.prova { display: flex; align-items: center; gap: .85rem; margin-top: 2.2rem; }
.prova__fotos { display: flex; }
.prova__fotos img {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--branco); margin-left: -12px;
}
.prova__fotos img:first-child { margin-left: 0; }
.prova__texto { font-size: .75rem; }
.prova__texto strong { color: var(--marrom); }
/* foto do hero em arco */
.hero2__foto { position: relative; z-index: 1; }
/* ⚠️ ENQUADRAMENTO: desde que as fotos ganharam TETO DE ALTURA (para as dobras
   caberem na tela), a caixa ficou mais larga que a proporcao original e o
   `object-fit: cover` passou a CORTAR o topo. Com o padrao `center` isso decapitou
   a modelo da Bronzear Goiania e cortou o top da foto do Diferencial.
   O ponto de corte de cada foto vem do HTML, em `--foco`, porque depende do que
   ha NA IMAGEM e nao do componente. Conferir recortando a origem antes de gravar
   o valor — foi assim que os numeros abaixo sairam. */
.hero2__foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover;
  object-position: var(--foco, center); border-radius: var(--arco); }

/* ---------- A PRIMEIRA DOBRA TEM DE CABER NA TELA ----------
   Pedido do cliente em 12/08: a prova social aparecia cortada na borda de baixo.
   CAUSA: a foto era `aspect-ratio: 4/5` sobre METADE da largura, entao a altura
   do hero era governada pela LARGURA da janela e ignorava a ALTURA dela — 973px
   fixos, que estouram qualquer notebook de 800 ou 900px.
   CORRECAO: a altura passa a ser governada pela tela. `min-height` faz o hero
   preencher a dobra nas telas altas; o teto da foto em `svh` impede que ele
   ultrapasse a dobra nas telas baixas. `svh` e a altura ESTAVEL do viewport —
   nao pula quando a barra do navegador movel recolhe.
   Travado por tools/audit_dobras.py em 4 tamanhos de tela. */
@media (min-width: 901px) {
  .hero2__interno {
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
    padding-block: clamp(1rem, .5rem + 2vh, 2.75rem);
    /* A coluna da foto encolhe porque a foto passou a ter largura PROPRIA (ver
       abaixo): em 1fr 1fr sobrava vao morto dos dois lados do arco. */
    grid-template-columns: 1.12fr .88fr;
  }
  /* ⚠️ CORPO INTEIRO, pedido do cliente em 21/08. `--foco` NAO resolvia isto:
     a caixa era mais larga que alta (574x537) e a foto e 0,75, entao o `cover`
     cortava 30% da altura em 1440 e 44% em 1280 por definicao — qualquer valor
     de --foco so escolhia QUAL pedaco perder. A cura e a caixa deixar de impor
     a largura: com `width: auto` a largura passa a vir da altura pela propria
     proporcao da foto, e nao sobra corte nenhum.
     A altura subiu de 64vh para 72vh para compensar a caixa mais estreita —
     esse e o teto pratico: audit_dobras mede sobra de 52px em 1280x657, o mais
     apertado da lista. Nao subir sem rodar o portao. */
  .hero2__foto img {
    aspect-ratio: auto;
    height: min(72vh, 700px);
    height: min(72svh, 700px);
    width: auto; max-width: 100%; margin-inline: auto;
  }
}
/* Tela baixa (notebook antigo, janela reduzida): o texto sozinho passa a ser o
   que nao cabe, entao a escala do hero encolhe junto. */
@media (min-width: 901px) and (max-height: 780px) {
  .hero2 h1 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); }
  .hero2__sub { margin-top: .9rem; font-size: .875rem; }
  .hero2__acoes { margin-top: 1.4rem; }
  .prova { margin-top: 1.4rem; }
}
@media (max-width: 900px) {
  .hero2__interno { grid-template-columns: 1fr; }
  .hero2 h1 { max-width: none; }
  .hero2__foto { display: none; }
}

/* ---------- SOBRE: foto em arco + texto + coluna de indicadores ----------
   Como o hero, esta dobra tem de caber na tela (pedido do cliente, 12/08).
   Mesma doenca, mesma cura: a foto era `aspect-ratio: 4/5` e a altura da secao
   vinha da LARGURA da janela, nao da altura — 756px num viewport de 678px.
   Travado por tools/audit_dobras.py. */
@media (min-width: 901px) {
  /* ⚠️ Esta secao CABE na tela, mas NAO a preenche — e a decisao vale registro.
     A 1ª versao usava min-height de tela cheia com o conteudo centralizado; ela
     cabia, mas o conteudo e mais baixo que a tela e a sobra virava vao morto que
     SOMAVA com o topo da secao seguinte: 277px de branco, que foi a queixa
     seguinte do cliente. Preencher a tela e nao sobrar branco sao a mesma coisa
     com sinais trocados — nao da para ter os dois com este conteudo.
     O `min(--esp-secao, 6vh)` da o respiro normal nas telas altas e o aperta
     sozinho nas baixas, que e onde o espaco falta. */
  .sobre__foto img {
    aspect-ratio: auto;
    height: min(56vh, 540px);
    height: min(56svh, 540px);
  }
}
/* ---------- TELA BAIXA: as 3 dobras encolhem juntas ----------
   Nas telas curtas quem nao cabe deixa de ser a foto e passa a ser o TEXTO —
   medido em 1280x657, onde a coluna do Sobre pedia 522px de 525px disponiveis e
   a Bronzear Goiania estourava 39px por ter lista, selo e botao alem do paragrafo.
   Duas alavancas juntas: o respiro da secao ganha teto em vh e a escala do texto
   cai. O teto so vale na tela baixa; nas altas o respiro volta ao --esp-secao
   das demais secoes, senao o ritmo da pagina ficaria irregular. */
@media (min-width: 901px) and (max-height: 820px) {
  #sobre, #diferencial, #casa-bronzear { padding-block: min(var(--esp-secao), 6vh); }
  #sobre h2, #diferencial h2, #casa-bronzear h2 {
    font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.4rem);
  }
  #sobre p, #diferencial p, #casa-bronzear p { font-size: .875rem; }
  #sobre .indicador b { font-size: 1.05rem; }
}

.sobre__interno {
  display: grid; grid-template-columns: .78fr 1fr .62fr;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center;
}
.sobre__foto { position: relative; }
.sobre__foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover;
  object-position: var(--foco, center); border-radius: var(--arco); }
.sobre__foto .folha-deco { width: 150px; height: 150px; left: -58px; bottom: -28px; opacity: .22; }
.indicadores { display: grid; gap: 1.4rem; padding-left: clamp(1rem, .5rem + 1.5vw, 2rem);
  border-left: 1px solid var(--linha); }
.indicador { display: flex; align-items: center; gap: .85rem; text-align: left; }
.indicador .selo-icone { width: 42px; height: 42px; margin: 0; flex: 0 0 auto; }
.indicador .selo-icone::before { width: 20px; height: 20px; }
.indicador b { display: block; font-family: var(--fonte-titulo);
  font-size: 1.15rem; color: var(--marrom); line-height: 1.2; }
.indicador span { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 1000px) {
  .sobre__interno { grid-template-columns: 1fr 1fr; }
  .indicadores { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr);
    border-left: 0; border-top: 1px solid var(--linha); padding-left: 0; padding-top: 1.75rem; }
}
@media (max-width: 700px) {
  .sobre__interno { grid-template-columns: 1fr; }
  /* a coluna unica dos indicadores foi removida daqui: o bloco 2x2 mais abaixo
     neste arquivo a desfazia, e deixar as duas ao mesmo tempo so confunde. */
  .sobre__foto { max-width: 360px; margin-inline: auto; }
}

/* ---------- CARTOES DE SERVICO (os 3 bronzes) ---------- */
.servicos__grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: var(--esp-bloco);
}
.servico {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-card);
  padding: 2.2rem 1.8rem; text-align: center; display: flex; flex-direction: column;
  transition: var(--transicao);
}
.servico:hover { border-color: var(--acento); box-shadow: var(--sombra-suave); }
/* foto no topo do cartao, com o selo de folha montado na borda inferior dela —
   a marca vende resultado visual, entao o icone sozinho perderia a prova. */
.servico { padding: 0 1.8rem 2.2rem; overflow: hidden; }
.servico__foto { position: relative; margin: 0 -1.8rem 0; }
.servico__foto img {
  width: 100%; aspect-ratio: 5/4; object-fit: cover;
  border-radius: var(--raio-card) var(--raio-card) 0 0;
}
/* ---- DIPTICO: 2 fotos por bronze (pedido do cliente, 21/08) ----
   A conta fecha sem mexer na altura do cabecalho do cartao: a foto unica era
   5/4 (altura = 0,8 x largura); com duas colunas de 5/8 a altura da metade e
   (largura/2) x 8/5 = 0,8 x largura. Mesmo cabecalho, duas fotos.
   O arredondamento tem de ser dividido entre as duas, senao o canto superior
   do cartao aparece quadrado de um lado. */
.servico__foto--dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.servico__foto--dupla img { aspect-ratio: 5/8; }
.servico__foto--dupla img:first-child { border-radius: var(--raio-card) 0 0 0; }
.servico__foto--dupla img:last-child  { border-radius: 0 var(--raio-card) 0 0; }

/* O selo redondo dourado montado na borda da foto foi REMOVIDO: lia como adesivo
   colado, o oposto do cartao limpo das duas referencias. Foto, titulo, texto. */
.servico h3 { margin-top: 1.9rem; }
.servico__tagline { font-size: .8125rem; color: var(--acento); margin: .3rem auto 0; }
.servico p { margin: .9rem auto 0; font-size: .875rem; max-width: 32ch; }
.servico__tempo {
  margin: auto auto 0; padding-top: 1.2rem;
  font-family: var(--fonte-titulo); font-size: 1rem; color: var(--marrom);
}
.servico .link-seta { align-self: center; }
@media (max-width: 900px) {
  .servicos__grade { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
}

/* ---------- FAIXA DE NUMEROS ----------
   Em TERRACOTA, nao em quase-preto. Nas duas referencias essa faixa e a cor da
   marca em valor MEDIO (verde-oliva na Harper Quinn, terracota na Maya Lane) —
   e o que faz ela ler como bloco de marca em vez de rodape. Texto branco: 5.48. */
.faixa-numeros { background: var(--acento); color: var(--branco); position: relative; overflow: hidden; }
.faixa-numeros__grade {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem); position: relative; z-index: 2;
}
/* ⚠️ EMPILHADO, nao lado a lado. Com o icone A ESQUERDA e o item centralizado na
   celula, a largura do rotulo empurrava o icone: "ANOS DE EXPERIENCIA" e
   "CIDADES" tem tamanhos bem diferentes e os icones saíam desalinhados em ate
   49px na mesma coluna. Empilhado e centrado, todos caem no mesmo eixo qualquer
   que seja o rotulo. E a mesma linguagem dos indicadores da secao Sobre. */
.faixa-numeros__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .7rem; padding-inline: .6rem;
  border-right: 1px solid rgba(255,255,255,.26);
}
.faixa-numeros__item:last-child { border-right: 0; }
.faixa-numeros .selo-icone { background: rgba(255,255,255,.14); width: 46px; height: 46px; margin: 0; }
/* folha CLARA, nao dourada: sobre a terracota o dourado quase some. */
.faixa-numeros .selo-icone::before { background-color: var(--branco); width: 22px; height: 22px; }
.faixa-numeros dt {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1; color: var(--branco);
}
.faixa-numeros dd { margin: .25rem 0 0; font-size: .625rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--branco); }
/* ⚠️ Opacidade travada em .06 por MEDICAO, nao por gosto. No mobile a faixa vira
   1 coluna e esta folha passa POR TRAS do rotulo: a .12 ela clareava a terracota
   para #A76C4A e derrubava o texto branco de 5.48 para 4.30 — reprovado. Foi o
   portao do DOM que pegou, no viewport de 390px. A .06 sobra 4.85. Nao aumentar. */
.faixa-numeros .folha-deco {
  width: 300px; height: 300px; right: -70px; top: -60px;
  background-color: var(--branco); opacity: .06;
}
@media (max-width: 860px) {
  .faixa-numeros__grade { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  .faixa-numeros__item:nth-child(2) { border-right: 0; }
}
/* Fica em 2x2 tambem no celular: em coluna unica os 4 viravam uma fila alta e
   solta. O fio vertical sai, porque com so 2 colunas ele mais atrapalha que
   organiza; quem separa as linhas passa a ser o espaco. */
@media (max-width: 480px) {
  .faixa-numeros__grade { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 0; }
  .faixa-numeros__item { border-right: 0; }
}

/* ---------- DEPOIMENTOS / GALERIAS EM CARTAO ---------- */
/* Os 4 cartoes .depo ("Conteudo pendente do cliente") sairam em 21/08: Antes e
   depois e Influenciadoras viraram galeria; Depoimentos e Videos foram
   removidos a pedido do cliente. O CSS deles saiu junto. */
.acervo { margin-top: var(--esp-bloco); }
/* A ondinha do divisor entre as galerias, a pedido do cliente (21/08).
   ⚠️ Vai como ::before do .acervo, e nao como <div class="divisor"> repetida no
   HTML: assim a separacao nasce junto com a galeria — a quarta galeria ganha a
   onda sozinha, e nao ha risco de alguem acrescentar bloco e esquecer o
   divisor. Ela e puramente decorativa, entao conteudo vazio e o certo aqui.
   Mesma peca do divisor Sobre -> Bronzes: 46x18 no dourado da marca, com a
   onda entrando por `mask` para a cor sair do token e nao do SVG. */
.acervo::before {
  content: ""; display: block; width: 46px; height: 18px;
  margin: 0 auto var(--esp-bloco);
  background-color: var(--dourado);
  -webkit-mask: var(--onda-svg) no-repeat center / contain;
          mask: var(--onda-svg) no-repeat center / contain;
}
.acervo__titulo { text-align: center; font-size: 1.35rem; margin-bottom: 1.1rem; }

/* ---------- CONTATO EM DUAS COLUNAS ---------- */
.contato { background: var(--creme-suave); }
.contato__interno {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: stretch;
}
.contato__cartao {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-card);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem); position: relative; overflow: hidden;
}
.contato__cartao .folha-deco { width: 190px; height: 190px; right: -60px; bottom: -50px; opacity: .14; }
.contato__lista { display: grid; gap: 1.1rem; margin-top: 1.6rem; position: relative; z-index: 2; }
.contato__lista li { display: flex; align-items: center; gap: .85rem; }
.contato__lista .selo-icone { width: 40px; height: 40px; margin: 0; flex: 0 0 auto; }
.contato__lista .selo-icone::before { width: 18px; height: 18px; }
.contato__lista b { display: block; font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dourado-texto); }
.contato__lista span { font-size: .875rem; color: var(--marrom); }
.contato__acao {
  background: var(--tinta); color: var(--creme); border-radius: var(--raio-card);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem); display: flex; flex-direction: column;
  justify-content: center; text-align: center; position: relative; overflow: hidden;
}
.contato__acao h2 { color: var(--branco); }
.contato__acao p { margin: 1rem auto 1.8rem; max-width: 34ch; color: rgba(245,234,211,.8); }
.contato__acao .botao { align-self: center; }
/* ⚠️ A folha SANGRA pelo canto, nao flutua dentro dele. Com -70/-60 ela cabia
   quase inteira no cartao e lia como adesivo largado no vao de cima; ancorada
   fora das duas bordas, so a ponta entra e ela vira ornamento de canto.
   O giro de -12° tira o eixo do talo da vertical, que era o que mais denunciava
   o "colado". Testadas e DESCARTADAS por medida, nao por gosto: canto de baixo
   e rodape do cartao — nas duas a folha atravessa a headline em cheio, porque o
   conteudo deste cartao e centralizado verticalmente e ocupa o miolo. */
.contato__acao .folha-deco {
  width: 300px; height: 300px; left: -120px; top: -120px;
  opacity: .11; transform: rotate(-12deg);
}
.contato__acao > * { position: relative; z-index: 2; }
@media (max-width: 860px) { .contato__interno { grid-template-columns: 1fr; } }

/* ---------- RODAPE ESCURO ---------- */
.rodape--escuro { background: var(--tinta); border-top: 0; color: rgba(245,234,211,.75); }
.rodape--escuro .rodape__interno { flex-direction: row; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem; text-align: left; }
.rodape--escuro img { filter: brightness(0) invert(1); opacity: .9; }
.rodape--escuro .rodape__cidades { color: rgba(245,234,211,.8); }
.rodape--escuro .rodape__nota { color: rgba(245,234,211,.5); }
.rodape__base { border-top: 1px solid rgba(245,234,211,.14); margin-top: 2rem; padding-top: 1.3rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 700px) {
  .rodape--escuro .rodape__interno { flex-direction: column; align-items: center; text-align: center; }
  .rodape__base { justify-content: center; }
}


/* ==================== CELULAR: PISO DE TOQUE E DE LEGIBILIDADE ====================
   ⚠️ ESTE BLOCO PRECISA SER O ULTIMO DO ULTIMO CSS CARREGADO. Ele sobrescreve
   tamanhos definidos em components.css e acima neste arquivo com a MESMA
   especificidade, entao so vence por ORDEM. Na 1a tentativa ele foi parar em
   components.css, que carrega ANTES: as regras passaram a ser desfeitas em
   silencio e a auditoria seguiu acusando 9px onde eu ja "tinha corrigido".

   Auditado a 390px em 12/08. Dois problemas medidos:

   1. ALVOS DE TOQUE abaixo dos 44px minimos (Apple HIG / WCAG 2.5.5). O pior era
      o `.link-seta` "Ver na minha cidade" com 14px de altura, 3x na pagina — o
      CTA de cada cartao de bronze, ou seja, o dedo errava justo onde a pagina
      converte. `min-height` e nao `height`, para o alvo crescer se o texto
      quebrar em duas linhas.

   2. TEXTO abaixo de 11px: o selo "Exclusivo da unidade Goiania", a UF das
      unidades e os avisos das galerias saiam a 9px. Sao rotulos que carregam
      REGRA DE NEGOCIO (qual unidade atende o que) — nao podem ser ilegiveis.
      O piso vale so no celular; no desktop o 9px em caixa alta espacada funciona.
      A `.seta` fica de fora: e glifo de icone, nao texto de leitura. */
@media (max-width: 900px) {
  .sanduba { display: flex; }

  .nav__marca { min-height: 44px; justify-content: center; }
  .botao { min-height: 44px; }
  .botao--pequeno { min-height: 44px; padding-block: .8rem; }
  .link-seta { min-height: 44px; margin-top: .6rem; }

  .unidade__uf,
  .modalidade__nota,
  .faixa-numeros dd,
  .numeros dd,
  .contato__lista b,
  .seletor__lista strong span { font-size: .6875rem; }
}

/* ---------- INDICADORES NO CELULAR: 2x2 COM O ICONE EM CIMA ----------
   Em coluna unica os 4 indicadores ocupavam so a metade esquerda da tela e o vao
   a direita ficava morto — foi o que o cliente apontou. Em 2x2 com o icone acima
   o bloco fica simetrico, usa a largura inteira e ainda encolhe de 292 para 259px.

   Escolha do cliente entre 3 amostras renderizadas no celular. As descartadas,
   para nao serem retentadas: 2x2 com o icone A ESQUERDA era a mais compacta
   (180px) mas "clientes atendidas" quebrava em duas linhas e desalinhava a
   primeira fileira; e linhas de largura cheia com fio entre elas ficava editorial
   demais e abria mao das folhas da marca.

   Vale so abaixo de 700px. Entre 700 e 1000 a grade ja e de 2 colunas com o
   icone a esquerda, e ali sobra largura para isso funcionar. */
@media (max-width: 700px) {
  .indicadores { grid-template-columns: 1fr 1fr; gap: 1.9rem 1rem; }
  .indicador { flex-direction: column; text-align: center; gap: .6rem; }
  .indicador .selo-icone { width: 46px; height: 46px; }
  .indicador div { display: grid; gap: .15rem; }
}