/* Talko LPs · design system v1 (7/out/2026)
   Fonte da verdade visual: showcase/index.html. Tokens em docs/02-design-system.md. */

:root{
  --color-primary:#302296;--color-primary-hover:#261B7A;--color-ink:#0F1A33;
  --color-accent:#D7FF31;--color-accent-hover:#C8F01F;
  --color-bg:#FFFFFF;--color-surface:#F2F5F9;--color-card-tint:#E8EEF5;
  --color-text:#3F4A5E;--color-muted:#5B6578;--color-border:#DDE4EE;
  --color-success:#1F9D55;--color-error:#D64545;--color-whatsapp:#25D366;
  --color-dark-1:#0A1730;--color-dark-2:#0E2A47;--color-dark-3:#0F4650;
  --color-on-dark:#FFFFFF;--color-on-dark-muted:#C9D3E3;
  --gradient-dark:radial-gradient(120% 140% at 15% 10%,#0F4650 0%,#0E2A47 45%,#0A1730 100%);
  --font-heading:'Newsreader',Georgia,serif;--font-body:'DM Sans',system-ui,sans-serif;
  --container-max:1280px;--px:20px;--py:72px;
  --radius-btn:999px;--radius-card:20px;--radius-block:28px;--radius-icon:12px;
  --shadow-md:0 8px 24px rgba(15,26,51,.08);--shadow-lg:0 24px 64px rgba(10,23,48,.18);--shadow-cta:0 10px 24px rgba(48,34,150,.28);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width:1024px){:root{--px:80px;--py:128px}}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:17px;line-height:1.6}
@media (min-width:1024px){body{font-size:18px}}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-heading);font-weight:500;color:var(--color-ink);margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:var(--color-primary)}
sup{font-size:16px;line-height:0;vertical-align:super}
strong{color:var(--color-ink)}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--px)}
.section{padding:var(--py) 0}
.section--flush-top{padding-top:0}
[hidden]{display:none!important}

/* textos de seção */
.label{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:var(--color-ink)}
.label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 1px rgba(15,26,51,.15);flex:0 0 8px}
.h2{font-size:34px;line-height:1.08;margin-top:16px}
@media (min-width:1024px){.h2{font-size:54px}}
.h2 em,.hero h1 em{font-style:italic;font-weight:400;color:var(--color-primary)}
.lead{margin-top:16px;max-width:62ch}
.head-split{display:grid;gap:16px;align-items:end;margin-bottom:48px}
@media (min-width:1024px){.head-split{grid-template-columns:1.15fr .85fr;gap:64px;margin-bottom:56px}}
.head-center{text-align:center;max-width:860px;margin:0 auto 48px}
.head-center .lead{margin-left:auto;margin-right:auto}
.anchor{font-family:var(--font-heading);font-style:italic;font-size:24px;line-height:1.3;color:var(--color-primary);max-width:30ch}
@media (min-width:1024px){.anchor{font-size:28px}}
.anchor--center{text-align:center;margin:48px auto 0}
.note{font-size:16px;color:var(--color-muted)}
.prose p+p{margin-top:16px}
.center{text-align:center}
.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}

/* botões */
.btn{font-family:var(--font-body);font-size:17px;font-weight:600;min-height:52px;padding:12px 32px;border-radius:var(--radius-btn);border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;line-height:1.25;text-decoration:none;transition:transform .2s ease-out,box-shadow .2s ease-out,background-color .2s ease-out}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-cta);transform:translateY(-2px)}
.btn--accent{background:var(--color-accent);color:var(--color-ink)}
.btn--accent:hover{background:var(--color-accent-hover);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--color-ink);box-shadow:inset 0 0 0 1.5px var(--color-ink)}
.btn--ghost:hover{background:var(--color-surface)}
@media (max-width:640px){.btn--block-m{width:100%}}
.micro{margin-top:12px;font-size:16px;color:var(--color-muted)}

/* selos e pílulas */
.pill{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;border-radius:999px;padding:8px 16px;background:var(--color-card-tint);color:var(--color-ink)}
.pill--dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 1px rgba(15,26,51,.15)}
.pill--accent{background:var(--color-accent);font-weight:600}
.tag-ai{display:flex;width:fit-content;margin-bottom:6px;background:var(--color-accent);color:var(--color-ink);font-weight:600;border-radius:999px;padding:2px 12px;font-size:16px}

/* topo fixo */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.topbar.is-scrolled{border-bottom-color:var(--color-border)}
.topbar__in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}
@media (min-width:1024px){.topbar__in{height:80px}}
.topbar__logo img{height:28px;width:auto}
@media (min-width:1024px){.topbar__logo img{height:32px}}
.nav{display:none;gap:28px;align-items:center}
.nav a{color:var(--color-ink);text-decoration:none;font-size:16px;font-weight:500}
.nav a:hover{color:var(--color-primary)}
@media (min-width:1100px){.nav{display:flex}}
.topbar .btn{min-height:44px;padding:8px 20px;font-size:16px}
.cta-sm{display:none}
@media (max-width:520px){.cta-lg{display:none}.cta-sm{display:inline}.topbar .btn{padding:8px 18px}}

/* hero */
.hero{padding:56px 0 72px}
@media (min-width:1024px){.hero{padding:88px 0 112px}}
.hero__grid{display:grid;gap:48px;align-items:center}
@media (min-width:1024px){.hero__grid{grid-template-columns:1.1fr .9fr;gap:64px}}
.hero h1{font-size:42px;line-height:1.04;margin-top:24px}
@media (min-width:1024px){.hero h1{font-size:clamp(42px,4.6vw,68px)}}
.hero__sub{margin-top:24px;font-size:19px;max-width:56ch}
.hero__cta{margin-top:32px}

/* bloco escuro */
.dark{position:relative;isolation:isolate;overflow:hidden;background:url("../img/bg-areia-marinho.webp") center/cover no-repeat,var(--gradient-dark);border-radius:var(--radius-block);color:var(--color-on-dark-muted)}
.dark::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none;z-index:-1}
/* fundos de areia desfocada (imagens geradas; se não existirem, fica o gradiente) */
.dark.aurora,.final.dark{background:url("../img/bg-areia-limao.webp") center/cover no-repeat,var(--gradient-dark)}
.dark.band{background:url("../img/bg-areia-faixa.webp") center/cover no-repeat,var(--gradient-dark)}
.dark h2,.dark h3,.dark strong{color:#fff}
.dark .ui strong,.dark .mini strong,.dark .ui h3,.dark .sum-card strong,.dark .ex-sum strong,.dark .panel strong,.dark .panel-back strong,.dark .widget__body strong,.dark .qcard strong,.dark .card strong,.dark .coursepage strong{color:var(--color-ink)}
.stage{padding:32px 20px;display:grid;place-items:center}
@media (min-width:1024px){.stage{padding:48px}}
.stage--tall{min-height:420px}
.mock-caption{margin-top:16px;font-size:16px;color:var(--color-on-dark-muted);text-align:center}

/* celular com conversa (altura fixa: não empurra o layout durante a animação) */
.phone{width:100%;max-width:380px;background:#EFEAE2;border-radius:32px;box-shadow:var(--shadow-lg);overflow:hidden;border:8px solid #fff}
.phone__bar{background:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--color-border)}
.phone__avatar{width:40px;height:40px;border-radius:50%;background:var(--color-card-tint);display:grid;place-items:center;color:var(--color-primary);flex:0 0 40px}
.phone__who{font-size:16px;line-height:1.3;color:var(--color-ink);font-weight:600}
.phone__who small{display:block;font-weight:400;color:var(--color-muted);font-size:16px}
.phone__wa{margin-left:auto;color:var(--color-whatsapp)}
.chat{position:relative;padding:16px 12px 64px;display:flex;flex-direction:column;gap:10px;height:var(--chat-h,540px);overflow:hidden}
@media (max-width:420px){.chat{height:var(--chat-h-m,640px)}}
@media (max-width:374px){.chat{height:var(--chat-h-s,700px)}}
@media (max-width:340px){.chat{height:var(--chat-h-xs,760px)}}
.msg{max-width:86%;font-size:16px;line-height:1.45;padding:10px 14px;border-radius:16px;color:var(--color-ink);opacity:0;transform:translateY(8px);transition:opacity .35s ease-out,transform .35s ease-out}
.msg.show{opacity:1;transform:none}
.msg--in{align-self:flex-start;background:#fff;border:1px solid var(--color-border);border-top-left-radius:6px}
.msg--ai{align-self:flex-end;background:var(--color-card-tint);border-top-right-radius:6px}
.msg .time{display:block;font-size:16px;color:var(--color-muted);margin-top:2px}
.audio{display:flex;align-items:center;gap:10px}
.audio__wave{flex:1;height:24px;background:repeating-linear-gradient(90deg,var(--color-muted) 0 3px,transparent 3px 6px);opacity:.5;border-radius:4px;min-width:110px}
.typing{position:absolute;right:12px;bottom:16px;background:var(--color-card-tint);border-radius:16px;padding:12px 16px;display:flex;gap:5px;opacity:0;transition:opacity .2s}
.typing.show{opacity:1}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--color-muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
/* conversa longa: altura normal e rolagem automática até a última mensagem (data-follow) */
.chat[data-follow] .typing{position:static;align-self:flex-end;display:none;opacity:1}
.chat[data-follow] .typing.show{display:flex}
.chat[data-follow]{padding-bottom:20px;scrollbar-width:none}
.chat[data-follow]::-webkit-scrollbar{display:none}
.handoff{align-self:center;max-width:100%;background:var(--color-ink);color:#fff;border-radius:999px;padding:8px 16px;display:flex;align-items:center;gap:8px}.handoff iconify-icon,.handoff .tk-ic{color:var(--color-accent);flex:0 0 20px}
.example-label{display:inline-flex;margin-bottom:16px;font-size:16px;font-weight:500;color:var(--color-on-dark-muted)}

/* mockups de interface */
.ui{width:100%;max-width:560px;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:20px;color:var(--color-text);font-size:16px}
.ui__top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;color:var(--color-ink);margin-bottom:16px}
.chip{font-size:16px;font-weight:500;border-radius:999px;padding:2px 10px;background:var(--color-surface);color:var(--color-ink);white-space:nowrap}
.chip--ai{background:var(--color-accent)}
.rows{display:grid;gap:10px}
.row-item{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--color-border);border-radius:12px;padding:12px 14px}
.row-item strong{display:block}.row-item iconify-icon,.row-item .tk-ic{flex:0 0 28px;color:var(--color-primary)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0}
.kv dt{color:var(--color-muted)}
.kv dd{margin:0;color:var(--color-ink);font-weight:500}
.inbox{display:grid;gap:12px}
@media (min-width:640px){.inbox{grid-template-columns:150px 1fr}}
.inbox__tabs{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:640px){.inbox__tabs{flex-direction:column}}
.inbox__tab{border-radius:10px;padding:8px 12px;background:var(--color-surface);color:var(--color-ink);font-weight:500}
.inbox__tab--on{background:var(--color-card-tint);box-shadow:inset 3px 0 0 var(--color-accent)}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi{background:var(--color-surface);border-radius:12px;padding:14px}
.kpi b{display:block;font-family:var(--font-heading);font-weight:500;font-size:32px;line-height:1.1;color:var(--color-ink)}

/* mockup do widget de chat no site */
.widget{width:100%;max-width:360px;background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;position:relative;color:var(--color-ink)}
.widget__head{background:#2B3445;color:#fff;padding:18px 20px;display:flex;gap:12px;align-items:center}
.widget__head strong,.dark .widget__head strong{display:block;font-size:17px;color:#fff}
.widget__head span{font-size:16px;opacity:.85}
.widget__body{padding:16px;display:grid;gap:10px}
.widget__opt{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--color-border);border-radius:14px;padding:12px 16px;font-size:16px;color:var(--color-ink);font-weight:500}.widget__opt iconify-icon,.widget__opt .tk-ic{color:var(--color-primary)}

/* seção tingida com diagonal na base */
.tint{background:url("../img/bg-areia-clara.webp") center/cover no-repeat,var(--color-surface);clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),40% 100%,0 calc(100% - 64px));padding-bottom:calc(var(--py) + 48px)}

/* cards */
.grid2,.grid3,.grid4{display:grid;gap:16px}
@media (min-width:768px){.grid2{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}.grid4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid2,.grid3,.grid4{gap:24px}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border-radius:var(--radius-card);padding:24px;transition:transform .25s ease-out,box-shadow .25s ease-out}
@media (min-width:1024px){.card{padding:32px}}
.card--tint{background:var(--color-card-tint)}
.card--line{box-shadow:inset 0 0 0 1px var(--color-border)}
.card h3{font-size:24px;line-height:1.2;margin-top:24px}
@media (min-width:1024px){.card h3{font-size:28px}}
.card h3:first-child{margin-top:0}
.card p{margin-top:12px}
.icon-sq{width:56px;height:56px;border-radius:var(--radius-icon);background:var(--color-accent);display:grid;place-items:center;color:var(--color-primary);flex:0 0 56px}
.quote-card{background:var(--color-card-tint);border-radius:var(--radius-card);padding:28px;margin:0}
.quote-card blockquote{margin:0;font-family:var(--font-heading);font-style:italic;font-size:26px;line-height:1.3;color:var(--color-ink)}
@media (min-width:1024px){.quote-card blockquote{font-size:30px}}
.checks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}.checks iconify-icon,.checks .tk-ic{flex:0 0 24px;margin-top:3px;color:var(--color-success)}.dark .checks iconify-icon,.dark .checks .tk-ic{color:var(--color-accent)}
.dark .checks li{color:#fff}

/* mini cards escuros com interface (dia a dia) */
.feature{display:flex;flex-direction:column;gap:20px}
.feature .dark{aspect-ratio:1/1;display:grid;place-items:center;padding:24px}
.feature h3{font-size:24px}
.feature p{margin-top:8px}
.mini{width:100%;max-width:320px;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:16px;font-size:16px;color:var(--color-ink);display:grid;gap:10px}
.mini .msg{opacity:1;transform:none;max-width:100%}

/* linha do tempo (implantação) */
.steps{display:grid;gap:32px;position:relative}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:40px}.steps::before{content:"";position:absolute;left:0;right:0;top:32px;height:1px;background:var(--color-border)}}
.step{position:relative}
.step__num{font-family:var(--font-heading);font-size:64px;line-height:1;color:var(--color-primary);background:var(--color-bg);display:inline-block;padding-right:12px;position:relative}
.step h3{font-size:24px;margin-top:16px}
.step p{margin-top:8px}
.consult{margin-top:48px;background:var(--color-card-tint);border-radius:var(--radius-card);padding:24px;display:flex;gap:16px;align-items:flex-start}

/* abas (camadas do agente) */
.tabs{display:grid;gap:24px}
@media (min-width:1024px){.tabs{grid-template-columns:300px 1fr;gap:48px;align-items:start}}
.tablist{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--px) * -1);padding:0 var(--px) 4px}
.tablist::-webkit-scrollbar{display:none}
@media (min-width:1024px){.tablist{flex-direction:column;overflow:visible;margin:0;padding:0;position:sticky;top:112px}}
.tab{flex:0 0 auto;display:flex;align-items:center;gap:12px;background:none;border:1px solid var(--color-border);border-radius:999px;padding:10px 18px;min-height:48px;font:inherit;font-size:16px;font-weight:500;color:var(--color-muted);cursor:pointer;text-align:left;transition:background-color .2s,color .2s,border-color .2s}
@media (min-width:1024px){.tab{border-radius:14px;border-color:transparent;padding:14px 16px;font-size:18px}}
.tab:hover{color:var(--color-ink);background:var(--color-surface)}
.tab[aria-selected="true"]{color:var(--color-ink);background:var(--color-card-tint);border-color:var(--color-card-tint)}
.tab__n{font-family:var(--font-heading);font-size:20px;color:var(--color-primary)}
.panel h3{font-size:30px;line-height:1.15}
@media (min-width:1024px){.panel h3{font-size:36px}}
.panel__text{margin-top:12px;max-width:62ch}
.panel .dark{margin-top:28px}
.panel.enter{animation:fadein .3s ease-out}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* números */
.bignum{font-family:var(--font-heading);font-weight:400;font-size:96px;line-height:1;color:var(--color-primary);letter-spacing:-.03em}
@media (min-width:1024px){.bignum{font-size:168px}}
.stat{border-left:3px solid var(--color-accent);padding-left:24px}
.stat strong{font-family:var(--font-heading);font-weight:400;font-size:72px;line-height:1;color:var(--color-primary);display:block}
@media (min-width:1024px){.stat strong{font-size:96px}}
.stat .note{margin-top:8px}

/* faixa de logos */
/* marcas atendidas: carrossel infinito da direita para a esquerda (as peças se repetem pelo JS) */
.logos-rail{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logos{display:flex;gap:12px;width:max-content;animation:marquee 45s linear infinite}
@media (min-width:900px){.logos{gap:20px}}
.logos-rail:hover .logos{animation-play-state:paused}
.logos .logo-tile{flex:0 0 150px}
@media (min-width:900px){.logos .logo-tile{flex-basis:176px}}
.logo-tile{min-width:0;height:88px;display:grid;place-items:center;padding:12px}
.logo-tile img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1) contrast(1.2);opacity:.8;transition:filter .3s,opacity .3s}
.logo-tile img.logo--emblem{max-height:64px}
.logo-tile:hover img{filter:none;opacity:1}
.logos-label{text-align:center;font-size:18px;color:var(--color-ink);margin-bottom:24px}

/* integrações */
.band{padding:48px 0;overflow:hidden}
.marquee{display:flex;gap:20px;width:max-content;animation:marquee 40s linear infinite;padding:0 20px}
.band:hover .marquee{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.int-tile{width:152px;height:152px;background:rgba(255,255,255,.96);border-radius:20px;display:grid;place-items:center;align-content:center;gap:12px;color:var(--color-ink);font-weight:500;font-size:16px;flex:0 0 auto;text-align:center}.int-tile iconify-icon,.int-tile .tk-ic{font-size:44px}
.int-tile .int-img{width:96px;height:44px;object-fit:contain}

/* resultado */
.result-head{display:grid;gap:24px;align-items:end}
@media (min-width:1024px){.result-head{grid-template-columns:1fr 1fr;gap:64px}}
.cases{display:grid;gap:16px;margin-top:48px}
@media (min-width:900px){.cases{grid-template-columns:repeat(2,1fr);gap:24px}}
.case{border-radius:var(--radius-card);overflow:hidden;background:var(--color-card-tint);display:flex;flex-direction:column}
.case__body{padding:28px;display:grid;gap:16px}
.case__body blockquote{margin:0;font-family:var(--font-heading);font-size:22px;line-height:1.4;color:var(--color-ink)}
.who{display:flex;align-items:center;gap:14px}
.who img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 64px}
.who strong{display:block}
.who span{font-size:16px;color:var(--color-muted)}
.case__media{position:relative;aspect-ratio:4/3;margin-top:auto}
.case__media img,.case__media .ph{width:100%;height:100%;object-fit:cover}
.case__media figcaption{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--color-muted);font-size:16px;border-radius:999px;padding:2px 12px}

/* segmentos (para quem é) */
.seg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:768px){.seg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.seg{position:relative;display:block;border-radius:var(--radius-card);overflow:hidden;aspect-ratio:4/5;text-decoration:none;isolation:isolate;background:var(--gradient-dark)}
.seg img,.seg .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease-out;z-index:-2}
.seg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,23,48,.88) 0%,rgba(10,23,48,.2) 55%,transparent 80%);z-index:-1}
.seg:hover img{transform:scale(1.04)}
.seg .ph span{display:none}
.seg span{position:absolute;left:16px;right:16px;bottom:16px;font-family:var(--font-heading);font-size:20px;hyphens:none;overflow-wrap:normal;line-height:1.15;color:#fff;display:block}.seg span iconify-icon,.seg span .tk-ic{display:inline-block;vertical-align:-5px;margin-left:4px;color:var(--color-accent)}
@media (min-width:1024px){.seg span{font-size:21px}}
.split{display:grid;gap:40px}
@media (min-width:1024px){.split{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}

/* planos */
.plans{display:grid;gap:16px}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr);gap:20px}}
.plan{border-radius:var(--radius-card);padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:inset 0 0 0 1px var(--color-border);background:#fff}
.plan h3{font-size:26px}
.plan__for{color:var(--color-muted);font-size:16px}
.plan__price{font-family:var(--font-heading);font-size:44px;line-height:1;color:var(--color-ink)}
.plan__price small{font-family:var(--font-body);font-size:16px;color:var(--color-muted)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plan li{display:flex;gap:10px}.plan li iconify-icon,.plan li .tk-ic{color:var(--color-success);flex:0 0 22px;margin-top:3px}
.plan .btn{margin-top:auto;width:100%;padding:12px 10px;font-size:16px;white-space:nowrap}
.plan--rec{background:url("../img/bg-areia-marinho.webp") center/cover no-repeat,var(--gradient-dark);box-shadow:var(--shadow-lg);position:relative;isolation:isolate;overflow:hidden;color:var(--color-on-dark-muted)}
.plan--rec::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay;z-index:-1}
.plan--rec h3,.plan--rec .plan__price,.plan--rec li,.plan--rec strong{color:#fff}
.plan--rec .plan__for,.plan--rec .plan__price small{color:var(--color-on-dark-muted)}.plan--rec li iconify-icon,.plan--rec li .tk-ic{color:var(--color-accent)}
.plan--ent{background:var(--color-card-tint);box-shadow:none}
@media (max-width:767px){.plan--rec{order:-1}}
.plans-note{margin-top:32px;max-width:80ch}
/* faixas abaixo dos 3 planos: Enterprise e dúvida (mesmo formato) */
.plans-help{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--color-card-tint);border-radius:var(--radius-card);padding:20px 24px}
.plans-help p{flex:1 1 420px;max-width:72ch}
.plans-help .btn{flex:0 0 auto}
@media (max-width:640px){.plans-help .btn{width:100%}}
.plans-ent{margin-top:24px;background:#fff;box-shadow:inset 0 0 0 1px var(--color-border)}
.plans-ent strong{color:var(--color-ink)}
.plans-ent--rec{background:var(--gradient-dark);box-shadow:none;color:var(--color-on-dark-muted)}
.plans-ent--rec strong{color:#fff}
.plans-ent .pill{margin-bottom:8px}

/* perguntas frequentes */
.faq-grid{display:grid;gap:40px}
@media (min-width:1024px){.faq-grid{grid-template-columns:.8fr 1.2fr;gap:64px}}
.faq{border-top:1px solid var(--color-border)}
.faq__item{border-bottom:1px solid var(--color-border)}
.faq__q{width:100%;background:none;border:0;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;cursor:pointer;font-family:var(--font-heading);font-size:22px;color:var(--color-ink);min-height:44px}
@media (min-width:1024px){.faq__q{font-size:24px}}.faq__q iconify-icon,.faq__q .tk-ic{flex:0 0 24px;transition:transform .25s ease-out}.faq__q[aria-expanded="true"] iconify-icon,.faq__q[aria-expanded="true"] .tk-ic{transform:rotate(180deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}
.faq__a>div{overflow:hidden}
.faq__a p{padding-bottom:24px;max-width:64ch}
.faq__q[aria-expanded="true"]+.faq__a{grid-template-rows:1fr}

/* convite final (bloco escuro + foto) */
.final{display:grid;border-radius:var(--radius-block);overflow:hidden}
@media (min-width:1024px){.final{grid-template-columns:1fr 1fr}}
.final__text{padding:40px 24px}
@media (min-width:1024px){.final__text{padding:72px 64px}}
.final__text h2{font-size:36px;line-height:1.08}
@media (min-width:1024px){.final__text h2{font-size:54px}}
.final__text p{margin-top:16px}
.final__text .btn{margin-top:32px}
.final__text .micro{color:var(--color-on-dark-muted)}
.final__media{position:relative;min-height:280px;order:-1}
@media (min-width:1024px){.final__media{order:0;min-height:100%}}
.final__media img,.final__media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){.final__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,#0A1730 0%,rgba(10,23,48,.72) 12%,rgba(10,23,48,.25) 30%,transparent 50%),linear-gradient(to top,rgba(10,23,48,.35) 0%,transparent 28%)}}

/* imagem ainda não gerada: bloco provisório com o nome do arquivo */
.ph{background:var(--gradient-dark);color:var(--color-on-dark-muted);display:grid;place-items:center;text-align:center;padding:16px;font-size:16px}
.ph span{max-width:28ch}

/* rodapé */
.foot{padding:64px 0 0;border-top:1px solid var(--color-border);margin-top:var(--py);overflow:hidden}
.foot__top{display:grid;gap:24px;padding-bottom:40px;border-bottom:1px solid var(--color-border)}
@media (min-width:900px){.foot__top{grid-template-columns:auto 1fr auto;align-items:center;gap:48px}}
.foot__top>img{height:40px;width:auto}
.foot__cols{display:grid;gap:32px;padding:40px 0;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.foot__cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.foot__cols h3{font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--color-ink);letter-spacing:0}
.foot__cols ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.foot__cols a{color:var(--color-text);text-decoration:none;font-size:16px}
.foot__cols a:hover{color:var(--color-primary)}
.foot__cols li{font-size:16px}
.seals{display:flex;gap:12px}
.seal{width:84px;height:84px;border-radius:18px;background:var(--color-surface);display:grid;place-items:center;align-content:center;gap:6px;font-weight:600;color:var(--color-ink);font-size:16px;line-height:1}.seal iconify-icon,.seal .tk-ic{color:var(--color-primary)}
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 24px;padding:24px 0;border-top:1px solid var(--color-border);font-size:16px;color:var(--color-muted)}
.giant{position:relative;height:clamp(110px,20vw,280px)}
.giant img{position:absolute;left:50%;bottom:-18%;transform:translateX(-50%);width:min(1200px,96%);filter:blur(6px) grayscale(1);opacity:.14}

/* aviso flutuante */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--color-ink);color:#fff;border-radius:999px;padding:12px 20px;font-size:16px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .msg{opacity:1;transform:none}
  .chat[data-follow]{overflow-y:auto}
  .marquee{flex-wrap:wrap;width:auto;justify-content:center}
  .marquee [aria-hidden="true"]{display:none}
  .logos{flex-wrap:wrap;width:auto;justify-content:center}
  .logos [aria-hidden="true"]{display:none}
  .logos-rail{-webkit-mask-image:none;mask-image:none}
}

/* Consultoria Premium (adesão e setup inicial): bloco escuro depois dos planos, 7/out/2026 */
.cp{padding:28px 20px;display:grid;gap:40px}
@media (min-width:1024px){.cp{padding:72px;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}}
.cp .label{color:#fff}
.cp h2{font-size:38px;line-height:1.05;color:#fff;margin-top:16px}
@media (min-width:1024px){.cp h2{font-size:58px}}
.cp h2 em{font-style:italic;font-weight:400;color:var(--color-accent)}
.cp__sub{margin-top:20px;font-size:19px;color:var(--color-on-dark-muted);max-width:52ch}
.cp__journey{list-style:none;margin:36px 0 0;padding:0;position:relative;display:grid;gap:4px}
.cp__journey::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:linear-gradient(var(--color-accent),rgba(215,255,49,.15))}
.cp__step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start;padding:12px 0}
.cp__n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#0B1C33;box-shadow:inset 0 0 0 2px var(--color-accent);color:var(--color-accent);font-family:var(--font-heading);font-size:22px;position:relative;z-index:1}
.cp__step:last-child .cp__n{background:var(--color-accent);color:var(--color-ink)}
.cp__step h3{font-family:var(--font-body);font-weight:600;font-size:19px;color:#fff;margin-top:10px}
.cp__step p{margin-top:4px;color:var(--color-on-dark-muted);font-size:16px}
.cp__card{background:#fff;color:var(--color-text);border-radius:var(--radius-block);padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.35);position:relative}
@media (min-width:1024px){.cp__card{padding:36px;position:sticky;top:110px}}
.cp__card .pill{background:var(--color-accent);font-weight:600}
.cp__what{margin-top:18px;font-size:16px;color:var(--color-muted)}
.cp__was{margin-top:6px;font-size:18px;color:var(--color-muted)}
.cp__was s{text-decoration-thickness:2px}
.cp__price{font-family:var(--font-heading);font-weight:500;font-size:84px;line-height:.95;letter-spacing:-.03em;color:var(--color-ink);margin-top:4px}
.cp__price small{font-family:var(--font-body);font-size:18px;font-weight:500;letter-spacing:0;color:var(--color-muted);margin-left:6px}
.cp__inst{margin-top:10px;font-size:17px;color:var(--color-ink)}
.cp__save{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border-radius:999px;background:rgba(31,157,85,.12);color:var(--color-success);font-weight:600;font-size:16px}
.cp__card .checks{margin-top:22px}
.cp__card .checks li{color:var(--color-ink)}
.cp__card .btn{width:100%;margin-top:26px}
.cp__alt{display:block;text-align:center;margin-top:12px;min-height:44px;line-height:44px;font-weight:600;color:var(--color-primary);background:none;border:0;width:100%;cursor:pointer;font:inherit;font-weight:600}
.cp__alt:hover{text-decoration:underline}
.cp__micro{margin-top:6px;text-align:center;font-size:16px;color:var(--color-muted)}.cp__card .checks iconify-icon,.cp__card .checks .tk-ic{color:var(--color-success)}
/* depoimento ao lado do caso: a citação cresce para ocupar a altura do cartão vizinho */
.cases .qcard blockquote{font-size:24px;line-height:1.38}
@media (min-width:1024px){.cases .qcard blockquote{font-size:28px}}
/* no desktop o talko-lp.js ajusta o tamanho para preencher o cartão */
/* Talko · sistema de movimento v1 (7/out/2026)
   Regras: só transform e opacity; efeitos de ponteiro só com mouse (pointer:fine);
   prefers-reduced-motion desliga tudo. Documentado em docs/02-design-system.md. */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:200ms;--dur-base:600ms;--dur-slow:900ms;
  --stagger:70ms;
}

/* 1. Barra de progresso de leitura */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--color-accent,#D7FF31);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* 2. Entrada ao rolar: sobe, ganha nitidez */
[data-reveal]{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
[data-reveal].is-in{opacity:1;transform:none;filter:none}
html:not(.motion-ready) [data-reveal]{opacity:1;transform:none;filter:none}

/* 3. Título palavra por palavra, saindo de uma máscara */
.split-word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .2em .12em;margin:0 -.2em -.12em}
/* a folga lateral deixa a serifa itálica passar da caixa da palavra sem cortar as pontas; a margem negativa devolve o espaçamento */
.split-word>span{display:inline-block;transform:translateY(105%);transition:transform var(--dur-slow) var(--ease-out);transition-delay:calc(var(--w,0) * 45ms)}
.is-in .split-word>span,.split-done .split-word>span{transform:none}

/* 4. Marca-texto que se desenha na palavra-âncora */
.mark{background-image:linear-gradient(transparent 64%,rgba(215,255,49,.75) 64%,rgba(215,255,49,.75) 92%,transparent 92%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size 900ms var(--ease-out) 500ms;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.is-in .mark,.split-done .mark,.mark.is-in{background-size:100% 100%}

/* 5. Luz que segue o cursor */
@media (pointer:fine){
  .spot{position:relative;isolation:isolate}
  .spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 300ms ease;z-index:0;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(48,34,150,.08),transparent 45%)}
  .dark.spot::before,.spot--dark::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(215,255,49,.10),transparent 45%)}
  .spot:hover::before{opacity:1}
  .spot>*{position:relative;z-index:1}
}

/* 6. Botão magnético e brilho que atravessa */
.btn--primary,.btn--accent{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::after,.btn--accent::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg) translateX(0);opacity:0;pointer-events:none;z-index:-1}
@media (pointer:fine){
  .btn--primary:hover::after,.btn--accent:hover::after{opacity:1;animation:shine 900ms var(--ease-out)}
}
@keyframes shine{from{transform:skewX(-20deg) translateX(0)}to{transform:skewX(-20deg) translateX(420%)}}
[data-magnetic]{transition:transform 350ms var(--ease-out),box-shadow 200ms ease,background-color 200ms ease}

/* 7. Inclinação 3D e flutuação do mockup */
[data-tilt]{transform-style:preserve-3d;transition:transform 500ms var(--ease-out);will-change:transform}
.float{animation:float 7s var(--ease-in-out) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* 8. Aurora lenta dentro do bloco escuro */
.aurora::before{content:"";position:absolute;inset:-30%;z-index:-2;pointer-events:none;opacity:.55;
  background:radial-gradient(35% 40% at 20% 30%,rgba(15,70,80,.9),transparent 70%),radial-gradient(30% 35% at 80% 70%,rgba(48,34,150,.45),transparent 70%),radial-gradient(25% 30% at 60% 20%,rgba(215,255,49,.10),transparent 70%);
  animation:aurora 22s var(--ease-in-out) infinite alternate}
@keyframes aurora{0%{transform:translate3d(-4%,-2%,0) rotate(0deg)}100%{transform:translate3d(4%,3%,0) rotate(8deg)}}

/* 9. Abas que avançam sozinhas, com progresso */
.tab{position:relative;overflow:hidden}
[data-autoplay] .tab[aria-selected="true"]::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--color-accent,#D7FF31);transform-origin:0 50%;transform:scaleX(0);animation:tabprog var(--autoplay,7s) linear forwards}
[data-autoplay].is-paused .tab[aria-selected="true"]::after{animation-play-state:paused}
[data-autoplay].is-stopped .tab[aria-selected="true"]::after{display:none}
@keyframes tabprog{to{transform:scaleX(1)}}

/* 10. Faixa de integrações: sem esmaecido nas laterais (pedido do Tibério, 7/out/2026); o recorte é a borda arredondada do bloco */

/* 11. Borda que gira no plano recomendado */
@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.glow-border{position:relative}
.glow-border::before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius-card,20px) + 2px);padding:2px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--angle),transparent 0 60%,rgba(215,255,49,.9) 75%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin-angle 6s linear infinite}
@keyframes spin-angle{to{--angle:360deg}}

/* 12. Cards que reagem */
@media (pointer:fine){
  .lift{transition:transform 300ms var(--ease-out),box-shadow 300ms var(--ease-out)}
  .lift:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,26,51,.10)}
}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
  .split-word>span{transform:none!important}
  .mark{background-size:100% 100%!important}
  .float,.aurora::before,.glow-border::before{animation:none!important}
  [data-tilt]{transform:none!important}
  .progress{display:none}
  [data-autoplay] .tab[aria-selected="true"]::after{display:none}
}
/* Talko · páginas de conteúdo e institucionais (sobre, guias). Complementa talko-lp.css e talko-motion.css.
   Geradas por LP Sexy/scripts/institucionais.py. */
.hero--art{padding:56px 0 64px}
@media (min-width:1024px){.hero--art{padding:96px 0 104px}}
.hero--art h1{max-width:18ch}
.hero--art .hero__sub{max-width:62ch}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px}
.prose-col{max-width:760px}
.prose-col p{font-size:19px;line-height:1.65}
.prose-col p+p{margin-top:16px}
.prose-col strong{color:var(--color-ink)}
.tbl-wrap{background:#fff;border-radius:var(--radius-card);box-shadow:inset 0 0 0 1px var(--color-border);overflow:hidden}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:16px 22px;text-align:left;vertical-align:top;font-size:17px;border-bottom:1px solid var(--color-border)}
.tbl tr:last-child td{border-bottom:0}
.tbl thead th{background:var(--color-surface);color:var(--color-ink);font-weight:600;font-size:16px}
.tbl td:first-child{color:var(--color-ink);font-weight:500}
.tbl .bad{color:var(--color-error)}
.tbl .good{color:var(--color-success)}.tbl td iconify-icon,.tbl td .tk-ic{vertical-align:-5px;margin-right:6px}
@media (max-width:640px){
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:14px 18px;border-bottom:1px solid var(--color-border)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{border:0;padding:4px 0}
  .tbl td[data-l]::before{content:attr(data-l);display:block;font-size:16px;font-weight:600;color:var(--color-muted)}
}
.src{font-size:16px;color:var(--color-muted);margin-top:10px}
.src a{color:var(--color-primary)}
.facts{display:grid;gap:16px}
@media (min-width:900px){.facts{grid-template-columns:repeat(3,1fr);gap:24px}}
.fact{border-left:3px solid var(--color-accent);padding:4px 0 4px 20px}
.fact b{display:block;font-family:var(--font-heading);font-weight:400;font-size:52px;line-height:1;color:var(--color-primary);letter-spacing:-.02em}
.fact p{margin-top:10px}
.card .icon-sq{margin-bottom:20px}
.mv{display:grid;gap:16px}
@media (min-width:900px){.mv{grid-template-columns:1fr 1fr;gap:24px}}
.mv .card{padding:32px}
.mv .card h3{font-size:30px}
.callout{background:var(--color-card-tint);border-radius:var(--radius-card);padding:24px 28px;display:flex;gap:16px;align-items:flex-start}
.callout p{font-size:19px;color:var(--color-ink)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--color-border);color:var(--color-ink);text-decoration:none;font-size:16px;font-weight:500}
.toc a:hover{box-shadow:inset 0 0 0 1px var(--color-ink)}
@media (min-width:1024px){.steps.steps--4{grid-template-columns:repeat(4,1fr);gap:32px}}
/* foto do escritório na página Sobre */
.office{margin:0;border-radius:var(--radius-block);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/9;background:var(--color-surface)}
.office img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:1024px){.office{aspect-ratio:21/9}}