/* ==========================================================================
   Componentes React Bits portados para o portal (GooeyNav, SpecularButton,
   BlurText, TextType). Paleta adaptada: fundo branco, azul (#1d4ed8) nos detalhes.
   ========================================================================== */

/* ----------------------------- PillNav ---------------------------------- */
.pill-nav {
  --nav-h: 36px;
  --pill-pad-x: 13px;
  --pill-gap: 3px;
  --base: var(--blue);
  --pill-bg: #ffffff;
  --hover-text: #ffffff;
  --pill-text: var(--blue);
  display: flex;
  align-items: center;
  gap: .75rem;
  box-sizing: border-box;
}

.pill-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--base);
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}
.pill-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.pill-identity { display: flex; flex-direction: column; line-height: 1.15; }
.pill-identity strong { font-family: Montserrat, sans-serif; font-size: 1rem; color: var(--ink); }
.pill-identity small { font-size: .72rem; color: var(--muted); }

/* ------------------------- GooeyNav (menu) ------------------------------ */
.gooey-nav-container {
  --color-1: #1d4ed8;
  --color-2: #2563eb;
  --color-3: #1e40af;
  --color-4: #3b6cf0;
  position: relative;
  margin-left: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--blue-100);
  border-radius: 9999px;
  padding: 0 2px;
}

.gooey-nav-container nav { display: flex; position: relative; transform: translate3d(0, 0, .01px); }

.gooey-nav-container nav ul {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  padding: 0 .25rem;
  margin: 0;
  position: relative;
  z-index: 3;
  color: var(--blue);
}

.gooey-nav-container nav ul li {
  border-radius: 100vw;
  position: relative;
  cursor: pointer;
  color: var(--blue);
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: box-shadow .3s ease;
  box-shadow: 0 0 .5px 1.5px transparent;
}
.gooey-nav-container nav ul li a { display: inline-block; padding: .55em 1.05em; color: inherit; text-decoration: none; }
.gooey-nav-container nav ul li:focus-within:has(:focus-visible) { box-shadow: 0 0 .5px 1.5px var(--blue); }

.gooey-nav-container nav ul li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100vw;
  background: var(--blue);
  opacity: 0;
  transform: scale(0);
  z-index: -1;
}
.gooey-nav-container nav ul li.active { color: #fff; }
/* A pílula nítida fica por cima da versão "gosmenta" (que serrilha na borda),
   então o contorno sai limpo e as bolhas continuam aparecendo. */
.gooey-nav-container nav ul li.active::after { opacity: 1; transform: scale(1); }

.gooey-nav-container .effect {
  position: absolute;
  left: 0; top: 0; width: 0; height: 0;
  opacity: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 1;
}
/* O rótulo já é desenhado pelo próprio item (nítido), então a cópia que o
   efeito usaria fica escondida — evita texto dobrado durante a transição. */
.gooey-nav-container .effect.text { display: none; }
/* Sem o desfoque/contraste do efeito original: ele serrilhava a borda e
   escurecia o rótulo. A pílula nítida fica por conta do item ativo e aqui
   ficam só as bolhas que saltam na troca. */
.gooey-nav-container .effect.filter { overflow: visible; }

.particle, .point {
  display: block; opacity: 0; width: 9px; height: 9px;
  border-radius: 100%; transform-origin: center;
}
.particle {
  --time: 5s;
  position: absolute; top: calc(50% - 4.5px); left: calc(50% - 4.5px);
  animation: gn-particle calc(var(--time)) ease 1 -350ms;
}
.point { background: var(--color); opacity: .85; animation: gn-point calc(var(--time)) ease 1 -350ms; }

@keyframes gn-particle {
  0% { transform: rotate(0deg) translate(var(--start-x), var(--start-y)); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  70% { transform: rotate(calc(var(--rotate) * .5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2)); opacity: 1; animation-timing-function: ease; }
  85% { transform: rotate(calc(var(--rotate) * .66)) translate(var(--end-x), var(--end-y)); opacity: 1; }
  100% { transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * .5), calc(var(--end-y) * .5)); opacity: 1; }
}
@keyframes gn-point {
  0% { transform: scale(0); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  25% { transform: scale(calc(var(--scale) * .25)); }
  38% { opacity: 1; }
  65% { transform: scale(var(--scale)); opacity: 1; animation-timing-function: ease; }
  85% { transform: scale(var(--scale)); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gooey-nav-container .effect.filter { display: none; }
  .gooey-nav-container nav ul li.active::after { opacity: 1; transform: scale(1); }
}

.pill-nav .mobile-menu-button {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--base); border: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; padding: 0; margin-left: auto;
}
.hamburger-line { width: 16px; height: 2px; background: #fff; border-radius: 1px; transform-origin: center; }

.mobile-menu-popover {
  position: absolute; top: calc(100% + .35rem); left: 1rem; right: 1rem;
  background: var(--blue); border-radius: 22px;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .5);
  z-index: 998; opacity: 0; visibility: hidden; transform-origin: top center;
}
.mobile-menu-popover.is-open { visibility: visible; opacity: 1; }
.mobile-menu-list { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu-link {
  display: block; padding: 12px 18px; color: var(--blue); background: #fff;
  text-decoration: none; font-family: Montserrat, sans-serif; font-size: .95rem;
  font-weight: 600; border-radius: 50px;
}
.mobile-menu-link.is-active { background: #dbe6ff; }

@media (max-width: 767.98px) {
  .gooey-nav-container { display: none; }
  .pill-nav .mobile-menu-button { display: flex; }
  .pill-identity small { display: none; }
}

/* -------------------------- SpecularButton ------------------------------ */
.specular-button {
  --sb-radius: 16px;
  --sb-tint: var(--blue);
  --sb-tint-opacity: 1;
  --sb-blur: 0px;
  --sb-text-color: #ffffff;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: none;
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--sb-text-color);
  background: color-mix(in srgb, var(--sb-tint) calc(var(--sb-tint-opacity) * 100%), transparent);
  border-radius: var(--sb-radius);
  backdrop-filter: blur(var(--sb-blur));
  -webkit-backdrop-filter: blur(var(--sb-blur));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 24px -10px rgba(29, 78, 216, .55);
  cursor: pointer;
  outline: none;
  transition: transform .15s ease, box-shadow .2s ease;
}
.specular-button:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 28px -10px rgba(29,78,216,.6); }
.specular-button:active { transform: scale(.97); }
.specular-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.specular-button:disabled { opacity: .55; cursor: default; }
.specular-button:disabled:active { transform: none; }

.specular-button--sm { font-size: .85rem; padding: 10px 22px; }
.specular-button--md { font-size: 1rem; padding: 14px 30px; }
.specular-button--lg { font-size: 1.05rem; padding: 18px 40px; }
.specular-button--block { width: 100%; }

/* Variante clara (fundo branco, texto azul) usada no cabeçalho */
.specular-button--ghost {
  --sb-tint: #ffffff;
  --sb-text-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue-100);
}

/* O canvas passa da borda para o brilho poder vazar para fora */
.specular-button__fx { position: absolute; inset: -20px; pointer-events: none; z-index: 1; }
.specular-button__fx canvas { display: block; width: 100%; height: 100%; }
.specular-button__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; }

/* ----------------------------- TextType --------------------------------- */
.text-type { display: inline-block; white-space: pre-wrap; }
/* "do seu" e a palavra digitada nunca se separam */
.tt-grupo { white-space: nowrap; }
.text-type__content { display: inline; }
.text-type__cursor { margin-left: .25rem; display: inline-block; opacity: 1; font-weight: 400; }
.text-type__cursor--hidden { display: none; }
.text-type__cursor--css { animation: tt-blink 1s steps(1) infinite; }
@keyframes tt-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .text-type__cursor { display: none; } }

/* ----------------------------- BlurText --------------------------------- */
[data-blur-text] { visibility: hidden; }
[data-blur-text].blur-text--ready { visibility: visible; }
.blur-text__piece { display: inline-block; will-change: transform, filter, opacity; }