/* ============================================================================
   Trentini Digital - landing page
   23/09/2026 · a partir da copy "Copy da página · Trentini Digital"

   Por que a página é assim:

   · As cores saem dos SVGs da marca, não de um gerador de paleta. O azul
     #035897 é o T da logo e #091e2d é a palavra "Digital". Os dois saem do SVG. Só o
     laranja de alerta foi escolhido aqui, porque a marca não tem um, e ele
     aparece em marcador e borda, nunca em texto, como a copy pede.
   · Três fontes com três funções claras: Bricolage (a fonte da logo) nos
     momentos grandes, Inter em tudo que se lê, e mono em toda etiqueta. O
     mono não é enfeite: na copy ele separa medição de argumento.
   · Um tema só, travado. O escuro aparece duas vezes e como marcador: no
     topo e no fechamento. Entre os dois, branco e gelo alternando. Seção que
     inverte o tema no meio da rolagem faz parecer outro site.
   · Esta página vende velocidade no 4G. Então: fonte servida daqui, CSS
     único, nenhuma imagem acima da dobra, nenhuma requisição a terceiro.
   ============================================================================ */


/* ── FONTES ────────────────────────────────────────────────────────────────
   Os mesmos woff2 do Google Fonts (subset latin), servidos do nosso domínio.
   O byte é idêntico; o que se economiza é latência: sai um CSS
   render-blocking em fonts.googleapis.com (DNS + TLS + ida e volta antes do
   primeiro pixel). Inter é variável, por isso 400 e 600 apontam pro mesmo
   arquivo: o navegador baixa a URL uma vez só.
   ───────────────────────────────────────────────────────────────────────── */

@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal; font-weight:800; font-display:swap;
  src:url(fontes/bricolage-grotesque-800-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal; font-weight:400; font-display:swap;
  src:url(fontes/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal; font-weight:600; font-display:swap;
  src:url(fontes/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal; font-weight:500; font-display:swap;
  src:url(fontes/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Allura';
  font-style:normal; font-weight:400; font-display:swap;
  src:url(fontes/allura-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ── TOKENS ─────────────────────────────────────────────────────────────── */

:root{
  /* da marca */
  --tinta:      #091e2d;
  --azul:       #035897;
  --azul-claro: #56A8D8;
  --gelo:       #E6EEF4;
  --papel:      #FFFFFF;

  /* derivados, pra texto e linha */
  --corpo:  #3C4C57;
  --suave:  #5A6A75;  /* escurecido: no gelo o #63737E dava 4,18 e reprovava AA */
  --linha:  #DCE6EE;

  /* o único que não vem da marca. Ver o comentário do topo */
  --alerta: #C2500A;

  /* fundos de faixa: tom de papel tingido, pra destacar sem pintar texto */
  --fundo-alerta: #FCF4EE;
  --fundo-azul:   #F1F6FA;

  --display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --texto:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --raio: 12px;
  --gap:  clamp(3.5rem, 7vw, 6.5rem);
}


/* ── BASE ───────────────────────────────────────────────────────────────── */

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

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

body{
  margin:0;
  background:var(--papel);
  color:var(--corpo);
  font-family:var(--texto);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.04;
  color:var(--tinta);
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem,1.5rem + 4.4vw,4.6rem); }
h2{ font-size:clamp(1.95rem,1.3rem + 2.8vw,3.3rem); }
h3{ font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem); line-height:1.12; }

p{ margin:0 0 1rem; }
ul,ol{ margin:0; padding:0; list-style:none; }
strong{ font-weight:600; color:var(--tinta); }
em{ font-style:normal; font-weight:600; color:var(--tinta); }

a{ color:var(--azul); }
:focus-visible{ outline:3px solid var(--azul); outline-offset:3px; border-radius:4px; }

img,svg{ max-width:100%; height:auto; display:block; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--tinta); color:#fff; padding:.8rem 1.2rem; text-decoration:none;
}
.pular:focus{ left:.5rem; top:.5rem; }

.visualmente-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}


/* ── ESTRUTURA E RITMO ──────────────────────────────────────────────────── */

.wrap{ width:min(100% - 2rem, 68rem); margin-inline:auto; }
.wrap-estreito{ width:min(100% - 2rem, 48rem); }

.secao{ padding:var(--gap) 0; }
.secao + .secao{ border-top:1px solid var(--linha); }
.secao-gelo{ background:var(--gelo); border-top-color:transparent; }
.secao-gelo + .secao{ border-top-color:transparent; }

.secao-escura{
  background:var(--tinta);
  color:var(--gelo);
  border-top-color:transparent;
}
.secao-escura + .secao{ border-top-color:transparent; }
.secao-escura h1,.secao-escura h2,.secao-escura h3{ color:#fff; }
.secao-escura strong,.secao-escura em{ color:#fff; }
.secao-escura .nota-mono{ color:#93A7B5; }
.secao-escura .intro,.secao-escura .lede{ color:#C3D2DD; }


/* ── TIPOGRAFIA DE APOIO ────────────────────────────────────────────────── */

.nota-mono,.etiqueta{
  font-family:var(--mono);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.4;
}
.nota-mono{ font-size:.72rem; color:var(--suave); }
.etiqueta{ font-size:.78rem; color:var(--azul); margin:0 0 1.1rem; }
.etiqueta-azul{ color:var(--azul-claro); }

.lede{
  font-size:clamp(1.1rem,1rem + .55vw,1.4rem);
  line-height:1.5;
  margin:1.4rem 0 0;
  max-width:36ch;
}
.intro{
  margin:1.5rem 0 0;
  max-width:62ch;
}
h2 + .intro{ margin-top:1.6rem; }

.gancho{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(1.15rem,1rem + .8vw,1.7rem);
  line-height:1.2;
  color:var(--tinta);
  max-width:34ch;
  margin:clamp(3rem,5vw,4.5rem) 0 0;
  padding-left:1.1rem;
  border-left:3px solid var(--azul);
  text-wrap:balance;
}
.secao-escura .gancho{ color:#fff; border-left-color:var(--azul-claro); }

.frase-grande{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.025em;
  font-size:clamp(1.5rem,1.15rem + 1.8vw,2.5rem);
  line-height:1.1;
  color:var(--tinta);
  max-width:24ch;
  margin:clamp(2.5rem,4vw,3.5rem) 0 0;
  text-wrap:balance;
}
.secao-escura .frase-grande{ color:#fff; }

.nota-fonte{ margin-top:1.2rem; }
.nota-painel{ margin-top:1.3rem; }


/* ── BOTÕES ─────────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--texto); font-weight:600; font-size:1rem; line-height:1;
  padding:1.05rem 1.6rem;
  border:0; border-radius:var(--raio);
  text-decoration:none; cursor:pointer;
  transition:transform .15s ease, background-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn .ico{ width:1.2em; height:1.2em; flex:none; }

.btn-wa{ background:var(--azul); color:#fff; }
.btn-wa:hover{ background:var(--azul-claro); }

.btn-escuro{ background:var(--tinta); color:#fff; }
.btn-escuro:hover{ background:#16303F; }
.secao-escura .btn-escuro{ background:#fff; color:var(--tinta); }

.btn-mini{ padding:.6rem 1rem; font-size:.9rem; border-radius:9px; }

.cta{ margin:2rem 0 0; }
.cta-centro{ margin-top:2.5rem; }
.sob-botao{ font-size:.88rem; color:var(--suave); margin:.85rem 0 0; }
.secao-escura .sob-botao{ color:#93A7B5; }
.citacao{ color:#C3D2DD; }


/* ── HEADER FIXO ────────────────────────────────────────────────────────── */

.topo-fixo{
  position:sticky; top:0; z-index:40;
  background:rgba(12,28,39,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topo-fixo-linha{
  display:flex; align-items:center; gap:1.5rem;
  padding:.7rem 0;
}
.marca img{ width:112px; height:auto; }
.menu{ display:none; margin-left:auto; gap:1.6rem; }
.menu a{
  color:#C3D2DD; text-decoration:none; font-size:.92rem;
}
.menu a:hover{ color:#fff; }
.topo-fixo .btn{ margin-left:auto; }
.menu ~ .btn{ margin-left:0; }

@media (min-width:62rem){
  .menu{ display:flex; }
}


/* ── 0 · TOPO ───────────────────────────────────────────────────────────── */

.topo{ padding-top:clamp(3rem,6vw,5rem); }
.topo-grade{ display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:center; }

@media (min-width:56rem){
  /* na largura de duas colunas, a figura é mais alta que o texto. Com
     align-items:center a grade de bolinhas subia acima da etiqueta.
     align-items:start alinha os dois topos, que é o efeito pedido. */
  .topo-grade{ grid-template-columns:1.15fr .85fr; align-items:start; }
}

/* o título é a frase do gancho: mais longa que a pergunta antiga, então
   desce um degrau de tamanho. A segunda frase vem em azul, é a promessa. */
.topo h1{ font-size:clamp(2.2rem,1.4rem + 2.8vw,3.6rem); max-width:18ch; }
.topo h1 em{ font-style:normal; color:var(--azul-claro); }
.topo .lede{ max-width:40ch; }

/* os três lugares onde a venda escapa, cada um com o que se faz ali */
.escapes{
  margin:2.4rem 0 0; max-width:36rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.escapes li{
  display:grid; gap:.25rem 1.2rem;
  padding:.9rem 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (min-width:36rem){
  .escapes li{ grid-template-columns:7.5rem 1fr; align-items:baseline; }
}
.escapes .nota-mono{ margin:0; color:var(--azul-claro); }
.escapes p{ margin:0; font-size:.98rem; line-height:1.5; color:#C3D2DD; }
.escapes strong{ display:block; margin-top:.15rem; font-weight:600; color:#fff; }

/* ── O TOPO: O FUNIL EM T ───────────────────────────────────────────────────
   A cena encena a frase do título. O campo largo em cima é quem procurou o seu
   ramo hoje. As bolinhas se soltam e aceleram; a maioria deriva pros lados e
   some antes de chegar. Poucas descem pela haste e pousam no traço de baixo,
   que é você.

   Embaixo, o contraste: com o posicionamento certo, a barra é larga e todas
   pousam nela, as dos lados e as do meio.

   A trajetória é o próprio símbolo da marca: barra larga, haste descendo,
   traço solto embaixo.

   Custo: nenhuma biblioteca, nenhum canvas, nenhum JavaScript. Só `transform`
   e `opacity`, as duas propriedades que o navegador anima na GPU sem
   repintar nada. É o que permite a página prometer 2,5 s no 4G e cumprir.
   ───────────────────────────────────────────────────────────────────────── */

.cena{ margin:0; }

.palco{
  /* recorta a cena: quem escapa some na borda, em vez de voar por cima da
     página. Em tela estreita era isso que criava rolagem horizontal. */
  overflow:hidden;
  --viagem:clamp(86px,12vw,128px);
  --queda:clamp(64px,8vw,92px);
  --ponto:clamp(7px,1vw,10px);
}

/* o campo de procura ----------------------------------------------------- */

/* A regra da cena: branco é gente procurando, azul é o seu cliente. Nada
   que não chegue em você pode ser azul, senão a legenda mente. */
.palco .cena-rotulo.nota-mono{
  margin:0 0 .8rem; color:#93A7B5;
}

.campo-procura{
  display:grid;
  grid-template-columns:repeat(16,1fr);
  gap:clamp(4px,1.1vw,9px);
}
.campo-procura i{
  position:relative;
  aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.11);
}
/* alguns respiram, em onda. o pseudo-elemento existe só pra que a animação
   seja de opacidade, e não de cor: cor repinta, opacidade não. */
.campo-procura i.respira::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:#fff; opacity:0;
  animation:respirar 5.5s ease-in-out infinite;
  animation-delay:calc(var(--r) * -1);
}
@keyframes respirar{
  0%,100%{ opacity:0; }
  45%    { opacity:.22; }
}

/* a viagem --------------------------------------------------------------- */

.viagem{ position:relative; height:var(--viagem); }

.haste{
  position:absolute; left:50%; top:0; bottom:0;
  width:2px; margin-left:-1px;
  background:linear-gradient(to bottom,
    rgba(86,168,216,.30), rgba(86,168,216,.10) 70%, rgba(86,168,216,0));
}

/* Dois elementos aninhados por viajante: o de fora cuida do eixo Y, o de
   dentro do X e da opacidade. Com curvas de tempo diferentes nos dois, a soma
   vira um arco, sem precisar de motion path, que nem todo navegador compõe. */
.viajante{
  position:absolute; top:0;
  width:var(--ponto); height:var(--ponto);
  margin-left:calc(var(--ponto) / -2);
}
.viajante i{
  display:block; width:100%; height:100%;
  border-radius:50%;
  background:var(--azul-claro);
}

/* as que escapam: caem acelerando e derivam pra fora */
.viajante.escapa{
  left:calc(50% + var(--lado) * var(--saida));
  animation:cair var(--dur) cubic-bezier(.55,.02,.85,.38) infinite;
  animation-delay:calc(var(--atraso) * -1);
}
.viajante.escapa i{
  background:rgba(255,255,255,.55);
  animation:derivar var(--dur) cubic-bezier(.2,.6,.45,1) infinite;
  animation-delay:calc(var(--atraso) * -1);
}
@keyframes cair{
  from{ transform:translateY(-6px); }
  to  { transform:translateY(var(--viagem)); }
}
@keyframes derivar{
  0%  { transform:translateX(0);   opacity:0;   }
  14% { opacity:.85; }
  62% { opacity:.4;  }
  100%{ transform:translateX(calc(var(--lado) * clamp(26px,6vw,52px))); opacity:0; }
}

/* as que chegam: descem pela haste e pousam */
.viajante.chega{
  left:50%;
  animation:descer var(--dur) cubic-bezier(.42,0,.72,.46) infinite;
  animation-delay:calc(var(--atraso) * -1);
}
.viajante.chega i{
  box-shadow:0 0 0 3px rgba(86,168,216,.18);
  animation:acender var(--dur) ease-out infinite;
  animation-delay:calc(var(--atraso) * -1);
}
/* pra onde vão os que escapam, escrito na borda */
.rumo{
  position:absolute; bottom:.2rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
  color:rgba(255,255,255,.42); white-space:nowrap;
}
.rumo-esq{ left:0; }
.rumo-dir{ right:0; }

@keyframes descer{
  from{ transform:translateY(-6px); }
  to  { transform:translateY(var(--viagem)); }
}
@keyframes acender{
  0%  { opacity:0; transform:scale(.6); }
  12% { opacity:1; transform:scale(1);  }
  90% { opacity:1; transform:scale(1);  }
  100%{ opacity:0; transform:scale(1.6); }
}

/* o nó: você ------------------------------------------------------------- */

.no{
  position:relative;
  display:grid; place-items:center;
  height:30px;
}
.no-marca{
  width:28px; height:7px; border-radius:2px;
  background:var(--azul-claro);
}
/* a seta que diz quem é o traço */
.aponta{
  position:absolute; left:calc(50% + 24px); top:50%;
  transform:translateY(-50%);
  display:flex; align-items:center; gap:.45rem;
  font-size:.85rem; font-weight:600; color:#fff; white-space:nowrap;
}
.aponta svg{ width:28px; height:10px; flex:none; color:var(--azul-claro); }
/* um anel por chegada, com o relógio ajustado pra estourar na hora do pouso */
.anel{
  position:absolute; left:50%; top:50%;
  width:30px; height:30px; margin:-15px 0 0 -15px;
  border-radius:50%;
  border:1.5px solid var(--azul-claro);
  opacity:0;
  animation:pulsar var(--dur) ease-out infinite;
  animation-delay:calc(var(--atraso) * -1);
}
@keyframes pulsar{
  0%  { transform:scale(.3); opacity:.8; }
  55% { opacity:0; }
  100%{ transform:scale(2.4); opacity:0; }
}

/* a chuva: com posicionamento, todas chegam ------------------------------ */

.chuva{ position:relative; height:var(--queda); margin-top:1.8rem; }

.gota{
  position:absolute; top:0;
  left:calc(50% + var(--x));
  width:var(--ponto); height:var(--ponto);
  margin-left:calc(var(--ponto) / -2);
  animation:chover var(--dur) cubic-bezier(.5,0,.8,.45) infinite;
  animation-delay:calc(var(--atraso) * -1);
}
.gota i{
  display:block; width:100%; height:100%;
  border-radius:50%;
  background:var(--azul-claro);
  animation:acender var(--dur) ease-out infinite;
  animation-delay:calc(var(--atraso) * -1);
}
@keyframes chover{
  from{ transform:translateY(-6px); }
  to  { transform:translateY(var(--queda)); }
}

.barra-larga{
  display:grid; place-items:center;
  height:20px;
}
.barra-marca{
  width:88%; height:9px; border-radius:3px;
  background:var(--azul-claro);
  box-shadow:0 0 22px rgba(86,168,216,.45);
}
.palco .barra-rotulo{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  margin:.7rem 0 0;
  font-size:.85rem; font-weight:600; color:#fff;
}
.barra-rotulo svg{ width:10px; height:16px; flex:none; color:var(--azul-claro); }

/* legenda ---------------------------------------------------------------- */

.cena figcaption{
  display:flex; flex-direction:column; gap:.45rem;
  margin-top:1.4rem;
}
/* a frase que explica a metade de cima: antes era um bloco no meio da cena,
   agora abre a legenda, junto dos dois chips que ela explica */
.legenda-frase{
  display:block; max-width:40ch; margin-bottom:.35rem;
  font-size:.92rem; line-height:1.45; color:#fff;
}
.legenda-linha{
  display:flex; align-items:center; gap:.6rem;
  font-size:.85rem; color:#C3D2DD;
}
.chip{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.45);
}
.chip.on{ background:var(--azul-claro); }
.cena .nota-mono{ margin-top:.35rem; }



/* ── PÁGINAS DE DENTRO ──────────────────────────────────────────────────────
   /mapa, /whatsapp-ia, /precos e /cases/festival. O topo é o mesmo escuro da
   home, mais baixo e sem a cena: quem chega aqui já veio atrás de um assunto.
   ───────────────────────────────────────────────────────────────────────── */

.topo-interno{ padding-top:clamp(2.5rem,5vw,4rem); }
.topo-interno h1{ font-size:clamp(2.2rem,1.4rem + 3.4vw,3.8rem); max-width:20ch; }
.topo-interno .lede{ max-width:52ch; }
.migalha a{ color:inherit; text-decoration:none; }
.migalha a:hover{ text-decoration:underline; }


/* ── 1 · PAINEL: ONDE A VENDA ESCAPA ────────────────────────────────────── */

.painel{ margin-top:clamp(2.5rem,4vw,3.5rem); }

.painel-cabeca{ display:none; }
.painel-corpo{ border-top:1px solid var(--linha); }

.painel-linha{
  display:grid; gap:.7rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--linha);
}
.painel-ponto{
  color:var(--tinta);
  letter-spacing:.09em;
  align-self:center;
}
.painel-linha p:last-child{ margin-bottom:0; }

/* As duas colunas viram faixas tingidas: a pessoa lê "hoje" e "arrumado" pela
   cor antes de ler a palavra. O tom é de fundo, nunca de texto: o laranja no
   texto é justamente o que a copy proíbe. */
.painel-hoje,
.painel-ok{
  padding:.95rem 1.1rem;
  border-radius:9px;
  border-left:3px solid;
}
.painel-hoje{ background:var(--fundo-alerta); border-left-color:var(--alerta); }
.painel-ok  { background:var(--fundo-azul);   border-left-color:var(--azul);   }

.mini{ display:block; font-size:.66rem; margin-bottom:.3rem; }
.painel-hoje .mini{ color:var(--alerta); }
.painel-ok   .mini{ color:var(--azul);   }

@media (min-width:52rem){
  .painel-cabeca{
    display:grid;
    grid-template-columns:15rem 1fr 1fr;
    gap:1rem;
    padding-bottom:.8rem;
  }
  .painel-cabeca span:not(:first-child){ padding-left:1.1rem; }
  .painel-linha{
    grid-template-columns:15rem 1fr 1fr;
    gap:1rem; align-items:stretch;
  }
  .mini{ display:none; }
}

/* os três pontos mais técnicos ficam fechados. O botão fala a mesma língua
   do FAQ: mono, azul, o + que vira x quando abre. */
.painel-mais summary{
  display:inline-flex; align-items:center; gap:.7rem;
  margin-top:1.3rem; padding:.7rem 1rem;
  border:1px solid var(--azul); border-radius:9px;
  font-family:var(--mono); font-weight:500; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--azul); cursor:pointer; list-style:none;
}
.painel-mais summary::-webkit-details-marker{ display:none; }
.painel-mais summary::after{
  content:"+"; font-size:1.1rem; line-height:1;
  transition:transform .18s ease;
}
.painel-mais[open] summary::after{ transform:rotate(45deg); }
.painel-mais summary:hover{ background:var(--fundo-azul); }
.painel-mais .painel-corpo{ margin-top:1.3rem; }


/* ── 2 · O MAPA ─────────────────────────────────────────────────────────── */

.mapa-grade{
  display:grid; gap:clamp(2rem,4vw,3rem);
  margin-top:clamp(2.5rem,4vw,3.5rem);
  align-items:start;
}
@media (min-width:52rem){
  .mapa-grade{ grid-template-columns:.9fr 1.1fr; }
}

.mapa-arte{ margin:0; }
.mapa-arte svg{
  width:100%; height:auto;
  border:1px solid var(--linha); border-radius:var(--raio);
  background:#fff;
}

.criterios{ display:grid; gap:1.4rem; }
.criterio{
  padding-left:1.1rem;
  border-left:3px solid var(--azul);
}
.criterio .nota-mono{ color:var(--tinta); margin-bottom:.45rem; }
.criterio p:last-child{ margin-bottom:0; }
.criterio-travado{ border-left-color:var(--linha); }
.criterio-travado .nota-mono{ color:var(--suave); }


/* ── 3 · O TAMANHO DO MERCADO ───────────────────────────────────────────── */

.escada{
  display:grid; gap:1.5rem;
  margin-top:clamp(2.5rem,4vw,3.5rem);
}
@media (min-width:52rem){
  .escada{ grid-template-columns:repeat(4,1fr); align-items:end; }
  .escada .degrau-num:nth-child(1){ padding-bottom:0; }
  .escada .degrau-num:nth-child(2){ padding-bottom:1.5rem; }
  .escada .degrau-num:nth-child(3){ padding-bottom:3rem; }
  .escada .degrau-num:nth-child(4){ padding-bottom:4.5rem; }
}

.degrau-num{
  border-top:3px solid var(--azul);
  padding-top:1.1rem;
}
.degrau-seu{ border-top-color:var(--linha); }

.numerao{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.8rem,2rem + 3.4vw,4.4rem);
  line-height:.9; letter-spacing:-.04em;
  color:var(--tinta);
  margin:0 0 .7rem;
}
.numerao span{ font-size:.42em; letter-spacing:0; }
.degrau-seu .numerao{ color:var(--suave); }
.rotulo{ color:var(--tinta); margin-bottom:.7rem; }


/* ── A CONTA É SUA ──────────────────────────────────────────────────────── */

.conta{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:clamp(1.5rem,3vw,2.5rem);
}
.conta-form{
  display:grid; gap:1.1rem;
}
@media (min-width:46rem){
  .conta-form{ grid-template-columns:repeat(3,1fr) auto; align-items:end; }
}
.campo{ margin:0; display:grid; gap:.45rem; }
.campo label{ font-size:.88rem; line-height:1.35; color:var(--corpo); }
.campo input{
  font-family:var(--texto); font-size:1.05rem;
  padding:.75rem .85rem;
  border:1px solid var(--linha); border-radius:9px;
  background:#fff; color:var(--tinta);
  width:100%;
}
.campo input:focus{ border-color:var(--azul); }
.campo-botao .btn{ width:100%; justify-content:center; }

.conta-erro{
  margin:1rem 0 0; font-size:.92rem; color:var(--alerta);
}
.conta-saida{
  margin-top:1.6rem; padding-top:1.4rem;
  border-top:1px solid var(--linha);
  font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
}
.conta-saida p:last-child{ margin-bottom:0; }
.conta-saida strong{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:1.3em; color:var(--azul);
}
.conta .nota-fonte{ margin-top:1.5rem; margin-bottom:0; }




/* ── 4 · SERVE PRO SEU NEGÓCIO? ─────────────────────────────────────────────
   Mesma gramática do painel da seção 1: faixa tingida quente pro problema,
   fria pro que se arruma. Nada de linguagem visual nova: quem leu o painel
   já sabe ler isto aqui.
   ───────────────────────────────────────────────────────────────────────── */

.casos{
  display:grid; gap:1.1rem;
  margin-top:clamp(2.5rem,4vw,3.5rem);
}

.caso{
  display:grid; gap:.9rem;
  align-items:stretch;
}
@media (min-width:52rem){
  .caso{ grid-template-columns:1fr 1fr; gap:1.1rem; }
}

.caso-situacao,
.caso-resolve{
  padding:1.3rem 1.4rem;
  border-radius:10px;
  border-left:3px solid;
}
.caso-situacao{ background:var(--fundo-alerta); border-left-color:var(--alerta); }
.caso-resolve { background:var(--fundo-azul);   border-left-color:var(--azul);   }

.caso p:last-child{ margin-bottom:0; }

/* a fala do dono: é o que faz a pessoa se reconhecer, então tem peso */
.caso-fala{
  font-family:var(--display); font-weight:800;
  letter-spacing:-.02em; line-height:1.15;
  font-size:clamp(1.1rem,1rem + .7vw,1.45rem);
  color:var(--tinta);
  margin-bottom:.8rem;
  text-wrap:balance;
}

.caso-resolve .nota-mono{ color:var(--azul); margin-bottom:.55rem; }
.caso-resolve .link-seta{ margin-top:.8rem; font-size:.95rem; }

/* O degrau 03 aparece, mas não disputa com os cards de cima: sem fundo
   tingido, fala menor, uma linha de borda neutra em vez da cor. */
.casos-depois{
  margin-top:clamp(2rem,3vw,2.6rem);
  padding-top:1.6rem;
  border-top:1px solid var(--linha);
}
.casos-depois > .nota-mono{ margin-bottom:1.1rem; }
.casos-depois ul{ display:grid; gap:1.1rem; }
@media (min-width:52rem){
  .casos-depois ul{ grid-template-columns:repeat(3,1fr); gap:1.6rem; }
}
.casos-depois li{
  padding-left:1rem;
  border-left:2px solid var(--linha);
}
.casos-depois li p{ margin:0; font-size:.95rem; }
.casos-depois .caso-fala-mini{
  font-family:var(--display); font-weight:800;
  letter-spacing:-.02em; line-height:1.2;
  color:var(--tinta);
  margin-bottom:.35rem;
  font-size:1.02rem;
}
.casos-depois .link-seta{ margin:1.2rem 0 0; font-size:.95rem; }


/* ── 5 · COMO TRABALHAMOS ───────────────────────────────────────────────── */

.passos{
  display:grid; gap:0;
  margin-top:clamp(2.5rem,4vw,3.5rem);
  border-top:1px solid var(--linha);
}
.passo{
  padding:1.8rem 0;
  border-bottom:1px solid var(--linha);
  display:grid; gap:.7rem;
}
@media (min-width:52rem){
  .passo{
    grid-template-columns:14rem 1fr;
    column-gap:2rem;
    align-items:start;
  }
  .passo-selo{ grid-row:span 3; }
}
.passo-selo{ color:var(--azul); margin:0; }
.passo h3{ margin:0; }
.passo p{ margin:0; max-width:58ch; }
.recebe{ color:var(--suave); font-size:.95rem; }

.fechamento-linha{
  margin-top:2.2rem;
  font-weight:600; color:var(--tinta);
  max-width:46ch;
}


/* ── 6 · OS TRÊS DEGRAUS ────────────────────────────────────────────────── */

.degraus{
  display:grid; gap:1.2rem;
  margin-top:clamp(2.5rem,4vw,3.5rem);
}
@media (min-width:52rem){
  /* Três cartões idênticos lado a lado é o layout mais batido que existe.
     Aqui eles sobem como degraus: larguras diferentes e cada um começando
     mais alto que o anterior. O layout passa a dizer o que o texto diz. */
  .degraus{ grid-template-columns:1.06fr 1fr .94fr; align-items:start; }
  .degraus > *:nth-child(1){ margin-top:2.6rem; }
  .degraus > *:nth-child(2){ margin-top:1.3rem; }
  .degraus > *:nth-child(3){ margin-top:0; }
}
.degrau{
  background:var(--papel);
  border:1px solid var(--linha);
  border-top:3px solid var(--azul);
  border-radius:var(--raio);
  padding:1.6rem;
}
.degrau-selo{ color:var(--azul); margin-bottom:1rem; }
.degrau h3{ margin-bottom:.8rem; }
.degrau p:last-child{ margin-bottom:0; }
.pra-quem{
  margin-top:1.2rem; padding-top:1rem;
  border-top:1px solid var(--linha);
  font-size:.95rem;
}
.pra-quem .nota-mono{ display:block; margin-bottom:.2rem; }

/* O 03 existe, mas é o passo seguinte: sem o azul no topo, sem fundo, e o
   título um tom abaixo. Continua legível, só não disputa com os outros dois. */
.degrau-discreto{
  background:transparent;
  border-style:dashed;
  border-color:#C9D6E0;
  border-top-width:2px;
}
.degrau-discreto .degrau-selo{ color:var(--suave); }
.degrau-discreto h3{ font-size:clamp(1.1rem,1rem + .5vw,1.35rem); }

/* ── O CICLO ────────────────────────────────────────────────────────────────
   Quatro passos em linha, e o último devolve pro primeiro. É a mesma
   gramática do degrau (traço azul em cima, rótulo mono), pra ler como parte
   da mesma estrutura e não como um enfeite novo.
   ───────────────────────────────────────────────────────────────────────── */

.ciclo{
  margin-top:clamp(3rem,5vw,4.5rem);
  padding:clamp(1.5rem,3vw,2.5rem);
  background:var(--gelo);
  border-radius:var(--raio);
}
.ciclo-titulo{ font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }

.ciclo-passos{
  display:grid; gap:1.4rem;
  margin-top:1.8rem;
}
.ciclo-passos li{
  position:relative;
  border-top:3px solid var(--azul);
  padding-top:.9rem;
}
.ciclo-passos .nota-mono{ color:var(--azul); margin-bottom:.4rem; }
.ciclo-passos li p:last-child{ margin:0; font-size:.95rem; }

@media (min-width:52rem){
  .ciclo-passos{ grid-template-columns:repeat(4,1fr); gap:2.2rem; }
  /* a seta mora no vão entre um traço e o próximo */
  .ciclo-passos li:not(:last-child)::after{
    content:"→";
    position:absolute; top:-.72rem; right:-1.7rem;
    font-family:var(--mono); font-size:1.25rem; line-height:1;
    color:var(--azul);
  }
}

/* O retorno. No celular é só o texto, porque os passos estão empilhados e
   não há onde a linha pousar. Da largura de quatro colunas pra cima, um U
   invertido sai do meio do quarto passo e volta pro meio do primeiro, com a
   ponta da seta subindo em "Atrair". */
.ciclo-retorno{ position:relative; margin-top:1.8rem; }
.ciclo-retorno p{ margin:0; max-width:62ch; }
.ciclo-retorno .nota-mono{ display:block; color:var(--azul); margin-bottom:.35rem; }

@media (min-width:52rem){
  .ciclo-retorno{ padding-top:2.6rem; margin-top:1.2rem; }
  /* centro de cada coluna: (100% - 3 vãos de 2.2rem) / 8 */
  .ciclo-retorno::before{
    content:"";
    position:absolute; top:0; height:1.6rem;
    left:calc((100% - 6.6rem) / 8);
    right:calc((100% - 6.6rem) / 8);
    border:2px dashed var(--azul);
    border-top:0;
    border-radius:0 0 10px 10px;
    opacity:.75;
  }
  .ciclo-retorno::after{
    content:"";
    position:absolute; top:-.35rem;
    left:calc((100% - 6.6rem) / 8 - 5px);
    border:6px solid transparent;
    border-bottom:8px solid var(--azul);
    border-top:0;
    opacity:.8;
  }
}

/* link que leva pra página de dentro: seta em vez de sublinhado */
.link-seta{ margin-top:1rem; }
.link-seta a{ font-weight:600; text-decoration:none; }
.link-seta a::after{ content:" →"; }
.link-seta a:hover{ text-decoration:underline; }
.link-seta-grande{ margin-top:2.2rem; font-size:1.1rem; }

.costura{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  max-width:56ch;
  font-size:1.05rem;
}

.bloco-interno{
  margin-top:clamp(3rem,5vw,4.5rem);
  padding-top:clamp(2.5rem,4vw,3.5rem);
  border-top:1px solid var(--linha);
}
.titulo-interno{
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  margin-bottom:0;
}
.bloco-interno .frase-grande{ margin-top:2rem; }

.destaque{
  margin-top:1.8rem;
  padding-left:1.2rem;
  border-left:3px solid var(--azul);
  font-family:var(--display); font-weight:800;
  letter-spacing:-.02em; line-height:1.18;
  font-size:clamp(1.15rem,1rem + .9vw,1.65rem);
  color:var(--tinta);
  max-width:34ch;
}

.pagamento{ margin-top:2.2rem; }
.pagamento .nota-mono{ color:var(--tinta); margin-bottom:.8rem; }
.pagamento ul{ display:grid; gap:.5rem; }
.pagamento li{ font-size:.98rem; }

.duas-regras{
  display:grid; gap:1.2rem;
  margin-top:2rem;
}
@media (min-width:46rem){ .duas-regras{ grid-template-columns:1fr 1fr; } }
.regra{
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:1.4rem;
}
.regra .nota-mono{ color:var(--tinta); margin-bottom:.6rem; }
.regra p:last-child{ margin-bottom:0; }


/* ── TABELAS (montagem do orçamento e relatório do dia 30) ──────────────── */

.tabela-rolagem{ overflow-x:auto; margin-top:2rem; }
.tabela{
  width:100%; border-collapse:collapse;
  text-align:left; font-size:.98rem;
}
.tabela th,.tabela td{
  padding:.95rem 1rem .95rem 0;
  border-bottom:1px solid var(--linha);
  vertical-align:top;
}
.tabela thead th{
  color:var(--tinta); font-weight:500;
  border-bottom:2px solid var(--linha);
  white-space:nowrap;
}
.tabela tbody th{ font-weight:400; color:var(--corpo); }

.tabela-montagem thead th:first-child{ color:var(--azul); }
.tabela-montagem thead th:last-child{ color:var(--suave); }
.tabela-montagem td:last-child{ color:var(--suave); }

.secao-escura .tabela th,
.secao-escura .tabela td{ border-bottom-color:rgba(255,255,255,.12); }
.secao-escura .tabela thead th{ border-bottom-color:rgba(255,255,255,.22); color:#93A7B5; }
.secao-escura .tabela tbody th{ color:var(--gelo); }
.tabela-relatorio td{
  width:5.5rem; text-align:center;
}
/* O lugar do número do cliente. Era um travessão digitado; virou uma linha
   desenhada. Lê melhor, e tira da página o caractere que mais denuncia texto
   escrito por máquina. */
.tabela-relatorio tbody td::after{
  content:""; display:inline-block;
  width:1.4rem; height:1px;
  background:currentColor; opacity:.4;
  vertical-align:middle;
}
.tabela-relatorio tfoot td{
  width:auto; text-align:left; border-bottom:0;
  padding-top:1.1rem; color:var(--suave);
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}


/* ── 9 · PERGUNTAS ──────────────────────────────────────────────────────── */

.faq{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  border-top:1px solid var(--linha);
}
.faq details{ border-bottom:1px solid var(--linha); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.25rem 0; cursor:pointer;
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  color:var(--tinta);
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none;
  font-family:var(--mono); font-size:1.4rem; font-weight:500;
  color:var(--azul); line-height:1;
  transition:transform .18s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--azul); }
.faq details p{
  margin:0 0 1.4rem; max-width:62ch;
}


/* ── FECHAMENTO E RODAPÉ ────────────────────────────────────────────────── */

/* a frase que sobrou do "como trabalhamos": sozinha, logo acima do pedido */
.nao-vale{
  margin-bottom:clamp(2.5rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,4vw,3.5rem);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nao-vale .frase-grande{ margin-top:0; }
.nao-vale .lede{ margin-top:1rem; max-width:40ch; }

.horario{
  margin-top:2.5rem; font-size:.95rem; color:#C3D2DD;
}
.horario .nota-mono{ display:block; margin-bottom:.25rem; }

.rodape{
  background:var(--tinta);
  border-top:1px solid rgba(255,255,255,.1);
  padding:2rem 0 2.2rem;
}
.rodape-linha{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:1.4rem; row-gap:.2rem;
  color:#93A7B5; font-size:.9rem;
}
.rodape-linha p{ margin:0; }
.rodape-links{
  flex-basis:100%;
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  margin-top:.8rem;
}
.rodape-links a{ color:#C3D2DD; text-decoration:none; }
.rodape-links a:hover{ color:#fff; text-decoration:underline; }
.rodape-nome{
  font-family:'Allura', cursive; font-weight:400;
  font-size:2.3rem; line-height:1.1; color:#fff;
}


/* ── ANIMAÇÃO ───────────────────────────────────────────────────────────────
   Só entra quando o JS confirma que está vivo (.js no <html>) e o navegador
   suporta IntersectionObserver. Sem isso, tudo aparece estático e legível,
   que é o comportamento certo pra quem chega com JS bloqueado.
   ───────────────────────────────────────────────────────────────────────── */

.js .surgir,
.js .revelar{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
  transition-delay:calc(var(--d,0) * 90ms);
}
.js .revelar{ transform:translateY(20px); }
.js .surgir.visivel,
.js .revelar.visivel{ opacity:1; transform:none; }


/* ── AFINAMENTO DO RESTO DA PÁGINA ──────────────────────────────────────────
   Movimento a serviço da leitura: nada aqui chama atenção pra si. Tudo usa as
   mesmas duas propriedades baratas do topo, e tudo está preso a `.visivel`,
   que o observador de rolagem põe quando o bloco entra na tela.
   ───────────────────────────────────────────────────────────────────────── */

/* Entrada escalonada de verdade. Numa fileira de três, os três entravam
   juntos, o que anula o efeito. Aqui cada posição tem o seu tempo. */
.js .degraus     > *:nth-child(2),
.js .escada      > *:nth-child(2),
.js .criterios   > *:nth-child(2),
.js .duas-regras > *:nth-child(2){ --d:1; }

.js .degraus   > *:nth-child(3),
.js .escada    > *:nth-child(3),
.js .criterios > *:nth-child(3){ --d:2; }

.js .escada > *:nth-child(4){ --d:3; }

.js .ciclo-passos > *:nth-child(2){ --d:1; }
.js .ciclo-passos > *:nth-child(3){ --d:2; }
.js .ciclo-passos > *:nth-child(4){ --d:3; }

/* O traço de cada linha do painel desenha da esquerda pra direita, como se
   alguém estivesse riscando a lista enquanto lê. */
.js .painel-linha{ position:relative; border-bottom-color:transparent; }
.js .painel-linha::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--linha);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay:140ms;
}
.js .painel-linha.visivel::after{ transform:scaleX(1); }
/* as de dentro do <details> não passam pelo observador: traço fixo */
.js .painel-mais .painel-linha{ border-bottom-color:var(--linha); }
.js .painel-mais .painel-linha::after{ display:none; }

/* Os pinos caem na ordem: primeiro os três que ocupam o mapa, e só depois
   você, que aparece de lado e fora da lista. A ordem conta a história. */
.js .mapa-arte .pino{
  opacity:0;
  transform:translateY(-16px);
  transition:opacity .45s ease, transform .6s cubic-bezier(.34,1.28,.64,1);
  transition-delay:calc(var(--i) * 150ms);
}
.js .mapa-arte.visivel .pino{ opacity:1; transform:none; }
.js .mapa-arte .pino-voce{ transition-delay:calc(var(--i) * 150ms + 260ms); }

/* Os números da seção 3 contam até o valor. O JavaScript escreve o número;
   isto aqui só evita que a largura pule a cada dígito trocado. */
.numerao{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .js .painel-linha{ border-bottom-color:var(--linha); }
  .js .painel-linha::after{ display:none; }
  .js .mapa-arte .pino{ opacity:1; transform:none; transition:none; }
}

@media (prefers-reduced-motion:reduce){
  .js .surgir,.js .revelar{
    opacity:1; transform:none; transition:none;
  }
  .btn{ transition:none; }
  .btn:hover{ transform:none; }

  /* A cena do topo para de vez. Não fica um resto girando: as que escapam
     somem, e as três que chegam ficam paradas em cima do nó, que é o estado
     que conta a mesma história sem movimento nenhum. Na barra larga, todas
     ficam pousadas. */
  .campo-procura i.respira::after{ animation:none; opacity:.5; }
  .viajante.escapa{ display:none; }
  .gota, .gota i{ animation:none; }
  .gota{ transform:translateY(var(--queda)); }
  .viajante.chega,
  .viajante.chega i,
  .anel{ animation:none; }
  .viajante.chega{ transform:translateY(var(--viagem)); }
  .viajante.chega i{ opacity:1; transform:none; }
  .anel{ opacity:.25; transform:scale(1); }
}


/* ── CELULAR ────────────────────────────────────────────────────────────── */

@media (max-width:34rem){
  .wrap,.wrap-estreito{ width:calc(100% - 2rem); }
  .topo-fixo-linha{ gap:.8rem; }
  .marca img{ width:96px; }
  .btn{ padding:.95rem 1.2rem; }
  .btn-mini{ padding:.55rem .85rem; font-size:.85rem; }
  .campo-procura{ grid-template-columns:repeat(12,1fr); }
  .conta{ padding:1.3rem; }
  .tabela th,.tabela td{ padding-right:.8rem; }
}


/* ── O AZUL NO FUNDO ESCURO ─────────────────────────────────────────────────
   O azul da marca (#035897) foi feito pra papel branco: 7,38 de contraste ali,
   contra 2,30 no #091e2d. No escuro ele some. Por isso tudo que é azul e mora
   em seção escura troca pro azul claro (6,60 no escuro), que é exatamente o
   que a própria logo-branco.svg já faz.
   ───────────────────────────────────────────────────────────────────────── */

.secao-escura .btn-wa,
.topo-fixo .btn-wa{
  background:var(--azul-claro);
  color:var(--tinta);
}
.secao-escura .btn-wa:hover,
.topo-fixo .btn-wa:hover{ background:#7CBFE4; }

/* O anel de foco precisa aparecer nos dois fundos. No escuro, o azul da marca
   daria 2,43: um anel que o teclado não enxerga. */
.secao-escura :focus-visible,
.topo-fixo :focus-visible,
.rodape :focus-visible{ outline-color:var(--azul-claro); }