/* ══════════ stile.css — Il Piede Racconta · dr-sweat · giro 5: foto vere, carta e verde bosco ══════════
   Come Sweat: la pagina la reggono le foto vere (la sera sul divano), il testo sta su fondi chiari pieni,
   un solo verde scuro per titoli e bottoni, l'argilla per le parole che contano, il miele per l'evidenziatore.
   Niente bagliori, niente vetro, niente particelle. Titoli Playfair Display, corpo Figtree 19 px. */
:root {
  --carta: #fbf8f3; --lino: #f3ede4; --bosco: #1f3a2e; --bosco-2: #2c4f3f; --salvia: #dce5da; --argilla: #b9582f; --miele: #f0c96a; --inchiostro: #22201c;
  --fondo: var(--carta); --testo: var(--inchiostro); --tenue: #6a6359; --accento: var(--argilla); --ris: var(--argilla);
  --evid: rgba(240, 201, 106, .6); --mano-colore: var(--argilla);
  --corpo: 19px; --riga: 1.55;
  --font-titolo: "Playfair Display", Georgia, serif; --font-corpo: "Figtree", system-ui, sans-serif; --font-mano: "Caveat", cursive;
  --bottone-fondo: var(--bosco); --bottone-testo: #fff; --raggio: 999px;
  --mano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 40 2, 80 9, 120 5 S 180 3, 198 6' fill='none' stroke='%23B9582F' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
html { scroll-padding-top: 70px; }
h1, h2, h3 { font-family: var(--font-titolo); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: var(--bosco); }
h2 { font-size: clamp(2.1rem, 8.8vw, 3.4rem); }
h3 { font-size: 1.4rem; line-height: 1.2; }
strong { color: var(--inchiostro); }
mark { background-position: 0 100%; background-size: 0% 100%; padding: .02em .12em; border-radius: .15em; }
mark.in-vista { background-size: 100% 100%; }
.gigante { font-weight: 700; color: var(--bosco); }
.nota { font-weight: 700; font-size: 1.8rem; }
img { height: auto; }

/* ── bottoni ── */
.bottone { position: relative; overflow: hidden; background: var(--bosco); color: #fff; font-weight: 700; font-size: 1.15rem; box-shadow: 0 12px 26px -14px rgba(31, 58, 46, .8); transition: transform .2s, background .2s; }
.bottone:hover { background: var(--bosco-2); transform: translateY(-2px); }
.bottone--luce::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-20deg); animation: lampo 4s ease-in-out infinite 1.5s; }
@keyframes lampo { 0%, 60% { left: -50%; } 100% { left: 130%; } }
.bottone--piccolo { min-height: 42px; font-size: 1rem; padding: 0 1.1em; box-shadow: none; }
.bottone--largo { width: 100%; max-width: 26rem; }
.rischio { font-size: 17px; color: var(--tenue); }

/* ── striscia e testata ── */
.striscia { background: var(--bosco); color: #fff; font-size: 17px; text-align: center; padding: .5em 1em; line-height: 1.35; }
.striscia a { font-weight: 700; margin-left: .35em; text-underline-offset: 3px; white-space: nowrap; color: var(--miele); }
.striscia a::after { content: " →"; }
.testata { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 10px var(--gutter); background: rgba(251, 248, 243, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #ebe3d6; }
.marchio { display: flex; align-items: center; gap: .45em; text-decoration: none; font: 700 1.22rem/1 var(--font-titolo); color: var(--bosco); }
.marchio img { width: 34px; height: 34px; object-fit: contain; }

/* ── sezioni: il ritmo di Sweat (carta · bianco · salvia · lino) ── */
main > section { position: relative; padding: 72px 0; }
.giro { padding: 0 var(--gutter); max-width: 42rem; margin: 0 auto; }
.giro--centro { text-align: center; }
.sotto { margin-top: 16px; font-size: 1.2rem; line-height: 1.5; color: #3d3831; }
.occhiello { color: var(--argilla); font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.centro { text-align: center; }

/* ═════ APERTURA ═════ */
#apertura { padding: 26px 0 0; background: var(--carta); }
.apertura-testo { text-align: center; padding: 0 var(--gutter); max-width: 40rem; margin: 0 auto; }
.hl { font-family: var(--font-titolo); font-weight: 700; color: var(--bosco); letter-spacing: -.012em; }
#apertura h1 { line-height: 1.06; }
.nonsolo { font-style: italic; color: var(--argilla); font-size: clamp(1.75rem, 7.4vw, 2.8rem); }
.gesto { font-size: clamp(2.2rem, 9.4vw, 3.8rem); }
.evidenzia { background: linear-gradient(var(--evid), var(--evid)) no-repeat 0 88% / 0% 42%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s cubic-bezier(.6,.1,.2,1) .3s; padding: 0 .06em; }
.evidenzia.tirata, .evidenzia.in-vista { background-size: 100% 42%; }
.beneficio { margin-top: 14px; font-size: clamp(1.7rem, 7.2vw, 2.8rem); line-height: 1.16; color: var(--inchiostro); font-weight: 600; }
.sottolinea { font-weight: 700; color: var(--bosco); background: var(--mano) no-repeat 0 98% / 0% .16em; padding-bottom: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s cubic-bezier(.6,.1,.2,1); }
.sottolinea.tirata { background-size: 100% .16em; }
.ornamento { display: flex; align-items: center; gap: 12px; margin: 14px auto 10px; max-width: 200px; }
.ornamento::before, .ornamento::after { content: ""; flex: 1; height: 1px; background: #d9cdb9; }
.ornamento svg { width: 14px; height: 14px; fill: var(--argilla); animation: gira-stella 8s linear infinite; }
@keyframes gira-stella { to { transform: rotate(360deg); } }
.perfino-riga { font-size: clamp(1.95rem, 8.4vw, 3.4rem); line-height: 1.1; }
.perfino { font-style: italic; color: var(--argilla); }
.cerchiata { color: var(--argilla); }
.hl .w { display: inline-block; }
#apertura .bottone { margin-top: 24px; width: 100%; max-width: 24rem; }
#apertura .rischio { margin-top: 12px; }
.palco-hero { position: relative; margin: 30px auto 0; max-width: 72rem; padding: 0 12px; }
.foto-hero { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 62%; border-radius: 28px 28px 0 0; }
.corone { position: absolute; left: 12px; right: 12px; bottom: 0; display: flex; justify-content: center; gap: 10px; padding: 16px 10px; background: var(--carta); border-radius: 22px 22px 0 0; }
.corona { display: flex; align-items: center; gap: 2px; text-align: center; color: var(--bosco); }
.corona b { display: block; font: 700 1.3rem/1.05 var(--font-titolo); }
.corona div span { display: block; font-size: 16.5px; line-height: 1.25; color: var(--tenue); max-width: 8.5em; margin: 4px auto 0; }
.alloro { width: 18px; height: 50px; color: var(--argilla); flex: none; }
.alloro--dx { transform: scaleX(-1); }

/* ═════ PRODOTTO ═════ */
#prodotto { background: #fff; }
.guida { display: grid; gap: 22px; padding: 30px var(--gutter) 0; max-width: 60rem; margin: 0 auto; }
.foto-guida { width: 100%; height: auto; max-width: 620px; margin: 0 auto; filter: drop-shadow(0 26px 30px rgba(34, 32, 28, .28)); }
.indice { background: var(--lino); border-radius: 24px; padding: 24px 22px; }
.indice-titolo { font: 700 .82rem/1 var(--font-corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--argilla); }
.indice ol { margin: 14px 0 0; padding-left: 1.4em; display: grid; gap: 9px; font: 600 1.25rem/1.25 var(--font-titolo); color: var(--bosco); }
.indice li::marker { color: var(--argilla); font-family: var(--font-corpo); font-weight: 700; }
.indice .nota { margin-top: 12px; display: block; }

/* ═════ BIG IDEA ═════ */
#bigidea { background: var(--bosco); color: #f4efe6; }
#bigidea h2, #bigidea .gigante { color: #fff; }
#bigidea .occhiello { color: var(--miele); }
#bigidea .sotto { color: #e2dccf; }
#bigidea mark { color: var(--inchiostro); }
.disegno-piede { color: #f4efe6; max-width: 420px; margin: 26px auto 10px; padding: 0 var(--gutter); }
.piede-linea { width: 100%; height: auto; overflow: visible; }
.punto circle { fill: var(--miele); transform-box: fill-box; transform-origin: center; animation: pulsa 2.4s ease-in-out infinite; animation-delay: calc(var(--r) * .5s); }
@keyframes pulsa { 50% { transform: scale(1.6); opacity: .55; } }
.punto line { stroke: rgba(244, 239, 230, .5); stroke-width: 1.5; stroke-dasharray: 4 5; }
.punto text { fill: #fff; font: 600 26px var(--font-corpo); }
.punto { opacity: 0; transition: opacity .6s; transition-delay: calc(var(--r) * .35s); }
.disegno-piede.in-vista .punto { opacity: 1; }
#bigidea .gigante { font-size: clamp(2.1rem, 9vw, 3.6rem); line-height: 1.08; margin-top: 18px; }
#bigidea .nota { color: var(--miele); margin-top: 6px; display: block; }

/* ═════ PROBLEMA ═════ */
#problema { background: var(--carta); overflow: hidden; }
.telefoni { position: relative; margin: 30px auto 0; max-width: 46rem; padding: 0 var(--gutter); }
.foto-problema { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 45% 50%; border-radius: 26px; }
.telefono { position: relative; margin: -170px 0 0 auto; width: 236px; border-radius: 38px; background: #111; padding: 9px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); transform: rotate(3deg); }
.telefono::before { content: ""; position: absolute; inset: 9px; border-radius: 30px; background: linear-gradient(180deg, #2c3b52, #10141f); }
.telefono-isola { position: absolute; top: 18px; left: 50%; width: 72px; height: 20px; border-radius: 20px; background: #000; transform: translateX(-50%); z-index: 3; }
.blocco-ora { position: relative; z-index: 2; text-align: center; color: #fff; padding-top: 40px; }
.blocco-ora span { font-size: 16.5px; opacity: .85; }
.blocco-ora b { display: block; font: 600 3rem/1 var(--font-corpo); letter-spacing: -.03em; }
.notifiche { position: relative; z-index: 2; list-style: none; margin: 16px 0 14px; padding: 0 7px; display: grid; gap: 7px; }
.notifiche li { display: flex; gap: 8px; align-items: flex-start; background: rgba(255, 255, 255, .92); border-radius: 15px; padding: 8px 10px; color: var(--inchiostro); font-size: 16.5px; line-height: 1.22; }
.notifiche i { font-style: normal; font-size: 1rem; }
.notifiche b { display: block; font-size: 16.5px; }

/* ═════ NEMICO ═════ */
#nemico { background: var(--salvia); }
.conto { margin-top: 26px; background: #fff; border-radius: 26px; padding: 24px 20px; box-shadow: 0 20px 40px -30px rgba(31, 58, 46, .6); }
.conto h3 { font-size: 1.45rem; }
.cursore { display: block; margin-top: 16px; }
.cursore input { width: 100%; accent-color: var(--bosco); height: 34px; }
.cursore output { display: block; margin-top: 4px; font-size: 17px; color: var(--tenue); }
.cursore output b { color: var(--bosco); font-size: 1.4rem; }
.lunette { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 14px; }
.lunette i { aspect-ratio: 1; border-radius: 50%; background: var(--miele); transition: .4s; }
.lunette i.rubata { background: var(--bosco); box-shadow: inset -4px 2px 0 0 #3f6152; }
.conto-righe { display: grid; gap: 10px; margin-top: 16px; }
.conto-righe > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--lino); font-size: 17px; line-height: 1.3; }
.conto-cifra { font: 700 2rem/1 var(--font-titolo); white-space: nowrap; color: var(--bosco); }
.conto-noi { background: var(--bosco) !important; color: #fff; }
.conto-noi .conto-cifra { color: var(--miele); }
.conto-chiusa { margin-top: 16px; font-size: 1.1rem; color: #3d3831; }

/* ═════ BENEFICI ═════ */
#benefici { background: #fff; }
.voci { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 22px; }
.voci li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.voce-emoji { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--salvia); font-size: 1.5rem; }
.voci p { margin-top: 6px; color: #3d3831; }

/* ═════ MECCANISMO ═════ */
#meccanismo { background: var(--lino); }
.palco-orologio { position: relative; display: grid; justify-items: center; gap: 22px; margin: 32px 0 28px; padding: 0 var(--gutter); }
.orologio { width: 200px; height: 240px; border-radius: 54px; background: linear-gradient(145deg, #e9dcc8, #b9a083); padding: 12px; box-shadow: 0 30px 50px -24px rgba(60, 40, 20, .55); }
.orologio-cassa { position: relative; height: 100%; border-radius: 44px; background: #0d0f0e; display: grid; place-items: center; overflow: hidden; }
.anello { position: absolute; width: 168px; height: 168px; transform: rotate(-90deg); }
.anello circle { fill: none; stroke-width: 7; }
.anello-fondo { stroke: rgba(255, 255, 255, .12); }
.anello-pieno { stroke: var(--miele); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fatto, 0)); }
.orologio-schermo { position: relative; text-align: center; color: #fff; width: 134px; }
.schermo-conta b { display: block; font: 600 2.2rem/1 var(--font-corpo); }
.schermo-conta span, .schermo-fine span { font-size: .82rem; color: #cfd0c8; }
.schermo-fine { position: absolute; inset: -10px 0; display: grid; place-content: center; gap: 4px; opacity: 0; transform: scale(.9); transition: .5s; }
.schermo-fine b { font-size: 1rem; line-height: 1.15; }
.medaglia { display: grid !important; place-items: center; width: 46px; height: 46px; margin: 0 auto 4px; border-radius: 50%; background: var(--miele); font-size: 1.3rem !important; }
.orologio.finito .schermo-conta { opacity: 0; }
.orologio.finito .schermo-fine { opacity: 1; transform: none; }
.fasi { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; width: 100%; max-width: 26rem; }
.fasi li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 14px 16px; font-size: 1.1rem; opacity: .5; transition: opacity .4s, transform .4s; }
.fasi li span { font-size: 16.5px; color: var(--tenue); white-space: nowrap; }
.fasi li.accesa { opacity: 1; transform: translateX(4px); box-shadow: 0 10px 22px -16px rgba(31, 58, 46, .6); }
.fasi li.accesa b { color: var(--bosco); }

/* ═════ SOGNO · carosello ═════ */
#sogno { background: #fff; }
#sogno .gigante { font-size: clamp(2.2rem, 9.6vw, 3.8rem); margin-top: 6px; line-height: 1.06; }
.carosello { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 28px var(--gutter) 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.carosello::-webkit-scrollbar { display: none; }
.carta { position: relative; flex: 0 0 76%; max-width: 320px; height: 430px; border-radius: 24px; overflow: hidden; scroll-snap-align: center; background: var(--lino); }
.carta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carta-testo { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 14px 16px 16px; border-radius: 18px; background: rgba(251, 248, 243, .94); }
.carta-testo h3 { font-size: 1.45rem; margin-top: 8px; }
.carta--piana .carta-testo { background: transparent; }
.carta--salvia { background: var(--salvia); color: var(--bosco); }
.carta--argilla { background: #f1dccf; color: var(--argilla); }
.carta--bosco { background: var(--bosco); color: var(--miele); }
.carta--bosco h3 { color: #fff; }
.carta-icona { position: absolute; left: 24px; top: 26px; width: 90px; height: 90px; }
.tag { display: inline-block; font: 700 .82rem/1 var(--font-corpo); letter-spacing: .08em; text-transform: uppercase; padding: .5em .8em; border-radius: 8px; background: var(--bosco); color: #fff; }
.tag--chi { background: var(--argilla); }
.carta--bosco .tag { background: var(--miele); color: var(--bosco); }
.frecce { display: flex; justify-content: center; gap: 14px; margin: 18px 0 0; }
.frecce button { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid #d9cdb9; background: #fff; font-size: 1.2rem; color: var(--bosco); cursor: pointer; }

/* ═════ BONUS ═════ */
#bonus { background: var(--carta); }
.bonus-lista { display: grid; gap: 18px; padding: 28px var(--gutter) 0; max-width: 60rem; margin: 0 auto; }
.bonus { display: grid; grid-template-columns: 1fr; gap: 6px; }
.copertina-bonus { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; filter: drop-shadow(0 22px 24px rgba(34, 32, 28, .25)); }
.bonus-testo { padding: 0 4px; }
.bonus-testo h3 { margin-top: 8px; font-size: 1.3rem; }
.bonus-testo p { margin-top: 6px; font-size: 17px; line-height: 1.42; color: #3d3831; }
.tag--gratis { background: var(--miele); color: var(--bosco); }
.bonus-prezzo { font-size: 1.12rem !important; }
.bonus-prezzo s { color: #9a9083; }
.bonus-prezzo b { color: var(--argilla); margin-left: .3em; }

/* ═════ TESTIMONIANZE ═════ */
#testimonianze { background: var(--salvia); }
.carosello--voci blockquote { flex: 0 0 84%; max-width: 360px; scroll-snap-align: center; background: #fff; border-radius: 24px; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.stelle { color: #d99a2b; letter-spacing: .15em; font-size: 1.25rem; }
.carosello--voci p { font-size: 1.06rem; line-height: 1.5; flex: 1; }
.carosello--voci footer { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: center; font-size: 17px; color: var(--tenue); }
.carosello--voci footer b { color: var(--bosco); }
.faccia { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--lino); }

/* ═════ PREZZO ═════ */
#offerta { background: #fff; }
.scheda-offerta { border-radius: 30px; padding: 28px 20px 28px; background: var(--lino); border: 2px solid var(--bosco); text-align: center; }
.ricevi { list-style: none; padding: 0; margin: 20px 0 0; text-align: left; display: grid; gap: 2px; }
.ricevi li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px dashed #d4c6b0; font-size: 17px; }
.ricevi s { color: #9a9083; white-space: nowrap; }
.prezzo { margin: 22px 0 6px; }
.prezzo-prima { font: 700 1.7rem/1 var(--font-titolo); color: #9a9083; }
.prezzo-ora { font-size: clamp(4.8rem, 25vw, 7.2rem) !important; color: var(--bosco) !important; line-height: .95; margin-top: 4px; }
.prezzo-nota { display: block; color: var(--tenue); font-size: 17px; }
.copie { margin: 18px 0 20px; }
.copie-libri { display: flex; justify-content: center; gap: 6px; }
.copie-libri i { width: 20px; height: 28px; border-radius: 2px 4px 4px 2px; background: var(--bosco); opacity: .3; position: relative; }
.copie-libri i::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; }
.copie-libri i.libera { opacity: 1; background: var(--argilla); animation: pulsa-libera 1.4s ease-in-out infinite; }
.copie-libri i.libera::after { content: ""; }
@keyframes pulsa-libera { 50% { transform: scale(1.18); } }
.copie p { margin-top: 10px; font-size: 17px; }
.copie b { color: var(--argilla); }
.confronto { margin-top: 18px; font-size: 17px; color: #3d3831; }

/* ═════ GARANZIA ═════ */
#garanzia { background: var(--carta); }
.giro--garanzia { display: grid; gap: 22px; justify-items: center; text-align: center; }
.sigillo { position: relative; width: 160px; height: 160px; }
.sigillo svg { width: 100%; height: 100%; animation: gira 24s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.sigillo-fondo { fill: var(--bosco); }
.sigillo text { fill: var(--miele); font: 700 11.5px var(--font-corpo); letter-spacing: 2.2px; }
.sigillo b { position: absolute; inset: 0; display: grid; place-content: center; color: #fff; font: 700 3rem/0.9 var(--font-titolo); text-align: center; }
.sigillo small { display: block; font: 600 .9rem/1 var(--font-corpo); color: var(--miele); margin-top: 4px; }

/* ═════ DOMANDE ═════ */
#domande { background: #fff; }
.faq { margin-top: 24px; border-top: 1px solid #e6ded1; }
details { border-bottom: 1px solid #e6ded1; }
summary { font-size: 1.14rem; color: var(--bosco); }
details > p { color: #3d3831; }
.faq .in-piu { display: none; }
.faq.aperta .in-piu { display: block; }
.mostra-altre { display: block; margin: 22px auto 0; background: none; border: 0; font-weight: 700; font-size: 17px; color: var(--bosco); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 10px; }

/* ═════ CONGEDO ═════ */
#congedo { background: var(--bosco); color: #f4efe6; padding-top: 0; }
.foto-congedo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.congedo-testo { padding-top: 40px; }
#congedo .gigante { color: #fff; font-size: clamp(2.3rem, 10vw, 4.2rem); line-height: 1.06; }
#congedo .sotto { color: #e2dccf; }
#congedo .ris { color: var(--miele); }
#congedo .bottone { margin-top: 24px; background: var(--miele); color: var(--bosco); }
#congedo .rischio { color: #cfc8b9; }
.piede { margin: 60px auto 0; padding: 22px var(--gutter) 0; max-width: 46rem; text-align: center; color: #cfc8b9; border-top: 1px solid rgba(255, 255, 255, .15); }
.piede p { font-size: 16.5px; line-height: 1.5; }
.piede .disclaimer { margin-top: 12px; }
.logo-piede { display: block; width: 150px; height: auto; margin: 0 auto 18px; background: var(--carta, #FBF8F3); border-radius: 18px; padding: 10px 14px; }
.foto-bundle { display: block; width: 100%; height: auto; max-width: 560px; margin: 18px auto 6px; filter: drop-shadow(0 22px 26px rgba(34, 32, 28, .25)); }

/* ── barra d'acquisto ── */
[data-barra-acquisto] { background: var(--bosco); color: #fff; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .4); }
[data-barra-acquisto] .bottone { background: var(--miele); color: var(--bosco); }
.barra-prezzo s { color: #b9c4bc; }
.barra-prezzo b { font: 700 1.5rem/1 var(--font-titolo); color: #fff; margin-left: .2em; }

/* ── computer ── */
@media (min-width: 900px) {
  main > section { padding: 110px 0; }
  .foto-hero { aspect-ratio: 16 / 8; object-position: 50% 55%; }
  .guida { grid-template-columns: 1fr 1fr; align-items: center; }
  .telefoni { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 30px; }
  .telefono { margin: 0; }
  .foto-problema { aspect-ratio: 4 / 3; }
  .voci { grid-template-columns: 1fr 1fr; gap: 30px; }
  .giro { max-width: 52rem; }
  .bonus-lista { grid-template-columns: repeat(3, 1fr); }
  .bonus { grid-template-columns: 1fr; }
  .giro--garanzia { grid-template-columns: auto 1fr; text-align: left; justify-items: start; align-items: center; }
  .carosello { padding-left: max(var(--gutter), calc((100vw - 72rem) / 2)); }
  .foto-congedo { aspect-ratio: 16 / 6; }
}
@media (prefers-reduced-motion: reduce) { .ornamento svg, .sigillo svg, .punto circle { animation: none; } .punto { opacity: 1; } .evidenzia, .sottolinea { background-size: 100% 42%; } }