/* ============================================================
   SOLO PER LA LANDING (landing.html), dal 21/10/2026.
   assets/style.css lo usano anche il calcolatore, il sondaggio, la
   consulenza e /parliamone: le modifiche chieste da Marco per la landing
   stanno qui, così quelle pagine non cambiano. Si carica dopo style.css.
   ============================================================ */
/* ══ I TRE BENEFICI DELLA HERO (21/10/2026, Marco) ══
   Al posto delle quattro righe col pallino, i tre benefici del calcolatore
   «Numeri Senza Sorprese», con la stessa casella ambra spuntata a mano: il
   titolo in petrolio, il dettaglio in grigio sulla riga sotto. Classe a parte
   (.eroe-benefici) perché .eroe-elenco la usano anche le altre pagine. */
.eroe-elenco.eroe-benefici li { margin: 0; padding: 8px 0 8px 44px; line-height: 1.25; }
.eroe-elenco.eroe-benefici li::before {
  left: 0; top: 50%; width: 28px; height: 28px; border-radius: 8px;
  transform: translateY(-50%) rotate(-4deg);
  background: #F5B335 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L20 6' fill='none' stroke='%2306352D' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 19px no-repeat;
  box-shadow: 2px 2px 0 #06352D;
}
.eroe-elenco.eroe-benefici .evid-ambra {
  display: block; background: none; padding-inline: 0; margin-inline: 0;
  color: var(--petrolio); font-weight: 700; font-size: clamp(16px, 1.8vw, 22px);
}
.eroe-elenco.eroe-benefici .punto-dettaglio { display: block; margin-top: 1px; font-size: clamp(14px, 1.35vw, 17px); color: #666B70; }
@media (min-width: 900px) {
  .eroe-elenco.eroe-benefici li { padding: 9px 0 9px 50px; }
  .eroe-elenco.eroe-benefici li::before { width: 32px; height: 32px; background-size: 21px; }
}
@media (max-width: 560px) {
  .eroe-elenco.eroe-benefici li { padding-top: 5px; padding-bottom: 5px; }
}

/* ══ BARRA IN BASSO SUL TELEFONO (21/10/2026, Marco) ══
   Come la .s-barra di superallenatore.it: scura come la testata, fissa in
   basso, nascosta finché non comincia la prima sezione (la accende lo script
   in fondo a landing.html con .si-vede). Sul telefono la testata perde il suo
   pulsante, che farebbe doppio con questa barra; resta sul computer, dove la
   barra non c'è. */
.barra-fissa { display: none; }
@media (max-width: 860px) {
  .testata .wrap > .btn-ambra { display: none; }
  body { padding-bottom: 76px; }
  .barra-fissa {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: var(--iss-ck-h, 0px); z-index: 40;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    background: rgba(6,53,45,.97); border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 -8px 24px rgba(0,0,0,.14);
    transform: translateY(115%); opacity: 0; pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
  }
  .barra-fissa.si-vede { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .bf-testo { display: flex; flex-direction: column; flex-shrink: 0; line-height: 1.15; }
  .bf-testo b { font-size: 19px; font-weight: 800; color: #fff; }
  .bf-testo span { font-size: 11.5px; color: #C2FCD4; margin-top: 2px; }
  .barra-fissa .bf-btn {
    flex-grow: 1; display: flex; align-items: center; justify-content: center;
    min-height: 50px; padding: 0 12px; margin: 0; white-space: nowrap;
    font-size: min(18px, 4.5vw);
  }
}
/* sui telefoni più stretti (320-350 px) il pulsante intero non ci sta
   accanto alle «10 domande»: resta solo il pulsante */
@media (max-width: 350px) { .bf-testo { display: none; } }
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .barra-fissa { transition: none; }
}

/* ══ IL RISCHIO COME NELLA PAGINA DEL CALCOLATORE (21/10/2026, Marco) ══
   La seconda sezione è la stessa di numeri-senza-sorprese.html: qui sotto
   ci sono le misure finali di quella pagina, raccolte in un blocco solo e
   tutte sotto .sezione-rischio. Il titolo sul telefono usa l'Archivo STRETTO
   (il file con l'asse della larghezza, lo stesso del calcolatore e di
   superallenatore.it): si scarica solo se il titolo lo chiede. */
@font-face {
  font-family: "ArchivoL"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-larghezze-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "ArchivoL"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-larghezze-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* il fondo: bianco con due luci morbide e i quadretti di un foglio di calcolo che sfumano */
section.sezione-rischio {
  position: relative;
  background: radial-gradient(90% 50% at 100% 0%, rgba(3,122,98,.07), transparent 70%),
              radial-gradient(80% 45% at 0% 100%, rgba(243,166,59,.08), transparent 70%), #fff;
}
section.sezione-rischio::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(3,122,98,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(3,122,98,.07) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center top;
  -webkit-mask-image: radial-gradient(90% 60% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(90% 60% at 50% 0%, #000 0%, transparent 75%);
}
section.sezione-rischio > .wrap { position: relative; z-index: 1; }
.sezione-rischio .intro-sezione { margin-bottom: 0; }
/* titolo: nero col 53% in petrolio */
.sezione-rischio .rischio-titolo { font-size: clamp(20px, 2.73vw, 30px); font-weight: 800; line-height: 1.18; text-wrap: balance; color: #1F2328; }
.sezione-rischio .rischio-titolo .evid-verde { color: var(--petrolio); font-weight: 800; padding: 0 .12em; }
/* il paragrafo: grassetto, con «ma non sapeva fare i conti» in petrolio */
.sezione-rischio .rischio-testo {
  max-width: 460px; margin: 10px auto 0; font-size: clamp(15px, 1.55vw, 17px); font-weight: 700;
  line-height: 1.5; color: var(--antracite); text-wrap: pretty;
}
.sezione-rischio .rischio-testo b { font-weight: 700; color: var(--petrolio); }
@media (min-width: 561px) { .sezione-rischio .rischio-testo .rl { white-space: nowrap; } }
@media (min-width: 861px) { .sezione-rischio .rischio-testo { max-width: 660px; } .sezione-rischio .rischio-testo .rf { display: block; } }
/* sul telefono: titolo stretto, pieno e maiuscolo; paragrafo a capo per concetti */
@media (max-width: 560px) {
  section.sezione-rischio { padding-top: 44px; padding-bottom: 44px; }
  .sezione-rischio .rischio-titolo {
    font-family: "ArchivoL", var(--font); font-size: 31px; font-weight: 900; font-stretch: 66%;
    line-height: .96; letter-spacing: -0.018em; text-transform: uppercase;
  }
  .sezione-rischio .rischio-testo { font-size: 17px; line-height: 1.4; }
  .sezione-rischio .rischio-testo .rl { display: block; }
}
@media (max-width: 340px) { .sezione-rischio .rischio-titolo .rt-a, .sezione-rischio .rischio-titolo .rt-b { display: block; } }

/* L'ELENCO DELLE FASI: è quello che vede chi chiede meno animazioni (una
   linea del tempo che parte ambra e arriva rossa alla chiusura); per tutti
   gli altri lo script lo nasconde (.in-sequenza) e costruisce la sequenza. */
.percorso { position: relative; list-style: none; margin: var(--s3) auto 0; padding: 0; max-width: 460px; text-align: left; }
.percorso::before {
  content: ""; position: absolute; left: 10px; top: 12px; bottom: 14px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #F5B335 0%, var(--petrolio) 45%, var(--errore) 100%);
}
.percorso li { position: relative; padding: 0 0 20px 36px; }
.percorso li::before {
  content: ""; position: absolute; left: 4px; top: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 3px solid var(--petrolio); box-sizing: border-box;
}
.percorso-quando { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--petrolio); }
.percorso-cosa { display: block; margin-top: 2px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--antracite); }
.percorso-perche { display: block; margin-top: 1px; font-size: 14.5px; line-height: 1.4; color: var(--grigio); }
.percorso-nome { display: block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 21px; color: var(--errore); }
.percorso .percorso-fine { padding-bottom: 0; }
.percorso .percorso-tappa:first-child::before { left: 1px; top: 0; width: 21px; height: 21px; background: #F5B335; border-color: #F5B335; }
.percorso-fine::before { left: 1px !important; top: 0 !important; width: 21px !important; height: 21px !important; background: var(--errore) !important; border-color: var(--errore) !important; }
.percorso-fine::after {
  content: "\00D7"; position: absolute; left: 1px; top: 0; width: 21px; height: 21px;
  color: #fff; font-size: 18px; font-weight: 700; line-height: 20px; text-align: center;
}
.percorso.in-sequenza { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }

/* LA SEQUENZA: un riquadro solo, le fasi passano una alla volta con la loro
   foto (assets/img/percorso/fase-N.webp), come le storie di Instagram;
   toccando a destra si va avanti, a sinistra indietro. */
.seq { position: relative; margin: 22px auto 0; max-width: 440px; aspect-ratio: 4 / 5; border-radius: 14px;
  overflow: hidden; background: #0E2423; box-shadow: 0 14px 34px rgba(6,53,45,.22);
  user-select: none; -webkit-user-select: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seq-foto { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0;
  transform: scale(1.06); transition: opacity .9s ease, transform 6s linear; }
.seq-foto.on { opacity: 1; transform: scale(1.14); }
.seq-foto.grigia { filter: grayscale(.55) contrast(1.05); }
.seq-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,24,24,.10) 30%, rgba(8,24,24,.88) 78%); transition: opacity .8s ease; }
.seq-rosso { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease;
  background: linear-gradient(180deg, rgba(30,8,6,.05) 20%, rgba(70,16,10,.55) 55%, rgba(58,12,8,.94) 88%); }
.seq-rosso.on { opacity: 1; }
.seq.alla-fine .seq-velo { opacity: 0; }
.seq-barre { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.seq-barre i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.seq-barre i b { display: block; height: 100%; width: 0; background: #fff; }
.seq-barre i.fatta b { width: 100%; }
.seq-barre i.ora b { animation: seqRiempi var(--dur) linear forwards; }
.seq.alla-fine .seq-barre i b { background: #F07A5E; }
@keyframes seqRiempi { to { width: 100%; } }
.seq-testo { position: absolute; left: 20px; right: 20px; bottom: 24px; z-index: 2; }
.seq-testo > * { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.seq-testo.on > * { opacity: 1; transform: none; }
.seq-testo.on > :nth-child(2) { transition-delay: .12s; }
.seq-testo.on > :nth-child(3) { transition-delay: .24s; }
.seq-quando { display: block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #F5B335; }
.seq-cosa { display: block; margin-top: 6px; font-size: 25px; font-weight: 800; line-height: 1.15; color: #fff; text-wrap: balance; }
.seq-perche { display: block; margin-top: 8px; font-size: 16px; line-height: 1.4; color: rgba(255,255,255,.88); }
.seq-fine { position: absolute; left: 20px; right: 20px; bottom: 26px; z-index: 2; color: #fff; }
.seq-fine > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.seq-fine.on > * { opacity: 1; transform: none; transition-delay: .5s; }
.seq-chiusura { display: block; font-size: 40px; font-weight: 800; letter-spacing: .01em; line-height: 1; }
.seq-riga { display: block; height: 3px; width: 0; margin-top: 14px; background: #F07A5E; border-radius: 2px; }
.seq-fine.on .seq-riga { width: 72px; transition: width 1.2s ease 1s, opacity .6s ease .8s; }

/* ══ LE SEZIONI PRESE DAL CALCOLATORE (21/10/2026, Marco) ══
   Benefici, «Per chi è» e recensioni come nella pagina del calcolatore
   (classe .stile-calcolatore): titolo nero con la seconda parte in petrolio,
   stretto e maiuscolo sul telefono come quello del rischio; sottotitolo in
   grassetto; in cima i quadretti di un foglio di calcolo che sfumano. */
section.stile-calcolatore { position: relative; }
section.stile-calcolatore::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(3,122,98,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(3,122,98,.07) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center top;
  -webkit-mask-image: radial-gradient(90% 60% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(90% 60% at 50% 0%, #000 0%, transparent 75%);
}
section.stile-calcolatore > .wrap { position: relative; z-index: 1; }
.stile-calcolatore .intro-sezione { margin-bottom: 0; }
.stile-calcolatore .intro-sezione h2 { font-size: clamp(20px, 2.73vw, 30px); font-weight: 800; line-height: 1.18; color: #1F2328; text-wrap: balance; }
.stile-calcolatore h2 .valore-riga, .stile-calcolatore h2 .t-riga { display: block; }
.stile-calcolatore h2 .valore-riga + .valore-riga, .stile-calcolatore h2 .t-riga + .t-riga, .stile-calcolatore h2 .t-verde { color: var(--petrolio); }
.valore-testo, .attivita-sotto, .t-presenta {
  margin: 10px auto 0; font-size: clamp(15px, 1.55vw, 17px); font-weight: 700; line-height: 1.5; text-wrap: pretty;
}
.valore-testo { max-width: 560px; color: var(--antracite); }
.valore-testo b { font-weight: 700; color: var(--petrolio); }
.attivita-sotto { color: var(--antracite); }
.t-presenta { color: var(--grigio); }
.attivita-sotto .t-riga, .t-presenta .t-riga { display: block; }
@media (min-width: 561px) { .valore-testo .rl { white-space: nowrap; } }
@media (max-width: 560px) {
  section.stile-calcolatore { padding-top: 44px; padding-bottom: 44px; }
  .stile-calcolatore .intro-sezione h2 {
    font-family: "ArchivoL", var(--font); font-size: 31px; font-weight: 900; font-stretch: 66%;
    line-height: .96; letter-spacing: -0.018em; text-transform: uppercase;
  }
  .valore-testo, .t-presenta { font-size: 17px; line-height: 1.4; }
  .valore-testo .rl { display: block; }
  .attivita-sotto { font-size: 20.5px; line-height: 1.25; }
}

/* IL DOCUMENTO CHE SI APRE (21/10/2026 sera, Marco): la copertina del
   Piano d'esempio si apre come quella di un libro e, sotto, la lente
   evidenzia uno alla volta i sei numeri chiave della pagina. Senza la
   classe .anima (che mette lo script) la copertina non c'è e i sei numeri
   sono già evidenziati: è lo stato finale. NB: .doc-numeri NON deve avere
   position, perché la lente si sposta sull'offsetTop delle righe misurato
   da .doc-pagina. */
.doc-scena { margin: 24px auto 0; max-width: 340px; }
.doc-foglio {
  position: relative; aspect-ratio: 760 / 1075; background: #fff; border-radius: 10px; overflow: hidden;
  border: 3px solid #F5B335; box-shadow: 6px 6px 0 rgba(224,150,26,.35), 0 18px 40px rgba(6,53,45,.16);
  perspective: 1100px;
}
.doc-copertina { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; display: none; }
.doc-pagina { position: absolute; inset: 0; display: flex; flex-direction: column; }
.doc-testa {
  flex: 0 0 auto; padding: 12px 16px 10px; text-align: left; line-height: 1.25;
  background: #E4FCEC; border-bottom: 1px solid #B4F1CB; font-size: 15px; color: #1F2328;
}
.doc-eti { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.doc-numeri { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; list-style: none; margin: 0; padding: 4px 16px 8px; }
.doc-numeri li { padding: 7px 0; border-bottom: 1px dashed #B4F1CB; text-align: left; }
.doc-numeri li:last-child { border-bottom: 0; }
.dn-voce { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--petrolio); }
/* il numero evidenziato: verde notte con la passata di evidenziatore ambra */
.dn-cifra {
  display: inline-block; margin: 2px 0 0 -.14em; padding: 0 .14em; border-radius: 3px;
  font-family: "ArchivoL", var(--font); font-size: 25px; font-weight: 900; font-stretch: 74%;
  line-height: 1.1; color: var(--notte); transform-origin: left center;
  background: linear-gradient(rgba(245,179,53,.62), rgba(245,179,53,.62)) no-repeat 0 85% / 100% 62%;
}
/* la lente: c'è solo durante l'animazione */
.doc-lente { display: none; }
@media (min-width: 861px) {
  .doc-scena { max-width: 380px; }
  .dn-voce { font-size: 13.5px; }
  .dn-cifra { font-size: 28px; }
}
/* l'animazione: la copertina c'è, poi si apre ruotando sul bordo sinistro
   come quella di un libro; i numeri sotto sono spenti e la lente li
   evidenzia uno alla volta, poi sparisce */
.doc-scena.anima .doc-copertina {
  display: block; transform-origin: 0 50%; backface-visibility: hidden;
  transition: transform 1s cubic-bezier(.5,0,.3,1), opacity .35s ease .65s;
}
.doc-scena.anima.aperta .doc-copertina { transform: rotateY(-100deg); opacity: 0; }
.doc-scena.anima .dn-voce { color: #9FB0AA; transition: color .4s ease; }
.doc-scena.anima .dn-cifra {
  color: #BFCAC6; background-size: 0% 62%;
  transition: color .35s ease, background-size .5s cubic-bezier(.3,.7,.3,1);
}
.doc-scena.anima li.trovato .dn-voce { color: var(--petrolio); }
.doc-scena.anima li.trovato .dn-cifra { color: var(--notte); background-size: 100% 62%; animation: docTrova .5s ease-out; }
@keyframes docTrova { 0% { transform: none; } 45% { transform: scale(1.08); } 100% { transform: none; } }
.doc-scena.anima .doc-lente {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 0; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--verde); border: 2px solid var(--verde); box-shadow: 0 6px 16px rgba(6,53,45,.25);
  opacity: 0; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.doc-lente svg { width: 20px; height: 20px; }
.doc-scena.anima.cerca .doc-lente { opacity: 1; }
.doc-scena.anima.cerca.finita .doc-lente { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .doc-scena.anima .doc-copertina, .doc-scena.anima .doc-lente { display: none; }
  .doc-scena.anima .dn-voce { color: var(--petrolio); }
  .doc-scena.anima .dn-cifra { color: var(--notte); background-size: 100% 62%; }
}
#benefici .cassetto-esempio { margin-top: 28px; }

/* PER CHI È: il carosello delle attività. Sul telefono una card e mezza
   per volta con la barra sotto; sul computer cinque, con le frecce. */
section.sezione-attivita, section.sezione-testimonianze {
  background: radial-gradient(90% 50% at 100% 0%, rgba(3,122,98,.07), transparent 70%),
              radial-gradient(80% 45% at 0% 100%, rgba(243,166,59,.08), transparent 70%), #fff;
}
.att-scena { position: relative; }
.att-giostra {
  display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 12px;
  margin: var(--s3) -24px 0; padding: 4px 24px 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.att-giostra::-webkit-scrollbar { display: none; }
.att-card {
  position: relative; margin: 0; scroll-snap-align: start; border-radius: var(--r-tocca); overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.att-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.att-card figcaption {
  position: absolute; inset: auto 0 0 0; padding: 36px 12px 14px; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.66));
  color: #fff; font-size: 19px; font-weight: 700; line-height: 1.15; text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.att-barra { position: relative; height: 3px; max-width: 160px; margin: 10px auto 0; border-radius: 2px; background: rgba(3,122,98,.18); overflow: hidden; }
.att-barra i { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; border-radius: 2px; background: var(--petrolio); }
.att-freccia { display: none; }
@media (min-width: 861px) {
  .att-scena { max-width: 1080px; margin: 0 auto; }
  .att-giostra { grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px; margin: var(--s4) 0 0; padding: 4px 0 10px; scroll-padding: 0; }
  .att-barra { display: none; }
  .att-freccia {
    display: flex; align-items: center; justify-content: center; position: absolute; top: calc(50% + 12px);
    width: 44px; height: 44px; margin-top: -22px; z-index: 2; cursor: pointer; border: 0; border-radius: 50%;
    background: #fff; color: var(--petrolio); font-size: 30px; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,.25);
  }
  .att-indietro { left: -22px; }
  .att-avanti { right: -22px; }
  .att-freccia[disabled] { opacity: .35; cursor: default; }
}

/* RECENSIONI: gli screenshot delle chat in una cornice petrolio, come un
   telefono; sul telefono una per volta con la seguente che si affaccia,
   sul computer tutte e tre in fila. */
.t-giostra {
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px;
  margin: var(--s3) -24px 0; padding: 4px 24px 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.t-giostra::-webkit-scrollbar { display: none; }
.t-card {
  margin: 0; scroll-snap-align: start; align-self: start; background: #fff; overflow: hidden;
  border: 5px solid var(--petrolio); border-radius: 22px; box-shadow: 0 12px 28px rgba(3,122,98,.20);
}
.t-card img { display: block; width: 100%; height: auto; border-bottom: 1px solid rgba(3,122,98,.25); }
.t-sotto { padding: 11px 14px 13px; text-align: left; }
.t-nome { display: block; font-size: clamp(15px, 1.55vw, 17px); font-weight: 700; color: #E0961A; }
.t-nome .t-att { font-weight: 400; color: var(--grigio); }
.t-desc { display: block; margin-top: 2px; font-size: clamp(14px, 1.55vw, 15px); line-height: 1.4; color: var(--grigio); }
.t-desc .t-riga { display: block; }
.t-pallini { display: flex; justify-content: center; gap: 7px; margin-top: 6px; }
.t-pallino { width: 8px; height: 8px; border-radius: 50%; background: #B4F1CB; transition: background .2s ease-out, transform .2s ease-out; }
.t-pallino.attiva { background: var(--petrolio); transform: scale(1.25); }
@media (min-width: 861px) {
  .t-giostra { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1020px; margin: var(--s4) auto 0; padding: 0; overflow: visible; }
  .t-pallini { display: none; }
}

/* COSA RICEVI (21/10/2026): le card della pagina del calcolatore, con la
   copertina del Piano in petrolio e la foto del tutor in ambra. */
.ricevi { display: grid; gap: 14px; max-width: 460px; margin: var(--s3) auto 0; text-align: left; }
.ricevi-card {
  background: #fff; border: 1px solid var(--acqua-bordo); border-radius: var(--r-tocca);
  padding: 16px; box-shadow: 0 10px 30px rgba(3,122,98,.08);
}
.ricevi-testa { display: grid; grid-template-columns: 36% 1fr; gap: 14px; align-items: start; }
.mockup { position: relative; display: block; width: 100%; text-decoration: none; }
.mockup img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0;
  background: #fff; border: 2px solid var(--cornice); box-shadow: 7px 7px 0 var(--cornice);
}
.mockup-doc { --cornice: var(--petrolio); cursor: zoom-in; }
.mockup-tutor { --cornice: #E0961A; }
.mockup-tutor img { object-position: 30% 50%; }
.mockup-lente {
  position: absolute; right: 8px; bottom: 38px; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--cornice); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
.mockup-lente svg { width: 16px; height: 16px; }
.mockup:hover .mockup-lente { transform: scale(1.06); }
.mockup-tipo {
  position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 5px; line-height: 1;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--cornice); color: #fff;
}
.ricevi-nome { font-size: clamp(15px, 1.55vw, 17px); font-weight: 700; line-height: 1.25; color: var(--antracite); }
.ricevi-nota { margin-top: 10px; font-size: clamp(15px, 1.55vw, 17px); line-height: 1.5; color: var(--grigio); }
.ricevi-occhiello { margin-top: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--petrolio); }
.ricevi-voci { margin: 6px 0 0; padding: 0; list-style: none; }
.ricevi-voci li { position: relative; padding-left: 26px; margin: 6px 0; font-size: clamp(15px, 1.55vw, 17px); line-height: 1.4; color: var(--antracite); }
.ricevi-voci li::before {
  content: "\2713"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #F5B335; color: #06352D; font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 861px) { .ricevi { grid-template-columns: 1fr 1fr; max-width: 760px; align-items: start; } }
@media (max-width: 560px) {
  .ricevi-nome { font-size: 20.5px; }
  .ricevi-nota, .ricevi-voci li { font-size: 16px; }
}

/* ══ QUANTO COSTA (21/10/2026, Marco) ══
   La card del prezzo della pagina del calcolatore (stessa impaginazione di
   superallenatore.it): nome a sinistra e prezzo nella bandierina a destra,
   la riga della consegna, le due copertine con la cornice del colore del
   file, «Guarda cosa c'è dentro», il pulsante col prezzo, la cassa che si
   apre sotto e, in fondo, la seconda strada: l'anteprima gratuita. */
section.sezione-prezzo {
  background: radial-gradient(120% 80% at 20% 0%, #F0F7F6 0%, transparent 60%),
              radial-gradient(120% 80% at 90% 100%, #DDECEA 0%, transparent 55%),
              linear-gradient(#E4FCEC, #E4F0EE);
}
.sezione-prezzo .card-prezzo {
  max-width: 520px; margin: var(--s3) auto 0; padding: 26px 24px 26px; text-align: center;
  border: 1.5px solid var(--petrolio); border-radius: var(--r-tocca); box-shadow: 0 14px 40px rgba(3,122,98,.10);
}
.prezzo-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; text-align: left; }
.prezzo-nome { font-size: clamp(17px, 2vw, 22px); font-weight: 800; line-height: 1.15; color: var(--antracite); }
.prezzo-tag { flex: 0 0 auto; text-align: center; }
.prezzo-cifra {
  display: block; background: var(--petrolio); color: #fff; font-size: clamp(24px, 3vw, 30px); font-weight: 800;
  padding: 8px 16px 8px 22px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.prezzo-volta { display: block; margin-top: 5px; font-size: 12.5px; color: var(--grigio); }
.prezzo-volta s { color: var(--antracite); }
.prezzo-consegna { margin-top: 12px; text-align: left; font-size: clamp(15px, 1.55vw, 16px); font-weight: 700; line-height: 1.4; color: var(--petrolio); }
.prezzo-file { display: grid; grid-template-columns: 132px 132px; justify-content: center; gap: 24px; margin-top: 18px; }
.mockup-finto { position: relative; margin: 0; }
.mockup-finto img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0;
  background: #fff; border: 2px solid var(--cornice); box-shadow: 6px 6px 0 var(--cornice);
}
/* il Word nel blu di Word (21/10/2026, Marco), il PDF nel rosso del PDF */
.mockup-word { --cornice: #2B579A; }
.mockup-pdf { --cornice: #B0442C; }
.mockup-finto .mockup-tipo {
  position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 5px; line-height: 1;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--cornice); color: #fff;
}
.card-prezzo .vedi-dentro {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 8px 0;
  font-size: clamp(15px, 1.55vw, 16px); font-weight: 700; color: var(--petrolio); text-decoration: none;
}
.card-prezzo .vedi-dentro:hover { text-decoration: underline; }
.vedi-segno { position: relative; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--petrolio); }
.vedi-segno::before, .vedi-segno::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2.5px;
  margin: -1.25px 0 0 -5.5px; background: #fff; border-radius: 2px;
}
.vedi-segno::after { transform: rotate(90deg); }
/* «Completa l'acquisto» col prezzo a destra: ambra piena, ombra netta, come su superallenatore.it */
.cta-acquisto {
  display: flex; align-items: stretch; width: calc(100% - 5px); min-height: 62px; margin: 16px 0 12px;
  padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  font-family: var(--font); color: #fff; text-transform: uppercase; letter-spacing: .03em;
  background: #EFA227; text-shadow: 0 1px 0 rgba(120,72,6,.25); box-shadow: 5px 5px 0 #A86A0E;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.cta-acquisto:hover { background: #E8981C; }
.cta-acquisto:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 #A86A0E; }
.cta-acquisto[aria-busy="true"] { cursor: progress; }
.cta-parola { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0 10px; font-size: 18px; font-weight: 800; white-space: nowrap; }
.cta-cifra { flex: 0 0 auto; display: flex; align-items: center; padding: 0 16px; font-size: 20px; font-weight: 800; background: rgba(120,72,6,.22); }
.nota-pagamento { margin-top: 6px; font-size: 14px; color: var(--antracite); }
/* la seconda strada: separata da un «oppure», pulsante chiaro e bordato */
.prezzo-oppure { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--grigio); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.prezzo-oppure::before, .prezzo-oppure::after { content: ""; flex: 1; height: 1px; background: var(--acqua-bordo); }
.btn-anteprima {
  display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 16px;
  border: 2px solid var(--petrolio); border-radius: 10px; background: #fff; color: var(--petrolio);
  font-size: 17px; font-weight: 800; text-decoration: none; transition: background .2s;
}
.btn-anteprima:hover { background: var(--acqua); }
.nota-anteprima { margin-top: 8px; font-size: 13.5px; color: var(--grigio); }
@media (max-width: 560px) {
  section.sezione-prezzo { padding-top: 32px; padding-bottom: 40px; }
  .sezione-prezzo .card-prezzo { padding: 20px 16px 22px; }
  .cta-parola { font-size: clamp(15px, 4.5vw, 18px); letter-spacing: .01em; padding: 0 8px; }
  .cta-cifra { padding: 0 14px; font-size: clamp(17px, 5vw, 20px); }
}

/* LA CASSA: un foglio bianco che si apre sotto il pulsante, coi due passi
   (email, poi come pagare) e «Paga» ambra come «Completa l'acquisto». */
.cassa-riquadro { margin-top: 14px; padding: 16px 14px 14px; background: #fff; border: 1px solid var(--acqua-bordo); border-radius: 10px; text-align: left; scroll-margin-top: 84px; }
.cassa-riquadro[hidden] { display: none; }
.cassa-voce { display: flex; justify-content: space-between; font-size: 15px; padding: 3px 0; color: var(--antracite); }
.cassa-totale { font-weight: 700; border-top: 1px solid var(--acqua-bordo); margin-top: 6px; padding-top: 8px; }
.cassa-passo { margin-top: 14px; padding: 12px 12px 14px; background: #E4FCEC; border: 2px solid #B4F1CB; border-radius: 8px; scroll-margin-top: 84px; transition: border-color .2s, box-shadow .2s; }
.cassa-passo.cassa-passo-manca { border-color: #E0961A; box-shadow: 0 0 0 3px rgba(224,150,26,.22); }
.cassa-tit { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--antracite); }
.cassa-tit-2 { margin-top: 18px; margin-bottom: 10px; }
.cassa-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 5px; background: var(--petrolio); color: #fff; font-size: 14px; font-weight: 900; }
.cassa-sotto { margin: 2px 0 10px 32px; font-size: 13px; line-height: 1.35; color: var(--grigio); }
.cassa-manca { margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--errore); }
.cassa-manca[hidden] { display: none; }
.cassa-paga {
  display: flex; align-items: center; width: calc(100% - 5px); height: 62px; margin: 16px 0 7px; padding: 0;
  border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: #EFA227; color: #fff;
  box-shadow: 5px 5px 0 #A86A0E; font-family: var(--font); text-transform: uppercase;
}
.cassa-paga:hover { background: #E8981C; }
.cassa-paga:disabled { opacity: .55; cursor: default; }
.cassa-paga-parola { flex: 1 1 auto; text-align: center; font-size: 19px; font-weight: 800; letter-spacing: .03em; }
.cassa-paga-cifra { align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 84px; padding: 0 12px; background: rgba(120,72,6,.22); font-size: 20px; font-weight: 800; }
.cassa-errore { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--errore); }
.cassa-errore:empty { display: none; }
.cassa-avviso { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--grigio); }
.cassa-avviso a { color: var(--petrolio); }

/* ANGOLI SMUSSATI (21/10/2026, Marco: «smussare tutti i bordi dei vari
   mockup»): le copertine di «Cosa ricevi» e del prezzo, l'ultime rimaste con
   gli spigoli vivi. L'ombra piena colorata segue da sola la curva. */
.mockup img, .mockup-finto img { border-radius: 8px; }

/* ══════════════════════════════════════════════════════════════════
   I COLORI MENTA (21/10/2026, Marco: «aggiorna anche il layout alla luce
   del cambiamento che abbiamo fatto sulle creatività»). La palette IMG_4510
   approvata il 20/10 per le pubblicità del gruppo C, con le regole
   dell'anteprima che Marco ha visto e approvato quel giorno («Così mi
   piace»), estese alle sezioni nuove del 21/10:
    · menta chiaro #C2FCD4 per i fondi chiari, sfumato verso il bianco;
    · menta pieno #07D0A4 per le fasce che erano petrolio scuro, con le
      scritte in verde notte (il menta non regge il bianco sopra, né il
      testo sul bianco: 1,99);
    · verde #037A62 per le scritte verdi (5,3 su bianco), verde notte
      #06352D per testata, barra in basso e testi forti;
    · ambra solo per pulsanti ed evidenziatore, mai come scritta sul menta.
   Le variabili qui sotto ricolorano tutto ciò che usa il petrolio (titoli
   a due colori, bandierina del prezzo, cornici, numeri). */
:root {
  --menta-chiaro: #C2FCD4;
  --menta: #07D0A4;
  --verde: #037A62;
  --notte: #06352D;
  --petrolio: #037A62;
  --petrolio-scuro: #025E4B;
  --acqua: #E4FCEC;
  --acqua-bordo: #B4F1CB;
  --antracite: #1F2E2A;
}
/* fondi chiari: la sfumatura dell'immagine, più tenue perché sopra si legge */
.eroe, .sezione-acqua, section.sezione-prezzo {
  background: linear-gradient(150deg, #C2FCD4 0%, #E3FDEB 45%, #F6FFF9 100%) !important;
}
/* fasce che erano petrolio scuro (20 anni e 1.800, prima e dopo, Fabio):
   la sfumatura piena dell'immagine, testi in verde notte */
.sezione-petrolio {
  background: linear-gradient(135deg, #07D0A4 0%, #4ADDB5 45%, #C2FCD4 100%) !important;
  color: var(--notte);
}
.sezione-petrolio :is(h1,h2,h3,h4,p,li,span,small,b,strong,figcaption,em):not(.btn):not(.btn *):not(.pd-badge),
.sezione-metodo h2, .mnn-eti, .mnn-eti b, .metodo-chiusa, .pd-card h3, .pd-card p, .pd-punti li { color: var(--notte) !important; }
.mnn-cifra { color: var(--notte) !important; }
.metodo-chiusa b, .pd-dopo h3 { color: var(--notte) !important; text-decoration: underline; text-decoration-color: var(--ambra); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.mnn-divisore { background: rgba(6,53,45,.25) !important; }
.pd-prima .pd-punti li::before { color: rgba(6,53,45,.55) !important; }
.pd-dopo .pd-punti li::before { color: var(--notte) !important; }
.pd-freccia-c { border-color: rgba(255,255,255,.7) !important; }
/* la card di Fabio resta un foglio chiaro sopra la fascia menta */
.sezione-petrolio .storia-fabio .fabio-ponte b { color: var(--verde) !important; }
/* testata, striscia del business plan e barra in basso: verde notte con gli accenti menta */
.testata, .testata.ombra { background: rgba(6,53,45,.97) !important; }
.testata .marchio-nome .ev { color: var(--menta) !important; }
.testata-nav a:hover { color: var(--menta) !important; text-decoration-color: var(--menta) !important; }
.striscia-bp { background: var(--notte) !important; }
/* le etichette del confronto («A cosa serve», «Su quali dati»…) erano ambra
   scuro: sul menta l'ambra non va mai come scritta, diventano verdi */
table.confronto .evid-ambra { color: var(--verde) !important; }
/* la riga legale sotto il pulsante (21/10/2026, col ritorno alla pagina di Stripe) */
.nota-legale { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--grigio); }
.nota-legale a { color: var(--verde); }

/* ══ L'APERTURA COME IL CALCOLATORE (21/10/2026, Marco) ══
   Titolo su due righe («Vuoi aprire» scuro, il mestiere verde sotto), sul
   telefono stretto, pieno e maiuscolo come gli altri titoli; sotto, la frase
   del calcolatore; niente cursore che lampeggia (tolto anche là il 26/09). */
.eroe-domanda .ed-riga1 { display: block; }
.eroe-griglia > h1 .eroe-domanda .ed-slot { display: block; color: var(--verde); }
.ed-cursore { display: none !important; }
.eroe-griglia > h1 .eroe-domanda { font-size: clamp(40px, 5vw, 64px); font-weight: 800; line-height: 1.15; color: #1F2328; white-space: normal; }
@media (max-width: 860px) {
  .eroe-griglia > h1 .eroe-domanda {
    font-family: "ArchivoL", var(--font); font-size: 38.4px; font-weight: 900; font-stretch: 62%;
    line-height: .92; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap;
  }
}
.eroe-sottotitolo { margin: 0 0 14px; font-size: 17px; font-weight: 700; line-height: 1.35; color: #1F2328; }
.eroe-sottotitolo .ess-riga { display: block; }
@media (max-width: 860px) {
  .eroe-sottotitolo { margin: 0; font-size: 18px; text-align: center; }
  .eroe-griglia > .eroe-testo > .eroe-sottotitolo { order: 2; }
}

/* I TITOLI DELLE SEZIONI come nel calcolatore: nero con la seconda parte
   verde; sul telefono stretti, pieni e maiuscoli */
h2.titolo-calc { font-size: clamp(20px, 2.73vw, 30px); font-weight: 800; line-height: 1.18; color: #1F2328; text-wrap: balance; }
h2.titolo-calc .t-verde { color: var(--verde); }
h2.titolo-calc .t-riga { display: block; }
@media (max-width: 560px) {
  h2.titolo-calc {
    font-family: "ArchivoL", var(--font); font-size: 31px; font-weight: 900; font-stretch: 66%;
    line-height: .96; letter-spacing: -0.018em; text-transform: uppercase;
  }
}
/* sulla fascia menta il verde non si legge: la seconda parte va nel verde scuro */
section.sezione-petrolio h2.titolo-calc span.t-verde.t-verde { color: #025E4B !important; }

/* IL PIANO NELL'APERTURA: le due copertine, il Word davanti e il PDF dietro,
   storte come due fogli appoggiati; sotto, cosa sono. */
.eroe-doc { margin: 0; text-align: center; }
.eroe-doc-fogli { position: relative; width: min(300px, 74vw); aspect-ratio: 1 / .95; margin: 0 auto; }
.edf {
  position: absolute; top: 4%; width: 58%; aspect-ratio: 760 / 1075; background: #fff; border-radius: 8px;
  border: 2px solid var(--cornice); box-shadow: 6px 6px 0 var(--cornice); overflow: hidden;
}
.edf img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.edf b {
  position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 5px; line-height: 1;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--cornice); color: #fff;
}
.edf-pdf { --cornice: #B0442C; right: 4%; transform: rotate(5deg); }
.edf-word { --cornice: #2B579A; left: 4%; top: 7%; transform: rotate(-4deg); z-index: 1; }
.eroe-doc-dida { margin-top: 6px; line-height: 1.35; }
.eroe-doc-dida b { display: block; font-size: 16px; color: var(--verde); }
.eroe-doc-dida span { display: block; font-size: 14px; color: var(--grigio); }
@media (max-width: 860px) {
  .eroe-doc { order: 3; justify-self: center; }
  .eroe-griglia > .eroe-testo > .lead { order: 4; }
  .eroe-griglia > .eroe-testo > .eroe-elenco { order: 5; }
  .eroe-griglia > .eroe-testo > .eroe-emozione { order: 6; }
  .trio { order: 7; }
  .riprova { order: 8; }
}
/* IL PIANO E LE TRE PERSONE (variante B, scelta di Marco il 21/10/2026):
   sul telefono i due file stanno prima delle spunte e le persone dopo; sul
   computer i file si appoggiano davanti alle persone, in basso a sinistra.
   La riga delle 1.800 attività resta sotto le persone, quindi la didascalia
   dei file tiene solo la prima riga (e sul computer sparisce). */
.eroe-doc-dida span { display: none; }
@media (min-width: 861px) {
  .eroe-media { position: relative; }
  .eroe-doc { position: absolute; left: -30px; bottom: 34px; z-index: 2; }
  .eroe-doc-dida { display: none; }
}
/* niente filetto ambra accanto a «Con il Piano di Avvio scoprirai subito»: nel calcolatore non c'è */
.eroe .lead { border-left: 0; padding-left: 0; }
/* i due file piccoli e senza le etichette (21/10/2026, Marco) */
.eroe-doc-fogli { width: min(190px, 50vw); }
.edf b { display: none; }

/* ══════════════════════════════════════════════════════════════════
   LE MODIFICHE DEL 21/10/2026 SERA (Marco, guardando il telefono)
   ══════════════════════════════════════════════════════════════════ */

/* TESTATA E BARRA IN BASSO COME NEL CALCOLATORE: il marchio al centro e una
   linea gialla sottile sotto la testata e sopra la barra (#F5B335, la
   stanghetta del tasto nel logo). Il centro solo dove il link «Cos'è un
   business plan?» è nascosto (fino a 640px), altrimenti si pesterebbero. */
.testata, .testata.ombra { border-bottom: 0 !important; box-shadow: inset 0 -3px 0 #F5B335 !important; }
@media (max-width: 640px) {
  .testata .wrap { justify-content: center; }
}
@media (max-width: 860px) {
  .barra-fissa { border-top: 3px solid #F5B335; }
}

/* L'APERTURA: sotto le tre spunte il motto, una lineetta verde e la riga
   delle 1.800 attività, tutto sopra la foto delle tre persone (prima la
   riga stava sotto la foto). */
@media (max-width: 860px) {
  .riprova { order: 7; flex-direction: column; gap: 0; margin: 2px auto 0; }
  .riprova::before {
    content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
    background: var(--menta); margin: 0 auto 10px;
  }
  .trio { order: 8; }
}

/* I FONDI ALTERNATI: menta e bianco uno dopo l'altro (v. il commento sopra
   «Come funziona» in landing.html). Il bianco è quello di «Per chi è»: due
   luci morbide sul bianco. */
section.fondo-menta {
  background: linear-gradient(150deg, #C2FCD4 0%, #E3FDEB 45%, #F6FFF9 100%) !important;
}
section.fondo-bianco {
  background: radial-gradient(90% 50% at 100% 0%, rgba(3,122,98,.07), transparent 70%),
              radial-gradient(80% 45% at 0% 100%, rgba(243,166,59,.08), transparent 70%), #fff !important;
}

/* LA FASCIA 20 / 1.800 BASSA COME NEL CALCOLATORE: sul bianco, i numeri
   verdi; sul telefono il numero a sinistra e la frase a destra. */
section.sezione-metodo .mnn-cifra { color: var(--verde) !important; }
section.sezione-metodo .mnn-eti, section.sezione-metodo .metodo-chiusa { color: #2E3338 !important; }
section.sezione-metodo .mnn-eti b { color: var(--verde) !important; }
section.sezione-metodo .metodo-chiusa b { color: var(--notte) !important; }
section.sezione-metodo .mnn-divisore { background: rgba(3,122,98,.18) !important; }
@media (max-width: 860px) {
  section.sezione-metodo { padding-top: 30px; padding-bottom: 30px; }
  .metodo-numeroni { flex-direction: column; gap: 12px; align-items: stretch; }
  .metodo-numeroni .mnn { flex-direction: row; align-items: center; gap: 14px; text-align: left; max-width: none; }
  .metodo-numeroni .mnn-cifra { flex: 0 0 40%; text-align: right; font-size: clamp(34px, 11vw, 44px) !important; line-height: 1; }
  .metodo-numeroni .mnn-eti { text-align: left; font-size: 15px; line-height: 1.35; }
  .metodo-numeroni .mnn-eti .br-pc { display: inline; }
  .metodo-numeroni .mnn-divisore { width: 100%; height: 1px; }
  .metodo-chiusa { margin-top: 14px; font-size: 16px; line-height: 1.4; }
}
@media (max-width: 340px) {
  .metodo-numeroni .mnn-cifra { flex-basis: 36%; font-size: 32px !important; }
  .metodo-numeroni .mnn-eti { font-size: 12.5px; }
}

/* MENO SPAZIO FRA «COME FUNZIONA» E «COSA RICEVI»: dalla foto del tutor al
   titolo dopo c'erano 124px sul telefono. Ora le due sezioni hanno il
   margine delle altre (44px) e l'ultimo passo non aggiunge il suo. */
@media (max-width: 860px) {
  section.sezione-funziona, section.sezione-controllo { padding-top: 44px; padding-bottom: 44px; }
  section.sezione-funziona .passo-tutor { padding-bottom: 0; }
  #cosa-ricevi .intro-sezione { margin-bottom: 0; }
  #cosa-ricevi .ricevi { margin-top: 22px; }
}

/* ══ IL LIBRO SULLA GRIGLIA (21/10/2026 notte, Marco) ══
   L'immagine unica dell'apertura: il Piano d'esempio aperto come un libro,
   dietro le tre persone, sopra i quadretti di un foglio di calcolo che
   sfumano. Tutte le misure sono in percentuale della larghezza (--ep-w),
   così per rimpicciolirla basta cambiare quella. Le pagine sono girate di
   16° verso il dorso, con l'ombra della piega, perché sembri un libro vero
   e non due fogli accostati. */
.eroe-piano { position: relative; width: var(--ep-w, 460px); max-width: 100%; aspect-ratio: 370 / 360; margin: 0 auto; }
.ep-quadretti {
  position: absolute; z-index: 0; left: -4%; right: -4%; top: -4%; height: 84%;
  background-image: linear-gradient(rgba(3,122,98,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(3,122,98,.16) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 42%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 62% at 50% 42%, #000 35%, transparent 100%);
}
.ep-libro { position: absolute; z-index: 1; left: 50%; top: 3.3%; width: 81%; aspect-ratio: 300 / 212; transform: translateX(-50%); perspective: 900px; }
.ep-pag {
  position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; background: #fff;
  box-shadow: 0 1px 0 #DCE6E1, 0 16px 34px rgba(6,53,45,.20), 0 2px 6px rgba(6,53,45,.10);
}
.ep-pag img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ep-pag::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.ep-sx { left: 0; transform-origin: 100% 50%; transform: rotateY(16deg); border-radius: 4px 1px 1px 4px; }
.ep-sx::after { background: linear-gradient(90deg, rgba(255,255,255,0) 70%, rgba(6,53,45,.10) 92%, rgba(6,53,45,.22)); }
.ep-dx { right: 0; transform-origin: 0 50%; transform: rotateY(-16deg); border-radius: 1px 4px 4px 1px; }
.ep-dx::after { background: linear-gradient(270deg, rgba(255,255,255,0) 70%, rgba(6,53,45,.10) 92%, rgba(6,53,45,.22)); }
.ep-persone { position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: auto; }
/* sul telefono (Marco: «rimpicciolisci l'immagine in modo che si veda nella
   prima schermata della maggior parte dei telefoni»): 250px, e qualche
   pixel in meno fra l'immagine, la frase e le spunte. Misurato: titolo,
   immagine e le tre spunte stanno nella prima schermata di iPhone 13-15
   (390x664 visibili in Safari), Samsung S22-S24 (360x660), Pixel e Galaxy A
   (412x760), iPhone Pro Max (430x752). Tutta l'apertura, fino alla riga
   delle 1.800 attività, non ci sta comunque: sono circa 790px. */
@media (max-width: 860px) {
  .eroe-piano { order: 3; justify-self: center; --ep-w: min(250px, 70vw); margin-bottom: -6px; }
  .eroe-griglia > .eroe-testo > .eroe-benefici { margin-top: -6px; }
  .eroe-benefici li { padding-top: 3px; padding-bottom: 3px; }
}

/* ══ LA LISTA DEL 21/10/2026 NOTTE (Marco, approvata punto per punto) ══ */

/* 1 · il motto sotto la lineetta verde, insieme alle 1.800 attività */
@media (max-width: 860px) {
  .eroe-griglia > .eroe-testo > .eroe-emozione::before {
    content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
    background: var(--menta); margin: 2px auto 12px;
  }
  .riprova::before { content: none !important; display: none !important; }
  .riprova { margin-top: -6px; }
}

/* 3 · il testo dei benefici scorre da sé, su righe più larghe */
@media (max-width: 560px) {
  #benefici .valore-testo { max-width: none; text-wrap: pretty; }
}

/* 7 · la cornice ai mockup dei passi, come quelli del prezzo: bordo verde e
   ombra piena, così si staccano dal fondo menta */
section.sezione-funziona .mock {
  border: 2px solid var(--verde); border-radius: 12px;
  box-shadow: 6px 6px 0 rgba(3,122,98,.32);
}

/* 8 · il tutor, un di più: riquadro basso e stretto, foto tonda piccola */
.extra-tutor {
  display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 6px auto 0; padding: 12px 14px;
  background: #fff; border: 1px solid var(--acqua-bordo); border-radius: 14px;
  box-shadow: 0 8px 22px rgba(3,122,98,.08); text-align: left;
}
.et-foto { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 32% 40%; }
.et-testo p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--grigio); }
.et-testo .et-titolo { margin: 0 0 3px; font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--antracite); }

/* 9 · cosa ricevi: il documento al centro, la copertina tagliata a metà,
   Word a sinistra (blu) e PDF a destra (rosso) */
.ricevi.ricevi-solo { grid-template-columns: 1fr; max-width: 460px; }
.ricevi-solo .ricevi-card { padding: 22px 18px 18px; text-align: center; }
.ricevi-doppio {
  display: flex; justify-content: center; gap: 7px; width: min(230px, 64vw); margin: 2px auto 20px;
  text-decoration: none; cursor: zoom-in;
}
.rd-meta {
  position: relative; width: calc(50% - 3.5px); aspect-ratio: .46; overflow: hidden; background: #fff;
  border: 2px solid var(--c); box-shadow: 5px 5px 0 var(--c);
}
.rd-word { --c: #2B579A; border-radius: 8px 2px 2px 8px; }
.rd-pdf { --c: #B0442C; border-radius: 2px 8px 8px 2px; transform: translateY(8px); }
.rd-meta img { position: absolute; top: 0; width: 200%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 0; }
.rd-word img { left: 0; }
.rd-pdf img { right: 0; }
.rd-meta b {
  position: absolute; bottom: 8px; padding: 4px 8px; border-radius: 5px; line-height: 1;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--c); color: #fff;
}
.rd-word b { left: 8px; }
.rd-pdf b { right: 8px; }
.ricevi-solo .ricevi-nota { margin-top: 4px; }
.ricevi-solo .ricevi-voci { display: inline-block; text-align: left; }
@media (min-width: 861px) { .ricevi.ricevi-solo { grid-template-columns: 1fr; max-width: 520px; } }

/* 13 · il confronto corto: una tabella che sta intera nello schermo, con la
   colonna del Piano in verde */
@media (max-width: 860px) {
  section.sezione-confronto { padding-top: 44px; padding-bottom: 44px; }
}
.confronto-corto { max-width: 640px; margin: 22px auto 0; }
table.cc { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13.5px; line-height: 1.3; }
table.cc th, table.cc td { padding: 11px 6px; text-align: center; vertical-align: middle; border-bottom: 1px solid #DCE6E1; }
table.cc thead th { padding-bottom: 9px; font-size: 12.5px; font-weight: 800; color: var(--antracite); border-bottom: 2px solid #DCE6E1; hyphens: manual; }
table.cc thead th:first-child { border-bottom-color: transparent; }
table.cc tbody th {
  width: 22%; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--verde);
}
table.cc td { color: var(--grigio); }
table.cc .cc-noi { background: #E4FCEC; color: var(--notte); font-weight: 700; }
table.cc thead .cc-noi { background: var(--verde); color: #fff; border-radius: 10px 10px 0 0; border-bottom-color: var(--verde); }
table.cc tbody tr:last-child th, table.cc tbody tr:last-child td { border-bottom: 0; }
table.cc tbody tr:last-child .cc-noi { border-radius: 0 0 10px 10px; }
table.cc .cc-noi b { color: var(--verde); }
@media (min-width: 861px) {
  table.cc { font-size: 15.5px; }
  table.cc thead th { font-size: 14px; }
  table.cc tbody th { font-size: 12px; }
  table.cc th, table.cc td { padding: 14px 12px; }
}

/* ══ COSA RICEVI COME SU SUPERALLENATORE.IT (21/10/2026 notte, Marco) ══
   Il blocco «Il prodotto» di quella home: etichetta scura, nome, frase,
   poi la pagina vera al centro con due didascalie ai lati, collegate da una
   linea a due punti della pagina. Stesse misure di là (griglia 1fr · 42% ·
   1fr sul telefono, 340px al computer; punti da 20px; linee da 3px), coi
   colori di qui: linee verdi, punti e cornice che respira in ambra. */
.ricevi-prodotto { --rp-gap: 10px; max-width: 1000px; margin: 22px auto 0; text-align: center; }
.rp-ruolo {
  display: table; margin: 0 auto 8px; padding: 5px 11px 4px; border-radius: 4px; background: var(--notte); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase;
}
.rp-nome { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.15; color: var(--verde); }
.rp-sotto { max-width: 26em; margin: 4px auto 16px; font-size: 14.5px; line-height: 1.4; color: var(--grigio); text-wrap: balance; }
.rp-foglio { display: grid; grid-template-columns: minmax(0, 1fr) min(42%, 320px) minmax(0, 1fr); column-gap: var(--rp-gap); align-items: center; }
.rp-lato { position: relative; min-width: 0; }
.rp-pag {
  position: relative; display: block; width: 100%; background: #fff; border: 1px solid rgba(4,18,12,.14); border-radius: 10px;
  box-shadow: 0 3px 0 #E3E8E4, 0 6px 0 #CFD7D2, 0 18px 34px rgba(2,30,18,.22), 0 3px 10px rgba(0,0,0,.10);
  outline: 2px solid rgba(245,179,53,.7); outline-offset: 2px; animation: rpCornice 2.2s ease-in-out infinite; cursor: zoom-in;
}
@keyframes rpCornice {
  0%, 100% { outline-color: rgba(245,179,53,.7); outline-offset: 2px; }
  50% { outline-color: rgba(245,179,53,.14); outline-offset: 5px; }
}
.rp-pag img { display: block; width: 100%; height: auto; border-radius: 9px; }
.rp-o, .rp-v { position: absolute; z-index: 2; background: var(--verde); box-shadow: 0 0 0 2px rgba(255,255,255,.92); pointer-events: none; }
.rp-o { top: 50%; height: 3px; margin-top: -1.5px; }
.rp-o-sx { left: 0; width: var(--x1); }
.rp-o-dx { left: var(--x2); right: 0; }
.rp-v { width: 3px; margin-left: -1.5px; }
.rp-v-sx { left: var(--x1); top: calc(min(50%, var(--y1)) - 1.5px); bottom: calc(min(50%, 100% - var(--y1)) - 1.5px); }
.rp-v-dx { left: var(--x2); top: calc(min(50%, var(--y2)) - 1.5px); bottom: calc(min(50%, 100% - var(--y2)) - 1.5px); }
.rp-punto {
  position: absolute; z-index: 3; box-sizing: border-box; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: #F5B335; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(4,18,12,.45);
}
.rp-tag {
  position: absolute; bottom: 10px; z-index: 3; padding: 5px 7px 4px 8px; border-radius: 6px; color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; line-height: 1; text-transform: uppercase; box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.rp-tag-sx { left: -6px; background: #2B579A; }
.rp-tag-dx { right: -6px; background: #B0442C; }
.rp-call { position: relative; }
.rp-lato-sx .rp-call { text-align: right; }
.rp-lato-dx .rp-call { text-align: left; }
.rp-call::after { content: ""; position: absolute; top: 50%; margin-top: -1.5px; width: var(--rp-gap); height: 3px; background: var(--verde); }
.rp-lato-sx .rp-call::after { left: 100%; }
.rp-lato-dx .rp-call::after { right: 100%; }
.rp-call b { display: block; font-family: "ArchivoL", var(--font); font-size: 14px; font-weight: 800; font-stretch: 80%; line-height: 1.15; color: var(--antracite); overflow-wrap: break-word; }
.rp-call span { display: block; margin-top: 4px; font-family: "ArchivoL", var(--font); font-size: 12px; font-stretch: 86%; line-height: 1.35; color: var(--grigio); overflow-wrap: break-word; }
.rp-tocca { margin: 22px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.ricevi-prodotto .ricevi-occhiello { margin-top: 22px; }
.ricevi-prodotto .ricevi-voci { display: inline-block; text-align: left; }
@media (min-width: 861px) {
  .ricevi-prodotto { --rp-gap: 20px; }
  .rp-nome { font-size: 26px; }
  .rp-sotto { font-size: 17px; margin-bottom: 22px; }
  .rp-foglio { grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr); max-width: 940px; margin: 0 auto; }
  .rp-punto { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .rp-tag { font-size: 12px; padding: 7px 11px 6px 12px; bottom: 18px; }
  .rp-tag-sx { left: -10px; }
  .rp-tag-dx { right: -10px; }
  .rp-call b { font-size: 19px; font-stretch: 88%; }
  .rp-call span { font-size: 15.5px; font-stretch: 100%; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .rp-pag { animation: none; } }

/* ══════════════════════════════════════════════════════════════════
   CARATTERI E GRANDEZZE COME SUPERALLENATORE.IT (21/10/2026 notte,
   Marco: «le grandezze di Super Allenatore», proposta approvata dopo le
   anteprime). Stesso carattere di prima, Archivo, ma come là: UN SOLO file,
   quello con l'asse della larghezza (ArchivoL, precaricato in landing.html),
   per tutti i testi; titoli e pulsanti stretti al 74%, titoli dei passi e
   domande all'88%, testi normali a peso 350. Grandezze misurate sulla home
   di superallenatore.it a 390px. Restano come prima, perché là non hanno un
   equivalente: i numeri del documento animato, la tabella del confronto, il
   20 e il 1.800, le didascalie delle attività, il marchio, il prezzo nella
   bandierina.
   ══════════════════════════════════════════════════════════════════ */
body, body *:not(svg):not(path) { font-family: "ArchivoL", "Archivo", "Bahnschrift", "Segoe UI", system-ui, sans-serif !important; }
@media (max-width: 860px) {
  /* titoli delle sezioni 33 al 74% */
  h2.titolo-calc, .valore, .rischio-titolo, .attivita-titolo, .ricevi-titolo, .t-titolo, .faq-titolo, #prezzo h2, section h2 {
    font-size: 33px !important; font-stretch: 74% !important; line-height: .98 !important; }
  section h2 .t-riga, section h2 .valore-riga, section h2 .rischio-riga, section h2 span { font-size: inherit !important; }
  /* il titolo d'apertura alla grandezza più alta di là (33), e la frase sotto a 19 */
  /* SENZA !important sulla grandezza: lo script dell'apertura (adattaCorpo) la
     rimpicciolisce con uno stile in linea quando la frase più lunga, «un Bed
     and Breakfast?», non ci sta (a 360px servirebbero 341px su 312) */
  html body .eroe-griglia > h1 .eroe-domanda { font-size: 33px; font-stretch: 74% !important; }
  .eroe-sottotitolo { font-size: 19px !important; font-weight: 600 !important; }
  /* testi delle sezioni 17,5; testi normali 16, un filo più leggeri */
  .rischio-testo, .valore-testo, .attivita-sotto { font-size: 17.5px !important; }
  .passo p, .faq details p, .ricevi-voci li, .eroe .lead, .metodo-chiusa, .t-desc, .vdd-p, .t-presenta { font-size: 16px !important; font-weight: 350 !important; }
  .eroe-emozione, .riprova, .riprova b { font-size: 16px !important; }
  /* titoli dei passi 20,5 all'88%; domande 16 all'88% */
  .passo h3 { font-size: 20.5px !important; font-stretch: 88% !important; }
  .faq summary { font-size: 16px !important; font-weight: 600 !important; font-stretch: 88% !important; }
  /* i pulsanti come là: maiuscoli, pieni, stretti */
  .cta-parola { font-size: 18.7px !important; font-weight: 900 !important; font-stretch: 74% !important; }
  .barra-fissa .bf-btn { font-size: 20.5px !important; font-weight: 900 !important; font-stretch: 74% !important; text-transform: uppercase; }
  /* recensioni: il nome piccolo e maiuscolo, la frase a 16 */
  .t-nome, .t-nome .t-att { font-size: 12.5px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em; }
  /* note ed etichette a 12,5 */
  .nota-anteprima, .nota-legale, footer a, footer .small, footer p, .rp-tocca, .ricevi-occhiello { font-size: 12.5px !important; }
  .rp-ruolo { font-size: 11.5px !important; }
}

/* IL MOTTO E LE 1.800 ATTIVITÀ ALLA STESSA ALTEZZA (21/10/2026 notte,
   Marco: «uno a destra e uno a sinistra»). Sul telefono la griglia
   dell'apertura diventa di due colonne: tutto occupa la riga intera tranne
   questi due, che si mettono affiancati sotto la lineetta verde (ora in
   fondo all'elenco delle spunte), divisi da una lineetta verticale. */
@media (max-width: 860px) {
  .eroe-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
  .eroe .eroe-griglia > *, .eroe .eroe-griglia > h1, .eroe-griglia > .eroe-testo > *, .eroe-griglia > .eroe-media > * { grid-column: 1 / -1; }
  .eroe-griglia > .eroe-testo > .eroe-emozione { grid-column: 1; align-self: center; padding-right: 12px; text-align: right; }
  .eroe-griglia > .eroe-testo > .eroe-emozione::before { content: none; }
  .eroe-griglia > .eroe-media > .riprova {
    grid-column: 2; align-self: center; justify-self: stretch; width: auto; margin: 0; padding-left: 12px;
    border-left: 2px solid var(--menta); align-items: flex-start; text-align: left;
  }
  .eroe-griglia > .eroe-media > .riprova .br-mob { display: inline; }
  .eroe-griglia > .eroe-testo > .eroe-benefici::after {
    content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--menta); margin: 18px auto 0;
  }
}