/* ============================================================
   MALFI TECNOLOGIA — tokens
   ============================================================ */
:root{
  /* paleta */
  --breu:        #042236;   /* petróleo profundo — fundo escuro / texto no claro */
  --breu-fundo:  #031a29;   /* rodapé, um degrau abaixo */
  --breu-alto:   #0a3149;   /* superfície elevada sobre o escuro */
  --areia:       #f6f4f2;   /* off-white quente */
  --areia-morna: #efebe5;   /* variação para bandas claras */
  --ouro:        #d9be97;   /* destaque */
  --ouro-claro:  #e6d0af;

  /* texto */
  --txt-claro:        var(--areia);
  --txt-claro-suave:  rgba(246,244,242,.66);
  --txt-claro-tenue:  rgba(246,244,242,.44);
  --txt-escuro:       var(--breu);
  --txt-escuro-suave: rgba(4,34,54,.68);
  --txt-escuro-tenue: rgba(4,34,54,.46);

  /* linhas */
  --linha-clara:  rgba(246,244,242,.14);
  --linha-escura: rgba(4,34,54,.13);
  --linha-ouro:   rgba(217,190,151,.34);

  /* tipografia */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --corpo:   "Newsreader", Georgia, "Times New Roman", serif;

  /* medidas */
  --container: 1160px;
  --estreito:  780px;
  --prosa:     640px;
  --pad-secao: clamp(84px, 10.5vw, 148px);
  --raio:      3px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

body{
  margin:0;
  background:var(--areia);
  color:var(--txt-escuro);
  font-family:var(--corpo);
  font-optical-sizing:auto;
  font-size:clamp(1.02rem,.32vw + .96rem,1.1875rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* grão sutil sobre a página inteira */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:200;
  opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--ouro); color:var(--breu); }

:focus-visible{
  outline:2px solid var(--ouro);
  outline-offset:3px;
  border-radius:2px;
}
.secao--claro :focus-visible{ outline-color:var(--breu); }

/* ============================================================
   Tipografia
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:"SOFT" 30,"WONK" 1;
  line-height:1.06;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(1.875rem,5.9vw,4.5rem); font-variation-settings:"SOFT" 34,"WONK" 1,"opsz" 144; line-height:1.0; }
h2{ font-size:clamp(1.95rem,4vw,3.15rem); font-variation-settings:"SOFT" 32,"WONK" 1,"opsz" 120; }
h3{ font-size:clamp(1.18rem,1.1vw + .95rem,1.42rem); line-height:1.22; letter-spacing:-.01em; }
p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:600; }

.sobrancelha{
  font-family:var(--display);
  font-size:.705rem;
  font-weight:600;
  font-variation-settings:"opsz" 9;
  text-transform:uppercase;
  letter-spacing:.24em;
  margin:0 0 1.35rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.centro .sobrancelha{ justify-content:center; }
.sobrancelha::before,.sobrancelha::after{
  content:"";
  width:26px; height:1px;
  background:currentColor;
  opacity:.42;
}
.sobrancelha:not(.sobrancelha--duplo)::after{ display:none; }
.centro .sobrancelha::after{ display:block; }

.secao--escuro .sobrancelha{ color:var(--ouro); }
.secao--claro  .sobrancelha{ color:var(--txt-escuro-tenue); }

.lead{
  font-size:clamp(1.1rem,.55vw + 1rem,1.32rem);
  line-height:1.6;
}
.secao--escuro .lead{ color:var(--txt-claro-suave); }
.secao--claro  .lead{ color:var(--txt-escuro-suave); }

.ouro{ color:var(--ouro); }
.destaque-claro{
  /* destaque de frase em seção clara: ouro não tem contraste, então sublinhado */
  box-shadow:inset 0 -.42em 0 rgba(217,190,151,.5);
  padding:0 .05em;
}

/* ============================================================
   Estrutura de seções
   ============================================================ */
.secao{
  position:relative;
  padding-block:var(--pad-secao);
  scroll-margin-top:88px;
  overflow:hidden;
  isolation:isolate;
}
.secao--escuro{ background:var(--breu); color:var(--txt-claro); }
.secao--claro { background:var(--areia); color:var(--txt-escuro); }
.secao--morno { background:var(--areia-morna); color:var(--txt-escuro); }

.container{
  width:min(100% - 2.6rem, var(--container));
  margin-inline:auto;
  position:relative;
  z-index:2;
}
.estreito{ max-width:var(--estreito); margin-inline:auto; }
.prosa   { max-width:var(--prosa);   margin-inline:auto; }
.centro  { text-align:center; }

.cabeca-secao{ margin-bottom:clamp(2.8rem,5vw,4.4rem); }
.cabeca-secao p{ margin-top:1.15rem; }

/* fundos ------------------------------------------------------ */

/* ------------------------------------------------------------
   Selo de fundo — um fragmento gigante, cortado pela borda.
   Duas formas: a letra da marca e o pin do mapa (Google Meu Negócio).
   ------------------------------------------------------------ */
.selo{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  user-select:none;
}

.selo__letra{
  position:absolute;
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144;
  font-size:clamp(34rem,82vw,78rem);
  line-height:.66;
  letter-spacing:-.07em;
}
.selo__pino{
  position:absolute;
  display:block;
  --h:clamp(38rem,96vw,76rem);
  height:var(--h);
  width:auto;
  stroke-width:1.25;
  vector-effect:non-scaling-stroke;
}

/* tons: no escuro o selo clareia; no claro, escurece */
.secao--escuro .selo__letra{
  color:rgba(246,244,242,.028);
  -webkit-text-stroke:1px rgba(217,190,151,.07);
}
.secao--escuro .selo__pino{
  stroke:rgba(217,190,151,.07);
  fill:rgba(246,244,242,.022);
}

.secao--claro .selo__letra,
.secao--morno .selo__letra{
  color:rgba(4,34,54,.026);
  -webkit-text-stroke:1px rgba(4,34,54,.06);
}
.secao--claro .selo__pino,
.secao--morno .selo__pino{
  stroke:rgba(4,34,54,.05);
  fill:rgba(4,34,54,.02);
}

/* posições — cada seção corta a forma num lugar diferente */
.hero          .selo__letra{ right:-.24em; bottom:-.40em; }
.servicos      .selo__letra{ left:-.30em;  top:-.16em; }
.caminho       .selo__letra{ right:-.32em; top:-.08em; }
.diferenciais  .selo__letra{ left:-.26em;  bottom:-.38em; }
.final         .selo__letra{ right:-.20em; bottom:-.46em; }

.ponte             .selo__pino{ right:calc(var(--h) * -.30); bottom:calc(var(--h) * -.34); }
.cabecalho-pagina  .selo__pino{ right:calc(var(--h) * -.22); bottom:calc(var(--h) * -.42); }
.por-que           .selo__pino{ left:calc(var(--h) * -.34);  top:calc(var(--h) * -.30); }
.incluso           .selo__pino{ left:calc(var(--h) * -.26);  top:calc(var(--h) * -.36); }
.planos            .selo__pino{ right:calc(var(--h) * -.28); top:calc(var(--h) * -.32); }

@media (max-width:760px){
  .selo__letra{ font-size:clamp(24rem,118vw,42rem); }
  .selo__pino { --h:clamp(28rem,140vw,48rem); }
}

.malha-pontos{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(4,34,54,.085) 1px, transparent 1px);
  background-size:23px 23px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 25%, transparent 78%);
}
.brilho{
  position:absolute; z-index:0; pointer-events:none;
  width:min(1100px,120%); aspect-ratio:1;
  background:radial-gradient(circle, rgba(217,190,151,.22), transparent 62%);
  left:50%; translate:-50% 0;
}

/* ============================================================
   Botões
   ============================================================ */
.btn{
  --bg:var(--ouro);
  --fg:var(--breu);
  display:inline-flex;
  align-items:center;
  gap:.62rem;
  padding:.95rem 1.75rem;
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--bg);
  border-radius:2px;
  font-family:var(--display);
  font-size:.95rem;
  font-weight:600;
  font-variation-settings:"opsz" 20,"SOFT" 20;
  letter-spacing:.005em;
  text-decoration:none;
  cursor:pointer;
  transition:background .22s ease, border-color .22s ease, transform .22s ease, color .22s ease;
}
.btn:hover{ background:var(--ouro-claro); border-color:var(--ouro-claro); transform:translateY(-1px); }
.btn svg{ flex:none; }

.btn--linha{
  --bg:transparent;
  --fg:currentColor;
  border-color:var(--linha-clara);
  padding:.72rem 1.25rem;
  font-size:.88rem;
}
.btn--linha:hover{ background:transparent; border-color:var(--ouro); color:var(--ouro); }

.btn--pequeno{ padding:.66rem 1.15rem; font-size:.86rem; }
.btn--largo{ width:100%; justify-content:center; }

/* ============================================================
   Navegação
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--breu);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  color:var(--txt-claro);
  transition:border-color .3s ease, background .3s ease;
}
.nav[data-fixado="sim"]{ border-bottom-color:var(--linha-clara); background:rgba(4,34,54,.93); }
.nav__interno{
  width:min(100% - 2.6rem, var(--container));
  margin-inline:auto;
  height:74px;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav__links{ display:flex; gap:2.1rem; margin-inline:auto; }
.nav__links a{
  font-family:var(--display);
  font-size:.88rem; font-weight:500;
  font-variation-settings:"opsz" 14;
  text-decoration:none;
  color:var(--txt-claro-suave);
  transition:color .2s ease;
}
.nav__links a:hover{ color:var(--ouro); }

/* marca ------------------------------------------------------- */
.marca{
  display:inline-flex; align-items:center; gap:.72rem;
  text-decoration:none; color:inherit;
}
.marca__nome{
  font-family:var(--display);
  font-size:1.42rem; font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 60;
  letter-spacing:-.022em;
  line-height:1;
}
.marca__risco{ width:1px; height:20px; background:var(--linha-ouro); }
.marca__tipo{
  font-family:var(--display);
  font-size:.585rem; font-weight:600;
  font-variation-settings:"opsz" 9;
  text-transform:uppercase; letter-spacing:.235em;
  color:var(--ouro);
  line-height:1;
  padding-top:.15em;
}
.marca--grande .marca__nome{ font-size:1.85rem; }
.marca--grande .marca__risco{ height:26px; }

/* ============================================================
   1. Hero
   ============================================================ */
.hero{
  padding-block:clamp(76px,11vw,132px) clamp(72px,9vw,116px);
  min-height:min(88vh,860px);
  display:flex; align-items:center;
}
/* no celular o respiro de cima e de baixo fica um degrau menor */
@media (max-width:640px){
  .hero{
    padding-block:60px 58px;
    min-height:min(78vh,720px);
  }
}

/* quebras fixas da headline — só valem onde cabem as 3 linhas pedidas.
   Repare no espaço antes de cada <br>: com display:none ele é o que mantém
   as palavras separadas no mobile. */
.quebra-desktop{ display:none; }
@media (min-width:1024px){ .quebra-desktop{ display:inline; } }

.hero .estreito{ max-width:1140px; }
.hero h1{ margin-bottom:1.6rem; text-wrap:pretty; }
.hero .lead{ max-width:54ch; margin-inline:auto; }
.hero__acoes{ margin-top:2.6rem; }
.hero__selo{
  margin-top:1.5rem;
  max-width:64ch; margin-inline:auto;
  font-size:.895rem;
  line-height:1.5;
  color:var(--txt-claro-tenue);
}
.hero__selo svg{
  display:inline-block; vertical-align:-2px;
  margin-right:.45rem;
  color:var(--ouro);
}

/* ============================================================
   2. Faixa rolante
   ============================================================ */
.faixa{
  background:var(--breu);
  border-block:1px solid var(--linha-clara);
  padding-block:1.15rem;
  overflow:hidden;
  position:relative;
}
.faixa::before,.faixa::after{
  content:""; position:absolute; top:0; bottom:0; width:16%; z-index:2; pointer-events:none;
}
.faixa::before{ left:0;  background:linear-gradient(90deg,var(--breu),transparent); }
.faixa::after { right:0; background:linear-gradient(270deg,var(--breu),transparent); }
.faixa__trilho{
  display:flex; width:max-content;
  animation:rolar 42s linear infinite;
}
.faixa__grupo{
  display:flex; align-items:center; gap:2.6rem;
  padding-right:2.6rem;
  font-family:var(--display);
  font-size:.775rem; font-weight:600;
  font-variation-settings:"opsz" 12;
  text-transform:uppercase; letter-spacing:.235em;
  color:var(--ouro);
  white-space:nowrap;
}
.faixa__losango{ width:5px; height:5px; background:var(--ouro); rotate:45deg; opacity:.65; flex:none; }
@keyframes rolar{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .faixa__trilho{ animation:none; } }

/* ============================================================
   3. A virada de chave
   ============================================================ */
.virada__texto p{ margin-bottom:1.35rem; }
.virada__par{
  display:grid; gap:1.35rem;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  margin-top:clamp(2.8rem,4.5vw,3.8rem);
  max-width:840px; margin-inline:auto;
}
.par-card{
  background:#fff;
  border:1px solid var(--linha-escura);
  border-radius:var(--raio);
  padding:2rem 1.9rem;
  text-align:left;
  box-shadow:0 1px 2px rgba(4,34,54,.04),0 12px 30px -22px rgba(4,34,54,.28);
}
.par-card .par-card__num{
  font-family:var(--display);
  font-size:2.6rem; font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 90;
  line-height:1;
  color:rgba(4,34,54,.2);
  margin-bottom:.7rem;
}
.par-card h3{ margin-bottom:.5rem; }
.par-card p{ color:var(--txt-escuro-suave); font-size:1.02rem; line-height:1.6; }
.virada__fecho{ margin-top:2.4rem; font-family:var(--display); font-size:1.28rem; font-weight:600; font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 60; }

/* ============================================================
   4. Serviços
   ============================================================ */

.grade-servicos{
  display:grid; gap:1.3rem;
  grid-template-columns:repeat(6,1fr);
}
/* seis cards: duas fileiras de três */
.grade-servicos > *{ grid-column:span 2; }
/* Sao cinco cards: tres em cima, dois embaixo. Sem esta regra os dois
   de baixo encostam na esquerda e sobra um buraco na direita. Se o
   numero de cards voltar a ser par, apague o bloco — com par ela
   desalinha. */
@media (min-width:981px){
  .grade-servicos > *:nth-child(4){ grid-column:2 / span 2; }
}
@media (max-width:980px){
  .grade-servicos{ grid-template-columns:repeat(2,1fr); }
  .grade-servicos > *{ grid-column:auto; }
}
@media (max-width:640px){ .grade-servicos{ grid-template-columns:1fr; } }

.card{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--linha-clara);
  border-radius:var(--raio);
  background:linear-gradient(175deg,rgba(246,244,242,.055),rgba(246,244,242,.018));
  padding:2.1rem 1.85rem;
  transition:border-color .28s ease, transform .28s ease, background .28s ease;
}
.card:hover{
  border-color:var(--linha-ouro);
  transform:translateY(-3px);
  background:linear-gradient(175deg,rgba(246,244,242,.085),rgba(246,244,242,.025));
}
.card__marca{ color:var(--ouro); margin-bottom:1.5rem; }
.card__titulo{ margin-bottom:.35rem; }
.card .card__frase{
  font-family:var(--display);
  font-size:1.02rem; font-weight:600;
  font-variation-settings:"SOFT" 26,"WONK" 1,"opsz" 30;
  color:var(--ouro);
  margin-bottom:.85rem;
  line-height:1.35;
}
.card p{ color:var(--txt-claro-suave); font-size:1.01rem; line-height:1.62; margin-bottom:1.35rem; }

/* No celular a pessoa rola rápido: o nome do serviço cresce pra ela
   bater o olho e reconhecer, e o texto miúdo encolhe um pouco. */
@media (max-width:640px){
  .card{ padding:1.9rem 1.6rem; }
  .card__marca{ margin-bottom:1.2rem; }
  .card__titulo{ font-size:1.52rem; }
  .card .card__frase{ font-size:1.06rem; }
  .card p{ font-size:.98rem; }
}

/* ============================================================
   5. O caminho
   ============================================================ */
.passos{
  display:grid; gap:0;
  list-style:none;
  padding:0;
  margin:0 auto;
  max-width:840px;
  text-align:left;
}
.passo{
  display:grid;
  grid-template-columns:clamp(58px,7vw,84px) 1fr;
  gap:0 1.6rem;
  padding:2.1rem 0;
  border-top:1px solid var(--linha-escura);
}
.passo:last-child{ border-bottom:1px solid var(--linha-escura); }
.passo__num{
  font-family:var(--display);
  font-size:clamp(2.9rem,6vw,4.3rem);
  font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144;
  line-height:.82;
  color:rgba(4,34,54,.19);
  letter-spacing:-.04em;
  text-align:center;
  font-variant-numeric:lining-nums;
}
.passo h3{ margin-bottom:.5rem; padding-top:.28em; }
.passo p{ color:var(--txt-escuro-suave); font-size:1.03rem; line-height:1.62; }
@media (max-width:560px){
  .passo{ grid-template-columns:1fr; gap:.5rem; }
  .passo__num{ font-size:2.6rem; }
  .passo h3{ padding-top:0; }
}
.caminho__fecho{
  margin-top:3rem;
  max-width:640px; margin-inline:auto;
  padding:1.7rem 1.9rem;
  background:rgba(217,190,151,.16);
  border-left:2px solid var(--ouro);
  border-radius:0 var(--raio) var(--raio) 0;
  text-align:left;
  font-family:var(--display);
  font-size:1.1rem; font-weight:500;
  font-variation-settings:"SOFT" 26,"WONK" 1,"opsz" 40;
  line-height:1.45;
}

/* ============================================================
   6. Incluso no GMN
   ============================================================ */

.grade-incluso{
  display:grid; gap:1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(292px,1fr));
}
.item-incluso{
  border:1px solid var(--linha-clara);
  border-radius:var(--raio);
  padding:1.7rem 1.6rem;
  background:rgba(246,244,242,.028);
  transition:border-color .28s ease, background .28s ease;
}
.item-incluso:hover{ border-color:var(--linha-ouro); background:rgba(246,244,242,.055); }
.item-incluso__filete{ width:24px; height:2px; background:var(--ouro); margin-bottom:1.1rem; }
.item-incluso h3{ font-size:1.09rem; margin-bottom:.5rem; }
.item-incluso p{ color:var(--txt-claro-suave); font-size:.985rem; line-height:1.58; margin:0; }

/* ============================================================
   7. A conta
   ============================================================ */
.conta{ position:relative; }
.conta .brilho{ top:-38%; }

.razao{
  max-width:600px; margin:0 auto;
  text-align:left;
  background:#fff;
  border:1px solid var(--linha-escura);
  border-radius:var(--raio);
  padding:clamp(1.8rem,3.6vw,2.7rem);
  box-shadow:0 1px 2px rgba(4,34,54,.05),0 26px 54px -34px rgba(4,34,54,.4);
}
.razao__intro{
  font-size:1.02rem; line-height:1.6;
  color:var(--txt-escuro-suave);
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--linha-escura);
}
.razao__linhas{ margin:0; }
.razao__linha{
  display:flex; align-items:baseline; gap:.55rem;
  padding:.82rem 0;
}
.razao__linha dt{ font-size:.99rem; }
.razao__linha dt small{ color:var(--txt-escuro-tenue); font-size:.85em; }
.razao__pontos{ flex:1; border-bottom:1px dotted rgba(4,34,54,.28); translate:0 -.28em; min-width:18px; }
.razao__linha dd{
  margin:0;
  font-family:var(--display);
  font-size:1.14rem; font-weight:600;
  font-variation-settings:"opsz" 40,"SOFT" 26;
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
}
.razao__linha--total{
  margin-top:.5rem; padding-top:1.35rem;
  border-top:1px solid rgba(4,34,54,.24);
}
.razao__linha--total dt{ font-family:var(--display); font-weight:600; font-size:1.06rem; font-variation-settings:"opsz" 40; }
.razao__linha--total dd{ font-size:clamp(1.7rem,3.6vw,2.25rem); letter-spacing:-.02em; }

.razao__contra{
  margin-top:1.9rem; padding-top:1.7rem;
  border-top:1px solid var(--linha-escura);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
}
.razao__rotulo{
  font-family:var(--display);
  font-size:.7rem; font-weight:600;
  font-variation-settings:"opsz" 9;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--txt-escuro-tenue);
  margin-bottom:.4rem;
}
.razao__preco{
  font-family:var(--display);
  font-size:clamp(1.9rem,4.4vw,2.6rem); font-weight:600;
  font-variation-settings:"SOFT" 34,"WONK" 1,"opsz" 144;
  line-height:1; letter-spacing:-.025em;
  margin:0;
}
.razao__preco span{
  display:block;
  font-family:var(--corpo);
  font-size:.93rem; font-weight:400;
  letter-spacing:0;
  color:var(--txt-escuro-suave);
  margin-top:.5rem;
}
.razao__selo{
  font-family:var(--display);
  font-size:.78rem; font-weight:600;
  font-variation-settings:"opsz" 14;
  text-align:right;
  color:var(--txt-escuro-suave);
  max-width:16ch;
  line-height:1.35;
}
.conta__remate{
  margin-top:2.4rem;
  font-family:var(--display);
  font-size:clamp(1.15rem,2.1vw,1.4rem); font-weight:500;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 60;
  line-height:1.4;
  max-width:34ch; margin-inline:auto;
}
.conta__acao{ margin-top:2.2rem; }

/* ============================================================
   8. Diferenciais
   ============================================================ */

.lista-dif{
  margin:0; padding:0;
  max-width:820px; margin-inline:auto;
  text-align:left;
}
.lista-dif__item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.4rem;
  padding:1.65rem 0;
  border-top:1px solid var(--linha-clara);
}
.lista-dif__item:last-child{ border-bottom:1px solid var(--linha-clara); }
.lista-dif__marca{
  width:6px; height:6px; rotate:45deg;
  background:var(--ouro);
  margin-top:.72em;
}
.lista-dif__texto h3{ display:inline; font-size:1.1rem; }
.lista-dif__texto h3::after{ content:" "; }
.lista-dif__texto p{ display:inline; margin:0; color:var(--txt-claro-suave); font-size:1.03rem; }

/* ============================================================
   9. Prova
   ============================================================ */
.prova__grade{
  display:grid; gap:1.3rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  text-align:left;
}
.vaga{
  border:1px dashed rgba(4,34,54,.26);
  border-radius:var(--raio);
  padding:2.2rem 1.8rem;
  min-height:230px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:rgba(4,34,54,.022);
}
.vaga .vaga__rotulo{
  font-family:var(--display);
  font-size:.68rem; font-weight:600;
  font-variation-settings:"opsz" 9;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--txt-escuro-tenue);
  margin-bottom:.6rem;
}
.vaga p{ font-size:.97rem; color:var(--txt-escuro-suave); margin:0; }

/* ============================================================
   10. Planos
   ============================================================ */

.grade-planos{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(316px,1fr));
  max-width:900px; margin-inline:auto;
  text-align:left;
  align-items:stretch;
}
.plano{
  position:relative;
  border:1px solid var(--linha-clara);
  border-radius:var(--raio);
  background:linear-gradient(178deg,rgba(246,244,242,.05),rgba(246,244,242,.015));
  padding:2.3rem 2rem 2rem;
  display:flex; flex-direction:column;
}
.plano--destaque{
  border-color:var(--ouro);
  background:linear-gradient(178deg,rgba(217,190,151,.11),rgba(217,190,151,.028));
}
.plano__selo{
  position:absolute; top:-1px; right:1.7rem;
  transform:translateY(-50%);
  background:var(--ouro); color:var(--breu);
  padding:.34rem .82rem;
  border-radius:2px;
  font-family:var(--display);
  font-size:.635rem; font-weight:600;
  font-variation-settings:"opsz" 9;
  text-transform:uppercase; letter-spacing:.18em;
}
.plano__periodo{
  font-family:var(--display);
  font-size:.7rem; font-weight:600;
  font-variation-settings:"opsz" 9;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--ouro);
  margin-bottom:.55rem;
}
.plano h3{ font-size:1.55rem; margin-bottom:1.6rem; }
.plano__itens{ list-style:none; margin:0 0 1.9rem; padding:0; }
.plano__itens li{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.5rem 0;
  font-size:1rem;
  color:var(--txt-claro-suave);
  line-height:1.5;
}
.plano__itens svg{ flex:none; margin-top:.34em; color:var(--ouro); }
.plano__precos{
  margin-top:auto;
  padding-top:1.6rem;
  border-top:1px solid var(--linha-clara);
}
.plano__de{
  font-size:.93rem;
  color:var(--txt-claro-tenue);
  margin-bottom:.25rem;
}
.plano__de s{ text-decoration-thickness:1px; text-underline-offset:2px; }
.plano__valor{
  font-family:var(--display);
  font-size:clamp(2.1rem,4.4vw,2.7rem); font-weight:600;
  font-variation-settings:"SOFT" 34,"WONK" 1,"opsz" 144;
  line-height:1; letter-spacing:-.028em;
  margin:0 0 .45rem;
}
.plano__parcela{ font-size:1rem; color:var(--txt-claro-suave); margin-bottom:.8rem; }
.plano__parcela strong{ color:var(--txt-claro); }
.plano__pix{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display);
  font-size:.755rem; font-weight:600;
  font-variation-settings:"opsz" 11;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--ouro);
  border:1px solid var(--linha-ouro);
  border-radius:2px;
  padding:.36rem .72rem;
  margin-bottom:1.7rem;
}
.planos__nota{
  margin-top:2.6rem;
  max-width:56ch; margin-inline:auto;
  color:var(--txt-claro-suave);
  font-size:1.01rem;
}

/* ============================================================
   11. FAQ
   ============================================================ */
.faq{ max-width:800px; margin-inline:auto; text-align:left; }
.faq__item{ border-top:1px solid var(--linha-escura); }
.faq__item:last-child{ border-bottom:1px solid var(--linha-escura); }
.faq__item summary{
  list-style:none;
  cursor:pointer;
  padding:1.45rem 3rem 1.45rem 0;
  position:relative;
  font-family:var(--display);
  font-size:clamp(1.05rem,1.5vw,1.18rem); font-weight:600;
  font-variation-settings:"SOFT" 26,"WONK" 1,"opsz" 40;
  line-height:1.35;
  transition:color .2s ease;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:rgba(4,34,54,.72); }
.faq__item summary::after{
  content:"";
  position:absolute; right:.4rem; top:50%;
  width:13px; height:13px;
  translate:0 -50%;
  background:
    linear-gradient(currentColor,currentColor) center/13px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 13px no-repeat;
  opacity:.5;
  transition:rotate .3s ease, opacity .2s ease;
}
.faq__item[open] summary::after{
  rotate:90deg;
  background:linear-gradient(currentColor,currentColor) center/13px 1px no-repeat;
  opacity:.75;
}
.faq__resposta{
  padding:0 3rem 1.6rem 0;
  color:var(--txt-escuro-suave);
  font-size:1.03rem;
  line-height:1.65;
  max-width:64ch;
}

/* ============================================================
   12. CTA final
   ============================================================ */
.final{ padding-block:clamp(96px,12vw,164px); }
.final h2{ margin-bottom:1.4rem; }
.final .lead{ max-width:56ch; margin-inline:auto; }
.final__acoes{ margin-top:2.6rem; }
.final__contato{
  margin-top:1.6rem;
  font-size:.925rem;
  color:var(--txt-claro-tenue);
}
.final__contato a{ color:var(--txt-claro-suave); text-decoration:none; border-bottom:1px solid var(--linha-clara); }
.final__contato a:hover{ color:var(--ouro); border-color:var(--linha-ouro); }

/* ============================================================
   Rodapé
   ============================================================ */
.rodape{
  background:var(--breu-fundo);
  color:var(--txt-claro);
  padding-block:clamp(56px,7vw,84px) 0;
  border-top:1px solid var(--linha-clara);
}
.rodape__topo{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(2.4rem,5vw,4rem);
  padding-bottom:clamp(2.6rem,5vw,3.6rem);
}
@media (max-width:800px){ .rodape__topo{ grid-template-columns:1fr 1fr; } .rodape__marca{ grid-column:1 / -1; } }
@media (max-width:460px){ .rodape__topo{ grid-template-columns:1fr; } }

.rodape__frase{
  margin-top:1.3rem;
  max-width:34ch;
  color:var(--txt-claro-suave);
  font-size:1.01rem;
  line-height:1.55;
}
.rodape h4{
  font-size:.7rem; font-weight:600;
  font-variation-settings:"opsz" 9;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--ouro);
  margin-bottom:1.2rem;
}
.rodape ul{ list-style:none; margin:0; padding:0; }
.rodape li{ margin-bottom:.62rem; }
.rodape li a,.rodape li span{
  color:var(--txt-claro-suave);
  text-decoration:none;
  font-size:.985rem;
  transition:color .2s ease;
}
.rodape li a:hover{ color:var(--ouro); }
.rodape__base{
  border-top:1px solid var(--linha-clara);
  /* o respiro embaixo é grande de propósito: o botão flutuante de WhatsApp
     é fixo no canto inferior direito e cobria o link dos Termos de Uso */
  padding-block:1.6rem 5.6rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.855rem;
  color:var(--txt-claro-tenue);
}

/* ============================================================
   Movimento
   ============================================================ */
[data-revelar]{ opacity:0; transform:translateY(14px); }
@media (prefers-reduced-motion:no-preference){
  [data-revelar]{ transition:opacity .8s cubic-bezier(.22,.68,.32,1), transform .8s cubic-bezier(.22,.68,.32,1); }
}
[data-revelar].visivel{ opacity:1; transform:none; }

/* entrada do hero */
@media (prefers-reduced-motion:no-preference){
  .entra{ opacity:0; transform:translateY(18px); animation:subir .9s cubic-bezier(.22,.68,.32,1) forwards; }
  .entra--1{ animation-delay:.12s; }
  .entra--2{ animation-delay:.24s; }
  .entra--3{ animation-delay:.36s; }
  .entra--4{ animation-delay:.48s; }
  .entra--5{ animation-delay:.62s; }
  @keyframes subir{ to{ opacity:1; transform:none; } }

}
@media (prefers-reduced-motion:reduce){
  [data-revelar]{ opacity:1; transform:none; }
}

.nav .btn--linha{ white-space:nowrap; }
.nav__rotulo-curto{ display:none; }

@media (max-width:860px){
  .nav__links{ display:none; }
}
@media (max-width:560px){
  .sobrancelha{ font-size:.655rem; letter-spacing:.18em; }
  .sobrancelha::before,
  .sobrancelha::after,
  .centro .sobrancelha::before,
  .centro .sobrancelha::after{ display:none; }
  .nav__interno{ height:64px; }
  .nav__rotulo-longo{ display:none; }
  .nav__rotulo-curto{ display:inline; }
  .marca__nome{ font-size:1.24rem; }
  .marca__tipo{ font-size:.545rem; letter-spacing:.2em; }
}

/* ============================================================
   Passagem para /gmn e link no card de serviço
   ============================================================ */
.ponte h2{ margin-bottom:1.35rem; }
.ponte__acoes{ margin-top:2.4rem; }

.card__link{
  display:inline-flex; align-items:center; gap:.5rem;
  /* ancora no rodape do card: sem a antiga .card__nota, e o link que
     alinha a base de todos os cards da linha */
  margin-top:auto; padding-top:1.25rem;
  font-family:var(--display);
  font-size:.9rem; font-weight:600;
  font-variation-settings:"opsz" 20,"SOFT" 20;
  color:var(--ouro);
  text-decoration:none;
  border-bottom:1px solid var(--linha-ouro);
  padding-bottom:.18rem;
  transition:color .22s ease, border-color .22s ease, gap .22s ease;
}
.card__link:hover{ color:var(--ouro-claro); border-color:var(--ouro-claro); gap:.72rem; }

/* ============================================================
   Página /gmn
   ============================================================ */
.cabecalho-pagina{
  padding-block:clamp(70px,9vw,116px) clamp(60px,7vw,92px);
  min-height:auto;
}
.cabecalho-pagina h1{ font-size:clamp(2.2rem,4.9vw,4rem); margin-bottom:1.6rem; }
.cabecalho-pagina .lead{ max-width:56ch; margin-inline:auto; }
.cabecalho-pagina__acoes{ margin-top:2.4rem; }

.migalha{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-bottom:2.6rem;
  font-family:var(--display);
  font-size:.705rem; font-weight:600;
  font-variation-settings:"opsz" 9;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--txt-claro-tenue);
  text-decoration:none;
  transition:color .2s ease, gap .2s ease;
}
.migalha:hover{ color:var(--ouro); gap:.8rem; }

/* ============================================================
   Variante clara do hero (para comparação)
   ============================================================ */

/* no claro o ouro não tem contraste pra texto: a ênfase vira tarja */
.hero--claro h1 em{
  color:var(--breu);
  box-shadow:inset 0 -.13em 0 rgba(217,190,151,.7);
}

.hero--claro .hero__selo{ color:var(--txt-escuro-tenue); }
.hero--claro .hero__selo svg{ color:var(--breu); }

.nav--claro{
  background:var(--areia-morna);
  color:var(--txt-escuro);
}
.nav--claro[data-fixado="sim"]{ background:rgba(239,235,229,.94); border-bottom-color:var(--linha-escura); }
.nav--claro .nav__links a{ color:var(--txt-escuro-suave); }
.nav--claro .nav__links a:hover{ color:var(--breu); }
.nav--claro .marca__tipo{ color:var(--breu); }
.nav--claro .btn--linha{ border-color:var(--linha-escura); }
.nav--claro .btn--linha:hover{ border-color:var(--breu); color:var(--breu); background:transparent; }

.faixa--clara{ background:var(--areia-morna); border-color:var(--linha-escura); }
.faixa--clara .faixa__grupo{ color:var(--txt-escuro-suave); }
.faixa--clara .faixa__losango{ background:var(--breu); opacity:.45; }
.faixa--clara::before{ background:linear-gradient(90deg,var(--areia-morna),transparent); }
.faixa--clara::after{ background:linear-gradient(270deg,var(--areia-morna),transparent); }

/* ============================================================
   Prova — painel do Google Meu Negócio
   ============================================================ */
.prova-gmn h2{ margin-bottom:1.35rem; }

.painel{
  margin:clamp(2.6rem,5vw,3.8rem) auto 0;
  max-width:920px;
  background:#fff;
  border:1px solid var(--linha-escura);
  border-radius:var(--raio);
  padding:clamp(.7rem,1.6vw,1.1rem);
  box-shadow:0 1px 2px rgba(4,34,54,.05), 0 30px 60px -38px rgba(4,34,54,.45);
}
.painel img{
  width:100%; height:auto;
  border-radius:2px;
}
.painel figcaption{
  margin-top:.95rem;
  padding:0 .3rem .25rem;
  font-size:.855rem;
  line-height:1.45;
  color:var(--txt-escuro-tenue);
  text-align:center;
}

.prova-gmn .ponte__acoes{ margin-top:clamp(2.6rem,5vw,3.4rem); }

/* ============================================================
   Prova — sites (tema escuro)
   ============================================================ */
.prova-site h2{ margin-bottom:1.35rem; }
.prova-site .selo__letra{ left:-.28em; bottom:-.36em; }

.secao--escuro .painel{
  background:rgba(246,244,242,.045);
  border-color:var(--linha-clara);
  box-shadow:0 1px 2px rgba(0,0,0,.25), 0 44px 76px -44px rgba(0,0,0,.75);
}
.secao--escuro .painel figcaption{ color:var(--txt-claro-tenue); }

.prova-site__fecho{
  margin:clamp(2.4rem,4.5vw,3.2rem) auto 0;
  max-width:34ch;
  font-family:var(--display);
  font-size:clamp(1.15rem,2.1vw,1.42rem);
  font-weight:500;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 60;
  line-height:1.4;
}
.prova-site .ponte__acoes{ margin-top:2.2rem; }

/* ============================================================
   Quem faz — retrato do Henrique
   ============================================================ */
.sobre .selo__letra{ right:-.26em; top:-.12em; }

.sobre__grade{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2.4rem,5vw,4.6rem);
  align-items:center;
  text-align:left;
}

.sobre__retrato{
  position:relative;
  margin:0;
  max-width:420px;
  width:100%;
}
/* moldura em ouro deslocada atrás da foto */
.sobre__retrato::before{
  content:"";
  position:absolute;
  left:-16px; bottom:-16px;
  width:62%; height:56%;
  border:1px solid var(--linha-ouro);
  border-radius:var(--raio);
}
.sobre__retrato img{
  position:relative;
  width:100%; height:auto;
  border-radius:var(--raio);
  border:1px solid var(--linha-clara);
  box-shadow:0 1px 2px rgba(0,0,0,.28), 0 44px 74px -46px rgba(0,0,0,.85);
}

.sobre__texto h2{ margin-bottom:1.5rem; }
.sobre__texto p{ color:var(--txt-claro-suave); }
.sobre__texto .sobrancelha{ color:var(--ouro); }

.sobre__assinatura{
  display:flex; flex-direction:column; gap:.15rem;
  margin-top:1.9rem; padding-top:1.4rem;
  border-top:1px solid var(--linha-clara);
}
.sobre__nome{
  font-family:var(--display);
  font-size:1.22rem; font-weight:600;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 60;
  color:var(--txt-claro);
  line-height:1.2;
}
.sobre__cargo{
  font-family:var(--display);
  font-size:.665rem; font-weight:600;
  font-variation-settings:"opsz" 9;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--ouro);
}
.sobre .card__link{ margin-top:1.5rem; }

@media (max-width:860px){
  .sobre__grade{
    grid-template-columns:1fr;
    gap:clamp(2rem,6vw,2.8rem);
    justify-items:center;
    text-align:center;
  }
  .sobre__retrato{ max-width:300px; }
  .sobre__texto .sobrancelha{ justify-content:center; }
  .sobre__assinatura{ align-items:center; }
}

/* ============================================================
   Quem confia — esteira de logos de clientes
   Duas linhas correndo em sentidos opostos, de ponta a ponta da
   tela. Três peças por linha: a faixa é a janela parada, a pista é
   o que desliza, e a trilha é a lista de logos — repetida pelo
   pagina.js até cobrir a tela. A pista recua a largura exata de uma
   trilha e volta ao zero: como o quadro final é igual ao inicial,
   o rebobinar não aparece.
   Nas pontas, uma máscara apaga as marcas aos poucos, como se
   elas entrassem e saíssem da página.
   ============================================================ */
.confianca{
  padding-block:clamp(66px,8vw,110px);
  /* a esteira sangra até a borda da tela; o clip segura a barra
     de rolagem horizontal que isso criaria */
  overflow:clip;
}
.confianca h2{ font-size:clamp(1.7rem,3.1vw,2.5rem); }

.logos{
  margin-block:clamp(2.6rem,5vw,3.6rem) 0;
  /* estoura o .container e ocupa a largura inteira da tela */
  margin-inline:calc(50% - 50vw);
  padding-block:clamp(2rem,4vw,2.8rem);
  border-block:1px solid var(--linha-escura);
  display:grid;
  /* minmax(0,1fr) e não o auto padrão: sem isso a coluna cresce até
     a largura da pista inteira e a janela deixa de recortar */
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.6rem,3.2vw,2.4rem);
  /* teto de altura das marcas: fica aqui pra caixa e imagem usarem o
     mesmo valor — porcentagem em max-height não resolve dentro do grid */
  --logo-altura:clamp(50px,6.4vw,76px);
  --logo-vao:clamp(2.2rem,5vw,4rem);
}

/* a faixa é a janela: tem a largura da tela e é nela que mora a
   máscara. Se o degradê ficasse na pista, ele esticaria junto com o
   conjunto de logos e as pontas visíveis não apagariam nunca. */
.logos__faixa{
  min-width:0;
  overflow:clip;
  /* opaco no miolo, transparente nas bordas — as marcas entram e saem
     da página em vez de aparecer e sumir de uma vez.
     -webkit- é pro Safari, que ainda não pega o sem prefixo */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

/* a pista é o que anda: guarda as cópias da lista lado a lado */
.logos__pista{
  display:flex;
  width:max-content;
}
/* a esteira só anda depois que o pagina.js clonou a lista o bastante
   pra cobrir a tela — quantas cópias ficou anotado em --copias.
   Sem JS, a linha fica parada e continua legível. */
.logos--rodando .logos__pista{
  animation:logos-anda linear infinite;
  /* a duração acompanha o tamanho do conjunto, senão quanto mais
     logo mais rápido ela passaria */
  animation-duration:calc(var(--copias) * 21s);
}
.logos--rodando .logos__faixa--volta .logos__pista{
  animation-direction:reverse;
  animation-duration:calc(var(--copias) * 26s);
}
/* parar pra olhar: o mouse em cima congela a linha */
.logos__faixa:hover .logos__pista{ animation-play-state:paused; }

.logos__trilha{
  list-style:none;
  margin:0;
  display:flex;
  align-items:center;
  gap:var(--logo-vao);
  /* o vão da emenda: sem isso a última logo de uma cópia encosta
     na primeira da seguinte e o ritmo quebra a cada volta */
  padding:0 var(--logo-vao) 0 0;
}

/* anda exatamente a largura de UMA cópia: aí o quadro final é
   idêntico ao inicial e a volta não aparece */
@keyframes logos-anda{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(calc(-100% / var(--copias)),0,0); }
}

.logos__item{
  flex:0 0 auto;
  width:clamp(108px,15vw,150px);
  /* a caixa é alta o bastante pra caber marca redonda: um selo circular
     precisa de mais altura pra ter o mesmo peso visual de um logotipo
     deitado, que é limitado pela largura */
  height:var(--logo-altura);
  display:grid;
  place-items:center;
}
.logos__marca{
  /* --escala nivela o peso de cada marca: sem ela, uma logo mais
     quadrada ocupa o dobro da área de um logotipo deitado e rouba a
     linha inteira. O ajuste fino vive no HTML, marca a marca. */
  max-width:calc(100% * var(--escala,1));
  max-height:calc(var(--logo-altura) * var(--escala,1));
  width:auto; height:auto;
  object-fit:contain;
  /* uniformiza marcas de cores diferentes; a cor volta no hover */
  filter:grayscale(1);
  opacity:.58;
  mix-blend-mode:multiply;
}
@media (prefers-reduced-motion:no-preference){
  .logos__marca{ transition:opacity .45s ease, filter .45s ease; }
}
.logos__item:hover .logos__marca{ filter:none; opacity:1; }

/* quem pediu menos movimento no sistema não vê esteira nenhuma:
   as logos voltam a ser uma grade parada e centralizada */
@media (prefers-reduced-motion:reduce){
  .logos__faixa{
    overflow:visible;
    -webkit-mask-image:none;
            mask-image:none;
  }
  .logos__pista{ animation:none; width:auto; justify-content:center; }
  /* as duas linhas continuam ali, só que paradas e quebrando
     em grade — ninguém perde metade das marcas */
  .logos__trilha{ flex-wrap:wrap; justify-content:center; padding:0; }
}

.confianca__nota{
  margin:clamp(1.7rem,3vw,2.2rem) auto 0;
  max-width:var(--prosa);
  font-size:.9rem;
  color:var(--txt-escuro-tenue);
}

/* ============================================================
   FAQ em duas colunas (só na home)
   Esquerda: a chamada e os canais de contato, que ficam presos
   na tela enquanto a lista de perguntas rola ao lado.
   Direita: as perguntas dentro de um painel branco.
   O /gmn continua com o FAQ simples, de uma coluna só.
   ============================================================ */
.faq-secao{
  /* clip no lugar de hidden: continua cortando o fundo, mas não
     vira contêiner de rolagem — é isso que deixa o sticky funcionar */
  overflow:clip;
}
.faq-grade{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(2.4rem,4.6vw,4.8rem);
  align-items:start;
  text-align:left;
}
.faq-lado h2{ font-size:clamp(1.9rem,3.3vw,2.8rem); }
.faq-lado__lead{ margin-top:1.2rem; max-width:36ch; }

@media (min-width:941px){
  .faq-lado{ position:sticky; top:112px; }
}
@media (max-width:940px){
  .faq-grade{ grid-template-columns:1fr; gap:clamp(2.2rem,5vw,3rem); }
  .faq-lado__lead{ max-width:none; }
}

/* canais de contato ------------------------------------------ */
.canais{
  display:grid; gap:.85rem;
  margin-top:clamp(2rem,3.6vw,2.9rem);
}
.canal{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:1.05rem;
  padding:1.15rem 1.25rem;
  border:1px solid var(--linha-escura);
  border-radius:var(--raio);
  background:rgba(255,255,255,.6);
  text-decoration:none;
  color:inherit;
}
.canal:hover{
  border-color:var(--linha-ouro);
  background:#fff;
  transform:translateY(-2px);
}
.canal__icone{
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--breu);
  color:var(--ouro);
}
.canal__texto{ display:grid; gap:.22rem; min-width:0; }
.canal__rotulo{
  font-family:var(--display);
  font-size:.705rem; font-weight:600;
  font-variation-settings:"opsz" 9;
  text-transform:uppercase; letter-spacing:.17em;
}
.canal__linha{
  font-size:.925rem; line-height:1.42;
  color:var(--txt-escuro-suave);
  overflow-wrap:anywhere;
}
.canal__seta{ color:var(--txt-escuro-tenue); }
.canal:hover .canal__seta{ color:var(--breu); translate:3px 0; }

/* painel das perguntas --------------------------------------- */
.faq-secao .faq{
  max-width:none;
  margin:0;
  background:#fff;
  border:1px solid var(--linha-escura);
  border-radius:var(--raio);
  padding:0 clamp(1.2rem,2.3vw,1.9rem);
  box-shadow:0 1px 2px rgba(4,34,54,.05), 0 30px 60px -40px rgba(4,34,54,.38);
}
.faq-secao .faq__item:first-child{ border-top:0; }
.faq-secao .faq__item:last-child{ border-bottom:0; }

@media (prefers-reduced-motion:no-preference){
  .canal{ transition:border-color .28s ease, background .28s ease, transform .28s ease; }
  .canal__seta{ transition:translate .28s ease, color .28s ease; }
}

/* ============================================================
   Botão flutuante de WhatsApp
   ============================================================ */
.zap{
  position:fixed;
  right:clamp(16px,2.4vw,28px);
  bottom:clamp(16px,2.4vw,28px);
  z-index:120;
  display:grid; place-items:center;
  width:clamp(52px,5.4vw,58px); aspect-ratio:1;
  border-radius:50%;
  background:var(--breu);
  color:var(--ouro);
  border:1px solid var(--linha-ouro);
  box-shadow:0 10px 30px -10px rgba(4,34,54,.5);
  /* só entra depois que a pessoa passa do hero — ver pagina.js */
  opacity:0; visibility:hidden; translate:0 12px;
}
.zap[data-visivel="sim"]{ opacity:1; visibility:visible; translate:0 0; }
.zap:hover{
  background:var(--ouro);
  color:var(--breu);
  box-shadow:0 14px 34px -10px rgba(4,34,54,.55);
}
.zap__balao{
  position:absolute; right:calc(100% + 12px);
  white-space:nowrap;
  font-family:var(--display);
  font-size:.705rem; font-weight:600;
  font-variation-settings:"opsz" 9;
  text-transform:uppercase; letter-spacing:.16em;
  background:var(--breu); color:var(--areia);
  padding:.58rem .85rem;
  border-radius:var(--raio);
  opacity:0; translate:6px 0;
  pointer-events:none;
}
.zap:hover .zap__balao,
.zap:focus-visible .zap__balao{ opacity:1; translate:0 0; }

@media (prefers-reduced-motion:no-preference){
  .zap{ transition:opacity .35s ease, translate .35s ease, background .28s ease, color .28s ease, box-shadow .28s ease; }
  .zap__balao{ transition:opacity .24s ease, translate .24s ease; }
}
/* no celular o balão não cabe, e o rodapé precisa de folga pro botão */
@media (max-width:640px){
  .zap__balao{ display:none; }
  .rodape{ padding-bottom:96px; }
}


/* ============================================================
   A BUSCA — simulação da tela do Google
   ------------------------------------------------------------
   Exceção declarada: as cores reais do Google e uma fonte sem
   serifa vivem aqui dentro, porque o bloco reproduz a interface
   de um terceiro. Mesma licença do verde do WhatsApp.
   NÃO usar nem as cores nem a fonte fora deste bloco.

   A animação inteira mora no pagina.js. Aqui ficam só os
   estados: item escondido → .is-on, empresa acesa → .is-aceso,
   perfil resolvido → .esta-pronto.
   ============================================================ */

.busca .selo__pino{ left:calc(var(--h) * -.32); top:calc(var(--h) * -.30); }

.busca h2{ margin-bottom:1.35rem; }
/* sem lead, o titulo é o ultimo do bloco: a folga quem dá é o fecho */
.busca__texto h2:last-child{ margin-bottom:0; }

.busca__fecho{
  margin:clamp(2.4rem,4.5vw,3.2rem) auto 0;
  max-width:var(--prosa);
  font-size:1.05rem;
  line-height:1.55;
  color:var(--txt-escuro-suave);
}

/* No desktop o texto fica de um lado e a simulação do outro. Abaixo
   de 1100px empilha de novo: a tela do Google precisa de largura pra
   ficha por cima não virar um amontoado. */
@media (min-width:1100px){
  .busca__grade{
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    column-gap:clamp(2.6rem,4.5vw,4.5rem);
    text-align:left;
  }
  .busca__grade .sobrancelha{ justify-content:flex-start; }
  .busca__grade .sobrancelha::after{ display:none; }
  /* texto e fecho empilham na coluna 1; a simulação ocupa as duas
     linhas da coluna 2, o que centra o texto na altura dela */
  .busca__texto{ grid-column:1; grid-row:1; align-self:end; }
  .busca__grade .busca__fecho{
    grid-column:1; grid-row:2; align-self:start;
    margin:1.7rem 0 0; max-width:none;
  }
  .busca .simu{ grid-column:2; grid-row:1 / span 2; align-self:center; margin:0; max-width:none; }
}

/* --- o palco --- */

.simu{
  margin:clamp(2.8rem,5vw,4rem) auto 0;
  max-width:900px;
  /* a interface simulada é sem serifa de propósito: é assim que
     ela aparece na tela de quem pesquisa */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --g-azul:    #1A73E8;
  --g-estrela: #FBBC05;
  --g-verde:   #1E8E3E;
  --g-linha:   #E4E7EB;
  --g-txt:     #202124;
  --g-sub:     #5F6368;
  --g-vazio:   #ECEFF2;
}

.simu__palco{ position:relative; }

/* --- a página de resultados --- */

.simu__tela{
  width:74%;
  text-align:left;
  background:#fff;
  border:1px solid var(--g-linha);
  border-radius:14px;
  padding:18px 18px 16px;
  box-shadow:0 1px 2px rgba(4,34,54,.05), 0 30px 60px -38px rgba(4,34,54,.45);
}

.simu__topo{ display:flex; align-items:center; gap:14px; }

.simu__logo{ font-size:1.18rem; font-weight:700; letter-spacing:-.04em; flex:none; }
.simu__logo b:nth-child(1){ color:#4285F4; }
.simu__logo b:nth-child(2){ color:#EA4335; }
.simu__logo b:nth-child(3){ color:#FBBC05; }
.simu__logo b:nth-child(4){ color:#4285F4; }
.simu__logo b:nth-child(5){ color:#34A853; }
.simu__logo b:nth-child(6){ color:#EA4335; }

.simu__campo{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--g-linha); border-radius:999px;
  padding:8px 14px;
  font-size:.8rem; color:var(--g-txt);
  box-shadow:0 1px 4px rgba(4,34,54,.06);
}
.simu__termo{ white-space:nowrap; overflow:hidden; flex:1; min-width:0; }
.simu__cursor{
  width:1.5px; height:14px; background:var(--g-azul); flex:none;
  animation:simu-piscar 1.05s steps(1) infinite;
}
@keyframes simu-piscar{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
.simu__mic, .simu__lupa{ width:15px; height:15px; flex:none; }

.simu__lista{ margin-top:14px; display:flex; flex-direction:column; }

.simu__item{
  display:flex; align-items:center; gap:11px;
  padding:11px 8px; border-radius:10px;
  border:1.5px solid transparent;
  opacity:0; transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease,
             border-color .45s ease, background-color .45s ease;
}
.simu__item.is-on{ opacity:1; transform:none; }
.simu__item--fraco.is-on{ opacity:.45; }

.simu__pos{
  font-size:.7rem; color:var(--g-sub);
  width:12px; flex:none;
  transition:opacity .22s ease;
}
/* enquanto as linhas trocam de lugar, o número some e volta já certo */
.simu__lista--mexendo .simu__pos{ opacity:0; }

.simu__foto{
  width:38px; height:38px; border-radius:7px; flex:none;
  background:var(--g-vazio) center/cover no-repeat;
  transition:background-image .4s ease, background-color .4s ease;
}

.simu__corpo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }

.simu__nome{
  display:flex; align-items:center; gap:5px;
  font-size:.82rem; font-weight:500; color:var(--g-txt); letter-spacing:-.01em;
}
.simu__nome svg{ width:13px; height:13px; flex:none; }

.simu__meta{
  font-size:.7rem; color:var(--g-sub);
  transition:opacity .28s ease;
}
.simu__meta i{ color:var(--g-estrela); font-style:normal; }

/* as duas últimas linhas nem nome têm: é só massa cinza */
.simu__barra{ height:6px; width:52%; border-radius:4px; background:var(--g-vazio); }

/* --- a empresa: antes e depois --- */

.simu__item--voce{ background:rgba(26,115,232,.04); }
.simu__item--voce.is-aceso{ border-color:var(--g-azul); }

/* o selo de verificado só aparece quando o perfil fica pronto */
.simu__item--voce .simu__nome svg{
  opacity:0; transform:scale(.6);
  transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.4,.5,1);
}
.simu__item--voce.esta-pronto .simu__nome svg{ opacity:1; transform:none; }

/* TROCAR POR FOTO REAL: basta apontar o background-image das duas
   regras abaixo pra um arquivo em /img/ (ex.: url("/img/simu-vitrine.jpg")).
   Enquanto não tem foto, fica um degradê nos tons da marca — que é
   honesto, já que a legenda diz que a peça é uma simulação. */
.simu__item--voce.esta-pronto .simu__foto{
  background-image:linear-gradient(140deg,#e8d9c2,#c9a878 55%,#8d6b45);
}
.simu__ficha-foto{
  background-image:linear-gradient(140deg,#e8d9c2,#c9a878 55%,#8d6b45);
}

/* --- o corte: onde o bloco do mapa termina --- */

.simu__corte{
  position:relative;
  margin:7px 8px;
  border-top:1px dashed rgba(4,34,54,.22);
  font-size:.63rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--g-sub);
  opacity:0;
  transition:opacity .45s ease, transform .55s cubic-bezier(.22,.68,.32,1);
}
.simu__corte.is-on{ opacity:.75; }
.simu__corte span{
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  background:#fff; padding:0 10px; white-space:nowrap;
}

/* --- a ficha, por cima --- */

.simu__ficha{
  position:absolute; right:0; top:16%; width:50%;
  text-align:left;
  background:#fff; border:1px solid var(--g-linha); border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 46px rgba(4,34,54,.20);
  opacity:0; transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1);
}
.simu__ficha.is-on{ opacity:1; transform:none; }

.simu__ficha-foto{
  position:relative; height:96px;
  background-color:var(--g-vazio);
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.simu__ficha-x{
  position:absolute; left:10px; top:10px;
  width:24px; height:24px; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--g-txt);
  display:grid; place-items:center; font-size:.62rem;
}
.simu__ficha-qtd{
  position:absolute; right:10px; bottom:10px;
  background:rgba(32,33,36,.72); color:#fff;
  border-radius:5px; padding:3px 7px; font-size:.58rem; font-weight:500;
}

.simu__ficha-pad{ padding:12px 15px 14px; }

.simu__ficha-nome{
  display:flex; align-items:center; gap:6px;
  font-size:.95rem; font-weight:600; color:var(--g-txt); letter-spacing:-.01em;
  font-family:inherit;
}
.simu__ficha-nome svg{ width:15px; height:15px; flex:none; }

.simu__ficha-nota{
  display:flex; align-items:center; gap:6px;
  margin-top:4px; font-size:.72rem; color:var(--g-sub);
}
.simu__ficha-nota b{ color:var(--g-txt); font-weight:600; font-size:.78rem; }
.simu__ficha-estrelas{ color:var(--g-estrela); font-style:normal; letter-spacing:.05em; }

.simu__ficha-cat{ margin-top:4px; font-size:.7rem; color:var(--g-sub); }
.simu__ficha-cat b{ color:var(--g-verde); font-weight:600; }

.simu__ficha-acoes{ display:flex; gap:6px; margin-top:12px; }
.simu__ficha-acoes span{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:.6rem; color:var(--g-azul);
}
.simu__ficha-acoes i{
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--g-linha);
  display:grid; place-items:center;
}
.simu__ficha-acoes svg{ width:15px; height:15px; }

.simu__ficha-checks{
  margin:13px 0 0; padding-top:11px;
  border-top:1px solid var(--g-linha);
  display:flex; flex-direction:column; gap:7px;
  padding-left:0; list-style:none;
}
.simu__ficha-checks li{
  position:relative; padding-left:23px;
  font-size:.71rem; color:var(--g-txt);
  opacity:0; transform:translateX(-5px);
  transition:opacity .3s ease, transform .3s ease;
}
.simu__ficha-checks li.is-on{ opacity:1; transform:none; }
.simu__ficha-checks li::before{
  content:""; position:absolute; left:0; top:0;
  width:15px; height:15px; border-radius:50%; background:var(--g-verde);
}
.simu__ficha-checks li::after{
  content:""; position:absolute; left:4px; top:5px;
  width:6px; height:3px;
  border-left:1.5px solid #fff; border-bottom:1.5px solid #fff;
  transform:rotate(-45deg);
}

/* No celular a ficha por cima fica ilegível. Ela sai e ficam só os
   resultados — que é a parte que conta a história da subida. */
@media (max-width:900px){
  .simu__tela{ width:100%; }
  .simu__ficha{ display:none; }
}

/* ============================================================
   Dados da empresa no rodapé
   ------------------------------------------------------------
   Razão social, CNPJ, endereço e contato ficam visíveis na home
   porque a verificação de empresa da Meta confere esses dados do
   site contra o documento enviado. Não tirar daqui.
   ============================================================ */
.rodape__legal{
  border-top:1px solid var(--linha-clara);
  padding-top:1.6rem;
  font-size:.855rem;
  line-height:1.62;
  color:var(--txt-claro-tenue);
}
.rodape__legal p{ margin:0 0 .35rem; }
.rodape__legal p:last-child{ margin-bottom:0; }
.rodape__legal strong{ color:var(--txt-claro-suave); font-weight:600; }
.rodape__legal a{ color:inherit; text-decoration:none; }
.rodape__legal a:hover{ color:var(--ouro); }

.rodape__politicas{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.rodape__politicas a{
  color:var(--txt-claro-tenue);
  text-decoration:none;
  transition:color .2s ease;
}
.rodape__politicas a:hover{ color:var(--ouro); }

/* ============================================================
   Páginas legais (privacidade, termos)
   ------------------------------------------------------------
   Texto corrido, sem card e sem coluna dupla: é documento pra ler,
   não peça de venda.
   ============================================================ */
.legal h2{
  font-size:clamp(1.35rem,1.4vw + 1rem,1.72rem);
  margin:2.9rem 0 .9rem;
}
.legal h2:first-child{ margin-top:0; }
.legal h3{
  font-size:1.05rem;
  margin:1.8rem 0 .6rem;
}
.legal p,
.legal li{
  font-size:1.02rem;
  line-height:1.68;
  color:var(--txt-escuro-suave);
}
.legal ul{ margin:0 0 1.1em; padding-left:1.15rem; }
.legal li{ margin-bottom:.55rem; }
.legal li::marker{ color:var(--ouro); }
.legal strong{ color:var(--txt-escuro); }
.legal a{ color:var(--txt-escuro); text-decoration:underline; text-underline-offset:.18em; }
.legal a:hover{ color:var(--breu); text-decoration-color:var(--ouro); }

.legal__atualizado{
  margin-top:3.2rem;
  padding-top:1.4rem;
  border-top:1px solid var(--linha-escura);
  font-size:.9rem;
  color:var(--txt-escuro-tenue);
}