@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;0,8..60,900;1,8..60,400;1,8..60,500&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg: #f7f4ec;
  --bg-alt: #eeebe0;
  --surface: #fffdf8;
  --ink: #171b22;
  --ink-soft: #565f6f;
  --navy-deep: #0c1526;
  --navy-text: #16223c;
  --bronze: #93502f;
  --gold: #c99552;
  --line: rgba(23,27,34,0.14);
  --line-strong: rgba(23,27,34,0.28);
  --on-navy: #f3efe4;
  --on-navy-soft: #b9c2d4;
  --danger: #a3302a;
  --chip-on: rgba(147,80,47,0.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0f1420;
    --bg-alt: #131a29;
    --surface: #121826;
    --ink: #e9e6dc;
    --ink-soft: #9aa3b6;
    --navy-deep: #070b14;
    --navy-text: #e9e6dc;
    --bronze: #cf9a5c;
    --gold: #dcae72;
    --line: rgba(233,230,220,0.14);
    --line-strong: rgba(233,230,220,0.28);
    --on-navy: #f3efe4;
    --on-navy-soft: #a9b3c8;
    --danger: #f0877f;
    --chip-on: rgba(207,154,92,0.12);
  }
}
:root[data-theme="dark"]{
  --bg: #0f1420;
  --bg-alt: #131a29;
  --surface: #121826;
  --ink: #e9e6dc;
  --ink-soft: #9aa3b6;
  --navy-deep: #070b14;
  --navy-text: #e9e6dc;
  --bronze: #cf9a5c;
  --gold: #dcae72;
  --line: rgba(233,230,220,0.14);
  --line-strong: rgba(233,230,220,0.28);
  --on-navy: #f3efe4;
  --on-navy-soft: #a9b3c8;
  --danger: #f0877f;
  --chip-on: rgba(207,154,92,0.12);
}

*{box-sizing:border-box;}
html{color-scheme:light dark;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.65;
}
h1,h2{
  font-family:'Source Serif 4', Georgia, serif;
  font-weight:700;
  text-wrap:balance;
  margin:0;
  color:var(--navy-text);
}
a{color:var(--bronze);}

/* ---------- header ---------- */
.site-header{
  background:var(--navy-deep);
  border-bottom:1px solid rgba(201,149,82,0.25);
}
.header-inner{
  max-width:1120px;
  margin:0 auto;
  padding:16px clamp(16px,5vw,64px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.badge-sm{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(201,149,82,0.5);
  flex-shrink:0;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-mark{
  font-family:'Source Serif 4', serif;
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:0.03em;
  color:var(--on-navy);
}
.brand-sub{
  font-size:0.66rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--on-navy-soft);
  font-weight:500;
}
.back-link{
  font-size:0.78rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--on-navy-soft);
  text-decoration:none;
  white-space:nowrap;
}
.back-link:hover, .back-link:focus-visible{color:var(--gold);}

/* ---------- intro ---------- */
.intro{
  background:var(--navy-deep);
  color:var(--on-navy);
  text-align:center;
  padding:clamp(48px,8vw,80px) clamp(16px,5vw,64px) clamp(88px,12vw,128px);
  position:relative;
  overflow:hidden;
}
.intro::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 55% at 50% 0%, rgba(201,149,82,0.14), transparent 70%);
  pointer-events:none;
}
.intro > *{position:relative;}
.eyebrow{
  font-size:0.75rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold);
}
.intro h1{
  color:var(--on-navy);
  font-weight:900;
  font-size:clamp(2.2rem,6vw,3.6rem);
  line-height:1.05;
  margin:16px auto 0;
  max-width:16ch;
}
.intro p{
  max-width:560px;
  margin:20px auto 0;
  color:var(--on-navy-soft);
  font-size:1.02rem;
}

/* ---------- form card ---------- */
main{
  padding:0 clamp(16px,5vw,64px) clamp(56px,8vw,88px);
}
.card{
  max-width:760px;
  margin:clamp(-72px,-8vw,-48px) auto 0;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  box-shadow:0 24px 60px rgba(0,0,0,0.12);
  padding:clamp(24px,5vw,52px);
  position:relative;
}
.step{
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}
.step + .step{
  margin-top:40px;
  padding-top:36px;
  border-top:1px solid var(--line);
}
.step > *{clear:both;}
.step-head{
  float:left;
  width:100%;
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:0;
  margin-bottom:6px;
}
.step-num{
  font-family:'Source Serif 4', serif;
  font-style:italic;
  font-weight:700;
  font-size:1.5rem;
  color:var(--bronze);
  line-height:1;
}
.step-title{
  font-family:'Source Serif 4', serif;
  font-weight:700;
  font-size:1.35rem;
  color:var(--navy-text);
}
.step-hint{
  color:var(--ink-soft);
  font-size:0.92rem;
  margin:0 0 22px;
}

.fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.field-full{grid-column:1 / -1;}
@media (max-width:600px){ .fields{grid-template-columns:1fr;} }
.field label{
  display:block;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.02em;
  margin-bottom:6px;
  color:var(--navy-text);
}
.field input, .field textarea{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:2px;
  padding:12px 14px;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-soft); opacity:0.7;}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--bronze);
  box-shadow:0 0 0 3px var(--chip-on);
}
.field.invalid input, .field.invalid textarea{border-color:var(--danger);}
.error{
  display:none;
  font-size:0.8rem;
  color:var(--danger);
  margin-top:6px;
}
.invalid > .error, .invalid .error{display:block;}

/* areas */
.area-group + .area-group{margin-top:24px;}
.area-group-title{
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--bronze);
  margin-bottom:10px;
}
.chips{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:8px;
}
.chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line-strong);
  border-radius:2px;
  cursor:pointer;
  font-size:0.94rem;
  transition:border-color 0.15s ease, background 0.15s ease;
  user-select:none;
}
.chip:hover{border-color:var(--bronze);}
.chip:has(input:checked){
  border-color:var(--bronze);
  background:var(--chip-on);
}
.chip input, .consent input{
  accent-color:var(--bronze);
  width:17px;
  height:17px;
  margin:0;
  flex-shrink:0;
}
.chip:has(input:focus-visible){outline:2px solid var(--bronze); outline-offset:2px;}
.areas.invalid .chip{border-color:var(--danger);}

/* consent */
.consent{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:2px;
  cursor:pointer;
}
.consent input{margin-top:4px;}
.consent-text{font-size:0.92rem;}
.consent-text strong{color:var(--navy-text);}
.consent-text small{
  display:block;
  margin-top:8px;
  color:var(--ink-soft);
  font-size:0.82rem;
  line-height:1.55;
}
.consent-wrap.invalid .consent{border-color:var(--danger);}

.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}

.submit-row{
  margin-top:36px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.btn{
  font-family:'Public Sans', sans-serif;
  font-size:0.9rem;
  font-weight:700;
  letter-spacing:0.03em;
  padding:15px 32px;
  border-radius:2px;
  border:1px solid var(--gold);
  background:var(--gold);
  color:#0c1526;
  cursor:pointer;
  transition:opacity 0.15s ease;
}
.btn:hover{opacity:0.88;}
.btn:disabled{opacity:0.6; cursor:progress;}
.submit-note{font-size:0.82rem; color:var(--ink-soft);}
.form-error{
  display:none;
  margin-top:18px;
  font-size:0.9rem;
  color:var(--danger);
}
.form-error.show{display:block;}

/* success */
.success{
  display:none;
  text-align:center;
  padding:24px 0 8px;
}
.success.show{display:block;}
.success-mark{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  border-radius:50%;
  border:1px solid var(--gold);
  display:grid;
  place-items:center;
  color:var(--bronze);
}
.success h2{font-size:clamp(1.6rem,4vw,2.1rem);}
.success p{color:var(--ink-soft); max-width:46ch; margin:14px auto 0;}
.success a{display:inline-block; margin-top:26px; font-weight:600;}

footer{
  background:var(--navy-deep);
  color:var(--on-navy-soft);
  text-align:center;
  padding:32px 16px;
  font-family:'Source Serif 4', serif;
  font-style:italic;
  font-size:0.9rem;
}

.field textarea{
  min-height:160px;
  resize:vertical;
  line-height:1.55;
}
.field-help{
  font-size:0.8rem;
  color:var(--ink-soft);
  margin-top:6px;
}

/* ---------- celular ---------- */
@media (max-width:600px){
  .header-inner{padding:12px 16px;}
  .badge-sm{width:36px; height:36px;}
  .brand{gap:10px;}
  .brand-sub{white-space:nowrap;}
  .back-link{font-size:0.72rem;}
  .intro{padding:40px 20px 84px;}
  .intro p{font-size:0.98rem;}
  .card{padding:24px 18px 28px;}
  .step + .step{margin-top:32px; padding-top:28px;}
  .step-title{font-size:1.22rem;}
  .fields{gap:16px;}
  .chips{grid-template-columns:1fr 1fr;}
  .chip{padding:10px; gap:8px; font-size:0.88rem; line-height:1.3;}
  .consent{padding:14px; gap:12px;}
  .submit-row{flex-direction:column; align-items:stretch; gap:10px; text-align:center;}
  .btn{width:100%;}
}
@media (max-width:340px){
  .chips{grid-template-columns:1fr;}
}