/* =============================================================================
   Vista Lago Homes — landing page
   CSS puro, sem framework. Organização:
     1. Tokens            5. Hero
     2. Reset / base      6. Sobre
     3. Utilitários       7. Vídeo
     4. Header / nav      8. Localização
                          9. Contato   10. Footer   11. Responsivo
   ========================================================================== */

/* ----------------------------------------------------------- 1. TOKENS -- */

:root{
  --color-dark:       #262b21;  /* logo, headings, nav, overlay do hero */
  --color-gold:       #ab8746;  /* botões preenchidos, ícones, detalhes */
  --color-gold-light: #cdb488;  /* "HOMES", filetes decorativos */
  --color-cream:      #f8f6f2;  /* fundo das seções claras */
  --color-cream-alt:  #eae8e4;  /* fundo da seção de contato */
  --color-text-body:  #55534d;  /* parágrafos */
  --color-border:     #bbbbbb;  /* bordas de cards e inputs */
  --color-white:      #ffffff;
  --color-error:      #b3452e;
  --color-success:    #4f7043;

  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --container-max: 1160px;
  --radius-sm: 4px;
  --section-padding-y: 80px;
  --header-h: 72px;

  --ease: 220ms ease;
}

/* ------------------------------------------------------ 2. RESET/BASE -- */

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
  -webkit-text-size-adjust:100%;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  color:var(--color-text-body);
  background:var(--color-white);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

h1,h2,h3{ font-family:var(--font-serif); color:var(--color-dark); margin:0; }

:focus-visible{
  outline:2px solid var(--color-gold);
  outline-offset:3px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--color-dark);
  color:#fff;
  padding:12px 20px;
  border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }

/* ------------------------------------------------- 3. UTILITÁRIOS -- */

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:24px;
}

.section{ padding-block:var(--section-padding-y); }
.section-cream{ background:var(--color-cream); }
.section-contact{ background:var(--color-cream-alt); }

.section-title{
  font-size:34px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.005em;
}
.section-title-center{ text-align:center; }

.title-rule{
  display:block;
  width:20px;
  height:3px;
  background:var(--color-gold);
  margin:16px 0 24px;
}
.title-rule-center{ margin-inline:auto; }
.title-rule-gold{ background:var(--color-gold-light); }

.eyebrow{
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-gold);
  margin:0 0 16px;
}

/* botões */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:500;
  line-height:1;
  padding:15px 32px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  cursor:pointer;
  text-align:center;
  transition:background-color var(--ease), color var(--ease),
             border-color var(--ease), transform 150ms ease;
}
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

.btn-solid{
  background:var(--color-gold);
  border-color:var(--color-gold);
  color:var(--color-white);
}
.btn-solid:hover{ background:#95743a; border-color:#95743a; }

.btn-outline-light{
  background:transparent;
  border-width:2px;
  border-color:rgba(255,255,255,.85);
  color:var(--color-white);
}
.btn-outline-light:hover{ background:rgba(255,255,255,.15); border-color:#fff; }

.btn-sm{ padding:11px 24px; font-size:14px; }
.btn-block{ width:100%; }

/* --------------------------------------------------- 4. HEADER / NAV -- */

.site-header{
  position:sticky;
  top:0;
  z-index:80;
  height:var(--header-h);
  background:var(--color-white);
  transition:box-shadow var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 1px 14px rgba(38,43,33,.10); }

.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.logo img{ height:42px; width:auto; }

/* lockup alternativo em texto puro (ver comentário no index.html) */
.logo-text{ display:block; text-align:center; line-height:1; }
.logo-name{
  display:block;
  font-family:var(--font-serif);
  font-size:22px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-dark);
}
.logo-sub{
  display:block;
  margin-top:5px;
  padding-top:5px;
  border-top:1px solid var(--color-gold-light);
  font-family:var(--font-sans);
  font-size:10px;
  font-weight:500;
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--color-gold-light);
}

.main-nav ul{
  display:flex;
  align-items:center;
  gap:40px;
  list-style:none;
  margin:0;
  padding:0;
}
.main-nav a{
  display:inline-block;
  font-size:15px;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--color-dark);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color var(--ease), border-color var(--ease);
}
.main-nav a:hover{ color:var(--color-gold); border-bottom-color:var(--color-gold); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:40px;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  margin-inline:auto;
  background:var(--color-dark);
  transition:transform var(--ease), opacity 150ms ease;
}

/* ------------------------------------------------------------ 5. HERO -- */

.hero{
  position:relative;
  min-height:540px;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  /* 38% no eixo Y: a faixa do hero é muito mais larga que alta, então o
     "cover" corta bastante na vertical. Esse valor mantém as fachadas de
     dois andares no enquadramento em vez de centralizar nos telhados. */
  background:url("../assets/img/hero.jpeg") center 38% / cover no-repeat;
}

/* Overlay escuro da esquerda (opaco) para a direita (transparente).
   Mantém contraste AA do texto branco sobre a foto. */
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    100deg,
    rgba(38,43,33,.94) 0%,
    rgba(38,43,33,.88) 24%,
    rgba(38,43,33,.58) 42%,
    rgba(38,43,33,.18) 58%,
    rgba(38,43,33,0)  72%
  );
}

.hero-inner{
  position:relative;
  z-index:2;
  padding-block:72px;
}

.hero-title{
  font-size:42px;
  font-weight:500;
  line-height:1.12;
  color:var(--color-white);
  margin:0 0 20px;
}

.hero-lead{
  max-width:420px;
  font-size:16px;
  line-height:1.68;
  color:rgba(255,255,255,.9);
  margin:0 0 34px;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; }

/* ----------------------------------------------------------- 6. SOBRE -- */

.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px;
  align-items:stretch;   /* a foto acompanha a altura da coluna de texto */
}

.about-media{ margin:0; }

/* A foto é 16:9 e a coluna de texto é mais alta que isso, então o object-fit
   preenche a altura recortando as laterais em vez de deixar sobra vertical. */
.about-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius-sm);
}

.about-text{ margin:0; font-size:16px; }

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px 0;
  list-style:none;
  margin:40px 0 0;
  padding:0;
}

.feature{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  padding:8px 12px;
  border-left:1px solid rgba(38,43,33,.14);
}
.feature:first-child{ border-left:0; }

.feature-icon{ display:block; width:32px; height:32px; }
.feature-icon svg,
.note-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:#6b6f5f;               /* oliva acinzentado, como no layout original */
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.feature-label{
  font-size:13px;
  line-height:1.45;
  color:var(--color-text-body);
}

/* ----------------------------------------------------------- 7. VÍDEO -- */

.video-section{
  position:relative;
  min-height:360px;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.video-bg{
  position:absolute;
  inset:0;
  background:url("../assets/img/interior.jpeg") center 45% / cover no-repeat;
}

/* A foto do interior é muito mais clara que a anterior, então este véu é
   mais forte e se estende mais para a direita — sem isso o botão de play
   (branco) e o "Assistir vídeo" ficam ilegíveis sobre a parede clara.
   O ângulo é 90deg (horizontal puro): em 100deg havia um componente
   vertical que clareava o pé da coluna de texto. */
.video-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(28,32,24,.95) 0%,
    rgba(28,32,24,.90) 30%,
    rgba(28,32,24,.68) 48%,
    rgba(28,32,24,.28) 66%,
    rgba(28,32,24,0)  84%
  );
}

.video-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-block:56px;
}

.video-title{
  font-size:28px;
  font-weight:500;
  line-height:1.25;
  color:var(--color-gold-light);
  margin:0;
}

.video-inner .title-rule{ margin:14px 0 26px; }

.play-circle{
  width:70px;
  height:70px;
  margin-left:6px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform var(--ease), background-color var(--ease);
}
.play-circle:hover{ transform:scale(1.08); background:rgba(255,255,255,.24); }
.play-circle svg{ width:30px; height:30px; fill:#fff; margin-left:3px; }

.video-inner .btn-sm{ margin-top:20px; margin-left:6px; }

/* ---------------------------------------------------- 8. LOCALIZAÇÃO -- */

.place-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:8px;
}

.place-card{
  display:flex;
  flex-direction:column;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  transition:transform var(--ease), box-shadow var(--ease);
}
.place-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(38,43,33,.12);
}

.place-card img{
  width:100%;
  aspect-ratio:16/7.2;
  object-fit:cover;
}

.place-body{ padding:22px 24px 28px; }

.place-body h3{
  font-size:22px;
  font-weight:600;
  line-height:1.25;
  margin:0 0 10px;
}
.place-body p{ margin:0; font-size:15px; }

.location-note{
  display:flex;
  align-items:center;
  gap:26px;
  max-width:920px;
  margin:56px auto 0;
}
.note-icon{ flex:0 0 auto; width:48px; height:48px; }
.location-note p{ margin:0; font-size:15px; }

/* -------------------------------------------------------- 9. CONTATO -- */

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.15fr);
  gap:64px;
  align-items:start;
}

.contact-lead{
  margin:0 0 30px;
  font-size:15px;
  max-width:340px;
}

.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:24px; }
.contact-list li{ display:flex; align-items:flex-start; gap:16px; }

.contact-icon{ flex:0 0 auto; width:26px; height:26px; margin-top:2px; }
.contact-icon .icon-filled{ width:100%; height:100%; fill:var(--color-dark); }

/* dados de contato do corretor (e-mail + telefones) */
.contact-details{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:10px;
}
.contact-details a{
  align-self:flex-start;
  font-weight:500;
  color:var(--color-dark);
  border-bottom:1px solid transparent;
  transition:color var(--ease), border-color var(--ease);
}
.contact-details a:hover{
  color:var(--color-gold);
  border-bottom-color:var(--color-gold);
}

.contact-text{ font-size:15px; line-height:1.55; }
.contact-text strong{
  display:block;
  font-weight:600;
  color:var(--color-dark);
}

/* formulário */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.form-field{ margin-bottom:18px; }

.form-field label{
  display:block;
  font-size:14px;
  font-weight:500;
  color:var(--color-dark);
  margin-bottom:7px;
}

.form-field input,
.form-field textarea{
  width:100%;
  font-family:var(--font-sans);
  font-size:15px;
  color:var(--color-dark);
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  transition:border-color var(--ease), box-shadow var(--ease);
}
.form-field textarea{ resize:vertical; min-height:120px; }

/* o placeholder é sugestão, não conteúdo — precisa ficar visivelmente
   mais claro que o texto digitado, mas ainda legível */
.form-field input::placeholder{ color:#9a968e; opacity:1; }

.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--color-gold);
  box-shadow:0 0 0 3px rgba(171,135,70,.18);
}

.form-field.has-error input,
.form-field.has-error textarea{ border-color:var(--color-error); }

.field-error{
  margin:6px 0 0;
  font-size:13px;
  color:var(--color-error);
  min-height:0;
}
.field-error:empty{ display:none; }

/* honeypot — fora da tela, invisível mas focável só por bots */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-status{
  margin:16px 0 0;
  font-size:14px;
  min-height:1.3em;
}
.form-status.is-ok{ color:var(--color-success); }
.form-status.is-error{ color:var(--color-error); }
/* modo demonstração: nem verde nem vermelho — não pode ser lido como sucesso */
.form-status.is-warn{ color:#8a6d1f; }

/* --------------------------------------------------------- 10. FOOTER -- */

.site-footer{
  background:var(--color-white);
  border-top:1px solid var(--color-gold-light);
  padding-block:32px;
  text-align:center;
}
/* duas marcas lado a lado: o empreendimento e o corretor responsável */
.footer-brands{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  margin-bottom:14px;
}

.footer-logo{ height:48px; width:auto; margin:0; }

/* A marca do corretor é um lockup vertical (símbolo sobre texto) contra o
   logotipo horizontal do Vista Lago. Igualar a altura das duas deixaria o
   "Realty and Associates" ilegível, então esta vai bem mais alta — o peso
   visual acaba equivalente porque o lockup empilhado é bem mais estreito. */
.footer-logo-broker{ height:96px; }

.footer-broker{
  display:block;
  transition:opacity var(--ease);
}
.footer-broker:hover{ opacity:.75; }

.footer-divider{
  width:1px;
  align-self:stretch;
  min-height:64px;
  background:var(--color-gold-light);
  opacity:.7;
}

.site-footer p{ margin:0; font-size:14px; color:var(--color-text-body); }

/* ----------------------------------------------------- 11. RESPONSIVO -- */

/* ---- tablet ---- */
@media (max-width:1024px){
  .nav-toggle{ display:flex; }

  .main-nav{
    position:absolute;
    top:var(--header-h);
    left:0;
    right:0;
    background:var(--color-white);
    border-top:1px solid rgba(38,43,33,.08);
    box-shadow:0 14px 26px rgba(38,43,33,.10);
    max-height:0;
    overflow:hidden;
    transition:max-height 280ms ease;
  }
  .main-nav.is-open{ max-height:340px; }

  .main-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 24px 20px;
  }
  .main-nav li + li{ border-top:1px solid rgba(38,43,33,.10); }
  .main-nav a{ display:block; padding:15px 0; border-bottom:0; }

  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .about-grid{ gap:40px; }
  .place-grid{ gap:20px; }
  .contact-grid{ gap:44px; }
}

/* ---- mobile grande ---- */
@media (max-width:768px){
  :root{ --section-padding-y:48px; }

  .hero{ min-height:480px; }
  .hero-inner{ padding-block:56px; }
  .hero-title{ font-size:30px; }
  .hero-title br{ display:none; }
  .hero-lead{ font-size:15px; }

  /* no mobile o gradiente vem de cima para baixo: a coluna de texto ocupa
     toda a largura, então o degradê lateral deixaria de proteger o contraste */
  .hero-overlay,
  .video-overlay{
    background:linear-gradient(
      170deg,
      rgba(38,43,33,.92) 0%,
      rgba(38,43,33,.80) 48%,
      rgba(38,43,33,.58) 100%
    );
  }

  .section-title{ font-size:28px; }

  .about-grid{ grid-template-columns:1fr; gap:32px; }
  /* empilhado, a foto volta à altura natural — sem recorte */
  .about-media img{ height:auto; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .feature:nth-child(odd){ border-left:0; }

  .video-section{ min-height:320px; }
  .video-title{ font-size:24px; }

  .place-grid{ grid-template-columns:1fr; gap:24px; }

  .location-note{ flex-direction:column; align-items:flex-start; gap:18px; margin-top:40px; }

  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .contact-lead{ max-width:none; }
  .form-row{ grid-template-columns:1fr; gap:0; }

}

/* ---- mobile pequeno ---- */
@media (max-width:480px){
  .container{ padding-inline:20px; }

  .logo img{ height:34px; }
  .hero-title{ font-size:28px; }
  .hero-actions{ gap:12px; }
  .hero-actions .btn{ flex:1 1 auto; padding-inline:20px; }

  .place-body{ padding:18px 20px 24px; }
  .place-body h3{ font-size:20px; }

  .footer-logo{ height:40px; }
}