/* Layout: faixas alternadas claro/escuro, conteúdo em coluna de 1200px, fotos à esquerda e texto à direita, CTA vermelho de fechamento */
:root{
  --red:#D71920; --red-deep:#B0121A;
  --ink:#16181B; --ink-2:#202328;
  --paper:#F4F3F0; --white:#FFFFFF;
  --text:#2A2D31; --muted:#5E6268; --line:#D8D5CF; --on-dark:#E9E7E3; --on-dark-muted:#B9BBBF;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1200px; --gut:clamp(16px,4vw,40px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.98;margin:0;text-wrap:balance;letter-spacing:-.005em;color:var(--ink)}
h2{font-size:clamp(38px,5.4vw,62px)}
.red{color:var(--red)}
.eyebrow{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0 0 18px}
.eyebrow::before{content:"";width:3px;height:16px;background:var(--red)}
.eyebrow b{font-weight:600;color:var(--muted)}
.on-dark .eyebrow{color:var(--on-dark)}
.on-dark .eyebrow b{color:var(--on-dark-muted)}
.lead{font-size:clamp(17px,1.7vw,20px);color:var(--muted);max-width:62ch;margin:14px 0 0}

/* botões */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;background:var(--red);color:var(--white);font:600 16px/1 var(--body);text-decoration:none;border-radius:2px;transition:background .2s,transform .2s}
.btn:hover{background:var(--red-deep)}
.btn svg{width:15px;height:15px;transition:transform .2s}
.btn:hover svg{transform:translate(2px,-2px)}
.btn--light{background:var(--white);color:var(--red)}
.btn--light:hover{background:var(--paper)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--red)}
.link svg{width:13px;height:13px;transition:transform .2s}
.link:hover svg{transform:translate(2px,-2px)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--white);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:100px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{width:80px;height:80px}
.brand span{display:grid;width:max-content;gap:5px;text-transform:uppercase;color:var(--ink)}
.brand strong{font:800 26px/1 var(--display);letter-spacing:.01em;white-space:nowrap}
.brand small{width:0;min-width:100%;font:400 11px/1.3 var(--body);letter-spacing:.05em;color:var(--muted)}
.nav{display:flex;gap:30px}
.nav a{text-decoration:none;font-weight:500;font-size:17px;color:var(--ink)}
.nav a:hover{color:var(--red)}
.top .btn{padding:13px 20px;font-size:15px}
@media(max-width:1023px){.nav{display:none}}
/* header mobile: só o logo, centralizado e ampliado (sem botão); o rodapé usa o mesmo logo */
@media(max-width:767px){.top .wrap{justify-content:center;gap:0;min-height:0;padding-block:14px}.top .btn{display:none}.top .brand{margin:0;gap:clamp(10px,3.4vw,14px)}.brand img{flex:none;width:clamp(64px,21vw,88px);height:clamp(64px,21vw,88px)}.brand span{gap:5px}.brand strong{font-size:clamp(20px,7.2vw,30px)}.brand small{font-size:clamp(8.5px,2.9vw,12px);letter-spacing:.04em}}

/* hero — mosaico com revelação de cor */
.top{--red:#D92525;--red-deep:#B81D1D;--ink:#141516}
.fold{--g:#141516;--w:#F4F2ED;--r:#D92525;--x:50%;--y:50%;--rad:260px;
  position:relative;isolation:isolate;overflow:hidden;background:var(--g);color:var(--w);
  padding-block:0;min-height:clamp(560px,40vw,680px);display:flex;align-items:center}
.fold-media,.fold-shade{position:absolute;inset:0;pointer-events:none}
.fold-media{z-index:-2}
.fold-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% center}
.fold-media .base{filter:grayscale(1)}
.fold-media .color{opacity:0;transition:opacity .25s ease;
  -webkit-mask-image:radial-gradient(circle var(--rad) at var(--x) var(--y),#000 0%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);
          mask-image:radial-gradient(circle var(--rad) at var(--x) var(--y),#000 0%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%)}
.fold.is-revealing .fold-media .color{opacity:1}
.fold-shade{z-index:-1;background:
  linear-gradient(90deg,rgba(20,21,22,.94) 0%,rgba(20,21,22,.86) 30%,rgba(20,21,22,.5) 55%,rgba(20,21,22,.22) 78%,rgba(20,21,22,.18) 100%),
  linear-gradient(0deg,rgba(20,21,22,.55) 0%,rgba(20,21,22,0) 28%)}
.fold-inner{position:relative;width:100%;padding-block:clamp(48px,5vw,72px) clamp(76px,7vw,96px)}
.fold-kicker{margin:0 0 22px;font:600 13px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--w);display:flex;align-items:center;gap:14px}
.fold-kicker::before{content:"";width:28px;height:3px;background:var(--r)}
.fold h1{color:#fff;font-size:clamp(50px,6.6vw,96px);font-weight:800;line-height:.92;letter-spacing:-.01em;max-width:none}
.fold h1 span{display:block}
.fold h1 .accent{color:var(--r)}
.fold-sub{max-width:40ch;margin:24px 0 34px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--w)}
.fold-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.fold .btn{background:var(--r);border-radius:0;padding:18px 28px;font-size:17px}
.fold .btn:hover{background:#B81D1D}
.fold-hint{display:none;font-size:14px;color:rgba(244,242,237,.72);align-items:center;gap:8px}
@media (hover:hover) and (pointer:fine) and (min-width:761px) and (prefers-reduced-motion:no-preference){.fold-hint{display:inline-flex}}
.fold-hint::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--r)}
.fold-sign{position:absolute;left:0;right:0;bottom:24px}
.fold-sign p{margin:0;font:700 13px/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:rgba(244,242,237,.62)}
@media (hover:none),(pointer:coarse){
  .fold-media .color{opacity:1;-webkit-mask-image:none;mask-image:none}
  .fold-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fold-media .color{opacity:1;-webkit-mask-image:none;mask-image:none;transition:none}
  .fold-hint{display:none}
}
@media(max-width:760px){
  .fold{align-items:flex-end}
  .fold-media img{object-position:70% center}
  .fold-shade{background:linear-gradient(180deg,rgba(20,21,22,.55) 0%,rgba(20,21,22,.82) 45%,rgba(20,21,22,.94) 100%)}
  .fold-inner{padding-block:120px 84px}
  .fold-hint{display:none}
  .fold-kicker{font-size:12px;letter-spacing:.12em;gap:10px}
  .fold-kicker::before{width:18px}
  .fold-sign p{letter-spacing:.22em}
}
/* entrada da hero (uma vez, ao carregar) */
@keyframes foldMedia{from{opacity:0}to{opacity:1}}
@keyframes foldLine{from{opacity:0;transform:translateY(.45em);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -10% 0)}}
@keyframes foldRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fold-media{animation:foldMedia 1.2s ease-out both}
.fold-kicker{animation:rise .7s .25s cubic-bezier(.2,.7,.2,1) both}
.fold-kicker::before{transform-origin:left;animation:foldRule .6s .35s cubic-bezier(.7,0,.2,1) both}
.fold h1 span{animation:foldLine .9s cubic-bezier(.2,.7,.2,1) both}
.fold h1 span:nth-child(1){animation-delay:.4s}
.fold h1 span:nth-child(2){animation-delay:.52s}
.fold h1 span:nth-child(3){animation-delay:.7s}
.fold-sub{animation:rise .8s .95s cubic-bezier(.2,.7,.2,1) both}
.fold-actions{animation:rise .8s 1.1s cubic-bezier(.2,.7,.2,1) both}
.fold-sign{animation:foldMedia 1s 1.4s ease-out both}
@media (prefers-reduced-motion:reduce){.fold *,.fold-media,.fold-sign,.fold-kicker::before{animation:none!important}}
/* soluções */
section{padding-block:clamp(64px,8vw,104px)}
.feature{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3vw,40px);align-items:center;margin-top:28px}
.feature:first-of-type{margin-top:44px}
.feature img{width:100%;aspect-ratio:3/2;object-fit:cover}
.feature .txt{border-left:3px solid var(--red);padding:6px 0 8px clamp(18px,2.4vw,28px);min-width:0}
.num{font:800 clamp(52px,6vw,72px)/.9 var(--display);color:var(--red);letter-spacing:-.02em}
.feature h3{font-size:clamp(30px,3.2vw,40px);margin:10px 0 12px}
.feature p{margin:0 0 6px;color:var(--muted);max-width:44ch}
.feature .link{margin-top:16px}
.rows{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:72px minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.rows .num{font-size:52px}
.rows h3{font-size:clamp(24px,2.4vw,30px);font-weight:700}
.rows p{margin:0;color:var(--muted);font-size:16px;border-left:1px solid var(--line);padding-left:24px}
.rows .link{border-left:1px solid var(--line);padding-left:24px;align-self:stretch}
.center{display:flex;justify-content:center;margin-top:44px}
@media(max-width:860px){
  .feature{grid-template-columns:1fr}
  .rows li{grid-template-columns:56px 1fr;gap:6px 16px}
  .rows .num{grid-row:span 3;font-size:44px;align-self:start}
  .rows p,.rows .link{border:0;padding:0}
}

/* banner */
.banner{position:relative;background:var(--ink) url("04-banner-pratica.webp") right center/cover no-repeat;color:var(--on-dark);padding-block:clamp(64px,7vw,96px)}
.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,24,27,.85) 30%,rgba(22,24,27,0) 62%)}
.banner .wrap{position:relative}
.banner h2{color:var(--white);font-size:clamp(40px,4.8vw,64px);max-width:640px}
.banner h2 .red{display:block}
.banner p{max-width:40ch;margin:20px 0 0;font-size:19px}
.banner .caption{bottom:16px}
@media(max-width:760px){.banner::before{background:rgba(22,24,27,.78)}.banner .caption{display:none}}

/* sobre */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.about img{width:100%;aspect-ratio:12/7;object-fit:cover}
.about .copy{min-width:0}
.about h2{font-size:clamp(38px,4.6vw,56px);margin-bottom:22px}
.about p{margin:0 0 14px;color:var(--muted)}
.about p.sign{color:var(--ink);font-weight:600}
@media(max-width:860px){.about{grid-template-columns:1fr}}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.values div{border-left:3px solid var(--red);padding-left:20px}
.values h3{font-size:28px;color:var(--red);margin-bottom:8px}
.values p{margin:0;color:var(--muted)}
@media(max-width:760px){.values{grid-template-columns:1fr}}

.commit{border-top:1px solid var(--line);margin-top:clamp(56px,7vw,88px);padding-top:clamp(48px,6vw,72px)}

/* passos */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:44px 0 0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;counter-increment:s;padding-right:12px;border-right:1px solid var(--line)}
.steps li:last-child{border-right:0}
.steps li::before{content:counter(s,decimal-leading-zero);font:700 76px/.82 var(--display);color:transparent;-webkit-text-stroke:2px var(--red)}
.steps h3{font-size:24px;font-weight:700;margin:4px 0 6px}
.steps p{margin:0;color:var(--muted);font-size:16px}
@media(max-width:860px){.steps{grid-template-columns:1fr}.steps li{border-right:0;border-bottom:1px solid var(--line);padding-bottom:24px}.steps li:last-child{border:0}}

/* cta */
.cta{background:var(--red);color:var(--white);padding-block:0;position:relative;z-index:2;
  background-image:
    linear-gradient(118deg,transparent 55%,rgba(255,255,255,.07) 55%,rgba(255,255,255,.07) 62%,transparent 62%),
    linear-gradient(118deg,transparent 66%,rgba(255,255,255,.05) 66%,rgba(255,255,255,.05) 70%,transparent 70%),
    linear-gradient(118deg,transparent 74%,rgba(0,0,0,.06) 74%,rgba(0,0,0,.06) 82%,transparent 82%),
    linear-gradient(90deg,var(--red) 40%,#E0262C 100%)}
.cta .wrap{position:relative}
.cta .copy{padding-block:clamp(40px,4.5vw,56px);padding-right:clamp(0px,24vw,300px);min-width:0}
.cta h2{color:var(--white);font-weight:700;font-size:clamp(36px,4.4vw,56px);line-height:1;max-width:13em}
.cta p{font-size:clamp(17px,1.6vw,20px);margin:12px 0 26px}
.cta .btn--light{padding:16px 30px}
.cta img{position:absolute;right:clamp(16px,6vw,90px);bottom:0;height:calc(100% + 44px);width:auto;object-fit:contain;pointer-events:none}
@media(max-width:860px){.cta .copy{padding-right:0}.cta img{display:none}}
/* footer */
footer{background:var(--ink);color:var(--on-dark-muted);font-size:15px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1fr;gap:32px;padding-block:56px 40px}
.foot > div + div{border-left:1px solid #33363c;padding-left:28px}
.foot .brand span{color:var(--white)}
.foot .brand small{color:var(--on-dark-muted)}
.foot .tag{margin:16px 0 0;font-size:14px}
.foot h2{margin:0 0 14px;color:var(--white);font:600 16px/1 var(--body);letter-spacing:normal}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--white)}
.foot .ic{display:flex;gap:10px;align-items:flex-start}
.foot .ic svg{width:18px;height:18px;flex:none;color:var(--red);margin-top:3px}
.legal{border-top:1px solid #33363c;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:22px;font-size:14px}
.legal .ic{display:flex;gap:10px;align-items:center}
.legal svg{width:18px;height:18px;color:var(--red)}
.credit a{font-weight:700;color:var(--white);text-decoration:none;transition:color .2s}
.credit a:hover{color:var(--red)}
@media(max-width:960px){.foot{grid-template-columns:1fr 1fr}.foot > div:nth-child(3){border-left:0;padding-left:0}}
@media(max-width:560px){.foot{grid-template-columns:1fr;text-align:center}.foot > div + div{border-left:0;padding-left:0;border-top:1px solid #33363c;padding-top:24px}.foot .brand{justify-content:center;margin:0 auto;text-align:left}.foot ul{justify-items:center}.foot .ic{justify-content:center;text-align:left}.legal{flex-direction:column;align-items:center;text-align:center}.legal .ic{justify-content:center;align-items:flex-start;text-align:left}}

/* animações ao rolar (ativadas só via JS) */
.top{transition:box-shadow .3s}
.top.scrolled{box-shadow:0 6px 24px rgba(22,24,27,.08)}
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv-wipe{clip-path:inset(0 100% 0 0);transform:scale(1.06);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),transform 1.4s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv-line{position:relative}
.rv-line::after{content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--paper);transform-origin:bottom;transition:transform .9s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--d,0s) + .2s)}
.rv.in,.rv-wipe.in{opacity:1;transform:none;clip-path:inset(0)}
.rv-line.in::after{transform:scaleY(0)}
.banner{isolation:isolate;background-image:none;overflow:hidden}
.banner::after{content:"";position:absolute;inset:0;z-index:-2;background:url("04-banner-pratica.webp") right center/cover no-repeat;transform:scale(1.08);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.banner::before{z-index:-1}
.banner.in::after,.no-rv .banner::after{transform:none}
.cta img.rv{transform:translateY(60px)}
.cta img.rv.in{transform:none}

.rows li:hover{background:rgba(215,25,32,.04)}
.rows li:hover h3{color:var(--red)}
.rows h3{transition:color .25s}
.feature img,.about img{transition-property:clip-path,transform}

/* keyframes compartilhados */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.sprite{position:absolute}