/* ============================================================================
   Città in Cantiere — tema comune
   Le stesse variabili e gli stessi elementi valgono per la pagina di
   presentazione e per i siti dei cantieri: un'unica famiglia visiva.
   ========================================================================== */

:root {
  /* colori: chiari, caldi, presi dall'intonaco e dalla pietra */
  --sabbia-00: #ffffff;
  --sabbia-05: #faf8f4;
  --sabbia-10: #f3efe8;
  --sabbia-20: #e8e1d6;
  --sabbia-30: #d6ccbc;
  --pietra:    #b9ae9c;
  --ocra:      #c08b3e;
  --ocra-ch:   #e3bd7d;
  --inchiostro:#1d2429;
  --grafite:   #4d5860;
  --fumo:      #7d8890;

  --raggio-s:  10px;
  --raggio:    18px;
  --raggio-g:  28px;

  --ombra-s: 0 1px 2px rgba(29,36,41,.05), 0 4px 14px rgba(29,36,41,.06);
  --ombra-m: 0 10px 40px rgba(29,36,41,.12);

  --font-testo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --titoli: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* tipografia di scena: grande, stretta, sicura di sé */
  --display: clamp(2.6rem, 9vw, 7.5rem);
  --scena:   clamp(1.6rem, 4.2vw, 3.2rem);
}

/* --- sezioni a tutta pagina ------------------------------------------------ */
.scena {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}
.scena-media { position: absolute; inset: 0; z-index: -2; }
.scena-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* velo chiaro: le immagini restano luminose, il testo resta leggibile */
.scena-velo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(250,248,244,.90) 0%, rgba(250,248,244,.72) 45%, rgba(250,248,244,.95) 100%);
}
.scena-velo-scuro::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(29,36,41,.42) 0%, rgba(29,36,41,.20) 45%, rgba(29,36,41,.72) 100%);
}
.scena-chiara { color: var(--inchiostro); }
.scena-scura  { color: #fff; }

.dentro { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.6rem); }

/* --- tipografia ------------------------------------------------------------- */
.display {
  font-family: var(--titoli);
  font-size: var(--display);
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
.scena-titolo {
  font-family: var(--titoli);
  font-size: var(--scena);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.centrato .scena-titolo { max-width: 22ch; margin-inline: auto; text-align: center; }

/* riga con il puntino, come le etichette di sezione */
.punto {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.punto::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ocra); flex: none;
}

/* --- scheda smerigliata ------------------------------------------------------ */
.vetro {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--raggio-g);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--ombra-m);
}
.scena-scura .vetro {
  background: rgba(29,36,41,.42);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.vetro-icona {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sabbia-30); color: var(--ocra);
  margin-bottom: .9rem; background: rgba(255,255,255,.5);
}
.scena-scura .vetro-icona { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.vetro p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--grafite); }
.scena-scura .vetro p { color: rgba(255,255,255,.85); }

/* --- pillole ------------------------------------------------------------------ */
.pillola {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .95rem; font-weight: 600;
  padding: .85rem 1.6rem; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.pillola:hover { transform: translateY(-1px); }
.pillola-piena { background: var(--inchiostro); color: #fff; }
.pillola-piena:hover { background: #000; }
.pillola-vuota { border-color: currentColor; color: inherit; }
.pillola-vuota:hover { background: rgba(29,36,41,.06); }
.scena-scura .pillola-vuota:hover { background: rgba(255,255,255,.14); }

@media (prefers-reduced-motion: reduce) {
  .pillola:hover { transform: none; }
}