/* ══════════ stile.css — Crescere Senza Plastica · preset dr-flynn ══════════
   La struttura di Flynn (card, pensieri inclinati, livelli, prove) col mondo del neonato:
   latte, salvia, corallo, burro e pastelli polverosi; Fraunces + DM Sans + Caveat. */
:root {
  --fondo: #fbf6ee; --testo: #1f2a24; --tenue: #4d5a52;
  --salvia: #2f4a3a; --salvia-m: #8fa98f; --corallo: #d9623b; --corallo-s: #b8462a; --burro: #f3d27a;
  --rosa: #f4d6d0; --azzurro: #d7e6ee; --salvia-c: #dde8d6; --pesca: #f7dcc4; --lilla: #e4dcf0;
  --accento: var(--corallo); --ris: #c24f2b; --evid: rgba(243, 210, 122, .85); --mano-colore: var(--corallo);
  --font-titolo: "Fraunces", Georgia, serif; --font-corpo: "DM Sans", system-ui, sans-serif;
  --corpo: 18.5px; --gutter: 20px;
  --bottone-fondo: var(--corallo); --bottone-testo: #fff;
}
body { background: var(--fondo); }
h2 { font: 800 clamp(2rem, 8.6vw, 3.4rem)/1.04 var(--font-titolo); letter-spacing: -.02em; }
h3 { font: 800 clamp(1.6rem, 6.6vw, 2.4rem)/1.1 var(--font-titolo); letter-spacing: -.015em; }
section { padding: 72px var(--gutter); max-width: 1120px; margin: 0 auto; position: relative; }
.testo { font-size: 1.12rem; margin-top: 18px; max-width: 36rem; }
.centro { text-align: center; margin-left: auto; margin-right: auto; }
.titolo-centro { text-align: center; max-width: 16ch; margin: 0 auto; }
.riga-centro { text-align: center; max-width: 30rem; margin: 16px auto 0; font-size: 1.15rem; }
.gigante { font-weight: 900; color: var(--testo); }
.gigante.centro { margin-top: 56px; max-width: 14ch; }
.piccolo-gigante { font-size: clamp(2rem, 9vw, 3.6rem); }
.giallo { color: var(--burro); }
.ris-chiaro { color: var(--burro); font-weight: 700; }
.sottolinea { position: relative; display: inline-block; }
.sottolinea::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .02em; height: .2em; background: var(--burro); z-index: -1; border-radius: 6px; transform: rotate(-1.5deg); }
.nota--chiara { color: var(--corallo); display: block; margin-top: 14px; }
mark { background-image: linear-gradient(var(--evid), var(--evid)); }
.bottone { box-shadow: 0 6px 0 var(--corallo-s); font-size: 1.12rem; letter-spacing: .01em; transition: transform .15s, box-shadow .15s; }
.bottone:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--corallo-s); }
.bottone--grande { min-height: 62px; width: 100%; max-width: 26rem; font-size: 1.2rem; margin-top: 18px; }
.bottone--piccolo { min-height: 40px; padding: 0 1em; font-size: .95rem; box-shadow: 0 4px 0 var(--corallo-s); }

/* occhielli (i chip gialli di Flynn) */
.occhiello { display: inline-block; font: 800 .82rem/1 var(--font-corpo); letter-spacing: .14em; text-transform: uppercase; padding: 9px 12px; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; margin-bottom: 16px; }
.occhiello--corallo { background: var(--corallo); color: #fff; }
.occhiello--burro { background: var(--burro); color: var(--salvia); }
.centro-blocco { display: table; margin: 0 auto 14px; }

/* testata */
.testata { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px var(--gutter); background: rgba(251,246,238,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(47,74,58,.1); }
.marchio { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 800 1.02rem/1 var(--font-titolo); color: var(--salvia); }
.marchio svg { width: 22px; height: 34px; }

/* ═════ APERTURA ═════ */
#apertura { padding-top: 18px; padding-bottom: 40px; }
.hero { text-align: center; max-width: 40rem; margin: 0 auto; }
.targhetta { display: inline-block; background: var(--salvia); color: #fff; font: 700 .95rem/1.25 var(--font-corpo); padding: 8px 14px; border-radius: 999px; }
.gancio { font: italic 600 1.08rem/1.3 var(--font-titolo); color: var(--tenue); margin: 18px auto 0; max-width: 18em; text-wrap: balance; }
#apertura h1 { font-family: var(--font-corpo); margin-top: 8px; line-height: 1.1; color: var(--testo); }
.h-verbo { display: block; font: 900 clamp(2.1rem, 8.8vw, 3.6rem)/1.18 var(--font-titolo); color: var(--salvia); letter-spacing: -.02em; }
.h-verbo::first-letter { text-transform: uppercase; }
.h-a { display: block; font-weight: 700; font-size: clamp(1.4rem, 6vw, 2.2rem); margin-top: 4px; }
.h-b { display: flex; align-items: center; justify-content: center; gap: .32em; font-weight: 700; font-size: clamp(1.4rem, 6vw, 2.2rem); margin-top: 2px; }
.sette { position: relative; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; font: 900 2.1em/1 var(--font-titolo); color: var(--corallo); }
.sette svg { position: absolute; left: -12%; top: -6%; width: 124%; height: 112%; overflow: visible; color: var(--corallo); }
.sette svg path { stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: cerchia .9s cubic-bezier(.6,.1,.2,1) .2s forwards; }
@keyframes cerchia { to { stroke-dashoffset: 0; } }
.h-pieni { display: block; font-weight: 600; font-size: clamp(1.15rem, 4.8vw, 1.6rem); color: var(--tenue); margin-top: 2px; }
.h-c { display: block; margin-top: 2px; }
.veleni { display: inline-block; white-space: nowrap; font: 900 clamp(1.95rem, 8.4vw, 3.4rem)/1.05 var(--font-titolo); color: var(--salvia); letter-spacing: -.015em; padding: 0 .12em; background: linear-gradient(var(--burro), var(--burro)) no-repeat 0 90% / 0% .48em; animation: stendi 1.1s cubic-bezier(.6,.1,.2,1) .9s forwards; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@keyframes stendi { to { background-size: 100% .48em; } }
@media (prefers-reduced-motion: reduce) { .sette svg path { stroke-dashoffset: 0; } .veleni { background-size: 100% .48em; } }
.perchi { font: 700 2rem/1 var(--font-mano); color: var(--corallo); margin-top: 6px; transform: rotate(-2deg); }
.promessa { margin: 22px auto 0; padding: 18px 8px 20px; border-radius: 24px; background: #fff; box-shadow: 0 18px 40px -24px rgba(47,74,58,.45); border: 2px solid var(--salvia-c); line-height: 1.05; max-width: 30rem; }
.pr-1 { display: block; font: 600 1.05rem/1.3 var(--font-corpo); color: var(--tenue); }
.pr-cresci { display: block; font: 900 clamp(2rem, 9vw, 3.4rem)/1.18 var(--font-titolo); color: var(--salvia); letter-spacing: .01em; }
.pr-sano { display: block; white-space: nowrap; font: 900 clamp(2.2rem, 10.2vw, 3.6rem)/1.18 var(--font-titolo); color: var(--corallo); letter-spacing: -.03em; margin: 8px 0 10px; }
.pr-senza { display: block; font: 700 1.2rem/1.3 var(--font-corpo); }
.pr-bib { display: block; font: 700 1.6rem/1.1 var(--font-mano); color: var(--salvia); margin-top: 4px; }
.hero .bottone { margin-top: 20px; width: 100%; max-width: 24rem; min-height: 60px; font-size: 1.18rem; }
.hero .rischio { font-size: 1rem; color: var(--tenue); }

.fasciatoio { margin: 26px auto 0; max-width: 560px; position: relative; }
.fasciatoio .scena { width: 100%; height: auto; }
.oggetti.dentro { --f: url(#polvere); --latte: url(#polvere); --f2: url(#polvere); --f3: url(#polvere); }
.fasciatoio figcaption { position: absolute; right: 4%; top: -4px; }

.prova { background: #fff; border-radius: 22px; padding: 22px 20px; box-shadow: 0 16px 40px -28px rgba(31,42,36,.5); border: 1px solid rgba(47,74,58,.08); }
.prova--prima { margin: 34px auto 0; max-width: 34rem; }
.prova-foto { height: 210px; border-radius: 16px; margin-bottom: 16px; }
.stelle { display: flex; gap: 3px; } .stelle svg { width: 22px; height: 22px; fill: #e9b52c; }
.prova-titolo { font: 800 1.35rem/1.15 var(--font-titolo); color: var(--salvia); margin: 10px 0 10px; }
.prova p { font-size: 1.05rem; }
.firma, .prova footer { margin-top: 14px; font-size: 1rem; color: var(--tenue); }
.firma b, .prova footer b { color: var(--testo); }

/* segnaposto foto: il posto della foto vera in build */
.foto-segnaposto { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #fff 0%, var(--pesca) 60%, var(--rosa) 100%); }
.foto-segnaposto svg { width: 34%; max-width: 120px; height: auto; opacity: .9; }
.foto--rosa { background: radial-gradient(120% 90% at 70% 20%, #fff 0%, var(--rosa) 70%); }
.foto--scura { background: radial-gradient(120% 90% at 50% 20%, #5d7a66 0%, #233a2d 100%); }
.foto--sogno { background: radial-gradient(120% 100% at 50% 10%, #fff8ea 0%, var(--burro) 55%, var(--pesca) 100%); }
.tag-foto { position: absolute; left: 10px; bottom: 10px; font: 600 .78rem/1.2 var(--font-corpo); background: rgba(255,255,255,.88); color: var(--salvia); padding: 5px 9px; border-radius: 8px; }

/* ═════ CARD (problema, verità, offerta, congedo) ═════ */
.card { border-radius: 26px; padding: 30px 22px; color: #fff; overflow: hidden; position: relative; }
.card--scura { background: var(--salvia); }
.card--salvia { background: #3f6a52; }
.card h2 { color: #fff; }
.card .testo { color: #f3efe6; }
.card .mano { --mano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 2, 80 9, 120 5 S 180 3, 198 6' fill='none' stroke='%23f3d27a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.card mark { color: #fff; --evid: rgba(217,98,59,.9); }

.palco-etichette { position: relative; margin-top: 26px; height: 330px; }
.palco-etichette .foto-segnaposto { position: absolute; inset: 0; border-radius: 18px; }
.etichetta { position: absolute; background: var(--corallo); color: #fff; font: 700 1.02rem/1 var(--font-corpo); padding: 10px 14px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); white-space: nowrap; }
.e1 { left: 4%; top: 8%; transform: rotate(-8deg); } .e2 { right: 3%; top: 22%; transform: rotate(7deg); }
.e3 { left: 8%; top: 44%; transform: rotate(5deg); } .e4 { right: 6%; top: 62%; transform: rotate(-6deg); }
.e5 { left: 18%; bottom: 6%; transform: rotate(-3deg); }

/* ═════ PENSIERI ═════ */
.pensieri { display: grid; gap: 18px; margin-top: 30px; }
.pensiero { border-radius: 20px; padding: 20px 20px 18px; box-shadow: 0 10px 24px -18px rgba(31,42,36,.6); }
.pensiero:nth-child(odd) { transform: rotate(-1.6deg); } .pensiero:nth-child(even) { transform: rotate(1.4deg); }
.p-rosa { background: var(--rosa); } .p-azzurro { background: var(--azzurro); } .p-burro { background: #f8e6ad; }
.p-salvia { background: var(--salvia-c); } .p-lilla { background: var(--lilla); } .p-pesca { background: var(--pesca); }
.pensiero-stato { font: 700 2rem/1 var(--font-mano); color: var(--salvia); padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1.5px solid rgba(47,74,58,.25); }
.frase { position: relative; padding-left: 30px; font-size: 1.08rem; line-height: 1.4; }
.frase + .frase { margin-top: 8px; }
.frase::before { content: ""; position: absolute; left: 2px; top: .3em; width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid var(--corallo); border-right-color: transparent; transform: rotate(-30deg); }

/* ═════ VERITÀ: i sette oggetti sotto la lente ═════ */
.sette-oggetti { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 26px; }
.ogg { background: #fbf6ee; border-radius: 18px; padding: 14px 10px 12px; text-align: center; color: var(--testo); }
.ogg--largo { grid-column: 1 / -1; }
.ogg--largo svg { max-width: 120px; }
.ogg svg { width: 100%; max-width: 92px; height: auto; margin: 0 auto; overflow: visible; }
.ogg .dentro { --f: url(#polvere); --latte: url(#polvere); --f2: url(#polvere); --f3: url(#polvere); }
.montatura { fill: none; stroke: var(--salvia); stroke-width: 5; }
.ogg-nome { display: block; font: 700 1.02rem/1.2 var(--font-corpo); margin-top: 8px; }
.chiuso { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font: 600 .86rem/1 var(--font-corpo); color: var(--corallo); }
.chiuso svg { width: 13px; height: 13px; }
.card .nota--chiara { color: var(--burro); text-align: center; }

/* ═════ NEMICO + calcolatore ═════ */
#nemico h2 { max-width: 15ch; }
.calcolatore { margin-top: 28px; background: #fff; border-radius: 24px; padding: 22px 18px; border: 2px dashed rgba(47,74,58,.25); }
.calc-domanda { font: 700 1.5rem/1.1 var(--font-mano); color: var(--salvia); font-size: 1.9rem; }
.flaconi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.flaconi button { border: 2px solid var(--salvia-m); background: #fff; color: var(--salvia); border-radius: 999px; padding: 9px 13px; font: 600 1rem/1 var(--font-corpo); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.flaconi button.preso { background: var(--salvia); border-color: var(--salvia); color: #fff; transform: rotate(-1.5deg); }
.calc-esito { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.calc-esito > div { background: var(--rosa); border-radius: 16px; padding: 14px 12px; }
.calc-esito > div + div { background: #f8e6ad; }
.calc-num { display: block; white-space: nowrap; font: 900 clamp(1.6rem, 7.4vw, 2.3rem)/1 var(--font-titolo); color: var(--corallo-s); }
.calc-lab { display: block; font-size: .98rem; line-height: 1.25; margin-top: 4px; }
.calc-piede { font-size: .9rem; color: var(--tenue); margin-top: 10px; }
.chiusa { font: 700 1.3rem/1.3 var(--font-corpo); margin-top: 26px; max-width: 30rem; }

/* ═════ PRODOTTO ═════ */
#prodotto { padding-left: 0; padding-right: 0; max-width: none; }
.pausa { text-align: center; padding: 0 var(--gutter) 56px; }
.pausa .gigante { position: relative; display: inline-block; text-transform: uppercase; font-size: clamp(2.6rem, 13vw, 6rem); letter-spacing: -.03em; }
.faccina { position: absolute; right: -.5em; top: -.35em; font-size: .7em; color: var(--salvia); background: var(--burro); border-radius: 50%; width: 1.1em; height: 1.1em; line-height: 1.1em; transform: rotate(12deg); }
.striscia-scorre { background: var(--corallo); color: #fff; overflow: hidden; padding: 16px 0; }
.striscia-scorre > div { display: flex; width: max-content; animation: scorre 18s linear infinite; }
.striscia-scorre span { font: 800 1.05rem/1 var(--font-corpo); letter-spacing: .16em; padding: 0 28px; }
@keyframes scorre { to { transform: translateX(-50%); } }
.blocco-prodotto { background: var(--salvia); color: #fff; text-align: center; padding: 56px var(--gutter) 64px; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0); background-size: 22px 22px; }
.domanda { color: var(--burro); font-size: clamp(1.5rem, 6.4vw, 2.2rem); }
.nome-prodotto { font: 900 clamp(2.9rem, 14vw, 6.4rem)/.95 var(--font-titolo); color: #fff; margin-top: 12px; letter-spacing: -.02em; }
.libro { margin: 34px auto 0; perspective: 900px; width: 230px; }
.copertina { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; border-radius: 6px 14px 14px 6px; padding: 22px 16px; box-shadow: inset 8px 0 0 rgba(0,0,0,.12), 0 30px 50px -20px rgba(0,0,0,.55); color: var(--salvia); }
.copertina--guida { background: var(--fondo); width: 230px; min-height: 320px; transform: rotateY(-14deg) rotate(-2deg); }
.copertina--guida svg { width: 64px; height: auto; }
.cop-alto { font: 700 .72rem/1 var(--font-corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--corallo); }
.cop-titolo { font: 900 1.7rem/1 var(--font-titolo); }
.cop-usp { font: 500 .8rem/1.3 var(--font-corpo); color: var(--tenue); }
.blocco-prodotto .sotto { max-width: 32rem; margin: 30px auto 0; font-size: 1.12rem; color: #f3efe6; }
.blocco-prodotto .ris { color: var(--burro); }
.blocco-prodotto .nota--chiara { color: var(--burro); }

/* ═════ MECCANISMO: cambi chiusi + metro della crescita ═════ */
.cambi { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.cambi li { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; padding: 14px 16px; border: 2px solid var(--salvia-c); }
.cambio-n { font: 900 1.6rem/1 var(--font-titolo); color: var(--corallo); min-width: 2.2ch; }
.cambio-t { flex: 1; font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.cambio-l { width: 20px; height: 20px; color: var(--salvia-m); flex: none; }
.metro-intro { margin-top: 56px; background: var(--salvia); color: #fff; border-radius: 26px; padding: 28px 20px; }
.metro-intro .ris { color: var(--burro); }
.tappe-bottoni { display: grid; gap: 8px; margin-top: 20px; }
.tappe-bottoni a { display: flex; gap: 12px; align-items: baseline; text-decoration: none; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.25); border-radius: 12px; padding: 13px 14px; font-size: 1.05rem; transition: background .2s; }
.tappe-bottoni a:hover { background: rgba(255,255,255,.2); }
.tappe-bottoni b { font-weight: 800; color: var(--burro); min-width: 6.5em; }
.tappe { display: grid; gap: 16px; margin-top: 18px; }
.tappa { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; background: #fff; border-radius: 22px; padding: 16px; box-shadow: 0 10px 30px -24px rgba(31,42,36,.6); scroll-margin-top: 90px; }
.tappa .metro { width: 84px; height: auto; }
.tappa-chip { display: inline-block; background: var(--burro); color: var(--salvia); font: 800 .82rem/1.2 var(--font-corpo); letter-spacing: .08em; padding: 6px 9px; border-radius: 7px; }
.tappa-testo { font-size: 1.1rem; margin-top: 8px; line-height: 1.38; }
#meccanismo .bottone { margin-top: 22px; }

/* ═════ BENEFICI ═════ */
.riquadri { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.riquadro { background: var(--salvia); color: #fff; border-radius: 18px; padding: 16px 14px; }
.riquadro:nth-child(3n+2) { background: #3f6a52; }
.emoji { font-size: 1.7rem; line-height: 1; display: block; }
.r-tit { font: 800 1.1rem/1.15 var(--font-titolo); margin-top: 10px; color: var(--burro); }
.r-txt { font-size: 1rem; line-height: 1.35; margin-top: 6px; color: #f3efe6; }

/* ═════ SOGNO ═════ */
#sogno .foto--sogno { height: 380px; border-radius: 26px; }
.pannello-sogno { position: relative; margin: -90px 12px 0; background: rgba(251,246,238,.96); border-radius: 22px; padding: 24px 20px; box-shadow: 0 18px 40px -22px rgba(31,42,36,.5); }
.pannello-sogno .gigante { font-size: clamp(2.1rem, 9.6vw, 4rem); line-height: 1.02; }

/* ═════ TESTIMONIANZE ═════ */
.prove { display: grid; gap: 16px; margin-top: 30px; }
.prove .prova { position: relative; padding-top: 26px; }
.prove .prova:nth-child(odd) { transform: rotate(-.6deg); } .prove .prova:nth-child(even) { transform: rotate(.6deg); }
.volto { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 900 1.4rem/1 var(--font-titolo); color: #fff; margin-bottom: 4px; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.v1 { background: #c98a6b; } .v2 { background: #7b9a84; } .v3 { background: #b07a8f; } .v4 { background: #8c7b62; } .v5 { background: #6f8fa6; } .v6 { background: #d29b55; }
.prove .prova-titolo { text-transform: none; font-size: 1.3rem; }

/* ═════ BONUS ═════ */
.bonus-lista { display: grid; gap: 34px; margin-top: 34px; }
.bonus { text-align: center; }
.bonus .copertina { width: 210px; min-height: 280px; margin: 0 auto; justify-content: center; transform: rotate(-2deg); }
.bonus:nth-child(2) .copertina { transform: rotate(2deg); }
.copertina--b1 { background: var(--salvia-c); } .copertina--b2 { background: var(--lilla); } .copertina--b3 { background: var(--pesca); }
.bonus .cop-titolo { font-size: 1.9rem; }
.bonus-titolo { font: 800 1.45rem/1.15 var(--font-titolo); margin-top: 22px; color: var(--salvia); }
.bonus-usp { font-size: 1.08rem; margin: 8px auto 0; max-width: 26rem; }
.bonus-prezzo { margin-top: 10px; font-size: 1.2rem; }
.bonus-prezzo s { color: var(--tenue); }
.bonus-prezzo b { display: inline-block; background: var(--corallo); color: #fff; padding: 5px 12px; border-radius: 999px; margin-left: 6px; letter-spacing: .06em; }

/* ═════ PREZZO ═════ */
.card--offerta { text-align: center; padding-top: 36px; }
.card--offerta .testo { margin-left: auto; margin-right: auto; }
.conto { margin: 26px auto 0; max-width: 26rem; background: rgba(255,255,255,.08); border-radius: 18px; padding: 8px 16px; text-align: left; }
.conto-riga { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 1.02rem; border-bottom: 1px dashed rgba(255,255,255,.22); }
.conto-tot { border-bottom: 0; font-weight: 800; font-size: 1.15rem; }
.oggi { font: 700 1.8rem/1 var(--font-mano); color: var(--burro); margin-top: 22px; }
.prezzo-gigante { color: #fff; font-size: clamp(4.4rem, 22vw, 8rem); }
.scarsita { margin-top: 18px; font-size: 1.08rem; }
.scarsita b { color: var(--burro); }
.copie { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.copie i { width: 22px; height: 30px; border-radius: 3px 6px 6px 3px; background: rgba(255,255,255,.18); }
.copie i.resta { background: var(--burro); animation: palpita 1.6s ease-in-out infinite; }
@keyframes palpita { 50% { transform: translateY(-4px); } }
.rischio--chiaro { color: #e9e4d8; }

/* ═════ GARANZIA ═════ */
#garanzia { text-align: center; }
.sigillo { width: 190px; margin: 0 auto 24px; }
.sigillo svg { width: 100%; height: auto; font-family: "DM Sans", sans-serif; animation: gira 30s linear infinite; animation-play-state: paused; }
.sigillo.gira svg { animation-play-state: running; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ═════ DOMANDE ═════ */
#domande { max-width: 46rem; }
#domande h2 { margin-bottom: 14px; }
summary { font-size: 1.12rem; }
details > p { font-size: 1.06rem; }

/* ═════ CONGEDO ═════ */
.congedo-card { text-align: center; padding: 40px 22px; }
.congedo-card .gigante { color: #fff; font-size: clamp(2.2rem, 10vw, 4.2rem); }
.congedo-card .testo { margin-left: auto; margin-right: auto; }
.piede { margin-top: 40px; text-align: center; color: var(--tenue); }
.piede p { font-size: 16.5px; line-height: 1.5; } .piede p + p { margin-top: 8px; }

[data-barra-acquisto] { background: var(--salvia); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.barra-prezzo s { opacity: .7; } .barra-prezzo b { font-size: 1.3rem; color: var(--burro); }

/* ═════ COMPUTER ═════ */
@media (min-width: 900px) {
  :root { --gutter: 40px; }
  section { padding: 110px var(--gutter); }
  #apertura { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-top: 40px; }
  .fasciatoio { margin: 0; }
  .prova--prima { grid-column: 1 / -1; }
  .card { padding: 56px 56px; }
  .palco-etichette { height: 420px; }
  .pensieri { grid-template-columns: repeat(3, 1fr); }
  .sette-oggetti { grid-template-columns: repeat(4, 1fr); }
  .ogg--largo { grid-column: auto; }
  .riquadri { grid-template-columns: repeat(3, 1fr); }
  .prove { grid-template-columns: repeat(3, 1fr); }
  .bonus-lista { grid-template-columns: repeat(3, 1fr); }
  .tappe { grid-template-columns: repeat(5, 1fr); }
  .tappa { grid-template-columns: 1fr; text-align: center; }
  .tappa .metro { margin: 0 auto; }
  .pannello-sogno { margin: -140px auto 0; max-width: 720px; }
  #sogno .foto--sogno { height: 560px; }
}

/* ═════ APERTURA ALLARME — fondo notte, banner che pulsa, statistica; poi il sollievo chiaro ═════ */
:root { --allarme: #ff4d3a; --notte: #16231b; }
#apertura { padding: 0 0 40px; max-width: none; }
.notte { background: radial-gradient(120% 70% at 50% 0%, #24382c 0%, var(--notte) 70%); color: #fff; padding: 22px var(--gutter) 0; }
.hero--allarme { text-align: left; max-width: 40rem; }
.allarme { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 6px; background: rgba(255,77,58,.14); border: 2px solid var(--allarme); color: #fff; font: 800 1rem/1 var(--font-corpo); letter-spacing: .12em; animation: pulsa 1.6s ease-in-out infinite; }
.allarme svg { width: 24px; height: 24px; flex: none; animation: lampeggia 1.6s steps(1) infinite; }
@keyframes pulsa { 0%,100% { box-shadow: 0 0 0 0 rgba(255,77,58,0), 0 0 16px rgba(255,77,58,.25); } 50% { box-shadow: 0 0 0 6px rgba(255,77,58,.18), 0 0 40px rgba(255,77,58,.55); } }
@keyframes lampeggia { 50% { opacity: .35; } }
.stat { margin-top: 16px; font: 700 clamp(1.45rem, 6.2vw, 2.6rem)/1.12 var(--font-corpo); letter-spacing: -.02em; text-wrap: balance; }
.stat-num { display: block; font: 900 clamp(2.9rem, 13vw, 5.6rem)/.95 var(--font-titolo); color: var(--allarme); letter-spacing: -.03em; margin: 4px 0 2px; }
.stat-riga { margin-top: 12px; font-size: 1.04rem; line-height: 1.4; color: #e8e4da; }
.stat-riga b { color: #fff; }
.stat-fonte { margin-top: 6px; font-size: .86rem; color: #a9b5ab; }
.hero--allarme .targhetta { margin-top: 26px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); }
.hero--allarme .gancio { color: #d9d4c8; text-align: left; margin: 14px 0 0; }
.hero--allarme h1 { color: #fff; text-align: left; }
.hero--allarme .h-verbo { color: #fff; font-size: clamp(2.6rem, 11vw, 4.4rem); text-transform: uppercase; letter-spacing: .01em; }
.hero--allarme .h-a, .hero--allarme .h-b { color: #fff; }
.hero--allarme .h-b { justify-content: flex-start; }
.hero--allarme .sette { width: 1.3em; height: 1.3em; font-size: 1.7em; color: #fff; background: var(--allarme); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,77,58,.3); animation: scatto .5s cubic-bezier(.3,1.6,.5,1) .6s both; }
@keyframes scatto { from { transform: scale(0) rotate(-40deg); } }
.hero--allarme .h-pieni { color: #d9d4c8; }
.hero--allarme .veleni { color: var(--allarme); font-size: clamp(2.3rem, 10vw, 4rem); text-transform: uppercase; letter-spacing: -.01em; white-space: normal; background: none; animation: none; padding: 0; position: relative; }
.hero--allarme .veleni::after { content: ""; display: block; height: 6px; margin-top: 6px; background: repeating-linear-gradient(-45deg, var(--burro) 0 10px, #16231b 10px 20px); transform-origin: left; animation: nastro 1s cubic-bezier(.6,.1,.2,1) 1s both; }
@keyframes nastro { from { transform: scaleX(0); } }
.hero--allarme .perchi { color: #fff; text-align: left; transform: rotate(-2deg); transform-origin: left; }
.notte .fasciatoio { margin: 18px auto 0; padding-bottom: 0; }
.notte .fasciatoio rect[fill="#e9dcc8"] { fill: #2b3f32; } .notte .fasciatoio rect[fill="#cdb894"] { fill: #3a5443; }
.particelle { position: absolute; inset: -30% 0 0 0; width: 100%; height: 130%; pointer-events: none; }
.sollievo { text-align: center; padding: 0 var(--gutter); background: linear-gradient(var(--notte) 0 60px, var(--fondo) 60px); }
.sollievo .promessa { margin-top: 0; position: relative; }
.sollievo .bottone { margin-top: 20px; width: 100%; max-width: 24rem; min-height: 60px; font-size: 1.18rem; }
.sollievo .rischio { font-size: 1rem; } .sollievo .rischio b { color: var(--corallo); font-size: 1.15em; }
#apertura .prova--prima { margin-left: var(--gutter); margin-right: var(--gutter); }
@media (min-width: 900px) {
  #apertura { display: block; }
  .notte { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; padding: 50px max(var(--gutter), calc(50vw - 560px)) 0; }
  #apertura .prova--prima { margin: 34px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .particelle { display: none; } }

/* ═════ IL BIMBO CHE CRESCE — palco fermo, lo scroll fa crescere il bimbo e accende le tacche ═════ */
.crescita { margin-top: 18px; }
.crescita-palco { display: grid; gap: 16px; }
.metro-grande { display: none; }
.crescita-schede { display: grid; gap: 14px; }
.crescita-punti { display: none; }
.crescita .tappa { grid-template-columns: 1fr; }
.crescita.vivo { height: 340vh; }
.crescita.vivo .crescita-palco { position: sticky; top: 64px; height: calc(100vh - 80px); grid-template-rows: auto auto auto; align-content: center; gap: 22px; background: #fff; border-radius: 26px; padding: 16px; box-shadow: 0 14px 40px -26px rgba(31,42,36,.6); }
.crescita.vivo .metro-grande { display: block; width: auto; height: min(42vh, 330px); margin: 0 auto; }
.crescita.vivo .crescita-schede { position: relative; min-height: 150px; }
.crescita.vivo .tappa { position: absolute; inset: 0; box-shadow: none; padding: 4px; text-align: center; opacity: 0; transform: translateY(18px); transition: opacity .4s, transform .4s; }
.crescita.vivo .tappa.attiva { opacity: 1; transform: none; }
.crescita.vivo .crescita-punti { display: flex; justify-content: center; gap: 8px; }
.crescita-punti i { width: 9px; height: 9px; border-radius: 50%; background: var(--salvia-c); transition: background .3s, transform .3s; }
.crescita-punti i.on { background: var(--corallo); transform: scale(1.3); }
.bimbo { transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.bimbo-pos { transform: translateX(22px); }
@media (min-width: 900px) { .crescita.vivo .crescita-palco { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; } .crescita.vivo .metro-grande { height: 60vh; grid-row: 1 / 3; } }

/* corpo minimo al telefono: niente sotto i 16,5 px */
.stat-fonte, .hero--allarme .targhetta, .rischio, .sollievo .rischio, .rischio--chiaro, .r-txt, .calc-lab, .calc-piede, .tappa-chip, .occhiello, .tag-foto, .chiuso, .ogg-nome, .conto-riga, .flaconi button, .firma, .prova footer, .copie + .bottone + .rischio { font-size: 1.04rem; }
.allarme { font-size: 1.04rem; }

/* apertura allarme, rimpaginata centrata e più leggibile */
html, body { overflow-x: clip; }
.hero--allarme { text-align: center; margin: 0 auto; }
.allarme { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 12px; font: 600 1.12rem/1.3 var(--font-corpo); letter-spacing: 0; }
.allarme svg { width: 34px; height: 34px; }
.allarme b { display: block; font-weight: 900; font-size: 1.35rem; letter-spacing: .14em; color: var(--allarme); }
.stat { margin-top: 26px; font-size: clamp(1.25rem, 5.4vw, 2.1rem); line-height: 1.25; color: #ece7dc; }
.stat-num { margin: 6px 0; color: var(--allarme); }
.hero--allarme .gancio { text-align: center; margin: 30px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); font-size: 1.2rem; color: #ece7dc; }
.hero--allarme h1 { text-align: center; }
.hero--allarme .h-b { justify-content: center; }
.hero--allarme .h-a, .hero--allarme .h-b { font-size: clamp(1.45rem, 6.2vw, 2.3rem); }
.hero--allarme .h-pieni { font-size: 1.3rem; margin-top: 6px; }
.hero--allarme .veleni { display: inline-block; }
.hero--allarme .perchi { text-align: center; transform: rotate(-2deg); transform-origin: center; font-size: 2.2rem; margin-top: 10px; }

/* ═════ LE FOTO VERE — si aprono dentro la lente mentre scorri ═════ */
.prova-foto { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.palco-etichette { height: auto; aspect-ratio: 4 / 5; }
.foto-palco { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.lente-foto { position: relative; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; --r: 75%; clip-path: circle(var(--r) at 50% 45%); }
.lente-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); }
.lente-foto::after { content: ""; position: absolute; left: 50%; top: 45%; width: calc(var(--r) * 2.8); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 6px solid var(--burro); opacity: var(--anello, 0); pointer-events: none; }
.lente-foto figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(251,246,238,.95); color: var(--salvia); font: 700 1.25rem/1.15 var(--font-mano); font-size: 1.5rem; padding: 10px 14px; border-radius: 14px; text-align: center; }
.due-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.due-foto .lente-foto figcaption { font-size: 1.2rem; left: 8px; right: 8px; bottom: 8px; padding: 8px; }
.lente-foto--larga { margin-top: 26px; }
#sogno .lente-foto--sogno { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .lente-foto--larga { aspect-ratio: 16 / 10; } #sogno .lente-foto--sogno { aspect-ratio: 16 / 9; } .due-foto { gap: 24px; } }
img.volto { object-fit: cover; padding: 0; }

/* ── mockup veri (libro, tablet, telefono), senza cornici ── */
.marchio img { height: 44px; width: auto; display: block; }
.mockup { display: block; height: auto; max-width: 100%; margin-left: auto; margin-right: auto; filter: drop-shadow(0 26px 30px rgba(0,0,0,.28)); }
.mockup--guida { width: min(100%, 560px); margin-top: 30px; }
.mockup--bonus { width: min(100%, 420px); }
.mockup--bundle { width: min(100%, 600px); margin-top: 22px; filter: drop-shadow(0 26px 34px rgba(0,0,0,.45)); }
.conto-riga span:last-child, .bonus-prezzo s, .barra-prezzo s, .barra-prezzo b { white-space: nowrap; }