/* Foto de quem atende, nas páginas de área (lote 21h, 21/10/2026).
 * Computador: cartão com canto arredondado à direita do título, dentro da faixa colorida, com legenda (nome, OAB, área).
 * Celular (até 760 px): avatar redondo de 56 px (--radius-pill, 999px) no canto da faixa; a legenda segue no HTML para leitor de tela.
 * Só CSS novo: nada do areas-fundo.css, areas-id.css ou areas.css foi alterado. */

.hero>.ft-foto{position:absolute;top:auto;right:24px;width:232px;margin:0;z-index:2}
.ft-foto picture{display:block}
.ft-foto img{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 20%;border-radius:var(--ft-r,14px);box-shadow:0 18px 38px -16px rgba(3,35,31,.65),0 0 0 var(--ft-bw,1px) var(--ft-bc,rgba(255,255,255,.4))}
.ft-foto figcaption{margin-top:12px;font:600 12.5px/1.45 'Open Sans',sans-serif;color:var(--ft-ink,#fff)}

/* estilo por área: o canto e o aro seguem o motivo da faixa */
body[data-area="tributario"]{--ft-r:14px;--ft-bw:1px;--ft-bc:rgba(255,255,255,.45);--ft-ink:#FFFFFF}
body[data-area="empresarial"],body[data-area="empresas"]{--ft-r:14px;--ft-bw:1px;--ft-bc:rgba(2,102,92,.5);--ft-ink:#3C3C3C}
body[data-area="saude"]{--ft-r:26px;--ft-bw:3px;--ft-bc:rgba(255,255,255,.55);--ft-ink:#12191A}
body[data-area="familia"]{--ft-r:26px;--ft-bw:3px;--ft-bc:rgba(255,255,255,.55);--ft-ink:#12191A}
body[data-area="empresas"]{--ft-ink:#F4F6F6;--ft-bc:rgba(255,255,255,.3)}

/* o texto do topo cede o canto direito à foto */
@media (min-width:761px){
  .hero:has(>.ft-foto)>:is(.trilha,.eyebrow,h1,.lead,.meta){max-width:calc(100% - 268px)}
  .hero:has(>.ft-foto)>h1{max-width:calc(100% - 268px)}
}

@media (max-width:760px){
  .hero>.ft-foto{width:56px;right:24px}
  .ft-foto img{aspect-ratio:1/1;border-radius:var(--radius-pill,999px);--ft-bw:2px}
  /* legenda só para leitor de tela no celular */
  .ft-foto figcaption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .hero:has(>.ft-foto)>:is(.trilha,.eyebrow){max-width:calc(100% - 72px)}
}

/* hub (seção do título com foto grande): legenda sob a foto, na cor do texto da seção */
figure.hub-foto{margin:0}
figure.hub-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
figure.hub-foto figcaption{margin-top:10px;font:600 13px/1.45 'Open Sans',sans-serif;color:var(--hub-ink,#F4F6F6)}
body[data-area="saude"] figure.hub-foto figcaption,body[data-area="familia"] figure.hub-foto figcaption{color:#12191A}

/* empresas (sem faixa colorida, semáforo à direita): cartão horizontal pequeno no alto, à esquerda do título */
@media (min-width:761px){
  .hero>.ft-foto.ft-lado{left:24px;right:auto;top:20px;width:auto;max-width:400px;display:flex;align-items:center;gap:14px}
  .ft-lado picture{flex:0 0 84px}
  .ft-lado img{width:84px}
  .ft-lado figcaption{margin:0;font-size:12.5px}
  .hero:has(>.ft-lado)>:is(.trilha,.eyebrow,h1,.lead,.meta){max-width:none}
}
@media (max-width:760px){
  .hero>.ft-foto.ft-lado{top:12px;right:24px;left:auto}
  .hero:has(>.ft-lado) h1{max-width:calc(100% - 72px)}
}