/* ============================================================
   25 Stories of Catholic Saints for Kids — Family Kit site
   Palette e font dal DNA Stilistico (lsp-dna-stilistico):
   Blu Vespro #012D5D · Azzurro Cielo #86C4E1 (prof. #64A9D3)
   Oro Aureola #F3C35C · Rosso Vessillo #DA2E1F
   Crema Nuvola #FBF2D3 · Sabbia Dorata #F3DFAD
   Font: Baloo 2 (titoli) · Andika (corpo)
   ============================================================ */

@font-face{
  font-family:'Baloo 2';
  src:url('assets/fonts/Baloo2.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Andika';
  src:url('assets/fonts/Andika-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Andika';
  src:url('assets/fonts/Andika-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --navy:#012D5D;
  --sky:#86C4E1;
  --sky-deep:#64A9D3;
  --gold:#F3C35C;
  --gold-deep:#D9A53A;
  --red:#DA2E1F;
  --red-deep:#B3200F;
  --cream:#FBF2D3;
  --sand:#F3DFAD;
  --white:#FFFDF6;
  --shadow:0 10px 30px rgba(1,45,93,.18);
  --radius:22px;
  --font-display:'Baloo 2','Arial Rounded MT Bold',Verdana,sans-serif;
  --font-body:'Andika',Verdana,Geneva,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--navy);
  background:var(--cream);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--navy)}

/* ---------- HERO: cielo con luce radiale e nuvole ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(251,242,211,.95) 0%, rgba(251,242,211,.35) 35%, rgba(251,242,211,0) 62%),
    linear-gradient(180deg, var(--sky-deep) 0%, var(--sky) 55%, #a8d4ea 100%);
  color:var(--navy);
  text-align:center;
  padding:56px 20px 110px;
  overflow:hidden;
}
/* banda di nuvole in fondo all'hero */
.hero::after{
  content:"";
  position:absolute;left:-5%;right:-5%;bottom:-40px;height:120px;
  background:
    radial-gradient(circle at 8% 60%, var(--cream) 52px, transparent 53px),
    radial-gradient(circle at 20% 40%, var(--cream) 65px, transparent 66px),
    radial-gradient(circle at 34% 65%, var(--cream) 55px, transparent 56px),
    radial-gradient(circle at 48% 38%, var(--cream) 70px, transparent 71px),
    radial-gradient(circle at 62% 62%, var(--cream) 58px, transparent 59px),
    radial-gradient(circle at 76% 42%, var(--cream) 66px, transparent 67px),
    radial-gradient(circle at 91% 60%, var(--cream) 60px, transparent 61px),
    linear-gradient(180deg, transparent 55%, var(--cream) 56%);
}
/* nuvole dorate più in alto, come in copertina */
.hero::before{
  content:"";
  position:absolute;left:-5%;right:-5%;bottom:-25px;height:150px;
  background:
    radial-gradient(circle at 14% 45%, var(--sand) 58px, transparent 59px),
    radial-gradient(circle at 42% 50%, var(--sand) 72px, transparent 73px),
    radial-gradient(circle at 70% 45%, var(--sand) 62px, transparent 63px),
    radial-gradient(circle at 95% 52%, var(--sand) 55px, transparent 56px);
  opacity:.8;
}
.hero>*{position:relative;z-index:2}

.dove{
  width:74px;height:74px;border-radius:50%;
  margin:0 auto 14px;border:3px solid var(--white);
  box-shadow:var(--shadow);
  object-fit:cover;
}
.kicker{
  font-family:var(--font-display);
  font-weight:700;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy);
  background:var(--gold);
  display:inline-block;
  padding:6px 18px;border-radius:999px;
  box-shadow:0 3px 0 rgba(1,45,93,.25);
}
h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(38px, 7vw, 64px);
  line-height:1.05;
  margin:18px auto 10px;
  max-width:16ch;
  color:var(--cream);
  paint-order:stroke fill;
  -webkit-text-stroke:10px var(--navy);
  text-shadow:0 5px 0 rgba(1,45,93,.35), 0 12px 24px rgba(1,45,93,.25);
}
h1 .oro{color:var(--gold)}
.hero .sotto{
  font-size:clamp(17px,2.4vw,21px);
  max-width:560px;margin:0 auto;
  font-weight:700;
}

@media (max-width:480px){
  .kicker{font-size:12.5px;letter-spacing:.08em;padding:6px 14px}
}

/* hero compatto per le pagine interne */
.hero.corta{padding:44px 20px 96px}
.hero.corta h1{font-size:clamp(30px,5.5vw,48px);-webkit-text-stroke:8px var(--navy)}
.hero.mini{padding:34px 20px 86px}
.hero.mini h1{font-size:clamp(26px,5vw,40px);-webkit-text-stroke:7px var(--navy);max-width:22ch}

/* colonna singola centrata per le pagine interne */
.contenuto.stretta{grid-template-columns:1fr;max-width:760px}

/* ---------- LAYOUT ---------- */
.contenuto{
  max-width:1060px;margin:-40px auto 0;position:relative;z-index:3;
  padding:0 20px 30px;
  display:grid;grid-template-columns:1fr 340px;gap:36px;
  align-items:start;
}
@media (max-width:880px){
  .contenuto{grid-template-columns:1fr;max-width:640px}
  .colonna-cover{order:-1;margin-top:-30px}
}

/* ---------- COVER DEL LIBRO ---------- */
.colonna-cover{text-align:center;position:sticky;top:24px}
@media (max-width:880px){.colonna-cover{position:static}}
.libro{
  position:relative;display:inline-block;margin-top:26px;
  transform:rotate(-2.5deg);
}
.libro img.cover{
  width:min(300px,72vw);
  border:8px solid var(--white);
  border-radius:10px;
  box-shadow:0 24px 50px rgba(1,45,93,.35);
}
/* stella "100% FREE" come il badge età in copertina */
.stella{
  position:absolute;top:-34px;right:-30px;
  width:104px;height:104px;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;
  font-size:17px;line-height:1.05;color:var(--navy);
  text-align:center;
  transform:rotate(8deg);
  filter:drop-shadow(0 6px 10px rgba(1,45,93,.3));
}
.stella::before{
  content:"";position:absolute;inset:0;
  background:var(--gold);
  clip-path:polygon(50% 0%,61% 12%,76% 6%,80% 22%,96% 24%,90% 39%,100% 50%,90% 61%,96% 76%,80% 78%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 78%,4% 76%,10% 61%,0% 50%,10% 39%,4% 24%,20% 22%,24% 6%,39% 12%);
}
.stella span{position:relative;z-index:1;transform:rotate(-2deg)}
.nota-cover{
  margin-top:22px;font-size:14.5px;color:var(--navy);
  opacity:.75;max-width:280px;margin-left:auto;margin-right:auto;
}

/* ---------- CARDS ---------- */
.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:30px 30px 26px;
  margin-bottom:26px;
}
.card.sabbia{
  background:var(--sand);
  border:3px solid var(--gold);
}
h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(24px,3.4vw,30px);
  line-height:1.15;margin-bottom:14px;
}
h2 .filo{color:var(--gold-deep)}

/* lista "cosa c'è dentro" */
.dentro{list-style:none;display:grid;gap:16px;margin-top:6px}
.dentro li{
  display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;
}
.icona{
  width:52px;height:52px;border-radius:14px;
  background:var(--navy);
  display:grid;place-items:center;
  box-shadow:0 4px 0 rgba(1,45,93,.25);
}
.icona svg{width:28px;height:28px;fill:var(--gold)}
.dentro b{font-family:var(--font-display);font-weight:700;font-size:18px;display:block}
.dentro p{font-size:15.5px;margin-top:2px}

/* ---------- FORM ---------- */
.form-titolo{
  display:flex;align-items:center;gap:10px;margin-bottom:4px;
}
.riga-campi{display:grid;gap:16px;margin-top:18px}
label.campo{display:block;font-family:var(--font-display);font-weight:700;font-size:16px}
label.campo .obbl{color:var(--red)}
input[type=text],input[type=email]{
  width:100%;margin-top:6px;
  font-family:var(--font-body);font-size:17px;color:var(--navy);
  background:var(--cream);
  border:2.5px solid var(--navy);
  border-radius:14px;
  padding:13px 16px;
  outline:none;
  transition:box-shadow .15s,border-color .15s;
}
input[type=text]:focus,input[type=email]:focus{
  border-color:var(--gold-deep);
  box-shadow:0 0 0 4px rgba(243,195,92,.45);
  background:#fff;
}
.consenso{
  display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;
  background:var(--cream);
  border-radius:14px;padding:14px 16px;
  font-size:15px;line-height:1.5;
}
.consenso input{
  width:22px;height:22px;margin-top:2px;accent-color:var(--red);
}
.privacy-nota{font-size:13.5px;opacity:.8;line-height:1.5}
.privacy-nota a{color:var(--navy);font-weight:700}

/* honeypot invisibile */
.hp{position:absolute;left:-6000px;top:-6000px}

/* bottone CTA — Rosso Vessillo, il colore-segnale dell'azione */
.cta{
  display:block;width:100%;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(19px,2.6vw,23px);
  color:var(--cream);
  background:linear-gradient(180deg,#E8452F 0%,var(--red) 45%,var(--red-deep) 100%);
  border:none;border-radius:999px;
  padding:18px 26px;
  cursor:pointer;
  box-shadow:0 6px 0 var(--red-deep), 0 14px 26px rgba(218,46,31,.35);
  transition:transform .12s, box-shadow .12s;
  text-align:center;text-decoration:none;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--red-deep),0 18px 30px rgba(218,46,31,.4)}
.cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--red-deep)}
.sotto-cta{
  text-align:center;font-size:14px;margin-top:12px;opacity:.85;
}
.sotto-cta b{color:var(--gold-deep)}

.errore{
  display:none;
  background:#FDE8E5;border:2.5px solid var(--red);
  color:var(--red-deep);
  border-radius:14px;padding:12px 16px;margin-top:16px;
  font-weight:700;font-size:15px;
}
.errore.visibile{display:block}

/* ---------- PAGINA GRAZIE: download card ---------- */
.download-grid{display:grid;gap:18px;margin-top:8px}
.dl{
  display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;
  background:var(--white);
  border:3px solid var(--gold);
  border-radius:18px;
  padding:18px 20px;
  text-decoration:none;
  transition:transform .12s, box-shadow .12s;
  box-shadow:0 5px 0 rgba(217,165,58,.45);
}
.dl:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(217,165,58,.5)}
.dl .icona{border-radius:50%}
.dl b{font-family:var(--font-display);font-size:18px;display:block;line-height:1.2}
.dl small{font-size:13.5px;opacity:.75}
.dl .btn-mini{
  font-family:var(--font-display);font-weight:800;font-size:15px;
  background:var(--navy);color:var(--gold);
  padding:10px 18px;border-radius:999px;white-space:nowrap;
}

/* lista tracce audio */
.tracce{list-style:none;display:grid;gap:10px;margin-top:14px}
.tracce li{
  background:var(--white);
  border-radius:14px;
  padding:12px 16px;
  display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;
  box-shadow:0 3px 10px rgba(1,45,93,.08);
}
.tracce .num{
  width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:var(--gold);
  font-family:var(--font-display);font-weight:800;font-size:18px;
  display:grid;place-items:center;
}
.tracce b{font-family:var(--font-display);font-weight:700;font-size:16px;display:block;line-height:1.25}
.tracce small{font-size:13px;opacity:.7}
.tracce audio{width:100%;height:36px;margin-top:8px;grid-column:1/-1}

/* ---------- PAGINA LISTEN ---------- */
.player-card{max-width:640px;margin:0 auto}
.player-card audio{width:100%;margin-top:18px;height:48px}
.sezione-pill{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--sky);color:var(--navy);
  padding:5px 14px;border-radius:999px;margin-bottom:10px;
}
.nav-storie{
  display:flex;justify-content:space-between;gap:12px;margin-top:20px;
  font-family:var(--font-display);font-weight:700;font-size:15px;
}
.nav-storie a{
  text-decoration:none;background:var(--cream);
  padding:10px 16px;border-radius:999px;border:2px solid var(--navy);
}
.nav-storie a:hover{background:var(--gold)}

/* richiamo kit nelle pagine listen */
.kit-promo{
  margin-top:26px;text-align:center;
  background:var(--navy);color:var(--cream);
  border-radius:var(--radius);
  padding:26px 24px;
}
.kit-promo h2{color:var(--gold)}
.kit-promo p{font-size:15.5px;max-width:46ch;margin:0 auto 16px}
.kit-promo .cta{max-width:380px;margin:0 auto}

/* ---------- FOOTER ---------- */
footer{
  margin-top:40px;
  background:var(--navy);
  color:var(--cream);
  text-align:center;
  padding:34px 20px;
  font-size:14.5px;
}
footer .fregio{color:var(--gold);font-size:18px;letter-spacing:.4em;margin-bottom:10px}
footer a{color:var(--gold);font-weight:700}
footer .pen{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.12em;text-transform:uppercase}

/* pagina semplice (privacy) */
.pagina-semplice{max-width:720px;margin:0 auto;padding:40px 20px}
.pagina-semplice h1{
  color:var(--navy);-webkit-text-stroke:0;text-shadow:none;
  font-size:34px;max-width:none;text-align:left;margin:0 0 18px;
}
.pagina-semplice h2{font-size:22px;margin:26px 0 8px}
.pagina-semplice p,.pagina-semplice li{font-size:16px;margin-bottom:10px}
.pagina-semplice ul{padding-left:22px}