@font-face {
  font-family: 'League Spartan';
  src: url('assets/league-spartan.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

.pagina {
  --escuro: #122a16;
  --medio: #234023;
  --suave: #eef2ea;
  --destaque: #c7dca3;
  --marca: #1f4324;
  --texto: #1c241c;
  --texto-suave: #4c564c;
  --claro-sobre-escuro: #dbe2d8;
  --whatsapp: #25D366;
}

#cor-agua:checked ~ .pagina {
  --escuro: #0f3450;
  --medio: #1a5276;
  --suave: #e9f2f7;
  --destaque: #8fd3f0;
  --marca: #1a5a85;
  --texto: #14222c;
  --texto-suave: #485a66;
  --claro-sobre-escuro: #d5e3ec;
}

#cor-terra:checked ~ .pagina {
  --escuro: #3d2b1b;
  --medio: #5c4128;
  --suave: #f5efe6;
  --destaque: #f0c27a;
  --marca: #7a4f1f;
  --texto: #2a2118;
  --texto-suave: #5e5244;
  --claro-sobre-escuro: #e8dfd2;
}

#cor-grafite:checked ~ .pagina {
  --escuro: #1f2426;
  --medio: #343b3e;
  --suave: #eff1f1;
  --destaque: #a8dc6e;
  --marca: #3f6a24;
  --texto: #1b1f20;
  --texto-suave: #4f5759;
  --claro-sobre-escuro: #dcdfe0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: 'League Spartan', Arial, sans-serif; font-size: 19px; line-height: 1.45; background: #fff; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.1; font-weight: 700; text-wrap: balance; }
h2 { font-size: 40px; margin-bottom: 28px; color: var(--marca); }

.cor-opcao { position: fixed; left: -100px; opacity: 0; }
.oculto { position: absolute; width: 0; height: 0; }

.pagina { color: var(--texto); background: #fff; }
.caixa { width: min(1120px, 100%); margin: 0 auto; padding: 0 24px; }

.topo { position: sticky; top: 0; z-index: 10; background: var(--escuro); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 78px; }
.topo-logo { width: 170px; height: auto; }
.topo nav { display: flex; gap: 26px; }
.topo nav a { color: #fff; text-decoration: none; font-weight: 500; font-size: 17px; }
.topo nav a:hover { color: var(--destaque); }

.hero { position: relative; overflow: hidden; background: var(--escuro); color: #fff; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--escuro) 28%, color-mix(in srgb, var(--escuro) 55%, transparent) 62%, transparent 100%); }
.hero-conteudo { position: relative; z-index: 1; padding-top: 92px; padding-bottom: 96px; }
.etiqueta { color: var(--destaque); font-weight: 700; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; }
.hero h1 { font-size: 58px; max-width: 620px; margin-bottom: 18px; }
.hero-texto { font-size: 22px; color: var(--claro-sobre-escuro); margin-bottom: 30px; max-width: 540px; }

.botao { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 26px; border-radius: 8px; background: var(--whatsapp); color: #06301a; font-weight: 700; font-size: 20px; text-decoration: none; }
.botao svg { width: 26px; height: 26px; flex: none; }
.botao:hover { filter: brightness(1.07); }

.secao { padding: 76px 0; }
.secao-escura { background: var(--escuro); color: #fff; }
.secao-escura h2 { color: var(--destaque); }
.secao-suave { background: var(--suave); }

.duas-colunas { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.lead { font-size: 22px; margin-bottom: 26px; max-width: 560px; }
.servicos { list-style: none; display: grid; gap: 16px; }
.servicos li { border-top: 2px solid var(--suave); padding-top: 14px; }
.servicos strong { display: block; font-size: 22px; color: var(--marca); }
.servicos span { color: var(--texto-suave); font-size: 18px; }
.foto-lateral { width: 100%; max-height: 520px; object-fit: cover; border-radius: 8px; }

.colunas-iguais { grid-template-columns: 1fr 1fr; align-items: start; }
.secao-suave .servicos li { border-top-color: color-mix(in srgb, var(--marca) 25%, transparent); }

.regioes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 44px; }
.regiao { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: #fff; border-radius: 8px; padding: 28px; }
.regiao p { color: var(--texto-suave); font-size: 18px; flex: 1; }
.regiao h3 { font-size: 30px; color: var(--marca); }
.regiao .regiao-rotulo { flex: none; font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--marca); }
.regiao-escura { background: var(--escuro); color: #fff; }
.regiao-escura h3, .regiao-escura .regiao-rotulo { color: var(--destaque); }
.regiao-escura p { color: var(--claro-sobre-escuro); }
.subtitulo { font-size: 26px; color: var(--marca); margin-bottom: 18px; }

.parceiros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-bottom: 34px; }
.parceiros h3 { font-size: 22px; color: var(--marca); margin-bottom: 8px; }
.parceiros p { color: var(--texto-suave); font-size: 18px; }

.perguntas { display: grid; gap: 10px; max-width: 760px; }
.perguntas details { background: #fff; border-radius: 8px; padding: 14px 18px; }
.perguntas summary { font-weight: 700; color: var(--marca); cursor: pointer; }
.perguntas p { margin-top: 8px; color: var(--texto-suave); font-size: 18px; }

.etapas { list-style: none; counter-reset: etapa; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.etapas li { counter-increment: etapa; }
.etapas li::before { content: counter(etapa); display: block; font-size: 58px; line-height: 1; font-weight: 700; color: var(--destaque); margin-bottom: 8px; }
.etapas strong { display: block; font-size: 24px; margin-bottom: 6px; }
.etapas span { color: var(--claro-sobre-escuro); font-size: 18px; }

.diferenciais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.diferenciais h3 { font-size: 24px; color: var(--marca); margin-bottom: 8px; }
.diferenciais p { color: var(--texto-suave); font-size: 18px; }

.galeria { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.galeria figure { grid-column: span 2; }
.galeria .galeria-grande { grid-column: span 4; }
.galeria .galeria-meia { grid-column: span 3; }
.galeria .galeria-meia img { height: 320px; }
.etapas img { width: 100%; height: 190px; object-fit: cover; border-radius: 8px; margin-bottom: 14px; }
.galeria figure { position: relative; overflow: hidden; border-radius: 8px; }
.galeria img { width: 100%; height: 420px; object-fit: cover; }
.galeria figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 14px; background: var(--escuro); color: #fff; font-weight: 500; font-size: 17px; }

.contato { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.contato h2 { margin-bottom: 14px; }
.dados { color: var(--claro-sobre-escuro); min-width: 0; }

.rodape { background: var(--escuro); border-top: 1px solid var(--medio); color: var(--claro-sobre-escuro); font-size: 15px; padding: 22px 0 96px; }

.seletor { position: fixed; left: 18px; bottom: 22px; z-index: 20; color: var(--texto); }
.seletor summary { display: inline-block; min-height: 48px; padding: 13px 18px; border-radius: 24px; background: #fff; border: 2px solid var(--marca); color: var(--marca); font-weight: 700; font-size: 17px; line-height: 1.2; cursor: pointer; list-style: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.seletor summary::-webkit-details-marker { display: none; }
.seletor-opcoes { position: absolute; left: 0; bottom: 58px; display: grid; gap: 4px; width: 180px; padding: 10px; border-radius: 10px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.seletor-opcoes label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 17px; }
.seletor-opcoes label:hover { background: var(--suave); }
.amostra { flex: none; width: 24px; height: 24px; border-radius: 50%; }
.amostra-verde { background: #122a16; }
.amostra-agua { background: #1a5276; }
.amostra-terra { background: #7a4f1f; }
.amostra-grafite { background: #343b3e; }

#cor-verde:checked ~ .pagina label[for="cor-verde"],
#cor-agua:checked ~ .pagina label[for="cor-agua"],
#cor-terra:checked ~ .pagina label[for="cor-terra"],
#cor-grafite:checked ~ .pagina label[for="cor-grafite"] { background: var(--suave); font-weight: 700; }

.whatsapp-flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 20; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--whatsapp); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.whatsapp-flutuante svg { width: 36px; height: 36px; }
.whatsapp-flutuante:hover { filter: brightness(1.07); }

a:focus-visible, summary:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; }
.cor-opcao:focus-visible ~ .pagina .seletor summary { outline: 3px solid var(--destaque); outline-offset: 3px; }

@media (max-width: 900px) {
  .duas-colunas, .colunas-iguais { grid-template-columns: 1fr; gap: 32px; }
  .parceiros { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .regioes { grid-template-columns: 1fr; }
  .etapas, .diferenciais { grid-template-columns: 1fr; gap: 24px; }
  .foto-lateral { max-height: 340px; }
  .galeria { grid-template-columns: 1fr; }
  .galeria figure, .galeria .galeria-grande, .galeria .galeria-meia { grid-column: auto; }
  .galeria img, .galeria .galeria-meia img { height: 300px; }
  .etapas img { height: 220px; }
  .hero h1 { font-size: 44px; }
  .hero::after { background: linear-gradient(90deg, color-mix(in srgb, var(--escuro) 92%, transparent), color-mix(in srgb, var(--escuro) 70%, transparent)); }
  .contato { flex-direction: column; align-items: flex-start; }
  .topo nav a[href="#atendimento"] { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 18px; }
  h2 { font-size: 34px; }
  .topo-logo { width: 130px; }
  .topo nav { gap: 12px; }
  .topo nav a { font-size: 15px; }
  .topo nav a[href="#projetos"] { display: none; }
  .parceiros { grid-template-columns: 1fr; }
  .hero-conteudo { padding-top: 56px; padding-bottom: 60px; }
  .hero h1 { font-size: 37px; }
  .hero-texto { font-size: 20px; }
  .botao { font-size: 18px; padding: 12px 18px; }
  .secao { padding: 56px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}