/* PsicoPara — identidade propria do 3o produto.
   Paleta sage/indigo (o TiroPara e ambar/grafite, o LaudosOnline e azul):
   a psicologa tem de saber, pela cor, em qual sistema esta. */
:root{
  --tinta:#1b2320; --tinta-2:#3d4d47; --tinta-3:#6d7f78;
  --papel:#f7f8f7; --papel-2:#ffffff; --linha:#dbe2df;
  --sage:#2f6d5c; --sage-2:#245546; --sage-suave:#e3efea;
  --indigo:#3f4b7a; --indigo-suave:#e6e8f2;
  --alerta:#8c3a2b; --alerta-suave:#f9e8e4;
  --ok:#2f6d4a; --ok-suave:#e4f0e8;
  --raio:8px;
  --sombra:0 1px 2px rgba(27,35,32,.06), 0 4px 14px rgba(27,35,32,.05);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:ui-serif,Georgia,"Iowan Old Style",Palatino,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--sage)}

/* ── topo ─────────────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
        padding:12px 20px;background:var(--papel-2);border-bottom:1px solid var(--linha)}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--tinta);
       font-weight:650;font-size:18px;letter-spacing:-.01em}
.marca .simbolo{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--sage);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.02em}
.marca .pp-2{color:var(--sage)}
.nav-psi{display:flex;gap:4px;flex-wrap:wrap}
.nav-psi a{padding:7px 13px;border-radius:var(--raio);text-decoration:none;
  color:var(--tinta-2);font-size:14.5px;font-weight:500}
.nav-psi a:hover{background:var(--sage-suave)}
.nav-psi a.ativo{background:var(--sage);color:#fff}

.conteudo{max-width:1000px;margin:0 auto;padding:26px 20px 70px}

/* ── tipografia ───────────────────────────────────────────────────────── */
h1{font-family:var(--serif);font-weight:600;font-size:clamp(24px,4vw,34px);
   line-height:1.15;margin:0 0 10px;letter-spacing:-.015em}
h2{font-family:var(--serif);font-weight:600;font-size:20px;margin:28px 0 8px}
h3{font-weight:650;font-size:16px;margin:20px 0 6px}
p{margin:0 0 13px;max-width:68ch}
.sub{color:var(--tinta-2);font-size:17px;max-width:60ch}
.miudo{font-size:13.5px;color:var(--tinta-3)}

/* ── caixas ───────────────────────────────────────────────────────────── */
.cartao{background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio);
        padding:20px 22px;box-shadow:var(--sombra);margin:0 0 18px}
.aviso{border-left:3px solid var(--sage);background:var(--sage-suave);
       padding:14px 16px;border-radius:0 var(--raio) var(--raio) 0;margin:0 0 18px}
.aviso.erro{border-left-color:var(--alerta);background:var(--alerta-suave)}
.aviso.ok{border-left-color:var(--ok);background:var(--ok-suave)}
.aviso p{margin:0}
.aviso p+p{margin-top:8px}

/* ── formularios ──────────────────────────────────────────────────────── */
form{margin:0}
.campo{display:block;margin:0 0 15px}
.campo>span{display:block;font-size:13.5px;font-weight:600;color:var(--tinta-2);
            margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=date],select,textarea{
  width:100%;padding:10px 12px;font:inherit;font-size:15.5px;color:var(--tinta);
  background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sage);outline-offset:1px;
  border-color:var(--sage)}
.grade{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;font-size:14.5px;
       color:var(--tinta-2);max-width:66ch}
.check input{margin-top:4px;flex:none}

.btn{display:inline-block;padding:10px 18px;font:inherit;font-size:15px;font-weight:600;
     color:#fff;background:var(--sage);border:1px solid var(--sage);border-radius:var(--raio);
     cursor:pointer;text-decoration:none}
.btn:hover{background:var(--sage-2);border-color:var(--sage-2)}
.btn.secundario{background:transparent;color:var(--sage)}
.btn.secundario:hover{background:var(--sage-suave)}

/* ── listas de pendencia ──────────────────────────────────────────────── */
.pendencias{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.pendencias li{font-size:13px;background:var(--alerta-suave);color:var(--alerta);
  border:1px solid var(--alerta);padding:3px 10px;border-radius:99px}

/* ── landing ──────────────────────────────────────────────────────────── */
.hero{padding:44px 0 10px}
.hero h1{font-size:clamp(28px,5.4vw,44px)}
.passos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
        margin:24px 0 0;padding:0;list-style:none}
.passos li{background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio);
  padding:18px 20px;box-shadow:var(--sombra)}
.passos b{display:block;font-family:var(--serif);font-size:17px;margin-bottom:5px}
.passos .num{display:inline-flex;align-items:center;justify-content:center;width:24px;
  height:24px;border-radius:50%;background:var(--indigo-suave);color:var(--indigo);
  font-size:12px;font-weight:700;margin-bottom:9px}

.rodape{margin-top:44px;padding-top:16px;border-top:1px solid var(--linha);
  font-size:13px;color:var(--tinta-3);display:flex;gap:14px;flex-wrap:wrap}

/* ── login ────────────────────────────────────────────────────────────── */
.caixa-login{max-width:400px;margin:44px auto}

@media (max-width:640px){
  .conteudo{padding:20px 16px 60px}
  .nav-psi{width:100%;order:3}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── PSI-3: clientes ──────────────────────────────────────────────────── */
.barra-acoes{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 20px}
.busca{display:flex;gap:8px;flex:1;min-width:240px}
.busca input{flex:1}
.lista-cartoes{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cartao-cliente,.cartao-laudo{display:flex;flex-direction:column;gap:3px;
  background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio);
  padding:15px 17px;box-shadow:var(--sombra);text-decoration:none;color:var(--tinta)}
.cartao-cliente:hover{border-color:var(--sage);box-shadow:0 2px 10px rgba(47,109,92,.14)}
.cartao-cliente b,.cartao-laudo b{font-size:15.5px}
.cartao-laudo{border-left:3px solid var(--ok)}
.cartao-laudo.reprovado{border-left-color:var(--alerta)}
.grade-dados{display:grid;gap:14px 22px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.grade-dados .rot{display:block;font-size:12px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:2px}

/* ── PSI-4: emissão ───────────────────────────────────────────────────── */
.escolha{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0 0 18px}
.op{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;cursor:pointer;
  border:1px solid var(--linha);border-radius:var(--raio);background:var(--papel-2)}
.op input{margin-top:3px;flex:none}
.op b{display:block}
.op-apto:has(input:checked){border-color:var(--ok);background:var(--ok-suave)}
.op-inapto:has(input:checked){border-color:var(--alerta);background:var(--alerta-suave)}
textarea{resize:vertical;min-height:52px;font-family:inherit}