/* ====== TIPOGRAFIA ORIGINAL ====== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
:root{
  --verde:#4CAF50;
  --verde-hover:#388e3c;
  --txt:#111;
  --borda:#e0e0e0;
  --wrap:1200px;   /* largura de conteúdo como no exemplo */
  --h-header:96px; /* compensação do header fixo */
}

*{box-sizing:border-box}
body{ font-family:'Bebas Neue', sans-serif; }

/* ====== HEADER ====== */
.topo{
  background:#fff;
  border-bottom:1px solid var(--borda);
  padding:15px 0;
  position:fixed; top:0; left:0; width:100%;
  z-index:999;
}
.container-header{
  max-width:var(--wrap);
  margin:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:0 20px;
}
.logo img{ height:90px; }

/* ====== MENU (DESKTOP) – igual ao print ====== */
.menu ul{ list-style:none; display:flex; gap:36px; margin:0; padding:0; }
.menu a{
  font-family:'Bebas Neue', sans-serif;
  font-size:22px;
  text-decoration:none;
  font-weight:400;
  color:var(--txt);
  text-transform:uppercase;
  letter-spacing:.3px;
  transition:.25s;
}
.menu a:hover,.menu a.active{
  color:var(--verde);
  border-bottom:2px solid var(--verde);
}

/* ====== AÇÕES (direita) ====== */
.acoes{ display:flex; align-items:center; gap:12px; }
.botao-orcamento{
  background:var(--verde); color:#fff;
  padding:10px 20px; border-radius:999px;
  font-weight:bold; text-decoration:none;
  display:flex; align-items:center; gap:10px; transition:.25s;
}
.botao-orcamento:hover{ background:#43a047; }
.social{
  background:var(--verde); color:#fff;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  font-size:18px; text-decoration:none; transition:.25s;
}
.social:hover{ background:var(--verde-hover); }

/* ====== HAMBÚRGUER (MAIOR) ====== */
.menu-toggle{
  display:none;                /* aparece no mobile */
  width:60px; height:60px;     /* alvo de toque grande */
  border:0; background:transparent; cursor:pointer;
}
.menu-toggle .bar{
  display:block; width:36px; height:4px; margin:7px auto;
  background:var(--txt); border-radius:3px; transition:.3s;
}
/* anima em "X" quando aria-expanded=true */
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(11px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-11px) rotate(-45deg); }

/* ====== OVERLAY ====== */
.menu-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:.3s; z-index:998;
}
.menu-overlay.visivel{ opacity:1; visibility:visible; }
body.no-scroll{ overflow:hidden; }

/* ====== MOBILE / OFF‑CANVAS ====== */
@media (max-width: 992px){
  .menu-toggle{ display:block; }
  .acoes{ display:none; }         /* como no exemplo, some no mobile */

  .menu{
    position:fixed; top:0; right:-100%;
    width:min(86%, 400px); height:100dvh; background:#fff;
    border-left:1px solid var(--borda);
    padding:110px 24px 24px;
    box-shadow:-12px 0 28px rgba(0,0,0,.10);
    transition:right .3s ease; z-index:999;
  }
  .menu.aberto{ right:0; }
  .menu ul{ flex-direction:column; gap:20px; }
  .menu a{ font-size:24px; border-bottom:none; }
  .logo img{ height:72px; }
}

/* ====== AJUSTES DE RESOLUÇÃO ====== */
/* 1440–1600: dá espaço ao menu sem “amontoar” */
@media (min-width:1440px){
  :root{ --wrap:1360px; }
  .menu ul{ gap:40px; }
}
/* 1920+: como no print grande */
@media (min-width:1920px){
  :root{ --wrap:1560px; }
  .logo img{ height:96px; }
  .menu a{ font-size:24px; }
  .botao-orcamento{ padding:12px 22px; font-size:20px; }
}

/* ====== COMPENSAÇÃO DO HEADER FIXO ====== */
main{ margin-top: calc(var(--h-header) + 12px); }
@media (max-width:600px){ main{ margin-top:90px; } }
/* ====== Desktop compacto (1366px e 1280px) ====== */
/* Evita que os itens do menu quebrem em 2 linhas no DESKTOP */
@media (min-width: 993px){
  .menu li, .menu a { white-space: nowrap; }
}

/* 1366px (notebooks 1366x768) */
@media (max-width: 1366px) and (min-width: 993px){
  .container-header{ padding: 0 16px; gap: 12px; flex-wrap: nowrap; }
  .logo img{ height: 80px; }

  .menu ul{ gap: 16px; }           /* era ~25px */
  .menu a{ font-size: 20px; }      /* era 22px */

  .acoes{ gap: 8px; }
  .botao-orcamento{
    padding: 8px 14px;
    font-size: 18px;
    white-space: nowrap;            /* não quebra dentro do botão */
  }
  .social{ width: 36px; height: 36px; font-size: 16px; }
}

/* 1280px (um degrau a menos de espaço) */
@media (max-width: 1280px) and (min-width: 993px){
  .menu ul{ gap: 14px; }
  .menu a{ font-size: 19px; }
  .botao-orcamento{ padding: 8px 12px; font-size: 17px; }
}
/* Botão "Fechar ✕" dentro do off-canvas */
.menu-close{
  display:none; /* escondido no desktop */
}

@media (max-width: 992px){
  .menu{
    position: fixed; /* já deve estar assim no seu CSS */
    /* padding-top já existe; mantém */
  }

  .menu-close{
    display:flex;
    align-items:center;
    gap:8px;
    position:absolute;
    top:18px; right:18px;
    background:#f5f5f5;
    border:1px solid #ddd;
    border-radius:12px;
    padding:10px 14px;
    font-size:16px;
    line-height:1;
    cursor:pointer;
  }
  .menu-close:hover{ background:#eee; }
  .menu-close:focus{ outline:2px solid #4CAF50; outline-offset:2px; }
}