/* Consultoria Fluxo — site v5 (22/10/2026) [versao Claude]
   Segue o Design System Fluxo v1 (05_MARKETING/1_Marca/Design System - Fluxo). */
:root{
  --navy:#112546; --navy-950:#0A1830; --navy-800:#1A3461; --navy-700:#2A4675;
  --blue:#5E86C1; --blue-700:#3E67A3; --blue-300:#A9C0E2; --blue-100:#DCE6F4; --blue-50:#EEF3FA;
  --ink:#121C2E; --ink-2:#3E4A5E; --ink-3:#6B7588; --line:#DBE1EB; --mist:#F4F6FA; --white:#fff;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --label:"Saira","Arial Narrow",system-ui,sans-serif;
  --display:clamp(2.6rem,5.2vw + .6rem,4.75rem);
  --h2:clamp(1.9rem,2.4vw + .6rem,2.75rem);
  --stat:clamp(2.75rem,4vw + .5rem,4.5rem);
  --wrap:1240px; --section:clamp(88px,11vw,160px);
  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.125rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.018em;color:var(--navy)}
p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}
@media (min-width:720px){.wrap{padding-inline:40px}}
.label{font:600 .75rem/1.2 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--blue-700)}
.on-navy .label{color:var(--blue-300)}
.accent{color:var(--blue)}
.on-navy .accent{color:var(--blue-300)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Botões e links ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:.6em;font:600 1rem/1 var(--sans);text-decoration:none;padding:1.05rem 1.5rem;border-radius:2px;transition:color .35s var(--ease),box-shadow .35s var(--ease)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn-navy{background:var(--navy);color:#fff}.btn-navy::before{background:var(--navy-800)}
.btn-white{background:#fff;color:var(--navy)}.btn-white::before{background:var(--blue-100)}
.btn-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}.btn-ghost::before{background:#fff}.btn-ghost:hover{color:var(--navy)}
.more{display:inline-flex;align-items:center;gap:.5em;font:600 1rem/1.3 var(--sans);color:var(--navy);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease),gap .35s var(--ease);padding-bottom:2px}
.more::after{content:"→";color:var(--blue);transition:transform .35s var(--ease)}
.more:hover{background-size:100% 1px}
.more:hover::after{transform:translateX(4px)}
.on-navy .more{color:#fff}

/* ---------- Cabeçalho ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.top.scrolled{border-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;transition:height .35s var(--ease)}
.top.scrolled .wrap{height:64px}
.top .brand img{height:34px;width:auto;transition:height .35s var(--ease)}
.top.scrolled .brand img{height:30px}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}
.nav{display:flex;align-items:center;gap:32px}
.nav > a:not(.btn),.nav .dd > a{font:500 .97rem/1 var(--sans);color:var(--ink-2);text-decoration:none;padding:8px 0;background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease),color .2s}
.nav > a:not(.btn):hover,.nav .dd:hover > a,.nav a[aria-current]{color:var(--navy);background-size:100% 1px}
.nav .btn{padding:.8rem 1.15rem;font-size:.92rem}
/* menu de práticas */
.dd{position:relative}
.dd > a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
.dd:hover > a::after,.dd:focus-within > a::after{transform:translateY(0) rotate(225deg)}
.mega{position:absolute;left:50%;top:100%;width:min(760px,90vw);transform:translate(-50%,10px);opacity:0;visibility:hidden;background:#fff;border:1px solid var(--line);border-top:2px solid var(--navy);box-shadow:0 24px 48px -24px rgba(10,24,48,.28);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.dd:hover .mega,.dd:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.mega a{display:grid;grid-template-columns:36px 1fr;gap:2px 10px;padding:14px 12px;text-decoration:none;border-radius:2px;transition:background .2s}
.mega a:hover{background:var(--blue-50)}
.mega a i{grid-row:span 2;font:300 1.4rem/1 var(--serif);font-style:normal;color:var(--blue)}
.mega a b{font:500 1.05rem/1.25 var(--serif);color:var(--navy)}
.mega a span{font-size:.86rem;color:var(--ink-3);line-height:1.4}
/* menu mobile */
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:11px;width:22px;height:1.5px;background:var(--navy);content:"";transition:transform .3s var(--ease),opacity .2s}
.burger span{top:21px}.burger span::before{top:-7px;left:0}.burger span::after{top:7px;left:0}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(7px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none}
@media (max-width:900px){
  .nav > a:not(.btn),.nav .dd{display:none}
  .burger{display:block}
  .mnav{display:block;position:fixed;inset:64px 0 0;background:#fff;z-index:49;padding:24px 20px 40px;overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .menu-open .mnav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .mnav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;font:400 1.35rem/1.3 var(--serif);color:var(--navy)}
  .mnav .sub a{font:500 1rem/1.3 var(--sans);color:var(--ink-2);padding-left:16px}
  .menu-open{overflow:hidden}
}
@media (max-width:420px){.nav .btn{display:none}}

/* ---------- Assinatura: o X ---------- */
.xmark{position:absolute;pointer-events:none;will-change:transform}
.xmark .a{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1;vector-effect:non-scaling-stroke}
.xmark .b{fill:var(--blue);opacity:.28}

/* ---------- Faixas navy ---------- */
.on-navy{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.on-navy h1,.on-navy h2,.on-navy h3{color:#fff}
.cut-top{background:transparent}
.cut-top.after-mist{background:var(--mist)}
.cut-top > .bg{position:absolute;inset:0;background:var(--navy);clip-path:polygon(0 64px,100% 0,100% 100%,0 100%);overflow:hidden}
.cut-top > .wrap{position:relative;padding-top:calc(var(--section) + 40px)}

/* ---------- Hero ---------- */
.hero{min-height:min(92vh,860px);display:flex;align-items:flex-end}
.hero .wrap{position:relative;z-index:1;width:100%;padding-block:clamp(120px,16vh,180px) clamp(72px,10vh,112px)}
.hero h1{font-size:var(--display);font-weight:300;line-height:1.04;letter-spacing:-.025em;max-width:13.5em;margin-top:28px}
.hero h1 .accent{font-weight:400}
.hero .lede{font-size:1.3rem;line-height:1.55;color:rgba(255,255,255,.82);max-width:34em;margin-top:32px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:44px}
.hero .xmark{right:-6%;top:-4%;height:112%;width:auto}
.hero .tags{margin-top:72px;padding-top:24px;border-top:1px solid var(--navy-700);display:flex;flex-wrap:wrap;gap:8px 28px;font:500 .9rem/1.4 var(--sans);color:rgba(255,255,255,.7)}
.hero .tags a{text-decoration:none;transition:color .2s}.hero .tags a:hover{color:#fff}
.scroll-cue{position:absolute;left:50%;bottom:22px;width:1px;height:44px;background:rgba(255,255,255,.18);overflow:hidden;z-index:1}
.scroll-cue::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:var(--blue-300);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{top:-100%}60%,100%{top:100%}}
@media (max-width:720px){.hero .xmark{opacity:.55;right:-40%}.scroll-cue{display:none}}

/* ---------- Seções ---------- */
.sec{padding-block:var(--section)}
.sec-head{display:grid;gap:20px;margin-bottom:clamp(48px,6vw,80px);max-width:900px}
.sec-head h2{font-size:var(--h2)}
.sec-head .lede{font-size:1.3125rem;line-height:1.55;color:var(--ink-2);max-width:36em}
.on-navy .sec-head .lede{color:rgba(255,255,255,.75)}
.mist{background:var(--mist)}

/* números */
.stats{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.stats::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--navy);transform-origin:left}
.stat{padding:32px 28px 0 0}
.stat + .stat{padding-left:28px;border-left:1px solid var(--line)}
.stat b{display:block;font:300 var(--stat)/1 var(--serif);letter-spacing:-.03em;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.stat b small{font-size:.5em;letter-spacing:0;margin-right:.08em;color:var(--blue)}
.stat .d{display:block;margin-top:16px;font-size:1rem;line-height:1.5;color:var(--ink-2);max-width:15em}
.stats.n2{grid-template-columns:repeat(2,minmax(0,360px))}
.stats.n1{grid-template-columns:minmax(0,420px)}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:0;padding-left:0}.stat{padding-bottom:32px}}
@media (max-width:480px){.stats,.stats.n2{grid-template-columns:1fr}.stat + .stat{border-left:0;padding-left:0;border-top:1px solid var(--line)}}

/* clientes */
.clients .wrap{padding-block:clamp(56px,7vw,88px)}
.clients-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 40px;margin-bottom:40px}
.clients-head p{font:400 clamp(1.3rem,1.2vw + .8rem,1.65rem)/1.3 var(--serif);color:var(--navy);max-width:30em}
.logos{display:grid;grid-template-columns:repeat(9,1fr);align-items:center;gap:24px 40px}
.logos img{max-height:46px;width:auto;max-width:100%;margin:auto;object-fit:contain;filter:grayscale(1) brightness(1.08) contrast(1.6);opacity:.7;mix-blend-mode:multiply;transition:filter .35s,opacity .35s,transform .35s var(--ease)}
.logos img.tall{max-height:58px}
.logos img.faint{filter:grayscale(1) brightness(.5)}
.logos img.clip{clip-path:inset(5%)}
.logos img:hover{filter:none;opacity:1;transform:scale(1.06)}
@media (max-width:1100px){.logos{grid-template-columns:repeat(5,1fr)}}
@media (max-width:600px){.logos{grid-template-columns:repeat(3,1fr)}}

/* ---------- Caixas das 6 práticas (home) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:340px;padding:36px 36px 32px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.pcard::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);transform:translateY(101%);transition:transform .55s var(--ease-out)}
.pcard::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.pcard .num{font:300 3.25rem/1 var(--serif);color:var(--blue);letter-spacing:-.02em;transition:color .45s var(--ease)}
.pcard h3{font-size:1.75rem;margin-top:28px;transition:color .45s var(--ease)}
.pcard p{margin-top:12px;font-size:1.0625rem;color:var(--ink-2);line-height:1.55;transition:color .45s var(--ease)}
.pcard .go{margin-top:auto;padding-top:28px;display:flex;align-items:center;justify-content:space-between;font:600 .95rem/1 var(--sans);color:var(--navy);transition:color .45s var(--ease)}
.pcard .go svg{width:40px;height:40px;padding:11px;border:1px solid var(--line);border-radius:50%;color:var(--navy);transition:transform .45s var(--ease),border-color .45s,background .45s,color .45s}
.pcard .xs{position:absolute;right:-40px;bottom:-60px;height:220px;width:auto;opacity:0;transform:translate(20px,20px);transition:opacity .55s var(--ease),transform .7s var(--ease-out);z-index:-1}
.pcard:hover,.pcard:focus-visible{border-color:var(--navy);box-shadow:0 30px 60px -30px rgba(10,24,48,.45)}
.pcard:hover::before,.pcard:focus-visible::before{transform:translateY(0)}
.pcard:hover::after,.pcard:focus-visible::after{transform:scaleX(1)}
.pcard:hover h3,.pcard:hover .go,.pcard:focus-visible h3,.pcard:focus-visible .go{color:#fff}
.pcard:hover p,.pcard:focus-visible p{color:rgba(255,255,255,.78)}
.pcard:hover .num,.pcard:focus-visible .num{color:var(--blue-300)}
.pcard:hover .go svg,.pcard:focus-visible .go svg{transform:translateX(6px);border-color:var(--blue-300);background:var(--blue-300);color:var(--navy)}
.pcard:hover .xs,.pcard:focus-visible .xs{opacity:1;transform:none}
@media (max-width:980px){.pgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.pgrid{grid-template-columns:1fr}.pcard{min-height:0}}

/* ---------- Abordagem ---------- */
.phases{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.phase{padding:0 32px 0 0;position:relative}
.phase + .phase{padding-left:32px}
.phase .rule{display:block;height:1px;background:var(--navy-700);margin-bottom:32px;position:relative;overflow:hidden}
.phase .rule::after{content:"";position:absolute;inset:0;background:var(--blue-300);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out)}
.phase .n{display:flex;align-items:baseline;gap:14px}
.phase .n b{font:300 4rem/1 var(--serif);color:var(--blue-300)}
.phase .n span{font:600 .75rem/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.phase h3{font-size:1.75rem;margin-top:20px}
.phase p{margin-top:12px;color:rgba(255,255,255,.78);font-size:1rem;line-height:1.55}
.phase .out{margin-top:28px;padding-top:16px;border-top:1px solid var(--navy-700);color:#fff;font-weight:500}
.phase .out b{display:block;font:600 .72rem/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--blue-300);margin-bottom:8px}
@media (max-width:980px){.phases{grid-template-columns:1fr 1fr;row-gap:56px}.phase:nth-child(3){padding-left:0}}
@media (max-width:560px){.phases{grid-template-columns:1fr}.phase + .phase{padding-left:0}}
.approach .xmark{left:-14%;bottom:-30%;height:90%;opacity:.7}

/* ---------- Formato ---------- */
.format-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,96px);align-items:start}
.principle{display:grid;grid-template-columns:56px 1fr;gap:8px 20px;padding:28px 0;border-top:1px solid var(--line)}
.principle:last-child{border-bottom:1px solid var(--line)}
.principle i{font:300 1.75rem/1 var(--serif);font-style:normal;color:var(--blue)}
.principle h3{font-size:1.5rem}
.principle p{grid-column:2;color:var(--ink-2);font-size:1.0625rem}
.deliver{background:var(--navy);color:#fff;padding:44px 40px 40px;position:relative;overflow:hidden}
.deliver .label{color:var(--blue-300)}
.deliver ul{margin-top:24px}
.deliver li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--navy-700);font-size:1.0625rem;line-height:1.45}
.deliver li:first-child{border-top:0}
.deliver li svg{width:20px;height:20px;flex:none;color:var(--blue-300);margin-top:2px}
@media (max-width:900px){.format-grid{grid-template-columns:1fr}}

/* ---------- Fundador ---------- */
.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,96px);align-items:start}
.founder figure{position:relative}
.founder figure .ph{overflow:hidden}
.founder figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.founder figure::after{content:"";position:absolute;left:-14px;bottom:-14px;width:46%;height:46%;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);pointer-events:none}
.founder h2{font-size:var(--h2);margin-top:20px}
.founder .name{margin-top:36px;font:500 1.6rem/1.2 var(--serif);color:var(--navy)}
.founder .role{margin-top:8px}
.career{margin-top:28px;border-top:2px solid var(--navy)}
.career li{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.career img{max-height:30px;max-width:104px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8;mix-blend-mode:multiply}
.career span{font-size:1rem;color:var(--ink-2);line-height:1.45}
@media (max-width:900px){.founder{grid-template-columns:1fr}.founder figure{max-width:420px}}

/* ---------- Contato ---------- */
.contact .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(40px,6vw,96px);align-items:end;padding-bottom:clamp(88px,10vw,140px)}
.contact h2{font-size:var(--display);font-weight:300;line-height:1.04;letter-spacing:-.025em;margin-top:24px}
.contact .lede{margin-top:28px;font-size:1.25rem;color:rgba(255,255,255,.8);max-width:30em}
.contact .ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px}
.info li{padding:18px 0;border-top:1px solid var(--navy-700)}
.info li:last-child{border-bottom:1px solid var(--navy-700)}
.info .label{display:block;margin-bottom:6px}
.info a{color:#fff;text-decoration:none;font-size:1.0625rem;background:linear-gradient(#fff,#fff) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.info a:hover{background-size:100% 1px}
.contact .xmark{right:-8%;top:-10%;height:120%;opacity:.8}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}}

/* ---------- Rodapé ---------- */
footer{background:var(--navy-950);color:rgba(255,255,255,.62);font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-block:40px}
footer img{height:30px;width:auto}
footer nav{display:flex;flex-wrap:wrap;gap:8px 28px}
footer a{color:rgba(255,255,255,.8);text-decoration:none}footer a:hover{color:#fff}

.wa-float{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:40;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;box-shadow:0 8px 24px rgba(10,24,48,.28);transition:transform .35s var(--ease),background .2s,opacity .35s;opacity:0;transform:translateY(16px);pointer-events:none}
.wa-float.show{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover{transform:translateY(-3px);background:var(--navy-800)}
.wa-float svg{width:26px;height:26px}

/* =========================================================
   PÁGINAS DE PRÁTICA
   ========================================================= */
.phero{min-height:min(78vh,720px);display:flex;align-items:flex-end}
.phero .wrap{position:relative;z-index:1;width:100%;padding-block:clamp(96px,14vh,150px) clamp(64px,9vh,100px)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font:500 .9rem/1 var(--sans);color:rgba(255,255,255,.6)}
.crumbs a{color:rgba(255,255,255,.8);text-decoration:none}.crumbs a:hover{color:#fff}
.crumbs span[aria-hidden]{color:var(--blue-300)}
.phero .bignum{display:block;margin-top:44px;font:300 clamp(4rem,8vw,7rem)/.9 var(--serif);color:var(--blue-300);letter-spacing:-.04em}
.phero h1{font-size:var(--display);font-weight:300;line-height:1.04;letter-spacing:-.025em;margin-top:18px;max-width:14em}
.phero .q{margin-top:24px;font:400 clamp(1.35rem,1.4vw + .8rem,1.85rem)/1.35 var(--serif);color:var(--blue-300);max-width:28em}
.phero .xmark{right:-8%;top:-8%;height:120%;width:auto}
.intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start}
.intro p.big{font:400 clamp(1.4rem,1.3vw + .9rem,1.9rem)/1.4 var(--serif);color:var(--navy)}
@media (max-width:900px){.intro{grid-template-columns:1fr}}
.svc{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--navy)}
.svc article{padding:40px 40px 44px 0;border-bottom:1px solid var(--line);position:relative}
.svc article:nth-child(2n){padding-left:40px;padding-right:0;border-left:1px solid var(--line)}
.svc i{font:300 2rem/1 var(--serif);font-style:normal;color:var(--blue)}
.svc h3{font-size:1.75rem;margin-top:18px}
.svc p{margin-top:12px;color:var(--ink-2);font-size:1.0625rem;line-height:1.6;max-width:32em}
@media (max-width:760px){.svc{grid-template-columns:1fr}.svc article:nth-child(2n){padding-left:0;border-left:0}}
.when{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.when li{background:#fff;border:1px solid var(--line);padding:32px 28px;font:400 1.3rem/1.4 var(--serif);color:var(--navy);position:relative}
.when li::before{content:"";display:block;width:28px;height:2px;background:var(--blue);margin-bottom:22px}
@media (max-width:860px){.when{grid-template-columns:1fr}}
.lead{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:center;padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lead img{width:200px;aspect-ratio:1;object-fit:cover;object-position:50% 18%}
.lead .name{font:500 1.5rem/1.2 var(--serif);color:var(--navy)}
.lead ul{margin-top:16px;display:grid;gap:8px}
.lead li{color:var(--ink-2);font-size:1rem;padding-left:20px;position:relative}
.lead li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--blue)}
@media (max-width:620px){.lead{grid-template-columns:1fr}.lead img{width:140px}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.steps li{padding:24px 24px 0 0;border-top:1px solid var(--navy-700)}
.steps li + li{padding-left:24px}
.steps b{display:block;font:300 2.5rem/1 var(--serif);color:var(--blue-300)}
.steps h3{font-size:1.4rem;margin-top:14px}
.steps p{margin-top:8px;color:rgba(255,255,255,.75);font-size:.97rem;line-height:1.5}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:36px}.steps li:nth-child(3){padding-left:0}}
@media (max-width:520px){.steps{grid-template-columns:1fr}.steps li + li{padding-left:0}}
.others{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.others .pcard{min-height:220px;padding:28px 24px 24px}
.others .pcard .num{font-size:2.25rem}
.others .pcard h3{font-size:1.3rem;margin-top:18px}
.others .pcard .go{padding-top:20px}
.others .pcard .go svg{width:34px;height:34px;padding:9px}
@media (max-width:1100px){.others{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.others{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.others{grid-template-columns:1fr}}

/* =========================================================
   ANIMAÇÕES (só com JS ativo; desligadas em prefers-reduced-motion)
   ========================================================= */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-reveal].in{opacity:1;transform:none}
/* títulos palavra a palavra, com máscara */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js [data-split] .w > span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 45ms + var(--base,0ms))}
.js [data-split].in .w > span{transform:none}
/* fios que se desenham */
.js .stats::before{transform:scaleX(0);transition:transform 1.2s var(--ease-out)}
.js .stats.in::before{transform:scaleX(1)}
.js .phases.in .rule::after{transform:scaleX(1)}
.js .phases.in .phase:nth-child(2) .rule::after{transition-delay:.25s}
.js .phases.in .phase:nth-child(3) .rule::after{transition-delay:.5s}
.js .phases.in .phase:nth-child(4) .rule::after{transition-delay:.75s}
/* X: contorno desenhado + faixa deslizando */
.js .xmark .a{stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000);transition:stroke-dashoffset 2.2s var(--ease-out) .2s}
.js .xmark .b{transform:translate(18%,-30%);opacity:0;transition:transform 1.6s var(--ease-out),opacity 1.2s var(--ease)}
.js .xmark.in .a{stroke-dashoffset:0}
.js .xmark.in .b{transform:none;opacity:.28}
/* imagem com cortina */
.js [data-wipe]{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease-out)}
.js [data-wipe] img{transform:scale(1.12);transition:transform 1.8s var(--ease-out)}
.js [data-wipe].in{clip-path:inset(0)}
.js [data-wipe].in img{transform:none}
/* transição entre páginas */
.js body{animation:pagein .6s var(--ease-out) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
.leaving body{opacity:0;transition:opacity .25s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal],.js [data-split] .w > span,.js [data-wipe],.js [data-wipe] img,.js .xmark .b{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .xmark .a{stroke-dashoffset:0!important}
  .js .stats::before,.js .phases .rule::after{transform:scaleX(1)!important}
  .progress{display:none}
}