/* ============================================================
   lucianozitoli.it — design system
   Riferimento: design-md/apple/DESIGN.md (Apple-design-analysis)
   Struttura: token → base → nav → tiles/sezioni → componenti →
   form multistep → consensi → footer → responsive
   ============================================================ */

/* ---------- token ---------- */
:root {
  /* colori (DESIGN.md, valori esatti) */
  /* niente accento cromatico: l'unica gerarchia e' inchiostro su carta.
     Il colore lo mettono le fotografie. */
  --primary: #1d1d1f;
  --primary-focus: #000000;
  --primary-on-dark: #ffffff;
  --ink: #1d1d1f;
  --ink-80: #333333;
  --ink-48: #6e6e73;   /* 4,9:1 su parchment: passa AA */
  --body-on-dark: #ffffff;
  --body-muted-dark: #cccccc;
  --divider-soft: #f0f0f0;
  --hairline: #e0e0e0;
  --canvas: #ffffff;
  --parchment: #f5f5f7;
  --pearl: #fafafc;
  --tile-dark-1: #272729;
  --tile-dark-2: #2a2a2c;
  --tile-dark-3: #252527;
  --black: #000000;
  --chip-translucent: rgba(210, 210, 215, 0.64);
  --ok: #3f6b45;
  --err: #a8412a;

  /* tipografia: SF Pro sui dispositivi Apple, Inter altrove */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
          "Segoe UI", Roboto, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
          "Segoe UI", Roboto, sans-serif;

  /* raggi */
  --r-sm: 8px; --r-md: 11px; --r-lg: 18px; --r-pill: 9999px;

  /* spazi */
  --sp-xs: 8px; --sp-sm: 12px; --sp-md: 17px; --sp-lg: 24px;
  --sp-xl: 32px; --sp-xxl: 48px; --sp-section: 80px;

  /* l'unica ombra del sistema: foto appoggiata su una superficie */
  --shadow-foto: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;

  --nav-h: 48px;
}

/* Inter: scaricato SOLO dove la stack di sistema non risolve (Windows/Linux) */
@font-face {
  font-family: "Inter";
  src: url("/assets/font/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  font-family: var(--font-text);
  font-size: 17px; line-height: 1.47; letter-spacing: -0.374px;
  color: var(--ink); background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* i link dentro il testo si riconoscono dalla sottolineatura, non dal colore */
.prosa a, .faq-r a, .punto a, p a { text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(29,29,31,0.35); }
.prosa a:hover, .faq-r a:hover, .punto a:hover, p a:hover {
  text-decoration-color: currentColor; }
.tile-dark p a, .video-pieno p a { text-decoration-color: rgba(255,255,255,0.5); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
strong { font-weight: 600; }

h1, h2, h3 { font-family: var(--font); font-weight: 600; text-wrap: balance; }
.t-hero  { font-size: 56px; line-height: 1.07; letter-spacing: -0.28px; }
.t-display { font-size: 40px; line-height: 1.1; letter-spacing: -0.01em; }
.t-lead  { font-size: 28px; font-weight: 400; line-height: 1.14; letter-spacing: 0.196px; }
.t-lead-airy { font-size: 24px; font-weight: 300; line-height: 1.5; letter-spacing: 0; }
.t-tagline { font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; }
.t-caption { font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; }
.t-eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-48);
}
.dark .t-eyebrow { color: var(--body-muted-dark); }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 22px; }
.wrap-largo { max-width: 1440px; margin: 0 auto; padding: 0 22px; }
.centrato { text-align: center; }
.prosa { max-width: 68ch; }
.prosa p + p { margin-top: 1em; }

/* ---------- pulsanti (grammatica pill Apple) ---------- */
.btn {
  display: inline-block; font-family: var(--font-text);
  font-size: 17px; font-weight: 400; letter-spacing: -0.374px;
  padding: 11px 22px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background-color .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.95); }
.btn-primario { background: var(--ink); color: #fff; }
.btn-primario:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(29,29,31,0.35); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(0,0,0,0.04); }
/* su fondo scuro i ruoli si invertono: il pieno diventa bianco */
.tile-dark .btn-primario, .tile-dark-2 .btn-primario, .video-pieno .btn-primario,
.hero-video .btn-primario, .dark .btn-primario { background: #fff; color: var(--ink); }
.tile-dark .btn-primario:hover, .tile-dark-2 .btn-primario:hover,
.video-pieno .btn-primario:hover, .hero-video .btn-primario:hover { background: #f0f0f0; }
.tile-dark .btn-ghost, .tile-dark-2 .btn-ghost, .video-pieno .btn-ghost, .dark .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,0.55); }
.tile-dark .btn-ghost:hover, .video-pieno .btn-ghost:hover { background: rgba(255,255,255,0.12); }
.btn-grande { font-size: 18px; font-weight: 300; padding: 14px 28px; }
.btn-whatsapp { background: transparent; color: var(--ink); border-color: rgba(29,29,31,0.35); }
.btn-whatsapp:hover { border-color: var(--ink); background: rgba(0,0,0,0.04); }
.tile-dark .btn-whatsapp, .tile-dark-2 .btn-whatsapp, .video-pieno .btn-whatsapp {
  color: #fff; border-color: rgba(255,255,255,0.55); }
.tile-dark .btn-whatsapp:hover, .tile-dark-2 .btn-whatsapp:hover { background: rgba(255,255,255,0.12); }
.link-freccia { font-size: 17px; }
.link-freccia::after { content: " ›"; }
.dark a { color: #fff; }
.dark .btn-primario { color: #fff; }

/* ---------- global nav ---------- */
.gnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  height: var(--nav-h);
}
.gnav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 22px;
  height: 100%; display: flex; align-items: center; gap: 8px;
}
.gnav-logo {
  color: #fff; font-family: var(--font); font-weight: 600;
  font-size: 15px; letter-spacing: -0.2px; white-space: nowrap;
  display: flex; align-items: center; gap: 9px;
}
.gnav-logo img { width: 26px; height: 26px; }
.gnav-logo:hover { text-decoration: none; }
.gnav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.gnav-links a {
  color: rgba(255, 255, 255, 0.86); font-size: 12.5px; letter-spacing: -0.1px;
  padding: 8px 10px; border-radius: var(--r-sm);
}
.gnav-links a:hover { color: #fff; text-decoration: none; }
.gnav-links a[aria-current="page"] { color: #fff; font-weight: 600; }
.gnav-lingua {
  border: 1px solid rgba(255,255,255,0.28); border-radius: var(--r-pill);
  padding: 6px 13px !important; font-size: 12px !important; margin-left: 10px;
}
.gnav-lingua:hover { border-color: rgba(255,255,255,0.6); }
.gnav-cta {
  background: #fff; color: var(--ink) !important; border-radius: var(--r-pill);
  padding: 7px 14px !important; font-weight: 400;
  margin-left: 6px; white-space: nowrap;
}
.gnav-burger {
  display: none; margin-left: auto; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; position: relative;
}
.gnav-burger span, .gnav-burger span::before, .gnav-burger span::after {
  content: ""; position: absolute; left: 12px; width: 20px; height: 1.5px;
  background: #fff; transition: transform .25s ease, opacity .2s ease;
}
.gnav-burger span { top: 21px; }
.gnav-burger span::before { top: -6px; left: 0; }
.gnav-burger span::after { top: 6px; left: 0; }
.nav-aperta .gnav-burger span { background: transparent; }
.nav-aperta .gnav-burger span::before { transform: translateY(6px) rotate(45deg); }
.nav-aperta .gnav-burger span::after { transform: translateY(-6px) rotate(-45deg); }
main { padding-top: var(--nav-h); }

/* ---------- tiles / sezioni ---------- */
.tile { padding: var(--sp-section) 0; }
.tile-parchment { background: var(--parchment); }
.tile-dark { background: var(--tile-dark-1); color: var(--body-on-dark); }
.tile-dark-2 { background: var(--tile-dark-2); color: var(--body-on-dark); }
.tile-dark .t-sotto, .tile-dark p { color: var(--body-muted-dark); }
.tile-dark h1, .tile-dark h2, .tile-dark h3 { color: #fff; }
.t-sotto { color: var(--ink-48); margin-top: 10px; }
.sezione-testa { max-width: 720px; margin: 0 auto var(--sp-xxl); text-align: center; }
.sezione-testa .t-sotto { font-size: 21px; line-height: 1.38; letter-spacing: 0.1px; }

/* split: testo + foto */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 22px;
}
.split-foto img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-foto); }
.split .t-eyebrow { display: block; margin-bottom: 10px; }
.split h2 { margin-bottom: 16px; }
.split .azioni { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }

/* punti (3-4 card senza ombra, hairline) */
.punti { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
         gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.punto { background: var(--canvas); border: 1px solid var(--hairline);
         border-radius: var(--r-lg); padding: var(--sp-lg); }
.tile-dark .punto { background: var(--tile-dark-2); border-color: rgba(255,255,255,0.1); }
.punto h3 { font-size: 21px; letter-spacing: 0.1px; margin-bottom: 8px; }
.punto p { font-size: 15px; line-height: 1.45; color: var(--ink-80); }
.tile-dark .punto p { color: var(--body-muted-dark); }

/* stats */
.stats { display: flex; justify-content: center; gap: clamp(32px, 7vw, 96px);
         flex-wrap: wrap; text-align: center; }
.stats b { display: block; font-family: var(--font); font-size: 48px;
           font-weight: 600; letter-spacing: -0.28px; line-height: 1.05;
           font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 8px; font-size: 15px; color: var(--ink-48); }
.tile-dark .stats span { color: var(--body-muted-dark); }

/* gallery */
.griglia-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
                max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.griglia-foto a { display: block; border-radius: var(--r-md); overflow: hidden;
                  background-size: cover; background-position: center; }
.griglia-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
                    transition: transform .5s ease; }
.griglia-foto a:hover img { transform: scale(1.03); }
.griglia-foto .vert img { aspect-ratio: 2 / 3; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.92);
            display: none; align-items: center; justify-content: center; }
.lightbox.aperta { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto;
                border-radius: var(--r-sm); }
.lightbox button { position: absolute; width: 44px; height: 44px; border: 0;
                   border-radius: var(--r-pill); background: var(--chip-translucent);
                   color: var(--ink); font-size: 20px; cursor: pointer; }
.lb-chiudi { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-alt { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
          color: rgba(255,255,255,0.8); font-size: 14px; padding: 0 60px; }

/* faq (details nativi) */
.faq { max-width: 720px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; list-style: none; display: flex;
               justify-content: space-between; align-items: center; gap: 16px;
               padding: 20px 0; font-family: var(--font); font-weight: 600;
               font-size: 19px; letter-spacing: -0.2px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 300; font-size: 26px;
                      color: var(--ink-48); transition: transform .25s ease; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-r { padding: 0 0 22px; color: var(--ink-80); max-width: 62ch; }
.tile-dark .faq details { border-color: rgba(255,255,255,0.14); }
.tile-dark .faq .faq-r { color: var(--body-muted-dark); }

/* breadcrumb */
.briciole { font-size: 13px; color: var(--ink-48); padding: 14px 0; }
.briciole a { color: var(--ink-48); }
.briciole span[aria-current] { color: var(--ink); }

/* video */
.video-cornice { max-width: 1000px; margin: 0 auto; padding: 0 22px; }
.video-cornice video { width: 100%; border-radius: var(--r-lg); background: var(--black); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px);
          transition: opacity .7s ease, transform .7s ease; }
.reveal.visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- hero a video ---------- */
.hero-video {
  position: relative; min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  background: var(--tile-dark-1); overflow: hidden;
}
.hero-video > video, .hero-video > picture {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}
.hero-video > video, .hero-video > picture img { width: 100%; height: 100%; object-fit: cover; }
.hero-video::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.30) 46%, rgba(0,0,0,0.42) 100%);
}
.hero-corpo {
  position: relative; z-index: 2; width: 100%;
  max-width: 1200px; margin: 0 auto; padding: 0 22px 68px;
  color: #fff;
}
.hero-corpo .t-eyebrow { color: rgba(255,255,255,0.72); }
.hero-corpo h1 {
  font-size: clamp(36px, 5.6vw, 68px); line-height: 1.05;
  letter-spacing: -0.03em; margin-top: 14px; max-width: 16ch;
  color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero-corpo .hero-sub {
  font-size: clamp(18px, 2vw, 24px); font-weight: 300; line-height: 1.4;
  letter-spacing: 0; margin-top: 18px; max-width: 44ch;
  color: rgba(255,255,255,0.92);
}
.hero-azioni { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-azioni .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.65); }
.hero-azioni .btn-ghost:hover { background: rgba(255,255,255,0.12); }
.hero-prove {
  display: flex; gap: clamp(20px, 4vw, 54px); flex-wrap: wrap;
  margin-top: 38px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.hero-prove div b {
  display: block; font-family: var(--font); font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.hero-prove div span {
  display: block; font-size: 13.5px; color: rgba(255,255,255,0.72); margin-top: 3px;
}
.hero-suono {
  position: absolute; right: 22px; bottom: 22px; z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: var(--r-pill);
  background: var(--chip-translucent); color: var(--ink);
  font-size: 15px; cursor: pointer; display: none;
}

/* hero video interno di pagina (più bassa) */
.hero-video.compatta { min-height: min(62vh, 560px); }
.hero-video.compatta h1 { font-size: clamp(32px, 4.4vw, 52px); }

/* ---------- mosaico full-bleed ---------- */
.mosaico {
  display: grid; gap: 8px; padding: 0;
  grid-template-columns: repeat(4, 1fr);
}
.mosaico a { display: block; overflow: hidden; position: relative; border-radius: 0; }
.mosaico img { width: 100%; height: 100%; object-fit: cover;
               aspect-ratio: 1; transition: transform .6s ease; }
.mosaico a:hover img { transform: scale(1.04); }
.mosaico a.grande { grid-column: span 2; grid-row: span 2; }
.mosaico a.grande img { aspect-ratio: 1; }

/* ---------- nastro video ---------- */
.nastro-video {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1200px; margin: 0 auto; padding: 0 22px;
}
.nastro-video figure { margin: 0; }
.nastro-video video { width: 100%; border-radius: var(--r-lg);
                      background: var(--black); aspect-ratio: 16/9; object-fit: cover; }
.nastro-video video.verticale { aspect-ratio: 9/16; }
.nastro-video figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-48); }
.tile-dark .nastro-video figcaption { color: var(--body-muted-dark); }

/* ---------- video a tutta larghezza ---------- */
.video-pieno { position: relative; width: 100%; min-height: 60vh;
               display: flex; align-items: center; justify-content: center;
               overflow: hidden; background: var(--black); }
.video-pieno video { position: absolute; inset: 0; width: 100%; height: 100%;
                     object-fit: cover; z-index: 0; }
.video-pieno::after { content: ""; position: absolute; inset: 0; z-index: 1;
                      background: rgba(0,0,0,0.42); }
.video-pieno .dentro { position: relative; z-index: 2; text-align: center;
                       color: #fff; padding: 80px 22px; }
.video-pieno h2 { color: #fff; }
.video-pieno p { color: rgba(255,255,255,0.86); }

/* ---------- form multistep ---------- */
.form-scheda { max-width: 640px; margin: 0 auto; background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 36px; }
.tile-parchment .form-scheda { background: var(--canvas); }
.form-passi { display: flex; gap: 8px; margin-bottom: 28px; }
.form-passi i { flex: 1; height: 3px; border-radius: 2px; background: var(--hairline); }
.form-passi i.fatto { background: var(--ink); }
.form-step { display: none; }
.form-step.attivo { display: block; animation: passo .35s ease; }
@keyframes passo { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.form-step h3 { font-size: 24px; letter-spacing: -0.2px; margin-bottom: 6px; }
.form-step .t-caption { color: var(--ink-48); margin-bottom: 22px; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: 14px; font-weight: 600;
  letter-spacing: -0.1px; margin-bottom: 7px; }
.campo input, .campo textarea, .campo select {
  width: 100%; font: inherit; padding: 12px 16px; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--canvas); }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: 2px solid var(--primary-focus); outline-offset: -1px; border-color: transparent; }
.campo .errore-msg { display: none; color: var(--err); font-size: 13px; margin-top: 5px; }
.campo.errore input, .campo.errore textarea, .campo.errore select { border-color: var(--err); }
.campo.errore .errore-msg { display: block; }
.scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scelta { position: relative; }
.scelta input { position: absolute; opacity: 0; pointer-events: none; }
.scelta span { display: block; text-align: center; padding: 13px 10px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  font-size: 15px; cursor: pointer; transition: border-color .15s, background .15s; }
.scelta input:checked + span { border: 2px solid var(--primary-focus);
  padding: 12px 9px; font-weight: 600; }
.scelta input:focus-visible + span { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
.form-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.form-nav .btn-indietro { background: none; border: 0; color: var(--ink-48);
  font: inherit; cursor: pointer; padding: 11px 0; }
.form-esito { text-align: center; padding: 30px 0; display: none; }
.form-esito.mostra { display: block; }
.form-esito .segno { width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--ok); color: #fff; font-size: 28px;
  display: flex; align-items: center; justify-content: center; }
.miele { position: absolute; left: -9999px; }

/* ---------- banner consensi ---------- */
.consensi { position: fixed; z-index: 150; left: 16px; right: 16px; bottom: 16px;
  margin: 0 auto; max-width: 560px;
  background: rgba(245, 245, 247, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,0.06); border-radius: var(--r-lg);
  padding: 24px; display: none;
  transform: translateY(16px); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease; }
.consensi.mostra { display: block; }
.consensi.entrata { transform: none; opacity: 1; }
.consensi h2 { font-size: 19px; letter-spacing: -0.2px; margin-bottom: 8px; }
.consensi p { font-size: 14px; line-height: 1.45; letter-spacing: -0.15px;
  color: var(--ink-80); }
.consensi p a { white-space: nowrap; }
.consensi-azioni { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.consensi-azioni .btn { font-size: 15px; padding: 9px 18px; }
.consensi-pref { border: 0; background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  font: inherit; font-size: 15px; cursor: pointer; padding: 9px 4px; }
.consensi-voci { display: none; margin-top: 16px; border-top: 1px solid var(--hairline);
  padding-top: 16px; }
.consensi-voci.mostra { display: block; }
.consensi-voce { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 8px 0; }
.consensi-voce b { font-size: 15px; font-weight: 600; display: block; }
.consensi-voce small { font-size: 13px; color: var(--ink-48); }
.interruttore { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.interruttore input { position: absolute; opacity: 0; }
.interruttore i { position: absolute; inset: 0; border-radius: 13px;
  background: var(--hairline); transition: background .2s; cursor: pointer; }
.interruttore i::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .2s; }
.interruttore input:checked + i { background: var(--ink); }
.interruttore input:checked + i::after { transform: translateX(18px); }
.interruttore input:disabled + i { opacity: 0.5; cursor: default; }
.blocco-terzi { background: var(--parchment); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 40px 24px; text-align: center; }
.blocco-terzi p { color: var(--ink-80); max-width: 46ch; margin: 0 auto 16px; }

/* ---------- barra whatsapp mobile ---------- */
.wa-fisso {
  position: fixed; z-index: 80; right: 22px; bottom: 22px;
  width: 56px; height: 56px; border-radius: 50%; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
  transition: transform .18s ease, background .18s ease;
}
.wa-fisso:hover { transform: scale(1.06); background: #000; }
.wa-fisso svg { width: 27px; height: 27px; fill: #fff; }

/* ---------- footer (parchment, dense-link 2.41) ---------- */
footer { background: var(--parchment); color: var(--ink-80);
  padding: 56px 0 40px; margin-top: 0; }
.footer-marchio { text-align: center; padding-bottom: 34px; }
.footer-marchio img { width: 168px; height: auto; margin: 0 auto; opacity: .9; }
.footer-cta { text-align: center; padding-bottom: 40px;
  border-bottom: 1px solid var(--hairline); margin-bottom: 40px; }
.footer-cta h2 { font-size: 32px; letter-spacing: -0.2px; margin-bottom: 8px; }
.footer-cta p { color: var(--ink-80); margin-bottom: 20px; }
.footer-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.footer-col h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.224px;
  color: var(--ink); margin-bottom: 10px; }
.footer-col a { display: block; color: var(--ink-80); font-size: 14px;
  line-height: 2.2; }
.footer-col address { font-style: normal; font-size: 14px; line-height: 1.9; }
.footer-social { display: flex; gap: 12px; margin-top: 10px; }
.footer-social a { display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--hairline);
  border-radius: 50%; background: var(--canvas); line-height: 0; }
.footer-social svg { width: 16px; height: 16px; fill: var(--ink-80); }
.footer-legale { max-width: 1080px; margin: 36px auto 0; padding: 18px 22px 0;
  border-top: 1px solid var(--hairline); font-size: 12.5px; line-height: 1.6;
  color: var(--ink-80); display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.footer-legale a { color: var(--ink-80); }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .gnav-links { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: rgba(0,0,0,0.94);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    flex-direction: column; align-items: stretch; padding: 12px 22px 26px; gap: 0; }
  .nav-aperta .gnav-links { display: flex; }
  .gnav-links a { font-size: 17px; padding: 13px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.09); border-radius: 0; }
  .gnav-lingua {
  border: 1px solid rgba(255,255,255,0.28); border-radius: var(--r-pill);
  padding: 6px 13px !important; font-size: 12px !important; margin-left: 10px;
}
.gnav-lingua:hover { border-color: rgba(255,255,255,0.6); }
.gnav-cta { margin: 16px 0 0; text-align: center; border-bottom: 0 !important; }
  .gnav-burger { display: block; }
  .nav-aperta { overflow: hidden; }
}
@media (max-width: 833px) {
  .tile { padding: 56px 0; }
  .hero-video { min-height: 78vh; }
  .hero-corpo { padding-bottom: 44px; }
  .mosaico { grid-template-columns: repeat(2, 1fr); }
  .mosaico a.grande { grid-column: span 2; grid-row: span 1; }
  .mosaico a.grande img { aspect-ratio: 4/3; }
  .t-hero { font-size: 34px; }
  .t-display { font-size: 30px; }
  .t-lead { font-size: 22px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split-foto { order: -1; }
  .griglia-foto { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stats b { font-size: 36px; }
  .form-scheda { padding: 26px 20px; }
  .scelte { grid-template-columns: 1fr; }
  .footer-col { grid-template-columns: 1fr 1fr; }
  .wa-fisso { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .consensi { left: 10px; right: 10px; bottom: 10px; }
}
@media (max-width: 480px) {
  .t-hero { font-size: 28px; }
  .griglia-foto { grid-template-columns: 1fr 1fr; }
  .footer-col { grid-template-columns: 1fr; }
  .mosaico { grid-template-columns: repeat(2, 1fr); }
}

/* stampa: niente chrome */
@media print { .gnav, .consensi, .wa-fisso, footer { display: none; } }


/* ---------- finestra del preventivo ---------- */
.velo {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 22px;
  opacity: 0; transition: opacity .28s ease;
}
.velo.aperto { display: flex; }
.velo.entrato { opacity: 1; }
.velo-scheda {
  position: relative; width: 100%; max-width: 620px;
  max-height: 92vh; overflow-y: auto;
  background: var(--canvas); border-radius: var(--r-lg);
  padding: 34px 34px 30px;
  transform: translateY(16px) scale(.98);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.velo.entrato .velo-scheda { transform: none; }
.velo-scheda .form-scheda { border: 0; padding: 0; max-width: none; }
.velo-testa { margin-bottom: 24px; padding-right: 44px; }
.velo-testa h2 { font-size: 26px; letter-spacing: -0.3px; }
.velo-testa p { color: var(--ink-48); font-size: 15px; margin-top: 6px; }
.velo-chiudi {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  border: 0; border-radius: var(--r-pill); background: var(--parchment);
  color: var(--ink); font-size: 17px; cursor: pointer; line-height: 1;
}
.velo-chiudi:hover { background: var(--hairline); }
@media (max-width: 640px) {
  .velo { padding: 0; align-items: flex-end; }
  .velo-scheda { max-width: none; max-height: 94vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 28px 20px 24px; }
}


/* ---------- griglia verticale (newborn) ---------- */
.griglia-foto.vert { grid-template-columns: repeat(3, 1fr); }
.griglia-foto.vert img { aspect-ratio: 4 / 5; }
@media (max-width: 833px) { .griglia-foto.vert { grid-template-columns: repeat(2, 1fr); } }

/* ---------- riquadri Instagram ---------- */
.griglia-ig { display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.griglia-ig .blocco-terzi { min-height: 380px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.griglia-ig iframe { width: 100%; min-height: 480px; border: 0;
  border-radius: var(--r-lg); background: var(--canvas); }


/* ---------- indice del blog ---------- */
.griglia-articoli {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  max-width: 1200px; margin: 0 auto; padding: 0 22px;
}
.scheda-articolo { display: block; color: inherit; }
.scheda-articolo:hover { text-decoration: none; }
.scheda-articolo picture { display: block; overflow: hidden; border-radius: var(--r-lg); }
.scheda-articolo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
                       transition: transform .5s ease; }
.scheda-articolo:hover img { transform: scale(1.03); }
.scheda-testo { padding: 16px 2px 0; }
.scheda-testo .t-eyebrow { font-size: 12px; }
.scheda-testo h3 { font-size: 21px; line-height: 1.24; letter-spacing: -0.2px;
                   margin: 8px 0 8px; }
.scheda-articolo:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.scheda-testo p { font-size: 14.5px; line-height: 1.5; color: var(--ink-48); }

/* l'articolo legge come un testo, non come una vetrina */
.hero-video.compatta.articolo { min-height: min(52vh, 460px); }
.articolo + section .prosa, .articolo ~ section .prosa { font-size: 18px; line-height: 1.62; }