/* Pagina di vendita e calcolatore gratuito: impaginazione. Movimento ed effetti in movimento.css */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.solo-lettori { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html { scroll-padding-top: 80px; }
@media (max-width: 899px) { html { scroll-padding-bottom: 96px; } }

/* striscia del prezzo di lancio, sopra la testata */
.striscia-lancio { margin: 0; padding: 9px 16px; background: var(--inchiostro); color: #fff; text-align: center; font: 500 14px/1.4 var(--sans); }
.striscia-lancio b { color: #ffd2bd; font-weight: 700; }
.striscia-lancio .restano { color: #e4efea; }

/* testata fissa con il bottone sempre a portata */
.testata { position: sticky; top: 0; z-index: 20; background: rgba(247, 246, 242, 0.92); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--linea); }
.riga-testata { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; color: var(--inchiostro); text-decoration: none; min-height: 44px; }
.marchio svg { flex: 0 0 30px; }
.nome-marchio { font: 700 16px/1.1 var(--sans); }
.nome-marchio em { font: italic 500 19px/1 var(--serif); color: var(--verde); }
@media (max-width: 519px) { .nome-marchio em { display: block; margin-top: 1px; } }
.azioni-testata { display: flex; align-items: center; gap: 16px; }
.link-testata { font-size: 15px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 699px) { .azioni-testata .link-testata { display: none; } }
.bottone-testata { min-height: 44px; padding: 0 18px; font-size: 16px; border-radius: var(--raggio); }

/* prima schermata */
.eroe { position: relative; padding: 32px 0 56px; overflow: hidden; }
@media (min-width: 900px) { .eroe { padding: 72px 0 88px; } }
.griglia-eroe { position: relative; display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) { .griglia-eroe { grid-template-columns: 1.12fr 0.88fr; gap: 56px; align-items: center; } }
.eroe h1 em { position: relative; white-space: nowrap; }
.sottotitolo { font-size: 19px; color: var(--muto); max-width: 34ch; }
@media (min-width: 768px) { .sottotitolo { font-size: 21px; } }
.azioni-eroe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 26px 0 22px; }
@media (max-width: 519px) { .azioni-eroe .bottone { width: 100%; } }
.link-secondario { font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.scarto { margin: -6px 0 0; font-size: 16px; color: var(--inchiostro); }
.scarto b { font-weight: 700; }
@media (min-width: 900px) { .scarto { display: none; } }
.fiducia { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--inchiostro); }
.fiducia li { display: flex; gap: 10px; align-items: flex-start; }
.fiducia li::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--verde-tenue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M76 132l36 36 68-80' fill='none' stroke='%231E5B4F' stroke-width='28' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

/* scheda d'esempio nella prima schermata */
.avvolgi-esempio { position: relative; padding-top: 18px; }
.esempio { position: relative; }
.esempio.t-tilt-card { border-radius: var(--raggio-scheda); }
.esempio .titolo-esempio { font-size: 22px; margin: 12px 0 4px; }
.esempio .conti { margin: 12px 0 8px; font-size: 16px; }
.esempio .conti tr.totale td:last-child { color: var(--accento); font-size: 24px; font-family: var(--serif); }
.piccolo { font-size: 13px; margin: 0; }
.pillola-esempio { position: absolute; top: 0; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--verde); color: #fff; font: 700 14px/1.2 var(--sans); box-shadow: 0 10px 24px -10px rgba(30, 91, 79, 0.7); }
.pillola-esempio svg { width: 16px; height: 16px; fill: currentColor; padding: 2px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }

/* chi si riconosce */
.riconosci { background: var(--bianco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.frasi { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.frasi li { position: relative; padding: 14px 16px 14px 20px; background: var(--carta); border-radius: 0 var(--raggio) var(--raggio) 0; font-size: 17px; }
.frasi li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--verde); border-radius: 2px; }
.chiusa { font-size: 19px; font-weight: 500; }
@media (max-width: 699px) {
  .frasi { gap: 10px; }
  .frasi li { padding: 12px 14px 12px 18px; font-size: 16px; }
}

/* strumenti del kit */
.griglia-strumenti { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 700px) { .griglia-strumenti { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .griglia-strumenti { grid-template-columns: repeat(3, 1fr); } }
.strumento { position: relative; }
.icona-strumento, .icona-momento, .icona-garanzia { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--verde-tenue); color: var(--verde); margin-bottom: 14px; }
.icona-strumento svg, .icona-momento svg, .icona-garanzia svg { width: 28px; height: 28px; fill: currentColor; }
.icona-strumento .numero { position: absolute; right: -8px; top: -8px; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--verde); color: #fff; font: 700 13px/1 var(--sans); box-shadow: 0 0 0 3px var(--bianco); }
.griglia-strumenti h3 { margin-bottom: 8px; }
.griglia-strumenti p { margin: 0; color: #2e3f42; }
.griglia-strumenti .bonus { background: var(--verde-tenue); border-color: transparent; }
.griglia-strumenti .bonus .icona-strumento { background: var(--bianco); }
.griglia-strumenti .bonus .etichetta { display: table; background: var(--bianco); margin-bottom: 12px; }
/* sul telefono gli strumenti scorrono di lato, con la scheda dopo che si intravede */
@media (max-width: 699px) {
  .griglia-strumenti { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; margin: 24px -20px 0; padding: 14px 20px 18px; scrollbar-width: none; }
  .griglia-strumenti::-webkit-scrollbar { display: none; }
  .griglia-strumenti > .strumento { scroll-snap-align: start; padding: 20px; }
  .griglia-strumenti p { font-size: 16px; }
  .scorri-strumenti { margin: 0; font-size: 14px; color: var(--muto); }
}
@media (min-width: 700px) { .scorri-strumenti { display: none; } }

/* come funziona */
.passi { position: relative; margin: 28px 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 26px; }
.passi::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--linea); border-radius: 2px; }
.passi::after { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--verde); border-radius: 2px; transform-origin: top; }
.passi li { counter-increment: passo; position: relative; padding-left: 56px; }
.passi li::before { content: counter(passo); position: absolute; left: 0; top: -4px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; background: var(--verde); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--carta); }

/* momenti e garanzie */
.griglia-momenti, .griglia-garanzie { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 700px) { .griglia-momenti { grid-template-columns: 1fr 1fr; } .griglia-garanzie { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .griglia-momenti { grid-template-columns: repeat(4, 1fr); } }
.griglia-momenti p, .griglia-garanzie p { margin: 0; }
.icona-momento { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 12px; }
.icona-momento svg { width: 24px; height: 24px; }
/* sul telefono i quattro momenti stanno due per riga */
@media (max-width: 699px) {
  .griglia-momenti { grid-template-columns: 1fr 1fr; gap: 10px; }
  .momento { padding: 16px 14px; }
  .momento h3 { font-size: 18px; margin-bottom: 6px; }
  .momento p { font-size: 15px; line-height: 1.45; }
  .icona-momento { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 10px; }
  .icona-momento svg { width: 21px; height: 21px; }
}
.garanzia { position: relative; }
.icona-garanzia { background: var(--verde); color: #fff; }

/* confronto */
.confronto { background: var(--bianco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.tabella-confronto { margin: 20px 0 12px; }
.tabella-confronto th { font-size: 14px; color: var(--muto); font-weight: 500; }
.tabella-confronto tr.totale td { background: var(--verde-tenue); }
.tabella-confronto tr.totale td:first-child { padding-left: 12px; border-radius: var(--raggio) 0 0 var(--raggio); }
.tabella-confronto tr.totale td:last-child { padding-right: 12px; border-radius: 0 var(--raggio) var(--raggio) 0; }
.spunta-riga { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; border-radius: 50%; background: var(--verde); color: #fff; }
.spunta-riga svg { width: 13px; height: 13px; fill: currentColor; }
.prezzo-inline { color: var(--verde); font-weight: 700; }

/* prezzo di lancio: i due gradini, la cifra, il contatore e la nota sul perché */
.scatola-prezzo { position: relative; text-align: left; }
.gradini { list-style: none; margin: 16px 0 4px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gradino { position: relative; display: grid; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: var(--raggio); background: var(--carta); }
.gradino .quando { font-size: 14px; color: var(--muto); }
.gradino .quanto { font: 600 26px/1.1 var(--serif); color: var(--muto); font-variant-numeric: tabular-nums; }
.gradino.attuale { border-color: var(--accento); background: #fff6f1; }
.gradino.attuale .quando { color: var(--inchiostro); font-weight: 700; }
.gradino.attuale .quanto { color: var(--accento); }
.gradino .sei-qui, .gradino .esaurito { position: absolute; top: -10px; right: 10px; padding: 2px 8px; border-radius: 999px; font: 700 12px/1.4 var(--sans); }
.gradino .sei-qui { background: var(--accento); color: #fff; }
.gradino .esaurito { background: var(--inchiostro); color: #fff; }
.cifra-prezzo { font: 600 72px/1 var(--serif); margin: 14px 0 4px; font-variant-numeric: tabular-nums; }
.restano-box { margin: 0 0 4px; font-weight: 700; color: var(--inchiostro); }
.modulo-acquisto { margin: 16px 0 0; }
.perche-prezzo { margin-top: 20px; padding: 20px 22px; border-radius: var(--raggio-scheda); background: var(--verde-tenue); }
.perche-prezzo h3 { font-size: 20px; margin-bottom: 8px; }
.perche-prezzo p { margin: 0; }
.cifra-prezzo .t-digit-group { vertical-align: bottom; }
.spunte { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; }
.spunte li { display: flex; gap: 10px; }
.spunte li::before { content: ""; flex: 0 0 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M76 132l36 36 68-80' fill='none' stroke='%23fff' stroke-width='28' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.centrato { text-align: center; }
#esito-acquisto { margin-top: 14px; color: var(--inchiostro); }

/* domande */
.elenco-domande { margin-top: 8px; }
.t-acc { border-bottom: 1px solid var(--linea); }
.titolo-domanda { margin: 0; font: inherit; }
.t-acc-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 0; border: 0; background: none; color: var(--inchiostro); font: 700 17px/1.35 var(--sans); text-align: left; cursor: pointer; }
.t-acc-head:hover { color: var(--verde); }
.t-acc-chevron { flex: 0 0 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--verde-tenue); color: var(--verde); }
.t-acc-chevron svg { width: 16px; height: 16px; }
.t-acc-panel-inner p { margin: 0 0 18px; }

/* chiusura */
.finale { position: relative; overflow: hidden; background: var(--verde); color: #fff; }
.finale .contenitore { position: relative; }
.finale h2, .finale h2 em { color: #fff; }
.finale p { color: #e4efea; }
.bottone.chiaro { background: var(--bianco); color: var(--verde); }
.bottone.chiaro:hover { background: var(--verde-tenue); color: var(--verde); }

/* pulsanti con la freccia */
.bottone .freccia { width: 20px; height: 20px; fill: currentColor; flex: 0 0 20px; }

/* barra d'acquisto fissa su telefono, compare dopo la prima schermata e sparisce sul riquadro del prezzo */
.barra-acquisto { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(8px + env(safe-area-inset-bottom)); background: rgba(247, 246, 242, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--linea); }
.sotto-barra { margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--inchiostro); }
@media (min-width: 900px) { .barra-acquisto { display: none !important; } }
@media (max-width: 899px) { body { padding-bottom: 88px; } }
.finale :focus-visible { outline-color: #fff; }
.cta-luce:focus-visible { outline-offset: 7px; }

/* calcolatore gratuito */
.calcolatore { padding: 28px 0 120px; }
.calcolatore h1 { font-size: clamp(28px, 6.4vw, 44px); }
.passo-calc { margin: 24px 0; scroll-margin-top: 84px; }
.passo-calc[hidden] { display: none; }
.porte { display: grid; gap: 10px; margin-top: 16px; }
.porta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; width: 100%; min-height: 72px; padding: 14px 18px; text-align: left; border: 1.5px solid var(--linea); border-radius: var(--raggio-scheda); background: var(--bianco); font: 700 17px/1.3 var(--sans); color: var(--inchiostro); cursor: pointer; }
.porta:hover { border-color: var(--verde); }
.porta[aria-pressed="true"] { border-color: var(--verde); background: var(--verde-tenue); }
.porta small { display: block; color: var(--muto); font-size: 15px; font-weight: 400; }
.invio-fisso { position: sticky; bottom: 0; z-index: 5; margin: 8px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--carta) 72%, rgba(247, 246, 242, 0)); }
.risultato-grande { display: grid; gap: 12px; margin: 20px 0; }
@media (min-width: 640px) { .risultato-grande { grid-template-columns: 1fr 1fr; } }
.risultato-grande .scheda p { margin: 0; }
.risultato-grande .cifra-grande { font: 600 40px/1.05 var(--serif); margin: 6px 0; font-variant-numeric: tabular-nums; }
.risultato-grande .famiglia .cifra-grande { color: var(--verde); }
.prossimo { margin-top: 28px; }
.dettaglio-voci { margin-top: 8px; }
.barra-calc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--linea); }
.barra-calc .contenitore { padding: 0; max-width: 720px; }
.pagina-calcolo { padding-bottom: 100px; }
.condividi { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.condividi .campo { margin: 0; flex: 0 0 140px; }

/* pagina di ritorno dopo il pagamento */
.link-personale code { display: block; overflow-wrap: anywhere; word-break: break-all; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 12px 14px; font-size: 14px; }
.riga-bottoni { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 20px; }

/* prezzo pieno barrato e risparmio: compaiono solo se CONFIG.barrato è acceso (classe con-barrato su html) */
.striscia-lancio s { color: #c9d2d3; text-decoration-thickness: 2px; }
.risparmio-striscia { font-weight: 700; color: #fff; }
.prezzo-pieno { margin-right: 6px; font-size: 0.5em; font-weight: 500; color: var(--muto); text-decoration-thickness: 3px; text-decoration-color: rgba(184, 70, 28, 0.7); vertical-align: middle; }
.risparmio { margin: 2px 0 6px; font-size: 15px; color: var(--inchiostro); }
.risparmio > span { display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px; background: var(--verde); color: #fff; font-weight: 700; }
.sotto-barra s { color: var(--muto); }

/* chi l'ha fatto e perché */
.storia { padding-top: 0; }
.riconosci + .storia { padding-top: 56px; }
@media (min-width: 768px) { .riconosci + .storia { padding-top: 88px; } }
.scheda-storia { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 28px; border-radius: var(--raggio-scheda); background: var(--bianco); border: 1px solid var(--linea); }
.scheda-storia .sigla { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 50%; background: var(--verde); color: #fff; font: italic 500 28px/1 var(--serif); }
.scheda-storia h2 { font-size: clamp(24px, 4.6vw, 32px); margin-bottom: 14px; }
.scheda-storia blockquote { margin: 0; }
.scheda-storia blockquote p { font-size: 18px; }
.scheda-storia figcaption { font-weight: 700; }
.scheda-storia figcaption span { display: block; font-weight: 400; font-size: 14px; color: var(--muto); }
@media (max-width: 599px) {
  .scheda-storia { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .scheda-storia .sigla { width: 48px; height: 48px; font-size: 24px; }
  .scheda-storia blockquote p { font-size: 17px; }
}

/* guarda dentro: schermate vere del kit, una alla volta, nitide */
.vetrina { background: linear-gradient(180deg, var(--carta), var(--verde-tenue) 50%, var(--carta)); overflow: hidden; }
.intro-vetrina { max-width: 640px; }
.visore { margin-top: 28px; display: grid; gap: 24px; align-items: center; }
.voci-visore { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 4px; scroll-snap-type: x proximity; }
.voci-visore::-webkit-scrollbar { display: none; }
.voce-visore { flex: 0 0 auto; scroll-snap-align: start; appearance: none; border: 1.5px solid var(--linea); background: var(--bianco); color: var(--inchiostro); border-radius: 999px; min-height: 46px; padding: 0 18px; font: 600 16px/1 var(--sans); cursor: pointer; text-align: left; transition: background-color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out); }
.voce-visore span { display: none; }
.voce-visore[aria-selected="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.voce-visore:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.telefono-visore { justify-self: center; width: min(290px, 78vw); padding: 10px; border-radius: 46px; background: #12201f; box-shadow: 0 2px 6px rgba(21, 38, 42, 0.16), 0 30px 60px rgba(21, 38, 42, 0.24); position: relative; }
.telefono-visore::before { content: ""; position: absolute; z-index: 2; top: 20px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 14px; background: #12201f; }
.schermo-visore { position: relative; border-radius: 36px; overflow: hidden; background: var(--carta); padding-top: 44px; }
.pannello-visore img { width: 100%; height: auto; }
.pannello-visore:not([hidden]) { animation: entra-schermo var(--duration-medium) var(--ease-smooth-out) both; }
@keyframes entra-schermo { from { opacity: 0; transform: translateY(var(--distance-base)); } to { opacity: 1; transform: none; } }
.didascalia-visore { text-align: center; margin: 0 auto; max-width: 34ch; color: var(--muto); font-size: 16px; }
@media (min-width: 900px) {
  .visore { grid-template-columns: minmax(0, 1fr) 350px; gap: 56px; }
  .voci-visore { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 12px; }
  .voce-visore { border-radius: var(--raggio-scheda); padding: 18px 20px; min-height: 0; display: grid; gap: 6px; }
  .voce-visore b { font: 600 22px/1.2 var(--serif); }
  .voce-visore span { display: block; font: 400 16px/1.45 var(--sans); color: var(--muto); }
  .voce-visore[aria-selected="true"] { background: var(--bianco); color: var(--inchiostro); border-color: var(--verde); box-shadow: 0 0 0 3px rgba(30, 91, 79, 0.12), var(--ombra); }
  .voce-visore[aria-selected="true"] b { color: var(--verde); }
  .voce-visore:not([aria-selected="true"]):hover { border-color: rgba(30, 91, 79, 0.45); }
  .telefono-visore { width: 330px; }
  .didascalia-visore { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pannello-visore:not([hidden]) { animation: none; } .voce-visore { transition: none; } }

/* foto di quello che compri, sopra il prezzo: foglio vero, telefono vero, etichette in testo */
.foto-prodotto { position: relative; margin: 8px 0 18px; aspect-ratio: 16 / 12; }
.fp-foglio { position: absolute; left: 0; top: 6%; width: 64%; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid rgba(221, 217, 207, 0.9); transform: rotate(-3.5deg); box-shadow: 0 2px 4px rgba(21, 38, 42, 0.06), 0 18px 40px rgba(21, 38, 42, 0.16); }
.fp-foglio img { width: 100%; height: auto; }
.fp-telefono { position: absolute; right: 2%; top: 0; width: 41%; padding: 2.2%; border-radius: 13% / 6%; background: #12201f; box-shadow: 0 2px 6px rgba(21, 38, 42, 0.18), 0 24px 48px rgba(21, 38, 42, 0.26); transform: rotate(3deg); }
.fp-schermo { border-radius: 11% / 5%; overflow: hidden; background: var(--carta); aspect-ratio: 1170 / 2380; }
.fp-schermo img { width: 100%; height: auto; display: block; margin-top: -4%; }
.fp-etichette { position: absolute; left: 3%; bottom: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fp-etichette li { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 6px 11px 6px 8px; border-radius: 999px; background: var(--bianco); border: 1px solid rgba(30, 91, 79, 0.18); box-shadow: 0 6px 16px rgba(21, 38, 42, 0.1); font: 700 13px/1.1 var(--sans); color: var(--inchiostro); }
.fp-etichette svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--verde); fill: #fff; }
@media (min-width: 760px) { .foto-prodotto { margin: 8px 6px 22px; } .fp-etichette li { font-size: 15px; padding: 8px 14px 8px 10px; } .fp-etichette svg { width: 18px; height: 18px; } }

/* acquisto chiaro: metodi, tre passi, risposte prima di pagare */
.metodi { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.metodi li { padding: 5px 10px; border: 1px solid var(--linea); border-radius: 999px; background: var(--bianco); font: 600 13px/1.2 var(--sans); color: var(--inchiostro); }
.passi-acquisto { list-style: none; margin: 22px 0 6px; padding: 18px 16px; display: grid; gap: 14px; border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--linea); }
.passi-acquisto li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.4; }
.passi-acquisto .n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--verde); color: #fff; font: 700 14px/1 var(--sans); }
.passi-acquisto b { display: block; margin-bottom: 2px; }
.passi-acquisto span:not(.n) { color: var(--muto); font-size: 15px; }
.prima-di-pagare { margin-top: 28px; }
.prima-di-pagare h3 { margin-bottom: 14px; }
.prima-di-pagare dl { margin: 0; display: grid; gap: 10px; }
.prima-di-pagare dl > div { padding: 14px 16px; border-radius: var(--raggio); background: var(--bianco); border: 1px solid var(--linea); }
.prima-di-pagare dt { font-weight: 700; margin-bottom: 4px; }
.prima-di-pagare dd { margin: 0; color: var(--muto); font-size: 16px; line-height: 1.5; }
@media (min-width: 760px) { .prima-di-pagare dl { grid-template-columns: 1fr 1fr; } .prima-di-pagare dl > div:last-child { grid-column: 1 / -1; } }

/* in quale situazione sei: tre porte verso il calcolo */
.titolo-situazioni { margin: 44px 0 16px; text-align: center; }
.situazioni { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 860px) { .situazioni { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.situazione { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border-radius: var(--raggio-scheda); background: var(--bianco); border: 1.5px solid var(--linea); color: var(--inchiostro); text-decoration: none; transition: border-color var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out); }
.situazione b { font: 600 21px/1.2 var(--serif); }
.situazione span { color: var(--muto); font-size: 16px; line-height: 1.45; }
.situazione em { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font: 700 16px/1.2 var(--sans); font-style: normal; color: var(--verde); }
.situazione em .freccia { width: 18px; height: 18px; fill: currentColor; transition: transform var(--duration-quick) var(--ease-out); }
.situazione:hover { border-color: var(--verde); color: var(--inchiostro); box-shadow: var(--ombra); transform: translateY(-2px); }
.situazione:hover em .freccia { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .situazione, .situazione em .freccia { transition: none; } .situazione:hover { transform: none; } }

/* interruttore del risparmio (MOSTRA_RISPARMIO) e nota legale sotto il pulsante */
.nota-legale { margin: 14px 0 6px; font-size: 14px; line-height: 1.5; color: var(--muto); text-align: center; }
.nota-legale a { display: inline-block; padding: 6px 2px; }
/* sul telefono: solo il telefono grande e le etichette accanto, così le cifre si leggono */
@media (max-width: 559px) {
  .foto-prodotto { aspect-ratio: auto; display: grid; grid-template-columns: 60% 1fr; align-items: center; gap: 14px; margin: 10px 0 20px; }
  .fp-foglio { display: none; }
  .fp-telefono { position: relative; right: auto; top: auto; width: 100%; transform: rotate(-2deg); }
  .fp-etichette { position: static; gap: 8px; }
  .fp-etichette li { width: auto; white-space: normal; font-size: 13px; line-height: 1.25; padding: 7px 9px 7px 7px; align-items: flex-start; }
  .fp-etichette svg { flex: 0 0 18px; width: 18px; height: 18px; }
}
/* computer: il telefono copre solo il margine del foglio, le etichette stanno sotto al foglio */
@media (min-width: 560px) {
  .foto-prodotto { aspect-ratio: 16 / 13; }
  .fp-foglio { top: 3%; width: 60%; }
  .fp-telefono { right: 1%; top: 1%; width: 39%; }
  .fp-etichette { left: 1%; bottom: 1%; max-width: 57%; display: flex; flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 559px) { .foto-prodotto { margin-top: 18px; } .fp-schermo img { margin-top: 0; } }

/* strumenti come problemi risolti: prima, con il kit */
.strumento .prima, .strumento .dopo { margin: 0; font-size: 16px; line-height: 1.5; }
.strumento .prima { color: var(--muto); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--linea); }
.strumento .dopo { color: var(--inchiostro); }
.etichetta-prima, .etichetta-dopo { display: block; margin-bottom: 4px; font: 700 12px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.etichetta-prima { color: var(--muto); }
.etichetta-dopo { color: var(--verde); }

/* hero: risultati per la famiglia, non funzioni */
.fiducia.esiti { gap: 10px; font-size: 16px; line-height: 1.45; }
.fiducia.esiti li::before { margin-top: 3px; }
.fiducia.esiti span { color: var(--muto); }
.fiducia.esiti span b { color: var(--inchiostro); }
.garanzie-eroe { margin: 14px 0 0; font-size: 14px; color: var(--muto); }
/* telefono: etichette sotto al telefono, su una o due righe, mai spezzate */
@media (max-width: 559px) {
  .foto-prodotto { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .fp-telefono { width: 66%; }
  .fp-etichette { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .fp-etichette li { white-space: nowrap; align-items: center; }
}


/* ---------- studio hero-e-mobile (04/11): barra su una riga, testata leggera, prima schermata in 548 px ---------- */
.barra-acquisto { display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.barra-acquisto .bottone { flex: 1 1 auto; min-height: 48px; }
.prezzo-barra { margin: 0; flex: 0 0 auto; line-height: 1.15; }
.prezzo-barra b { display: block; font: 600 24px/1 var(--serif); color: var(--inchiostro); }
.prezzo-barra small { display: block; font-size: 14px; color: var(--muto); }
.nota-cta { margin: 6px 0 0; font-size: 14px; color: var(--muto); }
@media (max-width: 899px) {
  .testata { position: relative; }
  body:not(.pagina-calcolo) .bottone-testata { display: none !important; }
  .testo-lungo { display: none; }
  .azioni-testata .link-testata { display: inline-flex; }
  .riga-testata { min-height: 56px; }
}
@media (max-width: 599px) {
  .eroe { padding: 20px 0 40px; }
  .eroe .occhiello { font-size: 15px; letter-spacing: 0.01em; text-transform: none; margin-bottom: 10px; }
  .eroe h1 { margin-bottom: 10px; }
  .sottotitolo { font-size: 17px; margin-bottom: 14px; }
  .fiducia.esiti { gap: 8px; margin: 0 0 18px; font-size: 16px; line-height: 1.4; }
  .fiducia.esiti li:nth-child(4) { display: none; }
  .azioni-eroe { margin: 0 0 10px; gap: 4px 22px; }
  .nota-cta { flex: 1 0 100%; text-align: center; }
  .scarto { margin: 4px 0 0; }
  .avvolgi-esempio { display: none; }
  /* sezioni più corte: tre frasi su sei, niente momenti (ripetono scadenzario e fine rapporto) */
  .frasi li:nth-child(n+4) { display: none; }
  .momenti { display: none; }
  /* riquadro del prezzo: il bottone in alto, foto e passi dopo */
  .scatola-prezzo { display: flex; flex-direction: column; }
  .scatola-prezzo > * { order: 10; }
  .scatola-prezzo > .occhiello { order: 1; }
  .scatola-prezzo > h2 { order: 2; }
  .scatola-prezzo > .gradini { order: 3; }
  .scatola-prezzo > .cifra-prezzo { order: 4; }
  .scatola-prezzo > .nota-prezzo-breve { order: 5; }
  .scatola-prezzo > .restano-box { order: 6; }
  .scatola-prezzo > .modulo-acquisto { order: 7; }
  .scatola-prezzo > #esito-acquisto { order: 8; }
  .scatola-prezzo > .metodi { order: 9; }
  .scatola-prezzo > .spunte { order: 11; }
  .scatola-prezzo > .foto-prodotto { order: 12; }
  .scatola-prezzo > .passi-acquisto { order: 13; }
  .scatola-prezzo > .nota-legale { order: 14; }
}
/* testi e bersagli per chi ha 40-65 anni: niente sotto i 14 px, link alti almeno 44 px */
.etichetta-prima, .etichetta-dopo { font-size: 14px; }
.gradino .sei-qui { font-size: 13px; }
.piccolo, .metodi li, .fp-etichette li { font-size: 14px; }
.nota-legale a { padding: 12px 4px; }
.t-acc-panel-inner a { display: inline-block; padding: 12px 0; }

/* ---------- home nuova (04/11 sera): hero col prodotto e il prezzo, un solo invito: comprare ---------- */
.griglia-eroe { align-items: center; }
@media (min-width: 900px) { .griglia-eroe { grid-template-columns: 1fr 1fr; gap: 48px; } }
.eroe h1 { font-size: clamp(32px, 5.6vw, 54px); }
.foto-eroe { position: relative; }
.immagine-prodotto img, .foto-prodotto img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .foto-eroe { margin-right: -24px; } }
.offerta-eroe { display: grid; gap: 10px; margin: 22px 0 22px; max-width: 460px; }
.prezzo-eroe { display: flex; align-items: center; gap: 14px; margin: 0; }
.prezzo-eroe b { flex: none; white-space: nowrap; font: 600 46px/1 var(--serif); color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.prezzo-eroe span { font-size: 15px; line-height: 1.35; color: var(--muto); }
.prezzo-eroe strong { color: var(--inchiostro); font-weight: 700; }
.offerta-eroe .nota-cta { margin: 0; text-align: center; }
.fiducia.esiti li:nth-child(4) { display: none; }
@media (max-width: 599px) {
  .offerta-eroe { margin: 16px 0 18px; }
  .prezzo-eroe b { font-size: 40px; }
  .foto-eroe { margin: 0 -12px; }
}

/* cosa compri: i cinque riquadri hanno le stesse righe allineate (icona, titolo, prima, con il kit) */
.griglia-strumenti { align-items: stretch; }
.strumento { display: grid; grid-template-rows: auto auto 1fr auto; row-gap: 10px; padding: 22px; border-radius: var(--raggio-scheda); background: var(--bianco); border: 1px solid var(--linea); }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .griglia-strumenti { grid-auto-rows: auto; }
    .strumento { grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; }
  }
}
.strumento .icona-strumento { margin-bottom: 4px; }
.strumento h3 { margin: 0; }
.strumento .prima { margin: 0; padding-bottom: 12px; border-bottom: 1px dashed var(--linea); align-self: start; }
.strumento .dopo { margin: 0; align-self: start; }
.griglia-strumenti .bonus { background: var(--verde-tenue); border-color: transparent; }

/* guarda dentro: il telefono è già nell'immagine, niente cornice disegnata */
.telefono-visore.senza-cornice { width: min(300px, 80vw); padding: 0; border-radius: 0; background: none; box-shadow: none; }
.telefono-visore.senza-cornice::before { display: none; }
.telefono-visore.senza-cornice .schermo-visore { border-radius: 0; background: none; padding: 0; overflow: visible; }
@media (min-width: 900px) { .telefono-visore.senza-cornice { width: 380px; } }

/* riquadro del prezzo: l'immagine nuova occupa tutta la larghezza */
.foto-prodotto { position: static; aspect-ratio: auto; display: block; margin: 6px -10px 14px; }
@media (min-width: 760px) { .foto-prodotto { margin: 6px -28px 18px; } }
@media (min-width: 900px) {
  .griglia-eroe { grid-template-columns: 0.92fr 1.08fr; gap: 40px; }
  .eroe h1 { font-size: clamp(36px, 3.6vw, 48px); }
  .foto-eroe { margin-right: -40px; }
}
@media (min-width: 700px) { .strumento h3 { font-size: 20px; } }
/* sul telefono l'immagine del prodotto sta già nella prima schermata: nel riquadro del prezzo non si ripete */
@media (max-width: 599px) { .scatola-prezzo > .foto-prodotto { display: none; } }
.scadenze-vicine { margin: 0 0 10px; padding: 10px 14px; border-radius: var(--raggio); background: var(--avviso-tenue); color: #4a3200; font-size: 15px; line-height: 1.45; }
@media (max-width: 599px) { .scatola-prezzo > .scadenze-vicine { order: 5; } }
/* la riga tratteggiata di «Prima» sta sempre in fondo alla sua riga, così è allineata in tutti i box */
@supports (grid-template-rows: subgrid) { @media (min-width: 700px) { .strumento .prima { align-self: stretch; } } }

/* «Ci hai ripensato?»: finestra con il 10% in meno */
.ripensaci { width: min(460px, calc(100vw - 32px)); padding: 28px 24px 22px; border: 0; border-radius: var(--raggio-scheda); background: var(--bianco); color: var(--inchiostro); box-shadow: 0 30px 80px rgba(21, 38, 42, 0.35); }
.ripensaci::backdrop { background: rgba(21, 38, 42, 0.45); }
.ripensaci h2 { font-size: clamp(26px, 6vw, 32px); margin: 4px 0 10px; }
.ripensaci p { margin: 0 0 16px; }
.ripensaci .nota { margin: 12px 0 0; text-align: center; font-size: 14px; }
.chiudi-ripensaci { position: absolute; top: 8px; right: 8px; margin: 0; }
.chiudi-ripensaci button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muto); font-size: 28px; line-height: 1; cursor: pointer; }
.chiudi-ripensaci button:hover { background: var(--carta); color: var(--inchiostro); }
.ripensaci[open] { animation: entra-schermo var(--duration-medium) var(--ease-smooth-out) both; }
@media (prefers-reduced-motion: reduce) { .ripensaci[open] { animation: none; } }