/* ══ LA VETRINA DEL MESE ══
   Fondo a tinta del viaggio in scena, video verticale come un telefono.
   Niente filtri di sfocatura né vetro smerigliato: su iPhone, con il video
   acceso, bloccavano lo scorrimento. */
#vetrina{--vt1:#E5322D;--vt2:#5B1030;
  position:relative;overflow:hidden;padding:5rem 5vw 3.2rem;color:#fff;
  background:linear-gradient(135deg,var(--vt1) 0%,var(--vt2) 78%);transition:background .8s ease}
#vetrina::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 85% 20%,rgba(255,255,255,.16),transparent 70%),
             radial-gradient(50% 40% at 10% 90%,rgba(232,86,10,.35),transparent 70%)}
.vt-in{position:relative;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,5vw,4.5rem);align-items:center}

.vt-eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;margin:0 0 .8rem;opacity:.92}
.vt-title{font-family:'EB Garamond',serif;font-weight:400;font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.06;letter-spacing:-.01em;margin:0 0 1.6rem}
.vt-title span{display:block;font-size:.5em;font-style:italic;line-height:1.3;margin-top:.5rem;opacity:.95}
.vt-title em{font-style:italic;color:#fff;background:linear-gradient(transparent 62%,rgba(232,86,10,.9) 62%,rgba(232,86,10,.9) 92%,transparent 92%);padding:0 .12em}

.vt-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.vt-tab{font:inherit;font-size:.8rem;font-weight:500;color:#fff;cursor:pointer;padding:.6rem 1.1rem;border-radius:999px;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.35);transition:background .2s,color .2s;touch-action:manipulation}
.vt-tab:hover{background:rgba(0,0,0,.3)}
.vt-tab.on{background:#fff;color:#111;border-color:#fff}

.vt-tag{display:inline-block;font-size:.7rem;font-weight:700;font-style:italic;letter-spacing:.14em;text-transform:uppercase;
  background:#E8560A;padding:.38rem .75rem;border-radius:3px;transform:skewX(-10deg);margin:0 0 .9rem}
.vt-name{font-family:'EB Garamond',serif;font-style:italic;font-weight:500;font-size:clamp(2rem,3.6vw,3rem);line-height:1.02;margin:0 0 .8rem}
.vt-lead{font-size:.98rem;line-height:1.65;max-width:520px;opacity:.95;margin:0 0 1rem}
.vt-chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 1.5rem;padding:0}
.vt-chips li{font-size:.74rem;font-weight:500;padding:.34rem .75rem;border-radius:999px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.3)}
.vt-btns{display:flex;flex-wrap:wrap;gap:.6rem}
.vt-want,.vt-open{font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  padding:.95rem 1.5rem;border-radius:999px;transition:transform .15s,background .2s,color .2s;touch-action:manipulation}
.vt-want{background:#E8560A;color:#fff;border:0;box-shadow:none}
.vt-want:hover{background:#C44608;transform:translateY(-1px)}
.vt-open{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7)}
.vt-open:hover{background:#fff;color:#111}
.vt-note{font-size:.76rem;opacity:.75;margin:1.1rem 0 0}
.vt-credits{position:relative;max-width:1180px;margin:2.4rem auto 0;font-size:.64rem;line-height:1.5;opacity:.55}

/* il telefono */
.vt-phone{width:min(380px,40vw)}
.vt-stage{position:relative;aspect-ratio:9/16;max-height:78vh;margin-left:auto;border-radius:28px;overflow:hidden;background:#000;
  box-shadow:0 40px 90px -25px rgba(0,0,0,.65),0 0 0 6px rgba(0,0,0,.35),0 0 0 7px rgba(255,255,255,.18)}
.vt-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vt-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 18%,transparent 55%,rgba(0,0,0,.6) 100%)}
.vt-segs{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:4px;z-index:3}
.vt-segs i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.vt-segs b{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}

/* le scritte animate, nello stile dei nostri social */
.vt-cap{position:absolute;left:8%;right:18%;top:22%;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;pointer-events:none;opacity:0}
.vt-cap.on{opacity:1}
.vt-big{font-family:'Inter',sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.1vw,2.5rem);line-height:.98;text-shadow:0 3px 18px rgba(0,0,0,.55)}
.vt-big em{font-style:italic;color:#E8560A;-webkit-text-stroke:1.5px #fff;paint-order:stroke fill;text-shadow:0 3px 14px rgba(0,0,0,.55)}
.vt-bar{display:inline-block;background:#E8560A;transform:skewX(-10deg);padding:.32rem .7rem;border-radius:3px}
.vt-bar span{display:inline-block;transform:skewX(10deg);font-family:'Inter',sans-serif;font-weight:700;font-style:italic;font-size:clamp(.82rem,1.3vw,1rem)}
.vt-cap.on .vt-big{animation:vtPop .42s cubic-bezier(.2,1.4,.4,1) both}
.vt-cap.on .vt-bar{animation:vtSlide .4s cubic-bezier(.16,.84,.26,1) .1s both}
@keyframes vtPop{0%{opacity:0;transform:scale(1.35) translateY(8px)}100%{opacity:1;transform:none}}
@keyframes vtSlide{0%{opacity:0;transform:skewX(-10deg) translateX(-30px)}100%{opacity:1;transform:skewX(-10deg)}}

.vt-over{position:absolute;left:14px;right:70px;bottom:16px;z-index:2;display:none}
.vt-otag{font-size:.64rem;font-weight:700;font-style:italic;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .3rem;opacity:.95}
.vt-oname{font-family:'EB Garamond',serif;font-style:italic;font-size:1.5rem;line-height:1.05;margin:0;text-shadow:0 2px 14px rgba(0,0,0,.5)}

.vt-rail{position:absolute;right:10px;bottom:18px;z-index:3;display:flex;flex-direction:column;gap:14px;align-items:center}
.vt-r{background:none;border:0;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;font:inherit;touch-action:manipulation}
.vt-ri{width:46px;height:46px;border-radius:50%;box-shadow:none;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;transition:transform .15s,background .2s}
.vt-ri svg{width:22px;height:22px}
.vt-r-want .vt-ri{background:#E8560A;border-color:#E8560A}
.vt-r:hover .vt-ri{transform:scale(1.08)}
.vt-rl{font-size:.62rem;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.6);max-width:70px;text-align:center;line-height:1.15}
.vt-pp{position:absolute;left:12px;top:24px;z-index:3;width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}
.vt-pp span{width:0;height:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.vt-gira .vt-pp span{width:9px;height:11px;border:0;margin:0;border-left:3px solid #fff;border-right:3px solid #fff}

.vt-cambio .vt-info>*{animation:vtEntra .55s cubic-bezier(.16,.84,.26,1) both}
.vt-cambio .vt-name{animation-delay:.05s}.vt-cambio .vt-lead{animation-delay:.1s}.vt-cambio .vt-chips{animation-delay:.15s}.vt-cambio .vt-btns{animation-delay:.2s}
@keyframes vtEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* la finestra con il preventivo */
.vt-modal{position:fixed;inset:0;z-index:9000;background:#0b0b0b;display:none;flex-direction:column}
.vt-modal.open{display:flex}
.vt-mbar{flex:none;display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;background:#111;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.vt-mtit{font-family:'EB Garamond',serif;font-style:italic;font-size:1.25rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-mnote{font-size:.72rem;opacity:.65}
.vt-mwant{font:inherit;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:#E8560A;color:#fff;border:0;border-radius:999px;padding:.6rem 1rem;cursor:pointer}
.vt-mx{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.vt-mframe{flex:1;width:100%;border:0;background:#fff}
html.vt-bloccata,html.vt-bloccata body{overflow:hidden}

@media(max-width:900px){
  .vt-in{grid-template-columns:1fr;gap:1.6rem}
  .vt-phone{width:100%;max-width:420px;margin:0 auto;order:2}
  .vt-text{display:contents}
  .vt-eyebrow,.vt-title,.vt-tabs{order:1}
  .vt-info{order:3}
  .vt-stage{margin:0 auto;max-height:none}
  .vt-over{display:block}
  .vt-info .vt-tag,.vt-info .vt-name{display:none}
}
@media(max-width:700px){
  #vetrina{padding:4rem 16px 2.6rem}
  .vt-title{margin-bottom:1rem}
  .vt-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .vt-tabs::-webkit-scrollbar{display:none}
  .vt-tab{flex:none}
  .vt-stage{border-radius:22px;max-height:82vh;aspect-ratio:9/16}
  .vt-btns>*{flex:1;text-align:center;padding:.9rem .8rem}
  .vt-mnote{display:none}
  .vt-mbar{padding:.55rem .7rem}
}
@media(prefers-reduced-motion:reduce){
  #vetrina,.vt-cambio .vt-info>*,.vt-cap.on .vt-big,.vt-cap.on .vt-bar{animation:none;transition:none}
}