/* =========================================================
PuffHub, folha de estilo
Paleta: preto + roxo escuro metálico + aço
========================================================= */
:root{
/* Sem isto o navegador trata a página como clara: no Windows a barra de
rolagem saía branca ao lado do fundo preto, e a lista do "Ordenar
por" abria cinza. */
color-scheme:dark;
scrollbar-color:rgba(183,157,255,.24) transparent;
--bg: #08070b;
--bg-2: #0f0d15;
--panel: rgba(183,157,255,.045);
--line: rgba(183,157,255,.11);
--line-2: rgba(183,157,255,.24);
--ink: #ecebf3;
--ink-2: #c6c1d6; /* texto corrido: 10:1 no fundo */
--ink-3: #a8a2bb; /* legenda e rótulo: 7:1 no fundo; era #878199 */
--roxo: #7d5cc6; /* o roxo do dia a dia */
--roxo-2: #c3aaff; /* o brilho, ponto alto do metal */
--roxo-3: #2a1d45; /* a sombra do metal */
--aco: #8b90a6; /* aco, para o detalhe que nao e roxo */
/* Metal nao e uma cor, e uma rampa: sombra, cor, brilho, cor, sombra.
E o brilho fora do centro que faz a superficie parecer curva. Cor
chapada no lugar disso vira plastico roxo. */
--metal: linear-gradient(135deg,#241a3d 0%,#4d3789 26%,#8f74d8 50%,#4d3789 74%,#1e152f 100%);
--metal-2: linear-gradient(120deg,var(--roxo-3) 0%,var(--roxo) 38%,var(--roxo-2) 52%,var(--roxo) 66%,var(--roxo-3) 100%);
--radius: 18px;
--maxw: 1180px;
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1); /* entradas: comeca rapido e assenta */
--ease-io: cubic-bezier(.65,.05,.28,1); /* idas e voltas */
--t1: .2s; /* cor, borda, detalhe */
--t2: .3s; /* hover, chips, nav */
--t3: .62s; /* paineis e cards */
--t4: .72s; /* revelacao no scroll */
--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--display: "Space Grotesk", "Inter", system-ui, sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* A barra de cima é fixa e tem 79px. Sem esta folga, todo link de âncora
para o conteúdo exatamente embaixo dela: a pessoa clica em "Produtos" e
o título de Produtos fica escondido atrás da barra. */
[id]{ scroll-margin-top:6rem; }
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:var(--sans);
font-weight:300;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* `--sbw` é a largura da barra de rolagem, medida pelo catalog.js antes
de travar: o espaço dela é devolvido, senão a página inteira anda uns
15px para o lado ao abrir e fechar ficha ou comparação. */
body.is-locked{ overflow:hidden; padding-right:var(--sbw,0px); }
body.is-locked .nav{ right:var(--sbw,0px); }
/* A bandeja é centrada pela janela (left:50%): devolve meia barra. */
body.is-locked .bandeja{ margin-left:calc(var(--sbw,0px) / -2); }
img{ max-width:100%; display:block; }
/* `hidden` sempre esconde.
O navegador da `display:none` para [hidden], mas qualquer regra
nossa que declare `display` ganha dele. Isso ja tinha acontecido
tres vezes neste arquivo (a bandeja, o campo de autonomia, a janela
da comparacao), cada uma consertada com uma regra propria. Aqui fica
a regra que vale para tudo, inclusive para o que ainda vai ser
escrito. */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
font-family:var(--display); font-weight:500; line-height:1.06;
letter-spacing:-.022em; margin:0; text-wrap:balance;
}
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--roxo); color:#fff; }
/* Um estilo de foco só para toda a página, para quem navega no teclado. */
:where(a,button,[tabindex]):focus-visible{
outline:2px solid var(--roxo);
outline-offset:3px;
border-radius:6px;
}
/* ---------- fundo global ---------- */
body::before{
content:"";
position:fixed; inset:0; z-index:-3;
background:
radial-gradient(60rem 40rem at 80% 0%, rgba(125,92,198,.10), transparent 62%),
#09090c;
}
/* =========================================================
PALCO 3D
========================================================= */
.stage{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
/* Com a ficha aberta, a cena sobe para a frente do conteúdo.
A pilha da página é: cena em -1, conteúdo em 0, gaveta da ficha em 90.
A peça voltava a ser desenhada quando a ficha abria, mas continuava
em -1: ela aparecia ATRÁS dos cards da página, cortada e sem sentido
nenhum. Em 89 ela fica acima do conteúdo e abaixo da gaveta, que é
onde o véu da ficha a alcança e a escurece junto com o resto.
O grão sai de cena aqui: ele é uma textura de fundo em mix-blend-mode
e, subindo junto, tingiria a página inteira. */
body.peca-na-frente .stage{ z-index:89; }
/* O escuro da ficha de pod mora na CENA, nao no veu da gaveta.
O veu (.ficha__scrim) e filho da gaveta, que esta em 90: ele fica
por cima da peca, qualquer que seja o z-index dela. Com 34 a 56% de
preto na altura em que a peca aparece, todo pod saia fosco -- o rosa
do 5000 virava um rosa acinzentado ao lado da foto dele na mesma
ficha, e nenhum ajuste de luz resolvia, porque a luz nao era o
problema. Aqui o fundo escuro vai para tras da peca, na propria
camada da cena, e o veu fica transparente: continua recebendo o
clique que fecha a ficha, so nao pinta mais nada. De quebra o fundo
ficou mais escuro do que era, que e o que faz a cor da peca saltar. */
.stage{ transition:background-color var(--t3) var(--ease-io); }
body.peca-na-frente .stage{ background-color:rgba(4,3,6,.88); }
body.peca-na-frente .ficha__scrim{ background:transparent; }
body.peca-na-frente .stage__grain{ display:none; }
.stage canvas{ width:100%; height:100%; display:block; }
.stage__grain{
position:absolute; inset:0; opacity:.28; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8, de verdade fica
por cima, transparente: o toque abre a lista nativa do aparelho (a
melhor que existe no celular) e a pílula continua do tamanho da
sigla, não do nome mais comprido da lista. */
.idioma{
position:relative; flex:none;
display:inline-flex; align-items:center; gap:.4rem;
height:36px; padding:0 .8rem; border-radius:999px;
border:1px solid var(--line-2); color:var(--ink-2);
font-family:var(--sans); font-size:.76rem; font-weight:500; letter-spacing:.12em;
transition:color var(--t1) linear, border-color var(--t1) linear;
}
.idioma:hover,.idioma:focus-within{ color:var(--ink); border-color:var(--roxo); }
.idioma:focus-within{ outline:2px solid var(--roxo); outline-offset:3px; }
.idioma svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; }
.idioma__sel{
position:absolute; inset:0; width:100%; height:100%;
opacity:0; cursor:pointer; font-size:16px; /* 16px: o iOS nao da zoom */
-webkit-appearance:none; appearance:none; border:0;
}
.idioma__sel option{ background:#14111a; color:var(--ink); }
.agegate__card{ position:relative; }
.agegate__card .idioma{ position:absolute; top:1rem; right:1rem; }
/* Enquanto o dicionário chega, a página não aparece em português para
trocar de idioma na frente da pessoa. i18n.js tira a classe. */
.traduzindo body{ visibility:hidden; }
/* =========================================================
TIPOGRAFIA UTIL
========================================================= */
.eyebrow{
font-size:.74rem; letter-spacing:.28em; text-transform:uppercase;
color:var(--roxo-2); font-weight:500; margin-bottom:1.4rem;
}
.lede{
color:var(--ink-2); font-size:clamp(1rem,1.4vw,1.14rem);
line-height:1.65; max-width:52ch; text-wrap:pretty;
}
/* O trecho colorido do titulo.
O degrade comecava quase branco porque a frase antiga era "sem
chute." e as duas palavras dividiam a rampa: "sem" saia clara e
"chute" saia roxa. Com "3 perguntas." sozinho no lugar, comecar no
branco deixava metade da frase sem cor -- justo a metade que a frase
existe para destacar. Agora ele comeca ja no roxo claro. */
.grad{
background:linear-gradient(103deg,var(--roxo-2) 4%,var(--roxo) 92%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* =========================================================
HERO
========================================================= */
.hero{
min-height:100svh; display:flex; align-items:center;
padding:6rem clamp(1.1rem,4vw,3rem) 4rem;
position:relative;
}
.hero__inner{ width:100%; max-width:var(--maxw); margin:0 auto; }
.hero h1{
/* Três linhas pedem um corpo um pouco menor que o de duas, senão o
hero estoura a altura da tela em notebook. As quebras são manuais,
por isso o balanceamento automático fica desligado aqui. */
font-size:clamp(2.4rem, min(6.8vw, 10.2vh), 5.6rem);
line-height:1.02;
margin:0 0 1.1rem;
max-width:13ch;
text-wrap:wrap;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.7rem; }
/* A linha abaixo dos botões. Existe para tirar do caminho a dúvida que
trava o clique: quanto trabalho isso vai dar. */
.hero__nota{
margin-top:1rem; font-size:.86rem; color:var(--ink-3); max-width:34ch;
}
.hero__facts{
display:flex; flex-wrap:wrap; gap:clamp(1.5rem,5vw,3.5rem);
margin-top:2.25rem; padding-top:1.4rem; border-top:1px solid var(--line);
max-width:40rem;
}
.hero__facts strong{ display:block; font-family:var(--display); font-size:1.6rem; font-weight:500; color:var(--ink); }
.hero__facts span{ font-size:.82rem; color:var(--ink-3); letter-spacing:.04em; }
/* =========================================================
SEÇÕES
========================================================= */
.section{
max-width:var(--maxw); margin:0 auto;
padding:clamp(5rem,9vw,8rem) clamp(1.1rem,4vw,3rem);
}
.section__head{ max-width:44rem; margin-bottom:4rem; }
.section__head--center{ margin-inline:auto; text-align:center; }
.section h2{ font-size:clamp(2.1rem,5vw,3.7rem); margin-bottom:1.3rem; }
.section__head--center .lede{ margin-inline:auto; }
/* ---------- catálogo: filtros ---------- */
.filters{
display:flex; flex-wrap:wrap; gap:.5rem;
margin-bottom:2rem; padding-bottom:1.6rem;
border-bottom:1px solid var(--line);
}
.chip{
display:inline-flex; align-items:center; gap:.5rem;
padding:.55rem 1rem; cursor:pointer;
font-family:var(--sans); font-size:.86rem; color:var(--ink-2);
background:rgba(24,22,31,.7); border:1px solid var(--line);
border-radius:100px;
transition:color var(--t1) linear, border-color var(--t1) linear,
background var(--t1) linear, transform var(--t2) var(--ease-out);
}
.chip em{ font-style:normal; font-size:.72rem; color:var(--ink-3); }
.chip:hover{ color:var(--ink); border-color:var(--line-2); transform:translateY(-1px); }
.chip.is-on{ background:var(--roxo); border-color:var(--roxo); color:#fff; }
.chip.is-on em{ color:#fff; }
/* ---------- catálogo: grade ---------- */
.grid{
display:grid; gap:1rem;
grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
}
.prod{
position:relative; overflow:hidden; cursor:pointer; text-align:left;
display:flex; flex-direction:column; gap:.45rem;
padding:1.5rem 1.4rem 1.3rem; font:inherit; color:inherit;
border-radius:var(--radius);
background:linear-gradient(180deg, #17151e, #121118);
border:1px solid var(--line);
/* Sem `backdrop-filter` aqui de proposito.
Sao 43 cards na prateleira, e cada desfoque de fundo e recalculado
enquanto a pagina rola. O que havia atras deles para desfocar era o
degrade liso do fundo: o efeito custava caro e nao dava para ver.
O desfoque fica no que flutua sobre conteudo de verdade -- a barra
de cima, a bandeja da selecao, o botao de fechar a ficha. O fundo
do card ganhou um tico de opacidade no lugar. */
transition:transform var(--t2) var(--ease-out), border-color var(--t2), background var(--t2);
}
.prod::after{
content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
transition:opacity var(--t3) var(--ease-out);
background:radial-gradient(18rem 14rem at var(--mx,70%) var(--my,0%), rgba(125,92,198,.16), transparent 70%);
}
.prod:hover,.prod:focus-visible{ transform:translateY(-3px); border-color:var(--line-2); outline:none; }
.prod:hover::after,.prod:focus-visible::after{ opacity:1; }
.prod:focus-visible{ box-shadow:0 0 0 2px var(--roxo); }
.prod__art{
position:relative; overflow:hidden;
display:grid; place-items:center; height:132px; margin-bottom:.6rem;
border-radius:12px; border:1px solid var(--line);
/* Uma luz parada atrás da peça, na paleta: aparelho preto sumia no
quadro preto chapado. */
background:radial-gradient(62% 78% at 50% 52%, rgba(195,170,255,.17), rgba(125,92,198,.07) 58%, transparent 100%), rgba(0,0,0,.3);
}
/* Com a foto no lugar, o desenho de reserva sai: ele vazava em volta dos
aparelhos finos. */
.prod__art.tem-foto svg{ visibility:hidden; }
/* A foto cobre o desenho quando existe. Fica por cima, não no lugar:
assim, se a imagem falhar e se remover, o desenho já está ali. */
/* `contain`, nao `cover`.
Foto de produto e recortada em silhueta, com fundo transparente: o
aparelho aparece inteiro sobre o fundo escuro do card. `cover` corta
para preencher, e como quase todo vaporizador e alto e estreito, o
que ele cortava era o bocal e a base -- justo o que identifica a
peca. `contain` encaixa a peca dentro do quadro e deixa o fundo do
card aparecer em volta. */
.prod__foto{
position:absolute; inset:0; width:100%; height:100%;
object-fit:contain; border-radius:inherit;
transition:transform var(--t2) var(--ease-out);
}
.prod:hover .prod__foto{ transform:scale(1.04); }
.prod__art svg{
width:52px; height:52px; fill:none;
stroke:var(--roxo); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
transition:transform var(--t2) var(--ease-out), stroke var(--t2);
}
.prod:hover .prod__art svg{ transform:translateY(-2px) scale(1.05); stroke:var(--roxo-2); }
/* Pilula, nao texto solto: e o que faz a categoria ler como etiqueta e
nao como mais uma linha de texto do card. */
.prod__cat{
display:inline-flex; align-items:center; align-self:flex-start;
padding:.3rem .62rem; border-radius:999px;
border:1px solid var(--line); background:rgba(0,0,0,.35);
font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
}
.prod__name{ font-family:var(--display); font-size:1.14rem; line-height:1.2; }
.prod__blurb{ color:var(--ink-2); font-size:.9rem; line-height:1.5; }
.prod__foot{
display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
margin-top:.7rem; padding-top:.8rem; border-top:1px solid var(--line);
}
.prod__foot b{ font-family:var(--display); font-weight:500; color:var(--roxo-2); }
.grid__hint{ margin-top:1.6rem; font-size:.84rem; color:var(--ink-3); }
/* ---------- ficha: gaveta ---------- */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ficha{ position:fixed; inset:0; z-index:90; display:flex; justify-content:flex-end; }
.ficha[hidden]{ display:none; }
/* Sem backdrop-filter aqui de proposito: ele borraria a peca 3D, que e
justamente o que a gente quer que continue nitida. Quem recua e o
conteudo da pagina, logo abaixo. */
.ficha__scrim{
position:absolute; inset:0;
background:linear-gradient(90deg, rgba(5,4,4,.34) 0%, rgba(5,4,4,.56) 45%, rgba(5,4,4,.86) 100%);
}
main,.foot{ transition:filter var(--t3) var(--ease-io), opacity var(--t3) var(--ease-io); }
body.is-locked main,body.is-locked .foot,body.is-locked .nav{ filter:blur(3px); opacity:.45; }
.ficha__panel{
position:relative; width:min(620px,100%); height:100%; overflow-y:auto;
background:linear-gradient(180deg,#16141c,#0e0d12);
border-left:1px solid var(--line-2);
box-shadow:-30px 0 80px -30px #000;
}
.ficha__panel:focus{ outline:none; }
/* `--barra` é a altura medida da barra de pedido (catalog.js). A folga de
rolagem impede que o Tab leve o foco para baixo da barra, e a altura
mínima do corpo segura a barra no pé da gaveta quando a ficha é curta.
A folga fica nos alvos do CORPO, não no painel: como scroll-padding do
painel, os botões da própria barra (presa, dentro da faixa de folga)
faziam o navegador rolar a ficha centenas de pixels ao receber foco. */
.ficha__body :is(a,button,input,select,textarea,[tabindex]){
scroll-margin-bottom:calc(var(--barra, 6rem) + .75rem);
}
.ficha__body{ min-height:calc(100% - var(--barra, 6rem)); }
.ficha__x{
position:sticky; top:0; float:right; z-index:2;
width:44px; height:44px; margin:.8rem .8rem 0 0;
display:grid; place-items:center; cursor:pointer;
font-size:1.5rem; line-height:1; color:var(--ink-2);
background:rgba(24,22,31,.85); border:1px solid var(--line); border-radius:50%;
backdrop-filter:blur(10px); transition:color var(--t1), border-color var(--t1), transform var(--t2) var(--ease-io);
}
.ficha__x:hover{ color:var(--ink); border-color:var(--line-2); transform:rotate(90deg); }
.ficha__body{ padding:2.4rem clamp(1.3rem,4vw,2.6rem) 3rem; }
/* Capa da ficha: proporção fixa para o corte não depender do que a
pessoa subiu, e a gaveta não pular de altura entre um produto e outro. */
.ficha__foto{
margin:0 0 1.5rem; border-radius:14px; overflow:hidden;
border:1px solid var(--line);
background:radial-gradient(55% 70% at 50% 52%, rgba(195,170,255,.15), rgba(125,92,198,.06) 58%, transparent 100%), rgba(0,0,0,.3);
}
.ficha__foto img{ display:block; width:100%; aspect-ratio:16 / 10; object-fit:contain; }
.ficha__cat{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--roxo-2); }
.ficha__head h3{ font-size:clamp(1.6rem,3.6vw,2.2rem); margin:.7rem 0 .9rem; }
.ficha__resumo{ color:var(--ink-2); font-size:1rem; }
/* ---------- diagrama ---------- */
.ficha__diag{
margin:2rem 0;
border:1px solid var(--line); border-radius:var(--radius);
background:radial-gradient(circle at 50% 30%, rgba(125,92,198,.07), rgba(0,0,0,.32) 70%);
overflow:hidden;
}
.diagram{ padding:1.6rem 1.4rem; }
.diagram__box{
position:relative;
height:360px; width:calc(360px * var(--r,1));
max-width:100%; margin-inline:auto;
}
.diagram__svg{
display:block; width:100%; height:100%;
fill:none; stroke:var(--ink-3); stroke-width:2.4;
stroke-linecap:round; stroke-linejoin:round;
}
.diagram__svg g{ transition:stroke var(--t3) var(--ease-out), opacity var(--t3) var(--ease-out); opacity:.45; }
.diagram__svg g.is-on{ stroke:var(--roxo-2); opacity:1; }
.diagram__svg .d-fill path{ fill:rgba(125,92,198,.10); }
.diagram__svg g.is-on.d-fill path{ fill:rgba(125,92,198,.24); }
.diagram__svg .d-hot{ fill:rgba(125,92,198,.35); }
.diagram__svg g.is-on .d-hot{ fill:var(--roxo); }
.diagram__svg .d-thin{ stroke-dasharray:3 4; }
.spot{
position:absolute; transform:translate(-50%,-50%);
width:26px; height:26px; cursor:pointer;
display:grid; place-items:center;
font-family:var(--display); font-size:.74rem; color:var(--ink-2);
background:rgba(12,10,9,.9); border:1px solid var(--line-2); border-radius:50%;
transition:color var(--t1), background var(--t1), border-color var(--t1),
box-shadow var(--t2) var(--ease-out);
}
.spot:hover{ color:var(--ink); border-color:var(--roxo); }
.spot.is-on{
color:#fff; background:var(--roxo); border-color:var(--roxo);
box-shadow:0 0 0 6px rgba(125,92,198,.18);
}
/* ---------- tour guiado ---------- */
.tour{ padding:1.3rem 1.4rem 1.5rem; border-top:1px solid var(--line); background:rgba(0,0,0,.25); }
.tour__head{ display:flex; align-items:baseline; gap:.8rem; margin-bottom:.5rem; }
.tour__n{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.tour__n b{ color:var(--roxo-2); font-weight:500; }
.tour__head h4{ font-size:1.1rem; }
.tour p{ color:var(--ink-2); font-size:.94rem; min-height:4.2em; }
.tour__ctrl{ display:flex; align-items:center; gap:.5rem; margin-top:.9rem; }
.tour__btn{
width:36px; height:36px; cursor:pointer; display:grid; place-items:center;
font-size:1.2rem; line-height:1; color:var(--ink-2);
background:transparent; border:1px solid var(--line); border-radius:50%;
transition:color var(--t1), border-color var(--t1);
}
.tour__btn:hover{ color:var(--ink); border-color:var(--line-2); }
.tour__play{
padding:.5rem 1.1rem; cursor:pointer;
font-family:var(--sans); font-size:.82rem; color:var(--ink-2);
background:transparent; border:1px solid var(--line-2); border-radius:100px;
transition:color var(--t1), background var(--t1), border-color var(--t1);
}
.tour__play:hover{ color:var(--ink); }
.tour__play.is-on{ background:var(--roxo); border-color:var(--roxo); color:#fff; }
/* ---------- ficha: texto e specs ---------- */
.ficha__cols{ display:grid; gap:1.6rem; margin-bottom:2rem; }
.ficha__cols h5{
font-family:var(--display); font-size:.74rem; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(--roxo-2);
margin-bottom:.7rem;
}
.ficha__cols p,.ficha__cols li{ color:var(--ink-2); font-size:.94rem; }
.ficha__cols ul{ display:grid; gap:.55rem; }
.ficha__cols li{ position:relative; padding-left:1.1rem; list-style:none; }
.ficha__cols li::before{
content:""; position:absolute; left:0; top:.62em;
width:5px; height:5px; border-radius:50%; background:var(--roxo);
}
/* flex, não grid: a última linha estica para fechar a caixa. Em grade
sobrava uma célula vazia mostrando o fundo (que faz de linha). */
.ficha__specs{
display:flex; flex-wrap:wrap; gap:1px;
margin:0 0 2rem; background:var(--line); border:1px solid var(--line);
border-radius:14px; overflow:hidden;
}
.ficha__specs div{ flex:1 1 140px; background:#100e0c; padding:.9rem 1rem; }
.ficha__specs dt{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.ficha__specs dd{ margin:.2rem 0 0; font-family:var(--display); font-size:1rem; }
.ficha__preco{ display:flex; align-items:baseline; gap:.6rem; }
.ficha__preco s{ color:var(--ink-3); }
.ficha__preco b{ font-family:var(--display); font-size:1.8rem; color:var(--roxo-2); }
/* ---------- depoimentos ---------- */
.quotes{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:1.1rem; }
.quote{ margin:0; padding:1.8rem 1.6rem; border-radius:var(--radius); border:1px solid var(--line); background:rgba(0,0,0,.55); backdrop-filter:blur(14px); }
.quote blockquote{ margin:0 0 1rem; font-family:var(--display); font-size:1.02rem; line-height:1.5; }
.quote figcaption{ font-size:.8rem; color:var(--ink-3); letter-spacing:.05em; }
/* =========================================================
RODAPÉ
========================================================= */
.foot{ border-top:1px solid var(--line); background:rgba(0,0,0,.35); }
.foot__top{
max-width:var(--maxw); margin:0 auto; padding:4rem clamp(1.1rem,4vw,3rem) 3rem;
display:grid; gap:2.5rem; grid-template-columns:2fr 1fr 1fr;
}
.foot__note{ color:var(--ink-3); font-size:.88rem; margin-top:1rem; max-width:32ch; }
.foot h4{ font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.1rem; }
.foot nav a{ display:block; color:var(--ink-2); font-size:.92rem; padding:.3rem 0; transition:color var(--t1) linear; }
.foot nav a:hover{ color:var(--roxo-2); }
.foot__bar{
border-top:1px solid var(--line);
max-width:var(--maxw); margin:0 auto; padding:1.4rem clamp(1.1rem,4vw,3rem);
display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
color:var(--ink-3); font-size:.76rem;
}
/* =========================================================
PORTA DE IDADE
========================================================= */
.agegate{
position:fixed; inset:0; z-index:100;
display:grid; place-items:center; padding:1.5rem;
background:rgba(6,5,5,.86); backdrop-filter:blur(16px);
}
.agegate[hidden]{ display:none; }
/* A porta é levantada pelo CSS, não pelo JavaScript. Se o script falhar ou
estiver desligado, o site continua fechado em vez de abrir sozinho. */
:root[data-age="ok"] .agegate{ display:none; }
:root:not([data-age="ok"]) body{ overflow:hidden; }
:root:not([data-age="ok"]) main,
:root:not([data-age="ok"]) .foot,
:root:not([data-age="ok"]) .nav{ filter:blur(3px); opacity:.45; }
/* Na saída ela some com calma, mesmo já tendo liberado a página. */
.agegate.is-out{
display:grid !important; opacity:0; pointer-events:none;
transition:opacity var(--t2) var(--ease-io);
}
.agegate__card{
max-width:430px; text-align:center;
padding:2.6rem 2rem; border-radius:22px;
background:linear-gradient(180deg,#16130f,#0d0b0a);
border:1px solid var(--line-2);
box-shadow:0 40px 90px -30px #000;
animation:pop .5s var(--ease) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(18px) scale(.97); } }
.agegate__mark{
display:inline-block; font-family:var(--display); font-size:2.4rem; font-weight:700;
color:var(--roxo-2); letter-spacing:-.03em; margin-bottom:1rem;
}
.agegate__mark span{ color:var(--ink-3); }
.agegate h2{ font-size:1.45rem; margin-bottom:.9rem; }
.agegate p{ color:var(--ink-2); font-size:.94rem; }
.agegate__actions{ display:grid; gap:.6rem; margin:1.8rem 0 1.2rem; }
.agegate small{ color:var(--ink-3); font-size:.74rem; }
/* =========================================================
REVELAÇÃO NO SCROLL
========================================================= */
/* Revelacao no scroll. Dois cuidados que mudam muito a sensacao:
O deslocamento e curto de proposito. Elemento que sobe muito chama
atencao para a animacao; subindo pouco, o olho so registra que a
coisa assentou.
E o atraso em cascata tem teto. Com 15 cards na prateleira e 60 ms
por item, o ultimo esperava quase um segundo depois do primeiro, e
isso le como lentidao, nao como elegancia. Travado no decimo item, a
cascata inteira fecha em pouco mais de 300 ms. */
.reveal{
opacity:0; transform:translateY(9px);
transition:opacity var(--t4) var(--ease-out), transform var(--t4) var(--ease-out);
transition-delay:calc(min(var(--i,0), 9) * 36ms);
}
.reveal.is-in{ opacity:1; transform:none; }
/* =========================================================
RESPONSIVO
========================================================= */
@media (max-width:900px){
.foot__top{ grid-template-columns:1fr; }
.nav__wa{ display:none; }
.nav__burger{ display:grid; margin-left:auto; }
/* O idioma fica visível ao lado do menu, que é onde se procura. */
.nav .idioma{ margin-left:auto; }
.nav .idioma ~ .nav__burger{ margin-left:-1rem; }
.nav__links{
position:fixed; inset:64px 0 auto 0; margin:0;
flex-direction:column; gap:0; padding:1rem clamp(1.1rem,4vw,3rem) 2rem;
background:rgba(9,9,12,.97); backdrop-filter:blur(16px);
border-bottom:1px solid var(--line);
transform:translateY(-120%); transition:transform var(--t3) var(--ease-io);
}
.nav__links a{ padding:1rem 0; border-bottom:1px solid var(--line); font-size:1.05rem; }
.nav.is-open .nav__links{ transform:none; }
/* Ultimo item do menu, e o unico com cor: e a acao, nao mais um
destino. Sem borda embaixo porque fecha a lista. */
.nav__links .nav__zap{
display:flex; align-items:center; justify-content:center; gap:.5rem;
margin-top:1rem; padding:1rem 1.4rem; border-bottom:0;
border-radius:100px; background:var(--metal); color:#f2ecff;
font-size:1rem; font-weight:500;
box-shadow:0 10px 30px -12px rgba(125,92,198,.75);
}
.hero__facts{ gap:1.6rem; }
.hero__facts li{ min-width:8rem; }
}
@media (max-width:640px){
.ficha__panel{ width:100%; border-left:0; }
.tour p{ min-height:5.6em; }
.diagram__box{ height:260px; width:calc(260px * var(--r,1)); }
}
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
.reveal{ opacity:1; transform:none; }
.mascara .w > *{ transform:none; }
.hero__inner{ transform:none; opacity:1; }
.stage__aurora{ animation:none; }
}
/* =========================================================
PREÇO POR MIL PUFFS, SELOS E COMPARADOR
========================================================= */
/* A conta que decide a compra. Fica logo acima do preço, em fonte
menor: quem só quer o preço lê o preço, quem está comparando acha
o número sem abrir nada. */
.prod__unit{
display:block; margin-top:.55rem;
font-size:.78rem; color:var(--ink-3);
font-variant-numeric:tabular-nums;
}
.prod__unit b{ color:var(--ink-2); font-weight:500; }
/* Selos no canto do card. */
/* Empilhados: a largura é a do maior selo, não a soma deles. Lado a
lado, "novo" mais "últimas unidades" já não cabiam ao lado da caixa
"comparar" num card comum. */
.prod__selos{
position:absolute; top:.9rem; right:.9rem;
display:flex; flex-direction:column; align-items:flex-end; gap:.35rem;
}
/* Card estreito com selo: a caixa "comparar" fica só com o quadradinho.
Com o texto, ela cobria o começo do selo. As contas, no celular: 14px
de margem + 127px da caixa + 8px de folga + 136px de "últimas
unidades" + 14px = 300px de card. A consulta mede o conteúdo, sem os
22px de padding de cada lado: 300 - 45 - 2 = 254px. Acontece com 2
colunas entre 600 e 640px, celular de 320px e janela estreita no
computador. O nome continua para o leitor de tela, no aria-label. */
.prod{ container-type:inline-size; }
@container (max-width:256px){
/* Irmão, não :has(): os selos entram no card antes da caixa "comparar"
(catalog.js), e o Firefox 110 a 120 entende @container sem :has(). */
.prod__selos ~ .prod__cmp span{ display:none; }
}
.prod__selo{
font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
padding:.3rem .5rem; border-radius:999px; border:1px solid var(--line-2);
background:rgba(0,0,0,.45); color:var(--ink-2);
}
.prod__selo--novo{ color:#fff; background:var(--roxo); border-color:var(--roxo); }
.prod__selo--pouco{ color:#ffd9a0; border-color:rgba(255,190,110,.45); }
/* =========================================================
FERRAMENTAS DO CATÁLOGO
========================================================= */
.tools{
display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.4rem;
margin:1.4rem 0 2.2rem; padding-top:1.4rem;
border-top:1px solid var(--line);
}
.tools__campo{ display:flex; flex-direction:column; gap:.5rem; min-width:11rem; }
/* `display:flex` aqui vence o `display:none` que o navegador da a
[hidden], entao esconder o campo pelo atributo nao funcionava:
ele continuava na tela. Esta linha devolve o comportamento. */
.tools__campo[hidden]{ display:none; }
.tools__campo > span{
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.tools__campo > span b{ color:var(--roxo-2); font-weight:500; letter-spacing:0; text-transform:none; font-size:.85rem; }
.tools select{
appearance:none; font:inherit; font-size:.92rem; color:var(--ink);
background:rgba(0,0,0,.45); border:1px solid var(--line-2);
border-radius:999px; padding:.6rem 2.2rem .6rem 1rem; cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
background-position:calc(100% - 1.1rem) 55%,calc(100% - .8rem) 55%;
background-size:5px 5px,5px 5px; background-repeat:no-repeat;
transition:border-color var(--t2);
}
.tools select:hover{ border-color:var(--roxo); }
.tools select option,.tools select optgroup{ background:#14111a; color:var(--ink); }
/* O , entao
cabe controle proprio dentro dele. */
.prod__abrir{
font:inherit; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--ink-3); background:none; border:none; padding:0; cursor:pointer;
transition:color var(--t1) linear;
}
.prod__abrir::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.prod:hover .prod__abrir{ color:var(--ink-2); }
.prod__abrir:focus-visible{ outline:2px solid var(--roxo-2); outline-offset:3px; }
.prod__cmp{
position:absolute; left:.9rem; top:.9rem; z-index:2;
display:flex; align-items:center; gap:.45rem; cursor:pointer;
font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
color:var(--ink-3); padding:.35rem .6rem .35rem .45rem;
border-radius:999px; border:1px solid transparent;
background:rgba(0,0,0,.5); opacity:0;
transition:opacity var(--t2), color var(--t2), border-color var(--t2);
}
.prod:hover .prod__cmp,
.prod__cmp:focus-within,
.prod__cmp.is-on{ opacity:1; }
.prod__cmp.is-on{ color:var(--roxo-2); border-color:var(--roxo); }
.prod__cmp input{ accent-color:var(--roxo); width:14px; height:14px; cursor:pointer; }
/* ---------- primeira compra, na ficha ---------- */
.ficha__primeira{ margin:.35rem 0 0; font-size:.8rem; color:var(--ink-2); }
.ficha__primeira b{ color:var(--roxo-2); font-family:var(--display); font-weight:500; }
/* ---------- bandeja da selecao ---------- */
.bandeja{
position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%);
z-index:60; display:flex; align-items:center; gap:1.4rem;
padding:.7rem .8rem .7rem 1.3rem; border-radius:999px;
border:1px solid var(--line-2); background:rgba(14,12,20,.92);
backdrop-filter:blur(18px) saturate(120%);
box-shadow:0 18px 50px -18px rgba(0,0,0,.9);
}
/* `display:flex` na regra acima ganha do `display:none` que o navegador
dá para [hidden], então a barra aparecia vazia assim que a página
abria. Sempre que uma regra nossa declara display, o hidden precisa
ser declarado junto. */
.bandeja[hidden]{ display:none; }
/* A bandeja é fixa e cobria o aviso de saúde no fim da página também no
computador. `--bandeja` é a altura medida (catalog.js). */
body.tem-bandeja{ padding-bottom:calc(var(--bandeja, 4.5rem) + 2.8rem); }
.bandeja__n{ font-size:.88rem; color:var(--ink-2); white-space:nowrap; }
.bandeja__n b{ color:var(--ink); font-family:var(--display); }
.bandeja__acoes{ display:flex; align-items:center; gap:.5rem; }
.bandeja .btn{ padding:.6rem 1.1rem; font-size:.85rem; white-space:nowrap; }
.bandeja__x{
font:inherit; font-size:1.3rem; line-height:1; color:var(--ink-3);
background:none; border:none; cursor:pointer; padding:0 .4rem;
transition:color var(--t1) linear;
}
.bandeja__x:hover{ color:var(--ink); }
/* ---------- janela da comparacao ---------- */
.tabela{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:1.2rem; }
.tabela[hidden]{ display:none; }
.tabela__fundo{ position:absolute; inset:0; background:rgba(4,3,8,.8); }
.tabela__caixa{
position:relative; width:min(860px,100%); max-height:86vh; overflow:auto;
padding:2.4rem clamp(1.2rem,3vw,2.4rem);
border-radius:var(--radius); border:1px solid var(--line-2);
background:rgba(16,14,22,.98);
}
.tabela h3{ font-family:var(--display); font-size:1.5rem; margin:0 0 1.6rem; }
.cmp{ width:100%; border-collapse:collapse; font-size:.92rem; }
.cmp th,.cmp td{ padding:.85rem .7rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.cmp thead th{
font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-3); font-weight:400;
}
.cmp tbody th{
font-weight:400; color:var(--ink-3); font-size:.82rem; white-space:nowrap;
}
.cmp td{ font-variant-numeric:tabular-nums; }
.cmp .melhor{ color:var(--roxo-2); }
.cmp .melhor::after{ content:" melhor"; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
.cmp__nome{ font-family:var(--display); color:var(--ink); font-size:1rem; }
@media (max-width:640px){
.bandeja{ left:1rem; right:1rem; transform:none; flex-direction:column; align-items:stretch; gap:.7rem; border-radius:var(--radius); }
.bandeja__acoes{ justify-content:space-between; }
/* O X sobe para o canto, ao lado da contagem. Na fileira dos botões
ele somava 52px a "Comparar" e "Pedir no WhatsApp": em 360px o X
passava da borda da bandeja, e em 320px saía da tela. Os dois botões
dividem a fileira e, só se ainda faltar espaço, quebram o texto. */
.bandeja__x{ position:absolute; top:.2rem; right:.2rem; }
body.is-locked .bandeja{ margin-left:0; right:calc(1rem + var(--sbw,0px)); }
.bandeja__acoes .btn{ flex:1 1 auto; white-space:normal; text-align:center; }
.tools{ gap:1rem; }
.tools__campo{ min-width:100%; }
}
/* =========================================================
FERRAMENTAS: QUIZ E CALCULADORA
========================================================= */
/* min(320px,100%): numa tela de 320px a caixa não cabe em 320px depois
das margens, e a página inteira rolava de lado 20px. */
.duo{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); }
.ferr{
padding:2rem 1.8rem; border-radius:var(--radius);
border:1px solid var(--line); background:rgba(20,17,26,.82);
}
.ferr h3{ font-family:var(--display); font-size:1.35rem; margin:0 0 .5rem; }
.ferr__sub{ color:var(--ink-2); font-size:.92rem; margin:0 0 1.6rem; }
.ferr__campo{ display:block; margin-bottom:1.4rem; }
.ferr__campo span{ display:block; font-size:.88rem; color:var(--ink-2); margin-bottom:.7rem; }
.ferr__campo b{ color:var(--roxo-2); font-family:var(--display); }
.ferr__campo input[type=range]{
appearance:none; -webkit-appearance:none;
width:100%; height:22px; background:transparent; cursor:pointer;
}
.ferr__campo input[type=range]::-webkit-slider-runnable-track{
height:2px; border-radius:2px; background:var(--line-2);
}
.ferr__campo input[type=range]::-moz-range-track{
height:2px; border-radius:2px; background:var(--line-2);
}
.ferr__campo input[type=range]::-webkit-slider-thumb{
appearance:none; -webkit-appearance:none;
width:18px; height:18px; border-radius:50%;
background:var(--roxo-2); border:none; cursor:pointer;
margin-top:-8px; /* centra o botao num trilho de 2px */
}
.ferr__campo input[type=range]::-moz-range-thumb{
width:18px; height:18px; border-radius:50%; background:var(--roxo-2);
border:none; cursor:pointer;
}
.ferr__campo input[type=range]:focus-visible::-webkit-slider-thumb{
outline:2px solid var(--roxo-2); outline-offset:2px;
}
/* ---------- quiz ---------- */
.q__passo{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.8rem; }
.q__t{ font-family:var(--display); font-size:1.1rem; margin:0 0 1.1rem; line-height:1.35; }
.q__ops{ display:flex; flex-direction:column; gap:.55rem; }
.q__op{
font:inherit; text-align:left; cursor:pointer;
padding:.85rem 1.1rem; border-radius:12px;
border:1px solid var(--line-2); background:rgba(0,0,0,.3); color:var(--ink);
transition:border-color var(--t2), background var(--t2), transform var(--t2) var(--ease-out);
}
.q__op:hover{ border-color:var(--roxo); transform:translateX(3px); }
.q__voltar{
margin-top:1.2rem; font:inherit; font-size:.85rem; color:var(--ink-3);
background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.q__voltar:hover{ color:var(--ink); }
.q__res{ display:flex; flex-direction:column; gap:.8rem; }
/* O resultado do quiz é um botão que abre a ficha. Terminar numa
recomendação que a pessoa precisa ir procurar na lista à mão joga fora
o trabalho das três perguntas. */
.q__card{
font:inherit; text-align:left; cursor:pointer; width:100%;
display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
padding:1rem 1.2rem; border-radius:12px; color:var(--ink);
border:1px solid var(--line-2); background:rgba(0,0,0,.3);
transition:border-color var(--t2), background var(--t2),
transform var(--t2) var(--ease-out);
}
.q__card:hover{ border-color:var(--roxo); background:rgba(0,0,0,.5); transform:translateY(-2px); }
.q__card:focus-visible{ outline:2px solid var(--roxo-2); outline-offset:3px; }
.q__card__txt{ display:block; }
.q__rot{
display:block; font-style:normal; font-size:.64rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--roxo-2); margin-bottom:.35rem;
}
.q__card b{ font-family:var(--display); font-weight:500; display:block; margin-bottom:.3rem; }
.q__card small{ color:var(--ink-3); font-size:.83rem; line-height:1.5; display:block; }
.q__card__fim{ display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.q__card i{ font-style:normal; color:var(--roxo-2); font-family:var(--display); white-space:nowrap; }
.q__card u{
text-decoration:none; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-3); white-space:nowrap; transition:color var(--t1) linear;
}
.q__card:hover u{ color:var(--ink-2); }
/* ---------- calculadora ---------- */
/* Lista ordenada, não tabela: a posição no ranking é parte do que a
calculadora responde, e cada linha precisa ser clicável de ponta a
ponta. Dentro de isso não sai sem posicionamento torto. */
.calc{ list-style:none; margin:0; padding:0; }
.calc li + li{ border-top:1px solid var(--line); }
.calc__linha{
font:inherit; cursor:pointer; width:100%; text-align:left;
display:grid; grid-template-columns:1.4rem 1fr auto; align-items:center;
gap:.9rem; padding:.75rem .3rem; min-height:44px;
background:none; border:none; color:var(--ink-2);
transition:color var(--t1) linear, background var(--t2);
border-radius:8px;
}
.calc__linha:hover{ color:var(--ink); background:rgba(255,255,255,.03); }
.calc__linha:focus-visible{ outline:2px solid var(--roxo-2); outline-offset:2px; }
.calc__pos{
font-family:var(--display); font-size:.8rem; color:var(--ink-3);
font-variant-numeric:tabular-nums;
}
.calc__nome{ display:block; font-size:.9rem; }
/* Na mesma linha, não embaixo. Como segunda linha cada item ficava com
68px e a lista de cinco crescia 140px sem dizer nada a mais -- o
"em seis meses" já está no título do painel. */
.calc__nome em{ font-style:normal; font-size:.76rem; color:var(--ink-3); white-space:nowrap; }
.calc__total{
font-family:var(--display); white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* O primeiro da lista e o mais barato: e a resposta da pergunta. */
.calc li:first-child .calc__linha{ color:var(--ink); }
.calc li:first-child .calc__total,
.calc li:first-child .calc__pos{ color:var(--roxo-2); }
.calc__nota{ color:var(--ink-3); font-size:.82rem; line-height:1.6; margin:1.2rem 0 0; }
/* =========================================================
BANNERS
========================================================= */
.section--promo{ padding-top:0; }
.promos{
display:grid; gap:1.2rem;
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.promo{
position:relative;
display:flex; flex-direction:column; overflow:hidden;
border:1px solid var(--line); border-radius:var(--radius);
background:var(--panel);
transition:border-color var(--t2), transform var(--t2) var(--ease-out);
}
.promo:hover{ border-color:var(--line-2); transform:translateY(-3px); }
/* Proporção fixa: sem ela a faixa muda de altura conforme a arte que
cada banner recebe, e os três cards deixam de casar. */
.promo__arte{
position:relative; aspect-ratio:16 / 9; overflow:hidden;
background:radial-gradient(circle at 50% 35%, rgba(125,92,198,.14), rgba(0,0,0,.4) 70%);
border-bottom:1px solid var(--line);
display:grid; place-items:center;
}
.promo__arte img{ width:100%; height:100%; object-fit:cover; display:block; }
.promo__txt{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.promo__tag{
font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--roxo-2); margin:0 0 .6rem;
}
.promo h3{ font-family:var(--display); font-size:1.15rem; font-weight:500; margin:0 0 .55rem; }
.promo__d{ color:var(--ink-2); font-size:.9rem; line-height:1.6; margin:0 0 1.1rem; }
.promo__cta{
margin-top:auto; align-self:flex-start;
font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-2); padding:.55rem 0; min-height:44px;
display:inline-flex; align-items:center; gap:.45rem;
transition:color var(--t1) linear;
}
.promo__cta::after{ content:"\2192"; transition:transform var(--t2) var(--ease-out); }
/* O link cobre o card: a arte e o título também levam ao destino. */
.promo__cta::before{ content:""; position:absolute; inset:0; }
.promo__cta:hover{ color:var(--roxo-2); }
.promo__cta:hover::after{ transform:translateX(4px); }
/* =========================================================
TOQUE
Tudo aqui sai de medir a página a 375px, não de achismo. O celular não
tem hover e não tem ponteiro fino: as duas coisas mudam o que existe na
tela, não só o tamanho.
========================================================= */
/* O alvo grande vale para o dedo. No mouse, 44px de altura em volta de
um traço de 2px abre um vão de 21px entre o rótulo e o controle, e o
traço para de alinhar com a base do campo ao lado. */
@media (pointer:coarse){
.tools input[type=range],
.ferr__campo input[type=range]{ height:44px; }
/* 16px e o limite do Safari no iPhone: abaixo disso ele dá zoom na
pagina quando o campo recebe o toque, e a pessoa fica com o site
ampliado e torto so por ter tocado na busca. */
.tools input[type=search]{ font-size:16px; }
}
@media (hover:none){
/* Sem esta regra o comparador simplesmente não existe no celular. Ele
aparecia com `.prod:hover`, e num aparelho de toque esse estado nunca
acontece: a caixa ficava com opacidade 0 para sempre, e o recurso
inteiro era invisível para quem entra pelo telefone. */
.prod__cmp{ opacity:1; }
.prod__abrir{ color:var(--ink-2); }
}
@media (max-width:640px){
/* Alvos de toque. O mínimo confortável é 44px de altura; abaixo disso a
pessoa erra o clique e culpa o site. */
.chip{ min-height:44px; padding:.55rem 1rem; }
.prod__cmp{ min-height:44px; padding:.5rem .8rem .5rem .6rem; }
.prod__cmp input{ width:18px; height:18px; }
.tools__limpar{ min-height:44px; }
.bandeja__x{ min-width:44px; min-height:44px; }
/* O iOS dá zoom na página quando você toca num campo com fonte menor
que 16px, e depois deixa a página torta. Só o precisa: range
e checkbox não recebem digitação e não disparam o zoom. */
.tools select{ font-size:16px; }
/* A tabela de comparação media 432px dentro de uma caixa de 337px e
rolava de lado. Comparar lado a lado exigindo rolar para o lado não
compara nada.
Diminuir fonte e espaçamento não bastou: sem table-layout fixed a
tabela adota a largura mínima do conteúdo e ainda passava 28px da
caixa, que é pouco demais para parecer rolagem de propósito e o
bastante para parecer quebrado. Com layout fixo as colunas dividem
a largura que existe e o texto quebra dentro delas. */
/* Preço e "ver por dentro" saem da coluna da direita e viram uma faixa
embaixo. Em 375px eles disputavam a largura com o nome do produto, e
"Elf Bar Duke 35K" quebrava em duas linhas para caber no que sobrava. */
.q__card{ flex-direction:column; align-items:stretch; gap:.7rem; }
.q__card__fim{
flex-direction:row; align-items:baseline; justify-content:space-between;
padding-top:.7rem; border-top:1px solid var(--line);
}
.cmp{ table-layout:fixed; width:100%; }
/* A fonte aqui é pequena de propósito, e foi calculada, não chutada.
Em 375px sobram 297px para quatro colunas. As duas palavras mais
longas são "descartável" e "declarados": a 11,5px elas medem cerca
de 63px e 58px, e cabem inteiras nas colunas de 68px e 59px de
conteúdo. Com uma fonte maior elas quebram no meio e sobra letra
solta na linha de baixo, que é pior de ler do que a fonte menor. */
.cmp th,.cmp td{ padding:.55rem .25rem; font-size:.72rem; }
.cmp tbody th{ white-space:normal; width:4.2rem; }
.cmp .melhor::after{ display:block; content:"melhor"; }
/* Os links do rodapé tinham 33px de altura. São eles que levam ao
WhatsApp e ao e-mail: errar o toque aí custa contato. */
.foot nav a{ padding:.65rem 0; }
.nav__logo{ display:inline-flex; align-items:center; min-height:44px; }
/* O aviso de saúde a 10px é pequeno demais para o que ele diz. O
encolhe de novo por conta própria, então ele volta a 1em. */
.foot__bar{ font-size:.82rem; }
.foot__bar small{ font-size:1em; }
/* A bandeja é fixa e cobre o pé da página. Sem esta folga, a última
linha do rodapé fica embaixo dela e não dá para ler. `--bandeja` é a
altura medida (catalog.js): com a linha do kit ela passa de 140px. */
body.tem-bandeja{ padding-bottom:calc(var(--bandeja, 6rem) + 2.6rem); }
}
/* =========================================================
ESTÉTICA: FUNDO VIVO, MÁSCARAS, FAIXA, PASSOS, CHAMADA
O que veio de olhar a Breakr e a Bahtech: fundo com aurora e grade
de pontos, título que sobe palavra a palavra, passos com coluna fixa e números acendendo, e um fecho
com chamada grande. Os gestos são os deles; a cor, a letra e o
texto são os nossos.
========================================================= */
/* ---------- fundo: aurora e grade de pontos ----------
Os dois moram dentro de .stage, ATRÁS do canvas: assim ficam entre
o fundo da página e a peça 3D. Como filhos do hero eles sairiam por
cima da peça, que vive numa camada fixa em z -1. Com a ficha aberta
os dois somem, como o grão: a cena escura da ficha foi acertada sem
eles e continua igual. */
.stage__aurora{
position:absolute; left:50%; top:-12%; width:72vmax; height:72vmax;
margin-left:-36vmax; border-radius:50%; pointer-events:none;
background:radial-gradient(closest-side, rgba(125,92,198,.30), rgba(125,92,198,.09) 46%, transparent 72%);
animation:deriva 28s ease-in-out infinite alternate;
will-change:transform;
}
@keyframes deriva{
from{ transform:translate3d(-14%,-4%,0) scale(1); }
to{ transform:translate3d(16%,12%,0) scale(1.18); }
}
.stage__pontos{
position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(rgba(195,170,255,.32) 1px, transparent 1.5px);
background-size:28px 28px;
-webkit-mask-image:radial-gradient(70% 80% at 32% 50%, #000 10%, transparent 72%);
mask-image:radial-gradient(70% 80% at 32% 50%, #000 10%, transparent 72%);
/* Some conforme a primeira tela rola. `--rolou` e escrita pelo
app.js no proprio `.stage` (e no `.hero`), nao na raiz do
documento: na raiz, cada quadro invalidaria o estilo da pagina
inteira -- inclusive os 43 cards da prateleira, que nem usam isso. */
opacity:calc(.6 * (1 - var(--rolou, 0)));
will-change:opacity;
}
body.peca-na-frente .stage__aurora,
body.peca-na-frente .stage__pontos{ display:none; }
/* ---------- hero: o texto recua enquanto a página começa a rolar ---------- */
.hero__inner{
transform:translateY(calc(var(--rolou, 0) * 3vh));
}
/* ---------- títulos: cada palavra sobe de dentro de uma máscara ----------
app.js embrulha cada palavra em palavra