/* ---------------------------------------------------------------------------
   Componentes das páginas internas.

   `abeems.css` é a transcrição literal do protótipo aprovado em
   ~/Abeems/docs/ui/02-home.html e é regerado por extração — não edite lá.
   O que é específico das páginas mora aqui, usando os MESMOS tokens.
   --------------------------------------------------------------------------- */

/* ---------------- cabeçalho de página interna ---------------- */
.pghead{background:var(--brand-deep);color:#fff}
.pghead .in{padding-top:clamp(2.4rem,6vw,4rem);padding-bottom:clamp(2.4rem,6vw,4rem)}
.pghead .eyebrow{color:var(--mark)}
.pghead h1{font-size:clamp(1.8rem,4.6vw,2.9rem);letter-spacing:-.035em;margin:.8rem 0 .9rem}
.pghead .rule{width:58px;height:3px;background:var(--mark);margin-bottom:1.2rem}
.pghead p{color:#C6D2EA;max-width:56ch}

/* ---------------- cards de pessoa (diretoria) ---------------- */
.pessoas{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1.1rem}
/* A Executiva tem 8 cargos, hoje 6 preenchidos: 3×2 fecha certo no desktop. */
.pessoas.seis{grid-template-columns:repeat(3,1fr)}
@media (max-width:880px){ .pessoas.seis{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .pessoas.seis{grid-template-columns:1fr} }

.pe{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
    display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.pe:hover{border-color:var(--brand);transform:translateY(-2px)}
.pe .ret{aspect-ratio:1/1;background:var(--surface-2);border-bottom:1px solid var(--line);
         position:relative;overflow:hidden}
/* As fotos vão de 640×640 a 720×1280 — o recorte quadrado com foco no terço
   superior mantém o rosto enquadrado em todas elas. */
.pe .ret img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.pe .ret .ini{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fm);
              font-size:2.4rem;font-weight:700;color:var(--brand);background:var(--brand-soft)}
.pe .bd{padding:.95rem 1.05rem 1.15rem;display:grid;gap:.28rem}
.pe .cg{font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
        font-weight:700;color:var(--brand)}
.pe h3{font-size:1rem;line-height:1.3;letter-spacing:-.015em}
.pe .loc{font-size:.82rem;color:var(--ink-3)}
.pe .traj{font-size:.84rem;color:var(--ink-2);margin-top:.3rem}

.vago{background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r-lg);
      padding:1rem 1.15rem;font-size:.86rem;color:var(--ink-2);margin-top:1.2rem}

/* ---------------- conselho fiscal ---------------- */
.cf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cf table{width:100%;border-collapse:collapse}
.cf caption{text-align:left;padding:.9rem 1.05rem;font-size:.86rem;color:var(--ink-2);
            border-bottom:1px solid var(--line)}
.cf th{text-align:left;font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
       color:var(--ink-3);font-weight:600;padding:.7rem 1.05rem;border-bottom:1px solid var(--line);
       background:var(--surface-2)}
.cf td{padding:.7rem 1.05rem;border-bottom:1px solid var(--line);font-size:.92rem}
.cf tr:last-child td{border-bottom:0}
/* Em tela pequena a tabela vira lista, nunca rolagem horizontal. */
@media (max-width:640px){
  .cf thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cf tr{display:grid;gap:.1rem;padding:.7rem 1.05rem;border-bottom:1px solid var(--line)}
  .cf td{border:0;padding:0}
  .cf td:first-child{font-weight:600}
  .cf td:last-child{font-size:.84rem;color:var(--ink-3)}
  .cf td:last-child::before{content:"Suplente: ";font-family:var(--fm);font-size:.7rem;
                            letter-spacing:.08em;text-transform:uppercase}
}

/* ---------------- diretório de engenheiros ---------------- */
/* Aviso de demonstração: cor, ícone e texto — nunca só cor. */
.demo{display:grid;grid-template-columns:22px 1fr;gap:.7rem;align-items:start;
      background:#F8E7CF;border:1px solid #C07A1E;color:#96540A;border-radius:var(--r-lg);
      padding:.9rem 1.1rem;margin-bottom:1.6rem;font-size:.88rem}
@media (prefers-color-scheme:dark){.demo{background:#2A1D0B;border-color:#8A5A18;color:#E5B778}}
:root[data-theme="dark"] .demo{background:#2A1D0B;border-color:#8A5A18;color:#E5B778}
:root[data-theme="light"] .demo{background:#F8E7CF;border-color:#C07A1E;color:#96540A}
.demo svg{width:20px;height:20px;margin-top:.15rem}

.eng{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1.1rem}
.en{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:1.15rem;display:grid;gap:.5rem;transition:border-color .15s}
.en:hover{border-color:var(--brand)}
.en .top{display:flex;gap:.85rem;align-items:center}
.en .av{width:52px;height:52px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
        display:grid;place-items:center;font-family:var(--fm);font-weight:700;font-size:1.05rem;flex:0 0 auto}
.en h3{font-size:1rem;letter-spacing:-.015em}
.en .loc{font-size:.82rem;color:var(--ink-3)}
.en .crea{font-family:var(--fm);font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.en p{font-size:.86rem;color:var(--ink-2)}
.en .tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.2rem}
.en .tags span{font-size:.72rem;border:1px solid var(--line);border-radius:99px;
               padding:.14rem .55rem;color:var(--ink-2)}
.en .flag{font-family:var(--fm);font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;
          font-weight:700;color:#96540A;background:#F8E7CF;border:1px solid #C07A1E;
          border-radius:3px;padding:.1rem .4rem;justify-self:start}

.vazio{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-lg);
       padding:2.2rem;text-align:center;color:var(--ink-2)}