/* Navigation — NavBar, Tabs, Accordion, Footer. */

/* ── NavBar ───────────────────────────────────────────────────────────── */
.vz-navbar{
  position:relative;z-index:40;display:flex;align-items:center;gap:var(--space-6);
  padding:var(--space-5) var(--gutter);
  background:var(--vz-navbar-bg);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
  border-bottom:var(--border-hair) solid var(--border-subtle);
}
.vz-navbar--sticky{position:sticky;top:0}
.vz-navbar__links{display:flex;align-items:center;gap:var(--space-6);flex:1;min-width:0}
.vz-navbar__link,.vz-navbar__utility{
  position:relative;padding:var(--vz-pad-nav-link);white-space:nowrap;
  font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-regular);
  color:var(--text-secondary);transition:color var(--dur-fast) var(--ease-out);
}
.vz-navbar__utility{display:inline-flex;align-items:center;gap:var(--vz-gap-xs);padding:0}
.vz-navbar__link.is-active{font-weight:var(--weight-semibold);color:var(--text-primary)}
.vz-navbar__link.is-active::after{
  /* translate (propriedade própria) e não transform: o keyframe vz-pulse anima transform:scale()
     e apagava o translateX(-50%) — o ponto ficava fora do centro do rótulo. */
  content:"";position:absolute;left:50%;bottom:var(--vz-offset-nav-dot);translate:-50% 0;
  width:var(--vz-size-2xs);height:var(--vz-size-2xs);border-radius:var(--radius-pill);background:var(--vz-mint-bright);
  animation:vz-pulse var(--vz-pulse-duration) var(--ease-in-out) infinite;
}
/* Hover coral só onde existe ponteiro de verdade: no toque o :hover gruda no link depois do clique
   e parecia "ativo". .is-hover (estado congelado da vitrine) continua valendo em qualquer tela. */
.vz-navbar__link.is-hover,.vz-navbar__utility.is-hover{color:var(--interactive-hover-soft)}
@media (hover:hover){
  .vz-navbar__link:hover,.vz-navbar__utility:hover{color:var(--interactive-hover-soft)}
}
.vz-navbar__brand{flex:0 0 auto;display:block}
.vz-navbar__end{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-5);flex:1}
.vz-navbar__menu{display:none;background:none;border:0;padding:0;cursor:pointer;color:var(--text-primary)}
.vz-navbar__menu-close{display:none}
/* A NavBar colapsa em 960 px, não em 760: com 4 links + logo central + CTA, entre 760 e 960 os
   rótulos quebravam em duas linhas ("Como / funciona"). Rótulo de navegação nunca quebra. */
@media (max-width:60em) /* 960 px — ver --vz-bp-nav */{
  .vz-navbar{flex-wrap:wrap}
  .vz-navbar__brand{order:-1}
  .vz-navbar__brand .vz-logo{height:var(--vz-logo-icon)}
  .vz-navbar__links{display:none;order:3;flex:1 0 100%;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding-top:var(--space-4)}
  /* Na lista vertical o ponto sob o rótulo parece solto entre dois itens: vai para a direita do
     rótulo, centrado na linha. Continua sendo o único indicador de ativo (regra da marca). */
  .vz-navbar__link.is-active::after{left:calc(100% + var(--space-3));top:50%;bottom:auto;translate:0 -50%}
  .vz-navbar.is-open .vz-navbar__links{display:flex}
  .vz-navbar__utility{display:none}
  .vz-navbar__menu{display:inline-flex}
  .vz-navbar.is-open .vz-navbar__menu-open{display:none}
  .vz-navbar.is-open .vz-navbar__menu-close{display:inline-flex}
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.vz-tabs{max-width:100%;min-width:0}  /* dentro de flex, sem isto a lista não encolhe e vaza */
.vz-tabs__list{display:inline-flex;max-width:100%;overflow-x:auto}
.vz-tabs--pill .vz-tabs__list{
  gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-pill);
  background:var(--surface-glass);border:var(--border-hair) solid var(--border-subtle);
}
.vz-tabs--underline .vz-tabs__list{gap:var(--space-6);border-bottom:var(--border-hair) solid var(--border-subtle)}
.vz-tabs__tab{
  position:relative;cursor:pointer;border:0;background:transparent;white-space:nowrap;
  font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-regular);color:var(--text-secondary);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.vz-tabs--pill .vz-tabs__tab{padding:var(--vz-pad-tab);border-radius:var(--radius-pill)}
.vz-tabs--underline .vz-tabs__tab{padding:var(--vz-pad-tab-underline)}
.vz-tabs__tab.is-selected{font-weight:var(--weight-semibold);color:var(--text-primary)}
.vz-tabs--pill .vz-tabs__tab.is-selected{background:var(--vz-petrol);color:var(--vz-offwhite)}
.vz-tabs--underline .vz-tabs__tab.is-selected::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--border-hair));height:var(--border-thick);background:var(--vz-mint-bright);
}
.vz-tabs__tab:is(:hover,.is-hover):not(.is-selected,:disabled){color:var(--interactive-hover-soft)}
.vz-tabs__tab:disabled{cursor:not-allowed;opacity:var(--vz-opacity-disabled-soft)}
.vz-tabs__panel{padding-top:var(--space-6)}
.vz-tabs__panel:focus-visible{outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}

/* ── Accordion ────────────────────────────────────────────────────────── */
.vz-accordion{display:flex;flex-direction:column}
.vz-accordion__item{border-bottom:var(--border-hair) solid var(--border-subtle)}
.vz-accordion__heading{margin:0;font:inherit}
.vz-accordion__trigger{
  display:flex;align-items:center;gap:var(--space-5);width:100%;
  padding:var(--space-5) 0;background:none;border:0;cursor:pointer;text-align:left;color:inherit;
}
.vz-accordion__index{flex:0 0 auto;font-family:var(--font-body);font-size:var(--text-micro);letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.vz-accordion__q{
  flex:1;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-body);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-secondary);
  transition:color var(--dur-fast) var(--ease-out);
}
.vz-accordion__item.is-open .vz-accordion__q{color:var(--text-primary)}
.vz-accordion__icon{
  color:var(--text-accent);
  transition:color var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.vz-accordion__icon--minus,.vz-accordion__item.is-open .vz-accordion__icon--plus{display:none}
.vz-accordion__item.is-open .vz-accordion__icon--minus{display:inline-flex}
.vz-accordion__trigger:is(:hover,.is-hover) .vz-accordion__q{color:var(--interactive-hover-soft)}
.vz-accordion__trigger:is(:hover,.is-hover) .vz-accordion__icon{color:var(--interactive-hover);transform:rotate(var(--vz-rotate-hover))}
.vz-accordion__region{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-out)}
.vz-accordion__item.is-open .vz-accordion__region{grid-template-rows:1fr}
.vz-accordion__clip{overflow:hidden}
.vz-accordion__a{
  max-width:var(--measure);padding:0 0 var(--space-6);
  font-family:var(--font-body);font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-brand);
}
.vz-accordion--numbered .vz-accordion__a{padding-left:var(--vz-indent-accordion)}
.vz-accordion__empty{padding:var(--space-5) 0;font-size:var(--text-body-sm);color:var(--text-muted);border-bottom:var(--border-hair) dashed var(--border-subtle)}

/* ── Footer ───────────────────────────────────────────────────────────── */
.vz-footer{
  padding:var(--space-16) var(--gutter) var(--space-8);
  background:var(--surface-sunken);border-top:var(--border-hair) solid var(--border-subtle);
}
.vz-footer__grid{
  display:grid;gap:var(--space-12);max-width:var(--container);margin:0 auto;
  grid-template-columns:minmax(var(--vz-footer-brand-min),1fr) repeat(auto-fit,minmax(var(--vz-footer-col-min),auto));
}
/* Mobile: marca ocupa a linha inteira e as colunas de links viram duas por linha — o
   minmax(220px) + minmax(150px) do desktop não cabe em 390 px e vazava para fora da tela. */
@media (max-width:47.5em){
  .vz-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10) var(--space-6)}
  .vz-footer__brand{grid-column:1 / -1}
}
.vz-footer__brand,.vz-footer__col{display:flex;flex-direction:column;gap:var(--space-3)}
.vz-footer__brand{gap:var(--space-4)}
/* align-self: sem ele o <img> estica na coluna e o SVG centraliza o desenho (logo "flutuando" no meio).
   Filtro: petróleo sobre o fundo escuro dá 2.47:1 — no tema escuro o logo sai monocromático claro. */
.vz-footer__logo{align-self:flex-start;filter:var(--vz-footer-logo-filter)}
.vz-footer__note{max-width:var(--vz-measure-note);font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-body)}
.vz-footer__socials{display:flex;gap:var(--space-3);margin-top:var(--space-2)}
.vz-footer__social{
  display:grid;place-items:center;width:var(--vz-size-social);height:var(--vz-size-social);
  border-radius:var(--radius-pill);border:var(--border-hair) solid var(--border-subtle);color:var(--text-secondary);
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.vz-footer__social:hover{color:var(--interactive-hover-soft);border-color:var(--interactive-hover)}
.vz-footer__link{font-size:var(--text-body-sm);color:var(--text-secondary)}
.vz-footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
  max-width:var(--container);margin:var(--space-12) auto 0;padding-top:var(--space-6);
  border-top:var(--border-hair) solid var(--border-subtle);
  font-size:var(--text-caption);color:var(--text-muted);
}