/* Cuci e Guadagna · anteprima · concept A «Il metro da sarta»
   Fraunces (titoli, numeri) + DM Sans (testo) · Caveat solo su bigliettini e note a margine */

:root {
  /* tavolozza «girly»: i nomi restano quelli di prima, i colori no
     giallo → rosa del metro · rosso → fucsia · blu → prugna · salvia → lilla */
  --giallo: #FF8FB3; --giallo-scuro: #E0628E; --rosso: #D6206A; --rosso-scuro: #9C1150; --crema: #FFF5F3; --carta: #FDE8EF; --cipria: #FFD6E3; --evid: #FFB3CB;
  --blu: #3A1230; --blu-notte: #260A1F; --salvia: #B79BE6; --salvia-chiara: #F1E8FC; --grigio: #6B4F62;
  --titoli: "Fraunces", Georgia, serif;
  --testo: "DM Sans", system-ui, sans-serif;
  --mano: "Caveat", "Segoe Print", cursive;
  --mo-accento: #FF8FB3; --mo-scuro: #3A1230; --mo-chiaro: #FFF5F3; --mo-secondo: #B79BE6;
  --mo-allarme: #D6206A; --mo-cta: #D6206A; --mo-mono: "DM Sans", system-ui, sans-serif; --mo-mano: "Caveat", cursive;
  --colonna: min(660px, 100% - 40px);
  --bordo-sx: 20px;
  --metro-dx: 28px;
}
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { overflow-x: clip; }
  body { margin: 0; background: var(--crema); color: var(--blu); font: 400 18px/1.6 var(--testo); -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; height: auto; display: block; }
  h1, h2, h3, p, ul, ol, figure { margin: 0; }
  a { color: inherit; }
  mark { background: linear-gradient(transparent 12%, var(--evid) 12%, var(--evid) 88%, transparent 88%); color: var(--blu); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
}
/* grana della carta su tutta la pagina */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35; background-image: radial-gradient(rgba(214,32,106,.07) 1px, transparent 1px); background-size: 4px 4px; }
section, footer, .barra-alto { position: relative; z-index: 1; }

/* ── impaginazione: colonna a sinistra, metro a destra su computer ── */
.scena { padding: 92px 0; }
.col { width: var(--colonna); margin-inline: auto; position: relative; }
@media (min-width: 1024px) {
  :root { --bordo-sx: max(40px, calc((100vw - 1180px) / 2)); --metro-dx: max(28px, calc((100vw - 1260px) / 2)); }
  .scena:not(.apertura) .col { margin-left: var(--bordo-sx); margin-right: 0; }
}
.scura { background: var(--blu); color: var(--crema); }
.carta { background: var(--carta); }
/* il separatore è un punto dritto */
.scena + .scena::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--salvia) 0 14px, transparent 14px 24px); opacity: .7; }

/* ── tipografia ── */
.occhiello { font: 800 13px/1.3 var(--testo); letter-spacing: .16em; text-transform: uppercase; color: var(--rosso); }
.scura .occhiello { color: var(--giallo); }
.occhiello { display: inline-block; background: var(--cipria); color: var(--rosso-scuro); padding: 6px 12px 5px; border-radius: 999px; }
.scura .occhiello { background: rgba(255,143,179,.16); }
.titolo { font: 800 clamp(34px, 8.2vw, 64px)/1.06 var(--titoli); letter-spacing: -.012em; margin-top: 10px; text-wrap: balance; font-variation-settings: "opsz" 144; }
.titolo-m { font: 800 clamp(24px, 5.4vw, 36px)/1.15 var(--titoli); letter-spacing: -.015em; }
/* le sub sotto i titoli: carta prugna a contrasto, come la USP dell'apertura */
.sub-sez, .prezzo-box .costa-sotto { position: relative; margin-top: 20px; background: var(--blu); color: #FFF2F6; border-radius: 20px; padding: 20px 20px 22px; font: 600 clamp(19px, 4.9vw, 25px)/1.36 var(--titoli); letter-spacing: -.005em; box-shadow: 0 16px 34px rgba(58,18,48,.22); rotate: -.5deg; text-align: left; }
.sub-sez::after, .prezzo-box .costa-sotto::after { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(255,143,179,.5); border-radius: 14px; pointer-events: none; }
@media (min-width: 720px) { .sub-sez, .prezzo-box .costa-sotto { padding: 24px 28px 26px; } }
.sub-sez strong, .costa-sotto strong { font-weight: 800; color: #fff; }
.sub-sez strong.rosso, .sub-sez em { color: var(--giallo); }
.sub-sez mark, .costa-sotto mark { background: var(--giallo); color: var(--blu); font-weight: 800; border-radius: 3px; }
.sotto-nastro { display: inline-block; margin-top: 14px; background: var(--rosso); color: #fff; font: 700 clamp(19px, 4.8vw, 24px)/1.25 var(--titoli); padding: 8px 16px 9px; border-radius: 10px; rotate: -1deg; box-shadow: 3px 4px 0 var(--blu); }
.lettera p { margin-top: .7em; }
.lettera p:first-child { margin-top: 0; }
.grande-lettera { font-size: clamp(19px, 4.6vw, 23px); line-height: 1.5; margin-top: 30px; }
.stacco-g { margin-top: 44px; }
strong, b { font-weight: 800; }
.rosso { color: var(--rosso); }
.forte { font-weight: 800; }
.giallo { color: var(--giallo); }
.giallo-sotto { background: linear-gradient(transparent 58%, var(--giallo) 58%, var(--giallo) 92%, transparent 92%); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .06em; }
.sott { position: relative; white-space: nowrap; }
.sott svg { position: absolute; left: -2%; bottom: -.22em; width: 104%; height: .45em; overflow: visible; pointer-events: none; }
.sott path { fill: none; stroke: var(--rosso); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; }
.scura .sott path { stroke: var(--giallo); }
.nota-mano { font: 700 26px/1.1 var(--mano); color: var(--rosso); transform: rotate(-3deg); display: inline-block; margin-top: 18px; }
.nota-mano::before { content: "↳ "; }

/* ── la cucitura: bordo tratteggiato dentro le carte ── */
.cucita { position: relative; }
.cucita::after { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(214,32,106,.38); border-radius: 12px; pointer-events: none; }

/* ── bottoni ── */
.cta-blocco { margin-top: 32px; }
.bottone { display: block; max-width: 460px; background: var(--rosso); color: #fff; text-decoration: none; text-align: center; border-radius: 14px; padding: 16px 20px 13px; box-shadow: 0 5px 0 var(--rosso-scuro), 0 16px 30px rgba(214,32,106,.32); transition-property: transform, box-shadow; transition-duration: .15s; }
.bottone:hover { transform: translateY(-2px); }
.bottone:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--rosso-scuro); }
.bottone .b1 { display: block; font: 900 clamp(21px, 5.6vw, 26px)/1.1 var(--titoli); letter-spacing: -.01em; text-transform: uppercase; }
.bottone .b2 { display: block; font: 700 14px/1.3 var(--testo); margin-top: 4px; }
.rischio { font-size: 13px; color: var(--grigio); margin-top: 10px; max-width: 460px; text-align: center; }

/* ── segnaposto foto (piccola etichetta in un angolo) ── */
.foto-seg { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; background: linear-gradient(160deg, #FBD3E0, #E59AB8 60%, #9C4A72); box-shadow: 0 18px 40px rgba(58,18,48,.18); }
.foto-seg.quadra { aspect-ratio: 1; border-radius: 50%; box-shadow: none; }
.foto-seg::after, .fondo-seg::after { content: "[HF] " attr(data-slot); position: absolute; left: 10px; bottom: 8px; font: 600 10px/1.2 ui-monospace, monospace; color: rgba(255,255,255,.88); background: rgba(0,0,0,.35); padding: 3px 6px; border-radius: 4px; }
.foto-seg.quadra::after { display: none; }
.fondo-seg { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: radial-gradient(120% 90% at 70% 35%, #F7C9D9, #D98AAE 55%, #7E3460); opacity: .32; animation: respira 26s ease-in-out infinite alternate; }
.fondo-seg.destra { background: radial-gradient(110% 90% at 85% 40%, #F4C6D8, #CF80A6 55%, #6A2550); }
.fondo-seg.sinistra { background: radial-gradient(110% 90% at 15% 45%, #FAD0DF, #D98CB0 55%, #6E2853); }
.con-fondo { overflow: hidden; }
.con-fondo > .col, .apertura > .col { position: relative; z-index: 1; }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.07); } }
.affianco { display: grid; gap: 28px; margin-top: 34px; }
@media (min-width: 720px) { .affianco { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); align-items: start; } }

/* ═══ metro da sarta (la firma) ═══ */
.metro { position: fixed; z-index: 30; pointer-events: none; opacity: 0; transition-property: opacity, transform; transition-duration: .45s; }
.metro.acceso { opacity: 1; transform: none; }
.nastro { position: absolute; background-color: var(--giallo); box-shadow: 0 10px 30px rgba(58,18,48,.25); transition-property: transform; transition-duration: 1.1s; transition-timing-function: cubic-bezier(.3,.8,.25,1); }
.nastro .cm { position: absolute; font: 800 11px/1 var(--testo); color: var(--blu); }
.nastro .cm.dieci { color: var(--rosso); font-size: 13px; }
.spillo { position: absolute; width: 40px; height: 40px; z-index: 2; }
.spillo svg { width: 100%; height: 100%; overflow: visible; }
.spillo circle { fill: var(--rosso); stroke: var(--rosso-scuro); stroke-width: 1.5; }
.spillo path { stroke: #9AA0A8; stroke-width: 2.4; stroke-linecap: round; }
.biglietto { position: absolute; z-index: 3; background: #FFFDF6; color: var(--blu); border-radius: 3px; padding: 8px 12px 9px; box-shadow: 0 8px 18px rgba(58,18,48,.22); font: 700 21px/1.05 var(--mano); transform: rotate(-4deg); }
.biglietto b { display: block; font: 900 26px/1 var(--titoli); color: var(--rosso); letter-spacing: -.02em; }
.biglietto.cade { animation: cade .6s cubic-bezier(.3,1.4,.5,1); }
@keyframes cade { from { transform: translateY(-26px) rotate(-14deg); opacity: 0; } to { transform: translateY(0) rotate(-4deg); opacity: 1; } }
/* computer: in verticale a destra */
@media (min-width: 1024px) {
  .metro { top: 0; bottom: 0; right: var(--metro-dx); width: 250px; transform: translateX(40px); }
  .nastro { right: 0; top: 0; width: 58px; height: 4100px; border-radius: 4px;
    background-image: repeating-linear-gradient(180deg, var(--blu) 0 1px, transparent 1px 20px), repeating-linear-gradient(180deg, rgba(58,18,48,.55) 0 1px, transparent 1px 4px);
    background-size: 18px 100%, 9px 100%; background-repeat: repeat-y; background-position: left top, left top; }
  .nastro .cm { left: 22px; transform: translateY(-50%); }
  .spillo { right: 30px; top: calc(50% - 30px); }
  .biglietto { right: 76px; top: calc(50% - 22px); max-width: 170px; }
}
/* telefono: fascia in alto */
@media (max-width: 1023.98px) {
  .metro { left: 0; right: 0; top: 0; height: 58px; transform: translateY(-100%); overflow: hidden; }
  .nastro { left: 0; top: 10px; height: 38px; width: 4100px;
    background-image: repeating-linear-gradient(90deg, var(--blu) 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, rgba(58,18,48,.55) 0 1px, transparent 1px 4px);
    background-size: 100% 14px, 100% 8px; background-repeat: repeat-x; background-position: left top, left top; }
  .nastro .cm { top: 17px; transform: translateX(-50%); }
  .metro::before { content: ""; position: absolute; inset: 0; background: var(--blu); }
  .spillo { left: calc(32% - 14px); top: 2px; width: 28px; height: 28px; }
  .biglietto { right: 10px; top: 7px; padding: 5px 10px 6px; font-size: 17px; display: flex; gap: 6px; align-items: baseline; max-width: 58%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: rotate(-2deg); }
  .biglietto b { display: inline; font-size: 18px; }
  .biglietto.cade { animation-name: cade-fascia; }
  @keyframes cade-fascia { from { transform: translateY(-20px) rotate(-8deg); opacity: 0; } to { transform: translateY(0) rotate(-2deg); opacity: 1; } }
}

/* ═══ 1 · APERTURA ═══
   gerarchia: riga d'ingresso leggibile (pillola prugna) → headline contenuta → USP grande in carta a contrasto → bottone */
.barra-alto { background: var(--blu); color: #FFE9F0; text-align: center; font: 500 13px/1.35 var(--testo); padding: 9px 14px; }
.barra-alto .punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--giallo); margin-right: 7px; vertical-align: 1px; animation: lampeggia 1.6s infinite; }
@keyframes lampeggia { 50% { opacity: .25; } }

#s01 { padding: 22px 0 70px; overflow: hidden; background:
  radial-gradient(60% 40% at 100% 0%, rgba(255,143,179,.45), transparent 70%),
  radial-gradient(50% 40% at 0% 45%, rgba(183,155,230,.32), transparent 70%),
  radial-gradient(60% 40% at 90% 100%, rgba(255,214,227,.9), transparent 70%),
  linear-gradient(180deg, #FFE6EE, var(--crema) 70%); }
#s01 .col { width: min(1180px, 100% - 32px); }
.ap-griglia { display: grid; gap: 34px; text-align: center; }
@media (min-width: 1024px) {
  #s01 { padding: 54px 0 90px; }
  .ap-griglia { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; text-align: left; }
}

/* decorazioni: il filo che cuce lo sfondo, bottoncini e cuori che galleggiano */
.ap-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ap-filo { position: absolute; inset: 0; width: 100%; height: 100%; }
.ap-filo path { fill: none; stroke: var(--giallo); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 12; opacity: .55; animation: cuce 2.4s linear infinite; }
@keyframes cuce { to { stroke-dashoffset: -52; } }
.bottoncino { position: absolute; width: 34px; height: 34px; border-radius: 50%; background:
  radial-gradient(circle at 38% 38%, var(--blu) 0 2.6px, transparent 3px), radial-gradient(circle at 62% 38%, var(--blu) 0 2.6px, transparent 3px),
  radial-gradient(circle at 38% 62%, var(--blu) 0 2.6px, transparent 3px), radial-gradient(circle at 62% 62%, var(--blu) 0 2.6px, transparent 3px), var(--giallo);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), 0 6px 14px rgba(214,32,106,.25); opacity: .9; animation: galleggia 7s ease-in-out infinite alternate; }
.bt1 { left: 4%; top: 30%; } .bt2 { right: 6%; top: 6%; width: 26px; height: 26px; animation-delay: -2s; background-color: #CDB6F0; }
.bt3 { left: 8%; bottom: 12%; width: 22px; height: 22px; animation-delay: -4s; } .bt4 { right: 3%; bottom: 30%; animation-delay: -1s; }
.cuoricino { position: absolute; color: var(--rosso); font-size: 22px; opacity: .55; animation: galleggia 6s ease-in-out infinite alternate; }
.cu1 { left: 14%; top: 7%; } .cu2 { right: 14%; top: 46%; font-size: 16px; animation-delay: -3s; }
@keyframes galleggia { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-16px) rotate(10deg); } }
@media (max-width: 1023.98px) { .bt1, .bt4, .cu2 { display: none; } }
.ap-griglia, #s01 > .col { position: relative; z-index: 1; }

/* riga d'ingresso: pillola prugna, si legge al primo colpo */
.ingresso { display: inline-block; background: var(--blu); color: #fff; font: 600 clamp(15px, 4vw, 18px)/1.35 var(--testo); padding: 9px 16px 10px; border-radius: 18px; box-shadow: 0 10px 24px rgba(58,18,48,.22); }
.ingresso em { font: italic 700 1.08em/1 var(--titoli); color: var(--giallo); white-space: nowrap; }

/* headline sui tre livelli, più contenuta */
.headline { margin-top: 16px; font-family: var(--titoli); line-height: 1; letter-spacing: -.025em; color: var(--blu); }
.headline > span { display: block; }
.headline .h1 { position: relative; display: inline-block; font: italic 800 clamp(40px, 11vw, 68px)/1 var(--titoli); color: var(--rosso); letter-spacing: -.02em; }
.sott-h { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .3em; overflow: visible; }
.sott-h path { fill: none; stroke: var(--giallo); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: traccia .8s .7s ease-out forwards; }
@keyframes traccia { to { stroke-dashoffset: 0; } }
.headline .h2 { margin-top: 14px; font-weight: 900; font-size: clamp(33px, 9vw, 54px); }
.adesivo { display: inline-block; background: var(--rosso); color: #fff; padding: .04em .26em .08em; border-radius: .2em; transform: rotate(-6deg); box-shadow: 3px 4px 0 var(--blu); margin-right: .08em; }
.headline .h2b { font-weight: 800; font-size: clamp(27px, 7.4vw, 44px); margin-top: 4px; }
.headline .h3 { font: italic 700 clamp(21px, 5.6vw, 32px)/1.2 var(--titoli); margin-top: 10px; letter-spacing: -.01em; }
.headline .h3 em { display: inline-block; font-style: italic; background: var(--cipria); color: var(--rosso-scuro); padding: .04em .32em .1em; border-radius: 10px; border: 2px dashed var(--rosso); }

/* la USP: la frase che spiega la promessa, grande e a contrasto */
.usp-carta { position: relative; margin: 22px auto 0; max-width: 620px; background: var(--blu); color: #FFF2F6; border-radius: 22px; padding: 20px 20px 22px; transform: rotate(-.8deg); box-shadow: 0 20px 40px rgba(58,18,48,.28); text-align: left; }
.usp-carta::after { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(255,143,179,.5); border-radius: 16px; pointer-events: none; }
@media (min-width: 1024px) { .usp-carta { margin-left: 0; padding: 26px 30px 28px; } }
.usp { font: 600 clamp(21px, 5.6vw, 29px)/1.32 var(--titoli); letter-spacing: -.01em; }
.usp em { font-style: italic; font-weight: 800; color: var(--giallo); }
.usp strong { font-weight: 800; color: #fff; text-decoration: underline wavy var(--giallo); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.usp mark.ev { color: var(--blu); font-weight: 800; padding: 0 .14em; background: linear-gradient(var(--giallo), var(--giallo)) no-repeat 0 55% / 0% 86%; animation: evidenzia .9s 1.5s ease-out forwards; }
@keyframes evidenzia { to { background-size: 100% 86%; } }
.usp-spillo { position: absolute; right: 16px; top: -14px; width: 34px; height: 34px; overflow: visible; z-index: 2; }
.usp-spillo circle { fill: var(--giallo); stroke: var(--rosso); stroke-width: 1.5; }
.usp-spillo path { stroke: #B9A9B3; stroke-width: 2.4; stroke-linecap: round; }

#s01 .cta-blocco { margin-top: 26px; }
#s01 .bottone, #s01 .rischio { margin-inline: auto; }
#s01 .bottone { animation: entra-su .7s 1.15s both, pulsa 2.6s 2.4s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: scale(1.025); } }
@media (min-width: 1024px) { #s01 .bottone, #s01 .rischio { margin-inline: 0; } }
.rischio { font-size: 13px; color: var(--grigio); margin-top: 10px; max-width: 460px; text-align: center; }
.spunte { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 20px; font-weight: 700; font-size: 15px; }
@media (min-width: 1024px) { .spunte { justify-content: flex-start; } }
.spunte li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 50%; background: var(--rosso); color: #fff; font-size: 13px; }

/* a destra: la foto nell'arco, la guida 3D appoggiata sopra */
.ap-visivo { position: relative; width: min(400px, 84vw); margin: 0 auto; padding-bottom: 60px; }
.ap-arco { aspect-ratio: 4/5; border-radius: 999px 999px 26px 26px; border: 6px solid #fff; box-shadow: 0 0 0 2px var(--giallo), 0 26px 50px rgba(58,18,48,.25); animation: entra-pop .9s .5s both; }
.ap-visivo .libro-palco { position: absolute; left: -8%; bottom: -10px; width: 58%; height: auto; aspect-ratio: 17/20; margin: 0; }
.etichetta-3d { position: absolute; left: 44%; bottom: 8px; font: 700 24px/1 var(--mano); color: var(--rosso); transform: rotate(-6deg); }

/* entrate: ogni pezzo arriva per conto suo */
.ingresso { animation: entra-giu .6s .05s both; }
.headline .h1 { animation: entra-pop .7s .25s both; }
.headline .h2 { animation: entra-dx .7s .45s both; }
.headline .h2 .adesivo { animation: timbra .6s .75s both; }
.headline .h2b { animation: entra-su .6s .6s both; }
.headline .h3 { animation: entra-su .6s .75s both; }
.usp-carta { animation: entra-carta .8s .95s both; }
.spunte li { animation: entra-su .5s both; } .spunte li:nth-child(1) { animation-delay: 1.4s; } .spunte li:nth-child(2) { animation-delay: 1.5s; } .spunte li:nth-child(3) { animation-delay: 1.6s; }
@keyframes entra-giu { from { opacity: 0; transform: translateY(-18px); } }
@keyframes entra-su { from { opacity: 0; transform: translateY(22px); } }
@keyframes entra-dx { from { opacity: 0; transform: translateX(40px); } }
@keyframes entra-pop { from { opacity: 0; transform: scale(.7); } 70% { transform: scale(1.04); } }
@keyframes timbra { from { opacity: 0; transform: scale(2.2) rotate(-24deg); } 70% { transform: scale(.94) rotate(-4deg); } to { transform: rotate(-6deg); } }
@keyframes entra-carta { from { opacity: 0; transform: translateY(30px) rotate(3deg); } to { transform: rotate(-.8deg); } }

.libro-palco { position: relative; width: min(340px, 80vw); height: min(400px, 94vw); margin: 34px auto 0; }
.libro-palco canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.equazione { margin: 34px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; font: 800 clamp(21px, 5.4vw, 34px)/1.05 var(--titoli); letter-spacing: -.02em; }
.equazione .termine { background: #fff; border: 2px solid var(--blu); border-radius: 999px; padding: 11px 20px 10px; box-shadow: 4px 4px 0 var(--giallo); }
.equazione .op { color: var(--rosso); font-size: 1.3em; }
.equazione .ris { background: var(--rosso); color: #fff; border-color: var(--rosso); box-shadow: 4px 4px 0 var(--blu); }



/* ═══ 2 · cinque ragioni ═══ */
.riga-armadio { font-family: var(--titoli); font-weight: 900; color: var(--blu); letter-spacing: -.03em; }
.riga-armadio .mo-slot { color: var(--rosso); }
.carte5 { display: grid; gap: 14px; }
.carta5 { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 2px 0 rgba(58,18,48,.06), 0 10px 26px rgba(58,18,48,.08); font-size: 17px; line-height: 1.45; }
.carta5 strong { display: block; font: 800 20px/1.15 var(--titoli); margin-bottom: 4px; }
.carta5.quinta { background: var(--blu); color: var(--crema); }
.carta5.quinta::after { border-color: rgba(255,143,179,.55); }
.carta5.quinta strong { color: var(--giallo); }
.spunta { width: 40px; height: 40px; }
.spunta circle { fill: var(--cipria); }
.quinta .spunta circle { fill: rgba(255,143,179,.2); }
.spunta path { fill: none; stroke: var(--rosso); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.quinta .spunta path { stroke: var(--giallo); }
.da-disegnare .spunta path, .da-disegnare .sott path, .da-disegnare.sott path, .sott .da-disegnare path, .da-disegnare path.disegno, .da-disegnare .barrata path { stroke-dashoffset: 1; }
.disegnato .spunta path, .disegnato .sott path, .sott .disegnato path, .disegnato.sott path, .disegnato path.disegno, .disegnato .barrata path { stroke-dashoffset: 0; transition-property: stroke-dashoffset; transition-duration: .9s; transition-timing-function: ease-out; }

/* ═══ 3 · il conto della sarta ═══ */
.calcolo { margin-top: 30px; background: rgba(255,255,255,.88); border: 2px solid var(--blu); border-radius: 20px; padding: 22px; box-shadow: 6px 6px 0 var(--blu); backdrop-filter: blur(3px); }
.calcolo label { display: block; font-weight: 700; font-size: 17px; line-height: 1.35; }
.calcolo label output { display: inline-block; margin-left: 6px; background: var(--giallo); border-radius: 8px; padding: 0 8px; font-family: var(--titoli); font-weight: 900; }
.calcolo input[type=range] { width: 100%; margin-top: 14px; accent-color: var(--rosso); }
.calcolo .mo-ris { margin-top: 14px; }
.calcolo .mo-lbl { display: block; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--grigio); }
.calcolo .mo-flow { font-family: var(--titoli); font-weight: 900; color: var(--rosso); font-size: clamp(72px, 22vw, 150px); line-height: 1; letter-spacing: -.04em; }
.calcolo .mo-contro { margin-top: 8px; font-size: 16px; font-style: italic; }
.voci { margin-top: 30px; }
.voci .mo-bolla { font-size: 18px; }
.voci .mo-nota { font-size: 14px; font-weight: 600; color: var(--rosso-scuro); }

/* ═══ 4 · la strada di tutte ═══ */
.strada { position: relative; list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 8px; counter-reset: tappa; }
.strada li { position: relative; background: #fff; border-radius: 12px; padding: 12px 14px 12px 50px; font-weight: 700; font-size: 17px; box-shadow: 0 4px 12px rgba(58,18,48,.08); counter-increment: tappa; }
.strada li::before { content: counter(tappa); position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; background: var(--crema); display: grid; place-items: center; font: 900 15px/1 var(--titoli); }
.strada li.fine { background: var(--rosso); color: #fff; }
.strada li.fine::before { background: rgba(255,255,255,.25); }
.barra-mano { position: absolute; inset: -6px -4px; width: calc(100% + 8px); height: calc(100% + 12px); pointer-events: none; overflow: visible; }
.barra-mano path { fill: none; stroke: var(--rosso); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; opacity: .85; }
.da-disegnare .barra-mano path { stroke-dashoffset: 1; }
.disegnato .barra-mano path { stroke-dashoffset: 0; transition-property: stroke-dashoffset; transition-duration: .7s; transition-delay: .6s; }
.disegnato .barra-mano path + path { transition-delay: 1.2s; }

/* ═══ 4b · zoom ═══ */
#s04b .mo-parola { font-family: var(--titoli); font-weight: 900; }
#s04b .mo-dietro h2 { font-family: var(--titoli); }

/* ═══ 5 · il Listino a Gradini: righe in chiaro, cosa impari e quanto ti pagano ═══ */
.listino-cappello { margin-top: 30px; font: 700 clamp(20px, 5vw, 26px)/1.3 var(--titoli); }
.listino { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.riga-l { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; background: #fff; border-radius: 18px; padding: 16px 16px 20px; box-shadow: 0 10px 24px rgba(58,18,48,.08); border: 2px solid var(--cipria); }
@media (min-width: 720px) { .riga-l { margin-left: calc(var(--i) * 26px); padding: 18px 22px 22px; } }
.l-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cipria); color: var(--rosso-scuro); font: 900 20px/1 var(--titoli); }
.l-nome { font: 800 clamp(19px, 4.8vw, 23px)/1.15 var(--titoli); color: var(--blu); }
.l-impari { margin-top: 4px; font-size: 16px; line-height: 1.42; color: #4A2440; }
.l-impari b { color: var(--rosso); }
.l-prezzo { text-align: right; line-height: 1; padding-left: 4px; }
.l-lbl { display: block; font: 700 11px/1.2 var(--testo); text-transform: uppercase; letter-spacing: .08em; color: var(--grigio); }
.l-prezzo b { display: block; font: 900 clamp(30px, 8vw, 42px)/1 var(--titoli); color: var(--rosso); letter-spacing: -.02em; margin-top: 2px; }
.l-unita { display: block; font: 600 12.5px/1.25 var(--testo); color: var(--grigio); margin-top: 3px; max-width: 92px; margin-left: auto; }
.riga-l { grid-template-areas: "num testo prezzo"; } .l-num { grid-area: num; } .l-testo { grid-area: testo; } .l-prezzo { grid-area: prezzo; }
@media (max-width: 559.98px) {
  .riga-l { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "num nome" "impari impari" "prezzo prezzo"; align-items: center; row-gap: 8px; padding-bottom: 22px; }
  .l-testo { display: contents; }
  .l-nome { grid-area: nome; } .l-impari { grid-area: impari; margin-top: 0; }
  .l-prezzo { text-align: left; padding: 8px 12px; display: flex; align-items: baseline; gap: 0 10px; background: var(--carta); border-radius: 12px; }
  .riga-l.cima .l-prezzo { background: rgba(255,255,255,.08); }
  .l-lbl { order: 0; white-space: nowrap; } .l-prezzo b { margin-top: 0; font-size: 34px; }
  .l-unita { margin: 0; max-width: none; font-size: 14px; }
}

.l-barra { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 5px; border-radius: 3px; background: var(--carta); overflow: hidden; }
.l-barra i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--giallo), var(--rosso)); transition: width 1.1s .35s cubic-bezier(.2,.8,.2,1); }
.rivela-pronta .riga-l:not(.visto) .l-barra i { width: 0; }
.riga-l.prima { border-color: var(--rosso); box-shadow: 0 14px 30px rgba(214,32,106,.18); }
.l-subito { position: absolute; right: 14px; top: -12px; background: var(--rosso); color: #fff; font: 800 12px/1 var(--testo); text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; border-radius: 999px; transform: rotate(2deg); }
.riga-l.cima { background: var(--blu); border-color: var(--blu); }
.riga-l.cima .l-nome, .riga-l.cima .l-prezzo b { color: #fff; }
.riga-l.cima .l-impari { color: #F6DCE7; }
.riga-l.cima .l-impari b { color: var(--giallo); }
.riga-l.cima .l-lbl, .riga-l.cima .l-unita { color: #E8BFD2; }
.riga-l.cima .l-num { background: var(--rosso); color: #fff; }
.riga-l.cima .l-barra { background: rgba(255,255,255,.15); }

/* ═══ 6 · cosa farà per te ═══ */
.benefici { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 720px) { .benefici { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.beneficio { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 10px 26px rgba(58,18,48,.08); font-size: 17px; line-height: 1.45; }
.beneficio .em { font-size: 32px; line-height: 1; }
.beneficio strong { display: block; font: 800 19px/1.2 var(--titoli); margin-bottom: 6px; }
.pd { margin-top: 20px; max-width: 420px; }
.pd .mo-chip { font-weight: 800; }

/* ═══ 7 · frase gigante ═══ */
#s07 { padding: 110px 0; }
.frase-gigante { font: 900 clamp(42px, 11.5vw, 96px)/1.02 var(--titoli); letter-spacing: -.025em; margin-top: 12px; text-wrap: balance; }
.frase-gigante .sott { white-space: normal; color: var(--giallo); }
#s07 mark { color: var(--blu); }

/* ═══ 8 · anche se ═══ */
.anchese { list-style: none; padding: 0; display: grid; gap: 14px; font-size: 18px; line-height: 1.45; }
.anchese li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.barrata { position: relative; }
.barrata svg { position: absolute; left: -1%; top: 30%; width: 102%; height: .5em; overflow: visible; pointer-events: none; }
.barrata path { fill: none; stroke: var(--rosso); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; }

/* ═══ 9 · testimonianze ═══ */
.testimonianze { display: grid; gap: 16px; margin-top: 30px; }
@media (min-width: 720px) { .testimonianze { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.testim { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 10px 26px rgba(58,18,48,.08); font-size: 17px; line-height: 1.5; }
.testim .chi { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.testim .chi b { display: block; font-size: 16px; }
.testim .chi small { display: block; color: var(--grigio); font-size: 13px; }
.stelle { color: var(--rosso); font-size: 14px; letter-spacing: 2px; }
.testim .cifra { font: 900 30px/1.05 var(--titoli); color: var(--rosso); margin: 14px 0 6px; letter-spacing: -.02em; }

/* ═══ 10 · la busta del mese ═══ */
.busta { position: relative; background: #FFFDF6; border-radius: 6px; padding: 22px 22px 18px; box-shadow: 0 18px 40px rgba(58,18,48,.22); transform: rotate(1.5deg); font-family: var(--mano); color: var(--blu); }
.busta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px; background: linear-gradient(170deg, #FBDCE7 50%, transparent 51%), linear-gradient(-170deg, #FBDCE7 50%, transparent 51%); background-size: 50.5% 100%, 50.5% 100%; background-position: left, right; background-repeat: no-repeat; opacity: .8; }
.busta-testa { position: relative; font: 700 30px/1 var(--mano); color: var(--rosso); }
.busta ul { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 4px; font-size: 23px; line-height: 1.15; }
.busta li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed rgba(58,18,48,.25); padding-bottom: 3px; opacity: var(--vis, 1); transition-property: opacity, transform; transition-duration: .4s; transform: translateX(calc((1 - var(--vis, 1)) * 10px)); }
.busta li b { font-weight: 700; }
.busta-tot { margin-top: 12px; font: 700 26px/1 var(--mano); }
.busta-tot b { font: 900 clamp(46px, 12vw, 64px)/1 var(--titoli); color: var(--rosso); letter-spacing: -.03em; }

/* ═══ 11 · cartamodello: tre pezzi ritagliati, ognuno dice cosa impari e cosa incassi ═══ */
.pezzi-guida { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 22px; }
.pezzo-card { position: relative; background: #FFFDFB; padding: 30px 26px 26px; border-radius: 4px; box-shadow: 0 12px 26px rgba(58,18,48,.1); background-image: linear-gradient(rgba(214,32,106,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(214,32,106,.06) 1px, transparent 1px); background-size: 18px 18px; }
.pezzo-card:nth-child(1) { rotate: -1deg; } .pezzo-card:nth-child(2) { rotate: .8deg; } .pezzo-card:nth-child(3) { rotate: -.6deg; }
.pezzo-card .contorno { position: absolute; inset: 9px; z-index: 0; width: calc(100% - 18px); height: calc(100% - 18px); overflow: visible; pointer-events: none; }
.pezzo-card .contorno path { fill: none; stroke: var(--rosso); stroke-width: 1.2; stroke-dasharray: 1; }
.forbice { position: absolute; top: -4px; left: 22px; font-size: 22px; color: var(--rosso); background: var(--crema); padding: 0 4px; line-height: 1; }
.pz-num { position: absolute; right: 20px; top: 14px; font: 900 54px/1 var(--titoli); color: var(--cipria); }
.pz-tit { position: relative; font: 800 clamp(21px, 5.2vw, 25px)/1.15 var(--titoli); color: var(--blu); padding-right: 40px; }
.pz-testo { position: relative; margin-top: 8px; font-size: 17px; line-height: 1.45; }
.pz-soldi { position: relative; margin-top: 14px; background: var(--cipria); border-radius: 12px; padding: 10px 12px; }
.pz-soldi span { display: block; font: 700 11px/1.2 var(--testo); text-transform: uppercase; letter-spacing: .08em; color: var(--rosso-scuro); }
.pz-soldi b { display: block; margin-top: 3px; font: 800 18px/1.25 var(--titoli); color: var(--blu); }
.pezzo-card:nth-child(n+2) .pz-soldi { background: var(--rosso); }
.pezzo-card:nth-child(n+2) .pz-soldi span { color: #FFD6E3; }
.pezzo-card:nth-child(n+2) .pz-soldi b { color: #fff; font-size: 20px; }

/* ═══ 12 · offerta ═══ */
.cosa-ricevi { font-weight: 600; font-size: 18px; margin-top: 10px; }
.cartellini { display: grid; gap: 18px; margin-top: 22px; }
@media (min-width: 720px) { .cartellini { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cartellino { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; background: #FFFDF6; border: 1px solid rgba(58,18,48,.15); border-radius: 6px 6px 14px 14px; padding: 30px 18px 18px; box-shadow: 0 10px 24px rgba(58,18,48,.12); font-size: 17px; line-height: 1.45; transform-origin: 50% 0; animation: dondola 4.5s ease-in-out infinite alternate; }
.cartellino:nth-child(2) { animation-delay: -2s; }
.cartellino .foro { position: absolute; left: 50%; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--crema); box-shadow: inset 0 0 0 2px rgba(58,18,48,.3); }
.cartellino .em { font-size: 28px; }
.cartellino strong { display: block; font: 800 19px/1.2 var(--titoli); }
@keyframes dondola { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.prezzo-box { margin-top: 36px; background: #fff; border: 3px solid var(--blu); border-radius: 22px; padding: 26px 20px; text-align: center; box-shadow: 8px 8px 0 var(--blu); }

.prezzo-box [data-motion="prezzo-rullo"] .mo-rullo { font-family: var(--titoli); font-weight: 900; color: var(--rosso); }
.rimaste { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-weight: 700; }
.poi { font-size: 14px; margin-top: 8px; }
.cta-rilievo { display: block; max-width: 460px; margin: 22px auto 0; text-decoration: none; }
.cta-rilievo .mo-faccia { font-family: var(--titoli); font-weight: 900; color: #fff; }
.prezzo-box .rischio { margin-inline: auto; }

/* ═══ 13 · garanzia ═══ */
.garanzia { display: grid; gap: 22px; margin-top: 26px; align-items: center; font-size: 19px; }
@media (min-width: 720px) { .garanzia { grid-template-columns: 300px minmax(0, 1fr); } }

/* ═══ 14 · domande ═══ */
.domande { margin-top: 26px; display: grid; gap: 10px; }
.domande details { background: #fff; border-radius: 14px; box-shadow: 0 4px 14px rgba(58,18,48,.07); }
.domande summary { cursor: pointer; list-style: none; padding: 18px 48px 18px 18px; font: 800 18px/1.3 var(--titoli); position: relative; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%; font: 900 26px/1 var(--titoli); color: var(--rosso); }
.domande details[open] summary::after { content: "–"; }
.dr-corpo { padding: 0 18px 18px; font-size: 17px; }

/* ═══ 15 · congedo ═══ */
#s15 .mo-lettere { font-family: var(--titoli); }
#s15 .mo-grande { font-family: var(--titoli); }
#s15 .cta-blocco .bottone { margin-inline: 0; }
#s15 .cappello { font: 800 13px/1.3 var(--testo); letter-spacing: .16em; text-transform: uppercase; }

/* ── footer e barra ── */
.piede { background: var(--blu-notte); color: #E8CFDC; font-size: 13px; padding: 34px 0 110px; }
.piede p + p { margin-top: 10px; }
.piede a { margin-right: 16px; color: #fff; }
#barra-acquisto { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; background: var(--blu); color: #fff; border-radius: 16px; padding: 10px 10px 10px 16px; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
#barra-acquisto[hidden] { display: none; }
.barra-acquisto-prezzo { font: 900 26px/1 var(--titoli); color: var(--giallo); }
.barra-acquisto-prezzo s { font: 500 13px/1 var(--testo); color: #E2B9CC; margin-left: 6px; }
#barra-acquisto .bottone { flex: 1; padding: 12px 10px 10px; }
#barra-acquisto .bottone .b1 { font-size: 18px; }
@media (min-width: 1024px) { #barra-acquisto { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  #s01 *, .ap-filo path { animation: none !important; }
  .sott-h path { stroke-dashoffset: 0; } .usp mark.ev { background-size: 100% 86%; }
  .fondo-seg, .cartellino, .barra-alto .punto { animation: none; }
  .nastro, .busta li { transition: none; }
}

/* ritocchi dalla prova a 375 px */
.cta-rilievo .mo-faccia { font-size: clamp(17px, 4.6vw, 24px); white-space: nowrap; }
@media (max-width: 1023.98px) { #s15 .mo-testo { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 1023.98px) { .ap-filo path { opacity: .3; } }
@media (max-width: 719.98px) { .equazione { flex-direction: column; gap: 4px; } .equazione .op { line-height: 1; } }

/* ── via i muri di testo: ogni paragrafo è un blocco a sé, con peso e colore diversi ── */
.lettera p:first-child { font: 700 clamp(21px, 5.4vw, 27px)/1.3 var(--titoli); letter-spacing: -.01em; color: var(--blu); }
.scura .lettera p:first-child { color: #fff; }
.lettera p + p { margin-top: 16px; padding: 12px 0 12px 16px; border-left: 5px solid var(--giallo); font-size: 18px; line-height: 1.5; }
.lettera p + p.forte { border-left-color: var(--rosso); font: 800 clamp(20px, 5vw, 24px)/1.3 var(--titoli); }
.lettera p.nota-mano { border: 0; padding: 0; }
.grande-lettera { font-size: 18px; }
/* bullet del «cosa farà per te»: emoji sopra, testo a tutta larghezza */
.beneficio { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 20px 22px; }
.beneficio strong { font-size: clamp(20px, 5vw, 22px); color: var(--blu); }
.beneficio strong + * , .beneficio div { color: #4A2440; }
.carta5 { font-size: 16.5px; }
/* garanzia in tre righe */
.garanzia-righe { list-style: none; padding: 0; display: grid; gap: 12px; }
.garanzia-righe li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; background: #fff; border-radius: 14px; padding: 14px 16px; font-size: 18px; line-height: 1.4; box-shadow: 0 6px 18px rgba(58,18,48,.07); }
.garanzia-righe .em { font-size: 26px; line-height: 1; }
/* frasi a cascata: la stessa frase, un pezzo per riga, pesi diversi */
.lettera p.cascata { border-left: 0; padding: 0; margin-top: 22px; }
.cascata > span { display: block; }
.cascata .c-piccola { font: 700 14px/1.3 var(--testo); text-transform: uppercase; letter-spacing: .1em; color: var(--grigio); }
.scura .cascata .c-piccola { color: #E8BFD2; }
.cascata .c-grande { font: 800 clamp(26px, 7vw, 38px)/1.1 var(--titoli); margin-top: 4px; }
.cascata .c-riga { position: relative; padding-left: 26px; margin-top: 8px; font-size: 18px; line-height: 1.4; }
.cascata .c-riga::before { content: "♥"; position: absolute; left: 0; top: 0; color: var(--rosso); font-size: 15px; }
.scura .cascata .c-riga::before { color: var(--giallo); }
.cascata .c-fine { margin-top: 12px; font: 800 clamp(22px, 5.6vw, 28px)/1.25 var(--titoli); }
.prezzo-box .costa-sotto { font-size: clamp(18px, 4.6vw, 22px); padding: 18px 16px 20px; }
@media (max-width: 559.98px) { .prezzo-box { padding: 22px 14px; } }

/* ── grafiche del cliente (05/10): logo e mockup al posto dei libri 3D segnaposto ── */
.logo-alto { display: block; width: clamp(150px, 42vw, 220px); height: auto; margin: 0 0 14px; background: #fff; border-radius: 14px; padding: 6px 12px; box-shadow: 0 6px 18px rgba(58,18,48,.12); }
.ap-mockup { position: absolute; left: -14%; bottom: 0; width: 82%; height: auto; filter: drop-shadow(0 18px 26px rgba(58,18,48,.35)); animation: entra-pop .9s .8s both, galleggia 6s 1.8s ease-in-out infinite alternate; }
@keyframes galleggia { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-10px) rotate(1deg); } }
.of-bundle { display: block; width: min(560px, 100%); height: auto; margin: 30px auto 0; filter: drop-shadow(0 22px 30px rgba(58,18,48,.28)); }
.cartellino .bonus-mockup { grid-column: 1 / -1; width: 100%; height: auto; margin: -6px 0 6px; filter: drop-shadow(0 12px 18px rgba(58,18,48,.25)); }
.logo-piede { display: block; width: 56px; height: 56px; margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .ap-mockup { animation: none; } }

/* ── aria e testo leggibile (05/10, il tetto): niente sotto i 16 px, sezioni più ariose ── */
.rischio, .prezzo-box .rischio { font-size: 16px; }
.ingresso { font-size: 18px; }
.cascata .c-piccola { font-size: 16px; }
.pz-soldi span { font-size: 16px; letter-spacing: .04em; }
.prezzo-box .mo-sotto { font-size: 18px; }
.testim .chi small { font-size: 16px; }
#s01 { padding-top: 64px; }
@media (min-width: 720px) {
  .scena { padding: 120px 0; }
  #s01 { padding: 120px 0; }
}
.occhiello, #s15 .cappello { font-size: 16px; letter-spacing: .1em; }
.bottone .b2, .spunte, .poi, .calcolo .mo-lbl, .voci .mo-nota, .l-unita, .stelle { font-size: 16px; }
.barra-alto { font-size: 16px; }
.l-lbl { font-size: 16px; letter-spacing: .04em; }
.l-subito { font-size: 16px; }
.carta5 { font-size: 18px; }
.ap-mockup { left: 50%; width: 86%; margin-left: -43%; bottom: 0; }

/* ── foto vere (05/10) ── */
.foto-seg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-seg:has(img)::after, .fondo-seg:has(img)::after { display: none; }
.fondo-seg:has(img) { opacity: 1; background: var(--crema); }
.fondo-seg picture, .fondo-seg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fondo-seg:has(img)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,245,243,.93) 0%, rgba(255,245,243,.86) 60%, rgba(255,245,243,.55) 100%); }
#s03 .fondo-seg img { object-position: 50% 100%; }
#s10 .fondo-seg img { object-position: 50% 100%; }
@media (min-width: 720px) {
  .fondo-seg:has(img)::before { background: linear-gradient(90deg, rgba(255,245,243,.96) 0%, rgba(255,245,243,.9) 42%, rgba(255,245,243,.35) 68%, rgba(255,245,243,.1) 100%); }
  #s03 .fondo-seg img, #s10 .fondo-seg img { object-position: 70% 50%; }
}
@media (max-width: 719.98px) { .fondo-seg:has(img)::before { background: linear-gradient(180deg, rgba(255,245,243,.9) 0%, rgba(255,245,243,.8) 55%, rgba(255,245,243,.42) 100%); } }
.fondo-seg picture, .fondo-seg img { position: absolute; inset: 0; }
#s15 .mo-velo { background: linear-gradient(to top, rgba(42,12,34,.92) 0%, rgba(42,12,34,.78) 38%, rgba(42,12,34,.25) 62%, transparent 78%); }
#s15 .mo-grande { text-shadow: 0 2px 18px rgba(30,8,24,.55); }