/* Falcon Suplementos · site v1 (14/11/2026). Preto do logo, uma tinta clara, UM ouro. Vidro líquido, pouco texto. */
:root{
  /* --t = tinta e --f = fundo, em números, pra montar as transparências; o tema claro só inverte os dois */
  --t:246 245 241; --f:0 0 0; --tinta:rgb(var(--t)); --fundo:rgb(var(--f));
  --mudo:rgb(var(--t) / .62); --fraco:rgb(var(--t) / .4); --linha:rgb(var(--t) / .11);
  --ouro:#F7B91C; --sobre-ouro:#0C0A06; --ouro-txt:#F7B91C; --grifo:transparent;
  --cartao:rgb(var(--t) / .045); --cartao2:rgb(var(--t) / .09); --folha:rgb(17 17 19 / .8); --zap:#25D366; --balao:#005C4B; --balao-t:#E9EDEF;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --borda:max(16px,calc((100vw - 1200px)/2)); --mola:cubic-bezier(.2,.8,.2,1); --salto:cubic-bezier(.3,1.45,.45,1);
  --topo:max(10px,env(safe-area-inset-top,0px)); --baixo:calc(14px + env(safe-area-inset-bottom,0px));
  color-scheme:dark;
}
:root[data-tema="claro"]{
  --t:17 16 14; --f:243 242 238; --mudo:rgb(var(--t) / .64); --fraco:rgb(var(--t) / .42); --linha:rgb(var(--t) / .1);
  --ouro-txt:var(--tinta); --grifo:var(--ouro);
  --cartao:rgb(255 255 255 / .55); --cartao2:rgb(255 255 255 / .92); --folha:rgb(248 247 244 / .84); --zap:#128C4B; --balao:#D9FDD3; --balao-t:#111B21;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:96px;background:var(--fundo);-webkit-text-size-adjust:100%}
body{background:var(--fundo);color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.5;font-weight:420;-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100dvh}
html:has(dialog[open]){overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit;color:inherit}
ul,ol{list-style:none}
h1,h2{font-stretch:116%;font-weight:800;letter-spacing:-.03em;line-height:.98;text-wrap:balance}
.ic{flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--ouro);color:var(--sobre-ouro)}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:10px}

/* luz ambiente atrás de tudo: é ela que faz o vidro parecer vidro */
.fundo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.luz{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.l1{width:62vmax;height:62vmax;right:-22vmax;top:-26vmax;background:radial-gradient(closest-side,rgb(247 185 28 / .3),transparent);animation:vaga 22s ease-in-out infinite alternate}
.l2{width:54vmax;height:54vmax;left:-24vmax;top:46vh;background:radial-gradient(closest-side,rgb(247 185 28 / .13),transparent);animation:vaga 28s ease-in-out infinite alternate-reverse}
[data-tema="claro"] .l1{background:radial-gradient(closest-side,rgb(247 185 28 / .42),transparent)}
[data-tema="claro"] .l2{background:radial-gradient(closest-side,rgb(255 214 110 / .5),transparent)}
@keyframes vaga{to{transform:translate3d(-9vmax,7vmax,0) scale(1.12)}}

/* vidro líquido: fundo translúcido que borra o que está atrás, brilho na borda de cima e sombra na de baixo */
.vidro{position:relative;isolation:isolate;background:rgb(var(--t) / .07);-webkit-backdrop-filter:blur(20px) saturate(1.9);backdrop-filter:blur(20px) saturate(1.9);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .26),inset 0 -1px 0 rgb(0 0 0 / .3),inset 0 0 0 1px rgb(var(--t) / .09),0 14px 34px -16px rgb(0 0 0 / .7)}
.vidro::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(125deg,rgb(255 255 255 / .17),rgb(255 255 255 / 0) 34%,rgb(255 255 255 / 0) 66%,rgb(255 255 255 / .08))}
[data-tema="claro"] .vidro{background:rgb(255 255 255 / .52);box-shadow:inset 0 1px 0 rgb(255 255 255 / .95),inset 0 -1px 0 rgb(0 0 0 / .06),inset 0 0 0 1px rgb(0 0 0 / .05),0 14px 30px -18px rgb(0 0 0 / .32)}
[data-tema="claro"] .vidro::after{background:linear-gradient(125deg,rgb(255 255 255 / .8),rgb(255 255 255 / 0) 36%,rgb(255 255 255 / 0) 70%,rgb(255 255 255 / .4))}

.topo,.abas,.doca,.zap{background:rgb(var(--f) / .58)}
[data-tema="claro"] .topo,[data-tema="claro"] .abas,[data-tema="claro"] .doca,[data-tema="claro"] .zap{background:rgb(255 255 255 / .74)}

/* botões: ouro é a ação principal; vidro é a secundária */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 24px;border-radius:999px;font-weight:650;font-size:15.5px;letter-spacing:-.005em;white-space:nowrap;transition:transform .35s var(--mola),filter .2s}
.bt:hover{transform:translateY(-2px)}
.bt:active{transform:scale(.96)}
.bt-p{background:var(--ouro);color:var(--sobre-ouro);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -2px 0 rgb(0 0 0 / .12),0 12px 28px -12px rgb(247 185 28 / .65)}
.bt-p:hover{filter:brightness(1.06)}
.bt-v{color:var(--tinta)}
.bt-v .ic{color:var(--zap)}
.bt-cheio{width:100%}

/* topo: cápsula de vidro flutuando; o que rola por baixo some suave */
body::before{content:"";position:fixed;inset:0 0 auto;height:calc(var(--topo) + 70px);z-index:38;pointer-events:none;background:linear-gradient(rgb(var(--f)) calc(var(--topo) + 6px),rgb(var(--f) / 0))}
.topo{position:fixed;z-index:40;top:var(--topo);left:var(--borda);right:var(--borda);height:62px;border-radius:999px;display:flex;align-items:center;gap:8px;padding:0 10px}
.marca{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0}
.marca img{width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 1px rgb(255 255 255 / .16)}
.marca-nome{display:grid;line-height:1}
.marca-nome b{font-size:17px;font-weight:900;font-style:italic;font-stretch:125%;text-transform:uppercase;letter-spacing:.01em}
.marca-nome i{font-style:normal;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.24em;color:var(--mudo);margin-top:4px}
.topo-nav{display:none;gap:28px;margin-right:22px}
.topo-nav a{font-size:14.5px;font-weight:500;color:var(--mudo);transition:color .2s}
.topo-nav a:hover{color:var(--tinta)}
.sacola-bt{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--ouro);color:var(--sobre-ouro);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5);transition:transform .35s var(--mola)}
.sacola-bt:active{transform:scale(.92)}
.sacola-bt.pulo{animation:pulo .5s var(--salto)}
.conta{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--tinta);color:var(--fundo);font-size:11.5px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--fundo)}
@keyframes pulo{35%{transform:scale(1.22)}70%{transform:scale(.94)}}

/* botão de tema: cápsula de vidro com uma lente que desliza entre a lua e o sol */
.tema{width:68px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;flex-shrink:0}
.tema .ic{position:relative;z-index:2;opacity:.45;transition:opacity .35s,transform .5s var(--mola)}
.tema .t-lua{opacity:1}
.tema-lente{position:absolute;z-index:1;top:4px;left:4px;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 32% 24%,rgb(255 255 255 / .55),rgb(255 255 255 / .16) 46%,rgb(255 255 255 / .07));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .65),inset 0 -2px 5px rgb(0 0 0 / .25),inset 0 0 0 1px rgb(255 255 255 / .16),0 3px 10px rgb(0 0 0 / .45);
  transition:transform .55s var(--salto)}
.tema.indo .tema-lente{animation:gota .55s cubic-bezier(.4,0,.2,1)}
@keyframes gota{35%{scale:1.38 .8}70%{scale:.94 1.06}}
.tema:active .tema-lente{scale:1.12 .92}
[data-tema="claro"] .tema-lente{transform:translateX(30px);background:radial-gradient(circle at 32% 24%,#fff,rgb(255 226 140 / .85) 55%,rgb(247 185 28 / .7));box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgb(0 0 0 / .08),0 0 0 1px rgb(0 0 0 / .05),0 3px 12px rgb(247 185 28 / .55)}
[data-tema="claro"] .tema .t-lua{opacity:.4}
[data-tema="claro"] .tema .t-sol{opacity:1;transform:rotate(60deg)}
/* a troca de tema abre em círculo a partir do botão (onde o navegador permite) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* abertura */
.abre{position:relative;display:grid;gap:36px;align-items:center;padding:calc(var(--topo) + 94px) var(--borda) 22px;overflow:clip}
.abre-txt{display:grid;gap:18px;justify-items:start;min-width:0}
.selo{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px 0 12px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.pisca{width:7px;height:7px;border-radius:50%;background:var(--ouro);box-shadow:0 0 0 0 rgb(247 185 28 / .6);animation:pisca 2.4s infinite}
@keyframes pisca{70%{box-shadow:0 0 0 9px rgb(247 185 28 / 0)}100%{box-shadow:0 0 0 0 rgb(247 185 28 / 0)}}
h1{font-size:clamp(33px,10.9vw,68px)}
h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
h1 .ln>span{display:block;white-space:nowrap;transform:translateY(108%);animation:linha 1s var(--mola) .1s forwards}
h1 .ln:nth-child(2)>span{animation-delay:.22s}
@keyframes linha{to{transform:none}}
h1 em{font-style:italic;color:var(--ouro-txt);background:linear-gradient(transparent 58%,var(--grifo) 58%,var(--grifo) 92%,transparent 92%);padding:0 .06em;margin:0 -.06em}
.sub{font-size:clamp(16px,1.6vw,19px);color:var(--mudo);max-width:34em;animation:surge .8s .5s both}
.acoes{display:flex;gap:8px;margin-top:4px;animation:surge .8s .62s both}
.selo{animation:surge .8s both}
@keyframes surge{from{opacity:0;transform:translateY(12px)}}
.palco,.so-pc{display:none}
@media (max-width:420px){.acoes .bt{padding:0 20px}}

/* três provas (só no celular; no computador elas flutuam no palco) */
.provas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 var(--borda)}
.provas li{border-radius:20px;padding:13px 10px 12px;display:grid;gap:8px;justify-items:start;align-content:start}
.provas .ic{color:var(--ouro-txt)}
[data-tema="claro"] .provas .ic,[data-tema="claro"] .ficha .ic{color:#B07A00}
.provas b{display:block;font-size:13px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.provas small{display:block;font-size:11px;color:var(--mudo);line-height:1.25;margin-top:3px}

/* catálogo */
.cat{padding:64px var(--borda) 0}
.cat-topo{display:grid;gap:16px}
.cat h2{font-size:clamp(34px,6vw,64px)}
.busca{display:flex;align-items:center;gap:10px;height:50px;padding:0 18px;border-radius:999px;color:var(--mudo);cursor:text}
.busca input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font-size:16px;color:var(--tinta)}
.busca input::placeholder{color:var(--fraco)}
.busca input::-webkit-search-cancel-button{-webkit-appearance:none}
.busca:focus-within{box-shadow:inset 0 1px 0 rgb(255 255 255 / .26),inset 0 0 0 1.5px var(--ouro),0 14px 34px -16px rgb(0 0 0 / .7)}
.aviso{margin-top:14px;font-size:12.5px;line-height:1.4;color:var(--mudo);padding:10px 14px;border-radius:14px;border:1px dashed rgb(var(--t) / .22)}
.abas{position:sticky;z-index:30;top:calc(var(--topo) + 70px);margin-top:16px;display:flex;gap:2px;padding:5px;border-radius:999px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.abas::-webkit-scrollbar{display:none}
.abas button{position:relative;z-index:1;flex-shrink:0;height:38px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--mudo);transition:color .3s}
.abas button[aria-selected="true"]{color:var(--sobre-ouro)}
.abas-ind{position:absolute;z-index:0;top:5px;left:0;height:38px;width:0;border-radius:999px;background:var(--ouro);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),0 6px 16px -6px rgb(247 185 28 / .7);transition:transform .5s var(--salto),width .4s var(--mola)}

.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.item{position:relative;display:flex;flex-direction:column;border-radius:24px;background:var(--cartao);box-shadow:inset 0 0 0 1px var(--linha),inset 0 1px 0 rgb(255 255 255 / .1);overflow:hidden;transition:transform .45s var(--mola),box-shadow .3s}
[data-tema="claro"] .item{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .9),0 10px 26px -18px rgb(0 0 0 / .3)}
.item-midia{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;background:radial-gradient(circle at 50% 42%,hsl(var(--h) 85% 58% / .2),transparent 68%)}
.item-midia img{width:100%;height:100%;object-fit:contain;padding:8%}
.emb{width:74%;height:auto;overflow:visible;transition:transform .6s var(--mola)}
.emb text{font-family:var(--sans)}
.selo-item{position:absolute;top:10px;left:10px;height:22px;padding:0 9px;border-radius:999px;background:var(--ouro);color:var(--sobre-ouro);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;display:grid;place-items:center}
.item-txt{display:flex;flex-direction:column;flex:1;gap:3px;padding:2px 12px 12px;text-align:left;cursor:pointer}
.item-marca{font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:var(--mudo)}
.item-nome{font-size:14.5px;font-weight:600;line-height:1.22;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.44em}
.item-pe{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.preco{display:grid;line-height:1.05}
.preco small{font-size:10.5px;color:var(--mudo);margin-bottom:3px}
.preco b{font-size:17.5px;font-weight:780;font-stretch:108%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mais{position:relative;width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--ouro);color:var(--sobre-ouro);box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),0 8px 18px -8px rgb(247 185 28 / .7);transition:transform .35s var(--salto)}
.mais .ic{stroke-width:2.3;transition:transform .4s var(--salto)}
.mais:active{transform:scale(.86)}
.mais.ok .ic{transform:rotate(90deg) scale(0)}
.mais.ok::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:9px;margin:-7px 0 0 -8px;border-left:2.4px solid;border-bottom:2.4px solid;transform:rotate(-45deg)}
.vazio{margin-top:28px;text-align:center;color:var(--mudo)}
.vazio a{color:var(--tinta);font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ouro)}
.voando{position:fixed;z-index:60;margin:0;pointer-events:none}

/* como pedir. Sem animação (ou com movimento reduzido) são três cartões. Com animação vira um trecho preso:
   a cena fica parada no meio da tela e muda conforme a rolagem (escolhe, sacola, WhatsApp). */
.como{padding:56px var(--borda) 0}
.como h2{font-size:clamp(27px,7.2vw,56px)}
.passos{display:grid;gap:10px;margin-top:22px}
.passos li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:3px;border-radius:22px;padding:18px;background:var(--cartao);box-shadow:inset 0 0 0 1px var(--linha)}
.passos .n{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--sobre-ouro);background:var(--ouro);transition:background .35s,color .35s,box-shadow .35s}
.passos b{font-size:18px;font-weight:720;font-stretch:108%;letter-spacing:-.015em;line-height:1.2;align-self:center}
.passos p{grid-column:2;color:var(--mudo);font-size:14.5px;line-height:1.4}
.cena,.trilho{display:none}

.rola .como{height:calc(100svh + 150vh);padding:0}
.rola .como-fixo{position:sticky;top:0;height:100svh;overflow:clip;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px;padding:calc(var(--topo) + 80px) var(--borda) calc(var(--baixo) + 74px)}
.rola .como-txt{display:contents}
.rola .como h2{order:1}
.rola .cena{order:2;display:block;position:relative;justify-self:center;height:100%;max-height:430px;aspect-ratio:1;max-width:100%}
.rola .passos{order:3;margin:0;gap:0;min-height:74px}
.rola .passos li{grid-area:1/1;background:none;box-shadow:none;padding:0;border-radius:0;opacity:0;translate:0 12px;transition:opacity .35s,translate .55s var(--mola)}
.rola .passos li.on{opacity:1;translate:0 0}
.rola .trilho{order:4;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.trilho i{height:3px;border-radius:2px;background:rgb(var(--t) / .14);overflow:hidden}
.trilho i::after{content:"";display:block;height:100%;background:var(--ouro);transform-origin:left;transform:scaleX(var(--v,0))}

.cena>*{position:absolute;inset:0;margin:auto;will-change:transform,opacity}
.cena-palavras{inset:0 auto 0 50%;width:100vw;height:fit-content;margin:auto 0 auto -50vw;display:grid;place-items:center;pointer-events:none}
.cena-palavras span{grid-area:1/1;font-size:min(19vw,150px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgb(var(--t) / .22);opacity:0}
.cena-luz{inset:-16%;margin:0;border-radius:50%;background:radial-gradient(closest-side,rgb(247 185 28 / .3),transparent 72%)}
[data-tema="claro"] .cena-luz{background:radial-gradient(closest-side,rgb(247 185 28 / .46),transparent 72%)}
.cena-pote{width:50%;height:fit-content;aspect-ratio:1}
.cena-pote .emb,.cena-pote img{width:100%;height:100%;object-fit:contain}
.cena-chips{margin:0}
.cena-chips span{position:absolute;height:36px;padding:0 14px;border-radius:999px;display:grid;place-items:center;font-size:13.5px;font-weight:620;white-space:nowrap;opacity:0;transition:background .3s,color .3s}
.cena-chips span:nth-child(1){left:0;top:14%}
.cena-chips span:nth-child(2){right:0;top:35%}
.cena-chips span:nth-child(3){left:4%;top:62%}
.cena-chips span.on,[data-tema="claro"] .cena-chips span.on{background:var(--ouro);color:var(--sobre-ouro)}
.cena-sacola{width:30%;height:fit-content;aspect-ratio:1;border-radius:50%;background:var(--ouro);color:var(--sobre-ouro);display:grid;place-items:center;opacity:0;box-shadow:inset 0 2px 0 rgb(255 255 255 / .5),0 24px 40px -18px rgb(247 185 28 / .85)}
.cena-sacola .ic{width:46%;height:46%}
.cena-sacola b{position:absolute;top:-5%;right:-5%;width:36%;aspect-ratio:1;border-radius:50%;background:var(--tinta);color:var(--fundo);display:grid;place-items:center;font-size:15px;font-weight:800;scale:0;transition:scale .5s var(--salto)}
.cena-sacola.cheia b{scale:1}
.cena-msg{width:94%;max-width:330px;height:fit-content;opacity:0;border-radius:20px 20px 5px 20px;padding:13px 15px 9px;display:grid;gap:5px;font-size:14px;line-height:1.35;background:var(--balao);color:var(--balao-t);box-shadow:0 24px 44px -22px rgb(0 0 0 / .55)}
.cena-msg p{opacity:0}
.cena-msg b{font-weight:700}
.cena-hora{justify-self:end;display:flex;align-items:center;gap:5px;font-size:11.5px;opacity:.75}
.cena-hora .ic{width:17px;height:17px;stroke-width:2.2;transition:color .3s}
.cena-msg.lida .cena-hora .ic{color:#53BDEB}
[data-tema="claro"] .cena-msg.lida .cena-hora .ic{color:#0A8FD0}

/* rodapé */
.pe{margin-top:84px;padding:34px var(--borda) calc(var(--baixo) + 92px);border-top:1px solid var(--linha);display:grid;gap:22px}
.pe-marca{display:flex;align-items:center;gap:14px}
.pe-marca img{width:64px;height:64px;border-radius:18px}
.pe-marca b{display:block;font-size:17px;font-weight:800;font-stretch:112%}
.pe-marca span{font-size:13.5px;color:var(--mudo)}
.pe-links{display:flex;flex-wrap:wrap;gap:8px}
.pe-links a{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;transition:transform .35s var(--mola)}
.pe-links a:hover{transform:translateY(-2px)}
.pe-fim{font-size:12.5px;color:var(--fraco)}

/* barra da sacola e WhatsApp flutuante */
.doca{position:fixed;z-index:35;left:var(--borda);right:calc(var(--borda) + 68px);bottom:var(--baixo);height:60px;border-radius:999px;display:flex;align-items:center;gap:12px;padding:0 18px 0 8px;text-align:left;animation:doca .55s var(--salto) both}
.doca-ic{width:44px;height:44px;border-radius:50%;background:var(--ouro);color:var(--sobre-ouro);display:grid;place-items:center;flex-shrink:0}
.doca-txt{display:grid;line-height:1.15;flex:1;min-width:0}
.doca-txt b{font-size:14.5px;font-weight:720}
.doca-txt small{font-size:12.5px;color:var(--mudo);font-variant-numeric:tabular-nums}
@keyframes doca{from{transform:translateY(120%);opacity:0}}
.zap{position:fixed;z-index:35;right:var(--borda);bottom:var(--baixo);width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:var(--zap);transition:transform .35s var(--mola)}
.zap:hover{transform:translateY(-3px) scale(1.04)}

/* folhas: produto e sacola sobem de baixo no celular */
dialog{border:0;padding:0;color:var(--tinta);background:none;max-width:none;max-height:none;overscroll-behavior:contain}
dialog::backdrop{background:rgb(0 0 0 / .52);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:some-fundo .35s both}
@keyframes some-fundo{from{opacity:0}}
.folha{position:fixed;inset:auto 0 0 0;margin:0 auto;width:min(100%,560px);max-height:92dvh;border-radius:30px 30px 0 0;flex-direction:column;overflow:hidden;
  background:var(--folha);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),inset 0 0 0 1px rgb(var(--t) / .08),0 -20px 60px -20px rgb(0 0 0 / .6)}
.folha[open]{display:flex;animation:sobe .5s var(--mola) both}
.folha.saindo{animation:desce .26s cubic-bezier(.5,0,.9,.4) both}
@keyframes sobe{from{transform:translateY(100%)}}
@keyframes desce{to{transform:translateY(100%)}}
.fechar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--t) / .1);flex-shrink:0;transition:transform .3s var(--mola),background .2s}
.fechar:hover{background:rgb(var(--t) / .18);transform:rotate(90deg)}
.folha-topo{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 12px 22px}
.folha-topo h2{font-size:24px}

.prod-midia{position:relative;display:grid;place-items:center;height:min(34dvh,250px);flex-shrink:0;background:radial-gradient(circle at 50% 46%,hsl(var(--h) 85% 58% / .26),transparent 70%)}
.prod-midia .emb{position:absolute;left:0;top:9%;width:100%;height:82%}
.prod-midia img{width:100%;height:100%;object-fit:contain;padding:16px}
.prod-midia .fechar{position:absolute;top:14px;right:14px}
.prod-txt{display:flex;flex-direction:column;gap:6px;padding:6px 20px 0;overflow-y:auto;min-height:0}
.prod-txt h2{font-size:25px;line-height:1.05}
.prod-desc{color:var(--mudo);font-size:15px;margin-top:2px}
.opc{margin-top:14px;display:grid;gap:9px}
.opc-rot{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:var(--mudo)}
.opc-lista{display:flex;flex-wrap:wrap;gap:7px}
.chip{height:40px;padding:0 16px;border-radius:999px;background:var(--cartao2);font-size:14.5px;font-weight:560;box-shadow:inset 0 0 0 1px var(--linha);transition:background .25s,color .25s,transform .3s var(--salto)}
.chip:active{transform:scale(.94)}
.chip[aria-pressed="true"]{background:var(--tinta);color:var(--fundo);box-shadow:none}
.chip small{font-weight:500;opacity:.7;margin-left:6px;font-variant-numeric:tabular-nums}
.prod-pe{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;margin:18px -20px 0;padding:12px 20px 8px;background:linear-gradient(transparent,var(--folha) 26%)}
.prod-zap{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 0 calc(14px + env(safe-area-inset-bottom,0px));font-size:14px;font-weight:600;color:var(--mudo)}
.prod-zap .ic{color:var(--zap)}
.prod-zap:hover{color:var(--tinta)}
.qtd{display:inline-flex;align-items:center;height:52px;border-radius:999px;background:var(--cartao2);box-shadow:inset 0 0 0 1px var(--linha);flex-shrink:0}
.qtd button{width:44px;height:100%;display:grid;place-items:center;border-radius:999px}
.qtd button:active{transform:scale(.85)}
.qtd output{min-width:22px;text-align:center;font-weight:720;font-variant-numeric:tabular-nums}
.qtd.pq{height:40px}
.qtd.pq button{width:36px}

.sacola-lista{flex:1;min-height:0;overflow-y:auto;padding:4px 18px 8px;display:grid;gap:8px;align-content:start}
.linha{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:8px;border-radius:20px;background:var(--cartao);box-shadow:inset 0 0 0 1px var(--linha)}
.linha-midia{width:62px;height:62px;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 50% 46%,hsl(var(--h) 85% 58% / .24),transparent 72%);overflow:hidden}
.linha-midia .emb{width:84%}
.linha-midia img{width:100%;height:100%;object-fit:contain}
.linha-txt{display:grid;gap:2px;min-width:0}
.linha-txt b{font-size:14.5px;font-weight:620;line-height:1.2;letter-spacing:-.01em}
.linha-txt small{font-size:12px;color:var(--mudo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linha-txt span{font-size:14px;font-weight:720;font-variant-numeric:tabular-nums;margin-top:2px}
.sacola-vazia{display:grid;justify-items:center;gap:8px;text-align:center;padding:38px 20px 46px}
.sacola-vazia .ic{color:var(--fraco);margin-bottom:6px}
.sacola-vazia b{font-size:18px;font-weight:720}
.sacola-vazia p{color:var(--mudo);font-size:14.5px;max-width:26em;margin-bottom:12px}
.sacola-pe{padding:14px 20px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linha);display:grid;gap:10px}
.total{display:flex;align-items:baseline;justify-content:space-between}
.total span{color:var(--mudo);font-size:14.5px}
.total b{font-size:27px;font-weight:800;font-stretch:112%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nota{font-size:12.5px;color:var(--mudo);line-height:1.4}

/* de 700px pra cima */
@media (min-width:700px){
  .grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .cat-topo{grid-template-columns:1fr minmax(0,340px);align-items:end}
  .passos{grid-template-columns:repeat(3,1fr);gap:14px}
  .rola .passos{grid-template-columns:1fr}
  .item-txt{padding:4px 16px 16px}
  .item-nome{font-size:15.5px}
  .preco b{font-size:19px}
  .doca{left:50%;right:auto;width:380px;margin-left:-190px}
  .pe{grid-template-columns:1fr auto;align-items:center}
  .pe-fim{grid-column:1/-1}
  #prod{inset:0;margin:auto;width:min(92vw,860px);height:fit-content;max-height:88dvh;border-radius:30px;flex-direction:row}
  #prod[open]{animation:cresce .5s var(--mola) both}
  #prod.saindo{animation:encolhe .22s ease-in both}
  .prod-midia{height:auto;width:46%;min-height:440px}
  .prod-midia .emb{top:20%;height:60%}
  .prod-midia .fechar{left:14px;right:auto}
  .prod-txt{flex:1;padding:34px 30px 0;justify-content:center}
  .prod-txt h2{font-size:32px}
  .prod-pe{position:static;background:none;margin:22px 0 0;padding:0 0 8px}
  .prod-zap{padding-bottom:26px}
  #sacola{inset:12px 12px 12px auto;margin:0;width:430px;max-height:none;border-radius:30px}
  #sacola[open]{animation:entra .5s var(--mola) both}
  #sacola.saindo{animation:sai .24s ease-in both}
  @keyframes cresce{from{transform:translateY(26px) scale(.94);opacity:0}}
  @keyframes encolhe{to{transform:scale(.96);opacity:0}}
  @keyframes entra{from{transform:translateX(110%)}}
  @keyframes sai{to{transform:translateX(110%)}}
}
/* de 960px pra cima: palco com o logo e as provas flutuando */
@media (min-width:960px){
  .topo-nav{display:flex}
  .abre{grid-template-columns:1.25fr .75fr;gap:40px;padding-top:calc(var(--topo) + 140px);padding-bottom:64px}
  h1{font-size:clamp(54px,5.5vw,82px)}
  .abre-txt{gap:24px}
  .so-pc{display:inline}
  .acoes{margin-top:6px}
  .provas{display:none}
  .palco{display:block;position:relative;justify-self:center;width:min(100%,360px);perspective:1100px;animation:surge 1s .3s both}
  .medalha{position:relative;aspect-ratio:1;border-radius:22%;background:#000;overflow:hidden;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--mola);
    box-shadow:0 0 0 1px rgb(255 255 255 / .12),0 50px 90px -40px rgb(0 0 0 / .85),0 0 140px -30px rgb(247 185 28 / .5)}
  .medalha img{width:100%;height:100%;object-fit:cover}
  .medalha::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgb(255 255 255 / .2) 50%,transparent 58%);transform:translateX(-80%);animation:brilho 6.5s 1.4s infinite}
  @keyframes brilho{0%{transform:translateX(-80%)}28%,100%{transform:translateX(80%)}}
  .ficha{position:absolute;display:flex;align-items:center;gap:11px;padding:11px 16px 11px 13px;border-radius:18px;animation:flutua 6s ease-in-out infinite alternate}
  .ficha{background:rgb(18 18 20 / .62)}
  [data-tema="claro"] .ficha{background:rgb(255 255 255 / .84)}
  .ficha .ic{color:var(--ouro-txt)}
  .ficha b{display:block;font-size:14px;font-weight:700;line-height:1.15;white-space:nowrap}
  .ficha small{display:block;font-size:11.5px;color:var(--mudo);white-space:nowrap}
  .f1{left:-20%;top:-5%}
  .f2{right:-16%;top:47%;animation-delay:-2s}
  .f3{left:-9%;bottom:-6%;animation-delay:-4s}
  @keyframes flutua{to{transform:translateY(-12px)}}
  .cat{padding-top:40px}
  .rola .como-fixo{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);align-items:center;gap:40px;padding-bottom:36px}
  .rola .como-txt{display:grid;gap:30px;align-content:center}
  .rola .como h2{font-size:clamp(40px,4.3vw,62px)}
  .rola .passos{gap:22px;min-height:0}
  .rola .passos li{grid-area:auto;opacity:.3;translate:none}
  .rola .passos li:not(.on) .n{background:none;color:var(--tinta);box-shadow:inset 0 0 0 1.5px rgb(var(--t) / .45)}
  .rola .passos b{font-size:23px}
  .rola .passos p{font-size:16px;max-width:30em}
  .rola .cena{max-height:520px}
  .rola .trilho{max-width:330px}
  .cena-chips span{height:40px;padding:0 17px;font-size:14.5px}
  .cena-msg{font-size:15px;max-width:360px}
  .grade{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .item:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgb(var(--t) / .2),inset 0 1px 0 rgb(255 255 255 / .16),0 26px 44px -26px rgb(0 0 0 / .7)}
  .item:hover .emb{transform:translateY(-4px) rotate(-3deg) scale(1.05)}
  .zap{bottom:calc(var(--baixo) + 6px)}
}
@media (max-width:359px){.marca-nome i{display:none}.provas b{font-size:12px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  h1 .ln>span{transform:none}
}