/* ===== Femme Imperium — Formulário Diagnóstico (MUD) ===== */
/* Fontes Lufga (woff2 embutidas localmente) */
@font-face { font-family:'Lufga'; font-weight:300; font-style:normal; font-display:swap; src:url('../fonts/Lufga-Light.woff2') format('woff2'); }
@font-face { font-family:'Lufga'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/Lufga-Regular.woff2') format('woff2'); }
@font-face { font-family:'Lufga'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/Lufga-Medium.woff2') format('woff2'); }
@font-face { font-family:'Lufga'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/Lufga-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Lufga'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/Lufga-Bold.woff2') format('woff2'); }

:root{
  --wine:#8B1020; --wine-deep:#5E0A16; --wine-tint:#F6EAEC;
  --ink:#2B2B2B; --muted:#6E6E6E; --line:#E7E1DD;
  --paper:#FBF8F5; --paper-soft:#FAF6F3; --card:#FFFFFF;
  --ok:#2E7D5B; --shadow:0 18px 50px -28px rgba(94,10,22,.45);
  --radius:16px; --radius-sm:12px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Lufga',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); line-height:1.55; font-weight:400;
  background:
    radial-gradient(1100px 520px at 50% -8%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #FCF9F7 0%, var(--paper) 42%, #F4ECE9 100%);
  min-height:100svh;
}
.wrap{ width:100%; max-width:640px; margin:0 auto; padding:22px 18px 64px; }

/* ---- cabeçalho ---- */
.fi-top{ text-align:center; padding:8px 0 18px; }
.fi-logo{ height:26px; width:auto; }
.fi-rule{ width:38px; height:2px; background:var(--wine); border:0; margin:13px auto 0; border-radius:2px; }

/* ---- barra de progresso ---- */
.progress{ margin:0 2px 16px; }
.progress[hidden]{ display:none; }
.progress-meta{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; text-transform:uppercase; }
.progress-meta b{ color:var(--wine); font-weight:600; }
.progress-track{ height:6px; background:#EFE6E2; border-radius:99px; overflow:hidden; }
.progress-fill{ height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--wine), var(--wine-deep)); transition:width .35s ease; }

/* ---- card ---- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 22px; }
.panel[hidden]{ display:none; }

.kicker{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--wine); font-weight:600; }
h1.title{ font-size:25px; line-height:1.15; color:var(--wine-deep); font-weight:600; letter-spacing:-.01em; margin:9px 0 6px; }
h2.step-title{ font-size:21px; line-height:1.2; color:var(--wine-deep); font-weight:600; margin:4px 0 4px; }
/* foco programático (acessibilidade) sem caixa visível em títulos não interativos */
.step-title:focus, .result .kicker:focus{ outline:none; }
.lead{ color:var(--muted); font-size:15.5px; margin:0 0 4px; }

/* ---- intro ---- */
.intro p{ font-size:15.5px; color:#3a3a3a; margin:12px 0; }
.intro .note{ font-size:13.5px; color:var(--muted); background:var(--paper-soft);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; margin-top:16px; }

/* ---- perguntas ---- */
.question{ margin:20px 0 0; }
.question:first-child{ margin-top:14px; }
.q-label{ display:block; font-weight:500; font-size:16px; color:var(--ink); margin-bottom:11px; }
.q-label .req{ color:var(--wine); margin-left:2px; }
.q-hint{ font-size:13px; color:var(--muted); margin:-4px 0 11px; }

.options{ display:flex; flex-direction:column; gap:9px; }
.opt{ position:relative; display:flex; align-items:center; gap:12px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; border-radius:var(--radius-sm);
  padding:13px 15px; min-height:54px; transition:border-color .15s, background .15s, box-shadow .15s; }
.opt:hover{ border-color:#D9B7BD; }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt .box{ flex:0 0 auto; width:21px; height:21px; border:1.7px solid #C9BEC0; border-radius:50%;
  display:grid; place-items:center; transition:.15s; }
.opt.multi .box{ border-radius:6px; }
.opt .box::after{ content:''; width:10px; height:10px; border-radius:50%; transform:scale(0); transition:transform .15s;
  background:var(--wine); }
.opt.multi .box::after{ border-radius:2px; width:11px; height:11px; }
.opt .txt{ font-size:15px; color:#34302f; }
.opt:has(input:checked){ border-color:var(--wine); background:var(--wine-tint); }
.opt:has(input:checked) .box{ border-color:var(--wine); }
.opt:has(input:checked) .box::after{ transform:scale(1); }
.opt:has(input:focus-visible){ box-shadow:0 0 0 3px rgba(139,16,32,.18); }
.opt.disabled{ opacity:.5; cursor:not-allowed; }

/* campo "Outro" */
.other-wrap{ margin-top:9px; }
.other-wrap[hidden]{ display:none; }

/* inputs de texto */
input[type=text], input[type=email], input[type=tel], textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:13px 14px; transition:border-color .15s, box-shadow .15s; }
textarea{ min-height:92px; resize:vertical; line-height:1.5; }
input::placeholder, textarea::placeholder{ color:#A9A0A0; }
input:focus, textarea:focus{ outline:none; border-color:var(--wine); box-shadow:0 0 0 3px rgba(139,16,32,.14); }

/* erro */
.err{ display:none; color:var(--wine); font-size:13px; margin-top:7px; font-weight:500; }
.question.has-error .err{ display:block; }
.question.has-error .opt, .question.has-error input, .question.has-error textarea{ border-color:var(--wine); }

/* consentimento */
.consent{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.consent .opt{ align-items:flex-start; min-height:0; }
.consent .opt .box{ margin-top:1px; }
.consent .txt{ font-size:13.5px; color:#444; line-height:1.5; }
.privacy{ font-size:12.5px; color:var(--muted); margin-top:12px; line-height:1.5; }

/* ---- navegação ---- */
.nav{ display:flex; gap:10px; margin-top:24px; }
.btn{ font-family:inherit; font-size:16px; font-weight:600; border-radius:99px; padding:14px 22px;
  cursor:pointer; border:1.5px solid transparent; transition:transform .06s, box-shadow .2s, background .2s; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ flex:1; background:linear-gradient(180deg, var(--wine), var(--wine-deep)); color:#fff;
  box-shadow:0 12px 26px -14px rgba(139,16,32,.85); }
.btn-primary:hover{ box-shadow:0 16px 30px -12px rgba(139,16,32,.85); }
.btn-primary[disabled]{ opacity:.6; cursor:default; box-shadow:none; }
.btn-ghost{ background:#fff; color:var(--wine-deep); border-color:var(--line); }
.btn-ghost:hover{ border-color:#D9B7BD; }
.btn-ghost[hidden]{ display:none; }

/* ---- loading ---- */
.loading{ text-align:center; padding:40px 10px; }
.spinner{ width:38px; height:38px; margin:0 auto 18px; border-radius:50%;
  border:3px solid var(--wine-tint); border-top-color:var(--wine); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading p{ color:var(--muted); font-size:15px; }

/* ---- resultado ---- */
.result{ }
.result .kicker{ text-align:center; display:block; }
.result-msg{ margin:16px 0 26px; }
.result-msg p{ font-size:17.5px; line-height:1.72; color:#332f2e; font-weight:300; margin:0 0 14px; }
.result-msg p:last-child{ margin-bottom:0; }
.result-cta{ text-align:center; }
.result-cta .btn-primary{ display:inline-block; flex:none; min-width:240px; text-decoration:none; }
.result-foot{ text-align:center; color:var(--muted); font-size:13px; margin-top:16px; }

/* ---- rodapé ---- */
.fi-foot{ text-align:center; margin-top:22px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:#A99FA0; }

/* ---- fallback global de erro ---- */
.form-error{ display:none; background:var(--wine-tint); border:1px solid #ECD0D5; color:var(--wine-deep);
  border-radius:var(--radius-sm); padding:12px 14px; font-size:14px; margin-top:16px; }
.form-error.show{ display:block; }

@media (min-width:560px){
  .wrap{ padding:30px 22px 72px; }
  .card{ padding:32px 30px; }
  h1.title{ font-size:28px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}