/* Sara Cossu - Custom Styles
   Add all modifications here instead of editing webflow.css */

/* Font titoli: Italiana (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');

/* ============================================================
   ESSERCI PSICOLOGIA — Brand Palette Override
   Colori estratti dagli asset ufficiali (Asset/LOGO.svg,
   Asset/logo-2.svg, Asset/Logo-esteso-*.svg, Logo-Definitivo.pdf)

   Brand:
   - Lavanda (primario)..... #7f68c1
   - Viola scuro............ #544279 (derivato dal brand book)
   - Crema.................. #fff0ff
   - Bianco panna........... #fefcf4
   - Rosa pallido........... #f9e4f7 (dal brand book)
   ============================================================ */

:root {
  /* Tipografia: titoli in Italiana */
  --_🔠-typography---font--heading-serif: 'Italiana', 'Libre Caslon Condensed', serif;

  /* Sfondi */
  --_🎨-color---background--🎨-moon-dust: #e7e1f5;      /* era #d7cbbf — sfondo principale, ora lavanda chiaro */
  --_🎨-color---background--🥛-lotus-milk: #fefcf4;     /* era #f3eee9 — bianco panna brand */
  --_🎨-color---background--🪨-warm-sand: #fff0ff;      /* era #e9e1d9 — crema brand */
  --_🎨-color---background--🌸-white-flower: #fefcf4;   /* era #faf8f5 */
  --_🎨-color---background--🌰-cacao-root: #544279;     /* era #594a3c — sezioni scure, ora viola scuro */

  /* Neutri */
  --_🎨-color---neutral--dark-100: #544279;             /* era #594a3c — testi scuri */
  --_🎨-color---neutral--light-100: #fefcf4;            /* era #f3eee9 — testi/elementi chiari */

  /* Accenti */
  --_🎨-color---accent--🌑-solar-shadow: #7f68c1;       /* era #8a9570 — bottoni/CTA, ora lavanda primario */
  --_🎨-color---accent--☀️-solar-core: #f9e4f7;         /* era #e6f6ba — highlight, ora rosa pallido */
  --_🎨-color---accent--🌞-solar-ember: #7f68c1;        /* era #7b6a58 — accento, ora lavanda */

  /* Livelli classi (pastelli armonizzati) */
  --_🎨-color---accent--🧘🏻-beginner-level: #e8f3ec;    /* invariato nel tono, verde pallido */
  --_🎨-color---accent--🧘🏻-intermediate-level: #ece5f9;/* lavanda pallido */
  --_🎨-color---accent--🧘🏻-advanced-level: #fff0ff;    /* rosa brand */
}

/* ============================================================
   Navbar
   ============================================================ */

.navbar, .nav-bg {
  background-color: #FAF8F2;
}

/* ============================================================
   Loghi brand
   ============================================================ */

/* Navbar: logo esteso (Asset/Logo-esteso-1.svg, ora in images/Logo.svg) */
.brand-nav {
  width: 120px;
}

/* Footer: logo esteso panna (images/logo-footer.svg, ora in images/Logo-Light.svg) */
.brand-footer {
  width: 130px;
}

/* Hero: animazione Lottie (Asset/lottie/), ferma al centro */
.hero-lottie {
  width: 180px;
  margin: auto;
}

/* Hero: titolo centrato, su una riga (news in evidenza rimossa) */
.home-hero-bottom {
  justify-content: center;
}

.heading-home-hero {
  max-width: none;
  text-align: center;
}

.heading-home-hero h1 {
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  /* su mobile lascia andare a capo, il nowrap sbroderebbe */
  .heading-home-hero h1 {
    white-space: normal;
  }
}

/* ============================================================
   Pagina Servizi — hero centrato + griglia 3 colonne
   ============================================================ */

.servizi-hero {
  text-align: center;
  margin-bottom: 64px;
}

.servizi-heading-centered {
  justify-content: center;
}

.servizi-subtitle {
  max-width: 600px;
  margin: 0 auto;
}

.servizi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Tablet: 2 sopra + 1 sotto allargata */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .servizi-grid {
    grid-template-columns: 1fr 1fr;
  }
  .servizi-grid .card-class:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* Mobile: una sotto l'altra */
@media screen and (max-width: 767px) {
  .servizi-grid {
    grid-template-columns: 1fr;
  }
}

/* Video hover sulle card servizi */
.video-card-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

/* Eye overlay sopra il video */
.overlay-cms-image.classes {
  z-index: 2;
}

/* Card servizi: il testo descrittivo ha white-space:pre-wrap dal template,
   il che rende visibili gli spazi/newline del sorgente HTML come rientro.
   Forziamo normal per allinearlo al titolo e al bottone. */
.expandable-card-bottom .text-light-88 {
  white-space: normal;
  padding-bottom: 16px;
}

/* Sezione Età evolutiva: overlay viola scuro sul video */
.overlay-events-bg {
  background-color: rgb(84 66 121 / 37%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Card servizi: il testo maiuscolo del bottone ha un letter-spacing che
   lascia uno spazio dopo l'ultima lettera, sbilanciando il testo verso
   sinistra rispetto al bottone centrato. Compenso con un padding-left
   pari al letter-spacing per ricentrare la scritta "Scopri". */
.button-wrap-expandable-card .button-text {
  padding-left: var(--_🔠-typography---letter-spacing--button-2);
}

/* Card servizi: il bottone "ghost" (testo e bordo crema su sfondo
   trasparente) sparisce sui fotogrammi chiari del video. Aggiungo uno
   sfondo scuro semitrasparente a riposo, così "Scopri" e il bordo
   restano leggibili su qualsiasi fotogramma. Mantengo l'effetto hover
   originale (riempimento solar-shadow) con una regola piu' specifica,
   perche' site.css carica dopo webflow.css. */
.button-wrap-expandable-card .button-bg {
  background-color: var(--_🎨-color---neutral--dark-64);
  /* Override radius--full (100vw → cerchio): lo portiamo a 24px come
     gli altri bottoni del sito, così il bottone risulta allungato/pill
     invece di circolare quando il testo è corto. */
  border-radius: var(--_🔘-radius---radius--button);
}
.button-wrap-expandable-card .button-bg:hover {
  background-color: var(--_🎨-color---accent--🌑-solar-shadow);
}
/* Altezza fissa e padding orizzontale generoso per ottenere un bottone
   allungato e basso (pill). La maschera interna ha height:auto = 80px,
   ma le lettere GSAP sono centrate visivamente a +32px dalla cima della
   maschera = centrate nell'altezza del bottone con height:40px. */
.button-wrap-expandable-card .cta-small {
  padding: 0 36px;
  height: 40px;
  border-radius: var(--_🔘-radius---radius--button);
}

/* Card servizi: Webflow/GSAP SplitText spezza "Scopri" in lettere
   inline-block. Dentro la maschera alta 16px (overflow:hidden) le lettere
   finiscono sotto la finestra visibile e vengono tagliate -> bottone vuoto
   (verificato: lettera a y=1403, maschera 1371-1387). Tolgo il clip della
   maschera, tengo il testo su una riga e forzo le lettere visibili. */
.button-wrap-expandable-card .button-text-mask {
  /* Le lettere GSAP si posizionano ~32px sotto la cima della maschera.
     Con height:auto la maschera è 80px (contiene le lettere → visibili).
     Con height:16px le lettere escono fuori dal bottone visivamente.
     Teniamo auto (80px) e controlliamo l'altezza visiva del bottone
     direttamente su .cta-small con height esplicito. */
  height: auto !important;
  overflow: visible !important;
}
.button-wrap-expandable-card .button-text {
  white-space: nowrap !important;
  text-shadow: none !important;
}
.button-wrap-expandable-card .button-text [class*="gsap_split"] {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  visibility: visible !important;
}

/* ============================================================
   Pagine dettaglio (servizi/* e classes/*) — Hero
   ------------------------------------------------------------
   Il template applica al video dell'hero `mix-blend-mode: color-burn`,
   pensato per la palette calda/terrosa originale. Con la nuova palette
   lavanda quel blend produce un wash magenta-viola saturo e sgradevole,
   e il testo scuro risulta poco leggibile sopra il video chiaro.

   Sostituiamo il blend con un trattamento morbido e un velo crema→lavanda
   che unifica i colori e dà contrasto al testo, restando in tono col brand.
   ============================================================ */

/* Video hero: niente color-burn, immagine naturale ma calma */
.hero-class-section .video-hero-class,
.hero-class-section .video-hero-class video {
  mix-blend-mode: normal !important;
}
.hero-class-section .video-hero-class {
  filter: saturate(0.82) brightness(1.05) contrast(0.97);
}

/* Overlay: da semplice sfumatura in basso a velo a tutta altezza.
   Crema morbida in alto (per navbar e tag), trasparente al centro
   sull'immagine, lavanda piena in basso per "sedere" la card autore
   e raccordare la sezione successiva. */
.hero-class-section .overlay-hero-class {
  inset: 0 !important;
  height: 100% !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(254, 252, 244, 0.42) 0%,
      rgba(254, 252, 244, 0.12) 16%,
      rgba(249, 228, 247, 0) 34%,
      rgba(231, 225, 245, 0.16) 50%,
      rgba(231, 225, 245, 0.62) 74%,
      rgba(231, 225, 245, 0.96) 100%
    ),
    /* velo lavanda uniforme: raffredda il video caldo e lo porta nel brand */
    linear-gradient(
      0deg,
      rgba(127, 104, 193, 0.16),
      rgba(127, 104, 193, 0.16)
    ) !important;
}

/* Vignettatura morbida per dare profondità e tenere lo sguardo al centro */
.hero-class-section {
  position: relative;
}
.hero-class-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    120% 85% at 50% 38%,
    rgba(84, 66, 121, 0) 55%,
    rgba(84, 66, 121, 0.14) 100%
  );
}

/* ============================================================
   Pagine dettaglio servizi — Hero editoriale (modello "evento")
   ------------------------------------------------------------
   Riusa le classi del template evento (.hero-event-section,
   .image-wrap-event-hero, .overlay-event-hero, .body-event,
   .image-wrap-event-thumbnail) ma con DUE video: uno sfocato e
   scurito dietro al titolo, e uno nitido in primo piano (al posto
   dell'immagine grande). Colori del brand attuale.
   ============================================================ */

/* Video sfocato di sfondo dietro al titolo */
.hero-event-section .eh-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-event-section .eh-hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* leggera desaturazione per restare nel mondo lavanda del brand */
  filter: saturate(0.85);
}

/* Velo brand sopra il video sfocato: il backdrop-filter dell'overlay
   sfoca già il video, noi aggiungiamo la tinta viola e profondità. */
.hero-event-section .overlay-event-hero {
  background-color: rgba(50, 38, 78, 0.42) !important;
  background-image: linear-gradient(
    180deg,
    rgba(84, 66, 121, 0.28) 0%,
    rgba(84, 66, 121, 0.40) 60%,
    rgba(84, 66, 121, 0.58) 100%
  ) !important;
}

/* Video nitido in primo piano (sostituisce l'immagine grande) */
.image-wrap-event-thumbnail .eh-fg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Sezione Testimonial (slider) sulle pagine dettaglio
   ============================================================ */

/* Le card devono stare sopra il video di sfondo */
.testimonal-slider-section .main-container {
  position: relative;
  z-index: 2;
}

/* Linea divisoria dentro la card testimonial */
.testimonal-slider-section .divider-testimonial {
  background-color: rgba(84, 66, 121, 0.18);
}

/* Carousel (testimonial + percorso) pilotati da testimonials-carousel.js */
.eh-tslide-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.testimonal-slider-section .slide-testimonial {
  vertical-align: top;
}
.slider-button {
  cursor: pointer;
}

/* ============================================================
   "Inizia il percorso" — la griglia .classes-cta-thirds è a 3
   colonne, ma le pagine servizi hanno solo 2 card → restava una
   colonna vuota a destra. Su desktop, quando le card sono 2, le
   rendiamo a 2 colonne uguali. (tablet/mobile già gestiti da Webflow,
   e le griglie a 3 card non vengono toccate grazie a :has).
   ============================================================ */
@media screen and (min-width: 992px) {
  .classes-cta-thirds:has(> .card-classes-cta:nth-child(2):last-child) {
    grid-template-columns: 1fr 1fr;
  }
}

/* Nota: la voce "Journal" è stata rimossa direttamente dall'HTML
   (menu e footer di tutte le pagine), quindi non serve più nasconderla via CSS. */

/* Pagina Contatti — link email/telefono/instagram */
.contact-item .contact-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.contact-item .contact-link:hover {
  color: var(--_🎨-color---accent--🌑-solar-shadow);
  text-decoration: underline;
}

/* ============================================================
   Pagina "Chi siamo" (about.html) — ritocchi
   ============================================================ */

/* Hero: video più scuro per far risaltare/leggere meglio il titolo */
.hero-about-section .video-about video {
  filter: brightness(0.58) saturate(0.92);
}

/* Nasconde la sezione video con la fondatrice (richiesto) */
.about-founder-video-section {
  display: none !important;
}

/* Polaroid: foto nitide da subito (niente blur iniziale che potrebbe restare) */
.about-photos-section .marquee-photos .card-photo {
  filter: none !important;
}

/* Sezione "Percorso formativo": stesse card del componente "What to expect",
   disposte a flex e centrate (così 7 card non lasciano buchi a destra) e
   sempre visibili (bypassa l'anti-FOUC di .features-grid). */
/* Percorso formativo → carousel con card che mostrano il logo */
/* Rete di sicurezza: la sezione ritaglia l'overflow orizzontale, così le
   card che "sbirciano" oltre la maschera non allungano mai la pagina
   (niente scroll orizzontale né su desktop né su mobile). clip lascia
   l'asse verticale intatto. */
.about-formazione-section {
  overflow-x: clip;
}
.about-formazione-section .mask-formazione {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  /* Desktop: visible per mostrare le card adiacenti che "sbirciano" ai lati
     (com'era prima). */
  overflow: visible;
}
/* Mobile/tablet: ritaglia. Con visible le 7 slide del carosello
   traboccavano in orizzontale rompendo il layout (pagina ~2100px su 375). */
@media screen and (max-width: 991px) {
  .about-formazione-section .mask-formazione {
    overflow: hidden;
  }
}
.about-formazione-section .slide-formazione {
  margin-right: var(--grid--column-gap);
  vertical-align: top;
}
.about-formazione-section .card-formazione {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  padding: 56px 48px;
  min-height: 360px;
  width: 100%;
  border-radius: var(--_🔘-radius---radius--small);
  background-color: var(--_🎨-color---background--🪨-warm-sand);
}
.about-formazione-section .formazione-logo {
  width: 60px;
  height: auto;
  display: block;
}
/* Frecce ben visibili sullo sfondo lavanda */
.about-formazione-section .slider-button {
  background-color: var(--_🎨-color---accent--🌑-solar-shadow);
  border-color: var(--_🎨-color---accent--🌑-solar-shadow);
  color: var(--_🎨-color---neutral--light-100);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Velo brand sul video di sfondo dei testimonial, per leggibilità
   e coerenza cromatica con il resto del sito. */
.testimonal-slider-section .image-wrap-testimonials-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(231, 225, 245, 0.55) 0%,
    rgba(127, 104, 193, 0.34) 45%,
    rgba(84, 66, 121, 0.42) 100%
  );
}

/* ============================================================
   MOBILE — Navbar: logo a sinistra, menu (hamburger) a destra
   ------------------------------------------------------------
   Di default su mobile (≤991px, breakpoint "medium" di Webflow)
   .left-nav contiene [hamburger, logo] affiancati a sinistra.
   Li distanziamo ai due lati della barra: logo a sinistra,
   hamburger a destra.
   ============================================================ */
@media screen and (max-width: 991px) {
  .left-nav {
    flex: 1;                       /* la barra di sinistra occupa tutta la larghezza */
    justify-content: space-between;/* logo e hamburger ai due estremi */
  }
  .brand-nav  { order: 0; }        /* logo per primo  → sinistra */
  .menu-button { order: 1; }       /* hamburger per ultimo → destra */

  /* padding orizzontale simmetrico così i due elementi sono ben ai lati */
  .navbar {
    padding-left: var(--spacing--16);
    padding-right: var(--spacing--16);
  }

  /* Menu aperto: niente pannello chiaro dietro le voci (era #fff0ff) */
  .nav-menu-outer {
    background-color: transparent;
  }
}

/* ============================================================
   MOBILE — Font dei titoli uguale al desktop (Italiana)
   ------------------------------------------------------------
   style.css ridefinisce --font--heading-serif su `body` dentro
   @media max-width:767px (riga ~7373) riportandolo a Libre Caslon
   Condensed. Essendo su `body` (più vicino agli heading di :root),
   su mobile vince sull'override :root di site.css. Lo riportiamo a
   Italiana usando lo stesso selettore `body` e la stessa media query:
   site.css carica dopo style.css, quindi questa regola prevale.
   ============================================================ */
@media screen and (max-width: 767px) {
  body {
    --_🔠-typography---font--heading-serif: 'Italiana', 'Libre Caslon Condensed', serif;
  }
}

/* ============================================================
   FOOTER — Nascondi le immagini fluttuanti decorative
   ------------------------------------------------------------
   Le 6 foto che "fluttuano" attorno alla CTA del footer stanno in
   .master-images-footer. Le nascondiamo e riduciamo il padding del
   contenitore (era 400/360px per far spazio alle foto), così resta
   solo la CTA "Trova il tuo modo di esserci" senza un vuoto enorme.
   ============================================================ */
.master-images-footer {
  display: none !important;
}
.footer-images-wrap {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media screen and (max-width: 767px) {
  .footer-images-wrap {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

/* ============================================================
   AREE (home) e CARD "Consulenza" — tutte su UNA RIGA su desktop,
   CAROSELLO (scorrimento orizzontale con snap) quando si stringe.
   ============================================================ */

/* --- Desktop: una riga --- */
@media screen and (min-width: 992px) {
  /* 5 aree in fila, centrate */
  .about-home-thirds {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing--16);
  }
  .about-home-thirds > .home-about-tile {
    flex: 0 0 auto;
  }

  /* Card Consulenza a tutta larghezza, 4 in fila (niente immagine laterale) */
  .home-column-section .column-halves {
    grid-template-columns: 1fr;
  }
  .home-column-section .image-wrap-column {
    display: none;
  }
  .home-column-section .content-column.limited {
    max-width: none;
  }
  .home-column-section .column-feature-halves {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Frecce del carosello card — stesso stile degli altri caroselli del sito.
   Su desktop niente frecce (le card sono in riga); compaiono solo quando
   diventa carosello (mobile/tablet). */
.cards-carousel-nav {
  display: none;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.cards-carousel-nav .slider-button {
  position: static;
  inset: auto;
  background-color: var(--_🎨-color---accent--🌑-solar-shadow);
  border-color: var(--_🎨-color---accent--🌑-solar-shadow);
  color: var(--_🎨-color---neutral--light-100);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: pointer;
}

/* --- Tablet/mobile --- */
@media screen and (max-width: 991px) {
  /* reti di sicurezza: le sezioni non allargano mai la pagina in orizzontale */
  .about-home-section,
  .home-column-section {
    overflow-x: clip;
  }

  /* AREE: una sotto l'altra (impilate verticalmente), NIENTE carosello */
  .about-home-thirds {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    overflow: visible;
  }
  .about-home-thirds > .home-about-tile {
    flex: none;
    width: auto;
  }

  /* CARD: carosello (scorrimento + snap) con frecce in stile sito */
  .home-column-section .image-wrap-column {
    display: none;
  }
  .home-column-section .column-halves {
    display: block;
  }
  .home-column-section .content-column,
  .home-column-section .content-column.limited {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .home-column-section .column-feature-halves {
    display: flex;
    grid-template-columns: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    scrollbar-width: none;          /* Firefox: nascondi scrollbar */
  }
  .home-column-section .column-feature-halves::-webkit-scrollbar {
    display: none;                  /* WebKit: nascondi scrollbar */
  }
  .home-column-section .column-feature-halves > .card-feature-column {
    flex: 0 0 80%;
    scroll-snap-align: center;
  }
  .cards-carousel-nav {
    display: flex;
  }
}

/* ============================================================
   Home "Servizi" — titolo "Tre aree. Un solo modo di esserci."
   La 2ª riga era in corsivo (<em>); allineata alla 1ª (dritta).
   ============================================================ */
.heading-home-classes h2 em {
  font-style: normal;
}

/* ============================================================
   Footer: nascondi il blocco footer-halves (bottone duplicato +
   link nav) — ridondante con il footer-cta "Trova il tuo modo
   di esserci" + Esplora i servizi. Su tutte le pagine.
   ============================================================ */
.footer-halves {
  display: none !important;
}

/* ============================================================
   Contatti — sezione "Dove siamo": mappa Google + modalità sedute.
   La mappa è un iframe: con Cookiebot in auto-blocking resta
   bloccata fino al consenso, per questo c'è il link di riserva
   "Apri in Google Maps" sempre visibile.
   ============================================================ */
.dove-siamo-section {
  padding-top: 72px;
}
@media screen and (max-width: 767px) {
  .dove-siamo-section {
    padding-top: 48px;
  }
}
.dove-siamo-section .headline-dove-siamo {
  margin-bottom: 16px;
}
.dove-siamo-section .map-wrap {
  border-radius: var(--_🔘-radius---radius--small);
  overflow: hidden;
  height: 440px;
  background-color: var(--_🎨-color---background--🪨-warm-sand);
}
.dove-siamo-section .map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Hero Contatti: avvicina i box contatti al paragrafo introduttivo.
   Il template usava space-between su altezza piena (i box finivano in
   fondo alla hero, ~130px di distanza): li ancoriamo sotto al testo
   con un gap fisso. */
.master-contact {
  justify-content: flex-start;
  grid-row-gap: 56px;
}

/* Riga indirizzo: pin + via a sinistra, link Google Maps a destra */
.dove-siamo-section .address-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dove-siamo-section .address-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dove-siamo-section .address-pin {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--_🎨-color---accent--🌑-solar-shadow);
}
.dove-siamo-section .address-text {
  font-size: 18px;
}
.dove-siamo-section .address-note {
  color: var(--_🎨-color---neutral--dark-100);
  opacity: 0.72;
}
/* "Apri in Google Maps" come bottoncino pill in stile sito */
.dove-siamo-section .map-fallback-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border-radius: var(--_🔘-radius---radius--button);
  background-color: var(--_🎨-color---accent--🌑-solar-shadow);
  color: var(--_🎨-color---neutral--light-100);
  font-family: var(--_🔠-typography---font-family--button-2);
  font-size: var(--_🔠-typography---size--button-2);
  font-weight: var(--_🔠-typography---font-weight--button-2);
  letter-spacing: var(--_🔠-typography---letter-spacing--button-2);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .35s, transform .3s;
}
.dove-siamo-section .map-fallback-link:hover {
  background-color: var(--_🎨-color---neutral--dark-100);
  transform: translateY(-1px);
}
.dove-siamo-section .sedute-note {
  margin-top: 0;
  margin-bottom: 32px;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .dove-siamo-section .map-wrap {
    height: 300px;
  }
}

/* ============================================================
   Chi sono — "Il significato del logo"
   Sezione viola corporate (#7f68c1): testo a sinistra, animazione
   Lottie del logo a destra; sotto, a tutta larghezza, la composizione
   di pag. 5 del brand book (sfondo lavanda + scritta + simbolo).
   Su mobile: testo sopra, animazione sotto; nella composizione la
   scritta sta in alto al centro e il logo in basso.
   ============================================================ */
.logo-meaning-section {
  background-color: #7f68c1;
  color: var(--_🎨-color---neutral--light-100);
  padding-bottom: 0; /* la composizione chiude la sezione a filo */
}
.logo-meaning-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.logo-meaning-text .label-master {
  margin-bottom: 16px;
  width: fit-content; /* chip compatto, non a tutta colonna */
}
.logo-meaning-text h2 {
  color: inherit;
  margin-bottom: 24px;
}
.logo-meaning-text p {
  margin: 0 0 16px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(254, 252, 244, 0.86);
}
.logo-meaning-text p strong {
  color: #fefcf4;
}
.logo-meaning-anim {
  display: flex;
  justify-content: center;
}
#logo-lottie {
  width: min(400px, 100%);
  aspect-ratio: 1 / 1;
}
#logo-lottie svg {
  display: block;
}

/* Composizione full-width (pag. 5 brand book) */
.logo-composition {
  position: relative;
  width: 100%;
  margin-top: 72px;
  aspect-ratio: 1920 / 1081;
  overflow: hidden;
  /* sfondo scuro come la foto: nessuna riga chiara può spuntare ai bordi */
  background-color: #23222e;
}
.logo-composition-bg {
  position: absolute;
  /* -1px: ritaglia la righina bianca ai bordi dell'immagine esportata */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
}
.logo-composition-scritta {
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 30%;
  max-width: 520px;
}
.logo-composition-mark {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 8%;
  max-width: 140px;
}

@media screen and (max-width: 991px) {
  .logo-meaning-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  #logo-lottie {
    width: min(320px, 80%);
  }
}
@media screen and (max-width: 767px) {
  .logo-composition {
    margin-top: 48px;
    aspect-ratio: 3 / 4;
  }
  /* scritta in alto al centro, logo in basso al centro */
  .logo-composition-scritta {
    left: 50%;
    top: 9%;
    transform: translateX(-50%);
    width: 78%;
    max-width: none;
  }
  .logo-composition-mark {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 8%;
    transform: translateX(-50%);
    width: 22%;
    max-width: none;
  }
}