/* ══════════ METABOLICA · anteprima ══════════
   Concept: la bilancia del lunedì. Inter Tight (titoli) + Inter (testo), Caveat solo per le note a mano.
   Si muovono solo transform e opacity; altezze in dvh; transizioni scritte per esteso. */

/* palette: in testa a index.html, nello <style> della tavolozza */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--crema); color: var(--inchiostro); font-family: var(--testo); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ─── scene ─── */
.scena { position: relative; min-height: 100dvh; padding: 14dvh 0 12dvh; overflow: hidden; }
.colonna { position: relative; z-index: 2; margin-left: 6vw; width: min(64vw, 900px); }
.tinta-crema { background: var(--crema); }
.tinta-cipria { background: var(--cipria-chiara); }
.tinta-salvia { background: #E6EFE7; }
.tinta-scura { background: var(--salvia-scura); color: var(--crema); }
.griglia-due { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 2rem; }
.griglia-due.allinea-alto { align-items: start; }

/* ─── foto di sfondo (segnaposto che respira) ─── */
.fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fondo-foto { position: absolute; inset: 0; }
.fondo-foto::before { content: ""; position: absolute; inset: -4%; opacity: .34;
  background: repeating-linear-gradient(45deg, rgba(29,43,47,.07) 0 14px, transparent 14px 28px), linear-gradient(120deg, #E8B7A3, #C9A77F 45%, #8FAA96); }
.fondo-foto.tono-caldo::before { background: repeating-linear-gradient(45deg, rgba(29,43,47,.07) 0 14px, transparent 14px 28px), linear-gradient(120deg, #F0C9A8, #D99C86 50%, #B7A4C4); }
.fondo-foto.tono-verde::before { background: repeating-linear-gradient(45deg, rgba(29,43,47,.07) 0 14px, transparent 14px 28px), linear-gradient(120deg, #B9D2BE, #E7C08E 55%, #E48C73); }
.fondo-foto.tono-sera::before { opacity: .55; background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px), linear-gradient(120deg, #3B2B2A, #8A4E35 55%, #D9894F); }
.respira::before { animation-name: respira; animation-duration: 26s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }
.velo { position: absolute; inset: 0; }
.velo-sinistra { background: linear-gradient(90deg, var(--crema) 0%, rgba(247,244,238,.9) 42%, rgba(247,244,238,.35) 78%, rgba(247,244,238,.15) 100%); }
.velo-scuro { background: linear-gradient(90deg, rgba(18,24,26,.94) 0%, rgba(18,24,26,.72) 50%, rgba(18,24,26,.35) 100%); }
.etichetta { position: absolute; left: 12px; bottom: 12px; z-index: 3; font: 500 .66rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #4b5557; background: rgba(255,255,255,.78); padding: 3px 7px; border-radius: 6px; }

/* ─── foto accanto al testo (segnaposto) ─── */
.foto-segnaposto { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(29,43,47,.45);
  background: repeating-linear-gradient(45deg, rgba(29,43,47,.06) 0 12px, transparent 12px 24px), linear-gradient(150deg, #EFD2C4, #D9B89A 50%, #A9C0AE); }
.tinta-cipria .foto-segnaposto { background: repeating-linear-gradient(45deg, rgba(29,43,47,.06) 0 12px, transparent 12px 24px), linear-gradient(150deg, #5B4B55, #A7766B 55%, #E8B08D); }
.tinta-salvia .foto-segnaposto { background: repeating-linear-gradient(45deg, rgba(29,43,47,.06) 0 12px, transparent 12px 24px), linear-gradient(150deg, #C7DCEB, #E9DCC6 55%, #B9D2BE); }
.foto-bassa { aspect-ratio: 16 / 10; margin-top: 1.6rem; }

/* ─── tipografia ─── */
.occhiello { font: 700 .78rem/1.2 var(--testo); letter-spacing: .16em; text-transform: uppercase; color: var(--salvia); }
.tinta-scura .occhiello { color: var(--giallo); }
.titolo { margin-top: .6rem; font: 800 clamp(1.7rem, 3.3vw, 3rem)/1.08 var(--titoli); letter-spacing: -.022em; }
.testo { margin-top: 1.2rem; max-width: 58ch; font-size: clamp(1.02rem, 1.22vw, 1.17rem); color: #2E3C40; }
.gigante { font: 800 clamp(2.1rem, 4.9vw, 4.4rem)/1.03 var(--titoli); letter-spacing: -.03em; max-width: 20ch; }
.gigante-chiaro { color: #fff; }
.testo-chiaro { color: rgba(255,255,255,.9); }
strong { font-weight: 700; }
.colore-corallo { color: var(--corallo); }
.colore-salvia { color: var(--salvia-scura); }
.colore-giallo { color: var(--giallo); }

/* evidenziatore che si stende quando la frase entra in vista */
mark.evid { color: inherit; padding: 0 .08em; background-image: linear-gradient(transparent 56%, var(--giallo) 56%, var(--giallo) 92%, transparent 92%); background-repeat: no-repeat; background-size: 100% 100%;
  transition-property: background-size; transition-duration: 1s; transition-delay: .45s; transition-timing-function: cubic-bezier(.2,.7,.2,1); }
.rivela-pronta .rivela:not(.visto) mark.evid { background-size: 0% 100%; }
.scrub .pannello mark.evid { color: var(--inchiostro); background-image: linear-gradient(var(--giallo), var(--giallo)); padding: 0 .18em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* sottolineatura a mano (disegna.js) */
.sottolinea { position: relative; display: inline-block; }
.sottolinea svg { position: absolute; left: -2%; width: 104%; bottom: -.3em; height: .45em; overflow: visible; pointer-events: none; }
.sottolinea path { fill: none; stroke: var(--corallo); stroke-width: 3.2; stroke-linecap: round; }
.da-disegnare path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.da-disegnare.disegnato path { stroke-dashoffset: 0; transition-property: stroke-dashoffset; transition-duration: .9s; transition-delay: .35s; transition-timing-function: ease-out; }

/* parole che si animano */
.parola-viva { display: inline-block; }
.parola-viva.accesa { animation-name: viva; animation-duration: 1.3s; animation-delay: .5s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.3,.7,.3,1); }
@keyframes viva { 0% { transform: none; } 25% { transform: translateY(-.14em) rotate(-2.5deg) scale(1.06); } 50% { transform: translateY(.03em) rotate(1.5deg); } 75% { transform: translateY(-.04em) rotate(-.6deg); } 100% { transform: none; } }

/* note a margine, scritte a mano */
.nota { display: inline-block; margin-top: 1.1rem; font: 700 clamp(1.35rem, 1.9vw, 1.7rem)/1.1 var(--mano); color: var(--corallo-scuro); transform: rotate(-2.5deg); }
.nota-chiara { color: var(--giallo); font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.m-pronta .nota-scritta:not(.scritta) { clip-path: inset(0 100% 0 0); }
.nota-scritta { clip-path: inset(0 0 0 0); transition-property: clip-path; transition-duration: 1.6s; transition-timing-function: ease-out; }

/* ─── bottoni ─── */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--corallo); color: #fff; font: 700 1.1rem/1.1 var(--titoli); padding: 1.05rem 1.9rem; border-radius: 999px; text-decoration: none;
  box-shadow: 0 16px 30px -14px rgba(238,106,79,.8); transition-property: transform, box-shadow; transition-duration: .2s; }
.bottone:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(238,106,79,.9); }
.bottone-pieno { width: 100%; margin-top: 1.1rem; font-size: 1.2rem; }
.bottone-piccolo { padding: .72rem 1.1rem; font-size: .95rem; }
.link-cta { display: inline-block; margin-top: 2rem; font: 700 1.05rem var(--titoli); color: var(--corallo-scuro); text-decoration: none; border-bottom: 2px solid currentColor; }
.cta-gruppo { margin-top: 1.6rem; }
.rischio { margin-top: .65rem; font-size: .88rem; color: var(--grigio); }
.rischio s { color: #8d9899; }
.rischio strong { color: var(--corallo-scuro); }
.rischio-chiaro { color: rgba(255,255,255,.82); }
.rischio-chiaro s { color: rgba(255,255,255,.55); }
.rischio-chiaro strong { color: var(--giallo); }

/* ─── riquadri ─── */
.riquadro { background: #fff; border-radius: 22px; border: 1px solid rgba(29,43,47,.06); box-shadow: 0 22px 50px -30px rgba(29,43,47,.4); padding: clamp(18px, 2.4vw, 30px); }

/* ═══ BILANCIA · oggetto-filo ═══ */
.bilancia-palco { position: fixed; z-index: 30; right: 4vw; top: 50%; width: min(21vw, 270px); transform: translateY(-50%);
  transition-property: transform, opacity; transition-duration: .6s; transition-timing-function: cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.bilancia-palco.in-film { transform: translateY(-50%) translate(14%, 62%) scale(.56); }
.bilancia { position: relative; aspect-ratio: 1 / 1.06; border-radius: 30px; padding: 7%;
  background: linear-gradient(150deg, #ffffff, #E4E8E6); box-shadow: 0 34px 60px -30px rgba(29,43,47,.55), inset 0 0 0 1px rgba(29,43,47,.06), inset 0 -6px 12px rgba(29,43,47,.06); }
.bilancia-vetro { position: relative; height: 100%; border-radius: 22px; background: linear-gradient(165deg, rgba(255,255,255,.95), rgba(214,224,221,.75)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(29,43,47,.05); overflow: hidden; }
.bilancia-vetro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 48%, transparent 56%); }
.display { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); width: 74%; padding: 10px 10px 8px; border-radius: 12px; background: var(--display); color: var(--lcd); text-align: center; box-shadow: inset 0 2px 10px rgba(0,0,0,.45); z-index: 1; }
.display-numero { display: block; font: 700 clamp(1.6rem, 2.9vw, 2.5rem)/1 var(--titoli); font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: 0 0 14px rgba(201,235,214,.55); transition-property: opacity; transition-duration: .8s; }
.display-numero small { font-size: .42em; margin-left: .2em; opacity: .75; }
.display-riga { display: block; min-height: 1.3em; margin-top: 6px; font: 600 .74rem/1.3 var(--testo); letter-spacing: .06em; text-transform: uppercase; transition-property: opacity; transition-duration: .5s; }
.sfarfalla { animation-name: sfarfalla; animation-duration: .45s; }
@keyframes sfarfalla { 0% { opacity: 1; } 20% { opacity: .15; } 40% { opacity: 1; } 60% { opacity: .35; } 100% { opacity: 1; } }
.pedana { position: absolute; bottom: 9%; width: 31%; height: 44%; border-radius: 44% 44% 48% 48%;
  background: repeating-linear-gradient(0deg, rgba(29,43,47,.07) 0 3px, transparent 3px 9px); }
.pedana-sx { left: 13%; }
.pedana-dx { right: 13%; }
.bilancia-palco.spenta .display-numero { opacity: .12; }
.bilancia-palco.spenta .display-riga { opacity: 0; }

/* ═══ SCENA 1 · apertura ═══ */
.apertura { padding: 0 0 7dvh; }
.prehead { display: inline-block; font: 600 .9rem/1.35 var(--testo); color: var(--salvia-scura); background: rgba(94,140,106,.14); padding: 7px 14px; border-radius: 999px; }
.headline > span { display: block; }
.aggancio { margin-top: 1.1rem; font: 600 clamp(1.1rem, 1.85vw, 1.6rem)/1.25 var(--titoli); color: #34464A; }
.promessa { margin-top: .45rem; font: 800 clamp(1.55rem, 3.4vw, 3.15rem)/1.06 var(--titoli); letter-spacing: -.025em; }
.anchese { display: flex !important; gap: .55rem; margin-top: .95rem; font: 500 clamp(.92rem, 1.15vw, 1.08rem)/1.4 var(--testo); color: #4B5A5E; }
.anchese .segno { color: var(--corallo); font-weight: 800; }
.sub { margin-top: 1rem; max-width: 56ch; font-size: clamp(.95rem, 1.12vw, 1.08rem); color: #3B4A4E; }

/* ═══ SCENA 2 · cosa ricevi ═══ */
.contatori { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6rem; }
.badge { display: flex; align-items: baseline; gap: 7px; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 10px 24px -18px rgba(29,43,47,.5); }
.badge b { font: 800 1.7rem/1 var(--titoli); color: var(--salvia-scura); }
.badge span { font-size: .86rem; color: var(--grigio); }
.bundle-zona { position: relative; min-height: 440px; }
.polaroid { position: absolute; right: 0; top: 0; width: 46%; aspect-ratio: 4 / 5; border: 10px solid #fff; border-bottom-width: 34px; border-radius: 6px; transform: rotate(5deg); }
.bundle { position: absolute; left: 0; bottom: 30px; width: min(330px, 90%); height: 360px; perspective: 1200px; }
.libro { position: absolute; left: 22%; top: 40px; width: 200px; height: 280px; transform-style: preserve-3d; transform: rotateY(-24deg) rotateX(4deg);
  animation-name: gira-libro; animation-duration: 7s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes gira-libro { from { transform: rotateY(-26deg) rotateX(4deg); } to { transform: rotateY(-10deg) rotateX(2deg); } }
.libro::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 100%; background: #173524; transform-origin: left center; transform: rotateY(90deg); }
.libro-copertina { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 18px; border-radius: 3px 10px 10px 3px; color: var(--crema);
  background: linear-gradient(160deg, #3B6D52, var(--salvia-scura) 55%, #1F4230); box-shadow: inset 7px 0 0 rgba(0,0,0,.2), 24px 30px 50px -22px rgba(0,0,0,.55); }
.libro-copertina::after { content: ""; position: absolute; left: 18px; right: 18px; top: 52%; height: 6px; border-radius: 3px; background: var(--giallo); }
.libro-copertina b { font: 800 1.65rem/1 var(--titoli); letter-spacing: .03em; }
.libro-sopra { font: 600 .66rem/1.2 var(--testo); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd); }
.libro-sotto { font-size: .74rem; line-height: 1.35; color: rgba(247,244,238,.85); }
.libro-workbook { position: absolute; left: 0; top: 80px; width: 180px; height: 240px; border-radius: 6px; padding: 14px; transform: rotate(-9deg);
  background: var(--crema); box-shadow: 0 20px 40px -22px rgba(0,0,0,.5); border: 1px solid rgba(29,43,47,.08); }
.libro-workbook b { font: 800 .95rem var(--titoli); color: var(--corallo); }
.libro-workbook i { display: block; margin-top: 12px; height: 150px; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(29,43,47,.14) 18px 20px), repeating-linear-gradient(0deg, transparent 0 18px, rgba(29,43,47,.14) 18px 20px); }
.bonus-ventaglio span { position: absolute; right: -14px; top: 120px; width: 100px; height: 140px; border-radius: 6px; padding: 10px; font: 700 .7rem var(--titoli); transform-origin: bottom left; box-shadow: 0 14px 30px -18px rgba(0,0,0,.5); }
.bonus-ventaglio span:nth-child(1) { background: var(--cipria); transform: rotate(4deg); }
.bonus-ventaglio span:nth-child(2) { background: #FFF1B8; transform: rotate(11deg); }
.bonus-ventaglio span:nth-child(3) { background: var(--salvia-chiara); transform: rotate(18deg); }
.bonus-ventaglio span:nth-child(4) { background: #fff; transform: rotate(25deg); }
.nota-bundle { position: absolute; left: 0; bottom: -6px; }

/* ═══ SCENA 3 · app delle calorie ═══ */
.giornata-riga { display: grid; grid-template-columns: auto minmax(0, 340px); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 2rem; }
.telefono { position: relative; width: 280px; min-height: 400px; padding: 20px 16px 24px; background: #fff; border: 10px solid #151A1C; border-radius: 38px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(29,43,47,.6); }
.app-testa { display: flex; flex-direction: column; padding-bottom: 12px; border-bottom: 1px solid #EEE; }
.app-testa span { font-size: .78rem; color: #8A9597; }
.app-testa b { font: 700 1.05rem var(--titoli); }
.app-voce { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid #F1F1F1; font-size: .84rem;
  transition-property: opacity, transform; transition-duration: .45s; }
.app-voce time { color: #8A9597; font-variant-numeric: tabular-nums; }
.app-voce em { font-style: normal; font-weight: 600; color: var(--grigio); }
.app-voce .app-ok { color: var(--salvia); }
.app-rossa em { color: var(--corallo); font-weight: 800; }
.app-pronta .app-voce:not(.su) { opacity: 0; transform: translateY(10px); }
.app-notifica { position: absolute; left: 10px; right: 10px; top: 10px; padding: 11px 13px; border-radius: 14px; background: var(--corallo); color: #fff; font: 600 .82rem/1.3 var(--testo); box-shadow: 0 12px 24px -10px rgba(238,106,79,.8);
  transition-property: transform, opacity; transition-duration: .5s; }
.app-pronta .app-notifica:not(.su) { transform: translateY(-140%); opacity: 0; }
.app-notifica.su { animation-name: pulsa; animation-duration: 1.6s; animation-iteration-count: infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 12px 24px -10px rgba(238,106,79,.8); } 50% { box-shadow: 0 0 0 6px rgba(238,106,79,.25), 0 12px 24px -10px rgba(238,106,79,.8); } }

/* ═══ calcolatori ═══ */
.calcolatore { margin-top: 1.8rem; max-width: 640px; }
.cursore { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; margin-bottom: 14px; }
.cursore span { grid-column: 1 / -1; font-size: .9rem; font-weight: 600; }
.cursore input[type=range] { width: 100%; accent-color: var(--corallo); }
.cursore output { font: 700 1.02rem var(--titoli); color: var(--salvia-scura); min-width: 7.5em; text-align: right; font-variant-numeric: tabular-nums; }
.calc-risultato { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1.5px dashed rgba(29,43,47,.15); text-align: center; }
.calc-risultato span { display: block; margin-top: 4px; font-size: .72rem; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; color: var(--grigio); }
.cifra { display: block; font: 800 clamp(1.5rem, 2.8vw, 2.4rem)/1 var(--titoli); font-variant-numeric: tabular-nums; }
.cifra.corallo { color: var(--corallo); }
.cifra.salvia { color: var(--salvia-scura); }
.calc-confronto { background: var(--salvia-chiara); border-radius: 14px; padding: 8px 4px; }
.calc-chiusa { margin-top: 14px; font-weight: 500; }
.calc-piccolo { margin-top: 6px; font-size: .72rem; color: #8A9597; }
.lucchetto { font-size: .9em; }
.campi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.campo span { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 4px; }
.campo input { width: 100%; font: 700 1.1rem var(--titoli); padding: 8px 10px; border: 1.5px solid #D5DCD8; border-radius: 10px; background: var(--crema); color: var(--inchiostro); }

/* ═══ SCENA 5 · stesso peso, due corpi ═══ */
.nemico .gigante { margin-bottom: .6rem; }
.corpi { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; }
.corpi-svg { width: 100%; height: auto; }
.corpi-testa { fill: #D9A994; }
.corpi-sagoma { fill: #D9A994; }
.corpi-braccio { fill: none; stroke: #D9A994; stroke-linecap: round; }
.corpi-bilancia { fill: var(--display); }
.corpi-lcd { fill: var(--lcd); font: 700 12px var(--titoli); }
.etichetta-stato { font: 700 1.6rem/1 var(--mano); color: var(--corallo); }
.barre { display: grid; gap: 8px; margin-top: 4px; }
.barra-riga { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; font-size: .8rem; color: var(--grigio); }
.barra-riga i { display: block; height: 10px; border-radius: 99px; background: #EEF0EE; overflow: hidden; }
.barra-riga b { display: block; height: 100%; border-radius: 99px; background: var(--salvia); }
.barra-riga b.grasso { background: #E9A594; }
.corpi .cursore output { min-width: 0; }
.corpi-nota { margin-top: 12px; font-size: .85rem; color: var(--grigio); }

/* ═══ film a foto ═══ */
.scrub .pannello { left: 6vw; top: 50%; translate: 0 -50%; max-width: 44vw; color: #fff; }
.scrub .pannello-alto { top: 16dvh; translate: none; }
.velo-film-sinistra { background: linear-gradient(90deg, rgba(12,18,20,.85) 0%, rgba(12,18,20,.5) 45%, rgba(12,18,20,0) 78%); }
.pannello-testo { font: 600 clamp(1.3rem, 2.3vw, 2.1rem)/1.22 var(--titoli); }
.pannello-gigante { font: 800 clamp(1.9rem, 4vw, 3.6rem)/1.04 var(--titoli); letter-spacing: -.025em; }
.manubrio { position: absolute; left: 6vw; bottom: 9dvh; display: flex; align-items: center; gap: 14px; }
.manubrio svg { width: 120px; fill: rgba(247,244,238,.92); }
.manubrio-peso { font: 800 1.5rem/1 var(--titoli); color: var(--inchiostro); background: var(--giallo); padding: 6px 12px; border-radius: 8px; transform: rotate(-3deg); font-variant-numeric: tabular-nums; }
.manubrio-peso.batte { animation-name: batte; animation-duration: .45s; }
@keyframes batte { 0% { transform: rotate(-3deg) scale(1); } 40% { transform: rotate(-3deg) scale(1.25); } 100% { transform: rotate(-3deg) scale(1); } }
.tracker { position: absolute; left: 6vw; bottom: 7dvh; width: min(380px, 88vw); padding: 14px 16px; border-radius: 18px; background: rgba(247,244,238,.96); color: var(--inchiostro); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.tracker-titolo { font: 700 .74rem var(--testo); letter-spacing: .1em; text-transform: uppercase; color: var(--salvia-scura); margin-bottom: 8px; }
.tracker ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tracker li { background: #fff; border-radius: 10px; padding: 6px 4px; text-align: center; font-size: .7rem; color: var(--grigio); }
.tracker li b { display: block; font: 800 1.15rem/1.1 var(--titoli); color: var(--salvia-scura); transition-property: opacity, transform; transition-duration: .4s; }
.tracker-pronto .tracker li:not(.fatto):not(.tracker-peso) b { opacity: .12; transform: scale(.7); }
.tracker li.tracker-peso b { color: var(--corallo); }

/* ═══ SCENA 7 · i sei pilastri ═══ */
.tempio { margin-top: 2.2rem; }
.mensola { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 10px; background: var(--inchiostro); color: var(--crema); }
.mensola b { font: 800 1rem var(--titoli); letter-spacing: .24em; }
.nota-mensola { margin: 0; font-size: 1.3rem; color: var(--giallo); }
.colonne { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 10px; }
.colonna-pilastro { display: flex; flex-direction: column; gap: 6px; min-height: 230px; padding: 0 10px 12px; border-radius: 0 0 14px 14px; background: rgba(255,255,255,.94); box-shadow: 0 16px 30px -24px rgba(29,43,47,.6);
  transition-property: transform, opacity; transition-duration: .25s; }
.colonna-pilastro i { display: block; height: 34px; margin: 0 -10px 4px; background: repeating-linear-gradient(90deg, #fff 0 9px, #E4EAE5 9px 12px); }
.colonna-pilastro b { font: 800 clamp(.82rem, 1vw, 1rem)/1.15 var(--titoli); color: var(--salvia-scura); overflow-wrap: anywhere; }
.colonna-pilastro span { font-size: .84rem; line-height: 1.35; }
.colonna-pilastro em { margin-top: auto; align-self: flex-start; font-style: normal; font-size: .7rem; font-weight: 600; color: var(--grigio); background: var(--crema); border-radius: 99px; padding: 2px 8px; }

/* ═══ SCENA 9 · calendario e lettere ═══ */
.calendario { margin-top: 1.6rem; }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cal-legenda span { font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.s1 { background: var(--cipria); } .s2 { background: #FFE9A0; } .s3 { background: #CFE3D3; } .s4 { background: #C4D8EA; }
.cal-giorni { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.cal-giorni li { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; font: 700 .7rem var(--titoli); color: rgba(29,43,47,.6); transition-property: opacity; transition-duration: .3s; }
.cal-pronto .cal-giorni li:not(.fatto) { opacity: .4; }
.cal-giorni li.fatto::after { content: "✓"; position: absolute; right: 2px; top: -3px; font-size: .8rem; color: var(--salvia-scura); }
.lettere-zona { margin-top: 2.4rem; }
.lettere { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; perspective: 900px; }
.lettere li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 12px; background: #fff; box-shadow: 0 12px 24px -18px rgba(29,43,47,.6); text-align: center;
  transition-property: transform, opacity; transition-duration: .2s; }
.lettere b { font: 800 clamp(1.4rem, 2.5vw, 2.3rem)/1 var(--titoli); }
.lettere li:nth-child(3n+1) b { color: var(--corallo); } .lettere li:nth-child(3n+2) b { color: var(--salvia-scura); } .lettere li:nth-child(3n) b { color: var(--display); }
.lettere span { font-size: .72rem; line-height: 1.15; }
.lettere li.aperta { outline: 2px solid var(--corallo); background: #FFF6D6; }
.lettere li.aperta span { font-weight: 700; color: var(--corallo-scuro); }

/* ═══ SCENA 11 · testimonianze ═══ */
.card-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 2rem; }
.card { background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 18px 40px -28px rgba(29,43,47,.5); display: flex; flex-direction: column; }
.mini-lcd { align-self: flex-start; min-height: 1.9em; padding: 6px 10px; border-radius: 8px; background: var(--display); color: var(--lcd); font: 700 .85rem/1.2 var(--titoli); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.card blockquote { margin: 14px 0 16px; font-size: 1rem; line-height: 1.55; }
.card footer { margin-top: auto; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; }
.avatar { position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; background: linear-gradient(150deg, #EFD2C4, #A9C0AE); }
.avatar .etichetta { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); font-size: .56rem; padding: 1px 4px; }

/* ═══ SCENA 12 · bonus ═══ */
.spago { position: relative; margin-top: 2.4rem; }
.spago-filo { position: absolute; left: 0; top: 0; width: 100%; height: 40px; }
.spago-filo path { fill: none; stroke: #CDBB9E; stroke-width: 2; }
.etichette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 24px; }
.etichetta-bonus { position: relative; padding: 36px 16px 20px; border-radius: 10px 10px 14px 14px; color: var(--inchiostro); background: var(--crema);
  clip-path: polygon(20% 0, 80% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); transform-origin: 50% -20px;
  animation-name: dondola; animation-duration: 3.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.etichetta-bonus::before { content: ""; position: absolute; left: 50%; top: 12px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--salvia-scura); }
.etichetta-bonus:nth-child(2) { background: #FFF1B8; animation-delay: -.8s; }
.etichetta-bonus:nth-child(3) { background: var(--cipria); animation-delay: -1.7s; }
.etichetta-bonus:nth-child(4) { background: #DCEBDD; animation-delay: -2.4s; }
@keyframes dondola { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.etichetta-bonus em { display: block; font: 700 1.25rem/1 var(--mano); color: var(--corallo-scuro); font-style: normal; }
.etichetta-bonus b { display: block; margin-top: 6px; font: 800 1.05rem/1.15 var(--titoli); }
.etichetta-bonus span { display: block; margin-top: 8px; font-size: .88rem; line-height: 1.45; }

/* ═══ SCENA 13 · offerta ═══ */
.offerta-griglia { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; margin-top: 2rem; align-items: start; }
.dentro li { position: relative; padding-left: 32px; margin: 9px 0; font-weight: 500; }
.dentro li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--salvia-chiara); color: var(--salvia-scura); font: 800 .78rem var(--titoli); }
.prezzo { display: flex; align-items: flex-end; gap: 18px; margin: 20px 0 10px; }
.prezzo-vecchio { position: relative; font: 700 1.9rem/1 var(--titoli); color: #8A9699; padding-bottom: .5rem; }
.prezzo-vecchio svg { position: absolute; left: -10%; top: -10%; width: 120%; height: 110%; overflow: visible; }
.prezzo-vecchio path { fill: none; stroke: var(--corallo); stroke-width: 4; stroke-linecap: round; }
.prezzo-nuovo { font: 800 clamp(3.2rem, 6vw, 4.6rem)/.9 var(--titoli); color: var(--corallo); letter-spacing: -.03em; }
.copie-caselle { display: flex; gap: 6px; margin-top: 14px; }
.copie-caselle li { position: relative; width: 26px; height: 26px; border: 2px solid var(--inchiostro); border-radius: 6px; }
.copie-caselle li.presa::after { content: ""; position: absolute; inset: 2px; background: linear-gradient(45deg, transparent 42%, var(--corallo) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--corallo) 42% 58%, transparent 58%);
  transition-property: transform; transition-duration: .25s; }
.copie.da-disegnare li.presa::after { transform: scale(0); }
.copie.disegnato li.presa::after { transform: scale(1); }
.copie.disegnato li:nth-child(2)::after { transition-delay: .12s; } .copie.disegnato li:nth-child(3)::after { transition-delay: .24s; } .copie.disegnato li:nth-child(4)::after { transition-delay: .36s; }
.copie.disegnato li:nth-child(5)::after { transition-delay: .48s; } .copie.disegnato li:nth-child(6)::after { transition-delay: .6s; } .copie.disegnato li:nth-child(7)::after { transition-delay: .72s; }
.copie.disegnato li:nth-child(8)::after { transition-delay: .84s; } .copie.disegnato li:nth-child(9)::after { transition-delay: .96s; }
.copie-caselle li.libera { border-color: var(--corallo); animation-name: pulsa; animation-duration: 1.6s; animation-iteration-count: infinite; }
.copie p { margin-top: 10px; font-size: .95rem; }
.pagamenti { margin-top: 8px; text-align: center; font-size: .8rem; color: var(--grigio); }
.garanzia { text-align: center; }
.timbro { display: block; width: 150px; margin: 0 auto 10px; transform: rotate(-8deg); }
.timbro circle { fill: none; stroke: var(--corallo); stroke-width: 3; }
.timbro text { fill: var(--corallo); font: 700 11px var(--titoli); letter-spacing: 2px; }
.timbro .timbro-num { font: 800 36px var(--titoli); letter-spacing: 0; }
.timbro .timbro-gg { font: 700 11px var(--titoli); letter-spacing: 3px; }
.rivela.visto .timbro { animation-name: timbra; animation-duration: .5s; animation-delay: .35s; animation-fill-mode: both; }
@keyframes timbra { from { opacity: 0; transform: rotate(-8deg) scale(1.5); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
.garanzia h3 { font: 800 1.3rem/1.2 var(--titoli); }
.garanzia p { margin-top: 8px; font-size: .95rem; }

/* ═══ SCENA 14 · domande ═══ */
.fisarmonica { margin-top: 1.6rem; max-width: 760px; }
.fisarmonica details { margin-bottom: 10px; padding: 0 20px; border-radius: 16px; background: #fff; box-shadow: 0 12px 26px -22px rgba(29,43,47,.5); }
.fisarmonica summary { position: relative; padding: 18px 34px 18px 0; list-style: none; cursor: pointer; font: 700 1.06rem/1.35 var(--titoli); }
.fisarmonica summary::-webkit-details-marker { display: none; }
.fisarmonica summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 700 1.6rem var(--titoli); color: var(--corallo); }
.fisarmonica details[open] summary::after { content: "−"; }
.dr-corpo { padding: 0 0 18px; color: #3B4A4E; }

/* ═══ SCENA 15 · congedo ═══ */
.congedo { display: flex; align-items: center; background: #1B2224; color: var(--crema); }

/* ═══ footer ═══ */
.piede { position: relative; z-index: 31; padding: 44px 6vw 120px; background: var(--inchiostro); color: #B9C3C5; font-size: .82rem; }
.piede a { color: var(--crema); }
.piede p + p { margin-top: 12px; }
.disclaimer { max-width: 80ch; }

/* ═══ barra d'acquisto (telefono) ═══ */
.barra-acquisto { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 9px 9px 16px; border-radius: 18px; background: var(--inchiostro); color: #fff; box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); }
.barra-acquisto[hidden] { display: none; }
.barra-acquisto-prezzo s { color: #8FA0A2; margin-right: 4px; }
.barra-acquisto-prezzo b { font: 800 1.3rem var(--titoli); color: var(--giallo); }

/* ══════════ telefono e tablet stretto ══════════ */
@media (min-width: 900px) { .barra-acquisto { display: none !important; } }

@media (max-width: 899px) {
  body { font-size: 16px; }
  .colonna, .apertura-testo { margin: 0; width: auto; padding: 0 20px; }
  .apertura-griglia { grid-template-columns: 1fr; padding: 16px 0 0; min-height: 0; gap: 0; }
  .scena { padding: 84px 0 72px; min-height: 0; }
  .griglia-due { grid-template-columns: 1fr; }
  .foto-segnaposto { aspect-ratio: 4 / 3; }
  .velo-sinistra { background: linear-gradient(180deg, rgba(247,244,238,.97) 0%, rgba(247,244,238,.9) 55%, rgba(247,244,238,.6) 100%); }
  .velo-scuro { background: linear-gradient(180deg, rgba(18,24,26,.93) 0%, rgba(18,24,26,.8) 60%, rgba(18,24,26,.55) 100%); }

  /* la bilancia diventa una fascia col display, dopo l'apertura */
  .bilancia-palco { left: 0; right: 0; top: 0; width: auto; transform: translateY(-110%); }
  .bilancia-palco.visibile, .bilancia-palco.visibile.in-film { transform: none; }
  .bilancia-palco.in-film { transform: translateY(-110%); }
  .bilancia-palco .bilancia { aspect-ratio: auto; border-radius: 0; padding: 0; background: var(--display); box-shadow: 0 8px 20px -12px rgba(0,0,0,.6); }
  .bilancia-palco .bilancia-vetro { height: auto; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .bilancia-palco .bilancia-vetro::after, .bilancia-palco .pedana { display: none; }
  .bilancia-palco .display { position: static; transform: none; width: 100%; height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 18px 0; display: flex; align-items: center; justify-content: center; gap: 14px; border-radius: 0; box-shadow: none; }
  .bilancia-palco .display-numero { font-size: 1.4rem; }
  .bilancia-palco .display-riga { margin: 0; min-height: 0; font-size: .74rem; }

  .congedo { min-height: 100dvh; }
  .apertura { min-height: 100dvh; padding: 0 0 30px; }
  .prehead { font-size: .76rem; padding: 5px 11px; }
  .aggancio { margin-top: .75rem; font-size: 1.04rem; }
  .promessa { font-size: 1.5rem; margin-top: .3rem; }
  .anchese { margin-top: .6rem; font-size: .86rem; }
  .sub { margin-top: .6rem; font-size: .9rem; line-height: 1.5; }
  .cta-gruppo { margin-top: 1rem; }
  .apertura .bottone { width: 100%; padding: .95rem 1.2rem; }
  .rischio { font-size: .8rem; text-align: center; }

  .bundle-zona { min-height: 400px; margin-top: 1rem; }
  .bundle { width: 100%; }
  .polaroid { width: 42%; }
  .giornata-riga { grid-template-columns: 1fr; justify-items: center; }
  .giornata-riga .foto-segnaposto { width: 100%; }
  .telefono { width: min(290px, 100%); }
  .calc-risultato { gap: 6px; }
  .calc-risultato span { font-size: .64rem; }
  .corpi { grid-template-columns: 120px 1fr; }
  .campi { grid-template-columns: repeat(3, 1fr); }

  .scrub .pannello { left: 5vw; right: 5vw; max-width: none; top: auto; bottom: 16dvh; translate: none; }
  .scrub .pannello-alto { top: 76px; bottom: auto; }
  .velo-film-sinistra { background: linear-gradient(0deg, rgba(12,18,20,.88) 0%, rgba(12,18,20,.4) 55%, rgba(12,18,20,.15) 100%); }
  .film-sogno .velo-film-sinistra { background: linear-gradient(180deg, rgba(12,18,20,.88) 0%, rgba(12,18,20,.35) 50%, rgba(12,18,20,.6) 100%); }
  .manubrio { left: auto; right: 5vw; top: 70px; bottom: auto; }
  .manubrio svg { width: 76px; }
  .manubrio-peso { font-size: 1.1rem; }
  .tracker { left: 5vw; right: 5vw; width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); }

  .colonne { grid-template-columns: repeat(2, 1fr); }
  .colonna-pilastro { min-height: 150px; }
  .mensola { flex-direction: column; align-items: flex-start; gap: 2px; }
  .lettere { grid-template-columns: repeat(5, 1fr); }
  .card-griglia { grid-template-columns: 1fr; }
  .etichette { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .etichetta-bonus { padding: 32px 12px 16px; }
  .offerta-griglia { grid-template-columns: 1fr; }
  .copie-caselle li { width: 24px; height: 24px; }
  .gigante { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ══════════ v2 · più aggressiva: annuncio, nastri, hero esplosiva, adesivi, bollini ══════════ */

/* annuncio e nastri */
.annuncio { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 14px; background: var(--inchiostro); color: #fff; font: 500 .9rem/1.3 var(--testo); text-align: center; }
.annuncio b { color: var(--giallo); font-weight: 700; }
.pallino { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--corallo); animation-name: pallino; animation-duration: 1.2s; animation-iteration-count: infinite; }
@keyframes pallino { 0%, 100% { box-shadow: 0 0 0 0 rgba(238,106,79,.7); } 60% { box-shadow: 0 0 0 7px rgba(238,106,79,0); } }
.nastro { position: relative; z-index: 3; overflow: hidden; white-space: nowrap; padding: 10px 0; font: 800 .95rem/1 var(--titoli); letter-spacing: .04em; text-transform: uppercase; }
.nastro-scorre { display: inline-flex; animation-name: scorri; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; }
.nastro-scorre > span { padding-right: .4em; }
.nastro-lento { animation-duration: 50s; }
@keyframes scorri { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.nastro-giallo { background: var(--giallo); color: var(--inchiostro); }
.nastro-corallo { margin: -14px -2% ; width: 104%; padding: 14px 0; background: var(--corallo); color: #fff; font-size: 1.15rem; transform: rotate(-1.6deg); box-shadow: 0 14px 30px -18px rgba(0,0,0,.5); z-index: 5; }
.nastro-risultati { margin: 2.2rem 0 .4rem; padding: 14px 0; border-block: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--crema); font: 500 1rem/1 var(--testo); text-transform: none; letter-spacing: 0; }
.nastro-risultati b { color: var(--giallo); font-weight: 700; }

/* hero esplosiva */
.apertura-griglia { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr); gap: 3vw; align-items: center; min-height: calc(100dvh - 76px); padding: 4dvh 4vw 0 6vw; }
.macchia { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .45; }
.m1 { width: 340px; height: 340px; right: 8%; top: 18%; background: var(--corallo); }
.m2 { width: 280px; height: 280px; right: 26%; bottom: 6%; background: var(--giallo); }
.m3 { width: 300px; height: 300px; right: -4%; bottom: 28%; background: var(--salvia); }
.blocco-corallo { background: var(--corallo); color: #fff; padding: 0 .22em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cerchiato { position: relative; display: inline-block; color: var(--corallo); }
.cerchiato svg { position: absolute; left: -7%; top: -22%; width: 114%; height: 144%; overflow: visible; pointer-events: none; }
.cerchiato path { fill: none; stroke: var(--corallo-scuro); stroke-width: 2.6; stroke-linecap: round; }
.barrato-mano { position: relative; display: inline-block; }
.barrato-mano svg { position: absolute; left: -2%; top: 32%; width: 104%; height: 45%; overflow: visible; pointer-events: none; }
.barrato-mano path { fill: none; stroke: var(--corallo); stroke-width: 6; stroke-linecap: round; }
.bottone-grande { font-size: 1.25rem; padding: 1.2rem 2.3rem; animation-name: batti; animation-duration: 2.6s; animation-iteration-count: infinite; }
@keyframes batti { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.freccia { display: inline-block; animation-name: freccia; animation-duration: 1.3s; animation-iteration-count: infinite; }
@keyframes freccia { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.fiducia { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 1rem; }
.fiducia li { font: 600 .86rem/1.3 var(--testo); color: var(--salvia-scura); }
.fiducia li::before { content: "✓ "; color: var(--corallo); font-weight: 800; }
.hero-oggetti { position: relative; height: min(70dvh, 600px); min-height: 470px; }
.hero-bilancia { position: absolute; left: 16%; top: 12%; width: 58%; max-width: 360px; }
.hero-bilancia .display-numero { font-size: clamp(2.2rem, 3.8vw, 3.3rem); }
.hero-bilancia .display-riga { font-size: .82rem; }
.hero-libro { position: absolute; left: 0; bottom: 2%; width: 180px; height: 250px; perspective: 1100px; }
.hero-libro .libro { left: 0; top: 0; width: 180px; height: 250px; }
.pop, .adesivo, .postit, .cartellino-prezzo, .bollino-piccolo { transform: rotate(var(--r, 0deg)); }
.rivela-pronta .pop.visto { animation-name: pop; animation-duration: .75s; animation-timing-function: cubic-bezier(.3,1.7,.5,1); animation-fill-mode: both; }
@keyframes pop { 0% { opacity: 0; transform: scale(.2) rotate(-25deg); } 100% { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); } }
.bollino { position: absolute; right: 2%; top: 0; width: 150px; filter: drop-shadow(0 16px 20px rgba(238,106,79,.45)); }
.bollino circle { fill: var(--corallo); }
.bollino text { fill: #fff; font-family: var(--titoli); }
.bollino-giro { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; transform-box: view-box; transform-origin: 80px 80px; animation-name: gira; animation-duration: 16s; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.bollino-num { font-size: 46px; font-weight: 800; }
.bollino-sotto { font-size: 15px; font-weight: 800; letter-spacing: 3px; }
.postit { --r: 5deg; position: absolute; right: 3%; bottom: 17%; display: flex; flex-direction: column; width: 150px; padding: 16px 16px 20px; background: var(--giallo); color: var(--inchiostro); font: 700 1.75rem/1.05 var(--mano); box-shadow: 0 18px 30px -18px rgba(0,0,0,.55); }
.chip-scuro { position: absolute; left: 2%; top: 3%; display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 7px; border-radius: 999px; background: var(--inchiostro); color: #fff; font: 700 .92rem/1.2 var(--titoli); box-shadow: 0 14px 26px -16px rgba(0,0,0,.6); }
.chip-scuro .zero { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--corallo); font-weight: 800; }
.chip-inline { position: static; margin-top: 1.4rem; padding: 8px 16px; background: var(--inchiostro); }
.cartellino-prezzo { --r: -7deg; position: absolute; right: 30%; bottom: 0; display: flex; align-items: baseline; gap: 8px; padding: 10px 16px 10px 28px; background: #fff; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); }
.cartellino-prezzo s { color: #8A9699; font-size: .95rem; }
.cartellino-prezzo b { font: 800 1.9rem/1 var(--titoli); color: var(--corallo); }
.cartellino-prezzo em { font: 700 .7rem var(--testo); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--salvia-scura); }
.nota-freccia { position: absolute; right: 0; bottom: 45%; margin: 0; --r: -6deg; transform: rotate(-6deg); }

/* adesivi e bollini nelle scene */
.adesivo { --r: -5deg; position: absolute; z-index: 4; max-width: 170px; padding: 10px 14px; border-radius: 10px; font: 800 .98rem/1.15 var(--titoli); box-shadow: 0 14px 26px -14px rgba(0,0,0,.55); }
.adesivo-corallo { background: var(--corallo); color: #fff; }
.adesivo-giallo { background: var(--giallo); color: var(--inchiostro); }
.adesivo-bundle { --r: -8deg; left: 0; top: 6%; }
.corpi { position: relative; }
.adesivo-corpi { --r: 5deg; right: -12px; top: -18px; }
.bollino-piccolo { --r: 10deg; display: grid; place-content: center; width: 88px; height: 88px; border-radius: 50%; background: var(--corallo); color: #fff; text-align: center; box-shadow: 0 14px 26px -14px rgba(238,106,79,.8); }
.bollino-piccolo b { font: 800 1.7rem/1 var(--titoli); }
.bollino-piccolo span { font: 700 .66rem/1.2 var(--testo); letter-spacing: .12em; text-transform: uppercase; }
.pilastri .bollino-piccolo { position: absolute; right: 0; top: -14px; }
.calendario { position: relative; }
.bollino-calendario { position: absolute; right: -18px; top: -30px; }
.prezzo { position: relative; }
.bollino-sconto { --r: -10deg; position: absolute; right: 0; top: -18px; background: var(--giallo); color: var(--inchiostro); }

/* titoli e blocchi */
.titolo { font-size: clamp(1.85rem, 3.6vw, 3.3rem); }
.titolo-grande { font-size: clamp(2rem, 4.3vw, 3.9rem); line-height: 1.04; }
.lead { margin-top: 1.1rem; max-width: 42ch; font: 600 clamp(1.12rem, 1.55vw, 1.42rem)/1.38 var(--titoli); color: var(--inchiostro); }

/* tinta notte: prove e nemico */
.tinta-notte { background: #16242A; color: var(--crema); }
.tinta-notte .titolo, .tinta-notte .gigante { color: #fff; }
.tinta-notte .occhiello { color: var(--giallo); }
.tinta-notte .testo { color: rgba(255,255,255,.84); }
.tinta-notte .testo strong { color: #fff; }
.tinta-notte mark.evid { color: var(--inchiostro); background-image: linear-gradient(var(--giallo), var(--giallo)); padding: 0 .16em; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tinta-notte .link-cta { color: var(--giallo); }
.numerone { display: inline-block; color: var(--corallo); font-size: 1.22em; font-variant-numeric: tabular-nums; }
.card { color: var(--inchiostro); }
.card-testa { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stelle { color: #F2B705; letter-spacing: 2px; font-size: .95rem; }
.prove .card-griglia { margin-top: 1.6rem; }
.prove .cta-gruppo { margin-top: 2rem; }

@media (min-width: 900px) {
  .bilancia-palco:not(.visibile) { opacity: 0; transform: translateY(-50%) scale(.8); }
}
@media (max-width: 899px) {
  .apertura-griglia { grid-template-columns: 1fr; padding: 16px 0 0; min-height: 0; gap: 0; }
  .macchia { opacity: .3; }
  .annuncio { font-size: .76rem; padding: 7px 10px; gap: 7px; }
  .nastro { font-size: .78rem; padding: 7px 0; }
  .nastro-corallo { font-size: .95rem; padding: 11px 0; }
  .hero-oggetti { height: 360px; min-height: 0; margin: 30px 20px 0; }
  .hero-bilancia { left: 17%; top: 12%; width: 58%; }
  .hero-bilancia .display-numero { font-size: 2rem; }
  .hero-bilancia .display-riga { font-size: .66rem; }
  .hero-libro, .hero-libro .libro { width: 126px; height: 176px; }
  .hero-libro .libro-copertina { padding: 12px 10px; }
  .hero-libro .libro-copertina b { font-size: 1.12rem; }
  .hero-libro .libro-sopra, .hero-libro .libro-sotto { font-size: .5rem; }
  .bollino { width: 104px; right: 0; top: 0; }
  .postit { width: 112px; padding: 10px 12px 14px; font-size: 1.3rem; right: 0; bottom: 12%; }
  .chip-scuro { font-size: .78rem; left: 0; top: 0; }
  .cartellino-prezzo { right: 26%; }
  .cartellino-prezzo b { font-size: 1.4rem; }
  .nota-freccia { display: none; }
  .bottone-grande { width: 100%; font-size: 1.1rem; padding: 1rem 1.2rem; }
  .fiducia { justify-content: center; gap: 4px 12px; }
  .fiducia li { font-size: .76rem; }
  .adesivo { font-size: .85rem; }
  .adesivo-corpi { right: 6px; top: -22px; }
  .bollino-piccolo { width: 70px; height: 70px; }
  .bollino-piccolo b { font-size: 1.3rem; }
  .bollino-calendario { right: -6px; }
}
.sottolinea-spessa path { stroke-width: 5; stroke: var(--giallo); }

/* ══════════ v3 · apertura più leggibile: nastri, evidenze, riquadri ══════════ */
.apertura .velo-sinistra { background: linear-gradient(90deg, rgba(247,244,238,.98) 0%, rgba(247,244,238,.96) 48%, rgba(247,244,238,.55) 70%, rgba(247,244,238,.2) 100%); }
.prehead { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; background: var(--inchiostro); color: #fff; font: 600 .95rem/1.3 var(--testo); box-shadow: 0 10px 22px -14px rgba(0,0,0,.6); }
.prehead b { color: var(--giallo); font-weight: 700; }
.prehead-segno { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--corallo); color: #fff; font: 800 .95rem var(--titoli); }
.aggancio { font-weight: 700; color: var(--inchiostro); font-size: clamp(1.2rem, 2vw, 1.75rem); }
.blocco-giallo { background: var(--giallo); color: var(--inchiostro); padding: 0 .22em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.anchese { align-items: flex-start; max-width: 46ch; padding: 10px 14px; border-radius: 12px; background: #fff; border-left: 4px solid var(--corallo); color: var(--inchiostro) !important; font-size: clamp(.95rem, 1.2vw, 1.1rem) !important; box-shadow: 0 10px 24px -20px rgba(0,0,0,.6); }
.anchese b { font-weight: 700; color: var(--corallo-scuro); }
.sub-box { max-width: 54ch; margin-top: 1rem; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.92); border: 2px solid var(--inchiostro); color: #2E3C40; font-size: clamp(.95rem, 1.1vw, 1.06rem); line-height: 1.5; box-shadow: 6px 6px 0 var(--inchiostro); }
.sub-forte { display: block; margin-bottom: 4px; font: 800 clamp(1.1rem, 1.55vw, 1.4rem)/1.25 var(--titoli); color: var(--inchiostro); }
.sub-box b { color: var(--inchiostro); }
.evid-salvia { background: var(--salvia-chiara); color: var(--salvia-scura); font-weight: 700; padding: 0 .2em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.banner-fila { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.banner { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 10px; font: 800 .92rem/1.1 var(--titoli); text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 10px 20px -14px rgba(0,0,0,.6); }
.banner > span:first-child { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-size: .85rem; background: rgba(255,255,255,.25); }
.banner-corallo { background: var(--corallo); color: #fff; transform: rotate(-1.5deg); }
.banner-giallo { background: var(--giallo); color: var(--inchiostro); transform: rotate(1deg); }
.banner-giallo > span:first-child { background: var(--inchiostro); color: var(--giallo); }
.banner-scuro { background: var(--inchiostro); color: #fff; transform: rotate(-1deg); }
.banner-scuro > span:first-child { background: var(--corallo); }
.fiducia li { font-size: .92rem; color: var(--inchiostro); }
@media (max-width: 899px) {
  .prehead { font-size: .76rem; padding: 5px 12px 5px 5px; gap: 7px; }
  .prehead-segno { width: 20px; height: 20px; font-size: .75rem; }
  .aggancio { font-size: 1.08rem; }
  .anchese { padding: 7px 10px; font-size: .84rem !important; margin-top: .6rem; }
  .sub-box { padding: 10px 12px; box-shadow: 4px 4px 0 var(--inchiostro); font-size: .86rem; line-height: 1.45; }
  .sub-forte { font-size: 1.02rem; }
  .banner-fila { gap: 6px; margin-top: .75rem; }
  .banner { font-size: .68rem; padding: 6px 9px 6px 6px; gap: 6px; }
  .banner > span:first-child { width: 18px; height: 18px; font-size: .7rem; }
  .apertura .velo-sinistra { background: linear-gradient(180deg, rgba(247,244,238,.98) 0%, rgba(247,244,238,.95) 70%, rgba(247,244,238,.7) 100%); }
}
@media (min-width: 900px) {
  .apertura-griglia { padding-top: 2.5dvh; }
  .apertura .promessa { font-size: clamp(1.55rem, 3vw, 2.85rem); }
  .apertura .aggancio { margin-top: .8rem; }
  .apertura .sub-box { margin-top: .8rem; }
  .apertura .banner-fila { margin-top: .8rem; }
  .apertura .cta-gruppo { margin-top: 1.1rem; }
}

/* v4 · testo dell'apertura un po' più grande e più arioso (richiesta del copywriter) */
@media (min-width: 900px) {
  .apertura-griglia { grid-template-columns: minmax(0, 1.32fr) minmax(0, .88fr); }
  .apertura .aggancio { margin-top: 1.1rem; font-size: clamp(1.3rem, 2.1vw, 1.95rem); line-height: 1.3; }
  .apertura .promessa { margin-top: .6rem; font-size: clamp(1.7rem, 3.3vw, 3.25rem); line-height: 1.13; }
  .apertura .anchese { margin-top: 1.2rem; font-size: clamp(1rem, 1.3vw, 1.2rem) !important; line-height: 1.5; padding: 12px 16px; }
  .apertura .sub-box { margin-top: 1.2rem; font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.6; padding: 16px 20px; }
  .apertura .sub-forte { font-size: clamp(1.2rem, 1.7vw, 1.55rem); margin-bottom: 6px; }
  .apertura .banner-fila { margin-top: 1.2rem; gap: 10px; }
  .apertura .banner { font-size: 1rem; padding: 9px 16px 9px 9px; }
  .apertura .cta-gruppo { margin-top: 1.4rem; }
}
@media (max-width: 899px) {
  .apertura .prehead { font-size: .8rem; }
  .apertura .aggancio { margin-top: .9rem; font-size: 1.14rem; line-height: 1.3; }
  .apertura .promessa { margin-top: .4rem; font-size: 1.62rem; line-height: 1.15; }
  .apertura .anchese { margin-top: .8rem; font-size: .9rem !important; line-height: 1.45; }
  .apertura .sub-box { margin-top: .8rem; font-size: .9rem; line-height: 1.5; }
  .apertura .sub-forte { font-size: 1.08rem; }
  .apertura .banner-fila { margin-top: .8rem; }
  .apertura .banner { font-size: .7rem; }
  .apertura .cta-gruppo { margin-top: 1rem; }
}
@media (min-width: 900px) {
  .apertura-griglia { padding-top: 0; min-height: 0; }
  .apertura-testo { padding-top: 14px; }
  .apertura .sub-box, .apertura .banner-fila { margin-top: 1rem; }
  .apertura .cta-gruppo { margin-top: 1.1rem; }
}
@media (max-width: 899px) {
  .apertura-griglia { padding-top: 10px; }
  .apertura .banner-fila { margin-top: .65rem; }
  .apertura .cta-gruppo { margin-top: .8rem; }
}
@media (min-width: 900px) {
  .apertura-testo { padding-top: 6px; }
  .apertura .aggancio { margin-top: .75rem; }
  .apertura .promessa { margin-top: .4rem; line-height: 1.1; }
  .apertura .anchese { margin-top: 1rem; }
  .apertura .sub-box, .apertura .banner-fila { margin-top: .9rem; }
  .apertura .sub-box { padding: 14px 20px; }
  .apertura .cta-gruppo { margin-top: 1rem; }
}

/* ══════════ v5 · apertura divisa: testo a sinistra su fondo pulito, palco colorato a destra ══════════ */
.apertura { background: var(--crema); }
.apertura-testo { max-width: 660px; }
/* ogni livello è un blocco a sé, staccato dal successivo */
.apertura .prehead { margin-bottom: 1.6rem; }
.apertura .headline { display: block; }
.apertura .aggancio { margin: 0; padding-bottom: .9rem; border-bottom: 2px dashed rgba(29,43,47,.18); font: 600 clamp(1.2rem, 1.8vw, 1.6rem)/1.35 var(--titoli); color: #34464A; }
.apertura .aggancio b { color: var(--inchiostro); font-weight: 800; }
.apertura .promessa { margin-top: 1rem; font: 800 clamp(1.8rem, 3.2vw, 3.1rem)/1.12 var(--titoli); letter-spacing: -.025em; color: var(--inchiostro); }
.apertura .promessa .blocco-corallo { display: table; margin-bottom: .3em; padding: .02em .3em; transform: rotate(-1.5deg); }
.apertura .promessa mark.evid { background-image: linear-gradient(transparent 52%, var(--giallo) 52%, var(--giallo) 94%, transparent 94%); }
.apertura .anchese { margin-top: 1.3rem; padding: 12px 16px; background: #fff; border: 0; border-left: 5px solid var(--corallo); border-radius: 0 12px 12px 0; box-shadow: 0 10px 24px -20px rgba(0,0,0,.6); font: 500 clamp(1rem, 1.2vw, 1.12rem)/1.5 var(--testo) !important; color: #3B4A4E !important; }
.apertura .anchese b { color: var(--inchiostro); font-weight: 700; }
.apertura .sub-box { margin-top: 1.3rem; padding: 16px 20px; background: #fff; border: 2px solid var(--inchiostro); border-radius: 14px; box-shadow: 6px 6px 0 var(--inchiostro); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.6; color: #3B4A4E; }
.apertura .sub-forte { margin-bottom: 6px; font: 800 clamp(1.2rem, 1.6vw, 1.45rem)/1.3 var(--titoli); color: var(--inchiostro); }
.apertura .sub-box b { color: var(--inchiostro); }
.apertura .banner-fila { margin-top: 1.3rem; gap: 8px; }
.apertura .banner { transform: none; font-size: .9rem; padding: 8px 14px 8px 8px; }
.apertura .cta-gruppo { margin-top: 1.4rem; }
.macchia { display: none; }
/* il palco a destra: pannello arrotondato con la foto e il colore, gli oggetti sopra */
.palco-hero { position: absolute; inset: 4% 0 0 6%; border-radius: 32px; overflow: hidden; background: linear-gradient(150deg, #FBD9CD 0%, #FFE9A6 55%, #D5E7D8 100%); box-shadow: inset 0 0 0 1px rgba(29,43,47,.06); }
.palco-foto::before { opacity: .45; }
.palco-hero .etichetta { left: auto; right: 14px; bottom: 14px; }
.hero-oggetti > :not(.palco-hero) { z-index: 2; }
@media (min-width: 900px) {
  .apertura-griglia { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); gap: 4vw; align-items: start; padding: 3dvh 4vw 0 6vw; }
  .apertura-testo { padding-top: 0; }
  .hero-oggetti { height: min(78dvh, 640px); }
}
@media (max-width: 899px) {
  .apertura .prehead { margin-bottom: 1rem; }
  .apertura .aggancio { font-size: 1.1rem; padding-bottom: .7rem; }
  .apertura .promessa { margin-top: .7rem; font-size: 1.6rem; line-height: 1.14; }
  .apertura .anchese { margin-top: .9rem; font-size: .9rem !important; padding: 9px 12px; }
  .apertura .sub-box { margin-top: .9rem; padding: 11px 13px; box-shadow: 4px 4px 0 var(--inchiostro); font-size: .88rem; line-height: 1.5; }
  .apertura .sub-forte { font-size: 1.05rem; }
  .apertura .banner-fila { margin-top: .9rem; }
  .apertura .banner { font-size: .68rem; padding: 6px 9px 6px 6px; }
  .apertura .cta-gruppo { margin-top: .9rem; }
  .palco-hero { inset: 0; border-radius: 24px; }
}
@media (min-width: 900px) {
  .apertura-griglia { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); gap: 3.5vw; }
  .apertura-testo { max-width: 720px; }
  .apertura .prehead { margin-bottom: 1.15rem; }
  .apertura .promessa { font-size: clamp(1.8rem, 3vw, 2.9rem); }
  .apertura .anchese, .apertura .sub-box { margin-top: 1.1rem; }
  .apertura .cta-gruppo { margin-top: 1.2rem; }
}
.apertura .banner-fila { margin-top: 1rem; }

/* ══════════ v6 · tutta la pagina più esplosiva: capitoli, nastri, forme, parole che entrano, lampi, coriandoli ══════════
   regola: il testo resta pulito a blocchi, il colore e il movimento stanno intorno */

body { counter-reset: capitolo; }
/* barra di avanzamento */
.progresso { position: fixed; left: 0; right: 0; top: 0; height: 5px; z-index: 60; pointer-events: none; }
.progresso i { display: block; height: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--corallo), var(--giallo) 50%, var(--salvia)); }

/* capitoli numerati */
.occhiello { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; background: var(--inchiostro); color: #fff; font: 700 .78rem/1.2 var(--testo); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 20px -14px rgba(0,0,0,.6); }
.occhiello::before { counter-increment: capitolo; content: counter(capitolo, decimal-leading-zero); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--giallo); color: var(--inchiostro); font: 800 .78rem var(--titoli); letter-spacing: 0; }
.tinta-notte .occhiello, .tinta-scura .occhiello { background: var(--giallo); color: var(--inchiostro); }
.tinta-notte .occhiello::before, .tinta-scura .occhiello::before { background: var(--corallo); color: #fff; }
.occhiello + .titolo, .occhiello + .gigante { margin-top: 1rem; }

/* tinte più colorate */
.tinta-sole { background: #FFF5D1; }
.tinta-cielo { background: #E5EEF7; }
.tinta-offerta { background: linear-gradient(165deg, #FFE9A6 0%, #FBD9CD 55%, #F7F4EE 100%); }

/* nastri: varianti, storti, al contrario */
.nastro-salvia { background: var(--salvia-scura); color: #fff; }
.nastro-scuro { background: var(--inchiostro); color: var(--giallo); }
.nastro-storto, .nastro-storto-dx { margin: -14px -2%; width: 104%; padding: 14px 0; font-size: 1.1rem; z-index: 5; box-shadow: 0 14px 30px -18px rgba(0,0,0,.5); }
.nastro-storto { transform: rotate(-1.4deg); }
.nastro-storto-dx { transform: rotate(1.4deg); }
.nastro-inverso .nastro-scorre { animation-direction: reverse; }

/* forme che galleggiano ai margini (le mette lo script, dietro al testo) */
.forme { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.forme i { position: absolute; display: block; animation-name: galleggia; animation-duration: 9s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.forme i:nth-child(1) { width: 150px; height: 150px; right: -50px; top: 7%; border-radius: 50%; border: 16px solid var(--corallo); opacity: .22; }
.forme i:nth-child(2) { width: 170px; height: 34px; left: 3%; top: 4%; opacity: .5; animation-duration: 7s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 34'%3E%3Cpath d='M4 17 Q 25 2 46 17 T 88 17 T 130 17 T 166 17' fill='none' stroke='%23FFE15A' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.forme i:nth-child(3) { width: 90px; height: 90px; left: -30px; bottom: 8%; border-radius: 22px; background: var(--salvia); opacity: .18; transform: rotate(18deg); animation-duration: 11s; }
.forme i:nth-child(4) { width: 70px; height: 70px; right: 8%; bottom: 5%; opacity: .35; animation-duration: 8s;
  background: radial-gradient(circle, var(--corallo) 3px, transparent 3.5px) 0 0 / 14px 14px; }
.scena:nth-of-type(even) .forme i:nth-child(1) { right: auto; left: -60px; top: 50%; border-color: var(--giallo); opacity: .35; }
.scena:nth-of-type(even) .forme i:nth-child(2) { left: auto; right: 22%; top: auto; bottom: 4%; }
@keyframes galleggia { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -22px; rotate: 8deg; } }
.apertura .forme, .congedo .forme { display: none; }

/* titoli che entrano parola per parola */
.parola { display: inline-block; }
.parole-pronte .parola { opacity: 0; transform: translateY(.55em) rotate(4deg); transition-property: opacity, transform; transition-duration: .55s; transition-timing-function: cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 38ms); }
.parole-pronte.visto .parola { opacity: 1; transform: none; }

/* bottoni col lampo */
.bottone { position: relative; overflow: hidden; }
.bottone::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-150%) skewX(-20deg); animation-name: lampo; animation-duration: 3.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; pointer-events: none; }
@keyframes lampo { 0% { transform: translateX(-150%) skewX(-20deg); } 55%, 100% { transform: translateX(330%) skewX(-20deg); } }

/* contatori colorati */
.badge { transition-property: transform; transition-duration: .2s; }
.badge:nth-child(1) { background: var(--corallo); transform: rotate(-2deg); } .badge:nth-child(1) b, .badge:nth-child(1) span { color: #fff; }
.badge:nth-child(2) { background: var(--giallo); transform: rotate(1.5deg); }
.badge:nth-child(3) { background: var(--salvia-scura); transform: rotate(-1deg); } .badge:nth-child(3) b, .badge:nth-child(3) span { color: #fff; }
.badge:nth-child(4) { background: var(--inchiostro); transform: rotate(2deg); } .badge:nth-child(4) b { color: var(--giallo); } .badge:nth-child(4) span { color: #fff; }
.badge:hover { transform: scale(1.08) rotate(0); }

/* cifre dei calcolatori che battono quando cambiano */
.batte-cifra { animation-name: batte-cifra; animation-duration: .35s; }
@keyframes batte-cifra { 40% { transform: scale(1.14); } }
.calc-risultato .cifra { display: inline-block; }

/* pilastri colorati */
.colonna-pilastro:nth-child(1) i { background: repeating-linear-gradient(90deg, var(--corallo) 0 9px, #F59A86 9px 12px); }
.colonna-pilastro:nth-child(2) i { background: repeating-linear-gradient(90deg, var(--giallo) 0 9px, #FFEE9E 9px 12px); }
.colonna-pilastro:nth-child(3) i { background: repeating-linear-gradient(90deg, var(--salvia) 0 9px, #8DB398 9px 12px); }
.colonna-pilastro:nth-child(4) i { background: repeating-linear-gradient(90deg, #6D9CC8 0 9px, #A5C3DE 9px 12px); }
.colonna-pilastro:nth-child(5) i { background: repeating-linear-gradient(90deg, #C27BA0 0 9px, #DDAEC6 9px 12px); }
.colonna-pilastro:nth-child(6) i { background: repeating-linear-gradient(90deg, var(--inchiostro) 0 9px, #4A5A5E 9px 12px); }

/* card che si sollevano */
.card { transition-property: transform, box-shadow; transition-duration: .25s; }
.card:hover, .rivela-pronta .card.a-cascata.visto:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 30px 50px -28px rgba(0,0,0,.6); }

/* offerta */
.scheda-offerta { position: relative; overflow: visible; border: 3px solid var(--inchiostro); box-shadow: 8px 8px 0 var(--inchiostro); }
.nastrino-offerta { position: absolute; top: -16px; right: 18px; padding: 7px 14px; border-radius: 8px; background: var(--corallo); color: #fff; font: 800 .8rem/1 var(--titoli); letter-spacing: .08em; text-transform: uppercase; transform: rotate(3deg); box-shadow: 0 10px 18px -10px rgba(238,106,79,.9); }
.prezzo-nuovo { display: inline-block; animation-name: batti; animation-duration: 2.2s; animation-iteration-count: infinite; }

/* domande numerate */
.fisarmonica { counter-reset: domanda; }
.fisarmonica summary { display: flex; align-items: center; gap: 12px; }
.fisarmonica summary::before { counter-increment: domanda; content: counter(domanda); display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--corallo); color: #fff; font: 800 .85rem var(--titoli); }
.fisarmonica details:nth-child(even) summary::before { background: var(--salvia-scura); }
.fisarmonica details[open] { box-shadow: 0 0 0 3px var(--giallo), 0 16px 30px -22px rgba(29,43,47,.5); }

/* coriandoli del congedo */
.coriandolo { position: absolute; top: -24px; z-index: 1; width: 10px; height: 16px; border-radius: 2px; pointer-events: none; animation-name: cade; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes cade { from { transform: translateY(0) rotate(0deg); opacity: 1; } to { transform: translateY(105dvh) rotate(760deg); opacity: .9; } }

@media (max-width: 899px) {
  .nastro-storto, .nastro-storto-dx { font-size: .9rem; padding: 11px 0; }
  .forme i:nth-child(1) { width: 100px; height: 100px; border-width: 11px; }
  .forme i:nth-child(2) { width: 110px; }
  .progresso { height: 4px; }
}

/* ══════════ v7 · niente muri di testo: card della promessa, tessere, chip, citazioni, passi, giro, confronto ══════════ */
.ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-tondo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; font: 800 1rem var(--titoli); }
.ico-tondo .ico { width: 24px; height: 24px; }
.t-corallo { background: var(--corallo); color: #fff; }
.t-giallo { background: var(--giallo); color: var(--inchiostro); }
.t-salvia { background: var(--salvia-scura); color: #fff; }
.t-grigio { background: #DCE2DF; color: var(--grigio); }

/* HERO · card della promessa */
.promessa-card { display: grid; grid-template-columns: 116px 1fr; max-width: 600px; margin-top: 1.1rem; overflow: hidden; border: 2px solid var(--inchiostro); border-radius: 18px; background: #fff; box-shadow: 6px 6px 0 var(--inchiostro); }
.pc-numero { position: relative; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; padding: 12px 6px; color: #fff; text-align: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px), var(--corallo); }
.pc-segno { font: 800 2.2rem/1 var(--titoli); margin-top: .35rem; }
.pc-numero b { font: 800 3.8rem/1 var(--titoli); letter-spacing: -.04em; }
.pc-kg { width: 100%; font: 800 1rem/1 var(--titoli); letter-spacing: .2em; }
.pc-numero em { width: 100%; margin-top: 6px; font: 700 .7rem/1.2 var(--testo); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--giallo); }
.pc-corpo { display: grid; gap: 9px; padding: 14px 18px; }
.pc-titolo { font: 800 clamp(1.15rem, 1.5vw, 1.35rem)/1.2 var(--titoli); color: var(--inchiostro); }
.pc-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pc-etichetta { font: 700 .72rem/1 var(--testo); letter-spacing: .1em; text-transform: uppercase; color: var(--grigio); }
.pc-cibi, .pc-pilastri { display: flex; flex-wrap: wrap; gap: 6px; }
.cibo { --r: 0deg; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 7px; border-radius: 999px; font: 800 .95rem/1 var(--titoli); color: var(--inchiostro); }
.cibo .ico { color: var(--corallo-scuro); width: 20px; height: 20px; }
.cibo::after { content: "✓"; color: var(--salvia-scura); font-weight: 800; }
.cibo-pasta { background: #FFE9A6; } .cibo-pizza { background: var(--cipria); } .cibo-pane { background: #F1DEC3; }
.rivela-pronta .rivela.visto .cibo { animation-name: pop; animation-duration: .6s; animation-timing-function: cubic-bezier(.3,1.7,.5,1); animation-fill-mode: both; }
.rivela.visto .cibo:nth-child(1) { animation-delay: .5s; } .rivela.visto .cibo:nth-child(2) { animation-delay: .65s; } .rivela.visto .cibo:nth-child(3) { animation-delay: .8s; }
.pc-pilastri li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 8px; background: var(--salvia-chiara); color: var(--salvia-scura); font: 700 .86rem/1 var(--titoli); }
.pc-pilastri .ico { width: 18px; height: 18px; }
.pc-chiusa { display: flex; align-items: center; gap: 8px; font: 600 .95rem/1.3 var(--testo); color: var(--salvia-scura); }
.pc-chiusa .ico { width: 22px; height: 22px; color: var(--salvia); }
.pc-chiusa b { color: var(--inchiostro); }

/* HERO · prova vicino al bottone */
.prova-lampo { display: flex; align-items: center; gap: 10px; margin-top: .9rem; }
.facce { display: flex; }
.facce i { width: 30px; height: 30px; margin-left: -9px; border: 2px solid #fff; border-radius: 50%; }
.facce i:first-child { margin-left: 0; }
.facce i:nth-child(1) { background: linear-gradient(150deg, #E7B79F, #B97F66); } .facce i:nth-child(2) { background: linear-gradient(150deg, #D9B38C, #8E6A4C); }
.facce i:nth-child(3) { background: linear-gradient(150deg, #F0CDB8, #C99A83); } .facce i:nth-child(4) { background: linear-gradient(150deg, #C8A27F, #7C5B42); }
.prova-testo { font: 500 .92rem/1.3 var(--testo); color: #3B4A4E; }
.prova-testo b { color: var(--inchiostro); }
.prova-testo .stelle { margin-right: 4px; }

/* S02 · tessere */
.vantaggi { display: grid; gap: 10px; margin-top: 1.3rem; max-width: 560px; }
.vantaggio { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: 0 14px 28px -22px rgba(29,43,47,.6); border-left: 5px solid var(--corallo); }
.vantaggio:nth-child(2) { border-left-color: var(--giallo); } .vantaggio:nth-child(3) { border-left-color: var(--salvia-scura); }
.vantaggio b { display: block; font: 800 1.05rem/1.25 var(--titoli); color: var(--inchiostro); }
.vantaggio div > span { font-size: .96rem; line-height: 1.45; color: #3B4A4E; }

/* S03 · chip di quello che sgranocchi, citazione, perché */
.sgranocchi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .9rem; }
.sgranocchi li { padding: 8px 15px; border: 2px dashed var(--corallo); border-radius: 999px; background: #fff; font: 700 .98rem/1.1 var(--titoli); transform: rotate(-1.5deg); }
.sgranocchi li:nth-child(2) { transform: rotate(1.2deg); } .sgranocchi li:nth-child(3) { transform: rotate(-.6deg); }
.sgranocchi li::before { content: "+ "; color: var(--corallo); font-weight: 800; }
.citazione { position: relative; max-width: 30ch; margin-top: 1.4rem; padding-left: 58px; font: 800 clamp(1.3rem, 2.2vw, 1.9rem)/1.22 var(--titoli); color: var(--inchiostro); }
.citazione::before { content: "“"; position: absolute; left: 0; top: -.35em; font: 800 5rem/1 var(--titoli); color: var(--corallo); }
.citazione strong { color: var(--corallo-scuro); }
.callout { display: flex; align-items: center; gap: 14px; max-width: 640px; margin-top: 1.3rem; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -22px rgba(29,43,47,.6); font-size: 1.02rem; line-height: 1.5; }
.callout-avviso { border: 2px solid var(--corallo); }
.callout-scuro { display: block; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.9); box-shadow: none; }

/* S04 · passi numerati */
.passi { counter-reset: passo; display: grid; gap: 8px; max-width: 640px; margin-top: 1.2rem; }
.passi li { counter-increment: passo; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.92); font: 600 1rem/1.35 var(--testo); box-shadow: 0 10px 22px -20px rgba(0,0,0,.6); }
.passi li::before { content: counter(passo); display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--corallo); color: #fff; font: 800 .9rem var(--titoli); }
.conto .lead { max-width: 36ch; }

/* S05 · il giro delle diete */
.ciclo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: .4rem 0 0; }
.ciclo li { padding: 14px 13px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.18); color: #fff; font: 600 .95rem/1.35 var(--testo);
  transition-property: opacity, transform; transition-duration: .45s; }
.ciclo li b { color: var(--giallo); }
.ciclo-n { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%; background: var(--giallo); color: var(--inchiostro); font: 800 .9rem var(--titoli); }
.ciclo li.ciclo-fine { background: var(--corallo); border-color: var(--corallo); }
.ciclo li.ciclo-fine b { color: #fff; }
.ciclo-fine .ciclo-n { background: #fff; color: var(--corallo); }
.ciclo-pronto li:not(.acceso) { opacity: .2; transform: translateY(10px); }
.nemico .callout-scuro { margin-top: 1rem; }

/* S07 · confronto */
.confronto { display: grid; gap: 10px; max-width: 680px; margin-top: 1.3rem; }
.confronto p { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; font-size: 1.02rem; line-height: 1.45; }
.confronto-no { background: rgba(255,255,255,.65); color: var(--grigio); }
.confronto-si { background: #fff; border: 2px solid var(--salvia-scura); box-shadow: 5px 5px 0 var(--salvia-scura); color: var(--inchiostro); }

/* S08 · i due momenti */
.momenti { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 1rem; }
.momenti-etichetta { width: 100%; font: 600 .98rem var(--testo); }
.momento { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 14px; background: #fff; box-shadow: 0 12px 24px -20px rgba(0,0,0,.6); font: 600 .98rem var(--testo); }
.momento .ico-tondo { width: 36px; height: 36px; border-radius: 10px; }
.momento .ico-tondo .ico { width: 20px; height: 20px; }
.momento b { font: 800 1.1rem var(--titoli); color: var(--corallo-scuro); margin-right: 3px; }

/* S09 · post-it e legenda */
.postit-frase { --r: -2deg; max-width: 430px; margin-top: 1.3rem; padding: 16px 20px; background: var(--giallo); font: 700 1.6rem/1.15 var(--mano); color: var(--inchiostro); box-shadow: 0 18px 30px -18px rgba(0,0,0,.5); }
.cal-legenda span { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; padding: 4px 10px 4px 4px; }
.cal-legenda b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--inchiostro); color: #fff; font: 800 .7rem var(--titoli); }

@media (max-width: 899px) {
  .promessa-card { grid-template-columns: 84px 1fr; box-shadow: 4px 4px 0 var(--inchiostro); margin-top: .8rem; }
  .pc-segno { font-size: 1.5rem; } .pc-numero b { font-size: 2.7rem; } .pc-kg { font-size: .8rem; } .pc-numero em { font-size: .58rem; }
  .pc-corpo { padding: 10px 12px; gap: 6px; }
  .pc-titolo { font-size: 1rem; }
  .pc-etichetta { font-size: .6rem; }
  .cibo { font-size: .8rem; padding: 4px 9px 4px 5px; gap: 4px; } .cibo .ico { width: 16px; height: 16px; }
  .pc-pilastri li { font-size: .74rem; padding: 3px 7px 3px 5px; } .pc-pilastri .ico { width: 14px; height: 14px; }
  .pc-chiusa { font-size: .8rem; }
  .prova-lampo { justify-content: center; margin-top: .6rem; }
  .facce i { width: 24px; height: 24px; }
  .prova-testo { font-size: .8rem; }
  .citazione { padding-left: 44px; font-size: 1.3rem; } .citazione::before { font-size: 4rem; }
  .callout { font-size: .95rem; padding: 12px 14px; }
  .postit-frase { font-size: 1.4rem; }
}
@media (max-width: 899px) {
  .promessa-card { grid-template-columns: 74px 1fr; }
  .pc-titolo { display: none; }
  .pc-numero { padding: 8px 4px; }
  .pc-segno { font-size: 1.3rem; } .pc-numero b { font-size: 2.3rem; } .pc-numero em { font-size: .54rem; margin-top: 3px; }
  .pc-corpo { padding: 9px 10px; gap: 7px; }
  .pc-riga { gap: 5px; flex-wrap: nowrap; }
  .pc-riga + .pc-riga { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pc-etichetta { font-size: .56rem; letter-spacing: .06em; }
  .pc-cibi, .pc-pilastri { gap: 4px; flex-wrap: nowrap; }
  .cibo { font-size: .72rem; padding: 3px 7px 3px 4px; gap: 3px; } .cibo .ico { width: 14px; height: 14px; }
  .pc-pilastri li { font-size: .7rem; padding: 3px 6px 3px 4px; gap: 3px; } .pc-pilastri .ico { width: 13px; height: 13px; }
  .pc-chiusa { font-size: .74rem; gap: 5px; } .pc-chiusa .ico { width: 16px; height: 16px; }
}
@media (max-width: 899px) {
  .apertura-griglia { grid-template-columns: minmax(0, 1fr); }
  .apertura-testo { min-width: 0; }
  .promessa-card { grid-template-columns: 74px minmax(0, 1fr); }
  .pc-riga, .pc-cibi, .pc-pilastri { flex-wrap: wrap; }
}

/* v8 · h1 dell'apertura protagonista: lunedì ↔ ultimo, 30 giorni e 6 Pilastri in evidenza, righe pensate */
.apertura .aggancio { font: 700 clamp(1.3rem, 2.15vw, 1.95rem)/1.35 var(--titoli); color: var(--inchiostro); padding-bottom: 1rem; }
.lunedi-cerchio { position: relative; display: inline-block; color: var(--corallo); font-weight: 800; }
.lunedi-cerchio svg { position: absolute; left: -9%; top: -20%; width: 118%; height: 140%; overflow: visible; pointer-events: none; }
.lunedi-cerchio path { fill: none; stroke: var(--corallo); stroke-width: 2.8; stroke-linecap: round; }
.apertura .promessa { margin-top: 1.1rem; font-size: clamp(1.85rem, 3.25vw, 3.15rem); line-height: 1.14; }
.apertura .promessa .blocco-corallo { font-size: 1.08em; margin-bottom: .35em; box-shadow: 5px 5px 0 var(--inchiostro); }
.riga-h { display: block; margin-top: .12em; }
.pill-30 { background: var(--inchiostro); color: var(--giallo); padding: 0 .22em; border-radius: 8px; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.blocco-salvia { background: var(--salvia-scura); color: #fff; padding: 0 .22em; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 899px) {
  .apertura .aggancio { font-size: 1.14rem; padding-bottom: .75rem; }
  .apertura .promessa { font-size: 1.55rem; margin-top: .8rem; line-height: 1.16; }
  .apertura .promessa .blocco-corallo { box-shadow: 3px 3px 0 var(--inchiostro); }
}
.lunedi-cerchio { margin: 0 .3em 0 .28em; }

/* v9 · card della promessa più grande e leggibile */
.promessa-card { max-width: 640px; grid-template-columns: 128px minmax(0, 1fr); }
.pc-numero b { font-size: 4.2rem; }
.pc-segno { font-size: 2.4rem; }
.pc-kg { font-size: 1.1rem; }
.pc-numero em { font-size: .8rem; }
.pc-corpo { gap: 11px; padding: 16px 20px; }
.pc-titolo { font-size: clamp(1.25rem, 1.65vw, 1.5rem); }
.pc-etichetta { font-size: .8rem; color: var(--inchiostro); }
.cibo { font-size: 1.05rem; padding: 6px 13px 6px 8px; } .cibo .ico { width: 22px; height: 22px; }
.pc-pilastri li { font-size: .98rem; padding: 5px 12px 5px 8px; } .pc-pilastri .ico { width: 20px; height: 20px; }
.pc-chiusa { font-size: 1.05rem; } .pc-chiusa .ico { width: 24px; height: 24px; }
@media (max-width: 899px) {
  /* sul telefono la card si impila: il −5 kg in una fascia in alto, sotto le righe a tutta larghezza */
  .promessa-card { grid-template-columns: minmax(0, 1fr); }
  .pc-titolo { display: none; }
  .pc-numero { flex-wrap: nowrap; align-items: baseline; justify-content: flex-start; gap: 4px; padding: 8px 14px; }
  .pc-segno { font-size: 1.8rem; margin: 0; } .pc-numero b { font-size: 2.6rem; }
  .pc-kg { width: auto; font-size: 1.15rem; letter-spacing: .08em; margin-right: 10px; }
  .pc-numero em { width: auto; margin: 0; font-size: .95rem; color: #fff; font-weight: 800; }
  .pc-corpo { padding: 11px 14px 12px; gap: 9px; }
  .pc-riga, .pc-riga + .pc-riga { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .pc-etichetta { width: 100%; font-size: .72rem; letter-spacing: .08em; }
  .pc-cibi, .pc-pilastri { flex-wrap: wrap; gap: 6px; }
  .cibo { font-size: 1rem; padding: 5px 11px 5px 7px; gap: 5px; } .cibo .ico { width: 19px; height: 19px; }
  .pc-pilastri li { font-size: .95rem; padding: 5px 10px 5px 7px; gap: 5px; } .pc-pilastri .ico { width: 17px; height: 17px; }
  .pc-chiusa { font-size: .98rem; gap: 7px; } .pc-chiusa .ico { width: 20px; height: 20px; }
}

/* v10 · tasto fisso che segue la pagina, su telefono e computer */
.barra-acquisto { animation-name: sale; animation-duration: .45s; animation-timing-function: cubic-bezier(.2,.8,.2,1); border: 2px solid rgba(255,255,255,.08); }
@keyframes sale { from { transform: translateY(130%); opacity: 0; } to { transform: none; opacity: 1; } }
.barra-acquisto-prezzo { display: flex; flex-direction: column; line-height: 1.1; }
.barra-acquisto-prezzo em { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font: 700 .68rem/1 var(--testo); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #FFB4A3; }
.barra-acquisto-prezzo .pallino { width: 7px; height: 7px; }
.bottone-fisso { font-size: .95rem; padding: .8rem 1.1rem; box-shadow: 0 0 0 0 rgba(238,106,79,.6); animation-name: richiamo; animation-duration: 2s; animation-iteration-count: infinite; }
@keyframes richiamo { 0% { box-shadow: 0 0 0 0 rgba(238,106,79,.65); } 70% { box-shadow: 0 0 0 12px rgba(238,106,79,0); } 100% { box-shadow: 0 0 0 0 rgba(238,106,79,0); } }
@media (min-width: 900px) {
  .barra-acquisto { display: flex !important; left: 50%; right: auto; translate: -50% 0; width: min(640px, 92vw); bottom: 22px; padding: 10px 10px 10px 22px; border-radius: 999px; }
  .barra-acquisto[hidden] { display: none !important; }
  .barra-acquisto-prezzo { flex-direction: row; align-items: baseline; gap: 10px; }
  .barra-acquisto-prezzo b { font-size: 1.5rem; }
  .bottone-fisso { font-size: 1.08rem; padding: .95rem 1.6rem; }
}
@media (max-width: 420px) {
  .barra-acquisto { padding: 8px 8px 8px 12px; gap: 8px; }
  .barra-acquisto-prezzo s { display: none; }
  .barra-acquisto-prezzo b { font-size: 1.2rem; }
  .bottone-fisso { font-size: .84rem; padding: .75rem .8rem; }
}
@media (max-width: 420px) {
  .barra-acquisto-prezzo em { display: none; }
  .bottone-fisso { white-space: nowrap; font-size: .86rem; padding: .8rem .95rem; }
}
/* v11 · il bottone dell'apertura sta fra l'«anche se» e la card, nella prima schermata */
.apertura .cta-alta { margin-top: 1.2rem; }
.apertura .cta-alta + .promessa-card { margin-top: 1.3rem; }
@media (max-width: 899px) { .apertura .cta-alta { margin-top: .9rem; } .apertura .cta-alta + .promessa-card { margin-top: 1rem; } }

/* v12 · chiusura dell'apertura in ordine: stessa larghezza della card, griglie a colonne uguali */
.apertura .banner-fila, .apertura .prova-lampo, .apertura .fiducia { max-width: 640px; }
.apertura .banner-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 1.2rem; }
.apertura .banner { flex-direction: column; justify-content: center; gap: 7px; padding: 12px 8px; border-radius: 14px; text-align: center; transform: none; font-size: .82rem; line-height: 1.15; }
.apertura .banner > span:first-child { width: 28px; height: 28px; border-radius: 8px; font-size: .9rem; }
.apertura .prova-lampo { justify-content: flex-start; gap: 12px; margin-top: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 10px 22px -20px rgba(0,0,0,.6); }
.apertura .prova-testo { display: flex; flex-direction: column; gap: 2px; }
.apertura .prova-testo .stelle { margin: 0; font-size: 1rem; line-height: 1; }
.apertura .fiducia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.apertura .fiducia li { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.6); border: 1px solid rgba(29,43,47,.08); font: 600 .84rem/1.25 var(--testo); color: var(--inchiostro); }
.apertura .fiducia li::before { content: "✓"; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--salvia-scura); color: #fff; font: 800 .7rem var(--titoli); }
@media (max-width: 899px) {
  .apertura .banner-fila { gap: 6px; margin-top: 1rem; }
  .apertura .banner { padding: 10px 5px; font-size: .66rem; gap: 6px; }
  .apertura .banner > span:first-child { width: 24px; height: 24px; }
  .apertura .prova-lampo { justify-content: center; }
  .apertura .prova-testo { font-size: .86rem; }
  .apertura .fiducia { gap: 6px; }
  .apertura .fiducia li { flex-direction: column; justify-content: center; text-align: center; gap: 5px; padding: 9px 5px; font-size: .7rem; }
}

/* ═══ grafiche del cliente (05/10): logo, mockup della guida, bundle, copertine dei bonus ═══ */
.logo-testata { display: block; width: auto; height: 40px; margin: 0 0 1.1rem; }
.mockup-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(29,43,47,.32)); }
.hero-libro { left: -5%; bottom: 10%; width: 72%; max-width: 440px; height: auto; perspective: none; }
.bundle-zona { min-height: 540px; }
.bundle { left: -6%; right: auto; bottom: 30px; width: 112%; height: auto; perspective: none; }
.bonus-img { display: block; width: 112%; max-width: none; height: auto; margin: -4px -6% 10px; filter: drop-shadow(0 14px 16px rgba(0,0,0,.28)); }
.offerta-mockup { display: block; width: min(100%, 520px); height: auto; margin: -8px auto 18px; filter: drop-shadow(0 18px 22px rgba(29,43,47,.28)); }
.piede-logo { display: block; width: 46px; height: auto; margin-bottom: 18px; }
@media (max-width: 899px) {
  .logo-testata { height: 28px; margin-bottom: .8rem; }
  .hero-libro { left: -3%; width: 74%; bottom: 3%; }
  .bundle-zona { display: grid; min-height: 0; padding-top: 0; }
  .bundle-zona .polaroid { position: relative; justify-self: end; right: 4px; }
  .bundle { position: relative; left: 0; bottom: auto; width: 100%; margin-top: -70px; }
  .nota-bundle { position: relative; }
}

/* ═══ foto vere (05/10): sfondi che respirano, foto accanto, profili ═══ */
.con-foto::before { display: none; }
.fondo-foto.con-foto picture, .foto-segnaposto.con-foto picture { position: absolute; inset: 0; }
.fondo-foto.con-foto img, .foto-segnaposto.con-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.respira.con-foto img { animation-name: respira; animation-duration: 26s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.fondo-foto.con-foto { inset: -2%; }
.palco-foto.con-foto img { object-position: 38% 50%; }
.fondo-foto.con-foto[data-slot="cassetto-sfondo"] img { object-position: 70% 50%; }
.foto-segnaposto.con-foto { background: #ddd; }
.foto-bassa.con-foto img { object-position: 50% 30%; }
.avatar img, .facce i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facce i { overflow: hidden; }
@media (max-width: 899px) {
  .velo-sinistra.velo-crema { background: linear-gradient(180deg, rgba(247,244,238,.97) 0%, rgba(247,244,238,.9) 45%, rgba(247,244,238,.45) 80%, rgba(247,244,238,.2) 100%); }
  .apertura .velo-sinistra { background: linear-gradient(180deg, rgba(247,244,238,.98) 0%, rgba(247,244,238,.95) 70%, rgba(247,244,238,.7) 100%); }
  .palco-foto.con-foto img { object-position: 30% 50%; }
}
@media (prefers-reduced-motion: reduce) { .respira.con-foto img { animation: none; } }

/* ═══ offerta al telefono (05/10): il riquadro sta tutto nello schermo, centrato con la sua ombra ═══ */
@media (max-width: 899px) {
  .offerta-griglia > * { min-width: 0; }
  .scheda-offerta { width: calc(100% - 6px); box-shadow: 6px 6px 0 var(--inchiostro); padding: 22px 18px; }
  .garanzia { width: calc(100% - 6px); }
  .copie-caselle { gap: 5px; }
  .copie-caselle li { flex: 1 1 0; width: auto; max-width: 26px; height: auto; aspect-ratio: 1; }
  .prezzo { gap: 12px; }
  .bottone-pieno { padding-left: 14px; padding-right: 14px; white-space: normal; }
}