/* Página de hospedagem (/hospedagem). Tokens, botões, topo, formulário e rodapé vêm de base.css. */

/* ── 1 · capa ───────────────────────────────────────── */
.capa { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; }
.capa-fundo, .capa-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.capa-fundo { z-index: -2; }
.capa-fundo img { object-fit: cover; object-position: 50% 40%; animation: respira 18s var(--saida) both; }
.capa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgb(26 18 11 / 0.35), rgb(26 18 11 / 0.82) 70%), linear-gradient(180deg, rgb(26 18 11 / 0.55), rgb(26 18 11 / 0.2) 40%, var(--madeira)); }
.capa-conteudo { padding: 7rem var(--gutter) 5rem; display: grid; justify-items: center; }
.capa-simbolo { width: clamp(110px, 18vw, 170px); margin-bottom: 1.6rem; filter: drop-shadow(0 6px 24px rgb(0 0 0 / 0.5)); }
.capa-nome { font-size: var(--texto-capa); letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 4px 30px rgb(0 0 0 / 0.45); }
.capa-lema { font: italic 400 clamp(1.3rem, 1rem + 1.4vw, 2.1rem)/1.3 var(--serifa); color: var(--creme); margin: 1rem 0 0.8rem; }
.capa-local { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ouro); margin-bottom: 2.6rem; }
.capa-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; }
@media (max-width: 479px) { .capa-nome { font-size: 2.35rem; letter-spacing: 0.08em; } }

/* ── 2 · projeto ────────────────────────────────────── */
.projeto { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; overflow-x: clip; }
.projeto-texto p:not(.sobretitulo) { color: var(--creme-suave); max-width: 34rem; }
.projeto-texto h2 { margin-bottom: 1.8rem; }
.destaques { list-style: none; margin: 2.4rem 0 0; padding: 2rem 0 0; border-top: 1px solid var(--linha); display: grid; gap: 1.4rem; }
.destaques li { display: flex; align-items: center; gap: 1rem; font: 500 1.35rem/1.2 var(--serifa); }
.destaques svg, .cartao svg { width: 2.4rem; height: 2.4rem; flex: none; fill: none; stroke: var(--ouro); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.projeto-foto { margin: 0; position: relative; }
.projeto-foto::before { content: ""; position: absolute; inset: 1.2rem -1.2rem -1.2rem 1.2rem; border: 1px solid var(--ouro); opacity: 0.5; }
.projeto-foto img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ── 3 · galeria ────────────────────────────────────── */
.galeria { background: var(--madeira-media); }
.mosaico { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
.mosaico-item { margin: 0; position: relative; overflow: hidden; min-height: 16rem; }
.mosaico-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--saida); }
.mosaico-item:hover img { transform: scale(1.06); }
.mosaico-largo img { object-position: 50% 78%; }
.mosaico-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.2rem 1rem; font: italic 500 1.2rem/1.2 var(--serifa); background: linear-gradient(transparent, rgb(26 18 11 / 0.85)); }
.mosaico-painel { display: flex; flex-direction: column; justify-content: flex-end; padding: 1.8rem; background: radial-gradient(circle at 80% 15%, rgb(201 169 110 / 0.18), transparent 55%), var(--madeira-alta); border: 1px solid var(--linha); }
.mosaico-painel-claro { background: var(--areia); color: var(--tinta-areia); border: 0; }
.painel-rotulo { font: 600 0.7rem/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--ouro); }
.mosaico-painel-claro .painel-rotulo { color: var(--ouro-escuro); }
.painel-frase { font: italic 500 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--serifa); margin: 0; }

/* ── 4 · comodidades ────────────────────────────────── */
.cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
.cartao { padding: 2rem 1.7rem; background: linear-gradient(160deg, var(--madeira-media), var(--madeira)); border: 1px solid var(--linha); transition: border-color var(--rapido), transform 400ms var(--saida); }
.cartao:hover { border-color: var(--ouro); transform: translateY(-4px); }
.cartao svg { stroke: var(--creme); margin-bottom: 1.4rem; }
.cartao h3 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.cartao p { color: var(--creme-suave); font-size: 0.92rem; margin: 0; }

/* ── 5 · localização (seção clara) ──────────────────── */
.localizacao { background: var(--areia); color: var(--tinta-areia); display: grid; gap: 3rem; align-items: center; }
.localizacao .sobretitulo, .localizacao h2 em { color: var(--ouro-escuro); }
.localizacao-texto > p:not(.sobretitulo) { max-width: 34rem; margin-top: 1.6rem; }
.lista-local { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.lista-local li { display: flex; gap: 0.9rem; align-items: baseline; font: 500 1.25rem/1.3 var(--serifa); }
.lista-local li::before { content: ""; width: 1.4rem; height: 1px; background: var(--ouro-escuro); flex: none; transform: translateY(-0.3rem); }
.mapa { margin: 0; }
.mapa svg { width: 100%; height: auto; display: block; box-shadow: 0 30px 60px -30px rgb(44 26 18 / 0.6); }
.mapa figcaption { font-size: 0.75rem; color: rgb(44 26 18 / 0.65); margin-top: 0.8rem; }

/* ── 6 · lançamento ─────────────────────────────────── */
.lancamento-grade { display: grid; gap: 1.2rem; }
.depoimento { margin: 0; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem); border: 1px solid var(--linha); }
.depoimento p { font: italic 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.25 var(--serifa); }
.depoimento footer { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ouro); }
.faixa { padding: clamp(2rem, 1.5rem + 2vw, 3.5rem); background: linear-gradient(135deg, var(--ouro-claro), var(--ouro)); color: var(--madeira); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.faixa-rotulo { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; }
.faixa-texto { font: 500 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.15 var(--serifa); margin-bottom: 1.8rem; }
.faixa .botao-ouro { background: var(--madeira); color: var(--ouro-claro); box-shadow: none; }
.faixa .botao-ouro:hover { background: var(--madeira-media); }

/* ── 7 · reserva ────────────────────────────────────── */
.reserva { position: relative; padding: var(--espaco-secao) var(--gutter); background: linear-gradient(rgb(26 18 11 / 0.55), rgb(26 18 11 / 0.75)), url("/img/fechamento-chale-1400.jpg") center / cover no-repeat; }
.reserva-cartao { max-width: 40rem; margin-inline: auto; padding: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem); background: rgb(44 26 18 / 0.45); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgb(245 240 235 / 0.18); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.7); }
.reserva-cartao h2 { margin-bottom: 0.6rem; }
.reserva-intro { color: var(--creme-suave); margin-bottom: 2rem; }

/* ── telas maiores ──────────────────────────────────── */
@media (min-width: 640px) {
  .mosaico { grid-template-columns: repeat(2, 1fr); }
  .mosaico-alto { grid-row: span 2; }
  .cartoes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .projeto { grid-template-columns: 55fr 45fr; }
  /* fachada alta à esquerda, interior largo ao lado, lareira como faixa inteira embaixo */
  .mosaico { grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: 15rem 15rem auto; grid-auto-flow: dense; }
  .mosaico-item { min-height: 0; }
  .mosaico-largo { grid-column: 2 / span 2; }
  .mosaico-painel-claro { grid-column: 1 / -1; padding-block: 2.4rem; }
  .cartoes { grid-template-columns: repeat(3, 1fr); }
  .localizacao { grid-template-columns: 1fr 1.1fr; }
  .lancamento-grade { grid-template-columns: 1.4fr 1fr; }
}
/* parallax só onde funciona bem (desktop) e com movimento permitido */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .reserva { background-attachment: fixed; }
}