/* ============================================================
 * header-cards.css
 * ------------------------------------------------------------
 * Cabeçalho da página (título, tag "Fisioterapia · UTI") e o
 * componente de cartão (.card) usado para agrupar cada seção
 * do formulário (Cabeçalho, Hemodinâmico, Neurológico, etc.).
 * ============================================================ */

  header{ margin-bottom: 30px; }
  header .tag{
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--blue);
    display:flex; align-items:center; gap:7px;
  }
  header .tag::before{
    content:"";
    width:7px; height:7px; border-radius:50%;
    background: var(--blue);
    box-shadow: 0 0 0 4px var(--blue-dim);
  }
  header h1{
    font-size: 28px;
    margin: 10px 0 6px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  header p{ margin:0; color: var(--ink-dim); font-size: 13.5px; line-height:1.55; max-width: 560px; }

  .card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .card:hover{ border-color: var(--line-strong); }
  .card h2{
    font-size: 13.5px;
    letter-spacing: .01em;
    color: var(--ink);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    display:flex; align-items:center; gap:11px;
    font-weight: 700;
  }
  .card h2 .n{
    background: var(--blue);
    color: #fff;
    width:23px; height:23px; border-radius:7px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 2px 6px var(--blue-ring);
  }
  .card h3{
    font-size: 12px;
    color: var(--ink-dim);
    margin: 20px 0 9px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  .card h3:first-of-type{ margin-top: 2px; }