/* ============================================================
   HOME — AiutanteDigitale.it  (redesign 2026)
   Caricato SOLO sulla home (vedi index.php $extraCss).
   Riusa le variabili e i bottoni globali di main.css.
   ============================================================ */
:root{
  --panna:#FFFDF9;
  --crema:#F3ECE0;
  --blu:#1A6FB5;
}

/* Titoli editoriali (font Fraunces, caricato in index.php) */
.home h1, .home h2, .home h3, .home .sez-head h2{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600; letter-spacing:-.01em; line-height:1.08;
}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--verde)}

/* ── HERO full-width ── */
.hh{
  background:linear-gradient(135deg,#E8F5EE 0%,#FFF8F0 52%,#FFF3E0 100%);
  padding:clamp(56px,8vw,96px) clamp(16px,6vw,40px);
  text-align:center; position:relative; overflow:hidden;
}
.hh-inner{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:#E8F5EE;border:1px solid #A8D5B8;color:var(--verde-sc);
  font-size:13px;font-weight:800;padding:7px 16px;border-radius:50px;margin-bottom:28px;
}
.hh h1{font-size:clamp(40px,7vw,88px);color:var(--testo);margin:0 0 26px;width:100%}
.hh h1 em{font-style:italic;color:var(--verde)}
.hero-sub{font-size:clamp(17px,2.2vw,21px);color:var(--grigio);max-width:680px;margin:0 auto 36px;line-height:1.55}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:32px}
.hero-trust{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.hero-trust span{
  background:var(--panna);border:1px solid var(--bordo);color:var(--testo);
  font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:50px;
}

/* ── Intestazione sezione centrata ── */
.sez{padding:clamp(56px,8vw,96px) clamp(16px,6vw,40px)}
.sez .container{max-width:1180px;margin:0 auto}
.sez-head{max-width:700px;margin:0 auto 52px;text-align:center}
.sez-head h2{font-size:clamp(28px,3.8vw,44px);color:var(--testo);margin:14px 0}
.sez-head h2 em{font-style:italic;color:var(--verde)}
.sez-head p{font-size:18px;color:var(--grigio)}

/* ── AIUTANTI DISPONIBILI ── */
.aiutanti-disp{background:var(--panna);border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo)}
.aiut-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.aiut-card{
  background:var(--caldo);border:1px solid var(--bordo);border-radius:18px;
  padding:20px;display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:inherit;transition:all .22s;
}
.aiut-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(45,139,85,.14);border-color:var(--verde-ch)}
.aiut-head{display:flex;align-items:flex-start;gap:12px}
.aiut-av{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--verde),var(--verde-ch));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;
}
.aiut-av img{width:100%;height:100%;object-fit:cover}
.aiut-info{min-width:0;flex:1}
.aiut-nome{font-weight:800;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--testo)}
.aiut-badge-ev{background:#EFF6FF;color:#185FA5;font-size:9px;font-weight:800;padding:2px 7px;border-radius:50px}
.aiut-badge-f{background:#1A2F1A;color:#FFD75E;font-size:9px;font-weight:800;padding:2px 7px;border-radius:50px}
.aiut-citta{font-size:13px;color:var(--grigio);margin-top:2px}
.aiut-stars{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--testo);margin-top:3px}
.aiut-stars .nrec{color:var(--grigio)}
.aiut-bio{font-size:13.5px;color:var(--grigio);line-height:1.5;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aiut-tags{display:flex;flex-wrap:wrap;gap:6px}
.aiut-tags span{background:#E8F5EE;color:var(--verde-sc);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:50px}
.aiut-foot{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--bordo);margin-top:auto}
.aiut-prezzo{font-size:18px;font-weight:900;color:var(--verde-sc);line-height:1}
.aiut-prezzo span{font-size:12px;color:var(--grigio);font-weight:600}
.aiut-disp{display:flex;align-items:center;gap:5px;font-size:12px;color:#16a34a;font-weight:700;flex:1}
.aiut-disp i{width:7px;height:7px;border-radius:50%;background:#22c55e;display:inline-block}
.aiut-btn{background:var(--arancio);color:#fff;font-size:13px;font-weight:800;padding:8px 16px;border-radius:50px;white-space:nowrap}
.aiut-card:hover .aiut-btn{background:#e07520}
.aiut-empty{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--grigio)}

/* ── SERVIZI (bento) ── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.b-card{
  background:var(--panna);border:1px solid var(--bordo);border-radius:18px;
  padding:28px;transition:all .25s;display:flex;flex-direction:column;gap:10px;
}
.b-card:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(45,139,85,.12);border-color:var(--verde-ch)}
.b-card .ic{width:56px;height:56px;border-radius:16px;background:#E8F5EE;display:flex;align-items:center;justify-content:center;font-size:28px}
.b-card h3{font-size:19px;color:var(--testo);margin:0}
.b-card p{font-size:14px;color:var(--grigio);line-height:1.5;margin:0}
.b-card.big{grid-column:span 2;background:linear-gradient(140deg,#DCEBE0,#F0E4D2);position:relative;overflow:hidden;justify-content:flex-end}
.b-card.big h3{font-size:24px}
.b-card.big .ph{position:absolute;top:18px;right:20px;font-size:46px;opacity:.4}
.b-card.dark{background:linear-gradient(140deg,var(--verde-sc),var(--verde));color:#fff}
.b-card.dark h3{color:#fff}
.b-card.dark p{color:rgba(255,255,255,.85)}
.b-card.dark .ic{background:rgba(255,255,255,.15)}

/* ── COME FUNZIONA ── */
.howto{background:var(--crema)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1000px;margin:0 auto}
.step{text-align:left}
.step-n{font-family:'Fraunces',serif;font-size:64px;font-weight:600;color:var(--verde-ch);opacity:.5;line-height:1}
.step h3{font-size:22px;color:var(--testo);margin:6px 0 10px}
.step p{color:var(--grigio);font-size:15px}

/* ── RECLUTAMENTO AIUTANTI ── */
.recruit{background:linear-gradient(140deg,#1A2F1A,var(--verde-sc));color:#fff}
.recruit .container{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.recruit .eyebrow{color:#FFD75E}
.recruit h2{font-size:clamp(28px,3.8vw,44px);margin:14px 0 18px;color:#fff}
.recruit h2 em{font-style:italic;color:#FFD75E}
.recruit .lead{color:rgba(255,255,255,.82);font-size:18px;margin-bottom:28px;max-width:480px}
.recruit ul{list-style:none;display:flex;flex-direction:column;gap:14px;margin:22px 0 0;padding:0}
.recruit li{display:flex;gap:10px;align-items:center;font-size:16px;color:rgba(255,255,255,.9)}
.recruit li b{color:#FFD75E;font-size:18px}
.btn-gold{
  display:inline-flex;align-items:center;gap:8px;
  background:#FFD75E;color:#1A2F1A;padding:16px 30px;font-size:17px;font-weight:800;
  border-radius:50px;text-decoration:none;transition:all .2s;border:none;cursor:pointer;
}
.btn-gold:hover{background:#ffcf3f;color:#1A2F1A;transform:translateY(-2px)}
.founder-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,215,94,.3);border-radius:24px;padding:32px}
.founder-card .big{font-family:'Fraunces',serif;font-size:52px;font-weight:600;line-height:1;color:#fff}
.founder-card .sub{color:#FFD75E;font-weight:800;margin-bottom:18px}
.founder-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.founder-row .left{color:rgba(255,255,255,.6)}
.founder-row .right{color:#FFD75E;font-weight:800}
.bar{background:rgba(255,255,255,.15);border-radius:50px;height:8px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#FFD75E,#FFAA00);border-radius:50px}

/* ── CTA FINALE ── */
.cta-finale{text-align:center;padding:clamp(64px,9vw,104px) clamp(16px,6vw,40px);background:var(--caldo)}
.cta-finale h2{font-size:clamp(30px,4.4vw,52px);color:var(--testo);margin-bottom:18px}
.cta-finale h2 em{font-style:italic;color:var(--verde)}
.cta-finale p{font-size:19px;color:var(--grigio);margin-bottom:32px}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-card.big{grid-column:span 2}
  .steps{grid-template-columns:1fr;gap:28px}
  .aiut-grid{grid-template-columns:repeat(2,1fr)}
  .recruit .container{grid-template-columns:1fr;gap:36px}
}
@media(max-width:560px){
  .aiut-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .b-card.big{grid-column:span 1}
  .hero-cta .btn{width:100%;max-width:320px;justify-content:center}
}