/* =========================================================================
   GOLTS — Consultoria
   Sistema visual: editorial escuro, respiro largo, acento vermelho da marca.
   Tipografia Outfit, geométrica como o lettering do logotipo.
   Paleta derivada do logotipo (#7b0001 / prata #bec4c9).
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Neutros de fundo quente. O cinza-azulado de referência saiu: o preto aqui
     guarda resíduo de bordô e o papel guarda resíduo de rosa. É o que separa
     esta página de qualquer template escuro. */
  --ink:#1a0a0e;           /* preto tipográfico, com fundo de vinho */
  --ink-2:#251015;         /* superfícies escuras */
  --ink-3:#120508;         /* o mais fundo: rodapé e modal */
  --paper:#f8f4f2;         /* fundo claro */
  --paper-2:#f0e8e5;       /* fundo claro alternado */
  --muted:#6d5b5f;         /* texto secundário sobre claro */
  --muted-dark:#ab989c;    /* texto secundário sobre escuro */
  --texto-2:#453539;       /* corpo de apoio sobre claro */
  --apoio-dark:#8a767a;    /* etiquetas sobre escuro */
  --line:#1a0a0e18;        /* filetes sobre fundo claro */
  --line-dark:#ffffff1c;   /* filetes sobre fundo escuro */

  /* O vermelho da Golts é bordô, não escarlate. Em fundo claro ele assina o
     texto; em fundo escuro um bordô puro apaga, então quem assina é a prata
     do logotipo e o bordô fica como atmosfera — brasa, halo, preenchimento. */
  --bordo:#7b0001;         /* institucional, direto do logotipo */
  --bordo-vivo:#9c1421;    /* acento sobre fundo claro */
  --bordo-brasa:#bc2531;   /* pontos e filetes sobre fundo escuro */
  --bordo-fundo:#4a0409;   /* blocos e halos de bordô */
  --prata:#c3c8cc;         /* prata do logotipo: acento sobre escuro */
  --prata-clara:#e4e7e9;   /* destaque de título sobre escuro */

  --fonte:"Outfit","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;

  /* Contêiner de 1280px, com respiro maior que o do rascunho anterior. */
  --pad-x:max(28px,50vw - 640px);
  /* Reduzido de clamp(96px,11vw,168px): naquele valor o encontro de duas
     seções somava mais de 300px em tela grande, e o vazio pesava mais que o
     conteúdo. Agora o ritmo é firme sem parecer página inacabada. */
  --pad-y:clamp(64px,6.4vw,104px);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fonte);font-size:17px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* Escala tipográfica mais contida que a do rascunho: o texto grande estava
   saltando à frente do conteúdo em vez de conduzir a leitura. */
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.08}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.pular-conteudo{
  position:absolute;left:-9999px;z-index:200;
  background:var(--ink);color:#fff;padding:14px 22px;border-radius:12px;
}
.pular-conteudo:focus{left:16px;top:16px}
:focus-visible{outline:2px solid var(--bordo-vivo);outline-offset:3px;border-radius:4px}

/* ---------- 3. Camadas fixas ---------- */
.page-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--bordo),var(--bordo-brasa));
  transition:width .1s linear;
}

/* ---------- 4. Navegação ---------- */
/* A pílula troca de cor conforme a seção que passa por baixo dela: clara sobre
   fundo escuro, escura sobre fundo claro. Quem decide é o JavaScript, que lê
   o data-fundo da seção; aqui ficam só os dois estados. */
.nav-shell{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  width:min(1180px,100% - 40px);height:66px;padding:0 12px 0 22px;
  border-radius:20px;border:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),
             color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease);
}
.nav-shell[data-tema="escuro"]{
  color:#fff;background:#12121499;border-color:#ffffff26;
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 10px 34px #00000038;
}
.nav-shell[data-tema="claro"]{
  color:var(--ink);background:#ffffffd9;border-color:#00000014;
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 10px 34px #0000001a;
}
.nav-shell.oculta{transform:translateX(-50%) translateY(-140%)}

.nav-marca{display:flex;align-items:center;gap:11px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.nav-marca img{width:32px;height:32px;border-radius:9px}
.nav-links{display:flex;align-items:center;gap:32px;min-width:0}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{position:relative;padding:5px 0;font-size:15px;opacity:.72;transition:opacity .3s var(--ease)}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .35s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="true"]{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{width:100%}
.nav-cta{
  display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:13px;
  font-size:15px;font-weight:500;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.nav-shell[data-tema="escuro"] .nav-cta{background:#fff;color:var(--ink)}
.nav-shell[data-tema="claro"] .nav-cta{background:var(--ink);color:#fff}
.nav-cta:hover{background:var(--bordo);color:#fff;transform:translateY(-1px)}

/* ---------- 5. Hero ----------
   Assimétrico: título grande alinhado à margem na esquerda e, na direita, o
   painel de uma entrega — o que o cliente recebe, em vez de uma promessa
   centralizada. O fundo é um feixe de bordô girando devagar atrás do painel,
   com colunas finas no lugar da grade quadriculada.
   ------------------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(100svh,980px);padding:150px var(--pad-x) 36px;
  color:#fff;background:var(--ink-3);
}
.hero-fundo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-fundo::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 16.666%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 95%);
  mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 95%);
}
.hero-feixe{
  position:absolute;top:50%;right:-420px;width:1150px;height:1150px;border-radius:50%;
  background:conic-gradient(from 200deg,transparent 0 18%,#7b0001a6 30%,#bc253166 38%,
             transparent 50%,transparent 66%,#4a040980 80%,transparent 92%);
  filter:blur(70px);transform:translateY(-50%);
  animation:gira 30s linear infinite;
}
@keyframes gira{to{transform:translateY(-50%) rotate(360deg)}}
/* A luz segue o ponteiro; sem ponteiro fino ela fica parada no alto à direita. */
.hero-luz{
  position:absolute;inset:0;
  background:radial-gradient(640px circle at var(--mx,72%) var(--my,34%),#ffffff0f,transparent 62%);
}

.hero-grade{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(40px,5vw,88px);align-items:center;width:100%;
}

.hero-selo{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 16px 7px 12px;border:1px solid #ffffff1f;border-radius:999px;
  background:#ffffff08;font-size:13.5px;color:var(--muted-dark);
}
.hero-selo i{
  width:8px;height:8px;border-radius:50%;background:var(--bordo-brasa);flex:none;
  animation:pulsa 2.4s var(--ease) infinite;
}
@keyframes pulsa{
  0%{box-shadow:0 0 0 0 #bc2531b3}
  70%,100%{box-shadow:0 0 0 10px #bc253100}
}

.hero-titulo{
  margin-top:28px;font-size:clamp(40px,6vw,88px);font-weight:600;
  line-height:.98;letter-spacing:-.045em;
}
.hero-linha{display:block}
/* As palavras dividem a mesma célula: a caixa assume a largura da maior e o
   título não pula quando uma troca pela outra. */
.hero-giro{display:inline-grid;vertical-align:bottom;padding-bottom:.1em}
.hero-giro-palavra{
  grid-area:1/1;
  background:linear-gradient(95deg,var(--prata-clara) 8%,#e0707a 58%,var(--bordo-brasa));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(.4em);filter:blur(10px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
}
.hero-giro-palavra.ativa{opacity:1;transform:none;filter:none}
.hero-giro-palavra.saindo{opacity:0;transform:translateY(-.4em);filter:blur(10px)}

.hero-lead{
  max-width:50ch;margin-top:30px;
  font-size:clamp(16.5px,1.35vw,19px);color:var(--muted-dark);line-height:1.66;
}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:40px}
.hero-seta{transition:transform .3s var(--ease)}
.hero-cta:hover .hero-seta{transform:translateX(4px)}
.hero-link{position:relative;padding:6px 0;font-size:15.5px;font-weight:500;color:#fff}
.hero-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.35;transform-origin:left;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.hero-link:hover::after{opacity:1;transform:scaleX(1.06)}

/* ---- o painel de entrega ---- */
.hero-visual{position:relative}
.hero-painel{
  margin:0;border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,#ffffff17,#ffffff05 55%);
  border:1px solid #ffffff21;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 50px 100px -40px #000000d9,inset 0 1px 0 #ffffff1a;
  transform:perspective(1200px) rotateY(var(--ry,-6deg)) rotateX(var(--rx,3deg));
  transition:transform .6s var(--ease);
}
.hero-painel-topo{
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid #ffffff14;
}
.hero-painel-pontos{display:flex;gap:6px;flex:none}
.hero-painel-pontos i{width:9px;height:9px;border-radius:50%;background:#ffffff26}
.hero-painel-pontos i:first-child{background:var(--bordo-brasa)}
.hero-painel-url{
  flex:1;min-width:0;padding:5px 12px;border-radius:8px;background:#00000038;
  font-family:var(--mono);font-size:11.5px;color:var(--muted-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-painel-status{
  display:flex;align-items:center;gap:7px;flex:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8fdcae;
}
.hero-painel-status::before{content:"";width:6px;height:6px;border-radius:50%;background:#3fcf7a;box-shadow:0 0 10px #3fcf7a}
.hero-painel-corpo{padding:24px 22px 24px}
.hero-painel-rotulo{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--apoio-dark);
}
.hero-defs{position:absolute}

.hero-notas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.hero-nota{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hero-nota>span:last-child{font-size:12px;line-height:1.3;color:var(--muted-dark)}
.hero-anel{position:relative;display:grid;place-items:center;width:64px;height:64px}
.hero-anel svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hero-anel circle{fill:none;stroke-width:4}
.hero-anel-trilho{stroke:#ffffff14}
.hero-anel-valor{
  stroke:url(#hero-anel-cor);stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--nota,100));
}
.hero-anel b{position:relative;font-size:18px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

.hero-checklist{display:grid;gap:11px;margin-top:24px;padding-top:20px;border-top:1px solid #ffffff14}
.hero-checklist li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:#eee7e5}
.hero-checklist b{
  display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;
  background:#bc253133;border:1px solid #bc253166;color:var(--prata-clara);font-size:10.5px;
}

/* A etiqueta sai da borda do painel: é o que diz, de relance, como ele é feito. */
.hero-chip{
  position:absolute;left:-26px;bottom:-22px;
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;
  background:#fff;color:var(--ink);font-size:13.5px;font-weight:500;
  box-shadow:0 20px 44px -12px #000000b3;
  animation:boia 7s ease-in-out infinite;
}
.hero-chip span{font-family:var(--mono);font-size:12.5px;color:var(--bordo-vivo)}
@keyframes boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;padding:0 30px;border-radius:14px;
  font-size:15.5px;font-weight:500;
  transition:transform .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease),color .3s var(--ease);
}
.btn-primario{background:#fff;color:var(--ink)}
.btn-primario:hover{background:var(--bordo);color:#fff;transform:translateY(-2px)}
.btn-fantasma{border:1px solid #ffffff33;color:#fff}
.btn-fantasma:hover{border-color:#fff;background:#ffffff12;transform:translateY(-2px)}
.btn-escuro{background:var(--ink);color:#fff}
.btn-escuro:hover{background:var(--bordo);transform:translateY(-2px)}
.btn-claro{border:1px solid var(--line);color:var(--ink);background:#fff}
.btn-claro:hover{border-color:var(--ink);transform:translateY(-2px)}
.hero-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 36px;
  margin-top:clamp(56px,7vw,96px);padding-top:22px;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:11.5px;color:var(--apoio-dark);
  letter-spacing:.09em;text-transform:uppercase;
}

/* ---------- 6. Faixa de especialidades ---------- */
.faixa{
  overflow:hidden;background:var(--ink);color:#fff;
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  padding:24px 0;
}
.faixa-trilho{display:flex;width:max-content;animation:corre 52s linear infinite}
.faixa-trilho span{
  display:flex;align-items:center;gap:28px;padding-right:28px;white-space:nowrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa4;
}
.faixa-trilho b{font-weight:400;color:#eee7e5}
.faixa-trilho i{width:4px;height:4px;border-radius:50%;background:var(--bordo-brasa);flex:none}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.faixa:hover .faixa-trilho{animation-play-state:paused}

/* ---------- 7. Blocos de seção ---------- */
.secao{padding:var(--pad-y) var(--pad-x)}
.secao--clara{background:var(--paper)}
.secao--branca{background:#fff}
.secao--alt{background:var(--paper-2)}
.secao--escura{background:var(--ink);color:#fff}
.secao--escura h2,.secao--escura h3{color:#fff}

/* Cada seção respira --pad-y em cima e embaixo, então o encontro de duas soma
   o dobro: mais de 300px em tela grande. Quando a cor muda, essa faixa lê como
   respiro, porque a troca de fundo pontua o corte. Entre duas seções do MESMO
   fundo não há corte nenhum — e o mesmo vazio lê como falha de renderização.
   Ali o encontro vale por um respiro só. */
.secao--alt + .secao--alt,
.secao--branca + .secao--branca,
.secao--clara + .secao--clara,
.secao--escura + .secao--escura{padding-top:0}
.secao--escura .section-head>p,.secao--escura .rotulo{color:var(--muted-dark)}

.section-head{display:flex;justify-content:space-between;align-items:end;gap:56px;margin-bottom:72px}
.section-head h2{
  margin:20px 0 0;font-size:clamp(30px,3.8vw,54px);
  line-height:1.06;letter-spacing:-.03em;max-width:16ch;
}
.section-head>p{max-width:42ch;color:var(--muted);font-size:16.5px;line-height:1.7}
.rotulo{
  display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.rotulo i{width:5px;height:5px;border-radius:50%;background:var(--bordo-vivo);flex:none}

/* ---------- 8. Sócios ----------
   A seção mora perto do fim: a página é sobre o cliente, e quem assina entra
   no final como garantia. Cada sócio tem o seu retrato DENTRO do próprio
   cartão — antes o retrato do Filipe ancorava o bloco por fora e a Débora
   ficava sem foto, o que dava peso diferente a um e a outro.
   ------------------------------------------------------------------------- */
/* Um sócio sob o outro, começando pelo Filipe. Empilhados, os cartões ganham
   largura — mas em 1280px a linha de texto passaria de cem caracteres, longe
   demais para ler. Por isso a coluna é contida e centrada: sobram cerca de 75
   caracteres por linha, que é onde a leitura fica confortável. */
/* Os cartões alcançam as mesmas extremidades do texto da seção: começam onde
   o título começa e terminam onde a linha de apoio termina. A foto cresce
   junto, para o retrato não virar uma tira estreita numa faixa larga. */
.socios-cartoes{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}

.socio{
  display:grid;grid-template-columns:clamp(240px,26%,380px) minmax(0,1fr);
  overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:24px;
}
/* A foto encosta nas bordas do cartão e acompanha a altura dele. O recorte é
   travado pelo object-fit: a imagem nunca estica para preencher. */
.socio-foto{margin:0;background:var(--paper-2)}
.socio-foto img{width:100%;height:100%;min-height:100%;object-fit:cover;object-position:center 18%}
.socio-texto{padding:36px 38px}

.socio h3{font-size:23px;letter-spacing:-.025em}
.socio-cargo{
  margin-top:5px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bordo-vivo);
}
.socio p{margin-top:16px;max-width:76ch;font-size:16px;line-height:1.72;color:var(--texto-2)}
/* Com o cartão indo de ponta a ponta da seção, uma coluna só de credenciais
   deixaria metade da faixa vazia. Em duas, a largura ganha vira conteúdo. */
.socio-credenciais{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  columns:2;column-gap:44px;
}
.socio-credenciais li{break-inside:avoid;-webkit-column-break-inside:avoid}
.socio-credenciais li{
  position:relative;padding-left:18px;margin-bottom:8px;
  font-size:14px;color:var(--muted);line-height:1.55;
}
.socio-credenciais li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--bordo-vivo);
}

/* ---------- 9. Vitrine: os projetos atravessando a rolagem ----------
   O palco tem altura de várias telas. Enquanto ele passa, o miolo fica preso
   no lugar e a janela do navegador cruza de um lado ao outro, trocando o site
   que mostra. A ideia vem da cena do balão do AJ Play Park, onde o objeto
   percorre a tela junto com o texto.

   Esta é a forma ATIVA, que só entra quando o JavaScript liga a classe
   .vitrine--ativa. Abaixo dela ficam as regras de repouso: sem script, em
   tela estreita ou com animação desligada no sistema, as cenas são apenas
   uma lista — cada projeto com a sua janela e o seu texto, um sob o outro.
   ------------------------------------------------------------------------- */
.vitrine-palco{position:relative;margin-top:72px}

.vitrine-cena{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,4vw,64px);align-items:center;
  padding:56px 0;border-top:1px solid var(--line-dark);
}
.vitrine-cena:first-child{border-top:0;padding-top:0}
/* Em repouso as cenas alternam o lado, para a lista não virar uma coluna só. */
.vitrine-cena:nth-child(even) .vitrine-janela{order:2}
.vitrine-cena:nth-child(even) .vitrine-texto{order:1}

/* ---- a janela ---- */
.vitrine-janela{
  border-radius:16px;overflow:hidden;background:var(--ink-2);
  border:1px solid #ffffff1f;
  box-shadow:0 40px 90px -30px #000000a6,0 0 0 1px #00000030;
}
.vitrine-cromo{
  display:flex;align-items:center;gap:7px;
  padding:11px 15px;background:#ffffff0d;border-bottom:1px solid #ffffff14;
}
.vitrine-cromo i{width:9px;height:9px;border-radius:50%;background:#ffffff26;flex:none}
.vitrine-cromo i:first-child{background:var(--bordo-brasa)}
.vitrine-cromo span{
  margin-left:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--apoio-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vitrine-tela{
  display:block;width:100%;padding:0;position:relative;
  cursor:pointer;background:var(--ink-2);
}
.vitrine-tela img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center}
/* A lupa é o convite: a janela é clicável e abre o site de verdade. */
.vitrine-lupa{
  position:absolute;inset:auto 0 0;padding:44px 18px 16px;
  display:block;text-align:left;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:linear-gradient(transparent,#12050899 62%);
  opacity:0;transition:opacity .3s var(--ease);
}
.vitrine-tela:hover .vitrine-lupa,.vitrine-tela:focus-visible .vitrine-lupa{opacity:1}

/* ---- o texto ---- */
.vitrine-indice{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--prata)}
.vitrine-indice em{font-style:normal;color:var(--apoio-dark)}
.vitrine-etiqueta{
  margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bordo-brasa);
}
.vitrine-texto h3{margin-top:12px;font-size:clamp(26px,2.6vw,38px);color:#fff}
.vitrine-resumo{margin-top:16px;max-width:46ch;color:var(--muted-dark);font-size:16px;line-height:1.72}
.vitrine-pilha{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.vitrine-pilha li{
  padding:6px 13px;border:1px solid var(--line-dark);border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted-dark);
}
.vitrine-abrir{margin-top:30px}

.vitrine-progresso{display:none}

/* ---- forma ativa: o palco preso e a janela em travessia ---- */
.vitrine--ativa .vitrine-palco{
  /* Uma tela por cena, mais uma de folga para a última respirar antes de sair. */
  height:calc(var(--cenas,5) * 86vh + 40vh);
}
.vitrine--ativa .vitrine-fixo{
  position:sticky;top:calc(50vh - min(34vh,300px));
  height:min(70vh,600px);
}
.vitrine--ativa .vitrine-cena{
  position:absolute;inset:0;display:block;padding:0;border:0;
  pointer-events:none;
}
.vitrine--ativa .vitrine-cena[data-ativa]{pointer-events:auto}

/* Quem atravessa é só a janela. Todas as cenas compartilham a mesma posição
   calculada, então ela parece uma janela única cruzando a tela enquanto o site
   que mostra se dissolve de um para o outro.

   O texto NÃO atravessa. Se ele cruzasse no sentido contrário, os dois blocos
   se encontrariam no meio da tela e ficariam um por cima do outro — foi o que
   aconteceu na primeira versão. Em vez disso, cada cena ancora o seu texto no
   lado oposto ao da sua janela e ele apaga enquanto a janela passa: quando a
   janela chega ao outro lado, o texto de lá já acendeu. */
.vitrine--ativa .vitrine-janela{
  position:absolute;top:50%;left:0;width:56%;
  transform:translate3d(var(--janela-x,0),-50%,0);
  opacity:var(--op-janela,1);
  will-change:transform,opacity;
}
.vitrine--ativa .vitrine-texto{
  position:absolute;top:50%;width:40%;
  transform:translate3d(0,calc(-50% + var(--texto-y,0px)),0);
  opacity:var(--op-texto,1);
  will-change:transform,opacity;
}
/* A janela repousa à direita nas cenas ímpares e à esquerda nas pares; o texto
   fica sempre do outro lado. */
.vitrine--ativa .vitrine-cena:nth-child(odd) .vitrine-texto{left:0}
.vitrine--ativa .vitrine-cena:nth-child(even) .vitrine-texto{left:60%}
.vitrine--ativa .vitrine-cena:nth-child(even) .vitrine-janela,
.vitrine--ativa .vitrine-cena:nth-child(even) .vitrine-texto{order:0}

.vitrine--ativa .vitrine-progresso{
  display:block;position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--line-dark);border-radius:2px;overflow:hidden;
}
.vitrine--ativa .vitrine-progresso i{
  display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--bordo),var(--bordo-brasa));
}

/* ---- palco empilhado: a travessia em tela estreita ---- */
/* Abaixo de 760px a janela e o texto não cabem um ao lado do outro: 40% de tela
   não sustentam um título e um resumo. Então o palco empilha — o texto no alto,
   a janela atravessando embaixo dele — e a seção continua sendo uma tela só que
   troca de projeto, em vez de virar cinco blocos altos para rolar. */
@media (max-width:760px){
  .vitrine--ativa .vitrine-palco{height:calc(var(--cenas,5) * 78vh + 30vh)}
  .vitrine--ativa .vitrine-fixo{
    top:calc(var(--topo-menu,120px) + 24px);
    height:min(74vh,640px);
  }
  /* Largura inteira: o lado deixa de existir quando só há uma coluna. */
  .vitrine--ativa .vitrine-cena:nth-child(odd) .vitrine-texto,
  .vitrine--ativa .vitrine-cena:nth-child(even) .vitrine-texto{
    top:0;left:0;right:0;width:auto;
    transform:translate3d(0,var(--texto-y,0px),0);
  }
  /* A janela desce para o pé do palco e fica quase da largura dele; o passeio
     que sobra é curto de propósito, para a travessia não virar um tremor. */
  /* O teto em pixel é o que impede a janela de crescer até encostar no texto na
     ponta larga da faixa: a foto é 16:9, então cada pixel de largura vira meio
     de altura. */
  .vitrine--ativa .vitrine-janela{
    top:auto;bottom:0;width:min(84%,420px);
    transform:translate3d(var(--janela-x,0),0,0);
  }
  /* As etiquetas de tecnologia saem do palco: são o que menos se lê e o que
     mais ocupa altura justamente onde ela falta. Na lista de repouso ficam. */
  .vitrine--ativa .vitrine-pilha{display:none}
}

/* ---------- 10. Frentes de trabalho ---------- */
.frentes-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:8vw;margin-top:0}
/* O número e a frase correm lado a lado: empilhados, o "7+" ficava sozinho no
   alto e a frase começava longe demais dele para os dois se lerem juntos.
   O alinhamento é pela base da primeira linha, não pelo topo da caixa. */
.marco{display:flex;align-items:baseline;gap:clamp(18px,2vw,30px);flex-wrap:wrap}
.big-number{
  flex:none;font-size:clamp(72px,8.4vw,124px);line-height:.82;
  letter-spacing:-.05em;font-weight:600;
}
.big-number sup{font-size:.3em;vertical-align:super;color:var(--bordo-vivo);font-weight:500}
/* Sem largura máxima: a frase ocupa toda a sobra da coluna, de ponta a ponta,
   no mesmo compasso dos parágrafos das frentes logo abaixo. */
.marco-texto{
  flex:1 1 14ch;min-width:0;
  font-size:clamp(18px,1.7vw,23px);line-height:1.3;letter-spacing:-.02em;
}
.marco-texto em{color:var(--muted);font-style:normal}
.frentes li{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:34px 0;border-top:1px solid var(--line)}
.frentes li:last-child{border-bottom:1px solid var(--line)}
.frentes b{font-family:var(--mono);font-size:12.5px;color:var(--bordo-vivo);font-weight:500}
.frentes h3{font-size:20px;letter-spacing:-.02em;margin-bottom:10px}
.frentes p{color:var(--muted);font-size:15.5px;line-height:1.7}
.frentes-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.frentes-tags li{
  display:block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase;
}

/* ---------- 11. Prévia em janela ---------- */
.previa{
  position:fixed;inset:0;z-index:90;display:none;
  padding:clamp(12px,3vw,40px);
  background:#120508e6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.previa[open]{display:grid;place-items:center}
.previa-caixa{
  display:flex;flex-direction:column;overflow:hidden;
  width:min(1200px,100%);height:min(92vh,100%);
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:20px;
  box-shadow:0 40px 100px #00000073;
}
.previa-topo{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex:none;
  padding:16px 20px;border-bottom:1px solid var(--line-dark);color:#fff;
}
.previa-titulo{display:flex;align-items:center;gap:12px;min-width:0}
.previa-titulo strong{font-size:16px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.previa-acoes{display:flex;align-items:center;gap:10px;flex:none}
.previa-fechar{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border:1px solid #ffffff2e;border-radius:11px;color:#fff;font-size:19px;line-height:1;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.previa-fechar:hover{background:#ffffff14;border-color:#ffffff5c}
/* O site do cliente vive aqui dentro e rola sozinho, dentro do próprio quadro:
   é o site funcionando, não uma foto dele. */
.previa-quadro{flex:1;position:relative;background:#fff;overflow:hidden}
.previa-quadro iframe{display:block;width:100%;height:100%;border:0}
.previa-pontos{display:flex;gap:6px;flex:none}
.previa-pontos i{width:9px;height:9px;border-radius:50%;background:#ffffff26}
.previa-pontos i:first-child{background:var(--bordo-brasa)}
.previa-carregando{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- 12. Reuniões em carrossel ----------
   Cinco prints num grid deixavam sempre um órfão na última linha. Em laço eles
   passam sozinhos, sem linha quebrada e sem fim visível, e cabem quantos forem.
   O trilho tem os prints duas vezes: quando a primeira volta acaba, o
   deslocamento zera na largura de um conjunto e a emenda não aparece.
   ------------------------------------------------------------------------- */
.reunioes-carrossel{
  margin-top:64px;overflow:hidden;cursor:grab;
  /* As pontas somem no fundo da seção: o laço não tem começo nem fim à vista. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.reunioes-carrossel.arrastando{cursor:grabbing}
.reunioes-trilho{display:flex;gap:20px;width:max-content;will-change:transform}
.reunioes-conjunto{display:flex;gap:20px}

.reuniao{
  flex:none;width:380px;overflow:hidden;
  border-radius:18px;border:1px solid var(--line-dark);background:var(--ink-2);
}
.reuniao img{
  width:100%;height:auto;aspect-ratio:1200/620;object-fit:cover;object-position:center;
  /* Sem isto o arrasto vira arrasto de imagem no lugar do carrossel. */
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
.reuniao figcaption{
  padding:16px 18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);
}

/* ---------- 13. Processo ---------- */
.processo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;
}
.etapa{padding:38px 34px;background:#fff;transition:background .4s var(--ease)}
.etapa:hover{background:var(--paper)}
.etapa b{font-family:var(--mono);font-size:12.5px;color:var(--bordo-vivo)}
.etapa h3{margin:16px 0 11px;font-size:19px;letter-spacing:-.02em}
.etapa p{color:var(--muted);font-size:15px;line-height:1.68}
.prazos{display:flex;flex-wrap:wrap;gap:20px;margin-top:36px}
.prazo{
  flex:1 1 250px;display:flex;align-items:center;gap:18px;
  padding:24px 28px;border:1px solid var(--line);border-radius:18px;background:#fff;
}
.prazo strong{font-size:28px;letter-spacing:-.03em;line-height:1;flex:none}
.prazo span{font-size:14.5px;color:var(--muted);line-height:1.5}

/* ---------- 14. Dúvidas ---------- */
.faq-lista{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:30px 0;font-size:clamp(16.5px,1.7vw,19px);font-weight:500;
  letter-spacing:-.018em;cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:none;width:13px;height:13px;
  background:
    linear-gradient(currentColor,currentColor) center/13px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 13px no-repeat;
  transition:transform .35s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-corpo{padding:0 0 32px;max-width:75ch;color:var(--texto-2);font-size:16px;line-height:1.78}
.faq-corpo p + p{margin-top:16px}

/* ---------- 15. Contato ---------- */
.contato{text-align:center}
.contato h2{
  max-width:20ch;margin:24px auto 0;
  font-size:clamp(32px,4.6vw,68px);line-height:1.06;letter-spacing:-.035em;
}
.contato h2 em{color:var(--prata-clara);font-style:normal}
.contato .rotulo{justify-content:center}
.contato-acoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:44px}
.contato-canais{
  display:flex;flex-wrap:wrap;gap:20px 68px;justify-content:center;
  margin-top:76px;padding-top:44px;border-top:1px solid var(--line-dark);text-align:left;
}
.canal span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--apoio-dark)}
.canal a,.canal p{display:block;margin-top:8px;font-size:17px;letter-spacing:-.01em}
.canal a{transition:color .3s var(--ease)}
.canal a:hover{color:var(--prata-clara)}

/* ---------- 16. Rodapé ---------- */
.rodape{background:var(--ink-3);color:var(--muted-dark);padding:80px var(--pad-x) 48px;font-size:14px}
.rodape-topo{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:88px;padding-bottom:48px;border-bottom:1px solid var(--line-dark)}
.rodape-marca{display:flex;align-items:center;gap:12px;color:#fff;font-weight:600;font-size:18px;letter-spacing:-.015em}
.rodape-marca img{width:36px;height:36px;border-radius:10px}
.rodape p{margin-top:20px;line-height:1.72;max-width:46ch}
.rodape h4{color:#fff;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono);font-weight:500;margin-bottom:20px}
.rodape li{margin-bottom:12px}
.rodape a{transition:color .3s var(--ease)}
.rodape a:hover{color:#fff}
.rodape-base{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;padding-top:34px;font-size:13px;line-height:1.75}
/* Precisa vencer o ".rodape p" acima, que é mais específico: escrita só com a
   classe, esta linha nunca chegou a valer e o bloco legal ficava preso na
   medida de 46ch — estreita a ponto de jogar o fim do endereço para uma quarta
   linha, com um "SP." sozinho. */
.rodape .rodape-legal{max-width:66ch}
.rodape-links{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}

/* ---------- 17. WhatsApp ---------- */
.zap{
  position:fixed;right:22px;bottom:22px;z-index:35;
  display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  background:#1faf54;border-radius:50%;box-shadow:0 12px 30px #00000040;
  transition:transform .3s var(--ease);
}
.zap:hover{transform:scale(1.06)}
.zap svg{width:29px;height:29px;fill:#fff}

/* ---------- 18. Cookies ---------- */
.aviso-cookies{
  position:fixed;left:18px;right:18px;bottom:18px;z-index:70;
  background:#1f0d12f5;color:#dbd2d4;border:1px solid #ffffff26;border-radius:18px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 20px 50px #0000005c;
}
.aviso-cookies-conteudo{
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
  max-width:1240px;margin:0 auto;padding:22px 26px;
}
.aviso-cookies h2{font-size:16px;color:#fff;margin-bottom:8px;letter-spacing:-.015em}
.aviso-cookies p{font-size:13.5px;line-height:1.62;max-width:76ch}
.aviso-cookies a{color:#fff;text-decoration:underline}
.aviso-cookies-acoes{display:flex;gap:10px;flex:none}
.botao-cookies{padding:12px 22px;border-radius:11px;font-size:14px;font-weight:500;transition:.3s var(--ease)}
.botao-cookies--recusar{border:1px solid #ffffff33;color:#fff}
.botao-cookies--recusar:hover{background:#ffffff12}
.botao-cookies--aceitar{background:#fff;color:var(--ink)}
.botao-cookies--aceitar:hover{background:var(--bordo);color:#fff}

/* ---------- 19. Revelação ---------- */
.revelar{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.revelar.visivel{opacity:1;transform:none}
/* Entrada do hero: cada linha do título sobe saindo do desfoque, em cascata, e
   o painel chega por último, depois que o título já disse o que é. */
.hero-selo,.hero-linha,.hero-lead,.hero-actions,.hero-visual,.hero-base{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
.hero-linha{filter:blur(12px)}
.hero-visual{transform:translateY(48px)}
.pronto .hero-selo,.pronto .hero-linha,.pronto .hero-lead,.pronto .hero-actions,
.pronto .hero-visual,.pronto .hero-base{opacity:1;transform:none;filter:none}
.pronto .hero-selo{transition-delay:.05s}
.pronto .hero-linha:nth-child(1){transition-delay:.12s}
.pronto .hero-linha:nth-child(2){transition-delay:.22s}
.pronto .hero-linha:nth-child(3){transition-delay:.32s}
.pronto .hero-lead{transition-delay:.45s}
.pronto .hero-actions{transition-delay:.55s}
.pronto .hero-visual{transition-delay:.4s;transition-duration:1.2s}
.pronto .hero-base{transition-delay:.7s}
.hero-checklist li{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pronto .hero-checklist li{opacity:1;transform:none}
.pronto .hero-checklist li:nth-child(1){transition-delay:1.1s}
.pronto .hero-checklist li:nth-child(2){transition-delay:1.25s}
.pronto .hero-checklist li:nth-child(3){transition-delay:1.4s}
.pronto .hero-checklist li:nth-child(4){transition-delay:1.55s}

/* Estas duas classes existem porque a política de segurança do site recusa
   estilo em atributo: sem 'unsafe-inline' em style-src, um style="..." no HTML
   é simplesmente ignorado pelo navegador — em silêncio. */
.rotulo--centro{justify-content:center;color:var(--apoio-dark)}
.rodape-base--limpa{border:0;padding-top:0}

/* ---------- 20. Páginas de texto ---------- */
.pagina-texto{max-width:78ch;margin:0 auto;padding:160px 28px 110px}
.pagina-texto h1{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.035em;line-height:1.06}
.pagina-texto .atualizado{margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.pagina-texto h2{margin:56px 0 18px;font-size:clamp(20px,2.4vw,27px);letter-spacing:-.025em}
.pagina-texto h3{margin:38px 0 12px;font-size:19px;letter-spacing:-.02em}
/* A página de privacidade reúne três documentos. Cada um abre com este título,
   que precisa se destacar das cláusulas numeradas logo abaixo dele. */
.pagina-texto .pagina-doc{
  margin-top:64px;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;line-height:1.1;
}
/* Depois do filete o respiro já veio dele; somar os dois abriria um buraco. */
.pagina-divisor + .pagina-doc{margin-top:0}
.pagina-texto .pagina-doc + .atualizado{margin-top:14px}
.pagina-divisor{
  margin:88px 0 64px;border:0;height:1px;
  background:linear-gradient(90deg,var(--bordo-vivo),transparent);
}
.pagina-texto p,.pagina-texto li{color:var(--texto-2);font-size:16.5px;line-height:1.8}
.pagina-texto p{margin-top:16px}
.pagina-texto ul{margin-top:16px}
.pagina-texto ul li{position:relative;padding-left:24px;margin-bottom:11px}
.pagina-texto ul li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--bordo-vivo)}
.pagina-texto a{color:var(--bordo);text-decoration:underline;text-underline-offset:3px}
.pagina-topo{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px var(--pad-x);background:#1a0a0ef2;color:#fff;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.pagina-topo a{transition:opacity .3s var(--ease)}
.pagina-topo a:hover{opacity:.75}
.pagina-centro{min-height:100vh;display:grid;place-items:center;text-align:center;padding:130px 28px;background:var(--ink);color:#fff}
.pagina-centro h1{font-size:clamp(36px,6vw,80px);letter-spacing:-.04em;line-height:1.04}
.pagina-centro p{margin:26px auto 0;max-width:52ch;color:var(--muted-dark);font-size:17px}
.pagina-centro .contato-acoes{margin-top:42px}

/* ---------- 21. Responsivo ---------- */
@media (max-width:1080px){
  /* Abaixo do desktop o painel deixa de inclinar: com menos espaço, a
     perspectiva só parece torta. O arranjo de cada faixa de tablet vem logo
     depois deste bloco. */
  .hero{min-height:0}
  .hero-painel{transform:none}
  .frentes-grid{grid-template-columns:1fr;gap:48px}
  /* Empilhado, o marco vira uma linha de largura inteira: o vão entre o número
     e a frase copia o da lista abaixo (56px do índice + 22px), então a frase
     começa na mesma vertical dos parágrafos das frentes. */
  .marco{gap:22px}
  .big-number{min-width:56px}
  .socio{grid-template-columns:230px minmax(0,1fr)}
  .processo-grid{grid-template-columns:repeat(2,1fr)}
  /* Em duas colunas "Redes" caía sozinho na linha de baixo, embaixo do texto
     da marca. As três colunas continuam, com o vão ainda largo o bastante para
     separá-las à vista: é o vão que diz que são três listas, e não uma. */
  .rodape-topo{grid-template-columns:1.25fr 1fr 1fr;gap:64px}
  .section-head{display:block}
  .section-head>p{margin-top:28px;max-width:none}
  .section-head h2{max-width:none}
}

/* ---- Hero no tablet ----
   Empilhar aqui como no celular deixava metade da largura vazia ao lado do
   painel. Tablet largo (iPad Pro em pé, tablets deitados) mantém as duas
   colunas do desktop, só mais compactas; tablet em pé empilha, mas o painel
   ocupa a largura inteira e o título cresce para segurar a composição. */
@media (min-width:881px) and (max-width:1080px){
  .hero-grade{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px}
  .hero-titulo{font-size:clamp(48px,6.2vw,66px)}
  .hero-lead{font-size:16.5px}
  /* A folga de baixo é onde a etiqueta assenta sem cobrir o último item. */
  .hero-painel-corpo{padding:20px 18px 40px}
  .hero-notas{gap:6px}
  .hero-anel{width:56px;height:56px}
  .hero-anel b{font-size:16px}
  .hero-nota>span:last-child{font-size:11px}
  .hero-checklist li{gap:10px;font-size:13.5px}
  .hero-chip{left:-18px;bottom:-20px}
  .hero-base{margin-top:64px}
}
@media (min-width:561px) and (max-width:880px){
  .hero-grade{grid-template-columns:1fr;gap:56px}
  .hero-titulo{font-size:clamp(52px,8.4vw,72px)}
  .hero-lead{max-width:60ch}
  .hero-visual{width:100%}
  .hero-painel-corpo{padding:26px 28px 44px}
  .hero-anel{width:72px;height:72px}
  .hero-anel b{font-size:20px}
  .hero-chip{left:auto;right:20px}
  .hero-base{margin-top:72px}
}

/* Abaixo de 900px a lista de repouso vira uma coluna só. Isso é o que se vê
   quando a travessia está desligada por preferência do sistema; com ela ligada,
   quem manda é o bloco .vitrine--ativa acima. */
@media (max-width:900px){
  /* Aqui o bloco legal e os links já não cabem lado a lado e cada um fica com a
     sua linha. Sozinha na linha, a medida que separava os dois só deixava sobra
     à direita: solta, a linha inteira é usada. */
  .rodape .rodape-legal{max-width:none}
  .vitrine-cena{grid-template-columns:1fr;gap:28px;padding:44px 0}
  .vitrine-cena:nth-child(even) .vitrine-janela{order:0}
  .vitrine-cena:nth-child(even) .vitrine-texto{order:0}
  /* Sem ponteiro não há hover: o convite fica sempre à vista, mas discreto —
     ele cobre a captura do site que o visitante veio ver. */
  .vitrine-lupa{opacity:1;padding:26px 14px 12px;font-size:10.5px}
  .reuniao{width:300px}
}

/* ---- Celular e tablet: o menu inteiro à vista, sem sanduíche ----
   O botão sanduíche esconde o percurso da página atrás de um clique. Aqui a
   pílula abre em duas linhas — marca e chamada em cima, os links embaixo — e
   os links viram uma faixa que rola de lado quando a tela é estreita demais
   para todos. Rolar é melhor que espremer: o texto nunca encolhe nem quebra,
   e nada fica por cima de nada. */
@media (max-width:880px){
  html{scroll-padding-top:132px}

  .nav-shell{
    top:12px;height:auto;padding:10px 12px 8px;
    flex-wrap:wrap;row-gap:8px;
    width:min(1180px,100% - 24px);
  }
  /* Escopadas na pílula de propósito: .nav-marca também é usada no topo das
     páginas de texto, e sem o .nav-shell na frente a ordem vazava para lá e
     jogava o logotipo para a direita. */
  .nav-shell .nav-marca{order:1;font-size:16px}
  .nav-shell .nav-cta{order:2;height:40px;padding:0 17px;font-size:14px}

  .nav-shell .nav-links{
    order:3;width:100%;
    gap:16px;padding:2px 2px 4px;
    overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  /* A ponta só esmaece quando há mais menu do que cabe. Com a máscara fixa, o
     último item aparecia apagado mesmo quando os cinco cabiam inteiros — quem
     olhava achava que o menu estava cortado. Quem mede é o JavaScript. */
  .nav-links.tem-mais{
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
    mask-image:linear-gradient(90deg,#000 90%,transparent);
  }
  .nav-links a{font-size:13.5px;white-space:nowrap;flex:none;opacity:.8}

  .hero{padding:170px var(--pad-x) 32px}
  .hero-feixe{width:800px;height:800px;right:-420px;top:62%}
  .processo-grid{grid-template-columns:1fr}
  .contato-canais{gap:26px;justify-content:flex-start}
}

/* Nas telas mais estreitas, o último item ainda ficava 30px para fora. Ganhar
   a margem da pílula e apertar um pouco o vão resolve sem encolher a leitura. */
@media (max-width:400px){
  .nav-shell{width:min(1180px,100% - 16px);padding:10px 10px 8px}
  /* Mesmo escopo da regra de 880px, senão aquela vence pela especificidade e
     o vão maior volta, deixando o último item para fora. */
  .nav-shell .nav-links{gap:13px}
  .nav-shell .nav-links a{font-size:13px}
}

@media (max-width:560px){
  :root{--pad-x:20px}
  .socio{grid-template-columns:1fr}
  .socio-credenciais{columns:1}
  .socio-foto img{aspect-ratio:16/10;height:auto;object-position:center 16%}
  .socio-texto{padding:26px 24px}
  /* No celular as três colunas não cabem: a marca toma a linha inteira e as
     duas listas seguem em par — são links curtos, e empilhá-las só alongaria
     a rolagem. Ocupando a linha toda, o texto da marca larga a medida curta
     que fazia sentido em coluna e corre de ponta a ponta, como o resto. */
  .rodape-topo{grid-template-columns:1fr 1fr;gap:34px 32px}
  .rodape-sobre{grid-column:1/-1}
  .rodape-sobre p{max-width:none}
  .aviso-cookies-conteudo{padding:20px}
  .aviso-cookies-acoes{width:100%}
  .botao-cookies{flex:1}
  .frentes li{grid-template-columns:1fr;gap:10px}
  .previa-caixa{height:100%;border-radius:14px}
  .vitrine-abrir{width:100%;justify-content:center}
  .reuniao{width:264px}
  /* Celular: uma coluna só, o painel abaixo do texto. É o mesmo arranjo de
     antes da faixa de tablet ganhar regras próprias. */
  .hero-grade{grid-template-columns:1fr;gap:64px}
  .hero-visual{width:100%}
  .hero-chip{left:auto}
  .hero-painel-corpo{padding:20px 16px}
  .hero-notas{gap:6px}
  .hero-anel{width:54px;height:54px}
  .hero-anel b{font-size:15.5px}
  .hero-nota>span:last-child{font-size:11px}
  .hero-checklist li{font-size:13.5px}
  .hero-chip{right:8px;bottom:-20px;font-size:12.5px;padding:10px 14px}
  .hero-base{flex-direction:column}
}
@media (max-width:400px){
  .hero-titulo{font-size:36px}
}

/* ---------- 22. Preferências ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .revelar,.hero-selo,.hero-linha,.hero-lead,.hero-actions,.hero-visual,.hero-base,
  .hero-checklist li{opacity:1;transform:none;filter:none}
  .hero-painel{transform:none}
  .faixa-trilho{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
  /* A vitrine já fica na forma de lista pelo JavaScript; isto garante o mesmo
     resultado caso a preferência mude com a página aberta. */
  .vitrine-cena{position:static;opacity:1}
  .vitrine-janela,.vitrine-texto{position:static;width:auto;transform:none}
  /* O carrossel para de andar sozinho e vira uma faixa que se arrasta. */
  .reunioes-carrossel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media print{
  .nav-shell,.zap,.aviso-cookies,.page-progress,.hero-fundo,.previa,.faixa{display:none!important}
  .vitrine-cena{position:static;opacity:1;page-break-inside:avoid}
  .vitrine-janela,.vitrine-texto{position:static;width:auto;transform:none}
  body{background:#fff;color:#000}
}

/* ---------- 23. Diagnóstico digital ----------
   A seção nasce com [hidden] e só aparece quando o painel liga o módulo
   (config-publica.js traz o endereço da API). Tudo aqui dentro é desenhado
   pelo assets/js/diagnostico.js; os botões são os .btn do resto do site.
   ------------------------------------------------------------------------- */
.diagnostico{position:relative;overflow:hidden;isolation:isolate}
.diagnostico[hidden]{display:none}
.diagnostico-feixe{
  position:absolute;z-index:-1;top:-10%;left:-420px;width:900px;height:900px;border-radius:50%;
  background:conic-gradient(from 20deg,transparent 0 20%,#7b000180 32%,#bc253140 40%,transparent 52%);
  filter:blur(80px);opacity:.7;pointer-events:none;
}
.diag{
  position:relative;min-height:440px;padding:clamp(24px,4vw,52px);
  border:1px solid #ffffff1f;border-radius:28px;
  background:linear-gradient(160deg,#ffffff12,#ffffff04 60%);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 50px 110px -50px #000000d9,inset 0 1px 0 #ffffff14;
}
.diag-tela{animation:diag-entra .5s var(--ease)}
@keyframes diag-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.diag-rotulo{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}
.diag-titulo{margin-top:14px;max-width:26ch;font-size:clamp(24px,2.8vw,36px);font-weight:600;line-height:1.15;letter-spacing:-.03em;color:#fff}
.diag-titulo:focus{outline:none}
.diag-titulo--menor{max-width:34ch;font-size:clamp(20px,2vw,26px)}
.diag-ajuda{margin-top:12px;max-width:60ch;font-size:15.5px;line-height:1.6;color:var(--muted-dark)}
.diag-nota-rodape{margin-top:16px;font-size:13.5px;color:var(--apoio-dark)}
.diag-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.diag-erro{margin-top:16px;padding:12px 14px;border:1px solid #bc253166;border-radius:12px;background:#9c14212b;color:#ffb3b8;font-size:14.5px}
.diag-erro[hidden]{display:none}

/* Início */
.diag-inicio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,56px);align-items:center}
.diag-promessas{display:grid;gap:12px;margin:24px 0 32px}
.diag-promessas li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.55;color:#eee7e5}
.diag-promessas li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bordo-brasa)}
.diag-amostra{padding:24px;border:1px solid #ffffff1f;border-radius:20px;background:#00000038}
.diag-amostra-rotulo{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--apoio-dark)}
.diag-amostra-nota{display:flex;align-items:baseline;gap:12px;margin:10px 0 18px}
.diag-amostra-nota b{font-size:56px;font-weight:600;line-height:1;letter-spacing:-.05em;color:#fff}
.diag-amostra-nota span{font-size:15px;color:var(--prata)}
.diag-amostra-pilar{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;margin-top:10px;font-size:13px;color:var(--muted-dark)}

/* Barras */
.diag-barra{display:block;height:6px;border-radius:6px;background:#ffffff14;overflow:hidden}
.diag-barra i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--bordo),var(--bordo-brasa));transition:width 1.2s var(--ease)}

/* Sobre o negócio */
.diag-segmentos{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;border:0}
.diag-segmentos legend{margin-bottom:12px;font-size:14px;color:var(--muted-dark)}
.diag-chip{position:relative;cursor:pointer}
.diag-chip input{position:absolute;opacity:0;pointer-events:none}
.diag-chip span{
  display:inline-flex;padding:9px 15px;border:1px solid #ffffff26;border-radius:999px;font-size:14px;color:#eee7e5;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.diag-chip:hover span{border-color:#ffffff66}
.diag-chip input:checked+span{border-color:var(--bordo-brasa);background:#bc253133;color:#fff}
.diag-chip input:focus-visible+span{outline:2px solid var(--prata-clara);outline-offset:2px}
.diag-campo{display:block;margin-top:22px}
.diag-campo span{display:block;margin-bottom:8px;font-size:14px;color:var(--muted-dark)}
.diag-campo input{
  width:100%;height:52px;padding:0 16px;border:1px solid #ffffff2b;border-radius:14px;
  background:#00000040;color:#fff;font:inherit;font-size:16px;
}
.diag-campo input:focus{outline:none;border-color:var(--prata)}
.diag-campo small{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--apoio-dark)}

/* Pergunta */
.diag-topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.diag-pilar{padding:4px 12px;border:1px solid #bc253166;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#ffb3b8}
.diag-progresso{height:4px;margin-top:14px;border-radius:4px;background:#ffffff14;overflow:hidden}
.diag-progresso i{display:block;height:100%;background:linear-gradient(90deg,var(--bordo),var(--bordo-brasa));transition:width .5s var(--ease)}
.diag-opcoes{display:grid;gap:10px;margin-top:26px}
.diag-opcao{
  width:100%;padding:17px 20px;border:1px solid #ffffff21;border-radius:16px;
  background:#ffffff08;color:#fff;font-size:16px;line-height:1.4;text-align:left;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.diag-opcao:hover{border-color:#ffffff66;background:#ffffff0f;transform:translateX(3px)}
.diag-opcao.escolhida{border-color:var(--bordo-brasa);background:#bc253138}
.diag-voltar{padding:6px 0;color:var(--muted-dark);font-size:14.5px}
.diag-voltar:hover{color:#fff}
.diag-acoes--voltar{margin-top:20px}

/* Calculando */
.diag-carregando{display:grid;justify-items:center;align-content:center;gap:10px;min-height:320px;text-align:center}
.diag-carregando .diag-titulo,.diag-carregando .diag-ajuda{margin-left:auto;margin-right:auto}
.diag-giro{width:44px;height:44px;border-radius:50%;border:3px solid #ffffff1f;border-top-color:var(--bordo-brasa);animation:diag-gira .9s linear infinite}
@keyframes diag-gira{to{transform:rotate(360deg)}}

/* Resultado */
.diag-resultado-cabeca{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,48px);align-items:center}
.diag-resultado-nota{display:flex;align-items:center;gap:24px}
.diag-anel{position:relative;display:inline-grid;place-items:center;flex:none;width:64px;height:64px}
.diag-anel svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.diag-anel circle{fill:none;stroke-width:4}
.diag-anel-trilho{stroke:#ffffff14}
.diag-anel-valor{stroke:var(--prata-clara);stroke-linecap:round}
.diag-anel b{position:relative;font-size:18px;font-weight:600;color:#fff}
.diag-anel--grande{width:132px;height:132px}
.diag-anel--grande b{font-size:42px;letter-spacing:-.04em}
.diag-anel--mini{width:48px;height:48px}
.diag-anel--mini b{font-size:14px}
.diag-pilares{display:grid;gap:14px}
.diag-pilar-topo{display:flex;justify-content:space-between;margin-bottom:6px;font-size:14px;color:var(--muted-dark)}
.diag-pilar-topo b{font-family:var(--mono);font-weight:500;color:#fff}
.diag-colunas{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:32px}
.diag-caixa{padding:22px;border:1px solid #ffffff1a;border-radius:18px;background:#00000029}
.diag-caixa>p:not(.diag-rotulo){margin-top:10px;font-size:15px;line-height:1.6;color:#eee7e5}
.diag-lista{display:grid;gap:12px;margin:14px 0 0;padding:0;list-style:none}
.diag-lista li{position:relative;padding-left:28px;font-size:15px;line-height:1.55;color:#eee7e5}
.diag-lista--fortes li::before{content:"✓";position:absolute;left:0;top:0;font-weight:600;color:#8fdcae}
.diag-lista--prioridades{counter-reset:prioridade}
.diag-lista--prioridades li{counter-increment:prioridade}
.diag-lista--prioridades li::before{
  content:counter(prioridade);position:absolute;left:0;top:1px;display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;background:#bc253140;font-family:var(--mono);font-size:11px;color:#fff;
}
.diag-tecnico{margin-top:16px}
.diag-tecnico-notas{display:flex;flex-wrap:wrap;gap:16px 28px;margin:16px 0 4px}
.diag-tecnico-item{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted-dark)}

/* Contato para o relatório */
.diag-lead{margin-top:32px;padding:clamp(22px,3vw,32px);border:1px solid #bc253159;border-radius:22px;background:linear-gradient(160deg,#7b000126,#00000029 70%)}
.diag-lead-campos{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:6px}
.diag-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.diag-consentimento{display:flex;align-items:flex-start;gap:12px;margin:22px 0 4px;font-size:14px;line-height:1.55;color:var(--muted-dark);cursor:pointer}
.diag-consentimento input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--bordo-brasa)}
.diag-consentimento a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.diag-lead .btn{margin-top:22px}
.diag-lead .btn:disabled{opacity:.6;cursor:progress;transform:none}

/* Relatório */
.diag-relatorio .diag-titulo{max-width:40ch;font-size:clamp(20px,2.1vw,27px);line-height:1.35}
.diag-relatorio-pilares{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.diag-passos{margin-top:16px}

@media (max-width:860px){
  .diag-inicio,.diag-resultado-cabeca,.diag-colunas,.diag-relatorio-pilares,.diag-lead-campos{grid-template-columns:1fr}
  .diag-amostra{display:none}
}
@media (max-width:560px){
  .diag{border-radius:22px}
  .diag-resultado-nota{flex-direction:column;align-items:flex-start}
  .diag-anel--grande{width:112px;height:112px}
  .diag-opcao{padding:15px 16px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .diag-tela,.diag-giro{animation:none}
  .diag-barra i,.diag-progresso i{transition:none}
}