/* ==========================================================================
   Da Settimo — foglio di stile unico
   Nessun framework, nessun CDN, nessuna libreria (regola 18).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;           /* regola: mai scroll orizzontale */
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { margin: 0; padding: 0; list-style: none; }
/* Il margine di serie della <figure> e' 16px 40px. Finche' le foto stavano in
   un riquadro imposto da aspect-ratio non si vedeva; ora che la forma la da' il
   file, quei 40px per lato mangiavano ogni cella di .trio e .quartet (misurato
   il 2026-10-19 a 1024: figure 235x293 dentro una colonna da 315). */
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--teal);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--teal); color: var(--white);
  padding: 12px 18px; z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Impalcatura
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}
.wrap--narrow { max-width: var(--wrap-narrow); }
/* Galleria: le foto chiedono piu' spazio del contenitore da 1200. */
.wrap--largo { max-width: 1400px; }

.sec {
  position: relative;
  padding: var(--sec-pad) 0;
}
.sec--teal   { background: var(--teal);   color: var(--white); }
.sec--light  { background: var(--light);  }
.sec--light2 { background: var(--light-2); }
.sec--white  { background: var(--white);  }

.sec--teal h1, .sec--teal h2, .sec--teal h3 { color: var(--white); }

.sec__head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.sec__head p { color: var(--ink); }
.sec--teal .sec__head p { color: rgba(255, 255, 255, .86); }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 18px;
}
.eyebrow--rule::before {
  content: '\2014\2014\2014\2014';
  letter-spacing: -2px;
  margin-right: 14px;
  opacity: .7;
}
/* Quando l'occhiello e' centrato il filetto sta da tutt'e due le parti:
   sull'originale "——— LE NOSTRE SEDI ———" e' simmetrico. A sinistra, nei
   blocchi allineati a sinistra, resta il filetto singolo. */
.sec__head .eyebrow--rule::after {
  content: '\2014\2014\2014\2014';
  letter-spacing: -2px;
  margin-left: 14px;
  opacity: .7;
}

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn);
  line-height: 1;
  text-transform: uppercase;
  /* 45px di altezza in tutto: 15+13+15 piu' il filetto da 1px sopra e sotto.
     Letto negli stili calcolati della pagina viva il 2026-10-19: ogni bottone
     di dasettimo.it ha padding 15px 30px e misura 45px. I 42px di prima erano
     dedotti dai pixel di uno scatto cucito, e sbagliati. */
  padding: 15px 30px;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .4);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); }

.btn--solid {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}
.btn--solid:hover { background: var(--teal-deep); border-color: var(--teal-deep); }

.btn--outline-light {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  padding: 15px 30px 14px;
}
.btn--outline-light:hover { background: var(--white); color: var(--teal); }

/* Pieno bianco su fondo ottanio: il bottone "Scrivi una recensione" del
   blocco recensioni, misurato su _design/sorgente-home-desktop.webp. */
.btn--white {
  background: var(--white);
  color: var(--ink-strong);
  border-color: var(--white);
}
.btn--white:hover { background: var(--sand); border-color: var(--sand); }

.btn--outline-teal {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.btn--outline-teal:hover { background: var(--teal); color: var(--white); }

/* --------------------------------------------------------------------------
   Barra di servizio + navigazione
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--teal);
  color: var(--white);
  font-size: var(--fs-body);
  position: relative;
  z-index: 2;
}
.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* 45px in tutto: 8px sopra, 8px sotto, 29px di contenuto. Letti negli stili
     calcolati della pagina viva il 2026-10-19. I 42px di prima venivano da una
     misura sullo scatto cucito, dove il ritaglio mangiava le prime righe di
     colore pieno e la fascia usciva piu' bassa di quello che e'. */
  padding: 8px 0;
}
/* I due telefoni al posto dell'email: la casella info@ non e' attiva e dal
   22/10/2026 non compare piu' da nessuna parte sul sito. */
.topbar__tel { color: var(--white); white-space: nowrap; }
.topbar__tel:hover { color: var(--sand); }
.topbar__tel + .topbar__tel { margin-left: 24px; }
.topbar__social { display: flex; gap: 16px; align-items: center; margin-left: auto; }
.topbar__social a {
  /* Bianche, non sabbia: nell'istogramma della fascia originale non c'e'
     nessun tono caldo, solo la rampa dal fondo all'ottanio al bianco. */
  color: var(--white);
  font-size: var(--fs-btn);
  display: inline-flex;
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.topbar__social a:hover { color: var(--sand); transform: translateY(-2px); }
/* 13px: e' l'altezza delle icone sull'originale, la stessa del testo accanto. */
.topbar__social svg { width: 13px; height: 13px; fill: currentColor; }

.site-header {
  position: absolute;
  top: 45px;                 /* sotto la topbar, sopra l'hero */
  left: 0; right: 0;
  z-index: var(--z-header);
  background: transparent;
  padding: 10px 0;
  transition: transform .4s var(--ease-out),
              background-color .4s var(--ease-out);
  /* Niente will-change: transform qui. Faceva da blocco contenitore per i
     discendenti in position:fixed, e il pannello del menu sul telefono
     (.nav, inset:0) nasceva alto 109px come la testata invece che quanto lo
     schermo: le voci e il bottone "Prenota ora" uscivano dal pannello e
     finivano sopra il marchio. Visto a 375px il 2026-10-19. */
}
.site-header--fixed {
  position: fixed;
  top: 0;
  background: var(--teal);
}
.site-header--hidden { transform: translateY(-115%); }

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Il marchio e' un PNG quadrato 500x500 con il segno centrato: la pagina
   d'origine lo mostra a 144x93 con object-fit cover, che ritaglia la fascia
   centrale ed e' esattamente il segno. Riprodotto identico. */
.brand img {
  width: 144px;
  height: 93px;
  object-fit: cover;
  /* Il file e' grigio su trasparente: in testata va bianco pieno, come nel
     pie' di pagina (Fausto, 23/10/2026). */
  filter: brightness(0) invert(1);
}

.nav { display: flex; align-items: center; gap: 34px; }
.nav__list { display: flex; gap: 28px; }
.nav__list a {
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .51);
  padding: 6px 0;
  position: relative;
  transition: color var(--dur) var(--ease-out);
}
.nav__list a:hover,
.nav__list a[aria-current="page"] { color: var(--white); }
.nav__list a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--sand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }

/* La crocetta serve solo al pannello del telefono: sul desktop non esiste,
   e senza questa riga restava un bottone grigio prima di "Casa". */
.nav__close { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--white);
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  margin: 5px auto;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* 643px di altezza: sull'originale la foto dell'apertura va da y 42 a
     y 684 (_design/sorgente-home-desktop.webp). L'alto resta 130, il basso
     scende da 141 a 85 perche' i bottoni finiscono a y 599 e il bordo della
     sezione e' 85px sotto. */
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: 130px 0 85px;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  animation: heroDrift 26s var(--ease-soft) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(0, -1.5%, 0); }
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 30, 46, .78) 0%, rgba(4, 30, 46, .45) 55%, rgba(4, 30, 46, .3) 100%);
}
/* Sull'originale il blocco dell'apertura parte dal margine sinistro della
   pagina, non dal centro: il contenitore resta largo quanto .wrap e sono i
   figli a fermarsi a 640px. Con max-width sul contenitore il margin:0 auto
   di .wrap lo centrava, e il testo partiva da meta' schermo. */
.hero__inner > * { max-width: 640px; }
.hero h1 { color: var(--white); margin-bottom: 18px; }
/* Riga di un titolo spezzato a mano. Si usa quando l'a capo e' una scelta di
   senso, non un effetto della larghezza dello schermo: ogni riga regge da
   sola. Resta un <span>, quindi il titolo letto da uno screen reader o copiato
   e incollato resta una frase sola. */
.riga { display: block; }
.hero p  { color: rgba(255, 255, 255, .9); margin-bottom: 34px; }
/* L'occhiello dell'apertura e' un <p>, quindi si prendeva i 34px della regola
   qui sopra: sull'originale fra occhiello e titolo ce ne sono 22. */
.hero .eyebrow { margin-bottom: 22px; }
/* 30px fra i due bottoni: sull'originale il primo finisce a x 295 e il
   secondo comincia a 325. */
.hero__actions { display: flex; flex-wrap: wrap; gap: 30px; }

/* Le aperture delle pagine interne sono allineate a sinistra come quella
   della casa: misurato su _design/sorgente-about-desktop.webp e
   sorgente-eventi-desktop.webp, il titolo parte dal margine della pagina. */
.hero--inner { min-height: 520px; padding: 170px 0 110px; }
/* Dal 2026-10-23 ogni pagina interna apre con una sua foto, tutte diverse
   (richiesta di Fausto): il fondo pieno dell'originale sulla galleria e sul
   blog non c'e' piu'. */

/* --------------------------------------------------------------------------
   Onde fra le sezioni — la firma visiva del sito.
   Il disegno e' su canvas: il codice in js/wave.js e' quello del sito
   d'origine, con una sola correzione (niente listener sullo scroll:
   la velocita' si legge dentro il frame gia' in corso).
   -------------------------------------------------------------------------- */

.wave-band {
  position: relative;
  height: var(--wave-h);
  line-height: 0;
  pointer-events: none;
  /* I due estremi li impostano le classi qui sotto: il fondale della sezione
     che finisce e quello della sezione che comincia. */
  --wave-da: var(--light);
  --wave-a: var(--teal);
  /* Fondale PIENO del colore di sopra: il passaggio lo disegnano le onde, non
     una sfumatura. Sull'originale il colore di sopra arriva intatto fino alle
     creste e sotto la curva piu' bassa diventa di colpo quello di sotto
     (misurato a y 3966-3972 di _design/sorgente-home-desktop.webp). Con una
     sfumatura su tutta l'altezza le onde sparivano dentro la dissolvenza. */
  background: var(--wave-da);
}
.wave-band--over-hero {
  height: 0;
  overflow: visible;
  background: none;          /* galleggia sull'hero: niente fondale proprio */
}
.wave-band--over-hero .wave-stack {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--wave-h);
}
/* La banda d'onda sta FRA due fondali e deve raccordarli: sopra il colore
   della sezione che finisce, sotto quello della sezione che comincia. Due
   versi, quindi due classi. Sbagliare verso lascia una striscia bianca in
   mezzo, che sull'originale non c'e'. */
.wave-band--grad-teal {           /* chiaro sopra, ottanio sotto */
  --wave-da: var(--light);
  --wave-a: var(--teal);
}
.wave-band--da-teal {             /* ottanio sopra, chiaro sotto */
  --wave-da: var(--teal);
  --wave-a: var(--light);
}
.wave-band--da-bianco { --wave-da: var(--white); }   /* la sezione sopra e' bianca */
/* I due fondali chiari non sono lo stesso colore: #f5f9f9 la sezione prenota,
   #f4f8fb galleria e contatti. Chi raccorda quelle due deve portare il loro,
   altrimenti la curva di chiusura (che e' opaca) lascia un filo di un terzo
   colore in fondo alla banda. */
.wave-band--a-chiaro   { --wave-a:  var(--light); }
.wave-band--a-chiaro2  { --wave-a:  var(--light-2); }
.wave-band--da-chiaro2 { --wave-da: var(--light-2); }

.wave-stack { position: relative; height: 100%; }
.wave-divider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wave-divider canvas { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Contatori
   -------------------------------------------------------------------------- */

/* Sull'originale il numero e' grande e sbiadito, e l'etichetta gli sta SOPRA,
   non sotto: si legge l'etichetta, il numero fa da filigrana. */
/* I quattro contatori non stanno nel contenitore da 1200: sulla pagina viva la
   fascia e' larga 1400 e comincia a x 20, quattro colonne da 350 senza spazio
   in mezzo (stili calcolati del 2026-10-19). Nel contenitore normale il passo
   veniva 298 e le colonne si stringevano verso il centro. */
.counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1400px;
}
.counter { text-align: center; position: relative; }
.counter__n {
  font-family: var(--font-display);
  font-weight: 600;
  /* 65px/84.5px a 1440, come l'h1: letti negli stili calcolati della pagina
     viva il 2026-10-19. */
  font-size: clamp(40px, 4.5vw, 65px);
  line-height: 1.3;
  /* rgba(98,164,180,.81), il valore letto sulla pagina viva il 2026-10-20.
     Prima era rgba(198,228,233,.34), piu' slavato dell'originale. */
  color: var(--teal-soft);
  display: block;
  margin: 0;
}
/* L'etichetta passa IN MEZZO al numero, non sotto: sulla pagina viva il numero
   sta a y 582 alto 78 e l'etichetta a y 608 alta 25, cioe' centrata sul numero
   (letto il 2026-10-20). 14px bianco pieno, come li' dentro. */
.counter__label {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: var(--white);
  font-size: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   Card sede (copertina con velo, titolo e bottone)
   -------------------------------------------------------------------------- */

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

/* 563x280 sulla pagina viva (stili calcolati del 2026-10-19), angoli vivi. */
.venue {
  position: relative;
  aspect-ratio: 563 / 280;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: 40px 24px;
}
.venue__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform var(--dur-slow) var(--ease-out);
}
.venue__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.venue:hover .venue__bg { transform: scale(1.08); }
.venue::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Sulla pagina viva il velo a riposo e' rgba(0,0,0,.26) e in hover .42.
     Qui parte gia' da .42: a .26 il titolo bianco e il bottone finivano sopra
     il piatto bianco delle due foto e sparivano (visto nello scatto di
     /eventi/ il 2026-10-19). Non e' un colore inventato, e' il valore che
     l'originale usa in hover.
     Il 2026-10-22 .42 non bastava ancora: sul telefono, dentro /eventi/, il
     titolo "Via del Barco" e il suo bottone cadevano su un punto chiaro della
     foto e misuravano 4,38:1 contro i 4,5 richiesti. A .48 lo stesso punto
     misura 4,7:1. Il velo si alza, il colore del testo resta il bianco. */
  background: rgba(0, 0, 0, .48);
  transition: background-color var(--dur-slow) var(--ease-out);
}
.venue:hover::before { background: rgba(0, 0, 0, .58); }
.venue__content { display: grid; gap: 22px; justify-items: center; }
.venue h3 { color: var(--white); }

/* --------------------------------------------------------------------------
   Blocco immagine + testo
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.split--reverse > :first-child { order: 2; }
/* La forma la da' il file, non il riquadro. Sulla casa l'originale mostra la
   foto del blocco a due colonne in orizzontale (510x344 logici, cioe' 3:2) da
   un file verticale 1280x1600: il taglio sta in images/crop/split-rana.webp,
   ritagliato 1020x680 in fase di preparazione. Prima lo faceva il CSS con
   aspect-ratio + object-fit:cover, e il gate delle proporzioni lo nega.
   Sulle pagine interne la foto sta dentro .frame ed e' quadrata. */
.split__media img { width: 100%; height: auto; display: block; }
.split__text h2 { margin-bottom: 20px; }
.sec--teal .split__text p { color: rgba(255, 255, 255, .86); }

/* --------------------------------------------------------------------------
   Asporto
   -------------------------------------------------------------------------- */

/* Colonna stretta e centrata, senza riquadro: nella pagina viva non c'e'
   nessun contenitore col filetto intorno al blocco asporto (stili calcolati
   del 2026-10-19). Il riquadro da 396px col filo bianco al 7% era una lettura
   mia dei pixel dello scatto cucito. */
.takeaway {
  text-align: center;
  max-width: 396px;
  margin: 0 auto;
  padding: 20px 24px 22px;
}
/* Quadrato da 60px, riempito di azzurro chiaro al 17%, margine interno 15px:
   letti sulla pagina viva il 2026-10-19. */
.takeaway__icon {
  width: 60px; height: 60px;
  margin: 0 auto;
  padding: 15px;
  background: rgba(126, 193, 243, .17);
  color: var(--white);
}
.takeaway__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.1; }
.takeaway h3 { margin: 14px 0 6px; font-size: 22px; }
.takeaway__actions { display: grid; gap: 20px; justify-items: center; margin: 24px 0 20px; }
/* I due bottoni sono larghi quanto la loro scritta: sull'originale misurano
   141 e 147 logici, quindi niente larghezza minima imposta. */
.takeaway__actions .btn { min-width: 0; }
/* 15px/25.5px Cormorant 500 sulla pagina viva. */
.takeaway__note {
  color: rgba(255, 255, 255, .7);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 25.5px;
}

/* --------------------------------------------------------------------------
   Striscia di scatti in home
   -------------------------------------------------------------------------- */

/* Non e' una giostra: sulla pagina viva sono due file fisse, due scatti da
   590x400 e sotto tre da 387x250, tutti con angoli da 5px e 20 di spazio in
   mezzo (stili calcolati del 2026-10-19). La giostra l'avevo dedotta dalle
   classi Elementor, e non corrisponde a quello che la pagina mostra. */
.shots {
  display: grid;
  gap: 20px;
}
.shots--due { grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; }
.shots--tre { grid-template-columns: repeat(3, 1fr); }
.shots figure { margin: 0; overflow: hidden; border-radius: 5px; }
.shots img {
  width: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.shots--due img { aspect-ratio: 59 / 40; }
.shots--tre img { aspect-ratio: 387 / 250; }
.shots figure:hover img { transform: scale(1.06); }
.shots__cta { text-align: center; margin-top: 60px; }

/* --------------------------------------------------------------------------
   Recensioni
   -------------------------------------------------------------------------- */

/* Sull'originale questo blocco e' un widget Google: a sinistra il riepilogo
   del profilo, a destra le schede che scorrono in orizzontale fra due frecce.
   Qui la stessa cosa senza il widget di terzi, con lo scorrimento nativo. */
/* Le due sedi hanno due schede Google: due targhe incolonnate nella prima
   colonna, ognuna col suo voto, il suo conteggio e il suo bottone. */
.reviews-row > .reviews__meta { grid-column: 1; }
.reviews-row > .reviews__meta + .reviews__meta { margin-top: 26px; }
/* Il nastro occupa la seconda colonna per tutta l'altezza delle targhe: senza
   questa riga la griglia metterebbe la seconda targa nella colonna del nastro,
   perche' le mette in fila una dopo l'altra. */
.reviews-row > .reviews-rail { grid-column: 2; grid-row: 1 / -1; }
/* Il nome della sede sotto il testo: con due schede mescolate nello stesso
   nastro, senza non si capisce di quale locale parla la recensione. */
.review__sede {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #6b6b6b;
}
.review__sede:empty { display: none; }
.reviews-row {
  display: grid;
  /* 300px: sull'originale la targa sta a x 140-220 e il testo arriva a x 430
     (_design/sorgente-home-desktop.webp). A 220px il nome andava a capo. */
  grid-template-columns: 300px 1fr;
  /* 17px: cosi' la prima scheda comincia a x 457, come sull'originale. */
  gap: 17px;
  align-items: center;
}
/* Il nastro parte dal bordo della colonna e lascia spazio solo a destra, per
   la freccia: sull'originale le schede vanno da x 457 a x 1272 e la freccia
   sta dopo l'ultima (_design/sorgente-home-desktop.webp). */
.reviews-rail { position: relative; padding: 0 28px 0 0; min-width: 0; }
.reviews-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .7);
  font-size: 26px; line-height: 1;
  transition: color var(--dur) var(--ease-out);
}
.reviews-nav:hover { color: var(--white); }
.reviews-nav--prev { left: 0; }
.reviews-nav--next { right: 0; }
.reviews {
  display: grid;
  grid-auto-flow: column;
  /* Quattro schede per volta, larghe 279 con 15,5 di spazio in mezzo: passo
     294,5 letto sulla pagina viva il 2026-10-19 (x 155, 449, 744, 1039). */
  grid-auto-columns: calc((100% - 47px) / 4);
  gap: 15.5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.reviews::-webkit-scrollbar { display: none; }
.review { scroll-snap-align: start; }
.review {
  background: var(--white);
  color: #000;
  /* 279x236, margine interno 20, angoli 12, filetto 1px #d9d9d9: letti sulla
     pagina viva il 2026-10-19. */
  padding: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: transform var(--dur) var(--ease-out);
}
/* I paragrafi dentro la scheda non portano il margine del corpo testo: li'
   lo stacco lo da' il gap della colonna, e sommati facevano 28px in piu'. */
.review p { margin: 0; }
.review:hover { transform: translateY(-4px); }
/* Le schede recensione sull'originale sono il riquadro di Google, e di Google
   hanno anche i caratteri: un bastoni di sistema, non il carattere del sito.
   Tenerle in Cormorant le faceva leggere come testo redazionale invece che
   come recensioni vere. Nessun carattere scaricato: solo quelli della
   macchina, come vuole la regola 18 sul sito autosufficiente. */
/* font-imposto-dal-brand: system-ui nelle sole schede recensione. Non e' una
   scelta di identita': e' il carattere del riquadro Google che l'originale
   mostra (negli stili calcolati della pagina viva, 2026-10-19, le schede
   Trustindex girano in "Trustindex Poppins"). Scaricare Poppins per quattro
   schede vorrebbe dire un terzo file di carattere e una famiglia che il
   registro da' gia' su un altro cliente; i bastoni della macchina danno lo
   stesso effetto a costo zero. Il resto del sito resta Cormorant Garamond
   e Unica One. */
.review { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.review__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.review__top > div { min-width: 0; }
/* La G sta in alto a destra della scheda, la spunta blu in coda alle stelle. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.review__g { width: 18px; height: 18px; margin-left: auto; flex: none; }
.review__ok { width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; }
.review__avatar {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: grid; place-items: center;
  font-size: 17px;
  font-weight: 600;
}
/* Sull'originale un nome lungo si ferma coi puntini: "Marceline Tondji ni...".
   Lasciandolo andare a capo la scheda cresceva di 28px e trascinava tutta la
   riga, perche' le schede sono alte quanto la piu' alta. */
.review__who {
  font-size: 15px; font-weight: 600; line-height: 21px; color: #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.review__when { font-size: 13px; line-height: 18.2px; color: rgb(107, 107, 107); }
.review__stars { color: #fbbc04; letter-spacing: 2px; font-size: 14px; line-height: 1; }
/* Sull'originale la recensione lunga si ferma a quattro righe e sotto compare
   "Leggi di piu'": le schede restano tutte della stessa altezza. Riprodotto
   col taglio a quattro righe piu' il bottone che lo toglie (js/main.js). */
.review__text {
  /* 15/21,75 su quattro righe, come sulla pagina viva (blocco 237x87). */
  font-size: 15px;
  line-height: 21.75px;
  color: #000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.review.is-aperta .review__text { -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
.review__piu {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  line-height: 18.9px;
  color: #000;
  text-decoration: underline;
}
.review__piu:hover { color: #6b6b6b; }
.review__piu[hidden] { display: none; }
/* La testa del blocco: targa a sinistra, nome-stelle-conteggio a destra,
   bottone sotto a tutta larghezza della colonna. Tutto allineato a sinistra,
   come su _design/sorgente-home-desktop.webp. */
.reviews__meta {
  display: grid;
  grid-template-columns: 65px 1fr;
  /* La targa sta a x 140-220 e il nome comincia a 228: otto pixel, non sedici. */
  gap: 6px 8px;
  align-items: center;
  margin: 0;
  color: var(--white);
  font-size: 15px;
  /* Come le schede: e' il riquadro di Google, quindi bastoni di sistema e
     niente maiuscoletto. */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.reviews__meta p { margin: 0; }
.reviews__badge {
  width: 65px; height: 65px;
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
}
/* Il marchio riempie la piastrella: sull'originale il tondo tocca i bordi. */
.reviews__badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reviews__name { font-weight: 700; font-size: 16px; line-height: 1.3; }
.reviews__stars { letter-spacing: 2px; font-size: 17px; line-height: 1.2; }
/* Quattro stelle e mezzo: il fondo e' la fila spenta, sopra la stessa fila in
   giallo tagliata al 90% della larghezza. Nessuna immagine da scaricare. */
.reviews__stars span { position: relative; display: inline-block; color: rgba(255, 255, 255, .42); }
.reviews__stars span::before {
  content: attr(data-voto);
  position: absolute; top: 0; left: 0;
  /* La frazione la scrive lo script che pesca dalla scheda: 4,5 su 5 fa 90%.
     Scritta 90% qui dentro, la mezza stella restava mezza anche con la media
     a 4,8 (22/10/2026). Il 90% resta solo come riserva se l'attributo manca. */
  width: var(--riempi, 90%);
  overflow: hidden;
  color: #fbbc04;
}
.reviews__count { font-size: 14px; color: rgba(255, 255, 255, .88); }
.reviews__meta .btn {
  /* Il bottone sta sotto al testo, incolonnato con lui e non con la targa:
     sull'originale parte da x 226, cioe' dal bordo sinistro del nome
     (_design/sorgente-home-desktop.webp). */
  grid-column: 2;
  justify-self: start;
  margin-top: 12px;
  /* Sull'originale questo bottone non e' maiuscoletto: e' il bottone del
     riquadro Google, in tondo. */
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  padding: 11px 18px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Contatti
   -------------------------------------------------------------------------- */

.locations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
/* Sull'originale le due sedi sono sfalsate: Via del Barco in alto a sinistra,
   Viale dei Mille piu' in basso a destra. Misurato sullo screenshot reale,
   _design/sorgente-home-desktop.webp: 415px di scarto. */
.locations .location:nth-child(2) { margin-top: 415px; }
/* Su Scopri Settimo lo scarto e' piu' corto: 270px, misurati su
   _design/sorgente-about-desktop.webp. */
.locations--sedi { gap: 60px; }
.locations--sedi .location:nth-child(2) { margin-top: 270px; }
.location h3 { margin-bottom: 20px; }
/* "Telefono" e "Orari di apertura" sull'originale sono in tondo, non in
   maiuscoletto spaziato: misurato su _design/sorgente-home-desktop.webp. */
.location__k {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--teal);
  margin: 0 0 10px;
}
.location__card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 16px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.location__ico {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: grid; place-items: center;
}
.location__ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.location__v { color: var(--teal-deep); font-size: 15px; line-height: 1.7; }
.location__v a:hover { color: var(--teal); }
.location__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
/* Contatti della casa: una riga per sede, dati e mappa ai due lati.
   Barco ha la mappa a sinistra, Mille i dati a sinistra (Fausto, 23/10/2026):
   l'occhio scende a zig-zag e le due sedi non si confondono. */
.sedi { display: grid; gap: 64px; }
.sede {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.sede--mappa-sx { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.sede--mappa-sx .sede__mappa { order: -1; }
.sede__dati h3 { margin-bottom: 22px; }
.sede__righe { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 18px; }
.sede__riga { display: flex; gap: 16px; align-items: flex-start; }
.sede__riga > div { min-width: 0; }
.sede__k {
  display: block;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 4px;
}
.sede__v { margin: 0; color: var(--teal-deep); font-size: 16px; line-height: 1.6; }
.sede__v a:hover { color: var(--teal); }
.sede .location__actions { margin-top: 0; }
/* La mappa e' una foto 720x480 (3:2) e il riquadro ha la sua forma:
   width 100% e altezza dal file, niente ritaglio. */
.sede__mappa {
  position: relative;
  display: block;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(4, 30, 46, .45);
}
.sede__mappa img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}
.sede__mappa:hover img { transform: scale(1.04); }
/* Lo spillo sta al centro esatto: la foto e' cucita centrata sulla sede. */
.sede__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -100%);
  color: var(--teal);
  filter: drop-shadow(0 4px 6px rgba(4, 30, 46, .35));
  pointer-events: none;
}
.sede__pin svg { width: 100%; height: 100%; fill: currentColor; stroke: var(--white); stroke-width: 1.2; }
.sede__pin svg circle { fill: var(--white); stroke: none; }
.sede__credito {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(4, 30, 46, .7);
  background: rgba(255, 255, 255, .75);
}

/* Scopri Settimo: le due sedi affiancate, stessa altezza, su fondo ottanio. */
.sedi-coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.sede-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 36px;
  background: rgba(255, 255, 255, .06);
  border-top: 2px solid var(--sand);
}
.sede-card h3 { margin-bottom: 12px; }
.sede-card__testo { margin-bottom: 26px; }
.sede-card .sede__righe { margin-bottom: 30px; }
.sede-card .btn { margin-top: auto; }
.sec--teal .sede__k { color: rgba(255, 255, 255, .78); }
.sec--teal .sede__v, .sec--teal .sede-card__testo { color: rgba(255, 255, 255, .9); }
.sec--teal .sede__v a:hover { color: var(--sand); }
.sec--teal .sede__riga .location__ico { background: rgba(255, 255, 255, .14); }

/* --------------------------------------------------------------------------
   Menu sfogliabile (StPageFlip 2.0.7 in js/vendor, regola 18)
   -------------------------------------------------------------------------- */

/* Niente cornice e niente fondo: dietro il menu c'e' la pagina. Il blu
   profondo di prima faceva da retro del menu e Fausto lo voleva chiaro,
   cioe' lo sfondo della sezione e basta (23/10/2026). */
.flip { max-width: 1240px; margin: 0 auto; position: relative; outline: none; }
.flip:focus-visible .flip__libro { outline: 2px solid var(--teal); outline-offset: 8px; }
/* Il libro deve stare in uno schermo insieme alle frecce: la larghezza si
   ricava dall'altezza utile. Due pagine 910x1287 affiancate fanno 1820x1287,
   quindi larghezza = altezza x 1,414. */
.flip__libro {
  position: relative;
  width: min(100%, calc((100svh - 250px) * 1.414));
  margin-inline: auto;
}
/* Prima che la libreria parta (o senza JS) si vede la copertina, gia' al
   suo posto: la meta' destra. Cosi' quando il libro si accende niente salta. */
.flip:not(.is-pronto) .flip__book { width: 50%; margin-left: 50%; }
.flip:not(.is-pronto) .flip__page + .flip__page { display: none; }
.flip__page {
  background: var(--teal-deep);
  overflow: hidden;
  transition: opacity .8s cubic-bezier(.45, 0, .55, 1);
}
/* Tornando alla copertina la pagina 2 si alza e se ne va: la libreria la
   lascia disegnata a sinistra fino a giro finito, qui sfuma mentre il foglio
   gira (main.js, sezione 6). 0,8s sui 1,1s del giro, lenta in partenza: resta
   piena finche' il foglio e' appena sollevato e sparisce prima che atterri. */
.flip__page.is-via { opacity: 0; }
.flip__page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.flip.is-pronto .flip__book { cursor: grab; }
.flip.is-pronto .flip__book:active { cursor: grabbing; }
/* La piega del menu aperto: scura sulla costola, sfuma a niente in 7% per
   lato. Entra ed esce in dissolvenza lenta, e durante il giro si attenua. */
.flip__piega {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 14%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .05) 30%,
    rgba(0, 0, 0, .22) 49.5%,
    rgba(255, 255, 255, .06) 50.5%,
    rgba(0, 0, 0, .05) 70%,
    rgba(0, 0, 0, 0) 100%);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1);
}
.flip[data-aperto="si"] .flip__piega { opacity: 1; }
.flip[data-aperto="si"][data-gira="si"] .flip__piega { opacity: .35; transition-duration: .5s; }
.flip__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
  color: var(--teal);
  font-size: 13px;
  letter-spacing: 1px;
}
.flip__n { min-width: 92px; text-align: center; }
.flip__nav {
  background: transparent;
  border: 1px solid rgba(0, 87, 107, .35);
  color: var(--teal);
  width: 44px; height: 44px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.flip__nav:hover:not(:disabled) { background: var(--teal); color: var(--white); transform: translateY(-2px); }
.flip__nav:disabled { opacity: .3; cursor: default; }
.flip__dl { margin-top: 20px; text-align: center; }

/* --------------------------------------------------------------------------
   Galleria
   -------------------------------------------------------------------------- */

.gal-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 42px;
}
.gal-filter {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--teal);
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  padding: 12px 22px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.gal-filter:hover { border-color: var(--teal); }
.gal-filter[aria-pressed="true"] { background: var(--teal); color: var(--white); border-color: var(--teal); }

/* Dodici binari: tre foto per riga sul desktop (span 4), due sotto i 1024px
   (span 6). Le righe finiscono sempre piene: quando gli scatti visibili non
   si dividono per il numero di colonne, main.js allarga le ultime foto
   (due da 6, o tre da 4) invece di lasciare un buco. Le foto restano 4:5,
   la forma la da' il file: niente ritaglio (gate proporzioni). */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.gal-item {
  grid-column: span 4;
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--teal);
  cursor: zoom-in;
  border: 0;
  padding: 0;
  transition: opacity .32s cubic-bezier(.22, .61, .36, 1), transform .32s cubic-bezier(.22, .61, .36, 1);
}
/* Il cambio di filtro: le foto escono sfumando e rimpicciolendo appena,
   le nuove entrano una dopo l'altra. */
.gal-grid.is-cambio .gal-item { opacity: 0; transform: scale(.97); }
.gal-item.is-entra { animation: galEntra .5s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes galEntra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gal-item.is-entra { animation: none; }
  .gal-grid.is-cambio .gal-item { opacity: 1; transform: none; }
}
.gal-item img {
  width: 100%;
  /* Le miniature sono gia' ritagliate 580x725 (4:5) in fase di preparazione:
     la forma la da' il file, non il riquadro, e il CSS non taglia niente. */
  height: auto;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gal-item:hover img { transform: scale(1.07); }
.gal-item__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 16px 16px;
  background: linear-gradient(0deg, rgba(4, 30, 46, .9) 0%, rgba(4, 30, 46, 0) 100%);
  color: var(--white);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.gal-item:hover .gal-item__cap,
.gal-item:focus-visible .gal-item__cap { opacity: 1; transform: translateY(0); }
.gal-item[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Lente (lightbox di casa)
   -------------------------------------------------------------------------- */

.lens {
  position: fixed;
  inset: 0;
  z-index: var(--z-popup);
  background: rgba(4, 30, 46, .94);
  display: grid;
  place-items: center;
  padding: 40px 20px 72px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out);
}
.lens[data-open="true"] { opacity: 1; visibility: visible; }
.lens img {
  max-width: min(92vw, 1400px);
  max-height: 78vh;
  width: auto;
  object-fit: contain;
  transform: scale(.96);
  transition: transform var(--dur-slow) var(--ease-out);
}
.lens[data-open="true"] img { transform: scale(1); }
.lens img.is-cambio { opacity: 0; }
.lens img { transition: transform var(--dur-slow) var(--ease-out), opacity .25s var(--ease-out); }
.lens__n {
  position: absolute;
  top: 34px;
  left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  letter-spacing: 1.5px;
  pointer-events: none;
}
.lens__cap {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  text-align: center;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  padding: 0 20px;
}
.lens__btn {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .42);
  color: var(--white);
  width: 48px; height: 48px;
  cursor: pointer;
  font-size: 18px;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.lens__btn:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.lens__close { top: 22px; right: 22px; }
.lens__prev  { left: 22px;  top: 50%; margin-top: -24px; }
.lens__next  { right: 22px; top: 50%; margin-top: -24px; }

/* --------------------------------------------------------------------------
   Pagina Scopri Settimo
   Tutto quello che c'e' qui e' misurato su _design/sorgente-about-desktop.webp,
   l'unica traccia rimasta della pagina d'origine: sul sito vivo /about-us/
   risponde 200 ma serve l'elenco "Archives" del tema, non la pagina vera.
   -------------------------------------------------------------------------- */

/* Il logo a onda sta DIETRO l'occhiello, come filigrana chiara. */
.sec__head--wm { position: relative; }
.sec__wm {
  position: absolute;
  left: 50%; top: 6px;
  width: 250px; height: auto;
  transform: translate(-50%, -50%);
  opacity: .34;
  pointer-events: none;
  z-index: 0;
}
.sec__head--wm > p, .sec__head--wm > h2 { position: relative; z-index: 1; }

/* Cornice sottile staccata dalla foto, nei due blocchi storici. */
.frame { padding: 8px; border: 1px solid rgba(0, 87, 107, .2); }
.sec--teal .frame { border-color: rgba(255, 255, 255, .28); }
.frame img { width: 100%; height: auto; display: block; }

/* Il percorso: quattro schede bianche su una foto velata di blu. */
.sec--foto { position: relative; overflow: hidden; padding: 120px 0 190px; }
.sec--foto > .wrap { position: relative; z-index: 1; }
.sec--foto .sec__head p, .sec--foto h2 { color: var(--white); }
.sec--foto .sec__head p { color: rgba(255, 255, 255, .88); }
.sec__foto {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.sec__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sec__foto::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(4, 48, 64, .42);
}
.tappe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
/* L'anno parte sempre alla stessa altezza in tutte e quattro le schede:
   sull'originale la scheda con due righe di testo lascia il vuoto in fondo,
   non sposta su il titolo. Quindi testa fissa, non allineamento in basso. */
.tappa {
  background: var(--white);
  padding: 106px 30px 30px;
  min-height: 256px;
}
.tappa__y {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink);
  display: block;
  margin-bottom: 12px;
}
.tappa p { font-size: 15px; line-height: 1.75; margin: 0; }

/* La scheda bianca sta sempre dentro un riquadro dal filo appena piu' chiaro
   del fondo: da solo sulla casa, insieme al bottone mappa su Scopri Settimo. */
.location__box {
  border: 1px solid var(--line);
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}
.location__box > .location__card:only-child { flex: 1 1 auto; }
.sec--teal .location__box { border-color: rgba(255, 255, 255, .22); }
.sec--teal .location__k { color: rgba(255, 255, 255, .8); }
.sec--teal .location > p { color: rgba(255, 255, 255, .84); }

/* Vieni a trovarci: due foto con il bottone al centro, sopra. */
.photo-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.photo-cta__item { position: relative; display: block; isolation: isolate; }
/* Velo scuro sulla foto, come quello delle schede sede. Senza, il bottone
   bianco «Prenota un tavolo» cadeva sul legno chiaro dello scatto e il gate
   del contrasto lo misurava a 3.2:1 contro i 4.5 richiesti (passo 32 del
   pre-deploy, 2026-10-19). Con questo velo lo stesso testo sta sopra 7:1. */
.photo-cta__item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .42);
  transition: background-color var(--dur-slow) var(--ease-out);
}
.photo-cta__item:hover::after { background: rgba(0, 0, 0, .55); }
/* La coppia "Vieni a trovarci" e' a riquadro fisso sull'originale, due foto
   orizzontali affiancate: i due file in images/crop/ sono gia' 1020x680, il
   CSS non taglia niente. */
.photo-cta__item img { width: 100%; height: auto; display: block; }
.photo-cta__item .btn {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;                /* sopra il velo */
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* La striscia mescolava scatti verticali (1280x1600) e uno orizzontale
   (1536x1024): i tre file in images/crop/ sono gia' tutti 760x950 (4:5),
   quindi la fila resta allineata senza che il CSS tagli. */
.trio img { width: 100%; height: auto; display: block; }

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

/* Quattro scatti in una striscia a tutta larghezza (Eventi). */
/* Quattro scatti in fila a riquadro uguale, come su Eventi dell'originale:
   i quattro file in images/crop/ sono gia' 620x775 (4:5). */
.quartet img { width: 100%; height: auto; display: block; }
.quartet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line-light);
  padding: 34px 28px;
}
.card h3 { margin-bottom: 12px; }
.card p { color: rgba(255, 255, 255, .84); font-size: 15px; line-height: 1.75; }

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post {
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease-out);
}
.post:hover { transform: translateY(-4px); }
/* L'anteprima dell'articolo. Oggi nessun articolo ha la foto (il blog e' la
   pagina d'elenco vuota), e quando ne avra' una la copertina si prepara
   ritagliata come quelle in images/crop/: la forma la da' il file. */
.post img { width: 100%; height: auto; display: block; }
.post__body { padding: 24px; display: grid; gap: 10px; }
.post__date { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sand); }
.post__body p { font-size: 15px; line-height: 1.7; }

.empty-note {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 24px;
  border: 1px solid var(--line);
  background: var(--white);
}

/* --------------------------------------------------------------------------
   Piede
   -------------------------------------------------------------------------- */

.site-footer { background: var(--teal); color: rgba(255, 255, 255, .84); }
.site-footer__top { padding: 70px 0 20px; }
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: 40px;
}
/* Il file del marchio e' grigio su trasparente; sull'originale nel pie' di
   pagina e' bianco pieno. Si schiarisce qui invece di tenere in giro un
   secondo file dello stesso logo. */
.site-footer img {
  width: 190px; height: auto; margin-bottom: 14px;
  filter: brightness(0) invert(1);
}
/* "Collegamenti rapidi" e "Contatti" sull'originale sono in tondo, non in
   maiuscoletto spaziato (_design/sorgente-home-desktop.webp). */
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
  margin: 0 0 20px;
  font-weight: 400;
}
.site-footer li { margin-bottom: 10px; font-size: 15px; }
.site-footer a:hover { color: var(--white); }
/* Il motto sta sotto al marchio, piccolo e in maiuscoletto spaziato, su due
   righe corte: "Il mare come non lo / hai mai assaporato", misurato su
   _design/sorgente-home-desktop.webp. In Cormorant grande occupava una riga
   sola e pesava come un titolo. */
.site-footer__payoff {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1.9;
  color: rgba(255, 255, 255, .78);
  max-width: 170px;
  margin: 0;
}
.site-footer__bar {
  border-top: 1px solid var(--line-light);
  padding: 15px 0;
  font-size: 13px;
}
/* La riga di chiusura sull'originale e' centrata su due righe, non agli
   estremi: copyright sopra, firma sotto. */
.site-footer__bar .wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}
.site-footer__bar a { color: var(--sand); }
.site-footer__bar a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   Ingressi allo scroll — IntersectionObserver, mai un listener sullo scroll
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal][data-reveal-state="in"] { opacity: 1; transform: translate3d(0, 0, 0); }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal="zoom"][data-reveal-state="in"] { opacity: 1; transform: scale(1); }

/* Senza JS il contenuto resta visibile: la rivelazione e' un di piu', non la
   condizione per leggere la pagina. */
.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Caricamento
   -------------------------------------------------------------------------- */

/* Fondo ottanio, marchio bianco che respira, un'onda che si disegna.
   Non ferma mai un clic (pointer-events: none) e se lo script non arriva
   se ne va da sola dopo 3 secondi. */
.carica {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  background: var(--teal);
  pointer-events: none;
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1), visibility .8s cubic-bezier(.22, .61, .36, 1);
  animation: caricaVia .8s cubic-bezier(.22, .61, .36, 1) 3s forwards;
}
.is-caricato .carica { opacity: 0; visibility: hidden; }
.carica-vista .carica, .no-js .carica { display: none; }
@keyframes caricaVia { to { opacity: 0; visibility: hidden; } }
.carica__logo {
  width: 180px;
  height: 116px;
  object-fit: cover;
  filter: brightness(0) invert(1);
  animation: caricaRespiro 1.4s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes caricaRespiro { from { opacity: .55; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.carica__onda { width: 120px; height: 14px; overflow: visible; }
.carica__onda path {
  fill: none;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: caricaOnda 1.6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes caricaOnda { 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -140; } }
.is-caricato .carica__logo { transform: scale(1.06); transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  .carica { display: none; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --fs-h1: 46px; --lh-h1: 58px; --fs-h2: 36px; --lh-h2: 48px; --sec-pad: 72px; --wave-h: 130px; }
  .counters { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .reviews { grid-auto-columns: calc((100% - 16px) / 2); }
  .gal-item { grid-column: span 6; }
  .cards4 { grid-template-columns: repeat(2, 1fr); }
  .quartet { grid-template-columns: repeat(2, 1fr); }
  .tappe { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .sede, .sede--mappa-sx { gap: 32px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  :root { --fs-h1: 36px; --lh-h1: 46px; --fs-h2: 30px; --lh-h2: 41px; --fs-h3: 21px; --lh-h3: 30px; --sec-pad: 56px; --wave-h: 90px; }

  .wrap { padding: 0 16px; }
  .sec { padding: var(--sec-pad) 0; }

  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--teal);
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    transform: translate3d(0, -100%, 0);
    transition: transform .42s var(--ease-out);
    z-index: var(--z-popup);
  }
  .nav[data-open="true"] { transform: translate3d(0, 0, 0); }
  .nav__list { flex-direction: column; align-items: center; gap: 22px; }
  .nav__list a { font-size: 17px; color: var(--white); }
  .nav__close {
    display: block;
    position: absolute; top: 18px; right: 16px;
    background: transparent; border: 0; color: var(--white);
    width: 44px; height: 44px; font-size: 24px; cursor: pointer;
  }

  .site-header { top: 0; padding: 8px 0; background: var(--teal); position: sticky; }
  /* Col menu aperto la testata non deve avere nessuna trasformazione: una
     trasformazione la renderebbe blocco contenitore del pannello e il
     pannello smetterebbe di coprire lo schermo. */
  .is-nav-open .site-header,
  .is-nav-open .site-header--hidden { transform: none; }
  .topbar { display: none; }

  .hero { min-height: 100dvh; padding: 120px 0 80px; }
  .hero--inner { min-height: 60dvh; padding: 110px 0 70px; }
  .hero__inner > * { max-width: 100%; }
  .hero__actions .btn { width: 100%; text-align: center; }

  .split, .venues, .locations, .cards3, .cards4, .trio, .posts {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .locations .location:nth-child(2) { margin-top: 0; }
  .sedi { gap: 48px; }
  .sedi-coppia { grid-template-columns: 1fr; gap: 20px; }
  .sede-card { padding: 30px 22px; }
  .sede-card .btn { width: 100%; text-align: center; }
  .sede, .sede--mappa-sx { grid-template-columns: 1fr; gap: 22px; }
  /* Sul telefono prima i dati, poi la mappa, per tutte e due le sedi. */
  .sede--mappa-sx .sede__mappa { order: 0; }
  .sede .location__actions .btn { flex: 1 1 100%; text-align: center; }
  .reviews-row { grid-template-columns: 1fr; gap: 26px; }
  /* Su una colonna sola le collocazioni esplicite della griglia a due colonne
     non valgono piu': targhe e nastro tornano in fila. */
  .reviews-row > .reviews__meta,
  .reviews-row > .reviews-rail { grid-column: auto; grid-row: auto; }
  .reviews-rail { padding: 0; }
  .reviews-nav { display: none; }
  .reviews { grid-auto-columns: 86%; gap: 14px; }
  .quartet { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 0; }
  .counters { grid-template-columns: 1fr 1fr; }
  .shots--due, .shots--tre { grid-template-columns: 1fr; gap: 14px; }
  .gal-grid { gap: 12px; }
  .tappe { grid-template-columns: 1fr; }
  .tappa { min-height: 0; padding: 30px 24px; }
  .photo-cta { grid-template-columns: 1fr; gap: 16px; }
  .sec--foto { padding: 64px 0 72px; }
  .location__box { padding: 14px; gap: 14px; }
  .location__box .btn { width: 100%; text-align: center; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 30px; }
  .takeaway__actions .btn { width: 100%; min-width: 0; }

  /* ---- correzioni mobile del 22/10/2026 ---------------------------------
     Tutte e tre nascevano dalla stessa causa: misure prese sul desktop e
     lasciate valere anche sotto i 768px. ------------------------------- */

  /* La targa della sede aveva aspect-ratio 563/280 E min-height 280px: su uno
     schermo da 375px la min-height vinceva e il rapporto le calcolava una
     larghezza di 563px dentro una colonna di 343. Meta' scheda finiva fuori
     dallo schermo. Qui comanda l'altezza, la larghezza la da' la colonna. */
  .venue { aspect-ratio: auto; min-height: 240px; padding: 32px 20px; }
  .venue__content { gap: 16px; }

  /* 4px di spaziatura fra le lettere mandavano l'occhiello su due righe e la
     seconda usciva dal margine. */
  .eyebrow { letter-spacing: 2px; font-size: 13px; }
  .eyebrow--rule::before, .sec__head .eyebrow--rule::after { content: none; }

  /* Sul telefono si vede una pagina per volta (la libreria passa in
     verticale da sola sotto i 500px): la larghezza la da' l'altezza utile,
     una pagina sola = altezza x 0,707. La copertina prima dell'avvio prende
     tutta la riga. */
  .flip__libro { width: min(100%, calc((100svh - 200px) * .707)); }
  .flip:not(.is-pronto) .flip__book { width: 100%; margin-left: 0; }
  .lens__prev { left: 10px; }
  .lens__next { right: 10px; }
}