/* RodeAqui Design System — components.css (v0.1)
   Depende de tokens.css. Sem framework. Classes curtas, uma responsabilidade cada. */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:1.55;font-weight:var(--w-regular);-webkit-font-smoothing:antialiased;letter-spacing:-.005em;font-optical-sizing:auto}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p,h1,h2,h3,h4{margin:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section-tight{padding-block:calc(var(--section) * .6)}
.dark{background:var(--night);color:var(--night-ink)}
.tone{background:var(--paper-2)}                       /* faixa suave, sem borda */
.panel{background:var(--paper-2);border-radius:var(--r-4);padding:clamp(24px,4vw,56px)}   /* seção-cartão (shopify/contaazul) */
.dark .panel{background:var(--night-2)}
.rule{border:0;border-top:1px solid var(--hair);margin:0}
.dark .rule{border-color:var(--night-hair)}
.grid-2{display:grid;gap:var(--s-6);grid-template-columns:1fr}
.grid-3{display:grid;gap:var(--s-5);grid-template-columns:1fr}
@media(min-width:760px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)}}
.stack>*+*{margin-top:var(--s-5)}
.center{text-align:center}.center .lead,.center .h-display,.center .h1{margin-inline:auto}

/* ---------- tipografia ---------- */
.h-display{font-size:var(--t-display);line-height:1;letter-spacing:-.028em;font-weight:var(--w-display);text-wrap:balance;max-width:14ch}
.h1{font-size:var(--t-1);line-height:1.04;letter-spacing:-.024em;font-weight:var(--w-display);text-wrap:balance;max-width:18ch}
.h2{font-size:var(--t-2);line-height:1.1;letter-spacing:-.016em;font-weight:var(--w-display);text-wrap:balance}
.h3{font-size:var(--t-3);line-height:1.35;letter-spacing:-.008em;font-weight:var(--w-strong)}
.lead{font-size:var(--t-3);line-height:1.45;color:var(--ink-2);max-width:var(--measure);text-wrap:pretty}
.body{font-size:var(--t-body);color:var(--ink-2);max-width:var(--measure)}
.small{font-size:var(--t-small);line-height:1.45}
.caption{font-size:var(--t-caption);line-height:1.4;color:var(--ink-3)}
.eyebrow{font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);font-weight:500}
.dark .lead,.dark .body{color:var(--night-ink-2)}
.dark .caption{color:var(--night-ink-2)}
.dark .eyebrow{color:var(--teal-glow)}
/* título de dois tons: a primeira frase em tinta, a continuação apagada (attio, linear) */
.h-tone em{font-style:normal;color:var(--ink-2)}
.dark .h-tone em{color:var(--night-ink-2)}
/* a frase de marca: uma vez por página, em teal */
.brand-phrase{color:var(--teal)}
.dark .brand-phrase{color:var(--teal-glow)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.big-num{font-size:clamp(44px,7vw,88px);line-height:.95;letter-spacing:-.035em;font-weight:var(--w-display)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r-pill);font-size:var(--t-small);font-weight:var(--w-strong);letter-spacing:-.01em;white-space:nowrap;border:1px solid transparent;transition:background-color var(--d-xs) var(--e-ui),color var(--d-xs) var(--e-ui),border-color var(--d-xs) var(--e-ui)}
.btn-sm{height:36px;padding:0 14px;font-size:14px}
.btn-lg{height:52px;padding:0 26px;font-size:16px}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#242B2E}
.btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--hair-2)}
.btn-secondary:hover{background:var(--paper-2);border-color:rgba(11,15,16,.24)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{background:var(--paper-2);color:var(--ink)}
.dark .btn-primary{background:var(--night-ink);color:var(--night)}
.dark .btn-primary:hover{background:#DDE3E2}
.dark .btn-secondary{background:transparent;color:var(--night-ink);border-color:rgba(255,255,255,.18)}
.dark .btn-secondary:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32)}
.dark .btn-ghost{color:var(--night-ink-2)}.dark .btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--night-ink)}
.link{color:var(--teal-ink);font-weight:var(--w-medium);border-bottom:1px solid transparent;transition:border-color var(--d-sm) var(--e-ui)}
.link:hover{border-color:currentColor}
.dark .link{color:var(--teal-glow)}
.arrow::after{content:"→";margin-left:.35em;display:inline-block;transition:transform var(--d-sm) var(--e-out)}
.arrow:hover::after{transform:translateX(3px)}

/* ---------- chips, tags ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-pill);font-size:13px;font-weight:var(--w-medium);background:var(--paper-2);color:var(--ink-2);border:1px solid var(--hair)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dark .chip{background:rgba(255,255,255,.05);color:var(--night-ink-2);border-color:var(--night-hair)}
.dark .chip[aria-pressed="true"],.dark .chip.is-on{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:var(--r-pill);letter-spacing:.02em}
.tag-ok{background:#E6F0E4;color:var(--pos)}.tag-warn{background:#F7EDDD;color:var(--warn)}.tag-bad{background:#F3E1DD;color:var(--neg)}
.dark .tag-ok{background:rgba(46,125,79,.22);color:#8FD3A7}.dark .tag-warn{background:rgba(138,90,18,.25);color:#E4B96E}.dark .tag-bad{background:rgba(179,64,43,.25);color:#F0A492}

/* ---------- cartões e molduras ---------- */
.card{background:var(--paper);border-radius:var(--r-3);box-shadow:var(--ring);padding:var(--s-5)}
.card-tone{background:var(--paper-2);box-shadow:none}
.dark .card{background:var(--night-2);box-shadow:0 0 0 1px var(--night-hair)}
/* moldura de produto: a tela real, cortada, com anel fino; opcionalmente sangrando a base da seção */
.frame{background:var(--paper);border-radius:var(--r-3);box-shadow:var(--ring),var(--shadow-frame);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-bottom:1px solid var(--hair);background:var(--paper)}
.frame-bar i{width:8px;height:8px;border-radius:50%;background:var(--paper-3)}
.frame-bar a.url:hover{color:var(--teal);text-decoration:underline}
.dark .frame-bar a.url:hover{color:var(--teal-glow)}
.frame-bar .url{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark .frame{background:var(--night-2);box-shadow:0 0 0 1px var(--night-hair),0 40px 120px -40px rgba(0,0,0,.8)}
.dark .frame-bar{background:var(--night-2);border-color:var(--night-hair)}
.dark .frame-bar i{background:rgba(255,255,255,.14)}
.bleed{margin-bottom:calc(var(--section) * -1);max-height:520px}       /* sangra a base da seção (linear, attio) */
.bleed .frame{border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:var(--ring)}
/* grade com linhas finas (attio: logos, recursos) */
.cells{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-3);overflow:hidden}
.cells>*{background:var(--paper);padding:var(--s-5)}
@media(min-width:760px){.cells{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.cells-6{grid-template-columns:repeat(6,1fr)}}
.dark .cells{background:var(--night-hair);border-color:var(--night-hair)}.dark .cells>*{background:var(--night)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:30;height:60px;display:flex;align-items:center;gap:var(--s-5);padding-inline:var(--gutter);background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hair);transition:background-color var(--d-md) var(--e-ui),color var(--d-md) var(--e-ui),border-color var(--d-md) var(--e-ui)}
/* barra sobre hero escuro: fixa, transparente no topo, noite translúcida ao rolar */
.nav-overlay{position:fixed;left:0;right:0}
.nav-overlay:not(.is-scrolled){background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav .logo{display:flex;align-items:center;gap:8px;font-weight:var(--w-strong);font-size:17px;letter-spacing:-.02em;margin-right:auto}
.nav .links{display:none;gap:var(--s-5);font-size:var(--t-small);font-weight:var(--w-medium);color:var(--ink-2)}
.nav .links a{transition:color var(--d-xs) var(--e-ui)}.nav .links a:hover{color:var(--ink)}
@media(min-width:900px){.nav .links{display:flex}}
.dark-nav{background:rgba(8,40,44,.74);border-color:var(--night-hair);color:var(--night-ink)}
.dark-nav .links{color:var(--night-ink-2)}.dark-nav .links a:hover{color:var(--night-ink)}

/* ---------- dados (dentro do produto) ---------- */
.kpi{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--r-2);box-shadow:var(--ring)}
.kpi small{font-size:12px;color:var(--ink-3)}
.kpi b{font-family:var(--mono);font-weight:500;font-size:clamp(15px,2vw,22px);letter-spacing:-.02em;white-space:nowrap}
@media(max-width:560px){.kpi{padding:10px}.kpi small{font-size:11px}}
.kpi .pos{color:var(--pos)}.kpi .neg{color:var(--neg)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:500;text-align:left;padding:8px 6px}
.tbl td{padding:9px 6px;border-top:1px solid var(--hair)}
.tbl .r{text-align:right}
.bars{display:flex;align-items:flex-end;gap:6px;height:96px}
.bars i{flex:1;background:var(--paper-3);border-radius:4px 4px 0 0;transform-origin:bottom;transition:transform var(--d-xl) var(--e-out)}
.bars i.hi{background:var(--teal)}
.dark .bars i{background:rgba(255,255,255,.08)}.dark .bars i.hi{background:var(--teal-glow)}

/* ---------- citação, prova ---------- */
.quote{font-size:var(--t-2);line-height:1.2;letter-spacing:-.016em;font-weight:var(--w-medium);text-wrap:balance}
.who{display:flex;align-items:center;gap:12px;font-size:var(--t-small);color:var(--ink-2)}
.who img,.who .ava{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--teal-soft);color:var(--teal-ink);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--w-strong)}
.stat b{display:block;font-size:clamp(32px,4vw,48px);line-height:1;letter-spacing:-.03em;font-weight:var(--w-display)}
.stat span{display:block;margin-top:6px;font-size:var(--t-small);color:var(--ink-2)}

/* ---------- foto com produto por cima (revolut) ---------- */
.photo{position:relative;border-radius:var(--r-4);overflow:hidden;aspect-ratio:4/5;background:var(--paper-3)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .float{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:var(--r-2);padding:12px 14px;box-shadow:var(--ring)}

/* ---------- movimento (estados iniciais; motion.js liga) ---------- */
.motion-on [data-enter]{opacity:0;transform:translateY(8px);filter:blur(6px);transition:opacity var(--d-xl) var(--e-out),transform var(--d-xl) var(--e-out),filter var(--d-xl) var(--e-out)}
.motion-on [data-enter].is-in{opacity:1;transform:none;filter:none}
.motion-on [data-reveal]{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--d-lg) var(--e-out),transform var(--d-lg) var(--e-out)}
.motion-on [data-reveal="stagger"]{opacity:1;transform:none;transition:none}
.motion-on [data-reveal="stagger"]>*{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--d-lg) var(--e-out),transform var(--d-lg) var(--e-out)}
.motion-on [data-reveal].is-in,.motion-on [data-reveal="stagger"].is-in>*{opacity:1;transform:none}
.motion-on [data-build] [data-row]{opacity:0;transform:translateY(3px);transition:opacity var(--d-md) var(--e-out),transform var(--d-md) var(--e-out)}
.motion-on [data-build].is-built [data-row]{opacity:1;transform:none}
.motion-on [data-build] .bars i{transform:scaleY(.15)}
.motion-on [data-build].is-built .bars i{transform:none}
/* loop ambiente permitido: lento, só dentro do produto */
@keyframes pulse-dot{0%,100%{opacity:.35}50%{opacity:1}}
.pulse{animation:pulse-dot 2.4s ease-in-out infinite}
.motion-off .pulse{animation:none}

/* ---------- menu no celular: botão ≡ e painel que desce da barra ---------- */
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 10px;border-radius:var(--r-pill);margin-left:2px}
.nav-toggle span{display:block;height:1.5px;border-radius:2px;background:currentColor;transition:transform var(--d-sm) var(--e-out),opacity var(--d-sm) var(--e-ui)}
.nav.is-open .nav-toggle span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.nav.is-open .nav-toggle span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
.nav-panel{display:none;position:absolute;left:0;right:0;top:100%;padding:8px var(--gutter) 24px;background:var(--paper);border-bottom:1px solid var(--hair);box-shadow:0 24px 40px -24px rgba(11,15,16,.35)}
.nav-panel a{display:flex;align-items:center;min-height:52px;font-size:19px;font-weight:var(--w-medium);letter-spacing:-.01em;border-bottom:1px solid var(--hair)}
.nav-panel .btn{margin-top:18px;width:100%}
.nav.dark .nav-panel{border-color:var(--night-hair)}
.nav.dark .nav-panel a{border-color:var(--night-hair)}
.nav.is-open .nav-panel{display:block}
.nav-overlay.is-open{background:var(--night)!important;border-color:var(--night-hair)!important}
.nav .hide-sm{display:none}
@media(min-width:900px){.nav-toggle,.nav-panel{display:none!important}.nav .hide-sm{display:inline-flex}}

/* ---------- mega menu (desktop): gatilho na barra, cartão que desce ---------- */
.nav .links{align-items:center;gap:4px}
.mm{position:relative}
.mm>button,.nav .links>a{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--r-pill);font-size:var(--t-small);font-weight:var(--w-medium);color:inherit;transition:background-color var(--d-xs) var(--e-ui),color var(--d-xs) var(--e-ui)}
.mm>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;transition:transform var(--d-sm) var(--e-out)}
.mm.is-open>button::after{transform:translateY(1px) rotate(-135deg)}
.mm>button:hover,.mm.is-open>button,.nav .links>a:hover{background:var(--paper-2);color:var(--ink)}
.nav.dark .mm>button:hover,.nav.dark .mm.is-open>button,.nav.dark .links>a:hover{background:rgba(255,255,255,.08);color:var(--night-ink)}
.mm-card{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-6px);opacity:0;visibility:hidden;width:max-content;max-width:min(860px,94vw);padding:10px;border-radius:var(--r-3);background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--hair),0 30px 60px -20px rgba(11,15,16,.35);transition:opacity var(--d-sm) var(--e-out),transform var(--d-sm) var(--e-out),visibility 0s linear var(--d-sm)}
.mm.is-open .mm-card{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--d-sm) var(--e-out),transform var(--d-sm) var(--e-out),visibility 0s}
.nav.dark .mm-card{background:#0E181B;color:var(--night-ink);box-shadow:0 0 0 1px var(--night-hair),0 30px 60px -20px rgba(0,0,0,.7)}
.mm-grid{display:grid;grid-auto-flow:column;gap:10px}
.mm-col{display:flex;flex-direction:column;gap:2px;min-width:250px}
.mm-col>span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px 6px}
.nav.dark .mm-col>span{color:var(--night-ink-2)}
.mm-item{display:grid;grid-template-columns:32px 1fr;gap:2px 12px;align-items:center;padding:9px 12px;border-radius:var(--r-2);transition:background-color var(--d-xs) var(--e-ui)}
.mm-item:hover{background:var(--paper-2)}
.nav.dark .mm-item:hover{background:rgba(255,255,255,.06)}
.mm-item svg{grid-row:span 2;width:32px;height:32px;padding:7px;border-radius:8px;background:var(--paper-2);color:var(--teal);box-shadow:var(--ring)}
.nav.dark .mm-item svg{background:rgba(255,255,255,.06);color:var(--teal-glow);box-shadow:0 0 0 1px var(--night-hair)}
.mm-item b{font-size:14.5px;font-weight:var(--w-strong);letter-spacing:-.01em}
.mm-item small{font-size:13px;color:var(--ink-2);line-height:1.35}
.nav.dark .mm-item small{color:var(--night-ink-2)}
.mm-feature{display:flex;flex-direction:column;justify-content:space-between;gap:12px;width:250px;padding:18px;border-radius:var(--r-2);background:var(--paper-2)}
.nav.dark .mm-feature{background:linear-gradient(160deg,rgba(17,99,107,.45),rgba(17,99,107,.08))}
.mm-feature b{font-size:17px;font-weight:var(--w-strong);letter-spacing:-.015em}
.mm-feature small{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.nav.dark .mm-feature small{color:var(--night-ink-2)}
.mm-feature .big{font-size:34px;line-height:1;letter-spacing:-.03em;font-weight:var(--w-display);color:var(--teal)}
.nav.dark .mm-feature .big{color:var(--teal-glow)}
/* O número do cartão é a RESPOSTA a uma pergunta, não um preço: a pergunta vem num balão, e a frase completa a resposta. */
.mm-conversa{display:flex;flex-direction:column;gap:8px}
.mm-q{align-self:flex-end;max-width:90%;padding:6px 10px;border-radius:12px 12px 4px 12px;font-size:12.5px;line-height:1.3;background:var(--paper);color:var(--ink);box-shadow:var(--ring)}
.nav.dark .mm-q{background:rgba(255,255,255,.08);color:var(--night-ink);box-shadow:0 0 0 1px var(--night-hair)}
.mm-a{display:flex;flex-direction:column;gap:4px}
.mm-a>span:last-child{font-size:13px;color:var(--ink-2);line-height:1.35}
.nav.dark .mm-a>span:last-child{color:var(--night-ink-2)}
.mm-foot{display:flex;justify-content:space-between;gap:12px;margin-top:6px;padding:12px 12px 4px;border-top:1px solid var(--hair);font-size:13px;color:var(--ink-2)}
.nav.dark .mm-foot{border-color:var(--night-hair);color:var(--night-ink-2)}

/* menu do celular em grupos (details/summary nativo) */
.nav-panel details{border-bottom:1px solid var(--hair)}
.nav.dark .nav-panel details{border-color:var(--night-hair)}
.nav-panel summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:19px;font-weight:var(--w-medium);list-style:none;cursor:pointer}
.nav-panel summary::-webkit-details-marker{display:none}
.nav-panel summary::after{content:"+";font-size:22px;font-weight:300;opacity:.6}
.nav-panel details[open] summary::after{content:"−"}
.nav-panel details a{min-height:44px;font-size:16px;border:0;padding-left:4px;opacity:.85}
.nav-panel details div{padding-bottom:10px}
.nav-panel{max-height:calc(100svh - 60px);overflow:auto}

/* ---------- parede de logos ---------- */
.logo-strip{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo-strip .track{display:flex;gap:40px;width:max-content;animation:marquee var(--dur,70s) linear infinite}
.logo-strip .track.rev{animation-direction:reverse}
.logo-strip:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.lg-item{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:var(--w-strong);letter-spacing:-.01em;white-space:nowrap;color:var(--ink-3)}
.lg-item svg{width:22px;height:22px;flex:none;fill:currentColor}
.lg-mono{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;border:1.5px solid currentColor;font-size:10px;font-weight:700;letter-spacing:0;flex:none}
.dark .lg-item{color:var(--night-ink-2)}
@media (prefers-reduced-motion:reduce){.logo-strip .track{animation:none;flex-wrap:wrap;width:auto}.logo-strip{-webkit-mask-image:none;mask-image:none}}
.integ-cat{display:grid;grid-template-columns:1fr;gap:10px 32px;padding:22px 0;border-top:1px solid var(--hair)}
@media(min-width:900px){.integ-cat{grid-template-columns:220px 1fr}}
.integ-cat h3{font-size:15px;font-weight:var(--w-strong)}
.integ-cat h3 small{display:block;font-weight:400;color:var(--ink-3);font-size:13px;margin-top:2px}
.integ-list{display:flex;flex-wrap:wrap;gap:8px}
.integ{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--ring);font-size:14px;font-weight:var(--w-medium)}
.integ svg{width:18px;height:18px;fill:currentColor;color:var(--ink-2)}
.integ .lg-mono{width:18px;height:18px;font-size:8.5px;color:var(--ink-2)}
.integ.on::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);margin-left:2px}
.integ.fila{color:var(--ink-2);background:transparent;box-shadow:0 0 0 1px var(--hair) inset;border:1px dashed transparent}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.legend i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-right:6px;vertical-align:middle}
.legend i.f{background:transparent;box-shadow:0 0 0 1px var(--ink-3)}

/* ---------- rodapé completo ---------- */
.foot{padding:var(--s-8) 0 var(--s-6);border-top:1px solid var(--hair);background:var(--paper)}
.foot-top{display:grid;grid-template-columns:1fr;gap:var(--s-7)}
@media(min-width:900px){.foot-top{grid-template-columns:1.2fr repeat(4,minmax(0,1fr))}}
.foot-brand p{margin-top:14px;font-size:14.5px;color:var(--ink-2);max-width:32ch}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.foot-col>span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.foot-col a{color:var(--ink-2);transition:color var(--d-xs) var(--e-ui)}.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--hair);font-size:13px;color:var(--ink-3)}
.foot-bottom a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair-2)}
@media(max-width:899px){.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6)}}
@media(min-width:900px){.foot-cols{display:contents}}

/* logo como silhueta de uma cor (máscara) */
.lgm{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.lg-item .lgm{opacity:.95}
.integ .lgm{color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-logos{padding:var(--s-8) 0 var(--s-7)}
/* menu do celular translúcido: o fundo do hero aparece atrás */
.nav-panel{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3)}
.nav.dark .nav-panel{background:rgba(10,18,20,.84)}
/* menu aberto: uma camada só de vidro cobre a tela inteira, barra incluída. backdrop-filter aninhado não funciona,
   então nem a barra nem o painel têm o seu: o vidro é o ::before da barra, fixo e do tamanho da tela */
@media(max-width:899px){
  .nav.is-open{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:transparent!important;border-color:transparent!important}
  .nav.is-open .nav-panel{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-bottom:0}
  .nav.is-open::before{content:"";position:fixed;inset:0;height:100lvh;z-index:-1;pointer-events:none;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3)}
  .nav.dark.is-open::before,.nav-overlay.is-open::before{background:rgba(10,18,20,.84)}
  /* o painel ocupa a tela até embaixo: o que vem por último (demo e contato) fica no pé */
  .nav.is-open .nav-panel{display:flex;flex-direction:column;min-height:calc(100svh - 60px)}
  .nav-extra{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:14px}
  .nav-panel .nav-extra a{border:0;min-height:0}
  .nav-panel .nav-demo{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:16px 18px;border-radius:var(--r-3);background:color-mix(in srgb,currentColor 7%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,currentColor 14%,transparent);font-size:17px;font-weight:var(--w-strong)}
  .nav-demo small{grid-column:1;font-size:13.5px;font-weight:var(--w-regular,400);opacity:.68}
  .nav-demo .seta{grid-column:2;grid-row:1 / span 2;font-size:20px;color:var(--teal)}
  .nav.dark .nav-demo .seta,.nav-overlay .nav-demo .seta{color:var(--teal-glow)}
  .nav-panel .nav-contato{justify-content:center;gap:8px;font-size:15px;font-weight:var(--w-medium);opacity:.8;padding-bottom:4px}
  .nav-contato svg{width:18px;height:18px;flex:none}
  /* abrir: o vidro entra em 220 ms e as opções descem em sequência */
  .nav.is-open::before{animation:menu-vidro .22s var(--e-out) both}
  .nav.is-open .nav-panel>*{animation:menu-item .34s var(--e-out) both;animation-delay:calc(var(--i,0) * 30ms + 50ms)}
  .nav-panel>:nth-child(2){--i:1}.nav-panel>:nth-child(3){--i:2}.nav-panel>:nth-child(4){--i:3}.nav-panel>:nth-child(5){--i:4}
  .nav-panel>:nth-child(6){--i:5}.nav-panel>:nth-child(7){--i:6}.nav-panel>:nth-child(n+8){--i:7}
}
@keyframes menu-vidro{from{opacity:0}}
@keyframes menu-item{from{opacity:0;transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.nav.is-open::before,.nav.is-open .nav-panel>*{animation:none}}

/* ---------- órbita de integrações (seção da marca) ---------- */
.orbit{--S:min(440px,86vw);position:relative;width:var(--S);height:var(--S);margin:0 auto}
.orbit .ring{position:absolute;left:50%;top:50%;width:0;height:0;animation:orb-spin var(--t) linear infinite}
.orbit .ring.rev{animation-direction:reverse}
.orbit .ring::before{content:"";position:absolute;left:0;top:0;width:calc(var(--r) * 2);height:calc(var(--r) * 2);transform:translate(-50%,-50%);border:1px dashed var(--hair-2);border-radius:50%}
.orbit .node{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:13px;background:var(--paper);box-shadow:var(--ring),0 8px 18px -10px rgba(11,15,16,.35);display:flex;align-items:center;justify-content:center;transform:rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)))}
.orbit .node>*{animation:orb-spin var(--t) linear infinite reverse}
.orbit .ring.rev .node>*{animation-direction:normal}
.orbit .node svg{width:21px;height:21px;fill:var(--ink-2)}
.orbit .node .lgm{color:var(--ink-2)}
.orbit .node.on{box-shadow:0 0 0 1px rgba(17,99,107,.35),0 8px 18px -10px rgba(17,99,107,.5)}
.orbit .node.on svg{fill:var(--teal)}.orbit .node.on .lgm{color:var(--teal)}
.orbit .core{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:28%;background:var(--paper);box-shadow:var(--ring),0 0 0 10px rgba(63,224,230,.10),0 24px 50px -20px rgba(17,99,107,.55);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.orbit .core svg{width:58%;height:auto;display:block}
@keyframes orb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.orbit .ring,.orbit .node>*{animation:none}}
@media (max-width:560px){.orbit .node{width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:11px}.orbit .node svg{width:17px;height:17px}}

/* nada rola para o lado no celular (clip não cria rolagem própria: a barra sticky continua funcionando) */
html,body{overflow-x:clip}

/* brilho que percorre a frase de marca (usado com a órbita) */
.shine{background:linear-gradient(100deg,var(--teal) 0%,var(--teal) 40%,var(--teal-glow) 50%,var(--teal) 60%,var(--teal) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s cubic-bezier(.65,0,.35,1) infinite}
.dark .shine{background-image:linear-gradient(100deg,var(--teal-glow) 0%,var(--teal-glow) 40%,#FFFFFF 50%,var(--teal-glow) 60%,var(--teal-glow) 100%)}
@keyframes shine{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.shine{animation:none;background:none;color:var(--teal)}}

/* ---------- tela do produto: entrada à Attio (sobe, desfoca → nítida) e palcos que separam a tela do fundo ---------- */
.rise{opacity:0;transform:translateY(64px) scale(.965);filter:blur(10px);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.3s cubic-bezier(.22,1,.36,1),filter 1.1s cubic-bezier(.22,1,.36,1)}
.rise.is-in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;filter:none;transition:none}}
/* palco 1 — attio: degradê que sobe de baixo + linhas verticais finas atrás da tela */
.palco-1{position:relative;border-radius:28px 28px 0 0;padding:clamp(18px,4vw,48px) clamp(12px,4vw,48px) 0;background:
  repeating-linear-gradient(90deg,rgba(17,99,107,.07) 0 1px,transparent 1px 56px),
  radial-gradient(90% 70% at 50% 100%,rgba(63,224,230,.30),rgba(63,224,230,0) 70%),
  linear-gradient(180deg,rgba(228,241,241,0) 0%,#E4F1F1 55%,#D2ECEC 100%)}
.palco-1 .frame{box-shadow:0 0 0 1px rgba(17,99,107,.12),0 30px 70px -30px rgba(9,74,81,.45)}
/* palco 2 — sombra: a tela flutua sobre o papel, sem fundo */
.palco-2 .frame{box-shadow:0 0 0 1px rgba(11,15,16,.10),0 2px 4px rgba(11,15,16,.04),0 24px 48px -12px rgba(11,15,16,.18),0 80px 140px -40px rgba(11,15,16,.35)}
/* palco 3 — laje escura com halo teal, a tela clara em cima */
.palco-3{position:relative;border-radius:28px 28px 0 0;padding:clamp(18px,4vw,48px) clamp(12px,4vw,48px) 0;background:radial-gradient(70% 60% at 50% 0%,rgba(63,224,230,.22),rgba(63,224,230,0) 70%),linear-gradient(180deg,#0E2528,#0A1214)}
.palco-3 .frame{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px -30px rgba(0,0,0,.8)}

/* digitação */
/* typewriter sem cursor: o texto aparece como a IA escreve */
@keyframes caret{50%{opacity:0}}

/* ---------- tela do produto, contínua (sem corte): janela no computador, iPhone no celular ---------- */
.tela{position:relative;margin:var(--s-8) auto 0;max-width:1120px;text-align:left;isolation:isolate}
.tela .frame{border-radius:16px;box-shadow:0 0 0 1px rgba(17,99,107,.14),0 1px 2px rgba(11,15,16,.05),0 30px 60px -24px rgba(9,74,81,.35),0 70px 120px -50px rgba(9,74,81,.3)}
/* brilho atrás: fica dentro da tela, sem chegar na borda da seção (senão a seção seguinte o corta reto) */
.tela::before{content:"";position:absolute;left:10%;right:10%;top:18%;bottom:12%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(63,224,230,.34),rgba(17,99,107,.14) 55%,rgba(17,99,107,0) 100%);filter:blur(56px)}
.tela::after{content:"";position:absolute;left:22%;right:22%;bottom:-26px;height:30px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(9,74,81,.22),rgba(9,74,81,0));filter:blur(8px)}
.tela .pe{display:none}
/* variante c — monitor: moldura fina, queixo, pescoço e base */
.tela-c .frame{border:12px solid #11181A;border-bottom-width:30px;border-radius:22px;box-shadow:0 0 0 1px #242D30,0 40px 80px -30px rgba(9,74,81,.45)}
.tela-c .frame::after{content:"";position:absolute;left:50%;bottom:-19px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#2B3538}
.tela-c .pe{display:flex;flex-direction:column;align-items:center}
.tela-c .pe::before{content:"";width:150px;height:74px;background:linear-gradient(90deg,#161E21 0%,#2A3437 45%,#1B2427 100%);clip-path:polygon(18% 0,82% 0,92% 100%,8% 100%)}
.tela-c .pe::after{content:"";width:340px;height:14px;border-radius:4px 4px 10px 10px;background:linear-gradient(#2A3437,#11181A);box-shadow:0 18px 30px -12px rgba(9,74,81,.45)}
.tela-c::after{bottom:-6px}
/* celular: um iPhone de verdade (proporção 9:19,5, ilha e barra de gestos) */
@media (max-width:760px){
  .tela{max-width:300px}
  .tela .frame,.tela-c .frame{position:relative;display:flex;flex-direction:column;aspect-ratio:9/19.5;border:10px solid #0B0F10;border-radius:52px;padding-top:34px;background:var(--paper);box-shadow:0 0 0 1.5px #2C3437,0 0 0 4px #0B0F10,0 40px 70px -30px rgba(9,74,81,.55)}
  .tela .frame::before{content:"";position:absolute;left:50%;top:10px;width:86px;height:25px;margin-left:-43px;border-radius:14px;background:#0B0F10;z-index:3}
  .tela .frame::after,.tela-c .frame::after{content:"";position:absolute;left:50%;bottom:8px;top:auto;width:110px;height:4px;margin-left:-55px;border-radius:3px;background:#0B0F10;opacity:.85}
  .tela .frame .ui-body{flex:1;min-height:0}
  .tela .frame .main{padding:14px 12px 24px}
  .tela .kpi{padding:8px}.tela .kpi b{font-size:13px}.tela .kpi small{font-size:10.5px}
  .tela .pe,.tela-c .pe{display:none}
  .tela::before{left:-15%;right:-15%;top:10%;bottom:10%}
}

/* ---------- "pensando" à Claude, em português ---------- */
.pensa{display:inline-flex;align-items:center;gap:8px;font-size:13.5px}
.pensa .estrela{display:inline-block;color:#E8A55A;font-size:15px;line-height:1;animation:estrela 1.2s ease-in-out infinite}
.pensa .verbo{background:linear-gradient(90deg,currentColor 0%,currentColor 40%,rgba(255,255,255,.95) 50%,currentColor 60%,currentColor 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 2.2s linear infinite}
.pensa .seg{opacity:.55;font-variant-numeric:tabular-nums}
@keyframes estrela{0%,100%{transform:scale(.85) rotate(0);opacity:.7}50%{transform:scale(1.15) rotate(45deg);opacity:1}}

/* ---------- formulário de contato (formulario.js): Quero conhecer, Começar, Conte a sua regra, Integração ---------- */
.form-dlg { width: min(460px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: var(--r-3, 18px); background: var(--paper, #fff); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(11,15,16,.45); }
.form-dlg::backdrop { background: rgba(8,14,16,.55); backdrop-filter: blur(4px); }
.form-dlg .fm { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 22px; }
.form-dlg h2 { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; margin: 0 28px 0 0; }
.form-dlg .fm-s { margin: -4px 0 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.form-dlg .fm-c { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-2); }
.form-dlg .fm-c em { font-style: normal; color: #C2410C; }
.form-dlg input:not([type=checkbox]), .form-dlg textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; box-shadow: 0 0 0 1px var(--hair-2, rgba(11,15,16,.16)); background: #fff; font: inherit; font-size: 15px; color: var(--ink); }
.form-dlg textarea { resize: vertical; min-height: 76px; }
.form-dlg input:focus, .form-dlg textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--teal); }
.form-dlg .fm-ok { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.form-dlg .fm-ok input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--teal-ink, #007578); flex: none; }
.form-dlg .fm-ok a, .form-dlg .fm-pe a { color: var(--teal-ink, #007578); text-decoration: underline; }
.form-dlg .fm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-dlg .fm-erro { margin: 0; font-size: 13px; color: #B42318; }
.form-dlg .fm-bt { width: 100%; justify-content: center; }
.form-dlg .fm-bt[disabled] { opacity: .7; }
.form-dlg .fm-pe { margin: 0; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.form-dlg .fm-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); background: transparent; border: 0; cursor: pointer; }
.form-dlg .fm-x:hover { background: var(--paper-2); color: var(--ink); }
.form-dlg .fm-fim { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0 4px; }
.form-dlg .fm-ok-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--teal-ink, #007578); }
.sv .sv-bt { margin-top: 12px; align-self: flex-start; }
.sv:target { box-shadow: 0 0 0 2px var(--teal), 0 20px 50px -30px rgba(0,117,120,.6); scroll-margin-top: 110px; }

/* ---------- WhatsApp fixo no canto (contato.js): sempre visível; sobe e fica em cima do botão de subir quando ele aparece ---------- */
.zap-flut { position: fixed; right: 18px; bottom: 18px; z-index: 41; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #1FAF5A; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 14px 30px -10px rgba(0,0,0,.45); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.zap-flut:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 22px rgba(31,175,90,.55); }
.zap-flut-t { position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: #0B0F10; color: #fff; transition: opacity .2s, transform .2s; }
.zap-flut:hover .zap-flut-t, .zap-flut:focus-visible .zap-flut-t { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 900px) { .zap-flut { right: 52px; bottom: 28px; width: 64px; height: 64px; } }
body:has(.ao-topo.on) .zap-flut { transform: translateY(-74px); }
@media (min-width: 900px) { body:has(.ao-topo.on) .zap-flut { transform: translateY(-80px); } }
.menu-aberto .zap-flut, body:has(dialog[open]) .zap-flut { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .zap-flut { transition: none; } }