/* ==========================================================================
   FastCurrículo — Sistema de design
   Angatu Sistemas

   Implementação dos tokens e componentes descritos em `docs/design/MASTER.md`.
   Esse documento explica o porquê de cada valor; aqui está o como. Ao mexer em
   qualquer cor, duração ou estado, atualize os dois — e rode `node tools/contrast.js`,
   que reprova se algum par de texto cair abaixo de 4,5:1.

   Tese visual: "documento oficial, não folder de marketing". Azul profundo, papel
   branco, traço nítido, um único acento claro.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {

  /* --- Marca: a paleta do produto, derivada da logo oficial --- */
  --fc-navy-900: #000074;      /* tinta principal — título, corpo forte, header, footer */
  --fc-navy-800: #000096;      /* superfície escura secundária, estado ativo do navy */
  --fc-blue: #0000FF;          /* ação primária — botão, link, foco */
  --fc-blue-strong: #0000D6;   /* hover e pressionado da ação primária */
  --fc-blue-soft: #EDEDFF;     /* fundo de realce da ação */
  --fc-sky-300: #93DEFF;       /* acento único — marca-texto, badge, arte, ícone sobre navy */
  --fc-sky-100: #E4F4FF;       /* fundo do acento */

  /* Papel. Cartão e página são a mesma cor de propósito: o que separa duas
     superfícies aqui é a borda, não o tom — ver MASTER.md §1, regra 3. */
  --fc-paper: #FFFFFF;
  --fc-paper-2: #FFFFFF;
  --fc-surface: #F4F5FB;       /* faixa de seção alternada, campo desabilitado */

  /* --- Neutros: ramp ancorado no #CECECE pedido --- */
  --fc-gray-50: #FAFAFB;
  --fc-gray-100: #F2F2F4;
  --fc-gray-200: #E4E4E7;
  --fc-gray-300: #CECECE;      /* borda e divisor padrão */
  --fc-gray-400: #A3A3A8;      /* placeholder e desabilitado — mede 2,51, nunca texto informativo */
  --fc-gray-500: #6E6E76;      /* texto secundário — 5,05 sobre branco */
  --fc-gray-600: #56565E;      /* rótulo e texto secundário forte — 7,27 */
  --fc-gray-700: #43434B;      /* 9,80 */
  --fc-gray-800: #2E2E36;      /* 13,46 */
  --fc-gray-900: #1C1C22;      /* 16,95 */

  /* --- Sobre fundo escuro --- */
  --fc-on-navy: #FFFFFF;
  --fc-on-navy-soft: #C9C9D6;  /* 10,23 sobre navy-900 */

  /* --- Semânticas: acessibilidade, não marca. Ficam fora do ramp azul de
         propósito — um erro precisa ser reconhecível antes de ser lido. --- */
  --fc-success: #059669;       /* preenchimento e ícone (3,77 — só gráfico/UI) */
  --fc-success-ink: #056F4E;   /* texto de sucesso (6,19) */
  --fc-success-bg: #EAFBF3;
  --fc-error: #DC2626;
  --fc-error-ink: #8F1D14;
  --fc-error-bg: #FDF0EF;
  --fc-warning: #B45309;
  --fc-warning-ink: #7A4A02;
  --fc-warning-bg: #FEF6E7;

  /* --- Apelidos de compatibilidade ---
     Telas herdadas ainda pedem os nomes da v2. Eles apontam para a paleta nova
     para que nada apareça sem cor durante a migração, e saem quando a última
     ocorrência for trocada. Não usar em código novo.

     `--fc-coral` e `--fc-mint` **não estão aqui de propósito**: nas telas, o coral
     nunca era decoração — era o sinal de "sair da conta", "excluir conta",
     "pagamento recusado", "geração falhou". Apontá-lo para o acento claro faria
     esse texto medir 1,49:1 sobre branco e desaparecer sem erro nenhum. Cada
     ocorrência foi lida em contexto e trocada pela cor semântica certa
     (`--fc-error-*` ou `--fc-success-*`). MASTER.md §2.6 registra a decisão. */
  --fc-ink: var(--fc-navy-900);
  --fc-ink-soft: var(--fc-navy-800);
  --fc-border: var(--fc-gray-300);
  --fc-border-strong: var(--fc-gray-400);
  --fc-slate-400: var(--fc-gray-400);
  --fc-slate-500: var(--fc-gray-500);
  --fc-slate-600: var(--fc-gray-600);

  /* --- Tipografia --- */
  --fc-font-display: "Outfit", system-ui, sans-serif;
  --fc-font-body: "Inter", system-ui, sans-serif;
  --fc-font-mono: ui-monospace, "JetBrains Mono", monospace;

  --fc-text-xs: 0.75rem;
  --fc-text-sm: 0.875rem;
  --fc-text-base: 1rem;
  --fc-text-lg: 1.125rem;
  --fc-text-xl: 1.25rem;
  --fc-text-2xl: 1.5rem;
  --fc-text-3xl: 1.875rem;
  --fc-text-4xl: 2.25rem;
  --fc-text-5xl: 3rem;

  /* --- Espaçamento: grade de 8px com meio-passo de 4px --- */
  --fc-space-1: 4px;
  --fc-space-2: 8px;
  --fc-space-3: 12px;
  --fc-space-4: 16px;
  --fc-space-6: 24px;
  --fc-space-8: 32px;
  --fc-space-12: 48px;
  --fc-space-16: 64px;
  --fc-space-24: 96px;

  /* --- Raio --- */
  --fc-radius-sm: 8px;
  --fc-radius-md: 12px;
  --fc-radius-lg: 16px;
  --fc-radius-xl: 20px;
  --fc-radius-full: 9999px;

  /* --- Sombra em azul-marinho: sombra cinza sobre fundo azul-claro suja a cor --- */
  --fc-shadow-sm: 0 1px 2px rgba(0,0,116,0.06), 0 1px 3px rgba(0,0,116,0.06);
  --fc-shadow-md: 0 4px 12px rgba(0,0,116,0.10), 0 2px 6px rgba(0,0,116,0.06);
  --fc-shadow-lg: 0 12px 32px rgba(0,0,116,0.14), 0 4px 12px rgba(0,0,116,0.08);

  /* --- Movimento: quatro durações, três curvas. Mais que isso e nada tem ritmo. --- */
  --fc-dur-1: 120ms;
  --fc-dur-2: 200ms;
  --fc-dur-3: 320ms;
  --fc-dur-4: 600ms;
  --fc-ease: cubic-bezier(.2,.6,.3,1);
  --fc-ease-in: cubic-bezier(.5,0,.9,.4);
  --fc-ease-spring: cubic-bezier(.2,1.1,.3,1);

  /* --- Foco --- */
  --fc-focus: 0 0 0 3px rgba(0,0,255,0.35);
  --fc-focus-on-navy: 0 0 0 3px rgba(147,222,255,0.55);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--fc-font-body);
  background: var(--fc-paper);
  color: var(--fc-navy-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--fc-font-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fc-navy-900);
}

/* Título sobre fundo azul-marinho.

   A regra de elemento acima pinta todo título de navy-900. Sobre o próprio navy isso
   dá 1:1 — o título some por completo. E a classe utilitária `text-white` da seção
   não resolve: cor herdada perde para regra aplicada diretamente ao elemento.

   Foi assim que o H1 da home — "Seu currículo pronto", o texto mais importante do
   site — ficou invisível sem ninguém notar em revisão de código. Só apareceu medindo
   a cor computada na página renderizada. */
.fc-on-navy h1,
.fc-on-navy h2,
.fc-on-navy h3,
.fc-on-navy h4 { color: var(--fc-on-navy); }

/* Foco visível. `:focus-visible` e não `:focus`: o segundo dispara também no
   clique de mouse, e um anel piscando a cada clique treina a pessoa a ignorá-lo. */
*:focus-visible {
  outline: none;
  box-shadow: var(--fc-focus);
  border-color: var(--fc-blue) !important;
}

/* Sobre fundo escuro o anel azul some no azul; ali ele vira o acento claro. */
.fc-on-navy *:focus-visible { box-shadow: var(--fc-focus-on-navy); }

::selection { background: rgba(147,222,255,0.55); color: var(--fc-navy-900); }

/* ---------- Botões ---------- */
/* Tamanho de componente com especificidade zero — leia o bloco
   "Medidas que a tela pode ajustar", no fim deste arquivo, antes de mexer.
   A segunda linha repõe o recuo que o `preflight` do Tailwind zera em `button`. */
:where(.fc-btn) { font-size: var(--fc-text-sm); padding: 12px 20px; }
button:where(.fc-btn) { font-size: var(--fc-text-sm); padding: 12px 20px; }

.fc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fc-space-2);
  font-family: var(--fc-font-display); font-weight: 600;
  border-radius: var(--fc-radius-md); border: 1.5px solid transparent;
  transition: background-color var(--fc-dur-1) var(--fc-ease),
              border-color var(--fc-dur-1) var(--fc-ease),
              box-shadow var(--fc-dur-2) var(--fc-ease),
              transform var(--fc-dur-1) var(--fc-ease);
  cursor: pointer; min-height: 44px; min-width: 44px; text-decoration: none;
  line-height: 1.2;
}

.fc-btn-primary { background: var(--fc-blue); color: #fff; box-shadow: var(--fc-shadow-sm); }
.fc-btn-primary:hover { background: var(--fc-blue-strong); transform: translateY(-1px); box-shadow: var(--fc-shadow-md); }
.fc-btn-primary:active { background: var(--fc-blue-strong); transform: translateY(0); box-shadow: var(--fc-shadow-sm); }

.fc-btn-secondary { background: var(--fc-paper-2); color: var(--fc-navy-900); border-color: var(--fc-gray-300); }
.fc-btn-secondary:hover { background: var(--fc-blue-soft); border-color: var(--fc-blue); }
.fc-btn-secondary:active { background: var(--fc-blue-soft); border-color: var(--fc-blue-strong); }

.fc-btn-ghost { background: transparent; color: var(--fc-gray-600); }
.fc-btn-ghost:hover { background: var(--fc-blue-soft); color: var(--fc-navy-900); }
.fc-btn-ghost:active { background: var(--fc-sky-100); }

/* Desabilitado é cinza de verdade, não o botão primário com opacidade: opacidade
   sobre #0000FF ainda parece um botão azul clicável. */
.fc-btn:disabled,
.fc-btn[aria-disabled="true"] {
  background: var(--fc-gray-300); color: var(--fc-gray-500); border-color: transparent;
  cursor: not-allowed; box-shadow: none; transform: none !important;
}
.fc-btn-secondary:disabled,
.fc-btn-secondary[aria-disabled="true"] {
  background: var(--fc-surface); color: var(--fc-gray-400); border-color: var(--fc-gray-200);
}
.fc-btn-ghost:disabled,
.fc-btn-ghost[aria-disabled="true"] { background: transparent; color: var(--fc-gray-400); }

/* Ação sobre fundo azul-marinho. O azul de ação (#0000FF) sobre o navy mede
   1,95:1 — some por completo. Ali quem carrega a ação é o acento claro, que
   sobre o navy mede 11,29:1. */
.fc-btn-accent { background: var(--fc-sky-300); color: var(--fc-navy-900); }
.fc-btn-accent:hover { background: #B7E9FF; }
.fc-btn-accent:active { background: #7CD3FA; }
.fc-btn-accent:disabled,
.fc-btn-accent[aria-disabled="true"] { background: var(--fc-gray-400); color: var(--fc-gray-100); }

/* Ação secundária sobre o azul-marinho.

   Existe porque a tentativa anterior não funcionava: o botão levava a classe
   utilitária `text-on-navy-soft` junto de `.fc-btn-ghost`, e como o `ds.css` é
   carregado DEPOIS do `tailwind.css`, o cinza do fantasma (#56565E) ganhava da
   utilitária por vir por último. O resultado era 1,8:1 sobre o navy — o "Ver os
   modelos" da home ficava praticamente invisível, e só apareceu medindo a página
   renderizada em 320px.

   #C9C9D6 sobre #000074 mede 10,23:1. */
.fc-btn-ghost-navy { background: transparent; color: var(--fc-on-navy-soft); }
.fc-btn-ghost-navy:hover { background: var(--fc-navy-800); color: #FFFFFF; }
.fc-btn-ghost-navy:active { background: var(--fc-navy-900); }
.fc-btn-ghost-navy:disabled,
.fc-btn-ghost-navy[aria-disabled="true"] { background: transparent; color: var(--fc-gray-500); }

/* ---------- Campos ---------- */
:where(.fc-input, .fc-textarea, .fc-select) {
  font-size: var(--fc-text-base); padding: 12px 14px;
}
/* Repõe o recuo que o `preflight` zera em `input`, `select` e `textarea`. */
input:where(.fc-input),
textarea:where(.fc-textarea),
select:where(.fc-select) { font-size: var(--fc-text-base); padding: 12px 14px; }

.fc-input, .fc-textarea, .fc-select {
  width: 100%; font-family: var(--fc-font-body); line-height: 1.5;
  border-radius: var(--fc-radius-md); min-height: 44px;
  border: 1.5px solid var(--fc-gray-300); background: var(--fc-paper-2);
  color: var(--fc-navy-900);
  transition: border-color var(--fc-dur-1) var(--fc-ease), box-shadow var(--fc-dur-1) var(--fc-ease);
}
.fc-input::placeholder, .fc-textarea::placeholder { color: var(--fc-gray-400); }
.fc-input:hover, .fc-textarea:hover, .fc-select:hover { border-color: var(--fc-gray-400); }
.fc-input:focus, .fc-textarea:focus, .fc-select:focus {
  border-color: var(--fc-blue); box-shadow: var(--fc-focus); outline: none;
}
.fc-input[aria-invalid="true"], .fc-textarea[aria-invalid="true"], .fc-select[aria-invalid="true"] {
  border-color: var(--fc-error); background: var(--fc-error-bg);
}
.fc-input:disabled, .fc-textarea:disabled, .fc-select:disabled {
  background: var(--fc-surface); border-color: var(--fc-gray-200); color: var(--fc-gray-400);
  cursor: not-allowed;
}

/* Rótulo visível sempre. Placeholder não é rótulo: some quando a pessoa digita,
   justo quando ela mais precisa lembrar o que aquele campo pedia. */
.fc-label { display: block; font-size: var(--fc-text-sm); font-weight: 600; color: var(--fc-gray-600); margin-bottom: 6px; }
.fc-hint { font-size: var(--fc-text-xs); color: var(--fc-gray-500); margin-top: 6px; }
.fc-error { font-size: var(--fc-text-xs); color: var(--fc-error-ink); margin-top: 6px; }

/* ---------- Cartões ---------- */
:where(.fc-card) { padding: var(--fc-space-6); }
/* Repõe o recuo que o `preflight` zera em `fieldset`, `ul` e `ol` — as etapas do
   assistente são `fieldset.fc-card`, e sem esta linha o formulário inteiro encostava
   na borda do cartão. */
fieldset:where(.fc-card),
ul:where(.fc-card),
ol:where(.fc-card) { padding: var(--fc-space-6); }

.fc-card {
  background: var(--fc-paper-2); border: 1px solid var(--fc-gray-300);
  border-radius: var(--fc-radius-lg); box-shadow: var(--fc-shadow-sm);
}
.fc-card-hover {
  transition: border-color var(--fc-dur-2) var(--fc-ease),
              box-shadow var(--fc-dur-2) var(--fc-ease),
              transform var(--fc-dur-2) var(--fc-ease);
}
.fc-card-hover:hover { border-color: var(--fc-blue); box-shadow: var(--fc-shadow-md); transform: translateY(-2px); }

/* ---------- Badges ---------- */
:where(.fc-badge) { font-size: 11px; padding: 4px 10px; }

.fc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--fc-radius-full); border: 1px solid var(--fc-gray-300);
  background: var(--fc-paper-2); color: var(--fc-gray-600);
}
.fc-badge-blue { background: var(--fc-blue-soft); color: var(--fc-blue); border-color: #C7C7FF; }
.fc-badge-sky { background: var(--fc-sky-100); color: var(--fc-navy-900); border-color: var(--fc-sky-300); }

/* ---------- Alertas ----------
   Cor nunca é o único sinal (WCAG 1.4.1): toda variante leva um ícone ao lado. */
:where(.fc-alert) { font-size: var(--fc-text-sm); padding: 12px 14px; }

.fc-alert {
  display: flex; align-items: flex-start; gap: var(--fc-space-3);
  border-radius: var(--fc-radius-md); border: 1px solid;
}
.fc-alert-info { background: var(--fc-blue-soft); border-color: #C7C7FF; color: var(--fc-navy-900); }
.fc-alert-success { background: var(--fc-success-bg); border-color: #A7E8CE; color: #065F46; }
.fc-alert-error { background: var(--fc-error-bg); border-color: #F5C6C2; color: var(--fc-error-ink); }
.fc-alert-warning { background: var(--fc-warning-bg); border-color: #F0D9A8; color: var(--fc-warning-ink); }

/* ---------- Carregamento e vazio ---------- */
.fc-skeleton {
  background: linear-gradient(90deg, var(--fc-gray-100) 25%, var(--fc-gray-200) 50%, var(--fc-gray-100) 75%);
  background-size: 200% 100%;
  animation: fc-shimmer 1.4s infinite;
  border-radius: var(--fc-radius-md);
}
@keyframes fc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Assinaturas visuais ---------- */

/* Marca-texto: o risco de caneta sobre a palavra que importa. */
.fc-highlight {
  background: linear-gradient(to bottom,
    transparent 55%, rgba(147,222,255,0.65) 55%, rgba(147,222,255,0.65) 92%, transparent 92%);
  padding: 0 2px;
}

/* Malha de papel milimetrado — o fundo de "documento em preparo". */
.fc-blueprint {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,116,0.14) 1px, transparent 0);
  background-size: 20px 20px;
}

.fc-divider { height: 1px; background: var(--fc-gray-300); }
.fc-divider-dashed { border-top: 1px dashed var(--fc-gray-400); }

/* ---------- Utilitários ---------- */
.fc-mono { font-family: var(--fc-font-mono); }
.fc-display { font-family: var(--fc-font-display); }



/* ---------- Assistente por etapas ---------- */

/* A navegação fica presa ao rodapé no celular, na faixa que o polegar alcança sem
   trocar a mão de posição. `env(safe-area-inset-bottom)` afasta do risco da barra
   de gestos do iPhone, que senão cobre metade do botão. */
.fc-step-nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3) 0 calc(var(--fc-space-3) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--fc-paper) 72%, rgba(255,255,255,0));
}

@media (min-width: 640px) {
  .fc-step-nav { justify-content: flex-end; }
}

.fc-step[hidden] { display: none; }

/* ---------- Peças da página inicial ---------- */

/* Malha de papel milimetrado sobre fundo escuro — a mesma ideia da `.fc-blueprint`,
   invertida para o hero navy. */
.fc-blueprint-dark {
  background-image: radial-gradient(circle at 1px 1px, rgba(147,222,255,0.22) 1px, transparent 0);
  background-size: 22px 22px;
}

/* Número do passo, no "como funciona".

   Chamava-se `.fc-step` e colidia com o painel de etapa do assistente, que tem o
   mesmo nome e vem antes neste arquivo. Como esta regra vinha depois, ela ganhava:
   TODA etapa do gerador virava uma caixa de 34 por 34 pixels com o formulário
   espremido dentro. Duas coisas diferentes não podem dividir um nome de classe. */
.fc-step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--fc-radius-md);
  background: var(--fc-blue-soft); color: var(--fc-blue);
  font-family: var(--fc-font-display); font-weight: 700; font-size: var(--fc-text-base);
}

/* Pergunta frequente. `<details>` nativo: abre e fecha sem JavaScript nenhum, e o
   leitor de tela já anuncia o estado sozinho. */
.fc-faq-summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fc-space-4);
  min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--fc-font-display); font-weight: 600; font-size: var(--fc-text-lg);
  color: var(--fc-navy-900); line-height: 1.35;
}
.fc-faq-summary::-webkit-details-marker { display: none; }
.fc-faq-summary::after {
  content: "+"; flex: none;
  font-size: 22px; line-height: 1; color: var(--fc-blue);
  transition: transform var(--fc-dur-2) var(--fc-ease);
}
details[open] > .fc-faq-summary::after { content: "‘2"; }
.fc-faq-summary:hover { color: var(--fc-blue); }

.fc-faq-answer {
  margin: var(--fc-space-3) 0 0 0;
  font-size: var(--fc-text-base); line-height: 1.65; color: var(--fc-gray-500);
  max-width: 62ch;
}

/* ==========================================================================
   Ícones autorais (scripts/icons.js)
   Substituem a biblioteca externa que a política de segurança não permite mais.
   ========================================================================== */

.fc-icon { display: inline-block; vertical-align: -0.125em; flex: none; }
.fc-icon-spin { animation: fc-icon-spin 900ms linear infinite; }
@keyframes fc-icon-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Prévia viva do currículo (scripts/curriculum-preview.js)
   A folha tem largura de A4 de verdade e é reduzida por escala, o que preserva
   as proporções do que sairá impresso.
   ========================================================================== */

.fc-preview-stage {
  width: 100%;
  overflow: hidden;
  background: var(--fc-surface);
  border-radius: var(--fc-radius-lg);
  padding: 12px;
}

/* No celular a folha é a foto do produto. O cartão com p-3 (12px) mais o
   palco com p-3 (12px) mais o px-3/px-4 da página deixavam a folha minúscula
   (scale ~0.38 em 375px) — corrigido em curriculum-preview.js para descontar
   o respiro, mas ainda faltava ELIMINAR a moldura dupla e fazer o palco
   encostar na borda da viewport, como foto. Abaixo a correção em duas partes:
   1) respiro cai para 4px, curva some; 2) o cartão/section sangra até a borda
   com margin negativo para cancelar o px-3/px-4 da página. Assim `available`
   salta de ~301px para ~367px em 375px (scale 0.46, +22% de largura útil). */
@media (max-width: 640px) {
  .fc-preview-stage {
    padding: 4px;
    border-radius: 0;
  }
  .fc-preview-sheet {
    border-radius: 0;
    box-shadow: 0 2px 12px rgba(0,0,116,0.12);
  }
  .fc-preview-sheet-wrap {
    border-radius: 0;
  }
  .fc-preview-watermark {
    border-radius: 0;
  }
  /* Editor: o cartão rounded-lg border bg-white p-3 vira faixa que sangra.
     Sem o margin negativo, mesmo com o cartão transparente a folha ainda fica
     espremida pelo px-3 da <section> externa (12px cada lado). :has() é
     baseline móvel (Chrome 105+, Safari 15.4+); se não casar, cai no layout
     anterior sem quebrar. */
  .rounded-lg:has(#editorStage) {
    margin-left: -12px;
    margin-right: -12px;
    width: calc(100% + 24px);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0 !important;
  }
  #editorStage.fc-preview-stage {
    width: 100%;
    border-radius: 0;
    padding: 4px;
    background: var(--fc-surface);
  }
  /* Pré-geração: a section da prévia sangra para a viewport, igual.
     O px-4 da página externa são 16px cada lado. */
  section:has(#previewStage) {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  #previewStage.fc-preview-stage {
    border-radius: 0;
    padding: 4px;
  }
}

.fc-preview-sheet {
  display: block;
  width: 210mm;
  height: 297mm;
  border: 0;
  margin: 0 auto;
  background: #fff;
  border-radius: 4px;
  transform-origin: top center;
  box-shadow: var(--fc-shadow-lg);
}

/* A folha precisa de contexto de posicionamento para a marca d'água ficar por
   cima dela, e não por cima do palco inteiro. */
.fc-preview-sheet-wrap {
  position: relative;
  width: 210mm;
  margin: 0 auto;
  transform-origin: top center;
}
.fc-preview-sheet-wrap > .fc-preview-sheet { margin: 0; }

/* Marca d'água da prévia.

   Fica no documento de fora, por cima do quadro — e não dentro do `srcdoc`. Assim
   ela não depende do conteúdo do currículo e não some se alguém mexer no HTML pela
   ferramenta do navegador. Serve para desencorajar a captura de tela como
   substituto do PDF pago; não é proteção de verdade, e não deve ser vendida como
   tal. Por isso é leve: quem só quer conferir o resultado precisa conseguir ler. */
.fc-preview-watermark {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.fc-preview-watermark span {
  font-family: var(--fc-font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(0, 0, 116, 0.10);
  transform: rotate(-28deg);
  white-space: nowrap;
  user-select: none;
}

/* Montagem em etapas: cada bloco entra depois do anterior. */
.fc-preview-building .cv-header,
.fc-preview-building .cv-section {
  opacity: 0;
  transform: translateY(6px);
}

/* ==========================================================================
   Movimento reduzido
   Para quem tem sensibilidade vestibular, animação em excesso causa mal-estar
   físico. Vale para o documento inteiro, não caso a caso.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .fc-icon-spin { animation: none; opacity: 0.7; }
  .fc-btn-primary:hover, .fc-card-hover:hover { transform: none; }
}

/* ---------- Cupom na tela de pagamento ---------- */

/* O `<summary>` cru não parecia clicável: era texto solto dentro de uma caixa, sem
   ícone e sem nada que dissesse "isto abre". Vira uma linha com cara de botão,
   ícone de cupom à esquerda e seta de estado à direita. */
.fc-coupon-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fc-space-3);
  min-height: 52px; padding: 0 var(--fc-space-4); cursor: pointer; list-style: none;
  font-family: var(--fc-font-display); font-weight: 600; font-size: var(--fc-text-sm);
  color: var(--fc-navy-900); background: var(--fc-surface);
  transition: background-color var(--fc-dur-1) var(--fc-ease);
}
/* O Safari desenha o triângulo próprio por outro caminho. */
.fc-coupon-toggle::-webkit-details-marker { display: none; }
.fc-coupon-toggle:hover { background: var(--fc-blue-soft); }
.fc-coupon-toggle:focus-visible { outline: none; box-shadow: var(--fc-focus); }

.fc-coupon-chevron { transition: transform var(--fc-dur-2) var(--fc-ease); flex-shrink: 0; }
details[open] > .fc-coupon-toggle > .fc-coupon-chevron { transform: rotate(180deg); }

/* ---------- Abas do painel administrativo ---------- */

/* Seis assuntos numa barra só. No celular ela rola na horizontal, dentro do
   próprio contêiner — encolher seis rótulos até caberem em 320px deixaria todos
   ilegíveis, e quebrar em duas linhas empurraria o conteúdo para baixo da dobra. */
.fc-admin-tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 16px; border-radius: var(--fc-radius-md);
  border: 1.5px solid transparent; background: transparent;
  font-family: var(--fc-font-display); font-weight: 600; font-size: var(--fc-text-sm);
  color: var(--fc-gray-600); cursor: pointer;
  transition: background-color var(--fc-dur-1) var(--fc-ease),
              color var(--fc-dur-1) var(--fc-ease),
              border-color var(--fc-dur-1) var(--fc-ease);
}
.fc-admin-tab:hover { background: var(--fc-blue-soft); color: var(--fc-navy-900); }

/* A aba corrente é marcada por cor E por borda. Só cor não basta: quem não
   distingue as duas ainda enxerga a borda. */
.fc-admin-tab[aria-selected="true"] {
  background: var(--fc-blue-soft);
  border-color: var(--fc-blue);
  color: var(--fc-navy-900);
}

/* ==========================================================================
   Abas do painel do editor

   Três abas — conteúdo, modelo e foto — no lugar de três blocos empilhados numa
   coluna que já era estreita. A aba corrente é marcada por cor E por borda, pelo
   mesmo motivo de sempre: cor sozinha não é sinal acessível.
   ========================================================================== */

.fc-editor-tab {
  flex: 1 1 0;
  min-height: 44px; padding: 10px 8px;
  border: none; border-bottom: 2.5px solid transparent;
  background: transparent;
  font-family: var(--fc-font-display); font-weight: 600; font-size: var(--fc-text-xs);
  color: var(--fc-gray-600); cursor: pointer;
  transition: background-color var(--fc-dur-1) var(--fc-ease),
              color var(--fc-dur-1) var(--fc-ease),
              border-color var(--fc-dur-1) var(--fc-ease);
}

.fc-editor-tab:hover { background: var(--fc-blue-soft); color: var(--fc-navy-900); }

.fc-editor-tab[aria-selected="true"] {
  border-bottom-color: var(--fc-blue);
  color: var(--fc-navy-900);
  background: var(--fc-blue-soft);
}

/* ==========================================================================
   Seletor de modelo de currículo

   Aparece em dois lugares — no formulário e no editor — e antes era escrito duas
   vezes, de dois jeitos ruins: uma caixa de seleção que obrigava a escolher às
   cegas, e cinquenta miniaturas empilhadas sem hierarquia nenhuma.

   Aqui a categoria é uma fileira sempre visível, com a contagem em cada botão. A
   contagem não é enfeite: é ela que diz que "Compatível com triagem" tem quatro
   opções e não vinte, e a pessoa deixa de rolar procurando o que não existe.

   A categoria escolhida é marcada por cor E por borda. Só cor não basta — quem
   não distingue as duas ainda enxerga a borda (WCAG 1.4.1).
   ========================================================================== */

.fc-picker-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fc-picker-tab {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 14px;
  border: 1.5px solid var(--fc-gray-300); border-radius: var(--fc-radius-full);
  background: var(--fc-paper-2); color: var(--fc-gray-600);
  font-family: var(--fc-font-display); font-weight: 600; font-size: var(--fc-text-xs);
  line-height: 1.2; text-align: left; cursor: pointer;
  transition: background-color var(--fc-dur-1) var(--fc-ease),
              border-color var(--fc-dur-1) var(--fc-ease),
              color var(--fc-dur-1) var(--fc-ease);
}

.fc-picker-tab:hover {
  background: var(--fc-blue-soft); border-color: var(--fc-blue); color: var(--fc-navy-900);
}

.fc-picker-tab.is-active {
  background: var(--fc-blue-soft); border-color: var(--fc-blue); color: var(--fc-navy-900);
}

.fc-picker-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 1px 6px; border-radius: var(--fc-radius-full);
  background: var(--fc-gray-100); color: var(--fc-gray-600);
  font-size: 11px; font-weight: 700;
}

.fc-picker-tab.is-active .fc-picker-count {
  background: var(--fc-paper-2); color: var(--fc-blue);
}

.fc-picker-card {
  display: flex; flex-direction: column; text-align: left;
  padding: 8px; border: 2px solid var(--fc-gray-300);
  border-radius: var(--fc-radius-md); background: var(--fc-paper-2);
  cursor: pointer;
  transition: border-color var(--fc-dur-1) var(--fc-ease),
              background-color var(--fc-dur-1) var(--fc-ease),
              transform var(--fc-dur-1) var(--fc-ease);
}

.fc-picker-card:hover { border-color: var(--fc-blue); transform: translateY(-1px); }

.fc-picker-card.is-active { border-color: var(--fc-blue); background: var(--fc-blue-soft); }

/* A folha é sempre A4: a proporção fixa reserva o espaço da miniatura antes de a
   imagem chegar, e a lista para de saltar enquanto carrega. */
.fc-picker-thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 210 / 297;
  object-fit: cover; object-position: top;
  border: 1px solid var(--fc-gray-200); border-radius: 6px;
  background: var(--fc-paper-2);
}

.fc-picker-name {
  margin-top: 8px;
  font-family: var(--fc-font-display); font-weight: 700; font-size: var(--fc-text-xs);
  color: var(--fc-navy-900);
}

.fc-picker-desc {
  margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--fc-gray-500);
}

/* ==========================================================================
   Medidas que a tela pode ajustar

   O `ds.css` é carregado DEPOIS do `tailwind.css` e usa seletores de mesma
   especificidade, então ele ganhava de toda utilitária. Para cor e borda isso é o
   desejado — o componente manda. Para TAMANHO não era: significava que
   `class="fc-btn px-3 text-xs"` desenhava um botão com 20px de recuo e 14px de
   corpo, exatamente igual a `class="fc-btn px-8 text-[16px]"`.

   Não era um caso isolado. Medido no projeto inteiro: 74 elementos `fc-btn` com
   utilitária de recuo ou de corpo, 93 elementos `fc-card` com `p-5`, `p-6` ou
   `sm:p-8`, mais `fc-input py-2` e `fc-alert text-xs`. Nenhuma delas fazia efeito.
   Duas consequências visíveis no celular: o que devia ser miúdo saía grande (a
   barra do editor tinha quatro botões de 20px de recuo e quebrava em duas linhas)
   e o que devia ser grande saía pequeno (o botão principal do hero pedia `px-7
   py-4 text-[16px]` e desenhava o botão padrão).

   `:where()` tem especificidade zero. Escrevendo o tamanho padrão dentro dele, o
   componente continua com a medida certa quando ninguém pede nada, e qualquer
   utilitária — inclusive `sm:`, `md:` e as demais — passa a ganhar dele.

   Uma armadilha, que custou uma rodada inteira de teste: especificidade zero perde
   também para o `preflight` do Tailwind, que zera o recuo de `button`, `input`,
   `select`, `textarea`, `fieldset`, `ul` e `ol`, e o corpo de `button`, `input`,
   `select` e `textarea`, com seletor de TIPO (0,0,1). Sem
   repor, o assistente ficou com o formulário encostado na borda do cartão e os
   campos sem recuo nenhum. Cada componente que pode cair num desses elementos leva
   uma linha de reposição com o seletor de tipo — mesmo peso do `preflight`, escrita
   depois, e ainda assim abaixo de qualquer utilitária de classe.

   Regra ao acrescentar componente novo: `padding` e `font-size` vão para
   `:where(.fc-x)`; o resto fica na regra normal; e se o componente puder ser um
   `button`, um campo de formulário, um `fieldset`, um `ul` ou um `ol`, acrescente a
   linha de reposição.
   ========================================================================== */

/* ==========================================================================
   Última palavra sobre visibilidade

   Este arquivo é carregado DEPOIS do `tailwind.css`, e as duas folhas usam
   seletores de mesma especificidade — então quem vem por último ganha. Efeito
   prático: `.fc-btn { display: inline-flex }` vencia `.hidden { display: none }`,
   e todo botão que o JavaScript escondia com `classList.add('hidden')` continuava
   na tela. No assistente isso deixava "Continuar" e "Gerar meu currículo"
   aparecendo juntos, na etapa 1 de 10.

   A correção anterior era um `.hidden { display: none }` solto aqui no fim. Ela
   consertava aquele defeito e criava um pior, calado: como o `.hidden` daqui vem
   depois de TODA a folha do Tailwind, ele também ganhava das utilitárias de ponto
   de quebra. `hidden md:flex` — o padrão de "escondido no celular, visível no
   computador" — parava de funcionar em qualquer largura, porque `.md\:flex` mora
   dentro do `tailwind.css` e perde para uma regra de mesma especificidade escrita
   depois. Efeito medido em 1100px: a navegação do cabeçalho (`Como funciona`,
   `Modelos`, `Como avaliamos`, `Perguntas`) tinha `display: none`, e como o botão
   do menu é `md:hidden`, o site ficava SEM navegação nenhuma no computador.

   Agora a regra é escrita onde o problema realmente estava: nos componentes deste
   arquivo que declaram `display`. Só eles precisam ser vencidos pelo `.hidden`, e
   só quando a classe está no mesmo elemento. Todo o resto volta a obedecer à ordem
   natural do Tailwind, em que a utilitária com ponto de quebra vem depois da
   utilitária sem prefixo e ganha dela.

   O `!important` está só no atributo, e é a prática dos resets conhecidos: ele
   protege também contra um `element.style.display` deixado para trás por script.
   ========================================================================== */

[hidden] { display: none !important; }

.fc-btn.hidden,
.fc-alert.hidden,
.fc-badge.hidden,
.fc-label.hidden,
.fc-icon.hidden,
.fc-step-nav.hidden,
.fc-step-number.hidden,
.fc-faq-summary.hidden,
.fc-coupon-toggle.hidden,
.fc-admin-tab.hidden,
.fc-editor-tab.hidden,
.fc-picker-tabs.hidden,
.fc-picker-tab.hidden,
.fc-picker-card.hidden,
.fc-picker-count.hidden,
.fc-picker-thumb.hidden,
.fc-preview-sheet.hidden,
.fc-preview-watermark.hidden { display: none; }