/* ============================================================
   SPAZIO AGORÀ — redesign.css  (2026-07-15)
   Ristrutturazione richiesta da Marco:
   - Home a 6 sezioni · Eventi (indice senza numeri, polaroid) · Spazio
   - Hero "respiro": cerchio con immagine + ombre circolari che si muovono
   - HER-023 riusabile (libreria esperienze + 4 spazi) con titolo verticale
   - LAY-035 editoriale · sezioni scure · TUTTO squadrato (cerchi a parte)
   Caricato PER ULTIMO: vince sugli altri layer.
   ============================================================ */

/* Squadratura di sicurezza sui token (i cerchi restano 50%) */
:root { --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0; }

/* ============================================================
   TIPOGRAFIA  (2026-07-20, secondo giro)
   Fraunces + Inter (i font storici del sito) · Pinyon Script su TUTTI
   i corsivi. Oswald è stato provato su tutto e scartato da Marco.

   Il trattamento dello script è copiato dall'artifact di Micaela
   (proposte/hero-organica-5.html, `.titlemix .script`):

       font-family:'Pinyon Script'; font-weight:400; font-style:normal;
       color:var(--terracotta); font-size:1.55em; margin-left:0.2em;

   Le due cose che contano:

   1) **1.55em, non 1.24**. Pinyon ha una x-height molto piccola: alla
      stessa misura in px sembra un terzo più piccolo del testo attorno.
      Al primo giro l'avevo messo a 1.24em e infatti risultava timido.
   2) **font-style:normal ovunque.** Pinyon non ha un corsivo: lasciando
      `italic` il browser inclina a forza uno script già inclinato.
      Fraunces invece un corsivo vero ce l'ha, quindi qualsiasi corsivo
      NON incluso nell'elenco qui sotto resta un corsivo pulito.

   ⚠️ Marco ha scelto lo script su TUTTI i corsivi, anche quelli piccoli
   (didascalie polaroid, timbri). Lì la leggibilità è al limite: se un
   giorno non torna, il colpevole è questo elenco. Per riportare i
   corsivi piccoli a Fraunces italic basta toglierli dai selettori.
   ============================================================ */
:root { --script-em: 1.55; }   /* misura dell'artifact */

.nowrap { white-space: nowrap; }

/* Tutti i corsivi del sito → Pinyon Script.
   L'elenco copre i corsivi dichiarati nei CSS (che non usano <em>) più
   <em>/<i> scritti a mano nell'HTML. */
em, i, cite,
.hero-orb__accent,
.polaroid__stamp,
.polaroid figcaption strong,
.passati-gallery .past-card figcaption strong,
.v2 .bento-tile__cap .bento-tile__quote,
.v2 .mondo-empty,
.v2 .libro-oro__quote,
.v2 .spazio-v2-quote__text em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: calc(1em * var(--script-em));
  line-height: 1.3;
  letter-spacing: 0;
}

/* Casi con corpo dichiarato in rem/clamp: il calc() sopra non li tocca
   (un font-size esplicito vince), quindi la compensazione va scritta a
   mano. Sui pezzi piccoli resto sotto all'1.55 pieno: a quel corpo lo
   script mangerebbe la riga accanto. */
.polaroid__stamp { font-size: 1.12rem; }
.polaroid figcaption strong { font-size: 1.62rem; line-height: 1.15; }
.passati-gallery .past-card figcaption strong { font-size: 1.55rem; line-height: 1.15; }
.v2 .libro-oro__quote { font-size: clamp(1.9rem, 5.2vw, 2.9rem); line-height: 1.32; }
.v2 .bento-tile__cap .bento-tile__quote { font-size: 1.5rem; line-height: 1.22; }
.v2 .mondo-empty { font-size: 1.2rem; }
/* Accento della hero: misura piena dell'artifact + il suo stacco a sinistra */
.hero-orb__accent { font-size: 1.55em; line-height: 0.95; margin-left: 0.2em; }

/* Utility sezione scura (Marco: "posso evidenziare qualche sezione con il colore scuro") */
.section--dark { background: var(--nero); color: var(--crema); }
.section--dark .eyebrow { color: var(--terracotta); }
.section--dark h2, .section--dark h3 { color: var(--crema); }
.section--dark p { color: rgba(248, 243, 239, 0.72); }

/* ============================================================
   HERO "IL CERCHIO DELL'INCONTRO"  (home Sez 1 + hero Lo Spazio)
   Portata dall'artifact vero (proposte/hero-organica-5.html, 17/07):
   la versione precedente era ricostruita a memoria, senza il file.
   Composizione: cerchio-foto grande spostato a destra che esce dal
   bordo · anello salvia sfalsato che deforma · blob organico salvia
   + eco terracotta · anelli che respirano · grana fine sul fondo.
   Tipografia: font del sito (Fraunces + Inter) — scelta di Marco 17/07,
   niente Pinyon Script / Manrope / Archivo dell'artifact.

   --stage = scatola quadrata che contiene tutta la composizione
   (= anello esterno). Tutto il resto è in % di --stage: per riscalare
   la hero intera basta cambiare --stage.
   ============================================================ */
.hero-orb {
  /* 109svh = guardia sugli schermi bassi (portatile 1280x620): senza,
     il cerchio sarebbe più alto della hero e verrebbe tagliato sopra e
     sotto. Ad altezze normali non morde (a 820px non cambia nulla). */
  --stage: min(900px, 74vw, 109svh);
  --disc:  84%;   /* cerchio-foto        */
  --frame: 92%;   /* anello salvia pieno */
  --ring-1: 78%;
  --ring-2: 89%;
  --ring-3: 100%;
  --shift: 27%;   /* quanto la composizione sbanda a destra */

  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem)) clamp(1rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(158deg, var(--crema) 0%, var(--sabbia) 100%);
}

/* Grana fine: toglie il piatto dal fondo e lega foto e blob.
   z-index 1 = sopra i blob, sotto la composizione. */
.hero-orb::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  opacity: 0.24; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}

/* Blob organico salvia: la forma che rompe la griglia rettangolare.
   La keyframe tocca SOLO il border-radius: la traslazione sta qui,
   così le due cose non si pestano i piedi. */
.hero-orb__blob {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(920px, 76vw); aspect-ratio: 1 / 1;
  right: -10%; top: 38%;
  background: radial-gradient(circle at 42% 38%, rgba(163, 174, 138, 0.75), rgba(163, 174, 138, 0.12) 70%);
  border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
  filter: blur(2px);
  transform: translateY(-42%);
  animation: orb-blob 16s ease-in-out infinite;
}
/* Secondo blob, terracotta: eco caldo in basso a destra */
.hero-orb__blob2 {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(420px, 34vw); aspect-ratio: 1 / 1;
  right: 6%; bottom: -8%;
  background: radial-gradient(circle at 55% 45%, rgba(203, 111, 83, 0.20), rgba(203, 111, 83, 0.02) 70%);
  border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
  filter: blur(6px);
  animation: orb-blob 12s ease-in-out infinite reverse;
}
@keyframes orb-blob {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
  25%      { border-radius: 58% 42% 35% 65% / 55% 60% 40% 45%; }
  50%      { border-radius: 50% 50% 38% 62% / 62% 38% 62% 38%; }
  75%      { border-radius: 38% 62% 55% 45% / 40% 55% 45% 60%; }
}

.hero-orb__inner {
  position: relative; z-index: 3;
  width: min(1240px, 100%); margin-inline: auto;
}

/* ── Testo ──
   max-width in % oltre che in px: sotto i ~1150 il testo deve stringersi
   insieme alla hero, se no corre sulla foto e il velo ne sbianca metà. */
.hero-orb__copy { position: relative; z-index: 4; max-width: min(620px, 54%); }
.hero-orb__copy .eyebrow { color: var(--terracotta); }
.hero-orb__copy h1 {
  font-family: var(--font-serif); font-weight: 400; color: var(--nero);
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.01em;
}
/* Velo crema sfumato dietro al testo: il titolo scavalca il cerchio e
   deve restare leggibile anche dove finisce sopra la foto. */
.hero-orb__copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -14% -16% -14% -50%;
  background: linear-gradient(96deg,
    var(--crema) 34%,
    rgba(248, 243, 239, 0.84) 62%,
    rgba(248, 243, 239, 0) 100%);
  filter: blur(14px);
}
/* Accento del titolo: dal 20/07 è Pinyon Script (vedi blocco TIPOGRAFIA in
   testa al file). Niente font-style qui: lo script è già inclinato e una
   seconda inclinazione finta lo sfascerebbe. */
.hero-orb__accent { position: relative; color: var(--terracotta); }
.hero-orb__copy p {
  margin-top: 1.1rem; color: rgba(72, 43, 26, 0.72);
  font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.6; max-width: 44ch;
}
.hero-orb__cta {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.6rem;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem;
  padding: 0.85rem 1.6rem; background: var(--terracotta); color: #fff;
  border: 0; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;
}
.hero-orb__cta:hover { background: var(--mattone); transform: translateY(-2px); }

/* ── Palco: quadrato ancorato a destra, centrato in verticale sul testo.
   right: 50% - metà palco - shift  →  il centro della composizione finisce
   a --shift dal centro dell'inner, e il cerchio esce dal bordo destro. */
.hero-orb__stage {
  position: absolute; z-index: 1;
  top: 50%; right: calc(50% - var(--stage) / 2 - var(--shift));
  transform: translateY(-50%);
  width: var(--stage); aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}

/* Anelli concentrici che respirano, sfasati fra loro */
.hero-orb__ring {
  position: absolute; z-index: 0; border-radius: 50%;
  pointer-events: none; animation: orb-ring 8s ease-in-out infinite;
}
.hero-orb__ring--1 { width: var(--ring-1); aspect-ratio: 1; border: 1px solid  rgba(163, 174, 138, 0.55); animation-delay: 0s; }
.hero-orb__ring--2 { width: var(--ring-2); aspect-ratio: 1; border: 1px solid  rgba(147, 167, 174, 0.40); animation-delay: 0.7s; }
.hero-orb__ring--3 { width: var(--ring-3); aspect-ratio: 1; border: 1px dashed rgba(203, 111, 83, 0.30); animation-delay: 1.4s; }
@keyframes orb-ring {
  0%, 100% { transform: scale(1);     opacity: 0.65; }
  50%      { transform: scale(1.035); opacity: 1; }
}

/* Anello salvia PIENO, sfalsato: spunta da dietro la foto */
.hero-orb__frame {
  position: absolute; z-index: 1; width: var(--frame); aspect-ratio: 1 / 1;
  border-radius: 50%; background: var(--salvia); opacity: 0.92;
  pointer-events: none;
  animation: orb-blob 14s ease-in-out infinite reverse;
}

/* Cerchio-foto: il fulcro della composizione */
.hero-orb__disc {
  position: relative; z-index: 2; width: var(--disc); aspect-ratio: 1 / 1;
  border-radius: 50%; overflow: hidden;
  background: var(--sabbia) center/cover no-repeat;
  box-shadow: 0 60px 120px -34px rgba(72, 43, 26, 0.40);
  animation: orb-float 9s ease-in-out infinite;
}
@keyframes orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Sette foto in dissolvenza continua: 4s ciascuna, ciclo 28s.
   Per aggiungere una foto: +4s al ciclo, un nth-child in più e
   ricalcolare le percentuali dei keyframes (4s / ciclo). */
.hero-orb__photo {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  animation: orb-photo 28s ease-in-out infinite;
}
.hero-orb__photo:nth-child(1) { animation-delay: 0s; }
.hero-orb__photo:nth-child(2) { animation-delay: 4s; }
.hero-orb__photo:nth-child(3) { animation-delay: 8s; }
.hero-orb__photo:nth-child(4) { animation-delay: 12s; }
.hero-orb__photo:nth-child(5) { animation-delay: 16s; }
.hero-orb__photo:nth-child(6) { animation-delay: 20s; }
.hero-orb__photo:nth-child(7) { animation-delay: 24s; }
@keyframes orb-photo {
  0%    { opacity: 0; }
  1.7%  { opacity: 1; }
  12.9% { opacity: 1; }
  15.9% { opacity: 0; }
  100%  { opacity: 0; }
}

/* Invito "Scopri gli ambienti": tondo appoggiato dentro la foto, in basso
   a destra. Ancorato al cerchio e non al flusso: da telefono così non si
   stacca e non resta orfano sotto ai bottoni. */
.hero-orb__pill {
  position: absolute; z-index: 4;
  left: 76%; top: 79%; transform: translate(-50%, -50%);
  width: clamp(92px, 8.6vw, 120px); aspect-ratio: 1 / 1;
  border-radius: 50%; padding: 0.6rem;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--nero); color: var(--crema);
  font: 700 0.66rem/1.3 var(--font-sans);
  letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 20px 40px -14px rgba(72, 43, 26, 0.5);
  transition: transform 0.25s var(--ease-out), background 0.2s ease;
}
.hero-orb__pill:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--mattone); color: #fff; }

/* prefers-reduced-motion serve a fermare il MOVIMENTO che dà fastidio
   (spostamenti, zoom, parallasse), non ogni segno di vita. Prima qui
   spegnevo tutto: su chi ha "riduci animazioni" attivo in Windows la hero
   risultava completamente morta, mentre l'artifact di Micaela (che la
   preferenza non la guarda proprio) si animava. Da qui il "non è animata".

   Restano accesi i 3 livelli dell'artifact, perché nessuno SPOSTA nulla:
   il morph delle forme (solo border-radius), il respiro degli anelli
   (3.5% su una linea da 1px = ~2px al secondo) e la dissolvenza delle foto
   (sola opacità). Si ferma solo il galleggio del cerchio: è l'unica vera
   traslazione (un elemento da 750px che si muove) ed è anche l'unica cosa
   che l'artifact non aveva — l'avevo aggiunta io. Quindi sotto reduced
   motion la hero è esattamente quella approvata. */
@media (prefers-reduced-motion: reduce) {
  .hero-orb__disc { animation: none; }
}

/* ============================================================
   HOME Sez 2 — AZIENDE / PRIVATI  ·  due opzioni a confronto
   Il problema della versione precedente: immagine al 55% ma testo a
   larghezza piena -> niente allineato e CTA a quote diverse.
   Entrambe le opzioni tengono immagine QUADRATA, card di pari altezza
   e CTA allineate sulla stessa linea.
   ============================================================ */
.audience-v3__label {
  display: block; width: fit-content; margin: 0 auto 1.5rem;
  padding: 0.42rem 0.85rem; border: 1px solid rgba(72, 43, 26, 0.28);
  color: rgba(72, 43, 26, 0.7); font: 600 0.68rem var(--font-sans);
  letter-spacing: 0.1em; text-transform: uppercase;
}

.aud-grid { max-width: 1080px; margin: 0 auto; display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); align-items: stretch; }
.aud-grid--two { grid-template-columns: 1fr 1fr; }
.aud-grid--one { grid-template-columns: 1fr; }

.aud-card {
  position: relative; border: 0; padding: 0; margin: 0; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column;
}
.aud-card__media {
  position: relative; overflow: hidden; isolation: isolate; display: block;
  background: var(--sabbia); aspect-ratio: 1 / 1; width: 100%;
}
.aud-card__media::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  /* --img-pos: sposta il punto di taglio del quadrato (es. per non perdere la relatrice) */
  background: var(--img) var(--img-pos, center) / cover no-repeat;
  transition: transform 0.7s ease;
}
.aud-card__media::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.aud-card--aziende .aud-card__media::after { background: linear-gradient(165deg, rgba(203, 111, 83, 0.20) 0%, rgba(72, 43, 26, 0.30) 45%, rgba(72, 43, 26, 0.90) 100%); }
.aud-card--privati .aud-card__media::after { background: linear-gradient(165deg, rgba(163, 174, 138, 0.26) 0%, rgba(72, 43, 26, 0.32) 45%, rgba(72, 43, 26, 0.90) 100%); }
.aud-card:hover .aud-card__media::before { transform: scale(1.05); }

.aud-card__icon {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  font-size: 1.02rem; line-height: 1; background: rgba(72, 43, 26, 0.42);
  border: 1px solid rgba(248, 243, 239, 0.34); backdrop-filter: blur(6px);
}
.aud-card__badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  font: 700 0.62rem var(--font-sans); color: var(--nero);
  background: rgba(248, 243, 239, 0.94); padding: 0.3rem 0.55rem;
}
.aud-card__kicker { font: 700 0.68rem var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.aud-card__title { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; }
.aud-card__body { display: flex; flex-direction: column; flex: 1; }
.aud-card__text { color: rgba(72, 43, 26, 0.72); font-size: 0.94rem; line-height: 1.6; }
.aud-card__cta { margin-top: auto; padding-top: 0.8rem; font-weight: 600; font-size: 0.9rem; color: var(--mattone); }
.aud-card--privati .aud-card__cta { color: var(--salvia-deep); }

/* ── Riga larga: quadrato a sinistra, testo a destra (opzione scelta da Marco) ── */
.aud-card--row {
  display: grid; grid-template-columns: clamp(170px, 24%, 240px) 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center;
  background: #fff; padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(72, 43, 26, 0.14);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.aud-card--row:hover { border-color: rgba(72, 43, 26, 0.3); box-shadow: 0 18px 40px -26px rgba(72, 43, 26, 0.5); }
.aud-card--row .aud-card__body { justify-content: center; gap: 0.3rem; }
.aud-card--row .aud-card__kicker { color: var(--terracotta); }
.aud-card--row.aud-card--privati .aud-card__kicker { color: var(--salvia-deep); }
.aud-card--row .aud-card__title { color: var(--nero); font-size: clamp(1.3rem, 2.1vw, 1.7rem); margin-bottom: 0.25rem; }
.aud-card--row .aud-card__cta { margin-top: 0.7rem; padding-top: 0; }

/* ============================================================
   HOME Sez 3 — Prossimi eventi POLAROID + CTA "Scopri di più"
   (riusa .polaroid-river, già scuro)
   ============================================================ */
.polaroid-river__cta { display: flex; justify-content: center; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.polaroid-river__cta a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.88rem;
  padding: 0.8rem 1.6rem; border: 1.5px solid var(--terracotta); color: var(--crema);
  background: transparent; transition: background 0.2s ease, color 0.2s ease;
}
.polaroid-river__cta a:hover { background: var(--terracotta); color: #fff; }
.home-v3 .polaroid-river__track { justify-content: flex-start; }

/* ── Polaroid "Siamo in vacanza" (20/07) ─────────────────────
   Prima card della fila. Deve leggersi come una polaroid della serie
   (stessa cornice bianca, stessa inclinazione) ma dire subito che NON è
   un evento: niente foto, un'illustrazione piatta su fondo sabbia, e il
   timbro in salvia invece che in terracotta. */
.polaroid--vacanza { cursor: default; }
.polaroid--vacanza:hover { transform: rotate(-1.4deg); box-shadow: 0 18px 34px -18px rgba(60, 40, 30, 0.45); }
.pinned:nth-child(even) .polaroid--vacanza:hover { transform: rotate(1.4deg); }
.polaroid-vacanza__media {
  display: grid; place-items: center;
  background: linear-gradient(168deg, var(--sabbia) 0%, #efe4d8 100%);
}
.polaroid-vacanza__art { width: 74%; height: auto; }
.polaroid__stamp--vacanza { background: rgba(163, 174, 138, 0.94); z-index: 1; }
.polaroid-vacanza__note {
  margin-top: 0.9rem; font-size: 0.78rem; line-height: 1.5;
  color: rgba(72, 43, 26, 0.62);
}
/* Sul fondo scuro delle due fasce eventi la nota va schiarita */
.polaroid-river .polaroid-vacanza__note,
.events-polaroids .polaroid-vacanza__note { color: rgba(248, 243, 239, 0.66); }

/* ============================================================
   HER-023 RIUSABILE — accordion immagini con TITOLO VERTICALE
   (home Sez 4 libreria esperienze + home Sez 6 spazi)
   ============================================================ */
.her-accordion {
  display: flex; align-items: stretch; width: 100%;
  height: clamp(380px, 54vh, 500px); overflow: hidden;
  background: var(--nero);
}
.her-accordion__panel {
  position: relative; flex: 1 1 0%; min-width: 58px; overflow: hidden; isolation: isolate;
  cursor: pointer; background-position: center; background-size: cover; background-color: var(--nero);
  border-right: 1px solid rgba(248, 243, 239, 0.14);
  transition: flex 0.7s var(--ease-out), filter 0.7s ease;
  opacity: 0; transform: translateX(-42px);
  animation: her-in 0.7s var(--ease-out) forwards;
  animation-delay: calc(var(--panel-index, 0) * 120ms);
}
.her-accordion__panel:last-child { border-right: 0; }
.her-accordion__panel.is-active { flex: 6 1 0%; cursor: default; }
.her-accordion__panel:not(.is-active) { filter: saturate(0.92) brightness(0.9); }
.her-accordion__activate { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; }
/* Da attivo il bottone non serve più (il pannello è già aperto), ma restando
   sopra a .her-accordion__content (z-index:2) intercettava i click destinati
   a .her-accordion__link: il bottone "Vai agli eventi"/"Scopri la zona" non
   portava da nessuna parte. pointer-events:none lo toglie di mezzo. */
.her-accordion__panel.is-active .her-accordion__activate { cursor: default; pointer-events: none; }
.her-accordion__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 12, 8, 0.12) 30%, rgba(20, 12, 8, 0.9) 100%);
  transition: background 0.7s ease;
}
.her-accordion__panel:not(.is-active) .her-accordion__shade { background: linear-gradient(180deg, rgba(20, 12, 8, 0.42), rgba(20, 12, 8, 0.88)); }

/* Titolo verticale leggibile quando il pannello è compresso */
.her-accordion__spine {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: #fff; font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(0.98rem, 1.3vw, 1.25rem); letter-spacing: 0.02em; white-space: nowrap;
  text-shadow: 0 1px 10px rgba(20, 12, 8, 0.7); transition: opacity 0.4s ease; pointer-events: none;
}
.her-accordion__panel.is-active .her-accordion__spine { opacity: 0; }

/* Contenuto rivelato sul pannello attivo (scivola da destra come HER-023) */
.her-accordion__content {
  position: absolute; z-index: 2; left: clamp(16px, 2vw, 26px); right: clamp(16px, 2vw, 26px); bottom: clamp(18px, 2.5vw, 28px);
  max-width: 540px; color: #fff; pointer-events: none;
  opacity: 0; transform: translateX(24px); transition: opacity 0.7s ease, transform 0.7s ease;
}
.her-accordion__panel.is-active .her-accordion__content { opacity: 1; transform: none; pointer-events: auto; }
.her-accordion__eyebrow { display: block; font: 700 0.68rem var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.4rem; }
.her-accordion__content h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.05; color: #fff; margin-bottom: 0.4rem; }
.her-accordion__content p { color: rgba(248, 243, 239, 0.82); font-size: 0.9rem; line-height: 1.5; max-width: 46ch; }
.her-accordion__link { display: inline-block; margin-top: 0.9rem; color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 0.82rem; border-bottom: 2px solid var(--terracotta); padding-bottom: 2px; }
.her-accordion__link:hover { color: var(--terracotta); }
@keyframes her-in { to { opacity: 1; transform: none; } }

/* Sezione libreria esperienze (Sez 4) */
.experience-lib { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); background: var(--crema); }
.experience-lib__head { max-width: 760px; margin: 0 auto 2rem; text-align: center; }
.experience-lib .her-accordion { max-width: 1200px; margin: 0 auto; }

/* ============================================================
   HOME Sez 5 — RACCONTO ESPERIENZE (LAY-035 editoriale)
   ============================================================ */
.exp-editorial { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); background: var(--sabbia); }
.exp-editorial__head { max-width: 760px; margin: 0 auto clamp(1.6rem, 4vw, 2.6rem); text-align: center; }
.exp-editorial__list { max-width: 940px; margin: 0 auto; }
.exp-editorial__item {
  display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) 0; border-top: 1px solid rgba(72, 43, 26, 0.18); align-items: start;
}
.exp-editorial__item:last-child { border-bottom: 1px solid rgba(72, 43, 26, 0.18); }
.exp-editorial__label { font: 700 0.72rem var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta); padding-top: 0.35rem; }
.exp-editorial__body h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2.05rem); color: var(--nero); margin-bottom: 0.4rem; line-height: 1.05; }
.exp-editorial__body p { color: rgba(72, 43, 26, 0.7); max-width: 62ch; line-height: 1.6; }

/* Variante compatta (20/07): senza la lista sotto, la sezione deve solo
   dare respiro fra i due accordion — non occupare una schermata. */
.exp-editorial--compact { padding-block: clamp(1.8rem, 4vw, 2.8rem); }
.exp-editorial--compact .exp-editorial__head { margin-bottom: 0; }
.exp-editorial--compact .exp-editorial__head h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); }
.exp-editorial--compact .exp-editorial__head p { margin-top: 0.6rem; max-width: 58ch; margin-inline: auto; }

/* ============================================================
   HOME Sez 6 — VIDEO (sx) + 4 SPAZI (dx, HER-023)
   ============================================================ */
.spaces-split { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.spaces-split__head { max-width: 760px; margin: 0 auto 2rem; padding: 0 24px; text-align: center; }
.spaces-split__grid {
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.6rem); align-items: stretch;
}
.spaces-split__grid .showcase-video { min-height: clamp(380px, 54vh, 500px); height: 100%; }
.spaces-split__grid .her-accordion { height: 100%; min-height: clamp(380px, 54vh, 500px); }

/* ============================================================
   LO SPAZIO — 4 ambienti QUADRATI + "Cosa trovi" (layout editoriale)
   ============================================================ */
.spazio-v2 .zona__media { aspect-ratio: 1 / 1; min-height: 0; }
@media (min-width: 861px) {
  .spazio-v2 .zona__top { align-items: stretch; }
  .spazio-v2 .zona__media { align-self: center; }
}

/* ── "Zona per zona": griglia di 6 + fascia in linea (20/07, 2° giro) ──
   Clicchi un quadrato e dentro la griglia, sotto la riga di quel
   quadrato, si apre una fascia a tutta larghezza con descrizione e usi.
   Un clic, una sezione sola, nessuna finestra sopra la pagina.
   `.zone__list` è la sorgente dei dati e sta in pagina nascosta. */
.zone__list[hidden] { display: none; }

.zone__grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 2vw, 1.1rem);
}
.zone-tile {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 1 / 1; width: 100%; padding: 0; border: 0;
  display: flex; align-items: flex-end; text-align: left; cursor: pointer;
  background: var(--sabbia) center/cover no-repeat;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}
.zone-tile__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(72, 43, 26, 0.05) 35%, rgba(72, 43, 26, 0.86) 100%);
  transition: background 0.35s ease;
}
.zone-tile:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(72, 43, 26, 0.6); }
.zone-tile:hover .zone-tile__shade { background: linear-gradient(180deg, rgba(203, 111, 83, 0.16) 25%, rgba(72, 43, 26, 0.9) 100%); }
.zone-tile:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.zone-tile__body { display: grid; gap: 0.2rem; padding: clamp(0.8rem, 2.4vw, 1.1rem); color: #fff; }
.zone-tile__tag {
  font: 700 0.62rem var(--font-sans); letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(248, 243, 239, 0.78);
}
.zone-tile__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.02rem, 2.4vw, 1.35rem); line-height: 1.15; color: #fff;
}
/* L'invito compare al passaggio: sulla tessera chiusa ruberebbe spazio al
   nome, ma senza di lui non si capisce che il quadrato è cliccabile. */
.zone-tile__more {
  font: 600 0.72rem var(--font-sans); color: var(--crema);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.zone-tile:hover .zone-tile__more,
.zone-tile:focus-visible .zone-tile__more,
.zone-tile.is-open .zone-tile__more { max-height: 2rem; opacity: 1; margin-top: 0.15rem; }

/* Tessera aperta: bordo terracotta, così si vede a chi appartiene la
   fascia che si è aperta sotto */
.zone-tile.is-open { outline: 3px solid var(--terracotta); outline-offset: -3px; }
.zone-tile.is-open .zone-tile__shade { background: linear-gradient(180deg, rgba(203, 111, 83, 0.2) 20%, rgba(72, 43, 26, 0.92) 100%); }

/* ── La fascia ──
   Occupa tutte le colonne della griglia, si apre animando max-height
   (stesso meccanismo degli accordion già in uso nel sito). */
.zone-band {
  grid-column: 1 / -1;
  max-height: 0; overflow: hidden;
  transition: max-height 0.45s var(--ease-out);
  background: var(--sabbia);
}
.zone-band__inner { position: relative; padding: clamp(1.2rem, 3vw, 2rem); }
.zone-band__close {
  position: absolute; top: clamp(0.6rem, 2vw, 1rem); right: clamp(0.6rem, 2vw, 1rem);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; cursor: pointer; font-size: 1.1rem; line-height: 1;
  background: rgba(72, 43, 26, 0.08); color: var(--nero);
  transition: background 0.2s ease;
}
.zone-band__close:hover { background: rgba(72, 43, 26, 0.18); }
/* `.v2` serve davvero: `.v2 .zona__tag` è `position:absolute` (nasce come
   etichetta appoggiata sulla foto della zona) e senza pari specificità
   vince lui, finendo sopra al titolo della fascia. */
.v2 .zone-band__tag {
  position: static; display: inline-block; margin-bottom: 0.6rem;
}
.zone-band__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.1;
  color: var(--nero); margin-bottom: 0.4rem; padding-right: 2.5rem;
}
.zone-band__desc {
  color: rgba(72, 43, 26, 0.72); line-height: 1.6;
  max-width: 68ch; margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.zone-band__uses {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(0.8rem, 2vw, 1.2rem);
}
.zone-band__uses .uso {
  display: grid; grid-template-columns: 140px 1fr; gap: 1rem;
  align-items: start; background: var(--crema); padding: 0.9rem;
}
/* `position:relative` + `overflow:hidden` non sono decorativi: le slide
   della dissolvenza sono in `position:absolute; inset:0` e senza un
   contenitore posizionato si ancorerebbero alla pagina. */
.zone-band__uses .uso__img {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 16 / 9;
  background: var(--sabbia) center/cover no-repeat;
}
.zone-band__uses .uso__txt h4 {
  font-family: var(--font-serif); font-weight: 500; font-size: 1.02rem;
  color: var(--nero); margin-bottom: 0.2rem;
}
.zone-band__uses .uso__txt p { font-size: 0.86rem; line-height: 1.5; color: rgba(72, 43, 26, 0.7); }

/* Usi senza fotografia: un'icona piccola al posto del riquadro-foto.
   Nessuno lo usa più (dal 20/07 tutte e 6 le zone hanno le foto), ma
   resta perché è la via d'uscita quando si aggiunge una zona di cui non
   si ha ancora l'immagine: meglio un'icona dichiarata che una foto presa
   a caso. Basta `class="uso uso--icon"` con `.uso__icon` al posto di
   `.uso__img`. */
.zone-band__uses .uso--icon,
.v2 .zona__usi .uso--icon { grid-template-columns: 44px 1fr; align-items: center; }
.uso--icon .uso__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--sabbia); font-size: 1.15rem; line-height: 1;
  filter: saturate(0.35);   /* le emoji a colori pieni stonano con la palette */
}

/* "Cosa trovi" → griglia editoriale squadrata con indici (scelta dalla library) */
.spazio-v2-services__grid {
  border-top: 1px solid rgba(72, 43, 26, 0.16);
  border-left: 1px solid rgba(72, 43, 26, 0.16);
}
.spazio-v2 .spazio-v2-service {
  position: relative; align-items: flex-start; gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-right: 1px solid rgba(72, 43, 26, 0.16);
  border-bottom: 1px solid rgba(72, 43, 26, 0.16);
  background: var(--crema); transition: background 0.25s ease;
}
.spazio-v2 .spazio-v2-service:hover { background: #fff; }
.spazio-v2 .spazio-v2-service__icon {
  display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px;
  background: var(--sabbia); font-size: 1.25rem; border-radius: 0;
}
.spazio-v2 .spazio-v2-service__text h4 { font-family: var(--font-serif); font-weight: 500; font-size: 1.08rem; color: var(--nero); margin-bottom: 0.25rem; }

/* ============================================================
   HERO DI PAGINA — un solo componente per Eventi e Blog (20/07)
   Erano due hero diverse: blog = foto piena + testo centrato in basso,
   eventi = foto + testo in basso a sinistra e misure sue. Ora la pagina
   Eventi usa lo stesso .proof-hero del Blog e cambia solo la fotografia,
   così restano allineate da sole a ogni modifica futura.
   (Home e Lo Spazio tengono la hero organica: esclusione voluta.)
   ============================================================ */
/* Dal 2026-08-28 la foto di ogni hero si dichiara nella pagina, con
   --hero-img (vedi il blocco in fondo a questo file). Qui resta solo il
   valore di ripiego per la pagina Eventi.
   Nota storica: la vecchia foto di questa hero era lo screenshot di un
   post Instagram (frecce del carosello e barra dell'iPhone dentro al
   file). Non è più in public\images, sta nel backup del 28/08. */
.v2 .proof-hero--eventi .proof-hero__media {
  background:
    linear-gradient(to top, rgba(72, 43, 26, 0.75), rgba(72, 43, 26, 0.18)),
    url('../images/uso-sopra-talk.jpg') center/cover;
}

/* ============================================================
   PAGINA EVENTI — indice categorie: solo CERCHIO + PUNTO (niente numeri)
   ============================================================ */
.v2 .mondo-item__mark { width: var(--category-index-size); }   /* ellisse -> cerchio pieno */
.v2 .mondo-item__digit { display: none; }                      /* via i numeri 01, 02… */

/* Pagina Eventi Sez 3: polaroid orizzontali su fondo scuro */
.eventi-v3 .events-polaroids { background: var(--nero); color: var(--crema); padding: clamp(3rem, 7vw, 5rem) 0; overflow: hidden; }
.eventi-v3 .events-polaroids__head { max-width: 760px; margin: 0 auto 1.6rem; padding: 0 24px; text-align: center; }
.eventi-v3 .events-polaroids__head h2 { color: var(--crema); }
.eventi-v3 .events-polaroids__head .eyebrow { color: var(--terracotta); }
.eventi-v3 .events-polaroids__head p { color: rgba(248, 243, 239, 0.72); }
.eventi-v3 .events-polaroids .polaroid-river__track { padding-bottom: 0.75rem; }

/* Pulsante "Prenota" LEGGIBILE sul fondo scuro (era mattone su cioccolato = invisibile) */
.polaroid-river .polaroid__book,
.events-polaroids .polaroid__book {
  background: var(--terracotta); color: #fff; border-color: var(--terracotta);
}
.polaroid-river .polaroid__book:hover,
.events-polaroids .polaroid__book:hover {
  background: var(--mattone); border-color: var(--mattone); color: #fff;
}

/* ============================================================
   SCHEDE "DESCRIZIONE / PRENOTAZIONE"  (20/07)
   Stesso componente nel modal evento e in quello aziende/privati.
   Il riferimento portato da Marco era un controllo a pillola con gli
   angoli tondi: qui è squadrato perché il sito lo è tutto dal 15/07
   (121 border-radius azzerati). Cambia la forma, non il funzionamento.
   ============================================================ */
.form-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; margin-bottom: clamp(1rem, 2.5vw, 1.4rem);
  background: var(--sabbia);
}
.form-tabs__btn {
  padding: 0.72rem 0.6rem; border: 0; cursor: pointer;
  font: 600 0.88rem var(--font-sans); letter-spacing: 0.02em;
  background: transparent; color: rgba(72, 43, 26, 0.62);
  transition: background 0.2s ease, color 0.2s ease;
}
.form-tabs__btn:hover { color: var(--nero); }
.form-tabs__btn.is-active { background: var(--nero); color: var(--crema); }

.form-pane[hidden] { display: none; }
.form-pane__next { width: 100%; justify-content: center; margin-top: clamp(1rem, 2.5vw, 1.4rem); }

/* Scheda informativa: coppie etichetta/valore, una riga per riga.
   <dl> e non una tabella: sono definizioni, non dati tabellari. */
.event-facts, .lead-info__list { margin-top: 1.1rem; border-top: 1px solid rgba(72, 43, 26, 0.14); }
.event-facts__row, .lead-info__row {
  display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: 0.6rem 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid rgba(72, 43, 26, 0.14);
}
.event-facts dt, .lead-info__row dt {
  font: 700 0.68rem var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--terracotta); padding-top: 0.15rem;
}
.event-facts dd, .lead-info__row dd {
  margin: 0; font-size: 0.9rem; line-height: 1.5; color: rgba(72, 43, 26, 0.78);
}
.lead-info__intro { font-size: 0.94rem; line-height: 1.65; color: rgba(72, 43, 26, 0.74); }

/* ── Form aziende/privati: campi affiancati e note esplicative ──
   Le due note non sono decorazione: rispondono alle domande che Micaela
   si sente fare ogni volta ("pago di più se siamo in tanti?" e "l'ora di
   fine è quando saluto gli ospiti?"). Stanno sotto al campo a cui si
   riferiscono, non in fondo al form dove nessuno le legge. */
.lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.lead-form__hint {
  margin: -0.2rem 0 0.2rem; font-size: 0.78rem; line-height: 1.5;
  color: rgba(72, 43, 26, 0.64);
  border-left: 2px solid var(--salvia); padding-left: 0.65rem;
}
.lead-form__hint strong { color: var(--nero); font-weight: 600; }
/* Nei campi data/ora Safari e Chrome mettono un padding interno diverso
   dagli input di testo: uniformato, se no la riga si scalina. */
.lead-form input[type="date"], .lead-form input[type="time"], .lead-form input[type="number"] {
  min-height: 44px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  /* Da telefono la composizione si impila: foto sopra, testo sotto.
     Il palco esce dal posizionamento assoluto e torna nel flusso, e
     --stage diventa quasi tutta la larghezza utile: il cerchio-foto
     passa da 219 px a ~315 px su un viewport da 390 (Marco 17/07:
     "vorrei l'immagine più grande da telefono").
     Margini stretti apposta: sono i px che finiscono nella foto. */
  .hero-orb {
    --stage: min(100%, 430px);
    --disc: 88%; --frame: 96%;
    --ring-1: 82%; --ring-2: 94%; --ring-3: 106%;
    min-height: auto; display: block;
    padding-inline: clamp(0.9rem, 4vw, 1.25rem);
  }
  .hero-orb__inner {
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(1.75rem, 6vw, 2.5rem); text-align: center;
  }
  /* Il palco torna nel flusso: niente right/top assoluti da ricalcolare.
     order:-1 = la foto va SOPRA al testo, com'è nell'artifact. */
  .hero-orb__stage {
    position: relative; z-index: 1; order: -1;
    top: auto; right: auto; transform: none;
    width: var(--stage); margin-inline: auto;
  }
  .hero-orb__copy { max-width: none; margin: 0 auto; }
  .hero-orb__copy p { margin-left: auto; margin-right: auto; }
  /* Testo e foto non si sovrappongono più: il velo non serve */
  .hero-orb__copy::before { display: none; }
  /* Il tondo rientra e si stringe: a 94px copriva mezza foto */
  .hero-orb__pill { left: 73%; top: 76%; width: clamp(72px, 20vw, 88px); font-size: 0.56rem; padding: 0.45rem; }

  .spaces-split__grid { grid-template-columns: 1fr; }
  .spaces-split__grid .showcase-video,
  .spaces-split__grid .her-accordion { min-height: 320px; }

  .her-accordion { height: clamp(340px, 60vh, 440px); }
  .her-accordion__panel { min-width: 42px; }
  .her-accordion__panel.is-active { flex: 8 1 0%; }
  .her-accordion__content p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  .exp-editorial__item { grid-template-columns: 1fr; gap: 0.5rem; }
  .exp-editorial__label { padding-top: 0; }

  /* Aziende/Privati: A in colonna singola, B con quadrato sopra il testo */
  .aud-grid--two { grid-template-columns: 1fr; }
  .aud-card--row { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
  /* .aud-card--row .aud-card__media: il tetto di 300px lasciava la foto
     incollata a sinistra. Rifatta a larghezza piena in fondo al file
     (CORREZIONI 2026-09-01, secondo giro). */

  .spazio-v2-services__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Sei quadrati su tre colonne diventano francobolli: da qui in giù
     si passa a due colonne × tre righe. Il JS legge le colonne dal CSS
     calcolato, quindi la fascia si infila da sola nella riga giusta. */
  .zone__grid { grid-template-columns: 1fr 1fr; }
  /* Usi in colonna singola: due card affiancate su 390px non ci stanno */
  .zone-band__uses { grid-template-columns: 1fr; }
  .zone-band__uses .uso { grid-template-columns: 110px 1fr; gap: 0.8rem; }
}

@media (max-width: 560px) {
  /* Sotto ai 560 due campi ora affiancati diventano illeggibili e la
     colonna delle etichette nelle schede informative si strozza. */
  .lead-form__row { grid-template-columns: 1fr; }
  .event-facts__row, .lead-info__row { grid-template-columns: 1fr; gap: 0.2rem; }
  .event-facts dt, .lead-info__row dt { padding-top: 0; }
}

/* ════════════════════════════════════════════════════════════
   AGGIUNTE 2026-08-28 — contenuti del template v2 di Micaela.
   Tutto quello che c'è qui sotto estende componenti già in uso:
   nessuno di questi blocchi introduce un linguaggio visivo nuovo.
   ════════════════════════════════════════════════════════════ */

/* ── Menù: voce con tendina ──────────────────────────────────
   Le voci del sito sono sette e in linea si strozzavano. Salotto e
   Agorà delle Idee stanno sotto "Eventi", che è la loro famiglia.
   Su mobile la tendina non serve: il drawer le mostra rientrate. */
.nav-group { position: relative; display: inline-flex; }
.nav-link--group {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; padding: 0;
}
.nav-group__chev { font-size: 0.7em; line-height: 1; transition: transform 0.25s var(--ease-out); }
.nav-group[data-open] .nav-group__chev { transform: rotate(180deg); }
.nav-group__menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 210px; padding: 0.5rem 0; z-index: 60;
  background: var(--crema); border: 1px solid rgba(72, 43, 26, 0.14);
  box-shadow: 0 24px 48px -28px rgba(72, 43, 26, 0.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s var(--ease-out), visibility 0.22s;
}
.nav-group[data-open] .nav-group__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-group__menu a {
  display: block; padding: 0.6rem 1.1rem;
  font: 500 0.86rem var(--font-sans); color: var(--nero); white-space: nowrap;
}
.nav-group__menu a:hover { background: var(--sabbia); color: var(--terracotta); }
/* Il pannello scavalca il bordo della barra: senza questo la tendina
   viene tagliata dall'overflow della navbar. */
.navbar__inner { overflow: visible; }
.mobile-link--sub { padding-left: 1.6rem; opacity: 0.78; font-size: 0.92em; }
.mobile-link--sub::before { content: "\21B3"; margin-right: 0.5rem; color: var(--terracotta); }

/* ── Hero fotografica: la foto si dichiara nella pagina ──────
   Prima ogni variante voleva una regola CSS sua. Ora la pagina passa
   --hero-img e il componente resta uno solo. */
.v2 .proof-hero__media {
  background:
    linear-gradient(to top, rgba(72, 43, 26, 0.75), rgba(72, 43, 26, 0.18)),
    var(--hero-img, url("../images/blog-hero.jpg")) center/cover;
}
.v2 .proof-hero--eventi .proof-hero__media {
  background:
    linear-gradient(to top, rgba(72, 43, 26, 0.75), rgba(72, 43, 26, 0.18)),
    var(--hero-img, url("../images/uso-rialzato-talk.jpg")) center/cover;
}

/* ── Home: sei ambienti invece di quattro ────────────────────
   Con sei pannelli nella metà destra il testo di quello aperto restava
   in una colonna di 300px. L'accordion prende più larghezza del video. */
.spaces-split__grid--six { grid-template-columns: 0.82fr 1.18fr; }
.her-accordion__links { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.her-accordion__links .her-accordion__link { margin-top: 0.7rem; }

/* ── Hero home: le due righe sotto al titolo ─────────────────
   Il template chiede che la prima stia su una riga sola e che la firma
   "Lo Spazio che crea spazio." si stacchi come un claim. */
.hero-orb__lead .nowrap-line { display: inline-block; }
.hero-orb__claim {
  margin-top: 0.5rem; font-family: var(--font-serif); font-style: italic;
  color: var(--terracotta); font-size: 1.05rem;
}

/* ── Footer: icone social ────────────────────────────────────*/
.footer__socials { display: flex; gap: 0.7rem; margin-top: 1rem; }
.footer__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid rgba(248, 243, 239, 0.28);
  color: var(--crema); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.footer__icon svg { width: 19px; height: 19px; fill: currentColor; }
.footer__icon:hover { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }

/* ── Griglia a tre schede (Purpose · Vision · Mission, Valori) ─
   Stesse card numerate della sezione "mondi", su tre colonne. */
.mondi__grid--three { grid-template-columns: repeat(3, 1fr); }
.mondo-card__label {
  display: block; font: 700 0.7rem var(--font-sans); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.6rem;
}
.mondo-card h3 {
  font-family: var(--font-serif); font-weight: 400; line-height: 1.15;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); margin-bottom: 0.6rem; color: var(--nero);
}
.mondo-card p { font-size: 0.92rem; line-height: 1.6; color: rgba(72, 43, 26, 0.75); }
.section--dark .mondo-card {
  background: rgba(248, 243, 239, 0.05); border-color: rgba(248, 243, 239, 0.16);
}
.section--dark .mondo-card h3 { color: var(--crema); }
.section--dark .mondo-card p { color: rgba(248, 243, 239, 0.72); }

/* ── Elenco a scomparsa (le 5 regole del blog) ───────────────
   <details> nativo vestito come il resto: squadrato, filetto sottile,
   nessun JS da mantenere. */
.rules { max-width: 820px; margin: 2rem auto 0; }
.rules__item { border-top: 1px solid rgba(72, 43, 26, 0.18); }
.rules__item:last-child { border-bottom: 1px solid rgba(72, 43, 26, 0.18); }
.rules__item summary {
  display: flex; align-items: baseline; gap: 0.9rem; cursor: pointer;
  padding: 1.05rem 0; list-style: none;
  font-family: var(--font-serif); font-size: clamp(1.02rem, 1.8vw, 1.2rem); color: var(--nero);
}
.rules__item summary::-webkit-details-marker { display: none; }
.rules__item summary::after {
  content: "+"; margin-left: auto; color: var(--terracotta);
  font-family: var(--font-sans); font-size: 1.3rem; line-height: 1; transition: transform 0.25s var(--ease-out);
}
.rules__item[open] summary::after { transform: rotate(45deg); }
.rules__num { font: 700 0.74rem var(--font-sans); letter-spacing: 0.14em; color: var(--terracotta); }
.rules__body { padding: 0 0 1.2rem 2.5rem; color: rgba(72, 43, 26, 0.75); line-height: 1.65; max-width: 62ch; }

/* ── Nota appuntata (Salotto del mese) ───────────────────────
   Da proposte/eventi-nota-micaela.html: LAY-035 reinterpretato, lo
   spillo tiene insieme la foto e la nota. Qui è l'unico posto del sito
   dove compare, e serve a dare voce a Micaela sul salotto in evidenza. */
.salotto-mese {
  max-width: 1080px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.6rem, 4vw, 3rem); align-items: start;
}
.salotto-mese__media { position: relative; }
.salotto-mese__photo {
  width: 100%; aspect-ratio: 4 / 5; background-position: center; background-size: cover;
  box-shadow: 0 30px 60px -34px rgba(72, 43, 26, 0.7);
}
.salotto-mese__pin { display: flex; flex-direction: column; align-items: center; }
.pin-thread { width: 1.5px; height: 22px; background: rgba(72, 43, 26, 0.35); }
.pin-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 3px 8px rgba(72, 43, 26, 0.35); margin-top: -1px; }
.mnote {
  width: 100%; margin-top: -1px; background: var(--crema);
  padding: 1.1rem 1.2rem 1.3rem; box-shadow: 0 20px 40px -22px rgba(72, 43, 26, 0.45);
  border-bottom: 3px solid var(--terracotta); transform: rotate(0.6deg);
}
.mnote__label { display: block; font: 700 0.66rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.5rem; }
.mnote__text { font-size: 0.9rem; line-height: 1.6; color: rgba(72, 43, 26, 0.86); }
.mnote__by { display: block; margin-top: 0.7rem; font-family: var(--font-serif); font-style: italic; font-size: 0.86rem; color: var(--nero); }
.salotto-mese__when {
  display: inline-block; font: 700 0.74rem var(--font-sans); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--terracotta); border: 1px solid rgba(203, 111, 83, 0.4);
  padding: 0.4rem 0.8rem; margin-bottom: 1rem;
}
.salotto-mese__body h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.08; margin-bottom: 0.9rem; }
.salotto-mese__body p { color: rgba(72, 43, 26, 0.78); line-height: 1.7; max-width: 56ch; }
.salotto-mese__body p + p { margin-top: 0.8rem; }
.salotto-mese__body .cta-primary { margin-top: 1.4rem; }

/* ── Segnaposto dichiarati ───────────────────────────────────
   Dove il template di Micaela ha un campo vuoto il sito lo dice, invece
   di riempirlo con un testo inventato. Si toglie cancellando il blocco. */
.placeholder {
  display: block; border-left: 3px solid var(--terracotta); background: rgba(203, 111, 83, 0.07);
  padding: 0.7rem 0.95rem; font: italic 0.86rem/1.5 var(--font-sans);
  color: rgba(72, 43, 26, 0.7); max-width: 56ch;
}
.section--dark .placeholder { background: rgba(248, 243, 239, 0.07); color: rgba(248, 243, 239, 0.72); }
.placeholder strong { font-style: normal; font-weight: 700; color: var(--terracotta); }

/* ── Articoli del blog ───────────────────────────────────────*/
.articoli { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); background: var(--crema); }
.articoli__head { max-width: 760px; margin: 0 auto 2.2rem; text-align: center; }
.articoli__grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem); }
.articolo { background: var(--sabbia); border: 1px solid rgba(72, 43, 26, 0.08); display: flex; flex-direction: column; }
.articolo__media { aspect-ratio: 3 / 2; background-position: center; background-size: cover; }
.articolo__body { padding: 1.2rem 1.3rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.articolo__meta { font: 700 0.7rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.6rem; }
.articolo__body h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; line-height: 1.15; margin-bottom: 0.55rem; }
.articolo__body p { font-size: 0.9rem; line-height: 1.6; color: rgba(72, 43, 26, 0.75); }
.articolo__ask { margin-top: auto; padding-top: 1rem; font: italic 0.86rem var(--font-serif); color: var(--nero); }

/* ── Utilities (pagina Lo Spazio) ────────────────────────────
   Stessa griglia di riquadri degli "usi", ma senza apertura: sono cose
   che ci sono, non modi di usare una stanza. */
.utilities { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); background: var(--sabbia); }
.utilities__head { max-width: 760px; margin: 0 auto 2.2rem; text-align: center; }
.utilities__grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 2vw, 1.4rem); }
.utility { background: var(--crema); border: 1px solid rgba(72, 43, 26, 0.08); }
.utility__media { aspect-ratio: 4 / 3; background-position: center; background-size: cover; background-color: var(--sabbia); }
.utility__body { padding: 1rem 1.1rem 1.3rem; }
.utility__body h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.08rem; margin-bottom: 0.4rem; line-height: 1.2; }
.utility__body p { font-size: 0.86rem; line-height: 1.55; color: rgba(72, 43, 26, 0.75); }

/* ── Sezione valori (Chi siamo) ──────────────────────────────*/
.valori { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); background: var(--crema); }
.valori__head { max-width: 760px; margin: 0 auto 2rem; text-align: center; }
.valori .mondi__grid { max-width: 1080px; margin: 0 auto; }

/* ── Manifesto (Chi siamo): elenco "Creiamo le condizioni" ───*/
.manifesto__creed { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 62ch; }
.manifesto__creed li {
  position: relative; padding-left: 1.5rem; margin-top: 0.5rem;
  color: rgba(72, 43, 26, 0.78); line-height: 1.6;
}
.manifesto__creed li::before { content: "—"; position: absolute; left: 0; color: var(--terracotta); }

@media (max-width: 1024px) {
  .articoli__grid { grid-template-columns: repeat(2, 1fr); }
  .utilities__grid { grid-template-columns: repeat(2, 1fr); }
  .mondi__grid--three { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .spaces-split__grid--six { grid-template-columns: 1fr; }
  .salotto-mese { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .articoli__grid { grid-template-columns: 1fr; }
  .utilities__grid { grid-template-columns: 1fr 1fr; }
  .rules__body { padding-left: 0; }
}

/* ── Utilizzi elencati dentro la fascia di una zona ──────────
   Il Piano Rialzato ha tredici utilizzi divisi in tre famiglie: come
   riquadri fotografici sarebbero un muro. I quattro principali restano
   riquadri, gli altri diventano elenchi sotto. */
.uso-lista { list-style: none; margin: 0; padding: 0; }
.uso-lista li {
  position: relative; padding-left: 1.1rem; margin-top: 0.35rem;
  font-size: 0.88rem; line-height: 1.5; color: rgba(72, 43, 26, 0.78);
}
.uso-lista li::before { content: "·"; position: absolute; left: 0.25rem; color: var(--terracotta); font-weight: 700; }
.zone-band__uses .uso-lista li { color: rgba(72, 43, 26, 0.78); }

.uso-gruppi {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem); margin-top: 0.4rem;
  padding-top: 1.2rem; border-top: 1px solid rgba(72, 43, 26, 0.16);
}
.uso-gruppo h5 {
  font: 700 0.72rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 0.5rem;
}
/* Nel Piano Terra l'elenco sta accanto ai riquadri, non sotto: sono
   quattro voci, non tre famiglie. */
.zona__usi-inner > .uso-lista { align-self: center; }

@media (max-width: 720px) {
  .uso-gruppi { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ── Eventi di esempio ───────────────────────────────────────
   Gli eventi con `esempio: true` in dati/eventi.json riempiono il
   calendario finché non arrivano quelli veri. Devono vedersi per quello
   che sono: bollino chiaro sulla polaroid e riga in cima alla scheda. */
.polaroid__stamp--esempio { background: var(--polvere); color: var(--nero); }
.polaroid--esempio .polaroid__media { filter: saturate(0.9); }
.ev-esempio {
  display: inline-block; margin-bottom: 0.45rem;
  font: 700 0.66rem var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nero); background: var(--polvere); padding: 0.25rem 0.55rem;
}

/* Salotti già passati: stesso impianto del salotto del mese, foto e
   testo invertiti e senza la nota — la nota è di chi deve ancora venire. */
.salotto-mese--passato { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.salotto-mese--passato .salotto-mese__media { order: 2; }
.salotto-mese--passato .salotto-mese__body { order: 1; }
.salotto-mese--passato .salotto-mese__photo { aspect-ratio: 4 / 3; }

@media (max-width: 860px) {
  .salotto-mese--passato { grid-template-columns: 1fr; }
  .salotto-mese--passato .salotto-mese__media { order: 1; }
  .salotto-mese--passato .salotto-mese__body { order: 2; }
}

/* Foto del manifesto (Chi siamo) */
/* .manifesto__foto rimossa il 2026-09-01: era esclusiva di chi-siamo,
   che ora chiude con .cs-chiusura__wall. Verificato: nessuna pagina la usa. */

/* Polaroid: il titolo occupa sempre due righe, così i pulsanti "Prenota"
   restano allineati anche quando un evento ha un nome più lungo degli
   altri. Oltre le due righe il titolo viene troncato. */
.v2 .polaroid figcaption strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.3em;
}

/* 🔴 Fascia scura: rinforzo di specificità.
   `.section--dark` (0,1,0) perdeva contro `.v2 .mondi` (0,2,0) di
   styles-v2.css, che impone il fondo sabbia. Su Chi siamo la sezione
   Ben-Essere veniva così scritta in crema SOPRA la sabbia: illeggibile.
   Queste due righe pareggiano la specificità e il fondo torna scuro.
   Serve ogni volta che si usa .section--dark su una sezione che ha già
   un fondo suo. */
.v2 .section--dark { background: var(--nero); color: var(--crema); }
.v2 .section--dark h2, .v2 .section--dark h3 { color: var(--crema); }
.v2 .section--dark p { color: rgba(248, 243, 239, 0.72); }

/* Griglie "mondi" a numero fisso di colonne.
   Il default del sito è quattro colonne (styles.css, dentro una media
   query per gli schermi larghi): senza il prefisso .v2 le mie varianti
   perdevano e tre schede si spalmavano su quattro colonne, lasciando un
   buco a destra. */
.v2 .mondi__grid--three { grid-template-columns: repeat(3, 1fr); }
.v2 .mondi__grid--two   { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1024px) {
  .v2 .mondi__grid--three { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .v2 .mondi__grid--two { grid-template-columns: 1fr; }
}

/* Recensioni: il voto e il testo partono dalla stessa riga.
   Da quando sotto al testo ci sono anche le citazioni, la colonna destra
   è molto più alta della sinistra: centrare il riquadro del voto lo
   faceva galleggiare a metà, staccato dal titolo che accompagna. */
.v2 .review-scoreband { align-items: start; }

/* Velo delle hero fotografiche: in alto era troppo trasparente (0.18) e
   su una foto chiara — un soffitto bianco, una parete crema — l'occhiello
   terracotta spariva. Alzato quel tanto che basta a tenerlo leggibile su
   qualsiasi foto, senza spegnere l'immagine. */
.v2 .proof-hero__media {
  background:
    linear-gradient(to top, rgba(72, 43, 26, 0.78), rgba(72, 43, 26, 0.38)),
    var(--hero-img, url("../images/blog-hero.jpg")) center/cover;
}
.v2 .proof-hero--eventi .proof-hero__media {
  background:
    linear-gradient(to top, rgba(72, 43, 26, 0.78), rgba(72, 43, 26, 0.38)),
    var(--hero-img, url("../images/uso-rialzato-talk.jpg")) center/cover;
}


/* ══════════════════════════════════════════════════════════════════════════
   REDESIGN 2026-09-01 — LE TRE PAGINE NUOVE
   Chi siamo · Il Salotto Agorà · Agorà delle Idee
   ──────────────────────────────────────────────────────────────────────────
   Perche' questo blocco esiste: le tre pagine avevano tutte lo stesso
   impianto — occhiello centrato, titolo centrato, paragrafo centrato,
   griglia di card sotto — ripetuto sezione dopo sezione. E' il motivo per
   cui "si vedeva che erano fatte con l'AI".

   REGOLA DI SICUREZZA: ogni regola qui sotto e' prefissata da .pg-chisiamo /
   .pg-salotto / .pg-idee (classi sul body). Le tre pagine condividono i
   componenti con le altre cinque — .proof-hero sta anche su Blog ed Eventi,
   .proof-cta su Blog, .spazio-v2-quote e .spazio-v2-cta su Lo Spazio,
   .section--dark sulla Home, .mondi su Blog. Nessuna di quelle regole viene
   modificata, e il prefisso di pagina impedisce a qualsiasi cosa scritta qui
   di raggiungere le pagine fuori ambito.

   I TESTI non si toccano: sono quelli scelti da Micaela nel Template dei
   contenuti v2 (17 agosto 2026). Cambia solo la forma che li ospita.
   ══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   CHI SIAMO · 2 — LA NOSTRA IDENTITA'
   Due colonne asimmetriche (44/56) con la foto che tocca il bordo
   sinistro dello schermo. La sezione non ha padding orizzontale: e'
   la colonna del testo ad avere il proprio, cosi' la foto sborda da
   sola senza trucchi di viewport.
   ───────────────────────────────────────────────────────────────── */
.pg-chisiamo .cs-identita {
  background: var(--sabbia);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.pg-chisiamo .cs-identita__grid {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.6rem);
}
.pg-chisiamo .cs-identita__media img {
  display: block;
  width: 100%;
  height: clamp(320px, 44vw, 520px);
  object-fit: cover;
}
.pg-chisiamo .cs-identita__body {
  padding-right: clamp(1rem, 6vw, 5rem);
  max-width: 660px;
}
.pg-chisiamo .cs-identita__body h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.85rem);
  line-height: 1.05;
  color: var(--nero);
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}
.pg-chisiamo .cs-identita__p + .cs-identita__p { margin-top: 1.5rem; }
.pg-chisiamo .cs-identita__label {
  display: block;
  font: 700 0.7rem var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.35rem;
}
.pg-chisiamo .cs-identita__p p {
  color: rgba(72, 43, 26, 0.78);
  line-height: 1.7;
}
/* La "Frase in evidenza" del template: agganciata alla colonna del testo,
   non piu' sola dentro 386 px di vuoto centrato. */
.pg-chisiamo .cs-identita__quote {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  padding-top: clamp(1.1rem, 2.5vw, 1.7rem);
  border-top: 1px solid rgba(72, 43, 26, 0.22);
}
.pg-chisiamo .cs-identita__quote p {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.12rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--nero);
}
.pg-chisiamo .cs-identita__quote em { font-style: italic; color: var(--terracotta); }
.pg-chisiamo .cs-identita__quote span {
  display: block;
  margin-top: 0.7rem;
  font: 600 0.7rem var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(72, 43, 26, 0.5);
}


/* ─────────────────────────────────────────────────────────────────
   CHI SIAMO · 3 — PURPOSE, VISION E MISSION
   I numeroni 01/02/03 restano tolti: NON erano nel template (li' i campi
   si chiamano "Etichetta: Purpose"), se li era inventati la build.
   Il 2026-09-01 Marco ha chiesto le immagini: la versione tipografica a
   etichette verticali e' stata sostituita dai pannelli fotografici, in
   fondo al file (blocco CORREZIONI, secondo giro).
   ───────────────────────────────────────────────────────────────── */
.pg-chisiamo .cs-pvm {
  background: var(--crema);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3rem);
}
.pg-chisiamo .cs-pvm__head {
  max-width: 1240px;
  margin: 0 auto clamp(1.8rem, 4vw, 2.8rem);
}
.pg-chisiamo .cs-pvm__head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.05;
  color: var(--nero);
}


/* ─────────────────────────────────────────────────────────────────
   CHI SIAMO · 4 — I VALORI
   I numeri 01/02/03 QUI restano: li ha scritti Micaela nel template,
   e li ha scritti "01 · Accoglienza", in linea col titolo. Cambia
   solo come sono disegnati: erano numeroni in trasparenza dietro la
   card (il cliche' piu' riconoscibile), tornano a essere quello che
   sono, un numero piccolo davanti alla parola.
   Accanto, una polaroid appena ruotata: il vocabolario di Home ed
   Eventi, ricostruito qui perche' il .pinned originale dipende da
   v3.js, che su questa pagina non e' caricato.
   ───────────────────────────────────────────────────────────────── */
.pg-chisiamo .cs-valori {
  background: var(--sabbia);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3rem);
}
.pg-chisiamo .cs-valori__head { max-width: 1180px; margin: 0 auto clamp(1.8rem, 4vw, 2.8rem); }
.pg-chisiamo .cs-valori__head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height: 1;
  color: var(--nero);
}
.pg-chisiamo .cs-valori__list {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
}
.pg-chisiamo .cs-valori__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 20vw, 230px);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid rgba(72, 43, 26, 0.18);
}
/* La polaroid cambia lato: e' l'asimmetria che rompe la fila di card uguali */
.pg-chisiamo .cs-valori__item:nth-child(2) { grid-template-columns: clamp(170px, 20vw, 230px) minmax(0, 1fr); }
.pg-chisiamo .cs-valori__item:nth-child(2) .cs-valori__text { order: 2; }
.pg-chisiamo .cs-valori__item:nth-child(2) .cs-valori__pola { order: 1; }
.pg-chisiamo .cs-valori__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.3rem);
  line-height: 1;
  color: var(--nero);
  margin-bottom: 0.7rem;
}
.pg-chisiamo .cs-valori__num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.42em;
  letter-spacing: 0.1em;
  color: var(--terracotta);
  vertical-align: 0.55em;
  margin-right: 0.35em;
}
.pg-chisiamo .cs-valori__text p {
  color: rgba(72, 43, 26, 0.75);
  line-height: 1.7;
  max-width: 54ch;
}
.pg-chisiamo .cs-valori__pola {
  background: #fff;
  padding: 10px 10px 0;
  margin: 0;
  box-shadow: 0 18px 34px -18px rgba(60, 40, 30, 0.45);
  transform: rotate(-2.2deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pg-chisiamo .cs-valori__item:nth-child(2) .cs-valori__pola { transform: rotate(1.8deg); }
.pg-chisiamo .cs-valori__item:nth-child(3) .cs-valori__pola { transform: rotate(2.6deg); }
.pg-chisiamo .cs-valori__pola:hover { transform: rotate(0deg) translateY(-6px); }
.pg-chisiamo .cs-valori__pola img {
  display: block;
  width: 100%;
  height: auto;          /* senza questo l'attributo height="…" dell'img vale
                            come dichiarazione CSS: width e height risultano
                            entrambi fissati e aspect-ratio viene ignorato */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.pg-chisiamo .cs-valori__pola figcaption {
  padding: 0.55rem 0.3rem 0.7rem;
  text-align: center;
  font: 500 0.68rem var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(72, 43, 26, 0.55);
}


/* ─────────────────────────────────────────────────────────────────
   CHI SIAMO · 5 — IL CONCETTO DI BEN-ESSERE
   La fascia scura resta (e' l'unico stacco tonale della pagina e
   funziona) ma smette di essere marrone piatto: sotto ci va una foto
   con un velo. NON usa .section--dark, che sta anche in Home.
   ───────────────────────────────────────────────────────────────── */
.pg-chisiamo .cs-benessere {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem);
  color: var(--crema);
  background:
    linear-gradient(180deg, rgba(40, 22, 12, 0.62), rgba(40, 22, 12, 0.82)),
    url("../images/ev-benessere.jpg") center / cover;
}
.pg-chisiamo .cs-benessere__inner { max-width: 1000px; margin-inline: auto; }
.pg-chisiamo .cs-benessere__inner h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.05;
  color: var(--crema);
}
.pg-chisiamo .cs-benessere__lead {
  margin-top: 0.9rem;
  color: rgba(248, 243, 239, 0.78);
  line-height: 1.7;
  max-width: 58ch;
}
.pg-chisiamo .cs-benessere__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  margin-block: clamp(1.8rem, 4vw, 2.6rem);
}
.pg-chisiamo .cs-benessere__duo > div + div {
  border-left: 1px solid rgba(248, 243, 239, 0.22);
  padding-left: clamp(1.4rem, 4vw, 3rem);
}
.pg-chisiamo .cs-benessere__duo h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: var(--crema);
  margin-bottom: 0.5rem;
}
.pg-chisiamo .cs-benessere__duo p { color: rgba(248, 243, 239, 0.72); line-height: 1.65; }
.pg-chisiamo .cs-benessere__close {
  border-top: 1px solid rgba(248, 243, 239, 0.22);
  padding-top: clamp(1.3rem, 3vw, 2rem);
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  line-height: 1.4;
  color: var(--crema);
}


/* ─────────────────────────────────────────────────────────────────
   CHI SIAMO · 6 — MANIFESTO
   L'elenco "Creiamo le condizioni" diventa il pezzo tipografico della
   pagina, e la foto entra nel flusso sbordando a DESTRA (la sezione
   identita' sborda a sinistra: e' l'alternanza che toglie la
   sensazione di sette blocchi uguali).
   La foto e' uso-sopra-talk.jpg, l'unica del sito con persone vere a
   un evento. Fino a oggi era codice morto: il ripiego della hero
   Eventi, che non si vede mai.
   ───────────────────────────────────────────────────────────────── */
.pg-chisiamo .cs-manifesto {
  background: var(--crema);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.pg-chisiamo .cs-manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.6rem, 5vw, 4rem);
  align-items: center;
}
.pg-chisiamo .cs-manifesto__body {
  padding-left: clamp(1rem, 4vw, 3rem);
  max-width: 660px;
  margin-left: auto;
}
.pg-chisiamo .cs-manifesto__body h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.85rem);
  line-height: 1.05;
  color: var(--nero);
  margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
}
.pg-chisiamo .cs-manifesto__body p { color: rgba(72, 43, 26, 0.78); line-height: 1.7; }
.pg-chisiamo .cs-manifesto__body p + p { margin-top: 1.1rem; }
.pg-chisiamo .cs-manifesto__media img {
  display: block;
  width: 100%;
  height: clamp(340px, 46vw, 560px);
  object-fit: cover;
}
.pg-chisiamo .cs-manifesto__creed {
  max-width: 1180px;
  margin: clamp(2.4rem, 5vw, 3.6rem) auto 0;
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.pg-chisiamo .cs-manifesto__creed > span {
  display: block;
  font: 700 0.72rem var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
}
/* Ridisegna .manifesto__creed, che e' esclusiva di questa pagina */
.pg-chisiamo .manifesto__creed {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: 0.45rem;
}
.pg-chisiamo .manifesto__creed li {
  position: relative;
  margin: 0;
  padding-left: clamp(1.6rem, 3vw, 2.4rem);
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 3vw, 2rem);
  line-height: 1.25;
  color: var(--nero);
}
.pg-chisiamo .manifesto__creed li::before { content: "—"; position: absolute; left: 0; color: var(--terracotta); }
.pg-chisiamo .cs-manifesto__outro {
  max-width: 1180px;
  margin: clamp(1.8rem, 4vw, 2.8rem) auto 0;
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.pg-chisiamo .cs-manifesto__outro p { max-width: 62ch; color: rgba(72, 43, 26, 0.78); line-height: 1.7; }


/* ─────────────────────────────────────────────────────────────────
   CHI SIAMO · 7 — CHIUSURA
   La "Frase finale" del manifesto, poi la scritta a muro a piena
   larghezza. Il testo NON va sopra quella foto: la parete dice gia'
   "Spazio Agorà — lo Spazio che crea spazio", due scritte sovrapposte
   si annullerebbero. Con questo ritaglio la scritta sta al centro del
   fotogramma e resta intera.
   ───────────────────────────────────────────────────────────────── */
.pg-chisiamo .cs-chiusura { background: var(--sabbia); padding-top: clamp(3rem, 7vw, 5rem); }
.pg-chisiamo .cs-chiusura__quote {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.pg-chisiamo .cs-chiusura__quote p {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.45rem, 3.8vw, 2.7rem);
  line-height: 1.22;
  color: var(--nero);
  max-width: 900px;
  margin-left: clamp(0px, 7vw, 150px);
}
.pg-chisiamo .cs-chiusura__quote em { font-style: italic; color: var(--terracotta); }
.pg-chisiamo .cs-chiusura__quote span {
  display: block;
  margin: 0.9rem 0 0 clamp(0px, 7vw, 150px);
  font: 600 0.7rem var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(72, 43, 26, 0.5);
}
.pg-chisiamo .cs-chiusura__wall { margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.pg-chisiamo .cs-chiusura__wall img {
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 440px);
  object-fit: cover;
  object-position: center;
}


/* ═══════════════════════════════════════════════════════════════════
   IL SALOTTO AGORA'
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   SALOTTO · 2 — IL DITTICO
   La prima frase del Testo 1 e' gia' un dittico nelle parole di
   Micaela: "Tra il Salotto del Settecento... e l'Agora'...". Qui non
   viene riscritta ne' tagliata: viene solo spezzata sulla sua cesura
   naturale, meta' per pannello.
   ───────────────────────────────────────────────────────────────── */
.pg-salotto .sal-dittico { background: var(--sabbia); padding-block: clamp(3rem, 7vw, 5rem); }
.pg-salotto .sal-dittico__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 2.4vw, 1.8rem);
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.pg-salotto .sal-dittico__panel {
  position: relative;
  min-height: clamp(300px, 42vw, 500px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.pg-salotto .sal-dittico__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 12, 8, 0.12), rgba(20, 12, 8, 0.84));
}
.pg-salotto .sal-dittico__spine {
  position: absolute;
  z-index: 2;
  left: clamp(10px, 1.6vw, 18px);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(0.92rem, 1.4vw, 1.2rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(20, 12, 8, 0.7);
}
.pg-salotto .sal-dittico__text {
  position: relative;
  z-index: 2;
  padding: clamp(1.1rem, 2.6vw, 2rem);
  padding-left: clamp(2.5rem, 4.5vw, 3.6rem);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1rem, 2.1vw, 1.45rem);
  line-height: 1.35;
  text-shadow: 0 1px 12px rgba(20, 12, 8, 0.5);
}
.pg-salotto .sal-dittico__body {
  max-width: 1240px;
  margin: clamp(2.2rem, 4.5vw, 3.4rem) auto 0;
  padding-inline: clamp(1rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
}
.pg-salotto .sal-dittico__label {
  display: block;
  font: 700 0.7rem var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.5rem;
}
.pg-salotto .sal-dittico__body p { color: rgba(72, 43, 26, 0.78); line-height: 1.7; }
.pg-salotto .sal-dittico__idea {
  border-left: 2px solid var(--terracotta);
  padding-left: clamp(1rem, 2.2vw, 1.6rem);
}
.pg-salotto .sal-dittico__idea p {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.35;
  color: var(--nero);
}
.pg-salotto .sal-dittico__idea p + p { margin-top: 0.5rem; }


/* ─────────────────────────────────────────────────────────────────
   SALOTTO · 3 — IL SALOTTO DEL MESE
   Il componente resta: la foto con la nota appuntata e' la cosa
   migliore della pagina. Cambia solo il contenitore (era .mondi,
   condivisa con Blog) e prende piu' respiro.
   ───────────────────────────────────────────────────────────────── */
.pg-salotto .sal-mese { background: var(--crema); padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem); }
.pg-salotto .sal-mese__head { max-width: 1180px; margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); }
.pg-salotto .sal-mese__head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.05;
  color: var(--nero);
}
.pg-salotto .sal-mese .salotto-mese { max-width: 1180px; margin-inline: auto; }


/* ─────────────────────────────────────────────────────────────────
   SALOTTO · 4 — L'ARCHIVIO
   Non piu' lo stesso componente del salotto del mese ribaltato: una
   fila di polaroid. Con una voce sola legge "il primo"; quando
   Micaela ne aggiunge, la fila cresce da sola.
   ───────────────────────────────────────────────────────────────── */
.pg-salotto .sal-archivio { background: var(--sabbia); padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem); }
.pg-salotto .sal-archivio__head { max-width: 1180px; margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); }
.pg-salotto .sal-archivio__head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.05;
  color: var(--nero);
}
.pg-salotto .sal-archivio__grid {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 272px));
  gap: clamp(1.5rem, 3.4vw, 2.6rem);
}
.pg-salotto .sal-pola {
  background: #fff;
  padding: 12px 12px 0;
  margin: 0;
  box-shadow: 0 18px 34px -18px rgba(60, 40, 30, 0.45);
  transform: rotate(-1.6deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pg-salotto .sal-pola:nth-child(even) { transform: rotate(1.4deg); }
.pg-salotto .sal-pola:hover { transform: rotate(0deg) translateY(-6px); }
.pg-salotto .sal-pola img {
  display: block;
  width: 100%;
  height: auto;          /* senza questo l'attributo height="…" dell'img vale
                            come dichiarazione CSS: width e height risultano
                            entrambi fissati e aspect-ratio viene ignorato */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.pg-salotto .sal-pola figcaption { padding: 0.8rem 0.35rem 1rem; text-align: center; }
.pg-salotto .sal-pola__when {
  display: block;
  font: 600 0.7rem var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.35rem;
}
.pg-salotto .sal-pola__title {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.2;
  color: var(--nero);
}
.pg-salotto .sal-pola__who {
  display: block;
  margin-top: 0.35rem;
  font: 500 0.82rem var(--font-sans);
  color: rgba(72, 43, 26, 0.65);
}
.pg-salotto .sal-pola .placeholder { text-align: left; margin-top: 0.7rem; font-size: 0.78rem; }


/* ═══════════════════════════════════════════════════════════════════
   AGORA' DELLE IDEE
   ═══════════════════════════════════════════════════════════════════ */

/* La hero di Idee usa ora .proof-hero, lo stesso componente delle altre
   quattro pagine (Marco, 2026-09-01: "la voglio uguale"). .pf-hero era
   diversa in tutto: 56dvh contro 78vh, velo uniforme invece che a
   gradiente, contenuto a sinistra invece che centrato. */

/* ─────────────────────────────────────────────────────────────────
   IDEE · 2 — I TRE BLOCCHI
   Nel template di Micaela "Agora' Experience Days" e' l'intestazione
   di un GRUPPO, e il campo Etichetta delle singole voci e' vuoto. La
   pagina aveva ripetuto il nome del gruppo come badge su ognuna delle
   sette schede identiche: era quella ripetizione a farsi notare, ed
   era un'aggiunta rispetto al documento.
   Qui il gruppo torna gruppo, e le quattro date di "Abitare gli
   Spazi" tornano quello che sono: un appuntamento con quattro date,
   non quattro appuntamenti.
   ───────────────────────────────────────────────────────────────── */
.pg-idee .idee-lista { background: var(--crema); padding-block: clamp(3rem, 7vw, 5.5rem); }
.pg-idee .idee-blocco + .idee-blocco { margin-top: clamp(2.4rem, 5.5vw, 4.2rem); }

/* Blocco 1 — Open Agora': l'apertura della stagione, a piena larghezza */
.pg-idee .idee-apertura {
  position: relative;
  min-height: clamp(300px, 38vw, 440px);
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
}
.pg-idee .idee-apertura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 12, 8, 0.18), rgba(20, 12, 8, 0.86));
}
.pg-idee .idee-apertura__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  width: 100%;
  margin-inline: auto;
  padding: clamp(1.6rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem);
  color: #fff;
}
.pg-idee .idee-apertura__when {
  display: block;
  font: 600 0.78rem var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 243, 239, 0.8);
  margin-bottom: 0.5rem;
}
.pg-idee .idee-apertura h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1;
  color: #fff;
}
.pg-idee .idee-apertura .placeholder {
  margin-top: 1.1rem;
  background: rgba(248, 243, 239, 0.1);
  color: rgba(248, 243, 239, 0.78);
  border-left-color: var(--terracotta);
}

/* Blocco 2 — Il Salotto: l'unico con testo vero, prende il peso maggiore */
.pg-idee .idee-salotto {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
.pg-idee .idee-salotto__media img {
  display: block;
  width: 100%;
  height: clamp(280px, 34vw, 420px);
  object-fit: cover;
}
.pg-idee .idee-when {
  display: block;
  font: 600 0.78rem var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.4rem;
}
.pg-idee .idee-label {
  display: inline-block;
  font: 600 0.68rem var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(72, 43, 26, 0.6);
  border: 1px solid rgba(72, 43, 26, 0.25);
  padding: 0.28rem 0.7rem;
  margin-bottom: 0.9rem;
}
.pg-idee .idee-salotto h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  line-height: 1.05;
  color: var(--nero);
  margin-bottom: 0.9rem;
}
.pg-idee .idee-salotto p { color: rgba(72, 43, 26, 0.78); line-height: 1.7; max-width: 56ch; }
.pg-idee .idee-salotto .cta-secondary { margin-top: 1.3rem; }

/* Blocco 3 — Agora' Experience Days: un gruppo, non cinque schede */
.pg-idee .idee-gruppo {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
}
.pg-idee .idee-gruppo__media img {
  display: block;
  width: 100%;
  height: clamp(280px, 36vw, 460px);
  object-fit: cover;
}
.pg-idee .idee-gruppo__head h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.05;
  color: var(--nero);
  margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
}
.pg-idee .idee-voce {
  padding-block: clamp(1.1rem, 2.6vw, 1.7rem);
  border-top: 1px solid rgba(72, 43, 26, 0.18);
}
.pg-idee .idee-voce:last-child { border-bottom: 1px solid rgba(72, 43, 26, 0.18); }
.pg-idee .idee-voce h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.1;
  color: var(--nero);
}
.pg-idee .idee-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.7rem 0 0; }
.pg-idee .idee-chip {
  font: 600 0.76rem var(--font-sans);
  letter-spacing: 0.03em;
  color: var(--nero);
  background: rgba(203, 111, 83, 0.12);
  border: 1px solid rgba(203, 111, 83, 0.38);
  padding: 0.3rem 0.68rem;
}
.pg-idee .idee-voce .placeholder { margin-top: 0.8rem; }


/* ═══════════════════════════════════════════════════════════════════
   MOBILE — sotto i 900 px tutte le griglie tornano a una colonna
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pg-chisiamo .cs-identita__grid,
  .pg-chisiamo .cs-manifesto__grid,
  .pg-salotto .sal-dittico__pair,
  .pg-salotto .sal-dittico__body,
  .pg-idee .idee-salotto,
  .pg-idee .idee-gruppo { grid-template-columns: 1fr; }

  .pg-chisiamo .cs-identita__body { padding-inline: clamp(1rem, 4vw, 3rem); }
  .pg-chisiamo .cs-manifesto__body { padding-inline: clamp(1rem, 4vw, 3rem); margin-left: 0; }

  /* I valori: la polaroid va sempre sotto, sempre dallo stesso lato */
  .pg-chisiamo .cs-valori__item,
  .pg-chisiamo .cs-valori__item:nth-child(2) { grid-template-columns: 1fr; }
  .pg-chisiamo .cs-valori__item:nth-child(2) .cs-valori__text { order: 1; }
  .pg-chisiamo .cs-valori__item:nth-child(2) .cs-valori__pola { order: 2; }
  .pg-chisiamo .cs-valori__pola { max-width: 240px; }

  .pg-chisiamo .cs-benessere__duo { grid-template-columns: 1fr; }
  .pg-chisiamo .cs-benessere__duo > div + div {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(248, 243, 239, 0.22);
    padding-top: clamp(1.2rem, 3vw, 1.8rem);
  }

  .pg-chisiamo .cs-chiusura__quote p,
  .pg-chisiamo .cs-chiusura__quote span { margin-left: 0; }

  .pg-salotto .sal-dittico__panel { min-height: clamp(240px, 60vw, 340px); }
  .pg-idee .idee-salotto__media,
  .pg-idee .idee-gruppo__media { order: -1; }
}


/* ══════════════════════════════════════════════════════════════════════════
   CORREZIONI 2026-09-01 — SECONDO GIRO (leggibilita' + richieste di Marco)
   redesign.css e' l'ULTIMO foglio caricato su tutte le pagine: da qui si puo'
   correggere anche cio' che nasce in v3.css e styles-extra.css senza toccarli.
   ══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   TIPOGRAFIA — il corsivo di Fraunces
   Due cause distinte, tutte e due reali:
   1. Il corsivo caricato da Google Fonts era SOLO il peso 400
      (`1,9..144,400`). .polaroid__stamp chiedeva corsivo 500: il browser
      lo sintetizzava, e veniva impastato. Ora nell'URL c'e' anche il 500.
   2. Il corsivo di Fraunces e' una variante SWASH, quasi uno script: a
      0.82rem e 1.14rem non e' testo, e' decorazione.
   Decisione di Marco (2026-09-01): il corsivo RESTA dove Micaela lo vuole
   — hero della home e pagina eventi — e sparisce dove si deve leggere.
   ───────────────────────────────────────────────────────────────── */

/* CORREZIONE della correzione (stesso giorno): la prima versione toglieva
   il corsivo ma NON la famiglia, e non bastava. Il carattere di quei testi
   non era Fraunces corsivo: era **Pinyon Script**, che il blocco TIPOGRAFIA
   in cima a questo file applica a tutti i corsivi del sito dal 20/07. Quel
   blocco conteneva gia' l'avviso: "sui pezzi piccoli la leggibilita' e' al
   limite, se un giorno non torna il colpevole e' questo elenco". E' tornato.
   Qui i testi che si devono LEGGERE escono dallo script e tornano a Fraunces.
   Lo script resta dove e' un fregio: l'accento della hero e gli <em> delle
   citazioni. */
.polaroid figcaption strong {
  font-family: var(--font-serif);
  font-style: italic;          /* Marco, 2026-09-01: il corsivo lo vuole. Ma
                                  NON quello calligrafico di Pinyon, che era
                                  proprio quello che aveva chiamato illeggibile:
                                  questo e' il corsivo vero di Fraunces. Per
                                  tornare a Pinyon basta togliere questa riga e
                                  la font-family qui sopra. */
  font-size: 1.3rem;
  line-height: 1.22;
}
/* Il timbro diventa un maiuscoletto sans: a quella misura tiene molto
   meglio del corsivo, e resta un fregio */
.polaroid__stamp {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.34rem 0.6rem;
}

/* Recensioni del blog: era il caso peggiore, clamp(1.3rem, 3.6vw, 1.95rem)
   di corsivo swash su un testo lungo */
.v2 .libro-oro__quote {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(1.18rem, 3.2vw, 1.65rem);
  line-height: 1.45;
}

/* Album eventi passati: stessa cura del titolo polaroid */
.passati-gallery .past-card figcaption strong { font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; line-height: 1.2; }


/* ─────────────────────────────────────────────────────────────────
   HOME — card "Per business" / "Per privati" da telefono
   La regola era `.aud-card--row .aud-card__media { width: min(100%,300px) }`:
   300 px dentro un contenitore da 311 px, quindi la foto restava incollata
   a sinistra con 11 px di vuoto a destra. Si vedeva, ed e' il difetto che
   ha segnalato Marco. Ora la foto esce dal padding della card e va a
   larghezza piena, e passa da quadrata a 4:3 per non mangiare mezzo schermo.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .aud-card--row { padding: 0 0 clamp(1rem, 3vw, 1.4rem); overflow: hidden; }
  .aud-card--row .aud-card__media {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
  }
  .aud-card--row .aud-card__body { padding-inline: clamp(1rem, 4vw, 1.4rem); }
}


/* ─────────────────────────────────────────────────────────────────
   LIBRERIA DELLE ESPERIENZE / DENTRO SPAZIO AGORA' — leggibilita'
   Il velo del pannello APERTO partiva da 0.12 e arrivava a 0.9 solo al
   100%: sopra una foto chiara l'occhiello terracotta ci spariva dentro.
   Due correzioni che lavorano insieme:
   1. la sfumatura dell'attivo si scurisce prima, cosi' la leggibilita' non
      dipende piu' da quale foto c'e' sotto;
   2. l'occhiello passa da terracotta a crema. Il terracotta resta dove
      funziona: il sottolineato del link.
   Vale per entrambe le fasce della home (.her-accordion e' usata solo li').
   ───────────────────────────────────────────────────────────────── */
.her-accordion__shade {
  background: linear-gradient(180deg,
    rgba(20, 12, 8, 0.10) 0%,
    rgba(20, 12, 8, 0.42) 45%,
    rgba(20, 12, 8, 0.86) 78%,
    rgba(20, 12, 8, 0.94) 100%);
}
/* Marco, 2026-09-01: l'occhiello deve restare TERRACOTTA, non bianco.
   Il terracotta su una foto chiara sparisce, quindi il colore torna quello di
   prima e la leggibilita' se la prende una pastiglia scura dietro: il testo
   non dipende piu' da cosa c'e' sotto. */
.her-accordion__eyebrow {
  color: var(--terracotta);
  display: inline-block;
  background: rgba(20, 12, 8, 0.62);
  padding: 0.3rem 0.62rem;
  margin-bottom: 0.6rem;
}
.her-accordion__content h3,
.her-accordion__content p { text-shadow: 0 1px 12px rgba(20, 12, 8, 0.55); }


/* ─────────────────────────────────────────────────────────────────
   SALOTTO — la scritta verticale non piu' attaccata al fondo
   Errore mio: avevo scritto `align-items: center`, ma con
   `writing-mode: vertical-rl` l'asse principale del flex RUOTA — quindi
   align-items centrava in orizzontale e il testo restava a 0 px dal bordo
   inferiore. Si centra con justify-content.
   ───────────────────────────────────────────────────────────────── */
.pg-salotto .sal-dittico__spine {
  justify-content: center;
  padding-block: clamp(1rem, 2.4vw, 1.8rem);
}


/* ─────────────────────────────────────────────────────────────────
   CHI SIAMO — Purpose, Vision e Mission con le immagini
   Marco (2026-09-01): "voglio delle immagini, puoi riutilizzare il layout
   della libreria". Preso il linguaggio visivo della libreria — pannello
   fotografico, velo, etichetta — ma i tre pannelli restano APERTI: sono
   solo tre, i testi sono corti, e la Vision non ha testo (si aprirebbe su
   un pannello vuoto). Se un giorno si vuole la fisarmonica vera, il
   markup e' gia' quello giusto.
   ───────────────────────────────────────────────────────────────── */
.pg-chisiamo .cs-pvm__panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.8vw, 1.4rem);
  max-width: 1240px;
  margin-inline: auto;
}
.pg-chisiamo .cs-pvm__panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 34vw, 470px);
  background-size: cover;
  background-position: center;
  background-color: var(--nero);
  overflow: hidden;
}
.pg-chisiamo .cs-pvm__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 12, 8, 0.12) 0%,
    rgba(20, 12, 8, 0.46) 42%,
    rgba(20, 12, 8, 0.88) 78%,
    rgba(20, 12, 8, 0.95) 100%);
}
.pg-chisiamo .cs-pvm__content {
  position: relative;
  z-index: 2;
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
  color: #fff;
}
.pg-chisiamo .cs-pvm__label {
  display: block;
  font: 700 0.68rem var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crema);
  margin-bottom: 0.5rem;
}
.pg-chisiamo .cs-pvm__panel h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 12px rgba(20, 12, 8, 0.55);
}
.pg-chisiamo .cs-pvm__panel p {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(248, 243, 239, 0.85);
  text-shadow: 0 1px 12px rgba(20, 12, 8, 0.55);
}


/* ─────────────────────────────────────────────────────────────────
   SEGNO DI BOZZA "※" — i testi scritti da me, da far controllare
   Marco (2026-09-01): i testi mancanti li scrivo io, con l'etichetta in
   testa e un segno che li distingua.
   Il segno e' `※`: e' un vero segno tipografico di richiamo, non compare
   mai in un testo italiano vero, quindi un Ctrl+F su ※ li trova tutti —
   e uno script (npm run dottore) puo' contarli e bloccare la pubblicazione
   finche' ce n'e' anche uno.
   Due densita': testo pieno dove ci sta, "richiamo" compatto dove il testo
   sarebbe troppo lungo per la sezione.
   ───────────────────────────────────────────────────────────────── */
.bozza {
  display: block;
  position: relative;
  border-left: 3px solid var(--terracotta);
  background: rgba(203, 111, 83, 0.07);
  padding: 0.72rem 0.95rem 0.72rem 2.3rem;
  font: 400 0.9rem/1.6 var(--font-sans);
  color: rgba(72, 43, 26, 0.82);
  max-width: 64ch;
}
.bozza__segno {
  position: absolute;
  left: 0.75rem;
  top: 0.66rem;
  color: var(--terracotta);
  font-size: 0.95rem;
  line-height: 1.5;
}
.bozza__label {
  font-weight: 700;
  color: var(--terracotta);
}
.bozza__label::after {
  content: " — ";
  font-weight: 400;
  color: rgba(72, 43, 26, 0.45);
}
/* Richiamo: il testo non ci sta nella sezione, quindi qui c'e' solo il
   segnale che manca e quanto sara' lungo */
.bozza--richiamo {
  font-size: 0.82rem;
  font-style: italic;
  padding-block: 0.5rem;
  color: rgba(72, 43, 26, 0.68);
}
.bozza--richiamo .bozza__label { font-style: normal; }
/* Il segno fuori da un blocco .bozza: dentro .bozza e' assoluto (ha il suo
   contenitore relativo), qui invece deve stare semplicemente in linea —
   altrimenti si aggancia al primo antenato posizionato e scappa in un angolo. */
.segno-inline { color: var(--terracotta); margin-right: 0.3em; }
/* Sopra una foto o una fascia scura */
.bozza--scuro {
  background: rgba(248, 243, 239, 0.12);
  color: rgba(248, 243, 239, 0.88);
}
.bozza--scuro .bozza__label,
.bozza--scuro .bozza__segno { color: #EBA88C; }
.bozza--scuro .bozza__label::after { color: rgba(248, 243, 239, 0.5); }


/* ─────────────────────────────────────────────────────────────────
   SALOTTI PASSATI — pagina archivio (prototipo del 2026-09-01)
   Riusa .past-card, che esisteva gia' in v3.css/extra.js ma non era usata
   da nessuna pagina: era codice orfano di un'idea precedente.
   ───────────────────────────────────────────────────────────────── */
.pg-passati .sp-archivio { background: var(--sabbia); padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem); }
.pg-passati .sp-archivio__head { max-width: 1180px; margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); }
.pg-passati .sp-archivio__head h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.05; color: var(--nero);
}
.pg-passati .sp-archivio__grid {
  max-width: 1180px; margin-inline: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3.4vw, 2.6rem);
}
.pg-passati .sp-pola {
  background: #fff; padding: 12px 12px 0; margin: 0;
  box-shadow: 0 18px 34px -18px rgba(60, 40, 30, 0.45);
  transform: rotate(var(--tilt, -1.6deg));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pg-passati .sp-pola:hover { transform: rotate(0deg) translateY(-6px); }
.pg-passati .sp-pola img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.pg-passati .sp-pola figcaption { padding: 0.8rem 0.35rem 1rem; text-align: center; }
.pg-passati .sp-pola__when {
  display: block; font: 600 0.7rem var(--font-sans); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.35rem;
}
.pg-passati .sp-pola__title {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-style: italic;
  font-size: 1.18rem; line-height: 1.2; color: var(--nero);
}
.pg-passati .sp-pola__who { display: block; margin-top: 0.3rem; font: 500 0.8rem var(--font-sans); color: rgba(72, 43, 26, 0.62); }

/* La SCHEDA del singolo salotto: e' questa la parte da giudicare */
.pg-passati .sp-scheda { background: var(--crema); padding-block: clamp(3rem, 7vw, 5rem); overflow: hidden; }
.pg-passati .sp-scheda__apertura { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.pg-passati .sp-scheda__apertura img {
  display: block; width: 100%; height: clamp(260px, 42vw, 560px); object-fit: cover;
}
.pg-passati .sp-scheda__grid {
  max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start;
}
.pg-passati .sp-scheda__when {
  display: block; font: 600 0.78rem var(--font-sans); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.4rem;
}
.pg-passati .sp-scheda__grid h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.05; color: var(--nero);
  margin-bottom: 0.9rem;
}
.pg-passati .sp-scheda__grid p { color: rgba(72, 43, 26, 0.78); line-height: 1.7; max-width: 62ch; }
.pg-passati .sp-scheda__grid p + p { margin-top: 1rem; }
.pg-passati .sp-ospite {
  border-left: 2px solid var(--terracotta);
  padding-left: clamp(1rem, 2.2vw, 1.5rem);
}
.pg-passati .sp-ospite__ruolo {
  display: block; font: 700 0.68rem var(--font-sans); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.4rem;
}
.pg-passati .sp-ospite__nome {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.15; color: var(--nero); margin-bottom: 0.6rem;
}
.pg-passati .sp-ospite p { font-size: 0.92rem; }

/* Galleria foto dell'incontro */
.pg-passati .sp-galleria { max-width: 1180px; margin: clamp(2.2rem, 5vw, 3.4rem) auto 0; padding-inline: clamp(1rem, 4vw, 3rem); }
.pg-passati .sp-galleria__label {
  display: block; font: 700 0.72rem var(--font-sans); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 1rem;
}
.pg-passati .sp-galleria__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(0.6rem, 1.4vw, 1rem); }
.pg-passati .sp-galleria__grid img { display: block; width: 100%; height: clamp(150px, 18vw, 240px); object-fit: cover; }

/* Video: anteprima cliccabile, il player si carica SOLO al clic.
   Cosi' non ci sono cookie di terze parti finche' il visitatore non tocca
   niente — che con iubenda e' la differenza fra dover bloccare l'embed e non
   doverlo bloccare. */
.pg-passati .sp-video { max-width: 1180px; margin: clamp(2.2rem, 5vw, 3.4rem) auto 0; padding-inline: clamp(1rem, 4vw, 3rem); }
.pg-passati .sp-video__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background-size: cover; background-position: center; background-color: var(--nero);
  display: grid; place-items: center; cursor: pointer; border: 0; padding: 0;
}
.pg-passati .sp-video__frame::after {
  content: ""; position: absolute; inset: 0; background: rgba(20, 12, 8, 0.42);
}
.pg-passati .sp-video__play {
  position: relative; z-index: 2; display: grid; place-items: center; gap: 0.6rem;
  color: #fff; font: 600 0.86rem var(--font-sans);
}
.pg-passati .sp-video__disc {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(203, 111, 83, 0.92); font-size: 1.4rem; line-height: 1;
}
.pg-passati .sp-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* Nota gialla del prototipo: si toglie quando la pagina e' approvata */
.pg-passati .sp-nota {
  max-width: 1180px; margin: clamp(1.4rem, 3vw, 2rem) auto 0;
  padding: 0.9rem 1.1rem; border-left: 3px solid #BA7517; background: rgba(186, 117, 23, 0.09);
  font: 400 0.86rem/1.6 var(--font-sans); color: rgba(72, 43, 26, 0.85);
}
.pg-passati .sp-nota strong { color: #854F0B; }


/* ═══════════════════════════════════════════════════════════════════
   MOBILE — secondo giro
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Purpose/Vision/Mission: pannelli impilati */
  .pg-chisiamo .cs-pvm__panels { grid-template-columns: 1fr; }
  .pg-chisiamo .cs-pvm__panel { min-height: clamp(300px, 62vw, 380px); }

  /* Valori centrati, col numero SOPRA la parola invece che in linea */
  .pg-chisiamo .cs-valori__head,
  .pg-chisiamo .cs-valori__text { text-align: center; }
  .pg-chisiamo .cs-valori__item { justify-items: center; }
  .pg-chisiamo .cs-valori__text p { margin-inline: auto; }
  .pg-chisiamo .cs-valori__num {
    display: block;
    font-size: 0.78rem;
    vertical-align: baseline;
    margin: 0 0 0.35rem;
  }
  .pg-chisiamo .cs-valori__pola { margin-inline: auto; }

  .pg-passati .sp-scheda__grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────────
   BLOG — il modulo "spunto" (2026-09-01)
   Micaela ha scelto: nessun invio dal sito, si apre la posta della persona.
   Il contatore non e' un vezzo: oltre ~1500 caratteri alcuni browser e
   client tagliano il corpo di un mailto SENZA dire niente. Superata la
   soglia il modulo smette di aprire la posta e manda su WhatsApp, invece
   di far arrivare a Micaela un racconto a meta'.
   ───────────────────────────────────────────────────────────────── */
.pg-blog .spunto {
  max-width: 760px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--crema);
  border: 1px solid rgba(72, 43, 26, 0.14);
}
.pg-blog .spunto h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  line-height: 1.1;
  color: var(--nero);
  margin-bottom: 0.7rem;
}
.pg-blog .spunto__come {
  color: rgba(72, 43, 26, 0.78);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 1.3rem;
}
.pg-blog .spunto__come strong { color: var(--nero); }
.pg-blog .spunto__label {
  display: block;
  font: 700 0.7rem var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.45rem;
}
.pg-blog .spunto__campo {
  width: 100%;
  font: 400 0.95rem/1.6 var(--font-sans);
  color: var(--nero);
  background: #fff;
  border: 1px solid rgba(72, 43, 26, 0.22);
  border-radius: 0;
  padding: 0.8rem 0.9rem;
  resize: vertical;
}
.pg-blog .spunto__campo:focus {
  outline: 2px solid var(--terracotta);
  outline-offset: 1px;
  border-color: var(--terracotta);
}
.pg-blog .spunto__conta {
  margin-top: 0.45rem;
  font: 500 0.78rem var(--font-sans);
  color: rgba(72, 43, 26, 0.55);
  text-align: right;
}
.pg-blog .spunto__conta.is-oltre { color: var(--mattone); font-weight: 700; }
.pg-blog .spunto__troppo {
  margin-top: 1rem;
  padding: 0.95rem 1.1rem;
  border-left: 3px solid var(--mattone);
  background: rgba(203, 111, 83, 0.1);
}
.pg-blog .spunto__troppo p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(72, 43, 26, 0.85);
  margin-bottom: 0.9rem;
}
.pg-blog .spunto__troppo strong { color: var(--mattone); }
.pg-blog .spunto__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
}
/* Oltre il limite il pulsante resta cliccabile ma si spegne: premendolo
   porta all'avviso invece di aprire una mail che verrebbe tagliata. */
.pg-blog .spunto__azioni .is-spento { opacity: 0.55; }
.pg-blog .spunto__esito {
  margin-top: 0.8rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(72, 43, 26, 0.7);
  min-height: 1.2em;
}
.pg-blog .spunto__esito.is-errore { color: var(--mattone); font-weight: 600; }
.pg-blog .spunto__esito.is-ok { color: var(--salvia-deep); font-weight: 600; }

/* ============================================================
   PRENOTAZIONE A DUE PASSI — giornate a tema (2026-09-02)
   Compare solo quando l'evento ha "professionisti" in eventi.json.
   Passo 1: con chi · Passo 2 (se ci sono fasce): a che ora.
   Un evento normale non vede niente di tutto questo.
   ============================================================ */
.reg-scelta { margin-bottom: 22px; }
.reg-scelta__intro {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--cioccolato, #482B1A);
  margin: 0 0 10px;
}
.reg-scelta__lista { display: grid; gap: 10px; }

.reg-pro {
  display: block; width: 100%; text-align: left;
  border: 1px solid rgba(72, 43, 26, 0.18);
  border-radius: 14px;
  background: var(--crema, #FBF7F1);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.reg-pro:hover:not(.is-pieno) { border-color: var(--terracotta); }
.reg-pro.is-scelto {
  border-color: var(--terracotta);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(203, 111, 83, 0.22);
}
.reg-pro.is-pieno { opacity: .55; cursor: not-allowed; }

.reg-pro__riga { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.reg-pro__nome { font-family: var(--font-serif); font-size: 1.05rem; color: var(--nero); }
.reg-pro__prezzo { font-size: .85rem; font-weight: 600; color: var(--terracotta); white-space: nowrap; }
.reg-pro__ruolo {
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--salvia-deep); margin-top: 2px;
}
.reg-pro__desc { font-size: .86rem; line-height: 1.45; color: rgba(1,1,1,.6); margin: 8px 0 0; }
.reg-pro__meta { font-size: .8rem; color: rgba(1,1,1,.5); margin-top: 8px; }
.reg-pro__meta b { color: var(--salvia-deep); font-weight: 600; }
.reg-pro__meta .is-poco { color: var(--mattone); font-weight: 600; }

.reg-scelta__orari { margin-top: 18px; }
.reg-scelta__fasce { display: flex; flex-wrap: wrap; gap: 8px; }
.reg-fascia {
  border: 1px solid rgba(72, 43, 26, 0.2);
  border-radius: 999px;
  background: var(--crema, #FBF7F1);
  padding: 9px 16px;
  font-size: .9rem; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.reg-fascia:hover:not(:disabled) { border-color: var(--terracotta); }
.reg-fascia.is-scelto { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.reg-fascia:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* Messaggio umano: non deve mai comparire un errore tecnico */
.reg-avviso {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 12px;
  font-size: .86rem; line-height: 1.45;
  background: rgba(203, 111, 83, .08);
  border: 1px solid rgba(203, 111, 83, .25);
  color: var(--cioccolato, #482B1A);
}
.reg-avviso.is-ok { background: rgba(163, 174, 138, .14); border-color: rgba(163, 174, 138, .4); }
.reg-avviso[hidden] { display: none; }

/* Trappola per i bot: invisibile a chi guarda, presente nel DOM.
   Niente display:none — alcuni bot saltano i campi nascosti cosi'. */
.hp-campo {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* -- Icone social nei colori dei marchi ------------------------
   Una sola forma per tre usi: footer, pannello Con-tatto e pulsanti.
   La sagoma fa da maschera e il colore sta sotto: cosi Instagram tiene
   la sua sfumatura, WhatsApp e Facebook il loro colore pieno. Le sagome
   sono le stesse di prima, prese dal footer. */
.ico-social {
  display: inline-block; flex: none;
  width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 0.45em;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.ico-social--wa { background: #25D366; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M12.04%202C6.58%202%202.13%206.45%202.13%2011.91c0%201.75.46%203.45%201.32%204.95L2%2022l5.25-1.38a9.9%209.9%200%200%200%204.79%201.22h.01c5.46%200%209.91-4.45%209.91-9.91%200-2.65-1.03-5.14-2.9-7.01A9.82%209.82%200%200%200%2012.04%202Zm0%201.82c2.16%200%204.19.84%205.72%202.37a8.03%208.03%200%200%201%202.37%205.72c0%204.46-3.63%208.09-8.09%208.09a8.1%208.1%200%200%201-4.13-1.13l-.3-.18-3.12.82.83-3.04-.19-.31a8.05%208.05%200%200%201-1.24-4.34c0-4.46%203.63-8.09%208.15-8.09Zm-2.4%204.14c-.19%200-.5.07-.76.35-.26.29-1%20.98-1%202.38s1.03%202.76%201.17%202.95c.14.19%202.01%203.07%204.87%204.19%202.38.94%202.86.75%203.38.7.51-.05%201.66-.68%201.9-1.33.23-.66.23-1.22.16-1.34-.07-.11-.26-.19-.54-.33-.29-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.29-.72.91-.89%201.1-.16.19-.33.21-.61.07-.29-.14-1.19-.44-2.27-1.4-.84-.75-1.4-1.67-1.57-1.95-.16-.29-.02-.44.13-.58.13-.13.29-.33.43-.5.14-.16.19-.29.29-.48.09-.19.05-.36-.03-.5-.07-.14-.63-1.52-.86-2.08-.23-.55-.46-.48-.63-.48h-.53Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M12.04%202C6.58%202%202.13%206.45%202.13%2011.91c0%201.75.46%203.45%201.32%204.95L2%2022l5.25-1.38a9.9%209.9%200%200%200%204.79%201.22h.01c5.46%200%209.91-4.45%209.91-9.91%200-2.65-1.03-5.14-2.9-7.01A9.82%209.82%200%200%200%2012.04%202Zm0%201.82c2.16%200%204.19.84%205.72%202.37a8.03%208.03%200%200%201%202.37%205.72c0%204.46-3.63%208.09-8.09%208.09a8.1%208.1%200%200%201-4.13-1.13l-.3-.18-3.12.82.83-3.04-.19-.31a8.05%208.05%200%200%201-1.24-4.34c0-4.46%203.63-8.09%208.15-8.09Zm-2.4%204.14c-.19%200-.5.07-.76.35-.26.29-1%20.98-1%202.38s1.03%202.76%201.17%202.95c.14.19%202.01%203.07%204.87%204.19%202.38.94%202.86.75%203.38.7.51-.05%201.66-.68%201.9-1.33.23-.66.23-1.22.16-1.34-.07-.11-.26-.19-.54-.33-.29-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.29-.72.91-.89%201.1-.16.19-.33.21-.61.07-.29-.14-1.19-.44-2.27-1.4-.84-.75-1.4-1.67-1.57-1.95-.16-.29-.02-.44.13-.58.13-.13.29-.33.43-.5.14-.16.19-.29.29-.48.09-.19.05-.36-.03-.5-.07-.14-.63-1.52-.86-2.08-.23-.55-.46-.48-.63-.48h-.53Z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-social--fb { background: #1877F2; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M22%2012.06C22%206.5%2017.52%202%2012%202S2%206.5%202%2012.06c0%205.02%203.66%209.18%208.44%209.94v-7.03H7.9v-2.91h2.54V9.85c0-2.52%201.5-3.91%203.77-3.91%201.09%200%202.24.2%202.24.2v2.46h-1.26c-1.24%200-1.63.78-1.63%201.57v1.89h2.78l-.45%202.91h-2.33V22c4.78-.76%208.44-4.92%208.44-9.94Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M22%2012.06C22%206.5%2017.52%202%2012%202S2%206.5%202%2012.06c0%205.02%203.66%209.18%208.44%209.94v-7.03H7.9v-2.91h2.54V9.85c0-2.52%201.5-3.91%203.77-3.91%201.09%200%202.24.2%202.24.2v2.46h-1.26c-1.24%200-1.63.78-1.63%201.57v1.89h2.78l-.45%202.91h-2.33V22c4.78-.76%208.44-4.92%208.44-9.94Z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-social--ig {
  background: linear-gradient(45deg, #FEDA75 5%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 95%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M12%202.16c3.2%200%203.58.01%204.85.07%201.17.05%201.8.25%202.23.41.56.22.96.48%201.38.9.42.42.68.82.9%201.38.16.42.36%201.06.41%202.23.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.05%201.17-.25%201.8-.41%202.23-.22.56-.48.96-.9%201.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17%2015.58%202.16%2015.2%202.16%2012s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68%201.38-.9.42-.16%201.06-.36%202.23-.41C8.42%202.17%208.8%202.16%2012%202.16Zm0%201.8c-3.14%200-3.51.02-4.75.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69%201.06-.13.32-.28.81-.32%201.71-.05%201.24-.07%201.61-.07%204.75s.02%203.51.07%204.75c.4.9.19%201.39.32%201.71.17.43.37.74.69%201.06.32.32.63.52%201.06.69.32.13.81.28%201.71.32%201.24.05%201.61.07%204.75.07s3.51-.02%204.75-.07c.9-.04%201.39-.19%201.71-.32.43-.17.74-.37%201.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.05-1.24.07-1.61.07-4.75s-.02-3.51-.07-4.75c-.04-.9-.19-1.39-.32-1.71a2.86%202.86%200%200%200-.69-1.06%202.86%202.86%200%200%200-1.06-.69c-.32-.13-.81-.28-1.71-.32-1.24-.05-1.61-.07-4.75-.07Zm0%203.06a4.98%204.98%200%201%201%200%209.96%204.98%204.98%200%200%201%200-9.96Zm0%208.21a3.23%203.23%200%201%200%200-6.46%203.23%203.23%200%200%200%200%206.46Zm6.34-8.41a1.16%201.16%200%201%201-2.32%200%201.16%201.16%200%200%201%202.32%200Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M12%202.16c3.2%200%203.58.01%204.85.07%201.17.05%201.8.25%202.23.41.56.22.96.48%201.38.9.42.42.68.82.9%201.38.16.42.36%201.06.41%202.23.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.05%201.17-.25%201.8-.41%202.23-.22.56-.48.96-.9%201.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17%2015.58%202.16%2015.2%202.16%2012s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68%201.38-.9.42-.16%201.06-.36%202.23-.41C8.42%202.17%208.8%202.16%2012%202.16Zm0%201.8c-3.14%200-3.51.02-4.75.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69%201.06-.13.32-.28.81-.32%201.71-.05%201.24-.07%201.61-.07%204.75s.02%203.51.07%204.75c.4.9.19%201.39.32%201.71.17.43.37.74.69%201.06.32.32.63.52%201.06.69.32.13.81.28%201.71.32%201.24.05%201.61.07%204.75.07s3.51-.02%204.75-.07c.9-.04%201.39-.19%201.71-.32.43-.17.74-.37%201.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.05-1.24.07-1.61.07-4.75s-.02-3.51-.07-4.75c-.04-.9-.19-1.39-.32-1.71a2.86%202.86%200%200%200-.69-1.06%202.86%202.86%200%200%200-1.06-.69c-.32-.13-.81-.28-1.71-.32-1.24-.05-1.61-.07-4.75-.07Zm0%203.06a4.98%204.98%200%201%201%200%209.96%204.98%204.98%200%200%201%200-9.96Zm0%208.21a3.23%203.23%200%201%200%200-6.46%203.23%203.23%200%200%200%200%206.46Zm6.34-8.41a1.16%201.16%200%201%201-2.32%200%201.16%201.16%200%200%201%202.32%200Z%22%2F%3E%3C%2Fsvg%3E");
}
/* Nel footer il tondo resta chiaro anche al passaggio del mouse: sul
   terracotta i colori dei marchi si spegnerebbero. */
.footer__icon .ico-social { width: 19px; height: 19px; margin: 0; }
.footer__icon:hover { background: #fff; border-color: var(--terracotta); }


/* ── LIBRERIA DELLE ESPERIENZE — le fasce della locandina ────
   Micaela (12-09-2026): la libreria non si apre piu' a fisarmonica,
   fa da indice. Riprende la locandina "5 appuntamenti": una fascia
   per esperienza, col suo colore pieno, arrotondata a sinistra e la
   foto che entra da destra. I colori sono presi dalla locandina.
   Il testo e' bianco su tutte tranne Kids: su quel sabbia chiaro il
   bianco non si leggerebbe. */
.exp-fasce {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(0rem, 2vw, 1.5rem);
  display: grid;
  gap: clamp(0.7rem, 1.4vw, 1rem);
}
.exp-fascia {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: clamp(150px, 20vw, 208px);
  background: var(--fascia);
  color: var(--fascia-testo, #fff);
  text-decoration: none;
  border-radius: 999px 0 0 999px;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.exp-fascia:hover { transform: translateX(6px); box-shadow: 0 18px 36px -24px rgba(72, 43, 26, 0.7); }
.exp-fascia__foto {
  position: absolute;
  inset: 0 0 0 38%;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 42%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 42%);
}
.exp-fascia__testo {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.25rem;
  align-content: center;
  min-height: inherit;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1rem, 3vw, 2rem) clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.6rem, 4vw, 3.4rem);
  max-width: 62%;
}
.exp-fascia__giorno {
  font: 700 clamp(0.72rem, 1.3vw, 0.84rem) var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.9;
}
.exp-fascia__nome {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.7vw, 1.75rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-transform: uppercase;
}
/* "Agorà" come sulla locandina: corsivo calligrafico, non maiuscolo */
.exp-fascia__nome em {
  display: block;
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.25em;
  line-height: 0.95;
  text-transform: none;
  letter-spacing: 0;
}
.exp-fascia__quando {
  font: 500 clamp(0.76rem, 1.4vw, 0.9rem) var(--font-sans);
  opacity: 0.92;
}
.exp-fascia__occhiello {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  opacity: 0.92;
  margin-top: 0.35rem;
}
.exp-fascia__desc {
  font: 400 clamp(0.8rem, 1.5vw, 0.92rem) var(--font-sans);
  line-height: 1.5;
  opacity: 0.95;
  max-width: 46ch;
}
.exp-fascia__vai {
  font: 600 clamp(0.76rem, 1.4vw, 0.86rem) var(--font-sans);
  letter-spacing: 0.06em;
  margin-top: 0.5rem;
}
.exp-fascia:hover .exp-fascia__vai { text-decoration: underline; }

/* I cinque colori della locandina */
.exp-fascia--creativo { --fascia: #a58c97; }
.exp-fascia--benessere { --fascia: #7c7e68; }
.exp-fascia--viva { --fascia: #a1684f; }
.exp-fascia--business { --fascia: #657680; }
.exp-fascia--kids { --fascia: #d7bb94; --fascia-testo: var(--nero); }

@media (max-width: 720px) {
  .exp-fascia { border-radius: 0; min-height: 168px; }
  .exp-fascia__testo { max-width: 100%; padding-left: clamp(1.1rem, 5vw, 1.6rem); }
  .exp-fascia__foto {
    inset: 0;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%);
  }
  .exp-fascia__desc { display: none; }
}


/* ─────────────────────────────────────────────────────────────────
   CHI SIAMO — compattazioni chieste da Micaela (12-09-2026)
   1. i tre Valori affiancati, non piu' uno sotto l'altro
   2. Manifesto piu' corto: meno aria, elenco su due colonne
   3. Chiusura piu' corta, cosi' la CTA (ora spostata piu' in alto)
      non finisce fuori dalla vista
   Stanno in fondo al foglio per sovrascrivere le regole di prima:
   per tornare indietro basta togliere questo blocco.
   ───────────────────────────────────────────────────────────────── */

/* 1 · VALORI AFFIANCATI ─────────────────────────────────────*/
.pg-chisiamo .cs-valori { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.pg-chisiamo .cs-valori__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
.pg-chisiamo .cs-valori__item,
.pg-chisiamo .cs-valori__item:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  grid-template-columns: none;
  padding-top: 0;
  border-top: 0;
  align-items: stretch;
}
.pg-chisiamo .cs-valori__item .cs-valori__pola { order: 1; }
.pg-chisiamo .cs-valori__item .cs-valori__text { order: 2; }
.pg-chisiamo .cs-valori__pola,
.pg-chisiamo .cs-valori__item:nth-child(2) .cs-valori__pola { max-width: none; margin: 0; }
/* una inclinazione appena accennata: con tre foto in fila una rotazione
   marcata sembrerebbe un errore di impaginazione */
.pg-chisiamo .cs-valori__item:nth-child(1) .cs-valori__pola { transform: rotate(-1.2deg); }
.pg-chisiamo .cs-valori__item:nth-child(2) .cs-valori__pola { transform: rotate(0.9deg); }
.pg-chisiamo .cs-valori__item:nth-child(3) .cs-valori__pola { transform: rotate(-0.7deg); }
.pg-chisiamo .cs-valori__pola img { aspect-ratio: 4 / 3; }
.pg-chisiamo .cs-valori__pola figcaption { display: none; }  /* il titolo e' gia' sotto */
.pg-chisiamo .cs-valori__title {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  margin-bottom: 0.4rem;
}
.pg-chisiamo .cs-valori__num { font-size: 0.5em; vertical-align: 0.4em; }
.pg-chisiamo .cs-valori__text p { font-size: 0.92rem; line-height: 1.6; max-width: none; }

@media (max-width: 860px) {
  .pg-chisiamo .cs-valori__list { grid-template-columns: 1fr; }
  .pg-chisiamo .cs-valori__item { max-width: 420px; margin-inline: auto; }
}

/* 2 · MANIFESTO PIU' CORTO ──────────────────────────────────*/
.pg-chisiamo .cs-manifesto { padding-block: clamp(2.2rem, 5vw, 3.4rem); }
.pg-chisiamo .cs-manifesto__media img { height: clamp(240px, 32vw, 380px); }
.pg-chisiamo .cs-manifesto__creed { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.pg-chisiamo .manifesto__creed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.4rem, 4vw, 3rem);
  row-gap: 0.4rem;
}
.pg-chisiamo .cs-manifesto__outro { margin-top: clamp(1.2rem, 2.6vw, 1.8rem); }

@media (max-width: 860px) {
  .pg-chisiamo .manifesto__creed { grid-template-columns: 1fr; }
}

/* 3 · CHIUSURA PIU' CORTA ───────────────────────────────────*/
.pg-chisiamo .cs-chiusura { padding-top: clamp(2rem, 4vw, 3rem); }
.pg-chisiamo .cs-chiusura__wall { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.pg-chisiamo .cs-chiusura__wall img { max-height: clamp(220px, 34vw, 420px); object-fit: cover; }


/* ─────────────────────────────────────────────────────────────────
   LO SPAZIO — ritocchi chiesti da Micaela (12-09-2026)
   "Trova un layout piu' accattivante per questa sezione": le tessere
   degli ambienti restano sei, nella stessa griglia (il JS conta le
   colonne per infilare la fascia nella riga giusta: la geometria non
   si tocca), ma diventano verticali, la foto si avvicina al passaggio
   del mouse e l'etichetta e' una pastiglia.
   ───────────────────────────────────────────────────────────────── */
.zone-tile {
  aspect-ratio: 4 / 5;
  background-size: 104%;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, background-size 0.7s var(--ease-out);
}
.zone-tile:hover,
.zone-tile:focus-visible { background-size: 116%; transform: translateY(-5px); }
.zone-tile.is-open { background-size: 116%; }
.zone-tile__tag {
  justify-self: start;
  background: rgba(203, 111, 83, 0.92);
  color: #fff;
  padding: 0.22rem 0.5rem;
  margin-bottom: 0.15rem;
}
.zone-tile__title { font-size: clamp(1.1rem, 2.6vw, 1.5rem); }

@media (max-width: 720px) {
  .zone-tile { aspect-ratio: 1 / 1; }
}

/* la riga discreta sotto i numeri */
.spazio-v2-stats__nota {
  max-width: 1180px;
  margin: clamp(1rem, 2.4vw, 1.6rem) auto 0;
  text-align: center;
  font: 400 0.82rem var(--font-sans);
  color: rgba(72, 43, 26, 0.6);
}


/* ─────────────────────────────────────────────────────────────────
   POLAROID — l'etichetta Ospita / Spazio Agora sotto la foto
   Micaela (12-09-2026): sopra la foto finiva sul logo e sulle scritte
   della locandina. Ora sta nella didascalia, dove non copre niente.
   La pastiglia della polaroid "Siamo in vacanza" resta dov'era: quella
   foto e' un disegno, non ha niente sotto da coprire.
   ───────────────────────────────────────────────────────────────── */
.polaroid figcaption .polaroid__stamp {
  position: static;
  justify-self: center;
  margin-bottom: 0.15rem;
  font-size: 0.74rem;
  padding: 0.2rem 0.6rem;
  backdrop-filter: none;
}

/* Cinque polaroid nello schermo, le altre si raggiungono scorrendo
   (Micaela, 12-09-2026: «si vedono 5 eventi alla volta e poi si scorre»).
   Le colonne sono piu' strette solo qui: sulla pagina Eventi la fila
   resta larga com'era. */
.home-v3 .polaroid-river__track {
  grid-auto-columns: minmax(196px, 232px);
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-inline: clamp(0.8rem, 2.5vw, 1.6rem);
}


/* ─────────────────────────────────────────────────────────────────
   USI (Business / Privato / Attivita') — compatti e orizzontali
   Micaela, 13-09-2026. Prima erano tre colonne di elenchi verticali:
   tredici voci in fila fanno una colonna alta mezza schermata. Ora
   ogni famiglia sta su una riga sola, col titolo a sinistra e le voci
   che corrono in orizzontale e vanno a capo da sole quando finisce
   lo spazio. Da telefono si comportano allo stesso modo.
   ───────────────────────────────────────────────────────────────── */
.uso-gruppi {
  grid-template-columns: 1fr;
  gap: 0.55rem;
  padding-top: 1rem;
}
.uso-gruppo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
}
.uso-gruppo h5 {
  margin-bottom: 0;
  flex: 0 0 auto;
  min-width: 6.5rem;
}
.uso-gruppo .uso-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.55rem;
  flex: 1 1 320px;
}
.uso-gruppo .uso-lista li { margin-top: 0; }

@media (max-width: 720px) {
  .uso-gruppi { gap: 0.9rem; }
  .uso-gruppo { flex-direction: column; gap: 0.25rem; }
}


/* ─────────────────────────────────────────────────────────────────
   FOOTER · ICONE SOCIAL IN NEGATIVO
   Micaela (13-09-2026): "si vedono poco". Ora sono quadrati pieni del
   colore del marchio, col simbolo in bianco dentro, e piu' grandi:
   38px → 46px, simbolo 19px → 25px. Si aggiunge il telefono, perche'
   il numero non deve comparire scritto da nessuna parte.
   ───────────────────────────────────────────────────────────────── */
.footer__socials { gap: 0.55rem; }
.footer__icon {
  width: 46px; height: 46px;
  border: 0;
  background: rgba(248, 243, 239, 0.12);
  transition: transform 0.25s var(--ease-out), filter 0.25s ease;
}
.footer__icon .ico-social {
  width: 25px; height: 25px; margin: 0;
  background: #fff;                 /* il simbolo, in negativo */
}
.footer__icon--wa  { background: #25D366; }
.footer__icon--fb  { background: #1877F2; }
.footer__icon--ig  { background: linear-gradient(45deg, #FEDA75 5%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 95%); }
.footer__icon--tel { background: var(--terracotta); }
.footer__icon:hover,
.footer__icon:focus-visible {
  background: inherit;              /* niente piu' tondo bianco al passaggio */
  transform: translateY(-2px);
  filter: brightness(1.12);
}
.footer__icon--wa:hover  { background: #25D366; }
.footer__icon--fb:hover  { background: #1877F2; }
.footer__icon--ig:hover  { background: linear-gradient(45deg, #FEDA75 5%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 95%); }
.footer__icon--tel:hover { background: var(--terracotta); }

/* il simbolo del telefono, stessa famiglia delle altre icone */
.ico-social--tel {
  background: var(--terracotta);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.62%2010.79a15.05%2015.05%200%200%200%206.59%206.59l2.2-2.2c.27-.27.67-.36%201.02-.24%201.12.37%202.33.57%203.57.57.55%200%201%20.45%201%201V20c0%20.55-.45%201-1%201C10.85%2021%203%2013.15%203%203.5c0-.55.45-1%201-1h3.5c.55%200%201%20.45%201%201%200%201.25.2%202.45.57%203.57.11.35.03.74-.25%201.02l-2.2%202.2Z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.62%2010.79a15.05%2015.05%200%200%200%206.59%206.59l2.2-2.2c.27-.27.67-.36%201.02-.24%201.12.37%202.33.57%203.57.57.55%200%201%20.45%201%201V20c0%20.55-.45%201-1%201C10.85%2021%203%2013.15%203%203.5c0-.55.45-1%201-1h3.5c.55%200%201%20.45%201%201%200%201.25.2%202.45.57%203.57.11.35.03.74-.25%201.02l-2.2%202.2Z%22%2F%3E%3C%2Fsvg%3E");
}


/* I valori: foto piu' piccola, cosi' non schiaccia il testo
   (Micaela, 13-09-2026: "adesso e' sbilanciato foto e testo") */
.pg-chisiamo .cs-valori__pola,
.pg-chisiamo .cs-valori__item:nth-child(2) .cs-valori__pola {
  max-width: 200px;
  margin-inline: 0;
}
.pg-chisiamo .cs-valori__pola img { aspect-ratio: 1 / 1; }
.pg-chisiamo .cs-valori__item { gap: 1.1rem; }


/* "Creiamo le condizioni": via il trattino davanti a ogni riga
   (Micaela, 13-09-2026). Al suo posto la parola "Perché" in terracotta,
   che apre la frase: si legge come una litania, non come un elenco. */
.pg-chisiamo .manifesto__creed li { padding-left: 0; }
.pg-chisiamo .manifesto__creed li::before { content: none; }
.pg-chisiamo .manifesto__creed { gap: 0.7rem; }
.pg-chisiamo .creed__ap {
  color: var(--terracotta);
  font-weight: 400;
}


/* ─────────────────────────────────────────────────────────────────
   BLOG · "Rimani in contatto" — icone grandi, non pulsanti
   Micaela (13-09-2026): Instagram e Facebook diventano due simboli
   grandi coi colori del marchio; resta un pulsante solo, quello che
   porta nella community WhatsApp.
   ───────────────────────────────────────────────────────────────── */
.community-azioni {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 1.4rem;
}
.community-icone { display: flex; align-items: center; gap: clamp(0.9rem, 2.5vw, 1.4rem); }
.community-icona {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; text-decoration: none;
  transition: transform 0.3s var(--ease-out);
}
.community-icona .ico-social { width: 46px; height: 46px; margin: 0; }
.community-icona:hover { transform: translateY(-3px) scale(1.06); }


/* ─────────────────────────────────────────────────────────────────
   BLOG · LINEE GUIDA IN UNA FINESTRELLA
   Micaela (13-09-2026): in pagina occupavano troppo spazio e si
   aprivano una per volta. Ora si apre una finestrella sola e si
   leggono tutte e cinque insieme.
   ───────────────────────────────────────────────────────────────── */
.mondi__azioni { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

.linee-modal {
  position: fixed; inset: 0; z-index: 120;
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.linee-modal.open { display: flex; }
.linee-modal__overlay { position: absolute; inset: 0; background: rgba(40, 22, 12, 0.55); }
.linee-modal__sheet {
  position: relative; z-index: 1;
  width: min(680px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--crema); color: var(--nero);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  box-shadow: 0 40px 80px -30px rgba(40, 22, 12, 0.7);
}
.linee-modal__close {
  position: absolute; top: 0.5rem; right: 0.7rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: rgba(72, 43, 26, 0.55);
}
.linee-modal__close:hover { color: var(--terracotta); }
.linee-modal__sheet h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.1; margin: 0.2rem 0 0.3rem;
}
.linee-modal__lead { color: rgba(72, 43, 26, 0.7); margin-bottom: 1.2rem; }
.linee-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.linee-lista li {
  display: grid; grid-template-columns: 2rem 1fr; gap: 0.2rem 0.7rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid rgba(72, 43, 26, 0.14);
}
.linee-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.linee-lista__num {
  grid-row: span 2;
  font: 700 1.1rem var(--font-sans); color: var(--terracotta);
}
.linee-lista strong { font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; }
.linee-lista span:not(.linee-lista__num) { font-size: 0.92rem; line-height: 1.55; color: rgba(72, 43, 26, 0.78); }
.linee-modal__azione { margin-top: 1.4rem; text-align: center; }

/* Fasce delle esperienze un po' piu' basse: cinque da 266px facevano
   due schermate intere (Micaela, 13-09-2026) */
.exp-fascia { min-height: clamp(132px, 16vw, 196px); }

/* "Rimani in contatto" senza le quattro foto: il testo prende tutta la
   larghezza invece di restare in mezza colonna (Micaela, 13-09-2026) */
.social-proof-strip { display: block; }
.social-proof-strip__copy { max-width: 760px; margin-inline: auto; text-align: center; }
.social-proof-strip .community-azioni { justify-content: center; }


/* ── Aggiunte del 14-09-2026 (Marco): ringraziamenti, crediti, mappa parcheggio ── */
.proof-hero__grazie { display: inline-block; margin-top: 1.1rem; font-size: 0.9rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.82); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.proof-hero__grazie:hover, .proof-hero__grazie:focus-visible { color: #fff; border-color: #fff; }
.proof-hero--breve { min-height: 42vh; }
.grazie-lista { max-width: 720px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); }
.grazie-lista__coda { margin-top: 1.8rem !important; text-align: center; font-size: 0.86rem !important; color: rgba(72, 43, 26, 0.55) !important; }
.footer__crediti { margin-top: 0.35rem; font-size: 0.78rem; color: rgba(72, 43, 26, 0.55); }
.footer__crediti a { color: inherit; text-decoration: underline; text-decoration-color: rgba(72, 43, 26, 0.25); text-underline-offset: 3px; }
.footer__crediti a:hover { text-decoration-color: currentColor; }
.utility__media--mappa { display: block; overflow: hidden; }
.utility__media--mappa img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.utility__media--mappa:hover img { transform: scale(1.03); }
.utility__body p a { color: var(--terracotta, #CB6F53); text-decoration: underline; text-underline-offset: 3px; }


/* ═══════════════════════════════════════════════════════════════════
   AGGIUNTE DEL 15-09-2026 (Marco + Micaela)
   1. Le bande delle Esperienze (home e pagina Eventi)
   2. La polaroid "vetrina" — la locandina che contiene tutte le altre
   3. Il footer: blocco CraftByMarco leggibile
   4. La pagina Ringraziamenti
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · LE BANDE DELLE ESPERIENZE ──────────────────────────────────
   Sono la stessa forma delle locandine #OPEN: una pastiglia colorata
   con la foto che entra da destra in dissolvenza, e dentro "Agorà" in
   corsivo sopra il nome dell'Esperienza.
   I colori NON sono inventati: sono campionati dai pixel di
   images/locandina-open-settembre.jpg, così la grafica del sito e
   quella dei volantini sono lo stesso oggetto.
   Sulla banda sabbia (Kids) il testo è cioccolato e non bianco: il
   bianco su quel colore sta a 1,7:1 e su uno schermo non si legge. */
.esp-banda {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: clamp(76px, 9.5vw, 104px);
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--banda-colore, var(--polvere));
  color: var(--banda-testo, #fff);
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.esp-banda:hover,
.esp-banda:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -18px rgba(72, 43, 26, 0.55);
}
.esp-banda__foto {
  position: absolute;
  inset: 0 0 0 40%;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%);
  mask-image: linear-gradient(to right, transparent 0, #000 40%);
}
.esp-banda__nome {
  position: relative;
  z-index: 1;
  flex: 0 0 46%;
  display: grid;
  justify-items: center;
  text-align: center;
  line-height: 1;
}
.esp-banda__nome em {
  font-family: 'Pinyon Script', var(--font-serif), serif;
  font-style: normal;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  line-height: 1;
  margin-bottom: .1rem;
}
.esp-banda__nome strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.92rem, 2vw, 1.22rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.15;
}

.esp-banda--benessere { --banda-colore: #7E806A; }
.esp-banda--viva      { --banda-colore: #A06551; }
.esp-banda--business  { --banda-colore: #66737B; }
.esp-banda--kids      { --banda-colore: #DABC96; --banda-testo: #3E2415; }
.esp-banda--creativo  { --banda-colore: #9C8590; }

/* Home: solo la grafica e una riga di rimando (decisione di Micaela). */
.esperienze-bande { padding: clamp(2.5rem, 6vw, 4.25rem) clamp(1rem, 4vw, 3rem); }
.esperienze-bande__head {
  max-width: 720px;
  margin: 0 auto clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
}
.esp-bande {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: clamp(0.7rem, 1.6vw, 1rem);
}
/* Pagina Eventi: la libreria per esteso (Marco, 15/09: «nella pagina
   eventi voglio il layout che c'era prima nella home, questo è troppo
   riduttivo — quello riduttivo va bene solo per la home page»).
   La fascia ricca `.exp-fascia` (già nel CSS, era la sezione 4 della
   home fino al 15/09) qui fa da testa della fisarmonica: premendola si
   aprono sotto gli appuntamenti di quella Esperienza. Le regole sotto
   servono solo a disinnescare lo stile di `.mondo-item__head`, che
   nasceva come riga bianca con foto e titolo. */
.v2 .mondi-acc--fasce .mondi-acc__list {
  max-width: 1180px;
  gap: clamp(0.7rem, 1.4vw, 1rem);
}
.v2 .mondi-acc--fasce .mondo-item {
  background: transparent;
  border: 0;
  overflow: visible;
}
.v2 .mondi-acc--fasce .mondo-item.open {
  background: transparent;
  box-shadow: none;
}
.v2 .mondi-acc--fasce .mondo-item__head {
  display: block;
  padding: 0;
  gap: 0;
  text-align: left;
  border: 0;
  /* `.v2 .mondo-item__head` ha `background: none` e vince su `.exp-fascia`
     per specificità: senza queste due righe la fascia resta trasparente. */
  background: var(--fascia);
  color: var(--fascia-testo, #fff);
}
/* il testo della fascia è dentro un <button>: i figli non ereditano
   font e colore da soli in tutti i browser */
.v2 .mondi-acc--fasce .mondo-item__head .exp-fascia__testo {
  color: inherit;
}
.exp-fascia__chev {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 3vw, 2rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(248, 243, 239, 0.92);
  color: var(--nero);
  font-size: 1.15rem;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform .3s ease;
}
.mondo-item.open .exp-fascia__chev { transform: translateY(-50%) rotate(180deg); }
.mondo-item.open .exp-fascia__vai { text-decoration: underline; }
.v2 .mondi-acc--fasce .mondo-item__inner {
  padding: 1.1rem clamp(0.6rem, 2vw, 1.4rem) 0.4rem;
}

/* Il testo della fascia: centrato dentro la parte piena di colore, non
   allineato a sinistra e sbordante sulla foto (Marco, 15/09: «voglio che
   le scritte siano più centrate»). La foto entra dal 38%, quindi il
   blocco di testo si ferma prima e sta tutto sul colore. Le descrizioni
   sono state accorciate a una riga per lo stesso motivo. */
.v2 .mondi-acc--fasce .exp-fascia__testo {
  max-width: 40%;
  padding-left: clamp(1.2rem, 2.5vw, 2.2rem);
  padding-right: clamp(1.2rem, 2.5vw, 2.2rem);
  text-align: center;
  justify-items: center;
}
.v2 .mondi-acc--fasce .exp-fascia__desc { max-width: 34ch; }

@media (max-width: 720px) {
  /* da telefono la foto sta sotto a tutto il testo: il blocco può
     prendersi la larghezza intera, restando centrato */
  .v2 .mondi-acc--fasce .exp-fascia__testo { max-width: 100%; }
}

@media (max-width: 560px) {
  .esp-banda { min-height: 68px; padding: 0.5rem 0.7rem; }
  .esp-banda__nome { flex-basis: 52%; }
  .exp-fascia__chev { width: 28px; height: 28px; right: 0.8rem; }
}

/* ── 2 · LA POLAROID VETRINA ────────────────────────────────────────
   Fino al 15/09 la locandina di apertura era larga due colonne e senza
   didascalia. Dal 16/09 è una polaroid come tutte le altre (Marco:
   «tutti gli eventi devono avere SEMPRE le stesse dimensioni») e si
   distingue solo per il posto: la prima della fila. Le regole che le
   davano la misura doppia sono state tolte — se un giorno si volesse
   di nuovo una card di apertura più grande, va rifatta qui. */

/* ── 3 · FOOTER — il blocco CraftByMarco ────────────────────────────
   Prima la riga dei crediti era cioccolato su cioccolato (testo
   rgba(72,43,26,.55) sul fondo --nero): illeggibile. Ora è un blocco
   con logo, nome e i due link, in crema sul fondo scuro. Via anche
   "Foto: Nadia Pushko ph", che resta sulla pagina Ringraziamenti. */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 2rem;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(248, 243, 239, 0.1);
}
.footer__bottom .footer__legal {
  margin: 0;
  font-size: 0.76rem;
  color: rgba(248, 243, 239, 0.58);
}
.footer__cbm {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.footer__cbm-logo { flex: 0 0 auto; display: block; line-height: 0; }
.footer__cbm-logo img { width: 46px; height: 46px; display: block; }
.footer__cbm-testo { display: grid; gap: 0.12rem; }
.footer__cbm-occhiello {
  /* 0.7rem = 11.2px: sotto gli 11px un'etichetta maiuscola spaziata
     non si legge sugli schermi ad alta densità */
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 243, 239, 0.6);
}
.footer__bottom .footer__cbm-nome {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--crema);
  text-decoration: none;
}
.footer__bottom .footer__cbm-nome:hover,
.footer__bottom .footer__cbm-nome:focus-visible { color: var(--terracotta); }
.footer__cbm-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(248, 243, 239, 0.45);
}
.footer__bottom .footer__cbm-links a {
  display: inline;
  color: rgba(248, 243, 239, 0.78);
  text-decoration: underline;
  text-decoration-color: rgba(248, 243, 239, 0.32);
  text-underline-offset: 3px;
}
.footer__bottom .footer__cbm-links a:hover,
.footer__bottom .footer__cbm-links a:focus-visible {
  color: var(--terracotta);
  text-decoration-color: currentColor;
}
@media (max-width: 640px) {
  .footer__bottom { justify-content: flex-start; }
}

/* ── 4 · RINGRAZIAMENTI — due schede invece di due riquadri in colonna */
.grazie-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
.grazie-card {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  /* bianco e non crema: la pagina È crema, una scheda crema su fondo
     crema non si vede (era il difetto della versione vecchia) */
  background: #fff;
  border: 1px solid rgba(72, 43, 26, 0.1);
}
.grazie-card__ruolo {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta, #CB6F53);
}
.grazie-card h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 1.6rem);
  margin: 0;
  line-height: 1.2;
}
.grazie-card h2 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(72, 43, 26, 0.25);
}
.grazie-card h2 a:hover { border-color: currentColor; }
.grazie-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(72, 43, 26, 0.8);
}
.grazie-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: rgba(72, 43, 26, 0.45);
}
.grazie-card__links a {
  color: rgba(72, 43, 26, 0.75);
  text-decoration: underline;
  text-decoration-color: rgba(72, 43, 26, 0.28);
  text-underline-offset: 3px;
}
.grazie-card__links a:hover { color: var(--terracotta); text-decoration-color: currentColor; }
.grazie-lista { max-width: 860px; }


/* Scheda "Prenotazione" degli eventi che si iscrivono fuori dal sito
   (le giornate #OPEN → modulo Google). La linguetta c'è come per tutti
   gli altri: dentro, al posto del modulo, la riga e il pulsante. */
.reg-esterna {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  padding: clamp(0.5rem, 2vw, 1.2rem) 0 0.4rem;
}
.reg-esterna__testo {
  margin: 0;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(72, 43, 26, 0.8);
}
.reg-esterna__cta { width: 100%; justify-content: center; }


/* ═══════════════════════════════════════════════════════════════════
   LA FILA DEGLI EVENTI — 16-09-2026 (Marco)
   Card tutte uguali, la vetrina in testa, una linea prima delle
   giornate #OPEN. Prima di oggi ogni card era alta quanto il suo testo:
   una data su due righe o un titolo lungo spostavano in giù la
   didascalia e il pulsante, e nella stessa fila i "Prenota" stavano a
   quote diverse. Ora la scatola della didascalia ha un'altezza fissa e
   il pulsante è ancorato in fondo: qualunque sia il testo, la card ha
   la stessa forma.
   ═══════════════════════════════════════════════════════════════════ */

/* La fila passa da griglia a flex. Con la griglia ogni figlio riceveva
   una colonna intera della stessa misura — il filetto separatore
   avrebbe sprecato la larghezza di una card. In flex la card ha una
   larghezza fissa e il filetto prende solo lo spazio che gli serve. */
.polaroid-river__track {
  --card-larghezza: min(268px, 78vw);
  --didascalia-altezza: 8.4rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}
.home-v3 .polaroid-river__track { --card-larghezza: min(232px, 76vw); }

.polaroid-river__track > .pinned {
  flex: 0 0 var(--card-larghezza);
  width: var(--card-larghezza);
  display: flex;
  flex-direction: column;
}
/* Il pulsante: stessa misura per tutti. Le etichette non sono lunghe
   uguale ("Prenota →" contro "Prenota il tuo appuntamento →"): chi va a
   capo faceva un pulsante alto il doppio e spostava tutto quello che
   aveva sopra. Ora la scatola tiene due righe sempre, e il testo ci sta
   dentro centrato. */
.polaroid-river__track > .pinned > .polaroid__book {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  text-align: center;
}

/* il foglio si allunga fino al pulsante: così i "Prenota" di tutta la
   fila restano allineati anche se una card avesse un testo in più */
.polaroid-river__track > .pinned > .polaroid { flex: 1 1 auto; }

/* La scatola della didascalia: altezza fissa, contenuto centrato.
   Data su una riga o su due, titolo su una o due — l'ingombro non
   cambia e la foto di ogni card parte e finisce alla stessa quota. */
.polaroid-river__track .polaroid figcaption {
  min-height: var(--didascalia-altezza);
  align-content: center;
  /* senza questo i figli si stirano per riempire la scatola: il testo
     resta alto una riga ma il suo blocco no, e la misura delle righe
     (righeDi in events.js) leggerebbe la scatola invece del testo */
  align-items: center;
}
/* Il tetto delle due righe. Chi sfora viene rimpicciolito da
   adattaTesti() in events.js: qui si dichiara solo il limite, e
   l'overflow nascosto serve a quella misura (scrollHeight/clientHeight). */
.polaroid-river__track .polaroid__date {
  line-height: 1.35;
  max-height: 2.7em;
  overflow: hidden;
}
.polaroid-river__track .polaroid figcaption strong {
  display: block;
  line-height: 1.22;
  max-height: 2.44em;
  overflow: hidden;
}

/* ── La linea che stacca le giornate #OPEN ──────────────────────────
   Un filetto verticale in terracotta che nasce e muore nel fondo scuro:
   la stessa sfumatura dei filetti già usati sul sito. Niente scritte —
   «basta una linea» (Marco, 16/09). */
.polaroid-sep {
  flex: 0 0 clamp(26px, 4.5vw, 54px);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.polaroid-sep__linea {
  /* 2px e non 1: a un pixel, in terracotta smorzata sul fondo espresso,
     la linea spariva sugli schermi non retina */
  width: 2px;
  height: min(72%, 320px);
  background: linear-gradient(
    to bottom,
    rgba(203, 111, 83, 0) 0%,
    rgba(203, 111, 83, 0.62) 22%,
    rgba(203, 111, 83, 0.62) 78%,
    rgba(203, 111, 83, 0) 100%
  );
}

/* ── La polaroid "Nessun evento per il momento" ─────────────────────
   Stessa cornice e stessa misura delle altre, con un disegno al posto
   della foto: si vede solo quando in calendario non è rimasto niente.
   Non è cliccabile e non ha "Prenota" — come quella della vacanza. */
.polaroid--vuoto { cursor: default; }
.polaroid--vuoto:hover { transform: rotate(-1.4deg); box-shadow: 0 18px 34px -18px rgba(60, 40, 30, 0.45); }
.pinned:nth-child(even) .polaroid--vuoto:hover { transform: rotate(1.4deg); }
.polaroid-vuoto__media {
  display: grid; place-items: center;
  background: linear-gradient(168deg, var(--sabbia) 0%, #efe4d8 100%);
}
.polaroid-vuoto__art { width: 70%; height: auto; }
.polaroid__stamp--vuoto { background: rgba(203, 111, 83, 0.92); z-index: 1; }
.polaroid-vuoto__note {
  margin-top: 0.9rem; font-size: 0.78rem; line-height: 1.5;
  color: rgba(72, 43, 26, 0.62);
}
.polaroid-river .polaroid-vuoto__note,
.events-polaroids .polaroid-vuoto__note { color: rgba(248, 243, 239, 0.66); }


/* ── RINGRAZIAMENTI · le mani e il cuore (16-09-2026) ───────────────
   L'elenco di persone che Micaela ha mandato il 16/09. Non è una lista
   puntata incolonnata — sarebbe una rubrica: i nomi corrono in riga e
   vanno a capo da soli, separati da un punto terracotta, come un muro
   di firme. In Fraunces corsivo, lo stesso corsivo dei titoli delle
   polaroid. */
.grazie-mani {
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  padding-top: clamp(1.8rem, 4vw, 2.6rem);
  border-top: 1px solid rgba(72, 43, 26, 0.14);
  text-align: center;
}
.grazie-mani__titolo { margin-bottom: 0.4rem; }
.grazie-mani__intro {
  max-width: 46ch;
  margin: 0 auto clamp(1.4rem, 3vw, 2rem);
  color: rgba(72, 43, 26, 0.72);
}
.grazie-nomi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.2rem 0.55rem;
}
.grazie-nomi li {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.12rem, 2.6vw, 1.36rem);
  line-height: 1.5;
  color: var(--nero);
}
/* Il punto sta DOPO il nome, non prima del successivo: attaccato al
   nome che lo precede non può mai andare a capo da solo e ritrovarsi
   appeso a inizio riga. */
.grazie-nomi li:not(:last-child)::after {
  content: '·';
  margin-left: 0.5rem;
  color: var(--terracotta);
  opacity: 0.7;
}