/* Investimento di Valore SCF — home e pagine del sito
   Design: Design/kit/design-investimento-di-valore-scf/home-approvata.png (ChatGPT), seguito fedele e rifinito.
   Colori misurati sul design con confronta-design.py e campionati sulle sezioni ad alta risoluzione (06-sezioni/).
   Font: Figtree (variabile 300-900, OFL), servito dal sito. */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colori misurati sul design */
  --blu-notte: #04143C;      /* titoli, menu, testi forti */
  --testo: #4C5C80;          /* testi correnti */
  --testo-tenue: #647498;    /* sottotitoli e note */
  --verde: #00B077;          /* azione: pulsanti, parole in evidenza, sottolineature */
  --azzurro: #F4FBFE;        /* fascia dei principi */
  --azzurro-scheda: #F0FBFE; /* scheda Privati */
  --menta: #EDFAF7;          /* la società */
  --menta-scheda: #EFFAF5;   /* scheda Aziende e istituzioni */
  --menta-contatti: #EBFAF5; /* il primo passo */
  --menta-riquadro: #F2FBFA; /* riquadro «Sei un consulente finanziario?» */
  --grigio-scheda: #F8FAFB;  /* schede del blog */
  --linea: #D4D8E4;          /* separatori e linea del metodo */
  --bordo: #E6EBF0;          /* bordi di schede e campi */
  --bianco: #FFFFFF;

  /* stati (non sono colori del design: derivati dal verde) */
  --verde-hover: #009A68;
  --verde-focus: rgba(0, 176, 119, .35);

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --contenitore: 1240px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-dx: max(20px, env(safe-area-inset-right, 0px));
  --raggio: 6px;
  --altezza-testata: 96px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entrate, uscite, tocco */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* cose che si spostano sullo schermo */
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* lo scorrimento morbido solo per i link alle sezioni (un link ha il focus), non per gli scorrimenti degli script */
html:focus-within { scroll-behavior: smooth; }
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--testo);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { font: inherit; color: inherit; touch-action: manipulation; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--blu-notte); font-weight: 560; letter-spacing: -.02em; line-height: 1.08; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
.occhiello, .principio p, .societa__testo p, .lavora p, .recensione__testo p, .intro-sezione, .contatti__lead, .hero__lead { text-wrap: balance; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--verde-focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--menta-scheda); color: var(--blu-notte); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--blu-notte); color: var(--bianco); padding: 10px 16px; border-radius: var(--raggio);
}
.salta:focus { top: 12px; }

.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + 40px);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-dx);
}

section[id], [id].ancora { scroll-margin-top: calc(var(--altezza-testata) + 12px); }

/* ── pezzi comuni ─────────────────────────────────────────────────────── */
.occhiello {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo);
  margin-bottom: 14px;
}
.titolo-sezione {
  font-size: clamp(2rem, 1rem + 2.75vw, 3.5rem);
  line-height: 1.06;
}
.intro-sezione {
  font-size: 17px;
  line-height: 1.6;
  color: var(--testo);
  max-width: 440px;
}

.testa-sezione {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 32px 64px;
  align-items: start;
  margin-bottom: 38px;
}
.testa-sezione .intro-sezione { margin-top: 38px; }

.freccia {
  width: 18px; height: 18px; flex: 0 0 auto;
  transition: transform .25s var(--ease-out);
}
.freccia--bianca { filter: brightness(0) invert(1); }

/* pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 48px;
  padding: 14px 30px;
  border-radius: var(--raggio);
  border: 1.5px solid transparent;
  font-size: 17px; font-weight: 520; line-height: 1.2;
  cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--ease-out), box-shadow .2s ease;
}
.btn:active { transform: scale(.97); }
.btn--pieno { background: var(--verde); color: var(--bianco); box-shadow: 0 6px 18px -8px rgba(0, 176, 119, .55); }
.btn--bordo { background: var(--bianco); color: var(--blu-notte); border-color: var(--verde); }
@media (hover: hover) and (pointer: fine) {
  .btn--pieno:hover { background: var(--verde-hover); }
  .btn--bordo:hover { background: var(--menta-scheda); }
  .btn:hover .freccia, .link-freccia:hover .freccia { transform: translateX(4px); }
}

/* link con la sottolineatura verde, come nel design */
.link-freccia {
  display: inline-flex; align-items: center; gap: 14px;
  padding-bottom: 6px;
  color: var(--blu-notte);
  font-size: 17px; font-weight: 520;
  background-image: linear-gradient(var(--verde), var(--verde));
  background-size: 100% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  user-select: none; -webkit-user-select: none;
  transition: color .2s ease, background-size .3s var(--ease-out);
}
.link-freccia:active { color: var(--verde-hover); }
@media (hover: hover) and (pointer: fine) {
  .link-freccia:hover { color: var(--verde-hover); }
}

/* ── testata ──────────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--bianco);
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.testata.scorsa { border-bottom-color: var(--bordo); box-shadow: 0 8px 24px -18px rgba(4, 20, 60, .35); }
.testata__riga {
  height: var(--altezza-testata);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { display: block; flex: 0 0 auto; }
.logo img { width: 290px; height: auto; }
/* cinque voci (2 Step: + Trasparenza) su una riga col logo e «Parliamone»: fra 1200 e 1280 px si stringono gli spazi, mai il testo */
.menu { display: flex; align-items: center; gap: clamp(36px, 10vw - 84px, 44px); }
.menu__voci { display: flex; align-items: center; gap: clamp(36px, 10vw - 84px, 44px); }
.menu__voci a {
  position: relative;
  font-size: 16px; font-weight: 500; color: var(--blu-notte);
  padding: 10px 0;
  white-space: nowrap;
  user-select: none; -webkit-user-select: none;
}
.menu__voci a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px;
  background: var(--verde); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .menu__voci a:hover::after { transform: scaleX(1); }
}
.menu__voci a:active { color: var(--verde-hover); }
.menu__contatti { display: none; }
.menu__voci .solo-telefono { display: none; }
.link-testo { color: var(--blu-notte); font-weight: 520; text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color .2s ease; }
.link-testo:active { color: var(--verde-hover); }
@media (hover: hover) and (pointer: fine) { .link-testo:hover { color: var(--verde-hover); } }
.testata .btn { padding: 12px 28px; }

.apri-menu {
  display: none;
  width: 48px; height: 48px; margin-right: -10px;
  border: 0; background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
.apri-menu span, .apri-menu span::before, .apri-menu span::after {
  display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--blu-notte);
  transition: transform .25s var(--ease-out), opacity .2s ease;
}
.apri-menu span { position: relative; }
.apri-menu span::before, .apri-menu span::after { content: ""; position: absolute; left: 0; }
.apri-menu span::before { top: -7px; }
.apri-menu span::after { top: 7px; }
.apri-menu[aria-expanded="true"] span { background: transparent; }
.apri-menu[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.apri-menu[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--azzurro);
  isolation: isolate;
}
.hero__sfondo {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(246, 251, 254, .9) 0%, rgba(246, 251, 254, .78) 34%, rgba(246, 251, 254, .25) 58%, rgba(246, 251, 254, 0) 72%),
    linear-gradient(180deg, rgba(246, 251, 254, .35) 0%, rgba(246, 251, 254, 0) 30%);
}
.hero__motivo {
  position: absolute; z-index: -1;
  right: calc(var(--margine, 20px) - 420px); bottom: 0;
  height: 100%; width: auto; max-width: none;
  pointer-events: none;
}
.hero__riga {
  position: relative;
  min-height: 680px;
  display: flex; align-items: center;
}
.hero__testo { position: relative; z-index: 2; max-width: 780px; padding: 78px 0 70px; }
.hero h1 {
  font-size: clamp(2.6rem, 1rem + 5.4vw, 5.9rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 580;
  margin-bottom: 26px;
}
.hero h1 .verde { color: var(--verde); display: block; }
.hero h1 .riga { display: block; }
.hero__lead {
  font-size: 22px; line-height: 1.55; color: var(--testo);
  max-width: 580px; margin-bottom: 40px;
}
.hero__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px; }
.hero__azioni .btn { padding: 17px 32px; font-size: 18px; }

/* il margine del contenuto, per mettere il motivo del marchio dove il design mette il ritratto (2 Step: il ritratto è tolto) */
.hero { --margine: max(20px, calc((100% - var(--contenitore)) / 2)); }

/* ── principi ─────────────────────────────────────────────────────────── */
.principi { background: var(--azzurro); border-top: 1px solid var(--bordo); }
.principi__griglia {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 44px 0 40px;
}
.principio {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 6px 28px;
}
.principio:first-child { padding-left: 0; }
.principio:last-child { padding-right: 0; }
.principio + .principio { border-left: 1px solid var(--linea); }
.principio img { width: 72px; height: 72px; flex: 0 0 auto; margin: -6px 0 0 -7px; }
.principio h2 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin: 4px 0 8px; }
/* il numero dei tre punti, come nella landing del cliente (01 · 02 · 03) */
.principio__numero { display: block; font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: .18em; color: var(--verde-hover); margin-top: 2px; }
.principio p { font-size: 17px; line-height: 1.5; color: var(--testo-tenue); }

/* ── a chi ci rivolgiamo ──────────────────────────────────────────────── */
.rivolgiamo { padding: 84px 0 32px; }
.schede-servizi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.scheda-servizio {
  display: flex; flex-direction: column;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--azzurro-scheda);
  border: 1px solid #E3F1F6;
  transition: box-shadow .3s ease, transform .3s var(--ease-out);
}
.scheda-servizio--aziende { background: var(--menta-scheda); border-color: #DFF0E8; }
.scheda-servizio__foto { aspect-ratio: 3 / 1; width: 100%; object-fit: cover; }
.scheda-servizio__corpo { display: flex; flex-direction: column; flex: 1; padding: 30px 30px 34px; }
.scheda-servizio__nome { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.scheda-servizio__nome img { width: 64px; height: 64px; margin: -6px 0 -6px -6px; }
.scheda-servizio__nome h3 { font-size: 30px; font-weight: 520; letter-spacing: -.015em; }
.scheda-servizio h4 {
  margin: 0 0 14px;
  font-size: 23px; line-height: 1.3; font-weight: 600; color: var(--blu-notte); letter-spacing: -.01em;
  max-width: 380px;
}
.scheda-servizio p { font-size: 18px; line-height: 1.6; color: var(--testo); max-width: 470px; }
.scheda-servizio p + p { margin-top: 10px; }
.scheda-servizio .link-freccia { margin-top: auto; align-self: flex-start; }
.scheda-servizio__testi { margin-bottom: 30px; }
@media (hover: hover) and (pointer: fine) {
  .scheda-servizio:hover { box-shadow: 0 22px 44px -30px rgba(4, 20, 60, .35); }
}

/* ── metodo ───────────────────────────────────────────────────────────── */
.metodo { padding: 64px 0 84px; }
.passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.passo__cerchio { display: flex; align-items: center; gap: 24px; margin-bottom: 26px; }
.passo__cerchio img { width: 76px; height: 76px; flex: 0 0 auto; margin-left: -8px; }
.passo__cerchio::after { content: ""; flex: 1; height: 1px; background: var(--linea); margin-right: 8px; }
.passo:last-child .passo__cerchio::after { display: none; }
.passo h3 { font-size: 22px; font-weight: 560; letter-spacing: -.01em; margin-bottom: 8px; }
.passo p { font-size: 17px; line-height: 1.5; color: var(--testo-tenue); max-width: 230px; }

/* ── la società ───────────────────────────────────────────────────────── */
.societa {
  position: relative;
  background: linear-gradient(180deg, var(--menta) 0%, var(--menta-scheda) 100%);
  overflow: hidden;
  isolation: isolate;
}
.societa__foto {
  position: absolute; z-index: -1;
  top: 0; right: 0; bottom: 0;
  width: 66%; height: 100%;
  object-fit: cover; object-position: 70% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 38%);
}
.societa__testo { max-width: 560px; padding: 64px 0 52px; }
.societa h2 { margin-bottom: 22px; }
.societa__testo p { font-size: 17px; line-height: 1.6; margin-bottom: 26px; max-width: 540px; }
.lavora {
  display: flex; align-items: center; gap: 28px;
  margin-bottom: 26px;
  padding: 22px 34px;
  background: var(--menta-riquadro);
  border: 1px solid #DCEFEA;
  border-radius: var(--raggio);
  box-shadow: 0 14px 34px -28px rgba(4, 20, 60, .3);
}
.lavora > img { width: 68px; height: 68px; flex: 0 0 auto; margin: -6px 0 -6px -7px; }
.lavora__testo { flex: 1; }
.lavora h3 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.lavora p { font-size: 17px; color: var(--testo); }
.lavora .btn { padding: 12px 26px; }

/* ── blog ─────────────────────────────────────────────────────────────── */
.blog { padding: 76px 0 32px; }
.testa-sezione--link { align-items: end; grid-template-columns: minmax(0, 1fr) auto; }
.schede-blog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.scheda-blog {
  display: flex; flex-direction: column;
  background: var(--grigio-scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.scheda-blog > img { aspect-ratio: 2.92 / 1; width: 100%; object-fit: cover; }
.scheda-blog__corpo { padding: 24px 24px 26px; }
.scheda-blog h3 { font-size: 21px; font-weight: 520; letter-spacing: -.01em; margin-bottom: 14px; }
@media (hover: hover) and (pointer: fine) {
  .scheda-blog:hover { box-shadow: 0 22px 44px -30px rgba(4, 20, 60, .35); }
}

/* ── le recensioni dei clienti (Google, 2 Step) ───────────────────────────
   Un nastro di schede che scorre da solo e non si ferma mai (16 § 2-quinquies): contenuto doppio, translate3d(-50%),
   bordi sfumati; niente pausa all'hover, niente frecce. Con «riduci animazioni» rallenta di 8 volte. Stelle e testi
   serviti dal sito: nessun widget e nessuna chiamata a Google. */
.esperienze { padding: 44px 0 72px; }
.esperienze .testa-sezione { margin-bottom: 30px; }

.stelle {
  --stella: 18px;
  display: block; flex: 0 0 auto;
  width: calc(var(--stella) * 5); height: var(--stella);
  background: var(--verde);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.83 5.9 6.47.8-4.76 4.47 1.2 6.43L12 17.06 6.26 20.2l1.2-6.43L2.7 9.3l6.47-.8z'/%3E%3C/svg%3E") 0 0 / var(--stella) var(--stella) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.83 5.9 6.47.8-4.76 4.47 1.2 6.43L12 17.06 6.26 20.2l1.2-6.43L2.7 9.3l6.47-.8z'/%3E%3C/svg%3E") 0 0 / var(--stella) var(--stella) repeat-x;
}
.stelle--grandi { --stella: 22px; }
.voto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 20px; font-size: 17px; line-height: 1.4; color: var(--testo); }
.voto strong { color: var(--blu-notte); font-weight: 600; }

.nastro {
  --durata: 60s;
  position: relative;
  max-width: 1600px;
  margin-inline: auto;
  overflow: hidden;
  padding: 4px 0 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.nastro__pista {
  display: flex; align-items: stretch;
  width: max-content;
  margin: 0; padding: 0;
  animation: nastro-scorre var(--durata) linear infinite;
  will-change: transform;
}
/* lo spazio fra le schede è un margine, non un gap: così il -50% del giro torna esatto */
.nastro__pista > .recensione { flex: 0 0 auto; width: 440px; margin-right: 22px; }
@keyframes nastro-scorre { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* la scheda della recensione: quella del blog del kit (grigio, bordo, raggio), con le stelle verdi */
.recensione {
  display: flex; flex-direction: column; gap: 16px;
  padding: 26px 28px 22px;
  background: var(--grigio-scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: 0 18px 36px -30px rgba(4, 20, 60, .35);
}
.recensione__testo { margin: 0; flex: 1; }
.recensione__testo p { font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--blu-notte); letter-spacing: -.003em; }
.recensione__autore {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--bordo);
  font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--blu-notte);
}
.recensione__autore span { font-size: 14px; font-weight: 500; color: var(--testo-tenue); letter-spacing: .02em; }

.recensioni__piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.recensioni__piede .avvertenza { margin-top: 0; }

.nota-blog { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--testo-tenue); }
.avvertenza {
  margin-top: 26px;
  padding-left: 14px;
  border-left: 2px solid var(--verde);
  font-size: 15px; line-height: 1.5; color: var(--testo-tenue);
}

/* ── il primo passo (contatti) ────────────────────────────────────────── */
.contatti {
  position: relative;
  background: var(--menta-contatti) url("/assets/img/sfondo-contatti.webp") 50% 50% / cover no-repeat;
}
.contatti__griglia {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 570px);
  gap: 48px 64px; align-items: start;
  padding-top: 26px; padding-bottom: 26px;
}
.contatti__testo { padding-top: 18px; }
.contatti h2 { margin-bottom: 18px; }
.contatti__lead { font-size: 20px; line-height: 1.45; color: var(--testo); margin-bottom: 24px; max-width: 460px; }
.recapiti { display: grid; gap: 14px; }
.contatti__domande { margin-top: 26px; }
.recapiti a {
  display: inline-flex; align-items: center; gap: 22px;
  font-size: 21px; font-weight: 600; color: var(--blu-notte);
  min-height: 44px;
}
.recapiti a > img { width: 46px; height: 46px; flex: 0 0 auto; margin: -2px 0 -2px -5px; }
.recapiti .sottolineato {
  display: inline-flex; align-items: center; gap: 14px;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--verde), var(--verde));
  background-size: 100% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .recapiti a:hover { color: var(--verde-hover); }
  .recapiti a:hover .freccia { transform: translateX(4px); }
}

.modulo {
  background: var(--bianco);
  border-radius: var(--raggio);
  padding: 16px 22px 20px;
  box-shadow: 0 24px 50px -36px rgba(4, 20, 60, .35);
}
.campo { margin-bottom: 8px; }
.campo input, .campo textarea {
  width: 100%;
  font: inherit; font-size: 16px; color: var(--blu-notte);
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 4px;
  padding: 9px 14px;
  min-height: 44px;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none; appearance: none;
}
.campo textarea { min-height: 72px; resize: vertical; display: block; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--testo-tenue); opacity: 1; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-focus); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #C2413A; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.trappola input, .consenso input { font-size: 16px; }

.consenso {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 12px;
  font-size: 16px; color: var(--blu-notte);
  cursor: pointer;
  min-height: 32px;
}
.consenso input {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin: 0; flex: 0 0 auto;
  background: url("/assets/img/icone/checkbox-vuoto.webp") center / 26px 26px no-repeat;
  cursor: pointer;
}
.consenso input:checked { background-image: url("/assets/img/icone/checkbox-selezionato.webp"); }
.consenso input:focus-visible { outline: 3px solid var(--verde-focus); outline-offset: 2px; border-radius: 3px; }
.consenso input[aria-invalid="true"] { outline: 2px solid #C2413A; outline-offset: 2px; border-radius: 3px; }
.consenso a { text-decoration: underline; text-decoration-color: var(--verde); text-underline-offset: 3px; }
.modulo .btn { width: 100%; min-height: 54px; font-size: 18px; }
.modulo__esito { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--blu-notte); }
.modulo__esito:empty { display: none; }
.modulo__esito a { text-decoration: underline; text-decoration-color: var(--verde); text-underline-offset: 3px; }
.modulo__esito.errore { color: #A8322C; }
.campo__errore { margin: 5px 2px 0; font-size: 14px; line-height: 1.4; color: #A8322C; }
.modulo__esito--ok { margin: 0; padding: 22px 6px; font-size: 19px; line-height: 1.5; font-weight: 520; color: var(--blu-notte); outline: none; }
.modulo__legale { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--testo-tenue); }
.modulo__legale a { text-decoration: underline; text-underline-offset: 2px; }

/* ── piede ────────────────────────────────────────────────────────────── */
.piede { background: var(--bianco); padding: 18px 0 14px; border-top: 1px solid var(--bordo); }
.piede__riga1 {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bordo);
}
.piede__logo img { width: 200px; height: auto; }
.piede__informative { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.piede__informative li + li { border-left: 1px solid var(--linea); }
.piede__informative a {
  display: inline-block; padding: 4px 13px;
  font-size: 13.5px; color: var(--testo);
  transition: color .2s ease;
}
.piede__informative li:last-child a { padding-right: 0; }
.piede__riga2 {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px 36px;
  padding-top: 12px;
  font-size: 13px; line-height: 1.5; color: var(--testo);
}
.piede__riga2 strong { color: var(--blu-notte); font-weight: 600; }
.piede__riga2 a { text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 2px; }
.piede__ocf p + p { margin-top: 4px; }
.piede__marchi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.piede__marchi > img { height: 34px; width: auto; }
.piede__marchio-scuro { display: inline-flex; align-items: center; height: 34px; padding: 0 9px; border-radius: 6px; background: var(--blu-notte); }
.piede__marchio-scuro img { height: 21px; width: auto; }
.piede__lei { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--testo-tenue); }
.piede__lei img { height: 38px; width: auto; }
.piede__riga3 {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 32px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--bordo);
  font-size: 12.5px; line-height: 1.5; color: var(--testo-tenue);
}
.piede__avvertenza { flex: 1 1 520px; max-width: 760px; margin: 0; }
.piede__fondo { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.piede__legali { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 14px; }
.piede__legali a { display: inline-flex; align-items: center; min-height: 26px; color: var(--blu-notte); font-weight: 520; transition: color .2s ease; }
.credit { margin: 0; }
.credit a { color: var(--blu-notte); font-weight: 560; }
@media (hover: hover) and (pointer: fine) {
  .piede__informative a:hover, .piede__legali a:hover { color: var(--verde-hover); }
}

/* ── pagine legali e 404 ──────────────────────────────────────────────── */
.pagina-legale { padding: 64px 0 96px; background: linear-gradient(180deg, var(--azzurro) 0, var(--bianco) 320px); }
.legale { max-width: 820px; }
.legale h1 { font-size: clamp(2rem, 1.3rem + 2vw, 2.9rem); margin-bottom: 12px; }
.legale h2 { font-size: 24px; margin: 40px 0 12px; letter-spacing: -.01em; }
.legale h3 { font-size: 19px; margin: 28px 0 10px; }
.legale p, .legale li { font-size: 17px; line-height: 1.65; }
.legale p { margin: 0 0 14px; }
.legale ul, .legale ol { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legale li { margin-bottom: 6px; }
.legale a { color: var(--blu-notte); text-decoration: underline; text-decoration-color: var(--verde); text-underline-offset: 3px; word-break: break-word; }
.legale table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: 15px; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--bordo); }
.legale th { color: var(--blu-notte); font-weight: 600; background: var(--azzurro); }

.pagina-404 { padding: 110px 0 130px; background: linear-gradient(180deg, var(--azzurro) 0, var(--bianco) 100%); }
.pagina-404 h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.6rem); margin: 0 0 18px; }
.pagina-404 p { font-size: 19px; max-width: 560px; margin-bottom: 32px; }
.pagina-404 .azioni { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }

/* ── tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .menu, .menu__voci { gap: clamp(18px, 2vw, 22px); }
  .logo img { width: 200px; }
  .testata .btn { padding: 12px 18px; }
  .hero__testo { max-width: 640px; }
  .hero h1 { font-size: clamp(2.6rem, 1rem + 4.4vw, 4.6rem); }
  .hero__lead { font-size: 20px; max-width: 540px; }
  .hero__azioni { flex-direction: column; align-items: flex-start; }
  /* la home, senza il ritratto: i due pulsanti tornano in riga e il velo chiaro copre tutto il testo */
  .hero:not(.hero--pagina) .hero__azioni { flex-direction: row; align-items: center; }
  .hero:not(.hero--pagina)::before {
    background:
      linear-gradient(90deg, rgba(246, 251, 254, .92) 0%, rgba(246, 251, 254, .82) 42%, rgba(246, 251, 254, .32) 64%, rgba(246, 251, 254, 0) 80%),
      linear-gradient(180deg, rgba(246, 251, 254, .35) 0%, rgba(246, 251, 254, 0) 30%);
  }
  .principio { padding: 6px 24px; gap: 16px; }
}

@media (max-width: 999px) {
  :root { --altezza-testata: 72px; }
  .logo img { width: 200px; }
  .apri-menu { display: inline-flex; }
  .menu {
    position: fixed; left: 0; right: 0;
    top: calc(var(--altezza-testata) + env(safe-area-inset-top, 0px));
    height: calc(100dvh - var(--altezza-testata) - env(safe-area-inset-top, 0px));
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 28px;
    padding: 28px var(--gutter-dx) calc(32px + env(safe-area-inset-bottom, 0px)) var(--gutter);
    background: var(--bianco);
    border-top: 1px solid var(--bordo);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .25s var(--ease-out), visibility 0s linear .25s;
  }
  .menu.aperto { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s var(--ease-out), visibility 0s; }
  .menu__voci { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__voci .solo-telefono { display: list-item; }
  .menu__voci a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 21px; font-weight: 520;
    border-bottom: 1px solid var(--bordo);
  }
  .menu__voci a::after { display: none; }
  .menu .btn { width: 100%; min-height: 54px; }
  .menu__contatti { display: grid; gap: 6px; font-size: 16px; color: var(--testo); }
  .menu__contatti a { color: var(--blu-notte); font-weight: 520; min-height: 40px; display: inline-flex; align-items: center; }

  .testa-sezione { grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }
  .testa-sezione .intro-sezione { margin-top: 0; }
  .testa-sezione--link { grid-template-columns: 1fr; }
  .testa-sezione--link .link-freccia { justify-self: start; }

  /* hero impilata: testo, poi il panorama col motivo del marchio */
  .hero { background: linear-gradient(180deg, var(--azzurro) 0%, #EEF6FB 100%); }
  .hero::before { display: none; }
  .hero__riga { min-height: 0; display: block; }
  .hero__testo { max-width: 640px; padding: 48px 0 36px; }
  .hero__azioni { flex-direction: row; align-items: center; }
  .hero__media {
    position: relative; isolation: isolate;
    height: clamp(340px, 62vw, 470px);
    overflow: hidden;
  }
  .hero__sfondo { z-index: -2; object-position: 30% 60%; }
  .hero__media::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, #EEF6FB 0%, rgba(238, 246, 251, 0) 28%);
  }
  .hero__motivo { right: -30%; width: 120%; height: auto; }
  .hero:not(.hero--pagina) .hero__media { height: clamp(240px, 54vw, 400px); }
  .hero:not(.hero--pagina) .hero__sfondo { object-position: 64% 62%; }

  .principi__griglia { grid-template-columns: 1fr; padding: 22px 0 18px; }
  .principio { padding: 18px 0; gap: 18px; }
  .principio + .principio { border-left: 0; border-top: 1px solid var(--linea); }
  .principio img { width: 60px; height: 60px; margin: -4px 0 0 -6px; }
  .principio h2 { font-size: 20px; margin: 2px 0 4px; }
  .principio p { font-size: 16px; }

  .rivolgiamo { padding: 72px 0 24px; }
  .schede-servizi { grid-template-columns: 1fr; gap: 20px; }

  .metodo { padding: 56px 0 72px; }
  .passi { grid-template-columns: 1fr; gap: 0; }
  .passo { display: grid; grid-template-columns: 54px 1fr; column-gap: 20px; position: relative; padding-bottom: 28px; }
  .passo:last-child { padding-bottom: 0; }
  .passo__cerchio { grid-row: 1 / span 2; margin: 0; display: block; }
  .passo__cerchio img { width: 54px; height: 54px; margin: 0; }
  .passo__cerchio::after { display: none; }
  .passo::before {
    content: ""; position: absolute; left: 27px; top: 58px; bottom: 4px; width: 1px; background: var(--linea);
  }
  .passo:last-child::before { display: none; }
  .passo h3 { font-size: 21px; margin: 10px 0 4px; }
  .passo p { max-width: none; font-size: 16px; }

  .societa__foto {
    position: relative; z-index: 0;
    width: 100%; height: auto; aspect-ratio: 16 / 9;
    object-position: 78% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .societa__testo { padding: 18px 0 32px; max-width: none; }
  .lavora { flex-wrap: wrap; gap: 16px 18px; padding: 20px; }
  .lavora__testo { flex: 1 1 200px; }
  .lavora .btn { width: 100%; }

  .blog { padding: 72px 0 24px; }
  .schede-blog {
    display: flex; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-dx));
    padding-inline: var(--gutter) var(--gutter-dx);
    padding-bottom: 6px;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .schede-blog::-webkit-scrollbar { display: none; }
  .scheda-blog { flex: 0 0 min(82%, 340px); scroll-snap-align: start; }
  .scheda-blog__corpo { padding: 20px 18px 22px; }
  .scheda-blog .link-freccia { gap: 10px; font-size: 16px; }
  .lavora h3 { text-wrap: wrap; }

  .esperienze { padding: 48px 0 64px; }
  .voto { margin-top: 16px; }
  .nastro { --durata: 48s; padding-bottom: 28px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
  .nastro__pista > .recensione { width: min(88vw, 350px); margin-right: 14px; }
  .recensione { padding: 22px 18px 18px; gap: 14px; }
  .recensione__testo p { font-size: 15px; }
  .recensioni__piede { flex-direction: column; align-items: flex-start; gap: 22px; }

  .contatti { background-position: 30% 50%; }
  .contatti__griglia { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; padding-bottom: 56px; }
  .contatti__testo { padding-top: 0; }

  .piede { padding: 26px 0 20px; }
  .piede__riga1 { flex-direction: column; align-items: flex-start; gap: 12px; }
  .piede__informative { justify-content: flex-start; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; width: 100%; }
  .piede__informative li + li { border-left: 0; }
  .piede__informative a { padding: 6px 0; font-size: 14px; display: flex; min-height: 40px; align-items: center; line-height: 1.3; }
  .piede__riga2 { grid-template-columns: 1fr; gap: 12px; font-size: 13px; }
  .piede__riga3 { flex-direction: column; align-items: flex-start; }
  .piede__fondo { align-items: flex-start; }
  .piede__avvertenza { flex: none; }
  .piede__legali { justify-content: flex-start; }
  .piede__legali a { min-height: 36px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .logo img { width: 184px; }
  .hero h1 { font-size: clamp(2.35rem, 1.2rem + 6vw, 2.9rem); margin-bottom: 18px; }
  .hero__lead { font-size: 17px; margin-bottom: 28px; }
  .hero__azioni { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero__azioni .btn { width: 100%; }
  .hero__azioni .btn { padding: 16px 20px; font-size: 16.5px; gap: 10px; }
  .occhiello { font-size: 12px; letter-spacing: .12em; }
  .recapiti a { font-size: 18px; }
  .recapiti .sottolineato { display: inline; padding-bottom: 2px; line-height: 1.55; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .recapiti .sottolineato .freccia { display: inline-block; vertical-align: -3px; margin-left: 8px; }
  .hero__azioni .link-freccia { align-self: flex-start; }
  .titolo-sezione { font-size: clamp(1.85rem, 1.1rem + 3.6vw, 2.2rem); }
  .intro-sezione { font-size: 16px; }
  .scheda-servizio__corpo { padding: 24px 20px 26px; }
  .scheda-servizio__nome h3 { font-size: 26px; }
  .scheda-servizio__nome img { width: 52px; height: 52px; margin: -4px 0 -4px -5px; }
  .scheda-servizio h4 { font-size: 20px; }
  .scheda-servizio p { font-size: 16px; }
  .societa__testo p, .lavora p { font-size: 16px; }
  .lavora h3 { font-size: 20px; }
  .contatti__lead { font-size: 18px; }
  .recapiti a { font-size: 19px; gap: 16px; }
  .modulo { padding: 16px 16px 18px; }
}

@media (max-width: 360px) {
  .hero__azioni .btn { padding: 15px 16px; font-size: 16.5px; gap: 10px; }
}


/* ══ MOVIMENTO (step 5-bis) ═══════════════════════════════════════════════
   Il COME secondo Emil Kowalski: solo transform e opacity, --ease-out per entrate e uscite,
   --ease-in-out per quello che si sposta sullo schermo, hover solo col mouse, :active al tocco.
   Il COSA secondo 09 § 0-bis-2 e 16 § 4-bis: la hero entra, le sezioni arrivano scorrendo, il movimento si vede. */

/* la hero entra al caricamento, in CSS, senza aspettare il JavaScript */
@keyframes entra-su { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes dissolvenza { from { opacity: 0; } to { opacity: 1; } }
@keyframes panorama-entra { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes panorama-respira { from { transform: scale(1); } to { transform: scale(1.05) translateX(-1%); } }
@keyframes motivo-galleggia { from { transform: translateY(0); } to { transform: translateY(-18px); } }

.hero__testo .occhiello,
.hero h1 .riga,
.hero h1 .verde,
.hero__lead,
.hero__azioni { animation: entra-su .85s var(--ease-out) both; }
.hero__testo .occhiello { animation-delay: .05s; }
.hero h1 .riga:nth-child(1) { animation-delay: .12s; }
.hero h1 .riga:nth-child(2) { animation-delay: .2s; }
.hero h1 .verde { animation-delay: .28s; }
.hero__lead { animation-delay: .42s; }
.hero__azioni { animation-delay: .54s; }
/* l'immagine grande non parte mai da opacity 0: si muove soltanto */
.hero__sfondo {
  will-change: transform;
  animation: panorama-entra 1.9s var(--ease-out) both, panorama-respira 24s var(--ease-in-out) 1.9s infinite alternate;
}
.hero__motivo { animation: dissolvenza 1.4s ease .35s both, motivo-galleggia 10s var(--ease-in-out) 1.7s infinite alternate; }

/* le sezioni arrivano mentre si scorre: .reveal → .in (main.js); senza JavaScript restano visibili */
.js .reveal:not(.gruppo),
.js .gruppo > * {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .85s var(--ease-out) var(--ritardo, 0ms),
    transform .85s var(--ease-out) var(--ritardo, 0ms),
    box-shadow .3s ease, color .2s ease, background-color .2s ease, border-color .2s ease, background-size .3s ease;
}
.js .reveal.in:not(.gruppo),
.js .gruppo.in > * { opacity: 1; transform: none; }
/* gli elementi che arrivano insieme, uno dopo l'altro */
.gruppo > *:nth-child(2) { --ritardo: 80ms; }
.gruppo > *:nth-child(3) { --ritardo: 160ms; }
.gruppo > *:nth-child(4) { --ritardo: 240ms; }
.testa-sezione > .reveal:nth-child(2) { --ritardo: 80ms; }

/* il metodo: la linea fra un passo e l'altro si disegna dopo il cerchio */
.passo__cerchio::after { transform-origin: left center; }
.js .gruppo .passo__cerchio::after {
  transform: scaleX(0);
  transition: transform 1s var(--ease-in-out) calc(var(--ritardo, 0ms) + 350ms);
}
.js .gruppo.in .passo__cerchio::after { transform: scaleX(1); }
.passo::before { transform-origin: top center; }
.js .gruppo .passo::before { transform: scaleY(0); transition: transform .9s var(--ease-in-out) calc(var(--ritardo, 0ms) + 300ms); }
.js .gruppo.in .passo::before { transform: scaleY(1); }

/* l'intestazione cambia scorrendo: il logo si fa più piccolo, scendendo si nasconde, risalendo torna */
.testata { transition: transform .32s var(--ease-out), box-shadow .25s ease, border-color .25s ease; }
.testata.nascosta { transform: translateY(-100%); transition-duration: .22s; }
.logo img { transform-origin: left center; transition: transform .3s var(--ease-out); }
.testata.scorsa .logo img { transform: scale(.88); }

/* le foto si ingrandiscono col mouse, dentro la loro scheda */
.scheda-servizio__foto, .scheda-blog > img { transition: transform .7s var(--ease-out); }
.scheda-blog { transition: box-shadow .3s ease, transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .scheda-servizio:hover .scheda-servizio__foto,
  .scheda-blog:hover > img { transform: scale(1.05); }
  .lavora:hover > img, .principio:hover img { transform: translateY(-3px); }
}
.lavora > img, .principio img { transition: transform .3s var(--ease-out); }

/* la profondità leggera della società: la foto scorre più piano (main.js, solo da computer) */
.societa__foto { will-change: transform; }
@media (min-width: 1000px) { .societa__foto { transform: scale(1.1); } }
@media (min-width: 1000px) and (prefers-reduced-motion: reduce) { .societa__foto { transform: none; } }

/* il menu da telefono: le voci arrivano una dopo l'altra, si chiude più in fretta di come si apre */
@media (max-width: 999px) {
  .menu .menu__voci li,
  .menu > .btn,
  .menu__contatti {
    opacity: 0; transform: translateY(14px);
    transition: opacity .15s ease, transform .15s var(--ease-out);
  }
  .menu.aperto .menu__voci li,
  .menu.aperto > .btn,
  .menu.aperto .menu__contatti {
    opacity: 1; transform: none;
    transition: opacity .4s var(--ease-out), transform .45s var(--ease-out);
  }
  .menu.aperto .menu__voci li:nth-child(1) { transition-delay: 40ms; }
  .menu.aperto .menu__voci li:nth-child(2) { transition-delay: 80ms; }
  .menu.aperto .menu__voci li:nth-child(3) { transition-delay: 120ms; }
  .menu.aperto .menu__voci li:nth-child(4) { transition-delay: 160ms; }
  .menu.aperto .menu__voci li:nth-child(5) { transition-delay: 200ms; }
  .menu.aperto .menu__voci li:nth-child(6) { transition-delay: 240ms; }
  .menu.aperto .menu__voci li:nth-child(7) { transition-delay: 280ms; }
  .menu.aperto .menu__voci li:nth-child(8) { transition-delay: 320ms; }
  .menu.aperto > .btn { transition-delay: 260ms; }
  .menu.aperto .menu__contatti { transition-delay: 320ms; }
  .menu__voci a:active { transform: translateX(4px); }
  .menu__voci a { transition: color .15s ease, transform .16s var(--ease-out); }
}

/* riduci il movimento: restano le dissolvenze, si tolgono gli spostamenti */
@media (prefers-reduced-motion: reduce) {
  html, html:focus-within { scroll-behavior: auto; }
  .hero__testo .occhiello, .hero h1 .riga, .hero h1 .verde, .hero__lead, .hero__azioni { animation-name: dissolvenza; }
  .hero__sfondo { animation: none; }
  /* il nastro delle recensioni non si ferma: rallenta di 8 volte (16 § 2-quinquies) */
  .nastro { --durata: 480s; }
  .hero__motivo { animation: dissolvenza 1s ease both; }
  .js .reveal:not(.gruppo), .js .gruppo > * { transform: none; }
  .js .gruppo .passo__cerchio::after, .js .gruppo .passo::before { transform: none; transition: none; }
  .testata.nascosta { transform: none; }
  .testata.scorsa .logo img { transform: none; }
  .scheda-servizio:hover .scheda-servizio__foto, .scheda-blog:hover > img { transform: none; }
  .menu .menu__voci li, .menu > .btn, .menu__contatti, .menu { transform: none !important; }
}

/* ══ PAGINE INTERNE (step 6-bis) ══════════════════════════════════════════
   Ricomposte coi pezzi della home, senza elementi nuovi: la hero (più bassa, senza ritratto), i titoli,
   la fascia dei principi, le schede, i passi del metodo, la fascia della società col riquadro, le schede del
   blog, le recensioni, la sezione dei contatti col modulo. Stessi colori, raggi, bordi, ombre e movimento. */

/* il menu segna la pagina in cui si è */
.menu__voci a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 999px) { .menu__voci a[aria-current="page"] { color: var(--verde-hover); } }

/* ── la testata della pagina: la hero della home, più bassa ── */
.hero--pagina .hero__riga { min-height: 520px; }
.hero--pagina .hero__testo { max-width: 820px; padding: 68px 0 64px; }
.hero--pagina h1 { max-width: 700px; }
.hero--pagina .hero__azioni { gap: 18px 20px; }
.hero--pagina h1 { font-size: clamp(2.4rem, 1rem + 3.2vw, 4rem); line-height: 1.04; margin-bottom: 24px; }
.hero--pagina .hero__lead { font-size: 20px; max-width: 600px; margin-bottom: 0; }
.hero__nota { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--testo); max-width: 560px; }
.hero__data { margin-top: 16px; font-size: 15px; color: var(--testo-tenue); }
.hero--pagina .hero__azioni { margin-top: 34px; }
.hero--pagina .hero__media { pointer-events: none; }
/* 2 Step: le immagini corporate sono oggetti su una scrivania, non panorami: da computer, nelle testate delle pagine, stanno a destra e sfumano verso il testo */
@media (min-width: 1000px) {
  .hero--pagina .hero__sfondo {
    left: auto; width: 62%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 18%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 18%, #000 42%);
  }
}
/* da 1000 a 1199 px il titolo è più largo in proporzione: l'immagine si stringe e sfuma prima */
@media (min-width: 1000px) and (max-width: 1199px) {
  .hero--pagina .hero__sfondo {
    width: 54%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 50%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 50%);
  }
}
/* le inquadrature che cambiano: le tre cartelle (tre banche), il modellino della casa (privati) e quello dell'azienda */
.hero__sfondo[src*="04-tre-banche"], .hero__sfondo[src*="859b57c8eef6ea9f"] { object-position: 50% 14%; }
.hero__sfondo[src*="02-famiglia"], .hero__sfondo[src*="e16fea3a4090be7c"] { object-position: 50% 22%; }
@media (min-width: 1200px) { .hero__sfondo[src*="02-famiglia"], .hero__sfondo[src*="e16fea3a4090be7c"] { object-position: 50% 50%; } }
/* da 1000 a 1079 px il titolo starebbe su una riga sola fin sopra l'immagine: va a capo come da 1080 px in su */
@media (min-width: 1000px) and (max-width: 1079px) { .hero--pagina h1 { max-width: 520px; } }
.hero__sfondo[src*="39-rischio-impresa"], .hero__sfondo[src*="a53b219a57487311"] { object-position: 50% 0%; }
.scheda-servizio__foto[src*="23-patrimonio"], .scheda-servizio__foto[src*="0c69802c0900cabf"] { object-position: 50% 30%; }
.scheda-blog > img[src*="39-rischio-impresa"], .scheda-blog > img[src*="c746bcfb2aaa3769"] { object-position: 50% 16%; }
/* 6-ter · il PANNELLO serve queste foto dal suo archivio, /media/<impronta>: qui sopra, accanto al nome del file, l'impronta
   della stessa foto (le prime 16 cifre), così l'inquadratura resta legata alla foto anche nel sito disegnato dal pannello.
   Una foto nuova, caricata dal pannello, ha un'altra impronta: prende l'inquadratura del suo posto oppure il punto
   importante che la cliente tocca nel pannello («--fuoco», dal campo foto), che vale su ogni schermo e passa sopra a tutto. */
img[style*="--fuoco"] { object-position: var(--fuoco) !important; }
/* le schede dei consulenti (le aggiunge il pannello): ritratti quadrati, il viso in alto se nessuno tocca un punto */
.scheda-blog.scheda-consulente > img { aspect-ratio: 1 / 1; object-position: 50% 25%; }
.hero--senza-foto { background: linear-gradient(180deg, var(--azzurro) 0%, #EEF6FB 100%); }
.hero--senza-foto::before { display: none; }
.hero--senza-foto .hero__riga { min-height: 430px; }
.occhiello--marchio { display: flex; align-items: center; gap: 14px; }
.occhiello--marchio img { height: 34px; width: auto; }

/* ── le sezioni ── */
.sezione { padding: 84px 0; }
.sezione--azzurro { background: var(--azzurro); border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
.sezione--menta { background: linear-gradient(180deg, var(--menta) 0%, var(--menta-scheda) 100%); }
.sezione--azzurro + .sezione--azzurro { border-top: 0; padding-top: 0; }
.titolo-sezione--interna { font-size: clamp(1.9rem, 1rem + 1.9vw, 2.75rem); line-height: 1.1; }
.testa-sezione--sola { grid-template-columns: minmax(0, 820px); }
.testa-sezione .intro-sezione + .intro-sezione { margin-top: 12px; }
.testo-colonna { max-width: 680px; }
.testo-colonna p { font-size: 18px; line-height: 1.65; color: var(--testo); }
.testo-colonna p + p, .testo-colonna p + .spunte, .testo-colonna .spunte + p, .testo-colonna p + .elenco, .testo-colonna .elenco + p { margin-top: 16px; }
.testo-colonna .link-freccia, .dopo-elenco { margin-top: 28px; }
.testo-colonna strong, .spunte strong, .scheda strong, .cifra strong { color: var(--blu-notte); font-weight: 600; }
.riga-link { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; margin-top: 32px; }
.riga-link .link-freccia { margin-top: 0; }
.link-esterno .freccia { width: 16px; height: 16px; }
.due-colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 72px; align-items: start; }
.due-colonne .titolo-sezione { margin-bottom: 22px; }

/* elenchi con la spunta del modulo, e quelli discreti col punto del pulsante dell'audio */
.spunte { display: grid; gap: 14px; }
.spunte--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 44px; }
.spunte li, .elenco li { position: relative; font-size: 18px; line-height: 1.55; color: var(--testo); }
.spunte li { padding-left: 40px; }
.spunte li::before {
  content: ""; position: absolute; left: -4px; top: -2px; width: 32px; height: 32px;
  background: url("/assets/img/icone/checkbox-selezionato.webp") center / 32px 32px no-repeat;
}
.elenco { display: grid; gap: 8px; }
.elenco li { padding-left: 22px; }
.elenco li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }

/* la fascia dei principi, con 2, 3 o 4 colonne */
.colonne { display: grid; grid-template-columns: repeat(var(--colonne, 3), minmax(0, 1fr)); }
.colonne .principio { padding: 6px 28px; }
.colonne .principio:first-child { padding-left: 0; }
.colonne .principio:last-child { padding-right: 0; }
.principio h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin: 4px 0 8px; }
.principio--testo p { font-size: 18px; color: var(--testo); }
@media (min-width: 1000px) { .colonne[style*="--colonne:4"] .principio { flex-direction: column; gap: 14px; } }
.dopo-colonne { margin-top: 30px; font-size: 18px; line-height: 1.6; color: var(--testo); max-width: 760px; }

/* le schede: quelle del blog e dei servizi, senza foto */
.schede { display: grid; grid-template-columns: repeat(var(--colonne, 3), minmax(0, 1fr)); gap: 22px; }
.scheda {
  position: relative;
  background: var(--grigio-scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 28px 28px 30px;
  display: flex; flex-direction: column;
}
.scheda--azzurro { background: var(--azzurro-scheda); border-color: #E3F1F6; }
.scheda--menta { background: var(--menta-scheda); border-color: #DFF0E8; }
.scheda--bianca { background: var(--bianco); border-color: #DCEFEA; box-shadow: 0 14px 34px -28px rgba(4, 20, 60, .3); }
.scheda__icona { width: 64px; height: 64px; margin: -6px 0 14px -6px; transition: transform .3s var(--ease-out); }
.scheda h3 { font-size: 21px; line-height: 1.28; font-weight: 560; letter-spacing: -.01em; margin-bottom: 10px; }
.scheda p { font-size: 17px; line-height: 1.6; color: var(--testo); }
.scheda p + p { margin-top: 10px; }
.scheda__piede { margin-top: auto; padding-top: 22px; }
.scheda--piccola { padding: 20px 22px; flex-direction: row; align-items: center; gap: 16px; }
.scheda--piccola .scheda__icona { width: 52px; height: 52px; margin: -6px 0; flex: 0 0 auto; }
.scheda--piccola p { font-size: 17px; font-weight: 560; color: var(--blu-notte); line-height: 1.35; }
.scheda--sede h3 { font-size: 19px; margin-bottom: 6px; }
@media (hover: hover) and (pointer: fine) {
  .scheda { transition: box-shadow .3s ease, transform .3s var(--ease-out); }
  .scheda:hover { box-shadow: 0 22px 44px -30px rgba(4, 20, 60, .35); }
  .scheda:hover .scheda__icona { transform: translateY(-3px); }
}

/* le cifre in grande, nelle schede */
.cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cifra { font-size: 17px; line-height: 1.6; color: var(--testo); }
.cifra p > strong:first-child, .cifra__valore {
  display: block; margin-bottom: 12px;
  font-size: clamp(2rem, 1rem + 1.6vw, 2.6rem); line-height: 1.05; font-weight: 560; letter-spacing: -.02em;
  color: var(--verde);
}

/* i passi del metodo: 3 o 5 colonne, il cerchio 05 come i quattro del kit, gli anni della storia */
.passi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.passi--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.passi--5 .passo p { max-width: 210px; }
.passo__numero {
  width: 76px; height: 76px; flex: 0 0 auto; margin-left: -8px;
  display: grid; place-items: center;
}
.passo__numero span {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid transparent;
  background: linear-gradient(#F9FAFB, #F9FAFB) padding-box, linear-gradient(90deg, #2674B9, #00B077) border-box;
  font-size: 20px; font-weight: 700; color: #10283F; letter-spacing: -.01em;
}
.passo__anno { flex: 0 0 auto; font-size: clamp(2.4rem, 1rem + 2vw, 3.2rem); line-height: 1; font-weight: 560; letter-spacing: -.03em; color: var(--verde); }
.passi--tappe .passo p { font-size: 18px; color: var(--testo); max-width: 340px; }
.passi--tappe .passo__cerchio { margin-bottom: 18px; }
.passo--solo-testo p { color: var(--testo); font-size: 18px; }

/* la fascia della società, usata con altre foto */
.societa__testo .riga-link { margin-top: 0; }
.societa__testo p + .riga-link, .societa__testo p + .link-freccia { margin-top: 4px; }

/* il riquadro «Sei un consulente finanziario?», anche col pulsante pieno o con più icone */
.lavora--solo { margin: 0; }
.lavora__icone { display: flex; gap: 6px; flex: 0 0 auto; }
.lavora__icone img { width: 52px; height: 52px; margin: -6px -4px; }

/* la sezione dei contatti, come chiusura di ogni pagina */
.chiusura { background: var(--menta-contatti) url("/assets/img/sfondo-contatti.webp") 50% 50% / cover no-repeat; padding: 80px 0; }
.chiusura__testo { max-width: 760px; }
.chiusura h2 { margin-bottom: 18px; }
.chiusura p { font-size: 20px; line-height: 1.5; color: var(--testo); max-width: 640px; }
.chiusura p + p { margin-top: 10px; }
.chiusura .avvertenza { font-size: 16px; margin-top: 22px; }
.chiusura .avvertenza + .avvertenza { margin-top: 8px; }
.chiusura .hero__azioni { margin-top: 32px; }
.chiusura .hero__azioni .btn { padding: 17px 32px; font-size: 18px; }

/* le domande frequenti, a fisarmonica */
.domande { border-top: 1px solid var(--linea); max-width: 900px; }
.domanda { border-bottom: 1px solid var(--linea); }
.domanda summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding: 18px 0;
  font-size: 20px; line-height: 1.3; font-weight: 560; color: var(--blu-notte);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: color .2s ease;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary img { width: 20px; height: 20px; flex: 0 0 auto; transform: rotate(90deg); transition: transform .3s var(--ease-out); }
.domanda[open] summary img { transform: rotate(-90deg); }
.domanda summary:active { color: var(--verde-hover); }
@media (hover: hover) and (pointer: fine) { .domanda summary:hover { color: var(--verde-hover); } }
.domanda p { padding: 0 48px 24px 0; font-size: 18px; line-height: 1.6; color: var(--testo); max-width: 760px; }
@keyframes domanda-apri { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.domanda[open] p { animation: domanda-apri .35s var(--ease-out); }

/* due recensioni accanto al testo, ferme (2 Step): le schede del nastro della home */
.recensioni-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 40px 72px; align-items: center; }
.recensioni-duo .hero__azioni { margin-top: 30px; }
.recensioni-duo .avvertenza { margin-top: 22px; }
.recensioni-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* documenti, marchi e codice LEI */
.marchi-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; }
.marchi-riga > img { height: 40px; width: auto; }
.marchi-riga .piede__marchio-scuro { height: 40px; }
.voce-marchio { display: flex; align-items: center; gap: 18px; }
.voce-marchio > img { height: 40px; width: auto; flex: 0 0 auto; }
.lei { display: flex; align-items: flex-start; gap: 36px; }
.lei__qr { flex: 0 0 auto; display: block; padding: 10px; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); transition: box-shadow .3s ease; }
.lei__qr img { width: 120px; height: auto; }
@media (hover: hover) and (pointer: fine) { .lei__qr:hover { box-shadow: 0 22px 44px -30px rgba(4, 20, 60, .35); } }

/* i passaggi di un articolo: tabelle, formula, riquadri, citazioni */
.articolo { max-width: none; }
.articolo__attacco { max-width: 860px; margin-bottom: 64px; }
@media (min-width: 1000px) {
  .articolo__sezione { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 780px); column-gap: 72px; align-items: start; }
  .articolo__sezione > * { grid-column: 2; }
  .articolo__sezione > h2 { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 120px; margin: 0; }
  .articolo__sezione.riquadro { padding: 36px 40px; }
}
.articolo .tabella-box, .articolo .riquadro--formula + .tabella-box { margin-top: 18px; }
.articolo .tabella-box + p, .articolo .riquadro--formula + p, .articolo p + .riquadro--formula, .articolo p + .tabella-box { margin-top: 18px; }
.articolo__sezione + .articolo__sezione { margin-top: 56px; }
.articolo h2 { font-size: clamp(1.6rem, 1rem + 1.1vw, 2.1rem); line-height: 1.15; margin-bottom: 18px; }
.articolo p { font-size: 18px; line-height: 1.7; color: var(--testo); }
.articolo p + p, .articolo p + .spunte, .articolo .spunte + p, .articolo p + .tabella, .articolo .tabella + p,
.articolo p + .passi, .articolo .passi + p, .articolo p + .elenco, .articolo .elenco + p, .articolo p + .riquadro,
.articolo .riquadro + p, .articolo p + .confronto, .articolo .confronto + p, .articolo .cifre + p, .articolo p + .cifre { margin-top: 18px; }
.articolo__attacco p { font-size: 21px; line-height: 1.55; color: var(--blu-notte); }
.articolo__attacco p + p { margin-top: 14px; }
.riquadro {
  padding: 26px 30px;
  background: var(--menta-riquadro);
  border: 1px solid #DCEFEA;
  border-radius: var(--raggio);
  box-shadow: 0 14px 34px -28px rgba(4, 20, 60, .3);
}
.riquadro--formula p { font-size: 19px; line-height: 1.55; color: var(--blu-notte); font-weight: 520; }
.articolo .riquadro h2 { margin-bottom: 14px; }
.tabella { width: 100%; border-collapse: collapse; font-size: 17px; }
.tabella th, .tabella td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella th { color: var(--blu-notte); font-weight: 520; background: var(--azzurro); width: 58%; }
.tabella td { color: var(--blu-notte); }
.tabella tr:last-child th, .tabella tr:last-child td { border-bottom: 0; }
.tabella-box { border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.tabella .effetto { display: inline-flex; align-items: center; gap: 10px; }
.tabella .effetto img { width: 18px; height: 18px; }
.tabella .effetto--giu img { transform: rotate(90deg); }
.citazione { padding-left: 18px; border-left: 2px solid var(--verde); font-size: 22px !important; line-height: 1.45 !important; color: var(--blu-notte) !important; font-weight: 520; }
.cifra-grande { font-size: clamp(1.4rem, 1rem + .9vw, 1.8rem) !important; line-height: 1.35 !important; color: var(--blu-notte) !important; font-weight: 520; }
.cifra-grande strong { color: var(--verde); font-weight: 600; }
.confronto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.articolo .avvertenza { font-size: 16px; }

/* il modulo: le scelte a pulsante (come il bordo dei pulsanti) e l'iscrizione al blog */
.scelta { border: 0; margin: 6px 0 12px; padding: 0; min-width: 0; }
.scelta legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 560; color: var(--blu-notte); }
.scelta__opzioni { display: flex; flex-wrap: wrap; gap: 8px; }
.scelta label { position: relative; display: inline-flex; }
.scelta input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scelta label span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  font-size: 16px; color: var(--blu-notte);
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: 4px;
  transition: border-color .2s ease, background-color .2s ease, transform .16s var(--ease-out), box-shadow .2s ease;
}
.scelta input:checked + span { border-color: var(--verde); background: var(--menta-scheda); box-shadow: inset 0 0 0 1px var(--verde); }
.scelta input:focus-visible + span { outline: 3px solid var(--verde-focus); outline-offset: 2px; }
.scelta label:active span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .scelta label:hover span { border-color: var(--verde); } }
.scelta[aria-invalid="true"] label span { border-color: #C2413A; }
.scelta .campo__errore { margin-top: 6px; }
.modulo .campo label:not(.sr-only) { display: block; }
.iscrizione { display: flex; align-items: flex-start; gap: 10px; }
.iscrizione .campo { flex: 1; margin: 0; }
.iscrizione .btn { width: auto; min-height: 44px; padding: 10px 26px; font-size: 17px; flex: 0 0 auto; }
.lavora--iscrizione { align-items: flex-start; }
.lavora--iscrizione form { flex: 1 1 380px; }
.lavora--iscrizione .modulo__legale { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--testo-tenue); }
.lavora--iscrizione .campo__errore { font-size: 14px; }
.lavora--iscrizione .modulo__esito { font-size: 15px; }
.lavora--iscrizione .modulo__esito--ok { padding: 8px 0; font-size: 18px; }

/* il posto delle schede dei consulenti: lo riempie il pannello (step 6-ter) */
.schede-consulenti:empty { display: none; }

/* il fondatore: il panorama della hero col motivo del marchio, dentro una cornice (2 Step: senza il ritratto) */
.fondatore { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 48px 72px; align-items: center; }
.fondatore__foto {
  position: relative; isolation: isolate; overflow: hidden; margin: 0;
  aspect-ratio: 6 / 5; border-radius: var(--raggio);
  background: linear-gradient(180deg, #EEF6FB 0%, var(--azzurro) 100%);
  box-shadow: 0 24px 50px -36px rgba(4, 20, 60, .35);
}
/* senza la persona l'inquadratura va sull'architettura: tetto, vetrate, il borgo sulle colline; il motivo attraversa le colline */
.fondatore__sfondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 72% 55%; }
.fondatore__foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(238, 246, 251, .45) 0%, rgba(238, 246, 251, 0) 36%); }
.fondatore__motivo { position: absolute; z-index: -1; right: -50%; bottom: 0; width: 170%; max-width: none; height: auto; }
.fondatore__testo .titolo-sezione { margin-bottom: 20px; }

/* le cifre dentro una frase (l'articolo sul FITD) */
.cifra-voce p { font-size: 21px; line-height: 1.45; color: var(--blu-notte); font-weight: 520; }
.cifra__voce { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 400; color: var(--testo); }
.cifra-voce strong { color: var(--verde); font-weight: 600; }

/* i recapiti con la loro voce */
.recapiti__voce { font-weight: 400; color: var(--testo); margin-right: 4px; }
.recapiti--voci a > span { display: inline; line-height: 1.4; }
.recapiti--voci .sottolineato { display: inline; padding-bottom: 2px; }
.recapiti--voci a > img { width: 46px; height: 46px; }

/* le schede del blog nella pagina del blog: data, sintesi, tutta la scheda porta all'articolo */
.scheda-blog--indice { position: relative; }
.scheda-blog--indice .scheda-blog__corpo { display: flex; flex-direction: column; flex: 1; }
.scheda-blog__data { margin-bottom: 10px; font-size: 14px; color: var(--testo-tenue); }
.scheda-blog__titolo { color: var(--blu-notte); }
.scheda-blog__titolo::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.scheda-blog__sintesi { font-size: 16px; line-height: 1.55; color: var(--testo); }
.scheda-blog--indice .link-freccia { position: relative; z-index: 2; }
.scheda-blog--indice:active .scheda-blog__titolo { color: var(--verde-hover); }
@media (hover: hover) and (pointer: fine) { .scheda-blog--indice:hover .scheda-blog__titolo { color: var(--verde-hover); } }
.blog-indice { padding-top: 72px; }

/* ── 3 Step: la cartina delle sedi (SVG nostro, Natural Earth 1:10m), con l'elenco accanto ── */
.sedi-mappa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 72px; align-items: center; }
.sedi-mappa__italia { margin: 0; }
.sedi-mappa__italia img { display: block; width: 100%; max-width: 470px; height: auto; margin-inline: auto; }
.sedi-mappa__elenco { display: grid; gap: 30px; }
.sedi-mappa__elenco--regioni { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.sedi-gruppo h3 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-tenue); margin-bottom: 14px; }
.sedi-gruppo ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.sedi-mappa__elenco--regioni .sedi-gruppo ul { grid-template-columns: 1fr; gap: 10px; }
.sedi-gruppo li { position: relative; padding-left: 24px; font-size: 19px; line-height: 1.35; font-weight: 520; color: var(--blu-notte); }
.sedi-gruppo li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(0, 176, 119, .14); }
.sedi-gruppo li.sede-legale::before { box-shadow: 0 0 0 2px var(--bianco), 0 0 0 4px #2674B9; }
.sedi-gruppo li span { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; color: var(--testo-tenue); }
.societa--italia .societa__italia { object-fit: contain; object-position: 84% 50%; padding: 18px 0; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 999px) {
  .sedi-mappa { grid-template-columns: 1fr; gap: 28px; }
  .sedi-mappa__italia img { max-width: 340px; }
  .sedi-mappa__elenco--regioni { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  .sedi-gruppo li { font-size: 18px; }
  .societa--italia .societa__italia { aspect-ratio: 4 / 3; object-position: 50% 50%; padding: 20px 0 0; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 380px) { .sedi-gruppo ul { grid-template-columns: 1fr; } }

/* ── telefono e tablet ── */
@media (max-width: 1199px) {
  .passi--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .passi--5 .passo:nth-child(3) .passo__cerchio::after { display: none; }
}
@media (max-width: 999px) {
  .hero--pagina .hero__testo { padding: 46px 0 36px; max-width: 640px; }
  .hero--pagina .hero__media { height: clamp(190px, 50vw, 300px); }
  .hero--pagina .hero__lead { font-size: 18px; }
  .hero--pagina .hero__azioni { margin-top: 28px; }
  .hero--pagina .hero__riga { min-height: 0; }
  .hero--senza-foto .hero__testo { padding-bottom: 52px; }
  .hero--senza-foto .hero__media { display: none; }
  .sezione { padding: 60px 0; }
  .sezione--azzurro + .sezione--azzurro { padding-top: 0; }
  .colonne { grid-template-columns: 1fr; }
  .colonne .principio, .colonne .principio:first-child, .colonne .principio:last-child { padding: 18px 0; }
  .colonne .principio + .principio { border-left: 0; border-top: 1px solid var(--linea); }
  .schede, .cifre, .confronto { grid-template-columns: 1fr; gap: 16px; }
  .schede--due-telefono { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .spunte--2, .due-colonne { grid-template-columns: 1fr; }
  .due-colonne { gap: 56px; }
  .due-colonne:has(> h2:first-child), .due-colonne:has(> div:first-child > .marchi-riga) { gap: 22px; }
  .due-colonne > h2:first-child { margin-bottom: 0; }
  .articolo__attacco { margin-bottom: 44px; }
  .passi--3, .passi--5 { grid-template-columns: 1fr; gap: 0; row-gap: 0; }
  .passi--tappe .passo { display: block; padding-bottom: 26px; }
  .passi--tappe .passo::before { display: none; }
  .passi--tappe .passo__cerchio { margin-bottom: 8px; }
  .passi--tappe .passo__anno { font-size: 2.2rem; }
  .passo__numero { width: 54px; height: 54px; margin: 0; }
  .passo__numero span { width: 44px; height: 44px; font-size: 15px; border-width: 2px; }
  .passo--solo-testo p { margin-top: 12px; }
  .recensioni-duo { grid-template-columns: 1fr; }
  .recensioni-due { grid-template-columns: 1fr; gap: 14px; }
  .chiusura { padding: 60px 0; }
  .chiusura p { font-size: 18px; }
  .lei { flex-direction: column; gap: 22px; }
  .articolo__sezione + .articolo__sezione { margin-top: 44px; }
  .domanda summary { font-size: 18px; }
  .domanda p { padding-right: 0; }
  .fondatore { grid-template-columns: 1fr; gap: 32px; }
  .fondatore__foto { aspect-ratio: 4 / 3.4; }
  .schede-blog--indice { display: grid; grid-template-columns: 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 18px; }
  .schede-blog--indice .scheda-blog { flex: none; }
  .blog-indice { padding-top: 48px; }
  .cifra-voce p { font-size: 19px; }
}
@media (max-width: 480px) {
  .hero--pagina h1 { font-size: clamp(2rem, 1.15rem + 4.2vw, 2.45rem); margin-bottom: 18px; }
  .titolo-sezione--interna { font-size: clamp(1.6rem, 1rem + 2.7vw, 1.95rem); }
  .testo-colonna p, .articolo p, .spunte li, .elenco li, .dopo-colonne, .principio--testo p { font-size: 16.5px; }
  .articolo__attacco p { font-size: 18.5px; }
  .scheda { padding: 22px 20px 24px; }
  .scheda--piccola { padding: 14px 14px; gap: 10px; }
  .scheda--piccola .scheda__icona { width: 40px; height: 40px; margin: -4px 0; }
  .scheda--piccola p { font-size: 15px; }
  .scheda h3 { font-size: 20px; }
  .scheda p { font-size: 16px; }
  .riquadro { padding: 20px 18px; }
  .riquadro--formula p { font-size: 17px; }
  .citazione { font-size: 19px !important; }
  .tabella { font-size: 15.5px; }
  .tabella th, .tabella td { padding: 11px 10px; }
  .chiusura .hero__azioni .btn { width: 100%; padding: 16px 20px; font-size: 16.5px; }
  .iscrizione { flex-direction: column; align-items: stretch; }
  .iscrizione .btn { width: 100%; }
  .lavora__icone img { width: 44px; height: 44px; }
  .domanda p { font-size: 16.5px; }
  .cifra-voce p { font-size: 17.5px; }
  .schede--due-telefono .scheda--piccola { flex-direction: column; align-items: flex-start; }
  .recapiti--voci a { font-size: 17px; gap: 14px; }
  .recapiti--voci a > img { width: 40px; height: 40px; }
}

/* il movimento delle pagine interne: come la home */
.hero__nota, .hero__data { animation: entra-su .85s var(--ease-out) .48s both; }
@media (prefers-reduced-motion: reduce) {
  .hero__nota, .hero__data { animation-name: dissolvenza; }
  .domanda[open] p { animation-name: dissolvenza; }
}

/* ══ IL COPY DELLA LANDING DEL CLIENTE (25/10/2026) ══════════════════════
   Coi pezzi di sempre: i percorsi 01 · 02 · 03 (occhiello col numero e quattro schede), il metodo coi suoi due
   testi per passo, l'esempio della diagnosi nel riquadro, il titolo del modulo, il sottotitolo delle riflessioni. */
.occhiello--numero { color: var(--verde-hover); font-size: 15px; letter-spacing: .14em; margin-bottom: 10px; }
.scheda h3.occhiello { font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .18em; color: var(--testo); margin-bottom: 16px; }
.schede--percorso .elenco li { font-size: 17px; }
.scheda__risultato { font-size: 20px !important; line-height: 1.5 !important; color: var(--blu-notte) !important; font-weight: 520; }
.passo p + p { margin-top: 10px; }
.passi--metodo .passo p { max-width: 260px; }
.passi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
.passi--tappe .passo h3 { margin-bottom: 6px; }
.passo__nota { display: block; margin-top: 6px; font-size: 15px; color: var(--testo-tenue); }
.testo-colonna p.attaccato { margin-top: 6px; }
.domanda p:not(:last-child) { padding-bottom: 10px; }

.riquadro--esempio {
  margin-top: 56px;
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px 72px; align-items: center;
  padding: 36px 40px;
}
.riquadro--esempio .occhiello { margin-bottom: 12px; }
.riquadro__etichetta { font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-hover); margin-bottom: 6px; }
.riquadro__titolo { font-size: clamp(1.6rem, 1rem + 1.1vw, 2.1rem); line-height: 1.15; font-weight: 560; letter-spacing: -.02em; color: var(--blu-notte); }
.riquadro__voci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.riquadro__voci li { padding: 14px 0; border-bottom: 1px solid #DCEFEA; font-size: 17px; line-height: 1.45; color: var(--testo); }
.riquadro__voci strong { display: block; margin-bottom: 2px; color: var(--blu-notte); font-weight: 600; }

.modulo__titolo { margin: 6px 0 14px; font-size: 22px; line-height: 1.25; font-weight: 560; letter-spacing: -.01em; color: var(--blu-notte); }
.modulo__nota { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--testo); }

.hero h1 .hero__sottotitolo { margin-top: 14px; font-size: .62em; line-height: 1.12; letter-spacing: -.015em; }
.scheda-blog__sottotitolo { display: block; margin-top: 6px; font-size: 18px; line-height: 1.4; font-weight: 400; color: var(--testo); letter-spacing: 0; }
.chiusura .avvertenza--sopra { margin: 0 0 26px; }

@media (max-width: 999px) {
  .passi--2 { grid-template-columns: 1fr; }
  .passi--metodo .passo p { max-width: none; }
  .passi--metodo .passo > h3, .passi--metodo .passo > p { grid-column: 2; }
  .passi--metodo .passo__cerchio { grid-row: 1 / span 3; }
  .riquadro--esempio { grid-template-columns: 1fr; gap: 14px; margin-top: 44px; padding: 24px 20px; }
  .riquadro__voci { grid-template-columns: 1fr; }
  .riquadro__voci li { padding: 12px 0; font-size: 16px; }
  .scheda__risultato { font-size: 18px !important; }
}
@media (max-width: 480px) {
  .schede--percorso .elenco li { font-size: 16px; }
  .modulo__titolo { font-size: 20px; }
  .scheda-blog__sottotitolo { font-size: 16.5px; }
}