/* ============================================================
   Brasmar Fumigation
   Folha de estilo unica. Para trocar as cores, edite o :root abaixo.
   ============================================================ */

:root{
  --tinta:#241315;
  --tinta-2:#38191C;
  --vinho:#8A2C30;
  --ouro:#C9A45C;
  --sup:#F6F4F0;
  --sup-2:#EBE7DF;
  --linha:#E9E5DD;
  --texto:#1A1513;
  --texto-2:#5D5550;
  --texto-3:#948A83;
  --branco:#fff;

  --fonte:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --largura:1240px;
  --r:22px;
  --r-md:16px;
  --r-sm:10px;
  --pill:999px;
  --sombra:0 20px 50px -30px rgba(26,21,19,.40);
  --tr:220ms cubic-bezier(.4,0,.2,1);
  --header-h:88px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{
  margin:0;font-family:var(--fonte);font-size:17px;line-height:1.6;
  color:var(--texto);background:var(--branco);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* o menu mobile fica fora da tela com translateX(100%): mesmo fora de vista,
     um elemento position:fixed transladado ainda conta para a largura rolavel
     da pagina em alguns motores de navegador, o que cria rolagem horizontal
     fantasma. Isso corta esse comportamento. */
}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:var(--vinho);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--vinho);outline-offset:3px;border-radius:6px}
::selection{background:var(--tinta);color:#fff}

/* text-wrap:balance divide o titulo em linhas de largura parecida, em vez de
   encher a primeira e largar uma palavra sozinha embaixo. Em paragrafo, o
   "pretty" so evita a ultima linha com uma palavra. Navegador antigo ignora
   as duas e quebra como antes, sem quebrar nada. */
h1,h2,h3,h4{font-family:var(--fonte);font-weight:600;line-height:1.06;margin:0 0 .45em;letter-spacing:-.035em;color:var(--texto);text-wrap:balance}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
h2{font-size:clamp(1.85rem,3.7vw,2.85rem)}
h3{font-size:clamp(1.12rem,1.8vw,1.32rem);letter-spacing:-.022em}
p{margin:0 0 1em;text-wrap:pretty}
ul{margin:0 0 1em;padding-left:1.2em}
li{margin-bottom:.3em}
strong,b{font-weight:600}
.lead{font-size:clamp(1.02rem,1.35vw,1.12rem);color:var(--texto-2);line-height:1.55;text-wrap:pretty}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:26px}
.secao{padding-block:clamp(58px,7vw,106px)}
.secao--compacta{padding-block:clamp(34px,4vw,58px)}
.secao:not(.secao--sup):not(.secao--escura):not(.secao--faixa)+.secao:not(.secao--sup):not(.secao--escura):not(.secao--faixa){padding-top:0}
.secao--faixa{padding-block:0}
.secao:has(+ .secao--faixa){padding-bottom:clamp(40px,4.6vw,66px)}
.secao--faixa+.secao{padding-top:clamp(40px,4.6vw,66px)}
/* o mapa ja vem com bastante ar em volta do desenho, entao a secao dele usa
   folga reduzida, igual em cima e embaixo. Vem depois da regra
   .secao--faixa+.secao de proposito: mesma especificidade, esta ganha. */
.secao:has(.presenca){padding-block:clamp(26px,2.8vw,42px)}
/* so junta o respiro quando as DUAS secoes sao brancas: a emenda e invisivel
   e o espaco dobrado nao serve pra nada. Sempre que uma secao tem fundo
   proprio (de um lado ou do outro), a mudanca de cor e um limite visivel de
   verdade e cada lado mantem o respiro inteiro dela. */
.secao--sup{background:var(--sup)}
.secao--escura{
  color:#D9CBC2;
  background:
    radial-gradient(66% 96% at 84% 0%, rgba(201,164,92,.10), rgba(201,164,92,0) 60%),
    radial-gradient(74% 100% at 4% 100%, rgba(138,44,48,.15), rgba(138,44,48,0) 62%),
    var(--tinta)
}
.secao--escura h1,.secao--escura h2,.secao--escura h3,.secao--escura h4{color:#fff}
.secao--escura p{color:#BCADA4}
.medida{max-width:56ch}
.grade{display:grid;gap:24px}
.grade--2{grid-template-columns:repeat(2,1fr)}

.etiq{
  display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.02em;
  padding:6px 14px;border-radius:var(--pill);background:var(--sup);color:var(--texto-2);
  margin:0 0 20px
}
.secao--escura .etiq,.hero .etiq{background:rgba(255,255,255,.10);color:#E2D4C9}
.tit-bloco{max-width:20ch}
.tit-bloco--larga{max-width:28ch}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:15px 32px;border-radius:var(--pill);
  font-family:var(--fonte);font-size:.97rem;font-weight:600;line-height:1.2;
  letter-spacing:-.01em;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:background var(--tr),color var(--tr),border-color var(--tr),transform var(--tr)
}
.btn:hover{transform:translateY(-2px)}
.btn--principal{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.btn--principal:hover{background:var(--vinho);border-color:var(--vinho);color:#fff}
.btn--secundario{background:transparent;color:var(--texto);border-color:rgba(26,21,19,.16)}
.btn--secundario:hover{background:var(--ouro);border-color:var(--ouro);color:var(--tinta)}
.btn--ouro{background:#fff;color:var(--tinta);border-color:#fff}
.btn--ouro:hover{background:var(--ouro);border-color:var(--ouro);color:var(--tinta)}
.btn--contorno-claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.30)}
.btn--contorno-claro:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5);color:#fff}
.btn-grupo{display:flex;flex-wrap:wrap;gap:12px}

.link{
  display:inline-block;font-size:.95rem;font-weight:600;text-decoration:none;color:var(--texto);
  border-bottom:1.5px solid var(--ouro);padding-bottom:3px;transition:color var(--tr),border-color var(--tr)
}
.link:hover{color:var(--vinho);border-color:var(--vinho)}

/* ============================================================
   CABECALHO
   ============================================================ */
.topo-fixo{position:sticky;top:0;z-index:70;transition:transform 320ms ease}
body.perto-do-rodape .topo-fixo{transform:translateY(-100%)}

.idiomas{display:flex;align-items:center;gap:2px;background:var(--sup);border-radius:var(--pill);padding:3px 10px 3px 3px}
.idiomas__globo{width:15px;height:15px;flex:none;color:var(--texto-3);margin:0 4px 0 5px}
.idiomas a{
  padding:6px 13px;font-size:.76rem;font-weight:700;
  border-radius:var(--pill);color:var(--texto-3);text-decoration:none;transition:all var(--tr)
}
.idiomas a[aria-current="true"]{color:#fff;background:var(--tinta)}
.idiomas a:not([aria-current]):hover{color:var(--texto)}
.idiomas-cab{display:flex;margin-left:18px}
@media (max-width:880px){.idiomas-cab{display:none}}

.cabecalho{background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(14px);transition:box-shadow var(--tr)}
.cabecalho__inner{display:flex;align-items:center;gap:18px;height:var(--header-h);transition:height 300ms cubic-bezier(.4,0,.2,1)}

body.rolou .cabecalho{box-shadow:0 4px 26px -16px rgba(26,21,19,.30)}
body.rolou .cabecalho__inner{height:68px}
body.rolou .marca img{height:46px}

.marca{flex:none;display:inline-flex;align-items:center;text-decoration:none}
.marca img{height:58px;width:auto;flex:none;transition:height 300ms cubic-bezier(.4,0,.2,1)}
/* o rodape usa o arquivo creme da marca, feito para fundo escuro */
.marca--rodape img{height:84px}

.cabecalho__nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.cabecalho__nav>a:not(.btn){
  padding:10px 16px;border-radius:var(--pill);font-size:.94rem;font-weight:500;letter-spacing:-.01em;
  color:var(--texto-2);text-decoration:none;transition:background var(--tr),color var(--tr)
}
.cabecalho__nav>a:not(.btn):hover{background:var(--sup);color:var(--texto)}
.cabecalho__nav>a:not(.btn)[aria-current="page"]{background:var(--sup);color:var(--texto);font-weight:600}
.cabecalho .btn{margin-left:14px;min-height:48px;padding:12px 26px;font-size:.9rem}
.nav-extra{display:none}

.menu-btn{
  display:none;margin-left:auto;width:50px;height:50px;align-items:center;justify-content:center;
  background:var(--sup);border:0;border-radius:var(--pill);cursor:pointer;color:var(--texto)
}
.menu-btn span{display:block;width:19px;height:2px;border-radius:2px;background:currentColor;position:relative;transition:var(--tr)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:19px;height:2px;border-radius:2px;background:currentColor;transition:var(--tr)}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
/* LUZ DOS BLOCOS CHAPADOS
   Os quatro blocos de cor cheia (topo, credenciamentos, CTA e rodape) levam
   duas manchas de opacidade muito baixa para nao ficarem sem relevo. Nos
   blocos escuros: ouro vindo de cima e vinho vindo de baixo. No CTA, que e
   claro: branco de cima e vinho de baixo. Para tirar a luz de um bloco, apague
   as duas linhas radial-gradient e deixe so a cor. */
.hero{
  color:#fff;padding-block:clamp(44px,6vw,78px) clamp(52px,6vw,86px);
  background:
    radial-gradient(72% 92% at 76% 4%, rgba(201,164,92,.09), rgba(201,164,92,0) 60%),
    radial-gradient(82% 100% at 6% 98%, rgba(138,44,48,.14), rgba(138,44,48,0) 64%),
    var(--tinta)
}
.hero__grade{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,4vw,58px);align-items:center}
.hero__conteudo{min-width:0}
.hero h1{color:#fff;letter-spacing:-.042em;margin-bottom:.3em}
.hero p{color:#BCACA3;font-size:clamp(1.02rem,1.35vw,1.14rem);max-width:44ch}
.hero .btn-grupo{margin-top:32px}

.hero__midia{position:relative}
.hero__foto{border-radius:var(--r);overflow:hidden;background:var(--tinta-2)}
.hero__foto img{width:100%;aspect-ratio:4/3.3;object-fit:cover}
.hero__selos{
  position:absolute;left:clamp(14px,1.8vw,22px);bottom:clamp(14px,1.8vw,22px);
  list-style:none;margin:0;padding:0;max-width:calc(100% - 32px);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px
}
.hero__selo{
  display:inline-flex;align-items:baseline;gap:8px;
  background:rgba(20,10,11,.44);
  backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--pill);
  padding:7px 14px;font-size:.76rem;line-height:1.25;letter-spacing:.005em;
  color:var(--ouro);font-weight:600
}
.hero__selo b{color:#fff;font-weight:400}

/* ============================================================
   NUMEROS
   ============================================================ */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.num{background:var(--sup);border-radius:var(--r-md);padding:30px 26px 28px}
.num__valor{
  font-size:clamp(2.4rem,4.2vw,3.2rem);font-weight:600;color:var(--texto);
  line-height:1;letter-spacing:-.05em;display:flex;align-items:flex-start
}
.num__valor sup{font-size:.4em;font-weight:600;line-height:1.3;margin-left:2px;color:var(--vinho)}
.num__rotulo{margin-top:14px;font-size:.87rem;color:var(--texto-2);line-height:1.4;text-wrap:balance}

/* ============================================================
   ACORDEAO DE SERVICOS
   ============================================================ */
.acordeao{border-top:1px solid var(--linha)}
.item{border-bottom:1px solid var(--linha)}
.item__grade{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(20px,3vw,42px);align-items:stretch}
.item__esq{padding:22px 0 24px;min-width:0}
.item__cab{
  display:grid;grid-template-columns:54px 1fr 30px;gap:12px;align-items:center;
  width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--fonte);color:var(--texto)
}
.item__n{font-size:.8rem;font-weight:500;color:var(--texto-3);letter-spacing:.02em}
.item__tit{font-size:clamp(1.15rem,1.9vw,1.42rem);font-weight:600;letter-spacing:-.025em;line-height:1.2;transition:color var(--tr)}
.item__cab:hover .item__tit{color:var(--vinho)}
.item__mais{position:relative;width:20px;height:20px;justify-self:end;opacity:.5;transition:opacity var(--tr),transform var(--tr)}
.item__mais::before,.item__mais::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);transition:opacity var(--tr)
}
.item__mais::before{width:14px;height:1.5px}
.item__mais::after{width:1.5px;height:14px}
.item.aberto .item__mais{opacity:1}
.item.aberto .item__mais::after{opacity:0}

.item__corpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows 460ms cubic-bezier(.4,0,.2,1)}
.item.aberto .item__corpo{grid-template-rows:1fr}
.item__corpo>div{overflow:hidden}
.item__texto{padding:12px 30px 4px 66px;max-width:62ch}
.item__texto p{color:var(--texto-2);font-size:.97rem;margin:0 0 .9em}
.item__texto .link{margin-top:4px}

.item__tile{position:relative;background:var(--sup-2);border-radius:var(--r-md);overflow:hidden;margin:14px 0}
.item__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 420ms ease}
.item.aberto .item__tile img{opacity:1}

/* ============================================================
   CREDENCIAMENTOS
   ============================================================ */
/* Faixa de selos da home: as marcas reais numa linha so, sem cartao nem
   texto corrido. Cada selo tem uma altura propria (--selo-h) porque as artes
   tem proporcoes bem diferentes: so igualar a altura deixaria a ANEC gigante
   e a Gafta minuscula. */
.faixa-selos{
  /* mesma cor do rodape (--tinta), com a luz fraca dos blocos chapados */
  border-radius:var(--r);
  background:
    radial-gradient(66% 96% at 84% 0%, rgba(201,164,92,.10), rgba(201,164,92,0) 60%),
    radial-gradient(74% 100% at 4% 100%, rgba(138,44,48,.15), rgba(138,44,48,0) 62%),
    var(--tinta);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:clamp(32px,5vw,70px);
  padding:clamp(36px,4.6vw,66px) clamp(26px,4vw,60px);
}
.faixa-selos h2{
  color:#fff;margin:0 0 clamp(22px,2.6vw,32px);max-width:15ch;
  font-size:clamp(1.75rem,3.4vw,2.6rem);line-height:1.08;letter-spacing:-.035em;font-weight:600
}
.faixa-selos__lista{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:clamp(20px,2.6vw,38px)
}
.faixa-selos__lista li{margin:0;display:flex;align-items:center}
/* selos soltos no cartao, na arte creme (o cartao e vinho). Cada arte tem
   proporcao diferente: igualar a altura deixaria a ANEC gigante e a Gafta
   minuscula, entao cada selo tem a sua (--selo-h). */
.faixa-selos__lista img{display:block;width:auto;max-width:100%;height:var(--selo-h,60px)}
/* tira solta na pagina Credenciamentos, logo abaixo do titulo */
.selos-tira{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(30px,5vw,68px)
}
.selos-tira li{margin:0;display:flex;align-items:center}
/* sem altura propria aqui: usa a mesma escala do cartao da home,
   definida em .selo-marca--* logo abaixo */
.selos-tira img{display:block;width:auto;max-width:100%;height:var(--selo-h,60px)}

.selo-marca--mapa{--selo-h:clamp(56px,6.6vw,84px)}
.selo-marca--gafta{--selo-h:clamp(74px,8.8vw,112px)}
.selo-marca--anec{--selo-h:clamp(29px,3.5vw,44px)}
.selo-marca--abrapos{--selo-h:clamp(52px,6.1vw,76px)}

.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cred{background:var(--sup);border-radius:var(--r-md);padding:28px 26px 30px;transition:background var(--tr),transform var(--tr)}
.cred__selo{width:46px;height:44px;color:var(--ouro);margin-bottom:14px}
.cred:hover{background:var(--sup-2);transform:translateY(-3px)}
.cred__org{font-size:1.4rem;font-weight:600;letter-spacing:-.03em;margin:0 0 10px}
.cred p{font-size:.93rem;color:var(--texto-2);margin:0;line-height:1.5}
.secao--escura .cred{background:rgba(255,255,255,.06)}
.secao--escura .cred:hover{background:rgba(255,255,255,.1)}
.secao--escura .cred__org{color:#fff}
.secao--escura .cred__selo{color:var(--ouro)}
.secao--escura .cred p{color:#BCADA4}

/* cartoes sobre fundo cinza claro ficam brancos */
.secao--sup .cred,.secao--sup .valor,.secao--sup .painel,
.secao--sup .form,.secao--sup .dado,
.secao--sup .num{background:#fff}
.secao--sup .cred:hover,.secao--sup .valor:hover{background:#fff;box-shadow:var(--sombra)}
.secao--sup .etiq{background:#fff}
.secao--sup .campo input,.secao--sup .campo select,.secao--sup .campo textarea{background:var(--sup)}
.secao--sup .lista-check li,.secao--sup .servico__num{background:#fff}

/* ============================================================
   PRESENCA
   ============================================================ */
/* MAPA
   Desenhado como uma rede de pontos ligados, nao como uma mancha cheia: o
   contorno e um fio, por dentro corre uma malha de triangulos e por fora ficam
   pontinhos soltos. Os pontos e as linhas saem de _gerador/mapa.py e sao
   sempre os mesmos (sorteio com semente fixa). Fundo creme, tudo em vinho.
   Nao ha mais lista de portos ao lado: passando o cursor (ou tocando) num
   ponto, abre a caixinha branca com os portos daquela regiao. */
/* titulo e mapa dividem a largura; o mapa nao tem mais moldura, o desenho
   assenta direto na pagina */
.presenca{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,64px);align-items:center
}
.mapa-caixa{position:relative;width:100%}
.mapa{width:100%;height:auto;display:block}
.mapa .agua{fill:transparent}
/* opacidades calibradas para fundo branco: no creme elas ficavam mais fortes */
.mapa .terra{fill:rgba(138,44,48,.055);stroke:var(--vinho);stroke-width:1.2;opacity:1}
.mapa .malha{fill:none;stroke:var(--vinho);stroke-width:.65;opacity:.42}
.mapa .malha__no{fill:none;stroke:var(--vinho);stroke-width:2.6;stroke-linecap:round;opacity:.6}
.mapa .poeira{fill:none;stroke:var(--vinho);stroke-width:1.9;stroke-linecap:round;opacity:.3}

.mapa .rota{fill:none;stroke:var(--vinho);stroke-width:1.1;stroke-dasharray:1 5;stroke-linecap:round;opacity:.38;transition:opacity 260ms ease}
.mapa .rota.on{opacity:.9;stroke-width:1.4;animation:fluxo-rota 1.1s linear infinite}
@keyframes fluxo-rota{to{stroke-dashoffset:-12}}

.mapa .marcador{cursor:pointer}
.mapa .marcador:focus{outline:none}
.mapa .marcador:focus-visible .marcador__fundo{stroke-width:2.6}
/* circulo invisivel maior que o ponto, so para o alvo do toque no celular */
.mapa .marcador__toque{fill:transparent}
.mapa .marcador__fundo{fill:#fff;stroke:var(--vinho);stroke-width:1.4;opacity:.9;transition:opacity 220ms ease,stroke-width 220ms ease}
.mapa .marcador__icone{color:var(--vinho);opacity:.75;transition:opacity 220ms ease}
.mapa .marcador.base .marcador__fundo{opacity:1;stroke:var(--ouro);stroke-width:2.2}
.mapa .marcador.base .marcador__icone{opacity:1}
.mapa .marcador:hover .marcador__fundo,.mapa .marcador.on .marcador__fundo{opacity:1;stroke-width:2.4}
.mapa .marcador:hover .marcador__icone,.mapa .marcador.on .marcador__icone{opacity:1}
.mapa .halo{
  fill:none;stroke:var(--vinho);stroke-width:1.5;opacity:0;
  transform-box:fill-box;transform-origin:center
}
.mapa .halo.on{opacity:1;animation:pulso 2s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}

/* caixinha branca que abre no ponto */
.mapa-dica{
  /* branca sobre o creme do mapa: sem contorno e sombra firme ela some */
  position:absolute;z-index:3;background:#fff;border-radius:var(--r-md);
  border:1px solid rgba(138,44,48,.16);
  padding:14px 18px;min-width:176px;max-width:240px;pointer-events:none;
  box-shadow:0 22px 46px -20px rgba(42,16,18,.55),0 3px 10px rgba(42,16,18,.10)
}
.mapa-dica__reg{
  display:block;font-size:.64rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:9px
}
.mapa-dica__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.mapa-dica__lista li{
  margin:0;display:flex;align-items:baseline;gap:8px;
  font-size:.88rem;color:var(--texto-2)
}
.mapa-dica__lista li b{font-weight:500}
.mapa-dica__lista li span{margin-left:auto;font-size:.72rem;opacity:.6;font-weight:600}
.mapa-dica__lista li.atual{color:var(--vinho)}
.mapa-dica__lista li.atual b{font-weight:700}

/* ============================================================
   SERVICOS (pagina interna)
   ============================================================ */
.servico{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,58px);
  align-items:center;padding-block:clamp(30px,4vw,54px)
}
.servico:nth-of-type(even) .servico__midia{order:-1}
.servico__midia img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.servico__num{
  display:inline-block;font-size:.78rem;font-weight:600;color:var(--texto-2);
  background:var(--sup);padding:7px 15px;border-radius:var(--pill);margin-bottom:16px
}
.servico h2{font-size:clamp(1.55rem,2.6vw,2.05rem)}
.lista-check{list-style:none;padding:0;margin:1.2em 0 0;display:flex;flex-direction:column;gap:7px}
.lista-check li{
  position:relative;padding:13px 18px 13px 44px;margin:0;background:var(--sup);
  border-radius:var(--r-sm);font-size:.93rem;color:var(--texto-2);line-height:1.45
}
.lista-check li::before{
  content:"";position:absolute;left:18px;top:1.25em;width:10px;height:6px;
  border-left:1.8px solid var(--vinho);border-bottom:1.8px solid var(--vinho);transform:rotate(-45deg)
}

/* ============================================================
   VALORES E PAINEIS
   ============================================================ */
.valores{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.valor{background:var(--sup);border-radius:var(--r-md);padding:26px 24px 28px;transition:background var(--tr),transform var(--tr)}
.valor:hover{background:var(--sup-2);transform:translateY(-3px)}
.valor__num{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;
  /* bolinha no ouro da marca; o numero em tinta da 7,6:1 de contraste */
  background:var(--ouro);color:var(--tinta);font-size:.8rem;font-weight:600;margin-bottom:16px
}
.valor h3{font-size:1.08rem;margin-bottom:.3em}
.valor p{margin:0;color:var(--texto-2);font-size:.93rem}

.painel{background:var(--sup);border-radius:var(--r);padding:34px 32px 36px}
.painel h3{margin-bottom:.45em}
.painel p{color:var(--texto-2);margin:0}

/* ============================================================
   CTA
   ============================================================ */
.cta{
  /* Ouro da marca. Alternativas ja testadas: var(--vinho) e var(--sup-2). */
  color:var(--tinta);border-radius:var(--r);
  background:
    radial-gradient(66% 96% at 14% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%),
    radial-gradient(76% 100% at 94% 100%, rgba(138,44,48,.13), rgba(138,44,48,0) 60%),
    var(--ouro);
  padding:clamp(38px,5vw,66px);display:grid;
  grid-template-columns:auto auto;justify-content:start;align-items:center;
  gap:clamp(30px,7vw,108px)
}
.cta h2{color:var(--tinta);margin:0;max-width:22ch}
/* botao maior: no CTA ele e a unica acao do bloco */
.cta .btn{min-height:64px;padding:19px 40px;font-size:1.04rem}

/* ============================================================
   FORMULARIO E CONTATO
   ============================================================ */
.contato{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,58px);align-items:start}
.form{display:grid;gap:16px;background:var(--sup);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
.campo{display:grid;gap:7px}
.campo label{font-size:.84rem;font-weight:600;color:var(--texto-2)}
.campo label .req{color:var(--vinho);margin-left:2px}
.campo input,.campo select,.campo textarea{
  font-family:inherit;font-size:1rem;color:var(--texto);background:#fff;
  border:1.5px solid transparent;border-radius:var(--r-sm);padding:14px 16px;min-height:52px;width:100%;
  transition:border-color var(--tr),box-shadow var(--tr)
}
.campo textarea{min-height:130px;resize:vertical;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--tinta);box-shadow:0 0 0 4px rgba(36,19,21,.07)
}
.campo-duplo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__aviso{font-size:.8rem;color:var(--texto-3);margin:0}
.form__estado{padding:14px 18px;border-radius:var(--r-sm);font-size:.93rem;display:none}
.form__estado[data-tipo="ok"]{display:block;background:#EAF3EB;color:#1E5B2E}
.form__estado[data-tipo="erro"]{display:block;background:#F9EBE9;color:#8B2018}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}

.dados{display:grid;gap:10px}
.dado{display:flex;gap:16px;background:var(--sup);border-radius:var(--r-md);padding:20px 22px}
.dado__icone{width:38px;height:38px;flex:none;border-radius:50%;background:#fff;color:var(--ouro);display:grid;place-items:center}
.dado__icone svg{width:18px;height:18px}
.dado__rotulo{font-size:.71rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-3);margin-bottom:4px}
.dado a{text-decoration:none;font-weight:500;color:var(--texto)}
.dado a:hover{color:var(--vinho)}
.mapa-embed{border:0;width:100%;height:300px;display:block;border-radius:var(--r-md);filter:saturate(.8)}

/* ============================================================
   TOPO DE PAGINA INTERNA
   ============================================================ */
.pagina-topo{background:var(--sup);padding-block:clamp(38px,4.6vw,62px) clamp(44px,5vw,70px)}
.pagina-topo h1{margin-bottom:.24em;max-width:16ch}
.pagina-topo .lead{max-width:52ch;margin:0}
.migalhas{font-size:.8rem;color:var(--texto-3);margin-bottom:1.4em}
.migalhas a{color:var(--texto-2);text-decoration:none}
.migalhas a:hover{color:var(--vinho)}

/* ============================================================
   RODAPE
   ============================================================ */
.rodape{
  color:#fff;padding-block:56px 0;font-size:.92rem;
  background:
    radial-gradient(56% 90% at 90% 0%, rgba(201,164,92,.08), rgba(201,164,92,0) 60%),
    radial-gradient(68% 100% at 6% 100%, rgba(138,44,48,.08), rgba(138,44,48,0) 62%),
    var(--tinta)
}
.rodape__topo{display:flex;flex-wrap:wrap;gap:32px 48px;align-items:flex-start;padding-bottom:44px}
.rodape__nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}
.idiomas-rod{display:flex;align-items:center;gap:8px;font-size:.82rem}
.idiomas-rod .idiomas__globo{width:15px;height:15px;color:#8A7A70;margin-right:2px}
.idiomas-rod a{color:#8A7A70;text-decoration:none;font-weight:600;letter-spacing:.02em;transition:color var(--tr)}
.idiomas-rod a:hover{color:#fff}
.idiomas-rod a[aria-current="true"]{color:#fff}
.rodape__nav a{color:#fff;text-decoration:none;font-weight:500;transition:color var(--tr)}
.rodape__nav a:hover{color:var(--ouro)}
.rodape__contato{display:flex;flex-wrap:wrap;gap:8px 36px;padding-bottom:32px;font-size:.88rem}
.rodape__contato a{color:#fff;text-decoration:none}
.rodape__contato a:hover{color:var(--ouro)}
.rodape__contato span{color:#fff}
.rodape__base{
  border-top:1px solid rgba(255,255,255,.14);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;align-items:center;
  font-size:.79rem;color:rgba(255,255,255,.62)
}

/* ============================================================
   ANIMACAO DE ENTRADA
   ============================================================ */
.revelar{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1)}
.revelar.visivel{opacity:1;transform:none}
.revelar[data-atraso="1"]{transition-delay:.08s}
.revelar[data-atraso="2"]{transition-delay:.16s}
.revelar[data-atraso="3"]{transition-delay:.24s}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  .nums,.creds,.valores{grid-template-columns:repeat(2,1fr)}
  .presenca,.contato{grid-template-columns:1fr}
  .presenca{gap:12px}
  .cta{grid-template-columns:1fr;gap:28px}
  /* Empilhado, os botoes do topo vao para depois da foto. O display:contents
     solta h1, paragrafo e botoes como itens da grade, entao eles podem ser
     reordenados junto com a foto. Com gap 0 o espacamento volta a ser o das
     margens de cada elemento, senao a grade separaria ate o h1 do paragrafo. */
  .hero__grade{grid-template-columns:1fr;gap:0}
  .hero__conteudo{display:contents}
  .hero__midia{order:2;margin-top:22px}
  .hero .btn-grupo{order:3}
  .item__grade{grid-template-columns:minmax(0,1fr) 190px}
  .faixa-selos{gap:clamp(26px,3.4vw,44px)}
}
@media (max-width:880px){
  :root{--header-h:74px}
  .menu-btn{display:flex}
  .cabecalho{background:#fff}
  .cabecalho__nav{
    position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
    height:calc(100vh - var(--header-h));background:#fff;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:6px;padding:20px 26px 40px;margin:0;overflow-y:auto;
    transform:translateX(100%);transition:transform 300ms cubic-bezier(.4,0,.2,1)
  }
  .cabecalho__nav.aberto{transform:none}
  .cabecalho__nav>a:not(.btn){padding:16px 20px;font-size:1.06rem;background:var(--sup);border-radius:var(--r-sm)}
  .nav-extra{display:block;margin-top:22px}
  .nav-extra .idiomas{margin-bottom:16px;gap:8px;background:none;padding:0}
  .nav-extra .idiomas__globo{width:18px;height:18px;color:var(--texto-2)}
  .nav-extra .idiomas a{background:var(--sup);color:var(--texto-2);padding:10px 20px;font-size:.85rem}
  .nav-extra .idiomas a[aria-current="true"]{background:var(--tinta);color:#fff}
  .nav-extra p{font-size:.94rem;margin:0 0 .4em}
  .nav-extra a[href^="tel"],.nav-extra a[href^="mailto"]{color:var(--vinho);font-weight:600;text-decoration:none}
  .cabecalho .btn{margin:18px 0 0;width:100%}
  body.rolou .cabecalho__inner{height:74px}
  body.rolou .marca img{height:48px}
  /* Empilhado, a foto vem sempre antes do texto. Precisa repetir o seletor
     :nth-of-type(even) porque a regra do desktop tem especificidade maior que
     .servico__midia sozinho: sem isso os itens pares mandavam a foto para
     depois do texto e ela colava na foto do item seguinte. */
  .servico{grid-template-columns:1fr}
  .servico .servico__midia,
  .servico:nth-of-type(even) .servico__midia{order:-1;margin-bottom:10px}
  .item__grade{grid-template-columns:1fr}
  .item__tile{display:none}
  .item.aberto .item__tile{display:block;height:200px;margin:4px 0 18px}
  .item__texto{padding:12px 0 4px 66px}
  /* mesma tecnica do topo: solta titulo e botao para reordenar, colocando os
     selos entre os dois */
  .faixa-selos{grid-template-columns:1fr;gap:26px}
  .faixa-selos__texto{display:contents}
  .faixa-selos h2{margin-bottom:0}
  .faixa-selos__lista{order:2;justify-content:flex-start}
  .faixa-selos .btn{order:3;justify-self:start}
}
@media (max-width:620px){
  body{font-size:16px}
  .container{padding-inline:20px}
  :root{--r:18px;--r-md:14px}
  .grade--2,.nums,.creds,.valores{grid-template-columns:1fr}
  .campo-duplo{grid-template-columns:1fr}
  .btn-grupo .btn{width:100%}
  .hero__selos{gap:6px;left:11px;bottom:11px;max-width:calc(100% - 22px)}
  .hero__selo{padding:6px 12px;font-size:.71rem;gap:6px}
  .marca img{height:46px}
  .marca--rodape img{height:68px}
  .item__cab{grid-template-columns:38px 1fr 24px;gap:8px}
  .item__texto{padding-left:46px}
  .rodape__nav{margin-left:0;width:100%}
  .idiomas-rod{margin-left:0;width:100%}
  /* no celular a folga de secao cheia deixa buracos grandes entre os blocos */
  .secao{padding-block:clamp(38px,9vw,58px)}
  .secao--compacta{padding-block:28px}
  .servico{padding-block:24px}
  /* os quatro selos da pagina Credenciamentos em 2 x 2 */
  .selos-tira{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 18px;justify-items:center}
  /* telefone e e-mail do menu sem negrito */
  .nav-extra a[href^="tel"],.nav-extra a[href^="mailto"]{font-weight:400}
  /* 2 x 2 no celular: em linha unica sobra um selo sozinho na segunda linha */
  .faixa-selos__lista{gap:26px 30px}
  /* "Ver todos os credenciamentos" nao cabe numa linha com o padding cheio */
  .faixa-selos .btn{padding-inline:20px;font-size:.9rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .revelar{opacity:1;transform:none}
}

@media print{
  .topo-fixo,.menu-btn,.cta,.form,.mapa-embed{display:none}
  body{font-size:11pt;color:#000;background:#fff}
  .hero,.secao--escura,.rodape{background:#fff;color:#000}
  .hero h1,.secao--escura h2{color:#000}
  .item__corpo{grid-template-rows:1fr}
}