/* Vitrine de redes sociais (celular com o feed, troca de empresa, carrosséis, stories e reels).
   Saiu de trabalhos.css para servir ao componente VitrineRedes em /trabalhos e na página de redes.
   O convite e o cromo do player ficam em palco-sites.css, que também cobre `.vitrine-redes`. */
@scope (.pagina-trabalhos, .vitrine-redes) {

:scope {
  --dourado: var(--color-dourado);
  --dourado-texto: var(--color-dourado-texto);
  --dourado-escuro: var(--color-dourado-escuro);
  --profundo: var(--color-profundo);
  --ardosia: var(--color-ardosia);
  --cinza-texto: var(--color-cinza-texto);
  --disp: var(--font-heading);
  --mono: var(--font-small);
}

/* O celular cresceu de 340 para 360px (Dani, 2026-09-24). Stories e reels seguem na coluna da direita,
   como sempre foram: o que estava pequeno era a versão da imagem, não o espaço. */
.social-grid{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start}
.coluna-fone{position:sticky;top:92px}
.fone{border-radius:34px;padding:10px;background:var(--color-profundo);box-shadow:0 34px 64px -32px color-mix(in srgb, var(--color-profundo) 55%, transparent)}
/* troca de empresa — um controle em pílula, em cima do celular, que avisa que há mais clientes */
.troca{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;margin:0 auto 18px;
  padding:7px 8px;border-radius:999px;border:1px solid color-mix(in srgb, var(--color-dourado-escuro) 40%, transparent);
  background:color-mix(in srgb, var(--color-dourado) 8%, #fff)}
.btn-seta{width:40px;height:40px;border-radius:50%;border:1px solid color-mix(in srgb, var(--color-dourado-escuro) 55%, transparent);
  background:#fff;cursor:pointer;font-size:16px;color:var(--dourado-texto);flex:none;
  transition:background .2s,border-color .2s,color .2s,transform .2s}
.btn-seta:hover{background:var(--dourado);border-color:var(--dourado);color:var(--color-profundo);transform:scale(1.06)}
.btn-seta:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.troca-info{display:flex;flex-direction:column;align-items:center;min-width:9.5em;line-height:1.15}
.troca-dica{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dourado-texto)}
.troca-nome{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--profundo);margin-top:1px}
.troca-contador{font-family:var(--mono);font-size:11px;color:var(--cinza-texto);margin-top:1px}
.trocando{animation:aparecer .4s ease}
@keyframes aparecer{from{opacity:.15;transform:translateY(6px)}to{opacity:1;transform:none}}
.fone .tela{border-radius:26px;overflow:hidden;background:#fff}
.ig-top{display:flex;align-items:center;gap:12px;padding:16px 14px 14px}
.ig-top .av{width:52px;height:52px;border-radius:50%;background:#fff;object-fit:cover;flex:0 0 auto;
  border:2px solid #fff;box-shadow:0 0 0 2px var(--dourado)}
.ig-top b{display:block;font-family:var(--disp);font-size:15px;color:var(--profundo)}
.ig-top b a{color:inherit}
.ig-top b a:hover{text-decoration:underline}
.ig-top span{font-size:12px;color:var(--color-cinza-texto)} /* cinza-frio dava 3,31:1 no branco */
/* Feed: a grade 3×3 já vem montada numa imagem só. A altura segue a proporção real da arte (uns
   clientes têm feed quadrado, outros 4:5), para não cortar. */
.ig-feed{display:block;width:100%;height:auto}
.social-dir{display:flex;flex-direction:column;gap:34px}
/* a vitrine mora numa faixa clara nas duas páginas: título e apoio em tom escuro */
.bloco-mini h3{font-size:19px;color:var(--profundo)}
.bloco-mini .sub{margin-top:6px;font-size:14px;color:var(--ardosia)}
.duplas{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
.ig-car{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 20px 40px -30px color-mix(in srgb, var(--color-profundo) 50%, transparent)}
/* A proporção do carrossel vem da própria arte (--ar, definida no componente): quadrado num cliente,
   4:5 noutro. Assim o slide não é cortado. */
.ig-car .quadro{position:relative;aspect-ratio:var(--ar,1);overflow:hidden}
.ig-car .fita{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ig-car .fita::-webkit-scrollbar{display:none}
.ig-car .fita > img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center}
.ig-car .pontos{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:5px;justify-content:center}
/* O contorno escuro mantém os pontos visíveis sobre slide branco. */
.ig-car .pontos u{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);text-decoration:none;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--color-abissal) 28%, transparent)}
.ig-car .pontos u.on{background:#fff}
.mini-seta{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px;border-radius:50%;
  border:0;background:rgba(255,255,255,.88);color:var(--color-profundo);font-size:14px;cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .25s,background .2s;box-shadow:0 6px 16px -8px color-mix(in srgb, var(--color-abissal) 80%, transparent)}
.ig-car:hover .mini-seta,.mini-seta:focus-visible{opacity:1}
.mini-seta:hover{background:#fff}
.mini-seta.esq{left:8px}
.mini-seta.dir{right:8px}
@media (hover:none){.mini-seta{opacity:.9}}
.ig-car .pe{padding:12px 14px;font-size:13px;color:var(--ardosia)}
.stories{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.story{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--color-profundo);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);text-align:center;padding:14px}
.story > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story::before{content:"";position:absolute;z-index:1;top:9px;left:9px;right:9px;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.story::after{content:"";position:absolute;z-index:1;top:9px;left:9px;width:38%;height:3px;border-radius:2px;background:#fff}
.reels{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center;margin-top:16px}
.reel{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--color-profundo);
  box-shadow:0 24px 44px -30px color-mix(in srgb, var(--color-profundo) 60%, transparent)}
.reel > img,.reel > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .convite{bottom:14px;gap:7px;padding:7px 12px 7px 9px;font-size:9.5px}

/* o ponto de quebra subiu de 1020 para 1100: em 1024 o carrossel ficava espremido ao lado do celular */
@media (max-width:1100px){
  .social-grid{grid-template-columns:1fr}
  /* O sticky mora em `.coluna-fone`; a regra do protótipo mirava `.fone` e não pegava, então
     no mobile o celular ficava grudado e o resto da seção passava por cima dele. */
  .coluna-fone{position:static}
  .fone{max-width:340px;margin:0 auto}
}
@media (max-width:680px){
  /* no celular a peça vale mais inteira do que em dupla: carrossel um por linha e stories dois */
  .duplas{grid-template-columns:1fr}
  .stories{grid-template-columns:1fr 1fr}
  .reels{grid-template-columns:1fr}
  .reel{max-width:240px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
}

}