/* ==========================================================================
   PUD MÍDIAS · Design System v1.0
   Fusão: Ateevibes (papel, colagem, Anton, ticker, reveals .rv/.rv-l/.cut)
        + Aetheris  (preloader, grid técnico, letreiro vazado .text-stroke,
                     .hover-card, .scan-line, .tunnel-ring, .tech-separator)
   Paleta oficial: Creme #F2EBE3 · Ameixa #382036 · Malva #6E4466
   ========================================================================== */

:root{
  /* cor · oficiais */
  --creme:#F2EBE3; --ameixa:#382036; --malva:#6E4466;
  /* cor · derivadas */
  --a900:#1E0F1C; --a700:#2A1528; --m300:#B88AAE; --m200:#D9C3D1;
  --nevoa:#E8DDE3; --papel:#FBF8F4; --grafite:#5E5260;
  /* cor · feedback */
  --ok:#2E6B4E; --warn:#8A5A00; --err:#A3343F; --info:#3B5578;
  /* linhas */
  --line:rgba(56,32,54,.14); --line-2:rgba(56,32,54,.28);
  --line-d:rgba(242,235,227,.10); --line-d2:rgba(242,235,227,.22);
  /* tipo */
  --f-disp:Anton,Impact,'Arial Narrow',sans-serif;
  --f-body:Archivo,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* movimento */
  --e-expo:cubic-bezier(.19,1,.22,1);      /* Ateevibes · colagem */
  --e-smooth:cubic-bezier(.22,.61,.36,1);  /* Ateevibes · reveal */
  --e-signal:cubic-bezier(.16,1,.3,1);     /* Aetheris · hover-card */
  --e-inout:cubic-bezier(.77,0,.18,1);     /* preloader (power4.inOut) */
  --d-instant:120ms; --d-fast:200ms; --d-base:400ms; --d-slow:800ms; --d-cine:1150ms;
  /* forma */
  --r-s:3px; --r-m:8px; --r-l:16px; --r-pill:999px;
  --nav:64px; --gut:clamp(18px,4vw,48px);
  --glow:0 0 0 1px rgba(184,138,174,.35),0 14px 44px -10px rgba(110,68,102,.65);
  --shadow-paper:0 1px 0 rgba(56,32,54,.06),0 18px 40px -22px rgba(56,32,54,.35);
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html.is-loading{overflow:hidden}
body{background:var(--creme);color:var(--ameixa);font:400 17px/1.62 var(--f-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--malva);color:var(--creme)}
:focus-visible{outline:2px solid var(--malva);outline-offset:3px}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--creme)}
::-webkit-scrollbar-thumb{background:var(--m200)}
::-webkit-scrollbar-thumb:hover{background:var(--malva)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grão de papel (Ateevibes body::after) */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.26;mix-blend-mode:multiply;
  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='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

.mono{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
.disp{font-family:var(--f-disp);font-weight:400;text-transform:uppercase;letter-spacing:-.012em;line-height:.96}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gut)}
section{position:relative}

/* ---------- utilitários herdados (Aetheris) ---------- */
.grid-bg{background-image:linear-gradient(to right,rgba(56,32,54,.05) 1px,transparent 1px),
  linear-gradient(to bottom,rgba(56,32,54,.05) 1px,transparent 1px);background-size:56px 56px}
.sec-dark .grid-bg,.on-dark .grid-bg{background-image:linear-gradient(to right,rgba(242,235,227,.04) 1px,transparent 1px),
  linear-gradient(to bottom,rgba(242,235,227,.04) 1px,transparent 1px)}
.text-stroke{-webkit-text-stroke:1.2px rgba(56,32,54,.5);color:transparent}
.sec-dark .text-stroke,.on-dark .text-stroke{-webkit-text-stroke-color:rgba(242,235,227,.32)}
.text-stroke-hover{transition:color .5s var(--e-signal),-webkit-text-stroke-color .5s var(--e-signal)}
.text-stroke-hover:hover{-webkit-text-stroke-color:var(--malva);color:rgba(110,68,102,.12)}
.sec-dark .text-stroke-hover:hover{-webkit-text-stroke-color:var(--m300);color:rgba(184,138,174,.14)}
.hover-card{transition:all .3s var(--e-signal)}
.hover-card:hover{background:rgba(110,68,102,.045);border-color:var(--malva)}
.sec-dark .hover-card:hover{background:rgba(242,235,227,.035);border-color:var(--m300)}

/* ---------- preloader (Aetheris) ---------- */
.preloader{position:fixed;inset:0;background:var(--creme);z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden}
.preloader .pl-inner{position:relative;z-index:2;text-align:center;padding:0 24px;width:min(420px,100%)}
.pl-icon{width:46px;margin:0 auto 22px;animation:plPulse 1.4s ease-in-out infinite}
.pl-title{font-size:clamp(38px,7vw,64px);letter-spacing:.02em;margin-bottom:18px}
.pl-title span{color:transparent;-webkit-text-stroke:1.3px var(--ameixa)}
.pl-bar{height:3px;background:var(--line);overflow:hidden;position:relative}
#loader-bar{height:100%;width:0;background:var(--malva);box-shadow:0 0 14px var(--m300);transition:width .12s linear}
.pl-meta{display:flex;justify-content:space-between;margin-top:12px;color:var(--malva);font-size:10px}
.pl-dots{position:absolute;inset:0;z-index:1;opacity:.5;
  background:radial-gradient(circle,rgba(110,68,102,.28) 1.3px,transparent 1.8px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 60%);mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 60%);
  animation:dotDrift 8s linear infinite}
@keyframes plPulse{50%{transform:scale(.9);opacity:.6}}

/* ---------- cantos HUD (Aetheris) ---------- */
.hud{position:fixed;inset:0;pointer-events:none;z-index:70}
.hud i{position:absolute;width:10px;height:10px;border-color:rgba(56,32,54,.45);border-style:solid;border-width:0}
.hud i:nth-child(1){top:12px;left:12px;border-top-width:1px;border-left-width:1px}
.hud i:nth-child(2){top:12px;right:12px;border-top-width:1px;border-right-width:1px}
.hud i:nth-child(3){bottom:12px;left:12px;border-bottom-width:1px;border-left-width:1px}
.hud i:nth-child(4){bottom:12px;right:12px;border-bottom-width:1px;border-right-width:1px}
@media(max-width:760px){.hud{display:none}}

/* ---------- navbar ---------- */
.topnav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:80;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:0 var(--gut);background:rgba(242,235,227,.84);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);transition:transform .5s var(--e-expo),background .3s}
.topnav.is-hidden{transform:translateY(-100%)}
.topnav .brand img{height:22px;width:auto}
.nav-links{display:flex;gap:4px;list-style:none;height:100%;align-items:center}
.nav-links a,.nav-mock .nl a{position:relative;display:block;padding:10px 14px;text-decoration:none;font:500 11px/1 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ameixa);opacity:.7;transition:opacity .2s,color .2s}
.nav-links a::before,.nav-mock .nl a::before{content:'';position:absolute;left:50%;bottom:2px;width:5px;height:5px;border-radius:50%;
  background:var(--malva);transform:translateX(-50%) scale(0);transition:transform .35s var(--e-expo)}
.nav-links a:hover,.nav-links a.is-active{opacity:1;color:var(--malva)}
.nav-links a:hover::before,.nav-links a.is-active::before{transform:translateX(-50%) scale(1)}
.nav-right{display:flex;align-items:center;gap:14px}
.live{display:inline-flex;align-items:center;gap:8px;color:var(--malva);font-size:10px}
.live i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--malva)}
.live i::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--malva);animation:ping 1.8s var(--e-smooth) infinite}
.sec-dark .live,.on-dark .live{color:var(--m300)}
.sec-dark .live i,.on-dark .live i{background:var(--m300);box-shadow:0 0 10px var(--m300)}
.sec-dark .live i::after,.on-dark .live i::after{border-color:var(--m300)}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.2);opacity:0}}
.nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:var(--r-s)}
.nav-burger .ico{width:22px;height:22px}
.nav-drawer{position:fixed;top:var(--nav);left:0;right:0;z-index:79;background:var(--creme);border-bottom:1px solid var(--line);
  padding:10px var(--gut) 24px;transform:translateY(-110%);transition:transform .55s var(--e-expo);visibility:hidden}
.nav-drawer.is-open{transform:none;visibility:visible}
.nav-drawer a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);
  text-decoration:none;font-family:var(--f-disp);font-size:30px;text-transform:uppercase}
.nav-drawer a span{font:500 10px/1 var(--f-mono);letter-spacing:.2em;color:var(--malva)}
@media(max-width:980px){.nav-links{display:none}.nav-burger{display:inline-flex}.nav-right .live{display:none}}
@media(max-width:420px){.nav-right .btn{display:none}}

/* trilho de seções (rail Ateevibes) */
.rail-index{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:14px}
.rail-index a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ameixa)}
.rail-index a i{width:7px;height:7px;border-radius:50%;border:1px solid var(--line-2);background:transparent;transition:all .4s var(--e-expo)}
.rail-index a span{font:500 9.5px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;opacity:0;transform:translateX(-6px);transition:all .35s var(--e-expo);
  background:var(--creme);padding:5px 7px;border:1px solid var(--line);pointer-events:none}
.rail-index a:hover span,.rail-index a:focus-visible span{opacity:1;transform:none}
.rail-index.on-dark a span{background:var(--a900);border-color:var(--line-d2)}
.rail-index a.is-active i{background:var(--malva);border-color:var(--malva);transform:scale(1.5);box-shadow:0 0 0 4px rgba(110,68,102,.15)}
.rail-index.on-dark a{color:var(--creme)}
.rail-index.on-dark a i{border-color:var(--line-d2)}
.rail-index.on-dark a.is-active i{background:var(--m300);border-color:var(--m300);box-shadow:0 0 12px var(--m300)}
@media(max-width:1280px){.rail-index{display:none}}

/* ==========================================================================
   01 · HERO
   ========================================================================== */
#hero{min-height:100svh;padding-top:var(--nav);display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;overflow:hidden;background:var(--creme)}
#signal{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 64% 48%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse 60% 70% at 64% 48%,#000 20%,transparent 78%)}
.hero-giant{position:absolute;left:0;bottom:-.1em;z-index:1;pointer-events:none;white-space:nowrap;font-family:var(--f-disp);
  font-size:clamp(130px,23vw,400px);line-height:.8;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.2px rgba(56,32,54,.12);
  animation:giantDrift 26s ease-in-out infinite alternate}
@keyframes giantDrift{from{transform:translateX(-2%)}to{transform:translateX(-14%)}}
#hero .type{padding:0 0 0 var(--gut);position:relative;z-index:6}
#hero .kicker{display:flex;align-items:center;gap:12px;margin-bottom:24px;color:var(--malva)}
#hero .kicker .sep{width:28px;height:1px;background:var(--line-2)}
#hero h1{font-size:clamp(58px,7.6vw,132px);line-height:.9}
#hero h1 .l{display:block;overflow:hidden;padding-bottom:.035em}
#hero h1 .l b{display:block;font-weight:400}
#hero h1 .l.o b{color:transparent;-webkit-text-stroke:1.6px var(--ameixa);
  background:linear-gradient(var(--malva),var(--malva)) no-repeat 0 100%/100% 0;-webkit-background-clip:text;background-clip:text;
  transition:background-size .8s var(--e-expo),-webkit-text-stroke-color .5s}
#hero h1 .l.o:hover b{background-size:100% 100%;-webkit-text-stroke-color:var(--malva)}
#hero h1 .l.m b{color:var(--malva)}
.dotmark{display:inline-block;width:.15em;height:.15em;border-radius:50%;background:currentColor;margin-left:.05em;vertical-align:baseline;
  animation:dotBlink 2.4s var(--e-smooth) infinite}
@keyframes dotBlink{0%,100%{transform:scale(1)}50%{transform:scale(.55)}}
#hero .sub{margin-top:26px;max-width:40ch;font-size:18px;line-height:1.6;color:var(--grafite)}
#hero .acts{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{margin-top:44px;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;border-top:1.5px solid var(--ameixa);max-width:560px}
.hero-stats>div{padding:16px 28px 0 0;margin-right:28px;border-right:1px solid var(--line)}
.hero-stats>div:last-child{border-right:0;margin-right:0}
.hero-stats b{display:block;font:400 clamp(34px,3.4vw,48px)/1 var(--f-disp);letter-spacing:.01em}
.hero-stats b small{font-size:.5em;margin-left:2px;color:var(--malva)}
.hero-stats>div>span{display:block;margin-top:8px;font:500 10px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grafite)}

/* palco da colagem (#stage · Ateevibes) */
#stage{position:relative;height:calc(100svh - var(--nav));min-height:640px;max-height:920px;z-index:3}
#stage .el{position:absolute;will-change:transform,opacity;opacity:0}
#stage .ground{right:5%;top:5%;width:56%;height:88%;object-fit:cover;filter:drop-shadow(0 30px 50px rgba(56,32,54,.18))}
#stage .paper{width:36%;left:-3%;top:9%;transform:rotate(-4deg);z-index:2;filter:drop-shadow(0 18px 30px rgba(56,32,54,.18))}
#stage .half{width:34%;left:2%;bottom:7%;z-index:2;mix-blend-mode:multiply;opacity:.9}
#stage .brush{width:54%;left:-4%;top:58%;z-index:3;mix-blend-mode:multiply}
#stage .card{left:13%;top:19%;width:72%;z-index:5}
#stage .sticker{right:2%;top:4%;width:clamp(100px,10vw,148px);z-index:7}
#stage .tick{left:4%;bottom:4%;z-index:7;color:var(--malva)}
#stage .tag{position:absolute;z-index:8;opacity:0;transition:opacity .6s var(--e-smooth),transform .7s var(--e-expo);transform:translateY(8px)}
#stage .tag.on{opacity:1;transform:none}
#stage .t1{left:3%;top:24%}
#stage .t2{right:0;top:52%}
#stage .t3{left:30%;bottom:13%}
#stage .rings{position:absolute;left:49%;top:43%;width:0;height:0;z-index:1;perspective:800px}
.tag{background:var(--papel);border:1.5px solid var(--ameixa);padding:9px 13px;font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ameixa);white-space:nowrap}
.tag.m{background:var(--malva);border-color:var(--malva);color:var(--creme);box-shadow:4px 4px 0 var(--a900)}
svg.lead{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:7}
svg.lead path{stroke:var(--ameixa);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-dasharray:var(--L);stroke-dashoffset:var(--L)}
svg.lead circle{fill:var(--malva);opacity:0;transition:opacity .4s .9s}
svg.lead.on circle{opacity:1}

/* TV (componente de mídia) */
.tv{position:relative}
.tv-body{position:relative;background:linear-gradient(160deg,#33182f,#140912 70%);padding:12px 12px 16px;border-radius:14px;
  box-shadow:0 50px 90px -30px rgba(30,15,28,.7),0 0 0 1px rgba(30,15,28,.8),inset 0 1px 0 rgba(255,255,255,.09)}
.tv-body::after{content:'';position:absolute;left:50%;bottom:5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--m300);box-shadow:0 0 8px var(--m300)}
.tv-screen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:var(--a900);container-type:inline-size;isolation:isolate}
.tv-stand{width:28%;height:18px;margin:0 auto;background:linear-gradient(#2a1528,#160a14);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)}
.tv-foot{width:46%;height:5px;margin:0 auto;border-radius:3px;background:#1e0f1c;box-shadow:0 12px 20px rgba(30,15,28,.35)}
.scr-fx{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(10,4,9,.55) 100%),
  linear-gradient(115deg,rgba(255,255,255,.12),transparent 38%)}
.scr-fx::after{content:'';position:absolute;left:0;right:0;height:22%;top:-22%;background:linear-gradient(transparent,rgba(242,235,227,.08),transparent);animation:roll 5.5s linear infinite}
@keyframes roll{to{top:110%}}
.tv-hud{position:absolute;top:4.2cqw;left:4.4cqw;right:4.4cqw;z-index:7;display:flex;justify-content:space-between;font:500 2.1cqw/1 var(--f-mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--creme);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tv-hud .rec{display:inline-flex;align-items:center;gap:1.2cqw}
.tv-hud .rec i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--m300);box-shadow:0 0 1.8cqw var(--m300);animation:dotBlink 1.2s infinite}
.tv-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(242,235,227,.14);z-index:7}
.tv-prog i{display:block;height:100%;width:0;background:var(--m300);box-shadow:0 0 10px var(--m300)}
.tv-prog i.run{animation:prog var(--slot,3.4s) linear forwards}
@keyframes prog{to{width:100%}}
.tv-screen.switching::before{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;mix-blend-mode:screen;opacity:.9;
  background:repeating-linear-gradient(0deg,rgba(242,235,227,.5) 0 2px,transparent 2px 5px);animation:static .36s steps(3) forwards}
@keyframes static{0%{transform:translateY(0);opacity:.9}50%{transform:translateY(-8px);opacity:.6}100%{transform:translateY(4px);opacity:0}}
.tv-screen.switching .ad.on{animation:glitch .38s steps(2,end)}
@keyframes glitch{0%{clip-path:inset(0);transform:none;filter:none}
  20%{clip-path:inset(12% 0 58% 0);transform:translateX(-6px);filter:hue-rotate(50deg) saturate(2)}
  40%{clip-path:inset(46% 0 22% 0);transform:translateX(6px)}
  60%{clip-path:inset(72% 0 4% 0);transform:translateX(-3px);filter:brightness(1.7)}
  80%{clip-path:inset(0 0 78% 0);transform:translateX(2px)}
  100%{clip-path:inset(0);transform:none;filter:none}}

/* anúncios exemplo dentro da tela (cqw = escala pela largura da tela) */
.ad{position:absolute;inset:0;opacity:0;display:flex;flex-direction:column;justify-content:center;padding:8cqw 7cqw;z-index:2}
.ad.on{opacity:1}
.ad .k{font:500 2.2cqw/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;margin-bottom:2.4cqw}
.ad .h{font:400 9.6cqw/.9 var(--f-disp);text-transform:uppercase}
.ad .p{margin-top:2.6cqw;font:500 2.6cqw/1.3 var(--f-body);max-width:60%}
.ad .note{position:absolute;right:4.4cqw;bottom:5cqw;font:500 1.7cqw/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.ad .ico{position:absolute;right:7cqw;top:50%;width:22cqw;height:22cqw;transform:translateY(-50%);stroke-width:1.2}
.ad-1{background:var(--malva);color:var(--creme)}
.ad-1::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(242,235,227,.22) .5cqw,transparent .62cqw) 0 0/3.4cqw 3.4cqw;
  -webkit-mask-image:linear-gradient(110deg,transparent 30%,#000 90%);mask-image:linear-gradient(110deg,transparent 30%,#000 90%)}
.ad-1 .h span{color:transparent;-webkit-text-stroke:.25cqw var(--creme)}
.ad-2{background:var(--creme);color:var(--ameixa)}
.ad-2 .ico{color:var(--malva)}
.ad-3{background:var(--ameixa);color:var(--creme)}
.ad-3 .big{position:absolute;right:5cqw;bottom:2cqw;font:400 26cqw/.8 var(--f-disp);color:transparent;-webkit-text-stroke:.22cqw rgba(242,235,227,.45)}
.ad-4{background:var(--nevoa);color:var(--ameixa)}
.ad-4 .ico{color:var(--ameixa)}
.ad-5{background:linear-gradient(120deg,var(--a900),#3a1b37);color:var(--creme)}
.ad-5 .ico{color:var(--m300)}

/* selo giratório */
.sticker{aspect-ratio:1}
.sticker svg{width:100%;height:100%;animation:spin 22s linear infinite}
.sticker text{font:500 8.4px var(--f-mono);letter-spacing:.32em;text-transform:uppercase;fill:var(--ameixa)}
.sticker .core{position:absolute;inset:26%;border-radius:50%;background:var(--ameixa);display:grid;place-items:center;box-shadow:0 10px 24px rgba(30,15,28,.3)}
.sticker .core img{width:42%}
@keyframes spin{to{transform:rotate(360deg)}}

/* anéis de sinal (Aetheris .singularity-wrapper/.tunnel-ring) */
.singularity-wrapper{perspective:800px;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;display:flex;align-items:center;justify-content:center;pointer-events:none}
.tunnel-ring{position:absolute;border-radius:50%;border:1px solid rgba(110,68,102,.2);box-shadow:0 0 22px rgba(110,68,102,.06);animation:tunnelMove 6s linear infinite;opacity:0}
.tunnel-ring:nth-child(even){border-style:dashed;border-color:rgba(56,32,54,.12)}
.sec-dark .tunnel-ring,.on-dark .tunnel-ring,.ds-footer .tunnel-ring{border-color:rgba(184,138,174,.32);box-shadow:0 0 24px rgba(184,138,174,.08)}
.sec-dark .tunnel-ring:nth-child(even),.on-dark .tunnel-ring:nth-child(even),.ds-footer .tunnel-ring:nth-child(even){border-color:rgba(242,235,227,.14)}
#stage .rings .tunnel-ring{left:0;top:0}
@keyframes tunnelMove{0%{transform:translateZ(-500px) scale(0);opacity:0}20%{opacity:1}100%{transform:translateZ(800px) scale(2);opacity:0}}

/* revelação do hero (Aetheris .hero-anim) */
.hero-anim{opacity:0;transform:translateY(16px)}
html.no-motion .hero-anim{opacity:1;transform:none}

@media(max-width:1020px){
  #hero{grid-template-columns:1fr;min-height:auto;padding-bottom:20px}
  #hero .type{padding:56px var(--gut) 0}
  #stage{height:auto;aspect-ratio:1/1.02;min-height:0;max-height:none;margin:10px 0 0}
  .hero-giant{font-size:34vw;bottom:auto;top:52%}
}
@media(max-width:600px){
  #stage .t1,#stage .t2{display:none}
  #stage .t3{left:auto;right:4%;bottom:6%}
  #stage .tick{display:none}
  #stage .card{left:6%;width:84%;top:20%}
  #stage .sticker{width:84px;right:3%;top:2%}
  .hero-stats{grid-template-columns:repeat(3,1fr);max-width:none}
  .hero-stats>div{padding-right:12px;margin-right:12px}
  #hero .acts .btn{flex:1 1 100%;justify-content:center}
}

/* ==========================================================================
   TICKER (Ateevibes .mq)
   ========================================================================== */
#ticker{background:var(--a900);overflow:hidden;border-top:2px solid var(--malva);border-bottom:2px solid var(--malva);z-index:4}
.mq{display:block}
.mq-row{display:flex;width:max-content;overflow:hidden}
.mq-track{display:flex;align-items:center;flex:0 0 auto;gap:var(--g);padding-right:var(--g);animation:mq var(--dur) linear infinite;will-change:transform}
.mq-row.rev .mq-track{animation-direction:reverse}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-100%)}}
#ticker:hover .mq-track,.mq:hover .mq-track{animation-play-state:paused}
.mq-a{--g:44px;--dur:40s;padding:16px 0;border-bottom:1px solid rgba(242,235,227,.12)}
.mq-a .w{font-family:var(--f-disp);font-size:clamp(24px,2.6vw,38px);letter-spacing:.03em;text-transform:uppercase;color:var(--creme);line-height:1;white-space:nowrap}
.mq-a .w.o{color:transparent;-webkit-text-stroke:1.4px var(--creme)}
.mq-a .dot{width:10px;height:10px;background:var(--m300);border-radius:50%;flex:0 0 auto;box-shadow:0 0 12px var(--m300)}
.mq-b{--g:38px;--dur:56s;background:var(--malva);padding:10px 0}
.mq-b .w{font:500 11px/1 var(--f-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--creme);white-space:nowrap}
.mq-b .sl{width:5px;height:5px;border-radius:50%;background:rgba(242,235,227,.6);flex:0 0 auto}

/* ==========================================================================
   SEÇÕES · fundos animados
   ========================================================================== */
.sec{padding:clamp(88px,11vw,150px) 0;overflow:hidden;isolation:isolate}
.sec-paper{background:var(--creme);color:var(--ameixa)}
.sec-dark{background:var(--a900);color:var(--creme)}
.bg-layer{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-layer .grid-bg{position:absolute;inset:0}
.bg-dots{position:absolute;inset:-10%;background:radial-gradient(circle,rgba(110,68,102,.3) 1.3px,transparent 1.8px) 0 0/24px 24px;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);
  -webkit-mask-size:55% 60%;mask-size:55% 60%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:dotDrift 14s linear infinite,spot 22s ease-in-out infinite alternate}
.sec-dark .bg-dots{background-image:radial-gradient(circle,rgba(184,138,174,.28) 1.3px,transparent 1.8px)}
@keyframes dotDrift{to{background-position:24px 48px}}
@keyframes spot{0%{-webkit-mask-position:8% 10%;mask-position:8% 10%}50%{-webkit-mask-position:90% 40%;mask-position:90% 40%}100%{-webkit-mask-position:30% 95%;mask-position:30% 95%}}
.scrap{position:absolute;opacity:.55;will-change:transform}
.scrap.paper{width:min(380px,40vw);mix-blend-mode:multiply;opacity:.5}
.scrap.brush{width:min(420px,46vw);mix-blend-mode:multiply;opacity:.16}
.scrap.half{width:min(320px,36vw);mix-blend-mode:multiply;opacity:.12}
.bg-photo{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;opacity:.22;animation:kenburns 32s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-2%,-3%)}}
.bg-veil{position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 40%,transparent 20%,var(--a900) 85%)}
.scan-line{position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(to right,transparent,var(--m300),transparent);
  opacity:.45;box-shadow:0 0 16px var(--m300);animation:scan 6s linear infinite;z-index:1}
@keyframes scan{0%{top:0}100%{top:100%}}

/* separador técnico (Aetheris) */
.tech-separator{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(56,32,54,.2),transparent);position:relative;margin:0 auto;z-index:5}
.tech-separator::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:3px;background:var(--malva);
  box-shadow:0 0 12px rgba(110,68,102,.6);animation:sepTravel 7s var(--e-inout) infinite alternate}
.tech-separator.dark{background:linear-gradient(90deg,transparent,rgba(242,235,227,.18),transparent);background-color:var(--a900)}
.tech-separator.dark::after{background:var(--m300);box-shadow:0 0 14px var(--m300)}
@keyframes sepTravel{from{left:12%}to{left:88%}}

/* cabeçalho de seção */
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,44px);align-items:end;margin-bottom:clamp(48px,6vw,84px);padding-bottom:28px;border-bottom:1.5px solid currentColor}
.sec-num{font:400 clamp(96px,14vw,210px)/.78 var(--f-disp);letter-spacing:-.02em}
.sec-head .kick{color:var(--malva);margin-bottom:14px;display:flex;gap:10px;align-items:center}
.sec-dark .sec-head .kick{color:var(--m300)}
.sec-head h2{font-size:clamp(46px,6.2vw,96px);line-height:.92}
.sec-head h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.4px var(--ameixa)}
.sec-dark .sec-head h2 em{-webkit-text-stroke-color:var(--creme)}
.sec-head .lede{margin-top:16px;max-width:58ch;color:var(--grafite)}
.sec-dark .sec-head .lede{color:var(--m200)}
@media(max-width:700px){.sec-head{grid-template-columns:1fr}.sec-num{font-size:110px}}

.sub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:72px 0 28px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sec-dark .sub-head{border-color:var(--line-d)}
.sub-head:first-of-type{margin-top:0}
.sub-head h3{font:400 clamp(30px,3.2vw,46px)/1 var(--f-disp);text-transform:uppercase}
.sub-head h3 small{font:500 11px/1 var(--f-mono);letter-spacing:.2em;color:var(--malva);vertical-align:top;margin-right:12px}
.sec-dark .sub-head h3 small{color:var(--m300)}
.sub-head p{max-width:52ch;font-size:15px;color:var(--grafite)}
.sec-dark .sub-head p{color:var(--m200)}

/* revelações (Ateevibes) */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e-smooth),transform .8s var(--e-smooth)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-34px);transition:opacity .8s var(--e-smooth),transform .9s var(--e-smooth)}
.rv-l.in{opacity:1;transform:none}
.cut>img,.cut>.cut-in{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--e-smooth)}
.cut.in>img,.cut.in>.cut-in{clip-path:inset(0 0 0 0)}
html.no-js .rv,html.no-js .rv-l{opacity:1;transform:none}

/* ==========================================================================
   02 · TIPOGRAFIA
   ========================================================================== */
.font-cards{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:0;border:1.5px solid var(--ameixa);background:var(--papel)}
.font-card{position:relative;padding:28px 28px 26px;border-right:1px solid var(--line);overflow:hidden;min-height:330px;display:flex;flex-direction:column}
.font-card:last-child{border-right:0}
.font-card .role{color:var(--malva)}
.font-card .aa.f-anton{text-transform:none}
.font-card .aa{font-size:clamp(96px,10vw,150px);line-height:.9;margin:18px 0 6px;transition:letter-spacing .6s var(--e-expo),color .4s}
.font-card:hover .aa{letter-spacing:.04em;color:var(--malva)}
.font-card h4{font:700 22px/1.2 var(--f-body)}
.font-card .stack{margin-top:8px;font:400 12px/1.5 var(--f-mono);color:var(--grafite);word-break:break-word}
.font-card .weights{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:18px}
.font-card .glyphs{margin-top:14px;font-size:15px;letter-spacing:.06em;color:var(--grafite);word-break:break-all}
.f-anton{font-family:var(--f-disp);text-transform:uppercase}
.f-archivo{font-family:var(--f-body);font-weight:600}
.f-mono{font-family:var(--f-mono);font-weight:500}
.chip-s{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--line-2);font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;color:var(--ameixa);background:var(--papel);white-space:nowrap}
.chip-s b{font-weight:500;color:var(--malva)}
.sec-dark .chip-s{border-color:var(--line-d2);color:var(--creme);background:rgba(242,235,227,.03)}
.sec-dark .chip-s b{color:var(--m300)}
.loading-card{margin-top:22px;display:grid;grid-template-columns:auto 1fr;gap:28px;padding:24px 28px;border:1px dashed var(--line-2);background:rgba(251,248,244,.6)}
.loading-card ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.loading-card li{counter-increment:s;font-size:14.5px;line-height:1.5;color:var(--grafite)}
.loading-card li::before{content:'0' counter(s);display:block;font:500 10px/1 var(--f-mono);letter-spacing:.2em;color:var(--malva);margin-bottom:8px}
.loading-card li b{color:var(--ameixa)}
.type-scale{border-top:1.5px solid var(--ameixa)}
.type-row{display:grid;grid-template-columns:120px 1fr minmax(260px,420px);gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:background .3s var(--e-signal),padding .4s var(--e-expo)}
.type-row:hover{background:linear-gradient(90deg,rgba(110,68,102,.06),transparent 70%);padding-left:12px}
.type-row .tk{font:500 10.5px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--malva)}
.type-row .tk small{display:block;color:var(--grafite);letter-spacing:.06em;text-transform:none;margin-top:4px}
.type-row .sp{min-width:0;overflow:hidden;text-overflow:ellipsis}
.type-row .specs{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.t-display{font:400 clamp(64px,8vw,132px)/.9 var(--f-disp);text-transform:uppercase;letter-spacing:-.012em}
.t-outline{font:400 clamp(64px,8vw,132px)/.9 var(--f-disp);text-transform:uppercase;letter-spacing:-.012em;color:transparent;-webkit-text-stroke:1.5px var(--ameixa)}
.t-h1{font:400 clamp(48px,6.2vw,96px)/.92 var(--f-disp);text-transform:uppercase;letter-spacing:-.01em}
.t-h2{font:400 clamp(38px,4.6vw,68px)/.96 var(--f-disp);text-transform:uppercase;letter-spacing:-.005em}
.t-h3{font:400 clamp(28px,3vw,42px)/1.02 var(--f-disp);text-transform:uppercase}
.t-h4{font:700 24px/1.2 var(--f-body);letter-spacing:-.01em}
.t-h5{font:600 19px/1.3 var(--f-body);letter-spacing:-.005em}
.t-h6{font:500 12px/1.4 var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
.t-body-lg{font:400 19px/1.6 var(--f-body)}
.t-body{font:400 17px/1.62 var(--f-body)}
.t-body-sm{font:400 15px/1.55 var(--f-body)}
.t-caption{font:500 13px/1.45 var(--f-body);letter-spacing:.01em;color:var(--grafite)}
.t-label{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
.t-helper{font:400 12.5px/1.4 var(--f-body);color:var(--grafite)}
.t-num{font:400 56px/1 var(--f-disp);letter-spacing:.01em}
.t-num small{font-size:.45em;color:var(--malva);margin-left:4px}
@media(max-width:1020px){
  .font-cards{grid-template-columns:1fr}
  .font-card{border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .loading-card{grid-template-columns:1fr}.loading-card ol{grid-template-columns:1fr}
  .type-row{grid-template-columns:1fr;gap:12px}
  .type-row .specs{justify-content:flex-start}
}

/* letreiro vazado */
.letter-lab{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1.5px solid var(--ameixa)}
.lt{position:relative;padding:26px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line);overflow:hidden;background:var(--papel)}
.lt:last-child{border-right:0}
.lt .word{font:400 clamp(84px,9vw,148px)/.86 var(--f-disp);text-transform:uppercase;letter-spacing:-.01em}
.lt .cap{font-size:14px;color:var(--grafite);max-width:34ch}
.lt .cap b{color:var(--ameixa)}
.lt-outline .word{color:transparent;-webkit-text-stroke:1.5px var(--ameixa);transition:-webkit-text-stroke-color .4s,letter-spacing .7s var(--e-expo)}
.lt-outline:hover .word{-webkit-text-stroke-color:var(--malva);letter-spacing:.03em}
.lt-knock{background:var(--ameixa)}
.lt-knock .cap{color:var(--m200)}.lt-knock .cap b{color:var(--creme)}
.lt-knock .mono{color:var(--m300)!important}
.lt-knock .word{color:transparent;background:url(textura-duo.webp) 0 50%/260% auto;-webkit-background-clip:text;background-clip:text;animation:knock 16s ease-in-out infinite alternate}
@keyframes knock{to{background-position:100% 50%}}
.lt-fill .word{color:transparent;-webkit-text-stroke:1.5px var(--ameixa);
  background:linear-gradient(90deg,var(--malva),var(--ameixa)) no-repeat 0 0/0% 100%;-webkit-background-clip:text;background-clip:text;transition:background-size 1s var(--e-expo)}
.lt-fill:hover .word,.lt-fill:focus-within .word{background-size:100% 100%}
@media(max-width:1020px){.letter-lab{grid-template-columns:1fr}.lt{border-right:0;border-bottom:1px solid var(--line);min-height:240px}}

/* ==========================================================================
   03 · CORES
   ========================================================================== */
.sw-main{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px}
.swatch{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:340px;padding:22px;text-align:left;
  border:1px solid var(--line-d);overflow:hidden;transition:transform .5s var(--e-expo),box-shadow .5s var(--e-expo);cursor:copy}
.swatch::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,currentColor 1.2px,transparent 1.7px) 0 0/16px 16px;opacity:0;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 60%);mask-image:linear-gradient(200deg,#000,transparent 60%);transition:opacity .5s}
.swatch:hover{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.swatch:hover::before{opacity:.18}
.swatch .nm{font:400 clamp(34px,3.4vw,50px)/1 var(--f-disp);text-transform:uppercase}
.swatch .rl{font:500 10.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-top:8px}
.swatch dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font:500 11.5px/1.3 var(--f-mono);position:relative}
.swatch dt{opacity:.6;letter-spacing:.12em}
.swatch .copy{position:absolute;top:18px;right:18px;font:500 9.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateY(-4px);transition:all .3s}
.swatch:hover .copy{opacity:.8;transform:none}
.sw-creme{background:var(--creme);color:var(--ameixa)}
.sw-ameixa{background:var(--ameixa);color:var(--creme);border-color:var(--line-d2)}
.sw-malva{background:var(--malva);color:var(--creme)}
.sw-ext{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:14px}
.sw-ext .swatch{min-height:170px;padding:16px}
.sw-ext .swatch .nm{font-size:22px}
.sw-ext .swatch dl{font-size:10.5px}
.sw-fb{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.sw-fb .swatch{min-height:120px;padding:16px;flex-direction:row;align-items:flex-end;gap:12px;color:var(--creme)}
.sw-fb .swatch .nm{font-size:22px}
@media(max-width:1020px){.sw-main{grid-template-columns:1fr}.swatch{min-height:220px}.sw-ext{grid-template-columns:repeat(2,1fr)}.sw-fb{grid-template-columns:repeat(2,1fr)}}

.ramps{display:grid;gap:18px}
.ramp{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}
.ramp .lbl{font:500 11px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.ramp .lbl small{display:block;color:var(--m300);letter-spacing:.06em;text-transform:none}
.ramp .steps{display:grid;grid-template-columns:repeat(8,1fr);height:64px;border:1px solid var(--line-d);
  background:conic-gradient(rgba(242,235,227,.06) 25%,transparent 0 50%,rgba(242,235,227,.06) 0 75%,transparent 0) 0 0/14px 14px}
.ramp .steps i{position:relative;display:block;transform-origin:bottom;transform:scaleY(0);transition:transform .8s var(--e-expo)}
.ramps.in .ramp .steps i{transform:none}
.ramp .steps i span{position:absolute;left:6px;bottom:-20px;font:500 9.5px/1 var(--f-mono);color:var(--m200);letter-spacing:.06em}
@media(max-width:700px){.ramp{grid-template-columns:1fr}.ramp .steps i span{display:none}}

.grads{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grad{min-height:220px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line-d);position:relative;overflow:hidden}
.grad h4{font:400 26px/1 var(--f-disp);text-transform:uppercase;position:relative}
.grad p{font:500 10.5px/1.6 var(--f-mono);letter-spacing:.04em;position:relative}
.g-sinal{background:linear-gradient(135deg,var(--a900) 0%,var(--ameixa) 45%,var(--malva) 100%);background-size:200% 200%;animation:gradShift 10s ease-in-out infinite alternate}
.g-papel{background:linear-gradient(160deg,var(--papel),var(--creme) 55%,var(--nevoa));color:var(--ameixa)}
.g-brilho{background:radial-gradient(circle at 70% 30%,rgba(184,138,174,.75),transparent 55%),var(--a900)}
.g-brilho::after{content:'';position:absolute;width:140px;height:140px;right:-20px;top:-20px;border-radius:50%;background:var(--m300);filter:blur(50px);opacity:.5;animation:float 7s ease-in-out infinite alternate}
.g-vazado{background:var(--creme);color:var(--ameixa)}
.g-vazado .w{font:400 92px/.8 var(--f-disp);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--ameixa);
  background:linear-gradient(90deg,var(--ameixa),var(--malva),var(--m300));-webkit-background-clip:text;background-clip:text;opacity:.95}
@keyframes gradShift{to{background-position:100% 100%}}
@keyframes float{to{transform:translate(-40px,40px)}}
@media(max-width:1020px){.grads{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grads{grid-template-columns:1fr}}

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
.sec-dark .tbl-wrap{border-color:var(--line-d)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.tbl th{text-align:left;font:500 10px/1.3 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--malva);padding:14px 16px;border-bottom:1.5px solid currentColor;white-space:nowrap}
.sec-dark .tbl th{color:var(--m300)}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
.sec-dark .tbl td{border-color:var(--line-d)}
.tbl tr{transition:background .25s}
.tbl tbody tr:hover{background:rgba(110,68,102,.06)}
.sec-dark .tbl tbody tr:hover{background:rgba(242,235,227,.03)}
.tbl code{font:500 12px/1 var(--f-mono)}
.pill{display:inline-flex;align-items:center;gap:7px;font:500 11px/1 var(--f-mono);letter-spacing:.04em;white-space:nowrap}
.pill i{width:12px;height:12px;border-radius:2px;border:1px solid rgba(128,128,128,.4);flex:0 0 auto}

.contrast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.cg{position:relative;padding:16px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line-d);transition:transform .4s var(--e-expo)}
.cg:hover{transform:translateY(-4px)}
.cg .s{font:400 40px/1 var(--f-disp)}
.cg .r{display:flex;justify-content:space-between;align-items:center;font:500 10.5px/1.2 var(--f-mono);letter-spacing:.06em}
.cg .b{padding:4px 7px;border-radius:var(--r-pill);font-size:9.5px;letter-spacing:.12em;background:rgba(0,0,0,.18)}
.cg.fail{outline:1.5px dashed currentColor;outline-offset:-6px}

/* ==========================================================================
   04 · COMPONENTES
   ========================================================================== */
.comp{margin-top:96px}
.comp:first-of-type{margin-top:0}
.demo{position:relative;border:1.5px solid var(--ameixa);background:var(--papel);padding:clamp(22px,3vw,40px);margin-bottom:18px;overflow:hidden}
.demo.dark{background:var(--a900);border-color:var(--a900);color:var(--creme)}
.demo-label{position:absolute;top:0;left:0;padding:6px 10px;font:500 9.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;background:var(--ameixa);color:var(--creme)}
.demo.dark .demo-label{background:var(--malva)}
.demo-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px}
.demo-row+.demo-row{margin-top:22px;padding-top:22px;border-top:1px dashed var(--line)}
.demo.dark .demo-row+.demo-row{border-color:var(--line-d)}
.demo-row .cap{flex:0 0 100%;font:500 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--malva)}
.demo.dark .demo-row .cap{color:var(--m300)}
.state{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.state>span{font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grafite)}
.demo.dark .state>span{color:var(--m200)}

/* botões (Ateevibes .btn/.btn-p/.btn-s + brilho Aetheris) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;text-decoration:none;
  font:500 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;border:1.5px solid transparent;border-radius:var(--r-s);
  overflow:hidden;isolation:isolate;cursor:pointer;white-space:nowrap;
  transition:background .35s var(--e-signal),color .35s var(--e-signal),border-color .35s,transform .45s var(--e-signal),box-shadow .45s var(--e-signal)}
.btn .ico{width:17px;height:17px;flex:0 0 auto;transition:transform .45s var(--e-expo)}
.btn::before{content:'';position:absolute;top:0;left:-130%;width:60%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .8s var(--e-smooth)}
.btn:hover::before{left:150%}
.btn:hover .ico.go{transform:translateX(4px)}
.btn:active{transform:scale(.97)!important}
.btn-p{background:var(--ameixa);color:var(--creme)}
.btn-p:hover{background:var(--malva);box-shadow:var(--glow);transform:translateY(-2px)}
.btn-s{border-color:var(--ameixa);color:var(--ameixa);background:transparent}
.btn-s::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--ameixa);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--e-expo)}
.btn-s:hover{color:var(--creme)}
.btn-s:hover::after{transform:scaleX(1);transform-origin:left}
.btn-w{background:var(--malva);color:var(--creme)}
.btn-w::after{content:'';position:absolute;inset:-2px;border-radius:inherit;border:1.5px solid var(--malva);z-index:-1;animation:ringOut 2.4s var(--e-smooth) infinite}
.btn-w:hover{background:#7d4f74;box-shadow:var(--glow);transform:translateY(-2px)}
@keyframes ringOut{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.5)}}
.btn-g{padding:12px 4px;color:var(--ameixa);border-radius:0}
.btn-g::before{display:none}
.btn-g::after{content:'';position:absolute;left:4px;right:4px;bottom:6px;height:1.5px;background:currentColor;transform:scaleX(.25);transform-origin:left;transition:transform .5s var(--e-expo)}
.btn-g:hover{color:var(--malva)}
.btn-g:hover::after{transform:scaleX(1)}
.btn-i{width:48px;height:48px;padding:0;border-color:var(--line-2);color:var(--ameixa);background:var(--papel)}
.btn-i:hover{border-color:var(--malva);color:var(--malva);transform:translateY(-2px) rotate(-4deg)}
.btn-sm{padding:11px 18px;font-size:10.5px}
.btn-lg{padding:20px 38px;font-size:13px}
.btn[disabled],.btn.is-disabled{opacity:.42;pointer-events:none;filter:saturate(.4)}
.btn.is-hover{background:var(--malva);box-shadow:var(--glow);transform:translateY(-2px)}
.btn.is-active{transform:scale(.97)}
.btn.is-focus{outline:2px solid var(--malva);outline-offset:3px}
.btn .dots{display:inline-flex;gap:4px}
.btn .dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:bounce .9s var(--e-smooth) infinite}
.btn .dots i:nth-child(2){animation-delay:.12s}.btn .dots i:nth-child(3){animation-delay:.24s}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
.on-dark .btn-p,.demo.dark .btn-p,.sec-dark .btn-p{background:var(--creme);color:var(--ameixa)}
.on-dark .btn-p:hover,.demo.dark .btn-p:hover,.sec-dark .btn-p:hover{background:var(--m300);color:var(--a900)}
.demo.dark .btn-s,.sec-dark .btn-s{border-color:var(--creme);color:var(--creme)}
.demo.dark .btn-s::after,.sec-dark .btn-s::after{background:var(--creme)}
.demo.dark .btn-s:hover,.sec-dark .btn-s:hover{color:var(--ameixa)}
.demo.dark .btn-g,.sec-dark .btn-g{color:var(--creme)}
.demo.dark .btn-i{background:transparent;border-color:var(--line-d2);color:var(--creme)}
.magnetic{will-change:transform}

/* inputs */
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.field{position:relative;display:flex;flex-direction:column;gap:8px}
.field label,.field .flabel{font:500 10.5px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ameixa)}
.input-wrap{position:relative}
.input{width:100%;padding:15px 16px;border:1.5px solid var(--line-2);border-radius:var(--r-s);background:var(--papel);font:400 16px/1.2 var(--f-body);color:var(--ameixa);
  transition:border-color .3s,box-shadow .3s,background .3s;appearance:none;-webkit-appearance:none}
.input::placeholder{color:#9a8e98}
.input:hover{border-color:var(--ameixa)}
.input:focus{outline:0;border-color:var(--malva);box-shadow:0 0 0 4px rgba(110,68,102,.14);background:#fff}
.input-wrap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--malva);transform:scaleX(0);transition:transform .5s var(--e-expo)}
.input-wrap:focus-within::after{transform:scaleX(1)}
.field .help{font:400 12.5px/1.4 var(--f-body);color:var(--grafite)}
.field.is-error .input{border-color:var(--err);background:#fdf6f6}
.field.is-error .help{color:var(--err)}
.field.is-ok .input{border-color:var(--ok)}
.field.is-ok .help{color:var(--ok)}
.field.is-disabled{opacity:.5}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23382036' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1.5px solid var(--ameixa);border-radius:var(--r-s);padding:3px;background:var(--papel)}
.seg button{position:relative;z-index:1;padding:11px 16px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ameixa);transition:color .35s;white-space:nowrap}
.seg button[aria-pressed="true"]{color:var(--creme)}
.seg .ind{position:absolute;top:3px;bottom:3px;left:3px;border-radius:2px;background:var(--ameixa);transition:transform .5s var(--e-expo),width .5s var(--e-expo);z-index:0}
.switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:15px}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .tr{position:relative;width:52px;height:30px;border-radius:var(--r-pill);background:var(--nevoa);border:1.5px solid var(--line-2);transition:background .35s,border-color .35s;flex:0 0 auto}
.switch .tr::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--ameixa);transition:transform .5s var(--e-expo),background .3s}
.switch input:checked+.tr{background:var(--malva);border-color:var(--malva)}
.switch input:checked+.tr::after{transform:translateX(22px);background:var(--creme)}
.switch input:focus-visible+.tr{outline:2px solid var(--malva);outline-offset:3px}
.check{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:15px}
.check input{position:absolute;opacity:0;pointer-events:none}
.check .bx{position:relative;width:22px;height:22px;border:1.5px solid var(--ameixa);border-radius:var(--r-s);display:grid;place-items:center;transition:background .3s;flex:0 0 auto}
.check .bx::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--creme);transform:scale(0);transition:transform .45s var(--e-expo)}
.check input:checked+.bx{background:var(--malva);border-color:var(--malva)}
.check input:checked+.bx::after{transform:scale(1)}
.check input:focus-visible+.bx{outline:2px solid var(--malva);outline-offset:3px}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}}

/* simulador */
.sim{display:grid;grid-template-columns:1fr 1.1fr;gap:0;border:1.5px solid var(--ameixa);background:var(--papel)}
.sim-in{padding:30px;display:flex;flex-direction:column;gap:26px;border-right:1px solid var(--line)}
.sim-out{position:relative;padding:30px;background:var(--ameixa);color:var(--creme);overflow:hidden}
.sim-out .bg-dots{opacity:.7}
.sim-out .big{font:400 clamp(64px,8vw,116px)/.9 var(--f-disp);margin:8px 0 6px;display:flex;align-items:flex-start;gap:6px}
.sim-out .big small{font-size:.32em;margin-top:.35em;color:var(--m300)}
.sim-out .big em{font-style:normal;font-size:.26em;align-self:flex-end;margin-bottom:.5em;color:var(--m200);font-family:var(--f-mono);letter-spacing:.1em}
.sim-out .rows{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-d2);margin-top:20px}
.sim-out .rows div{padding:14px 0;border-bottom:1px solid var(--line-d)}
.sim-out .rows dt{font:500 9.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--m200)}
.sim-out .rows dd{font:400 26px/1.1 var(--f-disp);margin-top:6px}
.sim-out .save{margin-top:18px;display:flex;align-items:center;gap:10px;font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m300)}
.sim-out .note{margin-top:14px;font-size:12.5px;color:var(--m200)}
@media(max-width:900px){.sim{grid-template-columns:1fr}.sim-in{border-right:0;border-bottom:1px solid var(--line)}}

/* cards */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tilt{transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--e-expo)}
.card-ponto{position:relative;border:1.5px solid var(--ameixa);background:var(--papel);overflow:hidden}
.card-ponto .tv{padding:14px 14px 0}
.card-ponto .tv-body{padding:7px 7px 10px;border-radius:9px}
.card-ponto .tv-body::after{bottom:3px;width:3px;height:3px}
.card-ponto .tv-stand{height:10px}
.card-ponto .bd{padding:16px 18px 18px}
.card-ponto .loc{display:flex;align-items:center;gap:8px;color:var(--malva)}
.card-ponto .loc .ico{width:16px;height:16px}
.card-ponto h4{font:400 30px/1 var(--f-disp);text-transform:uppercase;margin:10px 0 8px}
.card-ponto p{font-size:14.5px;color:var(--grafite);line-height:1.5}
.card-ponto .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.card-ponto .glare{position:absolute;inset:0;pointer-events:none;z-index:9;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .4s}
.card-ponto:hover .glare{opacity:1}
.card-plano{position:relative;padding:26px;border:1.5px solid var(--ameixa);background:var(--papel);display:flex;flex-direction:column;gap:14px;transition:transform .5s var(--e-expo),box-shadow .5s var(--e-expo)}
.card-plano:hover{transform:translateY(-6px);box-shadow:8px 8px 0 var(--ameixa)}
.card-plano .pk{display:flex;justify-content:space-between;align-items:center}
.card-plano .price{font:400 64px/.9 var(--f-disp);display:flex;align-items:flex-start;gap:4px}
.card-plano .price small{font-size:.34em;margin-top:.3em;color:var(--malva)}
.card-plano .price em{font:500 11px/1 var(--f-mono);letter-spacing:.12em;font-style:normal;align-self:flex-end;margin-bottom:10px;color:var(--grafite)}
.card-plano .pp{font:500 11px/1 var(--f-mono);letter-spacing:.12em;color:var(--malva);text-transform:uppercase}
.card-plano ul{list-style:none;display:grid;gap:9px;border-top:1px solid var(--line);padding-top:14px;font-size:14.5px}
.card-plano li{display:flex;gap:10px;align-items:flex-start}
.card-plano li .ico{width:17px;height:17px;flex:0 0 auto;color:var(--malva);margin-top:2px}
.card-plano .fine{font:400 11.5px/1.4 var(--f-body);color:var(--grafite)}
.card-plano .btn{margin-top:auto}
.card-plano.is-featured{background:var(--ameixa);color:var(--creme);border-color:transparent}
.card-plano.is-featured::before{content:'';position:absolute;inset:-2px;z-index:-1;border-radius:2px;
  background:conic-gradient(from var(--ang,0deg),var(--malva),var(--m300),var(--creme),var(--m300),var(--malva));animation:spinAng 5s linear infinite}
.card-plano.is-featured .price small,.card-plano.is-featured .pp,.card-plano.is-featured li .ico{color:var(--m300)}
.card-plano.is-featured .price em,.card-plano.is-featured .fine{color:var(--m200)}
.card-plano.is-featured ul{border-color:var(--line-d2)}
.card-plano.is-featured:hover{box-shadow:0 30px 70px -26px rgba(110,68,102,.9)}
.card-plano.is-featured .btn-p{background:var(--creme);color:var(--ameixa)}
.card-plano.is-featured .btn-p:hover{background:var(--m300);color:var(--a900)}
.card-feat .tagline{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line-2);color:var(--malva)}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spinAng{to{--ang:360deg}}
.card-feat{padding:26px;border:1px solid var(--line-2);background:var(--papel);display:flex;flex-direction:column;gap:12px}
.card-feat .ic{width:46px;height:46px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--malva);background:var(--creme);transition:all .4s var(--e-expo)}
.card-feat .ic .ico{width:24px;height:24px}
.card-feat:hover .ic{background:var(--malva);color:var(--creme);border-color:var(--malva);transform:rotate(-6deg)}
.card-feat h4{font:700 20px/1.2 var(--f-body)}
.card-feat p{font-size:14.5px;color:var(--grafite)}
.card-colagem{position:relative;padding:14px 14px 48px;background:var(--papel);box-shadow:var(--shadow-paper);transform:rotate(-1.6deg);transition:transform .6s var(--e-expo)}
.card-colagem:hover{transform:rotate(0) translateY(-6px)}
.card-colagem img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:contrast(1.04)}
.card-colagem .tape{position:absolute;top:-12px;left:50%;width:96px;height:26px;margin-left:-48px;background:rgba(217,195,209,.75);transform:rotate(-3deg);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%)}
.card-colagem figcaption{position:absolute;left:16px;right:16px;bottom:16px;font:500 10.5px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grafite)}
@media(max-width:1020px){.cards-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cards-grid{grid-template-columns:1fr}}

/* navbar mockups */
.nav-mock{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 20px;height:62px;border:1px solid var(--line);background:rgba(242,235,227,.9)}
.nav-mock img{height:18px}
.nav-mock .nl{display:flex;gap:2px}
.nav-mock.dark{background:var(--a900);border-color:var(--a900)}
.nav-mock.dark .nl a{color:var(--creme)}
.nav-mock.dark .nl a::before{background:var(--m300)}
.nav-mock .nl a:hover{opacity:1;color:var(--malva)}
.nav-mock .nl a:hover::before{transform:translateX(-50%) scale(1)}
.nav-mock.dark .nl a:hover{color:var(--m300)}
.phone{width:290px;height:520px;border-radius:38px;background:var(--a900);padding:12px;box-shadow:0 40px 80px -30px rgba(30,15,28,.6);flex:0 0 auto}
.phone .scr{position:relative;width:100%;height:100%;border-radius:28px;background:var(--creme);overflow:hidden}
.phone .bar{display:flex;justify-content:space-between;align-items:center;padding:16px 16px;border-bottom:1px solid var(--line)}
.phone .bar img{height:14px}
.phone .ham{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:3px}
.phone .ham .ico{width:20px;height:20px}
.phone .menu{position:absolute;inset:63px 0 0;background:var(--ameixa);color:var(--creme);padding:18px 18px;clip-path:circle(0 at 92% 0);transition:clip-path .8s var(--e-expo)}
.phone.open .menu{clip-path:circle(150% at 92% 0)}
.phone .menu a{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-d);text-decoration:none;font:400 28px/1 var(--f-disp);text-transform:uppercase;
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s var(--e-expo)}
.phone .menu a span{font:500 9px/1 var(--f-mono);letter-spacing:.2em;color:var(--m300)}
.phone.open .menu a{opacity:1;transform:none}
.phone.open .menu a:nth-child(2){transition-delay:.06s}.phone.open .menu a:nth-child(3){transition-delay:.12s}.phone.open .menu a:nth-child(4){transition-delay:.18s}.phone.open .menu a:nth-child(5){transition-delay:.24s}
.phone .menu .btn{margin-top:22px;width:100%}
.phone .hero-mini{padding:24px 16px}
.phone .hero-mini .disp{font-size:44px;line-height:.9}
.phone .hero-mini .o{color:transparent;-webkit-text-stroke:1.2px var(--ameixa)}
.phone .hero-mini p{font-size:13px;color:var(--grafite);margin-top:12px}
@media(max-width:900px){.nav-mock .nl{display:none}}

/* padrões de seção */
.sec-patterns{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sp{border:1.5px solid var(--ameixa);background:var(--papel);overflow:hidden}
.sp .thumb{position:relative;height:150px;overflow:hidden;border-bottom:1.5px solid var(--ameixa)}
.sp .thumb .bg-dots{-webkit-mask-size:90% 90%;mask-size:90% 90%}
.sp .bd{padding:14px 16px 18px}
.sp h4{font:400 24px/1 var(--f-disp);text-transform:uppercase}
.sp p{font-size:13.5px;color:var(--grafite);margin-top:8px}
.th-paper{background:var(--creme)}
.th-dark{background:var(--a900)}
.th-ticker{background:var(--a900);display:flex;flex-direction:column;justify-content:center}
.th-ticker .mq-a{--g:20px;--dur:14s;padding:10px 0}
.th-ticker .mq-a .w{font-size:22px}
.th-ticker .mq-b{--g:16px;--dur:20s;padding:6px 0}
.th-cta{background:url(textura-duo.webp) center/cover}
.th-cta::after{content:'';position:absolute;inset:0;background:rgba(56,32,54,.55)}
.th-cta span{position:absolute;left:14px;bottom:12px;z-index:2;font:400 34px/.9 var(--f-disp);color:var(--creme);text-transform:uppercase}
@media(max-width:1020px){.sec-patterns{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sec-patterns{grid-template-columns:1fr}}

/* modal */
.modal{position:fixed;inset:0;margin:auto;width:min(520px,calc(100% - 32px));max-height:calc(100% - 32px);border:0;padding:0;background:transparent;color:var(--ameixa);overflow:visible}
.modal::backdrop{background:rgba(30,15,28,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.modal.is-open::backdrop{opacity:1}
.modal .mbox{position:relative;background:var(--creme);border:1.5px solid var(--ameixa);box-shadow:10px 10px 0 var(--malva);padding:34px 30px 28px;
  opacity:0;transform:translateY(24px) scale(.96);transition:opacity .35s var(--e-smooth),transform .55s var(--e-expo)}
.modal.is-open .mbox{opacity:1;transform:none}
.modal .mbox .bg-dots{opacity:.6;z-index:0}
.modal .mbox>*:not(.bg-dots){position:relative;z-index:1}
.modal h3{font:400 40px/.95 var(--f-disp);text-transform:uppercase;margin:12px 0 12px}
.modal p{color:var(--grafite);font-size:15.5px}
.modal .acts{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.modal .x{position:absolute;top:12px;right:12px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r-s);transition:transform .4s var(--e-expo),border-color .3s}
.modal .x:hover{transform:rotate(90deg);border-color:var(--malva)}
.modal .x .ico{width:18px;height:18px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:var(--r-pill);font:500 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent}
.badge .ico{width:13px;height:13px}
.b-live{background:var(--ameixa);color:var(--creme)}
.b-live i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--m300);box-shadow:0 0 8px var(--m300)}
.b-live i::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--m300);animation:ping 1.8s var(--e-smooth) infinite}
.b-malva{background:var(--malva);color:var(--creme)}
.b-out{border-color:var(--ameixa);color:var(--ameixa)}
.b-soft{background:var(--nevoa);color:var(--ameixa)}
.b-ok{background:rgba(46,107,78,.1);color:var(--ok);border-color:rgba(46,107,78,.35)}
.b-warn{background:rgba(138,90,0,.08);color:var(--warn);border-color:rgba(138,90,0,.35)}
.b-err{background:rgba(163,52,63,.08);color:var(--err);border-color:rgba(163,52,63,.35)}
.b-info{background:rgba(59,85,120,.08);color:var(--info);border-color:rgba(59,85,120,.35)}
.b-sq{border-radius:var(--r-s)}
.b-shine{position:relative;overflow:hidden;background:linear-gradient(110deg,var(--malva) 30%,var(--m300) 50%,var(--malva) 70%);background-size:250% 100%;color:var(--creme);animation:shine 3.2s linear infinite}
@keyframes shine{from{background-position:120% 0}to{background-position:-120% 0}}
.count-dot{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--malva);color:var(--creme);font:500 11px/1 var(--f-mono)}
.demo.dark .b-out{border-color:var(--creme);color:var(--creme)}
.demo.dark .b-soft{background:rgba(242,235,227,.08);color:var(--creme)}

/* tooltips */
.tt{position:relative;display:inline-flex}
.tt-b{position:absolute;left:50%;bottom:calc(100% + 12px);z-index:20;width:max-content;max-width:240px;padding:10px 12px;border-radius:var(--r-s);
  background:var(--ameixa);color:var(--creme);font:400 13px/1.45 var(--f-body);text-align:left;pointer-events:none;
  opacity:0;transform:translate(-50%,6px) scale(.97);transform-origin:bottom center;transition:opacity .25s var(--e-smooth),transform .45s var(--e-expo);box-shadow:0 16px 30px -12px rgba(30,15,28,.5)}
.tt-b::after{content:'';position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--ameixa)}
.tt-b b{display:block;font:500 9.5px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--m300);margin-bottom:6px}
.tt:hover .tt-b,.tt:focus-within .tt-b,.tt.force .tt-b{opacity:1;transform:translate(-50%,0) scale(1)}
.tt.bottom .tt-b{bottom:auto;top:calc(100% + 12px);transform-origin:top center;transform:translate(-50%,-6px) scale(.97)}
.tt.bottom .tt-b::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ameixa)}
.tt.bottom:hover .tt-b,.tt.bottom:focus-within .tt-b{transform:translate(-50%,0) scale(1)}
.tt.light .tt-b{background:var(--creme);color:var(--ameixa);border:1px solid var(--line-2)}
.tt.light .tt-b::after{border-top-color:var(--creme)}
.tt.light .tt-b b{color:var(--malva)}
.term{border-bottom:1.5px dashed var(--malva);cursor:help;font-weight:600}

/* spec table compact */
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);background:rgba(251,248,244,.6)}
.spec-grid>div{padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec-grid dt{font:500 9.5px/1.3 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--malva);margin-bottom:6px}
.spec-grid dd{font-size:13.5px;line-height:1.5}
.spec-grid code{font:500 11.5px/1.4 var(--f-mono);background:var(--nevoa);padding:1px 5px;border-radius:2px}
@media(max-width:900px){.spec-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.spec-grid{grid-template-columns:1fr}}

/* FAB WhatsApp */
.fab{position:fixed;right:22px;bottom:22px;z-index:75;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--malva);color:var(--creme);
  box-shadow:0 18px 40px -12px rgba(56,32,54,.6);transition:transform .5s var(--e-expo),background .3s;opacity:0;transform:scale(.6) translateY(20px);pointer-events:none}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab:hover{background:var(--ameixa);transform:scale(1.06)}
.fab .ico{width:26px;height:26px}
.fab::before,.fab::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--malva);animation:ping 2.4s var(--e-smooth) infinite}
.fab::after{animation-delay:1.2s}
.fab .lbl{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(8px,-50%);opacity:0;white-space:nowrap;padding:9px 12px;background:var(--ameixa);color:var(--creme);
  font:500 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;border-radius:var(--r-s);transition:all .35s var(--e-expo);pointer-events:none}
.fab:hover .lbl,.fab:focus-visible .lbl{opacity:1;transform:translate(0,-50%)}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;z-index:9000;transform:translate(-50%,30px);opacity:0;padding:12px 18px;background:var(--ameixa);color:var(--creme);
  font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;border-radius:var(--r-s);display:flex;gap:10px;align-items:center;transition:all .45s var(--e-expo);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast i{width:7px;height:7px;border-radius:50%;background:var(--m300);box-shadow:0 0 8px var(--m300)}

/* ==========================================================================
   05 · ÍCONES
   ========================================================================== */
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:0;border-top:1px solid var(--line-d);border-left:1px solid var(--line-d)}
.icon-tile{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  color:var(--creme);transition:background .35s var(--e-signal),color .35s;cursor:copy;overflow:hidden}
.icon-tile .ico{width:34px;height:34px;transition:transform .6s var(--e-expo)}
.icon-tile span{font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m200);opacity:.75}
.icon-tile::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(184,138,174,.25),transparent 60%);opacity:0;transition:opacity .4s}
.icon-tile:hover{color:var(--m300);background:rgba(242,235,227,.02)}
.icon-tile:hover::before{opacity:1}
.icon-tile:hover .ico{transform:scale(1.12);animation:draw .9s var(--e-expo)}
@keyframes draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.icon-specs{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-top:22px}
.anatomy{position:relative;border:1px solid var(--line-d);padding:26px;display:grid;place-items:center;min-height:320px;background:
  linear-gradient(rgba(184,138,174,.12) 1px,transparent 1px) 0 0/calc(100%/24) calc(100%/24),
  linear-gradient(90deg,rgba(184,138,174,.12) 1px,transparent 1px) 0 0/calc(100%/24) calc(100%/24)}
.anatomy .big{width:min(240px,60vw);height:min(240px,60vw);color:var(--creme);stroke-width:1.75}
.anatomy .safe{position:absolute;inset:calc(100%/24*2);border:1px dashed rgba(184,138,174,.5)}
.anatomy .lbl{position:absolute;font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m300)}
.sizes-row{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;padding:22px;border:1px solid var(--line-d)}
.sizes-row div{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--creme)}
.sizes-row span{font:500 9.5px/1 var(--f-mono);letter-spacing:.12em;color:var(--m200)}
@media(max-width:900px){.icon-specs{grid-template-columns:1fr}}

/* ==========================================================================
   06 · ANIMAÇÕES
   ========================================================================== */
.tokens-motion{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dur-list{display:grid;gap:12px;padding:22px;border:1.5px solid var(--ameixa);background:var(--papel)}
.dur{display:grid;grid-template-columns:120px 1fr 64px;gap:14px;align-items:center;font:500 11px/1 var(--f-mono);letter-spacing:.08em}
.dur .tr{height:10px;background:var(--nevoa);position:relative;overflow:hidden}
.dur .tr i{position:absolute;left:0;top:0;bottom:0;width:22%;background:var(--malva);animation:durRun var(--t) var(--e-smooth) infinite alternate}
@keyframes durRun{to{left:78%}}
.ease-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ease{padding:16px;border:1.5px solid var(--ameixa);background:var(--papel)}
.ease svg{width:100%;height:110px;overflow:visible}
.ease svg path.c{fill:none;stroke:var(--malva);stroke-width:2;vector-effect:non-scaling-stroke}
.ease svg path.g{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.ease .ball{position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--malva);animation:easeRun 2.2s var(--ez) infinite alternate;box-shadow:0 0 0 4px rgba(110,68,102,.15)}
.ease .tr{height:24px;position:relative;border-bottom:1px dashed var(--line-2);margin-top:6px}
@keyframes easeRun{from{left:0}to{left:calc(100% - 12px)}}
.ease h5{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin-top:10px}
.ease code{font:400 11px/1.4 var(--f-mono);color:var(--grafite)}
@media(max-width:1020px){.tokens-motion{grid-template-columns:1fr}}
@media(max-width:520px){.ease-list{grid-template-columns:1fr}.dur{grid-template-columns:90px 1fr 54px}}

.motion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mtile{position:relative;border:1.5px solid var(--ameixa);background:var(--papel);display:flex;flex-direction:column;overflow:hidden}
.mtile .stagebox{position:relative;height:210px;overflow:hidden;border-bottom:1.5px solid var(--ameixa);background:var(--creme);display:grid;place-items:center}
.mtile .stagebox.dark{background:var(--a900);color:var(--creme)}
.mtile .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.mtile h4{font:400 22px/1 var(--f-disp);text-transform:uppercase}
.mtile p{font-size:13px;color:var(--grafite);line-height:1.45}
.mtile .meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;gap:10px}
.mtile .meta code{font:500 10.5px/1.3 var(--f-mono);color:var(--malva)}
.replay{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--r-s);font:500 9.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;transition:all .3s}
.replay:hover{border-color:var(--malva);color:var(--malva)}
.replay .ico{width:13px;height:13px;transition:transform .6s var(--e-expo)}
.replay:hover .ico{transform:rotate(-180deg)}
.demo-blocks{display:flex;gap:10px}
.demo-blocks i{width:44px;height:64px;background:var(--ameixa);display:block}
.demo-blocks i:nth-child(2){background:var(--malva)}
.demo-blocks i:nth-child(3){background:var(--m300)}
.demo-cut{width:78%;height:70%}
.demo-cut img{width:100%;height:100%;object-fit:cover}
.mini-collage{position:relative;width:200px;height:150px}
.mini-collage>*{position:absolute;opacity:0}
.mini-collage .p1{width:120px;left:0;top:10px}
.mini-collage .p2{width:110px;right:0;bottom:6px;mix-blend-mode:multiply}
.mini-collage .p3{width:130px;left:30px;top:40px;mix-blend-mode:multiply}
.mini-collage .p4{left:56px;top:46px;padding:8px 10px;font:500 9px/1 var(--f-mono);letter-spacing:.14em;background:var(--ameixa);color:var(--creme)}
.cycle{position:relative;width:150px;height:150px}
.cycle svg{width:100%;height:100%;transform:rotate(-90deg)}
.cycle .val{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.cycle .val b{display:block;font:400 34px/1 var(--f-disp)}
.cycle .val span{font:500 9px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m200)}
.cycle .tick{stroke:rgba(242,235,227,.18);stroke-width:2;transition:stroke .3s}
.cycle .tick.on{stroke:var(--m300)}
.count-demo{font:400 64px/1 var(--f-disp)}
.count-demo small{font-size:.4em;color:var(--malva)}
.mini-tv{width:76%}
.mini-tv .tv-body{padding:6px 6px 9px;border-radius:8px}
.mini-tv .tv-stand{height:8px}
.mini-canvas{position:absolute;inset:0;width:100%;height:100%}
.mini-pre{position:absolute;inset:0;background:var(--creme);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.mini-pre .pl-bar{width:60%}
.mini-pre .pl-bar i{display:block;height:100%;width:0;background:var(--malva);box-shadow:0 0 10px var(--m300)}
.mini-pre .disp{font-size:28px}
@media(max-width:1020px){.motion-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.motion-grid{grid-template-columns:1fr}}

.policy{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1.5px solid var(--ameixa);background:var(--papel)}
.policy>div{padding:22px;border-right:1px solid var(--line)}
.policy>div:last-child{border-right:0}
.policy h5{font:400 22px/1 var(--f-disp);text-transform:uppercase;margin:10px 0 8px}
.policy p{font-size:14px;color:var(--grafite)}
@media(max-width:900px){.policy{grid-template-columns:1fr}.policy>div{border-right:0;border-bottom:1px solid var(--line)}}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.ds-footer{position:relative;padding:90px 0 34px;overflow:hidden;isolation:isolate;background:var(--a900);color:rgba(242,235,227,.7)}
.ds-footer .giant{font:400 clamp(90px,19vw,320px)/.8 var(--f-disp);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.2px rgba(242,235,227,.14);white-space:nowrap;margin-bottom:40px;
  transition:-webkit-text-stroke-color .6s,color .6s}
.ds-footer .giant:hover{-webkit-text-stroke-color:var(--m300);color:rgba(184,138,174,.08)}
.ds-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;margin-bottom:46px}
.ds-footer img{height:24px;width:auto}
.ds-footer h4{font:500 10.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--creme);margin-bottom:16px}
.ds-footer a{display:block;color:rgba(242,235,227,.66);text-decoration:none;font-size:14.5px;padding:5px 0;transition:color .25s,transform .35s var(--e-expo)}
.ds-footer a:hover{color:var(--m300);transform:translateX(4px)}
.ds-footer .legal{border-top:1px solid rgba(242,235,227,.14);padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;align-items:center}
@media(max-width:760px){.ds-footer .cols{grid-template-columns:1fr 1fr}}

/* ---------- ajustes de composição ---------- */
.sec-dark :focus-visible,.demo.dark :focus-visible,.ds-footer :focus-visible{outline-color:var(--m300)}
.magnetic{transition:translate .45s var(--e-expo),background .35s var(--e-signal),color .35s var(--e-signal),border-color .35s,transform .45s var(--e-signal),box-shadow .45s var(--e-signal)}
.tilt.rv.in,.tilt:not(.rv){transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.tilt.rv{transition:opacity .8s var(--e-smooth),transform .6s var(--e-expo)}
.card-colagem.rv.in{transform:rotate(-1.6deg)}
.card-colagem.rv.in:hover{transform:rotate(0) translateY(-6px)}
.card-colagem.rv{transition:opacity .8s var(--e-smooth),transform .6s var(--e-expo)}
.swatch.rv,.card-plano.rv{transition:opacity .8s var(--e-smooth),transform .5s var(--e-expo),box-shadow .5s var(--e-expo)}
.cg.rv{transition:opacity .8s var(--e-smooth),transform .4s var(--e-expo)}
.type-row.rv{transition:opacity .8s var(--e-smooth),transform .8s var(--e-smooth),background .3s var(--e-signal),padding .4s var(--e-expo)}
.hover-card.rv{transition:opacity .8s var(--e-smooth),transform .8s var(--e-smooth),background .3s var(--e-signal),border-color .3s var(--e-signal)}
.btn.is-shine{background:var(--malva);box-shadow:var(--glow);transform:translateY(-2px)}
.btn.is-shine::before{animation:shineSweep .9s var(--e-smooth)}
@keyframes shineSweep{from{left:-130%}to{left:150%}}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv,.rv-l,.hero-anim{opacity:1!important;transform:none!important}
  .cut>img,.cut>.cut-in{clip-path:none!important}
  #stage .el,#stage .tag{opacity:1!important;transform:none!important}
  #stage .paper{transform:rotate(-4deg)!important}
  .mq-track,.tunnel-ring,.scan-line,.bg-photo,.hero-giant{animation:none!important}
  .tunnel-ring{opacity:.25}
}