/* =============================================================================
   tab-conta-global.css — Overrides específicos da página Conta Virtual em USD
   Carregado APÓS tab-conversao.css; herda toda a diagramação (hero,
   description, howitworks 1/2/3, features, audience) e adiciona estilos para:
     - Hero adaptado: dados bancários (Routing/Account/SWIFT) em destaque
     - Nova seção Benefícios (4 cards com ícone + título + desc + bullets)
     - Features adaptada: 2 sub-rows ("Estrutura atual" + "Em expansão" com
       tag "Em breve" nas pills)
   Cores: EXCLUSIVAMENTE tokens semânticos de colors.css.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — pills flutuantes com ícone SVG (capacidades do produto)
   Mesmo padrão das outras páginas internas.
   ───────────────────────────────────────────────────────────────────────────── */
.cg-pill-icon {
  width: 48px;
  height: 48px;
  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: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cg-pill-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

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

.cg-pill--receive .cg-pill-icon  { background: var(--primary-container); color: var(--on-primary-container); }
.cg-pill--stable .cg-pill-icon   { background: var(--surface-2, #eef0f2); color: var(--text-primary); }
.cg-pill--realtime .cg-pill-icon { background: var(--primary-container); color: var(--on-primary-container); }
.cg-pill--multi .cg-pill-icon    { background: var(--surface-2, #eef0f2); color: var(--text-primary); }

@media (max-width: 64rem) {
  .cg-pill-icon { width: 36px; height: 36px; }
  .cg-pill-icon svg { width: 20px; height: 20px; }
}

@media (max-width: 36rem) {
  .cg-pill-icon { width: 32px; height: 32px; }
  .cg-pill-icon svg { width: 18px; height: 18px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — Header da conta (top section)
   Top: label "Sua conta global" + badge verde "Verificada" + nome do banco
   ───────────────────────────────────────────────────────────────────────────── */
.cv-exchange-wrap .exchange-section--top.cg-account-header {
  /* Mantém estrutura do exchange-section--top (background branco, padding
     etc.) — só sobrescreve o contéudo interno */
}

.cg-bank-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — Status row
   ───────────────────────────────────────────────────────────────────────────── */
.cv-exchange-wrap .exchange-swap-wrap.cg-status-row {
  position: relative;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  margin: 4px 0;
}

.cg-status-row .exchange-swap {
  display: none;
}

.cg-status-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--on-primary-container);
  position: relative;
  flex-shrink: 0;
}

.cg-status-pulse::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--on-primary-container);
  opacity: 0.35;
  animation: cg-pulse 1.6s ease-out infinite;
}

@keyframes cg-pulse {
  0% { transform: scale(0.6); opacity: 0.45; }
  80%, 100% { transform: scale(2.2); opacity: 0; }
}

.cg-status-text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--on-primary-container);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
  transition: opacity 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .cg-status-pulse::before { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — Saldo em stablecoins (USDT / USDC)
   Pílulas compactas reaproveitando .phone-balance-card, .phone-balance-label
   e .phone-balance-value (estilizados em tab-home.css). Aqui apenas dispomos
   os 2 cards lado a lado com flex e ajustamos paddings/borders pra caber
   sem inflar a altura do exchange-container.
   ───────────────────────────────────────────────────────────────────────────── */
.cv-exchange-wrap .cg-balances {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 0 4px;
  margin: 4px 0 6px;
}

.cv-exchange-wrap .cg-balance-pill {
  /* Override do .phone-balance-card original (que usa width: 100%) — aqui
     dividimos o espaço igualmente entre os 2 saldos. */
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cv-exchange-wrap .cg-balance-pill .phone-balance-card-header {
  gap: 6px;
}

.cv-exchange-wrap .cg-balance-pill .phone-balance-card-header img {
  width: 16px;
  height: 16px;
}

.cv-exchange-wrap .cg-balance-pill .phone-balance-label {
  font-size: var(--text-xs);
}

.cv-exchange-wrap .cg-balance-pill .phone-balance-value {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
}

/* Em viewports estreitos, garante que os pills não fiquem apertados demais
   (mantém side-by-side mas com texto menor). */
@media (max-width: 480px) {
  .cv-exchange-wrap .cg-balance-pill {
    padding: 8px 10px;
  }

  .cv-exchange-wrap .cg-balance-pill .phone-balance-value {
    font-size: var(--text-sm);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — Lista de detalhes bancários (account info)
   3 linhas mostrando Routing number, Account number e SWIFT/BIC, cada
   uma com label + valor mono + botão de copiar.
   ───────────────────────────────────────────────────────────────────────────── */
.cv-exchange-wrap .exchange-section--bottom.cg-account-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

.cg-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: white;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background 300ms ease, border-color 300ms ease;
}

.cg-detail-row--highlight {
  background: var(--primary-container);
  border-color: var(--on-primary-container);
}

.cg-detail-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.cg-detail-row--highlight .cg-detail-label {
  color: var(--on-primary-container);
}

.cg-detail-value {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Cascadia Mono", monospace;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: right;
}

.cg-detail-row--highlight .cg-detail-value {
  color: var(--on-primary-container);
}

.cg-detail-copy {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--surface-2, #eef0f2);
  border: none;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease;
}

.cg-detail-copy:hover {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.cg-detail-copy svg {
  width: 14px;
  height: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — Badge "Verificada" (variante verde) na seção superior
   ───────────────────────────────────────────────────────────────────────────── */
.exchange-badge.cg-badge--ok {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: var(--on-primary-container);
}

.cg-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--on-primary-container);
  flex-shrink: 0;
  position: relative;
}

.cg-badge-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--on-primary-container);
  opacity: 0.4;
  animation: cg-pulse 1.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cg-badge-dot::after { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FEATURES — Adaptação para "Infraestrutura global em evolução"
   Segunda sub-row mostra moedas em expansão com tag "Em breve" e estilo
   mais sutil (opacity reduzida + dashed border).
   ───────────────────────────────────────────────────────────────────────────── */
.cg-feature-pill {
  position: relative;
}

/* Ícone genérico (quando não há .moeda-icon img) — círculo verde como nas pills do hero */
.cg-feature-pill-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cg-feature-pill-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Variante "soon" — mais sutil, tag "Em breve" no canto */
.cg-feature-pill--soon {
  opacity: 0.65;
  border-style: dashed;
}

.cg-feature-pill--soon .cg-feature-pill-icon {
  background: var(--surface-2, #eef0f2);
  color: var(--text-secondary);
}

.cg-soon-tag {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--surface-2, #eef0f2);
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Sub-row "Em expansão" tem espaçamento extra do "Estrutura atual" acima */
.cg-features-expansion {
  margin-top: calc(var(--spacing) * 6);
}

@media (max-width: 36rem) {
  .cg-feature-pill-icon { width: 36px; height: 36px; }
  .cg-feature-pill-icon svg { width: 20px; height: 20px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BENEFITS SECTION (NOVA) — grid de 4 cards
   Layout idêntico ao da página Carteiras, mas cada card aqui tem TAMBÉM uma
   descrição curta entre o título e os bullets (porque a copy de Conta Global
   tem desc separada para cada benefício).
   ───────────────────────────────────────────────────────────────────────────── */
.benefits-section {
  display: flex;
  justify-content: center;
}

.benefits-inner {
  width: 100%;
  max-width: 1324px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 12);
  margin-inline: auto;
}

.benefits-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--spacing) * 2);
  max-width: 720px;
  margin-inline: auto;
}

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

.benefits-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--spacing) * 5);
}

.benefit-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 6);
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  min-height: 100%;
}

.benefit-card-icon {
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 12);
  border-radius: var(--radius-md, 12px);
  background: var(--primary-container);
  color: var(--on-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-card-icon svg {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.benefit-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

/* Description curta abaixo do título — ESPECÍFICO desta página */
.benefit-card-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.benefit-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  /* Empurra a lista para a base do card quando há múltiplos cards de
     alturas diferentes — alinha visualmente */
  margin-top: auto;
}

.benefit-card-list li {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.benefit-card-list li svg {
  flex-shrink: 0;
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  color: var(--on-primary-container);
  margin-top: 3px;
}

.benefits-section .xg-reveal.active {
  animation: xg-fade-up 0.9s var(--xg-ease-out-expo) forwards;
}

@media (max-width: 64rem) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: calc(var(--spacing) * 4);
  }

  .benefits-section {
    padding-block: calc(var(--spacing) * 16);
  }

  .benefit-card {
    padding: calc(var(--spacing) * 5);
  }

  .benefits-title {
    font-size: var(--text-2xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefits-section .xg-reveal {
    opacity: 1;
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIM — overrides + nova seção Benefícios. Toda a diagramação restante
   (animações .ha/.xg-reveal, gradient-warp, marquee do audience) vem direto
   de tab-conversao.css + design system.
   ───────────────────────────────────────────────────────────────────────────── */