/* ==========================================================================
   blind digital — navegação
   Conceito em produção: PORTAL RADIAL.
   O símbolo é o gatilho; ao abrir, os três arcos se afastam e cada um
   ancora um grupo de links na sua própria cor.

   Alternativa arquivada: assets/alt/nav-doca.css (ver README).
   ========================================================================== */

/* ==========================================================================
   Barra superior
   ========================================================================== */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 82px;
  padding-inline: var(--gutter);
  background: linear-gradient(to bottom, var(--paper) 26%, transparent);
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
.topbar.is-stuck {
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  backdrop-filter: blur(18px) saturate(1.7);
  border-bottom-color: var(--line);
}

/* trilho de progresso de leitura */
.topbar::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 2px;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--institutional-1), var(--institutional-2), var(--institutional-3));
}

.topbar__logo img { height: 38px; width: auto; }
.topbar__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

@media (max-width: 560px) {
  .topbar__logo img { height: 32px; }
  .topbar__end .btn--ghost { display: none; }
}

/* ==========================================================================
   Gatilho
   ========================================================================== */

.orb {
  position: relative;
  z-index: 61;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--glass);
  backdrop-filter: blur(10px);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.orb img {
  width: 22px; height: auto;
  transition: transform .6s var(--ease-out);
}
.orb:hover { border-color: var(--b2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--b2) 12%, transparent); }
.orb:hover img { transform: rotate(-14deg) scale(1.08); }
body.portal-open .orb img { transform: rotate(135deg) scale(.9); }
body.portal-open .orb { border-color: var(--b2); }

/* ==========================================================================
   Portal
   ========================================================================== */

.portal {
  position: fixed;
  inset: 0;
  z-index: 59;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(26px) saturate(1.5);
  clip-path: circle(0% at calc(100% - 34px) 50%);
  visibility: hidden;
  transition: clip-path .75s var(--ease-out), visibility 0s .75s;
}
body.portal-open .portal {
  clip-path: circle(150% at calc(100% - 34px) 50%);
  visibility: visible;
  transition: clip-path .75s var(--ease-out), visibility 0s;
}

/* arcos gigantes ao fundo, que se abrem junto */
.portal__arcs {
  position: absolute;
  width: min(78vmin, 640px);
  opacity: .13;
  pointer-events: none;
}
.portal__arcs .arc {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1s var(--ease-out);
}
body.portal-open .portal__arcs .arc[data-arc="1"] { transform: translate(-8%, 6%) scale(1.12); }
body.portal-open .portal__arcs .arc[data-arc="2"] { transform: translateY(-9%) scale(1.12); }
body.portal-open .portal__arcs .arc[data-arc="3"] { transform: translate(8%, 6%) scale(1.12); }

.portal__cols {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 72px);
  width: 100%;
  max-width: 940px;
  padding-inline: var(--gutter);
}
@media (max-width: 760px) {
  .portal__cols { grid-template-columns: 1fr; gap: 24px; text-align: center; }
}

.portal__col > h6 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.portal__col > h6::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pc);
}
@media (max-width: 760px) { .portal__col > h6 { justify-content: center; } }

.portal__col a {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem);
  letter-spacing: -.04em;
  padding: 9px 0;
  color: var(--ink);
  opacity: 0;
  transform: translateY(16px);
  transition: color .3s var(--ease);
}
body.portal-open .portal__col a {
  animation: portalIn .65s var(--ease-out) forwards;
  animation-delay: calc(.18s + var(--i, 0) * .045s);
}
@keyframes portalIn { to { opacity: 1; transform: none; } }
.portal__col a:hover { color: var(--pc); }

.portal__foot {
  position: absolute;
  bottom: clamp(24px, 5vh, 48px);
  left: 50%;
  transform: translateX(-50%);
}

.pulse {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--glass);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pulse i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); font-style: normal;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent);
  animation: beat 2.4s var(--ease) infinite;
}
@keyframes beat {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70%,100% { box-shadow: 0 0 0 8px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .portal { transition: opacity .01ms; clip-path: none; opacity: 0; }
  body.portal-open .portal { clip-path: none; opacity: 1; }
  .portal__col a { opacity: 1; transform: none; }
}

/* ==========================================================================
   Aba de navegação — fixa na lateral
   ---------------------------------------------------------------------------
   O gatilho antigo era o orb: um círculo com o símbolo da marca, no canto da
   barra. Bonito e mudo — símbolo redondo não diz "menu", e quem chega não
   sabe que há navegação ali.

   A aba resolve pelo conteúdo, não pelo tamanho: além do ícone de três
   traços e da palavra "Menu", ela mostra os três grupos do portal em
   miniatura. A pessoa lê "Proteção · Planos · Conta" antes de clicar, então
   já sabe o que existe atrás — que é o que significa "mostrar um pouco dos
   menus".

   Fica encostada na borda direita, com o canto arredondado só do lado de
   dentro: a forma de aba é o que diz "isto abre". No hover ela avança alguns
   pixels para fora da borda — o gesto de quem vem ao encontro do cursor.
   ========================================================================== */

.rail {
  position: fixed;
  z-index: 61;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 74px;
  padding: 16px 10px 14px;
  border: 1px solid var(--line-2);
  border-right: 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: var(--sh-2);
  color: var(--ink-2);
  transition: transform .45s var(--ease-out), border-color .4s var(--ease),
              box-shadow .45s var(--ease-out), color .4s var(--ease);
}
.rail:hover,
.rail:focus-visible {
  transform: translateY(-50%) translateX(-6px);
  border-color: var(--b2);
  box-shadow: var(--sh-3);
  color: var(--ink);
}

/* --- três traços que viram X quando o portal abre -------------------------- */
.rail__ico {
  display: grid;
  gap: 4px;
  width: 20px;
}
.rail__ico i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .45s var(--ease-out), opacity .3s var(--ease);
}
body.portal-open .rail__ico i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.portal-open .rail__ico i:nth-child(2) { opacity: 0; }
body.portal-open .rail__ico i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.rail__label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- a prévia: o que existe atrás da aba ----------------------------------- */
.rail__peek {
  display: grid;
  gap: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  width: 100%;
  text-align: center;
}
.rail__peek i {
  font-family: var(--f-mono);
  font-style: normal;
  /* 10px e --ink-2: em 9px com --ink-3 o contraste era 3,26:1, abaixo do
     mínimo — e é justamente esta linha que faz a aba parecer um menu. */
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: color .4s var(--ease);
}
.rail:hover .rail__peek i { color: var(--b1); }
body.portal-open .rail__peek { opacity: .4; }

/* --- no celular vira um botão flutuante no canto -------------------------- */
@media (max-width: 899px) {
  .rail {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    transform: none;
    width: auto;
    grid-auto-flow: column;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-right: 1px solid var(--line-2);
    border-radius: var(--r-full);
  }
  .rail:hover, .rail:focus-visible { transform: translateY(-3px); }
  .rail__peek { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rail, .rail__ico i { transition: none; }
  .rail:hover, .rail:focus-visible { transform: translateY(-50%); }
}