:root{
    --bg:#f4f7ff;
    --card:#fff;
    --ink:#0f172a;
    --muted:#64748b;
    --primary:#2563eb;
    --primary-ink:#fff;
    --ring:#dbe7ff;
    --stroke:#e5e7eb;
    --soft:#eef3ff;
    --radius:16px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  }

  /* topo fino com brand + boto voltar  direita */
  .topbar{
    max-width:1200px; margin:24px auto 0; padding:0 16px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand{ font-weight:800; letter-spacing:.2px; opacity:.85; }
  .brand img{ height:70px; vertical-align:-22px; margin-right:6px }

  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px; border-radius:999px; border:1px solid var(--stroke);
    background:#fff; color:var(--ink); text-decoration:none; font-weight:700;
    box-shadow:0 2px 8px rgba(15,23,42,.05);
  }
  .btn:hover{ background:var(--soft) }

  /* carto central com duas colunas */
  .wrap{
    max-width:1000px; margin:28px auto 0; padding:0 16px;
  }
  .card{
    background:var(--card); border:1px solid var(--ring);
    border-radius:var(--radius); box-shadow:0 20px 40px rgba(15,23,42,.06);
    padding:28px; display:grid; grid-template-columns:1fr 340px; gap:24px;
  }
  .title{ font-size:22px; font-weight:900; margin:0 0 6px 0 }
  .subtitle{ color:var(--muted); margin:0 0 16px 0; font-weight:600 }

  .field{ margin-bottom:12px }
  .input, .textarea{
    width:100%; background:#fff; border:1px solid var(--stroke);
    border-radius:12px; padding:12px 14px; outline:none;
    font: inherit;
  }
  .input:focus, .textarea:focus{ border-color:#c7d7ff; box-shadow:0 0 0 3px rgba(37,99,235,.15) }
  .textarea{ min-height:140px; resize:vertical }

  /* honeypot visvel s para rob */
  .hp-wrap{ position:absolute; left:-9999px; top:-9999px; }
  .actions{ display:flex; gap:10px; margin-top:6px }
  .btn-primary{
    background:var(--primary); color:var(--primary-ink);
    border-color:transparent;
  }
  .btn-primary:hover{ filter:brightness(1.03) }
  .btn-light{ background:#fff }

  /* bloco lateral */
  .side{
    background:#fff; border:1px solid var(--ring); border-radius:12px;
    padding:16px 16px 16px 18px;
  }
  .side h3{ margin:0 0 10px 0; font-weight:900; font-size:16px }
  .side ul{ margin:8px 0 0 18px; padding:0; color:var(--muted) }
  .side p{ margin:10px 0 0 0; color:var(--muted) }
  .side b{ color:#0f172a }

  /* rodap mnimo */
  .foot{
    text-align:center; color:var(--muted); font-weight:600;
    margin:26px 0 40px;
  }

  @media (max-width:900px){
    .card{ grid-template-columns:1fr; }
  }