/* ================================================================
   POUSO VALE VERDE — STYLESHEET
   ================================================================
   ÍNDICE (use Ctrl+F / Cmd+F para pular direto):
   1. RESET E VARIÁVEIS GLOBAIS
   2. UTILITÁRIOS (container, botões, títulos)
   3. HEADER / MENU
   4. HERO (banner principal)
   5. STATS (barra de números)
   6. SOBRE
   7. SERVIÇOS (cards)
   8. ESTRUTURA (galeria)
   9. CTA BANNER
   10. CONTATO (form)
   11. FOOTER
   12. BOTÃO FLUTUANTE DO WHATSAPP
   13. RESPONSIVO / MOBILE

   NOTA SOBRE TAMANHOS: os prints originais foram tirados com a página
   em 75% de zoom no navegador — ou seja, tudo aparecia ~25% menor do
   que o tamanho real. Os valores abaixo já foram recalculados para
   que o site fique no tamanho correto (proporcional ao print) quando
   visto a 100% de zoom, em qualquer tela.
================================================================ */


/* ================================================================
   1. RESET E VARIÁVEIS GLOBAIS
   -> Mude as cores aqui e o site inteiro se atualiza.
================================================================ */
:root {
  /* Cores principais */
  --verde-escuro: #1f3628;     /* header text, footer, stats bg */
  --verde-escuro-2: #182a1e;   /* gradientes mais escuros */
  --verde-medio: #2f5233;      /* botões primários */
  --verde-medio-hover: #26421f;
  --verde-claro: #9fd8ab;      /* destaque / itálico no hero */
  --verde-claro-bg: #e8f2e5;   /* fundo de ícones e seção serviços */
  --creme: #f7f3ea;            /* fundo claro geral */
  --branco: #ffffff;
  --texto-escuro: #1c2a20;
  --texto-suave: #55665a;
  --borda: #e3e0d5;
  --whatsapp: #25d366;
  --whatsapp-hover: #1ebe5b;

  /* Tipografia */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  /* Outros */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --shadow-suave: 0 12px 34px rgba(30, 50, 35, 0.09);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px; /* compensa o header fixo ao clicar nos links do menu */
  font-size: 17px; /* base ligeiramente maior que o padrão (16px) p/ manter a proporção do print em 75% */
}

body {
  font-family: var(--font-body);
  color: var(--texto-escuro);
  background: var(--creme);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

/* Ícones lucide: tamanho padrão */
[data-lucide] {
  width: 22px;
  height: 22px;
}


/* ================================================================
   2. UTILITÁRIOS
================================================================ */
.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.8px;
  color: var(--verde-medio);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--verde-escuro);
  font-size: clamp(32px, 4.6vw, 46px);
  line-height: 1.2;
  margin-bottom: 20px;
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  padding: 18px 34px;
  border-radius: var(--radius-sm);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn--pill {
  border-radius: 999px;
}

.btn--primary {
  background: var(--verde-medio);
  color: var(--branco);
}
.btn--primary:hover {
  background: var(--verde-medio-hover);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--branco);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn--block {
  width: 100%;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--branco);
  font-size: 15px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.badge [data-lucide] {
  width: 17px;
  height: 17px;
  color: var(--verde-claro);
}


/* ================================================================
   3. HEADER / MENU
================================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ece7da;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

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

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.logo__icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  background: 0;
}

.logo__text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.15;
  color: var(--verde-escuro);
}

.nav {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0 auto;
}

.nav__link {
  font-weight: 500;
  font-size: 16.5px;
  color: var(--texto-escuro);
  position: relative;
  transition: color 0.2s ease;
}
.nav__link:hover {
  color: var(--verde-medio);
}

.header__cta {
  flex-shrink: 0;
  padding: 15px 28px;
  font-size: 16px;
}
.header__cta [data-lucide] {
  width: 17px;
  height: 17px;
}

/* Botão hamburguer (só aparece no mobile, ver seção 13) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  padding: 8px;
}
.hamburger span {
  width: 28px;
  height: 2.5px;
  background: var(--verde-escuro);
  border-radius: 2px;
  transition: all 0.3s ease;
}


/* ================================================================
   4. HERO
   -> Troque a URL da imagem abaixo pela foto real da varanda/casa.
================================================================ */
.hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(10, 20, 14, 0.88) 20%, rgba(10, 20, 14, 0.55) 70%),
    url("../img/vista_cima.png");
  background-size: cover;
  background-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding-top: 50px;
  padding-bottom: 100px;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(46px, 6.2vw, 78px);
  line-height: 1.12;
  color: var(--branco);
  margin: 26px 0 24px;
}

.hero__title em {
  color: var(--verde-claro);
  font-style: italic;
}

.hero__text {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin-bottom: 38px;
}

.hero__buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.hero__dots {
  position: absolute;
  bottom: 34px;
  left: 32px;
  display: flex;
  gap: 9px;
  z-index: 2;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}
.dot--active {
  width: 30px;
  border-radius: 5px;
  background: var(--branco);
}


/* ================================================================
   5. STATS (barra de números)
================================================================ */
.stats {
  background: var(--verde-escuro);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 56px 32px;
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.stats__item:last-child {
  border-right: none;
}

.stats__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 42px);
  color: var(--branco);
}

.stats__label {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.75);
}


/* ================================================================
   6. SOBRE
================================================================ */
.sobre {
  padding: 140px 0;
  background: var(--creme);
}

.sobre__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 76px;
  align-items: center;
}

.sobre__media {
  position: relative;
}

.sobre__img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.sobre__card {
  position: absolute;
  bottom: 28px;
  left: 28px;
  width: max-content;
  max-width: calc(100% - 56px);
  background: var(--branco);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-suave);
}

.sobre__card strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--texto-escuro);
}
.sobre__card span {
  font-size: 14.5px;
  color: var(--texto-suave);
}

.sobre__card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--verde-claro-bg);
  color: var(--verde-medio);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sobre__text p {
  color: var(--texto-suave);
  font-size: 17px;
  margin-bottom: 30px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 16.5px;
  color: var(--texto-escuro);
}

.check-list [data-lucide] {
  width: 20px;
  height: 20px;
  color: var(--verde-medio);
  background: var(--verde-claro-bg);
  border-radius: 50%;
  padding: 5px;
  flex-shrink: 0;
  margin-top: 1px;
}


/* ================================================================
   7. SERVIÇOS
================================================================ */
.servicos {
  padding: 140px 0;
  background: var(--verde-claro-bg);
}

.servicos .section-title {
  max-width: 700px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}

.card {
  background: var(--branco);
  border-radius: var(--radius-md);
  padding: 42px 36px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-suave);
}

.card__icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: var(--verde-claro-bg);
  color: var(--verde-medio);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.card h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--texto-escuro);
  margin-bottom: 12px;
}

.card p {
  font-size: 16px;
  color: var(--texto-suave);
}


/* ================================================================
   8. ESTRUTURA (galeria)
================================================================ */
.estrutura {
  padding: 140px 0;
  background: var(--creme);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}

.gallery-item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.gallery-item h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--verde-escuro);
  margin-bottom: 10px;
}

.gallery-item p {
  font-size: 16px;
  color: var(--texto-suave);
}


/* ================================================================
   9. CTA BANNER
================================================================ */
.cta-banner {
  position: relative;
  background-image: url("../img/vista_lado.png");
  background-size: cover;
  background-position: center;
  padding: 175px 32px;
}

.cta-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 18, 0.72);
}

.cta-banner__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cta-banner__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--verde-claro);
  margin-bottom: 8px;
}

.cta-banner__content h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 44px);
  color: var(--branco);
  line-height: 1.25;
}

.cta-banner__content p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
}


/* ================================================================
   10. CONTATO
================================================================ */
.contato {
  padding: 140px 0;
  background: var(--verde-claro-bg);
}

.contato__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 76px;
  align-items: start;
}

.contato__info p {
  font-size: 17px;
  color: var(--texto-suave);
  margin-bottom: 36px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}

.info-item__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--branco);
  color: var(--verde-medio);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-item__label {
  display: block;
  font-size: 14px;
  color: var(--texto-suave);
  margin-bottom: 3px;
}

.info-item strong {
  font-weight: 600;
  font-size: 16.5px;
  color: var(--texto-escuro);
}

.contato__map {
  margin-top: 30px;
  border-radius: var(--radius-md);
  overflow: hidden; /* isso arredonda as bordas do iframe também */
}

.contato__map iframe {
  width: 100%;
  height: 300px;
  display: block;
}

/* Formulário */
.contato__form {
  background: var(--branco);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-suave);
}

.contato__form label {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-escuro);
  margin-top: 16px;
  margin-bottom: 8px;
}

.contato__form input,
.contato__form textarea {
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--borda);
  background: #faf9f5;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--texto-escuro);
  resize: none;
  transition: border-color 0.2s ease;
}

.contato__form input:focus,
.contato__form textarea:focus {
  outline: none;
  border-color: var(--verde-medio);
}

.contato__form .btn {
  margin-top: 26px;
}


/* ================================================================
   11. FOOTER
================================================================ */
.footer {
  background: var(--verde-escuro);
  color: rgba(255, 255, 255, 0.75);
  padding-top: 90px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer .logo--light .logo__text {
  color: var(--branco);
}

.footer__col p,
.footer__col span {
  font-size: 15px;
  line-height: 1.7;
  display: block;
  margin-top: 18px;
}

.footer__col h4 {
  font-family: var(--font-heading);
  color: var(--branco);
  font-size: 18px;
  margin-bottom: 20px;
}

.footer__col a {
  display: block;
  font-size: 15px;
  margin-bottom: 14px;
  transition: color 0.2s ease;
}
.footer__col a:hover {
  color: var(--verde-claro);
}

.footer__bottom {
  text-align: center;
  padding: 26px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}


/* ================================================================
   12. BOTÃO FLUTUANTE DO WHATSAPP
   -> Troque o número no atributo href do link no index.html
   (procure por "wa.me" no HTML).
================================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(20, 30, 22, 0.28);
  transition: transform 0.25s ease, background 0.25s ease;
  animation: whatsapp-pulse 2.4s infinite;
}

.whatsapp-float:hover {
  background: var(--whatsapp-hover);
  transform: scale(1.08);
}

.whatsapp-float svg,
.whatsapp-float [data-lucide] {
  width: 32px;
  height: 32px;
}

/* pulso suave chamando atenção pro botão, sem exagero */
@keyframes whatsapp-pulse {
  0% { box-shadow: 0 8px 24px rgba(20, 30, 22, 0.28), 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70% { box-shadow: 0 8px 24px rgba(20, 30, 22, 0.28), 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 8px 24px rgba(20, 30, 22, 0.28), 0 0 0 0 rgba(37, 211, 102, 0); }
}


/* ================================================================
   13. RESPONSIVO / MOBILE
   Breakpoints: 1100px (tablet) e 680px (celular)
================================================================ */
@media (max-width: 1100px) {
  .sobre__grid,
  .contato__grid {
    grid-template-columns: 1fr;
  }

  .cards-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  /* Menu vira um painel mobile que desce do header */
  .nav {
    position: fixed;
    top: 104px;
    left: 0;
    right: 0;
    background: #ece7da;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 32px 24px;
    transform: translateY(-140%);
    opacity: 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
  }
  .nav__link {
    width: 100%;
    padding: 16px 0;
    font-size: 17px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  .header__cta {
    display: none; /* some no mobile pra não brigar com o hamburguer, o menu tem o link de contato */
  }

  .hamburger {
    display: flex;
  }
}

@media (max-width: 680px) {
  html {
    font-size: 16px;
  }

  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
    padding: 44px 28px;
  }
  .stats__item {
    border-right: none;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .stats__item:nth-child(3),
  .stats__item:nth-child(4) {
    border-bottom: none;
  }

  .cards-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .sobre,
  .servicos,
  .estrutura,
  .contato {
    padding: 80px 0;
  }

  .cta-banner {
    padding: 100px 28px;
  }

  .hero {
    min-height: 100vh;
    text-align: left;
  }

  .hero__buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .contato__form {
    padding: 30px;
  }

  .sobre__card {
    position: static;
    margin-top: -44px;
    margin-inline: 18px;
    max-width: none;
  }

  .sobre__img {
    height: 360px;
  }

  .whatsapp-float {
    width: 56px;
    height: 56px;
    bottom: 20px;
    right: 20px;
  }
  .whatsapp-float svg,
  .whatsapp-float [data-lucide] {
    width: 28px;
    height: 28px;
  }
}


/* Respeita usuários que preferem menos animação */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
    animation: none !important;
  }
}