/* Alessio Amadei — foglio di stile unico
   Palette derivata dalla copertina del libro. */

:root{
  --verde:#14322F;
  --verde-alto:#1b4640;
  --verde-riga:#2c534c;
  --crema:#F6F4EE;
  --sabbia:#C9BDA0;
  --salvia:#4A7C62;
  --tenue:#9db3ad;
  --testo:#cddbd6;
  --max:660px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}

body{
  background:var(--verde);
  color:var(--crema);
  font:17px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ---------- La bolla, segno ricorrente ---------- */
.bolla{
  width:64px;height:44px;
  border:5px solid var(--crema);
  border-radius:14px;
  position:relative;
  margin-bottom:26px;
}
.bolla::after{
  content:"";position:absolute;left:11px;top:100%;
  border-left:0 solid transparent;border-right:15px solid transparent;
  border-top:19px solid var(--crema);
}
.bolla span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--sabbia);font-size:19px;letter-spacing:5px;text-indent:5px;line-height:1;
}

/* ---------- Testata ---------- */
header.top{padding:52px 0 34px}
.nome{font-size:12px;letter-spacing:3.4px;text-transform:uppercase;color:var(--sabbia)}

h1{font-size:clamp(31px,7vw,46px);line-height:1.1;font-weight:700;letter-spacing:-.5px;margin:14px 0 18px}
h2{font-size:clamp(21px,4.6vw,26px);line-height:1.22;font-weight:700;margin:0 0 14px}
h3{font-size:18px;line-height:1.3;margin:0 0 8px}

.occhiello{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--sabbia);margin-bottom:12px}

p{margin:0 0 15px;color:var(--testo)}
p.forte{color:var(--crema);font-size:19px;line-height:1.5}
p:last-child{margin-bottom:0}
strong{color:var(--crema);font-weight:600}
a{color:var(--sabbia)}

section{padding:38px 0;border-top:1px solid var(--verde-riga)}

/* ---------- Elenchi ---------- */
ul.dentro{list-style:none;margin:0 0 18px}
ul.dentro li{
  position:relative;padding-left:26px;margin-bottom:11px;color:var(--testo);
}
ul.dentro li::before{
  content:"";position:absolute;left:0;top:9px;
  width:11px;height:8px;border:2px solid var(--sabbia);border-radius:3px;
}

/* ---------- Riquadro ---------- */
.riq{
  background:var(--verde-alto);
  border:1px solid var(--verde-riga);
  border-radius:15px;
  padding:22px;
  margin:22px 0;
}

/* ---------- Pulsanti ---------- */
.bottone{
  display:inline-block;
  background:var(--sabbia);color:var(--verde);
  font-weight:700;font-size:16px;
  padding:14px 26px;border-radius:11px;
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .12s ease,background .12s ease;
}
.bottone:hover{background:#d8ceb5;transform:translateY(-1px)}
.bottone:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible{
  outline:3px solid var(--salvia);outline-offset:3px;
}
.bottone.vuoto{background:transparent;color:var(--sabbia);border:1.5px solid var(--sabbia)}
.bottone.vuoto:hover{background:rgba(201,189,160,.12)}

/* ---------- Modulo ---------- */
form{margin-top:18px}
label{display:block;font-size:14px;color:var(--tenue);margin-bottom:7px}
input[type=email],input[type=text]{
  width:100%;padding:13px 15px;font-size:16px;
  background:#0f2724;color:var(--crema);
  border:1px solid var(--verde-riga);border-radius:11px;
  margin-bottom:14px;
}
input::placeholder{color:#6d8781}
.consenso{display:flex;gap:11px;align-items:flex-start;margin-bottom:18px}
.consenso input{margin-top:4px;width:19px;height:19px;flex:none;accent-color:var(--salvia)}
.consenso label{font-size:13.5px;line-height:1.45;margin:0}

/* ---------- Copertina libro ---------- */
.libro{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.libro .cop{
  width:132px;flex:none;aspect-ratio:1/1.6;border-radius:6px;
  background:var(--verde-alto);border:1px solid var(--verde-riga);
  display:flex;align-items:center;justify-content:center;
  color:var(--tenue);font-size:11px;text-align:center;padding:10px;
}
.libro .info{flex:1;min-width:230px}

/* ---------- Piede ---------- */
footer{padding:34px 0 54px;border-top:1px solid var(--verde-riga);margin-top:34px;font-size:14px;color:var(--tenue)}
footer p{color:var(--tenue);font-size:14px}
footer a{color:var(--sabbia)}
.fascia{height:9px;background:var(--sabbia)}

.nota{font-size:13.5px;color:var(--tenue)}