:root{
  --azul:#3E4095;
  --laranja:#F58634;
  --verde:#25D366;
  --verde-esc:#1ebe5b;
  --branco:#fff;
  --cinza:#f4f5fa;
  --texto:#1f2033;
  --borda:#e5e7f0;
  --sombra:0 8px 24px rgba(62,64,149,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:var(--texto);background:var(--branco);line-height:1.55}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ============================================================
   TOPBAR — LARANJA
   ============================================================ */
.topbar{
  background:var(--laranja);
  color:#fff;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 4px 16px rgba(245,134,52,.25);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px}

/* Logo (SVG) — fica branco sobre laranja */
.logo{display:inline-flex;align-items:center;line-height:1;font-weight:700;font-size:24px;letter-spacing:1px}
.logo img{display:block;height:44px;width:auto}
.logo-fallback{font-weight:700;font-size:24px;letter-spacing:1px}
.logo-cir{color:#fff}
.logo-flex{color:var(--azul)}

/* Menu principal */
.menu{display:flex;gap:24px;align-items:center}
.menu a{color:#fff;font-weight:600;transition:.2s}
.menu a:hover{color:var(--azul)}

/* Botão WhatsApp do topo — fundo branco, ícone verde */
.btn-zap-top{
  background:#fff;
  color:var(--verde);
  padding:9px 18px;
  border-radius:999px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:.2s;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.btn-zap-top:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  background:#f0fff5;
}
.btn-zap-top svg{display:block;flex-shrink:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:linear-gradient(135deg,var(--azul) 0%,#2c2e78 100%);color:#fff;padding:70px 0;text-align:center}
.hero h1{font-size:clamp(24px,4vw,40px);margin-bottom:14px}
.hero p{opacity:.9;margin-bottom:24px;font-size:17px}
.btn-primario{background:var(--laranja);color:#fff;padding:12px 24px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:.2s;display:inline-block}
.btn-primario:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* ============================================================
   BUSCA E CATEGORIAS
   ============================================================ */
.busca-cat{margin:32px auto}
.busca{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.busca input{flex:1;min-width:200px;padding:12px 16px;border:1px solid var(--borda);border-radius:8px;font-family:inherit;font-size:15px}
.busca input:focus{outline:none;border-color:var(--azul)}
.busca button{background:var(--azul);color:#fff;border:none;padding:0 24px;border-radius:8px;font-weight:600;cursor:pointer}
.cats{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cat{padding:8px 16px;border-radius:999px;background:var(--cinza);font-size:14px;font-weight:500;transition:.2s;color:var(--texto);display:inline-block}
.cat:hover{background:#e3e5f7}
.cat.active{background:var(--azul);color:#fff}

/* Submenu de categorias (chips) */
.cat-grupo{position:relative;display:inline-block}
.cat-pai{padding:8px 16px;border-radius:999px;background:var(--cinza);font-size:14px;font-weight:600;cursor:pointer;transition:.2s;display:inline-block;color:var(--texto)}
.cat-grupo:hover .cat-pai{background:var(--azul);color:#fff}
.cat-sub{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--borda);border-radius:12px;padding:8px;min-width:240px;box-shadow:var(--sombra);z-index:20;flex-direction:column;gap:2px;margin-top:6px}
.cat-grupo:hover .cat-sub{display:flex}
.cat-sub .cat{background:transparent;padding:8px 12px;border-radius:8px;font-size:13px;text-align:left}
.cat-sub .cat:hover{background:var(--cinza)}
.cat-sub .cat.active{background:var(--azul);color:#fff}
.cat-sub .cat strong{font-weight:600;color:var(--azul)}
.cat-sub .cat.active strong{color:#fff}

/* ============================================================
   GRID DE PRODUTOS
   ============================================================ */
.produtos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;padding-bottom:60px}
.card{background:#fff;border:1px solid var(--borda);border-radius:14px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(62,64,149,.05)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--azul)}
.card-img{aspect-ratio:1;background:var(--cinza);cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.3s}
.card:hover .card-img img{transform:scale(1.05)}
.sem-foto{color:#aab;font-size:14px}
.card-info{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.tag{background:#eef0ff;color:var(--azul);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;align-self:flex-start}
.cod{color:#8a8ba3;font-size:12px;font-weight:500}
.card-info h3{font-size:16px;line-height:1.35;font-weight:600}
.desc{color:#6a6c85;font-size:13px}
.preco{font-size:20px;font-weight:700;color:var(--azul);margin-top:auto}
.vazio{text-align:center;color:#8a8ba3;padding:60px 0;grid-column:1/-1}

/* ============================================================
   BOTÃO COMPRAR (VERDE)
   ============================================================ */
.btn-comprar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:11px 16px;
  background:var(--verde);
  color:#fff;
  border:none;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.3px;
  cursor:pointer;
  transition:.2s;
  text-decoration:none;
  margin-top:8px;
  box-shadow:0 2px 8px rgba(37,211,102,.3);
}
.btn-comprar:hover{
  background:var(--verde-esc);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(37,211,102,.45);
  color:#fff;
}
.btn-comprar svg{display:block;flex-shrink:0}
.btn-comprar:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* No modal o botão fica um pouco maior */
.modal-info .btn-comprar{margin-top:auto;padding:14px;font-size:15px}

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.zap-float{
  position:fixed;
  right:20px;bottom:20px;
  width:60px;height:60px;
  border-radius:50%;
  background:var(--verde);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4);
  z-index:60;
  transition:.2s;
  animation:pulse 2s infinite;
}
.zap-float:hover{transform:scale(1.08)}
@keyframes pulse{
  0%,100%{box-shadow:0 8px 24px rgba(37,211,102,.4)}
  50%{box-shadow:0 8px 24px rgba(37,211,102,.7)}
}

/* ============================================================
   MODAL
   ============================================================ */
.modal{position:fixed;inset:0;background:rgba(20,20,40,.75);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}
.modal.open{display:flex;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-box{background:#fff;border-radius:16px;max-width:960px;width:100%;max-height:92vh;overflow:auto;display:grid;grid-template-columns:1.1fr 1fr;position:relative}
.modal-close{position:absolute;top:12px;right:14px;background:rgba(0,0,0,.5);color:#fff;border:none;width:36px;height:36px;border-radius:50%;font-size:22px;cursor:pointer;z-index:2;line-height:1}
.modal-galeria{position:relative;background:#0f0f1f;display:flex;align-items:center;justify-content:center;min-height:320px;flex-direction:column}
.modal-galeria img{max-height:65vh;object-fit:contain;width:100%}
.nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:18px;transition:.2s}
.nav:hover{background:rgba(255,255,255,.3)}
.nav.prev{left:12px}.nav.next{right:12px}
.thumbs{display:flex;gap:6px;padding:10px;background:rgba(0,0,0,.3);position:absolute;bottom:0;left:0;right:0;overflow-x:auto}
.thumbs img{width:48px;height:48px;object-fit:cover;border-radius:6px;cursor:pointer;opacity:.6;border:2px solid transparent;flex-shrink:0}
.thumbs img.active{opacity:1;border-color:var(--laranja)}
.modal-info{padding:28px;display:flex;flex-direction:column;gap:12px}
.modal-info h2{font-size:22px;color:var(--azul)}
.modal-info #mDesc{color:#4a4c66;font-size:14px;white-space:pre-wrap}

/* ============================================================
   FOOTER — AZUL/ROXO COM LETRAS BRANCAS
   ============================================================ */
.footer{background:var(--azul);color:#fff;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;padding:50px 20px}
.footer h3{color:#fff;margin-bottom:12px;font-size:20px;font-weight:700}
.footer h4{color:var(--laranja);margin-bottom:12px;font-size:15px;font-weight:600}
.footer p{
  font-size:14px;
  color:#fff;
  opacity:.92;
  margin-bottom:6px;
  line-height:1.5;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.footer a{color:#fff;opacity:.92;transition:.2s;text-decoration:none;border-bottom:1px solid transparent}
.footer a:hover{color:var(--laranja);opacity:1;border-bottom-color:var(--laranja)}
.footer a:focus{outline:2px solid var(--laranja);outline-offset:2px;border-radius:4px}
.footer-bottom{background:rgba(0,0,0,.18);padding:16px;text-align:center;font-size:13px;color:#fff;opacity:.9;line-height:1.6}

/* ============================================================
   MENU DROPDOWN DE CATEGORIAS (topo)
   ============================================================ */
.menu-drop{position:relative}
.menu .menu-drop-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#fff}
.menu .menu-drop-toggle .caret{font-size:10px;transition:.2s;transform:translateY(-1px)}
.menu-drop:hover .menu-drop-toggle .caret{transform:translateY(0) rotate(180deg)}
.menu-drop-toggle:hover{color:var(--azul)}

.menu-drop-panel{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  padding-top:12px;   /* área de "ponte" — sem margin-top! */
  z-index:100;
}
.menu-drop:hover .menu-drop-panel{display:block;animation:fade .15s}

.menu-drop-inner{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:14px;
  box-shadow:0 20px 50px rgba(20,20,60,.18);
  padding:10px;
  min-width:280px;
}

/* Força cor escura em TODOS os links do painel */
.menu .menu-drop-panel a,
.menu .menu-drop-panel .drop-pai,
.menu .menu-drop-panel .drop-sub a{
  color:var(--texto) !important;
}
.menu .menu-drop-panel a:hover,
.menu .menu-drop-panel .drop-pai:hover{
  color:var(--azul) !important;
}

.drop-grupo{position:relative}
.drop-pai{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  transition:.15s;
}
.menu .menu-drop-panel .drop-pai:hover{background:#eef0ff}
.drop-pai .caret-right{color:var(--laranja);font-weight:700;font-size:16px}
.drop-pai.sem-filhas{justify-content:flex-start}

.drop-sub{
  display:none;
  position:absolute;
  top:-10px;
  left:100%;
  padding-left:8px;   /* em vez de margin-left:6px */
  z-index:101;
}
.drop-grupo:hover .drop-sub{display:block;animation:fade .15s}

.drop-sub-inner{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:12px;
  box-shadow:0 20px 50px rgba(20,20,60,.18);
  padding:8px;
  min-width:240px;
  max-height:70vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.menu .menu-drop-panel .drop-sub a{
  padding:8px 12px;
  border-radius:6px;
  font-size:13px;
  white-space:nowrap;
  transition:.15s;
  display:block;
}
.menu .menu-drop-panel .drop-sub a:hover{background:var(--azul);color:#fff !important}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media(max-width:820px){
  .menu{display:none}
  .menu.mobile-open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--laranja);flex-direction:column;padding:16px 20px;gap:14px}

  .modal-box{grid-template-columns:1fr}
  .modal-galeria img{max-height:45vh}
  .hero{padding:50px 0}

  .cat-sub{position:static;display:none;box-shadow:none;border:none;padding:6px 0 6px 12px;margin-top:4px}
  .cat-grupo.aberto .cat-sub{display:flex}

  .menu-drop-panel{position:static;box-shadow:none;border:none;padding:0;margin-top:6px;min-width:0;background:transparent}
  .menu-drop:hover .menu-drop-panel{display:none}
  .menu-drop.aberto .menu-drop-panel{display:block}
  .menu .menu-drop-panel a,
  .menu .menu-drop-panel .drop-pai{color:#fff !important}
  .drop-sub{position:static;left:auto;top:auto;margin-left:12px;margin-top:4px;box-shadow:none;border:none;max-height:none;padding:0;background:transparent}
  .drop-grupo:hover .drop-sub{display:none}
  .drop-grupo.aberto .drop-sub{display:flex}
  .menu .menu-drop-panel .drop-sub a{color:rgba(255,255,255,.9) !important}
  .menu .menu-drop-panel .drop-sub a:hover{background:rgba(0,0,0,.15);color:#fff !important}
}

/* ============================================================
   PÁGINA DE CONTATO
   ============================================================ */

/* ---------- CARDS DE CONTATO ---------- */
.contato-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  padding:0 20px;
  margin-bottom:50px;
}

.contato-card{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:16px;
  padding:26px 20px;
  text-align:center;
  text-decoration:none;
  color:var(--texto);
  transition:.25s;
  box-shadow:0 4px 16px rgba(20,20,60,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.contato-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(20,20,60,.12);
  border-color:var(--azul);
}
.contato-card h3{
  font-size:16px;
  font-weight:700;
  color:var(--azul);
  margin:4px 0 2px;
}
.contato-card p{
  font-size:14px;
  color:var(--texto-suave, #6a6c85);
  font-weight:500;
  word-break:break-word;
}

.icone{
  width:56px;height:56px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  margin-bottom:6px;
}
.icone-tel   {background:linear-gradient(135deg,#3E4095,#2c2e78)}
.icone-zap   {background:linear-gradient(135deg,#25D366,#1ebe5b)}
.icone-email {background:linear-gradient(135deg,#F58634,#d96f1e)}

/* ---------- FORMULÁRIO + MAPA ---------- */
.contato-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:32px;
  padding:0 20px 60px;
  align-items:start;
}

.contato-form-wrap,
.contato-mapa-wrap{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:18px;
  padding:28px;
  box-shadow:0 4px 16px rgba(20,20,60,.06);
}

.contato-form-wrap h2,
.contato-mapa-wrap h2{
  font-size:22px;
  color:var(--azul);
  margin-bottom:6px;
}
.subtitulo{
  color:#6a6c85;
  font-size:14px;
  margin-bottom:20px;
  line-height:1.5;
}

/* Campos */
.contato-form .campo{margin-bottom:16px}
.contato-form label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--texto);
  margin-bottom:6px;
}
.contato-form input,
.contato-form select,
.contato-form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--borda);
  border-radius:10px;
  font-family:inherit;
  font-size:14px;
  color:var(--texto);
  background:#fff;
  transition:.2s;
}
.contato-form input:focus,
.contato-form select:focus,
.contato-form textarea:focus{
  outline:none;
  border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(62,64,149,.12);
}
.contato-form textarea{
  min-height:130px;
  resize:vertical;
  line-height:1.6;
}

.btn-enviar{
  margin-top:8px !important;
  font-size:15px;
  padding:14px !important;
}
.aviso{
  font-size:12px;
  color:#8a8ba3;
  text-align:center;
  margin-top:10px;
  line-height:1.5;
}

/* Mapa */
.mapa{
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--borda);
  margin-bottom:16px;
}
.mapa iframe{display:block;width:100%}

.btn-ghost-mapa{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border:1px solid var(--azul);
  border-radius:10px;
  color:var(--azul);
  font-weight:600;
  font-size:14px;
  transition:.2s;
  text-decoration:none;
}
.btn-ghost-mapa:hover{
  background:var(--azul);
  color:#fff;
}

/* ---------- RESPONSIVO ---------- */
@media(max-width:900px){
  .contato-grid{grid-template-columns:1fr}
  .contato-cards{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .contato-cards{margin-top:-20px !important}
  .contato-card{padding:20px 14px}
  .contato-card p{font-size:13px}
  .contato-form-wrap,
  .contato-mapa-wrap{padding:22px}
}

/* ============================================================
   PÁGINA SEO / INSTITUCIONAL
   ============================================================ */
.seo-page .seo-content{
  max-width:860px;
  margin:0 auto;
  padding:50px 20px 70px;
  font-size:16px;
  line-height:1.75;
  color:#2a2c45;
}
.seo-page .seo-content h2{
  color:var(--azul);
  font-size:26px;
  margin:48px 0 18px;
  padding-bottom:10px;
  border-bottom:3px solid var(--laranja);
  display:inline-block;
}
.seo-page .seo-content h3{
  color:var(--azul);
  font-size:19px;
  margin:32px 0 12px;
  font-weight:600;
}
.seo-page .seo-content p{
  margin-bottom:16px;
}
.seo-page .seo-content ul,
.seo-page .seo-content ol{
  margin:16px 0 24px 24px;
}
.seo-page .seo-content li{
  margin-bottom:10px;
}
.seo-page .seo-content strong{
  color:var(--azul);
}
.seo-page .seo-content a{
  color:var(--laranja);
  text-decoration:underline;
}
.seo-page .seo-content a:hover{
  color:var(--azul);
}
.seo-page .cta-final{
  margin-top:48px;
  padding:32px;
  background:linear-gradient(135deg,#f4f5fa,#eef0ff);
  border-radius:16px;
  border-left:5px solid var(--laranja);
  text-align:center;
}
.seo-page .cta-final .btn-comprar{
  max-width:340px;
  margin:0 auto 12px;
}
.seo-page .cta-final .btn-ghost-mapa{
  display:inline-flex;
  margin-top:8px;
}

/* Corrige contraste do botão "Outras formas de contato" */
.seo-page .seo-content .btn-ghost-mapa,
.seo-page .seo-content .cta-final .btn-ghost-mapa{
  color:var(--azul) !important;
  text-decoration:none !important;
  border:1px solid var(--azul);
}
.seo-page .seo-content .btn-ghost-mapa:hover,
.seo-page .seo-content .cta-final .btn-ghost-mapa:hover{
  background:var(--azul);
  color:#fff !important;
}

/* Link do desenvolvedor no rodapé */
.footer-bottom a{
  color:var(--laranja);
  font-weight:600;
  text-decoration:none;
  transition:.2s;
  border-bottom:1px solid transparent;
}
.footer-bottom a:hover{
  color:#fff;
  border-bottom-color:var(--laranja);
}

/* ============================================================
   MENU MOBILE — HAMBÚRGUER + DRAWER
   ============================================================ */

/* Botão hambúrguer — escondido no desktop */
.menu-toggle{
  display:none;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:8px;
  flex-direction:column;
  gap:5px;
  border-radius:8px;
  transition:.2s;
}
.menu-toggle:hover{background:rgba(255,255,255,.15)}
.menu-toggle span{
  display:block;
  width:26px;
  height:3px;
  background:#fff;
  border-radius:2px;
  transition:.3s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

/* Overlay */
.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(20,20,40,.6);
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:998;
}
.menu-overlay.open{
  opacity:1;
  pointer-events:auto;
}

/* Drawer lateral */
.menu-drawer{
  position:fixed;
  top:0;
  left:0;
  width:320px;
  max-width:85vw;
  height:100vh;
  background:#fff;
  box-shadow:4px 0 30px rgba(0,0,0,.2);
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:999;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.menu-drawer.open{transform:translateX(0)}

/* Header do drawer */
.menu-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  background:var(--laranja);
  color:#fff;
}
.menu-drawer-title{
  font-size:18px;
  font-weight:700;
  letter-spacing:.5px;
}
.menu-drawer-close{
  background:rgba(255,255,255,.2);
  color:#fff;
  border:none;
  width:36px;
  height:36px;
  border-radius:50%;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.menu-drawer-close:hover{background:rgba(255,255,255,.35)}

/* Navegação do drawer */
.menu-drawer-nav{
  flex:1;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow-y:auto;
}
.menu-drawer-nav > a,
.menu-drawer-grupo > summary{
  padding:12px 14px;
  border-radius:10px;
  color:var(--texto);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
  transition:.15s;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  list-style:none;
}
.menu-drawer-nav > a:hover,
.menu-drawer-grupo > summary:hover{
  background:var(--cinza);
  color:var(--azul);
}
.menu-drawer-grupo > summary::-webkit-details-marker{display:none}
.menu-drawer-grupo > summary .caret{
  font-size:12px;
  transition:.2s;
  color:var(--laranja);
}
.menu-drawer-grupo[open] > summary .caret{
  transform:rotate(180deg);
}
.menu-drawer-grupo[open] > summary{
  background:var(--cinza);
  color:var(--azul);
  font-weight:600;
}

.menu-drawer-sub{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px 0 8px 12px;
  border-left:3px solid var(--laranja);
  margin:4px 0 4px 14px;
}
.menu-drawer-sub a{
  padding:9px 12px;
  border-radius:8px;
  font-size:14px;
  color:var(--texto-suave,#6a6c85);
  transition:.15s;
}
.menu-drawer-sub a:hover{
  background:var(--azul-claro,#eef0ff);
  color:var(--azul);
}

/* Footer do drawer com WhatsApp */
.menu-drawer-footer{
  padding:16px 20px;
  border-top:1px solid var(--borda);
}
.btn-zap-drawer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:14px;
  background:var(--verde,#25D366);
  color:#fff;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  transition:.2s;
  box-shadow:0 2px 8px rgba(37,211,102,.3);
}
.btn-zap-drawer:hover{
  background:var(--verde-esc,#1ebe5b);
  transform:translateY(-1px);
}

/* Em telas grandes, esconde tudo do mobile */
@media(min-width:821px){
  .menu-toggle,
  .menu-drawer,
  .menu-overlay{display:none !important}
}

/* Em telas pequenas, mostra o hambúrguer e esconde o menu desktop */
@media(max-width:820px){
  .menu-toggle{display:flex}
  .menu-desktop{display:none !important}
  .btn-zap-top{display:none} /* o WhatsApp fica dentro do drawer */
}