/* Promo 1° novembre · grafica «allerta», direzione Matrix scenografica (prototipo approvato il 30/10/2026,
   landing/prototipi/matrix/). Solo grafica: stati, contorno del sito e azzeramento stanno in promo.css (sistema).
   Regola dei movimenti: lo stile di base è sempre lo stato finale; le animazioni partono «da» (fill backwards), così con
   «riduci movimento» la pagina è già ferma e completa. Movimento solo con transform, opacity, clip-path.
   Il verde #35E07A è fuori dal brand kit: scelta voluta, come il monospaziato Share Tech Mono. */

#hc-promo{
  --arancio:#F26522; --verde:#35E07A; --nero:#1D1D1D; --nero2:#262626; --chiaro-su-scuro:#CFCFCF;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --caduta:cubic-bezier(0.5,0,0.85,0.35); /* gravità: le cifre che cadono accelerano */
  --mono:'Share Tech Mono',ui-monospace,Menlo,Consolas,monospace;
  --g:20px; --barra-h:44px;
  background:var(--nero);color:#fff;font-family:Montserrat,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
@media (min-width:1160px){ #hc-promo{--g:calc((100vw - 1120px) / 2)} }
html:has(#hc-promo){scroll-behavior:smooth}
/* i salti alle offerte non finiscono sotto la barra (e, al computer, sotto l'intestazione) */
#hc-promo [id]{scroll-margin-top:calc(var(--wp-barra,0px) + var(--barra-h) + 12px)}
@media (min-width:1024px){ #hc-promo [id]{scroll-margin-top:calc(var(--header-h,64px) + var(--wp-barra,0px) + var(--barra-h) + 12px)} }
/* rifà la scena d'apertura quando lo stato cambia mentre la pagina è aperta (allerta.js) */
html.hcp-riparti #hc-promo *,html.hcp-riparti #hc-promo *::before,html.hcp-riparti #hc-promo *::after{animation:none!important}

#hc-promo .m-o{color:var(--arancio)} #hc-promo .m-v{color:var(--verde)}
#hc-promo .m-nb{white-space:nowrap}

/* pulsanti (DESIGN.md, su fondo scuro) */
#hc-promo .m-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 26px;border-radius:10px;
  background:var(--arancio);color:#fff;font:700 18px/1 Montserrat,sans-serif;text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,transform .12s var(--ease-out)}
#hc-promo .m-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ #hc-promo .m-btn:hover{background:#fff;color:var(--nero)} }
#hc-promo .m-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ================= barra d'allerta ================= */
#hc-promo .m-barra{position:sticky;top:var(--wp-barra,0px);z-index:9;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;
  min-height:var(--barra-h);padding:11px var(--g);background:var(--nero);border-bottom:1px solid #333;font:400 14px/1.3 var(--mono)}
@media (min-width:1024px){ #hc-promo .m-barra{top:calc(var(--header-h,64px) + var(--wp-barra,0px))} }
#hc-promo .m-ok{display:inline-flex;align-items:center;gap:8px;color:var(--verde)}
#hc-promo .m-ko{color:var(--arancio)} #hc-promo .m-ko b{color:#fff;font-weight:400}
#hc-promo .m-corto{display:none}
@media (max-width:479px){ #hc-promo .m-lungo{display:none} #hc-promo .m-corto{display:inline} #hc-promo .m-barra{font-size:13px} }
#hc-promo .m-pallino{width:9px;height:9px;border-radius:50%;background:var(--verde);animation:battito 1.6s ease-out infinite}
@keyframes battito{from{box-shadow:0 0 0 0 rgba(53,224,122,.7)}to{box-shadow:0 0 0 9px rgba(53,224,122,0)}}

/* ================= apertura ================= */
#hc-promo .m-ap{position:relative;overflow:hidden;isolation:isolate;padding:24px var(--g) 84px}

/* pioggia di caratteri a tre profondità: colonne generate una volta da allerta.js, cadono solo col CSS */
#hc-promo .m-pioggia{position:absolute;inset:0;z-index:0;pointer-events:none}
#hc-promo .m-strato{position:absolute;inset:0}
#hc-promo .m-strato span{position:absolute;top:0;writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;
  font-family:var(--mono);line-height:1;letter-spacing:.1em;color:transparent;
  background:linear-gradient(180deg,rgba(53,224,122,0) 0%,rgba(53,224,122,.85) 74%,#DFFFEA 100%);
  -webkit-background-clip:text;background-clip:text;
  transform:translateY(-100%);animation:cade 10s linear infinite;will-change:transform}
#hc-promo .m-strato span.o{background-image:linear-gradient(180deg,rgba(242,101,34,0) 0%,rgba(242,101,34,.92) 74%,#FFE0CF 100%)}
html[data-stato="dopo"] #hc-promo .m-strato span.o{background-image:linear-gradient(180deg,rgba(53,224,122,0) 0%,rgba(53,224,122,.85) 74%,#DFFFEA 100%)}
@keyframes cade{from{transform:translateY(-100%)}to{transform:translateY(var(--corsa,110vh))}}
#hc-promo .m-lontano{opacity:.34}
#hc-promo .m-medio{opacity:.72}
#hc-promo .m-vicino{opacity:.8}
html[data-stato="dopo"] #hc-promo .m-pioggia{opacity:.55}
/* velatura: al telefono la pioggia resta viva intorno all'anno e si spegne sotto il testo */
#hc-promo .m-pioggia::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(29,29,29,0) 0%,rgba(29,29,29,.12) 21%,rgba(29,29,29,.84) 33%,rgba(29,29,29,.88) 100%)}
/* righe da monitor, solo sopra la pioggia */
#hc-promo .m-ap::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}

/* l'intrusione: un lampo a bande e una passata di scansione su tutta l'apertura, una volta sola */
#hc-promo .m-intrusione{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(180deg,rgba(53,224,122,0) 0 14px,rgba(53,224,122,.4) 14px 16px,rgba(242,101,34,0) 16px 37px,rgba(242,101,34,.45) 37px 40px);
  animation:intrusione .5s steps(1) .05s}
@keyframes intrusione{0%{opacity:.9;transform:translateX(-14px)}20%{opacity:.45;transform:translateX(18px)}40%{opacity:.8;transform:translate(-6px,9px)}60%{opacity:.25;transform:translateX(10px)}80%,100%{opacity:0;transform:none}}
#hc-promo .m-in{animation:sussulto .45s steps(1) .05s}
@keyframes sussulto{0%{transform:translateX(-5px)}25%{transform:translateX(6px)}50%{transform:translateX(-2px)}75%,100%{transform:none}}
#hc-promo .m-passata{position:absolute;inset:0;z-index:4;pointer-events:none;transform:translateY(-100%);
  background:linear-gradient(180deg,rgba(53,224,122,0) 0,rgba(53,224,122,0) calc(100% - 170px),rgba(53,224,122,.1) calc(100% - 40px),rgba(53,224,122,.6) calc(100% - 2px),rgba(53,224,122,0) 100%);
  animation:passata 1.4s var(--ease-in-out) .2s backwards}
@keyframes passata{0%{transform:translateY(-100%);opacity:1}85%{opacity:1}100%{transform:translateY(0);opacity:0}}

#hc-promo .m-in{position:relative;z-index:3;display:grid;grid-template-areas:"anno" "testo" "registro";gap:28px;max-width:1120px;margin:0 auto}

/* ---------- l'anno del listino ---------- */
#hc-promo .m-anno{grid-area:anno}
#hc-promo .m-etich{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font:400 13px/1.2 var(--mono);color:var(--verde)}
#hc-promo .m-rec{display:inline-flex;align-items:center;gap:6px;color:var(--arancio)}
#hc-promo .m-rec::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:lampeggia 1.2s steps(1) infinite}
html[data-stato="dopo"] #hc-promo .m-rec{color:var(--verde)}
@keyframes lampeggia{50%{opacity:0}}
#hc-promo .m-schermo{position:relative;overflow:hidden;display:grid;align-items:center;min-height:126px;padding:4px 14px 8px;border:1px solid rgba(53,224,122,.4);border-radius:14px;text-align:center;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),rgba(12,12,12,.62)}
#hc-promo .m-cifre{margin:0;font:800 clamp(84px,27vw,150px)/.9 Montserrat,sans-serif;letter-spacing:-.03em;color:#fff;white-space:nowrap}
#hc-promo .m-slot{position:relative;display:inline-grid;vertical-align:top}
#hc-promo .m-sei,#hc-promo .m-tre{grid-area:1/1;display:block}
#hc-promo .m-sei{transform-origin:72% 94%}
#hc-promo .m-tre{color:var(--arancio);text-shadow:0 0 28px rgba(242,101,34,.5);transform-origin:50% 100%}
html[data-stato="prima"] #hc-promo .m-tre{opacity:0}
html[data-stato="durante"] #hc-promo .m-sei{opacity:0}
html[data-stato="dopo"] #hc-promo .m-tre{opacity:0}
html[data-stato="dopo"] #hc-promo .m-sei{color:var(--verde);text-shadow:0 0 26px rgba(53,224,122,.45)}
#hc-promo .m-lampo{position:absolute;left:50%;top:50%;width:180%;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(242,101,34,.6),rgba(242,101,34,0));transform:translate(-50%,-50%) scale(.5)}
#hc-promo .m-detriti{position:absolute;left:50%;bottom:10%;width:0;height:0}
#hc-promo .m-detriti i{position:absolute;left:0;top:0;width:7px;height:7px;background:var(--verde);opacity:0}
#hc-promo .m-detriti i:nth-child(even){background:var(--arancio)}
#hc-promo .m-detriti i:nth-child(1){--dx:-64px;--dy:-30px} #hc-promo .m-detriti i:nth-child(2){--dx:-38px;--dy:-58px}
#hc-promo .m-detriti i:nth-child(3){--dx:-8px;--dy:-72px}  #hc-promo .m-detriti i:nth-child(4){--dx:30px;--dy:-60px}
#hc-promo .m-detriti i:nth-child(5){--dx:58px;--dy:-34px}  #hc-promo .m-detriti i:nth-child(6){--dx:76px;--dy:-8px}
#hc-promo .m-nota{margin:8px 0 0;font:400 13px/1.35 var(--mono);color:var(--chiaro-su-scuro);animation:scrivi .9s steps(46) .5s backwards}
@media (max-width:399px){ #hc-promo .m-nota{font-size:12px} }
/* la nota si scrive quando la scena è finita */
html[data-stato="durante"] #hc-promo .m-nota{animation-delay:calc(var(--t0) + 1.75s)}
html[data-stato="dopo"] #hc-promo .m-nota{animation-delay:1.9s}
/* il 2023 del titolo prende la stessa botta del display */
html[data-stato="durante"] #hc-promo h1 .m-o{display:inline-block;animation:rgb .44s steps(1) calc(var(--t0) + 2s) 1}

/* prima: il 6 traballa e ogni tanto si intravede il 3 */
html[data-stato="prima"] #hc-promo .m-sei{animation:traballa 3.4s var(--ease-in-out) 1s infinite}
html[data-stato="prima"] #hc-promo .m-tre{animation:fantasma 3.4s steps(1) 1s infinite}
@keyframes traballa{0%,58%,90%,100%{transform:none}64%{transform:rotate(-8deg)}70%{transform:rotate(6deg)}76%{transform:rotate(-4deg)}83%{transform:rotate(2deg)}}
@keyframes fantasma{0%,100%{opacity:0}66%{opacity:.85;transform:translateX(-4px);clip-path:inset(8% 0 52% 0)}69%{opacity:.7;transform:translateX(5px);clip-path:inset(48% 0 6% 0)}72%{opacity:0;transform:none;clip-path:none}}

/* durante: prima il messaggio degli hacker nel display, poi lo sgambetto, che parte a --t0.
   Il 6 si sbilancia e cade fuori; il 3 piomba dall'alto, botta, lampo e schegge */
html[data-stato="durante"]{--t0:3.6s}
#hc-promo .m-messaggio{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 14px;text-align:left;
  font:400 12.5px/1.3 var(--mono);color:#fff;background:rgba(12,12,12,.4);opacity:0;visibility:hidden;animation:messaggio 3.5s .1s backwards}
#hc-promo .m-messaggio p{margin:0}
#hc-promo .m-msg1{color:var(--verde)}
#hc-promo .m-msg4{color:var(--arancio)}
@keyframes messaggio{0%,88%{opacity:1;visibility:visible;transform:none;clip-path:none}91%{opacity:.7;transform:translateX(-6px);clip-path:inset(0 0 45% 0)}94%{opacity:.8;transform:translateX(5px);clip-path:inset(35% 0 0 0)}97%{opacity:.3;transform:none;clip-path:none}100%{opacity:0;visibility:hidden}}
#hc-promo .m-msg2{animation:riga .3s var(--ease-out) 1.4s backwards}
#hc-promo .m-msg3{animation:riga .3s var(--ease-out) 2s backwards}
#hc-promo .m-msg4{animation:riga .3s var(--ease-out) 2.6s backwards}
html[data-stato="durante"] #hc-promo .m-sei{animation:inciampa 1s calc(var(--t0) + .55s) backwards}
@keyframes inciampa{
  0%{opacity:1;transform:none;animation-timing-function:var(--ease-in-out)}
  24%{opacity:1;transform:rotate(-11deg);animation-timing-function:var(--ease-in-out)}
  46%{opacity:1;transform:translateX(6%) rotate(20deg);animation-timing-function:var(--caduta)}
  100%{opacity:0;transform:translate(70%,150%) rotate(112deg)}
}
html[data-stato="durante"] #hc-promo .m-tre{animation:atterra .62s calc(var(--t0) + 1.2s) backwards}
@keyframes atterra{
  0%{transform:translateY(-130%);animation-timing-function:var(--caduta)}
  60%{transform:translateY(0) scale(1.07,.88);animation-timing-function:var(--ease-out)}
  82%{transform:translateY(-3%) scale(.98,1.03)}
  100%{transform:none}
}
html[data-stato="durante"] #hc-promo .m-schermo{animation:botta .34s var(--ease-out) calc(var(--t0) + 1.57s)}
@keyframes botta{0%{transform:translateY(6px)}40%{transform:translateY(-2px)}100%{transform:none}}
html[data-stato="durante"] #hc-promo .m-lampo{animation:lampo .8s var(--ease-out) calc(var(--t0) + 1.55s)}
@keyframes lampo{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}12%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
html[data-stato="durante"] #hc-promo .m-detriti i{animation:scheggia .7s var(--ease-out) calc(var(--t0) + 1.57s)}
@keyframes scheggia{0%{opacity:0;transform:none}6%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(140deg)}}
html[data-stato="durante"] #hc-promo .m-cifre{animation:compare .4s steps(1) var(--t0) backwards,rgb .44s steps(1) calc(var(--t0) + 2s) 2}
@keyframes compare{0%{opacity:0;transform:none}25%{opacity:1;transform:translateX(-5px)}50%{opacity:.5;transform:translateX(4px)}75%,100%{opacity:1;transform:none}}
@keyframes rgb{0%{text-shadow:-5px 0 var(--verde),5px 0 var(--arancio);transform:translateX(3px)}25%{text-shadow:4px 0 var(--verde),-4px 0 var(--arancio);transform:translateX(-3px)}50%{text-shadow:-2px 0 var(--verde),2px 0 #fff;transform:translateX(1px)}75%,100%{text-shadow:none;transform:none}}

/* dopo: il 3 viene spinto via e il 6 si rialza */
html[data-stato="dopo"] #hc-promo .m-tre{animation:espulso .7s .6s backwards}
@keyframes espulso{0%{opacity:1;transform:none;animation-timing-function:var(--ease-in-out)}22%{opacity:1;transform:translateY(5%) scale(1.04,.94);animation-timing-function:var(--ease-out)}100%{opacity:0;transform:translate(60%,-140%) rotate(-40deg)}}
html[data-stato="dopo"] #hc-promo .m-sei{animation:rialza .85s 1.05s backwards}
@keyframes rialza{0%{opacity:0;transform:translate(40%,60%) rotate(100deg);animation-timing-function:var(--ease-out)}55%{opacity:1;transform:rotate(-7deg);animation-timing-function:var(--ease-in-out)}78%{transform:rotate(3deg)}100%{opacity:1;transform:none}}

/* ---------- testo ---------- */
#hc-promo .m-testo{grid-area:testo}
#hc-promo .m-occhiello{display:flex;align-items:center;margin:0 0 12px;font:400 15px/1.2 var(--mono);color:var(--arancio)}
html[data-stato="dopo"] #hc-promo .m-occhiello{color:var(--verde)}
#hc-promo .m-cursore{display:inline-block;width:.55em;height:1em;margin-left:4px;background:currentColor;animation:lampeggia 1s steps(1) infinite}
#hc-promo h1{margin:0 0 16px;font:800 30px/1.08 Montserrat,sans-serif;letter-spacing:-.02em;color:#fff;text-wrap:balance}
#hc-promo .m-sub{margin:0 0 20px;max-width:34em;font:400 17px/1.45 Montserrat,sans-serif;color:var(--chiaro-su-scuro)}
#hc-promo .m-sicuro{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 22px;padding:12px 14px;max-width:34em;
  border:1px solid rgba(53,224,122,.5);border-radius:12px;background:rgba(53,224,122,.09);font:700 15px/1.4 Montserrat,sans-serif;color:#fff}
#hc-promo .m-scudino{flex:none;width:24px;height:28px;fill:none;stroke:var(--verde);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
#hc-promo .m-sicuro::after{content:"";position:absolute;inset:-1px;border-radius:12px;border:2px solid var(--verde);opacity:0;pointer-events:none;animation:conferma .9s var(--ease-out) 2.5s}
@keyframes conferma{0%{opacity:.9;transform:none}100%{opacity:0;transform:scale(1.04,1.18)}}
#hc-promo .m-azioni{display:grid;justify-items:start;gap:10px}
#hc-promo .m-sotto{margin:0;font:400 14px/1.3 var(--mono);color:var(--chiaro-su-scuro)}
#hc-promo .m-attesa{margin:0;font:400 16px/1.4 var(--mono);color:var(--arancio)}

/* ---------- quadro di scansione ---------- */
#hc-promo .m-registro{grid-area:registro;position:relative;overflow:hidden;padding:18px 18px 10px;border:1px solid rgba(53,224,122,.45);border-radius:14px;
  background:rgba(18,18,18,.94);font:400 13px/1.45 var(--mono)}
#hc-promo .m-reg-int{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#hc-promo .m-scudo{flex:none;width:36px;height:42px;fill:none;stroke:var(--verde);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
#hc-promo .m-scudo-bordo{stroke-dasharray:150;stroke-dashoffset:0;animation:traccia1 .9s var(--ease-out) .9s backwards}
#hc-promo .m-scudo-spunta{stroke-dasharray:32;stroke-dashoffset:0;animation:traccia2 .45s var(--ease-out) 1.7s backwards}
@keyframes traccia1{from{stroke-dashoffset:150}}
@keyframes traccia2{from{stroke-dashoffset:32}}
#hc-promo .m-reg-tit{margin:0;font-size:16px;color:#fff}
#hc-promo .m-scritto{display:inline-block;animation:scrivi calc(var(--n) * 40ms) steps(var(--n)) .5s backwards}
@keyframes scrivi{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
#hc-promo .m-righe{margin:0;padding:0;list-style:none}
#hc-promo .m-righe li{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-top:1px dashed #3a3a3a;color:var(--chiaro-su-scuro);
  animation:riga .32s var(--ease-out) backwards;animation-delay:calc(1.05s + var(--i) * .2s)}
#hc-promo .m-righe .k{flex:none}
#hc-promo .m-righe .r{flex:1;min-width:12px;border-bottom:1px dotted #5a5a5a}
#hc-promo .m-righe .v{flex:none;text-align:right}
#hc-promo .m-righe li.ok .v{color:var(--verde)}
#hc-promo .m-righe li.ko .v{color:var(--arancio);animation:lampeggia .7s steps(1) 2.4s 4}
#hc-promo .m-log li{display:block}
#hc-promo .m-log li.ko{color:var(--arancio)} #hc-promo .m-log li.ok{color:var(--verde)}
@keyframes riga{from{opacity:0;transform:translateX(-8px)}}
#hc-promo .m-scan{position:absolute;left:0;right:0;top:0;height:56px;pointer-events:none;
  background:linear-gradient(180deg,rgba(53,224,122,0),rgba(53,224,122,.22),rgba(53,224,122,0));transform:translateY(-100%);
  animation:scansiona 1.9s var(--ease-in-out) .8s}
@keyframes scansiona{from{transform:translateY(-100%)}to{transform:translateY(900%)}}

/* ================= sezioni sotto l'apertura ================= */
#hc-promo .m-sez-in{max-width:1120px;margin:0 auto}
#hc-promo :is(.m-offerte,.m-come,.m-domande){padding:56px var(--g) 24px;border-top:1px solid #333}
#hc-promo h2{margin:0 0 10px;font:800 28px/1.12 Montserrat,sans-serif;letter-spacing:-.02em;color:#fff;text-wrap:balance}
/* al telefono l'a capo dei titoli lo decide il bilanciamento: con quello fisso «listino» restava da solo */
@media (max-width:1023px){ #hc-promo h2 br{display:none} }

/* ---------- offerte ---------- */
#hc-promo .m-off-sub{margin:0 0 26px;max-width:36em;font-size:17px;color:var(--chiaro-su-scuro)}
#hc-promo .m-schede{display:grid;gap:16px}
#hc-promo .m-schede:empty{display:none}
#hc-promo .m-scheda{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:22px 20px;
  border:1px solid rgba(53,224,122,.32);border-radius:18px;background:var(--nero2)}
#hc-promo .m-scheda h3{margin:0 0 6px;font:700 22px/1.2 Montserrat,sans-serif;color:#fff}
#hc-promo .m-etichetta{margin:0 0 8px;font:400 13px/1.2 var(--mono);color:var(--verde)}
#hc-promo .m-cosa{margin:0 0 18px;font-size:15px;line-height:1.45;color:var(--chiaro-su-scuro)}
/* i prezzi stanno in fondo alla scheda: i pulsanti di una fila restano allineati */
#hc-promo .m-s-prezzo{margin-top:auto}
#hc-promo .m-p-et{margin:0;font:400 13px/1.2 var(--mono);color:var(--arancio)}
#hc-promo .m-p23{margin:2px 0 4px;font:800 52px/1 Montserrat,sans-serif;letter-spacing:-.02em;color:var(--arancio)}
#hc-promo .m-p26{margin:0 0 2px;font-size:15px;color:var(--chiaro-su-scuro)}
#hc-promo .m-mese{margin:0;font-size:15px;color:var(--chiaro-su-scuro)}
/* il risparmio, in verde (Emmanuele, 31/10) */
#hc-promo .m-risp{justify-self:start;width:fit-content;margin:8px 0 8px;padding:4px 12px;border:1px solid rgba(53,224,122,.5);border-radius:999px;background:rgba(53,224,122,.12);font:700 16px/1.3 Montserrat,sans-serif;color:var(--verde)}
/* il prezzo grande ha le interferenze verdi del titolo, ogni tanto e non tutte le schede insieme (Emmanuele, 31/10); con «riduci movimento» sta fermo */
html[data-stato="durante"] #hc-promo .m-p23{animation:interferenza 6s steps(1) 1s infinite}
html[data-stato="durante"] #hc-promo .m-scheda:nth-child(3n+2) .m-p23{animation-delay:3s}
html[data-stato="durante"] #hc-promo .m-scheda:nth-child(3n) .m-p23{animation-delay:5s}
@keyframes interferenza{0%,88%{text-shadow:none;transform:none}89%{text-shadow:-5px 0 var(--verde),5px 0 rgba(53,224,122,.45);transform:translateX(3px)}91%{text-shadow:4px 0 var(--verde),-4px 0 #fff;transform:translateX(-3px)}93%{text-shadow:-2px 0 var(--verde);transform:translateX(1px)}95%,100%{text-shadow:none;transform:none}}
#hc-promo .m-prenota{margin:10px 0 0;font:400 13px/1.35 var(--mono);color:var(--verde)}
#hc-promo .m-scheda .m-btn{margin-top:18px}

/* ---------- come funziona ---------- */
/* «Come funziona» e «Domande» stanno in un terminale, come la scansione dell'apertura: la storia continua fino in fondo */
#hc-promo .m-term{margin:18px 0 0;padding:4px 20px 6px;border:1px solid rgba(53,224,122,.45);border-radius:14px;background:rgba(18,18,18,.94)}
#hc-promo .m-passi{margin:0;padding:0;list-style:none}
#hc-promo .m-passi li,#hc-promo .m-term-nota{display:grid;gap:6px;margin:0;padding:16px 0;border-top:1px dashed #3a3a3a}
#hc-promo .m-passi li:first-child{border-top:0}
#hc-promo .m-n{font:400 14px/1.3 var(--mono);color:var(--verde)}
#hc-promo .m-passi p,#hc-promo .m-term-nota>span:last-child{margin:0;max-width:44em;font-size:16px;line-height:1.5;color:#E6E6E6}

/* ---------- domande ---------- */
#hc-promo .m-dl{display:grid;gap:0}
#hc-promo .m-dl>div{padding:16px 0;border-top:1px dashed #3a3a3a}
#hc-promo .m-dl>div:first-child{border-top:0}
#hc-promo .m-dl dt{margin:0 0 6px;font:400 17px/1.35 var(--mono);color:#fff}
#hc-promo .m-dl dt .m-n{font-size:inherit}
#hc-promo .m-dl dd{margin:0;max-width:44em;font-size:16px;line-height:1.5;color:var(--chiaro-su-scuro)}

/* ================= chiusura ================= */
#hc-promo .m-chiusura{padding:56px var(--g) 120px;border-top:1px solid #333}
/* la chiusura riprende il gesto dell'apertura: il tempo che scorre in un quadrante come quello del «2023» */
#hc-promo .m-ch{display:grid;grid-template-areas:"tit" "conto" "btn";gap:22px;justify-items:start}
#hc-promo .m-ch h2{grid-area:tit;margin:0}
#hc-promo .m-ch-conto{grid-area:conto;justify-self:stretch;max-width:520px}
#hc-promo .m-ch .m-btn{grid-area:btn}
#hc-promo .m-quadrante{container-type:inline-size;display:grid;place-items:center;padding:14px 14px 16px;border:1px solid rgba(53,224,122,.4);border-radius:14px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),rgba(12,12,12,.62)}
#hc-promo .m-conto{margin:0;font:800 clamp(46px,14vw,84px)/1 Montserrat,sans-serif;letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* le cifre riempiono il quadrante, che al computer è largo come quello del «2023» (il conto è circa 4,6 volte il corpo) */
@supports (container-type:inline-size){ #hc-promo .m-conto{font-size:clamp(46px,21cqi,150px)} }
#hc-promo .m-vero{margin:28px 0 0;padding-top:16px;max-width:46em;border-top:1px solid #333;font-size:13px;line-height:1.5;color:#ABABAB}
html:not([data-stato="durante"]) #hc-promo .m-chiusura{padding-top:24px}
html:not([data-stato="durante"]) #hc-promo .m-vero{margin-top:0}

/* ================= computer ================= */
@media (min-width:1024px){
  #hc-promo .m-ap{padding:60px var(--g) 92px}
  #hc-promo .m-pioggia::after{background:linear-gradient(90deg,rgba(29,29,29,.9) 0%,rgba(29,29,29,.8) 46%,rgba(29,29,29,.32) 100%)}
  #hc-promo .m-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"testo anno" "testo registro";column-gap:64px;row-gap:18px;align-items:center}
  #hc-promo .m-anno{align-self:end}
  #hc-promo .m-registro{align-self:start;font-size:14px;padding:20px 22px 12px}
  #hc-promo .m-schermo{min-height:0}
  #hc-promo .m-messaggio{padding:10px 20px;font-size:15px}
  #hc-promo h1{font-size:52px}
  #hc-promo .m-sub{font-size:20px}
  #hc-promo .m-sicuro{font-size:16px}
  /* tre schede per fila su sei colonne: l'ultima fila, se incompleta, va al centro */
  #hc-promo .m-schede{grid-template-columns:repeat(6,minmax(0,1fr))}
  #hc-promo .m-scheda{grid-column:span 2}
  #hc-promo .m-scheda:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
  #hc-promo .m-scheda:nth-child(3n+1):last-child{grid-column:3 / span 2}
  /* testa, prezzi e pulsante sulle stesse righe in tutta la fila: «Prezzo 2023» alla stessa altezza */
  @supports (grid-template-rows:subgrid){
    #hc-promo .m-scheda{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-items:start;justify-items:start}
    #hc-promo .m-s-prezzo{margin-top:0}
  }
  #hc-promo .m-term{padding:6px 32px 8px}
  #hc-promo .m-passi li,#hc-promo .m-term-nota{grid-template-columns:9em minmax(0,1fr);column-gap:24px;align-items:baseline}
  #hc-promo .m-ch{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"tit conto" "btn conto";column-gap:64px;row-gap:24px;align-items:start}
  /* la prima riga del titolo parte all'altezza del bordo alto del quadrante (sopra c'è l'etichetta) */
  #hc-promo .m-ch h2{padding-top:24px}
  #hc-promo .m-ch h2 br{display:none}
  #hc-promo .m-ch .m-btn{align-self:start}
  #hc-promo .m-ch-conto{max-width:none}
  #hc-promo .m-detriti{transform:scale(1.6)}
  #hc-promo h2{font-size:36px}
}

/* ================= telefono: il pulsante nella prima schermata =================
   Il riquadro dell'anno diventa tutto .m-anno (etichetta, cifre e nota dentro), le cifre un po' più piccole e gli spazi
   più stretti: «Vedi i prezzi del 2023» sale di circa 110 px ed entra in vista anche sull'iPhone medio con le barre di Safari */
@media (max-width:479px){
  #hc-promo .m-ap{padding-top:14px}
  #hc-promo .m-in{gap:18px}
  #hc-promo .m-anno{position:relative;overflow:hidden;padding:8px 10px 9px;border:1px solid rgba(53,224,122,.4);border-radius:14px;
    background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),rgba(12,12,12,.62)}
  #hc-promo .m-anno .m-etich{margin:0;font-size:12px}
  #hc-promo .m-schermo{position:static;overflow:visible;min-height:0;padding:0;border:0;border-radius:0;background:none}
  #hc-promo .m-cifre{font-size:clamp(56px,17vw,80px)}
  #hc-promo .m-messaggio{padding:8px 12px;background:rgba(12,12,12,.9)}
  /* la nota è la battuta della storia: almeno 12 px, sotto i 400 px va su due righe */
  #hc-promo .m-nota{margin-top:2px;font-size:12px}
  #hc-promo .m-occhiello{margin-bottom:8px}
  #hc-promo h1{margin-bottom:12px}
  #hc-promo .m-sub{margin-bottom:14px}
  #hc-promo .m-sicuro{margin-bottom:14px;padding:10px 12px}
}

/* riduci movimento: tutto fermo, già nello stato finale; la pioggia resta come trama */
@media (prefers-reduced-motion:reduce){
  html:has(#hc-promo){scroll-behavior:auto}
  #hc-promo *,#hc-promo *::before,#hc-promo *::after{animation:none!important;transition:none!important}
  #hc-promo .m-strato span{transform:none;top:var(--y)}
}