/* ============================================================
   SantosWeb · estilos
   Paleta e tipografia travadas por identidade/design-guide.md
   ============================================================ */

:root{
  /* cor */
  --paper:#F1F5F8;
  --white:#FFFFFF;
  --ink:#1C2B33;
  --blue:#0064E0;
  --blue-lit:#0082FB;

  /* azul da marca a 9% já achatado sobre o papel, pra chip de ícone.
     Sólido de propósito: precisa tampar o que passa por trás. */
  --blue-wash:#DBE8F6;

  --muted:rgba(28,43,51,.64);
  --faint:rgba(28,43,51,.42);
  --rule:rgba(28,43,51,.10);
  --rule-2:rgba(28,43,51,.16);
  --wash:rgba(28,43,51,.05);

  --inv-muted:rgba(241,245,248,.66);
  --inv-rule:rgba(241,245,248,.14);

  /* Verde real do WhatsApp. Exceção consciente à paleta, decidida em 07/08/2026:
     vale só dentro do mock de conversa, onde a fidelidade da simulação é o ponto.
     Não usar em nenhum outro lugar do site. */
  --wa-green:#D9FDD3;

  /* Os rabiscos de fundo do WhatsApp, em SVG repetido em tile. Vive aqui
     como variavel porque a pagina de turismo precisa do mesmo desenho em
     outra propriedade: la o fundo e do proprio corpo da conversa, e nao
     de uma pseudo, senao ele conta como area rolavel e estraga a rolagem. */
  --wa-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none' stroke='%231C2B33' stroke-opacity='.055' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 27c-6-4.2-9-7.2-9-10.7a4.6 4.6 0 0 1 9-2.3 4.6 4.6 0 0 1 9 2.3C25 19.8 22 22.8 16 27z'/%3E%3Crect x='46' y='11' width='21' height='14' rx='3'/%3E%3Ccircle cx='56.5' cy='18' r='4'/%3E%3Cpath d='M52 11l1.8-3h5.4l1.8 3'/%3E%3Cpath d='M92 10h14v8.5a5.5 5.5 0 0 1-5.5 5.5h-3A5.5 5.5 0 0 1 92 18.5z'/%3E%3Cpath d='M106 12.5h2.5a3.2 3.2 0 0 1 0 6.4H106'/%3E%3Cpath d='M91 27.5h16'/%3E%3Cpath d='M14 66.5V52l12-2.6v14.1'/%3E%3Ccircle cx='11' cy='67' r='3.1'/%3E%3Ccircle cx='23' cy='64' r='3.1'/%3E%3Cpath d='M45 61.5l26-9.5-9 24.5-5-9.5z'/%3E%3Cpath d='M57 67l14-15'/%3E%3Ccircle cx='102' cy='60' r='10'/%3E%3Ccircle cx='98.4' cy='57' r='1' fill='%231C2B33' fill-opacity='.055' stroke='none'/%3E%3Ccircle cx='105.6' cy='57' r='1' fill='%231C2B33' fill-opacity='.055' stroke='none'/%3E%3Cpath d='M97.4 63.4a6.2 6.2 0 0 0 9.2 0'/%3E%3Cpath d='M8 101a12 12 0 0 1 24 0z'/%3E%3Cpath d='M20 101v9.5a3.6 3.6 0 0 0 7.2 0'/%3E%3Cpath d='M46 93h22a3.2 3.2 0 0 1 3.2 3.2v8.6a3.2 3.2 0 0 1-3.2 3.2H56l-6.5 5v-5H46a3.2 3.2 0 0 1-3.2-3.2v-8.6A3.2 3.2 0 0 1 46 93z'/%3E%3Cpath d='M102 92.5l3.2 6.5 7.2 1-5.2 5.1 1.2 7.2-6.4-3.4-6.4 3.4 1.2-7.2-5.2-5.1 7.2-1z'/%3E%3C/svg%3E");

  /* medida */
  /* 1280 de caixa menos 40px de recuo de cada lado = 1200 de conteúdo */
  --wrap:1280px;
  --gut:clamp(20px,4vw,40px);
  --sec:clamp(72px,10vw,132px);
  --feat:clamp(58px,7.5vw,100px);
  --r:10px;

  --shadow:0 1px 3px rgba(28,43,51,.07);
  --shadow-2:0 10px 30px rgba(28,43,51,.09);
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

img,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.08}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}

a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

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

/* respiro ao pular pra uma âncora */
[id]{scroll-margin-top:28px}


.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

/* ---------- átomos tipográficos ---------- */

.label{
  margin:0 0 20px;
  font-size:.6875rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--blue);
}
.label--inv{color:rgba(241,245,248,.5)}

.h2{font-size:clamp(1.8rem,3.3vw,2.7rem);max-width:19ch}
.h2--inv{color:var(--paper)}

.lead{
  margin-top:22px;max-width:62ch;
  font-size:clamp(1.02rem,1.35vw,1.12rem);color:var(--muted);
}
.lead + .lead{margin-top:18px}
.lead--inv{color:var(--inv-muted)}

/* ---------- botões ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);color:var(--white);
  font-weight:600;font-size:.97rem;letter-spacing:-.005em;
  padding:15px 26px;border:0;border-radius:var(--r);
  cursor:pointer;transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--blue-lit)}
.btn:active{transform:translateY(1px)}

.lnk{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:500;color:var(--muted);
  padding:15px 4px;transition:color .18s ease;
}
.lnk:hover{color:var(--blue)}

/* ---------- marca ---------- */
/* Lockup em PNG. A versão -inv tem "santos" em papel e o azul clareado,
   pra segurar contraste sobre o fundo escuro do rodapé. */
.mark{display:inline-flex;align-items:center}
.mark__img{display:block;height:clamp(34px,5vw,42px);width:auto}
.foot .mark__img{height:38px}

/* ============================================================
   NAV
   ============================================================ */

/* Só a marca. A navegação inteira vive na doca flutuante lá embaixo. */
.nav__in{display:flex;align-items:center;height:70px}

/* ============================================================
   DOCA · navegação flutuante inferior
   O indicador desliza sozinho conforme a seção em que você está,
   então ele carrega informação em vez de reagir só ao clique.
   ============================================================ */

/* A doca começa no topo e desce pra cá na primeira rolagem.
   Quem manda no --dy é o setupDockTravel() no main.js. */
.dock{
  position:fixed;z-index:50;
  left:50%;bottom:20px;
  transform:translateX(-50%) translateY(var(--dy,0px));
  max-width:calc(100% - 24px);
  transition:transform .32s cubic-bezier(.45,0,.15,1);
}
/* usado no instante em que ela salta de uma borda pra outra, fora da tela */
.dock--jump{transition:none}

.dock__in{
  display:flex;align-items:center;gap:4px;
  background:var(--white);
  border:1px solid var(--rule-2);border-radius:16px;
  padding:6px;
  /* Sombra bem discreta. Quem separa a doca do conteúdo é a borda, não ela.
     A primeira versão usava 28px de raio a 12% e ficava pesada. */
  box-shadow:0 4px 14px rgba(28,43,51,.06),0 1px 2px rgba(28,43,51,.05);
}

.dock__list{position:relative;display:flex;align-items:center;gap:2px}

.dock__ind{
  position:absolute;left:0;top:0;bottom:0;width:0;
  border-radius:10px;background:rgba(28,43,51,.07);
  opacity:0;pointer-events:none;
  transition:transform .45s cubic-bezier(.65,0,.15,1),
             width .45s cubic-bezier(.65,0,.15,1),
             opacity .3s ease;
}
.dock__ind.is-on{opacity:1}

.dock__link{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:10px;
  font-size:.88rem;font-weight:500;white-space:nowrap;
  color:var(--muted);transition:color .2s ease;
}
.dock__link svg{width:16px;height:16px;flex:none}
.dock__link:hover{color:var(--ink)}
.dock__link.is-on{color:var(--ink);font-weight:600}

.dock__sep{width:1px;height:22px;background:var(--rule);margin-inline:4px;flex:none}

.dock__cta{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--blue);color:var(--white);
  padding:9px 15px;border-radius:10px;
  font-size:.88rem;font-weight:600;white-space:nowrap;
  transition:background .18s ease;
}
.dock__cta svg{width:15px;height:15px;flex:none}
.dock__cta:hover{background:var(--blue-lit)}

/* --- celular: vira barra de abas de largura cheia, rótulo sob o ícone --- */
@media (max-width:640px){
  .dock{left:12px;right:12px;bottom:12px;transform:none;max-width:none}

  /* Os quatro links dividem o que sobra; o CTA pega a largura do próprio texto,
     senão "Diagnóstico" fica espremido na mesma coluna de "Como". */
  .dock__in{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:2px;padding:5px}
  .dock__list{display:contents}
  .dock__ind,.dock__sep{display:none}

  /* O <li> é a célula do grid, mas o <a> é inline-flex e encolhia pro tamanho
     do texto, colando na esquerda da célula. Por isso os itens apareciam
     desalinhados entre si. O link precisa ocupar a célula inteira. */
  .dock__list li{display:flex}
  .dock__list li .dock__link{flex:1}

  .dock__link,.dock__cta{
    flex-direction:column;gap:3px;justify-content:center;
    padding:8px 2px;font-size:.62rem;letter-spacing:-.01em;
    text-align:center;
  }
  /* o CTA tem o ícone depois do texto no HTML, inverte pra alinhar com os outros */
  .dock__cta{flex-direction:column-reverse;padding-inline:13px}
  .dock__link svg,.dock__cta svg{width:18px;height:18px}
  .dock__link.is-on{background:rgba(28,43,51,.07)}
  .dock__wide{display:none}
}

/* ============================================================
   HERO
   ============================================================ */

.hero{padding-top:clamp(44px,6vw,78px);padding-bottom:clamp(40px,5vw,64px)}

.hero__in{
  display:grid;grid-template-columns:1.03fr .97fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
/* Item de grid não encolhe abaixo do próprio conteúdo mínimo por padrão, e o
   texto sem quebra dentro do card de busca empurrava a página inteira em tela
   estreita. Sem isso, sobra rolagem horizontal abaixo de uns 340px. */
.hero__text,.serp{min-width:0}

.hero__h1{
  font-size:clamp(2.2rem,4.3vw,3.5rem);
  font-weight:600;letter-spacing:-.032em;line-height:1.04;
  max-width:17ch;
}
.hero__h1 em{font-style:italic;font-weight:700;color:var(--blue)}

.hero__sub{
  margin-top:26px;max-width:48ch;
  font-size:clamp(1.04rem,1.4vw,1.16rem);color:var(--muted);
}

.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:34px}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .hero__h1{max-width:19ch}
}

/* ============================================================
   HERO · simulação da busca e da ficha do Google
   Cores reais do Google aqui dentro. É a exceção de "simulação de
   interface de terceiro" registrada no identidade/design-guide.md,
   a mesma do verde do WhatsApp. Não usar essas cores fora daqui.
   ============================================================ */

.gmock,.gficha{
  --g-blue:#1A73E8;
  --g-star:#FBBC05;
  --g-green:#1E8E3E;
  --g-line:#E4E7EB;
  --g-txt:#202124;
  --g-sub:#5F6368;
}
.gmock{position:relative}

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

.gsr{
  width:84%;
  background:var(--white);border:1px solid var(--g-line);border-radius:14px;
  padding:18px 18px 10px;
  box-shadow:0 12px 34px rgba(28,43,51,.10);
}

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

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

.gsr__field{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  border:1px solid var(--g-line);border-radius:999px;
  padding:8px 14px;font-size:.8rem;color:var(--g-txt);
  box-shadow:0 1px 4px rgba(28,43,51,.06);
}
.gsr__q{white-space:nowrap;overflow:hidden;flex:1;min-width:0}
.gsr__caret{
  width:1.5px;height:14px;background:var(--g-blue);flex:none;
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.gsr__mic,.gsr__go{width:15px;height:15px;flex:none}

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

.gsr__row{
  display:flex;align-items:center;gap:11px;
  padding:9px 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;
}
.gsr__row.is-on{opacity:1;transform:none}
.gsr__row.is-dim.is-on{opacity:.45}

.gsr__pos{font-size:.7rem;color:var(--g-sub);width:12px;flex:none}

.gsr__thumb{
  width:38px;height:38px;border-radius:7px;flex:none;
  background:var(--wash) center/cover no-repeat;
}

.gsr__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gsr__name{
  font-size:.82rem;font-weight:500;color:var(--g-txt);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:5px;
}
.gsr__name svg{width:13px;height:13px;flex:none}
.gsr__meta{font-size:.7rem;color:var(--g-sub)}
.gsr__meta i{color:var(--g-star);font-style:normal}

/* linhas cinzas, sem nome, das posições de baixo */
.gsr__bar{height:7px;border-radius:4px;background:var(--wash)}
.gsr__bar--sm{width:52%;height:6px}

/* a linha da própria empresa, destacada */
.gsr__row--you{background:rgba(26,115,232,.04)}
.gsr__row--you.is-lit{border-color:var(--g-blue)}
.gsr__row--you .gsr__name{font-weight:600}
.gsr__row--you .gsr__thumb{background-image:url("barco.jpg")}

/* --- o painel da ficha, por cima --- */

.gpanel{
  position:absolute;right:0;top:14%;width:57%;
  background:var(--white);border:1px solid var(--g-line);border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 46px rgba(28,43,51,.20);
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.4,0,.2,1);
}
.gpanel.is-on{opacity:1;transform:none}

.gpanel__shot{
  position:relative;height:126px;
  background:var(--wash) center/cover no-repeat;
  background-image:url("barco.jpg");
}
.gpanel__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;
}
.gpanel__count{
  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;
}

.gpanel__pad{padding:14px 16px 16px}

.gpanel__name{
  display:flex;align-items:center;gap:6px;
  font-size:1rem;font-weight:700;color:var(--g-txt);letter-spacing:-.02em;
}
.gpanel__name svg{width:15px;height:15px;flex:none}

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

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

.gpanel__acts{display:flex;gap:6px;margin-top:14px}
.gpanel__acts span{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:.6rem;color:var(--g-blue);font-weight:500;
}
.gpanel__acts i{
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--g-line);
  display:grid;place-items:center;
}
.gpanel__acts svg{width:15px;height:15px}

.gpanel__checks{
  margin-top:16px;padding-top:13px;border-top:1px solid var(--g-line);
  display:flex;flex-direction:column;gap:9px;
}
.gpanel__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;
}
.gpanel__checks li.is-on{opacity:1;transform:none}
.gpanel__checks li::before{
  content:"";position:absolute;left:0;top:0;
  width:15px;height:15px;border-radius:50%;background:var(--g-green);
}
.gpanel__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);
}

.gmock__cap{margin-top:20px;font-size:.76rem;color:var(--faint)}

/* No celular o painel por cima fica ilegível, então some e ficam só os
   resultados, que é a parte que conta a história. */
@media (max-width:900px){
  .gsr{width:100%}
  .gpanel{display:none}
  .gmock__cap{margin-top:16px}
}

/* --- barra de confiança, fecha a hero --- */

.trust{margin-top:clamp(38px,5vw,60px)}

.trust__lbl{
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);
  font-size:.66rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--faint);
}
.trust__lbl i{flex:1;height:1px;background:var(--rule)}
.trust__lbl span{text-align:center}

.trust__list{
  margin-top:22px;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px clamp(26px,4.5vw,60px);
}
.trust__list li{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.92rem;color:var(--muted);
}
.trust__list svg{width:17px;height:17px;flex:none;color:var(--faint)}

@media (max-width:560px){
  .trust__lbl{gap:12px}
  .trust__lbl span{font-size:.6rem;letter-spacing:.14em}
  .trust__list{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ============================================================
   ATRITO
   ============================================================ */

/* sem borda no topo: a barra de confiança que fecha a hero já tem as réguas
   dela, e as duas linhas tão perto uma da outra ficavam repetidas */
.atrito{padding-block:var(--sec)}

/* Cabeçalho centralizado. Funciona aqui porque o diagrama logo abaixo ocupa a
   largura inteira e é simétrico, então o bloco não fica pendurado. */
.atrito .label{text-align:center}

.atrito__h2{
  max-width:24ch;margin-inline:auto;text-align:center;
  text-wrap:balance; /* iguala o tamanho das linhas, some o degrau feio */
}

/* Quebra manual em três linhas, pedida em 07/08/2026. Só entra quando a
   primeira linha cabe inteira, senão sairia pior que a quebra automática.
   Abaixo de 820px o <br> some e o texto volta a fluir com o balance. */
.qb{display:none}
@media (min-width:820px){
  .atrito__h2{max-width:none;text-wrap:normal}
  .atrito__h2 .qb{display:inline}
}

.atrito .lead{
  max-width:56ch;margin-inline:auto;text-align:center;
  text-wrap:pretty;
}

/* No celular o mesmo parágrafo vira uma coluna estreita e alta, e centralizado
   ele fica com as duas bordas irregulares. Volta a alinhar à esquerda. */
@media (max-width:640px){
  .atrito .lead{text-align:left}
}

/* O percurso do cliente e os quatro pontos onde a venda vaza.
   Trilho horizontal no desktop, vertical no celular. */

.leak{
  margin-top:clamp(44px,5.5vw,72px);
  display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"capa capb" "list list";
  column-gap:24px;row-gap:16px;
}

.leak__cap{
  font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);
}
.leak__cap--a{grid-area:capa}
.leak__cap--b{grid-area:capb;color:var(--blue)}

.leak__list{
  grid-area:list;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,2.6vw,40px);
}

/* o trilho, passando pelo centro dos chips */
.leak__list::before{
  content:"";position:absolute;left:0;right:14px;top:16px;height:1px;
  background:var(--rule-2);
}
/* a ponta da seta, onde o cliente sai */
.leak__list::after{
  content:"";position:absolute;right:0;top:16px;
  width:8px;height:8px;
  border-top:1.5px solid var(--blue);border-right:1.5px solid var(--blue);
  transform:translate(0,-50%) rotate(45deg);
}

.leak__list li{position:relative;padding:44px 0 6px 0}

/* o chip que marca o momento. Fundo sólido de propósito, pra tampar o
   trilho por trás e o ícone virar um nó de verdade na linha. */
.leak__ico{
  position:absolute;left:0;top:0;
  width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--blue-wash);color:var(--blue);
}
.leak__ico svg{width:16px;height:16px}

.leak__where{
  display:block;
  font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);
}
.leak__list h3{margin-top:9px;font-size:1.14rem;font-weight:700}
.leak__list p{margin-top:11px;font-size:.93rem;color:var(--muted)}

@media (max-width:820px){
  .leak{display:block}
  .leak__list{grid-template-columns:1fr;gap:0;margin-top:14px}

  /* trilho vira vertical e os chips descem pela esquerda,
     com o texto ao lado em vez de embaixo */
  .leak__list::before{
    left:16px;right:auto;top:16px;bottom:24px;
    width:1px;height:auto;
  }
  .leak__list::after{
    right:auto;left:16px;top:auto;bottom:9px;
    transform:translate(-50%,0) rotate(135deg);
  }
  .leak__list li{padding:0 0 28px 46px}
  .leak__list li:last-child{padding-bottom:34px}

  .leak__cap--b{margin-top:4px}
}

/* ============================================================
   ÍNDICE DE SERVIÇOS
   ============================================================ */

/* Banda escura, pra quebrar a sequência de seções claras (pedido em 07/08/2026).
   Os três cards seguem a ordem real do caminho do cliente: ele acha a ficha,
   entra no site, chama no WhatsApp. É a mesma ordem da seção do problema. */

.serv{background:var(--ink);color:var(--paper);padding-block:var(--sec)}
.serv__lead{max-width:52ch}

.serv__grid{
  margin-top:clamp(40px,5vw,56px);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,20px);
}

.card{
  display:flex;flex-direction:column;
  background:rgba(241,245,248,.045);
  border:1px solid var(--inv-rule);border-radius:12px;
  padding:26px 24px 22px;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.card:hover{
  background:rgba(241,245,248,.075);
  border-color:rgba(241,245,248,.26);
  transform:translateY(-2px);
}

.card__n{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:rgba(241,245,248,.38)}

.card__step{
  display:block;margin-top:16px;
  font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue-lit);
}

.card__h3{margin-top:9px;font-size:1.14rem;color:var(--paper)}
.card p{margin-top:11px;font-size:.93rem;color:var(--inv-muted)}

.card__go{
  margin-top:auto;padding-top:22px;
  font-size:.85rem;font-weight:600;color:var(--blue-lit);
  display:inline-flex;align-items:center;gap:7px;
}
.card__go i{font-style:normal;transition:transform .18s ease}
.card:hover .card__go i{transform:translateX(3px)}

@media (max-width:1040px){.serv__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.serv__grid{grid-template-columns:1fr}}

/* ============================================================
   SEÇÕES DE SERVIÇO
   ============================================================ */

.feat{padding-block:var(--feat);border-top:1px solid var(--rule)}
/* a primeira vem logo depois da banda escura, e ali a troca de cor já separa */
.serv + .feat{border-top:0}

.feat__in{
  display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(34px,5vw,80px);align-items:center;
}
.feat--flip .feat__art{order:2}

.feat__art{min-width:0}
.feat__cap{margin-top:14px;font-size:.76rem;color:var(--faint)}
.feat--flip .feat__cap{text-align:right}

.feat__text .h2{max-width:17ch}
.feat__text .lead{max-width:46ch}

.feat__pts{margin-top:28px;display:flex;flex-direction:column}
.feat__pts li{
  position:relative;padding:12px 0 12px 26px;
  border-top:1px solid var(--rule);
  font-size:.95rem;color:var(--ink);
}
/* Regra da casa: linha só entre duas coisas. Nada de linha antes do primeiro
   item nem depois do último, porque aí ela não separa nada. */
.feat__pts li:first-child{border-top:0}
.feat__pts li::before{
  content:"";position:absolute;left:3px;top:21px;
  width:7px;height:7px;border-radius:2px;background:var(--blue);
}

@media (max-width:900px){
  .feat__in{grid-template-columns:1fr}
  .feat--flip .feat__art{order:0}
  .feat--flip .feat__cap{text-align:left}
  .feat__text .h2,.feat__text .lead{max-width:none}
}

/* ---------- casca comum dos mocks ---------- */

.mock{
  position:relative;
  width:100%;max-width:520px;
  background:var(--white);
  border:1px solid var(--rule-2);border-radius:12px;
  box-shadow:var(--shadow-2);
  overflow:hidden;
  font-variant-numeric:normal;
}
.feat--flip .mock{margin-left:auto}

/* ============================================================
   MOCK 01 · navegador com o site
   ============================================================ */

.brw__bar{
  display:flex;align-items:center;gap:6px;
  padding:11px 14px;border-bottom:1px solid var(--rule);background:var(--paper);
}
.brw__dot{width:8px;height:8px;border-radius:50%;background:var(--rule-2)}
.brw__url{
  margin-left:12px;flex:1;
  background:var(--white);border:1px solid var(--rule);border-radius:999px;
  padding:5px 12px;font-size:.66rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.brw__vp{padding:0;background:var(--white)}

.mini{font-size:.68rem;line-height:1.45}
.mini__nav{
  display:flex;align-items:center;gap:14px;
  padding:12px 18px;border-bottom:1px solid var(--rule);
}
.mini__nav b{font-size:.72rem;letter-spacing:-.01em;margin-right:auto}
.mini__nav span{color:var(--muted);font-size:.63rem}
.mini__cta{
  font-style:normal;background:var(--blue);color:var(--white);
  padding:5px 10px;border-radius:6px;font-size:.62rem;font-weight:600;
}

.mini__hero{padding:26px 18px 24px}
.mini__eyebrow{
  font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);
}
.mini__hero h4{margin-top:9px;font-size:1.18rem;letter-spacing:-.028em;max-width:14ch}
.mini__p{margin-top:9px;font-size:.7rem;color:var(--muted);max-width:34ch}
.mini__btn{
  display:inline-block;margin-top:16px;
  background:var(--blue);color:var(--white);
  padding:8px 14px;border-radius:7px;font-size:.66rem;font-weight:600;
}

.mini__cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border-top:1px solid var(--rule);
}
.mini__cards span{
  background:var(--white);padding:14px 12px 18px;
  display:flex;flex-direction:column;gap:4px;
  font-size:.62rem;color:var(--muted);
}
.mini__cards b{font-size:.68rem;color:var(--ink);font-weight:600}

.brw__chip{
  position:absolute;right:14px;bottom:78px;
  background:var(--ink);color:var(--paper);
  border-radius:8px;padding:9px 13px;
  font-size:.68rem;letter-spacing:-.005em;
  box-shadow:0 6px 18px rgba(28,43,51,.22);
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease;
}
.brw__chip b{color:var(--white);font-weight:700}
.brw__chip.is-on{opacity:1;transform:none}

/* ============================================================
   MOCK 02 · ficha do Google Meu Negócio
   ============================================================ */

/* Mesma linguagem do painel da hero: foto real, selo azul, estrelas douradas
   e botões redondos. O que só existe aqui é o horário e a avaliação
   respondida, que é o argumento desta seção. */

.gficha{max-width:480px;border-color:var(--g-line);border-radius:16px}

.gficha__shot{
  position:relative;height:192px;
  background:var(--wash) center/cover no-repeat;
  background-image:url("pousada.jpg");
}
.gficha__count{
  position:absolute;right:11px;bottom:11px;
  background:rgba(32,33,36,.72);color:#fff;
  border-radius:5px;padding:4px 8px;font-size:.6rem;font-weight:500;
}

.gficha__pad{padding:18px 20px 20px}

.gficha__name{
  display:flex;align-items:center;gap:7px;
  font-size:1.12rem;font-weight:700;color:var(--g-txt);letter-spacing:-.026em;
}
.gficha__name svg{width:16px;height:16px;flex:none}

.gficha__rate{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.76rem;color:var(--g-sub)}
.gficha__rate>b{font-size:.86rem;font-weight:700;color:var(--g-txt)}
.gficha__rate b{font-weight:600;color:var(--g-txt)}

.gficha__stars{
  position:relative;display:block;width:76px;height:13px;
  background:var(--rule-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='13' viewBox='0 0 76 13'%3E%3Cpath d='M6.5 0l2 4.1 4.5.6-3.2 3.1.8 4.5-4.1-2.2L2.4 12.3l.8-4.5L0 4.7l4.5-.6z' fill='%23000'/%3E%3Cpath d='M22.3 0l2 4.1 4.5.6-3.2 3.1.8 4.5-4.1-2.2-4.1 2.2.8-4.5-3.2-3.1 4.5-.6z' fill='%23000'/%3E%3Cpath d='M38.1 0l2 4.1 4.5.6-3.2 3.1.8 4.5-4.1-2.2L34 12.3l.8-4.5-3.2-3.1 4.5-.6z' fill='%23000'/%3E%3Cpath d='M53.9 0l2 4.1 4.5.6-3.2 3.1.8 4.5-4.1-2.2-4.1 2.2.8-4.5-3.2-3.1 4.5-.6z' fill='%23000'/%3E%3Cpath d='M69.7 0l2 4.1 4.5.6L73 7.8l.8 4.5-4.1-2.2-4.1 2.2.8-4.5-3.2-3.1 4.5-.6z' fill='%23000'/%3E%3C/svg%3E") no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='13' viewBox='0 0 76 13'%3E%3Cpath d='M6.5 0l2 4.1 4.5.6-3.2 3.1.8 4.5-4.1-2.2L2.4 12.3l.8-4.5L0 4.7l4.5-.6z' fill='%23000'/%3E%3Cpath d='M22.3 0l2 4.1 4.5.6-3.2 3.1.8 4.5-4.1-2.2-4.1 2.2.8-4.5-3.2-3.1 4.5-.6z' fill='%23000'/%3E%3Cpath d='M38.1 0l2 4.1 4.5.6-3.2 3.1.8 4.5-4.1-2.2L34 12.3l.8-4.5-3.2-3.1 4.5-.6z' fill='%23000'/%3E%3Cpath d='M53.9 0l2 4.1 4.5.6-3.2 3.1.8 4.5-4.1-2.2-4.1 2.2.8-4.5-3.2-3.1 4.5-.6z' fill='%23000'/%3E%3Cpath d='M69.7 0l2 4.1 4.5.6L73 7.8l.8 4.5-4.1-2.2-4.1 2.2.8-4.5-3.2-3.1 4.5-.6z' fill='%23000'/%3E%3C/svg%3E") no-repeat;
}
.gficha__stars i{
  position:absolute;inset:0;width:0;background:var(--g-star);
  transition:width 1.4s cubic-bezier(.4,0,.2,1);
}

.gficha__cat{margin-top:6px;font-size:.74rem;color:var(--g-sub)}
.gficha__open{margin-top:3px;font-size:.74rem;color:var(--g-sub)}
.gficha__open b{color:var(--g-green);font-weight:600}

/* botões redondos, iguais aos do painel da hero */
.gficha__acts{display:flex;gap:8px;margin-top:18px}
.gficha__acts span{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:.62rem;color:var(--g-blue);font-weight:500;
}
.gficha__acts i{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--g-line);
  display:grid;place-items:center;
}
.gficha__acts svg{width:16px;height:16px}

.gficha__rev{margin-top:18px;padding-top:15px;border-top:1px solid var(--g-line)}
.gficha__revtx{font-size:.78rem;color:var(--g-txt);line-height:1.45}
.gficha__reply{margin-top:7px;font-size:.7rem;color:var(--g-sub)}
.gficha__reply b{color:var(--g-txt);font-weight:600}

/* ============================================================
   MOCK 03 · conversa de WhatsApp
   ============================================================ */

.wa{max-width:480px}

.wa__bar{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;background:var(--ink);color:var(--paper);
}
.wa__av{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:rgba(241,245,248,.14);
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:700;letter-spacing:.02em;
}
.wa__id{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.wa__id b{font-size:.85rem;font-weight:600;letter-spacing:-.01em}
.wa__id i{font-style:normal;font-size:.66rem;color:rgba(241,245,248,.6)}
.wa__id i.is-typing{color:var(--blue-lit)}
.wa__ico{width:18px;height:18px;flex:none;color:rgba(241,245,248,.5)}

.wa__body{
  position:relative;
  min-height:390px;
  padding:16px 14px 18px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  background-color:var(--paper);
}
/* doodles do WhatsApp, desenhados em SVG e repetidos em tile */
.wa__body::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--wa-doodle);
  background-size:128px 128px;
}

.wa__day{
  position:relative;align-self:center;margin-bottom:4px;
  background:rgba(28,43,51,.07);border-radius:6px;
  padding:3px 10px;font-size:.6rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);
}

.wa__msg{
  display:none;position:relative;max-width:82%;
  padding:9px 12px 8px;border-radius:10px;
  font-size:.82rem;line-height:1.45;
  opacity:0;transform:translateY(8px) scale(.98);transform-origin:bottom;
  transition:opacity .3s ease,transform .3s ease;
}
.wa__msg.is-mounted{display:block}
.wa__msg.is-on{opacity:1;transform:none}
/* sem JS a conversa aparece inteira */
.no-js .wa__msg{display:block;opacity:1;transform:none}

.wa__msg--in{
  align-self:flex-start;border-top-left-radius:3px;
  background:var(--white);color:var(--ink);
  box-shadow:0 1px 2px rgba(28,43,51,.1);
}
.wa__msg--out{
  align-self:flex-end;border-top-right-radius:3px;
  background:var(--wa-green);color:var(--ink);
  box-shadow:0 1px 2px rgba(28,43,51,.12);
}

/* o link de reserva dentro da bolha */
.wa__lnk{
  display:block;margin-top:6px;
  color:var(--blue);text-decoration:underline;
  text-decoration-color:rgba(0,100,224,.35);text-underline-offset:2px;
  word-break:break-all;
}

.wa__t{
  display:inline-flex;align-items:center;gap:3px;
  float:right;margin:6px 0 -2px 10px;
  font-size:.6rem;color:var(--faint);
}
.wa__msg--out .wa__t{color:rgba(28,43,51,.45)}
.wa__t svg{width:13px;height:9px}
/* os dois tiques de lido, azuis como no WhatsApp */
.wa__msg--out .wa__t svg{color:var(--blue-lit)}

.wa__typing{
  position:relative;align-self:flex-start;
  display:flex;gap:4px;padding:11px 13px;
  background:var(--white);border-radius:10px;border-top-left-radius:3px;
  box-shadow:0 1px 2px rgba(28,43,51,.1);
  opacity:0;transition:opacity .2s ease;
}
.wa__typing.is-on{opacity:1}
.wa__typing i{
  width:5px;height:5px;border-radius:50%;background:var(--faint);
  animation:bob .9s ease-in-out infinite;
}
.wa__typing i:nth-child(2){animation-delay:.15s}
.wa__typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}

/* ============================================================
   MOCK 04 · painel de rotina
   Trocado em 07/08/2026: era um quadro de reservas, mas motor de reserva
   todo mundo já tem. O argumento agora é o trabalho repetitivo interno,
   que é onde não existe software de prateleira.
   ============================================================ */

.rot{max-width:480px}

.rot__bar{
  display:flex;align-items:baseline;gap:10px;
  padding:14px 20px;border-bottom:1px solid var(--rule);background:var(--paper);
}
.rot__bar b{font-size:.84rem}
.rot__bar span{font-size:.7rem;color:var(--muted);margin-left:auto}

.rot__list{padding:6px 20px 4px}
.rot__list li{
  display:flex;align-items:center;gap:11px;
  padding:12px 0;font-size:.8rem;color:var(--ink);
  border-top:1px solid var(--rule);
}
.rot__list li:first-child{border-top:0}

/* a caixinha de feito */
.rot__box{
  position:relative;flex:none;
  width:16px;height:16px;border-radius:5px;
  border:1.5px solid var(--rule-2);
  transition:background .3s ease,border-color .3s ease;
}
.rot__box::after{
  content:\;position:absolute;left:3px;top:4px;
  width:7px;height:3.5px;
  border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;
  transform:rotate(-45deg) scale(.4);opacity:0;
  transition:opacity .25s ease,transform .25s ease;
}
.rot__list li.is-done .rot__box{background:var(--blue);border-color:var(--blue)}
.rot__list li.is-done .rot__box::after{opacity:1;transform:rotate(-45deg) scale(1)}
.rot__list li.is-done{color:var(--muted)}

/* quem faz: o sistema ou uma pessoa */
.rot__tag,.rot__who{
  margin-left:auto;flex:none;font-style:normal;
  font-size:.62rem;font-weight:600;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.rot__tag{background:var(--blue-wash);color:var(--blue)}
.rot__who{background:var(--wash);color:var(--muted)}

.rot__foot{
  padding:14px 20px 16px;border-top:1px solid var(--rule);
  font-size:.68rem;font-weight:600;color:var(--faint);
  opacity:0;transition:opacity .4s ease,color .3s ease;
}
.rot__foot.is-on{opacity:1;color:var(--blue)}

/* ============================================================
   MOCK 05 · post do Instagram
   ============================================================ */

.ig{max-width:345px}

.ig__bar{display:flex;align-items:center;gap:10px;padding:12px 14px}
.ig__av{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:700;
}
.ig__id{display:flex;flex-direction:column;line-height:1.25}
.ig__id b{font-size:.78rem;font-weight:600}
.ig__id i{font-style:normal;font-size:.64rem;color:var(--muted)}

.ig__vp{overflow:hidden;border-block:1px solid var(--rule)}
.ig__track{display:flex;transition:transform .55s cubic-bezier(.65,0,.15,1)}
.ig__slide{
  flex:none;width:100%;aspect-ratio:4/5;
  padding:28px 26px;
  display:flex;flex-direction:column;
  background:var(--paper);
  border-right:1px solid var(--rule);
}
.ig__eyebrow{
  font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);
}
.ig__num{
  font-size:1.5rem;font-weight:800;letter-spacing:-.04em;color:var(--blue);
  line-height:1;
}
.ig__slide h4{
  margin-top:auto;
  font-size:clamp(1.05rem,3.4vw,1.32rem);letter-spacing:-.03em;line-height:1.14;
}
.ig__swipe{
  margin-top:16px;font-size:.66rem;font-weight:600;color:var(--muted);
  display:flex;align-items:center;gap:6px;
}
.ig__swipe i{font-style:normal}

.ig__foot{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:13px 14px;
}
.ig__dots{display:flex;gap:5px}
.ig__dots i{
  width:5px;height:5px;border-radius:50%;background:var(--rule-2);
  transition:background .3s ease;
}
.ig__dots i.is-on{background:var(--blue)}
.ig__likes{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:.7rem;color:var(--muted);
}

/* ============================================================
   PROCESSO (banda escura)
   ============================================================ */

.proc{background:var(--ink);color:var(--paper);padding-block:var(--sec)}

.proc__list{
  margin-top:clamp(40px,5vw,64px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px);
}
/* precisa vir antes das media queries abaixo, senão ganha delas no celular */
.proc__list--3{grid-template-columns:repeat(3,1fr)}
/* sem linha em cima: não tem nada acima dela pra separar */
.proc__list li{padding-top:4px}
.proc__n{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.1em;
  color:rgba(241,245,248,.4);margin-bottom:16px;
}
.proc__list h3{font-size:1.16rem;color:var(--paper)}
.proc__list p{margin-top:12px;font-size:.94rem;color:var(--inv-muted)}

@media (max-width:900px){.proc__list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.proc__list{grid-template-columns:1fr}}

/* ============================================================
   PARCERIAS
   ============================================================ */

.parc{padding-block:var(--sec)}
.parc__in{
  display:grid;grid-template-columns:1.35fr .65fr;
  gap:clamp(32px,5vw,64px);align-items:center;
}
.parc__text .btn{margin-top:34px}

.parc__num{
  background:var(--white);border:1px solid var(--rule);border-radius:12px;
  padding:38px 32px;text-align:center;box-shadow:var(--shadow);
}
.parc__pct{
  display:block;font-size:clamp(3.6rem,7vw,5.4rem);font-weight:800;
  letter-spacing:-.05em;line-height:1;color:var(--blue);
}
.parc__pct sub{font-size:.42em;font-weight:700;vertical-align:baseline;bottom:0}
.parc__num p{margin-top:16px;font-size:.94rem;color:var(--muted)}

/* --- usados só na página de parcerias --- */

.parc--alt{border-top:1px solid var(--rule)}
.parc__h1{max-width:15ch}

.parc__note{
  background:var(--white);border:1px solid var(--rule);border-radius:12px;
  padding:28px 26px;box-shadow:var(--shadow);
}
.parc__note h3{font-size:1rem;font-weight:700}
.parc__note p{margin-top:10px;font-size:.92rem;color:var(--muted)}
.parc__note p + h3{margin-top:22px}

.parc__text .feat__pts{margin-bottom:26px}
.feat__pts a{transition:color .16s ease}
.feat__pts a:hover{color:var(--blue)}

@media (max-width:900px){.parc__in{grid-template-columns:1fr}}

/* ============================================================
   SOBRE
   ============================================================ */

.sobre{padding-block:var(--sec);border-top:1px solid var(--rule)}

.sobre__in{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(30px,5vw,64px);align-items:center;
}

.sobre__foto{margin:0}
.sobre__foto img{
  width:100%;height:auto;display:block;
  /* trava a proporção pela CSS: assim a foto pode ser trocada por outra de
     tamanho diferente sem quebrar o layout nem causar salto ao carregar */
  aspect-ratio:3/4;object-fit:cover;object-position:center 18%;
  border-radius:12px;border:1px solid var(--rule);
  box-shadow:var(--shadow);
  background:var(--wash); /* enquanto carrega */
}

.sobre__h2{max-width:none}
.sobre__body{margin-top:24px}
.sobre__body p{font-size:.99rem;color:var(--muted);max-width:56ch}
.sobre__body p + p{margin-top:16px}

@media (max-width:820px){
  .sobre__in{grid-template-columns:1fr;gap:28px}
  .sobre__foto{max-width:210px}
}

/* ============================================================
   FAQ
   ============================================================ */

.faq{padding-block:var(--sec);border-top:1px solid var(--rule)}
.faq__in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,72px)}

.faq__list details{border-bottom:1px solid var(--rule)}
/* mesma regra: sem linha solta no começo nem no fim da lista */
.faq__list details:last-child{border-bottom:0}
.faq__list summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 2px;font-weight:600;font-size:1.03rem;
}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease;
}
.faq__list details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq__list details p{padding:0 2px 24px;max-width:58ch;font-size:.96rem;color:var(--muted)}

@media (max-width:900px){.faq__in{grid-template-columns:1fr}}

/* ============================================================
   CONTATO
   ============================================================ */

/* Faixa escura de fechamento. Substituiu o formulário em 07/08/2026:
   o público não preenche seis campos, toca no botão. As perguntas que
   eram os campos foram pro texto pré-escrito da mensagem. */

.final{background:var(--ink);color:var(--paper);padding-block:clamp(80px,10vw,140px)}

.final__in{display:flex;flex-direction:column;align-items:center;text-align:center}

.final__h2{
  font-size:clamp(1.85rem,4vw,3rem);
  font-weight:700;letter-spacing:-.032em;line-height:1.08;
  max-width:21ch;color:var(--paper);
}
.final__h2 em{font-style:italic;font-weight:800;color:var(--blue-lit)}

.final__sub{
  margin-top:22px;max-width:48ch;
  font-size:clamp(1rem,1.3vw,1.1rem);color:var(--inv-muted);
}

.final__cta{
  margin-top:38px;
  display:inline-flex;align-items:center;gap:11px;
  background:var(--blue);color:var(--white);
  font-weight:600;font-size:1.02rem;letter-spacing:-.005em;
  padding:17px 30px;border-radius:var(--r);
  transition:background .18s ease,transform .18s ease;
}
.final__cta svg{width:21px;height:21px;flex:none}
.final__cta:hover{background:var(--blue-lit)}
.final__cta:active{transform:translateY(1px)}
.final__cta[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

.final__note{margin-top:18px;font-size:.85rem;color:rgba(241,245,248,.45)}

/* só aparece se a constante WHATSAPP estiver vazia */
.final__warn{
  display:none;margin-top:14px;
  font-size:.8rem;color:var(--blue-lit);
}

/* ============================================================
   RODAPÉ
   ============================================================ */

/* o rodapé estica pra baixo pra doca flutuante não cobrir nada.
   A borda no topo separa ele da faixa escura de fechamento, que tem a
   mesma cor de fundo e senão viraria um bloco escuro só. */
.foot{
  background:var(--ink);color:var(--paper);padding:34px 0 116px;
  border-top:1px solid var(--inv-rule);
}
@media (max-width:640px){.foot{padding-bottom:104px}}
.foot__in{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  font-size:.88rem;color:var(--inv-muted);
}
.foot__lnk{color:var(--paper);font-weight:500;transition:color .16s ease}
.foot__lnk:hover{color:var(--blue-lit)}
.foot__yr{margin-left:auto}

/* ============================================================
   POR QUE TER UM SITE
   Três colunas de checklist. Visual próprio de propósito, pra não virar
   mais uma repetição das listas das seções de serviço.
   ============================================================ */

.porque{padding-block:var(--sec);border-top:1px solid var(--rule)}
.porque__h2{max-width:20ch}

.porque__grid{
  margin-top:clamp(40px,5vw,60px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3vw,44px);
}

.porque__col h3{
  font-size:.95rem;font-weight:700;line-height:1.3;
  padding-bottom:14px;border-bottom:1px solid var(--rule-2);
}

.porque__col ul{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.porque__col li{
  position:relative;padding-left:25px;
  font-size:.93rem;line-height:1.5;color:var(--muted);
}
/* marca de conferido desenhada com borda, sem precisar de mais um svg */
.porque__col li::before{
  content:"";position:absolute;left:1px;top:4px;
  width:11px;height:6px;
  border-left:1.7px solid var(--blue);border-bottom:1.7px solid var(--blue);
  transform:rotate(-45deg);
}

.porque__fecho{
  margin-top:clamp(40px,5vw,60px);padding-top:26px;
  border-top:1px solid var(--rule);
  max-width:60ch;
  font-size:clamp(1.04rem,1.5vw,1.2rem);color:var(--ink);
}
.porque__fecho strong{font-weight:700}

@media (max-width:900px){
  .porque__grid{grid-template-columns:1fr;gap:32px}
  .porque__h2{max-width:none}
}

/* ============================================================
   CHATWOOT · tira o widget de cima da doca
   O balão do Chatwoot nasce colado no canto inferior direito, que é
   onde mora a nossa navegação. No celular ele cobriria o botão
   Diagnóstico. Sobe ele o suficiente pra passar por cima da doca.
   Precisa de !important porque o SDK escreve o estilo direto no elemento.
   ============================================================ */

/* Acima de ~813px a doca é estreita e centralizada, então o balão passa
   longe dela e fica no lugar padrão do Chatwoot (bottom 20px). A colisão
   só acontece em tela estreita, e é só lá que ele sobe. */
@media (max-width:820px){
  .woot-widget-bubble{bottom:92px !important}
}

/* ============================================================
   PÁGINA LEGAL
   Página de texto corrido (política de privacidade e afins). Sem seção
   nem doca, só o conteúdo, estreito o bastante pra ler bem.
   ============================================================ */

.legal{padding:var(--sec) 0}
.legal__wrap{max-width:74ch}
.legal__updated{margin:14px 0 0;font-size:.88rem;color:var(--faint)}

.legal__body{margin-top:44px}
.legal__body h2{
  font-size:1.28rem;font-weight:700;letter-spacing:-.01em;
  margin:40px 0 14px;
}
.legal__body h2:first-child{margin-top:0}
.legal__body p{margin-top:14px;color:var(--muted)}
.legal__body p:first-child{margin-top:0}
.legal__body ul{margin-top:14px}
.legal__body li{
  position:relative;padding-left:20px;color:var(--muted);
}
.legal__body li + li{margin-top:8px}
.legal__body li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--faint);
}
.legal__body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.legal__body a:hover{color:var(--blue-lit)}
.legal__body strong{font-weight:700;color:var(--ink)}


/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */

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