/* ============================================================
   365 Ricette — pagina di vendita (IT)
   Mobile first. Nessun build: CSS puro.
   ============================================================ */

:root{
  --verde:#064e3b;
  --verde-scuro:#043f31;
  --verde-chiaro:#d9e8dc;
  --cta:#16a34a;
  --cta-hover:#15803d;
  --arancio:#ea580c;
  --arancio-scuro:#c2410c;
  --crema:#fff7ed;
  --fondo:#fafaf9;
  --carta:#ffffff;
  --inchiostro:#1c1917;
  --inchiostro-2:#57534e;
  --inchiostro-3:#78716c;
  --bordo:#e7e5e4;
  --r:16px;
  --ombra-cta:0 10px 25px -5px rgba(22,163,74,.4);
  --ombra-carta:0 1px 3px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.12);
  --max:1024px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--inchiostro);
  background:var(--fondo);
  overflow-x:hidden;
}
/* height:auto NON e' decorativo: gli attributi width/height dell'<img> diventano
   una regola d'altezza fissa, che vince sull'aspect-ratio e allunga la foto. */
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font-family:inherit}

/* ---------- struttura ---------- */
.sez{padding:40px 16px}
.dentro{max-width:var(--max); margin:0 auto; width:100%}
.stretto{max-width:640px; margin-left:auto; margin-right:auto}
.centro{text-align:center}

.sez--bianca{background:var(--carta)}
.sez--fondo{background:var(--fondo)}
.sez--crema{background:var(--crema)}
.sez--menta{background:var(--verde-chiaro)}
.sez--verde{background:var(--verde); color:#fff}

/* ---------- titoli ---------- */
h1,h2,h3{margin:0 0 .5em; line-height:1.15; font-weight:900; letter-spacing:-.02em}
/* il titolo italiano e' piu' lungo di quello di partenza: a 375px con 26px
   "365 Ricette Senza Zucchero," non ci sta e si spezza male. */
h1{font-size:clamp(22px,5.9vw,44px)}
h2{font-size:clamp(24px,6.2vw,36px)}
h3{font-size:clamp(17px,4.4vw,22px)}
.titolo-sez{text-align:center; color:var(--verde); margin-bottom:.7em}
.sez--verde .titolo-sez{color:#fff}
.occhiello{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--arancio); margin-bottom:6px;
}
.sottotitolo{
  font-size:clamp(15px,4vw,19px); color:var(--inchiostro-2);
  max-width:34em; margin:0 auto 1.2em; text-align:center; font-weight:500;
}
/* il sottotitolo eredita l'inchiostro scuro: su qualsiasi fondo verde va schiarito,
   e il blocco 357 e' verde SENZA essere una .sez--verde. */
.sez--verde .sottotitolo,
.blocco-357 .sottotitolo{color:rgba(255,255,255,.88)}
em.evid{font-style:normal; color:var(--arancio)}
.verde{color:var(--verde)}

/* ---------- barra urgenza ---------- */
.urgenza{
  background:var(--verde-scuro); color:#fff; text-align:center;
  padding:10px 14px; font-size:13.5px; font-weight:700; letter-spacing:-.01em;
}
.urgenza b{color:#fde68a}
.urgenza .orologio{font-variant-numeric:tabular-nums}

/* ---------- bottoni ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; max-width:420px; margin:0 auto;
  padding:17px 22px; border:0; border-radius:var(--r);
  background:var(--cta); color:#fff; text-decoration:none;
  font-size:clamp(14.5px,3.9vw,17px); font-weight:800; letter-spacing:-.025em;
  text-align:center; cursor:pointer; box-shadow:var(--ombra-cta);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{background:var(--cta-hover); transform:translateY(-2px);
  box-shadow:0 14px 30px -6px rgba(22,163,74,.5)}
.btn:active{transform:translateY(0)}
.btn--blu{background:#2f3d7e; box-shadow:0 10px 25px -5px rgba(47,61,126,.4)}
.btn--blu:hover{background:#26326a; box-shadow:0 14px 30px -6px rgba(47,61,126,.5)}
.btn--pulsa{animation:pulsa 2.4s ease-in-out infinite}
@keyframes pulsa{
  0%,100%{box-shadow:0 10px 25px -5px rgba(22,163,74,.4)}
  50%{box-shadow:0 10px 34px 0 rgba(22,163,74,.62)}
}

/* ---------- hero ---------- */
.hero{padding:34px 16px 26px; background:var(--carta); text-align:center}
.hero h1{color:var(--verde)}
.hero .apertura{
  font-size:clamp(16px,4.4vw,21px); font-weight:700; color:var(--inchiostro);
  max-width:22em; margin:0 auto 22px;
}
.hero__figura{margin:0 auto 18px; max-width:760px}
.hero__figura img{width:100%; border-radius:22px; box-shadow:0 22px 45px -18px rgba(0,0,0,.38)}
.hero .esca{font-size:14.5px; color:var(--inchiostro-2); max-width:30em; margin:0 auto 22px}

.fiducia{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  margin-top:18px; font-size:14px; color:var(--inchiostro-2); font-weight:600;
}
.fiducia span{display:flex; align-items:center; gap:7px}

/* ---------- lista benefici ---------- */
.benefici{display:grid; gap:9px; margin-bottom:26px}
.beneficio{
  display:flex; align-items:center; gap:13px;
  background:var(--carta); border:1px solid var(--bordo); border-radius:14px;
  padding:13px 15px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.beneficio .icona{
  flex:0 0 40px; height:40px; display:grid; place-items:center;
  background:var(--crema); border-radius:11px; font-size:20px; line-height:1;
}
.beneficio p{margin:0; font-size:14.5px; font-weight:500; color:var(--inchiostro)}

/* ---------- carosello (scroll-snap nativo) ---------- */
.carosello{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:4px;
}
.carosello::-webkit-scrollbar{display:none}
.carosello > *{flex:0 0 100%; scroll-snap-align:center}
.carosello img{width:100%; border-radius:18px}
.puntini{display:flex; justify-content:center; gap:7px; margin-top:14px}
.puntini button{
  width:8px; height:8px; padding:0; border:0; border-radius:99px;
  background:#c7cdc8; cursor:pointer; transition:width .25s, background .25s;
}
.puntini button[aria-current="true"]{width:26px; background:var(--arancio)}
.trascina{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; color:var(--inchiostro-3); margin-top:12px; font-weight:600;
}

/* ---------- testimonianze WhatsApp (immagini alte, 788x1400) ---------- */
.carosello--chat > *{flex:0 0 82%; max-width:360px}
.carosello--chat img{border-radius:16px; box-shadow:var(--ombra-carta)}

/* ---------- griglia ricette ---------- */
.ricette{display:grid; grid-template-columns:repeat(2,1fr); gap:11px}
.ricetta{
  background:var(--carta); border-radius:16px; overflow:hidden;
  box-shadow:var(--ombra-carta); display:flex; flex-direction:column;
}
.ricetta img{width:100%; aspect-ratio:1; object-fit:cover}
.ricetta__testo{padding:11px 11px 14px; text-align:center}
.ricetta h3{
  font-size:12.5px; font-weight:800; color:var(--verde);
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.25; margin:0 0 5px;
}
.ricetta p{margin:0; font-size:11.8px; color:var(--inchiostro-3); line-height:1.35}

/* ---------- blocco 357 ---------- */
.blocco-357{
  background:var(--verde); color:#fff; border-radius:24px;
  padding:32px 18px; text-align:center;
}
.blocco-357 h2{color:#fff}
.blocco-357 .mosaico{
  width:100%; max-width:520px; height:auto; margin:0 auto 22px;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));
}
.categorie{
  display:flex; flex-direction:column; gap:8px;
  margin:0 0 24px; padding:0; list-style:none;
}
.categorie li{
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  border-radius:99px; padding:9px 14px; font-size:13px; font-weight:700;
}

/* ---------- per te che ---------- */
.per-te{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.per-te li{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--crema); border-radius:13px; padding:13px 15px;
  font-size:14.5px; color:var(--inchiostro); font-weight:500;
}
.per-te .spunta{
  flex:0 0 22px; height:22px; margin-top:1px; border-radius:50%;
  background:#fed7aa; color:var(--arancio-scuro);
  display:grid; place-items:center; font-size:13px; font-weight:900;
}

/* ---------- bonus ---------- */
.etichetta-regalo{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--arancio); color:#fff; border-radius:99px;
  padding:7px 16px; font-size:12px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px;
}
.bonus{display:grid; gap:13px; margin-bottom:20px}
.bonus__carta{
  position:relative; display:flex; align-items:stretch;
  background:var(--carta); border-radius:16px; overflow:hidden;
  box-shadow:var(--ombra-carta);
}
/* contain, non cover: la copertina e' quadrata e un ritaglio stretto
   taglierebbe via il titolo del libro. */
.bonus__carta img{
  width:104px; flex:0 0 104px; object-fit:contain; align-self:stretch;
  background:var(--crema); padding:8px 4px;
}
.bonus__testo{padding:16px 15px 15px; flex:1; min-width:0}
.bonus__num{
  position:absolute; top:0; left:0; z-index:2;
  background:var(--arancio); color:#fff; font-size:10px; font-weight:900;
  letter-spacing:.08em; padding:4px 10px 5px; border-bottom-right-radius:10px;
}
.bonus__carta h3{font-size:16px; color:var(--verde); margin:6px 0 5px}
.bonus__carta p{margin:0 0 10px; font-size:13px; color:var(--inchiostro-2); line-height:1.4}
.bonus__prezzo{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.barrato{
  color:var(--inchiostro-3); text-decoration:line-through;
  font-size:13.5px; font-weight:700;
}
.gratis{
  background:#dcfce7; color:#15803d; border-radius:99px;
  padding:4px 11px; font-size:11.5px; font-weight:800;
}
.totale-bonus{
  background:var(--verde); color:#fff; border-radius:16px;
  padding:16px 18px; text-align:center; font-size:14.5px; font-weight:800;
  line-height:1.45;
}
.totale-bonus b{color:#fde68a; font-size:17px}

/* ---------- LA PILA: quello che ricevi, base contro premium ---------- */
.pila{display:grid; gap:16px}
.pila__gruppo{
  background:var(--carta); border:2px solid var(--bordo); border-radius:20px;
  padding:18px 16px 20px; box-shadow:var(--ombra-carta);
}
.pila__gruppo--top{border-color:var(--arancio); background:#fffdfa}
.pila__testa{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; margin-bottom:16px;
}
.pila__testa strong{font-size:15px; font-weight:800; color:var(--verde)}
.pila__tag{
  display:inline-block; border-radius:99px; padding:5px 14px;
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  background:var(--crema); color:var(--arancio-scuro);
}
.pila__tag--top{background:var(--arancio); color:#fff}

.pila__libri{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 10px}
.pila__gruppo--top .pila__libri{grid-template-columns:repeat(3,1fr)}
.pila__libri figure{margin:0; text-align:center}
.pila__libri img{
  width:100%; height:auto; border-radius:6px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));
  transition:transform .2s ease;
}
.pila__libri figure:hover img{transform:translateY(-4px)}
.pila__libri figcaption{
  margin-top:7px; font-size:10.5px; line-height:1.25; font-weight:600;
  color:var(--inchiostro-2);
}
.pila__libri figcaption b{
  display:block; color:var(--arancio); font-size:9.5px;
  letter-spacing:.06em; text-transform:uppercase;
}
.pila__nota{
  margin:18px auto 0; max-width:34em; text-align:center;
  background:var(--crema); border-radius:14px; padding:14px 16px;
  font-size:14px; font-weight:600; color:var(--inchiostro);
}
.pila__nota b{color:var(--arancio)}

/* ---------- PREZZI (qui il concorrente si rompe su mobile) ---------- */
.piani{display:grid; gap:22px; max-width:420px; margin:0 auto}
.piano{
  position:relative; background:var(--carta); color:var(--inchiostro);
  border-radius:20px; padding:26px 20px 22px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
  display:flex; flex-direction:column;
  /* bordo trasparente anche qui: solo sulla scheda top spostava il bottone
     di 3px e le due non finivano piu' allineate. */
  border:3px solid transparent;
}
.piano--top{border-color:var(--arancio); padding-top:32px}
.piano__nastro{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:#dc2626; color:#fff; border-radius:99px; white-space:nowrap;
  padding:6px 18px; font-size:11px; font-weight:900; letter-spacing:.09em;
  text-transform:uppercase; box-shadow:0 6px 16px -4px rgba(220,38,38,.6);
}
.piano__tipo{
  display:inline-flex; align-items:center; gap:6px; align-self:center;
  border-radius:99px; padding:6px 15px; font-size:11.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:12px;
}
.piano__tipo--base{background:var(--crema); color:var(--arancio-scuro)}
.piano__tipo--top{background:var(--arancio); color:#fff}
.piano h3{
  text-align:center; font-size:clamp(19px,5.4vw,23px); color:var(--arancio-scuro);
  margin:0 0 16px; line-height:1.2;
}
.piano ul{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px}
.piano li{display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:600}
.piano li .ok{
  flex:0 0 20px; height:20px; margin-top:1px; border-radius:50%;
  background:#dcfce7; color:#15803d; display:grid; place-items:center;
  font-size:12px; font-weight:900;
}
.piano__bonus-tit{
  color:var(--arancio-scuro); font-size:12.5px; font-weight:900;
  letter-spacing:.05em; text-transform:uppercase; margin:0 0 9px;
}
.piano__prezzo{margin-top:auto; text-align:center; padding-top:6px}
.piano__da{
  color:#dc2626; text-decoration:line-through; font-size:13px;
  font-weight:800; display:block; margin-bottom:2px;
}
.piano__valore{
  font-size:clamp(38px,11vw,48px); font-weight:900; color:var(--verde);
  line-height:1; letter-spacing:-.03em; margin-bottom:16px;
}
.piano__valore small{
  font-size:.55em; font-weight:800; vertical-align:.28em; margin-right:2px;
}
.nota-prezzi{
  text-align:center; font-size:13px; margin-top:22px;
  color:rgba(255,255,255,.85); font-weight:600;
}

/* ---------- recensioni ---------- */
.voto{
  display:flex; gap:20px; align-items:center; background:var(--carta);
  border-radius:18px; padding:20px 18px;
  box-shadow:var(--ombra-carta); margin-bottom:16px;
}
.voto__nota{text-align:center; flex:0 0 auto}
.voto__nota strong{
  display:block; font-size:44px; font-weight:900; color:var(--verde); line-height:1;
}
.voto__nota .stelle{color:#f59e0b; font-size:14px; letter-spacing:1px}
.voto__nota span{display:block; font-size:11.5px; color:var(--inchiostro-3); margin-top:3px}
.voto__barre{flex:1; display:grid; gap:5px; min-width:0}
.barra{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--inchiostro-3)}
.barra .traccia{
  flex:1; height:7px; background:#eeecea; border-radius:99px; overflow:hidden;
  display:block;
}
/* display:block obbligatorio: uno <span> resta inline e ignora height:100%,
   quindi la barra resterebbe grigia e vuota. */
.barra .riempi{display:block; height:100%; background:var(--arancio); border-radius:99px}

.recensioni{display:grid; gap:13px}
.recensione{
  background:var(--carta); border-radius:16px; padding:16px;
  box-shadow:var(--ombra-carta);
}
.recensione .stelle{color:#f59e0b; font-size:13px; letter-spacing:1px}
.recensione__testa{display:flex; align-items:center; gap:11px; margin:8px 0 10px}
.avatar{
  flex:0 0 40px; height:40px; border-radius:50%; color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:800;
}
.recensione__testa .nome{font-size:14.5px; font-weight:700; line-height:1.2}
.recensione__testa .data{font-size:11.5px; color:var(--inchiostro-3)}
.recensione p{margin:0 0 12px; font-size:14px; color:var(--inchiostro-2); line-height:1.55}
.recensione img{
  width:112px; height:112px; border-radius:12px;
  object-fit:cover; margin-bottom:12px;
}
.recensione__piede{display:flex; gap:9px; flex-wrap:wrap}
.recensione__piede span{
  border:1px solid var(--bordo); border-radius:99px; padding:6px 13px;
  font-size:12px; color:var(--inchiostro-2); font-weight:600;
}

/* ---------- GARANZIA (sigillo grande e fluttuante) ---------- */
/* il sigillo esce dal bordo alto della scheda e occupa il vuoto che c'era
   sopra. --sporge sta sulla SEZIONE perche' le variabili CSS scendono, non
   salgono: dichiararla sul sigillo la renderebbe invisibile al padding qui. */
/* +52px e non 30: il sigillo galleggia di ±14px e nel punto piu' alto
   entrava nella sezione precedente, che e' bianca. */
.sez--garanzia{--sporge:76px; padding-top:calc(52px + var(--sporge))}
.garanzia{
  background:var(--carta); border-radius:22px; padding:0 20px 26px;
  text-align:center; box-shadow:var(--ombra-carta);
  /* flow-root, non overflow:hidden. Senza un contesto di formattazione il
     margine negativo del sigillo COLLASSA attraverso la scheda e tira giu'
     lei invece di far uscire lui; con overflow:hidden invece verrebbe tagliato. */
  display:flow-root;
}
.sigillo{
  width:min(270px,68vw); height:auto; display:block;
  margin:calc(var(--sporge) * -1) auto 18px;
  filter:drop-shadow(0 16px 22px rgba(15,42,72,.34));
  animation:galleggia 3.6s ease-in-out infinite;
  transform-origin:center;
}
@keyframes galleggia{
  0%,100%{transform:translateY(0) rotate(-.6deg)}
  50%{transform:translateY(-14px) rotate(.6deg)}
}
.garanzia__tag{
  display:inline-flex; align-items:center; gap:7px; background:var(--crema);
  border-radius:99px; padding:6px 15px; font-size:11.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--verde); margin-bottom:12px;
}
.garanzia h2{color:var(--verde); font-size:clamp(21px,5.6vw,30px)}
.garanzia p{
  color:var(--inchiostro-2); font-size:15px; max-width:30em;
  margin:0 auto 22px; line-height:1.6;
}
.garanzia p b{color:var(--arancio)}

/* ---------- come ricevi ---------- */
.consegna{display:grid; grid-template-columns:repeat(2,1fr); gap:11px}
.consegna div{
  background:var(--crema); border-radius:16px; padding:18px 12px; text-align:center;
}
.consegna .icona{
  width:46px; height:46px; margin:0 auto 10px; background:var(--carta);
  border-radius:13px; display:grid; place-items:center; font-size:22px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.consegna h3{font-size:14.5px; color:var(--verde); margin:0 0 3px}
.consegna p{margin:0; font-size:12px; color:var(--inchiostro-3); line-height:1.35}

/* ---------- FAQ ---------- */
.faq{
  background:var(--carta); border-radius:18px; overflow:hidden;
  box-shadow:var(--ombra-carta);
}
.faq details{border-bottom:1px solid var(--bordo)}
.faq details:last-child{border-bottom:0}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 17px; cursor:pointer; list-style:none;
  font-size:14.5px; font-weight:700; color:var(--verde); line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .freccia{
  flex:0 0 28px; height:28px; border-radius:50%;
  background:var(--crema); color:var(--arancio);
  display:grid; place-items:center; font-size:13px; font-weight:900;
  transition:transform .22s ease, background .22s ease, color .22s ease;
}
.faq details[open] summary{color:var(--arancio)}
.faq details[open] summary .freccia{
  transform:rotate(180deg); background:var(--arancio); color:#fff;
}
.faq .risposta{
  padding:0 17px 17px; font-size:14px; color:var(--inchiostro-2); line-height:1.6;
}

/* ---------- piede ---------- */
.piede{background:var(--verde); color:#fff; text-align:center; padding:30px 18px 34px}
.piede strong{display:block; font-size:15px; font-weight:800; margin-bottom:8px; line-height:1.4}
.piede small{display:block; font-size:12px; color:rgba(255,255,255,.7); line-height:1.7}
.piede a{color:rgba(255,255,255,.85)}

/* ---------- barra fissa mobile ---------- */
.barra-fissa{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--bordo);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:11px;
  transform:translateY(120%); transition:transform .3s ease;
  box-shadow:0 -6px 22px rgba(0,0,0,.09);
}
.barra-fissa[data-visibile="true"]{transform:translateY(0)}
.barra-fissa .prezzo{flex:0 0 auto; line-height:1.1}
.barra-fissa .prezzo small{
  display:block; font-size:10.5px; color:var(--inchiostro-3); font-weight:700;
}
.barra-fissa .prezzo strong{font-size:21px; font-weight:900; color:var(--verde)}
.barra-fissa .btn{margin:0; padding:13px 16px; font-size:14px}
body.con-barra{padding-bottom:76px}

/* ---------- comparsa ---------- */
.appare{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s ease;
}
.appare.visto{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .sigillo{animation:none}
  .btn--pulsa{animation:none}
  html{scroll-behavior:auto}
  .appare{opacity:1; transform:none; transition:none}
}

/* ============================================================
   DA TABLET IN SU
   ============================================================ */
@media (min-width:640px){
  .sez{padding:56px 24px}
  .benefici{grid-template-columns:repeat(2,1fr)}
  .ricette{grid-template-columns:repeat(3,1fr); gap:16px}
  .ricetta h3{font-size:14px}
  .ricetta p{font-size:13px}
  .categorie{flex-direction:row; flex-wrap:wrap; justify-content:center}
  .per-te{grid-template-columns:repeat(2,1fr)}
  .consegna{grid-template-columns:repeat(4,1fr)}
  .recensioni{grid-template-columns:repeat(2,1fr)}
  .fiducia{flex-direction:row; justify-content:center; gap:22px}
  .carosello > *{flex:0 0 48%}
  .carosello--chat > *{flex:0 0 40%}
  .bonus__carta img{width:150px; flex:0 0 150px}
  .pila{grid-template-columns:1fr 2fr; align-items:start; gap:20px}
  .pila__libri{gap:16px 12px}
  .pila__gruppo--top .pila__libri{grid-template-columns:repeat(4,1fr)}
  .pila__libri figcaption{font-size:11.5px}
  .barra-fissa{display:none}
  body.con-barra{padding-bottom:0}
}

@media (min-width:900px){
  .sez{padding:72px 24px}
  /* stretch, non start: le due schede devono finire alla stessa altezza.
     .piano e' flex-column e .piano__prezzo ha margin-top:auto, quindi
     prezzo e bottone si allineano da soli in fondo a tutte e due. */
  .piani{
    grid-template-columns:repeat(2,1fr); max-width:860px;
    gap:26px; align-items:stretch;
  }
  /* niente scale sul piano top: le due schede devono avere la STESSA misura.
     Il piano consigliato si distingue gia' con il bordo arancio, il nastro
     rosso e l'etichetta — ingrandirlo del 4% le rendeva di nuovo diverse. */
  .ricette{grid-template-columns:repeat(4,1fr)}
  .carosello > *{flex:0 0 32%}
  .carosello--chat > *{flex:0 0 27%}
  .recensioni{grid-template-columns:repeat(3,1fr)}
  .blocco-357{padding:52px 40px}
}