/* ============================================================
   CARATTERI OSPITATI SUL PROPRIO SERVER
   Prima venivano da Google: il browser doveva scaricare un foglio
   di stile esterno e solo DOPO scoprire quali file font servivano.
   Due domini, due handshake, oltre un secondo di attesa.
   Ora partono insieme al resto, dallo stesso dominio.
   In piu' nessun dato dei visitatori raggiunge Google.

   font-display:swap mostra subito il testo con il carattere di
   sistema e lo sostituisce appena il font e' pronto: mai una
   pagina vuota in attesa.
   ============================================================ */
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/dm-sans-v17-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/dm-sans-v17-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/dm-sans-v17-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/dm-sans-v17-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/lora-v37-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/lora-v37-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/lora-v37-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lora"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/lora-v37-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/lora-v37-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Lora"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/fonts/lora-v37-latin-500italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lora"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("/fonts/lora-v37-latin-600italic.woff2") format("woff2");
}


/* ============================================================
   AMMINISTRAZIONI VERONA: style.css · V6
   Tipografia:
     - DM Sans  -> navigazione, testo corrente, pulsanti, moduli
     - Lora     -> titoli grandi e frasi chiave (con corsivo accento)
   Palette cliente:
     #161d23 notte  · #576e6a salvia · #5e8d83 teal
     #ffffff bianco · #e5b80b oro
   Uso dei colori guidato dal contrasto (WCAG):
     - oro su bianco = 1,88:1 -> MAI testo su bianco. Solo su fondo
       scuro (9,07:1) o come fondo pieno con testo notte (9,33:1).
     - teal su bianco = 3,74:1 -> solo campiture/decoro, non testo.
       Su fondo notte = 4,55:1 -> ok come accento.
     - per il testo accento su bianco si usa --teal-cupo (6,77:1),
       variante scura derivata dal teal del cliente.
   ============================================================ */

:root {
  --notte: #161d23;
  --salvia: #576e6a;
  --teal: #5e8d83;
  --oro: #e5b80b;
  --bianco: #ffffff;

  /* Derivati (stessa famiglia, calibrati per il contrasto) */
  --teal-cupo: #3f6259;
  --teal-piu-cupo: #2f4a43;
  --notte-soft: #202a32;
  --nebbia: #f4f6f5;
  --nebbia-2: #e8edeb;
  --linea: #d5dedb;
  --su-scuro: #eef2f1;
  --su-scuro-soft: #a9b7b3;
  --focus: #e5b80b;

  --max: 1160px;
  --radius: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 112.5%;
  scroll-behavior: smooth;
  overflow-x: hidden;   /* ripiego per browser datati */
  overflow-x: clip;     /* non spezza il position:sticky della testata */
  /* impedisce a iOS di ingrandire il testo ruotando il telefono */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem; line-height: 1.65;
  color: var(--notte); background: var(--nebbia);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-cupo); text-underline-offset: 3px; }
a:hover { color: var(--teal-piu-cupo); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* ---------- Tipografia ---------- */
h1, h2, h3 {
  font-family: "Lora", "Iowan Old Style", "Times New Roman", Georgia, serif;
  /* Lora ha ascendenti alte: interlinea un po' più aperta rispetto
     a un display grottesco, e peso 600 (Lora: 400/500/600/700). */
  font-weight: 600; line-height: 1.16; letter-spacing: -0.01em;
  color: var(--notte); margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.5rem, 5.8vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.9vw, 2.8rem); }
h3 { font-size: 1.35rem; line-height: 1.25; }
p { margin: 0 0 1em; }
.lead { font-size: 1.2rem; line-height: 1.6; color: var(--salvia); max-width: 62ch; }
.acc { font-style: italic; font-weight: 500; color: var(--teal-cupo); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--notte); color: #fff; padding: .75rem 1.25rem; z-index: 100; }
.skip-link:focus { left: 0; }

/* Fregio: profilo di tetti, richiama la falda della "A" del marchio. */
.fregio { display: block; margin: 0 0 1.3rem; color: var(--teal); line-height: 0; }
.fregio svg { width: 74px; height: auto; display: block; }
.center .fregio svg { margin-left: auto; margin-right: auto; }
.section--scuro .fregio, .cta-band .fregio, .hero .fregio { color: var(--oro); }

/* L'involucro tiene la lieve rotazione (le trasformazioni non si
   applicano agli elementi inline); lo span interno porta lo sfondo con
   box-decoration-break: clone, così ogni riga di testo riceve il
   proprio rettangolo e lo sfondo segue la lunghezza delle parole. */
.eyebrow {
  display: inline-block;
  font-size: 1.02rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  margin-bottom: 1.4rem;
  transform: rotate(-1.1deg);
  line-height: 2.05;   /* spazio fra le righe evidenziate */
  background: none; padding: 0;
}
.evidenzia {
  display: inline;
  color: var(--notte); background: var(--oro);
  padding: .26rem .72rem; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.4rem; }
.section { padding: 6.6rem 0; background: var(--nebbia); }
.section--tint { background: var(--nebbia-2); }
.section--card { background: var(--bianco); }
.section--scuro { background: var(--notte); color: var(--su-scuro); }
.section--scuro h2, .section--scuro h3 { color: var(--bianco); }
.section--scuro .lead, .section--scuro .confronto-nota { color: var(--su-scuro-soft); }
.section--scuro .evidenzia { background: var(--oro); color: var(--notte); }
.section--scuro .acc { color: var(--oro); }
.section--scuro a { color: var(--oro); }
.center { text-align: center; }

/* ---------- Topbar / header ---------- */
.topbar { background: var(--notte); color: var(--su-scuro); font-size: .95rem; padding: .5rem 0; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topbar a { color: var(--bianco); font-weight: 700; text-decoration: none; }
.topbar a:hover { text-decoration: underline; color: var(--oro); }

.header { position: sticky; top: 0; z-index: 50; background: rgba(244,246,245,.94); backdrop-filter: blur(10px); transition: box-shadow .25s; }
.header.compatto { box-shadow: 0 10px 30px rgba(22,29,35,.12); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: clamp(.5rem, 2vw, 1.4rem); padding-top: .85rem; padding-bottom: .85rem; }

/* Dimensioni FLUIDE: clamp(minimo, valore-che-scala, massimo).
   Il minimo garantisce la leggibilita' sui telefoni piccoli, il
   massimo evita che il marchio diventi enorme sui monitor grandi.
   Non servono soglie fisse: la misura segue la larghezza dello schermo. */
.brand {
  text-decoration: none; color: var(--notte); line-height: 1.15;
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, .68rem);
}
.brand-marchio {
  flex: 0 0 auto;
  display: block; line-height: 0;
  height: clamp(26px, 6.6vw, 34px);
  color: var(--teal-piu-cupo);
}
.brand-marchio svg { height: 100%; width: auto; display: block; }
.brand:hover .brand-marchio { color: var(--teal); }
.brand-testo { display: block; min-width: 0; }
.brand strong {
  font-family: "Lora", Georgia, serif; font-weight: 600;
  font-size: clamp(.68rem, 2.9vw, 1.12rem);
  display: block; letter-spacing: -0.01em;
}
.brand span {
  font-size: clamp(.58rem, 1.95vw, .68rem);
  color: var(--teal-cupo); letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600;
  display: block;
}

/* La navigazione sta a sinistra, appena dopo il marchio; solo il
   pulsante di conversione viene spinto all'estremità destra.
   Le voci non vanno mai a capo: se non c'è spazio si passa al menù
   a scomparsa (vedi media query a 1130px). */
.nav { display: flex; align-items: center; gap: .2rem; flex: 1; margin-left: 1.8rem; min-width: 0; }
.nav a, .nav .btn { white-space: nowrap; flex: none; }
.nav .btn { margin-left: auto; font-size: .92rem; padding: .65rem 1.2rem; box-shadow: 4px 4px 0 var(--notte); }
.nav .btn:hover { box-shadow: 2px 2px 0 var(--notte); }
.nav a { text-decoration: none; color: var(--notte); font-weight: 500; padding: .48rem .62rem; border-radius: 8px; font-size: .9rem; }
.nav a:hover { background: var(--nebbia-2); color: var(--teal-piu-cupo); }
.nav a[aria-current="page"] { background: var(--notte); color: var(--bianco); }
.nav a[aria-current="page"]:hover { background: var(--notte); color: var(--bianco); }

/* Pulsanti "brutalisti": bordo netto, ombra piena senza sfocatura,
   e alla pressione il pulsante scende sull'ombra. */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-weight: 700; font-size: 1.05rem; padding: .9rem 1.7rem;
  border-radius: 14px; border: 2.5px solid var(--notte);
  box-shadow: 5px 5px 0 var(--notte);
  transition: background .15s, color .15s, transform .1s, box-shadow .1s;
  cursor: pointer;
}
.btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--notte); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--notte); }
.btn--pieno { background: var(--oro); color: var(--notte); }
.btn--pieno:hover { background: #f0c422; color: var(--notte); }
.btn--vuoto { background: var(--bianco); color: var(--teal-piu-cupo); }
.btn--vuoto:hover { background: var(--teal); color: var(--notte); }
.btn--scuro { background: var(--notte); color: var(--bianco); }
.btn--scuro:hover { background: var(--teal-piu-cupo); color: var(--bianco); }
.btn--grande { font-size: 1.15rem; padding: 1.05rem 2.1rem; }
.section--scuro .btn, .cta-band .btn { border-color: var(--bianco); box-shadow: 5px 5px 0 var(--bianco); }
.section--scuro .btn:hover, .cta-band .btn:hover { box-shadow: 2px 2px 0 var(--bianco); }
.section--scuro .btn:active, .cta-band .btn:active { box-shadow: 0 0 0 var(--bianco); }
.section--scuro .btn--vuoto, .cta-band .btn--vuoto { background: transparent; color: var(--bianco); }
.section--scuro .btn--vuoto:hover, .cta-band .btn--vuoto:hover { background: rgba(255,255,255,.16); color: var(--bianco); }

.nav-toggle {
  display: none; flex: 0 0 auto; white-space: nowrap;
  background: var(--bianco); border: 2.5px solid var(--notte);
  border-radius: 12px; box-shadow: 4px 4px 0 var(--notte);
  padding: .5rem clamp(.5rem, 1.7vw, .95rem);
  font-size: clamp(.72rem, 2.4vw, .92rem);
  font-weight: 700; color: var(--notte); cursor: pointer;
}
/* ---------- Banda immagine con pastiglie scorrevoli ---------- */
.banda {
  position: relative;
  overflow: hidden;
  background: var(--notte);
  /* il fondo è generoso: le pastiglie scorrevoli stanno sul bordo
     inferiore e non devono avvicinarsi al pulsante */
  padding: 7.5rem 0 11rem;
  isolation: isolate;
}
.banda-foto { position: absolute; inset: -58px 0 0 0; z-index: -2; }
.banda-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Velo: molto denso a sinistra (dove c'è il testo), più leggero a
   destra per lasciar respirare la foto. */
.banda::before {
  content: ""; position: absolute; inset:-58px; z-index: -1;
  background: linear-gradient(100deg,
    rgba(22,29,35,.96) 0%,
    rgba(22,29,35,.92) 38%,
    rgba(22,29,35,.66) 68%,
    rgba(22,29,35,.42) 100%);
}
.banda-testo { position: relative; }
.banda-testo h2 { color: var(--bianco); max-width: 16ch; }
.banda-testo .acc { color: var(--oro); }
.banda-testo .lead { color: var(--su-scuro); max-width: 46ch; }
.banda-testo .btn { margin-top: 1.6rem; border-color: var(--bianco); box-shadow: 5px 5px 0 var(--bianco); }
.banda-testo .btn:hover { box-shadow: 2px 2px 0 var(--bianco); }
.banda-testo .btn:active { box-shadow: 0 0 0 var(--bianco); }

/* Fila di pastiglie in movimento */
.pastiglie {
  position: absolute; left: 0; right: 0; bottom: 3.4rem;
  z-index: 2; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pastiglie-track { display: flex; width: max-content; animation: scorri 46s linear infinite; will-change: transform; }
.pastiglie-gruppo { display: flex; gap: 1rem; padding-right: 1rem; }
/* Pastiglie: alternanza chiaro/scuro e angoli asimmetrici. */
.pastiglia {
  display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap;
  font-weight: 700; font-size: 1.02rem;
  padding: .78rem 1.35rem;
  border-radius: 16px 6px 16px 6px;
  border: 2.5px solid var(--notte);
  box-shadow: 4px 4px 0 rgba(0,0,0,.5);
}
.pastiglia .segno { flex: none; opacity: .95; }
.pastiglia:nth-child(odd) { background: var(--bianco); color: var(--notte); }
.pastiglia:nth-child(odd) .segno { color: var(--teal-cupo); }
.pastiglia:nth-child(even) {
  background: var(--teal-piu-cupo); color: var(--bianco);
  border-color: var(--bianco); border-radius: 6px 16px 6px 16px;
}
.pastiglia:nth-child(even) .segno { color: var(--oro); }
@keyframes scorri { to { transform: translateX(-50%); } }
.pastiglie:hover .pastiglie-track { animation-play-state: paused; }

/* ---------- Hero: foto di Verona con duotone di palette ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--notte); color: var(--su-scuro);
  /* Le misure seguono anche l'altezza della finestra: su portatili
     bassi l'hero si comprime e resta tutto sopra la piega.
     Nota sul fondo: la sezione seguente risale di 58px sopra questa
     per creare il bordo ondulato, quindi quei 58px vanno riaggiunti,
     altrimenti si mangiano lo spazio sotto i numeri. */
  padding: clamp(2.1rem, 5.2vh, 4.4rem) 0 calc(clamp(4.2rem, 8.5vh, 6.4rem) + 58px);
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 60% center;
}
/* livello 1: completamente desaturato, è la base del duotone */
.hero-foto--base { filter: grayscale(1) contrast(1.06) brightness(1.02); }
/* livello 2: quasi a colori, svelato progressivamente verso destra. */
.hero-foto--nitida {
  filter: grayscale(.34) contrast(1.03) saturate(.95);
  -webkit-mask-image: linear-gradient(100deg, transparent 34%, rgba(0,0,0,.42) 58%, rgba(0,0,0,.82) 82%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 34%, rgba(0,0,0,.42) 58%, rgba(0,0,0,.82) 82%, #000 100%);
}
/* tinta duotone: in "multiply" un colore chiaro tinge poco. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--teal-piu-cupo) 0%, var(--teal-piu-cupo) 26%,
    #4f7168 48%, #7f938c 70%, #a9b6b1 86%, #c3ccc8 100%);
  mix-blend-mode: multiply;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(97deg,
    rgba(22,29,35,.94) 0%, rgba(22,29,35,.88) 36%,
    rgba(22,29,35,.55) 66%, rgba(22,29,35,.22) 100%);
}
.hero .wrap { position: relative; }
.hero h1 {
  color: var(--bianco);
  max-width: min(24ch, 58%);
  font-size: clamp(1.95rem, min(4.6vw, 5.2vh), 3.2rem);
  margin-bottom: clamp(.6rem, 1.7vh, 1rem);
}
.hero .acc { color: var(--oro); }
.hero .lead { color: var(--su-scuro); max-width: min(52ch, 54%); margin-bottom: 0; }

.hero-valutazione {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-weight: 600; font-size: 1rem; color: var(--su-scuro);
  margin-bottom: clamp(.7rem, 2vh, 1.4rem);
}
.hero-valutazione .stelline { font-size: 1.12rem; letter-spacing: 1px; }

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2.4rem, 5.2vh, 3.4rem); }
.hero .btn { border-color: var(--bianco); box-shadow: 5px 5px 0 var(--bianco); }
.hero .btn:hover { box-shadow: 2px 2px 0 var(--bianco); }
.hero .btn:active { box-shadow: 0 0 0 var(--bianco); }
.hero .btn--vuoto { background: transparent; color: var(--bianco); }
.hero .btn--vuoto:hover { background: rgba(255,255,255,.16); color: var(--bianco); }

/* I tre numeri, dentro l'hero */
.hero-numeri {
  display: grid; grid-template-columns: repeat(3, auto);
  justify-content: start; gap: clamp(1.6rem, 3vw, 2.8rem);
  margin-top: clamp(3.2rem, 6.8vh, 5rem);
}
.hero-stat { max-width: 20ch; }

/* ---------- Numeri ---------- */
.stat-n {
  display: block; font-family: "Lora", Georgia, serif; font-weight: 600;
  font-size: clamp(1.7rem, min(2.9vw, 3.4vh), 2.5rem); line-height: 1.05;
  color: var(--oro); font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* "1 giorno" resta su una sola riga */
}
.stat-l { display: block; margin-top: .4rem; font-size: .97rem; line-height: 1.4; color: var(--su-scuro-soft); }

/* ---------- Griglie / card ---------- */
.grid { display: grid; gap: 1.6rem; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--bianco); border: 1.5px solid var(--linea); border-radius: var(--radius); padding: 2rem; transition: transform .2s, box-shadow .2s, border-color .2s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(22,29,35,.13); border-color: var(--teal); }
.card h3 { margin-top: 1rem; }
.card .icona { width: 54px; height: 54px; border-radius: 16px; background: var(--nebbia-2); color: var(--teal-piu-cupo); display: flex; align-items: center; justify-content: center; }
.card ul { margin: 0; padding-left: 1.2rem; }
.card li { margin-bottom: .4rem; }
.section--scuro .card { background: var(--notte-soft); border-color: #313d46; }
.section--scuro .card:hover { border-color: var(--oro); }
.section--scuro .card .icona { background: rgba(94,141,131,.22); color: var(--oro); }
.section--scuro .card p { color: var(--su-scuro-soft); }

.spunte { list-style: none; margin: 0; padding: 0; }
.spunte li { padding-left: 2rem; position: relative; margin-bottom: .8rem; font-size: 1.05rem; }
.spunte li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--teal-cupo); }
.section--scuro .spunte li::before, .vs-noi .spunte li::before { color: var(--oro); }

/* Rimando compatto ad altra pagina */
.rimando {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  background: var(--bianco); border: 2.5px solid var(--notte);
  border-radius: 20px; box-shadow: 7px 7px 0 var(--teal);
  padding: 1.9rem 2.1rem; margin-top: 3rem;
}
.rimando h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.rimando p { margin: 0; color: var(--salvia); max-width: 62ch; }
.rimando .btn { flex: none; }

/* ---------- Sezione a due colonne "giocosa" ---------- */
.duo-gioco {
  display: grid; grid-template-columns: 1fr 1.02fr;
  gap: clamp(2rem, 4.5vw, 4rem); align-items: center;
}
.duo-media { position: relative; padding-bottom: 3.2rem; }
.foto-blob {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(10px 12px 0 var(--teal));
}
.sintesi {
  position: absolute; left: -8%; bottom: 0; right: 26%;
  background: var(--bianco); color: var(--notte);
  border: 2.5px solid var(--notte); border-radius: 20px;
  box-shadow: 6px 6px 0 var(--notte);
  padding: 1.15rem 1.3rem;
  font-size: .92rem; line-height: 1.5;
}
.sintesi p { margin: 0; }
.sintesi strong { color: var(--teal-piu-cupo); }

@media (max-width: 900px) {
  .duo-gioco { grid-template-columns: 1fr; gap: 2.2rem; }
  .duo-media { padding-bottom: 0; max-width: 520px; margin-left: auto; margin-right: auto; }
  .foto-blob { filter: drop-shadow(7px 8px 0 var(--teal)); }
  .sintesi { position: static; margin-top: 1.4rem; right: auto; left: auto; }
}

/* ---------- Persone ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.6rem; }
.persona { background: var(--bianco); border: 1.5px solid var(--linea); border-radius: var(--radius); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.persona:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(22,29,35,.13); }
.persona img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.persona-body { padding: 1.7rem 1.9rem 1.9rem; }
.persona-body .ruolo { color: var(--teal-cupo); font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Testimonianze ---------- */
.testimonianza { background: var(--bianco); border: 1.5px solid var(--linea); border-radius: var(--radius); padding: 2.2rem 1.9rem 1.9rem; display: flex; flex-direction: column; gap: 1rem; position: relative; transition: transform .2s, box-shadow .2s; }
.testimonianza:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(22,29,35,.13); }
.testimonianza::before { content: "\201C"; position: absolute; top: -.35em; left: .45rem; font-family: "Lora", Georgia, serif; font-size: 6rem; line-height: 1; color: var(--teal); opacity: .34; pointer-events: none; }
.testimonianza blockquote { margin: 0; font-size: 1.06rem; font-style: italic; position: relative; }
.testimonianza footer { font-weight: 700; color: var(--salvia); font-style: normal; }
.stelle { color: #b8930a; letter-spacing: 2px; font-size: 1.1rem; }
.section--scuro .stelle, .stelline { color: var(--oro); }

/* Testimonianze dentro una sezione scura: schede bianche, ma il testo
   va riportato al colore scuro, altrimenti eredita il chiaro. */
.section--scuro .testimonianza {
  background: var(--bianco); color: var(--notte);
  border-color: var(--bianco); box-shadow: 5px 5px 0 rgba(0,0,0,.4);
}
.section--scuro .testimonianza:hover { box-shadow: 8px 8px 0 rgba(0,0,0,.45); }
.section--scuro .testimonianza footer { color: var(--salvia); }
.section--scuro .testimonianza .stelle { color: #b8930a; }
.section--scuro .testimonianza::before { color: var(--teal); opacity: .34; }

/* ---------- Passi ---------- */
.passi { counter-reset: passo; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2rem; }
.passo { background: var(--bianco); border: 1.5px solid var(--linea); border-radius: var(--radius); padding: 2rem; position: relative; transition: transform .2s, box-shadow .2s; }
.passo:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(22,29,35,.13); }
.passo::before { counter-increment: passo; content: counter(passo, decimal-leading-zero); font-family: "Lora", Georgia, serif; font-style: italic; font-size: 2.7rem; color: var(--teal); display: block; margin-bottom: .4rem; }

/* ---------- Dove operiamo ---------- */
.zone-duo {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: clamp(2rem, 4vw, 3.4rem); align-items: start;
}
.zone-intro h2 { margin-bottom: .8rem; }
.zone-intro p { max-width: 44ch; }
.zone-nota { font-size: .98rem; color: var(--salvia); }
.zone-titolo {
  font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--salvia); margin: 0 0 .9rem;
}
.zone-titolo + .zone-griglia { margin-bottom: 2rem; }
.zone-griglia {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .7rem;
}
.zone-griglia li {
  display: flex; align-items: center; gap: .5rem;
  background: var(--bianco); border: 2px solid var(--notte);
  border-radius: 12px; padding: .62rem .8rem;
  font-weight: 600; font-size: .96rem; line-height: 1.2;
  box-shadow: 3px 3px 0 var(--linea);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.zone-griglia li:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--teal); border-color: var(--teal-cupo); }
.zone-griglia .pin { flex: none; color: var(--teal-cupo); }
@media (max-width: 900px) {
  .zone-duo { grid-template-columns: 1fr; gap: 2rem; }
  .zone-intro p { max-width: none; }
  .zone-griglia { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .zone-griglia li { transition: none; }
  .zone-griglia li:hover { transform: none; }
}

/* ---------- Confronto noi / altri ---------- */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.6rem; align-items: stretch; }
.vs-col { border-radius: var(--radius); padding: 2rem; }
.vs-col h3 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.vs-noi { background: var(--notte); color: var(--su-scuro); box-shadow: 0 22px 44px rgba(22,29,35,.3); transform: scale(1.02); }
.vs-noi h3 { color: var(--bianco); }
.vs-altri { background: var(--nebbia-2); border: 1.5px solid var(--linea); color: var(--salvia); }
.vs-altri h3 { color: var(--salvia); }
.vs-altri .spunte li::before { content: "✕"; color: #9aa8a4; }

/* ---------- Contatti ---------- */
.contatto-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.contatto-card { background: var(--bianco); border: 1.5px solid var(--linea); border-radius: var(--radius); padding: 2rem; text-align: center; transition: transform .2s, box-shadow .2s; }
.contatto-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(22,29,35,.13); }
.contatto-card .valore { display: inline-block; font-size: 1.32rem; font-weight: 700; color: var(--teal-cupo); text-decoration: none; margin-top: .4rem; word-break: break-word; }
.contatto-card .valore:hover { text-decoration: underline; }
.contatto-card p.nota { color: var(--salvia); font-size: .98rem; margin: .5rem 0 0; }
.mappa { border: 2px solid var(--notte); border-radius: var(--radius); overflow: hidden; margin-top: 2.6rem; box-shadow: 12px 14px 0 var(--teal); }
.mappa iframe { display: block; width: 100%; height: 430px; border: 0; }

/* Foto nel blob usata da sola (senza scheda sovrapposta) */
.duo-media--solo { padding-bottom: 0; }

/* Forma decorativa dietro la mappa: sporge dagli angoli senza coprire i
   comandi né il logo di Google. L'involucro ritaglia: senza, la forma
   sbordava a destra e allargava la pagina su telefono. */
.mappa-avvolgi { position: relative; overflow: hidden; padding: 3rem 0 0; margin-top: 0; }
.mappa-avvolgi .mappa { position: relative; z-index: 1; margin-top: 0; }
.forma--mappa {
  width: clamp(180px, 22vw, 320px); aspect-ratio: 1;
  right: -4vw; top: 0; color: var(--teal); opacity: .85;
}
@media (max-width: 900px) {
  .forma--mappa { width: 42vw; right: -8vw; top: .4rem; opacity: .6; }
}

/* ---------- Form ---------- */
.form { display: grid; gap: 1.2rem; max-width: 660px; }
.form label { font-weight: 700; display: block; margin-bottom: .35rem; }
/* font:inherit tiene i campi a 18px: sotto i 16px iOS ingrandisce da
   solo la pagina quando si tocca un campo. */
.form input, .form textarea, .form select { width: 100%; font: inherit; color: var(--notte); padding: .9rem 1.1rem; border: 2px solid var(--linea); border-radius: 14px; background: var(--bianco); }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--teal-cupo); outline: 3px solid rgba(94,141,131,.35); }
.form .privacy { font-size: .95rem; color: var(--salvia); display: flex; gap: .6rem; align-items: flex-start; }
.form .privacy input { width: auto; margin-top: .3rem; }
.tranello { position: absolute; left: -9999px; top: -9999px; }
.esito-modulo { padding: 1rem 1.3rem; border-radius: 14px; font-weight: 600; margin-bottom: 1.4rem; max-width: 660px; }
.esito-ok { background: #e2efeb; color: var(--teal-piu-cupo); border: 1.5px solid var(--teal); }
/* Pannello di ringraziamento mostrato al posto del modulo */
.esito-grande { padding: 1.9rem 2rem; border-width: 2.5px; box-shadow: 6px 6px 0 var(--teal); }
.esito-grande h3 { margin: 0 0 .6rem; font-size: 1.4rem; color: var(--teal-piu-cupo); }
.esito-grande p { margin: 0 0 .7rem; font-weight: 400; color: var(--notte); }
.esito-grande p:last-child { margin-bottom: 0; }
.esito-grande .esito-azioni { font-size: .98rem; color: var(--salvia); }
.esito-grande .esito-azioni a { color: var(--teal-piu-cupo); font-weight: 700; }
.esito-errore { background: #f6e6e3; color: #7d2f22; border: 1.5px solid #d9a99f; }

/* ---------- FAQ ---------- */
.faq details { background: var(--bianco); border: 1.5px solid var(--linea); border-radius: 18px; margin-bottom: 1rem; transition: border-color .2s; }
.faq details[open] { border-color: var(--teal); }
.faq summary { cursor: pointer; padding: 1.25rem 1.6rem; font-weight: 700; font-size: 1.1rem; list-style: none; position: relative; padding-right: 3.2rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%); color: var(--teal-cupo); font-size: 1.7rem; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .faq-body { padding: 0 1.6rem 1.4rem; overflow: hidden; }

/* ---------- FAQ a due colonne (home) ---------- */
.faq-duo {
  display: grid; grid-template-columns: .88fr 1.12fr;
  gap: clamp(2rem, 4vw, 3.6rem); align-items: start;
}
.faq-intro .eyebrow { max-width: 26ch; }
.faq-intro h2 { margin-bottom: .7rem; }
.faq-intro .lead { max-width: 40ch; }
.faq-altro { margin-top: 1.8rem; font-size: .98rem; color: var(--salvia); max-width: 42ch; }
.faq-elenco details:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .faq-duo { grid-template-columns: 1fr; gap: 2.2rem; }
  .faq-intro .lead, .faq-intro .eyebrow, .faq-altro { max-width: none; }
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--notte); color: var(--su-scuro); position: relative; overflow: hidden; }
.cta-band .forma--grande {
  width: 68vw; aspect-ratio: 1; left: 50%; bottom: -40vw;
  transform: translateX(-50%); color: var(--teal-piu-cupo);
}
.cta-band .forma--piccola {
  width: clamp(130px, 16vw, 260px); aspect-ratio: 1;
  left: -5vw; bottom: -6vw; color: var(--oro);
}
.cta-band .wrap { position: relative; }
.cta-band h2 { color: var(--bianco); }
.cta-band .lead { color: var(--su-scuro-soft); }
.cta-band .evidenzia { background: var(--oro); color: var(--notte); }
.cta-band .acc { color: var(--oro); }

/* ---------- Footer ---------- */
.footer { background: var(--notte); color: var(--su-scuro-soft); font-size: .98rem; overflow: hidden; }
.footer .wrap { padding-top: 4.2rem; padding-bottom: 1.4rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer h3 { color: var(--bianco); font-size: 1.15rem; }
.footer a { color: var(--su-scuro); }
.footer a:hover { color: var(--oro); }
.footer address { font-style: normal; line-height: 1.8; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .5rem; }
/* La firma grande deve stare SEMPRE dentro il contenitore, non nella
   finestra: con "vw" sbordava sugli schermi larghi, perche' il
   contenitore si ferma a 1160px mentre la finestra continua a crescere.
   Il divisore 12.9 e' il rapporto larghezza/corpo misurato su un serif
   piu' largo di Lora, quindi con margine di sicurezza. */
.megafirma {
  font-family: "Lora", Georgia, serif; font-weight: 600;
  font-size: min(calc((100vw - 3.2rem) / 12.9), 86px);
  line-height: 1.05; letter-spacing: -0.03em;
  color: rgba(94,141,131,.20);
  white-space: nowrap; text-align: center;
  margin: 3rem auto -0.4rem; user-select: none;
}
.footer-legal { border-top: 1px solid #2c3740; margin-top: 2rem; padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem; color: #8a9793; }

/* ---------- Barra chiamata mobile ---------- */
.chiama-bar { display: none; position: fixed; left: .8rem; right: .8rem; bottom: .9rem; z-index: 60; background: var(--oro); color: var(--notte); border: 2.5px solid var(--notte); border-radius: 14px; padding: .95rem 1.2rem calc(.95rem + env(safe-area-inset-bottom) * .4); text-align: center; font-size: 1.15rem; font-weight: 700; text-decoration: none; box-shadow: 4px 4px 0 var(--notte); }
.chiama-bar:hover, .chiama-bar:focus { color: var(--notte); background: #cfa50a; }

/* ============================================================
   BORDI ONDULATI FRA LE SEZIONI
   Ogni sezione risale di 58px sopra quella precedente e ritaglia il
   proprio bordo superiore con una maschera a onda: non serve conoscere
   il colore della sezione vicina, perche' l'onda scopre cio' che sta
   sotto. Quattro profili (a/b/c/d) si alternano lungo la pagina.
   Se il browser non supporta le maschere resta tutto squadrato e
   leggibile: nessuna sovrapposizione, nessun testo tagliato.
   ============================================================ */
.onda-a { --profilo: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 58' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C220,6 430,52 660,30 C900,7 1180,50 1440,24 L1440,58 L0,58 Z' fill='%23000'/%3E%3C/svg%3E"); }
.onda-b { --profilo: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 58' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C170,48 320,8 520,26 C740,46 880,6 1060,24 C1230,42 1350,12 1440,28 L1440,58 L0,58 Z' fill='%23000'/%3E%3C/svg%3E"); }
.onda-c { --profilo: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 58' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C330,4 700,52 1040,22 C1230,6 1350,28 1440,36 L1440,58 L0,58 Z' fill='%23000'/%3E%3C/svg%3E"); }
.onda-d { --profilo: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 58' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C140,46 250,12 410,28 C570,46 690,14 850,26 C1000,38 1150,10 1290,24 C1360,31 1405,36 1440,30 L1440,58 L0,58 Z' fill='%23000'/%3E%3C/svg%3E"); }

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .sez-onda {
    position: relative;
    margin-top: -58px;
    -webkit-mask-image: var(--profilo), linear-gradient(#000, #000);
    mask-image: var(--profilo), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 59px, 100% calc(100% - 58px);
    mask-size: 100% 59px, 100% calc(100% - 58px);
    -webkit-mask-position: top center, bottom center;
    mask-position: top center, bottom center;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
  }
  /* recupero lo spazio "mangiato" dal margine negativo */
  .section.sez-onda { padding-top: calc(6.6rem + 58px); }
  .banda.sez-onda { padding-top: calc(7.5rem + 58px); }
  .footer.sez-onda .wrap { padding-top: calc(4.2rem + 58px); }

  @media (max-width: 980px) {
    .banda.sez-onda { padding-top: calc(6rem + 58px); }
  }
  @media (max-width: 680px) {
    .sez-onda { margin-top: -40px;
      -webkit-mask-size: 100% 41px, 100% calc(100% - 40px);
      mask-size: 100% 41px, 100% calc(100% - 40px); }
    .section.sez-onda { padding-top: calc(4.3rem + 40px); }
    .banda.sez-onda { padding-top: calc(4.6rem + 40px); }
    .footer.sez-onda .wrap { padding-top: calc(4.2rem + 40px); }
  }
}

/* Forme applicate saltuariamente ad alcune sezioni. La sezione va in
   overflow:hidden cosi' il disco viene tagliato dal bordo. */
.con-forma { position: relative; overflow: hidden; }
.con-forma > .wrap { position: relative; z-index: 1; }
.con-forma .forma--grande {
  width: clamp(230px, 27vw, 440px); aspect-ratio: 1;
  color: var(--teal); opacity: .9;
}
.con-forma--sx .forma--grande { left: -11vw; bottom: -9vw; }
.con-forma--dx .forma--grande { right: -11vw; top: -9vw; }
.section--scuro.con-forma .forma--grande { opacity: .92; }
.section--scuro.con-forma--sx .forma--grande { left: -17vw; bottom: -14vw; }
.section--scuro.con-forma--dx .forma--grande { right: -17vw; top: -14vw; }

/* ============================================================
   FORME ORGANICHE: veri tracciati SVG, non piu' cerchi passati in un
   filtro di distorsione (che sgranava i bordi). A deformarli e' GSAP
   con MorphSVG, che interpola i nodi della curva: il contorno resta
   vettoriale e nitido a qualsiasi dimensione.
   Il movimento sta tutto in js/animazioni.js.
   ============================================================ */

/* ---------- Reveal ----------
   Nessuna transizione CSS su .reveal: le animava GSAP fotogramma per
   fotogramma e le due cose si accavallavano, da cui lo scatto. Ora
   l'unico responsabile e' GSAP. La classe "anim-pronta" evita solo il
   lampo iniziale e viene tolta appena GSAP prende il controllo. */
.anim-pronta .reveal { opacity: 0; }
.reveal.visibile { opacity: 1; transform: none; }

/* ---------- Pagine interne ---------- */
.page-hero {
  padding: 5.2rem 0 4.4rem; position: relative; overflow: hidden;
  background: var(--nebbia-2);
}
.forma { position: absolute; z-index: 0; pointer-events: none; display: block; }
.forma path { fill: currentColor; }

.page-hero .forma--grande {
  width: clamp(290px, 33vw, 540px); aspect-ratio: 1;
  right: -8vw; top: 50%; transform: translateY(-50%);
  color: var(--teal);
}
.page-hero .forma--piccola {
  width: clamp(120px, 14vw, 220px); aspect-ratio: 1;
  right: 25vw; bottom: -6vw; color: var(--notte);
}
.page-hero .wrap { position: relative; z-index: 1; }
/* la colonna di testo resta libera dalle forme (solo su schermi larghi) */
.page-hero h1, .page-hero .lead, .page-hero .hero-actions { max-width: min(62ch, 64%); }
.briciole { display: block; font-size: .92rem; color: var(--salvia); margin-bottom: 1.3rem; font-weight: 500; }
.briciole a { color: var(--salvia); }
.briciole a:hover { color: var(--teal-cupo); }

/* ---------- Prima / Dopo ---------- */
.selettore-scena { display: flex; gap: .8rem; flex-wrap: wrap; margin: 2rem 0 1.6rem; }
.scelta { font: inherit; font-weight: 700; font-size: 1.06rem; padding: .85rem 1.5rem; border-radius: 12px; cursor: pointer; background: transparent; color: var(--su-scuro); border: 2.5px solid var(--su-scuro-soft); box-shadow: 4px 4px 0 var(--su-scuro-soft); transition: transform .1s, box-shadow .1s, background .15s, border-color .15s, color .15s; }
.scelta:hover { border-color: var(--oro); color: var(--oro); box-shadow: 4px 4px 0 var(--oro); }
.scelta[aria-pressed="true"] { background: var(--oro); border-color: var(--bianco); color: var(--notte); box-shadow: 4px 4px 0 var(--bianco); transform: translate(0,0); }
.confronto-wrap { max-width: 920px; }
.confronto { position: relative; overflow: hidden; aspect-ratio: 8/5; border-radius: var(--radius); border: 2px solid #3a464f; box-shadow: 0 24px 50px rgba(0,0,0,.45); background: var(--notte-soft); --pos: 50%; }
.confronto .strato { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.confronto .strato-prima { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.maniglia { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none; z-index: 2; }
.maniglia::before { content: ""; position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; border-left: 3px solid var(--bianco); border-right: 3px solid var(--bianco); filter: drop-shadow(0 0 4px rgba(0,0,0,.5)); }
.maniglia-pomello { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: var(--oro); color: var(--notte); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 700; letter-spacing: -1px; box-shadow: 0 4px 16px rgba(0,0,0,.45); }
.tag { position: absolute; top: 1rem; z-index: 2; pointer-events: none; padding: .34rem .95rem; border-radius: 4px; font-weight: 700; font-size: 1rem; border: 2px solid var(--notte); }
.tag-prima { left: 1rem; background: var(--notte); color: var(--bianco); border-color: var(--bianco); }
.tag-dopo { right: 1rem; background: var(--oro); color: var(--notte); }
.confronto-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }
.confronto-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 64px; height: 100%; }
.confronto-input::-moz-range-thumb { width: 64px; height: 100%; border: 0; background: transparent; }
.confronto:has(.confronto-input:focus-visible) { outline: 3px solid var(--oro); outline-offset: 3px; }
.confronto-nota { margin-top: 1.3rem; font-size: 1.05rem; max-width: 66ch; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .pastiglie-track { animation: none; }
  .card, .persona, .testimonianza, .passo, .contatto-card, .btn { transition: none; }
  .card:hover, .persona:hover, .testimonianza:hover, .passo:hover, .contatto-card:hover { transform: none; }
  .btn:hover, .btn:active, .scelta:hover { transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Marchio + cinque voci + pulsante richiedono circa 1060px reali.
   Sotto questa soglia si passa al menu' a scomparsa, invece di
   comprimere le voci o mandarle a capo. */
@media (max-width: 1130px) {
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--bianco); border-bottom: 1.5px solid var(--linea);
    padding: .8rem; gap: .3rem; box-shadow: 0 20px 40px rgba(22,29,35,.18);
    flex: none; margin-left: 0; min-width: 0;
  }
  .nav.aperto { display: flex; }
  .nav a { padding: .95rem 1.2rem; font-size: 1.1rem; border-radius: 12px; white-space: normal; }
  .nav .btn { margin-left: 0; margin-top: .5rem; font-size: 1.05rem; padding: .85rem 1.4rem; }
  .nav-toggle { display: block; }
}

@media (max-width: 1040px) {
  .grid--4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  /* Il velo resta ORIZZONTALE anche in verticale: si stringe verso
     sinistra, cosi' il soggetto della foto (a destra) resta visibile. */
  .banda { padding: 6rem 0 10rem; }
  .banda::before { background: linear-gradient(97deg, rgba(22,29,35,.97) 0%, rgba(22,29,35,.94) 44%, rgba(22,29,35,.72) 72%, rgba(22,29,35,.42) 100%); }
  .banda-foto img { object-position: 100% center; }
  .banda-testo h2 { max-width: 15ch; }
  .banda-testo .lead { max-width: 32ch; }
  /* Le percentuali servono solo su schermi larghi, dove il testo deve
     stare a sinistra della foto. In verticale la colonna e' unica:
     senza questo azzeramento il titolo restava in una colonna strettissima. */
  .hero h1, .hero .lead { max-width: none; }
  .hero-foto { object-position: 100% center; }
  .hero::before { background: linear-gradient(97deg, rgba(22,29,35,.96) 0%, rgba(22,29,35,.93) 46%, rgba(22,29,35,.70) 74%, rgba(22,29,35,.32) 100%); }
  .page-hero h1, .page-hero .lead, .page-hero .hero-actions { max-width: none; }
  .grid--3, .passi, .contatto-cards { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .section { padding: 4.3rem 0; }
  /* su telefono le forme restano solo come tocco di colore ai bordi */
  .page-hero .forma--grande { width: 64vw; right: -26vw; top: auto; bottom: -18vw; opacity: .45; }
  .page-hero .forma--piccola { display: none; }
  .cta-band .forma--piccola { width: 120px; }
  .con-forma .forma--grande { width: 56vw; opacity: .38; }
  .hero { padding: 3.2rem 0 calc(3.4rem + 40px); }
  /* il testo del pulsante si adatta alla larghezza invece di andare a capo */
  .hero-actions { gap: .8rem; }
  .hero-actions .btn { flex: 1 1 100%; white-space: nowrap; font-size: clamp(.86rem, 4vw, 1.06rem); padding: .95rem 1rem; }
  .hero-foto { object-position: 100% center; }
  .hero-numeri { grid-template-columns: 1fr; gap: 1.3rem; margin-top: 2.6rem; padding-top: 1.7rem; }
  .hero-stat { max-width: none; display: flex; align-items: baseline; gap: .8rem; }
  .hero-stat .stat-n { font-size: 2rem; }
  .hero-stat .stat-l { margin-top: 0; }
  .banda { padding: 4.6rem 0 8.6rem; }
  .banda-foto, .banda::before { inset: -40px 0 0 0; }
  .banda::before { background: linear-gradient(93deg, rgba(22,29,35,.97) 0%, rgba(22,29,35,.95) 50%, rgba(22,29,35,.74) 74%, rgba(22,29,35,.30) 100%); }
  .banda-foto img { object-position: 100% center; }
  .banda-testo h2 { max-width: 13ch; }
  .banda-testo .lead { max-width: 27ch; font-size: 1.08rem; }
  .pastiglie { bottom: 2.4rem; }
  .pastiglia { font-size: .95rem; padding: .7rem 1.1rem; border-width: 2px; }
  .pastiglie-track { animation-duration: 34s; }
  h1 { font-size: clamp(2.1rem, 9vw, 2.7rem); }
  .grid--4, .grid--3, .grid--2, .passi, .contatto-cards, .duo, .footer-grid, .vs { grid-template-columns: 1fr; }
  .rimando { flex-direction: column; align-items: flex-start; gap: 1.4rem; padding: 1.6rem; }
  .vs-noi { transform: none; }
  .topbar { font-size: .88rem; }
  .topbar .wrap { justify-content: center; text-align: center; gap: .3rem; }
  .chiama-bar { display: block; }
  body { padding-bottom: 4.6rem; }
  .maniglia-pomello { width: 52px; height: 52px; }
  .selettore-scena { gap: .6rem; }
  .scelta { flex: 1 1 auto; text-align: center; padding: .85rem 1rem; font-size: .98rem; }
  .mappa iframe { height: 340px; }
  .mappa { box-shadow: 7px 8px 0 var(--teal); }
  .faq summary { padding: 1.1rem 1.2rem; padding-right: 3rem; font-size: 1.02rem; }
  .faq .faq-body { padding: 0 1.2rem 1.2rem; }
  .sintesi { font-size: .95rem; }
}

/* ---------- Schede persone in versione breve (home) ----------
   Stesse schede della pagina Chi siamo, ma con foto quadrata e testo
   piu' compatto: in home devono presentare, non raccontare. */
.persona--breve img { aspect-ratio: 1 / 1; }
.persona--breve .persona-body { padding: 1.3rem 1.5rem 1.6rem; }
.persona--breve h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.persona--breve p:last-child { margin-bottom: 0; font-size: .98rem; }
@media (max-width: 680px) {
  .persona--breve img { aspect-ratio: 16 / 10; }
}

/* ============================================================
   TESTATA SU SCHERMI STRETTI
   Il marchio non poteva rimpicciolire (flex:none + nowrap su due righe
   di testo): sommato al pulsante Menu superava la larghezza del
   telefono e spingeva l'intera pagina fuori, da cui la banda bianca a
   destra. Qui si riduce il marchio e si toglie la riga descrittiva,
   che da sola era piu' larga del nome dello studio.
   ============================================================ */
@media (max-width: 620px) {
  .header .wrap { display: flex; align-items: center; justify-content: space-between; gap: clamp(.5rem, 2vw, 1.4rem); padding-top: .85rem; padding-bottom: .85rem; }


  .nav-toggle { padding: .5rem .55rem; font-size: clamp(.72rem, 2.4vw, .92rem);
  padding: .5rem clamp(.5rem, 1.7vw, .95rem); }
  .zone-griglia { grid-template-columns: 1fr; }
  .chiama-bar { font-size: 1.05rem; }
}

@media (max-width: 400px) {
  .zone-griglia { grid-template-columns: 1fr; }
  .chiama-bar { font-size: 1.05rem; }
}

/* ---------- Aggiustamenti per la versione con GSAP ---------- */
/* Il nastro delle pastiglie e' pilotato da GSAP: l'animazione CSS
   verrebbe sovrascritta, quindi la si disattiva. */
.gsap-attivo .pastiglie-track { animation: none; }
/* Le forme ricevono uno spostamento verticale legato allo scorrimento,
   sommato al loro movimento organico. */
.forma { translate: 0 var(--spostamento, 0px); }