/* ═══════════════════════════════════════════════
   ILARIA LIPPI · Atelier Fotografico
   Aesthetic: warm, minimal, serif-editorial
═══════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  font-size: 17.5px;
}
@media (max-width: 600px) {
  html { font-size: 16.5px; }
}

.il-landing {
  --il-warm: #b8a699;
  --il-warm-dark: #9c8b7e;
  /* Beige scuro, SOLO per il pulsante delle schede prezzo (prima era quasi nero).
     Scelto per contrasto: bianco su questo fa 4.9:1, sopra la soglia AA di 4.5:1
     per il testo piccolo. Il beige generale --il-warm sta a 2.35:1 e resta
     invariato: qui si alza solo il comando principale del listino. */
  --il-warm-deep: #846d5c;
  --il-warm-light: #d4c8bc;
  --il-warm-lighter: #ece6e0;
  --il-warm-bg: #f9f6f3;
  --il-cream: #fdfbf9;
  --il-white: #ffffff;
  --il-text: #4a4039;
  --il-text-light: #7a6f64;
  --il-text-dark: #2e2620;
  /* ── NATALE ────────────────────────────────────────────────────────────
     Due soli colori in più, e stanno QUI e non nel blocco Natale in fondo al
     file perché la barra scorrevole è il primo figlio di .il-landing, prima
     ancora dell'header: una variabile dichiarata su `.il-nat-cal` non
     arriverebbe fin lì. Si cancellano insieme al blocco quando la landing va
     in pensione.
     Fondo del pannello del calendario e della barra scorrevole: NON è un
     colore nuovo, è lo stesso nero-bruno che `.il-hero` usa come fondo e che
     sta dentro tutte le velature `.il-videosec`. Gli mancava solo un nome. */
  --il-nat-notte: #1a1511;
  /* «Liberi» sulle caselle del calendario. La tavolozza è tutta calda e non ha
     un colore che dica «disponibile»: usando il warm, «Liberi» e «Ultimi
     posti» diventavano lo stesso colore. Salvia desaturata, scelta sul
     pannello notte: 9,4:1 di contrasto. ⚠️ Il colore non è MAI l'unico
     segnale — la parola è sempre scritta, e «Esaurito» ha in più il numero
     barrato. */
  --il-nat-libero: #a8c4a0;
  --il-font-serif: 'Cormorant Garamond', Georgia, serif;
  --il-font-sans: 'Montserrat', sans-serif;

  font-family: var(--il-font-sans, 'Montserrat', sans-serif);
  background: var(--il-cream);
  color: var(--il-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Tagliare lo sbordo orizzontale con `hidden` rende .il-landing un contenitore
     di scorrimento, e questo SPEGNE ogni `position: sticky` al suo interno
     (header, sezioni impilate, foto che scorrono in «Il mio stile»). `clip`
     taglia allo stesso modo senza creare lo scorrimento. La riga `hidden` resta
     come ripiego per i browser che non conoscono `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
}

.il-landing img {
  max-width: 100%;
  display: block;
}

.il-landing a {
  color: inherit;
  text-decoration: none;
}

/* Niente drag nativo di immagini e link: su un sito pieno di foto, il click-and-drag
   iniziato sopra un'immagine (o una card/anchor che la avvolge) faceva partire il
   trascinamento del file/link invece della selezione del testo. Disabilitandolo, il
   drag ricade sulla normale selezione del browser. La selezione del testo resta attiva
   (user-drag ≠ user-select). */
.il-landing img,
.il-landing a {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  user-drag: none;
}

/* ═══════════ NAV ═══════════ */
/* ── Indicatore di scorrimento ────────────────────────────────────────────────
   Filo alto 3px incollato in cima allo schermo, che cresce mano a mano che si
   legge la pagina. Sta SOPRA l'header — che invece si toglie di mezzo scorrendo
   in basso: l'indicatore non sparisce mai, è l'unico riferimento fisso.
   Lo muove `script.js` scrivendo `--il-progresso` (0 → 1) sul contenitore.
   ⚠️ Niente `transition` sulla barra: deve seguire il dito, non inseguirlo. */
.il-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 120;
  pointer-events: none;
}
.il-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--il-warm, #b8a699);
  transform: scaleX(var(--il-progresso, 0));
  transform-origin: left center;
  will-change: transform;
}

/* ⚠️ SPAZIO RISERVATO ALL'HEADER — è un rimedio al CLS, non impaginazione.
   L'header lo costruisce script.js (una sola fonte per 26 pagine): nel file c'è
   solo `<div data-include="header"></div>`, alto ZERO. E `.il-nav` è
   `position: sticky`, quindi occupa spazio nel flusso: quando lo script lo
   inietta, TUTTA la pagina sotto scatta giù di ~83px. Su rete lenta il browser
   dipinge prima dell'iniezione e lo scatto si vede: misurato con la strozzatura
   di PageSpeed (4G lento, CPU 4x), CLS 0,131 in home e 0,253 su
   servizio-gravidanza — cioè oltre il doppio della soglia di 0,1. In locale,
   senza strozzatura, lo script arriva prima del primo disegno e il CLS è 0: per
   questo il difetto non si vedeva.
   ⚠️ Il segnaposto viene SOSTITUITO, non riempito (script.js), quindi questa
   riserva vale solo prima dell'iniezione e non può lasciare nessun vuoto dopo.
   Se un giorno il valore non combaciasse più, l'effetto peggiore è che lo
   scatto torna in parte: non è un guasto visibile.
   I tre valori sono l'altezza REALE misurata di `.il-nav` ai suoi breakpoint
   (601px e 901px sono quelli già usati nel resto del file). Per rimisurarli:
   `getBoundingClientRect().height` di `.il-nav` a 390 / 820 / 1440 px. */
[data-include="header"],
[data-include="header-landing"] {
  min-height: 82.8px;
}
@media (max-width: 900px) {
  [data-include="header"],
  [data-include="header-landing"] { min-height: 79.3px; }
}
@media (max-width: 600px) {
  [data-include="header"],
  [data-include="header-landing"] { min-height: 67.9px; }
}
.il-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* si toglie di mezzo scorrendo in basso e torna appena si risale (classe
     .is-hidden messa da script.js) */
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 2.5rem;
  background: rgba(253, 251, 249, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--il-warm-lighter);
}
.il-nav.is-hidden { transform: translateY(-100%); }

.il-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.il-nav-logo img {
  width: 150px;
  height: auto;
  display: block;
  /* logo originale chiaro, lo scurisco al colore brand */
  filter: brightness(0) saturate(100%) invert(13%) sepia(15%) saturate(900%) hue-rotate(345deg) brightness(95%) contrast(92%);
  transition: filter 0.3s ease;
}
.il-nav-logo:hover img {
  filter: brightness(0) saturate(100%) invert(64%) sepia(12%) saturate(450%) hue-rotate(345deg) brightness(94%) contrast(88%);
}

.il-nav-menu {
  display: flex;
  gap: 2rem;
  flex: 1;
  justify-content: center;
}
.il-nav-menu a {
  font-size: 0.75rem;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--il-text);
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;
  padding-bottom: 4px;
}
.il-nav-menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--il-warm);
  transition: width 0.3s ease;
}
.il-nav-menu a:hover,
.il-nav-menu a.is-active {
  color: var(--il-warm);
}
.il-nav-menu a:hover::after,
.il-nav-menu a.is-active::after {
  width: 100%;
}

/* Submenu (dropdown) */
.il-nav-group {
  position: relative;
  display: flex;
  align-items: center;
}
.il-nav-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--il-text);
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0 0 4px;
  position: relative;
  transition: color 0.3s ease;
}
.il-nav-group-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--il-warm);
  transition: width 0.3s ease;
}
.il-nav-group-toggle:hover,
.il-nav-group.is-active .il-nav-group-toggle,
.il-nav-group.is-open .il-nav-group-toggle {
  color: var(--il-warm);
}
.il-nav-group-toggle:hover::after,
.il-nav-group.is-active .il-nav-group-toggle::after,
.il-nav-group.is-open .il-nav-group-toggle::after {
  width: 100%;
}
.il-nav-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}
.il-nav-group.is-open .il-nav-chevron {
  transform: rotate(180deg);
}
.il-nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 200px;
  background: var(--il-cream);
  border: 1px solid var(--il-warm-lighter);
  box-shadow: 0 14px 30px rgba(46, 38, 32, 0.1);
  padding: 0.8rem 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
  z-index: 60;
  margin-top: 10px;
}
/* Bridge the 10px gap so hover doesn't break when moving mouse from toggle to submenu */
.il-nav-submenu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.il-nav-group:hover .il-nav-submenu,
.il-nav-group.is-open .il-nav-submenu {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.3s ease, opacity 0.25s ease, visibility 0s linear 0s;
}
.il-nav-group:hover .il-nav-chevron {
  transform: rotate(180deg);
}
/* Gruppo "link" (es. Foto): label cliccabile + chevron separato per il sottomenu */
.il-nav-group-row {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.il-nav-group-toggle--link { text-decoration: none; }
.il-nav-group-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--il-text);
  padding: 0 0 4px;
  transition: color 0.3s ease;
}
.il-nav-group:hover .il-nav-group-chevron,
.il-nav-group.is-open .il-nav-group-chevron { color: var(--il-warm); }
.il-nav-submenu a {
  display: block;
  padding: 0.65rem 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--il-text);
  font-weight: 500;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.il-nav-submenu a::after { display: none; }
.il-nav-submenu a:hover,
.il-nav-submenu a.is-active {
  color: var(--il-warm);
  background: var(--il-warm-bg);
}

/* Mega-menu (Info e Prezzi → tutti i servizi) */
.il-nav-submenu--mega {
  min-width: 230px;
  padding: 0;
  left: 50%;
}
.il-nav-mega-photo {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  object-position: center 30%;
  border-bottom: 1px solid var(--il-warm-lighter);
}
.il-nav-mega-links {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}
.il-nav-mega-divider {
  height: 1px;
  background: var(--il-warm-lighter);
  margin: 0.4rem 1.4rem;
}

.il-nav-cta,
.il-nav-cta:link,
.il-nav-cta:visited,
.il-nav-cta:hover,
.il-nav-cta:active {
  color: #ffffff;
}
.il-nav-cta {
  font-size: 0.72rem;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  background: var(--il-warm);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.il-nav-cta:hover {
  background: var(--il-text-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(46, 38, 32, 0.18);
}

.il-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--il-text-dark);
  cursor: pointer;
  padding: 0.5rem;
}
.il-nav-toggle i {
  width: 24px;
  height: 24px;
}

/* ═══════════ HERO SLIDESHOW ═══════════ */
.il-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - 73px);
  min-height: 560px;
  overflow: hidden;
  background: #1a1511;
}
.il-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Dissolvenza fra le foto.
   Facendo sfumare le due immagini in contemporanea, a metà transizione erano
   entrambe semitrasparenti e si vedeva il fondo scuro: un lampo di buio a ogni
   cambio. Qui la foto nuova sale SOPRA (z-index) e compare, mentre la
   precedente resta piena finché non è coperta: la luce non cala mai. */
.il-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  transform: scale(1.06);
  transition: opacity 2.4s cubic-bezier(0.37, 0, 0.63, 1), transform 9s ease-out;
  will-change: opacity, transform;
}
/* La hero della HOME scrive le slide come <img> dentro il .il-hero-slide (vedi
   `ilSrcSlide` in script.js: il preload scanner del browser deve poterle
   trovare nell'HTML, mentre uno `background-image` si scopre solo dopo il CSS).
   Le gallerie delle pagine servizio restano su `background-image`: queste
   regole devono quindi rendere IDENTICHE alle due righe qui sopra
   (`background-size: cover` + `background-position: center 30%`).
   ⚠️ `width`/`height` al 100% servono anche a neutralizzare gli attributi
   `width`/`height` scritti sul tag: sono «hint di presentazione» a specificità
   zero, ma se il CSS sovrascrivesse solo una delle due dimensioni l'altra
   resterebbe quella dell'attributo (è il difetto già visto sul rullino e sul
   sigillo della garanzia). Qui le fissiamo entrambe, quindi non possono
   trapelare. Lo zoom `scale(1.06)` resta sul genitore e vale anche per l'<img>. */
.il-hero-slide > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.il-hero-slide.is-prev {
  opacity: 1;          /* resta visibile sotto la nuova per tutta la dissolvenza */
  z-index: 1;
  transform: scale(1); /* e ferma dov'era: nessun contro-zoom mentre sfuma */
}
.il-hero-slide.is-active {
  opacity: 1;
  z-index: 2;
  transform: scale(1);
}
.il-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(26,21,17,0.35) 0%, rgba(26,21,17,0.15) 35%, rgba(26,21,17,0.55) 100%),
    linear-gradient(90deg, rgba(26,21,17,0.45) 0%, rgba(26,21,17,0.1) 60%, rgba(26,21,17,0.35) 100%);
  pointer-events: none;
}
/* Faretto che segue il cursore.
   Un alone di luce «accende» la foto sotto il puntatore. Tre scelte, tutte per
   un motivo preciso:
   • sta FRA le slide e il velo scuro (`z-index: 1`, il velo è 2): sulla foto la
     luce arriva piena, dietro al titolo — dove il velo è più denso — arriva
     smorzata. Misurato sulle cinque foto della hero: con il faretto ADDOSSO al
     testo il contrasto cala di 0,08-0,20 punti sulle foto chiare (quelle dove
     si legge al limite) e di uno-due punti su quelle scure, che però partono
     da 7-9. Cioè: la luce si vede sulla foto e non sul testo;
   • è un riquadro di dimensione FISSA spostato con `transform`, non un
     gradiente ridisegnato a ogni frame: il browser lo sposta sul compositore
     senza ridipingere mezzo schermo a ogni movimento del mouse;
   • `mix-blend-mode: screen` invece di un bianco coprente: schiarisce senza
     lavare il colore della foto, come farebbe una luce vera.
   La posizione la scrive `script.js` in `--il-spot-x`/`--il-spot-y` (px).
   Per cambiare la FORZA della luce si tocca l'alfa dei primi due stop del
   gradiente, per la sua AMPIEZZA il `clamp()` della larghezza: sono gli
   unici due numeri che contano. ⚠️ Alzando la forza, rimisurare il
   contrasto del titolo con il faretto addosso (test `faretto.js`): sopra
   la foto chiara della prima slide il sottotitolo è già al limite. */
.il-hero-spot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: clamp(420px, 44vw, 780px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--il-ease-soft, ease);
  transform: translate3d(var(--il-spot-x, 0px), var(--il-spot-y, 0px), 0) translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
      rgba(255, 245, 228, 0.34) 0%,
      rgba(255, 245, 228, 0.22) 30%,
      rgba(255, 245, 228, 0.09) 58%,
      rgba(255, 245, 228, 0) 78%);
  mix-blend-mode: screen;
  will-change: transform;
}
.il-hero-spot.is-on { opacity: 1; }

.il-hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 4rem;
  color: #fff;
  /* niente fade sul contenitore: la sequenza è dei figli (@keyframes il-hero-in,
     sezione REVEAL). Il doppio fade accorciava la sequenza e sommava due
     traslazioni sullo stesso testo. */
}
.il-hero-dots {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 1.6rem;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
}
.il-hero-dots button {
  width: 34px;
  height: 3px;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.il-hero-dots button.is-active {
  background: #fff;
  width: 52px;
}
.il-hero-dots button:hover { background: rgba(255,255,255,0.75); }

.il-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 0.5rem 1.1rem;
  border-radius: 30px;
  margin-bottom: 1.5rem;
  align-self: flex-start;
}
.il-hero-badge i { width: 14px; height: 14px; }

.il-hero-title {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  color: #fff;
  line-height: 1.02;
  margin-bottom: 0.9rem;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
  max-width: 760px;
}
.il-hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--il-warm-light);
}

.il-hero-line {
  width: 64px;
  height: 1px;
  background: rgba(255,255,255,0.85);
  margin: 0.6rem 0 1.5rem;
}

.il-hero-subtitle {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 300;
  color: rgba(255,255,255,0.95);
  line-height: 1.8;
  max-width: 560px;
  margin-bottom: 1.8rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.il-hero-subtitle strong {
  color: #fff;
  font-weight: 500;
}

.il-hero-spots {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.8rem;
  font-weight: 500;
  align-self: flex-start;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.il-hero-spots i { width: 14px; height: 14px; }

.il-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}
.il-hero-content .il-cta-btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.15);
}
.il-hero-content .il-cta-btn-ghost:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}


/* ═══════════ CTA BUTTON ═══════════ */
.il-cta-btn,
.il-cta-btn:link,
.il-cta-btn:visited,
.il-cta-btn:hover,
.il-cta-btn:active,
.il-cta-btn:focus {
  /* Testo bianco di default; se l'accento scelto è troppo chiaro, script.js imposta
     --il-warm-contrast al testo scuro così il pulsante resta leggibile (no testo invisibile). */
  color: var(--il-warm-contrast, #ffffff);
}
.il-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--il-font-sans, 'Montserrat', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  background: var(--il-warm);
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--il-warm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease,
              box-shadow 0.3s ease, border-color 0.3s ease;
}
.il-cta-btn:hover {
  background: var(--il-text-dark);
  border-color: var(--il-text-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(184, 166, 153, 0.3);
}
.il-cta-btn i,
.il-cta-btn svg {
  width: 16px;
  height: 16px;
  color: #ffffff;
  stroke: #ffffff;
}

/* GHOST: scuro a riposo, bianco al hover */
.il-cta-btn-ghost,
.il-cta-btn-ghost:link,
.il-cta-btn-ghost:visited {
  background: transparent;
  color: var(--il-warm-dark);
  border-color: var(--il-warm-light);
}
.il-cta-btn-ghost i,
.il-cta-btn-ghost svg {
  color: var(--il-warm-dark);
  stroke: var(--il-warm-dark);
}
.il-cta-btn-ghost:hover,
.il-cta-btn-ghost:active,
.il-cta-btn-ghost:focus {
  background: var(--il-text-dark);
  color: #ffffff;
  border-color: var(--il-text-dark);
}
.il-cta-btn-ghost:hover i,
.il-cta-btn-ghost:hover svg {
  color: #ffffff;
  stroke: #ffffff;
}

/* BIANCO: bottone WhatsApp nell'hero su slideshow scuro */
.il-cta-btn-white,
.il-cta-btn-white:link,
.il-cta-btn-white:visited {
  background: #ffffff;
  color: var(--il-text-dark);
  border-color: #ffffff;
}
.il-cta-btn-white i,
.il-cta-btn-white svg {
  color: #128C7E;
  stroke: #128C7E;
}
.il-cta-btn-white:hover,
.il-cta-btn-white:active,
.il-cta-btn-white:focus {
  background: var(--il-text-dark);
  color: #ffffff;
  border-color: var(--il-text-dark);
}
.il-cta-btn-white:hover i,
.il-cta-btn-white:hover svg {
  color: #ffffff;
  stroke: #ffffff;
}

/* ═══════════ SECTION COMMON ═══════════ */
.il-sec {
  padding: 6rem 1.5rem;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.il-sec-label {
  font-size: 0.86rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--il-warm-dark);
  margin-bottom: 1.2rem;
  display: block;
  font-weight: 500;
}
.il-sec-heading {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 3.8vw, 3.3rem);
  color: var(--il-text-dark);
  line-height: 1.25;
  margin-bottom: 1.2rem;
}
.il-sec-heading em {
  font-style: italic;
  color: var(--il-warm);
}
.il-sec-text {
  font-size: 1.03rem;
  line-height: 1.85;
  color: var(--il-text-light);
  max-width: 600px;
  margin: 0 auto 2rem;
  font-weight: 300;
}
.il-sec-text strong {
  color: var(--il-text-dark);
  font-weight: 500;
}
.il-divider {
  width: 48px;
  height: 1px;
  background: var(--il-warm-light);
  margin: 0 auto 1.5rem;
}

/* ═══════════ SERVICES GRID ═══════════ */
.il-services {
  background: var(--il-warm-bg);
  padding-bottom: 5rem;
}
.il-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 2rem auto 0;
  padding: 0 1.5rem;
}
.il-service-card {
  background: var(--il-white);
  overflow: hidden;
  border: 1px solid var(--il-warm-lighter);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  display: flex;
  flex-direction: column;
}
.il-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(184, 166, 153, 0.15);
  border-color: var(--il-warm);
}
.il-service-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.il-service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.il-service-card:hover .il-service-img img {
  transform: scale(1.12);
}
.il-service-body {
  padding: 1.8rem 1.5rem 2rem;
  text-align: left;
  flex: 1;
}
.il-service-title {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--il-text-dark);
  margin: 0.4rem 0 0.6rem;
  line-height: 1.2;
}
.il-service-text {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--il-text-light);
  font-weight: 300;
}

/* Card servizi della home: titolo, sotto il periodo (ex sopratitolo) e in fondo
   «Scopri di più». A riposo è solo testo con un filo sotto; passandoci sopra la
   scritta diventa un bottone pieno e la freccia scorre in avanti. */
.il-service-title + .il-detail-label {
  margin: -0.15rem 0 1.1rem;
}
.il-service-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--il-font-sans, 'Montserrat', sans-serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--il-text-dark);
  padding: 0.7rem 0;
  border: 1px solid transparent;
  border-radius: 0;                            /* a riposo: filo dritto sotto la scritta */
  box-shadow: inset 0 -1px 0 var(--il-warm);
  transition: padding 0.45s var(--il-ease-soft), color 0.45s var(--il-ease-soft),
              background-color 0.45s var(--il-ease-soft), border-color 0.45s var(--il-ease-soft),
              border-radius 0.45s var(--il-ease-soft), box-shadow 0.45s var(--il-ease-soft);
}
.il-service-more i,
.il-service-more svg {
  width: 15px;
  height: 15px;
  transition: transform 0.45s var(--il-ease-soft);
}
.il-service-card:hover .il-service-more,
.il-service-card:focus-visible .il-service-more {
  background: var(--il-warm);
  border-color: var(--il-warm);
  color: #fff;
  padding: 0.7rem 1.5rem;
  box-shadow: none;
}
.il-service-card:hover .il-service-more i,
.il-service-card:hover .il-service-more svg {
  transform: translateX(5px);
}
.il-service-price {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--il-warm);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--il-warm-lighter);
  font-weight: 400;
}

/* ═══════════ PRODUCT CARDS ═══════════ */
.il-product-card { cursor: default; }
/* Il prezzo «a partire da» sta sotto la descrizione; il divisore lo dà già il
   pulsante WhatsApp, quindi qui niente bordo proprio (evita doppia riga). */
.il-product-card .il-service-price {
  margin-top: 0.6rem;
  padding-top: 0;
  border-top: none;
}
.il-product-card:hover .il-product-img img { transform: none; }
.il-product-img {
  position: relative;
  background: var(--il-warm-bg);
  background-image:
    linear-gradient(135deg, rgba(184,166,153,0.08) 25%, transparent 25%),
    linear-gradient(225deg, rgba(184,166,153,0.08) 25%, transparent 25%),
    linear-gradient(315deg, rgba(184,166,153,0.08) 25%, transparent 25%),
    linear-gradient(45deg,  rgba(184,166,153,0.08) 25%, transparent 25%);
  background-size: 22px 22px;
  background-position: 0 0, 11px 0, 11px -11px, 0 11px;
}
.il-product-img::after {
  content: 'Immagine in arrivo';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--il-warm-dark);
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* (vedi «FOTO MANCANTI» in fondo al file: il segnaposto non si mostra più) */
.il-product-btn {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--il-warm-lighter);
  width: 100%;
  justify-content: center;
  background: var(--il-warm);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
}
.il-product-btn i { width: 16px; height: 16px; }
.il-product-btn:hover { background: var(--il-text-dark); }

/* ═══════════ SPLIT SECTION ═══════════ */
.il-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.il-split-image {
  overflow: hidden;
  min-height: 480px;
}
.il-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.il-split-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 4rem;
  background: var(--il-white);
}
.il-split-content .il-sec-label,
.il-split-content .il-sec-heading,
.il-split-content .il-sec-text {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.il-split-content .il-sec-text {
  margin: 0 0 2rem;
  max-width: none;
}
.il-split-content .il-cta-btn {
  align-self: flex-start;
}

/* reversed split */
.il-split-reverse .il-split-image {
  order: 2;
}
.il-split-reverse .il-split-content {
  order: 1;
}

/* ═══════════ MOSAICO IN MOVIMENTO ═══════════
   Colonne di foto che scorrono lente in verticale, una in su e una in giù.
   Il ciclo è continuo perché script.js duplica le foto di ogni colonna e
   l'animazione trasla esattamente di metà: la seconda copia arriva dove stava
   la prima e il salto non si vede. Il `padding-bottom` pari al gap serve
   proprio a quello: senza, metà colonna non è mezzo ciclo e si vede lo scatto. */
.il-marquee-sec { background: var(--il-cream); }
/* Da impilata (si ferma in cima e la sezione dopo le scorre sopra) la fascia
   diventa alta 100vh: il mosaico ne occupa 76, quindi va centrato — altrimenti
   resta appeso in alto con una striscia di crema sotto. */
.il-marquee-sec.il-stack { display: flex; flex-direction: column; justify-content: center; }
.il-marquee {
  display: grid;
  /* CINQUE colonne a schermo intero. Il numero di colonne è l'unica cosa che
     decide quanto sono grandi le foto (la larghezza della colonna comanda,
     l'altezza della fascia dice solo quante se ne vedono insieme): passare da
     quattro a cinque è esattamente il -20% chiesto dalla titolare (345 → 274px
     a 1440) e, foto più basse, ne entrano di più in colonna. Le colonne scritte
     nelle pagine sono quattro: la quinta la compone script.js. */
  grid-template-columns: repeat(5, 1fr);
  /* le colonne NON si stirano all'altezza della più alta: l'animazione trasla
     di metà colonna, e se una colonna venisse allungata oltre il suo contenuto
     quella metà non sarebbe più mezzo ciclo e si vedrebbe lo scatto */
  align-items: start;
  gap: 0.7rem;
  /* ⚠️ MAI LA STESSA FOTO DUE VOLTE NELLA STESSA OCCHIATA. Ogni colonna ha N
     foto diverse ed è duplicata una volta (A…N A…N): le due copie distano N
     passi, quindi la seconda resta fuori solo se N passi coprono l'altezza
     della fascia. Chi si adatta a chi è cambiato il 28 agosto 2026: prima era
     l'ALTEZZA a doversi tenere sotto le 4 foto scritte in script.js (di qui il
     tetto in vw: 3,7 foto, N=5 → 42vw, N=4 → 52vw, N=3 → 70vw), ora è
     script.js a misurare la fascia e a metterci dentro tante foto quante ne
     servono (`quanteServono`). Il tetto in vw resta perché decide quante foto
     si vedono insieme — l'inquadratura del mosaico — e serve sugli schermi
     ALTI e stretti (iPad in verticale), dove 76vh da solo sforerebbe. Su
     telefono non c'è più: lì la fascia prende tutto lo schermo (vedi in fondo). */
  height: min(76vh, 50vw);
  padding: 0 0.7rem;
  overflow: hidden;
  /* NIENTE dissolvenza sopra e sotto (richiesta della titolare, 27 ago 2026):
     le foto sono tagliate di netto dal bordo della fascia. C'era una maschera
     `mask-image` che le sfumava (14%, poi 7% per parte) e faceva sembrare
     slavate le foto in cima e in fondo. Se un giorno la si vuole rimettere:
     `mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%)`. */
}
.il-marquee-col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-bottom: 0.7rem;   /* = gap: senza, metà colonna non è mezzo ciclo */
  /* Velocità dello scorrimento: 52s all'inizio, poi 41,6 (−25%) e ora 34,7
     (−20% ancora, richiesta della titolare del 28 ago 2026). È l'UNICO numero
     da toccare per cambiare il ritmo: vale per tutte le colonne, nei due versi. */
  animation: il-mq-up 34.7s linear infinite;
  will-change: transform;
}
.il-marquee-col.is-down { animation-name: il-mq-down; }
.il-marquee-col img {
  width: 100%;
  /* ⚠️ `height: auto` NON è decorativo: le pagine storiche scrivono le foto del
     mosaico senza attributi width/height, la landing di Natale invece li mette
     su OGNI <img> (27 foto senza dimensioni sono 27 salti di layout).
     L'attributo `height="1200"` è un «hint di presentazione», cioè una
     dichiarazione `height: 1200px` a specificità zero, e `aspect-ratio` calcola
     l'altezza SOLO quando l'altezza è `auto`: senza questa riga ogni foto del
     rullino resta alta 1200px. Misurato: 273×1200 invece di 273×154. Sulle
     altre dieci pagine la riga non cambia nulla. */
  height: auto;
  /* ⚠️ 3/2 = IL FORMATO NATIVO DEGLI SCATTI (richiesta della titolare, 2 set
     2026: «formato orizzontale deve essere 3:2 sennò mi taglia male
     l'immagine»). Misurato: 347 delle 348 foto orizzontali del rullino sono
     esattamente 1.50, quindi con questo rapporto `object-fit: cover` non
     ritaglia NIENTE. Prima era 16/9 e mangiava un quarto dell'altezza di ogni
     foto — teste e piedi.
     Storia: verticali 3/4 → 4/3 («sembravano quadrate») → 16/9 → 3/2.
     ⚠️ Cambiando questo rapporto cambia anche quante foto entrano in colonna
     (l'altezza della foto è larghezza × 2/3 invece di × 9/16, cioè +18,5%):
     vanno RICALCOLATI i quattro tetti in vw dell'altezza della fascia, qui
     sotto nei media query. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* ── Aspetto «foto stampata / diapositiva» ────────────────────────────────
     Cornice bianca, angoli tondi, ombra morbida e una leggera inclinazione,
     così il rullino sembra un mucchio di stampe sparse invece di una griglia.
     `box-sizing: border-box` serve perché la cornice è un `border`: senza, i
     14px si sommerebbero alla larghezza della colonna e le foto sborderebbero.
     ⚠️ L'inclinazione arriva da `--rot`/`--dx`, che script.js scrive su OGNI
     foto prima di duplicare la colonna: qui c'è solo il valore di ripiego (0),
     perché due copie con angoli diversi farebbero scattare l'immagine al punto
     di ciclo. Il `transform` è sulla FOTO, non sulla colonna: quello della
     colonna è l'animazione di scorrimento e si sovrascriverebbero. */
  box-sizing: border-box;
  border: 7px solid var(--il-white);
  border-radius: 9px;
  box-shadow: 0 10px 24px -10px rgba(46, 38, 32, 0.32);
  transform: rotate(var(--rot, 0deg)) translateX(var(--dx, 0px));
}
@keyframes il-mq-up   { from { transform: translateY(0); }     to { transform: translateY(-50%); } }
@keyframes il-mq-down { from { transform: translateY(-50%); }  to { transform: translateY(0); } }
.il-marquee-claim { padding-top: 3.5rem; }
/* Il blocco «Posso rendere felice anche te?» delle pagine servizio sta in una
   sezione SUA (prima era dentro quella del rullino): il rullino si ferma in cima
   e questa gli scorre sopra, quindi le serve un fondo pieno a tutta larghezza —
   `.il-sec` da solo è largo 820px e ai lati si sarebbe visto il mosaico passare
   sotto il testo. */
.il-marquee-claim-sec { background: var(--il-cream); }
/* Le colonne di troppo si nascondono: la griglia ne dichiara sempre quante ne
   restano visibili, altrimenti l'ultima lascerebbe una colonna vuota.
   Meno spazio in larghezza = meno colonne, così le foto non diventano
   francobolli su uno schermo stretto. */
@media (max-width: 1200px) {
  .il-marquee { grid-template-columns: repeat(4, 1fr); height: min(76vh, 62vw); }
  .il-marquee-col:nth-child(n+5) { display: none; }
}
@media (max-width: 900px) {
  .il-marquee { grid-template-columns: repeat(3, 1fr); height: min(76vh, 83vw); }
  .il-marquee-col:nth-child(n+4) { display: none; }
}
@media (max-width: 600px) {
  /* Su telefono due colonne: a tre le foto sarebbero larghe 120px.
     ⚠️ LA FASCIA PRENDE TUTTO LO SCHERMO (richiesta della titolare, 28 agosto
     2026: «da telefono deve prendere almeno tutta la schermata, ora ne prende
     metà»). Era `min(76vh, 104vw)` = 405px su un 390×844, cioè il 48%: a
     comandare era il tetto in vw, che serviva a non mostrare mai 4 o più foto
     in colonna — le colonne ne avevano 4 diverse e la stessa foto sarebbe
     comparsa due volte nella stessa occhiata. Adesso quel conto lo fa
     script.js (`quanteServono`), che riempie ogni colonna con tante foto
     diverse quante ne entrano nella fascia: su telefono ne mette 8 invece di 4
     e l'altezza è libera di arrivare a schermo pieno. */
  .il-marquee {
    grid-template-columns: repeat(2, 1fr);
    height: 100vh;    /* ripiego per i browser senza svh */
    height: 100svh;   /* la barra dell'indirizzo non fa ballare l'altezza */
    gap: 0.6rem;
    padding: 0 0.6rem;
  }
  .il-marquee-col { gap: 0.6rem; padding-bottom: 0.6rem; }
  .il-marquee-col:nth-child(n+3) { display: none; }
}

/* ═══════════ SEZIONI IMPILATE ═══════════
   Le sezioni marcate .il-stack si fermano in cima allo schermo e quella dopo
   ci scorre sopra, come un mazzo che si richiude. Tutto in CSS: `sticky` +
   ordine di disegno. Perché funzioni servono due cose:
   1. le sezioni impilate stanno SOTTO (z-index 0), tutte le altre sopra (1),
      altrimenti una sezione ferma coprirebbe quella che le scorre addosso;
   2. le sezioni impilate devono avere sfondo pieno, o si vedrebbe attraverso.
   Solo da 1001px: su telefono bloccare le sezioni rende lo scorrimento confuso. */
@media (min-width: 1001px) {
  .il-landing > section { position: relative; z-index: 1; }
  /* ⚠️ Una sezione `sticky` resta incollata in cima fino alla fine del suo
     GENITORE, che qui è tutta la pagina: quindi l'ultima impilata rimane lì
     sotto anche a pagina finita. Finché sopra ci passa qualcosa di opaco non
     si vede — ma il footer NON è una `section` e senza questa riga restava
     dietro alla sezione ferma (footer invisibile). */
  .il-landing > .il-footer { position: relative; z-index: 1; }
  /* ⚠️ SFONDO OBBLIGATORIO su ciò che scorre SOPRA. Il punto 2 del commento qui
     sopra vale al contrario: una sezione impilata resta ferma in cima per tutto
     il resto della pagina, quindi qualunque sezione senza sfondo che le passa
     addosso la lascia vedere e si leggono DUE testi sovrapposti (era il caso di
     `.il-article` — «Quando prenotare» sopra la fascia immagine+testo).
     `:where()` azzera la specificità: questo è solo un ripiego per le sezioni
     che non dichiarano sfondo, e qualunque regola con una classe (`.il-hero`,
     `.il-page-header`, `.il-prices`…) continua a vincere su di esso. */
  :where(.il-landing > section:not(.il-stack)) { background-color: var(--il-cream); }
  /* il selettore ripete `.il-landing > section` di proposito: senza, la riga qui
     sopra è più specifica e rimetterebbe `position: relative`, spegnendo tutto */
  .il-landing > section.il-stack {
    position: sticky;
    top: 0;
    z-index: 0;
    min-height: 100vh;
  }

  /* ═══ CODA DEL RULLINO ═══
     Quanto scroll il mosaico resta fermo e INTERO prima che la sezione dopo
     cominci a coprirlo. Senza, la coda è ZERO (misurato su tutte le pagine e a
     1440/1280): nell'istante esatto in cui la fascia si incolla in cima, il
     bordo della sezione successiva è già al fondo dello schermo e comincia a
     mangiarla — il mosaico non si vede mai per intero.
     ⚠️ Il ritardo si fa col MARGINE DELLA SEZIONE DOPO, non allungando la
     fascia: una sezione impilata più alta dello schermo perde il diritto a
     fermarsi (guardia in script.js: `altezza <= innerHeight + 2`), perché la
     parte sotto il bordo non arriverebbe mai in vista.
     Il margine è trasparente e la fascia sotto è `sticky`, quindi in quel
     tratto si vede il MOSAICO, non una striscia di crema — è l'unico posto del
     sito in cui un margine sopra una sezione è voluto (di norma è il difetto
     descritto nel commento delle SEZIONI IMPILATE: nel margine si vede la
     fascia rimasta incollata).
     ⚠️ Il selettore richiede `.il-stack`, che script.js mette SOLO quando la
     fascia ci sta nello schermo: se non è impilata, quel margine sarebbe un
     buco di crema vuota. E vale solo da 1001px, come tutto il resto
     dell'impilamento: su telefono le sezioni non sono `sticky`.
     Per cambiare la durata della pausa si tocca SOLO `--il-mq-coda`. */
  .il-landing > section.il-marquee-sec.il-stack + section {
    margin-top: var(--il-mq-coda, 50vh);
  }
}

/* ═══════════ SEZIONE CHE BLOCCA LO SCROLL (il mio stile) ═══════════
   La sezione è alta più di uno schermo: il suo contenuto resta incollato in
   cima (`sticky`) per tutta quell'altezza, e nel frattempo script.js fa
   scorrere di lato la fila di foto. Finite le foto, la pagina riprende.
   L'altezza qui sotto è la «corsa»: più è alta, più lentamente scorrono.
   Alzata da 300 a 340vh quando le foto sono passate da 5 a 6: a corsa uguale
   una fila più lunga scorrerebbe di lato più in fretta.
   Poi da 340 a 400vh per fare posto alla CODA (`IL_PIN_CODA` in script.js): l'ultimo
   quinto della corsa non fa più scorrere le foto, tiene ferma l'ultima in vista.
   340 × ... = 400 non è un numero a caso: la strada laterale resta quella di prima
   (0,8 × 300vh ≈ 240vh), la coda sono i 60vh in più. */
.il-pinsec {
  position: relative;
  height: 400vh;
  background: var(--il-cream);
}
.il-pinsec-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 33%) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  overflow: hidden;
  background: var(--il-cream);
}
.il-pinsec-text { padding: 0 2.5rem 0 4rem; }

/* La colonna di testo sta FERMA e le foto le passano DIETRO, mai sopra: il
   pannello qui sotto è la «tenda» crema che le nasconde. Copre tutta l'altezza
   della fascia e tutto ciò che sta a sinistra; l'overflow nascosto di
   .il-pinsec-inner ritaglia l'eccesso. Serve un pannello e non `overflow` sulla
   fila, perché la fila È l'elemento che viene traslato: ritagliarla
   ritaglierebbe se stessa.
   ⚠️ SOLO da 1001px in su. Sotto, la fascia diventa a colonna singola e il
   testo sta SOPRA le foto nel flusso: la tenda, che si estende 100vh più in
   basso, le coprirebbe tutte (sezione bianca su telefono e tablet). */
@media (min-width: 1001px) {
  .il-pinsec-text { position: relative; z-index: 2; }
  .il-pinsec-text::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -100vh;
    bottom: -100vh;
    left: -100vw;
    right: -1rem;        /* metà del gap: le foto spariscono poco prima del testo */
    background: var(--il-cream);
  }
}
.il-pinsec-text .il-sec-label,
.il-pinsec-text .il-sec-heading,
.il-pinsec-text .il-sec-text { text-align: left; margin-left: 0; margin-right: 0; }
.il-pinsec-text .il-sec-text { max-width: none; margin-bottom: 2rem; }
.il-pinsec-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 8vw;
  min-width: 0;          /* senza, la fila allargherebbe la colonna e non sborderebbe */
  will-change: transform;
}
.il-pinsec-photo {
  flex: 0 0 clamp(240px, 24vw, 400px);
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--il-warm-bg);
}
.il-pinsec-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* foto costruite dalle slide delle pagine servizio: l'immagine è di sfondo,
   come lo era nella slide di partenza (nessun alt da inventare) */
.il-pinsec-photo { background-size: cover; background-position: center; }

/* Variante senza colonna di testo: la fila di foto occupa tutta la fascia
   (gallerie delle pagine servizio). La galleria nasce come riquadro centrato
   con proporzione fissa e `overflow: hidden`; da fascia deve diventare piena
   larghezza e — soprattutto — NON ritagliare: `hidden` la renderebbe un
   contenitore di scorrimento e spegnerebbe il blocco dello scroll al suo interno. */
.il-service-gallery.il-pinsec {
  width: 100%;
  margin: 0;
  aspect-ratio: auto;
  overflow: visible;
  background: var(--il-cream);
  /* la corsa la calcola script.js sul numero di foto e la scrive in --il-pin-h;
     è una variabile e non `style.height` perché una regola inline non si
     potrebbe scavalcare sugli schermi bassi (vedi @media max-height: 700px) */
  height: var(--il-pin-h, 400vh);
}
.il-pinsec-full { grid-template-columns: minmax(0, 1fr); }
.il-pinsec-full .il-pinsec-track { padding-left: 4vw; }
/* qui le foto sono le protagoniste: si dimensionano sull'altezza della fascia
   (e la larghezza segue la proporzione), così riempiono lo schermo e sborda
   abbastanza fila da avere qualcosa da far scorrere anche con 3 sole foto */
.il-pinsec-full .il-pinsec-photo {
  flex: 0 0 auto;
  width: auto;
  height: min(84vh, 780px);
}

/* Schermi BASSI (portatile da 13" con barre e schede: ~700px utili). Il testo
   non ci sta nei 100vh della fascia e l'`overflow: hidden` lo mozzava: sparivano
   le ultime righe e il pulsante «Scopri come lavoro», che restava anche
   incliccabile. Qui la colonna si stringe invece di essere tagliata. */
@media (min-width: 1001px) and (max-height: 840px) {
  .il-pinsec-text { padding: 0 2rem 0 3rem; }
  .il-pinsec-text .il-sec-label { margin-bottom: 0.7rem; }
  .il-pinsec-text .il-sec-heading { font-size: clamp(1.75rem, 2.6vw, 2.4rem); margin-bottom: 0.8rem; }
  .il-pinsec-text .il-sec-text { font-size: 0.95rem; line-height: 1.65; margin-bottom: 1.1rem; }
  .il-pinsec-text .il-cta-btn { padding: 0.75rem 1.6rem; }
  .il-pinsec-photo { flex: 0 0 clamp(190px, 19vw, 320px); }
}
/* Sotto i ~700px di altezza non c'è compressione tipografica che tenga: la
   fascia smette di bloccarsi e si comporta come su telefono (altezza libera,
   foto che si sfogliano). Meglio perdere l'effetto che il contenuto. */
@media (min-width: 1001px) and (max-height: 700px) {
  .il-pinsec { height: auto; }
  /* due classi come la regola che imposta --il-pin-h: con una sola perdeva il
     confronto di specificità e la galleria restava alta 320vh (vuota) */
  .il-service-gallery.il-pinsec { height: auto; }
  .il-pinsec-inner { position: static; height: auto; padding: 3rem 0; align-items: center; }
  .il-pinsec-track { transform: none !important; overflow-x: auto; scrollbar-width: none; padding-right: 2rem; }
  .il-pinsec-track::-webkit-scrollbar { display: none; }
  .il-pinsec-photo.il-paint { opacity: 1; transform: none; transition: none; }
  .il-pinsec-photo.il-paint::after { display: none; }
  .il-pinsec-photo.il-paint img { transform: none; }
}

/* Sotto i 1000px niente blocco dello scroll (su telefono è fastidioso): la
   sezione torna alta quanto serve e le foto si sfogliano con il dito. */
@media (max-width: 1000px) {
  .il-pinsec { height: auto; }
  .il-pinsec-inner {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    padding: 3.5rem 0;
  }
  .il-pinsec-text { padding: 0 1.5rem 2rem; text-align: center; }
  .il-pinsec-text .il-sec-label,
  .il-pinsec-text .il-sec-heading,
  .il-pinsec-text .il-sec-text { text-align: center; }
  .il-pinsec-text .il-cta-btn { align-self: center; }
  /* ⚠️ `:not(.il-pinm)`: il `transform: none !important` qui sotto è servito per
     anni a spegnere la traslazione del motore desktop su telefono. Ora su
     telefono la fascia PUÒ bloccarsi: se la regola valesse anche lì, la fila
     resterebbe ferma per sempre (l'`!important` batte lo stile inline del
     motore) e si vedrebbero solo le prime due foto. */
  .il-pinsec:not(.il-pinm) .il-pinsec-track {
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 1.2rem;
    padding: 0 1.2rem 0.6rem;
    scrollbar-width: none;
  }
  .il-pinsec-track::-webkit-scrollbar { display: none; }
  .il-pinsec:not(.il-pinm) .il-pinsec-photo { flex-basis: 76%; scroll-snap-align: start; scroll-snap-stop: always; }
  /* Dentro un carosello l'entrata a comparsa non ha senso: è pensata per lo
     scorrimento verticale. Peggio — le foto che stanno fuori a destra non
     entrano mai in vista da sole, quindi restavano a opacità 0 finché non le si
     sfogliava. Qui si mostrano e basta (stessa scelta delle card servizi). */
  .il-pinsec-photo.il-paint { opacity: 1; transform: none; transition: none; }
  .il-pinsec-photo.il-paint::after { display: none; }
  .il-pinsec-photo.il-paint img { transform: none; }
}

/* ═══════════ BLOCCO DELLO SCORRIMENTO SU TELEFONO E TABLET ═══════════
   Richiesta della titolare (25 agosto 2026): «da mobile, nella home e nelle altre
   pagine, quando scrollo si deve bloccare e far vedere tutti i servizi, stessa
   cosa per le immagini». Su telefono le file (card servizi, foto di «Il mio
   stile», gallerie dei servizi) erano caroselli da sfogliare col dito: chi non
   provava a trascinare vedeva due card e pensava che il sito ne avesse due.

   Il meccanismo NON è quello del desktop. Lì la fascia è alta 400vh e il
   contenitore interno è `sticky`, col testo di fianco alle foto. Su un telefono
   il solo testo di «Il mio stile» è alto 539px su 844 di schermo: dentro un
   blocco a tutto schermo non ci starebbe nulla. Quindi qui il testo SCORRE
   normalmente e si blocca solo la FILA, che si prende tutto lo schermo:

     <section class="… il-pinm">
       ├── testo / intestazione        ← scorre e se ne va
       ├── .il-pinm-vista             ← position: sticky, alta 100svh: contiene la fila
       │      └── fila (.il-pinsec-track | .il-services-grid)  ← traslata da script.js
       └── .il-pinm-spazio            ← alta `--il-pinm-corsa`: È la strada del blocco

   ⚠️ LA CORSA DEVE STARE IN UN ELEMENTO, NON IN UN `padding-bottom`: un elemento
   `sticky` è vincolato al *content box* del genitore, e il padding NON ne fa
   parte. Con la corsa messa a padding la fila non si blocca nemmeno per un
   pixel (verificato: si continua a muovere con la pagina). Da qui il
   distanziatore vero.
   ⚠️ `.il-pinsec-inner` va rimesso a `overflow: visible`: il suo `overflow:
   hidden` (regola base, serve al desktop) lo rende un contenitore di
   scorrimento, e uno `sticky` dentro un contenitore di scorrimento si «blocca»
   rispetto a quello, cioè non si blocca affatto. Il ritaglio orizzontale lo fa
   la vista (`overflow: clip`, che invece NON crea un contenitore di scorrimento).
   Le classi le mette script.js (che decide anche se il blocco è possibile:
   niente con `prefers-reduced-motion`, niente sui browser senza `overflow: clip`
   — dove `.il-landing` ripiega su `overflow-x: hidden` e ogni sticky è spento —
   e niente sotto i 520px di altezza, cioè telefono in orizzontale). */
@media (max-width: 1000px) {
  .il-pinm-vista {
    position: sticky;
    top: 0;
    height: 100vh;        /* ripiego per i browser senza svh */
    height: 100svh;       /* la barra indirizzi non fa ballare l'altezza */
    display: flex;
    align-items: center;
    overflow: clip;       /* NON hidden: vedi sopra */
    /* Qui il dito muove la PAGINA, non la fila (che non è più un contenitore di
       scorrimento). Dichiararlo serve a far risolvere subito come verticale un
       colpo diagonale, invece di lasciarlo ambiguo mentre il browser decide.
       ⚠️ NON cambiare la vista in `flex-direction: column` (p.es. per infilarci
       una barra di avanzamento): in colonna l'`align-items: center` diventa
       l'asse ORIZZONTALE e la fila — larga più di 2000px — si centrerebbe
       sbordando da entrambe le parti, dimezzando l'eccesso misurato: metà delle
       foto non arriverebbe mai in vista. */
    touch-action: pan-y;
  }
  .il-pinm-spazio { height: var(--il-pinm-corsa, 0px); }

  /* la fila: non più un contenitore di scorrimento, la muove lo scroll */
  .il-pinm .il-pinsec-track,
  .il-pinm .il-services-grid {
    display: flex;
    height: 100%;
    align-items: center;
    overflow: visible;
    scroll-snap-type: none;
    gap: 1rem;
    padding: 0 1.2rem;
    margin: 0;
    max-width: none;
    will-change: transform;
  }
  .il-pinm .il-pinsec-inner {
    display: block;
    padding-bottom: 0;
    overflow: visible;    /* altrimenti lo sticky interno non si blocca */
  }
  .il-pinm.il-pinsec { height: auto; }

  /* Foto: si dimensionano sulla LARGHEZZA (una per schermata, come faceva il
     carosello con `flex-basis: 76%`), col secondo limite in `svh` che le tiene
     dentro la fascia. `aspect-ratio: 3/4` fa il resto.
     ⚠️ Il secondo limite era `46svh` e su uno schermo BASSO diventava lui a
     decidere: a 375×555 la foto veniva 255×340, cioè riempiva il **61%** della
     fascia — su un tablet 820×1180 il 61% pure. Con `60svh` il limite di
     larghezza torna a essere quello che comanda sui telefoni (dove una 3:4 non
     può essere insieme larga 86vw e alta più di metà schermo: è geometria) e
     sugli schermi bassi e sui tablet la foto arriva al ~78-80% dell'altezza. */
  .il-pinm .il-pinsec-photo {
    flex: 0 0 auto;
    width: min(86vw, 60svh);
    height: auto;
    max-height: 100%;
  }
  /* Card servizi: altezza legata alla vista, foto elastica. Senza `min-height: 0`
     la foto non si stringe (regola implicita dei flex item) e la card sfonda. */
  .il-pinm .il-service-card {
    flex: 0 0 min(84vw, 380px);
    height: min(86%, 620px);
  }
  .il-pinm .il-service-card .il-service-img {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }

  /* ⚠️ Le entrate a comparsa restano SPENTE dentro una fila che si blocca: gli
     elementi fuori dallo schermo a destra sono «in vista» per
     l'IntersectionObserver (lo sono verticalmente), quindi entrerebbero tutti
     insieme al primo fotogramma — e quelli che l'osservatore non vede
     resterebbero a opacità 0 per sempre. Vale a ogni larghezza: la regola del
     carosello sta in `@media (max-width: 900px)` e fra 901 e 1000px non c'era. */
  .il-pinm .il-reveal,
  .il-pinm .il-paint,
  .il-pinm .il-pinsec-photo.il-paint {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .il-pinm .il-paint::after { display: none; }
  .il-pinm .il-paint img { transform: none; }
}

/* ═══════════ SEZIONE CON VIDEO DI SFONDO (atelier) ═══════════
   Fascia a tutta larghezza: il video riempie il riquadro, una velatura scura lo
   tiene leggibile e il testo ci sta sopra.
   ⚠️ NIENTE margini verticali: la sezione è impilata (.il-stack, `sticky`) e
   quella prima di lei — «Il mio stile» — pure. Un margine qui apriva una fascia
   vuota fra le due, e in quella fascia si vedeva la sezione rimasta incollata
   in cima (l'«immagine + testo» di apertura): sembrava un buco nella pagina.
   Se il video non c'è (o il browser non lo può riprodurre) resta la foto di
   sfondo: la sezione non si rompe mai. */
.il-videosec {
  position: relative;
  margin: 0;
  min-height: 100vh;    /* a tutta pagina: scorrendoci dentro riempie lo schermo */
  min-height: 100svh;   /* su telefono senza contare le barre del browser */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;   /* tiene video e velatura dentro la sezione */
}
.il-videosec-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  background: var(--il-warm-bg);
  /* Il filmato è uno sfondo, non il soggetto: un filo di luce e colore in meno
     lo tiene indietro rispetto al testo (e attenua i video molto accesi). */
  filter: brightness(0.86) saturate(0.85);
}
/* Video di sfondo preso da YouTube (SEGNAPOSTO, vedi il commento in index.html).
   L'iframe di YouTube ha proporzione fissa 16:9 e non conosce `object-fit`:
   per riempire la fascia senza bande nere lo si fa più grande del riquadro in
   entrambi i versi (16:9 sulla larghezza E sull'altezza, vince il maggiore) e
   lo si centra. `pointer-events: none` manda i clic alla pagina, non al player. */
.il-videosec-yt {
  overflow: hidden;
  background: transparent;
  /* Il player di YouTube incornicia il filmato con due bande nere quando questo
     non è esattamente 16:9. Si ingrandisce l'iframe di un quinto abbondante,
     così le bande finiscono fuori dalla fascia: si perde un filo di immagine ai
     bordi, ma è uno sfondo e nessuno lo guarda al millimetro. */
  --yt-zoom: 1.22;
}
.il-videosec-yt iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw * var(--yt-zoom));
  height: calc(56.25vw * var(--yt-zoom));      /* 16:9 calcolato sulla larghezza */
  min-width: calc(177.78vh * var(--yt-zoom)); /* 16:9 calcolato sull'altezza */
  min-height: calc(100vh * var(--yt-zoom));
  border: 0;
  pointer-events: none;
}
/* Le misure qui sopra sono in vw/vh, cioè sullo SCHERMO: vanno bene finché la
   fascia è alta quanto il viewport, ma se il testo la fa crescere (telefono in
   orizzontale, dove #atelier diventa più alto di 100vh) l'iframe resta corto e
   ricompaiono le bande nere. Con le unità di contenitore le stesse misure si
   riferiscono alla FASCIA, e la copertura è esatta a ogni proporzione. */
@supports (width: 1cqw) {
  .il-videosec-yt { container-type: size; }
  .il-videosec-yt iframe {
    width: calc(100cqw * var(--yt-zoom));
    height: calc(56.25cqw * var(--yt-zoom));
    min-width: calc(177.78cqh * var(--yt-zoom));
    min-height: calc(100cqh * var(--yt-zoom));
  }
}
/* Velatura: il testo sta al CENTRO della fascia, e un solo gradiente verticale
   proprio lì scendeva a 0,35 — se in quel punto del filmato capita una zona
   chiara (un viso, una parete illuminata) il bianco spariva. Come nella hero su
   telefono, si somma una macchia scura centrata sul testo al velo verticale:
   la foto resta viva ai bordi, il testo ha sempre un fondo suo. */
.il-videosec-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(115% 72% at 50% 50%, rgba(20,15,12,0.58) 0%, rgba(20,15,12,0.34) 55%, rgba(20,15,12,0) 100%),
    linear-gradient(180deg, rgba(26,21,17,0.55) 0%, rgba(26,21,17,0.42) 45%, rgba(26,21,17,0.7) 100%);
  pointer-events: none;
}
.il-videosec-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 5rem 1.5rem;
  text-align: center;
}
/* Due ombre per riga: una larga e morbida che stacca dal fondo, una stretta e
   fitta che ridisegna il bordo delle lettere (i pesi leggeri su video si
   sfilacciano con la sola ombra larga). */
.il-videosec-content .il-sec-label {
  color: var(--il-warm-lighter);
  text-shadow: 0 1px 14px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.5);
}
.il-videosec-content .il-sec-heading {
  color: #fff;
  text-shadow: 0 2px 26px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
}
.il-videosec-content .il-sec-text {
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 16px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.55);
}
/* le parole in grassetto ereditavano il colore scuro del testo di pagina:
   sul video restavano illeggibili */
.il-videosec-content .il-sec-text strong { color: #fff; font-weight: 600; }
.il-videosec-content .il-cta-btn { margin-top: 0.6rem; }

/* ═══════════ GUARANTEE ═══════════ */
.il-guarantee {
  padding: 5rem 1.5rem;
  background: var(--il-warm-bg);
}
/* Tre figli: sigillo · testo · bottone. Il bottone sta FUORI dal blocco di testo
   perché su telefono il sigillo deve infilarsi fra i due (richiesta della
   titolare: «il logo garanzia prima del bottone, non a inizio sezione») — e da
   dentro il testo non c'era modo di farcelo stare con il solo CSS.
   Sul desktop la disposizione è quella di sempre: sigillo a sinistra centrato in
   verticale, testo a destra, bottone sotto il testo attaccato al suo fondo.
   ⚠️ `row-gap: 0`: il sigillo scavalca due righe, e sulle pagine senza bottone
   (garanzia.html) la seconda riga resta vuota — con un gap di riga si sarebbero
   aperti 4rem di vuoto sotto la fascia. Lo spazio fra testo e bottone è 0 anche
   oggi (il paragrafo finisce con `margin-bottom: 0`). */
.il-guarantee-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  column-gap: 4rem;
  row-gap: 0;
  align-items: center;
}
.il-guarantee-inner > .il-guarantee-seal { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.il-guarantee-inner > .il-guarantee-text { grid-column: 2; grid-row: 1; }
/* `justify-self: start`, altrimenti un elemento di griglia si stira per tutta la
   colonna e il bottone diventerebbe largo 650px. */
.il-guarantee-inner > .il-cta-btn { grid-column: 2; grid-row: 2; justify-self: start; }
.il-guarantee-seal img {
  width: 100%;
  height: auto;      /* ⚠️ stessa trappola del rullino: con `height="600"` nel
                        markup e nessuna altezza in CSS il sigillo diventa
                        280×600, uno schiacciasassi. Sulle altre 12 pagine che
                        hanno il sigillo la riga è un no-op. */
  max-width: 280px;
  margin: 0 auto;
  filter: drop-shadow(0 8px 20px rgba(184, 166, 153, 0.2));
}
.il-guarantee-text .il-sec-label,
.il-guarantee-text .il-sec-heading,
.il-guarantee-text .il-sec-text {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.il-guarantee-text .il-sec-text {
  max-width: none;
  margin-bottom: 0;
}

/* ═══════════ DETAILS ═══════════ */
.il-details {
  padding: 4rem 1.5rem 6rem;
  background: var(--il-cream);
}
/* ⚠️⚠️ IL MAZZO DI CARTE SPOSTA I FIGLI: ogni regola qui sotto nomina DUE
   genitori. Quando la fascia ha tre o più card, script.js infila TUTTO il
   contenuto della sezione dentro un involucro (`.il-deckpin-inner`, che è
   l'elemento che si incolla in cima) — quindi etichetta e titolo smettono di
   essere figli DIRETTI di `.il-details` e ogni selettore scritto con `>` smette
   di valere, in silenzio.
   È così che su `chi-sono.html` il titolo «6 curiosità su di me» perdeva
   centraggio e colonna di lettura: restava incollato al bordo sinistro mentre
   le card sotto continuavano a essere centrate, e la fascia sembrava sbilanciata
   verso destra. Non era un margine asimmetrico: era il centraggio che non
   arrivava più.
   Le altre 13 pagine con `.il-details` non se n'erano accorte perché lì
   etichetta e titolo stanno dentro un `<div class="il-sec">`, che si centra da
   sé; su chi-sono (e su passaparola, che però ha due sole card e quindi niente
   mazzo) sono figli diretti della sezione.
   ⚠️ Scrivendo una nuova regola per l'intestazione di `.il-details`, ripetere
   SEMPRE i due genitori: `:is(.il-details, .il-deckpin-inner) > …`. `:is()` non
   alza la specificità (i due argomenti sono entrambi classi), quindi il resto
   del foglio non cambia peso. */
/* Intestazione FACOLTATIVA della fascia: i due campi vivono nel file come slot
   da riempire dall'editor e restano invisibili finché sono vuoti (stesso patto
   degli slot FAQ). Vuoti devono sparire davvero, non solo essere trasparenti:
   il loro margine lascerebbe comunque il buco. */
:is(.il-details, .il-deckpin-inner) > .il-sec-label:empty,
:is(.il-details, .il-deckpin-inner) > .il-sec-heading:empty { display: none; }
/* Quando è piena va centrata come ogni altra intestazione del sito: la fascia
   «Cosa è incluso» non è una .il-sec, quindi non eredita né il centraggio né la
   colonna di lettura, e il titolo restava incollato al bordo sinistro. */
:is(.il-details, .il-deckpin-inner) > .il-sec-label,
:is(.il-details, .il-deckpin-inner) > .il-sec-heading {
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
/* Senza intestazione la fascia non deve conservare lo spazio che le serviva:
   su passaparola restavano ~130px di crema vuota sopra le card e ~260px fra le
   card e l'articolo. La condizione è sul CONTENUTO, non sulla pagina: appena la
   titolare scrive un titolo, l'aria di prima torna da sola.
   ⚠️ `:where()` intorno ai due nomi di classe tiene la specificità IDENTICA a
   com'era prima che il ramo del mazzo entrasse nel selettore: senza, queste
   regole scavalcherebbero il `padding: 0` di `.il-details.il-deckpin`. */
.il-details:not(:has(> :where(.il-sec-label, .il-sec-heading):not(:empty),
                     > .il-deckpin-inner > :where(.il-sec-label, .il-sec-heading):not(:empty))) {
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.il-details:not(:has(> :where(.il-sec-label, .il-sec-heading):not(:empty),
                     > .il-deckpin-inner > :where(.il-sec-label, .il-sec-heading):not(:empty))) .il-details-grid {
  margin-top: 0;
}
/* …e nemmeno l'articolo che la segue: due imbottiture piene di fila (3rem + 5rem)
   sono ~140px di crema vuota fra le card e il primo titolo. */
.il-details:not(:has(> :where(.il-sec-label, .il-sec-heading):not(:empty),
                     > .il-deckpin-inner > :where(.il-sec-label, .il-sec-heading):not(:empty))) + .il-article {
  padding-top: 2.5rem;
}
.il-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 1000px;
  margin: 2.5rem auto 0;
}
/* Intestazione della card: etichetta a sinistra, icona (più grande) a destra.
   Griglia e non flex perché nell'HTML l'icona sta PRIMA dell'etichetta: così si
   invertono le posizioni senza toccare le 12 pagine (e senza confondere
   l'editor dei testi, che legge le stringhe nell'ordine del file). */
.il-detail-item {
  background: var(--il-white);
  padding: 2rem 1.8rem;
  border: 1px solid var(--il-warm-lighter);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
}
.il-detail-item > .il-detail-icon { grid-area: 1 / 2; margin-bottom: 0; }
.il-detail-item > .il-detail-label { grid-area: 1 / 1; margin-bottom: 0; }
.il-detail-item > .il-detail-value { grid-area: 2 / 1 / auto / -1; margin-top: 1rem; }
.il-detail-item > .il-detail-note { grid-area: 3 / 1 / auto / -1; }
.il-detail-item:hover {
  border-color: var(--il-warm);
  box-shadow: 0 6px 25px rgba(184, 166, 153, 0.1);
  transform: translateY(-2px);
}
.il-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  color: var(--il-warm);
  background: var(--il-warm-bg);
  border-radius: 50%;
}
.il-detail-icon i { width: 28px; height: 28px; }
.il-detail-label {
  font-size: 0.65rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--il-warm);
  margin-bottom: 0.45rem;
  font-weight: 500;
}
.il-detail-value {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--il-text-dark);
  margin-bottom: 0.35rem;
  line-height: 1.2;
}
.il-detail-note {
  font-size: 0.9rem;
  color: var(--il-text-light);
  font-weight: 300;
  line-height: 1.6;
}

/* ═══════════ TESTIMONIALS ═══════════ */
.il-testimonials {
  padding: 0 1.5rem 6rem;
  background: var(--il-warm-bg);
}
.il-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 2rem auto 0;
}
.il-quote {
  background: var(--il-white);
  padding: 2.5rem 2rem 2rem;
  border: 1px solid var(--il-warm-lighter);
  position: relative;
  display: flex;
  flex-direction: column;
}
.il-quote-icon {
  width: 28px !important;
  height: 28px !important;
  color: var(--il-warm-light);
  margin-bottom: 1rem;
}
.il-quote p {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: var(--il-text);
  margin-bottom: 1.2rem;
  flex: 1;
}
.il-quote footer {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--il-warm);
  font-weight: 500;
}
.il-quote-rating { letter-spacing: 0; }
.il-quote-when {
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--il-text-light);
  font-weight: 400;
  font-size: 0.7rem;
}

/* ── Stelle recensioni ── */
.il-stars {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 1px;
}
.il-stars-on { color: #fbbc05; }
.il-stars-off { color: var(--il-warm-light); }

/* ── Badge voto Google ── */
.il-gbadge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
  padding: 0.6rem 1.15rem;
  background: var(--il-white);
  border: 1px solid var(--il-warm-lighter);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(74, 64, 57, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.il-gbadge:hover {
  box-shadow: 0 8px 26px rgba(74, 64, 57, 0.12);
  transform: translateY(-1px);
}
.il-gbadge-logo { display: inline-flex; flex: none; }
.il-gbadge-body { display: flex; flex-direction: column; gap: 0.1rem; text-align: left; }
.il-gbadge-top { display: flex; align-items: center; gap: 0.5rem; }
.il-gbadge-rating {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--il-text-dark);
  line-height: 1;
}
.il-gbadge .il-stars { font-size: 1rem; }
.il-gbadge-count {
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--il-text-light);
}

/* ═══════════ FAQ ═══════════ */
.il-faq {
  padding: 0 1.5rem 6rem;
  background: var(--il-cream);
}
.il-faq-list {
  max-width: 780px;
  margin: 2rem auto 0;
}
.il-faq-item {
  border-bottom: 1px solid var(--il-warm-lighter);
}
.il-faq-item:first-child {
  border-top: 1px solid var(--il-warm-lighter);
}
.il-faq-btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.4rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-align: left;
  font-family: var(--il-font-sans, 'Montserrat', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--il-text-dark);
  line-height: 1.4;
  transition: color 0.2s;
}
.il-faq-btn:hover {
  color: var(--il-warm-dark);
}
.il-faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--il-warm);
  transition: transform 0.28s ease;
}
.il-faq-item.is-open .il-faq-icon {
  transform: rotate(45deg);
}
.il-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.il-faq-item.is-open .il-faq-answer {
  grid-template-rows: 1fr;
}
.il-faq-answer-inner {
  overflow: hidden;
  min-height: 0; /* indispensabile: senza, il grid item non collassa a 0fr (risposta resta visibile) */
  color: var(--il-text);
  font-size: 0.96rem;
  line-height: 1.75;
}
/* Il padding va applicato SOLO da aperto: sul grid item il padding non collassa
   con la riga 0fr, quindi da chiuso lascerebbe visibile la prima riga. */
.il-faq-item.is-open .il-faq-answer-inner {
  padding-bottom: 1.4rem;
}
.il-faq-answer-inner p {
  margin: 0 0 0.8rem;
}
.il-faq-answer-inner > :last-child {
  margin-bottom: 0;
}
.il-faq-answer-inner a {
  color: var(--il-warm-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.il-faq-answer-inner a:hover {
  color: var(--il-warm);
}
.il-faq-answer-inner ul,
.il-faq-answer-inner ol {
  margin: 0 0 0.8rem;
  padding-left: 1.4rem;
}
.il-faq-answer-inner li {
  margin-bottom: 0.3rem;
}

/* ═══════════ FINAL CTA ═══════════ */
.il-cta {
  padding: 6rem 1.5rem;
  text-align: center;
  background: var(--il-warm-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.il-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--il-warm-light), transparent);
}
.il-cta-title {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  color: var(--il-text-dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.il-cta-title em {
  font-style: italic;
  color: var(--il-warm);
}
.il-cta-text {
  font-size: 1.02rem;
  color: var(--il-text-light);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.8;
  font-weight: 300;
}
.il-cta .il-hero-ctas {
  justify-content: center;
}
.il-cta-urgency {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--il-warm);
  margin-top: 1.8rem;
  font-weight: 500;
}
.il-cta-urgency i { width: 14px; height: 14px; }

/* ═══════════ FOOTER ═══════════ */
.il-footer {
  padding: 3rem 1.5rem 2.5rem;
  text-align: center;
  background: var(--il-text-dark);
  color: var(--il-warm-light);
}
.il-footer-logo {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--il-white);
  margin-bottom: 0.6rem;
}
.il-footer-info {
  font-size: 0.8rem;
  line-height: 2;
  letter-spacing: 0.5px;
  color: var(--il-warm-light);
  font-weight: 300;
}
.il-footer-info a {
  color: var(--il-warm-light);
  border-bottom: 1px solid rgba(184, 166, 153, 0.35);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.il-footer-info a:hover {
  color: var(--il-white);
  border-color: var(--il-white);
}
.il-footer-social {
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
  gap: 1.8rem;
}
.il-footer-social a {
  color: var(--il-warm-light);
  font-size: 0.72rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.3s ease;
}
.il-footer-social a:hover { color: var(--il-white); }
.il-footer-social a i { width: 14px; height: 14px; }

.il-footer-copy {
  margin-top: 1.4rem;
  font-size: 0.68rem;
  color: rgba(212, 200, 188, 0.55);
  letter-spacing: 0.5px;
}

/* ═══════════ WHATSAPP FLOATING BUTTON ═══════════ */
.il-wa-float-wrap {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--il-font-sans, 'Montserrat', sans-serif);
}
.il-wa-bubble {
  background: #fdfbf9;
  color: #4a4039;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  padding: 0.6rem 0.95rem;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(46, 38, 32, 0.12), 0 1px 3px rgba(46, 38, 32, 0.08);
  border: 1px solid rgba(184, 166, 153, 0.18);
  white-space: nowrap;
  position: relative;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.il-wa-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #fdfbf9;
  border-right: 1px solid rgba(184, 166, 153, 0.18);
  border-top: 1px solid rgba(184, 166, 153, 0.18);
}
.il-wa-float-wrap:hover .il-wa-bubble,
.il-wa-float-wrap:focus-within .il-wa-bubble {
  opacity: 1;
  transform: translateX(0);
}
@media (min-width: 901px) {
  .il-wa-bubble {
    opacity: 1;
    transform: translateX(0);
    animation: il-wa-bubble-in 0.6s ease-out 1.5s both;
  }
}
@keyframes il-wa-bubble-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
.il-wa-float {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #b8a699;
  color: #fdfbf9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(46, 38, 32, 0.22), 0 2px 6px rgba(46, 38, 32, 0.12);
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  animation: il-wa-pulse 2.6s ease-in-out infinite;
}
.il-wa-float:hover,
.il-wa-float:focus-visible {
  transform: scale(1.08);
  background: #9c8b7e;
  box-shadow: 0 10px 28px rgba(46, 38, 32, 0.3), 0 4px 10px rgba(46, 38, 32, 0.18);
  color: #fdfbf9;
  animation-play-state: paused;
}
.il-wa-float svg {
  width: 32px;
  height: 32px;
  display: block;
}
@keyframes il-wa-pulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(46, 38, 32, 0.22), 0 2px 6px rgba(46, 38, 32, 0.12), 0 0 0 0 rgba(184, 166, 153, 0.5);
  }
  50% {
    box-shadow: 0 8px 24px rgba(46, 38, 32, 0.22), 0 2px 6px rgba(46, 38, 32, 0.12), 0 0 0 14px rgba(184, 166, 153, 0);
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET
═══════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .il-services-grid,
  .il-testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Su telefono e tablet la fascia è una colonna sola e l'ordine cambia:
     TESTO → SIGILLO → BOTTONE. Prima il sigillo apriva la sezione e il titolo si
     leggeva dopo un logo grande 220px; ora il logo fa da sigillo di chiusura
     proprio sopra «Scopri come funziona». L'ordine è in CSS (`order`), il DOM
     resta quello del desktop. */
  .il-guarantee-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .il-guarantee-inner > .il-guarantee-text { grid-column: 1; grid-row: auto; order: 1; }
  .il-guarantee-inner > .il-guarantee-seal { grid-column: 1; grid-row: auto; order: 2; }
  /* `center` e non `start`: qui la colonna è larga tutto lo schermo e il testo
     della fascia è centrato. */
  .il-guarantee-inner > .il-cta-btn { grid-column: 1; grid-row: auto; order: 3; justify-self: center; }
  .il-guarantee-text .il-sec-label,
  .il-guarantee-text .il-sec-heading,
  .il-guarantee-text .il-sec-text {
    text-align: center;
  }
  .il-guarantee-seal img { max-width: 220px; }
}

@media (max-width: 900px) {
  .il-nav { padding: 0.9rem 1.25rem; }

  /* Menu mobile sempre nel DOM, animato con transform + opacity */
  .il-nav-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--il-cream);
    padding: 1.6rem 1.5rem 2rem;
    gap: 1.3rem;
    border-bottom: 1px solid var(--il-warm-lighter);
    box-shadow: 0 14px 30px rgba(46, 38, 32, 0.08);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
                opacity 0.35s ease,
                visibility 0s linear 0.35s;
  }
  .il-nav.is-open .il-nav-menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
                opacity 0.35s ease,
                visibility 0s linear 0s;
  }
  /* Voci che entrano una dopo l'altra */
  .il-nav-menu a {
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.45s ease, opacity 0.4s ease;
    padding-bottom: 6px;
  }
  .il-nav.is-open .il-nav-menu a {
    transform: translateY(0);
    opacity: 1;
  }
  .il-nav.is-open .il-nav-menu a:nth-child(1) { transition-delay: 0.06s; }
  .il-nav.is-open .il-nav-menu a:nth-child(2) { transition-delay: 0.10s; }
  .il-nav.is-open .il-nav-menu a:nth-child(3) { transition-delay: 0.14s; }
  .il-nav.is-open .il-nav-menu a:nth-child(4) { transition-delay: 0.18s; }
  .il-nav.is-open .il-nav-menu a:nth-child(5) { transition-delay: 0.22s; }
  .il-nav.is-open .il-nav-menu a:nth-child(6) { transition-delay: 0.26s; }
  .il-nav.is-open .il-nav-menu a:nth-child(7) { transition-delay: 0.30s; }
  .il-nav.is-open .il-nav-menu a:nth-child(8) { transition-delay: 0.34s; }

  .il-nav-toggle { display: inline-flex; }
  .il-nav-toggle i { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .il-nav.is-open .il-nav-toggle i { transform: rotate(90deg); }
  .il-nav-cta { display: none; }

  /* Mobile submenu: accordion */
  .il-nav-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .il-nav-group-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0 0 6px;
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.45s ease, opacity 0.4s ease, color 0.3s ease;
  }
  .il-nav-group-toggle::after { display: none; }
  .il-nav.is-open .il-nav-group-toggle {
    transform: translateY(0);
    opacity: 1;
  }
  /* Gruppo "link" su mobile: link a sinistra (naviga), chevron a destra (apre) */
  .il-nav-group-row {
    width: 100%;
    justify-content: space-between;
  }
  .il-nav-group-toggle--link {
    width: auto;
    flex: 1 1 auto;
  }
  .il-nav-group-chevron {
    padding: 0 0 6px;
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.45s ease, opacity 0.4s ease, color 0.3s ease;
  }
  .il-nav.is-open .il-nav-group-chevron {
    transform: translateY(0);
    opacity: 1;
  }
  .il-nav-submenu {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    margin-top: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    /* ⚠️ NON rimettere `pointer-events: auto` qui. Il pannello del menu chiuso è
       `visibility:hidden; pointer-events:none`, ma questa regola glielo riaccendeva
       per il sottomenu: risultato, un blocco invisibile e alto zero restava
       cliccabile in cima alla pagina e MANGIAVA I TOCCHI sui link lì sotto (il
       «Tutti gli articoli» del blog non si apriva). Si riaccende solo da aperto. */
    pointer-events: none;
    transition: max-height 0.4s ease;
  }
  .il-nav-group.is-open .il-nav-submenu {
    transform: none;
    max-height: 500px;
    padding: 0.3rem 0 0.4rem;
    pointer-events: auto;
  }
  .il-nav-submenu a {
    padding: 0.55rem 1rem;
    font-size: 0.7rem;
    letter-spacing: 2px;
  }
  .il-nav-group:hover .il-nav-submenu {
    transform: none;
  }
  /* Hide mega-menu photo on mobile — just show links */
  .il-nav-mega-photo { display: none; }
  .il-nav-mega-links { padding: 0; }
  .il-nav-mega-divider { display: none; }
  .il-nav-group.is-open .il-nav-submenu.il-nav-submenu--mega {
    max-height: 800px;
  }

  .il-hero { height: calc(100vh - 65px); min-height: 520px; }
  .il-hero-content {
    padding: 2.5rem 1.5rem;
    align-items: center;
    text-align: center;
  }
  .il-hero-title { max-width: 100%; }
  .il-hero-badge { align-self: center; }
  .il-hero-subtitle { text-align: center; max-width: 100%; }
  .il-hero-spots { align-self: center; }
  .il-hero-line { margin-left: auto; margin-right: auto; }
  .il-hero-ctas { justify-content: center; }
  /* Su telefono la foto è ritagliata stretta: dietro al testo può capitare un
     punto chiarissimo (un viso, il cielo) e il bianco sottile spariva. Al velo
     verticale si aggiunge una macchia scura centrata sul testo — la foto resta
     leggibile ai bordi, il testo ha sempre fondo suo. */
  .il-hero-overlay {
    background:
      radial-gradient(125% 68% at 50% 52%, rgba(26,21,17,0.62) 0%, rgba(26,21,17,0.34) 55%, rgba(26,21,17,0) 100%),
      linear-gradient(180deg, rgba(26,21,17,0.5) 0%, rgba(26,21,17,0.34) 35%, rgba(26,21,17,0.72) 100%);
  }
  .il-hero-title {
    font-weight: 400;
    text-shadow: 0 2px 22px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.5);
  }
  /* Stessa storia sull'atelier: qui il testo va a capo molte più volte e
     occupa quasi tutta la fascia, quindi la macchia deve essere più alta. */
  .il-videosec-overlay {
    background:
      radial-gradient(130% 88% at 50% 50%, rgba(20,15,12,0.62) 0%, rgba(20,15,12,0.4) 55%, rgba(20,15,12,0.05) 100%),
      linear-gradient(180deg, rgba(26,21,17,0.55) 0%, rgba(26,21,17,0.46) 45%, rgba(26,21,17,0.72) 100%);
  }
  .il-hero-subtitle {
    color: #fff;
    text-shadow: 0 1px 16px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.55);
  }
  .il-hero-line { background: #fff; }

  .il-split { grid-template-columns: 1fr; }
  .il-split-image { min-height: auto; max-height: 65vh; }
  .il-split-content { padding: 2.8rem 1.5rem; align-items: center; }
  .il-split-content .il-sec-label,
  .il-split-content .il-sec-heading,
  .il-split-content .il-sec-text { text-align: center; }
  .il-split-content .il-cta-btn { align-self: center; }
  .il-split-reverse .il-split-image { order: 0; }
  .il-split-reverse .il-split-content { order: 1; }

  .il-services-grid,
  .il-testimonials-grid,
  .il-details-grid {
    grid-template-columns: 1fr 1fr;
  }

  .il-sec { padding: 4.5rem 1.5rem; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 600px) {
  .il-nav { padding: 0.8rem 1rem; }
  .il-nav-logo { font-size: 1.25rem; }
  .il-nav-logo span { font-size: 0.58rem; letter-spacing: 2px; }

  .il-hero { height: calc(100svh - 65px); min-height: 480px; }
  .il-hero-content { padding: 2rem 1.2rem; }
  .il-hero-title { font-size: 2.6rem; line-height: 1.08; }
  /* 0,98rem in peso 300 su foto era il punto critico: corpo più generoso,
     peso normale, interlinea più aperta. */
  .il-hero-subtitle { font-size: 1.04rem; font-weight: 400; line-height: 1.65; }
  .il-hero-ctas { flex-direction: column; width: 100%; }
  .il-hero-ctas .il-cta-btn { width: 100%; justify-content: center; }
  .il-hero-dots button { width: 26px; }
  .il-hero-dots button.is-active { width: 40px; }

  .il-cta-btn { font-size: 0.72rem; padding: 0.95rem 1.8rem; letter-spacing: 2px; }

  .il-sec { padding: 3.5rem 1.2rem; }
  .il-sec-label { font-size: 0.74rem; letter-spacing: 2.8px; }
  .il-sec-heading { font-size: 1.8rem; }
  .il-sec-text { font-size: 0.95rem; }

  .il-services-grid,
  .il-testimonials-grid,
  .il-details-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* ── Home: card servizi come un album da sfogliare ──────────────────────
     Su telefono la colonna unica diventava una lista lunghissima. Qui le card
     scorrono in orizzontale con lo scatto su ogni card (scroll-snap): il dito
     lascia andare e la card si allinea da sola, una per volta
     (scroll-snap-stop: always). La card successiva resta intravista sul bordo
     destro: è l'unico invito a scorrere, senza frecce o puntini. */
  /* ⚠️ `:not(.il-pinm)`: quando la fascia si BLOCCA (vedi la sezione «BLOCCO DELLO
     SCORRIMENTO SU TELEFONO») la fila non deve più essere un contenitore di
     scorrimento, altrimenti lo scatto del dito e la traslazione dello scroll si
     contendono la stessa fila. La specificità qui è (0,2,1) — con `.il-pinm .il-…`
     (0,2,0) il carosello vincerebbe comunque: per questo si esclude, non si
     scavalca. */
  body[data-page="home"] .il-services:not(.il-pinm) .il-services-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;   /* inerzia iOS */
    overscroll-behavior-x: contain;      /* non trascina la pagina/gesto indietro */
    scroll-padding-inline: 1.2rem;
    gap: 1rem;
    padding: 0 1.2rem 0.6rem;
    scrollbar-width: none;               /* la barra non serve: c'è la card sbirciata */
  }
  body[data-page="home"] .il-services-grid::-webkit-scrollbar { display: none; }
  body[data-page="home"] .il-services:not(.il-pinm) .il-services-grid > .il-service-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* L'animazione d'ingresso è pensata per lo scroll verticale: dentro il
     carosello farebbe apparire le card sbiadite proprio mentre le si sfoglia. */
  body[data-page="home"] .il-services-grid > .il-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .il-split-content { padding: 2.2rem 1.2rem; }
  .il-videosec { margin: 3.2rem 0; }
  .il-videosec-content { padding: 3.5rem 1.2rem; }
  .il-service-body { padding: 1.5rem 1.3rem 1.8rem; }
  .il-service-title { font-size: 1.5rem; }

  .il-guarantee { padding: 3.5rem 1.2rem; }
  .il-guarantee-seal img { max-width: 180px; }

  .il-details { padding: 3rem 1.2rem 4rem; }
  .il-detail-item { padding: 1.6rem 1.3rem; }
  .il-detail-value { font-size: 1.3rem; }

  .il-testimonials { padding: 0 1.2rem 4rem; }
  .il-faq { padding: 0 1rem 4rem; }
  .il-quote { padding: 2rem 1.5rem 1.8rem; }
  .il-quote p { font-size: 1.08rem; }

  .il-cta { padding: 4rem 1.2rem; }
  .il-cta-title { font-size: 2rem; }
  .il-cta-text { font-size: 0.92rem; }

  .il-footer { padding: 2.2rem 1.2rem 2rem; }
  .il-footer-logo { font-size: 1.4rem; }
  .il-footer-info { font-size: 0.72rem; }
  .il-footer-social { gap: 1.2rem; }
  .il-footer-social a { font-size: 0.66rem; }

  /* WhatsApp button più piccolo su mobile, bubble nascosta */
  .il-wa-float-wrap {
    right: 1rem;
    bottom: 1rem;
  }
  .il-wa-bubble { display: none; }
  .il-wa-float {
    width: 54px;
    height: 54px;
  }
  .il-wa-float svg { width: 28px; height: 28px; }
}

/* ═══════════ BUSINESS: foto alta quanto lo schermo + Koral sotto ═══════════
   La fascia foto+testo è una `.il-split` normale: cambia solo l'altezza della
   foto. Koral sta nella fascia bianca sotto — non è una banda colorata a sé
   (richiesta della titolare): lo stacco lo fa il filo del sito. */
/* La foto introduttiva è una CORNICE 3:2 ORIZZONTALE (richiesta della
   titolare: «più larghe che alte, es. 1200x800»). Era 2:3 verticale, e la foto
   vera (`_ila1199-modifica.webp`) è 1920×1280, cioè 3:2 esatto: nella cornice
   verticale `object-fit: cover` le tagliava i due lati. Ora entra intera.
   ⚠️ Per una cornice ORIZZONTALE si guida dalla LARGHEZZA e l'altezza scende
   col rapporto — il contrario della verticale, dove si fissava l'altezza
   perché 2:3 su 720px avrebbe dato 1080px di altezza. Qui 3:2 su mezza sezione
   dà 720×480 a 1440px, cioè la metà esatta della fascia come in tutte le altre
   `.il-split` del sito: per questo NON c'è più nessun
   `grid-template-columns` da scavalcare (vale `1fr 1fr` di `.il-split` sul
   desktop e `1fr` del blocco mobile), e non serve più nemmeno il `vh`.
   ⚠️ `min-height: 0` serve a scavalcare i 480px di `.il-split-image`, che
   sotto i ~1440px vincerebbero sull'altezza e romperebbero il rapporto;
   `max-height: none` scavalca il `65vh` della regola mobile generale, che su
   una finestra bassa e larga (1000×600: 65vh = 390px contro 667px di cornice)
   farebbe la stessa cosa. Con specificità 0,2,0 questa regola vince su
   `.il-split-image` a QUALUNQUE larghezza: una sola cornice, un solo posto
   dove cambiare il rapporto.
   ⚠️ `align-self: center` è obbligatorio: senza, la griglia stira la cornice
   all'altezza della riga (il testo accanto è più alto) e il rapporto salta. */
/* ⚠️ Il fondo bianco va sulla SEZIONE, non solo su `.il-split-content`: con il
   limite di lettura qui sotto il pannello bianco finisce a 680px e oltre
   affiorava lo sfondo crema della sezione — una striscia di 347px a 1440px
   (misurata). Serve anche sopra e sotto la cornice, che essendo centrata non
   riempie la riga: là si vedrebbe il crema del ripiego `:where()`. */
.il-business-split { background: var(--il-white); }
.il-business-split .il-split-image {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  align-self: center;
}
/* Ripiego per i browser senza `aspect-ratio` (pre-2021): l'altezza va scritta
   a mano, o l'`<img>` in `height: 100%` non ne avrebbe nessuna. I 480px sono
   il rapporto esatto a 1440px (mezza sezione = 720px); il `min` col `vw`
   evita che su uno schermo stretto — dove la cornice è a tutta larghezza —
   la foto esca più alta che larga. Approssimazione voluta: qui il rapporto
   non è garantito, la leggibilità sì. */
@supports not (aspect-ratio: 3 / 2) {
  .il-business-split .il-split-image { height: min(480px, 66.66vw); }
}
/* Il testo si allinea al CENTRO verticale della foto: `.il-split-content` ha
   già `justify-content: center` e la cornice è `align-self: center`.
   Il limite di lettura entra in gioco solo sopra i ~1360px di finestra (mezza
   sezione più larga di 680px): serve là, o su un 2560 le righe sarebbero
   larghe 1152px. Il vuoto che lascia nella colonna è invisibile — la sezione
   ha lo stesso bianco del pannello. */
.il-business-split .il-split-content { max-width: 680px; }
/* Nella colonna di testo tutto è allineato a sinistra: il filo, che di suo è
   centrato con `margin: 0 auto`, resterebbe l'unico elemento in mezzo. */
.il-business-split .il-divider { margin-left: 0; }

.il-business-intro {
  background: var(--il-white);
  padding: 5rem max(1.5rem, calc((100% - 820px) / 2));
  text-align: center;
}

/* ── Koral su fondo chiaro ──────────────────────────────────────────────
   Il marchio vero su koral.binatomy.com è KORAL maiuscolo molto spaziato
   (letter-spacing 7 su corpo 38): stessa proporzione in em, con il
   `text-indent` che compensa lo spazio appeso all'ultima lettera —
   senza, la parola risulta scentrata rispetto al corallo. */
.il-koral-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}
.il-koral-logo-svg {
  width: 32px;
  height: 40px;
  color: #FF6B5A;
  flex-shrink: 0;
}
.il-koral-wordmark {
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--il-text-dark);
}
.il-koral-desc {
  font-size: 1.03rem;
  line-height: 1.85;
  font-weight: 300;
  color: var(--il-text-light);
  max-width: 620px;
  margin: 0 auto 2.2rem;
}
.il-koral-desc a {
  color: var(--il-text-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--il-warm-light);
}
.il-koral-desc a:hover { border-bottom-color: var(--il-warm-dark); }

/* ═══════════ RIQUADRO KORAL (solo servizio-business.html) ═══════════
   ⚠️⚠️ QUESTO È L'UNICO POSTO DEL SITO CON I COLORI DI UN ALTRO BRAND.
   Koral è lo studio creativo di Ilaria e Federico: il rimando si veste con la
   sua palette, non con il beige dell'Atelier. I valori NON sono indovinati:
   sono le variabili vere di koral.binatomy.com/koral.css —
     --coral #FF6B5A · --coral-deep #E84D3D · --coral-soft #FFEAE7 · --charcoal #1A1A1A
   ⚠️ Stanno in variabili LOCALI (`--k-*`) sull'`.il-koral-box`, non su
   `:root`: sul tema del sito non devono mettere piede, e il resto della pagina
   resta beige/tortora. Se il brand di Koral cambia, si riprendono da quel CSS.
   ⚠️ La font resta quella del sito (Montserrat/Cormorant): Koral usa
   Instrument Sans, ma caricare una famiglia in più per un riquadro solo
   costerebbe più di quanto renda. */
.il-koral-box {
  --k-coral: #FF6B5A;
  --k-coral-deep: #E84D3D;
  --k-coral-soft: #FFEAE7;
  --k-charcoal: #1A1A1A;
  display: block;
  background: var(--k-coral-soft);
  /* bordo corallo e angoli generosi, come le card di Koral (22px è il raggio
     che usano per i riquadri; la pillola da 50px è del pulsante) */
  border: 2px solid var(--k-coral);
  border-radius: 22px;
  padding: 3rem 2.6rem;
  text-align: center;
}
/* ⚠️ Marchio e logo usano il corallo PROFONDO, non `--coral`: sul fondo
   rosino il corallo chiaro dà 2,4:1 di contrasto (misurato), sotto il 3:1
   chiesto per il testo grande. `--coral-deep` su `--coral-soft` porta a 3,7:1
   ed è l'accoppiata che Koral usa da sé: nel suo CSS
   `background: var(--coral-soft); color: var(--coral-deep)` compare sei volte.
   Il BORDO resta `--coral`, com'è sulle card di Koral. */
.il-koral-box .il-koral-wordmark { color: var(--k-coral-deep); }
.il-koral-box .il-koral-logo-svg { color: var(--k-coral-deep); }
.il-koral-box .il-koral-desc {
  color: var(--k-charcoal);
  font-weight: 400;
  margin-bottom: 2.4rem;
}
/* i link dentro il testo seguono il corallo, non il beige */
.il-koral-box .il-koral-desc a {
  color: var(--k-coral-deep);
  font-weight: 600;
  border-bottom-color: rgba(232, 77, 61, 0.35);
}
.il-koral-box .il-koral-desc a:hover { border-bottom-color: var(--k-coral-deep); }

/* Il pulsante che chiude il riquadro: è il `.btn-primary` di Koral —
   corallo pieno, bianco, pillola, nessun bordo. ⚠️ Deliberatamente NON usa
   `.il-cta-btn` (che porta il beige, il maiuscoletto e gli angoli vivi del
   sito): qui il pulsante deve somigliare a quelli di Koral. */
/* ⚠️ Il selettore ripete `.il-koral-box`: `.il-landing a { color: inherit }`
   ha specificità 0,1,1 (classe + tipo) e batteva `.il-koral-cta` (0,1,0) —
   il testo del pulsante restava del colore del sito invece che bianco. */
.il-koral-box .il-koral-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--k-coral);
  color: #fff;
  padding: 1rem 2.25rem;
  border: none;
  border-radius: 999px;
  font-family: var(--il-font-sans, 'Montserrat', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  cursor: pointer;
  /* ⚠️ Bersaglio da dito: 44px è la soglia delle linee guida, e questo è
     l'unico invito all'azione della pagina. */
  min-height: 48px;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.il-koral-box .il-koral-cta:hover,
.il-koral-box .il-koral-cta:focus-visible {
  background: var(--k-coral-deep);
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(255, 107, 90, 0.3);
}

@media (max-width: 1000px) {
  /* A colonna singola il testo torna centrato (regola generale delle split):
     il filo deve tornare centrato con lui. */
  .il-business-split .il-divider { margin-left: auto; }
  .il-business-intro { padding: 3.5rem 1.5rem; }

  /* ⚠️ Questa riga NON è ridondante, e non si può togliere pensando che la
     regola generale basti: `.il-split { grid-template-columns: 1fr }` sta nel
     blocco `@media (max-width: 900px)` (styles.css:2364), mentre questo è a
     1000px. Senza, fra 901 e 1000px la pagina business tornerebbe a due
     colonne — cioè cambierebbe da sé il punto in cui si impila, che qui è
     sempre stato 1000px (e il filo centrato di due righe sotto lo dà per
     assunto). Contro `.il-split` (stessa specificità) vince per ordine: è più
     in basso nel file. */
  .il-business-split { grid-template-columns: 1fr; }
  /* ⚠️ NIENTE override della cornice qui: la regola unica sopra è già guidata
     dalla larghezza (a 390px: 390×260, a 1000px: 1000×667) e porta
     `max-height: none`, che con specificità 0,2,0 vince a ogni larghezza.
     Duplicarla vorrebbe dire due posti da cambiare per un solo rapporto. */
  /* a colonna singola il limite di lettura non serve: lo dà l'imbottitura */
  .il-business-split .il-split-content { max-width: none; }

  /* (la foto di chiusura si regola più in basso, dopo la sua definizione) */
  .il-koral-box { padding: 2.2rem 1.4rem; border-radius: 18px; }
}

/* ═══════════ FOTO DI CHIUSURA ═══════════ */
/* ⚠️ La fascia non è a tutta larghezza: la foto di chiusura è una CORNICE 3:2
   ORIZZONTALE centrata (era 2:3 verticale, prima ancora panoramica «troppo
   stretta e lunga»). Serve l'imbottitura, o il riquadro toccherebbe il
   footer. */
.il-closing { padding: 4.5rem 1.5rem; background: var(--il-cream); }
.il-closing-media {
  /* Stesso ragionamento della cornice introduttiva: essendo ORIZZONTALE si
     guida dalla LARGHEZZA e l'altezza scende col rapporto. Il tetto di 900px
     non è cosmetico: senza, su uno schermo da 2560 la cornice sarebbe larga
     2528px e alta 1685, cioè più di uno schermo — e a schermo pieno non si
     leggerebbe come una foto di chiusura ma come una seconda hero. A 1440px
     esce 900×600, a 390px 352×235 (nessuno sbordo: il primo termine del `min`
     è il 100% del contenitore, imbottitura già scalata). */
  aspect-ratio: 3 / 2;
  width: min(100%, 900px);
  height: auto;
  margin-inline: auto;
  overflow: hidden;
}
@supports not (aspect-ratio: 3 / 2) {
  .il-closing-media { height: min(600px, calc(66.66vw - 32px)); }
}
/* ⚠️ Questo blocco DEVE stare qui, dopo la regola sopra, e non insieme agli
   altri ritocchi mobili della pagina business: `.il-closing-media` ha la stessa
   specificità in tutti e due i punti, quindi vince quello che viene DOPO nel
   file. (Da quando la cornice è guidata dalla larghezza non c'è più nulla da
   correggere su telefono — `width: min(100%, 900px)` vale già 100% su ogni
   schermo più stretto di 900px — quindi qui resta solo l'imbottitura.) */
@media (max-width: 1000px) {
  .il-closing { padding: 3rem 1.2rem; }
}
.il-closing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Segnaposto finché la foto definitiva non c'è: STESSO meccanismo delle card
   prodotto e dei riquadri di chi-sono, non una terza invenzione. Il disegno lo
   fa il CONTENITORE (`::after` + trama a rombi); la classe `.il-img-missing`
   che `onerror` mette sull'<img> serve solo a nascondere l'icona di immagine
   rotta e a far comparire il pannello. Appena il file esiste, l'errore non
   scatta più e la cornice si riempie da sé. */
.il-closing-media {
  position: relative;
  border: 1px solid var(--il-warm-lighter);
  background-color: var(--il-warm-bg);
  background-image:
    linear-gradient(135deg, rgba(184,166,153,0.10) 25%, transparent 25%),
    linear-gradient(225deg, rgba(184,166,153,0.10) 25%, transparent 25%),
    linear-gradient(315deg, rgba(184,166,153,0.10) 25%, transparent 25%),
    linear-gradient(45deg,  rgba(184,166,153,0.10) 25%, transparent 25%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 0, 9px -9px, 0 9px;
}
/* ⚠️⚠️ `::before`, NON `::after`. `.il-closing-media` è nel selettore PAINT di
   script.js (riga 848), quindi a runtime prende la classe `.il-paint`, il cui
   pannello crema che scorre via È un `::after` (styles.css:3521) — stessa
   specificità del mio e più in basso nel file, quindi vinceva lui: la scritta
   non compariva e il pannello copriva mezza cornice. */
.il-closing-media::before {
  content: 'Foto in arrivo';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0.6rem;
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--il-warm-dark);
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* (vedi «FOTO MANCANTI» in fondo al file: il segnaposto non si mostra più) */

/* ═══════════ FRASE MANIFESTO (chi-sono) ═══════════
   Prima era un <p> dentro l'articolo con tutto lo stile scritto nell'attributo
   `style`: dal pannello si vedeva il codice in mezzo al testo e non si poteva
   cambiare la frase senza rischiare di rompere la formattazione. */
.il-manifesto {
  background: var(--il-warm-bg);
  padding: 4.5rem max(1.5rem, calc((100% - 760px) / 2));
  text-align: center;
  border-bottom: 1px solid var(--il-warm-lighter);
}
.il-manifesto-quote {
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  color: var(--il-text-dark);
  margin: 0;
}

/* ═══════════ FOTO PICCOLE, CON SEGNAPOSTO (chi-sono) ═══════════
   Fila di riquadri piccoli da riempire una foto alla volta. Finché il file non
   esiste, `onerror` mette `.il-img-missing` sull'<img> e si vede la trama a
   rombi con la scritta: STESSO meccanismo delle card prodotto (styles.css,
   `.il-product-img`), non una seconda invenzione. Appena la foto c'è, l'errore
   non scatta più, la classe non viene messa e il riquadro si riempie da solo.
   ⚠️ Il segnaposto NON è la classe scritta a mano nell'HTML: se lo fosse, la
   foto caricata dal pannello resterebbe invisibile per sempre. */
.il-fotine {
  background: var(--il-cream);
  padding: 0 1.5rem 4rem;
}
.il-fotine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 900px;
  margin: 0 auto;
}
.il-fotina {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--il-warm-lighter);
  background-color: var(--il-warm-bg);
  background-image:
    linear-gradient(135deg, rgba(184,166,153,0.10) 25%, transparent 25%),
    linear-gradient(225deg, rgba(184,166,153,0.10) 25%, transparent 25%),
    linear-gradient(315deg, rgba(184,166,153,0.10) 25%, transparent 25%),
    linear-gradient(45deg,  rgba(184,166,153,0.10) 25%, transparent 25%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 0, 9px -9px, 0 9px;
}
.il-fotina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--il-ease-soft, ease);
}
.il-fotina:hover img { transform: scale(1.05); }
.il-fotina::after {
  content: 'Foto in arrivo';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0.6rem;
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--il-warm-dark);
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* (vedi «FOTO MANCANTI» in fondo al file: il segnaposto non si mostra più) */

@media (max-width: 600px) {
  /* Restano tre per riga: sono «foto piccole», e a due per riga la terza
     resterebbe orfana in mezzo alla fascia. */
  .il-fotine-grid { gap: 0.6rem; }
  .il-fotina::after { font-size: 0.78rem; }
}

/* ═══════════ PAGE HEADER (sub-pages) ═══════════ */
.il-page-header {
  background: var(--il-warm-bg);
  padding: 5rem 1.5rem 4rem;
  text-align: center;
  border-bottom: 1px solid var(--il-warm-lighter);
}
.il-page-header .il-sec-label {
  margin-bottom: 1rem;
}
.il-page-header h1 {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  color: var(--il-text-dark);
  line-height: 1.15;
  max-width: 820px;
  margin: 0 auto 1.2rem;
}
.il-page-header h1 em {
  font-style: italic;
  color: var(--il-warm);
}
.il-page-header .il-divider { margin-top: 0.8rem; }
.il-page-header p {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--il-text-light);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ═══════════ ARTICLE / LONG TEXT ═══════════ */
/* La colonna di lettura resta larga 760px, ma la SEZIONE è a tutta larghezza:
   il limite sta nel padding, non in `max-width`. Serve perché l'articolo scorre
   sopra una fascia impilata («Una nuova vita da raccontare»): una scatola da
   760px centrata avrebbe lo sfondo solo al centro e ai due lati si vedrebbe la
   fascia ferma sotto, con i testi sovrapposti. `max()` tiene comunque 1,5rem di
   aria sugli schermi stretti. */
.il-article {
  padding: 5rem max(1.5rem, calc((100% - 760px) / 2));
}
.il-article p:not(.il-sec-label) {
  font-size: 1.05rem;
  line-height: 1.95;
  color: var(--il-text);
  margin-bottom: 1.4rem;
  font-weight: 300;
}
.il-article p strong {
  color: var(--il-text-dark);
  font-weight: 500;
}
.il-article h2,
.il-article h3 {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-weight: 400;
  color: var(--il-text-dark);
  line-height: 1.25;
}
.il-article h2 {
  font-size: 2rem;
  margin: 2.5rem 0 1.2rem;
}
.il-article h2 em { font-style: italic; color: var(--il-warm); }
/* Etichetta di sezione dentro un articolo (passaparola: sopra i due titoli).
   `.il-article p` è escluso dalla classe con :not(): a specificità 0,1,1
   vincerebbe su `.il-sec-label` (0,1,0) e l'etichetta diventerebbe un
   paragrafo maiuscolo — corpo, colore e peso sbagliati, compresa la
   riduzione a 0.74rem del blocco a 600px. Qui restano solo i margini. */
.il-article .il-sec-label { margin-top: 3.2rem; }
.il-article > .il-sec-label:first-child { margin-top: 0; }
.il-article .il-sec-label + h2 { margin-top: 0; }
.il-article h3 {
  font-size: 1.4rem;
  margin: 2rem 0 0.8rem;
}
.il-article ul {
  list-style: none;
  margin: 1rem 0 1.8rem;
  padding: 0;
}
.il-article ul li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.6rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--il-text);
  font-weight: 300;
  border-bottom: 1px solid var(--il-warm-lighter);
}
.il-article ul li:last-child { border-bottom: none; }
/* Gli elementi vuoti sono gli slot da riempire dall'editor: restano nel file
   ma sul sito non devono lasciare il proprio margine come buco bianco
   (su garanzia.html erano tre <p></p> di fila, ~73px di vuoto). */
.il-article p:empty,
.il-article h2:empty,
.il-article h3:empty,
.il-article li:empty { display: none; }

/* ── FOTO TOLTA DA UNA PAGINA ──────────────────────────────────────────────
   Un campo immagine VUOTO (tasto «Rimuovi foto» del pannello) vuol dire «qui
   non ci va nessuna foto»: il file resta in libreria, sparisce solo da questa
   pagina.
   ⚠️ Un `<img src="">` NON è invisibile: il browser risolve l'indirizzo vuoto
   sulla pagina stessa, scarica l'HTML come se fosse un'immagine e disegna
   l'icona di file rotto. Questa regola è la rete che vale anche con
   JavaScript spento; a chiudere il buco nell'impaginazione ci pensa script.js,
   che toglie il contenitore della foto. */
.il-landing img[src=""],
.il-landing img:not([src]) { display: none !important; }

/* Fascia immagine+testo rimasta senza foto: il testo prende tutta la larghezza
   invece di lasciare mezza sezione vuota. La classe la mette script.js. */
.il-split.il-senza-foto,
.il-split-reverse.il-senza-foto { grid-template-columns: 1fr; }
.il-split.il-senza-foto .il-split-content { max-width: 820px; margin-inline: auto; }

/* ── SEZIONI FACOLTATIVE ──────────────────────────────────────────────────
   `.il-optsec` è una sezione che nasce VUOTA nel file (etichetta, titoli e
   paragrafi senza testo: l'editor mostra anche gli elementi vuoti, quindi si
   riempiono da Admin → «Testi e immagini») e deve comparire solo quando ha
   almeno un campo pieno. In home è «Quando prenotare e come confermare».
   Il patto è lo stesso dell'intestazione facoltativa di `.il-details` qui
   sopra, e come lì la decisione è del CSS, non del JavaScript: così la fascia
   non compare NEMMEMO per un fotogramma prima che script.js giri (sarebbero
   ~160px di crema vuota, il padding dell'articolo) e la sezione piena si vede
   anche se un giorno lo script si fermasse. La condizione è sul CONTENUTO:
   appena la titolare scrive qualcosa, la sezione arriva da sola.
   I campi vuoti li TOGLIE poi dal DOM script.js — nascosti conterebbero
   comunque come figli nel ritardo a cascata delle entrate. */
.il-optsec > :empty { display: none; }
.il-optsec:not(:has(> :not(:empty))) { display: none; }
/* Con l'etichetta o il primo sottotitolo lasciati vuoti (e quindi rimossi), il
   primo elemento che resta si porterebbe dietro il suo margine superiore
   dentro un padding che già vale 5rem. Vale solo qui: sulle pagine servizio
   l'articolo comincia da sempre con un <h2> distanziato. */
.il-optsec > h2:first-child,
.il-optsec > h3:first-child { margin-top: 0; }
.il-article ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 8px;
  height: 1px;
  background: var(--il-warm);
}

/* ── RIQUADRO «SECONDA OCCASIONE» ────────────────────────────────────────────
   Nota a margine della garanzia: in fondo a garanzia.html e sulle pagine
   servizio con bambini (non gravidanza/dog/business, dove il caso non si pone).
   È una <section> figlia di .il-landing, quindi prende da sé lo sfondo crema
   della regola :where() e non lascia intravedere le fasce impilate ai lati.
   La colonna è quella dell'articolo (760px) con lo stesso calcolo di padding:
   su garanzia.html il riquadro resta allineato al testo che gli sta sopra. */
.il-notebox-sec {
  padding: 0 max(1.5rem, calc((100% - 760px) / 2)) 5rem;
}
/* Sulle pagine servizio il riquadro segue la fascia garanzia, che non ha
   imbottitura in fondo: senza questo stacco si toccherebbero.
   Su `contatti.html` il riquadro segue una fascia immagine+testo, che di
   imbottitura in fondo non ne ha nemmeno lei: il bordo del riquadro cominciava
   4px dopo la foto e si leggeva come incollato (misurato). Stesso stacco, per
   non inventare una seconda spaziatura; la regola e' sui FRATELLI, non su una
   classe nell'HTML, cosi' non aggiunge locator all'editor e vale da se' su
   qualunque pagina futura con la stessa sequenza. */
.il-notebox-sec.il-notebox-after-guarantee { padding-top: 4rem; }
/* Su contatti.html lo stacco e' 5rem, non 4: e' quello che usano TUTTE le
   altre sezioni di quella pagina in alto (misurato: 87,5px su .il-details,
   .il-mappa e .il-faq), e rende l'imbottitura del riquadro simmetrica con i
   5rem che ha gia' in fondo. Le pagine servizio restano a 4rem: sono live da
   giorni cosi' e non c'e' motivo di muoverle. */
.il-split + .il-notebox-sec { padding-top: 5rem; }
.il-notebox {
  display: block;
  background: var(--il-warm-bg);
  border: 1px solid var(--il-warm-lighter);
  border-left: 3px solid var(--il-warm);
  padding: 2.6rem 2.6rem 2.2rem;
}
.il-notebox-title {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--il-text-dark);
  margin-bottom: 1.2rem;
}
.il-notebox-title em { font-style: italic; color: var(--il-warm); }
.il-notebox p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--il-text);
  font-weight: 300;
  margin-bottom: 1.1rem;
}
.il-notebox p strong { color: var(--il-text-dark); font-weight: 500; }
.il-notebox p:last-child { margin-bottom: 0; }
.il-notebox p:empty { display: none; }   /* slot da riempire dall'editor */
/* Entrata e messa a fuoco.
   ⚠️ `il-reveal` sta sulla <section>, lo zoom sull'<aside>: se stessero sullo
   stesso elemento le due `transform` si scavalcherebbero (l'entrata usa
   translateY e dura 1,5s, quindi passandoci sopra col mouse a metà corsa il
   riquadro salterebbe, e a entrata finita lo zoom erediterebbe quella durata
   sembrando lento). Su due elementi diversi ognuno ha la sua transizione. */
.il-notebox {
  transition: transform 0.5s var(--il-ease-soft),
              box-shadow 0.5s var(--il-ease-soft),
              border-color 0.5s var(--il-ease-soft),
              background-color 0.5s var(--il-ease-soft);
}
.il-notebox:hover,
.il-notebox:focus-within {
  transform: scale(1.02);
  border-color: var(--il-warm-light);
  border-left-color: var(--il-warm-dark);
  background: var(--il-cream);
  box-shadow: 0 18px 40px -24px rgba(46, 38, 32, 0.28);
}
/* Con «riduci movimento» il blocco generale in fondo al file azzera le DURATE,
   non i valori finali: senza questa riga lo zoom ci sarebbe lo stesso, solo
   istantaneo — cioè proprio lo scatto che quell'impostazione vuole evitare.
   Resta la messa a fuoco, che non è movimento. */
@media (prefers-reduced-motion: reduce) {
  .il-notebox:hover,
  .il-notebox:focus-within { transform: none; }
}
@media (max-width: 900px) {
  .il-notebox-sec { padding: 0 1.2rem 3.5rem; }
  .il-notebox-sec.il-notebox-after-guarantee { padding-top: 2.5rem; }
  /* 3.5rem = la stessa imbottitura che il riquadro ha in fondo su telefono */
  .il-split + .il-notebox-sec { padding-top: 3.5rem; }
  .il-notebox { padding: 1.9rem 1.5rem; }
  .il-notebox-title { font-size: 1.35rem; }
}

/* ═══════════ PRICE LIST ═══════════ */
.il-pricelist {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.il-price-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--il-warm-light);
}
.il-price-row:last-child { border-bottom: none; }
.il-price-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  flex-shrink: 0;
}
/* ⚠️ L'hover NON tocca l'opacità, e non è una scelta estetica: l'entrata a
   cascata del listino anima `opacity`, e l'hover sulla stessa proprietà vinceva
   sul motore delle entrate (`a.il-price-row` è 0,1,1 e batte `.il-stagger > *`,
   che è 0,1,0) — le righe comparivano tutte insieme, senza ritardo. È lo stesso
   motivo per cui `.il-service-card` fa l'hover con transform e ombra. Qui la
   riga si schiarisce: nessuna proprietà in comune con l'entrata. */
a.il-price-row { transition: background-color 0.25s ease; }
a.il-price-row:hover { background-color: var(--il-cream); }
a.il-price-row:hover .il-price-name { color: var(--il-warm-dark); }
.il-price-name {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--il-text-dark);
}
.il-price-name span {
  display: block;
  font-family: var(--il-font-sans, 'Montserrat', sans-serif);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--il-text-light);
  font-weight: 400;
  margin-top: 0.2rem;
}
.il-price-amount {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--il-warm);
  white-space: nowrap;
}
/* Listino: prezzo contenuto (vince sul prezzo grande delle pagine servizio) */
.il-pricelist .il-price-amount {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--il-warm);
}

/* ═══════════ GALLERY GRID ═══════════ */
.il-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 0;
  margin: 0;
  max-width: 1400px;
  margin: 0 auto;
}
.il-gallery-grid .il-gallery-item {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--il-warm-bg);
}
.il-gallery-grid .il-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.il-gallery-grid .il-gallery-item:hover img {
  transform: scale(1.04);
}
/* Didascalia foto (facoltativa): sovrimpressione in basso sulla foto */
.il-gallery-grid .il-gallery-item { position: relative; }
.il-gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 0.7rem 0.55rem; color: #fff; font-size: 0.82rem; line-height: 1.3;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* ═══════════ CONTACT BLOCK ═══════════ */
.il-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 3rem auto 0;
}
.il-contact-card {
  background: var(--il-white);
  padding: 2.5rem 2rem;
  border: 1px solid var(--il-warm-lighter);
  text-align: center;
}
.il-contact-card .il-detail-icon {
  margin: 0 auto 1rem;
}
.il-contact-card .il-detail-value {
  margin-bottom: 0.6rem;
}
.il-contact-card a {
  color: var(--il-warm-dark);
  border-bottom: 1px solid var(--il-warm-light);
}
.il-contact-card a:hover { color: var(--il-text-dark); }

/* Parole chiave dei vantaggi nel footer: più grandi e distinte dai link legali
   sotto, perché sono voci di navigazione, non note a piè di pagina. */
.il-footer-keys {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
  font-size: 0.74rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.il-footer-keys a {
  color: rgba(236, 230, 224, 0.9);
  border-bottom: 1px solid rgba(184, 166, 153, 0.45);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.il-footer-keys a:hover { color: var(--il-white); border-color: var(--il-white); }

/* Riga stagionale del footer: «Natale 2026 · Christmas 2026». Ha la stessa forma
   delle parole chiave ma un tono più chiaro, perché è l'UNICO link interno verso
   le due landing (non sono nel menu) e perché collega fra loro le due lingue.
   A gennaio si toglie la riga in script.js, non queste regole. */
.il-footer-season { margin-top: 1.1rem; }
.il-footer-season a { color: rgba(253, 251, 249, 0.92); border-color: rgba(212, 200, 188, 0.55); }

/* ═══════════ FOOTER LINKS ═══════════ */
.il-footer-links {
  margin-top: 1rem;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(212, 200, 188, 0.65);
}
.il-footer-links a {
  color: rgba(212, 200, 188, 0.8);
  border-bottom: 1px solid rgba(184, 166, 153, 0.25);
  padding-bottom: 1px;
  margin: 0 0.3rem;
}
.il-footer-links a:hover { color: var(--il-white); border-color: var(--il-white); }

/* ═══════════ BERSAGLI DA TOCCARE (telefono e tablet) ═══════════
   Su schermo tattile un link alto 15px si sbaglia: Apple e Google chiedono
   ~44px. Nel footer i link erano alti fra 15 e 21px — **compreso il numero di
   WhatsApp**, cioè il link che porta i clienti. Qui l'area sensibile al dito
   cresce con un ::before invisibile sovrapposto al link: il testo, la
   sottolineatura e gli spazi restano identici al pixel, cambia solo dove il
   dito «prende». (Le voci del menu usano già ::after per la sottolineatura,
   per questo l'espansore è ::before.) */
@media (max-width: 900px) {
  .il-footer-info a,
  .il-footer-social a,
  .il-footer-keys a,
  .il-footer-links a,
  .il-nav-menu a { position: relative; }
  .il-footer-info a::before,
  .il-footer-social a::before,
  .il-footer-keys a::before,
  .il-footer-links a::before,
  .il-nav-menu a::before {
    content: '';
    position: absolute;
    /* si allarga SOLO in altezza: due link sulla stessa riga («WhatsApp ·
       Contatti», «Privacy · Cookie») sono separati da pochi pixel, e allargando
       anche di lato le due aree si toccavano */
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    /* solo per il dito: non si vede e non sposta niente */
  }
  /* aria fra una riga e l'altra: senza, le aree da 44px si accavallano fra
     righe vicine e si finisce per aprire il link sbagliato */
  .il-footer-info { line-height: 2.6; }
  .il-footer-social { margin-top: 1.8rem; }
  .il-footer-keys { gap: 1.7rem 1.6rem; }
  /* Fra la riga dei vantaggi e quella stagionale serve la stessa aria che c'è
     fra due righe della stessa fila: con i 1,1rem del desktop le due aree da
     44px si accavallerebbero e si aprirebbe il link sbagliato. */
  .il-footer-season { margin-top: 1.7rem; }
  .il-footer-links { margin-top: 1.5rem; line-height: 2.4; }
  .il-nav-menu { gap: 1.4rem; }
  /* Il pulsante WhatsApp è fisso in basso a destra (60px + 1,5rem di margine):
     arrivati in fondo copriva l'ultima riga del footer, cioè partita IVA e
     copyright. Questo spazio la tiene sopra il pulsante. */
  .il-footer { padding-bottom: 6.5rem; }
}

/* ═══════════ MOBILE GALLERY ═══════════ */
@media (max-width: 900px) {
  .il-gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .il-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .il-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
  .il-page-header { padding: 3.5rem 1.2rem 3rem; }
  .il-page-header h1 { font-size: 2.1rem; }
  .il-article { padding: 3.5rem 1.2rem; }
  .il-article h2 { font-size: 1.6rem; }
  .il-price-row { grid-template-columns: auto 1fr; gap: 0.5rem 1rem; align-items: center; }
  .il-price-name { font-size: 1.3rem; }
  .il-price-photo { width: 52px; height: 52px; }
  .il-pricelist .il-price-amount { font-size: 1.45rem; grid-column: 2; justify-self: end; }
  .il-nav-logo img { width: 110px; }
}

/* ═══════════ REVEAL — entrate in scena ═══════════
   Tre modi, dal più discreto al più scenografico:
   1. .il-reveal        blocco intero che sale di poco e compare (card, citazioni)
   2. .il-stagger       i figli entrano in fila, uno dopo l'altro (testi di sezione)
   3. .il-paint         la foto viene "dipinta": un pannello la scopre scorrendo
   La curva è la stessa per tutti così il sito ha un'unica andatura, ed è
   volutamente MARCATA (expo-out: parte deciso, si posa lentamente): con una
   ease-out neutra l'elemento «appariva», con questa lo si vede arrivare.
   Le durate stanno fra 1,4s e 1,9s e i passi della sequenza sono lunghi, così
   si legge chiaramente l'uno-dopo-l'altro.
   Tutto si spegne con prefers-reduced-motion, in fondo al file. */
:root {
  --il-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* curva delle entrate in scena — 80% della corsa nel primo terzo del tempo */
  --il-ease-entrata: cubic-bezier(0.16, 1, 0.3, 1);
  --il-dur-entrata: 1.5s;
  /* passo fra un elemento e il successivo nelle sequenze */
  --il-step: 210ms;
  /* passo fra una RIGA e la successiva nei testi che entrano riga per riga */
  --il-wd-step: 150ms;
  /* quanta strada fa un blocco che sale entrando */
  --il-shift: 42px;
}

.il-reveal {
  opacity: 0;
  transform: translateY(var(--il-shift));
  transition: opacity var(--il-dur-entrata) var(--il-ease-entrata),
              transform var(--il-dur-entrata) var(--il-ease-entrata);
  transition-delay: var(--il-rd, 0ms);
}
.il-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Le card dei servizi sono il primo blocco che si guarda davvero: entrano una
   dopo l'altra (--il-rd = 400ms per card, calcolato da script.js) ma senza
   tempi morti. Una riga da tre dura ~2,4s in tutto (0 / 0,4 / 0,8s di attesa +
   1,6s di durata): era 5s, poi 4,5s, ora si legge la sequenza senza aspettare.
   Si cambia solo qui: le due variabili sono le stesse usate dalla regola
   generica qui sopra — e il momento in cui l'entrata parte è nel secondo
   osservatore in script.js (`obsCard`), invariato: la card parte quando se ne
   vede circa metà. La salita scende con la durata (80 → 60px): a 1,6s un
   tragitto lungo diventa uno scivolamento lento. */
.il-service-card {
  --il-dur-entrata: 1.6s;
  --il-shift: 60px;
}

/* ⚠️ La GARANZIA è una fascia CORTA (~600px): a schermo intero, scorrendo
   normalmente, entra ed esce in meno di un secondo. Con il passo e la durata
   generali (210ms × 4 figli + 1,5s, più le righe del paragrafo) il PULSANTE e
   il SIGILLO cominciavano a comparire quando la fascia stava già uscendo dallo
   schermo: di fatto non li si vedeva entrare (segnalato dalla titolare, «non
   tutti gli elementi entrano»). Qui la sequenza è la stessa — label, titolo,
   testo, pulsante, uno dopo l'altro — ma compressa perché l'ULTIMO parta entro
   ~330ms: con la curva expo l'80% della corsa è fatto in un terzo della durata,
   quindi tutto succede mentre la fascia è ancora davanti agli occhi.
   Le fasce alte (che restano sullo schermo per secondi) tengono il passo lento
   di :root: qui si tocca SOLO la garanzia. */
.il-guarantee-text {
  --il-step: 110ms;
  --il-wd-step: 60ms;
  --il-dur-entrata: 1.1s;
}

/* Il sigillo «100% soddisfatti»: è un tondo grande, e 42px di salita su un
   tondo grande non si vedono. Sale da più lontano, chiudendo un filo di
   ingrandimento, e con mezzo passo di ritardo — così arriva DOPO il testo
   accanto e si legge come una sequenza, non come due cose insieme. */
.il-guarantee-seal {
  --il-dur-entrata: 1.2s;
  --il-shift: 70px;
  --il-rd: 120ms;
}
.il-reveal.il-guarantee-seal { transform: translateY(var(--il-shift)) scale(0.9); }
.il-reveal.il-guarantee-seal.is-visible { transform: translateY(0) scale(1); }

/* Il bottone «Scopri come funziona» è uscito dal blocco di testo (serviva a
   infilare il sigillo davanti a lui su telefono), quindi non riceve più il
   ritardo a cascata dei fratelli: glielo si dà qui, così resta l'ultimo ad
   arrivare. Durata corta come il resto della fascia garanzia, che sullo schermo
   passa in meno di un secondo. */
.il-guarantee-inner > .il-cta-btn {
  --il-rd: 260ms;
  --il-dur-entrata: 1.1s;
}

/* Entrata in fila: il ritardo di ogni figlio è il suo indice (--il-i, messo da
   script.js) per un passo fisso. Il contenitore è l'unico osservato. */
.il-stagger > * {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--il-dur-entrata) var(--il-ease-entrata),
              transform var(--il-dur-entrata) var(--il-ease-entrata);
  transition-delay: calc(var(--il-i, 0) * var(--il-step));
}
.il-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Testo che entra una riga per volta: le parole salgono e compaiono, quelle
   della stessa riga insieme (--wl, il numero della riga, lo mette script.js).
   L'elemento è escluso dalla cascata del genitore: qui animano le parole. */
.il-stagger > .il-lines { opacity: 1; transform: none; transition: none; }

/* Listino di servizi.html: le righe sono <a>, e un selettore con l'elemento
   (0,1,1) batte `.il-stagger > *` (0,1,0). Senza questa regola la cascata non
   parte: il ritardo resta 0 per tutte e il listino compare di colpo. */
.il-stagger > a.il-price-row {
  transition: opacity var(--il-dur-entrata) var(--il-ease-entrata),
              transform var(--il-dur-entrata) var(--il-ease-entrata);
  transition-delay: calc(var(--il-i, 0) * var(--il-step));
}
.il-lines .il-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.85em);
  transition: opacity 1.15s var(--il-ease-entrata),
              transform 1.35s var(--il-ease-entrata);
  /* --wl = numero della riga (lo scrive script.js), --il-wd-step = quanto
     passa fra una riga e l'altra: così il ritmo si regola per sezione dal CSS */
  transition-delay: calc(var(--wl, 0) * var(--il-wd-step, 150ms));
}
/* Un titolo o un paragrafo dentro una cascata aspettava il SUO turno solo per
   finta: le parole partivano da zero, quindi label, titolo e testo entravano
   tutti insieme e il pulsante — unico a rispettare il passo — sembrava l'unico
   ad arrivare in ritardo. Qui il testo riga-per-riga si mette in coda come gli
   altri figli: al proprio ritardo di riga somma il posto che occupa nella
   sequenza (--il-i). */
.il-stagger > .il-lines .il-w {
  transition-delay: calc(var(--wl, 0) * var(--il-wd-step, 150ms) + var(--il-i, 0) * var(--il-step));
}
.is-visible .il-lines .il-w,
.il-lines.is-visible .il-w {
  opacity: 1;
  transform: translateY(0);
}

/* Effetto "mazzo di carte" (sezione «Cosa è incluso»), GUIDATO DALLO SCROLL.
   La sezione si blocca in cima allo schermo e, mentre si scorre, le card
   escono dal mazzo una alla volta fino alle loro caselle: si va avanti e
   indietro con la rotellina, non partono più da sole a tempo.
   La posizione di ogni card la scrive script.js come `transform` in linea
   (calcolata dalla posizione reale nella griglia), quindi qui NON ci vuole
   nessuna transizione: sarebbe un ritardo fra la rotellina e il movimento. */
.il-deck > .il-detail-item {
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--dr, 0deg)) scale(0.92);
  will-change: transform;
}
/* Il mazzo si apre solo dove c'è spazio: sotto i 1001px la sezione non si
   blocca (bloccare lo scorrimento col dito è fastidioso) e le card restano
   nella loro griglia normale. */
@media (min-width: 1001px) {
  .il-details.il-deckpin {
    height: 210vh;
    padding: 0;
  }
  .il-deckpin-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem;
  }
  /* la card sopra il mazzo copre quelle sotto: senza, i bordi chiari di tutte
     e sei si sommano e la pila sembra una macchia */
  .il-deck > .il-detail-item { position: relative; background: var(--il-white); }
}
@media (max-width: 1000px) {
  .il-deck > .il-detail-item { transform: none; }
}

/* Effetto "paint": un pannello copre la foto e scorre via scoprendola, mentre
   l'immagine sotto chiude un lento zoom. Il pannello è un ::after, quindi non
   serve markup in più e le foto restano quelle dell'editor. */
/* La foto non si limita a farsi scoprire: entra anche lei, salendo e comparendo
   come i blocchi di testo. Senza, su uno sfondo chiaro il pannello crema che
   scorre via non si legge come un'entrata — sembrava che la foto ci fosse già
   (segnalato su «Lista regalo & Gift card»). */
/* --il-rd = ritardo della singola foto (lo mette script.js dove le foto sono in
   fila, come «Il mio stile»): senza, le foto affiancate si scoprono tutte
   insieme e la fila sembra un unico blocco. Non impostato vale 0ms, cioè il
   comportamento di prima per tutte le foto singole del sito. */
.il-paint {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.1s var(--il-ease-entrata) var(--il-rd, 0ms),
              transform 1.4s var(--il-ease-entrata) var(--il-rd, 0ms);
}
.il-paint.is-visible { opacity: 1; transform: translateY(0); }
.il-paint::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--il-cream);
  transform: translateX(0);
  transition: transform 1.8s cubic-bezier(0.72, 0, 0.18, 1) calc(var(--il-rd, 0ms) + 0.15s);
}
.il-paint.is-visible::after { transform: translateX(102%); }
.il-paint img {
  transform: scale(1.09);
  transition: transform 3.4s var(--il-ease-entrata) var(--il-rd, 0ms);
}
.il-paint.is-visible img { transform: scale(1); }

/* Hero: titolo, filo, sottotitolo e pulsanti entrano in sequenza al caricamento
   (niente osservatore: la hero è già a schermo). */
@keyframes il-hero-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.il-hero-content > * {
  opacity: 0;
  animation: il-hero-in 1.7s var(--il-ease-entrata) forwards;
}
.il-hero-content > *:nth-child(1) { animation-delay: 0.3s; }
.il-hero-content > *:nth-child(2) { animation-delay: 0.6s; }
.il-hero-content > *:nth-child(3) { animation-delay: 0.85s; }
.il-hero-content > *:nth-child(n+4) { animation-delay: 1.1s; }

/* ═══════════ FAQ — rifiniture ═══════════
   ⚠️ La sezione deve restare a TUTTA LARGHEZZA. Qui c'era un
   `max-width: 820px; margin: 0 auto` — residuo della vecchia FAQ iniettata da
   JS con <details>/<summary> — che, essendo più in basso nel file, vinceva
   sulla regola vera (.il-faq, sezione FAQ) e stringeva la <section> a 820px.
   Con le sezioni impilate la fascia «immagine + testo» che precede la FAQ resta
   ferma sotto: una FAQ stretta la lasciava vedere ai lati e sembrava che la FAQ
   fosse senza sfondo, sovrapposta alla sezione precedente.
   Il limite di larghezza va sulla LISTA (.il-faq-list), mai sulla sezione. */
.il-faq { padding: 5rem 1.5rem 4rem; }
.il-faq .il-sec { padding: 0; text-align: center; }
.il-faq .il-divider { margin-left: auto; margin-right: auto; }
.il-faq-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.il-faq-item {
  border-bottom: 1px solid var(--il-warm-lighter);
  padding: 0.2rem 0;
  transition: background 0.2s ease;
}

@media (max-width: 600px) {
  .il-faq { padding: 3.5rem 1.2rem 2.8rem; }
}

/* ═══════════ PRICE CARD (landing prezzi evidenziati) ═══════════ */
.il-prices {
  padding: 5.5rem 1.5rem;
  background: var(--il-warm-bg);
}
.il-prices-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3rem;
}
.il-prices-head .il-divider { margin-left: auto; margin-right: auto; }
.il-prices-inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: stretch;
}
.il-prices-inner.is-single {
  max-width: 460px;
  grid-template-columns: 1fr;
}

.il-price-card {
  background: var(--il-white);
  border: 1px solid var(--il-warm-lighter);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 22px rgba(46, 38, 32, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.il-price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(46, 38, 32, 0.1);
}
.il-price-card.is-featured {
  border-color: var(--il-warm);
  box-shadow: 0 10px 30px rgba(184, 166, 153, 0.2);
}
.il-price-card.is-featured .il-price-card-head {
  background: var(--il-warm);
  color: #fff;
}
.il-price-card.is-featured .il-price-card-head h3 { color: #fff; }

.il-price-card-head {
  background: var(--il-warm-lighter);
  padding: 1.35rem 1rem;
  text-align: center;
}
.il-price-card-head h3 {
  font-family: var(--il-font-sans, 'Montserrat', sans-serif);
  font-size: 0.88rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--il-text-dark);
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.il-price-card-body {
  padding: 2.6rem 1.8rem 2.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.il-price-amount {
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 400;
  font-size: 4.6rem;
  line-height: 1;
  color: var(--il-text-dark);
  display: inline-flex;
  align-items: flex-start;
  gap: 0.08em;
  margin: 0;
}
.il-price-amount sup {
  font-size: 0.3em;
  font-weight: 500;
  color: var(--il-warm-dark);
  margin-top: 0.35em;
  line-height: 1;
}
/* ⚠️ `<small>` oltre a `.il-price-old`: `.il-price-amount` emette UNA SOLA
   stringa nell'editor (testo nudo + figli inline), e al primo salvataggio
   `fa_clean_html` toglie la `class` allo <span> — la barratura sparirebbe in
   silenzio appena la titolare corregge un prezzo. `<small>` è in whitelist e
   sopravvive, quindi si stila anche il TAG. */
.il-price-amount .il-price-old,
.il-price-amount small {
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 0.42em;
  color: var(--il-text-light);
  text-decoration: line-through;
  margin-right: 0.3em;
  align-self: flex-end;
  margin-bottom: 0.45em;
  font-weight: 400;
  opacity: 0.7;
}
.il-price-subnote {
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--il-warm-dark);
  margin-top: 0.6rem;
  font-weight: 500;
}

.il-price-features {
  list-style: none;
  padding: 0;
  margin: 2.2rem 0 2.2rem;
  width: 100%;
  max-width: 340px;
}
/* Card SENZA importo (le due gift card): lì l'elenco è il primo elemento e quei
   2,2rem — nati per staccarlo dal prezzo — diventano un vuoto di 84px sotto
   l'intestazione. */
.il-price-card-body > .il-price-features:first-child { margin-top: 0; }
.il-price-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--il-warm-lighter);
  font-size: 0.94rem;
  color: var(--il-text);
  line-height: 1.5;
  text-align: left;
}
.il-price-features li:last-child { border-bottom: none; }
.il-price-features li i,
.il-price-features li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--il-warm-dark);
  stroke: var(--il-warm-dark);
  margin-top: 2px;
}
.il-price-features li strong { color: var(--il-text-dark); font-weight: 600; }

/* Il pulsante del listino tiene la sua FORMA (pillola, larghezza minima, spinto
   in fondo alla scheda) ma NON il suo colore: prima invertiva la regola generale
   — scuro a riposo, beige al passaggio del mouse — ed era l'unico comando nero
   del sito. Tolte le due dichiarazioni di sfondo eredita `.il-cta-btn`: beige a
   riposo, scuro al hover, come ogni altro pulsante. Rimettere qui un `background`
   significa ricreare l'eccezione. */
.il-price-card-body .il-cta-btn {
  margin-top: auto;
  background: var(--il-warm-deep);
  border-color: var(--il-warm-deep);
  border-radius: 30px;
  min-width: 190px;
  justify-content: center;
}
/* ⚠️ Questa regola SERVE. `.il-price-card-body .il-cta-btn` e `.il-cta-btn:hover`
   hanno la stessa specificità (0,2,0) e la prima sta più in basso nel file:
   senza una hover dedicata vincerebbe anche al passaggio del mouse e il pulsante
   resterebbe immobile. Scurisce come tutti gli altri pulsanti del sito. */
.il-price-card-body .il-cta-btn:hover {
  background: var(--il-text-dark);
  border-color: var(--il-text-dark);
}

/* GIFT CARD — nota sotto il pulsante della scheda digitale.
   ⚠️ Il 28 agosto 2026 la tendina degli importi è stata tolta (su Bink ogni
   importo era un prodotto a sé): con lei se ne sono andate le regole
   `.il-gift-picker`, `.il-gift-choose`, `.il-gift-select` e `.il-gift-go` e la
   IIFE che le pilotava in script.js. Il pulsante è ora uno solo e prende le
   regole comuni di `.il-price-card-body .il-cta-btn`. */
.il-gift-note {
  margin-top: 1rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--il-warm-dark);
}


/* Ancora in fondo alla pagina gift card: riporta alle due schede in cima.
   Lo `scroll-margin-top` sta sul BERSAGLIO (.il-prices): risalendo la pagina la
   barra di navigazione ricompare (script.js la nasconde solo scendendo) e senza
   quel margine coprirebbe l'intestazione della sezione. */
.il-gift-anchor {
  padding: 4rem 1.5rem 5rem;
  text-align: center;
}
.il-prices { scroll-margin-top: 96px; }

.il-price-foot {
  text-align: center;
  margin-top: 2rem;
  color: var(--il-text-light);
  font-size: 0.86rem;
}

@media (max-width: 600px) {
  .il-prices { padding: 3.5rem 1rem 3rem; }
  .il-prices-head { margin-bottom: 2rem; }
  .il-price-card-body { padding: 2rem 1.3rem 1.8rem; }
  .il-price-amount { font-size: 3.6rem; }
  .il-price-features { margin: 1.6rem 0 1.8rem; }
  .il-price-features li { font-size: 0.9rem; }
}

/* ═══════════ SERVICE GALLERY (slideshow on service pages) ═══════════ */
.il-service-gallery {
  position: relative;
  width: min(1100px, calc(100% - 3rem));
  margin: 2.5rem auto;
  aspect-ratio: 3 / 2;          /* default orizzontale; JS lo adatta all'orientamento della 1ª foto */
  background: #1a1511;
}
/* Il ritaglio sta sulla PILA DI SLIDE, non sulla sezione: alla sezione serve
   poter sbordare per dipingere la fascia crema qui sotto (con `overflow: hidden`
   veniva tagliata sul bordo della cornice e non copriva niente). Le slide sono
   `position: absolute; inset: 0`: prendendo la pila come riferimento restano
   dove erano, e lo zoom `scale(1.06)` continua a essere tagliato. */
.il-service-gallery > [data-hero-slider] {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.il-service-gallery .il-hero-dots {
  bottom: 1.2rem;
}
/* La cornice è larga 1100px e ha sfondo scuro suo: ai lati (e nei margini
   verticali) la sezione non copre nulla, e sopra una fascia impilata si vedeva
   quella ferma sotto. Questa fascia crema a tutta larghezza sta DENTRO la
   sezione (`z-index: -1`, cioè dietro alla cornice ma davanti alle impilate, che
   stanno a `z-index: 0`) e copre anche i due margini da 2,5rem.
   Solo se lo slideshow NON è stato convertito nella fila che scorre: quella ha
   già sfondo pieno e occupa tutta la larghezza. */
.il-service-gallery:not(.il-pinsec)::before {
  content: '';
  position: absolute;
  top: -2.5rem;
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--il-cream);
  z-index: -1;
  /* niente `pointer-events: none`: la fascia copre la sezione impilata sotto,
     quindi deve anche intercettarne i clic (il suo pulsante non è più visibile) */
}
@media (max-width: 768px) {
  .il-service-gallery { width: calc(100% - 2rem); margin: 1.5rem auto; }
}

/* ═══════════ PAGE BUILDER · sezioni dinamiche + utility font ═══════════ */
/* Font del sito usabili nel rich text (pulsante "elegante" / dropdown font) */
.il-serif { font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif); }
.il-sans  { font-family: var(--il-font-sans, 'Montserrat', sans-serif); }
.il-buttons-block .il-sec-heading { margin: 0 auto 1.6rem; }
.il-buttons-block .il-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;        /* default: centrato */
}
.il-buttons-block.il-a-left  .il-hero-ctas { justify-content: flex-start; }
.il-buttons-block.il-a-right .il-hero-ctas { justify-content: flex-end; }
.il-video-block .il-sec-heading { text-align: center; margin: 0 auto 1.6rem; }
/* La galleria foto rispetta l'allineamento centrando/spostando la griglia */
.il-section-gallery.il-a-left  .il-gallery-grid { justify-content: flex-start; }
.il-section-gallery.il-a-right .il-gallery-grid { justify-content: flex-end; }
.il-section-gallery.il-a-center .il-gallery-grid { justify-content: center; }

@media (max-width: 600px) {
  .il-buttons-block, .il-video-block { padding: 2.2rem 1rem; }
  .il-buttons-block .il-hero-ctas { flex-direction: column; }
  .il-buttons-block .il-hero-ctas .il-cta-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING DI NATALE — natale.html (IT) e christmas-photoshoot-livorno.html (EN)
   Blocco unico, cancellabile in blocco: quando la stagione finisce si tolgono
   queste righe, le 8 di prefers-reduced-motion, le 2 variabili in .il-landing e
   la landing è sparita senza lasciare residui.
   Qui c'è SOLO ciò che il sito non sapeva già fare: il mazzo di carte, il
   rullino, le price card, la garanzia, le FAQ, la fascia col media a tutta
   larghezza e le entrate in scena sono componenti esistenti, riusati con la
   convenzione delle due classi (la prima `il-nat-*` nomina il gruppo
   nell'editor, la seconda porta lo stile collaudato).

   ⚠️ SFONDO PIENO — la regola d'oro. Due fasce di questa pagina si impilano
      (`.il-nat-scarsita.il-videosec` e `.il-marquee-sec`, entrambe in FASCE,
      script.js:1000) e una fascia impilata resta incollata in cima PER TUTTO IL
      RESTO DELLA PAGINA. Quindi ogni sezione che le passa sopra deve essere
      opaca a TUTTA LARGHEZZA. Il ripiego `:where(.il-landing >
      section:not(.il-stack))` di styles.css:1006 ha specificità zero e copre
      solo chi non dichiara sfondo — e comunque NON copre i lati di una sezione
      più stretta del viewport. Perciò qui il limite di lettura sta sempre nel
      PADDING o su un contenitore interno, mai in `max-width` + `margin: auto`
      sulla <section> (fu il difetto di `.il-article` su servizio-gravidanza).
═══════════════════════════════════════════════════════════════════════════ */

/* ── Barra scorrevole ─────────────────────────────────────────────────────
   Nel file la frase c'è UNA volta sola (due copie = due campi nell'editor, la
   titolare ne corregge una e la barra dice due cose diverse): le copie le fa
   script.js con aria-hidden e duplica l'intera fila, così la traslazione di
   -50% chiude il ciclo esatto — lo stesso trucco delle colonne del rullino
   (styles.css:906-911).
   ⚠️ La durata è FISSA (38s per mezzo giro): allungando la frase la barra va
      più veloce, accorciandola più piano. È l'unico numero da toccare. */
.il-nat-ticker {
  background: var(--il-nat-notte);
  color: var(--il-warm-lighter);          /* 15:1 sul fondo notte */
  overflow: hidden;                        /* la fila è più larga dello schermo */
  padding: 0.72rem 0;
}
.il-nat-ticker-fila {
  display: flex;
  width: max-content;
  animation: il-nat-tick 38s linear infinite;
  will-change: transform;
}
.il-nat-ticker-it {
  margin: 0;
  padding-right: 0.6rem;                   /* stacco fra una copia e l'altra */
  font-size: 0.7rem;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
@keyframes il-nat-tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Apertura (hero) ──────────────────────────────────────────────────────
   NON riusa `.il-hero`: quella è `height: calc(100vh - 73px)` FISSA con
   `overflow: hidden` (styles.css:359-366), e con sei figli più i 42px del
   ticker su un portatile basso il pulsante finisce sotto il taglio — è il
   difetto già documentato per «Scopri come lavoro» a 1440×700. Qui c'è un
   `min-height` e la fascia CRESCE con il contenuto: non taglia mai niente.
   Due foto verticali sbordano ai lati con margini negativi; lo sbordo lo taglia
   `.il-landing` con `overflow-x: clip` (styles.css:45), che a differenza di
   `hidden` non crea un contenitore di scorrimento e quindi non spegne gli
   sticky della pagina.
   ⚠️ `minmax(0, …fr)` e non `…fr`: il minimo automatico di una traccia è la
      dimensione del contenuto, e con due immagini dentro le colonne laterali si
      rifiuterebbero di stringersi sotto una certa misura. */
.il-nat-hero {
  position: relative;
  display: flex;
  align-items: center;
  /* ⚠️ `min-height`, MAI `height`: con un'altezza fissa (è quello che fa
     `.il-hero`, poco sopra) più `overflow: hidden`, su uno schermo basso il
     pulsante finisce sotto il taglio e diventa incliccabile — difetto già visto
     su «Scopri come lavoro». Così invece la fascia CRESCE con il contenuto e
     l'`overflow` non taglia mai niente di leggibile. `svh` per non contare le
     barre del browser sul telefono. */
  min-height: 100svh;
  padding: clamp(3.2rem, 9vh, 6.5rem) 1.5rem clamp(3.2rem, 7vh, 5rem);
  /* fondo scuro: se la foto non arriva, il testo bianco resta leggibile */
  background: var(--il-nat-notte);
  overflow: hidden;
}
/* La foto riempie la fascia qualunque altezza prenda. `height: 100%` la rende
   anche immune alla trappola width/height → aspect-ratio: l'altezza è
   dichiarata, quindi l'attributo `height="1200"` non comanda più. */
.il-nat-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* i soggetti del set stanno al centro: spostando l'inquadratura verso destra,
     il testo a sinistra si appoggia sulla parte più vuota della scena */
  object-position: 62% center;
  z-index: 0;
}
.il-nat-hero .il-hero-overlay { z-index: 1; }
.il-nat-hero-testo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  /* Larga: ogni riga in meno del sottotitolo sono ~28px di altezza risparmiati,
     ed è quello che decide se il pulsante resta sopra la piega su un portatile.
     Il limite di leggibilità (~75 caratteri per riga) è comunque rispettato. */
  max-width: 720px;
  /* il testo sta a sinistra, dove il velo orizzontale di `.il-hero-overlay` è
     più scuro (0,45 a sinistra contro 0,1 al 60%): è quel gradiente a rendere
     leggibile il bianco su foto chiarissime come queste */
  margin-right: auto;
  color: var(--il-cream);
}
/* Tutto il testo della hero passa al chiaro. Le ombre non sono un vezzo: le
   foto del set di Natale sono bianco su bianco con le luci calde, e senza ombra
   il testo bianco sparisce sui punti più luminosi. */
.il-nat-hero .il-sec-label,
.il-nat-hero .il-nat-promo { color: rgba(253, 251, 249, 0.88); text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
.il-nat-hero .il-nat-claim { color: var(--il-white); text-shadow: 0 2px 26px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.45); }
/* Il sottotitolo è la riga che si legge davvero, e sta su una foto chiarissima:
   bianco pieno, un filo più grande e più spaziato, e SOPRATTUTTO un'ombra doppia
   — una stretta che stacca il bordo delle lettere e una larga che fa da velo
   locale. Misurato dietro questo testo: mediana 5,8:1 con la sola ombra
   leggera, e le lettere si perdevano comunque sulle scintille delle luci.
   ⚠️ Non alzare il peso oltre 400: il Montserrat in chiaro su foto «spande» e
      diventa più difficile da leggere, non più facile. */
.il-nat-hero .il-nat-sub {
  color: var(--il-white);
  font-size: clamp(1.04rem, 1.45vw, 1.2rem);
  line-height: 1.75;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 22px rgba(0,0,0,0.72);
}
.il-nat-hero .il-nat-sub strong,
.il-nat-hero .il-nat-promo strong { color: var(--il-white); }
.il-nat-eyebrow { margin-bottom: 1rem; }
.il-nat-claim {
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 4.2vw, 3.9rem);
  line-height: 1.06;
  color: var(--il-text-dark);
  margin-bottom: 1.4rem;
}
/* La prima riga è un blocco: la seconda va a capo da sola e il tratto a
   pennarello resta INLINE, così segue le righe del testo. */
.il-nat-claim-a { display: block; }

/* ── Sottolineatura a pennarello ──────────────────────────────────────────
   Un tratto pieno che si allarga da sinistra sotto le parole. È un gradiente
   di sfondo, non un bordo: `box-decoration-break: clone` lo fa spezzare bene
   quando la frase va a capo.
   ⚠️ La classe sta sul TAG scritto nel file, non dentro il valore di un campo:
      `fa_clean_html` tiene in whitelist solo cinque classi, e uno
      <span class="…"> scritto DENTRO un testo la perderebbe al primo
      salvataggio, in silenzio.
   ⚠️ Il verso della regola conta. Il valore predefinito è il tratto PIENO, e
      solo una cascata non ancora entrata lo azzera: se il tratto fosse a 0 per
      difetto e ad accenderlo fosse `.is-visible`, basterebbe che la modifica
      (a) della §4 non venisse applicata — `.il-nat-hero-testo` non riceve
      `.il-stagger` — perché il titolo restasse senza tratto PER SEMPRE. Così
      invece il caso peggiore è «tratto già disegnato, niente animazione».
   ⚠️ Il gancio è `.il-stagger:not(.is-visible)` e non
      `.il-nat-hero-testo:not(.is-visible)`: vale per qualunque titolo dentro
      una cascata, quindi anche per la pagina inglese e per un futuro
      `.il-nat-mark` in un'altra sezione. */
.il-nat-mark {
  --il-mark: var(--il-warm-light);
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--il-mark), var(--il-mark));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.30em;
  transition: background-size 1.2s var(--il-ease-entrata) 0.55s;
}
.il-stagger:not(.is-visible) .il-nat-mark {
  background-size: 0% 0.30em;
  transition: none;              /* niente ritorno all'indietro se si esce */
}
/* Sul pannello notte il tratto chiaro coprirebbe il testo chiaro: si tiene un
   filo appena percettibile. (Serve il giorno in cui si userà .il-nat-mark
   dentro .il-nat-cal; oggi il calendario non ne ha.) */
.il-nat-cal .il-nat-mark { --il-mark: rgba(212, 200, 188, 0.28); }
/* Sopra la foto della hero il tratto chiaro sparirebbe sulle scene bianche (e
   queste lo sono quasi tutte): si usa il warm pieno, che si stacca sia sul
   chiaro sia sullo scuro, e sotto il testo bianco aiuta anche a leggerlo. */
.il-nat-hero .il-nat-mark { --il-mark: var(--il-warm); }

.il-nat-sub {
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.8;
  font-weight: 300;
  color: var(--il-text-light);
  margin-bottom: 1.8rem;
}
.il-nat-sub strong { color: var(--il-text-dark); font-weight: 500; }
.il-nat-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.il-nat-promo {
  margin-top: 1.1rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--il-text-light);
}
.il-nat-promo strong { color: var(--il-text-dark); font-weight: 600; }

/* Pastiglia del prezzo e riga «posti»: due componenti che stanno in styles.css
   da mesi (`.il-hero-badge` riga 449, `.il-hero-spots` riga 505) e che NESSUNA
   pagina usa — verificato con `grep -l` su tutti i .html: zero occorrenze. Sono
   esattamente la pastiglia col prezzo e la riga di scarsità della reference:
   qui se ne riusa la geometria e si riscrivono solo i colori, perché erano nati
   per il testo bianco su foto scura. */
/* La pastiglia del prezzo: appoggiata in basso a sinistra sopra la foto, come
   il pulsante in basso a destra della landing del 2025. Resta crema su fondo
   foto, così si stacca comunque anche sulle scene più chiare. */
.il-nat-hero .il-hero-badge {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 4vh, 2.6rem);
  z-index: 2;
  margin: 0;                                   /* annulla il margin-bottom 1.5rem */
  max-width: calc(100% - 3rem);
  background: rgba(253, 251, 249, 0.93);
  border-color: var(--il-warm-light);
  color: var(--il-text-dark);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 0.62rem;
  letter-spacing: 2px;
}
.il-nat-hero .il-hero-spots {
  margin: 1.4rem 0 0;
  color: rgba(253, 251, 249, 0.82);
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);    /* sopra la foto serve */
  font-size: 0.72rem;
  letter-spacing: 1.8px;
}

/* ── Pillola col prezzo dentro ────────────────────────────────────────────
   Il bottone stondato esisteva solo dentro `.il-price-card-body`
   (styles.css:3029, `border-radius: 30px`): qui diventa un modificatore
   riusabile, con il prezzo in una pastiglia interna.
   ⚠️ `.il-cta-btn.il-nat-pill` (0,2,0) e non `.il-nat-pill`: a ≤600px
      `.il-cta-btn` (0,1,0) riscrive `padding` e `font-size` (styles.css:2181) e
      con una classe sola la pastiglia si sfascerebbe sul telefono.
   Bersaglio da toccare: 1,32rem di prezzo (23px) + 2×0,42rem della pastiglia
   interna + 2×0,62rem del bottone = ~59px di altezza a ogni larghezza. */
.il-cta-btn.il-nat-pill {
  border-radius: 30px;
  background: var(--il-text-dark);
  border-color: var(--il-text-dark);
  padding: 0.62rem 0.62rem 0.62rem 1.9rem;
  gap: 0.9rem;
}
.il-cta-btn.il-nat-pill:hover {
  background: var(--il-warm);
  border-color: var(--il-warm);
}
/* ⚠️ DUE <span> FRATELLI dentro il pulsante, senza testo nudo e senza spazi
   fra i due: così l'estrattore scende e ne fa DUE campi («Pulsante 1» =
   l'etichetta, «Pulsante 2» = il prezzo), e le classi restano STRUTTURA — non
   passano mai da fa_clean_html, che di classi ne tiene solo cinque e la
   pastiglia perderebbe lo stile in silenzio al primo salvataggio.
   ⚠️ Se qualcuno rimette del testo nudo nel pulsante, torna a essere un campo
   solo e il difetto ricompare. */
.il-cta-btn.il-nat-pill .il-nat-pill-p {
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.32rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  padding: 0.42rem 0.95rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.15);
}

/* ⚠️ La soglia è 900px, la STESSA a cui `.il-hero-overlay` passa alla macchia
   radiale centrata (styles.css, blocco «HERO MOBILE»). Se le due soglie non
   coincidono esiste una fascia di larghezze in cui il testo è già centrato ma
   il velo è ancora scuro solo a sinistra: bianco su bianco, illeggibile. */
@media (max-width: 900px) {
  .il-nat-hero {
    padding: clamp(4.5rem, 14vh, 7rem) 1.2rem clamp(4.5rem, 12vh, 6rem);
  }
  /* Centrato, per stare dentro la macchia radiale del velo. */
  .il-nat-hero-testo {
    align-items: center;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
  }
  /* ⚠️ Il testo di questa hero è più alto di quello della home (etichetta,
     titolo, sottotitolo lungo, due pulsanti, promozione e date): la macchia
     radiale della home è alta 68% e lascia scoperta la parte bassa, dove la
     riga della promozione finiva su una zona chiarissima. Stessa medicina di
     `.il-videosec-overlay`: macchia più alta. Misurato a 430px, contrasto della
     riga promozione nel peggior 5%: 2,27:1 → oltre 4,5:1. */
  .il-nat-hero .il-hero-overlay {
    background:
      radial-gradient(135% 94% at 50% 50%, rgba(26,21,17,0.66) 0%, rgba(26,21,17,0.44) 55%, rgba(26,21,17,0.08) 100%),
      linear-gradient(180deg, rgba(26,21,17,0.55) 0%, rgba(26,21,17,0.44) 35%, rgba(26,21,17,0.78) 100%);
  }
  /* Su uno schermo verticale una foto orizzontale viene ritagliata parecchio:
     qui il centro è la scelta giusta (lo scostamento del desktop serviva a
     liberare la colonna di sinistra, che sul telefono non c'è). */
  .il-nat-hero-media { object-position: center; }
  .il-nat-hero-ctas { justify-content: center; }
  .il-nat-hero .il-hero-badge {
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.56rem;
    letter-spacing: 1.4px;
    text-align: center;
  }
}

/* Portatili bassi (1440×760, 1280×720): il testo della hero è alto ~820px e il
   pulsante finirebbe sotto la piega, cioè invisibile a chi non scorre. Qui la
   tipografia si stringe invece di tagliare le parole della titolare: stessa
   strada già presa per «Scopri come lavoro» (@media max-height). */
@media (min-width: 1001px) and (max-height: 830px) {
  .il-nat-hero { padding-top: clamp(2.6rem, 7vh, 4.5rem); padding-bottom: clamp(2.6rem, 6vh, 4rem); }
  .il-nat-hero .il-nat-claim { font-size: clamp(2.1rem, 3.4vw, 3rem); }
  .il-nat-hero .il-nat-sub { font-size: 0.98rem; line-height: 1.62; }
  .il-nat-hero-testo { max-width: 760px; }
}

/* ── Numeri in evidenza ───────────────────────────────────────────────────
   <dl> e non card: le coppie termine/valore sono la struttura che i motori
   generativi ricopiano quasi alla lettera.
   ⚠️ MAI `.il-details-grid` per questa riga: script.js:408 prende OGNI
      `.il-details-grid` con ≥3 `.il-detail-item` e trasforma la sezione
      contenitrice nel mazzo di carte alto 210vh.
   Il filo DIVIDE, non incornicia: si toglie al primo di ogni riga — e le righe
   cambiano con le colonne, quindi la regola si ripete a ogni soglia. */
.il-nat-facts {
  background: var(--il-cream);
  border-bottom: 1px solid var(--il-warm-lighter);
  padding: 2.4rem 1.5rem;
}
.il-nat-facts-lista {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  max-width: 1220px;
  margin: 0 auto;
}
.il-nat-fact {
  --il-shift: 22px;          /* 42px di salita su una voce alta 60 sembrano un salto */
  --il-dur-entrata: 1.1s;
  padding: 0.3rem 0.9rem;
  border-left: 1px solid var(--il-warm-lighter);
  text-align: center;
}
.il-nat-fact:nth-child(6n + 1) { border-left: 0; }
.il-nat-fact-k {
  margin: 0 0 0.42rem;
  font-size: 0.66rem;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--il-warm-dark);
}
.il-nat-fact-v {
  margin: 0;
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--il-text-dark);
}
@media (max-width: 1000px) {
  .il-nat-facts-lista { grid-template-columns: repeat(3, 1fr); row-gap: 1.5rem; }
  .il-nat-fact:nth-child(6n + 1) { border-left: 1px solid var(--il-warm-lighter); }
  .il-nat-fact:nth-child(3n + 1) { border-left: 0; }
}
@media (max-width: 600px) {
  .il-nat-facts { padding: 2rem 1.2rem; }
  .il-nat-facts-lista { grid-template-columns: repeat(2, 1fr); }
  .il-nat-fact:nth-child(3n + 1) { border-left: 1px solid var(--il-warm-lighter); }
  .il-nat-fact:nth-child(2n + 1) { border-left: 0; }
}

/* ── Compreso / non compreso ──────────────────────────────────────────────
   Lo sfondo è dichiarato sulla SEZIONE (piena larghezza) e il limite di lettura
   sta su un contenitore interno: così la fascia resta opaca da bordo a bordo. */
.il-nat-fuori {
  background: var(--il-warm-bg);
  padding: 0 1.5rem 4.5rem;        /* l'aria in alto la dà il .il-sec dentro */
}
.il-nat-fuori-cols {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.4rem);
}
.il-nat-fuori-col.is-no {
  border-left: 1px solid var(--il-warm-light);
  padding-left: clamp(1.5rem, 4vw, 3.4rem);
}
.il-nat-fuori-tit {
  margin-bottom: 0.9rem;
  font-size: 0.74rem;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--il-text-dark);
}
.il-nat-lista { list-style: none; margin: 0; padding: 0; }
.il-nat-lista li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.85rem;
  border-bottom: 1px solid var(--il-warm-lighter);
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--il-text);
}
.il-nat-lista li:last-child { border-bottom: 0; }
.il-nat-lista a {
  color: var(--il-warm-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Segno di spunta e trattino come ::before: restano fuori dal testo, quindi
   fuori dal campo dell'editor e fuori dal `textContent` che leggono gli
   assistenti. */
.il-nat-si::before {
  content: '\2713';
  position: absolute; left: 0; top: 0.72rem;
  color: var(--il-warm-dark);
  font-weight: 600;
}
.il-nat-no::before {
  content: '\2014';
  position: absolute; left: 0; top: 0.72rem;
  color: var(--il-warm-light);
}
.il-nat-fuori-nota {
  max-width: 1000px;
  margin: 2.2rem auto 0;
  font-size: 0.88rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--il-text-light);
}
.il-nat-fuori-nota strong { color: var(--il-text-dark); font-weight: 500; }
.il-nat-fuori-cta { margin-top: 2.4rem; text-align: center; }
@media (max-width: 900px) {
  .il-nat-fuori-cols { grid-template-columns: 1fr; }
  /* a colonna singola il filo verticale non divide più niente: diventa
     orizzontale, che è ciò che separa davvero le due liste */
  .il-nat-fuori-col.is-no {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--il-warm-light);
    padding-top: 1.6rem;
  }
}

/* ── Rete di sicurezza per gli slot vuoti ─────────────────────────────────
   Le voci lasciate vuote dall'editor le TOGLIE script.js (§4.3): tolte, non
   nascoste, così `:last-child` si riassegna e non resta un filo di
   separazione appeso. Questa regola è la rete per il caso in cui il JS non
   giri o non copra quell'elenco: meglio una voce assente che una voce con il
   solo trattino (o, nella card regalo, con la sola icona dell'orologio).
   `:has()` è già in uso nel file (styles.css:823). */
.il-nat-lista li:has(> span:empty),
.il-price-features li:has(> span:empty) { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   ★ IL CALENDARIO DI NOVEMBRE
   Quattordici caselle come i quattordici giorni delle sessioni, su pannello
   notte. Chiuse sono porticine numerate; scorrendo, la porticina si alza e
   scopre una foto vera. È il gesto della reference detto con il vocabolario di
   casa: lo stesso pannello che scopre le foto in `.il-paint`.
   ⚠️ Lo sfondo scuro NON è decorazione: questa sezione scorre SOPRA la fascia
      impilata della scarsità e deve essere opaca da bordo a bordo.
   ⚠️ Le celle sono già `.il-reveal` (salgono e compaiono): la porticina parte
      DOPO, con un ritardo suo (`--il-porta`), o i due effetti si accavallano e
      non si legge né l'uno né l'altro.
   ⚠️ Il velo scuro sopra la foto non è estetica: le 27 foto sono high-key
      (bianco su bianco) e senza velo il numero in bianco sparisce.
   ⚠️ Niente di focalizzabile dentro la griglia: sono date già scritte in
      chiaro, e quattordici tabulazioni per leggerle sarebbero una trappola da
      tastiera. Gli unici comandi sono i due pulsanti sopra.
══════════════════════════════════════════════════════════════════════════ */
.il-nat-cal {
  background: var(--il-nat-notte);
  color: var(--il-warm-lighter);
  padding: 0 1.5rem 4.5rem;
}
/* I componenti di sezione sono nati per fondo chiaro: qui si riscrivono i
   quattro colori del testo, non la loro geometria. */
.il-nat-cal .il-sec-label   { color: var(--il-warm-light); }      /* 8,9:1 */
.il-nat-cal .il-sec-heading { color: #fff; }
.il-nat-cal .il-sec-heading em { color: var(--il-warm-light); }
.il-nat-cal .il-sec-text    { color: rgba(236, 230, 224, 0.82); }
.il-nat-cal .il-divider     { background: rgba(236, 230, 224, 0.35); }
.il-nat-cal .il-cta-btn-ghost {
  color: var(--il-warm-lighter);
  border-color: rgba(236, 230, 224, 0.42);
}
.il-nat-cal .il-cta-btn-ghost:hover,
.il-nat-cal .il-cta-btn-ghost:focus {
  background: #fff;
  color: var(--il-text-dark);
  border-color: #fff;
}
/* L'anello di focus warm su fondo notte non si vede: qui è chiaro, come già si
   fa per l'hero scuro (styles.css:3207). */
.il-nat-cal :focus-visible { outline-color: var(--il-warm-lighter); }
.il-nat-cal-scelta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin: 0.6rem 0 1.6rem;
}
.il-nat-cal-legenda {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  color: rgba(236, 230, 224, 0.7);
}

/* SETTE colonne, e non è un numero a caso: le sessioni vanno dal sabato 7 al
   venerdì 20, cioè esattamente due settimane, quindi con sette caselle per riga
   la colonna 1 è sabato e la colonna 2 domenica IN TUTTE E DUE LE RIGHE — i
   pallini del fine settimana si incolonnano da soli. */
.il-nat-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.il-nat-cell {
  --il-shift: 22px;            /* la cella è piccola: 42px sarebbero un salto */
  --il-dur-entrata: 1.1s;
  --il-porta: 380ms;           /* quanto la porticina aspetta l'entrata della cella */
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  /* Il fondo della cella è UN PASSO PIÙ CHIARO del pannello: è questo che rende
     visibili le caselle ancora chiuse. */
  background: var(--il-text-dark);
  border: 1px solid rgba(236, 230, 224, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* numero e giorno in basso */
  gap: 0.12rem;
  padding: 0.5rem 0.55rem;
}
.il-nat-cell.is-we { border-color: rgba(212, 200, 188, 0.45); }
.il-nat-cell-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.25s var(--il-ease-entrata) calc(var(--il-rd, 0ms) + var(--il-porta)),
              transform 2.6s  var(--il-ease-entrata) calc(var(--il-rd, 0ms) + var(--il-porta));
}
/* Velo: numero e giorno restano leggibili anche sulle foto quasi bianche. */
.il-nat-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
              rgba(26, 21, 17, 0.86) 0%,
              rgba(26, 21, 17, 0.32) 55%,
              rgba(26, 21, 17, 0.10) 100%);
  opacity: 0;
  transition: opacity 1.25s var(--il-ease-entrata) calc(var(--il-rd, 0ms) + var(--il-porta));
}
/* LA PORTICINA: un pannello del colore della casella chiusa, che si alza e
   scopre la foto. Sta SOTTO il numero (z-index 2 contro 3), così la data si
   legge sia a porta chiusa sia a porta aperta e non «appare» a metà corsa. */
.il-nat-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--il-text-dark);
  transform: translateY(0);
  /* -101% e non -100%: a -100% resta una riga di un pixel sul bordo */
  transition: transform 1s var(--il-ease-entrata) calc(var(--il-rd, 0ms) + var(--il-porta));
}
.il-nat-cell.is-visible .il-nat-cell-img { opacity: 1; transform: none; }
.il-nat-cell.is-visible::before { opacity: 1; }
.il-nat-cell.is-visible::after  { transform: translateY(-101%); }
.il-nat-cell > span { position: relative; z-index: 3; }
.il-nat-cell-num {
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.35rem, 2.1vw, 2.2rem);
  font-weight: 300;
  line-height: 1;
  color: #fff;
}
.il-nat-cell-dow {
  font-size: 0.56rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--il-warm-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;     /* «mercoledì» è la parola lunga: si accorcia, non sborda */
}
/* Il pallino del fine settimana è un ::before del giorno, non un elemento:
   resta fuori dall'editor e fuori dal testo che si copia. La classe `is-we` la
   mette script.js leggendo la parola scritta nella casella. */
.il-nat-cell.is-we .il-nat-cell-dow::before { content: '\25CF\00A0'; color: var(--il-warm); }

/* DISPONIBILITÀ — è una STRINGA scritta dalla titolare, non un dato.
   Nascosta di default: una pagina appena pubblicata non dichiara nessuna
   urgenza, ed è la titolare a decidere quando accenderla. Una casella svuotata
   torna neutra da sola: è lo stato SICURO, perché un'urgenza non più vera è una
   pratica commerciale scorretta. */
.il-nat-cell-state { display: none; }
.il-nat-cell.is-libero   .il-nat-cell-state,
.il-nat-cell.is-pochi    .il-nat-cell-state,
.il-nat-cell.is-esaurito .il-nat-cell-state {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.54rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-weight: 600;
}
.il-nat-cell.is-libero   .il-nat-cell-state { color: var(--il-nat-libero); }
.il-nat-cell.is-pochi    .il-nat-cell-state { color: var(--il-warm-light); }
.il-nat-cell.is-esaurito .il-nat-cell-state { color: rgba(236, 230, 224, 0.55); }
/* Esaurito: tre segnali indipendenti e mai il solo colore — la parola, il
   numero barrato, la foto smorzata.
   ⚠️ Specificità: `.il-nat-cell.is-esaurito.is-visible .il-nat-cell-img`
      (0,4,0) deve battere `.il-nat-cell.is-visible .il-nat-cell-img` (0,3,0)
      qui sopra, che porta la foto a opacità 1. Con tre classi non basterebbe
      l'ordine: le due regole hanno lo stesso peso solo in apparenza. */
.il-nat-cell.is-esaurito .il-nat-cell-num { text-decoration: line-through; }
.il-nat-cell.is-esaurito.is-visible .il-nat-cell-img { opacity: 0.4; }

.il-nat-cal-foot { max-width: 1100px; margin: 1.6rem auto 0; text-align: center; }
.il-nat-cal-nota {
  max-width: 680px;
  margin: 0 auto;
  font-size: 0.78rem;
  line-height: 1.7;
  color: rgba(236, 230, 224, 0.62);
}
/* «Disponibilità aggiornata al …»: se la data non è ancora stata scritta, la
   riga sparisce invece di finire con un «al» appeso. Vedi CORREZIONI AL §2. */
.il-nat-cal-agg-riga {
  max-width: 680px;
  margin: 0.5rem auto 0;
  font-size: 0.74rem;
  color: rgba(236, 230, 224, 0.5);
}
.il-nat-cal-agg-riga:has(.il-nat-cal-agg:empty) { display: none; }

@media (max-width: 900px) {
  /* Quattro colonne: sette resistono fino a ~820px (cella 102px, «MERCOLEDÌ» a
     0,56rem misura ~73px e ci sta), ma sotto quella misura il giorno finisce in
     puntini. Quattro colonne rompono l'incolonnamento sabato/domenica — che a
     questa larghezza non si leggeva più comunque — e lasciano l'ultima riga con
     due caselle su quattro: sul pannello uniforme non si vede nessun buco,
     perché le caselle sono l'unica cosa disegnata. */
  .il-nat-cal-grid { grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
}
@media (max-width: 600px) {
  /* DUE colonne e celle orizzontali. A sette colonne su 390px la cella sarebbe
     larga 42px: meno del numero che ci deve stare dentro. A quattro sarebbe
     78px e «Ultimi posti» non entrerebbe. Con due colonne la cella è ~171×114
     e la foto — che nel file è 3:2 — si vede intera invece che ritagliata a
     quadrato. Sette righe di due: la griglia resta una griglia, e dietro ogni
     casella resta una foto vera. */
  .il-nat-cal { padding: 0 1.2rem 3.5rem; }
  .il-nat-cal-grid { grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
  .il-nat-cell { aspect-ratio: 3 / 2; padding: 0.6rem 0.7rem; }
  .il-nat-cell-dow { font-size: 0.6rem; }
  .il-nat-cell.is-libero   .il-nat-cell-state,
  .il-nat-cell.is-pochi    .il-nat-cell-state,
  .il-nat-cell.is-esaurito .il-nat-cell-state { font-size: 0.58rem; }
  .il-nat-cal-scelta { flex-direction: column; align-items: stretch; }
  .il-nat-cal-scelta .il-cta-btn { justify-content: center; }
}

/* ── Il set: la card scavalca la foto ─────────────────────────────────────
   Dispositivo #5 della reference: foto grande, riquadro di testo sovrapposto e
   disallineato. La sovrapposizione esiste SOLO da 1001px in su; sotto si
   srotola in colonna con la card che risale di 2,5rem sulla foto.
   ⚠️ Sfondo pieno e limite di lettura nel PADDING (`max()`), non in un
      `max-width` con `margin: auto`: la sezione scorre sopra la fascia
      impilata della scarsità, e ai due lati di un blocco centrato si
      vedrebbe la fascia ferma sotto — è esattamente il difetto corretto su
      `.il-article` (servizio-gravidanza).
   ⚠️ La foto NON usa `.il-split-image`: quella classe è nel selettore PAINT di
      script.js:387 e riceverebbe il pannello crema che scorre via, che qui
      passerebbe SOTTO la card bianca e sembrerebbe un difetto. */
.il-nat-set {
  background: var(--il-cream);
  padding: clamp(3.5rem, 7vh, 6rem) max(1.5rem, calc((100% - 1240px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.il-nat-set-foto { margin: 0; }
.il-nat-set-foto img {
  width: 100%;
  height: auto;               /* ⚠️ vedi «La trappola width/height + aspect-ratio» */
  aspect-ratio: 4 / 5;        /* è il formato vero del file (1440×1800): non ritaglia */
  object-fit: cover;
  /* …tranne sugli schermi larghi, dove 4:5 su 818px di larghezza vorrebbe dire
     1022px di altezza, più di uno schermo intero per una sola foto. */
  max-height: 82vh;
}
.il-nat-set-card {
  background: var(--il-white);
  border: 1px solid var(--il-warm-lighter);
  padding: clamp(1.8rem, 3vw, 3rem);
  box-shadow: 0 18px 50px rgba(46, 38, 32, 0.10);
}
.il-nat-set-card .il-sec-heading { margin-bottom: 1rem; }
.il-nat-set-card .il-sec-text { margin: 0; max-width: none; text-align: left; }
@media (min-width: 1001px) {
  /* Foto e card nella STESSA cella: la card allineata a destra e centrata in
     verticale scavalca il bordo della foto di ~80px a 1440. */
  .il-nat-set-foto { grid-area: 1 / 1; width: 66%; }
  .il-nat-set-card {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: center;
    max-width: 470px;
    margin-right: clamp(0rem, 2vw, 2.5rem);
    /* Entrambi sono `.il-reveal`, quindi trasformati, quindi due contesti di
       impilamento: senza z-index vince l'ordine del DOM (che oggi è giusto),
       ma basta invertire due righe nel file per ritrovarsi la card sotto. */
    position: relative;
    z-index: 2;
  }
}
@media (max-width: 1000px) {
  .il-nat-set-card { margin: -2.5rem clamp(0rem, 3vw, 2.5rem) 0; }
}
@media (max-width: 600px) {
  .il-nat-set { padding: 3rem 1.2rem 3.5rem; }
  .il-nat-set-card { margin: -2rem 0.8rem 0; }
}

/* ── Come si prenota ──────────────────────────────────────────────────────
   Sfondo dichiarato: scorre sopra la fascia impilata della scarsità. */
.il-nat-steps {
  background: var(--il-warm-bg);
  padding: 0 1.5rem 4.5rem;
}
.il-nat-steps-grid {
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
}
.il-nat-step {
  --il-shift: 28px;
  padding-top: 1.3rem;
  border-top: 1px solid var(--il-warm-light);
}
.il-nat-step-n {
  margin-bottom: 0.5rem;
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 1;
  color: var(--il-warm-light);
}
.il-nat-step-t {
  margin-bottom: 0.5rem;
  font-family: var(--il-font-sans, 'Montserrat', sans-serif);
  font-size: 0.78rem;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--il-text-dark);
}
.il-nat-step-x {
  font-size: 0.92rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--il-text-light);
}
.il-nat-step-x a,
.il-nat-steps-foot a {
  color: var(--il-warm-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.il-nat-steps-foot {
  max-width: 1150px;
  margin: 2.4rem auto 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--il-text-light);
}
.il-nat-steps-foot a { font-weight: 500; }
@media (max-width: 900px) { .il-nat-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .il-nat-steps { padding: 0 1.2rem 3.5rem; }
  .il-nat-steps-grid { grid-template-columns: 1fr; }
}

/* ── Prezzo a scaglioni + countdown (landing di Natale) ────────────────────
   Tre riquadri — nome, prezzo, periodo — e sotto la riga del countdown, che
   crea script.js. Le classi di stato le mette script.js leggendo la data in
   `data-nat-fine`: `.is-passata` (scaduto), `.is-attiva` (in corso),
   `.is-futura` (ancora da venire).
   ⚠️ NESSUNA PAROLA SCRITTA QUI DENTRO (niente `content: 'IN CORSO'`): sarebbe
      testo fuori dall'editor e non tradotto, e questa fascia vive anche nella
      pagina inglese. Lo scaglione in corso si riconosce dal riquadro in
      evidenza, dai prezzi barrati di quelli passati e dal countdown sotto; ai
      lettori di schermo lo dice `aria-current`, che mette script.js.
   ⚠️ SENZA JAVASCRIPT nessuna riga è in evidenza, ed è giusto così: i tre
      prezzi e i tre periodi sono scritti in chiaro nel file, quindi la pagina
      resta completa e onesta anche ferma. */
.il-nat-scaglioni {
  max-width: 980px;
  margin: 0 auto 2.6rem;
}
.il-nat-scaglioni-t {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--il-warm-dark);
  margin: 0 0 1.2rem;
}
.il-nat-fasce {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, 1fr);
}
.il-nat-fascia {
  background: var(--il-white);
  border: 1px solid var(--il-warm-lighter);
  border-radius: 14px;
  padding: 1.15rem 1rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.il-nat-fascia-n {
  font-size: 0.64rem;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--il-warm-dark);
}
.il-nat-fascia-p {
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--il-text-dark);
  transition: font-size 0.3s ease, color 0.3s ease;
}
.il-nat-fascia-d {
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--il-text-light);
}
/* Lo scaglione passato si barra e si spegne, NON si nasconde: la scala che
   sale è la ragione per cui conviene prenotare adesso, e vederla è più
   convincente del solo prezzo di oggi. */
.il-nat-fascia.is-passata { opacity: 0.5; }
.il-nat-fascia.is-passata .il-nat-fascia-p { text-decoration: line-through; }
.il-nat-fascia.is-attiva {
  border-color: var(--il-warm-deep);
  /* Il filo dello scaglione in corso è spesso il doppio, ma con un `inset`
     invece di `border-width: 2px`: il bordo sposterebbe il testo di un pixel a
     ogni scatto di prezzo, e su tre riquadri affiancati si vede. */
  box-shadow: inset 0 0 0 2px var(--il-warm-deep), 0 10px 30px rgba(132, 109, 92, 0.18);
}
/* `--il-warm-deep` e non `--il-warm`: è lo stesso motivo del pulsante dei
   listini e della scala del passaparola — sul beige chiaro il warm normale non
   arriva al contrasto richiesto. */
.il-nat-fascia.is-attiva .il-nat-fascia-n { color: var(--il-warm-deep); }
.il-nat-fascia.is-attiva .il-nat-fascia-p {
  color: var(--il-warm-deep);
  font-size: 2.7rem;
}
.il-nat-conta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--il-text-light);
  text-align: center;
}
/* ⚠️ `display: flex` batte `[hidden]`, che è solo il `display: none` dell'UA:
   senza questa riga la riga svuotata (ultimo scaglione, quando il countdown non
   ha senso) resterebbe alta zero ma con il suo `margin-top`, cioè 24px di crema
   in fondo al blocco. */
.il-nat-conta[hidden] { display: none; }
.il-nat-conta strong {
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--il-warm-deep);
}
/* Quando lo scaglione in corso È il prezzo pieno, la barratura mostrerebbe due
   volte lo stesso numero: la classe la mette script.js. Sulla card della promo
   clienti non scatta mai — là il prezzo pieno resta barrato sempre, che è
   quello che la titolare ha chiesto. */
.il-price-amount.is-nobarra small { display: none; }

/* Su telefono i tre riquadri diventano tre righe: nome e periodo a sinistra,
   prezzo a destra. In colonna, tre riquadri centrati sarebbero 270px di
   altezza per tre numeri. */
@media (max-width: 700px) {
  .il-nat-fasce { grid-template-columns: 1fr; }
  .il-nat-fascia {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "nome prezzo" "data prezzo";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.2rem;
    padding: 0.9rem 1.1rem;
    text-align: left;
  }
  .il-nat-fascia-n { grid-area: nome; }
  .il-nat-fascia-d { grid-area: data; }
  .il-nat-fascia-p { grid-area: prezzo; font-size: 1.9rem; }
  .il-nat-fascia.is-attiva .il-nat-fascia-p { font-size: 2.3rem; }
  .il-nat-conta { margin-top: 1.2rem; }
  .il-nat-conta strong { font-size: 1.7rem; }
}

/* ── Prove numerate ───────────────────────────────────────────────────────
   ⚠️ SPECIFICITÀ: `.il-quote p` (styles.css:1565) è (0,1,1) e impone serif,
      corsivo, 1,2rem, margin-bottom 1,2rem e `flex: 1` a TUTTI i <p> della
      citazione — «Prova #1» compreso, che così diventerebbe una citazione
      corsiva stirata a tutta altezza. Serve il figlio diretto qualificato
      (0,2,0), e vanno rimesse a mano font-family, font-style e flex: non
      basta cambiare corpo e colore. */
.il-quote > .il-nat-prova-n {
  flex: 0 0 auto;
  margin-bottom: 0.8rem;
  font-family: var(--il-font-sans, 'Montserrat', sans-serif);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--il-warm-dark);
}

/* ── Idee regalo ──────────────────────────────────────────────────────────
   Riusa i FIGLI delle price card (nessuna regola nuova per loro) ma NON la
   classe `.il-prices` sulla sezione: `zone()` in script.js:1963 fa
   `closest('.il-prices')` PRIMA di guardare la classe di sezione, e i clic
   finirebbero nella stessa casella statistica del listino.
   Conseguenza: le regole legate a `.il-prices` (padding della sezione e
   `padding` mobile di styles.css:3114) NON si applicano e vanno riscritte qui;
   quelle legate a `.il-prices-head` / `.il-prices-inner` / `.il-price-card` sì,
   perché sono selettori di classe indipendenti. */
.il-nat-regalo {
  background: var(--il-cream);
  padding: 5rem 1.5rem;
}
.il-nat-regalo .il-prices-head { max-width: 780px; }   /* il testo qui è lungo */
/* Tre card invece di due: `repeat(auto-fit, minmax(320px, 1fr))` con
   `gap: 1.6rem` chiede 3×320 + 2×25,6 = 1011px, e i 980px di
   `.il-prices-inner` ne farebbero stare solo due. */
.il-nat-regalo .il-prices-inner { max-width: 1150px; }
@media (max-width: 600px) { .il-nat-regalo { padding: 3.5rem 1rem 3rem; } }

/* ── Riga di rassicurazioni sotto l'invito finale ─────────────────────────
   `.il-cta` è flex in colonna con `align-items: center` (styles.css:1731): il
   `margin: … auto` non centra niente qui, centra il `text-align`. */
.il-nat-reassure {
  max-width: 760px;
  margin: 1.6rem auto 0;
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  line-height: 2;
  color: var(--il-text-light);
  text-align: center;
}

/* ── Àncore interne e barra appiccicata ───────────────────────────────────
   «Guarda le date» porta a #calendario, e l'header è `position: sticky`
   (styles.css:97): senza questo, il titolo della sezione atterra sotto la
   barra. 84px = i 73px dell'header desktop (la misura è scritta in
   `.il-hero { height: calc(100vh - 73px) }`) più un filo d'aria; 72px sotto i
   900px, dove l'header è alto 65. */
.il-nat-hero, .il-nat-facts, .il-nat-incluso, .il-nat-fuori, .il-nat-scarsita,
.il-nat-cal, .il-nat-set, .il-nat-steps, .il-nat-listino, .il-nat-prove,
.il-nat-regalo, .il-nat-missione, .il-nat-finale { scroll-margin-top: 84px; }
@media (max-width: 900px) {
  .il-nat-hero, .il-nat-facts, .il-nat-incluso, .il-nat-fuori, .il-nat-scarsita,
  .il-nat-cal, .il-nat-set, .il-nat-steps, .il-nat-listino, .il-nat-prove,
  .il-nat-regalo, .il-nat-missione, .il-nat-finale { scroll-margin-top: 72px; }
}

/* ── Bersagli da toccare (telefono e tablet) ──────────────────────────────
   Stesso modello del blocco «BERSAGLI DA TOCCARE» (styles.css:2577): l'area
   sensibile cresce con un ::before invisibile alto 44px sovrapposto al link;
   testo, sottolineatura e spaziature restano identici al pixel, cambia solo
   dove il dito «prende».
   Cresce SOLO in altezza: allargando anche di lato, due link sulla stessa riga
   si toccherebbero. E serve aria fra le righe, o l'area da 44px invade la riga
   sopra e si apre il link sbagliato (è la ragione del `line-height: 2.6` del
   footer, styles.css:2611).
   I pulsanti non sono in elenco perché ci arrivano da soli: `.il-cta-btn` è
   alto ~47px (0,95rem × 2 + 0,8rem di testo) e `.il-nat-pill` ~59px. */
@media (max-width: 900px) {
  .il-nat-lista a,
  .il-nat-step-x a,
  .il-nat-steps-foot a { position: relative; }
  .il-nat-lista a::before,
  .il-nat-step-x a::before,
  .il-nat-steps-foot a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
  .il-nat-lista li  { line-height: 1.9; }
  .il-nat-step-x    { line-height: 1.9; }
  .il-nat-steps-foot { line-height: 2.4; }
}

/* ── Telefono: i pulsanti pieni, come già fa `.il-hero-ctas` a ≤600 ───────── */
@media (max-width: 600px) {
  .il-nat-hero { padding-left: 1.2rem; padding-right: 1.2rem; }
  .il-nat-fuori { padding: 0 1.2rem 3.5rem; }
  .il-nat-hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .il-nat-hero-ctas .il-cta-btn,
  .il-nat-fuori-cta .il-cta-btn { width: 100%; justify-content: center; }
  .il-cta-btn.il-nat-pill { padding-left: 1.2rem; }   /* centrato: niente asimmetria */
}
/* ═══════════ fine LANDING DI NATALE ═══════════ */

/* ── Barra minima delle landing (senza menu) ──────────────────────────────
   La costruisce script.js (`renderLandingHeader`) e porta anche la classe
   `il-nav`, per ereditare posizione appiccicata, velo sfocato, filo sotto e il
   «si toglie di mezzo scorrendo». Qui c'è solo ciò che cambia. */
.il-nav--landing { justify-content: space-between; }
@media (max-width: 900px) {
  /* ⚠️ La regola generale nasconde il pulsante sotto i 900px (styles.css:2022)
     perché lì lo contiene il menu a panino. Su una barra che il menu non ce l'ha
     resterebbe il solo logo: sparirebbe l'unico comando, proprio sul telefono,
     che è da dove arriva quasi tutto il traffico della landing. */
  /* Il logo è l'UNICA via di ritorno al sito da una landing senza menu, quindi
     è un comando a tutti gli effetti: sul telefono l'immagine è alta 34px e
     l'area da toccare deve arrivare a 44. Si allarga il link, non l'immagine —
     il marchio resta della stessa dimensione. */
  .il-nav--landing .il-nav-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .il-nav--landing .il-nav-cta {
    display: inline-flex;
    align-items: center;
    /* 44px pieni sotto il dito: le linee guida Apple/Google, le stesse per cui
       i link del footer hanno il ::before invisibile. Con la sola imbottitura
       il pulsante ne misurava 41. */
    min-height: 44px;
    padding: 0.6rem 1.1rem;
    font-size: 0.66rem;
    letter-spacing: 1.6px;
  }
}

/* Disponibilità scritta con una parola che il codice non conosce: si mostra,
   in tono neutro. Vedere comparire quello che si è scritto dice «ho letto, ma
   non ho capito quale stato intendi»; non mostrare nulla farebbe pensare a un
   guasto, e indovinare «Liberi» sarebbe un'urgenza inventata. */
.il-nat-cell.is-nota .il-nat-cell-state {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.54rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(236, 230, 224, 0.75);
}

/* ── Accessibilità: focus visibile da tastiera (coerente col brand warm) ──────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.il-service-card:focus-visible,
.il-gallery-item:focus-visible {
  outline: 2px solid var(--il-warm, #b8a699);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Sfull-bleed hero scuro: anello chiaro per contrasto. */
.il-hero :focus-visible { outline-color: #fff; }

/* ═══════════ PASSAPAROLA · LA SCALA DEGLI SCONTI ═══════════
   Dieci cuori che si riempiono di beige, uno per ogni persona presentata, con
   il cursore che li accende e la percentuale e i prezzi d'esempio che si
   muovono insieme. Vive solo in `passaparola.html`; il motore è in `script.js`
   (IIFE «SCALA DEGLI SCONTI»), che disegna anche i cuori. */

/* I due vantaggi, in grande. Sono le stesse card «Cosa è incluso» di tutto il
   sito: si ingrandiscono SOLO qui con una classe in più sulla griglia, perché
   toccare `.il-detail-item` cambierebbe una dozzina di pagine.
   ⚠️ Il selettore ripete `.il-details-grid`: da sola `.il-scala-duo` avrebbe la
   stessa specificità e vincerebbe solo per ordine nel file. */
.il-details-grid.il-scala-duo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  gap: 1.6rem;
}
/* `align-content: start` e non lo stiramento di default: le due card sono
   alte uguali (le stira la griglia), ma i loro testi hanno lunghezze diverse e
   lo spazio in più veniva spalmato FRA le righe — così l'icona e il «5%» della
   seconda card scendevano di dieci pixel rispetto al «10%» della prima. Ora
   l'aria avanzata resta tutta in fondo e i due numeri sono sulla stessa riga. */
.il-scala-duo .il-detail-item { padding: 3rem 2.6rem 2.8rem; align-content: start; }
.il-scala-duo .il-detail-icon { width: 64px; height: 64px; }
.il-scala-duo .il-detail-icon i { width: 32px; height: 32px; }
.il-scala-duo .il-detail-label { font-size: 0.95rem; letter-spacing: 3px; }
.il-scala-duo .il-detail-value {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.1;
  margin-top: 1.4rem;
  margin-bottom: 0.7rem;
}
.il-scala-duo .il-detail-note { font-size: 0.95rem; line-height: 1.8; }

.il-scala-sec {
  padding: 5.5rem 1.5rem;
  background: var(--il-warm-bg);
  text-align: center;
}
/* Fascia piena da bordo a bordo, colonna di lettura stretta: è l'invariante
   delle sezioni che scorrono sopra una fascia impilata. */
.il-scala-sec > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.il-scala-sec > .il-scala-esempi,
.il-scala-sec > .il-scala-tappe { max-width: 900px; }
.il-scala-lede {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--il-text-light);
  font-weight: 300;
  max-width: 620px;
  margin: 1.6rem auto 0;
}
.il-scala-lede strong { color: var(--il-text-dark); font-weight: 500; }

/* ── I cuori ───────────────────────────────────────────────────────────────
   Vuoti sono un contorno appena accennato; pieni sono beige. Il colore lo
   porta `fill`/`stroke` e non `color`, così un cuore pieno resta pieno anche
   se un giorno la fascia cambia sfondo. */
.il-scala-cuori {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 1.1vw, 12px);
  margin-top: 3rem;
}
.il-scala-cuore {
  width: clamp(26px, 4.6vw, 46px);
  height: auto;
  /* Si possono stringere: dieci cuori da 26px più i vuoti fra loro sfondano uno
     schermo da 320px, e una fila di cuori che va a capo non è più una fila.
     Con `flex: 0 1 auto` rimpiccioliscono quel tanto che basta e restano dieci. */
  flex: 0 1 auto;
  cursor: pointer;
  fill: none;
  stroke: var(--il-warm-light);
  stroke-width: 1.5;
  transition: fill 0.45s var(--il-ease-soft), stroke 0.45s var(--il-ease-soft),
              transform 0.45s var(--il-ease-entrata), filter 0.45s ease;
}
.il-scala-cuore.is-on {
  fill: var(--il-warm);
  stroke: var(--il-warm-dark);
  transform: translateY(-5px);
  filter: drop-shadow(0 6px 12px rgba(184, 166, 153, 0.45));
}
/* Nessuna fila di cuori nasce tutta uguale: qualche cuore sta un filo più
   grande o più piccolo, come le card di un mazzo battuto a mano. */
.il-scala-cuore:nth-child(3n) { transform: scale(0.88); }
.il-scala-cuore:nth-child(3n).is-on { transform: scale(0.88) translateY(-5px); }
.il-scala-cuore:nth-child(4n) { transform: scale(1.09); }
.il-scala-cuore:nth-child(4n).is-on { transform: scale(1.09) translateY(-5px); }

/* ── Il cursore ──────────────────────────────────────────────────────────── */
.il-scala-slider { margin: 1.8rem auto 0; max-width: 520px; }
/* `--fill` la scrive il JavaScript: è la parte di strada già fatta. */
.il-scala-range {
  --fill: 22%;
  width: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.il-scala-range:focus { outline: none; }
.il-scala-range:focus-visible {
  outline: 2px solid var(--il-warm-dark);
  outline-offset: 8px;
}
.il-scala-range::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, var(--il-warm) 0 var(--fill), var(--il-warm-lighter) var(--fill) 100%);
}
.il-scala-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--il-warm);
  border: 3px solid var(--il-warm-bg);
  box-shadow: 0 0 0 1px var(--il-warm-dark), 0 6px 16px rgba(132, 109, 92, 0.28);
}
.il-scala-range::-moz-range-track {
  height: 4px;
  background: linear-gradient(90deg, var(--il-warm) 0 var(--fill), var(--il-warm-lighter) var(--fill) 100%);
}
.il-scala-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--il-warm);
  border: 3px solid var(--il-warm-bg);
  box-shadow: 0 0 0 1px var(--il-warm-dark), 0 6px 16px rgba(132, 109, 92, 0.28);
}
.il-scala-scala {
  display: flex;
  justify-content: space-between;
  margin-top: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--il-text-light);
}

/* ── Il numero ───────────────────────────────────────────────────────────── */
.il-scala-readout { margin-top: 2.6rem; }
.il-scala-persone {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--il-warm);
  font-weight: 500;
}
/* Beige scuro e non `--il-warm`: il beige chiaro sul fondo caldo sta a 1,9:1 e
   un numero di questa taglia sarebbe comunque il primo posto dove l'occhio
   cade. Qui siamo a 4,4:1. */
.il-scala-pct {
  display: block;
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-weight: 400;
  font-size: clamp(4.5rem, 12vw, 8rem);
  line-height: 1;
  color: var(--il-warm-deep);
}
.il-scala-sotto {
  display: block;
  font-size: 1rem;
  color: var(--il-text);
  font-weight: 300;
  margin-top: 0.2rem;
}

/* ── I tre esempi ────────────────────────────────────────────────────────── */
.il-scala-esempi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 3rem;
}
.il-scala-ex {
  background: var(--il-white);
  border: 1px solid var(--il-warm-lighter);
  padding: 2.2rem 1.9rem;
  text-align: left;
}
.il-scala-ex-nome {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  color: var(--il-text-dark);
  line-height: 1.2;
  margin-bottom: 1.6rem;
}
.il-scala-ex-old {
  font-size: 0.88rem;
  color: var(--il-text-light);
  text-decoration: line-through;
  margin-bottom: 0.25rem;
}
.il-scala-ex-new {
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--il-text-dark);
  line-height: 1.2;
}

/* ── Le tappe, la stessa scala scritta a parole ──────────────────────────── */
.il-scala-tappe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.8rem;
}
.il-scala-tappa {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.75rem 1.2rem;
  background: var(--il-white);
  border: 1px solid var(--il-warm-lighter);
  font-size: 0.88rem;
  color: var(--il-text-light);
}
.il-scala-tappa strong { color: var(--il-warm-deep); font-weight: 600; font-size: 1rem; }
/* Beige scuro e non `--il-warm`: bianco su beige chiaro fa 2,35:1, illeggibile.
   Su `--il-warm-deep` sono 4,9:1 — la stessa scelta del pulsante dei listini. */
.il-scala-tappa.is-top {
  background: var(--il-warm-deep);
  border-color: var(--il-warm-deep);
  color: var(--il-white);
}
.il-scala-tappa.is-top strong { color: var(--il-white); }

.il-scala-frase {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.4;
  color: var(--il-text-dark);
  margin-top: 2.8rem;
}

@media (max-width: 900px) {
  .il-details-grid.il-scala-duo { grid-template-columns: 1fr; }
  .il-scala-duo .il-detail-item { padding: 2.4rem 2rem; }
}
@media (max-width: 700px) {
  .il-scala-sec { padding: 4rem 1.2rem; }
  /* Tre card da 110px con dentro «da 203€» non ci stanno: una per riga. */
  .il-scala-esempi { grid-template-columns: 1fr; }
  .il-scala-ex { padding: 1.6rem 1.5rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .il-scala-ex-nome { margin-bottom: 0; font-size: 1.35rem; }
  .il-scala-ex-old { margin-bottom: 0; margin-left: auto; }
  .il-scala-ex-new { font-size: 1.5rem; }
  .il-scala-tappa { font-size: 0.82rem; padding: 0.7rem 1rem; }
}

/* ── Rispetto di prefers-reduced-motion: niente animazioni/transizioni forti ──── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .il-reveal { opacity: 1 !important; transform: none !important; }
  .il-stagger > *, .il-hero-content > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .il-paint { opacity: 1 !important; transform: none !important; }
  .il-paint::after { display: none !important; }
  .il-deck > .il-detail-item { opacity: 1 !important; transform: none !important; }
  .il-lines .il-w { opacity: 1 !important; transform: none !important; }
  .il-marquee-col { animation: none !important; }
  .il-nav { transition: none !important; }
  .il-paint img { transform: none !important; }
  .il-wa-float, .il-wa-float * { animation: none !important; }
  /* Il faretto della hero È movimento: qui non deve esistere proprio. */
  .il-hero-spot { display: none !important; }
  /* La scala degli sconti resta leggibile e usabile: si spegne solo il
     riempimento a uno a uno (lo fa `script.js`) e lo scatto dei cuori. */
  .il-scala-cuore { transition: none !important; }
  /* Landing di Natale. Il blocco generale forza visibili `.il-reveal`,
     `.il-stagger` e `.il-paint`, ma non conosce né la porticina del calendario
     né il tratto a pennarello: senza queste righe chi ha «riduci movimento»
     vedrebbe quattordici caselle chiuse e un titolo senza sottolineatura.
     (Le durate sono già azzerate dalla regola `*` in cima al blocco: qui conta
     solo il valore FINALE.) */
  /* ⚠️ `transition: none` e non solo i valori finali: il blocco generale azzera
     la DURATA (`transition-duration: .001ms`) ma non il RITARDO, e queste
     transizioni ne hanno uno di 380ms (più il ritardo di riga). Basta un
     ricalcolo di stile a metà vita della pagina perché la casella resti al
     valore vecchio per quel tempo. Misurato: con il solo valore finale forzato
     la foto restava a opacità 0; azzerando la transizione, 1 subito. */
  .il-nat-cell,
  .il-nat-cell::before,
  .il-nat-cell::after,
  .il-nat-cell-img { transition: none !important; }
  .il-nat-cell::after { transform: translateY(-101%) !important; }
  .il-nat-cell::before { opacity: 1 !important; }
  .il-nat-cell-img { opacity: 1 !important; transform: none !important; }
  .il-nat-cell.is-esaurito .il-nat-cell-img { opacity: 0.4 !important; }
  .il-nat-mark { background-size: 100% 0.30em !important; }
  /* La barra scorrevole non scorre: resta la frase, una volta sola, centrata e
     libera di andare a capo. Le copie le fa script.js con aria-hidden e il JS
     non sa nulla di questa preferenza: si nascondono da qui. */
  .il-nat-ticker-fila { animation: none !important; width: 100%; justify-content: center; }
  .il-nat-ticker-fila > [aria-hidden="true"] { display: none; }
  .il-nat-ticker-it { white-space: normal; text-align: center; padding-right: 0; }
}

/* ── Lightbox galleria (overlay a tema per il portfolio) ──────────────────────── */
.il-lightbox {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center;
  background: rgba(28, 22, 18, 0.92); padding: 4vh 4vw;
  animation: il-lb-fade 0.2s ease;
}
@keyframes il-lb-fade { from { opacity: 0; } to { opacity: 1; } }
.il-lightbox.is-open { display: flex; }
.il-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; max-width: 92vw; }
.il-lb-img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 3px; box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5); }
.il-lb-cap { color: #f3ece4; font-family: var(--il-font-sans, 'Montserrat', sans-serif); font-size: 0.85rem; letter-spacing: 0.02em; text-align: center; max-width: 60ch; }
.il-lb-close, .il-lb-prev, .il-lb-next {
  position: absolute; background: rgba(255, 255, 255, 0.12); color: #fff; border: 0; cursor: pointer;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background 0.15s ease;
}
.il-lb-close { top: 18px; right: 22px; width: 44px; height: 44px; font-size: 1.9rem; }
.il-lb-prev, .il-lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; }
.il-lb-prev { left: 2vw; }
.il-lb-next { right: 2vw; }
.il-lb-close:hover, .il-lb-prev:hover, .il-lb-next:hover { background: rgba(255, 255, 255, 0.26); }
.il-lb-close:focus-visible, .il-lb-prev:focus-visible, .il-lb-next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  .il-lb-prev, .il-lb-next { width: 42px; height: 42px; font-size: 1.6rem; }
  .il-lb-img { max-height: 78vh; }
}



/* ═══ DOVE SIAMO — scheda indirizzo + mappa OpenStreetMap ═══════════════════
   Sostituisce l'embed di Google Maps che stava su contatti.html: OSM non
   imposta cookie di profilazione, quindi il sito resta senza banner consensi
   (stessa ragione per cui il video dell'atelier usa youtube-nocookie).
   ⚠️ Il PIN è nostro, non di OSM: l'embed disegna solo il marker blu di serie,
   che non si può colorare. Qui il marker non viene chiesto e si sovrappone un
   SVG beige al CENTRO GEOMETRICO della cornice — per questo il `bbox` dell'URL
   deve restare SIMMETRICO attorno alle coordinate dell'atelier: se lo sposti
   di lato, il pin indica il posto sbagliato senza che nulla segnali l'errore. */
.il-mappa { padding: 5rem 1.5rem; background: var(--il-cream); }
.il-mappa-box {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  background: var(--il-warm-bg);
  border: 1px solid var(--il-warm-lighter);
  /* Unico blocco del sito con gli angoli tondi (il resto è a spigolo vivo):
     richiesta esplicita, sul modello della scheda di riferimento. L'`overflow`
     serve a ritagliare la mappa dentro il raggio — senza, l'iframe uscirebbe
     dagli angoli lasciando quattro spigoli quadrati. */
  border-radius: 20px;
  overflow: hidden;
}
.il-mappa-info {
  padding: 3.2rem 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.il-mappa-via {
  font-family: var(--il-font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--il-text-dark);
  margin: 0.5rem 0 0.35rem;
}
.il-mappa-citta {
  font-size: 0.95rem;
  color: var(--il-text-light);
  margin: 0 0 1.4rem;
}
.il-mappa-nota {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--il-text);
  margin: 0 0 2rem;
  max-width: 34ch;
}
/* Comando principale della scheda: nasce col beige scuro accessibile (4.9:1)
   invece del beige generale a 2.35:1 — è un pulsante nuovo, non c'era motivo
   di introdurlo già sotto soglia. Scurisce al hover come tutti gli altri. */
.il-mappa-info .il-cta-btn {
  border-radius: 30px;
  background: var(--il-warm-deep);
  border-color: var(--il-warm-deep);
}
.il-mappa-info .il-cta-btn:hover {
  background: var(--il-text-dark);
  border-color: var(--il-text-dark);
}

/* ⚠️ Il ritaglio della mappa si fa con `clip-path`, NON con overflow o
   border-radius: un <iframe> è composto su un livello suo e il browser lo
   ignora in entrambi i casi — la card usciva tonda a sinistra e quadrata sui due
   angoli della mappa. `clip-path` agisce in fase di DISEGNO e vale anche per
   l'iframe. I 19px stanno dentro il bordo da 1px della card (20-1). */
.il-mappa-media {
  position: relative;
  min-height: 340px;
  clip-path: inset(0 round 0 19px 19px 0);
}
.il-mappa-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Le tessere di OSM sono verdi/azzurre: questo filtro le porta sul warm del
     sito. Volutamente LEGGERO — l'attribuzione «© OpenStreetMap» dentro la
     cornice è obbligatoria (licenza ODbL) e deve restare leggibile. */
  filter: sepia(0.32) saturate(0.72) hue-rotate(-8deg) brightness(1.04) contrast(0.95);
  /* ⚠️ Il raggio va messo QUI, sull'iframe, non basta l'`overflow: hidden` della
     card: un <iframe> viene composto su un livello suo e il browser NON lo
     ritaglia con il raggio del contenitore — la card risultava tonda a sinistra
     e quadrata sui due angoli della mappa. 19px e non 20 per incastrarsi dentro
     il bordo da 1px della card. */
  border-radius: 0 19px 19px 0;
}
/* La punta della goccia cade esattamente sul centro della cornice. */
.il-mappa-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  pointer-events: none;
  line-height: 0;
  filter: drop-shadow(0 4px 8px rgba(46, 38, 32, 0.35));
}
.il-mappa-pin svg { width: 34px; height: 46px; display: block; }

@media (max-width: 900px) {
  .il-mappa { padding: 3.2rem 1.2rem; }
  .il-mappa-box { grid-template-columns: 1fr; border-radius: 16px; }
  .il-mappa-info { padding: 2.3rem 1.6rem; }
  .il-mappa-info .il-cta-btn { width: 100%; justify-content: center; }
  .il-mappa-media { min-height: 0; height: 300px; order: -1; }
  .il-mappa-media { clip-path: inset(0 round 15px 15px 0 0); }
  .il-mappa-frame { border-radius: 15px 15px 0 0; }
}


/* ═══ servizi.html — claim fra «il valore della fotografia» e il listino ═════
   Stessa tipografia del manifesto di chi-sono (serif corsivo, centrato), ma su
   fondo CREMA: il listino subito sotto è `--il-warm-bg`, e ripetendo lo stesso
   fondo qui le due fasce diventerebbero un blocco unico con un filo di
   separazione nel mezzo. Il padding in alto è corto perché l'articolo che
   precede chiude già con la sua imbottitura. */
.il-servizi-claim {
  background: var(--il-cream);
  padding: 0.5rem max(1.5rem, calc((100% - 820px) / 2)) 5.5rem;
  text-align: center;
}
.il-servizi-claim-testo {
  font-family: var(--il-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.42;
  color: var(--il-text-dark);
  margin: 0;
}
/* Le due parole in evidenza restano nel tono del sito: warm scuro e tondo
   dentro la riga corsiva, senza grassetti pesanti. */
.il-servizi-claim-testo strong {
  font-weight: 500;
  font-style: normal;
  color: var(--il-warm-dark);
}
@media (max-width: 600px) {
  .il-servizi-claim { padding-bottom: 3.5rem; }
}

/* ═══════════ FOTO MANCANTI — spariscono, non diventano un segnaposto ═══════
   Richiesta della titolare (4 set 2026): «quando manca il file, invece
   dell'icona di immagine rotta vorrei che quello spazio restasse semplicemente
   invisibile — nessuna icona di errore, nessun bordo strano — finché non carico
   io la foto dall'editor».
   Prima una foto mancante non mostrava l'icona rotta (quella era già coperta)
   ma il suo RIQUADRO: bordo sottile, trama a rombi e la scritta «Foto in
   arrivo». Era voluto quando i segnaposto erano un promemoria di lavoro; ora
   che il sito è pubblico è un buco visibile. Da qui in avanti sparisce tutto.

   Chi mette la classe `.il-img-missing` sono DUE cose, e servono entrambe:
     · l'attributo `onerror` scritto sui 12 <img> segnaposto — vale anche prima
       che script.js sia stato eseguito e anche con JavaScript a metà;
     · la rete di sicurezza «FOTO MANCANTI» in script.js, che la mette su
       QUALUNQUE immagine del sito che non si carichi, anche su quelle dove
       nessuno si è ricordato di scrivere `onerror`.
   ⚠️ La classe NON si scrive mai a mano nell'HTML: se lo si facesse, la foto
   caricata dal pannello resterebbe invisibile per sempre. Appena il file
   esiste l'errore non scatta più e il riquadro si riempie da sé.
   ⚠️ Nascondere l'<img> non basta: il riquadro che la contiene ha misure sue
   (`.il-fotina` è 4:5, `.il-closing-media` ha bordo e trama), quindi resterebbe
   una cornice vuota. Per questo sparisce il CONTENITORE.
   ⚠️ Una sezione rimasta senza NIENTE da mostrare la toglie script.js: il CSS
   può nascondere un riquadro, non sa dire se una fascia è rimasta vuota.
   Per rimettere il vecchio segnaposto «Foto in arrivo» basta cancellare questo
   blocco: le regole del riquadro (`::after` con la trama) sono ancora al loro
   posto più su, servono solo di nuovo un `opacity: 1`. */
.il-landing img.il-img-missing { display: none !important; }
:is(.il-fotina, .il-product-img, .il-closing-media, .il-split-image, .il-gallery-item):has(> img.il-img-missing) {
  display: none !important;
}