/* ==========================================================================
   IZALU ENGENHARIA E CONSTRUÇÃO — folha de estilo única do site.
   Todas as páginas (index, sobre, servicos, portfolio, blog, contato) usam
   este arquivo. Mexeu aqui, mudou no site inteiro.

   Marca: dourado sobre preto. O site alterna — cada página abre com uma faixa
   preta carregando o título, e o conteúdo vem em claro logo abaixo.
   ========================================================================== */

:root {
  --papel:      #FFFFFF;
  --papel-alt:  #F6F3ED;   /* off-white quente, puxado para o dourado */
  --tinta:      #16130E;   /* preto quente do texto */
  --tinta-meia: #5E574C;
  --borda:      #E4DCD0;

  --breu:       #0B0906;   /* faixas pretas */
  --breu-alto:  #14110B;
  --breu-borda: #2A2216;
  --osso:       #EDE7DC;   /* texto sobre preto */
  --fumo:       #9A9086;

  --ouro:        #C08838;
  --ouro-fundo:  #7A4C14;  /* dourado legível sobre claro */
  --ouro-brilho: #F5D98D;  /* só sobre preto */

  --display: 'Montserrat', 'Futura', 'Trebuchet MS', sans-serif;
  --corpo:   'Inter', -apple-system, 'Segoe UI', sans-serif;
  --dado:    'IBM Plex Mono', 'Consolas', monospace;

  --coluna: 1140px;
  --gutter: clamp(16px, 5vw, 56px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.14;
  text-wrap: balance;
  margin: 0;
}

a { color: var(--ouro-fundo); }

:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 2px; }

.dentro {
  width: 100%;
  max-width: var(--coluna);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.faixa { padding-block: clamp(46px, 6.5vw, 78px); }
.faixa.alt { background: var(--papel-alt); }

.rotulo {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro-fundo);
  margin: 0 0 18px;
}

h2.secao { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.01em; max-width: 20ch; }
p.secao-lead { color: var(--tinta-meia); max-width: 62ch; margin: 18px 0 0; font-size: 16px; }
.num { font-family: var(--dado); font-variant-numeric: tabular-nums; }

/* ================= cabeçalho de página (a faixa preta) ================== */
.cabecalho {
  background: var(--breu);
  color: var(--osso);
  padding-block: clamp(48px, 7vw, 92px);
  position: relative;
  overflow: hidden;
}
.cabecalho::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 150% at 8% 0%, rgba(192, 136, 56, .17), transparent 60%);
  pointer-events: none;
}
.cabecalho .dentro { position: relative; z-index: 1; }
.cabecalho .trilha {
  font-size: 12.5px;
  color: #6E665B;
  margin: 0 0 20px;
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}
.cabecalho .trilha a { color: #6E665B; text-decoration: none; }
.cabecalho .trilha a:hover { color: var(--ouro-brilho); }
.cabecalho .trilha .aqui { color: var(--ouro); }
.cabecalho h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  letter-spacing: -.015em;
  color: var(--osso);
  max-width: 17ch;
}
.cabecalho p {
  color: var(--fumo);
  max-width: 58ch;
  margin: 18px 0 0;
  font-size: clamp(15.5px, 1.8vw, 17px);
}

/* ------------------------------ botões ---------------------------------- */
.zap {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #140E04;
  background: linear-gradient(120deg, var(--ouro-fundo), var(--ouro) 48%, var(--ouro-brilho));
  padding: 12px 20px;
  border: 0;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .18s;
}
.zap:hover { filter: brightness(1.08); }

.botao-vazado {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ouro-fundo);
  border: 1px solid var(--ouro);
  padding: 12px 20px;
  border-radius: 2px;
  text-decoration: none;
  transition: background .18s;
}
.botao-vazado:hover { background: rgba(192, 136, 56, .1); }

.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------------------- barra de utilidade (preta) ---------------------- */
.barra-topo {
  background: var(--breu);
  color: var(--fumo);
  font-size: 13px;
  border-bottom: 1px solid var(--breu-borda);
}
.barra-topo .dentro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding-block: 9px;
}
.barra-topo .praca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.barra-topo .risco { color: var(--breu-borda); }
.barra-topo a { color: var(--fumo); text-decoration: none; }
.barra-topo a:hover { color: var(--ouro-brilho); }
@media (max-width: 620px) { .barra-topo .horario { display: none; } }

/* ------------------------------- topo ----------------------------------- */
header.topo {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}
.topo-dentro {
  max-width: var(--coluna);
  margin-inline: auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  gap: 22px;
}
/* a logo é dourada e sobre branco perde contraste: vai sobre um bloco cinza */
.topo .marca {
  background: #2A251D;
  border-radius: 3px;
  padding: 7px 18px;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.topo img { height: 56px; width: auto; display: block; }
@media (max-width: 480px) { .topo .marca { padding: 6px 12px; } }
nav.menu { margin-left: auto; display: flex; gap: 26px; flex-wrap: wrap; }
nav.menu a {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-meia);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
nav.menu a:hover { color: var(--ouro-fundo); }
nav.menu a.ativo { color: var(--ouro-fundo); border-bottom-color: var(--ouro); }
@media (max-width: 1020px) { nav.menu { display: none; } }
@media (max-width: 480px) { .topo img { height: 52px; } }

/* menu do celular: aparece onde o horizontal some */
.abre-menu {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--borda);
  border-radius: 2px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--tinta);
}
@media (max-width: 1020px) { .abre-menu { display: block; } }
.menu-celular {
  display: none;
  border-top: 1px solid var(--borda);
  background: var(--papel);
}
.menu-celular.aberto { display: block; }
.menu-celular a {
  display: block;
  padding: 14px var(--gutter);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-meia);
  text-decoration: none;
  border-bottom: 1px solid var(--borda);
}
.menu-celular a.ativo { color: var(--ouro-fundo); }

/* ------------------------------- hero ----------------------------------- */
.hero { padding-block: clamp(40px, 5.5vw, 64px); }
.hero .dentro {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
@media (max-width: 880px) { .hero .dentro { grid-template-columns: 1fr; } }
.hero-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  max-width: 100%;
  border-radius: 3px;
}
.hero h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.018em; max-width: 14ch; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--ouro-fundo), var(--ouro) 55%, #9A6A22);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead { font-size: clamp(16px, 2vw, 18.5px); color: var(--tinta-meia); max-width: 52ch; margin: 22px 0 0; }

/* ------------------------------ sobre ----------------------------------- */
/* bloco de texto ao lado de uma foto; no celular a foto sobe para o topo */
.bloco-foto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px);
  align-items: start;   /* com texto longo, foto centralizada deixa vazio dos dois lados */
}
.bloco-foto.centro { align-items: center; }
@media (max-width: 820px) {
  .bloco-foto { grid-template-columns: 1fr; }
  .bloco-foto .foto { order: -1; }
}
.bloco-foto .foto {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.bloco-foto .foto.paisagem { aspect-ratio: 4 / 3; }
.bloco-foto .foto.retrato { aspect-ratio: 1 / 1; }

.ficha-pessoa {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  font-family: var(--dado);
  font-size: 12.5px;
  color: var(--tinta-meia);
}

/* título de seção grande, com o filete dourado da marca embaixo */
.titulo-secao {
  font-size: clamp(26px, 3.8vw, 38px);
  letter-spacing: -.015em;
  color: var(--tinta);
  margin-bottom: 26px;
  padding-bottom: 16px;
  position: relative;
  max-width: 18ch;
}
.titulo-secao::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  background: linear-gradient(90deg, var(--ouro-fundo), var(--ouro));
}
.dentro[style*="center"] .titulo-secao::after { left: 50%; transform: translateX(-50%); }

.citacao {
  margin: 28px 0;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--ouro);
  font-size: clamp(16px, 2vw, 19px);
  font-style: italic;
  color: var(--tinta);
  max-width: 46ch;
}

/* cartão do responsável, centralizado: foto, nome, cargo e texto */
.pessoa {
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
}
.pessoa img {
  width: clamp(160px, 22vw, 210px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 22px;
  border: 3px solid var(--ouro);
}
.pessoa h3 { font-size: clamp(20px, 2.6vw, 25px); margin-bottom: 4px; }
.pessoa .cargo {
  font-family: var(--dado);
  font-size: 13px;
  color: var(--ouro-fundo);
  margin: 0 0 18px;
  letter-spacing: .04em;
}
.pessoa p { color: var(--tinta-meia); }
.pessoa .ficha-pessoa { display: inline-block; border-top: 0; padding-top: 0; margin-top: 14px; }

.saiba {
  display: inline-block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ouro-fundo);
  border-bottom: 1px solid var(--ouro);
  padding-bottom: 3px;
  transition: color .18s;
}
.saiba:hover { color: var(--ouro); }

.sobre-grade {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 800px) { .sobre-grade { grid-template-columns: 1fr; } }
.sobre-texto h2 { font-size: 22px; margin-bottom: 14px; color: var(--ouro-fundo); }
.sobre-texto p { color: var(--tinta-meia); max-width: 60ch; }
.sobre-texto p:first-of-type { margin-top: 0; }
.sobre-texto strong { color: var(--tinta); font-weight: 600; }

.perfil {
  border: 1px solid var(--borda);
  background: var(--papel);
  border-radius: 3px;
  overflow: hidden;
}
.perfil img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.perfil .ficha { padding: 20px; }
.perfil h3 { font-size: 17px; margin-bottom: 4px; }
.perfil .cargo { font-family: var(--dado); font-size: 12px; color: var(--ouro-fundo); margin: 0 0 14px; }
.perfil p { margin: 0; font-size: 14px; color: var(--tinta-meia); }
.perfil .registro {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
  font-family: var(--dado);
  font-size: 12px;
  color: var(--tinta-meia);
}

/* ------------------------------ números --------------------------------- */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: 3px;
  overflow: hidden;
}
.numero { background: var(--papel); padding: 24px; }
.numero .figura {
  font-family: var(--dado);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3.6vw, 34px);
  color: var(--ouro-fundo);
  line-height: 1.1;
}
.numero p { margin: 8px 0 0; font-size: 13.5px; color: var(--tinta-meia); }

/* ----------------------------- serviços --------------------------------- */
.servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: 3px;
  overflow: hidden;
}
.servico { background: var(--papel); padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; }
.servico h3 { font-size: 19px; color: var(--tinta); margin-bottom: 8px; }
.servico .sub { font-family: var(--dado); font-size: 12px; color: var(--ouro-fundo); margin: 0 0 16px; }
.servico > p { color: var(--tinta-meia); font-size: 15px; margin: 0 0 18px; }
.servico ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  color: var(--tinta-meia);
  font-size: 14.5px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.servico li { padding-left: 20px; position: relative; }
.servico li::before { content: '✓'; position: absolute; left: 0; color: var(--ouro); font-size: 11px; top: 2px; }
.servico .saiba {
  margin-top: auto;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ouro-fundo);
}
.servico .saiba:hover { color: var(--ouro); }

/* ------------------ a conta aberta (caixa preta) ------------------------ */
.conta {
  background: var(--breu);
  border-radius: 3px;
  padding: clamp(22px, 3.5vw, 34px);
  color: var(--osso);
}
.conta-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin-bottom: 22px; }
.conta-topo h2, .conta-topo h3 { font-size: clamp(19px, 2.4vw, 23px); color: var(--osso); }
.conta-topo span { font-size: 13px; color: var(--fumo); }

.campo-custo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.campo-custo label { font-size: 13px; color: var(--fumo); }
.caixa-moeda {
  display: inline-flex;
  align-items: center;
  background: var(--breu-alto);
  border: 1px solid var(--breu-borda);
  border-radius: 2px;
  padding: 0 12px;
}
.caixa-moeda:focus-within { border-color: var(--ouro); }
.caixa-moeda span { font-family: var(--dado); font-size: 14px; color: var(--fumo); }
.caixa-moeda input {
  font-family: var(--dado);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  color: var(--osso);
  background: none;
  border: 0;
  outline: none;
  padding: 10px 6px;
  width: 9ch;
}

.barra { display: flex; height: 46px; margin-top: 26px; border-radius: 2px; overflow: hidden; border: 1px solid var(--breu-borda); }
.barra div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: flex-grow .45s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  white-space: nowrap;
}
.fatia-material { background: #241D13; color: var(--fumo); }
.fatia-mo       { background: #332817; color: var(--fumo); }
.fatia-taxa     { background: linear-gradient(120deg, var(--ouro-fundo), var(--ouro)); color: #140E04; }
@media (prefers-reduced-motion: reduce) { .barra div { transition: none; } }

.linhas-conta { margin-top: 24px; border-top: 1px solid var(--breu-borda); }
.linha-conta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--breu-borda);
  font-size: 14px;
}
.linha-conta .rotulo-linha { color: var(--fumo); }
.linha-conta .valor { font-family: var(--dado); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--osso); }
.linha-conta.total { border-bottom: 0; padding-top: 16px; }
.linha-conta.total .rotulo-linha {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--osso);
}
.linha-conta.total .valor { font-size: 21px; color: var(--ouro-brilho); }
.destaque-taxa, .linha-conta .valor.destaque-taxa { color: var(--ouro); }
.conta-nota { margin: 22px 0 0; font-size: 13px; color: var(--fumo); max-width: 62ch; }

/* ------------------------------ processo -------------------------------- */
.etapas { display: flex; flex-direction: column; }
.etapa {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--borda);
  align-items: start;
}
.etapa:last-child { border-bottom: 1px solid var(--borda); }
.etapa .passo { font-family: var(--dado); font-size: 13px; color: var(--ouro-fundo); padding-top: 3px; }
.etapa h3 { font-size: 17px; margin-bottom: 6px; }
.etapa p { margin: 0; color: var(--tinta-meia); font-size: 15px; max-width: 64ch; }
@media (max-width: 540px) { .etapa { grid-template-columns: 44px 1fr; gap: 14px; } }

/* ------------------- cartão de obra, clicável (portfólio) --------------- */
/* auto-FILL, não auto-fit: com uma obra só o cartão fica do tamanho da coluna,
   em vez de esticar pela largura inteira da página */
.obras-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(20px, 3vw, 30px); }
@media (max-width: 700px) { .obras-grade { grid-template-columns: 1fr; } }
a.cartao-obra {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--borda);
  border-radius: 3px;
  overflow: hidden;
  background: var(--papel);
  transition: border-color .2s, transform .2s;
}
a.cartao-obra:hover { border-color: var(--ouro); transform: translateY(-3px); }
.cartao-obra .capa { position: relative; }
.cartao-obra .capa img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  max-width: 100%;
}
.selo {
  position: absolute;
  top: 14px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 100px;
  color: #fff;
}
.selo.tipo { left: 14px; background: rgba(11, 9, 6, .82); backdrop-filter: blur(4px); }
.selo.estado { right: 14px; background: #3F7A4A; }
.selo.estado.andamento { background: var(--ouro-fundo); }
.cartao-obra .texto-obra { padding: 20px 22px 24px; }
.cartao-obra h2, .cartao-obra h3 { font-size: clamp(18px, 2.2vw, 21px); margin-bottom: 7px; }
.cartao-obra .meta { margin: 0; font-size: 14px; color: var(--tinta-meia); font-variant-numeric: tabular-nums; }

/* --------------------- página individual da obra ------------------------ */
.obra-capa img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  max-width: 100%;
  border-radius: 3px;
}
.obra-resumo { font-size: clamp(16px, 2vw, 19px); color: var(--tinta-meia); max-width: 64ch; margin: 0 0 8px; }
.obra-colunas {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
@media (max-width: 860px) { .obra-colunas { grid-template-columns: 1fr; } }
.lista-marcada { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lista-marcada li { padding-left: 20px; position: relative; color: var(--tinta-meia); font-size: 15px; }
.lista-marcada li::before { content: '•'; position: absolute; left: 2px; color: var(--ouro); font-size: 16px; line-height: 1.3; }
.lista-marcada strong { color: var(--tinta); font-weight: 600; }

.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.galeria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  max-width: 100%;
  border-radius: 3px;
}

/* --------------------------- obra em destaque --------------------------- */
.obra-destaque {
  border: 1px solid var(--borda);
  border-radius: 3px;
  overflow: hidden;
  background: var(--papel);
}
.obra-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--borda); }
@media (max-width: 680px) { .obra-fotos { grid-template-columns: 1fr; } }
.obra-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; max-width: 100%; }
.obra-ficha { padding: clamp(20px, 3vw, 30px); }
.obra-ficha h2, .obra-ficha h3 { font-size: 21px; margin-bottom: 4px; }
.obra-ficha .local { margin: 0; color: var(--tinta-meia); font-size: 14.5px; }
.ficha-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--borda);
}
.ficha-dados dt {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ouro-fundo);
  margin-bottom: 5px;
}
.ficha-dados dd {
  margin: 0;
  font-family: var(--dado);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--tinta);
}
.ficha-dados dd.texto { font-family: var(--corpo); font-size: 14.5px; color: var(--tinta-meia); }

/* -------------------------------- blog ---------------------------------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.cartao {
  border: 1px solid var(--borda);
  border-radius: 3px;
  overflow: hidden;
  background: var(--papel);
  display: flex;
  flex-direction: column;
}
.cartao img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cartao .texto { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cartao h3 { font-size: 16px; }
.cartao p { margin: 0; font-size: 13.5px; color: var(--tinta-meia); }
.cartao .ficha { font-family: var(--dado); font-size: 12px; color: var(--ouro-fundo); margin-top: auto; padding-top: 10px; }
.cartao .data { font-family: var(--dado); font-size: 11px; color: var(--ouro-fundo); letter-spacing: .06em; }

.vazio-aviso {
  margin-top: 26px;
  border: 1px dashed var(--borda);
  border-radius: 3px;
  padding: 18px 20px;
  font-size: 13.5px;
  color: var(--tinta-meia);
  background: var(--papel);
}
.vazio-aviso strong { color: var(--ouro-fundo); font-weight: 600; }

/* ----------------------------- perguntas -------------------------------- */
.perguntas { border-top: 1px solid var(--borda); }
details { border-bottom: 1px solid var(--borda); }
details summary {
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  list-style: none;
  position: relative;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ouro);
  font-size: 20px;
  font-weight: 400;
}
details[open] summary::after { content: '–'; }
details p { margin: 0 0 22px; color: var(--tinta-meia); font-size: 15px; max-width: 68ch; }

/* ------------------------------ contato --------------------------------- */
.contato-grade {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
@media (max-width: 860px) { .contato-grade { grid-template-columns: 1fr; } }

.canais { display: flex; flex-direction: column; gap: 12px; }
.canal {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 3px;
  padding: 16px 18px;
  text-decoration: none;
  transition: border-color .18s;
}
a.canal:hover { border-color: var(--ouro); }
.canal .icone {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(192, 136, 56, .13);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ouro-fundo);
  font-size: 17px;
}
.canal h3 {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta);
  margin: 3px 0 4px;
}
.canal p { margin: 0; font-size: 14.5px; color: var(--tinta-meia); }

.formulario {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 3px;
  padding: clamp(20px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.formulario h2 { font-size: 19px; margin: 0; }
.formulario > p { margin: -6px 0 0; font-size: 13.5px; color: var(--tinta-meia); }
.linha-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .linha-form { grid-template-columns: 1fr; } }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-meia);
}
.campo input, .campo select, .campo textarea {
  font-family: var(--corpo);
  font-size: 15px;
  color: var(--tinta);
  background: var(--papel-alt);
  border: 1px solid var(--borda);
  border-radius: 2px;
  padding: 11px 12px;
  outline: none;
  width: 100%;
}
.campo textarea { resize: vertical; min-height: 104px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--ouro); }
.campo input::placeholder, .campo textarea::placeholder { color: #A79C8C; }
.formulario .zap { text-align: center; }
.form-nota { margin: 0; font-size: 12.5px; color: #8A8073; }

/* ------------------------- ícones de rede social ------------------------ */
/* Cada ícone só aparece quando o CONFIG tem o perfil — sem perfil, sem botão
   quebrado. Ver a função aplicarConfig() no script.js. */
.redes { display: flex; gap: 10px; margin-top: 18px; }
.redes a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--breu-borda);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fumo);
  transition: color .18s, border-color .18s;
}
.redes a:hover { color: var(--ouro-brilho); border-color: var(--ouro-fundo); }
.redes svg { width: 17px; height: 17px; display: block; }
/* sem este, o display:flex acima vence o [hidden] do navegador e o ícone
   aparece apontando para "#" quando o perfil ainda não existe */
.redes a[hidden] { display: none; }

/* sobre fundo claro (cartão de contato) */
.redes.claro a { border-color: var(--borda); color: var(--tinta-meia); }
.redes.claro a:hover { color: var(--ouro-fundo); border-color: var(--ouro); }

/* ---------------------- o padrão Izalu (faixa preta) -------------------- */
.padrao {
  background: var(--breu);
  color: var(--osso);
  padding-block: clamp(46px, 6vw, 76px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.padrao::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 130% at 50% 0%, rgba(192, 136, 56, .13), transparent 62%);
  pointer-events: none;
}
.padrao .dentro { position: relative; z-index: 1; }
.padrao img { height: clamp(58px, 8vw, 78px); width: auto; display: block; margin-inline: auto; }
.duplas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px clamp(24px, 5vw, 56px);
  margin-top: clamp(26px, 4vw, 38px);
}
.dupla {
  font-family: var(--display);
  font-size: clamp(13px, 1.6vw, 15px);
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}
.dupla b { color: var(--ouro); font-weight: 600; }
.dupla em { font-style: normal; color: var(--ouro-fundo); margin-inline: 7px; }
.dupla i { font-style: normal; color: var(--osso); font-weight: 500; }
.frase-padrao {
  margin: clamp(26px, 4vw, 34px) 0 0;
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--ouro);
  font-style: italic;
}

/* ------------------------- chamada final (preta) ------------------------ */
.chamada {
  background: var(--breu);
  color: var(--osso);
  padding-block: clamp(46px, 6vw, 72px);
  position: relative;
  overflow: hidden;
}
.chamada::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 160% at 90% 100%, rgba(192, 136, 56, .16), transparent 62%);
  pointer-events: none;
}
.chamada .dentro { position: relative; z-index: 1; }
.chamada h2 { font-size: clamp(24px, 3.4vw, 34px); color: var(--osso); max-width: 22ch; }
.chamada p { color: var(--fumo); max-width: 56ch; margin: 18px 0 0; }
.chamada .botao-vazado { color: var(--ouro-brilho); border-color: var(--ouro-fundo); }
.chamada .botao-vazado:hover { background: rgba(192, 136, 56, .12); }

/* ------------------------------- rodapé --------------------------------- */
footer { background: var(--breu); color: var(--fumo); padding-block: 52px 36px; border-top: 1px solid var(--breu-borda); }
.rodape-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 34px; }
footer img { height: 86px; width: auto; margin-bottom: 14px; }
footer h3 {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 12px;
}
footer p, footer a { font-size: 14px; color: var(--fumo); margin: 0 0 8px; text-decoration: none; display: block; }
footer a:hover { color: var(--ouro-brilho); }
.assinatura {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--breu-borda);
  font-size: 13px;
  color: #6E665B;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.crea { font-family: var(--dado); }

/* botão flutuante de WhatsApp */
.zap-flutua {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  text-decoration: none;
}
.zap-flutua svg { width: 30px; height: 30px; fill: #fff; }