/* ==========================================================================
   AREA UNITED · Parte 2 · Comunidad (#AREAUNITED)
   Hashtag gigante en amarillo y fila de fotos 3:4 que se desplaza en
   horizontal con el scroll vertical. La sección recorta en X (overflow clip)
   para que nunca haya scroll horizontal de página.
   ========================================================================== */

.p2-comm {
  overflow-x: clip;
  padding-bottom: 0 !important;
}
.p2-comm-head {
  display: grid;
  gap: 28px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.p2-comm-top .label { color: var(--yellow); display: block; margin-bottom: 14px; }
/* El hashtag va CENTRADO sobre las fotos (como #RAISETHEBAR de Puretec):
   queda quieto en el centro mientras la fila se desplaza por detrás */
.p2-comm-stage { position: relative; padding-bottom: var(--section-y); }
.p2-comm-tag {
  position: absolute;
  inset: 0 0 var(--section-y) 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-display-wide);
  font-size: clamp(30px, 8.6vw, 150px);
  line-height: .85;
  font-style: normal;
  transform: skewX(-10deg); /* cursiva de marca, como el logotipo */
  white-space: nowrap;
  text-align: center;
  color: var(--yellow);
  letter-spacing: -.01em;
  pointer-events: none;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .55);
}
.p2-comm-aside { display: grid; gap: 20px; align-content: end; justify-items: start; }
.p2-comm-text { color: var(--gray-text); max-width: 36ch; font-size: 15px; }
.p2-comm-handle { color: var(--yellow); }

/* --- Fila de fotos --- */
.p2-comm-rail { position: relative; }
.p2-comm-track {
  display: flex;
  gap: 12px;
  padding-inline: var(--gutter);
  width: max-content;
  will-change: transform;
}
.p2-comm-item {
  flex: none;
  width: clamp(300px, 82vw, 460px);
}
.p2-comm-item:nth-child(even) { margin-top: 36px; }
.p2-comm-photo {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
}
.p2-comm-photo img { height: 100%; }
.p2-comm-photo::before { background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.5) 100%); }
.p2-comm-cap {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--white);
}

/* Sin JS, con reduced-motion o si el módulo no arranca: fila estática con
   scroll-snap manual (la clase is-scrub la pone el JS cuando toma el control) */
.p2-comm-rail:not(.is-scrub) { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.p2-comm-rail:not(.is-scrub)::-webkit-scrollbar { display: none; }
.p2-comm-rail:not(.is-scrub) .p2-comm-item { scroll-snap-align: start; }
.p2-comm-rail.is-scrub { overflow: visible; }

@media (min-width: 768px) {
  .p2-comm-head { grid-template-columns: 1fr auto; align-items: end; }
  .p2-comm-track { gap: 16px; }
  .p2-comm-item { width: clamp(380px, 40vw, 620px); }
  .p2-comm-item:nth-child(even) { margin-top: 48px; }
}
@media (min-width: 1024px) {
  .p2-comm-track { gap: 20px; }
  .p2-comm-item:nth-child(even) { margin-top: 64px; }
}