/* ══════════ stile.css — Vinted Stampa Soldi · nello stile della pagina di riferimento ══════════
   Bianco e azzurro chiaro, titoli neri maiuscoli con le parole chiave blu, schede bianche
   arrotondate con la spunta, bottoni gialli a pillola, domande su fondo blu notte. */

:root {
  --fondo: #FFFFFF; --acqua-chiaro: #EAF7EE; --acqua: #128A3E; --acqua-scuro: #0B6B2E; --petrolio: #0B3B22;
  --testo: #12201F; --tenue: #4A5857; --giallo: #FFD84A; --rosso: #D9433A; --verde: #12923F;
  --accento: var(--rosso); --ris: var(--verde);
  --evid: rgba(255, 216, 74, .9);
  --mano-colore: var(--rosso);
  --corpo: 19px; --riga: 1.55;
  --font-titolo: "Inter", system-ui, sans-serif; --font-corpo: "Plus Jakarta Sans", system-ui, sans-serif;
  --gutter: 18px;
  --ombra: 0 2px 4px rgba(10, 50, 28, .05), 0 14px 30px -16px rgba(10, 50, 28, .28);
}

body { background: var(--fondo); color: var(--testo); }
#pagina { max-width: 520px; margin: 0 auto; background: var(--fondo); }
.sez { padding: 56px var(--gutter) 48px; position: relative; background: var(--fondo); }
.sez-acqua { background: linear-gradient(180deg, var(--acqua-chiaro), #F5FBF7); }

/* strumenti del testo */
strong { font-weight: 800; }
.acqua { color: var(--acqua); }
mark { background-position: 0 50%; background-size: 0% 100%; padding: .02em .14em; border-radius: 3px; }
mark.in-vista { background-size: 100% 100%; }
.ris { color: var(--verde); font-weight: 800; }
.nota { font-size: 1.6em; }
.riga-nota { margin-top: 16px; text-align: center; }
.gigante { font: 900 clamp(2.1rem, 9.6vw, 3rem)/1.06 var(--font-titolo); letter-spacing: -.035em; text-transform: uppercase; }
.evid-giallo { background: var(--giallo); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.centro, .centro-t { text-align: center; }

/* titoli e testi */
.titolo { font: 900 clamp(1.9rem, 8.6vw, 2.5rem)/1.08 var(--font-titolo); letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 18px; }
.titolo .mano { text-transform: none; }
.sub-sezione { font-size: 1.2rem; line-height: 1.5; margin-bottom: 26px; color: var(--tenue); text-align: center; }
.corpo { font-size: 1.18rem; line-height: 1.55; color: var(--tenue); margin: 22px 0 0; }
#bigidea .corpo, #nemico .corpo { margin: 18px 0 24px; }

/* il bottone giallo a pillola */
.bottone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 84px; margin-top: 26px; padding: 14px 18px;
  border-radius: 999px; background: linear-gradient(180deg, #FFE97A 0%, #FFD23F 55%, #F2B90F 100%); color: #111;
  box-shadow: 0 6px 0 #D9A30B, 0 16px 30px -10px rgba(217, 163, 11, .65); text-decoration: none; text-align: center; position: relative; overflow: hidden; }
.bottone::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-100%); animation: lampo 3.4s ease-in-out infinite 1s; }
@keyframes lampo { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.b-grande { font: 900 1.38rem/1.05 var(--font-titolo); letter-spacing: -.01em; position: relative; }
.b-piccolo { font: 800 .8rem/1 var(--font-titolo); letter-spacing: .14em; position: relative; }
.rischio { margin-top: 12px; text-align: center; font-size: 1.06rem; font-weight: 700; font-style: italic; color: var(--verde); }

/* banda dell'offerta in cima */
.banda-offerta { background: linear-gradient(90deg, var(--acqua-scuro), #2DB35C); color: #fff; text-align: center; padding: 10px 12px 12px; }
.banda-offerta p { font: 800 .95rem/1.3 var(--font-titolo); letter-spacing: .03em; color: #FFF2A6; display: flex; align-items: center; justify-content: center; gap: 8px; }
.puntino { width: 9px; height: 9px; border-radius: 50%; background: var(--rosso); box-shadow: 0 0 0 3px rgba(217,67,58,.3); animation: pulsa 1.2s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .35; } }
.pillola-copie { display: inline-block; margin-top: 8px; padding: 5px 14px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.55); font: 600 .95rem var(--font-corpo); }

/* ── 1 · APERTURA ── */
.apertura { text-align: center; padding-top: 26px; background: linear-gradient(180deg, #F3FAF5 0%, #fff 60%); }
.marchio { display: inline-flex; align-items: center; gap: 8px; font: 900 1.05rem var(--font-titolo); letter-spacing: .02em; margin-bottom: 18px; }
.marchio span { color: var(--acqua); font-style: italic; }
.marchio b { border: 2px solid var(--acqua); color: var(--acqua); border-radius: 6px; padding: 2px 8px; }
.pre { font-size: 1.15rem; line-height: 1.4; font-weight: 600; color: var(--tenue); margin-bottom: 12px; }
.titolo-apertura { font-family: var(--font-titolo); font-weight: 900; line-height: 1; letter-spacing: -.035em; }
.titolo-apertura > span { display: block; }
.h-come { font-size: 1.7rem; color: var(--testo); margin-bottom: 4px; }
.h-numero { font-size: clamp(3.3rem, 15.6vw, 5rem); white-space: nowrap; background: linear-gradient(180deg, #2DB35C, var(--acqua-scuro)); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .04em; }
.h-resto { font-size: 1.5rem; line-height: 1.12; color: var(--acqua-scuro); margin-top: 6px; }
.sub-apertura { font-size: 1.12rem; line-height: 1.5; color: var(--tenue); margin-top: 16px; }

/* il telefono con le statistiche */
.telefono { width: min(330px, 92%); margin: 34px auto 0; background: #111; border-radius: 38px; padding: 10px; box-shadow: 0 30px 50px -24px rgba(10,50,28,.55); }
.tel-barra { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #fff; border-radius: 28px 28px 0 0; font: 700 .9rem var(--font-corpo); color: var(--testo); }
.tel-barra b { font-size: 1.05rem; }
.tel-barra span:last-child { letter-spacing: -2px; font-size: .7rem; }
.tel-corpo { background: #fff; border-radius: 0 0 28px 28px; padding: 6px 16px 18px; text-align: center; }
.tel-etichetta { font-size: 1.06rem; color: var(--tenue); font-weight: 600; }
.tel-cifra { font: 900 2.7rem/1.1 var(--font-titolo); color: var(--testo); letter-spacing: -.03em; }
.tel-nota { font-size: 1.04rem; color: var(--acqua); font-weight: 700; margin-bottom: 12px; }
.tel-righe { display: grid; gap: 8px; text-align: left; }
.tel-riga { display: flex; align-items: center; gap: 10px; background: var(--acqua-chiaro); border-radius: 14px; padding: 9px 12px; font-size: 1rem; }
.tel-riga > span:nth-child(2) { flex: 1; min-width: 0; }
.tel-riga em { font: 900 1.05rem var(--font-titolo); font-style: normal; color: var(--verde); }
.tel-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--acqua); color: #fff; display: grid; place-items: center; flex: none; }
.tel-ico svg { width: 17px; height: 17px; }

/* le schede bianche */
.schede { display: grid; gap: 16px; }
.scheda { background: #fff; border-radius: 24px; box-shadow: var(--ombra); overflow: hidden; padding: 0 0 20px; }
.scheda > h3, .scheda > p, .scheda > .in-guida { margin-left: 20px; margin-right: 20px; }
.illu { position: relative; height: 128px; background: radial-gradient(rgba(18,138,62,.16) 1.2px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(180deg, #E1F3E7, #F3FAF5); display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px; }
.illu-ico { width: 70px; height: 70px; border-radius: 20px; background: #fff; color: var(--acqua); display: grid; place-items: center; box-shadow: 0 10px 20px -10px rgba(10,50,28,.4); }
.illu-ico.grande { width: 84px; height: 84px; border-radius: 24px; background: linear-gradient(180deg, #2DB35C, var(--acqua-scuro)); color: #fff; }
.illu-ico svg { width: 38px; height: 38px; }
.illu-ico.rosso { color: var(--rosso); }
.illu-cifra { font: 900 1.9rem var(--font-titolo); letter-spacing: -.02em; background: #fff; border-radius: 14px; padding: 6px 14px; box-shadow: 0 10px 20px -10px rgba(10,50,28,.4); }
.illu-cifra.rosso { color: var(--rosso); }
.illu-fumetto { font: 700 1.1rem var(--font-corpo); background: #fff; border-radius: 16px 16px 16px 4px; padding: 10px 14px; box-shadow: 0 10px 20px -10px rgba(10,50,28,.4); }
.illu-bolla { font: 900 1.1rem var(--font-titolo); background: #fff; color: var(--acqua-scuro); border-radius: 12px; padding: 8px 12px; box-shadow: 0 10px 20px -10px rgba(10,50,28,.4); }
.illu-bolla.verde { background: var(--verde); color: #fff; }
.numero { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--giallo); font: 900 1.25rem var(--font-titolo); display: grid; place-items: center; box-shadow: 0 4px 10px -4px rgba(0,0,0,.3); }
.spunta { width: 26px; height: 26px; flex: none; color: var(--acqua); margin-top: 2px; }
.spunta-riga { display: flex; gap: 12px; align-items: flex-start; font-size: 1.12rem; line-height: 1.45; color: var(--tenue); }
.spunta-riga b { color: var(--testo); }
.scheda h3 { font: 800 1.42rem/1.2 var(--font-titolo); color: var(--acqua-scuro); letter-spacing: -.02em; margin-bottom: 10px; }
.spunta-titolo { display: flex; gap: 12px; align-items: flex-start; }
.scheda > p { font-size: 1.12rem; line-height: 1.5; color: var(--tenue); }
.in-guida { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 700 1rem var(--font-corpo); color: var(--rosso); }
.in-guida svg { width: 15px; height: 15px; }

/* big idea: la lista dei venduti nel telefono */
.venduti { list-style: none; margin: 0; padding: 4px 16px 8px; background: #fff; }
.venduti li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #E3EDE6; }
.venduti li:first-child { border-top: 0; }
.v-nome { font: 800 1.08rem/1.25 var(--font-corpo); display: flex; flex-direction: column; }
.v-nome em { font-style: normal; font-weight: 700; font-size: .95rem; color: var(--verde); }
.venduti b { font: 900 1.55rem var(--font-titolo); }
.venduti b svg { width: 22px; height: 22px; color: var(--rosso); }
.velato .v-nome { color: var(--tenue); }
.tel-chiuso { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--acqua-scuro); color: #fff; border-radius: 0 0 28px 28px; padding: 14px; font: 800 1.05rem var(--font-corpo); }
.tel-chiuso svg { width: 17px; height: 17px; color: var(--giallo); }
#bigidea .telefono { margin-top: 6px; }

/* calcolatore */
.calcolatore { padding: 8px 20px 20px; }
.riga-stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #E3EDE6; }
.riga-stepper p { font-size: 1.1rem; line-height: 1.3; font-weight: 700; }
.stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--acqua-chiaro); color: var(--acqua-scuro); font-size: 1.5rem; font-weight: 800; cursor: pointer; }
.stepper output { min-width: 56px; text-align: center; font: 900 1.55rem var(--font-titolo); }
.rivendi { padding: 14px 0; font-size: 1.1rem; font-weight: 700; color: var(--tenue); }
.rivendi b { font: 900 1.55rem var(--font-titolo); color: var(--verde); }
.risultato-anno { background: linear-gradient(180deg, #2DB35C, var(--acqua-scuro)); color: #fff; border-radius: 20px; padding: 16px; text-align: center; }
.ra-etichetta { display: block; font: 700 1.05rem var(--font-corpo); }
.ra-cifra { display: block; font: 900 clamp(2.8rem, 14vw, 3.8rem)/1.05 var(--font-titolo); letter-spacing: -.03em; color: #FFF2A6; }

/* tessere */
.tessere { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.tessere div { background: #fff; border-radius: 20px; padding: 14px 6px; text-align: center; box-shadow: var(--ombra); border: 1.5px solid #D3EEDC; }
.tessere b { display: block; font: 900 2.4rem/1 var(--font-titolo); color: var(--acqua); }
.tessere span { display: block; font-size: 1rem; font-weight: 700; line-height: 1.2; margin-top: 4px; color: var(--tenue); }

/* sogno */
.sogno-scheda { padding-bottom: 24px; }
.sogno-scheda > .gigante, .sogno-scheda > .corpo { margin-left: 20px; margin-right: 20px; }
.illu-alta { height: 200px; }
.mini-cal { width: 190px; background: #fff; border-radius: 22px; box-shadow: 0 16px 30px -14px rgba(10,50,28,.5); overflow: hidden; text-align: center; }
.mc-mese { display: block; background: var(--rosso); color: #fff; font: 900 1rem var(--font-titolo); letter-spacing: .12em; padding: 8px; }
.mc-giorno { display: block; font: 900 4.2rem/1.1 var(--font-titolo); color: var(--testo); }
.mc-incasso { display: block; background: var(--verde); color: #fff; font: 800 1rem var(--font-corpo); padding: 8px; }

/* prodotto */
.copertina-box { display: flex; justify-content: center; margin: 4px 0 6px; }
.copertina { width: 220px; aspect-ratio: 3 / 4.2; border-radius: 6px 16px 16px 6px; padding: 22px 18px; display: flex; flex-direction: column; text-align: left;
  background: linear-gradient(160deg, #22A04F, var(--petrolio)); color: #fff; box-shadow: -6px 0 0 #06301A inset, 0 30px 40px -20px rgba(10,50,28,.6); }
.cop-marchio { font: 900 1.05rem var(--font-titolo); letter-spacing: .18em; color: #D3F2DE; }
.cop-titolo { font: 900 2.3rem/.95 var(--font-titolo); letter-spacing: -.04em; margin-top: 8px; }
.cop-bollino { align-self: flex-start; margin-top: 16px; background: var(--giallo); color: #111; border-radius: 10px; padding: 7px 10px; font: 900 1rem/1.1 var(--font-titolo); transform: rotate(-4deg); }
.cop-usp { margin-top: auto; font-size: .9rem; line-height: 1.3; font-weight: 600; color: #DCF3E4; }

/* bonus */
.bonus { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 16px; align-items: start; }
.bonus-cop { aspect-ratio: 3 / 4.2; border-radius: 5px 12px 12px 5px; padding: 10px 9px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: -4px 0 0 rgba(0,0,0,.18) inset, 0 12px 20px -10px rgba(0,0,0,.45); }
.bonus-cop span { font: 900 .78rem var(--font-titolo); letter-spacing: .1em; }
.bonus-cop b { font: 900 1rem/1.05 var(--font-titolo); }
.cop-1 { background: linear-gradient(160deg, #6B4E3D, #3B2A21); color: #F6E7C8; }
.cop-2 { background: linear-gradient(160deg, #FFE36E, #F2B90F); color: #111; }
.cop-3 { background: linear-gradient(160deg, #2CBE6E, #157A43); color: #fff; }
.bonus-testo h3 { font: 800 1.22rem/1.2 var(--font-titolo); color: var(--acqua-scuro); margin-bottom: 6px; }
.bonus-testo p { font-size: 1.06rem; line-height: 1.42; color: var(--tenue); }
.prezzo-bonus { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.prezzo-bonus s { font: 800 1.1rem var(--font-titolo); color: var(--rosso); }
.gratis { display: inline-block; background: var(--verde); color: #fff; font: 900 1.02rem var(--font-titolo); letter-spacing: .05em; border-radius: 8px; padding: 4px 10px; }

/* testimonianze */
.recensioni { display: grid; gap: 14px; }
.recensione { padding: 18px; }
.recensione header { display: flex; align-items: center; gap: 12px; }
.faccia { width: 50px; height: 50px; flex: none; border-radius: 50%; background: var(--c); display: grid; place-items: center; font: 900 1.3rem var(--font-titolo); color: #fff; }
.chi { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chi b { font-size: 1.12rem; }
.chi span { font-size: .98rem; color: var(--tenue); font-weight: 600; }
.al-mese { margin-left: auto; font: 900 1rem var(--font-titolo); color: var(--verde); background: #E3F5EA; border-radius: 10px; padding: 6px 8px; white-space: nowrap; }
.stelle { display: flex; gap: 2px; margin: 12px 0 8px; color: #F5B800; }
.stelle svg { width: 19px; height: 19px; }
.recensione p { font-size: 1.1rem; line-height: 1.5; color: var(--tenue); }

/* prezzo */
.scontrino { padding: 18px 20px 22px; }
.sc-riga { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1.5px dashed #CBE4D3; font-size: 1.1rem; font-weight: 700; }
.sc-riga s { font: 800 1.1rem var(--font-titolo); color: var(--rosso); white-space: nowrap; }
.sc-totale { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 0; }
.sc-totale > span { font: 900 1.25rem var(--font-titolo); text-transform: uppercase; }
.sc-totale .gigante { font-size: clamp(4.2rem, 22vw, 5.8rem); line-height: 1; color: var(--acqua); letter-spacing: -.05em; }
.sc-confronto { text-align: right; font-size: 1.08rem; margin-bottom: 14px; }
.posti { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 6px 0 8px; }
.posti i { height: 10px; border-radius: 3px; background: var(--acqua-scuro); }
.posti i.ultimo { background: var(--giallo); animation: pulsa 1.2s ease-in-out infinite; }
.scarsita { text-align: center; font-size: 1.08rem; }

/* garanzia */
.garanzia { padding: 20px; display: grid; gap: 12px; }
.g-testa { display: flex; align-items: center; gap: 14px; }
.g-testa svg { width: 54px; height: 54px; flex: none; color: #F2B90F; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.g-piccolo { display: block; font: 900 .85rem var(--font-titolo); letter-spacing: .12em; color: var(--acqua); }
.g-testa b { font: 900 1.25rem/1.2 var(--font-titolo); }
.garanzia .corpo { margin: 6px 0 0; }

/* domande su fondo blu notte */
.sez-petrolio { background: var(--petrolio); color: #fff; }
.sez-petrolio .titolo { color: #fff; }
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; color: var(--testo); border-radius: 18px; border: 0; padding: 0 16px; box-shadow: 0 10px 20px -12px rgba(0,0,0,.4); }
.faq summary { display: flex; align-items: center; gap: 12px; padding: 16px 34px 16px 0; font: 800 1.1rem/1.3 var(--font-titolo); }
.faq summary::after { content: "+"; top: 50%; transform: translateY(-50%); right: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--acqua-chiaro); color: var(--acqua-scuro); font-size: 1.2rem; display: grid; place-items: center; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .n { flex: none; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(180deg, #2DB35C, var(--acqua-scuro)); color: #fff; font: 900 .95rem var(--font-titolo); display: grid; place-items: center; }
.faq details > p { font-size: 1.08rem; line-height: 1.5; color: var(--tenue); padding: 0 0 16px 50px; }

/* congedo */
#congedo { padding-top: 60px; }
.piede { margin-top: 40px; padding: 24px 0 90px; border-top: 1px solid #E3EDE6; text-align: center; color: #7A8786; }
.piede p { font-size: 16.5px; line-height: 1.45; margin-bottom: 10px; }
.piede a { color: var(--acqua); font-weight: 700; }

/* barra d'acquisto */
[data-barra-acquisto] { background: rgba(11, 59, 34, .96); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.barra-prezzo b { font: 900 1.5rem var(--font-titolo); color: #FFF2A6; }
.barra-prezzo s { color: #BFE3CB; font-size: .95rem; margin-left: 4px; }
[data-barra-acquisto] .bottone { width: auto; min-height: 50px; margin: 0; padding: 0 20px; box-shadow: 0 4px 0 #D9A30B; }
[data-barra-acquisto] .b-grande { font-size: 1.02rem; }

@media (prefers-reduced-motion: reduce) { .bottone::before { display: none; } }
.sogno-scheda > .gigante { font-size: clamp(2.1rem, 9.6vw, 3rem); line-height: 1.06; color: var(--testo); } .sogno-scheda > .corpo { font-size: 1.18rem; }

/* headline più grande: ogni riga a tutta larghezza */
.titolo-apertura { margin: 4px -4px 0; }
.h-come { font-size: clamp(2.1rem, 10vw, 2.9rem); line-height: 1; }
.h-numero { font-size: clamp(3.6rem, 17.2vw, 5.6rem); letter-spacing: -.055em; line-height: .95; margin: 2px 0 4px; }
.h-resto { font-size: clamp(1.75rem, 8.3vw, 2.4rem); line-height: 1.04; margin-top: 2px; }
.h-tempo { font-size: clamp(1.75rem, 8.3vw, 2.4rem); line-height: 1.04; margin-top: 6px; color: #111; }
.h-tempo { display: inline-block !important; background: var(--giallo); padding: .04em .18em .02em; border-radius: 6px; transform: rotate(-1.2deg); }
.apertura .pre { margin-bottom: 8px; }
.apertura .marchio { margin-bottom: 12px; }
.sub-apertura { margin-top: 14px; }

/* la headline si misura sulla sua colonna (non sulla finestra): non esce mai dai lati, a nessuna larghezza */
.titolo-apertura { container-type: inline-size; margin: 4px 0 0; max-width: 100%; }
.h-come { font-size: 9.6cqi; }
.h-numero { font-size: 17.4cqi; letter-spacing: -.045em; padding: 0; display: block; }
.h-resto { font-size: 7.6cqi; }
.h-tempo { font-size: 7.6cqi; }
.apertura { overflow-x: clip; }

/* ── foto di scena (generate in build, 20/10) ── */
.foto-sez { margin: 22px 0; border-radius: 24px; overflow: hidden; box-shadow: var(--ombra); background: var(--acqua-chiaro); aspect-ratio: 3 / 2; }
.foto-sez img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-apertura { aspect-ratio: 4 / 3; margin: 26px 0 0; }
.foto-apertura img { object-position: 45% 30%; }
.foto-apertura + .telefono { position: relative; z-index: 2; margin-top: -90px; }
#sogno .foto-sez img { object-position: 50% 35%; }
img.faccia { object-fit: cover; padding: 0; background: #ddd; }

/* ══════════ Desktop (20/10): la pagina usa tutto lo schermo, niente bande bianche ai lati.
   Sotto i 900px resta tutto com'era (telefono verticale). ══════════ */
@media (min-width: 900px) {
  :root { --gutter: 56px; }
  #pagina { max-width: 1180px; }
  .sez { padding: 88px var(--gutter) 72px; }

  /* titoli e paragrafi: colonna di lettura più larga ma non a tutta pagina */
  .titolo, .sub-sezione, .riga-nota { max-width: 760px; margin-left: auto; margin-right: auto; }
  .corpo { max-width: 760px; margin-left: auto; margin-right: auto; }
  #prodotto .corpo { max-width: 620px; }

  /* griglie di schede: da una colonna a più colonne */
  .schede { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 1100px; margin: 0 auto; gap: 24px; }
  #bonus .schede { grid-template-columns: repeat(2, 1fr); max-width: 980px; }
  .recensioni { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width: 1120px; margin: 0 auto; gap: 20px; }
  .faq { max-width: 760px; margin-left: auto; margin-right: auto; }

  /* foto di scena: più grandi, mai a piena pagina */
  .foto-sez { max-width: 880px; margin-left: auto; margin-right: auto; aspect-ratio: 16 / 9; }
  .foto-apertura { max-width: 980px; aspect-ratio: 21 / 9; margin-top: 36px; }
  .foto-apertura + .telefono { margin-top: -150px; }
  .telefono { width: min(380px, 100%); }

  /* componenti a scheda singola: centrati, larghezza di lettura */
  .copertina-box, .calcolatore, .sogno-scheda { max-width: 680px; margin-left: auto; margin-right: auto; }
  .scontrino, .garanzia { max-width: 620px; margin-left: auto; margin-right: auto; }
  #nemico .scheda.calcolatore { width: 100%; }

  /* headline: misure fisse (non più legate alla larghezza del contenitore) */
  .titolo-apertura { max-width: 920px; margin-left: auto; margin-right: auto; }
  .h-come { font-size: 2.6rem; }
  .h-numero { font-size: clamp(4.6rem, 6.4vw, 6.6rem); }
  .h-resto, .h-tempo { font-size: 2.15rem; }
  .apertura { padding-top: 56px; }
  .pre, .sub-apertura { max-width: 620px; margin-left: auto; margin-right: auto; }
  .marchio { margin-bottom: 20px; }

  .bottone, .rischio { max-width: 520px; margin-left: auto; margin-right: auto; }
  .piede { max-width: 760px; margin-left: auto; margin-right: auto; }
}