/* ============================================================
   V4 — Página exclusiva de Quiz | Dra. Maria Clara Braga
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg-1:#F4EEE4; --bg-2:#EDE4D5; --card:#FFFFFF;
  --ink:#1C1B18; --muted:#6B645A; --line:rgba(28,27,24,0.10);
  --gold:#C9A86C; --gold-dk:#A88840;
  --green:#1FA45A; --green-dk:#178045;
  --radius:18px; --ease:0.22s cubic-bezier(.2,.7,.2,1);
}
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter',system-ui,sans-serif; color:var(--ink); line-height:1.6;
  min-height:100vh; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 500px at 50% -8%, rgba(201,168,108,0.18), transparent 60%),
    linear-gradient(170deg, var(--bg-1), var(--bg-2));
  background-attachment:fixed;
}
img { display:block; max-width:100%; height:auto; }
button { cursor:pointer; font-family:inherit; }
a { color:var(--gold-dk); }

.page { width:min(620px,100%); margin:0 auto; padding:1.5rem 1.25rem 2.5rem; display:flex; flex-direction:column; gap:1.5rem; }

/* Topbar / autoridade */
.topbar { display:flex; justify-content:center; padding-top:0.5rem; }
.brand { display:flex; align-items:center; gap:0.7rem; }
.brand__icon { width:44px; height:44px; object-fit:contain; }
.brand__txt { display:flex; flex-direction:column; line-height:1.2; }
.brand__txt strong { font-size:0.92rem; font-weight:600; color:var(--ink); }
.brand__txt span { font-size:0.72rem; color:var(--muted); letter-spacing:0.01em; }

/* Intro */
.intro { text-align:center; }
.eyebrow { font-size:0.7rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-dk); margin-bottom:0.8rem; }
.intro h1 {
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
  font-size:clamp(1.85rem,5.5vw,2.6rem); line-height:1.12; letter-spacing:-0.01em;
  color:var(--ink); margin-bottom:0.9rem;
}
.lead { font-size:clamp(0.95rem,2.3vw,1.05rem); color:var(--muted); max-width:30rem; margin:0 auto; }
.trust { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem 0.75rem; margin-top:1.25rem; }
.trust li { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.76rem; font-weight:600; color:var(--ink);
  background:rgba(255,255,255,0.7); border:1px solid var(--line); padding:0.4rem 0.75rem; border-radius:99px; }
.trust svg { width:15px; height:15px; color:var(--gold-dk); }

/* Quiz card */
.quizcard { display:flex; flex-direction:column; gap:0.85rem; }
.quiz {
  background:var(--card); border-radius:var(--radius); padding:1.5rem 1.5rem 1.75rem;
  box-shadow:0 12px 40px rgba(28,27,24,0.12), 0 2px 8px rgba(28,27,24,0.06);
  border:1px solid rgba(255,255,255,0.6);
}
.quiz__head { display:flex; align-items:center; gap:0.85rem; margin-bottom:1.35rem; }
.quiz__back { background:none; border:none; color:var(--muted); font-size:0.85rem; padding:0; }
.quiz__progress { flex:1; height:7px; background:#ECE5D9; border-radius:99px; overflow:hidden; }
.quiz__bar { display:block; height:100%; width:33%; border-radius:99px; transition:width 0.4s var(--ease);
  background:linear-gradient(90deg,var(--gold),var(--green)); }
.quiz__count { font-size:0.74rem; font-weight:600; color:var(--muted); white-space:nowrap; }

.quiz__step { display:none; }
.quiz__step.is-active { display:block; animation:stepIn 0.32s var(--ease); }
@keyframes stepIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.quiz__q { font-family:'Inter',sans-serif; font-size:1.2rem; font-weight:700; line-height:1.25; color:var(--ink); margin-bottom:0.5rem; }
.quiz__hint { font-size:0.88rem; color:var(--muted); line-height:1.55; margin-bottom:1.2rem; }
.quiz__options { display:flex; flex-direction:column; gap:0.6rem; }
.quiz__option {
  position:relative; width:100%; text-align:left; padding:1rem 2.4rem 1rem 1.05rem;
  border:1.5px solid var(--line); border-radius:13px; background:#fff; font-size:0.95rem; color:var(--ink);
  transition:border-color var(--ease), background var(--ease), box-shadow var(--ease), transform var(--ease);
}
.quiz__option::after { content:''; position:absolute; right:1rem; top:50%; width:18px; height:18px; margin-top:-9px;
  border:1.5px solid var(--line); border-radius:50%; transition:all var(--ease); }
.quiz__option:hover { border-color:var(--green); transform:translateY(-1px); }
.quiz__option.is-selected { border-color:var(--green); background:rgba(31,164,90,0.07); font-weight:600; box-shadow:0 0 0 3px rgba(31,164,90,0.16); }
.quiz__option.is-selected::after { border-color:var(--green); background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }

.quiz__input { width:100%; padding:0.95rem 1.05rem; border:1.5px solid var(--line); border-radius:13px; font-size:1rem; font-family:inherit; margin-bottom:1rem; }
.quiz__input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(31,164,90,0.14); }
.quiz__submit {
  width:100%; display:flex; align-items:center; justify-content:center; gap:0.6rem;
  padding:1.1rem 1.5rem; border:none; border-radius:13px; background:var(--green); color:#fff;
  font-size:1rem; font-weight:700; box-shadow:0 8px 22px rgba(31,164,90,0.32); transition:background var(--ease), transform var(--ease);
}
.quiz__submit:hover { background:var(--green-dk); transform:translateY(-1px); }
.quiz__err { font-size:0.82rem; color:#B03020; margin-top:0.7rem; text-align:center; }

.reassure { text-align:center; font-size:0.82rem; color:var(--muted); line-height:1.55; max-width:30rem; margin:0 auto; padding:0 0.5rem; }

/* Footer */
.foot { text-align:center; border-top:1px solid var(--line); padding-top:1.25rem; }
.foot__disc { font-size:0.72rem; color:var(--muted); line-height:1.6; max-width:32rem; margin:0 auto 0.6rem; }
.foot__links { font-size:0.76rem; }
.foot__links a { text-decoration:none; }

@media (max-width:480px) {
  .page { padding:1.1rem 1rem 2rem; gap:1.25rem; }
  .quiz { padding:1.25rem 1.15rem 1.5rem; border-radius:16px; }
}

/* Botão "Continuar" (etapas de input/apresentação) */
.quiz__next {
  width:100%; padding:1.05rem 1.5rem; border:none; border-radius:13px;
  background:var(--ink); color:#fff; font-size:0.98rem; font-weight:600; margin-top:0.25rem;
  transition:background var(--ease), transform var(--ease);
}
.quiz__next:hover { background:#000; transform:translateY(-1px); }

/* Etapa "Quem vai analisar" */
.quiz__author { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.35rem; margin-bottom:1.4rem; }
.quiz__author img { width:104px; height:104px; border-radius:50%; object-fit:cover; object-position:top center;
  border:3px solid #fff; box-shadow:0 8px 22px rgba(28,27,24,0.2); }
.quiz__author-name { font-weight:700; font-size:1.05rem; color:var(--ink); margin-top:0.4rem; }
.quiz__author-oab { font-size:0.76rem; color:var(--muted); letter-spacing:0.01em; }
.quiz__author-bio { font-size:0.88rem; color:var(--muted); line-height:1.6; margin-top:0.5rem; max-width:24rem; }

:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }