/* ============================================================
   SEÇÃO · sócios
   Convertido de gloda-home.html. Escopo .lp-root.
   ============================================================ */
/* ============================================================
   8 · SÓCIOS
   ============================================================ */
.lp-root .socios{background:var(--paper-2);padding:var(--space-40) 0;overflow:hidden;border-radius:var(--radius-lg);}
/* Fita (08/10/2026, bug 6.27): anda por transform (CSS), da direita para a esquerda, em loop exato.
   Antes andava por scrollLeft += 0.55 a cada quadro: o navegador arredonda o scrollLeft (a fita andava
   aos trancos) e o ponto de volta (scrollWidth/2) incluía o padding, então a cada volta a fita pulava ~30 px.
   Agora: duas cópias idênticas da sequência, cada card com o próprio espaço à direita (sem gap nem padding
   no trilho), translate3d de 0 a -50% — o fim de uma volta é exatamente o começo da outra. */
.lp-root .socios-scroll{overflow:hidden;touch-action:pan-y;}
.lp-root .marquee{display:flex;width:max-content;will-change:transform;}
.lp-root .socios-scroll.is-pronto .marquee{animation:lp-socios-fita var(--socios-dur,60s) linear infinite;}
@keyframes lp-socios-fita{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
/* para quando a pessoa está olhando um card: mouse em cima, foco de teclado ou card virado no toque */
@media (hover:hover){ .lp-root .socios-scroll:hover .marquee{animation-play-state:paused;} }
.lp-root .socios-scroll:focus-within .marquee,
.lp-root .socios-scroll.is-pausa .marquee{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
  .lp-root .socios-scroll{overflow-x:auto;scrollbar-width:none;touch-action:pan-x pan-y;}
  .lp-root .socios-scroll::-webkit-scrollbar{display:none;}
  .lp-root .socios-scroll.is-pronto .marquee{animation:none;}
}
.lp-root .socio{
  width:265px;height:346px;position:relative;flex:0 0 auto;margin-right:var(--space-20);
  perspective:1200px;cursor:pointer;outline:none;
}
.lp-root .socio-in{
  position:absolute;inset:0;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.3,.7,.25,1);
}
/* gira: mouse (só em aparelho que tem hover), foco de teclado, ou toque (.is-flip via JS) */
@media (hover:hover){ .lp-root .socio:hover .socio-in{transform:rotateY(180deg);} }
.lp-root .socio:focus-visible .socio-in,
.lp-root .socio.is-flip .socio-in{transform:rotateY(180deg);}
.lp-root .socio:focus-visible{outline:none;}
.lp-root .socio:focus-visible .socio-back{box-shadow:0 0 0 2px var(--blue);}
.lp-root .socio-face{
  position:absolute;inset:0;overflow:hidden;border-radius:var(--radius);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.lp-root .socio-front{background:var(--paper-3);}
.lp-root .socio-front img{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;
  filter:grayscale(1) contrast(1.05);
}
.lp-root .socio-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:var(--space-24) var(--space-20);text-align:center;color:var(--paper);}
/* Parte de baixo embaçada (0–25% de baixo para cima) + degradê escuro que some para cima.
   Embaçado = cópia da foto com blur, visível só nos 25% de baixo, com borda de transição suave.
   Sem backdrop-filter (falha dentro do card 3D no Safari). Mesmo arquivo: um download só. */
.lp-root .socio-front img.socio-blur{
  z-index:1;pointer-events:none;
  filter:grayscale(1) contrast(1.05) blur(8px)!important;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 10%,transparent 26%);
  mask-image:linear-gradient(0deg,#000 0%,#000 10%,transparent 26%);
}
.lp-root .socio-cap b{display:block;font-size:var(--fs-h4);font-weight:500;line-height:1.25;letter-spacing:var(--ls-titulo);}
.lp-root .socio-cap span{display:block;margin-top:var(--space-4);font-size:var(--fs-xs);font-weight:500;}
.lp-root .socio-front::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 18%,rgba(0,0,0,.12) 38%,rgba(0,0,0,0) 52%);
}
.lp-root .socio-back{
  transform:rotateY(180deg);
  background:var(--ink);color:var(--paper);
  padding:var(--space-24);
  display:flex;flex-direction:column;
}
.lp-root .socio-back b{font-size:var(--fs-h4);font-weight:500;line-height:1.25;letter-spacing:var(--ls-titulo);}
.lp-root .socio-back em{display:block;margin-top:var(--space-4);font-style:normal;font-size:var(--fs-xs);font-weight:500;}
.lp-root .socio-back p{margin-top:auto;font-size:var(--fs-sm);line-height:1.55;color:rgba(255,255,255,.6);}
.lp-root .socio-redes{display:flex;gap:var(--space-12);margin-top:var(--space-32);}
.lp-root .socio-rede{
  width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius-sm);
  color:var(--paper);text-decoration:none;transition:opacity .2s ease;
}
.lp-root a.socio-rede:hover{opacity:.7;}
.lp-root span.socio-rede{opacity:.45;}
.lp-root .socio-rede svg{width:16px;height:16px;display:block;}
@media (max-width:768px){
  .lp-root .socios{padding:var(--space-32) 0;}
  .lp-root .socio{width:200px;height:261px;}
  .lp-root .socio-back{padding:var(--space-20);}
  .lp-root .socio-back p{font-size:var(--fs-xs);}
  .lp-root .socio-redes{margin-top:var(--space-20);}
}

/* variante "aberta" (Movimento, 08/10/2026): sem a caixa; laterais embaçadas e sumindo = sensação de infinito.
   A fita some nas pontas (máscara no trilho) e o que está na ponta passa por um véu de blur. Sem fundo atrás,
   a máscara não mancha nada (armadilha 15.3 só vale com fundo). */
.lp-root .socios--aberta{background:none;border-radius:0;padding:var(--space-24) 0;position:relative;}
.lp-root .socios--aberta .socios-scroll{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
}
.lp-root .socios--aberta::before,.lp-root .socios--aberta::after{
  content:"";position:absolute;top:0;bottom:0;width:16%;z-index:2;pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lp-root .socios--aberta::before{left:0;-webkit-mask-image:linear-gradient(90deg,#000 20%,transparent);mask-image:linear-gradient(90deg,#000 20%,transparent);}
.lp-root .socios--aberta::after{right:0;-webkit-mask-image:linear-gradient(270deg,#000 20%,transparent);mask-image:linear-gradient(270deg,#000 20%,transparent);}
@media (max-width:768px){
  .lp-root .socios--aberta{padding:var(--space-16) 0;}
  .lp-root .socios--aberta::before,.lp-root .socios--aberta::after{width:12%;}
}

/* ============================================================
   Variante GRADE (Movimento, 23/10/2026, item 17) — grade estática
   inspirada no Team 1 do 21st.dev: fundo branco, foto 3:4, nome em
   destaque, cargo secundário, bio curta. Hover: a foto cresce de leve.
   3 colunas ≥760 (6 membros = 2 linhas cheias) · 2 abaixo. Sem rolagem lateral.
   ============================================================ */
.lp-root .socios-grade{background:#fff;padding:var(--space-40) 0;}
.lp-root .socios-grade-head{margin-bottom:var(--space-40);}
.lp-root .socios-grade-lista{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-40) var(--space-20);
}
@media (min-width:760px){ .lp-root .socios-grade-lista{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:1100px){ .lp-root .socios-grade-lista{gap:var(--space-48) var(--space-32);} }
.lp-root .socios-grade-item{min-width:0;}
.lp-root .socios-grade-foto{
  aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-2);
  margin-bottom:var(--space-16);
}
.lp-root .socios-grade-foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){ .lp-root .socios-grade-item:hover .socios-grade-foto img{transform:scale(1.04);} }
.lp-root .socios-grade-nome{font-size:var(--fs-lg,20px);font-weight:600;line-height:1.25;margin:0;color:var(--ink);}
.lp-root .socios-grade-cargo{font-size:var(--fs-sm,14px);font-weight:500;color:var(--blue);margin:4px 0 0;}
.lp-root .socios-grade-bio{font-size:var(--fs-sm,14px);line-height:1.5;color:var(--ink-2);margin:var(--space-8,8px) 0 0;}
.lp-root .socios-grade-redes{display:flex;gap:10px;margin-top:var(--space-12,12px);}
.lp-root .socios-grade-redes a{color:var(--ink-2);display:inline-flex;}
.lp-root .socios-grade-redes svg{width:18px;height:18px;}
.lp-root .socios-grade-redes a:hover{color:var(--blue);}
@media (max-width:759px){
  .lp-root .socios-grade-nome{font-size:16px;}
  .lp-root .socios-grade-bio{font-size:13px;}
}
@media (prefers-reduced-motion:reduce){ .lp-root .socios-grade-foto img{transition:none;} }