/* ==========================================================================
   DISEÑO DEPORTIVO — agencia, Newell's, piezas personales
   ========================================================================== */
/* ---------- Pósters (piezas verticales) ---------- */
.poster { display: block; position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 9 / 16; background: var(--ink-2); }
.poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.poster:hover img { transform: scale(1.05); }
.poster::after { content: attr(data-label); position: absolute; left: 10px; right: 10px; bottom: 10px; padding: .45em .8em; border-radius: 999px; font-family: var(--f-mono); font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; color: var(--on-acid); background: var(--acid); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .5s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster:hover::after { opacity: 1; transform: none; }
/* ---------- Serie para agencia (pista horizontal) ---------- */
.agency { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.agency__head { position: absolute; top: 104px; left: var(--gutter); max-width: 520px; z-index: 2; }
.agency__desc { color: var(--smoke); }
.agency__head .subtitle { margin-bottom: 1rem; }
.agency__track { display: flex; gap: clamp(40px, 6vw, 100px); padding: 18vh var(--gutter) 0 calc(var(--gutter) + 46vw); width: max-content; will-change: transform; }
.agency__group { display: flex; align-items: flex-end; gap: 18px; }
.agency__group .poster { width: clamp(180px, 17vw, 260px); flex-shrink: 0; }
.agency__tag { display: flex; flex-direction: column; gap: .3rem; align-self: flex-start; writing-mode: vertical-rl; transform: rotate(180deg); }
.agency__tag b { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 2.8vw, 2.8rem); letter-spacing: -.03em; }
.agency__tag .mono { color: var(--acid); }
.agency__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + 40px); height: 1px; background: var(--line); }
.agency__bar i { display: block; height: 100%; background: var(--acid); transform-origin: left; transform: scaleX(0); }
/* ---------- Newell's ---------- */
.club { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.club__desc { color: var(--smoke); max-width: 44ch; }
.club__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.poster--wide { aspect-ratio: 401 / 534; }
.club__pair .poster:nth-child(2) { transform: translateY(12%); }
/* ---------- Proyectos personales ---------- */
.personal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
.personal__col { display: grid; gap: 18px; will-change: transform; }
.personal__col:nth-child(even) { margin-top: 12vh; }
/* ---------- Sin animaciones ---------- */
.reduced .agency { height: auto; padding: 120px 0 80px; }
.reduced .agency__head { position: relative; top: 0; padding: 0 var(--gutter); margin-bottom: 2rem; }
.reduced .agency__track { padding: 0 var(--gutter); width: auto; overflow-x: auto; }
.reduced .personal__col:nth-child(even) { margin-top: 0; }
@media (max-width: 1100px) {
  .personal__grid { grid-template-columns: repeat(3, 1fr); }
  .personal__col:nth-child(4) { display: none; }
}
@media (max-width: 900px) {
  .club { grid-template-columns: 1fr; }
  .agency { height: auto; padding: 100px 0 60px; }
  .agency__head { position: relative; top: 0; left: 0; padding: 0 var(--gutter); margin-bottom: 2rem; }
  .agency__track { width: auto; padding: 0 var(--gutter) 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .agency__group .poster { width: 62vw; scroll-snap-align: center; }
  .agency__tag { writing-mode: horizontal-tb; transform: none; min-width: 40vw; align-self: center; }
  .agency__bar { display: none; }
  .personal__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .personal__col { gap: 10px; }
  .personal__col:nth-child(4) { display: grid; }
  .personal__col:nth-child(even) { margin-top: 6vh; }
}