/* strapasson.dev · navegação comum a todas as páginas: home, soluções, guias, vitrines /para/*, 404 e privacidade.
   Cabeçalho que nunca some (compacto ao rolar), menu em tela cheia, "Voltar para..." e o caminho, barra de carregamento,
   transição entre páginas, balões de ajuda e o que é clicável ter cara de clicável. O comportamento está em /assets/js/navegacao.js.
   Base: /assets/marca/web/a.css. Lei: zero linhas, um vermelho por tela (nada aqui é vermelho), foco visível, toque de 48 px,
   movimento só com prefers-reduced-motion: no-preference (o a.css zera o resto). Carregue antes do CSS da página. */

:root { --hdr: 64px; }
html { scroll-padding-top: var(--hdr); }
.w { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--a-margem); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -120px; z-index: 100; padding: 12px 16px; border-radius: var(--radius-control); background: var(--ink); color: var(--bg); font-weight: 500; text-decoration: none; }
.pular:focus { top: 16px; }
.ic { width: 24px; height: 24px; flex: none; }
.gl { width: 22px; height: 22px; flex: none; }
:is(.a-botao, .a-link) svg.gl { width: 22px; height: 22px; translate: none; }

/* ---------- o que é clicável tem cara de clicável ---------- */
:where(a[href], button:not(:disabled), summary, [popovertarget]) { cursor: pointer; }
@media (hover: hover) {
  :is(.nav, .rodape nav, .menu-pag, .v-contato) :is(a, button):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}

/* ---------- cabeçalho: fixo e sempre à vista; ao rolar fica mais baixo e ganha o fundo de superfície (navegacao.js põe .compacto) ---------- */
.cab { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--bg); view-transition-name: cab; transition: background-color var(--a-estado) var(--a-assentar); }
/* rolou: material fosco e borda de rolagem (V-58); sólido com as preferências de acessibilidade */
.cab.compacto { background: var(--surface); background: color-mix(in srgb, var(--surface) var(--a-mat-alfa), transparent); }
.cab.compacto::after { content: ""; position: absolute; inset: 100% 0 auto; height: 16px; pointer-events: none; background: linear-gradient(var(--surface), transparent); }
@media (hover: hover) and (pointer: fine) { .cab.compacto { -webkit-backdrop-filter: blur(var(--a-mat-blur)); backdrop-filter: blur(var(--a-mat-blur)); } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active), print {
  .cab.compacto { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cab.compacto::after { content: none; }
}
@media (prefers-contrast: more) { .cab.compacto { outline: 1px solid var(--ink); outline-offset: -1px; } }
.cab-barra { display: flex; align-items: center; gap: 32px; height: var(--hdr); }
.cab.compacto .cab-barra { height: 56px; }
.logo { display: flex; align-items: center; min-height: 48px; color: var(--ink); margin-right: auto; }
.logo svg { height: 18px; width: 156px; }
.nav, .cab .a-botao { display: none; }
.nav a, .nav button { display: inline-flex; align-items: center; min-height: 48px; padding: 0; border: 0; background: none; font: 500 16px/1 var(--font-sans); color: var(--ink); text-decoration: none; }
.menu-botao, .menu-fechar { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-right: -4px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: 500 18px/1 var(--font-sans); }

/* ---------- menu: camada em tela cheia (popover nativo, abre sem JS), os sete casos a um toque, WhatsApp preso embaixo ---------- */
.menu { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0 0 16px; border: 0; overflow: auto; background: var(--bg); color: var(--ink);
  transition: opacity 200ms var(--a-assentar), translate 200ms var(--a-assentar), display 200ms allow-discrete, overlay 200ms allow-discrete; }
.menu:not(:popover-open) { opacity: 0; translate: 0 8px; }
@starting-style { .menu:popover-open { opacity: 0; translate: 0 8px; } }
.menu nav { display: grid; justify-items: start; }
.menu .a-rotulo { margin-top: 24px; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu-cen { width: 100%; margin-top: 8px; }
.menu-cen a { display: flex; align-items: center; gap: 16px; min-height: 56px; font: 500 21px/1.15 var(--font-sans); letter-spacing: -0.015em; text-decoration: none; }
.menu-cen a[aria-current] { color: var(--ink-muted); }
.menu-pag { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 16px; }
.menu-pag a { display: inline-flex; align-items: center; min-height: 48px; font-size: 18px; text-decoration: none; color: var(--ink-muted); }
.menu .pausa { margin-top: 8px; }
.menu .a-botao { position: sticky; bottom: 16px; margin-top: 16px; width: 100%; justify-content: center; }
.pausa { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0; border: 0; background: none; font: 500 14px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.pausa::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
[data-pausa] .pausa::before { border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; width: 0; height: 0; }
html:not(.js) .pausa { display: none; }

/* ---------- topo do conteúdo: "Voltar para <onde estava>" (navegacao.js) e o caminho da seção ----------
   Sem trilha, fica só o caminho. Com trilha, o "Voltar" vem primeiro; no celular ele ocupa o lugar do caminho (a mesma altura: nada pula). */
.caminho { display: flex; flex-wrap: wrap; align-items: center; gap: 0 32px; min-height: 48px; padding-top: calc(var(--hdr) + 8px); }
.trilha { display: flex; align-items: center; gap: 0 10px; min-width: 0; max-width: 100%; min-height: 48px; }
.trilha > * { flex: none; }
.trilha a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* a página atual fica numa linha só: nome longo (guia) termina em reticências, sem seta sobrando no fim da linha */
.trilha [aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
.voltar { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font: 500 17px/1.35 var(--font-sans); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.voltar .ic { width: 20px; height: 20px; rotate: 180deg; transition: translate var(--a-estado) var(--a-assentar); }
.voltar:focus-visible .ic { translate: -3px 0; }
@media (hover: hover) { .voltar:hover .ic { translate: -3px 0; } }
@media (max-width: 767px) {
  .caminho.com-volta .trilha { display: none; }
  /* o logo já leva ao início: com três níveis ou mais, o caminho começa na seção e cabe numa linha */
  .trilha:has(> :nth-child(4)) > a:first-child, .trilha:has(> :nth-child(4)) > a:first-child + span { display: none; }
}

/* ---------- balão de ajuda: só onde tira dúvida real (o que acontece no WhatsApp, o que é a demonstração). <details>, abre sem JS ---------- */
.ajuda { max-width: 32em; }
.ajuda > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; list-style: none; }
.ajuda > summary::-webkit-details-marker { display: none; }
.ajuda > summary::after { content: "?" / ""; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: var(--radius-control);
  background: var(--line); color: var(--ink); font: 500 15px/1 var(--font-sans); transition: background-color 200ms var(--a-assentar), color 200ms var(--a-assentar); }
.ajuda[open] > summary::after { background: var(--ink); color: var(--bg); }
@media (hover: hover) { .ajuda > summary:hover::after { background: var(--ink); color: var(--bg); } }
details.ajuda > p { margin-top: 4px; padding: 14px 16px; border-radius: var(--radius-tag) var(--radius-panel) var(--radius-panel) var(--radius-panel); background: var(--surface);
  font: 400 16px/1.5 var(--font-sans); letter-spacing: 0; text-transform: none; text-align: left; color: var(--ink); text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) { details.ajuda[open] > p { animation: a-entra 300ms var(--a-tipo); } }

/* ---------- carregamento: uma barra fina na cor da tinta, só quando a próxima página demora (navegacao.js, depois de 150 ms) ---------- */
.carregando { position: fixed; z-index: 60; inset: 0 auto auto 0; width: 100%; height: 3px; background: var(--ink); transform-origin: 0 50%; scale: 0 1; opacity: 0; pointer-events: none; }
.carregando.on { opacity: 1; scale: .85 1; transition: scale 8s cubic-bezier(.08, .6, .2, 1), opacity 150ms linear; }

/* ---------- transição entre páginas (View Transitions entre documentos): troca curta, cabeçalho parado.
   Navegador sem suporte ignora e troca de página como sempre. Com movimento reduzido, sem transição. ---------- */
@view-transition { navigation: auto; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: var(--a-assentar); }
::view-transition-group(cab) { animation-duration: 200ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- computador ---------- */
@media (min-width: 900px) {
  :root { --hdr: 80px; }
  .cab.compacto .cab-barra { height: 64px; }
  .nav { display: flex; gap: 32px; }
  .nav .so-largo { display: none; } /* entre 900 e 1099 px não cabe: fica no menu */
  .cab .a-botao { display: inline-flex; min-height: 48px; padding: 12px 20px; font-size: 16px; }
  .cab .a-botao .gl { width: 20px; height: 20px; }
  .menu-botao { display: none; }
  .logo svg { height: 20px; width: 173px; }
}
@media (min-width: 1100px) { .nav .so-largo { display: inline-flex; } }