/* Site do Vortex. Tokens: os mesmos do app (Vortex/static/app.css, visual neutro de 2026-10-22). Deploy separado,
   então o bloco é cópia: mudou a marca lá, copie de novo. Um acento só (azul); --cat-N é informação (assunto). */

@font-face{font-family:'Fustat';font-style:normal;font-weight:200 800;font-display:swap;src:url(../assets/fonts/fustat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fustat';font-style:normal;font-weight:200 800;font-display:swap;src:url(../assets/fonts/fustat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(../assets/fonts/jetbrains-mono-latin.woff2) format('woff2')}

:root{
  --font-ui:'Fustat',system-ui,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  /* superfícies e tinta (claro) */
  --canvas:#f8f8f7; --surface-1:#f2f2f1; --surface-2:#ffffff; --surface-3:#ebebea; --code-bg:#f3f3f2;
  --ink:#141414; --ink-2:#4d4d4d; --ink-3:#787878;
  --line:rgba(0,0,0,.075); --line-2:rgba(0,0,0,.13); --hover:rgba(0,0,0,.045); --field:#ffffff;
  --primary:#141414; --primary-hover:#2e2e2e; --on-primary:#ffffff; --btn-2:#ffffff;
  --accent:#2f5ee8; --accent-hover:#2349c8; --accent-soft:rgba(47,94,232,.10); --on-accent:#ffffff;
  --ok:#15803d; --warn:#b26a00; --ok-soft:rgba(21,128,61,.12); --warn-soft:rgba(178,106,0,.13);
  --cat-1:#eb6834; --cat-2:#1baf7a; --cat-3:#eda100; --cat-4:#e87ba4; --cat-5:#008300; --cat-6:#6250d6;
  --logo-tile:#ffffff;
  --shadow-lg:0 16px 40px rgba(0,0,0,.12);
  /* espaço: base 4; --s-16 é o ritmo entre seções */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px;
  /* texto */
  --t-xs:12.5px; --t-sm:13.5px; --t-md:14.5px; --t-read:16px; --t-lg:18px; --t-xl:22px; --t-2xl:32px; --t-hero:56px;
  /* raio: campo/botão 8, cartão 12, janela 16 */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  /* movimento: uma curva */
  --ease:cubic-bezier(.16,1,.3,1); --dur:.18s; --dur-slow:.6s;
  --col:1120px; --nav-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0f0f0f; --surface-1:#131313; --surface-2:#1a1a1a; --surface-3:#242424; --code-bg:#0b0b0b;
    --ink:#ededed; --ink-2:#a3a3a3; --ink-3:#737373;
    --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.12); --hover:rgba(255,255,255,.055); --field:#1d1d1d;
    --primary:#fafafa; --primary-hover:#ffffff; --on-primary:#0f0f0f; --btn-2:#101010;
    --accent:#6e98ff; --accent-hover:#93b2ff; --accent-soft:rgba(110,152,255,.14); --on-accent:#05142e;
    --ok:#4ade80; --warn:#f5b543; --ok-soft:rgba(74,222,128,.12); --warn-soft:rgba(245,181,67,.13);
    --cat-1:#d95926; --cat-2:#199e70; --cat-3:#c98500; --cat-4:#d55181; --cat-5:#008300; --cat-6:#9085e9;
    --logo-tile:#f2f2f1;
    --shadow-lg:0 20px 50px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --canvas:#0f0f0f; --surface-1:#131313; --surface-2:#1a1a1a; --surface-3:#242424; --code-bg:#0b0b0b;
  --ink:#ededed; --ink-2:#a3a3a3; --ink-3:#737373;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.12); --hover:rgba(255,255,255,.055); --field:#1d1d1d;
  --primary:#fafafa; --primary-hover:#ffffff; --on-primary:#0f0f0f; --btn-2:#101010;
  --accent:#6e98ff; --accent-hover:#93b2ff; --accent-soft:rgba(110,152,255,.14); --on-accent:#05142e;
  --ok:#4ade80; --warn:#f5b543; --ok-soft:rgba(74,222,128,.12); --warn-soft:rgba(245,181,67,.13);
  --cat-1:#d95926; --cat-2:#199e70; --cat-3:#c98500; --cat-4:#d55181; --cat-5:#008300; --cat-6:#9085e9;
  --logo-tile:#f2f2f1;
  --shadow-lg:0 20px 50px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--s-4));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--t-read)/1.55 var(--font-ui);letter-spacing:.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
img,svg{display:block}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
svg:not([class]){width:18px;height:18px;flex:none}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
html{scrollbar-color:var(--surface-3) var(--canvas);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:var(--r-pill);border:2px solid var(--canvas)}
/* hidden ganha sempre: componente com display próprio (.btn, .conta-box…) não pode reaparecer escondido */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--s-4);top:-60px;z-index:60;padding:var(--s-2) var(--s-4);background:var(--primary);color:var(--on-primary);border-radius:var(--r-sm)}
.skip:focus{top:var(--s-4);color:var(--on-primary)}

/* ---------------------------------------------------------------- componentes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-6);border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--btn-2);color:var(--ink);font-size:var(--t-md);font-weight:500;white-space:nowrap;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.btn:hover{background:var(--surface-3);color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary)}
/* ação principal dentro de uma tela do app: azul chapado, como no Vortex (--cta) */
.btn-cta{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-cta:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn-sm{min-height:36px;padding:0 var(--s-4);font-size:var(--t-sm)}
@media (pointer:coarse){.btn-sm{min-height:44px}}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-2);transition:background var(--dur) var(--ease)}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
.icon-btn[aria-pressed="true"]{background:var(--hover);color:var(--accent)}
.icon-btn svg{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-4);border:1px solid var(--line-2);border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font-size:var(--t-sm);transition:background var(--dur) var(--ease),color var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.chip:hover{background:var(--hover);color:var(--ink)}
.chip:disabled{opacity:.45;cursor:default}
.chip.on{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
@media (pointer:coarse){.chip{min-height:44px}}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.campo{min-height:44px;padding:0 var(--s-4);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--field);color:var(--ink);outline:0;transition:border-color var(--dur) var(--ease)}
.campo::placeholder{color:var(--ink-3)}
.campo:focus{border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 var(--s-2);border-radius:var(--r-pill);background:var(--hover);color:var(--ink-2);font-size:var(--t-xs);font-weight:500;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.beta{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);font-size:10.5px;font-weight:600;letter-spacing:.06em;vertical-align:middle}
.janela{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.cartao{padding:var(--s-6);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm)}
.ic svg{width:20px;height:20px}
/* tint-N: assunto, igual ao app (fundo 15% + ícone na cor) */
.tint-1{background:color-mix(in srgb,var(--cat-1) 15%,transparent);color:var(--cat-1)}
.tint-2{background:color-mix(in srgb,var(--cat-2) 15%,transparent);color:var(--cat-2)}
.tint-3{background:color-mix(in srgb,var(--cat-3) 15%,transparent);color:var(--cat-3)}
.tint-4{background:color-mix(in srgb,var(--cat-4) 15%,transparent);color:var(--cat-4)}
.tint-5{background:color-mix(in srgb,var(--cat-5) 15%,transparent);color:var(--cat-5)}
.tint-6{background:color-mix(in srgb,var(--cat-6) 15%,transparent);color:var(--cat-6)}
.tint-7{background:var(--accent-soft);color:var(--accent)}
.toast{position:fixed;left:50%;bottom:var(--s-6);z-index:70;max-width:calc(100% - 32px);padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);background:var(--primary);color:var(--on-primary);font-size:var(--t-sm);font-weight:500;transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur-slow) var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* orbe: o SVG da marca entra inline (base.js) e o estado se mostra só pelo jeito que ela se mexe */
.orbe{display:grid;place-items:center;color:var(--accent);border:0;background:none;padding:0}
.orbe svg,.orbe img{width:100%;height:100%}
.orbe[data-st="parado"]{--lg-off:none}
.orbe[data-st="ouvindo"] .lg-orbe-2-core{animation-duration:.6s}
.orbe[data-st="ouvindo"] .lg-orbe-2-spin{animation-duration:6s}
.orbe[data-st="pensando"] .lg-orbe-2-spin{animation-duration:.9s}
.orbe[data-st="pensando"] .lg-orbe-2-ring{animation-duration:4s}
.orbe[data-st="falando"] .lg-orbe-2-ring{animation-duration:.9s}
.orbe[data-st="falando"] .lg-orbe-2-core{animation-duration:.45s}
.orbe[data-st="calmo"] .lg-orbe-2-spin{animation-duration:14s}
.orbe[data-st="calmo"] .lg-orbe-2-ring{animation-duration:10s}
.orbe[data-st="calmo"] .lg-orbe-2-core{animation-duration:3s}

/* ---------------------------------------------------------------- navegação */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--s-6);height:var(--nav-h);padding:0 max(var(--s-4),calc((100% - var(--col)) / 2));background:color-mix(in srgb,var(--canvas) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)}
.nav.rolou{border-bottom-color:var(--line)}
.marca{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--ink);font-weight:600;font-size:var(--t-lg);letter-spacing:-.01em}
.marca:hover{color:var(--ink)}
.nav-links{display:flex;gap:var(--s-1);margin-left:auto}
/* computador: as seções no centro da barra e a conta (Entrar/Minha conta + botão) na direita, cada grupo no seu
   canto. No celular os links viram o menu do ≡ (regra do max-width:900px logo abaixo) */
@media (min-width:901px){
  .nav-links{position:absolute;left:50%;transform:translateX(-50%);margin:0}
  .nav-entrar{margin-left:auto}
}
.nav-links a{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-3);border-radius:var(--r-sm);color:var(--ink-2);font-size:var(--t-md);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav-links a:hover,.nav-links a.on{color:var(--ink);background:var(--hover)}
.nav-menu{display:none}
@media (max-width:900px){
  .nav{gap:var(--s-2)}
  /* celular: o botão grande sai da barra (fica dentro do menu) e o ≡ encosta na direita */
  .nav-cta{display:none}
  .nav-menu{display:inline-grid}
  .nav-links{position:absolute;top:var(--nav-h);left:var(--s-4);right:var(--s-4);flex-direction:column;gap:0;margin:0;padding:var(--s-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
  .nav-links.aberto{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{min-height:44px}
}

/* ---------------------------------------------------------------- seções */
/* clip, não hidden: corta o que os cartões em 3D projetam pra fora sem virar área de rolagem */
main{display:block;overflow-x:clip}
.sec{max-width:var(--col);margin:0 auto;padding:var(--s-24) var(--s-4) 0}
.sec-head{max-width:640px;margin-bottom:var(--s-8)}
.eyebrow{display:block;margin-bottom:var(--s-3);color:var(--ink-3);font-size:var(--t-sm);font-weight:500}
.sec-head h2{font-size:var(--t-2xl);line-height:1.15}
.sec-head p{margin-top:var(--s-3);color:var(--ink-2);font-size:var(--t-lg);line-height:1.5}
.nota-demo{margin-top:var(--s-4);color:var(--ink-3);font-size:var(--t-sm)}
@media (min-width:900px){.sec-head h2{font-size:40px}}

/* entrada das seções: some só se o JS confirmou que vai revelar (sem JS, tudo aparece) */
.js .revela{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.js .revela.in{opacity:1;transform:none}

/* barra de leitura no alto */
.progresso{position:fixed;top:0;left:0;right:0;z-index:55;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}

/* topo: o funil (canvas) nasce na orbe; cubos e cartões flutuam em camadas com paralaxe do mouse */
/* a tela inteira: o topo começa atrás da barra (margin-top negativo), então a altura é 100svh e não 100svh menos a
   barra; antes ele acabava 64px antes do fim do monitor e a seção de baixo aparecia cortando o fundo */
.hero{position:relative;display:grid;place-items:center;min-height:100svh;margin-top:calc(var(--nav-h) * -1);padding:calc(var(--nav-h) + var(--s-8)) var(--s-4) var(--s-12);overflow:hidden;isolation:isolate;--mx:0;--my:0}
.funil{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:auto 0 0;z-index:-1;height:14%;background:linear-gradient(transparent,var(--canvas));pointer-events:none}
.hero-txt{position:relative;display:flex;flex-direction:column;align-items:center;max-width:760px;text-align:center}
.hero-orbe{width:112px;height:112px;margin-bottom:var(--s-6);border-radius:50%;transition:transform var(--dur-slow) var(--ease)}
.hero-orbe:active{transform:scale(.94)}
.selo{display:inline-block;line-height:26px;padding:0 var(--s-3);border:1px solid var(--line-2);border-radius:var(--r-pill);background:color-mix(in srgb,var(--canvas) 70%,transparent);color:var(--ink-2);font-size:var(--t-sm);backdrop-filter:blur(6px)}
.selo b{color:var(--ink);font-weight:600}
.hero h1{margin-top:var(--s-6);font-size:var(--t-hero);line-height:1;letter-spacing:-.035em}
/* o cursor fica por cima, sem ocupar lugar: ocupando, sobrava um vão antes do ponto ("cria .") quando ele apagava */
.rot{position:relative;color:var(--accent)}
.rot::after{content:"";position:absolute;left:calc(100% + 2px);top:.14em;width:3px;height:.8em;border-radius:2px;background:currentColor;animation:cursor 1s steps(1) infinite}
@keyframes cursor{50%{opacity:0}}
.lead{max-width:560px;margin-top:var(--s-6);color:var(--ink-2);font-size:var(--t-lg);line-height:1.55}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);margin-top:var(--s-8)}
.numeros{display:flex;gap:var(--s-12);margin:var(--s-12) 0 0}
.numeros div{display:flex;flex-direction:column-reverse;align-items:center}
.numeros dd{margin:0;font-size:var(--t-2xl);font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.numeros dt{color:var(--ink-3);font-size:var(--t-sm)}
@media (min-width:1100px){.hero h1{font-size:72px}}
/* monitor baixo (notebook de 768px): o conteúdo inteiro cabe na primeira tela em vez de cortar os números */
@media (min-width:901px) and (max-height:860px){
  .hero-orbe{width:88px;height:88px;margin-bottom:var(--s-4)}
  .hero h1{margin-top:var(--s-4);font-size:var(--t-hero)}
  .lead{margin-top:var(--s-4)}
  .cta{margin-top:var(--s-6)}
  .numeros{margin-top:var(--s-8)}
}

.flut{position:absolute;inset:0;z-index:-1;perspective:900px;pointer-events:none}
.cubo-w,.fc-w{position:absolute;left:var(--x);top:var(--y);transform:translate3d(calc(var(--mx) * var(--d) * 28px),calc(var(--my) * var(--d) * 22px),0);transition:transform .9s var(--ease)}
.cubo-w{width:var(--s);height:var(--s);perspective:600px;animation:boia 7s ease-in-out infinite}
.cubo-w:nth-child(2n){animation-delay:-3s;animation-duration:8s}
.cubo{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:roda 18s linear infinite}
.cubo.r{animation-direction:reverse;animation-duration:22s}
.cubo i{position:absolute;inset:0;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:6px;background:color-mix(in srgb,var(--accent) 7%,var(--canvas) 60%);color:var(--accent)}
.cubo i svg{width:42%;height:42%}
.cubo i:nth-child(1){transform:translateZ(calc(var(--s) / 2))}
.cubo i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.cubo i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.cubo i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.cubo i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}
.cubo i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
@keyframes roda{from{transform:rotateX(-18deg) rotateY(0)}to{transform:rotateX(-18deg) rotateY(360deg)}}
@keyframes boia{50%{translate:0 -12px}}
.fc{display:inline-flex;align-items:center;gap:var(--s-2);padding:6px var(--s-3) 6px 6px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface-2) 84%,transparent);backdrop-filter:blur(8px);color:var(--ink-2);font-size:var(--t-sm);white-space:nowrap;box-shadow:var(--shadow-lg);opacity:0;animation:fc-entra .8s var(--ease) forwards,boia 6s ease-in-out infinite}
.fc .ic{width:26px;height:26px;border-radius:50%}
.fc .ic svg{width:14px;height:14px}
.fc-w:nth-child(5) .fc{animation-delay:.5s,0s}.fc-w:nth-child(6) .fc{animation-delay:.9s,-2s}.fc-w:nth-child(7) .fc{animation-delay:.7s,-1s}
.fc-w:nth-child(8) .fc{animation-delay:1.1s,-3s}.fc-w:nth-child(9) .fc{animation-delay:1.3s,-4s}.fc-w:nth-child(10) .fc{animation-delay:1.5s,-5s}
@keyframes fc-entra{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:1100px){.fc-w{display:none}}
@media (max-width:900px){
  .hero{padding-top:calc(var(--nav-h) + var(--s-8))}
  .hero h1{font-size:44px}
  .hero-orbe{width:88px;height:88px}
  .numeros{gap:var(--s-8)}
  .cubo-w{--s:36px!important}
  .cubo-w:nth-child(n+3){display:none}
}
@media (max-width:420px){.hero h1{font-size:38px}}

/* voz */
.voz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.voz-palco{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);min-height:460px;padding:var(--s-8) var(--s-6);text-align:center}
.voz-orbe{width:148px;height:148px;margin-bottom:var(--s-3)}
.voz-st{font-size:var(--t-lg);font-weight:600}
.voz-fala{min-height:24px;max-width:340px;color:var(--ink-2)}
.voz-palco .chips{justify-content:center;margin-top:var(--s-4);max-width:440px}
.voz-lado{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-4);background:var(--surface-1);border-left:1px solid var(--line)}
.tela{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--canvas)}
.tela-vazia{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--s-2);color:var(--ink-3);font-size:var(--t-sm)}
.tela-vazia svg{width:28px;height:28px}
.app-win{position:absolute;inset:var(--s-3);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);animation:sobe var(--dur-slow) var(--ease) both}
.app-bar{display:flex;align-items:center;gap:var(--s-2);height:28px;padding:0 var(--s-3);border-bottom:1px solid var(--line);font-size:var(--t-xs);color:var(--ink-2)}
.app-bar i{width:8px;height:8px;border-radius:50%;background:var(--surface-3)}
.app-bar span{margin-left:var(--s-1)}
.app-corpo{flex:1;padding:var(--s-3);font-size:var(--t-xs)}
.yt-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.yt-grade i{aspect-ratio:16/9;border-radius:6px;background:var(--surface-3)}
.yt-busca{height:20px;margin-bottom:var(--s-3);border-radius:var(--r-pill);background:var(--surface-1);border:1px solid var(--line)}
.vol{position:absolute;right:var(--s-4);bottom:var(--s-4);width:200px;padding:var(--s-3) var(--s-4);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--t-xs);animation:sobe var(--dur-slow) var(--ease) both}
.vol-trilho{height:4px;margin-top:var(--s-2);border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.vol-trilho b{display:block;height:100%;width:70%;background:var(--ink);transition:width .8s var(--ease)}
.tocando{display:flex;gap:var(--s-3);align-items:center}
.tocando .capa{width:56px;height:56px;border-radius:6px;background:color-mix(in srgb,var(--cat-2) 30%,var(--surface-3))}
.tocando b{display:block;font-size:var(--t-sm)}
.tocando small{color:var(--ink-3)}
.barra-prog{height:3px;margin-top:var(--s-4);border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.barra-prog b{display:block;height:100%;width:8%;background:var(--cat-2);transition:width 6s linear}
.pasta-lin{display:flex;align-items:center;gap:var(--s-2);padding:6px var(--s-2);border-radius:6px}
.pasta-lin svg{width:14px;height:14px;color:var(--ink-3)}
.pasta-lin.novo{background:var(--ok-soft);color:var(--ok)}
.pasta-lin.novo svg{color:var(--ok)}
.mini-rx{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.mini-rx div{padding:var(--s-2);border-radius:6px;background:var(--surface-1)}
.mini-rx b{display:block;font-size:var(--t-md)}
.mini-rx .quente b{color:var(--warn)}
.transcricao{flex:1;display:flex;flex-direction:column;gap:var(--s-2);min-height:160px;max-height:260px;margin:0;padding:0;overflow-y:auto;list-style:none}
.transcricao li{max-width:88%;padding:var(--s-2) var(--s-3);border-radius:var(--r-md);font-size:var(--t-sm);line-height:1.45;animation:sobe var(--dur-slow) var(--ease) both}
.transcricao .eu{align-self:flex-end;background:var(--surface-3)}
.transcricao .vx{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line)}
.transcricao .fez{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:0;color:var(--ink-3);font-size:var(--t-xs)}
.transcricao .fez svg{width:14px;height:14px;color:var(--ok)}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}}
@media (max-width:900px){
  .voz{grid-template-columns:1fr}
  .voz-palco{min-height:0}
  .voz-lado{border-left:0;border-top:1px solid var(--line)}
}

/* agentes */
.agentes{padding:var(--s-6)}
.busca{display:flex;align-items:center;gap:var(--s-3);min-height:52px;padding:0 var(--s-4);border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--field)}
.busca:focus-within{border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.busca svg{width:18px;height:18px;color:var(--ink-3)}
.busca input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:var(--t-read)}
.busca input::placeholder{color:var(--ink-3)}
.agentes .chips{margin-top:var(--s-3)}
.ag-res{min-height:24px;margin:var(--s-6) 0 var(--s-3);color:var(--ink-2);font-size:var(--t-md)}
.ag-res b{color:var(--ink)}
.ag-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s-2);margin:0;padding:0;list-style:none}
.ag{position:relative;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.ag b{display:block;font-size:var(--t-md);font-weight:600}
.ag small{display:block;color:var(--ink-3);font-size:var(--t-xs)}
.ag .ic{flex:none}
.ag .selo-ag{position:absolute;top:var(--s-2);right:var(--s-2);opacity:0;transition:opacity var(--dur) var(--ease)}
.ag.melhor{border-color:var(--line-2);background:var(--surface-1)}
.ag.melhor .selo-ag{opacity:1}
.ag.longe{opacity:.4}

/* código: o chat copia as peças do app (balão do usuário, orbe + texto, aba "Pensando" colada na caixa, dock) */
.cod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);height:620px;overflow:hidden}
.cod-chat{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:var(--canvas)}
.vx-top{display:flex;align-items:center;gap:var(--s-2);height:48px;padding:0 var(--s-3);border-bottom:1px solid var(--line)}
.vx-modelo{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--s-2);border-radius:var(--r-sm);font-size:var(--t-md);font-weight:500}
.vx-orbe{width:16px;height:16px;flex:none;color:var(--accent)}
.vx-orbe.gira{animation:gira 2.4s linear infinite}
.vx-chev{width:14px;height:14px;flex:none;color:var(--ink-3);transition:transform var(--dur) var(--ease)}
.vx-ponto{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.cod-msgs{flex:1;display:flex;flex-direction:column;gap:var(--s-6);min-height:0;padding:var(--s-6) var(--s-6) var(--s-3);overflow-y:auto;scrollbar-width:thin}
.cod-boas{margin:auto;display:grid;justify-items:center;gap:var(--s-6);text-align:center}
.cod-boas b{font-size:var(--t-xl);font-weight:500;letter-spacing:-.01em}
.vx-starter{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}
.vx-chip{display:inline-flex;align-items:center;gap:var(--s-2);min-height:40px;padding:0 var(--s-4);border:1px solid var(--line-2);border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font-size:var(--t-sm);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.vx-chip svg{width:15px;height:15px}
button.vx-chip:hover{background:var(--hover);color:var(--ink)}
.vx-chip.mudo{opacity:.4}
#codPlay{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 55%,transparent);animation:chama 2.4s var(--ease) infinite}
@keyframes chama{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 35%,transparent)}70%,100%{box-shadow:0 0 0 10px transparent}}
.m-eu{align-self:flex-end;max-width:85%;padding:var(--s-2) var(--s-4);border-radius:18px 18px 6px 18px;background:var(--surface-3);font-size:var(--t-md);line-height:1.5;animation:sobe var(--dur-slow) var(--ease) both}
.m-vx{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:var(--s-3);font-size:var(--t-md);line-height:1.6;animation:sobe var(--dur-slow) var(--ease) both}
.m-vx>.vx-orbe{width:18px;height:18px;margin-top:3px}
.m-vx .corpo>*+*{margin-top:var(--s-3)}
.m-vx code,.arvore,.cod-fonte,.vx-trilha time,.vx-live time{font-family:var(--font-mono)}
.m-vx code{padding:1px 6px;border-radius:6px;background:var(--code-bg);border:1px solid var(--line);font-size:var(--t-xs)}
.m-meta{display:flex;align-items:center;gap:2px;margin-top:var(--s-2)!important;color:var(--ink-3);font-size:var(--t-xs);opacity:0;transition:opacity var(--dur) var(--ease)}
.m-vx:hover .m-meta,.m-vx:focus-within .m-meta,.m-vx.ultima .m-meta{opacity:1}
@media (hover:none){.m-meta{opacity:1}}
.m-meta>svg{width:28px;height:28px;padding:7px;border-radius:6px}
.m-meta .sep{width:1px;height:12px;margin:0 var(--s-2);background:var(--line-2)}
.m-meta .quem{color:var(--ink-2);font-weight:500;margin-right:var(--s-2)}
.m-caminho{display:inline-flex;align-items:center;gap:6px;margin-left:var(--s-2);padding:var(--s-1) var(--s-2);border:0;border-radius:6px;background:none;color:var(--ink-3);font-size:var(--t-xs)}
.m-caminho:hover{background:var(--hover);color:var(--ink)}
.m-caminho svg{width:13px;height:13px}
.m-caminho[aria-expanded="true"] .vx-chev{transform:rotate(180deg)}
.vx-sug{display:flex;flex-wrap:wrap;gap:var(--s-2);padding-left:30px;animation:sobe var(--dur-slow) var(--ease) both}
.vx-sug .vx-chip{min-height:34px;font-size:var(--t-xs)}
@media (pointer:coarse){.vx-sug .vx-chip{min-height:44px}}
.vx-baixo{padding:0 var(--s-4) var(--s-3)}
.vx-live{display:flex;flex-wrap:wrap;align-items:center;padding:0 var(--s-2) 0 14px;border:1px solid var(--line-2);border-bottom:0;border-radius:18px 18px 0 0;background:var(--surface-2);animation:sobe var(--dur) var(--ease) both}
.vx-live[hidden]{display:none}
.vx-live-lin{flex:1;display:flex;align-items:center;gap:var(--s-2);min-width:0;height:38px;padding:0;border:0;background:none;text-align:left;font-size:var(--t-sm)}
.vx-live-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vx-live-t span{color:var(--ink-2)}
.vx-live small,.vx-live time{color:var(--ink-3);font-size:var(--t-xs)}
.vx-live-lin[aria-expanded="true"] .vx-chev{transform:rotate(180deg)}
.brilho{font-weight:600;background:linear-gradient(90deg,var(--ink) 30%,var(--ink-3) 50%,var(--ink) 70%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brilho 1.6s linear infinite}
@keyframes brilho{to{background-position:-200% 0}}
.vx-parar{display:inline-flex;align-items:center;gap:6px;margin-left:var(--s-3);color:var(--ink-3);font-size:var(--t-xs)}
.vx-parar i{width:7px;height:7px;border-radius:1px;background:currentColor}
.vx-trilha{flex-basis:100%;display:flex;flex-direction:column;gap:2px;margin:0;padding:0 0 var(--s-2);list-style:none}
.vx-trilha[hidden]{display:none}
.vx-trilha li{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:var(--s-2);min-height:26px;color:var(--ink-2);font-size:var(--t-xs)}
.vx-trilha li::before{content:"";width:7px;height:7px;margin:auto;border-radius:50%;background:var(--ink-3)}
.vx-trilha li.feito::before{background:var(--ok)}
.vx-trilha li.agora::before{width:11px;height:11px;background:none;border:1.5px solid var(--accent);border-right-color:transparent;animation:gira .8s linear infinite}
.vx-trilha li.espera{opacity:.45}
.vx-trilha time{color:var(--ink-3)}
.m-vx .vx-trilha{margin-top:var(--s-2)!important;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--surface-1)}
@keyframes gira{to{transform:rotate(360deg)}}
.vx-caixa{display:block;padding:var(--s-4) var(--s-3) var(--s-3) var(--s-4);border:1px solid var(--line-2);border-radius:24px;background:var(--field)}
.vx-live:not([hidden])+.vx-caixa{border-radius:0 0 24px 24px}
.vx-caixa-t{display:block;min-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink-3);font-size:var(--t-md)}
.vx-caixa-t.digitando{color:var(--ink);white-space:normal}
.vx-caixa-bar{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-3);padding-left:var(--s-1);color:var(--ink-2)}
.vx-caixa-bar svg{width:17px;height:17px}
.vx-caixa-bar .aceso{color:var(--accent)}
.vx-caixa-bar .sp,.vx-dock .sp{flex:1}
.vx-enviar{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--primary);color:var(--on-primary);opacity:.3;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.vx-enviar.on{opacity:1}
.vx-enviar.aperta{transform:scale(.9)}
.vx-enviar svg{width:15px;height:15px}
.vx-dock{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-2) 0;color:var(--ink-3);font-size:var(--t-xs)}
.vx-pasta{display:inline-flex;align-items:center;gap:6px}
.vx-pasta svg{width:15px;height:15px;color:var(--cat-3)}
.vx-seg{display:inline-flex;gap:2px}
.vx-seg>*{padding:3px var(--s-2);border-radius:6px}
.vx-seg b{background:var(--surface-3);color:var(--ink);font-weight:500}
.cod-lado{display:flex;flex-direction:column;min-height:0;background:var(--surface-1)}
.abas{display:flex;align-items:center;gap:var(--s-1);height:48px;padding:0 var(--s-3);border-bottom:1px solid var(--line)}
.abas [role=tab]{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 var(--s-3);border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);font-size:var(--t-sm);font-weight:500}
.abas [role=tab] svg{width:14px;height:14px}
.abas [role=tab]:hover{color:var(--ink)}
.abas [role=tab][aria-selected="true"]{background:var(--surface-3);color:var(--ink)}
.abas .icon-btn{margin-left:auto;width:36px;height:36px}
.conta{font-size:var(--t-xs);color:var(--ink-3)}
.cod-url{display:flex;align-items:center;gap:6px;margin:var(--s-3) var(--s-3) 0;padding:0 var(--s-3);height:30px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3);font-size:var(--t-xs);font-family:var(--font-mono)}
.cod-url svg{width:12px;height:12px}
.cod-previa{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;padding:var(--s-3);overflow:hidden;perspective:1400px;perspective-origin:50% 30%}
.cod-previa[hidden]{display:none}
.cod-vazio{margin:auto;color:var(--ink-3);font-size:var(--t-sm)}
.cod-arquivos{flex:1;display:grid;grid-template-columns:170px 1fr;min-height:0;margin-top:var(--s-3);border-top:1px solid var(--line)}
.cod-arquivos[hidden]{display:none}
.arvore{margin:0;padding:var(--s-2);list-style:none;border-right:1px solid var(--line);font-size:var(--t-xs);overflow-y:auto}
.arvore li{display:flex;align-items:center;gap:6px;min-height:32px;padding:0 var(--s-2);border-radius:6px;color:var(--ink-2)}
.arvore li svg{width:14px;height:14px;color:var(--ink-3)}
.arvore li.dir{color:var(--ink-3)}
.arvore li.sub{padding-left:var(--s-6)}
.arvore li[data-f]{cursor:pointer}
.arvore li[data-f]:hover{background:var(--hover)}
.arvore li.sel{background:var(--surface-3);color:var(--ink)}
.arvore li.novo{animation:pisca 1.4s var(--ease)}
.arvore .vazio{color:var(--ink-3)}
@keyframes pisca{from{background:var(--ok-soft);color:var(--ok)}}
.cod-fonte{margin:0;padding:var(--s-4);overflow:auto;background:var(--code-bg);color:var(--ink-2);font-size:var(--t-xs);line-height:1.6;white-space:pre}
@media (max-width:900px){
  .cod{grid-template-columns:minmax(0,1fr);height:auto}
  .cod-chat{border-right:0;border-bottom:1px solid var(--line)}
  .cod-msgs{height:420px;flex:none}
  .cod-previa{height:460px;flex:none}
  .cod-arquivos{height:460px;flex:none;grid-template-columns:120px 1fr}
}

/* o site que o Vortex "cria": paleta e letra próprias, é o site da cafeteria e não o do Vortex.
   Sem .estilo ele aparece cru, do jeito que o navegador desenha HTML sem CSS. */
.cafe{--cf-bg:#f7f1e8;--cf-ink:#2a1b12;--cf-mut:#7a6253;--cf-ac:#b5652b;--cf-card:#fffaf3;--cf-dark:#24160e;
  container:cafe/inline-size;position:relative;width:100%;max-width:620px;max-height:100%;overflow-y:auto;scrollbar-width:none;
  background:#fff;color:#000;font:14px/1.35 'Times New Roman',Times,serif;border-radius:var(--r-sm);
  transform-style:preserve-3d;transform-origin:50% 40%;transition:transform 1.1s var(--ease),max-width var(--dur-slow) var(--ease),filter .8s var(--ease);animation:sobe var(--dur-slow) var(--ease) both}
.cafe::-webkit-scrollbar{display:none}
.cafe.celular{max-width:300px}
.cafe>*{position:relative;transition:transform 1.1s var(--ease),box-shadow 1.1s var(--ease),opacity .6s var(--ease)}
.cafe a{color:#00e;text-decoration:underline}
.cafe nav{padding:8px}
.cafe nav a{margin-right:8px}
.cafe header{padding:8px}
.cafe h4{margin:8px 0;font-size:28px}
.cafe h5{margin:8px;font-size:18px}
.cafe ul{margin:0 8px 8px;padding-left:24px}
.cafe li small{display:block}
.cafe footer{padding:8px}
.cafe .cf-arte svg{width:72px;height:72px}
/* esqueleto: a página "carregando" enquanto o index.html é escrito */
.esqueleto{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;width:100%;max-width:620px;padding:20px;border-radius:var(--r-sm);background:var(--surface-2);animation:sobe var(--dur-slow) var(--ease) both}
.esqueleto i{display:block;border-radius:8px;background:linear-gradient(90deg,var(--surface-3) 30%,color-mix(in srgb,var(--surface-3) 50%,var(--surface-2)) 50%,var(--surface-3) 70%) 0 0/200% 100%;animation:brilho 1.4s linear infinite}
.esqueleto span{display:flex;flex-direction:column;gap:10px;padding-top:18px}
.esqueleto .e-nav{grid-column:1/-1;height:18px}
.esqueleto .e-t1{height:30px;width:80%}.esqueleto .e-t2{height:30px;width:55%}.esqueleto .e-p{height:40px}.esqueleto .e-b{height:30px;width:40%;border-radius:99px}
.esqueleto .e-arte{aspect-ratio:1;border-radius:50%;margin-top:18px}
.esqueleto .e-c{height:52px}
/* com estilo */
.cafe.estilo{background:var(--cf-bg);color:var(--cf-ink);font:13.5px/1.55 system-ui,'Segoe UI',sans-serif}
.cafe.estilo a{color:inherit;text-decoration:none}
.cafe.estilo nav{display:flex;align-items:center;gap:16px;padding:14px 20px;background:var(--cf-bg);font-size:12.5px;color:var(--cf-mut)}
.cafe.estilo nav a{margin:0}
.cafe.estilo .cf-logo{margin-right:auto;color:var(--cf-ink);font:700 18px/1 Georgia,'Times New Roman',serif;letter-spacing:-.01em}
.cafe.estilo .cf-logo::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--cf-ac);vertical-align:2px}
.cafe.estilo .cf-pedir{padding:7px 14px;border:0;border-radius:99px;background:var(--cf-ink);color:var(--cf-bg);font:600 12px system-ui,sans-serif}
.cafe.estilo header{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:12px;padding:20px 20px 28px;background:radial-gradient(120% 90% at 85% 40%,#ecd8bf 0,transparent 60%),var(--cf-bg)}
.cafe.estilo header small{color:var(--cf-ac);font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.cafe.estilo h4{margin:6px 0 10px;font:400 40px/1 Georgia,'Times New Roman',serif;letter-spacing:-.02em}
.cafe.estilo h4 em{color:var(--cf-ac)}
.cafe.estilo header p{max-width:32ch;margin:0;color:var(--cf-mut)}
.cafe.estilo .cf-cta{display:flex;align-items:center;gap:14px;margin-top:18px}
.cafe.estilo .cf-btn{padding:10px 18px;border:0;border-radius:99px;background:var(--cf-ink);color:var(--cf-bg);font:600 12.5px system-ui,sans-serif;box-shadow:0 8px 18px rgba(42,27,18,.22)}
.cafe.estilo .cf-cta a{font-size:12.5px;border-bottom:1px solid currentColor}
.cafe.estilo .cf-nota{display:block;margin-top:16px;color:var(--cf-mut);font-size:11.5px}
.cafe.estilo .cf-nota b{color:#c9822f;letter-spacing:1px}
.cafe.estilo .cf-arte svg{width:100%;height:auto;max-width:200px;margin:auto;display:block}
.cafe.estilo section{padding:20px;background:var(--cf-bg)}
.cafe.estilo h5{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 12px;font:400 22px Georgia,serif}
.cafe.estilo h5 small{font:12px system-ui,sans-serif;color:var(--cf-mut)}
.cafe.estilo ul{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none}
.cafe.estilo li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:12px 14px;border-radius:14px;background:var(--cf-card);box-shadow:0 1px 0 rgba(42,27,18,.06)}
.cafe.estilo li b{font-size:13.5px}
.cafe.estilo li small{grid-column:1;color:var(--cf-mut);font-size:11.5px}
.cafe.estilo li em{grid-row:1;grid-column:2;font-style:normal;font-weight:700;color:var(--cf-ac)}
.cafe.estilo footer{padding:14px 20px;background:var(--cf-dark);color:#e9dccb;font-size:11.5px}
@container cafe (max-width:440px){
  .cafe.estilo header{grid-template-columns:1fr}
  .cafe.estilo .cf-arte{order:-1}
  .cafe.estilo .cf-arte svg{max-width:130px}
  .cafe.estilo h4{font-size:32px}
  .cafe.estilo ul{grid-template-columns:1fr}
  .cafe.estilo nav a{display:none}
}
/* o JS do site: cardápio que abre no botão e vapor saindo da xícara */
.cafe.vivo section ul{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.cafe.vivo section.aberto ul{max-height:640px}
.cafe.vivo .cf-btn{cursor:pointer}
.cafe .vapor path{opacity:0}
.cafe.vivo .vapor path{animation:vapor 3s ease-in-out infinite}
.cafe.vivo .vapor path:nth-child(2){animation-delay:-1s}
.cafe.vivo .vapor path:nth-child(3){animation-delay:-2s}
@keyframes vapor{0%{opacity:0;transform:translateY(8px)}40%{opacity:.7}100%{opacity:0;transform:translateY(-14px)}}
.cafe li.entrou{animation:pisca 1.4s var(--ease)}
.cafe-pr{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-1);font-size:var(--t-sm)}
.cafe-pr svg{width:18px;height:18px;flex:none;color:var(--ok)}
.cafe-pr small{display:block;color:var(--ink-3);font-size:var(--t-xs)}
.cafe-pr small a{font-family:var(--font-mono)}

/* recursos */
.rec{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s-6);align-items:start}
.rec-abas{display:flex;flex-direction:column;gap:var(--s-1)}
.rec-abas button{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid transparent;border-radius:var(--r-md);background:none;text-align:left;color:var(--ink-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.rec-abas button:hover{background:var(--hover);color:var(--ink)}
.rec-abas button[aria-selected="true"]{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.rec-abas svg{width:18px;height:18px;margin-top:3px}
.rec-abas b{display:block;font-weight:600;font-size:var(--t-md)}
.rec-abas small{display:block;color:var(--ink-3);font-size:var(--t-sm);line-height:1.4}
.rec-painel{min-height:480px;padding:var(--s-6);animation:sobe var(--dur-slow) var(--ease) both}
.p-top{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.p-top b{font-size:var(--t-lg);font-weight:600;margin-right:auto}
.p-sub{margin:var(--s-6) 0 var(--s-2);color:var(--ink-3);font-size:var(--t-sm)}
.p-nota{margin-top:var(--s-4);color:var(--ink-3);font-size:var(--t-sm)}
@media (max-width:900px){
  .rec{grid-template-columns:1fr}
  .rec-abas{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--s-4) * -1);padding:0 var(--s-4)}
  .rec-abas::-webkit-scrollbar{display:none}
  .rec-abas button{flex:none;align-items:center;min-height:44px}
  .rec-abas small{display:none}
  .rec-abas svg{margin:0}
  .rec-painel{min-height:0;padding:var(--s-4)}
}
.rx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.rx-m{padding:var(--s-3);border-radius:var(--r-sm);background:var(--surface-1)}
.rx-m small{display:block;color:var(--ink-3);font-size:var(--t-xs)}
.rx-m b{display:block;margin-top:2px;font-size:var(--t-xl);font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rx-m .trilho{display:block;height:3px;margin-top:var(--s-2);border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.rx-m .trilho i{display:block;height:100%;width:var(--p,0%);background:var(--ink-2);transition:width .9s var(--ease)}
.rx-m.quente b{color:var(--warn)}
.rx-m.quente .trilho i{background:var(--warn)}
.rx-graf{width:100%;height:64px;margin-top:var(--s-4)}
.rx-area{fill:var(--accent-soft)}
.rx-linha{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.rx-procs{display:flex;flex-direction:column;gap:var(--s-1);margin:0 0 var(--s-4);padding:0;list-style:none}
.rx-procs li{display:grid;grid-template-columns:1fr 120px 40px;align-items:center;gap:var(--s-3);min-height:32px;font-size:var(--t-sm)}
.rx-procs .trilho{display:block;height:4px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.rx-procs .trilho i{display:block;height:100%;background:var(--ink-3);transition:width .9s var(--ease)}
.rx-procs em{font-style:normal;text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rx-ia{margin-top:var(--s-3);color:var(--ink-2);font-size:var(--t-sm)}
.rx-ia:empty{display:none}
@media (max-width:520px){.rx-grid{grid-template-columns:repeat(2,1fr)}.rx-procs li{grid-template-columns:1fr 70px 36px}}
.cx-mapa{width:100%;height:auto;max-height:360px;touch-action:pan-y;cursor:grab}
.cx-mapa:active{cursor:grabbing}
.cx-mapa line{stroke:var(--line-2);stroke-width:1}
.cx-mapa line.on{stroke:var(--accent)}
.cx-mapa .no-cat{cursor:pointer}
.cx-mapa .no-cat circle{fill:var(--surface-1);stroke:var(--line-2);transition:fill var(--dur) var(--ease)}
.cx-mapa .no-cat:hover circle,.cx-mapa .no-cat.on circle{fill:var(--accent-soft);stroke:var(--accent)}
.cx-mapa .no-fato{fill:var(--ink-3)}
.cx-mapa .no-fato.on{fill:var(--accent)}
.cx-mapa text{fill:var(--ink-2);font:500 11px var(--font-ui)}
.cx-mapa .no-cat.on text{fill:var(--ink)}
.cx-mapa .centro{fill:var(--accent)}
.cx-info{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-top:var(--s-3);min-height:36px;font-size:var(--t-sm)}
.cx-info b{margin-right:var(--s-1)}
.cx-info span{padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);background:var(--surface-1);color:var(--ink-2)}
.sp-topo{display:flex;align-items:center;gap:var(--s-4)}
.sp-topo b{display:block;font-size:var(--t-xl);font-weight:600}
.sp-topo small{color:var(--ink-3)}
.sp-capa{display:grid;grid-template-columns:1fr 1fr;width:72px;height:72px;overflow:hidden;border-radius:var(--r-sm)}
.sp-capa i:nth-child(1){background:var(--cat-1)}.sp-capa i:nth-child(2){background:var(--cat-6)}.sp-capa i:nth-child(3){background:var(--cat-2)}.sp-capa i:nth-child(4){background:var(--cat-3)}
.sp-acoes{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-4) 0}
.sp-lista{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;counter-reset:f}
.sp-lista li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:var(--s-3);min-height:44px;padding:0 var(--s-2);border-radius:var(--r-sm);font-size:var(--t-sm);counter-increment:f}
.sp-lista li::before{content:counter(f);color:var(--ink-3);text-align:center;font-variant-numeric:tabular-nums}
.sp-lista li:hover{background:var(--hover)}
.sp-lista small{display:block;color:var(--ink-3);font-size:var(--t-xs)}
.sp-lista em{font-style:normal;color:var(--ink-3);font-size:var(--t-xs)}
.sp-lista li.novo{animation:pisca 1.4s var(--ease)}
.sp-lista li.novo em{color:var(--ok)}
.dc-call{display:flex;flex-direction:column;gap:var(--s-1);margin:0;padding:0;list-style:none}
.dc-call li{display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding:0 var(--s-2);border-radius:var(--r-sm);font-size:var(--t-md)}
.dc-call li small{margin-left:auto;color:var(--ink-3);font-size:var(--t-xs)}
.av{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);font-size:var(--t-xs);font-weight:600;box-shadow:0 0 0 2px transparent;transition:box-shadow var(--dur) var(--ease)}
.av-vx{background:var(--surface-1)}
.dc-call li.fala .av{box-shadow:0 0 0 2px var(--ok)}
.dc-msg{display:flex;gap:var(--s-3);margin-top:var(--s-4);padding:var(--s-3);border-radius:var(--r-md);background:var(--surface-1);font-size:var(--t-md)}
.dc-msg b{display:block;font-size:var(--t-sm)}
.gh-pedido{display:flex;justify-content:flex-end;margin-bottom:var(--s-4)}
.bolha{padding:var(--s-2) var(--s-4);border-radius:var(--r-md);background:var(--surface-3);font-size:var(--t-md)}
.gh-card{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-6) 0 var(--s-4);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-md);opacity:0;transform:translateY(8px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.gh-card.on{opacity:1;transform:none}
.gh-card svg{width:20px;height:20px;color:var(--ok)}
.gh-card small{display:block;color:var(--ink-3);font-size:var(--t-xs)}
.gh-link{margin-left:auto;color:var(--accent);font-size:var(--t-sm);font-family:var(--font-mono)}
@media (max-width:620px){.gh-card{flex-wrap:wrap}.gh-link{margin-left:0;width:100%;font-size:var(--t-xs)}}

/* modelos */
.ia-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.ia-grid h3{margin-top:var(--s-4);font-size:var(--t-lg)}
.ia-grid p{margin-top:var(--s-2);color:var(--ink-2);font-size:var(--t-md)}
.marcas{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-6)}
.marcas img{width:44px;height:44px;padding:var(--s-2);border-radius:var(--r-sm);background:var(--logo-tile)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .marcas.em-orbita img.mono{filter:invert(1)}}
:root[data-theme="dark"] .marcas.em-orbita img.mono{filter:invert(1)}
@media (max-width:900px){.ia-grid{grid-template-columns:1fr}}

/* controle */
.controle{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.ctl{padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.ctl svg{width:22px;height:22px;color:var(--ink-2)}
.ctl h3{margin-top:var(--s-4);font-size:var(--t-lg)}
.ctl p{margin-top:var(--s-2);color:var(--ink-2);font-size:var(--t-md)}
@media (max-width:900px){.controle{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.controle{grid-template-columns:1fr}}

/* novidades */
.nov{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.nov-v{display:flex;flex-direction:column;gap:var(--s-3)}
.nov-v header{display:flex;align-items:baseline;gap:var(--s-2)}
.nov-v header b{font-size:var(--t-lg);font-weight:600}
.nov-v header small{color:var(--ink-3);font-size:var(--t-sm)}
.nov-v ul{display:flex;flex-direction:column;gap:var(--s-3);margin:0;padding:0;list-style:none}
.nov-v li b{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-md);font-weight:600}
.nov-v li p{margin-top:2px;color:var(--ink-2);font-size:var(--t-sm)}
.nov-v .tipo{width:6px;height:6px;flex:none;border-radius:50%;background:var(--ink-3)}
.nov-v .tipo.novo{background:var(--accent)}
.nov-v .tipo.correcao{background:var(--ok)}
.nov-v .mais{align-self:flex-start;padding:0;border:0;background:none;color:var(--accent);font-size:var(--t-sm)}
@media (max-width:900px){.nov{grid-template-columns:1fr}}

/* convite */
.convite-box{display:grid;justify-items:center;gap:var(--s-4);max-width:640px;margin:0 auto;padding:var(--s-12) var(--s-6);text-align:center}
.convite-orbe{width:72px;height:72px}
.convite-box h2{font-size:var(--t-2xl)}
.convite-box>p{color:var(--ink-2);max-width:420px}
.convite-form{display:flex;gap:var(--s-2);width:100%;max-width:440px;margin-top:var(--s-2)}
.convite-form .campo{flex:1;min-width:0;font-family:var(--font-mono);font-size:var(--t-read);letter-spacing:.06em;text-align:center}
.convite-form .campo[aria-invalid="true"]{border-color:var(--warn)}
.convite-msg{color:var(--ink-3);font-size:var(--t-sm)}
.convite-msg.erro{color:var(--warn)}
@media (max-width:520px){.convite-form{flex-direction:column}}

/* dúvidas */
.faq{max-width:760px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:56px;cursor:pointer;list-style:none;font-weight:500;font-size:var(--t-read)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;color:var(--ink-3);transition:transform var(--dur) var(--ease)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 0 var(--s-4);color:var(--ink-2);max-width:640px}

/* rodapé */
.rodape{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-6);max-width:var(--col);margin:var(--s-24) auto 0;padding:var(--s-8) var(--s-4) var(--s-12);border-top:1px solid var(--line);color:var(--ink-3);font-size:var(--t-sm)}
.rodape .marca{font-size:var(--t-md)}
.rodape b{color:var(--ink-2);font-weight:500}
/* os nomes levam pro Instagram de cada um */
.rodape-autor{color:var(--ink-2);font-weight:500;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease)}
.rodape-autor:hover{color:var(--ink);text-decoration-color:currentColor}
.rodape-fino{margin-left:auto;font-size:var(--t-xs)}
.rodape-fino a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
@media (max-width:620px){.rodape-fino{margin-left:0}}

/* passos (GitHub) */
.passos{display:flex;flex-direction:column;gap:var(--s-2);margin:0;padding:0;list-style:none;font-size:var(--t-sm);color:var(--ink-2)}
.passos li{display:flex;align-items:center;gap:var(--s-2)}
.passos li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-2)}
.passos li.agora::before{border-color:var(--accent);border-right-color:transparent;animation:gira .8s linear infinite}
.passos li.feito{color:var(--ink)}
.passos li.feito::before{border:0;background:var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a55a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.passos li.espera{opacity:.45}

/* ---------------------------------------------------------------- 3D (js/efeitos.js) */
/* títulos: cada palavra gira no eixo X saindo de baixo */
.js .h3d h2 .w{display:inline-block;perspective:600px;vertical-align:top}
.js .h3d h2 .w>span{display:inline-block;opacity:0;transform:rotateX(-90deg) translateY(.3em);transform-origin:50% 100%;transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 55ms)}
.js .h3d.in h2 .w>span{opacity:1;transform:none}
.js .h3d .eyebrow,.js .h3d>p{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease) .25s,transform .8s var(--ease) .25s}
.js .h3d.in .eyebrow,.js .h3d.in>p{opacity:1;transform:none}

/* janelas: deitadas em perspectiva até entrar na tela (--k vai de 0 a 1 com a rolagem) */
.j3d{transform:perspective(1600px) rotateX(calc((1 - var(--k, 1)) * 26deg)) translateY(calc((1 - var(--k, 1)) * 70px)) scale(calc(.93 + var(--k, 1) * .07));transform-origin:50% 0;opacity:calc(.2 + var(--k, 1) * .8);will-change:transform}

/* cascata */
.js .esc{perspective:1200px}
.js .esc>*{opacity:0;translate:0 48px;rotate:x 32deg;transition:opacity .8s var(--ease),translate 1s var(--ease),rotate 1s var(--ease),transform .5s var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);transition-delay:calc(var(--i) * 90ms)}
.js .esc.in>*{opacity:1;translate:0 0;rotate:x 0deg}
.js .esc.pronto>*{transition-delay:0s}

/* inclinação com o mouse + reflexo */
.tilt{position:relative;transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));transform-style:preserve-3d}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(320px circle at var(--lx, 50%) var(--ly, 50%),color-mix(in srgb,var(--ink) 7%,transparent),transparent 60%);opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
.tilt:hover::after{opacity:1}

/* agentes: o escolhido sobe da lista */
.ag-lista{perspective:900px}
.ag{transform-style:preserve-3d}
.ag.melhor{transform:translateZ(28px) rotateX(6deg)}

/* voz: a tela é um monitor em perspectiva; app novo entra virando */
.voz-lado{perspective:1100px}
.tela{perspective:800px;transform:rotateY(-9deg) rotateX(5deg);transform-origin:60% 50%;transition:transform 1s var(--ease);box-shadow:0 30px 50px -20px rgba(0,0,0,.35)}
.voz:hover .tela{transform:none}
.app-win{animation:vira .8s var(--ease) both;transform-origin:50% 0}
.vol{animation:vira .8s var(--ease) both}
@keyframes vira{from{opacity:0;transform:rotateX(-75deg) translateY(-12px)}}

/* recursos: troca de aba girando no eixo Y */
.rec{perspective:1400px}
.rec-painel{animation:entra-y .7s var(--ease) both;transform-origin:0 50%}
@keyframes entra-y{from{opacity:0;transform:rotateY(-8deg) translateX(24px)}}
.gh-card{transform:perspective(800px) rotateX(-40deg) translateY(8px);transform-origin:50% 0}
.gh-card.on{transform:none}

/* cérebro: globo de memórias */
.cx-mapa .no-cat,.cx-mapa .no-fato{transition:opacity .2s linear}
.cx-mapa line.fato{stroke:var(--line)}
.cx-mapa .no-cat text{transition:opacity .3s var(--ease)}
.cx-mapa .no-cat.atras:not(.on) text{opacity:0}

/* logos: em órbita da orbe (posição calculada no efeitos.js) */
.marcas.em-orbita{position:relative;display:block;height:240px;margin-top:var(--s-8)}
.marcas.em-orbita .orb-item{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2);will-change:transform}
.marcas.em-orbita img{width:30px;height:30px;padding:0;border-radius:0;background:none}
.orbita-centro{position:absolute;left:50%;top:50%;z-index:2;width:96px;height:96px;transform:translate(-50%,-50%)}
.marcas.em-orbita::before{content:"";position:absolute;left:50%;top:50%;width:min(84%,760px);aspect-ratio:1/.26;transform:translate(-50%,-50%);border:1px dashed var(--line-2);border-radius:50%}
/* convite: o funil por trás, sumindo nas bordas */
.convite{position:relative}
.funil-convite{position:absolute;inset:0 0 -96px;z-index:-1;width:100%;height:calc(100% + 96px);-webkit-mask:radial-gradient(60% 60% at 50% 45%,#000 30%,transparent 75%);mask:radial-gradient(60% 60% at 50% 45%,#000 30%,transparent 75%)}
.convite-box{position:relative;background:color-mix(in srgb,var(--surface-2) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* dúvidas abrindo com altura animada (onde o navegador já deixa) */
.faq details{interpolate-size:allow-keywords}
.faq details::details-content{height:0;overflow:hidden;transition:height .45s var(--ease),content-visibility .45s allow-discrete}
.faq details[open]::details-content{height:auto}

/* ---------------------------------------------------------------- conta (/conta) */
.nav-entrar{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-3);border-radius:var(--r-sm);color:var(--ink-2);font-size:var(--t-md);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav-entrar:hover{color:var(--ink);background:var(--hover)}
.nav-links .so-celular{display:none}
@media (max-width:900px){.nav-entrar{margin-left:auto}.nav-links .so-celular{display:inline-flex}}
/* no celular o "Entrar" mora no menu: na barra não cabe junto com o convite */
@media (max-width:520px){.nav-entrar:not(.nav-volta){display:none}.nav-menu{margin-left:auto}}
.pg-conta .nav{gap:var(--s-3)}
.pg-conta .nav-usuario{display:inline-flex;align-items:center;gap:var(--s-2);margin-left:auto;color:var(--ink-2);font-size:var(--t-sm)}
.pg-conta .nav-usuario[hidden]{display:none}
.pg-conta .nav-usuario+.nav-volta,.pg-conta .nav-usuario[hidden]+.nav-volta{margin-left:0}
.pg-conta .nav-usuario[hidden]+.nav-volta{margin-left:auto}
@media (max-width:520px){.pg-conta #navNome{display:none}}
.av-ini{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:var(--t-sm);font-weight:600}
.av-grande{width:56px;height:56px;font-size:var(--t-xl)}

.conta-pg{position:relative;display:grid;place-items:start center;min-height:calc(100svh - var(--nav-h));padding:var(--s-12) var(--s-4) var(--s-16)}
.conta-pg h1{font-size:var(--t-2xl);line-height:1.15;letter-spacing:-.025em}
.auth-sub{margin-top:var(--s-2);color:var(--ink-2)}
.carregando{position:absolute;inset:0;display:grid;place-items:center}
.carregando i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);animation:gira .8s linear infinite}

/* entrar: formulário à esquerda, o vórtice à direita (some no celular) */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;max-width:1040px;min-height:620px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.auth-lado{display:grid;place-items:center;padding:var(--s-12) var(--s-8)}
.auth-form{display:grid;gap:var(--s-6);width:100%;max-width:360px}
.auth-arte{position:relative;display:grid;place-items:center;overflow:hidden;border-left:1px solid var(--line);background:var(--canvas)}
.auth-arte canvas{position:absolute;inset:0;width:100%;height:100%}
.auth-arte-c{position:relative;display:grid;justify-items:center;gap:var(--s-4);padding:var(--s-8);text-align:center}
.auth-orbe{width:88px;height:88px}
.auth-frase{max-width:18ch;font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em;line-height:1.25}
/* só a frase e uma linha: lista de vantagens aqui era ruído pra quem só quer entrar (o dono pediu pra tirar) */
.auth-nota{max-width:30ch;color:var(--ink-3);font-size:var(--t-sm);line-height:1.5;text-wrap:balance}
@media (max-width:960px){
  .auth{grid-template-columns:1fr;max-width:460px;min-height:0}
  .auth-arte{display:none}
  .auth-lado{padding:var(--s-8) var(--s-6)}
}
@media (max-width:520px){.conta-pg{padding-top:var(--s-6)}.auth{border:0;background:none}.auth-lado{padding:var(--s-4) 0}}

.seg2{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--btn-2)}
.seg2 button{min-height:36px;border:0;border-radius:6px;background:none;color:var(--ink-2);font-size:var(--t-sm);font-weight:500;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.seg2 button:hover{color:var(--ink)}
.seg2 button[aria-selected="true"]{background:var(--surface-3);color:var(--ink)}
@media (pointer:coarse){.seg2 button{min-height:44px}}
.conta-form{display:grid;gap:var(--s-4)}
.fld{display:grid;gap:6px}
.fld label{font-size:var(--t-sm);font-weight:500}
.fld .campo{width:100%}
.fld .campo[aria-invalid="true"]{border-color:var(--warn)}
.fld-erro{color:var(--warn);font-size:var(--t-xs);line-height:1.4}
.fld-erro:empty{display:none}
.fld-ok{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-size:var(--t-xs)}
.fld-ok svg{width:13px;height:13px}
.caps{color:var(--warn);font-size:var(--t-xs)}
.campo-cod{font-family:var(--font-mono);letter-spacing:.06em}
.campo-senha{position:relative}
.campo-senha .campo{padding-right:48px}
.olho{position:absolute;top:0;right:0;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-3)}
.olho:hover{color:var(--ink)}
.olho svg{width:17px;height:17px}
.forca{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:2px}
.forca i{height:3px;border-radius:var(--r-pill);background:var(--surface-3);transition:background var(--dur) var(--ease)}
.forca[data-n="1"] i:nth-child(1){background:var(--warn)}
.forca[data-n="2"] i:nth-child(-n+2){background:var(--accent)}
.forca[data-n="3"] i{background:var(--ok)}
.dica{color:var(--ink-3);font-size:var(--t-xs);line-height:1.45}
.btn-largo{width:100%}
.btn.girando{position:relative;opacity:.85}
.btn.girando::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:gira .7s linear infinite}
.auth-pe{color:var(--ink-3);font-size:var(--t-sm);text-align:center}
.conta-msg{padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);background:var(--warn-soft);color:var(--warn);font-size:var(--t-sm)}
.conta-msg:empty{display:none}
/* tela de entrar (2026-10-27, no jeito dos apps grandes): título no meio, um cartão só com Google, e-mail e
   "Continuar com e-mail"; os passos (código, convite, senha) trocam dentro do mesmo cartão */
.a2{display:grid;justify-items:center;gap:var(--s-3);width:100%;max-width:420px;margin:var(--s-12) auto var(--s-16);padding:0 var(--s-4);text-align:center;animation:sobe var(--dur-slow) var(--ease) both}
.a2-orbe{width:52px;height:52px;margin-bottom:var(--s-2)}
.a2 h1{font-size:clamp(30px,5vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.a2>.auth-sub:empty{display:none}
.a2-card{display:grid;gap:var(--s-4);width:100%;margin-top:var(--s-4);padding:var(--s-6);border:1px solid var(--line);border-radius:20px;background:var(--surface-1);text-align:left}
.a2-passo{display:grid;gap:var(--s-4)}
.a2-card .conta-form{gap:var(--s-3)}
.a2-card .campo{min-height:46px}
.a2-card .btn-largo{min-height:46px}
.a2-txt{color:var(--ink-2);font-size:var(--t-sm);line-height:1.5}
.a2-txt b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.a2-cod{text-align:center;font:600 24px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.4em;padding-left:.4em}
.a2-links{display:flex;justify-content:center;gap:var(--s-2);color:var(--ink-3);font-size:var(--t-sm)}
.a2-link{border:0;background:none;padding:0;color:var(--ink-2);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.a2-link:hover{color:var(--ink)}
.a2-link:disabled{opacity:.5;cursor:default}
.a2-legal{color:var(--ink-3);font-size:var(--t-xs);line-height:1.5;text-align:center}
.a2-legal a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.a2-outra{display:inline-flex;align-items:center;gap:var(--s-1);margin-top:var(--s-4);border:0;background:none;color:var(--ink-2);font:inherit;font-size:var(--t-sm);cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}
.a2-outra:hover{color:var(--ink)}
.a2-outra svg{width:14px;height:14px}
.a2 .seg2{margin-bottom:var(--s-1)}
@media (max-width:480px){.a2{margin-top:var(--s-8)}.a2-card{padding:var(--s-4)}}
/* entrar com o Google: o botão vem antes do usuário e senha, com o "ou" no meio (como os apps grandes fazem) */
.g-bloco{display:grid;gap:var(--s-4)}
.btn-google{gap:var(--s-3);font-weight:500}
.btn-google svg{width:18px;height:18px}
.g-ou{display:flex;align-items:center;gap:var(--s-3);color:var(--ink-3);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em}
.g-ou::before,.g-ou::after{content:"";flex:1;height:1px;background:var(--line)}
.g-tela{margin:var(--s-12) auto}
.g-tela .auth-sub b{color:var(--ink);font-weight:600}
.g-marca{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--surface-1);border:1px solid var(--line)}
.g-marca svg{width:26px;height:26px}
.g-form{width:100%;text-align:left}
.g-acoes{display:flex;justify-content:center;gap:var(--s-3);margin-top:var(--s-4)}
#gaPergunta,#gaPronto,.g-col{display:grid;justify-items:center;gap:var(--s-2);width:100%}

/* boas-vindas */
.bemvindo{display:grid;justify-items:center;gap:var(--s-4);width:100%;max-width:460px;padding:var(--s-12) var(--s-8);text-align:center;animation:sobe var(--dur-slow) var(--ease) both}
.bemvindo-orbe{width:72px;height:72px}
.etapas{display:grid;gap:var(--s-2);width:100%;margin:var(--s-2) 0;padding:0;list-style:none;counter-reset:e;text-align:left}
.etapas li{display:grid;grid-template-columns:28px 1fr;column-gap:var(--s-3);align-items:center;padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);counter-increment:e}
.etapas li::before{content:counter(e);grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);font-size:var(--t-sm);font-weight:600}
.etapas li.feito::before{content:"✓";background:var(--ok-soft);color:var(--ok)}
.etapas b{font-size:var(--t-md);font-weight:600}
.etapas small{color:var(--ink-3);font-size:var(--t-xs)}
.bemvindo .btn svg{width:16px;height:16px}

/* conta */
.painel-eu{display:grid;gap:var(--s-4);width:100%;max-width:760px;animation:sobe var(--dur-slow) var(--ease) both}
.eu-topo{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-2)}
.eu-quem{flex:1;min-width:0}
.eu-quem p{margin-top:2px;color:var(--ink-3);font-size:var(--t-sm)}
.painel-eu h2{margin-bottom:var(--s-4);font-size:var(--t-lg);font-weight:600}
.eu-baixar{display:flex;align-items:center;gap:var(--s-6)}
.eu-baixar-txt{flex:1}
.eu-baixar h2{margin-bottom:var(--s-1)}
.eu-baixar p{color:var(--ink-2);font-size:var(--t-md)}
.eu-baixar .dica{display:block;margin-top:var(--s-1)}
.eu-baixar .btn svg{width:16px;height:16px}
@media (max-width:620px){.eu-baixar{flex-direction:column;align-items:stretch}}
/* seções como numa página de configurações: título pequeno fora, cartão com linhas dentro. Antes eram cartões
   lado a lado que esticavam até a altura do vizinho (Seus PCs ficava com um vazio enorme) */
.eu-sec{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.eu-sec-h{display:flex;align-items:baseline;gap:var(--s-2)}
.painel-eu .eu-sec-h h2{margin:0;font-size:var(--t-md);font-weight:600}
.eu-sec-h span{font-size:var(--t-sm);color:var(--ink-3)}
.eu-sec .dica{margin:0}
/* recursos numa grade alinhada (fio de 1px entre as casas); a nuvem de pílulas quebrava torta */
.liberado{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;overflow:hidden;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md)}
.liberado li{display:flex;align-items:center;gap:var(--s-2);min-width:0;min-height:48px;padding:0 var(--s-4);background:var(--surface-2);color:var(--ink-3);font-size:var(--t-sm)}
.liberado li svg{flex:none;width:14px;height:14px}
.liberado li i{flex:none;width:14px;height:2px;border-radius:2px;background:var(--line-2)}
.liberado li.on{color:var(--ink)}
.liberado li.on svg{color:var(--ok)}
.liberado li span:first-of-type{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:760px){.liberado{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.liberado{grid-template-columns:minmax(0,1fr)}}
.pcs{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.pcs li{display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-3) var(--s-4);border-top:1px solid var(--line)}
.pcs li:first-child{border-top:0}
.pc-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface-1);color:var(--ink-2)}
.pc-ic svg{width:17px;height:17px}
.pc-txt{flex:1;min-width:0}
.pc-txt b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500;font-size:var(--t-md)}
.pc-txt small{color:var(--ink-3);font-size:var(--t-xs)}
.pcs li.vazio{color:var(--ink-3);font-size:var(--t-sm)}
.pcs [data-confirma="1"]{border-color:var(--warn);color:var(--warn)}
.eu-seg{padding:var(--s-1) var(--s-4);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.seg-linha{display:flex;align-items:center;gap:var(--s-3);min-height:40px}
.seg-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface-1);color:var(--ink-2)}
.seg-ic svg{width:17px;height:17px}
.seg-txt{flex:1;min-width:0}
.seg-txt b{display:block;font-weight:500;font-size:var(--t-md)}
.seg-txt small{color:var(--ink-3);font-size:var(--t-xs)}
/* Segurança: um bloco por item (e-mail, Google, senha), com divisória entre eles. Aberto, o formulário fica embaixo
   da linha, alinhado com o texto (36 px do ícone + 12 de vão), e os botões no tamanho dos da linha */
.seg-item{padding:var(--s-3) 0}
.seg-item+.seg-item{border-top:1px solid var(--line)}
.eu-seg .seg-ic svg{width:18px;height:18px}
.seg-form{display:grid;gap:var(--s-3);max-width:420px;margin:var(--s-4) 0 var(--s-1) 48px}
.seg-acoes{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-1)}
.seg-item.aberto .seg-txt small{color:var(--ink-2)}
.fld-link{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.fld-link:hover{color:var(--ink)}
.fld-link[aria-disabled]{opacity:.5;pointer-events:none}
@media (max-width:560px){.seg-form{margin-left:0;max-width:none}}

/* 404 */
.pg-404 .conta-pg{place-items:center}
.nada{display:grid;justify-items:center;gap:var(--s-4);text-align:center}
.nada .orbe{width:96px;height:96px}
.nada p{color:var(--ink-2)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .orbe{--lg-off:none}
  .js .revela{opacity:1;transform:none}
  .j3d{transform:none;opacity:1}
  .tela{transform:none}
}

/* ---------------------------------------------------------------- Privacidade e Termos (/privacidade, /termos) */
.pg-doc .nav-volta{margin-left:auto}
.doc{max-width:720px;margin:0 auto;padding:var(--s-12) var(--s-4) var(--s-8);color:var(--ink-2);font-size:var(--t-read);line-height:1.7}
.doc-k{color:var(--accent);font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.doc h1{margin-top:var(--s-2);color:var(--ink);font-size:clamp(32px,5vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.doc-data{margin-top:var(--s-3);color:var(--ink-3);font-size:var(--t-sm)}
.doc-resumo{margin:var(--s-8) 0 var(--s-4);padding:var(--s-4) var(--s-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-1);color:var(--ink)}
.doc-resumo b{font-weight:600}
.doc h2{margin:var(--s-12) 0 var(--s-3);color:var(--ink);font-size:var(--t-xl);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.doc p+p{margin-top:var(--s-3)}
.doc ul{display:grid;gap:var(--s-2);margin:var(--s-3) 0;padding-left:var(--s-6)}
.doc li::marker{color:var(--ink-3)}
.doc b{color:var(--ink);font-weight:600}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.doc a:hover{text-decoration-color:currentColor}
.doc-pe{margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid var(--line);color:var(--ink-3);font-size:var(--t-sm)}
.pg-doc .rodape{margin-top:var(--s-8)}
.pg-doc .rodape-fino a{margin:0 2px}
/* o nome da conta agora é o e-mail: longo, então corta no topo e quebra no título em vez de estourar */
.nav-usuario #navNome{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eu-quem{min-width:0}
.eu-quem h1{overflow-wrap:anywhere}
@media (max-width:560px){.nav-usuario #navNome{max-width:120px}}

/* ---------------------------------------------------------------- conta como página de configurações (2026-10-27)
   cabeçalho com a pessoa em cima; embaixo, o menu das seções (fixo ao rolar) e o conteúdo, cada seção com título e
   uma frase do que ela é. No celular o menu vira uma faixa rolável em cima */
.painel-eu{max-width:1000px}
.eu-topo{padding-bottom:var(--s-6);margin-bottom:var(--s-4);border-bottom:1px solid var(--line)}
.eu-grade{display:grid;grid-template-columns:184px minmax(0,1fr);gap:var(--s-12);align-items:start}
.eu-nav{position:sticky;top:calc(var(--nav-h) + var(--s-6));display:grid;gap:2px}
.eu-nav a{display:flex;align-items:center;min-height:36px;padding:0 var(--s-3);border-radius:var(--r-sm);color:var(--ink-3);font-size:var(--t-sm);font-weight:500;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.eu-nav a:hover{color:var(--ink);background:var(--hover)}
.eu-nav a.on{color:var(--ink);background:var(--surface-2)}
.eu-conteudo{display:grid;gap:var(--s-12);min-width:0}
.eu-conteudo .eu-sec{margin-top:0;scroll-margin-top:calc(var(--nav-h) + var(--s-6))}
.painel-eu .eu-conteudo .eu-sec-h h2{font-size:var(--t-lg)}
.eu-sec-d{margin:-4px 0 var(--s-1);color:var(--ink-3);font-size:var(--t-sm);line-height:1.5}
@media (max-width:860px){
  .eu-grade{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .eu-nav{top:var(--nav-h);z-index:5;display:flex;gap:var(--s-1);overflow-x:auto;padding:var(--s-2) 0;background:var(--canvas);scrollbar-width:none}
  .eu-nav::-webkit-scrollbar{display:none}
  .eu-nav a{flex:none}
  .eu-conteudo{gap:var(--s-8)}
}
/* celular: a faixa rolável do menu não pode alargar a página (sem min-width:0 o conteúdo vazava pra direita), e o
   e-mail ganha a linha inteira, com os botões embaixo */
.eu-grade,.eu-nav{min-width:0;max-width:100%}
@media (max-width:600px){
  .eu-topo{flex-wrap:wrap}
  .eu-quem{flex:1 1 calc(100% - 72px)}
  .eu-quem h1{font-size:var(--t-xl)}
  .eu-topo .btn{flex:1}
}
.eu-conteudo{grid-template-columns:minmax(0,1fr)}
.eu-conteudo .eu-sec{min-width:0}

/* conta em coluna única (o menu lateral saiu: 4 seções não pediam menu) e Recursos em etiquetas: liberado em claro,
   desligado apagado e riscado. Uma tabela de 9 quadradinhos só ocupava espaço quando estava tudo liberado */
.painel-eu{max-width:760px}
.eu-grade{display:block}
.eu-nav{display:none}
.liberado{display:flex;flex-wrap:wrap;gap:var(--s-2);grid-template-columns:none;overflow:visible;border:0;border-radius:0;background:none}
.liberado li{min-height:34px;padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-2)}
.liberado li:not(.on){background:none;border-style:dashed;color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line-2)}
.liberado li .beta{margin-left:2px}

/* tela de entrar com cara de Vortex (2026-10-27): formulário alinhado à esquerda e a arte do site do lado (o funil
   que nasce da orbe), num painel só. O cartão centralizado de antes lembrava demais o do Claude */
.a2-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1040px;min-height:560px;margin:var(--s-8) auto var(--s-12);
  padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface-1);overflow:hidden;text-align:left;justify-items:stretch}
.a2-lado{display:flex;flex-direction:column;justify-content:center;gap:var(--s-3);padding:var(--s-12)}
.a2-split h1{font-size:clamp(28px,3.4vw,36px);letter-spacing:-.03em}
.a2-split .auth-sub{color:var(--ink-2)}
.a2-split .a2-card{margin-top:var(--s-4);padding:0;border:0;background:none;border-radius:0}
.a2-split .a2-outra{align-self:flex-start;margin-top:var(--s-2)}
.a2-split .a2-legal{text-align:left}
.a2-split .auth-arte{border-left:1px solid var(--line)}
@media (max-width:960px){
  .a2-split{grid-template-columns:minmax(0,1fr);max-width:480px;min-height:0}
  .a2-split .auth-arte{display:none}
  .a2-lado{padding:var(--s-8) var(--s-6)}
}
@media (max-width:480px){.a2-split{border:0;background:none;margin-top:var(--s-4)}.a2-lado{padding:var(--s-4) 0}}
.a2-lado>.auth-sub:empty{display:none}

/* Recursos liberados: um cartão com a grade dos recursos, cada um com o ícone na cor do assunto. Desligado fica
   apagado com "desligado" embaixo (o ✓ em todos não dizia nada quando estava tudo liberado) */
.liberado{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-1);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.liberado li{display:flex;align-items:center;gap:var(--s-3);min-height:52px;padding:var(--s-2);border:0;border-radius:var(--r-sm);background:none;color:var(--ink);text-decoration:none}
.liberado li:not(.on){background:none;border:0;text-decoration:none;opacity:.55}
.rec-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:var(--r-sm)}
.rec-ic svg{width:17px;height:17px}
.liberado li:not(.on) .rec-ic{background:var(--surface-3);color:var(--ink-3)}
.rec-t{display:flex;flex-direction:column;min-width:0}
.rec-t b{font-size:var(--t-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-t small{font-size:var(--t-xs);color:var(--ink-3)}
.liberado .beta{margin-left:4px;vertical-align:1px}
@media (max-width:720px){.liberado{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.liberado{grid-template-columns:minmax(0,1fr)}}