/* ─────────────────────────────────────────────────────────────────────────
   Save the Children — Natale Solidale, "Coloriamo il mondo un libro alla volta"
   Pagine di atterraggio del modulo volontari.

   Il vocabolario visivo e' quello del sito savethechildren.it:
     · fascia rossa a tutta larghezza con il titolo della pagina
     · titoli di sezione rossi, maiuscoli, centrati, con la freccia sotto
     · righe orizzontali sottili a delimitare i blocchi di testo
     · lockup della campagna a "sticker": righe su fondo bianco sulla foto
     · cornice rossa a L sull'immagine di apertura
     · banda turchese (#009ca6) per i numeri
     I pannelli sono grigio neutro (#f2f2f1): niente beige, come sul sito.
   Tipografia e palette rossa vengono dal modulo di candidatura, cosi' la
   pagina e l'iframe si leggono come un pezzo unico.
   ───────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Lato:wght@400;700;900&display=swap');

:root{
  --ink:#222221;
  --panel:#f2f2f1;         /* pannelli e fascia del modulo: grigio neutro, come il sito */
  --panel-soft:#f8f8f7;    /* fascia contatti, un tono piu' chiaro */
  --panel-line:#e2e2e0;
  --accent:#da291c;        /* rosso STC */
  --accent-dark:#b51e12;
  --teal:#009ca6;          /* turchese STC */
  --gold:#eba233;          /* occhiello sezione contatti */
  --muted:#6e6e6e;
  --border:#dcdbd9;
  --dark:#474446;          /* piede: grigio scuro del sito STC (richiesta cliente 17/09/2026, prima #3a3a38) */
  --white:#ffffff;
  --r:10px;                /* pannelli e riquadri */
  --r-xs:5px;              /* elementi piccoli: righe del lockup, pallini */
  --rsm:35px;              /* bottoni: su elementi bassi diventa pillola */
  --f-body:'Lato','Helvetica Neue',Arial,sans-serif;
  --f-head:'Oswald','Helvetica Neue',Arial,sans-serif;
  --maxw:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* +1px su tutta la scala (richiesta cliente 17/09/2026, "carattere piu' grande
   dappertutto"): telefono 17, computer ~19, tetto 20. Tutto e' in rem. */
html{font-size:clamp(17px, .25vw + 15.5px, 20px);scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--white);color:var(--ink);font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.container.narrow{max-width:860px}
@media(max-width:560px){.container{padding:0 18px}}

/* ── HEADER ───────────────────────────────────────────────────────────── */
.hdr{background:var(--white);position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--border)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px}
/* Contenitore del marchio Save the Children (il logo Feltrinelli e' stato tolto) */
.brands{display:flex;align-items:center;gap:16px;min-width:0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{height:42px;width:auto}
/* Ripiego se il logo non c'e': logotipo testuale */
.brand-fallback{display:none;font-family:var(--f-body);font-weight:900;font-size:1.125rem;letter-spacing:-.4px;line-height:1.05}
.brand-fallback span{color:var(--accent)}
.no-logo .brand img{display:none}
.no-logo .brand-fallback{display:block}
.hdr-link{font-family:var(--f-head);font-weight:700;font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px;transition:all .2s}
.hdr-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.hdr-link .lbl-short{display:none}
@media(max-width:560px){
  .hdr-in{padding-top:12px;padding-bottom:12px}
  .brand img{height:28px}
  .brands{gap:10px}
  .hdr-link{font-size:.688rem;letter-spacing:1px;text-align:right}
  .hdr-link .lbl-full{display:none}
  .hdr-link .lbl-short{display:inline}
}

/* Nasconde un blocco senza toglierlo dal documento: si riaccende
   togliendo la classe dall'HTML. */
.is-hidden{display:none}

/* ── FASCIA ROSSA CON IL TITOLO DELLA PAGINA ──────────────────────────── */
.titleband{background:var(--accent);padding:22px 0 28px}
.crumb{font-family:var(--f-head);font-weight:500;font-size:.688rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:8px}
.crumb a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.crumb a:hover{border-bottom-color:#fff}
.titleband p{font-family:var(--f-head);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.15;color:#fff}

/* ── APERTURA: foto + pannello con il lockup della campagna ───────────── */
.opener{padding:52px 0 8px}
.opener-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center}
.opener-photo{position:relative;padding:16px 0 0 16px}
/* cornice rossa a L, come sul sito */
.opener-photo::before{content:'';position:absolute;left:0;top:0;width:62%;height:78%;border-top:6px solid var(--accent);border-left:6px solid var(--accent);border-top-left-radius:var(--r)}
.opener-photo img{position:relative;width:100%;max-height:430px;object-fit:cover;object-position:center 32%;border-radius:var(--r)}
.no-hero .opener-photo{display:none}
.no-hero .opener-grid{grid-template-columns:1fr}
.opener-text{position:relative;z-index:2;background:var(--panel);border-radius:var(--r);padding:38px 38px 42px;margin-left:-64px}
.sticker{margin:0 0 22px -96px;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.sticker span{background:var(--white);border-radius:var(--r-xs);padding:7px 16px;font-family:var(--f-head);font-weight:700;font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.15;text-transform:uppercase;color:var(--ink)}
.opener-text p{font-size:.938rem;line-height:1.7;font-weight:400;color:var(--ink)}
.opener-text p + p{margin-top:12px}
.opener-text em{font-style:italic}
.opener-text strong{font-weight:700}
@media(max-width:860px){
  .opener{padding:32px 0 4px}
  .opener-grid{grid-template-columns:1fr}
  .opener-photo{padding:12px 0 0 12px}
  .opener-photo img{max-height:300px}
  .opener-text{margin-left:0;padding:34px 22px 30px}
  .sticker{margin:-46px 0 18px 0}
}

/* ── TITOLI DI SEZIONE (rossi, centrati, con freccia) ─────────────────── */
.sec{padding:52px 0 56px}
.sec-title{font-family:var(--f-head);font-weight:700;font-size:clamp(1.312rem,3vw,1.875rem);line-height:1.2;text-transform:uppercase;color:var(--accent);text-align:center}
.arrow{display:block;text-align:center;color:var(--accent);font-size:1.5rem;line-height:1;margin:8px 0 4px}
.rule{border:0;border-top:1px solid var(--border);margin:20px 0}
.prose{text-align:center;font-size:.938rem;font-weight:400;line-height:1.8;color:var(--ink)}
/* Due colonne di testo: la pagina lavora in orizzontale invece di impilare
   paragrafi centrati su una colonna stretta. */
.duecol{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:24px}
.duecol p{font-size:.938rem;line-height:1.75;color:var(--ink)}
.duecol em{font-style:italic}
.duecol strong{font-weight:700}
.duecol a{font-weight:700}
.chiusura{margin-top:30px}
.prose + .prose{margin-top:14px}
.prose em{font-style:italic}
.prose strong{font-weight:700}
.prose a{font-weight:700}

/* ── PANNELLO TURCHESE CON I NUMERI (dentro la sezione) ───────────────── */
.numbers{background:var(--teal);border-radius:var(--r);padding:32px 30px 34px;margin:34px 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.stat{text-align:center;padding:2px 18px;color:#fff}
.stat + .stat{border-left:1px solid rgba(255,255,255,.28)}
.stat-num{display:block;font-family:var(--f-head);font-weight:700;font-size:clamp(2rem,4vw,2.625rem);line-height:1;color:#fff}
.stat-lbl{display:block;margin-top:10px;font-size:.812rem;line-height:1.55;color:rgba(255,255,255,.94)}
/* Date al posto di un numero: stesso carattere, piu' piccolo per stare nella colonna */
.stat-num--date{font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.2}
/* Elenco delle citta' sotto l'etichetta: piu' piccolo e piu' tenue */
.stat-note{display:block;margin-top:8px;font-size:.75rem;line-height:1.55;color:rgba(255,255,255,.8)}
.nowrap{white-space:nowrap}
@media(max-width:760px){
  .stats{grid-template-columns:1fr;gap:24px}
  .stat + .stat{border-left:0;border-top:1px solid rgba(255,255,255,.28);padding-top:24px}
}


/* ── BOTTONI ──────────────────────────────────────────────────────────── */
.cta-row{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.opener-text .cta-row{justify-content:flex-start;margin-top:24px}
.btn{display:inline-block;padding:13px 30px;border-radius:var(--rsm);font-family:var(--f-head);font-weight:700;font-size:.812rem;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;cursor:pointer;border:none;transition:all .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 8px 20px rgba(218,41,28,.25)}
.btn-ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.hdr .btn{padding:10px 22px;font-size:.75rem}
@media(max-width:560px){.hdr .btn{padding:9px 16px;font-size:.688rem;letter-spacing:1px}}

/* ── SEZIONE A SCHEDE: modulo / iniziativa ────────────────────────────── */
.tabs-sec{background:var(--white);padding:44px 0 56px}
.tabbar{display:flex;justify-content:center;gap:4px;border-bottom:2px solid var(--border);margin-bottom:32px}
.tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;
     padding:12px 24px;font-family:var(--f-head);font-weight:700;font-size:.875rem;letter-spacing:1.5px;
     text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.tabpanel{animation:comparsa .25s ease}
.tabpanel:focus{outline:none}
@keyframes comparsa{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Il titolo dentro il pannello serve solo quando le schede si impilano su
   mobile: sul desktop lo dice gia' la linguetta. */
.panel-title{display:none}
@media(max-width:760px){
  .tabs-sec{padding:32px 0 44px}
  .tabbar{display:none}
  .tabpanel[hidden]{display:block}
  .tabpanel + .tabpanel{margin-top:40px;padding-top:34px;border-top:1px solid var(--border)}
  .panel-title{display:block;margin-bottom:6px}
}

/* ── SEZIONE MODULO ───────────────────────────────────────────────────── */
.form-sec{background:var(--white);padding:44px 0 60px}
.form-sec .prose{max-width:70ch;margin-left:auto;margin-right:auto}
/* Cornice del modulo: l'iframe si auto-dimensiona in altezza, quindi niente
   altezze fisse — solo bordo, fondo bianco e un filo di raggio. */
.form-frame{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;min-height:420px;margin-top:28px}
.form-note{margin-top:16px;text-align:center;font-size:.812rem;color:var(--muted);line-height:1.6}
.form-note a{font-weight:700}

/* ── CONTATTI ─────────────────────────────────────────────────────────── */
.contatti{background:var(--panel-soft);border-top:1px solid var(--border);padding:80px 0 88px;text-align:center}
.eyebrow{font-family:var(--f-head);font-weight:700;font-size:.812rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:12px}
.eyebrow::before{content:'';width:28px;height:2px;background:var(--gold);flex:0 0 auto}
.contatti h2{font-family:var(--f-head);font-weight:700;font-size:clamp(1.875rem,5vw,3rem);line-height:1.05;text-transform:uppercase;letter-spacing:-.5px;color:var(--ink)}
.contatti p{margin:18px auto 0;max-width:56ch;font-size:.938rem;font-weight:400;line-height:1.7;color:var(--ink)}
.mailto{margin-top:32px;display:inline-flex;align-items:center;gap:14px;font-family:var(--f-head);font-weight:700;font-size:clamp(1.062rem,2.6vw,1.5rem);color:var(--ink);text-decoration:none;transition:color .2s}
.mailto:hover{color:var(--accent)}
.mailto svg{width:26px;height:26px;flex:0 0 auto;stroke:var(--ink);transition:stroke .2s}
.mailto:hover svg{stroke:var(--accent)}

/* ── PIEDE ────────────────────────────────────────────────────────────── */
.foot{background:var(--dark);color:#fff;padding:46px 0 34px}
.foot-cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}
@media(max-width:760px){.foot-cols{grid-template-columns:1fr;gap:26px}}
.foot h3{font-family:var(--f-head);font-weight:700;font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin-bottom:12px}
.foot p,.foot li{font-size:.812rem;line-height:1.7;color:#cfcac2}
.foot ul{list-style:none}
.foot a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.foot a:hover{border-bottom-color:#fff}
.foot-bottom{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);text-align:center}
.foot-bottom p{font-size:.75rem;color:#a9a49c}

/* Su mobile le due colonne si impilano. La sezione "L'iniziativa" resta
   intera anche da telefono (decisione del cliente, 25/09/2026): prima numeri
   e secondo blocco di testo venivano nascosti per arrivare prima al modulo. */
@media(max-width:760px){
  .duecol{grid-template-columns:1fr;gap:16px;margin-top:18px}
  .chiusura{margin-top:20px}
}

/* Accessibilita': focus sempre visibile, come nel modulo */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.foot a:focus-visible,.crumb a:focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--accent);color:#fff;padding:10px 18px;border-radius:var(--rsm);font-family:var(--f-head);font-weight:700;font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase}