/* Matos Tec · "Central de comando" · estilos compartilhados (sem dependências) */
@font-face{font-family:"Space Grotesk";src:url(fontes/SpaceGrotesk.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url(fontes/inter-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}

:root{
  --bg:#0E1116;--bg2:#12161C;--sup:#161B22;--linha:rgba(148,163,184,.16);--linha2:rgba(148,163,184,.28);
  --tx:#E8EDF2;--tx2:#9AA6B2;--ciano:#22D3EE;--ambar:#F5B301;--menta:#34D399;--ac:var(--ciano);
  --tit:"Space Grotesk",system-ui,sans-serif;--corpo:Inter,system-ui,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--r:14px;
  --pad:clamp(1.25rem,5vw,2rem);
}
.t-seg{--ac:var(--ciano)}.t-sol{--ac:var(--ambar)}.t-aut{--ac:var(--menta)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1rem;background:var(--bg);color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--tx);font:400 1.0625rem/1.6 var(--corpo);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--ac);color:var(--bg)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}
html{scrollbar-color:#2a323d var(--bg)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#2a323d;border-radius:8px;border:2px solid var(--bg)}
button,a,label,summary{touch-action:manipulation}
h1,h2,h3{font-family:var(--tit);font-weight:700;margin:0;text-wrap:balance}
p{margin:0}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--pad)}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico.star{fill:currentColor;stroke:none;color:var(--ambar)}
.pula{position:absolute;left:-999px;top:0;background:var(--ac);color:var(--bg);padding:.75rem 1rem;z-index:100;font-weight:600}
.pula:focus{left:0}

/* topo */
.topo{background:var(--bg);border-bottom:1px solid var(--linha);position:relative;z-index:5}
.topo-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem .75rem;padding-block:.5rem 0}
.marca{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font:700 1.35rem/1 var(--tit);letter-spacing:-.02em;min-height:44px}
.marca .ico{width:1.5rem;height:1.5rem;color:var(--ciano);stroke-width:2}
.topo-in>.btn{grid-column:2;grid-row:1}
.abas{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:auto auto auto;justify-content:space-between;gap:.25rem}
.abas a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:.4rem .25rem;white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--tx2);text-decoration:none;border-bottom:2px solid transparent;line-height:1.2}
.abas a[aria-current="page"]{color:var(--tx);border-bottom-color:var(--ac)}
.abas a:active{color:var(--tx)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.7rem 1.35rem;border-radius:10px;border:1px solid var(--ac);background:var(--ac);color:var(--bg);font:600 1rem/1.2 var(--corpo);text-decoration:none;cursor:pointer;transition:transform 160ms var(--ease),background-color 160ms,border-color 160ms,color 160ms}
.btn:active{transform:scale(.97)}
.btn--g{background:transparent;color:var(--tx);border-color:var(--linha2)}
.btn--peq{min-height:44px;padding:.5rem 1rem;font-size:.9375rem}
@media(hover:hover){
  .btn:hover{background:#fff;border-color:#fff;color:var(--bg)}
  .btn--g:hover{background:rgba(148,163,184,.12);border-color:var(--tx2);color:var(--tx)}
}
.acoes{display:flex;flex-direction:column;gap:.75rem}

/* capas */
.hero{position:relative;isolation:isolate;background:var(--bg)}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,17,22,.45) 0,rgba(14,17,22,.85) 45%,var(--bg))}
.hero-in{padding-block:clamp(1.75rem,6vw,3rem) clamp(2rem,7vw,4rem)}
.hero h1{font-size:clamp(2.2rem,8.4vw,4rem);line-height:1.04;letter-spacing:-.03em}
.hero .sub{margin-top:1rem;color:#C5CED8;max-width:54ch}
.hero .acoes{margin-top:1.5rem}
.nota{margin-top:1.1rem;display:flex;align-items:center;gap:.5rem;font-size:.9375rem;color:var(--tx2)}
.nota a{color:var(--tx);text-underline-offset:3px;text-decoration-color:var(--linha2);display:inline-flex;min-height:44px;align-items:center}
.nota .ico{width:1.1rem;height:1.1rem}

/* capa da inicial: letreiro + 3 painéis */
.hero--hub .hero-in{padding-block:clamp(1.5rem,5vw,2.5rem) clamp(1.75rem,5vw,2.5rem)}
.hero--hub{background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);background-size:44px 44px}
.hero--hub::before{background:linear-gradient(180deg,rgba(14,17,22,.78),rgba(14,17,22,.88) 55%,rgba(14,17,22,.96))}
.hero--hub .hero-bg img{opacity:.9}
.hero h1.letreiro{font-size:clamp(4rem,17.5vw,7.5rem);line-height:.9;letter-spacing:-.035em;font-weight:700}
.hero--hub .l2{margin-top:.9rem;font:600 1.125rem/1.2 var(--tit);letter-spacing:-.015em}
.hero--hub .l3{margin-top:.25rem;color:var(--tx2);font-size:1.0625rem}
.hero--hub .sub{margin-top:.9rem}
.hero--hub .acoes{margin-top:1.25rem}
.hero--hub .nota{margin-top:.2rem}
.paineis{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem}
.painel{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.8rem;min-height:68px;padding:.55rem .9rem;border-radius:var(--r);background:rgba(22,27,34,.94);border:1px solid var(--linha);text-decoration:none;color:var(--tx);transition:transform 160ms var(--ease),border-color 200ms}
.painel:active{transform:scale(.985)}
.painel .trilho{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none;overflow:visible}
.painel .trilho rect{width:100%;height:100%;rx:14px;fill:none;stroke:var(--ciano);stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:0;animation:traco 1000ms var(--ease) both;animation-delay:calc(120ms + var(--i)*170ms)}
.painel .pico{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:10px;border:1px solid var(--linha2);color:var(--ac);animation:acende 520ms var(--ease) both;animation-delay:calc(560ms + var(--i)*170ms)}
.painel .pico .ico{width:1.4rem;height:1.4rem}
.painel .tt{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.painel strong{display:block;font:600 1.0625rem/1.25 var(--tit)}
.painel small{display:block;margin-top:.15rem;color:var(--tx2);font-size:.875rem;line-height:1.35}
.painel .on{font:500 .6875rem/1 var(--mono);letter-spacing:.08em;color:var(--ac);display:inline-flex;align-items:center;gap:.4rem;animation:acende 400ms var(--ease) both;animation-delay:calc(760ms + var(--i)*170ms)}
.painel .on::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor}
.p-seg{--ac:var(--ciano)}.p-sol{--ac:var(--ambar)}.p-aut{--ac:var(--menta)}
@keyframes traco{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes acende{from{opacity:.18;color:#566170}to{opacity:1}}
@media(hover:hover){.painel:hover{border-color:var(--ac);transform:translateY(-2px)}}

/* seções */
.sec{padding-block:clamp(2.5rem,7vw,3.5rem)}
.sec--arg{padding-block:clamp(3.5rem,10vw,6rem)}
.sec.alt{background:var(--bg2)}
h2{font-size:clamp(1.75rem,5.2vw,2.75rem);line-height:1.08;letter-spacing:-.025em}
.lede{margin-top:1rem;color:#C5CED8;max-width:62ch}
.grid2{display:grid;gap:2rem}
.mid{align-items:center}
.foto{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--linha);background:var(--sup)}
.foto img{width:100%;height:auto}

/* linhas de serviço (lista com divisórias, não cartões) */
.itens{list-style:none;margin:1.75rem 0 0;padding:0;border-top:1px solid var(--linha)}
.itens li{padding:1.1rem 0;border-bottom:1px solid var(--linha);display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem}
.itens .ico{grid-row:1/3;color:var(--ac);margin-top:.15rem;width:1.5rem;height:1.5rem}
.itens h3{font-size:1.125rem;letter-spacing:-.01em}
.itens p{color:var(--tx2);font-size:1rem;max-width:56ch}

/* faixa de destaque (frase única) */
.faixa{padding-block:clamp(3.5rem,10vw,6rem);background:var(--sup);position:relative}
.faixa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background-image:linear-gradient(rgba(148,163,184,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.04) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.faixa .wrap{position:relative}
.faixa h2{max-width:22ch}
.faixa p{margin-top:1rem;color:#C5CED8;max-width:60ch;font-size:1.125rem}

/* passos */
.passos{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0;counter-reset:p}
.passos li{position:relative;padding:0 0 1.75rem 3.25rem;counter-increment:p}
.passos li:last-child{padding-bottom:0}
.passos li::before{content:counter(p);position:absolute;left:0;top:0;width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--ac);color:var(--ac);font:600 .9375rem/1 var(--mono)}
.passos li::after{content:"";position:absolute;left:1.125rem;top:2.25rem;bottom:0;width:1px;background:var(--linha2)}
.passos li:last-child::after{display:none}
.passos h3{font-size:1.125rem;line-height:1.35;font-family:var(--corpo);font-weight:600;letter-spacing:0}
.passos p{color:var(--tx2);margin-top:.2rem}

/* cidades */
.cidades{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.cidades li{padding:.5rem .9rem;border:1px solid var(--linha2);border-radius:999px;font-size:.9375rem;color:var(--tx)}
.cidades li:first-child{border-color:var(--ac);}
.regiao{margin-top:1rem;color:var(--tx2)}

/* orçamento e calculadora */
.orc-g{display:grid;gap:2rem}
.form{background:var(--sup);border:1px solid color-mix(in srgb,var(--ac) 50%,transparent);border-radius:var(--r);padding:1.25rem;display:grid;gap:1.4rem;box-shadow:0 12px 28px -12px rgba(0,0,0,.55)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;font:600 1rem/1.3 var(--corpo);margin-bottom:.7rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{position:relative;display:block}
.chips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;border-radius:10px;border:1px solid var(--linha2);background:transparent;color:var(--tx);font-size:.9375rem;transition:background-color 140ms,border-color 140ms,color 140ms,transform 140ms var(--ease)}
.chips input:active+span{transform:scale(.97)}
.chips input:checked+span{background:var(--ac);border-color:var(--ac);color:var(--bg);font-weight:600}
.chips input:focus-visible+span{outline:2px solid var(--ac);outline-offset:3px}
@media(hover:hover){.chips input:not(:checked):hover+span{border-color:var(--tx2);background:rgba(148,163,184,.1)}}
.dica{color:var(--tx2);font-size:.875rem;margin-top:-.7rem}
.res-box{border-top:1px solid var(--linha);padding-top:1.25rem;display:grid;gap:.9rem}
.rotulo{font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.resumo{color:var(--tx);min-height:1.6em}

.calc{background:var(--sup);border:1px solid color-mix(in srgb,var(--ac) 50%,transparent);border-radius:var(--r);padding:1.25rem;box-shadow:0 12px 28px -12px rgba(0,0,0,.6)}
.calc label.t{display:block;font:600 1.0625rem/1.3 var(--corpo);margin-bottom:.7rem}
.campo{display:flex;align-items:stretch;border:1px solid var(--linha2);border-radius:10px;background:var(--bg);overflow:hidden;transition:border-color 140ms}
.campo:focus-within{border-color:var(--ac);outline:2px solid var(--ac);outline-offset:2px}
.campo span{display:grid;place-items:center;padding-inline:1rem;color:var(--tx2);font:500 1rem var(--mono);border-right:1px solid var(--linha)}
.campo input{flex:1;min-width:0;background:transparent;border:0;color:var(--tx);font:500 1.25rem/1 var(--corpo);padding:.9rem 1rem;min-height:52px;outline:0}
.campo input::placeholder{color:#6B7683}
.erro{color:#FCA5A5;font-size:.9375rem;margin-top:.5rem}
.calc .btn{width:100%;margin-top:.9rem}
.res{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--linha);display:grid;gap:.9rem}
.res[hidden]{display:none}
.res.entra{animation:entra 380ms var(--ease) both}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.res-n{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.res-n div{border:1px solid var(--linha);border-radius:10px;padding:.7rem .85rem;background:var(--bg)}
.res-n strong{display:block;font:700 1.5rem/1.1 var(--tit);letter-spacing:-.02em}
.res-n span{display:block;margin-top:.2rem;font:500 .75rem/1.3 var(--mono);color:var(--tx2);letter-spacing:.03em}
.res-txt{color:var(--tx);font-size:1rem}
.res-nota{color:var(--tx2);font-size:.875rem}

/* faq */
.faq{margin-top:1.75rem;border-top:1px solid var(--linha);max-width:760px}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.9rem 0;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{color:var(--ac);transition:transform 220ms var(--ease)}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq details p{color:#C5CED8;padding:0 0 1.1rem;max-width:62ch}
@media(hover:hover){.faq summary:hover{color:#fff}}

/* chamada final */
.final{padding-block:clamp(3rem,9vw,5.5rem);background:var(--sup);background-image:linear-gradient(rgba(148,163,184,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.04) 1px,transparent 1px);background-size:44px 44px}
.final .l{margin-top:.9rem;color:#C5CED8;max-width:56ch}
.final .acoes{margin-top:1.5rem}
.cruz{margin-top:1.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.25rem;color:var(--tx2);font-size:.9375rem}
.link{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;color:var(--tx);text-decoration:none;border-bottom:1px solid var(--linha2)}
.link .ico{width:1rem;height:1rem;color:var(--ac)}
.saida3{display:grid;gap:.75rem;margin-top:1.5rem}
.saida3 .btn--g{justify-content:space-between}
.saida3 .btn--g .ico{color:var(--ac)}
.atende{margin-top:1.75rem;color:var(--tx2);font-size:.9375rem;max-width:62ch}

/* rodapé */
.rodape{background:var(--bg);border-top:1px solid var(--linha);padding-block:1.75rem;color:var(--tx2);font-size:.9375rem}
.rodape .wrap{display:flex;flex-direction:column;gap:.25rem}
.rodape a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}
.rodape strong{color:var(--tx)}
.rodape .nav{display:flex;flex-wrap:wrap;gap:0 1.25rem}

/* barra fixa (celular) */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:1.5fr 1fr;gap:.6rem;padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));background:rgba(14,17,22,.97);border-top:1px solid var(--linha2)}
.js .barra{transform:translateY(110%);transition:transform 260ms var(--ease);visibility:hidden}
.js .barra.on{transform:none;visibility:visible}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}

/* desktop */
@media(min-width:760px){
  body{padding-bottom:0}.barra{display:none}
  .acoes{flex-direction:row;flex-wrap:wrap}
  .topo-in{grid-template-columns:auto 1fr auto;padding-block:.5rem;gap:2rem}
  .topo-in>.btn{grid-column:3}
  .abas{grid-column:2;grid-row:1;display:flex;justify-content:center;gap:1.75rem}
  .abas a{font-size:.9375rem;padding-inline:.25rem}
  .grid2{grid-template-columns:1fr 1fr;gap:3.5rem}
  .grid2.inv .foto{order:-1}
  .orc-g{grid-template-columns:.8fr 1.2fr;gap:3.5rem;align-items:start}
  .hero--hub .l2{font-size:1.75rem}
  .paineis{grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
  .painel{grid-template-columns:1fr;align-content:space-between;gap:1rem;padding:1.15rem 1.25rem;min-height:150px}
  .painel .pico{width:3.5rem;height:3.5rem;border-radius:12px}
  .painel .pico .ico{width:1.75rem;height:1.75rem}
  .painel strong{font-size:1.25rem}
  .painel small{font-size:.9375rem}
  .hero-bg{inset:0}
  .hero::before{background:linear-gradient(90deg,rgba(14,17,22,.95) 0,rgba(14,17,22,.82) 42%,rgba(14,17,22,.35) 100%)}
  .hero--hub::before{background:linear-gradient(90deg,rgba(14,17,22,.93) 0,rgba(14,17,22,.78) 45%,rgba(14,17,22,.3) 100%),linear-gradient(180deg,transparent 55%,rgba(14,17,22,.9))}
  .hero-in{padding-block:clamp(3rem,6vw,5.5rem)}
  .hero--hub .hero-in{padding-block:1.75rem 1.5rem}
  .hero .sub{font-size:1.125rem}
  .hero--hub .sub{max-width:46ch}
  .hero-g{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
  .passos{grid-template-columns:repeat(var(--n,3),1fr);gap:1.75rem}
  .passos li{padding:3.5rem 0 0}
  .passos li::after{left:2.75rem;right:-1.75rem;top:1.125rem;bottom:auto;width:auto;height:1px}
  .itens li{padding-block:1.25rem}
  .saida3{grid-template-columns:repeat(3,1fr)}
  .rodape .wrap{flex-direction:row;flex-wrap:wrap;gap:.25rem 2rem;align-items:center}
}
@media(min-width:760px) and (max-height:820px){
  .hero--hub .hero-in{padding-block:1.25rem 1.25rem}
}

/* movimento reduzido: acendimento vira opacidade */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .painel .trilho rect{animation:fade 400ms ease both;animation-delay:calc(var(--i)*120ms);stroke-dashoffset:0}
  .painel .pico,.painel .on{animation:fade 400ms ease both;animation-delay:calc(var(--i)*120ms)}
  .res.entra{animation:none}
  .btn,.chips span,.painel,.faq summary .ico,.js .barra{transition:none}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}

/* o atributo hidden sempre vence o display dos componentes (resultado da calculadora) */
[hidden]{display:none!important}

.pagar{margin-top:1.5rem}
.pagar h3{font-size:1.125rem}
.pagar p{color:var(--tx2);margin-top:.2rem}
@media(min-width:760px){
  .itens--g{display:grid;grid-template-columns:repeat(var(--c),1fr);column-gap:2.5rem;border-top:0}
  .itens--g li{border-top:1px solid var(--linha);border-bottom:0;align-content:start;padding-block:1.25rem 1.5rem}
  .hero--sol .hero-g{grid-template-columns:minmax(0,34rem);gap:1.75rem}
  .hero--sol .calc{max-width:30rem}
  .hero--aut .hero-bg img{width:135%;max-width:none;margin-left:-35%}
}