/* ══════════ stile.css — L'Ingannevole Paura di Essere Felici · preset dr-sweat ══════════
   La struttura di Sweat portata nella sera calda in cui suona l'allarme.
   crema #FBF4EA · sabbia #F3E3CC · blu notte #1B2140 · corallo #FF6B4A · miele #F2B33D · rosso allarme #E5383B · inchiostro #2A2522 */
:root {
  --crema: #FBF4EA; --sabbia: #F3E3CC; --notte: #1B2140; --corallo: #FF6B4A; --miele: #F2B33D; --allarme: #E5383B; --inchiostro: #2A2522;
  --fondo: var(--crema); --testo: var(--inchiostro); --tenue: #6b5f57; --accento: var(--corallo); --ris: #C2552F;
  --evid: rgba(242, 179, 61, .55); --mano-colore: var(--corallo);
  --font-titolo: "Fraunces", Georgia, serif; --font-corpo: "Figtree", system-ui, sans-serif;
  --corpo: 18.5px; --bottone-fondo: var(--corallo); --bottone-testo: #fff;
  --mano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 2, 80 9, 120 5 S 180 3, 198 6' fill='none' stroke='%23FF6B4A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
body { background: var(--crema); }
main > section { padding: 72px 22px; position: relative; }
main > section > * { max-width: 34rem; margin-left: auto; margin-right: auto; }
h2 { font: 700 clamp(1.9rem, 8.4vw, 2.8rem)/1.08 var(--font-titolo); letter-spacing: -.02em; color: var(--notte); margin-bottom: .55em; }
h3 { font: 800 1.12rem/1.25 var(--font-corpo); color: var(--notte); }
p + p { margin-top: .9em; }
.sub { font-size: 1.12rem; color: #4a3f39; margin-bottom: 1.6em; }
.occhiello { font: 700 .95rem/1 var(--font-corpo); color: var(--corallo); text-transform: uppercase; letter-spacing: .12em; text-align: center; margin-bottom: .8em; }
.gigante { color: var(--notte); font-weight: 700; }
.nota { color: var(--corallo); }
.bottone { width: 100%; max-width: 34rem; padding: 0 1em; font-size: 1rem; box-shadow: 0 10px 24px -10px rgba(255,107,74,.75); margin-top: 1.4em; }
.pannello { background: rgba(251,244,234,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 26px; }

/* striscia in cima, come in Sweat */
.striscia { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: var(--notte); color: var(--crema); font-size: .95rem; line-height: 1.3; text-align: center; padding: 10px 14px; }
.striscia b { color: var(--miele); }
.striscia a { color: #fff; font-weight: 700; }

/* ══ 1 · apertura ══ */
#apertura { padding: 0; }
#apertura > * { max-width: none; }
.hero { position: relative; overflow: hidden; padding: 0 22px 34px; text-align: center;
  background: radial-gradient(120% 70% at 50% 108%, #E89A4E 0%, #F4C38A 32%, rgba(251,244,234,0) 68%), linear-gradient(#FBF4EA 0%, #F8E7D0 55%, #EFC897 100%); }
.luce { position: absolute; inset: 0; pointer-events: none; }
.luce i { position: absolute; border-radius: 50%; filter: blur(28px); opacity: .55; background: #FFD79A; animation: respiro 7s ease-in-out infinite; }
.luce i:nth-child(1) { width: 220px; height: 220px; left: -60px; top: 380px; }
.luce i:nth-child(2) { width: 160px; height: 160px; right: -40px; top: 300px; animation-delay: -2s; background: #FFB98A; }
.luce i:nth-child(3) { width: 120px; height: 120px; left: 40%; top: 620px; animation-delay: -4s; }
@keyframes respiro { 50% { transform: scale(1.18); opacity: .8; } }
.hero-testo { position: relative; max-width: 30rem; margin: 0 auto; padding-top: 74px; }
main > section:not(#apertura) { scroll-margin-top: 60px; }
.pre { font: 700 17px/1.35 var(--font-corpo); color: var(--notte); background: rgba(255,255,255,.65); display: inline-block; padding: .4em 1em; border-radius: 999px; margin: 0 0 14px; }
.messaggio { position: relative; text-align: left; background: #fff; border-radius: 26px 26px 26px 8px; padding: 18px 20px 28px; box-shadow: 0 18px 40px -22px rgba(27,33,64,.55); }
.messaggio::after { content: ""; position: absolute; left: -7px; bottom: 0; width: 18px; height: 18px; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
h1 { color: var(--notte); font-family: var(--font-titolo); line-height: 1; }
h1 > span { display: block; }
.h-a { font: 800 .9rem/1.2 var(--font-corpo); letter-spacing: .18em; text-transform: uppercase; color: var(--corallo); }
.h-b { font: 700 1.6rem/1.05 "Caveat", cursive; color: #8a7b70; margin: .15em 0 .35em; }
.h-c { font-weight: 700; font-size: clamp(2rem, 8.6vw, 2.8rem); line-height: 1.06; letter-spacing: -.02em; }
.h-c .mano { --mano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 2, 80 9, 120 5 S 180 3, 198 6' fill='none' stroke='%23E5383B' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.h-felice { color: var(--corallo); }
.m-ora { position: absolute; right: 16px; bottom: 9px; font: 600 .8rem/1 var(--font-corpo); color: #8fa7d8; }
.sub-hero { margin: 20px 2px 0; color: var(--notte); font-family: var(--font-titolo); }
.sub-hero > span { display: block; }
.sh-1 { font-size: 21px; line-height: 1.25; font-weight: 500; }
.riga-vocina { font: 700 21px/1.2 var(--font-corpo); color: #5a5170; }
.vocina { display: inline-flex; align-items: center; gap: 8px; margin: 10px auto; padding: 8px 18px 8px 12px; border-radius: 20px 20px 20px 6px; background: #E9E3EE; font: 700 21px/1.2 var(--font-corpo); color: #5a5170; }
.v-ico { width: 20px; height: 20px; fill: #5a5170; stroke: #5a5170; stroke-width: 2; stroke-linecap: round; }
.vocina .barrato::after { background: var(--allarme); height: .12em; transform: rotate(-4deg) scaleX(0); transition-delay: 1.1s; }
.vocina .barrato.in-vista::after { transform: rotate(-4deg) scaleX(1); }
.sh-2 { font-size: 25px; line-height: 1.18; font-weight: 700; letter-spacing: -.01em; }
.sh-2 .ris { color: var(--corallo); }
.rischio { font-size: 16.5px; }
.hero .rischio { color: #5b4c43; }

/* il telefono che sale dal fondo */
.telefono-palco { position: relative; height: 470px; margin: 26px -22px 0; }
.hero-foto { position: absolute; inset: 0; animation: respiro-foto 14s ease-in-out infinite alternate; -webkit-mask-image: linear-gradient(transparent 0, #000 16%, #000 80%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 16%, #000 80%, transparent 100%); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; display: block; }
@keyframes respiro-foto { to { transform: scale(1.05); } }
.telefono { position: absolute; right: 0; top: 70px; width: 200px; height: 400px; transform: rotate(-4deg); border-radius: 40px; background: #121522; padding: 10px; box-shadow: 0 30px 60px -20px rgba(27,33,64,.55), inset 0 0 0 2px #3a3f55; }
.schermo { position: relative; height: 100%; border-radius: 31px; overflow: hidden; background: linear-gradient(160deg, #2b3157, #1B2140 60%); }
.ora { color: #fff; font: 500 3rem/1 var(--font-corpo); text-align: center; padding-top: 34px; letter-spacing: -.02em; }
.copertina-mini { position: absolute; left: 14px; right: 14px; top: 96px; height: 240px; border-radius: 10px; padding: 16px 12px; text-align: left; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(170deg, #FBF4EA, #F3D7AE); box-shadow: 0 12px 24px rgba(0,0,0,.35); opacity: 0; transform: scale(.94); transition: opacity .7s, transform .7s; }
.cm-titolo { font: 700 1.04rem/1.08 var(--font-titolo); color: var(--notte); }
.cm-usp { font: 500 .78rem/1.3 var(--font-corpo); color: #6b5f57; border-top: 2px solid var(--corallo); padding-top: 8px; }
.notifica { position: absolute; left: 12px; right: 12px; top: 112px; border-radius: 18px; padding: 12px 14px; text-align: left; background: rgba(255,255,255,.93); box-shadow: 0 10px 26px rgba(0,0,0,.3); transition: transform .7s cubic-bezier(.6,0,.3,1), opacity .7s; }
.n-app { display: block; font: 600 .74rem/1.2 var(--font-corpo); color: #777; }
.n-app b { color: var(--allarme); letter-spacing: .06em; }
.n-testo { display: block; font: 700 .98rem/1.25 var(--font-corpo); color: #1a1a1a; margin-top: 3px; }
.telefono.via .notifica { transform: translateX(120%); opacity: 0; }
.telefono.via .copertina-mini { opacity: 1; transform: none; }
.telefono:not(.via) .notifica { animation: vibra .5s ease-in-out 3 .9s; }
@keyframes vibra { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* le due corone */
.corone { position: relative; display: flex; justify-content: center; gap: 14px; margin-top: 10px; }
.corona { position: relative; flex: 1; max-width: 170px; padding: 14px 18px; text-align: center; color: var(--notte); background: rgba(251,244,234,.92); border-radius: 22px; }
.corona::before, .corona::after { content: "❦"; position: absolute; top: 50%; font-size: 1.6rem; color: var(--miele); transform: translateY(-50%) rotate(90deg); }
.corona::before { left: -2px; } .corona::after { right: -2px; transform: translateY(-50%) rotate(-90deg) scaleX(-1); }
.corona b { display: block; font: 700 1.5rem/1.1 var(--font-titolo); }
.corona span { display: block; font-size: 16.5px; line-height: 1.25; color: #5b4c43; margin-top: 3px; }

/* ══ 2 · problema ══ */
#problema { background: #fff; }
#problema h2 { font-size: clamp(2rem, 9vw, 3rem); }
.attacco { font-size: 1.15rem; }
.scene { list-style: none; padding: 0; margin: 1.8em auto 0; display: grid; gap: 22px; }
.scene li { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: start; }
.scene svg { width: 50px; height: 50px; fill: none; stroke: var(--notte); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene svg.da-disegnare * { stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 1.4s ease; }
.scene svg.disegnato * { stroke-dashoffset: 0; }
.scene h3 { margin-bottom: .15em; }
.scene p { color: #4a3f39; }
.colpo { margin-top: 1.8em; font-size: 1.2rem; }
.due-telefoni { position: relative; height: 420px; margin-top: 54px; }
.tel { position: absolute; width: 190px; height: 380px; border-radius: 34px; background: #121522; padding: 8px; box-shadow: 0 26px 50px -18px rgba(27,33,64,.5); }
.tel-a { left: 4%; top: 0; transform: rotate(-5deg); }
.tel-b { right: 4%; top: 46px; transform: rotate(4deg); }
.pagina { height: 100%; border-radius: 27px; background: var(--crema); padding: 30px 16px; display: flex; flex-direction: column; gap: 9px; }
.pg-cap { font: 800 .72rem/1 var(--font-corpo); color: var(--corallo); letter-spacing: .14em; text-transform: uppercase; }
.pg-tit { font: 700 1.25rem/1.08 var(--font-titolo); color: var(--notte); margin-bottom: 6px; }
.riga { height: 7px; border-radius: 4px; background: #e6d8c4; }
.riga.corta { width: 62%; }
.pg-evid { font: 600 .82rem/1.3 var(--font-corpo); color: var(--notte); background: linear-gradient(transparent 55%, var(--evid) 55%); }
.pg-due { display: grid; gap: 10px; margin: 8px 0; }
.pp { border-radius: 14px; padding: 12px; font: 700 1rem/1.1 var(--font-titolo); }
.pp small { display: block; font: 500 .75rem/1.3 var(--font-corpo); margin-top: 4px; }
.p1 { background: #fbe1dc; color: var(--allarme); text-decoration: line-through; text-decoration-thickness: 2px; }
.p1 small { text-decoration: none; }
.p2 { background: #e5ecd6; color: #3d5a1f; }

/* ══ 3 · big idea ══ */
#bigidea { background: var(--sabbia); }
#bigidea .gigante { font-size: clamp(2.2rem, 10vw, 4rem); margin-bottom: .5em; }
.curva { margin: 0 auto 1.6em; position: relative; }
.curva svg { width: 100%; height: auto; }
.curva .assi { fill: none; stroke: #b9a58c; stroke-width: 2; }
.curva .linea { fill: none; stroke: var(--allarme); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 0; }
.curva svg.da-disegnare .linea { stroke-dashoffset: 420; transition: stroke-dashoffset 2s ease .2s; }
.curva svg.disegnato .linea { stroke-dashoffset: 0; }
.curva .punto { fill: var(--allarme); animation: pulsa 1.4s ease-in-out infinite; transform-origin: 300px 18px; }
@keyframes pulsa { 50% { transform: scale(1.6); opacity: .5; } }
.curva text { font: 600 13px var(--font-corpo); fill: var(--notte); }
.curva figcaption { text-align: right; margin-top: 4px; }

/* ══ 4 · nemico + calcolatore ══ */
#nemico { background: var(--notte); color: #efe6da; }
#nemico h2 { color: #fff; }
#nemico mark { color: #fff; --evid: rgba(229,56,59,.6); }
.calcolatore { margin: 2em auto; padding: 24px 20px; border-radius: 26px; background: #262d52; }
.calcolatore label { display: block; font: 700 1.2rem/1.3 var(--font-titolo); color: #fff; margin-bottom: 18px; }
.cursore { display: flex; align-items: center; gap: 16px; }
.cursore input { flex: 1; accent-color: var(--corallo); height: 34px; }
.cursore output { font: 700 2rem/1 var(--font-titolo); color: var(--miele); min-width: 1.2em; text-align: right; }
.settimana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 16px 0; }
.settimana i { height: 26px; border-radius: 8px; background: #3a4270; transition: background .3s; }
.settimana i.on { background: var(--allarme); }
.esito { font-size: 1.15rem; color: #fff; }
.esito b { font: 700 3.4rem/1 var(--font-titolo); color: var(--corallo); display: block; }
.esito-2 { color: #cfc4b6; font-size: 17px; }
#nemico .ris { color: var(--miele); }

/* ══ 5 · meccanismo · lo smartwatch ══ */
#meccanismo { padding: 0 22px; height: 300vh; background: #fff; }
.mecc-palco { position: sticky; top: 40px; min-height: calc(100vh - 40px); padding: 40px 0 30px; display: flex; flex-direction: column; }
.mecc-testa .sub { font-size: 17px; margin-bottom: 1em; }
.orologio { width: 168px; margin: 0 auto 18px; }
.cinturino { height: 46px; margin: 0 26px; background: repeating-linear-gradient(90deg, #d8b98d 0 3px, #c9a675 3px 6px); }
.cinturino.su { border-radius: 14px 14px 0 0; } .cinturino.giu { border-radius: 0 0 14px 14px; }
.cassa { border-radius: 40px; background: #d9b98c; padding: 8px; box-shadow: 0 18px 36px -14px rgba(27,33,64,.5); }
.quadrante { position: relative; height: 176px; border-radius: 33px; background: #0d0f1a; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px; transition: background .4s; overflow: hidden; }
.q-ora { font: 600 2.4rem/1 var(--font-corpo); letter-spacing: -.02em; }
.q-riga { font-size: .95rem; color: #b8b2c8; margin-top: 6px; }
.q-allarme, .q-resto, .q-fine { display: none; }
.quadrante[data-stato="allarme"] { background: var(--allarme); animation: vibra .35s linear infinite; }
.quadrante[data-stato="allarme"] .q-riga { display: none; }
.quadrante[data-stato="allarme"] .q-allarme { display: block; font: 700 1.05rem/1.2 var(--font-corpo); margin-top: 6px; }
.quadrante[data-stato="allarme"] .q-resto { display: block; margin-top: 10px; background: #fff; color: var(--allarme); font: 800 .95rem/1 var(--font-corpo); padding: 9px 20px; border-radius: 999px; }
.quadrante[data-stato="resto"] { background: #22305e; }
.quadrante[data-stato="fine"] { background: linear-gradient(160deg, #E8582F, #F2B33D); }
.quadrante[data-stato="fine"] .q-riga { display: none; }
.quadrante[data-stato="fine"] .q-fine { display: block; font: 700 1.05rem/1.2 var(--font-titolo); margin-top: 8px; }
.q-fine i { display: block; font-style: normal; font-size: 1.6rem; color: #fff; }
.passi { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 12px; counter-reset: p; }
.passi li { position: relative; padding: 12px 14px 12px 52px; border-radius: 18px; background: var(--crema); opacity: .45; transition: opacity .4s, background .4s; counter-increment: p; }
.passi li::before { content: counter(p); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--notte); color: #fff; font: 700 .9rem/26px var(--font-corpo); text-align: center; }
.passi li.acceso { opacity: 1; background: #fde9dc; }
.passi p { font-size: 17px; color: #4a3f39; margin-top: 2px; }
.lucchetto { text-align: center; margin-top: 14px; }

/* ══ 6 · prodotto · carosello ══ */
#prodotto { background: var(--crema); text-align: center; padding-left: 0; padding-right: 0; }
#prodotto > h2, #prodotto > .sub, #prodotto > .occhiello { padding: 0 22px; }
.carosello { max-width: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 22px 10px; scrollbar-width: none; }
.carosello::-webkit-scrollbar { display: none; }
.cap { flex: 0 0 78%; max-width: 300px; height: 420px; border-radius: 28px; position: relative; overflow: hidden; scroll-snap-align: center; text-align: left; color: #fff; }
.cap::before { content: ""; position: absolute; inset: 0; background: center / cover no-repeat var(--foto); }
.cap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(27,33,64,.25), transparent 30%); }
.tag { z-index: 1; }
.c0 { --foto: url("../img/cap-c0.jpg"); background: radial-gradient(90% 60% at 70% 20%, #F7C98C, #C9673C); }
.c1 { --foto: url("../img/cap-c1.jpg"); background: radial-gradient(90% 60% at 30% 25%, #6c76b8, #1B2140); }
.c2 { --foto: url("../img/cap-c2.jpg"); background: radial-gradient(90% 60% at 60% 25%, #F29C7E, #8f2f2a); }
.c3 { --foto: url("../img/cap-c3.jpg"); background: radial-gradient(90% 60% at 50% 20%, #F9D88E, #E0763D 70%, #6b3a5c); }
.c4 { --foto: url("../img/cap-c4.jpg"); background: radial-gradient(90% 60% at 40% 25%, #f5b2a6, #b0466a); }
.c5 { --foto: url("../img/cap-c5.jpg"); background: radial-gradient(90% 60% at 60% 25%, #b9d3a2, #2f5d55); }
.tag { position: absolute; left: 16px; top: 16px; background: var(--corallo); color: #fff; font: 800 .82rem/1 var(--font-corpo); letter-spacing: .08em; padding: 8px 12px; border-radius: 10px; }
.cap-basso { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 16px; border-radius: 20px; background: rgba(27,33,64,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cap-basso h3 { color: #fff; font: 700 1.4rem/1.1 var(--font-titolo); }
.cap-basso p { color: #f1e6d8; font-size: 17px; margin-top: 6px; }
.frecce { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.frecce button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #d9cbb8; background: #fff; font-size: 1.2rem; color: var(--notte); cursor: pointer; }

/* ══ 7 · benefici ══ */
#benefici { background: #fff; }
.bullet { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 16px; }
.bullet li { padding: 20px; border-radius: 24px; background: var(--crema); border: 1px solid #efe0cb; }
.bullet li:nth-child(2) { background: #fdf0e3; } .bullet li:nth-child(3) { background: #fbe9e3; }
.emo { font-size: 1.8rem; display: block; margin-bottom: 6px; }
.bullet h3 { font: 700 1.3rem/1.15 var(--font-titolo); margin-bottom: .35em; }

/* ══ 8 · testimonianze ══ */
#testimonianze { background: #F6EEE3; padding-left: 0; padding-right: 0; text-align: center; }
#testimonianze h2 { padding: 0 22px; }
.voci { max-width: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 22px 14px; scrollbar-width: none; text-align: left; }
.voci::-webkit-scrollbar { display: none; }
.voci blockquote { flex: 0 0 84%; max-width: 330px; scroll-snap-align: center; background: #fff; border-radius: 26px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 24px -16px rgba(27,33,64,.35); }
.stelle { color: var(--miele); letter-spacing: .12em; font-size: 1.2rem; }
.voci p { font-size: 17px; line-height: 1.5; }
.voci footer { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 1rem; color: #5b4c43; }
.voci footer b { color: var(--notte); }
.chi { display: block; }
.faccia { object-fit: cover; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: grid; place-items: center; font: 700 1.2rem/1 var(--font-titolo); color: #fff; }
.f1 { background: #C9673C; } .f2 { background: #6c76b8; } .f3 { background: #8f2f2a; } .f4 { background: #b0466a; }
.f5 { background: #2f5d55; } .f6 { background: #E0763D; } .f7 { background: #1B2140; } .f8 { background: #b88a2c; }

/* ══ 9 · sogno ══ */
#sogno { min-height: 100vh; padding: 0; display: flex; align-items: flex-end; overflow: hidden; }
#sogno > * { max-width: none; }
.tramonto { position: absolute; inset: 0; background: linear-gradient(#3b3a6e 0%, #b8577a 30%, #F29C5E 52%, #F7C98C 60%, #3f5d8a 61%, #1d2f55 100%); }
.tramonto .sole { position: absolute; left: 50%; top: 46%; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; background: radial-gradient(#FFF1C8, #F7B64E 60%, rgba(247,182,78,0) 72%); }
.tramonto .mare { position: absolute; left: 0; right: 0; top: 61%; bottom: 0; background: repeating-linear-gradient(180deg, rgba(255,214,150,.18) 0 2px, transparent 2px 14px); }
.sogno-testo { position: relative; margin: 0 14px 22px; padding: 26px 22px; max-width: 34rem; }
@media (min-width: 600px) { .sogno-testo { margin: 0 auto 40px; } }
#sogno .gigante { font-size: clamp(2.2rem, 10vw, 3.8rem); margin-bottom: .4em; }

/* ══ 10 · bonus ══ */
#bonus { background: var(--sabbia); }
.bonus { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; background: #fff; border-radius: 24px; padding: 16px; margin-bottom: 14px; }
.volume { height: 150px; border-radius: 6px 12px 12px 6px; padding: 12px 10px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; box-shadow: inset 6px 0 0 rgba(0,0,0,.18), 0 10px 18px -8px rgba(0,0,0,.4); }
.b1 .volume { background: linear-gradient(160deg, #6c76b8, #1B2140); }
.b2 .volume { background: linear-gradient(160deg, #F29C7E, #8f2f2a); }
.b3 .volume { background: linear-gradient(160deg, #b9d3a2, #2f5d55); }
.v-n { font: 800 .7rem/1 var(--font-corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--miele); }
.v-t { font: 700 .92rem/1.08 var(--font-titolo); overflow-wrap: anywhere; hyphens: auto; }
.bonus h3 { font: 700 1.2rem/1.15 var(--font-titolo); }
.bonus p { font-size: 17px; color: #4a3f39; margin-top: 4px; }
.prezzo-b { margin-top: 8px !important; }
.prezzo-b s { color: #9a8b7e; } .prezzo-b b { color: #fff; background: var(--corallo); padding: 3px 10px; border-radius: 8px; font-size: .95rem; letter-spacing: .06em; margin-left: 6px; }

/* ══ 11 · prezzo ══ */
#offerta { background: #fff; text-align: center; }
.scheda-prezzo { border-radius: 30px; padding: 26px 20px; background: var(--crema); border: 2px solid var(--corallo); }
.copertina-grande { width: 170px; height: 230px; margin: 0 auto 20px; border-radius: 6px 14px 14px 6px; padding: 18px 14px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(170deg, #FBF4EA, #F3D7AE); box-shadow: inset 7px 0 0 rgba(0,0,0,.08), 0 22px 30px -16px rgba(27,33,64,.6); transform: rotate(-3deg); }
.cg-t { font: 700 1.4rem/1.02 var(--font-titolo); color: var(--notte); }
.cg-u { font: 500 .78rem/1.3 var(--font-corpo); color: #6b5f57; border-top: 2px solid var(--corallo); padding-top: 8px; }
.ricevi { list-style: none; padding: 0; margin: 0 0 10px; text-align: left; }
.ricevi li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed #d9cbb8; }
.ricevi s { color: #9a8b7e; }
.oggi { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 10px; color: var(--notte); font-weight: 700; }
.oggi .gigante { font-size: clamp(3.6rem, 18vw, 5rem); color: var(--corallo); }
.copie { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 14px 0 10px; }
.copie i { height: 30px; border-radius: 4px; background: #d9cbb8; }
.copie i.libera { background: var(--corallo); animation: pulsa 1.4s ease-in-out infinite; }
.scarsita { font-size: 17px; }
.confronto { margin-top: 1.4em; color: #5b4c43; }

/* ══ 12 · garanzia ══ */
#garanzia { background: #EEF2F6; text-align: center; }
.sigillo { position: relative; width: 140px; height: 140px; margin: 0 auto 18px; color: var(--notte); }
.sigillo svg { position: absolute; inset: 0; fill: none; stroke: var(--miele); stroke-width: 3; stroke-dasharray: 6 5; animation: gira 30s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.sigillo b { position: absolute; left: 0; right: 0; top: 34px; font: 700 3rem/1 var(--font-titolo); }
.sigillo span { position: absolute; left: 0; right: 0; top: 88px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; }

/* ══ 13 · domande ══ */
#domande { background: #fff; }
#domande h2 { text-align: center; }
#domande details.altra { display: none; }
#domande.tutte details.altra { display: block; }
#domande.tutte .mostra { display: none; }
.mostra { display: block; margin: 18px auto 0; background: none; border: 0; font-weight: 700; color: var(--notte); text-decoration: underline; font-size: 1.05rem; padding: 12px; cursor: pointer; }

/* ══ 14 · congedo ══ */
#congedo { background: #F6EEE3; padding-bottom: 110px; }
.congedo-box { text-align: center; padding: 40px 6px; }
.congedo-box .gigante { font-size: clamp(2.2rem, 10vw, 3.8rem); margin-bottom: .45em; }
.piede { margin-top: 40px; font-size: 16.5px; color: #6b5f57; text-align: center; }
.piede p + p { margin-top: .7em; }

/* barra d'acquisto */
[data-barra-acquisto] { background: var(--notte); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.barra-prezzo s { color: #aaa; } .barra-prezzo b { font: 700 1.3rem/1 var(--font-titolo); color: var(--miele); }
[data-barra-acquisto] .bottone { width: auto; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  #meccanismo { height: auto; } .mecc-palco { position: relative; } .passi li { opacity: 1; }
}

@media (min-width: 900px) {
  .telefono-palco { height: 600px; }
  .hero-foto img { object-position: 50% 40%; }
  .telefono { right: calc(50% - 380px); top: 90px; }
}