/* Cabeçalho, menu de produtos, navegação da página e tema escuro.
   O mesmo arquivo nas quatro páginas: o cabeçalho não muda de lugar nem de tamanho entre elas. */

:root{
  --bg:#fff;
  --nav-h:44px;
  --nav-bg:rgba(255,255,255,.8);
  --nav-line:rgba(0,0,0,.08);
  --nav-txt:rgba(0,0,0,.8);
  --painel:#fff;
  --veu:rgba(232,232,237,.4);
}
/* escuro só quando a pessoa escolhe no botão do cabeçalho (o padrão é sempre o claro) */
html[data-tema=escuro]{
  color-scheme:dark;
  --bg:#000;
  --ink:#f5f5f7;
  --ink-2:#d2d2d7;
  --muted:#a1a1a6;
  --line:#38383a;
  --bg-alt:#161617;
  --accent:#ff7a45;
  --accent-hover:#ff9466;
  --nav-bg:rgba(22,22,23,.8);
  --nav-line:rgba(255,255,255,.1);
  --nav-txt:rgba(255,255,255,.8);
  --painel:#161617;
  --veu:rgba(0,0,0,.45);
}
body{background:var(--bg)}
[id]{scroll-margin-top:var(--nav-h)}

/* ---------- barra ---------- */
.nav{position:sticky;top:0;z-index:50;color:var(--ink);background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--nav-line);transition:background .25s}
.nav.prod-aberto{background:var(--painel)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);width:min(var(--wrap),100% - 44px);margin-inline:auto}
.brand{font-size:21px;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.nav-in > .brand{font-size:19px}
.brand span{color:var(--brand)}
/* no computador, os itens do menu viram irmãos do logo e se espaçam por igual */
.nav-links{display:contents}
.nav-links > a,.nav-prod-btn{font-size:12px;line-height:1;letter-spacing:-.01em;color:var(--nav-txt);transition:color .2s}
.nav-links > a:hover,.nav-prod-btn:hover,.nav-prod-btn[aria-expanded=true]{color:var(--ink)}
.nav-in > .btn--sm{min-height:26px;padding:0 12px;font-size:12px}
.nav-toggle{display:none}

/* botão de tema: um ícone pequeno no canto direito */
.tema{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;margin-right:-6px;padding:0;border:0;border-radius:50%;background:none;color:var(--nav-txt);cursor:pointer;transition:color .2s,background .2s}
.tema:hover{color:var(--ink);background:var(--nav-line)}
.tema svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tema .sol,html[data-tema=escuro] .tema .lua{display:none}
html[data-tema=escuro] .tema .sol{display:block}

/* ---------- painel de produtos: largura total, desce do cabeçalho ---------- */
.nav-prod{display:flex;align-items:center;height:100%}
.nav-prod-btn{display:inline-flex;align-items:center;height:100%;padding:0;border:0;background:none;font-family:inherit;cursor:pointer}
.nav-prod-painel{position:absolute;top:100%;left:0;right:0;display:grid;grid-template-rows:0fr;background:var(--painel);visibility:hidden;transition:grid-template-rows .25s cubic-bezier(.4,0,.6,1),visibility 0s .25s}
.nav.prod-aberto .nav-prod-painel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .25s cubic-bezier(.4,0,.6,1)}
.nav-prod-corpo{min-height:0;overflow:hidden}
.nav-prod-in{display:flex;gap:clamp(48px,8vw,96px);width:min(var(--wrap),100% - 44px);margin-inline:auto;padding:40px 0 64px;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
.nav.prod-aberto .nav-prod-in{opacity:1;transform:none;transition:opacity .3s .08s,transform .3s .08s cubic-bezier(.4,0,.6,1)}
.painel-rot{margin-bottom:14px;font-size:12px;color:var(--muted)}
.painel-prod{display:grid;gap:18px}
.painel-prod a{display:block}
.prod-nome{display:block;font-size:24px;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:var(--ink);transition:color .2s}
.prod-desc{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--muted)}
.painel-prod a:hover .prod-nome,.painel-prod a[aria-current=page] .prod-nome{color:var(--accent)}
.painel-mais{display:grid;gap:10px}
.painel-mais a{font-size:12px;font-weight:600;color:var(--ink-2);transition:color .2s}
.painel-mais a:hover{color:var(--accent)}

/* a página atrás do painel fica desfocada e escurecida */
.nav-veu{position:fixed;inset:0;z-index:45;background:var(--veu);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.nav-veu.is-on{opacity:1;visibility:visible;transition:opacity .25s}

/* ---------- navegação da página de produto, igual nas três ---------- */
.subnav{position:sticky;top:var(--nav-h);z-index:40;background:var(--nav-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--nav-line)}
.subnav-in{display:flex;align-items:center;gap:24px;height:52px;width:min(var(--wrap),100% - 44px);margin-inline:auto}
.subnav-nome{flex:none;font-size:21px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.subnav-links{display:flex;gap:24px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.subnav-links::-webkit-scrollbar{display:none}
.subnav-links a{flex:none;font-size:12px;color:var(--nav-txt);white-space:nowrap;transition:color .2s}
.subnav-links a:hover{color:var(--ink)}
.subnav ~ main [id]{scroll-margin-top:calc(var(--nav-h) + 52px)}

/* ---------- tema escuro nas peças com cor fixa ---------- */
html[data-tema=escuro] .skip{color:var(--bg)}
html[data-tema=escuro] .btn:not(.btn--contorno){background:#d4400a}
html[data-tema=escuro] .btn:not(.btn--contorno):hover{background:#e5521a}
html[data-tema=escuro] .btn--contorno{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
html[data-tema=escuro] .btn--contorno:hover{background:rgba(255,255,255,.08)}
html[data-tema=escuro] .card,html[data-tema=escuro] .plano{background:#1d1d1f}
html[data-tema=escuro] .js .statement.words-on .w{color:#3a3a3c}
html[data-tema=escuro] .js .statement.words-on .w.on{color:var(--ink)}
html[data-tema=escuro] .win{background:#1c1c1e;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 100px -40px rgba(0,0,0,.9)}
html[data-tema=escuro] .win-bar{background:#2c2c2e;border-bottom-color:rgba(255,255,255,.06)}
html[data-tema=escuro] .win-bar b{background:#3a3a3c}
html[data-tema=escuro] .tabs button[aria-selected=true]{background:#3a3a3c;box-shadow:none}
html[data-tema=escuro] .views{background:#1c1c1e}

/* ---------- celular: duas linhas abrem a tela cheia ---------- */
@media (max-width:734px){
  .nav-in{justify-content:flex-start;gap:10px}
  .nav-in > .btn--sm{margin-left:auto}
  .tema{margin:0}
  .nav-links > a,.nav-prod-btn{display:none}
  .nav-toggle{display:inline-flex;flex:none;flex-direction:column;justify-content:center;gap:6px;width:40px;height:40px;margin-right:-10px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
  .nav-toggle span{display:block;width:17px;height:1.5px;margin:0 auto;border-radius:2px;background:currentColor;transition:transform .3s var(--ease)}
  .nav.is-open .nav-toggle span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .nav.is-open .nav-toggle span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  /* sem o blur com o menu aberto: o blur prende o painel fixo dentro da barra */
  .nav.is-open{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-prod-painel,.nav.prod-aberto .nav-prod-painel{position:fixed;top:var(--nav-h);bottom:0;display:block;overflow-y:auto;background:var(--bg);visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
  .nav.is-open .nav-prod-painel{visibility:visible;opacity:1;transition:opacity .25s}
  .nav-prod-corpo{overflow:visible}
  .nav-prod-in,.nav.prod-aberto .nav-prod-in{flex-direction:column;gap:44px;width:auto;padding:28px 40px 48px;opacity:1;transform:none}
  .painel-prod{gap:20px}
  .prod-nome{font-size:28px;font-weight:700}
  .prod-desc{font-size:14px}
  .painel-mais{gap:14px}
  .painel-mais a{font-size:17px}
  html.menu-aberto{overflow:hidden}
  /* o balão do chat do Zermo some enquanto o menu ocupa a tela */
  html.menu-aberto [data-zermo-webchat]{display:none!important}
  .subnav-in{gap:16px}
  .subnav-nome{font-size:19px}
  .subnav-links{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .nav-prod-painel,.nav-prod-in,.nav-veu{transition:none!important}
}