/* ============================================================
   RED MOVEMENT — foglio di stile principale
   Palette sobria: carta, inchiostro, rosso RED, verde rigenerato
   ============================================================ */

:root{
  --carta:      #f7f5f1;
  --carta-2:    #efece6;
  --inchiostro: #17181a;
  --grigio:     #6b6b68;
  --linea:      #d9d5cd;
  --red:        #b3251f;
  --red-scuro:  #7d1a16;
  --verde:      #4a6b4a;
  --verde-ok:   #3f6b4a;
  --oro:        #b08b3e;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max: 1120px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--inchiostro); text-decoration:none; border-bottom:1px solid var(--linea); transition:border-color .2s, color .2s; }
a:hover{ color:var(--red); border-color:var(--red); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(2.4rem, 6vw, 4rem); }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); }
h3{ font-size:1.25rem; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gutter); }
.stretto{ max-width:720px; }

.occhiello{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red);
  font-weight:600;
  margin:0 0 1rem;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:900;
  background:rgba(247,245,241,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--linea);
}
.header-in{
  max-width:var(--max); margin:0 auto; padding:.85rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.logo{
  font-family:var(--serif); font-size:1.5rem; font-weight:600;
  letter-spacing:.16em; border:0; display:flex; align-items:baseline; gap:.5rem;
}
.logo .punto{ color:var(--red); }
.logo small{ font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grigio); font-weight:500; }

.nav{ display:flex; align-items:center; gap:1.4rem; }
.nav a{
  border:0; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:500; color:var(--grigio);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--inchiostro); }
.nav a[aria-current="page"]{ box-shadow:0 2px 0 var(--red); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--linea); border-radius:2px;
  padding:.4rem .6rem; cursor:pointer; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .nav{
    display:none; position:absolute; inset:100% 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--carta); border-bottom:1px solid var(--linea);
    padding:.5rem var(--gutter) 1.25rem;
  }
  .nav.aperto{ display:flex; }
  .nav a{ padding:.6rem 0; font-size:.95rem; width:100%; border-bottom:1px solid var(--linea); }
}

/* ---------- Bottoni ---------- */
.btn{
  display:inline-block; border:1px solid var(--inchiostro); background:var(--inchiostro); color:var(--carta);
  padding:.8rem 1.6rem; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  cursor:pointer; border-radius:2px; transition:all .2s; font-family:var(--sans);
}
.btn:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.btn-vuoto{ background:transparent; color:var(--inchiostro); }
.btn-vuoto:hover{ background:var(--inchiostro); color:var(--carta); border-color:var(--inchiostro); }
.btn-red{ background:var(--red); border-color:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red-scuro); border-color:var(--red-scuro); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---------- Hero ---------- */
.hero{ padding:clamp(4rem,10vw,8rem) 0 clamp(3rem,7vw,5rem); border-bottom:1px solid var(--linea); }
.hero h1{ max-width:14ch; }
.hero .sommario{ font-size:clamp(1.05rem,2vw,1.3rem); max-width:52ch; color:var(--grigio); font-family:var(--serif); }
.hero-azioni{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

/* ---------- Sezioni ---------- */
section{ padding:clamp(3rem,7vw,5.5rem) 0; }
section + section{ border-top:1px solid var(--linea); }
.sezione-scura{ background:var(--inchiostro); color:var(--carta); }
.sezione-scura h2,.sezione-scura h3{ color:var(--carta); }
.sezione-scura a{ color:var(--carta); border-color:rgba(247,245,241,.3); }
.sezione-scura a:hover{ color:#fff; border-color:var(--red); }

/* ---------- Litania "RED è..." ---------- */
.litania{ list-style:none; margin:0; padding:0; max-width:900px; }
.litania li{
  font-family:var(--serif); font-size:clamp(1.3rem,3vw,2rem); line-height:1.35;
  padding:.45rem 0; border-bottom:1px solid rgba(217,213,205,.5);
}
.litania li:last-child{ border-bottom:0; }
.litania b{ color:var(--red); font-weight:500; }

/* ---------- Filosofia (10 punti) ---------- */
.punti{ counter-reset:p; display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); list-style:none; padding:0; margin:0; }
.punti li{ counter-increment:p; position:relative; padding-left:3.2rem; }
.punti li::before{
  content:counter(p,decimal-leading-zero);
  position:absolute; left:0; top:.05em;
  font-family:var(--serif); font-size:1.5rem; color:var(--red); font-weight:600;
}

/* ---------- Griglie ---------- */
.griglia{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.scheda{
  background:#fff; border:1px solid var(--linea); border-radius:3px;
  padding:1.5rem; transition:border-color .2s, transform .2s;
}
.scheda:hover{ border-color:var(--red); }
.scheda h3{ margin-bottom:.3rem; }
.scheda .meta{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--grigio); }

/* ---------- Elenco membri ---------- */
.membri-lista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linea); }
.membri-lista li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem;
  padding:.9rem .25rem; border-bottom:1px solid var(--linea);
}
.membri-lista .nome{ font-family:var(--serif); font-size:1.2rem; flex:1 1 14rem; }
.membri-lista .disc{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grigio); }
.membri-lista .fond{ font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red); border:1px solid var(--red); padding:.1rem .4rem; border-radius:2px; }

/* ---------- Mappa ---------- */
.mappa-guscio{ position:relative; border:1px solid var(--linea); border-radius:3px; overflow:hidden; background:var(--carta-2); }
#mappa{ height:clamp(420px,64vh,680px); width:100%; z-index:1; background:var(--carta-2); }
.leaflet-container{ font-family:var(--sans); background:var(--carta-2)!important; }

/* Le tessere OpenStreetMap sono molto colorate: le smorzo perché la mappa
   somigli a una carta stampata e i punti rossi risaltino. Il filtro tocca
   solo lo sfondo, non i marcatori (che stanno in un altro livello). */
.leaflet-tile-pane{
  filter:grayscale(88%) contrast(88%) brightness(108%) sepia(12%);
}

.mappa-barra{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between;
  padding:.9rem 1rem; border-bottom:1px solid var(--linea); background:#fff;
}
.filtri{ display:flex; flex-wrap:wrap; gap:.4rem; }
.filtro{
  border:1px solid var(--linea); background:transparent; border-radius:99px;
  padding:.35rem .9rem; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; color:var(--grigio); font-family:var(--sans); transition:all .18s;
}
.filtro:hover{ border-color:var(--inchiostro); color:var(--inchiostro); }
.filtro[aria-pressed="true"]{ background:var(--inchiostro); border-color:var(--inchiostro); color:var(--carta); }

.contatori{ display:flex; gap:2rem; padding:1.1rem 1rem; border-top:1px solid var(--linea); background:#fff; }
.contatore .n{ font-family:var(--serif); font-size:2rem; line-height:1; color:var(--red); }
.contatore .et{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grigio); }

.avviso{
  background:#fff8e6; border:1px solid #e8d9a8; border-left:3px solid var(--oro);
  padding:.9rem 1rem; font-size:.9rem; border-radius:2px; margin-bottom:1.25rem;
}

.marker-red{ background:var(--red); border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.leaflet-popup-content-wrapper{ border-radius:3px; }
.popup-membro strong{ font-family:var(--serif); font-size:1.15rem; font-weight:600; display:block; }
.popup-membro .disc{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grigio); display:block; margin:.2rem 0 .45rem; }

/* ---------- Form ---------- */
.form-sezione{ border-top:1px solid var(--linea); padding-top:2rem; margin-top:2.5rem; }
.form-sezione:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
.form-sezione > h3{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); font-weight:600; margin-bottom:1.25rem;
}
.campo{ margin-bottom:1.25rem; }
.campo label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.35rem; }
.campo .aiuto{ font-size:.78rem; color:var(--grigio); margin:.3rem 0 0; }
.campo input[type=text],.campo input[type=email],.campo input[type=url],.campo select,.campo textarea{
  width:100%; padding:.7rem .85rem; font-size:1rem; font-family:var(--sans);
  border:1px solid var(--linea); border-radius:2px; background:#fff; color:var(--inchiostro);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:2px solid var(--red); outline-offset:-1px; border-color:var(--red); }
.campo textarea{ min-height:130px; resize:vertical; line-height:1.6; }
.due{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

.check{ display:flex; gap:.7rem; align-items:flex-start; padding:.6rem 0; }
.check input{ margin-top:.35rem; width:1.05rem; height:1.05rem; accent-color:var(--red); flex:0 0 auto; }
.check label{ font-size:.92rem; font-weight:400; margin:0; line-height:1.5; }

.impegni{ background:#fff; border:1px solid var(--linea); border-radius:3px; padding:1.25rem 1.4rem; }
.contatore-caratteri{ font-size:.75rem; color:var(--grigio); text-align:right; }
.errore{ color:var(--red); font-size:.82rem; margin-top:.3rem; display:none; }
.campo.non-valido .errore{ display:block; }
.campo.non-valido input,.campo.non-valido textarea,.campo.non-valido select{ border-color:var(--red); }

.esito{ padding:1rem 1.2rem; border-radius:2px; margin-bottom:1.5rem; display:none; }
.esito.ok{ display:block; background:#eaf3ec; border:1px solid #b9d6c1; }
.esito.ko{ display:block; background:#fbeceb; border:1px solid #e6bcb9; }

/* ---------- Quota ---------- */
.quota{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; margin:.5rem 0 1rem; }
.quota .cifra{ font-family:var(--serif); font-size:3.5rem; line-height:1; color:var(--red); }
.quota .val{ font-size:.85rem; color:var(--grigio); }

.passi{ counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:1.25rem; }
.passi li{ counter-increment:s; display:flex; gap:1rem; align-items:flex-start; }
.passi li::before{
  content:counter(s); flex:0 0 2rem; height:2rem; border-radius:50%;
  border:1px solid var(--red); color:var(--red); font-family:var(--serif); font-size:1rem;
  display:grid; place-items:center;
}

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--linea); padding:3rem 0 2rem; font-size:.88rem; color:var(--grigio); }
.footer-in{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.site-footer h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--inchiostro); margin-bottom:.7rem; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:.35rem; }
.site-footer a{ border:0; color:var(--grigio); }
.site-footer a:hover{ color:var(--red); }
.copyright{ margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--linea); font-size:.78rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

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