/* src/tokens.css */
/* Tokens da marca Sempre Fácil (UX-JORNADA §2; valores do protótipo aprovado). Fundo claro sempre: sem modo escuro (UX §2.1). */
:root {
  --sf-navy: #06245c;
  --sf-deep: #03163e;
  --sf-blue: #0757c8;
  --sf-blue-2: #176bd7;
  --sf-sky: #9cc3ff;
  --sf-sky-soft: #e8f1ff;
  --sf-orange: #ff681c;
  --sf-orange-btn: #d24600;
  --sf-orange-deep: #a33600;
  --sf-ink: #101a34;
  --sf-muted: #5e6d87;
  --sf-line: #dfe6f1;
  --sf-soft: #f4f7fc;
  --sf-white: #ffffff;
  --sf-wa: #1fb457;
  --sf-wa-btn: #188842;
  --sf-ok: #1a9e5c;
  --sf-ok-soft: #e7f6ee;
  --sf-warn: #b45309;
  --sf-warn-soft: #fff4e5;
  --sf-err: #c0392b;
  /* Ajustes de contraste AA (o teste confere): verde de texto, placeholder e anel de foco. Ver task-F5.1-report.md. */
  --sf-ok-texto: #13703f;
  --sf-placeholder: #5f6e86;
  --sf-foco: #176bd7;
  --sf-orange-btn-hover: #b93f00;
  --sf-wa-btn-hover: #147a3a;
  --sf-grad: linear-gradient(135deg, #062a6f 0%, #0b3aa3 55%, #2b3fd6 100%);

  --sf-leaf: 30px 0 30px 0;
  --sf-leaf-sm: 16px 0 16px 0;
  --sf-radius: 14px;
  --sf-space-1: 4px;
  --sf-space-2: 8px;
  --sf-space-3: 12px;
  --sf-space-4: 16px;
  --sf-space-5: 24px;
  --sf-space-6: 32px;
  --sf-gutter: 16px;
  --sf-card-max: 480px;
  --sf-touch: 48px;
  --sf-btn-h: 56px;

  --sf-shadow-card: 0 18px 40px rgba(6, 36, 92, .10);
  --sf-shadow-btn: 0 10px 24px rgba(7, 87, 200, .28);
  --sf-shadow-orange: 0 10px 24px rgba(210, 70, 0, .30);

  --sf-ease-tap: cubic-bezier(.2, .8, .2, 1);
  --sf-ease-screen: cubic-bezier(.16, 1, .3, 1);
  --sf-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --sf-t-screen: 420ms cubic-bezier(.16, 1, .3, 1);
  --sf-t-reveal: 900ms cubic-bezier(.16, 1, .3, 1);
  --sf-t-badge: 520ms cubic-bezier(.34, 1.56, .64, 1);
  --sf-t-bar: 600ms ease-out;
  --sf-t-tip: 260ms ease;
}

/* Movimento reduzido (UX §2.4): sem deslize, sem count-up, sem confete; a informação continua. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sf-t-screen: 150ms linear;
    --sf-t-reveal: 1ms;
    --sf-t-badge: 1ms;
    --sf-t-bar: 1ms;
    --sf-t-tip: 1ms;
  }
}

/* src/base.css */
/* Base: reset, tipografia (Plus Jakarta Sans) e layout. 390 px primeiro; a partir de 768 px o gutter cresce; a partir de 1024 px o card fica centrado. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sf-ink);
  background: var(--sf-soft);
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--sf-foco); outline-offset: 2px; }
img, svg { max-width: 100%; }

h1 { font-size: 26px; line-height: 1.15; font-weight: 800; color: var(--sf-navy); margin: 0 0 8px; letter-spacing: -.01em; }
h2 { font-size: 20px; line-height: 1.2; font-weight: 800; color: var(--sf-navy); margin: 0 0 8px; }
p { margin: 0; }
.sub { font-size: 17px; line-height: 1.4; color: var(--sf-muted); }
.microcopia { font-size: 13px; line-height: 1.4; color: var(--sf-muted); }
.valor-destaque { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--sf-navy); }

/* tela: uma coluna de até 480 px, como o card; o botão primário fica na zona do polegar */
.sf-tela { max-width: var(--sf-card-max); margin: 0 auto; padding: 26px var(--sf-gutter) 120px; }

@media (min-width: 768px) {
  :root { --sf-gutter: 24px; }
  h1 { font-size: 32px; }
  .sub { font-size: 18px; }
  .valor-destaque { font-size: 56px; }
}

@media (min-width: 1024px) {
  .sf-tela { padding-top: 44px; }
}

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

/* src/casca.css */
/* Casca fixa da página (index.html): fundo, cabeçalho, linha da Séfi, grade do desktop e sheets. Valores do protótipo aprovado (styles.css).
   390 px primeiro; a partir de 1024 px a Séfi vai para a coluna da direita, grande, sobre a onda azul com o fio laranja. */

/* ---------- fundo ---------- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-wave { display: none; }
.bg-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(7, 87, 200, .08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent 60%);
}

/* ---------- cabeçalho ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  padding: 10px var(--sf-gutter);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sf-line);
}
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 1120px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; height: 28px; width: auto; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.chip-seguro, .btn-ajuda {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: transform 180ms var(--sf-ease-tap), background 180ms;
}
/* o verde do texto é o do selo (AA sobre o fundo claro); o --sf-ok do protótipo não chega a 4,5:1 */
.chip-seguro { background: var(--sf-ok-soft); color: var(--sf-ok-texto); }
.btn-ajuda { background: var(--sf-white); border-color: var(--sf-line); color: var(--sf-navy); }
.chip-seguro svg, .btn-ajuda svg { width: 16px; height: 16px; }
.chip-seguro:active, .btn-ajuda:active { transform: scale(.96); }
.progress { max-width: 1120px; margin: 8px auto 0; }
@media (max-width: 400px) {
  .brand-logo { height: 24px; }
  .chip-seguro, .btn-ajuda { gap: 5px; padding: 0 9px; }
}
@media (max-width: 360px) { .btn-ajuda span { display: none; } }

/* ---------- tela e linha da Séfi ---------- */
.sf-tela { position: relative; z-index: 1; }
.sefi-row { display: flex; align-items: center; gap: 4px; margin: -12px 0 6px; }
.sefi-row .sefi-wrap { position: relative; flex: none; width: 88px; z-index: 3; filter: drop-shadow(0 10px 14px rgba(6, 36, 92, .18)); }
.sefi-row .balao-sefi { flex: 1; }

/* ---------- sheets ---------- */
.sheet-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(3, 22, 62, .45); backdrop-filter: blur(2px); }
.sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 51; width: min(520px, 100%); max-height: 86vh; overflow: auto;
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); background: var(--sf-white);
  border-radius: 26px 26px 0 0; box-shadow: 0 -20px 40px rgba(3, 22, 62, .2);
  transform: translateX(-50%); animation: sf-sheet-sobe 360ms var(--sf-ease-screen);
}
.sheet[hidden], .sheet-fundo[hidden] { display: none; }
@keyframes sf-sheet-sobe { from { transform: translate(-50%, 100%); } }
.sheet-grip { width: 44px; height: 5px; margin: 0 auto 14px; border-radius: 99px; background: var(--sf-line); }
.sheet h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--sf-navy); }
.sheet h2:focus { outline: none; }
.sheet p { margin: 0 0 10px; color: var(--sf-muted); }
.faq { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; padding: 0; list-style: none; }
.faq details { padding: 12px 14px; border: 1px solid var(--sf-line); border-radius: 12px; }
.faq summary { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; color: var(--sf-ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sf-blue); font-weight: 800; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 8px 0 0; font-size: 14px; }

/* ---------- desktop ---------- */
@media (min-width: 768px) {
  .brand-logo { height: 32px; }
}
@media (min-width: 1024px) {
  .bg-wave { display: block; position: absolute; right: 0; top: 0; width: 46vw; height: 100%; }
  .sf-tela { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 0 56px; align-items: start; max-width: 1120px; padding-top: 44px; }
  .sf-tela > section { grid-column: 1; grid-row: 1; }
  .sefi-row {
    grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 140px;
    flex-direction: column-reverse; align-items: center; gap: 0; margin: 0; padding-top: 10px;
  }
  .sefi-row .sefi-wrap { width: 320px; filter: drop-shadow(0 30px 40px rgba(3, 22, 62, .35)); }
  .sefi-row .balao-sefi {
    flex: none; max-width: 320px; margin: 8px 0 0; padding: 14px 18px;
    background: rgba(255, 255, 255, .96); font-size: 16px; line-height: 1.4; font-weight: 700; text-align: center;
    border: 0; border-radius: var(--sf-leaf-sm); box-shadow: 0 18px 40px rgba(3, 22, 62, .25);
  }
  /* ponta do balão para cima, na direção da Séfi (no celular ela aponta para a direita) */
  .sefi-row .balao-sefi::after {
    left: 50%; right: auto; top: -8px; bottom: auto; width: 16px; height: 16px; margin-left: -8px;
    background: inherit; border: 0; border-radius: 3px; transform: rotate(45deg);
  }
  .toast { top: 124px; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  .chip-seguro, .btn-ajuda { transition: none; }
}

/* src/componentes/botao.css */
/* Botão: 56 px, alvo de toque mínimo 48 px. Estados: normal, :hover, :focus-visible, :disabled, [aria-busy] (carregando). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: var(--sf-btn-h); padding: 0 22px;
  border: 0; border-radius: var(--sf-leaf-sm);
  font-size: 17px; font-weight: 700; letter-spacing: .005em;
  transition: transform 180ms var(--sf-ease-tap), box-shadow 180ms, background 180ms, opacity 180ms;
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--sf-foco); outline-offset: 3px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn[aria-busy="true"] { cursor: progress; }

.btn-primario { background: var(--sf-blue); color: #fff; box-shadow: var(--sf-shadow-btn); }
.btn-primario:hover { background: var(--sf-blue-2); }

.btn-secundario { background: var(--sf-white); color: var(--sf-navy); border: 2px solid var(--sf-line); }
.btn-secundario:hover { border-color: var(--sf-sky); }

/* laranja: hover mais escuro que o da base, para o texto branco continuar com 4,5:1 */
.btn-laranja { background: var(--sf-orange-btn); color: #fff; box-shadow: var(--sf-shadow-orange); }
.btn-laranja:hover { background: var(--sf-orange-btn-hover); }
.btn-laranja:active { background: var(--sf-orange-deep); }

.btn-whatsapp { background: var(--sf-wa-btn); color: #fff; box-shadow: 0 10px 22px rgba(24, 136, 66, .24); }
.btn-whatsapp:hover { background: var(--sf-wa-btn-hover); }

.btn-fantasma { background: transparent; color: var(--sf-blue); min-height: var(--sf-touch); font-size: 15px; box-shadow: none; }
.btn-fantasma:hover { background: rgba(7, 87, 200, .06); }

/* ícone do botão (seta, WhatsApp): SVG do protótipo em currentColor; a seta avança 3 px no hover */
.btn-icone { display: inline-flex; flex: none; width: 20px; height: 20px; transition: transform 220ms var(--sf-ease-tap); }
.btn-icone svg { width: 100%; height: 100%; }
.btn-whatsapp .btn-icone { width: 22px; height: 22px; }
.btn:hover .btn-icone { transform: translateX(3px); }
.btn-whatsapp:hover .btn-icone { transform: none; }
@media (prefers-reduced-motion: reduce) { .btn-icone { transition: none; } }

/* src/componentes/campo.css */
/* Campo: rótulo em caixa alta 13 px, entrada 58 px com número de 20 px, erro em --sf-err. Foco: anel do --sf-foco. */
.campo { margin-top: 18px; }
.campo-rotulo {
  display: block; margin-bottom: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sf-muted);
}
.campo input {
  width: 100%; height: 58px; padding: 0 16px;
  border: 2px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-white);
  font-size: 20px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  transition: border-color 180ms, box-shadow 180ms;
}
.campo input::placeholder { color: var(--sf-placeholder); }
.campo input:focus-visible { outline: 3px solid var(--sf-foco); outline-offset: 2px; border-color: var(--sf-blue); }
.campo input:disabled { opacity: .6; cursor: not-allowed; }
.campo input[aria-invalid="true"] { border-color: var(--sf-err); box-shadow: 0 0 0 4px rgba(192, 57, 43, .10); }
.campo-erro { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--sf-err); }
.campo-erro:empty { display: none; }
.campo-ajuda { margin: 6px 0 0; font-size: 13px; color: var(--sf-muted); }

/* src/componentes/card-folha.css */
/* Card folha: forma --sf-leaf, sombra do card, borda fina. 390 px: 20 px laterais; 768 px ou mais: 30 px. */
.card-folha {
  position: relative; padding: 26px 20px 22px;
  background: var(--sf-white); border: 1px solid rgba(223, 230, 241, .7);
  border-radius: var(--sf-leaf); box-shadow: var(--sf-shadow-card); overflow: hidden;
}
.card-folha-hero { padding: 0; }
@media (min-width: 768px) {
  .card-folha { padding: 32px 30px 28px; }
}

/* src/componentes/barra-progresso.css */
/* Barra de progresso do cabeçalho (protótipo): chip da etapa e % em cima, trilho de 6 px com o degradê, ponto laranja na ponta e quatro marcos.
   A transição de largura usa --sf-t-bar. O trilho deixa 7 px à direita para o marco de 100 % caber na tela. */
.barra-progresso { position: relative; }
.barra-meta { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--sf-muted); }
.barra-chip { margin: 0; font-variant-numeric: tabular-nums; }
.barra-pct { font-variant-numeric: tabular-nums; color: var(--sf-blue); }
.barra-trilho { position: relative; height: 6px; margin-right: 7px; border-radius: 999px; background: var(--sf-sky-soft); }
.barra-preench {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 999px; background: var(--sf-grad); box-shadow: 0 0 12px rgba(43, 63, 214, .35);
  transition: width var(--sf-t-bar);
}
.barra-preench::after {
  content: ""; position: absolute; right: -2px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--sf-orange); box-shadow: 0 0 0 4px rgba(255, 104, 28, .18);
}
.barra-ponto {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--sf-white); border: 2px solid var(--sf-sky);
  transition: background 300ms, border-color 300ms, transform 300ms var(--sf-ease-pop);
}
.barra-ponto[data-marco="15"] { left: 15%; }
.barra-ponto[data-marco="40"] { left: 40%; }
.barra-ponto[data-marco="70"] { left: 70%; }
.barra-ponto[data-marco="100"] { left: 100%; }
.barra-ponto.on { background: var(--sf-blue); border-color: var(--sf-blue); transform: scale(1.1); }
.barra-ponto.on::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sf-white);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.2 7.3 8 3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* src/componentes/sefi.css */
/* Séfi: flutua 3,2 s (6 px), pisca a cada ~4 s, e na pose think orbita o ponto laranja. Só CSS, sem GSAP (UX §5). */
.sefi-wrap { width: 100%; }
.sefi { display: block; width: 100%; height: auto; overflow: visible; animation: sf-sefi-flutua 3.2s ease-in-out infinite; }
.sefi-lid { transform-box: fill-box; transform-origin: 50% 60%; animation: sf-sefi-piscar 4s ease-in-out infinite; }
.sefi-wrap[data-pose="think"] .sefi-orb { animation: sf-sefi-orbita 2s ease-in-out infinite; }
@keyframes sf-sefi-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sf-sefi-piscar { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes sf-sefi-orbita { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -10px); } }
@media (prefers-reduced-motion: reduce) {
  .sefi, .sefi-lid, .sefi-wrap[data-pose="think"] .sefi-orb { animation: none; }
}

/* src/componentes/balao-sefi.css */
/* Balão da Séfi: cartão branco com a ponta voltada para ela (como o protótipo, .sefi-say-mini). */
.balao-sefi {
  position: relative; margin: 0; padding: 10px 14px;
  background: var(--sf-white); color: var(--sf-navy); font-size: 14.5px; line-height: 1.35; font-weight: 600;
  border: 1px solid var(--sf-line); border-radius: 18px 18px 4px 18px; box-shadow: 0 8px 20px rgba(6, 36, 92, .08);
}
.balao-sefi::after {
  content: ""; position: absolute; right: -7px; bottom: 10px; width: 12px; height: 12px;
  background: var(--sf-white); border-right: 1px solid var(--sf-line); border-top: 1px solid var(--sf-line); transform: rotate(45deg);
}
.balao-sefi:empty { visibility: hidden; }

/* src/componentes/card-oferta.css */
/* Card da oferta (T3/T5): faixa azul clara, valor de 44 px (56 px a partir de 768), linha de detalhe em --sf-muted. */
.card-oferta {
  margin-top: 16px; padding: 18px 18px 16px;
  border: 1px solid #d6e5ff; border-radius: var(--sf-leaf-sm);
  background: var(--sf-sky-soft);
}
.card-oferta-rotulo { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--sf-muted); }
.card-oferta-valor { margin: 0; font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--sf-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-oferta-detalhe { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #d6e5ff; font-size: 17px; font-weight: 700; color: var(--sf-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .card-oferta-valor { font-size: 56px; } }

/* src/componentes/antes-agora.css */
/* Antes → agora: três colunas (antes, seta, agora). O valor antigo aparece riscado; o novo fica no bloco azul. */
.antes-agora { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 16px 0 6px; }
.ba-box { padding: 12px; border: 1px solid var(--sf-line); border-radius: 14px; background: var(--sf-soft); }
.ba-box.now { background: var(--sf-sky-soft); border-color: #c6dbff; }
.ba-box p { margin: 0; }
.ba-k { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sf-muted); }
.ba-v { font-size: 20px; font-weight: 800; color: var(--sf-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ba-box:not(.now) .ba-v { color: var(--sf-muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(94, 109, 135, .5); }
.ba-p { font-size: 13px; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.antes-agora-seta { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sf-orange-btn); color: #fff; }
.antes-agora-seta::before { content: "→"; font-size: 16px; font-weight: 700; line-height: 1; }

/* src/componentes/lista-checklist.css */
/* Checklist: pendente em --sf-muted (4,9:1 sobre branco; #9aa8bf dava 2,4:1); feito com marca verde; atual com ponto laranja pulsando. */
.checklist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.checklist li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  font-weight: 600; color: var(--sf-muted); transition: color 300ms, background 300ms;
}
.checklist-marca {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--sf-line); transition: background 300ms, border-color 300ms;
}
.checklist li.atual { color: var(--sf-navy); background: var(--sf-sky-soft); }
.checklist li.atual .checklist-marca { border-color: var(--sf-orange); }
.checklist li.atual .checklist-marca::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--sf-orange);
  animation: sf-checklist-pulsa 1s ease-in-out infinite;
}
.checklist li.feito { color: var(--sf-ink); }
.checklist li.feito .checklist-marca { background: var(--sf-ok); border-color: var(--sf-ok); }
@keyframes sf-checklist-pulsa { 50% { transform: scale(.55); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .checklist li.atual .checklist-marca::after { animation: none; } }

/* src/componentes/toast.css */
/* Toast: fixo no topo, fundo --sf-navy, texto branco. Entra e sai com opacidade e deslize (--sf-ease-pop).
   Conquista (protótipo): medalha laranja à esquerda e o subtítulo "Conquista n de 4" em cima do texto. */
.toast {
  position: fixed; left: 50%; top: 116px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); padding: 10px 16px 10px 10px;
  border-radius: var(--sf-leaf-sm); background: var(--sf-navy); color: #fff;
  font-size: 14px; font-weight: 700; box-shadow: 0 16px 30px rgba(3, 22, 62, .28);
  opacity: 0; pointer-events: none; transform: translate(-50%, -20px);
  transition: opacity 260ms, transform 360ms var(--sf-ease-pop);
}
.toast:empty { display: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-sky); }
.toast .medal { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px 0 10px 0; background: var(--sf-orange-btn); }
.toast .medal::before {
  content: ""; width: 14px; height: 14px; background: #fff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.2 7.3 8 3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.toast .medal::after { content: ""; position: absolute; inset: -4px; border-radius: 13px 0 13px 0; border: 2px solid var(--sf-orange); animation: sf-medalha-anel 700ms ease-out forwards; }
@keyframes sf-medalha-anel { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast .medal::after { animation: none; opacity: 0; } }

/* src/componentes/rodape-fixo.css */
/* Rodapé fixo: colado embaixo, com 16 px laterais e a área segura do aparelho. Em telas largas volta ao fluxo do card. */
.rodape-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px var(--sf-gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(244, 247, 252, 0), var(--sf-soft) 24px);
}
.rodape-fixo > * { max-width: var(--sf-card-max); width: 100%; margin: 0 auto; }
@media (min-width: 1024px) {
  .rodape-fixo { position: static; padding: 16px 0 0; background: none; }
}

/* src/componentes/modal-bancos.css */
/* Seletor de banco: chips de 44 px com 8 px entre eles (UX §9). Busca e resultados numa lista de até 220 px. */
.modal-bancos { display: flex; flex-direction: column; gap: 8px; }
.modal-bancos input {
  width: 100%; height: 52px; padding: 0 14px;
  border: 2px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-white); font-size: 17px;
}
.modal-bancos input:focus-visible { outline: 3px solid var(--sf-foco); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 5px;
  border: 1.5px solid var(--sf-line); border-radius: 999px; background: var(--sf-white);
  font-size: 14px; font-weight: 600;
}
.chip:hover { border-color: var(--sf-sky); }
.chip:focus-visible { outline: 3px solid var(--sf-foco); outline-offset: 2px; }
.bk {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--sf-blue);
  font-size: 11px; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.bank-results { list-style: none; margin: 0; padding: 6px; max-height: 220px; overflow: auto; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-white); }
.bank-results:empty { display: none; }
.bank-results li + li { margin-top: 4px; }
.bank-resultado { width: 100%; border: 0; border-radius: 10px; background: none; justify-content: flex-start; }
.bank-resultado:hover { background: var(--sf-soft); }

/* src/telas/telas.css */
/* CSS das telas (T1..T9, E*): textos, cartões, selos, avisos e vínculo. Cores e tamanhos vêm de tokens.css; botões e campos ficam em componentes/. 390 px primeiro, sem largura fixa acima de 480 px e sem scroll horizontal. */

.titulo { display: block; margin: 6px 0 8px; }
.subtitulo { margin: 0 0 16px; font-size: 17px; line-height: 1.4; color: var(--sf-muted); }
.texto-aprovado { margin: 6px 0 10px; font-size: 26px; line-height: 1.2; color: var(--sf-navy); }
@media (min-width: 768px) {
  .subtitulo { font-size: 18px; }
  .texto-aprovado { font-size: 30px; }
}

/* Selos das conquistas: a conquista aparece no toast da página (protótipo); os selos ficam no DOM só para o leitor de tela (aria-live),
   na ordem em que acontecem, sem ocupar lugar na tela. */
.selos {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.selo {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 999px; background: var(--sf-ok-soft); color: var(--sf-ok-texto);
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  animation: sf-selo-entra 360ms var(--sf-ease-pop) both;
}

/* Selo do contrato pronto (T8) e resumo da oferta logo abaixo. */
.selo-contrato { margin-bottom: 6px; }
.resumo { margin: 4px 0 14px; font-size: 16px; font-weight: 700; color: var(--sf-navy); font-variant-numeric: tabular-nums; }

/* Passos de T8 e de T9: lista numerada, texto em --sf-ink. */
.guia { margin: 0 0 18px; padding-left: 22px; font-size: 15px; line-height: 1.45; color: var(--sf-ink); }
.guia li { margin: 0 0 6px; padding-left: 4px; }
.guia li::marker { color: var(--sf-blue); font-weight: 700; }

/* Ações: uma coluna, botão primário em cima e o secundário logo abaixo, com 12 px entre eles. */
.acoes { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.acoes:empty { display: none; }

/* Avisos e rodapés: o antigolpe e a privacidade ficam em 13 px, nunca em caixa alta. */
.aviso { min-height: 0; margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--sf-err); }
.aviso:empty { display: none; }
.aviso-contato { margin: 14px 0 4px; font-size: 13px; line-height: 1.4; color: var(--sf-muted); }
.aviso-titularidade { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--sf-muted); }
.rodape-antigolpe, .rodape-privacidade { margin-top: 16px; font-size: 13px; line-height: 1.4; color: var(--sf-muted); }
.consentimento { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--sf-muted); }
.microcopia.rodape-privacidade { color: var(--sf-muted); }

/* Relógio de T7b e T9 (contagem regressiva). Números tabulares para não tremer. */
.relogio { margin: 10px 0 2px; font-size: 40px; line-height: 1; font-weight: 800; color: var(--sf-navy); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.numero-contato { margin: 4px 0 0; font-size: 18px; font-weight: 800; color: var(--sf-navy); font-variant-numeric: tabular-nums; }

/* Cartões: liberação (T7b, "pode fechar"), cabeçalho da oferta e linha de ajuste (T3, T5). */
.card-folha-corpo { margin: 0; }
.card-liberacao {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--sf-leaf-sm);
  background: var(--sf-ok-soft); color: var(--sf-ok-texto); font-size: 15px; line-height: 1.45; font-weight: 600;
}
.card-liberacao:empty { display: none; }
/* T4 muita procura (card do limite do dia) e widget do Turnstile na T1 (Ruling 95). */
.bloco-teto { margin-top: 14px; }
.card-teto {
  padding: 14px 16px; margin-bottom: 12px; border-radius: var(--sf-leaf-sm);
  background: var(--sf-warn-soft); color: var(--sf-ink); font-size: 15px; line-height: 1.45;
}
.verificacao { min-height: 65px; margin: 14px 0 0; }
.card-oferta-linha { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; font-size: 15px; color: var(--sf-ink); }
.card-oferta-linha span:last-child { font-weight: 700; color: var(--sf-navy); font-variant-numeric: tabular-nums; }
.chip-ajuste {
  display: inline-block; margin: 0 0 8px; padding: 4px 10px; border-radius: 999px;
  background: var(--sf-warn-soft); color: var(--sf-warn); font-size: 12px; font-weight: 700;
}

/* Bancos escolhidos (T5/T6) e titular da conta: uma linha, nome e número em negrito. */
.banco-escolhido { font-weight: 700; color: var(--sf-navy); }
.titular { margin: 4px 0 0; font-size: 14px; color: var(--sf-ink); }
.nome-completo { margin: 2px 0 0; font-size: 13px; color: var(--sf-muted); word-break: break-word; }
.motivo { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--sf-muted); }
.conta { display: block; margin-top: 4px; font-size: 14px; color: var(--sf-ink); }

/* Campo com erro: rótulo em --sf-err. A borda e aria-invalid já vêm de componentes/campo.css. */
.campo.campo-com-erro .campo-rotulo { color: var(--sf-err); }

/* Vínculo (T3): cartão com empresa e CNPJ mascarados. Só aparece com vínculo ativo sem desligamento. */
.vinculo-card {
  margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--sf-line); border-radius: var(--sf-leaf-sm);
  background: var(--sf-white); box-shadow: var(--sf-shadow-card);
}
.vinculo-titulo { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--sf-blue); }
.vinculo-empresa { margin: 0; font-size: 17px; font-weight: 800; color: var(--sf-navy); }
.vinculo-cnpj, .vinculo-tempo { margin: 2px 0 0; font-size: 13px; color: var(--sf-muted); font-variant-numeric: tabular-nums; }

/* Offline (E8): aviso de sem conexão em cartão, com o que o cliente pode fazer. */
/* Chip da etapa na E7 ("Você parou em: ..."). */
.chip-etapa {
  display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px;
  background: var(--sf-navy); color: #fff; font-size: 13px; font-weight: 700;
}

/* E8 (UX §E8): toast fixo no topo do card, acima do conteúdo; o campo digitado segue embaixo, intacto. */
.toast-sem-conexao {
  position: sticky; top: 8px; z-index: 5; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--sf-leaf-sm);
  background: var(--sf-warn-soft); color: var(--sf-ink); font-size: 14px; line-height: 1.4; font-weight: 600;
}

/* Só transform: a entrada não mexe em opacidade, então o contraste do selo é o do token (axe mede a cor em qualquer instante). */
@keyframes sf-selo-entra {
  from { transform: translateY(6px) scale(.9); }
  to { transform: none; }
}

/* Texto só para leitor de tela: fica fora da tela mas continua no DOM e na árvore de acessibilidade. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .selo { animation: none; }
}

/* T1 (protótipo): título e subtítulo dentro do card branco, botão e rodapé logo abaixo, com 14 px entre os blocos. */
.tela-cartao { display: flex; flex-direction: column; gap: 14px; }
.eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--sf-blue); }
.titulo-cartao { margin: 0 0 8px; font-size: 26px; line-height: 1.15; font-weight: 800; color: var(--sf-navy); letter-spacing: -.01em; }
.tela-cartao .sub { margin: 0; }
.confianca, .trava { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--sf-muted); }
.confianca { margin-top: 14px; }
.confianca .icone-linha { color: var(--sf-ok-texto); margin-top: 1px; }
.trava { align-items: center; justify-content: center; }
.icone-linha { display: inline-flex; flex: none; width: 16px; height: 16px; }
.icone-linha svg { width: 100%; height: 100%; }
.tela-cartao .acoes { gap: 10px; margin-top: 0; }
/* CPF completo: borda e marca verdes, como o protótipo (o SVG vai em data: URI, liberado em img-src) */
.campo-completo input {
  border-color: var(--sf-ok);
  background: var(--sf-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231a9e5c'/%3E%3Cpath d='m7.2 12.6 3.2 3.1 6.4-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 24px 24px;
  padding-right: 50px;
}
@media (min-width: 768px) {
  .titulo-cartao { font-size: 32px; }
  .tela-cartao .sub { font-size: 18px; }
}

/* src/telas/cartao.css */
/* Telas em cartão (T2..T9, E*): regras portadas do protótipo aprovado (styles.css), com os nomes de classe do front. 390 px primeiro.
   Contraste AA: o verde, o cinza dos passos pendentes e o do mini-check seguem os tokens do front (--sf-ok-texto, --sf-muted), um pouco mais escuros que o protótipo. */

/* ---------- texto dentro do cartão ---------- */
.card-folha .titulo { margin: 0 0 8px; }
.card-folha .subtitulo { margin: 0; font-size: 17px; line-height: 1.4; color: var(--sf-muted); }
.card-folha .nome-completo, .card-folha .fullname { margin: -2px 0 0; font-size: 13px; font-weight: 600; color: var(--sf-muted); }
.card-folha .motivo { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--sf-soft); font-size: 14px; line-height: 1.4; color: var(--sf-ink); }
.card-folha .motivo.pequeno { color: var(--sf-muted); }
.small { font-size: 13px; line-height: 1.45; }
.center { text-align: center; }
@media (min-width: 768px) {
  .card-folha .subtitulo { font-size: 18px; }
}

/* ---------- selos (badge) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 5px 10px 5px 6px;
  border-radius: var(--sf-leaf-sm); background: var(--sf-ok-soft); color: var(--sf-ok-texto); font-size: 13px; font-weight: 700;
}
.badge i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sf-ok); }
.badge i::before {
  content: ""; width: 10px; height: 10px; background: #fff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.2 7.3 8 3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.badge.aviso { background: var(--sf-warn-soft); color: var(--sf-warn); }
.badge.aviso i { background: var(--sf-warn); }
.badge.estrela { background: rgba(255, 255, 255, .14); color: #fff; }
.badge.estrela i { background: var(--sf-orange); }
.badge.estrela i::before, .badge.proximo i::before {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .8 6.2 3.6 9.2 3.8 6.9 5.8 7.6 8.8 5 7.2 2.4 8.8 3.1 5.8.8 3.8 3.8 3.6Z' fill='black'/%3E%3C/svg%3E") center/100% no-repeat;
}
.badge.proximo { background: var(--sf-sky-soft); color: var(--sf-blue); }
.badge.proximo i { background: var(--sf-orange); }

/* ---------- valor (T3, T3c, T5) ---------- */
/* Fundo sólido, não o degradê claro do protótipo: o axe não mede contraste sobre gradiente (a11y.test). */
.card-oferta { position: relative; overflow: hidden; }
.card-oferta-brilho { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); transform: translateX(-110%); pointer-events: none; }
.card-oferta-brilho.passa { animation: sf-brilho 1s ease-in-out; }
@keyframes sf-brilho { to { transform: translateX(110%); } }
.card-oferta-valor small { font-size: 22px; font-weight: 800; letter-spacing: 0; }
.card-oferta-valor.borrado { color: var(--sf-sky); filter: blur(7px); user-select: none; }
.card-oferta-valor.borrado::before { content: "R$ "; font-size: 22px; font-weight: 800; letter-spacing: 0; }
.card-oferta-valor.borrado::after { content: "0.000,00"; }
.card-oferta-linha { display: block; margin: 2px 0 0; font-size: 14px; color: var(--sf-muted); }
.card-oferta-detalhe { margin-top: 14px; }
.card-oferta-detalhe.suave { font-weight: 600; color: var(--sf-muted); }
.card-folha > .card-folha-corpo > .confianca { margin-top: 14px; }

/* ---------- confiança, trava, consentimento, antigolpe ---------- */
.confianca .icone-linha { color: var(--sf-ok-texto); }
.consentimento { margin: 0; font-size: 13px; line-height: 1.45; color: var(--sf-muted); }
.rodape-antigolpe {
  display: flex; gap: 10px; margin: 0; padding: 12px 14px; border: 1px dashed #c9d5e8; border-radius: 12px;
  background: var(--sf-white); font-size: 13px; line-height: 1.45; color: var(--sf-muted);
}
.rodape-antigolpe .icone-linha { width: 18px; height: 18px; margin-top: 1px; color: var(--sf-navy); }
.trava.centro { justify-content: center; }
.aviso-titularidade { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--sf-warn); }
.aviso-titularidade .icone-linha { margin-top: 1px; }

/* ---------- espera (T2, T4, T7) ---------- */
.espera-topo { display: flex; flex-direction: column; gap: 4px; }
.medidor { margin: 18px 0 6px; }
.medidor-barra { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: var(--sf-sky-soft); }
.medidor-barra span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--sf-grad); }
.medidor-barra span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: sf-varre 1.4s linear infinite; }
@keyframes sf-varre { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.medidor-pct { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.dica {
  display: flex; gap: 10px; align-items: center; min-height: 48px; margin: 14px 0 0; padding: 12px 14px;
  border-radius: 12px; background: var(--sf-soft); font-size: 14px; color: var(--sf-muted);
}
.dica .lampada { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 104, 28, .14); }
.dica .lampada::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-orange); }
.wa-inline { margin: 12px 0 0; text-align: center; }
.wa-inline .btn { min-height: 40px; font-size: 14px; }
.checklist li.feito .checklist-marca::after {
  content: ""; position: absolute; inset: 6px; background: #fff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.2 7.3 8 3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.checklist li.feito .checklist-marca { transform: scale(1.05); }
.resumo-conta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--sf-sky-soft); font-size: 14px; font-weight: 600; color: var(--sf-navy); }

/* ---------- T3: apta, vínculo, mini-check ---------- */
.apta { display: flex; align-items: flex-start; gap: 8px; }
.apta i { position: relative; flex: none; width: 22px; height: 22px; margin-top: 4px; border-radius: 50%; background: var(--sf-ok); }
.apta i::before {
  content: ""; position: absolute; inset: 5px; background: #fff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.2 7.3 8 3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.apta .titulo { margin: 0; font-size: 24px; }
.apta + .nome-completo { margin: 6px 0 0 30px; }
.vinculo { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--sf-line); border-radius: 12px; background: var(--sf-soft); }
.vinculo p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--sf-muted); }
.logo-neutra { display: block; width: auto; height: 36px; margin: 0 0 14px; }
.vinculo .vinculo-li { font-variant-numeric: tabular-nums; }
.vinculo .vinculo-tit { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-weight: 700; color: var(--sf-navy); }
.vinculo .vinculo-tit .icone-linha { width: 13px; height: 13px; }
.vinculo .vinculo-emp { font-weight: 700; color: var(--sf-ink); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.checklist.mini-check { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 14px; }
.checklist.mini-check li { gap: 6px; padding: 0; background: none; font-size: 13px; font-weight: 700; color: var(--sf-muted); }
.checklist.mini-check .checklist-marca { width: 18px; height: 18px; border: 2px solid #cfd8e6; }
.checklist.mini-check li.feito { color: var(--sf-ok-texto); }
.checklist.mini-check li.feito .checklist-marca { border-color: var(--sf-ok); background: var(--sf-ok); transform: none; }
.checklist.mini-check li.feito .checklist-marca::after { inset: 3px; }

/* ---------- exceções: ícone suave e razão (T3b, E4, E5, E2, E3, E12) ---------- */
.soft-ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: var(--sf-leaf-sm); background: var(--sf-sky-soft); color: var(--sf-blue); }
.soft-ico svg { width: 28px; height: 28px; }
.soft-ico.warm { background: var(--sf-warn-soft); color: var(--sf-warn); }
.razao { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--sf-soft); font-size: 14px; color: var(--sf-ink); }
.razao.pequena { font-size: 13px; line-height: 1.45; color: var(--sf-muted); }

/* ---------- T5b / E9: antes e agora ---------- */
.antes-agora-seta { background: var(--sf-orange-btn); }
.antes-agora-seta::before {
  content: ""; width: 16px; height: 16px; background: #fff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5-6 6 6-6 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* ---------- T6: conta ---------- */
.vaga-modal:empty { display: none; }
.vaga-modal { margin-top: 10px; }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.escolha-banco[hidden] { display: none; }
.titular { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--sf-sky-soft); font-size: 14px; font-weight: 600; color: var(--sf-navy); }
.titular > span:first-child { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sf-blue); }
.busca-banco {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; padding: 0 16px 0 14px; text-align: left;
  border: 2px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-white); font-size: 17px; font-weight: 600; color: var(--sf-muted);
}
.busca-banco:hover { border-color: var(--sf-sky); }
.busca-banco .icone-linha { width: 20px; height: 20px; }
.chips-rotulo { margin: 12px 0 8px; font-size: 13px; font-weight: 600; color: var(--sf-muted); }
.chip { height: 40px; min-height: 40px; transition: border-color 180ms, transform 180ms var(--sf-ease-tap); }
.chip:active { transform: scale(.96); }
.bk.bk-0 { background: #0757c8; }
.bk.bk-1 { background: #06245c; }
.bk.bk-2 { background: #2b3fd6; }
.bk.bk-3 { background: #176bd7; }
.banco-escolhido { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--sf-ok); border-radius: var(--sf-leaf-sm); background: var(--sf-ok-soft); font-weight: 400; }
.banco-escolhido:empty { display: none; }
.banco-escolhido .bk { width: 38px; height: 38px; font-size: 13px; }
.banco-escolhido b { display: block; font-size: 16px; color: var(--sf-ink); }
.banco-escolhido small { font-size: 13px; font-weight: 600; color: var(--sf-muted); }
.banco-escolhido .trocar { margin-left: auto; padding: 8px; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--sf-blue); }
.segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border: 1px solid var(--sf-line); border-radius: 14px; background: var(--sf-soft); }
.segmento .btn { height: 44px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; font-size: 16px; font-weight: 700; color: var(--sf-muted); }
.segmento .btn[aria-pressed="true"] { background: #fff; color: var(--sf-navy); box-shadow: 0 4px 12px rgba(6, 36, 92, .10); }
.grade-conta { display: grid; grid-template-columns: 1fr 1.6fr .7fr; gap: 10px; margin-top: 18px; }
.grade-conta .campo { margin-top: 0; }
.grade-conta .campo input { padding: 0 12px; }
.grade-conta .campo:last-child input { text-align: center; text-transform: uppercase; }

/* ---------- T7b: tempo e liberação ---------- */
.tempo { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--sf-muted); }
.tempo b { font-variant-numeric: tabular-nums; color: var(--sf-navy); }
.card-liberacao { margin: 14px 0 0; }

/* ---------- T8: contrato pronto ---------- */
.card-folha-hero { padding: 0; }
.hero-topo { position: relative; overflow: hidden; padding: 24px 20px 26px; background: var(--sf-grad); color: #fff; }
.hero-topo::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; border: 2px solid rgba(255, 255, 255, .12); border-radius: 80px 0 80px 0; }
.hero-topo .texto-aprovado { position: relative; z-index: 1; margin: 0; font-size: 23px; line-height: 1.3; font-weight: 800; color: #fff; }
.hero-corpo { padding: 18px 20px 20px; }
.recapitulo { display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1px solid var(--sf-line); border-radius: 14px; background: var(--sf-soft); }
.recapitulo b { font-size: 18px; letter-spacing: -.02em; color: var(--sf-navy); font-variant-numeric: tabular-nums; }
.recapitulo .parcelas { font-size: 17px; font-weight: 800; color: var(--sf-navy); font-variant-numeric: tabular-nums; }
.recapitulo span { font-size: 14px; font-weight: 600; color: var(--sf-muted); }
.como { margin: 16px 0 0; }
.como p { margin: 0 0 8px; font-weight: 800; color: var(--sf-navy); }
.guia-numerada { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.guia-numerada li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; counter-increment: passo; }
.guia-numerada li::before {
  content: counter(passo); display: grid; flex: none; place-items: center; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 8px 0 8px 0; background: var(--sf-blue); font-size: 13px; font-weight: 800; color: #fff;
}
@media (min-width: 768px) {
  .hero-topo { padding: 30px 30px 32px; }
  .hero-topo .texto-aprovado { font-size: 26px; }
  .hero-corpo { padding: 22px 30px 26px; }
}

/* ---------- T9: selfie e relógio ---------- */
.passos-selfie { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.passos-selfie li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; color: var(--sf-navy); }
.passos-selfie b { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 10px 0 10px 0; background: var(--sf-sky-soft); font-size: 14px; color: var(--sf-blue); }
.titulo-ok { display: flex; align-items: center; gap: 10px; }
.titulo-ok i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sf-ok); }
.titulo-ok i::before {
  content: ""; position: absolute; inset: 9px; background: #fff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.2 7.3 8 3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.titulo-ok .titulo { margin: 0; }
.anel { position: relative; display: grid; place-items: center; margin: 14px 0 6px; }
.anel-svg svg { display: block; width: 168px; height: 168px; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 12; }
.anel .trilho { stroke: var(--sf-sky-soft); }
.anel .arco { stroke: url(#sf-anel-grad); stroke-linecap: round; animation: sf-anel 600s linear forwards; animation-duration: inherit; }
@keyframes sf-anel { to { stroke-dashoffset: 452.4; } }
@media (prefers-reduced-motion: reduce) { .anel .arco { animation: none; } }
.anel-centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.anel-centro b { display: block; margin: 0; font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--sf-navy); font-variant-numeric: tabular-nums; }
.anel-centro span { font-size: 13px; font-weight: 600; color: var(--sf-muted); }
.prazo-destaque { margin: 6px 0 2px; font-size: 18px; font-weight: 800; text-align: center; color: var(--sf-navy); }
.prazo-nota { margin: 0; font-size: 13px; line-height: 1.45; text-align: center; color: var(--sf-muted); }
.aviso-contato-caixa { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding: 16px; border-radius: var(--sf-leaf-sm); background: var(--sf-sky-soft); }
.aviso-contato-caixa .aviso-contato { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--sf-navy); }
.aviso-contato-caixa .numero-contato { margin: 0; }

/* src/telas/movimento.css */
/* Movimento das telas: Séfi interativa (pulo, pirueta, corações, balão), confete de T8 e dica rotativa. Com prefers-reduced-motion só a expressão muda: nada se mexe. */

.sefi-wrap { position: relative; }

/* Balão da Séfi: escondido até .show; aparece em 200 ms e some ao fim da fala. */
.sefi-bubble {
  position: absolute; top: -10px; right: 6px; z-index: 2;
  padding: 6px 10px; border-radius: 14px; background: var(--sf-white); color: var(--sf-navy);
  border: 1px solid var(--sf-line); font-size: 13px; font-weight: 700;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 200ms, transform 200ms var(--sf-ease-pop);
}
.sefi-bubble.show { opacity: 1; transform: none; }

/* Coração ao tocar: sobe e some. Usa só opacidade e posição. */
.sefi-heart {
  position: absolute; left: 50%; top: 30%; z-index: 3; color: var(--sf-orange);
  font-size: 20px; line-height: 1; pointer-events: none;
  animation: sf-coracao-sobe 900ms ease-out forwards;
}

/* Toque na Séfi: pulo com achatamento (no máximo 1 a cada 1,5 s, controlado pelo JS). */
.pulo { animation: sf-pulo 600ms var(--sf-ease-pop); }

/* Cinco toques em 2 s: uma volta completa. */
.pirueta { animation: sf-pirueta 900ms var(--sf-ease-pop); }

/* Confete de T8: peças curtas caindo do topo do cartão, 1,6 s, sem bloquear o toque. */
.confete {
  position: absolute; top: -12px; z-index: 4; width: 8px; height: 12px; border-radius: 2px;
  background: var(--sf-orange); pointer-events: none;
  animation: sf-confete 1.4s ease-in forwards;
}
.confete:nth-child(3n) { background: var(--sf-blue); }
.confete:nth-child(3n + 1) { background: var(--sf-wa); width: 6px; height: 6px; border-radius: 50%; }

/* Dica rotativa de T2, T4 e T7: troca a cada 4 s com fade curto. */
.dica-texto {
  margin: 14px 0 0; min-height: 3em; font-size: 14px; line-height: 1.45; color: var(--sf-muted);
  transition: opacity var(--sf-t-tip);
}

/* Checklist um a um: cada passo entra quando o anterior fica feito (ver movimento.mjs). */
.checklist li { animation: sf-passo-entra 260ms var(--sf-ease-screen) both; }

@keyframes sf-coracao-sobe {
  from { opacity: 1; transform: translate(-50%, 0) scale(.6); }
  to { opacity: 0; transform: translate(-50%, -48px) scale(1.1); }
}
@keyframes sf-pulo {
  0% { transform: none; }
  25% { transform: scaleX(1.06) scaleY(.9); }
  55% { transform: translateY(-18px) scaleY(1.04); }
  80% { transform: translateY(0) scaleX(1.03) scaleY(.97); }
  100% { transform: none; }
}
@keyframes sf-pirueta {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes sf-confete {
  from { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  to { opacity: 0; transform: translate(24px, 420px) rotate(540deg); }
}
@keyframes sf-passo-entra {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sefi-heart { display: none; }
  .pulo { animation: none; }
  .pirueta { animation: none; }
  .confete { display: none; }
  .checklist li { animation: none; }
  .sefi-bubble { transition: none; }
  .dica-texto { transition: none; }
}