/* site.css — a landing da ODESSA ADS.
   Cores e fontes: tokens do OFICIAL (C:\Users\Gustav\Downloads\ODESSA SITE
   OFICIAL\index.html.bak-hero, somente leitura). Estrutura, cabecalho de
   secao, cards e botao: a referencia Framer "Sadewa" (Downloads\TESTE CLONE
   EVATO\odessa_sadewa.framer.website_2026-09-11), Task 14 — o verde dela
   virou o azul da ODESSA. Regua (moldura, medida de leitura, escalas,
   pontos de quebra): Task 13. */

/* reset — OFICIAL linha 24 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --verde:#1B9E4B;
  --papel:#F7F5F2; --papel2:#FFFFFF;
  --tinta:#141312; --corpo:rgba(20,19,18,.66); --fraco:rgba(20,19,18,.40);
  --fio:rgba(20,19,18,.12);
  --acento:#2F6BD8;
  --escuro:#16171A;
  --e:cubic-bezier(.2,.7,.3,1);
  /* os dois cinzas da referencia: o fundo dos cards (#F3F3F3) e o do fio do
     cabecalho de secao e das pastilhas (#E5E5E5) */
  --cinza:#F3F3F3; --cinza2:#E5E5E5;
  /* o fundo do hover do botao de destaque: o azul da marca, mais fundo — o
     mesmo papel do verde-escuro rgb(35,56,2) no botao verde da referencia */
  --acentoFundo:#1F4FB0;

  /* tres larguras: a moldura (grades, titulos, menu), a medida de leitura
     (todo texto corrido) e o gutter */
  --moldura:1200px;
  /* medido: 62ch dava 81 caracteres por linha — a Inter Tight 300 e estreita
     e o "ch" (a largura do zero) superestima a letra media. 55ch da 72. */
  --leitura:55ch;
  --gut:clamp(20px,4vw,48px);

  /* escala de espaco */
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px; --e6:64px; --e7:96px; --e8:128px;
  /* o respiro de cada secao: e7 / e6 / e6 (a referencia usa 100px) */
  --ritmo:var(--e7);

  /* escala de tipo, razao 1,25 a partir do corpo: 14,4 · 18 · 22,5 · 28 ·
     35 · 44 · 55. Os passos de cima entram nos clamp() dos titulos. */
  --t0:14.4px; --t1:18px; --t2:22.5px;
}
/* tres pontos de quebra: desktop >= 1024, tablet 640-1023, celular < 640 */
@media(max-width:1023px){:root{--ritmo:var(--e6)}}
@media(max-width:639px){:root{--t1:17px}}

html{scroll-behavior:auto}
body{background:var(--papel2);color:var(--corpo);font-family:'Inter Tight',sans-serif;
 font-size:var(--t1);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
html,body{overflow-x:clip}

h1,h2,h3,h4{color:var(--tinta);font-weight:700;letter-spacing:-.042em;line-height:1.0;text-wrap:balance}
p{text-wrap:pretty}
img{max-width:100%;display:block}
a{color:inherit}

/* toda secao: branca, de ponta a ponta, sem cartao nem canto arredondado
   (a referencia). O que separa uma da outra e o .rot, logo abaixo. */
.w{max-width:calc(var(--moldura) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
section{padding:var(--ritmo) 0;background:var(--papel2)}

/* o rotulo do hero e da politica — OFICIAL linhas 72-83 */
.lb{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.16em;
 text-transform:uppercase;color:var(--fraco);display:block;margin-bottom:var(--e2)}

/* o cabecalho de secao da referencia: fio de 1px na largura da moldura, uma
   barra curta de 5px por cima dele a esquerda (a base dela alinha com a do
   fio) e o rotulo em mono, 14px, escuro, com a barra "/" na frente — medido
   na referencia: fio #E5E5E5, barra 183x5, rotulo 13px abaixo do fio e 24px
   ate o titulo. */
.rot{position:relative;padding-top:14px;margin-bottom:var(--e3);
 font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;line-height:1;
 text-transform:uppercase;color:var(--tinta)}
/* o fio e a barra sao pseudo-elementos (nao borda) pra poderem se desenhar
   na entrada — ver "Movimento de entrada", no fim da folha */
.rot::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--cinza2);
 transform-origin:0 50%}
.rot::before{content:"";position:absolute;left:0;top:-4px;width:180px;height:5px;background:var(--cinza2)}

/* h1: dentro da moldura de 1200px o de 80 volta a parecer largo */
.d1{font-size:clamp(40px,5vw + 1rem,72px);line-height:.9;letter-spacing:-.035em}
/* h2: o titulo de secao da referencia e grande (64px); aqui para no passo
   de 55 da escala. 20ch quebra em linhas equilibradas. */
.d2{font-size:clamp(32px,3vw + 1rem,55px);max-width:20ch}
.lead{font-size:var(--t2);line-height:1.5;max-width:var(--leitura)}
@media(max-width:639px){.lead{font-size:var(--t1)}}
.txt p{margin-bottom:var(--e3);max-width:var(--leitura)}
.txt p:last-of-type{margin-bottom:0}
strong{color:var(--tinta);font-weight:500}

/* o que vem depois do titulo: grade, tabela ou lista a e5 */
.d2 + .cmp,.d2 + .rev,.d2 + .num,.cabLinha + .psso{margin-top:var(--e5)}

/* linha do titulo com algo a direita (um botao, ou subtitulo e botao), como
   "Latest works / More case studies" na referencia */
.cabLinha{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e4);flex-wrap:wrap}

/* duas colunas: titulo a esquerda (1/3), conteudo a direita (2/3) — o FAQ da
   referencia. Abaixo de 1024px, uma coluna. */
.duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--e5) var(--e3);align-items:start}
@media(max-width:1023px){.duas{grid-template-columns:1fr;gap:var(--e4)}}

/* ===== O botao (.term) — o da referencia, com o verde trocado pelo azul =====
   Corpo de 52px, raio 4px, padding 6/6/6/16, pastilha de 40x40 com raio 2
   (a geometria do botao fica fora da escala de espaco de proposito).

   O hover, copiado do componente da referencia (hQtz91SJi.mjs): transicao
   "spring" de 0,4s sem quique, que em CSS e a curva "ease". Quatro coisas:
   1. o corpo: .termFundo (azul) entra coberto por uma grade de pixels da cor
      de repouso, que somem da direita para a esquerda em 300ms — ligarPixels()
      em site.js, portado do componente "Pixel Transition" da referencia;
   2. a pastilha escurece: o ::before e um quadrado escuro de 10px, borrado, na
      borda direita, que cresce ate cobrir a pastilha inteira (120%);
   3. a seta sai pelo canto de cima a direita;
   4. a segunda seta, azul, entra pelo canto de baixo a esquerda ate o centro.
   A classe .ativo e posta por ligarPixels() (mouse e foco de teclado — nunca
   toque, pra nao "grudar" no celular).

   Uma troca em relacao a referencia: no hover o texto fica BRANCO. La o fundo
   do hover e verde-limao e o texto escurece; sobre o azul, texto escuro da
   3,7:1 e reprova — branco da 5:1. */
.term{--pxCor:var(--tinta);--borda:transparent;
 position:relative;display:inline-flex;align-items:center;gap:8px;height:52px;
 border-radius:4px;padding:6px 6px 6px 16px;overflow:hidden;
 background:var(--tinta);border:0;cursor:pointer;text-decoration:none;max-width:100%;
 -webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* a borda e uma camada POR CIMA, como na referencia (o ":after" do
   data-border do Framer): borda de verdade ficaria de fora do preenchimento
   do hover, que o overflow corta no lado de dentro dela — sobrava um fio da
   cor de repouso em volta do azul */
.term::after{content:"";position:absolute;inset:0;z-index:2;border:1px solid var(--borda);
 border-radius:inherit;pointer-events:none;transition:border-color .4s ease}
/* sem loja publicada o botao nao leva a lugar nenhum: nao finge ser clicavel */
.term[aria-disabled="true"]{cursor:default}
.term .tx{position:relative;z-index:1;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
 white-space:nowrap;font-family:'Inter Tight',sans-serif;font-weight:500;font-size:18px;
 letter-spacing:-.02em;color:var(--papel2);transition:color .25s ease .12s}

/* o corpo do hover e a grade de pixels (montados em JS) */
.termFundo{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;
 background:var(--acento);opacity:0;pointer-events:none}
.term.ativo .termFundo{opacity:1}
.termPx{position:absolute;inset:0;display:grid;
 grid-template-columns:repeat(var(--cols,1),1fr);grid-template-rows:repeat(var(--rows,1),1fr)}
.termPx i{background:var(--pxCor)}
.termPx i.fora{background:transparent}

/* a pastilha */
.term .st{position:relative;z-index:1;flex:none;width:40px;height:40px;border-radius:2px;
 overflow:hidden;background:var(--acento);color:var(--papel2)}
.term .st::before{content:"";position:absolute;right:0;top:-10%;width:120%;height:120%;
 background:var(--tinta);transform:scale(.2083);transform-origin:100% 50%;
 filter:blur(5px);opacity:0;transition:transform .4s ease,filter .4s ease,opacity .4s ease}
.term .seta{position:absolute;left:8px;top:8px;width:24px;height:24px;display:block;
 transition:transform .4s ease,opacity .4s ease}
.term .seta2{color:var(--acento);transform:translate(-32px,32px);opacity:0}
.term.ativo .st::before{transform:scale(1);filter:blur(0);opacity:1}
.term.ativo .seta{transform:translate(32px,-32px);opacity:0}
.term.ativo .seta2{transform:translate(0,0);opacity:1}

/* .sec — o secundario: transparente com borda, pastilha cinza, seta escura.
   No hover a borda fica azul e o corpo se enche de azul do mesmo jeito; os
   pixels tem a cor do fundo da secao (branco), que e o que se ve em repouso. */
.term.sec{--pxCor:var(--papel2);--borda:var(--cinza2);background:transparent}
.term.sec .tx{color:var(--tinta)}
.term.sec .st{background:var(--cinza2);color:var(--tinta)}
.term.sec.ativo{--borda:var(--acento)}
.term.sec.ativo .tx{color:var(--papel2)}
/* o secundario no rodape escuro */
.rod .term.sec{--pxCor:var(--tinta);--borda:rgba(245,245,243,.18)}
.rod .term.sec .tx{color:var(--papel2)}
.rod .term.sec .st{background:rgba(245,245,243,.12);color:var(--papel2)}
.rod .term.sec.ativo{--borda:var(--acento)}

/* .destaque — a variante colorida do rodape da referencia (a "Green" dela),
   em azul: corpo azul, texto branco, pastilha escura com a seta azul. No
   hover os pixels azuis se desfazem revelando o azul mais fundo, a pastilha
   se enche de azul e a seta que entra e escura. So o "Conhecer o Hub", no
   rodape escuro, usa (decisao do dono). Branco sobre o azul: 5:1; sobre o
   azul fundo: 7,5:1. */
.term.destaque{--pxCor:var(--acento);background:var(--acento)}
.term.destaque .tx{color:var(--papel2)}
.term.destaque .termFundo{background:var(--acentoFundo)}
.term.destaque .st{background:var(--tinta);color:var(--acento)}
.term.destaque .st::before{background:var(--acento)}
.term.destaque .seta2{color:var(--tinta)}

/* no celular todo botao ocupa a linha (alvo de polegar) e o rotulo desce pra
   16px: o mais longo, "Em breve na Chrome Web Store", nao cabe inteiro em 18px */
@media(max-width:639px){.term{width:100%}.term .tx{font-size:16px}}
@media(prefers-reduced-motion:reduce){
 .term .tx,.term .st::before,.term .seta{transition:none}
}

/* ===== O hero ===== branco, e so ele: cabe na primeira tela de 1920x1080 */
/* o hero e o bloco cinza da referencia (#F3F3F3): e ele que separa a
   abertura do resto da pagina, terminando logo depois do video, com o canto
   de baixo a direita cortado a 45 graus (decisao do dono) */
.abre{--cardVid:clamp(220px,26vw,320px);--corte:64px;padding:var(--e6) 0 var(--e7);
 background:var(--cinza);
 clip-path:polygon(0 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%)}
/* o secundario sobre o cinza: os pixels do hover tem a cor do fundo, como na
   referencia (la eles sao #F3F3F3 nesse mesmo botao) — brancos, apareceriam */
.abre .term.sec{--pxCor:var(--cinza)}
/* o subtitulo do hero na cor do titulo, como o da referencia (#131313) — no
   corpo a 66% ele ficava apagado sobre o cinza (decisao do dono) */
.abre .lead{color:var(--tinta)}
/* no celular o rotulo e o titulo ficam centralizados, no eixo da marca 3D
   logo abaixo (decisao do dono) */
@media(max-width:639px){.abre{--corte:32px;padding:var(--e5) 0 var(--e6)}.abre .lb,.abre .d1{text-align:center}}

/* desktop: grade de duas colunas — rotulo e h1 a esquerda, card de video a
   direita alinhado ao topo do rotulo, .heroCorpo na linha inteira abaixo */
@media(min-width:1024px){
 .abre>.w{display:grid;grid-template-columns:minmax(0,1fr) var(--cardVid);
  column-gap:var(--e5);align-items:start}
 .abre .lb,.abre .d1{grid-column:1}
 .heroVideo{grid-column:2;grid-row:1 / 3}
 .heroCorpo{grid-column:1 / -1}
}

/* .heroCorpo: marca 3D a esquerda, texto a direita, centrados na vertical.
   Abaixo de 1024px vira coluna. No tablet o texto e os botoes vem primeiro
   e a marca depois; no celular vale a ordem do HTML — titulo, marca 3D,
   frase — decisao do dono. Ali o vao acima e abaixo da marca e o mesmo. */
.heroCorpo{display:flex;align-items:center;gap:var(--e6);margin-top:var(--e4)}
.heroTexto{flex:1;min-width:0}
@media(max-width:1023px){
 .heroCorpo{flex-direction:column;align-items:stretch;gap:var(--e5);margin-top:var(--e4)}
}
@media(min-width:640px) and (max-width:1023px){
 .heroTexto{order:1}
 .heroObjeto{order:2}
}
@media(max-width:639px){.heroCorpo{gap:var(--e4)}}

/* os dois botoes lado a lado, com 8px de vao (a referencia); se nao couberem,
   quebram de linha. No celular empilham e cada um ocupa a linha inteira. */
.heroBotoes{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e4)}
@media(max-width:639px){.heroBotoes{flex-direction:column}}

/* .heroObjeto — a rosacea 3D: teto de 460px no desktop (era 560; o hero
   precisava caber numa tela), 280px no tablet e 220px no celular. O padding
   vertical e o espaco da flutuacao de 22px e da sombra. */
.heroObjeto{position:relative;flex:none;width:min(460px,38vw);padding:18px 0 26px}
@media(max-width:1023px){.heroObjeto{width:min(280px,60vw);margin:0 auto}}
@media(max-width:639px){.heroObjeto{width:min(220px,60vw)}}

.marca3d{display:block;width:100%;height:auto}

/* a sombra: obrigatoria (nota do dono no brief da Task 11) — sem ela o
   objeto so desliza na vertical, nao "flutua" */
.marca3dSombra{position:absolute;left:19%;right:19%;bottom:6%;height:9%;
 border-radius:50%;background:rgba(20,19,18,.28);filter:blur(18px)}

/* Camada 1 — flutuacao: 22px, 6s, alternando; a sombra encolhe e clareia no
   alto do arco. Fica em .marca3dFloat porque .heroObjeto ja anima a entrada
   na mesma propriedade "transform". */
.marca3dFloat{animation:marca3dFlutua 6s ease-in-out infinite alternate}
.marca3dSombra{animation:marca3dSombraFlutua 6s ease-in-out infinite alternate}
@keyframes marca3dFlutua{
 0%{transform:translateY(0) rotate(0deg)}
 100%{transform:translateY(-22px) rotate(2deg)}
}
@keyframes marca3dSombraFlutua{
 0%{transform:scale(1);opacity:.32}
 100%{transform:scale(.82);opacity:.16}
}

/* Camada 2 — inclinacao que segue o cursor (ligarMarca() escreve --rx/--ry).
   O perspective mora no pai porque so alcanca FILHOS DIRETOS. */
.marca3dFloat{perspective:900px}
.marca3dTilt{position:relative;transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg))}

/* Camada 4 (Task 18) — o balanco 3D continuo, em toda tela (no celular e a
   unica rotacao, ja que la a inclinacao pelo cursor nao liga): a marca gira
   devagar pros lados, 12 graus, pendendo um pouco pra frente, num ciclo de
   8s. Vai na propriedade "rotate", separada: ela se soma ao "transform" da
   inclinacao pelo cursor em vez de disputar com ele. O perspective do pai
   (.marca3dFloat) e o que faz o giro ler como 3D. */
.marca3dTilt{rotate:.35 1 0 -12deg;animation:marca3dBalanca 8s ease-in-out infinite}
@keyframes marca3dBalanca{
 0%,100%{rotate:.35 1 0 -12deg}
 50%{rotate:-.35 1 0 12deg}
}

/* Camada 3 — o brilho, mascarado pela propria imagem (--brilhoImg vem de
   ligarMarca() com o currentSrc, pra nao baixar o outro formato). So aparece
   com .pronto, depois da mascara escrita. */
.marca3dBrilho{position:absolute;inset:0;pointer-events:none;opacity:0;
 background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.8) 50%,transparent 56%);
 background-size:260% 260%;
 -webkit-mask-image:var(--brilhoImg,none);mask-image:var(--brilhoImg,none);
 -webkit-mask-size:contain;mask-size:contain;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-position:center;mask-position:center}
/* Task 18: o reflexo passa rapido e pausa (1,6s de travessia a cada 4,5s),
   como luz batendo numa peca que gira — a varredura lenta e continua de
   antes ficava apagada sobre o azul-marinho da marca */
.marca3dBrilho.pronto{opacity:1;animation:marca3dBrilhoVarre 4.5s ease-in-out infinite}
@keyframes marca3dBrilhoVarre{
 0%{background-position:-40% -40%}
 36%,100%{background-position:140% 140%}
}

/* a entrada: uma vez, no carregamento */
.abre .d1{animation:heroTituloEntra .5s var(--e) both}
/* Task 18: a marca entra girando de 35 graus e crescendo ate o lugar (0,9s,
   curva de mola sem quique), no lugar do fade discreto de antes. O
   perspective() vai dentro do transform porque .heroObjeto nao tem um pai
   com perspective. */
.heroObjeto{animation:heroObjetoEntra .9s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes heroTituloEntra{
 from{opacity:0;transform:translateY(12px)}
 to{opacity:1;transform:translateY(0)}
}
@keyframes heroObjetoEntra{
 from{opacity:0;transform:perspective(900px) rotateY(-35deg) scale(.82)}
 to{opacity:1;transform:perspective(900px) rotateY(0deg) scale(1)}
}

@media(prefers-reduced-motion:reduce){
 .abre .d1,.heroObjeto,.marca3dFloat,.marca3dSombra,.marca3dBrilho,.marca3dTilt{animation:none}
 .marca3dTilt{transform:none;rotate:none}
}
@media(hover:none),(pointer:coarse){
 .marca3dTilt{transform:none}
}

/* .heroVideo — o card de video, de canto reto como o "showreel" da
   referencia. Desktop: coluna da direita do hero. Abaixo de 1024px desce pro
   fluxo, com teto de 480px. position:relative ancora o <video> e o play que
   ligarVideo() poe dentro dele. */
.heroVideo{position:relative;width:var(--cardVid);
 aspect-ratio:16/9;background:var(--escuro);
 overflow:hidden;padding:14px;
 display:flex;flex-direction:column;justify-content:space-between}
@media(max-width:1023px){.heroVideo{width:100%;max-width:480px;margin-top:var(--e5)}}
.heroVideoLb{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
 letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,243,.5)}
.heroVideoEmBreve{margin:0;font-size:13px;line-height:1.45;color:rgba(245,245,243,.66);
 max-width:85%}
.heroVideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heroVideoPlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
 width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
 background:rgba(20,19,18,.55);color:var(--papel);display:grid;place-items:center;
 transition:background .3s var(--e)}
@media(hover:hover){.heroVideoPlay:hover{background:rgba(20,19,18,.75)}}
.heroVideoPlay svg{width:18px;height:18px;display:block}

/* o chanfro da referencia: o canto de baixo a direita cortado a 45 graus.
   Nos cards de destaque (a fita, as perguntas do FAQ). */
.chanfro,.ofr,.fq2,.prcCard{clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}

/* ===== O minerador de ofertas: a biblioteca inteira carimbada =====
   O argumento da ferramenta nao e anotar um anuncio: e varrer a pagina toda e
   dizer QUAL olhar. Por isso uma fita de cards deslizando, e so alguns levam a
   moldura de "quente" — igual ao que a extensao faz na biblioteca de verdade.
   1. Os numeros sao os reais dos prints do dono (59/898, 52/1003, 14/4,
      56/114, 34/131). Nao invente anuncio nem estatistica.
   2. So DOIS dos cinco sao quentes: se todos fossem, a ferramenta nao estaria
      escolhendo nada.
   3. O laranja e a unica coisa quente do site, que e azul: e a UI real da
      extensao, com o emoji de fogo.
   Os valores soltos deste bloco sao a miniatura da UI da extensao, nao a
   regua da pagina — ficam fora da escala. A caixa de fora segue a
   referencia (canto reto, chanfro, sem sombra); os cards de dentro sao a UI
   da biblioteca e mantem o raio dela. */
.ofr{--card:clamp(152px,17.5vw,180px);
 position:relative;background:#101114;border:1px solid rgba(245,245,243,.08);
 padding:clamp(14px,1.5vw,20px) 0 clamp(20px,2vw,28px)}

.ofrTopo{display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:0 clamp(14px,1.5vw,20px) clamp(11px,1.2vw,15px)}
.ofrLb,.ofrTag{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
 letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ofrLb{color:rgba(245,245,243,.5);display:flex;align-items:center;gap:8px;min-width:0;
 overflow:hidden;text-overflow:ellipsis}
.ofrLb i{width:7px;height:7px;border-radius:50%;background:var(--acento);flex:none}
.ofrTag{color:#FF6A2C}

/* a fita: a parede de anuncios passando */
.ofrTrilho{overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* sem padding horizontal: o laco em -50% so fecha se a largura for exatamente
   10 cards + 9 vaos. Os 5px do calc sao a metade do vao que falta. */
.ofrFita{display:flex;gap:10px;width:max-content;padding:2px 0;
 animation:ofrAnda 42s linear infinite}
@keyframes ofrAnda{to{transform:translateX(calc(-50% - 5px))}}
@media(hover:hover){.ofrTrilho:hover .ofrFita{animation-play-state:paused}}

.ofrCard{flex:none;width:var(--card);height:clamp(154px,17vw,176px);
 display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:11px;
 background:#15161A;border:1px solid rgba(245,245,243,.09)}
.ofrCard.quente{border-color:rgba(255,106,44,.55);box-shadow:0 0 0 2px rgba(255,106,44,.10)}

.ofrBarra{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ofrOvLb{font-family:'JetBrains Mono',monospace;font-size:7.5px;font-weight:700;
 letter-spacing:.2em;text-transform:uppercase;color:var(--acento)}
.ofrAcoes{display:flex;gap:3px}
.ofrAcoes i{display:grid;place-items:center;width:15px;height:15px;border-radius:4px;
 font-style:normal;font-size:8px;line-height:1;color:rgba(245,245,243,.5);
 background:rgba(245,245,243,.05);border:1px solid rgba(245,245,243,.1)}

.ofrChips{display:flex;flex-wrap:wrap;gap:4px}
.ofrChip{display:inline-flex;align-items:baseline;gap:4px;padding:3.5px 6px;border-radius:5px;
 border:1px solid rgba(245,245,243,.14);background:rgba(245,245,243,.04);
 font-family:'JetBrains Mono',monospace;line-height:1;white-space:nowrap}
.ofrChip b{font-size:10.5px;font-weight:700;letter-spacing:-.02em;color:#F5F5F3}
.ofrChip i{font-style:normal;font-size:7px;font-weight:700;letter-spacing:.1em;
 text-transform:uppercase;color:rgba(245,245,243,.4)}
.ofrChip em{font-style:normal;font-size:8.5px;line-height:1}
.ofrChip.quente{align-items:center;border-color:rgba(255,106,44,.5);background:rgba(255,106,44,.12)}
.ofrChip.quente b{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#FF6A2C}
.ofrChip.pontos{border-color:rgba(233,168,60,.38);background:rgba(233,168,60,.09)}
.ofrChip.pontos b{color:#E9A83C}
.ofrChip.dias{border-color:rgba(91,141,239,.38);background:rgba(91,141,239,.09)}
.ofrChip.dias b{color:#5B8DEF}

.ofrAd{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;
 padding:7px;border-radius:8px;background:#1A1C21;border:1px solid rgba(245,245,243,.06)}
.ofrQuem{display:flex;align-items:center;gap:6px}
.ofrAv{width:17px;height:17px;border-radius:50%;flex:none;background:rgba(245,245,243,.14)}
.ofrQuemTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ofrQuemTx i{display:block;height:4px;border-radius:2px;background:rgba(245,245,243,.26);width:64%}
.ofrQuemTx s{display:block;height:3px;border-radius:2px;text-decoration:none;
 background:rgba(245,245,243,.12);width:38%}
.ofrCriativo{flex:1;min-height:16px;border-radius:5px;border:1px solid rgba(245,245,243,.05);
 background:repeating-linear-gradient(135deg,rgba(245,245,243,.05) 0 3px,transparent 3px 10px)}

.ofrNota{margin:clamp(12px,1.3vw,16px) clamp(14px,1.5vw,20px) 0;
 font-size:clamp(12.5px,.82vw,14px);line-height:1.5;color:rgba(245,245,243,.5)}
.ofrNota b{color:#F5F5F3;font-weight:600}

@media(max-width:639px){.ofrLb,.ofrTag{font-size:9.5px;letter-spacing:.11em}}
@media(prefers-reduced-motion:reduce){.ofrFita{animation:none}}

/* ===== A barra do topo ===== fixa (sticky) e de vidro: fica no topo ao
   rolar, com o que passa por baixo desfocado (decisao do dono). Sticky, nao
   fixed: continua ocupando o lugar dela no fluxo, entao nada abaixo precisa
   compensar a altura. Funciona porque html/body usam overflow-x:clip, que
   nao cria caixa de rolagem (hidden quebraria o sticky). */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);
 -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
 border-bottom:1px solid rgba(20,19,18,.08)}
.top .in{max-width:calc(var(--moldura) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut);
 height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--e3)}
/* a logo: altura fixa de 34px; o link em volta mede 44px, o alvo de toque */
.topoLogo{display:inline-flex;align-items:center;min-height:44px}
.topoLogo img{display:block;height:34px;width:auto}
.topoDir{display:flex;align-items:center;gap:var(--e4)}
.topoNav{display:flex;align-items:center;gap:var(--e3)}
.topoNav a{display:inline-flex;align-items:center;min-height:44px;
 font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
 letter-spacing:.14em;text-transform:uppercase;color:var(--fraco);
 text-decoration:none;white-space:nowrap;transition:color .3s var(--e)}
.topoNav a:hover{color:var(--tinta)}
@media(max-width:1023px){.topoNav{display:none}}
@media(max-width:639px){.topoDir .term{display:none}}

/* ===== O menu do celular e do tablet (Task 17) ===== o da referencia: um
   botao quadrado de borda clara com tres tracos, que viram X ao abrir, e um
   painel branco em tela cheia com os links grandes entre fios e o card do
   contato embaixo (cinza, com o chanfro). Abaixo de 1024px, onde o menu da
   barra some. ligarMenuMovel() (site.js) abre, fecha e trava a rolagem. */
.menuBtn{display:none;position:relative;flex:none;width:44px;height:44px;cursor:pointer;
 background:var(--papel2);border:1px solid rgba(20,19,18,.16);border-radius:4px}
.menuBtn span{position:absolute;left:12px;width:18px;height:2px;background:var(--tinta);
 transition:transform .3s ease,opacity .2s ease}
.menuBtn span:nth-child(1){top:14px}
.menuBtn span:nth-child(2){top:20px}
.menuBtn span:nth-child(3){top:26px}
.menuBtn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menuBtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menuBtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1023px){.menuBtn{display:block}}

/* o painel comeca logo abaixo da barra (64px + 1px de fio) e vai ate o fim
   da tela; com ele aberto, a pagina por baixo nao rola */
.menuMovel{position:fixed;left:0;right:0;top:65px;bottom:0;z-index:49;overflow-y:auto;
 display:flex;flex-direction:column;padding:var(--e2) var(--gut) var(--e4);background:var(--papel2);
 opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .35s ease}
.menuMovel.aberto{opacity:1;transform:none}
/* o display:flex acima venceria o [hidden] do navegador: fechado, o painel
   ficaria invisivel POR CIMA da pagina, roubando os toques */
.menuMovel[hidden]{display:none}
html.menuAberto{overflow:hidden}
.menuMovel>a{display:flex;align-items:center;min-height:88px;border-bottom:1px solid var(--cinza2);
 font-size:clamp(24px,4vw,32px);font-weight:500;letter-spacing:-.03em;color:var(--tinta);text-decoration:none;
 opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
/* os links entram em cascata, 50ms um depois do outro */
.menuMovel>a:nth-child(2){transition-delay:.05s}
.menuMovel>a:nth-child(3){transition-delay:.1s}
.menuMovel>a:nth-child(4){transition-delay:.15s}
.menuMovel.aberto>a{opacity:1;transform:none}
.menuContato{margin-top:auto;padding:var(--e3);background:var(--cinza);
 clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.menuRot{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;text-transform:uppercase;
 color:rgba(20,19,18,.55);margin-bottom:var(--e1)}
.menuContato a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t2);
 font-weight:500;letter-spacing:-.02em;color:var(--tinta);text-decoration:none;word-break:break-all}
@media(min-width:1024px){.menuMovel{display:none}}
@media(prefers-reduced-motion:reduce){.menuMovel,.menuMovel>a,.menuBtn span{transition:none}}

/* alvo das ancoras: com a barra fixa, compensa os 64px dela + folga no salto
   nativo (o clique em ligarMenu() mede a barra de verdade) */
#como-funciona,#privacidade,#perguntas{scroll-margin-top:88px}

/* chips do hero — o separador fecha o item anterior, pra linha nova nunca
   comecar num ponto solto */
.chips{list-style:none;margin-top:var(--e3);display:flex;flex-wrap:wrap;
 align-items:center;gap:var(--e1) var(--e2)}
.chips li{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--fraco)}
.chips li:not(:last-child)::after{content:" ·";color:var(--fio)}

/* ===== O contraste ===== tabela real, 50/50. No celular cada linha vira um
   par empilhado rotulado pelo data-label; o thead sai da tela so visualmente. */
.cmp{width:100%;table-layout:fixed;border-collapse:collapse}
.cmp th{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
 letter-spacing:.12em;text-transform:uppercase;text-align:left;
 color:var(--fraco);padding:0 var(--e3) var(--e2) 0}
.cmp th:last-child{color:var(--acento);padding-right:0}
/* Task 15: um ✕ cinza antes de cada "sem" e um ✓ azul antes de cada "com",
   desenhados como SVG em data: (a CSP permite data: em imagem). No hover a
   linha ganha o cinza dos cards e o ✓ avanca 4px. */
.cmp td{line-height:1.5;padding:var(--e3) var(--e3) var(--e3) 44px;
 border-top:1px solid var(--cinza2);vertical-align:top;
 background-repeat:no-repeat;background-position:12px 27px;
 transition:background-color .3s ease,background-position .3s ease}
.cmp td:first-child{color:var(--fraco);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E5E5E5'/%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%23141312' stroke-opacity='.5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.cmp td:last-child{color:var(--tinta);font-weight:500;padding-right:var(--e3);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232F6BD8'/%3E%3Cpath d='M5.8 10.4l2.8 2.7 5.6-5.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* o rotulo da coluna alinha com o texto, depois do icone */
.cmp th{padding-left:44px}
@media(hover:hover){
 .cmp tbody tr:hover td{background-color:var(--cinza)}
 .cmp tbody tr:hover td:last-child{background-position:16px 27px}
}
@media(max-width:639px){
 .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
 .cmp th{padding:0}
 .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
 .cmp tr{padding:var(--e3) 0;border-top:1px solid var(--cinza2)}
 .cmp td,.cmp td:first-child,.cmp td:last-child{padding:0 0 0 32px;border-top:0;background-position:0 29px}
 .cmp td+td{margin-top:var(--e2)}
 .cmp td::before{content:attr(data-label);display:block;
  margin-bottom:var(--e1);font-family:'JetBrains Mono',monospace;font-size:12px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fraco)}
 .cmp td:last-child::before{color:var(--acento)}
}

/* ===== O que ela revela ===== os cards da referencia: cinza, canto reto, 8px
   de vao. 3 / 2 / 1 colunas. */
/* a ilustracao isometrica (Task 15) mora no canto de cima a direita do card,
   inteira: na referencia ela sangra a borda, mas aqui o corte comia a ponta
   das pecas (decisao do dono). O padding de cima do card reserva o lugar
   dela: o texto nunca passa por baixo. */
.iso{--pxCor:var(--cinza);position:absolute;top:var(--e3);right:var(--e3)}
.iso img{display:block;width:auto;height:140px;max-width:100%;transition:transform .5s ease}
/* a grade de pixels da revelacao (ligarEntradas() em site.js) */
.isoPx{position:absolute;inset:0;display:grid;pointer-events:none;
 grid-template-columns:repeat(var(--cols,1),1fr);grid-template-rows:repeat(var(--rows,1),1fr)}
.isoPx i{background:var(--pxCor)}
.isoPx i.fora{background:transparent}

.rev{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e1)}
.rev article{position:relative;overflow:hidden;background:var(--cinza);
 padding:188px var(--e4) var(--e4);display:flex;flex-direction:column;gap:var(--e2);justify-content:flex-end}
.rev h3{font-size:clamp(22.5px,.8vw + 1rem,28px);letter-spacing:-.035em;line-height:1.1}
/* 16px e o piso de texto de leitura */
.rev p{font-size:16px;line-height:1.55;color:var(--corpo)}
@media(hover:hover){.rev article:hover .iso img,.psso li:hover .iso img{transform:translateY(-6px)}}
@media(max-width:1023px){.rev{grid-template-columns:repeat(2,1fr)}}
@media(max-width:639px){.rev{grid-template-columns:1fr}
 .rev article{padding:124px var(--e3) var(--e3)}.iso{top:var(--e2)}.iso img{height:96px}}

/* ===== Como funciona ===== tres cards com o numero em mono e a ilustracao;
   3 colunas no desktop e 1 abaixo (tres nao divide em duas). O fio azul em
   cima liga /01 -> /02 -> /03 e corre na entrada. */
.psso{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e1)}
.psso::before{content:"";position:absolute;z-index:1;left:0;top:0;width:100%;height:2px;
 background:var(--acento);transform-origin:0 50%}
.psso li{position:relative;overflow:hidden;background:var(--cinza);padding:var(--e4);display:flex;
 flex-direction:column;justify-content:space-between;gap:var(--e6);min-height:300px}
.psNum{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;color:var(--acento)}
.psso h3{font-size:clamp(22.5px,.8vw + 1rem,28px);letter-spacing:-.035em;line-height:1.1;max-width:12em}
@media(max-width:1023px){.psso{grid-template-columns:1fr}
 .psso::before{width:2px;height:100%;transform-origin:50% 0}
 .psso li{min-height:180px;gap:var(--e4)}}

/* ===== Os numeros ===== no desenho dos numeros dos cases da referencia: o
   mesmo fio com barra por cima, o valor e o rotulo em mono embaixo.
   5 / 3 / 2 colunas; no celular o 5o item (que tem paragrafo) ocupa a linha. */
.num{list-style:none;position:relative;padding-top:var(--e4);display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--e4) var(--e3)}
.num::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--cinza2);
 transform-origin:0 50%}
.num::before{content:"";position:absolute;left:0;top:-4px;width:180px;height:5px;background:var(--cinza2)}
/* a contagem (ligarEntradas()) troca o numero sem mexer na largura */
.num b{font-variant-numeric:tabular-nums}
.num b{display:block;font-size:clamp(35px,2.6vw + 1rem,55px);font-weight:500;
 letter-spacing:-.04em;line-height:1;color:var(--tinta);margin-bottom:var(--e2)}
.num span{display:block;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
 line-height:1.4;text-transform:uppercase;color:var(--tinta)}
.num li p{margin-top:var(--e2);font-size:16px;line-height:1.5;color:var(--corpo);max-width:26em}
@media(max-width:1023px){.num{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:639px){.num{grid-template-columns:repeat(2,minmax(0,1fr))}
 .num li:last-child{grid-column:1 / -1}}

/* ===== Privacidade ===== .txt cuida do paragrafo; .prv acrescenta a lista das
   tres travas e o link da politica */
/* as tres travas (Task 15): cada uma numa linha entre fios, com o numero em
   mono azul destacado a esquerda — no lugar do marcador de lista */
.prv ol{list-style:none;counter-reset:trava;margin:var(--e4) 0;max-width:var(--leitura);
 border-bottom:1px solid var(--cinza2)}
.prv li{counter-increment:trava;display:grid;grid-template-columns:48px 1fr;align-items:baseline;
 padding:var(--e2) 0;border-top:1px solid var(--cinza2);line-height:1.5;color:var(--tinta)}
.prv li::before{content:"0" counter(trava);font-family:'JetBrains Mono',monospace;font-size:14px;
 font-weight:500;color:var(--acento)}
/* o cadeado, na coluna do titulo (so no desktop: embaixo de 1024px a coluna
   some e ele so alongaria a pagina) */
.prvLado .iso{--pxCor:var(--papel2);position:relative;top:auto;right:auto;display:inline-block;margin-top:var(--e5)}
.prvLado .iso img{height:auto;width:182px;max-width:100%}
/* abaixo de 1024px a coluna vira uma so: o cadeado fica entre o titulo e o
   texto, menor */
@media(max-width:1023px){.prvLado .iso{margin-top:var(--e4)}.prvLado .iso img{width:132px}}
.prv a{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--e2);
 color:var(--acento);font-weight:500;text-decoration:underline;text-decoration-color:var(--fio)}
.prv a:hover{text-decoration-color:var(--acento)}

/* ===== Preco ===== o card de plano da referencia: cinza, com o chanfro,
   titulo, os tres itens com ✓ e o botao; a etiqueta isometrica a direita */
.prcCard{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--e5);
 background:var(--cinza);padding:var(--e5)}
.prc{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e4)}
.prcLista{list-style:none;display:flex;flex-direction:column;gap:var(--e2)}
.prcLista li{padding-left:32px;font-size:var(--t2);line-height:1.3;color:var(--tinta);
 background:no-repeat 0 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232F6BD8'/%3E%3Cpath d='M5.8 10.4l2.8 2.7 5.6-5.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.prcCard .iso{position:relative;top:auto;right:auto;flex:none;margin-right:var(--e5)}
.prcCard .iso img{height:auto;width:min(260px,30vw)}
/* no celular a etiqueta vai pro canto de cima a direita, ao lado do titulo
   (curto) e acima da lista — medido: nao encosta em nenhum dos dois */
@media(max-width:639px){.prcCard{padding:var(--e4) var(--e3)}
 .prcCard .iso{position:absolute;top:var(--e3);right:var(--e3);margin:0}
 .prcCard .iso img{width:112px}
 .prcLista li{font-size:var(--t1)}}

/* ===== FAQ ===== o da referencia: cada pergunta e um bloco cinza com o
   chanfro, o "+" num quadrado de 36px a direita; aberto, o "+" vira "−".
   Uma aberta por vez (ligarFaq em site.js). */
.faqCli{display:flex;flex-direction:column;gap:var(--e2)}
.fq2{background:var(--cinza)}
.fqQ{width:100%;display:flex;align-items:center;gap:var(--e2);
 padding:var(--e3);cursor:pointer;text-align:left;background:transparent;border:0;
 font-family:inherit;font-size:var(--t2);font-weight:400;letter-spacing:-.02em;line-height:1.3;
 color:var(--tinta)}
.fqTx{flex:1}
.fqMais{flex:none;position:relative;width:36px;height:36px;background:var(--cinza2);
 transition:background .3s ease}
.fqMais::before,.fqMais::after{content:"";position:absolute;left:50%;top:50%;
 width:12px;height:2px;background:var(--tinta);transform:translate(-50%,-50%);
 transition:transform .3s ease}
.fqMais::after{transform:translate(-50%,-50%) rotate(90deg)}
.fqQ:hover .fqMais{background:#D8D8D8}
.fq2.aberta .fqMais::after{transform:translate(-50%,-50%) rotate(0deg)}
/* abrir e o truque de grid-template-rows 0fr->1fr; .fqAin2 e o wrapper
   interno que o truque exige (overflow:hidden + min-height:0) */
.fqA{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)}
.fq2.aberta .fqA{grid-template-rows:1fr}
.fqAin2{overflow:hidden;min-height:0;padding:0 var(--e3)}
.fqAin2 p{padding:0 0 var(--e4);line-height:1.65;color:var(--corpo);max-width:var(--leitura)}
@media(max-width:639px){.fqQ{padding:var(--e2);font-size:var(--t1)}.fqAin2{padding:0 var(--e2)}}

/* ===== Rodape ===== escuro, no desenho do rodape da referencia, com o chanfro
   no canto de cima a direita (o branco da pagina aparece no corte) */
.rod{background:var(--tinta);color:rgba(245,245,243,.66);font-size:var(--t0);
 padding:var(--e8) 0 var(--e5);
 clip-path:polygon(0 0,calc(100% - 64px) 0,100% 64px,100% 100%,0 100%)}
@media(max-width:1023px){.rod{padding-top:var(--e7);clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%)}}
.rod h2{color:#F5F5F3}
.rodCta{display:flex;align-items:center;justify-content:space-between;gap:var(--e6)}
.rodCtaTx p{margin:var(--e3) 0 var(--e4);font-size:var(--t1);max-width:var(--leitura)}
.rodLogo{flex:none;width:min(320px,28vw);height:auto;opacity:.9}
/* abaixo de 1024px a logo sobe pro topo do rodape, antes da chamada */
@media(max-width:1023px){.rodCta{flex-direction:column;align-items:flex-start;gap:var(--e5)}
 .rodLogo{order:-1;width:200px}}

/* os tres "+" da referencia, na borda esquerda, no meio e na borda direita */
.rodCruzes{display:flex;justify-content:space-between;margin:var(--e7) 0 var(--e6)}
.rodCruzes i{position:relative;width:16px;height:16px}
.rodCruzes i::before,.rodCruzes i::after{content:"";position:absolute;left:50%;top:50%;
 width:16px;height:1px;background:rgba(245,245,243,.28);transform:translate(-50%,-50%)}
.rodCruzes i::after{transform:translate(-50%,-50%) rotate(90deg)}
@media(max-width:1023px){.rodCruzes{margin:var(--e6) 0 var(--e5)}}

.rodCols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--e5) var(--e3)}
.rodCols>*{display:flex;flex-direction:column;align-items:flex-start}
.rodRot{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;text-transform:uppercase;
 color:rgba(245,245,243,.5);margin-bottom:var(--e1)}
.rodCols a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t2);
 color:#F5F5F3;text-decoration:none;letter-spacing:-.02em;transition:color .3s var(--e)}
.rodCols a:hover{color:var(--acento)}
/* o e-mail grande, no azul da marca: 3,7:1 contra o fundo, que so passa
   como texto grande — por isso nunca abaixo de 24px */
.rodCols a.rodEmail{font-size:clamp(24px,1.2vw + 1rem,28px);font-weight:500;color:var(--acento)}
.rodCols a.rodEmail:hover{color:#F5F5F3}
@media(max-width:1023px){.rodCols{grid-template-columns:1fr 1fr}.rodCols>:first-child{grid-column:1 / -1}}
@media(max-width:639px){.rodCols{grid-template-columns:1fr}}

.rodBaixo{position:relative;display:flex;align-items:center;justify-content:space-between;
 gap:var(--e2);flex-wrap:wrap;margin-top:var(--e7);padding-top:var(--e3);
 border-top:1px solid rgba(245,245,243,.14)}
.rodBaixo::before{content:"";position:absolute;left:0;top:-5px;width:180px;height:5px;background:rgba(245,245,243,.14)}
.rodLb{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;text-transform:uppercase;
 color:rgba(245,245,243,.5)}
.rodAss{display:inline-flex;align-items:center;gap:9px}
.rodAss span{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.14em;color:rgba(245,245,243,.5)}
.rodAss b{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.14em;color:#F5F5F3}
@media(max-width:1023px){.rodBaixo{margin-top:var(--e6)}}

/* ===== Pagina /privacidade/ ===== o paragrafo vem de .txt p (a div recebe
   doc e txt). .doc cobre os dez h2 numerados, listas e links. */
.doc h2{font-size:clamp(22.5px,1.2vw + 1rem,28px);margin:var(--e5) 0 var(--e2)}
.doc ol,.doc ul{margin:var(--e3) 0;padding-left:1.4em;max-width:var(--leitura)}
.doc li{line-height:1.55;margin-bottom:var(--e1)}
.doc li:last-child{margin-bottom:0}
.doc ol li::marker{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--acento)}
.doc a{color:var(--acento);font-weight:500;text-decoration:underline;text-decoration-color:var(--fio)}
.doc a:hover{text-decoration-color:var(--acento)}
/* os links da lista de terceiros sao alvos soltos: ganham os 44px */
.doc li a{display:inline-flex;align-items:center;min-height:44px}
.d2 + .lb{margin-top:var(--e3)}

/* ===== Movimento de entrada (Task 15) =====
   So vale com .anima no <html>, que ligarEntradas() (site.js) poe quando pode
   animar: sem JS, sem IntersectionObserver ou com prefers-reduced-motion, a
   pagina fica inteira visivel e parada. Cada alvo ganha .visto uma vez, ao
   entrar na tela, e nao volta. A curva e a mola sem quique da referencia
   (0,7s), que em CSS e "ease". O hero e os botoes nao entram aqui. */

/* o que sobe: titulos, linhas da tabela, cards, passos, numeros, travas */
.anima .surge{opacity:0;transform:translateY(20px);
 transition:opacity .7s ease var(--atraso,0s),transform .7s ease var(--atraso,0s)}
.anima .surge.visto{opacity:1;transform:none}

/* o cabecalho de secao: o fio se desenha da esquerda pra direita, a barra
   desliza atras e o rotulo aparece por ultimo */
.anima .rot{color:transparent;transition:color .5s ease .35s}
.anima .rot::after{transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.anima .rot::before{opacity:0;transform:translateX(-16px);transition:opacity .6s ease .2s,transform .6s ease .2s}
.anima .rot.visto{color:var(--tinta)}
.anima .rot.visto::after{transform:none}
.anima .rot.visto::before{opacity:1;transform:none}

/* o fio dos numeros, igual ao do cabecalho */
.anima .num::after{transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.anima .num::before{opacity:0;transform:translateX(-16px);transition:opacity .6s ease .2s,transform .6s ease .2s}
.anima .num.visto::after{transform:none}
.anima .num.visto::before{opacity:1;transform:none}

/* ===== Tela de abertura (Task 16) =====
   O "Preloader" da referencia (componente Preloader, variantes "Home
   preloader - start/end" e "Other pages - start/end"): tela escura com a logo
   branca entrando de scale(1.5) em 0,7s; aos 1000ms ela se desfaz em pixels
   de 140px sumindo em ordem aleatoria (360ms: 900 / 2,5) enquanto o fundo
   escuro some por baixo em 1s e a logo apaga. Nas paginas internas
   (data-curta) nao ha logo e tudo e mais curto. ligarAbertura() (site.js)
   monta os pixels; sem JS, preSemJs esconde a tela sozinha. */
.pre{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
 animation:preSemJs .5s ease 2.5s forwards}
.pre.comJs{animation:none}
.pre.saindo{pointer-events:none}
.preFundo{position:absolute;inset:0;background:var(--tinta);transition:opacity 1s ease}
.pre[data-curta] .preFundo{transition-duration:.3s}
.pre.saindo .preFundo{opacity:0}
.prePx{position:absolute;inset:0;display:grid;
 grid-template-columns:repeat(var(--cols,1),1fr);grid-template-rows:repeat(var(--rows,1),1fr)}
.prePx i{background:var(--tinta)}
.prePx i.fora{background:transparent}
.preLogo{position:relative;z-index:2;width:250px;height:auto;animation:preLogoEntra .7s ease both}
.pre.saindo .preLogo{animation:preLogoSai .7s ease forwards}
@keyframes preLogoEntra{from{opacity:0;transform:scale(1.5)}to{opacity:1;transform:none}}
@keyframes preLogoSai{from{opacity:1}to{opacity:0}}
@keyframes preSemJs{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.pre{display:none}}
/* a entrada do hero espera a tela abrir, como na referencia (la as entradas
   do hero comecam entre 1,7s e 2s) — so o atraso muda, o desenho nao */
html:has(.pre) .abre .d1{animation-delay:1s}
html:has(.pre) .heroObjeto{animation-delay:1.12s}

/* o fio azul dos passos corre de /01 a /03 depois que os cards subiram */
.anima .psso::before{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.3,1) .45s}
.anima .psso.visto::before{transform:none}
@media(max-width:1023px){.anima .psso::before{transform:scaleY(0)}}