/* ══════════ stile.css — Mai Più Capelli nella Doccia · preset dr-masolo ══════════
   La struttura del preset (hero scuro, riquadri 2×2, striscia piena, cornici spesse, blocco a colore
   pieno, barra fissa) col mondo del bagno di notte: ardesia, luce fredda, lime, corallo, piastrella. */
:root {
  --fondo: #0F1518; --sup: #182125; --sup2: #1f2a2f; --linea: rgba(241,244,242,.10);
  --testo: #F1F4F2; --tenue: #A9B4B6; --accento: #FF6A3D; --ris: #C8F03C;
  --lime: #C8F03C; --corallo: #FF6A3D; --piastrella: #EAF0EE; --fuga: #D3DDDA;
  --evid: rgba(200, 240, 60, .38); --mano-colore: #C8F03C;
  --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='%23FF6A3D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --corpo: 18.5px; --riga: 1.55;
  --font-titolo: "Archivo", system-ui, sans-serif; --font-corpo: "Figtree", system-ui, sans-serif; --font-mano: "Caveat", cursive;
  --gutter: 20px; --misura: 36rem;
  --bottone-fondo: var(--lime); --bottone-testo: #0F1518; --raggio: 14px;
}
html { background: var(--fondo); }
body { background: var(--fondo); }
main > section { position: relative; padding: 72px var(--gutter); background-color: var(--fondo); }
main > section > *, .cornice-tratteggio > * { max-width: var(--misura); margin-left: auto; margin-right: auto; }

h2 { font: 800 clamp(1.85rem, 7.6vw, 3rem)/1.06 var(--font-titolo); font-stretch: 92%; letter-spacing: -.02em; margin-bottom: .5em; }
h3 { font: 800 1.3rem/1.2 var(--font-titolo); letter-spacing: -.01em; }
.acc { color: var(--lime); }
.acc-c { color: var(--corallo); }
.sub { font-size: 1.22rem; line-height: 1.45; color: var(--testo); margin-bottom: 1.2em; }
.testo { color: #d5dcdc; margin-bottom: 1em; }
.testo strong, .sub strong { color: #fff; }
.pre-h2 { color: var(--tenue); font-size: 1.05rem; margin-bottom: .35em; }
.pill { display: inline-block; border: 1.5px solid rgba(241,244,242,.55); border-radius: 10px; padding: .35em .9em; font-size: 1.05rem; margin-bottom: 1em; }
section > .pill { display: table; margin-left: 0; }
.nota-riga { margin: .4em 0 1.4em; }
.nota { color: var(--lime); }
mark { color: #fff; }
.prezzo { white-space: nowrap; }
.gigante { font-weight: 900; font-stretch: 78%; margin-bottom: .45em; }

/* bottoni */
.bottone { background: linear-gradient(180deg, #d6ff4a, var(--lime)); box-shadow: 0 10px 30px -10px rgba(200,240,60,.55), inset 0 -3px 0 rgba(0,0,0,.12); text-transform: uppercase; letter-spacing: .02em; font-weight: 800; font-size: 1rem; }
.bottone.grande { width: 100%; min-height: 62px; font-size: 1.08rem; }
.bottone.scuro { background: #0F1518; color: var(--lime); box-shadow: none; }
.rischio { text-align: center; color: var(--tenue); font-size: 1.05rem; }
.rischio s { opacity: .7; }
.rischio b { color: var(--lime); }

/* ═════ apertura ═════ */
#apertura { padding: 26px 0 0; overflow: hidden; background: radial-gradient(120% 60% at 50% 0%, #17242a 0%, var(--fondo) 60%); }
.ap-testo { padding: 0 var(--gutter); position: relative; z-index: 2; max-width: 40rem; margin: 0 auto; }
.ingresso { font-style: italic; color: #cdd6d6; font-size: 1.06rem; line-height: 1.4; margin-bottom: .5em; max-width: 30rem; }
.titolo-ap { font-family: var(--font-titolo); text-transform: uppercase; line-height: .94; letter-spacing: -.02em; margin-bottom: 14px; }
.titolo-ap span { display: block; }
.titolo-ap .l1 { color: var(--lime); font-size: clamp(1.9rem, 9vw, 3.4rem); font-weight: 800; font-stretch: 125%; letter-spacing: .01em; }
.titolo-ap .l2 { color: #fff; font-size: clamp(3.1rem, 15.4vw, 6.4rem); font-weight: 900; font-stretch: 68%; line-height: .88; margin: .02em 0 .06em; }
.titolo-ap .l3 { color: var(--corallo); font-size: clamp(1.6rem, 7.4vw, 2.9rem); font-weight: 800; font-stretch: 84%; line-height: 1; }
.titolo-ap .l4 { display: inline-block; margin-top: .3em; font-size: clamp(1.15rem, 5.3vw, 2rem); font-weight: 800; font-stretch: 110%; color: #0F1518; background: var(--lime); padding: .12em .35em .1em; transform: rotate(-1.2deg); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.timbro { display: inline-flex; flex-wrap: wrap; gap: 0 .28em; align-items: baseline; font: 800 1.12rem/1.25 var(--font-titolo); font-stretch: 86%; text-transform: uppercase; letter-spacing: .01em; color: #fff; border: 2px solid var(--corallo); border-radius: 8px; padding: .5em .75em; transform: rotate(-1.5deg); margin: 4px 0 18px; background: rgba(255,106,61,.08); }
.barrata-mano { position: relative; color: var(--corallo); }
.barrata-mano svg { position: absolute; left: -6%; top: 0; width: 112%; height: 100%; overflow: visible; }
.barrata-mano path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.barrata-mano svg.da-disegnare path { stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(.5,.1,.3,1) .9s; }
.barrata-mano svg.da-disegnare path + path { transition-delay: 1.25s; }
.barrata-mano svg.da-disegnare.disegnato path { stroke-dashoffset: 0; }
.ap-testo .rischio { margin-top: 10px; }

.ap-nuca { position: relative; height: 330px; margin-top: -6px; }
.ap-nuca .luce { position: absolute; left: 50%; top: -40px; width: 420px; height: 380px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 30%, rgba(214,236,244,.20), rgba(214,236,244,0) 70%); pointer-events: none; }
.ap-nuca canvas { position: absolute; left: 50%; top: 0; width: 330px; height: 330px; transform: translateX(-50%); }
.cartellino-nuca { position: absolute; right: 16px; top: 22px; font-size: 1.3rem; max-width: 9em; text-align: right; transform: rotate(-4deg); }
.ap-nuca::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(to bottom, rgba(15,21,24,0), var(--fondo)); }
.ap-sotto { padding: 0 var(--gutter) 34px; max-width: 40rem; margin: 0 auto; position: relative; z-index: 2; }
.sub-ap { font-size: 1.16rem; line-height: 1.5; color: #dfe5e5; background: rgba(24,33,37,.88); border: 1px solid var(--linea); border-left: 4px solid var(--lime); border-radius: 12px; padding: 16px 18px; margin: -40px 0 18px; backdrop-filter: blur(8px); }
.sub-ap strong { color: #fff; }
.riquadri { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.riquadro { background: linear-gradient(180deg, #1c272c, #151d21); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 1rem; line-height: 1.3; color: #e8eeee; }
.riquadro .cifra { font: 900 2.3rem/1 var(--font-titolo); font-stretch: 80%; color: var(--lime); white-space: nowrap; }
.freccia-cta { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.freccia { width: 74px; flex: none; }
.freccia path, .cappellino path, .mobiletto .cerchi path { fill: none; stroke: var(--corallo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.da-disegnare .freccia path, .freccia.da-disegnare path { stroke-dashoffset: 1; transition: stroke-dashoffset .7s ease-out; }
.freccia.da-disegnare.disegnato path { stroke-dashoffset: 0; }
.freccia-cta .bottone { flex: 1; }
.striscia { background: var(--lime); color: #0F1518; overflow: hidden; padding: 14px 0; transform: rotate(-1.4deg) scale(1.03); margin: 10px 0 18px; }
.striscia-nastro { display: flex; width: max-content; gap: 18px; align-items: center; font: 800 1.05rem/1 var(--font-titolo); font-stretch: 90%; text-transform: uppercase; white-space: nowrap; animation: nastro 26s linear infinite; }
.striscia-nastro i { font-style: normal; }
@keyframes nastro { to { transform: translateX(-50%); } }

/* ═════ cornici tratteggiate (box del preset) ═════ */
.cornice-tratteggio { border: 1.5px dashed rgba(241,244,242,.35); border-radius: 18px; padding: 26px 18px 30px; max-width: 40rem; margin: 0 auto; background: linear-gradient(180deg, #151e22, #11181b); }

/* prodotto: libro e carosello */
.libro-palco { perspective: 1100px; display: grid; place-items: center; margin: 10px auto 22px; height: 300px; }
.libro { position: relative; width: 196px; height: 270px; transform-style: preserve-3d; transform: rotateY(-24deg) rotateX(6deg); animation: libro 7s ease-in-out infinite; }
@keyframes libro { 50% { transform: rotateY(-12deg) rotateX(3deg) translateY(-6px); } }
.libro-fronte { position: absolute; inset: 0; border-radius: 4px 10px 10px 4px; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(160deg, #1d2b31 0%, #0d1417 70%); border: 1px solid #2c3c43; box-shadow: 20px 30px 60px -20px rgba(0,0,0,.8); overflow: hidden; }
.libro-sopra { font: 700 .72rem/1 var(--font-corpo); letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
.libro-titolo { font: 900 2.15rem/.9 var(--font-titolo); font-stretch: 70%; text-transform: uppercase; color: #fff; }
.libro-titolo em { font-style: normal; color: var(--lime); }
.libro-usp { margin-top: auto; font-size: .8rem; line-height: 1.3; color: #c3cdcd; border-top: 2px solid var(--corallo); padding-top: 8px; }
.libro-gocce { position: absolute; right: -20px; top: 80px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(200,240,60,.35), rgba(200,240,60,0) 60%); }
.libro-dorso { position: absolute; left: 0; top: 0; width: 26px; height: 100%; background: linear-gradient(90deg, #0a1012, #1a262b); transform: rotateY(90deg) translateZ(13px) translateX(-13px); transform-origin: left; }
.carosello { margin-top: 10px; }
.carosello-binario { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: none; }
.carosello-binario::-webkit-scrollbar { display: none; }
.pagina { flex: 0 0 82%; scroll-snap-align: start; background: var(--piastrella); color: #0F1518; border-radius: 12px; padding: 18px 18px 20px; min-height: 196px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 0 0 4px var(--lime) inset; }
.pagina .pag-n { font: 900 2.2rem/1 var(--font-titolo); font-stretch: 75%; color: var(--corallo); }
.pagina h3 { font-size: 1.25rem; }
.pagina p { font-size: 1.05rem; line-height: 1.45; color: #26343a; }
.carosello-comandi { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.freccina { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(241,244,242,.4); background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.puntini { display: flex; gap: 6px; }
.puntini i { width: 8px; height: 8px; border-radius: 50%; background: rgba(241,244,242,.3); transition: background .3s, width .3s; }
.puntini i.su { background: var(--lime); width: 22px; border-radius: 6px; }

/* ═════ problema: il telefono ═════ */
.telefono-cornice { border: 5px solid var(--lime); border-radius: 22px; padding: 18px 16px; background: radial-gradient(90% 70% at 50% 0%, #22343c, #10181b); margin-bottom: 26px; }
.telefono { background: #0b1013; border-radius: 26px; border: 1px solid #2d3a40; padding: 12px 14px 18px; max-width: 330px; margin: 0 auto; box-shadow: 0 30px 50px -24px rgba(0,0,0,.9); }
.tel-barra { display: flex; justify-content: space-between; font: 600 .82rem/1 var(--font-corpo); color: #c9d1d1; padding: 2px 6px 12px; }
.tel-cerca { display: flex; gap: 8px; align-items: center; background: #1e282d; border-radius: 22px; padding: 10px 14px; min-height: 46px; font-size: 1rem; color: #fff; }
.lente { color: var(--tenue); font-size: 1.2rem; }
.tel-campo::after { content: "|"; color: var(--lime); animation: cursore 1s steps(1) infinite; margin-left: 1px; }
@keyframes cursore { 50% { opacity: 0; } }
.tel-etichetta { display: block; font-size: .86rem; color: var(--tenue); margin: 14px 4px 6px; text-transform: uppercase; letter-spacing: .08em; }
.tel-lista { list-style: none; padding: 0; }
.tel-lista li { display: flex; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #1f2a2f; font-size: 1.05rem; line-height: 1.3; color: #e6ecec; opacity: .25; transition: opacity .5s, color .5s; }
.tel-lista li::before { content: "↺"; color: var(--tenue); }
.tel-lista li.su { opacity: 1; }
.tel-lista li:last-child.su { color: var(--corallo); font-weight: 600; }
.riga-forte { font: 800 1.4rem/1.25 var(--font-titolo); font-stretch: 92%; color: #fff; border-left: 4px solid var(--corallo); padding-left: 14px; margin: 1.2em auto .6em; }
.riga-forte em { font-style: normal; color: var(--corallo); }

/* ═════ nemico: il mobiletto ═════ */
.mobiletto { position: relative; border: 5px solid var(--lime); border-radius: 22px; overflow: hidden; background: #101719; padding: 12px; margin-bottom: 26px; }
.mob-svg { width: 100%; height: auto; }
.mobiletto .cerchi path { stroke: var(--lime); stroke-width: 2.4; stroke-dasharray: .03 .025; }
.mobiletto.da-disegnare .cerchi path { opacity: 0; transition: opacity .4s; }
.mobiletto.da-disegnare.disegnato .cerchi path { opacity: 1; }
.mobiletto.da-disegnare.disegnato .cerchi path:nth-child(2) { transition-delay: .15s; } .mobiletto.da-disegnare.disegnato .cerchi path:nth-child(3) { transition-delay: .3s; } .mobiletto.da-disegnare.disegnato .cerchi path:nth-child(4) { transition-delay: .45s; } .mobiletto.da-disegnare.disegnato .cerchi path:nth-child(5) { transition-delay: .6s; } .mobiletto.da-disegnare.disegnato .cerchi path:nth-child(6) { transition-delay: .75s; }
.etich { position: absolute; font-size: 1.15rem; background: rgba(15,21,24,.86); padding: 0 .3em; border-radius: 4px; white-space: nowrap; transform: rotate(-4deg); }
.e1 { left: 4%; top: 1%; } .e2 { left: 26%; top: 34%; } .e3 { right: 13%; top: 3%; }
.e4 { left: 3%; top: 69%; } .e5 { left: 33%; top: 47%; } .e6 { right: 3%; top: 69%; }
.mobiletto.da-disegnare .etich { opacity: 0; transform: rotate(-4deg) translateY(6px); transition: opacity .4s, transform .4s; }
.mobiletto.da-disegnare.disegnato .etich { opacity: 1; transform: rotate(-4deg); }
.mobiletto.disegnato .e2 { transition-delay: .3s; } .mobiletto.disegnato .e3 { transition-delay: .5s; } .mobiletto.disegnato .e4 { transition-delay: .7s; } .mobiletto.disegnato .e5 { transition-delay: .9s; } .mobiletto.disegnato .e6 { transition-delay: 1.1s; }

.conto { background: var(--sup); border: 1px solid var(--linea); border-radius: 18px; padding: 20px 18px; margin-top: 10px; }
.conto-t { font: 800 1.25rem/1.2 var(--font-titolo); margin-bottom: 14px; }
.cursore { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin-bottom: 16px; font-size: 1.02rem; }
.cursore output { font: 800 1.2rem/1 var(--font-titolo); color: var(--lime); align-self: center; }
.cursore input { grid-column: 1 / -1; width: 100%; accent-color: var(--lime); height: 28px; }
.conto-esito { border-top: 1px dashed rgba(241,244,242,.3); padding-top: 14px; }
.conto-tot { font: 800 1.3rem/1.2 var(--font-titolo); }
.conto-tot b { display: block; font-size: 3.2rem; font-stretch: 78%; color: var(--corallo); line-height: 1; margin-top: 4px; }
.conto-volte { color: #d5dcdc; font-size: 1.06rem; margin-top: 6px; }
.conto-volte #out-volte { color: #fff; font-weight: 700; }

/* ═════ big idea ═════ */
#bigidea { background: linear-gradient(180deg, var(--fondo), #121b1f); }
#bigidea .gigante { font-size: clamp(2.4rem, 11.4vw, 5rem); text-transform: uppercase; }
.grafico { position: relative; background: var(--sup); border-radius: 18px; padding: 16px 12px 34px; margin: 6px auto 22px; border: 1px solid var(--linea); }
.grafico svg { width: 100%; height: auto; overflow: visible; }
.grafico .asse { stroke: rgba(241,244,242,.25); stroke-width: 1.5; }
.grafico path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.linea-l { stroke: var(--lime); stroke-width: 5; }
.linea-c { stroke: var(--corallo); stroke-width: 5; }
.segno { stroke: #fff; stroke-width: 2; }
.punto-l { fill: var(--lime); } .punto-c { fill: var(--corallo); }
.grafico.da-disegnare path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.5,.1,.3,1); }
.grafico.da-disegnare .segno { transition-delay: 1.5s; transition-duration: .5s; }
.grafico.da-disegnare.disegnato path { stroke-dashoffset: 0; }
.grafico.da-disegnare circle { opacity: 0; transition: opacity .4s 1.4s; } .grafico.da-disegnare.disegnato circle { opacity: 1; }
.g-et { position: absolute; font: 700 .95rem/1.2 var(--font-corpo); padding: 2px 8px; border-radius: 6px; }
.g-l { left: 12%; top: 4%; background: var(--lime); color: #0F1518; }
.g-c { right: 4%; bottom: 22%; background: var(--corallo); color: #0F1518; }
.g-q { left: 33%; top: 40%; font-family: var(--font-mano); font-size: 1.25rem; color: #fff; padding: 0; transform: rotate(-4deg); }
.g-asse { position: absolute; left: 14px; bottom: 8px; font-size: .9rem; color: var(--tenue); }

/* ═════ meccanismo: il filtro ═════ */
#meccanismo { padding-top: 64px; }
.filtro-palco { max-width: 40rem; margin: 0 auto; }
.filtro { background: radial-gradient(100% 80% at 50% 0%, #1f2d33, #121a1d); border: 5px solid var(--lime); border-radius: 22px; padding: 18px 14px 12px; }
.filtro-conta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.filtro-conta b { font: 900 4rem/1 var(--font-titolo); font-stretch: 72%; color: var(--lime); min-width: 1.6em; }
.filtro-conta span { font-size: 1.05rem; color: #d5dcdc; }
.scaffale { position: relative; }
.scaf-et { display: block; font-size: .9rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.griglia-b { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 6px; }
.bocc { position: relative; aspect-ratio: 3 / 5; display: grid; place-items: end center; transition: opacity .5s, filter .5s, transform .5s; }
.bocc svg { width: 100%; height: 100%; overflow: visible; }
.bocc .x { position: absolute; inset: -6% -10%; width: 120%; height: 112%; pointer-events: none; }
.bocc .x path { fill: none; stroke: var(--corallo); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .28s ease-out; }
.bocc.via .x path { stroke-dashoffset: 0; }
.bocc.via .x path + path { transition-delay: .14s; }
.bocc.via svg.corpo { opacity: .3; filter: grayscale(1); }
.bocc.tiene { transform: translateY(-4px); }
.bocc.tiene svg.corpo { filter: drop-shadow(0 0 12px rgba(200,240,60,.75)); }
.bocc .lucch { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) scale(0); font-size: 1.15rem; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.bocc.tiene .lucch { transform: translate(-50%, -50%) scale(1); }
.filtro .nota-riga { margin: 10px 0 4px; }

/* ═════ piastrella ═════ */
#piastrella { background-color: var(--piastrella); background-image: linear-gradient(var(--fuga) 2px, transparent 2px), linear-gradient(90deg, var(--fuga) 2px, transparent 2px); background-size: 64px 64px; background-position: -1px -1px; color: #0F1518; padding: 64px var(--gutter); text-align: center; }
.piastrella-in { background: rgba(234,240,238,.92); padding: 10px 6px; }
#piastrella .display { font: 900 clamp(2.6rem, 13vw, 5.6rem)/.9 var(--font-titolo); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; }
#piastrella hr { border: 0; height: 3px; background: #0F1518; margin: 18px auto; max-width: 22rem; }
#piastrella .riga { font-size: 1.2rem; line-height: 1.45; font-weight: 600; margin-bottom: 20px; }
#piastrella .riga strong { background: var(--lime); padding: 0 .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#piastrella .bottone { width: 100%; max-width: 26rem; }

/* ═════ primi mesi ═════ */
.curva { position: relative; background: #0d1416; border-radius: 14px; padding: 30px 10px 34px; margin: 6px 0 20px; }
.curva svg { width: 100%; height: auto; overflow: visible; }
.curva path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.curva-l { stroke: var(--lime); stroke-width: 4.5; }
.cerchio-picco { stroke: var(--corallo); stroke-width: 2.5; }
.curva.da-disegnare path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.5,.1,.3,1); }
.curva.da-disegnare .cerchio-picco { transition-delay: 1.4s; transition-duration: .6s; }
.curva.da-disegnare.disegnato path { stroke-dashoffset: 0; }
.curva .mesi line { stroke: rgba(241,244,242,.12); stroke-width: 1; }
.cv-et { position: absolute; left: 33%; top: 4px; font-size: 1.3rem; color: var(--corallo); transform: rotate(-3deg); }
.cv-fine { position: absolute; right: 10px; top: 46%; font: 700 .95rem/1.2 var(--font-corpo); background: var(--lime); color: #0F1518; padding: 2px 8px; border-radius: 6px; }
.cv-asse { position: absolute; left: 12px; bottom: 8px; font-size: .9rem; color: var(--tenue); }
.chat { background: #0b1013; border-radius: 18px; padding: 16px 14px; border: 1px solid #2a363b; display: flex; flex-direction: column; gap: 10px; }
.chat-ora { display: block; text-align: center; font-size: .86rem; color: var(--tenue); }
.bolla { max-width: 84%; padding: 10px 14px; border-radius: 18px; font-size: 1.06rem; line-height: 1.38; }
.bolla.tu { align-self: flex-end; background: #2b3a41; color: #fff; border-bottom-right-radius: 4px; }
.bolla.guida { align-self: flex-start; background: var(--lime); color: #0F1518; font-weight: 600; border-bottom-left-radius: 4px; }
.chat.attesa .bolla { opacity: 0; transform: translateY(10px) scale(.96); }
.chat .bolla { transition: opacity .4s, transform .4s cubic-bezier(.3,1.4,.5,1); }

/* ═════ benefici ═════ */
.card-ben { display: grid; gap: 14px; }
.ben { background: var(--sup); border: 1px solid var(--linea); border-radius: 18px; padding: 18px; display: grid; gap: 8px; }
.ben-vis { height: 86px; border-radius: 12px; background: #0d1416; display: grid; place-items: center; overflow: hidden; }
.ben-vis svg { height: 76px; width: auto; }
.gocce-ben circle { animation: goccia 1.6s ease-in infinite; }
.gocce-ben circle:nth-child(2n) { animation-delay: .5s; } .gocce-ben circle:nth-child(3n) { animation-delay: 1s; }
@keyframes goccia { from { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(16px); opacity: 0; } }
.ben p { color: #d5dcdc; font-size: 1.05rem; }

/* ═════ sogno: lo specchio del barbiere ═════ */
#sogno { background: radial-gradient(90% 50% at 50% 30%, #1d2b31, var(--fondo) 75%); overflow: hidden; }
.sogno-palco { max-width: 40rem; margin: 0 auto; text-align: center; }
.specchio-mano { position: relative; width: 230px; height: 330px; margin: 0 auto 18px; perspective: 900px; }
.specchio-giro { position: relative; width: 230px; height: 230px; transform-style: preserve-3d; transform: rotateY(var(--giro, 0deg)); }
.specchio-retro, .specchio-vetro { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.specchio-retro { background: radial-gradient(circle at 40% 35%, #3a4b54, #141c20); border: 10px solid #2a3a42; display: grid; place-items: center; font: 600 1.6rem/1 var(--font-mano); color: var(--tenue); }
.specchio-vetro { transform: rotateY(180deg); border: 10px solid var(--lime); overflow: hidden; background: radial-gradient(circle at 35% 30%, #2b3d45, #0e1518); box-shadow: 0 0 60px -10px rgba(200,240,60,.45); }
.specchio-vetro canvas { width: 100%; height: 100%; }
.specchio-manico { position: absolute; left: 50%; top: 222px; width: 34px; height: 104px; transform: translateX(-50%); border-radius: 8px 8px 16px 16px; background: linear-gradient(90deg, #22313a, #3d525d, #22313a); }
#sogno .gigante { font-size: clamp(2.2rem, 10.4vw, 4.6rem); text-transform: uppercase; }
#sogno .testo { font-size: 1.2rem; }

/* ═════ testimonianze ═════ */
.casi { display: grid; gap: 18px; margin-top: 10px; }
.caso { border: 5px solid var(--lime); border-radius: 20px; overflow: hidden; background: #11181b; margin: 0; }
.pd { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #0a0f11; }
.pd figure { position: relative; margin: 0; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #26363d, #0d1416); }
.pd canvas { width: 100%; height: 100%; }
.et-pd { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: var(--lime); color: #0F1518; font: 900 .95rem/1 var(--font-titolo); font-stretch: 80%; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; white-space: nowrap; }
.caso > p { padding: 16px 18px 6px; font-size: 1.05rem; line-height: 1.5; color: #e1e7e7; }
.caso footer { display: flex; align-items: center; gap: 10px; padding: 8px 18px 18px; color: var(--tenue); font-size: 1rem; }
.caso footer b { color: #fff; text-transform: uppercase; font-family: var(--font-titolo); letter-spacing: .02em; }
.faccia { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--f) 70%, #fff), var(--f)); color: #fff; font: 800 1.1rem/1 var(--font-titolo); border: 2px solid var(--lime); flex: none; }

/* ═════ bonus ═════ */
.bonus { display: grid; gap: 14px; margin: 18px auto 28px; }
.cop { position: relative; width: 210px; height: 280px; margin: 0 auto; border-radius: 4px 12px 12px 4px; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; transform: rotate(-3deg); box-shadow: -8px 0 0 rgba(0,0,0,.25) inset, 18px 26px 50px -18px rgba(0,0,0,.85); }
.cop b { font: 900 2rem/.92 var(--font-titolo); font-stretch: 70%; text-transform: uppercase; }
.cop-n { font: 700 .75rem/1 var(--font-corpo); letter-spacing: .2em; text-transform: uppercase; }
.cop-usp { margin-top: auto; font-size: .82rem; line-height: 1.3; }
.cop-pelle { background: linear-gradient(160deg, #EAF0EE, #c7d3cf); color: #0F1518; }
.cop-pelle .cop-n { color: #6b7d78; } .cop-pelle .cop-usp { border-top: 2px solid #0F1518; padding-top: 8px; }
.cop-trap { background: linear-gradient(160deg, #FF6A3D, #c84a24); color: #fff; transform: rotate(3deg); }
.cop-trap .cop-usp { border-top: 2px solid #fff; padding-top: 8px; }
.bonus-testo { text-align: center; }
.bonus-testo h3 { font-size: 1.5rem; margin-bottom: .3em; }
.bonus-testo p { color: #d5dcdc; }
.bonus-prezzo { margin-top: .5em; font: 800 1.4rem/1 var(--font-titolo); }
.bonus-prezzo s { color: var(--tenue); font-weight: 600; margin-right: .3em; }
.bonus-prezzo b { color: #0F1518; background: var(--lime); padding: .15em .45em; border-radius: 6px; text-transform: uppercase; }

/* ═════ offerta ═════ */
.offerta-box { max-width: 40rem; margin: 0 auto; border: 5px solid var(--lime); border-radius: 24px; padding: 26px 18px; background: radial-gradient(100% 60% at 50% 0%, #1f2d33, #11181b); text-align: center; }
.offerta-box .sub { font-size: 1.12rem; }
.conto-offerta { list-style: none; padding: 0; margin: 10px 0 14px; text-align: left; }
.conto-offerta li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed rgba(241,244,242,.25); font-size: 1.06rem; }
.conto-offerta b { white-space: nowrap; color: var(--tenue); }
.totale { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; }
.totale .barrato { color: var(--tenue); }
.oggi { margin-top: 16px; font: 800 1.1rem/1 var(--font-titolo); text-transform: uppercase; letter-spacing: .1em; color: var(--lime); }
.prezzo-g { font-size: clamp(5rem, 28vw, 8rem); color: #fff; line-height: .95; margin: 4px 0 0; }
.copie { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 10px 0 12px; }
.copie i { aspect-ratio: 3 / 4; border-radius: 3px; background: var(--lime); position: relative; }
.copie i.presa { background: #2a383e; }
.copie i.presa::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; background: var(--corallo); transform: rotate(-50deg) scaleX(var(--k, 0)); transition: transform .3s; }
.copie i.presa.segnata::after { --k: 1; }
.scarsa { font-size: 1.05rem; margin-bottom: 16px; color: #d5dcdc; }
.scarsa strong { color: var(--corallo); }

/* ═════ garanzia ═════ */
#garanzia { text-align: center; }
.sigillo { width: 190px; margin: 0 auto 18px; }
.sigillo svg { width: 100%; }
.sig-giro { font-family: var(--font-titolo); font-weight: 800; fill: #0F1518; }
.sigillo svg { animation: ruota 22s linear infinite; }
.sig-n { font: 900 52px/1 var(--font-titolo); font-stretch: 75%; fill: var(--lime); }
.sig-g { font: 800 15px/1 var(--font-titolo); letter-spacing: 3px; fill: #fff; }
@keyframes ruota { to { transform: rotate(360deg); } }

/* ═════ domande ═════ */
.fisa summary { font-family: var(--font-titolo); font-size: 1.15rem; }
.fisa summary::after { color: var(--lime); }
.fisa details > p { color: #d5dcdc; }

/* ═════ congedo ═════ */
#congedo { text-align: center; padding-bottom: 120px; background: linear-gradient(180deg, var(--fondo), #0b1012); }
.cappellino { width: 190px; margin: 0 auto 10px; }
.cappellino path { stroke: var(--lime); stroke-width: 4; }
.cappellino.da-disegnare path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease-out; }
.cappellino.da-disegnare.disegnato path { stroke-dashoffset: 0; }
.cappellino .sole { fill: var(--corallo); }
#congedo .gigante { font-size: clamp(2.3rem, 10.6vw, 4.6rem); text-transform: uppercase; }
#congedo .bottone { margin-top: 8px; max-width: 30rem; }
.piede { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--linea); color: var(--tenue); font-size: 16.5px; display: grid; gap: 10px; }
.piede a { color: var(--tenue); }

/* barra fissa del preset */
[data-barra-acquisto] { background: rgba(15,21,24,.94); border: 1px solid rgba(200,240,60,.35); backdrop-filter: blur(10px); color: #fff; }
.barra-prezzo { display: flex; flex-direction: column; font-size: .98rem; line-height: 1.2; }
.barra-prezzo b { color: var(--lime); }
.barra-prezzo s { color: var(--tenue); }

/* ═════ computer ═════ */
@media (min-width: 900px) {
  :root { --gutter: 48px; }
  main > section { padding: 110px var(--gutter); }
  #apertura { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: auto auto auto; column-gap: 20px; padding: 64px 0 0; }
  .ap-testo { grid-column: 1; grid-row: 1; padding-left: 64px; max-width: none; margin: 0; }
  .ap-nuca { grid-column: 2; grid-row: 1 / 3; height: 620px; }
  .ap-nuca canvas { width: 560px; height: 560px; top: 20px; }
  .ap-nuca .luce { width: 720px; height: 640px; }
  .ap-sotto { grid-column: 1; grid-row: 2; padding: 22px 0 40px 64px; max-width: none; margin: 0; }
  .sub-ap { margin-top: 0; }
  .riquadri { grid-template-columns: repeat(4, 1fr); }
  .freccia-cta { max-width: 32rem; }
  .striscia { grid-column: 1 / -1; grid-row: 3; }
  .titolo-ap .l2 { font-size: 6.2rem; }
  .cornice-tratteggio { padding: 40px 44px; }
  #problema, #nemico { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: start; max-width: 1180px; margin: 0 auto; }
  #problema > figure, #nemico > figure { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 90px; margin: 0; }
  #problema > :not(figure), #nemico > :not(figure) { grid-column: 2; margin-left: 0; }
  .pagina { flex-basis: 46%; }
  .card-ben { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
  #benefici > .card-ben { max-width: 1100px; }
  .casi { grid-template-columns: repeat(2, 1fr); max-width: 1000px; }
  #testimonianze > .casi { max-width: 1000px; }
  .bonus { grid-template-columns: 240px 1fr; align-items: center; max-width: 44rem; }
  .bonus-testo { text-align: left; }
  .griglia-b { grid-template-columns: repeat(10, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .striscia-nastro, .libro, .sigillo svg { animation: none; }
  .tel-lista li { opacity: 1; }
}

/* testimonianze senza foto: la citazione è protagonista */
.caso { position: relative; }
.caso::before { content: "“"; position: absolute; left: 16px; top: 4px; font: 900 6rem/1 var(--font-titolo); color: var(--lime); opacity: .9; }
.caso > p { padding: 62px 18px 6px; font-size: 1.1rem; }

/* sogno: le tempie al loro posto */
.tempie-palco { position: relative; width: 300px; height: 300px; margin: 0 auto 14px; }
.tempie-palco canvas { width: 300px; height: 300px; }
.t-sx, .t-dx { position: absolute; top: 56%; font-size: 1.3rem; }
.t-sx { left: -4px; transform: rotate(-6deg); } .t-dx { right: -8px; transform: rotate(5deg); }

/* ═════ foto e film ═════ */
#apertura { position: relative; }
.ap-film { position: absolute; inset: 0 0 auto 0; height: 600px; z-index: 0; pointer-events: none; }
.ap-film .film { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .8; }
.ap-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,21,24,.45) 0%, rgba(15,21,24,.62) 60%, var(--fondo) 100%); }
.ap-nuca { z-index: 1; }
.pr-foto { display: block; width: 100%; height: auto; border-radius: 14px; margin-bottom: 16px; }
.mob-foto { display: block; width: 100%; height: auto; border-radius: 12px; }
.mobiletto { padding: 0; }
.sf { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sf img, .sf .film { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--fondo) 0%, rgba(15,21,24,.6) 22%, rgba(15,21,24,.66) 78%, var(--fondo) 100%); }
#bigidea, #sogno, #congedo { position: relative; }
#bigidea > :not(.sf), #sogno > :not(.sf), #congedo > :not(.sf) { position: relative; z-index: 1; }
#sogno .sf::after { background: linear-gradient(180deg, var(--fondo) 0%, rgba(15,21,24,.5) 20%, rgba(15,21,24,.62) 70%, var(--fondo) 100%); }
#sogno .sf .film { object-position: 50% 25%; }
.ben-vis { height: auto; aspect-ratio: 3 / 2; background: none; }
.ben-vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
img.faccia { width: 56px; height: 56px; object-fit: cover; background: none; }
@media (min-width: 900px) {
  .ap-film { height: 100%; }
  .ap-film::after { background: linear-gradient(90deg, rgba(15,21,24,.82) 0%, rgba(15,21,24,.6) 50%, rgba(15,21,24,.35) 100%), linear-gradient(180deg, rgba(15,21,24,0) 70%, var(--fondo) 100%); }
}
main > section > .sf, main > section > .ap-film { max-width: none; margin: 0; }
@media (min-width: 900px) { .ap-film { grid-column: 1 / -1; grid-row: 1 / -1; } }
.sogno-film { margin: 26px auto 0; border: 5px solid var(--lime); border-radius: 22px; overflow: hidden; aspect-ratio: 9 / 14; max-width: 26rem; background: #101719; }
.sogno-film .film { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
@media (min-width: 900px) { .sogno-film { aspect-ratio: 16 / 9; max-width: 52rem; } }