com um link dentro. Ele inteiro
* é o alvo: no celular, um cartão de 280px de altura com um "ver este modo" de
* 14px no rodapé faria o dedo ter de acertar 3% da área que a pessoa está
* olhando.
*
* ⚠️ ELE HERDA `.card`, então tudo que muda no cartão comum (raio, sombra,
* elevação no hover) chega aqui de graça. O que está abaixo é só o que o
* cartão comum não tem: o caminho numerado e o rodapé com a cor do modo.
*/
.modo-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.modo-card:hover{border-color:var(--c)}
.modo-card h3{margin-bottom:8px}
.modo-card>p{flex:none}
/* O caminho da venda, na ordem em que ele acontece no balcão.
⚠️
DE VERDADE: a ordem É a informação, e quem lê por leitor de tela
precisa ouvir "1 de 3". */
.modo-caminho{list-style:none;counter-reset:passo;margin:15px 0 0;padding:0;
display:flex;flex-direction:column;gap:8px}
.modo-caminho li{counter-increment:passo;display:flex;gap:9px;align-items:flex-start;
font-size:13.5px;line-height:1.45;color:var(--tinta-2);font-weight:600}
.modo-caminho li::before{content:counter(passo);flex:none;width:19px;height:19px;border-radius:6px;
display:grid;place-items:center;background:var(--c);color:#fff;
font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:11px;margin-top:1px}
.modo-ver{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:800;color:var(--c)}
/* O fecho da seção: a frase que tira o medo de escolher errado, e o botão. */
.modo-fecho{margin-top:32px;text-align:center}
.modo-fecho p{max-width:36em;margin:0 auto 18px;font-size:15.5px;line-height:1.6;color:var(--tinta-2)}
.modo-fecho p b{color:var(--tinta)}
/* ---------------- a seção de preços, sobre âmbar ---------------- */
/*
* ⚠️ ÂMBAR COM TEXTO ESCURO, do título ao rodapé. Branco sobre âmbar dá
* contraste 2.28 — some na tela do balcão com sol batendo. É a regra que abre
* este arquivo, e é justamente numa seção âmbar que ela é fácil de esquecer:
* o reflexo é escrever branco porque o fundo é "colorido".
*
* ⚠️ SÓ ESTA SEÇÃO É ÂMBAR na página inteira. Duas seções âmbar não destacam
* nenhuma das duas.
*/
.precos-ambar{position:relative;overflow:hidden;color:var(--tinta);
background:linear-gradient(167deg,#F5C233 0%,var(--ambar) 48%,#C68A07 100%)}
/* A malha de planta baixa, no fundo. Discreta de propósito (5,5% de tinta):
ela dá textura de projeto de obra sem disputar com os cartões, que são o que
a pessoa veio ler. A máscara faz a malha sumir para baixo, senão ela
atravessaria a borda da seção e viraria uma linha reta atrás do rodapé. */
.precos-ambar::before{content:"";position:absolute;inset:0;pointer-events:none;
background:
repeating-linear-gradient(0deg,rgba(18,23,26,.055) 0 1px,transparent 1px 46px),
repeating-linear-gradient(90deg,rgba(18,23,26,.055) 0 1px,transparent 1px 46px);
-webkit-mask-image:radial-gradient(125% 95% at 50% 0%,#000 18%,transparent 76%);
mask-image:radial-gradient(125% 95% at 50% 0%,#000 18%,transparent 76%)}
/* O clarão de cima, que levanta o título do fundo. */
.precos-ambar::after{content:"";position:absolute;left:50%;top:-300px;width:1000px;height:600px;
transform:translateX(-50%);border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(255,255,255,.5),transparent)}
.precos-ambar>.env{position:relative;z-index:1}
.tit-ambar .rot{display:inline-block;color:var(--tinta);background:rgba(18,23,26,.11);
padding:5px 14px;border-radius:999px;letter-spacing:.14em}
.tit-ambar h2{color:var(--tinta)}
.tit-ambar p{color:rgba(18,23,26,.74)}
/* ---------------- o seletor mensal/anual ---------------- */
/*
* ⚠️ AS DUAS METADES TÊM LARGURA IGUAL (grid 1fr 1fr) porque o cursor anda
* exatamente 50%. Com larguras naturais — "Mensal" é bem mais curto que
* "Anual 20% OFF" — o cursor pararia fora do botão.
*/
.precos-ambar .chave{margin-bottom:34px}
.precos-ambar .chave .caixa{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;
gap:0;padding:6px;background:var(--tinta);border-radius:16px;
box-shadow:0 16px 38px rgba(18,23,26,.30)}
.precos-ambar .chave .caixa::before{content:"";position:absolute;top:6px;bottom:6px;left:6px;
width:calc(50% - 6px);border-radius:11px;background:var(--ambar-claro);
transition:transform .3s cubic-bezier(.2,.75,.3,1)}
.precos-ambar .chave .caixa[data-p="anual"]::before{transform:translateX(100%)}
.precos-ambar .chave button{position:relative;z-index:1;padding:11px 24px;border-radius:11px;
background:none;transition:color .22s}
.precos-ambar .chave button.on{background:none;color:var(--tinta)}
.precos-ambar .chave button:not(.on){color:rgba(255,255,255,.68)}
.precos-ambar .chave button:not(.on):hover{color:#fff}
/* ---------------- os cartões ---------------- */
/*
* ⚠️ ALTURA IGUAL (`align-items:stretch`), e não cada um do seu tamanho. Sobre
* fundo branco a diferença de altura passava; sobre âmbar cada cartão é um
* retângulo branco recortado, e três retângulos de alturas diferentes lado a
* lado parecem desalinhamento, não conteúdo diferente.
*/
.precos-ambar .planos{gap:20px;align-items:stretch}
.precos-ambar .plano{border-radius:20px;box-shadow:0 22px 54px rgba(18,23,26,.26)}
.precos-ambar .plano:hover{box-shadow:0 34px 70px rgba(18,23,26,.34)}
/* O destaque cresce um pouco e sobe — sobre âmbar o contorno preto de antes
somia no meio dos outros dois. ⚠️ Só no computador: no celular os cartões
ficam um debaixo do outro, e um deles 3% maior vira só um desalinhamento. */
@media(min-width:900px){
.precos-ambar .plano.destaque{transform:scale(1.035);z-index:2;
box-shadow:0 30px 70px rgba(18,23,26,.38)}
.precos-ambar .plano.destaque:hover{transform:scale(1.035) translateY(-6px)}
}
.precos-ambar .selo-plano{background:var(--tinta);color:var(--ambar-claro);letter-spacing:.12em}
/* A entrada em cascata. Reaproveita `.aparece`, que já existe nesta folha:
o que muda aqui é que o cartão também cresce um pouco ao chegar. */
.precos-ambar .plano.aparece{opacity:0;transform:translateY(26px) scale(.97)}
.precos-ambar .plano.aparece.visivel{opacity:1;transform:none;
transition:opacity .55s ease, transform .55s cubic-bezier(.2,.75,.3,1);
transition-delay:calc(var(--i,0) * 110ms)}
@media(min-width:900px){
.precos-ambar .plano.destaque.aparece{transform:translateY(26px) scale(.99)}
.precos-ambar .plano.destaque.aparece.visivel{transform:scale(1.035)}
}
@media(prefers-reduced-motion:reduce){
.precos-ambar .plano.aparece{opacity:1;transform:none}
.precos-ambar .plano.aparece.visivel{transition:none}
.precos-ambar .chave .caixa::before{transition:none}
}
/* ⚠️ O NÚMERO GRANDE COM `tabular-nums`. Ele é contado quadro a quadro na
entrada, e em fonte proporcional cada dígito tem largura própria: o preço
ficava tremendo para os lados enquanto subia. */
.precos-ambar .por b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* ---------------- o que vem em todos ---------------- */
.precos-inclui{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
margin:34px 0 0;font-size:14px;color:rgba(18,23,26,.72)}
.precos-inclui span{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.62);
border:1px solid rgba(18,23,26,.10);border-radius:999px;padding:7px 15px;
font-weight:700;color:var(--tinta)}
.precos-inclui span::before{content:"✓";color:#1E6B54;font-weight:800}
/* A linha que ficou no lugar da seção de módulos avulsos (06/09/2026).
⚠️ Texto ESCURO sobre o âmbar, como todo o resto desta seção: branco sobre
âmbar não passa no contraste (IDENTIDADE_VISUAL.md). Os links herdam a cor
do próprio módulo, e por isso levam sublinhado — cor sozinha não é sinal de
link para quem não distingue as duas. */
.precos-avulso{max-width:52em;margin:16px auto 0;text-align:center;font-size:14.5px;
line-height:1.65;color:rgba(18,23,26,.72)}
.precos-avulso b{color:var(--tinta)}
.precos-avulso a{font-weight:700;text-decoration:underline;text-underline-offset:2px;
text-decoration-thickness:1.5px;text-decoration-color:rgba(18,23,26,.28)}
.precos-avulso a:hover{text-decoration-color:currentColor}
/* ==================== O SITE NO CELULAR ==================== */
/*
* Leo, 05/09/2026: *"a versão desktop tá ótima mas a mobile não tá. o hero
* inicial não funciona com os mockups de pc e tablet"*.
*
* ⚠️ TUDO AQUI É `max-width`. O computador não passa por nenhuma destas regras
* — a versão que ele aprovou continua byte a byte a mesma.
*/
/* ---------------- 1. o hero ---------------- */
/*
* ⚠️ A ARTE DO HERO É UM NOTEBOOK COM UM TABLET E UM CELULAR ATRÁS. Numa tela de
* 375px ela encolhe até o notebook virar um retângulo cinza de 200px: não dá
* para ler nenhuma das três telas, e o argumento visual mais forte da página
* vira um borrão.
*
* No telefone entra UM celular, no tamanho em que a tela dentro dele se lê —
* que é, afinal, o aparelho na mão de quem está vendo.
*
* ⚠️ E A MOLDURA É A MESMA DO CARROSSEL, que o Leo já aprovou ("o fora da loja
* com os 3 celulares tá perfeito pra celular").
*/
.celular-hero{display:none}
@media(max-width:760px){
/* ⚠️ MENOS TEXTO ANTES DO APARELHO. Leo, 05/09/2026: *"tem muito texto antes
do celular"*. O título encolhe um degrau, os espaços entre os blocos
apertam e a frase de abertura do parágrafo some (`.so-pc`) — no total, uns
130px a menos até o celular aparecer, que é meia tela de telefone. */
.hero{padding:96px 0 26px}
.hero .grid{gap:22px}
.hero h1{font-size:clamp(25px,7.2vw,33px);margin-bottom:12px}
.hero p.sub{font-size:15.5px;margin-bottom:18px}
.hero .so-pc{display:none}
.hero .botoes{gap:9px;margin-bottom:14px}
.hero .selos{gap:12px;font-size:12.5px}
.aparelhos .mockup{display:none}
/* ⚠️ QUASE A LARGURA DA TELA. Inteiro, o aparelho tinha de caber em ALTURA, e
isso o obrigava a ser estreito — a tela dentro dele ficava ilegível, que é
o contrário do motivo de ele estar ali. Cortado pela metade, ele pode ser
grande. */
.celular-hero{display:block;position:relative;width:min(88vw,352px);margin:2px auto 0}
/* O brilho âmbar por trás — é o que descola o aparelho do fundo escuro. */
.celular-hero::before{
content:"";position:absolute;left:50%;top:46%;width:150%;aspect-ratio:1;
transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(224,160,8,.30),transparent 72%);
}
/* ==================== A LOJA TRABALHANDO, ATRÁS DO APARELHO ====================
*
* ⚠️ SÃO ONDAS SAINDO DO CELULAR, e não uma animação qualquer: cada uma é uma
* venda entrando. Junto com os dois selos que se revezam ("Nota emitida",
* "Entrega agendada"), o hero para de ser uma foto de aparelho e passa a
* mostrar um sistema EM USO — que é o que a pessoa precisa acreditar nos
* primeiros três segundos de rolagem vinda do Instagram.
*
* ⚠️ LENTAS E QUASE TRANSPARENTES (4,6s, 35% de opacidade). Movimento rápido
* atrás do texto principal disputa a leitura do título, que é o que precisa
* ser lido primeiro. Ela existe para ser sentida, não assistida.
*/
.celular-hero .onda{
position:absolute;left:50%;top:48%;width:118%;aspect-ratio:1;
transform:translate(-50%,-50%) scale(.62);
border-radius:50%;border:1.5px solid rgba(224,160,8,.38);
pointer-events:none;opacity:0;
animation:ondaDaLoja 4.6s ease-out infinite;
}
.celular-hero .onda:nth-of-type(2){animation-delay:1.55s}
.celular-hero .onda:nth-of-type(3){animation-delay:3.1s}
/* ⚠️ OS SELOS SE REVEZAM em vez de ficarem os dois parados. Parados eles são
legenda; alternando, são coisas ACONTECENDO na loja — uma nota que saiu,
uma entrega que foi marcada. */
/* ⚠️ NÃO PONHA `animation:` (o atalho) NUM SELETOR MAIS ESPECÍFICO QUE OS
DE CADA SELO. O atalho zera o `animation-delay`, e é o atraso que faz os
três se revezarem em vez de piscarem juntos. Foi o que aconteceu aqui até
05/09/2026. A animação dos três está definida em `.aparelhos .chip`, mais
abaixo, e cada selo só acrescenta o próprio atraso. */
/* ⚠️ A VITRINE É QUEM CORTA. Altura fixa + `overflow:hidden`, e a máscara
dissolve o último quarto no fundo escuro do hero — cortado a régua, o
aparelho pareceria página que não terminou de carregar. */
.celular-hero .vitrine{
position:relative;overflow:hidden;
height:min(46vh,360px);
-webkit-mask-image:linear-gradient(#000 72%,transparent 99%);
mask-image:linear-gradient(#000 72%,transparent 99%);
}
.celular-hero .quadro{position:relative;animation:flutua 6s ease-in-out infinite}
/* ==================== OS SELOS, POR CIMA DA TELA ====================
*
* ⚠️ TRÊS, UM DE CADA VEZ, EM CIMA DO APARELHO. Antes eram dois parados nas
* pontas da arte. Aparecendo um por vez sobre a tela, eles deixam de ser
* legenda e viram o que está ACONTECENDO ali dentro — que é o que segura o
* dedo de quem chegou rolando o Instagram.
*
* ⚠️ 3,5s CADA, SEM SOBREPOSIÇÃO. O ciclo é de 10,5s e cada um entra com um
* terço de atraso: nunca há dois na tela ao mesmo tempo, e nunca há nenhum
* por muito tempo.
*/
.aparelhos .chip{
display:flex;font-size:12.5px;padding:7px 12px;z-index:3;
box-shadow:0 12px 30px rgba(0,0,0,.42);
/* ⚠️ PROPRIEDADES SEPARADAS, E NAO O ATALHO `animation:`. O atalho preenche
TODA a familia, inclusive o `animation-delay`, que ele zera -- e como
este seletor e mais especifico que `.chip-nota` e companhia, o atraso de
cada selo virava 0 e os tres piscavam juntos. Escrito assim, o atraso de
cada um e a unica declaracao que existe para ele. */
animation-name:seloVaiEVem;
animation-duration:10.5s;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
}
.chip-nota {top:15%; right:-6px; bottom:auto; left:auto; animation-delay:0s}
.chip-entrega{top:41%; left:-8px; bottom:auto; right:auto; animation-delay:3.5s}
.chip-pix {display:flex;top:64%; right:0; bottom:auto; left:auto; animation-delay:7s}
}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.celular-hero .quadro{animation:none}}
/* ---------------- 2. o plano que se segura ---------------- */
/*
* Leo, 05/09/2026: *"vi um site uma vez que tinha um botão redondo com o preço
* do produto e escrito segure o botão, ao segurar ia surgindo um leque ao redor
* do botão... seria legal isso nos pacotes, o cliente segurar e ao redor ir
* aparecendo os módulos que fazem parte, e abaixo a descrição curta de cada
* módulo como check list"*.
*
* ⚠️ O QUE ABRE NÃO É SÓ ENFEITE: é a lista do que vem no plano, que no
* computador está sempre à vista dentro do cartão. Segurar é o caminho
* agradável; UM TOQUE ABRE IGUAL, na hora, sem leque. Informação de preço não
* pode ficar atrás de um gesto que a pessoa não descobre ou não consegue fazer.
*
* ⚠️ E O PLANO EM DESTAQUE JÁ NASCE ABERTO. É ele que ensina o gesto: a pessoa
* vê o leque montado num, e entende o que os outros dois botões fazem.
*/
.planos-cel{display:none}
@media(max-width:760px){
.planos{display:none}
.planos-cel{display:flex;flex-direction:column;gap:18px}
}
.pcel{
position:relative;background:#fff;border-radius:22px;padding:20px 16px 18px;
box-shadow:0 20px 46px rgba(18,23,26,.22);
}
.pcel::before{content:"";position:absolute;inset:0 0 auto;height:5px;
border-radius:22px 22px 0 0;background:var(--pc)}
.pcel.destaque{box-shadow:0 0 0 2px var(--pc) inset, 0 26px 56px rgba(18,23,26,.30)}
.pcel-selo{display:inline-block;background:var(--pc);color:#fff;font-size:10.5px;font-weight:800;
letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:8px}
.pcel h3{font-family:Archivo,system-ui,sans-serif;font-size:24px;font-weight:800;margin:0;color:var(--pc)}
.pcel .quem{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:var(--tinta-2)}
/* ---- o palco: o botão no meio, o leque em volta ---- */
/* ⚠️ FECHADO ELE ENCOLHE. Aberto o palco precisa dos 246px para caber o anel
de ícones; fechado, esse mesmo espaço vira um vazio de 90px em volta de um
botão, e o cartão parece que faltou carregar alguma coisa. Encolher também
faz o abrir CRESCER na tela, que é o que dá a sensação de que algo
aconteceu. */
.pcel-palco{position:relative;display:grid;place-items:center;
width:100%;height:190px;margin:6px 0 2px;
transition:height .42s cubic-bezier(.2,.7,.3,1)}
.pcel[data-aberto="sim"] .pcel-palco{height:258px}
@media(prefers-reduced-motion:reduce){.pcel-palco{transition:none}}
.pcel-botao{
position:relative;z-index:2;width:150px;height:150px;border-radius:50%;
border:0;padding:0;cursor:pointer;font:inherit;color:#fff;
background:radial-gradient(120% 120% at 30% 20%, #1d262b, var(--tinta));
box-shadow:0 14px 34px rgba(18,23,26,.42);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
/* ⚠️ SEM SELEÇÃO E SEM MENU DE CONTEXTO. Segurar o dedo num elemento faz o
navegador do celular oferecer "copiar" e selecionar o texto — bem no meio
do gesto que a gente está pedindo. */
user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.pcel-botao:active{transform:scale(.965)}
.pcel[data-aberto="sim"] .pcel-botao{box-shadow:0 10px 26px rgba(18,23,26,.34), 0 0 0 6px color-mix(in srgb, var(--pc) 18%, transparent)}
/* O anel que enche enquanto o dedo está em cima. */
.pcel-anel{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);
transform:rotate(-90deg);pointer-events:none}
.pcel-anel circle{fill:none;stroke-width:3.5;stroke-linecap:round}
.pcel-anel .trilho{stroke:rgba(255,255,255,.14)}
.pcel-anel .carga{stroke:var(--pc);stroke-dasharray:var(--volta);stroke-dashoffset:var(--volta)}
.pcel-de{font-size:12px;color:rgba(255,255,255,.5);text-decoration:line-through;line-height:1}
.pcel-valor{font-family:Archivo,system-ui,sans-serif;font-size:27px;font-weight:800;line-height:1.05;
font-variant-numeric:tabular-nums}
.pcel-mes{font-size:11.5px;color:rgba(255,255,255,.62);line-height:1}
/* ⚠️ 11.5px E NAO 10.5px. Medido na tela: a linha do PIX era o menor texto da
pagina inteira, e e ela que diz o desconto -- o numero que faz a pessoa
escolher a forma de pagamento. Texto que se le espremendo o olho nao vende. */
.pcel-pix{margin-top:3px;font-size:11.5px;font-weight:600;color:#8fd3ab;line-height:1.2;
max-width:126px;text-align:center}
/* ==================== "SEGURE O BOTÃO" ====================
*
* Leo, 05/09/2026: *"o texto segure tá muito pequeno, coloque grande, chamativo
* com uma seta animada indicando para o botão. não pode passar batido"*.
*
* ⚠️ ERA 12px CINZA, EMBAIXO DO BOTÃO. Num site que a pessoa chega pelo
* Instagram, rolando com o polegar, aquilo era invisível — e sem ele o botão
* redondo é só um preço bonito que não faz nada. A instrução é a metade que
* fazia a outra metade funcionar.
*
* ⚠️ E A SETA APONTA PARA CIMA, subindo e voltando. Seta parada é um enfeite;
* seta que se move na direção do alvo é uma instrução que o olho lê sem ler.
*/
.pcel-dica{margin:6px 0 0;text-align:center;line-height:1.15;
transition:opacity .25s, max-height .35s, margin .35s;max-height:90px;overflow:hidden}
.pcel[data-aberto="sim"] .pcel-dica{opacity:0;max-height:0;margin-top:0}
/* ⚠️ DESENHO, E NÃO O CARACTERE "↑". A seta de teclado sai com a espessura
que a fonte tiver — no telefone ela virava um risco fininho, que é o oposto
de "não pode passar batido". Desenhada, a espessura é escolhida (3,4) e sai
igual em todo aparelho. */
.pcel-seta{display:block;width:26px;margin:0 auto;color:var(--pc);
animation:setaSobe 1.5s ease-in-out infinite}
.pcel-seta svg{display:block;width:26px;height:15px}
.pcel-dica b{display:block;font-family:Archivo,system-ui,sans-serif;font-size:17px;font-weight:800;
letter-spacing:.04em;text-transform:uppercase;color:var(--pc);margin-top:1px}
.pcel-dica small{display:block;font-size:12.5px;color:var(--tinta-2);margin-top:2px}
@keyframes setaSobe{
0%,100%{transform:translateY(3px);opacity:.55}
50% {transform:translateY(-4px);opacity:1}
}
/* ⚠️ O HALO PULSA SÓ ENQUANTO ESTÁ FECHADO. Aberto ele viraria um pisca-pisca
em volta de algo que a pessoa já abriu — chamar atenção para o que já foi
atendido é o jeito mais rápido de a pessoa querer sair da página. */
.pcel-botao::after{content:"";position:absolute;inset:-9px;border-radius:50%;
border:2px solid var(--pc);opacity:0;pointer-events:none;
animation:haloPulsa 2.6s ease-out infinite}
.pcel[data-aberto="sim"] .pcel-botao::after{animation:none;opacity:0}
@keyframes haloPulsa{
0% {transform:scale(1); opacity:.55}
70% {transform:scale(1.22);opacity:0}
100%{transform:scale(1.22);opacity:0}
}
@media(prefers-reduced-motion:reduce){
.pcel-seta,.pcel-botao::after{animation:none}
.pcel-botao::after{opacity:.35}
}
/* ---- o leque ---- */
/*
* ⚠️ CADA RAIO É POSICIONADO POR ÂNGULO, e o ícone é DESGIRADO na mesma medida
* (`rotate(var(--a)) translateY(...) rotate(calc(var(--a) * -1))`). Sem o
* segundo giro os ícones sairiam deitados conforme a posição no círculo — o de
* baixo ficaria de cabeça para baixo.
*/
.pcel-leque{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.pcel-raio{
position:absolute;width:44px;height:44px;border-radius:14px;
display:grid;place-items:center;font-size:19px;
background:#fff;box-shadow:0 6px 16px rgba(18,23,26,.20);
border:1.5px solid color-mix(in srgb, var(--rc) 34%, transparent);
transform:rotate(var(--a)) translateY(-104px) rotate(calc(var(--a) * -1)) scale(.2);
opacity:0;
transition:transform .42s cubic-bezier(.2,1.5,.4,1), opacity .3s;
}
.pcel[data-aberto="sim"] .pcel-raio{
opacity:1;
transform:rotate(var(--a)) translateY(-104px) rotate(calc(var(--a) * -1)) scale(1);
transition-delay:calc(var(--i) * 55ms);
}
/* ---- a lista, embaixo ---- */
.pcel-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
overflow:hidden;max-height:0;opacity:0;transition:max-height .5s ease, opacity .35s}
.pcel[data-aberto="sim"] .pcel-lista{max-height:900px;opacity:1;margin-top:4px}
.pcel-lista li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;
opacity:0;transform:translateY(8px)}
.pcel[data-aberto="sim"] .pcel-lista li{opacity:1;transform:none;
transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
transition-delay:calc(220ms + var(--i) * 45ms)}
.pcel-lista .mk{flex:none;width:19px;height:19px;border-radius:6px;display:grid;place-items:center;
font-size:11px;font-weight:800;background:color-mix(in srgb, var(--rc) 16%, transparent);color:var(--rc);
margin-top:1px}
.pcel-lista b{color:var(--tinta)}
.pcel-lista span{color:var(--tinta-2)}
/* O módulo pago se distingue do que vem de série: é o que a pessoa está
comprando a mais neste degrau. */
.pcel-lista li.pago b::after{content:"módulo";margin-left:6px;font-size:9.5px;font-weight:800;
letter-spacing:.07em;text-transform:uppercase;color:var(--rc);vertical-align:1px}
.pcel-pe{margin-top:16px;display:flex;flex-direction:column;gap:9px;align-items:stretch}
.pcel-pe .bt{width:100%;font-size:15.5px;padding:13px}
.pcel-usuarios{text-align:center;font-size:12.5px;color:var(--tinta-3);margin:0}
@media(prefers-reduced-motion:reduce){
.pcel-raio,.pcel-lista,.pcel-lista li{transition:none}
.pcel-botao{transition:none}
}
/* ---------------- as animações do hero no celular ---------------- */
@keyframes ondaDaLoja{
0% {transform:translate(-50%,-50%) scale(.62);opacity:0}
12% {opacity:.55}
100%{transform:translate(-50%,-50%) scale(1.28);opacity:0}
}
@keyframes seloVaiEVem{
0%,3% {opacity:0;transform:translateY(7px) scale(.92)}
9%,42% {opacity:1;transform:none}
48%,100% {opacity:0;transform:translateY(-7px) scale(.97)}
}
@media(prefers-reduced-motion:reduce){
.celular-hero .onda{animation:none;opacity:0}
.aparelhos .chip{animation:none;opacity:1}
}
/* ==================== COMO A LOJA VENDE, NO CELULAR ====================
*
* Leo, 05/09/2026: *"a parte como sua loja vende no mobile tá muito extensa, tá
* quebrando muito a estética, um grande espaço de fundo branco"*. Media 1.529px
* — quase duas telas, com os três caminhos abertos ao mesmo tempo.
*
* ⚠️ NO COMPUTADOR OS TRÊS FICAM ABERTOS DE PROPÓSITO: lado a lado, a pessoa
* COMPARA os três jeitos de vender e se reconhece num deles. Empilhados no
* telefone não há comparação nenhuma — só rolagem. Por isso aqui vira acordeão.
*/
.modos-cel{display:none}
@media(max-width:760px){
#modos .cards{display:none}
.modos-cel{display:flex;flex-direction:column;gap:10px}
}
.modocel{border:1px solid var(--linha);border-radius:16px;background:#fff;overflow:hidden;
transition:border-color .25s, box-shadow .25s}
.modocel[data-aberto="sim"]{border-color:var(--c);box-shadow:0 14px 34px rgba(18,23,26,.10)}
.modocel-topo{display:flex;align-items:center;gap:12px;width:100%;padding:14px;
background:none;border:0;font:inherit;text-align:left;cursor:pointer;color:inherit}
.modocel-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px}
.modocel-nome{flex:1;font-family:Archivo,system-ui,sans-serif;font-size:15.5px;font-weight:800;
line-height:1.25}
.modocel-seta{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
background:var(--superficie-2);color:var(--tinta-2);transition:transform .32s cubic-bezier(.2,.7,.3,1), background .25s, color .25s}
.modocel-seta svg{width:12px;height:12px}
.modocel[data-aberto="sim"] .modocel-seta{transform:rotate(180deg);background:var(--c);color:#fff}
/* ⚠️ A ALTURA ANIMA POR grid-template-rows, e não por max-height chutado.
`max-height: 500px` num bloco de 220 gasta 280px de transição em nada — a
abertura fica lenta no começo e seca no fim. Com `0fr → 1fr` o navegador
anima até a altura REAL do conteúdo, e o mesmo CSS serve para um caminho de
três passos e para um de seis. */
.modocel-corpo{display:grid;grid-template-rows:0fr;
transition:grid-template-rows .42s cubic-bezier(.2,.7,.3,1)}
.modocel[data-aberto="sim"] .modocel-corpo{grid-template-rows:1fr}
.modocel-dentro{overflow:hidden;min-height:0}
.modocel-quem{margin:0 14px 12px;font-size:14px;line-height:1.5;color:var(--tinta-2)}
/* ---- o caminho, desenhando-se ---- */
/*
* ⚠️ É UMA LINHA DO TEMPO, e não uma lista numerada. O caminho da venda tem
* ORDEM — "primeiro isto, depois aquilo" — e é isso que a linha descendo entre
* os passos diz sem escrever. Cada passo entra depois do anterior, no ritmo em
* que a venda acontece no balcão.
*/
.modocel-linha{list-style:none;margin:0;padding:0 14px 4px;position:relative}
.modocel-linha li{position:relative;display:flex;align-items:flex-start;gap:11px;
padding-bottom:14px;
opacity:0;transform:translateX(-10px)}
.modocel[data-aberto="sim"] .modocel-linha li{opacity:1;transform:none;
transition:opacity .38s ease, transform .38s cubic-bezier(.2,.7,.3,1);
transition-delay:calc(120ms + var(--i) * 110ms)}
.modocel-linha li:last-child{padding-bottom:2px}
/* O fio que liga um passo ao seguinte. Ele CRESCE de cima para baixo. */
.modocel-linha li:not(:last-child)::before{
content:"";position:absolute;left:12px;top:26px;width:2px;bottom:0;
background:color-mix(in srgb, var(--c) 30%, transparent);
transform:scaleY(0);transform-origin:top;
}
.modocel[data-aberto="sim"] .modocel-linha li:not(:last-child)::before{
transform:scaleY(1);
transition:transform .34s ease;
transition-delay:calc(300ms + var(--i) * 110ms);
}
.modocel-linha .n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
background:var(--c);color:#fff;font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:12.5px;
position:relative;z-index:1}
.modocel-linha .t{font-size:14.5px;line-height:1.45;padding-top:4px;color:var(--tinta)}
.modocel-ver{display:block;margin:0 14px 14px;font-size:13.5px;font-weight:800;color:var(--c);
text-decoration:none}
@media(prefers-reduced-motion:reduce){
.modocel-corpo,.modocel-seta,.modocel-linha li,.modocel-linha li::before{transition:none}
.modocel-linha li{opacity:1;transform:none}
}
/* ==================== "POR DENTRO", NO CELULAR ====================
*
* Leo, 05/09/2026: *"as barras com os nomes e ícones têm que ficar mais
* modernas, em vez de ficar em cima vão ficar enfileiradas na lateral esquerda
* e o mockup vai ser só do celular surgindo à direita... como se surgisse
* saindo da lateral parcialmente"*.
*
* ⚠️ O QUE MUDA É O ARRANJO, NÃO O CONTEÚDO. As mesmas seis abas, o mesmo print
* de celular, a mesma explicação — montados pelo mesmo JavaScript. No
* computador continua tudo como está: abas numa faixa em cima, janela de
* navegador grande e o celular pequeno apoiado no canto.
*
* ⚠️ `display:contents` NO PALCO. A explicação e o print são irmãos dentro de
* `.palco`, e eu precisava de um deles ao lado do trilho e do outro embaixo de
* tudo. `display:contents` faz o `.palco` sumir da caixa e seus dois filhos
* participarem da grade da seção — sem mexer no HTML, que é o mesmo dos dois
* tamanhos.
*/
@media(max-width:760px){
#funcoes > .env{
display:grid;
grid-template-columns:minmax(0,150px) minmax(0,1fr);
grid-template-areas:
"titulo titulo"
"trilho tela"
"detalhe detalhe";
column-gap:10px;
/*
* ⚠️ `stretch`, E NÃO `start`. É o que faz as duas colunas terem a MESMA
* altura: o aparelho define a altura da linha (ele é proporcional, então
* a altura vem da largura), e o trilho recebe a mesma. Com `start` cada
* coluna ficava do tamanho do próprio conteúdo e as duas terminavam em
* alturas diferentes — o desalinhamento que o Leo apontou.
*/
align-items:stretch;
}
#funcoes .tit{grid-area:titulo}
#funcoes .trilho-caixa{grid-area:trilho;display:block;margin:0;height:100%}
#funcoes .palco{display:contents}
#funcoes #palcoFuncao{grid-area:tela;position:relative}
#funcoes #detalheFuncao{grid-area:detalhe;margin-top:20px}
/* ---- o trilho vira coluna, e ela ocupa a altura do aparelho ---- */
/*
* ⚠️ `space-between` DISTRIBUI OS SEIS pela altura do aparelho, em vez de
* empilhá-los no alto e deixar um vazio embaixo. É isso que faz a primeira
* aba começar na mesma linha do topo do celular e a última terminar na
* mesma linha da base dele.
*/
.trilho{
display:flex;flex-direction:column;justify-content:space-between;gap:8px;
height:100%;overflow:visible;padding:0;
}
.trilho button{
width:100%;justify-content:flex-start;align-items:center;gap:9px;
padding:10px 11px;font-size:12.5px;line-height:1.22;text-align:left;
white-space:normal;border-radius:12px;
}
.trilho button .pt{font-size:15px}
/* As setas eram para rolar a faixa. Em coluna não há o que rolar. */
.trilho-seta{display:none}
/* ---- só o celular, inteiro e proporcional ---- */
/*
* ⚠️ A JANELA DE NAVEGADOR SOME. Ela é o print do computador: numa coluna de
* 180px vira um retângulo cinza onde não se lê nada. O que fica é o print do
* CELULAR — que é, afinal, o aparelho na mão de quem está olhando.
*
* ⚠️ INTEIRO E NA PROPORÇÃO DE UM CELULAR (9/19,5), a mesma dos aparelhos do
* carrossel. Chegou a sair pela lateral, cortado; o Leo pediu inteiro, e
* inteiro ele também dá a altura da linha — que é o que alinha o trilho ao
* lado.
*/
#funcoes .palco-tela{padding:0}
#funcoes .palco-tela .moldura{display:none}
#funcoes .palco-tela .cel{
position:relative;left:auto;right:auto;top:auto;bottom:auto;
width:100%;min-width:0;
background:#0d1114;border-radius:26px;padding:6px;
box-shadow:0 24px 54px rgba(0,0,0,.62), inset 0 0 0 1.5px rgba(255,255,255,.14);
}
/*
* ⚠️ 9/18.6, E NÃO 9/19.5. A moldura é preenchida com `object-fit:cover`:
* se ela for MAIS ALTA que o print, o navegador escala pela altura e corta as
* LATERAIS — e é nas laterais que ficam o "Início" e o "Mais" da barra de
* abas. 18.6 é a proporção dos próprios prints (399x825, o mais estreito dos
* seis), então nada é cortado.
*
* Continua sendo proporção de celular de verdade — 18.6:9 está entre o 18:9 e
* o 19.5:9 do mercado. E como o trilho ao lado é `stretch`, ele acompanha a
* altura nova sozinho: o alinhamento que o Leo pediu não depende deste número.
*/
#funcoes .palco-tela .cel .tel{aspect-ratio:9/18.6;border-radius:21px}
#funcoes .palco-tela .cel .tel img{object-position:top}
/* ⚠️ ELE ENTRA PELA DIREITA, e não de baixo para cima como no computador: é o
movimento que diz "chegou uma tela nova" sem escrever nada. */
#funcoes .palco-tela.entra{animation:celSaiDaLateral .44s cubic-bezier(.2,.8,.3,1) both}
}
@keyframes celSaiDaLateral{
from{opacity:0;transform:translateX(38px)}
to {opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
#funcoes .palco-tela.entra{animation:none}
}
/* ---------------- o tamanho dos ícones de traço ---------------- */
/*
* ⚠️ EM \\`em\\`, E NÃO EM PIXEL. O mesmo ícone aparece em oito lugares — no
* trilho, no cartão do módulo, no leque do plano, no menu, na página do plano —
* e cada um já tinha o seu \\`font-size\\`. Medindo em \\`em\\`, o desenho nasce
* proporcional ao texto ao lado dele, em todos, sem uma regra por lugar.
*
* ⚠️ E A COR VEM DE \\`currentColor\\` (ver o conjunto em dados.js): o ícone sai na
* cor do módulo ou da tela onde está, que é o que faz a identidade alcançá-lo.
* Emoji não aceitava cor nenhuma.
*/
.ic-svg{width:1.2em;height:1.2em;display:block;flex:none}
/* Onde o ícone divide a linha com um texto, ele centraliza junto. */
.selo-mod .ic-svg{display:inline-block;vertical-align:-.2em}
/* Os botões redondos de 98px viveram das 21h05 às 21h50 de 05/09/2026. O Leo
pediu faixas que se deslizam no lugar deles; o desenho novo está no fim
deste arquivo. */
/* ⚠️ OS DOIS RÓTULOS DE CADA BOTÃO. `so-cel` é o irmão de `so-pc`, que já
existia para a frase de abertura do parágrafo: um aparece onde o outro some,
e nunca os dois ao mesmo tempo. */
.so-cel{display:none}
@media(max-width:760px){
.hero-inicial .so-pc{display:none}
.hero-inicial .so-cel{display:inline}
}
/* ==================== "COMO A SUA LOJA VENDE", REFEITA NO CELULAR ====================
*
* Leo, 05/09/2026: *"a parte de como sua loja vende precisa ficar mais moderna
* e sofisticada"*.
*
* O que havia: três caixas brancas, com borda cinza, ícone dentro de um
* quadradinho pastel e uma setinha cinza dentro de uma bolinha cinza — num
* fundo branco. Nada estava errado; era só igual a todo mundo.
*
* ⚠️ UM PAINEL SÓ, E NÃO TRÊS CAIXAS. Três caixas com borda repetem a mesma
* moldura três vezes e picotam a leitura. Um painel com três fileiras
* separadas por fio de cabelo é uma decisão só, e sobra ao olho decidir qual
* fileira interessa — que é a pergunta da seção.
*
* ⚠️ A SEÇÃO INTEIRA MUDA DE COR COM O MODO ABERTO. É o coração do desenho: o
* brilho atrás do painel assume a cor do modo escolhido e leva 700ms para
* trocar. Não é enfeite — é a página respondendo à escolha, que é a diferença
* entre uma página que se lê e uma com que se conversa. A cor vem do
* `--modo-cor`, que o acordeão escreve (ver pintaSecao, no index.html).
*
* ⚠️ O QUADRADINHO PASTEL DO ÍCONE SAIU. Ícone dentro de retângulo colorido é
* a assinatura de template pronto. Sobra o ícone, na cor do modo, dentro de um
* anel de um fio — mesma linguagem dos ícones de traço que o Leo pediu.
*
* ⚠️ A BOLINHA CINZA DA SETA TAMBÉM. Sobrou a seta, fina, na cor do modo.
* Menos caixas dentro de caixas.
*
* ⚠️ O COMPUTADOR NÃO É TOCADO. Tudo aqui vive dentro de max-width:760px, e os
* três cartões lado a lado continuam exatamente como estavam.
*/
@media(max-width:760px){
/* ---- o fundo que responde ---- */
#modos{position:relative;overflow:hidden;isolation:isolate}
#modos::before{
content:"";position:absolute;z-index:-1;pointer-events:none;
left:50%;top:34%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(closest-side,
color-mix(in srgb, var(--modo-cor, #12171A) 13%, transparent),
transparent 70%);
transition:background .7s ease;
}
/* ---- o painel único ---- */
.modos-cel{
gap:0;background:#fff;border-radius:20px;overflow:hidden;
border:1px solid color-mix(in srgb, var(--modo-cor, #12171A) 12%, transparent);
box-shadow:0 22px 60px rgba(18,23,26,.13), 0 2px 6px rgba(18,23,26,.05);
transition:border-color .7s ease;
}
/* ⚠️ FIO DE CABELO ENTRE AS FILEIRAS, e não borda em volta de cada uma. */
.modocel{border:0;border-radius:0;background:none;box-shadow:none;position:relative}
.modocel + .modocel{border-top:1px solid var(--linha)}
/* ⚠️ O TRILHO COLORIDO SÓ NA FILEIRA ABERTA. Ele é a marca de "você está
aqui" — em todas as três, não marcaria nada. Cresce de cima para baixo, no
mesmo gesto do caminho que se desenha logo abaixo. */
.modocel::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--c);transform:scaleY(0);transform-origin:top;
transition:transform .42s cubic-bezier(.2,.7,.3,1);
}
.modocel[data-aberto="sim"]::before{transform:scaleY(1)}
.modocel[data-aberto="sim"]{
background:linear-gradient(180deg,
color-mix(in srgb, var(--c) 7%, transparent), transparent 62%);
}
.modocel-topo{padding:17px 16px;gap:13px}
/* ---- o ícone: anel de um fio, sem quadradinho pastel ---- */
.modocel-ico{
width:38px;height:38px;border-radius:50%;background:none !important;
border:1px solid color-mix(in srgb, var(--c) 34%, transparent);
color:var(--c) !important;transition:border-color .3s, box-shadow .3s;
}
.modocel-ico .ic-svg{width:19px;height:19px}
.modocel[data-aberto="sim"] .modocel-ico{
border-color:var(--c);
box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent);
}
.modocel-nome{font-size:16.5px;letter-spacing:-.2px;line-height:1.22}
.modocel[data-aberto="sim"] .modocel-nome{color:var(--c)}
/* ---- a seta: só a seta ---- */
.modocel-seta{
width:20px;height:20px;background:none;border-radius:0;
color:color-mix(in srgb, var(--tinta-2) 70%, transparent);
}
.modocel-seta svg{width:14px;height:14px}
.modocel[data-aberto="sim"] .modocel-seta{background:none;color:var(--c)}
/* ---- o corpo ---- */
.modocel-quem{margin:0 16px 14px 17px;font-size:14.5px;line-height:1.55}
.modocel-linha{padding:0 16px 4px 17px}
.modocel-linha .t{font-size:15px}
.modocel-ver{margin:2px 16px 18px 17px;font-size:13.5px}
/* ⚠️ O NÚMERO PERDE PESO E GANHA HALO. Bola cheia de 26px repetida três
vezes pesa mais que o texto do passo, que é o que importa ler. Menor, com
um halo da própria cor, ela marca a ordem sem gritar. */
.modocel-linha .n{
width:23px;height:23px;font-size:11.5px;
box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 11%, transparent);
}
.modocel-linha li:not(:last-child)::before{left:10.5px}
}
/* ==================== AS FAIXAS QUE SE DESLIZAM, NO HERO ====================
*
* Leo, 05/09/2026: *"no hero inicial tire os popups, teste gratis e preço
* agora se tornam dois botões deslizantes que nem o do modulo do motorista
* devem ser bem chamativos e ficam sobrepostos ao celular do hero"*.
*
* A referência é o `DeslizarParaConfirmar` do sistema — a faixa que o
* motorista arrasta para confirmar a entrega.
*
* ⚠️ MAS AQUI O ARRASTAR NÃO É OBRIGATÓRIO, E ESSA É A DIFERENÇA QUE IMPORTA.
* No painel do motorista o gesto existe para CRIAR ATRITO — ele não pode
* finalizar uma entrega sem querer. Num anúncio o objetivo é o oposto: quem
* chegou do Instagram e não perceber que precisa arrastar simplesmente não
* entra no teste. Então a faixa é um link de verdade: o deslizar é o CONVITE
* (é ele que brilha e chama o dedo), e o toque simples funciona igual.
* Combinado com o Leo em 05/09/2026.
*
* ⚠️ OS TRÊS SELOS FLUTUANTES SOMEM — NO CELULAR. No computador eles continuam
* exatamente onde estavam, sobre a arte dos três aparelhos, que é um desenho
* que o Leo já aprovou. Aqui embaixo eles disputariam o mesmo espaço com duas
* faixas de 64px de altura, e o hero viraria uma sopa de coisas piscando.
*/
@media(max-width:760px){
/* os popups saem daqui */
.aparelhos .chip{display:none}
/* ---- as faixas, sobre a tela do aparelho ---- */
.hero-inicial .botoes{
position:absolute;left:14px;right:14px;bottom:104px;z-index:6;
display:flex;flex-direction:column;gap:13px;margin:0;
}
.hero-inicial .botoes .bt{
position:relative;overflow:hidden;
width:100%;height:64px;border-radius:999px;
/* ⚠️ O RÓTULO É CENTRADO NA FAIXA INTEIRA, e não no espaço que sobra à
direita do punho. Leo, 05/09/2026: *"aumente e centralize a fonte, ta
muito pequeno e pouco chamativo"*. Com recuo simétrico, o texto cai no
meio da faixa — que é onde o olho procura o rótulo de um botão — e o
punho passa por baixo dele sem empurrá-lo. Recuo de 74px à esquerda,
como estava, jogaria o "centro" 26px para a direita.
⚠️ E O PUNHO NÃO OCUPA ESPAÇO: ele é `position:absolute`, então não há
colisão a calcular. "Teste grátis" em 20px mede ~140px numa faixa de
315px: sobra folga dos dois lados. */
/* ⚠️ O RECUO DA ESQUERDA É O TAMANHO DO PUNHO. Centrado na faixa INTEIRA,
"TESTE 14 DIAS GRÁTIS" (193px numa faixa de 315px) começava exatamente
onde o punho termina e o "T" ficava por baixo dele. Centrando no espaço
QUE SOBRA à direita do punho, os dois rótulos ficam no mesmo lugar em
relação ao que se lê — que é o que faz as duas faixas parecerem irmãs. */
padding:0 14px 0 66px;
display:flex;align-items:center;justify-content:center;
/* ⚠️ CAIXA ALTA PEDE ESPAÇO ENTRE AS LETRAS, e não o aperto que o texto
normal pede. Maiúscula não tem ascendente nem descendente: sem um
respiro positivo, as letras encostam e a palavra vira um bloco. Por isso
o `letter-spacing` sai de -.3px e vai para +.4px junto com a mudança. */
text-transform:uppercase;
font-size:19px;line-height:1.12;letter-spacing:.4px;text-align:center;
/* ⚠️ SEM SELEÇÃO DE TEXTO E SEM ROLAGEM DO NAVEGADOR durante o arrasto.
Sem `touch-action:none`, o dedo que anda para o lado leva a PÁGINA
junto e a faixa nunca chega ao fim. */
touch-action:none;user-select:none;-webkit-user-select:none;
box-shadow:0 16px 38px rgba(0,0,0,.5), 0 0 0 3px rgba(255,255,255,.10);
}
/* o segundo é vazado no computador (hero escuro); aqui ele fica sobre a
TELA BRANCA do aparelho e precisa de fundo próprio */
.hero-inicial .botoes .bt-2{background:#12171A;color:#fff;border-color:#12171A}
/* ---- o punho ---- */
.hero-inicial .botoes .punho{
position:absolute;left:5px;top:5px;width:54px;height:54px;border-radius:50%;
background:#fff;z-index:3;display:grid;place-items:center;
box-shadow:0 3px 10px rgba(0,0,0,.28);
transform:translateX(var(--x,0px));
transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
/* enquanto o dedo manda, o punho não tem vontade própria */
.hero-inicial .botoes .bt.arrastando .punho{transition:none}
.hero-inicial .botoes .punho svg{width:24px;height:24px}
.hero-inicial .botoes .bt-1 .punho{color:#8a6206}
.hero-inicial .botoes .bt-2 .punho{color:#12171A}
/* ⚠️ AS SETAS PULSAM PARA DIZER "ME ARRASTE" SEM ESCREVER ISSO. Um botão
que se arrasta e não avisa é um botão que não é usado; escrever "arraste"
em letra pequena ao lado seria a solução de quem desistiu do desenho. */
.hero-inicial .botoes .punho svg{animation:setaChama 1.9s ease-in-out infinite}
/* ---- o brilho que atravessa a faixa ---- */
/* É o segundo aviso de que a faixa é deslizável, e o que a torna "bem
chamativa" sem piscar cor nenhuma. */
.hero-inicial .botoes .bt::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.34) 50%,transparent 80%);
transform:translateX(-100%);
animation:brilhoDaFaixa 3.4s ease-in-out infinite;
}
.hero-inicial .botoes .bt-1::after{
background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
}
/* o rótulo fica na frente do brilho */
.hero-inicial .botoes .bt > span{position:relative;z-index:2}
/* ⚠️ CHEGOU AO FIM: a faixa se apaga e o punho fica verde por um instante,
para o toque ter resposta antes de a página trocar. */
.hero-inicial .botoes .bt.chegou .punho{background:#16a34a;color:#fff}
}
@keyframes setaChama{
0%,100%{transform:translateX(0);opacity:.75}
50% {transform:translateX(3px);opacity:1}
}
@keyframes brilhoDaFaixa{
0% {transform:translateX(-100%)}
55% {transform:translateX(100%)}
100% {transform:translateX(100%)}
}
/* ⚠️ QUEM PEDIU MENOS MOVIMENTO NÃO RECEBE NENHUM. A faixa continua sendo um
link que se toca; só o convite fica parado. */
@media(prefers-reduced-motion:reduce){
.hero-inicial .botoes .punho svg,
.hero-inicial .botoes .bt::after{animation:none}
.hero-inicial .botoes .punho{transition:none}
.hero-inicial .botoes .bt::after{opacity:0}
}
/* no computador o punho não existe */
.botoes .punho{display:none}