/* TUIFT Media — esboço da landing (28/10/2026)
   Estrutura: a landing do Riverside Agents (engenharia reversa de 27/10).
   Marca: Bricolage Grotesque + Figtree, a folha de cinco cores e a pele de cada avatar. */
:root{
  --bg:#0B0B0D; --bg-2:#111216; --card:#16171B; --card-2:#1D1E23; --card-3:#25262C;
  --linha:rgba(255,255,255,.08); --linha-2:rgba(255,255,255,.14);
  --fg:#F4F4F6; --fg-2:#C9CBD2; --muted:#9A9DA6; --muted-2:#6B6E77;
  --cloud:#B9A7F5; --bun:#8FC4FF; --moss:#7FD65E; --pip:#FF6FB5; --penny:#FFE05C; --zig:#FF9F3D;
  --ok:#8BDB4A;
  --folha:linear-gradient(90deg,#8FC4FF,#C6F06A 30%,#FFE45C 52%,#FF9F3D 74%,#FF5FAE);
  --r:22px; --r-sm:14px;
  --sombra:0 1px 0 rgba(255,255,255,.04) inset,0 18px 50px -28px rgba(0,0,0,.8);
  --sombra-hover:0 1px 0 rgba(255,255,255,.06) inset,0 26px 60px -26px rgba(0,0,0,.9);
  --mola:cubic-bezier(.34,1.3,.64,1);
  --suave:cubic-bezier(.2,.8,.2,1);
  --titulo:"Bricolage Grotesque",system-ui,sans-serif;
  --texto:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--bg);color:var(--fg);font:400 17px/1.55 var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--titulo);letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(34px,4.6vw,60px);font-weight:700}
h3{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.sub{color:var(--muted);font-size:clamp(17px,1.6vw,20px);line-height:1.5;max-width:600px;text-wrap:pretty}
.rotulo{font:600 13px/1 var(--texto);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}
.folha-txt{background:var(--folha);-webkit-background-clip:text;background-clip:text;color:transparent}

/* botões */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;
  border-radius:999px;font:700 16px/1 var(--texto);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--suave),box-shadow .18s var(--suave),background .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(255,255,255,.28)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible,.aba:focus-visible,.sanfona button:focus-visible,.faq button:focus-visible,input:focus-visible{outline:3px solid var(--cloud);outline-offset:3px}
.btn-claro{background:#fff;color:#0B0B0D}
.btn-contorno{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--linha-2)}
.btn-contorno:hover{background:rgba(255,255,255,.06)}
.btn-sm{height:40px;padding:0 18px;font-size:14.5px}
.ripple{position:absolute;border-radius:50%;background:rgba(120,120,140,.35);transform:scale(0);animation:ripple .55s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* menu */
.nav{position:fixed;inset:14px 16px auto;z-index:30;display:flex;align-items:center;gap:20px;max-width:1180px;margin:0 auto;
  padding:8px 8px 8px 20px;border-radius:999px;background:rgba(17,18,22,.62);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 0 0 1px var(--linha),0 10px 40px -20px rgba(0,0,0,.8);transition:background .25s}
.nav.rolou{background:rgba(17,18,22,.86)}
/* logo TUIFT Media (28/10): o "Media" vai num cardzinho ao lado do logo, na mesma linha, como um braço da marca TUIFT;
   o card é menor que o logo e usa a Bricolage da página */
.marca{display:inline-flex;flex-direction:row;align-items:center;gap:7px;text-decoration:none}
.marca img{height:24px;width:auto}
/* opção 2 das variações do logo (escolhida em 28/10): card com borda fina em degradê da folha, fundo da página e texto na cor do logo */
.marca-card{display:inline-block;font:700 13px/1 var(--titulo);letter-spacing:-.01em;padding:4px 9px 5px;border-radius:999px;color:var(--fg);
  border:1.5px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(90deg,#8FC4FF,#C6F06A 30%,#FFE45C 52%,#FF9F3D 74%,#FF5FAE) border-box;transform:translateY(1px)}
.marca-rodape img{height:20px;opacity:1}
.marca-rodape .marca-card{font-size:11px;padding:3px 8px 4px}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{height:38px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;font-weight:500;font-size:15px;color:var(--muted);text-decoration:none;transition:background .16s,color .16s}
.nav-links a:hover{background:rgba(255,255,255,.06);color:var(--fg)}

/* entradas */
.revela{opacity:0;transform:translateY(18px);transition:opacity .7s var(--suave),transform .7s var(--suave)}
.revela.visto{opacity:1;transform:none}

/* 1 · topo */
.topo{position:relative;padding:150px 16px 0;text-align:center;overflow:hidden;
  background:radial-gradient(60% 50% at 50% 0%,rgba(185,167,245,.16),transparent 70%),radial-gradient(40% 40% at 15% 30%,rgba(143,196,255,.08),transparent 70%),radial-gradient(40% 40% at 85% 35%,rgba(255,159,61,.07),transparent 70%)}
.titulo-topo{margin:0 auto;max-width:1100px;font-size:clamp(42px,7.4vw,104px);font-weight:700;letter-spacing:-.045em;line-height:1}
.titulo-topo .linha{display:block}
.pal,.cabeca{display:inline-block;opacity:0;transform:translateY(.35em);animation:entra .8s var(--mola) forwards;animation-delay:calc(var(--i) * 55ms + 120ms)}
.cabeca{height:.92em;width:auto;vertical-align:-.12em;margin:0 .02em;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.cabeca.boia{animation:entra .8s var(--mola) forwards,boia 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * 55ms + 120ms),1.4s}
@keyframes entra{to{opacity:1;transform:none}}
@keyframes boia{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-.06em) rotate(-3deg)}}
.pal.folha{background:var(--folha);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.topo .sub{margin:26px auto 0;max-width:640px}
.acoes{display:flex;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}

/* o app de verdade numa moldura colorida, no jeito dos componentes do Gemini:
   uma borda fina em degradê que gira devagar e um brilho difuso das mesmas cores por trás */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.moldura{position:relative;max-width:1180px;margin:64px auto 0;padding:2px;border-radius:26px;isolation:isolate;text-align:left}
.moldura::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:1;pointer-events:none;
  background:conic-gradient(from var(--ang),#8FC4FF,#B9A7F5,#FF6FB5,#FF9F3D,#FFE05C,#7FD65E,#8FC4FF);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:gira 7s linear infinite}
.moldura-brilho{position:absolute;inset:-10px;border-radius:36px;z-index:-1;opacity:.55;filter:blur(38px);
  background:conic-gradient(from var(--ang),#8FC4FF,#B9A7F5,#FF6FB5,#FF9F3D,#FFE05C,#7FD65E,#8FC4FF);animation:gira 7s linear infinite}
@keyframes gira{to{--ang:360deg}}
.painel{position:relative;border-radius:24px;overflow:hidden;background:var(--bg-2)}
.painel-tela{position:relative;overflow:hidden;height:560px}
.painel-tela iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;pointer-events:none;background:transparent}

/* seções */
.secao{max-width:1180px;margin:0 auto;padding:150px 16px 0}
/* como no Riverside: todo título de seção centralizado, sem rótulo em cima, com no máximo uma linha de apoio */
.cab{display:flex;flex-direction:column;gap:16px;max-width:820px;margin:0 auto;text-align:center;align-items:center}
.cab .sub{margin:0 auto}
.centro-btn{display:flex;justify-content:center;margin-top:44px}

/* o bloco escuro: no claro, a página vai de topo claro → bloco escuro com cantos arredondados → rodapé claro (como o Riverside);
   dentro dele os tokens são sempre os do escuro, então os componentes não mudam com o tema */
.bloco{position:relative;z-index:3;margin-top:-130px;padding-bottom:10px;border-radius:72px;background:#111216;color:#F4F4F6;
  --bg:#111216;--bg-2:#16171B;--card:#1B1C21;--card-2:#22232A;--card-3:#2B2C33;--linha:rgba(255,255,255,.08);--linha-2:rgba(255,255,255,.14);
  --fg:#F4F4F6;--fg-2:#C9CBD2;--muted:#9A9DA6;--muted-2:#6B6E77;
  --cloud:#B9A7F5;--bun:#8FC4FF;--moss:#7FD65E;--pip:#FF6FB5;--penny:#FFE05C;--zig:#FF9F3D;--ok:#8BDB4A;
  --folha:linear-gradient(90deg,#8FC4FF,#C6F06A 30%,#FFE45C 52%,#FF9F3D 74%,#FF5FAE);
  --sombra:0 1px 0 rgba(255,255,255,.04) inset,0 18px 50px -28px rgba(0,0,0,.8);--sombra-hover:0 1px 0 rgba(255,255,255,.06) inset,0 26px 60px -26px rgba(0,0,0,.9)}
.bloco .btn-claro{background:#fff;color:#0B0B0D}
.bloco>.secao:first-child{padding-top:130px}
:root[data-tema=escuro] .bloco{background:#17181D;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

/* 2 · time */
/* os rostos do time entram por cima da base dos cartões, como os do Riverside */
.time-grupo{position:relative;z-index:2;width:100%;max-width:1100px;margin:6px auto 0;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.time-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.agente{position:relative;display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center;padding:18px;border-radius:var(--r);background:var(--card);
  box-shadow:var(--sombra);overflow:hidden;transition:transform .2s var(--suave),box-shadow .2s var(--suave)}
.agente::before{content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:var(--cor);opacity:.1;filter:blur(30px);transition:opacity .3s}
.agente:hover{transform:translateY(-2px);box-shadow:var(--sombra-hover)}
.agente:hover::before{opacity:.22}
.agente .av{position:relative;width:84px;height:84px}
.agente .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .15s}
.agente .av img+img{opacity:0}
.agente:hover .av img:first-child{opacity:0}
.agente:hover .av img+img{opacity:1}
.agente h3{display:flex;align-items:center;gap:8px}
.agente h3 i{width:9px;height:9px;border-radius:50%;background:var(--cor)}
.agente .funcao{font-weight:600;font-size:15px;color:var(--fg-2);margin-top:2px}
.agente .detalhe{font-size:14px;color:var(--muted);margin-top:4px;line-height:1.4}

/* 3 · falas */
.falas{display:flex;flex-direction:column;gap:16px;margin-top:48px;max-width:860px;margin-inline:auto}
.fala{display:flex;align-items:flex-end;gap:12px;max-width:620px;opacity:0;transform:translateY(24px) scale(.94);transform-origin:left bottom;transition:opacity .5s,transform .6s var(--mola)}
.fala.lado-dir{align-self:flex-end;flex-direction:row-reverse;transform-origin:right bottom}
.fala.visto{opacity:1;transform:none}
.fala img{width:58px;height:58px;object-fit:contain;flex:none}
.fala .balao{padding:14px 18px;border-radius:22px 22px 22px 6px;background:var(--card);box-shadow:var(--sombra);font-size:17px;line-height:1.45}
.fala.lado-dir .balao{border-radius:22px 22px 6px 22px}
.fala .balao b{display:block;font-size:13px;font-weight:600;margin-bottom:3px;color:var(--cor)}

/* 4 · direções */
.dois{display:flex;flex-direction:column;align-items:center;gap:52px}
.dois .janela{max-width:960px;width:100%}
.lista-ok{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.lista-ok li{position:relative;padding-left:30px;color:var(--fg-2)}
.lista-ok li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:rgba(139,219,74,.16)}
.lista-ok li::after{content:"";position:absolute;left:6px;top:8px;width:5px;height:8px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg)}
.janela{position:relative;border-radius:18px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--linha),0 40px 80px -40px rgba(0,0,0,.9)}
.janela>img{width:100%;aspect-ratio:16/10;object-fit:cover;background:linear-gradient(100deg,var(--card) 30%,var(--card-2) 50%,var(--card) 70%);background-size:300% 100%;animation:esqueleto 1.4s linear infinite}
.janela>img.natural{aspect-ratio:auto}
.janela>img.carregou{animation:none;background:none}
@keyframes esqueleto{to{background-position:-150% 0}}
.janela.inclina{transform:perspective(1600px) rotateY(-7deg) rotateX(2deg);transition:transform .6s var(--suave)}
.janela.inclina.visto{transform:perspective(1600px) rotateY(-7deg) rotateX(2deg)}
.janela.inclina:hover{transform:perspective(1600px) rotateY(0) rotateX(0)}
.janela figcaption{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:15px;color:var(--fg-2);border-top:1px solid var(--linha)}
.janela figcaption img{width:30px;height:30px;object-fit:contain}

/* 5 · trabalhando */
.duas-telas{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:52px}
.duas-telas .janela{transition:transform .2s var(--suave),box-shadow .2s var(--suave)}
.duas-telas .janela:hover{transform:translateY(-2px)}

/* 6 · como */
.cartoes3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.cartao{padding:14px 14px 26px;border-radius:var(--r);background:var(--card);box-shadow:var(--sombra);transition:transform .2s var(--suave),box-shadow .2s var(--suave)}
.cartao:hover{transform:translateY(-2px);box-shadow:var(--sombra-hover)}
.cartao h3{margin:22px 12px 0}
.cartao p{margin:8px 12px 0;color:var(--muted);font-size:15.5px;line-height:1.5}
.cartao-vis{position:relative;height:230px;border-radius:16px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--linha);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px}
.vis-aviso{background:radial-gradient(80% 70% at 50% 0%,rgba(185,167,245,.18),transparent),var(--bg-2)}
.aviso{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;background:rgba(40,41,48,.9);backdrop-filter:blur(10px);box-shadow:0 14px 30px -18px rgba(0,0,0,.9)}
.aviso img{width:38px;height:38px;object-fit:contain}
.aviso b{display:block;font-size:13.5px}
.aviso span{display:block;font-size:13px;color:var(--fg-2);line-height:1.35}
.aviso em{font-style:normal;font-size:11.5px;color:var(--muted-2);align-self:start}
.aviso-2{transform:scale(.94);opacity:.6}
.cartao:hover .aviso{animation:sacode .5s var(--mola)}
@keyframes sacode{30%{transform:translateY(-4px)}}
.bal{max-width:85%;padding:10px 14px;font-size:14px;border-radius:16px;line-height:1.4}
.bal-eu{align-self:flex-end;background:var(--card-3);border-bottom-right-radius:5px}
.bal-ag{display:flex;gap:8px;align-items:flex-start;background:var(--card-2);border-bottom-left-radius:5px}
.bal-ag img{width:24px;height:24px;flex:none}
.feito{align-self:flex-start;font-size:12.5px;color:var(--ok);padding-left:4px}
.vis-ias{flex-direction:row;align-items:center;justify-content:center;gap:12px}
.ia{width:66px;height:66px;border-radius:18px;display:grid;place-items:center;background:var(--card-2);box-shadow:inset 0 0 0 1px var(--linha);transition:transform .3s var(--mola)}
.ia svg{width:32px;height:32px}
.ia.openrouter{color:#fff}
.ia.openai{color:#fff}
.cartao:hover .ia{transform:translateY(-4px)}
.cartao:hover .ia:nth-child(2){transition-delay:.05s}
.cartao:hover .ia:nth-child(3){transition-delay:.1s}

/* 7 · só vídeo */
.so-video{text-align:center;display:flex;flex-direction:column;align-items:center;gap:40px}
.so-video h2{font-size:clamp(34px,5.2vw,68px)}
.dock{display:flex;align-items:flex-end;gap:10px;height:122px;padding:14px 22px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--linha)}
.dock img{width:var(--t,64px);height:var(--t,64px);object-fit:contain;transition:width .12s ease-out,height .12s ease-out}

/* 8 · para quem */
.passar{margin-top:44px}
.passar-abas{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--linha)}
.aba{height:42px;padding:0 20px;border-radius:999px;border:0;background:none;font-weight:600;font-size:15px;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.aba.on{background:#fff;color:#0B0B0D}
.passar-corpo{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start;margin-top:28px}
.sanfona{list-style:none;padding:0;display:flex;flex-direction:column}
.sanfona li{border-top:1px solid var(--linha)}
.sanfona li:last-child{border-bottom:1px solid var(--linha)}
.sanfona button{width:100%;display:flex;align-items:center;gap:14px;padding:22px 4px;background:none;border:0;cursor:pointer;text-align:left;font:600 clamp(19px,2vw,24px)/1.2 var(--titulo);letter-spacing:-.02em;color:var(--muted);transition:color .2s}
.sanfona button img{width:40px;height:40px;object-fit:contain;opacity:.45;transition:opacity .2s,transform .3s var(--mola)}
.sanfona button .seta{margin-left:auto;font-size:20px;opacity:0;transform:translateX(-6px);transition:all .25s}
.sanfona li.on button{color:var(--fg)}
.sanfona li.on button img{opacity:1;transform:scale(1.08)}
.sanfona li.on button .seta{opacity:1;transform:none}
.sanfona .resp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--suave)}
.sanfona .resp>p{overflow:hidden;color:var(--muted);font-size:16px;padding-left:58px}
.sanfona li.on .resp{grid-template-rows:1fr}
.sanfona li.on .resp>p{padding-bottom:22px}
.passar-img{position:sticky;top:110px}
.passar-img img{transition:opacity .25s}

/* 9 · perguntas */
.faq{max-width:820px;margin:44px auto 0;display:flex;flex-direction:column;gap:10px}
.faq details{border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 1px var(--linha);transition:background .2s}
.faq details[open]{background:var(--card-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 22px;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;width:10px;height:10px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px);transition:transform .25s;flex:none}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 22px 20px;color:var(--muted);line-height:1.6}

/* 10 · final */
.final{margin-top:150px;padding:110px 16px 90px;text-align:center;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 100%,rgba(185,167,245,.18),transparent 70%)}
.final h2{max-width:820px;margin:0 auto}
.palavra{position:relative;max-width:1100px;margin:40px auto 0;height:clamp(110px,22vw,300px);user-select:none}
.palavra-letras{display:flex;justify-content:center;font:800 clamp(84px,24vw,330px)/1 var(--titulo);letter-spacing:-.06em}
.palavra-letras span{display:inline-block;will-change:transform;background:linear-gradient(180deg,#fff 40%,rgba(255,255,255,.35));-webkit-background-clip:text;background-clip:text;color:transparent}
.flutua{position:absolute;width:clamp(64px,10vw,130px);filter:drop-shadow(0 20px 26px rgba(0,0,0,.55))}
.f1{left:4%;top:4%;animation:flut 3.2s ease-in-out infinite}
.f2{right:6%;top:0;animation:flut 3.6s ease-in-out .4s infinite}
.f3{left:14%;bottom:-6%;animation:flut 3.6s ease-in-out .9s infinite}
.f4{right:13%;bottom:-8%;animation:flut 3.2s ease-in-out 1.3s infinite}
@keyframes flut{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}
.lista{position:relative;display:flex;flex-direction:column;gap:18px;max-width:520px;margin:56px auto 0;padding:26px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--linha-2),var(--sombra);text-align:left;transition:transform .3s var(--suave),box-shadow .3s var(--suave)}
.lista:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--linha-2),var(--sombra-hover)}
.campos{display:flex;flex-direction:column;gap:12px}
.campo{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:var(--fg-2)}
.campo i{font-style:normal;color:var(--muted-2);font-weight:400}
.campo input{height:52px;padding:0 16px;border:0;border-radius:var(--r-sm);background:var(--card-2);box-shadow:inset 0 0 0 1px var(--linha);color:var(--fg);font:500 16px var(--texto);transition:box-shadow .16s,background .16s}
.campo input::placeholder{color:var(--muted-2)}
.campo input:hover{box-shadow:inset 0 0 0 1px var(--linha-2)}
.campo input:focus{outline:0;background:var(--card-3);box-shadow:inset 0 0 0 1.5px var(--cloud),0 0 0 4px rgba(185,167,245,.16)}
.campo-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.interruptor{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:15px;color:var(--fg-2);user-select:none}
.interruptor input{position:absolute;opacity:0;pointer-events:none}
.interruptor .trilho{position:relative;flex:none;width:44px;height:26px;border-radius:999px;background:var(--card-3);box-shadow:inset 0 0 0 1px var(--linha-2);transition:background .2s}
.interruptor .trilho::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .3s var(--mola)}
.interruptor input:checked+.trilho{background:var(--moss)}
.interruptor input:checked+.trilho::after{transform:translateX(18px)}
.interruptor input:focus-visible+.trilho{outline:2px solid var(--cloud);outline-offset:2px}
.lista .btn{width:100%}
.lista .btn.enviando{pointer-events:none;opacity:.7}
.lista .btn.enviando::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:roda .7s linear infinite}
@keyframes roda{to{transform:rotate(360deg)}}
.lista-feito{max-width:520px;margin:56px auto 0;padding:30px 26px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--linha-2),var(--sombra);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .5s var(--suave),transform .6s var(--mola)}
.lista-feito.visto{opacity:1;transform:none}
.lista-feito img{display:block;width:96px;height:auto;margin:0 auto 10px;animation:flut 3.2s ease-in-out infinite}
.feito-num{font:600 clamp(24px,4vw,32px)/1.15 var(--titulo);color:var(--fg);letter-spacing:-.02em}
.feito-txt{margin-top:8px;color:var(--fg-2)}
.nota{margin-top:16px;color:var(--muted);font-size:15px}
.nota.ok{color:var(--ok)}
.nota.erro{color:#FF8A8A}
.rodape{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto;padding:44px 16px 48px;color:var(--muted-2);font-size:14px}
.rodape img{height:20px;width:auto}

/* celular e tablet */
/* botão de tema */
.tema{width:40px;height:40px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:background .16s,color .16s}
.tema:hover{background:rgba(127,127,140,.12);color:var(--fg)}
.tema svg{width:19px;height:19px;grid-area:1/1;transition:opacity .2s,transform .3s var(--mola)}
.tema .lua{opacity:0;transform:rotate(-40deg) scale(.6)}
:root[data-tema=claro] .tema .sol{opacity:0;transform:rotate(40deg) scale(.6)}
:root[data-tema=claro] .tema .lua{opacity:1;transform:none}

/* ===== tema claro (28/10): papel da TUIFT, tinta preta e as peles dos avatares ===== */
:root[data-tema=claro]{
  --bg:#FAF8F5; --bg-2:#FFFFFF; --card:#FFFFFF; --card-2:#F4F2EE; --card-3:#EAE7E2;
  --linha:rgba(17,18,22,.08); --linha-2:rgba(17,18,22,.16);
  --fg:#111216; --fg-2:#34363E; --muted:#60636C; --muted-2:#8D9099;
  --cloud:#8C74E8; --bun:#3D8BE0; --moss:#3FA52C; --pip:#E2468F; --penny:#C99A00; --zig:#E5791A;
  --ok:#3B9A1D;
  --folha:linear-gradient(90deg,#3D8BE0,#4FB83A 30%,#E0AE00 52%,#F07F1A 74%,#E6448F);
  --sombra:0 1px 2px rgba(17,18,22,.05),0 14px 36px -20px rgba(17,18,22,.22);
  --sombra-hover:0 2px 4px rgba(17,18,22,.06),0 24px 50px -22px rgba(17,18,22,.3);
  color-scheme:light;
}
:root[data-tema=claro] .btn-claro{background:#111216;color:#fff}
:root[data-tema=claro] .bloco .btn-claro{background:#fff;color:#0B0B0D}
:root[data-tema=claro] .btn:hover{box-shadow:0 18px 40px -18px rgba(17,18,22,.4)}
:root[data-tema=claro] .topo .btn-contorno:hover{background:rgba(17,18,22,.05)}
:root[data-tema=claro] .nav{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 10px 34px -20px rgba(17,18,22,.35)}
:root[data-tema=claro] .nav.rolou{background:rgba(255,255,255,.9)}
:root[data-tema=claro] .nav-links a:hover{background:rgba(17,18,22,.06)}
:root[data-tema=claro] .topo{background:radial-gradient(60% 50% at 50% 0%,rgba(185,167,245,.32),transparent 70%),radial-gradient(40% 40% at 12% 30%,rgba(143,196,255,.28),transparent 70%),radial-gradient(40% 40% at 88% 35%,rgba(255,180,110,.22),transparent 70%)}
:root[data-tema=claro] .cabeca{filter:drop-shadow(0 10px 14px rgba(17,18,22,.18))}

@media (max-width:1000px){
  .nav-links{display:none}
  .nav .tema{margin-left:auto}
  .time-grade{grid-template-columns:repeat(2,1fr)}
  .dois,.passar-corpo{grid-template-columns:1fr}
  .janela.inclina,.janela.inclina.visto{transform:none}
  .passar-img{position:static}
  .cartoes3{grid-template-columns:1fr}
  .duas-telas{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bloco{border-radius:36px;margin-top:-70px}
  .bloco>.secao:first-child{padding-top:90px}
  body{font-size:16px}
  .secao{padding-top:110px}
  .topo{padding-top:120px}
  .moldura{margin-top:44px;border-radius:20px}.painel{border-radius:18px}
  .titulo-topo{font-size:clamp(36px,11vw,56px)}
  .titulo-topo .linha{display:inline}
  .time-grade{grid-template-columns:1fr}
  .agente{grid-template-columns:68px 1fr}.agente .av{width:68px;height:68px}
  .fala img{width:44px;height:44px}.fala .balao{font-size:15.5px}
  .dock{gap:4px;padding:10px 14px;height:84px}
  .dock img{width:44px!important;height:44px!important}
  .sanfona .resp>p{padding-left:0}
  .lista{padding:20px}
  .rodape{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .revela,.fala{opacity:1;transform:none}
}

/* ===== variação de tipografia do Riverside (?fonte=riverside): Sharp Grotesk nos títulos, Instrument Sans nos botões, Inter no texto ===== */
@font-face{font-family:"Sharp Grotesk";src:url(assets/fontes/sharp-grotesk-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sharp Grotesk";src:url(assets/fontes/sharp-grotesk-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(assets/fontes/instrument-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(assets/fontes/instrument-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(assets/fontes/instrument-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root[data-fonte=riverside]{--titulo:"Sharp Grotesk","Instrument Sans",Arial,sans-serif;--texto:Inter,"Helvetica Neue",Arial,sans-serif;--ui:"Instrument Sans",Arial,sans-serif}
:root[data-fonte=riverside] h1,:root[data-fonte=riverside] h2,:root[data-fonte=riverside] h3{font-weight:400;letter-spacing:0;line-height:1.14}
:root[data-fonte=riverside] .titulo-topo{font-weight:400;letter-spacing:-.01em;line-height:1.16;font-size:clamp(38px,5.4vw,78px);max-width:1200px}
:root[data-fonte=riverside] h3,:root[data-fonte=riverside] .agente h3{font-weight:500;letter-spacing:0}
:root[data-fonte=riverside] .btn,:root[data-fonte=riverside] .aba,:root[data-fonte=riverside] .nav-links a,:root[data-fonte=riverside] .campo input{font-family:var(--ui);font-weight:500}
:root[data-fonte=riverside] .sanfona button{font-weight:400;letter-spacing:0}
:root[data-fonte=riverside] .palavra-letras{font-weight:500;letter-spacing:-.03em}
:root[data-fonte=riverside] .marca-card{font-family:"Bricolage Grotesque",sans-serif}