/* =============================================================================
   tab-cartao.css — Overrides específicos da página Cartões Corporativos
   Carregado APÓS tab-conversao.css; herda toda a diagramação (hero,
   description, howitworks 1/2/3, intergration, audience) e adiciona
   estilos para a nova seção Benefícios + adaptações do hero (Cartão virtual
   em destaque + saldo USD).
   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 (api-pix, carteiras).
   ───────────────────────────────────────────────────────────────────────────── */
.cd-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);
}

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

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

.cd-pill--unlimited .cd-pill-icon {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.cd-pill--multifund .cd-pill-icon {
  background: var(--surface-2, #eef0f2);
  color: var(--text-primary);
}

.cd-pill--realtime .cd-pill-icon {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.cd-pill--multicoin .cd-pill-icon {
  background: var(--surface-2, #eef0f2);
  color: var(--text-primary);
}

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

  .cd-pill-icon svg {
    width: 20px;
    height: 20px;
  }
}

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

  .cd-pill-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — Slot superior transformado em CARTÃO VISUAL
   A .exchange-section--top.cd-card-slot abriga uma representação visual de um
   cartão de crédito virtual estilo dashboard XGate (chip + número + nome +
   validade), com gradient verde XGate.
   ───────────────────────────────────────────────────────────────────────────── */
.cv-exchange-wrap .exchange-section--top.cd-card-slot {
  /* O slot hospeda o cartão preto oficial XGate (mesmo SVG usado no carrossel
     de produtos do index.html). Padding pequeno e fundo transparente — o SVG
     já tem o visual completo. */
  padding: 12px;
  background: transparent;
  border: none;
}

.cd-card-visual {
  position: relative;
  width: 100%;
  /* Aspect ratio padrão de cartão de crédito: 1.586:1 (CR80) */
  aspect-ratio: 1.586 / 1;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: block;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.20),
    0 4px 12px rgba(0, 0, 0, 0.10);
  /* Reproduz o efeito holoShimmer do .credit-card do index.html — luz
     diagonal percorrendo o cartão a cada 6s */
  isolation: isolate;
}

.cd-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-2xl);
}

/* Brilho holográfico que percorre o cartão (mesmo efeito do .credit-card no index) */
.cd-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      transparent 30%,
      rgba(255, 255, 255, 0.08) 45%,
      transparent 60%);
  background-size: 200% 100%;
  animation: cd-card-holo-shimmer 6s ease-in-out infinite;
  pointer-events: none;
  border-radius: var(--radius-2xl);
}

@keyframes cd-card-holo-shimmer {
  0% {
    background-position: -200% center;
  }

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

@media (prefers-reduced-motion: reduce) {
  .cd-card-visual::after {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — Status row (cartão ativo + última transação)
   ───────────────────────────────────────────────────────────────────────────── */
.cv-exchange-wrap .exchange-swap-wrap.cd-status-row {
  position: relative;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  margin: 4px 0;
}

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

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

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

@keyframes cd-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.45;
  }

  80%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.cd-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: 70%;
  transition: opacity 200ms ease;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — Badge "USD" (variante verde) na seção inferior
   ───────────────────────────────────────────────────────────────────────────── */
.exchange-badge.cd-badge--usd {
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-color: var(--on-primary-container);
}

.cd-badge-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--on-primary-container);
  color: white;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--font-weight-bold, 700);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BENEFITS SECTION — grid de 5 cards em layout 3+2
   3 cards na primeira row, 2 cards centralizados na segunda row.
   Os 2 primeiros cards (highlight) trazem as métricas de ROI da copy
   (12% economia em mídia / 1% spread).
   ───────────────────────────────────────────────────────────────────────────── */
.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);
}

/* Grid 3+2 — variant cd--5 (5 cards): 3 na primeira row, 2 centralizados na segunda */
.benefits-grid.cd-benefits-grid--5 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(var(--spacing) * 5);
}

/* Cada card do row 1 (3 cards) ocupa 2 colunas das 6: 6/3 = 2 cols cada */
.benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(1),
.benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(2),
.benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(3) {
  grid-column: span 2;
}

/* Os 2 cards do row 2 ocupam 3 cols cada (6/2 = 3), começando na col 1 e col 4
   — mas para CENTRALIZAR no grid de 6 cols, ocupam 2 cols cada centralizados */
.benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(4) {
  grid-column: 2 / span 2;
  /* col 2-3 */
}

.benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(5) {
  grid-column: 4 / span 2;
  /* col 4-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%;
  transition: border-color 0.35s var(--xg-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.35s var(--xg-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow 0.35s var(--xg-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    background 0.35s var(--xg-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Hover: lift sutil + borda primary + sombra suave para sinalizar interação. */
.benefit-card:hover {
  border-color: var(--on-primary-container);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
}

/* Mobile/touch: sem hover effects para não travar em estado "press" */
@media (hover: none),
(pointer: coarse) {
  .benefit-card:hover {
    border-color: var(--border-default);
    transform: none;
    box-shadow: none;
  }
}

/* Highlight: cards com métricas de ROI ganham um sutil destaque
   no ÍCONE, sem mexer na borda do card (que é gerenciada pelo hover). */
.benefit-card.benefit-card--highlight .benefit-card-icon {
  /* Mantém background var(--primary-container) e color var(--on-primary-container)
     já definidos em .benefit-card-icon. Para destacar mais, adicionamos um halo. */
  box-shadow: 0 0 0 4px var(--primary-container);
}

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

.benefit-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}

.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 strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

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

/* Responsivo: tablet vira 2x2x1 (mas centralizado)
   mobile vira stack vertical */
@media (max-width: 64rem) {
  .benefits-grid.cd-benefits-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(1),
  .benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(2),
  .benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(3),
  .benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(4),
  .benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(5) {
    grid-column: auto;
  }

  /* O 5º card fica solo numa linha — span de ambas colunas, FULL WIDTH.
     Antes tinha max-width: 50% que deixava o card visualmente menor que
     os 4 anteriores em viewports 640-1024px (ex.: 639px o card ficava
     centralizado a 50% enquanto os 4 acima usavam 100% das colunas).
     Removido — agora ocupa a linha inteira como os pares acima. */
  .benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(5) {
    grid-column: 1 / -1;
  }
}

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

  .benefits-grid.cd-benefits-grid--5>.benefit-card:nth-child(5) {
    max-width: 100%;
  }

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

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — Responsivo do cartão visual
   Em mobile o aspect ratio fica 1.586:1 mas o tamanho de fonte/padding reduz.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 40rem) {
  .cd-card-number {
    font-size: 13px;
  }

  .cd-card-name,
  .cd-card-validity {
    font-size: 12px;
  }

  .cd-card-label {
    font-size: 8px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ── Compactação do card visual em viewports verticais curtos ──
   Mantemos SEMPRE o aspect-ratio padrão de cartão de crédito (1.586:1, CR80).
   Em viewports verticais curtos (1080p, ~900px), reduzimos o tamanho do
   próprio container do exchange para que o cartão caiba sem ser achatado.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-height: 68.75rem) {
  .cv-exchange-wrap .exchange-container {
    /* ~92% do tamanho original (415px → ~382px) — cartão fica menor mas
       preserva a proporção 1.586:1 oficial (sem achatamento). */
    width: 382px;
  }
}

@media (max-height: 56.25rem) {
  .cv-exchange-wrap .exchange-container {
    /* ~84% do tamanho original — ainda menor, sem achatar o cartão. */
    width: 348px;
  }

  .cv-exchange-wrap .exchange-section {
    padding: 12px 14px;
  }
}

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