/* 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.

   IMPORTANTE: o GSAP do hero detecta esse breakpoint e omite `filter`
   do tween (revealTo no mobile = { opacity, y } só). Combinado com este
   override + will-change reduzido aqui, eliminamos a criação/destruição
   de layer de filtro mid-animation que causava stutter dos cards
   Entrada/Ticket Médio/Taxas no Chrome mobile e Safari iOS. */
@media (max-width: 47.99rem) {
  .ha {
    filter: none !important;
    /* will-change reduzido pra opacity+transform — sem filter no tween,
       declarar will-change:filter força camada GPU desnecessária. Cada
       elemento .ha (≈25 deles no hero) com 1 propriedade a menos no
       will-change libera meta de composição no Chrome/Safari mobile. */
    will-change: opacity, transform;
  }

  /* Pré-alocação de layer GPU pros elementos de entrada das seções abaixo
     do hero. Quando o GSAP entra pra animar (.product-card, .moeda-pill,
     .moedas-title etc), o navegador costuma criar a camada de compositor
     NO MOMENTO da animação, causando um pequeno freeze (especialmente no
     Safari iOS). will-change avisa o navegador antes — a camada existe
     DESDE o load, animação GSAP entra GPU-acelerada sem custo de criação.
     (Não usamos translateZ(0) pra não conflitar com transforms existentes
     em .moedas-glow que centralizam via translate(-50%,-50%).) */
  .product-card,
  .moeda-pill,
  .moedas-title,
  .moedas-label,
  .XGate-pill,
  .moedas-glow,
  .nova-era-card,
  .nova-era-text,
  .infra-animate,
  .solucoes-card,
  .solucoes-headline {
    will-change: opacity, transform;
  }
}

/* ══════════ 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;
}

/* ── Estabilidade de largura durante o count-up ──
   countUp() reescreve textContent ~60x/s. Sem largura fixa, o número de
   dígitos muda (R$0 → R$343.343) e dispara reflow do flex container a
   cada tick — gera "agarradinha" perceptível no iPhone na entrada do hero.
   tabular-nums uniformiza largura dos dígitos; min-width reserva espaço
   pro maior valor antes mesmo de qualquer tick. */
.dash-card-value,
.balance-stats-value,
.graph-label-value,
.graph-info-val {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.dash-card-value {
  min-width: 7ch;
}

.balance-stats-value {
  min-width: 6ch;
}

.graph-label-value {
  min-width: 5ch;
}

.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 removido — forçava a seção a preencher viewport
     inteiro mesmo quando os cards naturalmente ocupavam menos. Combinado
     com flex-center, jogava espaço em branco abaixo do último card
     (Wallets & Custódia) antes da Moedas section. */
  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;
  /* blur estático — antes era animado de 10px → 30px infinitamente,
     forçando a GPU a re-renderizar o blur de 274,770px a 120Hz no
     iPhone 16 Pro Max (ProMotion). Esse era o assassino do scroll
     lento entre Wallets e Moedas: a GPU saturava recalculando blur
     a cada frame e não tinha banda pra animação GSAP/scroll. Agora
     blur é fixo (20px), só a OPACITY pulsa — opacity é compositor-only,
     não requer recalculo de pixels. */
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: logo-blur-pulse 3s ease-in-out infinite;
}

@keyframes logo-blur-pulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.75;
  }
}

.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 reduzido (128→80) e min-height removido. Antes a section
     forçava 100vh + flex-center e jogava conteúdo no meio com vazio
     enorme acima/abaixo, distoando do espaçamento das demais seções. */
  padding: 80px 24px;
  position: relative;
  overflow: visible;
}

/* ── 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.7), rgba(124, 231, 213, 0.5));
  /* blur reduzido de 150px → 80px. Em Safari iOS, blur(150px) força
     buffer de 520×449px (220+150*2 × 149+150*2) filtrado a cada frame
     pelo glowPulse — custo de GPU absurdo. 80px mantém o efeito visual
     (glow difuso atrás das pills) mas o buffer cai pra 380×309px (~58% menor)
     e a animação rola sem stutter no iPhone. Opacidade aumentada
     compensa a perda visual mínima. */
  filter: blur(80px);
  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);
  /* Compositor-only: trocamos animação de `left` (paint) por `transform: translateX`.
     Element width=60% parent, então translateX(-167%) ≈ left:-100%, translateX(250%) ≈ left:150%. */
  left: 0;
  transform: translateX(-167%) skewX(-20deg);
  animation: xgateShimmer 6s infinite;
  will-change: transform;
}

@keyframes xgateShimmer {
  0%,
  80% {
    transform: translateX(-167%) skewX(-20deg);
  }

  90% {
    transform: translateX(250%) skewX(-20deg);
  }

  100% {
    transform: translateX(250%) skewX(-20deg);
  }
}

/* ── 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 {
    /* Mobile compacto: era 80px (≈4-5 dedos de espaço em branco) — agora
       48px casa com a respiração entre Wallets & Custódia ↑ e API de Pix ↓. */
    padding: 48px 20px;
    gap: 32px;
  }

  .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;
  }

  /* Mobile: esconde 3 das 6 particles pra reduzir paint cost.
     :nth-child(n+4) ANTIGO estava bugado — particles são os ÚLTIMOS 6 filhos
     do .moedas-grid (vêm depois de glow + XGate-pill + 3 rows = posições 6-11),
     então :nth-child(n+4) matchava TODAS as 6 particles → escondia tudo.
     :nth-last-child(-n+3) seleciona apenas os 3 últimos filhos do grid (que
     são as 3 últimas particles), deixando as 3 primeiras visíveis. */
  .moedas-particle:nth-last-child(-n+3) {
    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 reduzido (128→80) pra alinhar com o ritmo das demais seções
     e diminuir o vão entre o final da Moedas section e o card API de Pix. */
  padding: 80px 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;
}

/* Quando at-edge, REMOVE o backdrop-filter dos layers. Mesmo a 0px o
   Safari iOS aloca uma camada de compositor pra cada layer com a
   propriedade declarada (4 layers × camada GPU = stuttering perceptível).
   Setando backdrop-filter:none a propriedade some, GPU libera buffer. */
.page-blur-bottom.at-edge .page-blur-bottom-layer {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.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 — removido (testando sem o hide) ── */
}

/* ── Responsive ──
   IMPORTANTE: cada breakpoint que altera `padding-left` do carrossel
   PRECISA também atualizar `scroll-padding-left` pra acompanhar — senão
   o snap alinha em coordenada diferente da visual e o card fica cortado
   na borda no swipe (bug clássico de iPhone 15/16 Pro Max). */
@media (max-width: 1200px) {
  .produtos-carousel {
    padding: 0 32px;
    scroll-padding-left: 32px;
  }

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

@media (max-width: 900px) {
  .produtos-section {
    /* Mobile: era 64px (≈3 dedos) — agora 40px casa com a Moedas section
       acima (48px), criando ritmo consistente entre seções no iPhone. */
    padding: 40px 0;
  }

  .produtos-carousel {
    padding: 0 24px;
    scroll-padding-left: 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;
    scroll-padding-left: 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 ══════════
   `visibility: hidden` removido — testando comportamento sem o hide. */
.ne-animate {
}

/* ══════════ 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 removido — mesmo padrão das outras seções (moedas,
     section-products). Forçava a seção a 932px+ no iPhone com flex-center
     espalhando vazio acima/abaixo do conteúdo. */
  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 — removido (testando sem o hide) ── */

/* ── 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 removido (era forçar viewport inteiro com vazio
     gritante em volta do CTA no mobile). Padding generoso na .cta-card
     interna mantém a respiração visual sem desperdiçar tela. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  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 ══════════
   `visibility: hidden` removido — testando comportamento sem o hide. */
.infra-animate {
}

/* ══════════ 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;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER LEGAL DISCLAIMER
   Bloco institucional/legal posicionado no fim do footer (depois das
   colunas de links). Como é direct child de .fold (.footer-section),
   herda max-width centralizado via .fold > *. Tipografia pequena e
   cor sutil para não competir com o conteúdo principal.
   ══════════════════════════════════════════════════════════════════════ */
.footer-disclaimer {
  width: 100%;
  /* Mesmo upper bound do .site-footer-inner (1324px) — assim ambos alinham
     identicamente quando centralizados pela regra .fold > *. */
  max-width: 1324px;
  margin-top: 48px;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.footer-disclaimer p {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-relaxed);
  /* Mesmo cinza dos links das colunas (.footer-col-list a). */
  color: #868b8b;
  letter-spacing: 0.005em;
  text-align: left;
}

.footer-disclaimer p strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* Desktop ≥1101px: posiciona o disclaimer ao LADO do brand card (à direita)
   e ABAIXO das colunas de links, ocupando o espaço vazio que sobra entre
   o fim das colunas e o fundo do brand card (que é mais alto).

     ┌─────────┐ ┌──────┬──────┬──────┬──────┐
     │  BRAND  │ │ Prod │ Recur│ Legal│Social│
     │  CARD   │ ├─────────────────────────────┤
     │         │ │       DISCLAIMER            │
     └─────────┘ └─────────────────────────────┘

   Posicionamento absoluto pra não interferir com a altura da .footer-section
   (o brand card de 446px define a altura da seção e o seu padding-bottom
   continua respeitado — sem clipping nem encostar no fim da página). */
@media (min-width: 1101px) {
  .footer-section {
    position: relative;
  }

  .footer-disclaimer {
    position: absolute;
    /* Alinha o fundo do disclaimer com o fundo do brand card
       (= padding-bottom da section). */
    bottom: var(--fold-padding);
    /* Centraliza horizontalmente igual ao .site-footer-inner (max 1324px). */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2 * var(--fold-padding));
    max-width: 1324px;
    /* Empurra conteúdo à direita por brand-width (372) + gap (62) = 434px,
       alinhando com a coluna esquerda do .footer-links. */
    padding-left: calc(372px + 62px);
    margin-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 1100px) {
  .footer-disclaimer {
    margin-top: 40px;
    padding-top: 28px;
    /* Linha separadora só em tablet/mobile, onde o disclaimer fica em
       full-width abaixo dos links e a borda funciona como divisor visual. */
    border-top: 1px solid var(--border-default);
  }
}

@media (max-width: 700px) {
  .footer-disclaimer {
    margin-top: 32px;
    padding-top: 24px;
    gap: 12px;
    /* Acompanha o padding interno do .site-footer-inner no mobile (24px). */
    padding-left: 24px;
    padding-right: 24px;
  }

  .footer-disclaimer p {
    line-height: 1.55;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   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;
}

/* =============================================================================
   PERFORMANCE OVERRIDES — Safari iOS / low-end devices
   =============================================================================
   Classes adicionadas ao <html> por shared/scripts/animations/mobile-optimizations.js:
   is-ios, is-safari, is-low-end, prefers-reduced-motion.

   Estratégia: tokens centralizados (--blur-*) reduzidos via override de scope,
   então TODA usage downstream herda automaticamente. Não patcheia cada selector
   individualmente — uma alteração de var afeta o site inteiro.
   ============================================================================= */

/* iOS Safari: blur tokens reduzidos pra ~50% do original.
   Mantém efeito visual reconhecível, mas backdrop-filter custa proporcionalmente
   menos GPU time. Combinação iOS+blur+composited layers é o pior caso. */
html.is-ios {
  --blur-xs: 2px;
  --blur-sm: 4px;
  --blur-md: 6px;
  --blur-lg: 10px;
  --blur-xl: 14px;
  --blur-2xl: 20px;
  --blur-3xl: 32px;
  --page-blur-max: 8px;
}

/* is-low-end: redução ainda mais agressiva */
html.is-low-end {
  --blur-xs: 0px;
  --blur-sm: 2px;
  --blur-md: 4px;
  --blur-lg: 6px;
  --blur-xl: 10px;
  --blur-2xl: 14px;
  --blur-3xl: 20px;
  --page-blur-max: 4px;
}

/* will-change cleanup ──
   Will-change cria compositor layer dedicada por elemento. No iOS Safari
   isso vira memory pressure rápido. Removemos para deixar o browser decidir
   on-demand. Mantemos will-change apenas em elementos com keyframe infinite. */
html.is-ios .cta-glow,
html.is-ios .cta-card,
html.is-ios .cta-card-bg,
html.is-ios .nova-era-card,
html.is-ios .infra-card,
html.is-ios .footer-brand,
html.is-low-end .cta-glow,
html.is-low-end .cta-card,
html.is-low-end .cta-card-bg,
html.is-low-end .cta-ring,
html.is-low-end .nova-era-card,
html.is-low-end .infra-card,
html.is-low-end .footer-brand {
  will-change: auto;
}

/* page-blur-bottom: 4-stack backdrop-filter é o mais agressivo.
   No iOS, simplifica pra 2 camadas (layer 1 e 4 só).
   Em low-end, mantém apenas a layer 4 (a mais discreta). */
html.is-ios .page-blur-bottom-layer.l2,
html.is-ios .page-blur-bottom-layer.l3,
html.is-low-end .page-blur-bottom-layer.l1,
html.is-low-end .page-blur-bottom-layer.l2,
html.is-low-end .page-blur-bottom-layer.l3 {
  display: none;
}

/* Filter blur transitions em .ha (hero reveal) ──
   Mobile já mitiga via JS (omite filter no tween). Aqui forçamos
   pra Safari desktop também — animar filter:blur cria layer thrash. */
html.is-safari .ha,
html.is-ios .ha {
  transition-property: opacity, transform !important;
}

/* Saturate em backdrop-filter ──
   saturate(1.8) junto com blur dobra o custo no iOS Safari (~30-50%).
   Override remove saturate, mantém apenas o blur. */
html.is-safari .footer-card,
html.is-safari .glass-card,
html.is-ios .footer-card,
html.is-ios .glass-card {
  -webkit-backdrop-filter: blur(var(--blur-2xl));
  backdrop-filter: blur(var(--blur-2xl));
}

/* Glass card hover-tracking: simplifica em low-end */
html.is-low-end .glass-card::after,
html.is-low-end .glass-card:hover::after {
  display: none;
}

/* Particles infinitos: pausa em low-end (N rAFs paralelos competindo). */
html.is-low-end .footer-particle,
html.is-low-end .cta-particle,
html.is-low-end .moedas-particle {
  animation: none !important;
  opacity: 0 !important;
}

/* prefers-reduced-motion: zero animação em particles */
@media (prefers-reduced-motion: reduce) {
  .footer-particle,
  .cta-particle,
  .moedas-particle {
    animation: none !important;
  }
}


/* =============================================================================
   PERF AUDIT — Senior pass (round 2): paint/composite cost reduction
   =============================================================================
   Tudo aqui só ativa em iOS/Safari/low-end (não regredi desktop high-end).

   1. content-visibility: auto em sections raramente visíveis pula renderização
      completa quando offscreen. Browser skipa layout/paint/style até que a
      seção entre na viewport. Saving: ~40-60ms por section em mobile.
      contain-intrinsic-size: aprox da altura pra evitar CLS.

   2. pulseGlow simplificado: animar 6 layers de box-shadow custa repaint
      contínuo do bounding box do elemento + halo (~6× a área do elemento).
      Substituído por fade de opacity em pseudo-element fixo (compositor-only).

   3. Layout containment em containers de partículas: contain: layout style paint
      isola repaint area daquele container, evita propagação ao parent.
   ============================================================================= */

/* content-visibility: auto em sections que raramente estão visíveis ──
   contain-intrinsic-size é o "placeholder" de altura quando content-visibility
   skipa render. Valor aproximado da altura real evita CLS quando entra na
   viewport. */
@supports (content-visibility: auto) {
  html.is-ios .footer-section,
  html.is-ios .infra-section,
  html.is-ios .faq-section,
  html.is-low-end .footer-section,
  html.is-low-end .infra-section,
  html.is-low-end .faq-section,
  html.is-low-end .nova-era-section,
  html.is-low-end .cta-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
  }
}

/* Layout containment em containers de partículas — isola repaints.
   Cada container tem N filhos animados (cta-particles=18, footer-particles=8).
   Com contain: layout paint, repaint fica restrito ao box.

   IMPORTANTE: .moedas-grid REMOVIDO desta regra. O .moedas-glow filho tem
   filter: blur(80px) que cria um halo de ~80px estendendo PRA FORA do box
   do grid (516px wide). contain:paint clipava esse halo, fazendo o glow
   parecer um retângulo pequeno em vez de difuso/orgânico.
   Trade-off: particles do moedas-grid (6) movem via transform compositor-only,
   então repaint propagation sem o contain é desprezível. */
.cta-particles,
.footer-particles {
  contain: layout paint;
}

/* pulseGlow simplificado em iOS/Safari — substitui box-shadow animation
   (paint thrash) por opacity fade num pseudo-element. */
html.is-ios .cascade-pill--highlight,
html.is-safari .cascade-pill--highlight {
  animation: none !important;
}
html.is-ios .cascade-pill--highlight::after,
html.is-safari .cascade-pill--highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Box-shadow estático — não anima; só opacity faz o pulse */
  box-shadow:
    0 47px 80px 0 rgba(47, 244, 211, 0.18),
    0 19.6px 33.4px 0 rgba(47, 244, 211, 0.12);
  opacity: 0.5;
  pointer-events: none;
  animation: xg-pulseGlow-opacity 2s ease-in-out infinite;
}
@keyframes xg-pulseGlow-opacity {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Animation pause em sections offscreen — já tem .is-offscreen via JS.
   Reforço aqui: animations que tocam paint properties ficam paused
   sem fail-open. */
.is-offscreen .cta-card-bg,
.is-offscreen .cta-particle,
.is-offscreen .footer-bg,
.is-offscreen .footer-particle,
.is-offscreen .moedas-glow,
.is-offscreen .moedas-particle {
  animation-play-state: paused !important;
}


/* =============================================================================
   PERF AUDIT — Round 3: heavy keyframes neutralized on iOS/Safari/low-end
   =============================================================================
   Animations que tocam background-position (paint contínuo) são desabilitadas
   em devices com pouco GPU budget. O gradient ESTÁTICO permanece visualmente
   bonito; só perde o shimmer/shift suave (cosmético).
   ============================================================================= */
html.is-ios .cta-card-bg,
html.is-ios .footer-bg,
html.is-safari .cta-card-bg,
html.is-safari .footer-bg,
html.is-low-end .cta-card-bg,
html.is-low-end .footer-bg {
  animation: none !important;
  /* Trava o gradient num ponto visualmente neutro (50% 50%) */
  background-position: 50% 50% !important;
}

/* holoShimmer aplica em .credit-card::after e custa paint do shimmer overlay.
   Substituiu por transform-only (cheap). */
html.is-ios .credit-card::after,
html.is-safari .credit-card::after,
html.is-low-end .credit-card::after {
  animation: none !important;
  opacity: 0 !important;
}

/* Reduz freq das ring-rotate e beam-rotate em iOS — cada uma anima
   custom property que recompõe o conic gradient (paint).
   Slow down 4s→8s, 6s→12s. Visualmente quase imperceptível, custo 50% menor. */
html.is-ios .cta-ring-1.xg-animated-ring-rev,
html.is-ios .cta-ring-2.xg-animated-ring,
html.is-low-end .cta-ring-1.xg-animated-ring-rev,
html.is-low-end .cta-ring-2.xg-animated-ring {
  animation-duration: 8s !important;
}


/* =============================================================================
   ROUND 5 (substitui round 4): Moedas reveal CSS-DRIVEN
   =============================================================================
   Problema iOS Safari: com reveal JS rAF-based, browser pode pular paint de
   transitions que ocorrem em elementos offscreen. Resultado: transition
   "completa em background", user vê estado final sem animação.

   Solução: reveal totalmente em CSS. JS apenas toggla classe `.is-revealing`
   na section quando IO dispara, e `.is-revealed` 1.8s depois.
   - Estado inicial: definido em CSS (não inline JS) — committed na hora do parse.
   - Transitions: declaradas em CSS — browser-deterministic.
   - Trigger: class toggle — atomic, sempre dispara paint.

   Compatível com iOS Safari, Safari desktop, Chrome, Firefox. Sem rAF.
   ============================================================================= */

/* Estado inicial — todos os elementos do reveal começam invisíveis com offset.
   Importante: quando section.is-revealing está ativa, transitions disparam
   pra opacity:1 + transform:none. */
.moedas-section .moedas-title {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms,
              transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  will-change: opacity, transform;
}
.moedas-section .moedas-glow {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  transition: opacity 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms,
              transform 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
  will-change: opacity, transform;
}
.moedas-section .XGate-pill {
  opacity: 0;
  transform: translateY(10px) scale(0.5);
  transition: opacity 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms,
              transform 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms;
  will-change: opacity, transform;
}
.moedas-section .moeda-pill {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.215, 0.61, 0.355, 1) var(--xg-reveal-delay, 400ms),
              transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1) var(--xg-reveal-delay, 400ms);
  will-change: opacity, transform;
}
.moedas-section .moedas-row-1 .moeda-pill { transform: translate3d(-30px, 30px, 0); }
.moedas-section .moedas-row-2 .moeda-pill { transform: translate3d(30px, 30px, 0); }
.moedas-section .moedas-row-3 .moeda-pill { transform: translate3d(-30px, 30px, 0); }

/* Stagger delays via CSS variable — cada pill tem seu próprio delay. */
.moedas-section .moedas-row-1 .moeda-pill:nth-child(1) { --xg-reveal-delay: 400ms; }
.moedas-section .moedas-row-1 .moeda-pill:nth-child(2) { --xg-reveal-delay: 480ms; }
.moedas-section .moedas-row-1 .moeda-pill:nth-child(3) { --xg-reveal-delay: 560ms; }
.moedas-section .moedas-row-2 .moeda-pill:nth-child(1) { --xg-reveal-delay: 520ms; }
.moedas-section .moedas-row-2 .moeda-pill:nth-child(2) { --xg-reveal-delay: 600ms; }
.moedas-section .moedas-row-2 .moeda-pill:nth-child(3) { --xg-reveal-delay: 680ms; }
.moedas-section .moedas-row-3 .moeda-pill:nth-child(1) { --xg-reveal-delay: 640ms; }
.moedas-section .moedas-row-3 .moeda-pill:nth-child(2) { --xg-reveal-delay: 720ms; }
.moedas-section .moedas-row-3 .moeda-pill:nth-child(3) { --xg-reveal-delay: 800ms; }

.moedas-section .moedas-particle {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.215, 0.61, 0.355, 1) var(--xg-particle-delay, 800ms);
}
/* Particles são os ÚLTIMOS filhos do .moedas-grid (vêm após glow, XGate-pill,
   e 3 rows). Usar :nth-last-child garante que o stagger funcione independente
   da posição absoluta dos particles na grid. */
.moedas-section .moedas-particle:nth-last-child(1) { --xg-particle-delay: 1200ms; }
.moedas-section .moedas-particle:nth-last-child(2) { --xg-particle-delay: 1120ms; }
.moedas-section .moedas-particle:nth-last-child(3) { --xg-particle-delay: 1040ms; }
.moedas-section .moedas-particle:nth-last-child(4) { --xg-particle-delay: 960ms; }
.moedas-section .moedas-particle:nth-last-child(5) { --xg-particle-delay: 880ms; }
.moedas-section .moedas-particle:nth-last-child(6) { --xg-particle-delay: 800ms; }

/* Trigger state — section ganha .is-revealing quando IO dispara.
   Browser nativamente transitionam para esses values. */
.moedas-section.is-revealing .moedas-title {
  opacity: 1;
  transform: translateY(0);
}
.moedas-section.is-revealing .moedas-glow {
  opacity: 0.6;
  transform: translate(-50%, -50%) scale(1);
}
.moedas-section.is-revealing .XGate-pill {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.moedas-section.is-revealing .moeda-pill {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.moedas-section.is-revealing .moedas-particle {
  opacity: 0.4;
}

/* Decorative animations gated pela `.is-revealed` — só rodam após entrance
   completar (1.8s). Antes disso, elas estariam competindo com as transitions
   de entrance via cascade (CSS animations > inline). */
.moedas-section:not(.is-revealed) .moeda-pill,
.moedas-section:not(.is-revealed) .moedas-row-1,
.moedas-section:not(.is-revealed) .moedas-row-2,
.moedas-section:not(.is-revealed) .moedas-row-3,
.moedas-section:not(.is-revealed) .moedas-glow {
  animation: none !important;
}

/* Hover transition de .moeda-pill (350ms) restaurada após reveal.
   Durante reveal, o transition de entrance (600ms+delay) está ativo.
   Após .is-revealed, restauramos o transition rápido pra hover não ficar
   lento (350ms é o valor original do design). */
.moedas-section.is-revealed .moeda-pill {
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
  --xg-reveal-delay: 0ms;
}

/* Reduced motion — skip animation, snap into place. */
@media (prefers-reduced-motion: reduce) {
  .moedas-section .moedas-title,
  .moedas-section .moedas-glow,
  .moedas-section .XGate-pill,
  .moedas-section .moeda-pill,
  .moedas-section .moedas-particle {
    transition: none !important;
    opacity: 1;
    transform: none;
  }
  .moedas-section .moedas-glow { opacity: 0.6; transform: translate(-50%, -50%); }
  .moedas-section .moedas-particle { opacity: 0.4; }
}


/* =============================================================================
   ROUND 6: Produtos section reveal CSS-DRIVEN
   =============================================================================
   Mesma abordagem do Round 5 (moedas): JS rAF + filter:blur sofria do iOS
   Safari paint deferral em offscreen. CSS-driven com .is-revealing toggle
   garante paint atômico em todos os browsers.
   ============================================================================= */

/* Estado inicial — nav + cards começam invisíveis com offset.
   Filter blur OMITIDO em mobile/iOS/Safari (paint thrash conhecido). */
.produtos-section .produtos-nav {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.19, 1, 0.22, 1) 0ms,
              transform 700ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.produtos-section .produto-card {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 800ms cubic-bezier(0.19, 1, 0.22, 1) var(--xg-prod-delay, 200ms),
              transform 800ms cubic-bezier(0.19, 1, 0.22, 1) var(--xg-prod-delay, 200ms);
  will-change: opacity, transform;
}

/* Stagger por card */
.produtos-section .produto-card:nth-child(1) { --xg-prod-delay: 200ms; }
.produtos-section .produto-card:nth-child(2) { --xg-prod-delay: 350ms; }
.produtos-section .produto-card:nth-child(3) { --xg-prod-delay: 500ms; }
.produtos-section .produto-card:nth-child(4) { --xg-prod-delay: 650ms; }
.produtos-section .produto-card:nth-child(5) { --xg-prod-delay: 800ms; }

/* Trigger state */
.produtos-section.is-revealing .produtos-nav {
  opacity: 1;
  transform: translateY(0);
}
.produtos-section.is-revealing .produto-card {
  opacity: 1;
  transform: translateY(0);
}

/* Após reveal completar (.is-revealed): restaurar transition original do hover
   (400ms transform/box-shadow/border-color do design base). Sem isso, hover ficaria
   usando a transition do reveal (800ms + delay 200-800ms) — lento e estranho.
   Também limpa will-change pra liberar GPU layer permanente (iOS budget). */
.produtos-section.is-revealed .produto-card {
  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: auto;
  --xg-prod-delay: 0ms;
}
.produtos-section.is-revealed .produtos-nav {
  will-change: auto;
}

/* Desktop only: filter blur sutil para extra premium feel.
   Mobile: pulado por causa de paint cost no iOS Safari. */
@media (min-width: 48rem) {
  html:not(.is-ios):not(.is-safari) .produtos-section .produto-card {
    filter: blur(6px);
    transition: opacity 800ms cubic-bezier(0.19, 1, 0.22, 1) var(--xg-prod-delay, 200ms),
                transform 800ms cubic-bezier(0.19, 1, 0.22, 1) var(--xg-prod-delay, 200ms),
                filter 800ms cubic-bezier(0.19, 1, 0.22, 1) var(--xg-prod-delay, 200ms);
  }
  html:not(.is-ios):not(.is-safari) .produtos-section.is-revealing .produto-card {
    filter: blur(0);
  }
  /* Após .is-revealed em desktop: filter:none (limpa) + transition restaurada */
  html:not(.is-ios):not(.is-safari) .produtos-section.is-revealed .produto-card {
    filter: none;
    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);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .produtos-section .produtos-nav,
  .produtos-section .produto-card {
    transition: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* =============================================================================
   ROUND 7 (corrigido): Mobile timing override para Moedas pills
   =============================================================================
   Versão anterior bugou por causa de cascade conflict: as regras transform
   pra mobile (translate3d -15px) tinham mesma specificity que a regra
   `.moedas-section.is-revealing .moeda-pill { transform: translate3d(0, 0, 0); }`
   E vinham depois no source order → venceram. Pills ficavam travadas no
   offset, nunca chegavam a (0,0,0).

   Fix: scopar transforms com `:not(.is-revealing)` — só aplicam ANTES do
   reveal. Quando .is-revealing adiciona, essa regra deixa de matchar e a
   regra do .is-revealing toma conta (translate3d(0,0,0)).

   Outras propriedades (transition, --xg-reveal-delay) NÃO precisam de
   scoping — o estado .is-revealing não as toca, então não há conflito.

   Resultado: window total de stagger 1400ms → 700ms em mobile. iOS Safari
   tem menos transitions simultâneas competindo pelo compositor.
   ============================================================================= */
@media (max-width: 47.99rem) {
  /* Duration reduzido — transition prop não conflita com .is-revealing */
  .moedas-section .moeda-pill {
    transition: opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1) var(--xg-reveal-delay, 200ms),
                transform 450ms cubic-bezier(0.215, 0.61, 0.355, 1) var(--xg-reveal-delay, 200ms);
  }

  /* Initial offset menor (15px vs 30px) — APENAS antes do reveal.
     :not(.is-revealing) garante que essa regra deixa de matchar quando
     a class é adicionada, liberando a regra do .is-revealing pra
     transitar até translate3d(0,0,0). */
  .moedas-section:not(.is-revealing) .moedas-row-1 .moeda-pill {
    transform: translate3d(-15px, 15px, 0);
  }
  .moedas-section:not(.is-revealing) .moedas-row-2 .moeda-pill {
    transform: translate3d(15px, 15px, 0);
  }
  .moedas-section:not(.is-revealing) .moedas-row-3 .moeda-pill {
    transform: translate3d(-15px, 15px, 0);
  }

  /* Stagger comprimido — CSS variable, zero conflito */
  .moedas-section .moedas-row-1 .moeda-pill:nth-child(1) { --xg-reveal-delay: 200ms; }
  .moedas-section .moedas-row-1 .moeda-pill:nth-child(2) { --xg-reveal-delay: 250ms; }
  .moedas-section .moedas-row-1 .moeda-pill:nth-child(3) { --xg-reveal-delay: 300ms; }
  .moedas-section .moedas-row-2 .moeda-pill:nth-child(1) { --xg-reveal-delay: 280ms; }
  .moedas-section .moedas-row-2 .moeda-pill:nth-child(2) { --xg-reveal-delay: 330ms; }
  .moedas-section .moedas-row-2 .moeda-pill:nth-child(3) { --xg-reveal-delay: 380ms; }
  .moedas-section .moedas-row-3 .moeda-pill:nth-child(1) { --xg-reveal-delay: 360ms; }
  .moedas-section .moedas-row-3 .moeda-pill:nth-child(2) { --xg-reveal-delay: 410ms; }
  .moedas-section .moedas-row-3 .moeda-pill:nth-child(3) { --xg-reveal-delay: 460ms; }

  /* Particles — transition prop, sem conflito */
  .moedas-section .moedas-particle {
    transition: opacity 600ms cubic-bezier(0.215, 0.61, 0.355, 1) var(--xg-particle-delay, 500ms);
  }
  .moedas-section .moedas-particle:nth-last-child(6) { --xg-particle-delay: 500ms; }
  .moedas-section .moedas-particle:nth-last-child(5) { --xg-particle-delay: 540ms; }
  .moedas-section .moedas-particle:nth-last-child(4) { --xg-particle-delay: 580ms; }
  .moedas-section .moedas-particle:nth-last-child(3) { --xg-particle-delay: 620ms; }
  .moedas-section .moedas-particle:nth-last-child(2) { --xg-particle-delay: 660ms; }
  .moedas-section .moedas-particle:nth-last-child(1) { --xg-particle-delay: 700ms; }

  /* Hover transition restaurada após is-revealed (mantém 350ms do design original) */
  .moedas-section.is-revealed .moeda-pill {
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Title mais rápido em mobile */
  .moedas-section .moedas-title {
    transition: opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms,
                transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  }

  /* XGate-pill mais rápido */
  .moedas-section .XGate-pill {
    transition: opacity 450ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 150ms,
                transform 450ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 150ms;
  }

  /* Glow duration menor */
  .moedas-section .moedas-glow {
    transition: opacity 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms,
                transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms;
  }
}


/* Cleanup will-change após reveal — libera GPU layers que não precisam
   mais ficar promovidas. iOS Safari tem orçamento limitado de layers
   compositadas; deixar 7 pills + glow + XGate-pill + title todos com
   will-change permanente consome memória GPU sem benefício após entrada. */
.moedas-section.is-revealed .moedas-title,
.moedas-section.is-revealed .moedas-glow,
.moedas-section.is-revealed .XGate-pill,
.moedas-section.is-revealed .moeda-pill {
  will-change: auto;
}


/* =============================================================================
   ROUND 9: iOS Safari "impossível falhar" — layer promotion permanente
   =============================================================================
   Causa raiz residual do bug "às vezes entra sem animação" em iPhone Safari:
   quando section está offscreen, iOS pode não criar a render layer dela. Quando
   IO dispara e .is-revealing é adicionada, a layer ainda não existe → browser
   coalesça criação da layer + state final num único paint → user vê snap.

   Defesa: forçar layer compositada PERMANENTE em iOS via translateZ(0). Isso
   garante que paint pipeline está sempre ativo pra essas sections, mesmo
   offscreen. Trade-off: ~1-2MB de GPU memory permanente por section. iPhone
   16 Pro Max tem GPU sobrando — vale a pena.

   Não aplica em desktop nem Chrome/Firefox mobile porque eles não sofrem
   desse paint deferral pattern. Só iOS Safari.
   ============================================================================= */
html.is-ios .moedas-section,
html.is-ios .produtos-section,
html.is-safari .moedas-section,
html.is-safari .produtos-section {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}