/* Pamela Bressan Arquitetura · estilo do site
   Conceito: capa do Brand Manual levada para a web. Abertura em taupe com o
   "BRESSAN" gigante sangrando na base, seções claras de leitura, contato em carvão.
   Cores e fontes vêm do Brand Manual (BC Studio, 2024). */

/* Títulos: Cormorant Garamond (licença livre SIL OFL), no lugar da Recline até a licença de uso em site ser confirmada.
   Pesos e tamanho ajustados para ficar com a mesma presença visual da Recline Light. */
@font-face { font-family: "Titulos"; src: url("fontes/cormorant-garamond-regular.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; size-adjust: 112%; }
@font-face { font-family: "Titulos"; src: url("fontes/cormorant-garamond-light-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; size-adjust: 112%; }
@font-face { font-family: "Titulos"; src: url("fontes/cormorant-garamond-medium.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 112%; }
@font-face { font-family: "Hind"; src: url("fontes/hind-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Hind"; src: url("fontes/hind-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hind"; src: url("fontes/hind-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* paleta da marca */
  --taupe: #95785D;        /* cor principal: fundos e texto grande */
  --taupe-texto: #7A6049;  /* variante escura: texto pequeno e links sobre claro (5,2:1) */
  --areia: #A39382;
  --pedra: #C9C1B3;
  --creme: #EFEBDF;
  --papel: #F3F2EF;
  --carvao: #0A0C0C;
  --tinta: #2E2924;        /* texto corrido sobre papel (12:1) */

  /* tipografia */
  --display: "Titulos", Georgia, serif;
  --texto: "Hind", "Helvetica Neue", Arial, sans-serif;
  --corpo: 1.125rem;       /* 18px */
  --lead: clamp(1.2rem, 1.6vw, 1.4rem);
  --h1: clamp(2.6rem, 6.2vw, 5.4rem);
  --h2: clamp(2.1rem, 4.2vw, 3.5rem);
  --h3: clamp(1.45rem, 2vw, 1.75rem);
  --rotulo: 0.8125rem;     /* 13px, só em rótulos curtos */

  /* ritmo */
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --secao: clamp(4.5rem, 10vw, 9rem);
  --largura: 1320px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-weight: 400;
  font-size: var(--corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--taupe-texto); outline-offset: 3px; }

.miolo {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
@media (min-width: 900px) { .miolo { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }

h1, h2, h3 { font-family: var(--display); font-weight: 300; line-height: 1.14; letter-spacing: 0.005em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.2; }
p { margin: 0; max-width: 64ch; }
.rotulo { font-size: var(--rotulo); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }

/* marca desenhada com o arquivo do logo, na cor do contexto */
.marca { display: block; background: currentColor; -webkit-mask: var(--m) no-repeat left center / contain; mask: var(--m) no-repeat left center / contain; }
.marca--logo { --m: url("imagens/logo-pamela-bressan-arquitetura.svg"); aspect-ratio: 829 / 119; width: clamp(180px, 20vw, 250px); }
.marca--pb { --m: url("imagens/monograma-pb.svg"); aspect-ratio: 543 / 502; width: 44px; }
.marca--bressan { --m: url("imagens/bressan.svg"); aspect-ratio: 422.68 / 61.64; width: 100%; -webkit-mask-position: center bottom; mask-position: center bottom; }

/* ---------- cabeçalho ---------- */
.topo { position: absolute; inset: 0 0 auto; z-index: 20; color: var(--creme); padding-top: env(safe-area-inset-top, 0px); }
.topo .miolo { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; }
.topo nav ul { display: flex; gap: clamp(20px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.topo nav a { text-decoration: none; font-size: 0.875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; padding-block: 6px; border-bottom: 1px solid transparent; transition: border-color .25s; }
.topo nav a:hover { border-bottom-color: currentColor; }
.topo .zap { border: 1px solid currentColor; padding: 10px 18px; }
.topo .zap:hover { background: var(--creme); color: var(--carvao); }
.abre-menu { display: none; background: none; border: 0; color: inherit; font: 500 0.875rem/1 var(--texto); letter-spacing: 0.2em; text-transform: uppercase; padding: 12px 0 12px 12px; cursor: pointer; }

.menu-movel { position: fixed; inset: 0; z-index: 40; background: var(--creme); color: var(--carvao); display: flex; flex-direction: column; padding: calc(28px + env(safe-area-inset-top, 0px)) var(--gutter-r) calc(32px + env(safe-area-inset-bottom, 0px)) var(--gutter); }
.menu-movel .linha { display: flex; justify-content: space-between; align-items: center; }
.menu-movel ul { list-style: none; margin: auto 0; padding: 0; display: grid; gap: 18px; }
.menu-movel ul a { font-family: var(--display); font-weight: 300; font-size: 2.6rem; text-decoration: none; line-height: 1.1; }
.menu-movel .rodape-menu { display: grid; gap: 6px; font-size: 1rem; }
.fecha-menu { background: none; border: 0; font: 500 0.875rem/1 var(--texto); letter-spacing: 0.2em; text-transform: uppercase; padding: 12px 0 12px 12px; cursor: pointer; color: inherit; }

@media (max-width: 899px) {
  .topo nav { display: none; }
  .abre-menu { display: block; }
}

/* ---------- abertura ---------- */
.abertura { background: var(--taupe); color: var(--carvao); overflow: hidden; position: relative; }
.abertura .miolo { padding-top: clamp(140px, 18vw, 210px); display: grid; gap: 28px; }
.abertura h1 { color: var(--creme); max-width: 13ch; }
.abertura .rotulo { color: var(--carvao); }
.abertura .lead { font-size: var(--lead); line-height: 1.55; max-width: 46ch; font-weight: 400; }
.acoes { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 8px; }
.botao { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 26px; background: var(--carvao); color: var(--creme); text-decoration: none; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.06em; border: 0; cursor: pointer; transition: background .25s, color .25s; }
.botao:hover { background: var(--creme); color: var(--carvao); }
.link-seta { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.abertura .gigante { color: var(--creme); margin-top: clamp(48px, 7vw, 96px); margin-bottom: -2.2%; width: 100%; padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px)); }

/* ---------- seções ---------- */
.secao { padding-block: var(--secao); }
.cabeca { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); }
.cabeca .rotulo { color: var(--taupe-texto); }
@media (min-width: 900px) { .cabeca--lado { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; } }

/* projetos */
.vazio { position: relative; border: 1px dashed var(--areia); padding: clamp(32px, 6vw, 72px); display: grid; gap: 16px; overflow: hidden; min-height: 320px; align-content: end; background: var(--creme); }
.vazio::before { content: ""; position: absolute; inset: -10% -5% auto auto; width: min(520px, 70%); aspect-ratio: 795 / 445; background: var(--pedra); -webkit-mask: url("imagens/estampa-bressan.svg") no-repeat center / contain; mask: url("imagens/estampa-bressan.svg") no-repeat center / contain; opacity: .55; }
.vazio > * { position: relative; }
.vazio h3 { max-width: 20ch; }
.marcador { display: inline-block; font-family: var(--texto); font-size: 0.875rem; font-weight: 500; color: var(--taupe-texto); background: var(--papel); border: 1px solid var(--areia); padding: 4px 10px; justify-self: start; }
.plano-projetos { display: grid; gap: 12px; margin-top: 28px; font-size: 1rem; }
.plano-projetos ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; max-width: 70ch; }

/* quem assina */
.assina { background: var(--creme); }
.assina .grade { display: grid; gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (min-width: 900px) { .assina .grade { grid-template-columns: 5fr 6fr; } }
.retrato { position: relative; }
.retrato img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.retrato figcaption { font-size: 0.875rem; color: var(--taupe-texto); margin-top: 10px; }
.assina .texto { display: grid; gap: 22px; min-width: 0; }
.assina .rotulo { color: var(--taupe-texto); }
.citacao { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.2; color: var(--taupe-texto); margin: 12px 0 4px; max-width: 22ch; }
.ficha { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.9375rem; color: var(--tinta); border-top: 1px solid var(--pedra); padding-top: 18px; }
.ficha span { white-space: nowrap; }
.pendente { color: var(--taupe-texto); font-weight: 500; }
.para-quem { background: var(--papel); padding: clamp(24px, 3vw, 36px); display: grid; gap: 10px; margin-top: 8px; }

/* princípios */
.principios { list-style: none; margin: 0; padding: 0; display: grid; }
.principios li { display: grid; gap: 6px 48px; padding-block: 26px; border-top: 1px solid var(--pedra); }
.principios li:last-child { border-bottom: 1px solid var(--pedra); }
@media (min-width: 900px) { .principios li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; } }
.principios h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }

/* processo */
.processo { background: var(--creme); }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 32px; counter-reset: etapa; }
@media (min-width: 700px) { .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.etapas li { display: grid; gap: 12px; align-content: start; counter-increment: etapa; border-top: 1px solid var(--taupe); padding-top: 20px; }
.etapas li::before { content: "Etapa " counter(etapa); font-size: var(--rotulo); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-texto); }
.etapas p { font-size: 1.0625rem; }
.servicos { margin-top: clamp(56px, 7vw, 88px); display: grid; gap: 20px; }
.servicos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.servicos li { border: 1px solid var(--areia); padding: 8px 16px; font-size: 1rem; }

/* contato */
.contato { background: var(--carvao); color: var(--creme); }
.contato .grade { display: grid; gap: clamp(40px, 6vw, 96px); }
@media (min-width: 1000px) { .contato .grade { grid-template-columns: 7fr 5fr; } }
.contato .rotulo { color: var(--areia); }
.contato h2 { max-width: 14ch; }
.contato .intro { color: var(--pedra); margin-top: 18px; }

form { display: grid; gap: 22px; margin-top: 40px; }
.campos { display: grid; gap: 22px 28px; }
@media (min-width: 640px) { .campos { grid-template-columns: 1fr 1fr; } .campos .inteiro { grid-column: 1 / -1; } }
.campo { display: grid; gap: 8px; min-width: 0; }
.campo label { font-size: 0.9375rem; color: var(--pedra); }
.campo input, .campo select, .campo textarea { width: 100%; background: transparent; color: var(--creme); border: 0; border-bottom: 1px solid var(--areia); padding: 10px 0; font: 400 1.0625rem/1.4 var(--texto); border-radius: 0; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--pedra) 50%), linear-gradient(135deg, var(--pedra) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.campo select option { color: var(--carvao); }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--creme); box-shadow: 0 1px 0 var(--creme); }
.campo .erro { font-size: 0.9375rem; color: #F2C9A8; min-height: 0; }
.campo[data-invalido] input, .campo[data-invalido] select { border-bottom-color: #F2C9A8; }
.contato .botao { background: var(--creme); color: var(--carvao); justify-self: start; }
.contato .botao:hover { background: var(--taupe); color: var(--carvao); }
.aviso-envio { font-size: 0.9375rem; color: var(--pedra); }
.confirmacao { border: 1px solid var(--areia); padding: 28px; display: grid; gap: 10px; margin-top: 40px; }
.confirmacao h3 { color: var(--creme); }

.canais { display: grid; gap: 28px; align-content: start; }
.canais img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.canal { display: grid; gap: 4px; border-top: 1px solid #3A3631; padding-top: 16px; }
.canal .rotulo { font-size: 0.75rem; }
.canal a, .canal span.valor { font-family: var(--display); font-size: 1.6rem; font-weight: 300; text-decoration: none; line-height: 1.25; overflow-wrap: anywhere; }
.canal a:hover { color: var(--pedra); }
@media (max-width: 999px) { .canais img { display: none; } }

/* rodapé */
.rodape { background: var(--carvao); color: var(--pedra); border-top: 1px solid #2A2724; }
.rodape .miolo { padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; font-size: 0.9375rem; }
.rodape .marca--pb { color: var(--creme); }

/* botão fixo de WhatsApp no celular */
.zap-fixo { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--carvao); color: var(--creme); text-decoration: none; font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.04em; padding: 14px 20px; box-shadow: 0 6px 20px rgb(10 12 12 / 25%); display: none; }
@media (max-width: 899px) { .zap-fixo { display: inline-flex; } }

/* mapa do site: só existe no rascunho */
.mapa { background: var(--papel); border-top: 6px solid var(--taupe); }
.mapa .aviso { display: inline-block; background: var(--taupe-texto); color: var(--creme); padding: 4px 12px; font-size: 0.875rem; font-weight: 500; }
.mapa-lista { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 900px) { .mapa-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mapa-item { background: #fff; border: 1px solid var(--pedra); padding: 24px; display: grid; gap: 10px; align-content: start; font-size: 1rem; }
.mapa-item code { font-size: 0.9rem; color: var(--taupe-texto); overflow-wrap: anywhere; }
.mapa-item ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.mapa-item .fonte { font-size: 0.875rem; color: #5A5249; }

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 899px) {
  .retrato img { aspect-ratio: 4 / 5; object-position: center 15%; }
}

/* respostas canônicas em prosa, dentro do processo */
.respostas { display: grid; gap: 28px 32px; margin-top: clamp(48px, 6vw, 72px); padding-top: 32px; border-top: 1px solid var(--pedra); }
@media (min-width: 900px) { .respostas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.respostas > div { display: grid; gap: 10px; align-content: start; min-width: 0; }
.respostas p { font-size: 1.0625rem; }

/* projetos: antes e depois */
.projeto { display: grid; gap: clamp(24px, 3vw, 40px); }
.projeto-imagens { display: grid; gap: 16px; align-items: end; }
@media (min-width: 900px) { .projeto-imagens { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 24px; } }
.projeto figure { margin: 0; display: grid; gap: 10px; min-width: 0; }
.projeto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--pedra); }
.projeto figcaption { font-size: 0.9375rem; color: #5A5249; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.etiqueta { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-texto); }
.projeto-texto { display: grid; gap: 16px; border-top: 1px solid var(--pedra); padding-top: 24px; }
@media (min-width: 900px) { .projeto-texto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; } }
.projeto-texto .rotulo { color: var(--taupe-texto); margin-bottom: 10px; }
.projeto-texto h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.mais-projetos { margin-top: clamp(48px, 6vw, 72px); font-size: 1rem; color: #5A5249; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; max-width: none; }
.projeto + .projeto { margin-top: clamp(72px, 9vw, 128px); }
.galeria { display: grid; gap: 16px; }
.galeria .linha { display: flex; gap: 16px; }
.galeria figure { flex: var(--ar) 1 0; margin: 0; min-width: 0; }
/* proporção reservada antes da foto carregar, para os links do menu caírem no lugar certo */
.galeria img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; background: var(--pedra); }
.galeria .legenda { font-size: 0.9375rem; max-width: none; }
@media (max-width: 699px) { .galeria .linha { flex-direction: column; } .galeria .linha figure { flex: none; } }
.galeria .linha--estreita { max-width: 560px; }
.galeria .linha--media { max-width: 880px; }

/* ---------- links da home para cada projeto ---------- */
.projeto-texto h3 a { text-decoration: none; }
.projeto-texto h3 a:hover { color: var(--taupe-texto); }
.projeto-texto .ver-projeto { justify-self: start; color: var(--taupe-texto); }
@media (min-width: 900px) { .projeto-texto .ver-projeto { justify-self: end; align-self: end; } }

/* ---------- página de projeto ---------- */
.abertura--projeto .miolo { padding-bottom: clamp(48px, 7vw, 96px); gap: 18px; }
.abertura--projeto h1 { max-width: 18ch; }
.voltar { color: var(--carvao); font-size: 0.9375rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; justify-self: start; padding-bottom: 2px; }
.voltar::before { content: "← "; }
.secao--galeria { padding-block: clamp(40px, 6vw, 80px); }
.outros-projetos { border-top: 1px solid var(--pedra); }
.outros-projetos .miolo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-block: clamp(32px, 5vw, 56px); }
.outro { display: grid; gap: 6px; text-decoration: none; }
.outro .rotulo { color: var(--taupe-texto); }
.outro .nome { font-family: var(--display); font-weight: 300; font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.15; }
.outro:hover .nome { color: var(--taupe-texto); }
.outro--proximo { text-align: right; }
.contato--curto .miolo { display: grid; gap: 18px; }
.contato--curto .botao { background: var(--creme); color: var(--carvao); }
.contato--curto .botao:hover { background: var(--taupe); }
.contato--curto .link-seta { color: var(--creme); }
.rotulo + h2, .rotulo + h3 { margin-top: 10px; }