@charset "UTF-8";
/* ============================================================
   CartIQ — Design System
   ------------------------------------------------------------
   Organizado em camadas. Para redesenhar o produto, mexa da
   camada 1 para baixo — quanto mais alta a camada, maior o
   alcance da mudança.

   1. PRIMITIVOS   valores brutos (paleta, escalas)
   2. SEMÂNTICOS   o papel de cada valor (--bg, --brand)
   3. BASE         reset e tipografia
   4. COMPONENTES  peças reutilizáveis
   5. UTILITÁRIOS  ajustes pontuais

   Trocar a identidade visual inteira = editar a camada 1.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   CAMADA 1 — PRIMITIVOS
   Valores brutos. Nenhum componente usa estes diretamente.
   ══════════════════════════════════════════════════════════ */
:root {
  /* Paleta — turquesa é a cor da marca */
  --turquesa-300: #5FE8D6;
  --turquesa-400: #2EDCC6;
  --turquesa-500: #14C9B4;
  --turquesa-600: #0FA294;
  --turquesa-900: #04241f;

  /* Paleta de apoio — usada em dados e estados */
  --lima-400:  #C6EF8F;
  --lima-500:  #9BE55E;
  --ciano-400: #57C8E8;
  --ciano-500: #0FA3CE;
  --ouro-400:  #FFD84D;
  --ouro-500:  #F5C400;
  --coral-400: #FF8A6E;
  --coral-500: #F1512E;

  /* Neutros — do fundo mais profundo ao texto mais claro */
  --tinta-900: #0d1017;
  --tinta-850: #111418;
  --tinta-800: #181c22;
  --tinta-700: #1e232b;
  --tinta-600: #242933;
  --tinta-500: #2e3540;
  --tinta-400: #3d4550;
  --neve-500:  #5a6474;
  --neve-300:  #9aa3b0;
  --neve-100:  #f0f2f6;

  /* Cores dos bancos — fixas, pertencem a eles */
  --banco-itau:      #ff8c00;
  --banco-bradesco:  #e63950;
  --banco-santander: #ec0000;
  --banco-nubank:    #9b59d0;
  --banco-porto:     #4a9eff;

  /* Espaçamento — escala de 4px */
  --esp-1:  4px;
  --esp-2:  8px;
  --esp-3:  12px;
  --esp-4:  16px;
  --esp-5:  20px;
  --esp-6:  24px;
  --esp-8:  32px;
  --esp-10: 40px;
  --esp-12: 48px;
  --esp-16: 64px;

  /* Raios */
  --raio-sm: 6px;
  --raio-md: 8px;
  --raio-lg: 14px;
  --raio-pill: 999px;

  /* Tipografia */
  --fonte-display: 'Bebas Neue', Impact, sans-serif;
  --fonte-corpo:   'Manrope', system-ui, -apple-system, sans-serif;
  --fonte-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Escala tipográfica */
  --txt-xs:  .68rem;
  --txt-sm:  .78rem;
  --txt-md:  .88rem;
  --txt-base: .96rem;
  --txt-lg:  1.08rem;
  --txt-xl:  1.35rem;
  --txt-2xl: 1.75rem;
  --txt-3xl: 2.2rem;

  /* Transições */
  --transicao-rapida: .18s ease;
  --transicao-media:  .3s ease;

  /* Sombras */
  --sombra-suave: 0 4px 16px rgba(0,0,0,.35);
  --sombra-forte: 0 8px 32px rgba(0,0,0,.55);
}


/* ══════════════════════════════════════════════════════════
   CAMADA 1b — DESIGN SYSTEM v2
   Tokens trazidos do CartIQ Design System v2.
   Acrescentam, nunca substituem: todos os nomes da camada 1
   continuam valendo, porque ~373 regras deste projeto ainda
   dependem deles. Onde houve conflito de nome, o valor novo
   venceu apenas nas cores de categoria, por decisão de cor.
   ══════════════════════════════════════════════════════════ */
:root {
  /* Marca — variações de brilho e lavagem */
  --brand-glow:  rgba(20,201,180,.45);
  --brand-wash:  rgba(20,201,180,.10);
  --brand-borda: rgba(20,201,180,.30);

  /* Superfície mais profunda que o --bg, para páginas de fundo */
  --page: #07090d;

  /* Fios de contorno translúcidos (profundidade sem borda dura) */
  --hairline:      rgba(255,255,255,.10);
  --hairline-soft: rgba(255,255,255,.05);

  /* Fundos suaves dos estados */
  --positivo-bg: rgba(155,229,94,.12);
  --info-bg:     rgba(15,163,206,.12);
  --atencao-bg:  rgba(245,196,0,.12);
  --erro-bg:     rgba(241,81,46,.12);

  /* Bancos adicionais */
  --banco-bb:          #ffea00;
  --banco-inter:       #ff7a00;
  --banco-openfinance: #14C9B4;

  /* Elevação e brilho */
  --sombra-card:       0 1px 2px rgba(0,0,0,.4);
  --sombra-painel:     0 25px 80px rgba(0,0,0,.9);
  --sombra-modal:      0 25px 60px rgba(0,0,0,.9);
  --sombra-nav:        0 10px 35px rgba(0,0,0,.7);
  --glow-marca:        0 0 20px rgba(20,201,180,.30);
  --glow-marca-forte:  0 0 35px -5px rgba(20,201,180,.60);
  --glow-positivo:     0 0 8px rgba(155,229,94,.5);
  --blur-vidro:        blur(16px);
  --grade-ambiente:      radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  --grade-ambiente-size: 36px 36px;

  /* Movimento — uma curva só para interação, conforme o sistema */
  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-reveal: cubic-bezier(.25,.46,.45,.94);
  --d1: 160ms;
  --d2: 280ms;
  --d3: 520ms;
  --stagger: 60ms;
  --loop-dashboard: 6s;

  /* Raios */
  --r-xs: 4px;  --r-md: 8px;  --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-3xl: 24px; --r-pill: 9999px;
  --r-campo:  var(--r-lg);
  --r-card:   var(--r-xl);
  --r-painel: var(--r-3xl);
  --r-botao:  var(--r-pill);
  --r-chip:   var(--r-pill);

  /* Espaçamento da escala nova (a antiga --esp-N continua valendo) */
  --sp-1:4px;  --sp-2:6px;  --sp-3:8px;  --sp-4:10px; --sp-5:12px;
  --sp-6:14px; --sp-7:16px; --sp-8:20px; --sp-9:24px; --sp-10:32px;
  --sp-11:40px; --sp-12:56px; --sp-13:80px; --sp-14:96px;
  --pad-card:    24px;
  --pad-card-lg: 32px;
  --pad-item:    14px;
  --pad-campo:   10px 16px;
  --gap-grid:   24px;
  --gap-item:   16px;
  --gap-inline:  8px;
  --largura-maxima: 1280px;
  --largura-texto:   640px;

  /* Tipografia — papéis e escala */
  --corpo: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display-alt: 'Manrope', sans-serif;
  --fs-h1: 72px;  --lh-h1: 1.05;
  --fs-h2: 40px;  --lh-h2: 1.1;
  --fs-h3: 24px;  --lh-h3: 1.2;
  --fs-h4: 18px;  --lh-h4: 1.3;
  --fs-h5: 14px;  --lh-h5: 1.35;
  --fs-body-lg: 17px; --lh-body-lg: 1.6;
  --fs-body:    15px; --lh-body:    1.55;
  --fs-body-sm: 13px; --lh-body-sm: 1.4;
  --fs-label:   12px; --lh-label:   1.3;
  --fs-meta:    11px; --lh-meta:    1.3;
  --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --track-display: .02em;
  --track-tight:  -.02em;
  --track-wide:    .06em;
  --track-widest:  .12em;
  --text-hero:  var(--display);
  --text-secao: var(--display);
  --text-card:  var(--corpo);
  --text-dado:  var(--mono);
}


/* ══════════════════════════════════════════════════════════
   CAMADA 1c — CORES DE CATEGORIA (v2)
   Aprovadas em 07/09/2026. A categoria Compras saiu do
   turquesa: ela disputava atenção com a cor da marca e as
   duas se confundiam em gráfico. As demais foram espalhadas
   no círculo cromático para ficarem distinguíveis entre si.
   ══════════════════════════════════════════════════════════ */
:root {
  --cat-alimentacao:    #F5C400;
  --cat-transporte:     #0FA3CE;
  --cat-saude:          #F1512E;
  --cat-entretenimento: #9BE55E;
  --cat-lazer:          #FF7BB0;
  --cat-educacao:       #8C9CF2;
  --cat-compras:        #C98AE8;
  --cat-servicos:       #D5AB86;
  --cat-outros:         #7d8798;
}


/* ══════════════════════════════════════════════════════════
   Acessibilidade — respeitar quem pediu menos movimento
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════
   CAMADA 2 — SEMÂNTICOS
   O papel de cada cor. Os componentes usam SÓ estes nomes,
   nunca os primitivos — é o que permite trocar a paleta
   inteira sem tocar em nenhum componente.
   ══════════════════════════════════════════════════════════ */
:root {
  /* Superfícies, do fundo para a frente */
  --bg:        var(--tinta-900);
  --surface:   var(--tinta-850);
  --surface2:  var(--tinta-800);
  --surface3:  var(--tinta-700);
  --border:    var(--tinta-600);
  --border2:   var(--tinta-500);

  /* Texto, do mais forte ao mais discreto */
  --text:   var(--neve-100);
  --text2:  var(--neve-300);
  --text3:  var(--neve-500);
  --text4:  var(--tinta-400);

  /* Marca */
  --brand:      var(--turquesa-500);
  --brand-claro: var(--turquesa-400);
  --brand-forte: var(--turquesa-600);
  --brand-contraste: var(--turquesa-900);

  /* Estados */
  --positivo: var(--lima-500);
  --info:     var(--ciano-500);
  --atencao:  var(--ouro-500);
  --erro:     var(--coral-500);
  --erro-texto: var(--coral-400);

  /* Nomes herdados — o dashboard usa estes. Mantidos como
     apelidos para não quebrar as ~373 regras existentes. */
  --fire:   var(--turquesa-500);
  --ember:  var(--turquesa-400);
  --teal:   var(--turquesa-500);
  --brand2: var(--turquesa-400);
  --lime:   var(--lima-500);
  --cyan:   var(--ciano-500);
  --yellow: var(--ouro-500);
  --coral:  var(--coral-500);
  --amber:  var(--ouro-500);
  --gold:   var(--ouro-400);
  --blue:   var(--ciano-500);
  --rose:   var(--coral-500);
  --violet: var(--lima-500);

  --itau:      var(--banco-itau);
  --bradesco:  var(--banco-bradesco);
  --santander: var(--banco-santander);
  --nubank:    var(--banco-nubank);
  --porto:     var(--banco-porto);

  --radius:    var(--raio-lg);
  --radius-sm: var(--raio-md);
  --r:         var(--raio-lg);
  --r-sm:      var(--raio-md);
  --display:   var(--fonte-display);
  --body:      var(--fonte-corpo);
  --mono:      var(--fonte-mono);

  /* Categorias de gasto */
  --cat-alimentacao:    var(--ouro-500);
  --cat-transporte:     var(--ciano-500);
  --cat-saude:          var(--coral-500);
  --cat-entretenimento: var(--lima-500);
  --cat-lazer:          var(--ouro-400);
  --cat-educacao:       var(--ciano-400);
  --cat-compras:        var(--turquesa-500);
  --cat-servicos:       var(--lima-400);
  --cat-outros:         var(--neve-500);
}


/* ══════════════════════════════════════════════════════════
   CAMADA 3 — BASE
   ══════════════════════════════════════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fonte-corpo);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Brilho de fundo — assinatura visual do produto */
.fundo-brilho::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 75% 0%,  rgba(20,201,180,.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 60%, rgba(155,229,94,.04) 0%, transparent 60%);
}

a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--raio-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Pular para o conteúdo — acessibilidade */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--brand-contraste);
  padding: var(--esp-3) var(--esp-5);
  border-radius: 0 0 var(--raio-md) 0;
  z-index: 100;
  font-weight: 700;
}
.pular:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ══════════════════════════════════════════════════════════
   CAMADA 4 — COMPONENTES
   ══════════════════════════════════════════════════════════ */

/* ── Marca ─────────────────────────────────────────────── */
.marca {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
  text-decoration: none;
  line-height: 1;
}
.marca-simbolo {
  width: 34px;
  height: 34px;
  fill: var(--brand);
  display: block;
  flex-shrink: 0;
}
.marca-nome {
  font-family: var(--fonte-display);
  font-size: var(--txt-xl);
  letter-spacing: 1.5px;
  color: var(--brand);
  line-height: 1;
}
.marca--grande .marca-simbolo { width: 42px; height: 42px; }
.marca--grande .marca-nome    { font-size: 1.6rem; }

@media (max-width: 560px) {
  .marca-simbolo { width: 28px; height: 28px; }
  .marca-nome    { font-size: 1.2rem; }
}

/* ── Botões ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-display);
  font-size: var(--txt-lg);
  letter-spacing: 1px;
  padding: 13px var(--esp-6);
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  background: var(--brand);
  color: var(--brand-contraste);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicao-rapida),
              opacity var(--transicao-rapida),
              transform var(--transicao-rapida);
}
.btn:hover:not(:disabled) { background: var(--brand-claro); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--bloco   { width: 100%; }
.btn--grande  { font-size: 1.25rem; padding: 15px var(--esp-8); }
.btn--fantasma {
  background: transparent;
  color: var(--text2);
  border-color: var(--border2);
  font-size: var(--txt-base);
  padding: 9px var(--esp-5);
}
.btn--fantasma:hover:not(:disabled) {
  background: transparent;
  color: var(--text);
  border-color: var(--brand);
}
.btn--texto {
  background: transparent;
  border: none;
  color: var(--text3);
  font-family: var(--fonte-corpo);
  font-size: var(--txt-md);
  letter-spacing: 0;
  padding: var(--esp-2);
}
.btn--texto:hover:not(:disabled) { background: transparent; color: var(--text2); }

/* ── Campos de formulário ──────────────────────────────── */
.campo { margin-bottom: var(--esp-4); }

.rotulo {
  display: block;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 7px;
}

.entrada {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--raio-md);
  padding: var(--esp-3) 14px;
  color: var(--text);
  font-family: var(--fonte-corpo);
  font-size: var(--txt-base);
  outline: none;
  transition: border-color var(--transicao-rapida);
}
.entrada:focus { border-color: var(--brand); }
.entrada::placeholder { color: var(--text3); }
.entrada.erro { border-color: var(--erro); }

/* O Chrome pinta o campo de branco no autopreenchimento.
   A sombra interna é a única forma de recuperar o fundo escuro. */
.entrada:-webkit-autofill,
.entrada:-webkit-autofill:hover,
.entrada:-webkit-autofill:focus,
.entrada:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

.campo-dica {
  font-size: var(--txt-xs);
  color: var(--text3);
  margin-top: var(--esp-2);
}

/* ── Superfícies ───────────────────────────────────────── */
.cartao {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio-lg);
  padding: var(--esp-8) var(--esp-6);
}

.painel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
.painel-topo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 11px var(--esp-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.painel-titulo {
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--text3);
}
.painel-corpo { padding: var(--esp-4); }

/* ── Avisos ────────────────────────────────────────────── */
.aviso {
  padding: var(--esp-3) 14px;
  border-radius: var(--raio-md);
  font-size: var(--txt-md);
  line-height: 1.5;
  margin-bottom: var(--esp-4);
  display: none;
}
.aviso.visivel { display: block; }
.aviso.bom {
  background: rgba(155,229,94,.1);
  border: 1px solid rgba(155,229,94,.28);
  color: var(--positivo);
}
.aviso.ruim {
  background: rgba(241,81,46,.1);
  border: 1px solid rgba(241,81,46,.28);
  color: var(--erro-texto);
}
.aviso.neutro {
  background: rgba(20,201,180,.08);
  border: 1px solid rgba(20,201,180,.22);
  color: var(--brand);
}

/* ── Selo de situação ──────────────────────────────────── */
.selo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--esp-5);
  font-size: 1.6rem;
}
.selo--ok   { background: rgba(155,229,94,.12); border: 1px solid rgba(155,229,94,.3); }
.selo--erro { background: rgba(241,81,46,.12);  border: 1px solid rgba(241,81,46,.3); }
.selo--info { background: rgba(20,201,180,.1);  border: 1px solid rgba(20,201,180,.28); }

/* ── Etiquetas ─────────────────────────────────────────── */
.etiqueta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--raio-pill);
  font-size: var(--txt-xs);
  font-weight: 500;
  white-space: nowrap;
}

/* ── Títulos ───────────────────────────────────────────── */
.titulo-display {
  font-family: var(--fonte-display);
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1.05;
}

/* ── Nota de rodapé (páginas de conta) ─────────────────── */
.nota-rodape {
  margin-top: var(--esp-5);
  text-align: center;
  font-size: var(--txt-md);
  color: var(--text3);
}
.nota-rodape a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}
.nota-rodape a:hover { text-decoration: underline; }

/* ── Bloco de dica destacado ───────────────────────────── */
.dica-bloco {
  font-size: var(--txt-md);
  color: var(--text3);
  line-height: 1.6;
  padding-top: var(--esp-5);
  margin-top: var(--esp-2);
  border-top: 1px solid var(--border);
}

/* ── Layout de página de conta ─────────────────────────── */
.pagina-conta {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pagina-conta__topo {
  position: relative;
  padding: var(--esp-6);
  border-bottom: 1px solid var(--border);
}
.pagina-conta__centro {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-8) var(--esp-5) var(--esp-12);
}
.caixa-conta {
  position: relative;
  width: 100%;
  max-width: 420px;
}
.caixa-conta--centralizada { text-align: center; }
.caixa-conta--larga { max-width: 450px; }


/* ══════════════════════════════════════════════════════════
   CAMADA 5 — UTILITÁRIOS
   ══════════════════════════════════════════════════════════ */
.oculto { display: none !important; }
.texto-centro { text-align: center; }
.texto-brand { color: var(--brand); }
.texto-sutil { color: var(--text3); }
.mono { font-family: var(--fonte-mono); }

@keyframes surgir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.surge { animation: surgir .55s ease both; }


/* ══════════════════════════════════════════════════════════
   CAMADA 4b — COMPONENTES v2
   Traduzidos dos componentes React do Design System v2 para
   CSS puro. Aplicam-se por classe adicional, para não alterar
   o visual das telas que ainda não foram convertidas.
   Ex.: <button class="btn v2">
   ══════════════════════════════════════════════════════════ */

/* ── Botão ─────────────────────────────────────────────── */
.btn.v2 {
  position: relative;
  overflow: hidden;
  gap: var(--gap-inline);
  font-family: var(--display);
  letter-spacing: var(--track-wide);
  border-radius: var(--r-botao);
  box-shadow: var(--glow-marca);
  transition: background var(--d1) var(--ease),
              border-color var(--d1) var(--ease),
              color var(--d1) var(--ease),
              box-shadow var(--d1) var(--ease),
              transform var(--d1) var(--ease);
}
.btn.v2:hover:not(:disabled) {
  background: var(--brand-claro);
  box-shadow: var(--glow-marca-forte);
  transform: scale(1.02);
}
.btn.v2:active:not(:disabled) { transform: scale(.99); }
.btn.v2:disabled { opacity: .5; box-shadow: none; transform: none; }

.btn.v2--fantasma {
  background: transparent;
  color: var(--text);
  border-color: var(--border2);
  box-shadow: none;
}
.btn.v2--fantasma:hover:not(:disabled) {
  background: var(--brand-wash);
  border-color: var(--brand);
  box-shadow: var(--glow-marca);
}
/* Estado de clique, conforme presses.ghost do design system */
.btn.v2--fantasma:active:not(:disabled) {
  background: rgba(20,201,180,.18);
  box-shadow: none;
}

/* Lampejo — a lâmina de luz que o design system passa uma vez
   no hover. No fantasma ela é turquesa clara, como no Button.jsx. */
.btn.v2--fantasma { position: relative; overflow: hidden; }
.btn.v2--fantasma::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 55%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-180%) skewX(-12deg);
  background: linear-gradient(105deg, transparent, rgba(94,232,214,.30), transparent);
}
.btn.v2--fantasma:hover:not(:disabled)::after {
  opacity: 1;
  transform: translateX(300%) skewX(-12deg);
  transition: transform var(--d3) var(--ease), opacity var(--d1) var(--ease);
}
.btn.v2--fantasma > * { position: relative; }

/* Cápsula, como no vídeo de referência */
.btn.v2--fantasma { border-radius: var(--r-pill); }

/* ── Campo ─────────────────────────────────────────────── */
.entrada.v2 {
  background: var(--surface2);
  border-radius: var(--r-campo);
  padding: var(--pad-campo);
  font-family: var(--corpo);
  font-size: var(--fs-body);
  transition: border-color var(--d1) var(--ease),
              box-shadow var(--d1) var(--ease);
}
.entrada.v2:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.entrada.v2.erro { border-color: var(--erro); }
.entrada.v2.erro:focus { box-shadow: 0 0 0 3px var(--erro-bg); }

/* O autopreenchimento do Chrome pinta o campo de branco.
   A sombra interna devolve o fundo escuro — precisa repetir
   aqui porque a superfície do v2 é outra. */
.entrada.v2:-webkit-autofill,
.entrada.v2:-webkit-autofill:hover,
.entrada.v2:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset !important;
  box-shadow: 0 0 0 1000px var(--surface2) inset !important;
}

/* ── Rótulo e ajuda ────────────────────────────────────── */
.rotulo.v2 {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--text2);
  margin-bottom: var(--sp-3);
}
.campo-dica.v2 {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--text3);
  margin-top: var(--sp-2);
}

/* ── Cartão / painel ───────────────────────────────────── */
.cartao-v2 {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--pad-card);
  box-shadow: var(--sombra-card);
}

/* ── Fundo ambiente ────────────────────────────────────── */
/* Grade de pontos + halo turquesa. Puro CSS: não pesa como
   backdrop-filter e não trava em celular de entrada. */
.ambiente-v2 { position: relative; isolation: isolate; }
.ambiente-v2::before,
.ambiente-v2::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ambiente-v2::before {
  background-image: var(--grade-ambiente);
  background-size: var(--grade-ambiente-size);
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.ambiente-v2::after {
  background:
    radial-gradient(ellipse 60% 45% at 50% -10%, var(--brand-wash), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(20,201,180,.05), transparent 70%);
}

/* ── Entrada em cena ───────────────────────────────────── */
.revelar-v2 { animation: revelarSubindo var(--d3) var(--ease-reveal) both; }
.revelar-v2--1 { animation-delay: calc(var(--stagger) * 1); }
.revelar-v2--2 { animation-delay: calc(var(--stagger) * 2); }
.revelar-v2--3 { animation-delay: calc(var(--stagger) * 3); }
@keyframes revelarSubindo {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Animações usadas pelo botão beam */
@keyframes beam-spin   { to { transform: rotate(360deg); } }
@keyframes lines-slide { 0% { background-position: 0 0; } 100% { background-position: 24px 0; } }

/* ══════════════════════════════════════════════════════════
   LOCKUP AURORA — a marca
   Vive aqui, não no conta.css: é usada em TODAS as páginas, e
   a landing não carrega o conta.css. Enquanto estas regras
   moraram lá, o wordmark aparecia em fonte padrão na landing
   e a minguante sem tamanho definido.
   ══════════════════════════════════════════════════════════ */
/* Assinatura: o arco minguante ENTRA NO LUGAR do "C" de CartIQ.
   Por isso o texto ao lado é "artIQ" e não "CartIQ" — escrever a
   palavra inteira faria o C aparecer duas vezes. O Bebas Neue
   desenha tudo em caixa alta, então lê-se CARTIQ. */
.marca-assinatura {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--display);
  font-size: 34px;    /* o maior tamanho documentado no DS (Nav do site) */
  letter-spacing: var(--track-wide);
  line-height: 1;
}
.marca-assinatura__c {
  height: .71em;       /* altura de caixa-alta do Bebas, conforme a diretriz */
  width: .76em;
  margin-right: .04em;
  flex-shrink: 0;
  filter: drop-shadow(0 0 7px var(--brand-glow));
}
.marca-assinatura__texto {
  background-image: linear-gradient(100deg,
    var(--turquesa-600) 0%, var(--turquesa-400) 55%, var(--turquesa-300) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 7px var(--brand-glow));
}

/* ══════════════════════════════════════════════════════════
   BOTÃO BEAM — traduzido de components/core/Button.jsx
   "beam é reservado ao CTA principal de hero/nav."

   Três camadas: borda de luz girando, linhas deslizando no
   fundo, e um lampejo que atravessa uma vez no hover.

   Sobre a especificidade: o .btn deste projeto usa
   :hover:not(:disabled), que pesa [0,3,0] e venceria qualquer
   regra de duas classes. Por isso os seletores abaixo repetem
   .beam .beam__btn com :not(:disabled) — [0,4,0] — em vez de
   espalhar !important.

   Uso: <span class="beam"><button class="btn beam__btn">…</button></span>
   ══════════════════════════════════════════════════════════ */
.beam {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  border-radius: var(--r-pill);
  padding: 1px;                 /* espessura da borda de luz */
  isolation: isolate;
  transition: box-shadow var(--d2) var(--ease);
}
.beam--bloco { display: flex; width: 100%; }
.beam-centro { display: flex; justify-content: center; }

/* 1. Borda de luz.
   O design system usa inset:-150%, que funciona porque os botões
   dele são quase quadrados. Num botão largo — o CTA do hero — o
   retângulo girando faz a luz correr rápido nos lados longos e
   travar nas quinas: ela some em vez de contornar.
   A correção é geométrica, não estética: o elemento que gira vira
   um QUADRADO do tamanho da diagonal, centralizado. Assim a luz
   percorre todo o perímetro em velocidade constante, seja qual
   for a proporção do botão. O gradiente continua o do sistema. */
.beam::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 160%;
  aspect-ratio: 1;
  min-width: 160%;
  min-height: 160%;
  translate: -50% -50%;
  z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 300deg, var(--brand) 360deg);
  animation: beam-spin 3s linear infinite;
}
/* Botão largo: o quadrado precisa cobrir a largura, não a altura */
/* Botão largo: o quadrado precisa cobrir a largura, não a altura */
.beam--cta::before { width: 130%; min-width: 130%; min-height: 130%; }
.beam:hover::before { animation-duration: 1.1s; }

/* O botão. O fundo fica escuro SEMPRE, inclusive no hover — é o
   contraste com a borda de luz que faz o efeito existir. */
.beam .beam__btn,
.beam .beam__btn:hover:not(:disabled),
.beam .beam__btn:focus,
.beam .beam__btn:active:not(:disabled) {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  /* --surface, não --bg: o fundo da página também é --bg, e a
     cápsula desaparecia no repouso — só a luz aparecia. */
  background: var(--surface);
  color: var(--text);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: var(--track-wide);
  padding: 11px var(--sp-9);    /* mais enxuto que o .btn padrão */
  transform: none;              /* anula o translateY do .btn:active */
  /* o beam também é usado em <a> (CTA da landing) */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
}

/* 2. Linhas deslizando */
.beam .beam__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,.06), rgba(255,255,255,.06) 1px,
    transparent 1px, transparent 8px);
  background-size: 24px 100%;
  animation: lines-slide 2s linear infinite;
  transition: opacity var(--d1) var(--ease);
}
.beam:hover .beam__btn::before { opacity: .55; animation-duration: .9s; }

/* 3. Lampejo — lâmina de luz, uma passada só */
.beam .beam__btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 55%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-180%) skewX(-12deg);
  background: linear-gradient(105deg, transparent, rgba(94,232,214,.30), transparent);
}
.beam:hover .beam__btn::after {
  opacity: 1;
  transform: translateX(300%) skewX(-12deg);
  transition: transform var(--d3) var(--ease), opacity var(--d1) var(--ease);
}

/* Sem scale. O crescer/encolher deixava o texto tremido e o
   contorno mole. O brilho sozinho já marca o estado. */
.beam:hover  { box-shadow: var(--glow-marca-forte); }
.beam:active { box-shadow: var(--glow-marca); }

/* A seta avança um passo no hover */
.beam__seta {
  position: relative;
  color: var(--brand);
  flex-shrink: 0;
  transition: transform var(--d1) var(--ease);
}
.beam:hover .beam__seta { transform: translateX(2px); }

/* ══════════════════════════════════════════════════════════
   BEAM FANTASMA — para ações secundárias da navegação
   Mistura a variante "ghost" do design system com a borda de
   luz do beam: em repouso o contorno é discreto e a luz corre
   devagar; no hover a borda acende em turquesa, o fundo ganha
   a lavagem da marca e a luz acelera.
   Chama atenção sem competir com o CTA principal.
   ══════════════════════════════════════════════════════════ */
.beam--fantasma::before {
  animation-duration: 6s;
  opacity: .45;
  transition: opacity var(--d2) var(--ease);
}
.beam--fantasma:hover::before { animation-duration: 1.6s; opacity: 1; }

.beam--fantasma .beam__btn,
.beam--fantasma .beam__btn:hover:not(:disabled),
.beam--fantasma .beam__btn:focus {
  background: var(--bg);   /* opaco: translúcido deixa o cônico vazar por dentro */
  color: var(--text2);
  font-size: 1rem;
  padding: 10px var(--sp-8);
  transition: color var(--d1) var(--ease), background var(--d1) var(--ease);
}
.beam--fantasma:hover .beam__btn { color: var(--text); background: var(--brand-wash); }
.beam--fantasma:hover { box-shadow: var(--glow-marca); }

/* Variante sólida da navegação: o CTA de cadastro.
   Fundo turquesa, mas com o mesmo halo do sistema. */
.beam--solido .beam__btn,
.beam--solido .beam__btn:hover:not(:disabled),
.beam--solido .beam__btn:focus {
  background: var(--brand);
  color: var(--brand-contraste);
  font-weight: var(--fw-regular);
  font-size: 1rem;
  padding: 10px var(--sp-8);
}
.beam--solido::before { animation-duration: 4s; opacity: .8; }
.beam--solido:hover::before { animation-duration: 1.2s; }
.beam--solido:hover .beam__btn { background: var(--brand-claro); }
.beam--solido .beam__btn::before { opacity: .12; }
.beam--solido:hover .beam__btn::before { opacity: .22; }
.beam--solido .beam__btn::after {
  background: linear-gradient(105deg, transparent, rgba(4,36,31,.28), transparent);
}
/* Sobre turquesa a seta some se ficar turquesa. O design system
   manda usar --brand-contraste no ícone do botão primário. */
.beam--solido .beam__seta { color: var(--brand-contraste); }

/* Beam grande — o CTA do hero e da chamada final.
   Precisa de seletor próprio: o .beam .beam__btn define font-size
   e padding com peso [0,2,0] e anularia um .btn-grande solto. */
/* CTA grande — mesmo comportamento do botão da navegação.
   Nenhum scale: o alvo do hover nunca muda de tamanho, então
   não existe como o cursor ficar órfão e o hover oscilar.
   O que muda no hover é só luz e cor — que é o que funcionava
   no botão "Criar conta" desde o começo.
   Aqui só o TAMANHO é maior. */
.beam--cta .beam__btn,
.beam--cta .beam__btn:hover:not(:disabled),
.beam--cta .beam__btn:focus {
  font-size: 1.22rem;
  padding: 15px var(--sp-10);
  white-space: nowrap;
}
.beam--cta .beam__seta { width: 18px; height: 18px; }

@media (max-width: 560px) {
  .beam--cta { display: flex; width: 100%; }
  .beam--cta .beam__btn { font-size: 1.1rem; padding: 14px var(--sp-8); }
}

/* Beam dormente — a ação ainda não existe (ex.: checkout desligado).
   A luz continua viva para manter a presença visual, mas o texto
   esmaece e o cursor avisa que não há clique. Sem hover, sem lampejo:
   prometer interação que não acontece é pior do que não prometer. */
.beam--dormente { cursor: not-allowed; }
.beam--dormente::before { animation-duration: 5s; opacity: .55; }
.beam--dormente:hover::before { animation-duration: 5s; }
.beam--dormente:hover { box-shadow: none; }
.beam--dormente .beam__btn,
.beam--dormente .beam__btn:hover:not(:disabled) {
  color: var(--text4);
  cursor: not-allowed;
}
.beam--dormente .beam__btn::after { display: none; }
.beam--dormente:hover .beam__btn::before { opacity: .3; animation-duration: 2s; }

@media (prefers-reduced-motion: reduce) {
  .beam::before, .beam .beam__btn::before { animation: none; }
  .beam .beam__btn::after { display: none; }
}