/* GMBC – Planta de Situação. O site é o mapa do lote: fundo de cadastro, traço preto,
   lote em amarelo de zona, hachura vermelha só no que está irregular, azul no que passa. */
:root {
  --mapa: #e4ebe5;
  --mapa-2: #d6dfd8;
  --quadricula: #d3ddd5;
  --folha: #fbfcfa;
  --tinta: #15201c;
  --tinta-2: #34423b;
  --suave: #55635c;
  --traco-fino: #b7c3ba;
  --zona: #f2c230;
  --zona-clara: #f9e7a6;
  --irregular: #c8432c;
  --irregular-texto: #a3331e;
  --aprovado: #22607f;
  --aprovado-claro: #d3e5ee;
  --verde-wpp: #1f8f4e;
  --erro: #a3331e;
  --largura: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Archivo", "Arial Narrow", sans-serif;
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--tinta);
  background: var(--mapa);
  accent-color: var(--tinta);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scrollbar-color: var(--tinta-2) var(--mapa-2); }
body { margin: 0; line-height: 1.6; font-size: 17px; background: var(--mapa); font-variant-numeric: tabular-nums; }
::selection { background: var(--zona); color: var(--tinta); }
img { max-width: 100%; display: block; }
a { color: var(--aprovado); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--tinta); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--aprovado); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.04; margin: 0 0 0.45em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); font-weight: 800; font-stretch: 78%; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); font-weight: 800; font-stretch: 80%; letter-spacing: -0.015em; }
h3 { font-size: 1.3rem; font-weight: 700; font-stretch: 88%; line-height: 1.15; }
p { margin: 0 0 1em; }

.container { width: min(var(--largura), 100% - 32px); margin-inline: auto; }
.secao { padding: clamp(56px, 8vw, 104px) 0; }
.secao--areia { background: var(--folha); border-block: 2px solid var(--tinta); }
.secao--escura { background: var(--tinta); color: #e6ece7; }
.secao--escura a { color: var(--zona); }
.secao-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: 36px; }
.secao-cab p { margin: 0; color: var(--tinta-2); max-width: 52ch; }
@media (max-width: 860px) { .secao-cab { grid-template-columns: 1fr; } }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--tinta-2); max-width: 58ch; }
.muted { color: var(--suave); }
.pequeno { font-size: 0.9rem; }
.nota-legenda { font-size: 0.84rem; color: var(--suave); }

/* Cabeçalho: a margem superior da prancha */
.topo { background: var(--folha); border-bottom: 2px solid var(--tinta); position: sticky; top: 0; z-index: 20; }
.topo .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marca { text-decoration: none; color: var(--tinta); display: flex; align-items: center; gap: 12px; line-height: 1; }
.marca:hover { color: var(--tinta); }
.marca img { width: 58px; height: 58px; border-radius: 50%; }
.marca span { display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; font-weight: 700; }
.marca span small { font-size: 0.74rem; font-weight: 500; color: var(--suave); white-space: nowrap; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a { color: var(--tinta); text-decoration: none; font-size: 0.95rem; font-weight: 600; white-space: nowrap; padding: 8px 12px; border-bottom: 3px solid transparent; }
.menu a:hover { border-bottom-color: var(--traco-fino); }
.menu a[aria-current="page"] { border-bottom-color: var(--zona); }
.menu .botao { margin-left: 12px; border-bottom-width: 2px; padding: 11px 18px; }
.menu-botao { display: none; background: var(--folha); color: var(--tinta); border: 2px solid var(--tinta); padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 1080px) {
  .menu-botao { display: block; }
  .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--folha);
    flex-direction: column; align-items: stretch; gap: 0; border-bottom: 2px solid var(--tinta); padding: 8px 16px 18px;
  }
  .menu.aberto { display: flex; }
  .menu a { padding: 14px 4px; border-bottom: 1px solid var(--traco-fino); }
  .menu a[aria-current="page"] { border-bottom: 1px solid var(--traco-fino); background: var(--zona-clara); padding-left: 10px; }
  .menu .botao { margin: 14px 0 0; text-align: center; }
}
@media (max-width: 420px) { .marca span small { display: none; } }

/* Botões: peças quadradas de traço preto */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--tinta); color: var(--folha) !important; text-decoration: none;
  padding: 14px 22px; border: 2px solid var(--tinta); border-radius: 0;
  cursor: pointer; font: inherit; font-weight: 700; line-height: 1.2;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.botao:hover { background: var(--tinta-2); border-color: var(--tinta-2); }
.botao--cobre, .botao--acao { background: var(--zona); color: var(--tinta) !important; border-color: var(--tinta); }
.botao--cobre:hover, .botao--acao:hover { background: var(--tinta); color: var(--zona) !important; border-color: var(--tinta); }
.botao--contorno { background: transparent; color: var(--tinta) !important; }
.botao--contorno:hover { background: var(--folha); border-color: var(--tinta); }
.secao--escura .botao--contorno { color: var(--folha) !important; border-color: #8a978f; }
.secao--escura .botao--contorno:hover { background: var(--tinta-2); border-color: var(--folha); }
.botao:disabled { opacity: 0.55; cursor: progress; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Abertura das páginas internas: faixa de mapa quadriculado */
.abertura {
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 64px);
  background: var(--mapa);
  border-bottom: 2px solid var(--tinta);
}
.abertura .area { margin-top: 18px; font-size: 0.95rem; color: var(--suave); max-width: 62ch; }
.faixa-area {
  display: flex; gap: 14px; align-items: center; padding: 10px 16px 10px 0;
  background: var(--folha); border: 2px solid var(--tinta); font-size: 0.95rem;
  color: var(--tinta-2); margin: 24px 0 0; max-width: 72ch;
}
.faixa-area::before { content: attr(data-rotulo); flex: none; align-self: stretch; display: flex; align-items: center; margin: -10px 0; padding: 10px 14px; background: var(--tinta); color: var(--zona); font-weight: 700; font-size: 0.85rem; }

/* Planta de situação: o primeiro quadro da página inicial */
.planta-sec { padding: clamp(16px, 2.5vw, 32px) 0 0; }
.planta { border: 2px solid var(--tinta); background: var(--folha); }
.planta-mapa {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(520px, calc(100svh - 250px), 680px); background: var(--mapa); overflow: hidden;
}
.planta-desenho { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cartucho {
  position: relative; z-index: 2; grid-column: 1; align-self: start;
  margin: calc(64px + clamp(16px, 2.5vw, 32px)) clamp(16px, 3vw, 40px) clamp(16px, 3vw, 40px); padding: clamp(22px, 3vw, 36px);
  background: var(--folha); border: 2px solid var(--tinta); max-width: 580px;
}
.cartucho h1 { margin-bottom: 0.35em; }
.cartucho .lead { margin-bottom: 0; }
.planta-mapa::before { content: ""; position: absolute; inset: 0 0 auto; height: 64px; background: var(--folha); border-bottom: 2px solid var(--tinta); z-index: 1; }
.planta-mapa .planta-desenho { top: 64px; height: calc(100% - 64px); }
.camadas {
  position: relative; z-index: 2; grid-column: 2; justify-self: end; align-self: start;
  margin: 9px clamp(12px, 2vw, 24px) 0; display: flex; align-items: center;
}
.camadas-rotulo { font-size: 0.86rem; font-weight: 600; color: var(--suave); padding-right: 12px; white-space: nowrap; }
.camadas button {
  font: inherit; font-size: 0.95rem; font-weight: 700; padding: 10px 16px; border: 2px solid var(--tinta); border-right-width: 0;
  background: transparent; color: var(--tinta); cursor: pointer; display: flex; align-items: center; gap: 9px; white-space: nowrap; height: 44px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.camadas button:last-child { border-right-width: 2px; }
.camadas button::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--tinta); flex: none; }
.camadas button:hover { background: var(--mapa); }
.camadas button[aria-pressed="true"] { background: var(--tinta); color: var(--folha); }
.camadas button[aria-pressed="true"]::before { background: var(--zona); border-color: var(--zona); }

/* Selo: faixa de legenda na base da prancha */
.selo { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; border-top: 2px solid var(--tinta); }
.selo-titulo { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 18px; background: var(--tinta); color: var(--folha); font-family: var(--display); font-weight: 800; font-stretch: 85%; font-size: 1.1rem; line-height: 1.15; }
.selo-titulo span:last-child { color: var(--zona); font-family: "Archivo", sans-serif; font-size: 0.8rem; font-weight: 600; font-stretch: 100%; }
.selo dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.selo dl > div { padding: 12px 16px; border-right: 1px solid var(--traco-fino); }
.selo dt { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 0.82rem; font-weight: 600; margin: 0 0 3px; }
.selo dd { margin: 0; font-weight: 700; font-size: 0.97rem; line-height: 1.3; }
.selo .chave { width: 13px; height: 13px; }
.selo-link { align-self: stretch; display: flex; align-items: center; padding: 12px 18px; font-weight: 700; font-size: 0.92rem; text-decoration: none; color: var(--tinta); background: var(--zona-clara); }
.selo-link:hover { background: var(--zona); color: var(--tinta); }
.selo dl.entra > div { animation: linha-entra 0.55s var(--ease) both; }
.selo dl.entra > div:nth-child(2) { animation-delay: 0.05s; }
.selo dl.entra > div:nth-child(3) { animation-delay: 0.1s; }
.selo dl.entra > div:nth-child(4) { animation-delay: 0.15s; }
@keyframes linha-entra { from { opacity: 0; transform: translateY(6px); } }
.chave { display: inline-block; width: 14px; height: 14px; flex: none; border: 2px solid var(--tinta); background: var(--folha); }
.chave--zona { background: var(--zona-clara); }
.chave--irregular { background: repeating-linear-gradient(-45deg, var(--irregular) 0 2px, var(--folha) 2px 5px); border-color: var(--irregular); }
.chave--aprovado { background: var(--aprovado-claro); border-color: var(--aprovado); border-style: dashed; }
.chave--prazo { background: var(--tinta); }

/* Desenho do lote */
.d-rua { fill: var(--mapa-2); }
.d-rua-nome { font: 700 15px/1 var(--display); fill: var(--suave); letter-spacing: 0.08em; }
.d-vizinho { fill: none; stroke: var(--traco-fino); stroke-width: 1.5; }
.d-quadra { fill: none; stroke: var(--tinta-2); stroke-width: 2; }
.d-casa-viz { fill: var(--mapa-2); stroke: var(--traco-fino); stroke-width: 1.5; }
.d-lote { fill: var(--zona-clara); stroke: var(--tinta); stroke-width: 5; }
.d-cota { stroke: var(--tinta); stroke-width: 1.5; fill: none; }
.d-cota-texto { font: 700 17px/1 var(--display); fill: var(--tinta); }
.d-rotulo { font: 700 16px/1 var(--display); fill: var(--tinta); }
.d-rotulo--irregular { fill: var(--irregular-texto); }
.d-rotulo--aprovado { fill: var(--aprovado); }
.d-casa { fill: var(--folha); stroke: var(--tinta); stroke-width: 3.5; }
.d-irregular { fill: url(#hachura); stroke: var(--irregular); stroke-width: 3.5; }
.d-envelope { fill: var(--aprovado-claro); fill-opacity: 0.55; stroke: var(--aprovado); stroke-width: 2.5; stroke-dasharray: 10 7; }
.d-nova { fill: var(--folha); stroke: var(--aprovado); stroke-width: 3.5; }
.d-norte { fill: var(--tinta); }
.d-escala rect { stroke: var(--tinta); stroke-width: 1.5; }
.d-limite { fill: none; stroke: var(--tinta-2); stroke-width: 2; stroke-dasharray: 8 6; }
.camada { transition: opacity 0.35s var(--ease); }
.camada[data-oculta] { opacity: 0; visibility: hidden; }
.camada.desenha .tr { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traca 0.9s var(--ease) forwards; }
.camada.desenha .pr { opacity: 0; animation: aparece 0.5s var(--ease) 0.35s forwards; }
@keyframes traca { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 1; } }

@media (max-width: 1100px) {
  .camadas-rotulo { display: none; }
  .camadas button { padding: 10px 12px; font-size: 0.9rem; }
  .selo { grid-template-columns: 1fr; }
  .selo dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selo dl > div { border-bottom: 1px solid var(--traco-fino); }
  .selo-link { justify-content: center; }
}
@media (max-width: 900px) {
  .planta-mapa { display: flex; flex-direction: column; min-height: 0; }
  .planta-mapa::before { display: none; }
  .planta-mapa .planta-desenho { position: relative; inset: auto; top: auto; height: auto; aspect-ratio: 10 / 9; order: 3; }
  .cartucho { order: 1; margin: 0; border: 0; border-bottom: 2px solid var(--tinta); max-width: none; }
  .camadas { order: 2; margin: 0; border-bottom: 2px solid var(--tinta); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .camadas-rotulo { display: none; }
  .camadas button { justify-content: center; padding: 13px 6px; font-size: 0.88rem; gap: 6px; border-width: 0 1px 0 0; white-space: normal; height: auto; }
  .camadas button:last-child { border-right-width: 0; }
  .camadas button::before { width: 10px; height: 10px; }
  .d-rotulo, .d-cota-texto { font-size: 21px; }
  .d-rua-nome { font-size: 20px; }
}
@media (max-width: 480px) { .selo dl { grid-template-columns: 1fr; } }

/* Credenciais: carimbo de responsabilidade técnica */
.credenciais { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--tinta); border-top: 0; background: var(--folha); }
.credenciais div { padding: 18px 20px; border-right: 1px solid var(--traco-fino); }
.credenciais div:last-child { border-right: 0; }
.credenciais strong { display: block; font-family: var(--display); font-size: 1.45rem; font-weight: 800; font-stretch: 80%; line-height: 1.1; color: var(--tinta); }
.credenciais span { font-size: 0.88rem; color: var(--suave); }
@media (max-width: 760px) {
  .credenciais { grid-template-columns: 1fr 1fr; }
  .credenciais div:nth-child(2) { border-right: 0; }
  .credenciais div:nth-child(-n + 2) { border-bottom: 1px solid var(--traco-fino); }
}

/* Quadro de serviços: tabela de legenda, não grade de cartões */
.quadro { border-top: 2px solid var(--tinta); }
.quadro-linha {
  display: grid; grid-template-columns: 30px minmax(0, 14rem) minmax(0, 1fr) 12rem 10.5rem; gap: 8px 28px;
  align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--tinta); text-decoration: none; color: var(--tinta);
  transition: background-color 0.2s var(--ease), padding 0.3s var(--ease);
}
.quadro-linha:hover { color: var(--tinta); background: var(--folha); padding-inline: 14px; }
.quadro-linha .chave { width: 22px; height: 22px; border: 2px solid var(--tinta); align-self: start; margin-top: 4px; }
.quadro-linha h3 { margin: 0; font-size: 1.45rem; }
.quadro-linha p { margin: 0; color: var(--tinta-2); font-size: 0.98rem; }
.quadro-linha .prazo { font-weight: 700; font-size: 0.95rem; }
.quadro-linha .prazo small { display: block; font-weight: 500; color: var(--suave); font-size: 0.8rem; }
.quadro-linha .ir { font-weight: 700; white-space: nowrap; color: var(--aprovado); justify-self: end; }
.quadro-linha:hover .ir { color: var(--tinta); }
@media (max-width: 860px) {
  .quadro-linha { grid-template-columns: 30px minmax(0, 1fr); gap: 6px 14px; }
  .quadro-linha > :nth-child(n + 3) { grid-column: 2; }
  .quadro-linha .ir { justify-self: start; }
}

/* Grades e cartões (contato, avaliações) */
.grade { display: grid; gap: 20px; }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grade--4, .grade--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grade--4, .grade--3, .grade--2 { grid-template-columns: 1fr; } }

.cartao { background: var(--folha); border: 2px solid var(--tinta); padding: 26px; display: flex; flex-direction: column; }
.cartao h2, .cartao h3 { font-size: 1.3rem; font-stretch: 88%; margin-bottom: 8px; }
.cartao p { color: var(--tinta-2); font-size: 0.97rem; }
.cartao .mais { margin-top: auto; font-weight: 700; text-decoration: none; }

/* Rota do orçamento: quatro paradas numa linha tracejada */
.rota { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.rota::before { content: ""; position: absolute; top: 23px; left: 24px; right: 24px; border-top: 2px dashed #6f7d75; }
.rota li { position: relative; }
.rota .parada {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px;
  background: var(--zona); color: var(--tinta); border: 2px solid var(--folha);
  font-family: var(--display); font-weight: 900; font-size: 1.4rem; font-stretch: 80%;
}
.rota h3 { color: var(--folha); margin-bottom: 6px; }
.rota p { color: #c3cec7; margin: 0; font-size: 0.97rem; }
@media (max-width: 860px) {
  .rota { grid-template-columns: 1fr; gap: 22px; }
  .rota::before { top: 24px; bottom: 24px; left: 23px; right: auto; border-top: 0; border-left: 2px dashed #6f7d75; }
  .rota li { display: grid; grid-template-columns: 48px 1fr; gap: 0 18px; }
  .rota .parada { grid-row: 1 / 3; margin: 0; }
}

/* Serviços */
.servico { padding: clamp(48px, 6vw, 72px) 0; border-bottom: 2px solid var(--tinta); scroll-margin-top: 90px; }
.servico:last-child { border-bottom: 0; }
.servico-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 48px; }
.servico-cab .muted { font-weight: 600; }
@media (max-width: 860px) { .servico-cab { grid-template-columns: 1fr; gap: 12px; } }
.etapas { list-style: none; padding: 0; margin: 0; counter-reset: etapa; position: relative; }
.etapas::before { content: ""; position: absolute; left: 15px; top: 22px; bottom: 22px; border-left: 2px dashed var(--traco-fino); }
.etapas li { counter-increment: etapa; display: grid; grid-template-columns: 32px 1fr auto; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--traco-fino); align-items: baseline; position: relative; }
.etapas li::before {
  content: counter(etapa); width: 32px; height: 32px; background: var(--folha); color: var(--tinta); border: 2px solid var(--tinta);
  font-weight: 800; font-size: 0.9rem; display: grid; place-items: center; align-self: start; position: relative;
}
.etapas .prazo { font-size: 0.88rem; font-weight: 700; color: var(--tinta); white-space: nowrap; text-align: right; padding: 2px 8px; background: var(--folha); border: 1px solid var(--traco-fino); }
.etapas small { display: block; color: var(--suave); font-size: 0.88rem; }
@media (max-width: 560px) { .etapas li { grid-template-columns: 32px 1fr; } .etapas .prazo { grid-column: 2; justify-self: start; } }
.inclui { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
@media (max-width: 640px) { .inclui { grid-template-columns: 1fr; } }
.inclui > div { background: var(--folha); border: 2px solid var(--tinta); }
.inclui h3 { margin: 0; padding: 9px 16px; font-family: inherit; font-size: 0.9rem; font-weight: 800; border-bottom: 2px solid var(--tinta); }
.inclui ul { margin: 0; padding: 14px 18px 16px 36px; font-size: 0.95rem; color: var(--tinta-2); }
.inclui li { margin-bottom: 4px; }
.inclui .sim h3 { background: var(--aprovado-claro); color: var(--tinta); }
.inclui .nao h3 { background: #f6ddd6; color: var(--irregular-texto); }
.indice { display: flex; flex-wrap: wrap; gap: 0; margin-top: 28px; border: 2px solid var(--tinta); width: fit-content; max-width: 100%; background: var(--folha); }
.indice a { padding: 10px 16px; text-decoration: none; color: var(--tinta); font-size: 0.92rem; font-weight: 700; border-right: 1px solid var(--tinta); }
.indice a:last-child { border-right: 0; }
.indice a:hover { background: var(--tinta); color: var(--folha); }
@media (max-width: 640px) { .indice { width: 100%; } .indice a { flex: 1 1 50%; border-bottom: 1px solid var(--tinta); } }

/* Portfólio */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.filtros button { border: 2px solid var(--tinta); background: var(--folha); color: var(--tinta); padding: 8px 14px; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.filtros button:hover { background: var(--mapa); }
.filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--folha); }
.filtros .sep { width: 2px; background: var(--tinta); margin: 0 8px; }
.caso { background: var(--folha); border: 2px solid var(--tinta); overflow: hidden; display: flex; flex-direction: column; }
.caso .imagem {
  aspect-ratio: 4 / 3; background-color: var(--mapa); background-position: center; background-size: cover; background-repeat: no-repeat;
  display: grid; place-items: center; color: var(--suave); font-size: 0.88rem; font-weight: 600; border-bottom: 2px solid var(--tinta);
}
.caso .imagem:not([style]) { outline: 1px dashed var(--traco-fino); outline-offset: -12px; }
.caso .corpo { padding: 20px 22px 24px; }
.caso .etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.etiqueta { font-size: 0.78rem; font-weight: 700; background: var(--zona-clara); border: 1px solid var(--tinta); padding: 2px 8px; color: var(--tinta); }
.etiqueta--ok { background: var(--aprovado-claro); border-color: var(--aprovado); color: var(--aprovado); }
.ficha { display: grid; grid-template-columns: auto 1fr; font-size: 0.9rem; margin: 12px 0 16px; border-top: 1px solid var(--traco-fino); }
.ficha dt, .ficha dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--traco-fino); }
.ficha dt { color: var(--suave); padding-right: 14px; }
.aviso-rascunho { background: var(--zona-clara); border: 1px solid var(--tinta); padding: 12px 16px; font-size: 0.92rem; margin-bottom: 16px; }
.vazio { padding: 40px; border: 2px dashed var(--tinta-2); text-align: center; color: var(--suave); background: var(--folha); }

/* Avaliações */
.avaliacao { background: var(--folha); border: 2px solid var(--tinta); padding: 22px; }
.estrelas { font-weight: 700; color: var(--tinta); }

/* FAQ */
.faq { max-width: 880px; border-top: 2px solid var(--tinta); }
.faq details { border-bottom: 1px solid var(--tinta); }
.faq summary { cursor: pointer; padding: 20px 56px 20px 0; font-family: var(--display); font-size: 1.2rem; font-weight: 700; font-stretch: 90%; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border: 2px solid var(--tinta);
  background:
    linear-gradient(var(--tinta), var(--tinta)) center / 12px 2px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) center / 2px 12px no-repeat,
    var(--folha);
  transition: background-color 0.2s var(--ease);
}
.faq summary:hover::after { background-color: var(--zona); }
.faq details[open] summary::after {
  background: linear-gradient(var(--tinta), var(--tinta)) center / 12px 2px no-repeat, var(--zona);
}
.faq details > div { padding: 0 0 22px; color: var(--tinta-2); max-width: 70ch; }

/* Formulário: prancha com escala gráfica de passos */
.form-orcamento { background: var(--folha); border: 2px solid var(--tinta); padding: clamp(20px, 4vw, 44px); max-width: 860px; margin-inline: auto; }
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 34px; list-style: none; padding: 0; border: 2px solid var(--tinta); }
.passos li { font-size: 0.84rem; font-weight: 700; color: var(--suave); padding: 9px 12px; border-right: 2px solid var(--tinta); background: var(--folha); }
.passos li:last-child { border-right: 0; }
.passos li.atual { color: var(--tinta); background: var(--zona); }
.passos li.feito { background: var(--tinta); color: var(--folha); }
@media (max-width: 560px) { .passos li span { display: none; } .passos li { text-align: center; } }
.passo { display: none; border: 0; padding: 0; margin: 0; }
.passo.ativo { display: block; }
.passo legend { font-family: var(--display); font-size: 1.7rem; font-weight: 800; font-stretch: 82%; margin-bottom: 18px; padding: 0; }
.campo { margin-bottom: 22px; }
.campo > label, .campo > .rotulo { display: block; font-weight: 700; margin-bottom: 7px; font-size: 0.95rem; }
.campo .ajuda { font-size: 0.85rem; color: var(--suave); margin: 5px 0 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--tinta-2); border-radius: 0; font: inherit; background: #fff; color: var(--tinta); caret-color: var(--aprovado);
}
input::placeholder, textarea::placeholder { color: #6a776f; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--zona); outline-offset: 0; border-color: var(--tinta); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--erro); }
textarea { min-height: 120px; resize: vertical; }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.linha-campos--3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 560px) { .linha-campos, .linha-campos--3 { grid-template-columns: 1fr; } }
.opcoes { display: grid; gap: 10px; }
.opcoes--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .opcoes--2 { grid-template-columns: 1fr; } }
.opcao { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--traco-fino); padding: 14px 16px; cursor: pointer; background: #fff; transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease); }
.opcao:hover { border-color: var(--tinta-2); }
.opcao:has(input:checked) { border-color: var(--tinta); background: var(--zona-clara); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--aprovado); outline-offset: 2px; }
.opcao input { margin-top: 4px; accent-color: var(--tinta); width: 18px; height: 18px; flex: none; }
.opcao strong { display: block; font-size: 0.98rem; }
.opcao small { color: var(--suave); font-size: 0.86rem; }
.opcao.desativada { opacity: 0.5; cursor: not-allowed; background: var(--mapa); }
.navegacao { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 2px solid var(--tinta); }
.erro-campo { color: var(--erro); font-size: 0.88rem; font-weight: 600; margin-top: 6px; }
.erro-geral { background: #f8e2dc; color: var(--erro); border: 2px solid var(--erro); padding: 12px 16px; margin-top: 16px; font-weight: 600; }
.campo-invisivel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.confirmacao { text-align: center; padding: 34px 10px; }
.confirmacao .icone { width: 64px; height: 64px; background: var(--aprovado-claro); border: 2px solid var(--aprovado); color: var(--aprovado); display: grid; place-items: center; margin: 0 auto 18px; }
.confirmacao .icone svg { width: 32px; height: 32px; }
.resumo-inclui { background: var(--mapa); border: 1px solid var(--traco-fino); padding: 16px 18px; font-size: 0.92rem; color: var(--tinta-2); margin-top: 8px; }
.resumo-inclui ul { margin: 6px 0 0; padding-left: 18px; }

/* Texto longo */
.texto-longo { max-width: 72ch; }
.texto-longo h2 { font-size: 1.6rem; margin-top: 1.8em; }
.texto-longo li { margin-bottom: 6px; }
.lista-municipios { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--tinta); columns: 2; column-gap: 28px; }
.lista-municipios li { padding: 9px 0; border-bottom: 1px solid var(--traco-fino); break-inside: avoid; font-weight: 600; }

/* Retrato (Sobre) */
.retrato { border: 2px solid var(--tinta); background: var(--folha); max-width: 420px; }
.retrato img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.retrato .imagem {
  aspect-ratio: 4 / 5; display: grid; place-items: center; color: var(--suave); font-weight: 600; font-size: 0.9rem;
  background: var(--mapa); outline: 1px dashed var(--traco-fino); outline-offset: -14px;
}
.retrato figcaption { padding: 10px 14px; border-top: 2px solid var(--tinta); font-size: 0.86rem; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.retrato figcaption strong { font-weight: 700; }
.ficha-empresa { display: grid; grid-template-columns: auto 1fr; border: 2px solid var(--tinta); background: var(--folha); margin: 8px 0 0; }
.ficha-empresa dt, .ficha-empresa dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--traco-fino); }
.ficha-empresa dt { color: var(--suave); border-right: 1px solid var(--traco-fino); font-size: 0.9rem; }
.ficha-empresa dd { font-weight: 600; }
.ficha-empresa > :nth-last-child(-n + 2) { border-bottom: 0; }

/* Rodapé: o carimbo da prancha */
.rodape { background: var(--tinta); color: #c3cec7; padding: 64px 0 32px; font-size: 0.93rem; }
.rodape a { color: var(--folha); text-decoration: none; }
.rodape a:hover { color: var(--zona); }
.rodape .grade { grid-template-columns: 1.4fr 1fr 1fr; gap: 0; border: 1px solid #4b5a52; }
.rodape .grade > div { padding: 24px; border-right: 1px solid #4b5a52; }
.rodape .grade > div:last-child { border-right: 0; }
@media (max-width: 760px) { .rodape .grade { grid-template-columns: 1fr; } .rodape .grade > div { border-right: 0; border-bottom: 1px solid #4b5a52; } .rodape .grade > div:last-child { border-bottom: 0; } }
.rodape h4 { color: var(--zona); font-family: inherit; font-size: 0.86rem; font-weight: 800; margin: 0 0 12px; }
.rodape-logo { width: 104px; height: 104px; border-radius: 50%; margin-bottom: 14px; }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: 7px; }
.rodape .legal { border: 1px solid #4b5a52; border-top: 0; padding: 14px 24px; font-size: 0.84rem; color: #a8b5ad; }

/* WhatsApp flutuante */
.wpp {
  position: fixed; right: 18px; bottom: 18px; z-index: 30; background: var(--verde-wpp); color: #fff; width: 58px; height: 58px;
  border-radius: 50%; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(21, 32, 28, 0.28); border: 2px solid var(--tinta);
}
.wpp:hover { background: #187a42; color: #fff; }
.wpp svg { width: 30px; height: 30px; fill: currentColor; }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 50; background: var(--folha); padding: 8px 12px; border: 2px solid var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}