/* ============================================================================
   SUNSET SERRA · SITE V2 — SEÇÕES
   Uma regra por seção da página. Componentes ficam em componentes.css.
============================================================================ */

.sec { padding-block: var(--sec-y); }
.sec-cab { grid-column: 1 / -1; max-width: var(--medida); margin-bottom: var(--e-5); }
.sec-pedra { background: var(--surf-pedra); }

/* fio de horizonte entre seções — separador, não decoração ruidosa */
.horizonte {
  position: relative; height: 1px;
  background: var(--linha);
  max-width: var(--grid-max);
  margin-inline: var(--margem);
}
@media (min-width: 1352px) { .horizonte { margin-inline: auto; } }
.horizonte::after {
  content: ""; position: absolute; left: 0; top: 0;
  height: 1px; width: 64px; background: var(--ambar);
}

/* ---------------------------------------------------------------- HERO --- */
.hero {
  position: relative;
  min-height: max(100svh, 620px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--surf-1);
}
.hero picture.fundo { position: absolute; inset: 0; z-index: var(--z-fundo); display: block; }
.hero img.fundo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: var(--z-fundo);
}
/* dois scrims: o vertical ancora o bloco inferior, o horizontal abre a zona de
   leitura à esquerda e deixa o letreiro do portal respirar à direita */
.hero::after  { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scrim-hero); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scrim-hero-h); }

.hero .conteudo {
  position: relative; z-index: var(--z-conteudo);
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding: 0 var(--margem) clamp(var(--e-5), 8vh, var(--e-6));
}
.hero h1 {
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -.015em;
  max-width: 13ch;
  margin: 0 0 var(--e-4);
}
.hero .lead { max-width: 44ch; margin: 0 0 var(--e-4); }
.hero .ctas { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.hero .selo-hero { margin-top: var(--e-4); display: block; }

/* CELULAR — a arte do portal é bloco, não fundo: o recorte 4:5 aparece inteiro
   e o texto pousa abaixo, em superfície sólida. Regra do arquiteto: nunca cobrir
   o letreiro com copy, botão ou selo. */
@media (max-width: 767px) {
  .hero { display: block; min-height: 0; background: var(--bg); }
  .hero picture.fundo { position: static; width: 100%; }
  .hero img.fundo { position: static; width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .hero::before, .hero::after { content: none; }
  .hero .conteudo { padding: var(--e-5) var(--margem) var(--e-5); }
  .hero h1 { max-width: 15ch; }
  .hero .lead { max-width: 100%; }
  .hero .overline { display: none; }   /* a placa já diz o nome — não repetir */
  .hero .ctas .btn { width: 100%; }
}

/* -------------------------------------------------------- VISÃO GERAL --- */
/* Três fatos confirmados, lado a lado. É o bloco dos 10 segundos. */
.fatos {
  grid-column: 1 / -1;
  display: grid; gap: var(--gutter);
  grid-template-columns: 1fr;
  margin-bottom: var(--e-5);
}
@media (min-width: 640px) { .fatos { grid-template-columns: repeat(3, 1fr); } }
.fato {
  border-top: 1px solid var(--linha);
  padding-top: var(--e-3);
  display: grid; gap: var(--e-1);
}
.fato b { font: 500 var(--t-h3) var(--f-display); color: var(--texto); }
.fato span { font-size: var(--t-caption); color: var(--texto-3); line-height: 1.55; }

/* Três caminhos comerciais — casa, hotel, visita. */
.caminhos { grid-column: 1 / -1; display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 768px) { .caminhos { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------ EDITORIAL --- */
/* Texto + mídia, alternando o lado. Usado por Casas e Hotel. */
.ed { align-items: center; row-gap: var(--e-4); }
.ed .texto { grid-column: 1 / -1; }
.ed .midia { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .ed .texto { grid-column: 1 / span 5; }
  .ed .midia { grid-column: 7 / -1; }
  .ed.inverte .texto { grid-column: 8 / -1; order: 2; }
  .ed.inverte .midia { grid-column: 1 / span 6; order: 1; }
}
.ed .texto > * + * { margin-top: var(--e-3); }
.ed .lista { list-style: none; display: grid; gap: var(--e-2); }
.ed .lista li {
  position: relative; padding-left: var(--e-4);
  font-size: var(--t-caption); color: var(--texto-2); line-height: 1.6;
}
.ed .lista li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 8px; height: 1px; background: var(--ambar);
}

/* --------------------------------------------------------- EXPERIÊNCIAS --- */
/* Seleção editorial curta. Sem filtros: a primeira camada não pede escolha. */
.galeria { grid-column: 1 / -1; display: grid; gap: var(--e-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .galeria { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } }
@media (min-width: 1024px) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.galeria .cel { aspect-ratio: 4 / 5; }
@media (min-width: 640px) { .galeria .cel { aspect-ratio: 16 / 11; } }
/* a primeira célula ocupa o dobro no desktop — hierarquia sem mais um filtro */
@media (min-width: 1024px) {
  .galeria .cel:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* --------------------------------------------------------- LOCALIZAÇÃO --- */
.loc { grid-column: 1 / -1; display: grid; gap: var(--e-5); }
@media (min-width: 1024px) { .loc { grid-template-columns: 1fr 1fr; align-items: start; } }
.distancias { list-style: none; max-width: var(--medida); }
.distancias li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--linha);
}
.distancias li b { font-weight: 500; color: var(--texto); font-size: var(--t-caption); }
.distancias li span {
  font: 600 var(--t-body) var(--f-display);
  font-variant-numeric: tabular-nums;
  color: var(--ambar-luz); white-space: nowrap;
}

/* ------------------------------------------------------------ CONVERSAR --- */
#conversar { padding-bottom: var(--e-6); }

/* --------------------------------------------------- SANGRA (imagem cheia) --- */
.sangra { position: relative; overflow: hidden; background: var(--surf-1); }
.sangra img { width: 100%; height: min(60svh, 520px); object-fit: cover; }
.sangra .scrim { position: absolute; inset: 0; background: var(--scrim-media); }