/* ===== Fonte e tokens do tema (iguais ao login) ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
  --brand-400:#98c6ee;
  --brand-500:#87CEFA;
  --brand-600:#2D9CF4;

  --bg:#f6faff;
  --panel:#ffffff;
  --ink-900:#0b1220;
  --ink-700:#334155;
  --ink-600:#475569;
  --muted:#5f6b7a;
  --border:#e6eaf2;

  --radius:18px;
  --radius-lg:22px;
  --shadow:0 22px 48px rgba(23,74,130,.16);
  --shadow-sm:0 10px 24px rgba(23,74,130,.10);
}

/* ===== Reset curto ===== */
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--ink-900);
  background:
    radial-gradient(1200px 600px at 95% -10%, rgba(152,198,238,.22), transparent 55%),
    radial-gradient(900px 480px at -10% 110%, rgba(135,206,250,.18), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
:focus-visible{
  outline:3px solid color-mix(in oklab, var(--brand-500) 65%, #fff);
  outline-offset:2px; border-radius:12px;
}

/* ===== Navbar — igual ao login ===== */
.navbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,3vw,28px);
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  box-shadow:0 10px 24px rgba(23,74,130,.10);
}
.logo{ display:flex; align-items:center; gap:12px; }
.logo img{ width:40px; height:40px; object-fit:contain; }
.logo span{
  font-weight:700; letter-spacing:.2px;
  background:linear-gradient(90deg,var(--brand-500),var(--brand-600));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.btn-voltar{
  display:inline-flex; align-items:center; gap:8px;
  padding:.55rem .9rem; border-radius:999px;
  background:#fff; border:1px solid var(--border);
  font-weight:700; color:var(--ink-900);
  transition:transform .12s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}
.btn-voltar:hover, .btn-voltar:focus-visible{
  transform:translateY(-1px);
  background:var(--brand-500); color:#fff; border-color:transparent;
  box-shadow:0 12px 26px rgba(135,206,250,.36);
}

/* ===== Hero/Form — “cartão de login” ===== */
.form-hero{
  min-height:calc(100vh - 86px);
  padding: clamp(24px,4vw,56px) clamp(16px,3vw,28px);
  display:grid; place-items:center;
}
.form-box{
  width:min(720px,100%);
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, rgba(152,198,238,.55), rgba(135,206,250,.55)) border-box;
  border:1px solid transparent;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding: clamp(18px,3.5vw,34px);
  position:relative;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .25s ease;
}
.form-box::before{
  content:""; position:absolute; left:18px; right:18px; top:12px; height:8px; border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(135,206,250,.55), transparent);
  filter:blur(8px); opacity:.55; pointer-events:none;
}
.form-box:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:color-mix(in oklab, var(--brand-500) 55%, #cfe8ff);
}
.form-box h1{
  margin:0 0 14px;
  font-size:clamp(1.25rem, 1rem + 1vw, 1.9rem);
  color:#0f172a; letter-spacing:.2px;
}

/* ===== Form padrão (sem label flutuante) ===== */
form{ margin-top:8px; }
.input-group{ display:grid; gap:8px; margin-bottom:16px; }
.input-group label{ font-weight:600; color:var(--ink-700); }

.input-group input{
  padding:.9rem 1rem;
  border:1px solid var(--border);
  border-radius:16px; /* pílula suave, como no login */
  background:#fff;
  font-size:.98rem;
  transition:border .25s ease, box-shadow .25s ease, transform .08s ease;
}
.input-group input:focus{
  border-color:var(--brand-500);
  box-shadow:0 0 0 4px rgba(135,206,250,.22);
  outline:none;
}

/* ===== Botão principal (igual ao login) ===== */
button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:6px;
  padding:1rem 1rem;
  border:none; cursor:pointer;
  border-radius:999px;
  font-weight:800; font-size:1rem;
  color:#fff;
  background:linear-gradient(135deg, var(--brand-500), var(--brand-600));
  box-shadow:0 16px 32px rgba(23,74,130,.22);
  transition:transform .12s ease, box-shadow .25s ease, filter .2s ease;
}
button[type="submit"]:hover,
button[type="submit"]:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 22px 46px rgba(23,74,130,.28);
  filter:saturate(1.05);
}

/* ===== Grid elegante em telas maiores (como no login) ===== */
@media (min-width: 820px){
  form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 18px;
  }
  /* Nome e Endereço ocupam linha inteira */
  #nome, #endereco { }
  #nome, #endereco { grid-column: 1 / -1; } /* aplicado via seletor do input */
  /* Botão ocupa linha inteira */
  button[type="submit"]{ grid-column:1 / -1; }
  /* Ajuste fino: reduza os espaçamentos verticais entre grupos no grid */
  .input-group{ margin-bottom:0; }
}

/* ===== Rodapé ===== */
.rodape{
  padding:28px clamp(16px,3vw,28px);
  background:#fff;
  border-top:1px solid var(--border);
  color:var(--muted);
  text-align:center;
}
.rodape .social{
  display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom:10px;
}
.rodape .social img{
  width:22px; height:22px; opacity:.9;
  transition:transform .12s ease, filter .25s ease;
}
.rodape .social a:hover img{
  transform:translateY(-2px);
  filter:drop-shadow(0 6px 12px rgba(23,74,130,.18));
}

/* ===== Labels flutuantes (opcional, igual ao login) =====
   Para ativar: adicione class="float" no .input-group e placeholder=" " no input  */
.input-group.float{
  position:relative; margin-bottom:18px;
}
.input-group.float input{
  border-radius:16px; padding:1.15rem 1rem .85rem; /* espaço para o rótulo */
}
.input-group.float label{
  position:absolute; left:14px; top:50%;
  transform:translateY(-50%);
  background:transparent; padding:0 .25rem;
  color:#64748b; font-weight:600;
  pointer-events:none;
  transition:all .18s ease;
  will-change:transform, color, top, font-size;
}
.input-group.float input::placeholder{ color:transparent; }
.input-group.float input:focus + label,
.input-group.float input:not(:placeholder-shown) + label{
  top:8px; transform:none;
  font-size:.78rem; color:var(--brand-600);
  background:linear-gradient(var(--panel), var(--panel)) padding-box;
}

/* ===== Acessibilidade e motion ===== */
@media (prefers-reduced-motion: reduce){
  .btn-voltar, .form-box, button[type="submit"], .rodape .social img { transition:none; transform:none; }
}

/* ===== Dark mode (como no login) ===== */