/* Residencial Alpi — folhas de projeto em papel creme, Verde Alpi e terracota da telha.
   Sem fontes externas: Constantia/Bahnschrift quando o sistema tem (Windows), equivalentes locais nos demais. */

:root {
  --verde: #4a6868;
  --verde-esc: #2e4444;
  --terra: #b85c38;
  --creme: #f2efe8;
  --papel: #e9e3d6;
  --areia: #e2c8a4;
  --grafite: #262c2e;
  --cinza: #6b7472;
  --linha: rgba(38, 44, 46, .16);

  --serif: Constantia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --rotulo: Bahnschrift, "DIN Alternate", "DIN Condensed", "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --texto: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --margem: clamp(1rem, 4vw, 3.5rem);
  --largura: 82rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--creme);
  color: var(--grafite);
  font: 400 1.0625rem/1.6 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
::selection { background: var(--areia); color: var(--grafite); }

.pular { position: absolute; left: -999px; top: .5rem; background: var(--grafite); color: var(--creme); padding: .5rem 1rem; z-index: 50; }
.pular:focus { left: .5rem; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

.rotulo, .folha, dt, .marca-sub, .menu a, .aviso-me, .capa-selo, .botao, .link-seta, .planta text, .mapa-rot, .mapa-sub, .comodo-area {
  font-family: var(--rotulo);
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ topo */
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 2rem;
  padding: .85rem var(--margem);
  background: rgba(242, 239, 232, .92);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
@supports (backdrop-filter: blur(6px)) { .topo { backdrop-filter: blur(6px); } }
.topo.rolado { border-bottom-color: var(--linha); }
.marca { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; }
.marca img { align-self: center; width: 34px; height: 34px; }
.marca-nome { font: 400 1.7rem/1 var(--serif); color: var(--verde); }
.marca-sub { font-size: .62rem; color: var(--cinza); }
.menu { display: flex; gap: 1.6rem; margin-left: auto; }
.menu a { font-size: .7rem; text-decoration: none; color: var(--grafite); padding: .3rem 0; border-bottom: 1px solid transparent; }
.menu a:hover { border-bottom-color: var(--terra); }
.aviso-me {
  font-size: .68rem; text-decoration: none; color: var(--creme); background: var(--verde);
  padding: .65rem 1.05rem; border-radius: 999px; white-space: nowrap;
}
.aviso-me:hover { background: var(--verde-esc); }
@media (max-width: 960px) { .menu { display: none; } .aviso-me { margin-left: auto; } }
@media (max-width: 420px) { .marca-sub { display: none; } .aviso-me { padding: .55rem .8rem; letter-spacing: .14em; } }

/* ------------------------------------------------------------------ capa */
.capa {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: end; gap: clamp(1.5rem, 4vw, 4rem);
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) var(--margem) 0;
  min-height: calc(100svh - 64px);
}
.capa-texto { padding-bottom: clamp(3rem, 12vh, 9rem); }
.rotulo { font-size: .72rem; color: var(--terra); margin: 0 0 1.4rem; }
.capa h1 {
  font: 400 clamp(2.6rem, 6.4vw, 5.6rem)/.98 var(--serif);
  color: var(--verde); margin: 0 0 1.6rem; letter-spacing: -.012em;
}
.capa h1 em { font-style: italic; color: var(--terra); }
.capa-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 31rem; margin: 0 0 2rem; color: #3b4447; }
.capa-selo { display: inline-flex; align-items: center; gap: .8rem; font-size: .7rem; color: var(--cinza); margin: 0; }
.capa-selo span { background: var(--terra); color: var(--creme); padding: .45rem .8rem; border-radius: 999px; }
.capa-figura { margin: 0; align-self: end; position: relative; }
.hero-simbolo { width: 100%; height: auto; max-height: calc(100svh - 120px); overflow: visible; }
.hero-menino { fill: var(--terra); }
.capa-figura figcaption {
  max-width: 19rem; margin: 1rem 0 .4rem auto;
  font: italic 400 .92rem/1.4 var(--serif); color: var(--cinza); text-align: right;
}
.capa .faixas { grid-column: 1 / -1; margin: 0 calc(-1 * var(--margem)); }
@media (max-width: 820px) {
  .capa { grid-template-columns: 1fr; min-height: 0; }
  .capa-texto { padding-bottom: 0; }
  .capa-figura { max-width: 30rem; margin-left: auto; margin-right: auto; }
  .capa-figura figcaption { position: static; text-align: left; max-width: none; margin: .8rem 0 2.6rem; }
}

/* as tres faixas do guarda-corpo, de ponta a ponta */
.faixas { display: grid; gap: clamp(6px, 1.1vw, 14px); padding: 0; }
.faixas i { display: block; height: clamp(3px, .5vw, 6px); background: var(--verde); }
.faixas i:nth-child(2) { margin-right: 18%; }
.faixas i:nth-child(3) { margin-right: 44%; }
.faixas-claras i { background: var(--areia); }

/* ------------------------------------------------------------------ ficha */
.ficha { background: var(--verde); color: var(--creme); }
.ficha dl {
  max-width: var(--largura); margin: 0 auto; padding: 2.2rem var(--margem);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
}
.ficha div { border-left: 1px solid rgba(242, 239, 232, .28); padding-left: 1rem; }
.ficha dt { font-size: .62rem; color: var(--areia); order: 2; }
.ficha dd { margin: 0 0 .35rem; font: 400 clamp(2rem, 4vw, 3.3rem)/1 var(--serif); }
.ficha dd.dd-texto { font-style: italic; }
.ficha div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
@media (max-width: 760px) {
  .ficha dl { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; }
  .ficha div:last-child { grid-column: span 2; }
}

/* ------------------------------------------------------------------ secoes (folhas) */
.secao { max-width: var(--largura); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) var(--margem) 0; }
.secao-cab {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: 2rem; align-items: baseline;
  border-top: 1px solid var(--grafite); padding-top: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.folha { margin: 0; font-size: .66rem; color: var(--terra); }
.secao-cab h2 { margin: 0; font: 400 clamp(2rem, 4.4vw, 3.6rem)/1.05 var(--serif); color: var(--verde); }
.secao-lead { grid-column: 2; margin: .8rem 0 0; color: var(--cinza); }
@media (max-width: 640px) { .secao-cab { grid-template-columns: 1fr; } .secao-lead { grid-column: 1; } }
.grande { font: 400 clamp(1.45rem, 2.4vw, 2rem)/1.25 var(--serif); color: var(--verde); margin: 0 0 1rem; }
.pequeno { font-size: .86rem; color: var(--cinza); }
figure { margin: 0; }
figcaption { font: italic 400 .95rem/1.4 var(--serif); color: var(--cinza); margin-top: .6rem; }

/* 01 predio: grade assimetrica */
.predio-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.predio-a { grid-column: 1 / 8; grid-row: 1 / 3; }
.predio-a img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 11; }
.predio-nota { grid-column: 8 / 13; align-self: end; padding-bottom: 1rem; }
.predio-b { grid-column: 8 / 13; }
.predio-c { grid-column: 2 / 7; }
.predio-d { grid-column: 7 / 12; margin-top: 4rem; }
.predio-grade img { border-radius: 2px; }
@media (max-width: 900px) {
  .predio-a, .predio-nota, .predio-b, .predio-c, .predio-d { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
}

/* 02 apartamento: planta + comodo */
.apto-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.planta-caixa { position: sticky; top: 90px; }
.planta { width: 100%; height: auto; }
.planta-parede { fill: none; stroke: var(--grafite); stroke-width: 6; stroke-linejoin: miter; }
.comodo path { fill: var(--creme); stroke: var(--grafite); stroke-width: 2.4; transition: fill .25s; }
.comodo text { font-size: 13px; fill: var(--grafite); text-anchor: middle; pointer-events: none; letter-spacing: .14em; }
.comodo { cursor: pointer; }
.comodo:hover path, .comodo:focus-visible path { fill: var(--areia); }
.comodo.ativo path { fill: var(--verde); }
.comodo.ativo text { fill: var(--creme); }
.comodo:focus-visible { outline: none; }
.comodo:focus-visible path { stroke: var(--terra); stroke-width: 4; }
.planta-porta { fill: var(--creme); }
.planta-janela { fill: var(--creme); stroke: var(--verde); stroke-width: 2; }
.planta-nota { font: italic 400 15px var(--serif); fill: var(--cinza); text-anchor: middle; }
.planta-seta { stroke: var(--cinza); stroke-width: 1.2; fill: none; }
.planta-legenda { font-size: .8rem; color: var(--cinza); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.leg { display: inline-block; width: 18px; height: 7px; }
.leg-janela { border: 2px solid var(--verde); }
.leg-porta { background: var(--creme); border: 1px dashed var(--grafite); margin-left: .6rem; }

.comodo-card { margin: 0 0 3rem; }
.comodo-card img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 2px; }
.comodo-card h3 { font: 400 clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--serif); color: var(--verde); margin: 1.2rem 0 .3rem; }
.comodo-area { font-size: .66rem; color: var(--terra); margin: 0 0 .8rem; text-transform: none; letter-spacing: .14em; }
.comodo-card p { max-width: 34rem; margin: 0; }
.js .comodos .comodo-card { display: none; margin: 0; }
.js .comodos .comodo-card.ativo { display: block; animation: surgir .45s ease both; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .comodos .comodo-card.ativo { animation: none; } }
@media (max-width: 860px) { .apto-grade { grid-template-columns: 1fr; } .planta-caixa { position: static; max-width: 28rem; } }

/* 03 contas */
.contas { max-width: none; background: var(--papel); padding-bottom: clamp(4rem, 9vw, 7rem); margin-top: clamp(4rem, 10vw, 8rem); padding-top: clamp(3rem, 7vw, 5rem); }
.contas > * { max-width: var(--largura); margin-left: auto; margin-right: auto; }
.contas-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); }
.contas-frase { font: 400 clamp(1.9rem, 4vw, 3.3rem)/1.12 var(--serif); color: var(--verde); margin: 0; grid-row: span 2; }
.contas-frase em { color: var(--terra); }
.contas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contas h3 { font-family: var(--rotulo); font-weight: 400; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cinza); margin: 0 0 .8rem; }
.contas ul { list-style: none; margin: 0; padding: 0; }
.contas li { font: 400 1.2rem/1.35 var(--serif); padding: .55rem 0; border-top: 1px solid var(--linha); }
.contas .nao li { text-decoration: line-through; text-decoration-color: var(--terra); text-decoration-thickness: 2px; color: var(--cinza); }
.contas-nota { margin: 0; color: var(--cinza); align-self: end; }
@media (max-width: 820px) { .contas-grade { grid-template-columns: 1fr; } .contas-frase { grid-row: auto; } }
@media (max-width: 480px) { .contas-colunas { grid-template-columns: 1fr; } }

/* 04 lugar */
.lugar-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.mapa svg { width: 100%; height: auto; background: var(--papel); border-radius: 2px; }
.mapa-serra { fill: #dcd4c3; }
.mapa-serra-nome { font: italic 400 14px var(--serif); fill: var(--cinza); }
.mapa-anel { fill: none; stroke: var(--verde); stroke-width: 1; stroke-dasharray: 3 6; opacity: .55; }
.mapa-rua { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; }
.mapa-br { fill: none; stroke: var(--areia); stroke-width: 14; stroke-linecap: round; }
.mapa-ponto circle { fill: var(--terra); }
.mapa-ponto .miolo { fill: var(--creme); }
.mapa-marco circle { fill: var(--verde); }
.mapa-rot { font-size: 12px; fill: var(--grafite); }
.mapa-alpi { fill: var(--terra); }
.mapa-sub { font-size: 10px; fill: var(--cinza); letter-spacing: .12em; text-transform: none; }
.distancias { list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: d; }
.distancias li { display: grid; grid-template-columns: 7.5rem 1fr; align-items: baseline; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--linha); }
.distancias strong { font: 400 2rem/1 var(--serif); color: var(--verde); }
.endereco { font-size: .92rem; color: var(--cinza); }
.link-seta { font-size: .7rem; color: var(--terra); text-decoration: none; border-bottom: 1px solid var(--terra); padding-bottom: .2rem; }
.link-seta::after { content: " \2197"; letter-spacing: 0; }
@media (max-width: 860px) { .lugar-grade { grid-template-columns: 1fr; } }

/* 05 filme */
.filme-grade { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.filme-video { width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--grafite); border-radius: 4px; }
@media (max-width: 760px) { .filme-grade { grid-template-columns: 1fr; } .filme-video { max-width: 22rem; } }

/* chamada */
.chamada {
  position: relative; overflow: hidden;
  margin-top: clamp(5rem, 11vw, 9rem);
  background: var(--verde); color: var(--creme);
  padding: clamp(4rem, 9vw, 7rem) var(--margem);
  text-align: left;
}
.chamada > * { max-width: 46rem; }
.chamada .faixas { position: absolute; top: 0; left: 0; right: 0; }
.chamada .rotulo { color: var(--areia); margin-top: 1.5rem; }
.chamada h2 { font: 400 clamp(2rem, 4.6vw, 3.6rem)/1.08 var(--serif); margin: 0 0 1rem; }
.chamada-botoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.botao { display: inline-block; font-size: .72rem; text-decoration: none; padding: .95rem 1.4rem; border-radius: 999px; background: var(--creme); color: var(--verde-esc); }
.botao:hover { background: var(--areia); }
.botao-linha { background: transparent; color: var(--creme); border: 1px solid rgba(242, 239, 232, .55); text-transform: none; letter-spacing: .06em; }
.botao-linha:hover { background: rgba(242, 239, 232, .1); }

/* rodape: carimbo de prancha */
.rodape { padding: 3rem var(--margem) 2rem; max-width: var(--largura); margin: 0 auto; }
.carimbo { display: grid; grid-template-columns: auto 1fr; border: 1.5px solid var(--grafite); }
.carimbo-marca { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.4rem; border-right: 1.5px solid var(--grafite); font: 400 1.35rem var(--serif); color: var(--verde); }
.carimbo dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.carimbo dl div { padding: .8rem 1rem; border-left: 1px solid var(--linha); }
.carimbo dl div:first-child { border-left: 0; }
.carimbo dt { font-size: .56rem; color: var(--cinza); margin-bottom: .25rem; }
.carimbo dd { margin: 0; font-size: .86rem; }
.rodape-fim { font-size: .78rem; color: var(--cinza); margin: 1rem 0 0; }
@media (max-width: 900px) {
  .carimbo { grid-template-columns: 1fr; }
  .carimbo-marca { border-right: 0; border-bottom: 1.5px solid var(--grafite); }
  .carimbo dl { grid-template-columns: 1fr 1fr; }
  .carimbo dl div:nth-child(3) { border-left: 0; }
  .carimbo dl div:nth-child(n+3) { border-top: 1px solid var(--linha); }
}

/* entrada suave ao rolar (so com JS e sem preferencia por menos movimento) */
.js .revela { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js .revela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revela { opacity: 1; transform: none; transition: none; } }

@media print {
  .topo, .chamada, .filme { display: none; }
  body { background: #fff; }
}