/* ============ TOKENS (escala do site de referência) ============ */
:root{
  --gold:#E4AA3F;
  --black:#0A2A58; --white:#fff; --navy-deep:#04122A;
  --n00:#F5F1E8; --n20:#E7E1D4; --n80:#17396B; --n90:#04122A;
  --bk8:rgba(10,42,88,.08); --bk10:rgba(10,42,88,.12); --bk20:rgba(10,42,88,.22);
  --bk50:rgba(10,42,88,.55); --bk64:rgba(10,42,88,.7);
  --wt64:rgba(255,255,255,.64); --wt20:rgba(255,255,255,.2);
  --serif:"Noto Serif",Georgia,serif;
  --sans:"Geist",system-ui,-apple-system,sans-serif;
  /* margem global fluida: 24px @320 ate 124px @1920 */
  --mg:clamp(1.5rem,.25rem + 6.25vw,7.75rem);
  --r4:.25rem; --r8:.5rem; --r12:.75rem; --r20:1.25rem;
  --nav-h:4.625rem;
  /* escala tipografica fluida */
  --fs-display:clamp(2.5rem,2rem + 2.5vw,5rem);
  --fs-h1:clamp(2.25rem,2rem + 1.25vw,3.5rem);
  --fs-h2:clamp(2rem,1.8rem + 1vw,3rem);
  --fs-h3:clamp(1.5rem,1.4rem + .5vw,2rem);
  --fs-h4:clamp(1.25rem,1.2rem + .25vw,1.5rem);
  --fs-huge:clamp(1.125rem,1.1rem + .125vw,1.25rem);
  --fs-large:clamp(1rem,.975rem + .125vw,1.125rem);
  --fs-med:clamp(.875rem,.85rem + .125vw,1rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--black);background:var(--white);line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.2;letter-spacing:-.006em}

.pad-g{padding-left:var(--mg);padding-right:var(--mg)}
.container{width:100%;max-width:120rem;margin-inline:auto}
.spacer{width:100%;height:7.75rem}
.eyebrow-s{font-size:.75rem;letter-spacing:.2px;text-transform:uppercase;font-weight:400}
.eyebrow-m{font-size:.9rem;letter-spacing:.2px;text-transform:uppercase;font-weight:400}
.t-huge{font-size:var(--fs-huge);line-height:1.4;font-weight:300}
.t-large{font-size:var(--fs-large);line-height:1.4;font-weight:300}
.t-med{font-size:var(--fs-med);line-height:1.4}
.t-sec{color:var(--bk64)}
.t-half{color:var(--bk50)}

/* ============ BOTOES ============ */
.btn{display:inline-flex;align-items:center;gap:1.5rem;background:var(--gold);color:var(--black);font-family:var(--sans);font-weight:400;font-size:.875rem;letter-spacing:.2px;text-transform:uppercase;white-space:nowrap;padding:1rem 1.25rem;border-radius:var(--r8);cursor:pointer;border:0;transition:background .25s}
.btn:hover{background:#d99a28}
.btn .ico{width:1.5rem;height:1.5rem;position:relative;overflow:hidden;flex:none}
.btn .ico svg{width:1.5rem;height:1.5rem;position:absolute;inset:0;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.btn .ico svg.b{transform:translateX(-130%)}
.btn:hover .ico svg.a{transform:translateX(130%)}
.btn:hover .ico svg.b{transform:translateX(0)}
.btn.inverted{background:var(--white)}
.btn.inverted:hover{background:var(--n00)}
.btn.secondary{background:transparent;border:1px solid var(--bk20)}
.btn.secondary:hover{background:var(--bk8)}

/* ============ ANNOUNCE ============ */
.announce{background:var(--navy-deep);color:var(--white);display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.05rem var(--mg);text-align:center;flex-wrap:wrap}
.announce .t-med{font-weight:300}
.announce a{color:var(--gold)}
.announce a:hover{text-decoration:underline}

/* ============ NAVBAR ============ */
.navbar{position:sticky;top:0;z-index:1000;background:var(--white);border-bottom:1px solid var(--bk10)}
.navbar-in{display:flex;align-items:stretch;justify-content:space-between;height:var(--nav-h)}
.logo-nav{display:flex;align-items:center;padding-left:2rem}
.logo-nav img{height:2rem;width:auto;display:block}
.logo-nav .mk{width:.78em;height:.78em;background:var(--gold);clip-path:polygon(50% 0,100% 100%,0 100%);margin-left:.1em;transform:translateY(.04em)}
.nav-menu{flex:1;display:flex;align-items:stretch;justify-content:center}
.nav-item{display:flex;align-items:center;gap:.55rem;padding:0 1.35rem;cursor:pointer;color:var(--black)}
.nav-item:hover{background:var(--bk8)}
.nav-item .chev{width:.8rem;height:.8rem;transition:transform .25s}
.nav-item:hover .chev{transform:rotate(180deg)}
.nav-item .dot{width:4px;height:4px;background:var(--black);border-radius:1px;margin-top:.1em}
.nav-side{display:flex;align-items:stretch}
.nav-side .nav-item{border-left:1px solid var(--bk10);padding:0 2rem}
.burger{display:none;align-items:center;padding:0 1.6rem;background:none;border:0;border-left:1px solid var(--bk10);cursor:pointer}
.burger span{display:block;width:26px;height:1.6px;background:var(--black);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:26px;height:1.6px;background:var(--black)}
.burger span::before{top:-8px}.burger span::after{top:8px}
/* dropdown */
.dropdown{position:absolute;top:100%;left:0;right:0;background:var(--white);border-bottom:1px solid var(--bk10);box-shadow:0 40px 60px -40px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.3s;z-index:999}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-in{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:2rem var(--mg);cursor:default}
.dd-card{display:flex;gap:1.5rem;padding:1rem;border-radius:var(--r12);transition:background .2s;align-items:center}
.dd-card:hover{background:var(--n00)}
.dd-card .ph{width:9.5rem;aspect-ratio:16/10;border-radius:var(--r8);overflow:hidden;flex:none}
.dd-card .ph img{width:100%;height:100%;object-fit:cover}
.dd-card h3{font-size:var(--fs-h4);font-family:var(--sans);font-weight:400;margin-bottom:.35rem}
.dd-card p{font-size:var(--fs-med);color:var(--bk64)}

/* drawer mobile */
.drawer{position:fixed;inset:0;z-index:2000;background:var(--white);padding:1.5rem;transform:translateX(100%);transition:.35s;overflow:auto}
.drawer.open{transform:none}
.drawer-close{background:none;border:0;font-size:2.2rem;float:right;cursor:pointer;line-height:1}
.drawer nav{margin-top:4rem;display:flex;flex-direction:column}
.drawer nav a{font-family:var(--serif);font-weight:300;font-size:2rem;padding:1.1rem 0;border-bottom:1px solid var(--bk10)}
.drawer .btn{margin-top:2rem}

/* ============ HERO (scrollytelling) ============ */
.hero-scope{height:280vh;position:relative}
.hero-view{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));min-height:640px;background:var(--white);overflow:clip}
.hero-content{position:absolute;inset:0;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:center;padding-left:var(--mg)}
.hero-h1{font-size:3.75vw;letter-spacing:-.028em;line-height:1.2;color:var(--black);max-width:52%;}
.hero-h1 .ln{display:block;overflow:hidden}
.hero-h1 .ln span{display:block;transform:translateY(110%);animation:lineup .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-h1 .ln:nth-child(2) span{animation-delay:.08s}
.hero-h1 .ln:nth-child(3) span{animation-delay:.16s}
.hero-h1 .ln:nth-child(4) span{animation-delay:.24s}
@keyframes lineup{to{transform:none}}
.hero-cta{margin-top:2.5rem;opacity:0;animation:fadeup .8s .45s cubic-bezier(.2,.7,.2,1) forwards}
.hero-cta .btn{pointer-events:auto}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-scrollbtn{position:absolute;left:var(--mg);bottom:2.4rem;width:3.5rem;height:3.5rem;border:1px solid var(--bk10);border-radius:var(--r8);background:var(--white);display:grid;place-items:center;pointer-events:auto;cursor:pointer;opacity:0;animation:fadeup .8s .7s forwards}
.hero-scrollbtn svg{width:1.25rem;height:1.25rem;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
/* sombras (deck) atras da posicao principal */
.hero-shade{position:absolute;top:.5rem;bottom:.5rem;left:51.72vw;width:47.86vw;border-radius:var(--r12)}
.hero-shade.s1{background:var(--bk10);transform:translateX(-3rem)}
.hero-shade.s2{background:var(--bk8);transform:translateX(-1.5rem)}
/* trilho de cards */
.hero-track{position:absolute;top:.5rem;bottom:.5rem;left:51.72vw;display:flex;gap:1.5rem;z-index:7;will-change:transform}
.hcard{position:relative;flex:none;width:47.86vw;height:100%;border-radius:var(--r12);overflow:hidden;background:var(--navy-deep);transition:opacity .4s}
.hcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:kb 16s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,1%)}}
.hcard .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 30%,transparent 55%,rgba(0,0,0,.72))}
.hcard .tag{position:absolute;top:1.75rem;left:1.75rem;color:var(--white);font-size:.75rem;letter-spacing:.2px;text-transform:uppercase;font-weight:400}
.hcard .quote{position:absolute;left:1.75rem;right:1.75rem;bottom:1.75rem;color:var(--white)}
.hcard .quote p{font-size:var(--fs-h4);line-height:1.35;font-weight:300;max-width:34ch}
.hcard .quote .nm{margin-top:1rem;font-size:var(--fs-med);color:var(--wt64)}
.hcard .quote .nm b{color:var(--white);font-weight:400;display:block}
.hcard:not(.on){opacity:.5}
.hcard:not(.on) .quote,.hcard:not(.on) .tag{opacity:0;transition:opacity .3s}
.hcard.on .quote,.hcard.on .tag{opacity:1;transition:opacity .5s .15s}

/* ============ EMPRESAS (grid de logos) ============ */
.empresas{padding-top:4rem;padding-bottom:7.5rem}
.empresas-head{text-align:center;margin-bottom:5rem}
.empresas-head h2{font-size:var(--fs-h2)}
.clientes-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--bk8);border-left:1px solid var(--bk8)}
.cliente-cell{height:15.625rem;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--bk8);border-bottom:1px solid var(--bk8);position:relative}
.cliente-cell img{max-width:44%;max-height:38%;object-fit:contain;filter:grayscale(1) brightness(.45) opacity(.55);transition:filter .3s,transform .3s}
.cliente-cell:hover img{filter:grayscale(0) brightness(1) opacity(1);transform:scale(1.04)}

/* ============ BILLBOARD (case + finale) ============ */
.billboard{height:85dvh;min-height:560px;padding:.5rem}
.billboard.finale{height:80vh}
.billboard-in{position:relative;width:100%;height:100%;border-radius:var(--r20);overflow:hidden;background:var(--n90)}
.billboard-in>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.billboard-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.62))}
.billboard-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:4rem}
.billboard-content h2{color:var(--white);font-size:var(--fs-h2);max-width:24ch}
.billboard-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;margin-top:3.5rem;flex-wrap:wrap}
.bb-data{display:flex;gap:5rem;flex-wrap:wrap}
.bb-data .item .lbl{color:var(--white);font-size:var(--fs-med);margin-bottom:.9rem;max-width:24ch}
.bb-data .item .val{color:var(--white);font-family:var(--serif);font-weight:300;font-size:var(--fs-h3)}
/* finale */
.billboard.finale .billboard-content{justify-content:center;align-items:center;text-align:center}
.billboard.finale h2{font-size:var(--fs-display);max-width:16ch}
.billboard.finale .btn{margin-top:2.6rem}

/* ============ SERVICOS (jornada 5 passos) ============ */
.servicos-head{text-align:center;margin-bottom:5rem}
.servicos-head h2{font-size:var(--fs-h1)}
.jornada{display:flex;gap:4rem;align-items:stretch;min-height:40rem}
.jornada-list{flex:1;display:flex;flex-direction:column;justify-content:center}
.jstep{border-bottom:1px solid var(--bk8);padding:1.35rem 0;cursor:pointer}
.jstep .head{display:flex;align-items:center;gap:1rem;color:var(--bk50);transition:color .3s}
.jstep .sq{width:.55rem;height:.55rem;background:currentColor;flex:none;transition:background .3s}
.jstep .ttl{font-size:var(--fs-huge);font-weight:300}
.jstep .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.jstep .body>div{overflow:hidden}
.jstep .body p{font-size:var(--fs-med);color:var(--bk64);max-width:52ch;padding:.8rem 0 .4rem 1.55rem}
.jstep.on .head{color:var(--black)}
.jstep.on .sq{background:var(--gold)}
.jstep.on .body{grid-template-rows:1fr}
.jornada-media{flex:none;width:40rem;max-width:46%;border-radius:var(--r20);background:var(--n00);overflow:hidden;position:relative;min-height:29rem}
.jornada-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s}
.jornada-media img.on{opacity:1}
.jornada-media .badge{position:absolute;left:1.5rem;top:1.5rem;z-index:2;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);color:var(--white);font-size:.75rem;letter-spacing:.2px;text-transform:uppercase;padding:.55rem 1rem;border-radius:99px}

/* ============ DEPOIMENTOS (sticky horizontal) ============ */
.depo-scope{height:260vh;position:relative}
.depo-view{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));overflow:clip;display:flex;flex-direction:column;justify-content:center}
.depo-head{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:0 var(--mg);margin-bottom:4.5rem;flex-wrap:wrap}
.depo-head h2{font-size:var(--fs-h2);max-width:18ch}
.depo-track{display:flex;gap:3rem;padding-left:var(--mg);will-change:transform}
.depo-item{flex:none;width:45rem;max-width:86vw;display:flex;gap:3rem}
.depo-item .ph{flex:none;width:14rem;height:26vh;min-height:200px;border-radius:var(--r12);overflow:hidden}
.depo-item .ph img{width:100%;height:100%;object-fit:cover}
.depo-item .qt{font-family:var(--serif);font-weight:300;font-size:var(--fs-h3);line-height:1.3}
.depo-item .who{margin-top:1.6rem;font-size:var(--fs-med)}
.depo-item .who span{display:block;color:var(--bk50)}

/* ============ VALORES (accordion) ============ */
.valores{display:flex;justify-content:space-between;gap:7.75rem;align-items:flex-start}
.valores-head{position:sticky;top:calc(var(--nav-h) + 3rem);max-width:26rem}
.valores-head h2{font-size:var(--fs-h2)}
.valores-head .btn{margin-top:2.4rem}
.acc-list{flex:1;max-width:56rem}
.acc{border-bottom:1px solid var(--bk8);cursor:pointer}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:4rem;padding:2.6rem 0}
.acc-head h3{font-size:var(--fs-h3)}
.acc-ico{position:relative;width:1.35rem;height:1.35rem;flex:none}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;background:var(--black);left:50%;top:50%;transition:transform .4s}
.acc-ico::before{width:1.35rem;height:1.5px;transform:translate(-50%,-50%)}
.acc-ico::after{width:1.5px;height:1.35rem;transform:translate(-50%,-50%)}
.acc.open .acc-ico::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.acc-body>div{overflow:hidden}
.acc-body p{font-size:var(--fs-huge);color:var(--bk64);line-height:1.45;max-width:60ch;padding-bottom:2.6rem}
.acc.open .acc-body{grid-template-rows:1fr}

/* ============ PRODUTOS (frentes) ============ */
.produtos-head h2{font-size:var(--fs-h2);max-width:22ch}
.produtos-list{margin-top:4rem;display:flex;flex-direction:column;gap:4rem}
.produto{display:flex;gap:.5rem;min-height:30rem;align-items:stretch}
.produto .ph{width:50%;border-radius:var(--r20);overflow:hidden;position:relative}
.produto .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.produto:hover .ph img{transform:scale(1.05)}
.produto .txt{width:50%;display:flex;flex-direction:column;justify-content:center;padding:2rem 4rem}
.produto .txt h3{font-size:var(--fs-h1);margin-bottom:1.4rem}
.produto .txt p{font-size:var(--fs-huge);color:var(--bk64);max-width:44ch}
.produto .txt .go{display:inline-flex;align-items:center;gap:.7rem;margin-top:2rem;font-size:.875rem;letter-spacing:.2px;text-transform:uppercase;font-weight:400}
.produto .txt .go svg{width:1.2rem;height:1.2rem;transition:transform .3s}
.produto:hover .txt .go svg{transform:translateX(6px)}
.produto.flip{flex-direction:row-reverse}

/* ============ NEWS ============ */
.news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:4rem;margin-bottom:6rem;flex-wrap:wrap}
.news-head h2{font-size:var(--fs-display)}
.news-head .side{max-width:26rem}
.news-head .side p{font-size:var(--fs-med);color:var(--bk64);margin-bottom:1.8rem}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.news-item{border-left:1px solid var(--n20);padding-left:2rem;display:flex;flex-direction:column;gap:1.4rem}
.news-item .date{color:var(--bk50)}
.news-item h3{font-family:var(--sans);font-weight:300;font-size:var(--fs-large);line-height:1.4;flex:1}
.news-item .ph{border-radius:var(--r12);overflow:hidden;aspect-ratio:16/10}
.news-item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.news-item:hover .ph img{transform:scale(1.05)}

/* ============ NOSSA ATUACAO (4 municipios) ============ */
.atuacao-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3.5rem 3rem}
.atuacao-card{border-left:1px solid var(--n20);padding-left:2rem;display:flex;flex-direction:column;gap:1.2rem;color:var(--black)}
.atuacao-card .ph{border-radius:var(--r12);overflow:hidden;aspect-ratio:16/10}
.atuacao-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.atuacao-card:hover .ph img{transform:scale(1.05)}
.atuacao-card .kick{color:var(--bk50)}
.atuacao-card h3{font-family:var(--sans);font-weight:300;font-size:var(--fs-large);line-height:1.3}
.atuacao-card p{color:var(--bk64);font-size:var(--fs-med);line-height:1.55;flex:1}
.atuacao-card .go{display:inline-flex;align-items:center;gap:.6rem;font-size:.75rem;letter-spacing:.2px;
  text-transform:uppercase;color:var(--black)}
.atuacao-card .go svg{width:1.1rem;height:1.1rem;transition:transform .3s}
.atuacao-card:hover .go svg{transform:translateX(.3rem)}
@media (max-width:960px){
  .atuacao-grid{grid-template-columns:1fr;gap:2.6rem}
}

/* Paragrafo de apoio nos cabecalhos de secao */
.servicos-head p,.empresas-head p{max-width:56rem;margin:1.6rem auto 0;color:var(--bk64);font-size:var(--fs-med);line-height:1.55}
.produtos-head p,.valores-head p{margin-top:1.6rem;color:var(--bk64);font-size:var(--fs-med);line-height:1.55}
.billboard-content .bb-sub{margin-top:1.4rem;max-width:46rem;color:rgba(255,255,255,.78);font-size:var(--fs-med);line-height:1.55}
@media (max-width:960px){
  .servicos-head p,.empresas-head p,.produtos-head p,.valores-head p,.billboard-content .bb-sub{margin-top:1.1rem}
}

/* ============ FOOTER ============ */
.footer{padding:.5rem}
.footer-in{border-radius:var(--r20);background:var(--n20);padding:4.5rem var(--mg) 2rem;overflow:hidden}
.footer-main{display:flex;gap:5rem;flex-wrap:wrap;padding-bottom:4rem}
.fcol{min-width:11rem}
.fcol .lbl{font-size:.75rem;letter-spacing:.2px;text-transform:uppercase;color:var(--bk50);margin-bottom:1.3rem}
.fcol a{display:block;font-size:var(--fs-med);padding:.4rem 0;color:var(--black)}
.fcol a:hover{opacity:.6}
.footer-info{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;border-top:1px solid var(--bk10);padding-top:2rem}
.social{display:flex;gap:.8rem}
.social a{width:3rem;height:3rem;border:1px solid var(--bk20);border-radius:50%;display:grid;place-items:center;transition:.25s}
.social a:hover{background:var(--black)}
.social a:hover svg{fill:var(--white)}
.social svg{width:1.3rem;height:1.3rem;fill:var(--black);transition:fill .25s}
.footer-meta{display:flex;align-items:center;gap:2.5rem;font-size:.75rem;letter-spacing:.2px;text-transform:uppercase;color:var(--bk64);flex-wrap:wrap}
.footer-logo{margin-top:3.5rem;display:flex;align-items:baseline;justify-content:center;gap:.06em;font-weight:500;letter-spacing:.1em;font-size:clamp(4rem,17vw,17.5rem);line-height:.86;color:var(--n80);user-select:none}
.footer-logo .mk{width:.6em;height:.6em;background:var(--gold);clip-path:polygon(50% 0,100% 100%,0 100%)}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ============ RESPONSIVO ============ */
@media(max-width:1100px){
  .hero-h1{max-width:56%}
  .valores{gap:4rem}
}
@media(max-width:960px){
  .nav-menu,.nav-side .lang-item,.nav-side .work-item{display:none}
  .burger{display:flex}
  /* hero vira fluxo normal com carrossel por toque */
  .hero-scope{height:auto}
  .hero-view{position:relative;top:0;height:auto;min-height:0;padding-bottom:1rem}
  .hero-content{position:relative;inset:auto;padding:4rem var(--mg) 2.5rem;pointer-events:auto}
  .hero-h1{font-size:clamp(2.2rem,8.6vw,3.4rem);max-width:100%}
  .hero-scrollbtn{display:none}
  .hero-shade{display:none}
  .hero-track{position:relative;inset:auto;left:0;padding:0 var(--mg);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hero-track::-webkit-scrollbar{display:none}
  .hcard{width:86vw;aspect-ratio:4/4.6;height:auto;scroll-snap-align:center;opacity:1!important}
  .hcard .quote,.hcard .tag{opacity:1!important}
  .clientes-grid{grid-template-columns:repeat(2,1fr)}
  .cliente-cell{height:11rem}
  .billboard-content{padding:2.2rem}
  .bb-data{gap:2.4rem}
  .jornada{flex-direction:column;min-height:0}
  .jornada-media{width:100%;max-width:100%;min-height:20rem;order:-1}
  .depo-scope{height:auto}
  .depo-view{position:relative;top:0;height:auto;padding:0}
  .depo-head{margin-bottom:3rem}
  .depo-track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-right:var(--mg);scrollbar-width:none}
  .depo-track::-webkit-scrollbar{display:none}
  .depo-item{width:80vw;flex-direction:column;gap:1.6rem;scroll-snap-align:start}
  .depo-item .ph{width:100%;height:44vw}
  .valores{flex-direction:column;gap:3rem}
  .valores-head{position:static;max-width:100%}
  .produto,.produto.flip{flex-direction:column;min-height:0}
  .produto .ph,.produto .txt{width:100%}
  .produto .ph{aspect-ratio:16/10}
  .produto .txt{padding:2rem 0 0}
  .news-grid{grid-template-columns:1fr;gap:3.5rem}
  .news-item{border-left:0;border-top:1px solid var(--n20);padding:2rem 0 0}
  .footer-main{gap:3rem}
  .spacer{height:5rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .hero-h1 .ln span{transform:none}
  .hero-cta,.hero-scrollbtn{opacity:1}
}


/* ============ FIDELIDADE v3 ============ */
/* nav hover = linha inferior */
/* sublinhado por background-size: nao posiciona o item (o dropdown largo ancora na navbar) */
.nav-item{background-image:linear-gradient(var(--n80),var(--n80));background-repeat:no-repeat;background-position:left bottom;background-size:0% 1px;transition:background-size .25s}
.nav-item:hover{background-color:transparent;background-image:linear-gradient(var(--n80),var(--n80));background-repeat:no-repeat;background-position:left bottom;background-size:100% 1px}
.nav-item .dot{width:.1875rem;height:.1875rem}
/* hero v5: spec pin+scrub (texto sai, card vira 3a coluna, cards entram de baixo) */
.hero-track{position:absolute;inset:.5rem 0;left:0;display:block;gap:0}
.hcard{position:absolute;flex:none}
.hcard.main{left:51.72vw;top:0;width:47.86vw;height:100%;z-index:3}
.hcard.main .panel,.hcard.main .tag,.hcard.main .grad{opacity:0}
.hcard.side{width:35rem;height:40rem;top:60%;opacity:0;z-index:2}
.hcard.side.c2{left:2.81vw}
.hcard.side.c3{left:calc(2.81vw + 35rem + 1.5rem)}
.hcard .panel,.hcard .tag,.hcard .grad{transition:none}
.hero-header,.hero-scrollbtn{will-change:opacity,transform}
@media (max-width:960px){
  .hero-track{position:relative;inset:auto;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--mg);scrollbar-width:none}
  .hcard,.hcard.main,.hcard.side{position:relative;left:auto!important;top:auto!important;width:86vw!important;height:auto!important;aspect-ratio:4/4.6;opacity:1!important;scroll-snap-align:center}
  .hcard .panel,.hcard .tag,.hcard .grad,.hcard.main .panel,.hcard.main .tag,.hcard.main .grad{opacity:1!important}
}
/* hero: header absoluto */
.hero-content{display:block;padding-left:0}
.hero-header{pointer-events:auto;position:absolute;top:25%;left:6.46vw;width:50vw;min-width:35rem}
.hero-header .hero-h1{max-width:100%}
.hero-cta{margin-top:48px}
.hero-scrollbtn{left:6.46vw;bottom:auto;top:82.6%;width:4rem;height:4rem;border-radius:6px;border-color:rgba(0,0,0,.12)}
/* hero card: painel inferior estruturado */
.hcard .grad{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55));top:auto;height:50%}
.hcard .tag{top:24px;left:24px;font-size:13px;letter-spacing:3px;font-weight:600;text-transform:uppercase}
.hcard .panel{position:absolute;left:0;right:0;bottom:0;border-top:1px solid rgba(255,255,255,.25);height:min(288px,15vw);display:flex;overflow:hidden}
.hcard .panel .txt{flex:1;display:flex;flex-direction:column;gap:min(24px,1.25vw);padding:min(48px,2.5vw);overflow:hidden}
.hcard .panel .txt p{font-size:min(20px,1.042vw);line-height:1.4;color:var(--white)}
.hcard .panel .nm{font-size:min(16px,.833vw);line-height:1.4;color:rgba(255,255,255,.75)}
.hcard .panel .nm b{color:var(--white);font-weight:400;display:block}
.hcard .panel .act{width:min(112px,5.8vw);border-left:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:var(--white)}
.hcard .panel .act svg{width:1.4rem;height:1.4rem}
.hcard:not(.on) .panel,.hcard:not(.on) .tag{opacity:0;transition:opacity .3s}
.hcard.on .panel,.hcard.on .tag{opacity:1;transition:opacity .5s .15s}
/* billboard: overlay chapado + rodape em coluna + botao vidro */
.billboard-overlay{background:rgba(0,0,0,.3)}
.billboard-foot{flex-direction:column;align-items:flex-start;gap:2rem;margin-top:3rem}
.bb-data{gap:5rem}
.btn.inverted{background:rgba(0,0,0,.3);border:1px solid rgba(0,0,0,.3);color:var(--white);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btn.inverted:hover{background:rgba(0,0,0,.45)}
/* finale: heading esquerda + botao direita */
.billboard.finale .billboard-content{flex-direction:row;justify-content:space-between;align-items:center;text-align:left;padding:0 7.75rem}
.billboard.finale h2{max-width:55rem;margin:0}
.billboard.finale .btn{margin-top:0}
.billboard.finale .billboard-overlay{background:rgba(20,20,20,.35)}
/* depoimentos: heading em coluna */
.depo-head{flex-direction:column;align-items:flex-start;gap:3rem;max-width:34rem}
.depo-track{gap:1.25rem}
.depo-item{gap:3rem}
/* valores/accordion: respiro 4rem */
.valores-head{top:12rem}
.acc-head{padding:4rem 0;gap:4rem}
.acc-body p{padding-bottom:4rem}
.acc-list{max-width:55.3rem}
/* produtos: 2 colunas c/ heading sticky */
.produtos-wrap{display:flex;gap:4rem;align-items:stretch}
.produtos-head{width:30%;max-width:27.5rem;flex:none;position:sticky;top:11rem;align-self:flex-start}
.produtos-head h2{font-size:var(--fs-h2)}
.produtos-list{flex:1;margin-top:0;gap:.5rem}
.produto{min-height:30rem;gap:.5rem}
.produto .txt{justify-content:flex-end;padding:3rem;gap:1rem}
.produto .txt h3{font-size:var(--fs-h1);margin-bottom:0}
.produto .txt p{margin-top:.4rem}
.produto .txt .go{margin-top:1.2rem}
/* news fino */
.news-item{padding-left:0;gap:0}
.news-head{align-items:flex-end}
.news-head .left{display:flex;flex-direction:column;gap:1.5rem;max-width:34rem}
.news-head .left p{font-size:var(--fs-med);color:var(--bk64)}
.news-item .content{display:flex;flex-direction:column;gap:1.5rem;padding:0 3rem 3rem;min-height:10.625rem}
.news-item h3{flex:1}
.news-item .ph{height:20rem;border-radius:var(--r8);aspect-ratio:auto}
/* footer fiel */
.footer-in{padding:0;overflow:hidden}
.footer-main{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.75rem,1fr));gap:3rem;padding:3rem}
.footer-info{border-top:1px solid var(--black);border-bottom:1px solid var(--black);padding:1.5rem 3rem}
.social{gap:1.5rem}
.social a{width:3rem;height:3rem;border:0;border-radius:0}
.social a:hover{background:transparent}
.social a:hover svg{fill:var(--bk64)}
.social svg{width:1.5rem;height:1.5rem}
.footer-in{padding-bottom:1.5rem}
/* titulos com max-width da referencia */
.servicos-head h2{max-width:51rem;margin-inline:auto}
.empresas-head h2{max-width:60rem;margin-inline:auto}
@media(max-width:960px){
  .hero-header{position:relative;top:0;left:0;width:auto;min-width:0;padding:4rem var(--mg) 2.5rem}
  .hcard .panel{height:auto;min-height:9rem}
  .hcard .panel .txt p{font-size:1rem}
  .hcard .panel .nm{font-size:.8rem}
  .hcard .panel .act{width:4.5rem}
  .billboard.finale .billboard-content{flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:2.2rem;gap:2rem}
  .produtos-wrap{flex-direction:column;gap:2rem}
  .produtos-head{width:100%;max-width:100%}
  .produtos-head{position:static}
  .news-item .content{padding:0 0 2rem;min-height:0}
  .footer-main{grid-template-columns:1fr 1fr;padding:1.5rem}
  .footer-info{flex-direction:column;align-items:flex-start;gap:2rem;padding:2rem 1.5rem}
  .footer-logo{padding:0 1.5rem 2rem}
}

/* ============ NAV extra ============ */
.nav-item.current{background:var(--bk8)}
.dd-links{display:flex;flex-direction:column;min-width:20rem;padding:1rem;cursor:default}
.dd-links a{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1rem 1.2rem;border-radius:var(--r8);font-size:var(--fs-med)}
.dd-links a:hover{background:var(--n00)}
.dd-links a svg{width:1rem;height:1rem;opacity:0;transition:.25s}
.dd-links a:hover svg{opacity:1;transform:translateX(3px)}
.dropdown.narrow{left:auto;right:auto;min-width:22rem;border:1px solid var(--bk10);border-radius:0 0 var(--r12) var(--r12)}

/* ============ PAGE HERO (paginas internas) ============ */
.page-hero{padding-top:6rem}
.page-hero .kicker{color:var(--bk64);margin-bottom:1.6rem}
.page-hero h1{font-size:var(--fs-display);max-width:22ch}
.page-hero .sub{font-size:var(--fs-huge);color:var(--bk64);max-width:52ch;margin-top:1.8rem}

/* ============ PRODUTO HERO ============ */
.produto-hero{padding-top:6rem}
.produto-hero .kicker{font-size:clamp(1rem,1vw + .6rem,1.5rem);letter-spacing:.28em;text-transform:uppercase;font-weight:400;color:var(--bk50);margin-bottom:2rem}
.produto-hero h1{font-size:var(--fs-h1);max-width:26ch}
.produto-hero .btn{margin-top:2.6rem}
.produto-media{margin-top:5rem;border-radius:var(--r20);overflow:hidden;aspect-ratio:21/9;position:relative}
.produto-media img{width:100%;height:100%;object-fit:cover}

/* ============ MARQUEE de logos ============ */
.marquee-band{padding:3.5rem 0;border-bottom:1px solid var(--bk8)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:5.5rem;width:max-content;align-items:center;animation:mq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee img{height:2.1rem;width:auto;object-fit:contain;filter:grayscale(1) brightness(.45) opacity(.55)}

/* ============ CASES page ============ */
.case-card{margin-bottom:2rem}
.case-card .billboard-in{min-height:70vh}
.stats-band{background:var(--n90);border-radius:var(--r20);color:var(--white);padding:4.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem}
.stats-band .s span{display:block;font-size:var(--fs-med);color:var(--wt64);margin-bottom:.8rem;max-width:20ch}
.stats-band .s b{font-family:var(--serif);font-weight:300;font-size:var(--fs-h2);color:var(--gold)}
.stats-note{margin-top:1.2rem;font-size:.75rem;letter-spacing:.2px;text-transform:uppercase;color:var(--bk50)}
@media(max-width:960px){.stats-band{grid-template-columns:repeat(2,1fr);padding:2.5rem}}

/* ============ SOBRE ============ */
.sobre-main{display:flex;gap:7rem;align-items:flex-start}
.sobre-main .head{flex:none;width:24rem;position:sticky;top:calc(var(--nav-h) + 3rem)}
.sobre-main .head h1{font-size:var(--fs-display)}
.sobre-main .body{flex:1;max-width:56rem}
.sobre-main .body p{font-size:var(--fs-h4);font-weight:300;line-height:1.5;color:var(--bk64);margin-bottom:2rem}
.sobre-main .body p b{color:var(--black);font-weight:400}
.mvv{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:4rem}
.mvv .card{background:var(--n00);border-radius:var(--r12);padding:2.6rem}
.mvv .card .lbl{font-size:.75rem;letter-spacing:.2px;text-transform:uppercase;color:var(--bk50);margin-bottom:1.2rem}
.mvv .card p{font-size:var(--fs-large);color:var(--black);line-height:1.5}
.team-billboard{border-radius:var(--r20);overflow:hidden;aspect-ratio:21/10;position:relative}
.team-billboard img{width:100%;height:100%;object-fit:cover}
@media(max-width:960px){.sobre-main{flex-direction:column;gap:2.5rem}.sobre-main .head{position:static;width:auto}.mvv{grid-template-columns:1fr}}

/* ============ CARREIRAS ============ */
.cult-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.cult-card{border-top:2px solid var(--gold);padding-top:1.8rem}
.cult-card h3{font-size:var(--fs-h3);margin-bottom:1rem}
.cult-card p{font-size:var(--fs-med);color:var(--bk64)}
.vaga{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.8rem 0;border-bottom:1px solid var(--bk8);font-size:var(--fs-h4);font-family:var(--serif);font-weight:300;transition:padding .25s}
.vaga:hover{padding-left:.8rem}
/* Carreiras: chamada unica para o sistema de vagas. */
.vagas-chamada{max-width:44rem}
.vagas-chamada h2{font-size:var(--fs-h2)}
.vagas-chamada p{margin-top:1.6rem;color:var(--bk64);font-size:var(--fs-med);line-height:1.55}
.vagas-chamada .btn{margin-top:2.4rem}
/* Cargo listado como contexto, nao como link: sem promessa de navegacao. */
.vaga .eyebrow-s{color:var(--bk50);font-family:var(--sans)}
.vaga svg{width:1.3rem;height:1.3rem;flex:none;transition:transform .25s}
.vaga:hover svg{transform:translateX(5px)}
@media(max-width:960px){.cult-grid{grid-template-columns:1fr}}

/* ============ CONTATO / FORM ============ */
.contato-grid{display:flex;gap:7rem;align-items:flex-start}
.contato-grid .head{flex:none;width:24rem;position:sticky;top:calc(var(--nav-h) + 3rem)}
.contato-grid .head h1{font-size:var(--fs-display)}
.contato-grid .head .sub{margin-top:1.6rem;font-size:var(--fs-med);color:var(--bk64);max-width:34ch}
.contato-grid .head .meta{margin-top:2.6rem;display:flex;flex-direction:column;gap:.7rem;font-size:var(--fs-med)}
.contato-grid .head .meta a{text-decoration:underline;text-underline-offset:3px}
.form-contato{flex:1;max-width:52rem;display:flex;flex-direction:column;gap:2.4rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem}
.input-wrap label{display:block;font-size:.75rem;letter-spacing:.2px;text-transform:uppercase;color:var(--bk64);margin-bottom:.7rem}
.input-wrap input,.input-wrap textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--bk20);padding:.8rem 0;font-family:var(--sans);font-weight:300;font-size:var(--fs-large);color:var(--black);outline:none;transition:border-color .25s;border-radius:0}
.input-wrap input:focus,.input-wrap textarea:focus{border-bottom-color:var(--black)}
.input-wrap textarea{min-height:7rem;resize:vertical}
.form-ok{background:var(--n00);border-radius:var(--r12);padding:2.2rem;font-size:var(--fs-large);display:none}
@media(max-width:960px){.contato-grid{flex-direction:column;gap:2.5rem}.contato-grid .head{position:static;width:auto}.form-row{grid-template-columns:1fr}}

/* ============ NEWS page grid ============ */
.news-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
@media(max-width:960px){.news-page-grid{grid-template-columns:1fr}}

/* ============ desktop: elementos exclusivos do mobile ficam ocultos ============ */
.jstep .jm{display:none}
.clientes-marquee{display:none}

/* ============ MOBILE (estrutura da referencia) ============ */
@media(max-width:960px){
  .spacer{height:3rem}
  .announce{flex-direction:column;align-items:flex-start;text-align:left;gap:.45rem;padding:1.1rem 1.5rem}
  .announce .t-med{font-size:.92rem;line-height:1.45}
  main .btn{width:100%;justify-content:space-between}
  /* menu fullscreen com linhas */
  .drawer{padding:0 0 2rem}
  .drawer-close{position:absolute;top:.9rem;right:1.2rem;z-index:2}
  .drawer nav{margin-top:6.2rem;display:block}
  .drawer nav a{font-family:var(--sans);font-size:1rem;font-weight:500;letter-spacing:.2px;text-transform:uppercase;padding:1.9rem 1.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bk10)}
  .drawer nav a::after{content:"";width:.55rem;height:.55rem;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);flex:none}
  .drawer .btn{margin:2rem 1.5rem 0;width:calc(100% - 3rem);justify-content:space-between}
  /* hero: sem midia no mobile (referencia): headline + CTA apenas */
  .hero-track{display:none}
  .hero-view{min-height:0}
  .hero-header{padding:3rem var(--mg) 9rem!important}
  .hero-h1{font-size:clamp(2.6rem,11.5vw,3.3rem)}
  .hero-cta{margin-top:2.2rem}
  /* logos: marquee no lugar do grid */
  .clientes-grid{display:none}
  .clientes-marquee{display:block;padding:1.5rem 0}
  .empresas-head{margin-bottom:1.5rem}
  /* billboards compactos */
  .billboard{height:41.125rem!important;min-height:0!important;padding:.5rem}
  .billboard .billboard-in{min-height:0!important}
  #case.billboard,.billboard.case-card{height:33rem!important}
  #case .bb-data{display:none}
  .billboard-content{padding:1.5rem 1.5rem 2.6rem}
  .bb-data{gap:1.5rem}
  .billboard-foot{gap:1.5rem;margin-top:1.5rem}
  /* jornada: carrossel horizontal de cards */
  .jornada{flex-direction:row;gap:0;min-height:0}
  .jornada-media{display:none}
  .jornada-list{flex-direction:row;gap:1rem;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.5rem;justify-content:flex-start}
  .jornada-list::-webkit-scrollbar{display:none}
  .jstep{flex:none;width:80%;scroll-snap-align:start;border:1px solid var(--bk10);border-radius:var(--r12);padding:0 0 1.4rem;overflow:hidden;background:#fff;cursor:default}
  .jstep .jm{display:block;width:100%;height:13rem;object-fit:cover}
  .jstep .head{padding:1.2rem 1.2rem 0;color:var(--black)}
  .jstep .body{grid-template-rows:1fr}
  .jstep .body p{padding:.5rem 1.2rem 0 2.75rem}
  .jstep .sq{background:var(--gold)}
  .servicos-head{margin-bottom:2rem}
  /* depoimentos: cards 80% com foto 22.5rem */
  .depo-item{width:80%;gap:1.5rem}
  .depo-item .ph{height:22.5rem}
  .depo-head{margin-bottom:2rem}
  /* produtos: imagem 16rem primeiro */
  .produto .ph{aspect-ratio:auto;height:16rem}
  .produto .txt{padding:1.5rem 0 0}
  /* produto hero (paginas internas) */
  .produto-media{aspect-ratio:auto;height:22.5rem;margin-top:2.5rem}
  /* news: carrossel horizontal */
  .news-head{flex-direction:column;align-items:flex-start;gap:1.5rem;margin-bottom:3rem}
  .news-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1.25rem;scrollbar-width:none}
  .news-grid::-webkit-scrollbar{display:none}
  .news-item{flex:none;width:86%;scroll-snap-align:start;border-top:0;border-left:1px solid var(--n20);padding:0 0 0 1rem;gap:1.25rem}
  .news-item .ph{height:22rem;aspect-ratio:auto}
  .news-item .content{min-height:13rem;padding:0 1rem 0 0}
  /* accordion: cards grandes na superficie clara */
  .acc{background:var(--n00);border-bottom:0;border-radius:var(--r12);margin-bottom:1rem;padding:2rem;min-height:15rem;display:flex;flex-direction:column;justify-content:center}
  .acc-head{padding:0;gap:2rem}
  .acc-head h3{font-size:1.65rem;line-height:1.25;max-width:72%}
  .acc-body p{padding:1.3rem 0 0;font-size:1rem}
  /* footer empilhado */
  .footer-main{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem}
  .footer-info{flex-direction:column;align-items:stretch;gap:2.5rem;padding:2.5rem 1.5rem}
  .social{width:100%;justify-content:space-between}
  .footer-meta{flex-direction:column;align-items:flex-start;gap:1.2rem}
}
@media(max-width:479px){
  .depo-item{width:86%}
  .billboard-content h2{font-size:1.6rem}
}

/* ================= TEMA VISION (v3) ================= */
:root{--serif:"Archivo",system-ui,sans-serif;--sans:"Archivo",system-ui,sans-serif;--gold-d:#C68F1E}
h1,h2,h3{font-weight:700;letter-spacing:-.022em}
.hero-h1{font-weight:800;letter-spacing:-.03em}
.qt{font-weight:600}
.announce{background:var(--gold);color:var(--navy-deep)}
.announce a{color:var(--navy-deep);text-decoration:underline;text-underline-offset:3px}
.navbar{background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.14)}
.nav-item{color:#fff}
.nav-item:hover{background-image:linear-gradient(var(--gold),var(--gold))}
.nav-item .dot{background:var(--gold)}
.nav-item .chev{color:rgba(255,255,255,.7)}
.nav-side .nav-item{border-left:1px solid rgba(255,255,255,.14)}
.burger{border-left:1px solid rgba(255,255,255,.14)}
.burger span,.burger span::before,.burger span::after{background:#fff}
.dropdown{background:#fff;border-bottom:0;box-shadow:0 48px 70px -42px rgba(4,18,42,.5)}
.dd-card h3{color:var(--black)}
.dd-card p{color:var(--bk64)}
.dd-card:hover{background:var(--n00)}
.dd-links a{color:var(--black)}
.dd-links a:hover{background:var(--n00)}
.dd-links a svg{stroke:var(--gold-d)}
.hero-view{background:var(--navy-deep)}
.hero-h1{color:#fff}
.hero-scrollbtn{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.gold-marquee{background:var(--gold);color:var(--navy-deep);overflow:hidden;padding:1.05rem 0}
.gm-track{display:flex;align-items:center;gap:0;width:max-content;animation:gmq 30s linear infinite;white-space:nowrap}
.gm-track span{font-weight:800;font-size:1rem;letter-spacing:.14em;text-transform:uppercase}
.gm-track span::after{content:"";display:inline-block;width:.62em;height:.62em;margin:0 1.6rem;background:var(--navy-deep);clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateY(.02em)}
@keyframes gmq{to{transform:translateX(-33.34%)}}
.empresas{background:var(--n00)}
.clientes-grid{border-color:rgba(10,42,88,.12)}
.cliente-cell{background:transparent}
.depo-view{background:var(--n00)}
.news-item .date{color:var(--gold-d)}
.jstep.on .sq{background:var(--gold)}
.footer-in{background:var(--navy-deep)}
.fcol a{color:#dbe4f0}
.fcol a:hover{opacity:1;color:var(--gold)}
.fcol .lbl{color:rgba(255,255,255,.5)}
.footer-info{border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
.footer-meta{color:rgba(255,255,255,.6)}
.social svg{fill:#fff}
.social a:hover svg{fill:var(--gold)}
.drawer{background:var(--navy-deep)}
.drawer nav a{color:#fff;border-bottom-color:rgba(255,255,255,.14)}
.drawer-close{color:#fff}
.billboard-overlay{background:rgba(4,18,42,.42)}
.btn{font-weight:700}
/* mobile do tema: cards da jornada e drawer seguem o navy */
@media(max-width:960px){
  .jstep{background:#fff;border-color:rgba(10,42,88,.14)}
  .drawer nav a{border-bottom:1px solid rgba(255,255,255,.14)}
}

/* ===== paginas de projeto: etapas + mapa ===== */
.etapas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 2.5rem}
.jstep-static{display:flex;flex-direction:column;gap:1rem;border-top:1px solid var(--n20);padding-top:1.75rem}
.jstep-static .date{color:var(--gold-d)}
.jstep-static h3{font-family:var(--sans);font-weight:400;font-size:var(--fs-h4);line-height:1.3}
.jstep-static p{color:var(--bk64);font-size:var(--fs-med);line-height:1.55;flex:1}
.jstep-static .ph{border-radius:var(--r8);overflow:hidden;height:14rem;margin-top:.5rem}
.jstep-static .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.jstep-static:hover .ph img{transform:scale(1.04)}
.mapa-wrap{border-radius:var(--r20);overflow:hidden;height:26rem;background:var(--navy-deep);border:1px solid var(--bk10)}
.mapa-wrap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.28)}
@media(max-width:960px){
  .etapas-grid{grid-template-columns:1fr;gap:2.5rem}
  .jstep-static .ph{height:16rem}
  .mapa-wrap{height:20rem}
}

/* ===== menu: acessibilidade e drawer completo ===== */
.nav-item .eyebrow-m[role="button"]{outline:none}
.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-item:focus-within .chev{transform:rotate(180deg)}
.nav-item .eyebrow-m:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:var(--r4)}
.dropdown a:focus-visible,.drawer a:focus-visible,.btn:focus-visible,.burger:focus-visible,
.drawer-close:focus-visible,.social a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r4)}
.drawer-lbl{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bk50);padding:2rem 1.5rem .6rem}
.drawer nav a.sub{padding:1.1rem 1.5rem;font-size:.95rem;font-weight:400;text-transform:none;letter-spacing:0}
.drawer nav a.on{color:var(--gold-d);font-weight:600}
.drawer nav a.on::after{border-color:var(--gold-d)}
body.drawer-open{overflow:hidden}
/* "PT" e rotulo, nao controle: sem cursor de clique nem sublinhado de hover */
.nav-item.lang-item{cursor:default}
.nav-item.lang-item:hover{background-image:none}
/* drawer e navy no tema v3: rotulo e item ativo precisam de cor clara */
.drawer .drawer-lbl{color:rgba(255,255,255,.5)}
.drawer nav a.on{color:var(--gold)}
.drawer nav a.on::after{border-color:var(--gold)}

/* ===== trocador de idioma ===== */
.lang-item .eyebrow-m{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
.nav-item.lang-item{cursor:pointer}
.nav-item.lang-item:hover{background-image:linear-gradient(var(--gold),var(--gold))}
.flag{width:1.25rem;height:.9rem;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lang-drop{left:auto!important;right:0!important;width:14rem}
.lang-drop .dd-links a{display:flex;align-items:center;gap:.7rem}
.lang-drop .dd-links a[aria-current]{color:var(--gold-d);font-weight:600}
.drawer nav a .flag{width:1.4rem;height:1rem;margin-right:.75rem}
.drawer nav a[hreflang]{display:flex;align-items:center}
.drawer nav a[hreflang]{justify-content:flex-start;gap:0}
.drawer nav a[hreflang]::after{margin-left:auto}

/* ===== video de fundo (hero e billboards) ===== */
.hcard video.bgvid,.billboard-in>video.bgvid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;background:var(--navy-deep)}
.hcard video.bgvid{transform:scale(1.02)}
.bgvid-fb{display:none}

/* Quem pede menos movimento comeca na imagem parada e ganha um botao para ver o video.
   Nada roda sozinho: a preferencia do sistema continua respeitada. */
@media (prefers-reduced-motion: reduce){
  video.bgvid{display:none}
  .bgvid-fb{display:block}
  .bgvid-on>video.bgvid{display:block}
  .bgvid-on>.bgvid-fb{display:none}
}
/* Celular cai para a imagem e nao baixa video em nenhuma hipotese. */
@media (max-width:960px){
  video.bgvid{display:none!important}
  .bgvid-fb{display:block!important}
}

/* Controle de video: icone fino com sombra, pastilha so no hover. Area de toque 40x40. */
.bgvid-play{position:absolute;z-index:4;top:1rem;right:1rem;width:40px;height:40px;
  display:none;align-items:center;justify-content:center;padding:0;
  border:0;border-radius:999px;background:transparent;color:#fff;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));
  transition:background .18s ease}
.bgvid-play:hover,.bgvid-play:focus-visible{background:rgba(0,0,0,.45)}
.bgvid-play:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bgvid-play svg{width:19px;height:19px;display:block}
@media (min-width:961px) and (prefers-reduced-motion: reduce){
  .bgvid-play{display:flex}
}
/* Autoplay barrado por outro motivo: o controle aparece de qualquer forma. */
@media (min-width:961px){
  .bgvid-play.forcado{display:flex}
}

/* ===== pagina de noticia ===== */
.art-meta{padding:1.1rem 0;border-top:1px solid var(--n20)}
.art-meta:last-child{border-bottom:1px solid var(--n20)}
.art-meta .lbl{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bk50);margin-bottom:.35rem}
.art-meta span:last-child{font-size:var(--fs-med);color:var(--black)}
.sobre-main .body .art-h{font-family:var(--sans);font-weight:400;font-size:var(--fs-h3);
  margin:3rem 0 1.25rem;color:var(--black)}
.art-box{border-left:2px solid var(--gold);padding:.25rem 0 .25rem 1.75rem;margin:2.5rem 0 3rem}
.art-box h3{font-family:var(--sans);font-weight:600;font-size:var(--fs-med);letter-spacing:.02em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:.75rem}
.sobre-main .body .art-box p{margin-bottom:0;font-size:var(--fs-med)}
.art-reel{max-width:26rem;border-radius:var(--r12);overflow:hidden;border:1px solid var(--bk10);
  background:var(--n00)}
.art-reel iframe{width:100%;height:34rem;border:0;display:block}
.art-fontes{list-style:none;display:flex;flex-direction:column;gap:.9rem}
.art-fontes a{color:var(--black);text-decoration:underline;text-underline-offset:4px;
  font-size:var(--fs-med);text-decoration-color:var(--bk20)}
.art-fontes a:hover{text-decoration-color:var(--gold)}
@media(max-width:960px){ .art-reel{max-width:none} .art-reel iframe{height:30rem} }
/* player de video dentro da noticia (com controles, vertical) */
.art-video{max-width:24rem;border-radius:var(--r12);overflow:hidden;border:1px solid var(--bk10);
  background:var(--navy-deep);margin:.5rem 0 1rem}
.art-video video{width:100%;height:auto;display:block}
.sobre-main .body .art-cap{font-size:var(--fs-med);color:var(--bk50);margin-bottom:2.5rem;max-width:24rem}
@media(max-width:960px){ .art-video{max-width:none} }

/* ===== movimento reduzido no DESKTOP =====
   Antes, `(max-width:960px), (prefers-reduced-motion: reduce)` jogava quem pede menos
   movimento no layout de celular: card de 86vw ocupando a tela e o texto por cima.
   Aqui o hero fica na composicao normal, so que parado. */
@media (min-width:961px) and (prefers-reduced-motion: reduce){
  .hcard.main{left:51.72vw;top:0;width:47.86vw;height:100%;aspect-ratio:auto}
  .hcard.side{display:none}
  /* sem animacao, o card mostra rotulo e legenda de cara */
  .hcard.main .panel,.hcard.main .tag,.hcard.main .grad{opacity:1}
  /* sem scrub nao ha pista para percorrer: corta o scroll morto */
  .hero-scope{height:auto}
  .hero-view{position:static;height:calc(100svh - var(--nav-h));min-height:640px}
  .depo-scope{height:auto}
  .depo-view{position:static;height:auto;overflow:visible;padding:5rem 0}
  .depo-track{transform:none!important;display:grid;gap:3.5rem 4rem;
    grid-template-columns:repeat(auto-fit,minmax(28rem,1fr))}
  .depo-item{width:auto;max-width:none;min-width:0}
}

/* ============ PAGINA DE PROJETO: numeros, destaques, status ============ */
/* Faixa de numeros com 3 colunas (Nova Iguacu). O padrao da .stats-band e 4. */
.stats-band.tres{grid-template-columns:repeat(3,1fr)}

/* Blocos de escopo/diferencial: foto e texto lado a lado, alternando o lado. */
.destaques{display:flex;flex-direction:column;gap:.5rem}
.destaque{display:flex;gap:.5rem;min-height:26rem;align-items:stretch}
.destaque.flip{flex-direction:row-reverse}
.destaque .ph{width:50%;border-radius:var(--r20);overflow:hidden}
.destaque .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.destaque:hover .ph img{transform:scale(1.04)}
.destaque .txt{width:50%;display:flex;flex-direction:column;justify-content:center;gap:1.2rem;padding:3rem}
.destaque .txt h3{font-size:var(--fs-h2)}
.destaque .txt p{font-size:var(--fs-large);line-height:1.55;color:var(--bk64);max-width:46ch}

/* Status do projeto: uma linha, rotulo a esquerda. */
.status-band{display:flex;align-items:baseline;gap:2.5rem;flex-wrap:wrap;border-top:2px solid var(--gold);padding-top:1.8rem}
.status-band .lbl{font-size:.75rem;letter-spacing:.2px;text-transform:uppercase;color:var(--bk50);flex:none;min-width:11rem}
.status-band p{font-size:var(--fs-huge);line-height:1.45;max-width:54ch;flex:1;min-width:16rem}

@media(max-width:960px){
  /* .stats-band.tres tem especificidade maior que a regra de 2 colunas la de cima,
     entao precisa repetir o valor aqui, senao o celular fica com 3 colunas. */
  .stats-band.tres{grid-template-columns:repeat(2,1fr)}
  /* 3 numeros em 2 colunas deixam orfao: o ultimo ocupa a linha inteira */
  .stats-band.tres .s:last-child{grid-column:1/-1}
  .destaque,.destaque.flip{flex-direction:column;min-height:0}
  .destaque .ph,.destaque .txt{width:100%}
  .destaque .ph{aspect-ratio:16/10}
  .destaque .txt{padding:2rem 0 0}
  .destaques{gap:3.5rem}
  .status-band{gap:1rem}
  .status-band .lbl{min-width:0}
}
@media(max-width:479px){
  .stats-band.tres{grid-template-columns:1fr}
  .stats-band.tres .s:last-child{grid-column:auto}
}

/* Os rotulos tem 1 ou 2 linhas: sem isto os numeros dourados ficam desalinhados
   entre si. O rotulo estica e empurra o numero para a base da coluna. */
.stats-band .s{display:flex;flex-direction:column;height:100%}
.stats-band .s span{flex:1;margin-bottom:.8rem}

/* ============ HERO NO CELULAR ============ */
/* Ate 08/09/2026 os cards do topo tinham `display:none` ate 960px, herdado da
   referencia. Com os 3 cards passando a carregar as capacidades da VISION, esse
   conteudo simplesmente nao existia no celular. Voltam como carrossel por toque
   (a mecanica ja estava pronta no bloco de 960px), e a headline vem antes deles.
   O JS nao interfere: heroUpdate() sai cedo quando `(max-width:960px)` casa. */
@media(max-width:960px){
  .hero-view{display:flex;flex-direction:column}
  .hero-content{order:-1}
  .hero-track{display:flex;order:0;padding-bottom:.5rem}
  .hero-header{padding:3rem var(--mg) 2.5rem!important}
}

/* ============ BILLBOARD DE RESULTADOS NO CELULAR ============ */
/* `#case .bb-data{display:none}` escondia os dois numeros de resultado (ate 61%,
   55 mil+) no celular, porque o billboard tinha altura fixa de 33rem e o
   conteudo nao cabia. Com altura automatica os dois entram e nada estoura:
   medido em 375 e 500 px, conteudo 528px dentro de 528px, overflow 0. */
@media(max-width:960px){
  #case.billboard{height:auto!important;min-height:33rem}
  #case.billboard .billboard-in{min-height:33rem!important}
  #case .bb-data{display:flex}
}

/* ===== MOVIMENTO REDUZIDO NO DESKTOP: os 3 cards continuam existindo =====
   O bloco de 27/ago escondia `.hcard.side`, o que fazia sentido quando os cards
   eram projetos e o conteudo se repetia logo abaixo. Desde 08/09/2026 eles
   carregam as 3 capacidades da VISION: esconder dois apagava dois tercos do que o
   cliente escreveu, justo para quem liga "reduzir movimento" — toggle comum no
   Windows 11. Aqui o hero vira headline em cima e os 3 cards lado a lado embaixo,
   que e a composicao final da animacao, parada. */
@media (min-width:961px) and (prefers-reduced-motion: reduce){
  .hero-scope{height:auto}
  .hero-view{position:static;height:auto;min-height:0;overflow:visible;
    display:flex;flex-direction:column;padding-bottom:2.5rem}
  .hero-content{position:static;inset:auto;order:-1;pointer-events:auto;padding:0;display:block}
  .hero-header{position:static;top:auto;left:auto;width:auto;min-width:0;max-width:62rem;
    padding:3.5rem 2.81vw 2.5rem}
  .hero-scrollbtn{display:none}
  .hero-track{position:static;inset:auto;left:auto;display:flex;gap:1.5rem;
    height:auto;padding:0 2.81vw;overflow:visible}
  .hcard,.hcard.main,.hcard.side{position:relative;top:auto;
    flex:1 1 0;width:auto;height:auto;aspect-ratio:560/640;opacity:1;display:block}
  /* `.hcard.side.c2/.c3` tem especificidade maior que `.hcard.side`: sem repetir
     aqui, o `left` da composicao animada empurra o terceiro card para fora da tela. */
  .hcard.main,.hcard.side.c2,.hcard.side.c3{left:auto}
  .hcard .panel,.hcard .tag,.hcard .grad{opacity:1}
}

/* ============ CORRECOES DE CELULAR (08/09/2026) ============ */
@media(max-width:960px){
  /* 1. `align-items:flex-start` no container faz o filho encolher ate o tamanho do
     proprio conteudo quando a direcao vira coluna. Era por isso que a coluna de
     dados da noticia ficava com 226px e o formulario de contato com 233px dentro
     de 320px de tela: pareciam desalinhados do resto da pagina. */
  .sobre-main,.contato-grid,.valores{align-items:stretch}
  .sobre-main .head,.contato-grid .head,.form-contato,.valores-head{width:auto;max-width:none}

  /* 2. Galeria: o bloco de legenda tinha 13rem fixos. Com legenda curta abria um
     vazio grande entre o texto e a foto, e a foto caia abaixo da dobra. */
  .news-item .content{min-height:0}
  .news-item .ph{height:16rem}

  /* 3. Listagem de noticias: `.news-item` herdava `width:86%` do carrossel das
     galerias e ficava mais estreito que a coluna do grid. */
  .news-page-grid{gap:2.5rem}
  .news-page-grid .news-item{width:auto;flex:initial}

  /* 4. As alavancas param de ser carrossel horizontal e ficam uma embaixo da outra. */
  .jornada{flex-direction:column}
  .jornada-list{flex-direction:column;overflow-x:visible;gap:1.25rem;padding-bottom:0}
  .jornada-list .jstep{width:auto;flex:initial;scroll-snap-align:none}

  /* 5. Mapa: mais alto e ocupando a largura toda. */
  .mapa-wrap{height:22rem}
}

/* Acao do mapa: fica FORA do iframe, entao a secao continua util se o embed do
   Google nao carregar — mesma regra ja adotada na pagina de contato. */
.mapa-acao{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-top:1.2rem}
.mapa-acao .stats-note{margin-top:0}
.mapa-acao .btn{padding:.85rem 1.1rem}
@media(max-width:960px){
  .mapa-acao{gap:1rem}
  .mapa-acao .btn{width:100%;justify-content:space-between}
}

/* ============ ONDE ATUAMOS: painel no lugar do embed ============ */
/* O iframe do Google (`maps.google.com/...&output=embed`) nao pinta de forma
   confiavel: no celular a secao aparecia vazia. Aqui a localizacao vira um painel
   proprio, que sempre carrega, e o mapa completo fica a um toque no botao. */
.mapa-painel{border-radius:var(--r20);background:var(--navy-deep);color:var(--white);
  padding:4rem;display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;
  flex-wrap:wrap;min-height:22rem;position:relative;overflow:hidden}
.mapa-painel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(228,170,63,.22) 1.5px,transparent 1.6px);
  background-size:26px 26px;mask-image:linear-gradient(120deg,transparent 45%,#000 100%);
  -webkit-mask-image:linear-gradient(120deg,transparent 45%,#000 100%)}
.mapa-painel .txt{position:relative;z-index:1;max-width:34rem}
.mapa-painel .eyebrow-s{color:var(--gold)}
.mapa-painel h3{font-size:var(--fs-h1);margin:1rem 0 .8rem;color:var(--white)}
.mapa-painel p{font-size:var(--fs-med);color:rgba(255,255,255,.7);line-height:1.55}
.mapa-painel .btn{position:relative;z-index:1;flex:none}
@media(max-width:960px){
  .mapa-painel{padding:2.5rem 1.75rem;min-height:0;flex-direction:column;
    align-items:stretch;gap:2rem}
  .mapa-painel .btn{width:100%;justify-content:space-between}
}

/* ============ BILLBOARD COMO LINK ============ */
/* `.billboard` nunca declarou `display`. Como <div> vira block e funciona, mas na
   pagina de Projetos cada card e um <a>, que e inline por padrao: `height` e
   `min-height` nao se aplicam a inline e o card colapsava. No desktop passava
   despercebido porque `.case-card .billboard-in{min-height:70vh}` segurava a
   altura por dentro; no celular, onde a altura vem de `height:33rem`, os quatro
   projetos sumiam. */
.billboard{display:block}

/* ============ GALERIAS EMPILHADAS NO CELULAR ============ */
/* Pedido do Vini: um bloco embaixo do outro, nao carrossel lateral. */
@media(max-width:960px){
  .news-grid{display:flex;flex-direction:column;overflow-x:visible;
    scroll-snap-type:none;gap:2.5rem}
  .news-grid .news-item{width:auto;flex:initial;scroll-snap-align:none}
}

/* Galeria cortada em 6: a classe so entra pelo JS, entao sem script aparece tudo. */
.news-grid.cortada > .news-item:nth-child(n+7){display:none}
.galeria-mais{display:flex;justify-content:center;margin-top:3rem}
@media(max-width:960px){
  .galeria-mais{margin-top:2rem}
  .galeria-mais .btn{width:100%;justify-content:space-between}
}

/* No menu lateral, "Trabalhe conosco" e "Contato" sao itens de primeiro nivel,
   como no desktop: nao pertencem ao grupo "Empresa" logo acima. */
.drawer nav a.sub.topo:first-of-type{margin-top:1.25rem}
@media(max-width:960px){
  /* borda sozinha não separa: toda linha do menu já tem uma. O que marca a
     quebra de grupo é o respiro. */
  .drawer nav a.sub.topo:first-of-type{margin-top:1.5rem}
}

/* Empilhados no celular, os cards de solução ficavam com 8px entre o CTA de um e
   a foto do outro: o `gap:.5rem` foi pensado para o layout lado a lado do desktop. */
@media(max-width:960px){
  .produtos-list{gap:3rem}
}

/* O idioma no rodapé virou link (antes era um <span>PT</span> morto, que aparecia
   "PT" inclusive em /en). */
.footer-meta a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--bk20)}
.footer-meta a:hover{text-decoration-color:var(--gold)}

/* Alvo de toque de 44px, sem mexer no desenho.
   O padding cria a area tocavel e a margem negativa devolve o espaco, entao
   nada se move na tela. So vale onde nao existe mouse ou a tela e estreita. */
@media (max-width:960px), (hover:none) {
  /* links do rodape: estao colados um no outro, entao aqui a coluna cresce mesmo */
  .fcol a { padding:.8rem 0 }

  /* a tarja tem 18px de folga ate a barra de menu: cresce a area de toque e
     devolve so parte do espaco, para sobrar distancia entre um alvo e outro */
  .announce a { display:inline-block; padding:.9rem 0; margin:-.5rem 0 }

  /* estes dois tem folga de sobra: area cresce e o layout nao se move */
  .footer-meta a { display:inline-block; padding:.9rem 0; margin:-.9rem 0 }
  .drawer-close { padding:.4rem .8rem; margin:-.4rem -.8rem }

  /* WhatsApp, e-mail e LinkedIn da pagina Contato: linhas de lista, entao
     crescem como as do rodape, ocupando a folga que ja existia entre elas */
  .contato-grid .meta a { display:block; padding:.8rem 0 }
}