/* ---------------------------------------------------------------------------
   Páginas das áreas da Engenharia Elétrica (agente-abeems-areas).

   Usa os tokens de abeems.css (transcrição do protótipo aprovado). A grade de
   ícones (.areas/.ar) e o cabeçalho interno (.pghead) já existem no design
   system — aqui mora apenas o que é específico da página de especialidade.
   A diferenciação entre as oito áreas é o ícone, nunca a cor.
   --------------------------------------------------------------------------- */

/* Título da página com o ícone da área ao lado. */
.area-titulo{display:flex;align-items:center;gap:.7rem}
.area-titulo .ic{width:44px;height:44px;flex:0 0 auto;color:currentColor;opacity:.92}
@media (max-width:520px){ .area-titulo .ic{width:34px;height:34px} }

/* Introdução: dois parágrafos em coluna de leitura confortável. */
.area-intro{display:grid;gap:1rem;max-width:72ch}
.area-intro p{font-size:1.02rem;color:var(--ink-2)}
.area-intro p:first-child{font-size:1.08rem;color:var(--ink)}

/* Principais áreas de atuação: seis cards, mesmo desenho da grade de áreas. */
.atuacoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.7rem}
.atua{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
      padding:1.05rem;display:grid;gap:.4rem;align-content:start}
/* Marcador fino — o único uso do amarelo fora da marca. */
.atua::before{content:"";width:26px;height:3px;background:var(--mark);border-radius:2px}
.atua b{font-size:.94rem;letter-spacing:-.01em}
.atua span{font-size:.84rem;color:var(--ink-2);line-height:1.5}

/* Onde o profissional atua: lista de verificação em duas colunas. */
.locais{list-style:none;margin:0;padding:0;display:grid;gap:.45rem .9rem;
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:820px}
.locais li{display:flex;gap:.6rem;align-items:flex-start;background:var(--surface);
           border:1px solid var(--line);border-radius:var(--r);padding:.62rem .8rem;
           font-size:.92rem;color:var(--ink-2);min-height:44px}
.locais svg{width:18px;height:18px;flex:0 0 auto;color:var(--ok);margin-top:.18rem}

/* Importância para MS: cartão de destaque nos tons institucionais. */
.destaque{background:var(--brand-soft);border:1px solid var(--line);border-left:4px solid var(--brand);
          border-radius:var(--r-lg);padding:clamp(1.2rem,3vw,1.8rem)}
.destaque h2{font-size:1.15rem;margin-bottom:.6rem;color:var(--brand)}
.destaque p{color:var(--ink-2);max-width:76ch}