@font-face{font-family:'Bricolage Grotesque';font-weight:500 800;font-display:swap;src:url(../portfolio/fonts/BricolageGrotesque-0.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:400 600;font-display:swap;src:url(../portfolio/fonts/InstrumentSans-1.woff2) format('woff2')}

/* direção: tecnologia limpa. marinho quase preto, azul elétrico e ciano da logo; títulos centralizados, cartões com ícone, muito respiro */
:root{
  --noite:#07111F; --noite2:#0E1D33; --azul:#1F5BF0; --ciano:#22D3EE; --claro:#F4F7FC; --tinta:#EAF0FA; --texto:#0B1626; --cinza:#55627A; --linha:#0B162618;
  --grad:linear-gradient(100deg,#3D8BFF,#22D3EE);
  --display:'Bricolage Grotesque',system-ui,sans-serif; --corpo:'Instrument Sans',system-ui,sans-serif;
  --raio:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:#fff;color:var(--texto);font:400 1.0625rem/1.65 var(--corpo);overflow-x:hidden}
a{color:inherit}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--ciano);outline-offset:3px;border-radius:6px}
.miolo{max-width:76rem;margin:0 auto;padding:0 1.25rem}
.miolo.estreito{max-width:50rem}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(2.2rem,5vw,3.6rem)}
h3{font-size:1.4rem}
h1 em,h2 em{font-style:normal;color:var(--azul)}
.escura h2 em,.decl h2 em{color:var(--ciano)}
.secao{padding:7rem 0}
.secao.tinta{background:var(--tinta) radial-gradient(#1F5BF026 1.2px,transparent 1.2px) 0 0/26px 26px}
/* manchas de cor nas seções claras, para não ficarem lisas */
#sobre,#trabalhos{position:relative;overflow:hidden}
#sobre::before,#trabalhos::before{content:"";position:absolute;width:44rem;height:44rem;border-radius:50%;right:-16rem;top:-14rem;background:radial-gradient(closest-side,#22D3EE2e,transparent);pointer-events:none}
#trabalhos::before{right:auto;left:-18rem;top:6rem;background:radial-gradient(closest-side,#7A5AF826,transparent)}
#sobre .miolo,#trabalhos .miolo,#trabalhos .galeria{position:relative}
.secao.escura{background:var(--noite);color:#fff}

/* etiqueta acima dos títulos */
.pilula{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.25rem;padding:.4rem .95rem;border-radius:999px;font-weight:600;font-size:.92rem;background:#ffffff14;border:1px solid #ffffff2e;color:#fff}
.pilula.clara{background:#1F5BF014;border-color:#1F5BF033;color:var(--azul)}
.cabeca{text-align:center;max-width:46rem;margin:0 auto 3.5rem}
.cabeca p:last-child{font-size:1.15rem;color:var(--cinza);margin:1rem 0 0}
/* detalhe: ponto aceso na etiqueta e traço em degradê fechando cada cabeçalho */
.cabeca .pilula,.auto .pilula,.decl .pilula{background:none;border:0;padding:0;border-radius:0;font:600 .82rem ui-monospace,Consolas,"Cascadia Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--azul)}
.escura .cabeca .pilula,.decl .pilula{color:var(--ciano)}
.cabeca .pilula::before,.auto .pilula::before,.decl .pilula::before{content:"";width:2.2rem;height:2px;background:currentColor}
.cabeca .pilula::after,.decl .pilula::after{content:"";width:2.2rem;height:2px;background:currentColor;margin-left:.5rem}

.escura .cabeca p:last-child{color:#B8C4D9}

/* botões */
.botao{display:inline-block;border:0;background:var(--azul);color:#fff;text-decoration:none;font-weight:600;padding:1rem 1.7rem;border-radius:999px;box-shadow:0 10px 30px #1F5BF055;transition:transform .2s,box-shadow .2s,background .2s}
.botao:hover{transform:translateY(-3px);box-shadow:0 16px 40px #1F5BF077;background:#2E6BFF}
.botao.pequeno{padding:.65rem 1.2rem;box-shadow:none}
.botao.vazado{background:transparent;border:2px solid #ffffff55;box-shadow:none}
.botao.vazado:hover{background:#ffffff14;border-color:#fff}
.botao.branco{background:#fff;color:var(--noite);box-shadow:0 10px 30px #07111F44}
.botao.branco:hover{background:var(--noite);color:#fff}

/* faixa de novidade acima do menu */
.aviso-topo{display:block;text-align:center;text-decoration:none;color:#fff;font-size:.92rem;padding:.55rem 1rem;background:linear-gradient(90deg,#1F5BF0,#7A5AF8,#22D3EE,#1F5BF0);background-size:300% 100%;animation:desliza 12s linear infinite}
.aviso-topo span{background:#07111F;border-radius:999px;padding:.1rem .6rem;margin-right:.6rem;font-weight:600;font-size:.8rem}
.aviso-topo b{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@keyframes desliza{to{background-position:300% 0}}

/* títulos entram palavra por palavra */
.pal{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.pal > span{display:inline-block;transform:translateY(110%);transition:transform .5s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--w) * 26ms)}
.cabeca.ok .pal > span{transform:none}

/* pontos de navegação na lateral */
.pontos{position:fixed;right:1.1rem;top:50%;translate:0 -50%;z-index:30;display:grid;gap:.7rem}
.pontos a{display:block;width:.6rem;height:.6rem;border-radius:50%;background:#8FA0BC88;position:relative;transition:scale .25s,background .25s}
.pontos a.aqui{background:var(--ciano);scale:1.6;box-shadow:0 0 12px var(--ciano)}
.pontos span{position:absolute;right:1.4rem;top:50%;translate:0 -50%;white-space:nowrap;font-size:.78rem;font-weight:600;padding:.2rem .6rem;border-radius:7px;background:#07111F;color:#fff;opacity:0;pointer-events:none;transition:opacity .2s}
.pontos a:hover span,.pontos a:focus-visible span{opacity:1}
@media (max-width:1200px){.pontos{display:none}}

/* enfeites soltos: formas da logo espalhadas, que andam ao rolar */
.enfeites{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.secao,.chamada{position:relative}
.secao > .miolo,.chamada > .miolo{position:relative}
.e{position:absolute;width:var(--t,1.4rem);height:var(--t,1.4rem);opacity:.6;will-change:translate}
.e.mais::before,.e.mais::after{content:"";position:absolute;background:var(--ciano);border-radius:2px}
.e.mais::before{left:44%;width:12%;height:100%}
.e.mais::after{top:44%;height:12%;width:100%}
.e.aro{border:2px solid #3D8BFF;border-radius:50%;animation:respira 6s ease-in-out infinite alternate}
.e.chev{border-left:3px solid var(--ciano);border-bottom:3px solid var(--ciano);rotate:45deg}
.e.grade{width:5.5rem;height:5.5rem;background:radial-gradient(#22D3EE 1.5px,transparent 1.6px) 0 0/14px 14px;opacity:.4}
.e.bloco{background:linear-gradient(135deg,#1F5BF0,#22D3EE);border-radius:5px;rotate:18deg}
.chamada .e{opacity:.75}
.chamada .e.mais::before,.chamada .e.mais::after{background:#fff}
.chamada .e.chev,.chamada .e.aro{border-color:#fff}
.chamada .e.bloco{background:#07111F}
@keyframes respira{to{scale:1.25}}

/* topo */
.topo{position:sticky;top:0;z-index:40;background:#07111Fd9;backdrop-filter:blur(14px);color:#fff}
.topo .miolo{display:flex;align-items:center;gap:2rem;padding-top:.8rem;padding-bottom:.8rem}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:800 1.5rem var(--display);letter-spacing:-.03em;color:#fff}
.marca b{color:var(--ciano);font-weight:500;margin-left:.15em}
.topo nav{display:flex;gap:1.6rem;margin-left:auto}
.topo nav a{text-decoration:none;font-weight:600;opacity:.8;position:relative;padding:.3rem 0}
.topo nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ciano);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.topo nav a:hover{opacity:1}
.topo nav a:hover::after{transform:scaleX(1)}
.progresso{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--grad);transform-origin:left;transform:scaleX(0)}
.botao.pequeno{white-space:nowrap}
@media (max-width:900px){.topo nav{display:none}.topo .botao{margin-left:auto}}
/* no celular o botão verde fixo já faz esse papel */
@media (max-width:560px){.topo .botao{display:none}}

/* abertura */
.abertura{position:relative;color:#fff;padding:5rem 0 6.5rem;overflow:hidden;
  background:
    radial-gradient(36rem 36rem at var(--mx,78%) var(--my,30%),#1F5BF055,transparent 65%),
    radial-gradient(30rem 24rem at 5% 100%,#22D3EE22,transparent 60%),
    linear-gradient(#ffffff08 1px,transparent 1px) 0 0/100% 56px,
    linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/56px 100%,
    var(--noite)}
.abertura .miolo{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}

/* título gigante: cada linha sobe de trás de uma máscara ao abrir a página */
.titulo{font-size:clamp(2.5rem,5.7vw,4.7rem);line-height:1;letter-spacing:-.03em}
/* a frase que troca: ciano com brilho, letra por letra */
.gira{display:block;min-height:2.1em;color:var(--ciano);text-shadow:0 0 38px #22D3EE55}
.gira span > span{display:inline-block;white-space:nowrap}
.gira i{display:inline-block;font-style:normal;animation:letra .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--n) * 24ms)}
@keyframes letra{from{opacity:0;transform:translateY(70%) rotate(9deg);filter:blur(6px)}}
.gira-barra{width:9rem;height:3px;border-radius:9px;background:#ffffff26;overflow:hidden;margin:.4rem 0 0}
.gira-barra i{display:block;height:100%;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left}
.gira-barra i.anda{animation:enche 2.8s linear both}
@keyframes enche{to{transform:scaleX(1)}}
.titulo .linha{display:block;overflow:hidden;padding-bottom:.08em}
.titulo .linha > span{display:block;animation:sobe 1s cubic-bezier(.16,1,.3,1) both}
.titulo .linha:nth-child(2) > span{animation-delay:.14s}
@keyframes sobe{from{transform:translateY(105%)}}
@keyframes pisca{50%{opacity:0}}
.lead{font-size:1.25rem;max-width:32rem;color:#C6D1E4;margin:1.8rem 0 1.4rem}
.acoes{display:flex;flex-wrap:wrap;gap:1rem}
.selos{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;padding:0;margin:2.2rem 0 0;color:#B8C4D9;font-size:.98rem}
.selos li::before{content:"✓";color:var(--ciano);font-weight:800;margin-right:.45rem}

/* aurora: manchas de cor que se movem devagar atrás do título */
.abertura::before{content:"";position:absolute;inset:-25%;pointer-events:none;background:radial-gradient(30rem 30rem at 22% 35%,#7A5AF83d,transparent 60%),radial-gradient(26rem 26rem at 78% 72%,#22D3EE33,transparent 60%),radial-gradient(22rem 22rem at 60% 15%,#F0527A26,transparent 60%);animation:aurora 18s ease-in-out infinite alternate}
.abertura .miolo{position:relative}
@keyframes aurora{to{transform:translate(4%,-3%) rotate(8deg) scale(1.08)}}

/* celular */
.palco{position:relative;justify-self:center;perspective:1000px}
.celular{width:min(310px,78vw);aspect-ratio:9/18.5;background:#1A2740;border-radius:44px;padding:11px;box-shadow:0 0 0 1px #ffffff26,0 40px 90px #22D3EE33;transition:transform .25s ease-out}
.tela{height:100%;border-radius:34px;overflow:hidden;background:#fff;color:#0B1626;display:flex;flex-direction:column;--cor:#1E1E1E;transition:opacity .2s}
.tela.trocando{opacity:.15}
.tela .capa{background:var(--cor);color:#fff;padding:2.3rem 1.1rem 1.3rem}
.tela .capa small{opacity:.8;font-size:.75rem}
.tela .capa strong{display:block;font:800 1.5rem/1.05 var(--display);margin:.25rem 0 .45rem}
.tela .capa p{margin:0;font-size:.82rem;opacity:.9;line-height:1.35}
.tela ul{list-style:none;margin:0;padding:.5rem 1.1rem;flex:1}
.tela li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem 0;border-bottom:1px solid #0000001a;font-size:.88rem}
.tela li span{font-size:.72rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:#0000000f}
.tela .acao{margin:.6rem 1.1rem 1.2rem;background:var(--cor);color:#fff;text-align:center;border-radius:12px;padding:.75rem;font-weight:600;font-size:.9rem}
.aviso-f{position:absolute;display:flex;align-items:center;gap:.6rem;background:#fff;color:var(--texto);border-radius:16px;padding:.65rem .95rem;font-size:.85rem;line-height:1.25;box-shadow:0 18px 44px #00000066;animation:boia 5s ease-in-out infinite;white-space:nowrap}
.aviso-f b{display:block}
.aviso-f small{color:var(--cinza)}
.aviso-f.a{top:13%;left:-6rem}
.aviso-f.b{bottom:15%;right:-5rem;animation-delay:-2.5s}
.bola{width:.7rem;height:.7rem;border-radius:50%;background:var(--azul);box-shadow:0 0 0 5px #1F5BF026;flex:none}
.bola.verde{background:#12B76A;box-shadow:0 0 0 5px #12B76A26}
@keyframes boia{50%{transform:translateY(-12px)}}

/* texto de lado e indicador de rolagem na abertura */
.lado{position:absolute;left:1.1rem;top:50%;margin:0;writing-mode:vertical-rl;rotate:180deg;translate:0 -50%;font:600 .78rem ui-monospace,Consolas,monospace;letter-spacing:.32em;text-transform:uppercase;color:#ffffff66}
.lado::after{content:"";display:inline-block;width:1px;height:3.5rem;margin-top:1rem;background:#ffffff55;vertical-align:middle}
@media (max-width:1380px){.lado{display:none}}
.role{position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;width:1.6rem;height:2.6rem;border:2px solid #ffffff66;border-radius:999px;display:grid;justify-items:center;padding-top:.4rem}
.role i{width:.3rem;height:.55rem;border-radius:9px;background:var(--ciano);animation:desce 1.6s ease-in-out infinite}
@keyframes desce{60%{transform:translateY(.9rem);opacity:0}100%{transform:none;opacity:0}}
@media (max-width:980px){.role{display:none}}

/* janela de navegador */
.janela{border-radius:16px;overflow:hidden;background:#0B1626;border:1px solid #ffffff33;box-shadow:0 34px 90px #00000077}
.barra{display:flex;align-items:center;gap:.4rem;padding:.6rem .85rem;background:#16233A}
.barra i{width:.62rem;height:.62rem;border-radius:50%;background:#FF5F57}
.barra i:nth-child(2){background:#FEBC2E}
.barra i:nth-child(3){background:#28C840}
.barra span{margin-left:.6rem;font-size:.76rem;color:#C6D1E4;background:#ffffff14;border-radius:999px;padding:.1rem .8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visor{position:relative;aspect-ratio:16/10;background:#0B1626}
.visor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .9s}
.visor img.on{opacity:1}
/* abertura: janela grande com o celular na frente */
.palco.duplo{width:min(37rem,100%);padding:0 0 4.5rem}
.palco.duplo .janela{transition:transform .25s ease-out}
.palco.duplo .celular{position:absolute;right:-1.2rem;bottom:0;zoom:.6;box-shadow:0 0 0 1px #ffffff40,0 30px 70px #000000aa}
.palco.duplo .aviso-f.a{top:-1.3rem;left:-2.2rem}
.palco.duplo .aviso-f.b{bottom:1.6rem;left:-1.2rem;right:auto}

/* detalhes da abertura: cantos de mira em volta da janela e selo que gira */
.palco.duplo::before,.palco.duplo::after{content:"";position:absolute;width:2.2rem;height:2.2rem;border:2px solid var(--ciano);opacity:.8;pointer-events:none}
.palco.duplo::before{top:-1rem;left:-1rem;border-right:0;border-bottom:0;opacity:.45}
.palco.duplo::after{left:-1rem;bottom:3.4rem;border-right:0;border-top:0}
.selo-gira{position:absolute;right:-2.8rem;top:-3.6rem;width:7.2rem;height:7.2rem;display:grid;place-items:center;border-radius:50%;background:#07111Fcc;backdrop-filter:blur(6px);border:1px solid #ffffff26}
.selo-gira svg{position:absolute;inset:0;animation:gira 22s linear infinite}
.selo-gira text{font:700 10.5px ui-monospace,Consolas,monospace;letter-spacing:2.1px;fill:#fff}
.selo-gira img{width:2.6rem;height:2.6rem}

/* números */
.numeros{background:var(--noite2);color:#fff;padding:2.5rem 0;border-top:1px solid #ffffff14}
.numeros .miolo{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.numeros strong{display:block;font:800 clamp(2.4rem,5vw,3.4rem)/1 var(--display);color:#fff}
.numeros strong::after{content:"";display:block;width:2rem;height:3px;margin:.5rem auto .6rem;background:var(--ciano)}
.numeros span{color:#B8C4D9;font-size:.98rem}
.numeros .miolo > div + div{border-left:1px solid #ffffff1f}

/* cartões */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:2rem;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s}
.cartao:hover{transform:translateY(-8px);box-shadow:0 26px 60px #1F5BF026;border-color:#1F5BF055}
.icone{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:16px;background:linear-gradient(135deg,#1F5BF0,#22D3EE);margin-bottom:1.3rem;transition:transform .3s}
.cartao:hover .icone{transform:rotate(-8deg) scale(1.08)}
.icone svg{width:1.7rem;height:1.7rem;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cartao p{color:var(--cinza);margin:.5rem 0 0}
.servico{display:flex;flex-direction:column}
/* cada serviço com a sua cor */
.servico:nth-child(6n+2) .icone{background:linear-gradient(135deg,#7A5AF8,#C084FC)}
.servico:nth-child(6n+3) .icone{background:linear-gradient(135deg,#F0527A,#FF9A62)}
.servico:nth-child(6n+4) .icone{background:linear-gradient(135deg,#12B76A,#5EEAD4)}
.servico:nth-child(6n+5) .icone{background:linear-gradient(135deg,#F59E0B,#FACC15)}
.servico:nth-child(6n+6) .icone{background:linear-gradient(135deg,#0EA5E9,#6366F1)}
.servico::before{content:"";display:block;height:4px;margin:-2rem -2rem 1.7rem;border-radius:var(--raio) var(--raio) 0 0;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.servico:hover::before{transform:scaleX(1)}
.servico{overflow:hidden}
.servico ul{list-style:none;padding:0;margin:1.2rem 0 1.6rem;flex:1}
.servico li{padding:.3rem 0 .3rem 1.6rem;position:relative}
.servico li::before{content:"✓";position:absolute;left:0;color:var(--azul);font-weight:800}
.servico a{font-weight:600;color:var(--azul);text-decoration:none;align-self:flex-start}
.servico a::after{content:" →";display:inline-block;transition:transform .2s}
.servico a:hover::after{transform:translateX(5px)}

/* ao passar o mouse, uma barra de luz corre no topo do cartão */
.cartao,.plano,.agente,.projeto,.mini div{position:relative}
.plano::after,.projeto::after,.cartao:not(.servico)::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .35s;pointer-events:none}
.plano:hover::after,.projeto:hover::after,.cartao:not(.servico):hover::after{transform:scaleX(1)}
.plano,.cartao{overflow:hidden}

/* demonstração */
.demo{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{border:1.5px solid #ffffff40;background:transparent;color:#fff;border-radius:999px;padding:.5rem 1rem;font-weight:600;transition:background .15s,color .15s,border-color .15s,transform .15s}
.chip:hover{background:#ffffff14;transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--ciano);border-color:var(--ciano);color:var(--noite)}
.outro-campo{margin-top:1rem;display:grid;gap:.35rem;max-width:26rem;font-weight:600}
.outro-campo[hidden]{display:none}
.outro-campo input{font:inherit;padding:.8rem 1rem;border:0;border-radius:14px;background:#fff;color:var(--texto)}
.recomendo{margin-top:2rem;background:#ffffff0d;border:1px solid #ffffff24;border-radius:var(--raio);padding:1.8rem}
.recomendo ul{list-style:none;padding:0;margin:1rem 0 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem}
.recomendo li{padding-left:1.6rem;position:relative}
.recomendo li::before{content:"✓";position:absolute;left:0;color:var(--ciano);font-weight:800}
.nota{font-size:.9rem;color:#B8C4D9;margin:1rem 0 0}

/* esteira das ferramentas */
.usa{background:var(--noite);color:#fff;padding:2.2rem 0 2.6rem;border-top:1px solid #ffffff14}
.usa-titulo{text-align:center;margin:0 0 1.3rem;color:#B8C4D9;font-weight:600}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.esteira{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.trilho-usa{display:flex;gap:.9rem;width:max-content;animation:rola 38s linear infinite}
.esteira:hover .trilho-usa{animation-play-state:paused}
.trilho-usa span{display:flex;align-items:center;gap:.65rem;padding:.75rem 1.4rem;border-radius:999px;background:#ffffff0f;border:1px solid #ffffff29;font:800 1.15rem var(--display);white-space:nowrap}
.trilho-usa i{width:.75rem;height:.75rem;border-radius:50%;box-shadow:0 0 14px currentColor}

/* fluxo: como tudo se liga, com uma luz correndo de um passo ao outro */
.fluxo{max-width:62rem;margin:0 auto 4.5rem;padding:2.2rem 2rem 2.4rem;border-radius:var(--raio);color:#fff;background:var(--noite) radial-gradient(34rem 16rem at 50% 0,#1F5BF055,transparent 70%);box-shadow:0 30px 70px #0B162633}
.fluxo-titulo{margin:0 0 1.8rem;text-align:center;font:600 .82rem ui-monospace,Consolas,"Cascadia Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ciano)}
.fluxo ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative}
.fluxo ol::before{content:"";position:absolute;top:1.5rem;left:12.5%;right:12.5%;height:2px;background:#ffffff26}
.fluxo ol::after{content:"";position:absolute;top:calc(1.5rem - 3px);left:12.5%;width:4.5rem;height:8px;border-radius:9px;background:linear-gradient(90deg,transparent,var(--ciano));filter:blur(1px);animation:corre-luz 4s linear infinite}
@keyframes corre-luz{to{left:calc(87.5% - 4.5rem)}}
.fluxo li{text-align:center;display:grid;justify-items:center;gap:.25rem;position:relative}
.fluxo li span{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:.6rem;border-radius:50%;background:#0E1D33;border:2px solid #ffffff33;font:800 1.2rem var(--display);animation:acende 4s linear infinite;position:relative;z-index:1}
.fluxo li:nth-child(2) span{animation-delay:1.1s}
.fluxo li:nth-child(3) span{animation-delay:2.2s}
.fluxo li:nth-child(4) span{animation-delay:3.3s}
@keyframes acende{0%,14%{background:var(--azul);border-color:var(--ciano);box-shadow:0 0 0 7px #22D3EE22,0 0 26px #22D3EE88}28%,100%{background:#0E1D33;border-color:#ffffff33;box-shadow:none}}
.fluxo b{font:800 1.08rem var(--display)}
.fluxo small{color:#B8C4D9;font-size:.9rem}
@media (max-width:760px){.fluxo ol{grid-template-columns:1fr 1fr;gap:1.6rem 1rem}.fluxo ol::before,.fluxo ol::after{display:none}}

/* agentes de IA */
.agentes{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.agente{background:#ffffff0a;border:1px solid #ffffff24;border-radius:var(--raio);padding:2.2rem;display:flex;flex-direction:column;gap:1rem}
.agente > p{color:#B8C4D9;margin:0}
.agente .botao{align-self:flex-start;margin-top:auto}
.chat{background:#0B1626;border:1px solid #ffffff1f;border-radius:18px;overflow:hidden}
.chat-topo{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;background:#ffffff0d;font-size:.92rem}
.chat-topo small{margin-left:auto;color:#B8C4D9;border:1px solid #ffffff33;border-radius:999px;padding:.05rem .55rem}
.conversa{list-style:none;margin:0;padding:1rem;height:15rem;overflow-y:auto;display:flex;flex-direction:column;gap:.55rem}
.conversa li{max-width:82%;padding:.6rem .85rem;border-radius:16px;font-size:.95rem;line-height:1.4;animation:chega .35s}
.conversa .agente{align-self:flex-start;background:#ffffff14;border-bottom-left-radius:4px;display:block;border:0;gap:0}
.conversa .cliente{align-self:flex-end;background:var(--azul);border-bottom-right-radius:4px}
.conversa .digitando{letter-spacing:.2em;animation:pisca 1s steps(2) infinite}
.rapidas{display:flex;flex-wrap:wrap;gap:.5rem;padding:.8rem 1rem 1rem;border-top:1px solid #ffffff1f}
.rapidas button{border:1.5px solid var(--ciano);background:transparent;color:var(--ciano);border-radius:999px;padding:.4rem .85rem;font-weight:600;font-size:.9rem;transition:background .15s,color .15s}
.rapidas button:hover{background:var(--ciano);color:var(--noite)}
.semana{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:.45rem}
.semana li{background:#ffffff0d;border:1px solid #ffffff1f;border-radius:14px;padding:.8rem .3rem;text-align:center;display:grid;gap:.25rem;transition:background .3s,border-color .3s,transform .3s}
.semana b{font:800 1rem var(--display)}
.semana span{font-size:.72rem;color:#B8C4D9}
.semana small{font-size:.66rem;font-weight:600;color:#B8C4D9}
.semana .feito{background:#12B76A22;border-color:#12B76A88}
.semana .feito small{color:#4ADE80}
.semana .agora{background:var(--azul);border-color:#3D8BFF;transform:translateY(-6px)}
.semana .agora span,.semana .agora small{color:#fff}
@media (max-width:980px){.agentes{grid-template-columns:1fr}.semana{grid-template-columns:repeat(4,1fr)}}

/* comparador de arrastar */
.antes-depois{position:relative;max-width:60rem;margin:0 auto 3rem;aspect-ratio:16/9;border-radius:var(--raio);overflow:hidden;--p:50%;box-shadow:0 30px 70px #0B162633;border:1px solid var(--linha)}
.ad-depois,.ad-antes{position:absolute;inset:0}
.ad-depois img{width:100%;height:100%;object-fit:cover;object-position:top}
.ad-antes{background:#161B24;color:#fff;clip-path:inset(0 calc(100% - var(--p)) 0 0);display:grid;place-items:center}
.ad-mock{width:min(19rem,44%);margin-right:auto;margin-left:6%;display:grid;gap:.5rem}
.ad-mock b{font:800 1.3rem var(--display);margin-bottom:.3rem}
.ad-mock p{margin:0;justify-self:start;background:#ffffff1a;border-radius:14px 14px 14px 4px;padding:.5rem .8rem;font-size:.92rem}
.ad-mock small{color:#FF8A7A;font-weight:600;margin-top:.4rem}
.ad-rot{position:absolute;top:1rem;font:600 .78rem ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:8px;background:#07111Fcc;color:#fff}
.ad-rot.a{left:1rem}.ad-rot.d{right:1rem}
.ad-barra{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#fff;translate:-50% 0;box-shadow:0 0 0 1px #07111F33}
.ad-barra::after{content:"‹ ›";position:absolute;top:50%;left:50%;translate:-50% -50%;width:3rem;height:3rem;border-radius:50%;background:#fff;color:var(--noite);display:grid;place-items:center;font:800 1.1rem var(--display);box-shadow:0 8px 24px #07111F55}
.antes-depois input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.antes-depois:focus-within .ad-barra::after{outline:3px solid var(--ciano);outline-offset:3px}
/* dicas */
.dica small{font:600 .78rem ui-monospace,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--azul)}
.dica h3{margin:.6rem 0 1rem}
.dica ul{list-style:none;padding:0;margin:0;counter-reset:d}
.dica li{counter-increment:d;padding:.55rem 0 .55rem 2.2rem;position:relative;border-top:1px solid var(--linha);color:var(--cinza)}
.dica li::before{content:counter(d);position:absolute;left:0;top:.5rem;width:1.5rem;height:1.5rem;border-radius:50%;background:#1F5BF014;color:var(--azul);font:800 .85rem/1.5rem var(--display);text-align:center}

/* comparação */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:60rem;margin:0 auto}
.versus > div{border-radius:var(--raio);padding:2.2rem;border:1px solid var(--linha);background:#fff}
.versus .com{background:var(--noite);color:#fff;border-color:var(--noite);box-shadow:0 30px 70px #1F5BF033}
.versus h3{margin-bottom:1rem}
.versus ul{list-style:none;padding:0;margin:0}
.versus li{padding:.55rem 0 .55rem 2rem;position:relative}
.versus li::before{content:"✕";position:absolute;left:0;color:#D43F2A;font-weight:800}
.versus .com li::before{content:"✓";color:var(--ciano)}

/* no automático */
.auto{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
.sub{font-size:1.15rem;color:var(--cinza);margin:1rem 0 2rem;max-width:36rem}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mini div{background:#fff;border:1px solid var(--linha);border-radius:16px;padding:1.1rem 1.2rem;color:var(--cinza);font-size:.95rem;transition:transform .2s,border-color .2s}
.mini div:hover{transform:translateY(-4px);border-color:#1F5BF066}
.mini b{display:block;color:var(--texto);font:800 1.1rem var(--display);margin-bottom:.15rem}
.mini b::before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:3px;background:var(--grad);margin-right:.5rem;rotate:45deg}
.feed-tela{background:#F4F7FC}
.feed-topo{padding:2.2rem 1.1rem .8rem;display:flex;justify-content:space-between;align-items:baseline}
.feed-topo b{font:800 1.5rem var(--display)}
.feed-topo span{font-size:.8rem;color:var(--cinza)}
.feed{list-style:none;margin:0;padding:0 .8rem;display:grid;gap:.6rem;align-content:start}
.tela .feed li{display:flex;justify-content:flex-start;gap:.7rem;background:#fff;border:0;border-radius:14px;padding:.75rem .8rem;box-shadow:0 6px 18px #0B16261a;font-size:.82rem;line-height:1.3;animation:chega .5s cubic-bezier(.2,.9,.3,1.2)}
.tela .feed li span{flex:none;width:2rem;height:2rem;padding:0;border-radius:10px;background:var(--c,#1F5BF0);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.9rem}
.feed b{display:block}
.feed small{color:var(--cinza)}
@keyframes chega{from{opacity:0;transform:translateY(-14px) scale(.96)}}

/* declaração */
.decl{background:var(--noite);color:#fff;position:relative;overflow:hidden;padding:9rem 0;text-align:center}
.decl h2{font-size:clamp(2.6rem,7vw,5.4rem);margin-bottom:2.5rem}
.decl .miolo{position:relative}
.anel{position:absolute;border:2px solid #22D3EE33;border-radius:50%;left:50%;top:50%;width:52rem;height:52rem;margin:-26rem 0 0 -26rem;animation:gira 50s linear infinite;border-left-color:var(--ciano)}
.anel.dois{width:36rem;height:36rem;margin:-18rem 0 0 -18rem;animation-duration:32s;animation-direction:reverse;border-color:#1F5BF055;border-top-color:#3D8BFF}
@keyframes gira{to{transform:rotate(360deg)}}

/* passos */
.passos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative}
.passos::before{content:"";position:absolute;top:1.7rem;left:6%;right:6%;height:3px;background:linear-gradient(90deg,var(--azul),var(--ciano));opacity:.35}
.passos li{text-align:center;position:relative}
.passos span{display:grid;place-items:center;width:3.4rem;height:3.4rem;margin:0 auto 1.2rem;border-radius:50%;background:linear-gradient(135deg,#1F5BF0,#22D3EE);color:#fff;font:800 1.4rem var(--display);box-shadow:0 0 0 8px #fff,0 12px 30px #1F5BF044}
.passos p{color:var(--cinza);margin:.4rem 0 0}
/* numeral grande e apagado atrás de cada passo */
.passos{counter-reset:passo}
.passos li{counter-increment:passo}
.passos li::after{content:"0" counter(passo);position:absolute;top:-2.2rem;left:50%;translate:-50% 0;z-index:-1;font:800 7.5rem/1 var(--display);color:#1F5BF010;letter-spacing:-.05em}
.passos{isolation:isolate}

/* planos */
.planos{align-items:stretch}
.plano{border:1px solid #ffffff2e;border-radius:var(--raio);padding:2.2rem;display:flex;flex-direction:column;background:#ffffff08;transition:transform .25s,border-color .25s}
.plano:hover{transform:translateY(-8px);border-color:var(--ciano)}
.plano.destaque{background:linear-gradient(160deg,#1F5BF0,#0E2A7A);border-color:#3D8BFF;box-shadow:0 30px 80px #1F5BF066}
.plano .para{color:#B8C4D9;margin:.3rem 0 1.4rem}
.plano ul{list-style:none;padding:0;margin:0 0 2rem;flex:1}
.plano li{padding:.4rem 0 .4rem 1.7rem;position:relative}
.plano li::before{content:"✓";position:absolute;left:0;color:var(--ciano);font-weight:800}
.plano .botao{text-align:center}
.plano.destaque .botao{background:#fff;color:var(--noite)}
.selo{align-self:flex-start;background:var(--ciano);color:var(--noite);font-size:.8rem;font-weight:600;padding:.25rem .7rem;border-radius:999px;margin-bottom:.9rem}

/* galeria de telas andando */
.galeria{display:grid;gap:1.1rem;overflow:hidden;margin:0 0 4rem;padding:.5rem 0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.trilho{display:flex;gap:1.1rem;width:max-content;animation:rola 55s linear infinite}
.trilho.volta{animation-direction:reverse}
.galeria:hover .trilho{animation-play-state:paused}
.trilho img{width:22rem;max-width:70vw;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:18px;border:1px solid var(--linha);box-shadow:0 14px 34px #0B162622}
@keyframes rola{to{transform:translateX(-50%)}}

/* projeto em destaque */
.destaque-proj{display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center;text-decoration:none;margin-bottom:3.5rem;padding:2rem;border-radius:calc(var(--raio) + 8px);background:var(--noite);color:#fff;box-shadow:0 30px 80px #1F5BF033}
.destaque-proj .janela{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.destaque-proj:hover .janela{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.025)}
.destaque-proj img{width:100%;height:auto}
.destaque-proj small{color:var(--ciano);font-weight:600}
.destaque-proj h3{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:.4rem 0 .7rem}
.destaque-proj p{color:#C6D1E4;margin:0 0 1.2rem}
.marcas{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-wrap:wrap;gap:.5rem}
.marcas li{font-size:.86rem;font-weight:600;padding:.3rem .8rem;border-radius:999px;background:#ffffff14;border:1px solid #ffffff2e}
.ver{font-weight:600;color:var(--ciano)}
.ver::after{content:" →"}

/* borda com luz girando nos blocos de destaque */
@property --giro{syntax:"<angle>";inherits:false;initial-value:0deg}
.destaque-proj,.chat,.recomendo{border:1.5px solid transparent;background:linear-gradient(var(--noite),var(--noite)) padding-box,conic-gradient(from var(--giro),#1F5BF0,#22D3EE,#7A5AF8,#1F5BF0) border-box;animation:roda-borda 7s linear infinite}
.chat{background:linear-gradient(#0B1626,#0B1626) padding-box,conic-gradient(from var(--giro),#1F5BF0,#22D3EE,#7A5AF8,#1F5BF0) border-box}
.recomendo{background:linear-gradient(#0C1A2E,#0C1A2E) padding-box,conic-gradient(from var(--giro),#1F5BF0,#22D3EE,#7A5AF8,#1F5BF0) border-box}
@keyframes roda-borda{to{--giro:360deg}}
.plano.destaque{animation:brilha 3.5s ease-in-out infinite alternate}
@keyframes brilha{to{box-shadow:0 30px 100px #22D3EE66}}
/* linha de luz separando as seções escuras */
.secao.escura,.decl,.numeros{border-top:1px solid;border-image:linear-gradient(90deg,transparent,#22D3EE99,transparent) 1}

/* trabalhos */
.projeto{display:block;text-decoration:none;border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);background:#fff;transition:transform .25s,box-shadow .25s}
.projeto:hover{transform:translateY(-8px);box-shadow:0 26px 60px #1F5BF026}
.projeto{overflow:hidden}
.projeto img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .6s}
.projeto:hover img{transform:scale(1.06)}
.projeto div{padding:1.4rem 1.5rem 1.6rem}
.projeto small{color:var(--azul);font-weight:600}
.projeto p{color:var(--cinza);margin:.3rem 0 0}
.mais{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1.6rem;margin:3rem 0 0}
.mais a{font-weight:600;color:var(--cinza)}
.mais a:hover{color:var(--azul)}


.subcabeca{text-align:center;margin:4.5rem auto 2rem;max-width:40rem}
.subcabeca h3{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.subcabeca p{color:var(--cinza);margin:.6rem 0 0}

/* perguntas */
details{background:#fff;border:1px solid var(--linha);border-radius:16px;padding:1.2rem 1.5rem;margin-bottom:.8rem;transition:border-color .2s}
details[open]{border-color:#1F5BF066}
summary{font-weight:600;cursor:pointer;font-size:1.12rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:800 1.6rem/1 var(--display);color:var(--azul);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:.8rem 0 0;color:var(--cinza)}

/* chamada final */
.chamada{background:linear-gradient(120deg,#1F5BF0,#22D3EE);color:#fff;text-align:center;padding:8rem 0;overflow:hidden}
.chamada .anel{border-color:#ffffff40;border-left-color:#fff}
.chamada .anel.dois{border-color:#07111F33;border-top-color:#07111F}
.chamada h2{font-size:clamp(2.6rem,7vw,5rem)}
.chamada p{font-size:1.2rem;margin:1rem 0 2.2rem}

/* botão fixo */
.flutua{position:fixed;right:1.2rem;bottom:1.2rem;z-index:50;width:3.8rem;height:3.8rem;border-radius:50%;background:#12B76A;display:grid;place-items:center;box-shadow:0 12px 30px #12B76A66;animation:pulso 2.4s infinite}
.flutua svg{width:1.9rem;height:1.9rem;fill:#fff}
@keyframes pulso{0%{box-shadow:0 12px 30px #12B76A66,0 0 0 0 #12B76A88}70%{box-shadow:0 12px 30px #12B76A66,0 0 0 18px #12B76A00}100%{box-shadow:0 12px 30px #12B76A66,0 0 0 0 #12B76A00}}

/* rodapé */
footer{background:var(--noite);color:#B8C4D9;padding:3.5rem 0 2rem}
footer .miolo{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:start}
footer p{margin:.8rem 0 0;max-width:24rem}
.redes{display:flex;flex-wrap:wrap;gap:1.5rem}
.redes a{font-weight:600;color:#fff;text-decoration:none}
.redes a:hover{color:var(--ciano)}
.fim{grid-column:1/-1;border-top:1px solid #ffffff1f;padding-top:1.5rem;max-width:none;font-size:.92rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
.fim a{color:#fff;font-weight:600;text-decoration:none}
.fim a:hover{color:var(--ciano)}

/* aparecer ao rolar: só vale quando o JS marca a página */
.js [data-rev]{opacity:0;transform:translateY(18px);transition:opacity .4s ease-out,transform .4s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js [data-rev].ok{opacity:1;transform:none}

@media (max-width:980px){
  .secao{padding:4.5rem 0}
  .abertura{padding:3rem 0 4.5rem}
  .abertura .miolo,.demo,.auto,.versus,.tres,.passos,footer .miolo,.destaque-proj{grid-template-columns:1fr}
  .palco.duplo{justify-self:stretch;margin:1rem auto 0}
  .selo-gira{right:.2rem;top:-2.6rem;width:5.6rem;height:5.6rem}
  .selo-gira img{width:2rem;height:2rem}
  .palco.duplo::before{left:-.3rem}.palco.duplo::after{left:-.3rem}
  .numeros .miolo > div + div{border-left:0}
  .palco.duplo .celular{right:0}
  .palco.duplo .aviso-f.a{left:-.4rem}.palco.duplo .aviso-f.b{left:-.4rem}
  .destaque-proj{padding:1.2rem;gap:1.5rem}
  .numeros .miolo{grid-template-columns:1fr 1fr}
  .digitado{white-space:normal}
  .aviso-f.a{left:-.6rem}.aviso-f.b{right:-.6rem}
  .passos::before{display:none}
  .recomendo ul,.mini{grid-template-columns:1fr}
  .anel{opacity:.5}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-rev]{opacity:1;transform:none}
}

/* filhos de grade podem encolher, para nada passar da largura do celular */
.agentes > *,.demo > *,.auto > *{min-width:0}

/* estado final garantido depois da animação de entrada */
.js [data-rev].pronto{opacity:1;transform:none;transition:none}
.cabeca.pronto .pal > span{transform:none;transition:none}

/* tela de carregamento: logo pulsando e barra; some sozinha mesmo se o script falhar */
.carrega{position:fixed;inset:0;z-index:200;background:var(--noite);display:grid;place-content:center;justify-items:center;gap:1.4rem;transition:opacity .4s;animation:some-carrega .4s ease 4s forwards}
.carrega.fora{opacity:0;pointer-events:none}
.carrega img{animation:pulsa 1s ease-in-out infinite alternate}
.carrega i{width:9rem;height:3px;border-radius:9px;background:#ffffff26;overflow:hidden;position:relative}
.carrega i::after{content:"";position:absolute;inset:0;width:40%;background:var(--grad);animation:vai-e-vem 1s ease-in-out infinite alternate}
@keyframes pulsa{to{transform:scale(1.12)}}
@keyframes vai-e-vem{to{transform:translateX(150%)}}
@keyframes some-carrega{to{opacity:0;visibility:hidden}}

/* exemplo real do ramo escolhido */
.exemplo-real{display:flex;align-items:center;gap:1rem;margin-top:1.2rem;padding:.8rem;border-radius:18px;text-decoration:none;color:#fff;background:#ffffff0d;border:1px solid #ffffff24;transition:border-color .2s,transform .2s}
.exemplo-real[hidden]{display:none}
.exemplo-real:hover{border-color:var(--ciano);transform:translateY(-3px)}
.exemplo-real img{width:9.5rem;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;flex:none}
.exemplo-real span{display:grid;gap:.15rem}
.exemplo-real small{color:var(--ciano);font-weight:600}
.exemplo-real b{font:800 1.2rem var(--display)}
.exemplo-real i{font-style:normal;font-weight:600;color:#B8C4D9}
.exemplo-real i::after{content:" →"}
.nota.toque{text-align:center;margin-top:1.2rem}
/* celular da demonstração: itens marcáveis e tela de "pronto" */
.tela[data-vivo] li{cursor:pointer;transition:background .15s}
.tela[data-vivo] li:hover{background:#0000000a}
.tela[data-vivo] li.marcado{font-weight:600}
.tela[data-vivo] li.marcado span{background:var(--cor);color:#fff}
.tela button.acao{border:0;width:calc(100% - 2.2rem);cursor:pointer;font:inherit;font-weight:600;font-size:.9rem}
.feito-tela{flex:1;display:grid;align-content:center;justify-items:center;gap:.5rem;padding:1.2rem;text-align:center}
.feito-tela > span{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:#12B76A;color:#fff;font-size:1.8rem;font-weight:800;animation:chega .4s cubic-bezier(.2,.9,.3,1.4)}
.feito-tela strong{font:800 1.5rem var(--display)}
.feito-tela p{margin:0;font-size:.85rem;color:#55627A}
.feito-tela .acao{margin:.6rem 0 0;width:100%!important}
.feito-tela .voltar{border:0;background:none;font:inherit;font-size:.85rem;font-weight:600;color:#55627A;cursor:pointer;text-decoration:underline}
.duvida{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;margin:2rem 0 0;font-weight:600}

/* páginas internas: todos os sites e montar projeto */
.interna{background:var(--noite);color:#fff;padding:4rem 0 3rem}
.interna h1{font-size:clamp(2.4rem,5.5vw,4rem);margin:0 0 .8rem}
.interna p{color:#C6D1E4;font-size:1.15rem;max-width:40rem;margin:0}
.voltar-site{display:inline-block;margin-bottom:1.5rem;color:var(--ciano);font-weight:600;text-decoration:none}
.voltar-site::before{content:"← "}
.busca{display:grid;gap:1rem;margin:2rem 0 0}
.busca input{font:inherit;padding:.9rem 1.1rem;border-radius:14px;border:0;max-width:30rem;width:100%}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem}
.interna .chip[aria-pressed="true"]{background:var(--ciano);border-color:var(--ciano);color:var(--noite)}
.grade-sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;padding:3rem 0 5rem}
.site{display:grid;gap:.25rem;padding:1.2rem 1.3rem;border-radius:16px;border:1px solid var(--linha);background:#fff;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.site:hover{transform:translateY(-4px);border-color:#1F5BF066;box-shadow:0 16px 36px #1F5BF01f}
.site[hidden]{display:none}
.site b{font:800 1.15rem var(--display)}
.site small{color:var(--cinza)}
.site span{justify-self:start;margin-top:.4rem;font-size:.75rem;font-weight:600;padding:.15rem .6rem;border-radius:999px;background:#1F5BF012;color:var(--azul)}
.conta-sites{font-weight:600;color:var(--cinza);margin:2rem 0 -1.5rem}
.proj{display:grid;grid-template-columns:1fr 22rem;gap:3rem;align-items:start;padding:3rem 0 5rem}
.proj > *{min-width:0}
.passo{margin-bottom:3rem}
.passo h2{font-size:1.8rem;margin-bottom:.4rem}
.passo h2 span{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;margin-right:.6rem;border-radius:50%;background:linear-gradient(135deg,#1F5BF0,#22D3EE);color:#fff;font-size:1.1rem;vertical-align:.15em}
.passo > p{color:var(--cinza);margin:0 0 1.2rem}
.proj .chip{color:var(--texto);border-color:var(--linha)}
.proj .chip:hover{background:#1F5BF00f}
.proj .chip[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.proj .outro-campo input{border:1.5px solid var(--linha)}
.ideias{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ideia{text-align:left;font:inherit;color:inherit;background:#fff;border:1.5px solid var(--linha);border-radius:18px;padding:1.3rem;cursor:pointer;display:grid;gap:.4rem;transition:transform .2s,border-color .2s,box-shadow .2s}
.ideia:hover{transform:translateY(-4px);border-color:#1F5BF066}
.ideia[aria-pressed="true"]{border-color:var(--azul);box-shadow:0 0 0 3px #1F5BF026}
.ideia b{font:800 1.2rem var(--display)}
.ideia small{color:var(--cinza)}
.ideia ul{list-style:none;padding:0;margin:.4rem 0 0;font-size:.92rem}
.ideia li{padding:.15rem 0 .15rem 1.4rem;position:relative}
.ideia li::before{content:"✓";position:absolute;left:0;color:var(--azul);font-weight:800}
.lista-serv{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.5rem}
.lista-serv label{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:12px;cursor:pointer;transition:background .15s}
.lista-serv label:hover{background:#1F5BF00d}
.lista-serv input{width:1.2rem;height:1.2rem;accent-color:var(--azul)}
.lado-proj{position:sticky;top:5.5rem;display:grid;gap:1.2rem;justify-items:center}
.lado-proj .celular{width:min(250px,70vw)}
.resumo-proj{width:100%;background:var(--noite);color:#fff;border-radius:var(--raio);padding:1.5rem}
.resumo-proj h3{margin-bottom:.8rem}
.resumo-proj ul{list-style:none;padding:0;margin:0 0 1.2rem;font-size:.95rem;max-height:13rem;overflow:auto}
.resumo-proj li{padding:.3rem 0;border-bottom:1px solid #ffffff1f}
.resumo-proj .botao{width:100%;text-align:center}
.resumo-proj .nota{margin-top:.8rem}
.lado-proj .exemplo-real{color:var(--texto);background:#fff;border-color:var(--linha);margin:0;width:100%}
.lado-proj .exemplo-real i{color:var(--cinza)}
.lado-proj .exemplo-real small{color:var(--azul)}
@media (max-width:980px){.proj{grid-template-columns:1fr}.lado-proj{position:static}.ideias,.lista-serv{grid-template-columns:1fr}}
.busca input{background:#fff;color:var(--texto)}

/* página "Sobre mim" */
.perfil-topo{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center}
.foto{width:min(17rem,60vw);height:auto;aspect-ratio:1;object-fit:cover;border-radius:28px;border:3px solid transparent;background:linear-gradient(var(--noite),var(--noite)) padding-box,linear-gradient(135deg,#1F5BF0,#22D3EE) border-box;box-shadow:0 30px 80px #22D3EE33}
.perfil .acoes{margin-top:1.8rem}
.sobre-texto h2{margin-bottom:1.2rem}
.sobre-texto p{font-size:1.15rem;color:var(--cinza);margin:0 0 1rem}
.fatos{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.fatos li{border:1px solid var(--linha);border-radius:18px;padding:1.3rem;text-align:center}
.fatos strong{display:block;font:800 2.6rem/1 var(--display);color:var(--azul)}
.fatos span{color:var(--cinza)}
.redes-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.rede{display:flex;align-items:center;gap:1rem;padding:1.2rem;border-radius:18px;background:#fff;border:1px solid var(--linha);text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s;min-width:0}
.rede:hover{transform:translateY(-5px);border-color:#1F5BF066;box-shadow:0 18px 40px #1F5BF01f}
.rede > span:last-child{display:grid;gap:.1rem;min-width:0}
.sigla{flex:none;display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:14px;background:var(--c);color:#fff;font:800 1.1rem var(--display)}
.rede b{font:800 1.15rem var(--display)}
.rede small{color:var(--azul);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rede em{font-style:normal;color:var(--cinza);font-size:.92rem}
.redes-grade.destaque .rede{flex-direction:column;align-items:flex-start;padding:1.6rem}
.redes-grade.destaque .sigla{width:4rem;height:4rem;font-size:1.4rem;border-radius:18px}
/* chamada para a página, dentro de "Quem sou" */
.mais-sobre{display:inline-flex;align-items:center;gap:.8rem;margin-top:1.6rem;padding:.4rem 1.2rem .4rem .4rem;border-radius:999px;border:1px solid var(--linha);background:#fff;text-decoration:none;font-weight:600;transition:border-color .2s,transform .2s}
.mais-sobre:hover{border-color:var(--azul);transform:translateY(-2px)}
.mais-sobre img{width:2.6rem;height:2.6rem;border-radius:50%;object-fit:cover}
.mais-sobre span::after{content:" →"}
@media (max-width:980px){.perfil-topo{grid-template-columns:1fr;gap:1.8rem}.redes-grade{grid-template-columns:1fr 1fr}.fatos{grid-template-columns:1fr}}
@media (max-width:560px){.redes-grade{grid-template-columns:1fr}}

.etiquetas{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.2rem 0 0}
.etiquetas li{font-size:.88rem;font-weight:600;padding:.3rem .8rem;border-radius:999px;border:1px solid #22D3EE66;background:#22D3EE14;color:#DDF6FB}
.botao.vazado-claro{background:transparent;color:var(--azul);border:2px solid var(--azul);box-shadow:none}
.botao.vazado-claro:hover{background:var(--azul);color:#fff}

.interna .nota{font-size:.95rem;margin-top:.8rem}
.interna .nota a{color:var(--ciano)}

/* fundo de ondas em WebGL (onda.js): aparece devagar sobre a aurora */
.shader{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.shader.pronto{opacity:1}

/* logo 3D na chamada final (logo3d.js): camadas do símbolo com espessura, balançando devagar */
.logo3d{width:clamp(7rem,16vw,10rem);aspect-ratio:1;margin:0 auto 1.6rem;perspective:700px}
.logo3d .giro{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:balanca 7s cubic-bezier(.45,0,.55,1) infinite alternate}
.logo3d img{position:absolute;inset:0;width:100%;height:100%;backface-visibility:visible}
.logo3d img.espessura{filter:brightness(.55) saturate(1.2)}
@keyframes balanca{from{transform:rotateY(-32deg) rotateX(10deg)}to{transform:rotateY(32deg) rotateX(-6deg)}}
@media (prefers-reduced-motion:reduce){.logo3d .giro{animation:none;transform:rotateY(-18deg) rotateX(8deg)}}

/* efeitos.js ---------------------------------------------------------- */
/* Lenis: a rolagem suave dele substitui a do navegador */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* cartões inclinam com o mouse (variáveis --rx/--ry vêm do JS) */
.js .cartao.servico.ok,.cartao.servico.pronto{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--sobe,0px))}
.cartao.servico:hover{--sobe:-8px}
.destaque-proj .janela{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));position:relative}

/* projeto em destaque aparece em quadradinhos */
.pixels{position:absolute;inset:0;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(10,1fr);pointer-events:none;border-radius:inherit;overflow:hidden}
.pixels i{background:var(--noite);transition:opacity .35s ease var(--a),transform .35s ease var(--a)}
.pixels.some i{opacity:0;transform:scale(.4)}

/* roda dos 190 sites */
.roda-sec{background:var(--noite);color:#fff;overflow:hidden;padding:5rem 0}
.roda-palco{position:relative;width:min(46rem,94vw);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.roda{position:absolute;inset:0;animation:gira-roda 90s linear infinite}
.roda a{position:absolute;left:50%;top:50%;width:clamp(4.6rem,11vw,7.4rem);border-radius:10px;overflow:hidden;border:1px solid #ffffff26;box-shadow:0 10px 26px #0008;
  transform:translate(-50%,-50%) rotate(var(--ang)) translateY(calc(min(46rem,94vw) * -.42)) rotate(90deg);transition:border-color .2s,box-shadow .2s}
.roda a img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.roda a:hover,.roda a:focus-visible{border-color:var(--ciano);box-shadow:0 0 0 3px #22D3EE66,0 10px 26px #0008;outline:none}
.roda-palco:hover .roda,.roda-palco.vendo .roda{animation-play-state:paused}
/* site grande e reto no meio, no lugar do "190" */
.roda-ver{position:absolute;left:50%;top:50%;width:54%;translate:-50% -50%;opacity:0;scale:.94;pointer-events:none;transition:opacity .25s,scale .35s cubic-bezier(.16,1,.3,1);text-align:center}
.roda-ver img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:14px;border:1px solid #ffffff33;box-shadow:0 24px 60px #000a;background:var(--noite2)}
.roda-ver b{display:block;margin-top:.7rem;font:800 1.15rem var(--display)}
.roda-palco.vendo .roda-ver{opacity:1;scale:1}
.roda-palco.vendo .roda-centro{opacity:0}
.roda-centro{transition:opacity .2s}
.roda-centro{position:relative;text-align:center;max-width:17rem}
.roda-centro strong{display:block;font:800 clamp(4rem,11vw,7rem)/.9 var(--display);letter-spacing:-.04em;color:var(--ciano)}
.roda-centro p{color:#C6D1E4;margin:.6rem 0 1.4rem;font-size:1.05rem}
@keyframes gira-roda{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.roda{animation:none}}
@media (max-width:560px){.roda-centro{max-width:11.5rem}.roda-centro strong{font-size:3.4rem}.roda-centro p{font-size:.85rem;margin:.4rem 0 .9rem}.roda-centro .botao{padding:.6rem 1rem;font-size:.85rem}.roda a{width:3.6rem;border-radius:6px}}