/* Distribuidora Pamma — design system v2 */
:root{
  --navy:#163f73;
  --navy-2:#1f4f8a;
  --navy-dark:#0c2547;
  --navy-deep:#081a33;
  --blue:#2f6fa8;
  --sky:#5aa9f0;
  --blue-light:#9cc3ea;
  --blue-soft:#eaf1f9;
  --bg-soft:#f4f8fc;
  --line:#dde6f1;
  --line-strong:#c6d6e8;
  --text:#0f2342;
  --muted:#516882;
  --wa:#1a9e52;
  --wa-2:#14864a;
  --ig:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  --grad:linear-gradient(135deg,#163f73 0%,#2f6fa8 100%);
  --shadow-sm:0 2px 8px rgba(15,35,66,.05);
  --shadow:0 14px 34px rgba(15,35,66,.09);
  --shadow-lg:0 28px 60px rgba(15,35,66,.18);
  --radius:20px;
  --header-h:72px;
  --font-head:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0; color:var(--text); background:#fff; font-family:var(--font-body); font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:3px solid #7fb0e3; outline-offset:2px; border-radius:6px}
h1,h2,h3,h4{font-family:var(--font-head); letter-spacing:-.025em; color:inherit}
.wrap{width:min(1200px, calc(100% - 40px)); margin:0 auto}
.skip{position:absolute; left:-9999px; top:8px; z-index:100; background:#fff; padding:10px 14px; border-radius:10px; font-weight:700}
.skip:focus{left:12px}
.ico{width:20px; height:20px; flex:0 0 20px}
.grad-text{background:linear-gradient(90deg,#7cc0ff,#c7e3ff); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- Topbar ---------- */
.topbar{background:var(--navy-deep); color:#a9bfd8; font-size:13px}
.topbar .wrap{min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.topbar .tb-left{display:flex; align-items:center; gap:18px}
.topbar .tb-left span{display:inline-flex; align-items:center; gap:7px}
.topbar .tb-left .dot{width:7px; height:7px; border-radius:50%; background:#2fd47a; box-shadow:0 0 0 3px rgba(47,212,122,.2)}
.topbar .tb-right{display:flex; align-items:center; gap:16px}
.topbar a{display:inline-flex; align-items:center; gap:6px; color:#dbe7f4}
.topbar a:hover{color:#fff}
.topbar .ico{width:15px; height:15px; flex-basis:15px}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s}
.site-header.scrolled{border-bottom-color:var(--line); box-shadow:0 8px 26px rgba(15,35,66,.07)}
.site-header nav{min-height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:11px}
.brand-mark{width:40px; height:40px; border-radius:12px; background:var(--grad); display:grid; place-items:center; color:#fff; font-family:var(--font-head); font-weight:800; font-size:20px; box-shadow:0 8px 18px rgba(22,63,115,.25)}
.brand-txt{display:flex; flex-direction:column; gap:2px}
.logo{font-family:var(--font-head); font-weight:800; letter-spacing:.02em; line-height:1; background:linear-gradient(90deg, var(--navy) 0%, #3a78b0 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand .logo{font-size:24px}
.brand small{font-size:10px; color:var(--muted); letter-spacing:.16em; text-transform:uppercase; font-weight:700}
.navlinks{display:flex; align-items:center; gap:2px; font-size:14.5px; font-weight:600; color:#2a4466}
.navlinks a{position:relative; padding:10px 14px; border-radius:10px; transition:color .2s}
.navlinks a::after{content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:var(--blue); transform:scaleX(0); transition:transform .25s ease}
.navlinks a:hover{color:var(--navy)}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{transform:scaleX(1)}
.navlinks a[aria-current="page"]{color:var(--navy); font-weight:700}
.nav-right{display:flex; align-items:center; gap:8px}
.icon-btn{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line-strong); background:#fff; color:var(--navy); cursor:pointer; transition:background .2s, transform .2s}
.icon-btn:hover{background:var(--bg-soft); transform:translateY(-1px)}
.icon-btn.ig{color:#c1306b}
.menu-btn{display:none}

/* ---------- Botões ---------- */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 20px; border-radius:12px; font:inherit; font-weight:700; font-size:15px; border:1px solid transparent; cursor:pointer; transition:transform .18s ease, background .18s ease, box-shadow .18s ease; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn::before{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(110deg,transparent,rgba(255,255,255,.35),transparent); transition:left .6s ease}
.btn:hover::before{left:140%}
.btn .ico{width:18px; height:18px; flex-basis:18px}
.btn-wa{color:#fff; background:var(--wa); box-shadow:0 12px 26px rgba(26,158,82,.28)}
.btn-wa:hover{background:var(--wa-2)}
.btn-navy{color:#fff; background:var(--navy); box-shadow:0 12px 26px rgba(22,63,115,.22)}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{color:var(--navy); background:#fff; border-color:var(--line-strong)}
.btn-light{color:var(--navy); background:#fff}
.btn-outline-light{color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.04)}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.btn-ig{color:#fff; background:var(--ig); box-shadow:0 12px 26px rgba(220,39,67,.25)}
.btn-sm{padding:10px 15px; font-size:13.5px}
.btn-lg{padding:16px 24px; font-size:16px}
.link-arrow{display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--blue); transition:gap .2s}
.link-arrow:hover{gap:10px}
.link-arrow .ico{width:18px; height:18px; flex-basis:18px}

/* ---------- Seções ---------- */
.section{padding:96px 0; position:relative}
.section.alt{background:var(--bg-soft)}
.section.dark{background:var(--navy-dark); color:#fff}
.section.tight{padding:64px 0}
.dots{background-image:radial-gradient(rgba(22,63,115,.09) 1px, transparent 1px); background-size:22px 22px}
.section-head{max-width:720px; margin-bottom:40px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head.row{max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:12px}
.kicker::before{content:""; width:18px; height:2px; border-radius:2px; background:currentColor}
.section-head.center .kicker::after{content:""; width:18px; height:2px; border-radius:2px; background:currentColor}
.dark .kicker{color:var(--sky)}
h2{font-size:clamp(30px,3.8vw,46px); line-height:1.08; margin:0 0 14px}
.section-head p{color:var(--muted); font-size:17px; line-height:1.65; margin:0}
.dark .section-head p{color:#b8cbe0}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.lead{margin:0 0 28px; max-width:600px; color:var(--muted); font-size:18px; line-height:1.65}
.actions{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- Hero (home) ---------- */
.hero{position:relative; color:#fff; background:var(--navy-deep); overflow:hidden; isolation:isolate}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 40%; transform:scale(1.04)}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background:
  radial-gradient(900px 500px at 85% 20%, rgba(90,169,240,.22), transparent 60%),
  linear-gradient(100deg, rgba(8,26,51,.97) 0%, rgba(8,26,51,.9) 42%, rgba(12,37,71,.62) 72%, rgba(12,37,71,.45) 100%)}
.hero-grid > *{min-width:0}
.hero h1,.page-head h1{overflow-wrap:break-word}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; padding:92px 0 132px}
.tag{display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#dbe9f7; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(6px)}
.tag .dot{width:7px; height:7px; border-radius:50%; background:#2fd47a; box-shadow:0 0 0 4px rgba(47,212,122,.2); animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(47,212,122,.05)}}
.hero h1{margin:22px 0 20px; font-size:clamp(38px,5.6vw,68px); line-height:1.02; letter-spacing:-.035em; max-width:680px}
.hero .lead{color:#c3d4e7}
.hero .lead strong{color:#fff}
.hero-checks{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:28px; font-size:14px; color:#c3d4e7}
.hero-checks span{display:inline-flex; align-items:center; gap:8px}
.hero-checks i{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:rgba(47,212,122,.16); color:#4fe091; font-style:normal; font-size:11px; font-weight:800}

.quote-card{position:relative; padding:28px; border-radius:24px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(16px); box-shadow:var(--shadow-lg)}
.quote-card h3{margin:0 0 4px; font-size:20px}
.quote-card > p{margin:0 0 18px; color:#b8cbe0; font-size:14px}
.qc-list{display:grid; gap:10px; margin-bottom:20px}
.qc-item{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1)}
.qc-item .qi{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(90,169,240,.18); color:#9fd0ff; flex:0 0 40px}
.qc-item b{display:block; font-size:16px; font-family:var(--font-head)}
.qc-item span{display:block; font-size:12.5px; color:#a9bfd8; margin-top:2px}
.quote-card .btn{width:100%}
.quote-card .qc-foot{margin-top:12px; text-align:center; font-size:12.5px; color:#a9bfd8}
.quote-card .qc-foot a{color:#dbe9f7; text-decoration:underline; text-underline-offset:3px}

/* KPIs sobrepostos ao hero */
.kpis{position:relative; z-index:2; margin-top:-64px}
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lg); overflow:hidden}
.kpi{padding:26px 26px 24px; border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi strong{display:block; font-family:var(--font-head); font-size:32px; letter-spacing:-.03em; color:var(--navy); line-height:1}
.kpi strong small{font-size:18px}
.kpi span{display:block; margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.45}

/* Faixa de marcas */
.brand-strip{padding:46px 0 10px; overflow:hidden}
.brand-strip .label{text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8aa0b8; margin-bottom:22px}
.marquee{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)}
.marquee .track{display:flex; gap:56px; width:max-content; animation:scroll 42s linear infinite}
.marquee span{font-family:var(--font-head); font-weight:800; font-size:22px; color:#9fb2c7; letter-spacing:-.01em; white-space:nowrap; transition:color .2s}
.marquee span:hover{color:var(--navy)}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Cabeçalho de página interna ---------- */
.page-head{position:relative; color:#fff; background:var(--navy-deep); overflow:hidden; isolation:isolate}
.page-head .ph-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.page-head::after{content:""; position:absolute; inset:0; z-index:-1; background:
  radial-gradient(700px 360px at 90% 10%, rgba(90,169,240,.22), transparent 60%),
  linear-gradient(95deg, rgba(8,26,51,.97) 0%, rgba(8,26,51,.86) 50%, rgba(12,37,71,.55) 100%)}
.page-head .wrap{padding:34px 0 32px}
.crumbs{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--blue-light); margin-bottom:10px}
.crumbs a:hover{color:#fff}
.page-head h1{margin:0 0 8px; font-size:clamp(26px,3vw,38px); line-height:1.1; letter-spacing:-.03em; max-width:860px}
.page-head p{margin:0; max-width:720px; color:#c3d4e7; font-size:16px; line-height:1.55}
.page-head .actions{margin-top:28px}

/* ---------- Categorias ---------- */
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.feature{position:relative; padding:28px 26px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s}
.feature::after{content:""; position:absolute; inset:auto -40% -60% auto; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(47,111,168,.10), transparent 70%); transition:transform .4s ease}
.feature:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-strong)}
.feature:hover::after{transform:scale(1.4)}
.feature .fi{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--grad); color:#fff; margin-bottom:20px; box-shadow:0 12px 24px rgba(22,63,115,.22)}
.feature .fi .ico{width:26px; height:26px; flex-basis:26px}
.feature .num{position:absolute; top:22px; right:24px; font-family:var(--font-head); font-weight:800; font-size:14px; color:var(--line-strong)}
.feature h3{margin:0 0 8px; font-size:19px}
.feature p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}
.feature ul{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:7px; font-size:14px; color:var(--muted)}
.feature li{display:flex; gap:8px; align-items:center}
.feature li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); flex:0 0 6px}

/* ---------- Para quem ---------- */
.audience{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.aud{position:relative; min-height:380px; border-radius:24px; overflow:hidden; color:#fff; display:flex; align-items:flex-end; isolation:isolate}
.aud img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s ease}
.aud::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,26,51,.1) 0%, rgba(8,26,51,.55) 45%, rgba(8,26,51,.95) 100%)}
.aud:hover img{transform:scale(1.05)}
.aud-body{padding:32px}
.aud-body .pill{display:inline-block; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px}
.aud-body h3{margin:0 0 8px; font-size:26px}
.aud-body p{margin:0 0 16px; color:#c9d8e8; line-height:1.6; max-width:460px}
.aud-body ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.aud-body li{padding:7px 12px; border-radius:10px; background:rgba(255,255,255,.1); font-size:13px; font-weight:600}

/* ---------- Timeline ---------- */
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative}
.timeline::before{content:""; position:absolute; left:12%; right:12%; top:31px; height:2px; background:repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px)}
.tl{position:relative; text-align:center; padding:0 6px}
.tl .n{position:relative; z-index:1; width:64px; height:64px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:20px; color:#fff; background:var(--grad); box-shadow:0 0 0 8px var(--bg-soft), 0 14px 28px rgba(22,63,115,.25)}
.section:not(.alt) .tl .n{box-shadow:0 0 0 8px #fff, 0 14px 28px rgba(22,63,115,.25)}
.tl h3{margin:0 0 6px; font-size:18px}
.tl p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.55}

/* Passos (cards) */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.step{padding:26px; position:relative}
.step .n{font-family:var(--font-head); font-size:38px; font-weight:800; letter-spacing:-.04em; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.step h3{margin:14px 0 6px; font-size:18px}
.step p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.55}

/* ---------- Banda de condições (dark) ---------- */
.terms{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.term{padding:26px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition:background .2s, transform .2s}
.term:hover{background:rgba(255,255,255,.08); transform:translateY(-3px)}
.term small{display:block; color:var(--sky); font-weight:800; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase}
.term strong{display:block; margin:10px 0 8px; font-family:var(--font-head); font-size:26px; letter-spacing:-.02em}
.term p{margin:0; color:#b8cbe0; font-size:14px; line-height:1.55}

/* ---------- Política ---------- */
.policy-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.policy{padding:28px; position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s}
.policy:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.policy .pi{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--blue-soft); color:var(--navy); margin-bottom:18px}
.policy small{display:block; color:var(--blue); font-weight:800; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px}
.policy strong{display:block; font-family:var(--font-head); font-size:26px; letter-spacing:-.02em; margin-bottom:8px}
.policy p{margin:0; color:var(--muted); line-height:1.6; font-size:14.5px}
.policy.wide{grid-column:span 2}
.policy.feature-card{background:var(--grad); color:#fff; border:0}
.policy.feature-card small{color:var(--blue-light)}
.policy.feature-card p{color:#d3e2f2}
.policy.feature-card .pi{background:rgba(255,255,255,.14); color:#fff}
.note{margin:18px 2px 0; font-size:13.5px; color:var(--muted)}
.legal{margin:16px 2px 0; font-size:12.5px; color:var(--muted); line-height:1.5}

/* FAQ */
.faq{display:grid; gap:12px; max-width:880px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:16px; padding:0 22px; transition:box-shadow .2s, border-color .2s}
.faq details[open]{box-shadow:var(--shadow); border-color:var(--line-strong)}
.faq summary{cursor:pointer; list-style:none; padding:20px 0; font-weight:700; font-family:var(--font-head); font-size:16.5px; display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:0 0 30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--blue-soft); color:var(--navy); font-size:18px; line-height:1}
.faq details[open] summary::after{content:"–"; background:var(--navy); color:#fff}
.faq details p{margin:0 0 20px; color:var(--muted); line-height:1.65}

/* ---------- Empresa ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.media-stack{position:relative; padding:0 0 40px 40px}
.media-stack .m1{width:100%; height:auto; aspect-ratio:4/3.2; object-fit:cover; border-radius:24px; box-shadow:var(--shadow-lg)}
.media-stack .m2{position:absolute; left:0; bottom:0; width:44%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:20px; border:6px solid #fff; box-shadow:var(--shadow-lg)}
.media-stack .badge-float{position:absolute; right:-14px; top:26px; padding:14px 16px; border-radius:16px; background:#fff; box-shadow:var(--shadow); display:flex; gap:12px; align-items:center; max-width:250px}
.badge-float .bi{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--grad); color:#fff; flex:0 0 42px}
.badge-float b{display:block; font-size:14px}
.badge-float span{display:block; font-size:12.5px; color:var(--muted)}
.media-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:14px}
.media-grid img{width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; border-radius:20px; box-shadow:var(--shadow)}
.media-grid img:last-child{margin-top:48px}
.check-list{display:grid; gap:12px; margin:26px 0 0}
.check{display:flex; gap:14px; align-items:flex-start; padding:16px 18px}
.check i{width:28px; height:28px; flex:0 0 28px; border-radius:9px; display:grid; place-items:center; background:var(--grad); color:#fff; font-style:normal; font-size:13px; font-weight:800}
.check span{color:var(--muted); line-height:1.55; font-size:15px}
.check strong{color:var(--text)}

/* Galeria bento */
.bento{display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:240px 240px; gap:14px}
.bento figure{margin:0; position:relative; border-radius:22px; overflow:hidden; isolation:isolate}
.bento figure:first-child{grid-row:1/3}
.bento figure:nth-child(4){grid-column:2/4}
.bento img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.bento figure::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%, rgba(8,26,51,.75))}
.bento figure:hover img{transform:scale(1.05)}
.bento figcaption{position:absolute; left:18px; bottom:16px; z-index:1; color:#fff; font-weight:700; font-family:var(--font-head); font-size:16px}
.bento figcaption small{display:block; font-family:var(--font-body); font-weight:500; font-size:12.5px; color:#c9d8e8}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.gallery figure{margin:0; position:relative; border-radius:20px; overflow:hidden}
.gallery img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute; left:12px; bottom:12px; padding:6px 10px; border-radius:8px; background:rgba(8,26,51,.84); color:#fff; font-size:12.5px; font-weight:700}

/* Marcas (grade) */
.brand-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.brand-tile{display:grid; place-items:center; min-height:84px; padding:12px; text-align:center; font-family:var(--font-head); font-weight:800; font-size:17px; color:#4a6482; background:#fff; border:1px solid var(--line); border-radius:16px; transition:color .2s, border-color .2s, box-shadow .2s, transform .2s}
.brand-tile:hover{color:var(--navy); border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-3px)}
.brand-tile.more{color:var(--muted); font-weight:600; font-family:var(--font-body); font-size:14px; border-style:dashed; background:transparent}

/* Instagram */
.ig-block{display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center; padding:34px 38px; border-radius:26px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); position:relative; overflow:hidden}
.ig-block::before{content:""; position:absolute; right:-60px; top:-80px; width:260px; height:260px; border-radius:50%; background:var(--ig); opacity:.08}
.ig-avatar{width:76px; height:76px; border-radius:50%; padding:3px; background:var(--ig)}
.ig-avatar span{display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:#fff; font-family:var(--font-head); font-weight:800; font-size:14px; color:var(--navy)}
.ig-block h3{margin:0 0 6px; font-size:24px}
.ig-block p{margin:0; color:var(--muted); line-height:1.55}
.ig-block .handle{display:inline-flex; align-items:center; gap:6px; color:#c1306b; font-weight:700; margin-bottom:6px; font-size:14px}

/* CTA final */
.cta-band{position:relative; overflow:hidden; isolation:isolate; border-radius:28px; padding:56px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; color:#fff; background:var(--navy-dark)}
.cta-band .cta-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.35}
.cta-band::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(600px 300px at 90% 0%, rgba(90,169,240,.28), transparent 60%), linear-gradient(90deg, rgba(8,26,51,.96), rgba(12,37,71,.78))}
.cta-band h2{color:#fff; margin:0 0 10px; font-size:clamp(26px,3.2vw,38px)}
.cta-band p{margin:0; color:#c9d8e8; line-height:1.6; max-width:560px}

/* ---------- Contato ---------- */
.contact-box{display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; border-radius:26px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg)}
.contact-info{position:relative; padding:38px; background:var(--grad); color:#dbe6f3; overflow:hidden}
.contact-info::after{content:""; position:absolute; right:-80px; bottom:-80px; width:260px; height:260px; border-radius:50%; border:40px solid rgba(255,255,255,.06)}
.contact-info .kicker{color:var(--blue-light)}
.contact-info h2{margin:6px 0 12px; font-size:32px; line-height:1.12; color:#fff}
.contact-info p{line-height:1.65; margin:0 0 8px}
.contact-line{display:flex; gap:14px; align-items:flex-start; margin-top:22px; position:relative; z-index:1}
.contact-line .cl-ico{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; flex:0 0 40px}
.contact-line strong{display:block; color:#fff; font-size:14px}
.contact-line span, .contact-line a{display:block; margin-top:3px; color:#dbe6f3}
.contact-line a:hover{text-decoration:underline}
a.contact-line{align-items:center; color:#fff; padding:6px; margin-left:-6px; border-radius:14px; transition:background .2s}
a.contact-line:hover{background:rgba(255,255,255,.08)}
a.contact-line:hover .cl-ico{background:var(--ig)}
.ig-text{display:inline-flex; align-items:center; gap:8px}
.ig-text .ico{width:17px; height:17px; flex-basis:17px}
.form{padding:38px}
.form h3{margin:0 0 4px; font-size:22px}
.form > p{margin:0 0 22px; color:var(--muted); font-size:14.5px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:grid; gap:7px}
.field.full{grid-column:1/-1}
label{font-size:13px; font-weight:700; color:#2a4466}
label em{font-style:normal; font-weight:500; color:var(--muted)}
input,textarea,select{width:100%; border:1px solid var(--line-strong); background:#fbfdff; color:var(--text); border-radius:12px; padding:13px 14px; font:inherit; font-size:15px; min-height:50px; transition:border-color .2s, box-shadow .2s, background .2s}
textarea{min-height:120px; resize:vertical}
input::placeholder,textarea::placeholder{color:#7a8ea4}
input:focus,textarea:focus,select:focus{outline:none; background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(47,111,168,.14)}
.form .btn{width:100%; padding:16px 18px; font-size:16px}
.fine{font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.5}
.info-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px}
.info-card{padding:24px; display:flex; gap:14px; align-items:flex-start; transition:transform .2s, box-shadow .2s}
.info-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.info-card .fi{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--blue-soft); color:var(--navy); flex:0 0 46px}
.info-card .fi.ig{background:var(--ig); color:#fff}
.info-card .fi.wa{background:#e6f6ec; color:var(--wa)}
.info-card b{display:block; font-size:15.5px; font-family:var(--font-head)}
.info-card span{display:block; color:var(--muted); font-size:14px; margin-top:3px}
.info-card a.more{display:inline-block; margin-top:8px; font-weight:700; color:var(--blue); font-size:14px}
.map{margin-top:20px; border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); height:380px; background:var(--bg-soft)}
.map iframe{width:100%; height:100%; border:0; display:block; filter:saturate(.85)}

/* ---------- Footer ---------- */
.site-footer{position:relative; padding:70px 0 30px; background:var(--navy-deep); color:#a9bfd8; font-size:14px; overflow:hidden}
.site-footer::before{content:""; position:absolute; left:50%; top:-200px; width:900px; height:400px; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(90,169,240,.12), transparent)}
.footer-grid{position:relative; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px}
.site-footer .brand .logo{background:none; color:#fff}
.site-footer .brand small{color:#8fa6c0}
.site-footer h4{margin:0 0 14px; color:#fff; font-size:14px; letter-spacing:.02em}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.site-footer a{transition:color .2s}
.site-footer a:hover{color:#fff}
.social{display:flex; gap:10px; margin-top:20px}
.social a{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:#fff; transition:background .2s, transform .2s}
.social a:hover{transform:translateY(-2px)}
.social a.ig:hover{background:var(--ig)}
.social a.wa:hover{background:var(--wa)}
.footer-bottom{position:relative; margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:#7f97b2}

/* WhatsApp flutuante (só mobile; no desktop o header já tem o CTA) */
.fab{display:none; position:fixed; right:20px; bottom:20px; z-index:65; width:58px; height:58px; border-radius:50%; place-items:center; background:var(--wa); color:#fff; box-shadow:0 14px 30px rgba(26,158,82,.35); transition:transform .2s}
.fab::before{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:ring 2.4s infinite}
@keyframes ring{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.6); opacity:0}}
.fab:hover{transform:scale(1.06)}
.fab .ico{width:28px; height:28px; flex-basis:28px}

/* Revelar ao rolar */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  .marquee .track{flex-wrap:wrap; width:auto; justify-content:center; row-gap:16px}
}

/* ---------- Responsivo ---------- */
@media (max-width:1100px){
  .navlinks{display:none; position:absolute; left:0; right:0; top:var(--header-h); flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 18px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 18px 32px rgba(15,35,66,.1)}
  .navlinks a{padding:15px 6px; border-radius:0; border-bottom:1px solid var(--line)}
  .navlinks a::after{display:none}
  .navlinks a[aria-current="page"]{color:var(--blue)}
  .navlinks.open{display:flex}
  .menu-btn{display:grid}
}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:36px; padding:64px 0 110px}
  .quote-card{max-width:560px}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .kpi:nth-child(2){border-right:0}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .split,.contact-box{grid-template-columns:1fr}
  .features,.steps,.terms{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr; row-gap:36px}
  .timeline::before{display:none}
  .audience{grid-template-columns:1fr}
  .policy-grid{grid-template-columns:1fr 1fr}
  .policy.wide{grid-column:1/-1}
  .brand-grid{grid-template-columns:repeat(4,1fr)}
  .info-cards{grid-template-columns:1fr}
  .ig-block{grid-template-columns:auto 1fr}
  .ig-block .btn{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > div:first-child{grid-column:1/-1}
  .media-stack{max-width:620px}
}
@media (max-width:640px){
  :root{--header-h:64px}
  .wrap{width:calc(100% - 28px)}
  .topbar .tb-left span:not(:first-child){display:none}
  .topbar .tb-right a span{display:none}
  .brand-mark{width:36px; height:36px; font-size:18px}
  .brand .logo{font-size:21px}
  .brand small{display:none}
  .nav-right{gap:6px}
  .nav-right .hdr-wa{display:none}
  .fab{display:grid}
  .icon-btn{width:40px; height:40px}
  .hero-grid{padding:44px 0 96px}
  .hero .lead{font-size:16.5px}
  .actions .btn{flex:1 1 100%}
  .quote-card{padding:20px}
  .kpis{margin-top:-56px}
  .kpi{padding:18px 16px}
  .kpi strong{font-size:24px}
  .kpi span{font-size:12.5px}
  .page-head .wrap{padding:26px 0 24px}
  .page-head p{font-size:14.5px}
  .section{padding:64px 0}
  .section.tight{padding:48px 0}
  .features,.policy-grid,.form-grid,.steps,.terms,.timeline{grid-template-columns:1fr}
  .tl{display:grid; grid-template-columns:56px 1fr; gap:16px; text-align:left; padding:0}
  .tl .n{width:52px; height:52px; margin:0; font-size:17px}
  .brand-grid{grid-template-columns:repeat(3,1fr)}
  .brand-tile{min-height:62px; font-size:14px}
  .aud{min-height:340px}
  .aud-body{padding:24px}
  .media-stack{padding:0 0 30px 22px}
  .media-stack .badge-float{display:none}
  .media-grid img:last-child{margin-top:28px}
  .bento{grid-template-columns:1fr 1fr; grid-template-rows:200px 160px 160px}
  .bento figure:first-child{grid-row:auto; grid-column:1/-1}
  .bento figure:nth-child(4){grid-column:1/-1}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery figure:first-child{grid-column:1/-1}
  .gallery figure:first-child img{aspect-ratio:4/3}
  .ig-block{grid-template-columns:1fr; padding:26px; text-align:center; justify-items:center}
  .ig-block .btn{width:100%}
  .cta-band{grid-template-columns:1fr; padding:34px 24px}
  .contact-info,.form{padding:26px}
  .contact-info h2{font-size:27px}
  .map{height:300px}
  .footer-grid{grid-template-columns:1fr}
  body{padding-bottom:76px}
}

/* Conteúdo visível sem rolar: 1ª seção logo após o cabeçalho da página fica mais próxima */
.page-head + .section{padding-top:40px}
.page-head + .section .split{align-items:start}
.page-head + .section .section-head{margin-bottom:24px}
.page-head + .section .media-grid img{aspect-ratio:4/5}
.page-head + .section .media-grid img:last-child{margin-top:32px}
@media (max-width:640px){ .page-head + .section{padding-top:28px} }
.page-head + .section .section-head h2{font-size:clamp(22px,2.4vw,30px)}
.page-head + .section .reveal{opacity:1; transform:none}