@font-face{font-family:"Instrument Sans";src:url(/fontes/InstrumentSans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fontes/InstrumentSans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fontes/GeistMono-400.woff2) format("woff2");font-weight:400;font-display:swap}

/* ===== 1. TOKENS: os mesmos do app (aiongestao-main, src/index.css, feature/rebrand-agcy, 13/10/2026).
   Violetas e degradê iguais ao pacote do DS; os neutros do app puxam para o violeta da marca ===== */
:root, [data-theme="dark"] {
  --bg: #0E0D12; --surface: #17161D; --surface-raised: #23212B; --surface-sunken: #0A090D;
  --line: #2B2833; --line-strong: #6B6580;
  --ink: #EEECF3; --ink-muted: #A7A2B5; --ink-subtle: #7F7990;
  --violet: #8057E3; --violet-hover: #6E45D6; --violet-text: #A98DF6; --on-violet: #FFFFFF; --violet-soft: rgba(128, 87, 227, 0.22);
  --logo-from: #8057E3; --logo-to: #C3AEFB;
  --gradient-brand: linear-gradient(90deg, #8057E3 0%, #C3AEFB 100%);
  --gradient-highlight: linear-gradient(135deg, #6E45D6 0%, #8057E3 100%);
  --green: #22C55E; --green-text: #4ADE80; --green-soft: rgba(34, 197, 94, 0.12);
  --yellow: #EAB308; --yellow-text: #FACC15; --yellow-soft: rgba(234, 179, 8, 0.12);
  --red: #DC2626; --red-text: #F87171; --red-soft: rgba(239, 68, 68, 0.12); --on-red: #FFFFFF;
  --focus: #A98DF6;
  --chart-1: var(--violet); --chart-2: #8B84A3; --chart-3: #4E4862; --chart-muted: #2E2A3A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 8px 24px rgba(0,0,0,0.5); --shadow-lg: 0 24px 64px rgba(0,0,0,0.6);
}
[data-theme="light"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-raised: #EEEEF0; --surface-sunken: #F6F6F7;
  --line: #E6E0F5; --line-strong: #857CA6;
  --ink: #1A1625; --ink-muted: #575070; --ink-subtle: #857CA6;
  --violet: #8057E3; --violet-hover: #6E45D6; --violet-text: #6B42D6; --on-violet: #FFFFFF; --violet-soft: #E9E2FB;
  --logo-from: #5B33C9; --logo-to: #9A78F0;
  --gradient-brand: linear-gradient(90deg, #5B33C9 0%, #9A78F0 100%);
  --gradient-highlight: linear-gradient(135deg, #6E45D6 0%, #8057E3 100%);
  --green: #16A34A; --green-text: #14763A; --green-soft: rgba(22, 163, 74, 0.10);
  --yellow: #CA8A04; --yellow-text: #975A06; --yellow-soft: rgba(202, 138, 4, 0.10);
  --red: #DC2626; --red-text: #C42222; --red-soft: rgba(220, 38, 38, 0.08); --on-red: #FFFFFF;
  --focus: #6B42D6;
  --chart-1: var(--violet); --chart-2: #8B80B3; --chart-3: #CFC6EE; --chart-muted: #E4DDF8;
  --shadow-sm: 0 1px 2px rgba(64,40,140,0.08); --shadow-md: 0 8px 24px rgba(64,40,140,0.10); --shadow-lg: 0 24px 64px rgba(64,40,140,0.14);
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 999px;
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --nav-h: 72px;
  /* entrada padrão do agencyflw (700ms) trazida para o teto de 600ms */
  --ease-out: cubic-bezier(0, 0, .2, 1);
}

/* ===== 2. COMPONENTES (bundle.css do DS) ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--ink);font-size:15px;line-height:22px;-webkit-font-smoothing:antialiased;overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[data-theme]{background:var(--bg);color:var(--ink)}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
.ag-overline{font-size:11px;line-height:16px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.num{font-variant-numeric:tabular-nums}
:where(button,a,input,select,summary,[role="tab"],[role="switch"],.track):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ag-btn{font:inherit;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.ag-btn-md{height:40px;padding:0 var(--space-4);font-size:14px}
.ag-btn-lg{height:52px;padding:0 var(--space-6);font-size:16px;border-radius:var(--radius-lg)}
.ag-btn-primary{background:var(--violet);color:var(--on-violet)}
.ag-btn-primary:hover{background:var(--violet-hover)}
.ag-btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.ag-btn-secondary:hover{background:var(--surface-raised);border-color:var(--ink-muted)}
.ag-btn-inverse{background:var(--ink);color:var(--bg)}
.ag-btn:disabled{opacity:.45;cursor:not-allowed}
.ag-btn .ic{color:currentColor}
.ag-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--space-2);border-radius:var(--radius-full);font-size:12px;font-weight:500;line-height:1;white-space:nowrap;background:var(--surface-sunken);color:var(--ink-muted);border:1px solid var(--line)}
.ag-badge-violet{background:transparent;color:var(--violet-text);border-color:var(--line)}
.ag-badge-green{background:var(--green-soft);color:var(--green-text);border-color:transparent}
.ag-badge-yellow{background:var(--yellow-soft);color:var(--yellow-text);border-color:transparent}
.ag-badge-red{background:var(--red-soft);color:var(--red-text);border-color:transparent}
.ag-badge-solid.ag-badge-violet{background:var(--violet);color:var(--on-violet);border-color:transparent}
.ag-avatar{display:inline-grid;place-items:center;border-radius:50%;background:var(--surface-raised);color:var(--ink-muted);border:1px solid var(--line);font-weight:500;flex:none;font-size:11px}
.ag-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);min-width:0}
.ag-gradient-text{background:linear-gradient(90deg,var(--logo-from),var(--logo-to));-webkit-background-clip:text;background-clip:text;color:transparent}
.ag-toggle-track{width:44px;height:26px;border-radius:var(--radius-full);border:1px solid var(--line-strong);background:var(--surface-sunken);padding:3px;cursor:pointer;transition:background-color .15s,border-color .15s}
.ag-toggle-thumb{display:block;width:18px;height:18px;border-radius:50%;background:var(--ink-muted);transition:transform .15s,background-color .15s}
.ag-toggle-track[aria-checked="true"]{background:var(--violet);border-color:var(--violet)}
.ag-toggle-track[aria-checked="true"] .ag-toggle-thumb{transform:translateX(18px);background:var(--on-violet)}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-muted)}
.ic-16{width:16px;height:16px}.ic-20{width:20px;height:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== 3. PÁGINA ===== */
.display-xl{font-size:clamp(40px,6vw,68px);line-height:1.06;letter-spacing:-.035em}
.display-lg{font-size:clamp(32px,4.2vw,50px);line-height:1.1;letter-spacing:-.03em}
.heading-1{font-size:32px;line-height:40px;letter-spacing:-.02em}
.heading-2{font-size:24px;line-height:32px;letter-spacing:-.015em}
.heading-3{font-size:18px;line-height:26px;font-weight:500;letter-spacing:-.01em}
.body-lg{font-size:17px;line-height:27px;color:var(--ink-muted)}
.body-lg b{font-weight:500;color:var(--ink)}
.muted{color:var(--ink-muted)}
.hint{font-size:12px;line-height:16px;color:var(--ink-muted)}
.hl{color:var(--violet-text)}            /* a palavra em violeta de cada título (agencyflw) */
.ph{font-family:var(--font-mono);font-size:.85em;color:var(--violet-text)}   /* placeholder: número ou nome que o João preenche */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--space-8)}
@media(max-width:760px){.wrap{padding:0 var(--space-4)}}
.sec{padding-block:var(--space-24)}
@media(max-width:760px){.sec{padding-block:var(--space-16)}}
.alt{background:var(--surface-sunken)}
[data-theme="dark"].alt{background:var(--bg)}
.head{display:grid;gap:var(--space-4);margin-bottom:var(--space-12);max-width:780px}
.head.center{text-align:center;margin-inline:auto;justify-items:center}
.head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-8);margin-bottom:var(--space-12)}
.head-row .head{margin:0}
@media(max-width:900px){.head-row{flex-direction:column;gap:var(--space-6)}}
.pilula{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--surface);font-size:13px}
.ping{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
@media(prefers-reduced-motion:no-preference){.ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
section[id],header[id]{scroll-margin-top:var(--nav-h)}
/* grade fina de fundo do agencyflw (bg-hero-surface), em linhas neutras */
.grade-fundo{position:relative;isolation:isolate}
.grade-fundo::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 80%);opacity:.6;pointer-events:none}

/* entrada de seção (agencyflw): opacity + 20px, 500ms, cubic-bezier(0,0,.2,1), uma vez */
@media(prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:var(--d,0ms)}
  .js .rv.in{opacity:1;transform:none}
  .js .sem-anim,.js .sem-anim *{transition:none!important;animation:none!important}
}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-12px) rotate(var(--rot,0deg))}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes sobe{to{transform:translateY(-50%)}}
@keyframes troca{from{opacity:0;transform:translateY(4px)}}


/* menu flutuante (como o do AION Tools): cartão arredondado e translúcido, 12px abaixo do topo */
.nav{position:sticky;top:12px;z-index:50;margin-top:12px;padding-inline:var(--space-4)}
.nav .wrap{display:flex;align-items:center;gap:var(--space-8);height:60px;max-width:1120px;padding-inline:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:var(--shadow-md)}
.nav .menu-bt{display:none;width:40px;height:40px;border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink);cursor:pointer;place-items:center}
.nav .menu-bt:hover{background:var(--surface-raised)}
.nav .menu-m{display:none}
@media(max-width:860px){.nav .menu-bt{display:grid}.nav .nav-cta .ag-btn{display:none}
  .nav .menu-m.aberto{display:grid;gap:2px;max-width:1120px;margin:8px auto 0;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-md)}
  .nav .menu-m a{padding:12px;border-radius:var(--radius-md);color:var(--ink-muted);text-decoration:none;font-size:15px}
  .nav .menu-m a:hover{background:var(--surface-raised);color:var(--ink)}
  .nav .menu-m .ag-btn{margin-top:var(--space-2);color:var(--on-violet);justify-content:center}}
/* o logo se centra pelo corpo do "a" (altura-x), não pela caixa: g e y descem e o desenho sobe 7% */
.ag-logo{transform:translateY(7%)}
.nav .brand{display:flex}
.nav .brand img{height:34px;width:auto}
.nav-links{display:flex;gap:var(--space-6);margin-inline:auto}
.nav-links a{color:var(--ink-muted);text-decoration:none;font-size:14px;font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;gap:var(--space-2);align-items:center}
.nav-cta .entrar{color:var(--ink-muted);text-decoration:none;font-size:14px;font-weight:500;padding:0 var(--space-3)}
@media(max-width:860px){.nav-links{display:none}.nav-cta{margin-left:auto}}


/* wordmark grande: branco apagado que escurece da metade para baixo; no hover a cor da marca acende
   num círculo em volta do mouse (--mx/--my), sem piscar */
/* o wordmark é cortado na linha final: a caixa mostra só os 68% de cima das letras e as próprias letras
   (máscara, sem camada por cima) somem em degradê até a linha */
.rodape .wm-grande{position:relative;display:grid;align-items:start;overflow:hidden;aspect-ratio:310 / 84;margin-top:var(--space-12);--mx:50%;--my:50%;--r:0px;-webkit-mask-image:linear-gradient(to bottom,#000 25%,rgba(0,0,0,.35) 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 25%,rgba(0,0,0,.35) 70%,transparent 100%)}
.rodape .wm-grande + .copy{margin-top:0;border-top-color:var(--line-strong)}
.rodape .wm-grande img{grid-area:1/1;display:block;width:100%;height:auto}
.rodape .wm-grande .base{opacity:.16}
.rodape .wm-grande .acesa{-webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0,rgba(0,0,0,.6) 45%,transparent 100%);mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0,rgba(0,0,0,.6) 45%,transparent 100%);transition:--r .5s var(--ease-out)}
@property --r{syntax:"<length>";inherits:true;initial-value:0px}
.rodape .wm-grande:hover{--r:260px}
.rodape{overflow:hidden;padding-block:var(--space-16) var(--space-6);font-size:14px;color:var(--ink-muted);border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--space-8)}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.fgrid > div:first-child{grid-column:1/-1}}
.fgrid h4{margin-bottom:var(--space-3)}
.fgrid a{display:block;text-decoration:none;padding:4px 0}.fgrid a:hover{color:var(--ink)}
.fgrid img{height:40px;width:auto;margin-bottom:var(--space-4)}
.redes{display:flex;gap:var(--space-4);margin-top:var(--space-4)}
.copy{margin-top:var(--space-12);padding-top:var(--space-5);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px}


/* ===== blog e ferramentas ===== */
.pg{padding-block:var(--space-16) var(--space-24)}
.migalha{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink-muted);margin-bottom:var(--space-6)}
.migalha a{color:var(--ink-muted);text-decoration:none}.migalha a:hover{color:var(--ink)}
.pg-head{max-width:760px;display:grid;gap:var(--space-4);margin-bottom:var(--space-12)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card .ag-badge,.pg-head .ag-badge{justify-self:start}
.card{display:grid;gap:var(--space-3);align-content:start;padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--violet);transform:translateY(-2px)}
.card h2,.card h3{font-size:19px;line-height:26px;font-weight:500;letter-spacing:-.01em}
.card p{color:var(--ink-muted);font-size:14px;line-height:21px}
.card .mais{color:var(--violet-text);font-size:14px;font-weight:500}
.artigo{max-width:720px}
.artigo h1{margin-bottom:var(--space-4)}
.artigo .meta{color:var(--ink-muted);font-size:14px;margin-bottom:var(--space-10)}
.texto{font-size:17px;line-height:29px}
.texto p,.texto ul{margin:0 0 var(--space-5)}
.texto h2{font-size:26px;line-height:34px;letter-spacing:-.015em;margin:var(--space-10) 0 var(--space-4)}
.texto ul{padding-left:22px}.texto li{margin-bottom:8px}
.texto a:not(.ag-btn){color:var(--violet-text)}
.tool-out .ag-btn{white-space:normal;height:auto;min-height:40px;padding-block:8px;text-align:center}
.cta-box{margin-top:var(--space-16);padding:var(--space-8);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);display:grid;gap:var(--space-4);justify-items:start}
.relac{margin-top:var(--space-16)}
.relac > h2{font-size:22px;margin-bottom:var(--space-5)}
.tool{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-12)}
@media(max-width:860px){.tool{grid-template-columns:1fr}}
.tool-in,.tool-out{padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--surface);display:grid;gap:var(--space-4);align-content:start}
.tool label{display:grid;gap:6px;font-size:14px;font-weight:500}
.tool input:not([type=checkbox]),.tool textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--bg);color:var(--ink)}
.tool input:focus,.tool textarea:focus{outline:2px solid var(--focus);outline-offset:1px}
.tool fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}.tool legend{font-size:14px;font-weight:500;margin-bottom:6px}
.tool .chk{display:flex;gap:8px;align-items:center;font-weight:400}.tool .chk small{color:var(--ink-muted)}
.tool .link{font-family:var(--font-mono);font-size:14px;word-break:break-all;padding:12px;border-radius:var(--radius-md);background:var(--surface-sunken)}
.tool .big{font-size:clamp(36px,5vw,52px);line-height:1.05;letter-spacing:-.03em;color:var(--violet-text);font-variant-numeric:tabular-nums}
.tool .conta{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14px}
.tool .conta li{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px}
.tool .conta b{font-weight:500;font-variant-numeric:tabular-nums}
.tool-acts{display:flex;gap:var(--space-2);flex-wrap:wrap}
.nota{font-size:12px;color:var(--ink-muted)}