/* DOPEN · proposta B · 4 · piattaforme di settore
   Fila di schede con il settore della scheda al centro scritto gigante dietro.
   Desktop con movimento: sezione fissata, la fila scorre di lato (solo transform).
   Mobile / movimento ridotto: fila a scorrimento nativo con aggancio al centro. */
.plat{--cw:78vw;--fs:clamp(52px,15vw,120px);position:relative;margin-top:var(--sec);overflow:clip}
.plat-head{display:flex;flex-direction:column;gap:20px}
.plat-hint{display:flex;align-items:center;gap:8px}

.plat-stage{position:relative;margin-top:clamp(40px,6vw,72px)}
.plat-labels{position:relative;height:calc(var(--fs) * .76);margin-inline:var(--g);pointer-events:none}
.plat-labels span{position:absolute;left:50%;bottom:0;translate:-50% 0;transform:scale(var(--k,1));transform-origin:50% 100%;white-space:nowrap;
  font:800 var(--fs)/.76 var(--sans);letter-spacing:-.065em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .45s var(--ease)}
.plat-labels span.is-on{opacity:.9}

.plat-row{position:relative;z-index:1;margin-top:calc(var(--fs) * -.06);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.plat-row::-webkit-scrollbar{display:none}
.plat-track{position:relative;display:flex;gap:16px;width:max-content;padding:14px calc(50vw - var(--cw) / 2) 6px}
.plat-card{flex:0 0 var(--cw);width:var(--cw);scroll-snap-align:center;opacity:.42;transition:opacity .45s var(--ease)}
.plat-card.is-act{opacity:1}
.plat-img{position:relative;aspect-ratio:16/10;border-radius:3px;background:var(--bg2);transform-origin:50% 100%;transition:transform .5s var(--ease)}
.plat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:3px}
.plat-img::after{content:"";position:absolute;inset:0;border-radius:3px;box-shadow:0 0 0 2px var(--acc),0 0 26px rgba(255,46,136,.14);opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.plat-card.is-act .plat-img::after{opacity:1}
.plat-card.is-act .plat-img{transform:scale(1.025)}
.plat-cycle img{transition:opacity .7s var(--ease)}
.plat-cycle img+img{opacity:0}
.plat-cycle.is-cyc img{opacity:0}
.plat-cycle.is-cyc img.is-show{opacity:1}

.plat-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding-top:18px}
.plat-meta h3{font-weight:650;font-size:clamp(24px,2.2vw,34px);line-height:1.05;letter-spacing:-.04em}
.plat-meta .mono:first-child{padding-top:.75em}
.plat-meta .mono:nth-child(3),.plat-meta p{grid-column:2}
.plat-meta p{color:var(--mute);font-size:16px;max-width:40ch}

.plat-bar{position:relative;height:2px;margin:clamp(24px,3vw,40px) var(--g) 0;background:var(--line)}
.plat-bar i{position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:0 50%}

@media (min-width:900px){
  .plat{--cw:min(40vw,620px);--fs:clamp(96px,11.5vw,200px)}
  .plat-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36ch);column-gap:clamp(24px,4vw,72px);align-items:end}
  .plat-head .plat-hint{grid-column:2}
  .plat-row{margin-top:calc(var(--fs) * -.06 - 22px)}
  .plat-track{gap:clamp(24px,3vw,48px);padding-top:36px}
  .plat-meta{grid-template-columns:auto auto 1fr;align-items:baseline}
  .plat-meta .mono:nth-child(3){grid-column:auto}
  .plat-meta p{grid-column:2/-1}
  .plat-card.is-act .plat-img{transform:scale(1.045)}

  /* fissata */
  .plat.is-pin{--cw:min(30vw,calc((100vh - 470px) * 1.6));height:100vh;min-height:640px;display:flex;flex-direction:column;padding:calc(64px + clamp(16px,2.4vh,32px)) 0 clamp(20px,3vh,32px)}
  .plat.is-pin .h2{font-size:clamp(40px,4.4vw,76px)}
  .plat.is-pin .plat-hint{display:none}
  .plat.is-pin .plat-stage{flex:1;min-height:0;margin-top:0;display:flex;flex-direction:column;justify-content:center}
  .plat.is-pin .plat-row{overflow:visible;scroll-snap-type:none}
  .plat.is-pin .plat-track{will-change:transform}
  .plat.is-pin .plat-bar{margin-top:0}
}
@media (min-width:900px) and (max-height:760px){
  .plat.is-pin{--fs:clamp(80px,9vw,150px)}
  .plat.is-pin .plat-meta p{display:none}
}
/* mobile fissata: lo scorrimento verticale (o il dito in orizzontale) muove la fila */
@media (max-width:899px){
  .plat.is-pin{--cw:84vw;height:100vh;height:100svh;display:flex;flex-direction:column;padding:calc(64px + 12px) 0 18px}
  .plat.is-pin .plat-head{gap:12px}
  .plat.is-pin .h2{font-size:clamp(36px,10.5vw,52px)}
  .plat.is-pin .lead{font-size:16px}
  .plat.is-pin .plat-hint{display:none}
  .plat.is-pin .plat-stage{flex:1;min-height:0;margin-top:0;display:flex;flex-direction:column;justify-content:center}
  .plat.is-pin .plat-row{overflow:visible;scroll-snap-type:none;touch-action:pan-y}
  .plat.is-pin .plat-track{will-change:transform}
  .plat.is-pin .plat-meta{padding-top:14px}
  .plat.is-pin .plat-meta p{font-size:15px}
  .plat.is-pin .plat-bar{margin-top:14px}
}
@media (max-width:899px) and (max-height:700px){
  .plat.is-pin .lead{display:none}
}
@media (prefers-reduced-motion:reduce){
  .plat-card,.plat-img,.plat-img::after,.plat-labels span,.plat-cycle img{transition:none}
}