/* p3group v3: sócios (agente VIDA). Fotos tratadas por tools/tratar_fotos.py:
   os três em duotone neon no repouso (computador e celular); o hover e o card no meio da tela acendem mais. As linhas de varredura ficam aqui no CSS (px de tela). */
.soc-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);align-items:start}
.soc{min-width:0}

.soc-foto{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--raio);overflow:hidden;isolation:isolate;
  background:var(--preto-2);border:1px solid var(--linha);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 90px -50px rgba(0,0,0,.9);
  transition:border-color .5s var(--ease),box-shadow .6s var(--ease)}
.soc-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;
  filter:brightness(.86) saturate(.94);
  transition:filter .7s var(--ease),transform 1.1s var(--ease)}
/* linhas de varredura discretas + escurecido de baixo para o texto */
.soc-foto::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.26) 0 1px,transparent 1px 3px);opacity:.55}
.soc-foto::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(6,6,7,.35) 0,transparent 16%,transparent 58%,rgba(6,6,7,.78) 100%)}

/* varredura de luz: uma linha que desce, com rastro */
.soc-varre{position:absolute;inset:0;z-index:3;pointer-events:none;transform:translateY(-101%);opacity:0;
  background:linear-gradient(180deg,transparent 55%,rgba(255,77,36,.07) 85%,rgba(255,77,36,.2) 100%)}
.soc-varre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--tang-brilho) 30%,var(--osso) 50%,var(--tang-brilho) 70%,transparent);
  box-shadow:0 0 14px 2px rgba(255,77,36,.8),0 0 40px 6px rgba(255,77,36,.35)}

.soc-tag{position:absolute;z-index:4;top:16px;left:18px;display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.14em;color:var(--osso-3);transition:color .4s}
.soc-tag::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6;transition:width .5s var(--ease)}
.soc-ic{position:absolute;z-index:4;top:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font-size:18px;color:var(--osso-2);background:rgba(6,6,7,.45);border:1px solid var(--linha-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:color .4s,border-color .4s,box-shadow .5s,transform .6s var(--ease)}

.soc-txt{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:22px 22px 20px;display:grid;gap:6px;transition:transform .6s var(--ease)}
.soc-nome{font:500 clamp(24px,2.2vw,32px)/1 var(--sans);letter-spacing:-.035em;color:var(--osso)}
.soc-papel{display:inline-flex;align-items:center;gap:8px;font:500 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--osso-2);transition:color .4s}
.soc-papel::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--osso-3);transition:background-color .4s,box-shadow .4s}

/* aceso: hover no computador; no celular, o card no meio da tela */
.soc.acesa .soc-neon{filter:brightness(1.06) saturate(1.04)}
.soc.acesa .soc-foto{border-color:var(--tang-borda);box-shadow:inset 0 1px 0 rgba(255,200,180,.18),0 0 0 1px rgba(255,77,36,.12),0 30px 80px -34px rgba(255,77,36,.55)}
.soc.acesa .soc-ic{color:var(--tang);border-color:var(--tang-borda);box-shadow:0 0 16px -2px rgba(255,77,36,.6)}
.soc.acesa .soc-tag{color:var(--tang-claro)}
.soc.acesa .soc-papel{color:var(--tang-brilho)}
.soc.acesa .soc-papel::before{background:var(--tang);box-shadow:var(--brilho)}
@media (hover:hover) and (pointer:fine){
  .soc:hover .soc-neon{filter:brightness(1.08) saturate(1.05)}
  .soc:hover .soc-foto img{transform:translateY(-6px) scale(1.035)}
  .soc:hover .soc-foto{border-color:var(--tang-borda);box-shadow:inset 0 1px 0 rgba(255,200,180,.18),0 0 0 1px rgba(255,77,36,.12),0 30px 80px -34px rgba(255,77,36,.55)}
  .soc:hover .soc-ic{color:var(--tang);border-color:var(--tang-borda);box-shadow:0 0 16px -2px rgba(255,77,36,.6);transform:rotate(-12deg)}
  .soc:hover .soc-tag{color:var(--tang-claro)}
  .soc:hover .soc-tag::after{width:44px}
  .soc:hover .soc-txt{transform:translateY(-4px)}
  .soc:hover .soc-papel{color:var(--tang-brilho)}
  .soc:hover .soc-papel::before{background:var(--tang);box-shadow:var(--brilho)}
  .soc:hover .soc-varre{animation:soc-linha-rapida 1.1s var(--ease-io) both}
}

/* entrada: a linha de luz desce uma vez e a foto dá um leve clarão por onde ela passa */
.soc.varrendo .soc-varre{animation:soc-linha 2.6s both}
.soc.varrendo .soc-neon{animation:soc-acende 2.6s both}
@keyframes soc-linha{
  0%{transform:translateY(-101%);opacity:1;animation-timing-function:cubic-bezier(.55,.05,.35,1)}
  48%{transform:translateY(0);opacity:1}
  62%,100%{transform:translateY(0);opacity:0}
}
@keyframes soc-acende{
  0%,20%{filter:brightness(.86) saturate(.94)}
  48%{filter:brightness(1.18) saturate(1.06)}
  100%{filter:brightness(.86) saturate(.94)}
}
@keyframes soc-linha-rapida{
  0%{transform:translateY(-101%);opacity:1}
  80%{transform:translateY(0);opacity:1}
  100%{transform:translateY(0);opacity:0}
}

@media (min-width:901px){
  .soc:nth-child(2){margin-top:64px}
  .soc:nth-child(3){margin-top:22px}
}
@media (max-width:900px){
  .soc-grade{grid-template-columns:minmax(0,1fr);gap:14px;max-width:520px}
  .soc-foto{aspect-ratio:1/1}
  .soc-foto img{object-position:50% 14%}
  .soc-txt{padding:18px 18px 16px}
}
@media (min-width:600px) and (max-width:900px){
  .soc-grade{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:12px}
  .soc-foto{aspect-ratio:4/5}
  .soc-foto img{object-position:50% 0}
  .soc-nome{font-size:22px}
  .soc-papel{font-size:10.5px;letter-spacing:.08em}
  .soc-ic{width:32px;height:32px;font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .soc-varre{display:none}
  .soc-foto img{transition:none}
}