/* Átrio Imports · Titânio
   O mundo do emblema: grafite frio, prata escovada e um único acento, a luz.
   Os quatro aparelhos que moram na base do emblema viram o sistema de desenho do site, sempre com a mesma pena fina.
   Saira nos títulos (as formas do ÁTRIO), Instrument Sans no texto, Michroma nos rótulos, entre fios como o "IMPORTS". */

@font-face{font-family:"Saira";font-style:normal;font-weight:300 600;font-stretch:100% 118%;font-display:swap;src:url("../assets/fonts/saira.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("../assets/fonts/instrument-sans.woff2") format("woff2")}
@font-face{font-family:"Michroma";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/michroma.woff2") format("woff2")}

:root{
  --grafite:#0B0C0F;
  --grafite-2:#111318;
  --grafite-3:#181B21;
  --prata:#E6E8EB;
  --titanio:#B9BEC6;
  --aco:#9097A1;
  --aluminio:#E4E6E9;
  --aluminio-2:#D6D9DE;
  --tinta:#15171B;
  --tinta-2:#4A505A;
  --brilho:#FFFFFF;
  --linha-e:rgba(185,190,198,.16);
  --linha-c:rgba(21,23,27,.14);
  --metal:linear-gradient(180deg,#FBFBFC 0%,#E3E5E8 38%,#AEB3BA 62%,#D5D8DC 100%);
  --btn-prata:linear-gradient(180deg,#FAFAFB 0%,#E6E8EB 46%,#CDD1D6 100%);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --display:"Saira",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --text:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --label:"Michroma","Saira",ui-sans-serif,system-ui,sans-serif;
  --gutter:max(20px,5vw);
  --maxw:1240px;
  --col-x:max(var(--gutter),calc((100vw - 1320px) / 2 + 24px));
  --sec-y:clamp(104px,12vw,176px);
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px;background:var(--grafite)}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--grafite);color:var(--prata);font-family:var(--text);font-size:17px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,fieldset{margin:0}
fieldset{padding:0;border:0;min-width:0}
legend{padding:0}
ul,ol{padding:0;list-style:none}
svg{overflow:visible}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--prata);color:var(--tinta);padding:10px 18px;border-radius:12px;font-weight:600;text-decoration:none;transition:top .25s var(--ease-out)}
.skip:focus{top:12px}
main:focus{outline:none}
:focus-visible{outline:2px solid var(--brilho);outline-offset:3px;border-radius:6px}
.light :focus-visible{outline-color:var(--tinta)}
.wrap{width:min(var(--maxw),100% - 2 * var(--gutter));margin-inline:auto;position:relative}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

::selection{background:var(--prata);color:var(--grafite)}
.light ::selection{background:var(--tinta);color:var(--aluminio)}
html{-webkit-tap-highlight-color:rgba(230,232,235,.12)}
.btn,.nav,.pill,.faq-list summary,.wa-bar,.cue,.link-wa,.chip,.hold{-webkit-user-select:none;user-select:none}
html:has(body.menu-open){overflow:hidden}

/* Barra de rolagem. Sem JavaScript: a nativa em prata */
@media (hover:hover) and (pointer:fine){
  html::-webkit-scrollbar{width:10px}
  html::-webkit-scrollbar-track{background:var(--grafite)}
  html::-webkit-scrollbar-thumb{background:rgba(185,190,198,.42);border:3px solid var(--grafite);border-radius:99px}
  html::-webkit-scrollbar-thumb:hover{background:var(--prata)}
  @supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:rgba(185,190,198,.5) var(--grafite)}}
}
/* Com JavaScript no desktop: a nativa sai e entra uma pílula de metal que flutua sobre a página */
html.cs{scrollbar-width:none}
html.cs::-webkit-scrollbar{display:none;width:0;height:0}
.sbar{--sb:rgba(185,190,198,.55);--sb-on:var(--prata);position:fixed;top:0;right:0;bottom:0;z-index:60;width:18px}
.sbar.on-light{--sb:rgba(21,23,27,.34);--sb-on:var(--tinta)}
.sbar::before{content:"";position:absolute;top:6px;bottom:6px;right:7px;width:1px;background:var(--sb);opacity:0;transition:opacity .4s var(--ease-out)}
.sbar:hover::before,.sbar.drag::before{opacity:.35}
.sbar-thumb{position:absolute;top:6px;right:5px;display:block;width:5px;border-radius:99px;background:var(--sb);opacity:.55;cursor:grab;transition:width .3s var(--ease-out),right .3s var(--ease-out),background-color .5s var(--ease-out),opacity .4s var(--ease-out),box-shadow .5s var(--ease-out);will-change:transform}
.sbar.active .sbar-thumb{opacity:1}
.sbar:hover .sbar-thumb,.sbar.drag .sbar-thumb{right:4px;width:7px;opacity:1;background:var(--sb-on);box-shadow:0 0 12px rgba(255,255,255,.35)}
.sbar.on-light:hover .sbar-thumb,.sbar.on-light.drag .sbar-thumb{box-shadow:none}
.sbar.drag .sbar-thumb{cursor:grabbing}
html.sbar-drag,html.sbar-drag *{-webkit-user-select:none!important;user-select:none!important}
html.sbar-drag *{cursor:grabbing!important}

/* Tipografia */
.h-hero{font-family:var(--display);font-weight:300;font-stretch:104%;font-size:clamp(34px,3.9vw,56px);line-height:1.1;letter-spacing:-.015em}
.h-hero .ln:last-child{font-weight:500}
.h-statement{font-family:var(--display);font-weight:430;font-stretch:114%;font-size:clamp(36px,5vw,84px);line-height:1.03;letter-spacing:-.032em;text-wrap:balance;max-width:16ch}
.h-section{font-family:var(--display);font-weight:440;font-stretch:112%;font-size:clamp(33px,3.7vw,60px);line-height:1.05;letter-spacing:-.028em;text-wrap:balance;max-width:17ch}
.h-sub{font-family:var(--display);font-weight:460;font-stretch:112%;font-size:clamp(26px,2.4vw,38px);line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
.h-item{font-family:var(--display);font-weight:480;font-stretch:108%;font-size:clamp(19px,1.5vw,23px);line-height:1.2;letter-spacing:-.012em}
.h-tile{font-family:var(--display);font-weight:460;font-stretch:112%;font-size:clamp(26px,2.3vw,36px);line-height:1.04;letter-spacing:-.024em}
.h-hero .ln,.h-statement .ln,.h-section .ln{display:block;text-wrap:balance}
.lede{font-size:clamp(17.5px,1.28vw,19.5px);line-height:1.6;color:var(--aco);max-width:46ch}
.light .lede{color:var(--tinta-2)}

/* O metal: cada linha ganha o mesmo degradê de titânio, do brilho ao aço */
.metal .ln{background-image:var(--metal);background-size:100% 1em;background-size:100% 1lh;background-repeat:repeat-y;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.14em;margin-bottom:-.14em}
.metal.split .ln{background:none}
.metal.split .w{background-image:var(--metal);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.14em;margin-bottom:-.14em}
/* No título do topo o degradê corre pelas duas linhas juntas: a primeira fica com o brilho, a segunda com o aço */
.h-hero.metal .ln{background-size:100% 200%;background-repeat:no-repeat}
.h-hero.metal .ln:last-child{background-position:0 100%}
.h-hero.metal.split .w{background-size:100% 200%}
.h-hero.metal.split .ln:last-child .w{background-position:0 100%}
@media (forced-colors:active){.metal .ln,.metal .w{-webkit-text-fill-color:CanvasText;color:CanvasText;background:none}}

/* Rótulo: caixa alta espaçada entre dois fios curtos, como o IMPORTS do emblema */
.kicker{display:inline-flex;align-items:center;gap:14px;margin-bottom:26px;font-family:var(--label);font-size:10.5px;line-height:1.4;letter-spacing:.3em;text-transform:uppercase;color:var(--titanio)}
.kicker span{margin-right:-.3em}
.kicker::before,.kicker::after{content:"";flex:none;display:block;width:22px;height:1px;background:currentColor;opacity:.75}
.light .kicker{color:var(--tinta-2)}
.js .rv .kicker::before{transform:scaleX(0);transform-origin:100% 50%;transition:transform 1s var(--ease-io) .25s}
.js .rv .kicker::after{transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease-io) .25s}
.js .rv.in .kicker::before,.js .rv.in .kicker::after{transform:none}

/* Botões e links */
.btn{--h:52px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 28px;border:0;border-radius:999px;font-family:var(--text);font-weight:600;font-size:16px;line-height:1.2;letter-spacing:-.005em;text-decoration:none;text-align:center;cursor:pointer;transition:transform .35s var(--ease-out),box-shadow .45s var(--ease-out),background-color .35s var(--ease-out),color .35s var(--ease-out)}
.btn .ic{width:19px;height:19px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-prata{color:var(--tinta);background:var(--btn-prata);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.12),0 1px 0 rgba(0,0,0,.45),0 14px 34px -20px rgba(230,232,235,.45)}
.btn-prata:hover{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.12),0 1px 0 rgba(0,0,0,.45),0 20px 44px -18px rgba(230,232,235,.6)}
/* O brilho corre no metal, como no emblema */
.btn-prata::after{content:"";position:absolute;top:0;bottom:0;left:-45%;z-index:-1;width:36%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.95) 50%,rgba(255,255,255,0));transform:skewX(-18deg);opacity:0}
.btn-prata:hover::after,.btn-prata:focus-visible::after{animation:btn-sheen .95s var(--ease-io)}
@keyframes btn-sheen{0%{opacity:0;transform:translateX(0) skewX(-18deg)}25%{opacity:1}100%{opacity:0;transform:translateX(430%) skewX(-18deg)}}
.btn-ghost{color:var(--prata);background:rgba(230,232,235,.04);box-shadow:inset 0 0 0 1px rgba(230,232,235,.26)}
.btn-ghost:hover{background:rgba(230,232,235,.08);box-shadow:inset 0 0 0 1px rgba(230,232,235,.55)}
.btn-sm{--h:42px;padding:0 18px;font-size:15px}
.btn-lg{--h:58px;padding:0 32px;font-size:17px}
.btn-full{width:100%}
.link-quiet{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(230,232,235,.4);transition:text-decoration-color .3s var(--ease-out)}
.link-quiet:hover{text-decoration-color:currentColor}
@media (pointer:coarse){.btn{min-height:max(44px,var(--h))}.link-quiet{padding-block:10px;display:inline-block}}

/* Ambiente: dois brilhos prata derivando devagar e um grão fino por cima de tudo */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.glow{position:absolute;display:block;border-radius:50%;will-change:transform}
.g1{width:80vmax;height:80vmax;left:-36vmax;top:-26vmax;background:radial-gradient(closest-side,rgba(200,206,214,.075),rgba(200,206,214,0));animation:drift1 90s var(--ease-io) -30s infinite alternate}
.g2{width:70vmax;height:70vmax;right:-30vmax;top:38vh;background:radial-gradient(closest-side,rgba(160,168,180,.085),rgba(160,168,180,0));animation:drift2 120s var(--ease-io) -64s infinite alternate}
@keyframes drift1{to{transform:translate3d(22vmax,18vmax,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(-18vmax,-14vmax,0) scale(.92)}}
body::after{content:"";position:fixed;inset:0;z-index:45;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* Navegação: uma barra fina de ponta a ponta. A marca à esquerda, os links no centro e o WhatsApp em texto à direita */
.nav{position:fixed;inset:0 0 auto;z-index:50;pointer-events:none}
.nav::before{content:"";position:absolute;inset:0 0 -28px;pointer-events:none;background:linear-gradient(180deg,rgba(11,12,15,.72),rgba(11,12,15,0));transition:opacity .5s var(--ease-out)}
.nav.solid::before{opacity:0}
.nav-in{position:relative;pointer-events:auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;height:58px;padding:0 var(--col-x)}
.nav-in::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,12,15,.74);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);box-shadow:inset 0 -1px 0 rgba(230,232,235,.09);opacity:0;transition:opacity .5s var(--ease-out)}
.nav.solid .nav-in::before{opacity:1}
.brand{justify-self:start;display:flex;align-items:center;gap:12px;min-height:44px;color:var(--prata);text-decoration:none}
.brand-nome{display:block;width:auto;height:19px;fill:url(#g-metal)}
.brand-imports{padding-left:12px;border-left:1px solid rgba(230,232,235,.24);font-family:var(--label);font-size:8.5px;line-height:20px;letter-spacing:.34em;text-transform:uppercase;color:var(--titanio)}
.menu ul{display:flex;gap:40px}
.menu ul a{display:inline-block;padding:10px 0;font-size:13px;letter-spacing:.01em;color:var(--aco);text-decoration:none;transition:color .3s var(--ease-out)}
.menu ul a:hover,.menu ul a[aria-current]{color:var(--prata)}
.menu-foot{display:none}
.nav-cta{justify-self:end;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;font-weight:500;line-height:1.2;color:var(--prata);text-decoration:none;white-space:nowrap}
.nav-cta .ic{width:15px;height:15px}
.nav-seta{margin-left:2px;color:var(--aco);transition:transform .35s var(--ease-out),color .35s var(--ease-out)}
.nav-cta:hover .nav-seta,.nav-cta:focus-visible .nav-seta{transform:translateX(3px);color:var(--prata)}
.nav-toggle{display:none}
@media (max-width:1000px){
  .nav-in{display:flex;gap:10px;padding:0 max(12px,calc(var(--gutter) - 10px)) 0 var(--gutter)}
  .brand{margin-right:auto}
  .nav-toggle{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:46px;height:46px;border:0;border-radius:50%;background:transparent;cursor:pointer}
  .nav-toggle i{display:block;width:20px;height:1.5px;background:var(--prata);border-radius:2px;transition:transform .45s var(--ease-out)}
  .nav.open .nav-toggle i:first-of-type{transform:translateY(3.75px) rotate(45deg)}
  .nav.open .nav-toggle i:last-of-type{transform:translateY(-3.75px) rotate(-45deg)}
  .menu{position:fixed;inset:0;z-index:-2;display:flex;flex-direction:column;justify-content:center;gap:44px;padding:110px var(--gutter) 48px;background:var(--grafite);opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s linear .45s}
  .nav.open .menu{opacity:1;visibility:visible;transition:opacity .45s var(--ease-out)}
  .menu ul{flex-direction:column;gap:2px}
  .menu ul a{font-family:var(--display);font-weight:430;font-stretch:112%;font-size:clamp(30px,7.4vw,42px);letter-spacing:-.028em;color:var(--prata);padding:6px 0}
  .menu-foot{display:grid;justify-items:start;gap:20px}
  .menu-note{color:var(--aco);max-width:34ch}
  .menu-foot .btn{font-size:17px;padding:0 30px}
  body.menu-open{overflow:hidden}
}
@media (max-width:560px){.nav-cta{display:none}}

/* =========================================================
   HERO · A CAIXA
   Uma caixa grafite fechada, com o selo da Átrio em prata na tampa, e o título ao lado.
   Padrão: hero estático composto (celular, movimento reduzido, sem JavaScript)
   ========================================================= */
.hero{position:relative}
.stage{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;background:var(--grafite);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:0 4vw;padding:118px var(--col-x) 56px}
.stage-light{position:absolute;inset:-10% -10% 0;z-index:-1;pointer-events:none;background:radial-gradient(40% 44% at 50% 42%,rgba(200,206,214,.1),rgba(200,206,214,0) 70%),radial-gradient(34% 30% at 76% 92%,rgba(230,232,235,.09),rgba(230,232,235,0) 72%);-webkit-mask-image:linear-gradient(180deg,#000 76%,transparent);mask-image:linear-gradient(180deg,#000 76%,transparent);will-change:transform}
.caixa,.sweep,.cue,.band-a,.band-b{display:none}
.hc{position:relative;z-index:4;grid-column:1;grid-row:1;max-width:740px}
.hero-shot{position:relative;z-index:1;grid-column:2;grid-row:1;justify-self:end;width:min(100%,640px);margin:0;mix-blend-mode:lighten}
.hero-shot img{width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 97%);mask-image:linear-gradient(180deg,#000 58%,transparent 97%)}

/* O texto: rótulo sem fios, o título e o subtítulo; a faixa final traz o botão e as provas */
.kicker.hc-kicker{margin-bottom:26px;font-size:9px;letter-spacing:.32em;color:var(--aco)}
.hc-kicker::before,.hc-kicker::after{display:none}
.hc-kicker span{margin-right:-.32em;text-wrap:balance}
.hc-kicker .kd{font-style:normal}
.hc .w{display:inline-block}
.hc-slot{position:relative;margin-top:26px}
.hero-sub{font-size:clamp(16px,1.15vw,17.5px);line-height:1.6;color:var(--titanio);max-width:44ch;text-wrap:pretty}
.band-a .hero-sub{max-width:430px}
.band-a .hero-sub span{display:block}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.hero-proof{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:38px;padding-top:22px;border-top:1px solid var(--linha-e)}
.hero-proof li{display:flex;flex-direction:column;gap:2px}
.hero-proof strong{font-family:var(--display);font-weight:480;font-stretch:112%;font-size:21px;line-height:1.15;letter-spacing:-.01em;color:var(--prata)}
.hero-proof span{font-size:13.5px;line-height:1.4;color:var(--aco)}

/* Entradas da faixa final, guiadas por --k (1 no estado estático) */
.band-c .hero-sub{--ks:clamp(0,var(--k,1) * 3.4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 14px))}
.hero-actions{--kb:clamp(0,(var(--k,1) - .22) * 3.6,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 14px))}
.hero-proof{--kp:clamp(0,(var(--k,1) - .46) * 3.6,1);opacity:var(--kp)}

/* A caixa: camadas de SVG no mesmo viewBox (620 x 590, gerado por _build/caixa.py).
   O chão com a sombra, o corpo (o fundo por dentro, os aparelhos, a frente) e a tampa com o selo */
.caixa{pointer-events:none}
.caixa svg,.cx-corpo{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cx-sombra{transform-box:fill-box;transform-origin:50% 45%}
.cx-tampa{transform-origin:46.77% 38.71%}
.cx-feixe{opacity:0;transform-box:fill-box;transform-origin:50% 80%}
/* Sem JavaScript a caixa fica fechada: o fundo e os aparelhos nem são montados */
html:not(.js) .cx-fundo,html:not(.js) .devs{display:none}

/* O selo na tampa: disco negro, anel de prata, o arco e o ÁTRIO do emblema */
.em-disc{fill:url(#g-disc)}
.em-ring{fill:none;stroke:url(#g-ring);stroke-width:14}
.em-tip{fill:url(#g-tip);opacity:0}
.em-arco{fill:url(#g-metal);transform-box:fill-box;transform-origin:50% 60%}
.em-glyph{fill:url(#g-metal);stroke:#F1F2F4;stroke-width:4.2;stroke-linejoin:round;stroke-opacity:0}
.em-sheen{fill:url(#g-sheen);opacity:0}
.em-rule,.em-imports{fill:url(#g-metal)}
.em-rule-l{transform-origin:264px 746px}
.em-rule-r{transform-origin:836px 746px}
.em-imports{transform-box:fill-box;transform-origin:50% 50%}
.em-ic{fill:none;stroke:#CDD1D6;stroke-width:var(--sw,4.3);stroke-linecap:round;stroke-linejoin:round}

/* Abertura: a luz acende, a caixa pousa com a sombra, o selo é gravado na tampa, o título sobe e o aviso aparece */
@media (prefers-reduced-motion:no-preference){
  .js .stage-light{animation:hx-luz 1.8s var(--ease-out) both}
  .js .cx-poca{animation:hx-luz 1.6s var(--ease-out) .2s both}
  .js .cx-sombra{animation:cx-sombra 1.4s var(--ease-out) .15s both}
  .js .cx-corpo{animation:cx-pousa 1.4s var(--ease-out) .15s both}
  .js .em-disc{animation:em-fade 1.2s var(--ease-out) .75s both}
  .js .em-ring{stroke-dasharray:1 1;animation:em-draw 1.7s var(--ease-io) .8s both}
  .js .em-glyph{stroke-dasharray:1 1;animation:em-trace 1.4s var(--ease-io) 1.2s both,em-fill 1s var(--ease-out) 2.2s both}
  .js .em-nome-b{animation-delay:1.34s,2.34s}
  .js .em-arco{animation:em-rise 1s var(--ease-out) 1.95s both}
  .js .em-rule{animation:em-grow 1s var(--ease-io) 2.3s both}
  .js .em-imports{animation:em-imp 1s var(--ease-out) 2.45s both}
  .js .em-ic{stroke-dasharray:1 1;animation:em-draw 1.1s var(--ease-io) calc(2.6s + var(--i,0) * .13s) both}
  .js .em-sheen{animation:em-sheen 1.7s var(--ease-io) 3.25s both}
  .js .hc-kicker{animation:hx-sobe 1s var(--ease-out) .95s both}
  .js .hc .w{animation:hx-sobe .95s var(--ease-out) calc(1.05s + var(--i,0) * 60ms) both}
  .js .band-a .hero-sub span{animation:hx-sobe 1s var(--ease-out) 1.6s both}
  .js .cue>*{animation:em-fade 1s var(--ease-out) 3.4s both}
  .cue-tampa{animation:cue-abre 3.6s var(--ease-io) infinite}
  /* Sem a rolagem (celular), o texto chega logo e a faixa final sobe junto */
  html.js:not(.scrub) .hc-kicker{animation-delay:.3s}
  html.js:not(.scrub) .hc .w{animation-delay:calc(.4s + var(--i,0) * 50ms)}
  html.js:not(.scrub) .band-c>*{animation:hx-sobe 1s var(--ease-out) .85s both}
  html.js:not(.scrub) .band-c>.hero-actions{animation-delay:.95s}
  html.js:not(.scrub) .band-c>.hero-proof{animation-delay:1.05s}
}
@keyframes em-fade{from{opacity:0}}
@keyframes em-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes em-trace{from{stroke-dashoffset:1;stroke-opacity:1}to{stroke-dashoffset:0;stroke-opacity:1}}
@keyframes em-fill{from{fill-opacity:0;stroke-opacity:1}to{fill-opacity:1;stroke-opacity:0}}
@keyframes em-rise{from{opacity:0;transform:translateY(16px) scale(.94)}}
@keyframes em-grow{from{transform:scaleX(0)}}
@keyframes em-imp{from{opacity:0;transform:translateY(12px)}}
@keyframes em-sheen{0%{opacity:0;transform:translateX(0) skewX(-14deg)}14%{opacity:.85}86%{opacity:.85}100%{opacity:0;transform:translateX(1500px) skewX(-14deg)}}
@keyframes hx-luz{from{opacity:0}}
@keyframes hx-sobe{from{opacity:0;transform:translate3d(0,18px,0)}}
@keyframes cx-pousa{from{opacity:0;transform:translate3d(0,-4%,0)}}
@keyframes cx-sombra{from{opacity:0;transform:scale(1.2)}}
@keyframes cue-abre{0%,16%{transform:none}40%,62%{transform:translate3d(0,-4.5px,0)}86%,100%{transform:none}}

/* HERO · celular e telas em pé: empilhado e centralizado, a caixa em cima.
   Com JavaScript ela se abre sozinha (main.js, "a caixa se abre sozinha"); o recuo da câmera parte da quina de baixo da frente */
@media (max-width:900px),(orientation:portrait) and (max-width:1100px){
  html:not(.scrub) .stage{display:flex;flex-direction:column;align-items:center;min-height:0;padding:76px var(--gutter) 0;text-align:center}
  html:not(.scrub) .caixa{display:block;position:relative;order:0;width:min(84vw,360px);aspect-ratio:620 / 590;margin:0 auto 8px;transform-origin:46.77% 87.69%}
  html:not(.scrub) .hc{display:flex;flex-direction:column;align-items:center;order:1;max-width:600px}
  html:not(.scrub) .h-hero{font-size:clamp(34px,9.4vw,56px)}
  html:not(.scrub) .hc-slot{width:100%;margin-top:22px}
  html:not(.scrub) .hero-sub{margin-inline:auto}
  html:not(.scrub) .hero-actions{justify-content:center;width:100%}
  html:not(.scrub) .hero-actions .btn{flex:1 1 100%;max-width:420px}
  html:not(.scrub) .hero-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:470px;margin-inline:auto}
  html:not(.scrub) .hero-proof strong{font-size:18px}
  html:not(.scrub) .hero-shot{order:2;justify-self:auto;width:min(100%,540px);margin:30px auto 0}
  html:not(.scrub) .stage-light{background:radial-gradient(60% 30% at 50% 16%,rgba(200,206,214,.1),rgba(200,206,214,0) 70%),radial-gradient(60% 24% at 50% 96%,rgba(230,232,235,.08),rgba(230,232,235,0) 72%)}
  /* Enquanto a caixa se abre (main.js): a câmera, a tampa e os aparelhos em camadas próprias, sem redesenhar a sombra a cada quadro */
  html.abrindo .caixa{will-change:transform}
  html.abrindo .cx-tampa,html.abrindo .devs{will-change:transform,opacity}
}
@media (max-width:520px){
  .kicker{gap:10px;font-size:9.5px;letter-spacing:.24em}
  .kicker span{margin-right:-.24em}
  .kicker::before,.kicker::after{width:16px}
  .kicker.hc-kicker{max-width:300px;font-size:8.5px;line-height:1.9;letter-spacing:.24em}
  .hc-kicker .kd{display:block;height:0;overflow:hidden}
}
@media (max-width:380px){html:not(.scrub) .hero-proof span{font-size:12.5px}}

/* =========================================================
   HERO · modo scrub (desktop): palco fixado por 420vh
   A: a tampa sobe reto e se afasta · B: os quatro aparelhos sobem da caixa em traço prata
   C: uma faixa de luz atravessa o palco, a caixa se apaga e os iPhones reais sobem do chão
   --u é 1px da maquete (1440 x 900): a caixa cresce com a coluna de conteúdo e com a altura da tela
   ========================================================= */
html.scrub .hero{height:420vh}
html.scrub .stage{display:block;position:sticky;top:0;height:100vh;min-height:0;padding:0;background:linear-gradient(180deg,#0E0F13 0%,#0B0C0F 55%,#090A0D 90%,#0B0C0F 100%);--u:min(calc((100vw - 2 * var(--col-x)) / 1272),calc(100vh / 900))}
html.scrub .stage-light{inset:0;background:radial-gradient(30% 44% at 64% 30%,rgba(214,219,226,.1),rgba(214,219,226,0) 72%),radial-gradient(40% 30% at 70% 86%,rgba(170,176,186,.07),rgba(170,176,186,0) 70%);-webkit-mask-image:none;mask-image:none}
html.scrub .caixa{display:block;position:absolute;z-index:2;right:calc(var(--col-x) - 4 * var(--u));top:calc(50% - 190 * var(--u));width:calc(620 * var(--u));height:calc(590 * var(--u));will-change:opacity}
html.scrub .cx-tampa{will-change:transform,opacity}
html.scrub .hc{position:absolute;left:var(--col-x);top:47%;width:min(680px,calc(100vw - 2 * var(--col-x) - 600 * var(--u)));max-width:none;transform:translateY(-50%)}
html.scrub .band-a,html.scrub .band-b{display:block}
html.scrub .band-b,html.scrub .band-c{position:absolute;left:0;top:0;width:100%;opacity:0}
html.scrub .band-b{max-width:500px}
html.scrub .sweep{display:block}
html.scrub .cue{display:flex}
html.scrub .hero-shot{position:absolute;right:calc(var(--col-x) - 2vw);bottom:0;width:min(42vw,68vh,600px);opacity:0;transform-origin:50% 100%;will-change:transform,opacity}
@media (max-width:1100px){html.scrub .kicker.hc-kicker{letter-spacing:.22em}}
@media (max-height:720px){
  html.scrub .kicker.hc-kicker{margin-bottom:20px}
  html.scrub .hc-slot{margin-top:20px}
  html.scrub .hero-actions{margin-top:24px}
  html.scrub .hero-proof{margin-top:26px;padding-top:16px}
}

/* Os aparelhos: traço prata sobre corpo escuro (escondem o que fica atrás), detalhes gravados quando chegam */
.dev{fill:#0D0E11;stroke:#D9DCE0;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.dev .dt{fill:none;stroke:#A9AEB5;stroke-dasharray:1 1;stroke-dashoffset:1}
.dev-labels text{font-family:var(--label);letter-spacing:.26em;text-transform:uppercase;fill:var(--aco);text-anchor:middle;opacity:0}
.sweep{position:absolute;top:-12%;bottom:-12%;left:0;z-index:5;width:30vw;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.05) 34%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.05) 66%,rgba(255,255,255,0) 100%);mix-blend-mode:screen;opacity:0;will-change:transform,opacity}

/* Aviso de rolagem: embaixo à direita, uma caixinha cuja tampa sobe e desce devagar */
.cue{position:absolute;right:var(--col-x);bottom:38px;z-index:3;align-items:center;gap:16px;font-family:var(--label);font-size:9px;line-height:1;letter-spacing:.32em;text-transform:uppercase;color:var(--aco)}
.cue span{margin-right:-.32em}
.cue-ic{display:block;width:26px;height:32px;overflow:visible;fill:none;stroke:#CDD1D6;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.cue-tampa{stroke:#fff}

/* Faixa B: a lista toma o lugar do subtítulo enquanto os aparelhos sobem */
.bb-list li{--kc:clamp(0,(var(--k,1) - var(--th,0)) * 3,1);position:relative;display:grid;gap:3px;padding:16px 0 17px;opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 12px))}
.bb-list li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(185,190,198,.22);transform-origin:0 50%;transform:scaleX(var(--kc))}
.bb-t{font-family:var(--display);font-weight:460;font-stretch:112%;font-size:clamp(21px,1.75vw,27px);line-height:1.12;letter-spacing:-.018em}
.bb-d{font-size:15px;color:var(--aco)}

/* Seções abaixo da dobra só são montadas perto da tela: a primeira tela abre mais rápido */
.receio,.proc,.linha,.como,.faq,.insta,.pedido,.rodape{content-visibility:auto;contain-intrinsic-size:auto 1100px}
.proc{contain-intrinsic-size:auto 1400px}
.linha{contain-intrinsic-size:auto 1900px}
.rodape{contain-intrinsic-size:auto 420px}
html.cv-off :is(.receio,.proc,.linha,.como,.faq,.insta,.pedido,.rodape){content-visibility:visible}

/* Revelações */
.js .rv .rv-i{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 110ms)}
.js .rv.in .rv-i{opacity:1;transform:none}
.js .rv.settled .rv-i{transition-delay:0s}

/* =========================================================
   RECEIO
   ========================================================= */
.receio{position:relative;padding:var(--sec-y) 0 calc(var(--sec-y) * .85)}
.receio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.receio .h-statement{grid-column:1 / span 10}
.receio .h-statement em{font-style:normal;color:var(--aco)}
.receio-body{grid-column:6 / span 7;margin-top:clamp(30px,3.4vw,52px)}
.receio-body p{font-size:clamp(18px,1.4vw,21px);line-height:1.6;color:var(--aco);max-width:48ch}
.riscos{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(64px,7.5vw,112px)}
.riscos li{position:relative;display:block;padding-top:24px;border-top:1px solid var(--linha-e)}
.risco-n{display:block;margin-bottom:18px;font-family:var(--label);font-size:10px;letter-spacing:.3em;color:var(--aco)}
/* O risco é um fio de luz passando por cima do problema */
.risco-t{font-family:var(--display);font-weight:440;font-stretch:110%;font-size:clamp(21px,1.8vw,28px);line-height:1.22;letter-spacing:-.016em;color:var(--aco)}
.risco-t{display:inline;background:linear-gradient(var(--prata),var(--prata)) 0 58%/100% 1.5px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .riscos .risco-t{transition:background-size 1.1s var(--ease-io) calc(.6s + var(--i,0) * 260ms),color 1s var(--ease-out) calc(1s + var(--i,0) * 260ms)}
.js .riscos:not(.in) .risco-t{background-size:0% 1.5px;color:var(--prata)}
.receio-fim{grid-column:1 / -1;margin-top:clamp(60px,7vw,100px);font-family:var(--display);font-weight:430;font-stretch:112%;font-size:clamp(25px,2.5vw,38px);line-height:1.18;letter-spacing:-.022em}
.receio-fim span{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,22px);max-width:32ch}
.receio-fim .ic-ok{width:clamp(28px,2.4vw,38px);height:clamp(28px,2.4vw,38px);margin-top:.06em;stroke:var(--brilho);stroke-width:1.5}

/* =========================================================
   PROCEDÊNCIA · a conferência que o visitante faz segurando o botão
   ========================================================= */
.proc{position:relative;padding:var(--sec-y) 0;background:linear-gradient(180deg,var(--grafite) 0%,var(--grafite-2) 16%,var(--grafite-2) 84%,var(--grafite) 100%)}
.proc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(56px,6vw,96px) clamp(40px,5vw,88px);align-items:center}
.proc-copy .lede{margin-top:26px}

.conf{position:relative}
.docs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.3vw,18px)}
.doc{display:flex;flex-direction:column;gap:14px;min-width:0}
.doc-cap{display:flex;align-items:center;gap:10px;min-height:24px;font-family:var(--label);font-size:9px;line-height:1.35;letter-spacing:.18em;text-transform:uppercase;color:var(--aco)}
.doc-n{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(185,190,198,.35);font-size:8.5px;letter-spacing:0}
.doc-ok{width:17px;height:17px;margin-left:auto;stroke:var(--brilho);stroke-width:2;opacity:0;transform:scale(.5);transition:opacity .4s var(--ease-out),transform .6s cubic-bezier(.34,1.56,.64,1)}
.doc.ok .doc-ok{opacity:1;transform:none}
.doc-body{position:relative;flex:1;display:flex;flex-direction:column;min-height:284px;padding:18px 16px;border-radius:18px;overflow:hidden}
.doc-scan{position:absolute;top:-6%;bottom:-6%;left:0;width:2px;background:var(--brilho);box-shadow:0 0 14px 3px rgba(255,255,255,.55),0 0 44px 12px rgba(255,255,255,.16);opacity:0;pointer-events:none;will-change:transform,opacity}
.label .doc-scan,.nfe .doc-scan{background:#fff;box-shadow:0 0 14px 3px rgba(120,130,145,.5),0 0 40px 10px rgba(120,130,145,.2)}
/* 1. A etiqueta do fundo da caixa */
.label{background:linear-gradient(180deg,#F8F8F9,#E8EAED);color:#17191D;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 30px 60px -32px rgba(0,0,0,.85)}
.lb-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--display);font-weight:520;font-stretch:108%;font-size:15px;line-height:1.2}
.lb-cap{font-family:var(--text);font-size:12px;font-weight:600;color:#4A505A;white-space:nowrap}
.lb-bars{height:44px;margin:16px 0 16px;background:repeating-linear-gradient(90deg,#17191D 0 2px,transparent 2px 4px,#17191D 4px 5px,transparent 5px 8px,#17191D 8px 11px,transparent 11px 12px,#17191D 12px 13px,transparent 13px 16px,#17191D 16px 17px,transparent 17px 19px);opacity:.9}
.lb-rows{display:grid;gap:10px;margin-top:auto}
.lb-rows dt{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5F656F}
.lb-rows dd{font-weight:600;font-size:13px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* 2. A tela de Ajustes */
.screen{margin:4px;padding:38px 10px 14px;border-radius:24px;background:#000;color:#fff;box-shadow:0 0 0 5px #1B1D22,0 0 0 6px #33373F,0 30px 60px -30px rgba(0,0,0,.9)}
.sc-island{position:absolute;top:11px;left:50%;width:56px;height:16px;margin-left:-28px;border-radius:10px;background:#0D0E11;box-shadow:inset 0 0 0 1px #1C1D21}
.sc-title{margin:2px 6px 12px;font-weight:600;font-size:17px;line-height:1.2}
.sc-rows{padding:0 10px;border-radius:12px;background:#1C1C1E}
.sc-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 0;border-top:1px solid rgba(255,255,255,.08);font-size:11px;line-height:1.3}
.sc-rows div:first-child{border-top:0}
.sc-rows dd{color:#8E8E93;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 3. A nota fiscal */
.nfe{background:linear-gradient(180deg,#F3F2EF,#E8E7E3);color:#222428;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 30px 60px -32px rgba(0,0,0,.85);font-size:11px}
.nf-head{display:grid;gap:2px;padding-bottom:10px;border-bottom:1px dashed rgba(0,0,0,.25)}
.nf-head b{font-family:var(--display);font-weight:600;font-stretch:110%;font-size:15px;letter-spacing:.06em}
.nf-head span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#5B5E63}
.nf-line{display:grid;gap:6px;margin:14px 0}
.nf-line i{display:block;height:5px;border-radius:3px;background:rgba(0,0,0,.11)}
.nf-line i:nth-child(2){width:62%}
.nf-item{font-weight:600;font-size:12px}
.nf-imei{margin-top:8px;color:#4A4D52}
.nf-imei .imei{display:block;margin-top:2px;font-weight:600;font-size:13px;color:#15171B;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.nfe .nf-line:last-child{margin-top:auto;margin-bottom:0}
/* Os dígitos do IMEI: ponto, embaralhado, conferido */
.imei{white-space:nowrap}
.imei .dg{display:inline-block;min-width:.6em;text-align:center}
.imei .dg.dot{opacity:.3}
.imei .dg.scr{opacity:.55}
.is-imei dd,.nf-imei .imei{border-radius:5px;transition:background-color .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.conf.done .label .is-imei dd,.conf.done .nf-imei .imei{background:rgba(21,23,27,.07);box-shadow:0 0 0 4px rgba(21,23,27,.07)}
.conf.done .screen .is-imei dd{color:#fff;background:rgba(255,255,255,.12);box-shadow:0 0 0 4px rgba(255,255,255,.12)}
/* O selo final */
.conf-ok{position:absolute;left:50%;top:100%;z-index:3;display:inline-flex;align-items:center;gap:12px;padding:14px 24px 14px 18px;border-radius:999px;background:var(--btn-prata);color:var(--tinta);font-family:var(--display);font-weight:500;font-stretch:110%;font-size:19px;letter-spacing:-.01em;white-space:nowrap;box-shadow:inset 0 1px 0 #fff,0 24px 60px -18px rgba(0,0,0,.85),0 0 60px rgba(255,255,255,.18);transform:translate(-50%,-50%) scale(.86);opacity:0;pointer-events:none;transition:opacity .5s var(--ease-out),transform .7s cubic-bezier(.34,1.56,.64,1)}
.conf-ok .ic{width:22px;height:22px;stroke-width:2.2}
.conf.done .conf-ok{opacity:1;transform:translate(-50%,-50%) scale(1)}
html:not(.js) .conf-ok{display:none}
.conf-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:26px}
.conf-note{font-size:13px;color:var(--aco)}
.hold-wrap{display:none}
.js .hold-wrap{display:grid;gap:12px;justify-items:start}
.hold{--hp:0;position:relative;display:inline-flex;align-items:center;gap:16px;min-height:64px;padding:8px 28px 8px 8px;border:0;border-radius:999px;background:rgba(230,232,235,.05);box-shadow:inset 0 0 0 1px rgba(230,232,235,.24);color:var(--prata);font-weight:600;font-size:16px;line-height:1.2;cursor:pointer;touch-action:none;-webkit-touch-callout:none;transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
.hold:hover{background:rgba(230,232,235,.08);box-shadow:inset 0 0 0 1px rgba(230,232,235,.45)}
.hold.pressing{transform:scale(.985);background:rgba(230,232,235,.1);box-shadow:inset 0 0 0 1px rgba(230,232,235,.6),0 0 40px rgba(255,255,255,.1)}
.hold.is-done{background:var(--btn-prata);color:var(--tinta);box-shadow:inset 0 1px 0 #fff}
.hold-ring{position:relative;display:grid;place-items:center;width:48px;height:48px;flex:none}
.hold-ring svg:first-child{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hr-track{fill:none;stroke:rgba(230,232,235,.18);stroke-width:2}
.hr-fill{fill:none;stroke:var(--brilho);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.hold.is-done .hr-track{stroke:rgba(21,23,27,.2)}
.hold.is-done .hr-fill{stroke:var(--tinta)}
.hold-ic{width:20px;height:20px}
.hold.invite .hold-ring::after{content:"";position:absolute;inset:0;border-radius:50%;animation:invite 2.6s var(--ease-out) infinite}
@keyframes invite{0%{box-shadow:0 0 0 0 rgba(230,232,235,.35)}70%,100%{box-shadow:0 0 0 16px rgba(230,232,235,0)}}
.hold-hint{font-size:13px;color:var(--aco)}
@media (pointer:coarse){.hold-hint{display:none}}

/* O que a conferência garante: acende em sequência quando ela termina */
.checks{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.checks li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding-top:26px}
.checks li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linha-e)}
.checks li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.25));box-shadow:0 0 12px rgba(255,255,255,.4);transform-origin:0 50%}
.ck-ic{width:40px;height:40px;fill:none;stroke:var(--prata);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.checks p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--aco)}
.js .checks li::after{transform:scaleX(0);transition:transform 1.1s var(--ease-io) calc(var(--i,0) * 170ms)}
.js .checks .ck-ic{opacity:.35;transition:opacity .6s var(--ease-out) calc(var(--i,0) * 170ms)}
.js .checks .ck-ic path{stroke-dasharray:1 1;stroke-dashoffset:0}
.js .checks.lit li::after{transform:scaleX(1)}
.js .checks.lit .ck-ic{opacity:1}
.js .checks.lit .ck-ic path{animation:em-draw 1.2s var(--ease-io) calc(.1s + var(--i,0) * 170ms) both}

/* =========================================================
   SEÇÕES CLARAS · alumínio, nunca branco puro
   ========================================================= */
.light{position:relative;background:var(--aluminio);color:var(--tinta)}

/* A LINHA */
.linha{padding:var(--sec-y) 0}
.linha-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px 48px;align-items:end;margin-bottom:clamp(44px,5vw,72px)}
.linha-head .kicker{grid-column:1 / -1;margin-bottom:4px}
.linha-head .lede{justify-self:end}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:440px;border-radius:26px;background:#0C0D10;color:var(--prata);box-shadow:0 1px 2px rgba(21,23,27,.1),0 40px 70px -48px rgba(21,23,27,.75)}
.tile-iphone{grid-column:1 / span 7;grid-row:1;min-height:640px;background:#08090B}
.tile-mac{grid-column:8 / span 5;grid-row:1;min-height:640px;background:#131416}
.tile-duo,.tile-watch,.tile-capas{grid-column:span 4}
.tile-watch{background:#0B0B0C}
.tile-capas{background:#141417}
.tile-media{position:relative;flex:1 1 auto;min-height:240px}
.tile-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.4s var(--ease-out)}
.tile-media::after{content:"";position:absolute;inset:auto 0 -1px;height:46%;background:linear-gradient(0deg,var(--tile-bg,#0C0D10) 6%,rgba(12,13,16,0));pointer-events:none}
.tile-iphone{--tile-bg:#08090B}
.tile-mac{--tile-bg:#131416}
.tile-watch{--tile-bg:#0B0B0C}
.tile-capas{--tile-bg:#141417}
.tile-mac .tile-media img{object-position:50% 38%}
.tile-watch .tile-media img{object-position:50% 70%}
.tile-capas .tile-media img{object-position:50% 45%}
@media (hover:hover){.tile:hover .tile-media img{transform:scale(1.035)}}
.tile-copy{position:relative;z-index:1;padding:0 30px 28px}
.tile-copy p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--aco);max-width:38ch}
.link-wa{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:12px;font-weight:600;font-size:15.5px;color:var(--prata);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(230,232,235,.3);transition:text-decoration-color .3s var(--ease-out),color .3s}
.link-wa:hover{color:var(--brilho);text-decoration-color:currentColor}
.link-wa .ic{width:18px;height:18px}
.badge{display:inline-flex;align-items:center;padding:6px 10px 6px 11px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(230,232,235,.3);font-family:var(--label);font-size:8px;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--titanio)}
.badge-soon{margin-bottom:14px}
/* O lançamento em destaque dentro do bloco do iPhone */
.tile-novo{position:absolute;right:22px;bottom:22px;z-index:2;display:grid;gap:10px;width:184px;padding:10px 10px 14px;border-radius:18px;background:rgba(18,19,23,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(230,232,235,.12),0 20px 40px -20px rgba(0,0,0,.8)}
.tile-novo img{width:100%;height:auto;border-radius:10px}
.tile-novo p{display:grid;gap:8px;justify-items:start;padding:0 4px;font-family:var(--display);font-weight:480;font-stretch:108%;font-size:15px;line-height:1.2}
.tile-novo b{font-weight:480}
/* iPhone Duo em traço: o dobrável abre e fecha devagar */
.duo-art{display:grid;place-items:center;padding:34px 20px 0}
.duo{width:min(78%,280px);height:auto;fill:none;stroke:var(--prata);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.duo *{vector-effect:non-scaling-stroke}
.duo-l rect:last-child,.duo-r rect:last-child{stroke:rgba(230,232,235,.4)}
.duo-hinge{stroke:rgba(230,232,235,.55);stroke-dasharray:2 5}
.duo-r{transform-box:fill-box;transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){.duo-r{animation:duo-fold 8s var(--ease-io) infinite}}
@keyframes duo-fold{0%,22%{transform:scaleX(1);opacity:1}48%{opacity:.55}56%,74%{transform:scaleX(-1);opacity:1}100%{transform:scaleX(1);opacity:1}}
.js .tile.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.js .tile.rv.in{opacity:1;transform:none}
.js .tile.rv.settled{transition-delay:0s}
.pagamento{display:flex;justify-content:center;margin-top:clamp(36px,4vw,56px)}
.pagamento span{display:inline-flex;align-items:center;gap:12px;padding:12px 22px;border-radius:999px;background:rgba(21,23,27,.045);box-shadow:inset 0 0 0 1px var(--linha-c);font-weight:600;font-size:15px}

/* =========================================================
   DO PEDIDO À ENTREGA · a linha de rastreio se traça com a rolagem
   ========================================================= */
.como{padding:var(--sec-y) 0}
.como-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,120px);align-items:start}
.como-side{position:sticky;top:132px}
.como-fim{margin-top:26px;font-size:clamp(17px,1.3vw,19px);color:var(--aco);max-width:34ch}
.como-side .btn{margin-top:30px}
.rastreio{position:relative;padding-left:72px}
.rs-line{position:absolute;left:23px;top:14px;bottom:14px;width:2px;border-radius:2px;background:rgba(230,232,235,.12);overflow:hidden}
.rs-fill{position:absolute;inset:0;background:linear-gradient(180deg,#7E838B,#F4F5F7);transform-origin:50% 0}
.js .rs-fill{transform:scaleY(0)}
.rs-pack{position:absolute;left:4px;top:-6px;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grafite);box-shadow:inset 0 0 0 1px rgba(230,232,235,.34),0 0 26px rgba(230,232,235,.16);will-change:transform}
.rs-pack svg{width:22px;height:22px;fill:none;stroke:var(--prata);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html:not(.js) .rs-pack,.rm-pin .rs-pack{display:none}
.etapas{display:grid;gap:clamp(44px,5vw,68px)}
.etapa{position:relative}
.et-dot{position:absolute;left:-53px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--grafite);box-shadow:inset 0 0 0 1.5px rgba(230,232,235,.4);transition:background-color .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.etapa.lit .et-dot,html:not(.js) .et-dot{background:var(--prata);box-shadow:0 0 0 4px rgba(230,232,235,.08),0 0 16px rgba(255,255,255,.5)}
.et-n{margin-bottom:10px;font-family:var(--label);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--aco)}
.etapa .h-item+p{margin-top:8px;color:var(--aco);max-width:44ch}
.js .etapa{opacity:.42;transition:opacity .7s var(--ease-out)}
.js .etapa.lit{opacity:1}

/* =========================================================
   DÚVIDAS
   ========================================================= */
.faq{padding:var(--sec-y) 0}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-side{position:sticky;top:132px}
.faq-side p{margin-top:22px;color:var(--tinta-2);max-width:36ch}
.faq-side a{font-weight:600;text-decoration-thickness:1px;text-underline-offset:4px}
.faq-list details{border-top:1px solid var(--linha-c)}
.faq-list details:last-child{border-bottom:1px solid var(--linha-c)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:24px 0;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(currentColor,currentColor) 50% 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/1.5px 100% no-repeat;transition:transform .5s var(--ease-out)}
.faq-list details.is-open summary::after,html:not(.faq-anim) .faq-list details[open] summary::after{transform:rotate(135deg)}
.q{font-family:var(--display);font-weight:470;font-stretch:108%;font-size:clamp(19px,1.5vw,23px);line-height:1.25;letter-spacing:-.012em}
.ans{padding:0 48px 26px 0;color:var(--tinta-2);max-width:62ch}
.ans a{color:var(--tinta);font-weight:600;text-underline-offset:3px}

/* =========================================================
   INSTAGRAM · a fita dos posts
   ========================================================= */
.insta{padding:var(--sec-y) 0 calc(var(--sec-y) * .9);overflow:hidden}
.insta-head{display:grid;justify-items:center;gap:14px;text-align:center}
.insta-head p{color:var(--aco);max-width:44ch}
.insta-head .btn{margin-top:14px}
.fita{margin-top:clamp(44px,5vw,68px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.fita-track{display:flex;gap:14px;width:max-content}
.fita img{width:clamp(170px,17vw,236px);height:auto;aspect-ratio:1;border-radius:18px;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
@media (prefers-reduced-motion:no-preference){
  .js .fita-track.loop{animation:fita 84s linear infinite}
  .fita:hover .fita-track{animation-play-state:paused}
}
@keyframes fita{to{transform:translate3d(calc(-50% - 7px),0,0)}}
@media (prefers-reduced-motion:reduce){.fita{overflow-x:auto}}

/* =========================================================
   PEDIDO
   ========================================================= */
.pedido{position:relative;overflow:hidden;padding:var(--sec-y) 0}
.pedido-emblem{position:absolute;right:-14vw;top:50%;width:min(66vw,920px);transform:translateY(-50%);opacity:.06;pointer-events:none}
.pedido-emblem svg{display:block;width:100%;height:auto}
.pe-ring{fill:none;stroke:var(--prata);stroke-width:4}
.pedido-emblem use{fill:var(--prata)}
.pedido-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,6vw,96px);align-items:center}
.pedido-copy .lede{margin-top:26px}
.contatos{display:grid;gap:10px;margin-top:36px}
.contatos li{display:flex;align-items:center;gap:14px;min-height:44px;color:var(--aco)}
.contatos .ic{color:var(--titanio)}
.contatos a{display:inline-flex;align-items:center;min-height:44px;color:var(--prata);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(230,232,235,.25);transition:border-color .3s}
.contatos a:hover{border-color:var(--prata)}
.form{position:relative;padding:clamp(24px,3vw,38px);border-radius:28px;background:linear-gradient(180deg,rgba(24,27,33,.92),rgba(15,17,21,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(230,232,235,.1),0 40px 80px -40px rgba(0,0,0,.85)}
.field{display:grid;gap:10px;margin-bottom:22px}
.field label,.field legend{font-size:14px;font-weight:600;line-height:1.3;color:var(--prata)}
.field legend{margin-bottom:10px}
.opt{margin-left:4px;font-size:13px;font-weight:400;color:var(--aco)}
.field input[type=text]{width:100%;height:52px;padding:0 16px;border-radius:14px;border:1px solid rgba(230,232,235,.16);background:rgba(11,12,15,.6);color:var(--prata);font-size:16px;transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.field input::placeholder{color:#848B96}
.field input:hover{border-color:rgba(230,232,235,.3)}
.field input:focus{outline:none;border-color:rgba(230,232,235,.7);box-shadow:0 0 0 4px rgba(230,232,235,.1)}
.field input[aria-invalid=true]{border-color:#FF9C8F}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(230,232,235,.18);font-size:14.5px;font-weight:500;color:var(--titanio);transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out)}
.chip:hover span{border-color:rgba(230,232,235,.42);color:var(--prata)}
.chip input:checked+span{background:var(--btn-prata);border-color:transparent;color:var(--tinta);box-shadow:inset 0 1px 0 #fff}
.chip input:focus-visible+span{outline:2px solid var(--brilho);outline-offset:3px}
.field[hidden]{display:none}
.form-erro{margin:-6px 0 16px;font-size:14px;color:#FFB0A5}
.form-nota{margin-top:14px;font-size:13.5px;color:var(--aco);text-align:center}
.form-ok{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:14px 16px;border-radius:14px;background:rgba(230,232,235,.07);font-size:14.5px;color:var(--prata)}
.form-ok[hidden],.form-erro[hidden]{display:none}
.form-ok .ic{margin-top:1px;stroke:var(--brilho)}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{padding:64px 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--linha-e);background:#08090B}
.rodape-grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px 32px;align-items:center}
.rodape-emblem{display:block;width:104px;height:104px}
.re-disc{fill:url(#g-disc)}
.re-ring{fill:none;stroke:url(#g-ring);stroke-width:14}
.re-art use{fill:url(#g-metal)}
.re-ic{fill:none;stroke:#C9CDD3;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
.rodape-nome{font-family:var(--display);font-weight:500;font-stretch:114%;font-size:20px;letter-spacing:-.01em}
.rodape-info p+p{margin-top:6px;font-size:15px;color:var(--aco)}
.rodape-links{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(230,232,235,.22);font-weight:600;font-size:15px;text-decoration:none;transition:box-shadow .3s,background-color .3s}
.pill:hover{box-shadow:inset 0 0 0 1px rgba(230,232,235,.55)}
.pill-main{background:var(--btn-prata);color:var(--tinta);box-shadow:inset 0 1px 0 #fff}
.pill-main:hover{box-shadow:inset 0 1px 0 #fff,0 12px 30px -14px rgba(230,232,235,.5)}
.rodape-legal{grid-column:1 / -1;padding-top:26px;border-top:1px solid var(--linha-e);font-size:13px;line-height:1.6;color:var(--aco);max-width:92ch}
.rodape-copy{grid-column:1 / -1;margin-top:-14px;font-size:13px;color:var(--aco)}
.rodape-base{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;margin-top:-14px}
.rodape-base .rodape-copy{margin-top:0}
.glevik{display:inline-flex;align-items:center;padding:10px 0;margin:-10px 0;font-size:12px;line-height:1;color:var(--aco);text-decoration:none;transition:color .3s var(--ease-out)}
.glevik img{display:block;width:auto;height:22px;opacity:.9;transition:opacity .3s var(--ease-out),filter .3s var(--ease-out)}
.glevik:hover img,.glevik:focus-visible img{opacity:1;filter:brightness(1.14)}
.glevik:hover,.glevik:focus-visible{color:var(--prata)}

/* Barra de WhatsApp no celular */
.wa-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:none;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:999px;background:var(--btn-prata);color:var(--tinta);font-weight:600;font-size:16px;text-decoration:none;box-shadow:inset 0 1px 0 #fff,0 18px 40px -12px rgba(0,0,0,.75);transform:translateY(150%);transition:transform .5s var(--ease-out)}
.wa-bar.show{transform:none}
@media (max-width:720px){.wa-bar{display:flex}}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1100px){
  .checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 28px}
}
@media (max-width:900px){
  .receio .h-statement,.receio-body{grid-column:1 / -1}
  .riscos{grid-template-columns:1fr;gap:0;margin-top:56px}
  .riscos li{padding:21px 0 23px 48px}
  .risco-n{position:absolute;left:0;top:30px;margin:0}
  .proc-grid,.como-grid,.faq-grid,.pedido-grid{grid-template-columns:minmax(0,1fr)}
  .como-side,.faq-side{position:static}
  .linha-head{grid-template-columns:minmax(0,1fr)}
  .linha-head .lede{justify-self:start}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-iphone,.tile-mac{grid-column:1 / -1;grid-row:auto;min-height:560px}
  .tile-duo,.tile-watch,.tile-capas{grid-column:span 1}
  .tile-capas{grid-column:1 / -1}
  .pedido-emblem{right:-40vw;top:18%;width:120vw}
  .rodape-grid{grid-template-columns:auto minmax(0,1fr)}
  .rodape-links{grid-column:1 / -1}
}
@media (max-width:640px){
  .docs{grid-template-columns:minmax(0,1fr);gap:18px}
  .doc{gap:10px}
  .doc-body{min-height:0;padding:14px 16px}
  .label{display:grid;grid-template-columns:minmax(0,1fr) 38%;gap:4px 16px;align-items:center}
  .lb-top{grid-column:1 / -1}
  .lb-bars{height:36px;margin:8px 0 0;grid-column:2;grid-row:2}
  .lb-rows{grid-column:1;grid-row:2;margin-top:8px}
  .lb-rows div:first-child{display:none}
  .screen{margin:4px 5px;padding:30px 10px 12px;border-radius:22px}
  .sc-island{top:8px}
  .sc-title{margin-bottom:8px;font-size:15px}
  .sc-rows div:not(.is-imei){display:none}
  .sc-rows div{font-size:12.5px}
  .nf-line{display:none}
  .nf-head{grid-template-columns:auto 1fr;align-items:baseline;gap:12px;margin-bottom:10px}
  .nf-head span{justify-self:end}
  .conf-ok{font-size:17px;padding:12px 20px 12px 16px}
  .conf-foot{flex-direction:column;align-items:stretch;margin-top:40px}
  .js .hold-wrap{justify-items:stretch}
  .hold{justify-content:flex-start}
  .conf-note{text-align:center}
  .checks{grid-template-columns:minmax(0,1fr);gap:0}
  .checks li{padding:22px 0}
  .bento{grid-template-columns:minmax(0,1fr);gap:14px}
  .tile-iphone,.tile-mac,.tile-duo,.tile-watch,.tile-capas{grid-column:1 / -1;grid-row:auto;min-height:0}
  .tile-media{flex:none;aspect-ratio:4 / 3;min-height:0}
  .tile-iphone .tile-media{aspect-ratio:3 / 2}
  .tile-mac .tile-media{aspect-ratio:1}
  .duo-art{aspect-ratio:auto;padding:30px 20px 10px}
  .tile-copy{padding:0 22px 22px}
  .tile-novo{position:relative;right:auto;bottom:auto;order:2;display:flex;align-items:center;gap:14px;width:auto;margin:0 22px 22px;padding:10px}
  .tile-novo img{width:72px}
  .rastreio{padding-left:60px}
  .rs-line{left:19px}
  .rs-pack{left:0;width:40px}
  .et-dot{left:-45px}
  .faq-list summary{padding:20px 0}
  .ans{padding-right:0}
  .rodape{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){
  .pedido .h-statement{font-size:clamp(32px,9vw,40px)}
  .chip span{padding:0 14px;font-size:14px}
}

/* =========================================================
   MOVIMENTO REDUZIDO · tudo nos estados finais
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv .rv-i,.js .tile.rv{opacity:1;transform:none;transition:none}
  .js .rv .kicker::before,.js .rv .kicker::after{transform:none;transition:none}
  .js .riscos .risco-t{transition:none}
  .glow{animation:none}
  .btn-prata:hover::after{animation:none}
  .js .etapa{opacity:1;transition:none}
}