/* =========================================================
   TREINAVERSO — home

   Duas decisões governam tudo aqui:

   1. FUNDO CLARO. Quatro dos cinco projetos do portfólio são
      escuros. Trabalho escuro sobre fundo escuro vira sopa.
   2. PALCO QUIETO, ACENTO GRITANTE. A paleta dos projetos é
      caótica de propósito (ouro, magenta, violeta, vermelho,
      verde), então o site não tenta harmonizar: ele cala a boca
      e deixa cada projeto falar, com um único acento próprio.
   ========================================================= */

:root{
  --papel:    #f2f1ec;
  --papel-2:  #e8e6de;
  --tinta:    #0b0b0a;
  --tinta-2:  #5f5f58;
  --tinta-3:  #93928a;
  --linha:    #dedbd1;

  /* limão: única faixa de cor ausente dos cinco projetos, então
     nunca compete com o trabalho. Só como preenchimento, nunca
     como cor de texto sobre claro — contraste não fecha. */
  --limao:    #cff248;
  --limao-2:  #b9dd33;

  /* vermelho da marca. Sólido, não gradiente: gradiente em logo virou
     assinatura de SaaS genérico, e o limão sozinho não fecha contraste
     sobre o papel (1,1:1). Aqui vermelho é identidade, limão é ação. */
  --marca:    #ff2600;

  --lateral: 272px;
  --r: 14px;
  --r-lg: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --display: 'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{
  margin:0; font-family:var(--display);
  font-weight:600; letter-spacing:-.03em; line-height:1.04;
}

.fundo,.grao{ display:none; }

.pular{ position:absolute; left:-9999px; top:0; background:var(--tinta); color:var(--papel); padding:12px 20px; z-index:300; }
.pular:focus{ left:12px; top:12px; }

/* ---------------------------------------------------------
   LATERAL
   --------------------------------------------------------- */
.lateral{
  position:fixed; inset:0 auto 0 0; z-index:100; width:var(--lateral);
  padding:36px 30px; display:flex; flex-direction:column;
  border-right:1px solid var(--linha); background:var(--papel);
}
.marca{ display:block; line-height:0; }
.marca img{ height:23px; width:auto; }

.lateral__nav{ margin-top:48px; display:flex; flex-direction:column; }
.lateral__nav a{
  position:relative; padding:9px 0 9px 20px;
  font-family:var(--mono); font-size:.78rem;
  letter-spacing:.02em; color:var(--tinta-2);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.lateral__nav a::before{
  content:''; position:absolute; left:0; top:50%; margin-top:-4px;
  width:8px; height:8px; background:var(--limao);
  opacity:0; transform:scale(.3); transition:.25s var(--ease);
}
.lateral__nav a:hover{ color:var(--tinta); padding-left:24px; }
.lateral__nav a.is-active{ color:var(--tinta); }
.lateral__nav a.is-active::before{ opacity:1; transform:none; }

.lateral__pe{ margin-top:auto; }
.lateral__nota{
  margin:12px 0 0; text-align:center;
  font-family:var(--mono); font-size:.66rem; color:var(--tinta-3);
}

/* ---------------------------------------------------------
   BOTÕES
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 26px; border-radius:999px; border:1px solid transparent;
  font-family:var(--mono); font-size:.8rem; font-weight:500;
  letter-spacing:.02em; cursor:pointer; white-space:nowrap;
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--acao{ width:100%; background:var(--limao); color:var(--tinta); }
.btn--acao:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(150,180,20,.8); }
.btn--linha{ background:transparent; color:var(--tinta); border-color:#c9c6bb; }
.btn--linha:hover{ border-color:var(--tinta); transform:translateY(-2px); }
.btn--grande{ height:58px; padding:0 34px; font-size:.86rem; }

/* ---------------------------------------------------------
   PALCO
   --------------------------------------------------------- */
.palco{ margin-left:var(--lateral); padding:0 clamp(22px,4.5vw,72px); }
.secao{ padding:0 0 clamp(72px,9vw,132px); }
/* Título de seção, não sobrancelha. A versão anterior era um rótulo
   de 0.7rem em monospace, que não dava dignidade nenhuma a blocos
   como "O que vem junto" — o leitor passava batido. */
.secao__titulo{
  margin:0 0 38px;
  font-size:clamp(1.35rem,2.1vw,1.85rem);
  letter-spacing:-.028em;
}

/* ---------------------------------------------------------
   ABERTURA
   --------------------------------------------------------- */
.intro{ padding:clamp(66px,10vw,130px) 0 clamp(54px,7vw,96px); }
.intro__frase{
  font-size:clamp(2.1rem,6vw,4.6rem);
  line-height:.98; letter-spacing:-.042em; max-width:16ch;
}
/* o padding do destaque empurrava a pontuação seguinte para longe da
   palavra; a margem negativa devolve a pontuação para junto dela */
.chip{
  display:inline-block;
  /* padding assimétrico: folga à esquerda, quase nada à direita.
     A margem negativa que existia aqui puxava a pontuação seguinte
     para DENTRO do limão, e nenhum z-index resolve isso, porque o
     problema é de posição e não de camada. */
  padding:0 .05em .08em .2em;
  background:var(--limao); border-radius:.1em;
}
.destaque{ position:relative; }
.intro__linha{ margin:30px 0 0; max-width:50ch; font-size:1.02rem; color:var(--tinta-2); }
.intro__linha a{ color:var(--tinta); text-decoration:underline; text-underline-offset:3px; }

/* selo de velocidade: a página medindo a si mesma.
   É o argumento de venda virando prova, ao vivo. */
.selo{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:34px; padding:9px 8px 9px 16px;
  border:1px solid var(--linha); border-radius:999px;
  background:#fff; font-family:var(--mono); font-size:.74rem; color:var(--tinta-2);
}
.selo__ponto{
  width:7px; height:7px; border-radius:50%; background:var(--limao-2);
  box-shadow:0 0 0 0 rgba(185,221,51,.7); animation:pulso 2.4s ease-out infinite;
}
@keyframes pulso{ 70%,100%{ box-shadow:0 0 0 9px rgba(185,221,51,0); } }
.selo b{
  padding:4px 10px; border-radius:999px;
  background:var(--tinta); color:var(--papel); font-weight:500;
}

/* ---------------------------------------------------------
   RODA DE TRABALHOS

   As cartas ficam sobre um arco de raio muito maior que a tela. Como o
   raio é grande e o passo angular é pequeno, a curva aparece como uma
   inclinação suave em vez de carrossel óbvio, e as pontas sangram para
   fora dos dois lados sem linha de corte.

   Regra de sobrevivência: sem JavaScript isto continua sendo uma faixa
   rolável horizontal com os cinco projetos alcançáveis. A roda só entra
   quando o roda.js adiciona .roda--viva. Já perdemos uma página inteira
   por depender de script para ver conteúdo; aqui não se repete.
   --------------------------------------------------------- */
.secao--roda{ padding-bottom:clamp(44px,5.5vw,78px); }

.roda__topo{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:32px;
}
.secao__titulo--solto{ margin:0; padding:0; border:0; }

.roda__controles{ display:flex; gap:10px; flex:none; }
.seta{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  border:1px solid #c9c6bb; border-radius:50%;
  background:transparent; color:var(--tinta); cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.seta svg{ width:19px; height:19px; }
.seta--tras svg{ transform:scaleX(-1); }
.seta:hover{ background:var(--tinta); border-color:var(--tinta); color:var(--papel); }
.seta:active{ transform:scale(.94); }
.seta:focus-visible{ outline:2px solid var(--marca); outline-offset:3px; }

/* --- estado base, sem script: faixa rolável --- */
/* nada aqui é selecionável nem arrastável como imagem: o ponteiro
   dentro da roda serve só para girar as cartas */
.roda{
  position:relative;
  user-select:none; -webkit-user-select:none;
}
.roda img,.roda a{ -webkit-user-drag:none; }
.roda__pista{
  list-style:none; margin:0; padding:0 0 8px;
  display:flex; gap:28px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.roda__pista::-webkit-scrollbar{ display:none; }
.carta{ flex:0 0 min(86vw,560px); scroll-snap-align:center; }
.roda__pega{ display:none; }

/* --- estado com script: a roda de verdade --- */
.roda--viva{
  /* sangra para fora do palco, até a borda da janela */
  margin:0 calc(clamp(22px,4.5vw,72px) * -1);
  overflow:hidden;
  touch-action:pan-y;               /* rolagem vertical fica com o navegador */
  /* o cursor só some quando a pílula está no lugar dele; se ela não
     aparecer, o ponteiro normal continua ali */
  cursor:grab;
}
.roda--viva.is-perto{ cursor:none; }
.roda--viva .roda__pista{
  position:relative; display:block;
  overflow:visible; padding:0;
  scroll-snap-type:none;
}
.roda--viva .carta{
  position:absolute; top:0; left:50%;
  width:var(--larg,560px);
  transform-origin:50% 0;
  will-change:transform, opacity;
}
/* a opacidade do rodapé é escrita pelo roda.js a cada quadro, em função
   da distância até o centro; uma transition aqui brigaria com ela */
/* Com a roda viva, a pílula é o ÚNICO ponto que abre o site. O resto da
   carta é área de arraste. Ela é pequena e mora num canto, então o gesto
   lateral quase nunca começa em cima dela; e se começar, o roda.js só
   deixa o clique passar quando o ponteiro andou menos de 6px.
   Fora do centro ela não recebe ponteiro nenhum: estaria invisível. */
.roda--viva .carta:not(.is-centro) .mesa__ver{ opacity:0 !important; pointer-events:none; }
.roda--viva .mesa__ver{ cursor:pointer; }
/* em cima da pílula volta o cursor de verdade: a mãozinha de arrastar
   ali diria a coisa errada bem no único lugar que é para clicar */
.roda--viva.is-perto.is-no-botao{ cursor:pointer; }
.roda--viva.is-no-botao .roda__pega{ opacity:0; }
.mesa__ver:hover{ background:var(--limao-2,#b9dd33); color:var(--tinta); }

/* sem hover não existe revelar: no toque a pílula já nasce visível na
   carta do centro, senão não haveria como chegar ao site */
@media (hover:none){
  .roda--viva .carta.is-centro .mesa__ver{ opacity:1; transform:none; }
}

/* guia pontilhada traçando o arco por onde as cartas passam */
.roda__arco{
  position:absolute; left:50%; top:0;
  /* só aparece nos vãos entre cartas, em trechos curtos, e é assim
     mesmo. No tom anterior ela sumia contra o papel */
  border-radius:50%; border-top:1px dashed #b4b1a6;
  transform:translateX(-50%);
  pointer-events:none; opacity:0;
  transition:opacity .5s var(--ease);
}
.roda--viva .roda__arco{ opacity:1; }

/* pílula de arrastar, seguindo o ponteiro dentro da roda */
.roda--viva .roda__pega{
  /* acima de qualquer carta: o roda.js escreve z-index até 100 nelas
     conforme a distância do centro, e com um valor baixo aqui a pílula
     ficava escondida atrás da carta central */
  position:absolute; left:0; top:0; z-index:200;
  display:grid; place-items:center;
  width:78px; height:78px; margin:-39px 0 0 -39px;
  border-radius:50%; background:var(--tinta); color:var(--papel);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
  pointer-events:none;
  opacity:0; transform:scale(.5);
  transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.roda--viva.is-perto .roda__pega{ opacity:1; transform:scale(1); }
.roda--viva.is-puxando .roda__pega{ transform:scale(.86); }

.roda__conta{
  margin:12px 0 0; text-align:right;
  font-family:var(--mono); font-size:.72rem; color:var(--tinta-3);
}
.roda__conta b{ color:var(--tinta); font-weight:500; }

/* --- a carta --- */
.mesa{
  position:relative; display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden; border-radius:var(--r-lg);
  background:var(--mesa,#e8e6de);
  padding:clamp(20px,3vw,44px) clamp(20px,3vw,44px) 0;
  aspect-ratio:4/3;
}
.mesa__forma{
  position:absolute; display:block; border-radius:50%;
  background:var(--forma,rgba(0,0,0,.07)); pointer-events:none;
}
.mesa__forma--1{ width:30%; padding-top:30%; top:-9%; left:5%; }
.mesa__forma--2{ width:18%; padding-top:18%; bottom:12%; right:7%; border-radius:18%; transform:rotate(14deg); }

/* janela de navegador desenhada: é o que transforma print em peça */
.mesa__janela{
  position:relative; width:100%;
  border-radius:10px 10px 0 0; overflow:hidden; background:#fff;
  box-shadow:0 30px 60px -26px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.14);
  /* desce para fora do quadro: sem isso o fim do print vira uma linha
     horizontal visível e denuncia que aquilo é uma captura */
  margin-bottom:-38px;
  transition:transform .7s var(--ease);
}
.mesa__barra{
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 12px;
  background:#e9e7e2; border-bottom:1px solid #d8d5cd;
}
.mesa__barra i{ width:8px; height:8px; border-radius:50%; background:#c9c6bd; }
.mesa__barra span{
  margin-left:10px; padding:3px 11px; border-radius:999px;
  background:#f6f5f2; color:#8a887f;
  font-family:var(--mono); font-size:.58rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:62%;
}
.mesa__janela img{ display:block; width:100%; height:auto; }

.mesa__fone{
  position:absolute; right:clamp(14px,2.4vw,34px); bottom:-34px;
  width:clamp(74px,14%,116px);
  border:4px solid #17171a; border-bottom:0; border-radius:16px 16px 0 0;
  overflow:hidden; background:#17171a;
  box-shadow:0 20px 38px -16px rgba(0,0,0,.6);
  transform:rotate(3deg) translateY(26px);
  transition:transform .7s var(--ease);
}
.mesa__fone img{ display:block; width:100%; height:auto; }

.mesa__ver{
  position:absolute; left:clamp(20px,3vw,44px); top:clamp(20px,3vw,44px);
  padding:8px 15px; border-radius:999px;
  background:var(--tinta); color:var(--papel);
  font-family:var(--mono); font-size:.64rem;
  opacity:0; transform:translateY(-6px); transition:.35s var(--ease);
}
.mesa:hover .mesa__janela{ transform:translateY(-9px); }
.mesa:hover .mesa__fone{ transform:rotate(5deg) translateY(17px); }
.mesa:hover .mesa__ver{ opacity:1; transform:none; }

.carta__pe{ padding:22px 4px 0; text-align:center; }
.carta__tag{
  margin:0 0 10px; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3);
}
.carta__tit{ font-size:clamp(1.15rem,1.9vw,1.55rem); letter-spacing:-.025em; max-width:24ch; margin-inline:auto; }
.carta__nota{ margin:12px auto 0; font-size:.92rem; line-height:1.55; color:var(--tinta-2); max-width:52ch; }

/* ---------------------------------------------------------
   O QUE EU FAÇO

   Fica embaixo do portfólio de propósito: primeiro o sujeito
   vê o trabalho, depois lê o que é vendido. Cada serviço é
   duas colunas, título à esquerda e argumento à direita, que
   é o formato de quem explica sem virar lista de compras.
   --------------------------------------------------------- */
.servicos__lead{
  margin:0 0 8px; max-width:62ch;
  font-size:1.02rem; line-height:1.72; color:var(--tinta-2);
}
.servicos{ margin-top:30px; border-top:1px solid var(--linha); }
.servico{
  display:grid; grid-template-columns:280px minmax(0,1fr); gap:40px;
  padding:34px 2px; border-bottom:1px solid var(--linha);
}
.servico__cabeca{ display:flex; gap:16px; align-items:baseline; }
.servico__n{ font-family:var(--mono); font-size:.72rem; color:var(--tinta-3); }
.servico__cabeca h3{ font-size:clamp(1.15rem,1.8vw,1.42rem); }
.servico__corpo p{ margin:0; max-width:60ch; font-size:.96rem; line-height:1.72; color:var(--tinta-2); }
.servico__quando{
  margin-top:16px !important; padding-top:14px;
  border-top:1px dashed var(--linha);
  font-size:.9rem !important;
}
.servico__quando b{ color:var(--tinta); font-weight:600; }
.servicos__depois{
  margin:34px 0 0; max-width:62ch;
  font-size:.96rem; line-height:1.72; color:var(--tinta-2);
}
.servicos__depois a{ color:var(--tinta); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:820px){
  .servico{ grid-template-columns:1fr; gap:14px; }
}

/* ---------------------------------------------------------
   LISTAS E PASSOS
   --------------------------------------------------------- */
.itens{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--linha); border:1px solid var(--linha);
  border-radius:var(--r); overflow:hidden;
}
.itens li{ background:var(--papel); padding:24px 26px; font-size:.9rem; color:var(--tinta-2); }
.itens b{ display:block; margin-bottom:6px; font-size:.95rem; font-weight:600; color:var(--tinta); }

/* Azulejo colorido de cada item. A cor chega por --ico e --ico-t, escritas
   no próprio <li>, do mesmo jeito que as cartas do portfólio recebem a sua.
   O traço do desenho é currentColor, então basta trocar a variável para o
   ícone inteiro acompanhar. */
.itens__ico{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:15px;
  border-radius:12px;
  background:var(--ico,var(--papel-2)); color:var(--ico-t,var(--tinta));
  transition:transform .35s var(--ease);
}
.itens__ico svg{
  width:21px; height:21px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.itens li:hover .itens__ico{ transform:rotate(-5deg) scale(1.07); }

.passos{ display:grid; gap:0; max-width:820px; border-top:1px solid var(--linha); }
.passos li{
  display:flex; gap:28px; align-items:flex-start;
  padding:28px 4px; border-bottom:1px solid var(--linha);
}
.passos__n{ flex:0 0 auto; font-family:var(--mono); font-size:.76rem; color:var(--tinta-3); padding-top:5px; }
.passos h3{ font-size:1.2rem; }
.passos p{ margin:10px 0 0; font-size:.93rem; color:var(--tinta-2); }
.prazo{
  display:inline-block; margin-top:14px; padding:5px 12px;
  background:var(--limao); font-family:var(--mono); font-size:.66rem;
  letter-spacing:.04em; color:var(--tinta);
}
.nota{ margin:28px 0 0; max-width:62ch; font-size:.9rem; color:var(--tinta-2); }
.nota b{ color:var(--tinta); }

/* ---------------------------------------------------------
   PREÇOS
   --------------------------------------------------------- */
.tabela{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pacote{
  position:relative; display:flex; flex-direction:column;
  padding:32px 28px; border:1px solid var(--linha); border-radius:var(--r-lg);
  background:#fff;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pacote:hover{ transform:translateY(-8px); box-shadow:0 30px 56px -32px rgba(11,11,10,.45); }
.pacote--destaque{ background:var(--tinta); color:var(--papel); border-color:var(--tinta); }
.pacote--destaque .pacote__sub{ color:rgba(242,241,236,.66); }
.pacote__selo{
  position:absolute; top:-11px; left:26px; padding:5px 12px;
  background:var(--limao); color:var(--tinta);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
}
.pacote h3{ font-size:1.24rem; }
.pacote__sub{ margin:10px 0 0; font-size:.86rem; color:var(--tinta-2); min-height:2.8em; }
.pacote__preco{
  margin:24px 0 0; font-family:var(--display);
  font-size:2.5rem; font-weight:600; letter-spacing:-.045em;
}
.pacote__itens{
  margin:0 0 28px; display:grid; gap:11px;
  padding-top:22px; border-top:1px solid var(--linha);
}
.pacote__itens li{
  position:relative; padding-left:20px;
  font-size:.86rem; color:var(--tinta-2);
}
.pacote__itens li::before{
  content:''; position:absolute; left:0; top:9px;
  width:7px; height:7px; background:var(--limao);
}
.pacote--destaque .pacote__itens{ border-top-color:rgba(242,241,236,.18); }
.pacote--destaque .pacote__itens li{ color:rgba(242,241,236,.74); }

.pacote .btn{ margin-top:auto; width:100%; }
.pacote--destaque .btn--acao{ background:var(--limao); color:var(--tinta); }

.duplas{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.dupla{ padding:32px 28px; border:1px solid var(--linha); border-radius:var(--r-lg); background:#fff; }
.dupla h3{ font-size:1.2rem; }
.dupla p{ margin:13px 0 0; font-size:.93rem; color:var(--tinta-2); }
.dupla__preco{ margin-top:22px !important; font-family:var(--mono); font-size:1rem; color:var(--tinta) !important; }
.dupla__preco span{ color:var(--tinta-3); font-size:.76rem; }
.dupla__link{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:var(--mono); font-size:.76rem; color:var(--tinta);
  border-bottom:1px solid var(--linha); padding-bottom:3px;
  transition:border-color .25s var(--ease), gap .25s var(--ease);
}
.dupla__link:hover{ border-color:var(--tinta); gap:12px; }

/* ---------------------------------------------------------
   DÚVIDAS
   --------------------------------------------------------- */
.faq{ max-width:820px; border-top:1px solid var(--linha); }
.faq__item{ border-bottom:1px solid var(--linha); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 2px; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:1.08rem; font-weight:600; letter-spacing:-.02em;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__ic{ position:relative; flex:0 0 18px; width:18px; height:18px; }
.faq__ic::before,.faq__ic::after{
  content:''; position:absolute; top:50%; left:50%; width:13px; height:2px;
  background:var(--tinta); transform:translate(-50%,-50%); transition:transform .3s var(--ease);
}
.faq__ic::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item[open] .faq__ic::after{ transform:translate(-50%,-50%) rotate(90deg) scaleX(0); }
.faq__ans{ padding:0 2px 24px; }
.faq__ans p{ margin:0 0 12px; font-size:.94rem; color:var(--tinta-2); max-width:66ch; }
.faq__ans p:last-child{ margin-bottom:0; }
.faq__ans b{ color:var(--tinta); }

/* ---------------------------------------------------------
   FECHAMENTO E RODAPÉ
   --------------------------------------------------------- */
.fechamento{ padding:clamp(72px,9vw,124px) 0; border-top:1px solid var(--linha); }
.fechamento h2{ font-size:clamp(2rem,4.6vw,3.6rem); letter-spacing:-.04em; }
.fechamento > p{ margin:22px 0 0; font-size:1.02rem; color:var(--tinta-2); max-width:50ch; }
.fechamento__acoes{ display:flex; gap:12px; flex-wrap:wrap; margin-top:36px; }
.fechamento__acoes .btn--acao{ width:auto; }
.fechamento__mail{ margin:22px 0 0; font-size:.9rem; color:var(--tinta-2); }
.fechamento__mail a{ color:var(--tinta); text-decoration:underline; text-underline-offset:3px; }

.rodape{ padding:clamp(52px,6vw,84px) 0 62px; border-top:1px solid var(--linha); }
.rodape__marca img{ height:62px; width:auto; }
.rodape__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,220px)); gap:36px; margin-top:44px; }
.rodape__t{ margin:0 0 14px; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3); }
.rodape__cols a{ display:block; padding:5px 0; font-size:.9rem; color:var(--tinta-2); transition:color .25s var(--ease); }
.rodape__cols a:hover{ color:var(--tinta); }
.rodape__fim{ margin:48px 0 0; padding-top:26px; border-top:1px solid var(--linha); font-family:var(--mono); font-size:.68rem; line-height:1.9; color:var(--tinta-3); }

.pend{ display:inline-block; padding:1px 7px; border-radius:4px; background:#fff4c2; border:1px solid #e8d270; color:#6b5300; font-size:.9em; font-weight:500; }

/* ---------------------------------------------------------
   AVISO DE COOKIES
   Bloco completo, e não só as cores: o layout dele vivia no
   styles.css do tema escuro, que estas páginas não carregam
   mais. Sem isto o aviso é criado mas fica sem posicionamento,
   invisível no fim do body — e o visitante não tem como aceitar.
   --------------------------------------------------------- */
.consent{
  position:fixed; inset:auto 0 0 0; z-index:200;
  padding:0 16px 16px;
  transform:translateY(130%); opacity:0;
  transition:transform .5s var(--ease), opacity .4s var(--ease);
}
.consent.is-open{ transform:none; opacity:1; }

.consent__inner{
  position:relative; overflow:hidden;
  max-width:1000px; margin:0 auto;
  display:flex; align-items:center; gap:26px;
  padding:20px 24px;
  background:#fff;
  border:1px solid var(--linha); border-radius:var(--r-lg);
  box-shadow:0 26px 60px -24px rgba(11,11,10,.32);
}
.consent__inner::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--limao);
}
.consent__txt{
  margin:0; flex:1;
  font-size:.86rem; line-height:1.6; color:var(--tinta-2);
}
.consent__txt a{ color:var(--tinta); text-decoration:underline; text-underline-offset:3px; }

.consent__acoes{ display:flex; gap:10px; flex-shrink:0; }
/* mesmo tamanho nos dois: recusar não pode ser mais difícil que aceitar */
.consent__btn{ height:44px; padding:0 24px; min-width:128px; font-size:.78rem; }
.consent__btn.btn--ghost{ background:transparent; color:var(--tinta); border-color:#c9c6bb; }
.consent__btn.btn--ghost:hover{ border-color:var(--tinta); }
.consent__btn.btn--light{ background:var(--limao); color:var(--tinta); }
.consent__btn.btn--light:hover{ box-shadow:0 14px 28px -12px rgba(150,180,20,.85); }

@media (max-width:760px){
  .consent{ padding:0 12px 12px; }
  .consent__inner{ flex-direction:column; align-items:stretch; gap:16px; padding:20px; }
  .consent__btn{ flex:1; min-width:0; }
}
@media (prefers-reduced-motion:reduce){ .consent{ transition:none; } }

/* ---------------------------------------------------------
   MOVIMENTO
   --------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.progresso{ position:fixed; inset:0 auto auto 0; z-index:150; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--limao); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .selo__ponto{ animation:none; }
  .btn:hover,.pacote:hover,.mesa:hover .mesa__janela,.mesa:hover .mesa__fone,
  .itens li:hover .itens__ico{ transform:none; }
}

/* ---------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------- */
@media (max-width:1080px){
  .tabela{ grid-template-columns:1fr; max-width:520px; }
  .pacote__sub{ min-height:0; }
  .duplas{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .lateral{
    position:sticky; inset:0 0 auto 0; width:auto;
    flex-direction:row; align-items:center; gap:16px; padding:12px 18px;
    border-right:0; border-bottom:1px solid var(--linha);
  }
  .lateral__nav{ margin:0 0 0 auto; flex-direction:row; gap:14px; overflow-x:auto; scrollbar-width:none; }
  .lateral__nav::-webkit-scrollbar{ display:none; }
  .lateral__nav a{ padding:6px 0; white-space:nowrap; }
  .lateral__nav a::before{ display:none; }
  .lateral__pe{ margin:0; }
  .lateral__pe .btn{ width:auto; height:38px; padding:0 16px; font-size:.72rem; }
  .lateral__nota{ display:none; }
  .palco{ margin-left:0; }
  .itens{ grid-template-columns:1fr; }
}

@media (max-width:680px){
  .lateral__nav{ display:none; }
  .intro__frase{ max-width:none; }
  .mesa__fone{ width:76px; right:10px; }
  /* a pílula é o único jeito de abrir o site, então no celular ela fica,
     só que menor: numa carta de 280px a versão do desktop comia metade
     da largura e virava alvo fácil de tocar sem querer no arraste */
  .mesa__ver{ left:12px; top:12px; padding:9px 13px; font-size:.58rem; }
  .passos li{ flex-direction:column; gap:12px; }
  .rodape__cols{ grid-template-columns:1fr 1fr; gap:24px; }
  .fechamento__acoes .btn{ width:100%; }
}

/* ---------------------------------------------------------
   PÁGINAS LEGAIS
   Mesmo papel e mesma lateral da home, para quem clica em
   "Termos" no rodapé não levar um susto de contraste.
   --------------------------------------------------------- */
.legal{ padding:clamp(56px,7vw,96px) 0 clamp(60px,8vw,110px); max-width:760px; }
.legal__head{ margin-bottom:44px; }
.legal__head h1{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
.legal__meta{ margin:16px 0 0; font-family:var(--mono); font-size:.72rem; color:var(--tinta-3); }
.legal__rule{ display:block; width:120px; height:4px; margin:24px 0 0; background:var(--limao); }

.legal__body h2{ margin:52px 0 0; font-size:1.22rem; }
.legal__body h3{ margin:30px 0 0; font-size:1rem; font-family:var(--display); font-weight:600; }
.legal__body h2:first-child{ margin-top:0; }
.legal__body p, .legal__body li{ font-size:.95rem; color:var(--tinta-2); line-height:1.74; }
.legal__body p{ margin:14px 0 0; }
.legal__body ul{ margin:14px 0 0; display:grid; gap:10px; }
.legal__body ul li{ position:relative; padding-left:20px; }
.legal__body ul li::before{
  content:''; position:absolute; left:0; top:10px;
  width:7px; height:7px; background:var(--limao);
}
.legal__body strong{ color:var(--tinta); font-weight:600; }
.legal__body code{ font-family:var(--mono); font-size:.88em; background:var(--papel-2); padding:1px 5px; border-radius:4px; }
.legal__body a{ color:var(--tinta); text-decoration:underline; text-underline-offset:3px; }

.legal__note{
  margin:22px 0 0; padding:22px 24px;
  background:#fff; border:1px solid var(--linha); border-radius:var(--r);
}
.legal__note p{ margin:0; }
.legal__note p + p{ margin-top:12px; }
.legal__btn{ width:auto !important; margin-top:6px; }

.legal__back{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:56px; padding-top:28px; border-top:1px solid var(--linha);
  font-family:var(--mono); font-size:.8rem;
}
.legal__peers{ display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; font-size:.86rem; color:var(--tinta-2); }
.legal__peers a{ text-decoration:underline; text-underline-offset:3px; }
.legal__peers a:hover{ color:var(--tinta); }

/* ---------------------------------------------------------
   ASSINATURA: seta manuscrita apontando para o prazo
   O prazo é o argumento da oferta. A anotação funciona como
   alguém circulando o número com caneta.

   Fica ABAIXO e à DIREITA do chip, e não acima: a entrelinha
   do título é 0.98, não existe folga em cima sem colidir com
   a linha anterior. À direita do chip, na altura da linha
   seguinte, há vazio de sobra.
   --------------------------------------------------------- */
.destaque{ position:relative; display:inline-block; }

.anota{
  position:absolute; top:74%; left:calc(100% + 18px);
  display:flex; align-items:center; gap:4px;
  color:var(--marca); pointer-events:none;
}
.anota__seta{
  width:clamp(46px,4.2vw,70px); height:auto;
  transform:rotate(-4deg);
}
.anota__txt{
  font-family:'Caveat',cursive;
  font-size:clamp(1.25rem,2vw,2rem);
  font-weight:600; line-height:1;
  letter-spacing:.045em;
  transform:rotate(-5deg);
  white-space:nowrap;
}

/* Abaixo de 1180px o título reflui e a linha do chip fica cheia, sem
   vazio à direita para a anotação. A saída não é escondê-la, que era o
   que acontecia antes e tirava a piada de todo mundo que abre no
   celular: é quebrar a linha logo depois do prazo. Aí a linha volta a
   ter só o chip, o vazio à direita reaparece e a anotação ocupa o mesmo
   lugar de sempre. A entrelinha abre um pouco junto, para o manuscrito
   não encostar na linha de baixo. */
.quebra-mobile{ display:none; }

@media (max-width:1180px){
  .quebra-mobile{ display:inline; }
  .intro__frase{ line-height:1.08; }
  /* centrada na própria linha do chip. Abaixo dela, como no desktop,
     ela encostaria no texto da linha seguinte */
  .anota{ top:50%; left:calc(100% + 14px); transform:translateY(-48%); }
  .anota__seta{ width:clamp(38px,5.6vw,62px); }
  .anota__txt{ font-size:clamp(1.05rem,3vw,1.7rem); }
}

@media (max-width:420px){
  .anota{ left:calc(100% + 10px); }
  .anota__seta{ width:34px; }
  .anota__txt{ font-size:1rem; }
}

/* ---------------------------------------------------------
   PÁGINA DA AUDITORIA

   Mesmo papel e mesma lateral do resto do site. A diferença é
   que aqui existe desenho: três infográficos em SVG, e eles
   precisam de duas coisas para não virarem imagem morta.

   1. Cor por CSS, nunca no atributo. O SVG usa as mesmas
      variáveis do site, então quando a paleta mudar o desenho
      muda junto, e ninguém precisa lembrar de abrir o markup.
   2. Rolagem lateral própria no estreito. Um diagrama de
      quatro colunas espremido em 360px não é diagrama, é
      borrão. Ele mantém a largura mínima e rola dentro da
      moldura, sem empurrar a página inteira para o lado.
   --------------------------------------------------------- */
.aud{ max-width:880px; padding:clamp(48px,6vw,86px) 0 0; }

.aud__capa{ padding-bottom:clamp(40px,5vw,64px); }
.aud__olho{
  margin:0 0 20px; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3);
}
.aud__capa h1{ font-size:clamp(2.2rem,6vw,4.1rem); line-height:.98; letter-spacing:-.042em; }
.aud__sub{ margin:28px 0 0; max-width:46ch; font-size:clamp(1.02rem,1.6vw,1.2rem); color:var(--tinta-2); }

.aud__ficha{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  margin:40px 0 0; background:var(--linha);
  border:1px solid var(--linha); border-radius:var(--r); overflow:hidden;
}
.aud__ficha div{ background:var(--papel); padding:20px 22px; }
.aud__ficha b{ display:block; font-family:var(--mono); font-size:1.02rem; letter-spacing:-.02em; }
.aud__ficha span{ display:block; margin-top:6px; font-size:.82rem; color:var(--tinta-2); }

.aud__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.aud__btn{ width:auto; }

.aud__bloco{ padding:clamp(46px,6vw,78px) 0; border-top:1px solid var(--linha); }
.aud__bloco h2{ font-size:clamp(1.6rem,3vw,2.3rem); max-width:20ch; }
.aud__bloco p{ margin:20px 0 0; max-width:66ch; font-size:.98rem; line-height:1.72; color:var(--tinta-2); }
.aud__bloco b{ color:var(--tinta); font-weight:600; }
.aud__bloco code{ font-family:var(--mono); font-size:.86em; background:var(--papel-2); padding:2px 6px; border-radius:5px; color:var(--tinta); }
.aud__lead{ font-size:1.08rem !important; color:var(--tinta) !important; }

.aud__lista{ display:grid; gap:14px; margin:26px 0 0; }
.aud__lista li{
  position:relative; padding:0 0 0 26px;
  max-width:66ch; font-size:.95rem; line-height:1.68; color:var(--tinta-2);
}
.aud__lista li::before{
  content:''; position:absolute; left:0; top:9px;
  width:8px; height:8px; background:var(--limao);
}
.aud__lista b{ color:var(--tinta); }

.aud__lista--tres{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:30px; }
.aud__lista--tres li{
  padding:26px 20px 22px; max-width:none; background:#fff;
  border:1px solid var(--linha); border-radius:var(--r);
}
.aud__lista--tres li::before{ left:20px; top:26px; }
.aud__lista--tres b{ display:block; margin:16px 0 8px; font-size:1rem; }
.aud__lista--tres span{ font-size:.88rem; }

.aud__nota{
  margin-top:28px !important; padding:20px 22px;
  background:#fff; border:1px solid var(--linha); border-radius:var(--r);
  font-size:.93rem !important;
}

/* --- moldura dos infográficos --- */
.fig{ margin:40px 0 0; }
.fig__tela{
  overflow-x:auto; overflow-y:hidden;
  padding:22px 20px; background:#fff;
  border:1px solid var(--linha); border-radius:var(--r-lg);
  scrollbar-width:thin;
}
.fig svg{ display:block; width:100%; min-width:640px; height:auto; font-family:'Inter',system-ui,sans-serif; }
.fig figcaption{
  margin:14px 2px 0; max-width:62ch;
  font-size:.84rem; line-height:1.6; color:var(--tinta-3);
}

/* --- vocabulário comum dos três desenhos --- */
.fig__olho{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; fill:var(--tinta-3); }
.fig__base{ stroke:var(--linha); stroke-width:1; }
.fig__caixa rect{ fill:var(--papel); stroke:var(--linha); stroke-width:1; }
.fig__caixa--forte rect{ fill:#fff; stroke:var(--tinta); stroke-width:1.6; }
.fig__n{ font-family:var(--mono); font-size:11px; fill:var(--tinta-3); letter-spacing:.06em; }
.fig__tit{ font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:-.02em; fill:var(--tinta); }
.fig__txt{ font-size:12px; fill:var(--tinta-2); }
.fig__ct{ font-size:12.5px; font-weight:600; fill:var(--tinta); }
.fig__cs{ font-size:11px; fill:var(--tinta-2); }
.fig__cs--claro{ fill:#fff; font-weight:500; }
.fig__seta line{ stroke:var(--tinta-3); stroke-width:1.4; }

.fig__portao rect{ fill:var(--limao); stroke:var(--limao-2); stroke-width:1; }
.fig__portao line{ stroke:var(--tinta-3); stroke-width:1.4; }
.fig__cod rect{ fill:var(--papel-2); }
.fig__cod text{ font-family:var(--mono); font-size:12.5px; fill:var(--tinta-2); }

.fig__chip rect{ fill:#fff; stroke:var(--linha); stroke-width:1; }
.fig__chip rect.fig__chip--vazio{ fill:none; stroke-dasharray:3 4; }

.fig__aviso rect{ fill:var(--tinta); }
.fig__aviso .fig__ct{ fill:var(--papel); }
.fig__aviso .fig__cs{ fill:#b5b3aa; }

.fig__regua line{ stroke:var(--linha); stroke-width:1; }
.fig__regua text{ font-family:var(--mono); font-size:10px; fill:var(--tinta-3); }
.fig__barra .b-html{ fill:var(--tinta); }
.fig__barra .b-css{ fill:var(--tinta-3); }
.fig__barra .b-gtm{ fill:var(--limao-2); }
.fig__barra .b-tag{ fill:var(--limao); }
.fig__barra .b-ruim{ fill:var(--marca); opacity:.9; }
.fig__marca{ stroke:var(--tinta); stroke-width:1.4; stroke-dasharray:3 4; }
.fig__marca--ruim{ stroke:var(--marca); }
.fig__ok{ font-family:var(--mono); font-size:11px; fill:var(--tinta); }
.fig__ruim{ font-family:var(--mono); font-size:11px; fill:var(--marca); }

/* --- mapa de onde vive cada tag --- */
.aud__tabela{
  margin:34px 0 0; border:1px solid var(--linha);
  border-radius:var(--r); overflow:hidden; background:#fff;
}
.aud__tr{
  display:grid; grid-template-columns:1.1fr .8fr 1.4fr; gap:18px;
  padding:14px 20px; border-top:1px solid var(--linha);
  font-size:.88rem; color:var(--tinta-2);
}
.aud__tr:first-child{ border-top:0; }
.aud__tr b{ color:var(--tinta); font-weight:600; }
.aud__tr--cab{
  background:var(--papel-2);
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3);
}

/* --- o que você recebe --- */
.aud__entrega{ display:grid; gap:0; margin:34px 0 0; border-top:1px solid var(--linha); }
.aud__entrega li{
  display:flex; gap:26px; align-items:flex-start;
  padding:24px 2px; border-bottom:1px solid var(--linha);
}
.aud__entrega__n{ flex:none; font-family:var(--mono); font-size:.76rem; color:var(--tinta-3); padding-top:3px; }
.aud__entrega h3{ font-size:1.06rem; }
.aud__entrega p{ margin:9px 0 0 !important; font-size:.93rem !important; }

.aud__preco{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
  margin-top:40px; padding:30px 32px;
  background:var(--tinta); color:var(--papel); border-radius:var(--r-lg);
}
.aud__preco__valor{ margin:0 !important; font-family:var(--mono); font-size:1.9rem; color:var(--papel) !important; letter-spacing:-.02em; }
.aud__preco__nota{ margin:8px 0 0 !important; font-size:.86rem !important; color:#b5b3aa !important; max-width:38ch; }

.aud__fim{ padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,60px); border-top:1px solid var(--linha); }
.aud__fim h2{ font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.04em; }
.aud__fim p{ margin:20px 0 0; max-width:50ch; color:var(--tinta-2); }
.aud__fim .fechamento__acoes{ margin-top:32px; }
.aud__fim .legal__back{ margin-top:52px; }

@media (max-width:860px){
  .aud__ficha{ grid-template-columns:1fr; }
  .aud__lista--tres{ grid-template-columns:1fr; }
  .aud__tr{ grid-template-columns:1fr; gap:4px; }
  .aud__tr--cab{ display:none; }
  .aud__tr span:nth-child(2)::before{ content:'vive em '; color:var(--tinta-3); }
  .aud__tr span:nth-child(3)::before{ content:'dispara '; color:var(--tinta-3); }
}

@media (max-width:680px){
  .aud__acoes .btn, .aud__fim .btn{ width:100%; }
  .aud__preco{ flex-direction:column; align-items:flex-start; }
  .aud__preco .btn{ width:100%; }
  .aud__entrega li{ gap:16px; }
  .fig__tela{ padding:16px 14px; }
}