@font-face { font-family: "Tactic"; src: url("fonts/TacticRoundExd-Bld.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --preto: #0d0d0e; --preto-2: #161618; --preto-3: #1f1f22; --vermelho: #e31b23; --vermelho-2: #ff3b41;
  --branco: #f5f4f1; --papel: #f1efea; --cinza: #a3a3a6; --cinza-escuro: #5d5d63; --linha: rgb(255 255 255 / 12%); --linha-clara: rgb(13 13 14 / 12%);
  --display: "Tactic", "Arial Black", sans-serif; --texto: "Inter", system-ui, sans-serif;
  --borda: max(20px, calc((100% - 1280px) / 2));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--preto); color: var(--branco); font: 16px/1.6 var(--texto); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -.01em; }
h1 em, h2 em { color: var(--vermelho); font-style: normal; }
h2 { font-size: clamp(32px, 4vw, 56px); }
:focus-visible { outline: 2px solid var(--vermelho-2); outline-offset: 3px; }
.pular { position: absolute; top: -60px; left: 16px; z-index: 60; padding: 10px 14px; background: var(--vermelho); }
.pular:focus { top: 12px; }
.rotulo { margin: 0 0 16px; color: var(--cinza); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.botao { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 20px; border: 0; border-radius: 10px; background: var(--vermelho); color: #fff; cursor: pointer; font-weight: 700; font-size: 14px; transition: background .2s, transform .2s; }
.botao:hover { background: var(--vermelho-2); transform: translateY(-1px); }
.botao--grande { min-height: 56px; padding: 0 28px; font-size: 15px; }
.botao--linha { border: 1px solid rgb(255 255 255 / 40%); background: rgb(0 0 0 / 25%); backdrop-filter: blur(6px); }
.botao--linha:hover { border-color: #fff; background: rgb(255 255 255 / 10%); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.link { font-weight: 700; color: var(--vermelho-2); }
.cabeca { width: min(1280px, calc(100% - 40px)); margin: 0 auto 44px; display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 30px; }
.cabeca .rotulo { grid-column: 1 / -1; margin-bottom: -14px; }
.cabeca > p:not(.rotulo) { margin: 0; color: var(--cinza); font-size: 17px; }
.cabeca--linha { grid-template-columns: 1fr auto; }
.cabeca--linha .rotulo { margin-bottom: 16px; }

/* Topo */
.topo { position: fixed; top: 0; right: 0; left: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px var(--borda); transition: background .3s, padding .3s; }
.topo--solido { padding-block: 10px; background: rgb(13 13 14 / 92%); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { width: 46px; }
.marca span { display: grid; line-height: 1; }
.marca b { font-family: var(--display); font-size: 17px; letter-spacing: .06em; }
.marca i { margin-top: 4px; color: var(--cinza); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .5em; }
.nav { display: flex; gap: 28px; font-size: 14px; font-weight: 600; }
.nav a { color: rgb(245 244 241 / 82%); } .nav a:hover { color: #fff; }
.topo__acoes { display: flex; align-items: center; gap: 18px; }
.topo__tel { font-weight: 700; font-size: 14px; }

/* Hero */
.heroA { position: relative; display: grid; min-height: 100svh; align-items: end; padding: 130px var(--borda) 70px; overflow: hidden; isolation: isolate; }
.heroA__foto { position: absolute; inset: 0; z-index: -2; }
.heroA__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: lento 22s ease-in-out infinite alternate; }
@keyframes lento { to { transform: scale(1.07) translate(-1.5%, -1%); } }
.heroA__veu { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(13 13 14 / 92%) 0%, rgb(13 13 14 / 68%) 38%, rgb(13 13 14 / 10%) 72%), linear-gradient(0deg, rgb(13 13 14 / 85%), transparent 45%); }
.heroA__copy { max-width: 720px; }
.heroA h1 { font-size: clamp(42px, 5.4vw, 76px); }
.heroA__texto { max-width: 540px; margin: 22px 0 30px; color: rgb(245 244 241 / 85%); font-size: 18px; }
.google { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 10px 16px; border: 1px solid var(--linha); border-radius: 12px; background: rgb(13 13 14 / 55%); backdrop-filter: blur(8px); font-size: 14px; }
.google strong { font-size: 20px; }
.estrelas { color: #fbbc05; letter-spacing: .1em; }
.heroA__projeto { position: absolute; right: var(--borda); bottom: 70px; display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 14px; width: 330px; padding: 10px; border: 1px solid var(--linha); border-radius: 16px; background: rgb(13 13 14 / 70%); backdrop-filter: blur(10px); }
.heroA__projeto img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; }
.heroA__projeto span { display: block; color: var(--vermelho-2); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.heroA__projeto strong { display: block; font-size: 15px; } .heroA__projeto small { color: var(--cinza); }

/* Faixa de credenciais */
.faixa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 28px var(--borda); border-block: 1px solid var(--linha); background: var(--preto-2); }
.faixa p { display: grid; margin: 0; }
.faixa strong { font-family: var(--display); font-size: 15px; letter-spacing: .03em; }
.faixa span { color: var(--cinza); font-size: 13px; }

/* Serviços em abas */
.casa { padding: clamp(80px, 9vw, 130px) 0; background: var(--papel); color: var(--preto); }
.casa .rotulo { color: var(--cinza-escuro); }
.casa .cabeca > p:not(.rotulo) { color: var(--cinza-escuro); }
.servicos { width: min(1280px, calc(100% - 40px)); margin: 0 auto; display: grid; gap: 18px; }
.servicos__abas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.servicos__abas button { display: flex; align-items: center; gap: 12px; padding: 8px; border: 2px solid transparent; border-radius: 14px; background: #fff; cursor: pointer; font-family: var(--display); font-size: 15px; text-align: left; transition: border-color .2s, transform .2s; }
.servicos__abas button:hover { transform: translateY(-2px); }
.servicos__abas button[aria-selected="true"] { border-color: var(--vermelho); }
.servicos__abas img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }
.servico { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgb(13 13 14 / 10%); }
.servico__foto { min-height: 460px; }
.servico__foto img { width: 100%; height: 100%; object-fit: cover; }
.servico__texto { display: grid; align-content: center; gap: 4px; padding: clamp(26px, 4vw, 52px); }
.servico .rotulo { margin-bottom: 8px; color: var(--vermelho); }
.servico h3 { font-size: clamp(30px, 3vw, 42px); }
.servico p:not(.rotulo) { margin: 12px 0 16px; color: #3b3b40; font-size: 16px; }
.servico ul { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.servico li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--vermelho); }
.servico .botao { justify-self: start; }
.servico--troca { animation: entra .4s ease; }
@keyframes entra { from { opacity: .3; transform: translateY(8px); } }

/* Configurador do deck */
.design { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(20px, 3vw, 50px); padding: clamp(80px, 9vw, 130px) var(--borda); background: radial-gradient(ellipse at 70% 40%, #1d1f22, var(--preto) 65%); }
.design__texto { max-width: 480px; margin: 18px 0 24px; color: rgb(245 244 241 / 80%); font-size: 17px; }
.config { display: grid; gap: 16px; }
.config fieldset { margin: 0; padding: 0; border: 0; }
.config legend { margin-bottom: 8px; color: var(--cinza); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--preto-2); cursor: pointer; font-size: 14px; font-weight: 600; transition: border-color .2s, background .2s; }
.chips button:hover { border-color: rgb(255 255 255 / 35%); }
.chips button[aria-pressed="true"] { border-color: var(--vermelho); background: rgb(227 27 35 / 16%); }
.chips i { width: 16px; height: 16px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; background: var(--c); }
.config__fim { display: grid; gap: 12px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--linha); }
.config__fim p { margin: 0; font-weight: 700; }
.config__fim .botao { justify-self: start; }
.design__palco { position: relative; aspect-ratio: 1; max-height: 78vh; border: 1px solid var(--linha); border-radius: 22px; overflow: hidden; background: var(--preto-2); }
.design__foto { position: absolute; inset: 0; }
.design__foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s, filter .25s; }
.design__foto img.trocando { opacity: .25; filter: blur(4px); }
.design__nota { z-index: 2; }
.design__nota { position: absolute; left: 14px; bottom: 12px; margin: 0; padding: 6px 12px; border-radius: 99px; background: rgb(13 13 14 / 70%); color: rgb(245 244 241 / 80%); font-size: 12px; }

/* Antes e depois */
.antes { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(30px, 5vw, 80px); align-items: center; padding: clamp(80px, 9vw, 130px) var(--borda); background: var(--preto-2); }
.antes__copy p:not(.rotulo) { margin: 18px 0 24px; color: rgb(245 244 241 / 78%); }
.comparar { position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 1312 / 1199; }
.comparar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparar__antes { clip-path: inset(0 calc(100% - var(--corte)) 0 0); }
.comparar input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparar__alca { position: absolute; top: 50%; left: var(--corte); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--preto); font-weight: 700; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 6px 20px rgb(0 0 0 / 35%); }
.comparar__alca::before { content: ""; position: absolute; top: -2000px; bottom: -2000px; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); z-index: -1; }
.comparar__tag { position: absolute; top: 14px; padding: 4px 12px; border-radius: 99px; background: rgb(13 13 14 / 75%); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.comparar__tag--antes { left: 14px; } .comparar__tag--depois { right: 14px; background: var(--vermelho); }

/* Portfólio */
.obras { padding: clamp(80px, 9vw, 130px) 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros button { min-height: 40px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 99px; background: transparent; cursor: pointer; font-size: 14px; font-weight: 600; }
.filtros button[aria-pressed="true"] { border-color: var(--vermelho); background: var(--vermelho); }
.obras__grade { width: min(1280px, calc(100% - 40px)); margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 12px; }
.obras__grade li { position: relative; overflow: hidden; border-radius: 16px; background: var(--preto-2); }
.obras__grade li[hidden] { display: none; }
.obras__largo { grid-row: span 2; }
.obras__grade img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.obras__grade li:hover img { transform: scale(1.05); }
.obras__grade span { position: absolute; right: 0; bottom: 0; left: 0; padding: 30px 14px 12px; background: linear-gradient(0deg, rgb(13 13 14 / 85%), transparent); font-size: 14px; font-weight: 700; }

/* Processo */
.processo { padding: clamp(80px, 9vw, 130px) 0; background: var(--papel); color: var(--preto); }
.processo .rotulo, .processo .cabeca > p:not(.rotulo) { color: var(--cinza-escuro); }
.passos { width: min(1280px, calc(100% - 40px)); margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: p; }
.passos li { padding: 26px 22px; border-radius: 18px; background: #fff; border-top: 4px solid var(--vermelho); }
.passos b { color: var(--vermelho); font-family: var(--display); font-size: 22px; }
.passos h3 { margin: 10px 0 8px; font-size: 19px; }
.passos p { margin: 0; color: #3b3b40; font-size: 15px; }
.materiais { width: min(1280px, calc(100% - 40px)); margin: 30px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 24px; border-top: 1px solid var(--linha-clara); }
.materiais span { color: var(--cinza-escuro); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.materiais strong { font-family: var(--display); font-size: 18px; color: #26262a; }

/* Sobre */
.sobre { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); align-items: center; padding: clamp(80px, 9vw, 130px) var(--borda); }
.sobre__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; }
.sobre__copy p:not(.rotulo) { color: rgb(245 244 241 / 80%); font-size: 17px; }
.sobre__fatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.sobre__fatos li { padding: 16px; border: 1px solid var(--linha); border-radius: 14px; color: var(--cinza); font-size: 13px; }
.sobre__fatos strong { display: block; color: #fff; font-family: var(--display); font-size: 22px; }

/* Avaliações + mapa */
.avaliacoes { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 70px); align-items: center; padding: clamp(80px, 9vw, 130px) var(--borda); background: var(--preto-2); }
.estrelas--grande { margin: 10px 0; font-size: 34px; }
.avaliacoes__nota > p:not(.rotulo):not(.estrelas) { color: rgb(245 244 241 / 80%); margin: 0 0 24px; }
.avaliacoes__mapa { overflow: hidden; border: 1px solid var(--linha); border-radius: 22px; background: var(--preto-3); }
.avaliacoes__mapa iframe { display: block; width: 100%; height: 380px; border: 0; filter: grayscale(.4) contrast(1.05); }
.avaliacoes__mapa p { display: grid; margin: 0; padding: 16px 20px; }
.avaliacoes__mapa span { color: var(--cinza); font-size: 14px; }

/* Orçamento */
.orcamento { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); padding: clamp(80px, 9vw, 130px) var(--borda); background: linear-gradient(135deg, #1a0a0b, var(--preto) 55%); }
.orcamento__copy p:not(.rotulo) { color: rgb(245 244 241 / 80%); font-size: 17px; }
.orcamento__contato { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.orcamento__contato li { display: grid; padding-top: 14px; border-top: 1px solid var(--linha); font-weight: 600; }
.orcamento__contato span { color: var(--cinza); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.form { display: grid; gap: 16px; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--linha); border-radius: 22px; background: var(--preto-2); }
.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; color: var(--cinza); font-size: 13px; font-weight: 700; }
.form input, .form select, .form textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--preto); color: #fff; font-size: 15px; font-weight: 400; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--vermelho); border-color: transparent; }
.form__deck { margin: 0; padding: 12px 14px; border-left: 3px solid var(--vermelho); background: rgb(227 27 35 / 10%); font-weight: 700; }
.form .botao { justify-self: start; }
.form__nota { margin: 0; color: var(--cinza); font-size: 13px; }

/* Rodapé e barra fixa */
.rodape { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; padding: 40px var(--borda) 50px; border-top: 1px solid var(--linha); color: var(--cinza); font-size: 14px; }
.rodape__marca img { width: 54px; margin-bottom: 12px; }
.rodape p { margin: 0; }
.fixo { display: none; }

@media (max-width: 1080px) {
  .nav { display: none; }
  .servico, .design, .antes, .sobre, .avaliacoes, .orcamento { grid-template-columns: minmax(0, 1fr); }
  .servicos__abas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .servico__foto { min-height: 0; aspect-ratio: 4 / 3; }
  .design__palco { order: -1; max-height: none; }
  .obras__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos { grid-template-columns: 1fr 1fr; }
  .heroA__projeto { display: none; }
  .faixa { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { padding-bottom: 66px; }
  .topo__tel { display: none; }
  .topo .botao { min-height: 40px; padding: 0 14px; }
  .marca b { font-size: 15px; }
  .heroA { padding-bottom: 60px; }
  .heroA__texto { font-size: 16px; }
  .heroA__veu { background: linear-gradient(0deg, rgb(13 13 14 / 95%) 10%, rgb(13 13 14 / 55%) 60%, rgb(13 13 14 / 35%)); }
  .cabeca, .cabeca--linha { grid-template-columns: 1fr; }
  .faixa, .passos, .form__linha, .rodape { grid-template-columns: 1fr; }
  .obras__grade { grid-auto-rows: 180px; }
  .sobre__fatos { grid-template-columns: 1fr 1fr; }
  .sobre__fatos li:last-child { grid-column: 1 / -1; }
  .servicos__abas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicos__abas img { width: 40px; height: 40px; }
  .fixo { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1px; background: var(--linha); border-top: 1px solid var(--linha); }
  .fixo a { display: grid; place-items: center; min-height: 58px; background: var(--preto-2); font-weight: 700; }
  .fixo__orc { background: var(--vermelho) !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .heroA__foto img { animation: none; } }