/* ═══════════════════════════════════════════════════════════════════════════
   Contex OS — folha de estilo
   Vert Systems · 2026

   Sistema escuro em três camadas: fundo (Darkness), folha (Surface) e cartão
   (Surface Elevated). Texto em três forças, borda em hex próprio, e dois
   destaques com papéis fixos: laranja é ação e ênfase, azul é rótulo,
   código e marcação. Tipografia como elemento gráfico.

   Contrastes calculados com scripts/verificar.js do Contex OS. Todo par de
   texto passa em WCAG AA (mínimo 4.5:1). O valor de cada um está anotado ao
   lado do token — se mexer numa cor, recalcular antes de subir.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fontes locais ────────────────────────────────────────────────────────
   Servidas da própria pasta: sem Google Fonts, sem CDN, sem terceiro no
   caminho de renderização. Variáveis — um arquivo cobre toda a faixa de peso. */
@font-face{
  font-family:'Inter Tight';
  src:url('../fonts/InterTight-var.woff2') format('woff2-variations');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/JetBrainsMono-var.woff2') format('woff2-variations');
  font-weight:500 700; font-style:normal; font-display:swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* superfícies — de trás pra frente */
  --escuro:#080A0D;                     /* Darkness: fundo da página e blocos fundos */
  --escuro2:#10151C;                    /* Surface: terminal e árvore dentro do escuro */
  --papel:#10151C;                      /* Surface: a folha */
  --papel2:#18212B;                     /* Surface Elevated: cartões */

  /* texto */
  --tinta:#F4F7F9;                      /* 18.42:1 sobre o fundo; 15.12:1 sobre cartão */
  --corpo:#B9C2CB;                      /* 10.16:1 sobre a folha; 9.02:1 sobre cartão */
  --fraco:#929DA8;                      /*  7.18:1 sobre o fundo; 5.89:1 sobre cartão */
  --fio:#26313D;
  --fio2:#34424F;

  /* Os tokens "Inv" vêm da versão clara, quando bloco escuro invertia a
     paleta. Com a página inteira escura, são os mesmos valores — ficam pra
     não reescrever cada componente. */
  --corpoInv:var(--corpo);
  --fracoInv:var(--fraco);
  --fioInv:var(--fio);

  /* destaque — laranja é ação, azul é rótulo */
  --laranja:#FF6A1A;                    /*  6.92:1 sobre o fundo; 5.68:1 sobre cartão; tinta escura sobre ele 6.92:1 */
  --laranjaBr:#FF8A45;                  /*  8.47:1 sobre o fundo; tinta escura sobre ele 8.47:1 */
  --azul:#6FA9C7;                       /*  7.72:1 sobre o fundo; 6.33:1 sobre cartão */
  --azulBr:#9CCBE0;                     /* 11.36:1 sobre o fundo */

  /* ritmo */
  --dobra:clamp(76px,9vw,132px);        /* respiro vertical entre seções */
  --gut:clamp(20px,5vw,72px);           /* margem lateral da folha */
  --wrap:1240px;
  --raio:28px; --raioM:14px; --raioP:8px;
  --e:cubic-bezier(.2,.7,.3,1);

  --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--escuro);color:var(--tinta);
  font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
/* figure e blockquote trazem margin:1em 40px do navegador — sem zerar aqui, os
   cards de depoimento encolhem e o texto fica espremido em 20 caracteres. */
figure,blockquote{margin:0}

h1,h2,h3{
  margin:0;color:var(--tinta);font-weight:700;
  letter-spacing:-.042em;line-height:1.0;text-wrap:balance;
}
/* A headline de duas frases ocupa mais linhas que a anterior; em 86px ela
   empurrava o botão para fora da primeira tela do notebook (medido: faltavam
   57px). 74px mantém o impacto e devolve o CTA para cima da dobra. */
h1{font-size:clamp(34px,4.6vw,64px)}
h2{font-size:clamp(31px,4.6vw,62px);line-height:1.04}
h3{font-size:clamp(19px,1.6vw,23px);line-height:1.2;letter-spacing:-.022em}

.lead{
  font-size:clamp(17px,1.5vw,22px);font-weight:300;line-height:1.5;
  color:var(--corpo);max-width:36em;text-wrap:pretty;
}
.lead strong{font-weight:600;color:var(--tinta)}

/* ── A folha: o papel com cantos arredondados sobre o fundo escuro ─────── */
.folha{
  background:var(--papel);border-radius:var(--raio);
  margin:10px;overflow:clip;position:relative;
  /* trama de pontos — textura discreta, some se você não procurar */
  background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:23px 23px;
}
@media (max-width:640px){.folha{margin:6px;border-radius:18px}}

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

/* ── Rótulo mono ────────────────────────────────────────────────────────── */
.rot{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fraco);
  display:flex;align-items:center;gap:10px;margin:0 0 20px;
}
.rot b{color:var(--azul);font-weight:700}
.inv .rot{color:var(--fracoInv)}
.inv .rot b{color:var(--azul)}

/* ponto que pulsa — sinaliza "ao vivo", não é enfeite */
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--laranja);flex:none;
  animation:pisca 2.4s var(--e) infinite;
}
.inv .dot{background:var(--laranja)}
@keyframes pisca{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}

/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;
  padding:17px 30px;border-radius:var(--raioP);text-decoration:none;
  /* O tamanho real do alvo não pode depender só do padding: declarado, ele existe
     antes do navegador calcular a linha (WCAG 2.5.8 pede 24px; o piso daqui é 34,
     e 44 no toque, onde quem erra o botão não tenta de novo). */
  min-height:48px;
  border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .35s var(--e),background-color .3s var(--e),box-shadow .35s var(--e);
}
/* Texto escuro sobre o laranja (6.92:1). Branco sobre ele fica em 2.66:1 e reprova. */
.btn-p{background:var(--laranja);color:var(--escuro);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.btn-p:hover{transform:translateY(-2px);background:var(--laranjaBr);box-shadow:0 12px 28px -10px rgba(255,106,26,.5)}
.btn-p:active{transform:translateY(0)}
.btn-g{background:transparent;color:var(--tinta);border-color:var(--fio2)}
.btn-g:hover{border-color:var(--fraco);background:rgba(255,255,255,.05)}
.btn .seta{transition:transform .35s var(--e)}
.btn:hover .seta{transform:translateX(4px)}
.btn-sm{padding:11px 19px;font-size:14px;min-height:40px}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--laranja);outline-offset:3px;border-radius:var(--raioP);
}
.inv a:focus-visible,.inv summary:focus-visible{outline-color:var(--laranja)}

.nota{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--fraco);margin-top:16px}
.inv .nota{color:var(--fracoInv)}

/* ── Topo ───────────────────────────────────────────────────────────────── */
.topo{
  position:sticky;top:0;z-index:60;background:rgba(16,21,28,.82);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s var(--e);
}
.topo.rolou{border-bottom-color:var(--fio)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:13px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.marca-nome{font-weight:700;letter-spacing:-.03em;font-size:18px;line-height:1}
.marca-nome em,.rod-marca em{font-style:normal;color:var(--laranja)}
.marca-nome span{
  display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.18em;color:var(--fraco);margin-top:3px;
}
.topo-meta{
  display:flex;align-items:center;gap:26px;font-family:var(--mono);
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fraco);
}
.topo-meta b{color:var(--tinta);font-weight:700}
@media (max-width:900px){.topo-meta{display:none}}

/* ── Capa: o bloco fundo do topo ─────────────────────────────────────────
   A página inteira é escura, então a capa não inverte mais a paleta: ela só
   desce um degrau de superfície (Darkness em vez de Surface) e o resto segue
   os tokens de sempre. */
.capa{background:var(--escuro);position:relative;color:var(--tinta)}
/* O topo é o começo da folha, então acompanha o arredondamento dela. Fica
   opaco de propósito: sendo sticky, ele viaja por cima da folha inteira. */
.topo.capa{
  background:var(--escuro);
  border-radius:var(--raio) var(--raio) 0 0;
  border-bottom:1px solid transparent;
}
.topo.capa.rolou{border-bottom-color:var(--fio)}
@media (max-width:640px){.topo.capa{border-radius:18px 18px 0 0}}
.capa .btn-g:hover{background:rgba(255,255,255,.06)}
.capa .marca-nome span{color:var(--fraco)}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(36px,4.4vw,64px) clamp(44px,5.6vw,84px)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,64px);align-items:center}
.hero-grid>*{min-width:0}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero h1{margin-bottom:24px}
.hero h1 span{display:block}
.hero h1 em{font-style:normal;color:var(--laranja)}
.hero .lead{margin-bottom:34px;max-width:31em}
.hero-acoes{display:flex;flex-wrap:wrap;gap:13px;align-items:center}

/* ── Visual do hero: foto + teia de pontos ──────────────────────────────
   A foto tem fundo preto chapado. Com mix-blend-mode:screen o preto some
   contra o escuro da capa e a esfera passa a flutuar, sem recorte nem PNG
   com transparência. */
/* Nenhum ancestral daqui até o fundo escuro pode criar contexto de
   empilhamento (z-index, opacity < 1, transform, filter): qualquer um deles
   isola o mix-blend-mode e o preto da foto volta a aparecer como moldura. */
.hero-visual{position:relative;display:grid;place-items:center;min-width:0}
/* Nada de z-index aqui: z-index em elemento posicionado cria contexto de
   empilhamento, e contexto próprio isola o mix-blend-mode — era o que fazia
   o retângulo preto da foto continuar aparecendo. A ordem de pintura sai do
   DOM: a <picture> é estática e pinta primeiro, o canvas é posicionado e
   pinta por cima. */
.hero-visual picture{display:block;width:100%}
/* O aumento vai por transform na PRÓPRIA img, não por width nem por escala no
   pai: escala no pai criaria contexto de empilhamento e mataria o blend, e
   width maior empurraria a coluna do texto. Como transform não reflui layout,
   a esfera cresce por cima do espaço vazio ao lado — e o que transborda é o
   preto da foto, que o blend já torna invisível. */
.hero-visual img{
  width:100%;height:auto;mix-blend-mode:screen;
  /* url(#plasma) primeiro: o deslocamento age na foto, e só depois vem o
     ajuste de cor. Filtro na PRÓPRIA img não atrapalha o blend — filtro no
     pai atrapalharia. */
  filter:url(#plasma) saturate(1.03) contrast(1.05);
  /* translateY sobe a esfera para alinhar melhor com o bloco de texto. Vai no
     transform, junto do scale, e não em margem: margem reflui e empurraria o
     terminal abaixo. */
  transform:translateY(-7%) scale(1.5);transform-origin:center;
  animation:respira 17s var(--e) infinite;
}
/* A ondulação vem do filtro; esta respiração só empresta um vaivém amplo por
   cima, e roda na GPU, sem custo de recalcular ruído. */
@keyframes respira{
  0%,100%{transform:translateY(-7%)   scale(1.5)  rotate(0deg)}
  50%    {transform:translateY(-8.4%) scale(1.575) rotate(1.7deg)}
}
@keyframes respiraP{
  0%,100%{transform:translateY(-5%)   scale(1.25) rotate(0deg)}
  50%    {transform:translateY(-6.2%) scale(1.305) rotate(1.5deg)}
}
/* svg do filtro: presente no DOM, invisível e fora do fluxo */
svg.fora{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.hero-visual .teia{
  position:absolute;top:-24%;left:-25%;width:150%;height:148%;
  pointer-events:none;opacity:.75;
}
@media (max-width:980px){
  .hero-visual{max-width:520px;margin-inline:auto;width:100%}
  /* aumento menor aqui: a folha corta poucos pixels depois da coluna, e 1.5
     comeria a borda da esfera em vez de mostrá-la maior */
  .hero-visual img{transform:translateY(-5%) scale(1.25);animation-name:respiraP}
}

/* ── Terminal ───────────────────────────────────────────────────────────── */
.term{
  background:var(--escuro);border-radius:var(--raioM);overflow:hidden;
  border:1px solid rgba(255,255,255,.08);max-width:100%;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.3);
}
.term-bar{
  display:flex;align-items:center;gap:7px;padding:12px 17px;
  background:var(--escuro2);border-bottom:1px solid rgba(255,255,255,.07);
}
.term-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);flex:none}
.term-bar span{
  margin-left:8px;font-family:var(--mono);font-size:11.5px;
  color:var(--fracoInv);letter-spacing:.06em;
}
.term-body{
  padding:20px 18px 24px;font-family:var(--mono);font-size:13px;line-height:1.9;
  color:var(--corpoInv);overflow-x:auto;
}
@media (max-width:520px){.term-body{font-size:11.8px;padding:16px 14px 20px}}
.term-body .l{white-space:pre}
.term-body .u{color:var(--tinta);font-weight:500}
.term-body .c{color:var(--fracoInv)}
.term-body .v{color:var(--azulBr)}

/* ── Fita rolante ───────────────────────────────────────────────────────── */
.fita{
  border-block:1px solid var(--fio);background:var(--papel2);
  padding-block:15px;overflow:hidden;position:relative;
}
.fita::before,.fita::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.fita::before{left:0;background:linear-gradient(90deg,var(--papel2),transparent)}
.fita::after{right:0;background:linear-gradient(270deg,var(--papel2),transparent)}
.fita-trilho{display:flex;width:max-content;animation:rola 56s linear infinite}
.fita:hover .fita-trilho{animation-play-state:paused}
.fita-grupo{display:flex;align-items:center;gap:34px;padding-right:34px;flex:none}
.fita-item{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.12em;
  text-transform:lowercase;color:var(--corpo);white-space:nowrap;
  display:flex;align-items:center;gap:34px;
}
.fita-item::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--azul);opacity:.5;flex:none}
@keyframes rola{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── Números ────────────────────────────────────────────────────────────── */
.nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--fio)}
.nums>*{min-width:0}
@media (max-width:760px){.nums{grid-template-columns:repeat(2,1fr)}}
.num{padding:30px 26px 34px;border-left:1px solid var(--fio)}
.num:first-child{border-left:0}
@media (max-width:760px){
  .num{border-top:1px solid var(--fio);padding:24px 18px 26px}
  .num:nth-child(-n+2){border-top:0}
  .num:nth-child(odd){border-left:0}
}
.num b{
  display:block;font-family:var(--mono);font-size:clamp(34px,4vw,52px);font-weight:700;
  letter-spacing:-.05em;line-height:1;color:var(--tinta);
  font-variant-numeric:tabular-nums;margin-bottom:11px;
}
.num span{font-size:14.5px;color:var(--fraco);line-height:1.35;display:block;text-wrap:pretty}

/* ── Cabeça de seção ────────────────────────────────────────────────────── */
/* O limite de medida vai em cada elemento, nunca no bloco: título curto pede
   poucos caracteres por linha, texto corrido pede 60-70. Limitar o contêiner
   espremia os dois no mesmo gabarito e deixava o parágrafo com 13 caracteres
   de largura. */
.cab{margin-bottom:clamp(38px,4.6vw,64px)}
.cab h2{max-width:18ch}
.cab.larga h2{max-width:24ch}
.cab h2+.lead{margin-top:22px}
.cab .lead{max-width:52ch}

/* ── Onde roda: Claude Code ou Codex ─────────────────────────────────────
   Três cartões, sem logotipo de terceiro: o nome em texto basta e evita
   discussão de marca. O <code> repete o tratamento do FAQ. */
.ias{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.ias>*{min-width:0}
@media (max-width:840px){.ias{grid-template-columns:1fr}}
.ia{
  background:var(--papel2);border:1px solid var(--fio);border-radius:var(--raioM);
  padding:26px 24px 24px;
}
.ia .rot{margin-bottom:14px}
.ia h3{font-size:clamp(19px,1.7vw,24px);margin-bottom:10px}
.ia p:last-child{font-size:15.5px;color:var(--corpo);line-height:1.5;text-wrap:pretty}
.ia code{font-family:var(--mono);font-size:13px;background:rgba(111,169,199,.14);color:var(--azul);padding:2px 6px;border-radius:4px}

/* ── Carrossel de aulas ──────────────────────────────────────────────────
   Rolagem nativa com scroll-snap: funciona no dedo, no trackpad, no teclado e
   sem JS. O script só acrescenta setas, marcadores e o giro automático — se
   ele falhar, continua sendo um carrossel que se arrasta. */
.carr{position:relative}
.carr-trilho{
  /* Largura fixa por slide, sem minmax(0,…): o mínimo zero deixava o grid
     espremer os seis slides dentro da tela em vez de criar a rolagem. */
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,32vw,420px);
  gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carr-trilho::-webkit-scrollbar{display:none}
.slide{margin:0;scroll-snap-align:start;min-width:0}
.thumb{
  aspect-ratio:16/9;border-radius:var(--raioM);overflow:hidden;position:relative;
  background:var(--papel2);border:1px solid var(--fio);
  display:flex;align-items:center;justify-content:center;
}
.thumb img{width:100%;height:100%;object-fit:cover}
/* Espaço reservado: fica evidente que falta a imagem, em vez de fingir que há
   uma. Sai junto com o data-vazio quando a print entrar. */
.thumb[data-vazio]{
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0 10px,transparent 10px 20px),
    var(--papel2);
}
.thumb[data-vazio]::after{
  content:attr(data-vazio);position:absolute;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fraco);border:1px dashed var(--fio2);border-radius:6px;padding:8px 14px;
  background:var(--papel);
}
.slide figcaption{
  margin-top:14px;font-size:15.5px;color:var(--corpo);line-height:1.4;text-wrap:pretty;
}
.slide figcaption b{
  display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul);margin-bottom:6px;
}
.carr-ctrl{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,2.6vw,32px)}
.seta-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--fio2);background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--tinta);flex:none;
  transition:border-color .25s var(--e),background-color .25s var(--e),opacity .25s var(--e);
}
.seta-btn:hover:not(:disabled){border-color:var(--tinta);background:var(--papel2)}
.seta-btn:disabled{opacity:.32;cursor:default}
.pontos{display:flex;gap:7px;margin-left:6px}
/* O ponto é 7px por desenho, mas o alvo tem que ser maior que o desenho: o padding
   transparente leva a área clicável a 25px sem mudar o que se vê. */
.ponto{
  width:7px;height:7px;border-radius:50%;background:var(--fio2);border:0;padding:9px;cursor:pointer;
  background-clip:content-box;box-sizing:content-box;
  transition:background-color .3s var(--e),transform .3s var(--e);
}
.ponto[aria-current="true"]{background:var(--laranja);transform:scale(1.25)}

/* ── Bloco escuro ───────────────────────────────────────────────────────── */
.inv{
  background:var(--escuro);color:var(--corpoInv);border-radius:var(--raio);
  border:1px solid var(--fio);
  padding-block:clamp(56px,7vw,104px);margin-block:clamp(10px,1.4vw,18px);
}
.inv h2,.inv h3{color:var(--tinta)}
.inv .lead{color:var(--corpoInv)}
.inv strong{color:var(--tinta)}
.inv .cab{margin-bottom:clamp(34px,4vw,54px)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.duo>*{min-width:0}
@media (max-width:900px){.duo{grid-template-columns:1fr;gap:32px}}

.arv{
  font-family:var(--mono);font-size:13px;line-height:2.05;color:var(--corpoInv);
  background:var(--escuro2);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--raioM);padding:24px 20px;overflow-x:auto;max-width:100%;
}
@media (max-width:520px){.arv{font-size:11.6px;padding:18px 15px;line-height:1.95}}
.arv .l{white-space:pre}
.arv .d{color:var(--azulBr);font-weight:500}
.arv .c{color:var(--fracoInv)}

/* ── Depoimentos ────────────────────────────────────────────────────────── */
.depos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px);
}
.depos>*{min-width:0}
@media (max-width:920px){.depos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.depos{grid-template-columns:1fr}}
.depo{
  background:var(--papel2);border:1px solid var(--fio);border-radius:var(--raioM);
  padding:26px 24px 24px;display:flex;flex-direction:column;gap:18px;
}
.depo-txt{font-size:16.5px;line-height:1.5;color:var(--corpo);text-wrap:pretty;flex:1}
.depo-quem{display:flex;align-items:center;gap:12px}
.depo-foto{
  width:40px;height:40px;border-radius:50%;flex:none;background:var(--papel);
  border:1px solid var(--fio);overflow:hidden;
}
.depo-foto img{width:100%;height:100%;object-fit:cover}
.depo-nome{font-size:15px;font-weight:600;line-height:1.25}
.depo-nome span{display:block;font-size:13px;font-weight:400;color:var(--fraco);margin-top:2px}
/* Card reservado: assumido como vazio, e não disfarçado de depoimento real */
.depo[data-reservado]{border-style:dashed;background:transparent}
.depo[data-reservado] .depo-txt{color:var(--fraco);font-style:italic}

/* ── Cronograma ─────────────────────────────────────────────────────────── */
.crono{border-top:1px solid var(--fioInv)}
.crono li{
  display:grid;grid-template-columns:7ch minmax(0,1fr) auto;gap:clamp(14px,2.6vw,36px);
  padding-block:clamp(20px,2.4vw,28px);border-bottom:1px solid var(--fioInv);align-items:baseline;
}
@media (max-width:760px){
  .crono li{grid-template-columns:7ch 1fr;gap:8px 16px}
  .crono .dur{grid-column:2;justify-self:start}
}
.crono .n{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--azulBr)}
.crono h3{font-size:clamp(17px,1.5vw,21px);font-weight:600;margin-bottom:7px}
.crono p{color:var(--corpoInv);font-size:16px;text-wrap:pretty;max-width:56ch}
.crono .dur{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fracoInv);white-space:nowrap;
}

/* ── Agradecimento ──────────────────────────────────────────────────────── */
.obrig{text-align:center;max-width:58ch;margin-inline:auto}
.obrig h2{max-width:16ch;margin-inline:auto}
.obrig .lead{max-width:46ch}
.obrig .grande{
  font-size:clamp(64px,11vw,148px);font-weight:700;letter-spacing:-.055em;line-height:.9;
  color:var(--tinta);font-variant-numeric:tabular-nums;margin-bottom:18px;
}
.obrig .grande em{font-style:normal;color:var(--laranja)}
.obrig h2{margin-bottom:18px}
.obrig .lead{margin-inline:auto}
.obrig .btn{margin-top:34px}
.avatares{display:flex;justify-content:center;margin:30px 0 0}
.avatares span{
  width:40px;height:40px;border-radius:50%;background:var(--papel2);
  border:2px solid var(--papel);margin-left:-11px;
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--fraco);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.avatares span:first-child{margin-left:0}

/* ── Chamada final solitária ────────────────────────────────────────────── */
.final{text-align:center;padding-block:clamp(84px,11vw,150px)}
.final .rot{justify-content:center}
.final h2{max-width:19ch;margin-inline:auto;margin-bottom:26px}
.final .preco-linha{
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  margin-bottom:34px;color:var(--tinta);font-variant-numeric:tabular-nums;
}
.final .preco-linha .c{font-family:var(--mono);font-size:20px;color:var(--fracoInv)}
.final .preco-linha .v{font-size:clamp(58px,9vw,96px);font-weight:700;letter-spacing:-.055em;line-height:.9}
.final .preco-linha .u{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fracoInv);align-self:center}
.final .btn{font-size:17px;padding:20px 40px}

/* ── Famílias de skills ─────────────────────────────────────────────────── */
.fams{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,3.2vw,44px)}
.fams>*{min-width:0}
@media (max-width:840px){.fams{grid-template-columns:1fr;gap:30px}}
.fam{border-top:1px solid var(--fio);padding-top:20px}
.fam h3{font-size:17px;font-weight:700;margin-bottom:6px;display:flex;align-items:baseline;gap:11px}
.fam h3 i{
  font-style:normal;font-family:var(--mono);font-size:11.5px;font-weight:500;
  color:var(--azul);letter-spacing:.1em;
}
.fam p{font-size:15.5px;color:var(--corpo);margin-bottom:14px;text-wrap:pretty}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  font-family:var(--mono);font-size:12px;color:var(--corpo);
  background:var(--papel2);border:1px solid var(--fio);border-radius:5px;padding:4px 9px;
  transition:border-color .25s var(--e),color .25s var(--e);
}
.fam:hover .tag{border-color:var(--fio2)}

/* ── Oferta ─────────────────────────────────────────────────────────────── */
.oferta{
  display:grid;grid-template-columns:1.1fr .9fr;
  background:var(--papel2);border:1px solid var(--fio);border-radius:var(--raio);overflow:hidden;
}
.oferta>*{min-width:0}
@media (max-width:880px){.oferta{grid-template-columns:1fr}}
.of-main{padding:clamp(28px,3.6vw,46px)}
.of-main h3{margin-bottom:10px}
.of-main>p{color:var(--corpo);margin-bottom:28px;max-width:42ch;text-wrap:pretty}
.inclui{display:grid;gap:15px}
.inclui li{display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;font-size:16.5px}
.inclui svg{margin-top:5px;flex:none}
.inclui b{font-weight:600}
.inclui span{color:var(--corpo)}
.of-lado{
  background:var(--escuro);border-left:1px solid var(--fio);color:var(--corpoInv);padding:clamp(28px,3.6vw,46px);
  display:flex;flex-direction:column;justify-content:center;
}
.of-lado .rot{color:var(--fracoInv);margin-bottom:14px}
.preco{display:flex;align-items:baseline;gap:9px;color:var(--tinta);font-variant-numeric:tabular-nums}
.preco .cifra{font-family:var(--mono);font-size:21px;font-weight:500}
.preco .valor{font-size:clamp(62px,9vw,88px);font-weight:700;letter-spacing:-.055em;line-height:.88}
.of-lado .vista{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--fracoInv);margin:12px 0 26px}
.of-lado .btn{width:100%}
.gar{display:flex;gap:11px;align-items:flex-start;margin-top:20px;font-size:13.5px;color:var(--fracoInv);line-height:1.45}
.gar svg{flex:none;margin-top:2px}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{max-width:860px;border-top:1px solid var(--fio)}
.faq details{border-bottom:1px solid var(--fio)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 48px 24px 0;position:relative;min-height:48px;
  font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-.02em;line-height:1.3;
  transition:color .25s var(--e);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{
  content:"";position:absolute;right:10px;top:50%;background:var(--fraco);
  transition:transform .3s var(--e),background-color .25s var(--e);
}
.faq summary::after{width:13px;height:1.5px;margin-top:-.75px}
.faq summary::before{width:1.5px;height:13px;right:15.75px;margin-top:-6.5px}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq summary:hover{color:var(--laranja)}
.faq summary:hover::after,.faq summary:hover::before{background:var(--laranja)}
.faq-r{padding:0 0 26px;color:var(--corpo);max-width:64ch}
.faq-r p+p{margin-top:13px}
.faq-r code{font-family:var(--mono);font-size:13.5px;background:rgba(111,169,199,.14);color:var(--azul);padding:2px 6px;border-radius:4px}

/* ── Fechamento ─────────────────────────────────────────────────────────── */
.fim h2{max-width:15ch;margin-bottom:24px}
.fim .lead{margin-bottom:36px}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.rodape{padding:clamp(38px,4vw,54px) 0 clamp(30px,3vw,42px);color:var(--fracoInv)}
.rod-in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.rod-marca{display:flex;align-items:center;gap:11px;color:var(--tinta);font-weight:700;letter-spacing:-.03em;font-size:17px;text-decoration:none;min-height:44px}
.rod-lema{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fraco);line-height:1.8;
}
.rod-links{display:flex;flex-wrap:wrap;gap:22px;font-size:15px}
.rod-links a{color:var(--corpoInv);text-decoration:none;transition:color .25s var(--e);display:inline-flex;align-items:center;min-height:44px}
.rod-links a:hover{color:var(--laranjaBr)}
.rod-legal{
  width:100%;border-top:1px solid var(--fioInv);padding-top:22px;margin-top:6px;
  font-family:var(--mono);font-size:11.5px;line-height:1.8;letter-spacing:.03em;
}

/* ── Revelação na entrada ────────────────────────────────────────────────
   O estado invisível só existe dentro de `.js`, que o próprio script põe no
   <html>. Sem isso, um JS que não carrega deixaria metade da página invisível
   para sempre — o conteúdo tem que sobreviver à falha do enfeite. */
.js .rev{opacity:0;transform:translateY(18px);transition:opacity .7s var(--e),transform .7s var(--e)}
.js .rev.vis,.js .revelar-tudo .rev{opacity:1;transform:none}
.revelar-tudo .rev{opacity:1!important;transform:none!important}
.rev-d1{transition-delay:.08s} .rev-d2{transition-delay:.16s} .rev-d3{transition-delay:.24s}

/* ── Alvo no toque ─────────────────────────────────────────────────────────
   No dedo o piso sobe: quem erra o botão no celular raramente tenta de novo.
   Vale onde o ponteiro é grosso (dedo, caneta), não por largura de tela: tablet
   com teclado e celular deitado continuam sendo toque. */
@media (pointer: coarse){
  .btn{min-height:48px}
  .btn-sm{min-height:44px}
  .marca,.rod-marca{min-height:44px}
  .faq summary{min-height:48px}
  .rod-links a{min-height:44px}
  .seta-btn{width:48px;height:48px}
  .ponto{padding:12px}
}

/* Sem animação para quem pediu sem animação — inclusive a fita, que é a que
   mais incomoda quem tem sensibilidade a movimento. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
  .fita-trilho{animation:none;transform:none}
}