:root { --ink: #181818; --paper: #f9f9f9; --orange: #d75a27; --muted: #646464; --line: rgba(24,24,24,.16); --ease: cubic-bezier(.22,1,.36,1); }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.5 "Host Grotesk",Arial,sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button, a, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, fieldset { margin: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; background: var(--paper); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.funnel-header { display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 24px; padding: 20px clamp(22px,4.5vw,72px); color: var(--paper); background: var(--ink); border-bottom: 1px solid rgba(249,249,249,.18); }
.funnel-header img { width: 186px; }
.back-site { color: rgba(249,249,249,.72); font-size: 12px; }
.back-site:hover { color: var(--paper); }
.funnel-layout { display: grid; grid-template-columns: minmax(280px,.82fr) minmax(0,1.18fr); min-height: calc(100svh - 86px); }
.funnel-intro { position: sticky; top: 0; display: flex; height: calc(100svh - 86px); min-height: 650px; flex-direction: column; padding: clamp(36px,4.5vw,72px); color: var(--paper); background: var(--ink); }
.intro-label { margin-bottom: 34px; color: var(--orange); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.funnel-intro h1 { max-width: 530px; font: 800 clamp(60px,5.8vw,96px)/1.06 "Barlow Condensed",Impact,sans-serif; letter-spacing: -.025em; }
.funnel-intro em { color: var(--orange); font-style: normal; }
.funnel-intro p { max-width: 390px; margin-top: 30px; color: rgba(249,249,249,.68); font-size: 16px; line-height: 1.65; }
.intro-note { display: grid; gap: 8px; margin-top: auto; padding-top: 44px; }
.intro-note strong { font-size: 13px; font-weight: 500; }
.intro-note span { max-width: 300px; color: rgba(249,249,249,.5); font-size: 12px; }
.funnel-panel { width: 100%; max-width: 850px; margin: 0 auto; padding: 42px clamp(28px,5vw,80px) 26px; }
.progress-heading { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; }
.progress-heading #step-name { color: var(--ink); }
.progress { height: 3px; margin: 14px 0 42px; overflow: hidden; background: rgba(24,24,24,.12); }
.progress > span { display: block; width: 20%; height: 100%; background: var(--orange); transition: width 240ms var(--ease); }
.funnel-step { animation: stepEnter 260ms var(--ease); }
.funnel-step h2 { max-width: 670px; font: 800 clamp(38px,3.55vw,58px)/1.07 "Barlow Condensed",Impact,sans-serif; letter-spacing: -.02em; text-transform: uppercase; }
.step-description { margin: 18px 0 30px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; min-width: 0; padding: 0; border: 0; }
.choices legend { float: left; width: 100%; margin-bottom: 12px; padding: 0; font-size: 14px; font-weight: 600; }
.choices legend:not(.sr-only) + .field-hint { margin-top: -8px; }
.choices .field-hint { grid-column: 1 / -1; margin-bottom: 5px; }
.choices legend.sr-only { float: none; width: 1px; margin: 0; }
.choices + .field-error { margin-bottom: 26px; }
.choices-full { grid-template-columns: 1fr; }
.choices-options { grid-column: 1 / -1; }
.choice { position: relative; display: flex; min-height: 64px; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease; }
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--orange); background: rgba(215,90,39,.09); }
.choice input { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; accent-color: var(--orange); }
.choice span { min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.selection-row { display: flex; min-height: 24px; justify-content: space-between; gap: 14px; margin-top: 12px; margin-bottom: 24px; }
.selection-row > span { flex-shrink: 0; margin-left: auto; color: var(--muted); font-size: 11px; }
.field { display: block; margin-bottom: 24px; font-size: 14px; font-weight: 600; }
.field input, .field textarea { display: block; width: 100%; min-height: 52px; margin-top: 10px; padding: 13px 15px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; font-weight: 400; }
.field textarea { resize: vertical; min-height: 112px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .7; }
.field small, .field-hint { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.6; }
.field > small:first-of-type { margin-left: 6px; }
.field > small:last-child { display: block; margin: 8px 0 0; }
.field-error { display: block; min-height: 0; margin-top: 8px; color: var(--ink); font-size: 12px; font-weight: 600; }
.field-error:empty { display: none; }
[aria-invalid="true"] { border-color: var(--orange) !important; }
.consent { display: flex; align-items: start; gap: 12px; padding-top: 8px; cursor: pointer; }
.consent input { width: 19px; height: 19px; flex-shrink: 0; margin: 2px 0 0; accent-color: var(--orange); }
.consent span { color: var(--muted); font-size: 12px; line-height: 1.6; }
.answer-review { margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.answer-review summary { font-size: 13px; cursor: pointer; }
.answer-review pre { margin: 18px 0 0; font: 400 12px/1.7 "Host Grotesk",Arial,sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.whatsapp-note { margin-top: 20px; color: var(--muted); font-size: 12px; }
.funnel-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.previous { padding: 12px 0; color: var(--muted); background: transparent; border: 0; font-size: 13px; }
.previous:hover { color: var(--ink); }
.next { min-height: 52px; margin-left: auto; padding: 14px 28px; color: var(--ink); border: 1px solid var(--orange); border-radius: 999px; background: var(--orange); font-size: 14px; font-weight: 700; transition: background-color 180ms ease,color 180ms ease; }
.next:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.funnel-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; color: var(--muted); font-size: 10px; }
.funnel-footer a:hover { text-decoration: underline; }
@keyframes stepEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .funnel-layout { grid-template-columns: 1fr; }
  .funnel-intro { position: static; height: auto; min-height: 0; padding: 32px 28px 38px; }
  .intro-label { margin-bottom: 18px; }
  .funnel-intro h1 { max-width: 620px; font-size: clamp(50px,8vw,76px); }
  .funnel-intro h1 br { display: none; }
  .funnel-intro h1 em { margin-left: .14em; }
  .funnel-intro p { max-width: 600px; margin-top: 20px; font-size: 14px; }
  .intro-note { margin-top: 24px; padding-top: 0; }
  .intro-note span { display: none; }
  .funnel-panel { max-width: 740px; padding: 32px 28px; }
  .funnel-panel h2 { font-size: clamp(38px,7vw,54px); }
}
@media (max-width: 540px) {
  .funnel-header { min-height: 72px; padding: 18px 20px; }
  .funnel-header img { width: 155px; }
  .back-site { font-size: 10px; }
  .funnel-intro { padding: 12px 20px; }
  .funnel-intro h1, .funnel-intro p, .intro-label { display: none; }
  .intro-note { margin: 0; padding: 0; }
  .funnel-panel { padding: 26px 20px 90px; }
  .progress { margin-bottom: 28px; }
  .funnel-panel h2 { font-size: 36px; }
  .choices[data-choice="main_goal"] .choices-options, .choices[data-choice="services"] .choices-options { grid-template-columns: 1fr; }
  .choice { min-height: 60px; padding: 13px; }
  .choice span { font-size: 12px; }
  .funnel-actions { position: static; padding-top: 20px; }
  .next { min-height: 50px; padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }