/* =========================================================
   Caso Cara Siria · branding social
   La cornice resta MBP (scuro, lime, Sora, Telegraf);
   dentro vivono l'oro e il marrone della loro scatola.
   ========================================================= */

.cs{
  --cs-marrone:#5A2414;
  --cs-oro:#906734;
  --cs-oro-chiaro:#C9A26A;   /* l'oro del loro logo, leggibile sul fondo scuro */
  --cs-crema:#F3EADB;
  --cs-prugna:#4A2A2E;
  --cs-noce:#2B110A;
  --cs-aria:clamp(88px,11vw,180px);
}
.cs-oro{color:var(--cs-oro-chiaro)}
.cs-misura{max-width:44ch}
.cs-etichetta{display:flex;align-items:center;gap:10px;color:var(--cs-oro-chiaro);margin-bottom:clamp(18px,2vw,28px)}
.cs-etichetta::before{content:"";width:8px;height:8px;background:var(--lime);flex:none}
.cs-etichetta a{color:var(--bianco-80);transition:color .5s var(--curva-out)}
.cs-etichetta a:hover{color:var(--lime)}
.cs-etichetta span{color:var(--bianco-60)}
.cs-h2{font-size:var(--t-l);margin-bottom:clamp(22px,2.4vw,36px);max-width:15ch}
.cs-sotto{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco-60);margin-bottom:22px}

/* il mondo del cliente: fondo noce con la luce calda della bottega */
.cs-mondo{position:relative;isolation:isolate;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(201,162,106,.16), transparent 70%),
    radial-gradient(70% 60% at 0% 100%, rgba(90,36,20,.55), transparent 70%),
    linear-gradient(180deg,var(--nero) 0%,var(--cs-noce) 18%,#2a130d 70%,var(--nero) 100%)}

/* ---------- 1. apertura ---------- */
.cs-apertura{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--menu-h) + clamp(24px,4vw,56px));padding-bottom:clamp(48px,6vw,96px)}
.cs-apertura-luce{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 60% at 74% 48%, rgba(201,162,106,.20), transparent 70%),
    radial-gradient(50% 70% at 80% 60%, rgba(90,36,20,.45), transparent 75%),
    linear-gradient(180deg,var(--nero),var(--nero-2))}
.cs-apertura-dentro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:center}
.cs-titolo{font-size:clamp(52px,8.4vw,168px);line-height:.92;margin-bottom:clamp(24px,2.6vw,40px)}
.cs-apertura-intro{max-width:36ch;color:var(--bianco-80)}
.cs-scheda{display:grid;grid-template-columns:repeat(4,minmax(0,auto));gap:clamp(16px,2.4vw,40px);margin-top:clamp(32px,4vw,64px);
  padding-top:22px;border-top:1px solid var(--bianco-12);justify-content:start}
.cs-scheda dt{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco-60);margin-bottom:8px}
.cs-scheda dd{font-size:var(--testo-s);line-height:1.4;color:var(--bianco)}
.cs-insegna{position:relative;aspect-ratio:3/4;max-height:78vh;width:100%;justify-self:end;overflow:hidden;background:var(--cs-noce);
  box-shadow:0 40px 120px -30px rgba(201,162,106,.35),0 0 0 1px rgba(201,162,106,.18)}
.cs-insegna video,.cs-vassoio video,.cs-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-didascalia{position:absolute;left:16px;right:16px;bottom:14px;font-size:12px;line-height:1.35;color:var(--bianco-80);text-shadow:0 1px 14px rgba(0,0,0,.7)}
.cs-insegna::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(180deg,transparent,rgba(14,15,12,.65));pointer-events:none}
.cs-didascalia{z-index:1}

/* ---------- 2. partenza ---------- */
.cs-partenza{padding-block:var(--cs-aria)}
.cs-partenza-dentro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,120px);align-items:end}
.cs-partenza-testo .testo-l{margin-bottom:20px}
.cs-vassoio{position:relative;aspect-ratio:9/16;max-height:72vh;width:100%;overflow:hidden;background:var(--cs-noce);box-shadow:0 0 0 1px rgba(201,162,106,.16)}

.cs-sistema{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);margin-top:clamp(64px,8vw,140px);
  padding-top:clamp(28px,3vw,44px);border-top:1px solid rgba(201,162,106,.22)}
.cs-tinte{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,16px)}
.cs-tinte li{display:flex;flex-direction:column;gap:6px;min-width:0}
.cs-tinte i{display:block;aspect-ratio:3/4;background:var(--c);box-shadow:inset 0 0 0 1px rgba(243,234,219,.14);margin-bottom:8px}
.cs-tinte b{font-weight:500;font-size:var(--testo-s);line-height:1.25}
.cs-tinte span{font-size:12px;color:var(--bianco-60);letter-spacing:.02em}
.cs-caratteri dl>div{display:grid;grid-template-columns:minmax(0,10ch) minmax(0,1fr);gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(201,162,106,.16)}
.cs-caratteri dl>div:first-child{padding-top:0}
.cs-caratteri dt{font-size:var(--t-s);font-weight:400;letter-spacing:-.03em;color:var(--cs-crema)}
.cs-caratteri dd{font-size:var(--testo-s);color:var(--bianco-80)}
.cs-arabo{font-family:"Geeza Pro","Noto Naskh Arabic","Arial",serif;color:var(--cs-oro-chiaro)!important;font-size:clamp(26px,2.2vw,34px)!important;line-height:1.2;text-align:left}

/* ---------- 3. la proposta come PDF ---------- */
.cs-pdf{position:relative;padding-block:var(--cs-aria) clamp(64px,8vw,120px);background:linear-gradient(180deg,var(--nero) 0%,var(--nero-2) 100%);overflow:hidden}
.cs-pdf-testa{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(36px,4vw,64px)}
.cs-pdf-testa .cs-h2{margin-bottom:0}
.cs-pdf-lato .testo{margin-bottom:24px;max-width:40ch}
.cs-scarica{gap:12px}
.cs-peso{font-family:var(--f-testo);font-weight:400;text-transform:none;letter-spacing:0;font-size:13px;opacity:.6}

.cs-libro{position:relative}
.cs-libro-pista{display:flex;gap:clamp(12px,1.6vw,28px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gut);padding-inline:var(--gut);padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.cs-libro-pista::-webkit-scrollbar{display:none}
.cs-libro-pista:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.cs-pagina{flex:0 0 min(72vw,1180px);scroll-snap-align:start;margin:0}
.cs-pagina img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--cs-noce);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(244,246,239,.06)}
.cs-pagina figcaption{display:flex;gap:14px;align-items:baseline;margin-top:16px;font-size:var(--testo-s);line-height:1.4;color:var(--bianco-80);max-width:60ch}
.cs-num{font-family:var(--f-etichetta);font-weight:800;font-size:13px;color:var(--cs-oro-chiaro);flex:none}
/* ultima pagina: un po' d'aria dopo, per arrivare in fondo con lo snap */
.cs-libro-pista::after{content:"";flex:0 0 1px}

.cs-libro-comandi{display:flex;align-items:center;gap:clamp(16px,2vw,32px);margin-top:clamp(20px,2.4vw,36px)}
.cs-libro-conta{font-family:var(--f-etichetta);font-weight:800;font-size:13px;letter-spacing:.03em;color:var(--bianco-60);min-width:5.5ch;white-space:nowrap}
.cs-libro-conta b{color:var(--bianco)}
.cs-libro-barra{position:relative;flex:1;height:1px;background:var(--bianco-12);overflow:hidden}
.cs-libro-barra i{position:absolute;inset:0;background:var(--cs-oro-chiaro);transform-origin:0 50%;transform:scaleX(var(--avanza,.125));transition:transform .6s var(--curva-out)}
.cs-libro-frecce{display:flex;gap:8px}

.cs-freccia{display:inline-grid;place-items:center;width:52px;height:52px;font-family:var(--f-etichetta);font-weight:800;font-size:18px;color:var(--bianco);
  box-shadow:inset 0 0 0 1px rgba(244,246,239,.3);background:rgba(14,15,12,.35);transition:background .5s var(--curva-out),color .5s var(--curva-out),opacity .4s}
.cs-freccia:hover{background:var(--lime);color:var(--nero);box-shadow:none}
.cs-freccia[disabled]{opacity:.3;pointer-events:none}

/* ---------- 4. caroselli ---------- */
.cs-caroselli{padding-block:var(--cs-aria)}
.cs-caroselli-testa{margin-bottom:clamp(40px,5vw,80px)}
.cs-caroselli-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2vw,36px);align-items:start}
.cs-carosello{min-width:0}
.cs-ig{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--cs-noce);box-shadow:0 30px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(201,162,106,.14)}
.cs-ig-pista{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;outline:none}
.cs-ig-pista::-webkit-scrollbar{display:none}
.cs-ig-pista:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.cs-slide{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.cs-slide img{width:100%;height:100%;object-fit:cover}
.cs-ig-conta{position:absolute;top:12px;right:12px;padding:5px 9px;background:rgba(14,15,12,.6);font-family:var(--f-etichetta);font-weight:800;font-size:12px;letter-spacing:.03em;color:var(--bianco-80)}
.cs-ig-conta b{color:var(--bianco)}
.cs-ig .cs-freccia{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;font-size:15px;opacity:0;background:rgba(14,15,12,.55)}
.cs-freccia--prec{left:10px}
.cs-freccia--succ{right:10px}
.cs-ig:hover .cs-freccia,.cs-ig:focus-within .cs-freccia{opacity:1}
.cs-ig:hover .cs-freccia[disabled],.cs-ig:focus-within .cs-freccia[disabled]{opacity:.25}
.cs-pallini{display:flex;justify-content:center;gap:5px;margin:14px 0 20px}
.cs-pallini i{width:5px;height:5px;border-radius:50%;background:var(--bianco-12);transition:background .4s,transform .4s var(--curva-out)}
.cs-pallini i.su{background:var(--cs-oro-chiaro);transform:scale(1.3)}
.cs-car-tag{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--cs-oro-chiaro);margin-bottom:10px}
.cs-car-titolo{font-weight:400;font-size:var(--t-s);line-height:1.12;letter-spacing:-.035em;margin-bottom:10px;text-wrap:balance}
.cs-car-testo{color:var(--bianco-80);font-size:var(--testo-s)}

/* ---------- 5. riprese ---------- */
.cs-riprese{padding-block:var(--cs-aria);background:linear-gradient(180deg,var(--nero) 0%,var(--nero-2) 100%)}
.cs-riprese-dentro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,120px);align-items:center}
.cs-riprese-film{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px)}
.cs-film{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--cs-noce);box-shadow:0 0 0 1px rgba(201,162,106,.14)}
.cs-film--giu{margin-top:clamp(40px,8vw,140px)}

/* ---------- 6. servizio ---------- */
.cs-servizio{padding-block:clamp(56px,7vw,120px);border-top:1px solid var(--bianco-12)}
.cs-servizi{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,3vw,48px)}
.cs-servizi li{padding:10px 14px;box-shadow:inset 0 0 0 1px rgba(201,162,106,.3);font-size:var(--testo-s);color:var(--cs-crema)}
.cs-risolto{font-size:var(--t-m);max-width:22ch}

/* ---------- 7. chiusura ---------- */
.cs-chiusura{padding-block:clamp(110px,14vw,230px) clamp(120px,14vw,220px)}
.cs-chiusura-titolo{font-size:var(--t-xl);max-width:13ch;margin-bottom:clamp(24px,2.6vw,40px)}
.cs-chiusura-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(28px,3vw,44px)}
.cs-wa{font-size:var(--testo-s);color:var(--bianco-80)}
.cs-wa a{color:var(--bianco);box-shadow:inset 0 -1px 0 rgba(244,246,239,.3)}
.cs-wa a:hover{color:var(--lime)}

/* ---------- misure ---------- */
@media (max-width:1180px){
  .cs-caroselli-griglia{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,40px);row-gap:clamp(48px,6vw,80px)}
  .cs-carosello{max-width:460px}
  .cs-scheda{grid-template-columns:repeat(2,minmax(0,auto))}
}
@media (max-width:900px){
  .cs-apertura-dentro{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .cs-sistema{grid-template-columns:1fr}
  .cs-pdf-testa{grid-template-columns:1fr;align-items:start}
  .cs-pagina{flex-basis:84vw}
  .cs-riprese-dentro{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cs-apertura{min-height:auto;align-items:flex-start}
  .cs-apertura-dentro{grid-template-columns:1fr;gap:36px}
  .cs-insegna{max-height:none;aspect-ratio:1/1;justify-self:stretch;order:-1}
  .cs-titolo{font-size:clamp(46px,14.2vw,78px)}
  .cs-partenza-dentro{grid-template-columns:1fr;gap:40px}
  .cs-vassoio{aspect-ratio:4/5;max-height:none}
  .cs-tinte{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .cs-tinte b{font-size:11px;font-weight:500}
  .cs-tinte span{font-size:10px}
  .cs-caratteri dl>div{grid-template-columns:1fr;gap:4px}
  .cs-pagina{flex-basis:88vw}
  .cs-libro-frecce{display:none}
  .cs-caroselli-griglia{grid-template-columns:1fr;row-gap:64px}
  .cs-carosello{max-width:none}
  .cs-ig .cs-freccia{display:none}
  .cs-riprese-film{gap:10px}
  .cs-film--giu{margin-top:56px}
  .cs-chiusura-titolo{font-size:clamp(44px,12.4vw,72px)}
}
@media (max-width:380px){
  .cs-tinte{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}
  .cs-tinte i{aspect-ratio:4/3}
  .cs-scheda{grid-template-columns:1fr 1fr}
}
/* telefono in orizzontale: niente schermi alti, il girato si accorcia */
@media (max-height:520px) and (orientation:landscape){
  .cs-apertura{min-height:auto}
  .cs-apertura-dentro{grid-template-columns:minmax(0,1fr) minmax(0,.55fr)}
  .cs-insegna{order:0;aspect-ratio:3/4;max-height:80vh}
  .cs-titolo{font-size:clamp(40px,8vw,72px)}
  .cs-vassoio,.cs-film{max-height:80vh}
  .cs-partenza-dentro{grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}
  .cs-vassoio{aspect-ratio:9/16;justify-self:end;width:auto;height:80vh}
  .cs-pagina{flex-basis:min(72vw,calc(78vh * 16 / 9))}
  .cs-caroselli-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-carosello{max-width:340px}
  .cs-riprese-film{max-width:100vh}
}
@media (prefers-reduced-motion:reduce){
  .cs-libro-pista,.cs-ig-pista{scroll-behavior:auto}
}

/* ogni pagina si apre a tutta grandezza */
.cs-pagina-apri{display:block;cursor:zoom-in}
.cs-pagina-apri img{transition:transform .9s var(--curva-out)}
@media (hover:hover){.cs-pagina-apri:hover img{transform:translateY(-4px)}}