/* Custom styles aggiunti a mano (fuori dall'export Webflow).
   Non verrà sovrascritto da un futuro re-export da Webflow: qui vanno
   tutte le modifiche manuali, vedi CLAUDE.md. */

/* Spazio della barra di scorrimento sempre riservato: quando la pagina passa
   da "scorre" a "non scorre" (es. filtro categorie in projects.html) il layout
   non si sposta più di lato. Su macOS/mobile le barre sono sovrapposte e non
   cambia nulla. */
html {
  scrollbar-gutter: stable;
}

/* Mosaico immagine "Mettiamo le competenze..." (home-chi-siamo): griglia 8x5
   di caselle bianche (.home-white-box) e trasparenti (.home-color-box, dove si
   vede l'immagine). Raggio 8px, regole calcolate vertice per vertice (il bordo
   esterno della griglia conta come bianco):
   - angolo SPORGENTE dell'immagine (1 casella immagine su 4 attorno al
     vertice): classico angolo tondo dell'immagine, disegnato con un piccolo
     tappo bianco (radial-gradient) nell'angolo della casella trasparente;
   - angolo RIENTRANTE (3 immagine + 1 bianca) o incrocio a scacchiera:
     si arrotonda l'angolo della casella bianca.
   Scoping via l'id univoco Webflow del contenitore (il secondo mosaico,
   "Risolviamo la complessità", ha le sue regole più sotto). */
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(3) { border-radius: 0 0 8px 0; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(6) { border-radius: 0 0 0 8px; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(9) { border-radius: 0 0 8px 0; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(12) { border-radius: 8px 0 0 8px; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(13) { border-radius: 0 8px 8px 0; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(16) { border-radius: 0 0 0 8px; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(18) { border-radius: 8px 0 0 8px; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(19) { border-radius: 0 8px 8px 0; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(22) { border-radius: 8px 0 0 8px; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(23) { border-radius: 0 8px 8px 0; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(25) { border-radius: 0 8px 0 0; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(28) { border-radius: 8px 0 0 8px; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(29) { border-radius: 0 8px 8px 0; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(32) { border-radius: 8px 0 0 0; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(35) { border-radius: 0 8px 0 0; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-white-box:nth-child(38) { border-radius: 8px 0 0 0; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box:nth-child(4)::before { background: radial-gradient(circle at 100% 100%, transparent 7.5px, var(--white) 8px) left top / 8px 8px no-repeat; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box:nth-child(5)::before { background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--white) 8px) right top / 8px 8px no-repeat; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box:nth-child(10)::before { background: radial-gradient(circle at 100% 100%, transparent 7.5px, var(--white) 8px) left top / 8px 8px no-repeat; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box:nth-child(15)::before { background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--white) 8px) right top / 8px 8px no-repeat; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box:nth-child(17)::before { background: radial-gradient(circle at 100% 100%, transparent 7.5px, var(--white) 8px) left top / 8px 8px no-repeat, radial-gradient(circle at 100% 0, transparent 7.5px, var(--white) 8px) left bottom / 8px 8px no-repeat; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box:nth-child(24)::before { background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--white) 8px) right top / 8px 8px no-repeat, radial-gradient(circle at 0 0, transparent 7.5px, var(--white) 8px) right bottom / 8px 8px no-repeat; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box:nth-child(26)::before { background: radial-gradient(circle at 100% 0, transparent 7.5px, var(--white) 8px) left bottom / 8px 8px no-repeat; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box:nth-child(31)::before { background: radial-gradient(circle at 0 0, transparent 7.5px, var(--white) 8px) right bottom / 8px 8px no-repeat; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box:nth-child(36)::before { background: radial-gradient(circle at 100% 0, transparent 7.5px, var(--white) 8px) left bottom / 8px 8px no-repeat; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box:nth-child(37)::before { background: radial-gradient(circle at 0 0, transparent 7.5px, var(--white) 8px) right bottom / 8px 8px no-repeat; }

/* All'hover (animazione Webflow su .image-shape-container) le caselle
   bianche svaniscono in ~0,4s: i tappi d'angolo sono su ::before, così
   svaniscono insieme a loro, e resta l'immagine intera con i soli 4 angoli
   esterni arrotondati. */
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box { position: relative; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box::before { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 0.4s ease; }
.image-shape-container:hover > #w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 > .home-color-box::before { opacity: 0; }
#w-node-_4f246626-819a-0685-a45b-e11794393b90-421ade00 + .home-image-background { border-radius: 8px; }

/* Stesso smusso per il mosaico "Risolviamo la complessità..." (secondo
   home-chi-siamo, disposizione delle caselle diversa): regole generate con lo
   stesso metodo vertice per vertice, stesso comportamento all'hover. */
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-white-box:nth-child(4) { border-radius: 0 0 0 8px; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-white-box:nth-child(10) { border-radius: 0 8px 8px 0; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-white-box:nth-child(13) { border-radius: 0 0 8px 8px; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-white-box:nth-child(15) { border-radius: 8px 0 0 8px; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-white-box:nth-child(19) { border-radius: 8px 8px 8px 8px; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-white-box:nth-child(22) { border-radius: 8px 8px 8px 8px; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-white-box:nth-child(26) { border-radius: 0 8px 8px 0; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-white-box:nth-child(28) { border-radius: 8px 8px 0 0; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-white-box:nth-child(31) { border-radius: 8px 0 0 8px; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-white-box:nth-child(37) { border-radius: 0 8px 0 0; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(2)::before { background: radial-gradient(circle at 100% 100%, transparent 7.5px, var(--white) 8px) left top / 8px 8px no-repeat, radial-gradient(circle at 100% 0, transparent 7.5px, var(--white) 8px) left bottom / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(3)::before { background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--white) 8px) right top / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(6)::before { background: radial-gradient(circle at 100% 100%, transparent 7.5px, var(--white) 8px) left top / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(7)::before { background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--white) 8px) right top / 8px 8px no-repeat, radial-gradient(circle at 0 0, transparent 7.5px, var(--white) 8px) right bottom / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(12)::before { background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--white) 8px) right top / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(17)::before { background: radial-gradient(circle at 100% 100%, transparent 7.5px, var(--white) 8px) left top / 8px 8px no-repeat, radial-gradient(circle at 100% 0, transparent 7.5px, var(--white) 8px) left bottom / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(24)::before { background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--white) 8px) right top / 8px 8px no-repeat, radial-gradient(circle at 0 0, transparent 7.5px, var(--white) 8px) right bottom / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(29)::before { background: radial-gradient(circle at 100% 0, transparent 7.5px, var(--white) 8px) left bottom / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(34)::before { background: radial-gradient(circle at 100% 100%, transparent 7.5px, var(--white) 8px) left top / 8px 8px no-repeat, radial-gradient(circle at 100% 0, transparent 7.5px, var(--white) 8px) left bottom / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(35)::before { background: radial-gradient(circle at 0 0, transparent 7.5px, var(--white) 8px) right bottom / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(38)::before { background: radial-gradient(circle at 100% 0, transparent 7.5px, var(--white) 8px) left bottom / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box:nth-child(39)::before { background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--white) 8px) right top / 8px 8px no-repeat, radial-gradient(circle at 0 0, transparent 7.5px, var(--white) 8px) right bottom / 8px 8px no-repeat; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box { position: relative; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box::before { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 0.4s ease; }
.image-shape-container:hover > #w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 > .home-color-box::before { opacity: 0; }
#w-node-_69999f56-b050-d7f1-666c-2b67e62818a5-421ade00 + .home-image-background { border-radius: 8px; }


/* Effetto vetro sui bottoni "Scopri di più" — il 3° tentativo (bordo
   bicolore + riflesso a bolla) è stato scartato dall'utente: "sembra tondo
   e gonfio" e copriva il bordino blu originale. In attesa di una nuova
   reference (più organica ma piatta, secondo l'utente), teniamo solo il
   fix di bug reale — vedi sotto — senza aggiungere stile 3D/glossy.

   Bug vero trovato controllando gli stili calcolati nel browser:
   .button-home-logo (il cerchio) nel CSS Webflow condiviso ha
   `background-size: 0` (residuo di un'icona placeholder mai usata):
   qualunque nostro background-image lì sopra viene renderizzato a
   dimensione zero, cioè invisibile al 100%. Va sovrascritto
   esplicitamente, altrimenti qualunque futuro stile sul cerchio non si
   vedrebbe MAI, indipendentemente da quanto sia sottile/organico. */
.button-home-div {
  box-shadow: 0 2px 8px rgba(70, 80, 105, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.button-home-logo {
  background-image: none;
  box-shadow: 0 2px 6px rgba(70, 80, 105, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.button-home-logo:hover {
  background-color: #8b7e8f;
}

.home-live-section {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.home-live-div-to-centre {
  max-width: var(--2200);
  width: 95vw;
  min-height: 75vh;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 64px 0;
  background-color: var(--_colors---light-grey);
  /* "Sezione hotel": video loop fornito dall'utente come sfondo
     (hotel-section-bg.webm — v3, dopo che la prima versione era stata
     scartata dall'utente perché sbagliata). Solo sorgente webm: niente mp4 di
     fallback stavolta (non fornito, e tenere la vecchia versione mp4
     "sbagliata" come fallback sarebbe peggio che non averne uno). Sui
     browser senza supporto webm (Safari più datati) si vede direttamente
     questo background-image statico (hotel-section-bg.png, la stessa
     immagine da cui è generato il video) — nessuna animazione ma
     comunque coerente. Stesso ruolo di fallback anche mentre il video
     carica, per evitare un flash di colore pieno. Il velo chiaro
     (::before sotto) sta SOPRA al video, non qui, perché deve coprire
     anche i fotogrammi del video, non solo questa immagine statica. */
  background-image: url("hotel-section-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}

.home-live-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.home-live-div-to-centre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(246, 247, 248, 0.82) 0%, rgba(238, 240, 242, 0.8) 55%, rgba(232, 234, 237, 0.82) 100%);
}

.home-live-div-to-centre > .home-live-title,
.home-live-div-to-centre > .ion-pill-nav,
.home-live-div-to-centre > .home-live-content {
  position: relative;
  z-index: 2;
}

/* Titolo della section (stesso stile di "ION Culture and Heritage",
   .title-big, ma in blu ION). */
.home-live-title {
  margin: 0 0 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 38px;
  font-weight: 200;
  line-height: 110%;
  color: var(--_colors---blue-primary);
  /* su due righe, allineato a sinistra (il contenitore centra i figli),
     staccato dal bordo della cornice arrotondata */
  align-self: stretch;
  text-align: left;
  padding: 0 48px;
}
.home-live-title-accent {
  color: var(--_colors---blue-accent-dark);
}
.spacer-25 {
  height: 25px;
}

.home-live-content {
  display: flex;
  align-items: center;
  justify-content: center;
  /* più spazio tra pallini e testo: i due blocchi restano centrati, quindi
     si allontanano in modo simmetrico (pallini a sinistra, testo a destra) */
  gap: clamp(48px, 7vw, 120px);
  flex-wrap: wrap;
}

.home-live-rings {
  width: min(88vw, 860px);
  /* viewBox dell'SVG ritagliato a 800x700 (tolte 50 unità sopra e sotto,
     dove non arrivano mai i pallini): meno margine vuoto intorno. */
  aspect-ratio: 8 / 7;
}

/* Testo descrittivo a fianco dello schema, stile editoriale/magazine
   (rif. utente): eyebrow rosso + indice, riga divisoria, titolo serif
   bold, sottotitolo rosso in corsivo sottolineato, corpo serif corsivo
   grigio. Contenuto cambia in automatico con la pill attiva, vedi
   PILLS[].caption in custom.js. Nessun webfont serif è caricato sul
   sito: si usa un fallback di sistema (Georgia). Rosso come nel
   riferimento fornito dall'utente — da confermare se va allineato ai
   colori ION invece. */
.home-live-caption {
  max-width: 330px;
  text-align: left;
  /* I 4 testi (uno per pill) hanno lunghezze diverse. Vogliamo DUE cose
     insieme: 1) il blocco testo centrato verticalmente col blocco cerchi
     (align-items:center sul genitore .home-live-content, default — niente
     override qui), 2) ma senza che cambi altezza "salti"/ricentri il testo
     ad ogni cambio pill. Si ottiene dando al box un'altezza fissa
     (min-height, calcolata in JS su tutte e 4 le varianti — vedi
     measureMaxCaptionHeight() in custom.js): il testo parte sempre dallo
     stesso bordo superiore DEL BOX, e il box stesso — sempre alto uguale —
     viene centrato una volta sola rispetto ai cerchi, non ricalcolato ad
     ogni cambio contenuto. */
  transition: opacity 0.22s ease;
}

.home-live-caption-eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.home-live-caption-tag {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--_colors---contrast);
}

.home-live-caption-index {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--_colors---dark-grey);
  opacity: 0.6;
  white-space: nowrap;
}

.home-live-caption-rule {
  border: none;
  border-top: 1px solid rgba(7, 15, 117, 0.18);
  margin: 0 0 14px;
}

.home-live-caption-headline {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  line-height: 1.28;
  color: var(--_colors---blue-primary);
  margin: 0 0 10px;
}

.home-live-caption-dash {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-style: italic;
  font-size: 17px;
  text-decoration: underline;
  color: var(--_colors---contrast);
  margin: 0 0 12px;
}

.home-live-caption-body {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--_colors---dark-grey);
  margin: 0;
}

.home-live-rings svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ion-cat-node {
  transform-box: fill-box;
  transform-origin: 0px 0px;
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease;
}

.ion-cat-node circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: r 1.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s ease;
}

/* Leggero ingrandimento al passaggio del mouse sul singolo pallino
   categoria. Sullo scale sulla `circle` (non sul gruppo `.ion-cat-node`,
   che ha già una `transform` inline impostata da JS per il posizionamento
   — un `:hover` in CSS sulla stessa proprietà lì perderebbe sempre contro
   lo style inline). Il pause dell'auto-avanzamento della pill mentre si è
   in hover è gestito in JS, vedi buildCategoryNodes() in custom.js. */
.ion-cat-node circle:hover {
  transform: scale(1.12);
}

.ion-cat-node text,
.ion-cat-node tspan {
  transition: x 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ion-cat-code {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: var(--_colors---dark-grey);
  pointer-events: none;
}

/* Sigla dentro il pallino (es. FI = Fondi di investimento). */
.ion-cat-abbr {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  fill: var(--_colors---blue-primary);
  pointer-events: none;
}
.ion-cat-label {
  font-family: "DM Sans", sans-serif;
  font-size: 16.5px;
  fill: var(--_colors---blue-primary);
  pointer-events: none;
}

.ion-pill-nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 3px rgba(163, 177, 198, 0.35),
    0 10px 22px rgba(7, 15, 117, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ion-pill-nav.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ion-pill-highlight {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  border-right: 1px solid rgba(163, 177, 198, 0.45);
  border-bottom: 1px solid rgba(163, 177, 198, 0.55);
  box-shadow:
    0 4px 10px rgba(70, 80, 105, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), width 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.ion-pill-highlight::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 4%;
  right: 4%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.ion-pill-item {
  position: relative;
  z-index: 1;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: "DM Sans", sans-serif;
  font-size: 15.5px;
  font-weight: 300;
  color: rgba(7, 15, 117, 0.4);
  background-color: transparent;
  cursor: pointer;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.ion-pill-item.is-active {
  color: var(--_colors---blue-primary);
  font-weight: 500;
}

/* Lente d'ingrandimento sulla card "ION Culture and Heritage", vedi
   custom.js per la logica e per il bug di z-index/hit-testing scoperto
   su .home-matrice-section che ci ha costretto a non usare un semplice
   ":hover"/cursor scoping sull'elemento: il cursore nativo va nascosto
   sul <body> (classe aggiunta via JS solo mentre dentro l'area), non
   sulla card, perché quest'ultima non riceve mai eventi/hover reali. */
body.ion-matrice-hover {
  cursor: none;
}

.ion-matrice-lens {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 10px 26px rgba(1, 2, 20, 0.4),
    inset 0 0 0 1px rgba(7, 15, 117, 0.15);
  background-repeat: no-repeat;
  background-color: #d9d9d9;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 999;
}

/* Mobile: la pill-nav ha border-radius:999px per stare su una riga sola;
   su schermi stretti le 4 tipologie non ci stanno e andrebbero a capo,
   deformando la pillola in uno "stadio" enorme e illeggibile (visto su
   iPhone 13 emulato). Invece di andare a capo, la facciamo scorrere in
   orizzontale come una lista di chip — pattern standard su mobile.
   Breakpoint allineati a quelli Webflow del sito (767/479px). */
@media screen and (max-width: 767px) {
  .home-live-div-to-centre {
    padding: 28px 16px 36px;
    min-height: auto;
    gap: 12px;
  }

  .home-live-title {
    font-size: 26px;
    margin: 0 0 2px;
    padding: 0 8px; /* + i 16px del contenitore su mobile */
  }

  .ion-pill-nav {
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ion-pill-nav::-webkit-scrollbar {
    display: none;
  }

  .ion-pill-item {
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 13px;
    padding: 8px 14px;
    /* Webflow dà 28px di line-height ereditato: teneva la pill alta anche
       con font e padding ridotti */
    line-height: 1.2;
  }

  /* testo più piccolo su mobile (su desktop i font sono stati ingranditi) */
  .home-live-caption-tag,
  .home-live-caption-index {
    font-size: 10px;
  }
  .home-live-caption-headline {
    font-size: 17px;
  }
  .home-live-caption-dash {
    font-size: 13px;
  }
  .home-live-caption-body {
    font-size: 12px;
  }

  .home-live-content {
    gap: 4px;
  }

  .home-live-caption-eyebrow {
    margin-bottom: 6px;
  }
  .home-live-caption-rule {
    margin: 0 0 8px;
  }
  .home-live-caption-headline {
    margin-bottom: 6px;
  }
  .home-live-caption-dash {
    margin-bottom: 8px;
  }

  .home-live-caption {
    max-width: 420px;
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .home-live-rings {
    width: 88vw;
  }

  /* Pill-nav troppo grande su mobile piccolo (segnalato dall'utente): il
     comportamento (scroll orizzontale) era corretto, era solo una
     questione di dimensioni — rimpicciolita ulteriormente qui. */
  .ion-pill-nav {
    padding: 4px;
    gap: 2px;
  }

  /* l'evidenziatore segue il padding della nav (su desktop è 8px) */
  .ion-pill-highlight {
    top: 4px;
    bottom: 4px;
  }

  .ion-pill-item {
    font-size: 11.5px;
    padding: 6px 11px;
  }

  .home-live-title {
    font-size: 22px;
  }
  .home-live-caption-headline {
    font-size: 15.5px;
  }
  .home-live-caption-dash {
    font-size: 12px;
  }
  .home-live-caption-body {
    font-size: 11.5px;
  }
}
.project-preview-placeholder{background:#b8bec8!important;display:flex;width:100%;aspect-ratio:16/9;align-items:center;justify-content:center;color:#667080;font:400 12px 'Roboto Mono',monospace;letter-spacing:.08em;text-transform:uppercase}.project-preview-placeholder span{position:relative;z-index:2}

/* Menu: la voce della pagina corrente è in grassetto come ITA/ENG attivo
   (.lang-active usa font-weight 400, le voci normali 200). Webflow marca già
   il link corrente con .w--current. Nelle pagine dei singoli progetti il
   link "Progetti" ha la classe manuale .ion-menu-current (w--current non si
   può usare: lo script Webflow lo toglie dai link che non puntano alla
   pagina aperta). */
.text-menu-block.w--current .text-menu-item,
.text-menu-block.ion-menu-current .text-menu-item,
.text-contatti-block.w--current .text-menu-item {
  font-weight: 400;
}
/* ...e con il loghino azzurro a sinistra, che di norma compare solo in hover
   (animazione Webflow che scrive opacity inline: serve !important). */
.text-menu-block.w--current .logo-text-header,
.text-menu-block.ion-menu-current .logo-text-header {
  opacity: 1 !important;
}

/* Grafico animato (section interlocutori): immagine del progetto di
   riferimento dentro il cerchio blu, in dissolvenza al cambio tab. */
.ion-main-image {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.ion-main-image.is-active {
  opacity: 1;
}
/* immagine precedente: resta piena sotto la nuova finché questa non è
   opaca, così non si vede mai il blu del cerchio (vedi applyMainImage). */
.ion-main-image.is-under {
  opacity: 1;
  transition: none;
}

/* Gallery finale delle pagine hotel 2026: con molte immagini le card Webflow
   si restringerebbero fino a diventare minuscole. Qui ne restano visibili 5
   per riga e le altre si scorrono in orizzontale (su mobile valgono le
   larghezze fisse di Webflow per .lightbox-link). */
.hotel-gallery .collection-item-footer-images {
  flex: 0 0 calc((100% - 12px) / 5);
}
.hotel-gallery .lightbox-link,
.hotel-gallery .image-17 {
  width: 100%;
}
@media screen and (max-width: 991px) {
  .hotel-gallery .collection-item-footer-images { flex: 0 0 auto; }
  .hotel-gallery .lightbox-link { width: 300px; }
}
@media screen and (max-width: 479px) {
  .hotel-gallery .lightbox-link { width: 250px; }
}

/* Bottone "← Progetti" in cima alle pagine progetto: stesso stile del
   bottone "Scopri di più" della home (pill + cerchio con freccia pixel),
   con il cerchio a sinistra e la freccia rivolta indietro. Largo quanto la
   griglia del progetto, così parte dal bordo sinistro dell'immagine. */
.project-back {
  width: var(--95vw);
  max-width: var(--2200);
  margin-bottom: 20px;
}
.project-back .button-home.home-section {
  font-size: 16px;
  padding: 4px 16px 4px 12px;
}
.project-back .button-home-logo {
  width: 30px;
  height: 30px;
}
.project-back .freccia-svg-color-1 {
  width: 16px;
}
.project-back svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Chi siamo: menu laterale delle sezioni (vedi chi-siamo-menu.js).
   Nell'export ha z-index: -1 e resta sotto al contenuto, quindi non riceve i clic. */
.chisiamo-left-menu {
  z-index: 1;
}
.chisiamo-link-menu.is-active .chisiamo-menu {
  font-weight: 700;
}

/* Mobile: tasti "Scopri di più" della home un po' più piccoli (stesse
   misure del tasto indietro delle pagine progetto). */
@media screen and (max-width: 767px) {
  .button-home-section:not(.project-back) .button-home.home-section {
    font-size: 16px;
    padding: 4px 16px;
  }
  .button-home-section:not(.project-back) .button-home-logo {
    width: 30px;
    height: 30px;
  }
  .button-home-section:not(.project-back) .freccia-svg-color-1 {
    width: 16px;
  }
}