/* Visitu, foglio di stile del sito (visitu.it).
   Serve le quattro pagine (/, /funzioni, /pacchetti, /contatti) e la cornice delle informative.

   REVISIONE 2026-10-19 (il committente: «modernizzalo e rendilo multipagina»)
   - Tipografia nuova: Bricolage Grotesque per i titoli, Figtree per il testo. Provato anche
     Atkinson Hyperlegible Next, scartato: il suo zero barrato rendeva «2Ø146» negli indirizzi.
     File nostri in /fonts/ (la privacy policy promette «nessun font da server esterni»).
   - Colori: restano quelli del marchio. L'onda (frozen, pale, fresh, pacific, yale) colora le
     cinque specialità; il blu pieno (--primary) è il colore delle azioni; il navy profondo fa
     da fondo alla demo, alla sicurezza e al piede. Le sezioni chiare si alternano fra bianco e
     #EDF6F9 (--alt), scelta del committente del 14/09: due sezioni vicine non hanno mai lo
     stesso fondo. Solo tema chiaro.
   - Forme: bottoni ed etichette a pillola, riquadri a raggio 16, pannelli grandi a raggio 28.
   - Icone: Lucide, le stesse del gestionale, in /img/icone.svg.
   - Moto: il contenuto è sempre visibile; lo script nasconde solo ciò che sta sotto la piega
     al caricamento e lo fa comparire quando ci si arriva. Con «riduci movimento» non si muove
     niente. */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/bricolage-latin.woff2) format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/figtree-latin.woff2) format("woff2");}
/* Logotipo: sottoinsieme di Nunito 900 con le sole lettere di «Visitu» (lo stesso file del gestionale). */
@font-face{font-family:"Nunito Visitu";font-style:normal;font-weight:900;font-display:swap;src:url(data:font/woff2;base64,d09GMgABAAAAAATAABAAAAAACRAAAARmAAOaHQAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbgW4cZAZgP1NUQVREAEwRCAqFHIQdATYCJAMoCxYABCAFhBwHIAwHG2cHUVRRdlJ8XcANGbwhmmEBRVOq2p7d1OLRKmSbEbpG8/gpYB3tBAMHO4YnCPGNs4Sv8fz/7/e/ufY9X8QR9foZXbNGRieJlkQkESmRn5HIoHl/Pt9a+2uHVbN5pHNJiMqsns6czCKtQkk0Os00Ejo8z/+h3pc1eSwK2DoewPDoGrjAi8Wy1HsKWu0f0st86ySPWq9LKewdwan5raZWs/+xGgs3wD867Cw18odtMLN92hNv/nHv/mxMH5N74mGgn6wx13m0gMYCTDAL62MbrIu6QMeiMTnCxD1za4jQCBRGZMdaOOIQP1GfR/8rglFAKVGiGRDBsAOylP3s8ja6r66bVXQ/U8HQTYXevyBPVpOhHUE0ZVAZdoxkXEOZN0xSShPNElkZ00yT3aTiHkbTT0W9bzmnAHd78qGy1mh3iH5RHxxixJkmbx4uHdDn7KiNI1NdscwdFY5fApDD5hLROQfqMzeqpsY5SMAuI9fIyuHqMxr1UQmw2XSTI4azg2qH4dfLE3GPJbf6/F8ObZ1Dzp3Ob2US2ygiBhVmydhFfneKQoJ49EKrEkE0kyRIu3sGOlHZDggodJilCGapzoFhg0rZZleJWwBYrZ695grLov9hIoUhGAazYBBb4C8YxyggSgoRQUbB4yhJ87AiGo4PSYeUVQ8jrFEpfziwfBxhDVZKBpUMeONT0qZNd3USbEyc4mtS1ru6itQVW4fWvZevaytv7lfq3e1qMyGtjuozt5fsv3W7m6ttLWnoofbNdf4ARKOS9+yu1B2K771mYHyMkDaOIFsVaxSSghEYto1WunokvxGiRTGnx/uK2emjVTzTKGA65QlyH3e0jsayxHge6q+nR6Gn/jE5RsbVw/du+eDnkypTVv/0JHR1jsXD3FI1Ut1kgsvdeYGVaoDJAKrqEgymxJnVQO8wdgc1yzTndMH2yixQmd0vfGRXecb3aWmVTRo4xHinlBdQ2Vt8SReDSxTMM4T4iBSZk//fajK3kbAPbdgxLBQJsrmVl5WT1QHyJtgpAKeYicfhguTkPEqV5KmkXOQhqSQtGrfzBl3D5x72Bts9YicAnGD7ituyNQQmUM4xYNcfsCsGD26rCUwy7mjUAQazgUpvcAbJKwoGDHkHg3CqvOtPvhJ0X7N6nxY6YfTHo3Q/4UufXfgep/0N8bapyoF+BcKDsN17dKJLHSDR/sP5L175oZ8l/pWb/L7fRvOhvPoAsawDvWYSht2jeUwNM8FxI95QpDaE9wAgjriBMu4zdG74bW5O6LOcbep+h3KhLIzmPmCH/wSGDOcpe/smvTKFq7vWVOIoEoi4qJgkYluRhVjlYkoEjljXxJVZDAIxwSUUcU0thFeRINS15EVEOEqFzqULM3A169Mc56iy2DhGaIlgd7bzERw744rQRC1zD59URRkqNlkcLow3JfJ1aVFxBavWrJpRiK28aIZYu8bRnCXKJpLrF8Xas5qnLBCoqhKD3jiZu1GMAvQ6DNPCT7G1Aw==) format("woff2");unicode-range:U+56,U+69,U+73,U+74,U+75;}

/* ---------- Token ---------- */
:root{
  color-scheme:light;
  /* L'onda del marchio, nel suo ordine. */
  --frozen:#BEE9E8; --pale:#CAE9FF; --fresh:#5FA8D3; --pacific:#62B6CB; --yale:#1B4965;

  --bg:#FFFFFF;
  --alt:#EDF6F9;                 /* il fondo delle sezioni alterne, scelto dal committente */
  --tint:#F5FAFC;
  --ink:#0F2D42;                 /* titoli: 14,2:1 sul bianco */
  --text:#3B5467;                /* testo corrente: 7,9:1 sul bianco, 7,2:1 su --alt */
  --muted:#557085;               /* didascalie: 5,2:1 sul bianco, 4,7:1 su --alt */
  --line:#D6E5EE; --line-strong:#B4CDDD;

  --primary:#1F6B99;             /* azioni: bianco sopra 5,8:1 */
  --primary-hover:#1B4965;
  --primary-soft:#E2F0F8;        /* il blu che parla su questa tinta resta a 5,0:1 */

  --deep:#0C2738; --deep-2:#12344A;      /* demo, sicurezza, piede */
  --on-deep:#C9DCE8;                     /* testo secondario sul navy: 10,9:1 */

  --stop:#B3261E; --stop-bg:#FDECEA; --warn:#8A5A00; --warn-bg:#FFF4E0; --ok:#1B5E43; --ok-bg:#E3F4EC;

  --font-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo:"Nunito Visitu", var(--font-display);

  --wrap:1240px;
  --pad:clamp(1rem, 4vw, 2rem);
  --section:clamp(4.5rem, 9vw, 8rem);
  --r-sm:10px; --r:16px; --r-lg:clamp(20px, 2.6vw, 28px);
  --shadow-1:0 1px 2px rgba(15,45,66,.06), 0 10px 28px -14px rgba(15,45,66,.22);
  --shadow-2:0 2px 6px rgba(15,45,66,.06), 0 34px 70px -34px rgba(15,45,66,.5);
  --ease:cubic-bezier(.16,1,.3,1);       /* uscita esponenziale */
  --header-h:72px;
  /* Livelli: niente valori a caso. */
  --z-header:20; --z-drawer:40; --z-skip:60;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; font-optical-sizing:auto;
  color:var(--ink); margin:0; line-height:1.12; letter-spacing:-.018em; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; }
img,svg,video,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
strong,b{ font-weight:700; }
::selection{ background:var(--primary); color:#fff; }
:focus-visible{ outline:2.5px solid var(--primary); outline-offset:3px; border-radius:6px; }
.on-deep :focus-visible,.site-footer :focus-visible{ outline-color:#fff; }

.ico{ width:1.25rem; height:1.25rem; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--section); }
.section--alt{ background:var(--alt); }
.section--tight{ padding-block:clamp(3rem, 6vw, 5rem); }

.skip-link{ position:fixed; inset-block-start:-120px; inset-inline-start:1rem; z-index:var(--z-skip);
  background:var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r-sm); }
.skip-link:focus{ inset-block-start:1rem; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Titoli di sezione ---------- */
.head{ max-width:46rem; margin-block-end:clamp(2.25rem, 4.5vw, 3.5rem); }
.head h2{ font-size:clamp(1.95rem, 1.35rem + 2.2vw, 3rem); }
.head p{ margin-block-start:1rem; font-size:clamp(1.06rem, 1rem + .25vw, 1.2rem); color:var(--text); max-width:40rem; }
.head--center{ margin-inline:auto; text-align:center; }
.head--center p{ margin-inline:auto; }
/* Il segnaposto prima di un titolo: si usa una volta ogni tanto, mai come grammatica di sezione. */
.kicker{ display:inline-flex; align-items:center; gap:.55rem; margin-block-end:1.1rem;
  font-weight:700; font-size:.95rem; color:var(--primary); }
.kicker .ico{ width:1.15rem; height:1.15rem; }
.kicker--pill{ padding:.38rem .95rem .38rem .8rem; border-radius:999px; background:#fff;
  border:1px solid var(--line); box-shadow:0 1px 2px rgba(15,45,66,.05); }
.kicker--light{ color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); box-shadow:none; }

/* ---------- Bottoni ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:48px;
  padding:.75em 1.45em; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font-family:var(--font-body); font-weight:700; font-size:1rem; line-height:1; white-space:nowrap;
  transition:background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .1s; }
.btn .ico{ width:1.05rem; height:1.05rem; stroke-width:2.2; transition:transform .3s var(--ease); }
.btn:hover .ico{ transform:translate(2px,-2px); }
.btn .ico--r{ transition:transform .3s var(--ease); }
.btn:hover .ico--r{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px); }
.btn--lg{ min-height:54px; padding:.85em 1.7em; font-size:1.05rem; }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 8px 20px -10px rgba(31,107,153,.75); }
.btn--primary:hover{ background:var(--primary-hover); }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--primary); color:var(--primary); }
.btn--white{ background:#fff; color:var(--primary-hover); }
.btn--white:hover{ background:var(--frozen); color:var(--yale); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.link{ color:var(--primary); font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
.link:hover{ color:var(--primary-hover); text-decoration-thickness:2px; }
.link--light{ color:#fff; }
.link--light:hover{ color:var(--frozen); }
.more{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--primary); }
.more .ico{ width:1.05rem; height:1.05rem; stroke-width:2.2; transition:transform .3s var(--ease); }

/* ---------- Logo ----------
   Il marchio è SVG (targa, V, le tre righe del messaggio) e il logotipo è testo vero. */
.logo{ display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); flex:none; }
.logo svg{ width:38px; height:38px; flex:none; }
.logo .lm-plate{ fill:var(--yale); }
.logo .lm-glyph{ fill:#fff; font-family:var(--font-logo); }
.logo__word{ display:inline-flex; font-family:var(--font-logo); font-weight:900; font-size:1.6rem;
  letter-spacing:-.012em; line-height:1; padding-block-start:.08em; }
.logo__word i{ font-style:normal; display:inline-block; }
.logo--light{ color:#fff; }
.logo--light .lm-plate{ fill:rgba(255,255,255,.08); }
@media (prefers-reduced-motion:no-preference){
  .logo--anim .lm-plate{ animation:markIn .5s var(--ease) both; }
  .logo--anim .lm-glyph{ animation:fadeUp .45s var(--ease) both .15s; }
  .logo--anim .lm-bar{ animation:barIn .4s var(--ease) both; }
  .logo--anim .lm-bar:nth-of-type(1){ animation-delay:.75s; }
  .logo--anim .lm-bar:nth-of-type(2){ animation-delay:.85s; }
  .logo--anim .lm-bar:nth-of-type(3){ animation-delay:.95s; }
  .logo--anim .logo__word i{ animation:fadeUp .3s var(--ease) both; }
  .logo--anim .logo__word i:nth-child(1){ animation-delay:.28s; }
  .logo--anim .logo__word i:nth-child(2){ animation-delay:.36s; }
  .logo--anim .logo__word i:nth-child(3){ animation-delay:.44s; }
  .logo--anim .logo__word i:nth-child(4){ animation-delay:.52s; }
  .logo--anim .logo__word i:nth-child(5){ animation-delay:.6s; }
  .logo--anim .logo__word i:nth-child(6){ animation-delay:.68s; }
}
@keyframes markIn{ from{ transform:scale(.7); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(.15em); } to{ opacity:1; transform:none; } }
@keyframes barIn{ from{ opacity:0; transform:translateX(-.3em); } to{ opacity:1; transform:none; } }

/* ---------- Header ---------- */
.site-header{ position:sticky; inset-block-start:0; z-index:var(--z-header);
  background:rgba(255,255,255,.94); border-block-end:1px solid transparent;
  transition:border-color .25s, box-shadow .25s, background-color .25s; }
@supports (backdrop-filter:blur(1px)){
  .site-header{ background:rgba(255,255,255,.82); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); }
}
.site-header.is-raised{ border-color:var(--line); box-shadow:0 10px 30px -18px rgba(15,45,66,.35); }
.nav{ display:flex; align-items:center; gap:1rem; min-height:var(--header-h); }
.nav__links{ display:none; list-style:none; align-items:center; gap:.35rem; margin-inline-start:clamp(1rem, 3vw, 2.5rem); }
.nav__links a{ display:inline-flex; align-items:center; min-height:44px; padding:.4rem .85rem; border-radius:999px;
  font-weight:700; font-size:1rem; color:var(--ink); transition:background-color .2s, color .2s; }
.nav__links a:hover{ background:var(--alt); color:var(--primary); }
.nav__links a[aria-current="page"]{ background:var(--primary-soft); color:var(--primary-hover); }
.nav__actions{ display:none; align-items:center; gap:.6rem; margin-inline-start:auto; }
.nav__burger{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; margin-inline-start:auto;
  min-height:44px; padding:0 1rem; border:1px solid var(--line-strong); border-radius:999px; background:#fff;
  font:inherit; font-weight:700; font-size:.95rem; color:var(--ink); cursor:pointer; }
.nav__burger .ico{ width:1.2rem; height:1.2rem; }
html:not(.js) .nav__burger{ display:none; }
.nav__nojs{ display:none; margin-inline-start:auto; font-weight:700; color:var(--primary); }
html:not(.js) .nav__nojs{ display:inline-flex; }
@media (min-width:1000px){
  .nav__links,.nav__actions{ display:flex; }
  .nav__burger, html:not(.js) .nav__nojs{ display:none; }
}

/* Menu su telefono: un <dialog> vero, quindi Esc, focus e sfondo inerte li gestisce il browser. */
.drawer{ position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0;
  border:0; background:#fff; color:var(--ink); overflow-y:auto; }
html:has(.drawer[open]){ overflow:hidden; }
.drawer::backdrop{ background:rgba(12,39,56,.35); }
.drawer__in{ min-height:100%; display:flex; flex-direction:column; padding:.9rem var(--pad) 2rem; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:56px; }
.drawer__close{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
  border:1px solid var(--line-strong); border-radius:50%; background:#fff; color:var(--ink); cursor:pointer; }
.drawer__close .ico{ width:1.4rem; height:1.4rem; }
.drawer__links{ list-style:none; margin-block-start:1.5rem; }
.drawer__links a{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem .2rem; border-block-end:1px solid var(--line);
  font-family:var(--font-display); font-weight:700; font-size:1.65rem; letter-spacing:-.015em; color:var(--ink); }
.drawer__links a[aria-current="page"]{ color:var(--primary); }
.drawer__links .ico{ width:1.4rem; height:1.4rem; color:var(--primary); }
.drawer__cta{ display:grid; gap:.7rem; margin-block-start:auto; padding-block-start:2rem; }
.drawer__cta .btn{ width:100%; }
@media (prefers-reduced-motion:no-preference){
  .drawer[open]{ animation:drawerIn .35s var(--ease); }
  @keyframes drawerIn{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }
}

/* ---------- Cornici: browser e telefono ----------
   Dentro ci sono schermate VERE, prese dallo studio dimostrativo. La barra dice solo dove
   vive il gestionale: sul sottodominio dello studio. */
.shot{ margin:0; position:relative; border-radius:14px; overflow:hidden; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-2); }
.shot__bar{ display:flex; align-items:center; gap:.42rem; padding:.6rem .8rem; background:#F3F8FB;
  border-block-end:1px solid var(--line); }
.shot__bar i{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); flex:none; }
.shot__url{ margin-inline-start:.6rem; padding:.18rem .8rem; border-radius:999px; background:#fff;
  border:1px solid var(--line); font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shot img{ width:100%; height:auto; }
.shot figcaption{ padding:.95rem 1.15rem; font-size:.95rem; color:var(--text); border-block-start:1px solid var(--line); background:#fff; }
.device{ position:relative; margin:0; width:min(290px, 76vw); border-radius:40px; padding:9px; background:var(--ink);
  box-shadow:var(--shadow-2); }
.device img{ width:100%; height:auto; border-radius:31px; }

/* ---------- Hero (home) ---------- */
.hero{ position:relative; overflow:clip; padding-block:clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem);
  background:
    radial-gradient(52% 58% at 88% 18%, rgba(202,233,255,.9), transparent 70%),
    radial-gradient(40% 50% at 62% 92%, rgba(190,233,232,.75), transparent 70%),
    linear-gradient(180deg, #fff 0%, #F7FBFD 100%); }
.hero__grid{ position:relative; display:grid; gap:clamp(2.5rem, 5vw, 4rem); align-items:center; }
@media (min-width:1000px){ .hero__grid{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); } }
.hero__title{ font-size:clamp(2.7rem, 1.7rem + 4.1vw, 4.8rem); line-height:1.02; letter-spacing:-.032em; font-weight:750; }
.hero__title .hl{ color:var(--primary); }
.hero__lead{ margin-block-start:1.4rem; max-width:31rem; font-size:clamp(1.12rem, 1rem + .45vw, 1.32rem); line-height:1.55; color:var(--text); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-block-start:2rem; }
@media (max-width:480px){ .hero__cta .btn{ flex:1 1 100%; } }
.hero__visual{ position:relative; }
.hero__visual .shot{ transform-origin:left center; }
.hero__visual .device{ position:absolute; inset-inline-start:-6%; inset-block-end:-12%; width:27%; min-width:150px;
  border-radius:32px; padding:7px; }
.hero__visual .device img{ border-radius:26px; }
@media (max-width:699px){
  .hero__visual .shot{ display:none; }
  .hero__visual .device{ position:relative; inset:auto; width:min(280px, 74vw); margin-inline:auto; border-radius:40px; padding:9px; }
  .hero__visual .device img{ border-radius:31px; max-height:min(560px, 64vh); object-fit:cover; object-position:top; }
}
@media (min-width:700px) and (max-width:999px){ .hero__visual{ margin-inline-start:6%; } }
@media (prefers-reduced-motion:no-preference){
  .hero__copy > *{ animation:rise .8s var(--ease) both; }
  .hero__copy > :nth-child(2){ animation-delay:.07s; }
  .hero__copy > :nth-child(3){ animation-delay:.14s; }
  .hero__copy > :nth-child(4){ animation-delay:.21s; }
  .hero__visual .shot{ animation:shotIn 1s var(--ease) both .15s; }
  .hero__visual .device{ animation:rise .9s var(--ease) both .45s; }
  @keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
  @keyframes shotIn{ from{ opacity:0; transform:translateY(24px) scale(.97); } to{ opacity:1; transform:none; } }
}

/* ---------- I quattro fatti ---------- */
.facts{ border-block:1px solid var(--line); background:#fff; }
.facts__row{ list-style:none; display:grid; grid-template-columns:1fr 1fr; }
@media (min-width:1000px){ .facts__row{ grid-template-columns:repeat(4,1fr); } }
.fact{ display:grid; grid-template-columns:auto 1fr; column-gap:.85rem; align-items:center;
  padding:1.25rem clamp(.75rem, 2vw, 1.5rem); }
.fact + .fact{ border-inline-start:1px solid var(--line); }
@media (max-width:999px){
  .fact:nth-child(3){ border-inline-start:0; }
  .fact:nth-child(n+3){ border-block-start:1px solid var(--line); }
}
.fact .ico{ grid-row:span 2; width:1.6rem; height:1.6rem; color:var(--primary); stroke-width:1.7; }
.fact__k{ font-size:.86rem; color:var(--muted); line-height:1.3; }
.fact__v{ font-family:var(--font-display); font-weight:700; font-size:clamp(.98rem, .9rem + .3vw, 1.12rem); line-height:1.25; color:var(--ink); }
@media (max-width:420px){ .fact{ grid-template-columns:1fr; row-gap:.35rem; } .fact .ico{ grid-row:auto; } }

/* ---------- Le cinque specialità: in fila sono l'onda del marchio ---------- */
.spectrum{ list-style:none; display:grid; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
@media (min-width:640px){ .spectrum{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .spectrum{ grid-template-columns:repeat(5,1fr); } }
.spec{ display:flex; flex-direction:column; padding:2rem 1.5rem 1.6rem; box-shadow:inset 0 8px 0 var(--c);
  border-block-end:1px solid var(--line); }
@media (min-width:640px){ .spec{ border-inline-end:1px solid var(--line); } }
@media (min-width:640px) and (max-width:1099px){ .spec:nth-child(2n){ border-inline-end:0; } .spec:last-child{ grid-column:1 / -1; } }
@media (min-width:1100px){ .spec{ border-block-end:0; } .spec:last-child{ border-inline-end:0; } }
.spec:nth-child(1){ --c:var(--frozen); } .spec:nth-child(2){ --c:var(--pale); } .spec:nth-child(3){ --c:var(--fresh); }
.spec:nth-child(4){ --c:var(--pacific); } .spec:nth-child(5){ --c:var(--yale); }
.spec__ico{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%;
  background:color-mix(in srgb, var(--c) 42%, #fff); color:var(--yale); }
.spec:nth-child(5) .spec__ico{ background:var(--yale); color:#fff; }
.spec__ico .ico{ width:1.45rem; height:1.45rem; stroke-width:1.8; }
.spec h3{ margin-block-start:1.15rem; font-size:1.32rem; }
.spec p{ margin-block-start:.6rem; font-size:.98rem; color:var(--text); }
.spec__term{ align-self:flex-start; margin-block-start:auto; padding:.28rem .8rem; border-radius:999px;
  border:1px solid var(--line-strong); font-size:.84rem; font-weight:700; color:var(--primary); }
.spec p + .spec__term{ margin-block-start:1.3rem; }
.spectrum-note{ margin-block-start:1.75rem; max-width:52rem; color:var(--text); }

/* ---------- Perché: titolo fermo a sinistra, ragioni che scorrono ---------- */
.why{ display:grid; gap:clamp(2rem, 5vw, 5rem); align-items:start; }
@media (min-width:1000px){
  .why{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  .why .head{ position:sticky; inset-block-start:calc(var(--header-h) + 2.5rem); margin-block-end:0; }
}
.reasons{ list-style:none; display:grid; }
.reason{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding-block:1.9rem; border-block-start:1px solid var(--line); }
.reason:last-child{ border-block-end:1px solid var(--line); }
.reason > .ico{ width:1.75rem; height:1.75rem; margin-block-start:.2rem; color:var(--primary); stroke-width:1.7; }
.reason h3{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.reason p{ margin-block-start:.65rem; max-width:38rem; }

/* ---------- La demo giocabile ---------- */
.stage{ position:relative; overflow:hidden; border-radius:var(--r-lg); color:var(--on-deep);
  padding:clamp(1.5rem, 5vw, 4rem);
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(98,182,203,.32), transparent 62%),
    radial-gradient(55% 60% at 0% 100%, rgba(95,168,211,.26), transparent 62%),
    linear-gradient(160deg, var(--deep-2), var(--deep)); }
.stage h2{ color:#fff; font-size:clamp(1.95rem, 1.35rem + 2.2vw, 3rem); max-width:22ch; }
.stage__lead{ margin-block-start:1rem; max-width:42rem; font-size:clamp(1.06rem, 1rem + .25vw, 1.2rem); }
.legend{ list-style:none; display:grid; gap:.8rem; margin-block:2rem 2.2rem; }
@media (min-width:820px){ .legend{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
.legend li{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  padding:1rem 1.1rem; border-radius:var(--r); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  font-size:.97rem; line-height:1.5; }
.legend b{ display:block; color:#fff; }
.legend__ico{ display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; }
.legend__ico .ico{ width:1.1rem; height:1.1rem; stroke-width:2.3; }
.legend li:nth-child(1) .legend__ico{ background:var(--stop-bg); color:var(--stop); }
.legend li:nth-child(2) .legend__ico{ background:var(--warn-bg); color:var(--warn); }
.legend li:nth-child(3) .legend__ico{ background:var(--frozen); color:var(--yale); }
.stage .shot{ border-color:rgba(255,255,255,.2); box-shadow:0 40px 80px -40px rgba(0,0,0,.6); }
/* L'iframe ha sandbox="allow-scripts" SENZA allow-same-origin: origine opaca, quindi non legge
   i cookie di visitu.it, non tocca questa pagina e non può portare via la navigazione. */
.shot iframe{ width:100%; border:0; background:#fff; height:clamp(540px, 66vh, 680px); }
@media (max-width:759px){ .shot iframe{ height:clamp(600px, 88vh, 760px); } }
.stage__note{ margin-block-start:1.5rem; max-width:52rem; }

/* ---------- Riquadri per approfondire (bento) ---------- */
.bento{ display:grid; gap:1.1rem; }
@media (min-width:900px){
  .bento{ grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(0,auto); }
  .tile--wide{ grid-column:1 / span 4; }
  .tile--tall{ grid-column:5 / span 2; grid-row:1 / span 2; }
  .tile--a{ grid-column:1 / span 2; }
  .tile--b{ grid-column:3 / span 2; }
}
.tile{ position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-lg);
  padding:clamp(1.5rem, 3vw, 2.2rem); background:#fff; border:1px solid var(--line); color:var(--text);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .25s; }
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-1); border-color:var(--line-strong); }
.tile h3{ font-size:clamp(1.35rem, 1.15rem + .7vw, 1.75rem); max-width:22ch; }
.tile p{ margin-block-start:.7rem; max-width:34rem; }
.tile .more{ margin-block-start:1.3rem; }
.tile:hover .more .ico{ transform:translateX(4px); }
/* Il link copre tutto il riquadro, ma il testo resta selezionabile e il nome accessibile è il titolo. */
.tile__link::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.tile__link:focus-visible{ outline:0; }
.tile:has(.tile__link:focus-visible){ outline:2.5px solid var(--primary); outline-offset:3px; }
.tile--wide{ padding-block-end:0; }
.tile--wide .tile__media{ margin-block-start:1.8rem; margin-inline-end:calc(-1 * clamp(1.5rem, 3vw, 2.2rem)); }
.tile--wide .tile__media .shot{ border-end-start-radius:0; border-end-end-radius:0; border-start-end-radius:0;
  border-block-end:0; border-inline-end:0; box-shadow:0 -12px 40px -24px rgba(15,45,66,.4); }
.tile--tall{ background:linear-gradient(180deg, var(--pale), #E6F4FE 60%, #fff); border-color:transparent; padding-block-end:0; }
.tile--tall .tile__phone{ position:relative; flex:1 1 auto; min-height:320px; margin-block-start:1.8rem; }
.tile--tall .device{ position:absolute; inset-block-start:0; inset-inline:0; margin-inline:auto; width:min(250px, 76%); }
@media (max-width:899px){ .tile--tall .tile__phone{ min-height:360px; } }
.tile--a{ background:linear-gradient(160deg, #DFF4F3, var(--frozen)); border-color:transparent; }
.tile--a .chips{ margin-block-start:1.2rem; }
.tile--b{ background:linear-gradient(160deg, var(--deep-2), var(--deep)); border-color:transparent; color:var(--on-deep); }
.tile--b h3{ color:#fff; }
.tile--b .more{ color:#fff; }
.tile--b .tile__ico{ color:var(--frozen); }
.tile__ico{ width:2rem; height:2rem; margin-block-end:1.1rem; color:var(--primary); stroke-width:1.7; }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; }
.chips li{ padding:.32rem .85rem; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid rgba(27,73,101,.18);
  font-size:.88rem; font-weight:700; color:var(--yale); }

/* ---------- Fascia d'invito ---------- */
.cta-band{ display:grid; gap:1.75rem; align-items:center; border-radius:var(--r-lg);
  padding:clamp(1.75rem, 5vw, 3.75rem); background:linear-gradient(120deg, var(--pale) 0%, #DDF1F6 55%, var(--frozen) 100%); }
@media (min-width:900px){ .cta-band{ grid-template-columns:minmax(0,1.3fr) auto; gap:3rem; } }
.cta-band h2{ font-size:clamp(1.85rem, 1.3rem + 2vw, 2.8rem); max-width:20ch; }
.cta-band p{ margin-block-start:.9rem; max-width:38rem; color:var(--text); font-size:1.08rem; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
@media (max-width:480px){ .cta-band__actions .btn{ flex:1 1 100%; } }

/* ---------- Testata delle pagine interne ---------- */
.page-head{ padding-block:clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); background:
    radial-gradient(45% 80% at 95% 0%, rgba(202,233,255,.85), transparent 70%),
    radial-gradient(35% 60% at 70% 100%, rgba(190,233,232,.6), transparent 70%), var(--alt); }
.page-head h1{ font-size:clamp(2.4rem, 1.5rem + 3.4vw, 4rem); line-height:1.04; letter-spacing:-.03em; max-width:18ch; }
.page-head__lead{ margin-block-start:1.2rem; max-width:40rem; font-size:clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height:1.55; }
.toc{ list-style:none; display:flex; flex-wrap:wrap; gap:.55rem; margin-block-start:2rem; }
.toc a{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.45rem 1rem; border-radius:999px;
  background:#fff; border:1px solid var(--line); font-weight:700; font-size:.95rem; color:var(--ink);
  transition:border-color .2s, color .2s; }
.toc a:hover{ border-color:var(--primary); color:var(--primary); }
.toc .ico{ width:1.05rem; height:1.05rem; color:var(--primary); }

/* ---------- Funzioni: righe testo e schermata ---------- */
.row{ display:grid; gap:clamp(2rem, 5vw, 4.5rem); align-items:center; }
.row + .row{ margin-block-start:clamp(4rem, 8vw, 7rem); }
@media (min-width:960px){
  .row{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .row--flip{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
  .row--flip .row__text{ order:2; }
}
.row h3{ font-size:clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem); max-width:20ch; }
.row p{ margin-block-start:1rem; max-width:34rem; font-size:1.06rem; }
.ticks{ list-style:none; display:grid; gap:.75rem; margin-block-start:1.6rem; }
.ticks li{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start; color:var(--ink); }
.ticks .ico{ width:1.35rem; height:1.35rem; padding:3px; margin-block-start:.12rem; border-radius:50%;
  background:var(--primary-soft); color:var(--primary); stroke-width:2.6; }
/* La schermata poggia su un riquadro tinto sfalsato: dà profondità senza ombre pesanti. */
.media{ position:relative; isolation:isolate; }
.media::before{ content:""; position:absolute; z-index:-1; inset-block:10% -7%; inset-inline:-5% 12%;
  border-radius:var(--r-lg); background:linear-gradient(140deg, var(--pale), var(--frozen)); }
.row--flip .media::before{ inset-inline:12% -5%; }
@media (max-width:959px){ .media::before, .row--flip .media::before{ inset-inline:-3%; inset-block:6% -4%; } }
.duo{ display:grid; gap:1.5rem; align-items:start; margin-block-start:clamp(4rem, 8vw, 7rem); }
@media (min-width:900px){ .duo{ grid-template-columns:1fr 1fr; gap:1.75rem; } }

/* ---------- Funzioni: i quattro gruppi ---------- */
.groups{ display:grid; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
@media (min-width:700px){ .groups{ grid-template-columns:1fr 1fr; } }
@media (min-width:1150px){ .groups{ grid-template-columns:repeat(4,1fr); } }
.group{ padding:clamp(1.5rem, 3vw, 2.2rem); border-block-end:1px solid var(--line); }
@media (min-width:700px){ .group{ border-inline-end:1px solid var(--line); } .group:nth-child(2n){ border-inline-end:0; } .group:nth-child(n+3){ border-block-end:0; } }
@media (min-width:1150px){ .group{ border-block-end:0; border-inline-end:1px solid var(--line); } .group:nth-child(2n){ border-inline-end:1px solid var(--line); } .group:last-child{ border-inline-end:0; } }
@media (max-width:699px){ .group:last-child{ border-block-end:0; } }
.group > .ico{ width:2.1rem; height:2.1rem; color:var(--primary); stroke-width:1.6; }
.group h3{ margin-block-start:1rem; font-size:1.4rem; }
.group dl{ display:grid; gap:1.05rem; margin:1.3rem 0 0; padding-block-start:1.3rem; border-block-start:1px solid var(--line); }
.group dt{ font-weight:700; color:var(--ink); line-height:1.35; }
.group dd{ margin:.2rem 0 0; font-size:.97rem; line-height:1.55; }

/* ---------- Portale delle famiglie ---------- */
.family{ display:grid; gap:clamp(2.5rem, 5vw, 5rem); align-items:center; }
@media (min-width:900px){ .family{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); } }
.family__visual{ position:relative; display:grid; place-items:center; padding-block:2rem; isolation:isolate; }
.family__visual::before{ content:""; position:absolute; z-index:-1; width:min(100%, 440px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--pale) 0 52%, color-mix(in srgb, var(--pale) 45%, #fff) 52% 66%, transparent 66%); }
.family h2{ font-size:clamp(1.95rem, 1.35rem + 2.2vw, 3rem); max-width:20ch; }
.family__lead{ margin-block-start:1rem; max-width:40rem; font-size:1.1rem; }
.feats{ list-style:none; display:grid; gap:1.5rem 2rem; margin-block-start:2rem; }
@media (min-width:600px){ .feats{ grid-template-columns:1fr 1fr; } }
.feats li{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; }
.feats .ico{ width:1.5rem; height:1.5rem; padding:4px; border-radius:50%; background:var(--primary); color:#fff; stroke-width:2.6; margin-block-start:.1rem; }
.feats strong{ display:block; font-family:var(--font-display); font-size:1.1rem; color:var(--ink); line-height:1.3; }
.feats p{ margin-block-start:.25rem; font-size:.98rem; }

/* ---------- Dati e sicurezza ---------- */
.vault{ display:grid; gap:clamp(2rem, 4vw, 3.5rem); align-items:center; border-radius:var(--r-lg); color:var(--on-deep);
  padding:clamp(1.5rem, 5vw, 4rem);
  background:radial-gradient(60% 80% at 0% 0%, rgba(98,182,203,.25), transparent 60%), linear-gradient(160deg, var(--deep-2), var(--deep)); }
@media (min-width:1000px){ .vault{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
.vault h2{ color:#fff; font-size:clamp(1.95rem, 1.35rem + 2.2vw, 3rem); max-width:16ch; }
.vault__lead{ margin-block-start:1rem; max-width:34rem; font-size:1.08rem; }
.vault__list{ list-style:none; display:grid; gap:.8rem; }
@media (min-width:600px){ .vault__list{ grid-template-columns:1fr 1fr; } }
.vault__list li{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; padding:1.05rem 1.1rem;
  border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); font-size:.95rem; line-height:1.5; }
.vault__list .ico{ width:2rem; height:2rem; padding:.42rem; border-radius:50%; background:rgba(190,233,232,.16); color:var(--frozen); stroke-width:1.9; }
.vault__list strong{ display:block; color:#fff; font-size:1rem; margin-block-end:.15rem; }

/* ---------- Pacchetti ---------- */
.plans{ display:grid; gap:1.5rem; align-items:stretch; }
@media (min-width:900px){ .plans{ grid-template-columns:1fr 1fr; gap:1.75rem; } }
.plan{ position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); padding:clamp(1.75rem, 3.6vw, 2.9rem);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-1); }
.plan--featured{ color:var(--on-deep); border-color:transparent;
  background:radial-gradient(70% 60% at 100% 0%, rgba(98,182,203,.3), transparent 60%), linear-gradient(160deg, var(--deep-2), var(--deep)); }
.plan__badge{ position:absolute; inset-block-start:1.5rem; inset-inline-end:1.5rem; padding:.32rem .9rem; border-radius:999px;
  background:var(--frozen); color:var(--yale); font-weight:700; font-size:.84rem; }
.plan__name{ font-size:1.75rem; }
.plan--featured .plan__name{ color:#fff; }
.plan__tag{ margin-block-start:.45rem; font-size:1.05rem; }
.plan__price{ margin-block-start:1.6rem; padding-block-end:1.6rem; border-block-end:1px solid var(--line);
  font-family:var(--font-display); font-weight:700; font-size:clamp(2rem, 1.5rem + 1.8vw, 2.75rem); line-height:1.05; letter-spacing:-.02em; color:var(--primary); }
.plan--featured .plan__price{ color:#fff; border-color:rgba(255,255,255,.18); }
.plan__price small{ display:block; margin-block-start:.75rem; font-family:var(--font-body); font-weight:400; font-size:.98rem; line-height:1.5; letter-spacing:0; color:var(--text); }
.plan--featured .plan__price small{ color:var(--on-deep); }
.plan__inherit{ margin-block-start:1.6rem; font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:#fff; }
.plan__list{ list-style:none; display:grid; gap:.85rem; margin-block-start:1.5rem; }
.plan__inherit + .plan__list{ margin-block-start:1rem; }
.plan__list li{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start; line-height:1.5; }
.plan__list .ico{ width:1.35rem; height:1.35rem; padding:3px; margin-block-start:.12rem; border-radius:50%; background:var(--primary-soft); color:var(--primary); stroke-width:2.6; }
.plan--featured .plan__list li{ color:#fff; }
.plan--featured .plan__list .ico{ background:var(--frozen); color:var(--yale); }
.plan__cta{ margin-block-start:auto; padding-block-start:2rem; }
.plan__cta .btn{ width:100%; }
.plans-note{ margin:2rem auto 0; max-width:46rem; text-align:center; }

/* ---------- Come si parte: una sequenza vera, quindi i numeri dicono qualcosa ---------- */
.steps{ list-style:none; counter-reset:passo; display:grid; gap:2.25rem 2rem; }
@media (min-width:860px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.steps--3{ }
@media (min-width:860px){ .steps--3{ grid-template-columns:repeat(3,1fr); } }
.step{ position:relative; counter-increment:passo; }
.step__num{ position:relative; z-index:1; display:grid; place-items:center; width:3.25rem; height:3.25rem; border-radius:50%;
  background:#fff; border:1px solid var(--line-strong); font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--primary); }
.step__num::before{ content:counter(passo); }
@media (min-width:860px){
  .step:not(:last-child)::after{ content:""; position:absolute; inset-block-start:1.625rem; inset-inline:4.25rem -1rem;
    border-block-start:2px dashed var(--line-strong); }
}
.step h3{ margin-block-start:1.2rem; font-size:1.3rem; }
.step p{ margin-block-start:.6rem; font-size:1rem; }

/* ---------- FAQ: <details> nativi, uno aperto alla volta (attributo name) ---------- */
.faq{ max-width:58rem; margin-inline:auto; display:grid; gap:.75rem; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--r); transition:border-color .25s, box-shadow .25s; }
.faq details[open]{ border-color:var(--primary); box-shadow:var(--shadow-1); }
.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding:1.2rem 1.4rem; cursor:pointer;
  list-style:none; font-family:var(--font-display); font-weight:700; font-size:clamp(1.04rem, 1rem + .3vw, 1.2rem); line-height:1.3; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ico{ width:2.2rem; height:2.2rem; padding:.5rem; border-radius:50%; background:var(--primary-soft); color:var(--primary);
  stroke-width:2.3; transition:transform .3s var(--ease), background-color .25s, color .25s; }
.faq details[open] summary .ico{ transform:rotate(180deg); background:var(--primary); color:#fff; }
.faq__a{ padding:0 1.4rem 1.4rem; max-width:50rem; }
/* Dove il browser lo sa fare, la risposta si apre in altezza; altrove si apre e basta. */
@supports (interpolate-size:allow-keywords){
  .faq{ interpolate-size:allow-keywords; }
  .faq details::details-content{ height:0; overflow:clip; transition:height .35s var(--ease), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content{ height:auto; }
}
@media (prefers-reduced-motion:reduce){ .faq details::details-content{ transition:none; } }

/* ---------- Contatti ---------- */
.contact{ display:grid; gap:clamp(2.5rem, 5vw, 4.5rem); align-items:start; }
@media (min-width:960px){ .contact{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.contact h1{ font-size:clamp(2.4rem, 1.5rem + 3.4vw, 4rem); line-height:1.04; letter-spacing:-.03em; }
.contact__lead{ margin-block-start:1.2rem; max-width:34rem; font-size:clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height:1.55; }
.contact .steps{ grid-template-columns:1fr; gap:0; }
.contact .step{ display:grid; grid-template-columns:auto 1fr; column-gap:1.1rem; padding-block-end:1.9rem; }
.contact .step__num{ grid-row:span 2; width:2.75rem; height:2.75rem; font-size:1.1rem; }
.contact .step h3{ margin-block-start:.45rem; font-size:1.2rem; }
.contact .step p{ margin-block-start:.4rem; }
.contact .step:not(:last-child)::before{ content:""; position:absolute; inset-block:2.9rem .2rem; inset-inline-start:1.375rem;
  border-inline-start:2px dashed var(--line-strong); }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem, 3.5vw, 2.5rem); box-shadow:var(--shadow-2); }
@media (min-width:960px){ .card--sticky{ position:sticky; inset-block-start:calc(var(--header-h) + 1.5rem); } }
.card h2{ font-size:1.55rem; }
.card > p{ margin-block-start:.6rem; }
.card .btn{ width:100%; margin-block-start:1.5rem; }
.rows{ list-style:none; display:grid; gap:.65rem; margin-block-start:1.4rem; }
.rows a{ display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-radius:var(--r); border:1px solid var(--line);
  font-weight:700; color:var(--ink); transition:border-color .2s, background-color .2s; }
.rows a:hover{ border-color:var(--primary); background:var(--tint); }
.rows .ico{ width:2.5rem; height:2.5rem; padding:.6rem; border-radius:50%; background:var(--primary-soft); color:var(--primary); }
.rows small{ display:block; font-weight:400; font-size:.86rem; color:var(--muted); }
.card__note{ margin-block-start:1.1rem; font-size:.9rem; line-height:1.55; color:var(--muted); }
.offices{ display:grid; gap:1.1rem; }
@media (min-width:760px){ .offices{ grid-template-columns:1fr 1fr; } }
.office{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; padding:1.6rem; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); }
.office > .ico{ width:2.75rem; height:2.75rem; padding:.65rem; border-radius:50%; background:var(--primary-soft); color:var(--primary); }
.office h3{ font-size:1.3rem; }
.office address{ margin-block-start:.35rem; font-style:normal; color:var(--text); }
.office .more{ margin-block-start:.9rem; font-size:.96rem; }
.company{ margin-block-start:1.75rem; font-size:.95rem; color:var(--muted); }

/* ---------- Piede ---------- */
.site-footer{ background:var(--deep); color:var(--on-deep); }
.footer__grid{ display:grid; gap:2.5rem; padding-block:clamp(3.5rem, 6vw, 5rem) 3rem; }
@media (min-width:700px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1050px){ .footer__grid{ grid-template-columns:1.5fr 1fr 1fr 1.35fr; gap:3rem; } }
.footer__about p{ margin-block-start:1.1rem; max-width:30rem; font-size:.97rem; }
.site-footer h2{ font-family:var(--font-body); font-size:.88rem; font-weight:700; letter-spacing:.02em; color:#fff; }
.site-footer ul{ list-style:none; display:grid; gap:.7rem; margin-block-start:1.1rem; font-size:.97rem; }
.site-footer a{ color:var(--on-deep); transition:color .2s; }
.site-footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:.22em; }
.site-footer address{ font-style:normal; line-height:1.5; }
.site-footer address b{ display:block; color:#fff; font-weight:700; }
.footer__bottom{ border-block-start:1px solid rgba(255,255,255,.1); }
.footer__bottom .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem; padding-block:1.3rem; font-size:.9rem; }

/* ---------- Comparsa allo scorrimento ----------
   Il contenuto è visibile per natura. Lo script segna con .pre soltanto ciò che al caricamento
   sta sotto la piega, e lo libera quando ci si arriva: niente resta nascosto se lo script non
   parte, se la scheda è in secondo piano o se il browser non conosce IntersectionObserver. */
@media (prefers-reduced-motion:no-preference){
  .reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.pre{ opacity:0; transform:translateY(18px); }
  .stagger > .reveal:nth-child(2){ transition-delay:.06s; }
  .stagger > .reveal:nth-child(3){ transition-delay:.12s; }
  .stagger > .reveal:nth-child(4){ transition-delay:.18s; }
  .stagger > .reveal:nth-child(5){ transition-delay:.24s; }
}

/* ---------- Contatti: testata con i passi ---------- */
.page-head--contact{ padding-block-end:clamp(3.5rem, 7vw, 6rem); }
.contact__steps-t{ margin-block-start:2.75rem; font-size:1.15rem; letter-spacing:-.005em; }
.contact .steps{ margin-block-start:1.4rem; }
.contact .step::after{ display:none; }

/* Su telefono l'etichetta del hero resta su una riga; dopo una testata il primo blocco parte più vicino. */
@media (max-width:480px){ .kicker--pill{ font-size:.84rem; padding-inline:.75rem .85rem; gap:.45rem; } }
.page-head + .section{ padding-block-start:clamp(3rem, 6vw, 5rem); }

/* =====================================================================
   BLOG (2026-10-19): indice /blog/ e articoli /blog/<slug>.
   Colonna di lettura a ~70 battute, barra laterale con indice e condivisione
   (sopra i 1100px), copertine tipografiche nei colori dell'onda.
   I pulsanti di condivisione sono semplici collegamenti: non caricano nulla
   dai social finché non si usano (lo dice la cookie policy).
   ===================================================================== */

/* Tinte delle copertine: una per articolo, dall'onda del marchio. */
.tone-pacific{ --tone-a:#3A93AD; --tone-b:#1E6478; --tone-ink:#fff; }
.tone-fresh{ --tone-a:#2F86B8; --tone-b:#17577E; --tone-ink:#fff; }
.tone-frozen{ --tone-a:#DDF3F2; --tone-b:#9FDCDB; --tone-ink:#0F2D42; }
.tone-yale{ --tone-a:#2A6186; --tone-b:#0C2738; --tone-ink:#fff; }

.cover{ position:relative; overflow:hidden; isolation:isolate; color:var(--tone-ink);
  background:radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--tone-a) 70%, #fff) 0%, transparent 60%),
             linear-gradient(135deg, var(--tone-a), var(--tone-b)); }
.cover__word{ position:absolute; inset-inline-end:-.03em; inset-block-end:-.07em; z-index:-1;
  font-family:var(--font-display); font-weight:800; line-height:.8; letter-spacing:-.05em;
  font-size:var(--cover-size, 9rem); color:color-mix(in srgb, var(--tone-ink) 22%, transparent); white-space:nowrap; }
.cover__note{ position:absolute; inset-inline-start:1.1rem; inset-block-end:1.1rem; max-width:70%;
  padding:.35rem .85rem; border-radius:999px; font-weight:700; font-size:.85rem; line-height:1.3;
  background:color-mix(in srgb, var(--tone-ink) 14%, transparent); color:var(--tone-ink); }

/* ---------- Indice del blog ---------- */
.post-cards{ display:grid; gap:1.4rem; }
@media (min-width:760px){ .post-cards{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1100px){ .post-cards{ grid-template-columns:repeat(3, 1fr); } }
.post-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .25s; }
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-1); border-color:var(--line-strong); }
.post-card .cover{ height:190px; --cover-size:7.5rem; }
.post-card__body{ display:flex; flex-direction:column; gap:.6rem; padding:1.4rem 1.5rem 1.5rem; flex:1; }
.post-card__cat{ font-weight:700; font-size:.88rem; color:var(--primary); }
.post-card h2, .post-card h3{ font-size:clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height:1.25; }
.post-card p{ color:var(--text); font-size:.98rem; }
.post-card__meta{ margin-block-start:auto; padding-block-start:.6rem; display:flex; flex-wrap:wrap; gap:.3rem 1rem; font-size:.88rem; color:var(--muted); }
.post-card__link::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.post-card__link:focus-visible{ outline:0; }
.post-card:has(.post-card__link:focus-visible){ outline:2.5px solid var(--primary); outline-offset:3px; }
.post-card--feature{ margin-block-end:1.4rem; }
@media (min-width:900px){
  .post-card--feature{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
  .post-card--feature .cover{ height:auto; min-height:340px; --cover-size:15rem; }
  .post-card--feature .post-card__body{ padding:2.4rem 2.6rem; justify-content:center; }
  .post-card--feature h2{ font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); }
  .post-card--feature p{ font-size:1.06rem; }
}

/* ---------- Articolo: testata ---------- */
.post-head{ padding-block:clamp(2rem, 5vw, 3.5rem) clamp(2.25rem, 5vw, 3.5rem); background:
    radial-gradient(45% 80% at 95% 0%, rgba(202,233,255,.85), transparent 70%),
    radial-gradient(35% 60% at 70% 100%, rgba(190,233,232,.6), transparent 70%), var(--alt); }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; font-size:.9rem; color:var(--muted); }
.crumbs li + li::before{ content:"/"; margin-inline-end:.35rem; color:var(--line-strong); }
.crumbs a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:.2em; }
.crumbs a:hover{ color:var(--primary); }
.post-cat{ display:inline-flex; margin-block:1.4rem .9rem; padding:.32rem .9rem; border-radius:999px; font-weight:700; font-size:.88rem;
  background:#fff; border:1px solid var(--line); color:var(--primary); }
.post-head h1{ font-size:clamp(2.1rem, 1.35rem + 3vw, 3.5rem); line-height:1.08; letter-spacing:-.028em; max-width:24ch; }
.post-dek{ margin-block-start:1.1rem; max-width:46rem; font-size:clamp(1.1rem, 1rem + .4vw, 1.28rem); line-height:1.55; color:var(--text); }
.post-meta{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-block-start:1.5rem; font-size:.94rem; color:var(--muted); }
.post-meta li{ display:inline-flex; align-items:center; gap:.45rem; }
.post-meta .ico{ width:1.05rem; height:1.05rem; color:var(--primary); }

/* ---------- Articolo: colonna e barra laterale ---------- */
.post-grid{ display:grid; gap:3rem; padding-block:clamp(2rem, 4vw, 3rem) clamp(3.5rem, 7vw, 6rem); }
@media (min-width:1100px){ .post-grid{ grid-template-columns:minmax(0, 1fr) 300px; gap:4.5rem; } }
.post-main{ min-width:0; max-width:46rem; }
.post-cover{ height:clamp(150px, 22vw, 240px); border-radius:var(--r-lg); --cover-size:clamp(7rem, 16vw, 13rem); margin-block-end:2.25rem; }
.post-aside{ display:none; }
@media (min-width:1100px){ .post-aside{ display:block; } .toc-mobile{ display:none; } }
.post-aside__sticky{ position:sticky; inset-block-start:calc(var(--header-h) + 1.5rem); display:grid; gap:1rem; }
.aside-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.25rem; }
.aside-card__t{ font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink); margin-block-end:.75rem; }
.post-toc ol{ list-style:none; display:grid; gap:.15rem; counter-reset:toc; }
.post-toc a{ display:grid; grid-template-columns:1.6rem 1fr; gap:.2rem; padding:.42rem .55rem; border-radius:var(--r-sm);
  font-size:.93rem; line-height:1.35; color:var(--text); transition:background-color .2s, color .2s; }
.post-toc a::before{ counter-increment:toc; content:counter(toc, decimal-leading-zero); font-weight:700; font-size:.8rem; color:var(--muted); padding-block-start:.1rem; }
.post-toc a:hover{ background:var(--tint); color:var(--ink); }
.post-toc a[aria-current="true"]{ background:var(--primary-soft); color:var(--primary-hover); font-weight:700; }
.post-toc a[aria-current="true"]::before{ color:var(--primary); }
.aside-cta{ background:linear-gradient(150deg, var(--pale), var(--frozen)); border-color:transparent; }
.aside-cta p{ font-size:.95rem; margin-block-end:1rem; }
.aside-cta .btn{ width:100%; min-height:44px; padding-inline:1rem; }
.aside-cta .btn + .btn{ margin-block-start:.5rem; }
.toc-mobile{ margin-block-end:2rem; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.toc-mobile summary{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:700; color:var(--ink); }
.toc-mobile summary::-webkit-details-marker{ display:none; }
.toc-mobile summary .ico{ transition:transform .3s var(--ease); color:var(--primary); }
.toc-mobile[open] summary .ico{ transform:rotate(180deg); }
.toc-mobile .post-toc{ padding:0 .7rem .9rem; }

/* ---------- Articolo: testo ---------- */
.prose{ font-size:1.125rem; line-height:1.75; color:var(--text); }
.prose > * + *{ margin-block-start:1.15em; }
.prose h2{ margin-block-start:2.4em; font-size:clamp(1.5rem, 1.25rem + 1vw, 1.95rem); line-height:1.2; scroll-margin-top:calc(var(--header-h) + 1.5rem); }
.prose h3{ margin-block-start:2em; font-size:clamp(1.18rem, 1.08rem + .4vw, 1.35rem); line-height:1.3; scroll-margin-top:calc(var(--header-h) + 1.5rem); }
.prose h2 + *, .prose h3 + *{ margin-block-start:.7em; }
.prose strong{ color:var(--ink); }
.prose a{ color:var(--primary); font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }
.prose a:hover{ color:var(--primary-hover); text-decoration-thickness:2px; }
.prose ul, .prose ol{ padding-inline-start:1.35rem; }
.prose li + li{ margin-block-start:.5em; }
.prose ul li::marker{ color:var(--primary); }
.prose ol li::marker{ color:var(--primary); font-weight:700; }
.prose .checklist{ list-style:none; padding-inline-start:0; }
.prose .checklist li{ position:relative; padding-inline-start:2.1rem; }
.prose .checklist li::before{ content:""; position:absolute; inset-inline-start:0; inset-block-start:.32em; width:1.3rem; height:1.3rem; border-radius:50%;
  background:var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6B99' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .8rem no-repeat; }
.prose blockquote{ margin-inline:0; padding:1.1rem 1.35rem; border-radius:var(--r); background:var(--tint); border:1px solid var(--line);
  font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:var(--ink); }
.prose .table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
.prose table{ width:100%; min-width:30rem; border-collapse:collapse; font-size:.98rem; line-height:1.5; }
.prose th, .prose td{ text-align:left; vertical-align:top; padding:.75rem .95rem; border-block-end:1px solid var(--line); }
.prose th{ background:var(--primary-soft); color:var(--ink); font-weight:700; }
.prose tr:last-child td{ border-block-end:0; }
.callout{ padding:1.2rem 1.35rem; border-radius:var(--r); border:1px solid; }
.callout > * + *{ margin-block-start:.6em; }
.callout ul{ padding-inline-start:1.2rem; }
.callout__title{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; }
.callout--info{ background:#EEF7FD; border-color:#C5E2F5; }
.callout--info .callout__title{ color:var(--primary-hover); }
.callout--tip{ background:#EAF7F6; border-color:#BCE3E1; }
.callout--tip .callout__title{ color:#16615F; }
.callout--warn{ background:var(--warn-bg); border-color:#F2D9A9; }
.callout--warn .callout__title{ color:var(--warn); }
.post-figure{ margin-inline:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-1); }
.post-figure img{ width:100%; height:auto; }
.post-figure figcaption{ padding:.85rem 1.1rem; font-size:.92rem; line-height:1.5; color:var(--muted); border-block-start:1px solid var(--line); }

/* ---------- Articolo: fonti, condivisione, autore ---------- */
.post-sources{ margin-block-start:3rem; padding-block-start:2rem; border-block-start:1px solid var(--line); }
.post-sources h2{ font-size:1.25rem; }
.post-sources ol{ margin-block-start:1rem; padding-inline-start:1.3rem; display:grid; gap:.55rem; font-size:.95rem; line-height:1.5; }
.post-sources a{ color:var(--primary); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; overflow-wrap:anywhere; }
.post-sources__date{ margin-block-start:1rem; font-size:.9rem; color:var(--muted); }
.share-end{ margin-block-start:2.5rem; padding:1.4rem 1.5rem; border-radius:var(--r-lg); background:var(--alt); }
.share-end h2{ font-size:1.15rem; margin-block-end:.9rem; }
.share{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; }
.share__btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-width:44px; min-height:44px; padding:0 .8rem;
  border-radius:999px; border:1px solid var(--line-strong); background:#fff; color:var(--ink); cursor:pointer;
  font:inherit; font-weight:700; font-size:.92rem; transition:background-color .2s, color .2s, border-color .2s; }
.share__btn .ico{ width:1.15rem; height:1.15rem; }
.ico--brand{ fill:currentColor; stroke:none; }
.share--compact .share__btn{ width:44px; padding:0; }
.share--compact .share__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.share__btn:hover{ color:#fff; border-color:transparent; background:var(--brand, var(--primary)); }
.share__wa{ --brand:#1DA851; } .share__in{ --brand:#0A66C2; } .share__fb{ --brand:#1877F2; } .share__x{ --brand:#0F1419; }
.share__copy.is-done{ background:var(--ok-bg); color:var(--ok); border-color:#B9E1CC; }
.share__native[hidden], .share li:has(> [hidden]){ display:none; }
.author{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; margin-block-start:2rem; padding:1.4rem 1.5rem;
  border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; }
.author svg{ width:44px; height:44px; }
.author p{ font-size:.97rem; }
.author strong{ display:block; font-family:var(--font-display); color:var(--ink); font-size:1.05rem; margin-block-end:.2rem; }

/* Barra di avanzamento della lettura: solo dove il browser sa legarla allo scorrimento. */
.read-progress{ display:none; }
@supports (animation-timeline: scroll()){
  .read-progress{ display:block; position:fixed; inset-block-start:0; inset-inline:0; z-index:calc(var(--z-header) + 1); height:3px;
    background:linear-gradient(90deg, var(--fresh), var(--primary)); transform-origin:0 50%;
    animation:readProgress linear both; animation-timeline:scroll(root block); }
  @keyframes readProgress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}