/* Orbit Studio (orbitstudio.contalapps.com.br)
   Plano: uma coisa ousada só (a logo 3D e os nomes dos apps em letra gigante); o resto quieto.
   Preto de verdade, texto em caixa normal, sem rótulos, sem numeração de seção, sem brilho de enfeite,
   sem animação de entrada em cada bloco. A cor de cada app aparece só dentro da parte dele. */
@font-face{font-family:Manrope;src:url('fontes/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}

:root{
  --preto:#000;
  --superficie:#161616;
  --papel:#ecebe6;
  --cinza:#9b9a95;
  --linha:#2b2b2b;
  --tel:#c8f43a;   /* Telinha */
  --xer:#ff8a3c;   /* Xereta */
  --tag:#b98cff;   /* Tagarela */
  --marca:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --texto:Manrope,system-ui,sans-serif;
  --mola:cubic-bezier(.2,.8,.2,1);
  --margem:clamp(16px,5vw,72px);
  --largura:1440px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--preto);color:var(--papel);font:400 17px/1.6 var(--texto);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:normal}
::selection{background:var(--papel);color:#000}
.pular{position:absolute;left:-999px;top:8px;z-index:200;background:var(--papel);color:#000;padding:8px 14px;border-radius:4px}
.pular:focus{left:8px}
:focus-visible{outline:2px solid var(--papel);outline-offset:3px}

/* ---------- abertura ---------- */
.intro{position:fixed;inset:0;z-index:150;display:grid;place-items:center;align-content:center;gap:8px;background:var(--preto);transition:background .7s ease .15s}
.intro canvas{width:min(62vmin,460px);height:min(62vmin,460px);transform-origin:50% 50%}
.intro-nome{font:900 clamp(40px,7vw,84px)/1 var(--marca);text-transform:uppercase;letter-spacing:.02em;opacity:0;animation:aparece .7s ease .75s forwards;transition:opacity .25s}
.intro-nome span,.marca-nome span{color:var(--cinza)}
.intro.saindo{background:transparent;pointer-events:none}
.intro.saindo .intro-nome{opacity:0 !important;animation:none}
@keyframes aparece{to{opacity:1}}
html.com-intro body{overflow:hidden}
html.com-intro .topo .marca-3d{opacity:0}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border-radius:6px;font:700 16px/1 var(--texto);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn-pq{height:40px;padding:0 16px;font-size:14px}
.btn-claro{background:var(--papel);color:#000}
.btn-claro:hover{background:#fff}
.btn-tel{background:var(--tel);color:#0b0d02}
.btn-tel:hover{background:#d8ff5a}
.btn-xer{background:var(--xer);color:#170800}
.btn-xer:hover{background:#ff9d5a}
.btn-contorno{border:1.5px solid rgba(236,235,230,.4);color:var(--papel)}
.btn-contorno:hover{border-color:var(--papel)}
.btn[aria-disabled="true"]{cursor:default;opacity:.9}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.acoes.centro{justify-content:center}

/* ---------- topo ---------- */
.topo{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;padding:0 var(--margem);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.topo.rolou{background:rgba(0,0,0,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--linha)}
.marca{display:flex;align-items:center;gap:10px}
.marca-3d{width:44px;height:44px;transition:opacity .3s}
.marca-nome{font:900 26px/1 var(--marca);text-transform:uppercase;letter-spacing:.02em}
.marca-nome.grande{font-size:clamp(48px,7vw,96px)}
.nav{display:flex;gap:28px}
.nav a{font-size:15px;font-weight:600;color:var(--cinza);transition:color .2s}
.nav a:hover{color:var(--papel)}

/* ---------- tipografia ---------- */
.titulo{font:800 clamp(40px,5.6vw,84px)/1.02 var(--texto);letter-spacing:-.035em;max-width:16ch}
.titulo-m{font:800 clamp(30px,3.4vw,50px)/1.06 var(--texto);letter-spacing:-.03em}
.lead{max-width:60ch;margin-top:22px;font-size:clamp(17px,1.35vw,20px);color:var(--cinza)}
.cab{max-width:var(--largura);margin:0 auto;padding:0 var(--margem)}

/* ---------- destaque ---------- */
.destaque{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:#000}
.slide{position:absolute;inset:0;visibility:hidden;opacity:0;transition:opacity 1s ease,visibility 0s 1s}
.slide.ativo{visibility:visible;opacity:1;transition:opacity 1s ease,visibility 0s}
.slide-fundo{position:absolute;inset:0;overflow:hidden}
.vinheta{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.78) 38%,rgba(0,0,0,0) 72%),linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 40%)}
.parede{position:absolute;inset:-30% -15% -30% 26%;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;transform:perspective(1600px) rotateX(18deg) rotateY(-16deg) rotateZ(7deg);transform-origin:60% 50%}
.col{display:flex;flex-direction:column;gap:16px;will-change:transform}
.col .peca{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#111}
.col .peca video,.col .peca img{width:100%;height:100%;object-fit:cover}
.fundo-xereta{background:#000}
.fundo-xereta::before{content:"";position:absolute;left:44%;top:12%;width:46vw;height:46vw;border-radius:50%;background:radial-gradient(closest-side,rgba(255,138,60,.22),transparent)}
.ilha-hero{position:absolute;z-index:2;top:104px;left:62%;transform:translateX(-50%) scale(1.5);transform-origin:50% 0}
.bots-hero{position:absolute;inset:0}
.slide-texto{position:absolute;left:var(--margem);bottom:clamp(140px,21vh,210px);max-width:min(760px,calc(100% - 2*var(--margem)));z-index:2}
.logo-app{display:flex;align-items:flex-end;font:900 clamp(64px,15vw,250px)/.8 var(--marca);text-transform:uppercase;margin-left:-.04em}
.logo-app .ponto{display:inline-block;width:.15em;height:.15em;margin:0 0 .02em .04em}
.logo-telinha .ponto{background:var(--tel);border-radius:3px}
.logo-xereta .ponto{background:var(--xer);border-radius:50%}
.tagline{margin-top:24px;font-size:clamp(19px,1.6vw,24px);font-weight:700;line-height:1.4}
.tagline span{color:var(--cinza);font-weight:400}
/* uma entrada só, no texto do slide que aparece */
.slide .slide-texto{opacity:0;transform:translateY(24px)}
.slide.ativo .slide-texto{opacity:1;transform:none;transition:opacity .8s ease .2s,transform 1s var(--mola) .2s}
.seletor{position:absolute;right:var(--margem);bottom:clamp(32px,6vh,52px);z-index:3;display:flex;gap:10px}
.sel{position:relative;display:flex;flex-direction:column;gap:4px;width:230px;padding:16px 18px 22px;text-align:left;border-radius:6px;background:rgba(22,22,22,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .2s}
.sel:hover{background:rgba(40,40,40,.8)}
.sel.ativo{background:rgba(52,52,52,.85)}
.sel-nome{font:900 24px/1 var(--marca);text-transform:uppercase}
.sel-sub{font-size:14px;color:var(--cinza)}
.sel-barra{position:absolute;left:18px;right:18px;bottom:10px;height:2px;background:rgba(255,255,255,.15);overflow:hidden}
.sel-barra i{position:absolute;inset:0;background:var(--papel);transform:scaleX(0);transform-origin:left}
.sel.ativo .sel-barra i{animation:barra var(--dur,9s) linear forwards}
.destaque.pausado .sel.ativo .sel-barra i,html.com-intro .sel.ativo .sel-barra i{animation-play-state:paused}
@keyframes barra{to{transform:scaleX(1)}}

/* ---------- os apps ---------- */
.apps{padding:clamp(100px,12vw,170px) 0 clamp(80px,9vw,130px)}
.grade-apps{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;max-width:var(--largura);margin:clamp(44px,5vw,70px) auto 0;padding:0 var(--margem)}
.cartao{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(300px,25vw,380px);border-radius:6px;overflow:hidden;background:var(--superficie);isolation:isolate}
.cartao-tel{grid-row:span 2;min-height:clamp(520px,50vw,700px)}
.trio,.cartao-cena{position:absolute;inset:0}
.trio{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,18px);padding:0 7% 36%;background:#0d0e0a}
.trio video{width:29%;aspect-ratio:9/16;object-fit:cover;border-radius:6px}
.trio video:nth-child(1){transform:translateY(8%) rotate(-5deg)}
.trio video:nth-child(2){transform:translateY(-3%) scale(1.1);z-index:1}
.trio video:nth-child(3){transform:translateY(8%) rotate(5deg)}
.cartao-cena{background:#120c08}
.cartao-cena .flutua{position:absolute}
.cena-tag{display:flex;align-items:center;justify-content:center;gap:10px;padding-bottom:120px;background:#0f0b16}
.cena-tag .onda{width:14px;height:90px;border-radius:7px;background:var(--tag);animation:onda 1.1s ease-in-out infinite}
.cena-tag .onda:nth-child(2){animation-delay:.18s;height:130px}
.cena-tag .onda:nth-child(3){animation-delay:.36s}
@keyframes onda{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.cartao-info{position:relative;z-index:2;padding:clamp(22px,2.4vw,34px);background:linear-gradient(0deg,rgba(0,0,0,.92) 30%,rgba(0,0,0,0))}
.cartao-logo{display:flex;align-items:flex-end;margin-bottom:12px;font:900 clamp(52px,5.4vw,92px)/.82 var(--marca);text-transform:uppercase}
.cartao-xer .cartao-logo,.cartao-tag .cartao-logo{font-size:clamp(44px,4vw,66px)}
.cartao-logo .ponto{width:.15em;height:.15em;margin:0 0 .02em .05em}
.p-tel{background:var(--tel);border-radius:3px}
.p-xer{background:var(--xer);border-radius:50%}
.p-tag{background:var(--tag);border-radius:50% 50% 50% 0}
.cartao-info p{max-width:46ch;color:#cfcdc7}
.cartao-info .detalhe{margin-top:10px;font-size:14px;color:var(--cinza)}
.cartao:hover .cartao-logo{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}

/* ---------- Telinha ---------- */
.telinha{padding-bottom:clamp(100px,12vw,170px)}
.cena{position:relative;height:400vh}
.cena-fixa{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;max-width:var(--largura);margin:0 auto;padding:96px var(--margem) 32px}
.etapas{list-style:none;margin-top:40px;counter-reset:e;max-width:520px}
.etapas li{display:grid;grid-template-columns:40px 1fr;align-items:baseline;padding:14px 0;border-top:1px solid var(--linha);counter-increment:e;color:var(--cinza);transition:color .3s}
.etapas li::before{content:counter(e);font-weight:700;font-size:15px}
.etapas li b{font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.02em}
.etapas li span{grid-column:2;max-height:0;overflow:hidden;font-size:16px;transition:max-height .45s var(--mola),margin .45s}
.etapas li.ativo{color:var(--papel)}
.etapas li.ativo::before{color:var(--tel)}
.etapas li.ativo span{max-height:60px;margin-top:6px;color:var(--cinza)}
.cena-dir{display:flex;flex-direction:column;align-items:center;gap:20px}
.celular{position:relative;width:min(330px,72vw);aspect-ratio:9/18.5;border-radius:44px;padding:11px;background:#1c1c1e;box-shadow:0 0 0 1px #333,0 40px 80px -30px rgba(0,0,0,.9)}
.celular::before{content:"";position:absolute;top:21px;left:50%;width:92px;height:25px;margin-left:-46px;border-radius:20px;background:#000;z-index:3}
.cel-tela{position:relative;height:100%;border-radius:34px;overflow:hidden;background:#0b0b0b}
.tela{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:68px 24px 40px;opacity:0;transition:opacity .5s}
.tela.on{opacity:1}
.t2{padding:0}
.t2 video{width:100%;height:100%;object-fit:cover}
.cel-rot{font-size:13px;font-weight:600;color:var(--cinza)}
.balao{align-self:flex-end;max-width:92%;padding:14px 16px;border-radius:18px 18px 4px 18px;background:var(--tel);color:#0b0d02;font-weight:700;font-size:18px;line-height:1.35}
.balao .cursor{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-3px;background:currentColor;animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.roteiro{list-style:none;display:grid;gap:10px;font-size:15px}
.roteiro li{display:grid;grid-template-columns:42px 1fr;padding:11px 12px;border-radius:10px;background:#1a1a1a}
.roteiro b{font-size:13px;color:var(--tel);font-variant-numeric:tabular-nums}
.nota-mini{font-size:13px;color:var(--cinza)}
.placar{display:flex;align-items:baseline;justify-content:center;font-family:var(--marca);font-weight:900}
.placar b{font-size:120px;line-height:.9;color:var(--tel)}
.placar span{font-size:40px;color:var(--cinza)}
.aprovado{align-self:center;font-weight:700;color:var(--tel)}
.criterios{list-style:none;display:grid;gap:10px;margin-top:8px;font-size:14px;color:var(--cinza)}
.criterios li{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:10px}
.criterios i{height:6px;border-radius:3px;background:#262626;position:relative;overflow:hidden}
.criterios i::after{content:"";position:absolute;inset:0;background:var(--tel);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--mola) .15s}
.t3.on .criterios i::after{transform:scaleX(var(--v))}
.hora{font:900 92px/.9 var(--marca)}
.redes{display:flex;gap:8px;flex-wrap:wrap}
.redes span{padding:7px 11px;border-radius:6px;background:#1f1f1f;font-size:13px}
.legenda-post{color:var(--cinza);font-size:14px}
.t4 .btn{align-self:flex-start}
.progresso-cena{width:min(330px,72vw);height:2px;background:#262626;overflow:hidden}
.progresso-cena i{display:block;height:100%;background:var(--tel);transform-origin:left;transform:scaleX(0)}

.estilos{padding-top:clamp(80px,9vw,130px)}
.trilho{display:flex;gap:12px;margin-top:40px;padding:0 var(--margem) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.trilho::-webkit-scrollbar{display:none}
.estilo{position:relative;flex:none;width:clamp(190px,18vw,260px);aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#111;scroll-snap-align:start}
.estilo img,.estilo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.estilo video{opacity:0;transition:opacity .3s}
.estilo.toca video{opacity:1}
.estilo figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 14px 14px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);font-size:16px;font-weight:800;line-height:1.2}
.estilo figcaption small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:#cfcdc7}

.tela-app{display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:clamp(30px,5vw,80px);max-width:var(--largura);margin:clamp(90px,10vw,150px) auto 0;padding:0 var(--margem)}
.moldura{border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px #2e2e2e}
.tela-app-txt p{margin-top:16px;color:var(--cinza);font-size:18px;max-width:42ch}

/* ---------- Xereta ---------- */
.xereta{padding:clamp(100px,12vw,170px) 0;border-top:1px solid var(--linha)}
.mesa{max-width:1260px;margin:clamp(44px,5vw,70px) auto 0;padding:0 var(--margem)}
.mesa-tela{position:relative;aspect-ratio:16/9;min-height:420px;border-radius:8px;overflow:hidden}
.papel-parede{position:absolute;inset:0;background:
  radial-gradient(50% 60% at 20% 30%,#c85a24 0%,transparent 62%),
  radial-gradient(45% 55% at 82% 72%,#2b43c4 0%,transparent 62%),
  radial-gradient(40% 40% at 62% 20%,#7d3fc0 0%,transparent 62%),
  #140d24}
.janela-fake{position:absolute;left:12%;right:12%;top:26%;bottom:-6%;border-radius:10px;background:rgba(20,20,24,.9);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.jf-barra{display:flex;gap:7px;padding:14px}
.jf-barra i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.jf-linhas{display:grid;gap:12px;padding:16px 40px}
.jf-linhas i{height:10px;border-radius:5px;background:rgba(255,255,255,.07)}
.jf-linhas i:nth-child(1){width:40%}.jf-linhas i:nth-child(2){width:78%}.jf-linhas i:nth-child(3){width:64%}.jf-linhas i:nth-child(4){width:84%}.jf-linhas i:nth-child(5){width:52%}.jf-linhas i:nth-child(6){width:70%}
.controles{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.ctrl-rot{font-size:15px;color:var(--cinza);margin-right:6px}
.chip{height:40px;padding:0 14px;border-radius:6px;background:var(--superficie);font-weight:600;font-size:15px;transition:background .2s}
.chip:hover{background:#262626}
.chip:active{background:#303030}

/* a ilha (réplica) */
.ilha{position:absolute;top:14px;left:50%;z-index:4;transform:translateX(-50%) scale(var(--zoom,1.4));transform-origin:50% 0;outline:none}
@media (max-width:900px){.ilha{--zoom:1}}
.ilha-casca{position:relative;width:var(--w,250px);height:var(--h,46px);border-radius:var(--r,23px);background:rgba(14,14,18,.88);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -10px rgba(0,0,0,.6);transition:width .62s cubic-bezier(.3,1.45,.5,1),height .62s cubic-bezier(.3,1.45,.5,1),border-radius .5s;overflow:hidden}
.ilha-pilula{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 16px 0 10px;transition:opacity .25s}
.ilha-bots{display:flex;align-items:center;gap:2px;flex:1}
.ilha-bot{position:relative;width:34px;height:34px}
.ilha-bot .bot{position:absolute;left:0;top:0}
.ilha-bot .estado{position:absolute;right:1px;bottom:3px;width:8px;height:8px;border-radius:50%;background:var(--c,#8c8c96);box-shadow:0 0 0 2px rgba(14,14,18,.9);transition:background .3s}
.ilha-hora{font-size:13px;font-weight:600;color:var(--cinza);font-variant-numeric:tabular-nums}
.ilha-notif,.ilha-painel{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s}
.modo-notif .ilha-notif,.modo-painel .ilha-painel{opacity:1;pointer-events:auto;transition-delay:.18s}
.modo-notif .ilha-pilula,.modo-painel .ilha-pilula{opacity:0}
.ilha-notif{display:flex;align-items:center;gap:16px;padding:0 20px 0 16px}
.notif-bot{position:relative;flex:none;width:64px;height:64px}
.notif-bot .bot{position:absolute;left:0;top:0}
.notif-txt{flex:1;min-width:0}
.notif-txt b{display:block;font-weight:800;font-size:16px;line-height:1.25}
.notif-txt span{display:block;margin-top:3px;font-size:13px;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-txt .linhas{display:inline-flex;gap:8px;margin-top:6px;font-size:12px;font-weight:700}
.linhas .mais{color:#46dc78}.linhas .menos{color:#ff6b6b}
.notif-botoes{display:flex;gap:6px;margin-top:8px}
.notif-botoes i{padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.08);font-size:12px;font-weight:700}
.notif-botoes i.sim{background:#46dc78;color:#03140a}
.notif-anel{flex:none;width:30px;height:30px;transform:rotate(-90deg)}
.notif-anel circle{fill:none;stroke:rgba(255,255,255,.75);stroke-width:2.5;stroke-dasharray:94.25;stroke-dashoffset:0;stroke-linecap:round}
.modo-notif .notif-anel circle{animation:anel var(--t,4.2s) linear forwards}
@keyframes anel{to{stroke-dashoffset:94.25}}
.notif-thumb{flex:none;width:44px;height:66px;border-radius:8px;object-fit:cover}
.ilha-painel{padding:16px}
.painel-cab{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--cinza);padding:2px 4px 12px}
.painel-linha{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;transition:background .2s}
.painel-linha:hover{background:rgba(255,255,255,.06)}
.painel-linha .pl-bot{position:relative;flex:none;width:38px;height:38px}
.painel-linha .pl-bot .bot{position:absolute;left:0;top:0}
.pl-txt{flex:1;min-width:0}
.pl-txt b{display:block;font-size:14px}
.pl-txt span{display:block;font-size:12px;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-estado{flex:none;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}

.recursos{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(28px,4vw,64px);row-gap:44px;max-width:1260px;margin:clamp(70px,8vw,110px) auto 0;padding:0 var(--margem)}
.recursos dt{font-size:20px;font-weight:800;letter-spacing:-.01em}
.recursos dd{margin-top:8px;color:var(--cinza);max-width:36ch}

/* ---------- bots (réplica dos bots 3D do Xereta) ---------- */
.bot{position:relative;width:var(--s,48px);height:var(--s,48px);pointer-events:none}
.bot-corpo{position:absolute;inset:0;background-repeat:no-repeat;background-size:900% 100%;animation:respira 3.2s ease-in-out infinite;transform-origin:50% 92%}
.bot-aura{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,var(--aura),transparent);opacity:.4}
.bot-rosto{position:absolute;inset:0;overflow:visible;transform-origin:50% 50%;animation:respira 3.2s ease-in-out infinite}
.bot-rosto .p{opacity:0;transition:opacity .14s}
.bot-rosto .p *,.bot-rosto .p.fill{fill:#fff}
.bot-rosto .glow{fill:#fff;opacity:.22}
.bot-rosto .line,.bot-rosto .line *{fill:none !important;stroke:#fff;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round}
.bot-rosto .blush ellipse{fill:#ff6f9c !important;opacity:.6}
.bot[data-olhos="open"] .e-open,.bot[data-olhos="dot"] .e-dot,.bot[data-olhos="tall"] .e-tall,.bot[data-olhos="happy"] .e-happy,.bot[data-olhos="closed"] .e-closed,.bot[data-olhos="x"] .e-x,
.bot[data-boca="smile"] .m-smile,.bot[data-boca="grin"] .m-grin,.bot[data-boca="o"] .m-o,.bot[data-boca="flat"] .m-flat,.bot[data-boca="wave"] .m-wave,.bot[data-blush] .blush{opacity:1}
.bot.trabalhando .bot-corpo,.bot.trabalhando .bot-rosto{animation:trabalha .9s ease-in-out infinite}
.bot.pula .bot-corpo,.bot.pula .bot-rosto{animation:pula .7s cubic-bezier(.3,1.6,.5,1)}
.bot.erro .bot-corpo{filter:hue-rotate(-25deg) saturate(1.4) brightness(.85)}
@keyframes respira{0%,100%{transform:scale(1,1)}50%{transform:scale(1.035,.97)}}
@keyframes trabalha{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
@keyframes pula{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-22%) scale(.95,1.06)}70%{transform:translateY(0) scale(1.06,.94)}100%{transform:none}}
.flutua{animation:flutua var(--fd,7s) ease-in-out infinite}
@keyframes flutua{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* ---------- juntos ---------- */
.juntos{padding:clamp(100px,12vw,170px) 0;border-top:1px solid var(--linha)}
.juntos-grade{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,6vw,90px);max-width:var(--largura);margin:0 auto;padding:0 var(--margem)}
.notif-grande{display:flex;align-items:center;gap:20px;width:min(600px,100%);justify-self:center;padding:18px 24px 18px 18px;border-radius:30px;background:#161618;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ng-video{flex:none;width:clamp(70px,7vw,96px);aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#111}
.ng-video video{width:100%;height:100%;object-fit:cover}
.ng-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ng-de{font-size:13px;font-weight:700;color:var(--tel)}
.ng-txt b{font-size:20px;font-weight:800}
.ng-txt span:last-child{color:var(--cinza);font-size:15px}
.ng-txt em{color:var(--papel);font-weight:700}
.ng-anel{flex:none;width:34px;height:34px;transform:rotate(-90deg)}
.ng-anel circle{fill:none;stroke:var(--papel);stroke-width:2.5;stroke-dasharray:94.25;stroke-linecap:round;animation:anel 5s linear infinite}

/* ---------- começar ---------- */
.comecar{display:flex;flex-direction:column;align-items:center;padding:clamp(80px,10vw,140px) var(--margem) clamp(110px,12vw,170px);text-align:center;border-top:1px solid var(--linha)}
.logo-fim{width:min(70vw,420px);height:min(70vw,420px)}
.comecar-txt{display:flex;flex-direction:column;align-items:center;margin-top:8px}
.comecar .titulo{max-width:none}
.comecar .lead{margin-left:auto;margin-right:auto}
.miudo{margin-top:22px;font-size:14px;color:var(--cinza)}

/* ---------- rodapé ---------- */
.rodape{padding:56px var(--margem) 40px;border-top:1px solid var(--linha)}
.rodape-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.rodape-links{display:flex;flex-wrap:wrap;gap:12px 28px}
.rodape-links a{color:var(--cinza);transition:color .2s}
.rodape-links a:hover{color:var(--papel)}
.aviso{margin-top:44px;max-width:80ch;font-size:14px;color:var(--cinza)}
.aviso a{text-decoration:underline;text-underline-offset:3px}

/* ---------- telas menores ---------- */
@media (max-width:1100px){
  .nav{display:none}
  .grade-apps{grid-template-columns:1fr}
  .cartao-tel{grid-row:auto}
  .cena{height:auto}
  .cena-fixa{position:relative;height:auto;grid-template-columns:1fr;padding-top:40px}
  .etapas li{color:var(--papel)}
  .etapas li span{max-height:none;margin-top:6px;color:var(--cinza)}
  .tela-app,.juntos-grade{grid-template-columns:1fr}
  .recursos{grid-template-columns:repeat(2,1fr)}
  .ilha-hero{left:50%;top:96px;transform:translateX(-50%) scale(1.15)}
}
@media (max-width:720px){
  .topo{height:64px}
  .marca-3d{width:38px;height:38px}
  .marca-nome{font-size:22px}
  .seletor{left:var(--margem);right:var(--margem);bottom:22px;gap:8px}
  .sel{flex:1;width:auto;padding:14px 14px 18px}
  .sel-sub{display:none}
  .sel-nome{font-size:20px}
  .slide-texto{bottom:120px}
  .parede{inset:-20% -60% -20% -10%;grid-template-columns:repeat(4,1fr);gap:10px}
  .col{gap:10px}
  .col:nth-child(5){display:none}
  .vinheta{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.84) 55%,rgba(0,0,0,.4) 100%)}
  .ilha-hero{top:80px;transform:translateX(-50%)}
  .recursos{grid-template-columns:1fr}
  .mesa-tela{aspect-ratio:auto;height:440px}
  .janela-fake{left:6%;right:6%;top:46%}
  .acoes .btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.15s !important}
  .slide .slide-texto{opacity:1;transform:none}
}

/* lista de espera da Telinha */
.lista{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:36px;width:min(460px,100%)}
.lista label{font-weight:700}
.lista-campos{display:flex;gap:8px;width:100%}
.lista input{flex:1;min-width:0;height:52px;padding:0 16px;border-radius:6px;border:1.5px solid rgba(236,235,230,.3);background:#0d0d0d;color:var(--papel);font:500 16px/1 var(--texto)}
.lista input:focus{outline:none;border-color:var(--tel)}
.lista-msg{min-height:1.4em;font-size:15px;color:var(--cinza)}