/* ══════════ stile.css — Abitudini Centenarie · preset dr-int21 ══════════
   La struttura di INT21 (titoli serif centrati, card bianche col bordo, pill, tab, carosello,
   footer scuro) col mondo di una zona blu: calce, ocra zafferano, blu porta, verde oliva. */
:root {
  --calce: #F7F4EC; --calce-2: #EFE9DC; --azzurro: #DCE6EE; --ocra: #D99A1E; --ocra-testo: #94600A;
  --blu: #1C3D6B; --notte: #122238; --oliva: #5E6E2E; --inchiostro: #1A1F2B;
  --fondo: var(--calce); --testo: var(--inchiostro); --tenue: #4A5160; --accento: var(--ocra); --ris: #4F6A1C;
  --evid: rgba(242, 193, 78, .55); --mano-colore: #B5571C;
  --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='%23D99A1E' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --corpo: 19px; --riga: 1.55;
  --font-titolo: "Playfair Display", Georgia, serif; --font-corpo: "Figtree", system-ui, sans-serif;
  --bottone-fondo: var(--blu); --bottone-testo: #fff; --raggio: 999px; --gutter: 20px;
}
html { scroll-padding-top: 70px; }
body { padding-top: 62px; }
main > section { position: relative; padding: 64px var(--gutter); }
.centro { text-align: center; }
em { font-style: italic; }

/* ── testata fissa (INT21: logo a sinistra, un tasto a destra) ── */
.testata { position: fixed; inset: 0 0 auto 0; z-index: 80; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: color-mix(in srgb, var(--calce) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid #E4DCCB; }
.logo { min-width: 0; display: flex; align-items: center; gap: 9px; text-decoration: none; font: 800 1.12rem/1 var(--font-titolo); color: var(--blu); }
.logo i { color: var(--ocra-testo); }
.logo-sole { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ocra); color: #fff; font: 800 .74rem/1 var(--font-corpo); letter-spacing: -.02em; box-shadow: 0 0 0 3px #F6DFA8; }
.testata-prezzo { flex: none; font: 700 .95rem/1 var(--font-corpo); text-decoration: none; color: #fff; background: var(--blu); padding: 10px 14px; border-radius: 999px; white-space: nowrap; }

/* ── titoli e righe ── */
.titolo-sezione { font: 800 clamp(1.9rem, 7.6vw, 3rem)/1.12 var(--font-titolo); letter-spacing: -.01em; text-align: center; max-width: 22ch; margin: 0 auto 18px; text-wrap: balance; }
.titolo-sezione em { color: var(--ocra-testo); font-weight: 800; background: linear-gradient(transparent 70%, #F6DFA8 70%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.riga { max-width: 34rem; margin: 0 auto 18px; font-size: 1.1rem; }
.riga-grande { max-width: 34rem; margin: 0 auto 14px; font-size: 1.2rem; line-height: 1.45; text-align: center; }
.riga strong, .riga-grande strong { color: var(--blu); }
.occhiello { text-align: center; font: 800 1.04rem/1 var(--font-corpo); letter-spacing: .14em; color: var(--ocra-testo); margin-bottom: 12px; }
.forte { font-size: 1.12rem; }

/* ── bottoni ── */
.bottone { box-shadow: 0 10px 24px -10px rgba(28, 61, 107, .55); transition: transform .2s; font-size: 1.1rem; }
.bottone:active { transform: scale(.97); }
.bottone-grande { min-height: 62px; font-size: 1.18rem; padding: 0 2em; }
.bottone-pieno { width: 100%; }
.bottone-ocra { background: var(--ocra); color: var(--notte); box-shadow: 0 10px 24px -10px rgba(217, 154, 30, .8); }
.rischio { color: var(--tenue); font-size: 1.06rem; }
.rischio s { opacity: .75; }

/* ═══ s01 APERTURA ═══ */
#apertura { padding-top: 26px; padding-bottom: 30px; text-align: center; overflow: hidden; }
.archi { position: absolute; inset: auto -20% -10% -20%; width: 140%; height: auto; z-index: -1; opacity: .9; }
.archi path { fill: var(--azzurro); }
.apertura-testo { max-width: 40rem; margin: 0 auto; }
.pre { display: inline-block; font: 800 1.04rem/1.3 var(--font-corpo); letter-spacing: .12em; color: var(--blu); background: #fff; border: 1.5px solid var(--blu); border-radius: 999px; padding: 8px 14px; margin-bottom: 16px; }
.titolone { font-family: var(--font-titolo); color: var(--inchiostro); line-height: 1.02; letter-spacing: -.015em; margin: 0 auto 14px; }
.titolone > span { display: block; }
.titolone .l1 { font: 700 1.55rem/1.15 var(--font-titolo); color: var(--tenue); }
.titolone .l2 { font-size: 2.85rem; font-weight: 900; margin: .04em 0 .06em; }
.titolone .l2 em { color: var(--ocra-testo); position: relative; white-space: nowrap; padding: 0 .04em; }
.segno { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13 C 70 4, 150 18, 220 8 S 285 9, 296 12' fill='none' stroke='%231C3D6B' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 98%; background-size: 0% .24em; transition: background-size 1s cubic-bezier(.6,.1,.2,1) .5s; padding-bottom: .08em; }
.segno.in-vista { background-size: 100% .24em; }
.titolone .l3 { font: 800 2rem/1 var(--font-titolo); display: flex !important; align-items: baseline; justify-content: center; gap: .18em; }
.cento { font: 900 4.6rem/.9 var(--font-titolo); color: var(--blu); font-variant-numeric: tabular-nums; min-width: 2.05ch; display: inline-block; text-shadow: 4px 4px 0 #F6DFA8; }
.titolone .l4 { font: 600 1.32rem/1.25 var(--font-corpo); letter-spacing: 0; color: var(--inchiostro); margin-top: .35em; }
.titolone .l4 { text-wrap: balance; }
.sub { font-size: 1.08rem; line-height: 1.45; max-width: 30rem; margin: 0 auto 18px; color: var(--tenue); }
#apertura .bottone { width: 100%; max-width: 26rem; }
.cornice-foto { position: relative; margin: 26px auto 0; max-width: 46rem; border-radius: 22px; overflow: visible; }
.paese { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 24px 50px -24px rgba(18, 34, 56, .45); border: 6px solid #fff; }
.paese .sole { animation: sole 9s ease-in-out infinite alternate; transform-origin: 300px 74px; }
@keyframes sole { from { transform: translateY(8px) scale(.96); } to { transform: translateY(-6px) scale(1.04); } }
.bollino { position: absolute; top: -14px; right: -6px; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--ocra); color: #fff; font: 800 1.3rem/1 var(--font-titolo); border: 4px solid #fff; box-shadow: 0 8px 18px -6px rgba(0,0,0,.3); transform: rotate(8deg); }
.didascalia { position: absolute; left: 14px; bottom: 14px; background: rgba(18, 34, 56, .82); color: #fff; font-size: .95rem; padding: 6px 12px; border-radius: 999px; text-align: left; max-width: calc(100% - 28px); }

/* striscia dei luoghi */
.striscia { background: var(--blu); color: #fff; overflow: hidden; padding: 13px 0; }
.striscia-nastro { display: flex; width: max-content; animation: nastro 26s linear infinite; }
.striscia-nastro span { font: 700 italic 1.15rem/1 var(--font-titolo); padding: 0 22px; white-space: nowrap; }
.striscia-nastro span::after { content: "✦"; color: var(--ocra); font-style: normal; margin-left: 44px; }
@keyframes nastro { to { transform: translateX(-50%); } }

/* ═══ s02 CHE COS'È ═══ */
.card-sfumata { max-width: 46rem; margin: 0 auto; border-radius: 30px; padding: 40px 20px 30px; background: linear-gradient(170deg, #E4EDF4 0%, #F7F4EC 70%); border: 1px solid #D4DFE9; }
.mockup { position: relative; height: 300px; margin: 18px auto 22px; max-width: 360px; perspective: 900px; }
.tablet { position: absolute; left: 4%; top: 6px; width: 62%; aspect-ratio: 3/4; background: #1B1F27; border-radius: 18px; padding: 10px; box-shadow: 0 30px 50px -24px rgba(18,34,56,.6); transform: rotate(-8deg); }
.libro { position: absolute; right: 2%; top: 60px; width: 46%; aspect-ratio: 5/7; border-radius: 3px 10px 10px 3px; box-shadow: -6px 0 0 #C7BBA2 inset, 0 28px 40px -20px rgba(18,34,56,.55); transform: rotate(9deg); overflow: hidden; }
.copertina { height: 100%; border-radius: 8px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px 12px; text-align: left; position: relative; overflow: hidden; }
.copertina b { font: 900 1.25rem/1.05 var(--font-titolo); }
.copertina small { font: 600 .74rem/1.25 var(--font-corpo); opacity: .9; }
.cop-guida { background: radial-gradient(circle at 70% 26%, #F2C14E 0 19%, transparent 19.5%), linear-gradient(180deg, #DCE6EE 0 46%, #1C3D6B 46% 100%); color: #fff; }
.libro .cop-guida { border-radius: 0; }
.cop-sole { position: absolute; top: 14%; right: 16%; font: 900 1.1rem/1 var(--font-titolo); color: var(--blu); }
.pillole { list-style: none; padding: 0; display: grid; gap: 10px; max-width: 26rem; margin: 0 auto; }
.pillole li { background: #fff; border: 1px solid #E2DACA; border-radius: 999px; padding: 12px 18px 12px 48px; position: relative; font-weight: 600; font-size: 1.08rem; }
.pillole li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--oliva) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%; }

/* ═══ s03 BENEFICI (INT21 «Cosa otterrai») ═══ */
#benefici { background: #F3EEE2; }
.card-bianca { max-width: 46rem; margin: 0 auto; background: #fff; border-radius: 28px; padding: 36px 20px 18px; box-shadow: 0 20px 40px -30px rgba(18,34,56,.35); }
.card-bianca .riga { text-align: center; }
.beneficio { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid #ECE5D6; }
.beneficio h3 { font: 800 1.3rem/1.2 var(--font-titolo); margin-bottom: 6px; }
.beneficio p { font-size: 1.08rem; color: var(--tenue); }
.icona { width: 56px; height: 56px; border-radius: 14px; background: #FBF1DA; display: grid; place-items: center; }
.icona svg { width: 34px; height: 34px; fill: none; stroke: var(--ocra-testo); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.icona.da-disegnare svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.icona.disegnato svg * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s ease .2s; }

/* ═══ s04 PROBLEMA · la scala delle rinunce ═══ */
.titolo-mano { font-size: clamp(1.9rem, 7.4vw, 2.8rem); }
.titolo-mano .mano { padding-bottom: .1em; }
.scala { list-style: none; padding: 0; margin: 30px auto 0; max-width: 30rem; display: grid; gap: 8px; }
.scala li { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #E2DACA; border-radius: 16px; padding: 12px 16px; transition: background .9s, color .9s, opacity .9s, transform .9s; }
.scala li:nth-child(1) { margin-left: 0; } .scala li:nth-child(2) { margin-left: 6%; } .scala li:nth-child(3) { margin-left: 12%; } .scala li:nth-child(4) { margin-left: 18%; } .scala li:nth-child(5) { margin-left: 24%; }
.scala b { font: 900 1.9rem/1 var(--font-titolo); color: var(--blu); min-width: 2.2ch; }
.scala span { font-size: 1.04rem; font-weight: 600; }
.scala li.in-vista { background: #E7E3DB; color: #5C5A55; transform: translateY(4px); }
.scala li.in-vista b { color: #8A8478; }
.scala li:nth-child(5).in-vista { background: var(--notte); color: #fff; }
.scala li:nth-child(5).in-vista b { color: var(--ocra); }

/* ═══ s05 NEMICO · lo scontrino ═══ */
#nemico { background: #F3EEE2; }
.scontrino { position: relative; max-width: 330px; margin: 6px auto 28px; background: #FFFEFA; padding: 24px 22px 34px; font: 600 1rem/1.4 "Courier New", monospace; color: #2B2B2B; box-shadow: 0 18px 30px -20px rgba(0,0,0,.4); transform: rotate(-1.5deg); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; }
.sc-testa { text-align: center; font-weight: 800; letter-spacing: .04em; border-bottom: 2px dashed #bbb; padding-bottom: 10px; margin-bottom: 10px; font-size: 1.04rem; }
.sc-riga, .sc-totale { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 1.05rem; }
.sc-totale { border-top: 2px dashed #bbb; margin-top: 8px; padding-top: 10px; font-weight: 800; font-size: 1.12rem; }
.timbro { position: relative; display: table !important; margin: 16px auto 0; right: auto; top: auto; font-size: 1.9rem; color: #B23A2A; border: 3px solid #B23A2A; border-radius: 10px; padding: 0 10px; transform: rotate(-12deg); background: rgba(255,254,250,.85); }

/* ═══ s06 BIG IDEA · la torta ═══ */
#bigidea { text-align: center; }
#bigidea .gigante { font-weight: 900; max-width: 14ch; margin: 0 auto 26px; font-size: clamp(2.4rem, 11vw, 4.6rem); line-height: 1.02; }
#bigidea .gigante .ris { color: var(--ocra-testo); font-style: italic; }
.torta { position: relative; width: 240px; height: 240px; margin: 0 auto 26px; }
.torta svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.torta circle { fill: none; stroke-width: 30; }
.t-fondo { stroke: #E8E1D2; }
.t-geni { stroke: #9AA3B2; stroke-dasharray: 25 100; }
.t-tu { stroke: var(--ocra); stroke-dasharray: 75 100; stroke-dashoffset: -25; }
.torta.da-disegnare .t-tu { stroke-dasharray: 0 100; }
.torta.disegnato .t-tu { stroke-dasharray: 75 100; transition: stroke-dasharray 1.6s cubic-bezier(.6,.1,.2,1) .2s; }
.torta-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.torta-centro b { font: 900 3.2rem/1 var(--font-titolo); color: var(--blu); }
.torta-centro > span { font-weight: 700; font-size: 1.05rem; }
.torta-geni { position: absolute; top: 6px; right: -8px; background: #fff; border: 1px solid #ccc; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .95rem; color: #5A6272; }
#bigidea .riga { text-align: left; }
.nota-riga { text-align: center; }
.nota { font-size: 1.9rem; }

/* ═══ s07 COME FUNZIONA · l'atlante (INT21: carosello delle sfide) ═══ */
#meccanismo { text-align: center; padding-left: 0; padding-right: 0; }
#meccanismo > .titolo-sezione, #meccanismo > .riga { padding: 0 var(--gutter); }
#meccanismo .riga { text-align: left; }
.carosello { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px var(--gutter) 20px; scrollbar-width: none; text-align: left; }
.carosello::-webkit-scrollbar { display: none; }
.tappa { flex: 0 0 82%; max-width: 340px; scroll-snap-align: center; background: #fff; border: 1px solid #E2DACA; border-radius: 22px; overflow: hidden; box-shadow: 0 16px 30px -24px rgba(18,34,56,.4); }
.tappa-foto { position: relative; aspect-ratio: 4/3; background: var(--azzurro); }
.tappa-foto svg { width: 100%; height: 100%; display: block; }
.pill { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--inchiostro); font: 800 .82rem/1 var(--font-corpo); letter-spacing: .08em; padding: 7px 12px; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(0,0,0,.3); }
.tappa-testo { padding: 18px 18px 20px; }
.tappa h3 { font: 800 1.32rem/1.2 var(--font-titolo); margin-bottom: 6px; }
.meta { color: var(--ocra-testo); font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.tappa p { font-size: 1.08rem; }
.link-tappa { display: inline-block; margin-top: 12px; font: 800 .92rem/1 var(--font-corpo); letter-spacing: .05em; text-transform: uppercase; color: var(--blu); text-decoration: none; }
.puntini { display: flex; justify-content: center; gap: 7px; margin: 4px 0 26px; }
.puntini i { width: 8px; height: 8px; border-radius: 99px; background: #D8CDB6; transition: width .3s, background .3s; }
.puntini i.su { width: 26px; background: var(--ocra); }

/* ═══ s08 SOGNO · il film verticale (INT21: video della coach) ═══ */
#sogno { background: #F3EEE2; }
.film { max-width: 330px; margin: 0 auto 30px; background: #fff; padding: 10px; border-radius: 26px; box-shadow: 0 30px 50px -28px rgba(18,34,56,.55); }
.film-dentro { position: relative; aspect-ratio: 9/16; border-radius: 18px; overflow: hidden; background: var(--calce-2); perspective: 700px; }
.film-cielo { position: absolute; inset: 9% 12% 28%; background: linear-gradient(#F7C77A, #F6E3C0 55%, #BFD6E8); overflow: hidden; border-radius: 4px; }
.film-sole { position: absolute; left: 50%; top: 58%; width: 70px; height: 70px; margin-left: -35px; border-radius: 50%; background: #F2A93B; box-shadow: 0 0 40px 14px rgba(242,169,59,.5); }
.film-mare { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(#3D72A4, #1C3D6B); }
.film-colline { position: absolute; left: -10%; right: -10%; bottom: 30%; height: 18%; background: #8C9A5B; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.persiana { position: absolute; top: 9%; bottom: 28%; width: 38%; background: repeating-linear-gradient(180deg, #1C3D6B 0 12px, #15325A 12px 15px); border: 5px solid #14305A; transform-origin: left center; }
.persiana.sx { left: 12%; transform: rotateY(-108deg); }
.persiana.dx { right: 12%; transform-origin: right center; transform: rotateY(108deg); }
.film-davanzale { position: absolute; left: 7%; right: 7%; top: 72%; height: 4%; background: #D8CBB2; border-radius: 3px; box-shadow: 0 6px 10px -4px rgba(0,0,0,.25); }
.sottotitolo { position: absolute; left: 10px; right: 10px; bottom: 9%; text-align: center; }
.sottotitolo span { display: none; background: rgba(18,34,56,.86); color: #fff; font: 800 1.22rem/1.25 var(--font-corpo); padding: 8px 14px; border-radius: 12px; }
.sottotitolo span:first-child, .sottotitolo span.su { display: inline-block; }
.sottotitolo.attivo span:first-child:not(.su) { display: none; }
.muto { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(18,34,56,.7); display: grid; place-items: center; }
.muto svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; }
#sogno .titolo-sezione em { color: var(--ocra-testo); }

/* ═══ s09 IL CONTO (INT21: il modulo contatti) ═══ */
.modulo { max-width: 34rem; margin: 0 auto; background: #fff; border: 1.5px solid #E2DACA; border-radius: 26px; padding: 30px 20px 24px; }
.modulo .titolo-sezione { font-size: clamp(1.7rem, 6.8vw, 2.4rem); }
.campo { display: block; background: var(--calce); border: 1px solid #E2DACA; border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; font-weight: 700; }
.campo-riga { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.campo input { flex: 1; accent-color: var(--blu); height: 32px; }
.eta-n { font: 900 2.4rem/1 var(--font-titolo); color: var(--blu); min-width: 2.2ch; text-align: right; }
.risultato { font-size: 1.15rem; line-height: 1.5; margin-bottom: 20px; text-align: center; }
.risultato .ris { color: var(--ris); white-space: nowrap; }

/* ═══ s10 BONUS (INT21: box «in regalo»), copertine senza cornici ═══ */
#bonus { background: #F3EEE2; text-align: center; }
.regalo { display: flex; align-items: center; justify-content: center; gap: 8px; }
.regalo svg, .ir-testa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bonus { max-width: 30rem; margin: 34px auto 0; }
.bonus .copertina { width: 62%; max-width: 230px; aspect-ratio: 5/7; height: auto; margin: 0 auto 16px; border-radius: 4px 12px 12px 4px; box-shadow: -7px 0 0 rgba(0,0,0,.18) inset, 0 26px 36px -20px rgba(18,34,56,.6); transform: rotate(-3deg); }
.bonus:nth-of-type(even) .copertina { transform: rotate(3deg); }
.cop-n { position: absolute; top: 12px; left: 14px; font: 900 2.6rem/1 var(--font-titolo); opacity: .9; }
.cop-b1 { background: linear-gradient(160deg, #E9B44C, #C9821A); color: #1F1A10; }
.cop-b2 { background: linear-gradient(160deg, #6F8236, #44521F); color: #fff; }
.cop-b3 { background: linear-gradient(160deg, #2C5590, #14305A); color: #fff; }
.bonus h3 { font: 800 1.45rem/1.2 var(--font-titolo); margin-bottom: 6px; }
.bonus p { font-size: 1.08rem; }
.bonus-prezzo { margin-top: 10px; font-size: 1.2rem !important; }
.bonus-prezzo s { color: #8A8478; margin-right: 6px; }
.bonus-prezzo b { background: var(--oliva); color: #fff; padding: 4px 12px; border-radius: 999px; font-weight: 800; letter-spacing: .06em; }

/* ═══ s11 TESTIMONIANZE ═══ */
#testimonianze { padding-left: 0; padding-right: 0; }
#testimonianze > .titolo-sezione { padding: 0 var(--gutter); }
.voci blockquote { flex: 0 0 85%; max-width: 360px; scroll-snap-align: center; background: #fff; border: 1px solid #E2DACA; border-radius: 22px; padding: 22px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.voci blockquote p { font-size: 1.08rem; line-height: 1.5; }
.voci blockquote p::before { content: "“"; display: block; font: 900 3rem/.6 var(--font-titolo); color: var(--ocra); margin: 8px 0 6px; }
.voci footer { display: flex; align-items: center; gap: 12px; }
.voci cite { font-style: normal; font-weight: 800; line-height: 1.25; }
.voci cite small { font-weight: 600; color: var(--tenue); font-size: .95rem; }
.faccia { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 800 1.3rem/1 var(--font-titolo); color: #fff; flex: none; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ocra); }
.f1 { background: #C2457A; } .f2 { background: #1C3D6B; } .f3 { background: #B5643C; } .f4 { background: #5E6E2E; } .f5 { background: #7A5C9E; } .f6 { background: #2E7D7A; } .f7 { background: #C9821A; } .f8 { background: #44526B; }

/* ═══ s12 OFFERTA (INT21: tre pill + card col bordo) ═══ */
#offerta { text-align: center; background: linear-gradient(#F7F4EC, #EEF3F7); }
.tab-domanda { font: 800 1.1rem/1 var(--font-corpo); margin: 18px 0 12px; }
.tab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 30rem; margin: 0 auto 26px; }
.tab button { position: relative; background: #fff; border: 1.5px solid #D9CFBB; border-radius: 16px; padding: 14px 6px; font: 900 1.3rem/1 var(--font-titolo); color: var(--inchiostro); cursor: pointer; transition: border-color .25s, background .25s, transform .25s; }
.tab button[aria-selected="true"] { border-color: var(--ocra); background: #FBF1DA; transform: translateY(-3px); box-shadow: 0 10px 18px -12px rgba(217,154,30,.9); }
.tab button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 14px; height: 14px; margin-left: -7px; background: #FBF1DA; border-right: 1.5px solid var(--ocra); border-bottom: 1.5px solid var(--ocra); transform: rotate(45deg); }
.card-prezzo { position: relative; max-width: 30rem; margin: 0 auto; text-align: left; background: #fff; border: 2px solid var(--ocra); border-radius: 26px; padding: 34px 20px 24px; box-shadow: 0 30px 50px -30px rgba(18,34,56,.45); }
.badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--ocra); color: var(--notte); font: 800 .85rem/1 var(--font-corpo); letter-spacing: .1em; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
.cp-titolo { font: 800 1.6rem/1.15 var(--font-titolo); transition: opacity .25s; }
.cp-prezzo { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 4px; white-space: nowrap; }
.cp-prezzo .gigante { font-size: 4.2rem; font-weight: 900; color: var(--ocra-testo); white-space: nowrap; }
.cp-prezzo s { font-size: 1.6rem; color: #8A8478; text-decoration: none; }
.cp-unico { font-size: 1.06rem; color: var(--tenue); margin-bottom: 16px; }
.in-regalo { background: #FBF1DA; border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; }
.ir-testa { display: flex; align-items: center; gap: 8px; font: 800 .92rem/1 var(--font-corpo); letter-spacing: .1em; color: var(--ocra-testo); margin-bottom: 8px; }
.in-regalo ul { margin: 0; padding-left: 1.1em; }
.in-regalo li { font-size: 1.06rem; font-weight: 600; }
.in-regalo small { color: var(--tenue); font-weight: 400; font-size: .95rem; }
.spunte { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.spunte li { position: relative; padding-left: 32px; font-size: 1.08rem; }
.spunte li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: #E6EBD6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%235E6E2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%; }
#cp-spunta { transition: opacity .25s; }
.card-prezzo .bottone { background: var(--notte); }

/* ═══ s13 GARANZIA ═══ */
#garanzia { text-align: center; }
.sigillo { position: relative; width: 190px; height: 190px; margin: 0 auto 18px; }
.sigillo svg { width: 100%; height: 100%; overflow: visible; }
.s-bordo { fill: #FBF1DA; stroke: var(--ocra); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sigillo.da-disegnare .s-bordo { stroke-dashoffset: 1; }
.sigillo.disegnato .s-bordo { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease; }
.s-gira { transform-origin: 100px 100px; animation: gira 30s linear infinite; }
.s-gira text { font: 800 14.5px var(--font-corpo); letter-spacing: 2px; fill: var(--ocra-testo); }
@keyframes gira { to { transform: rotate(360deg); } }
.sigillo-centro { position: absolute; inset: 0; display: grid; place-content: center; line-height: 1; }
.sigillo-centro b { font: 900 3.6rem/1 var(--font-titolo); color: var(--blu); }
.sigillo-centro span { font-weight: 800; font-size: 1rem; }

/* ═══ s14 DOMANDE (INT21: card col bordo, chevron in colore) ═══ */
#domande { background: #F3EEE2; }
#domande details { max-width: 36rem; margin: 0 auto 10px; background: #fff; border: 1px solid #E2DACA; border-radius: 16px; padding: 0 18px; }
#domande summary { font: 800 1.15rem/1.3 var(--font-titolo); }
#domande summary::after { content: ""; width: 10px; height: 10px; border-right: 2.5px solid var(--ocra); border-bottom: 2.5px solid var(--ocra); transform: rotate(45deg); top: 1.35em; right: .4em; }
#domande details[open] summary::after { transform: rotate(-135deg); }
#domande details > p { font-size: 1.08rem; }

/* ═══ s15 CONGEDO + piede scuro ═══ */
#congedo { padding: 0; background: var(--notte); color: #fff; }
.congedo-dentro { padding: 76px var(--gutter) 60px; text-align: center; background: radial-gradient(ellipse at 50% 120%, rgba(242,169,59,.45), transparent 60%); }
#congedo .gigante { font-weight: 900; max-width: 13ch; margin: 0 auto 20px; }
#congedo .gigante em { color: #F2C14E; }
#congedo .riga { color: #DCE3EC; }
.piede { border-top: 1px solid rgba(255,255,255,.14); padding: 30px var(--gutter) 110px; font-size: 16.5px; color: #B7C2D3; display: grid; gap: 12px; max-width: 46rem; margin: 0 auto; }
.piede-logo { font: 800 1.2rem/1 var(--font-titolo); color: #fff; display: flex; align-items: center; gap: 10px; }
.piede-logo i { color: #F2C14E; }
.piede a { color: #fff; }

/* barra d'acquisto */
[data-barra-acquisto] { background: var(--notte); color: #fff; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.barra-prezzo s { opacity: .6; } .barra-prezzo b { font: 900 1.5rem/1 var(--font-titolo); color: #F2C14E; white-space: nowrap; }
[data-barra-acquisto] .bottone { background: var(--ocra); color: var(--notte); }

/* ── computer ── */
@media (min-width: 760px) {
  main > section { padding: 96px 40px; }
  .titolone .l1 { font-size: 2.2rem; } .titolone .l2 { font-size: 4.6rem; } .titolone .l3 { font-size: 3rem; } .cento { font-size: 7rem; } .titolone .l4 { font-size: 1.7rem; }
  .card-sfumata { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 40px; padding: 50px; text-align: left; }
  .card-sfumata > * { grid-column: 1; } .card-sfumata .titolo-sezione, .card-sfumata .riga-grande { text-align: left; margin-left: 0; }
  .card-sfumata .mockup { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .card-bianca { padding: 50px; }
  .tappa { flex-basis: 320px; } .voci blockquote { flex-basis: 340px; }
  .carosello { justify-content: flex-start; padding-left: max(40px, calc(50vw - 560px)); }
  #bonus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1100px; margin: 0 auto; }
  #bonus > .occhiello, #bonus > .titolo-sezione, #bonus > .riga { grid-column: 1 / -1; }
  #bonus .bonus { margin-top: 10px; }
}

@media (max-width: 400px) { .logo { font-size: 1rem; } }
.logo > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testata { padding-right: 130px; } .testata-prezzo { position: absolute; right: 12px; top: 13px; } .logo > span:last-child { min-width: 0; }
main { overflow-x: clip; } #prodotto { overflow-x: clip; }

/* ══════════ giro 2 · più stile e più movimento ══════════ */
/* grana di carta su tutta la pagina */
body::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .07; mix-blend-mode: multiply; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* onde fra un fondo e l'altro */
section[data-onda] { margin-top: 26px; }
section[data-onda]::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 27px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 27' preserveAspectRatio='none'%3E%3Cpath d='M0 27 V14 C 60 0, 120 0, 200 13 S 340 26, 400 10 V27Z' fill='%23F3EEE2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* illustrazione dell'apertura: respira, i gabbiani passano */
.paese { overflow: hidden; }
.kb { transform-origin: 200px 140px; animation: kb 16s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08) translate(-6px, 3px); } }
.gabbiani path { animation: vola 14s linear infinite; }
.gabbiani .g1 { animation-duration: 15s; } .gabbiani .g2 { animation-duration: 19s; animation-delay: -6s; } .gabbiani .g3 { animation-duration: 23s; animation-delay: -12s; }
@keyframes vola { 0% { transform: translate(-40px, 60px); } 50% { transform: translate(200px, 36px); } 100% { transform: translate(440px, 52px); } }
.bouganville circle { transform-box: fill-box; transform-origin: center; animation: dondola 3.4s ease-in-out infinite alternate; }
.bouganville circle:nth-child(2n) { animation-delay: -1.7s; }
@keyframes dondola { to { transform: translate(1.5px, -1.5px) scale(1.08); } }
.bollino { animation: bollino 3.2s ease-in-out infinite; }
@keyframes bollino { 0%, 100% { transform: rotate(8deg) scale(1); } 50% { transform: rotate(-4deg) scale(1.07); } }

/* il bottone luccica */
.luccica { position: relative; overflow: hidden; }
.luccica::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); animation: luccica 3.6s ease-in-out infinite 1.2s; }
@keyframes luccica { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* corsivi dei titoli: l'evidenziatore si stende */
.titolo-sezione em[data-vista] { background: linear-gradient(#F6DFA8, #F6DFA8) no-repeat 0 88% / 0% .32em; transition: background-size 1s cubic-bezier(.6,.1,.2,1) .3s; }
.titolo-sezione em[data-vista].in-vista { background-size: 100% .32em; }

/* la scala: ogni gradino si spegne quando lo passi */
.scala li { transform-origin: left center; }
.scala li.in-vista { background: #fff; color: inherit; transform: none; }
.scala li.spento { background: #E7E3DB; color: #5C5A55; transform: translateY(4px) rotate(-1.2deg); }
.scala li.spento b { color: #8A8478; }
.scala li:nth-child(5).spento { background: var(--notte); color: #fff; transform: scale(1.04); box-shadow: 0 16px 30px -14px rgba(18,34,56,.7); }
.scala li:nth-child(5).spento b { color: var(--ocra); }

/* copertine dei bonus: galleggiano */
.bonus .copertina { animation: galleggia 5s ease-in-out infinite; }
.bonus:nth-of-type(2) .copertina { animation-delay: -1.6s; } .bonus:nth-of-type(3) .copertina { animation-delay: -3.2s; }
@keyframes galleggia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.bonus .copertina::after, .copertina.cop-guida::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%); background-size: 250% 100%; animation: riflesso 5s ease-in-out infinite; }
@keyframes riflesso { 0%, 40% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* candeline del conto: una per compleanno */
.candeline { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: -6px auto 20px; max-width: 26rem; }
.candeline i { width: 7px; height: 22px; border-radius: 2px; background: linear-gradient(#F6DFA8, #D99A1E); position: relative; }
.candeline i::before { content: ""; position: absolute; left: 50%; top: -9px; width: 7px; height: 9px; margin-left: -3.5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #FFF3C4, #F2A93B 60%, #E0611E); animation: fiamma .9s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.candeline i:nth-child(3n)::before { animation-delay: -.3s; } .candeline i:nth-child(3n+1)::before { animation-delay: -.6s; }
@keyframes fiamma { to { transform: scale(.82, 1.12) rotate(4deg); } }

/* fascia di maioliche */
.maiolica { height: 46px; background-color: var(--blu); background-image: radial-gradient(circle at 50% 50%, var(--ocra) 0 5px, transparent 5.5px), radial-gradient(circle at 0 0, #F7F4EC 0 9px, transparent 9.5px), radial-gradient(circle at 100% 0, #F7F4EC 0 9px, transparent 9.5px), radial-gradient(circle at 0 100%, #F7F4EC 0 9px, transparent 9.5px), radial-gradient(circle at 100% 100%, #F7F4EC 0 9px, transparent 9.5px), conic-gradient(from 45deg, #2C5590 0 25%, var(--blu) 0 50%, #2C5590 0 75%, var(--blu) 0); background-size: 46px 46px; animation: maiolica 18s linear infinite; }
@keyframes maiolica { to { background-position: 460px 0; } }

/* offerta: il bordo respira */
.card-prezzo { animation: respira 2.8s ease-in-out infinite; }
@keyframes respira { 0%, 100% { box-shadow: 0 30px 50px -30px rgba(18,34,56,.45), 0 0 0 0 rgba(217,154,30,.0); } 50% { box-shadow: 0 30px 50px -30px rgba(18,34,56,.45), 0 0 0 8px rgba(217,154,30,.18); } }

/* congedo: il sole sorge */
.congedo-dentro { position: relative; overflow: hidden; background: none; }
.alba-sole { position: absolute; left: 50%; bottom: -160px; width: 340px; height: 340px; margin-left: -170px; border-radius: 50%; background: radial-gradient(circle, #F7C77A 0 34%, rgba(242,169,59,.45) 50%, transparent 70%); z-index: 0; pointer-events: none; }
.congedo-dentro > *:not(.alba-sole) { position: relative; z-index: 1; }

/* l'atlante: il paesaggio si avvicina piano */
.tappa-foto svg { animation: kb 18s ease-in-out infinite alternate; transform-origin: center; }
.tappa { transition: transform .4s; }

@media (prefers-reduced-motion: reduce) { .scala li.spento { transform: none; } }
.alba-sole { opacity: .55; }
.scala li { transition: background .9s, color .9s, box-shadow .9s; }

/* ══════════ giro 3 · le foto vere ══════════ */
.paese { display: block; border-radius: 22px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 24px 50px -24px rgba(18,34,56,.45); aspect-ratio: 4/5; }
.paese img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: kb 16s ease-in-out infinite alternate; }
@media (min-width: 760px) { .paese { aspect-ratio: 16/9; } .paese img { object-position: 30% 40%; } }
.foto-tablet { padding: 0; overflow: hidden; background: none; border: 8px solid #fff; border-radius: 20px; }
.foto-tablet img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mockup { height: 330px; }
.foto-card { margin: -20px -6px 26px; border-radius: 22px; overflow: hidden; aspect-ratio: 4/3; }
.foto-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.foto-pastore { position: relative; max-width: 34rem; margin: 0 auto 24px; border-radius: 22px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 20px 40px -24px rgba(18,34,56,.5); }
.foto-pastore img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 40%; }
.foto-pastore figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(18,34,56,.85); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 1rem; }
.tappa-foto img { width: 100%; height: 100%; object-fit: cover; animation: kb 18s ease-in-out infinite alternate; }
.tappa-foto { overflow: hidden; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sottotitolo { z-index: 2; }
img.faccia { object-fit: cover; padding: 0; background: #ddd; }
.cop-foto { position: absolute; inset: 0 0 auto 0; width: 100%; height: 60%; object-fit: cover; }
.bonus .copertina { justify-content: flex-end; }
.bonus .copertina b, .bonus .copertina small { position: relative; z-index: 1; }
.cop-n { z-index: 2; background: rgba(255,255,255,.9); color: var(--notte); width: 1.4em; height: 1.4em; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem !important; }
.foto-congedo { max-width: 40rem; margin: 0 auto 30px; border-radius: 22px; overflow: hidden; aspect-ratio: 16/10; border: 5px solid rgba(255,255,255,.9); transform: rotate(-1.5deg); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.foto-congedo img { width: 100%; height: 100%; object-fit: cover; }
#garanzia { padding-bottom: 36px; } #domande { padding-top: 44px; }

/* desktop: l'apertura è azzurra a tutta larghezza, senza la fascia beige a destra degli archi */
@media (min-width: 760px) { #apertura { background: var(--azzurro); } #apertura .archi { display: none; } }