/* ==========================================================================
   FLASHCARDS — Gravitação Universal (e futuros decks)
   Tema escuro próprio da página (paleta solicitada), consumindo os tokens
   globais (tipografia, espaçamento, radius, sombra) de css/tokens.css.
   Não redefine nada em base.css/components.css — só adiciona o necessário.

   V2: layout compacto (cartão visível sem rolar) + linguagem visual "jogo"
   (glow em dourado/azul — sempre dentro da paleta do Método TEF, nunca cores
   fora da identidade). Compartilhado entre o hub (/flashcards/) e cada
   deck (/flashcards/<slug>/).
   ========================================================================== */

#fc-root {
  --bg-1: #071323;
  --bg-2: #0B1728;
  --bg-3: #12253B;
  --gold: #D4A017;
  --gold-2: #F2C94C;
  --blue: #1E5DBA;
  --white: #FFFFFF;
  --text-2: #AEB8C5;
  --border: #22354D;

  /* Glow — sempre a partir da paleta acima, nunca cores novas */
  --glow-gold: rgba(212, 160, 23, .38);
  --glow-gold-soft: rgba(212, 160, 23, .16);
  --glow-blue: rgba(30, 93, 186, .32);
  --glow-blue-soft: rgba(30, 93, 186, .14);

  background: var(--bg-1);
  color: var(--white);
}

#fc-root .site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}

/* ---- Aura ambiente do fundo (sutil, "estilo jogo" sem poluir) ---- */
#fc-conteudo {
  position: relative;
  isolation: isolate;
}

#fc-conteudo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 32rem at 12% -6%, var(--glow-blue-soft), transparent 60%),
    radial-gradient(46rem 28rem at 100% 10%, var(--glow-gold-soft), transparent 55%);
  pointer-events: none;
}

/* ==========================================================================
   TOPO COMPACTO — título + voltar + placar em linha, sem hero alto
   ========================================================================== */

.fc-topbar {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}

.fc-topbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.fc-topbar__titulo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fc-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  transition: color var(--duration-fast) var(--ease-standard);
}

.fc-voltar:hover,
.fc-voltar:focus-visible {
  color: var(--gold-2);
}

.fc-kicker {
  color: var(--gold-2);
  margin: 0;
}

.fc-titulo {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 3vw, var(--fs-2xl));
  line-height: var(--lh-tight);
  color: var(--white);
  margin: 2px 0 0;
}

/* Texto de apoio do hub, logo abaixo da linha de título (páginas sem chips) */
.fc-hub-lead {
  margin: var(--space-3) auto 0;
  max-width: 62ch;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ---- Chips de placar compacto (ficam ao lado do título) ---- */
.fc-chip-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.fc-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: rgba(7, 19, 35, .55);
  white-space: nowrap;
}

.fc-chip__valor {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--white);
}

.fc-chip__label {
  font-size: var(--fs-2xs);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.fc-chip--gold {
  border-color: rgba(212, 160, 23, .4);
  background: linear-gradient(160deg, rgba(212, 160, 23, .14), rgba(7, 19, 35, .55));
}

.fc-chip--gold .fc-chip__valor {
  color: var(--gold-2);
}

.fc-chip--streak .fc-chip__icone {
  color: var(--gold-2);
  filter: drop-shadow(0 0 6px var(--glow-gold));
}

.fc-chip--streak .fc-chip__valor {
  color: var(--gold-2);
}

/* Pulso curto disparado via JS quando a sequência de acertos aumenta */
.fc-chip--pulse {
  animation: fc-chip-pulse .55s ease-out;
}

@keyframes fc-chip-pulse {
  0% { box-shadow: 0 0 0 0 var(--glow-gold); transform: scale(1); }
  40% { box-shadow: 0 0 0 8px transparent; transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

/* ==========================================================================
   LAYOUT GERAL
   ========================================================================== */

.fc-layout {
  padding-block: var(--space-5) var(--space-11);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---- Controles / filtros — barra fina logo acima do cartão ---- */
.fc-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.fc-controle-grupo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fc-label {
  font-size: var(--fs-xs);
  color: var(--text-2);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.fc-select {
  background: var(--bg-3);
  color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  min-width: 190px;
  cursor: pointer;
}

.fc-select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.fc-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}

.fc-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}

.fc-controle-botoes {
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
  flex-wrap: wrap;
}

/* Sobrescreve .btn--secondary (claro, feito para fundo branco) para o tema escuro */
#fc-root .btn--secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--white);
}

#fc-root .btn--secondary:hover,
#fc-root .btn--secondary:focus-visible {
  border-color: var(--gold);
  color: var(--gold-2);
  background: rgba(212, 160, 23, .08);
  box-shadow: 0 0 18px var(--glow-gold-soft);
}

/* ==========================================================================
   ÁREA DO CARTÃO — o protagonista da página
   ========================================================================== */

.fc-card-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.fc-posicao {
  font-size: var(--fs-xs);
  color: var(--text-2);
  font-weight: var(--fw-medium);
}

.fc-card-wrap {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fc-nav-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.fc-nav-arrow:hover,
.fc-nav-arrow:focus-visible {
  border-color: var(--gold);
  color: var(--gold-2);
  box-shadow: 0 0 20px var(--glow-gold-soft);
}

.fc-nav-arrow:active {
  transform: scale(.94);
}

.fc-nav-arrow:disabled {
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
}

/* Cartão com efeito de virar em 3D + auréola pulsante (o "brilho de jogo") */
.fc-card {
  flex: 1;
  min-width: 0;
  perspective: 1600px;
  cursor: pointer;
  border-radius: var(--radius-lg);
  position: relative;
  animation: fc-aura 5.5s ease-in-out infinite;
}

.fc-card:hover,
.fc-card:focus-visible {
  animation-play-state: paused;
  box-shadow:
    0 0 0 1px rgba(242, 201, 76, .5),
    0 26px 64px rgba(0, 0, 0, .5),
    0 0 60px var(--glow-gold);
}

.fc-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

@keyframes fc-aura {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(212, 160, 23, .22),
      0 24px 60px rgba(0, 0, 0, .5),
      0 0 42px var(--glow-blue-soft);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(242, 201, 76, .34),
      0 24px 60px rgba(0, 0, 0, .5),
      0 0 56px var(--glow-gold-soft);
  }
}

.fc-card-assunto {
  position: absolute;
  top: -12px;
  left: 20px;
  z-index: 2;
  background: var(--gold);
  color: var(--bg-1);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 16px var(--glow-gold);
}

.fc-card-inner {
  position: relative;
  width: 100%;
  min-height: 360px;
  transform-style: preserve-3d;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.fc-card.is-flipped .fc-card-inner {
  transform: rotateY(180deg);
}

.fc-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow-y: auto;
}

.fc-card-face--frente {
  background:
    radial-gradient(24rem 14rem at 12% 0%, rgba(30, 93, 186, .14), transparent 70%),
    linear-gradient(160deg, var(--bg-3), var(--bg-2));
}

.fc-card-face--verso {
  background:
    radial-gradient(28rem 18rem at 100% 0%, rgba(212, 160, 23, .17), transparent 68%),
    linear-gradient(145deg, #163b67 0%, #102c4d 48%, #0b1e35 100%);
  transform: rotateY(180deg);
  border-color: rgba(242, 201, 76, .62);
  box-shadow:
    inset 0 0 0 1px rgba(242, 201, 76, .08),
    inset 0 -3rem 6rem rgba(7, 19, 35, .22);
}

.fc-card-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold-2);
}

.fc-card-face--frente .fc-card-eyebrow {
  color: #6fa3ea; /* variação clara de --blue, legível sobre bg-3 escuro */
}

.fc-card-face--verso .fc-card-eyebrow {
  align-self: flex-start;
  padding: 5px 11px;
  border: 1px solid rgba(242, 201, 76, .38);
  border-radius: var(--radius-full);
  background: rgba(7, 19, 35, .28);
  box-shadow: 0 0 20px rgba(212, 160, 23, .1);
}

.fc-card-texto {
  font-size: clamp(var(--fs-md), 2.4vw, var(--fs-lg));
  line-height: var(--lh-relaxed);
  color: var(--white);
}

.fc-card-texto mjx-container {
  font-size: 105% !important;
}

/* ---- Ações abaixo do cartão ---- */
.fc-acoes {
  display: flex;
  justify-content: center;
}

.fc-avaliacao {
  display: flex;
  gap: var(--space-4);
}

.fc-btn-avaliar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  transition: transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.fc-btn-avaliar:active {
  transform: scale(.96);
}

.fc-btn-avaliar--acertei {
  background: #1a7f4b;
  color: var(--white);
}

.fc-btn-avaliar--acertei:hover,
.fc-btn-avaliar--acertei:focus-visible {
  box-shadow: 0 8px 24px rgba(26, 127, 75, .4);
}

/* Estouro de brilho breve ao acertar — disparado via JS (.fc-btn-avaliar--burst) */
.fc-btn-avaliar--burst::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(77, 217, 145, .55);
  animation: fc-burst .5s ease-out;
  pointer-events: none;
}

@keyframes fc-burst {
  from { box-shadow: 0 0 0 0 rgba(77, 217, 145, .55); opacity: 1; }
  to { box-shadow: 0 0 0 16px rgba(77, 217, 145, 0); opacity: 0; }
}

.fc-btn-avaliar--errei {
  background: transparent;
  border-color: #b5423a;
  color: #ff8f85;
}

.fc-btn-avaliar--errei:hover,
.fc-btn-avaliar--errei:focus-visible {
  background: rgba(181, 66, 58, .14);
}

.fc-btn-avaliar:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Destaca a avaliação já registrada para o cartão atual */
.fc-btn-avaliar.is-selecionado.fc-btn-avaliar--acertei {
  box-shadow: 0 0 0 2px var(--gold-2);
}

.fc-btn-avaliar.is-selecionado.fc-btn-avaliar--errei {
  box-shadow: 0 0 0 2px var(--gold-2);
  background: rgba(181, 66, 58, .22);
}

/* ---- Atalhos e mensagens ---- */
.fc-atalhos {
  font-size: var(--fs-2xs);
  color: var(--text-2);
  text-align: center;
  max-width: 560px;
}

.fc-atalhos kbd {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-body);
  font-size: .85em;
}

.fc-vazio {
  text-align: center;
  color: var(--text-2);
  padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  max-width: 560px;
}

/* ==========================================================================
   DESEMPENHO DETALHADO — secundário, logo abaixo do cartão
   ========================================================================== */

.fc-desempenho {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.fc-desempenho__titulo {
  margin: 0 0 var(--space-3);
  color: var(--gold-2);
}

.fc-placar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.fc-placar-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.fc-placar-item:hover {
  border-color: rgba(212, 160, 23, .4);
  box-shadow: 0 0 24px var(--glow-gold-soft);
}

.fc-placar-item--gold {
  background: linear-gradient(160deg, rgba(212, 160, 23, .16), var(--bg-2));
  border-color: rgba(212, 160, 23, .4);
}

.fc-placar-valor {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 3vw, var(--fs-xl));
  font-weight: var(--fw-bold);
  color: var(--white);
}

.fc-placar-item--gold .fc-placar-valor {
  color: var(--gold-2);
}

.fc-placar-label {
  font-size: var(--fs-2xs);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ---- Responsividade ---- */
@media (max-width: 780px) {
  .fc-topbar__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .fc-placar {
    grid-template-columns: repeat(2, 1fr);
  }

  .fc-controles {
    flex-direction: column;
    align-items: stretch;
  }

  .fc-controle-botoes {
    margin-left: 0;
    justify-content: stretch;
  }

  .fc-controle-botoes .btn {
    flex: 1;
  }
}

@media (max-width: 520px) {
  .fc-topbar {
    padding-block: var(--space-4);
  }

  .fc-chip {
    padding: 6px 11px;
  }

  .fc-card-wrap {
    gap: var(--space-2);
  }

  .fc-nav-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
  }

  .fc-card-face {
    padding: var(--space-7) var(--space-4) var(--space-5);
  }

  .fc-card-inner {
    min-height: 400px;
  }

  .fc-avaliacao {
    width: 100%;
  }

  .fc-btn-avaliar {
    flex: 1;
    justify-content: center;
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-card-inner {
    transition: none;
  }

  .fc-card {
    animation: none;
    box-shadow:
      0 0 0 1px rgba(212, 160, 23, .28),
      0 24px 60px rgba(0, 0, 0, .5);
  }

  .fc-chip--pulse,
  .fc-btn-avaliar--burst::after {
    animation: none;
  }
}

/* ==========================================================================
   HUB — página flashcards/index.html (lista de decks disponíveis)
   ========================================================================== */

.fc-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  padding-block: var(--space-7) var(--space-11);
}

.fc-deck-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.fc-deck-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(16rem 10rem at 100% 0%, var(--glow-blue-soft), transparent 65%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
  pointer-events: none;
}

.fc-deck-card:hover,
.fc-deck-card:focus-visible {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .4), 0 0 40px var(--glow-gold-soft);
}

.fc-deck-card:hover::before,
.fc-deck-card:focus-visible::before {
  opacity: 1;
}

.fc-deck-card__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212, 160, 23, .35);
  background: linear-gradient(145deg, rgba(212, 160, 23, .16), rgba(30, 93, 186, .18));
  color: var(--gold-2);
}

.fc-deck-card__icone svg {
  width: 22px;
  height: 22px;
}

.fc-deck-card__selo {
  align-self: flex-start;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gold-2);
  background: rgba(212, 160, 23, .14);
  border: 1px solid rgba(212, 160, 23, .35);
  border-radius: var(--radius-full);
  padding: 4px 12px;
}

.fc-deck-card__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--white);
}

.fc-deck-card__texto {
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: var(--lh-relaxed);
  flex: 1;
}

.fc-deck-card__cta {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--gold-2);
}

.fc-deck-card--em-breve {
  opacity: .55;
  cursor: default;
}

.fc-deck-card--em-breve:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

/* ==========================================================================
   HUB V3 — integração visual com a Home + responsividade robusta
   ========================================================================== */

.fc-hub-conteudo {
  padding-block: var(--space-8) var(--space-11);
}

.fc-topbar:has(.fc-hub-metricas) {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background:
    radial-gradient(42rem 28rem at 82% 18%, rgba(30, 93, 186, .22), transparent 68%),
    radial-gradient(32rem 22rem at 15% 92%, rgba(212, 160, 23, .12), transparent 70%),
    linear-gradient(135deg, #0b1d34 0%, var(--bg-1) 72%);
}

.fc-topbar:has(.fc-hub-metricas) .fc-topbar__titulo {
  width: 100%;
  max-width: 820px;
  gap: var(--space-3);
}

.fc-topbar:has(.fc-hub-metricas) .fc-voltar {
  align-self: flex-start;
  margin-bottom: var(--space-4);
}

.fc-topbar:has(.fc-hub-metricas) .fc-titulo {
  max-width: 13ch;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  letter-spacing: -.035em;
  line-height: .98;
}

.fc-topbar:has(.fc-hub-metricas) .fc-titulo em {
  color: var(--gold-2);
  font-weight: inherit;
}

.fc-topbar:has(.fc-hub-metricas) .fc-hub-lead {
  width: auto;
  max-width: 61ch;
  margin: var(--space-3) 0 0;
  padding: 0;
  color: #c6cfda;
  font-size: clamp(var(--fs-sm), 1.5vw, var(--fs-md));
}

.fc-hub-metricas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.fc-hub-metricas span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .045);
  color: var(--text-2);
  font-size: var(--fs-xs);
}

.fc-hub-metricas strong {
  margin-right: 5px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-md);
}

.fc-hub-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.fc-hub-section-head h2 {
  margin-top: var(--space-2);
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
}

.fc-hub-section-head > p {
  max-width: 32ch;
  color: var(--text-2);
  font-size: var(--fs-xs);
  text-align: right;
}

.fc-hub-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding-block: var(--space-6);
}

.fc-deck-card {
  min-width: 0;
  min-height: 360px;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  background:
    linear-gradient(145deg, rgba(18, 37, 59, .96), rgba(11, 23, 40, .96));
}

.fc-deck-card__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.fc-deck-card__icone {
  display: inline-grid;
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  height: 48px;
  overflow: hidden;
}

.fc-deck-card__icone svg {
  display: block;
  width: 24px;
  max-width: 24px;
  height: 24px;
}

.fc-deck-card__titulo {
  margin-top: auto;
  font-size: clamp(var(--fs-lg), 2.6vw, var(--fs-xl));
}

.fc-deck-card__texto {
  max-width: 54ch;
  flex: 0 1 auto;
}

.fc-deck-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: var(--space-2);
  padding: 11px 17px;
  border-radius: var(--radius-full);
  background: var(--gold-2);
  color: var(--bg-1);
  transition: background var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.fc-deck-card:hover .fc-deck-card__cta,
.fc-deck-card:focus-visible .fc-deck-card__cta {
  background: var(--white);
  transform: translateX(2px);
}

.fc-hub-em-breve {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed rgba(174, 184, 197, .28);
  border-radius: var(--radius-md);
  color: var(--text-2);
}

.fc-hub-em-breve__icone {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .05);
  color: var(--gold-2);
  font-size: var(--fs-lg);
}

.fc-hub-em-breve div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  font-size: var(--fs-xs);
}

.fc-hub-em-breve strong {
  color: var(--white);
}

@media (max-width: 780px) {
  .fc-topbar:has(.fc-hub-metricas) {
    padding-block: var(--space-7);
  }

  .fc-topbar:has(.fc-hub-metricas) .fc-titulo {
    max-width: 11ch;
    font-size: clamp(2.45rem, 12vw, 4rem);
  }

  .fc-hub-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .fc-hub-section-head > p {
    text-align: left;
  }

  .fc-hub-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fc-deck-card {
    min-height: 320px;
  }
}

@media (min-width: 781px) and (max-width: 1080px) {
  .fc-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fc-deck-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  #fc-root {
    overflow-x: clip;
  }

  .fc-topbar:has(.fc-hub-metricas) .fc-topbar__titulo,
  .fc-topbar:has(.fc-hub-metricas) .fc-hub-lead,
  .fc-hub-conteudo,
  .fc-deck-card {
    min-width: 0;
  }

  .fc-topbar:has(.fc-hub-metricas) .fc-titulo {
    max-width: none;
    font-size: clamp(2.35rem, 12vw, 3.35rem);
  }

  .fc-hub-metricas span:last-child {
    flex-basis: 100%;
  }

  .fc-hub-conteudo {
    padding-block: var(--space-7) var(--space-9);
  }

  .fc-hub-grid {
    gap: var(--space-4);
    padding-block: var(--space-5);
  }

  .fc-deck-card {
    min-height: 0;
    padding: var(--space-5);
  }

  .fc-deck-card__titulo {
    margin-top: var(--space-5);
  }

  .fc-deck-card__texto {
    font-size: var(--fs-xs);
  }

  .fc-hub-em-breve {
    align-items: flex-start;
    padding: var(--space-4);
  }
}