/* ============================================================
   AESTHETICS 23 — stile condiviso (redesign editoriale 2026-08-07)
   Tutti i valori referenziano i token (tokens.css).
   ============================================================ */

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

html { scroll-behavior: smooth; }

/* Scala del disegno sui monitor larghi: sopra 1600px la dimensione base cresce in modo fluido
   fino a ~+25% a 2560px, così testi e immagini (tetti in rem: titoli, immagine 42rem, contenuto 72rem,
   spazi) riempiono lo schermo largo. Laptop (<1600px) e mobile restano invariati. */
@media (min-width: 1600px) {
  html { font-size: clamp(100%, calc(100% + (100vw - 1600px) / 240), 125%); }
}

body {
  margin: 0;
  background: var(--fondo-pagina);
  color: var(--testo);
  font-family: var(--font-corpo);
  font-size: var(--testo-base);
  font-weight: var(--peso-corpo);
  line-height: var(--interlinea-corpo);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-titoli);
  font-weight: var(--peso-titoli);
  line-height: var(--interlinea-titoli);
  color: var(--titoli);
  margin: 0 0 var(--spazio-md);
}
h1 { font-size: var(--testo-hero); }
h2 { font-size: var(--testo-xl); }
h3 { font-size: var(--testo-lg); }

p { margin: 0 0 var(--spazio-sm); max-width: var(--larghezza-testo); }

a { color: var(--titoli); text-decoration-color: var(--accento); transition: color var(--transizione); }
a:hover { color: var(--verde-2); }

/* ---- Struttura ---- */
.contenitore {
  max-width: var(--larghezza-contenuto);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.sezione { padding-block: var(--spazio-xl); }
.sezione--sotto-nav { padding-top: calc(var(--spazio-xl) + 4.5rem); } /* pagine senza hero: stacca il primo blocco dall'header fisso */
.sezione--sabbia { background: var(--fondo-sezione); }
.sezione--alt { background: var(--fondo-alt); }
.sezione--firma { background: var(--fondo-firma); color: var(--testo-su-firma); }
.sezione--firma h1, .sezione--firma h2, .sezione--firma h3 { color: var(--testo-su-firma); }
.sezione--luce { background: var(--sfumatura-luce); }
.sezione--sfumata { background: var(--sfumatura-sabbia); }
.sezione--alba { background: var(--sfumatura-alba); }
.sezione--firma-sfumata { background: var(--sfumatura-firma); color: var(--testo-su-firma); }
.sezione--firma-sfumata h1, .sezione--firma-sfumata h2, .sezione--firma-sfumata h3 { color: var(--testo-su-firma); }

/* ---- Occhiello ---- */
.occhiello {
  display: block;
  font-family: var(--font-occhielli);
  font-size: var(--testo-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--spaziatura-occhiello);
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: var(--spazio-sm);
}

/* ---- Bottoni ---- */
.bottone {
  display: inline-block;
  background: var(--cta-fondo);
  color: var(--cta-testo);
  font-family: var(--font-corpo);
  font-size: var(--testo-sm);
  font-weight: var(--peso-forte);
  letter-spacing: 0.04em;
  padding: 0.95em 2.2em;
  border: none;
  border-radius: var(--radius-lg);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transizione), transform var(--transizione), color var(--transizione);
}
.bottone:hover { background: var(--cta-fondo-hover); color: var(--cta-testo); transform: translateY(-1px); }

.bottone--contorno { background: transparent; color: var(--titoli); border: 1px solid var(--titoli); }
.bottone--contorno:hover { background: var(--titoli); color: var(--cta-testo); }

.bottone--crema { background: var(--crema); color: var(--verde); }
.bottone--crema:hover { background: var(--bianco-caldo); color: var(--verde-2); }

.bottone--vetro {
  background: color-mix(in srgb, var(--bianco-caldo) 22%, transparent);
  color: var(--bianco-caldo);
  border: 1px solid color-mix(in srgb, var(--bianco-caldo) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bottone--vetro:hover { background: var(--bianco-caldo); color: var(--verde); }

/* ---- Card ---- */
.card {
  background: var(--bianco-caldo);
  border-radius: var(--radius-md);
  box-shadow: var(--ombra-card);
  padding: var(--spazio-md);
}

/* ---- Filetti ---- */
.filetto { width: 56px; border: 0; border-top: var(--filetto-oro); margin: var(--spazio-md) 0; }
.filetto--sfumato { width: 160px; height: 1px; border: 0; background: var(--sfumatura-oro); margin: var(--spazio-md) auto; }

/* ---- Simboli mondo occhi ---- */
.icona {
  width: var(--icona-dimensione);
  height: var(--icona-dimensione);
  stroke: var(--icona-colore);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icona--oro { stroke: var(--icona-colore-accento); }
.icona--su-firma { stroke: var(--crema); }

/* ---- Monogramma KK (forme piene, viewBox 1026×552) ---- */
.monogramma { width: 170px; height: 91px; fill: var(--accento); stroke: none; opacity: 0.9; }
.monogramma--verde { fill: var(--titoli); }
.monogramma--su-firma { fill: var(--crema); }
.monogramma--filigrana { position: absolute; width: 420px; height: 226px; opacity: 0.08; pointer-events: none; }

/* ============================================================
   HEADER + NAV
   ============================================================ */
.intestazione {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
  border-bottom: 1px solid transparent;
}
.intestazione--solida {
  background: color-mix(in srgb, var(--bianco-caldo) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--bordo);
  box-shadow: var(--ombra-morbida);
}
.intestazione__riga {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spazio-md); padding-block: 0.9rem;
}
.marchio { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.marchio__monogramma { width: 54px; height: 29px; fill: var(--titoli); transition: fill var(--transizione); }
.marchio__nome {
  font-family: var(--font-titoli); font-size: var(--testo-md);
  font-weight: var(--peso-forte); color: var(--titoli); letter-spacing: 0.06em;
  transition: color var(--transizione);
}
.nav__logo { display: none; } /* logo del drawer: solo nel menu mobile */
/* sopra la foto hero il marchio e i link diventano chiari —
   MAI dentro il popup mobile aperto (lì i colori li detta il pannello) */
.intestazione--su-foto:not(.intestazione--solida) .marchio__monogramma { fill: var(--crema); }
.intestazione--su-foto:not(.intestazione--solida) .marchio__nome { color: var(--bianco-caldo); }
.intestazione--su-foto:not(.intestazione--solida) .nav:not(.nav--aperta) .nav__collegamento,
.intestazione--su-foto:not(.intestazione--solida) .nav:not(.nav--aperta) .nav__lingua { color: var(--bianco-caldo); }
.intestazione--su-foto:not(.intestazione--solida) .nav:not(.nav--aperta) .nav__apri { color: var(--bianco-caldo); }

.nav { display: flex; align-items: center; gap: var(--spazio-md); }
.nav__pannello { display: contents; }
.nav__lista { display: flex; align-items: center; gap: var(--spazio-md); list-style: none; margin: 0; padding: 0; }
/* bottone Prenota dell'header: pillola snella (meno "ciccione"), su tutto il sito */
.nav__lista .bottone { padding: 0.5em 1.35em; font-size: var(--testo-xs); border-radius: 999px; }
.nav__voce { position: relative; }
.nav__icona { display: none; } /* icone voci menu: solo nel drawer mobile (attivate sotto) */
.nav__collegamento {
  font-size: var(--testo-sm); font-weight: var(--peso-forte);
  color: var(--testo); text-decoration: none; padding-block: 0.5rem;
  transition: color var(--transizione);
}
.nav__collegamento:hover { color: var(--accento); }
.nav__tendina {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 15rem; padding: 0.6rem; margin: 0; list-style: none;
  background: var(--bianco-caldo); border: 1px solid var(--bordo);
  border-radius: var(--radius-md); box-shadow: var(--ombra-morbida);
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity var(--transizione), translate var(--transizione), visibility var(--transizione);
}
.nav__voce:hover .nav__tendina, .nav__voce:focus-within .nav__tendina, .nav__voce.aperta .nav__tendina { opacity: 1; visibility: visible; translate: 0 0; }
.nav__collegamento--toggle { cursor: pointer; } /* voce "Servizi": non è un link, apre solo il sottomenu */
.nav__foto { display: none; } /* le foto delle voci vivono solo nel drawer mobile (vedi ≤720px) */
.nav__tendina a { display: block; padding: 0.55rem 0.9rem; border-radius: var(--radius-sm); font-size: var(--testo-sm); text-decoration: none; color: var(--testo); }
.nav__tendina a:hover { background: var(--fondo-sezione); color: var(--titoli); }
.nav__lingua { font-size: var(--testo-xs); letter-spacing: 0.1em; color: var(--accento); text-decoration: none; font-weight: var(--peso-forte); }
.nav__apri { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; color: var(--titoli); z-index: 75; }
.nav__apri svg { width: 1.8rem; height: 1.8rem; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.nav__apri .icona-chiudi { display: none; }

/* ============================================================
   HERO FULL-SCREEN (foto sotto layer di sfumatura)
   ============================================================ */
.eroe-foto {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: clamp(6rem, 12vh, 9rem) var(--spazio-xl);
  overflow: hidden; isolation: isolate;
}
.eroe-foto__immagine {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
}
/* hero home: immagine schiarita leggermente (la hero compatta delle pagine servizio resta invariata) */
.eroe-foto:not(.eroe-foto--compatta) .eroe-foto__immagine { filter: brightness(1.12); }
.eroe-foto::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--velo-hero);
}
.eroe-foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fade-a-sabbia), var(--velo-basso);
}
.eroe-foto__contenuto { max-width: 46rem; }
.eroe-foto .occhiello { color: var(--crema); }
.eroe-foto__titolo { color: var(--bianco-caldo); margin-bottom: var(--spazio-md); }
.eroe-foto__kicker {
  display: block; font-family: var(--font-corpo);
  font-size: var(--testo-sm); font-weight: var(--peso-forte);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: var(--spazio-sm); color: var(--crema);
}
.eroe-foto__display {
  display: block; font-size: var(--testo-display);
  font-weight: var(--peso-display); line-height: 1.05;
  letter-spacing: -0.01em;
}
.eroe-foto__sotto { color: var(--crema); font-size: var(--testo-md); max-width: 34rem; }
.eroe-foto__azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-sm); margin-top: var(--spazio-md); }
.trust { display: flex; flex-wrap: wrap; gap: var(--spazio-sm) var(--spazio-md); margin-top: var(--spazio-lg); padding: 0; list-style: none; }
.eroe-foto .trust li { color: var(--crema); }
.trust li { font-size: var(--testo-xs); letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.45rem; }
.trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accento); }

/* ============================================================
   HERO EDITORIALE (home) — full-bleed · titolo in blend sopra la foto · filigrana KK a tutta sezione
   ============================================================ */
.hero-ed {
  position: relative; background: var(--sabbia-chiaro); overflow: hidden; isolation: isolate;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(7rem, 13vh, 10.5rem) clamp(1.5rem, 5vw, 5rem) clamp(4rem, 8vh, 6.5rem);
  padding-right: calc(clamp(18rem, 42vw, 42rem) + clamp(0.5rem, 3vw, 3.5rem) + 3rem); /* riserva lo spazio dell'immagine → il testo non le va MAI sopra (l'immagine è posizionata dal bordo, non dal contenuto) */
  container-type: inline-size; /* abilita cqi: i titoli fluidi (es. --lungo) si dimensionano sulla larghezza della colonna testo */
}
/* filigrana: monogramma KK vettoriale che riempie l'intera sezione */
.hero-ed__filigrana {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  color: var(--verde); fill: var(--verde); opacity: 0.05; pointer-events: none;
}
/* occhiello sopra il titolo (il badge-pillola è stato tolto da tutte le hero, SMM 2026-08-13) */
.hero-ed__kicker {
  position: relative; z-index: 3; display: block;
  font-family: var(--font-corpo); font-size: var(--testo-sm); font-weight: var(--peso-forte);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accento); margin-bottom: var(--spazio-xs);
}
/* titolo gigante che scavalca la foto: mix-blend exclusion → si inverte sulla parte sopra l'immagine · staccato dal cluster sopra */
.hero-ed__titolo {
  position: relative; z-index: 2; mix-blend-mode: exclusion; color: #fff;
  font-family: var(--font-titoli); font-weight: var(--peso-display);
  font-size: clamp(3.4rem, 12.5vw, 11rem); line-height: 1.02; letter-spacing: -0.02em;
  margin: var(--spazio-lg) 0 0 -0.03em; max-width: 16ch; /* -0.03em: compensa la spalla ottica del serif, allinea col kicker */
}
/* interlinea 1.02 e non 0.9 (SMM 2026-08-13, pagina sopracciglia): in Fraunces la pancia di p/g
   scende a 0,245em sotto la linea di base e l'asta di b/d/l sale a 0,755em → due righe si toccano
   esattamente a 1,000em. Sotto quella soglia, ovunque una lettera con la coda capiti sopra una
   lettera alta, le due si sovrappongono (era il caso di "Sopracciglia a / Olbia"). 1.02 = contatto
   escluso con un filo d'aria, restando il più stretto possibile. */
.hero-ed__titolo--stretto { line-height: 0.9; } /* home: l'a capo è scritto a mano e nessuna coda finisce sopra un'asta → resta la misura compatta approvata */
/* titolo fluido per pagine con parole molto lunghe (es. "Dermopigmentazione"): si dimensiona sulla larghezza della colonna testo → riempie fin quasi alla foto senza toccarla. Specificità doppia per vincere anche sul mobile. */
.hero-ed__titolo.hero-ed__titolo--lungo { font-size: min(10.2cqi, 9.5rem); line-height: 0.95; }
/* intro in tondo, non più maiuscoletto (SMM 2026-08-13): tolto text-transform e la spaziatura
   lettere che serviva al maiuscolo; salito a testo-md perché in minuscolo il corpo piccolo
   reggeva male sotto il titolone */
.hero-ed__intro { position: relative; z-index: 3; max-width: 34rem; margin-top: var(--spazio-lg); font-size: var(--testo-md); line-height: 1.6; color: var(--testo); }
.hero-ed .trust { position: relative; z-index: 3; }
/* bottoni della hero editoriale (pagine interne): vivono su crema → primario verde pieno, secondario a contorno */
.hero-ed__azioni { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: var(--spazio-sm); margin-top: var(--spazio-lg); }
.hero-ed__azioni .bottone--crema { background: var(--verde); color: var(--crema); }
.hero-ed__azioni .bottone--crema:hover { background: var(--verde-2); color: var(--crema); }
.hero-ed__azioni .bottone--vetro { background: transparent; color: var(--titoli); border: 1px solid var(--titoli); }
.hero-ed__azioni .bottone--vetro:hover { background: var(--titoli); color: var(--crema); }
/* foto confinata tra header fisso e nastro (inset top/bottom = aria garantita) */
.hero-ed__media {
  position: absolute; z-index: 1;
  top: clamp(6.5rem, 12vh, 9rem); bottom: clamp(4rem, 8vh, 6rem);
  right: clamp(0.5rem, 3vw, 3.5rem); width: clamp(18rem, 42vw, 42rem);
}
.hero-ed__foto-grande { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--ombra-morbida); }
.hero-ed__foto-piccola {
  position: absolute; z-index: 2; left: -2.8rem; bottom: -2.2rem; width: 44%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-sm); border: 6px solid var(--sabbia-chiaro); box-shadow: var(--ombra-card);
}
/* scroll cue: centrato, con il bordo basso al livello della fine della foto piccola */
.hero-ed__scroll {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  bottom: calc(clamp(4rem, 8vh, 6rem) - 2.2rem);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.45rem;
  text-decoration: none; color: var(--verde);
  font-family: var(--font-corpo); font-size: var(--testo-xs); font-weight: var(--peso-forte);
  letter-spacing: 0.18em; text-transform: uppercase; transition: color var(--transizione);
}
.hero-ed__scroll svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: scroll-giu 1.8s ease-in-out infinite; }
.hero-ed__scroll:hover { color: var(--verde-2); }
@keyframes scroll-giu { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .hero-ed__scroll svg { animation: none; } }
/* la "seconda hero" (manifesto) è target dello scroll: compensa l'header fisso */
.manifesto { scroll-margin-top: 5.5rem; }
@media (max-width: 860px) {
  .hero-ed__scroll { display: none; }
  .hero-ed { min-height: 0; padding: 6.5rem 1.25rem var(--spazio-xl); }
  .hero-ed__titolo { font-size: clamp(3rem, 15vw, 5.5rem); max-width: none; margin: var(--spazio-sm) 0 0; }
  /* su mobile anche le pagine dal titolo lungo usano la misura standard (SMM 2026-08-13):
     la parola non ci sta su una riga, quindi va a capo con la sillabazione automatica
     (lang="it"/"en" sull'html) invece di rimpicciolire tutto il titolo. Su desktop resta
     la misura fluida su cqi, che riempie la colonna senza toccare la foto. */
  .hero-ed__titolo.hero-ed__titolo--lungo {
    font-size: clamp(3rem, 15vw, 5.5rem); line-height: 0.9;
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
  }
  .hero-ed__intro { max-width: none; margin-top: var(--spazio-md); }
  .hero-ed__media { position: relative; inset: auto; transform: none; aspect-ratio: 4 / 5; width: 100%; max-width: 22rem; margin-top: var(--spazio-lg); }
  .hero-ed__foto-piccola { left: auto; right: 0.5rem; bottom: -1.5rem; width: 38%; }
  /* home mobile: l'occhio dev'essere INTERO prima del primo scroll (SMM 2026-08-13), senza
     toccare ordine, corpo o posizione dei testi. Tre mosse:
     1. la sezione vale esattamente uno schermo (svh = altezza all'apertura, con la barra di
        Safari ancora estesa: è quello lo stato da rispettare);
     2. la foto prende lo spazio che avanza (flex) MANTENENDO il rapporto 4:5 → quando l'altezza
        è poca si stringe anche in larghezza, e la fascia dell'occhio si rimpicciolisce con lei:
        così ci sta sempre tutta (a larghezza fissa, invece, verrebbe tagliata);
     3. via il padding basso da sezione (era ~88px di vuoto sotto la foto): tutto spazio regalato
        all'immagine. Ancoraggio verticale al 50%: nella sorgente l'occhio con le ciglia occupa
        la fascia 33-66% dell'altezza, centro ~50% → resta al centro del riquadro a ogni misura. */
  .hero-ed--home { min-height: 100svh; padding-bottom: var(--spazio-md); }
  .hero-ed--home .hero-ed__media {
    flex: 1 1 auto; width: auto; max-width: 22rem; min-height: 8rem; margin-top: var(--spazio-sm);
    /* rapporto 2:1 e non 4:5 → la foto resta LARGA (piena, fino a 22rem) su tutti gli schermi
       normali e si stringe solo dove l'altezza scarseggia. Il limite matematico è 2,27: la
       fascia dell'occhio è alta 0,44 volte la larghezza del riquadro, quindi con rapporto ≤2,27
       ci sta sempre dentro qualunque sia l'altezza disponibile. 2:1 tiene il 12% di margine. */
    aspect-ratio: 2 / 1;
  }
  .hero-ed--home .hero-ed__foto-grande { object-position: center 50%; }
}

/* ============================================================
   MANIFESTO — seconda hero · colonna unica full-bleed · titolo gigante in blend sopra le foto (inversione leggera) · no corsivo (REG-009)
   ============================================================ */
.manifesto2 {
  position: relative; overflow: hidden; isolation: isolate; background: var(--sfumatura-luce);
  min-height: 88svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(5rem, 11vh, 8rem) clamp(1.5rem, 5vw, 5rem); scroll-margin-top: 5.5rem;
}
.manifesto2 .occhiello { position: relative; z-index: 2; }
/* foto: blocchi piccoli DIETRO al titolo (il testo le scavalca appena → inversione) */
.manifesto2__foto {
  position: absolute; z-index: 1; width: clamp(9rem, 13vw, 13rem); aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-sm); box-shadow: var(--ombra-card);
}
/* galleggiamento durante lo scroll (SMM 2026-08-13): js/main.js scrive solo --fluttua,
   la rotazione resta qui — così le due cose non si sovrascrivono a vicenda */
.manifesto2__foto { transform: translateY(var(--fluttua, 0)) rotate(var(--inclina, 0deg)); will-change: transform; }
.manifesto2__foto--a { top: 30%; right: 13%; --inclina: -5deg; }
.manifesto2__foto--b { top: 52%; right: 32%; }
.manifesto2__foto--c { top: 4%; right: 32%; --inclina: 4deg; } /* 3ª foto: in alto, allineata (in colonna) con foto--b, leggermente ruotata — NON sopra il testo */
/* titolo gigante full-bleed, una colonna, blend exclusion: si inverte dove scavalca le foto */
.manifesto2__titolo {
  position: relative; z-index: 2; mix-blend-mode: exclusion; color: #fff;
  font-family: var(--font-titoli); font-weight: var(--peso-display);
  font-size: clamp(2.6rem, 8vw, 7rem); line-height: 1.04; letter-spacing: -0.02em;
  margin: var(--spazio-md) 0 0; max-width: none;
}
.manifesto2__nota {
  position: relative; z-index: 2; max-width: 44rem; margin-top: clamp(2rem, 5vh, 3.5rem);
  font-size: var(--testo-md); line-height: 1.7; color: #fff; mix-blend-mode: exclusion; /* come il titolo: le lettere sopra la foto si invertono (fix leggibilità mobile) */
}
@media (max-width: 860px) {
  .manifesto2 { min-height: 0; padding: clamp(4rem, 9vh, 5.5rem) 1.25rem; }
  .manifesto2__titolo { font-size: clamp(2.2rem, 9vw, 3.4rem); }
  .manifesto2__foto { display: none; } /* niente immagini dietro il testo su mobile → paragrafo leggibile */
  .manifesto2__nota { margin-top: var(--spazio-lg); color: var(--testo); mix-blend-mode: normal; } /* testo normale, niente inversione (nessuna foto dietro) */
}

/* ============================================================
   BANDE SERVIZIO (home) — pannello chiaro su cornice scura · immagine grande che esce dall'alto · foto piccola che sborda a sinistra · bordo come la hero (reference)
   ============================================================ */
.sezione-bande { position: relative; background: var(--sabbia-medio); padding: clamp(2.5rem, 6vh, 4rem) clamp(1rem, 4vw, 2rem) var(--spazio-xl); } /* sfondo #E4D7BF (= sabbia-medio) a pagina piena */
/* boxed: cornice sabbia-medio contenuta nella larghezza-contenuto, centrata (sfondo pagina ai lati) */
.sezione-bande__box {
  max-width: var(--larghezza-contenuto); margin-inline: auto;
  background: var(--sabbia-medio); border-radius: var(--radius-lg);
  padding: clamp(6rem, 10vh, 8rem) clamp(3rem, 5vw, 4rem) clamp(3rem, 6vh, 5rem); /* top maggiore: compensa lo sbordo-alto dell'immagine → aria uniforme */
  display: flex; flex-direction: column; gap: clamp(6rem, 10vh, 8rem); /* gap ampio: compensa lo sbordo-alto della 2ª immagine, spazio uniforme tra le bande */
}
.banda-servizio {
  position: relative; overflow: visible; isolation: isolate; background: var(--bianco-caldo);
  height: clamp(36rem, 66vh, 46rem); display: flex; align-items: center; /* altezza FISSA uguale per entrambe → box immagine identici */
  /* ombra a destra e in basso su TUTTO il perimetro, foto sbordanti comprese (SMM 2026-08-13:
     "sembrano incollati allo sfondo"). Serve drop-shadow e non box-shadow: box-shadow segue il
     rettangolo del pannello e ignorerebbe le due foto che escono dai bordi; drop-shadow segue
     la sagoma davvero disegnata. Offset positivi = luce da sinistra-alto, coerente con il resto. */
  filter: drop-shadow(16px 18px 26px rgba(42, 38, 32, 0.16));
}
/* immagine grande: sborda SOLO in alto (bottom dentro il pannello), bordo chiaro come la hero · lato alternato (zigzag) */
.banda-servizio__grande {
  position: absolute; z-index: 2; right: clamp(1.5rem, 4vw, 3rem);
  top: -3rem; height: clamp(35rem, 64vh, 45rem); width: clamp(14rem, 30%, 28rem); /* altezza ESPLICITA (non da top/bottom) → box identico tra le due bande */
  object-fit: cover; border: 6px solid var(--sabbia-chiaro); border-radius: var(--radius-sm);
  box-shadow: var(--ombra-morbida);
}
.banda-servizio--invertito .banda-servizio__grande { right: auto; left: clamp(1.5rem, 4vw, 3rem); }
/* foto piccola: sborda dal bordo SINISTRO (destro se invertita), stesso bordo */
.banda-servizio__piccola {
  position: absolute; z-index: 3; left: clamp(-2.5rem, -3vw, -1.5rem); bottom: clamp(1.75rem, 5vh, 3rem);
  width: clamp(6.5rem, 9vw, 8.5rem); aspect-ratio: 4 / 5; object-fit: cover;
  border: 6px solid var(--sabbia-chiaro); border-radius: var(--radius-sm); box-shadow: var(--ombra-morbida);
}
.banda-servizio--invertito .banda-servizio__piccola { left: auto; right: clamp(-2.5rem, -3vw, -1.5rem); }
/* testo: staccato dalla foto piccola (spazio a sinistra; a destra se invertita); tutto allineato alla RIGA 1, la riga 2 sporge */
.banda-servizio__testo {
  position: relative; z-index: 4; width: min(44%, 25rem);
  margin-left: clamp(8rem, 11vw, 11rem); padding-block: clamp(2.5rem, 6vh, 4rem);
}
.banda-servizio--invertito .banda-servizio__testo { margin-left: auto; margin-right: clamp(8rem, 11vw, 11rem); }
.banda-servizio__titolo {
  font-family: var(--font-titoli); font-weight: var(--peso-display);
  font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1; letter-spacing: -0.01em;
  color: var(--verde); margin: var(--spazio-sm) 0 0;
}
.banda-servizio__titolo span { display: block; }
/* titolo con una parola molto lunga (es. "Semipermanente,", 15 caratteri): al corpo pieno
   sfora la colonna di testo e viene tagliato → misura ridotta solo su queste bande */
.banda-servizio__titolo--lungo { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.banda-servizio__t2 { color: var(--accento); margin-left: 0; } /* riga 2 allineata alla riga 1 (2 righe) · enfasi cromatica (REG-009) */
.banda-servizio__testo > p:not([class]) { margin-top: var(--spazio-sm); color: var(--testo); max-width: 30rem; }
/* tolto il lancio sotto il titolo (SMM 2026-08-13): il primo paragrafo prende il respiro
   che dava il lancio, così il titolone non resta incollato al testo */
.banda-servizio__titolo + p { margin-top: var(--spazio-md); }
.banda-servizio__prezzo { margin-top: var(--spazio-sm); font-weight: var(--peso-forte); color: var(--titoli); }
.banda-servizio__testo .bottone { margin-top: var(--spazio-md); }

@media (max-width: 820px) {
  /* bande più larghe su mobile (SMM 2026-08-13): i tre livelli di padding orizzontale (sezione +
     cornice + blocco di testo) sommavano ~55px per lato e lasciavano ~281px di riga utile, appena
     sotto la larghezza del bottone più lungo ("Scopri la laminazione ciglia", ~283px) → andava a
     capo. Ridotti SOLO i padding orizzontali: quelli verticali restano, l'aria sopra e sotto non cambia. */
  .sezione-bande { padding-inline: clamp(0.5rem, 2vw, 1.5rem); }
  .sezione-bande__box { padding: clamp(1.25rem, 5vw, 2rem) clamp(0.75rem, 3vw, 1.5rem); gap: clamp(2rem, 6vw, 3rem); border-radius: var(--radius-md); }
  .banda-servizio__testo .bottone { padding-inline: 1.8em; } /* margine in più senza toccare il corpo del testo */
  .banda-servizio { display: block; height: auto; min-height: 0; overflow: hidden; margin: 0; filter: drop-shadow(8px 10px 16px rgba(42, 38, 32, 0.14)); }
  .banda-servizio__grande,
  .banda-servizio--invertito .banda-servizio__grande { position: relative; inset: auto; top: auto; bottom: auto; left: auto; right: auto; width: 100%; height: clamp(15rem, 52vw, 22rem); border-width: 0; border-radius: 0; }
  .banda-servizio__piccola { display: none; }
  .banda-servizio__testo,
  .banda-servizio--invertito .banda-servizio__testo { width: auto; margin: 0; padding: clamp(2rem, 7vw, 2.75rem) clamp(1rem, 4vw, 1.75rem); }
  .banda-servizio__t2 { margin-left: 0; }
}

/* ============================================================
   PASSI — accordion di card espandibili (hover/click, una aperta) · numero fisso in alto, parola che ruota, testo rivelato
   ============================================================ */
.passi-accordion {
  display: flex; gap: clamp(0.4rem, 0.9vw, 0.7rem);
  height: clamp(24rem, 62vh, 33rem); margin-top: var(--spazio-lg);
}
.passo-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-md);
  flex: 1 1 0; min-width: 0; cursor: pointer; padding: 0; border: 0; background: none;
  text-align: left; color: var(--crema);
  transition: flex-grow 0.9s cubic-bezier(0.33, 1, 0.68, 1);
}
.passo-card.aperta { flex-grow: 4; }
.passo-card__foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.passo-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(30, 41, 34, 0.82) 0%, rgba(30, 41, 34, 0.4) 45%, rgba(30, 41, 34, 0.12) 100%); }
.passo-card__num {
  position: absolute; z-index: 2; top: clamp(1rem, 3vh, 1.75rem); left: clamp(1.1rem, 2.5vw, 1.75rem);
  font-family: var(--font-titoli); font-weight: var(--peso-display); font-size: clamp(1.9rem, 2.6vw, 2.8rem); line-height: 1;
}
.passo-card__parola {
  position: absolute; z-index: 2; left: clamp(1.1rem, 2.5vw, 1.75rem); top: 50%; /* centrata verticalmente (spazio uguale sopra/sotto, indipendente dalla lunghezza) */
  transform: translateY(-50%) rotate(-90deg); white-space: nowrap;
  font-family: var(--font-titoli); font-weight: var(--peso-display); font-size: clamp(1.5rem, 2.2vw, 2.2rem); line-height: 1;
  transition: transform 0.9s cubic-bezier(0.33, 1, 0.68, 1);
}
.passo-card.aperta .passo-card__parola { transform: translateY(-50%) rotate(0deg); }
.passo-card__desc {
  position: absolute; z-index: 2; left: clamp(1.1rem, 2.5vw, 1.75rem); right: clamp(1.1rem, 2.5vw, 1.75rem); bottom: clamp(1.4rem, 3vh, 2rem);
  max-width: 26rem; font-size: var(--testo-sm); line-height: 1.6;
  opacity: 0; transform: translateY(0.6rem); pointer-events: none;
  transition: opacity 0.7s ease 0.28s, transform 0.7s ease 0.28s;
}
.passo-card.aperta .passo-card__desc { opacity: 1; transform: translateY(0); }
@media (max-width: 820px) {
  .passi-accordion { flex-direction: column; height: auto; gap: 0.6rem; }
  .passo-card { flex: none; height: 5.5rem; transition: height 0.9s cubic-bezier(0.33, 1, 0.68, 1); }
  .passo-card.aperta { height: clamp(18rem, 62vw, 24rem); }
  .passo-card__parola { transform: rotate(0deg); transform-origin: center; bottom: auto; top: clamp(1.15rem, 4vw, 1.6rem); left: auto; right: clamp(1.1rem, 4vw, 1.6rem); }
  .passo-card.aperta .passo-card__parola { transform: rotate(0deg); bottom: auto; }
  .passo-card__desc { bottom: clamp(1.25rem, 4vw, 1.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .passo-card, .passo-card__parola, .passo-card__desc { transition-duration: 0.01ms; }
}

/* hero compatta per le pagine interne (stesso sistema di layer) */
.eroe-foto--compatta { min-height: 66svh; }
.eroe-foto--compatta .eroe-foto__display { font-size: var(--testo-hero); }

/* ============================================================
   DIAGRAMMI LASH (ventagli e mappature — linguaggio del mestiere)
   ============================================================ */
.diagramma {
  width: 100%; height: auto;
  stroke: var(--titoli); fill: none;
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Le tecniche (card preziose con medaglione) ---- */
.tecniche { display: grid; gap: var(--spazio-md); grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.tecnica {
  position: relative;
  background: var(--bianco-caldo);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombra-card);
  padding: var(--spazio-md) var(--spazio-md) var(--spazio-lg);
  transition: translate 300ms ease, box-shadow 300ms ease;
}
.tecnica:hover { translate: 0 -5px; box-shadow: var(--ombra-morbida); }
.tecnica__numero {
  display: block; font-family: var(--font-titoli); font-size: var(--testo-sm);
  letter-spacing: 0.14em; color: var(--accento); margin-bottom: var(--spazio-sm);
}
.tecnica__medaglione {
  background: var(--sfumatura-luce);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  padding: var(--spazio-md) var(--spazio-sm);
  margin-bottom: var(--spazio-md);
  position: relative;
}
.tecnica__medaglione::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; translate: -50% 0;
  width: 70px; height: 1px; background: var(--sfumatura-oro);
}
.tecnica .diagramma { max-width: 140px; margin-inline: auto; }
.tecnica h3 { font-size: var(--testo-md); margin-bottom: 0.4rem; }
.tecnica p { font-size: var(--testo-sm); margin: 0; max-width: none; }

/* ---- Tracciatura: il diagramma si disegna quando entra in vista ---- */
.diagramma--traccia { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rivela--visibile .diagramma--traccia,
.rivela--visibile.diagramma--traccia { animation: traccia-disegno 2s ease 250ms forwards; }
.scala__livello .diagramma--traccia { animation: traccia-disegno 2s ease 250ms forwards; } /* nella scala parte subito */
@keyframes traccia-disegno { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .diagramma--traccia { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

/* ---- La scala dell'intensità (interattiva, CSS-only con radio) ---- */
.scala { position: relative; }
.scala > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.scala__livelli { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spazio-sm); }
.scala__livelli--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* percorsi a 3 livelli (microneedling) */
.scala__livello {
  cursor: pointer; text-align: center;
  padding: var(--spazio-sm) var(--spazio-xs) var(--spazio-md);
  border-bottom: 2px solid var(--bordo);
  opacity: 0.5; transition: opacity var(--transizione), border-color var(--transizione), translate var(--transizione);
}
.scala__livello:hover { opacity: 0.85; }
.scala__livello .diagramma { max-width: 120px; margin-inline: auto; }
.scala__livello strong { display: block; font-family: var(--font-titoli); font-weight: var(--peso-forte); font-size: var(--testo-base); color: var(--titoli); margin-top: 0.4rem; }
.scala__livello span { font-size: var(--testo-xs); letter-spacing: 0.06em; color: var(--testo); }
.scala__dettaglio {
  display: none; align-items: center;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
  gap: var(--spazio-md) var(--spazio-lg);
  padding: var(--spazio-lg) 0 0;
}
.scala__prezzo { font-family: var(--font-titoli); font-size: var(--testo-display); font-weight: var(--peso-display); color: var(--titoli); line-height: 1; }
.scala__prezzo small { display: block; font-family: var(--font-corpo); font-size: var(--testo-xs); letter-spacing: 0.06em; color: var(--testo); margin-top: 0.5rem; }
.scala__risparmio { display: inline-block; margin-top: 0.6rem; font-family: var(--font-corpo); font-size: var(--testo-sm); font-weight: var(--peso-forte); letter-spacing: 0.05em; color: var(--accento); border: 1px solid color-mix(in srgb, var(--accento) 45%, transparent); padding: 0.3rem 0.85rem; border-radius: 999px; }
.scala__dettaglio p { margin: 0 0 var(--spazio-sm); max-width: none; }
/* il badge risparmio sta accanto al link, non sotto il prezzo (SMM 2026-08-13):
   va a capo da solo se la riga è stretta */
.scala__azione { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-sm); }
.scala__azione .scala__risparmio { margin-top: 0; }
.scala--percorsi .scala__dettaglio { align-items: start; } /* percorsi di lunghezza diversa: tutti allineati in alto (riferimento = seduta singola), niente salti al cambio livello */

#livello-1:checked ~ .scala__corpo label[for="livello-1"],
#livello-2:checked ~ .scala__corpo label[for="livello-2"],
#livello-3:checked ~ .scala__corpo label[for="livello-3"],
#livello-4:checked ~ .scala__corpo label[for="livello-4"] { opacity: 1; border-color: var(--accento); translate: 0 -4px; }
#livello-1:checked ~ .scala__corpo .scala__dettaglio--1,
#livello-2:checked ~ .scala__corpo .scala__dettaglio--2,
#livello-3:checked ~ .scala__corpo .scala__dettaglio--3,
#livello-4:checked ~ .scala__corpo .scala__dettaglio--4 { display: grid; }

/* nota effetti elaborati: stessa distanza icone→prezzi (--spazio-lg), solo dopo la scala */
.scala + .listino-nota { margin-top: var(--spazio-lg); }

/* variante a due card (confronti laminazione/extension) */
.tecniche--due { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; margin-inline: auto; }

/* prezzo unico centrato (pagine con un solo prezzo) */
.prezzo-unico { text-align: center; }
.prezzo-unico .scala__prezzo { margin-top: var(--spazio-sm); }
.prezzo-unico p { max-width: none; } /* il <p> del bottone non resta stretto/sinistra: bottone centrato */
.prezzo-unico .bottone { margin-top: var(--spazio-md); } /* stacca il bottone dalla nota sopra */

/* listino a voci (etichetta a sinistra, prezzo a destra) */
.prezzi-lista { max-width: 40rem; margin: var(--spazio-md) auto var(--spazio-sm); text-align: left; }
.prezzi-voce { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spazio-md); padding: var(--spazio-sm) 0; border-bottom: 1px solid var(--bordo); }
.prezzi-voce:last-child { border-bottom: none; }
.prezzi-voce strong { font-family: var(--font-titoli); font-size: var(--testo-lg); color: var(--titoli); white-space: nowrap; }

/* ---- Le mappature (stili con nome) ---- */
.mappature { display: grid; gap: var(--spazio-md); grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.mappature figure { margin: 0; padding: var(--spazio-md) var(--spazio-sm); }
.mappature .diagramma { max-width: 140px; margin-inline: auto; margin-bottom: var(--spazio-sm); }
.mappature figcaption strong { display: block; font-family: var(--font-titoli); font-size: var(--testo-md); font-weight: var(--peso-forte); color: var(--titoli); }
.mappature figcaption { font-size: var(--testo-sm); }

/* icone nei trattamenti minori */
.trattamenti h3 { display: flex; align-items: center; gap: 0.5rem; }
.trattamenti .icona { width: 1.5rem; height: 1.5rem; flex: none; }

/* i trattamenti come card incorniciate, con filetto oro che si accende */
.trattamenti > div {
  position: relative;
  background: var(--bianco-caldo);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-md);
  box-shadow: var(--ombra-card);
  padding: var(--spazio-md);
  overflow: hidden;
  transition: translate 300ms ease, box-shadow 300ms ease;
}
.trattamenti > div::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--sfumatura-oro);
  transform: scaleX(0); transform-origin: center;
  transition: transform 400ms ease;
}
.trattamenti > div:hover { translate: 0 -5px; box-shadow: var(--ombra-morbida); }
.trattamenti > div:hover::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .trattamenti > div, .trattamenti > div::before { transition: none; }
}

/* figura sotto la testata del metodo */
.metodo__figura { margin: var(--spazio-lg) 0 0; }
.metodo__figura img { width: min(100%, 26rem); border-radius: var(--radius-lg); box-shadow: var(--ombra-morbida); }

/* ============================================================
   LISTINO PREZZI
   ============================================================ */
.listino-avvolgi { overflow-x: auto; }
.listino { width: 100%; max-width: 46rem; margin-inline: auto; border-collapse: collapse; }
.listino th, .listino td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--bordo); font-size: var(--testo-sm); }
.listino th { font-family: var(--font-corpo); font-weight: var(--peso-forte); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--testo-xs); color: var(--testo); }
.listino td:nth-child(2), .listino td:nth-child(3) { font-family: var(--font-titoli); font-size: var(--testo-md); color: var(--titoli); white-space: nowrap; }
.listino-nota { text-align: center; font-size: var(--testo-sm); opacity: 0.8; margin-top: var(--spazio-sm); max-width: none; }

/* ============================================================
   TRATTAMENTI MINORI (griglia sobria)
   ============================================================ */
.trattamenti { display: grid; gap: var(--spazio-md) var(--spazio-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trattamenti h3 { font-family: var(--font-corpo); font-size: var(--testo-base); font-weight: var(--peso-forte); color: var(--testo); margin-bottom: 0.35rem; }
.trattamenti p { font-size: var(--testo-sm); margin: 0; max-width: none; }

/* ============================================================
   CROSS-SELL (fascia con foto)
   ============================================================ */
.rimando { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--spazio-lg); align-items: center; }
.rimando img { width: min(100%, 24rem); aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--ombra-morbida); justify-self: center; }
.rimando--foto-destra { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } /* testo a sinistra, immagine a destra */
.rimando img.rimando__foto--larga { aspect-ratio: 3 / 2; width: min(100%, 30rem); } /* per foto orizzontali */

@media (max-width: 960px) {
  .trattamenti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .trattamenti, .rimando, .tecniche, .mappature { grid-template-columns: 1fr; }
  .scala__livelli { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scala__dettaglio { grid-template-columns: 1fr; }
}

/* ============================================================
   MARQUEE (nastro lento dei servizi)
   ============================================================ */
.nastro { overflow: hidden; border-block: 1px solid var(--bordo); padding-block: 0.9rem; background: var(--fondo-sezione); }
.nastro__scia { display: flex; width: max-content; animation: nastro-servizi 60s linear infinite; }
.nastro ul { display: flex; gap: 2.6rem; padding: 0 1.3rem; margin: 0; list-style: none; white-space: nowrap; }
.nastro li {
  font-family: var(--font-titoli); font-size: var(--testo-md); font-weight: var(--peso-titoli);
  color: var(--titoli); display: flex; align-items: center; gap: 2.6rem;
}
.nastro li::after { content: "✦"; font-size: 0.7em; color: var(--accento); }
@keyframes nastro-scorri { to { translate: -50% 0; } }
/* 4 gruppi identici → un gruppo = 25% della scia: il loop avanza di esattamente un gruppo e non lascia mai buchi (la scia è sempre più larga del viewport). */
@keyframes nastro-servizi { to { translate: -25% 0; } }
@media (prefers-reduced-motion: reduce) { .nastro__scia { animation: none; } }

/* ============================================================
   MANIFESTO TIPOGRAFICO
   ============================================================ */
.manifesto { text-align: center; }
.manifesto h2 {
  font-size: var(--testo-display); font-weight: var(--peso-display);
  line-height: 1.1; max-width: 56rem; margin-inline: auto;
}
.manifesto h2 em { font-style: normal; color: var(--accento); } /* REG-009: mai corsivo — l'enfasi è cromatica */
.manifesto p { margin-inline: auto; margin-top: var(--spazio-md); font-size: var(--testo-md); }

/* ============================================================
   SERVIZI EDITORIALI (collage alternato)
   ============================================================ */
.servizio-editoriale {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--spazio-lg), 6vw, 6rem); align-items: center;
}
.servizio-editoriale + .servizio-editoriale { margin-top: var(--spazio-xl); }
.servizio-editoriale--invertito .collage { order: 2; }
.collage { position: relative; }
.collage__principale {
  width: min(100%, 30rem); aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--ombra-morbida);
}
.collage__dettaglio {
  position: absolute; right: -6%; bottom: -9%;
  width: clamp(9rem, 40%, 15rem); aspect-ratio: 7 / 5; object-fit: cover;
  border-radius: var(--radius-md);
  border: 6px solid var(--bianco-caldo);
  box-shadow: var(--ombra-morbida);
}
.servizio-editoriale--invertito .collage__dettaglio { right: auto; left: -6%; }
.servizio-editoriale__numero {
  font-family: var(--font-titoli); font-size: var(--testo-md);
  color: var(--accento); letter-spacing: 0.1em; display: block; margin-bottom: var(--spazio-xs);
}
.servizio-editoriale__lancio { font-size: var(--testo-md); color: var(--testo); max-width: 30rem; }
.servizio-editoriale__prezzo { font-size: var(--testo-sm); color: var(--testo); opacity: 0.8; letter-spacing: 0.04em; }
.collegamento-freccia { font-weight: var(--peso-forte); font-size: var(--testo-sm); text-decoration: none; color: var(--titoli); }
.collegamento-freccia::after { content: " →"; color: var(--accento); }
.riga-altri-servizi { margin-top: var(--spazio-xl); text-align: center; }
.riga-altri-servizi p { max-width: none; }
.riga-altri-servizi a { margin-inline: 0.6rem; }

/* ============================================================
   PRIMA / DOPO (foto reali)
   ============================================================ */
.confronto {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 7 / 5; max-width: 46rem; margin-inline: auto;
  border: 1px solid var(--bordo); box-shadow: var(--ombra-morbida);
  touch-action: none;
}
.confronto__lato { position: absolute; inset: 0; margin: 0; }
.confronto__lato img { width: 100%; height: 100%; object-fit: cover; }
.confronto__lato--dopo { clip-path: inset(0 0 0 var(--taglio, 50%)); }
.confronto__etichetta {
  position: absolute; top: 0.9rem; z-index: 2; font-size: var(--testo-xs); font-weight: var(--peso-forte);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--testo);
  background: color-mix(in srgb, var(--bianco-caldo) 82%, transparent);
  padding: 0.3rem 0.8rem; border-radius: var(--radius-lg);
}
.confronto__etichetta--prima { left: 0.9rem; }
.confronto__etichetta--dopo { right: 0.9rem; }
.confronto__maniglia {
  position: absolute; top: 0; bottom: 0; left: var(--taglio, 50%); z-index: 2;
  width: 2px; background: var(--bianco-caldo); cursor: ew-resize;
  box-shadow: 0 0 0 1px rgba(42, 38, 32, 0.25);
}
.confronto__maniglia::after {
  content: "↔"; position: absolute; top: 50%; left: 50%;
  translate: -50% -50%; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--bianco-caldo); color: var(--titoli);
  font-size: 1rem; box-shadow: var(--ombra-card);
}
.confronto-didascalia { text-align: center; font-size: var(--testo-xs); opacity: 0.7; margin-top: var(--spazio-sm); max-width: none; }
.confronto-didascalia .confronto-hint { color: var(--accento); font-weight: var(--peso-forte); opacity: 1; }

/* layout editoriale a due colonne: testo a sinistra, slider a destra */
.prima-dopo { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(var(--spazio-lg), 5vw, 4.5rem); align-items: center; }
.prima-dopo__punti { list-style: none; margin: var(--spazio-md) 0 var(--spazio-lg); padding: 0; display: grid; gap: 0.75rem; }
.prima-dopo__punti li { position: relative; padding-left: 1.7rem; font-size: var(--testo-sm); max-width: 32rem; }
.prima-dopo__punti li::before { content: "✦"; position: absolute; left: 0; top: 0.05em; color: var(--accento); font-size: 0.8em; }
.prima-dopo__media .confronto { max-width: none; margin-inline: 0; }
@media (max-width: 860px) {
  .prima-dopo { grid-template-columns: 1fr; gap: var(--spazio-lg); }
  .prima-dopo__punti li { max-width: none; }
}
/* mobile: i punti erano a 14,5px (testo-sm), sotto la misura di lettura → portati al corpo base
   e distanziati di più, ora che occupano tutta la larghezza (SMM 2026-08-13) */
@media (max-width: 720px) {
  .prima-dopo__punti { gap: 1rem; margin-bottom: var(--spazio-md); }
  .prima-dopo__punti li { font-size: var(--testo-base); padding-left: 1.8rem; }
}

/* ============================================================
   BANDA NUMERI
   ============================================================ */
/* colonne larghe quanto la loro didascalia (`auto`, non `1fr`) + `space-between`: è l'unico modo per tenere tutte e quattro le scritte su UNA riga senza rimpicciolire il testo — a quarti uguali la prima (48 caratteri) andrebbe a capo (2026-08-13) */
.numeri { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: var(--spazio-md); row-gap: 0; text-align: center; }
.numeri__valore {
  font-family: var(--font-titoli); font-size: var(--testo-display);
  font-weight: var(--peso-display); line-height: 1; color: var(--crema); display: block;
}
.numeri__valore sup { font-size: 0.4em; color: var(--accento); }
.numeri figcaption { font-size: var(--testo-sm); color: var(--crema); opacity: 0.85; margin-top: 0.5rem; }
.numeri figure { margin: 0; }
/* punto di rottura proprio della fascia (1000px, non i 960px del resto del sito): a quattro colonne l'italiano finisce lo spazio 40px prima */
@media (max-width: 1000px) {
  .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; row-gap: var(--spazio-lg); column-gap: var(--spazio-md); }
}
/* telefoni strettissimi (Fold chiuso, SE di prima generazione): la fascia si allarga di 12px per lato e la didascalia lunga resta su una riga */
@media (max-width: 380px) {
  .numeri { margin-inline: -0.75rem; }
}

/* ============================================================
   GALLERIA ORIZZONTALE (scroll-snap)
   ============================================================ */
/* slider a loop infinito: set reale + copia identica. Lo scorrimento NON è più un'animazione CSS
   ma vero scroll orizzontale guidato da js/main.js: così l'utente può trascinare col dito
   (il loop resta infinito perché le due metà sono identiche) e la pausa avviene solo mentre
   il dito è premuto. Con l'animazione CSS + :hover il tap su mobile lasciava il nastro fermo. */
.galleria { cursor: grab; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: auto; overscroll-behavior-x: contain; }
.galleria::-webkit-scrollbar { display: none; }
/* trascinamento col mouse (desktop): il cursore dice che si può afferrare, e mentre si trascina
   niente selezione del testo delle recensioni */
.galleria.in-trascinamento, .nastro-recensioni.in-trascinamento { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.galleria__scia { display: flex; width: max-content; }
.galleria figure { margin: 0 var(--spazio-md) 0 0; flex: none; }
.galleria img { height: clamp(300px, 48vh, 460px); width: auto; border-radius: var(--radius-md); box-shadow: var(--ombra-card); }
@media (prefers-reduced-motion: reduce) {
  /* niente scorrimento automatico (lo blocca anche il JS): resta la galleria scorrevole a mano */
  .galleria { scroll-snap-type: x mandatory; }
  .galleria__scia { padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
  .galleria figure { scroll-snap-align: center; }
  .galleria__scia > [aria-hidden="true"] { display: none; }
}
.galleria figcaption { font-size: var(--testo-xs); opacity: 0.65; margin-top: 0.5rem; }

/* ============================================================
   METODO (titolo sticky + passi)
   ============================================================ */
.metodo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(var(--spazio-lg), 6vw, 6rem); }
.metodo__testata { align-self: start; } /* niente più aggancio in scorrimento: la SMM lo leggeva come un'animazione e sui portatili bassi la foto restava tagliata fuori (2026-08-13) */
.metodo__passi { display: grid; gap: var(--spazio-lg); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.metodo__passi li { counter-increment: passo; border-top: 1px solid var(--bordo); padding-top: var(--spazio-md); display: grid; grid-template-columns: auto 1fr; gap: var(--spazio-md); }
.metodo__passi li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--font-titoli); font-size: var(--testo-lg); color: var(--accento); line-height: 1.2;
}
.metodo__passi h3 { font-family: var(--font-corpo); font-size: var(--testo-base); font-weight: var(--peso-forte); color: var(--testo); margin: 0 0 0.35rem; }
.metodo__passi p { font-size: var(--testo-sm); margin: 0; max-width: none; }

/* ============================================================
   TEAM EDITORIALE
   ============================================================ */
.team-editoriale { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(var(--spazio-lg), 6vw, 5rem); align-items: center; }
.team-editoriale img { width: min(100%, 26rem); aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--ombra-morbida); }
.team-editoriale__nomi { display: flex; flex-wrap: wrap; gap: var(--spazio-sm); margin-block: var(--spazio-md); padding: 0; list-style: none; }
.team-editoriale__nomi li {
  font-family: var(--font-titoli); font-size: var(--testo-md); color: var(--titoli);
  border: 1px solid var(--bordo); border-radius: var(--radius-lg); padding: 0.35rem 1.1rem;
  background: var(--bianco-caldo);
}

/* ---- Ritratti team con nome (movimento: ritmo sfalsato + zoom al passaggio) ---- */
.ritratto { margin: 0; }
.ritratto__cornice { overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--ombra-card); transition: box-shadow var(--transizione), translate 350ms ease; }
.ritratto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: scale 700ms ease; }
.ritratto:hover .ritratto__cornice { box-shadow: var(--ombra-morbida); translate: 0 -6px; }
.ritratto:hover img { scale: 1.05; }
.ritratto figcaption { font-size: var(--testo-sm); margin-top: 0.6rem; position: relative; padding-top: 0.5rem; }
.ritratto figcaption::before {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 34px;
  background: var(--accento); transition: width 350ms ease;
}
.ritratto:hover figcaption::before { width: 90px; }
.ritratto strong { font-family: var(--font-titoli); font-size: var(--testo-md); font-weight: var(--peso-forte); color: var(--titoli); }
.ritratto__bio { display: block; margin-top: 0.5rem; font-size: var(--testo-sm); color: var(--testo); line-height: 1.55; }
/* mobile: a una card per riga la bio è il testo principale della scheda → corpo base,
   interlinea del corpo e più stacco da nome/ruolo (SMM 2026-08-13) */
@media (max-width: 720px) {
  .ritratto figcaption { margin-top: 0.85rem; padding-top: 0.65rem; }
  .ritratto__bio { font-size: var(--testo-base); margin-top: 0.8rem; line-height: var(--interlinea-corpo); }
}
@media (min-width: 721px) {
  .ritratto:nth-child(2) { translate: 0 var(--spazio-lg); }  /* ritmo editoriale sfalsato */
}
@media (prefers-reduced-motion: reduce) {
  .ritratto__cornice, .ritratto img, .ritratto figcaption::before { transition: none; }
}

/* ============================================================
   RECENSIONI
   ============================================================ */
.recensioni-testata { text-align: center; margin-bottom: var(--spazio-lg); }
.recensioni-cta { text-align: center; margin-top: clamp(2rem, 5vh, 3.5rem); }
.recensioni-testata .recensione__stelle { font-size: var(--testo-md); }
.citazione-grande {
  /* ridotta di un gradino (xl→lg, SMM 2026-08-13): la citazione non deve competere col titolo di sezione */
  font-family: var(--font-titoli); font-size: var(--testo-lg); font-weight: var(--peso-display);
  line-height: 1.25; color: var(--titoli); text-align: center;
  max-width: 46rem; margin: 0 auto var(--spazio-lg);
}
/* nastro recensioni: come la galleria, scroll vero guidato da js/main.js (trascinabile col dito,
   pausa solo mentre si tiene premuto, loop infinito garantito dalle due metà identiche) */
.nastro-recensioni { cursor: grab; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: auto; overscroll-behavior-x: contain; }
.nastro-recensioni::-webkit-scrollbar { display: none; }
.nastro-recensioni__scia { display: flex; gap: var(--spazio-md); width: max-content; padding-block: 0.5rem; }
.nastro-recensioni .recensione { width: clamp(17rem, 34vw, 23rem); flex: none; }

.recensione { display: flex; flex-direction: column; gap: var(--spazio-sm); }
.recensione__stelle { color: var(--accento); letter-spacing: 0.18em; font-size: var(--testo-sm); }
.recensione blockquote { margin: 0; font-size: var(--testo-sm); line-height: 1.6; }
.recensione figcaption { font-size: var(--testo-xs); color: var(--testo); opacity: 0.75; }

/* ============================================================
   PASSI PRIMA VOLTA
   ============================================================ */
.griglia-3 { display: grid; gap: var(--spazio-md); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 721px) { .griglia-3--sfalsata { padding-bottom: var(--spazio-lg); } }
@media (max-width: 720px) { .griglia-3--sfalsata + p { margin-top: var(--spazio-lg); } } /* mobile: stacca il bottone dai ritratti */
.passo { text-align: center; padding: var(--spazio-md); }
.passo__numero {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem;
  margin-inline: auto; margin-bottom: var(--spazio-sm);
  border-radius: 50%; border: 1px solid var(--accento);
  font-family: var(--font-titoli); font-size: var(--testo-md); color: var(--titoli);
}
.passo h3 { font-family: var(--font-corpo); font-size: var(--testo-base); font-weight: var(--peso-forte); color: var(--testo); margin-bottom: 0.4rem; }
.passo p { font-size: var(--testo-sm); margin: 0; max-width: none; }

/* ============================================================
   DOVE SIAMO
   ============================================================ */
.dove { display: grid; gap: var(--spazio-md); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dove .card h3 { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-corpo); font-size: var(--testo-base); font-weight: var(--peso-forte); color: var(--testo); margin-bottom: 0.5rem; }
.dove .card .icona { width: 1.5rem; height: 1.5rem; flex: none; }
.dove .card p { font-size: var(--testo-sm); margin: 0 0 0.35rem; max-width: none; }
/* PROVA riga-azione allineata (2026-08-13) — per tornare indietro togli le 3 regole qui sotto e la classe card__azione dai <p> con link in .dove */
.dove .card { display: flex; flex-direction: column; }
.dove .card p.card__azione { margin: auto 0 0; padding-top: 0.9rem; border-top: 1px solid var(--bordo); }
.dove .card p.card__azione a { display: inline-flex; align-items: center; font-weight: var(--peso-forte); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: var(--larghezza-testo); margin-inline: auto; }
/* impaginazione a due colonne: testata a sinistra, domande a destra (stesso schema di .metodo) */
.faq-blocco { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(var(--spazio-lg), 6vw, 6rem); align-items: start; }
.faq-blocco__testata { align-self: start; }
.faq-blocco__aiuto { font-size: var(--testo-sm); margin: var(--spazio-md) 0 0; }
.faq-blocco__aiuto a { font-weight: var(--peso-forte); }
.faq-blocco .faq { max-width: none; margin-inline: 0; }
.faq-blocco .faq details:first-of-type { border-top: 1px solid var(--bordo); }
.faq details { border-bottom: 1px solid var(--bordo); padding-block: var(--spazio-sm); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--spazio-sm);
  font-weight: var(--peso-forte); color: var(--testo); font-size: var(--testo-base);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accento); font-size: var(--testo-md); line-height: 1; transition: rotate var(--transizione); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { margin: var(--spazio-sm) 0 0; font-size: var(--testo-sm); }

/* ============================================================
   CTA FINALE FULL-BLEED
   ============================================================ */
.cta-foto { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-block: var(--spazio-hero); }
.cta-foto__immagine { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--velo-firma); }
.cta-foto h2 { color: var(--bianco-caldo); font-size: var(--testo-display); font-weight: var(--peso-display); max-width: 40rem; margin-inline: auto; }
.cta-foto p { color: var(--crema); margin-inline: auto; }
.cta-foto .monogramma { margin-bottom: var(--spazio-sm); }
.cta-foto__azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-sm); justify-content: center; }
.cta-foto__azioni .bottone { display: inline-flex; align-items: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.pie { border-top: 1px solid var(--bordo); }
.pie__griglia { display: grid; gap: var(--spazio-lg); grid-template-columns: 1.2fr 1fr 1fr 1fr; padding-block: var(--spazio-lg); }
.pie h3 { font-family: var(--font-corpo); font-size: var(--testo-sm); font-weight: var(--peso-forte); letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo); margin-bottom: var(--spazio-sm); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pie a { font-size: var(--testo-sm); text-decoration: none; color: var(--testo); }
.pie a:hover { color: var(--titoli); }
.pie p { font-size: var(--testo-sm); margin: 0 0 0.35rem; }
.pie__seguici { margin-top: var(--spazio-md); }
.pie__social { margin: 0; }
.pie__social a { display: inline-flex; padding: 0.15rem; color: var(--testo); transition: color var(--transizione), transform var(--transizione); }
.pie__social a:hover { color: var(--titoli); transform: translateY(-1px); }
.icona-social { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pie__legale { border-top: 1px solid var(--bordo); padding-block: var(--spazio-sm); display: flex; flex-wrap: wrap; gap: var(--spazio-sm) var(--spazio-md); justify-content: space-between; font-size: var(--testo-xs); color: var(--testo); }
.pie__legale a { font-size: var(--testo-xs); }

/* icona in linea davanti a un link (es. "Apri in Google Maps", "Scrivici ora") ---- */
.icona-riga {
  width: 1.05em; height: 1.05em; margin-right: 0.4em; vertical-align: -0.16em; flex: none;
}
.icona-riga--tratto { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icona-riga--pieno { fill: currentColor; } /* il marchio WhatsApp è un glifo pieno, non un tratto */

/* ---- Bottone fluttuante "torna su": occhio che si apre man mano che si scende ----
   Sostituisce il vecchio bottone WhatsApp (SMM 2026-08-13) mantenendone identici cerchio,
   colori, misura, posizione e ombra. L'apertura è la variabile --apertura (0,08 = chiuso,
   1 = aperto), scritta da js/main.js in base a quanto si è sceso nella pagina. */
.occhio-su {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem;
  border: none; padding: 0; cursor: pointer;
  border-radius: 50%; background: var(--cta-fondo); color: var(--cta-testo);
  box-shadow: var(--ombra-morbida); transition: background var(--transizione), transform var(--transizione);
}
.occhio-su:hover { background: var(--cta-fondo-hover); color: var(--cta-testo); transform: translateY(-2px); }
.occhio-su svg {
  width: 1.7rem; height: 1.7rem; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* schiacciamento verticale attorno al centro dell'occhio: da fessura ad occhio aperto.
   I tracciati hanno vector-effect="non-scaling-stroke", altrimenti da chiuso il tratto
   si assottiglierebbe fino a sparire insieme alla forma. */
.occhio-su__occhio {
  transform: scaleY(var(--apertura, 0.08)); transform-origin: 12px 12px;
  transition: transform 140ms linear;
}
/* ciglia sulla palpebra superiore: NON scalano (si schiaccerebbero fino a sparire), scendono
   insieme alla palpebra che si chiude — 2,6 unità è la corsa del bordo alto tra aperto e chiuso,
   misurata sul tracciato: così restano attaccate all'occhio in tutti gli stati intermedi */
.occhio-su__ciglia {
  transform: translateY(calc((1 - var(--apertura, 0.08)) * 2.6px));
  transition: transform 140ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .occhio-su__occhio, .occhio-su__ciglia { transition: none; }
}

/* ============================================================
   FORM CONTATTI
   ============================================================ */
.modulo { max-width: 40rem; display: grid; gap: var(--spazio-md); }
.campo { display: grid; gap: 0.4rem; }
.campo label { font-size: var(--testo-sm); font-weight: var(--peso-forte); color: var(--titoli); letter-spacing: 0.02em; }
.campo input, .campo textarea, .campo select {
  font-family: var(--font-corpo); font-size: var(--testo-base); color: var(--testo);
  background: var(--bianco-caldo); border: 1px solid var(--bordo); border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem; width: 100%;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.campo textarea { resize: vertical; min-height: 6rem; }
.campo select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232E3D31' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 12px 8px;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 22%, transparent);
}
.campo-nascosto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */
.consenso { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--testo-sm); color: var(--testo); line-height: 1.5; cursor: pointer; }
.consenso input { margin-top: 0.15rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--verde); }
.consenso a { color: var(--titoli); }
.modulo .bottone { justify-self: start; margin-top: 0.4rem; }
.form-errore {
  background: color-mix(in srgb, #b3261e 10%, var(--bianco-caldo));
  border: 1px solid color-mix(in srgb, #b3261e 40%, transparent);
  color: #8a1e18; padding: 0.8rem 1rem; border-radius: var(--radius-md); font-size: var(--testo-sm); max-width: 40rem;
}

/* pagine legali (privacy, cookie) */
.legale { max-width: 46rem; }
.legale h2 { font-size: var(--testo-md); margin-top: var(--spazio-lg); }
.legale p, .legale ul { font-size: var(--testo-sm); max-width: none; }
.legale ul { padding-left: 1.2rem; margin: 0 0 var(--spazio-sm); }
.legale li { margin-bottom: 0.3rem; }
.legale__meta { font-size: var(--testo-xs); opacity: 0.75; }

/* pagina 404 */
.errore404 { text-align: center; }
.errore404 h1 { font-size: var(--testo-hero); }
.errore404 p { max-width: 40rem; margin-inline: auto; }
.errore404__azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-sm); justify-content: center; margin-top: var(--spazio-lg); }

/* pagina grazie / thank-you (conferma invio) */
.grazie { text-align: center; }
.grazie__logo { width: 96px; height: 52px; margin: 0 auto var(--spazio-md); display: block; }
.grazie p { max-width: 40rem; margin-inline: auto; }
.grazie__azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-sm); justify-content: center; margin-top: var(--spazio-lg); }

/* ---- Reveal delicato ---- */
.rivela { opacity: 0; translate: 0 18px; transition: opacity 600ms ease, translate 600ms ease; }
.rivela--visibile { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .rivela { opacity: 1; translate: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .servizio-editoriale, .metodo, .team-editoriale { grid-template-columns: 1fr; }
  .faq-blocco { grid-template-columns: 1fr; gap: var(--spazio-md); }
  .servizio-editoriale--invertito .collage { order: 0; }
  .griglia-3, .dove { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .nav__apri { display: block; order: 2; }
  .nav__lingua { order: 1; } /* header mobile: prima la lingua, poi l'hamburger (invertiti su richiesta SMM) */
  /* menu mobile: drawer da destra (65%) con logo, menu e prenota */
  .nav__pannello {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
    width: 100%; max-width: none; min-width: 0; /* PROVA: larghezza piena */
    display: flex; flex-direction: column; justify-content: flex-start;
    /* misure legate all'altezza VISIBILE (dvh: su iOS la barra di Safari la riduce davvero);
       riga in vh come ripiego per i browser senza dvh */
    gap: clamp(1rem, 3vh, 2.4rem);
    gap: clamp(1rem, 3dvh, 2.4rem);
    padding: clamp(2.4rem, 6vh, 4rem) var(--spazio-lg) clamp(1.5rem, 4vh, 3rem);
    padding: clamp(2.4rem, 6dvh, 4rem) var(--spazio-lg) clamp(1.5rem, 4dvh, 3rem);
    /* liquid glass (stile iPhone) marcato: base traslucida + sheen diagonale + blur/saturate/brightness forti */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(251, 247, 240, 0.08) 42%), rgba(251, 247, 240, 0.5); /* var(--bianco-caldo) al 50% + riflesso */
    /* blur ridotto da 40 a 26px (SMM 2026-08-13: apertura a scatti): il vetro resta pieno ma il
       compositore ricalcola una sfocatura molto meno costosa a ogni fotogramma dello scorrimento */
    -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.05);
    backdrop-filter: blur(26px) saturate(180%) brightness(1.05);
    border-left: none;
    border-radius: 0;
    box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.72);
    /* translate3d + will-change: il pannello vive su un layer suo e scorre sulla GPU */
    transform: translate3d(100%, 0, 0); visibility: hidden;
    will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
    transition: transform 700ms cubic-bezier(0.32, 0.72, 0, 1), visibility 700ms; /* 460 → 700ms: apertura/chiusura più distesa (SMM 2026-08-13) */
    overflow-y: auto;
  }
  /* dentro il drawer i colori sono sempre scuri su chiaro, qualunque stato dell'header */
  .nav__pannello .nav__collegamento { color: var(--titoli); }
  .nav__pannello .nav__tendina a { color: var(--testo); }
  /* logo KK cliccabile in cima al drawer → home della lingua */
  .nav__pannello .nav__logo { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; align-self: center; text-decoration: none; color: var(--titoli); }
  .nav__pannello .nav__logo svg { width: clamp(52px, 9vh, 84px); width: clamp(52px, 9dvh, 84px); height: auto; aspect-ratio: 84 / 45; }
  .nav__pannello .nav__logo span { font-family: var(--font-titoli); font-size: var(--testo-md); font-weight: var(--peso-forte); letter-spacing: 0.06em; }
  /* prenota: testo su una riga, non troppo grande */
  /* Prenota nel drawer: era a testo-xs (12,6px), minuscolo accanto alle voci di menu.
     Ingrandito (+20% di corpo, +34% di pillola) restando dentro il bilancio d'altezza
     coi servizi aperti anche sullo schermo più corto (~553px): vedi nota misure sopra. */
  .nav__pannello .bottone {
    /* stessa larghezza, altezza e raggio dei box delle voci: il bottone è il quinto blocco della
       colonna, non una pillola a parte (SMM 2026-08-13). Colore verde pieno invariato. */
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 2.7rem; border-radius: var(--radius-md);
    white-space: nowrap;
    font-size: clamp(0.95rem, 1.9vh, 1.2rem);
    font-size: clamp(0.95rem, 1.9dvh, 1.2rem);
    padding: 0.65em 2em;
  }
  .nav--aperta .nav__pannello { transform: translate3d(0, 0, 0); visibility: visible; }
  /* PROVA: al posto dell'overlay scuro, un'aurora di gradienti radiali (colori brand) che ruota DIETRO il vetro
     (il backdrop-filter del drawer la sfoca in un bagliore morbido in movimento). Layer sovradimensionato (inset:-50%)
     così ruotando copre sempre il viewport. */
  .nav::before {
    content: ""; position: fixed; inset: -50%; z-index: 68;
    background:
      radial-gradient(38% 38% at 28% 30%, rgba(184, 155, 110, 0.85), transparent 72%),
      radial-gradient(42% 42% at 74% 26%, rgba(46, 61, 49, 0.90), transparent 72%),
      radial-gradient(48% 48% at 62% 78%, rgba(241, 233, 219, 0.95), transparent 72%),
      radial-gradient(38% 38% at 22% 82%, rgba(184, 155, 110, 0.70), transparent 72%),
      var(--sabbia-chiaro);
    opacity: 0; visibility: hidden; will-change: transform;
    transition: opacity 700ms cubic-bezier(0.32, 0.72, 0, 1), visibility 700ms;
    /* l'animazione c'è sempre ma è in PAUSA a menu chiuso: prima veniva tolta alla chiusura e
       la rotazione tornava di scatto a 0°, uno scatto visibile anche dietro il vetro */
    animation: nav-aurora 22s linear infinite; animation-play-state: paused;
  }
  .nav--aperta::before { opacity: 1; visibility: visible; animation-play-state: running; }
  @keyframes nav-aurora { to { transform: rotate(360deg); } }
  /* a menu aperto, via il bottone fluttuante (z-index 60, sta sopra) */
  .menu-aperto .occhio-su { opacity: 0; visibility: hidden; pointer-events: none; }
  /* a menu aperto niente backdrop-filter sull'header: altrimenti diventa il containing block
     del drawer (position:fixed) e lo taglia al riquadro dell'header quando si è scrollato */
  .menu-aperto .intestazione { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__lista { position: relative; flex-direction: column; align-items: flex-start; align-self: center; width: fit-content; max-width: 100%; gap: clamp(0.5rem, 1.8vh, 1.4rem); gap: clamp(0.5rem, 1.8dvh, 1.4rem); text-align: left; }
  .nav__collegamento { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-titoli); font-size: clamp(1.05rem, 2.3vh, 1.45rem); font-size: clamp(1.05rem, 2.3dvh, 1.45rem); padding-block: 0.3rem; font-weight: var(--peso-titoli); color: var(--titoli); }
  /* icone voci menu nel drawer: coerenti con lo sprite (tratto), stroke sui titoli · in em → seguono il corpo della voce */
  .nav__pannello .nav__icona { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; stroke: var(--titoli); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .nav__lista > li { opacity: 0; translate: 0 14px; transition: opacity 560ms ease, translate 560ms ease; }
  .nav--aperta .nav__lista > li { opacity: 1; translate: 0 0; }
  .nav--aperta .nav__lista > li:nth-child(1) { transition-delay: 140ms; }
  .nav--aperta .nav__lista > li:nth-child(2) { transition-delay: 225ms; }
  .nav--aperta .nav__lista > li:nth-child(3) { transition-delay: 310ms; }
  .nav--aperta .nav__lista > li:nth-child(4) { transition-delay: 395ms; }
  .nav--aperta .nav__lista > li:nth-child(5) { transition-delay: 480ms; }
  /* Servizi = accordion nel drawer: sottovoci compresse, si aprono al tap → niente scroll all'apertura */
  .nav__tendina { position: static; transform: none; visibility: visible; translate: 0 0; box-shadow: none; border: none; background: none; text-align: left; min-width: 0;
    display: flex; flex-direction: column; gap: 0.1rem;
    max-height: 0; opacity: 0; overflow: hidden; padding: 0 0 0 2.2rem;
    transition: max-height 360ms ease, opacity 280ms ease, padding 360ms ease; }
  .nav__voce.aperta .nav__tendina { max-height: 22rem; opacity: 1; padding: 0.35rem 0 0.1rem 2.2rem; }
  .nav__tendina a { font-size: var(--testo-sm); padding: 0.22rem 0.3rem; }
  /* Servizi: occhio chiuso a menu chiuso, occhio aperto quando il sottomenu si apre */
  .nav__pannello .nav__icona--aperto { display: none; }
  .nav__pannello .nav__voce.aperta .nav__icona--chiuso { display: none; }
  .nav__pannello .nav__voce.aperta .nav__icona--aperto { display: inline-flex; }
  /* Prenota centrato come il logo (le altre voci restano a bandiera da sinistra) */
  /* Prenota: stessa aria che c'è tra logo e menu (SMM 2026-08-13) — il margine vale il gap del
     pannello meno il gap della lista, così lo stacco TOTALE coincide con quello sopra il menu */
  .nav__lista > li:last-child { align-self: stretch; margin-top: calc(clamp(1rem, 3vh, 2.4rem) - 0.5rem); margin-top: calc(clamp(1rem, 3dvh, 2.4rem) - 0.5rem); }

  /* ---- PROVA (SMM 2026-08-13): voci del menu come blocchi impilati, impaginati come le card
     dei "tre passi" della home. Niente foto dentro i blocchi (scartate dalla SMM): solo una
     SFUMATURA translucida che lascia trasparire l'aurora del drawer dietro il box.
     REVERSIBILE: togliere questo blocco e tutto torna com'era. ---- */
  .nav__lista {
    width: 100%; align-self: stretch; gap: 0.5rem;
    align-items: stretch; text-align: center; /* voci centrate, non più a bandiera da sinistra (SMM) */
    /* altezza dettata dal contenuto: così i margini automatici del pannello tengono il blocco
       centrato e il box dei Servizi cresce SOLO di quanto servono le sue voci (SMM 2026-08-13) */
    flex: 0 0 auto;
  }
  .nav__lista > li:not(:last-child) {
    flex: none; min-height: 2.7rem;
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(251, 247, 240, 0.14) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 8px 22px rgba(42, 38, 32, 0.08);
  }
  .nav__lista > li:last-child { flex: none; }
  /* titolo centrato nel box anche in verticale: il collegamento riempie il blocco */
  .nav__lista > li:not(:last-child) > .nav__collegamento {
    flex: 1 1 auto; justify-content: center; padding: 0.72rem 1.15rem;
  }
  /* voce aperta: il box cresce di quanto serve alle sottovoci, il titolo torna a misura */
  .nav__voce.aperta > .nav__collegamento { flex: none; }
  /* colori invertiti al tocco e sulla voce Servizi aperta: fondo verde scuro del brand book,
     testo e icone in bianco. Lo stile sta sul COLLEGAMENTO e non sul <li>: così, aprendo i
     Servizi, si colora solo la riga del titolo e il sottomenu resta chiaro (richiesta SMM). */
  .nav__lista > li:not(:last-child) > .nav__collegamento:active,
  .nav__voce.aperta > .nav__collegamento {
    background: var(--verde); color: #fff;
  }
  .nav__lista > li:not(:last-child) > .nav__collegamento:active .nav__icona,
  .nav__voce.aperta > .nav__collegamento .nav__icona { stroke: #fff; } /* il chevron usa currentColor → diventa bianco da solo */
  .nav__voce.aperta .nav__tendina {
    flex: 0 1 auto; min-height: 0; overflow-y: auto; /* rete di sicurezza: su schermi bassissimi scorre il sottomenu, mai la pagina */
    max-height: 22rem; max-height: min(22rem, 34dvh);
    padding: 0.5rem 0.9rem; align-items: center; /* aria uguale sopra e sotto: prima c'era 0 in alto e 0,8rem in basso */
  }
  .nav__voce.aperta .nav__tendina a { padding-block: 0.18rem; } /* recupera i px del nuovo margine in alto senza stringere il box */
  .nav__tendina { padding-left: 0; padding-right: 0; align-items: center; }
  .nav__tendina a { text-align: center; }
  /* blocco logo+menu centrato verticalmente nel drawer (SMM 2026-08-13: stava troppo in alto).
     Margini automatici invece di justify-content:center: quando lo spazio libero c'è lo dividono
     equamente sopra e sotto, quando finisce collassano a 0 → il contenuto resta scorrevole dall'alto
     (con justify-content:center la parte alta finirebbe fuori e irraggiungibile). */
  .nav__pannello > :first-child { margin-top: auto; }
  .nav__pannello > :last-child { margin-bottom: auto; }
  /* Niente compressione all'apertura dei servizi (SMM 2026-08-13: il cambio di corpo si notava).
     Le misure del drawer sono UNA SOLA e sono tarate sull'altezza dello schermo (vh): su ogni
     telefono restano ~10rem di margine, quante ne serve al sottomenu → aprendo i servizi non
     cambia nessuna dimensione, scende solo la tendina. overflow-y resta come rete di sicurezza. */
  /* chevron sulla voce con sottomenu (Servizi), ruota all'apertura */
  .nav__pannello .nav__voce:has(.nav__tendina) > .nav__collegamento::after {
    content: ""; flex: none; width: 0.45rem; height: 0.45rem; margin-left: 0.1rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 300ms ease; }
  .nav__pannello .nav__voce.aperta:has(.nav__tendina) > .nav__collegamento::after { transform: rotate(-135deg); }
  .nav--aperta .nav__apri { position: fixed; top: 1rem; right: 1.1rem; z-index: 75; color: var(--titoli); }
  .nav--aperta .nav__apri .icona-apri { display: none; }
  .nav--aperta .nav__apri .icona-chiudi { display: block; }

  /* titolo hero più in alto su mobile: cade dentro l'iride della variante verticale */
  .eroe-foto { align-items: center; padding-block: 5.5rem var(--spazio-xl); }
  .eroe-foto__contenuto { translate: 0 -5vh; }
  @media (prefers-reduced-motion: reduce) {
    .nav__pannello, .nav__lista > li { transition: none; transform: none; translate: none; }
    .nav--aperta::before { animation: none; }
  }

  .collage__principale { width: 100%; }
  .griglia-3, .dove, .pie__griglia, .griglia-recensioni { grid-template-columns: 1fr; }
  .confronto { aspect-ratio: 7 / 5; }
  /* sotto i 720px una colonna sola: a metà larghezza di un telefono la didascalia da 48 caratteri andrebbe a capo per forza (servirebbe un corpo di 8px) */
  .numeri { grid-template-columns: 1fr; row-gap: var(--spazio-md); }
}