/* 1. Cores e configurações gerais */
:root {
  --fundo: oklch(14.5% .03 280);
  --texto: oklch(97% .01 90);
  --card: oklch(18% .04 280);
  --dourado: #d6a62e;
  --dourado-suave: oklch(55% .1 85);
  --roxo: oklch(45% .12 290);
  --roxo-suave: oklch(30% .08 290);
  --veludo: oklch(12% .03 280);
  --muted: oklch(25% .04 280);
  --texto-suave: oklch(75% .04 280);
  --borda: oklch(30% .04 280);
  --campo: oklch(22% .04 280);
  --largura: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: "Inter", sans-serif; line-height: 1.5; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: "Cinzel", Georgia, serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(100% - 32px, var(--largura)); margin-inline: auto; }
.secao { padding-block: 80px; }
.texto-dourado { color: var(--dourado); }

/* 2. Botões e elementos repetidos */
.botao { display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border: 1px solid transparent; border-radius: 999px; font-weight: 600; transition: .2s ease; }
.botao-dourado { background: var(--dourado); color: var(--card); }
.botao-dourado:hover { filter: brightness(.95); box-shadow: 0 0 20px -5px var(--dourado); }
.botao-contorno { border-color: color-mix(in oklch, var(--dourado) 40%, transparent); color: var(--dourado); }
.botao-contorno:hover { background: color-mix(in oklch, var(--dourado) 10%, transparent); }
.selo { width: fit-content; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border: 1px solid color-mix(in oklch, var(--dourado) 30%, transparent); border-radius: 999px; background: color-mix(in oklch, var(--dourado) 10%, transparent); color: var(--dourado); font-size: 14px; font-weight: 500; }
.titulo-secao { margin-bottom: 64px; text-align: center; }
.titulo-secao h2 { margin-bottom: 16px; font-size: 36px; line-height: 1.25; }
.titulo-secao > p:not(.selo) { max-width: 672px; margin-inline: auto; color: var(--texto-suave); }

/* 3. Cabeçalho */
.cabecalho { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid color-mix(in oklch, var(--borda) 50%, transparent); background: color-mix(in oklch, var(--fundo) 80%, transparent); backdrop-filter: blur(12px); }
.cabecalho-conteudo { min-height: 80px; display: flex; align-items: center; justify-content: space-between; }
.logo img { width: auto; height: 56px; object-fit: contain; }
.botao-cabecalho { padding: 8px 20px; font-size: 14px; }

/* 4. Apresentação principal */
.hero { position: relative; overflow: hidden; padding-block: 96px 80px; }
.hero-fundo { position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, color-mix(in oklch, var(--dourado-suave) 20%, transparent), transparent 40%), radial-gradient(circle at 70% 80%, color-mix(in oklch, var(--roxo) 15%, transparent), transparent 40%), linear-gradient(135deg, var(--fundo), var(--veludo)); }
.hero-grade { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 64px; }
.hero h1 { margin-bottom: 24px; font-family: "Inter", sans-serif; font-size: 60px; line-height: 1.25; letter-spacing: -.025em; }
.hero h1 span { display: block; }
.hero-descricao { max-width: 672px; color: var(--texto-suave); font-size: 18px; }
.hero-botoes { display: flex; gap: 16px; margin-top: 32px; }
.hero-logo-area { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-brilho { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: color-mix(in oklch, var(--dourado) 10%, transparent); filter: blur(64px); }
.hero-logo { position: relative; padding: 32px; border: 1px solid color-mix(in oklch, var(--dourado) 20%, transparent); border-radius: 16px; background: color-mix(in oklch, var(--card) 50%, transparent); backdrop-filter: blur(8px); }

/* 5. Serviços */
.servicos-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.card-servico { padding: 32px; border: 1px solid var(--borda); border-radius: 16px; background: color-mix(in oklch, var(--card) 50%, transparent); transition: .2s ease; }
.card-servico:hover { border-color: color-mix(in oklch, var(--dourado) 40%, transparent); background: var(--card); }
.icone { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 12px; background: color-mix(in oklch, var(--dourado) 10%, transparent); color: var(--dourado); font-size: 32px; transition: transform .2s; }
.card-servico:hover .icone { transform: scale(1.1); }
.card-servico h3 { margin-bottom: 12px; font-size: 20px; }
.card-servico p { margin-bottom: 0; color: var(--texto-suave); }

/* 6. Motivos e números */
.secao-destaque { border-block: 1px solid color-mix(in oklch, var(--borda) 50%, transparent); background: color-mix(in oklch, var(--muted) 30%, transparent); }
.motivos-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
.motivos-texto h2 { font-size: 36px; }
.motivos-texto > p { color: var(--texto-suave); font-size: 18px; }
.lista-vantagens { display: grid; gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.lista-vantagens li { display: flex; gap: 12px; color: var(--dourado); }
.lista-vantagens span { color: var(--texto); }
.numeros-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.numero-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; border: 1px solid color-mix(in oklch, var(--dourado) 20%, transparent); border-radius: 16px; background: color-mix(in oklch, var(--card) 50%, transparent); text-align: center; }
.numero-card strong { color: var(--dourado); font-size: 36px; }
.numero-card span { margin-top: 4px; color: var(--texto-suave); font-size: 14px; }

/* 7. Depoimentos */
.depoimentos-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.depoimento-card { padding: 32px; border: 1px solid var(--borda); border-radius: 16px; background: color-mix(in oklch, var(--card) 30%, transparent); }
.estrelas { margin-bottom: 16px; color: var(--dourado); letter-spacing: 4px; }
.depoimento-card p { min-height: 96px; }
.depoimento-card strong, .depoimento-card small { display: block; }
.depoimento-card small { margin-top: 2px; color: var(--texto-suave); }

/* 8. Galeria */
.galeria .selo { margin-bottom: 16px; }
.galeria-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.galeria-grade figure { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin: 0; border: 1px solid color-mix(in oklch, var(--dourado) 20%, transparent); border-radius: 16px; background: color-mix(in oklch, var(--card) 30%, transparent); }
.galeria-grade img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.galeria-grade figure:hover img { transform: scale(1.05); }

/* 9. Formulário */
.orcamento { position: relative; background: radial-gradient(ellipse at top, var(--roxo-suave), transparent 60%); }
.formulario-container { max-width: 800px; }
.formulario-caixa { padding: 48px; border: 1px solid color-mix(in oklch, var(--dourado) 20%, transparent); border-radius: 16px; background: color-mix(in oklch, var(--card) 80%, transparent); box-shadow: 0 25px 50px rgb(0 0 0 / 25%); backdrop-filter: blur(8px); }
.formulario-caixa .titulo-secao { margin-bottom: 32px; }
.formulario { display: grid; gap: 24px; }
.campos-duplos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.campo label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--campo); border-radius: 8px; outline: none; background: var(--fundo); color: var(--texto); font: inherit; }
.campo input:focus, .campo select:focus, .campo textarea:focus { box-shadow: 0 0 0 2px var(--dourado); }
.campo textarea { resize: vertical; }
.botao-enviar { width: 100%; }
.aviso-formulario { margin: 0; color: var(--texto-suave); font-size: 12px; text-align: center; }

input, select, textarea {
  background-color: var(--fundo) !important;
}

/* 10. Rodapé */
.rodape { padding-block: 48px; border-top: 1px solid color-mix(in oklch, var(--borda) 50%, transparent); background: var(--veludo); }
.rodape-principal { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.rodape-principal img { width: auto; height: 64px; }
.contatos { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; color: var(--dourado); font-size: 14px; font-weight: 500; }
.direitos { margin: 32px 0 0; padding-top: 32px; border-top: 1px solid color-mix(in oklch, var(--borda) 30%, transparent); color: var(--texto-suave); font-size: 14px; text-align: center; }

/* 11. Ajustes para telas menores */
@media (max-width: 1023px) {
  .hero-grade, .motivos-grade { grid-template-columns: 1fr; }
  .hero-texto { text-align: center; }
  .hero-texto .selo { margin-inline: auto; }
  .hero-descricao { margin-inline: auto; }
  .hero-botoes { justify-content: center; }
  .servicos-grade { grid-template-columns: repeat(2, 1fr); }
  .galeria-grade { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .depoimentos-grade { grid-template-columns: 1fr; }
  .depoimento-card p { min-height: auto; }
  .rodape-principal { flex-direction: column; }
  .contatos { align-items: center; }
}

@media (max-width: 639px) {
  .botao-cabecalho { display: none; }
  .hero { padding-top: 64px; }
  .hero h1 { font-size: 40px; }
  .hero-botoes { flex-direction: column; }
  .servicos-grade, .numeros-grade, .campos-duplos { grid-template-columns: 1fr; }
  .titulo-secao h2, .motivos-texto h2 { font-size: 30px; }
  .formulario-caixa { padding: 32px 24px; }
}