/* home-w2-navegacao (06/10/2026): topo, orientação e rodapé da home.
   Inspirado no guia /leadlovers2026/design/navegacao/: só transform e opacity
   animam, curva power3.out, alvos de 44 px, aria-current na âncora ativa. */

:root {
  --w2-ease: cubic-bezier(.215, .61, .355, 1);
  --w2-spring: cubic-bezier(.34, 1.56, .64, 1);
  --w2-grad: var(--grad-aurora, linear-gradient(90deg, #0176d3, #7c5cff 55%, #ff5a5f));
  --w2-grad-brasil: var(--grad-brasil, linear-gradient(90deg, #12a150, #ffc531 50%, #0176d3));
  --w2-glass: rgb(250 250 247 / 90%);
  --w2-header-shadow: 0 10px 30px rgb(20 38 55 / 10%);
}
:root[data-theme="dark"] {
  --w2-glass: rgb(14 24 33 / 90%);
  --w2-header-shadow: 0 10px 30px rgb(0 0 0 / 38%);
}

/* Tons por seção (trilho, painel do menu e rodapé). */
:where(.section-rail a, #site-nav a, .site-footer nav a) { --w2-tone: var(--acc-azul, #0176d3); --w2-tone-ink: var(--acc-azul-ink, #005ea8); }
[data-tone="verde"] { --w2-tone: var(--acc-verde, #12a150); --w2-tone-ink: var(--acc-verde-ink, #0f6b3a); }
[data-tone="amarelo"] { --w2-tone: var(--acc-amarelo, #ffc531); --w2-tone-ink: var(--acc-amarelo-ink, #7a5300); }
[data-tone="coral"] { --w2-tone: var(--acc-coral, #ff5a5f); --w2-tone-ink: var(--acc-coral-ink, #b3262b); }
[data-tone="violeta"] { --w2-tone: var(--acc-violeta, #7c5cff); --w2-tone-ink: var(--acc-violeta-ink, #5536d6); }
:root[data-theme="dark"] :where(.section-rail a, #site-nav a, .site-footer nav a) { --w2-tone-ink: var(--acc-azul-ink, #8acaff); }
:root[data-theme="dark"] [data-tone="verde"] { --w2-tone-ink: var(--acc-verde-ink, #7ee2a8); }
:root[data-theme="dark"] [data-tone="amarelo"] { --w2-tone-ink: var(--acc-amarelo-ink, #ffd76a); }
:root[data-theme="dark"] [data-tone="coral"] { --w2-tone-ink: var(--acc-coral-ink, #ff9a9d); }
:root[data-theme="dark"] [data-tone="violeta"] { --w2-tone-ink: var(--acc-violeta-ink, #b9a8ff); }

/* ---------- Header: vidro, sombra e compactação ao rolar ---------- */
.site-header { transition: background-color 220ms ease, box-shadow 260ms ease, border-color 220ms ease, margin-bottom 260ms var(--w2-ease); }
.site-header > .shell { transition: min-height 260ms var(--w2-ease); }
.js .site-header.is-scrolled { background: var(--w2-glass); border-bottom-color: transparent; box-shadow: var(--w2-header-shadow); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .js .site-header.is-scrolled { -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
}
/* A altura visual cai 20 px e a margem devolve os mesmos 20 px: o conteúdo
   abaixo não se desloca (sem CLS) e o painel do menu acompanha a variável. */
.js .site-header.is-compact { --header-height: 64px; margin-bottom: 20px; }

/* Logo: o símbolo gira de leve e um traço em gradiente cresce sob o nome. */
.site-header .brand svg { transition: transform 420ms var(--w2-spring); }
.site-header .brand span { padding-bottom: 4px; background: var(--w2-grad) no-repeat 0 100% / 0 3px; transition: background-size 320ms var(--w2-ease); }
.site-header .brand:is(:hover, :focus-visible) svg { transform: rotate(-12deg) scale(1.08); }
.site-header .brand:is(:hover, :focus-visible) span { background-size: 100% 3px; }
#theme-toggle svg { transition: transform 420ms var(--w2-spring); }
#theme-toggle:hover svg { transform: rotate(-24deg); }

/* Indicador deslizante da navegação (desktop, criado pelo JS). */
.site-nav.has-indicator { position: relative; gap: 4px; }
.site-nav.has-indicator a { z-index: 1; padding-inline: 10px; }
.site-nav.has-indicator a::after { display: none; }
.nav-indicator { position: absolute; z-index: 0; top: 50%; left: 0; width: 0; height: 36px; margin-top: -18px; border-radius: 999px; background: var(--brand-tint); pointer-events: none; opacity: 0; transform: translateX(var(--w2-x, 0)); transition: transform 320ms var(--w2-ease), width 320ms var(--w2-ease), opacity 200ms ease; }
.nav-indicator::after { position: absolute; content: ""; left: 14px; right: 14px; bottom: -4px; height: 3px; border-radius: 3px; background: var(--w2-grad); }
.nav-indicator.is-visible { opacity: 1; }
.site-nav a[aria-current="true"] { color: var(--brand-text); }
@media (max-width: 1050px) { .site-nav.has-indicator { gap: 2px; } .site-nav.has-indicator a { padding-inline: 6px; } }
@media (max-width: 900px) { .site-nav.has-indicator { gap: 0; } .nav-indicator { display: none; } }

/* Ícone do menu vira X quando o painel abre. */
#menu-toggle .menu-bar { transform-origin: 12px 12px; transition: transform 260ms var(--w2-ease), opacity 160ms ease; }
#menu-toggle[aria-expanded="true"] .menu-bar-top { transform: rotate(45deg) translateY(6px); }
#menu-toggle[aria-expanded="true"] .menu-bar-mid { opacity: 0; transform: scaleX(0); }
#menu-toggle[aria-expanded="true"] .menu-bar-bottom { transform: rotate(-45deg) translateY(-6px); }
#menu-toggle[aria-expanded="true"] { background: var(--brand-tint); border-color: var(--line-strong); }

/* Painel móvel: faixa em gradiente, marcador colorido por item, entrada em sequência. */
@media (max-width: 900px) {
  #menu-toggle, #theme-toggle { width: 44px; height: 44px; }
  @supports selector(:popover-open) {
    #site-nav:popover-open { padding-top: 14px; background: var(--w2-grad) no-repeat 0 0 / 100% 4px, var(--paper); border-radius: 0 0 var(--radius-lg, 24px) var(--radius-lg, 24px); }
    #site-nav:popover-open a { gap: 12px; padding-inline: 10px; border-radius: 12px; }
    #site-nav:popover-open a::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--w2-tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--w2-tone) 22%, transparent); }
    #site-nav:popover-open a:is(:hover, [aria-current="true"]) { background: var(--brand-tint); color: var(--brand-text); }
    #site-nav a:nth-of-type(5n+2) { --w2-tone: var(--acc-verde, #12a150); }
    #site-nav a:nth-of-type(5n+3) { --w2-tone: var(--acc-amarelo, #ffc531); }
    #site-nav a:nth-of-type(5n+4) { --w2-tone: var(--acc-coral, #ff5a5f); }
    #site-nav a:nth-of-type(5n) { --w2-tone: var(--acc-violeta, #7c5cff); }
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  @supports selector(:popover-open) {
    #site-nav:popover-open a { animation: w2-item-in 340ms var(--w2-ease) backwards; animation-delay: calc(70ms + var(--w2-i, 0) * 32ms); }
    #site-nav a:nth-of-type(2) { --w2-i: 1; } #site-nav a:nth-of-type(3) { --w2-i: 2; } #site-nav a:nth-of-type(4) { --w2-i: 3; }
    #site-nav a:nth-of-type(5) { --w2-i: 4; } #site-nav a:nth-of-type(6) { --w2-i: 5; } #site-nav a:nth-of-type(7) { --w2-i: 6; }
    #site-nav a:nth-of-type(8) { --w2-i: 7; }
  }
}
@keyframes w2-item-in { from { opacity: 0; transform: translateX(-14px); } }

/* ---------- Barra de progresso de leitura ---------- */
.reading-progress { display: none; }
.js .reading-progress { display: block; position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 4px; pointer-events: none; }
.reading-progress-bar { display: block; height: 100%; background: var(--w2-grad); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* ---------- Trilho de seções (só em telas largas) ---------- */
.section-rail { display: none; }
@media (min-width: 1360px) {
  .section-rail { display: block; position: fixed; z-index: 20; top: 50%; right: 16px; transform: translateY(-50%); }
  .section-rail ol { position: relative; margin: 0; padding: 0; list-style: none; }
  .section-rail ol::before, .section-rail ol::after { position: absolute; content: ""; top: 22px; bottom: 22px; right: 21px; width: 2px; border-radius: 2px; background: var(--line); }
  .section-rail ol::after { background: var(--w2-grad-brasil); transform: scaleY(var(--w2-rail, 0)); transform-origin: 50% 0; }
  .section-rail li { position: relative; z-index: 1; }
  .section-rail a { position: relative; display: flex; justify-content: flex-end; align-items: center; width: 44px; height: 44px; color: var(--ink); text-decoration: none; }
  .rail-dot { width: 14px; height: 14px; margin-right: 15px; border: 2px solid var(--ink-muted); border-radius: 50%; background: var(--paper); transition: transform 260ms var(--w2-spring), background-color 200ms ease, border-color 200ms ease; }
  .section-rail a:is(:hover, :focus-visible) .rail-dot { transform: scale(1.25); border-color: var(--w2-tone-ink); }
  .section-rail a[aria-current="true"] .rail-dot { transform: scale(1.35); border-color: var(--w2-tone-ink); background: var(--w2-tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w2-tone) 25%, transparent); }
  .rail-label { position: absolute; right: 48px; top: 50%; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-size: .875rem; font-weight: 650; line-height: 1.3; white-space: nowrap; opacity: 0; transform: translate(8px, -50%); pointer-events: none; transition: opacity 180ms ease, transform 220ms var(--w2-ease); }
  .rail-label::before { display: inline-block; content: ""; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--w2-tone); vertical-align: 1px; }
  .section-rail a:is(:hover, :focus-visible) .rail-label { opacity: 1; transform: translate(0, -50%); }
  .section-rail.labels-dismissed .rail-label { opacity: 0 !important; }
}

/* ---------- Voltar ao topo, com anel de progresso ---------- */
.back-to-top { display: flex; justify-content: center; align-items: center; gap: 8px; width: max-content; min-height: 44px; margin: 0 auto 8px; padding: 0 14px; color: var(--brand-text); font-weight: 650; }
.back-to-top-ring { width: 32px; height: 32px; }
.ring-track, .ring-value { fill: none; stroke-width: 3; }
.ring-track { stroke: var(--line); }
.ring-value { stroke: url(#back-to-top-grad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--w2-progress, 1) * 100); transform: rotate(-90deg); transform-origin: 24px 24px; }
.ring-arrow { fill: none; stroke: var(--brand-text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ring-stop-a { stop-color: var(--acc-azul, #0176d3); }
.ring-stop-b { stop-color: var(--acc-violeta, #7c5cff); }
.ring-stop-c { stop-color: var(--acc-coral, #ff5a5f); }
.js .back-to-top { position: fixed; z-index: 25; right: 20px; bottom: 20px; width: 52px; height: 52px; margin: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-glow, 0 12px 30px rgb(1 118 211 / 22%)); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9); transition: opacity 220ms ease, transform 280ms var(--w2-spring), visibility 0s linear 280ms; }
.js .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms ease, transform 280ms var(--w2-spring), visibility 0s; }
.js .back-to-top .back-to-top-ring { width: 48px; height: 48px; }
.js .back-to-top:hover .ring-arrow { transform: translateY(-2px); }
.ring-arrow { transition: transform 220ms var(--w2-spring); }
.js .back-to-top-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) { .js .back-to-top { right: 14px; bottom: 14px; } }
@media print { .page-guide, .back-to-top { display: none !important; } }

/* ---------- Rodapé ---------- */
.site-footer { position: relative; border-top: 0; background: linear-gradient(180deg, var(--surface-raised), var(--paper) 70%); }
.site-footer::before { position: absolute; content: ""; top: 0; left: 0; right: 0; height: 5px; background: var(--w2-grad-brasil); }
.site-footer .brand span { color: var(--ink); }
.site-footer .brand svg { transition: transform 420ms var(--w2-spring); }
.site-footer .brand:hover svg { transform: rotate(-12deg) scale(1.06); }
.footer-top { align-items: flex-start; }
.site-footer .footer-top nav { display: grid; flex: 1 1 auto; max-width: 720px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 20px; }
.site-footer .footer-top nav a { position: relative; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: none; }
.site-footer .footer-top nav a::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--w2-tone); transition: transform 220ms var(--w2-spring); }
.site-footer .footer-top nav a:nth-child(5n+2) { --w2-tone: var(--acc-verde, #12a150); }
.site-footer .footer-top nav a:nth-child(5n+3) { --w2-tone: var(--acc-amarelo, #ffc531); }
.site-footer .footer-top nav a:nth-child(5n+4) { --w2-tone: var(--acc-coral, #ff5a5f); }
.site-footer .footer-top nav a:nth-child(5n) { --w2-tone: var(--acc-violeta, #7c5cff); }
.site-footer .footer-top nav a:nth-child(5n+2) { --w2-tone-ink: var(--acc-verde-ink, #0f6b3a); }
.site-footer .footer-top nav a:nth-child(5n+3) { --w2-tone-ink: var(--acc-amarelo-ink, #7a5300); }
.site-footer .footer-top nav a:nth-child(5n+4) { --w2-tone-ink: var(--acc-coral-ink, #b3262b); }
.site-footer .footer-top nav a:nth-child(5n) { --w2-tone-ink: var(--acc-violeta-ink, #5536d6); }
:root[data-theme="dark"] .site-footer .footer-top nav a:nth-child(5n+2) { --w2-tone-ink: var(--acc-verde-ink, #7ee2a8); }
:root[data-theme="dark"] .site-footer .footer-top nav a:nth-child(5n+3) { --w2-tone-ink: var(--acc-amarelo-ink, #ffd76a); }
:root[data-theme="dark"] .site-footer .footer-top nav a:nth-child(5n+4) { --w2-tone-ink: var(--acc-coral-ink, #ff9a9d); }
:root[data-theme="dark"] .site-footer .footer-top nav a:nth-child(5n) { --w2-tone-ink: var(--acc-violeta-ink, #b9a8ff); }
.site-footer .footer-top nav a:is(:hover, :focus-visible) { color: var(--w2-tone-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.site-footer .footer-top nav a:hover::before { transform: scale(1.5); }
.site-footer .footer-legal a, .site-footer .sources a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.site-footer .footer-legal a:hover, .site-footer .sources a:hover { color: var(--brand-text); text-decoration-color: currentColor; }
@media (max-width: 760px) {
  .site-footer .footer-top nav { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 340px) { .site-footer .footer-top nav { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header > .shell, .nav-indicator, .js .back-to-top, .rail-dot, .rail-label { transition: none !important; }
}
@media (forced-colors: active) {
  .reading-progress-bar, .nav-indicator { forced-color-adjust: none; background: Highlight; }
  .rail-dot { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .section-rail a[aria-current="true"] .rail-dot { background: Highlight; }
  .js .back-to-top { border: 1px solid ButtonText; }
}