/* ============================================================
   9. REDES SOCIAIS — faixa horizontal com foco no centro

   Sete fotos 9:16 numa faixa. O scroll vertical da pagina move a
   faixa para o lado.

   Cada card fica TORTO e deslocado em repouso; ao se aproximar do
   meio da tela ele endireita, volta ao alinhamento e cresce um
   pouco. O desalinho e o estado normal, o foco e que resolve —
   nao alinhar tudo, e o mecanismo da secao.

   SEM cabecalho: nada de olho nem titulo acima da faixa.
   ============================================================ */

.redes-zona {
  position: relative;
  /* --rd-zona e ajustavel por ?rd_zona=N */
  height: calc(var(--rd-zona, 420) * 1vh);
  background: var(--tinta);
}

.redes-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Os 42vw nas pontas sao o que deixa o PRIMEIRO e o ULTIMO elemento
   chegarem ao centro da tela. Sem eles a faixa acaba antes. */
.redes-trilho {
  display: flex;
  align-items: center;
  gap: var(--rd-esp, 26px);
  padding-inline: 42vw;
  will-change: transform;
}

.rd-card {
  flex: none;
  width: clamp(180px, 17vw, 262px);
  aspect-ratio: 9 / 16;
  border-radius: 4px;
  overflow: hidden;
  background: var(--superficie);
  will-change: transform;
  z-index: 1;
}
.rd-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------- rotulo lateral ----------------
   Girado na borda esquerda, lendo de baixo para cima. E rotulo
   tecnico, nao titulo de secao: discreto, em neutro, do tamanho de
   um rotulo. Nao ha cabecalho no topo — esta linha e tudo. */
.rd-lateral {
  position: absolute;
  left: clamp(14px, 2.2vw, 32px);
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--fonte-mono);
  font-size: 11.5px;
  letter-spacing: .26em;
  color: var(--neutro);
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
}

/* ---------------- o convite ----------------
   Ultimo elemento da FAIXA, nao um rodape separado: por isso ele
   mora dentro do trilho e anda junto. */
.rd-fim {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: clamp(260px, 30vw, 440px);
  padding-inline: clamp(1rem, 3vw, 3rem);
}
.rd-fim p {
  margin: 0;
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--osso);
}
.rd-fim a {
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--ambar);
  border: 1px solid var(--ambar);
  border-radius: 99px;
  padding: .62em 1.25em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.rd-fim a:hover,
.rd-fim a:focus-visible { background: var(--ambar); color: var(--tinta); }

/* ---------------- mobile ----------------
   Sem pino e sem foco: a faixa rola por toque. O convite continua
   sendo o ultimo elemento dela. */
@media (max-width: 860px) {
  /* O rotulo VOLTA, horizontal no topo. Girado ele comia a largura
     que a faixa precisa; deitado custa so a altura de uma linha. */
  .rd-lateral {
    display: block;
    position: static;
    transform: none;
    text-align: left;
    padding-inline: var(--margem);
    margin-bottom: 18px;
  }
  .redes-zona { height: auto; }
  .redes-pin {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
    padding-block: clamp(3rem, 10vh, 6rem);
  }
  /* O encaixe e o que resolve a sensacao de fotos jogadas: sempre
     tem uma parada no centro. O foco e dirigido pelo dedo, no scroll
     do proprio trilho — ver redes.js. */
  .redes-trilho {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: 32vw;
    transform: none !important;
  }
  .rd-card {
    width: 62vw;
    scroll-snap-align: center;
  }
  .rd-fim { width: 78vw; scroll-snap-align: center; }
}

/* ---------------- sem movimento ----------------
   Cards alinhados e retos, faixa com scroll manual. */
@media (prefers-reduced-motion: reduce) {
  .redes-zona { height: auto; }
  .redes-pin {
    position: static;
    height: auto;
    overflow-x: auto;
    padding-block: clamp(3rem, 10vh, 6rem);
  }
  .redes-trilho { padding-inline: var(--margem); transform: none !important; }
  .rd-card { transform: none !important; }
}