/* ===== Reset e tokens ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ height:100%; }
:root{
  --fg:#1f1f1f; --fg-muted:#444; --bg:#fff; --bg-page:#f7f7f8;
  --sep:#eee; --shadow:0 8px 24px rgba(0,0,0,.08);
  --max:1280px; --wide:1400px;
  --space: clamp(16px, 3vw, 32px);
}

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:var(--bg-page);
  line-height:1.7;
  padding-top:80px; /* altura da navbar fixa */
  animation:fadeIn .6s ease forwards;
}

/* Tipografia fluida base */
h1{ font-size:clamp(1.8rem, 3.5vw + 1rem, 3rem); margin:.5rem 0; }
h2{ font-size:clamp(1.4rem, 2.2vw + .8rem, 2.2rem); margin:.5rem 0; }
p,li{ font-size:clamp(1rem, .6vw + .85rem, 1.125rem); }

/* Links */
a{ color:inherit; text-underline-offset: .15em; }

/* ===== Utilitários de container ===== */
.container{ width:min(var(--max), 92vw); margin-inline:auto; padding:40px 0; }
.container--wide{ width:min(var(--wide), 94vw); }
.container--fluid{ width:100%; }

/* ===== Navbar ===== */
.site-header .nav{
  position:fixed; inset:0 auto auto 0; right:0; z-index:1000;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08);
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.nav .logo{ display:flex; align-items:center; gap:8px; }
.nav .nav-links{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.nav .nav-links a{ text-decoration:none; color:#444; font-weight:500; padding:.25rem .5rem; border-radius:8px; }
.nav .nav-links a:hover{ color:#111; background:#f5f5f5; }

/* ===== Botões ===== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; font-weight:600; border-radius:40px;
  padding:.7rem 1.2rem; transition:transform .2s ease, opacity .2s ease, background .3s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--whatsapp{ background:#25d366; color:#fff; }
.btn--whatsapp:hover{ background:#1ebe57; }
.btn--instagram{
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff; padding:.6rem 1rem;
}
.btn--instagram svg{ width:20px; height:20px; fill:#fff; }

/* ===== Animações ===== */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ===== Responsividade global ===== */
@media (max-width: 768px){
  .site-header .nav{ padding:10px 12px; }
  .nav .nav-links{ gap:.5rem; }
  .btn{ padding:.6rem 1rem; }
}

/* Botão hambúrguer (somente mobile) */
.menu-toggle{
  display:none; border:none; background:#fff; font-size:24px; line-height:1;
  padding:.35rem .6rem; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* ====== Menu Mobile / Tablet ====== */
@media (max-width: 860px){
  .menu-toggle{ display:inline-block; }

  /* Lista de links: painel flutuante */
  .nav .nav-links{
    position: fixed;
    top:80px; right:12px; left:12px;
    background:#fff; border:1px solid #eee; border-radius:12px; padding:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.18);
    display:none; flex-direction:column; gap:.6rem;

    /* >>> Correção: garantir que fique ACIMA do overlay <<< */
    z-index: 1002;
  }
  .nav.is-open .nav-links{ display:flex; }

  .nav .btn{ width:100%; justify-content:center; } /* botões cheios no mobile */

  /* Overlay para fechar ao tocar fora */
  .nav-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.25);

    /* >>> Correção: overlay abaixo dos links, acima do restante <<< */
    z-index: 1001;

    /* visibilidade/clique controlados pela classe is-open */
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .nav.is-open .nav-overlay{
    opacity: 1; pointer-events: auto;
  }
}

img{ max-width:100%; height:auto; }
:where(p, li){ overflow-wrap: anywhere; } /* evita overflow com palavras longas */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (max-width: 480px){
  body::before{ filter: blur(1px) brightness(.92); transform: none; }
}

/* Tamanho da logo (controlado por CSS) */
.nav .logo img{
  display:block;
  width:auto;
  max-height:40px;      /* desktop */
}

@media (max-width: 860px){
  .nav .logo img{ max-height:32px; }  /* mobile/tablet */
}

@media (max-width: 860px){
  .site-header .nav{ padding:8px 12px; } /* de 12px para 8px */
}