/* ==========================================================================
   Centro Anna Rita Buonincontro — Base (stili globali del sito)
   --------------------------------------------------------------------------
   Questo file è il foglio di stile base di TUTTE le pagine: token, bottoni,
   header, menu, sezioni condivise (righe split, prenota, mappe), footer e
   back-to-top. Ogni pagina aggiunge solo il proprio CSS specifico, caricato
   dopo questo: css/home.css per la Home, css/inner.css + es. css/chi-siamo.css
   per le pagine interne (mappa in inc/setup.php, bic_template_assets()).
   Riferimento design: artboard 1728px (Home.dc.html / ref/Home-1.pdf).
   I valori fluidi usano clamp(min, Xvw, max) dove X = px_design / 17.28,
   così a 1728px di viewport la pagina coincide con il design.
   Schermi larghi (> 2600px): il contenuto resta nel container centrale
   (--container, 2600px) mentre sfondi e fasce colorate restano a
   tutta larghezza. Due modi, secondo il tipo di blocco:
   - blocchi "di contenuto" (righe split, griglie, caroselli):
       max-width: var(--container); margin-inline: auto;
   - blocchi con sfondo a tutta larghezza e testo allineato ai bordi:
       padding/left + var(--bleed)  (--bleed = 0 fino a 2600px, poi
       (larghezza - container) / 2: il contenuto segue il container).

   Indice
   01. Token & reset
   02. Utility (bottoni, dots, titoli, skip-link)
   03. Header (topbar + navbar) & menu mobile
   04. Sfondo dell'Hero (condiviso con l'hero delle pagine interne)
   05. Righe alternate (split)
   06–09. Sezioni della sola Home → css/home.css
   10. Prenota
   11. Mappe
   12. Footer
   13. Back to top
   14. Stato pre-animazione & reduced motion
   ========================================================================== */

/* 01. Token & reset ------------------------------------------------------ */
:root {
  --teal: #019ca5;
  --teal-dark: #017f87;
  --teal-deep: #00646a;
  --mint: #f4feff;
  --mist: #e4f5f6;                       /* sfondo sezioni chiare delle pagine interne */
  --slate: #4f758b;
  --gray-600: #4a5565;
  --ink: #000;
  --ink-2: #1f2937;
  --muted: #6b7280;
  --white: #fff;

  --ff-head: 'Titillium Web', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --gutter: clamp(20px, 4.63vw, 80px);   /* 80px a 1728 */

  /* Container centrale per schermi larghi (2K, 4K, ultra-wide) */
  --container: 2600px;                   /* larghezza massima del contenuto */
  /* Rientro extra oltre il container. Il % si risolve sull'elemento che usa la
     variabile: va usato solo in blocchi larghi quanto la pagina. */
  --bleed: max(0px, (100% - var(--container)) / 2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--white); }
body {
  font-family: var(--ff-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;               /* nessun overflow orizzontale */
}
@supports (overflow: clip) { body { overflow-x: clip; } }
h1, h2, h3, p, ul, li, figure, blockquote, address { margin: 0; padding: 0; font: inherit; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* 02. Utility ------------------------------------------------------------ */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--white); color: var(--teal);
  font-family: var(--ff-head); font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* Bottoni — base comune + micro-interazioni (colore, lift, press) */
.btn {
  position: relative;
  display: flex; width: fit-content; align-items: center; justify-content: center; gap: .35em;
  /* Altezza minima (non fissa) e ritorno a capo: con testi lunghi inseriti dal backend il
     pulsante va su più righe invece di tagliare il testo. Su una riga resta identico al design. */
  min-height: 69px; padding: 12px 28px; max-width: 100%;
  font-family: var(--ff-head); font-weight: 700; font-size: 20px; line-height: 1.15;
  text-transform: uppercase; white-space: normal; text-wrap: balance; text-align: center;
  overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), background-color .35s var(--ease),
              box-shadow .35s var(--ease), transform .35s var(--ease);
  will-change: transform;
}
/* velo che "sale" dal basso all'hover */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .45s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .12s; }
.btn__arrow { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--teal { background: var(--teal); color: var(--white); }
.btn--teal::before { background: var(--teal-deep); }
.btn--teal:hover { box-shadow: 0 12px 28px -12px rgba(1, 156, 165, .7); }

.btn--white { background: var(--white); color: var(--teal); }
.btn--white::before { background: var(--teal); }
.btn--white:hover, .btn--white:focus-visible { color: var(--white); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); }

.btn--glass { background: rgba(255, 255, 255, .9); color: var(--teal); width: 320px; }
.btn--glass::before { background: var(--white); }
.btn--glass:hover { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); }

.btn--wide { width: 483px; }
.btn--mid  { width: 431px; }
.btn--card { width: 320px; }

/* Pallini di paginazione (Swiper) */
.dots { display: flex; gap: 11px; align-items: center; }
.dots .swiper-pagination-bullet {
  width: 12px; height: 12px; margin: 0 !important; border-radius: 50%;
  opacity: 1; background: transparent; box-shadow: inset 0 0 0 1px var(--teal);
  cursor: pointer; transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.dots .swiper-pagination-bullet:hover { transform: scale(1.25); }
.dots .swiper-pagination-bullet-active { background: var(--teal); }
/* neutralizza il posizionamento assoluto di default di Swiper */
.dots.swiper-pagination, .dots.swiper-pagination-horizontal { position: static; width: auto; transform: none; }
.dots--light .swiper-pagination-bullet { box-shadow: inset 0 0 0 1px var(--white); }
.dots--light .swiper-pagination-bullet-active { background: var(--white); }

.section-title {
  font-family: var(--ff-head); font-weight: 700;
  font-size: clamp(36px, 3.7vw, 64px); line-height: 1.125; letter-spacing: -.02em;
  text-align: center; color: var(--teal);
}

/* 03. Header ------------------------------------------------------------- */
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; color: var(--white); }

.topbar {
  height: 44px; padding: 0 calc(73px + var(--bleed)) 0 calc(var(--gutter) + var(--bleed));
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--teal);
  font-family: var(--ff-head); font-weight: 600; font-size: 16px; white-space: nowrap;
}
.topbar__group { display: flex; align-items: center; gap: 25px; }
.topbar__sep { width: 1px; height: 22px; background: var(--white); flex-shrink: 0; }
.topbar__link { display: inline-flex; align-items: center; gap: 12px; transition: opacity .3s; }
.topbar__link:hover { opacity: .8; }
.topbar__social { display: flex; align-items: center; gap: 8px; }
.topbar__social span { margin-right: 0; }
.topbar__social a { display: block; transition: transform .3s var(--ease); }
.topbar__social a:hover { transform: translateY(-2px); }
.topbar__book-label { margin-right: -16px; }
.topbar__book {
  display: flex; align-items: center; justify-content: center;
  width: 100px; height: 28px; box-shadow: inset 0 0 0 1px var(--white);
  transition: background-color .3s var(--ease);
}
.topbar__book:hover { background: rgba(255, 255, 255, .15); }
.topbar__book-logo { width: 73px; height: 12px; background: var(--img) center / contain no-repeat; filter: brightness(0) invert(1); /* logo teal → bianco come nel design */ }

.navbar {
  height: 114px; padding: 0 calc(var(--gutter) + var(--bleed));
  display: flex; align-items: center; gap: 24px;
}
.navbar__logo {
  flex-shrink: 0; width: 180px; height: 40px;
  background: var(--img) center / cover no-repeat;
}
.navbar__nav {
  /* gap = spazio libero / 7 intervalli (59px a 1728, ~27px a 1440): le 8 voci entrano sempre */
  margin-left: auto; display: flex; gap: clamp(20px, calc(12.9vw - 164px), 59px);
  font-family: var(--ff-head); font-weight: 300; font-size: 16px;
  text-transform: uppercase; white-space: nowrap;
}
/* Voci di primo livello (link o pulsante di un sottomenu): underline che si disegna da sinistra */
.navbar__nav > a, .navbar__sub-toggle { position: relative; padding: 6px 0; }
.navbar__nav > a::after, .navbar__sub-toggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.navbar__nav > a:hover::after, .navbar__nav > a:focus-visible::after,
.navbar__sub-toggle:hover::after, .navbar__sub-toggle:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* voce della pagina / sezione corrente: grassetto + sottolineata, come nel design */
.navbar__nav > a[aria-current="page"], .navbar__sub-toggle.is-current,
.mobile-menu__nav > a[aria-current="page"], .mobile-menu__sub-toggle.is-current { font-weight: 700; }
.navbar__nav > a[aria-current="page"]::after, .navbar__sub-toggle.is-current::after { transform: scaleX(1); }

/* Sottomenu (desktop): pulsante "disclosure" + pannello a discesa.
   Si apre al passaggio del mouse, al click e da tastiera (js/home.js, modulo 2b). */
.navbar__item { position: relative; display: flex; }
/* spazio per il chevron (fuori dal flusso) prima della voce successiva: a 1440px il gap è di soli ~22px */
.navbar__item--sub { margin-right: 10px; }
.navbar__sub-toggle { font: inherit; text-transform: inherit; }
/* Chevron fuori dal flusso: non altera le distanze tra le voci del design */
.navbar__chevron {
  position: absolute; top: 50%; right: -13px; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .35s var(--ease), margin-top .35s var(--ease);
}
.navbar__sub-toggle[aria-expanded="true"] .navbar__chevron { transform: rotate(225deg); margin-top: -2px; }

.navbar__sub {
  position: absolute; top: 100%; left: 50%; z-index: 5;
  min-width: 330px; margin-top: 22px; padding: 10px 0;
  background: var(--white); border-top: 4px solid var(--teal);
  box-shadow: 0 22px 44px -16px rgba(0, 40, 44, .45);
  font-family: var(--ff-head); font-weight: 600; font-size: 16px; line-height: 1.3;
  text-transform: none; white-space: normal; text-align: left;
  visibility: hidden; opacity: 0; transform: translate(-50%, 10px);
  transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
/* ponte invisibile tra voce e pannello (il mouse non "cade" nel vuoto) + freccia */
.navbar__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 30px; }
.navbar__sub::after {
  content: ""; position: absolute; left: 50%; bottom: 100%; margin: 0 0 4px -7px;
  border: 7px solid transparent; border-bottom-color: var(--teal); border-top: 0;
}
.navbar__sub-toggle[aria-expanded="true"] + .navbar__sub {
  visibility: visible; opacity: 1; transform: translate(-50%, 0);
  transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s;
}
.navbar__sub a {
  position: relative; display: block; padding: 13px 28px 13px 30px; color: var(--slate);
  transition: color .3s var(--ease), background-color .3s var(--ease), padding-left .35s var(--ease);
}
/* indicatore laterale che cresce all'hover / sulla pagina corrente */
.navbar__sub a::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  background: var(--teal); transform: scaleY(0); transition: transform .35s var(--ease);
}
.navbar__sub a:hover, .navbar__sub a:focus-visible { color: var(--teal); background: var(--mist); padding-left: 36px; }
.navbar__sub a:focus-visible { outline-offset: -2px; }
.navbar__sub a:hover::before, .navbar__sub a:focus-visible::before, .navbar__sub a[aria-current="page"]::before { transform: scaleY(1); }
.navbar__sub a[aria-current="page"] { color: var(--teal); font-weight: 700; }

/* Mega menu "Servizi" (desktop): stesso pannello del sottomenu (bordo teal, ombra,
   freccia, comparsa) esteso alla larghezza del container. Tutte le voci sono visibili:
   - area principale (2/3): Riabilitazione Ambulatoriale e Domiciliare → elenco con icone
     + riquadro "Fisiokinesiterapia" con le terapie su due colonne;
   - colonna laterale (1/3): le altre macro-aree una sotto l'altra, con i sottolivelli. */
.navbar__item--mega { position: static; }                 /* pannello posizionato rispetto all'header */
.navbar__mega {
  position: absolute; top: calc(100% - 22px); left: 50%; z-index: 5;
  width: min(1290px, 100% - 2 * var(--gutter));
  background: var(--white); border-top: 4px solid var(--teal);
  box-shadow: 0 22px 44px -16px rgba(0, 40, 44, .45);
  color: var(--slate); font-family: var(--ff-head); font-weight: 600; font-size: 15px; line-height: 1.3;
  text-transform: none; white-space: normal; text-align: left;
  visibility: hidden; opacity: 0; transform: translate(-50%, 10px);
  transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
/* ponte invisibile verso la voce + freccia allineata al pulsante "Servizi" (--mega-arrow, da JS) */
.navbar__mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 30px; }
.navbar__mega::after {
  content: ""; position: absolute; left: var(--mega-arrow, 50%); bottom: 100%; margin: 0 0 4px -7px;
  border: 7px solid transparent; border-bottom-color: var(--teal); border-top: 0;
}
.navbar__sub-toggle[aria-expanded="true"] + .navbar__mega {
  visibility: visible; opacity: 1; transform: translate(-50%, 0);
  transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s;
}
.mega {
  display: grid; grid-template-columns: 2fr 1fr;
  max-height: calc(100vh - 170px); overflow-y: auto; overscroll-behavior: contain;
}
.mega__col { min-width: 0; padding: 34px 38px 38px; }
.mega__col + .mega__col { border-left: 1px solid rgba(79, 117, 139, .15); }
.mega__group + .mega__group { margin-top: 22px; }

/* Titolo di macro-area (2° livello): linea teal che si disegna all'hover */
.mega__head {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(1, 156, 165, .3);
  font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--slate);
  transition: color .3s var(--ease);
}
.mega__col--side .mega__head { padding-bottom: 10px; font-size: 16px; }
.mega__head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--teal); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.mega__head:hover, .mega__head:focus-visible, .mega__head[aria-current="page"] { color: var(--teal); }
.mega__head:hover::after, .mega__head:focus-visible::after, .mega__head[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.mega__arrow { flex-shrink: 0; font-size: 13px; line-height: 21px; color: var(--teal); transition: transform .35s var(--ease); }
.mega__head:hover .mega__arrow { transform: translateX(4px); }

/* Area principale: elenco dei servizi (sinistra) + riquadro Fisiokinesiterapia (destra) */
.mega__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; align-items: start; margin-top: 14px; }
.mega__list { margin-top: 8px; }
.mega__split .mega__list { margin-top: 0; }

/* Voci (3° livello): stesso hover del sottomenu (fondo mist, rientro, indicatore laterale) */
.mega__link {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 7px 10px; margin-inline: -10px; color: var(--slate);
  transition: color .3s var(--ease), background-color .3s var(--ease), padding-left .35s var(--ease);
}
.mega__link::before, .mega__therapies a::before, .mega__sublist a::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  background: var(--teal); transform: scaleY(0); transition: transform .35s var(--ease);
}
.mega__link:hover, .mega__link:focus-visible { color: var(--teal); background: var(--mist); padding-left: 16px; }
.mega__link:hover::before, .mega__link:focus-visible::before,
.mega__therapies a:hover::before, .mega__therapies a:focus-visible::before,
.mega__sublist a:hover::before, .mega__sublist a:focus-visible::before { transform: scaleY(1); }
.mega__link:focus-visible, .mega__therapies a:focus-visible, .mega__sublist a:focus-visible { outline-offset: -2px; }
.mega__icon { flex-shrink: 0; width: 22px; height: 22px; object-fit: contain; }
.mega__link[aria-current="page"], .mega__therapies a[aria-current="page"], .mega__sublist a[aria-current="page"] { color: var(--teal); font-weight: 700; }

/* Riquadro Fisiokinesiterapia: fondo mist, terapie (4° livello) sempre visibili su due colonne */
.mega__feature { padding: 14px 20px 16px; background: var(--mist); border-left: 3px solid var(--teal); }
.mega__link--feature { font-weight: 700; font-size: 16px; }
.mega__feature .mega__link:hover, .mega__feature .mega__link:focus-visible { background: var(--white); }
.mega__therapies {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(1, 156, 165, .25);
}
.mega__therapies a, .mega__sublist a {
  position: relative; display: block; padding: 6px 10px; margin-inline: -10px;
  font-weight: 400; font-size: 14.5px; line-height: 1.3; color: var(--gray-600);
  transition: color .3s var(--ease), background-color .3s var(--ease), padding-left .35s var(--ease);
}
.mega__therapies a:hover, .mega__therapies a:focus-visible { color: var(--teal); background: var(--white); padding-left: 16px; }

/* Sottolivello RD1 (4° livello): elenco rientrato con filo mist, sempre visibile */
.mega__sublist { margin: 2px 0 2px 10px; padding-left: 14px; border-left: 2px solid var(--mist); }
.mega__sublist a:hover, .mega__sublist a:focus-visible { color: var(--teal); background: var(--mist); padding-left: 16px; }

.navbar__toggle {
  display: none; margin-left: auto; width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px;
}
.navbar__toggle span { display: block; height: 2px; background: var(--white); transition: width .3s var(--ease); }
.navbar__toggle span:nth-child(1) { width: 28px; }
.navbar__toggle span:nth-child(2) { width: 20px; }
.navbar__toggle span:nth-child(3) { width: 28px; }
.navbar__toggle:hover span { width: 28px; }

/* Menu mobile off-canvas */
.mobile-menu { position: fixed; inset: 0; z-index: 60; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(0, 40, 44, .45); backdrop-filter: blur(2px); }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  padding: 96px 32px 40px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 32px;
  background: var(--teal); color: var(--white);
}
.mobile-menu__close { position: absolute; top: 24px; right: 20px; width: 44px; height: 44px; }
.mobile-menu__close span { position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: var(--white); }
.mobile-menu__close span:first-child { transform: rotate(45deg); }
.mobile-menu__close span:last-child { transform: rotate(-45deg); }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__nav > a, .mobile-menu__sub-toggle {
  padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .25);
  font-family: var(--ff-head); font-weight: 300; font-size: 20px; text-transform: uppercase;
  transition: padding-left .35s var(--ease);
}
.mobile-menu__nav > a:hover { padding-left: 8px; }

/* Sottomenu nel drawer: fisarmonica (animata con GSAP, js/home.js modulo 2) */
.mobile-menu__sub-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; }
.mobile-menu__chevron {
  flex-shrink: 0; width: 10px; height: 10px; margin: -6px 6px 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .4s var(--ease), margin .4s var(--ease);
}
.mobile-menu__sub-toggle[aria-expanded="true"] .mobile-menu__chevron { transform: rotate(225deg); margin-top: 4px; }
.mobile-menu__sub { overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 60, 64, .16); }
.mobile-menu__sub[hidden] { display: none; }
.mobile-menu__sub a {
  position: relative; display: block; padding: 14px 12px 14px 32px;
  font-family: var(--ff-head); font-weight: 400; font-size: 17px; line-height: 1.3;
  transition: padding-left .35s var(--ease), background-color .3s var(--ease);
}
.mobile-menu__sub a::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 1px; background: currentColor; }
.mobile-menu__sub a:hover { padding-left: 40px; background: rgba(255, 255, 255, .08); }
.mobile-menu__sub a[aria-current="page"] { font-weight: 700; }
.mobile-menu__sub li + li a { border-top: 1px solid rgba(255, 255, 255, .12); }
/* Fisarmonica multilivello (mega menu "Servizi"): voce con sottolivello = link + pulsante;
   ogni livello è più rientrato e su fondo leggermente più scuro */
.mobile-menu__row { display: flex; align-items: stretch; }
.mobile-menu__row a { flex: 1; min-width: 0; }
.mobile-menu__sub li + li > .mobile-menu__row { border-top: 1px solid rgba(255, 255, 255, .12); }
.mobile-menu__sub li + li > .mobile-menu__row a { border-top: 0; }
.mobile-menu__expand {
  flex-shrink: 0; width: 48px; display: flex; align-items: center; justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, .12); transition: background-color .3s var(--ease);
}
.mobile-menu__expand .mobile-menu__chevron { width: 8px; height: 8px; margin: -4px 0 0; border-width: 1.5px; }
.mobile-menu__expand[aria-expanded="true"] .mobile-menu__chevron { transform: rotate(225deg); margin-top: 4px; }
.mobile-menu__expand:hover, .mobile-menu__expand[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
.mobile-menu__sub--l2, .mobile-menu__sub--l3 { border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 40, 44, .16); }
.mobile-menu__sub--l2 > li:first-child > a, .mobile-menu__sub--l2 > li:first-child > .mobile-menu__row,
.mobile-menu__sub--l3 > li:first-child > a { border-top: 0; }
.mobile-menu__sub--l2 a { padding-left: 48px; font-size: 16px; }
.mobile-menu__sub--l2 a::before { left: 28px; }
.mobile-menu__sub--l2 a:hover { padding-left: 56px; }
.mobile-menu__sub--l3 a { padding-left: 64px; font-size: 15px; }
.mobile-menu__sub--l3 a::before { left: 44px; width: 8px; }
.mobile-menu__sub--l3 a:hover { padding-left: 72px; }
/* Voce di 1° livello che è anche un link (es. "Chi siamo" → ancore della pagina):
   link + pulsante di espansione, con lo stile delle altre voci di 1° livello */
.mobile-menu__row--top { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.mobile-menu__row--top > a {
  padding: 14px 0; font-family: var(--ff-head); font-weight: 300; font-size: 20px; text-transform: uppercase;
  transition: padding-left .35s var(--ease);
}
.mobile-menu__row--top > a:hover { padding-left: 8px; }
.mobile-menu__row--top > a[aria-current="page"], .mobile-menu__row--top > a.is-current { font-weight: 700; }
.mobile-menu__row--top .mobile-menu__expand { justify-content: flex-end; border-left: 0; }
.mobile-menu__row--top .mobile-menu__expand:hover, .mobile-menu__row--top .mobile-menu__expand[aria-expanded="true"] { background: none; }
.mobile-menu__row--top .mobile-menu__expand .mobile-menu__chevron { width: 10px; height: 10px; margin: -6px 6px 0 0; border-width: 2px; }
.mobile-menu__row--top .mobile-menu__expand[aria-expanded="true"] .mobile-menu__chevron { margin-top: 4px; }
.mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; font-family: var(--ff-head); font-weight: 600; }

/* 04. Sfondo dell'Hero --------------------------------------------------- */
/* Usato dalla Home e dall'hero delle pagine interne; il resto dell'Hero è in css/home.css */
.hero__bg { position: absolute; inset: 0; }
.hero__bg-img {
  position: absolute; inset: -8% 0; background: center / cover no-repeat; /* margine per il parallax */
}
.hero__bg-img--flip { transform: scaleX(-1); }

/* 05. Righe alternate ---------------------------------------------------- */
/* Wrapper con l'SVG di sfondo del design (waves-2), in coordinate dell'artboard 1728px:
   nel file sorgente l'SVG è posizionato a livello pagina; qui lo riportiamo relativo
   all'inizio delle righe (y = 900px nel design). */
.splits { position: relative; isolation: isolate; overflow: hidden; }
@supports (overflow: clip) { .splits { overflow: clip; } }
.splits__decor { position: absolute; top: 0; bottom: 0; left: 50%; width: 1728px; margin-left: -864px; z-index: -1; pointer-events: none; }
.splits__waves {
  position: absolute; left: 0; top: 0; width: 8388.2px; height: 3605.1px; max-width: none;
  transform-origin: 0 0; transform: matrix(.706, -.709, .709, .706, -4238, 4525.2);
}
.split {
  display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(520px, 35.59vw, 615px);
  max-width: var(--container); margin-inline: auto;          /* oltre 2600px: righe centrate, onde di sfondo a tutta larghezza */
}
.split__media { position: relative; overflow: hidden; background: #e8eef0; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__body {
  align-self: center;
  padding: 48px 40px 48px clamp(32px, 10.53vw, 182px);   /* 182px dal bordo della metà */
  max-width: calc(500px + clamp(32px, 10.53vw, 182px) + 40px);
}
.split__text { margin-top: 16px; font-weight: 200; font-size: 20px; line-height: 36px; }
.split .btn { margin-top: 40px; }
.split--reverse .split__media { order: 2; }
.split--reverse .split__body { order: 1; }

/* 10. Prenota ------------------------------------------------------------ */
.booking {
  position: relative; overflow: hidden; background: var(--teal); color: var(--white);
  min-height: 732px; padding: 173px 24px 146px;
  display: flex; justify-content: center;
}
.booking__mark {
  position: absolute; top: 0; right: 0; width: 858px; max-width: 100%; height: 733px; opacity: .1; pointer-events: none; /* allineato al bordo destro */
  background: url(../img/brand-mark.webp) 44.669% 5.134% / 421.9% 258.408% no-repeat;
}
.booking__inner { position: relative; max-width: 870px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.booking__logo { width: 393px; max-width: 70vw; height: auto; object-fit: cover; }
.booking__title { margin-top: 40px; font-family: var(--ff-head); font-weight: 700; font-size: clamp(36px, 4.17vw, 72px); line-height: 1; letter-spacing: -.02em; }
.booking__text { margin-top: 32px; font-size: clamp(18px, 1.39vw, 24px); line-height: 1.5; }
.booking .btn { margin-top: 27px; }

/* 11. Mappe -------------------------------------------------------------- */
/* Mappe interattive (Leaflet + OpenStreetMap, inizializzate da js/maps.js).
   La fascia resta a tutta larghezza come uno sfondo; la card della prima sede
   segue il bordo sinistro del container centrale. */
.maps { display: grid; grid-template-columns: 1fr 1fr; height: 475px; background: #eef1f2; }
.maps__item { position: relative; overflow: hidden; isolation: isolate; }
.maps__map { position: absolute; inset: 0; z-index: 0; font-family: var(--ff-body); }
/* Fallback (niente JS / Leaflet non caricato / prima dell'init): screenshot statici del design */
.maps__item--1 .maps__map:not(.leaflet-container) { background: url(../img/map-fallback-1.webp) 50.37% 49.854% / 115.589% 170.188% no-repeat; }
.maps__item--2 .maps__map:not(.leaflet-container) { background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(../img/map-fallback-2.webp) 49.818% 49.898% / 124.79% 183.539% no-repeat; }
.maps__map.leaflet-container { background: #eef1f2; }

/* Card della sede (link alla scheda Google Maps), sopra la mappa */
.maps__card {
  position: absolute; z-index: 1; top: 40px; width: 271px; height: 88px; box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
  background: var(--img) center / cover no-repeat;                /* immagine della card: campo della Sede */
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* 100% = metà pagina: (100% - container/2) equivale a --bleed calcolato sull'intera larghezza */
.maps__card--1 { left: calc(max(0px, 100% - var(--container) / 2) + 36px); }
.maps__card--2 { left: 43px; }
.maps__card:hover, .maps__card:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }

/* Pin, popup e controlli di Leaflet nello stile del sito */
.maps__pin { background: none; border: 0; }
.maps__pin svg { display: block; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0, 60, 64, .35)); transition: transform .35s var(--ease); transform-origin: 50% 100%; }
.maps__pin:hover svg, .maps__pin:focus-visible svg { transform: scale(1.12); }
.maps__popup .leaflet-popup-content-wrapper { border-radius: 0; box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .35); }
.maps__popup .leaflet-popup-content { margin: 16px 20px 16px 18px; font-family: var(--ff-body); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.maps__popup-title { display: block; font-family: var(--ff-head); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--teal); }
.maps__popup-address { display: block; margin-top: 4px; }
.maps .maps__popup-link { display: inline-block; margin-top: 10px; font-family: var(--ff-head); font-weight: 700; text-transform: uppercase; color: var(--teal); }
.maps .maps__popup-link:hover { color: var(--teal-deep); text-decoration: underline; }
.maps .leaflet-bar { border: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
.maps .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; color: var(--teal); transition: background-color .3s var(--ease), color .3s var(--ease); }
.maps .leaflet-bar a:hover { background: var(--teal); color: var(--white); }
.maps .leaflet-control-attribution { font-size: 11px; }

/* 12. Footer ------------------------------------------------------------- */
.footer { background: var(--slate); color: var(--white); }
.footer__inner { width: min(1418px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 59px 0 114px; }
.footer__brand { display: flex; flex-direction: column; align-items: center; padding-bottom: 34px; border-bottom: 1px solid var(--white); }
.footer__brand img { width: 236px; height: 123px; object-fit: cover; }
.footer__brand p { margin-top: 5px; font-weight: 200; font-size: 14px; line-height: 32px; }
.footer__cols {
  display: grid; grid-template-columns: 443fr 403fr 341fr 231fr;
  padding: 75px 0 43px; border-bottom: 1px solid var(--white);
  font-family: var(--ff-head); font-weight: 200; font-size: 20px;
}
.footer__col { display: flex; flex-direction: column; min-width: 0; }
.footer address { font-style: normal; line-height: 20px; max-width: 303px; }
.footer address + address { margin-top: 38px; }
.footer address:first-child { margin-top: 10px; }
.footer address strong { font-weight: 700; }
.footer__col--contacts { gap: 30px; max-width: 236px; overflow-wrap: anywhere; }
.footer__col--links { max-width: 236px; }
.footer__col a { position: relative; width: fit-content; transition: opacity .3s; }
.footer__col a:hover { opacity: .75; }
.footer__partners-row { display: flex; gap: 17px; }
.footer__logo { display: block; background: var(--img) center / 100% 100% no-repeat; }   /* dimensioni e margine dal backend (Impostazioni sito) */
.footer__partners-label { margin-top: 54px; font-weight: 700; text-transform: uppercase; }

/* 13. Back to top -------------------------------------------------------- */
.back-to-top {
  position: fixed; z-index: 50;
  right: clamp(16px, 5.67vw, 98px); bottom: clamp(16px, 2.6vw, 40px);
  width: 54px; height: 54px; border-radius: 50%;
  visibility: hidden; opacity: 0;              /* visibile solo dopo l'Above the Fold (GSAP) */
  box-shadow: 0 10px 24px -10px rgba(1, 100, 106, .6);
  transition: box-shadow .35s var(--ease);
}
.back-to-top img { width: 100%; height: 100%; transition: transform .45s var(--ease); }
.back-to-top:hover { box-shadow: 0 16px 30px -10px rgba(1, 100, 106, .75); }
.back-to-top:hover img { transform: translateY(-3px); }

/* ≤1439 — navigazione con hamburger (sotto questa larghezza le 8 voci non entrano in una riga) */
@media (max-width: 1439.98px) {
  .navbar__nav { display: none; }
  .navbar__toggle { display: flex; }
}

/* ≤1279 */
@media (max-width: 1279.98px) {
  .topbar { padding-right: var(--gutter); }
}

/* ≤1023 — tablet */
@media (max-width: 1023.98px) {
  .topbar__claim, .topbar__sep--claim, .topbar__social, .topbar__sep--social { display: none; }

  .split, .split--reverse { grid-template-columns: 1fr; min-height: 0; }
  .split--reverse .split__media { order: 0; }
  .split__media { aspect-ratio: 16 / 10; }
  .split__body { padding: 56px var(--gutter) 72px; max-width: 680px; }

  .booking { min-height: 0; padding: 120px 24px; }

  .maps { grid-template-columns: 1fr; height: auto; }
  .maps__item { height: 360px; }
  .maps__card--1 { left: 36px; }      /* colonna singola: 100% = pagina intera, niente allineamento al container */

  .footer__cols { grid-template-columns: 1fr 1fr; gap: 48px 32px; }
}

/* ≤767 — mobile */
@media (max-width: 767.98px) {
  .topbar { justify-content: space-between; padding: 0 16px; font-size: 14px; }
  .topbar__group { gap: 14px; }
  .topbar__link--mail span, .topbar__book-label { display: none; }
  .navbar { height: 84px; padding: 0 16px; }
  .navbar__logo { width: 144px; height: 32px; }

  .btn { font-size: 17px; min-height: 60px; padding: 10px 16px; }
  .btn--wide, .btn--mid { width: 100%; }
  .btn--glass { width: min(320px, 100%); }

  .split__body { padding: 44px 20px 56px; }
  .split__text { font-size: 18px; line-height: 30px; }
  .split .btn { margin-top: 32px; white-space: normal; line-height: 1.15; }
  .btn--card { width: 100%; }

  .booking { padding: 88px 20px; }
  .booking__title { margin-top: 32px; }
  .booking__text { margin-top: 20px; }

  .maps__item { height: 300px; }
  .maps__card { top: 20px; left: 16px !important; transform-origin: 0 0; scale: .85; }

  .footer__inner { padding: 48px 0 72px; }
  .footer__brand img { width: 190px; height: auto; }
  .footer__cols { grid-template-columns: 1fr; padding: 48px 0 40px; font-size: 18px; gap: 36px; }
  .footer address { line-height: 22px; }
}

/* 14. Stato pre-animazione & reduced motion ----------------------------- */
/* (Le regole dell'intro per l'Hero della Home sono in css/home.css.)
   Solo l'Hero viene nascosto via CSS (evita il "flash" al primo paint);
   il resto è gestito da GSAP al momento dell'inizializzazione. */
/* Intro al caricamento in CSS (stessi tempi e curva della timeline GSAP del design:
   power3.out = cubic-bezier(.215, .61, .355, 1)). Parte subito, senza attendere il
   JavaScript: il contenuto del primo schermo (LCP) compare prima. fill-mode "backwards":
   finita l'animazione restano gli stili normali (GSAP può animare gli stessi elementi). */
/* Sfondi degli Hero: sui telefoni la versione da 1024 px (--bg-m, da bic_bg_style()) */
@media (max-width: 767.98px) {
  .hero__bg-img[style*="--bg-m"] { background-image: var(--bg-m) !important; }
}

@keyframes bic-intro-up { from { opacity: 0; transform: translateY(var(--intro-y, 44px)); } }
.bic-intro .site-header { --intro-y: -16px; animation: bic-intro-up .9s cubic-bezier(.215, .61, .355, 1) .1s backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 15. Pagine non ancora sviluppate (template di riserva index.php) ------- */
.page-fallback__head { background: var(--teal-deep); color: var(--white); padding: 230px calc(var(--gutter) + var(--bleed)) 80px; }
.page-fallback__title { font-family: var(--ff-head); font-weight: 700; font-size: clamp(36px, 3.7vw, 64px); line-height: 1.125; }
.page-fallback__body { max-width: 900px; margin: 0 auto; padding: 80px var(--gutter); font-weight: 200; font-size: 20px; line-height: 36px; }