/* Consolidado: blocos <style> de cada seção (1..9), em ordem. */

/* ── Base global (única regra body/html do site unificado) ── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  background: var(--background);
  color: var(--text-primary);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  font-size: var(--text-lg);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION — 1hero
   ══════════════════════════════════════════════════════════════════════ */




/* ── Hero Animate: initial hidden state ── */
.ha {
  opacity: 0;
  filter: blur(var(--blur-md));
  transform: translateY(40px);
  will-change: opacity, filter, transform;
}

@media(prefers-reduced-motion:reduce) {
  .ha {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ── Mobile: remove o filter:blur inicial do .ha ──
   No mobile, o blur composto sobre vários elementos da hero gera
   borrão geral (especialmente no dash mockup) e o GSAP às vezes não
   alcança 'blur(0)' rapidamente. A opacity + translateY já dão
   suficiente sensação de entrada. */
@media (max-width: 47.99rem) {
  .ha {
    filter: none !important;
  }
}

/* ══════════ NAV ══════════ */
:root {
  --nav-height: 64px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing)*4) calc(var(--spacing)*15);
  background: var(--color-white);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--border-default);
}

/* Compensa a altura da nav fixa — aplicado na primeira dobra do conteúdo. */
.hero-fold {
  padding-top: var(--nav-height);
}

html {
  scroll-padding-top: var(--nav-height);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1324px;
}

.nav-logo svg {
  height: 1rem;
  width: auto;
  color: var(--text-primary);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing)*11);
}

.nav-links {
  display: none;
  gap: calc(var(--spacing)*8);
  align-items: center;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-base);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: var(--font-weight-normal);
  transition: color var(--default-transition-duration);
}

.nav-link:hover {
  color: var(--text-tertiary);
}

.nav-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  transition: transform 0.3s var(--xg-ease-out-expo);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing)*3);
}

@media(min-width:64rem) {
  .nav-links {
    display: flex;
  }
}

/* ── Hamburger button (mobile) ── */
.nav-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: background 0.2s, border-color 0.2s;
}

.nav-hamburger:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.nav-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.25s var(--xg-ease-out-expo), opacity 0.2s;
}

/* Ativo: vira X */
.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile drawer menu ── */
.nav-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-default);
  padding: calc(var(--spacing)*4) calc(var(--spacing)*6);
  flex-direction: column;
  gap: calc(var(--spacing)*2);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--xg-ease-out-expo), transform 0.25s var(--xg-ease-out-expo);
  pointer-events: none;
}

.nav-mobile-menu.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-mobile-link {
  display: block;
  padding: calc(var(--spacing)*3) calc(var(--spacing)*2);
  font-size: var(--text-base);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background 0.2s, color 0.2s;
}

.nav-mobile-link:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

/* ── Accordion groups (Produtos / Soluções) ──
   Cada grupo tem um <button> "toggle" e um <div> "body" com sublinks.
   O toggle controla aria-expanded; o body fica oculto até o usuário expandir. */
.nav-mobile-group {
  display: flex;
  flex-direction: column;
}

.nav-mobile-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: calc(var(--spacing)*3) calc(var(--spacing)*2);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-md);
  transition: background 0.2s, color 0.2s;
}

.nav-mobile-group-toggle:hover,
.nav-mobile-group-toggle[aria-expanded="true"] {
  background: var(--surface-2);
  color: var(--text-primary);
}

.nav-mobile-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.25s var(--xg-ease-out-expo);
}

.nav-mobile-group-toggle[aria-expanded="true"] .nav-mobile-chevron {
  transform: rotate(180deg);
}

.nav-mobile-group-body {
  display: none;
  flex-direction: column;
  gap: calc(var(--spacing)*0.5);
  padding-left: calc(var(--spacing)*3);
  padding-block: calc(var(--spacing)*1);
}

.nav-mobile-group-toggle[aria-expanded="true"]+.nav-mobile-group-body {
  display: flex;
}

.nav-mobile-sublink {
  display: flex;
  align-items: center;
  /* min-height 44px segue o touch-target mínimo recomendado pelo Apple HIG
     e WCAG 2.5.5 (Target Size, Level AAA). Padding ajustado pra preservar
     visual mas garantir altura mínima de 44px mesmo se font-size mudar. */
  min-height: 44px;
  padding: calc(var(--spacing)*2.5) calc(var(--spacing)*2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}

.nav-mobile-sublink:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.nav-mobile-ctas {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*2);
  margin-top: calc(var(--spacing)*3);
  padding-top: calc(var(--spacing)*3);
  border-top: 1px solid var(--border-default);
}

.nav-mobile-ctas .btn {
  width: 100%;
  justify-content: center;
}

/* Abaixo de 1024px: nav-links some, hamburger aparece */
@media (max-width: 63.99rem) {
  .nav {
    padding: calc(var(--spacing)*3) calc(var(--spacing)*6);
  }

  .nav-hamburger {
    display: flex;
  }

  /* CTAs visíveis entre 640px e 1024px; escondidas no drawer apenas <640 */
  .nav-mobile-ctas {
    display: none;
  }
}

/* Abaixo de 640px: CTAs do nav somem, entram no drawer */
@media (max-width: 39.99rem) {
  .nav-right {
    display: none;
  }

  .nav-mobile-ctas {
    display: flex;
  }
}

/* ── Dropdown ── */
.nav-item {
  position: relative;
}

/* Ponte invisível para o mouse não perder o 'hover' no gap de 16px */
.nav-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 24px;
  background: transparent;
  z-index: 10;
}

.nav-item:hover .nav-chevron {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  width: 730px;
  background: var(--surface-1);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-xl);
  display: flex;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--xg-ease-out-expo), transform 0.25s var(--xg-ease-out-expo), visibility 0.25s;
  z-index: 100;
}

.nav-item:hover .dropdown,
.dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-left {
  flex: 1;
  padding: calc(var(--spacing)*2);
  display: flex;
  flex-direction: column;
}

.dropdown-right {
  width: 338px;
  padding: calc(var(--spacing)*2);
  display: flex;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing)*2);
  padding: calc(var(--spacing)*4);
  /* Radius reduzido de --radius-3xl (24px) para 8px — visual mais discreto
     no estado de hover/seleção do dropdown da navbar. */
  border-radius: 8px;
  transition: background 0.2s var(--xg-ease-out-expo);
  cursor: pointer;
  text-decoration: none;
}

.dropdown-item:hover {
  background: var(--surface-2);
}

.dropdown-item-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dropdown-item:hover .dropdown-item-icon {
  background: var(--primary-container);
}

.dropdown-item:hover .dropdown-item-icon svg {
  color: var(--on-primary-container);
}

.dropdown-item-icon svg {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
}

.dropdown-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-item-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.dropdown-item-desc {
  font-size: var(--text-base);
  color: var(--text-tertiary);
}

/* ── Copyright no rodapé do .dropdown-left (apenas dropdown de Produtos) ──
   Aproveita o display:flex column do pai pra grudar no fim com margin-top:auto.
   Padding-inline alinhado com o padding-inline interno dos .dropdown-item
   (calc(var(--spacing)*4)) pra ficar visualmente alinhado com os textos. */
.dropdown-copyright {
  margin-top: auto;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1;
  letter-spacing: 0;
}

.dropdown-img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--text-primary);
}

.dropdown-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--xg-ease-out-expo);
}

.dropdown-img:hover img {
  transform: scale(1.03);
}

.dropdown-img-overlay {
  position: absolute;
  height: 50%;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: calc(var(--spacing)*4);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 45%, transparent 85%);
  display: flex;
  align-items: flex-end;
}

/* Camada de hover — gradiente mais escuro fade-in via opacity (gradients
   não transitionam diretamente em background, então usamos pseudo-elemento). */
.dropdown-img-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 45%, transparent 85%);
  opacity: 0;
  transition: opacity 0.6s var(--xg-ease-out-expo);
  pointer-events: none;
}

.dropdown-img:hover .dropdown-img-overlay::before {
  opacity: 1;
}

/* Garante que a CTA fique acima do pseudo-element */
.dropdown-img-overlay>* {
  position: relative;
  z-index: 1;
}

.dropdown-img-cta {
  font-size: var(--text-base);
  color: var(--surface-1);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing)*1);
}

.dropdown-img-cta:hover span {
  transform: translateX(4px);
}

.dropdown-img-cta span {
  transition: transform 0.2s var(--xg-ease-out-expo);
}

/* ── Language picker (navbar) ──
   Dropdown minimalista de troca de idioma. Aparece à esquerda das CTAs no
   desktop (≥640px) e replica como segmented pill dentro do drawer mobile
   (<640px). Toggle controla aria-expanded; .is-open na raiz revela o painel. */
.nav-lang {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nav-lang-toggle:hover,
.nav-lang-toggle[aria-expanded="true"] {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.nav-lang-chevron {
  width: 10px;
  height: 10px;
  opacity: 0.6;
  transition: transform 0.25s var(--xg-ease-out-expo);
}

.nav-lang-toggle[aria-expanded="true"] .nav-lang-chevron {
  transform: rotate(180deg);
}

.nav-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  /* Ancorado à direita pra não vazar fora do header em viewports apertadas. */
  right: 0;
  min-width: 168px;
  padding: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s var(--xg-ease-out-expo),
    transform 0.2s var(--xg-ease-out-expo),
    visibility 0.2s;
  z-index: 100;
}

.nav-lang.is-open .nav-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.nav-lang-option:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.nav-lang-option-code {
  min-width: 22px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--text-primary);
  opacity: 0.85;
}

.nav-lang-option-name {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.nav-lang-option[aria-current="true"] {
  background: var(--surface-2);
  color: var(--text-primary);
}

.nav-lang-option[aria-current="true"] .nav-lang-option-code {
  opacity: 1;
}

.nav-lang-option[aria-current="true"] .nav-lang-option-name {
  color: var(--text-secondary);
}

/* ── Mobile language picker (segmented pill no drawer) ──
   Pílula compacta com 3 opções. Só aparece quando o drawer é o único caminho
   pra trocar idioma — i.e. quando .nav-right some (<640px). */
.nav-mobile-lang {
  display: none;
  gap: 2px;
  padding: 4px;
  margin-top: calc(var(--spacing)*2);
  background: var(--surface-2);
  border-radius: 8px;
}

.nav-mobile-lang-option {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-height 44px segue o mesmo padrão dos sublinks (touch target WCAG). */
  min-height: 40px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.nav-mobile-lang-option:hover {
  color: var(--text-primary);
}

.nav-mobile-lang-option[aria-current="true"] {
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 39.99rem) {
  .nav-mobile-lang {
    display: flex;
  }
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing)*2.5);
  padding: calc(var(--spacing)*2.5) calc(var(--spacing)*5);
  border-radius: var(--radius-3xl);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.25s var(--xg-ease-out-expo);
  white-space: nowrap;
}

.btn-dark {
  background: var(--text-primary);
  color: var(--surface-1);
}

.btn-dark:hover {
  opacity: 0.9;
}

.btn-outline {
  background: var(--surface-1);
  /* Cor primária do texto (text-primary) — usado no botão "Abrir Conta" da navbar */
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.btn-outline:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.btn-hero {
  padding: calc(var(--spacing)*3.5) calc(var(--spacing)*7);
  font-size: var(--text-base);
  border-radius: 9999px;
  font-weight: var(--font-weight-medium);
}

/* ── CTA Wrapper ── */
.btn-cta-wrap {
  position: relative;
  display: inline-flex;
  border-radius: 9999px;
}

/* ── Glow (aura behind button) ── */
.btn-cta-glow {
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #16CFB1, #00E5CC);
  filter: blur(18px);
  opacity: 0;
  transition: opacity 500ms var(--xg-ease-out-expo);
  pointer-events: none;
  z-index: 0;
}

.btn-cta-wrap:hover .btn-cta-glow {
  opacity: 0.10;
}

.btn-cta-wrap:active .btn-cta-glow {
  opacity: 0.3;
}

/* ── Mouse-following spot (behind button) ── */
.btn-cta-mouse-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(76.5% 0.139 177 / 20%) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: blur(var(--blur-sm));
  pointer-events: none;
  z-index: 0;
  transition: opacity 500ms var(--xg-ease-out-expo);
}

.btn-cta-wrap:hover .btn-cta-mouse-glow {
  opacity: 1;
}

/* ── Beam (rotating border arc) ── */
.btn-cta-beam {
  position: absolute;
  inset: -1px;
  border-radius: 9999px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
  transition: opacity 500ms var(--xg-ease-out-expo);
}

.btn-cta-beam::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300%;
  height: 300%;
  background: conic-gradient(from var(--cta-beam-angle),
      transparent 0deg,
      transparent 280deg,
      oklch(100% 0 0 / 50%) 320deg,
      oklch(100% 0 0 / 70%) 340deg,
      transparent 360deg);
  animation: cta-beam-rotate 4s linear infinite;
}

.btn-cta-wrap:hover .btn-cta-beam {
  opacity: 0.7;
}

.btn-cta-wrap:hover .btn-cta-beam::after {
  animation-duration: 2.5s;
}

.btn-cta-wrap:active .btn-cta-beam {
  opacity: 0.25;
}

/* ── Stroke overlay (gradient border) ── */
.btn-cta-stroke {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 50%) 0%, oklch(100% 0 0 / 0%) 100%) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0) border-box;
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.btn-cta-stroke::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--hero-cta-shimmer-x);
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 60%), transparent);
  animation: hero-cta-shimmer 5s var(--xg-ease-out-expo) infinite;
  animation-delay: 1s;
}

.btn-cta-wrap:hover .btn-cta-stroke::after {
  animation-duration: 3s;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 80%), transparent)
}

/* ── The actual button ── */
.btn-cta-primary {
  position: relative;
  z-index: 2;
  background: linear-gradient(45deg, #7CE7D5 0%, #1BC8AC 25%, #09A78C 50%, #1BB298 75%, #86E6D6 100%);
  color: var(--on-primary-solid);
  transition:
    transform 300ms var(--xg-ease-out-expo);
  overflow: hidden;
}

/* Hover gradient — opacity animada porque CSS não transiciona gradientes diretamente */
.btn-cta-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #02785E 0%, #048D70 25%, #0AB196 50%, #1BE0D0 75%, #27FEFD 100%);
  opacity: 0;
  transition: opacity 300ms ease-in-out;
  pointer-events: none;
  z-index: 0;
}

.btn-cta-primary:hover::after {
  opacity: 1;
}

/* Internal hotspot light */
.btn-cta-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at var(--cta-hotspot-x) 50%,
      oklch(100% .04 175 / 2%) 0%,
      transparent 70%);
  animation: cta-hotspot 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.btn-cta-wrap:hover .btn-cta-primary {
  transform: translateY(-2px);
}

.btn-cta-wrap:active .btn-cta-primary {
  transform: translateY(1px) scale(0.97);
  transition-duration: 120ms;
}

/* ── Button text & arrow ── */
.btn-cta-primary .btn-text {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing)*2.5);
}

.btn-cta-primary .btn-arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 300ms var(--xg-ease-out-expo);
}

.btn-cta-wrap:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-cta-wrap:active .btn-arrow {
  transform: translateX(2px);
  transition-duration: 120ms;
}

/* ── Keyframes ── */
@keyframes cta-hotspot {

  0%,
  100% {
    --cta-hotspot-x: -20%;
  }

  50% {
    --cta-hotspot-x: 120%;
  }
}

@keyframes cta-beam-rotate {
  from {
    --cta-beam-angle: 0deg;
  }

  to {
    --cta-beam-angle: 360deg;
  }
}

@keyframes hero-cta-shimmer {

  0%,
  85% {
    left: -40%;
  }

  100% {
    left: 120%;
  }
}

/* ── Mouse-active: pause auto hotspot, GSAP takes over ── */
.btn-cta-primary.cta-mouse-active::before {
  animation-play-state: paused;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {

  .btn-cta-primary::before,
  .btn-cta-beam::after,
  .btn-cta-stroke::after {
    animation: none;
  }

  .btn-cta-glow,
  .btn-cta-mouse-glow {
    display: none;
  }
}

.btn-cta-outline {
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
}

.btn-cta-outline:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
}

.btn-cta-outline:active {
  transform: translateY(0);
}

/* ══════════ CONTENT ══════════ */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--section-padding-x);
}

.content-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*10);
  width: 100%;
  max-width: 1324px;
  padding: 0;
}

.hero-fold {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@media(min-width:64rem) {
  .content {
    flex: 1;
    justify-content: center;
  }

  .content-section {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: calc(var(--spacing)*16);
    align-items: center;
  }
}

/* ── Sidebar ── */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*6);
  max-width: 560px;
}

.sidebar-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing)*2.5);
  font-size: var(--text-base);
  color: var(--text-tertiary);
}

.sidebar-tag-icon {
  color: var(--primary);
}

/* Pill variant — usado no hero do index (mesma estilização do badge das subpáginas) */
.sidebar .sidebar-tag {
  width: fit-content;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
  font-size: var(--text-xs);
}

.sidebar-h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.15;
  color: var(--text-primary);
}

@media(max-width:63.99rem) {
  .sidebar-h1 {
    font-size: var(--text-4xl);
  }
}

.sidebar-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 520px;
}

.sidebar-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing)*3.5);
  align-items: center;
}

/* ══════════ DASHBOARD ══════════ */
.dash {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*2);
  width: 100%;
  transform-style: preserve-3d;
}

.dash-dots {
  display: flex;
  gap: calc(var(--spacing)*1);
}

.dash-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}

.dash-dot--red {
  background: var(--color-red-500);
}

.dash-dot--yellow {
  background: var(--color-amber-400);
}

.dash-dot--green {
  background: var(--color-green-500);
}

/* Summary Cards */
.dash-cards {
  display: flex;
  gap: calc(var(--spacing)*2);
}

.dash-card {
  flex: 1;
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing)*6) calc(var(--spacing)*4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*3);
  transition: transform 0.3s var(--xg-ease-out-expo), box-shadow 0.3s;
}

.dash-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-sm);
}

.dash-card--dark {
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
}

.dash-card--dark .dash-card-title {
  color: var(--color-neutral-800);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}

.dash-card--dark .dash-card-value {
  color: var(--surface-1);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-sans), monospace;
}

.dash-card--light {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
}

.dash-card--light .dash-card-title {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}

.dash-card--light .dash-card-value {
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-sans), monospace;
}

.dash-card-link {
  width: 32px;
  border-radius: var(--radius-lg);
  background: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-card-link svg {
  color: var(--surface-1);
  width: 14px;
  height: 14px;
}

/* Graph */
.dash-graph {
  display: flex;
  gap: calc(var(--spacing)*2.5);
}

.dash-graph-main {
  background: var(--surface-1);
  flex: 1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  position: relative;
  overflow: hidden;
  padding: calc(var(--spacing)*4);
  min-height: 164px;
}

.graph-label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*3);
}

.graph-label-title {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
}

.graph-label-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.graph-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 65%;
}

.graph-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  opacity: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.graph-area {
  opacity: 0.5;
}

.graph-beam {
  fill: none;
  stroke: var(--color-primary-700);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--primary-a50));
}

/* ── Graph Bean (traveling dot as HTML <div>) ── */
.graph-bean-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
  z-index: 5;
  pointer-events: none;
}

.graph-bean-div {
  position: absolute;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  background: var(--primary);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px var(--primary-a50));
  opacity: 0;
}

.graph-bean-glow-div {
  position: absolute;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0;
  animation: bean-glow-pulse-div 2s ease-in-out infinite;
}

@keyframes bean-glow-pulse-div {

  0%,
  100% {
    opacity: 0.15;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(1.5);
  }
}


.dash-graph-info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*2);
  width: 184px;
  flex-shrink: 0;
}

.graph-info-row {
  display: flex;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 35px;
}

.graph-info-bar {
  width: 15px;
  height: 100%;
  background: var(--primary);
  flex-shrink: 0;
  transform-origin: bottom;
  transform: scaleY(0);
}

.graph-info-data {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing)*6);
  padding: 0 calc(var(--spacing)*3);
  font-size: 13px;
  flex: 1;
}

.graph-info-val {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

.graph-info-date {
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Amount */
.dash-amount {
  display: flex;
  gap: calc(var(--spacing)*2.5);
}

.dash-amount-main {
  background: var(--surface-1);
  flex: 1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  padding: calc(var(--spacing)*6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*5);
}

.amount-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-family: var(--font-sans), monospace;
}

.amount-currency {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing)*3);
  padding: calc(var(--spacing)*3) calc(var(--spacing)*3.5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  width: 100%;
}

.amount-currency-icon {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.amount-currency-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--xg-ease-out-expo);
}

.amount-currency-icon img.active {
  opacity: 1
}

.amount-currency-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.amount-currency-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  transition: opacity 0.3s;
}

.amount-currency-rate {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  transition: opacity 0.3s;
}

/* ══════════════════════════════════════
   Movimentos Card
   ══════════════════════════════════════ */
.dash-movimentos-card {
  padding: 0;
  overflow: hidden;
  gap: 0;
  position: relative;
  height: 250px;
  background: white;
}

.mov-thead {
  display: flex;
  align-items: center;
  background: #1d1f1f;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 0 14px;
  height: 34px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.mov-th {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 7.8px;
}

.mov-th--metodo {
  flex: 0 0 81px;
}

.mov-tbody {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mov-row {
  display: flex;
  align-items: center;
  height: 34px;
  flex-shrink: 0;
  background: transparent;
  padding: 0 14px;
  transition: background-color 150ms ease;
  cursor: default;
}

.mov-row:hover {
  background: var(--surface-2);
}

.mov-row--new {
  animation: movRowIn 500ms ease-out both;
}

@keyframes movRowIn {
  from {
    transform: translateY(-14px);
    filter: blur(5px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

.mov-td {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
  opacity: 0.8;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 8px;
}

.mov-td--metodo {
  flex: 0 0 81px;
  padding-right: 0;
}

.mov-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 40px;
  font-size: 12px;
  color: #fff;
  font-weight: 400;
  white-space: nowrap;
}

.mov-badge--deposito {
  background: linear-gradient(106.3deg, #09aa90 16%, #16cfb1 115.7%);
}

.mov-badge--saque {
  background: #373737;
}

.mov-badge--pix {
  background: linear-gradient(106.3deg, #09aa90 16%, #16cfb1 115.7%);
}

.mov-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, white);
  pointer-events: none;
  z-index: 2;
}

.amount-fees {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*4);
  padding-top: calc(var(--spacing)*5);
  border-top: 1px solid var(--border-default);
}

.amount-fee-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.amount-fee-val {
  color: var(--text-primary);
  font-family: var(--font-sans), monospace;
}

/* Icons */
.dash-icons {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*2);
  width: 35px;
  flex-shrink: 0;
}

.dash-icon-btn {
  width: 35px;
  height: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--xg-ease-out-expo);
  color: var(--text-tertiary);
}

.dash-icon-btn:hover {
  background: var(--surface-2);
  color: var(--text-primary);
  transform: scale(1.1);
}

.dash-icon-btn:active {
  transform: scale(0.95);
}

.dash-icon-btn svg {
  width: 14px;
  height: 14px;
}

/* Balance */
.dash-balance {
  background: var(--surface-1);
  width: 184px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  padding: calc(var(--spacing)*6) calc(var(--spacing)*4);
  display: flex;
  flex-direction: column;
  gap: 42px;
  align-items: center;
  /* gap: calc(var(--spacing)*4); v1 */
}

.balance-title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  align-self: center;
}

.balance-ring {
  width: 130px;
  height: 130px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balance-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.balance-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.balance-stats-label {
  font-size: var(--text-base);
  color: var(--text-tertiary);
}

.balance-stats-value {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-family: var(--font-sans), monospace;
}

.donut-progress {
  transition: none;
}

/* ══════════ SECTION 2 — PRODUCTS ══════════ */
.section-products {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: calc(var(--spacing)*20) var(--section-padding-x);
  position: relative;
  overflow: hidden;
}

.products-bg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Preenche a área preservando aspect-ratio — sem object-fit a imagem
     esticava quando max-width cortava a largura calculada por height:80%. */
  width: 80%;
  height: 80%;
  max-width: 900px;
  max-height: 900px;
  object-fit: contain;
  opacity: 0.6;
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: logo-blur-pulse 3s ease-in-out infinite;
}

@keyframes logo-blur-pulse {

  0%,
  100% {
    filter: blur(10px);
  }

  50% {
    filter: blur(30px);
  }
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(var(--spacing)*5);
  width: 100%;
  max-width: 1324px;
  position: relative;
  z-index: 1;
}

.product-card {
  grid-column: span 2;
  background: var(--surface-1);
  border: 2px solid var(--border-default);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.35s var(--xg-ease-out-expo), box-shadow 0.35s var(--xg-ease-out-expo);
}

/* Centraliza os 2 últimos cards na grade fantasma de 6 colunas */
.product-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.product-card:hover {
  border-color: var(--primary);
  box-shadow:
    0 47px 80px rgba(47, 244, 211, 0.09),
    0 19.6px 33.4px rgba(47, 244, 211, 0.06),
    0 10.5px 17.9px rgba(47, 244, 211, 0.05),
    0 5.9px 10px rgba(47, 244, 211, 0.05),
    0 3.1px 5.3px rgba(47, 244, 211, 0.04),
    0 1.3px 2.2px rgba(47, 244, 211, 0.03);
}

.product-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing)*6);
  padding: calc(var(--spacing)*8) calc(var(--spacing)*6) calc(var(--spacing)*6);
}

.product-card-header {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing)*3);
}

.product-card-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-card-icon svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.product-card-title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.5;
}

.product-card-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.product-card-footer {
  padding: calc(var(--spacing)*3) calc(var(--spacing)*4) calc(var(--spacing)*3) calc(var(--spacing)*6);
  border-top: 1px solid transparent;
  transition: background 0.35s var(--xg-ease-out-expo), border-color 0.35s var(--xg-ease-out-expo);
}

.product-card:hover .product-card-footer {
  background: var(--primary-container);
}

.product-card-link {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing)*2.5);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  /* on-primary-container porque o footer pai recebe background:
     var(--primary-container) no .product-card:hover —
     mantemos o token semântico correto pra contraste em ambos estados. */
  color: var(--on-primary-container);
  transition: gap 0.3s var(--xg-ease-out-expo);
}

.product-card-link:hover {
  gap: calc(var(--spacing)*4);
}

.product-card-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s var(--xg-ease-out-expo);
}

.product-card:hover .product-card-link svg {
  transform: translateX(4px);
}

/* Breakpoints consolidados: 80rem (1280px) e 48rem (768px) — palette
   canônica do sistema. Antes 79.99/47.99rem. */
@media (max-width: 80rem) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card {
    grid-column: span 1;
  }

  .product-card:nth-child(4) {
    grid-column: auto;
  }

  .product-card:nth-child(5) {
    grid-column: 1 / span 2;
    max-width: 400px;
    justify-self: center;
    width: 100%;
  }
}

@media (max-width: 48rem) {
  .products-grid {
    grid-template-columns: 1fr;
  }

  .product-card:nth-child(5) {
    grid-column: auto;
    max-width: none;
  }

  .section-products {
    padding: calc(var(--spacing)*12) var(--section-padding-x);
  }
}

/* ══════════ FOOTER ══════════ */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing)*12) var(--section-padding-x);
}

/* ── Esconde footer (SCROLL/dollar) abaixo de 1025px em todas as páginas ──
   Em viewports menores o footer fixo se sobrepunha ao conteúdo da hero
   (especialmente o indicador "SCROLL" cobrindo informação). Mantemos só em
   desktop ≥1025px. */
@media (max-width: 1024px) {

  .footer,
  .cv-hero-fold .footer,
  .hero-fold .footer {
    display: none !important;
  }
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
}

.footer-scroll {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing)*4);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: var(--tracking-wide);
}

.footer-scroll-bar {
  width: 8px;
  height: 24px;
  background: var(--primary);
  border-radius: var(--radius-xs);
  filter: blur(4px);
}

.footer-dollar {
  background: var(--primary-container);
  padding: calc(var(--spacing)*2) calc(var(--spacing)*4);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  /* on-primary-container = primary-200 (mais escuro) garante contraste
     adequado sobre o fundo primary-container (alpha 10% sobre branco) */
  color: var(--on-primary-container);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:63.99rem) {
  .nav {
    padding: calc(var(--spacing)*4);
  }

  .content-section {
    padding: calc(var(--spacing)*10) 0;
  }

  .dash-graph {
    flex-direction: column;
  }

  .dash-graph-info {
    width: 100%;
    flex-direction: row;
  }

  /* Barras da info do gráfico dividem o espaço horizontal igualmente */
  .graph-info-row {
    flex: 1 1 0;
    min-width: 0;
  }

  .dash-amount {
    flex-direction: column;
  }

  .dash-icons {
    flex-direction: row;
    width: 100%;
  }

  /* Ícones dividem o espaço igualmente com padding para ficarem visíveis */
  .dash-icon-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: calc(var(--spacing)*3) 0;
    height: auto;
  }

  .dash-icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .dash-balance {
    width: 100%;
  }

  /* ── Travar tamanho do card de Movimentos quando .dash-amount vira coluna ──
     Aqui o .dash-amount já é flex-direction: column. Os filhos flex ganham
     min-height: auto por padrão, o que permite o card crescer indefinidamente
     conforme novas linhas são injetadas pelo JS. min-height: 0 + height fixo
     + flex: 0 0 auto trava o tamanho. Vale entre 769px e 1023px (no <768px o
     mesmo fix já está abaixo). */
  .dash-amount-main,
  .dash-movimentos-card {
    min-height: 0;
  }

  .dash-movimentos-card {
    /* 250px = altura adequada pra mostrar header + ~6 linhas + fade */
    height: 250px;
    flex: 0 0 auto;
  }

  .footer-inner {
    flex-direction: column;
    gap: calc(var(--spacing)*4);
    text-align: center;
  }
}

@media(max-width:47.99rem) {
  .dash-cards {
    flex-wrap: wrap;
  }

  .dash-card {
    min-width: calc(50% - calc(var(--spacing)*1));
  }

  .dash-card-link {
    display: none;
  }

  .sidebar-h1 {
    font-size: var(--text-3xl);
  }

  /* ── Compactação do card de Movimentos no mobile ──
     A altura fixa de 250px + linhas de 34px + 4 colunas com padding
     dimensionados para desktop deixavam o .dash-amount-main desproporcional
     no mobile. Reduzimos altura, linhas, padding e fonte para que o card
     ocupe um espaço compatível com a viewport estreita.

     IMPORTANTE: precisamos de min-height:0 nos containers porque, quando
     .dash-amount vira flex-direction:column no mobile, os filhos flex
     ganham min-height:auto (default do spec) — isso ANULA o height:184px
     quando o conteúdo (rows infinitos adicionados pelo JS) é maior. Com
     min-height:0 forçamos o respect ao height explícito + overflow:hidden. */
  .dash-amount-main,
  .dash-movimentos-card {
    min-height: 0;
  }

  .dash-movimentos-card {
    /* 184px = altura adequada pra mostrar header + ~3-4 linhas + fade */
    height: 184px;
    /* flex-basis: auto evita que flex-basis:0% (do flex:1) tente
       expandir além do height explícito */
    flex: 0 0 auto;
  }

  .mov-thead {
    height: 28px;
    padding: 0 10px;
  }

  .mov-th {
    font-size: 10px;
    padding: 0 5px;
  }

  /* Coluna "Método" mais estreita no mobile (badge ainda cabe) */
  .mov-th--metodo,
  .mov-td--metodo {
    flex: 0 0 64px;
  }

  .mov-row {
    height: 28px;
    padding: 0 10px;
  }

  .mov-td {
    font-size: 10px;
    padding-right: 5px;
  }

  .mov-badge {
    height: 18px;
    padding: 0 8px;
    font-size: 10px;
  }

  /* Fade gradient menor pra acompanhar a redução de altura */
  .mov-fade {
    height: 40px;
  }

  /* Dash amount main padding compactado (vinha de 24px) */
  .dash-amount-main {
    padding: calc(var(--spacing)*4);
  }
}

/* Containment do dashboard em telas estreitas: impede que cards internos,
   linhas de info do gráfico e o painel de saldo vazem horizontalmente. */
@media (max-width: 900px) {
  .dash {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .dash-cards,
  .dash-graph,
  .dash-graph-info,
  .dash-amount,
  .dash-balance {
    min-width: 0;
    max-width: 100%;
  }

  .dash-graph-info {
    flex-wrap: wrap;
  }

  .graph-info-row {
    flex: 1 1 calc(50% - calc(var(--spacing)*1));
    min-width: 0;
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION — 2moedas
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════ SECTION ══════════ */
.moedas-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 53px;
  padding: 128px 24px;
  min-height: 100vh;
  position: relative;
  overflow: visible;
  visibility: hidden;
}

/* ── Text block ── */
.moedas-text {
  width: 370px;
  max-width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.moedas-label {
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.moedas-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: 0;
}

.moedas-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  text-decoration: none;
  transition: color 300ms ease;
}

.moedas-link:hover {
  color: var(--primary);
}

.moedas-link svg {
  transition: transform 300ms ease;
}

.moedas-link:hover svg {
  transform: translateX(4px);
}

/* ── Currency grid ── */
.moedas-grid {
  width: 516px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  position: relative;
}

/* Glow background */
.moedas-glow {
  position: absolute;
  width: 220px;
  height: 149px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(28, 200, 172, 0.6), rgba(124, 231, 213, 0.4));
  filter: blur(150px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 5s ease-in-out infinite;
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* ── XGATE pill ── */
.xgate-pill {
  width: 163px;
  height: 48px;
  border-radius: 44px;
  background: linear-gradient(92deg, #7CE7D5 12%, #1BC8AC 27%, #09A78C 50%, #1BB298 74%, #86E6D6 109%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  flex-shrink: 0;
}

.xgate-pill svg {
  height: 14px;
  width: auto;
  color: #fff;
}

.xgate-pill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: xgateShimmer 6s infinite;
}

@keyframes xgateShimmer {

  0%,
  80% {
    left: -100%;
  }

  90% {
    left: 150%;
  }

  100% {
    left: 150%;
  }
}

/* ── Pill rows ── */
.moedas-row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* ── Individual pill ── */
.moeda-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 32px 8px 12px;
  background: var(--surface-1);
  border-radius: 44px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.moeda-pill::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transition: none;
  pointer-events: none;
}

.moeda-pill:hover::before {
  animation: pillReflection 0.6s ease forwards;
}

@keyframes pillReflection {
  0% {
    left: -100%;
  }

  100% {
    left: 150%;
  }
}

.moeda-pill:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 30px rgba(28, 200, 172, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.moeda-pill:hover .moeda-icon {
  transform: rotate(8deg) scale(1.08);
}

.moeda-pill:hover .moeda-label {
  color: var(--text-primary);
}

.moeda-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.moeda-label {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color 300ms ease;
}

/* ── Breathing animation ── */
@keyframes pillBreathe {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-2px) scale(1.015);
  }
}

.moeda-pill {
  animation: pillBreathe var(--breathe-dur, 4s) ease-in-out infinite;
  animation-delay: var(--breathe-delay, 0s);
}

.moeda-pill:hover {
  animation-play-state: paused;
}

/* ── Row float ── */
@keyframes rowFloat1 {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(4px);
  }
}

@keyframes rowFloat2 {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-6px);
  }
}

@keyframes rowFloat3 {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

@keyframes rowFloat4 {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-4px);
  }
}

.moedas-row-1 {
  animation: rowFloat1 8s ease-in-out infinite;
}

.moedas-row-2 {
  animation: rowFloat2 7.5s ease-in-out infinite;
}

.moedas-row-3 {
  animation: rowFloat3 9s ease-in-out infinite;
}

/* ── Particles ── */
.moedas-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  15% {
    opacity: 0.5;
  }

  85% {
    opacity: 0.3;
  }

  100% {
    transform: translateY(var(--p-dy, -60px)) translateX(var(--p-dx, 20px));
    opacity: 0;
  }
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 600px) {
  .moedas-section {
    padding: 80px 20px;
  }

  .moedas-title {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
  }

  .moeda-icon {
    width: 36px;
    height: 36px;
  }

  .moeda-label {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }

  .moeda-pill {
    padding: 6px 20px 6px 8px;
    gap: 10px;
  }

  .xgate-pill {
    width: 140px;
    height: 40px;
  }

  .xgate-pill svg {
    height: 11px;
  }

  .moedas-particle:nth-child(n+4) {
    display: none;
  }

  .moedas-row-1 {
    animation-duration: 8s;
  }

  .moedas-row-2 {
    animation-duration: 7.5s;
  }

  .moedas-row-3 {
    animation-duration: 9s;
  }

  @keyframes rowFloat1 {

    0%,
    100% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(2px);
    }
  }

  @keyframes rowFloat2 {

    0%,
    100% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(-3px);
    }
  }

  @keyframes rowFloat3 {

    0%,
    100% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(2.5px);
    }
  }
}

@media (max-width: 400px) {
  .moedas-row {
    gap: 10px;
  }

  .moeda-label {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
  }

  .moeda-icon {
    width: 32px;
    height: 32px;
  }

  .moedas-row-1,
  .moedas-row-2,
  .moedas-row-3 {
    animation: none;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {

  .moeda-pill,
  .moedas-row,
  .xgate-pill::after,
  .moedas-glow,
  .moedas-particle {
    animation: none !important;
  }

  .moedas-section {
    visibility: visible;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION — 3produtos
   ══════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.produtos-section {
  padding: 128px 0;
  font-family: var(--font-sans), sans-serif;
  overflow: hidden;
}

/* ── Nav Buttons ── */
.produtos-nav {
  max-width: var(--fold-max-width);
  margin: 0 auto;
  padding: 0 var(--fold-padding);
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-bottom: 32px;
}

.produtos-nav-btn {
  width: 64px;
  height: 40px;
  padding: 4px 12px;
  border-radius: 22px;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.produtos-nav-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  transform: scale(1.05);
}

.produtos-nav-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.produtos-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.produtos-nav-btn svg {
  width: 24px;
  height: 24px;
  color: var(--text-primary);
}

/* ── Carousel ── */
.produtos-carousel-outer {
  max-width: 2096px;
  margin: 0 auto;

  /* Edge blur overlays — tunable */
  --edge-blur: 12px;
  --edge-blur-width: 80px;
  --edge-fade-duration: 200ms;

  position: relative;
}

/* Edge fade overlays — SIMPLE SOLID-COLOR GRADIENT (no blur).
   The fade target is var(--edge-fade-color) (default: --color-black). The
   solid color paints on top of BOTH card edges and the background dots,
   so nothing transparent leaks through. Only rendered on tablet+ (≥ 48rem).
*/
.produtos-carousel-outer {
  --edge-fade-color: var(--background);
}

.produtos-carousel-outer .edge-fade {
  display: none;
}

@media (min-width: 48rem) {
  .produtos-carousel-outer .edge-fade {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--edge-blur-width);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--edge-fade-duration) ease;
    z-index: 2;
  }

  .produtos-carousel-outer .edge-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--edge-fade-color), transparent);
  }

  .produtos-carousel-outer .edge-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--edge-fade-color), transparent);
  }

  .produtos-carousel-outer.has-left-fade .edge-fade-left {
    opacity: 1;
  }

  .produtos-carousel-outer.has-right-fade .edge-fade-right {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .produtos-carousel-outer .edge-fade {
      transition: none;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Page Bottom Blur — Progressive Blur band fixed at the bottom of the
   viewport. 4 stacked backdrop-filter layers with hard-edged masks that
   narrow from top to bottom; at the bottom edge all 4 compound, further
   up only the light layer applies, then nothing. The blur intensity itself
   ramps down (NOT opacity), so content behind remains fully visible just
   sharper as it moves up.
   Tunables on .page-blur-bottom:
     --page-blur-height : total band height (default 140px)
     --page-blur-max    : max blur at the very bottom (default 16px)
═══════════════════════════════════════════════════════════════════════ */
/* Register --page-blur-max so CSS can interpolate the length value during
   transitions. Without @property the custom property snaps instead of
   animating. Supported in Chrome 85+, Safari 16.4+, Firefox 128+.
   On older browsers it falls through and the value just snaps (no error). */
@property --page-blur-max {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

.page-blur-bottom {
  visibility: hidden;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--page-blur-height, 140px);
  pointer-events: none;
  z-index: 5;

  --page-blur-max: 16px;
  --page-blur-transition: 1.5s ease-in;
  transition: --page-blur-max var(--page-blur-transition);
}

/* Disabled near top (hero area) or bottom (footer area) of the page.
   Toggled by JS based on scrollY proximity to the edges. */
.page-blur-bottom.at-edge {
  --page-blur-max: 0px;
}

.page-blur-bottom-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-blur-bottom-layer.l1 {
    backdrop-filter: blur(calc(var(--page-blur-max) * 0.15));
    -webkit-backdrop-filter: blur(calc(var(--page-blur-max) * 0.15));
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 80%, transparent 100%);
  }

  .page-blur-bottom-layer.l2 {
    backdrop-filter: blur(calc(var(--page-blur-max) * 0.3));
    -webkit-backdrop-filter: blur(calc(var(--page-blur-max) * 0.3));
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 80%);
    mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 80%);
  }

  .page-blur-bottom-layer.l3 {
    backdrop-filter: blur(calc(var(--page-blur-max) * 0.55));
    -webkit-backdrop-filter: blur(calc(var(--page-blur-max) * 0.55));
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 55%);
    mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 55%);
  }

  .page-blur-bottom-layer.l4 {
    backdrop-filter: blur(var(--page-blur-max));
    -webkit-backdrop-filter: blur(var(--page-blur-max));
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 10%, transparent 30%);
    mask-image: linear-gradient(to top, #000 0%, #000 10%, transparent 30%);
  }
}

.produtos-carousel {
  /* Alinha a borda esquerda dos cards com a coluna de conteúdo dos .fold.
     Usa 100% (largura do .produtos-carousel-outer, que espelha a área útil
     do body) em vez de 100vw para ficar imune à barra de scroll. */
  --carousel-padding: max(var(--fold-padding), calc((100% - var(--fold-max-width)) / 2));

  display: flex;
  gap: 20px;
  padding: 0 0 58px var(--carousel-padding);

  /* Sem scroll-padding, o scroll snap ignora o padding e encosta no x=0 */
  scroll-padding-left: var(--carousel-padding);

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.produtos-carousel::after {
  content: "";
  /* Espelha a margem exata no fim do slider, removendo apenas a margem nativa (+20px flex gap) */
  flex: 0 0 max(38px, calc(var(--carousel-padding) - 20px));
}

.produtos-carousel::-webkit-scrollbar {
  display: none;
}

.produtos-carousel {
  scrollbar-width: none;
}

/* ── Cards ── */
.produto-card {
  flex: 0 0 480px;
  width: 480px;
  height: 750px;
  scroll-snap-align: start;
  align-content: flex-start;
  background: var(--surface-1);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1), border-color 400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.produto-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: var(--primary);
}

/* ── Card Top Zone ── */
.produto-card-top {
  flex: 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.produto-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Badge à esquerda do título: pílula com ícone + texto, segue a referência
   visual fornecida (estilo "Global Payments"). */
.produto-card-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  transition: border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
    background 300ms cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 0;
}

.produto-card:hover .produto-card-title-badge {
  border-color: var(--on-primary-container);
  background: var(--primary-container);
}

.produto-card-title-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* No hover do card, o badge inteiro fica primary-container — o ícone vira
   surface-1 pra preservar contraste. */
.produto-card:hover .produto-card-title-icon {
  background: var(--surface-1);
}

.produto-card-title-icon svg {
  width: 16px;
  height: 16px;
}

.produto-card-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.produto-card-title-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  color: var(--text-tertiary);
  transition: background-color 200ms ease, color 200ms ease;
}

.produto-card:hover .produto-card-title-chevron {
  background-color: var(--surface-2);
}

.produto-card-title-chevron:hover {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
}

.produto-card-title-chevron svg {
  width: 20px;
  height: 20px;
}

.produto-card-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.produto-card-desc strong {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.produto-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.produto-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.produto-feature svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--primary);
}

/* ── Card Bottom Slot ── */
.produto-card-slot {
  height: 430px;
  width: 100%;
  position: relative;
  overflow: visible;
  background-image: url('../../assets/patterns/pattern-products.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.produto-card-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, var(--surface-1), transparent);
  pointer-events: none;
}

/* ════════════════════════════════════════════
       CARD 1 - API de Pix (Diagonal cascade)
       ════════════════════════════════════════════ */
/* Container query no slot pai — permite aos slots filhos escalarem
   proporcionalmente quando o produto-card encolhe (480px → mobile). */
.produto-card-slot {
  container-type: inline-size;
}

.slot-api-pix {
  position: relative;
  /* Design dimensions: cascade items vão de left:69 até left:301+110=411,
     e top:74 até top:234+pill_height=270. Reservamos 420×290 com origem
     top-center e escalamos via container query quando o card é menor. */
  width: 420px;
  height: 290px;
  margin-inline: auto;
  transform-origin: top center;
}

/* Quando o slot-pai (= produto-card-slot) é mais estreito que o design
   width (420px), reduz proporcionalmente. A escala é capada em 1 (não
   amplifica em cards maiores). */
@container (max-width: 419px) {
  .slot-api-pix {
    transform: scale(calc(100cqw / 420));
  }
}

.cascade-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cascade-pill {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 22px;
  padding: 4px 12px;
  width: 110px;
  text-align: center;
  font-size: var(--text-base);
  font-family: var(--font-sans), sans-serif;
  color: var(--text-primary);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cascade-pill--highlight {
  border: 1.5px solid #1BC8AC;
  border-radius: 30px;
  font-weight: var(--font-weight-semibold);
  background: var(--surface-1);
  box-shadow: 0 47px 80px 0 rgba(47, 244, 211, 0.09), 0 19.6px 33.4px 0 rgba(47, 244, 211, 0.06), 0 10.5px 17.9px 0 rgba(47, 244, 211, 0.05), 0 5.9px 10px 0 rgba(47, 244, 211, 0.05), 0 3.1px 5.3px 0 rgba(47, 244, 211, 0.04), 0 1.3px 2.2px 0 rgba(47, 244, 211, 0.03);
}

.cascade-pill--highlight span {
  background: linear-gradient(92deg, #7CE7D5 12%, #1BC8AC 27%, #09A78C 50%, #1BB298 74%, #86E6D6 109%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cascade-arrow {
  color: var(--text-tertiary);
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 47px 80px 0 rgba(47, 244, 211, 0.09), 0 19.6px 33.4px 0 rgba(47, 244, 211, 0.06), 0 10.5px 17.9px 0 rgba(47, 244, 211, 0.05), 0 5.9px 10px 0 rgba(47, 244, 211, 0.05), 0 3.1px 5.3px 0 rgba(47, 244, 211, 0.04), 0 1.3px 2.2px 0 rgba(47, 244, 211, 0.03);
  }

  50% {
    box-shadow: 0 47px 80px 0 rgba(47, 244, 211, 0.18), 0 19.6px 33.4px 0 rgba(47, 244, 211, 0.12), 0 10.5px 17.9px 0 rgba(47, 244, 211, 0.1), 0 5.9px 10px 0 rgba(47, 244, 211, 0.1), 0 3.1px 5.3px 0 rgba(47, 244, 211, 0.08), 0 1.3px 2.2px 0 rgba(47, 244, 211, 0.06);
  }
}

.cascade-pill--highlight {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* ════════════════════════════════════════════
       CARD 2 - Conversão & Liquidação (Exchange UI)
       ════════════════════════════════════════════ */
.slot-exchange {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px 16px 32px;
}

.exchange-container {
  width: 415px;
  /* Padding mais enxuto (era 16px em todas as bordas — esquerda visualmente
     "alta" no produto-card e na hero de conversao). 12px deixa o conteúdo
     mais alinhado com as bordas sem ficar apertado. */
  padding: 12px;
  border-radius: var(--radius-4xl);
  background: var(--surface-1);
  border: 2px solid #7CE7D5;
  box-shadow: 0 47px 80px 0 rgba(47, 244, 211, 0.09), 0 19.6px 33.4px 0 rgba(47, 244, 211, 0.06), 0 10.5px 17.9px 0 rgba(47, 244, 211, 0.05);
  position: relative;
}

.exchange-section {
  border-radius: var(--radius-2xl);
  /* Padding horizontal reduzido — o esquerdo ficava "alto" no produto-card
     do home e na hero do conversao. Mantém leitura confortável sem inflar. */
  padding: 10px 12px;
  position: relative;
}

.exchange-section--top {
  background: white;
  border: 1px solid var(--border-default);
}

.exchange-section--bottom {
  background: #f8f8f8;
  border-radius: 14px 14px 16px 16px;
  margin-top: 8px;
}

.exchange-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.exchange-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: 12px;
}

.exchange-placeholder {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: #636363;
  margin-bottom: 12px;
  position: relative;
}

.exchange-placeholder .cursor {
  display: inline-block;
  width: 2px;
  height: 24px;
  background: var(--primary);
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.exchange-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  border-radius: 22px;
  border: 1px solid var(--border-default);
  background: white;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.exchange-badge img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.exchange-swap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  border: 1px solid var(--border-default);
}

.exchange-swap-wrap {
  position: relative;
  height: 0;
}

.exchange-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-2xl);
  background: linear-gradient(45deg, #7CE7D5 0%, #1BC8AC 25%, #09A78C 50%, #1BB298 75%, #86E6D6 100%);
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-sans), sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }

  100% {
    transform: translateX(200%) skewX(-15deg);
  }
}

.exchange-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 4s infinite;
}

/* ════════════════════════════════════════════
       CARD 3 - Conta Virtual (Phone mockup)
       ════════════════════════════════════════════ */
.slot-phone {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

/* Decorative ellipses */
.slot-phone::before,
.slot-phone::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 120px;
  border-radius: 50%;
  opacity: 0.08;
  transform: rotate(7.9deg);
  pointer-events: none;
}

.slot-phone::before {
  top: -30px;
  right: -40px;
  background: radial-gradient(ellipse, #7CE7D5, transparent 70%);
}

.slot-phone::after {
  bottom: -30px;
  left: -40px;
  background: radial-gradient(ellipse, #09A78C, transparent 70%);
}

.phone-floating-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 253px;
  padding: 6px 16px;
  border-radius: 16px;
  border: 1px solid var(--border-default);
  background: white;
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  white-space: nowrap;
  text-align: center;
  z-index: 5;
  animation: floatBadge 3s ease-in-out infinite;
}

@keyframes floatBadge {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-2px);
  }
}

.phone-bar-indicator {
  position: absolute;
  left: 49px;
  top: 172px;
  width: 7px;
  height: 130px;
  border-radius: 4px;
  background: linear-gradient(to bottom, #7CE7D5, #09A78C);
  z-index: 5;
}

@keyframes barFill {
  0% {
    clip-path: inset(100% 0 0 0);
  }

  75% {
    clip-path: inset(0 0 0 0);
  }

  85% {
    clip-path: inset(0 0 0 0);
  }

  100% {
    clip-path: inset(100% 0 0 0);
  }
}

.phone-mockup {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: 30px;
  width: 375px;
  height: calc(100% - 20px);
  border: 3px solid #7CE7D5;
  border-radius: 48px 48px 0 0;
  background: white;
  box-shadow: 0 47px 80px 0 rgba(47, 244, 211, 0.09), 0 19.6px 33.4px 0 rgba(47, 244, 211, 0.06), 0 20px 40px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  animation: phoneFloat 6s ease-in-out infinite;
}

@keyframes phoneFloat {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-3px);
  }
}

.phone-top {
  background: #f8f8f8;
  border-radius: 0px 0px 54px 54px;
  height: fit-content;
  gap: 4px;
  padding: 64px 24px 24px 24px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.phone-top-label {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-top-label svg {
  width: 12px;
  height: 12px;
  color: var(--text-secondary);
}

.phone-value-container {
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
}

.phone-top-value {
  position: relative;
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.72px;
}

.phone-eye-icon {
  position: relative;
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  cursor: pointer;
  animation: eyeBlink 6s ease-in-out infinite;
}

@keyframes eyeBlink {

  0%,
  90%,
  100% {
    opacity: 1;
  }

  95% {
    opacity: 0.3;
  }
}

.phone-actions {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;

}

.phone-action-icon {
  width: 60px;
  height: 60px;
  border-radius: 70px;
  background: rgba(44, 43, 43, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.phone-action-icon svg {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
}

.phone-balances {
  position: relative;
  width: 100%;
  display: flex;
  margin-top: 12px;
  flex-direction: row;
  gap: 8px;
  padding: 0 10px;
}

.phone-balance-card {
  width: 100%;
  padding: 16px 18px;
  gap: 4px;
  border-radius: var(--radius-xl);
  display: block;
  align-items: start;
  position: relative;
  overflow: hidden;
}

.phone-balance-cardv2 {
  width: 300px;
  padding: 16px 18px;
  gap: 4px;
  border-radius: var(--radius-xl);
  display: block;
  align-items: start;
  position: relative;
  overflow: hidden;
}

/* Sweep highlight for pulse animation */
.phone-balance-card::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}

.phone-balance-card--brl {
  background: rgba(5, 171, 65, 0.05);
}

.phone-balance-card--usdt {
  background: rgba(37, 160, 123, 0.05);
}

.phone-balance-card--usdc {
  background: rgba(49, 117, 188, 0.05);
}

.phone-balance-card-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-balance-card-header img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.phone-balance-label {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  opacity: 0.8;
}

.phone-balance-label--brl {
  color: #05ab41;
}

.phone-balance-label--usdt {
  color: #25a07b;
}

.phone-balance-label--usdc {
  color: #3175bc;
}

.phone-balance-value {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

/* ════════════════════════════════════════════
       CARD 4 - Cartoes Corporativos (Credit card)
       ════════════════════════════════════════════ */
.slot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  gap: 12px;
}

.card-outer-border {
  border: 1px solid var(--border-default);
  border-radius: 32px;
  padding: 8px;
}

.card-inner-border {
  border: 1px solid var(--border-default);
  border-radius: 24px;
  padding: 8px;
}

.credit-card {
  /* Antes: width: 401px; height: 238px hardcoded — quando o slot encolhia
     o card ou ficava cortado (overflow:hidden) ou achatado por height
     constraint do parent. Agora: width fluido até 401px com aspect-ratio
     preservado. Funciona em qualquer largura do produto-card.

     flex-shrink: 0 + align-self: center evita que o flex container pai
     (.slot-card) estique ou comprima o card além do aspect-ratio. */
  width: min(401px, 100%);
  aspect-ratio: 401 / 238;
  height: auto;
  flex-shrink: 0;
  align-self: center;
  border-radius: var(--radius-2xl);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.credit-card img {
  /* width/height 100% + object-fit: contain força o SVG a respeitar
     o aspect-ratio do parent sem distorção. Antes: height:auto deixava
     o <img> usar seu próprio aspect-ratio (401.155/238.738 ≠ 401/238)
     causando uma diferença sutil de ~1px que aparecia como "stretch"
     vertical em algumas viewports. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-2xl);
}

@keyframes holoShimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

.credit-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.08) 45%, transparent 60%);
  background-size: 200% 100%;
  animation: holoShimmer 6s ease-in-out infinite;
  pointer-events: none;
  border-radius: var(--radius-2xl);
}

.card-floating-badge {
  padding: 8px 20px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-default);
  background: white;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-align: center;
  animation: floatCardBadge 3s ease-in-out infinite;
}

@keyframes floatCardBadge {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

/* ════════════════════════════════════════════
       CARD 5 - Carteiras Cripto
       ════════════════════════════════════════════ */
.slot-wallets {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wallet-canvas {
  position: relative;
  margin-top: 40px;
  /* Design dimensions — todas as orbs e o ring central usam absolute
     positioning relative a essas medidas. Em viewports menores escalamos
     proporcionalmente via container query (definida abaixo). */
  width: 480px;
  height: 380px;
  transform-origin: top center;
}

/* Quando o produto-card-slot é mais estreito que 480px, escalamos o canvas
   pra caber sem clipping. Mantém alinhamento dos orbs (porque tudo é
   relativo ao mesmo coordinate space que está sendo escalado). */
@container (max-width: 479px) {
  .wallet-canvas {
    transform: scale(calc(100cqw / 480));
  }
}

.wallet-ring-center {
  position: absolute;
  left: 240px;
  top: 210px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.wallet-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(124, 231, 213, 0.0);
}

.wallet-ring-1 {
  width: 261px;
  height: 261px;
  border-color: rgba(124, 231, 213, 0.4);
  animation: xg-ring-breathe-1 4s ease-in-out infinite;
}

.wallet-ring-2 {
  width: 237px;
  height: 237px;
  border-color: rgba(124, 231, 213, 0.5);
  animation: xg-ring-breathe-2 4s ease-in-out infinite 0.8s;
}

.wallet-ring-3 {
  width: 217px;
  height: 217px;
  border-color: rgba(124, 231, 213, 0.6);
  animation: xg-ring-breathe-3 4s ease-in-out infinite 1.6s;
}

.wallet-ring-4 {
  width: 193px;
  height: 193px;
  border-color: rgba(124, 231, 213, 0.8);
}

.wallet-center-glow {
  position: absolute;
  width: 159px;
  height: 159px;
  border-radius: 50%;
  background: radial-gradient(circle, #7ce7d5 0%, #15b99f 50%, #06725f 100%);
  filter: blur(14px);
  z-index: 1;
}

.wallet-center-logo {
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wallet-center-logo svg {
  width: 49px;
  height: 50px;
  color: white;
}

.wallet-orb {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: white;
  border: 1px solid #7ce7d5;
  box-shadow: 0px 20px 25px 0px rgba(0, 0, 0, 0.1);
  padding: 8px;
  z-index: 10;
  transition: scale 250ms cubic-bezier(0.22, 1, 0.36, 1), rotate 250ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: translate, scale, rotate;
  cursor: default;
  animation: orbFloat 4s ease-in-out infinite;
}

@keyframes orbFloat {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -8px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .wallet-orb:hover {
    scale: 1.3;
    rotate: 10deg;
    z-index: 11;
  }
}

.wallet-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.wallet-orb-1 {
  top: 178px;
  left: 33.5px;
  animation-duration: 4.5s;
  animation-delay: 0s;
}

.wallet-orb-2 {
  top: 55px;
  left: 85px;
  animation-duration: 3.8s;
  animation-delay: 0.3s;
}

.wallet-orb-3 {
  top: 4px;
  left: calc(50% - 32px);
  animation-duration: 4.2s;
  animation-delay: 0.6s;
}

.wallet-orb-5 {
  top: 55px;
  left: 331px;
  animation-duration: 3.6s;
  animation-delay: 0.5s;
}

.wallet-orb-6 {
  top: 178px;
  left: 382px;
  animation-duration: 4.3s;
  animation-delay: 0.2s;
}

@media (max-width: 600px) {

  /* ── Hide before GSAP reveal (no-JS fallback in noscript) ── */
  .produto-card,
  .produtos-nav {
    visibility: hidden;
  }
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .produtos-carousel {
    padding: 0 32px;
  }

  .produtos-nav {
    padding: 0 32px;
  }
}

@media (max-width: 900px) {
  .produtos-section {
    padding: 64px 0;
  }

  .produtos-carousel {
    padding: 0 24px;
  }

  .produtos-nav {
    padding: 0 24px;
  }

  .produto-card {
    flex: 0 0 min(90vw, 420px);
    width: min(90vw, 420px);
    height: auto;
    min-height: 700px;
  }

  .credit-card {
    width: 100%;
    height: auto;
    aspect-ratio: 401/239;
  }

  /* Removemos as bordas decorativas no mobile pra dar mais espaço ao
     cartão (antes elas comiam 32px de cada lado entre 2 borders + padding,
     deixando o credit-card pequeno demais no slot). */
  .card-outer-border,
  .card-inner-border {
    width: 100%;
    border: 0;
    padding: 0;
  }

  .slot-card {
    /* Reduz padding horizontal pra usar mais largura do slot. */
    padding: 16px 8px;
    /* align-items flex-start centraliza só horizontalmente; o card
       respeita aspect-ratio e ocupa o topo do slot — empty space fica só
       embaixo (visual menos "lost"). */
    justify-content: flex-start;
  }

  .exchange-container {
    width: 100%;
  }

  .exchange-container {
    width: 100%;
  }

  .phone-mockup {
    width: min(100%, 340px);
  }
}

@media (max-width: 600px) {
  .produtos-carousel {
    padding: 0 16px;
  }

  .produtos-nav {
    padding: 0 16px;
  }

  .produtos-nav-btn {
    width: 48px;
    height: 36px;
  }

  .produto-card {
    flex: 0 0 calc(100vw - 32px);
    width: calc(100vw - 32px);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION — 4nova-era
   ══════════════════════════════════════════════════════════════════════ */




/* ══════════ SECTION WRAPPER ══════════ */
.nova-era-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px;
  width: 100%;
  max-width: 1500px;
  /* margin-inline: auto centraliza horizontalmente quando o viewport é
     mais largo que max-width (1500px). Sem isso, em monitores ≥1500px
     a section ficava "presa" à esquerda do body. */
  margin-inline: auto;
}

/* ══════════ DARK CARD CONTAINER ══════════ */
.nova-era-card {
  background: var(--background);
  border-radius: 48px;
  padding: 96px 112px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow:
    0 47px 80px 0 rgba(47, 244, 211, 0.09),
    0 19.6px 33.4px 0 rgba(47, 244, 211, 0.06),
    0 10.5px 17.9px 0 rgba(47, 244, 211, 0.05),
    0 5.9px 10px 0 rgba(47, 244, 211, 0.05),
    0 3.1px 5.3px 0 rgba(47, 244, 211, 0.04),
    0 1.3px 2.2px 0 rgba(47, 244, 211, 0.03);
  position: relative;
  overflow: hidden;
}

/* Subtle ambient glow at top-left */
.nova-era-card::before {
  content: "";
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(47, 244, 211, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* ══════════ TOP LAYOUT (text + globe) ══════════ */
.nova-era-top {
  display: flex;
  gap: 64px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ── Left text ── */
.nova-era-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 486px;
  min-width: 340px;
  flex-shrink: 0;
}

.nova-era-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.42px;
  background: linear-gradient(92deg, #7CE7D5 12%, #1BC8AC 27%, #09A78C 50%, #1BB298 74%, #86E6D6 109%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 20px;
}

.nova-era-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

.nova-era-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.nova-era-desc p {
  margin: 0 0 16px 0;
}

.nova-era-desc p:last-child {
  margin-bottom: 0;
}

/* ── Right globe area ── */
.nova-era-globe-area {
  position: relative;
  width: 550px;
  height: 440px;
  flex-shrink: 0;
}

/* Three.js canvas */
#globe-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 380px;
  pointer-events: none;
}

/* ── XGate logo at center of globe ── */
.globe-center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  z-index: 5;
  opacity: 0.85;
}

.globe-center-logo svg {
  width: 100%;
  height: 100%;
}

/* ── Orbiting currency badges ── */
.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
}

.currency-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: 22px;
  padding: 4px 12px 4px 6px;
  cursor: default;
  z-index: 10;
  pointer-events: auto;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.currency-badge:hover {
  border-color: rgba(47, 244, 211, 0.3);
  box-shadow: 0 0 20px rgba(47, 244, 211, 0.1);
}

/* ── Reflection sweep on hover ── */
.currency-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 30%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.08) 70%,
      transparent 100%);
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}

.currency-badge:hover::after {
  animation: badge-reflection 0.6s ease-out forwards;
}

@keyframes badge-reflection {
  0% {
    left: -100%;
  }

  100% {
    left: 150%;
  }
}

/* Triggered programmatically when a payment beam arrives at this badge */
.currency-badge--beam-hit {
  border-color: rgba(47, 244, 211, 0.3);
  box-shadow: 0 0 20px rgba(47, 244, 211, 0.1);
}

.currency-badge--beam-hit::after {
  animation: badge-reflection 0.6s ease-out forwards;
}

.currency-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.currency-name {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-relaxed);
  white-space: nowrap;
}

/* ══════════ BOTTOM: GLASS CARDS ══════════ */
.nova-era-bottom {
  /* Auto-fit grid: cada card pede no mínimo 240px; viewport menor que
     720 (3 × 240) automaticamente passa pra 2 colunas, depois 1. Mais
     responsivo que flex-row + breakpoints fixos. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 20px;
  width: 100%;
  margin-top: 44px;
}

/* ── Liquid Glass Card ── */
.glass-card {
  flex: 1;
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  cursor: default;
  isolation: isolate;
}

/* Frosted glass background layer */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 50%,
      rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(var(--blur-2xl)) saturate(1.8);
  -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-2xl);
  z-index: -2;
  transition: border-color 0.4s ease;
}

.glass-card:hover::before {
  border-color: rgba(47, 244, 211, 0.15);
}

/* Liquid Glass: specular highlight that moves with hover */
.glass-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse 40% 50% at var(--glass-x, 30%) var(--glass-y, 30%),
      rgba(255, 255, 255, 0.06) 0%,
      transparent 60%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.glass-card:hover::after {
  opacity: 1;
}

/* Refraction band — the "liquid" distortion shimmer */
.glass-refraction {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.glass-card:hover .glass-refraction {
  opacity: 1;
}

.glass-refraction::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 180deg at 50% 50%,
      transparent 0deg,
      rgba(47, 244, 211, 0.03) 60deg,
      transparent 120deg,
      rgba(124, 231, 213, 0.04) 210deg,
      transparent 280deg,
      rgba(47, 244, 211, 0.02) 340deg,
      transparent 360deg);
  animation: glass-refract-spin 8s linear infinite;
}

@keyframes glass-refract-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Inner edge glow for depth — Apple-style */
.glass-inner-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 1;
}

.glass-card-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  position: relative;
  z-index: 2;
}

.glass-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.glass-card-icon svg {
  width: 30px;
  height: 30px;
  stroke: var(--primary);
  stroke-width: 1.5;
  fill: none;
}

.glass-card-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
}

/* ══════════ GSAP ENTRANCE STATE ══════════ */
.ne-animate {
  visibility: hidden;
}

/* ══════════ RESPONSIVE ══════════
   Breakpoints canônicos: 1024px (xl), 768px (lg), 480px (sm).
   Antes usávamos 1100/960/700/680 — fragmentado e com regras conflitantes
   (680/700 overlap). Consolidação reduz manutenção e garante consistência
   com o resto do projeto. */

/* 2xl breakpoint (≤1280px): stack do top (texto + globo) e ajusta spacing.
   Antes era 64rem (1024px), mas o flex-row precisa de ~1424px pra caber
   sem overflow (text 486 + gap 64 + globe 550 + chrome 324 = 1424). Em
   viewports 1024-1280 a row overflowava o card e cortava o título. */
@media (max-width: 80rem) {
  .nova-era-section {
    padding: 32px 24px;
  }

  .nova-era-card {
    padding: 64px 48px;
    border-radius: var(--radius-4xl);
  }

  .nova-era-top {
    flex-direction: column;
    gap: 48px;
  }

  .nova-era-text {
    max-width: 100%;
    min-width: 0;
  }

  .nova-era-globe-area {
    width: 100%;
    max-width: 500px;
    height: 400px;
    margin: 0 auto;
  }
}

/* lg breakpoint (≤768px): cards bottom 2-col → 1-col */
@media (max-width: 48rem) {
  .nova-era-bottom {
    flex-direction: column;
  }

  .nova-era-bottom>.glass-card {
    flex: 1 1 auto;
  }

  .nova-era-card {
    padding: 40px 24px;
    border-radius: var(--radius-3xl);
  }

  /* Globe area ganha overflow:hidden para nunca permitir spillover de badges
     se o cálculo errar em telas exóticas. */
  .nova-era-globe-area {
    height: 340px;
    max-width: 100%;
    overflow: hidden;
  }

  #globe-canvas {
    width: 240px;
    height: 240px;
  }

  /* Orbit ring é responsivo: nunca ultrapassa o globe-area. O JS
     recalcula radiusX/radiusY com base em ring.clientWidth real. */
  .orbit-ring {
    width: min(320px, 100%);
    height: 320px;
    max-width: 100%;
  }
}

/* Smartphone pequeno (<480px) — comprime ainda mais para evitar overflow */
@media (max-width: 480px) {
  .nova-era-globe-area {
    height: 300px;
  }

  #globe-canvas {
    width: 200px;
    height: 200px;
  }

  .orbit-ring {
    width: min(280px, 100%);
    height: 280px;
  }

  .currency-badge {
    /* Badge mais compacto em telas muito pequenas para caber dentro do ring */
    padding: 3px 10px 3px 4px;
    border-radius: 18px;
  }

  .currency-icon {
    width: 22px;
    height: 22px;
  }

  .currency-name {
    font-size: var(--text-xs);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION — 5solucoes
   ══════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Section ── */
.solucoes-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px;
  font-family: var(--font-sans), sans-serif;
  overflow: hidden;
}

/* ── Card ── */
.solucoes-card {
  max-width: 1100px;
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  padding: 112px;
  overflow: hidden;
}

/* ── Headline (inside card, 2-column) ── */
.solucoes-headline {
  display: flex;
  gap: 31px;
  align-items: flex-start;
  margin-bottom: 48px;
}

.solucoes-headline__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  flex-shrink: 0;
  max-width: 420px;
}

.solucoes-headline__subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  flex: 1;
}

.solucoes-card__inner {
  display: flex;
  gap: 31px;
}

/* ── Left column: tabs ── */
.solucoes-tabs {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--surface-3);
  position: relative;
}

.solucoes-tab {
  padding: 16px 16px 18px 16px;
  width: 305px;
  display: flex;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.solucoes-tab__bar {
  width: 8px;
  height: 24px;
  border-radius: var(--radius-xs);
  background: var(--text-disabled);
  filter: blur(2.5px);
  flex-shrink: 0;
}

.solucoes-tab__label {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  transition: color 200ms ease;
}

.solucoes-tab:hover .solucoes-tab__label {
  color: var(--text-primary);
}

.solucoes-tab.is-active .solucoes-tab__label {
  color: var(--text-primary);
}

/* Sliding teal indicator */
.solucoes-indicator {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 8px;
  height: 24px;
  background: var(--primary);
  filter: blur(2.5px);
  border-radius: var(--radius-xs);
  pointer-events: none;
  z-index: 2;
}

/* Progress bar under active tab */
.solucoes-tab__progress {
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: transparent;
  overflow: hidden;
}

.solucoes-tab__progress-fill {
  width: 0%;
  height: 100%;
  background: var(--primary);
  opacity: 0.4;
}

/* ── Right column: content ── */
.solucoes-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.solucoes-content__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.solucoes-desc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.solucoes-desc__short {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.solucoes-desc__short strong {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.solucoes-desc__expanded {
  overflow: hidden;
  height: 0;
}

.solucoes-desc__expanded-inner {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  padding-top: 8px;
}

.solucoes-desc__expanded-inner strong {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.solucoes-desc__expanded-inner p {
  margin-bottom: 8px;
}

.solucoes-desc__expanded-inner p:last-child {
  margin-bottom: 0;
}

.solucoes-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: var(--leading-normal);
}

.solucoes-expand-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms var(--xg-ease-out-expo);
  flex-shrink: 0;
}

.solucoes-expand-btn.is-expanded svg {
  transform: rotate(180deg);
}

/* ── Permits section ── */
.solucoes-permits__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.solucoes-checks {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

.solucoes-check {
  display: flex;
  gap: 6px;
  padding: 4px 0;
  align-items: flex-start;
}

.solucoes-check svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--primary);
}

.solucoes-check__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.solucoes-check__text strong {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* ── Hide before GSAP reveal ── */
.solucoes-headline,
.solucoes-card,
.solucoes-tab,
.solucoes-content {
  visibility: hidden;
}

/* ── Responsive: < 900px ── */
@media (max-width: 900px) {
  .solucoes-section {
    padding: 32px;
  }

  .solucoes-card {
    padding: 48px;
  }

  .solucoes-headline {
    flex-direction: column;
    gap: 16px;
  }

  .solucoes-headline__title {
    max-width: 100%;
  }

  .solucoes-card__inner {
    flex-direction: column;
    gap: 24px;
  }

  /* Abaixo de 900px, trocamos o layout tabs+painel por um acordeão vertical.
     Tabs e painel são escondidos; o container `.solucoes-accordion` assume. */
  .solucoes-tabs,
  .solucoes-content {
    display: none !important;
  }

  .solucoes-accordion {
    display: flex !important;
  }
}

/* ── Accordion (mobile-only layout) ── */
.solucoes-accordion {
  display: none;
  flex-direction: column;
  width: 100%;
  gap: 0;
}

.solucoes-acc-item {
  border-bottom: 1px solid var(--surface-3);
}

.solucoes-acc-item:first-child {
  border-top: 1px solid var(--surface-3);
}

.solucoes-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
}

.solucoes-acc-label {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  transition: color 200ms ease;
}

.solucoes-acc-item.is-open .solucoes-acc-label,
.solucoes-acc-head:hover .solucoes-acc-label {
  color: var(--text-primary);
}

.solucoes-acc-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease;
}

.solucoes-acc-item.is-open .solucoes-acc-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

.solucoes-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.solucoes-acc-item.is-open .solucoes-acc-body {
  grid-template-rows: 1fr;
}

.solucoes-acc-body-inner {
  overflow: hidden;
  min-height: 0;
}

.solucoes-acc-body-content {
  padding: 4px 4px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.solucoes-acc-body-content .solucoes-desc__short {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.solucoes-acc-body-content .solucoes-desc__short strong {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.solucoes-acc-body-content .solucoes-permits__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-top: 4px;
}

.solucoes-acc-body-content .solucoes-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.solucoes-acc-body-content .solucoes-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.solucoes-acc-body-content .solucoes-check svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--primary);
  margin-top: 2px;
}

/* ── Responsive: < 600px ── */
@media (max-width: 600px) {
  .solucoes-section {
    padding: 24px;
  }

  .solucoes-card {
    padding: 24px;
  }

  .solucoes-headline__title {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
  }

  .solucoes-headline__subtitle {
    font-size: var(--text-sm);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION — 6cta
   ══════════════════════════════════════════════════════════════════════ */
/* ── Section ── */
.cta-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background: var(--background);
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
}

/* ── Wrapper for parallax + positioning ── */
.cta-wrapper {
  position: relative;
  width: 774px;
  max-width: 90vw;
  /* visibility é controlada pelo GSAP via gsap.set(...). Se o script
     falhar (ex.: arquivo truncado, GSAP offline), o card ainda aparece. */
}

/* ── Background glow ── */
.cta-glow {
  position: absolute;
  width: 678px;
  height: 381px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(39px);
  border-radius: 40%;
  background: linear-gradient(135deg, #7CE7D5 0%, #1BC8AC 30%, #09A78C 60%, #1BB298 80%, #86E6D6 100%);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* ── Ring shared styles ── */
.cta-ring {
  position: relative;
  padding: 8px;
  will-change: transform;
}

/* ── Ring 1 (outermost) ── */
.cta-ring-1 {
  border: 1px solid rgba(47, 244, 211, 0.12);
  border-radius: 64px;
  animation: xg-ring-breathe-1 4s ease-in-out infinite;
  z-index: 1;
}

/* ── Ring 2 (middle) ── */
.cta-ring-2 {
  border: 1px solid rgba(47, 244, 211, 0.18);
  border-radius: 48px;
  animation: xg-ring-breathe-2 4s ease-in-out infinite 0.8s;
}

/* ── Ring 3 (innermost) ── */
.cta-ring-3 {
  border: 1px solid rgba(47, 244, 211, 0.25);
  border-radius: var(--radius-4xl);
  animation: xg-ring-breathe-3 4s ease-in-out infinite 1.6s;
}

/* ── Card central ── */
.cta-card {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: 64px 96px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  overflow: visible;
  will-change: transform;
  z-index: 2;
}

/* Retângulo de fundo desfocado */
.cta-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #7CE7D5, #1BC8AC, #09A78C, #0EB88E, #1BC8AC);
  background-size: 300% 300%;
  animation: cta-gradient-shift 8s ease-in-out infinite;
  filter: blur(20px);
  border-radius: var(--radius-2xl);
  z-index: 0;
  pointer-events: none;
}

@keyframes cta-gradient-shift {
  0% {
    background-position: 0% 0%;
  }

  25% {
    background-position: 100% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  75% {
    background-position: 0% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

/* ── World map background ── */
.cta-map {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  max-width: 1400px;
  height: auto;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 899px) {
  .cta-map {
    display: none;
  }
}

/* ── Specular highlight ── */
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 255, 255, 0.15) 0%,
      transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 3;
}

.cta-card:hover::before {
  opacity: 1;
}

/* ── Mobile / touch: desabilita efeitos de mouse ──
   Remove o spotlight (::before) e o parallax (transforms inline) nos
   cards de CTA quando não há ponteiro fino (touch devices). */
@media (hover: none),
(pointer: coarse),
(max-width: 767px) {
  .cta-card::before {
    display: none !important;
  }

  /* Trava o transform inline aplicado pelo JS de parallax. */
  .cta-card,
  .cta-ring-1,
  .cta-ring-2,
  .cta-ring-3 {
    transform: none !important;
  }
}

/* ── Noise texture overlay ── */
.cta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  background-image:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 3px),
    repeating-linear-gradient(90deg,
      transparent,
      transparent 3px,
      rgba(255, 255, 255, 0.02) 3px,
      rgba(255, 255, 255, 0.02) 4px),
    repeating-linear-gradient(45deg,
      transparent,
      transparent 5px,
      rgba(255, 255, 255, 0.015) 5px,
      rgba(255, 255, 255, 0.015) 6px);
  opacity: 0.03;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 4;
}

/* ── Card content ── */
.cta-content {
  position: relative;
  z-index: 5;
}

.cta-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: #fff;
  line-height: var(--leading-tight);
  max-width: 502px;
  margin: 0 auto;
}

.cta-desc {
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  color: #fff;
  line-height: var(--leading-normal);
  max-width: 420px;
  margin: 16px auto 0;
  opacity: 0.9;
}

/* ── Buttons row ── */
.cta-buttons {
  display: flex;
  gap: 13px;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

/* ── Primary button ── */
.cta-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: none;
  border-radius: 40px;
  height: 48px;
  padding: 0 24px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible;
  z-index: 1;
}

.cta-btn-primary-text {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  background: linear-gradient(169deg, #7CE7D5 13%, #1BC8AC 26%, #09A78C 49%, #1BB298 74%, #86E6D6 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.cta-btn-primary svg {
  color: #09A78C;
  flex-shrink: 0;
  display: inline-block;
}

/* Glow behind primary button */
.cta-btn-primary::before {
  content: "";
  position: absolute;
  inset: -10px -20px;
  border-radius: 40px;
  background: linear-gradient(169deg, #7CE7D5, #1BC8AC, #09A78C);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  pointer-events: none;
}

.cta-btn-primary:hover::before {
  opacity: 0.5;
}

.cta-btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(47, 244, 211, 0.25);
}

.cta-btn-primary:active {
  transform: scale(0.97);
}

/* Shimmer sweep — subtle with long pause */
.cta-btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg,
      transparent 20%,
      rgba(47, 244, 211, 0.08) 40%,
      rgba(47, 244, 211, 0.14) 50%,
      rgba(47, 244, 211, 0.08) 60%,
      transparent 80%);
  transform: skewX(-20deg);
  animation: cta-shimmer 8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  border-radius: 40px;
  pointer-events: none;
}

@keyframes cta-shimmer {

  0%,
  70% {
    left: -100%;
    opacity: 0;
  }

  72% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  88%,
  100% {
    left: 200%;
    opacity: 0;
  }
}

/* Glow below primary button */
.cta-btn-glow {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 72px;
  background: radial-gradient(ellipse at center, rgba(47, 244, 211, 0.2), transparent 70%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ── Secondary button ── */
.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 40px;
  height: 48px;
  padding: 0 24px;
  cursor: pointer;
  text-decoration: none;
  color: #C1EFE7;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: color 0.3s ease, background 0.3s ease;
}

.cta-btn-secondary svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  display: inline-block;
}

.cta-btn-secondary:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.cta-btn-secondary:hover svg {
  transform: translateX(4px);
}

/* ── Floating particles ── */
.cta-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--primary);
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes cta-float {

  0%,
  100% {
    transform: translate(var(--tx-start), var(--ty-start)) scale(var(--scale, 1));
    opacity: var(--op);
  }

  25% {
    transform: translate(calc(var(--tx-start) + var(--drift-x, 15px)), calc(var(--ty-start) - var(--drift-y, 30px))) scale(calc(var(--scale, 1) * 1.1));
    opacity: calc(var(--op) * 1.3);
  }

  50% {
    transform: translate(calc(var(--tx-start) + var(--drift-x2, -10px)), calc(var(--ty-start) + var(--drift-y2, 10px))) scale(var(--scale, 1));
    opacity: var(--op);
  }

  75% {
    transform: translate(calc(var(--tx-start) - var(--drift-x, 15px)), calc(var(--ty-start) + var(--drift-y, 30px))) scale(calc(var(--scale, 1) * 0.9));
    opacity: calc(var(--op) * 0.8);
  }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .cta-card {
    padding: 48px 40px;
    /* O card (e os rings que o envolvem) ocupa 60% da altura da viewport.
       justify-content:center mantém o conteúdo centralizado verticalmente. */
    min-height: 60vh;
    justify-content: center;
  }

  /* Rings empilhados: cada um precisa esticar seu filho para 100% de altura
     para que o card interno determine a altura final (60vh). */
  .cta-ring {
    padding: 6px;
    display: flex;
  }

  .cta-ring>* {
    flex: 1;
  }

  .cta-title {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
  }
}

@media (max-width: 600px) {
  .cta-buttons {
    flex-direction: column;
  }

  .cta-card {
    padding: 32px 24px;
  }

  .cta-ring-1 {
    border-radius: 48px;
  }

  .cta-ring-1::before {
    border-radius: 48px;
  }

  .cta-ring-2 {
    border-radius: 36px;
  }

  .cta-ring-2::before {
    border-radius: 36px;
  }

  .cta-ring-3 {
    border-radius: var(--radius-3xl);
  }

  .cta-glow {
    width: 90%;
    height: 280px;
  }
}

@media (max-width: 400px) {

  .cta-ring-1,
  .cta-ring-2 {
    border-color: transparent !important;
    padding: 0;
  }

  .cta-ring-1::before,
  .cta-ring-2::before {
    display: none;
  }

  .cta-ring-1,
  .cta-ring-2 {
    animation: none;
  }

  .cta-glow {
    width: 280px;
    height: 200px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION — 7infraestrutura
   ══════════════════════════════════════════════════════════════════════ */



@property --glass-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 30%;
}

@property --glass-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 30%;
}


/* ══════════ SECTION WRAPPER ══════════ */
.infra-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px;
  width: 100%;
  max-width: 1500px;
  /* Centraliza no viewport quando body é mais largo que 1500px. */
  margin-inline: auto;
}

/* ══════════ DARK CARD CONTAINER ══════════ */
.infra-card {
  background: var(--background);
  border-radius: 48px;
  padding: 96px 112px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow:
    0 47px 80px 0 rgba(47, 244, 211, 0.09),
    0 19.6px 33.4px 0 rgba(47, 244, 211, 0.06),
    0 10.5px 17.9px 0 rgba(47, 244, 211, 0.05),
    0 5.9px 10px 0 rgba(47, 244, 211, 0.05),
    0 3.1px 5.3px 0 rgba(47, 244, 211, 0.04),
    0 1.3px 2.2px 0 rgba(47, 244, 211, 0.03);
  position: relative;
  overflow: hidden;
}

/* ══════════ BACKGROUND IMAGE ══════════ */
.infra-bg-image {
  position: absolute;
  top: 20px;
  right: 0;
  width: 55%;
  height: calc(100%);
  /* `cover` garante que a imagem preencha todo o frame sem deixar espaço
     vazio. `right center` fixa a borda direita da imagem à direita do card
     (cortando a sobra à esquerda se o aspect-ratio não bater). */
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent 0%, black 30%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
  will-change: transform;
}

/* ══════════ TEXT CONTENT ══════════ */
.infra-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 486px;
  position: relative;
  z-index: 2;
}

.infra-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: linear-gradient(92deg, #7CE7D5 12%, #1BC8AC 27%, #09A78C 50%, #1BB298 74%, #86E6D6 109%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: var(--leading-normal);
}

.infra-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

.infra-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.infra-desc p {
  margin: 0 0 16px 0;
}

.infra-desc p:last-child {
  margin-bottom: 0;
}

/* ══════════ BOTTOM: GLASS CARDS ══════════ */
.infra-bottom {
  display: flex;
  gap: 20px;
  width: 100%;
  margin-top: 44px;
  position: relative;
  z-index: 2;
}

/* ── Liquid Glass Card ── */
.glass-card {
  flex: 1;
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  cursor: default;
  isolation: isolate;
}

/* Frosted glass background layer */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 50%,
      rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(var(--blur-2xl)) saturate(1.8);
  -webkit-backdrop-filter: blur(var(--blur-2xl)) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-2xl);
  z-index: -2;
  transition: border-color 0.4s ease;
}

.glass-card:hover::before {
  border-color: rgba(47, 244, 211, 0.15);
}

/* Liquid Glass: specular highlight that moves with hover */
.glass-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse 40% 50% at var(--glass-x, 30%) var(--glass-y, 30%),
      rgba(255, 255, 255, 0.06) 0%,
      transparent 60%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.glass-card:hover::after {
  opacity: 1;
}

/* Refraction band — the "liquid" distortion shimmer */
.glass-refraction {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.glass-card:hover .glass-refraction {
  opacity: 1;
}

.glass-refraction::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 180deg at 50% 50%,
      transparent 0deg,
      rgba(47, 244, 211, 0.03) 60deg,
      transparent 120deg,
      rgba(124, 231, 213, 0.04) 210deg,
      transparent 280deg,
      rgba(47, 244, 211, 0.02) 340deg,
      transparent 360deg);
  animation: glass-refract-spin 8s linear infinite;
}

@keyframes glass-refract-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Inner edge glow for depth — Apple-style */
.glass-inner-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 1;
}

.infra-glass-content {
  padding: 24px;
  position: relative;
  z-index: 2;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
}

.infra-glass-content strong {
  font-weight: var(--font-weight-bold);
}

/* ══════════ GSAP ENTRANCE STATE ══════════ */
.infra-animate {
  visibility: hidden;
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 1100px) {
  .infra-section {
    padding: 32px 24px;
  }

  .infra-card {
    padding: 64px 48px 0;
    border-radius: var(--radius-4xl);
  }

  /* Imagem sai do fundo e entra no flow como último item do card,
     colada na parte de baixo, com espaço após o texto/cards acima. */
  .infra-bg-image {
    position: relative;
    top: auto;
    right: auto;
    order: 99;
    width: 100%;
    height: auto;
    max-height: 420px;
    margin-top: 48px;
    opacity: 1;
    object-fit: cover;
    object-position: center top;
    mask-image: none;
    -webkit-mask-image: none;
    /* Neutraliza o parallax do GSAP nesse breakpoint */
    transform: none !important;
    translate: none !important;
  }
}

/* 3 cards viram 1 coluna a partir de 960px (antes apertavam muito até 700px) */
@media (max-width: 960px) {
  .infra-bottom {
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .infra-card {
    padding: 40px 24px 0;
    border-radius: var(--radius-3xl);
  }

  .infra-bg-image {
    max-height: 320px;
    margin-top: 40px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION — 8faq
   ══════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Section ── */
.faq-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 128px 24px;
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ── */
.faq-layout {
  max-width: 1324px;
  width: 100%;
  display: flex;
  gap: 72px;
  align-items: start;
}

/* ── Left Column ── */
.faq-left {
  flex: 1;
  min-width: 0;
}

.faq-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: 61px;
  visibility: hidden;
}

/* ── Accordion ── */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq-item {
  border-top: 2px solid var(--border-default);
  transition: border-color 300ms;
  visibility: hidden;
}

.faq-item.is-open {
  border-top-color: var(--primary);
}

.faq-header {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 62px;
  padding: 16px 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.faq-question {
  flex: 1;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  transition: color 200ms;
}

.faq-chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.4s var(--xg-ease-out-expo), color 200ms;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

.faq-header:hover .faq-question,
.faq-item.is-open .faq-question {
  color: var(--text-primary);
}

.faq-header:hover .faq-chevron,
.faq-item.is-open .faq-chevron {
  color: var(--text-primary);
}

.faq-body {
  overflow: hidden;
  height: 0;
}

.faq-body-content {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  padding-bottom: 20px;
}

/* ── FAQ Link ── */
.faq-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  margin-top: 12px;
  text-decoration: none;
  transition: gap 200ms, text-decoration 200ms;
}

.faq-link:hover {
  text-decoration: underline;
  gap: 10px;
}

/* ── Right Column — Image Card ── */
.faq-right {
  width: 448px;
  flex-shrink: 0;
  visibility: hidden;
}

.faq-card {
  width: 448px;
  height: 631px;
  border-radius: var(--radius-lg);
  background: var(--background);
  overflow: hidden;
  position: relative;
  transition: transform 0.6s var(--xg-ease-out-expo), box-shadow 0.6s var(--xg-ease-out-expo);
}

.faq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.faq-card__glow {
  position: absolute;
  bottom: -334px;
  left: 50%;
  transform: translateX(-50%);
  width: 557px;
  height: 372px;
  background: radial-gradient(ellipse at center, rgba(0, 194, 168, 0.15) 0%, transparent 70%);
  filter: blur(var(--blur-2xl));
  pointer-events: none;
  transition: opacity 0.6s;
}

.faq-card:hover .faq-card__glow {
  opacity: 1.4;
}

.faq-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transition: transform 0.6s var(--xg-ease-out-expo);
}

.faq-card:hover .faq-card__image {
  transform: scale(1.05);
}

.faq-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 53%, rgba(0, 0, 0, 0.8) 94%);
  pointer-events: none;
  border-radius: var(--radius-lg);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .faq-layout {
    flex-direction: column;
    gap: 48px;
  }

  .faq-right {
    width: 100%;
    max-width: 500px;
    align-self: center;
  }

  .faq-card {
    width: 100%;
    height: 400px;
  }
}

@media (max-width: 700px) {
  .faq-section {
    padding: 24px;
  }

  .faq-title {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
  }

  .faq-question {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }

  .faq-card {
    height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .faq-title,
  .faq-item,
  .faq-right {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION — 9footer
   ══════════════════════════════════════════════════════════════════════ */
/* ── Section ── */
.footer-section {
  overflow: hidden;
  position: relative;
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
}

/* Padding vertical/horizontal é do próprio `.fold` (58px). */
.site-footer-inner {
  width: 100%;
  max-width: 1324px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 62px;
  visibility: hidden;
  overflow: visible;
}

/* ── Brand Card ── */
.footer-brand {
  position: relative;
  width: 372px;
  height: 446px;
  min-width: 372px;
  border-radius: 48px;
  background: transparent;
  overflow: hidden;
  flex-shrink: 0;
  overflow: visible;
}

/* ── Blurred animated gradient background — same technique as CTA card ── */
.footer-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #7CE7D5, #1BC8AC, #09A78C, #0EB88E, #1BC8AC);
  background-size: 300% 300%;
  animation: footer-gradient-shift 8s ease-in-out infinite;
  filter: blur(20px);
  border-radius: 48px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

@keyframes footer-gradient-shift {
  0% {
    background-position: 0% 0%;
  }

  25% {
    background-position: 100% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  75% {
    background-position: 0% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

/* ── Brand inner content wrapper ── */
.footer-brand-inner {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: visible;
}

/* ── Brand card glow ── */
.footer-brand-glow {
  position: absolute;
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(39px);
  border-radius: 40%;
  background: linear-gradient(135deg, #7CE7D5 0%, #1BC8AC 30%, #09A78C 60%, #1BB298 80%, #86E6D6 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  overflow: visible;
}

/* ── Breathing border ── */
.footer-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 48px;
  border: 1px solid rgba(47, 244, 211, 0.15);
  animation: footer-breathe 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

@keyframes footer-breathe {

  0%,
  100% {
    border-color: rgba(47, 244, 211, 0.15);
  }

  50% {
    border-color: rgba(47, 244, 211, 0.30);
  }
}

/* ── Rotating beam ── */
.footer-brand::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 48px;
  padding: 1px;
  background: conic-gradient(from var(--footer-beam-angle),
      transparent 0deg,
      transparent 300deg,
      rgba(47, 244, 211, 0.4) 340deg,
      rgba(47, 244, 211, 0.6) 350deg,
      transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: footer-beam-rotate 6s linear infinite;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

@keyframes footer-beam-rotate {
  from {
    --footer-beam-angle: 0deg;
  }

  to {
    --footer-beam-angle: 360deg;
  }
}

/* ── Specular highlight ── */
.footer-brand-specular {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 255, 255, 0.08) 0%,
      transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}

.footer-brand:hover .footer-brand-specular {
  opacity: 1;
}

/* ── Floating particles ── */
.footer-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--primary);
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 1;
}

@keyframes footer-float {

  0%,
  100% {
    transform: translate(var(--tx-start), var(--ty-start)) scale(var(--scale, 1));
    opacity: var(--op);
  }

  25% {
    transform: translate(calc(var(--tx-start) + var(--drift-x, 15px)), calc(var(--ty-start) - var(--drift-y, 30px))) scale(calc(var(--scale, 1) * 1.1));
    opacity: calc(var(--op) * 1.3);
  }

  50% {
    transform: translate(calc(var(--tx-start) + var(--drift-x2, -10px)), calc(var(--ty-start) + var(--drift-y2, 10px))) scale(var(--scale, 1));
    opacity: var(--op);
  }

  75% {
    transform: translate(calc(var(--tx-start) - var(--drift-x, 15px)), calc(var(--ty-start) + var(--drift-y, 30px))) scale(calc(var(--scale, 1) * 0.9));
    opacity: calc(var(--op) * 0.8);
  }
}

/* ── Brand content ── */
.footer-logo svg {
  width: auto;
  height: 24px;
  color: #fff;
}

.footer-tagline {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  line-height: var(--leading-relaxed);
  margin-top: 20px;
  max-width: 280px;
}

.footer-copyright {
  margin-top: auto;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  line-height: var(--leading-normal);
}

/* ── Link Columns ── */
.footer-links {
  display: flex;
  flex: 1;
  gap: 0;
}

.footer-col {
  flex: 1;
  padding: 0 32px;
  border-left: 1px solid var(--border-default);
}

.footer-col-title {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-normal);
  margin: 0 0 24px 0;
}

.footer-col-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col-list a {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: #868b8b;
  line-height: var(--leading-normal);
  text-decoration: none;
  transition: color 200ms;
}

.footer-col-list a:hover {
  color: var(--text-primary);
}

/* ── Responsive < 1100px ── */
@media (max-width: 1100px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: center;
  }

  .footer-brand {
    width: 100%;
    max-width: 500px;
    min-width: 0;
    height: 300px;
  }

  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    width: 100%;
  }

  .footer-col {
    border-left: none;
    border-bottom: 1px solid var(--border-default);
    padding: 0 0 32px 0;
  }
}

/* ── Responsive < 700px ── */
@media (max-width: 700px) {
  .site-footer-inner {
    padding: 24px;
  }

  /* Permite que o glow do card vaze para fora da section no mobile,
     suavizando a transição do teal para o branco do footer/áreas vizinhas. */
  .footer-section {
    overflow: visible;
  }

  .footer-brand {
    height: 260px;
    border-radius: var(--radius-4xl);
    /* Soft outer glow para suavizar a transição do card teal para o branco
       do footer no mobile — evita o "corte seco" entre as duas cores. */
    box-shadow:
      0 0 60px rgba(27, 200, 172, 0.35),
      0 0 140px rgba(124, 231, 213, 0.18);
  }

  .footer-brand::after {
    border-radius: var(--radius-4xl);
  }

  .footer-brand::before {
    border-radius: var(--radius-4xl);
  }

  .footer-brand-specular {
    border-radius: var(--radius-4xl);
  }

  /* Aumenta o blur do gradiente animado e amplia o glow ambient para
     reforçar a sensação de halo em volta do card no mobile. */
  .footer-bg {
    filter: blur(32px);
  }

  .footer-brand-glow {
    width: 130%;
    height: 160%;
    filter: blur(60px);
  }

  .footer-brand-inner {
    padding: 32px 28px;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-col {
    border-bottom: 1px solid var(--border-default);
    padding: 24px 0;
  }

  .footer-col:last-child {
    border-bottom: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   FOLD UTILITY
   Classe única aplicada manualmente na dobra pai. O filho direto recebe
   max-width: 1400px via `> *`. NÃO aplicada em .produtos-section (carousel)
   nem em .cta-section, que já têm seu próprio sistema de centralização.

   Aplicada por último para vencer a cascata sobre os blocos por-seção.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --fold-max-width: 1400px;
  --fold-padding: 58px;
}

/* Em telas estreitas, reduz o padding lateral/vertical de todas as dobras.
   Como a fórmula do carousel e `.produtos-nav` também usam esse token,
   elas acompanham automaticamente. */
@media (max-width: 700px) {
  :root {
    --fold-padding: 24px;
  }
}

.fold {
  width: 100%;
  max-width: none;
  padding: var(--fold-padding);
  box-sizing: border-box;
}

.fold>* {
  width: 100%;
  max-width: var(--fold-max-width);
  margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   GLASS ENHANCEMENT — backdrop blur 10px + rim light direcional +
   especular dinâmico seguindo o cursor.
   ══════════════════════════════════════════════════════════════════════ */

/* Backdrop blur 10px no frost layer. */
.glass-card::before {
  backdrop-filter: blur(10px) saturate(1.8);
  -webkit-backdrop-filter: blur(10px) saturate(1.8);
}

/* Rim light direcional — gradient-stroke simulando luz do topo-esquerda.
   Substitui o box-shadow inset antigo por uma borda com gradiente,
   usando a técnica de máscara dupla (padding-box XOR border-box). */
.glass-inner-glow {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 22%,
      rgba(255, 255, 255, 0) 50%,
      rgba(0, 0, 0, 0.12) 100%) border-box;
  border: 1px solid transparent;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  box-shadow: none;
}

/* Highlight especular seguindo o cursor via --glass-x/--glass-y
   (atualizadas pelo JS do 4nova-era e 7infra em cada mousemove). */
.glass-card::after {
  background: radial-gradient(ellipse 45% 55% at var(--glass-x, 30%) var(--glass-y, 30%),
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 30%,
      transparent 65%);
  opacity: 0.6;
}

.glass-card:hover::after {
  opacity: 1;
}