/* 2.11.2 - MOLDURA DO SITE DA EMPRESA (cabeçalho e rodapé iguais ao site institucional).
   Só aparece quando o marca.js da instalação tem menuSite/contato (ex.: Informática Criciúma).
   Cores e letras vêm das variáveis da marca (--accent, --ink...). Copiado do visual de
   www.informaticacriciuma.com.br (styles.css do site, 12/10/2026). */
.sm-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.logo .logo-site { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: inherit; }
.logo .logo-site .dot { color: var(--accent); }

/* cabeçalho (página de entrada) */
.sm-topo { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.sm-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 16px; }
.sm-nav .logo { color: var(--ink); text-decoration: none; display: flex; align-items: baseline; }
.sm-links { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; }
.sm-links a { position: relative; text-decoration: none; color: var(--ink-soft); font-size: 15px; font-weight: 500; padding-bottom: 4px; }
.sm-links a:hover { color: var(--primary); }
.sm-links a[aria-current="page"] { color: var(--ink); }
.sm-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); }
.sm-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 8px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; border: 1.5px solid var(--accent); background: var(--accent); color: var(--primary-dark); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.sm-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.sm-menu-btn { display: none; width: 40px; height: 40px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff; align-items: center; justify-content: center; cursor: pointer; }
.sm-menu-btn svg { width: 20px; height: 20px; color: var(--ink); }
.sm-painel { display: none; }

/* faixa de título (como o "page-intro" do site) */
.sm-intro { background: var(--primary-dark); color: #fff; padding: 56px 0 48px; }
.sm-olho { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.sm-olho > span { width: 30px; height: 2px; background: var(--accent); flex-shrink: 0; }
.sm-olho p { margin: 0; color: var(--accent); font-weight: 600; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; }
.sm-intro h1 { font-family: "Space Grotesk", sans-serif; font-size: clamp(30px, 4vw, 42px); color: #fff; max-width: 20ch; margin: 0 0 14px; line-height: 1.15; }
.sm-intro p.sm-lede { color: #C7C7C7; max-width: 58ch; font-size: 16px; margin: 0; }

/* rodapé (página de entrada e loja) */
.sm-rodape { background: var(--primary-dark); color: #ABABAB; padding: 56px 0 28px; margin-top: 40px; font-family: "IBM Plex Sans", sans-serif; }
.sm-rodape-grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid #262626; }
.sm-rodape .logo { color: #fff; margin-bottom: 10px; display: inline-flex; text-decoration: none; }
.sm-rodape p { color: #8A8A8A; font-size: 14px; max-width: 34ch; margin: 0 0 1em; line-height: 1.6; }
.sm-rodape h3 { color: #fff; font-size: 14px; margin: 0 0 14px; font-family: "Space Grotesk", sans-serif; font-weight: 600; }
.sm-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sm-rodape a { color: #ADADAD; text-decoration: none; font-size: 14px; }
.sm-rodape a:hover { color: var(--accent); }
.sm-rodape-base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 24px; }
.sm-rodape-base p { margin: 0; font-size: 13px; max-width: none; }
.sm-social { display: flex; gap: 14px; }
.sm-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #2A2A2A; display: flex; align-items: center; justify-content: center; }
.sm-social svg { width: 17px; height: 17px; color: #ABABAB; }
.sm-social a:hover { border-color: var(--accent); }
.sm-social a:hover svg { color: var(--accent); }

/* WhatsApp flutuante (igual ao site) */
.sm-zap { position: fixed; right: 20px; bottom: 20px; z-index: 80; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.22); text-decoration: none; animation: sm-pulso 3.2s ease-in-out infinite; }
.sm-zap svg { width: 28px; height: 28px; }
.sm-zap:hover { background: #1EBE5A; }
@keyframes sm-pulso { 0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 0 0 0 rgba(37,211,102,.35); } 50% { box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 0 0 8px rgba(37,211,102,0); } }
@media (prefers-reduced-motion: reduce) { .sm-zap { animation: none; } }

@media (max-width: 900px) { .sm-rodape-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .sm-links, .sm-nav .sm-btn { display: none; }
  .sm-menu-btn { display: flex; }
  .sm-painel { display: block; max-height: 0; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); transition: max-height .25s ease; }
  .sm-painel.aberto { max-height: 420px; }
  .sm-painel ul { list-style: none; margin: 0; padding: 18px 24px 22px; display: grid; gap: 4px; }
  .sm-painel a { display: block; padding: 12px 4px; text-decoration: none; color: var(--ink); font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line); }
  .sm-painel .sm-btn { display: flex; justify-content: center; margin: 8px 24px 20px; }
  .sm-rodape-grade { grid-template-columns: 1fr; gap: 28px; }
  .sm-zap { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}
/* na loja a barra de atalhos de baixo do celular fica por cima do botão flutuante: sobe o botão */
@media (max-width: 860px) { body.lj .sm-zap { bottom: 80px; } }
body.embed-mode .sm-rodape, body.embed-mode .sm-zap { display: none !important; }

/* com a moldura ligada, a página de entrada esconde o cabeçalho/rodapé simples dela e mostra a faixa de título */
.sm-ativa body > header:not(.sm-topo), .sm-ativa body > footer:not(.sm-rodape) { display: none; }
.sm-so-moldura { display: none; }
.sm-ativa .sm-so-moldura { display: block; }
.sm-ativa .sm-sem-moldura { display: none; }
.sm-topo .logo { margin: 0; max-width: none; padding: 0; }
.sm-rodape { text-align: left; }
.sm-rodape .logo { margin: 0 0 10px; max-width: none; padding: 0; }
.sm-ativa main { max-width: 1120px; padding-left: 24px; padding-right: 24px; }