/* Estética do App Financeiro, com o acento em vermelho. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

:root{
  --bg:#0c0c14;
  --surface:#13131d; --surface2:#1b1b27; --surface3:#232333;
  --surface-hi:#262a34; --surface-lo:#0c0d11;
  --border:#2c2c3e;

  --accent:#ef4444; --accent-light:#f87171; --accent-dark:#991b1b;

  --text:#e2e2ee; --text2:#8888a2; --text3:#55556a;
  --green:#4ade80; --red:#f87171; --yellow:#fbbf24;

  --shadow-1:rgba(0,0,0,.58); --shadow-2:rgba(255,255,255,.07);
  --r:18px; --r-sm:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:'Montserrat',system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  background-image:radial-gradient(130% 110% at 10% 3%, #21242f 0%, var(--bg) 58%);
  background-attachment:fixed;
  color:var(--text); line-height:1.62; font-size:15.5px;
}
.wrap{max-width:1180px;margin:0 auto;padding:26px 18px 90px}

/* ── cabeçalho ── */
header{padding:26px 0 6px}
h1{font-size:1.85rem;font-weight:800;margin:0 0 6px;letter-spacing:-.02em}
.sub{color:var(--text2);margin:0;font-weight:500}

/* ── cards em relevo ── */
.card{
  background:linear-gradient(160deg,var(--surface-hi),var(--surface-lo));
  border:1px solid rgba(255,255,255,.04); border-radius:var(--r); padding:22px;
  box-shadow:10px 10px 24px var(--shadow-1),-8px -8px 20px var(--shadow-2);
  margin:18px 0; min-width:0;
}
h2{font-size:1.02rem;font-weight:700;margin:0 0 14px;letter-spacing:-.01em}
h3{
  font-size:.7rem;font-weight:700;color:var(--text2);text-transform:uppercase;
  letter-spacing:1px;margin:18px 0 8px;
}
h3:first-of-type{margin-top:4px}

/* ── listas de critérios ── */
ul{margin:8px 0;padding:0;list-style:none}
li{margin:7px 0;padding-left:26px;position:relative;font-size:.93rem}
.sim li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.nao li::before{content:"✕";position:absolute;left:0;color:var(--accent-light);font-weight:800}

/* ── faixas de recado ── */
.aviso,.msg-erro,.msg-ok{
  border-radius:var(--r-sm);padding:15px 17px;margin:18px 0;
  box-shadow:2px 2px 7px rgba(0,0,0,.3);
}
.aviso{background:rgba(251,191,36,.08);border-left:3px solid var(--yellow)}
.aviso b{color:var(--yellow)}
.msg-erro{background:rgba(239,68,68,.09);border-left:3px solid var(--accent)}
.msg-erro b{color:var(--accent-light)}
.msg-ok{background:rgba(74,222,128,.08);border-left:3px solid var(--green)}
.msg-ok b{color:var(--green)}
.msg-erro ul{margin:10px 0 0}
.msg-erro li{padding-left:18px}
.msg-erro li::before{content:"•";position:absolute;left:2px;color:var(--accent-light)}

/* ── formulário ── */
label{
  display:block;font-size:.7rem;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:1px;margin:22px 0 8px;
}
label:first-of-type{margin-top:0}
.obrig{color:var(--accent-light)}
input[type=text],select,input[type=file]{
  width:100%;padding:13px 14px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.05);
  background:linear-gradient(160deg,#0b0c10,#1e2129);
  color:var(--text);font-family:inherit;font-size:16px;
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.45),inset -1px -1px 4px rgba(255,255,255,.03);
}
input[type=text]:focus,select:focus,input[type=file]:focus{
  outline:none;border-color:var(--accent);
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.45),0 0 0 3px rgba(239,68,68,.16);
}
input[type=file]{padding:11px 12px;cursor:pointer}
input[type=file]::file-selector-button{
  font-family:inherit;font-weight:700;font-size:.78rem;margin-right:12px;
  padding:8px 15px;border:0;border-radius:9px;cursor:pointer;
  background:var(--surface3);color:var(--text2);
}
input[type=file]::file-selector-button:hover{color:var(--text)}
.ajuda{color:var(--text2);font-size:.85rem;margin:8px 0 0;font-weight:500}

button{
  width:100%;margin-top:26px;padding:15px;border:none;border-radius:var(--r-sm);
  font-family:inherit;font-size:1rem;font-weight:800;letter-spacing:.02em;
  color:#fff;cursor:pointer;transition:filter .14s;
  background:linear-gradient(135deg,var(--accent-light),var(--accent) 60%,var(--accent-dark));
  box-shadow:0 8px 18px -7px rgba(239,68,68,.6),inset 0 1px 0 rgba(255,255,255,.2);
}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.6;cursor:progress;filter:none}
.hp{position:absolute;left:-9999px}

/* ── duas colunas no computador ── */
.layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.92fr);
        gap:24px;align-items:start;margin-top:18px}
.layout > .card{margin:0}
.coluna-regras{position:sticky;top:22px;display:flex;flex-direction:column;gap:18px}
.coluna-regras .card{margin:0}
.regras-inline{display:none}

a{color:var(--accent-light);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
.centro{text-align:center;padding:34px 0 6px}
.grande{font-size:52px;line-height:1;margin-bottom:10px}
.rodape{text-align:center;margin-top:34px;color:var(--text3);font-size:.85rem}
.rodape a{color:var(--text2)}

/* ── celular: só o formulário, regras sob cada campo ── */
@media (max-width:860px){
  .wrap{padding:18px 14px 70px}
  h1{font-size:1.5rem}
  .card{padding:18px;border-radius:15px}
  .layout{grid-template-columns:1fr;gap:0}
  .coluna-regras{display:none}
  .regras-inline{
    display:block;margin:10px 0 0;padding:13px 15px;
    background:rgba(255,255,255,.022);border-left:2px solid var(--surface3);
    border-radius:0 10px 10px 0;
  }
  .regras-inline h3{margin:12px 0 6px;font-size:.65rem}
  .regras-inline h3:first-child{margin-top:0}
  .regras-inline li{font-size:.85rem;margin:5px 0}
  .regras-inline ul{margin:5px 0}
}