/* =========================================================
   Caso studio · Yun Shop
   Solo stili di questa pagina: la base sta in mbp.css
   ========================================================= */

/* rosa di Yun: compare solo dentro i dati della griglia, mai sul testo */
:root{--cy-aria:clamp(96px,13vw,200px)}

/* etichette Telegraf */
.cy-etichetta,.cy-etichetta-s,.cy-cifre dt,.cy-risultati dt,.cy-striscia-assi,.cy-grafico-legenda,.cy-metodo summary,.cy-tab-nota{
  font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;line-height:1.15;letter-spacing:.03em}
.cy-etichetta{display:flex;align-items:center;gap:10px;margin-bottom:clamp(12px,2vh,22px);color:var(--bianco);text-shadow:0 1px 14px rgba(0,0,0,.5)}
.cy-etichetta i{width:8px;height:8px;background:var(--lime);box-shadow:0 0 12px rgba(132,209,21,.7);flex:none}
.cy-etichetta-s{color:var(--grigio);margin-bottom:12px}

/* ---------- 1. apertura ---------- */
.cy-apertura{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--nero-2)}
.cy-apertura>.media-pieno{z-index:-2}
.cy-apertura>.media-pieno video{object-position:50% 40%}
.cy-apertura-velo{z-index:-1;background:
  linear-gradient(90deg,rgba(14,15,12,.86) 0%,rgba(14,15,12,.55) 48%,rgba(14,15,12,.18) 100%),
  linear-gradient(180deg,rgba(14,15,12,.55) 0%,rgba(14,15,12,0) 26%,rgba(14,15,12,.2) 55%,rgba(14,15,12,.92) 100%)}
.cy-apertura-dentro{padding-block:calc(var(--menu-h) + 48px) clamp(64px,9vh,104px)}
.cy-titolo{font-size:clamp(46px,8.4vw,168px);line-height:.95;max-width:13ch;text-shadow:0 .03em .3em rgba(0,0,0,.35)}
.cy-apertura-piede{display:grid;grid-template-columns:minmax(0,40ch) minmax(0,1fr);align-items:end;gap:28px clamp(32px,6vw,120px);margin-top:clamp(22px,4vh,44px)}
.cy-apertura-piede .testo-l{color:var(--bianco-80);text-shadow:0 1px 18px rgba(0,0,0,.55)}
.cy-cifre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.cy-cifre>div{padding-top:16px;box-shadow:inset 0 1px 0 rgba(244,246,239,.22)}
.cy-cifre dt{color:var(--bianco-80);min-height:2.3em}
.cy-cifre dd{font-weight:300;font-size:clamp(40px,4.6vw,84px);line-height:1;letter-spacing:-.05em;margin-top:10px;font-variant-numeric:tabular-nums}
.cy-cifre .cy-cifre-prima{font-weight:400;font-size:14px;letter-spacing:0;color:var(--grigio);margin-top:8px}
.cy-cifre>div:first-child dd:not(.cy-cifre-prima){color:var(--lime)}
.js .cy-apertura .cy-titolo,.js .cy-apertura-piede,.js .cy-apertura .cy-etichetta{opacity:0;transform:translate3d(0,30px,0);transition:opacity 1.2s var(--curva-out),transform 1.2s var(--curva-out)}
.js .cy-apertura.pronta .cy-etichetta{opacity:1;transform:none}
.js .cy-apertura.pronta .cy-titolo{opacity:1;transform:none;transition-delay:.12s}
.js .cy-apertura.pronta .cy-apertura-piede{opacity:1;transform:none;transition-delay:.3s}

/* ---------- 2. da dove partiva ---------- */
.cy-prima{padding-block:var(--cy-aria)}
.cy-prima-testa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px clamp(32px,6vw,120px);align-items:end}
.cy-prima-testo{display:grid;gap:18px;max-width:46ch}
.cy-prima-testo p:not(.testo-l){color:var(--bianco-80)}
.cy-striscia{margin-top:clamp(56px,8vw,120px)}
.cy-striscia-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 24px;margin-bottom:16px}
.cy-striscia-testa .cy-etichetta-s{margin:0}
.cy-striscia-dato{font-size:var(--testo-l);letter-spacing:-.02em;color:var(--bianco-80)}
.cy-striscia-dato b{font-weight:400;color:var(--bianco)}
.cy-striscia-dato b.lime{color:var(--lime)}
.cy-striscia-dato .sep{color:var(--grigio);margin-inline:.3em}
/* 378 strisce: il colore medio vero di ogni copertina; si aprono da sinistra a destra */
.cy-barre{position:relative;display:flex;filter:saturate(2.1) contrast(1.08);height:clamp(150px,30vh,320px);gap:0;overflow:hidden;background:var(--nero-2)}
.cy-barre i{flex:1 1 0;min-width:0;display:block;transform-origin:50% 100%;transform:scaleY(.04);transition:transform 1s var(--curva-out);transition-delay:calc(var(--k,0) * 3ms)}
.cy-striscia.visto .cy-barre i{transform:none}
html:not(.js) .cy-barre i{transform:none}
.cy-barre .cy-segno{position:absolute;top:0;bottom:0;width:3px;margin-left:-1px;background:var(--lime);box-shadow:0 0 18px rgba(132,209,21,.8);z-index:2}
.cy-striscia-assi{position:relative;height:30px;margin-top:10px;color:var(--grigio)}
.cy-striscia-assi span{position:absolute;top:0;white-space:nowrap;transform:translateX(-50%)}
.cy-striscia-assi span:first-child{transform:none}
.cy-striscia-assi span:last-child{transform:translateX(-100%)}
.cy-striscia-assi .cy-asse-mbp{color:var(--lime)}
.cy-nota{margin-top:6px;font-size:var(--testo-s);color:var(--grigio);max-width:60ch}

/* ---------- 3. lo stile ---------- */
.cy-stile{position:relative;padding-block:var(--cy-aria);background:
  radial-gradient(60% 40% at 85% 10%,rgba(132,209,21,.06),transparent 70%),
  linear-gradient(180deg,var(--nero) 0%,var(--nero-2) 50%,var(--nero) 100%)}
.cy-stile-testa,.cy-format-testa,.cy-numeri-testa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px clamp(32px,6vw,120px);align-items:end;margin-bottom:clamp(56px,8vw,128px)}
.cy-stile-testa .testo-l,.cy-format-testa .testo-l,.cy-numeri-testa .testo-l{color:var(--bianco-80);max-width:44ch}

.cy-film{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--nero-2);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.cy-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.cy-mossa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,120px);align-items:center;max-width:1180px;margin-inline:auto}
.cy-mossa+.cy-mossa{margin-top:clamp(72px,10vw,160px)}
.cy-mossa .cy-film{width:min(100%,400px);justify-self:end}
.cy-mossa--destra{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.cy-mossa--destra .cy-film{order:2;justify-self:start}
.cy-mossa--destra .cy-mossa-testo{order:1;justify-self:end}
.cy-mossa-testo{max-width:36ch}
.cy-mossa-testo .titolo-m{margin-bottom:18px}
.cy-mossa-testo p:last-child{color:var(--bianco-80);font-size:var(--testo-l);line-height:1.4;letter-spacing:-.015em}

/* ---------- 4. i format ---------- */
.cy-format{padding-block:var(--cy-aria)}
.cy-format-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.cy-scheda .cy-film,.cy-tabellone{margin-bottom:22px}
.cy-scheda .titolo-s{margin-bottom:12px}
.cy-scheda p:last-child{color:var(--bianco-80)}
/* torneo: non c'è un finale pubblicabile, il tabellone si scrive */
.cy-tabellone{position:relative;aspect-ratio:9/16;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:.1em .3em;padding:24px;overflow:hidden;
  font-weight:300;font-size:clamp(34px,3.4vw,58px);letter-spacing:-.05em;line-height:1;
  background:
    radial-gradient(70% 50% at 50% 110%,rgba(132,209,21,.22),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.035) 8px,rgba(0,0,0,.14) 26px,rgba(0,0,0,.2) 30px),
    linear-gradient(180deg,#1b1c19,#121310);
  box-shadow:inset 0 0 0 1px rgba(244,246,239,.1),0 40px 90px -40px rgba(0,0,0,.9)}
.cy-tab-f{color:var(--grigio);font-family:var(--f-etichetta);font-weight:800;font-size:.5em;align-self:center}
.cy-tab-n.lime{font-size:2.2em;flex-basis:100%;text-align:center;margin-top:.1em}
.cy-tab-nota{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--bianco-60)}

/* ---------- 5. perché funziona ---------- */
.cy-perche{position:relative;padding-block:var(--cy-aria);background:var(--nero)}
.cy-perche-dentro{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px clamp(32px,6vw,120px);align-items:start}
.cy-perche-dentro>.titolo{position:sticky;top:calc(var(--menu-h) + 24px)}
.cy-perche-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,80px) clamp(28px,4vw,64px)}
.cy-perche-griglia>div{padding-top:20px;box-shadow:inset 0 1px 0 rgba(244,246,239,.14)}

/* ---------- 6. i numeri ---------- */
.cy-numeri{padding-block:var(--cy-aria)}
.cy-grafico{margin:0}
.cy-grafico-area{position:relative;display:flex;align-items:flex-end;gap:clamp(1px,.25vw,4px);height:clamp(220px,38vh,420px);padding-top:28px;
  background:repeating-linear-gradient(0deg,rgba(244,246,239,.07) 0,rgba(244,246,239,.07) 1px,transparent 1px,transparent 25%)}
.cy-grafico-area .cy-b{position:relative;flex:1 1 0;min-width:0;height:var(--h);background:rgba(157,157,152,.5);transform-origin:50% 100%;transform:scaleY(0);
  transition:transform 1.1s var(--curva-out);transition-delay:calc(var(--k,0) * 14ms)}
.cy-grafico-area .cy-b--dopo{background:var(--lime)}
.cy-grafico-area .cy-b--vuoto{background:transparent;flex-grow:2}
.cy-grafico.visto .cy-b{transform:none}
html:not(.js) .cy-grafico-area .cy-b{transform:none}
/* le due medie */
.cy-media{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(244,246,239,.45);pointer-events:none;z-index:2}
.cy-media span{position:absolute;top:-22px;font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.03em;color:var(--bianco);white-space:nowrap;
  background:rgba(14,15,12,.7);padding:3px 6px}
.cy-media--prima span{left:0}
.cy-media--dopo{border-top-color:rgba(132,209,21,.8)}
.cy-media--dopo span{right:0;color:var(--lime)}
.cy-grafico-legenda{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:16px;color:var(--grigio)}
.cy-grafico-legenda span{display:inline-flex;align-items:center;gap:8px}
.cy-grafico-legenda i{width:10px;height:10px}
.cy-l-prima{background:rgba(157,157,152,.6)}
.cy-l-dopo{background:var(--lime)}

.cy-risultati{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(24px,3vw,48px);margin-top:clamp(64px,8vw,120px)}
.cy-risultati>div{padding-top:18px;box-shadow:inset 0 1px 0 rgba(244,246,239,.16)}
.cy-risultati dt{color:var(--grigio)}
.cy-risultati dd{font-weight:300;font-size:clamp(46px,6vw,104px);line-height:1;letter-spacing:-.05em;margin-top:12px;font-variant-numeric:tabular-nums}
.cy-risultati .cy-r-prima{font-weight:400;font-size:15px;letter-spacing:0;color:var(--bianco-60);margin-top:10px}

.cy-metodo{margin-top:clamp(56px,7vw,100px);max-width:760px;box-shadow:inset 0 1px 0 rgba(244,246,239,.16),inset 0 -1px 0 rgba(244,246,239,.16)}
.cy-metodo summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;cursor:pointer;list-style:none;color:var(--bianco)}
.cy-metodo summary::-webkit-details-marker{display:none}
.cy-metodo summary::after{content:"+";font-family:var(--f-testo);font-weight:300;font-size:28px;line-height:1;color:var(--lime);transition:transform .6s var(--curva-out)}
.cy-metodo[open] summary::after{transform:rotate(45deg)}
.cy-metodo-testo{display:grid;gap:12px;padding-bottom:24px;color:var(--bianco-80);max-width:62ch}

/* ---------- 7. chiusura ---------- */
.cy-chiusura{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.cy-chiusura>.media-pieno{z-index:-3}
.cy-chiusura>.velo{z-index:-2}
.cy-chiusura>.fascio{z-index:-1}
.cy-chiusura-velo{background:linear-gradient(180deg,rgba(14,15,12,.6) 0%,rgba(14,15,12,.25) 30%,rgba(14,15,12,.35) 58%,rgba(14,15,12,.92) 100%)}
.cy-chiusura-dentro{padding-block:clamp(130px,18vh,210px) clamp(70px,11vh,120px)}
.cy-chiusura-titolo{font-size:clamp(46px,8vw,160px);line-height:.96;text-shadow:0 .03em .2em rgba(0,0,0,.3)}
.cy-chiusura-piede{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-top:clamp(28px,5vh,56px)}
.cy-chiusura .testo-l{max-width:32ch}
.cy-chiusura-nota{margin-top:10px}
.cy-chiusura-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;font-size:var(--testo)}
.cy-chiusura-azioni a:not(.pulsante){display:inline-flex;align-items:center;min-height:44px;color:var(--bianco-80);transition:color .6s var(--curva-out)}
.cy-chiusura-azioni a:not(.pulsante):hover{color:var(--lime)}

/* tedesco: «funktioniert.» è una parola sola, la colonna del titolo serve più larga */
@media (min-width:1101px){:lang(de) .cy-perche-dentro{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .cy-apertura-piede{grid-template-columns:1fr}
  .cy-format-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px clamp(20px,3vw,40px)}
  .cy-perche-dentro{grid-template-columns:1fr}
  .cy-perche-dentro>.titolo{position:static}
}
@media (max-width:900px){
  .cy-prima-testa,.cy-stile-testa,.cy-format-testa,.cy-numeri-testa{grid-template-columns:1fr}
  .cy-risultati{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- telefono ---------- */
@media (max-width:760px){
  .cy-apertura-dentro{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .cy-apertura-velo{background:linear-gradient(180deg,rgba(14,15,12,.6) 0%,rgba(14,15,12,.2) 22%,rgba(14,15,12,.55) 50%,rgba(14,15,12,.95) 100%)}
  .cy-titolo{font-size:clamp(42px,12.6vw,64px)}
  .cy-apertura-piede .testo-l{font-size:17px}
  .cy-cifre{gap:12px}
  .cy-cifre dt{font-size:11px;min-height:3.4em}
  .cy-cifre dd{font-size:clamp(30px,9vw,40px)}
  .cy-cifre .cy-cifre-prima{font-size:12px}
  .cy-etichetta,.cy-etichetta-s{font-size:12px}

  .cy-barre{height:clamp(120px,24vh,200px)}
  .cy-striscia-assi span:nth-child(2),.cy-striscia-assi span:nth-child(3){display:none}
  .cy-striscia-assi{height:40px}
  .cy-striscia-assi .cy-asse-mbp{top:18px}
  .cy-striscia-dato{font-size:16px}

  .cy-mossa,.cy-mossa--destra{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start}
  .cy-mossa .cy-film,.cy-mossa--destra .cy-film{order:0;justify-self:stretch;width:100%}
  .cy-mossa--destra .cy-mossa-testo{order:1;justify-self:start}
  .cy-mossa+.cy-mossa{margin-top:64px}
  .cy-mossa-testo .titolo-m{font-size:22px;letter-spacing:-.035em;font-weight:400;margin-bottom:10px}
  .cy-mossa-testo p:last-child{font-size:15px;line-height:1.45}

  .cy-format-griglia{gap:40px 14px}
  .cy-scheda .titolo-s{font-size:19px}
  .cy-scheda p:last-child{font-size:14px}
  .cy-tabellone{font-size:30px;padding:14px}

  .cy-perche-griglia{grid-template-columns:1fr;gap:36px}
  .cy-risultati{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}
  .cy-risultati dd{font-size:clamp(34px,10vw,48px)}
  .cy-media span{font-size:10px}

  .cy-chiusura .solo-tel{object-position:50% 0}
  .cy-chiusura-titolo{font-size:clamp(40px,11.6vw,60px)}
  .cy-chiusura-azioni{gap:8px 20px}
}
/* telefono stretto: la mossa va in colonna, il video resta grande ma non tutto lo schermo */
@media (max-width:400px){
  .cy-mossa,.cy-mossa--destra{grid-template-columns:1fr}
  .cy-mossa .cy-film,.cy-mossa--destra .cy-film{width:72%}
  .cy-cifre{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cy-cifre dd{font-size:30px}
}
/* telefono in orizzontale e schermi bassi */
@media (max-height:520px) and (orientation:landscape){
  .cy-apertura,.cy-chiusura{min-height:auto}
  .cy-apertura-dentro{padding-top:calc(var(--menu-h) + 24px);padding-bottom:40px}
  .cy-titolo{font-size:clamp(36px,6.4vw,64px)}
  .cy-apertura-piede{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .cy-cifre dd{font-size:32px}
  .cy-mossa .cy-film{width:min(100%,240px)}
  .cy-chiusura-titolo{font-size:clamp(34px,6vw,60px)}
}

@media (prefers-reduced-motion:reduce){
  .cy-barre i,.cy-grafico-area .cy-b{transform:none;transition:none}
  .js .cy-apertura .cy-titolo,.js .cy-apertura-piede,.js .cy-apertura .cy-etichetta{opacity:1;transform:none;transition:none}
}

/* ---------- kit: i pezzi grafici smontati ---------- */
.cy-kit{margin-top:clamp(96px,12vw,200px)}
.cy-kit-testa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(32px,6vw,120px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.cy-kit-testa p{color:var(--bianco-80);max-width:50ch}
.cy-kit-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(14px,1.6vw,28px)}
.cy-pezzo{margin:0}
.cy-pezzo-film{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--nero-2);box-shadow:inset 0 0 0 1px rgba(244,246,239,.08),0 30px 70px -36px rgba(0,0,0,.9)}
.cy-pezzo-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cy-pezzo figcaption{display:grid;gap:6px;margin-top:14px;font-size:15px;line-height:1.45;color:var(--bianco-80)}
.cy-pezzo figcaption .cy-etichetta-s{margin:0;color:var(--bianco)}
.cy-pezzo--sfx{grid-column:span 1;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2vw,32px);aspect-ratio:auto;
  background:
    radial-gradient(80% 60% at 20% 110%,rgba(132,209,21,.2),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.03) 7px,rgba(0,0,0,.14) 22px,rgba(0,0,0,.2) 26px),
    linear-gradient(180deg,#1b1c19,#121310);
  box-shadow:inset 0 0 0 1px rgba(244,246,239,.1)}
.cy-pezzo--sfx .titolo-s{margin-bottom:12px}
.cy-pezzo--sfx p:last-child{color:var(--bianco-80);font-size:15px;line-height:1.5}
.cy-l-mezzo{background:rgba(132,209,21,.32)}
.cy-grafico-area .cy-b--mezzo{background:rgba(132,209,21,.3)}
@media (max-width:1100px){.cy-kit-griglia{grid-template-columns:repeat(3,minmax(0,1fr))}.cy-pezzo--sfx{grid-column:span 1}}
@media (max-width:900px){.cy-kit-testa{grid-template-columns:1fr}}
@media (max-width:760px){
  .cy-kit-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .cy-pezzo figcaption{font-size:13.5px}
  .cy-pezzo--sfx{grid-column:1/-1}
}
/* tabellone in colonna: 16 → 1 dall'alto in basso, nessun a capo casuale */
.cy-tabellone{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:.06em}
.cy-tabellone .cy-tab-f{display:block;transform:rotate(90deg);font-size:.42em;line-height:1}
.cy-tabellone .cy-tab-n.lime{flex-basis:auto;margin-top:.04em;font-size:1.9em}

/* schermi molto larghi: le cifre restano dentro la loro colonna, mai sopra la riga «prima» */
@media (min-width:1600px){
  .cy-apertura-piede{grid-template-columns:minmax(0,36ch) minmax(0,1fr)}
  .cy-cifre dd{font-size:clamp(40px,3.4vw,64px)}
  .cy-risultati dd{font-size:clamp(56px,4.6vw,88px)}
}
.cy-cifre>div,.cy-risultati>div{min-width:0}