/* Kondo.gest — os estilos da página inicial (index.html).
   Viviam num <style> dentro do index.html, que passava das 800 linhas;
   saíram a 18/10/2026 (revisão de código). */
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
 :root{
   /* ── TEMA: valores por omissao = ESCURO ── */
   --tint:255,255,255;--bg-rgb:7,16,31;
   --bg:#07101f;--bg-2:#0b1628;--bg-3:#0f1e38;--bg-4:#152040;
   --border:rgba(var(--tint),.07);--border-2:rgba(var(--tint),.13);
   --text:#f1f5f9;--muted:#7a8ba3;--muted-2:#94a3b8;
   --blue:#2451c7;--blue-line:#60a5fa;--teal:#0e7490;
   --acc-blue:#60a5fa;--acc-blue-soft:#93c5fd;--acc-green:#34d399;
   --acc-amber:#fbbf24;--acc-red:#f87171;--acc-violet:#a78bfa;
   --acc-cyan:#22d3ee;--acc-text-2:#cbd5e1;
   --cyan:#3fa8bf;--green:#10b981;--amber:#f59e0b;--red:#ef4444;--violet:#7c3aed;
   --ease-out:cubic-bezier(0.16,1,0.3,1);--spring:cubic-bezier(0.34,1.56,0.64,1);
 }

 /* ── TEMA CLARO ── */
 :root[data-theme="light"]{
   --tint:13,23,38;--bg-rgb:245,247,251;
   --bg:#f5f7fb;--bg-2:#ffffff;--bg-3:#eef2f8;--bg-4:#e9eef6;
   --border:rgba(var(--tint),.10);--border-2:rgba(var(--tint),.20);
   --text:#0d1726;--muted:#59687e;--muted-2:#44536b;
   --blue-line:#1d4ed8;
   --acc-blue:#1d4ed8;--acc-blue-soft:#1d4ed8;--acc-green:#047857;--tag-verde:#02593f;
   --acc-amber:#a04a08;--acc-red:#b91c1c;--acc-violet:#6d28d9;
   --acc-cyan:#0e7490;--acc-text-2:#44536b;
   --cyan:#0f5f74;--green:#047857;--amber:#a04a08;--red:#b91c1c;--violet:#6d28d9;
 }

 html{scroll-behavior:smooth}
 body{font-family:'Onest',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6;font-size:16px}
 /* GRAIN */
 body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");opacity:1}
 /* PROGRESS */
 /* Sem cantos arredondados, portanto scaleX serve e nao distorce nada.
    Esta e a que mais custava: escrevia a largura em CADA evento de
    scroll, e cada escrita obrigava o browser a recalcular o layout. */
 #prog{position:fixed;top:0;left:0;z-index:999;height:2.5px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--acc-violet));transition:transform .1s linear}
 /* NAV */
 nav{position:fixed;top:0;inset-inline:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding-inline:clamp(1.5rem,5vw,4rem);height:66px;background:rgba(var(--bg-rgb),.75);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);transition:background .3s,box-shadow .3s}
 nav.scrolled{background:rgba(var(--bg-rgb),.96);box-shadow:0 1px 0 var(--border),0 8px 40px rgba(0,0,0,.5)}
 .nav-logo{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;
   font-weight:800;letter-spacing:-.5px;color:var(--text);
   text-decoration:none;flex-shrink:0;background:none;-webkit-text-fill-color:initial}
 /* O «.gest» usa o azul da marca, NAO o --cyan. O --cyan continua a
    servir gradientes e acentos decorativos por todo o lado; a palavra
    da marca nao e um deles. Ficou verde-azulado aqui durante dias
    enquanto os guias e a legal ja mostravam azul — a mesma palavra em
    duas cores, consoante a pagina. Ha um teste que falha se voltar a
    divergir. */
 .nav-logo i{font-style:normal;color:var(--acc-blue)}
 .nav-links{display:flex;gap:2rem;list-style:none}
 .nav-links a{color:var(--muted-2);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .2s}
 .nav-links a:hover{color:var(--text)}
 .nav-right{display:flex;align-items:center;gap:.75rem}
 .nav-login{padding:.4rem 1rem;border-radius:8px;font-weight:600;font-size:.82rem;background:transparent;border:1px solid var(--border-2);color:var(--muted-2);cursor:pointer;font-family:inherit;transition:all .2s}
 .nav-login:hover{background:rgba(var(--tint),.06);color:var(--text)}
 .nav-cta{padding:.46rem 1.2rem;border-radius:8px;font-weight:700;font-size:.875rem;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;border:none;cursor:pointer;font-family:inherit;transition:transform .15s var(--spring),box-shadow .2s;box-shadow:0 0 0 0 rgba(37,99,235,.4)}
 .nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(37,99,235,.45)}
 /* BG ATMOSPHERICS */
 .atmo{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 80% 55% at 25% 15%,rgba(37,99,235,.13),transparent),radial-gradient(ellipse 55% 45% at 85% 75%,rgba(6,182,212,.08),transparent),radial-gradient(ellipse 45% 35% at 10% 85%,rgba(124,58,237,.07),transparent)}
 .grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 90% 60% at 30% 20%,black,transparent)}
 /* HERO */
 .hero{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3.5rem;padding:100px clamp(1.5rem,5vw,4rem) 80px;max-width:1340px;margin:0 auto;position:relative;z-index:1}
 .hero-left{display:flex;flex-direction:column;align-items:flex-start}
 .pill{display:inline-flex;align-items:center;gap:.45rem;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.28);padding:.32rem .9rem;border-radius:100px;font-size:.76rem;font-weight:600;color:var(--acc-blue-soft);margin-bottom:1.65rem;letter-spacing:.3px}
 .pill-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:pulse 2s ease-in-out infinite}
 @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
 h1{font-size:clamp(2.6rem,4.8vw,4.1rem);font-weight:800;line-height:1.05;letter-spacing:-2.5px;margin-bottom:1.4rem;max-width:580px}
 h1 .line-muted{color:var(--muted-2);font-weight:300}
 h1 em{font-style:normal;color:var(--acc-blue)}100%{background-position:200%}}
 .hero-sub{font-size:1.05rem;color:var(--muted-2);max-width:450px;margin-bottom:2.25rem;font-weight:400;line-height:1.75}
 .hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2.75rem}
 .btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.65rem;border-radius:10px;font-weight:700;font-size:.9rem;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;border:none;cursor:pointer;font-family:inherit;transition:transform .2s var(--spring),box-shadow .2s;box-shadow:0 4px 20px rgba(37,99,235,.3)}
 .btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 36px rgba(37,99,235,.45)}
 .btn-primary:active{transform:scale(.97)}
 .btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.65rem;border-radius:10px;font-weight:600;font-size:.9rem;background:rgba(var(--tint),.05);color:var(--text);border:1px solid var(--border-2);cursor:pointer;font-family:inherit;transition:background .2s,transform .2s var(--spring)}
 .btn-ghost:hover{background:rgba(var(--tint),.09);transform:translateY(-1px)}
 .hero-trust{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
 .trust-avs{display:flex}
 .trust-avs span{width:28px;height:28px;border-radius:50%;border:2px solid var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;margin-left:-7px;flex-shrink:0}
 .trust-avs span:first-child{margin-left:0}
 .av1{background:linear-gradient(135deg,var(--blue),var(--cyan))}
 .av2{background:linear-gradient(135deg,var(--violet),#ec4899)}
 .av3{background:linear-gradient(135deg,var(--green),var(--cyan))}
 .av4{background:linear-gradient(135deg,var(--amber),#f97316)}
 .av5{background:linear-gradient(135deg,#ef4444,var(--violet))}
 .trust-text{font-size:.8rem;color:var(--muted-2)}
 .trust-text b{color:var(--text)}
 /* MOCKUP */
 .hero-right{position:relative;z-index:1}
 .mock-shell{position:relative;border-radius:16px;overflow:visible;filter:drop-shadow(0 50px 100px rgba(0,0,0,.55))}
 .mock-frame{border-radius:16px;overflow:hidden;border:1px solid var(--border-2);background:var(--bg-2);box-shadow:0 0 0 1px rgba(var(--tint),.04)}
 .mock-bar{background:var(--bg-3);padding:.72rem 1rem;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--border)}
 .mock-dots{display:flex;gap:5px}
 .mock-dots span{width:10px;height:10px;border-radius:50%}
 .dot-r{background:#ff5f57}.dot-y{background:#ffbd2e}.dot-g{background:#28ca41}
 .mock-url{flex:1;background:rgba(var(--tint),.04);border-radius:6px;padding:.22rem .75rem;font-size:.7rem;color:var(--muted-2);font-family:monospace}
 .mock-body{display:grid;grid-template-columns:170px 1fr}
 .mock-sb{background:var(--bg-3);border-right:1px solid var(--border);padding:.85rem;display:flex;flex-direction:column;gap:.2rem}
 .mock-sb-hd{font-size:.58rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.6rem;padding:.1rem .5rem}
 .m-nav{display:flex;align-items:center;gap:.45rem;padding:.38rem .55rem;border-radius:6px;font-size:.7rem;font-weight:500;color:var(--muted-2)}
 .m-nav.on{background:rgba(37,99,235,.14);color:var(--acc-blue-soft)}
 .m-nav svg{flex-shrink:0;opacity:.8}
 .mock-main{padding:1.1rem;display:flex;flex-direction:column;gap:.85rem}
 .mock-title-row{display:flex;justify-content:space-between;align-items:center}
 .mock-hd{font-size:.8rem;font-weight:700;color:var(--text)}
 .mock-sub{font-size:.62rem;color:var(--muted);background:rgba(var(--tint),.04);padding:.18rem .55rem;border-radius:5px}
 .mock-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
 .ms{background:var(--bg-3);border:1px solid var(--border);border-radius:8px;padding:.6rem .65rem}
 .ms-lbl{font-size:.55rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.2rem}
 .ms-val{font-size:1rem;font-weight:800;line-height:1}
 .ms-spark{margin-top:.3rem;height:20px}
 .mock-acts{display:flex;flex-direction:column;gap:.28rem}
 .m-act{display:flex;align-items:center;gap:.5rem;background:var(--bg-3);border:1px solid var(--border);border-radius:6px;padding:.42rem .6rem}
 .m-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
 .m-txt{font-size:.62rem;flex:1;color:var(--muted-2)}
 .m-tag{font-size:.53rem;padding:.09rem .38rem;border-radius:3px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
 .tg{background:rgba(16,185,129,.15);color:var(--tag-verde,var(--acc-green))}
 .ta{background:rgba(245,158,11,.15);color:var(--acc-amber)}
 .tb{background:rgba(37,99,235,.15);color:var(--acc-blue)}
 .mock-chart{display:flex;align-items:flex-end;gap:3px;height:38px;background:var(--bg-3);border-radius:6px;padding:.45rem .6rem;border:1px solid var(--border)}
 .mbar{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(to top,var(--blue),var(--cyan));opacity:.75;transform-origin:bottom;transition:transform .6s var(--ease-out)}
 /* FLOATING */
 .fl{position:absolute;border-radius:12px;padding:.5rem .85rem;display:flex;align-items:center;gap:.5rem;border:1px solid rgba(var(--tint),.12);box-shadow:0 12px 36px rgba(0,0,0,.4)}
 .fl-1{top:-18px;right:-18px;background:linear-gradient(135deg,rgba(16,185,129,.95),rgba(6,182,212,.95));animation:fl 4s ease-in-out infinite}
 .fl-2{bottom:-18px;left:-18px;background:var(--bg-3);animation:fl 4s ease-in-out infinite;animation-delay:-2s;max-width:230px}
 .fl-3{top:50%;right:-60px;transform:translateY(-50%);background:var(--bg-3);animation:fl 4s ease-in-out infinite;animation-delay:-1s;min-width:150px}
 @keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
 .fl-3{transform:translateY(-50%);animation:fl2 4s ease-in-out infinite;animation-delay:-1s}
 @keyframes fl2{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 7px))}}
 .fl-icon{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
 .fl-txt{font-size:.7rem;line-height:1.35}
 .fl-txt b{display:block;font-weight:700;font-size:.74rem}
 .fl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
 /* STATS BAR */
 .stats-bar{padding:3.5rem clamp(1.5rem,5vw,4rem);max-width:1340px;margin:0 auto;position:relative;z-index:1}
 .stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}
 .stat-item{background:var(--bg-2);padding:1.75rem 2rem;text-align:center;transition:background .2s}
 .stat-item:hover{background:rgba(var(--tint),.02)}
 .stat-num{font-size:2.4rem;font-weight:800;letter-spacing:-1.5px;line-height:1;margin-bottom:.3rem}
 .stat-lbl{font-size:.82rem;color:var(--muted-2);font-weight:500}
 .stat-sub{font-size:.7rem;color:var(--muted);margin-top:.15rem}
 /* TICKER */
 .ticker-wrap{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.7rem 0;overflow:hidden;position:relative;z-index:1;background:rgba(var(--tint),.015)}
 .ticker-wrap::before,.ticker-wrap::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
 .ticker-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
 .ticker-wrap::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
 .ticker{display:flex;gap:2.5rem;width:max-content;animation:ticker 40s linear infinite}
 @keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
 .tick-item{display:flex;align-items:center;gap:.55rem;font-size:.78rem;color:var(--muted-2);white-space:nowrap;flex-shrink:0}
 .tick-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
 /* LOGOS */
 .logos-wrap{padding:3rem clamp(1.5rem,5vw,4rem);max-width:1340px;margin:0 auto;position:relative;z-index:1}
 .logos-lbl{font-size:0.69rem;color:var(--muted);text-transform:uppercase;letter-spacing:2px;text-align:center;margin-bottom:1.75rem;font-weight:600}
 .logos-row{display:flex;align-items:center;justify-content:center;gap:2.75rem;flex-wrap:wrap}
 .logo-it{font-size:.82rem;font-weight:700;color:var(--muted);transition:color .2s;letter-spacing:-.2px}
 .logo-it:hover{color:var(--text)}
 /* SECTION */
 section{position:relative;z-index:1}
 .sec{padding:100px clamp(1.5rem,5vw,4rem);max-width:1340px;margin:0 auto}
 .sec-lbl{font-size:.7rem;font-weight:700;color:var(--cyan);text-transform:uppercase;letter-spacing:2.5px;margin-bottom:.9rem}
 .sec-title{font-size:clamp(1.85rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-1.2px;margin-bottom:.85rem;line-height:1.1}
 .sec-sub{color:var(--muted-2);max-width:480px;font-size:1rem;line-height:1.7}
 .sec-hd{margin-bottom:3.5rem}
 .reveal{opacity:0;transform:translateY(26px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
 .reveal.in{opacity:1;transform:none}
 /* PROBLEM SECTION */
 #problema{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
 .problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
 .problem-list{display:flex;flex-direction:column;gap:.9rem;margin-top:1.75rem}
 .prob-item{display:flex;align-items:flex-start;gap:.85rem;padding:1rem 1.25rem;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15);border-radius:12px}
 .prob-icon{width:32px;height:32px;border-radius:8px;background:rgba(239,68,68,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--acc-red);font-size:1rem}
 .prob-text{font-size:.9rem;color:var(--muted-2);line-height:1.55;padding-top:.1rem}
 .prob-text b{color:var(--text)}
 .solution-list{display:flex;flex-direction:column;gap:.9rem;margin-top:1.75rem}
 .sol-item{display:flex;align-items:flex-start;gap:.85rem;padding:1rem 1.25rem;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.15);border-radius:12px}
 .sol-icon{width:32px;height:32px;border-radius:8px;background:rgba(16,185,129,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--acc-green);font-size:1rem}
 .sol-text{font-size:.9rem;color:var(--muted-2);line-height:1.55;padding-top:.1rem}
 .sol-text b{color:var(--text)}
 /* FEATURES */
 #features{background:var(--bg-2)}
 .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border-radius:16px;overflow:hidden;border:1px solid var(--border)}
 .bc{background:var(--bg-2);padding:2rem;position:relative;overflow:hidden;transition:background .25s;cursor:default}
 .bc::before{content:'';position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(37,99,235,.07),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
 .bc:hover::before{opacity:1}
 .bc:hover{background:rgba(var(--tint),.022)}
 .bc.big{grid-column:span 2;grid-row:span 2;padding:2.5rem}
 .bc.big:hover::before{background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(37,99,235,.08),transparent 60%)}
 .b-tag{display:inline-flex;align-items:center;gap:.35rem;background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.22);color:var(--acc-blue-soft);padding:.22rem .62rem;border-radius:100px;font-size:.66rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.9rem}
 .b-icon{width:42px;height:42px;border-radius:10px;margin-bottom:1.15rem;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--spring)}
 .bc:hover .b-icon{transform:scale(1.1) rotate(-4deg)}
 .bi-blue{background:rgba(37,99,235,.15);color:var(--acc-blue)}
 .bi-cyan{background:rgba(6,182,212,.15);color:var(--acc-cyan)}
 .bi-vio{background:rgba(124,58,237,.15);color:var(--acc-violet)}
 .bi-grn{background:rgba(16,185,129,.15);color:var(--acc-green)}
 .bi-amb{background:rgba(245,158,11,.15);color:var(--acc-amber)}
 .bi-pnk{background:rgba(236,72,153,.15);color:#f472b6}
 .bc h3{font-size:1.05rem;font-weight:700;margin-bottom:.45rem}
 .bc.big h3{font-size:1.35rem;margin-bottom:.6rem}
 .bc p{font-size:.875rem;color:var(--muted-2);line-height:1.65}
 .bc.big p{font-size:.95rem;max-width:420px}
 .bento-vis{margin-top:2rem;background:var(--bg-3);border-radius:10px;padding:1.15rem;border:1px solid var(--border)}
 .nif-row{display:flex;align-items:center;gap:.7rem;background:rgba(var(--tint),.04);border-radius:8px;padding:.65rem .9rem;border:1px solid var(--border);margin-bottom:.5rem}
 .nif-row:last-child{margin-bottom:0}
 .nif-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;flex-shrink:0}
 .nif-info{flex:1}
 .nif-name{font-size:.76rem;font-weight:600}
 .nif-num{font-size:.63rem;color:var(--muted);font-family:monospace}
 .nif-badge{font-size:.6rem;padding:.14rem .48rem;border-radius:4px;font-weight:700}
 .s-ok{background:rgba(16,185,129,.15);color:var(--acc-green)}
 .s-pd{background:rgba(245,158,11,.15);color:var(--acc-amber)}
 /* STEPS */
 #como{background:var(--bg)}
 .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
 .steps::before{content:'';position:absolute;top:26px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--border-2),transparent);pointer-events:none}
 /* min-width:0 porque um item de grelha nao encolhe abaixo do seu conteudo
por omissao: basta uma palavra comprida, ou uma fonte mais larga do que
a esperada, para o cartao empurrar a pagina para fora do ecra. Passou
despercebido meses porque no Mac o Onest carrega e cabe; no CI, com
outras metricas de fonte, transbordava a 320px.
O overflow-wrap trata do caso da palavra comprida. */
 .step{padding:2rem 1.5rem;text-align:center;min-width:0;overflow-wrap:break-word;transition:transform .3s var(--spring)}
 .step:hover{transform:translateY(-5px)}
 .step-n{width:52px;height:52px;border-radius:50%;margin:0 auto 1.25rem;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;background:var(--bg-3);border:1px solid var(--border-2);position:relative;z-index:1;transition:border-color .3s,box-shadow .3s,background .3s}
 .step:hover .step-n{border-color:rgba(37,99,235,.5);box-shadow:0 0 0 6px rgba(37,99,235,.08);background:rgba(37,99,235,.1)}
 .step-n span{color:var(--acc-blue)}
 .step h3{font-size:.95rem;font-weight:700;margin-bottom:.4rem}
 .step p{font-size:.85rem;color:var(--muted-2);line-height:1.6}
 /* PRICING */
 #precos{background:var(--bg-2)}
 .p-entrada{max-width:740px;font-size:.88rem;color:var(--muted-2);margin:0 0 1rem;line-height:1.55}
 .p-steps{display:flex;flex-direction:column;gap:.75rem;max-width:740px;margin-bottom:2.5rem}
 .p-step{display:flex;align-items:center;gap:1.5rem;background:var(--bg-3);border:1px solid var(--border);border-radius:16px;padding:1.75rem 2rem;transition:border-color .2s,transform .25s var(--spring)}
 .p-step:hover{border-color:var(--border-2);transform:translateX(4px)}
 .p-feat{background:linear-gradient(145deg,rgba(37,99,235,.1),rgba(6,182,212,.05));border-color:rgba(37,99,235,.35);box-shadow:0 0 0 1px rgba(37,99,235,.1),0 16px 48px rgba(37,99,235,.1)}
 .p-feat:hover{border-color:rgba(37,99,235,.55)}
 .p-num{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:var(--bg-2);border:1.5px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800}
 .p-info{flex:1}
 .p-lbl{font-size:.95rem;font-weight:700;margin-bottom:.3rem}
 .p-desc{font-size:.82rem;color:var(--muted-2);line-height:1.6}
 .p-price{font-size:2.2rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;flex-shrink:0;text-align:right}
 .p-price sup{font-size:.9rem;vertical-align:super;font-weight:500}
 .p-price small{font-size:.72rem;font-weight:400;color:var(--muted);display:block;margin-top:.15rem;text-align:right}
 .p-arrow{display:flex;flex-direction:column;align-items:center;gap:.25rem;color:var(--muted);padding:.35rem 0}
 .p-arrow span{font-size:0.69rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}
 .p-inc{max-width:740px;background:var(--bg-3);border:1px solid var(--border);border-radius:16px;padding:2rem}
 .p-inc-hd{font-size:0.69rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:1.2rem}
 .p-inc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:0}
 .pi{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--acc-text-2)}
 .pi svg{color:var(--cyan);flex-shrink:0}
 /* EMPRESAS DE GESTÃO */
 #empresas{background:var(--bg)}
 /* Quem vê o quê: os três papéis (revisão de 14/10) */
 .papeis{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
 .papel{background:var(--bg-3);border:1px solid var(--border);border-radius:16px;padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.9rem}
 .papel.destaque{border-color:rgba(37,99,235,.4);box-shadow:0 0 0 1px rgba(37,99,235,.15) inset}
 .papel-cab{display:flex;align-items:center;gap:.75rem}
 .papel-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25);flex-shrink:0}
 .papel h3{font-size:1.1rem;font-weight:800;margin:0}
 .papel .papel-quem{font-size:.8rem;color:var(--muted-2);margin:0}
 .papel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
 .papel li{font-size:.86rem;line-height:1.45;display:flex;gap:.55rem;align-items:flex-start}
 .papel li::before{content:'✓';color:var(--acc-green);font-weight:800;flex-shrink:0}
 .papel li.nao{color:var(--muted-2)}
 .papel li.nao::before{content:'—';color:var(--muted)}
 @media(max-width:860px){.papeis{grid-template-columns:1fr}}
 .emp-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:start}
 .emp-args{display:flex;flex-direction:column;gap:1.75rem}
 .emp-arg{display:flex;gap:1.1rem;align-items:flex-start}
 .emp-ico{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25);color:var(--acc-blue)}
 .emp-arg h3{font-size:1rem;font-weight:700;margin-bottom:.35rem}
 .emp-arg p{font-size:.88rem;color:var(--muted-2);line-height:1.65;max-width:52ch}
 .emp-calc{background:var(--bg-3);border:1px solid var(--border);border-radius:16px;padding:1.75rem;position:sticky;top:96px}
 .emp-calc-row{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.1rem}
 .emp-lbl{font-size:.78rem;font-weight:700;color:var(--muted-2)}
 .emp-num{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;max-width:9rem}
 .emp-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
 .emp-seg-btn{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.6rem .4rem;border-radius:10px;border:1.5px solid var(--border);background:rgba(var(--tint),.04);color:var(--text);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
 .emp-seg-btn small{font-size:.72rem;color:var(--muted-2);font-weight:500}
 .emp-seg-btn.on{border-color:rgba(37,99,235,.6);background:rgba(37,99,235,.12)}
 .emp-seg-btn.on small{color:var(--acc-blue)}
 .emp-seg-btn:focus-visible{outline:2px solid var(--acc-blue);outline-offset:2px}
 .emp-total{display:flex;flex-direction:column;gap:.5rem;padding-top:1.1rem;border-top:1px solid var(--border)}
 .emp-total-lbl{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}
 .emp-total-val{font-size:2.4rem;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-1px}
 .emp-total-nota{font-size:.78rem;color:var(--muted-2);line-height:1.55}
 .emp-fine{font-size:.73rem;color:var(--muted);margin-top:.75rem;text-align:center;line-height:1.5}
 @media(max-width:900px){.emp-grid{grid-template-columns:1fr}.emp-calc{position:static}}
 @media(max-width:960px){.nav-links{gap:1.1rem}.nav-cta{padding:.46rem .85rem;font-size:.8rem}.nav-login{padding:.42rem .8rem;font-size:.8rem}}
 /* PRICING — bloco gestores profissionais */
 a.btn-primary,a.nav-cta,a.mob-cta{text-decoration:none}
 a.nav-cta{display:inline-flex;align-items:center}
 a.mob-cta{display:block;text-align:center}
 section{scroll-margin-top:80px}
 @media(max-width:600px){
   .p-inc-grid{grid-template-columns:1fr}
   .p-inc{padding:1.5rem}
   .p-step{flex-wrap:wrap;gap:1rem 1rem;padding:1.5rem}
   .p-num{order:1}
   .p-price{order:2;margin-left:auto}
   .p-info{order:3;flex:1 1 100%}
 }
 /* TESTIMONIALS */
 #depoimentos{background:var(--bg)}
 .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
 .tcard{padding:1.85rem;border-radius:14px;background:var(--bg-2);border:1px solid var(--border);transition:border-color .25s,transform .3s var(--spring);display:flex;flex-direction:column}
 .tcard:hover{border-color:var(--border-2);transform:translateY(-3px)}
 .stars{display:flex;gap:2px;margin-bottom:1rem}
 .star{color:var(--acc-amber);font-size:.82rem}
 .tcard blockquote{font-size:.9rem;color:var(--acc-text-2);line-height:1.75;margin-bottom:1.25rem;font-style:italic;flex:1}
 .t-auth{display:flex;align-items:center;gap:.75rem}
 .t-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.76rem;flex-shrink:0}
 .t-name{font-size:.85rem;font-weight:700}
 .t-role{font-size:.73rem;color:var(--muted)}
 .ta-a{background:linear-gradient(135deg,var(--blue),var(--cyan))}
 .ta-b{background:linear-gradient(135deg,var(--violet),#ec4899)}
 .ta-c{background:linear-gradient(135deg,var(--green),var(--cyan))}
 .ta-d{background:linear-gradient(135deg,var(--amber),#f97316)}
 .ta-e{background:linear-gradient(135deg,#ef4444,var(--violet))}
 .ta-f{background:linear-gradient(135deg,#ec4899,var(--acc-violet))}
 /* FAQ */
 #faq{background:var(--bg-2)}
 .faq-list{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:.6rem}
 /* Encaminhamento para os guias, no fim da FAQ. Fica aqui porque e o
    momento em que alguem esta com perguntas na cabeca — e porque a
    barra de topo nao aguenta mais um item: medido, transborda a 768px. */
 .faq-guias{margin-top:2.2rem;padding:1.5rem 1.6rem;border-radius:16px;
   background:var(--bg-2);border:1px solid var(--border);
   display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
 .faq-guias h3{margin:0;font-size:1.05rem;font-weight:700;color:var(--text)}
 .faq-guias p{margin:0;font-size:.92rem;color:var(--muted-2);max-width:60ch}
 .faq-guias-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.25rem;
   font-weight:600;font-size:.94rem;color:var(--acc-blue);text-decoration:none;
   transition:gap .2s}
 .faq-guias-link:hover{gap:.65rem}
 .faq-guias-link:focus-visible{outline:2px solid var(--acc-blue);outline-offset:3px;border-radius:4px}
 .faq-item{background:var(--bg-3);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .2s}
 .faq-item.open{border-color:var(--border-2)}
 .faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;cursor:pointer;user-select:none;font-weight:600;font-size:.93rem;transition:color .2s}
 .faq-q:hover{color:var(--acc-blue-soft)}
 .faq-arr{width:20px;height:20px;border-radius:50%;background:rgba(var(--tint),.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s var(--ease-out),background .2s}
 .faq-item.open .faq-arr{transform:rotate(180deg);background:rgba(37,99,235,.18)}
 .faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-out)}
 .faq-a-inner{padding:0 1.5rem 1.25rem;font-size:.88rem;color:var(--muted-2);line-height:1.7}
 .faq-item.open .faq-a{max-height:240px}
 /* CTA FINAL */
 #cta-final{background:var(--bg-2);position:relative;overflow:hidden}
 #cta-final::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(37,99,235,.1),transparent)}
 .cta-box{max-width:700px;margin:0 auto;text-align:center;position:relative;padding:100px clamp(1.5rem,5vw,4rem)}
 .cta-box h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:800;letter-spacing:-1.5px;margin-bottom:1rem;line-height:1.1}
 .cta-box p{color:var(--muted-2);font-size:1rem;max-width:460px;margin:0 auto 1.75rem;line-height:1.7}
 /* o botão a meio, com o mesmo espaço para o texto de cima e para a linha de baixo;
    .cta-box .cta-note porque a regra de cima (.cta-box p) lhe anulava a margem */
 .cta-box .cta-note{font-size:.75rem;color:var(--muted);margin:1.75rem auto 0}
 /* FOOTER */
 .foot-wrap{border-top:1px solid var(--border);max-width:1340px;margin:0 auto}
 footer{padding:2.25rem clamp(1.5rem,5vw,4rem);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;position:relative;z-index:1}
 footer p{color:var(--muted);font-size:.8rem}
 /* Identidade da empresa. Existe por tres razoes: um gestor esta prestes
    a confiar dados de dezenas de pessoas e nao devia faze-lo a um site
    anonimo; o RGPD exige saber-se quem responde pelos dados; e o schema
    so e legitimo se o que ele afirma estiver visivel na pagina. */
 .foot-id{width:100%;border-top:1px solid var(--border);margin-top:1.75rem;padding-top:1.5rem;
   display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:baseline;
   font-style:normal}   /* <address> vem em italico por omissao do browser */
 .foot-id b{font-size:.8rem;font-weight:600;color:var(--muted-2);letter-spacing:-.1px}
 .foot-id span{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
 .foot-id a{color:var(--muted);text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;min-height:24px}
 .foot-id a:hover{color:var(--muted-2)}
 @media(max-width:560px){.foot-id{flex-direction:column;gap:.35rem}}
 .foot-links{display:flex;gap:1.5rem}
 .foot-links a{color:var(--muted);font-size:.8rem;text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;min-height:24px;padding:.15rem 0}
 .foot-links a:hover{color:var(--muted-2)}
 /* MODAL */
 .m-over{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.75);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
 /* O `visibility:hidden` nao e decorativo. So com `opacity:0`, os dialogos
    fechados continuavam na ordem de tabulacao: media-se 33 paragens de Tab
    dentro deles — o formulario de contacto inteiro e o de login, invisiveis
    e sem contexto, no caminho de quem navega por teclado. O `pointer-events`
    ja resolvia o rato; o teclado nao tinha nada.
    O atraso de .2s no visibility deixa o fade de saida acontecer antes de a
    caixa desaparecer, senao o fecho fica seco. */
 .m-over.open{opacity:1;pointer-events:all;visibility:visible;transition:opacity .2s,visibility 0s}
 .modal{background:var(--bg-2);border:1px solid rgba(var(--tint),.1);border-radius:20px;padding:2.5rem;width:100%;max-width:400px;transform:scale(.95) translateY(10px);transition:transform .3s var(--spring);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(var(--tint),.04);position:relative}
 .m-over.open .modal{transform:scale(1) translateY(0)}
 .m-close{position:absolute;top:1rem;right:1rem;background:rgba(var(--tint),.07);border:none;color:var(--muted-2);width:30px;height:30px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;font-family:inherit}
 .m-close:hover{background:rgba(var(--tint),.14)}
 .m-brand{text-align:center;margin-bottom:2rem}
 .m-brand-name{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-size:1.4rem;font-weight:800;letter-spacing:-.5px;color:var(--text)}
 .m-brand-name i{font-style:normal;color:var(--acc-blue)}
 .m-brand-sub{font-size:.72rem;color:var(--muted);margin-top:.15rem}
 .m-title{font-size:1.2rem;font-weight:700;margin-bottom:.3rem}
 /* Uma regra de autor com `display` ganha sempre ao `hidden` da folha de
    estilo do browser. O #avisoSessao tinha `hidden` no HTML e `display:flex`
    aqui, e por isso toda a gente que abria o login lia «a tua sessao expirou
    por inatividade» — incluindo quem nunca tinha tido sessao nenhuma.
    Esta regra fecha a classe inteira do problema, nao so este caso. */
 [hidden]{display:none!important}
 .aviso-sessao{display:flex;align-items:flex-start;gap:.5rem;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);color:var(--acc-amber);border-radius:10px;padding:.6rem .75rem;font-size:.78rem;line-height:1.5;margin:.6rem 0 0}
 .aviso-sessao svg{flex-shrink:0;margin-top:.12rem}
 .m-desc{font-size:.875rem;color:var(--muted-2);margin-bottom:1.7rem;line-height:1.6}
 .m-alt{font-size:.8rem;color:var(--muted-2);margin:-1rem 0 1.4rem;line-height:1.55}
 .m-link{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--acc-blue-soft);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
 .m-link:hover{color:var(--text)}
 .f-grp{margin-bottom:1rem}
 .f-lbl{display:block;font-size:0.69rem;font-weight:700;color:var(--muted-2);margin-bottom:.42rem;text-transform:uppercase;letter-spacing:.8px}
 .f-inp{width:100%;padding:.78rem 1rem;border-radius:10px;background:rgba(var(--tint),.05);border:1.5px solid var(--border);color:var(--text);font-size:.9rem;font-family:inherit;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
 .f-inp::placeholder{color:var(--muted)}
 .f-inp:focus{border-color:var(--blue-line);background:rgba(37,99,235,.07);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
 .f-inp.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.1)}
 .f-hint{font-size:0.69rem;color:var(--muted);margin-top:.28rem}
 .f-err{font-size:.72rem;color:var(--acc-red);margin-top:.28rem;display:none;align-items:center;gap:.3rem}
 .f-err.show{display:flex}
 .pw-wrap{position:relative}
     /* WCAG 2.5.8 pede 24x24 CSS px para um controlo isolado. Links de
    navegacao sem espacamento vertical ficam com a altura da linha —
    medidos 17 a 20px — e no telemovel sao dificeis de acertar. Links
    dentro de uma frase estao isentos e nao levam nada disto. */
 .pw-tog{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);transition:color .2s;
   display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px}
 .pw-tog:hover{background:rgba(var(--tint),.06)}
 .pw-tog:hover{color:var(--text)}
 .btn-login{width:100%;padding:.85rem;border-radius:10px;font-weight:700;font-size:.95rem;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;border:none;cursor:pointer;font-family:inherit;box-shadow:0 4px 20px rgba(37,99,235,.35);transition:transform .2s var(--spring),box-shadow .2s,opacity .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}
 .btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(37,99,235,.45)}
 .btn-login:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
 .spinner{width:16px;height:16px;border:2px solid rgba(var(--tint),.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:none}
 @keyframes spin{to{transform:rotate(360deg)}}
 .l-success{display:none;text-align:center;padding:.5rem 0}
 .l-ring{width:56px;height:56px;border-radius:50%;margin:0 auto 1rem;background:linear-gradient(135deg,var(--green),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:1.5rem;animation:pop .4s var(--spring)}
 @keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
 .l-success h3{font-size:1.15rem;font-weight:700;margin-bottom:.4rem}
 .l-success p{color:var(--muted-2);font-size:.875rem}
 .link-sm{font-size:.77rem;color:var(--acc-blue);text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;min-height:24px;padding:.2rem 0}
 .link-sm:hover{color:var(--acc-blue-soft);text-decoration:underline}
 button.link-sm{background:none;border:0;font-family:inherit;cursor:pointer;min-height:26px}  /* 24 px mesmo com o diálogo a 95 % na abertura */
 .ajuda-pw{margin:-.8rem 0 1.4rem;padding:.85rem .9rem;border-radius:10px;border:1px solid var(--border);background:rgba(var(--tint),.03);font-size:.8rem;line-height:1.55;color:var(--muted-2)}
 .ajuda-pw p{margin:0}
 .ajuda-pw a{color:var(--acc-blue)}
 .rec-linha{display:flex;gap:.5rem;margin:.65rem 0 .2rem}
 .rec-linha .f-inp{flex:1;min-width:0;margin:0}
 .rec-btn{flex-shrink:0;min-height:44px;padding:0 1rem;border-radius:10px;border:1px solid var(--border-2);background:rgba(var(--tint),.05);color:var(--text);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s}
 .rec-btn:hover{background:rgba(var(--tint),.09)}
 .rec-btn:disabled{opacity:.6;cursor:progress}
 .rec-btn:focus-visible{outline:2px solid var(--acc-blue);outline-offset:2px}
 #rec-estado{min-height:1.2em;margin:.45rem 0 .55rem;color:var(--text-2,var(--text))}
 #rec-estado.erro{color:var(--acc-red)}
 #rec-estado:empty{margin:.2rem 0}
 .rec-nota{font-size:.74rem;color:var(--muted)}
 /* MODAL CONTACTO */
 .modal-wide{max-width:520px;max-height:88vh;overflow-y:auto}
 .f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}
 @media(max-width:520px){.f-row{grid-template-columns:1fr}.modal-wide{padding:1.75rem 1.35rem}}
 select.f-inp{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.4rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center}
 select.f-inp option{background:var(--bg-2);color:var(--text)}
 .f-req{color:var(--acc-red);font-weight:700}
 .f-consent{font-size:.71rem;color:var(--muted);line-height:1.55;margin:.2rem 0 1.15rem}
 .f-consent a{color:var(--acc-blue);text-decoration:none}
 .f-consent a:hover{text-decoration:underline}
 .f-fallback{font-size:.72rem;color:var(--acc-red);margin-top:.6rem;display:none;line-height:1.5}
 .f-fallback.show{display:block}
 .f-fallback a{color:var(--acc-blue-soft)}
 /* MOBILE NAV */
 .nav-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.35rem .4rem;border-radius:8px;border:1px solid var(--border);background:transparent;transition:background .2s}
 .nav-ham:hover{background:rgba(var(--tint),.06)}
 .nav-ham span{display:block;width:18px;height:1.5px;background:var(--muted-2);border-radius:2px;transition:transform .28s var(--ease-out),opacity .2s}
 nav.ham-open .nav-ham span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
 nav.ham-open .nav-ham span:nth-child(2){opacity:0;transform:scaleX(0)}
 nav.ham-open .nav-ham span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
 .mob-menu{position:fixed;top:66px;left:0;right:0;background:rgba(var(--bg-rgb),.97);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);padding:1.25rem clamp(1.5rem,5vw,4rem) 1.5rem;display:none;flex-direction:column;gap:.1rem;z-index:99}
 .mob-menu.open{display:flex}
 .mob-menu-link{color:var(--muted-2);text-decoration:none;font-size:.95rem;font-weight:500;padding:.72rem 0;border-bottom:1px solid var(--border);transition:color .2s;display:block}
 .mob-menu-link:hover{color:var(--text)}
 /* Entrar no menu movel. Abaixo dos 720px o .nav-login do topo fica
    display:none e o menu nao tinha login nenhum — quem usava o
    telemovel simplesmente nao conseguia entrar na conta. */
 .mob-login{margin-top:1rem;padding:.8rem;border-radius:10px;font-weight:600;font-size:.9rem;background:transparent;border:1px solid var(--border-2);color:var(--muted-2);cursor:pointer;font-family:inherit;width:100%;transition:all .2s}
 .mob-login:hover{background:rgba(var(--tint),.06);color:var(--text)}
 .mob-cta{margin-top:.6rem;padding:.8rem;border-radius:10px;font-weight:700;font-size:.9rem;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;border:none;cursor:pointer;font-family:inherit;width:100%;transition:opacity .2s}
 .mob-cta:hover{opacity:.88}
 /* FOCUS */
 :focus-visible{outline:2px solid var(--blue-line);outline-offset:3px}
 button:focus-visible,a:focus-visible{outline:2px solid var(--acc-blue);outline-offset:3px}
 /* RESPONSIVE */
 @media(max-width:1100px){.fl-3{display:none}}
 @media(max-width:900px){.hero{grid-template-columns:1fr;gap:3rem}.hero-right{order:-1}.mock-sb{display:none}.mock-body{grid-template-columns:1fr}.problem-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.stats-inner{grid-template-columns:1fr 1fr}.t-grid{grid-template-columns:1fr}}
 @media(max-width:720px){.bento{grid-template-columns:1fr 1fr}.bc.big{grid-column:span 2;grid-row:span 1}.nav-links{display:none}.nav-login{display:none}.nav-ham{display:flex}.mock-stats{grid-template-columns:repeat(2,1fr)}}
 @media(max-width:480px){.bento{grid-template-columns:1fr}.bc.big{grid-column:span 1}.stats-inner{grid-template-columns:1fr}}
 /* Abaixo dos 420px a barra pede 361px de largura — logo, o bloco da
    direita e o hamburguer — e o hamburguer saia 16px para fora do ecra.
    Estava escondido pelo overflow-x:hidden do body, e por isso o teste
    de transbordo nao o via.
    Esconder o CTA aqui nao perde nada: 'Falar connosco' ja esta dentro
    da gaveta do hamburguer, tal como o 'Entrar'. */
 @media(max-width:420px){.nav-cta{display:none}}

 /* SALTAR PARA O CONTEUDO — so visivel com foco de teclado */
 .skip-link{position:absolute;left:0;top:0;transform:translateY(-100px);z-index:9999;background:var(--blue);color:#fff;
   padding:.6rem 1.1rem;border-radius:0 0 8px 0;font-size:.85rem;font-weight:600;text-decoration:none;
   transition:transform .2s var(--ease-out,ease)}
 .skip-link:focus{transform:translateY(0)}

 /* SUPERFICIES DO BROWSER — o que o browser desenha tambem e desenho nosso */
 ::selection{background:rgba(96,165,250,.28);color:#f1f5f9}
 input,textarea,select{caret-color:var(--acc-blue)}
 :root{color-scheme:dark;accent-color:var(--acc-blue)}
 a{text-underline-offset:.18em;text-decoration-thickness:from-font}
 * {scrollbar-width:thin;scrollbar-color:#25344d #0b1628}
 ::-webkit-scrollbar{width:11px;height:11px}
 ::-webkit-scrollbar-track{background:#0b1628}
 ::-webkit-scrollbar-thumb{background:#25344d;border-radius:99px;border:3px solid #0b1628}
 ::-webkit-scrollbar-thumb:hover{background:#33455f}
 ::-webkit-scrollbar-corner{background:#0b1628}

 /* ── BOTAO DE TEMA ── */
 .tema-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
   border-radius:9px;border:1px solid var(--border-2);background:transparent;color:var(--muted-2);
   cursor:pointer;font-family:inherit;flex-shrink:0;
   transition:background .2s,color .2s,border-color .2s}
 .tema-btn:hover{background:rgba(var(--tint),.06);color:var(--text);border-color:var(--border-2)}
 .tema-btn svg{width:16px;height:16px}
 .tema-btn .ico-sol{display:none}
 .tema-btn .ico-lua{display:block}
 :root[data-theme="light"] .tema-btn .ico-sol{display:block}
 :root[data-theme="light"] .tema-btn .ico-lua{display:none}