.brf-root, .brf-root * { box-sizing: border-box; }
  .brf-root { padding-top:var(--nav-h);
    --black:#000000; --panel:#282828; --mid:#646464; --light:#EBEBEB; --white:#FFFFFF;
    --champagne:#F0E6D2; --champagne-dim:rgba(240,230,210,.4);
    --radius: var(--r-2); --radius-lg:20px;
    --ease: cubic-bezier(.16,.84,.32,1);
    font-family:'Sora',sans-serif; background:var(--white); color:var(--panel);
    overflow-x:hidden; line-height:1.55; position:relative;
    min-height:100svh; display:flex; flex-direction:column;
  }
  .brf-root p { color:var(--mid); font-weight:300; margin:0; }
  .brf-root h1,.brf-root h2,.brf-root h3 { font-weight:700; letter-spacing:-.02em; margin:0; color:var(--black); }
  .brf-mono { font-family:'JetBrains Mono',monospace; }

  /* ---------- TOPO: progresso + contexto ---------- */
  .brf-topbar { position:sticky; top:var(--nav-h); z-index:20; flex-shrink:0; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--light); }
  .brf-topbar-inner { max-width:760px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:16px; }
  .brf-brand { font-size:12.5px; font-weight:700; letter-spacing:.08em; color:var(--black); white-space:nowrap; }
  .brf-progress-track { flex:1; height:3px; background:var(--light); border-radius: var(--r-2); overflow:visible; position:relative; }
  .brf-progress-fill { position:absolute; inset:0 auto 0 0; width:0%; background:var(--black); border-radius: var(--r-2); transition:width .7s var(--ease); }
  .brf-progress-fill::after { content:''; position:absolute; right:-3px; top:50%; width:7px; height:7px; border-radius:50%; background:var(--champagne); transform:translateY(-50%);
    box-shadow:0 0 0 4px var(--champagne-dim); animation:brf-pulse-dot 2s ease-in-out infinite; }
  @keyframes brf-pulse-dot { 0%,100% { box-shadow:0 0 0 4px var(--champagne-dim); } 50% { box-shadow:0 0 0 8px rgba(240,230,210,.12); } }
  .brf-step-count { font-size:11.5px; color:var(--mid); white-space:nowrap; font-variant-numeric: tabular-nums; }
  @media (max-width:480px){ .brf-topbar-inner{ padding:13px 18px; gap:11px; } .brf-brand{ display:none; } }

  /* ---------- CANVAS AMBIENTE (constelação + orbes de gradiente com parallax) ---------- */
  .brf-ambient { position:fixed; inset:0; height:100vh; height:100dvh; z-index:0; pointer-events:none; opacity:1; }
  .brf-ambient canvas { width:100%; height:100%; display:block; }
  /* ---------- PALCO ---------- */
  .brf-stage { position:relative; z-index:1; flex:1;
    display:flex; align-items:center; justify-content:center; padding:40px 24px; }
  .brf-card { max-width:640px; width:100%; position:relative; background:var(--white); margin:auto;
    border:1px solid var(--light); border-radius:var(--radius-lg); padding:44px 40px; box-shadow:0 34px 70px -48px rgba(0,0,0,.16); }
  @media (max-width:560px){ .brf-card{ padding:32px 22px; border-radius:var(--radius); } }
  .brf-eyebrow { font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--mid); font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:8px; }
  .brf-eyebrow::before { content:''; width:16px; height:1.5px; background:var(--black); display:inline-block; }
  .brf-question { font-size:clamp(22px,3.4vw,32px); line-height:1.32; margin-bottom:14px; min-height:1.28em; }
  .brf-question .brf-char { display:inline-block; }
  .brf-hint { font-size:14.5px; line-height:1.6; margin-top:14px; margin-bottom:4px; max-width:480px; }

  /* transição entre etapas */
  .brf-step { display:none; opacity:0; transform:translateY(16px) scale(.985); transition:opacity .5s var(--ease), transform .5s var(--ease); will-change:opacity, transform; }
  .brf-step.brf-active { display:block; }
  .brf-step.brf-in { opacity:1; transform:translateY(0) scale(1); }
  .brf-step.brf-out { opacity:0; transform:translateY(-14px) scale(.985); }

  /* ---------- OPÇÕES: escolha única (chips grandes) ---------- */
  .brf-options { display:flex; flex-direction:column; gap:10px; margin-top:32px; }
  .brf-option { position:relative; overflow:hidden; isolation:isolate; text-align:left; cursor:pointer;
    border:1.5px solid var(--light); border-radius:var(--radius); padding:18px 20px; background:var(--white);
    display:flex; align-items:center; justify-content:space-between; gap:14px; will-change:transform;
    transition:border-color .35s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); }
  .brf-option::before { content:''; position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none;
    background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(0,0,0,.06), transparent 70%); transition:opacity .35s var(--ease); }
  .brf-option::after { content:''; position:absolute; left:0; top:0; bottom:0; width:2.5px; background:var(--champagne); transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--ease); }
  .brf-option:hover::before { opacity:1; }
  .brf-option:hover { border-color:var(--mid); transform:translateY(-2px); box-shadow:0 16px 32px -24px rgba(0,0,0,.22); }
  .brf-option:hover::after { transform:scaleY(1); transform-origin:top; }
  .brf-option.brf-selected { border-color:var(--black); background:var(--black); box-shadow:0 20px 40px -20px rgba(0,0,0,.4); }
  .brf-option.brf-selected::after { transform:scaleY(1); }
  .brf-option.brf-selected .brf-opt-label,.brf-option.brf-selected .brf-opt-sub { color:var(--white); }
  .brf-opt-label { font-size:15.5px; font-weight:600; color:var(--black); transition:color .3s var(--ease); display:block; }
  .brf-opt-sub { font-size:12.5px; color:var(--mid); margin-top:4px; transition:color .3s var(--ease); display:block; line-height:1.5; }
  .brf-opt-check { width:22px; height:22px; border-radius:50%; border:1.5px solid var(--light); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; transition:all .4s var(--ease); }
  .brf-option.brf-selected .brf-opt-check { border-color:var(--champagne); background:var(--champagne); transform:scale(1.08); }
  .brf-opt-check svg { width:11px; height:11px; opacity:0; transform:scale(.4); transition:all .3s var(--ease) .05s; }
  .brf-option.brf-selected .brf-opt-check svg path { stroke:var(--black); }
  .brf-option.brf-selected .brf-opt-check svg { opacity:1; transform:scale(1); }

  /* ---------- ESCALA 1–5 ---------- */
  .brf-scale { display:flex; gap:8px; margin-top:36px; }
  .brf-scale-btn { flex:1; aspect-ratio:1; border-radius:var(--radius); border:1.5px solid var(--light); background:var(--white);
    font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:500; color:var(--panel); cursor:pointer; will-change:transform;
    position:relative; overflow:hidden; isolation:isolate;
    transition:border-color .35s var(--ease), transform .4s var(--ease), background .35s var(--ease), color .3s var(--ease), box-shadow .4s var(--ease); }
  .brf-scale-btn::before { content:''; position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none;
    background:radial-gradient(100px circle at var(--mx,50%) var(--my,50%), rgba(0,0,0,.08), transparent 70%); transition:opacity .3s var(--ease); }
  .brf-scale-btn::after { content:''; position:absolute; bottom:6px; left:50%; width:4px; height:4px; border-radius:50%; background:var(--light); transform:translateX(-50%); transition:all .35s var(--ease); }
  .brf-scale-btn:hover::before { opacity:1; }
  .brf-scale-btn:hover { border-color:var(--mid); transform:translateY(-3px); }
  .brf-scale-btn.brf-selected { background:var(--black); border-color:var(--black); color:var(--white); transform:translateY(-4px); box-shadow:0 18px 36px -16px rgba(0,0,0,.5); }
  .brf-scale-btn.brf-selected::after { background:var(--champagne); width:14px; }
  .brf-scale-labels { display:flex; justify-content:space-between; margin-top:14px; font-size:11.5px; color:var(--mid); }
  @media (max-width:420px){ .brf-scale{ gap:6px; } .brf-scale-btn{ font-size:14px; border-radius:calc(var(--radius) - 2px); } }

  /* ---------- CHIPS MÚLTIPLA ESCOLHA ---------- */
  .brf-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
  .brf-chip { position:relative; overflow:hidden; isolation:isolate; cursor:pointer; border:1.5px solid var(--light); border-radius: var(--r-pill); will-change:transform;
    padding:11px 20px; font-size:14px; font-weight:500; color:var(--panel); background:var(--white);
    display:flex; align-items:center; gap:8px; transition:all .3s var(--ease); }
  .brf-chip::before { content:''; position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none;
    background:radial-gradient(100px circle at var(--mx,50%) var(--my,50%), rgba(0,0,0,.09), transparent 70%); transition:opacity .3s var(--ease); }
  .brf-chip:hover::before { opacity:1; }
  .brf-chip:hover { border-color:var(--mid); transform:translateY(-2px); }
  .brf-chip.brf-selected { background:var(--black); border-color:var(--black); color:var(--white); box-shadow:0 14px 28px -16px rgba(0,0,0,.5); }
  .brf-chip-dot { width:6px; height:6px; border-radius:50%; background:var(--light); transition:all .35s var(--ease); flex-shrink:0; }
  .brf-chip.brf-selected .brf-chip-dot { background:var(--champagne); transform:scale(1.4); box-shadow:0 0 8px rgba(240,230,210,.6); }

  /* ---------- BOTÃO COPIAR (tela final) ---------- */
  .brf-copy-note { font-size:11.5px; color:var(--mid); margin-top:14px; display:flex; align-items:center; justify-content:center; gap:6px; opacity:0; transition:opacity .25s var(--ease); }
  .brf-copy-note.brf-show { opacity:1; }

  /* ---------- INPUTS DE TEXTO ---------- */
  .brf-field { margin-top:32px; }
  .brf-input, .brf-textarea { width:100%; border:1.5px solid var(--light); border-radius:var(--radius); padding:15px 16px;
    font-family:'Sora',sans-serif; font-size:15px; color:var(--black); background:var(--white); outline:none;
    transition:border-color .35s var(--ease), box-shadow .35s var(--ease); }
  .brf-input:focus, .brf-textarea:focus { border-color:var(--black); box-shadow:0 0 0 3px var(--champagne-dim); }
  .brf-textarea { min-height:120px; resize:vertical; line-height:1.6; }
  .brf-field-note { font-size:12px; color:var(--mid); margin-top:8px; }

  /* ---------- NAVEGAÇÃO ---------- */
  .brf-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; }
  .brf-btn { font-family:'Sora',sans-serif; font-weight:600; font-size:14px; padding:14px 26px; border-radius: var(--r-pill);
    cursor:pointer; border:1.5px solid transparent; display:inline-flex; align-items:center; gap:9px;
    position:relative; overflow:hidden; isolation:isolate;
    transition:transform .4s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .3s var(--ease), box-shadow .4s var(--ease), opacity .3s; }
  .brf-btn::before { content:''; position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none; border-radius:inherit;
    background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 70%); transition:opacity .35s var(--ease); }
  .brf-btn:hover::before { opacity:1; }
  .brf-btn:hover { transform:translateY(-2px); }
  .brf-btn-primary { background:var(--black); color:var(--white); }
  .brf-btn-primary:hover { background:var(--panel); box-shadow:0 16px 32px -16px rgba(0,0,0,.4); }
  .brf-btn-primary:disabled { opacity:.32; cursor:not-allowed; transform:none; box-shadow:none; }
  .brf-btn-primary:disabled::before { display:none; }
  .brf-btn-ghost { background:rgba(0,0,0,.02); color:var(--panel); border-color:var(--light); padding:14px 20px; }
  .brf-btn-ghost::before { background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%), rgba(0,0,0,.06), transparent 70%); }
  .brf-btn-ghost:hover { border-color:var(--mid); }
  .brf-kbd-hint { font-size:11.5px; color:var(--mid); display:flex; align-items:center; gap:6px; }
  .brf-kbd { font-family:'JetBrains Mono',monospace; border:1px solid var(--light); border-radius:5px; padding:2px 6px; font-size:10.5px; }
  @media (max-width:560px){ .brf-kbd-hint{ display:none; } }

  /* ---------- TELA FINAL ---------- */
  .brf-done { text-align:center; }
  .brf-done-icon { width:64px; height:64px; border-radius:50%; background:var(--black); display:flex; align-items:center; justify-content:center; margin:0 auto 28px;
    box-shadow:0 0 0 6px var(--champagne-dim); }
  .brf-done-icon svg path { stroke:var(--champagne); }
  .brf-done-icon svg { width:26px; height:26px; }
  .brf-summary { text-align:left; border:1px solid var(--light); border-radius:var(--radius-lg); padding:24px; margin-top:32px; background:rgba(0,0,0,.015); }
  .brf-summary-row { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--light); font-size:13.5px; }
  .brf-summary-row:last-child { border-bottom:none; }
  .brf-summary-k { color:var(--mid); flex-shrink:0; }
  .brf-summary-v { color:var(--black); font-weight:500; text-align:right; }

  /* ---------- RODAPÉ MICROCOPY ---------- */
  .brf-footnote { text-align:center; font-size:11.5px; color:var(--mid); padding:14px 20px; flex-shrink:0; }

  @media (max-width:700px){ .brf-stage{ padding:32px 18px 120px; } }

/* ==========================================================================
   DISPOSITIVOS

   16px nos campos não é escolha estética: abaixo disso o Safari do iPhone
   dá zoom sozinho quando o campo recebe foco, a página salta e o formulário
   passa a impressão de quebrado. É o piso que evita o salto — e vale só na
   largura de celular, para o desktop manter a escala desenhada.
   ========================================================================== */
@media (max-width: 820px) {
  /* O seletor precisa empatar em especificidade com o do componente
     (.std-field input vale 0,1,1 e vencia "input" sozinho). O seletor por
     atributo empata e, vindo depois no arquivo, ganha — e cobre qualquer
     prefixo de campo que o site venha a ter. */
  [class*="-field"] input,
  [class*="-field"] select,
  [class*="-field"] textarea,
  input, textarea, select { font-size: 16px; }
}