/* ===== Paleta (fundo exigido: #0f2e19) ===== */
:root{
  --green-900:#0f2e19;         /* fundo principal */
  --green-880:#123f28;         /* moldura das fotos (um degrau acima do fundo) */
  --green-860:#0e3822;
  --green-850:#0c2c1a;         /* rodapé */
  --green-rgb:15,46,25;        /* RGB do fundo para overlays */

  --gold-500:#c9a36a;          /* links do menu */
  --gold-600:#ba8a4e;          /* CTA / destaques */
  --beige-050:#f3ebdd;         /* faixa “Em breve” */
  --beige-100:#eadbc6;         /* faixa bege principal */
  --beige-150:#e1cfb6;

  --text:#efe9dc;
  --muted:#d9ccb6;

  --shadow:0 18px 36px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--green-900); color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* ===== Header ===== */
.mast{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg,
    rgba(var(--green-rgb), .96),
    rgba(var(--green-rgb), .88) 60%,
    rgba(var(--green-rgb), 0)
  );
}

/* 3 colunas; itens verticalmente centralizados */
.mast-grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;                 /* (patch) antes era end */
  padding:10px 20px 0;
  min-height:140px;
}

.nav{
  display:flex; gap:42px; align-items:center; padding:14px 0 0;
  white-space:nowrap;                 /* (patch) evita quebra de “Novidades Contato” */
}
.nav.left{justify-content:flex-start}
.nav.right{justify-content:flex-end}
.nav-link{ color:var(--gold-500); text-decoration:none; font-weight:600; letter-spacing:.2px }
.nav-link:hover{ color:#fff; }

/* Toggle mobile */
.nav-toggle{
  display:none; position:absolute; left:16px; top:18px; width:34px; height:28px;
  background:transparent; border:0; cursor:pointer
}
.nav-toggle span{ display:block; height:2px; background:#f0eadf; margin:6px 0; border-radius:2px }

/* Logo NO FLUXO do grid (patch) */
.brand-wrap{
  position:relative;                  /* (patch) não é absolute */
  left:auto; bottom:auto;
  transform:translateY(28px);         /* desce para “invadir” o herói */
  margin-bottom:-28px;                /* compensa a altura */
}
.brand{
  width:200px; height:200px; object-fit:contain;
  filter:none;                        /* sem sombra/borda na logo */
  background:transparent;
}

/* ===== Hero ===== */
.hero{ padding:220px 0 44px; text-align:center; }
.hero-title{
  font-family:"Playfair Display", serif;
  font-weight:800; line-height:1.12; letter-spacing:.1px;
  font-size:clamp(36px,4.7vw,68px);
  margin:0 0 20px; text-shadow:0 2px 0 rgba(0,0,0,.18);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px; border-radius:12px; font-weight:700; text-decoration:none;
  border:1px solid rgba(0,0,0,.15); box-shadow:var(--shadow);
}
.btn-cta{ background:linear-gradient(180deg,#cfa96f,#ba8a4e); color:#1b1207; }
.btn-cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.hairline{ width:min(580px,80%); height:1px; margin:18px auto 0; background:rgba(0,0,0,.28); }

/* ===== Galeria (base) — mantém no container e usa gaps fluidos ===== */
.gallery{
  margin:36px auto 12px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px, 2.2vw, 30px);
  align-items:stretch;
}

/* Moldura limpa */
.frame{
  background:transparent;
  padding:0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(0,0,0,.25);
}

/* ===== Formato retrato quando usar .shape-portrait ===== */
.gallery.shape-portrait .frame img{
  width:100%;
  height:100%;
  display:block;
  border-radius:16px;
  aspect-ratio:4 / 5;       /* <<< retrato padrão */
  object-fit:cover;
  object-position:center;
  transform:translateZ(0);
  transition:transform .3s ease;
}
.gallery.shape-portrait .frame:hover img{ transform:scale(1.02); }

.frame img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  aspect-ratio:4 / 3;             /* mantém proporção elegante */
  object-fit:cover;
  transform:translateZ(0);        /* evita “blurry” em alguns Androids */
}

/* ===== Faixa bege ===== */
.features{
  background:linear-gradient(0deg, var(--beige-150), var(--beige-100));
  color:#2b2316; margin-top:60px;
  border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08);
}
.features-inner{ text-align:center; padding:56px 0 46px; }
.features h2{
  font-family:"Playfair Display", serif;
  font-size: clamp(26px, 3.3vw, 40px);
  margin:0 0 18px; color:#223226;
}
.feat-grid{ margin-top:18px; display:grid; gap:38px; grid-template-columns:repeat(5, minmax(0,1fr)); }
.feat{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.feat-icon{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-size:28px;
  background:linear-gradient(180deg,#ead9c4,#d7c2a3); color:#8a6a3b; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 16px rgba(0,0,0,.08) inset, 0 8px 18px rgba(0,0,0,.06);
}
.feat h3{ margin:0; color:#2b2316; font-weight:700; font-size:18px; line-height:1.25; text-align:center; }

/* ===== Em breve ===== */
.soon{ background:var(--beige-050); color:#223226; padding:48px 0; text-align:center; }
.soon h2{ margin:0; font-family:"Playfair Display", serif; font-size: clamp(24px, 3vw, 36px); }

/* ===== Mapa ===== */
.map-wrap{ position:relative; min-height:520px; padding:90px 0 96px; isolation:isolate; }
.map-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.map-bg iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:saturate(.8) contrast(.9) brightness(.82);
}
/* overlay mais escuro + leve blur = texto legível */
.map-overlay{
  position:absolute; inset:0; z-index:-1;
  background:rgba(var(--green-rgb), .86);
  backdrop-filter:saturate(0.9) blur(1.5px);
}
.map-content{ text-align:center; }
.map-content h2{
  font-family:"Playfair Display",serif; font-size:clamp(26px,3.2vw,40px);
  margin:0 0 10px; text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.address{ color:var(--muted); margin:0 0 24px; font-size:16.5px; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.contact-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* botões de contato — mais sóbrios na paleta do site */
.whats{
  background:linear-gradient(180deg,#2e6a47,#22533a);
  color:#e9f6ee; border-color:rgba(0,0,0,.12);
}
.insta{
  background:linear-gradient(180deg,#cfa96f,#b28757);
  color:#25190a; border-color:rgba(0,0,0,.12);
}
.whats i,.insta i{ opacity:.95 }

/* ===== Rodapé ===== */
.site-footer{ background:var(--green-850); border-top:1px solid rgba(255,255,255,.06); }
.site-footer p{ margin:0; padding:26px 0; text-align:center; color:#d8ccb4; font-size:14px; }

/* ===== Mobile: menu sempre visível no topo (sem hambúrguer) ===== */
@media (max-width:760px){
  /* mantém as duas navs ativas no mobile */
  
  /* esconder "Início" apenas no mobile */
  .nav.left a:first-child{ display:none; }
  
  .nav{ 
    display:flex; 
    gap:14px; 
    align-items:center; 
    padding:8px 0 0; 
  }
  .nav a.nav-link{
    font-size:14px;
    letter-spacing:0;
  }

  /* esquerda e direita bem comportadas no grid */
  .nav.left{ justify-content:flex-start; }
  .nav.right{ justify-content:flex-end; }

  /* esconde o botão sanduíche */
  .nav-toggle{ display:none !important; }

  /* cabeçalho mais compacto no mobile */
  .mast-grid{
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    min-height:110px;
    padding-top:6px;
  }

  /* logo menor e “invadindo” um pouco o herói sem quebrar o topo */
  .brand{ width:120px; height:120px; }
  .brand-wrap{
    transform:translateY(10px);   /* desce levemente */
    margin-bottom:-10px;          /* compensa a altura */
  }

  /* hero ajustado para caber depois do cabeçalho compacto */
  .hero{ padding-top:160px; }
}
/* === Gallery: mobile (<=560px) — 1 por linha === */
@media (max-width:560px){
  .gallery{
    grid-template-columns: 1fr !important; /* 1 coluna garantida */
    gap: 14px;
  }
  .gallery .frame{
    /* deixa a foto menor e consistente */
    width: min(88vw, 360px);
    margin-inline: auto;           /* centraliza */
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(0,0,0,.26);
  }
  .gallery.shape-portrait .frame img{
    width: 100%;
    height: auto;                  /* evita “esticar” em telas altas */
    aspect-ratio: 4 / 5;           /* mantém o retrato */
    border-radius: 12px;
  }
}
/* 1) Até 900px: galeria em 1 coluna e features em 2 colunas */
@media (max-width:900px){
    .gallery{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
  }
  .frame{ padding:0; border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.28); }
  .frame img{ border-radius:16px; }
  .feat-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:22px;
  }
  .feat-icon{ width:56px; height:56px; font-size:24px; }
}

/* 2) Telas bem estreitas: fontes menores no menu, features em 1 coluna */
@media (max-width:520px){
    .nav a.nav-link{ font-size:12px; }
  .brand{ width:110px; height:110px; }
  .brand-wrap{ transform:translateY(8px); margin-bottom:-8px; }
  .hero{ padding-top:150px; }

  .gallery{ gap:16px; }            /* combina com o bloco de 560px acima */
  .frame{ border-radius:12px; box-shadow:0 14px 32px rgba(0,0,0,.26); }
  .frame img{ border-radius:12px; }

  /* features em 1 coluna somente no mobile estreito */
  .feat-grid{ grid-template-columns:1fr; gap:18px; }
  .feat h3{ font-size:16px; }
  .feat-icon{ width:52px; height:52px; font-size:22px; }
}
/* === Gallery vertical (desktop) — PADRÃO (contida ao container) === */
@media (min-width:1100px){
  /* grid equilibrado dentro do container */
  .gallery{ 
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }

  .gallery.shape-portrait{
    margin-inline: 0;         /* não expande pra tela toda */
    padding-inline: 0;
    max-width: 1180px;        /* acompanha o .container */
  }

  .gallery.shape-portrait .frame{
    border-radius:18px;
    box-shadow:0 24px 50px rgba(0,0,0,.28);
  }
  .gallery.shape-portrait .frame img{
    aspect-ratio: 4 / 5;      /* retrato */
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
  }
  .gallery.shape-portrait .frame:hover img{ transform: scale(1.02); }
}