/* ==========================================================================
   BESKGIN — Foglio di stile
   --------------------------------------------------------------------------
   Sistema di coordinate: il desktop replica l'artboard del PDF (1200 unità).
   1 unità = var(--u) = min(100vw, 1200px) / 1200.
   A viewport ≥1200px: 1u = 1px (resa identica al PDF). Sotto, scala in
   proporzione. Sotto i 760px alcune sezioni passano alla variante mobile.
   ========================================================================== */

@font-face{
  font-family:'DIN Condensed';
  src:url('../fonts/DINCondensed-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:block;
}

:root{
  --u: calc(min(100vw, 1200px) / 1200);
  --navy:  #01051E;
  --pink:  #EC267B;
  --teal:  #1B7387;
  --cream: #F3F1EA;
  --tlight:#A9DDDF;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);
  font-family:'DIN Condensed',sans-serif;font-weight:700;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block}
a{color:inherit;text-decoration:none}
section{position:relative;width:100%}

/* contenitore contenuti: 1200u centrato dentro sezioni full-bleed */
.art{position:relative;width:calc(1200*var(--u));margin:0 auto;height:100%}

/* riga di testo posizionata alle coordinate (baseline) del PDF */
.t{position:absolute;line-height:1;white-space:pre;
   font-kerning:normal;font-variant-ligatures:none}

/* grafiche vettoriali e bottiglie posizionate in assoluto */
.v{position:absolute}
.v img,.v>svg{width:100%;height:100%;display:block}
.bi{position:absolute}

/* ------------------------------ PULSANTI ------------------------------ */
/* Tutti i CTA condividono .btn: stesso hover per riconoscibilità. */
.btn{
  position:absolute;display:block;cursor:pointer;
  transition:transform .18s ease, filter .18s ease;
  will-change:transform;
}
.btn img{width:100%;height:100%;display:block;pointer-events:none}
.btn span{position:absolute;line-height:1;white-space:pre;pointer-events:none}
.btn:hover,.btn:focus-visible{
  transform:translateY(calc(-3*var(--u))) scale(1.04);
  filter:brightness(1.12) drop-shadow(0 calc(8*var(--u)) calc(16*var(--u)) rgba(1,5,30,.25));
}
.btn:active{transform:scale(.96);transition-duration:.08s}
.btn:focus-visible{outline:3px solid var(--cream);outline-offset:4px;border-radius:calc(30*var(--u))}

/* link testuali (SCOPRI…, VAI ALLO SHOP): sottolineatura animata */
.cta{cursor:pointer;display:inline-block;position:relative}
.cta::after{
  content:'';position:absolute;left:0;right:0;bottom:-0.14em;height:.07em;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.cta:hover::after,.cta:focus-visible::after{transform:scaleX(1)}
.cta:hover{filter:brightness(1.15)}
.cta:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* --------------------------- REVEAL ON SCROLL -------------------------- */
.rv{opacity:0;transform:translateY(calc(26*var(--u)));
    transition:opacity .6s ease, transform .6s ease}
.rv-r{opacity:0;transform:translateX(calc(90*var(--u)));
      transition:opacity .7s ease, transform .7s ease}
.rv-l{opacity:0;transform:translateX(calc(-90*var(--u)));
      transition:opacity .7s ease, transform .7s ease}
.rv.in,.rv-r.in,.rv-l.in{opacity:1;transform:none}

/* ------------------------------- HEADER -------------------------------- */
.hd{background:var(--navy);height:calc(150.7*var(--u))}
.iglink{
  position:absolute;display:block;
  left:calc(1096*var(--u));top:calc(51.5*var(--u));
  width:calc(48*var(--u));height:calc(48*var(--u));
  transition:transform .18s ease, filter .18s ease;
}
.iglink img{width:100%;height:100%}
.iglink:hover,.iglink:focus-visible{transform:scale(1.14);filter:brightness(1.2)}
.iglink:focus-visible{outline:2px solid var(--cream);outline-offset:4px;border-radius:25%}

/* -------------------------------- HERO ---------------------------------
   --split (0..100) = posizione % del divisorio rosa/teal.
   data-edge="r"|"l" = estremo raggiunto: bottiglia visibile, testi del
   lato coperto in dissolvenza (.hr / .hl). */
.hero{
  height:calc(596*var(--u));background:var(--pink);overflow:hidden;
  touch-action:pan-y;user-select:none;cursor:ew-resize;--split:50;
}
.hero .layer{position:absolute;inset:0}
.hero .teal{background:var(--teal);clip-path:inset(0 0 0 calc(var(--split)*1%))}
.hero .art{z-index:2;pointer-events:none}
.hl,.hr{transition:opacity .35s ease}
.hero[data-edge="r"] .hr{opacity:0}
.hero[data-edge="l"] .hl{opacity:0}

/* maniglia: la bottiglia spaccata segue il divisorio */
.hbottle{
  position:absolute;z-index:6;
  left:clamp(calc(210*var(--u)), calc(var(--split)*1%), calc(100% - 210*var(--u)));
  top:calc(129.24*var(--u));width:calc(259.45*var(--u));height:calc(367.51*var(--u));
  transform:translateX(-50%);cursor:grab;
  transition:transform .45s ease;
}
.hero[data-edge] .hbottle{transform:translateX(-50%) scale(1.5)}
.hbottle:active{cursor:grabbing}
.hbottle img{width:100%;height:100%}
.hbottle:focus-visible{outline:3px solid var(--navy);outline-offset:6px;border-radius:calc(20*var(--u))}

/* bottiglie agli estremi: compaiono DENTRO la sagoma ingrandita,
   sopra l'outline (come nelle sezioni prodotto: cornice esterna, foto interna).
   Geometria: sagoma 259.45x367.51u, centro y=313u; scala 1.5 -> top 37.4u;
   foto 317u di larghezza, collo dentro il collo della sagoma. */
.xb{
  position:absolute;z-index:7;
  left:clamp(calc(210*var(--u)), calc(var(--split)*1%), calc(100% - 210*var(--u)));
  top:calc(84*var(--u));width:calc(280*var(--u));
  transform:translateX(-50%);
  opacity:0;transition:opacity .35s ease .12s;pointer-events:none;
  filter:drop-shadow(0 calc(8*var(--u)) calc(20*var(--u)) rgba(0,0,0,.28));
}
.hero[data-edge="r"] .xb.r{opacity:1}
.hero[data-edge="l"] .xb.l{opacity:1}

/* ------------------------- ALTEZZE DELLE SEZIONI ------------------------ */
.band{background:var(--cream);height:calc(326.3*var(--u))}
.rasp{background:var(--pink); height:calc(613.1*var(--u))}
.lon {background:var(--teal); height:calc(613.2*var(--u))}
.why {background:var(--cream);height:calc(965.2*var(--u))}
.shop{height:calc(1172.4*var(--u));
      background:linear-gradient(90deg,var(--pink) 0 50%,var(--teal) 50% 100%)}
.foot{background:var(--navy);height:calc(664*var(--u))}

/* pulsante "SEGUICI SU [Instagram]" — riusa i semianelli cream dei CTA */
.igbig{
  left:calc(390*var(--u));top:calc(223*var(--u));
  width:calc(420*var(--u));height:calc(165*var(--u));
}
.igbig .bg{position:absolute;inset:0;width:100%;height:100%}
.igbig .igc{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:calc(16*var(--u));color:var(--cream);
  font-size:calc(54*var(--u));letter-spacing:-0.025em;line-height:1;white-space:pre;
}
.igbig .igc img{height:calc(52*var(--u));width:auto}

/* privacy / cookie policy (iubenda) */
.legal{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(600*var(--u));font-size:calc(17*var(--u));
  color:var(--cream);opacity:.75;letter-spacing:.02em;white-space:pre;
  display:flex;gap:.6em;
}
.legal a:hover,.legal a:focus-visible{text-decoration:underline}

/* credit in fondo */
.bloon{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(632*var(--u));font-size:calc(17*var(--u));
  color:var(--cream);opacity:.6;letter-spacing:.02em;white-space:pre;
}
.bloon:hover,.bloon:focus-visible{opacity:1;text-decoration:underline}

/* ============================ MOBILE (<760px) ===========================
   Le sezioni prodotto, perché e shop passano a layout in flusso (.mf):
   immagine sopra, testo sotto, tipografia ingrandita. ================== */
.mf{display:none}

@media (max-width:759px){
  .dt{display:none!important}

  /* header piu' presente: logo grande e centrato */
  .hd{height:21vw}
  .logo-img{left:50%!important;top:50%!important;width:36vw!important;height:17.7vw!important;
            transform:translate(-50%,-50%)}

  /* hero compatta: above-the-fold = header + hero + inizio band */
  .hero{height:55vh}
  .hero .art{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    height:calc(596*var(--u));
  }
  .hbottle{top:calc(50% - 168.76*var(--u))} /* 50% - (596/2 - 129.24)u */

  /* titolo in alto e claim in basso, agganciati ai 55vh dell'hero
     (coordinate in spazio .art centrato: artTop = 27.5vh - 298u).
     Ingranditi a misura "PERCHE' BESK" (9vw) e centrati. */
  .ht{top:calc(298*var(--u) - 23.5vh)!important;
      left:0!important;right:0;width:auto!important;text-align:center;
      font-size:8.4vw!important}
  .hz{top:calc(243*var(--u) + 23.5vh)!important;
      left:0!important;right:0;width:auto!important;text-align:center;
      font-size:8.4vw!important}

  /* bottiglia agli estremi: centrata sul contenuto hero */
  .xb{top:calc(50% - 214*var(--u));width:calc(280*var(--u))}

  /* icone botaniche (Ginepro / Lampone) un po' piu' grandi */
  .bl{transform:scale(1.45);transform-origin:0 0}
  .br{transform:scale(1.45);transform-origin:100% 0}

  /* band "scegli il tuo stile": testi grandi, due righe, bottone */
  .band{height:auto}
  .band-m{background:var(--cream);text-align:center;padding:9vw 5vw 10vw}
  .mf.band-m h2{color:#EC277C;font-size:9vw;line-height:1;margin:0 0 .35em}
  .mf.band-m p{color:#02061F;font-size:9vw;line-height:1.06;margin:0 0 7vw;white-space:pre-line}
  .band-m .bb{position:relative;display:block;width:62vw;margin:0 auto}
  .band-m .bb img{width:100%;height:auto}

  /* icona instagram header: tap target adeguato */
  .iglink{left:auto;right:4.5vw;top:50%;transform:translateY(-50%);width:8vw;height:8vw}
  .iglink:hover{transform:translateY(-50%) scale(1.14)}
  .rasp,.lon,.why,.shop{height:auto}

  .mf{display:block;font-family:'DIN Condensed',sans-serif;letter-spacing:-0.025em}
  .mf .wrap{padding:9vw 6vw;text-align:left}
  .mf h2{margin:0 0 .5em;font-size:8.6vw;line-height:1;font-weight:700}
  .mf p{margin:0 0 1em;font-size:4.9vw;line-height:1.2;font-weight:700;white-space:pre-line}

  /* bottiglia dentro la cornice-bottiglia */
  .mf .media{position:relative;width:38vw;margin:0 auto 5vw}
  .rv-r{transform:translateX(16vw)}
  .rv-l{transform:translateX(-16vw)}
  .rv-r.in,.rv-l.in{transform:none}
  .mf .media img{width:100%;height:auto;position:relative;z-index:2}
  .mf .media .fr{position:absolute;z-index:1;left:-7%;right:-7%;top:-2.5%;bottom:-2.5%;
                 width:114%;height:105%}
  .mf .cta{display:block;text-align:center;font-size:5.6vw;margin:3vw auto 0;width:max-content}

  /* perché besk */
  .mf.why-m .wrap{text-align:center;max-width:560px;margin:0 auto}
  .mf.why-m p{letter-spacing:-0.01em}
  .mf.why-m h2{color:#EC277C;font-size:9vw;margin-bottom:.2em}
  .mf.why-m h3{color:#1C7388;font-size:6.4vw;line-height:1.05;margin:0 0 1.2em}
  .mf.why-m .sign{color:var(--navy);font-size:8vw;margin-top:1.2em}
  .mf.why-m .more[hidden]{display:none}
  .readmore{
    display:block;margin:2vw auto 0;background:none;border:0;cursor:pointer;
    font-family:'DIN Condensed',sans-serif;font-weight:700;
    font-size:5.8vw;letter-spacing:-0.025em;color:#EC277C;
    border-bottom:.06em solid currentColor;padding:0 0 .08em;
  }

  /* shop: colonne impilate, ognuna col proprio colore */
  .shopm-col{padding:10vw 6vw 12vw;text-align:center;position:relative}
  .shopm-col.p{background:var(--pink)}
  .shopm-col.t2{background:var(--teal)}
  .shopm-col .tag{font-size:11vw;line-height:1;margin:0 0 6vw}
  .shopm-col .cardm{position:relative;width:76vw;margin:0 auto}
  .shopm-col .cardm .cardbg{width:100%;height:auto}
  .shopm-col .cardm .bott{position:absolute;left:50%;top:-7%;width:62%;transform:translateX(-50%)}
  .shopm-col .pr{font-size:12vw;line-height:1;margin:0;position:absolute;left:0;right:0;bottom:3.5%}
  .shopm-col .buy{position:relative;display:inline-block;margin-top:7vw;width:56vw}
  .shopm-col .buy img{width:100%;height:auto}
  .shopm-col .buy span{position:static;display:grid;place-items:center;
                       position:absolute;inset:0;font-size:6.2vw}

  /* gin tonic */
  .gt-m{background:linear-gradient(90deg,var(--pink) 0 50%,var(--teal) 50% 100%);
        text-align:center;color:var(--cream);padding:10vw 6vw}
  .gt-m h2{font-size:7.8vw;margin:0 0 .3em;line-height:1.05}
  .gt-m p{font-size:5.4vw;margin:0 0 6vw}
  .gt-m .aff{position:relative;display:inline-block;width:58vw}
  .gt-m .aff img{width:100%;height:auto}
  .gt-m .aff span{position:absolute;inset:0;display:grid;place-items:center;font-size:6.6vw}
  .gt-m .vas{display:block;margin:4vw auto 0;color:var(--navy);font-size:4.6vw;width:max-content}

  /* pulsanti mobile: stesso hover ma in flusso */
  .mf .btn{position:relative}

  /* footer in flusso */
  .foot{height:auto;padding:12vw 6vw;text-align:center}
  .foot .art{width:auto;height:auto}
  .foot .t{position:static;white-space:normal;line-height:1.15;margin:0 auto}
  .foot .t.claim{font-size:8vw!important;margin-bottom:.18em}
  .foot .t.claim + .t.meta{margin-top:10vw}
  .foot .t.meta{font-size:4.2vw!important;margin-bottom:.6em}
  .foot .v{position:static;display:inline-block;vertical-align:middle;
           width:38vw!important;height:auto!important;margin-top:2vw}
  .igbig{position:relative;display:block;left:auto;top:auto;
         width:80vw;height:auto;aspect-ratio:420/165;margin:7vw auto 9vw}
  .igbig .igc{font-size:7.4vw;gap:2.4vw}
  .igbig .igc img{height:7vw}
  .legal{position:static;transform:none;justify-content:center;width:max-content;
         margin:8vw auto 0;font-size:3.6vw}
  .bloon{position:static;display:block;transform:none;width:max-content;
         margin:3vw auto 0;font-size:3.4vw}
}

/* accessibilità: niente animazioni se richiesto dal sistema */
@media (prefers-reduced-motion:reduce){
  /* niente spostamenti, ma i contenuti compaiono sempre con una leggera dissolvenza */
  .rv,.rv-r,.rv-l{transform:none!important;transition:opacity .4s ease}
}

/* ---------------------------- POPUP PROMOZIONE -------------------------
   Mostrato solo se prezzi.txt contiene "promozione: si" e promozione.jpg esiste. */
.promo-overlay{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:5vw;
  background:rgba(1,5,30,.78);
  opacity:0;transition:opacity .3s ease;
}
.promo-overlay.open{display:flex;opacity:1}
.promo-box{
  position:relative;
  /* proporzione 3:4 (Instagram verticale): l'altezza guida, la larghezza segue.
     Limitata sia dall'altezza utile sia dalla larghezza viewport. */
  width:min(86vw, 63.75vh);   /* 63.75vh * 4/3 = 85vh */
  aspect-ratio:3/4;
}
.promo-box img{
  display:block;width:100%;height:100%;object-fit:cover;
  border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.promo-close{
  position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;
  border:0;cursor:pointer;background:var(--pink);color:var(--cream);
  font-size:24px;line-height:44px;text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.4);transition:transform .15s ease;
}
.promo-close:hover,.promo-close:focus-visible{transform:scale(1.1)}
.promo-close:focus-visible{outline:3px solid var(--cream);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.promo-overlay{transition:none}}