/* Uomo Tuttofare · «La cassetta di papà» · anteprima
   Space Grotesk + JetBrains Mono · Caveat solo sugli oggetti e nelle note a margine */
@layer base, motion;

:root {
  --rosso: #C8322B; --rosso-scuro: #9E241E; --grafite: #1D1E21; --crema: #F3ECDD; --carta: #FBF7EE;
  --giallo: #F2C230; --blu: #2F5D8A; --verde: #3E8E5A;
  --mono: "JetBrains Mono", ui-monospace, monospace; --mano: "Caveat", cursive;
  --mo-accento: #F2C230; --mo-scuro: #1D1E21; --mo-chiaro: #F3ECDD; --mo-secondo: #3E8E5A;
  --mo-allarme: #C8322B; --mo-cta: #C8322B; --mo-mono: "JetBrains Mono", ui-monospace, monospace; --mo-mano: "Caveat", cursive;
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { overflow-x: clip; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--carta); color: var(--grafite); font: 400 18px/1.55 "Space Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; height: auto; display: block; }
  h1, h2, p, ul, figure, blockquote, dl, dd { margin: 0; }
  a { color: inherit; }
  button { font: inherit; }
}

/* ── impaginazione ── */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; position: relative; }
.wrap.stretto { max-width: 820px; }
@media (min-width: 1100px) {
  .wrap { padding-right: 320px; max-width: 1400px; }
  .wrap.stretto { max-width: 1140px; }
}
.scena { position: relative; padding: 96px 0; overflow: hidden; }
.tinta-carta { background: var(--carta); }
.tinta-crema { background: var(--crema); }
.tinta-grafite { background: #26272B; color: var(--crema); }
.due-col { display: grid; gap: 34px; }
@media (min-width: 900px) { .due-col { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } .due-col.centrato { align-items: center; grid-template-columns: 280px minmax(0, 1fr); } }
.centro { text-align: center; }
.stretto .centro, .titolo.centro, .sub.centro { margin-left: auto; margin-right: auto; }

/* ── testo ── */
.titolo { font-size: clamp(32px, 7.6vw, 60px); font-weight: 700; line-height: 1.03; letter-spacing: -.03em; max-width: 20ch; }
.titolo.grande { font-size: clamp(34px, 8.6vw, 72px); max-width: 18ch; margin: 64px 0 34px; }
.sub { margin-top: 20px; font-size: clamp(20px, 4.8vw, 26px); font-weight: 500; line-height: 1.4; max-width: 44ch; }
.testo { margin-top: 26px; font-size: 19px; line-height: 1.6; max-width: 60ch; }
.testo p + p { margin-top: 14px; }
.chiaro { color: var(--crema); }
.c-rosso { color: var(--rosso); } .c-giallo { color: var(--giallo); } .c-blu { color: var(--blu); }
.tinta-grafite .c-rosso, .foto-scena .c-rosso { color: #FF7A6E; }
.rosso { color: var(--rosso); } .verde { color: var(--verde); }
.num { font-family: var(--mono); font-weight: 800; font-size: clamp(30px, 8vw, 46px); line-height: 1; }
.gigante { display: block; font-family: var(--mono); font-weight: 800; font-size: clamp(68px, 19vw, 132px); line-height: .95; letter-spacing: -.05em; color: var(--giallo); }
.nota-mano { font-family: var(--mano); font-weight: 700; font-size: 27px; line-height: 1.1; color: var(--rosso); transform: rotate(-3deg); }
.foto-scena .nota-mano, .tinta-grafite .nota-mano { color: var(--giallo); }
mark.ev { color: inherit; background: linear-gradient(var(--giallo), var(--giallo)) no-repeat 0 85% / 0% 42%; padding: 0 .12em; border-radius: 3px; transition: background-size .9s cubic-bezier(.3, .8, .3, 1), color .5s; }
mark.ev.acceso { background-size: 100% 42%; }
.foto-scena mark.ev.acceso, .tinta-grafite mark.ev.acceso { background-size: 100% 100%; color: var(--grafite); }
.frase-gigante { font-size: clamp(48px, 13vw, 124px); font-weight: 700; line-height: .95; letter-spacing: -.045em; max-width: 12ch; }

/* ── bottoni ── */
.btn { display: inline-block; background: var(--rosso); color: #fff; text-decoration: none; font-weight: 700; font-size: 19px; padding: 18px 28px; border-radius: 12px; box-shadow: 0 6px 0 var(--rosso-scuro), 0 14px 30px -10px rgba(0,0,0,.45); transition-property: transform, box-shadow; transition-duration: .15s; }
.btn::after { content: " →"; }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--rosso-scuro); }
.cta-blocco { margin-top: 30px; }
.cta-riga { margin-top: 14px; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: rgba(243,236,221,.85); }
.cta-riga.scuro { color: #555; text-align: center; }
p.centro { margin-top: 44px; }

/* ── foto di sfondo che respirano ── */
.foto-scena { min-height: 100dvh; display: grid; align-items: center; background: var(--grafite); color: var(--crema); }
.fondo { position: absolute; inset: 0; overflow: hidden; }
.fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .34; animation: respiro 26s ease-in-out infinite alternate; }
.fondo::after { content: ""; position: absolute; inset: 0; }
.velo-sx::after { background: linear-gradient(90deg, rgba(29,30,33,.88) 0%, rgba(29,30,33,.5) 55%, rgba(29,30,33,.15) 100%); }
.velo-basso::after { background: linear-gradient(0deg, rgba(29,30,33,.92) 0%, rgba(29,30,33,.5) 60%, rgba(29,30,33,.25) 100%); }
@media (max-aspect-ratio: 3/4) { .velo-sx::after { background: linear-gradient(180deg, rgba(29,30,33,.9) 0%, rgba(29,30,33,.55) 60%, rgba(29,30,33,.3) 100%); } }
@keyframes respiro { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }

/* ── apertura · la parete di papà ── */
.apertura { min-height: 100dvh; display: grid; align-items: start; padding: 74px 0 60px; background: #1F2023; color: var(--crema); }
@media (min-width: 900px) { .apertura { align-items: center; padding: 96px 0; } }
.parete-fondo { position: absolute; inset: 0; overflow: hidden; background-color: #222327; background-image: radial-gradient(circle, #121315 2.2px, transparent 2.8px); background-size: 24px 24px; }
.parete-fondo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, transparent 30%, rgba(18,19,21,.85) 100%); }
.parete-luce { position: absolute; left: -10vmax; top: -20vmax; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient(circle, rgba(242,194,48,.13), transparent 62%); animation: lampada 16s ease-in-out infinite alternate; }
@keyframes lampada { to { transform: translate(55vw, 30vh); } }
.apertura-griglia { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .apertura-griglia { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 50px; } }
@media (min-width: 1100px) { .apertura .wrap { padding-right: 22px; max-width: 1240px; } }
.headline { display: grid; gap: 10px; max-width: 15ch; font-weight: 500; }
@media (min-width: 900px) { .headline { max-width: 790px; } .h-due { font-size: clamp(54px, 5.8vw, 84px); } }
.h-uno, .h-tre { font-size: clamp(22px, 5.8vw, 34px); line-height: 1.2; letter-spacing: -.015em; }
.h-uno b { color: var(--giallo); font-weight: 700; }
.h-due { font-size: clamp(44px, 12.4vw, 100px); font-weight: 700; line-height: .95; letter-spacing: -.045em; color: #fff; }
.sott-mano { position: relative; color: var(--giallo); white-space: nowrap; }
.sott-mano svg { position: absolute; left: 0; right: 0; bottom: -.02em; width: 100%; height: .16em; overflow: visible; }
.h-tre { margin-top: 10px; }
.sott-mano path, .linea-rossa path { fill: none; stroke: var(--rosso); stroke-width: 5; stroke-linecap: round; }
.da-disegnare path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.da-disegnare.disegnato path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease-out .4s; }
.apertura mark.ev { font-weight: 700; }
.apertura mark.ev.acceso { background-size: 100% 100%; color: var(--grafite); }

/* il pannello forato con le sagome dipinte */
.parete { position: relative; width: 100%; max-width: 430px; margin: 0 auto 26px; padding: 18px; background-color: #B5895A; background-image: radial-gradient(circle, #3A2A1A 2.3px, transparent 2.9px), linear-gradient(160deg, rgba(255,255,255,.12), rgba(0,0,0,.18)); background-size: 18px 18px, 100% 100%; border-radius: 6px; box-shadow: 0 0 0 8px #8B6539, 0 40px 70px -20px rgba(0,0,0,.8); transition: transform .4s ease-out; }
.parete-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pt-sagoma { fill: none; stroke: #F3ECDD; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.pt-attrezzo { fill: none; stroke: var(--grafite); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 0; filter: drop-shadow(1.5px 2px 0 rgba(0,0,0,.35)); cursor: pointer; }
.pt:nth-child(3n+2) .pt-attrezzo { stroke: var(--rosso); }
.pt:nth-child(4n) .pt-attrezzo { stroke: #2F5D8A; }
.parete.vivo .pt-attrezzo { animation: torna .8s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i) * 150ms + .4s); }
@keyframes torna { from { transform: translateY(-34px) rotate(-16deg); opacity: 0; } 70% { opacity: 1; } to { transform: none; opacity: 1; } }
.pt.scuoti .pt-attrezzo { animation: scuoti .9s ease-out; }
@keyframes scuoti { 0% { transform: rotate(0); } 25% { transform: rotate(9deg); } 50% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
.parete-nota { position: absolute; left: 6px; bottom: -40px; font-size: 28px; color: var(--giallo); }
.parete-nome { position: absolute; right: 14px; bottom: 12px; padding: 3px 9px; background: var(--grafite); color: var(--giallo); font: 600 12px var(--mono); border-radius: 4px; text-transform: uppercase; }
.parete-nome:empty { display: none; }
.polaroid.appesa { position: absolute; right: 4px; top: -30px; width: 104px; padding: 7px 7px 4px; transform: rotate(7deg); z-index: 2; }
.polaroid.appesa figcaption { font-size: 17px; }
.molletta { position: absolute; left: 50%; top: -16px; width: 14px; height: 36px; margin-left: -7px; background: linear-gradient(90deg, #D9B47A, #B68E55); border-radius: 3px; box-shadow: 0 2px 3px rgba(0,0,0,.3); }
@media (min-width: 900px) { .polaroid.appesa { width: 140px; right: -70px; top: -44px; } }
@media (min-width: 1100px) { body.in-apertura .cassetta { opacity: 0; transform: translateY(-46%) translateX(40px); pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .parete-luce { animation: none; } }

/* ── la cassetta (oggetto-filo) ── */
.cassetta { display: none; }
@media (min-width: 1100px) {
  .cassetta { display: block; position: fixed; z-index: 40; right: 36px; top: 50%; width: 240px; transform: translateY(-46%); transition-property: opacity, transform; transition-duration: .5s; }
  body.pin-attivo .cassetta { opacity: 0; transform: translateY(-46%) translateX(40px); pointer-events: none; }
}
.cas-scena { position: relative; height: 176px; perspective: 800px; }
.cas-interno { position: absolute; inset: 0; background: #17181B; border: 4px solid var(--rosso-scuro); border-bottom: 0; border-radius: 12px 12px 0 0; padding: 10px 8px; }
.cas-griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; height: 100%; }
.att { display: grid; place-items: center; align-content: center; gap: 2px; color: #4C4E54; transition-property: color, transform; transition-duration: .4s; }
.att svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.att span { font: 600 7.5px/1.1 var(--mono); text-align: center; text-transform: uppercase; letter-spacing: .02em; }
.att.acceso { color: var(--giallo); }
.att.nuovo { animation: pop .7s cubic-bezier(.3, 1.6, .4, 1); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.cas-coperchio { position: absolute; inset: 0; background: linear-gradient(180deg, #D8443B, var(--rosso) 40%, var(--rosso-scuro)); border-radius: 12px 12px 0 0; transform-origin: 50% 0; transform: rotateX(calc(var(--ap, 0) * -112deg)); transition: transform 1.1s cubic-bezier(.5, .1, .2, 1); box-shadow: inset 0 -8px 0 rgba(0,0,0,.18); }
.cas-maniglia { position: absolute; left: 50%; top: -16px; width: 96px; height: 20px; margin-left: -48px; border: 6px solid #2A2B2F; border-bottom: 0; border-radius: 12px 12px 0 0; }
.cas-corpo { position: relative; height: 92px; background: linear-gradient(180deg, var(--rosso), var(--rosso-scuro)); border-radius: 0 0 14px 14px; display: grid; place-items: center; box-shadow: 0 22px 40px -18px rgba(0,0,0,.55); }
.cas-chiusura { position: absolute; top: -4px; left: 50%; width: 30px; height: 12px; margin-left: -15px; background: #B9BCC2; border-radius: 0 0 6px 6px; }
.cas-nastro { position: relative; min-width: 168px; max-width: 214px; padding: 6px 12px; background: #EFE3C4; color: var(--grafite); text-align: center; font: 700 22px/1.05 var(--mano); transform: rotate(-2deg); box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.cas-nastro.gira { animation: gira .6s ease-in-out; }
@keyframes gira { 0% { transform: rotate(-2deg) rotateX(0); } 50% { transform: rotate(-2deg) rotateX(90deg); } 100% { transform: rotate(-2deg) rotateX(0); } }
.cas-barra { position: absolute; left: 6px; right: 6px; top: 30%; width: calc(100% - 12px); height: 40%; overflow: visible; pointer-events: none; }
.cas-barra path { fill: none; stroke: var(--rosso); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s ease-out; }
.cassetta.mia .cas-barra path { stroke-dashoffset: 0; }
.cas-mia { display: block; font: 700 34px/1 var(--mano); color: var(--rosso); transform: rotate(-4deg); margin-top: 4px; }
.cas-conta { margin: 14px auto 0; width: max-content; padding: 4px 12px; background: var(--carta); border-radius: 999px; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.cas-conta b { font-size: 16px; color: var(--rosso); }

/* la fascia sul telefono */
.fascia { position: fixed; z-index: 45; top: 0; left: 0; right: 0; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--grafite); color: var(--crema); border-bottom: 3px solid var(--rosso); transform: translateY(-110%); transition: transform .45s ease; }
.fascia.vis { transform: none; }
@media (min-width: 1100px) { .fascia { display: none; } }
.fa-box { position: relative; flex: none; width: 30px; height: 20px; margin-top: 6px; background: var(--rosso); border-radius: 3px 3px 5px 5px; }
.fa-box i { position: absolute; left: 7px; right: 7px; top: -6px; height: 6px; border: 2px solid #B9BCC2; border-bottom: 0; border-radius: 4px 4px 0 0; }
.fa-att { flex: 1; min-width: 0; font: 700 21px/1 var(--mano); color: var(--giallo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-att.gira { animation: gira .6s ease-in-out; }
.fa-n { font: 600 12px var(--mono); }
.fa-n b { font-size: 16px; color: var(--giallo); }

/* ── scena 2: guida e testimonianze ── */
.prodotto { display: grid; gap: 26px; align-items: center; }
@media (min-width: 760px) { .prodotto { grid-template-columns: auto minmax(0, 1fr); gap: 40px; } }
.libro { position: relative; width: 168px; height: 232px; perspective: 900px; margin: 0 auto; }
.libro-copertina { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 16px 14px; background: linear-gradient(160deg, #D8443B, var(--rosso) 45%, var(--rosso-scuro)); color: var(--crema); border-radius: 3px 8px 8px 3px; transform: rotateY(-20deg); transform-origin: 0 50%; box-shadow: 18px 22px 30px -10px rgba(0,0,0,.45), inset 6px 0 0 rgba(0,0,0,.18); animation: libro 6s ease-in-out infinite alternate; }
@keyframes libro { to { transform: rotateY(-8deg); } }
.lc-sopra { font: 600 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--giallo); }
.lc-titolo { font-weight: 700; font-size: 34px; line-height: .86; letter-spacing: -.04em; }
.lc-sotto { font-size: 11px; line-height: 1.3; font-weight: 500; }
.lc-cassetta { width: 44px; height: 24px; background: var(--grafite); border-radius: 3px 3px 6px 6px; position: relative; }
.lc-cassetta::before { content: ""; position: absolute; left: 11px; right: 11px; top: -7px; height: 7px; border: 2px solid var(--giallo); border-bottom: 0; border-radius: 4px 4px 0 0; }
.libro-dorso { position: absolute; left: -10px; top: 4px; bottom: 4px; width: 12px; background: #7D1B17; border-radius: 3px 0 0 3px; }
.prodotto-riga { font-size: clamp(20px, 4.6vw, 25px); line-height: 1.45; max-width: 40ch; }
.testimonianze { display: grid; gap: 18px; }
@media (min-width: 820px) { .testimonianze { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.testim { background: #fff; border: 1px solid #E6DECB; border-radius: 18px; padding: 20px; display: grid; gap: 14px; align-content: start; box-shadow: 0 10px 30px -18px rgba(0,0,0,.3); }
.testim header { display: flex; gap: 12px; align-items: center; }
.testim header img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.testim header p { display: grid; line-height: 1.25; }
.testim header span { font: 500 13px var(--mono); color: #7A7365; }
.testim blockquote { font-size: 17px; line-height: 1.55; }
.scontrino-mini { font: 500 13px/1.5 var(--mono); padding: 10px 12px; background: var(--carta); border-top: 2px dashed #CFC6B0; display: grid; gap: 2px; }
.scontrino-mini p { display: flex; justify-content: space-between; gap: 10px; }
.scontrino-mini b { font-weight: 800; }

/* ── scena 3: chat ── */
.chat-box { position: relative; background: rgba(251,247,238,.97); color: var(--grafite); border-radius: 24px; padding: 16px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); max-width: 440px; }
.chat-testa { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #E3DAC6; }
.chat-testa span:last-child { display: grid; line-height: 1.2; }
.chat-testa small { font: 500 11px var(--mono); color: #8A8272; }
.chat-av { width: 38px; height: 38px; border-radius: 50%; background: var(--crema); display: grid; place-items: center; font-size: 20px; }
[data-motion="messaggi-chat"].chat { margin-top: 12px; padding: 14px 10px; gap: 10px; max-width: none; }
[data-motion="messaggi-chat"].chat .mo-bolla { font-size: 17px; font-weight: 600; }
[data-motion="messaggi-chat"].chat .mo-msg.io { justify-items: end; }
[data-motion="messaggi-chat"].chat .mo-msg.io .mo-bolla { background: #D9F0D0; }
[data-motion="messaggi-chat"].chat .mo-nota { font: 500 11px var(--mono); color: #8A8272; }
.nota-chat { position: absolute; right: 10px; bottom: -22px; transform: rotate(-6deg); color: var(--giallo); text-shadow: 0 2px 8px rgba(0,0,0,.6); font-size: 30px; }

/* ── scena 4: lista del sabato ── */
.lista-griglia { margin-top: 40px; display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .lista-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lista-griglia .polaroid { grid-column: 1 / -1; justify-self: end; margin-top: -30px; } }
.foglietto { position: relative; background: #FFFDF4 repeating-linear-gradient(180deg, transparent 0 37px, #DCE6F0 37px 38px); padding: 34px 22px 22px; border-radius: 4px; transform: rotate(-1.4deg); box-shadow: 0 18px 30px -16px rgba(0,0,0,.35); display: grid; gap: 4px; }
.calamita { position: absolute; top: -12px; left: 50%; width: 42px; height: 24px; margin-left: -21px; background: var(--blu); border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,.25); }
.fo-titolo { font: 700 30px/1.2 var(--mano); color: var(--blu); }
.foglietto label { display: flex; gap: 12px; align-items: center; font: 600 25px/1.4 var(--mano); cursor: pointer; }
.foglietto input, .garage input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 2.5px solid var(--grafite); border-radius: 5px; background: #fff; display: grid; place-items: center; cursor: pointer; }
.foglietto input:checked { background: var(--rosso); border-color: var(--rosso); }
.foglietto input:checked::after { content: "!"; color: #fff; font: 800 15px var(--mono); }
.foglietto input:checked + span { color: var(--rosso); }
.conto { background: var(--grafite); color: var(--crema); border-radius: 20px; padding: 24px 22px; display: grid; gap: 18px; }
.uscita { display: grid; gap: 8px; font-weight: 600; }
.uscita-riga { display: flex; gap: 14px; align-items: center; }
.uscita input { flex: 1; accent-color: var(--giallo); }
.uscita output { font: 800 20px var(--mono); color: var(--giallo); min-width: 70px; text-align: right; }
.conto-righe { display: grid; gap: 10px; border-top: 1px dashed rgba(243,236,221,.3); padding-top: 16px; }
.conto-righe p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.conto-righe .rosso { color: #FF7A6E; } .conto-righe .verde { color: #7FD39A; }
.conto-tasca { border-top: 1px dashed rgba(243,236,221,.3); padding-top: 14px; }
.conto-tasca > span { font: 600 13px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.polaroid { background: #fff; padding: 10px 10px 8px; box-shadow: 0 16px 30px -14px rgba(0,0,0,.45); transform: rotate(2.5deg); max-width: 230px; }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid figcaption { margin-top: 6px; text-align: center; font-size: 24px; color: var(--grafite); transform: none; }
.polaroid.storta { transform: rotate(-3deg); }
.foto-scena .polaroid figcaption, .tinta-grafite .polaroid figcaption { color: var(--grafite); }

/* ── scena 6: il video che si ferma ── */
.esce { margin-top: 24px; font-size: clamp(21px, 4.8vw, 26px); font-weight: 600; max-width: 34ch; }
.player-zona { padding: 10px 30px 40px; }
.player { position: relative; max-width: 330px; margin: 0 auto; background: #111; border-radius: 16px; padding: 8px 8px 12px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); }
.pl-schermo { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #000; }
.pl-schermo img { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.pl-sotto { position: absolute; left: 10px; right: 10px; bottom: 12px; padding: 6px 8px; background: rgba(0,0,0,.75); color: #fff; font-size: 15px; line-height: 1.35; text-align: center; border-radius: 4px; min-height: 2.9em; }
.pl-pausa { position: absolute; inset: 0; display: grid; place-items: center; font-size: 54px; color: #fff; opacity: 0; transition: opacity .3s; }
.player.fermo .pl-pausa { opacity: .9; }
.pl-barra { margin: 10px 4px 0; height: 5px; background: #444; border-radius: 3px; overflow: hidden; }
.pl-avanz { display: block; height: 100%; width: 100%; background: #E43B32; transform-origin: 0 50%; transform: scaleX(var(--pl, 0)); }
.pl-tempo { margin: 6px 4px 0; font: 500 11px var(--mono); color: #aaa; }
.dom { position: absolute; font-size: 28px; background: var(--carta); padding: 0 8px; border-radius: 6px; opacity: 0; transition-property: opacity, translate; transition-duration: .4s; translate: 0 8px; white-space: nowrap; }
.player.fermo .dom { opacity: 1; translate: 0 0; }
.d1 { top: 6%; left: -26px; } .d2 { top: 34%; right: -30px; transform: rotate(4deg); transition-delay: .35s; } .d3 { bottom: 24%; left: -22px; transition-delay: .7s; }

/* ── scena 8: la mappa ── */
#s08 .mo-sfondo { margin-top: -96px; padding-top: 96px; }
#s08 .mo-testo.wrap { padding-left: 22px; }
.mappa-griglia { display: grid; gap: 30px; margin-top: 40px; align-items: start; }
@media (min-width: 900px) { .mappa-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mappa-griglia .polaroid { grid-column: 2; justify-self: end; margin-top: -10px; } }
.onda-sotto { margin-top: 12px; font-size: 18px; text-align: center; }
.stanze { display: flex; flex-wrap: wrap; gap: 8px; }
.stanze button { border: 2px solid var(--grafite); background: transparent; border-radius: 999px; padding: 8px 13px; font: 600 13px var(--mono); cursor: pointer; color: var(--grafite); }
.stanze button i { font-style: normal; color: var(--rosso); margin-left: 4px; }
.stanze button.on { background: var(--grafite); color: var(--crema); }
.stanze button.on i { color: var(--giallo); }
.scheda { margin-top: 16px; background: #fff; border: 2.5px solid var(--grafite); border-radius: 14px; overflow: hidden; box-shadow: 6px 6px 0 var(--grafite); }
.sc-testa { display: flex; justify-content: space-between; padding: 10px 16px; background: var(--giallo); font: 700 13px var(--mono); letter-spacing: .06em; }
.scheda dl { display: grid; grid-template-columns: minmax(0, 1fr); padding: 6px 16px 14px; }
.scheda dt { margin-top: 10px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #8A8272; }
.scheda dd { font-size: 19px; font-weight: 600; transition: opacity .3s; }
.scheda dd.chiuso { font: 600 15px var(--mono); color: #8A8272; background: repeating-linear-gradient(45deg, #F4F1EA 0 8px, #EAE5DA 8px 16px); padding: 6px 10px; border-radius: 6px; margin-top: 4px; }
.scheda dd.mono { font-family: var(--mono); color: var(--verde); }
.scheda.cambia dd { opacity: .1; }
.nota-scheda { margin-top: 12px; font-size: 24px; }

/* ── scena 9: il quadro e la Linea Rossa ── */
.quadro-griglia { margin-top: 40px; display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) { .quadro-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .quadro-griglia .polaroid { grid-column: 1; justify-self: start; margin-top: -6px; } }
.quadro { background: #E9E6DF; border: 3px solid #B9B4A8; border-radius: 16px; padding: 16px; box-shadow: inset 0 0 0 6px #F3F1EC; }
.qd-testa { font: 700 12px var(--mono); letter-spacing: .14em; color: #77716A; }
.qd-file { margin-top: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lev { position: relative; height: 118px; background: #fff; border: 1px solid #CFC9BC; border-radius: 8px; cursor: pointer; display: grid; justify-items: center; padding: 8px 2px; }
.lev-l { font: 700 9px/1.1 var(--mono); text-align: center; color: #555; }
.lev-m { width: 22px; height: 34px; margin-top: 10px; background: var(--grafite); border-radius: 5px; transform: translateY(-6px); transition: transform .3s cubic-bezier(.3, 1.4, .4, 1); }
.lev.giu .lev-m { transform: translateY(18px); }
.spia { position: absolute; bottom: 8px; width: 9px; height: 9px; border-radius: 50%; background: #3BD16F; box-shadow: 0 0 8px #3BD16F; transition: background .3s, box-shadow .3s; }
.lev.giu .spia { background: #999; box-shadow: none; }
.lev.nastro { background: repeating-linear-gradient(45deg, var(--rosso) 0 9px, #fff 9px 18px); }
.lev.nastro .lev-l { background: #fff; padding: 2px; border-radius: 3px; color: var(--rosso); }
.lev.nastro::after { content: "QUI NO"; position: absolute; left: -2px; right: -2px; top: 54%; background: var(--rosso); color: #fff; font: 800 10px var(--mono); text-align: center; padding: 2px 0; transform: rotate(-8deg); }
.qd-msg { margin-top: 14px; min-height: 3.2em; font: 600 14px/1.45 var(--mono); }
.qd-msg.ok { color: var(--verde); } .qd-msg.no { color: var(--rosso); }
.lev:focus-visible, .stanze button:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.colonne-linea { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 8px; }
.cl-testa { font: 800 13px var(--mono); letter-spacing: .08em; }
.cl-testa.verde { color: var(--verde); } .cl-testa.rosso { color: var(--rosso); }
.colonne-linea ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: 16px; line-height: 1.3; }
.colonne-linea div:first-child li::before { content: "✓ "; color: var(--verde); font-weight: 800; }
.colonne-linea div:last-child li::before { content: "✕ "; color: var(--rosso); font-weight: 800; }
.linea-rossa { width: 24px; height: 100%; min-height: 220px; overflow: visible; }

/* ── scena 10: il garage ── */
.garage { background: #fff; border: 2.5px solid var(--grafite); border-radius: 18px; padding: 20px; box-shadow: 6px 6px 0 var(--grafite); }
.ga-testa { font-weight: 700; font-size: 20px; }
.ga-griglia { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.garage label { display: flex; gap: 10px; align-items: center; border: 2px solid #E3DAC6; border-radius: 10px; padding: 9px 10px; font-size: 15px; line-height: 1.2; cursor: pointer; transition: background .25s, border-color .25s; }
.garage label:has(input:checked) { background: #E7F2EA; border-color: var(--verde); }
.garage input { width: 20px; height: 20px; }
.garage input:checked { background: var(--verde); border-color: var(--verde); }
.garage input:checked::after { content: "✓"; color: #fff; font: 800 13px var(--mono); }
.ga-esito { margin-top: 18px; font-size: 20px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ga-esito .num { font-size: 34px; }
#ga-nota { margin-top: 6px; font-size: 25px; }
#s10 .polaroid { margin-top: 30px; }

/* ── scena 11: sogno ── */
.gigante-t { font-size: clamp(46px, 12vw, 104px); letter-spacing: -.045em; }
#s11 .due-col { margin-top: 40px; }
.bullet { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.bullet li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px; background: rgba(251,247,238,.96); color: var(--grafite); border-radius: 16px; padding: 16px 16px 16px 12px; border-left: 6px solid var(--giallo); }
.bullet .em { font-size: 30px; line-height: 1; }
.bu-t { font-weight: 700; font-size: 19px; line-height: 1.25; margin-bottom: 4px; }
.bullet p:not(.bu-t) { font-size: 16px; line-height: 1.5; }

/* ── scena 12: i vassoi ── */
.vassoi { margin-top: 40px; display: grid; gap: 12px; max-width: 720px; }
.vassoio { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center; padding: 16px 18px; background: linear-gradient(180deg, #D23A32, var(--rosso-scuro)); color: var(--crema); border-radius: 10px; border-bottom: 7px solid #6E1814; box-shadow: 0 14px 24px -14px rgba(0,0,0,.6); }
.va-n { font: 800 30px var(--mono); color: var(--giallo); }
.va-t { font-weight: 700; font-size: 22px; line-height: 1.15; }
.vassoio p:not(.va-t) { font-size: 16px; line-height: 1.45; opacity: .92; }
.vassoio:nth-child(2) { margin-left: 14px; } .vassoio:nth-child(3) { margin-left: 28px; } .vassoio:nth-child(4) { margin-left: 14px; }
@media (max-width: 520px) { .vassoio:nth-child(n) { margin-left: 0; } }

/* ── scena 13: i cartellini ── */
.gancio-riga { margin: 40px 0 0; height: 8px; border-radius: 4px; background: linear-gradient(180deg, #8A8D93, #4A4C51); }
.cartellini { display: grid; gap: 22px; }
@media (min-width: 820px) { .cartellini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cartellino { position: relative; margin-top: 18px; background: #E8D7B0; padding: 40px 20px 22px; clip-path: polygon(14% 0, 86% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); transform-origin: 50% -18px; animation: dondola 4.2s ease-in-out infinite alternate; box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); }
.cartellino:nth-child(2) { animation-delay: -1.4s; } .cartellino:nth-child(3) { animation-delay: -2.6s; }
@keyframes dondola { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.foro { position: absolute; top: 12px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--carta); box-shadow: inset 0 0 0 3px #C8B587; }
.ca-n { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rosso); }
.ca-t { margin: 6px 0 8px; font: 700 34px/1 var(--mano); color: var(--grafite); }
.cartellino p:not(.ca-n):not(.ca-t) { font-size: 16px; line-height: 1.5; }
.ca-incl { display: inline-block; margin-top: 12px; border: 2px solid var(--verde); color: var(--verde); font: 800 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; transform: rotate(-4deg); }

/* ── offerta ── */
.confronto { margin: 34px auto 0; max-width: 560px; display: grid; gap: 12px; }
.confronto p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; font-weight: 600; }
.confronto span { grid-column: 1 / -1; font-size: 15px; }
.br { display: block; height: 18px; border-radius: 4px; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.3, .8, .3, 1); }
.br-lunga { width: 100%; background: var(--rosso); }
.br-corta { width: 27%; background: var(--verde); transition-delay: .3s; }
.confronto.acceso .br { transform: scaleX(1); }
.confronto b { font: 800 22px var(--mono); }
.box-offerta { margin: 34px auto 0; max-width: 560px; background: #fff; border: 3px solid var(--grafite); border-radius: 24px; padding: 26px 22px; box-shadow: 8px 8px 0 var(--grafite); display: grid; gap: 22px; }
.incluso { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 17px; }
.incluso li { padding-left: 30px; position: relative; }
.incluso li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: #fff; font: 800 13px/22px var(--mono); text-align: center; }
.copie { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; background: #FFF4D6; border-radius: 14px; font-size: 16px; }
.copie [data-motion="orologio-palette"] { font-size: 54px; }

/* ── garanzia, domande, congedo ── */
#s15 [data-motion="timbro"] { max-width: 260px; margin: 0 auto; }
.mano-congedo { margin-top: 26px; max-width: 640px; }
.mano-congedo .mo-sopra { color: var(--crema); }
.mano-congedo .mo-mano { color: var(--giallo); }
.congedo .cta-blocco { margin-top: 34px; }

/* ── footer e barra ── */
.piede { background: var(--grafite); color: rgba(243,236,221,.8); text-align: center; font-size: 13px; line-height: 1.6; padding: 40px 22px 110px; display: grid; gap: 10px; }
.piede p:first-child { max-width: 62ch; margin: 0 auto; }
.piede-link a { color: var(--crema); }
@media (min-width: 900px) { .piede { padding-bottom: 40px; } }
.barra-acquisto { position: fixed; z-index: 44; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--grafite); color: var(--crema); border-top: 3px solid var(--rosso); }
.barra-acquisto[hidden] { display: none; }
.barra-acquisto-prezzo { font: 800 18px var(--mono); }
.barra-acquisto-prezzo s { font-size: 13px; opacity: .6; margin-right: 6px; }
.barra-acquisto .bottone { background: var(--rosso); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 18px; border-radius: 10px; font-size: 16px; }
@media (min-width: 900px) { .barra-acquisto { display: none !important; } }

/* ── pin a tutto schermo ── */
.scena-pin { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .fondo img, .libro-copertina, .cartellino { animation: none; }
  .cas-coperchio, .cas-nastro, .fascia { transition: none; }
}

/* la barra non copre mai le scene a schermo fermo né il footer legale */
body.pin-attivo .barra-acquisto, body.piede-in-vista .barra-acquisto { transform: translateY(110%); }
.barra-acquisto { transition-property: transform; transition-duration: .3s; }
/* le linee a mano non lasciano il puntino prima di disegnarsi */
.da-disegnare:not(.disegnato) path, .cassetta:not(.mia) .cas-barra path { opacity: 0; }

/* ── grafiche del cliente (06/10) ── */
.mockup-prodotto { margin: 0 auto; width: min(100%, 460px); }
.mockup-prodotto img { width: 100%; filter: drop-shadow(0 22px 26px rgba(0,0,0,.28)); }
@media (min-width: 760px) { .mockup-prodotto { width: 480px; } }
.dentro-griglia { display: grid; gap: 34px; margin-top: 40px; align-items: start; }
.dentro-griglia .vassoi { margin-top: 0; }
.copertina-dentro { width: min(62%, 240px); margin: 0 auto; transform: rotate(-3deg); }
.copertina-dentro img { width: 100%; border-radius: 4px 10px 10px 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 16px 22px 34px -12px rgba(0,0,0,.7); }
@media (min-width: 900px) { .dentro-griglia { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; } .copertina-dentro { width: 100%; position: sticky; top: 120px; } }
.ca-img { width: 100%; margin: 10px 0 4px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.22)); }
.box-offerta { grid-template-columns: minmax(0, 1fr); }
.bundle { width: min(100%, 340px); margin: -6px auto 0; filter: drop-shadow(0 16px 20px rgba(0,0,0,.22)); }
.piede-logo { width: 170px; margin: 0 auto 8px; }

/* sfondi di carta del cliente (righello, puntini, pannello forato): texture su un livello sotto il contenuto */
.sfondo-righello, .sfondo-righello-su { background: #F2E9D8; }
.sfondo-righello::before, .sfondo-righello-su::before, .sfondo-pannello::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sfondo-righello::before { background: url(../img/righello-giu.webp) left bottom / auto 30px repeat-x, url(../img/puntini-sx.webp) left top / 20px auto repeat-y; }
.sfondo-righello-su::before { background: url(../img/righello-su.webp) left top / auto 28px repeat-x, url(../img/puntini-dx.webp) right top / 20px auto repeat-y; }
@media (min-width: 900px) {
  .sfondo-righello::before { background-size: auto 42px, 28px auto; }
  .sfondo-righello-su::before { background-size: auto 40px, 28px auto; }
}
.sfondo-righello .wrap { padding-left: 34px; }
.sfondo-righello-su .wrap { padding-right: 34px; }
@media (min-width: 1100px) { .sfondo-righello-su .wrap { padding-right: 320px; } }
.sfondo-pannello { background: #F2E8D5; padding-top: calc(55vw + 24px); }
.sfondo-pannello::before { background: url(../img/sfondo-2.webp) center top / 100% auto no-repeat; }
@media (min-width: 760px) { .sfondo-pannello { padding-top: 280px; } .sfondo-pannello::before { background-size: 440px auto; background-repeat: repeat-x; } }

/* ── IL TETTO (06/10): testo grande, niente sotto i 16 px, aria ── */
.scena { padding: 104px 0; }
@media (min-width: 900px) { .scena { padding: 150px 0; } }
.fondo picture { position: absolute; inset: 0; display: block; animation: respiro 26s ease-in-out infinite alternate; }
.fondo img { position: absolute; inset: 0; animation: none; }
@media (prefers-reduced-motion: reduce) { .fondo picture { animation: none; } }
.sub { font-size: clamp(26px, 6.6vw, 32px); line-height: 1.3; max-width: 30ch; }
.prodotto-riga { font-size: clamp(26px, 6.6vw, 30px); line-height: 1.3; max-width: 30ch; }
.testim blockquote { font-size: 26px; line-height: 1.3; font-weight: 500; }
@media (min-width: 820px) { .testim blockquote { font-size: 23px; } }
.testim header span, .scontrino-mini { font-size: 16px; }
.bu-t { font-size: 26px; line-height: 1.2; margin-bottom: 0; }
.va-t { font-size: 26px; }
.cta-riga { font-size: 18px; line-height: 1.45; max-width: 640px; }
.cta-riga.scuro { margin-left: auto; margin-right: auto; }
[data-motion="messaggi-chat"].chat .mo-nota { font-size: 13px; }
.chat-testa small { font-size: 13px; }
.scheda dt { font-size: 16px; letter-spacing: .06em; }
.scheda dd.chiuso, .scheda dd.chiuso b { font-size: 16px; }
.stanze button { font-size: 16px; } .stanze button i { font-size: 16px; }
.qd-msg { font-size: 16px; }
.cl-testa { font-size: 16px; }
.pl-sotto { font-size: 16px; }
.ga-griglia, .ga-griglia span, .ga-griglia label { font-size: 16px; }
.confronto span { font-size: 16px; }
.mo-sotto, [data-motion="prezzo-rullo"] .mo-sotto { font-size: 16px; }
.ca-n, .ca-incl { font-size: 16px; }
.conto span, .conto-righe span, .conto-tasca span { font-size: 16px; }
@media (min-width: 900px) { #s07 .mo-frase { font-size: clamp(44px, 6.4vw, 92px); max-width: 1120px; } }
.polaroid.appesa .molletta { left: 22%; }
.fondo img { opacity: .5; }
@media (min-aspect-ratio: 3/4) { #s11 .fondo img { transform: scaleX(-1); } }

/* ── leggibilità (06/10): titolo bonus sotto il pannello, nota della chat dentro il riquadro, note del video fuori da faccia e sottotitolo ── */
.scena.sfondo-pannello { padding-top: calc(54.8vw + 72px); }
@media (min-width: 760px) { .scena.sfondo-pannello { padding-top: 340px; } }
@media (min-width: 900px) { .scena.sfondo-pannello { padding-top: 372px; } }
.foto-scena .nota-chat { position: static; display: block; margin: 10px 4px 0 auto; width: fit-content; transform: rotate(-4deg); color: var(--rosso); text-shadow: none; }
.d1 { top: -30px; left: -22px; }
.d2 { top: 44%; right: -30px; }
.d3 { top: 60%; bottom: auto; left: -22px; }
.player-zona { padding-top: 46px; }
#s05 .mo-testo { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { #s05 .mo-testo { padding-bottom: 140px; } }