/* ==========================================================================
   Noesys Professional Coaching — foglio di stile (Strada 2)
   La grafica sono i simboli in 3D e i fili: quattro aste sottilissime nei
   materiali del logo (ottone, oliva, salvia, blu), ombreggiate come oggetti
   tondi, con i colori presi dai simboli generati. Nessun disegno piatto.
   1. Variabili   2. Base   3. Testata e menu   4. Componenti   5. Home
   6. Pagine interne   7. Invito, stringa legale, barra di prenotazione
   8. Movimento ridotto
   ========================================================================== */

/* 0. Caratteri ------------------------------------------------------------ */
/* Ospitati sul sito (07/10/2026), non più caricati da Google: nessun dato del
   visitatore va a terzi solo per vedere le lettere. EB Garamond e Jost hanno
   la licenza libera SIL OFL 1.1 (testi in assets/fonts). Solo l'alfabeto
   latino, che copre l'italiano con accenti, virgolette e trattini. Il file
   dritto è uno solo per i due pesi 400 e 500 (carattere variabile). */
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../fonts/eb-garamond.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/eb-garamond-corsivo.woff2") format("woff2");
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../fonts/jost.woff2") format("woff2");
}

/* 1. Variabili ------------------------------------------------------------ */
:root {
  /* colori del marchio */
  --blu: #223B6E;
  --blu-scuro: #182C55;
  --oro: #D8AE2E;
  --oro-chiaro: #E7C659;
  --salvia: #4F8B73;
  --oliva: #B7B342;
  /* colori di servizio */
  --inchiostro: #222B3F;   /* testo corrente: contrasto 14:1 sul bianco */
  --grigio: #565F73;       /* testo secondario: contrasto 6,4:1 */
  --linea: #DCE1EA;
  --velo: #F4F6F9;

  /* i fili: un'asta tonda vista di lato (scuro sul bordo, riflesso poco sopra il centro) */
  --asta-oro: linear-gradient(180deg, #98701E, #DCAF45 30%, #FEDC70 46%, #DCAF45 64%, #83601A);
  --asta-oliva: linear-gradient(180deg, #666022, #8D8739 30%, #D3CB8F 46%, #8D8739 64%, #57521E);
  --asta-salvia: linear-gradient(180deg, #283A34, #496158 30%, #99A8A3 46%, #496158 64%, #22312C);
  --asta-blu: linear-gradient(180deg, #0A1628, #1D3560 30%, #818AA2 46%, #1D3560 64%, #081222);
  --filo: 3px;             /* spessore di un filo */
  --fili: var(--asta-oro) 0 0 / 100% var(--filo) no-repeat,
          var(--asta-oliva) 0 7px / 100% var(--filo) no-repeat,
          var(--asta-salvia) 0 14px / 100% var(--filo) no-repeat,
          var(--asta-blu) 0 21px / 100% var(--filo) no-repeat;
  --fili-alti: 24px;
  --bianco: #FFFFFF;

  --serif: "EB Garamond", Garamond, "Adobe Garamond Pro", Georgia, serif;
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  /* scala tipografica */
  --f-mini: .875rem;
  --f-ui: 1rem;
  --f-testo: clamp(1.1875rem, 1.08rem + .3vw, 1.3125rem);
  --f-lede: clamp(1.4375rem, 1.15rem + 1vw, 2rem);
  --f-h3: clamp(1.625rem, 1.35rem + .9vw, 2.25rem);
  --f-h2: clamp(2.125rem, 1.55rem + 2vw, 3.375rem);
  --f-h1: clamp(2.75rem, 1.7rem + 4.4vw, 6rem);

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1280px;
  --spazio: clamp(80px, 11vw, 168px);
  --testata: 148px;        /* altezza della testata fissa */
  --barra: 72px;           /* altezza della barra di prenotazione fissa */
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata) + 16px);
  scroll-padding-bottom: var(--barra);
}

body {
  margin: 0;
  padding-bottom: var(--barra);
  overflow-x: clip;
  background: var(--bianco);
  color: var(--inchiostro);
  font-family: var(--serif);
  font-size: var(--f-testo);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  color: var(--blu);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blu); text-decoration-color: var(--oro); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--blu); outline-offset: 4px; border-radius: 3px; }

.contenitore { width: min(calc(100% - 2 * var(--gutter)), var(--max)); margin-inline: auto; }

.salta {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 999px;
  background: var(--blu); color: var(--bianco);
  font-family: var(--sans); font-size: var(--f-ui); text-decoration: none;
}
.salta:focus { top: 12px; }

/* dati da completare: visibili come tali */
.segnaposto {
  padding: 0 .25em;
  border-radius: 3px;
  background: #FBF3D9;
  color: #6B5410;
  font-family: var(--sans);
  font-size: .85em;
  font-variant-numeric: lining-nums;
}

/* 3. Testata e menu -------------------------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.testata.is-scorsa { border-bottom-color: var(--linea); }
@supports (backdrop-filter: blur(8px)) {
  .testata { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(10px); }
}

.testata__barra { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 40px); min-height: var(--testata); }

.marchio { flex: none; border-radius: 4px; }
.marchio img { height: 116px; width: auto; }

.navigazione { margin-left: auto; }
.navigazione > ul { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); margin: 0; padding: 0; list-style: none; }
.navigazione > ul > li > a,
.tendina__voce > a {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border: 0; background: none; cursor: pointer;
  color: var(--inchiostro);
  font-family: var(--sans); font-size: .9375rem; letter-spacing: .01em; line-height: 1.4;
  text-decoration: none; white-space: nowrap;
}
.navigazione > ul > li > a::after,
.tendina__voce > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px;
  background: var(--blu);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.navigazione > ul > li > a:hover::after,
.navigazione > ul > li > a[aria-current="page"]::after,
.tendina__voce > a:hover::after,
.tendina.is-attiva .tendina__voce > a::after { transform: scaleX(1); }
.navigazione a[aria-current="page"], .tendina.is-attiva .tendina__voce > a { color: var(--blu); }

/* la tendina di Percorsi e Progetti: la voce porta alla pagina, la freccia apre l'elenco */
.tendina { position: relative; }
.tendina__voce { display: flex; align-items: center; gap: 2px; }
.tendina__apri {
  display: grid; place-items: center; width: 28px; height: 36px; margin-right: -8px;
  padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--inchiostro);
}
.tendina__apri:hover, .tendina.is-attiva .tendina__apri { color: var(--blu); }
.tendina__apri:focus-visible { outline-offset: -2px; }   /* il riquadro di selezione non copre la voce accanto */
.tendina__freccia {
  width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease, margin .25s ease;
}
.tendina__apri[aria-expanded="true"] .tendina__freccia { margin-top: 3px; transform: rotate(-135deg); }
.tendina__pannello {
  position: absolute; top: 100%; left: -28px; z-index: 5;
  min-width: 340px; margin-top: 10px; padding: 22px 28px 24px;
  border: 1px solid var(--linea); border-radius: 16px;
  background: var(--bianco);
  box-shadow: 0 18px 44px rgba(20, 36, 74, .12);
}
.tendina__pannello::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* ponte per il mouse */
.tendina__pannello[hidden] { display: none; }
.tendina__gruppo + .tendina__gruppo { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
.tendina__titolo { margin: 0 0 6px; color: var(--blu); font-size: 1.3rem; line-height: 1.3; }
.tendina__pannello ul { margin: 0; padding: 0; list-style: none; }
.tendina__pannello a { display: flex; align-items: center; gap: 14px; padding: 4px 0; color: var(--blu); font-size: 1.3rem; line-height: 1.3; text-decoration: none; }
.tendina__pannello a { white-space: nowrap; }
.tendina__simbolo { flex: none; width: 76px; height: auto; mix-blend-mode: multiply; }
.tendina__titolo + ul a { font-family: var(--sans); font-size: 1rem; color: var(--inchiostro); }
.tendina__pannello a:hover { text-decoration: underline; text-decoration-color: var(--oro); }

/* pulsante e menu per telefono e tablet */
.menu-apri {
  display: none; margin-left: auto;
  align-items: center; gap: 10px;
  padding: 10px 4px; border: 0; background: none; cursor: pointer;
  color: var(--blu); font-family: var(--sans); font-size: var(--f-ui);
}
.menu-apri__segno { position: relative; width: 22px; height: 12px; }
.menu-apri__segno::before, .menu-apri__segno::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .3s ease, top .3s ease;
}
.menu-apri__segno::before { top: 0; }
.menu-apri__segno::after { top: 10px; }
.menu-apri[aria-expanded="true"] .menu-apri__segno::before { top: 5px; transform: rotate(45deg); }
.menu-apri[aria-expanded="true"] .menu-apri__segno::after { top: 5px; transform: rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: var(--testata) 0 0 0; z-index: 49;
  overflow-y: auto;
  padding: 16px var(--gutter) calc(var(--barra) + 32px);
  background: var(--bianco);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile ul { margin: 0; padding: 0; list-style: none; }
.menu-mobile nav > ul > li + li { border-top: 1px solid var(--linea); }
.menu-mobile a {
  display: block; padding: 12px 0;
  color: var(--blu); font-size: 1.625rem; line-height: 1.2; text-decoration: none;
}
.menu-mobile a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: .18em; }
.menu-mobile__gruppo { padding-bottom: 8px; }
.menu-mobile a.menu-mobile__voce { padding-bottom: 4px; }
.menu-mobile__sottotitolo { margin: 6px 0 0; color: var(--blu); font-size: 1.625rem; line-height: 1.2; }
.menu-mobile .rientro { margin: 4px 0 4px 2px; padding-left: 18px; border-left: 1px solid var(--linea); }
.menu-mobile .rientro a { padding: 8px 0; font-family: var(--sans); font-size: 1.125rem; color: var(--inchiostro); }

html.menu-aperto { overflow: hidden; }

@media (max-width: 1100px) {
  .navigazione { display: none; }
  .menu-apri { display: inline-flex; }
}
@media (max-width: 640px) {
  :root { --testata: 104px; --barra: 76px; }
  /* 80 px finché logo, spazio e pulsante «Menu» (circa 100 px insieme) ci stanno; sui telefoni
     più stretti il logo si riduce quanto basta (360 px → circa 71), così niente esce dal bordo (13/10/2026) */
  .marchio img { height: min(80px, calc((100vw - 2 * var(--gutter) - 100px) / 3.13)); }
}

/* 4. Componenti ------------------------------------------------------------ */
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .9rem 1.6rem;
  border: 0; border-radius: 999px;
  background: var(--blu); color: var(--bianco);
  font-family: var(--sans); font-size: var(--f-ui); font-weight: 500; line-height: 1.25; letter-spacing: .01em;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease;
}
.bottone:hover { background: var(--blu-scuro); }
.bottone--oro { background: var(--oro); color: #14244A; }
.bottone--oro:hover { background: var(--oro-chiaro); }

.collegamento {
  display: inline-block; padding: 6px 0;
  color: var(--blu);
  font-family: var(--sans); font-size: var(--f-ui); font-weight: 500; letter-spacing: .01em;
  text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: .45em;
}
.collegamento:hover { text-decoration-color: var(--blu); }

.sezione { padding-block: var(--spazio); }
/* i tracciati: il fascio che corre tra i testi, disegnato dal JavaScript */
.tracciato-home, .esempi[data-rami], .bio__griglia, .invito { position: relative; }
.tracciato { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.tracciato path { fill: none; stroke-linecap: round; }
.sezione--velo { background: var(--velo); }

.titolo-sezione { font-size: var(--f-h2); margin-bottom: .7em; }

.lede { font-size: var(--f-lede); line-height: 1.35; color: var(--blu); }

.prosa { max-width: 36em; }
.prosa .collegamento { margin-top: 10px; }

.righe span { display: block; }

.fonti { margin-top: -.4em; color: var(--grigio); font-family: var(--sans); font-size: .875rem; line-height: 1.5; }
.fonti a { color: inherit; text-decoration-color: var(--oro); }
.nota-icf { margin-top: 1.6em; color: var(--grigio); font-size: 1.0625rem; }

/* coaching: i benefici, uno per riga, sotto la frase in evidenza */
.benefici span + span { margin-top: .55em; }

/* filosofia: la frase che porta ai percorsi, tra il motto e il rimando */
.su-misura { max-width: 30em; margin: clamp(28px, 4vw, 44px) auto 0; text-align: center; }
.su-misura + .rimandi { margin-top: 18px; }

/* i fili ---------------------------------------------------------------
   Il fascio lungo chiude l'apertura di ogni pagina (è il terreno); il fascio
   corto sta sopra i titoli delle sezioni; il filo d'ottone da solo segna le
   frasi in evidenza, perché l'oro è ciò che si condivide. */
.titolo-sezione::before, .parte__titolo::before, .anteprima h2::before {
  /* entra dal bordo sinistro dello schermo e si ferma poco dopo l'inizio del titolo */
  --fuori: calc(50vw - min(50vw - var(--gutter), var(--max) / 2));
  content: ""; display: block; height: var(--fili-alti);
  width: calc(var(--fuori) + 96px); margin: 0 0 28px calc(-1 * var(--fuori));
  background: var(--fili);
}
.evidenza {
  position: relative; margin-block: 1.5em; padding-top: 26px;
  color: var(--blu); font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); line-height: 1.22; letter-spacing: -.005em;
}
.evidenza::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: var(--filo); border-radius: var(--filo); background: var(--asta-oro); }

/* i simboli: su fondo bianco puro, si fondono con la pagina */
.simbolo { margin: 0; }
.simbolo img { width: 100%; height: auto; mix-blend-mode: multiply; }

.dichiarazione { max-width: 30em; margin-inline: auto; color: var(--blu); font-size: var(--f-lede); line-height: 1.35; text-align: center; }

/* rimandi a Percorsi e Progetti (in fondo a Filosofia e Coaching) */
.rimandi { margin-top: clamp(48px, 6vw, 88px); text-align: center; }
.collegamento--grande { font-size: 1.1875rem; }

/* in fondo alla pagina Percorsi e Progetti: le due strade, ognuna col suo simbolo */
.scelta { margin-top: clamp(56px, 7vw, 104px); }
.scelta ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 64px); max-width: 880px; margin: 0; padding: 0; list-style: none; }
.scelta a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%;
  padding: 20px 24px 26px; border: 1px solid var(--linea); border-radius: 16px;
  color: var(--blu); font-size: 1.625rem; line-height: 1.2; text-decoration: none;
  transition: border-color .25s ease;
}
.scelta a:hover { border-color: var(--blu); }
.scelta img { width: 100%; max-width: 260px; height: auto; mix-blend-mode: multiply; }
.scelta__nome { display: inline-flex; align-items: center; gap: 12px; }
.scelta__nome::after { content: "→"; font-family: var(--sans); font-size: 1.1rem; transition: translate .25s ease; }
.scelta a:hover .scelta__nome::after { translate: 4px 0; }
@media (max-width: 640px) {
  .scelta ul { grid-template-columns: 1fr; }
  .scelta a { flex-direction: row; align-items: center; gap: 16px; padding: 14px 18px; font-size: 1.375rem; }
  .scelta img { flex: none; width: 112px; }
}

/* avviso per i collegamenti segnaposto (solo per la presentazione) */
.avviso {
  position: fixed; left: 50%; bottom: calc(var(--barra) + 16px); z-index: 80;
  max-width: min(92vw, 440px);
  padding: 14px 20px; border-radius: 14px;
  background: var(--inchiostro); color: var(--bianco);
  box-shadow: 0 10px 30px rgba(20, 36, 74, .25);
  font-family: var(--sans); font-size: .9375rem; line-height: 1.45;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.avviso.is-visibile { opacity: 1; transform: translate(-50%, 0); }

/* 5. Home ------------------------------------------------------------------ */
.apertura { padding-block: clamp(24px, 4vw, 64px) clamp(40px, 5vw, 72px); }
.testa-pagina::after {
  content: ""; display: block; height: var(--fili-alti);
  width: calc(50vw + min(50vw - var(--gutter), var(--max) / 2));   /* dal bordo sinistro dello schermo al margine destro del testo */
  margin-top: clamp(56px, 7vw, 104px);
  background: var(--fili);
}
.apertura__griglia {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "titolo sistema"
    "sotto  sistema"
    "azioni sistema";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(32px, 5vw, 88px);
}
/* Sul computer il titolo occupa tutta la larghezza, sopra testo e immagine:
   «un equilibrio da preservare.» resta su una riga (13/10/2026, scelta di Germano).
   Sul telefono il titolo resta su quattro righe: va a capo dopo «un equilibrio». */
@media (min-width: 961px) {
  .apertura__griglia {
    grid-template-areas:
      "titolo titolo"
      "sotto  sistema"
      "azioni sistema";
  }
}
.apertura h1 {
  grid-area: titolo;
  /* ogni riga del titolo sta intera: la misura segue la larghezza della colonna */
  font-size: min(4.875rem, calc((100vw - 2 * var(--gutter)) / 9.4));
  line-height: 1.04; letter-spacing: -.02em;
}
.apertura h1 .riga { display: block; }
@media (min-width: 961px) { .apertura h1 { font-size: min(4.875rem, 5.2vw); } }
.apertura__sotto {
  grid-area: sotto; max-width: 33em; margin: 1.5em 0 0;
  color: var(--grigio);
  font-size: clamp(1.1875rem, 1.05rem + .4vw, 1.4rem); line-height: 1.55;
}
.apertura__sotto em { display: block; margin-top: .7em; font-style: normal; color: var(--inchiostro); }
.azioni { grid-area: azioni; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 2rem; align-self: start; }
.apertura__oggetto { grid-area: sistema; align-self: center; justify-self: center; width: min(100%, 440px); margin: 0; }

@media (max-width: 960px) {
  .apertura__griglia {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titolo" "sistema" "sotto" "azioni";
    grid-template-rows: none;
  }
  .apertura__oggetto { width: min(80%, 380px); margin: 28px auto 0; }
  .apertura__sotto { margin-top: 1.25em; }
}

/* anteprime delle pagine */
.anteprima__griglia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(40px, 8.5vw, 136px); align-items: start; }
.anteprima h2 { font-size: var(--f-h2); }
.anteprima .righe { color: var(--grigio); }
.anteprima__simbolo { max-width: 320px; margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 860px) {
  .anteprima__griglia { grid-template-columns: 1fr; }
  .anteprima__simbolo { width: min(56%, 220px); margin-inline: 0; }
}

/* 6. Pagine interne ------------------------------------------------------- */
.testa-pagina { padding-block: clamp(40px, 6vw, 96px) clamp(56px, 7vw, 104px); }
.testa-pagina h1 { font-size: var(--f-h1); line-height: 1.02; letter-spacing: -.02em; }
.testa-pagina .lede { margin: .75em 0 0; max-width: 22em; }
.testa-pagina--simbolo { padding-top: clamp(24px, 4vw, 64px); }
.testa-pagina--simbolo .testa-pagina__griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(40px, 6vw, 96px); align-items: end; }
.testa-pagina__simbolo { justify-self: center; width: min(100%, 460px); }
.testa-pagina--simbolo::after { margin-top: clamp(0px, 1vw, 12px); }   /* l'immagine si appoggia al fascio */
@media (max-width: 860px) {
  .testa-pagina--simbolo .testa-pagina__griglia { grid-template-columns: 1fr; }
  .testa-pagina__simbolo { order: -1; justify-self: start; width: min(56%, 240px); }
}

.corpo { padding-bottom: var(--spazio); }
.corpo > .contenitore > * + * { margin-top: clamp(64px, 8vw, 128px); }

.affiancati { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 960px) { .affiancati { grid-template-columns: 1fr; } }

.principio__frase { margin: 0; color: var(--blu); font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem); line-height: 1.16; letter-spacing: -.01em; }
.principio__frase span + span { margin-top: .35em; color: var(--grigio); }

/* filosofia: i tre tempi, con i numeri grandi */
.tempi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(28px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.tempo__numero, .tappa__numero {
  display: block; margin-bottom: 20px;
  color: var(--blu); font-size: clamp(4.5rem, 3rem + 4vw, 7.5rem); line-height: .8; font-variant-numeric: lining-nums;
}
.tempo h3 { font-size: var(--f-h3); margin: 0 0 .45em; }
.intro-tempi { margin: 0 0 clamp(40px, 5vw, 64px); }
@media (max-width: 860px) { .tempi { grid-template-columns: 1fr; } }

.motto {
  margin: 0;
  color: var(--blu); text-align: center;
  font-size: clamp(1.05rem, .8rem + 1.1vw, 1.75rem); letter-spacing: .22em;
}

/* coaching: il percorso in tre tappe, con i numeri grandi */
.percorso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(28px, 4vw, 56px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.tappa h3 { font-size: var(--f-h3); margin-bottom: .5em; }
@media (max-width: 860px) { .percorso { grid-template-columns: 1fr; } }

/* percorsi individuali: due parti, Business e Personal */
.sottomenu { border-block: 1px solid var(--linea); }
.sottomenu ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 14px 0; list-style: none; }
.sottomenu a {
  display: inline-block; padding: 8px 20px; border: 1px solid var(--linea); border-radius: 999px;
  color: var(--blu); font-family: var(--sans); font-size: var(--f-ui); text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease;
}
.sottomenu a:hover { border-color: var(--blu); background: var(--velo); }
.sottomenu + .corpo { padding-top: clamp(56px, 7vw, 112px); }

.parte__titolo { margin-bottom: .8em; font-size: var(--f-h2); }
.parte .affiancati + .esempi { margin-top: clamp(56px, 7vw, 104px); }

.indice-esempi { margin-top: 28px; padding: 24px 0; border-block: 1px solid var(--linea); }
.indice-esempi ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; margin: 0; padding: 0; list-style: none; counter-reset: indice; }
.indice-esempi li { counter-increment: indice; display: flex; gap: 14px; align-items: baseline; }
.indice-esempi li::before { content: counter(indice); color: var(--grigio); font-family: var(--sans); font-size: var(--f-mini); font-variant-numeric: lining-nums; }
.indice-esempi a { font-size: 1.25rem; line-height: 1.3; }
@media (max-width: 720px) { .indice-esempi ol { grid-template-columns: 1fr; } }

.esempi { margin: 0; padding: 0; list-style: none; }
.esempio {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(40px, 6vw, 96px);
  padding-block: clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--linea);
}
.esempio:first-child { padding-top: 0; }
.esempio__testa { align-self: start; }
.esempio__numero { margin-bottom: 14px; color: var(--grigio); font-family: var(--sans); font-size: var(--f-mini); font-variant-numeric: lining-nums; }
.esempio h2, .esempio h3 { font-size: var(--f-h3); line-height: 1.12; }
.esempio__perchi { color: var(--blu); font-size: var(--f-lede); line-height: 1.38; }
.esempio__perchi b { font-weight: 400; font-style: italic; }
.esempio__corpo p { max-width: 34em; }
.esempio__corpo .esempio__perchi { max-width: 26em; margin-bottom: 1.1em; }
@media (max-width: 860px) {
  .esempio { grid-template-columns: 1fr; }
}

.durata { margin-top: 20px; color: var(--grigio); font-family: var(--sans); font-size: .9375rem; font-variant-numeric: lining-nums; }

.parte + .parte { margin-top: var(--spazio); }
.parte__simbolo { max-width: 400px; margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 960px) { .parte__simbolo { width: min(56%, 240px); } }

/* bio */
.bio { padding-block: clamp(40px, 6vw, 96px) var(--spazio); }
.bio__griglia { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(64px, 8.5vw, 136px); align-items: start; }
.bio__foto { position: sticky; top: calc(var(--testata) + 24px); z-index: 2; margin: 0; }
.bio__foto img { width: 100%; height: auto; max-height: calc(100vh - var(--testata) - var(--barra) - 48px); object-fit: cover; object-position: top; border-radius: 6px; }
.bio h1 { font-size: var(--f-h1); line-height: 1.02; letter-spacing: -.02em; margin-bottom: .6em; }
.bio h2 { font-size: var(--f-h3); margin: 1.8em 0 .5em; }
@media (max-width: 860px) {
  .bio__griglia { grid-template-columns: 1fr; row-gap: 72px; } /* spazio per il fascio tra foto e nome */
  .bio__foto { position: static; max-width: 440px; }
  .bio__foto img { max-height: none; }
}

/* contatti */
.contatti__dati { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); font-size: 1.25rem; }
.contatti__dati > div { padding-top: 18px; border-top: 1px solid var(--linea); }
.contatti__dati dt { margin-bottom: 4px; color: var(--grigio); font-family: var(--sans); font-size: var(--f-mini); }
.contatti__dati dd { margin: 0; }
.contatti__dati address { font-style: normal; }
@media (max-width: 960px) { .contatti__dati { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .contatti__dati { grid-template-columns: 1fr; } }

.testo-legale { max-width: 38em; }
.testo-legale .segnaposto { display: inline-block; padding: 16px 20px; font-size: 1rem; line-height: 1.5; }

/* 7. Invito, stringa legale, barra di prenotazione ------------------------ */
.invito {
  position: relative; overflow: hidden;
  padding-block: clamp(52px, 5.2vw, 76px);  /* un quarto più basso della prima versione */
  background: var(--blu); color: #E8ECF4;
}
.invito__griglia { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(40px, 6vw, 96px); align-items: end; }
.invito h2 { color: var(--bianco); font-size: var(--f-h2); margin-bottom: .5em; }
.invito__testo p { max-width: 32em; }
.invito__testo p:first-of-type { color: var(--bianco); font-size: var(--f-lede); line-height: 1.35; }
.invito__azione { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.invito__nota { color: #C3CCDD; font-family: var(--sans); font-size: .9375rem; }
.invito :focus-visible { outline-color: var(--oro); }
@media (max-width: 860px) {
  .invito__griglia { grid-template-columns: 1fr; }
  .invito__azione { align-items: stretch; }
}

.piede { padding-block: 20px; color: var(--grigio); font-family: var(--sans); font-size: var(--f-mini); line-height: 1.6; }
.piede__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; }
.piede__riga p { margin: 0; }
.piede ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.piede a { color: var(--grigio); }
.piede a:hover { color: var(--blu); }

.barra-prenota {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--barra);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--blu);
  transition: transform .35s ease;
}
.barra-prenota .bottone { min-height: 48px; padding: .65rem 1.8rem; }
.barra-prenota.is-nascosta { transform: translateY(110%); }
.barra-prenota :focus-visible { outline-color: var(--oro); }
@media (max-width: 520px) { .barra-prenota .bottone { width: 100%; } }
/* «Prenota una call gratuita di 30 minuti» su una riga anche sui telefoni piccoli (da 340 px);
   se proprio va a capo, le due righe si dividono in modo equilibrato (13/10/2026) */
.bottone { text-wrap: balance; }
@media (max-width: 400px) { .bottone, .barra-prenota .bottone { padding-inline: 1rem; letter-spacing: 0; } }

/* 8. Movimento ridotto ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 9. Schede, fili e immagini ------------------------------------------------
   Le parti da confrontare (anteprime della Home, esempi, tappe del Coaching,
   fasi della Filosofia, le due strade di Percorsi e Progetti) stanno su schede
   bianche con un'ombra lieve, come nell'Hub, sopra una fascia appena velata
   che va da un bordo all'altro dello schermo; i fili le collegano. I testi da
   leggere di seguito restano senza schede. Sul telefono il sito ha una
   composizione sua (in fondo): non è il computer messo in colonna. */
:root {
  --velo-schede: #F3F5F9;
  --ombra-scheda: 0 1px 2px rgba(20, 36, 74, .06), 0 10px 28px rgba(20, 36, 74, .09);
  --ombra-scheda-su: 0 1px 2px rgba(20, 36, 74, .08), 0 16px 36px rgba(20, 36, 74, .14);
  --raggio-scheda: 20px;
  --dentro-scheda: clamp(22px, 3.4vw, 52px);
  --spazio-schede: clamp(16px, 2vw, 28px);
}
.tracciato-home .contenitore, .esempio, .esempio:first-child, .tappa, .tempo, .scelta a {
  border: 0; border-radius: var(--raggio-scheda); background: var(--bianco); box-shadow: var(--ombra-scheda);
}

/* la fascia velata dietro le schede, da un bordo all'altro dello schermo */
.esempi[data-rami], .percorso, .tempi, .scelta ul {
  margin-inline: calc(50% - 50vw);
  padding: clamp(28px, 4vw, 56px) calc(50vw - 50%);
  background: var(--velo-schede);
}
.esempi[data-rami] { padding-left: calc(50vw - 50% + 56px); }   /* spazio per il tronco dei fili */
.esempio, .esempio:first-child { padding: var(--dentro-scheda); }
.esempio + .esempio { margin-top: var(--spazio-schede); }
.percorso, .tempi { gap: var(--spazio-schede); }
.tappa, .tempo { padding: var(--dentro-scheda); }
.scelta ul { gap: var(--spazio-schede); max-width: none; }
.scelta a:hover { box-shadow: var(--ombra-scheda-su); }

/* Coaching, in fondo alla sezione «Percorsi e Progetti. Quali differenze?»: due
   schede brevi e affiancate, una per strada. Tutta la scheda porta a «Come
   funziona» (la sua pagina); l'uscita verso l'offerta sta sopra, a parte. */
.strade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spazio-schede);
  margin: clamp(40px, 5vw, 64px) calc(50% - 50vw) 0;
  padding: clamp(28px, 4vw, 56px) calc(50vw - 50%);
  background: var(--velo-schede);
}
.strada {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--dentro-scheda); border-radius: var(--raggio-scheda); background: var(--bianco); box-shadow: var(--ombra-scheda);
  transition: box-shadow .25s ease;
}
.strada:hover { box-shadow: var(--ombra-scheda-su); }
.strada__simbolo { width: clamp(150px, 16vw, 230px); height: auto; margin-bottom: 18px; mix-blend-mode: multiply; }
.strada h3 { margin: 0 0 .25em; font-size: var(--f-h3); line-height: 1.12; }
.strada__chi { margin: 0; color: var(--grigio); font-family: var(--sans); font-size: .9375rem; letter-spacing: .02em; }
.strada__azioni { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; margin-top: auto; padding-top: clamp(24px, 3vw, 36px); }
.strada__come::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio-scheda); }   /* tutta la scheda porta a «Come funziona» */
.strada .porta { position: relative; z-index: 1; }
.porta { color: var(--blu); font-size: 1.375rem; line-height: 1.2; text-decoration: none; }
.porta__testo { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.porta__freccia { display: inline-block; margin-left: .3em; font-family: var(--sans); font-size: 1.1rem; transition: translate .25s ease; }
.porta:hover .porta__testo { text-decoration-color: var(--blu); }
.porta:hover .porta__freccia { translate: 4px 0; }

/* Le pagine «Come funziona»: le fasi sono le tappe del Coaching di prima; il progetto ne ha otto, su quattro colonne.
   Fascia e schede stanno insieme: in cima alla fascia le due righe che dicono perché il processo è fatto così. */
.fasi {
  margin-inline: calc(50% - 50vw);
  padding: clamp(28px, 4vw, 56px) calc(50vw - 50%);
  background: var(--velo-schede);
}
.fasi .percorso { margin: 0; padding: 0; background: none; }
.fasi__intro { max-width: 34em; margin: 0 0 clamp(24px, 3vw, 40px); color: var(--blu); font-size: var(--f-lede); line-height: 1.35; }
.tappa h2 { margin: 0 0 .5em; font-size: var(--f-h3); }
.percorso--otto { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.percorso--otto .tappa__numero { font-size: clamp(3.5rem, 2.5rem + 2.5vw, 5rem); }
.percorso--otto .tappa h2 { font-size: 1.5rem; line-height: 1.2; }
.percorso--otto .tappa p { font-size: 1.0625rem; line-height: 1.55; }
@media (max-width: 1100px) { .percorso--otto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.informazioni .prosa { margin: 0; }

/* Home: le anteprime sono schede; tutta la scheda porta alla pagina */
.tracciato-home { background: linear-gradient(var(--bianco) 0, var(--velo-schede) 120px); padding-block: clamp(56px, 6vw, 96px) clamp(40px, 5vw, 80px); }
.tracciato-home .anteprima h2::before { display: none; }
.tracciato-home .sezione { padding: 0; }
.tracciato-home .sezione + .sezione { margin-top: var(--spazio-schede); }
.tracciato-home .contenitore { position: relative; padding: var(--dentro-scheda); transition: box-shadow .25s ease; }
.tracciato-home .contenitore:hover { box-shadow: var(--ombra-scheda-su); }
.tracciato-home .prosa .collegamento::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio-scheda); }

/* telefono */
@media (max-width: 860px) {
  /* immagini a tutta colonna, appoggiate al fascio */
  .testa-pagina__simbolo { order: 0; justify-self: center; width: min(100%, 420px); margin-top: 12px; }
  .testa-pagina--simbolo::after { margin-top: 0; }
  .parte__simbolo { width: min(94%, 400px); max-width: none; margin-inline: auto; }

  /* Home: l'immagine sta tra il titolo e il testo; i fili entrano dal bordo dopo l'apertura e arrivano alle schede */
  .apertura { padding-bottom: 8px; }
  .apertura__griglia { grid-template-areas: "titolo" "sistema" "sotto" "azioni"; }
  .apertura__oggetto { width: min(94%, 380px); margin: 16px auto 0; }
  .tracciato-home { padding-block: 56px 40px; }
  .tracciato-home .contenitore { width: auto; margin: 0 16px 0 34px; padding: 24px 22px 22px; }
  .tracciato-home .anteprima__griglia { row-gap: 12px; }
  .tracciato-home .anteprima h2 { font-size: 1.9rem; }
  .tracciato-home .anteprima__simbolo { width: 92%; max-width: none; margin: 8px auto 0; }
  /* nelle anteprime: la frase d'apertura e un passaggio che fa sentire la voce (il testo intero è nella pagina) */
  .tracciato-home .prosa > p:not(.lede):not(.righe):not(.evidenza) { display: none; }
  .tracciato-home #percorsi-progetti .prosa > p:nth-of-type(2) { display: block; }
  .tracciato-home .prosa > p.passaggio:not(.lede):not(.righe):not(.evidenza) { display: block; }
  .tracciato-home .prosa .evidenza { margin-block: 1em .8em; font-size: 1.45rem; }
  .tracciato-home .prosa .collegamento { margin-top: 6px; }

  /* schede più strette, vicine ai bordi */
  .esempi[data-rami] { padding: 30px 16px 12px 34px; }
  .esempio, .esempio:first-child { padding: 22px 20px; }
  .esempio + .esempio { margin-top: 18px; }
  .percorso, .tempi { gap: 16px; padding: 26px 16px; }
  .strade { grid-template-columns: 1fr; gap: 16px; padding: 26px 16px; }
  .strada { padding: 22px 20px; }
  .strada__simbolo { width: 140px; margin-bottom: 12px; }
  .percorso--otto { grid-template-columns: 1fr; }
  .fasi { padding: 26px 16px; }
  .fasi .percorso { padding: 0; }
  /* sul telefono, nel progetto, il numero sta accanto al nome della fase: otto schede restano leggibili */
  .percorso--otto .tappa { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 8px; }
  .percorso--otto .tappa__numero { grid-row: 1 / span 2; margin: 0; font-size: 2.25rem; }
  .tappa, .tempo { padding: 22px 20px; }
  .tempo__numero, .tappa__numero { font-size: 4rem; margin-bottom: 12px; }
  .scelta ul { gap: 14px; padding: 24px 16px; }
}

/* Revisione editoriale del 02/10/2026 */
.tempo strong { font-weight: 500; color: var(--blu); }                 /* il nucleo di ogni fase della Filosofia */
.parte__sottotitolo { margin: 0 0 .4em; color: var(--blu); font-family: var(--sans); font-size: .9375rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.dichiarazione-con-rimando { text-align: center; }

/* Coaching, 06/10/2026: dopo la frase di sintesi due collegamenti uno sotto l'altro,
   verso la pagina Percorsi e Progetti (le differenze) e verso le sue due schede */
.rimandi--due { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(28px, 4vw, 44px); }
.rimando-come { margin-top: 18px; }

/* Immagini più grandi, 05/10/2026: Germano vuole che riempiano gli spazi.
   Le immagini sono anche ritagliate più strette (meno bianco intorno all'oggetto). */
.apertura__oggetto { width: 100%; }
.testa-pagina__simbolo { width: 100%; }
.anteprima__simbolo { max-width: none; width: 100%; }
.parte__simbolo { max-width: 520px; }
.strada__simbolo { width: clamp(200px, 24vw, 340px); }
@media (max-width: 960px) {
  .apertura__oggetto { width: min(100%, 560px); }
  .parte__simbolo { width: min(100%, 520px); }
}
@media (max-width: 860px) {
  .testa-pagina__simbolo { width: min(100%, 560px); }
  .anteprima__simbolo { width: min(100%, 560px); }
  .tracciato-home .anteprima__simbolo { width: 100%; }
  .strada__simbolo { width: min(100%, 300px); }
}
.simbolo--largo img { object-fit: cover; }   /* oggetti larghi: via il bianco sopra e sotto (il formato è scritto su ogni immagine) */

/* Correzioni di Germano sul PDF, 05/10/2026 */
main strong { font-weight: 500; color: var(--blu); }                   /* il grassetto del sito: come nelle fasi della Filosofia */
.corpo-grande { font-size: var(--f-lede); line-height: 1.4; }          /* Filosofia: il paragrafo delle dimensioni, in corpo più grande */

/* iubenda (13/10/2026): le preferenze sui cookie si riaprono dal collegamento «Preferenze cookie»
   in fondo alle pagine; il bottoncino fisso di iubenda è nascosto perché sul telefono copriva
   il pulsante «Prenota». */
/* la regola di iubenda vale tre classi: questa ne vale quattro più gli elementi, quindi vince */
html body button.iubenda-tp-btn.iubenda-tp-btn.iubenda-tp-btn.iubenda-tp-btn { display: none !important; }

/* 10. E-book (13/10/2026, rifatto il 14/10) ----------------------------------
   L'offerta deve saltare all'occhio e non sembrare testo della pagina (Germano, 13/10). Un solo segno in
   tutto il sito (14/10): l'e-book in 3D (immagine trasparente) allineato a destra, con una freccia verde
   sottile «Scarica ora la tua copia gratuita» che parte dal margine sinistro e punta al libro, «dove arriva
   arriva» (verde salvia scurito #3E7462, testo bianco leggibile 5,4:1, diverso dall'oro di «Prenota»).
   Home: nella scheda «Cos'è il coaching» dopo la frase in evidenza. Coaching: accanto al testo sui benefici
   sul computer largo (--lato), sotto lo stesso testo sul telefono e sui computer stretti (--sotto).
   Nella mini pagina invece l'azione è una sola, il modulo, e il pulsante è oro. */
.ebook-flash { position: relative; z-index: 2; display: block; margin: 8px 0 12px; text-decoration: none; }
/* nell'immagine il bordo destro del libro è all'82%: lì si porta il margine destro del testo */
.ebook-flash img { width: var(--libro, min(100%, 400px)); height: auto; margin-left: 100%; translate: -82% 0; }
.ebook-flash__etichetta {
  position: absolute; left: 0; top: 90%; translate: 0 -50%; width: max-content; white-space: nowrap;
  padding: 9px 30px 9px 22px; background: #3E7462; color: var(--bianco);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 12px 50%);
  font-family: var(--sans); font-size: .875rem; font-weight: 500; line-height: 1.3;
}
.ebook-flash:hover .ebook-flash__etichetta, .ebook-flash:focus-visible .ebook-flash__etichetta { background: #33604F; }
/* la parte trasparente dell'immagine a destra del libro esce dal testo: si taglia sul bordo della scheda
   (Home) o dello schermo (Coaching), così la pagina non scorre di lato */
.tracciato-home .anteprima:has(.ebook-flash) .contenitore, .corpo:has(.ebook-flash) { overflow-x: clip; }
/* Home sul computer (Germano, 14/10 08:24): il libro, più grande, accanto alla frase in evidenza; la freccia sulla
   stessa riga di «Continua a leggere», con la punta sul libro. La scheda diventa una griglia: il libro occupa le
   righe della frase e del collegamento ed è allineato in basso; l'immagine scende del 13,6% (il bordo basso del
   libro è all'86,4%) così il bordo del libro cade a metà della riga, dove sta la freccia. */
@media (min-width: 861px) {
  .tracciato-home .prosa:has(.ebook-flash--home) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); column-gap: clamp(16px, 2vw, 32px);
    grid-template-areas: "lede lede" "passaggio passaggio" "evidenza libro" "collegamento libro";
  }
  .tracciato-home .prosa:has(.ebook-flash--home) > .lede { grid-area: lede; }
  .tracciato-home .prosa:has(.ebook-flash--home) > .passaggio { grid-area: passaggio; }
  .tracciato-home .prosa:has(.ebook-flash--home) > .evidenza { grid-area: evidenza; }
  .tracciato-home .prosa:has(.ebook-flash--home) > .collegamento { grid-area: collegamento; justify-self: start; align-self: end; }
  .ebook-flash--home { grid-area: libro; align-self: end; margin: 0; --libro: 100%; }
  .ebook-flash--home img { margin-left: 0; translate: none; margin-bottom: calc(18px - 13.6%); }
  .ebook-flash--home .ebook-flash__etichetta { left: auto; right: 55%; top: auto; bottom: 0; translate: none; }
}
/* computer stretti: con il libro al 46% la freccia arriva addosso a «Continua a leggere» */
@media (min-width: 861px) and (max-width: 1199px) {
  .tracciato-home .prosa:has(.ebook-flash--home) { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
}
/* Coaching: sul computer largo accanto al testo, nello spazio libero a destra della colonna (il libro prende la
   sua altezza dal punto in cui si trova, cioè subito sotto «Da questo lavoro possono nascere benefici concreti.»);
   altrove sotto il testo */
.ebook-flash--lato { display: none; }
@media (min-width: 1200px) {
  .corpo .prosa:has(.ebook-flash--lato) { position: relative; }
  .ebook-flash--lato {
    --spazio-lato: clamp(48px, 5vw, 96px);
    display: block; position: absolute; left: calc(100% + var(--spazio-lato)); margin: 0;
    width: min(460px, calc(min(100vw - 2 * var(--gutter), var(--max)) - 100% - var(--spazio-lato)));
  }
  .ebook-flash--lato img { width: 100%; margin-left: 0; translate: none; }
  .ebook-flash--sotto { display: none; }
}

/* la mini pagina: a sinistra l'e-book, a destra titolo, testo e modulo */
body.senza-barra { padding-bottom: 0; }
.ebook { padding-block: clamp(24px, 4vw, 64px) var(--spazio); background: linear-gradient(var(--bianco) 30%, var(--velo-schede)); }
.ebook__griglia {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "immagine titolo" "immagine testo";
  grid-template-rows: auto 1fr; gap: 0 clamp(40px, 6vw, 104px); align-items: start;
}
.ebook h1 { grid-area: titolo; font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.75rem); line-height: 1.04; letter-spacing: -.02em; }
.ebook__immagine { grid-area: immagine; margin: 0; }
.ebook__immagine img { width: 100%; height: auto; mix-blend-mode: multiply; }   /* senza «height: auto» vale l'altezza scritta nell'HTML (1200) e il libro si allunga (13/10 sera) */
/* (sopra) niente «sticky»: farebbe un livello a parte e il bianco dell'immagine non si fonderebbe più col fondo */
.ebook__testo { grid-area: testo; max-width: 34rem; }
.ebook__testo > .lede { margin: .7em 0 .5em; }

.modulo {
  display: grid; gap: 18px; margin-top: clamp(28px, 3vw, 40px); padding: var(--dentro-scheda);
  border-radius: var(--raggio-scheda); background: var(--bianco); box-shadow: var(--ombra-scheda);
  font-family: var(--sans);
}
.modulo__campo { display: grid; gap: 6px; color: var(--grigio); font-size: var(--f-mini); font-weight: 500; letter-spacing: .02em; }
.modulo__campo input {
  width: 100%; min-height: 52px; padding: .7rem 1rem;
  border: 1px solid #C5CCD9; border-radius: 12px; background: var(--bianco);
  color: var(--inchiostro); font-family: var(--sans); font-size: 1.0625rem; font-weight: 400; letter-spacing: 0;   /* almeno 16 px: l'iPhone non ingrandisce */
}
.modulo__campo input:focus { border-color: var(--blu); outline: 2px solid var(--blu); outline-offset: 0; }
.modulo__casella { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--inchiostro); font-size: .9375rem; line-height: 1.45; cursor: pointer; }
.modulo__casella input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blu); cursor: pointer; }
.modulo .bottone { width: 100%; margin-top: 4px; }
.modulo .bottone:disabled { opacity: .6; cursor: progress; }
.modulo__nota, .modulo__errore { margin: 0; color: var(--grigio); font-size: .875rem; line-height: 1.5; }
.modulo__nota a { color: inherit; }
.modulo__errore { color: #9B2C2C; font-size: .9375rem; }
.modulo__esca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* solo per i programmi che compilano tutto: chi la riempie non è una persona */
.modulo[hidden] { display: none; }   /* il «display: grid» qui sopra vincerebbe su «hidden»: il ringraziamento si vedeva già prima dell'invio */
.modulo--grazie { gap: 0; font-family: var(--serif); }
.modulo--grazie .lede { margin-bottom: .5em; }
.modulo--grazie:focus { outline: none; }

@media (max-width: 860px) {
  /* sul telefono l'e-book è una volta e mezza più grande (Germano, 13/10) */
  .ebook-flash { --libro: 78vw; }
  .ebook-flash img { max-width: 460px; }

  /* sul telefono: titolo, e-book, testo, modulo */
  .ebook { padding-top: 24px; }
  .ebook__griglia { grid-template-columns: 1fr; grid-template-areas: "titolo" "immagine" "testo"; grid-template-rows: auto; }
  .ebook__immagine { justify-self: center; width: min(78%, 340px); margin-top: 8px; }
  .modulo { margin-inline: -4px; padding: 22px 20px; }
}