@import url('https://fonts.cdnfonts.com/css/the-seasons');

:root{
  --text:#004aad; --muted:#004aad; --line:#cdd8f6;
  --primary:#004aad; --primary-2:#1a6bff;
  --accent:#004aad;
  --card:#ffffff; --glass:rgba(255,255,255,.95);
  --shadow:0 18px 40px rgba(0,74,173,.08);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  min-height:100vh;
  color:var(--text);
  background:#ffffff;
}
/* helpers */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* containers */
.wrap{ max-width:1120px; margin:0 auto; padding:0 16px; }
.layout{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; margin:8px auto 60px; }

/* topbar */
.topbar{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.1) blur(10px);
  background:#ffffff; border-bottom:1px solid var(--line); }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:56px; }
.brand{ font-weight:900; letter-spacing:.4px; }
.docs{ color:var(--text); text-decoration:none; font-weight:600; }
.docs:hover{ text-decoration:underline; }

/* hero + aurora */
.hero{ position:relative; padding:78px 0 40px; text-align:center; overflow:hidden;
  background:transparent; }
.hero-inner h1{
  font-family:'The Seasons','Times New Roman',serif;
  font-size:60px; margin:0 0 12px; letter-spacing:.2px;
  color:#004aad; -webkit-text-fill-color:#004aad; text-fill-color:#004aad;
}
.hero-inner p{
  font-family:'The Seasons','Times New Roman',serif;
  margin:0; font-size:22px; font-weight:700;
  color:#004aad; -webkit-text-fill-color:#004aad; text-fill-color:#004aad;
}
.aurora{ position:absolute; border-radius:999px; filter:blur(60px); opacity:.55; mix-blend:screen; }
.a1{ width:380px; height:380px; left:5%; top:-10%; background:radial-gradient(circle at 40% 40%, #00f56666, transparent 60%); }
.a2{ width:300px; height:300px; right:10%; top:0;   background:radial-gradient(circle at 60% 60%, #0ceef466, transparent 60%); }
.a3{ width:280px; height:280px; left:45%; top:30%;  background:radial-gradient(circle at 50% 50%, #01f59c66, transparent 60%); }
@media (prefers-reduced-motion: no-preference){
  .a1,.a2,.a3{ animation: float 10s ease-in-out infinite alternate; }
  @keyframes float{ to{ transform: translateY(18px) scale(1.02); } }
}

/* wizard card */
.card.wizard{ background:var(--glass); backdrop-filter: blur(14px) saturate(1.08);
  border-radius:22px; box-shadow:var(--shadow); border:1px solid var(--line); overflow:hidden; }

/* steps (sticky) */
.steps{
  counter-reset:step; display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
  padding:16px; margin:0; list-style:none;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky; top:72px; z-index:40;
  box-shadow:0 10px 24px rgba(0,74,173,.06);
}
.steps li{ text-align:center; font-weight:800; font-size:13px; color:var(--muted); padding:10px 8px; }
.steps li::before{
  counter-increment:step; content:counter(step);
  display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center;
  border-radius:999px; border:2px solid var(--text); margin-right:6px; font-size:12px;
}
.steps li.is-active{ color:var(--text); }
.steps li.is-active::before{ border-color:var(--primary); background:linear-gradient(45deg,var(--primary),var(--primary-2)); color:#fff; }

/* progress bar */
.progress{ height:5px; background:rgba(0,74,173,.12); }
.progress #bar{ height:5px; width:0; background:linear-gradient(90deg,var(--primary),var(--primary-2)); transition:width .25s ease; }

/* form */
form{ position:relative; padding:18px 16px 0; }
.step{ display:none; padding-top:48px; padding-bottom:92px; animation: in .25s ease; }
.step.is-current{ display:block; }
@keyframes in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.grid{ display:grid; gap:12px; grid-template-columns:1fr; margin:12px 0 4px; }
.row-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width:600px){ .row-2{ grid-template-columns:1fr; } }
.parent-row{ grid-template-columns:1fr 1fr; }
.parent-row .parent-name-mae{ display:flex; flex-direction:column; }
.parent-row .parent-field{ display:flex; flex-direction:column; gap:4px; align-self:start; }
.check-inline{ display:inline-flex; gap:6px; align-items:center; font-size:13px; font-weight:600; color:var(--text); }
.check-inline input{ width:16px; height:16px; margin:0; }

/* labels e inputs (alto contraste) */
label{ display:grid; gap:6px; font-size:15px; color:var(--text); font-weight:800; }
.label{ line-height:1.1; }
.hint{ display:block; font-size:12px; color:var(--text); font-weight:700; }
input, select, textarea{
  padding:12px 14px; border:1px solid var(--text); border-radius:12px; background:#fff;
  font-size:16px; color:var(--text); outline:none; transition: box-shadow .15s, border-color .15s, transform .05s;
}
input:focus,select:focus,textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,74,173,.18); }
input:hover{ transform: translateY(-1px); }
.ping{ animation:ping .45s; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(0,74,173,.35);} 100%{ box-shadow:0 0 0 6px transparent;} }

/* review */
.review{ border:1px dashed var(--text); border-radius:14px; padding:12px 14px; background:#fff; color:var(--text); }
.review h3{ margin:0 0 8px; }
.review ul{ margin:0; padding-left:18px; display:grid; gap:6px; }

/* consents */
.consents{ display:grid; gap:12px; margin:16px 0; }
.consents label{ display:flex; gap:8px; align-items:flex-start; color:var(--text); font-weight:700; }

/* mensagens */
.notice{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  color:var(--text);
  font-weight:700;
}
.muted{ margin-top:6px; font-size:13px; color:var(--muted); font-weight:700; }

.success{
  margin-top:10px;
  border:1px solid #1a7f37;
  border-radius:14px;
  padding:12px 14px;
  background:#eaf6ee;
  color:#1a7f37;
  font-weight:900;
}

.warning{
  margin-top:10px;
  border:1px solid #b26a00;
  border-radius:14px;
  padding:12px 14px;
  background:#fff5e6;
  color:#b26a00;
  font-weight:900;
}

/* action bar */
.action-bar{
  position:sticky; bottom:0; display:flex; gap:10px; align-items:center;
  padding:12px 16px; background:#fff;
  border-top:1px solid var(--line);
}
.btn{ appearance:none; border:1px solid var(--text); border-radius:12px; padding:12px 16px; font-weight:800; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,74,173,.12); background:#fff; color:var(--text); }
.btn:hover{ filter:brightness(.98); transform:translateY(-1px); }
.btn.primary{ background:#f2f6ff; color:var(--text); }
.btn.ghost{ background:transparent; border-color:var(--text); box-shadow:none; }
.status{ font-weight:800; margin-left:auto; }

/* toast */
dialog#toast{ position:fixed; right:16px; bottom:16px; border:1px solid var(--text); border-radius:14px; padding:12px 16px; background:#fff; color:var(--text); box-shadow: var(--shadow); }

/* mobile: reduz sticky pra não brigar com teclado */
@media (max-width: 560px){
  .steps{ position:static; box-shadow:none; }
  .action-bar{ position:static; background:#fff; }
}

/* dark mode */
@media (prefers-color-scheme: dark){
  :root{ --text:#004aad; --muted:#004aad; --line:#cdd8f6; --glass:rgba(255,255,255,.95); --shadow:0 18px 40px rgba(0,74,173,.08); }
  body{
    color-scheme: light;
    background:#ffffff;
    color:var(--text);
  }
  .hero-inner h1,.hero-inner p{
    color:#004aad; -webkit-text-fill-color:#004aad; text-fill-color:#004aad;
  }
}