/* =========================================================================
   Óleo Ponto Com — Itajaí
   Projeto gráfico nascido do logotipo do cliente: gota amarela, Baloo 2.
   A paleta original foi medida no vetor em 16/10/2026: amarelo #FAC211 e preto
   #121313. Em 21/10 a Bloon mandou a cartela nova e o Luiz escolheu, a pedido
   do Rafael, que queria menos preto e mais cinza. Os tons estão em :root.
   ⚠️ O arquivo do logotipo ainda tem o amarelo e o preto antigos. A diferença é
   de 4 pontos em cada canal e não aparece na tela, mas quando a Bloon mandar o
   logo atualizado é só trocar o SVG.
   ========================================================================= */

/* A fonte é servida do próprio domínio. Nada de Google Fonts: a política de
   segurança do site bloqueia terceiro, e o bloqueio é silencioso.
   Baloo 2 é variável, eixo de peso 400 a 800, um arquivo para a família toda. */
@font-face{
  font-family:"Baloo 2";
  src:url("fonts/baloo2-latin.woff2") format("woff2-variations");
  font-weight:400 800;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Baloo 2";
  src:url("fonts/baloo2-latin-ext.woff2") format("woff2-variations");
  font-weight:400 800;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   A régua. Seis tamanhos com nome, sete espaçamentos, dois raios.
   Existe para não virar o que aconteceu no Klenio, que tem trinta tamanhos de
   fonte e doze com meio pixel. Meio pixel é a prova de que não há escala.
   ------------------------------------------------------------------------- */
:root{
  /* cor
     Paleta nova, enviada pela Bloon e escolhida pelo Luiz e pelo Thiago em
     21/10/2026. O pedido do Rafael foi "menos preto e mais cinza", e o ouro
     trocado por um tom mais maduro. O cinza grafite veio da outra cartela,
     porque no Night Black sozinho o cinza ficava quase branco. */
  /* ⚠️ O nome "preto" ficou por compatibilidade, mas a cor não é mais preta.
     Em 21/10 o Thiago escolheu a variação C das três que foram mandadas: o que
     era quase preto virou grafite. É a leitura mais literal do pedido do
     Rafael, que era menos preto.
     O #333333 é o grafite mais CLARO que ainda deixa o ouro e o branco
     legíveis: branco dá 12.63 de contraste e o ouro #FEBE10 dá 7.57. No
     #6D6D6D da cartela o ouro cairia para 3.10, abaixo do mínimo de 4.5. */
  --preto:#333333;          /* grafite. Foi #121313, depois #1A1A1A */
  --preto-2:#3C3C3C;        /* seções escuras que precisam de um degrau */
  --grafite:#6D6D6D;        /* o cinza da primeira cartela, que o cliente pediu */
  --sobre-escuro:#E8E8E8;   /* texto normal sobre o grafite */
  --fraco-escuro:#BDBDBD;   /* texto secundário sobre o grafite: 6.73 de contraste.
                               Os cinzas antigos foram calibrados contra o quase
                               preto e reprovaram quando o fundo clareou */
  --superficie-2:#E3E3E3;   /* faixa cinza, também da primeira cartela. Não serve
                               de fundo da página: o texto fraco cai para 4.03 de
                               contraste ali, e o mínimo é 4.5 */
  --amarelo:#FEBE10;        /* no lugar do #FAC211 */
  --amarelo-fundo:#FFF2CC;  /* tarja clara, nunca o amarelo cheio atrás de texto */
  --amarelo-texto:#7D6104;  /* ouro legível sobre fundo claro. O #FEBE10 sobre
                               branco dá 1.67 de contraste, e o mínimo é 4.5.
                               Este dá 5.86 no branco e 5.23 no cinza do fundo */
  --fundo:#F2F2F2;          /* nunca branco puro: é o tique mais visível de todos */
  --carta:#FFFFFF;
  --texto:#202020;
  --texto-fraco:#5E5E5E;    /* o #6D6D6D da cartela passa no branco (5.17) mas
                               reprova sobre a faixa cinza (4.03). Este é o mesmo
                               cinza um tom abaixo, e passa nos três fundos. O
                               #6D6D6D segue em --grafite, para fundo branco */
  --linha:#C8C8C8;         /* primeira cartela */

  /* tipografia, seis degraus */
  --t-micro:0.8125rem;                      /* etiqueta, barra do topo */
  --t-miudo:0.9375rem;                      /* legenda, rodapé */
  --t-corpo:1.0625rem;                      /* texto corrido */
  --t-destaque:1.375rem;                    /* linha de apoio do herói, números */
  --t-secao:clamp(1.875rem,1.2rem + 2.6vw,2.75rem);
  --t-heroi:clamp(2.375rem,1.3rem + 4.6vw,4.25rem);

  /* espaço, régua de 8 */
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px; --e6:72px; --e7:112px;

  /* raio: um para controle, um para superfície. Nada além */
  --r-controle:999px;      /* botão, selo, círculo */
  --r-campo:10px;          /* campo de formulário: pílula numa textarea fica ruim */
  --r-superficie:14px;     /* carta, caixa, foto */

  --borda:1px solid var(--linha);
  --sombra:0 10px 30px rgba(51,51,51,.14);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Baloo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-corpo);
  font-weight:400;
  line-height:1.6;
  color:var(--texto);
  background:var(--fundo);
}
img{max-width:100%;display:block;height:auto}
/* O <picture> é só um embrulho para oferecer o webp. Sem isto ele vira uma
   caixa inline no meio do layout e quebra as regras de altura das fotos. */
picture{display:contents}
a{color:inherit}
h1,h2,h3{font-weight:800;line-height:1.08;letter-spacing:-.015em;margin:0}
p{margin:0 0 var(--e2)}
p:last-child{margin-bottom:0}

/* texto corrido na faixa que se lê bem, 45 a 75 caracteres */
.prosa{max-width:62ch}
.prosa-estreita{max-width:52ch}

.dentro{width:min(1180px,100% - var(--e4));margin-inline:auto}
.secao{padding-block:var(--e7)}
.secao-escura{background:var(--preto);color:#F2F1EE}
.secao-escura .apoio{color:var(--fraco-escuro)}

/* A faixa cinza, que entra no lugar de uma faixa preta.
   O pedido do Rafael em 21/10 foi "menos preto e mais cinza", e a forma honesta
   de atender é tirar área preta, não clarear o preto: cinza médio com texto
   branco em cima não alcança o contraste mínimo. */
.secao-escura .titulo-secao .apoio,
.secao-escura .apoio{color:var(--fraco-escuro)}

.secao-cinza{background:var(--superficie-2)}
.secao-cinza .apoio{color:var(--texto-fraco)}
.secao-cinza .nota .quantas{color:var(--texto-fraco)}
.secao-cinza .depoimento{
  background:var(--carta);border:1px solid var(--linha);
}
.secao-cinza .depoimento blockquote{color:var(--texto)}
.secao-cinza .depoimento .aspas{color:var(--amarelo-texto)}
.secao-cinza .depoimento figcaption{color:var(--texto-fraco)}
.secao-cinza .nota .valor{color:var(--amarelo-texto)}
.secao-cinza .nota .estrelas svg{fill:var(--amarelo-texto)}

/* A gota é o ornamento desta casa, e sai do próprio logotipo do cliente. Ela é
   desenhada como SVG embutido no HTML, em três papéis: marca d'água do herói,
   marca d'água do topo das páginas internas, e marcador das listas. Não existe
   classe de CSS para ela de propósito, porque cada uso tem tamanho e opacidade
   próprios. */

/* -------------------------------------------------------------------------
   Barra do topo: horário, endereço e telefone
   Ela existe porque o cliente pediu que em cinco segundos a pessoa saiba que é
   rápido e onde fica. Isso responde antes de qualquer rolagem.
   ------------------------------------------------------------------------- */
.barra-topo{
  background:var(--preto);color:#CFD0CD;
  font-size:var(--t-micro);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.barra-topo .dentro{
  display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);
  align-items:center;padding-block:10px;
}
.barra-topo b{color:#fff;font-weight:600}
.barra-topo .separa{margin-left:auto}
.barra-topo a{text-decoration:none}
.barra-topo a:hover{color:var(--amarelo)}
/* O endereço abre o mapa, com o mesmo link da seção "Onde fica". O alfinete
   existe porque, sem ele, o endereço fica igual ao texto solto da barra e
   ninguém descobre que dá para clicar.

   ⚠️ Ele aparece NO CELULAR TAMBÉM, e isso é de propósito. Esta regra vence a
   .so-grande por ter mais força, e quando percebi preferi manter: quem está no
   telefone e procura troca de óleo quer exatamente o endereço, e aqui ele abre
   o mapa com um toque. O que some no celular é o horário de sábado, que é
   informação repetida mais abaixo. */
.barra-topo a.separa{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.barra-topo a.separa svg{width:13px;height:13px;flex:none;color:var(--amarelo)}

/* -------------------------------------------------------------------------
   Cabeçalho
   ------------------------------------------------------------------------- */
.cabeca{
  position:sticky;top:0;z-index:50;
  background:var(--preto-2);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cabeca .dentro{display:flex;align-items:center;gap:var(--e3);padding-block:var(--e2)}
.marca{display:flex;align-items:center;text-decoration:none}
.marca img{height:46px;width:auto}
.menu{display:flex;gap:var(--e3);margin-left:auto;list-style:none;padding:0;margin-block:0}
.menu a{
  text-decoration:none;color:#E9E9E6;font-weight:600;font-size:var(--t-miudo);
  text-transform:uppercase;letter-spacing:.06em;
  padding-block:var(--e1);border-bottom:2px solid transparent;
}
.menu a:hover,.menu a[aria-current="page"]{color:#fff;border-bottom-color:var(--amarelo)}

/* botão de menu no celular */
.abre-menu{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  color:#fff;padding:var(--e1);
}
.abre-menu svg{display:block}

/* -------------------------------------------------------------------------
   Botões. Um raio só, o de controle.
   ------------------------------------------------------------------------- */
.botao{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--amarelo);color:var(--preto);
  font-weight:700;font-size:var(--t-corpo);line-height:1;
  padding:16px var(--e3);border-radius:var(--r-controle);
  text-decoration:none;border:2px solid var(--amarelo);
  transition:transform .15s ease,box-shadow .15s ease;
}
.botao:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(254,190,16,.35)}
.botao svg{width:20px;height:20px;fill:currentColor}
.botao.vazado{background:transparent;color:var(--amarelo)}
.botao.vazado:hover{background:var(--amarelo);color:var(--preto)}

/* o segundo caminho não é um segundo botão: é um link com seta.
   Dois botões lado a lado, um cheio e um vazado, é cara de modelo pronto. */
.link-seta{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;text-decoration:none;color:inherit;
  border-bottom:2px solid var(--amarelo);padding-bottom:2px;
}
.link-seta:hover{gap:12px}
.link-seta svg{width:16px;height:16px;fill:currentColor;transition:transform .15s ease}

/* -------------------------------------------------------------------------
   Herói
   Alinhado à esquerda de propósito. Foto dessaturada atrás, gota gigante de
   marca d'água, e a promessa do cliente em duas cores.
   ------------------------------------------------------------------------- */
.heroi{
  position:relative;overflow:hidden;
  background:var(--preto);color:#fff;
  padding-block:var(--e7) var(--e7);
}
.heroi-foto{
  position:absolute;inset:0;
  object-fit:cover;width:100%;height:100%;
  /* o recorte puxa para a direita: o assunto da foto fica no lado claro do
     véu, em vez de sumir atrás da parte escura que segura o texto */
  object-position:72% center;
  filter:grayscale(1) contrast(1.05);
  opacity:.5;
}
.heroi::after{ /* escurece o lado do texto para o contraste passar */
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(51,51,51,.95) 0%,rgba(51,51,51,.78) 42%,rgba(51,51,51,.22) 100%);
}
.heroi-gota{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(540px,52vw);color:rgba(254,190,16,.09);
  z-index:1;pointer-events:none;
}
.heroi .dentro{position:relative;z-index:2}
.heroi .etiqueta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amarelo);margin-bottom:var(--e3);
}
.heroi .etiqueta .risco{width:34px;height:2px;background:var(--amarelo);display:block}
.heroi h1{font-size:var(--t-heroi);max-width:17ch}
.heroi h1 em{font-style:normal;color:var(--amarelo);display:block}
.heroi .apoio{
  font-size:var(--t-destaque);font-weight:500;color:#DDDEDB;
  max-width:46ch;margin-top:var(--e3);line-height:1.45;
}
.heroi .acoes{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;margin-top:var(--e5)}

/* -------------------------------------------------------------------------
   Topo das páginas internas
   Versão curta do herói: mesma família, sem a foto, para a página interna não
   competir com a home nem custar mais um download pesado.
   ------------------------------------------------------------------------- */
.topo-pagina{
  position:relative;overflow:hidden;
  background:var(--preto);color:#fff;
  padding-block:var(--e6);
}
.topo-gota{
  position:absolute;right:2%;top:50%;transform:translateY(-50%);
  width:min(300px,34vw);color:rgba(254,190,16,.10);pointer-events:none;
}
.topo-pagina .dentro{position:relative;z-index:2}
.topo-pagina h1{font-size:var(--t-secao);max-width:19ch}
.topo-pagina .etiqueta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amarelo);margin-bottom:var(--e2);
}
.topo-pagina .etiqueta .risco{width:34px;height:2px;background:var(--amarelo);display:block}
.topo-pagina .apoio{color:var(--fraco-escuro);margin-top:var(--e2);max-width:56ch}

/* -------------------------------------------------------------------------
   Duas colunas de texto e figura
   ------------------------------------------------------------------------- */
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:var(--e6);align-items:center}
.duas-colunas.invertida .figura{order:-1}
.figura{margin:0}
.figura img{border-radius:var(--r-superficie);width:100%;object-fit:cover;max-height:460px}

/* -------------------------------------------------------------------------
   Números
   ------------------------------------------------------------------------- */
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5)}
.numero-grande b{
  display:block;font-size:var(--t-secao);font-weight:800;
  color:var(--amarelo);line-height:1;
}
.numero-grande span{display:block;color:#B9BAB7;margin-top:10px;max-width:24ch}

/* -------------------------------------------------------------------------
   Título de seção, com o risco amarelo curto
   ------------------------------------------------------------------------- */
.titulo-secao{margin-bottom:var(--e5)}
.titulo-secao h2{font-size:var(--t-secao);max-width:20ch}
.titulo-secao .apoio{color:var(--texto-fraco);margin-top:12px;max-width:58ch}
.titulo-secao .risco{width:56px;height:4px;background:var(--amarelo);display:block;margin-bottom:var(--e3)}

/* -------------------------------------------------------------------------
   Os três motivos
   ------------------------------------------------------------------------- */
.motivos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.motivo{
  background:var(--carta);border:var(--borda);border-radius:var(--r-superficie);
  padding:var(--e4);position:relative;
}
.motivo .numero{
  font-size:var(--t-destaque);font-weight:800;color:var(--amarelo-texto);
  line-height:1;margin-bottom:var(--e2);display:block;
}
.motivo h3{font-size:var(--t-destaque);margin-bottom:10px}
.motivo p{color:var(--texto-fraco);font-size:var(--t-corpo)}

/* -------------------------------------------------------------------------
   O que a gente troca: grade alternando cor chapada e foto
   É o ritmo da referência que o Luiz escolheu, recriado do zero.
   ------------------------------------------------------------------------- */
.grade-servicos{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.bloco{
  position:relative;min-height:330px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--e5) var(--e4);
}
.bloco.amarelo{background:var(--amarelo);color:var(--preto)}
.bloco.escuro{background:var(--preto);color:#fff}
.bloco.claro{background:var(--carta);color:var(--texto)}
.bloco.foto{padding:0}
.bloco.foto img{width:100%;height:100%;object-fit:cover;min-height:330px}
.bloco h3{font-size:var(--t-destaque);margin-bottom:12px;position:relative;z-index:2}
.bloco p{font-size:var(--t-corpo);position:relative;z-index:2;max-width:34ch}
.bloco.amarelo p{color:#3A2E05}
.bloco.escuro p{color:var(--fraco-escuro)}
.bloco.claro p{color:var(--texto-fraco)}
/* a palavra fantasma ao fundo, como no template de referência */
.bloco .fantasma{
  position:absolute;left:-.06em;bottom:-.34em;z-index:1;pointer-events:none;
}
.bloco .fantasma::after{
  content:var(--palavra,"");
  font-size:7rem;font-weight:800;line-height:.8;
  color:rgba(0,0,0,.07);white-space:nowrap;
}
.bloco.escuro .fantasma::after{color:rgba(255,255,255,.06)}

/* -------------------------------------------------------------------------
   O cupom do ozônio, com a borda picotada
   ------------------------------------------------------------------------- */
.cupom{
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--e6);align-items:center;
}
.cupom-arte{position:relative;padding-bottom:var(--e5)}
.cupom-arte img{border-radius:var(--r-superficie);filter:grayscale(1) contrast(1.06)}

/* A ficha destacável: metade amarela em cima, metade escura embaixo, picote e
   tesoura no meio. É o elemento da referência que o Luiz apontou, refeito aqui
   com a oferta do cliente em vez do desconto em dólar. */
/* a ficha sobra para fora da foto, à direita, como na referência: assim a foto
   continua sendo foto em vez de virar moldura */
.cupom-selo{
  position:absolute;right:-7%;bottom:-6%;width:min(312px,70%);
  border-radius:var(--r-superficie);overflow:visible;
  box-shadow:0 14px 36px rgba(51,51,51,.26);
}
.cupom-selo .metade-cima{
  background:var(--amarelo);color:var(--preto);
  padding:var(--e3) var(--e3) var(--e2);
  border-radius:var(--r-superficie) var(--r-superficie) 0 0;
  text-align:center;
}
.cupom-selo .metade-baixo{
  background:var(--preto);color:#fff;
  padding:var(--e3);
  border-radius:0 0 var(--r-superficie) var(--r-superficie);
  text-align:center;
}
.cupom-selo .de{
  font-size:var(--t-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
}
.cupom-selo .oferta{
  font-size:1.75rem;font-weight:800;line-height:1.05;margin-top:4px;
}
.cupom-selo .oferta b{color:#A33A12}
.cupom-selo .metade-baixo strong{display:block;font-size:var(--t-destaque);font-weight:800}
.cupom-selo .metade-baixo span{display:block;color:var(--amarelo);font-size:var(--t-miudo);margin-top:4px}
.cupom-selo .metade-baixo .botao{margin-top:var(--e2);font-size:var(--t-miudo);padding:12px var(--e3)}

/* o picote, na linha que separa as duas metades */
.cupom-picote{
  position:relative;height:0;
  border-top:2px dashed #fff;
  background:var(--preto);
}
.cupom-tesoura{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;color:#fff;
}
.cupom-texto h2{font-size:var(--t-secao);margin-bottom:var(--e3)}

/* lista com marcador de gota */
.lista-gota{list-style:none;padding:0;margin:var(--e3) 0 0;display:grid;gap:12px}
.lista-gota li{display:flex;gap:12px;align-items:flex-start;line-height:1.45}
.lista-gota svg{width:17px;height:17px;flex:none;margin-top:5px;color:var(--amarelo)}

/* -------------------------------------------------------------------------
   Blog: cartões e texto longo
   ------------------------------------------------------------------------- */
.cartoes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.cartao{
  background:var(--carta);border:var(--borda);border-radius:var(--r-superficie);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.cartao:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.cartao-foto{display:block;aspect-ratio:3/2;overflow:hidden}
.cartao-foto img{width:100%;height:100%;object-fit:cover}
.cartao-corpo{padding:var(--e3) var(--e4) var(--e4);display:flex;flex-direction:column;gap:12px;flex:1}
.cartao h2{font-size:var(--t-destaque);line-height:1.2}
.cartao h2 a{text-decoration:none}
.cartao h2 a:hover{color:var(--amarelo-texto)}
.cartao p{color:var(--texto-fraco);font-size:var(--t-miudo);flex:1}
.cartao .link-seta{align-self:flex-start;font-size:var(--t-miudo)}

.figura-larga img{max-height:420px;width:100%}
.texto-longo{max-width:66ch;margin-top:var(--e5)}
.texto-longo h2{font-size:var(--t-destaque);margin:var(--e5) 0 var(--e2)}
/* a linha do dado que ainda é provisório, para não ler como campo quebrado */
.nota-provisoria{
  font-size:var(--t-miudo);color:var(--texto-fraco);
  border-left:3px solid var(--amarelo);padding-left:var(--e2);
}
.texto-longo .lista-gota{margin-bottom:var(--e3)}
.fim-post{
  max-width:66ch;margin-top:var(--e6);padding-top:var(--e4);
  border-top:3px solid var(--amarelo);
}

/* -------------------------------------------------------------------------
   Prova social
   ------------------------------------------------------------------------- */
.nota{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;margin-bottom:var(--e5)}
.nota .valor{font-size:var(--t-secao);font-weight:800;color:var(--amarelo);line-height:1}
.nota .estrelas{display:flex;gap:3px}
.nota .estrelas svg{width:21px;height:21px;fill:var(--amarelo)}
.nota .quantas{color:var(--fraco-escuro);font-size:var(--t-miudo)}

.depoimentos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.depoimento{
  background:var(--preto-2);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-superficie);padding:var(--e4);
}
.depoimento blockquote{margin:0;font-size:var(--t-corpo);line-height:1.55;color:var(--sobre-escuro)}
.depoimento .aspas{color:var(--amarelo);font-size:var(--t-destaque);font-weight:800;line-height:1;display:block;margin-bottom:var(--e2)}
.depoimento figcaption{margin-top:var(--e3);font-size:var(--t-miudo);color:var(--fraco-escuro)}

/* -------------------------------------------------------------------------
   Onde fica
   ------------------------------------------------------------------------- */
.onde{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--e6);align-items:start}
.onde-dados{display:grid;gap:var(--e3)}
.onde-item{display:flex;gap:var(--e2);align-items:flex-start}
.onde-item svg{width:22px;height:22px;flex:none;color:var(--amarelo);margin-top:3px}
.onde-item b{display:block;font-weight:700}
.onde-item a{text-decoration:none;color:var(--texto-fraco)}
.onde-item a:hover{color:var(--texto)}
.mapa{
  border:0;width:100%;aspect-ratio:16/11;
  border-radius:var(--r-superficie);filter:grayscale(.35);
}

/* -------------------------------------------------------------------------
   Formulário
   Ele não manda nada para servidor nenhum: monta a mensagem e abre o WhatsApp.
   Quem aperta enviar é o visitante, e é isso que a política de privacidade diz.
   ------------------------------------------------------------------------- */
.form{display:grid;gap:var(--e3)}
.form label{display:grid;gap:8px}
.form label span{font-size:var(--t-miudo);font-weight:700;color:var(--sobre-escuro)}
.form input,.form textarea{
  font:inherit;font-size:var(--t-corpo);
  background:var(--preto-2);color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-campo);padding:14px var(--e2);width:100%;
}
.form input::placeholder,.form textarea::placeholder{color:#A5A5A5}
.form input:focus,.form textarea:focus{border-color:var(--amarelo);outline:none}
.form textarea{resize:vertical;min-height:110px}
.form .botao{justify-content:center;border:0;cursor:pointer;font-family:inherit}
.aviso-form{font-size:var(--t-micro);color:var(--fraco-escuro);line-height:1.5}
.aviso-form a{color:var(--amarelo)}

/* -------------------------------------------------------------------------
   Como funciona a visita, os quatro passos
   ------------------------------------------------------------------------- */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4);counter-reset:passo}
.passo{position:relative;padding-top:var(--e4);border-top:3px solid var(--linha)}
.passo::before{
  counter-increment:passo;content:counter(passo);
  position:absolute;top:-19px;left:0;
  width:34px;height:34px;border-radius:var(--r-controle);
  background:var(--amarelo);color:var(--preto);
  font-weight:800;font-size:var(--t-miudo);
  display:grid;place-items:center;
}
.passo h3{font-size:var(--t-destaque);margin-bottom:8px}
.passo p{color:var(--texto-fraco);font-size:var(--t-miudo)}

/* -------------------------------------------------------------------------
   Chamada final
   ------------------------------------------------------------------------- */
.chamada{background:var(--amarelo);color:var(--preto);text-align:center}
.chamada h2{font-size:var(--t-secao);margin-bottom:var(--e2)}
.chamada p{color:#4A3B06;margin-inline:auto;max-width:52ch}
.chamada .botao{background:var(--preto);border-color:var(--preto);color:#fff;margin-top:var(--e4)}
.chamada .botao:hover{box-shadow:0 8px 20px rgba(51,51,51,.34)}

/* -------------------------------------------------------------------------
   Rodapé
   ------------------------------------------------------------------------- */
.rodape{background:var(--preto);color:var(--fraco-escuro);font-size:var(--t-miudo);padding-block:var(--e6) var(--e4)}
.rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--e5);margin-bottom:var(--e5)}
.rodape img{height:52px;width:auto;margin-bottom:var(--e3)}
.rodape h3{font-size:var(--t-miudo);text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:var(--e2)}
.rodape ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.rodape a{text-decoration:none}
.rodape a:hover{color:var(--amarelo)}
.rodape-fim{
  border-top:1px solid rgba(255,255,255,.1);padding-top:var(--e3);
  display:grid;gap:6px;font-size:var(--t-micro);color:var(--fraco-escuro);
}
.rodape-fim b{color:#FFFFFF;font-weight:700}
.rodape-autor a{color:#FFFFFF;text-decoration:underline}

/* -------------------------------------------------------------------------
   Faixa do cupom no rodapé da tela, no celular
   No computador ela não aparece: lá a oferta vira a caixa de aviso.
   Faixa fina não cobre o conteúdo, e por isso não entra na regra de popup
   intrusivo do Google, que vale para a página de entrada no celular.
   ------------------------------------------------------------------------- */
.faixa-oferta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;align-items:center;gap:var(--e2);
  background:var(--amarelo);color:var(--preto);
  padding:12px var(--e2);box-shadow:0 -6px 20px rgba(0,0,0,.18);
  font-size:var(--t-miudo);font-weight:600;line-height:1.3;
}
.faixa-oferta[data-abre="sim"]{display:flex}
.faixa-oferta a{font-weight:800;text-decoration:underline;white-space:nowrap}
.faixa-oferta button{
  margin-left:auto;background:none;border:0;cursor:pointer;color:inherit;
  font-size:var(--t-destaque);line-height:1;padding:0 4px;
}

/* a caixa do computador, que abre quando a pessoa terminou de ler os serviços.
   Ela sobe acima do botão de WhatsApp, senão os dois se cobrem no canto. */
.aviso-oferta{
  position:fixed;right:var(--e4);bottom:96px;z-index:60;width:340px;
  background:var(--carta);border-radius:var(--r-superficie);box-shadow:var(--sombra);
  border:var(--borda);padding:var(--e4);display:none;
}
.aviso-oferta[data-abre="sim"]{display:block;animation:sobe .35s ease both}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.aviso-oferta h3{font-size:var(--t-destaque);margin-bottom:10px}
.aviso-oferta p{color:var(--texto-fraco);font-size:var(--t-miudo)}
.aviso-oferta .fecha{
  position:absolute;top:10px;right:12px;background:none;border:0;cursor:pointer;
  font-size:var(--t-destaque);line-height:1;color:var(--texto-fraco);
}

/* -------------------------------------------------------------------------
   Botão de WhatsApp da casa, da etapa 5-B da /novo-site
   ------------------------------------------------------------------------- */
.orbtra-zap{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:flex;align-items:center;gap:10px;text-decoration:none;
}
.orbtra-zap-circulo{
  width:58px;height:58px;border-radius:50%;flex:none;position:relative;
  display:grid;place-items:center;background:#25D366;color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.28);transition:transform .2s ease;
}
.orbtra-zap-circulo::before{
  content:"";position:absolute;width:58px;height:58px;border-radius:50%;
  background:#25D366;opacity:.55;animation:orbtra-zap-pulso 3s ease-out infinite;
}
@keyframes orbtra-zap-pulso{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1.7);opacity:0}
}
.orbtra-zap-circulo svg{position:relative}
.orbtra-zap-balao{
  background:#fff;color:var(--preto);
  font-size:14px;font-weight:600;line-height:1;
  padding:11px 15px;border-radius:var(--r-controle);white-space:nowrap;
  box-shadow:0 3px 12px rgba(0,0,0,.18);
  opacity:0;transform:translateX(10px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.orbtra-zap:hover .orbtra-zap-balao,
.orbtra-zap:focus-visible .orbtra-zap-balao{opacity:1;transform:translateX(0)}
.orbtra-zap:hover .orbtra-zap-circulo{transform:scale(1.06)}
.orbtra-zap:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:var(--r-controle)}

/* -------------------------------------------------------------------------
   O velocímetro de carregamento
   Pedido do Luiz em 16/10, vindo do template de referência.

   ⚠️ Ele NÃO atrasa o site. A tela some assim que a página fica pronta, e tem
   teto de 900ms para o caso de uma imagem travar. Tela de carregamento que
   segura um site estático é enfeite que custa visita.
   Some também para quem pediu menos animação no sistema, e quem já viu uma vez
   na sessão não vê de novo.
   ------------------------------------------------------------------------- */
.carregando{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--preto);
  transition:opacity .45s ease,visibility .45s ease;
}
.carregando[data-pronto="sim"]{opacity:0;visibility:hidden}
.velocimetro{width:118px;height:118px;color:var(--amarelo)}
.velocimetro .trilho{stroke:rgba(255,255,255,.14)}
.velocimetro .arco{
  stroke:var(--amarelo);
  stroke-dasharray:236;stroke-dashoffset:236;
  animation:enche 1.1s cubic-bezier(.4,0,.2,1) infinite alternate;
}
.velocimetro .ponteiro{
  transform-origin:60px 62px;
  animation:gira 1.1s cubic-bezier(.4,0,.2,1) infinite alternate;
}
@keyframes enche{from{stroke-dashoffset:236}to{stroke-dashoffset:56}}
@keyframes gira{from{transform:rotate(-36deg)}to{transform:rotate(100deg)}}
.carregando .marca-carga{
  margin-top:var(--e3);font-size:var(--t-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fraco-escuro);text-align:center;
}
@media (prefers-reduced-motion:reduce){ .carregando{display:none} }

/* -------------------------------------------------------------------------
   Acessibilidade e foco
   ------------------------------------------------------------------------- */
:where(a,button,input,textarea,select):focus-visible{
  outline:3px solid var(--amarelo);outline-offset:3px;border-radius:4px;
}
.pula{
  position:absolute;left:-9999px;top:0;background:var(--amarelo);color:var(--preto);
  padding:12px var(--e3);font-weight:700;z-index:100;border-radius:0 0 var(--r-superficie) 0;
}
.pula:focus{left:0}

/* quem pediu menos animação no sistema não recebe nenhuma.
   É gente com enxaqueca ou sensibilidade vestibular, e laço de animação
   incomoda de verdade. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .orbtra-zap-circulo::before{opacity:0}
}

/* -------------------------------------------------------------------------
   Telas menores
   ------------------------------------------------------------------------- */
@media (max-width:980px){
  .motivos,.grade-servicos,.depoimentos,.passos,.numeros,.cartoes{grid-template-columns:repeat(2,1fr)}
  .cupom,.onde,.duas-colunas{grid-template-columns:1fr;gap:var(--e5)}
  /* no empilhado a figura vai sempre depois do texto, senão a invertida fica
     com a foto antes do título e a página começa sem assunto */
  .duas-colunas.invertida .figura{order:0}
  .topo-gota{width:46vw;right:-8%}
  .rodape-grade{grid-template-columns:1fr 1fr}
  .heroi-gota{width:60vw;right:-18%;opacity:.7}
}
@media (max-width:680px){
  :root{--e6:56px;--e7:72px}
  .motivos,.grade-servicos,.depoimentos,.passos,.numeros,.cartoes{grid-template-columns:1fr}
  .numeros{gap:var(--e4)}
  .rodape-grade{grid-template-columns:1fr;gap:var(--e4)}
  .barra-topo .separa{margin-left:0}
  .barra-topo .so-grande{display:none}

  .abre-menu{display:block}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;background:var(--preto-2);
    border-bottom:1px solid rgba(255,255,255,.1);padding:var(--e2) var(--e3);
  }
  .menu[data-abre="sim"]{display:flex}
  /* display:block, senão o link é inline e a linha separadora acompanha o
     tamanho do texto, ficando com um comprimento diferente em cada item */
  .menu a{display:block;padding-block:14px;border-bottom:1px solid rgba(255,255,255,.07)}
  .menu li:last-child a{border-bottom:0}
  /* a página atual se marca pela cor, não pela linha: no empilhado a linha
     amarela atravessa o item de ponta a ponta e lê como divisória */
  .menu a[aria-current="page"]{color:var(--amarelo);border-bottom-color:rgba(255,255,255,.07)}
  /* ⚠️ o painel se ancora na .cabeca, não na .dentro. Ancorado na .dentro ele
     parava 16px antes de cada borda e sobrava foto dos dois lados. */

  .bloco{min-height:260px}
  .bloco.foto img{min-height:220px}
  .bloco .fantasma{font-size:4.5rem}
  .cupom-selo{position:static;width:auto;margin-top:calc(var(--e3) * -1)}

  /* no celular o balão do WhatsApp não cabe e atrapalha o toque */
  .orbtra-zap{right:16px;bottom:16px}
  .orbtra-zap-balao{display:none}
  /* a faixa da oferta empurra o botão do zap para cima, senão eles se cobrem */
  body:has(.faixa-oferta[data-abre="sim"]) .orbtra-zap{bottom:76px}

  /* a caixa do computador não existe no celular. Lá quem avisa é a faixa */
  .aviso-oferta{display:none!important}
}
@media (min-width:681px){
  .faixa-oferta{display:none!important}
}

@media print{
  .orbtra-zap,.faixa-oferta,.aviso-oferta,.cabeca,.barra-topo{display:none!important}
}