:root{
  --carbon:#0B0B0C; --graphite:#151517; --graphite-2:#1b1b1e;
  --steel:rgba(255,255,255,.08); --steel-strong:rgba(255,255,255,.14);
  --orange:#E8571E; --ember:#B23D12; --orange-soft:rgba(232,87,30,.14);
  --silver:#D6D8DC; --bone:#F4F4F5; --ash:#8A8B90;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --maxw:1400px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--carbon); color:var(--bone); font-family:'Saira',system-ui,sans-serif; font-weight:400; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66z' fill='none' stroke='%23ffffff' stroke-opacity='0.02' stroke-width='1'/%3E%3Cpath d='M28 100L0 84V50l28-16 28 16v34l-28 16z' fill='none' stroke='%23ffffff' stroke-opacity='0.02' stroke-width='1'/%3E%3C/svg%3E")}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,4vw,3rem); position:relative; z-index:1}
h1,h2,h3,.disp{font-family:'Saira Condensed',sans-serif; text-transform:uppercase; letter-spacing:-.01em; line-height:.95}
.mono{font-family:'JetBrains Mono',monospace}
a{color:inherit; text-decoration:none}
section{position:relative; z-index:1}
main{position:relative; z-index:1}

/* WORDMARK */
.brand{display:flex; flex-direction:column; line-height:1}
.brand .row{display:flex; gap:.4ch; font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:1.45rem; letter-spacing:.02em}
.brand .auto{color:var(--orange)}
.brand .carv{background:linear-gradient(180deg,#ECEDEF 0%,#A6A9AE 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand .sub{font-family:'Saira Condensed',sans-serif; font-weight:600; font-size:.56rem; letter-spacing:.42em; color:var(--ash); margin-top:2px; padding-left:2px}

/* NAV */
header.site{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s ease, border-color .3s ease; border-bottom:1px solid transparent}
header.site.scrolled{background:rgba(11,11,12,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--steel)}
.nav{display:flex; align-items:center; justify-content:space-between; height:74px}
.nav-links{display:flex; gap:2.2rem; font-weight:500; font-size:.95rem; color:var(--ash)}
.nav-links a{position:relative; transition:color .2s ease}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--orange); transition:width .25s var(--ease-out)}
.nav-links a:hover{color:var(--bone)} .nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--bone)} .nav-links a.active::after{width:100%}
.nav-right{display:flex; align-items:center; gap:1rem}

/* language switcher */
.lang{position:relative}
.lang-btn{display:flex; align-items:center; gap:.5ch; background:var(--graphite); border:1px solid var(--steel); color:var(--bone); padding:.5rem .7rem; border-radius:4px; cursor:pointer; font-family:'Saira',sans-serif; font-weight:600; font-size:.82rem; transition:border-color .2s ease}
.lang-btn:hover{border-color:var(--steel-strong)}
.lang-btn .flag{width:20px; height:14px; object-fit:cover; border-radius:2px; display:block}
.lang-btn .chev{transition:transform .2s ease; color:var(--ash)}
.lang.open .chev{transform:rotate(180deg)}
.lang-menu{position:absolute; top:calc(100% + 8px); right:0; background:var(--graphite); border:1px solid var(--steel); border-radius:6px; padding:.35rem; min-width:170px; display:grid; gap:2px; opacity:0; transform:scale(.96) translateY(-4px); transform-origin:top right; pointer-events:none; transition:opacity .18s var(--ease-out), transform .18s var(--ease-out); box-shadow:0 20px 40px rgba(0,0,0,.5); z-index:60}
.lang.open .lang-menu{opacity:1; transform:scale(1) translateY(0); pointer-events:auto}
.lang-menu button{display:flex; align-items:center; gap:.7ch; width:100%; background:none; border:none; color:var(--ash); padding:.5rem .6rem; border-radius:4px; cursor:pointer; font-family:'Saira',sans-serif; font-size:.9rem; text-align:left; transition:background .15s ease, color .15s ease}
.lang-menu button .flag{width:22px; height:15px; object-fit:cover; border-radius:2px; flex:none}
.lang-menu button:hover{background:var(--graphite-2); color:var(--bone)}
.lang-menu button.active{color:var(--orange)}

/* BUTTONS */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6ch; font-family:'Saira Condensed',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:1.02rem; padding:.85rem 1.7rem; cursor:pointer; border:1px solid transparent; transition:transform .16s var(--ease-out), background .2s ease, border-color .2s ease, color .2s ease; will-change:transform}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--orange); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{background:#f4652d}
.btn-clip{clip-path:polygon(0 0,100% 0,100% 100%,14px 100%)}
.btn-ghost{background:transparent; border-color:var(--steel-strong); color:var(--bone)}
.btn-ghost:hover{border-color:var(--orange); color:var(--orange)}
.btn-sm{padding:.55rem 1.05rem; font-size:.92rem}

/* HERO (home) */
.hero{min-height:100dvh; display:grid; grid-template-columns:1fr; align-items:center; padding-top:74px; position:relative}
.hero-grid{display:grid; grid-template-columns:47% 53%; align-items:center; gap:0; min-height:calc(100dvh - 74px)}
.hero-left{padding:clamp(2rem,5vw,4rem) 3rem clamp(2rem,5vw,4rem) 0; position:relative; z-index:20}
.eyebrow{display:inline-flex; align-items:center; gap:.7ch; font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--orange); margin-bottom:1.4rem}
.eyebrow .bar{width:26px; height:2px; background:var(--orange)}
.hero h1{font-size:clamp(2.3rem,5vw,5rem); font-weight:800; margin-bottom:1.4rem; hyphens:none}
.hero h1 .ln{display:block}
.hero h1 .ln > span{display:inline-block}
.hero h1 .accent{color:var(--orange)}
.hero-sub{font-size:clamp(1rem,1.4vw,1.18rem); color:var(--ash); max-width:46ch; margin-bottom:2.2rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:1rem; align-items:center}
.hero-phone{display:inline-flex; align-items:center; gap:.7ch; margin-top:1.9rem; font-family:'JetBrains Mono',monospace; font-weight:600; font-size:1.05rem; color:var(--bone)}
.hero-phone svg{color:#25D366}
.hero-phone .lbl{font-family:'Saira',sans-serif; font-weight:400; font-size:.8rem; color:var(--ash); text-transform:uppercase; letter-spacing:.12em; display:block}
.hero-right{position:relative; align-self:stretch; min-height:calc(100dvh - 74px); display:flex; align-items:center; overflow:hidden}
.slash{position:absolute; top:0; bottom:0; left:-4%; width:42%; background:var(--orange); transform:skewX(-12deg); z-index:5; box-shadow:0 0 80px rgba(232,87,30,.35)}
.slash::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(11,11,12,.25))}
.car-panel{position:relative; z-index:10; width:100%; height:78%; margin-left:6%; border-left:1px solid var(--steel); overflow:hidden}
.car-panel img{width:100%; height:100%; object-fit:cover; object-position:center}
.headlights{position:absolute; z-index:11; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 30% 46%, rgba(255,150,60,.55), transparent 9%),radial-gradient(circle at 44% 45%, rgba(255,170,80,.42), transparent 8%); mix-blend-mode:screen}
.car-fade-l{position:absolute; z-index:12; top:0; bottom:0; left:0; width:22%; background:linear-gradient(90deg,var(--carbon),transparent); pointer-events:none}

/* hero entrance */
.hero h1 .ln > span{transform:translateY(26px); opacity:0}
.car-panel{transform:translateX(60px); opacity:0}
.slash{transform:skewX(-12deg) translateX(50px); opacity:0}
.js-ready .hero h1 .ln > span{animation:wordUp .7s var(--ease-out) forwards}
.js-ready .hero h1 .ln:nth-child(1) > span{animation-delay:.15s}
.js-ready .hero h1 .ln:nth-child(2) > span{animation-delay:.3s}
.js-ready .car-panel{animation:carIn .8s var(--ease-out) .1s forwards}
.js-ready .slash{animation:slashIn .7s var(--ease-out) forwards}
.js-ready .headlights{animation:ignite 1.1s ease .85s forwards}
@keyframes wordUp{to{transform:translateY(0);opacity:1}}
@keyframes carIn{to{transform:translateX(0);opacity:1}}
@keyframes slashIn{to{transform:skewX(-12deg) translateX(0);opacity:1}}
@keyframes ignite{0%{opacity:0}60%{opacity:1}100%{opacity:.82}}

/* PAGE BANNER (interior pages) */
.pbanner{position:relative; padding:calc(74px + clamp(3rem,7vw,6rem)) 0 clamp(2.5rem,5vw,4rem); overflow:hidden; border-bottom:1px solid var(--steel)}
.pbanner::before{content:""; position:absolute; top:0; right:-6%; width:38%; height:100%; background:var(--orange); transform:skewX(-12deg); opacity:.14; z-index:0}
.pbanner::after{content:""; position:absolute; top:0; right:12%; width:2px; height:100%; background:var(--orange); transform:skewX(-12deg); opacity:.5}
.pbanner .wrap{position:relative; z-index:2}
.pbanner h1{font-size:clamp(2.6rem,6vw,4.6rem); font-weight:800}
.pbanner h1 .accent{color:var(--orange)}
.pbanner .lead{color:var(--ash); max-width:52ch; margin-top:1rem; font-size:1.05rem}
.breadcrumb{display:flex; gap:.6ch; align-items:center; font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash); margin-bottom:1.2rem}
.breadcrumb a:hover{color:var(--orange)} .breadcrumb .sep{color:var(--orange)}

/* reveal */
.reveal{opacity:1; transform:none; transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.js-ready .reveal{opacity:0; transform:translateY(22px)}
.js-ready .reveal.in{opacity:1; transform:translateY(0)}

/* TRUST */
.trust{border-top:1px solid var(--steel); border-bottom:1px solid var(--steel); background:rgba(21,21,23,.5)}
.trust .wrap{display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:center; padding:1.15rem 0}
.trust .item{display:flex; align-items:center; gap:.8ch; font-family:'Saira Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:1.02rem; color:var(--silver)}
.trust .item svg{color:var(--orange); flex:none}

/* SECTION */
.sec{padding:clamp(4rem,9vw,8rem) 0}
.sec.tight{padding:clamp(3rem,6vw,5rem) 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:3rem; flex-wrap:wrap}
.kicker{font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--orange); display:flex; align-items:center; gap:.7ch; margin-bottom:.9rem}
.kicker .bar{width:26px; height:2px; background:var(--orange)}
.sec-head h2{font-size:clamp(2.2rem,4.5vw,3.6rem); font-weight:800}
.sec-head .lead{max-width:38ch; color:var(--ash); font-size:1.02rem}

/* SERVICES BENTO */
.bento{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.tile{position:relative; background:var(--graphite); border:1px solid var(--steel); padding:1.8rem; overflow:hidden; transition:transform .3s var(--ease-out), border-color .3s ease, background .3s ease; will-change:transform}
.tile::before{content:""; position:absolute; top:0; left:0; width:34px; height:34px; background:var(--orange); clip-path:polygon(0 0,100% 0,0 100%); opacity:.9; transition:width .3s var(--ease-out), height .3s var(--ease-out)}
.tile:hover{transform:translateY(-6px); border-color:rgba(232,87,30,.55); background:var(--graphite-2)}
.tile:hover::before{width:44px; height:44px}
.tile .ico{width:42px; height:42px; color:var(--orange); margin-bottom:1.1rem; position:relative}
.tile h3{font-size:1.42rem; font-weight:700; color:var(--bone); margin-bottom:.5rem}
.tile p{font-size:.92rem; color:var(--ash); line-height:1.5}
.tile.big{grid-column:span 2}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)} .tile.big{grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr} .tile.big{grid-column:span 1}}

/* SERVICE DETAIL ROWS (servicos page) */
.srow{display:grid; grid-template-columns:64px 1fr; gap:1.5rem; background:var(--graphite); border:1px solid var(--steel); border-left:3px solid var(--orange); padding:1.8rem 2rem; transition:transform .3s var(--ease-out), border-color .3s ease}
.srow:hover{transform:translateX(6px); border-color:rgba(232,87,30,.5); border-left-color:var(--orange)}
.srow .ico{width:48px; height:48px; color:var(--orange)}
.srow h3{font-size:1.5rem; font-weight:700; margin-bottom:.5rem}
.srow p{color:var(--ash); max-width:70ch}
.srow ul{margin-top:.7rem; display:flex; flex-wrap:wrap; gap:.5rem}
.srow ul li{list-style:none; font-size:.82rem; color:var(--silver); border:1px solid var(--steel); padding:.25rem .7rem; border-radius:3px; background:var(--carbon)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:820px){.grid2{grid-template-columns:1fr} .srow{grid-template-columns:1fr} .srow .ico{width:44px;height:44px}}

/* SOBRE */
.sobre{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.sobre .txt h2{font-size:clamp(2rem,4vw,3.2rem); font-weight:800; margin-bottom:1.4rem}
.sobre .txt h2 .accent{color:var(--orange)}
.sobre .txt p{color:var(--ash); margin-bottom:1.1rem; max-width:52ch}
.badges{display:grid; gap:12px}
.badge{display:flex; align-items:center; gap:1ch; background:var(--graphite); border:1px solid var(--steel); border-left:3px solid var(--orange); padding:1.05rem 1.3rem; font-weight:500}
.badge svg{color:var(--orange); flex:none}
@media(max-width:820px){.sobre{grid-template-columns:1fr}}

/* VALUES cards */
.vals{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.val{background:var(--graphite); border:1px solid var(--steel); padding:2rem; text-align:left}
.val .ico{width:40px; height:40px; color:var(--orange); margin-bottom:1rem}
.val h3{font-size:1.4rem; margin-bottom:.5rem}
.val p{color:var(--ash); font-size:.92rem}
@media(max-width:760px){.vals{grid-template-columns:1fr}}

/* LOCATION */
.loc{display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(1.5rem,4vw,3rem)}
.map{position:relative; border:1px solid var(--steel); overflow:hidden; min-height:420px; background:var(--graphite)}
.map iframe{width:100%; height:100%; min-height:420px; border:0; filter:grayscale(.4) invert(.9) hue-rotate(180deg) contrast(.9)}
.contact-card{background:var(--graphite); border:1px solid var(--steel); padding:clamp(1.6rem,3vw,2.4rem); display:flex; flex-direction:column; gap:1.5rem; justify-content:center}
.contact-row{display:flex; gap:1ch; align-items:flex-start}
.contact-row svg{color:var(--orange); flex:none; margin-top:2px}
.contact-row .k{font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash); margin-bottom:.25rem}
.contact-row .v{font-size:1.05rem; color:var(--bone)}
.contact-row .v.mono{font-family:'JetBrains Mono',monospace; font-weight:600}
@media(max-width:820px){.loc{grid-template-columns:1fr}}

/* CTA band */
.ctaband{position:relative; overflow:hidden; background:var(--graphite); border:1px solid var(--steel); padding:clamp(2.5rem,5vw,4rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.ctaband::before{content:""; position:absolute; top:0; right:-4%; width:30%; height:100%; background:var(--orange); transform:skewX(-12deg); opacity:.12}
.ctaband h2{font-size:clamp(1.8rem,3.6vw,2.8rem); font-weight:800; position:relative; z-index:2}
.ctaband p{color:var(--ash); margin-top:.5rem; position:relative; z-index:2}
.ctaband .btns{display:flex; gap:1rem; flex-wrap:wrap; position:relative; z-index:2}

/* FOOTER */
footer.site{border-top:1px solid var(--steel); background:rgba(21,21,23,.4); padding:clamp(3rem,6vw,5rem) 0 2rem; position:relative; z-index:1}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem}
.foot-grid p{color:var(--ash); font-size:.92rem; margin-top:1rem; max-width:34ch}
.foot-col h4{font-family:'Saira Condensed',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; color:var(--ash); margin-bottom:1rem}
.foot-col a,.foot-col .li{display:block; color:var(--silver); font-size:.95rem; padding:.28rem 0; transition:color .2s ease}
.foot-col a:hover{color:var(--orange)}
.foot-bottom{border-top:1px solid var(--steel); padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:var(--ash); font-size:.82rem}
.foot-bottom .credit b{color:var(--silver); font-weight:600}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr} .foot-grid .foot-brand{grid-column:span 2}}

/* WHATSAPP FLOAT */
.wa-float{position:fixed; right:24px; bottom:24px; z-index:80; width:62px; height:62px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,.45); transition:transform .18s var(--ease-out)}
.wa-float:hover{transform:scale(1.07)} .wa-float:active{transform:scale(.95)}
.wa-float svg{width:34px; height:34px; color:#fff}
.wa-float::before{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:waPulse 2.6s var(--ease-out) infinite; animation-delay:1s}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.wa-tip{position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) scale(.9); transform-origin:right center; white-space:nowrap; background:var(--graphite); border:1px solid var(--steel); color:var(--bone); padding:.5rem .85rem; border-radius:6px; font-size:.85rem; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s var(--ease-out)}
.wa-float:hover .wa-tip{opacity:1; transform:translateY(-50%) scale(1)}

/* form */
.form{display:grid; gap:1.1rem}
.field label{display:block; font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash); margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%; background:var(--carbon); border:1px solid var(--steel); color:var(--bone); padding:.85rem 1rem; border-radius:4px; font-family:'Saira',sans-serif; font-size:1rem; transition:border-color .2s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--orange)}
.field textarea{min-height:120px; resize:vertical}
.form-2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media(max-width:600px){.form-2{grid-template-columns:1fr}}

/* MOBILE NAV */
.burger{display:none; background:none; border:1px solid var(--steel); color:var(--bone); width:44px; height:44px; border-radius:4px; cursor:pointer; align-items:center; justify-content:center}
@media(max-width:980px){
  .nav-links{display:none} .burger{display:flex}
  .hero-grid{grid-template-columns:1fr}
  .hero-left{padding:2rem 0 1rem}
  .hero-right{min-height:52vh; order:-1}
  .slash{width:36%; left:-8%}
  .car-panel{height:100%; margin-left:0}
  .mobile-open .nav-links{display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column; background:rgba(11,11,12,.97); backdrop-filter:blur(14px); padding:1.5rem; gap:1.2rem; border-bottom:1px solid var(--steel)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; animation-delay:0ms!important; transition-duration:.001ms!important}
  .hero h1 .ln > span,.car-panel,.slash{transform:none!important; opacity:1!important}
  .headlights{opacity:.82!important}
  .wa-float::before{display:none}
}