/* ══════════ stile.css — «diorama» · La Nonna Aveva Ragione · l'orto sotto la campana ══════════
   Antico, romantico, un po' mistico: verde bosco e oro, pergamena, inchiostro, ceralacca.
   Le schede «a mattoncino» del preset qui sono fogli di pergamena con la doppia cornice d'oro. */
:root {
  --bosco: #0F2A1D; --bosco2: #163A28; --bosco3: #1F4A33; --oro: #D9B25E; --oro2: #F1D58C; --oro3: #A77F2E;
  --pergamena: #F3E9D2; --pergamena2: #E9DCBC; --inchiostro: #1E1A12; --ceralacca: #8E2B1E; --crema-t: #EFE6CF;
  --fondo: var(--bosco); --testo: var(--crema-t); --tenue: #B9B091; --accento: var(--oro); --ris: var(--oro2);
  --evid: rgba(233, 190, 80, .5); --mano-colore: var(--oro2);
  --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='%23D9B25E' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --corpo: 19px; --riga: 1.55;
  --font-titolo: "Playfair Display", Georgia, serif; --font-corpo: "Lora", Georgia, serif;
  --gutter: 22px; --raggio: 10px;
  --bottone-fondo: linear-gradient(180deg, #F6DC93 0%, #D9B25E 48%, #B48A35 100%); --bottone-testo: var(--bosco);
  --oro-testo: linear-gradient(180deg, #FFF0B8 0%, #F1D58C 30%, #D9B25E 55%, #A77F2E 100%);
}
body { background: var(--bosco); }
h1, h2, h3, .gigante { font-family: var(--font-titolo); color: var(--crema-t); }
h2 { font-weight: 800; font-size: clamp(2rem, 8.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.005em; }
h3 { font-weight: 800; font-size: 1.45rem; line-height: 1.18; }
section { position: relative; }
mark { background-position: 0 50%; background-size: 0% 100%; border-radius: 3px; color: inherit; }
mark.in-vista { background-size: 100% 100%; }
.ris { color: var(--ris); }
.nota { font-size: 1.55em; color: var(--oro2); }
.gigante { font-weight: 800; font-size: clamp(2.2rem, 10vw, 4.6rem); line-height: 1.06; }
/* il filo d'oro: una cornice con gli angoli a ricciolo, da mettere su pergamene e schede */
.cornice, .cartellino, .offerta-card { position: relative; }
.cornice::before, .cartellino::before, .offerta-card::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(167, 127, 46, .7); outline: 1px solid rgba(167, 127, 46, .35); outline-offset: 3px; border-radius: 6px; pointer-events: none; }

/* il bottone: una placca d'oro incisa */
.bottone { background: var(--bottone-fondo); border-radius: var(--raggio); box-shadow: 0 5px 0 #6E5220, 0 14px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6); font: 700 1.15rem/1.1 var(--font-titolo); letter-spacing: .01em; min-height: 60px; position: relative; transition: transform .15s, box-shadow .15s; }
.bottone::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(15, 42, 29, .35); border-radius: 7px; pointer-events: none; }
.bottone:active { transform: translateY(4px); box-shadow: 0 1px 0 #6E5220; }
.bottone.grande { width: 100%; max-width: 30rem; }
.rischio { font-size: 1.05rem; color: var(--tenue); }
.rischio s, .barra-prezzo s { opacity: .7; }
.rischio b { color: var(--oro2); font-size: 1.15em; }

/* ═════ APERTURA ═════ */
#apertura { min-height: 100svh; padding: 10px var(--gutter) 34px; display: flex; flex-direction: column; background: radial-gradient(90% 45% at 50% 22%, #2A5A3C 0%, var(--bosco) 70%); overflow: hidden; }
#apertura::before, #apertura::after { content: ""; position: absolute; width: 90px; height: 90px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath d='M4 86 V30 C4 14 14 4 30 4 H86' fill='none' stroke='%23D9B25E' stroke-width='1.6'/%3E%3Cpath d='M12 86 V36 C12 22 22 12 36 12 H86' fill='none' stroke='%23D9B25E' stroke-opacity='.5'/%3E%3Cpath d='M30 30 c10 -14 26 -8 20 4 c-5 9 -16 2 -10 -4' fill='none' stroke='%23F1D58C' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat; opacity: .9; }
#apertura::before { left: 8px; top: 8px; } #apertura::after { right: 8px; top: 8px; transform: scaleX(-1); }
.vista-hero { height: min(36svh, 360px); margin: 0 -8px; }
.giro { width: 100%; height: 100%; animation: respiro 7s ease-in-out infinite alternate; }
@keyframes respiro { from { transform: translateY(0) rotate(-.6deg); } to { transform: translateY(-7px) rotate(.6deg); } }
.apertura-testo { max-width: 36rem; margin: 0 auto; width: 100%; position: relative; z-index: 2; }
#apertura h1 { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "oltre num" "cosa cosa" "chi chi"; column-gap: 8px; align-items: center; font-weight: 800; margin-top: 2px; }
.h-num { grid-area: num; font-size: clamp(6.6rem, 37vw, 12rem); line-height: .86; font-weight: 900; background: var(--oro-testo); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); letter-spacing: -.02em; }
.h-oltre { grid-area: oltre; writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; font-family: var(--font-corpo); font-weight: 700; font-size: 1.05rem; letter-spacing: .3em; text-transform: uppercase; color: var(--oro); }
.h-cosa { grid-area: cosa; font-size: clamp(1.8rem, 8.2vw, 2.9rem); line-height: 1.08; margin-top: 4px; }
.h-cosa .chiave { color: var(--oro2); font-style: italic; }
.h-chi { grid-area: chi; font-size: clamp(1.6rem, 7.2vw, 2.7rem); line-height: 1.1; margin-top: 2px; }
.h-chi strong { font-weight: 900; color: var(--oro2); background: linear-gradient(transparent 76%, rgba(217, 178, 94, .45) 76%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#apertura .sub { font-size: 1.08rem; line-height: 1.45; margin: 12px 0 18px; color: var(--crema-t); }
#apertura .bottone { width: 100%; }
#apertura .rischio { text-align: center; margin-top: 20px; }

/* ═════ IL MONDO: l'orto sotto la campana ═════ */
.mondo-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mondo-svg .cielo-notte, .mondo-svg .stelle, .mondo-svg .luna { opacity: var(--notte, 0); transition: opacity .9s; }
.mondo-svg .ombra-luna { fill: #123A2C; }
.mondo-svg .sole { opacity: calc(1 - var(--notte, 0)); transition: opacity .9s; }
.mondo-svg .aura { opacity: calc(.35 + var(--notte, 0) * .5); animation: aura 6s ease-in-out infinite alternate; transform-origin: 500px 520px; }
@keyframes aura { to { transform: scale(1.06); } }
.mondo-svg .stella { animation: brilla 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes brilla { 50% { opacity: .35; transform: scale(.7); } }
.mondo-svg .polline circle { animation: polline 9s linear infinite; }
@keyframes polline { 0% { transform: translateY(30px); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-160px); opacity: 0; } }
.mondo-svg .fiamma { animation: fiamma .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes fiamma { to { transform: scaleY(1.15) scaleX(.9); } }
.mondo-svg .vapore circle { opacity: 0; animation: vapore 3.6s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes vapore { 0% { transform: translateY(10px) scale(.5); opacity: 0; } 30% { opacity: .38; } 100% { transform: translateY(-40px) scale(1.4); opacity: 0; } }
.mondo-svg .rovi, .mondo-svg .sciroppi { opacity: 0; transition: opacity .7s .3s; }
.mondo-svg[data-mostra~="rovi"] .rovi, .mondo-svg[data-mostra~="sciroppi"] .sciroppi { opacity: 1; }
.mondo-svg [data-pianta] { transition: filter .8s; }
.mondo-svg[data-accese~="limone"] [data-pianta="limone"], .mondo-svg[data-accese~="salvia"] [data-pianta="salvia"], .mondo-svg[data-accese~="alloro"] [data-pianta="alloro"],
.mondo-svg[data-accese~="timo"] [data-pianta="timo"], .mondo-svg[data-accese~="finocchio"] [data-pianta="finocchio"], .mondo-svg[data-accese~="camomilla"] [data-pianta="camomilla"],
.mondo-svg[data-accese~="fuoco"] [data-pianta="fuoco"], .mondo-svg[data-accese~="cucchiaio"] [data-pianta="cucchiaio"], .mondo-svg[data-accese~="lume"] [data-pianta="lume"], .mondo-svg[data-accese~="luna"] [data-pianta="luna"] { filter: drop-shadow(0 0 9px rgba(255, 220, 130, .75)); }

/* ═════ I PALCHI (problema, meccanismo, benefici, sogno) ═════ */
.palco { position: sticky; top: 0; height: 100svh; overflow: hidden; background: radial-gradient(80% 50% at 50% 30%, color-mix(in srgb, #24503A calc(var(--notte, 0) * 100%), #D9E2C2), color-mix(in srgb, var(--bosco) calc(var(--notte, 0) * 100%), #B9C99C)); transition: background .9s; }
.cielo { position: absolute; inset: 0; pointer-events: none; opacity: var(--notte, 0); transition: opacity .9s;
  background: radial-gradient(1.5px 1.5px at 12% 14%, #F1D58C 50%, transparent 52%), radial-gradient(1.5px 1.5px at 34% 6%, #F1D58C 50%, transparent 52%), radial-gradient(2px 2px at 62% 12%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 88% 8%, #F1D58C 50%, transparent 52%), radial-gradient(1.5px 1.5px at 94% 34%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 5% 40%, #F1D58C 50%, transparent 52%); }
.vista { position: absolute; left: 0; right: 0; top: 0; height: 58svh; }
.passi { position: relative; z-index: 2; margin-top: -100svh; }
.passo { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 14px 92px; }
.passo.corto { min-height: 70svh; justify-content: flex-start; padding-top: 12svh; }
.cartellino { background: var(--pergamena); color: var(--inchiostro); border-radius: 12px; padding: 22px 22px 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); max-width: 34rem; width: 100%; margin: 0 auto; background-image: radial-gradient(120% 90% at 0 0, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(100% 80% at 100% 100%, rgba(167, 127, 46, .14), transparent 60%); }
.cartellino h2, .cartellino h3, .cartellino .gigante { color: var(--inchiostro); }
.cartellino h2 { font-size: clamp(1.9rem, 8vw, 2.8rem); margin-bottom: 8px; }
.cartellino h3 { margin: 4px 0 8px; }
.cartellino p { font-size: 1.1rem; line-height: 1.5; }
.cartellino p + p { margin-top: 8px; }
.cartellino .ris { color: #3E6B34; }
.cartellino .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='%238E2B1E' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tacca { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-titolo); font-style: italic; font-weight: 700; font-size: 1.08rem !important; color: var(--oro2); background: var(--bosco2); padding: 4px 14px; border-radius: 4px; margin-bottom: 10px; }
.tacca .n { font-style: normal; font-weight: 900; background: var(--oro); color: var(--bosco); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; }
.uscita { border-top: 1px solid rgba(167, 127, 46, .5); padding-top: 10px; }
.lucchetto { display: inline-block; font-weight: 700; color: var(--ceralacca); }
.bullet h3 { display: flex; gap: 12px; align-items: flex-start; font-size: 1.32rem; }
.bullet .emo { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--bosco2); border: 2px solid var(--oro); display: grid; place-items: center; font-size: 1.35rem; }
.ora { align-self: center; font-family: var(--font-titolo); font-style: italic; font-weight: 800; font-size: 2rem; color: var(--oro2); background: rgba(15, 42, 29, .8); border: 1px solid var(--oro); padding: 6px 20px; border-radius: 999px; backdrop-filter: blur(8px); }
.sole { display: none; }
.sogno-card .gigante { font-size: clamp(1.9rem, 8.4vw, 3.4rem); margin-bottom: 10px; }

/* ═════ BIG IDEA ═════ */
#bigidea { background: radial-gradient(90% 50% at 50% 25%, #1F4A33, var(--bosco) 75%); padding: 40px var(--gutter) 64px; overflow: hidden; }
#bigidea .cielo { opacity: 1; }
.bigidea-mondo { height: min(46svh, 420px); max-width: 720px; margin: 0 auto; }
.bigidea-testo { max-width: 38rem; margin: 18px auto 0; position: relative; }
#bigidea .gigante { background: var(--oro-testo); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(2.2rem, 10vw, 4.2rem); }
#bigidea p { margin-top: 18px; font-size: 1.15rem; }

/* ═════ righe di sezione ═════ */
.riga-sez { max-width: 38rem; margin: 0 auto 26px; text-align: center; }
.riga-sez p { margin-top: 12px; font-size: 1.15rem; }
.riga-sez h2::after { content: ""; display: block; width: 120px; height: 14px; margin: 14px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0 7 H46 M74 7 H120' stroke='%23D9B25E' stroke-width='1.4'/%3E%3Cpath d='M60 1 L66 7 L60 13 L54 7Z' fill='%23D9B25E'/%3E%3C/svg%3E") no-repeat center; }

/* ═════ NEMICO · lo scontrino (su pergamena) ═════ */
#nemico { padding: 64px var(--gutter); background: var(--pergamena); color: var(--inchiostro); }
#nemico h2 { color: var(--inchiostro); }
#nemico .ris { color: #3E6B34; }
.calcolo { max-width: 30rem; margin: 0 auto; background: var(--pergamena2); border-radius: 16px; padding: 18px 16px 22px; box-shadow: inset 0 0 0 1.5px rgba(167, 127, 46, .5); }
.manopola { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: end; margin-bottom: 16px; font-weight: 600; font-size: 1.05rem; }
.manopola .valore { font-family: var(--font-titolo); font-weight: 900; font-size: 1.6rem; color: var(--ceralacca); white-space: nowrap; }
.manopola input { grid-column: 1 / -1; width: 100%; accent-color: var(--bosco3); height: 34px; }
.scontrino { background: #fff; margin: 6px 6px 0; padding: 18px 18px 26px; font-family: var(--font-corpo); box-shadow: 0 10px 22px rgba(30, 26, 18, .18); transform: rotate(-1.2deg); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 50% 100%, transparent 6px, #000 6.5px) bottom / 16px 10px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 50% 100%, transparent 6px, #000 6.5px) bottom / 16px 10px repeat-x; }
.sc-testa { text-align: center; font-weight: 700; letter-spacing: .18em; font-size: 1.04rem; border-bottom: 2px dashed #ccc; padding-bottom: 8px; margin-bottom: 8px; }
.sc-righe { list-style: none; padding: 0; margin: 0; }
.sc-righe li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dotted #ddd; font-size: 1.06rem; animation: riga .4s ease-out both; }
@keyframes riga { from { opacity: 0; transform: translateY(-6px); } }
.sc-totale { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 12px; font-weight: 700; font-size: 1.1rem; }
.sc-totale b { font-family: var(--font-titolo); font-weight: 900; font-size: 2.1rem; color: var(--ceralacca); }
.contro { margin-top: 18px; text-align: center; font-size: 1.15rem; }
.contro .ris { font-family: var(--font-titolo); font-size: 1.5rem; font-weight: 900; }
.limite { margin-top: 8px; text-align: center; font-size: 1.05rem; }
.chiusa { max-width: 38rem; margin: 26px auto 0; font-size: 1.2rem; text-align: center; }

/* ═════ PRODOTTO · il libro antico e i capitoli ═════ */
#prodotto { padding: 64px var(--gutter); background: radial-gradient(80% 40% at 50% 30%, #1F4A33, var(--bosco) 80%); }
.libro { width: min(80vw, 330px); aspect-ratio: 3 / 4.2; margin: 10px auto 34px; position: relative; transform: perspective(1000px) rotateY(-16deg) rotateX(4deg); transform-style: preserve-3d; }
.libro-fronte { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, #2F6644, #173B28 70%); border-radius: 4px 12px 12px 4px; box-shadow: 18px 22px 40px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(241, 213, 140, .3); padding: 30px 26px; display: flex; flex-direction: column; overflow: hidden; text-align: center; }
.cop-bordo { position: absolute; inset: 12px; border: 2px solid var(--oro); outline: 1px solid rgba(217, 178, 94, .5); outline-offset: 4px; border-radius: 4px; pointer-events: none; }
.cop-titolo { font-family: var(--font-titolo); font-weight: 900; font-size: clamp(1.9rem, 8.6vw, 2.6rem); line-height: 1.02; margin-top: 12px; background: var(--oro-testo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cop-usp { font-size: 1.04rem !important; line-height: 1.3; margin-top: 12px; color: var(--crema-t); font-style: italic; }
.cop-rametto { margin-top: auto; width: 50%; align-self: center; }
.libro-dorso { position: absolute; left: 0; top: 0; bottom: 0; width: 26px; background: #0F2A1D; transform: rotateY(-90deg); transform-origin: left; }
.capitoli { list-style: none; padding: 0; margin: 0 auto; max-width: 38rem; display: grid; gap: 10px; counter-reset: cap; }
.capitoli li { counter-increment: cap; display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; align-items: center; background: var(--pergamena); color: var(--inchiostro); border-radius: 10px; padding: 12px 14px; font-size: 1.1rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.capitoli li::before { content: counter(cap, upper-roman); grid-row: span 2; width: 50px; height: 50px; display: grid; place-items: center; font-family: var(--font-titolo); font-weight: 800; font-size: 1.15rem; color: var(--oro2); background: var(--bosco2); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--oro), inset 0 0 0 5px var(--bosco2), inset 0 0 0 6px rgba(217, 178, 94, .6); }
.capitoli b { font-family: var(--font-titolo); font-weight: 800; font-size: 1.18rem; line-height: 1.18; }
.capitoli span { color: #3E6B34; font-weight: 600; font-style: italic; }
.pdf { text-align: center; margin-top: 22px; }

/* ═════ BONUS ═════ */
#bonus { padding: 64px var(--gutter); background: var(--pergamena); color: var(--inchiostro); }
#bonus h2 { color: var(--inchiostro); }
.bonus-lista { display: grid; gap: 18px; max-width: 40rem; margin: 0 auto; }
[data-bonus] { display: grid; grid-template-columns: 118px 1fr; gap: 16px; background: #FBF5E6; border-radius: 12px; padding: 16px; box-shadow: 0 8px 20px rgba(30, 26, 18, .14), inset 0 0 0 1.5px rgba(167, 127, 46, .45); align-items: center; }
.cop-bonus { aspect-ratio: 3 / 4; border-radius: 3px 8px 8px 3px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 6px 8px 16px rgba(30, 20, 10, .35), inset 6px 0 0 rgba(0, 0, 0, .2), inset 0 0 0 4px rgba(0, 0, 0, .1), inset 0 0 0 5px rgba(217, 178, 94, .7); }
.cop-bonus svg { width: 64%; align-self: center; margin-top: 6px; }
.cop-bonus p { font-family: var(--font-titolo); font-weight: 800; color: var(--oro2); font-size: 1.06rem !important; line-height: 1.05; text-align: center; }
.c-notte { background: #1B2440; } .c-salvia { background: var(--bosco3); } .c-pomodoro { background: #5E1E16; }
.bonus-testo h3 { font-size: 1.3rem; color: var(--inchiostro); }
.bonus-testo p { font-size: 1.05rem; margin-top: 6px; line-height: 1.45; }
.prezzo-bonus { font-weight: 700; }
.prezzo-bonus s { color: #7A6E55; }
.prezzo-bonus b { background: var(--bosco2); color: var(--oro2); padding: 2px 10px; border-radius: 4px; margin-left: 6px; letter-spacing: .08em; }

/* ═════ TESTIMONIANZE · biglietti con la ceralacca ═════ */
#testimonianze { padding: 64px var(--gutter); background: radial-gradient(80% 30% at 50% 0, #1F4A33, var(--bosco) 70%); }
.voci { display: grid; gap: 22px; max-width: 64rem; margin: 0 auto; }
.voci blockquote { background: var(--pergamena); color: var(--inchiostro); border-radius: 4px; padding: 22px 20px 16px; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); position: relative; transform: rotate(var(--r, -.6deg)); background-image: radial-gradient(120% 90% at 0 0, rgba(255, 255, 255, .45), transparent 60%); }
.voci blockquote:nth-child(even) { --r: .7deg; }
.voci blockquote p { font-size: 1.08rem; line-height: 1.55; font-style: italic; }
.voci footer { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.volto { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-family: var(--font-titolo); font-weight: 900; font-size: 1.4rem; color: var(--oro2); background: radial-gradient(circle at 35% 30%, #B23A28, var(--ceralacca) 60%, #5E1E16); box-shadow: 0 3px 6px rgba(0, 0, 0, .3), inset 0 0 0 4px rgba(0, 0, 0, .12); }
.voci cite { font-style: normal; font-weight: 700; font-size: 1.02rem; }

/* ═════ OFFERTA ═════ */
#offerta { padding: 64px 14px; background: radial-gradient(70% 40% at 50% 10%, #2A5A3C, var(--bosco) 75%); }
.offerta-card { max-width: 34rem; margin: 0 auto; background: var(--pergamena); color: var(--inchiostro); border-radius: 14px; padding: 30px 22px 28px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.offerta-card h2 { color: var(--inchiostro); }
.sub-offerta { margin: 12px 0 18px; font-size: 1.12rem; }
.ricevi { list-style: none; padding: 0; margin: 0 0 14px; text-align: left; }
.ricevi li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(167, 127, 46, .35); font-weight: 600; font-size: 1.05rem; }
.ricevi s { color: #7A6E55; font-weight: 400; white-space: nowrap; }
.prezzo { color: var(--ceralacca); margin: 8px 0 16px; font-size: clamp(3.4rem, 17vw, 6rem); }
.offerta-card .prezzo { color: var(--ceralacca); }
.prezzo s { font-size: .38em; color: #7A6E55; vertical-align: middle; }
.pagamento { margin-top: 12px; font-size: 1.06rem; color: #5B523F; }
.scaffale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 10px; margin: 24px auto 8px; max-width: 280px; padding: 0 6px 6px; border-bottom: 8px solid #6B4A2A; }
.scaffale .vaso { --livello: 0; display: block; height: 44px; border-radius: 8px 8px 10px 10px; border: 2px solid rgba(110, 82, 32, .5); border-top: 8px solid var(--oro3); background: linear-gradient(to top, #C98A2A calc(var(--livello) * 100%), rgba(255, 255, 255, .35) calc(var(--livello) * 100%)); }
.scaffale .vaso.pieno { --livello: .9; border-color: var(--oro); box-shadow: 0 0 0 4px rgba(217, 178, 94, .35); animation: vaso 1.8s ease-in-out infinite; }
@keyframes vaso { 50% { box-shadow: 0 0 0 10px rgba(217, 178, 94, .12); } }
.scarsita { font-weight: 700; font-size: 1.08rem; }

/* ═════ GARANZIA ═════ */
#garanzia { padding: 64px var(--gutter); text-align: center; background: var(--pergamena); color: var(--inchiostro); }
#garanzia h2 { color: var(--inchiostro); }
.timbro { width: 170px; margin: 0 auto 18px; animation: gira 40s linear infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
@keyframes gira { to { transform: rotate(360deg); } }
#garanzia p { max-width: 36rem; margin: 12px auto 0; font-size: 1.15rem; }

/* ═════ DOMANDE ═════ */
#domande { padding: 56px max(var(--gutter), calc((100% - 44rem) / 2)); background: var(--bosco); }
#domande h2 { margin-bottom: 14px; font-size: clamp(1.9rem, 8vw, 3rem); }
details { border-bottom: 1px solid rgba(217, 178, 94, .35); }
summary { font-size: 1.15rem; font-family: var(--font-titolo); }
summary::after { color: var(--oro); }
details > p { font-size: 1.08rem; }

/* ═════ CONGEDO · l'orto al mattino ═════ */
#congedo { padding: 40px var(--gutter) 120px; text-align: center; background: radial-gradient(80% 40% at 50% 20%, #2A5A3C, var(--bosco) 75%); }
.congedo-mondo { height: min(40svh, 360px); max-width: 640px; margin: 0 auto 8px; }
#congedo .gigante { max-width: 40rem; margin: 0 auto; background: var(--oro-testo); -webkit-background-clip: text; background-clip: text; color: transparent; }
#congedo > p { max-width: 34rem; margin: 14px auto 22px; font-size: 1.15rem; }
.piede { margin-top: 46px; border-top: 1px solid rgba(217, 178, 94, .3); padding-top: 18px; color: var(--tenue); }
.piede p { font-size: 16.5px; line-height: 1.5; margin-top: 8px; }

/* barra d'acquisto */
[data-barra-acquisto] { background: var(--bosco2); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); border: 1.5px solid var(--oro); }
.barra-prezzo { font-weight: 700; font-size: 1.05rem; color: var(--crema-t); }
.barra-prezzo b { color: var(--oro2); font-family: var(--font-titolo); font-size: 1.35rem; }

/* senza coreografia: i passi in fila, l'orto intero */
html:not(.vivo) .passi { margin-top: 0; }
html:not(.vivo) .palco { position: relative; height: 58svh; }
html:not(.vivo) .passo { min-height: 0; padding-bottom: 18px; }

/* computer */
@media (min-width: 900px) {
  #apertura { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 30px; padding: 30px 5vw; }
  .vista-hero { height: 82dvh; order: 2; }
  .vista { left: 0; right: 42%; height: 100svh; }
  .passi { margin-left: 58%; margin-right: 4vw; }
  .passo { justify-content: center; padding-bottom: 0; }
  .voci { grid-template-columns: repeat(3, 1fr); }
  .bonus-lista { grid-template-columns: repeat(3, 1fr); max-width: 72rem; }
  [data-bonus] { grid-template-columns: 1fr; }
  .cop-bonus { max-width: 200px; margin: 0 auto; }
  .capitoli { grid-template-columns: 1fr 1fr; max-width: 60rem; }
}
@media (prefers-reduced-motion: reduce) { .giro, .timbro { animation: none; } }

/* ═════ PALCHI A STRATI (19/10, giro 2): il testo grande in alto, l'orto sotto ═════ */
.sez-palco .palco { background: radial-gradient(90% 45% at 50% 75%, #24503A, var(--bosco) 75%); }
.a-strati .vista { top: auto; bottom: 0; height: 58svh; }
.testi { position: absolute; left: 0; right: 0; top: 0; height: 42svh; z-index: 3; }
.strato { position: absolute; left: 22px; right: 22px; top: 22px; width: auto; max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; color: var(--crema-t); opacity: 0; transform: translateY(18px); transition: opacity .55s, transform .55s; pointer-events: none; }
.strato.su { opacity: 1; transform: none; pointer-events: auto; }
.strato::before { display: none; }
.strato h2, .strato h3, .strato .gigante { color: var(--crema-t); }
.strato h2 { font-size: clamp(1.85rem, 8.2vw, 3rem); line-height: 1.12; margin-bottom: 12px; }
.strato h3 { font-size: clamp(1.55rem, 6.8vw, 2.3rem); line-height: 1.15; margin: 2px 0 10px; }
.strato p { font-size: 1.12rem; line-height: 1.5; }
.strato .ris { color: var(--oro2); }
.strato .lucchetto { color: var(--oro2); font-style: italic; }
.strato .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='%23D9B25E' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.strato .tacca { background: none; padding: 0; color: var(--oro); font-size: 1.1rem !important; letter-spacing: .02em; border-bottom: 1px solid rgba(217, 178, 94, .5); padding-bottom: 4px; border-radius: 0; }
.strato .uscita { border-top-color: rgba(217, 178, 94, .4); }
.strato.ora { top: 30%; left: 50%; right: auto; transform: translateX(-50%); }
.strato.ora.su { transform: translateX(-50%); }
.bullet.strato h3 { font-size: clamp(1.4rem, 6.2vw, 2.1rem); }
.punti { position: absolute; left: 22px; bottom: 8px; display: flex; gap: 8px; }
.punto { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--oro); transition: background .4s, transform .4s; }
.punto.su { background: var(--oro); transform: scale(1.3); }
.a-strati .passo { min-height: 85svh; padding: 0; }
.a-strati .passo:first-child { min-height: 100svh; }
.mondo-svg [data-spento] { filter: saturate(.35) brightness(.5); transition: filter .8s; }
.mondo-svg [data-pianta]:not([data-spento]) { transition: opacity .8s, filter .8s; }
@media (min-width: 900px) {
  .a-strati .vista { left: auto; right: 0; width: 56%; height: 100svh; }
  .testi { width: 44%; height: 100svh; display: flex; align-items: center; }
  .strato { top: 50%; left: 6vw; right: 2vw; transform: translateY(-40%); }
  .strato.su { transform: translateY(-50%); }
  .a-strati .passi { margin-left: 0; margin-right: 0; }
}

/* ═════ NEMICO · la bilancia ═════ */
.bilancia-box { max-width: 30rem; margin: 0 auto; background: radial-gradient(90% 70% at 50% 30%, #24503A, var(--bosco)); border-radius: 16px; padding: 18px 16px 20px; box-shadow: 0 18px 40px rgba(30, 26, 18, .3); position: relative; }
.bilancia-box::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(217, 178, 94, .55); border-radius: 11px; pointer-events: none; }
.bilancia { width: 100%; overflow: visible; }
.piatti-testo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; color: var(--crema-t); }
.piatti-testo p { font-size: 1.04rem; line-height: 1.4; }
.piatti-testo p:last-child { text-align: right; }
.piatti-testo b { display: block; font-family: var(--font-titolo); font-size: 1.15rem; color: var(--oro2); margin-bottom: 4px; }

.sez-palco .vista { overflow: hidden; }
.sez-palco .vista .mondo-svg { overflow: hidden; }

/* l'apertura con più aria: 200 · rimedi della nonna · per guarire tutta la famiglia · senza correre in farmacia */
#apertura h1 { grid-template-areas: "oltre num" "cosa cosa" "per per" "chi chi"; row-gap: 2px; text-align: left; }
.h-cosa { font-size: clamp(2.2rem, 10.4vw, 3.6rem); line-height: 1; margin-top: 6px; }
.h-cosa .chiave { font-weight: 800; }
.h-per { grid-area: per; font-family: var(--font-corpo); font-weight: 400; font-size: clamp(1.25rem, 5.4vw, 1.7rem); color: var(--crema-t); margin-top: 6px; }
.h-chi { font-size: clamp(1.6rem, 7.4vw, 2.6rem); margin-top: 4px; }
.h-chi strong { background: none; border-bottom: 2px solid rgba(217, 178, 94, .6); }
#apertura .sub { font-size: 1.06rem; color: var(--tenue); max-width: 30rem; margin: 14px 0 20px; }
@media (min-width: 900px) { .h-cosa { font-size: 4rem; } .h-per { font-size: 1.9rem; } .h-chi { font-size: 3rem; } #apertura .sub { font-size: 1.15rem; } }

/* giro 4: il 200 più contenuto, la sub leggibile e con un suo trattamento */
.h-num { font-size: clamp(4.4rem, 23vw, 8rem); line-height: .9; }
.h-oltre { font-size: .95rem; }
#apertura .sub { position: relative; font-size: 1.2rem; line-height: 1.5; color: var(--crema-t); margin: 18px 0 22px; padding: 14px 0 14px 18px; border-left: 2px solid var(--oro); background: linear-gradient(90deg, rgba(217, 178, 94, .1), transparent 80%); max-width: 32rem; }
#apertura .sub span { display: block; }
#apertura .sub .s2 { font-family: var(--font-titolo); font-style: italic; font-weight: 700; font-size: 1.32rem; color: var(--oro2); margin: 2px 0; }
#apertura .sub b { color: var(--oro2); font-weight: 700; }
@media (min-width: 900px) { #apertura .sub { font-size: 1.35rem; } #apertura .sub .s2 { font-size: 1.55rem; } .h-num { font-size: 9rem; } }

.vista-hero { height: min(27svh, 330px); }
#apertura .sub { margin: 14px 0 18px; padding: 10px 0 10px 16px; }
@media (min-width: 900px) { .vista-hero { height: 80dvh; } }

/* ═════ giro 5: LEGGIBILITÀ — riquadri, grassetti, animazioni ═════ */
/* nei palchi: il titolo sul verde, il testo dentro una pergamena con il filo d'oro */
.strato .riquadro, .cartellino .riquadro { display: block; background: linear-gradient(180deg, #FBF5E6, var(--pergamena)); color: var(--inchiostro); padding: 14px 16px 15px 18px; border-radius: 10px; border-left: 5px solid var(--oro); box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(167, 127, 46, .35); font-size: 1.14rem !important; line-height: 1.5 !important; margin-top: 10px; }
.riquadro strong { color: var(--ceralacca); font-weight: 700; background: linear-gradient(transparent 62%, rgba(217, 178, 94, .45) 62%) no-repeat 0 0 / 0% 100%; transition: background-size .9s .5s cubic-bezier(.6, .1, .2, 1); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.strato.su .riquadro strong, .cartellino:not(.strato) .riquadro strong, .vetrino.in-vista strong { background-size: 100% 100%; }
.riquadro .ris { color: #2F6B2C; font-weight: 700; }
.riquadro mark { color: var(--inchiostro); }
.riquadro .mano { font-weight: 700; color: var(--ceralacca); }
.riquadro-oro { display: block; background: linear-gradient(180deg, #F6DC93, #D9B25E); color: var(--bosco) !important; padding: 12px 16px; border-radius: 10px; border: 0 !important; margin-top: 10px !important; font-size: 1.1rem !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.riquadro-oro strong { color: var(--bosco); }
/* le etichette: i pezzi di un elenco staccati, che entrano uno alla volta */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { display: inline-block; background: var(--bosco2); color: var(--oro2); font-family: var(--font-titolo); font-weight: 700; font-style: italic; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(217, 178, 94, .6); font-size: 1.05rem; }
.strato.su .chip { animation: chip .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.strato.su .chip:nth-child(2) { animation-delay: .15s; } .strato.su .chip:nth-child(3) { animation-delay: .3s; }
@keyframes chip { from { opacity: 0; transform: translateY(10px) scale(.8); } }
/* la tacca: una targhetta d'oro */
.strato .tacca { background: var(--oro) !important; color: var(--bosco) !important; font-style: normal; padding: 4px 12px !important; border-radius: 4px !important; border: 0 !important; }
.strato .tacca .n { background: var(--bosco); color: var(--oro2); }
/* il titolo del passo: più grande, e la riga d'oro sotto */
.strato h2, .strato h3 { text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
/* gli strati entrano a pezzi: titolo, poi il riquadro */
.strato.su > * { animation: pezzo .6s cubic-bezier(.2, .8, .2, 1) both; }
.strato.su > *:nth-child(2) { animation-delay: .12s; } .strato.su > *:nth-child(3) { animation-delay: .24s; } .strato.su > *:nth-child(4) { animation-delay: .36s; }
@keyframes pezzo { from { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.strato .riquadro { margin-top: 12px; }
.strato.leva .lucchetto { display: inline-block; margin-top: 10px; background: rgba(15, 42, 29, .8); padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(217, 178, 94, .5); }
/* fuori dai palchi: i paragrafi sul verde in un vetrino col filo d'oro */
.vetrino { position: relative; background: linear-gradient(180deg, rgba(255, 248, 230, .1), rgba(255, 248, 230, .04)); border: 1px solid rgba(217, 178, 94, .55); border-radius: 14px; padding: 16px 18px; font-size: 1.15rem !important; line-height: 1.55; box-shadow: inset 0 0 30px rgba(217, 178, 94, .06), 0 14px 30px rgba(0, 0, 0, .25); backdrop-filter: blur(6px); }
.vetrino::before { content: "❦"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--bosco); color: var(--oro); padding: 0 8px; font-size: 1.1rem; line-height: 1.3; }
.vetrino strong { color: var(--oro2); background: linear-gradient(transparent 70%, rgba(217, 178, 94, .35) 70%) no-repeat 0 0 / 0% 100%; transition: background-size .9s .3s; }
.vetrino.chiaro { background: #FBF5E6; border-color: rgba(167, 127, 46, .55); color: var(--inchiostro); box-shadow: 0 12px 26px rgba(30, 26, 18, .12); }
.vetrino.chiaro::before { background: var(--pergamena); }
.vetrino.chiaro strong { color: var(--ceralacca); }
#bigidea .vetrino { margin-top: 24px; }
#congedo .vetrino { margin-top: 26px; }
#prodotto .vetrino::before, #bigidea .vetrino::before, #congedo .vetrino::before { background: #17402B; }
/* la sub dell'apertura: già nel suo filetto, il benessere evidenziato */
/* i titoli di sezione: la riga d'oro si disegna */
.riga-sez h2::after { transform: scaleX(0); transition: transform .8s .2s; }
.riga-sez h2.in-vista::after, .riga-sez:hover h2::after { transform: scaleX(1); }
/* i capitoli e le testimonianze: un leggero galleggiare quando arrivano */
.capitoli li { transition: transform .3s; } .capitoli li:hover { transform: translateX(4px); }

.punti { z-index: 4; }
.a-strati .vista { height: 52svh; }

/* ═════ MOCKUP: la guida al centro, i tre bonus a ventaglio, la USP sotto ═════ */
#mockup { padding: 30px var(--gutter) 60px; text-align: center; background: radial-gradient(70% 45% at 50% 35%, #2A5A3C, var(--bosco) 75%); overflow: hidden; }
.mk-scena { position: relative; height: min(112vw, 470px); max-width: 460px; margin: 0 auto; }
.mk-alone { position: absolute; inset: 8% 10%; background: radial-gradient(circle, rgba(241, 213, 140, .35), transparent 65%); animation: aura 5s ease-in-out infinite alternate; }
.mk-libro { position: absolute; left: 50%; top: 4%; width: min(54vw, 230px); margin: 0; transform: translateX(-50%) perspective(1000px) rotateY(-14deg); animation: galleggia 5s ease-in-out infinite alternate; z-index: 3; }
.mk-libro .libro-fronte { padding: 22px 16px; }
.mk-libro .cop-titolo { font-size: clamp(1.45rem, 6.6vw, 1.9rem); margin-top: 8px; }
.mk-libro .cop-usp { font-size: .9rem !important; }
.mk-bonus { position: absolute; width: min(29vw, 124px); z-index: 2; animation: galleggia 6s ease-in-out infinite alternate; }
.mk-bonus .cop-bonus p { font-size: .82rem !important; }
.mk-b1 { left: 2%; top: 30%; transform: rotate(-12deg); animation-delay: -1s; }
.mk-b2 { right: 2%; top: 30%; transform: rotate(11deg); animation-delay: -2s; }
.mk-b3 { left: 50%; bottom: 0; transform: translateX(-50%) rotate(-3deg); z-index: 4; animation-delay: -3s; }
@keyframes galleggia { to { translate: 0 -10px; } }
.mk-piu { display: inline-block; margin-top: 14px; font-family: var(--font-titolo); font-style: italic; font-size: 1.15rem; color: var(--crema-t); border: 1px solid rgba(217, 178, 94, .55); padding: 6px 16px; border-radius: 999px; }
.mk-piu b { color: var(--oro2); }
.mk-usp { max-width: 36rem; margin: 18px auto 0; font-family: var(--font-titolo); font-weight: 700; font-size: clamp(1.45rem, 6.4vw, 2.3rem); line-height: 1.25; color: var(--crema-t); }
.mk-usp .oro { background: var(--oro-testo); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.mk-usp strong { color: var(--oro2); background: linear-gradient(transparent 80%, rgba(217, 178, 94, .45) 80%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: reduce) { .mk-libro, .mk-bonus, .mk-alone { animation: none; } }

.mk-titolo { width: 100%; align-self: center; margin-top: 0 !important; }
.mk-libro { width: min(62vw, 250px); }
.mk-libro .cop-usp { font-size: 16.5px !important; line-height: 1.25; }
.mk-scena { height: min(128vw, 520px); }
.mk-bonus { width: min(30vw, 128px); }
.mk-b1, .mk-b2 { top: 42%; }

.mk-scena { height: min(150vw, 600px); }
.mk-libro { top: 0; width: min(58vw, 240px); }
.mk-bonus { width: min(28vw, 120px); z-index: 4; }
.mk-b1 { left: 4%; top: auto; bottom: 3%; transform: rotate(-9deg); }
.mk-b2 { right: 4%; left: auto; top: auto; bottom: 3%; transform: rotate(9deg); }
.mk-b3 { bottom: 0; z-index: 5; }

.mk-scena { height: min(122vw, 500px); }

/* ═════ GRAFICHE VERE (20/10): logo e mockup di chi lavora al posto delle copertine in codice ═════ */
.logo-hero { display: block; width: 64px; height: auto; margin: 0 auto 10px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.mk-scena { height: auto !important; max-width: 520px; padding: 6px 0 0; }
.mk-bundle { position: relative; z-index: 2; display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .5)); animation: galleggia 6s ease-in-out infinite alternate; }
.mockup-guida { display: block; width: min(100%, 560px); height: auto; margin: 14px auto 30px; filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .45)); }
[data-bonus] { grid-template-columns: 1fr; text-align: center; }
.cop-bonus-img { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; filter: drop-shadow(0 12px 16px rgba(30, 20, 10, .35)); }
.offerta-bundle { display: block; width: min(100%, 360px); height: auto; margin: -6px auto 14px; filter: drop-shadow(0 14px 18px rgba(30, 20, 10, .3)); }
.logo-piede { display: block; width: 210px; height: auto; margin: 0 auto 12px; background: var(--pergamena); border-radius: 12px; padding: 4px 14px; box-shadow: inset 0 0 0 1.5px rgba(167, 127, 46, .6); }
@media (prefers-reduced-motion: reduce) { .mk-bundle { animation: none; } }
img.volto { width: 60px; height: 60px; object-fit: cover; padding: 3px; background: radial-gradient(circle at 35% 30%, #B23A28, var(--ceralacca) 60%, #5E1E16); }