/* ============================================================
   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; }

/* 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);
}
/* Ultima parola: Fraunces corsivo terracotta (font del sito) */
.hero-orb__accent { position: relative; font-style: italic; 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); } }

/* Tre foto in dissolvenza continua (ciclo 12s) */
.hero-orb__photo {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  animation: orb-photo 12s 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; }
@keyframes orb-photo {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  30%  { opacity: 1; }
  37%  { 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; }

/* ============================================================
   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; }

/* ============================================================
   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; }
}

/* "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; }

/* ============================================================
   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;
}

/* ============================================================
   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 { width: min(100%, 300px); }

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