/* SP.CLICK — refinamento visual e acessibilidade */
html{scroll-padding-top:110px}
body{overflow-wrap:break-word}
header.site{box-shadow:0 3px 18px rgb(11 37 69 / 5%)}
.btn{border-radius:12px;transition:background .18s,box-shadow .18s}
.btn-primary{box-shadow:0 6px 18px rgb(31 79 216 / 18%)}
.btn-primary:hover{box-shadow:0 8px 24px rgb(31 79 216 / 26%)}
.card{border-radius:20px;box-shadow:0 4px 18px rgb(11 37 69 / 3%)}
.card:hover{border-color:var(--accent);box-shadow:0 12px 30px rgb(11 37 69 / 10%)}
.sector{border-radius:18px}
.faq details{border-radius:16px}
nav.main a{padding-block:8px}
.hero{background:radial-gradient(ellipse at 90% 10%,#e1eaff 0,transparent 60%),linear-gradient(140deg,#f8faff,#f0f4fb)}
.hero-media img{box-shadow:0 22px 55px rgb(11 37 69 / 14%)}
.skip-link{position:fixed;top:8px;left:12px;z-index:100;background:#fff;color:#0b2545;padding:12px 20px;transform:translateY(-160%);border:2px solid #1f4fd8;border-radius:8px}
.skip-link:focus{transform:translateY(0)}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin:24px 0 0;padding:0;list-style:none;font-size:13px;font-weight:600;color:#3d5170}
.hero-proof li::before{content:'✓';color:#1f4fd8;margin-right:7px}
@media(min-width:1000px){body.home .hero .wrap{display:grid;grid-template-columns:1fr 1.12fr;gap:48px;padding-block:72px 80px}body.home .hero h1{font-size:clamp(38px,4vw,52px)}body.home .hero .lead{font-size:18px}}
@media(max-width:600px){.hero-proof{gap:8px 16px}.hero-media img{border-radius:18px}.sector div.t{padding:18px}.head{margin-bottom:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

picture{display:contents}
/* Azul e cinzento, com geometria mais sóbria. */
:root{--accent:#2056b8;--tint:#e8effb;--soft:#f2f5f9;--navy-accent:#afc8f5}
.topbar{background:#0b2545}
.hero{background:radial-gradient(ellipse at 95% 5%,#d5e3fa 0,transparent 55%),linear-gradient(130deg,#f6f8fc,#eaf0fa);border-bottom:1px solid #dce5ef}
.hero-copy>.eyebrow{display:inline-block;padding:7px 12px;border-left:3px solid #2056b8;background:#e5edfa;color:#204d91;letter-spacing:.05em}
.hero h1{color:#102e51}
.hero-media img{border:4px solid #fff;box-shadow:0 18px 42px rgb(11 37 69 / 12%)}
.hero-proof li::before{color:#2056b8}
.partners{background:#f7f9fc}
.grid.sw .card,.grid.hw .card{border-top:3px solid #4c78be;background:linear-gradient(155deg,#edf3fc,#fff 65%)}
.grid.sw .card:nth-child(2n),.grid.hw .card:nth-child(2n){border-top-color:#7a91b0;background:linear-gradient(155deg,#f0f3f7,#fff 65%)}
.card:hover{border-color:#2056b8}
section.block.soft{background:#f0f4fa}
.sector{border-bottom:3px solid #9db4d4}
.step{border-top-color:#b6c7df}
.step:nth-child(2n){border-top-color:#7594c2}
.step .n{color:#204d91}
.support{background:linear-gradient(115deg,#0b2545,#173d70)}
.faq details[open]{background:#f0f4fb;border-color:#abc0df}
footer.site{background:#0b2545}
body .btn,body .card,body .sector,body .faq details,body .hero-media img,
body form.lead-form,body .badge,body .ico,body .menu-btn,
body .f input:not([type=radio]),body .f select,body .f textarea,
body .radio,body .form-err,body .form-ok,body .skip-link{border-radius:3px}
body :focus-visible{border-radius:2px}
@media(max-width:600px){body .hero-media img{border-radius:3px}}

/* Integra os fundos brancos dos logótipos nos fundos claros da página. */
.partners img[src="xd.jpg"],.partners img[src="microsoft.jpg"],.partners img[src="cashlogy.jpg"],
.card img[src="xd.jpg"],.card img[src="microsoft.jpg"],.card img[src="cashlogy.jpg"],
img[src="microsoft-logo.png"],img[src="microsoft-logo.webp"],
img[src="xd-software-logo.png"],img[src="xd-software-logo.webp"]{mix-blend-mode:multiply}

/* Direção visual inspirada na referência escolhida pelo utilizador. */
:root{--navy:#081731;--ink:#081731;--body:#4b5f7c;--muted:#566987;--accent:#215fea;--tint:#edf3ff;--soft:#f5f8fd;--navy-accent:#bed2ff;--line:#dfe8f5}
body{background:linear-gradient(180deg,#fff,#f6f9ff 48%,#fff)}
.topbar{background:#081731}
header.site{background:#fff;box-shadow:0 3px 18px rgb(12 28 61 / 5%)}
.hero{background:radial-gradient(circle at 85% 15%,rgb(255 138 30 / 15%),transparent 38%),radial-gradient(circle at 10% 5%,rgb(23 105 255 / 12%),transparent 38%),#fff;border-bottom:0}
.hero-copy>.eyebrow{padding:0;border:0;background:transparent;color:#3153df;letter-spacing:.1em;font-weight:800;font-family:var(--display)}
.hero-copy>.eyebrow::before{content:'';display:inline-block;width:20px;height:3px;background:linear-gradient(90deg,#ef2b88,#ff8a1e);margin-right:10px;vertical-align:middle}
.hero h1{color:#081731;letter-spacing:-.035em;line-height:1.04}
.hero .lead{line-height:1.75}
.hero-media img{border:8px solid #fff;box-shadow:0 18px 55px rgb(12 28 61 / 14%)}
body .btn-primary{background:linear-gradient(110deg,#bb2062,#b64c12);color:#fff;border:0;box-shadow:0 8px 22px rgb(196 40 105 / 20%)}
body .btn-primary:hover{background:linear-gradient(110deg,#a81a56,#a4400d);box-shadow:0 10px 26px rgb(196 40 105 / 25%)}
.hero-proof{gap:10px}
.hero-proof li{padding:7px 10px;background:#fff;border:1px solid #dfe8f5;border-radius:3px}
.hero-proof li::before{color:#215fea}
.partners{background:#fff;border-block:1px solid #e4eaf5}
.eyebrow{color:#3153df}
.grid.sw .card,.grid.hw .card,.grid.sw .card:nth-child(2n),.grid.hw .card:nth-child(2n){position:relative;background:#fff;border:1px solid #dfe8f5;box-shadow:0 12px 34px rgb(12 28 61 / 6%)}
.card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#1769ff,#ef2b88,#ff8a1e);opacity:.55}
.card:hover{border-color:#b4c8ee;box-shadow:0 18px 44px rgb(12 28 61 / 11%)}
.card:hover::after{opacity:1}
.card .more{color:#215fea}
section.block.soft{background:#f3f7fd}
.sector{border:1px solid #dfe8f5;box-shadow:0 8px 26px rgb(12 28 61 / 5%)}
.step{border-top:3px solid #d3dff3}
.step:nth-child(2n){border-top-color:#d3dff3}
.step:first-child{border-top-color:#215fea}
.step:nth-child(3){border-top-color:#d44986}
.step:nth-child(4){border-top-color:#e78648}
.step .n{color:#215fea}
.support{background:linear-gradient(120deg,#081731,#123d88)}
.faq details[open]{background:#f1f5ff;border-color:#b6c9ec}
footer.site{background:#081731}
form.lead-form{box-shadow:0 16px 45px rgb(12 28 61 / 8%)}
@media(min-width:1000px){body.home .hero .wrap{padding-block:70px 72px}}

.whatsapp-icon{display:block;flex:none;width:21px;height:21px}

/* Arredondamento discreto em toda a interface. */
body .btn,body .card,body .sector,body .faq details,body .hero-media img,
body form.lead-form,body .badge,body .ico,body .menu-btn,
body .f input:not([type=radio]),body .f select,body .f textarea,
body .radio,body .form-err,body .form-ok,body .skip-link,
body .hero-proof li,body .hero-copy>.eyebrow{border-radius:7px}
body [class*="card"],body [class*="panel"],body [class*="preview"],
body main img,body main input:not([type=radio]):not([type=checkbox]),
body main select,body main textarea,body main button{border-radius:7px}
body :focus-visible{border-radius:5px}
@media(max-width:600px){body .hero-media img{border-radius:7px}}

/* Marcador decorativo dos links do rodapé. */
footer.site nav a{display:flex;align-items:baseline;gap:12px;padding-block:3px}
footer.site nav a::before{content:'';display:block;flex:0 0 8px;width:8px;height:8px;align-self:flex-start;margin-top:.55em;border-radius:50%;background:linear-gradient(135deg,#ef2b88,#ff8a1e);box-shadow:0 0 0 4px rgb(239 43 136 / 14%)}
footer.site nav a:hover::before,footer.site nav a:focus-visible::before{box-shadow:0 0 0 4px rgb(239 43 136 / 25%)}

/* Mais setores, mantendo cartões legíveis. */
#setores .grid.sectors{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1080px){#setores .grid.sectors{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){#setores .grid.sectors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#setores .grid.sectors{grid-template-columns:1fr}}

/* Botão Início no cabeçalho de todas as páginas públicas. */
nav.main{gap:20px;align-items:center}
nav.main a.nav-home{padding:7px 12px;border:1px solid #c5d3eb;background:#f1f5fc;border-radius:7px;color:#173d70}
nav.main a.nav-home:hover{border-color:#215fea;background:#e7effe}
.mobile-nav a.nav-home{padding:10px 14px;margin-block:8px;border:1px solid #c5d3eb;background:#f1f5fc;border-radius:7px;color:#173d70}
@media(min-width:861px) and (max-width:1120px){nav.main{gap:12px;font-size:14px}header.site .header-cta{padding-inline:14px;font-size:14px}header.site .wrap{gap:12px}}
