/* Pop-up dei panettoni e pandori solidali (spot animato di ~19 s in 4 scene). Incluso da base.html solo nel
   periodo PANETTONI_DAL..PANETTONI_AL; tutte le classi hanno il prefisso pnt- per non toccare lo stile del sito. */
@font-face {
  font-family: "CBM Caveat Brush";
  src: url("../fonts/caveat-brush-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
.pnt{
  --notte:#0b2540; --notte-2:#071a30; --blu:#1c69b3; --arancio:#c9480c;
  --oro:#f2b544; --crema:#fff6e6; --bianco:#ffffff; --testo:#0b2540;
  --grigio:#5b6b7e;
  --f-testo:"Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mano:"CBM Caveat Brush", "Comic Sans MS", cursive;
}

.pnt-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:rgba(7,26,48,.55);backdrop-filter:blur(3px);animation:pnt-fadeIn .5s ease both}
@keyframes pnt-fadeIn{from{opacity:0}to{opacity:1}}
.pnt-pop{position:relative;width:min(720px,100%);border-radius:18px;overflow:hidden;background:var(--notte);color:var(--bianco);
  box-shadow:0 30px 80px rgba(0,0,0,.45);animation:pnt-popIn .6s cubic-bezier(.34,1.4,.64,1) both}
@keyframes pnt-popIn{from{transform:translateY(30px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.pnt-chiudi{position:absolute;top:12px;right:12px;z-index:6;width:36px;height:36px;border-radius:50%;border:0;background:rgba(7,26,48,.6);color:var(--bianco);font-size:22px;line-height:1;cursor:pointer}
.pnt-chiudi:hover,.pnt-chiudi:focus-visible{background:var(--arancio);outline:none}

/* Palco dello spot */
.pnt-stage{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;container-type:inline-size;
  background:radial-gradient(120% 90% at 75% 0%, #1d4a7a 0%, var(--notte) 45%, var(--notte-2) 100%)}
@media (max-width:560px){.pnt-stage{aspect-ratio:4/5}}
#pnt-snow{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.pnt-sky{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.pnt-sky .pnt-finestra{fill:var(--oro);opacity:.85}
.pnt-luna{fill:var(--crema);opacity:.9}

.pnt-progress{position:absolute;top:12px;left:14px;right:60px;z-index:6;display:flex;gap:5px}
.pnt-progress span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.pnt-progress i{display:block;height:100%;width:0;background:var(--bianco)}
.pnt-progress span.pnt-done i{width:100%}
.pnt-progress span.pnt-on i{animation:pnt-fill var(--d) linear forwards}
@keyframes pnt-fill{to{width:100%}}

.pnt-scene{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .5s ease;pointer-events:none}
.pnt-stage[data-scene="1"] .pnt-s1,.pnt-stage[data-scene="2"] .pnt-s2,.pnt-stage[data-scene="3"] .pnt-s3,.pnt-stage[data-scene="4"] .pnt-s4{opacity:1}

.pnt-eyebrow{font-size:clamp(10px,1.9cqw,15px);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--oro)}
.pnt-big{font-weight:800;line-height:1.05;letter-spacing:-.02em;text-wrap:balance;margin:0}
.pnt-big em{font-style:normal;color:var(--oro)}
.pnt-rise{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--dl,0s)}
.pnt-stage[data-scene="1"] .pnt-s1 .pnt-rise,.pnt-stage[data-scene="2"] .pnt-s2 .pnt-rise,.pnt-stage[data-scene="3"] .pnt-s3 .pnt-rise,.pnt-stage[data-scene="4"] .pnt-s4 .pnt-rise{opacity:1;transform:none}

/* Scena 1: ambulanza sotto la neve */
.pnt-s1 .pnt-txt{position:absolute;left:7%;top:15%;width:70%;display:grid;gap:2.2cqw}
.pnt-s1 .pnt-big{font-size:6.4cqw}
.pnt-ambu{position:absolute;bottom:7%;left:-40%;width:23%;z-index:3}
.pnt-stage[data-scene="1"] .pnt-ambu{animation:pnt-drive 4.4s cubic-bezier(.45,.05,.55,.95) forwards}
@keyframes pnt-drive{0%{left:-40%}38%,64%{left:36%}100%{left:112%}}
.pnt-ambu svg{display:block;width:100%;animation:pnt-bump .35s ease-in-out infinite alternate}
@keyframes pnt-bump{to{transform:translateY(1.5%)}}
.pnt-lampeggia{animation:pnt-blink .3s steps(1) infinite}
.pnt-lampeggia.pnt-b{animation-delay:.15s}
@keyframes pnt-blink{50%{opacity:.15}}
.pnt-alone{position:absolute;left:4%;top:-30%;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(80,160,255,.55),transparent 65%);animation:pnt-blink .3s steps(1) infinite}

/* Scena 2: i prodotti */
.pnt-prodotti{position:absolute;left:0;right:0;bottom:9%;display:flex;justify-content:center;align-items:flex-end;gap:4cqw}
.pnt-prod{position:relative;width:30%;opacity:0;transform:translateY(60%) scale(.6);transition:transform .9s cubic-bezier(.34,1.56,.64,1), opacity .4s}
.pnt-prod.pnt-pd{width:24%;transition-delay:.35s}
.pnt-stage[data-scene="2"] .pnt-prod{opacity:1;transform:none}
.pnt-prod svg{display:block;width:100%}
.pnt-tag{position:absolute;top:-6%;font-family:var(--f-mano);font-size:4.2cqw;color:var(--notte);background:var(--crema);padding:.2em .6em;border-radius:4px;box-shadow:0 6px 14px rgba(0,0,0,.3);white-space:nowrap;
  opacity:0;transform:rotate(-8deg) scale(.6);transition:opacity .3s, transform .5s cubic-bezier(.34,1.56,.64,1);transition-delay:1.2s}
.pnt-tag.pnt-r{right:-6%;transform:rotate(7deg) scale(.6);transition-delay:1.5s}
.pnt-tag.pnt-l{left:-10%}
.pnt-stage[data-scene="2"] .pnt-tag.pnt-l{opacity:1;transform:rotate(-8deg)}
.pnt-stage[data-scene="2"] .pnt-tag.pnt-r{opacity:1;transform:rotate(7deg)}
.pnt-s2 .pnt-eyebrow{position:absolute;top:12%;left:0;right:0;text-align:center}
.pnt-s2 .pnt-big{position:absolute;top:18%;left:0;right:0;text-align:center;font-size:5.4cqw}
.pnt-brilla{position:absolute;width:2.2cqw;aspect-ratio:1;background:var(--oro);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0}
.pnt-stage[data-scene="2"] .pnt-brilla{animation:pnt-twinkle 1.4s ease-in-out infinite;animation-delay:var(--dl)}
@keyframes pnt-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

/* Scena 3: il perché */
.pnt-s3 .pnt-txt{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);display:grid;gap:3cqw}
.pnt-s3 .pnt-big{font-size:7cqw}
.pnt-s3 .pnt-big .pnt-w{display:inline-block;opacity:0;transform:translateY(40%);transition:opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*90ms)}
.pnt-stage[data-scene="3"] .pnt-s3 .pnt-big .pnt-w{opacity:1;transform:none}
.pnt-s3 p{margin:0;font-size:2.6cqw;line-height:1.45;color:rgba(255,255,255,.82);max-width:48ch}
.pnt-sirena{width:11cqw;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 0 rgba(28,105,179,.7)}
.pnt-stage[data-scene="3"] .pnt-sirena{animation:pnt-pulse 1.2s ease-out infinite}
.pnt-stage[data-scene="3"] .pnt-sirena svg{animation:pnt-battito 1.2s ease-in-out infinite}
@keyframes pnt-battito{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.12)}28%{transform:scale(1.04)}}
@keyframes pnt-pulse{to{box-shadow:0 0 0 4cqw rgba(28,105,179,0)}}
.pnt-sirena svg{display:block;width:100%;height:100%}

/* Scena 4: offerta e invito */
.pnt-s4 .pnt-wrap{position:absolute;inset:9% 6% 5%;display:grid;grid-template-rows:auto 1fr auto;gap:2.5cqw}
.pnt-s4 .pnt-big{font-size:5.6cqw}
.pnt-prezzi{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;align-content:center}
.pnt-prezzo{background:var(--crema);color:var(--notte);border-radius:2cqw;padding:2.4cqw 2.6cqw;display:grid;grid-template-columns:auto 1fr;gap:2cqw;align-items:center;
  transform:translateY(30%);opacity:0;transition:transform .7s cubic-bezier(.34,1.56,.64,1), opacity .4s;transition-delay:var(--dl)}
.pnt-stage[data-scene="4"] .pnt-prezzo{transform:none;opacity:1}
.pnt-prezzo svg{width:9cqw}
.pnt-prezzo .pnt-nome{font-size:2.4cqw;font-weight:800;line-height:1.15}
.pnt-prezzo .pnt-peso{font-size:1.9cqw;color:var(--grigio)}
.pnt-prezzo .pnt-euro{font-family:var(--f-mano);font-size:6cqw;line-height:1;color:var(--arancio)}
.pnt-cta-row{display:flex;align-items:center;gap:3cqw;flex-wrap:wrap}
.pnt-cta-fake{display:inline-flex;align-items:center;gap:1.2cqw;background:var(--arancio);color:var(--bianco);font-weight:800;font-size:2.8cqw;padding:1.6cqw 3.4cqw;border-radius:999px;
  transform:scale(.6);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1) 1s, opacity .3s 1s}
.pnt-stage[data-scene="4"] .pnt-cta-fake{transform:scale(1);opacity:1;animation:pnt-cta 1.4s ease-in-out 1.8s infinite}
@keyframes pnt-cta{50%{transform:scale(1.06)}}
.pnt-ritiro{flex:1 1 0;min-width:0;font-size:2cqw;color:rgba(255,255,255,.8);line-height:1.45}
.pnt-ritiro b{color:var(--bianco)}

@media (max-width:560px){
  .pnt-s1 .pnt-big{font-size:9cqw}.pnt-s1 .pnt-txt{width:86%;top:14%}
  .pnt-ambu{width:40%;bottom:8%}
  .pnt-s2 .pnt-big{font-size:7.4cqw;top:16%}.pnt-s2 .pnt-eyebrow{top:10%}
  .pnt-prod{width:42%}.pnt-prod.pnt-pd{width:34%}.pnt-tag{font-size:6cqw}
  .pnt-s3 .pnt-big{font-size:9.6cqw}.pnt-s3 p{font-size:4cqw}.pnt-sirena{width:17cqw}
  .pnt-s4 .pnt-big{font-size:8cqw}.pnt-prezzi{grid-template-columns:1fr}
  .pnt-prezzo svg{width:13cqw}.pnt-prezzo .pnt-nome{font-size:4.2cqw}.pnt-prezzo .pnt-peso{font-size:3.4cqw}.pnt-prezzo .pnt-euro{font-size:9cqw}
  .pnt-cta-fake{font-size:4.4cqw;padding:2.4cqw 5cqw}.pnt-ritiro{flex-basis:100%;font-size:3.5cqw}
  .pnt-s4 .pnt-wrap{inset:12% 6% 4%;gap:3cqw}.pnt-prezzi{grid-template-columns:1fr 1fr;gap:2.4cqw}.pnt-prezzo{grid-template-columns:1fr;padding:2.6cqw;gap:1cqw}.pnt-prezzo svg{width:11cqw}.pnt-prezzo .pnt-nome{font-size:3.8cqw}
  .pnt-eyebrow{font-size:3cqw}
}

/* Piede del pop-up: azioni vere */
.pnt-popfoot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:16px 20px 18px;background:var(--notte)}
.pnt-popfoot h2{margin:0;font-size:17px;font-weight:800;text-wrap:balance}
.pnt-popfoot ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:3px;font-size:13px;line-height:1.35;color:rgba(255,255,255,.75)}
.pnt-popfoot li b{color:var(--oro);font-weight:800}
.pnt-popfoot a.pnt-tel{color:inherit;text-decoration:none}
@media (max-width:560px){.pnt-popfoot ul{grid-template-columns:1fr}}
.pnt-popfoot .pnt-txt{min-width:0;flex:1 1 340px}
.pnt-azioni{display:flex;gap:10px;align-items:center}
.pnt-btn{font:inherit;font-weight:800;font-size:15px;background:var(--arancio);color:var(--bianco);border:0;border-radius:999px;padding:11px 22px;cursor:pointer;text-decoration:none;box-shadow:0 8px 20px rgba(201,72,12,.35)}
.pnt-btn:hover,.pnt-btn:focus-visible{background:#b13e09;outline:2px solid var(--oro);outline-offset:2px}
.pnt-ghost{font:inherit;font-size:14px;background:none;border:0;color:rgba(255,255,255,.75);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pnt-ghost:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

/* Isolamento dagli stili generali del sito */
.pnt[hidden]{display:none!important}
.pnt,.pnt *,.pnt *::before,.pnt *::after{box-sizing:border-box}
.pnt{font-family:var(--f-testo);line-height:1.4;text-align:left}
.pnt h2,.pnt h3,.pnt p{font-family:var(--f-testo);color:inherit;letter-spacing:normal}
.pnt ul,.pnt li{font-family:var(--f-testo);letter-spacing:normal}
.pnt h3.pnt-big{letter-spacing:-.02em}
.pnt li{margin:0;padding:0;list-style:none}
.pnt li::before,.pnt li::marker{content:none}
.pnt svg{max-width:none}
.pnt-btn,.pnt-btn:hover,.pnt-btn:visited{color:var(--bianco);text-decoration:none}
html.pnt-aperto{overflow:hidden}

/* Bottone per rivedere il pop-up dopo averlo chiuso */
.pnt-riapri{position:fixed;z-index:900;left:max(20px,env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 10px;border:0;border-radius:999px;cursor:pointer;
  background:var(--notte);color:var(--bianco);font:800 14px/1 var(--f-testo);
  box-shadow:0 10px 26px rgba(7,26,48,.35),0 0 0 2px rgba(242,181,68,.55);animation:pnt-entra .5s cubic-bezier(.34,1.56,.64,1) both}
.pnt-riapri svg{width:26px;height:26px;animation:pnt-dondola 2.4s ease-in-out infinite}
.pnt-riapri:hover,.pnt-riapri:focus-visible{background:var(--blu);outline:2px solid var(--oro);outline-offset:2px}
@keyframes pnt-entra{from{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:none}}
@keyframes pnt-dondola{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@media (max-width:640px){.pnt-riapri{left:max(12px,env(safe-area-inset-left,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));padding:6px 14px 6px 8px;font-size:13px}}