:root {
  color-scheme: light;
  --ink: #13233a;
  --muted: #5d6b7d;
  --surface: #ffffff;
  --canvas: #f3f7fb;
  --line: #d9e3ee;
  --brand: #1768d3;
  --brand-dark: #0d4fa8;
  --accent: #15a38c;
  --danger: #b42318;
  --violet: #6d4aff;
  --warm: #ffb547;
  --shadow: 0 22px 60px rgb(31 62 96 / 13%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 10% 5%, rgb(109 74 255 / 12%), transparent 28rem),
    radial-gradient(circle at 90% 12%, rgb(21 163 140 / 14%), transparent 24rem),
    linear-gradient(180deg, #edf5ff 0, var(--canvas) 42%, #fff 100%);
  color: var(--ink);
  min-height: 100vh;
}
button, input, textarea { font: inherit; }
button, .choice { min-height: 44px; }
:focus-visible { outline: 3px solid #f2a900; outline-offset: 3px; }
[hidden] { display: none !important; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  max-width: 960px;
  margin: 0 auto;
}
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: .65rem; }
.brand-mark {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--brand), var(--accent));
  font-weight: 800;
  box-shadow: 0 8px 24px rgb(23 104 211 / 25%);
}
.privacy-chip { font-size: .75rem; color: var(--muted); text-align: right; }
main { width: min(100% - 2rem, 760px); margin: 1rem auto 3rem; }
.panel, #diagnostic-form {
  background: var(--surface); border: 1px solid rgb(217 227 238 / 80%);
  border-radius: 1.5rem; padding: 1.25rem; box-shadow: var(--shadow);
}
#diagnostic-form { position: relative; overflow: hidden; }
#diagnostic-form::before { content: ""; display: block; height: .35rem; margin: -1.25rem -1.25rem 1.25rem; background: linear-gradient(90deg, var(--brand), var(--violet), var(--accent)); }
.status-panel { text-align: center; padding-block: 3rem; }
.eyebrow { color: var(--brand); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }
h1 { font-size: clamp(1.8rem, 7vw, 3.15rem); line-height: 1.03; margin: .35rem 0 1rem; }
h2 { font-size: clamp(1.35rem, 5vw, 2rem); margin: 0 0 .75rem; }
p { line-height: 1.6; }
.lead { color: var(--muted); font-size: 1.05rem; }
.progress-shell { margin: 0 0 1rem; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: .45rem; font-size: .85rem; color: var(--muted); }
.progress-track { height: .65rem; background: #dfe9f4; border-radius: 99px; overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .25s ease; }
.feature-list { display: grid; gap: .75rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.feature-list li { display: flex; gap: .65rem; align-items: flex-start; }
.feature-list li::before { content: "✓"; color: var(--accent); font-weight: 900; }
.context-list, .question-list, .summary-list { display: grid; gap: 1rem; margin-top: 1.25rem; }
.coverage-card { margin: 1.25rem 0; padding: 1rem; border-radius: 1rem; color: #fff; background: linear-gradient(135deg, #0d4fa8, #6d4aff); }
.coverage-card h2, .coverage-card p { margin-top: 0; }
.coverage-track { height: .75rem; border-radius: 99px; overflow: hidden; background: rgb(255 255 255 / 25%); }
.coverage-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9ff4df, #fff); }
.signal-section { margin-top: 1.5rem; }
.signal-grid { display: grid; gap: .75rem; }
.signal-card { padding: 1rem; border-radius: 1rem; background: #f1fbf8; border: 1px solid #bce7dc; }
.signal-card h3, .signal-card p { margin: 0; }
.signal-card p { margin-top: .35rem; color: var(--muted); }
.context-card, fieldset, .summary-card {
  margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: #fbfdff;
}
.context-card, fieldset { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.context-card:hover, fieldset:hover { transform: translateY(-1px); border-color: #b9cde3; box-shadow: 0 10px 24px rgb(31 62 96 / 7%); }
.context-card h3, .summary-card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.source { color: var(--muted); font-size: .78rem; }
fieldset { min-width: 0; }
legend { font-weight: 750; padding: 0 .35rem; line-height: 1.35; }
.choices { display: grid; gap: .6rem; margin-top: .8rem; }
.choice {
  display: flex; align-items: center; gap: .75rem; padding: .75rem;
  border: 1px solid var(--line); border-radius: .8rem; background: #fff; cursor: pointer;
}
.choice:hover { border-color: #9db8d6; background: #f8fbff; }
.choice:has(input:checked) { border-color: var(--brand); background: #eef6ff; box-shadow: inset 0 0 0 1px var(--brand); }
.choice input { inline-size: 1.2rem; block-size: 1.2rem; accent-color: var(--brand); }
.text-input {
  width: 100%; min-height: 48px; border: 1px solid #aebdcd; border-radius: .75rem;
  padding: .75rem; background: #fff; color: var(--ink);
}
.other-field { margin: .75rem 0 0; }
.error { color: var(--danger); font-weight: 650; }
.form-actions { display: flex; gap: .75rem; justify-content: space-between; margin-top: 1.25rem; }
.button {
  border: 0; border-radius: .85rem; padding: .75rem 1rem; font-weight: 750; cursor: pointer;
}
.button-primary { color: #fff; background: var(--brand); margin-left: auto; }
.button-primary:hover { background: var(--brand-dark); }
.button-secondary { color: var(--ink); background: #e8eef5; }
.button-link { color: var(--muted); background: transparent; text-decoration: underline; }
.button-confirm-all { width: 100%; color: #087564; background: #e8f8f4; border: 1px solid #a6ded2; }
.button-whatsapp { color: #fff; background: #168c5b; text-decoration: none; text-align: center; }
.button-share { background: linear-gradient(135deg, var(--brand), var(--violet)); margin: 0; }
.share-actions { display: grid; gap: .7rem; margin-top: 1.25rem; }
.share-actions .button { display: grid; place-items: center; width: 100%; text-decoration: none; }
.button[disabled] { opacity: .45; cursor: not-allowed; }
.review-badge { display: inline-flex; padding: .25rem .55rem; border-radius: 99px; background: #e8f8f4; color: #087564; font-size: .75rem; font-weight: 750; }
.sr-status { min-height: 1.5rem; margin: .75rem 0 0; color: var(--muted); }
footer { text-align: center; color: var(--muted); font-size: .78rem; padding: 1rem; }

@media (min-width: 640px) {
  .site-header { padding: 1.5rem 2rem; }
  main { margin-top: 2rem; }
  .panel, #diagnostic-form { padding: 2rem; }
  #diagnostic-form::before { margin: -2rem -2rem 2rem; }
  .feature-list { grid-template-columns: repeat(3, 1fr); }
  .form-actions { justify-content: flex-end; }
  .share-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}