/* Colori e caratteri sono gli stessi del libro: chi arriva qui col volume in mano deve
   riconoscere la stessa mano. Oliva e crema dagli interni, arancio zucca per le sole cose
   da toccare, EB Garamond per il testo e Lato per le etichette. */
:root{
  --oliva:#2F4739; --oliva-med:#5B7565; --oliva-ten:#E7EDE7;
  --zucca:#BF6E1A; --zucca-scuro:#A05C13; --mattone:#91402B;
  --verde:#37734A; --verde-scuro:#2A5B39;
  --crema:#FBF8F3; --sabbia:#F1ECE3; --rigo:#DCD5C7;
  --testo:#2B2A27; --grigio:#7C766D; --bianco:#fff;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ombra:0 1px 2px rgba(47,71,57,.05),0 8px 28px rgba(47,71,57,.07);
  --raggio:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Se un tema o un plugin blocca lo scorrimento del body, la pagina si taglia e lo step 2
   non si raggiunge: qui si ripristina a forza, oltre a togliere il CSS del tema lato PHP. */
html:has(body.rsb),body.rsb{overflow-x:hidden !important;overflow-y:visible !important;
  height:auto !important;max-height:none !important;position:static !important}
body.rsb{
  margin:0;background:var(--crema);color:var(--testo);
  font-family:var(--serif);font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.rsb img{max-width:100%;height:auto}
.rsb-wrap{max-width:660px;margin:0 auto;padding:0 20px}
.rsb-main{padding:38px 0 64px}

/* ---------------------------------------------------------------- tipografia */
.rsb-occhiello{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oliva-med);margin:0 0 14px;
}
.rsb-h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(34px,8vw,50px);line-height:1.1;
  letter-spacing:-.01em;color:var(--oliva);margin:0 0 18px;text-wrap:balance;
}
.rsb-h1 em{font-style:italic;color:var(--zucca)}
.rsb-sotto{font-size:clamp(19px,4.4vw,22px);line-height:1.5;color:var(--testo);margin:0 0 6px}
.rsb-piccolo{font-size:16px;color:var(--grigio)}
.rsb-filetto{height:3px;width:72px;background:var(--zucca);border:0;margin:0 0 26px;border-radius:2px}

/* ---------------------------------------------------------------- pulsante */
.rsb-cta{
  display:block;width:100%;border:0;cursor:pointer;text-decoration:none;text-align:center;
  background:var(--zucca);color:#fff;font-family:var(--sans);font-weight:900;
  font-size:19px;letter-spacing:.01em;line-height:1.25;
  padding:20px 24px;border-radius:var(--raggio);
  box-shadow:0 2px 0 var(--zucca-scuro),0 10px 22px rgba(191,110,26,.28);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.rsb-cta:hover,.rsb-cta:focus{background:var(--zucca-scuro);color:#fff;transform:translateY(-1px)}
.rsb-cta:active{transform:translateY(1px);box-shadow:0 1px 0 var(--zucca-scuro)}
.rsb-cta small{display:block;font-weight:400;font-size:14px;opacity:.92;margin-top:5px;letter-spacing:0}
/* Il pulsante della recensione e' verde e non arancio: l'arancio e' del pulsante che porta
   avanti nel funnel, e due arancioni sulla stessa pagina se la giocano. Il verde dice
   «cosa buona» e resta dentro la famiglia di colori del libro. */
.rsb-cta-2{
  background:var(--verde);color:#fff;border:0;
  box-shadow:0 2px 0 var(--verde-scuro),0 10px 22px rgba(55,115,74,.24);
  font-weight:900;padding:19px 24px;font-size:18px;
}
.rsb-cta-2:hover,.rsb-cta-2:focus{background:var(--verde-scuro);color:#fff}
.rsb-cta[aria-disabled="true"]{background:var(--rigo);color:#6b665e;box-shadow:none;cursor:not-allowed}
:where(a,button,input,.rsb-cta):focus-visible{outline:3px solid var(--oliva-med);outline-offset:3px}

/* ---------------------------------------------------------------- blocchi */
.rsb-card{background:var(--bianco);border:1px solid var(--rigo);border-radius:var(--raggio);
  box-shadow:var(--ombra);padding:26px 22px}
.rsb-nota{background:var(--oliva-ten);border-radius:var(--raggio);padding:16px 18px;
  font-size:17px;color:var(--oliva)}
.rsb-nota strong{color:var(--oliva)}

.rsb-elenco{list-style:none;margin:26px 0 0;padding:0}
.rsb-elenco li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--rigo)}
.rsb-elenco li:first-child{border-top:0;padding-top:6px}
/* La copertina e' un foglio: bordo sottile e un'ombra corta, cosi' si legge come carta
   stampata e non come un riquadro dell'interfaccia. Altezza da sola, per non deformarla. */
.rsb-cover{flex:0 0 auto;width:94px;height:auto;display:block;background:#fff;
  border:1px solid var(--rigo);border-radius:3px;
  box-shadow:0 1px 2px rgba(47,71,57,.08),0 6px 14px rgba(47,71,57,.10)}
.rsb-elenco b{display:block;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--oliva);
  letter-spacing:.01em;margin-bottom:2px}
.rsb-elenco span{font-size:17px;line-height:1.45;color:var(--testo)}

/* ---------------------------------------------------------------- step */
.rsb-step{margin:0 0 22px;background:var(--bianco);border:1px solid var(--rigo);
  border-radius:var(--raggio);box-shadow:var(--ombra);overflow:hidden}
.rsb-step-testa{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:16px 22px;
  background:var(--sabbia);border-bottom:1px solid var(--rigo)}
.rsb-step-n{font-family:var(--sans);font-size:11px;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;background:var(--oliva);
  padding:6px 11px;border-radius:999px;white-space:nowrap}
.rsb-step-tit{font-family:var(--serif);font-size:21px;color:var(--oliva);line-height:1.25}
.rsb-step-corpo{padding:24px 22px}
.rsb-step--facolt .rsb-step-n{background:var(--oliva-med)}
.rsb-facolt{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--oliva-med);
  border:1px solid var(--oliva-med);border-radius:999px;padding:3px 10px}
.rsb-step-tit{flex:0 0 100%}   /* su telefono il titolo prende la sua riga */

/* ---------------------------------------------------------------- form */
.rsb-campo{margin:0 0 18px}
.rsb-campo label{display:block;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--oliva);margin-bottom:7px}
.rsb-campo input[type=text],.rsb-campo input[type=email]{
  width:100%;font-family:var(--serif);font-size:19px;color:var(--testo);
  padding:15px 16px;background:var(--crema);border:1.5px solid var(--rigo);
  border-radius:10px;transition:border-color .12s ease,background .12s ease}
.rsb-campo input:focus{border-color:var(--oliva-med);background:#fff;outline:none}
.rsb-consenso{display:flex;gap:12px;align-items:flex-start;margin:0 0 22px;
  background:var(--crema);border:1px solid var(--rigo);border-radius:10px;padding:14px 15px}
.rsb-consenso input{flex:0 0 auto;width:22px;height:22px;margin:2px 0 0;accent-color:var(--oliva)}
.rsb-consenso span{font-size:15.5px;line-height:1.45;color:var(--testo)}
.rsb-consenso a{color:var(--oliva)}
.rsb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rsb-errore{background:#FBEDE9;border:1px solid var(--mattone);color:var(--mattone);
  border-radius:10px;padding:13px 15px;margin:0 0 20px;font-size:17px}
.rsb-sotto-cta{margin:14px 0 0;text-align:center;font-size:15px;color:var(--grigio)}

/* ---------------------------------------------------------------- grazie */
.rsb-segno{width:66px;height:66px;border-radius:50%;background:var(--oliva);
  display:flex;align-items:center;justify-content:center;margin:0 0 22px}
.rsb-segno svg{width:32px;height:32px;stroke:#fff;stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.rsb-avviso{background:#fff;border:1px solid var(--rigo);border-left:5px solid var(--zucca);
  border-radius:12px;padding:20px 20px;margin:26px 0}
.rsb-avviso h2{font-family:var(--serif);font-size:22px;color:var(--oliva);margin:0 0 10px;font-weight:500}
.rsb-avviso ol{margin:0;padding-left:20px}
.rsb-avviso li{margin:0 0 9px;font-size:17.5px;line-height:1.5}
.rsb-avviso li:last-child{margin-bottom:0}
.rsb-avviso code{font-family:var(--sans);font-size:14px;font-weight:700;background:var(--oliva-ten);
  color:var(--oliva);padding:2px 7px;border-radius:5px;letter-spacing:.02em}

/* ---------------------------------------------------------------- piede */
.rsb-piede{border-top:1px solid var(--rigo);margin-top:46px;padding:22px 0 40px;
  font-size:14px;color:var(--grigio);text-align:center;line-height:1.6}
.rsb-piede a{color:var(--grigio)}

@media (min-width:640px){
  /* Da tablet in su le quattro copertine diventano una griglia 2x2 con l'immagine sopra:
     in riga restavano alte come un A4 con due righe di testo accanto, e mezza pagina di
     bianco a destra. Cosi' le copertine sono grandi, che e' il punto di metterle. */
  .rsb-elenco{display:grid;grid-template-columns:1fr 1fr;gap:30px 26px;margin-top:20px}
  .rsb-elenco li{display:block;border-top:0;padding:0}
  .rsb-elenco li:first-child{padding-top:0}
  .rsb-cover{width:100%;margin-bottom:14px}
  .rsb-step-tit{flex:1 1 auto;order:2}
  .rsb-facolt{order:3;margin-left:auto}
  .rsb-main{padding:64px 0 80px}
  .rsb-card,.rsb-step-corpo{padding:32px 34px}
  .rsb-step-testa{padding:18px 34px}
  .rsb-cta{font-size:21px;padding:22px 28px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}