﻿/* Apsi · molde de pagina de profissional
   Este arquivo vale para as 6 paginas de /equipe/. O HTML de cada uma so carrega conteudo.
   Contraste conferido: herda os tokens de base.css, que ja passam em WCAG AA. */

/* ---------- topo: retrato + identificacao ---------- */
.perfil-topo{display:grid;gap:2.2rem;grid-template-columns:270px 1fr;align-items:start}
@media(max-width:760px){ .perfil-topo{grid-template-columns:1fr;gap:1.6rem} }

/* o retrato e o placeholder ate as fotos chegarem: iniciais sobre nevoa, discreto de proposito */
.retrato-g{aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--nevoa);border:1px solid var(--linha);
  display:grid;place-items:center;font-family:var(--display);font-size:3.4rem;font-weight:700;color:var(--turquesa)}
.retrato-g img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){ .retrato-g{max-width:200px;font-size:2.6rem} }

.perfil-topo h1{font-size:clamp(1.9rem,4.4vw,2.9rem)}
.titulacao{font-size:1.02rem;color:var(--suave);margin:.5rem 0 0}
.titulacao b{color:var(--turquesa);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.84rem;
  display:inline-block;margin-left:.15rem}
.perfil-topo .lead{font-size:1.09rem;color:var(--suave);margin-top:1rem}

/* ---------- etiquetas do que a pessoa atende ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.tag{font-size:.9rem;font-weight:500;padding:.4rem 1rem;border:1px solid var(--linha);border-radius:2rem;
  background:var(--papel);text-decoration:none;color:var(--tinta);transition:border-color .18s,background .18s}
a.tag:hover,a.tag:focus-visible{border-color:var(--turquesa);background:var(--nevoa);color:var(--turquesa)}

/* ---------- corpo: texto a esquerda, ficha a direita ---------- */
.perfil-corpo{display:grid;gap:2.6rem;grid-template-columns:1fr 340px;align-items:start}
@media(max-width:860px){ .perfil-corpo{grid-template-columns:1fr;gap:2rem} }

.texto h2{font-size:clamp(1.4rem,2.8vw,1.85rem)}
.texto h3{margin:1.8rem 0 .5rem;font-size:1.08rem}
.texto p{color:var(--tinta)}
.texto p+p{margin-top:0}

/* a ficha: formacao e experiencia, em lista sem marcador grafico pesado */
.ficha{border:1px solid var(--linha);border-radius:14px;padding:1.6rem 1.5rem;background:var(--papel)}
.ficha h3{font-family:var(--corpo);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--turquesa);font-weight:700;margin-bottom:.7rem}
.ficha h3+ul{margin-bottom:1.5rem}
.ficha h3~h3{padding-top:1.4rem;border-top:1px solid var(--linha)}
.ficha ul{list-style:none;font-size:.94rem;color:var(--suave)}
.ficha li{padding:.3rem 0 .3rem 1.05rem;position:relative;line-height:1.5}
.ficha li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--lilas-claro)}
.ficha ul:last-child{margin-bottom:0}

/* ---------- faixa de atendimento ---------- */
.atende{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));margin-top:.4rem}
.atende h3{margin-bottom:.35rem}
.atende p{font-size:.96rem;color:var(--suave);margin:0}

/* ---------- navegacao entre os perfis ---------- */

.outros{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(165px,100%),1fr));margin-top:.4rem}
.outro{display:flex;align-items:center;gap:.75rem;text-decoration:none;padding:.7rem;border:1px solid var(--linha);
  border-radius:12px;background:var(--papel);transition:border-color .18s,transform .18s}
.outro:hover{border-color:var(--turquesa);transform:translateY(-2px)}
.outro .ini{width:44px;height:44px;border-radius:50%;flex:none;background:var(--nevoa);border:1px solid var(--linha);
  display:grid;place-items:center;font-family:var(--display);font-size:.95rem;font-weight:700;color:var(--turquesa);overflow:hidden}
.outro .ini img{width:100%;height:100%;object-fit:cover}
.outro b{font-family:var(--display);font-size:.95rem;font-weight:600;line-height:1.25;letter-spacing:-.01em;text-transform:none}
/* so o CRP, que vem logo depois do nome. Sem o b+ a caixa alta vazava para o nome inteiro */
.outro b+span{display:block;font-size:.75rem;color:var(--suave);letter-spacing:.05em;text-transform:uppercase;font-weight:700;margin-top:2px}
