/* =========================================================
   Sonho — Site Modelo
   Traduzido do Figma "Site Modelo" (frame 1395 x 4136)
   Estrutura: Hero → Fotos → Avaliação → Final
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --preto: #000;
  --branco: #fff;
  --texto-suave: rgba(255, 255, 255, .7);
  --texto-fraco: rgba(255, 255, 255, .6);
  --linha: rgba(255, 255, 255, .28);
  --btn-bg: #d9d9d9;
  --pill-bg: #2d2d2d;

  --raio-foto: 35px;
  --raio-card: 30px;

  /* largura de referencia do Figma: 1395px */
  --site: 1395px;

  /* escala tipografica (min, fluido, max do Figma) */
  --fs-titulo: clamp(1.5rem, 2.753vw, 2.4rem);      /* 38.4px */
  --fs-sub: clamp(1rem, 1.72vw, 1.5rem);            /* 24px   */
  --fs-h3: clamp(1.35rem, 2.294vw, 2rem);           /* 32px   */
  --fs-hero: clamp(1.3rem, 1.95vw, 1.7rem);         /* barra do hero, reduzida */
  --fs-btn: clamp(.875rem, 1.226vw, 1.069rem);      /* 17.1px */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, p, figure, blockquote, ul {
  margin: 0;
  padding: 0;
}

ul { list-style: none; }

img, svg {
  display: block;
  max-width: 100%;
}

html { scroll-behavior: smooth; }

body {
  background: var(--preto);
  color: var(--branco);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  letter-spacing: -.05em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Botao ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(36px, 3.01vw, 42px);
  padding: 0 clamp(16px, 1.65vw, 23px);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--preto);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: -.05em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}

.btn:hover { background: var(--branco); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ---------- Titulos de secao ---------- */
.section__title {
  font-size: var(--fs-titulo);
  text-align: center;
  padding-inline: 24px;
}

.section__sub {
  max-width: 1030px;
  margin-inline: auto;
  padding-inline: 24px;
  font-size: var(--fs-sub);
  color: var(--texto-suave);
  text-align: center;
}


/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  /* o hero e o unico bloco full-bleed; o resto do site segue em --site */
}

/* recorta o excedente da composicao */
.hero__media {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
}

/* a proporcao 1395x833 precisa ser mantida: o SVG do "SONHO" ja
   vem com a silhueta da casa recortada e so encaixa nesse ratio */
/* cresce ate cobrir a viewport pelos dois lados: o que sobrar de largura
   ou de altura e cortado pelo overflow, mantendo o encaixe do "SONHO" */
.hero__stage {
  position: relative;
  flex: none;
  aspect-ratio: 1395 / 833;
  width: max(100%, calc(100vh * 1395 / 833));
  width: max(100%, calc(100svh * 1395 / 833));
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__title {
  position: absolute;
  left: 25.25%;
  top: 16.46%;
  width: 50.17%;
  height: auto;
}

/* =========================================================
   ANIMACAO DE ENTRADA
   Feita com @keyframes + fill-mode em vez de um estado inicial
   escondido no CSS: se a animacao for desligada (motion reduzido,
   navegador antigo), tudo aparece normalmente em vez de sumir.
   ========================================================= */

/* a imagem e o "SONHO" escalam juntos — separa-los desalinharia
   o recorte da casa no meio da animacao */
@keyframes hero-entrada {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* a nav ja usa translateX(-50%) para centralizar, entao a animacao
   dela precisa carregar esse deslocamento nos dois keyframes */
@keyframes surgir-nav {
  from { opacity: 0; transform: translate(-50%, -14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.hero__stage {
  animation: hero-entrada 1.8s cubic-bezier(.16, 1, .3, 1) .1s both;
}

.nav {
  animation: surgir-nav .8s cubic-bezier(.22, 1, .36, 1) 1s both;
}

.hero__bar {
  animation: surgir .9s cubic-bezier(.22, 1, .36, 1) 1.2s both;
}


/* Fora desta faixa de proporcao, cobrir a viewport cortaria o "SONHO":
   janela muito baixa e larga come o topo do titulo, janela em retrato
   come as laterais. Nesses casos a composicao volta a mandar na altura. */
@media (max-aspect-ratio: 17 / 20), (min-aspect-ratio: 12 / 5) {
  .hero__media { height: auto; min-height: 0; }
  .hero__stage { width: 100%; }
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.85) 100%);
  pointer-events: none;
}

.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 34%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.92) 55%, #000 92%);
  pointer-events: none;
}

/* --- Nav / menu expansivel --- */
.nav {
  --nav-w: min(214px, calc(100vw - 32px));
  --panel-w: min(700px, calc(100vw - 32px));

  position: absolute;
  z-index: 3;
  top: clamp(14px, 2vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--nav-w);
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--pill-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  overflow: hidden;
  transition:
    width .55s cubic-bezier(.22, 1, .36, 1),
    padding .55s cubic-bezier(.22, 1, .36, 1),
    border-radius .55s cubic-bezier(.22, 1, .36, 1),
    background-color .4s ease,
    border-color .4s ease;
}

.nav[data-open="true"] {
  width: var(--panel-w);
  padding: 12px;
  border-radius: 20px;
  background: rgba(28, 28, 30, .88);
  border-color: rgba(255, 255, 255, .1);
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 28px;
}

.nav__brand,
.nav__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--branco);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.nav__brand img { width: 20px; height: auto; }
.nav__brand:hover { opacity: .8; }

/* os dois rotulos ficam empilhados na mesma celula para fazer crossfade */
.nav__toggle { display: grid; }

.nav__toggle-state {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
  transition: opacity .3s ease;
}

.nav__toggle-state img { width: 12px; height: 12px; }
.nav__x { font-size: 15px; line-height: 1; }

.nav__toggle-state--close { opacity: 0; visibility: hidden; color: var(--texto-suave); }
.nav[data-open="true"] .nav__toggle-state--open  { opacity: 0; visibility: hidden; }
.nav[data-open="true"] .nav__toggle-state--close { opacity: 1; visibility: visible; }
.nav__toggle:hover .nav__toggle-state { opacity: .75; }

/* --- Painel com as casas --- */
/* grid 0fr -> 1fr anima a altura sem precisar medir nada em JS */
.nav__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.22, 1, .36, 1);
}

.nav[data-open="true"] .nav__panel { grid-template-rows: 1fr; }

.nav__panel-inner { overflow: hidden; }

.houses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 14px;
  /* largura travada para o conteudo nao refluir durante a expansao */
  width: calc(var(--panel-w) - 24px);
}

.house {
  position: relative;
  display: block;
  aspect-ratio: 230 / 140;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid transparent;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease, border-color .25s ease;
}

.nav[data-open="true"] .house { opacity: 1; transform: none; }
.nav[data-open="true"] li:nth-child(1) .house { transition-delay: .16s, .16s, 0s; }
.nav[data-open="true"] li:nth-child(2) .house { transition-delay: .24s, .24s, 0s; }
.nav[data-open="true"] li:nth-child(3) .house { transition-delay: .32s, .32s, 0s; }

.house img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.house::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.75));
  pointer-events: none;
}

.house__name {
  position: absolute;
  z-index: 1;
  left: 12px;
  bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--branco);
}

.house:hover { border-color: rgba(255, 255, 255, .35); }
.house:hover img { transform: scale(1.05); }
.house:focus-visible { border-color: var(--branco); outline: none; }

/* --- Barra inferior do hero --- */
.hero__bar {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(40px, 7.5%, 104px);
}

/* caixa centralizada: sem o limite, o space-between espalharia os itens
   por toda a largura da tela agora que o hero e full-bleed */
/* space-between reparte a sobra em vaos IGUAIS entre os tres grupos.
   O grid de colunas simetricas centralizava os icones no eixo da barra,
   mas como o titulo e largo e encosta na esquerda, sobrava um vao
   minusculo antes dos icones e um enorme antes do botao. */
.hero__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2.4vw, 36px);
  width: min(100% - 48px, 900px);
  margin-inline: auto;
  padding-top: clamp(16px, 2vw, 28px);
  border-top: 1px solid var(--linha);
}

/* botao do hero um pouco menor que o das demais secoes */
.hero__bar .btn {
  height: clamp(32px, 2.5vw, 36px);
  padding: 0 clamp(14px, 1.35vw, 19px);
  font-size: clamp(.8rem, 1vw, .9rem);
}

.hero__headline {
  font-size: var(--fs-hero);
  color: var(--texto-suave);
  line-height: 1.15;
  white-space: nowrap; /* as duas linhas vem do <br>, como no Figma */
}

/* --- Comodidades --- */
.amenities {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 1.9vw, 27px);
}

.amenities li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, .8vw, 11px);
}

/* Sprite: os 4 icones vivem num unico SVG (o frame 9:4 exportado do
   Figma). Cada .ico recorta sua regiao via --rx/--ry/--rw/--rh, que
   sao exatamente as coordenadas do no no Figma. */
.ico {
  --icon-h: clamp(24px, 2.5vw, 35px);
  --s: calc(var(--icon-h) / var(--rh));
  display: block;
  width: calc(var(--rw) * var(--s));
  height: var(--icon-h);
  background-image: url(../assets/icons/amenities.svg);
  background-repeat: no-repeat;
  background-size: calc(532 * var(--s)) calc(127 * var(--s));
  background-position: calc(var(--rx) * var(--s) * -1) calc(var(--ry) * var(--s) * -1);
}

.ico--cama          { --rx: 29;     --ry: 24.14; --rw: 55.34; --rh: 46.44; }
.ico--aquecedor     { --rx: 117.30; --ry: 24.17; --rw: 29.32; --rh: 46.41; }
.ico--churrasqueira { --rx: 179.53; --ry: 24.14; --rw: 44.14; --rh: 46.44; }
.ico--wifi          { --rx: 257;    --ry: 24;    --rw: 61;    --rh: 46.58; }

.amenities span {
  font-size: clamp(8px, .62vw, 9px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--texto-suave);
  white-space: nowrap;
}


/* =========================================================
   FOTOS
   ========================================================= */
/* sem max-width: o carrossel corre de borda a borda */
.gallery {
  padding: clamp(56px, 8.39vw, 117px) 0 clamp(72px, 11.5vw, 161px);
}

.marquee {
  --gap: clamp(8px, 1.15vw, 16px);
  overflow: hidden;
  margin-bottom: clamp(56px, 10.6vw, 148px);
  /* dissolve as pontas em vez de cortar a foto no meio */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
}

/* so anima depois que o JS clonou os conjuntos; sem JS fica a faixa parada */
.marquee__track[data-animado="true"] {
  animation: correr 32s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes correr {
  to { transform: translateX(var(--deslocamento, -25%)); }
}

.marquee li {
  flex: none;
  height: clamp(150px, 18.8vw, 262px);
  aspect-ratio: var(--ar);
  /* margem no item, nao gap na faixa: assim o ultimo item tambem
     carrega o espacamento e o ciclo fecha sem sobra de um gap */
  margin-right: var(--gap);
  border-radius: var(--raio-foto);
  overflow: hidden;
}

.marquee img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery .section__title { margin-bottom: clamp(16px, 1.5vw, 21px); }


/* =========================================================
   AVALIACAO
   ========================================================= */
/* full-bleed como o hero. Aqui nao ha o problema de encaixe do "SONHO":
   a curva e o texto sao posicionados em %, entao acompanham a secao
   sozinhos e basta soltar a largura. */
.review {
  position: relative;
  aspect-ratio: 1395 / 833;
  min-height: 420px;
  overflow: hidden;
}

.review__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* forma preta curva que cobre o canto superior esquerdo */
.review__curve {
  position: absolute;
  left: 29.21%;
  top: 24.36%;
  width: 79.96%;
  height: 66.8%;
  transform: translate(-50%, -50%) rotate(5.17deg);
  pointer-events: none;
}

.review__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(115,115,115,0));
  pointer-events: none;
}

.review__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 29%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), #000 88%);
  pointer-events: none;
}

.review__content {
  position: absolute;
  z-index: 2;
  left: 5.3%;
  top: 10.5%;
  width: min(48%, 669px);
}

/* mantem a proporcao do Figma (24px em 1395 = 1.72vw), mas com teto
   maior: a secao agora e full-bleed e cresce junto com a tela */
.review__content blockquote {
  font-size: clamp(1.05rem, 1.72vw, 1.85rem);
  line-height: 1.25;
  color: var(--branco);
}

.review__stars {
  width: clamp(80px, 9.6vw, 165px);
  height: auto;
  margin-top: clamp(8px, 1.2vw, 17px);
}

/* centralizado por margin, nao por transform: o transform seria
   sobrescrito pelo translateY(-1px) do :hover e o botao daria um pulo
   lateral em vez de subir como os demais */
.review__btn {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 11%;
  width: fit-content;
  margin-inline: auto;
}


/* =========================================================
   FINAL
   ========================================================= */
.closing {
  max-width: var(--site);
  margin-inline: auto;
  padding: clamp(56px, 5.8vw, 81px) clamp(16px, 4.2vw, 58px) clamp(72px, 10vw, 150px);
}

.closing .section__title { margin-bottom: clamp(16px, 1.5vw, 21px); }

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(56px, 13.4vw, 187px);
}

.feature--reverse { margin-top: clamp(48px, 10.7vw, 149px); }
.feature--reverse .feature__media { order: 2; }
.feature--reverse .feature__text  { order: 1; }

/* --- imagem com vinheta (o "Subtract" do Figma) --- */
.feature__media {
  position: relative;
  border-radius: var(--raio-card);
  overflow: hidden;
  aspect-ratio: 640 / 480;
}

.feature--reverse .feature__media { aspect-ratio: 652 / 367; }

.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 56%, rgba(0,0,0,.95) 100%);
  pointer-events: none;
}

/* --- coluna de texto + risco vertical --- */
.feature__text { position: relative; }

.feature__text::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: clamp(110px, 14vw, 196px);
  background: var(--linha);
}

.feature__text::before { left: clamp(-28px, -2.6vw, -12px); }
.feature--reverse .feature__text::before { left: auto; right: clamp(-28px, -2.6vw, -12px); }

.feature__text h3 {
  font-size: var(--fs-h3);
  margin-bottom: clamp(10px, 1.1vw, 16px);
}

.feature__text p {
  max-width: 431px;
  font-size: var(--fs-sub);
  line-height: 1.22;
  color: var(--texto-fraco);
}

.feature__text .btn { margin-top: clamp(20px, 3.4vw, 48px); }


/* =========================================================
   RODAPE
   ========================================================= */
.footer {
  padding-bottom: clamp(56px, 7vw, 96px);
  text-align: center;
}

/* hairline que dissolve nas pontas, como as bordas do carrossel */
.footer::before {
  content: "";
  display: block;
  height: 1px;
  width: min(100% - 48px, 1100px);
  margin: 0 auto clamp(36px, 4.5vw, 60px);
  background: linear-gradient(to right, transparent, var(--linha), transparent);
}

.footer__credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  padding-inline: 24px;
}

/* rotulo pequeno e espacado contrastando com o nome grande e apertado */
.footer__label {
  font-size: clamp(10px, .8vw, 11px);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.footer__name {
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--branco);
}


/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* sem animation-name os elementos voltam ao estado normal, visiveis */
  .hero__stage,
  .nav,
  .hero__bar,
  .marquee__track[data-animado="true"] { animation: none; }

  .nav,
  .nav__panel,
  .nav__toggle-state,
  .house,
  .house img,
  .btn {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

/* Tablet: aproxima a composicao do hero para nao ficar baixa demais */
@media (max-width: 900px) {
  /* em tela estreita, cobrir a altura cortaria as laterais do "SONHO";
     entao a composicao volta a mandar na altura */
  .hero__media { height: auto; min-height: 0; }
  .hero__stage { width: 150%; }

  .hero__bar { position: static; }

  .hero__bar-inner {
    display: flex; /* sai do grid de 3 colunas do desktop */
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    margin-inline: 24px;
    padding-top: 28px;
  }

  .hero__headline { white-space: normal; }

  .feature,
  .feature--reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .feature--reverse .feature__media { order: 0; }
  .feature--reverse .feature__text  { order: 0; }

  .feature__text::before,
  .feature--reverse .feature__text::before { display: none; }

  .review__content { top: 8%; width: min(82%, 669px); }
}

/* Celular */
@media (max-width: 600px) {
  .hero__stage { width: 170%; }

  /* tres cards lado a lado ficariam estreitos demais */
  .houses { grid-template-columns: 1fr; }
  .house { aspect-ratio: 16 / 6; }

  .review { aspect-ratio: 3 / 4; }
  .review__photo { object-position: 50% 60%; }
  .review__curve { display: none; }
  .review__tint { background: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.15) 55%); }
  .review__content { left: 6%; width: 88%; }

  .amenities { gap: 16px; }
}