/* =============================================================
   DUGGI · Studio Dentistico — Design System condiviso
   Direzione: clinica di alta fascia. Luce e aria (boccaccio),
   impatto e pulizia (Apple), tipografia tech non editoriale.
   Tutte le pagine future ereditano da questo foglio.
   ============================================================= */

/* ----- 1. Design tokens ----- */
:root {
  /* Marca */
  --blu:    #1A5276;   /* primario */
  --accent: #2E86C1;   /* accent / link / hover */
  --scuro:  #0E2F46;   /* sezioni scure */
  --notte:  #07182580; /* (non usato come solido) */

  /* Sfondi & testo */
  --bg:        #FFFFFF;   /* base */
  --bg-alt:    #F4F7FA;   /* alternanza chiara, appena fredda */
  --ink:       #101D27;   /* testo su chiaro */
  --ink-soft:  #586B78;   /* testo secondario su chiaro */
  --light:     #FFFFFF;   /* testo su scuro */
  --light-soft:#AFC6D6;   /* testo secondario su scuro */
  --line:      #E8EEF2;   /* divisori su chiaro */
  --line-dark: rgba(255,255,255,0.12);

  /* Tipografia */
  --display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ===========================================================
     LE TRE MANOPOLE (trattamento editoriale, 27/07/2026).
     Sono i soli numeri da toccare per ritarare tutto il sito:
     ogni pagina eredita da qui. 1 = com'era prima del restyle.
     =========================================================== */
  --rhythm:     1.22;    /* arietà verticale (padding di sezione e stacchi) */
  --type-scale: 1.14;    /* scala dei titoli display h2/h3 */
  --hero-min:   100svh;  /* presenza verticale dell'hero della home */

  /* Scala fluida — più grande e più tesa (impatto Apple).
     h2/h3 passano dalla manopola --type-scale; h1 (hero) resta fisso. */
  --fs-eyebrow: clamp(0.7rem, 0.66rem + 0.18vw, 0.78rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.2vw, 1.12rem);
  --fs-lead:    clamp(1.2rem, 1.08rem + 0.7vw, 1.6rem);
  --fs-h3:      calc(clamp(1.3rem, 1.12rem + 0.9vw, 1.7rem) * var(--type-scale));
  --fs-h2:      calc(clamp(2.1rem, 1.5rem + 2.9vw, 3.6rem) * var(--type-scale));
  --fs-h1:      clamp(2.9rem, 1.7rem + 5.6vw, 5.8rem);

  /* Spazi & ritmo — più aria, tutto proporzionale a --rhythm */
  --gutter:     clamp(1.25rem, 5vw, 4rem);
  --section-y:  calc(clamp(5.5rem, 11vw, 10rem) * var(--rhythm));
  --head-gap:   calc(clamp(2.75rem, 5.5vw, 4.5rem) * var(--rhythm));  /* testata → corpo */
  --block-gap:  calc(clamp(2rem, 4vw, 3.25rem) * var(--rhythm));      /* blocco → blocco */
  --grid-gap:   calc(clamp(1.25rem, 2.4vw, 2rem) * var(--rhythm));    /* griglie di card */
  --split-gap:  calc(clamp(3rem, 5vw, 4.75rem) * var(--rhythm));      /* testo ↔ immagine */
  --img-air:    calc(clamp(2rem, 4vw, 3.25rem) * var(--rhythm));      /* aria attorno alle bande */
  --maxw:       1240px;
  --measure:    60ch;

  /* Forma — superfici morbide premium, interattivi più chiusi */
  --radius:     22px;
  --radius-img: 18px;   /* cornice immagini: poco meno del raggio delle card */
  --radius-sm:  999px;  /* pill */
  --shadow:     0 30px 70px -34px rgba(16,40,60,0.30);
  --shadow-sm:  0 12px 34px -22px rgba(16,40,60,0.28);

  /* ----- Gioco sfondo ↔ riquadro (CLAUDE.md §6d) -----
     I riquadri non hanno più un fondo proprio: ereditano --surface dalla
     sezione che li contiene, così staccano SEMPRE di un tono. Default =
     sezione bianca (--bg) → card in tinta. Le sezioni ridefiniscono sotto. */
  --surface:        var(--bg-alt);
  --surface-line:   var(--line);
  --surface-shadow: var(--shadow-sm);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----- 2. Reset essenziale ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

/* ----- 3. Tipografia ----- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.022em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  display: inline-block;
}
.section--dark .eyebrow { color: #6FB2DF; }

.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.4; letter-spacing: -0.01em; }
.section--dark .lead { color: var(--light-soft); }

p { max-width: var(--measure); }

/* ----- 4. Layout ----- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section--alt  { background: var(--bg-alt); }
.section--tint { background: var(--bg-alt); }
.section--dark {
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(46,134,193,0.22), transparent 60%),
    linear-gradient(180deg, #0E2F46 0%, #08202F 100%);
  color: var(--light);
}

/* ----- Contesto di superficie: ogni sezione dice ai suoi riquadri di che
   tono devono essere. È qui che vive il «gioco sfondo ↔ riquadro»: le card
   non scelgono più il proprio fondo, lo ereditano. (CLAUDE.md §6d) ----- */
.section--alt,
.section--tint          { --surface: var(--bg); }
.section--dark {
  --surface:        rgba(255,255,255,0.05);
  --surface-line:   var(--line-dark);
  --surface-shadow: none;
}

/* ----- Stacco fra sezioni adiacenti dello STESSO tono -----
   Le sezioni devono leggersi come pagine distinte. Tinta e scuro fanno da
   stacco forte da soli; due chiare che si toccano no: lì serve un filetto.
   Regola generale, vale su tutte e 15 le pagine e su quelle future. */
:is(.section:not(.section--alt):not(.section--tint):not(.section--dark), .img-band-section)
  + :is(.section:not(.section--alt):not(.section--tint):not(.section--dark), .img-band-section),
:is(.section--alt, .section--tint) + :is(.section--alt, .section--tint) {
  border-top: 1px solid var(--line);
}
.section--dark + .section--dark { border-top: 1px solid var(--line-dark); }

.section__head { max-width: 48rem; margin-bottom: var(--head-gap); }
.section__head > * + * { margin-top: 1.1rem; }

/* ----- 5. Bottoni ----- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 1.05rem 1.8rem; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 16px 34px -14px rgba(46,134,193,0.7); }
.btn-primary:hover { background: #2376ab; }

.btn-ghost { background: rgba(255,255,255,0.06); color: inherit; border-color: rgba(255,255,255,0.4); }
.btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.7); }
.section:not(.section--dark) .btn-ghost { color: var(--blu); background: transparent; border-color: rgba(26,82,118,0.3); }
.section:not(.section--dark) .btn-ghost:hover { background: rgba(26,82,118,0.05); border-color: var(--blu); }

/* Link freccia */
.link-arrow {
  font-weight: 600; text-decoration: none; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.45rem;
  transition: gap 0.25s var(--ease);
}
.link-arrow:hover { gap: 0.8rem; }
.section--dark .link-arrow { color: #6FB2DF; }

/* ----- 6. Accessibilità ----- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  background: var(--scuro); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: 10px; z-index: 1000; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================
   7. HEADER (trasparente sull'hero, vetro chiaro allo scroll)
   ============================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center;
  padding: 1.4rem var(--gutter);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), padding 0.3s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.8);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 0.9rem;
}

.brand { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.01em; color: #fff; text-decoration: none; line-height: 1; display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.brand small { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.72; margin-top: 4px; }

/* =============================================================
   LOGO DI MARCA (header e footer) — REGOLA DELLE PROPORZIONI
   I due file sono rettangolari (654×223 e 655×223, rapporto ~2.93).
   Si imposta SOLO l'altezza; la larghezza la calcola il browser.
   MAI `width` e `height` insieme, MAI una larghezza fissa: il logo
   si schiaccerebbe. `flex:none` e `align-items:flex-start` sul
   contenitore servono a impedire che il flex lo stiri in larghezza
   (era esattamente questo il difetto: `.brand` è una colonna flex e
   `align-items` vale `stretch` di default). `object-fit:contain`
   è la rete di sicurezza. Cfr. CLAUDE.md §7g.
   ============================================================= */
.brand__logo {
  height: var(--brand-logo-h, 1.9rem);
  width: auto;
  flex: none;
  object-fit: contain;
  display: block;
}
/* Swap bianco ↔ blu, senza JS: usa le classi che esistono già
   (`body.page` per le pagine interne, `.is-scrolled` per l'header). */
.brand__logo--bianco { display: none; }
body:not(.page) .site-header:not(.is-scrolled) .brand__logo--bianco { display: block; }
body:not(.page) .site-header:not(.is-scrolled) .brand__logo--blu    { display: none; }
.site-header.is-scrolled .brand { color: var(--scuro); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.site-nav a { color: #fff; text-decoration: none; font-weight: 500; font-size: 0.96rem; opacity: 0.85; transition: opacity 0.2s; }
.site-nav a:hover { opacity: 1; }
.site-header.is-scrolled .site-nav a { color: var(--ink); }
.site-nav .btn { padding: 0.7rem 1.3rem; font-size: 0.92rem; }

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
/* Il comportamento responsive della nav (tendina "Terapie" + menu mobile)
   sta nel blocco 9l, condiviso da tutte le pagine. */

/* =============================================================
   8. HERO (scuro, video di sfondo — momento-firma, stile Apple)
   ============================================================= */
.hero {
  position: relative;
  min-height: var(--hero-min);
  display: flex; align-items: center;
  padding: clamp(7rem, 14vh, 10rem) var(--gutter) clamp(4rem, 9vh, 7rem);
  background: #08202F;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  animation: heroZoom 20s var(--ease) forwards;
}
@keyframes heroZoom { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 75% 20%, rgba(46,134,193,0.18), transparent 55%),
    linear-gradient(180deg, rgba(8,32,47,0.5) 0%, rgba(8,32,47,0.2) 40%, rgba(8,32,47,0.8) 100%),
    linear-gradient(80deg, rgba(8,32,47,0.85) 0%, rgba(8,32,47,0.35) 55%, rgba(8,32,47,0.05) 100%);
}
.hero__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; }
.hero__content { max-width: 58rem; }

.hero h1 { margin: 0.5rem 0 1.6rem; }
.hero .lead { max-width: 40rem; color: #DCEAF3; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }

/* =============================================================
   8b. FASCIA FIDUCIA — chiara e discreta, sotto l'hero
   ============================================================= */
.trust-bar { background: var(--bg); border-bottom: 1px solid var(--line); }
.trust-bar .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 0.9rem 2.6rem;
  padding-block: 1.4rem; text-align: center;
}
.trust-bar__item { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.95rem; color: var(--ink-soft); }
.trust-bar__item .stars { color: #E8A33D; letter-spacing: 0.04em; font-weight: 700; }
.trust-bar__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
@media (max-width: 640px) { .trust-bar__sep { display: none; } }

/* =============================================================
   9. Scroll-reveal (sobrio)
   ============================================================= */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.09s; }
.reveal[data-delay="2"] { transition-delay: 0.18s; }
.reveal[data-delay="3"] { transition-delay: 0.27s; }

/* =============================================================
   9a. Parole evidenziate — annotazione disegnata a mano
   (cerchio / sottolineatura che "compare" allo scroll)
   ============================================================= */
.mark { position: relative; display: inline-block; white-space: nowrap; }
.mark__svg { position: absolute; pointer-events: none; overflow: visible; z-index: 1; }
.mark__svg path {
  fill: none; stroke: var(--accent); stroke-width: 3px; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.9s var(--ease) 0.25s;
}
.mark.is-drawn .mark__svg path { stroke-dashoffset: 0; }

.mark--underline .mark__svg { left: -1%; bottom: -0.22em; width: 102%; height: 0.5em; }
.mark--circle    .mark__svg { left: -10%; top: -26%; width: 120%; height: 154%; }

/* su sfondo scuro l'inchiostro si schiarisce */
.section--dark .mark__svg path,
.hero .mark__svg path { stroke: #7FC0E8; }

/* =============================================================
   9b. Il problema — titolo grande + card pulita (no editoriale)
   ============================================================= */
.problem h2 { max-width: 22ch; }
.problem__grid { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 880px) { .problem__grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } }

.callout {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}
.callout__label { display: block; font-family: var(--display); font-weight: 700; color: var(--blu); font-size: 1.05rem; margin-bottom: 0.7rem; letter-spacing: -0.01em; }
.callout p { margin: 0; color: var(--ink-soft); }

/* =============================================================
   9c. Perché siamo diversi — righe numerate, pulite
   ============================================================= */
.diff-list { display: grid; }
.diff-row { display: grid; gap: 0.4rem 2rem; padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid var(--line); }
.diff-row:first-child { border-top: 0; }
@media (min-width: 760px) { .diff-row { grid-template-columns: 5rem 1fr; align-items: baseline; } }
.diff-row__num { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--accent); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.diff-row h3 { margin-bottom: 0.4rem; }
.diff-row p { margin: 0; color: var(--ink-soft); }

/* =============================================================
   9d. Il Metodo — 4 fasi, numeri grandi, arioso
   ============================================================= */
.steps { display: grid; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.step { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.step__num { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.1em; }
.step h3 { margin: 0.7rem 0 0.5rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* =============================================================
   9e. I Percorsi — card chiare eleganti (boccaccio)
   ============================================================= */
.paths { display: grid; gap: 1.5rem; }
@media (min-width: 880px) { .paths { grid-template-columns: repeat(3, 1fr); } }
.path {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.path:hover, .path:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(46,134,193,0.4); }
.path__head { margin-bottom: 1rem; }
.path h3 { margin-bottom: 0.5rem; }
.path__tags { color: var(--accent); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.path p { margin: 0 0 1.6rem; color: var(--ink-soft); flex: 1; }
.path__go { color: var(--blu); font-weight: 600; white-space: nowrap; display: inline-flex; gap: 0.4rem; transition: gap 0.25s var(--ease); }
.path:hover .path__go { gap: 0.8rem; }

/* =============================================================
   9f. La Prima Visita — split + regole numerate
   ============================================================= */
.visita { display: grid; gap: 2.5rem; }
@media (min-width: 880px) { .visita { grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; align-items: start; } .visita__intro { position: sticky; top: 7rem; } }
.visita__intro h2 { margin-bottom: 1.6rem; }
.rules { display: grid; }
.rule { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding-block: 1.5rem; border-top: 1px solid var(--line); align-items: start; }
.rule:first-child { border-top: 0; padding-top: 0; }
.rule__n { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-line); color: var(--blu); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1rem; flex: none; box-shadow: var(--shadow-sm); }
.rule h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.rule p { margin: 0; color: var(--ink-soft); }

/* =============================================================
   9g. Tecnologie — momento scuro "da prodotto" (wow / Apple)
   ============================================================= */
.tech-grid { display: grid; gap: 1.25rem; margin-bottom: 2.75rem; }
@media (min-width: 780px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } }
.tech {
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  box-shadow: var(--surface-shadow);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tech:hover { transform: translateY(-4px); border-color: rgba(111,178,223,0.5); }
.tech__kicker { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #6FB2DF; }
.tech h3 { font-size: var(--fs-h3); margin: 0.7rem 0 0.5rem; color: #fff; }
.tech p { margin: 0; color: var(--light-soft); }

/* =============================================================
   9h. Prova sociale — chiara, statistiche + citazioni
   ============================================================= */
.stats { display: grid; gap: 1.5rem; text-align: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat__num { display: block; font-family: var(--display); font-size: clamp(2.6rem, 6vw, 3.8rem); font-weight: 800; color: var(--blu); letter-spacing: -0.03em; }
.stat__lbl { color: var(--ink-soft); font-size: 0.95rem; }
.quotes { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { margin: 0; background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 1.9rem; box-shadow: var(--surface-shadow); }
.quote blockquote { margin: 0 0 1.2rem; font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.quote figcaption { color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; }

/* =============================================================
   9i. Il Dottore — split foto + testo
   ============================================================= */
.doctor { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .doctor { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: center; } }
.placeholder-photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius);
  background: linear-gradient(160deg, #E7EEF4, #C9DBE7);
  display: grid; place-items: center; text-align: center; padding: 1.25rem;
  color: var(--blu); font-family: var(--display); font-weight: 700; letter-spacing: 0.02em;
  box-shadow: var(--shadow);
}
.placeholder-photo small { display: block; font-family: var(--sans); font-weight: 500; color: var(--ink-soft); margin-top: 0.5rem; font-size: 0.8rem; letter-spacing: 0; }
.doctor__quote { font-family: var(--display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--blu); margin: 1.2rem 0; letter-spacing: -0.02em; }
.doctor__sign { font-weight: 700; margin-top: 1.6rem; }
.doctor__sign span { display: block; font-weight: 400; color: var(--ink-soft); }

/* =============================================================
   9j. CTA finale + contatti (scuro)
   ============================================================= */
.final__cta { max-width: 42rem; }
.final__cta .lead { margin: 1.2rem 0 2.4rem; }
.contact-grid { display: grid; gap: 2.5rem; margin-top: clamp(3.5rem, 7vw, 5rem); padding-top: clamp(2.75rem, 5vw, 3.75rem); border-top: 1px solid var(--line-dark); }
@media (min-width: 760px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-block h3 { font-size: 1.05rem; color: #fff; margin-bottom: 0.8rem; }
.contact-block p, .contact-block a { color: var(--light-soft); text-decoration: none; }
.contact-block a:hover { color: #fff; text-decoration: underline; }
.hours { display: grid; gap: 0.4rem; }
.hours li { display: flex; gap: 0.8rem; color: var(--light-soft); }
.hours li span { width: 2.6rem; color: #fff; font-weight: 600; text-transform: capitalize; }

/* ----- Footer ----- */
.site-footer { background: #07182A; color: var(--light-soft); padding-block: 3rem; }
.footer__inner { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .footer__inner { grid-template-columns: 1fr auto; align-items: start; } }
.brand--footer { color: #fff; font-size: 1.4rem; text-decoration: none; font-family: var(--display); font-weight: 700; display: inline-block; }
/* Footer: fondo navy, quindi logo BIANCO. Stessa regola di proporzione. */
.brand--footer .brand__logo { height: var(--brand-logo-h-footer, 2.2rem); }
.site-footer p { font-size: 0.9rem; margin-top: 0.5rem; max-width: 36ch; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.footer__nav a { color: var(--light-soft); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.footer__nav a:hover { color: #fff; }
.footer__legal { grid-column: 1 / -1; margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid var(--line-dark); font-size: 0.82rem; line-height: 1.7; }

/* =============================================================
   9k. HOME — prosa editoriale, affermazioni, pull-quote,
   pilastri, segnaposto marcati.
   Solo token esistenti: nessun nuovo colore di marca,
   nessuna nuova famiglia, nessuna libreria.
   ============================================================= */

/* ----- Hero: attacco, testo introduttivo, motto annotato ----- */
.hero__kicker {
  font-size: clamp(1rem, 0.95rem + 0.28vw, 1.15rem);
  font-weight: 600;
  color: #DCEAF3;
  max-width: 46rem;
  margin-bottom: 1.1rem;
}
.hero h1 { text-wrap: balance; }
.hero__intro {
  font-size: clamp(1.02rem, 0.98rem + 0.24vw, 1.16rem);
  line-height: 1.62;
  color: #DCEAF3;
  max-width: 44rem;
}
.hero__motto {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: none;
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}

/* ----- Testate di sezione ----- */
.section__head h2 { text-wrap: balance; }
.section__head--wide { max-width: 56rem; }
.section__head .lead { margin-top: 1.4rem; }

/* ----- Prosa lunga: misura, respiro, ritmo ----- */
.prose { max-width: 46rem; }
.prose--wide { max-width: 50rem; }
.prose > * + * { margin-top: 1.15em; }
.prose > .lead + * { margin-top: 1.5em; }
.prose p { max-width: none; }
.section--dark .prose p { color: #DCEAF3; }

/* ----- Affermazione: una frase che resta sola ----- */
.statement {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--blu);
  max-width: 30ch;
  text-wrap: balance;
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}
.statement--small { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem); max-width: 34ch; }
.section--dark .statement { color: #fff; }

/* ----- Pull-quote ----- */
.pull {
  margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0;
  padding-left: clamp(1.15rem, 2.4vw, 1.9rem);
  border-left: 3px solid var(--accent);
  max-width: 40ch;
}
.pull p {
  margin: 0; max-width: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--blu);
}
.section--dark .pull { border-left-color: #6FB2DF; }
.section--dark .pull p { color: #fff; }

/* ----- Liste sobrie (pallino disegnato dal CSS, non dal testo) ----- */
.list-tick { display: grid; gap: 0.95rem; max-width: 46rem; margin-top: 1.4rem; }
.list-tick li { position: relative; padding-left: 1.7rem; color: var(--ink-soft); }
.list-tick li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.section--dark .list-tick li { color: #DCEAF3; }
.section--dark .list-tick li::before { background: #6FB2DF; }

/* Lista che conserva i bullet presenti nel testo originale */
.list-raw { display: grid; gap: 0.5rem; max-width: 46rem; margin-top: 1.2rem; }
.list-raw li { color: var(--ink-soft); }
.section--dark .list-raw li { color: #DCEAF3; }

/* ----- Pannello (blocco differenziante) ----- */
.panel {
  max-width: 46rem;
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  box-shadow: var(--surface-shadow);
}
.panel p { margin: 0; max-width: none; color: var(--ink-soft); }
.section--dark .panel p { color: #DCEAF3; }

/* ----- Due pilastri affiancati e separati ----- */
.pillars { display: grid; gap: 1.5rem; }
@media (min-width: 880px) { .pillars { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.pillar {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: clamp(1.9rem, 3.2vw, 2.6rem);
  box-shadow: var(--surface-shadow);
}
.pillar__label {
  display: inline-block;
  font-family: var(--display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -0.01em;
  color: var(--blu);
  margin-bottom: 1.1rem;
}
.pillar p { margin: 0 0 1.5rem; max-width: none; color: var(--ink-soft); flex: 1; }
.pillar .link-arrow { align-self: flex-start; }

/* ----- CTA con nota accanto ----- */
.cta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}
.cta-note { margin: 0; max-width: 36ch; color: var(--ink-soft); font-size: 1rem; }
.section--dark .cta-note { color: var(--light-soft); }

.link-row { max-width: none; margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ----- Tecnologie: numerazione al posto del kicker ----- */
.tech__num {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.12em;
  color: #6FB2DF;
}
.section--dark .tech-grid + .prose { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ----- Segnaposto marcati e visibili ----- */
.placeholder {
  max-width: 46rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(1.4rem, 2.8vw, 2rem);
  border: 2px dashed rgba(46,134,193,0.45);
  border-radius: var(--radius);
  background: rgba(46,134,193,0.05);
}
.placeholder--wide { max-width: none; }
.placeholder__tag {
  display: inline-block;
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.placeholder p { margin: 0; max-width: none; color: var(--ink-soft); font-size: 0.98rem; }
.placeholder p + p { margin-top: 0.35rem; }
.placeholder strong { color: var(--blu); font-weight: 700; }
.section--dark .placeholder { border-color: rgba(111,178,223,0.5); background: rgba(255,255,255,0.05); }
.section--dark .placeholder__tag { color: #6FB2DF; }
.section--dark .placeholder p { color: var(--light-soft); }
.section--dark .placeholder strong { color: #fff; }

.todo-inline {
  display: inline-block;
  font-size: 0.78em; font-weight: 700; letter-spacing: 0.06em;
  color: var(--accent);
  border: 1px dashed rgba(46,134,193,0.55);
  border-radius: 6px;
  padding: 0.1em 0.5em;
  white-space: nowrap;
}
.section--dark .todo-inline,
.site-footer .todo-inline { color: #7FC0E8; border-color: rgba(127,192,232,0.5); }

/* ----- Il dottore: colonna testo ----- */
.doctor__body > * + * { margin-top: 1.4rem; }

/* ----- Chiusura: NAP ----- */
.nap { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2.25rem, 4.5vw, 3rem); border-top: 1px solid var(--line-dark); }
.nap p { margin: 0; max-width: none; color: var(--light-soft); }
.nap p + p { margin-top: 0.4rem; }
.nap__name { color: #fff; font-weight: 600; }

/* =============================================================
   9l. PAGINE INTERNE + NAV CANONICA (build 22/07/2026)
   Menu condiviso con tendina "Terapie", menu mobile, testata
   di pagina interna e componenti delle 14 pagine.
   Solo token esistenti: nessun nuovo colore di marca,
   nessuna nuova famiglia, nessuna libreria.
   ============================================================= */

/* ----- Header su pagina interna: parte già su fondo chiaro ----- */
body.page .site-header:not(.is-scrolled) .brand { color: var(--scuro); }
body.page .site-header:not(.is-scrolled) .nav-links > li > a { color: var(--ink); }
body.page .site-header:not(.is-scrolled) .nav-drop__toggle { color: var(--ink); }
body.page .site-header:not(.is-scrolled) .nav-toggle { color: var(--ink); }

/* Il CTA "Prenota" resta bianco su accento anche a header scrolled
   (corregge il conflitto con `.site-header.is-scrolled .site-nav a`). */
.site-nav .btn-primary { color: #fff; }

/* ----- Tendina "Terapie" (desktop: hover/focus; ovunque: click) ----- */
.nav-drop { position: relative; }
.nav-drop__toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: 0.96rem;
  color: #fff; opacity: 0.85; transition: opacity 0.2s;
}
.nav-drop__toggle:hover { opacity: 1; }
.site-header.is-scrolled .nav-drop__toggle { color: var(--ink); }
.nav-drop__caret { transition: transform 0.25s var(--ease); }
.nav-drop.is-open > .nav-drop__toggle .nav-drop__caret { transform: rotate(180deg); }

.nav-drop__menu {
  position: absolute; top: 100%; left: 50%;
  margin-top: 0.9rem; min-width: 15.5rem; padding: 0.6rem;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); display: grid;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
              visibility 0s linear 0.25s;
}
/* ponte invisibile per non chiudere la tendina nel varco dell'hover */
.nav-drop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.nav-drop.is-open > .nav-drop__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0); transition-delay: 0s;
}
.nav-drop__menu a {
  display: block; padding: 0.55rem 0.9rem; border-radius: 10px;
  color: var(--ink); opacity: 1; font-weight: 500; font-size: 0.94rem;
  text-decoration: none;
}
.nav-drop__menu a:hover { background: var(--bg-alt); }

@media (hover: hover) and (min-width: 1081px) {
  .nav-drop:hover > .nav-drop__menu,
  .nav-drop:focus-within > .nav-drop__menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0); transition-delay: 0s;
  }
  .nav-drop:hover > .nav-drop__toggle .nav-drop__caret,
  .nav-drop:focus-within > .nav-drop__toggle .nav-drop__caret { transform: rotate(180deg); }
}

/* ----- Menu mobile (hamburger sotto i 1080px: la nav è lunga) ----- */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: 0; padding: 0.55rem; cursor: pointer;
  color: #fff;
}
.site-header.is-scrolled .nav-toggle { color: var(--ink); }
.nav-toggle__bar {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.site-nav.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-nav.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; order: 2; }
  .site-nav .btn-nav-cta { order: 1; }

  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 0.5rem var(--gutter) 1.1rem;
    max-height: calc(100dvh - 4.5rem); overflow: auto;
  }
  .site-nav.is-open .nav-links { display: flex; }
  .nav-links > li { border-top: 1px solid var(--line); }
  .nav-links > li:first-child { border-top: 0; }
  .nav-links > li > a { display: block; padding: 0.85rem 0; color: var(--ink); opacity: 1; }

  .nav-drop__toggle {
    width: 100%; justify-content: space-between; padding: 0.85rem 0;
    color: var(--ink); opacity: 1; font-size: 0.96rem;
  }
  .nav-drop__menu {
    position: static; transform: none; margin: 0 0 0.6rem;
    min-width: 0; padding: 0 0 0 1rem;
    border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none; transition: none;
  }
  .nav-drop__menu::before { display: none; }
  .nav-drop.is-open > .nav-drop__menu { display: grid; transform: none; }
  .nav-drop__menu a { padding: 0.55rem 0; border-radius: 0; }
}
@media (max-width: 520px) {
  .site-nav .btn-nav-cta { display: none; }
}

/* ----- Testata di pagina interna (fondo chiaro, arioso) ----- */
.page-hero {
  padding: clamp(8rem, 16vh, 11.5rem) 0 clamp(3.75rem, 7vw, 6rem);
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
}
.page-hero h1 {
  font-size: clamp(2.5rem, 1.55rem + 4.2vw, 4.6rem);
  letter-spacing: -0.02em; line-height: 1.06;
  max-width: 58rem; text-wrap: balance;
  margin-bottom: 1.6rem;
}
.page-hero .eyebrow { margin-bottom: 1.4rem; }
.page-hero .statement { margin-top: 1.8rem; }

/* ----- Card tecnologia: il fondo arriva da --surface (§6d). Resta solo l'hover. ----- */
.section:not(.section--dark) .tech:hover { border-color: rgba(46,134,193,0.4); }
.section:not(.section--dark) .tech h3 { color: var(--ink); }
.section:not(.section--dark) .tech p { color: var(--ink-soft); }
.section:not(.section--dark) .tech .tech__num { color: var(--accent); }

/* Dentro la card: domanda del paziente + etichette COSA FACCIAMO / COSA CAMBIA PER TE */
.tech h3 .tech__num { margin-bottom: 0.7rem; }
.tech__q { font-style: italic; margin: 0 0 0.4rem; }
.tech__label {
  display: block; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; color: #6FB2DF;
  margin: 1.15rem 0 0.3rem;
}
.section:not(.section--dark) .tech__label { color: var(--accent); }
.tech-grid--single { grid-template-columns: minmax(0, 46rem); }

/* ----- I cinque passi della prima visita (numero già nel testo) ----- */
.flow-list { display: grid; max-width: 48rem; margin-top: 1.6rem; }
.flow-list li { padding: 1.35rem 0; border-top: 1px solid var(--line); color: var(--ink-soft); }
.flow-list li:first-child { border-top: 0; }
.flow-list strong { font-family: var(--display); font-weight: 700; color: var(--blu); letter-spacing: -0.01em; }

/* ----- Le cinque regole del Protocollo Comfort ----- */
.rules-flat { display: grid; max-width: 50rem; }
.rule-flat { padding: 1.6rem 0; border-top: 1px solid var(--line); }
.rule-flat:first-child { border-top: 0; }
.rule-flat h3 { font-size: 1.25rem; margin-bottom: 0.45rem; }
.rule-flat h3 .rule-flat__num { color: var(--accent); margin-right: 0.4rem; }
.rule-flat p { margin: 0; max-width: 46rem; color: var(--ink-soft); }

/* ----- Chi Siamo: griglia team, focus sul dottore, firma della lettera ----- */
.team-sub { margin-top: clamp(2.75rem, 5.5vw, 4rem); }
.team-grid { display: grid; gap: 1.5rem; margin-top: 1.4rem; }
@media (min-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card {
  background: var(--surface); border: 1px solid var(--surface-line);
  border-radius: var(--radius); padding: clamp(1.7rem, 3vw, 2.2rem);
  box-shadow: var(--surface-shadow);
}
.team-card p { margin: 0; max-width: none; color: var(--ink-soft); }
.team-card strong {
  display: block; font-family: var(--display); font-weight: 700;
  color: var(--blu); font-size: 1.08rem; letter-spacing: -0.01em;
  margin-bottom: 0.55rem;
}
.team-card--focus { grid-column: 1 / -1; display: grid; gap: 2rem; }
@media (min-width: 860px) { .team-card--focus { grid-template-columns: 0.42fr 1fr; align-items: center; } }
.letter-sign { font-family: var(--display); font-weight: 600; color: var(--blu); }
.panel .prose p { color: var(--ink-soft); }

/* ----- Second opinion ("Portacelo"): pannello in evidenza, uguale su tutte le terapie ----- */
.second-opinion .panel {
  border: 1px solid rgba(46,134,193,0.35);
  background: rgba(46,134,193,0.06);
}

/* ----- Flag lunghi [DA CONFERMARE …] che devono poter andare a capo ----- */
.todo-inline--long { white-space: normal; }

/* =============================================================
   9m. LIVELLO VISIVO (build 22/07/2026 — GUIDA-VISIVA.md)
   Icone di brand, slot immagine, percorso a schede, schede-icona,
   checklist sintomi, blocco confronto, cruscotto EMG, pelle Bambini.
   Solo token esistenti: nessun nuovo colore di marca, nessuna nuova
   famiglia, nessuna libreria.
   ============================================================= */

/* ----- Sprite: presente nel DOM, mai visibile ----- */
.icon-sprite { display: none; }

/* ----- Icona inline: eredita il colore dal contesto, come .mark ----- */
.icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--accent); }
.icon--sm { width: 1.15rem; height: 1.15rem; }
.icon--lg { width: 2rem; height: 2rem; }
.section--dark .icon { color: #7FC0E8; }

/* Pastiglia attorno all'icona */
.icon-badge {
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(46,134,193,0.10);
  color: var(--accent);
}
.icon-badge .icon { width: 1.6rem; height: 1.6rem; color: inherit; }
.section--dark .icon-badge { background: rgba(127,192,232,0.14); color: #7FC0E8; }

/* =============================================================
   Slot immagine — segnaposto ETICHETTATI, ma veri slot di layout.
   Quando arriva il file vero, si scommenta l'<img loading="lazy">
   che sta dentro ogni slot e si toglie il frame.
   ============================================================= */
.img-slot { margin: 0; }
.img-slot__frame {
  position: relative;
  display: grid; place-items: center; gap: 0.7rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 2px dashed rgba(46,134,193,0.40);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(46,134,193,0.10), transparent 62%),
    linear-gradient(160deg, #EDF3F8, #D9E6EF);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-align: center;
  padding: 1.25rem;
}
.img-slot__frame .icon { width: 2.4rem; height: 2.4rem; color: rgba(26,82,118,0.55); }
.img-slot__tag {
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blu); opacity: 0.75;
}
.img-slot__cap {
  margin-top: 0.85rem;
  font-size: 0.88rem; line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46rem;
}
.img-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

.section--dark .img-slot__frame {
  border-color: rgba(127,192,232,0.45);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(127,192,232,0.16), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  box-shadow: none;
}
.section--dark .img-slot__frame .icon { color: rgba(220,234,243,0.7); }
.section--dark .img-slot__tag { color: #7FC0E8; opacity: 1; }
.section--dark .img-slot__cap { color: var(--light-soft); }

/* Formati */
.img-hero .img-slot__frame     { aspect-ratio: 16 / 9; }
.img-side .img-slot__frame     { aspect-ratio: 4 / 3; }
.img-band .img-slot__frame     { aspect-ratio: 16 / 9; }
.img-portrait .img-slot__frame { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .img-hero .img-slot__frame { aspect-ratio: 21 / 8; }
  .img-band .img-slot__frame { aspect-ratio: 21 / 7; }
}

/* Testata di pagina con immagine grande sotto il testo */
/* .page-hero .img-hero: il margine è passato a --img-air nel blocco 9o. */

/* Banda immagine fra due sezioni */
.img-band-section { padding-block: 0; background: var(--bg); }
.img-band-section .wrap { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Coppia prima / dopo */
.img-beforeafter__pair { display: grid; gap: 1rem; }
@media (min-width: 700px) { .img-beforeafter__pair { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.img-beforeafter .img-slot__frame { aspect-ratio: 1 / 1; }

/* =============================================================
   Sezione a due colonne: testo + immagine (lato alternato)
   ============================================================= */
.split { display: grid; gap: var(--block-gap); align-items: center; }
@media (min-width: 980px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--split-gap); }
  .split--rev .split__media { order: -1; }
}
.split__text > * + * { margin-top: 1.15em; }
.split__text .section__head { margin-bottom: 1.6rem; }
.split--after { margin-top: clamp(3rem, 6vw, 4.5rem); }
.head-ico .statement { margin-top: 0; }

/* =============================================================
   PERCORSO A SCHEDE — un solo componente, riusato in Metodo,
   Prima Visita, Protocollo Comfort e «Il percorso» delle terapie.
   Il filo collega i passi: passa DIETRO le schede, si vede nei varchi.
   ============================================================= */
.journey { position: relative; display: grid; gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.journey--4, .journey--5 { gap: 1rem; }
@media (min-width: 900px) {
  .journey--3 { grid-template-columns: repeat(3, 1fr); }
  .journey--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
  .journey--5 { grid-template-columns: repeat(5, 1fr); }
}

/* Il filo: verticale su mobile, orizzontale su desktop */
.journey::before {
  content: ""; position: absolute; z-index: 0;
  left: 3rem; top: 2.6rem; bottom: 2.6rem; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(46,134,193,0.45) 12%, rgba(46,134,193,0.45) 88%, transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.1s var(--ease) 0.15s;
}
.journey.is-threaded::before { transform: scaleY(1); }
@media (min-width: 900px) {
  .journey--3::before, .journey--4::before {
    left: 8%; right: 8%; width: auto; top: 3.5rem; bottom: auto; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(46,134,193,0.45) 10%, rgba(46,134,193,0.45) 90%, transparent);
    transform: scaleX(0); transform-origin: left;
  }
  .journey--3.is-threaded::before, .journey--4.is-threaded::before { transform: scaleX(1); }
}
@media (min-width: 1100px) {
  .journey--5::before {
    left: 8%; right: 8%; width: auto; top: 3.5rem; bottom: auto; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(46,134,193,0.45) 10%, rgba(46,134,193,0.45) 90%, transparent);
    transform: scaleX(0); transform-origin: left;
  }
  .journey--5.is-threaded::before { transform: scaleX(1); }
}
.section--dark .journey::before,
.section--dark .journey--3::before,
.section--dark .journey--4::before,
.section--dark .journey--5::before { background-image: linear-gradient(180deg, transparent, rgba(127,192,232,0.5) 12%, rgba(127,192,232,0.5) 88%, transparent); }
@media (min-width: 900px) {
  .section--dark .journey--3::before,
  .section--dark .journey--4::before { background-image: linear-gradient(90deg, transparent, rgba(127,192,232,0.5) 10%, rgba(127,192,232,0.5) 90%, transparent); }
}

.journey__step {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.15rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: var(--surface-shadow);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.journey__step:hover { transform: translateY(-4px); border-color: rgba(46,134,193,0.4); box-shadow: var(--shadow); }
@media (min-width: 900px) {
  .journey--3 .journey__step, .journey--4 .journey__step { grid-template-columns: 1fr; }
}
@media (min-width: 1100px) {
  .journey--5 .journey__step { grid-template-columns: 1fr; }
}
.section--alt .journey__step, .section--tint .journey__step { background: var(--bg); }
.section--dark .journey__step { background: #0C2A3E; border-color: rgba(255,255,255,0.12); box-shadow: none; }

.journey__mark { display: flex; align-items: center; gap: 0.75rem; grid-row: span 2; }
@media (min-width: 900px) {
  .journey--3 .journey__mark, .journey--4 .journey__mark { grid-row: auto; margin-bottom: 0.9rem; }
}
@media (min-width: 1100px) {
  .journey--5 .journey__mark { grid-row: auto; margin-bottom: 0.9rem; }
}
.journey__num {
  font-family: var(--display); font-weight: 700;
  font-size: 0.92rem; letter-spacing: 0.12em;
  color: var(--accent);
}
.section--dark .journey__num { color: #6FB2DF; }
.journey__step h3 { font-size: 1.16rem; margin-bottom: 0.4rem; }
.section--dark .journey__step h3 { color: #fff; }
.journey__step p, .journey__body { margin: 0; max-width: none; color: var(--ink-soft); font-size: 0.98rem; }
.section--dark .journey__step p, .section--dark .journey__body { color: #DCEAF3; }
/* Il numero è già nel testo (es. «1 · L'accoglienza.») → niente numero aggiunto */
.journey--intext .journey__body strong {
  display: block; margin-bottom: 0.35rem;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  color: var(--blu); letter-spacing: -0.01em;
}
.section--dark .journey--intext .journey__body strong { color: #fff; }

/* =============================================================
   SCHEDE-ICONA — «Cosa facciamo di diverso» e affini
   ============================================================= */
.icon-cards { display: grid; gap: 1.25rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 900px) { .icon-cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .icon-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.icon-card {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.8vw, 2.2rem);
  box-shadow: var(--surface-shadow);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.icon-card:hover { transform: translateY(-4px); border-color: rgba(46,134,193,0.4); }
.icon-card .icon-badge { margin-bottom: 1.1rem; }
.icon-card p { margin: 0; max-width: none; color: var(--ink-soft); }
.section--dark .icon-card p { color: #DCEAF3; }

/* =============================================================
   CHECKLIST SINTOMI — «Quando rivolgerti a noi»
   ============================================================= */
.check-cards { display: grid; gap: 0.85rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 760px)  { .check-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .check-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.check-card {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start;
  padding: 1.05rem 1.25rem;
  border: 1px solid var(--surface-line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.98rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.check-card:hover { border-color: rgba(46,134,193,0.4); }
.check-card .icon { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; }
.section--dark .check-card { color: #DCEAF3; }
.section--dark .check-card:hover { border-color: rgba(127,192,232,0.55); background: rgba(255,255,255,0.08); }

/* =============================================================
   BLOCCO CONFRONTO — le opposizioni del copy, affiancate
   ============================================================= */
.vs-block { display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); align-items: stretch; }
@media (min-width: 880px) { .vs-block { grid-template-columns: 1fr auto 1fr; gap: 0; align-items: center; } }
.vs-side {
  padding: clamp(1.6rem, 3vw, 2.3rem);
  border-radius: var(--radius);
  border: 1px solid var(--surface-line);
  background: var(--surface);
}
.vs-side p {
  margin: 0; max-width: none;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.45rem);
  line-height: 1.3; letter-spacing: -0.015em;
  color: var(--ink-soft);
}
/* Variante per opposizioni lunghe: corpo del testo, non display */
.vs-block--prose .vs-side p {
  font-family: var(--sans); font-weight: 400;
  font-size: var(--fs-body); line-height: 1.6; letter-spacing: 0;
}
/* Il lato «loro» non ha un fondo proprio: eredita --surface come le altre card,
   così stacca sempre dalla sezione (prima su sezione in tinta spariva). §6d */
.vs-side--them { background: var(--surface); border-color: var(--surface-line); }
.vs-side--us   { background: rgba(46,134,193,0.07); border-color: rgba(46,134,193,0.32); }
.vs-side--us p { color: var(--blu); }
.vs-block__rule { justify-self: center; }
.vs-block__rule::before {
  content: ""; display: block;
  width: 2px; height: 100%; min-height: 3.5rem;
  margin-inline: clamp(1rem, 2.4vw, 2rem);
  background: linear-gradient(180deg, transparent, rgba(46,134,193,0.4), transparent);
}
@media (max-width: 879px) {
  .vs-block__rule::before { width: 100%; height: 2px; min-height: 0; margin: 0.15rem 0;
    background: linear-gradient(90deg, transparent, rgba(46,134,193,0.4), transparent); }
}
.section--dark .vs-side p { color: var(--light-soft); }
.section--dark .vs-side--us { background: rgba(127,192,232,0.12); border-color: rgba(127,192,232,0.4); }
.section--dark .vs-side--us p { color: #fff; }

/* =============================================================
   Second opinion «Portacelo» — pannello con icona
   ============================================================= */
.second-opinion .section__head { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.second-opinion .section__head h2 { grid-column: 2; }
.second-opinion .icon-badge { background: rgba(46,134,193,0.13); }

/* =============================================================
   Testata di sezione con icona
   ============================================================= */
.head-ico { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; }
.contact-block .icon-badge { margin-bottom: 1rem; }

/* =============================================================
   CHI SIAMO — schede persona con ritratto 4:5
   ============================================================= */
.person-grid { display: grid; gap: 1.5rem; margin-top: 1.4rem; }
@media (min-width: 720px)  { .person-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .person-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.person-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--surface-line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--surface-shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.person-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.person-card .img-slot__frame { border: 0; border-radius: 0; box-shadow: none; aspect-ratio: 4 / 5; }
.person-card__body { padding: clamp(1.4rem, 2.6vw, 1.9rem); }
.person-card__body p { margin: 0; max-width: none; color: var(--ink-soft); }
.person-card__body strong {
  display: block; font-family: var(--display); font-weight: 700;
  color: var(--blu); font-size: 1.08rem; letter-spacing: -0.01em;
  margin-bottom: 0.55rem;
}
.person-card--focus { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .person-card--focus { display: grid; grid-template-columns: 0.42fr 1fr; align-items: center; }
  .person-card--focus .img-slot__frame { height: 100%; aspect-ratio: auto; min-height: 22rem; }
}

/* =============================================================
   11. CRUSCOTTO EMG — esperienza-firma della pagina Tecnologie.
   SVG + JS vanilla, zero dipendenze. UI illustrativa.
   ============================================================= */
.emg {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.emg__screen { position: relative; border-radius: 16px; background: rgba(4,20,31,0.55); padding: 0.6rem; overflow: hidden; }
.emg__wave { display: block; width: 100%; height: auto; }
.emg__grid line { stroke: rgba(127,192,232,0.13); stroke-width: 1; }
.emg__trace {
  fill: none; stroke: #7FC0E8; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  transition: stroke-dashoffset 2.6s var(--ease);
}
.emg.is-live .emg__trace { stroke-dashoffset: 0; }
.emg__threshold { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: 0.85; }
.emg__threshold-label { fill: #6FB2DF; font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; }
.emg__cursor { stroke: rgba(255,255,255,0.5); stroke-width: 1; opacity: 0; transition: opacity 0.2s var(--ease); }
.emg.is-probing .emg__cursor { opacity: 1; }

.emg__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.2rem; margin-bottom: 1rem; }
.emg__title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: #fff; letter-spacing: -0.01em; }
.emg__hint { font-size: 0.84rem; color: var(--light-soft); }

.emg__dials { display: grid; gap: 0.7rem; margin-top: 1.1rem; }
@media (min-width: 620px)  { .emg__dials { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .emg__dials { grid-template-columns: repeat(6, 1fr); } }
.emg__dial {
  text-align: left; cursor: pointer;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
  color: var(--light-soft);
  font-family: var(--sans);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.emg__dial:hover, .emg__dial:focus-visible { border-color: rgba(127,192,232,0.6); background: rgba(255,255,255,0.09); transform: translateY(-2px); }
.emg__dial.is-active { border-color: var(--accent); background: rgba(46,134,193,0.18); }
.emg__dial-lbl { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #6FB2DF; }
.emg__dial-val { display: block; font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: #fff; letter-spacing: -0.02em; margin: 0.25rem 0 0.4rem; }
.emg__bar { display: block; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.14); position: relative; }
.emg__bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #2E86C1, #7FC0E8);
  transition: width 1.1s var(--ease);
}
.emg.is-live .emg__bar i { width: var(--fill, 0%); }
.emg__bar::after {
  content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--mark, 100%);
  width: 2px; background: rgba(255,255,255,0.55);
}

.emg__readout {
  margin-top: 1.1rem; padding: 1rem 1.15rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
  min-height: 4.6rem;
}
.emg__readout p { margin: 0; max-width: none; color: #DCEAF3; font-size: 0.95rem; }
.emg__readout p + p { margin-top: 0.35rem; }
.emg__readout strong { color: #fff; }
.emg__note { margin-top: 0.9rem; font-size: 0.82rem; color: var(--light-soft); max-width: 46rem; }

/* =============================================================
   PAGINA BAMBINI — stessa struttura, pelle più calda e giocosa.
   Nessun colore nuovo: solo forme più tonde e accenti più vivaci.
   ============================================================= */
body.page--kids { --radius: 30px; }
body.page--kids .page-hero {
  background:
    radial-gradient(90% 70% at 88% 0%, rgba(46,134,193,0.16), transparent 60%),
    linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
}
body.page--kids .check-card,
body.page--kids .icon-card,
body.page--kids .journey__step { border-radius: 26px; }
body.page--kids .icon-badge { width: 3.4rem; height: 3.4rem; background: rgba(46,134,193,0.16); }
body.page--kids .icon-badge .icon { width: 1.85rem; height: 1.85rem; }
body.page--kids .img-slot__frame { border-radius: 30px; border-style: dashed; }
body.page--kids .pull { border-left-width: 4px; }
body.page--kids .btn-primary { box-shadow: 0 18px 38px -14px rgba(46,134,193,0.8); }

/* =============================================================
   9n. RIFINITURE HOME + AZIONI RAPIDE (build 23/07/2026)
   Secondo livello di lettura (frase-perno), riquadri in evidenza,
   immagini agganciate, pulsanti fissi WhatsApp/telefono.
   Solo token esistenti.
   ============================================================= */

/* ----- Slot immagine con il file vero dentro ----- */
.img-slot.is-filled img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-img);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--bg-alt);
}
/* Su sezione scura la cornice diventa il filetto chiaro (§6d). */
.section--dark .img-slot.is-filled img,
.hero .img-slot.is-filled img { border-color: var(--line-dark); }
.img-hero.is-filled img     { aspect-ratio: 16 / 9; }
.img-side.is-filled img     { aspect-ratio: 4 / 3; }
.img-band.is-filled img     { aspect-ratio: 16 / 9; }
.img-portrait.is-filled img { aspect-ratio: 4 / 5; }
/* La coppia prima/dopo teneva l'1:1 sul .img-slot__frame, che con l'immagine vera
   non c'è più: lo stesso rapporto va rimesso sull'<img>. */
.img-beforeafter .img-slot.is-filled img { aspect-ratio: 1 / 1; }
@media (min-width: 900px) {
  .img-hero.is-filled img { aspect-ratio: 21 / 8; }
  .img-band.is-filled img { aspect-ratio: 21 / 7; }
}
/* ----- Aggancio foto del 27/07/2026 (secondo giro) -----
   Schede persona di Chi Siamo: il ritratto è a filo scheda (niente raggio, niente
   ombra: la scheda ha già le sue). Il 4:5 stava sul .img-slot__frame, che con
   l'immagine vera non esiste più. */
.person-card .img-slot.is-filled img {
  aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; border: 0;
}
@media (min-width: 860px) {
  .person-card--focus .img-slot.is-filled { height: 100%; }
  .person-card--focus .img-slot.is-filled img { height: 100%; aspect-ratio: auto; min-height: 22rem; }
}
/* Immagine che va LETTA per intero (l'infografica): larghezza piena del blocco,
   a filo con la colonna di testo, e proporzione naturale — niente ritaglio, o
   si perderebbero pezzi di infografica. */
.img-wide.is-filled img {
  /* NIENTE `aspect-ratio` qui: dichiararlo (anche come `auto`) azzera il rapporto
     che il browser ricava dagli attributi width/height dell'<img>, e prima del
     lazy-load il riquadro collassava a 2px. Senza la dichiarazione, lo spazio
     viene riservato dagli attributi e non c'è salto di layout. */
  height: auto;
  object-fit: contain;
}
.img-slot.img-wide { margin-top: var(--block-gap); }
/* .img-slot--center: non più in uso dal 27/07/2026 (restringeva l'infografica).
   Resta in foglio come le altre classi non usate, cfr. CLAUDE.md §6. */
.img-slot--center { max-width: 46rem; margin-inline: auto; }

/* ----- Mappa incorporata (contatti) -----
   Stessa forma degli slot immagine: raggio, ombra morbida, nessun bordo proprio. */
.map-embed iframe {
  display: block; width: 100%; border: 0;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.map-embed__link { margin: 0.9rem 0 0; font-size: 0.95rem; }

/* ----- Frase-perno: il secondo livello di lettura -----
   Chi scorre la pagina senza leggerla deve comunque capire.
   UNA per blocco: se se ne mettono tre, non ne funziona nessuna. */
.perno {
  font-weight: 700;
  color: var(--blu);
}
.section--dark .perno, .hero .perno { color: #fff; }

/* ----- Riquadro in evidenza: un elenco che ferma lo scroll ----- */
.frame-list {
  display: grid; gap: 0.9rem;
  max-width: 46rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--surface-shadow);
}
.frame-list li {
  position: relative; padding-left: 1.7rem;
  color: var(--ink-soft);
}
.frame-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.section--dark .frame-list { border-left-color: #6FB2DF; }
.section--dark .frame-list li { color: #DCEAF3; }
.section--dark .frame-list li::before { background: #6FB2DF; }

/* ----- Schede in evidenza: le promesse gonfiate, i tre «se» ----- */
.claim-cards { display: grid; gap: 1rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (min-width: 900px) { .claim-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.claim-card {
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  box-shadow: var(--surface-shadow);
  color: var(--ink-soft);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.claim-card:hover { transform: translateY(-4px); border-color: rgba(46,134,193,0.4); }
.section--dark .claim-card { color: #DCEAF3; }
.section--dark .claim-card:hover { border-color: rgba(127,192,232,0.55); background: rgba(255,255,255,0.08); }

/* ----- #campo-di-battaglia: colonne editoriali, non campi di un form (27/07/2026) -----
   Le tre promesse occupano tutta la larghezza del .wrap (la foto è uscita dalla loro riga
   ed è diventata una banda), quindi il testo respira e non serve più il riempimento a
   riquadro: resta un filetto sottile di --accent schiarito. Scoped a questa sezione perché
   .claim-card è usata anche per i tre «se» della chiusura, che restano com'erano.
   rgba(46,134,193,0.4) = --accent #2E86C1 a opacità ridotta — è la stessa tinta già usata
   dall'hover di .claim-card. Nessun colore nuovo. */
#campo-di-battaglia .claim-card {
  background: transparent;
  border: 1px solid rgba(46,134,193,0.4);
  box-shadow: none;
}
#campo-di-battaglia .claim-card:hover {
  background: transparent;
  border-color: rgba(46,134,193,0.7);
}

/* ----- Blocco impianto: la lista che ferma lo scroll + la battuta finale ----- */
.impianto { max-width: 46rem; margin-top: clamp(2rem, 4vw, 3rem); }
.impianto__intro { margin-bottom: 1.1rem; }
.impianto__list {
  display: grid; gap: 0.85rem;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  background: var(--surface);
  border: 1px solid rgba(46,134,193,0.3);
  border-radius: var(--radius);
  box-shadow: var(--surface-shadow);
}
.impianto__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem;
  align-items: start;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem);
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--blu);
}
.impianto__list .icon { width: 1.3rem; height: 1.3rem; margin-top: 0.18em; }
.impianto__turn {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.02rem + 0.95vw, 1.75rem);
  line-height: 1.25; letter-spacing: -0.02em;
  max-width: 34ch;
}

/* ----- Respiro extra dove il copy lo chiede ----- */
.breathe { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* =============================================================
   AZIONI RAPIDE — pulsanti fissi WhatsApp + telefono.
   Su desktop in basso a destra; su mobile barra piena in fondo.
   ============================================================= */
.quick-actions {
  position: fixed; z-index: 200;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.6rem;
}
.quick-action {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  line-height: 1; text-decoration: none; white-space: nowrap;
  box-shadow: 0 18px 38px -16px rgba(16,40,60,0.55);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.quick-action:hover { transform: translateY(-2px); }
.quick-action .icon { width: 1.25rem; height: 1.25rem; color: currentColor; }
.quick-action--wa  { background: var(--blu);   color: #fff; }
.quick-action--wa:hover  { background: #164863; }
.quick-action--tel { background: #fff; color: var(--blu); border: 1px solid var(--line); }
.quick-action--tel:hover { background: var(--bg-alt); }

/* Mobile: barra piena in fondo, i due pulsanti affiancati.
   Il footer guadagna spazio sotto, così la barra non copre la riga legale. */
@media (max-width: 700px) {
  .quick-actions {
    right: 0; left: 0; bottom: 0;
    flex-direction: row; align-items: stretch; gap: 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    padding: 0.6rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom));
    gap: 0.6rem;
  }
  .quick-action { flex: 1; justify-content: center; padding: 0.95rem 0.6rem; box-shadow: none; }
  .quick-action:hover { transform: none; }
  .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}
/* Sotto i 380px l'etichetta lunga andrebbe a capo: resta l'icona + «WhatsApp». */
@media (max-width: 380px) {
  .quick-action--wa span { font-size: 0; }
  .quick-action--wa span::after { content: "WhatsApp"; font-size: 0.95rem; }
}

/* =============================================================
   9o. TRATTAMENTO EDITORIALE (27/07/2026)
   Più aria, immagini incorniciate, sezioni che si leggono come
   pagine distinte. Solo composizione: nessun token di marca,
   nessun colore, nessun font nuovo. Le tre manopole stanno in
   testa al foglio (:root) — cfr. CLAUDE.md §6c.
   ============================================================= */

/* ----- Sotto i 720px la scala dei titoli torna a 1 -----
   Il titolo più grande è un gesto editoriale DA DESKTOP. Su telefono anche
   un +5% manda fuori misura le parole lunghe annotate (il tratto .mark è un
   inline-block e non va a capo): verificato, l'H2 «campo di battaglia.»
   sfondava di 25px a 390px e di 15px a 360px. Sul piccolo la scala dei
   titoli resta quella di prima — che è già ampia. */
@media (max-width: 720px) { :root { --type-scale: 1; } }

/* ----- Griglie di card: gutter ampi, stesso passo su tutto il sito ----- */
.icon-cards,
.check-cards,
.claim-cards,
.tech-grid,
.quotes,
.team-grid,
.person-grid,
.pillars,
.stats      { gap: var(--grid-gap); }
@media (min-width: 880px) { .pillars { gap: var(--grid-gap); } }
.tech-grid  { margin-bottom: var(--block-gap); }

/* ----- Aria attorno alle bande immagine: sono «lastre», non fondali -----
   La banda deve avere spazio sopra e sotto per staccare dal testo. */
.img-slot.is-filled.img-band { margin-block: var(--img-air); }
/* Dentro la .img-band-section l'aria la fa il padding del .wrap, non un margine:
   un margine su un figlio di un contenitore senza padding collasserebbe FUORI
   dalla sezione e andrebbe a sommarsi a quella accanto. */
.img-band-section .wrap { padding-block: var(--img-air); }
.img-band-section .img-slot.is-filled.img-band { margin-block: 0; }
.page-hero .img-hero { margin-top: var(--img-air); }

/* ----- Respiro fra i blocchi di una stessa sezione ----- */
.prose + .prose,
.prose + .panel,
.prose + .frame-list,
.prose + .vs-block,
.prose + .claim-cards,
.prose + .icon-cards,
.prose + .check-cards,
.statement + .prose,
.pull + .prose,
.claim-cards + .prose,
.icon-cards + .prose,
.journey + .prose      { margin-top: var(--block-gap); }

/* ----- Testate: occhiello → titolo → lead con più stacco ----- */
.page-hero h1     { margin-bottom: 1.9rem; }
.page-hero .lead  { margin-top: 0.4rem; }

/* ----- Hero della home: un filo più imponente, video invariato -----
   La presenza si regola con --hero-min in :root, non qui. */
.hero { padding-block: clamp(8rem, 16vh, 11.5rem) clamp(4.5rem, 10vh, 8rem); }

/* =============================================================
   9p. FORM RICHIESTA VISITA (contatti, 27/07/2026)
   Solo token esistenti: superfici da --surface, raggio e ombre di sistema.
   ============================================================= */
.form-visita {
  display: grid; gap: 1.15rem;
  max-width: 46rem;
  margin-top: var(--block-gap);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  box-shadow: var(--surface-shadow);
}
.form-row { display: grid; gap: 1.15rem; }
@media (min-width: 700px) { .form-row { grid-template-columns: repeat(2, 1fr); } }
.form-field { display: grid; gap: 0.45rem; }
.form-label {
  font-family: var(--sans); font-weight: 600; font-size: 0.92rem;
  color: var(--blu); letter-spacing: 0.01em;
}
.form-label em { font-weight: 400; font-style: normal; color: var(--ink-soft); }
.form-visita input,
.form-visita textarea {
  font-family: var(--sans); font-size: var(--fs-body); color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.form-visita textarea { resize: vertical; min-height: 6.5rem; line-height: 1.55; }
.form-visita input:focus-visible,
.form-visita textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,134,193,0.18);
}
/* Consenso privacy: obbligatorio, e si vede che lo è. */
.form-consent {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start;
  font-size: 0.95rem; color: var(--ink-soft);
  padding-top: 0.35rem;
}
.form-consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--accent); flex: none; }
.form-consent a { color: var(--accent); font-weight: 600; }
.form-consent:has(input:invalid) span { color: var(--ink); }
/* Due consensi di fila: il secondo non ha bisogno dello stacco che serve al primo
   per staccarsi dal campo di testo sopra. Restano distanziati dal gap del form. */
.form-consent + .form-consent { padding-top: 0; }
.form-visita .cta-row { margin-top: 0.35rem; }
.form-visita button { border: 0; font-family: var(--sans); }
/* Su sezione scura il form eredita comunque le superfici giuste (§6d). */
.section--dark .form-visita input,
.section--dark .form-visita textarea { background: rgba(255,255,255,0.06); color: var(--light); border-color: var(--line-dark); }

/* =============================================================
   10. prefers-reduced-motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .path:hover, .tech:hover { transform: none; }
  .mark__svg path { stroke-dashoffset: 0; }
  .hero__media { animation: none; }

  /* Livello visivo (9m): ogni animazione parte già al suo stato finale */
  .journey::before,
  .journey--3::before, .journey--4::before, .journey--5::before { transform: none; }
  .journey__step:hover, .icon-card:hover, .person-card:hover, .emg__dial:hover { transform: none; }
  .emg__trace { stroke-dashoffset: 0; }
  .emg__bar i { width: var(--fill, 0%); }
  .emg__cursor { opacity: 0; }

  /* Rifiniture home + azioni rapide (9n) */
  .claim-card:hover, .quick-action:hover { transform: none; }
}