/* ==========================================================================
   francescabertola.com — foglio di stile unico

   Prima i design token e i componenti condivisi da tutte le pagine (nav,
   footer, bottoni, contenitori, tipografia), con la loro media query. Poi una
   sezione per pagina, e ogni sezione porta la PROPRIA media query subito sotto
   i propri stili.

   L'ordine non è estetico. Le media query non aggiungono specificità: una
   regola di pagina scritta dopo il blocco mobile dei condivisi, a pari
   specificità, vincerebbe anche sotto 840px — e il responsive di quella pagina
   semplicemente non funzionerebbe. Tenendo insieme stili e mobile di ciascuna
   pagina, aggiungerne una non può rompere il mobile di un'altra.

   I valori vengono dal pacchetto di handoff in design/README.md. I prototipi
   .dc.html usano stili inline e un attributo di hover proprio del tool di
   design: qui diventano classi e regole :hover vere.

   (Quel nome di attributo non compare qui nemmeno nei commenti: il gate lo
   cerca in questo file come marcatore di codice copiato dai prototipi.)
   ========================================================================== */

/* --- Font ----------------------------------------------------------------
   Self-hosted: nessuna richiesta al CDN di Google, quindi nessun
   trasferimento dell'IP del visitatore a un terzo, e una connessione in meno
   sul percorso critico. Un solo file variabile per stile copre tutti i pesi.
   Il range `font-weight: 400 900` è l'asse reale del font: senza, il browser
   lo tratterebbe come un peso singolo e sintetizzerebbe gli altri.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-italic-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* --- Design token -------------------------------------------------------- */

:root {
  --bg: #fbf7f3;
  --text: #29211c;
  --text-2: #55493f;
  --text-3: #6f6259;

  --accent: #0088b0;
  --accent-hover: #006e8f;

  /* I bottoni non usano l'accento primario: bianco su #0088b0 dà 4,07:1, sotto
     il minimo WCAG AA di 4,5:1 per testo sotto i 18,66px in grassetto — e le
     etichette dei bottoni sono 15px e 17px. Questi due valori sono già nella
     palette del design (sono l'hover dei bottoni e dei link) e danno 5,8:1
     e 8,1:1. Il ciano chiaro resta dov'è decorativo: puntini dei kicker,
     numeri del percorso, anello di focus. */
  --btn: #006e8f;
  --btn-hover: #00506b;
  --link: #006e8f;
  --link-hover: #00506b;
  --magenta: #d6006c;

  --tint: #eaf2f5;
  --dark: #29211c;
  --on-dark: #fbf7f3;
  --on-dark-2: #cbbfb5;
  --on-dark-3: #9a8c80;
  --accent-on-dark: #33a3c4;

  --select: #cde8f0;
  --article-text: #40362d;

  --container: 1200px;
  --pad: 40px;
  --reading: 760px;
  --r-pill: 999px;
  --r-card: 24px;

  --font: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
}

/* --- Reset --------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Il footer resta in fondo anche sulle pagine corte. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection {
  background: var(--select);
}

img {
  max-width: 100%;
  height: auto;
}

/* Un solo anello di focus per tutto il sito. `:focus-visible` e non `:focus`:
   chi naviga col mouse non se lo porta dietro dopo ogni clic. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Tipografia ---------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: 76px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;

  /* `pretty` e non `balance`: su un titolo di due righe piene `balance` tende a
     spezzarlo in modo innaturale. H2 e H3, più corti, restano bilanciati. */
  text-wrap: pretty;
}

/* Nei titoli il corsivo è l'accento del design, non un'enfasi tipografica: più
   leggero del titolo che lo contiene, e magenta. */
h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--magenta);
}

/* Le pagine interne usano un H1 più contenuto della home. */
.h1--interna {
  font-size: 68px;

  /* I titoli lunghi delle pagine interne vanno a capo invece di stendersi su
     una riga sola, sproporzionata rispetto al resto della colonna. Sui titoli
     brevi, come quello di Life Coaching, non ha effetto. */
  max-width: 12em;
}

h2 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* L'H2 delle fasce di chiusura, che nel design è grande quanto un titolo di
   pagina. Ha la sua voce nella media query qui sotto: senza, questa classe
   batterebbe `h2 { font-size: 31px }` e resterebbe a 60px sul telefono. */
.h2--grande {
  font-size: 60px;
  letter-spacing: -0.035em;
  line-height: 1.03;
  max-width: 14em;
}

h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

/* Il kicker: etichetta di sezione maiuscola, preceduta da un puntino magenta.
   Il puntino è l'unico uso frequente dell'accento secondario. */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--magenta);
  flex: none;
}

/* Nelle sezioni interne il puntino passa all'accento primario. L'alternanza
   magenta/ciano torna in tutte le pagine. */
.kicker--ciano::before {
  background: var(--accent);
}

/* --- Utilità ------------------------------------------------------------- */

.container {
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Visibile solo agli screen reader, ma raggiungibile: niente display:none. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Primo elemento focalizzabile di ogni pagina: invisibile finché non riceve
   il focus da tastiera, e allora scende in alto a sinistra. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-card) 0;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* --- Bottoni ------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--btn);
  color: #fff;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--r-pill);
}

.btn:hover {
  background: var(--btn-hover);
  color: #fff;
}

.btn--grande {
  font-size: 17px;
  padding: 16px 32px;
}

/* Sul fondo scuro il bottone si schiarisce invece di scurirsi, altrimenti
   sparisce contro la fascia. Nessun ciano abbastanza chiaro da staccarsi da
   #29211c regge però il testo bianco, quindi qui l'etichetta è scura: 5,4:1
   da fermo, 13,6:1 in hover, contro i 2,9:1 del ciano chiaro con testo bianco. */
.btn--on-dark {
  background: var(--accent-on-dark);
  color: var(--dark);
}

.btn--on-dark:hover {
  background: var(--on-dark);
  color: var(--dark);
}

/* --- Navigazione ---------------------------------------------------------
   Menu a scomparsa sotto 840px senza una riga di JavaScript: <details> porta
   già apertura, chiusura, stato e navigazione da tastiera.
   ------------------------------------------------------------------------- */

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding: 28px var(--pad);
}

.brand {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.brand:hover {
  color: var(--accent-hover);
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  font-weight: 500;
}

/* `:not(.btn)` su tutte e tre le regole: il bottone dentro la nav è un bottone,
   non una voce di menu. Senza l'esclusione queste regole lo battono per
   specificità e in hover gli darebbero testo ciano sul fondo ciano — cioè un
   CTA invisibile, sulla voce più importante di ogni pagina. */
.navlinks a:not(.btn) {
  color: var(--text);
}

.navlinks a:not(.btn):hover {
  color: var(--accent-hover);
}

/* La pagina corrente si segnala da sé, senza una classe da ricordare. */
.navlinks a:not(.btn)[aria-current="page"] {
  color: var(--accent-hover);
  font-weight: 700;
}

/* L'hamburger: tre linee disegnate in CSS, nessuna immagine e nessuna icon font. */
.navtoggle {
  display: none;
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  list-style: none;
}

.navtoggle::-webkit-details-marker {
  display: none;
}

.navtoggle::before,
.navtoggle::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--text);
  transition: transform 0.15s ease;
}

.navtoggle::before {
  top: 15px;
  box-shadow: 0 7px 0 var(--text);
}

.navtoggle::after {
  top: 29px;
}

/* Aperto: le due linee esterne diventano una croce e quella centrale sparisce. */
.navmenu[open] .navtoggle::before {
  top: 21px;
  transform: rotate(45deg);
  box-shadow: none;
}

.navmenu[open] .navtoggle::after {
  top: 21px;
  transform: rotate(-45deg);
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  max-width: var(--container);
  width: 100%;
  margin: auto auto 0;
  padding: 34px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--text-3);
}

.footerlinks {
  display: flex;
  gap: 24px;
}

.footerlinks a {
  color: var(--text-3);
}

.footerlinks a:hover {
  color: var(--accent-hover);
}

/* Senza questa riga la voce della pagina corrente sarebbe identica alle altre
   per chi guarda, mentre uno screen reader la annuncia: uno stato dichiarato e
   invisibile è un'incoerenza. Nel footer basta il peso, senza il colore che
   usa la nav: qui le voci sono piccole e il grigio è di proposito. */
.footerlinks a[aria-current="page"] {
  font-weight: 700;
}

/* Paragrafo di apertura, più grande del corpo e in grigio caldo. */
.lead {
  margin-top: 24px;
  font-size: 21px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 30em;
}

/* L'hero regge una riga in più prima di andare a capo. `.lead` resta com'è:
   allargarla cambierebbe l'impaginato di ogni pagina che la usa. */
.lead--hero {
  max-width: 31em;
}

/* Riga di bottoni, che sul mobile va a capo invece di sfondare. */
.azioni {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Sezioni ------------------------------------------------------------- */

.section {
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding: 90px var(--pad);
}

.section--tint {
  background: var(--tint);
  max-width: none;
}

.section--dark {
  background: var(--dark);
  color: var(--on-dark);
  max-width: none;
}

/* Le esclusioni: senza, questa regola batte per specificità sia `.btn` (testo
   dei bottoni, che deve restare bianco) sia `.link--on-dark` (il link di testo
   del design, bianco e sottolineato, che uscirebbe ciano). */
.section--dark a:not(.btn, .link--on-dark) {
  color: var(--accent-on-dark);
}

/* L'hover serve dichiararlo qui: la regola qui sopra batte `a:hover` per specificità,
   quindi senza questa riga i link di testo su fondo scuro non reagirebbero affatto al
   passaggio del mouse. Sul fondo scuro si schiarisce, non si scurisce. */
.section--dark a:not(.btn, .link--on-dark):hover {
  color: #7fc8dd;
}

/* Il link di testo su fondo scuro: bianco e sottolineato, perché su quel fondo
   il ciano dei link ordinari perde contrasto. */
.link--on-dark {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.link--on-dark:hover {
  color: #7fc8dd;
}

/* Le fasce a tutta larghezza incolonnano il contenuto col resto delegando ogni
   rientro al .container interno, che tiene il proprio padding. Mettendolo anche
   sulla fascia, sopra i 1200px il contenuto delle fasce partirebbe 40px più a
   sinistra di quello delle sezioni normali: a 1440px x=120 contro x=160. */
.section--tint,
.section--dark {
  padding-inline: 0;
}

/* --- Le pagine interne ---------------------------------------------------
   Header, griglia delle aree e banda di invito: la struttura che Life Coaching
   e Business Coaching hanno in comune. È nata sotto `.pagina-life-coaching`
   nella PR #4 e sale qui ora che i due usi esistono davvero, come quella PR
   aveva dichiarato.

   `.aree` sta DOPO `.section`, che dichiara il padding con la shorthand: più
   in alto, il padding superiore delle aree tornerebbe a 90px.
   ------------------------------------------------------------------------- */

/* Il prototipo apre a 90px e chiude a 80px: la sezione sotto non ricomincia da
   capo con la propria spaziatura, e i due valori insieme fanno il ritmo. */
.hero-interna {
  padding-block: 90px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Nell'header la spaziatura la porta il `gap` del contenitore: i margini che
   i paragrafi hanno di loro la sommerebbero al valore sbagliato. */
.hero-interna .lead {
  margin: 0;
}

/* `.azioni` nasce con 40px di stacco, che qui sommati al gap sarebbero troppi.
   `gap` e `align-items` servono dove le azioni sono due — un bottone e un link
   di testo, come su Business Coaching: senza, il link si stira all'altezza del
   bottone e il suo testo resta in alto. Dove l'azione è una sola non si vedono. */
.hero-interna .azioni {
  margin-top: 6px;
  gap: 22px;
  align-items: center;
}

/* Kicker e titolo di una sezione, più stretti fra loro del resto. */
.intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Niente padding sopra: lo stacco dall'header è già quello dell'header. */
.aree {
  padding-block: 20px 120px;
}

.griglia-aree {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 72px;
}

.area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* L'etichetta breve sopra un titolo: la categoria di una scheda in home, il
   numero di un'area in Life Coaching, il tipo di intervento in Business. Il
   ciano scuro è quello dei link: a 14px il ciano chiaro non avrebbe contrasto
   sufficiente. */
.occhiello {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--link);
}

/* Un punto più piccolo, dove l'etichetta sta sopra un testo corrente invece
   che sopra un titolo: i moduli dei workshop, i recapiti. Va dichiarato DOPO
   `.occhiello`, che ha la stessa specificità: scritto prima non farebbe nulla. */
.occhiello--piccolo {
  font-size: 13px;
}

.area h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.area-testo {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
}

/* Il link in fondo a una scheda: "Scopri i percorsi", "Vedi i moduli". */
.link-scheda {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
}

/* Il link di testo accanto a un bottone, dove l'azione secondaria non deve
   pesare quanto la principale. */
.link-azione {
  font-size: 16px;
  font-weight: 600;
}

.invito {
  padding-block: 90px;
}

.invito h2 {
  margin: 0;
  max-width: 16em;
  line-height: 1.05;
}

.invito-testo {
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 32em;
}

.invito .azioni {
  margin-top: 28px;
}

/* --- Sotto 840px: i componenti condivisi ---------------------------------
   L'unico breakpoint del design. Qui sta il mobile dei SOLI componenti
   condivisi; quello di una pagina sta nella sezione di quella pagina.
   ------------------------------------------------------------------------- */

@media (max-width: 840px) {
  /* Una custom property non cambia da sola al variare della viewport. */
  :root {
    --pad: 24px;
  }

  h1,
  .h1--interna {
    font-size: 42px;
    letter-spacing: -0.025em;
  }

  h2 {
    font-size: 31px;
  }

  /* Elencata qui perché `.h2--grande` batte `h2` per specificità: senza questa
     riga la fascia scura resterebbe a 60px su uno schermo da 360px. */
  .h2--grande {
    font-size: 31px;
  }

  .section {
    padding-block: 64px;
  }

  .topnav {
    padding-block: 20px;
  }

  .navtoggle {
    display: block;
  }

  /* Aperto, il menu scende sotto la barra e impila le voci. */
  .navmenu {
    position: relative;
  }

  .navmenu[open] .navlinks {
    /* `display: flex` va ripetuto qui: la regola base `.navlinks` ha specificità (0,1,0)
       e su alcuni motori perde contro lo stile del browser per il contenuto di un
       <details> aperto, che tornerebbe a `display: block` impilando i link come testo. */
    display: flex;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    min-width: 220px;
    padding: 22px 24px;
    background: var(--bg);
    border-radius: var(--r-card);
    box-shadow: 0 10px 40px rgb(41 33 28 / 12%);
  }

  .footer {
    justify-content: flex-start;
  }

  /* Con le due voci legali il footer passa da quattro link a sei: circa 385px
     di riga contro i 312px disponibili a 360px di viewport, e senza `wrap` la
     pagina scorre in orizzontale. Sta qui e non sulla regola base perché senza
     `wrap` la larghezza minima di `.footerlinks` è la somma delle sue voci,
     mentre con `wrap` diventa la voce più larga: sul desktop stretto le sei
     voci si impilerebbero in una colonnina accanto al copyright invece di far
     andare a capo il footer intero. Il `gap` di riga scende a 12px: 24px fra
     due righe di testo da 13,5px sono uno stacco da paragrafi. */
  .footerlinks {
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  /* --- Le pagine interne --- */

  .hero-interna {
    padding-block: 64px 56px;
  }

  .aree {
    padding-block: 0 72px;
  }

  .invito {
    padding-block: 64px;
  }

  /* Senza questa riga il telefono resterebbe a due colonne. */
  .griglia-aree {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  /* `.area h2` (0,1,1) batte `h2 { font-size: 31px }` (0,0,1) qui sopra:
     senza questo reset i titoli delle aree resterebbero a 30px sul telefono. */
  .area h2 {
    font-size: 26px;
  }
}

/* --- Sopra 840px: il menu è sempre aperto --------------------------------
   `<details>` chiuso nasconde il proprio contenuto, e sul desktop il menu
   deve essere visibile. Servono DUE regole, non una:

   - `display: flex` sui figli copre Firefox, Safari e Chrome fino alla 130;
   - da Chrome 131 il contenuto vive nello pseudo-elemento ::details-content,
     che porta `content-visibility: hidden`: il display sui figli non lo
     annulla, e senza la seconda regola il menu sarebbe invisibile su Chrome
     ed Edge.

   I browser che non conoscono ::details-content ignorano il secondo blocco.
   ------------------------------------------------------------------------- */

@media (min-width: 841px) {
  .navmenu > .navlinks {
    display: flex;
  }

  .navmenu::details-content {
    content-visibility: visible;
    block-size: auto;
    display: contents;
  }
}

/* ==========================================================================
   Home — public/index.html

   Ogni selettore è sotto `.pagina-home`, la classe che la Home mette sul body.
   Senza, nomi come .hero, .intro o .contatti sarebbero globali: la prima pagina
   successiva che ne riusasse uno ridisegnerebbe anche la Home. Un componente
   che si dimostra davvero condiviso si promuove in cima al file, di proposito.

   Segue la media query di pagina, subito sotto: vedi l'intestazione del file.
   ========================================================================== */

/* --- Apertura ------------------------------------------------------------ */

.pagina-home .hero {
  padding-block: 96px 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.pagina-home .hero h1 {
  max-width: 13em;
}

/* Nell'hero la spaziatura la porta il `gap` del contenitore: i margini che
   `.lead` e `.azioni` si portano dietro dalle pagine interne si sommerebbero. */
.pagina-home .hero .lead {
  margin-top: 0;
}

.pagina-home .hero .azioni {
  margin-top: 8px;
  align-items: center;
  gap: 22px;
}

/* --- Come lavoro --------------------------------------------------------- */

/* Niente padding sopra: la spaziatura sotto l'hero è già la sua. */
.pagina-home .servizi {
  padding-block: 0 120px;
  display: flex;
  flex-direction: column;
  gap: 52px;
}

.pagina-home .griglia-servizi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.pagina-home .servizio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.pagina-home .servizio h3 {
  font-size: 27px;
}

.pagina-home .servizio-testo {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-2);
}

/* --- Il percorso --------------------------------------------------------- */

.pagina-home .percorso {
  padding-block: 110px;
}

.pagina-home .percorso > .container {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.pagina-home .h2--percorso {
  max-width: 16em;
}

/* La sequenza la porta <ol>; i pallini no, il numero è già disegnato grande.
   `list-style: none` costa però la semantica di lista su Safari/VoiceOver, ed è
   il motivo del `role="list"` esplicito nel markup. */
.pagina-home .passi {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.pagina-home .passo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pagina-home .passo-numero {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}

.pagina-home .passo h3 {
  font-size: 21px;
  letter-spacing: -0.01em;
}

.pagina-home .passo-testo {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-2);
}

/* --- Cominciamo da una chiamata ------------------------------------------ */

.pagina-home .contatti {
  padding-block: 110px;
}

.pagina-home .contatti > .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

/* L'indirizzo email: il modificatore condiviso porta colore e sottolineatura,
   il corpo del design (16px/600) è proprio di questa fascia — senza, l'email
   ereditherebbe i 16,5px/400 del body e verrebbe più leggera del disegno. */
.pagina-home .contatti .link--on-dark {
  font-size: 16px;
  font-weight: 600;
}

/* Non `.lead`: qui il corpo è 20px e il colore è quello da fondo scuro. */
.pagina-home .contatti-testo {
  font-size: 20px;
  line-height: 1.55;
  color: var(--on-dark-2);
  max-width: 30em;
}

.pagina-home .contatti .azioni {
  margin-top: 10px;
  align-items: center;
  gap: 24px;
}

.pagina-home .contatti-nota {
  margin-top: 6px;
  font-size: 14px;
  color: var(--on-dark-3);
}

/* --- Home, sotto 840px ---------------------------------------------------
   Le regole qui sopra sono scritte DOPO la media query dei componenti
   condivisi, quindi a pari specificità la battono a ogni larghezza: le
   spaziature verticali delle sezioni vanno ridichiarate qui, non ereditate.
   ------------------------------------------------------------------------- */

@media (max-width: 840px) {
  .pagina-home .hero {
    padding-block: 64px 72px;
  }

  .pagina-home .servizi {
    padding-block: 0 72px;
  }

  .pagina-home .percorso,
  .pagina-home .contatti {
    padding-block: 64px;
  }

  /* Senza queste due righe il telefono resterebbe a tre e quattro colonne. */
  .pagina-home .griglia-servizi,
  .pagina-home .passi {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

/* ==========================================================================
   Workshop — public/workshop/index.html

   L'unica pagina interna che non usa la griglia delle aree: i moduli hanno una
   loro anatomia (obiettivo, argomenti, dettagli) e stanno su griglie da tre e
   da due colonne. Se un giorno una seconda pagina mostrerà gli stessi moduli,
   questi selettori saliranno fra i condivisi; oggi hanno un uso solo.

   Segue la media query di pagina, subito sotto: vedi l'intestazione del file.
   ========================================================================== */

/* `.section` porta solo il padding: il ritmo interno fra intestazione e
   griglia lo mette la sezione. Il padding sopra è quasi nullo perché lo
   stacco dall'header è già quello dell'header. */
.pagina-workshop .moduli {
  padding-block: 20px 110px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* La fascia tinta apre e chiude alla stessa distanza: qui sopra non c'è un
   header a fare da stacco, ma la sezione precedente. */
.pagina-workshop .moduli--avanzati {
  padding-block: 100px;
}

/* Dentro la fascia tinta l'unico figlio della sezione è il .container che le
   ridà il rientro: il `gap` della sezione spazierebbe quello, non i due
   blocchi che stanno dentro. Il ritmo va rimesso sul contenitore. */
.pagina-workshop .moduli > .container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.pagina-workshop .intro-nota {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 34em;
}

.pagina-workshop .griglia-moduli {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

/* I moduli avanzati sono due e più densi: due colonne, più aria in mezzo. */
.pagina-workshop .griglia-moduli--due {
  grid-template-columns: repeat(2, 1fr);
  gap: 72px;
}

.pagina-workshop .modulo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pagina-workshop .modulo h3 {
  font-size: 26px;
}

.pagina-workshop .modulo-blocco {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pagina-workshop .modulo-testo {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
}

.pagina-workshop .modulo-argomenti {
  margin: 0;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
}

.pagina-workshop .modulo-dettagli {
  margin: 0;
  font-size: 14px;
  color: var(--text-3);
}

/* --- Workshop, sotto 840px -----------------------------------------------
   Le regole qui sopra sono scritte DOPO la media query dei componenti
   condivisi, quindi a pari specificità la battono a ogni larghezza: le
   spaziature e il numero di colonne vanno ridichiarati qui.
   ------------------------------------------------------------------------- */

@media (max-width: 840px) {
  .pagina-workshop .moduli {
    padding-block: 0 72px;
  }

  .pagina-workshop .moduli--avanzati {
    padding-block: 64px;
  }

  /* Senza queste righe il telefono resterebbe a tre e a due colonne. */
  .pagina-workshop .griglia-moduli,
  .pagina-workshop .griglia-moduli--due {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

/* ==========================================================================
   Contatti — public/contatti/index.html

   L'unica pagina senza banda di invito finale: è già lei la destinazione, e
   non ha senso rimandare altrove.

   Segue la media query di pagina, subito sotto: vedi l'intestazione del file.
   ========================================================================== */

/* Niente padding sopra: lo stacco dall'header è già quello dell'header. */
.pagina-contatti .recapiti {
  padding-block: 10px 110px;
}

.pagina-contatti .griglia-contatti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;

  /* Le due colonne hanno altezze molto diverse: senza, la scheda si
     stirerebbe fino in fondo alla colonna dei recapiti. */
  align-items: start;
}

.pagina-contatti .recapiti-lista {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.pagina-contatti .recapito {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* I recapiti sono titoli che si possono cliccare: portano il colore del testo,
   e passano al ciano solo sotto il mouse. */
.pagina-contatti .recapito-valore {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.pagina-contatti .recapito-valore:hover {
  color: var(--link);
}

.pagina-contatti .social {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 16px;
  font-weight: 600;
}

/* `.azioni` nasce con 40px di stacco: qui il ritmo lo porta già il gap della
   colonna, e il prototipo chiede appena un respiro in più. */
.pagina-contatti .recapiti-lista .azioni {
  margin-top: 6px;
}

/* Il rimando all'informativa, sotto i recapiti: piccolo e nel grigio delle
   note, perché è un'indicazione di servizio e non deve competere con i
   recapiti, che sono il motivo per cui si arriva qui. */
.pagina-contatti .nota-privacy {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-3);
}

.pagina-contatti .scheda-luogo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px;
  border-radius: var(--r-card);
  background: var(--tint);
}

/* L'h2 condiviso è 44px/800: dentro una scheda sarebbe fuori scala. */
.pagina-contatti .scheda-luogo h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pagina-contatti .scheda-luogo p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-2);
}

/* --- Contatti, sotto 840px -----------------------------------------------
   Le regole qui sopra sono scritte DOPO la media query dei componenti
   condivisi, quindi a pari specificità la battono a ogni larghezza.
   ------------------------------------------------------------------------- */

@media (max-width: 840px) {
  .pagina-contatti .recapiti {
    padding-block: 0 72px;
  }

  .pagina-contatti .griglia-contatti {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  /* `studio@francescabertola.com` a 26px misura circa 350px: su uno schermo da
     320 ne restano 272, e la pagina scrollerebbe in orizzontale. Il corpo
     scende, e `anywhere` permette al browser di spezzare l'indirizzo anche
     dove non c'è un punto di divisione naturale. */
  .pagina-contatti .recapito-valore {
    font-size: 20px;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   Chi sono
   ========================================================================== */

/* --- L'apertura ----------------------------------------------------------
   Riusa `.hero-interna container` come le altre pagine interne e ne cambia
   soltanto `display` e `gap`: il `gap: 24px` che l'header dava ai propri figli
   scende su `.bio`, che è la colonna dove quei figli adesso stanno.
   `.hero-interna .lead { margin: 0 }` continua ad applicarsi, perché `.lead`
   resta un discendente di `.hero-interna`.
   ------------------------------------------------------------------------- */

.pagina-chi-sono .hero-chi-sono {
  padding-block: 90px 100px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 80px;
  align-items: start;
}

.pagina-chi-sono .bio {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Il corpo della biografia: più grande del testo corrente del sito, come nel
   prototipo, dove questa è l'unica pagina fatta di prosa lunga. */
.pagina-chi-sono .bio-testo {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-2);
}

/* Sei pixel sotto le altre pagine interne: qui il titolo vive in una colonna
   più stretta, perché la seconda la occupa il ritratto. */
.pagina-chi-sono .h1--interna {
  font-size: 62px;
}

.pagina-chi-sono .ritratto {
  /* Il reset globale dà alle immagini solo un `max-width`: senza questa riga
     il ritratto starebbe alla sua larghezza intrinseca dentro una colonna più
     stretta, e la griglia resterebbe sbilanciata. */
  width: 100%;
  margin-top: 46px;
  /* Lo scatto è su fondo bianco da studio, e il bianco non è il crema della
     pagina. Invece di scontornare la foto, il bianco sparisce qui: con
     `multiply` il bianco puro diventa il colore di ciò che sta sotto, i toni
     scuri restano scuri, e i capelli si fondono senza aloni.
     Due vincoli, che non si vedono dalla regola: funziona solo su un fondo
     chiaro (su un fondo scuro il ritratto diventerebbe una sagoma nera), e
     solo se nessun antenato crea uno stacking context isolato — `isolation`,
     `opacity`, `transform` o `filter` su `.hero-chi-sono` o su `main`
     riporterebbero il riquadro bianco. */
  mix-blend-mode: multiply;
  /* Il ritaglio finisce alla vita: senza la maschera la camicia terminerebbe
     con una riga netta sul crema. La dissolvenza parte al 91% perché le
     braccia incrociate arrivano a circa l'89% dell'altezza. Il prefisso serve
     a Safari sotto la 15.4 e a Chrome/Edge sotto la 120, che conoscono solo
     la forma prefissata; dove non c'è nessuna delle due resta la riga netta. */
  -webkit-mask-image: linear-gradient(to bottom, #000 91%, transparent);
  mask-image: linear-gradient(to bottom, #000 91%, transparent);
}

/* --- Il mio approccio ---------------------------------------------------- */

.pagina-chi-sono .approccio {
  padding-block: 100px;
}

/* Dentro la fascia tinta l'unico figlio della sezione è il `.container` che le
   ridà il rientro: un `gap` sulla sezione spazierebbe quello, non i due blocchi
   che stanno dentro. Il ritmo va rimesso sul contenitore, come su Workshop. */
.pagina-chi-sono .approccio > .container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.pagina-chi-sono .griglia-approccio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

/* Il reset globale azzera i margini di `h3` e `p`: senza un contenitore che
   porti il proprio `gap`, titolo e testo di ogni colonna resterebbero
   attaccati. È lo stesso ruolo di `.area` e `.servizio`. */
.pagina-chi-sono .approccio-voce {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pagina-chi-sono .approccio-testo {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-2);
}

/* --- Chi sono, sotto 840px -----------------------------------------------
   Le quattro righe di reset non sono ridondanti: le regole qui sopra hanno
   specificità (0,2,0) e battono la media query dei componenti condivisi, che è
   (0,1,0). Senza, sul telefono resterebbero i padding da 90 e 100px e un titolo
   da 62px su uno schermo da 360.
   ------------------------------------------------------------------------- */

@media (max-width: 840px) {
  .pagina-chi-sono .hero-chi-sono {
    padding-block: 64px;
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .pagina-chi-sono .h1--interna {
    font-size: 42px;
  }

  /* Impilato, il ritratto non ha più una colonna di testo accanto a cui
     allinearsi: i 46px lo staccherebbero e basta. Lo stacco lo dà il `gap`. */
  .pagina-chi-sono .ritratto {
    margin-top: 0;
  }

  .pagina-chi-sono .approccio {
    padding-block: 64px;
  }

  .pagina-chi-sono .griglia-approccio {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Blog — public/blog/index.html

   L'indice degli articoli. Finché non ce n'è nessuno la sezione della lista
   ospita una riga sola: gli stili delle voci (pallino della categoria, data,
   titolo, estratto) arrivano con il primo articolo vero, che è il solo modo
   di verificarli a video.

   Segue la media query di pagina, subito sotto: vedi l'intestazione del file.
   ========================================================================== */

/* Il prototipo apre a 10px dall'header e chiude a 130px. Lo stacco effettivo
   dall'header è 90px e non gli 86px del prototipo, perché `.hero-interna`
   chiude a 80px dove il prototipo del blog chiude a 76: si riusa il componente
   condiviso invece di scostarlo per 4px. */
.pagina-blog .articoli {
  padding-block: 10px 130px;
}

/* Corpo e colore dell'estratto del prototipo. La larghezza è la colonna
   dell'articolo del prototipo — `max-width: 44em` su un wrapper a 16px, cioè
   704px (design/Blog.dc.html:56) — riportata qui in px equivalenti: `em` si
   risolve sul font-size dell'elemento, e 44em a 17,5px farebbe 770px, una
   misura diversa da quella che avrà la lista. Quando le voci arriveranno
   devono atterrare sullo stesso numero: `44em` su un elemento a 16px, oppure
   704px scritti. */
.pagina-blog .nessun-articolo {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 704px;
}

/* --- Blog, sotto 840px ---------------------------------------------------
   Solo la sezione della lista: il paragrafo non ha niente da cambiare.
   ------------------------------------------------------------------------- */

@media (max-width: 840px) {
  .pagina-blog .articoli {
    padding-block: 0 72px;
  }
}

/* ==========================================================================
   Le pagine legali — privacy policy e cookie policy
   ==========================================================================

   Una classe sola per due pagine, non `.pagina-privacy` e `.pagina-cookie`:
   qui gli stili sono di un TIPO di pagina, non di una pagina, e duplicarli
   significherebbe soltanto darsi due posti in cui cambiarli. È l'unica deroga
   alla convenzione `.pagina-<slug>` del resto del foglio.

   Il design non ha un prototipo per queste due pagine. Le misure vengono da
   `design/Blog Articolo.dc.html`, che è l'unica colonna di lettura del
   pacchetto di handoff, e stanno nei token che il foglio ha già: `--reading`
   (760px) e `--article-text` sono nati per questo e fino a oggi non li usava
   nessuna regola. Quando arriverà l'articolo vero (card #19) troverà i valori
   dove sono adesso, senza niente da riconciliare.
   ------------------------------------------------------------------------- */

/* `max-width` e `padding-inline` sullo STESSO elemento: con `box-sizing:
   border-box` i 760px comprendono il padding, come nel prototipo. Annidare
   questa colonna dentro un `.section`, che porta già `padding-inline`, lo
   raddoppierebbe. */
.pagina-legale .testo {
  max-width: var(--reading);
  margin-inline: auto;
  padding-inline: var(--pad);
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--article-text);
}

/* Del prototipo si prendono tutti e tre i valori, non il solo corpo: l'`h2`
   condiviso è 800 e -0.03em, e ereditarli darebbe a queste pagine una colonna
   che non somiglia a quella dell'articolo — cioè il disallineamento che la
   card #19 dovrebbe poi rimettere insieme. */
.pagina-legale .testo h2 {
  margin-top: 26px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

/* La riga di data sotto il titolo: più piccola e più chiara del corpo, perché
   è una nota di servizio e non testo da leggere. */
.pagina-legale .aggiornamento {
  font-size: 15.5px;
  color: var(--text-3);
}

/* Le liste non esistono altrove nel sito: nessuna delle pagine scritte finora
   ne ha una, e queste ne hanno parecchie.

   Lo stacco fra le voci lo porta un margine e NON `display: flex` con un `gap`,
   che sarebbe la forma usata nel resto del foglio: un contenitore flex
   trasforma i propri figli in blocchi, `display: list-item` diventa `block`, e
   i `li` perdono il marcatore. Su queste due pagine, che sono quasi solo
   elenchi, il risultato sarebbe una fila di paragrafi rientrati — e la regola
   su `::marker` qui sotto non avrebbe niente su cui applicarsi. */
.pagina-legale .testo ul,
.pagina-legale .testo ol {
  margin: 0;
  padding-left: 24px;
}

.pagina-legale .testo li + li {
  margin-top: 10px;
}

.pagina-legale .testo li::marker {
  color: var(--text-3);
}

/* Dentro la prosa i link vanno sottolineati. Altrove nel sito stanno in blocchi
   dove si capisce da soli che sono link — bottoni, elenchi di recapiti, voci di
   menu — ma in mezzo a un paragrafo l'unica differenza sarebbe il colore, che
   contro il testo legale sta a 2:1: chi non distingue quel salto di tinta non
   vede il link. `text-underline-offset` tiene la riga staccata dalle discendenti
   di un corpo a 18,5px. */
.pagina-legale .testo a,
.pagina-contatti .nota-privacy a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Le pagine legali, sotto 840px ---------------------------------------
   `--reading` e `--pad` si adattano da soli (il secondo scende a 24px fra i
   condivisi). Resta l'H2, e non per un problema di cascata: `.pagina-legale
   .testo h2` è più specifica dell'`h2` mobile condiviso e vincerebbe comunque,
   quindi senza questa regola il titolo resterebbe ai 30px del desktop. Sta qui
   perché sul telefono 30px sono troppi, non perché qualcuno glieli sovrascriva.
   I 26px non vengono dal prototipo — la sua media query tocca solo il padding —
   ma da `.area h2`, che è il titolo di pari livello del resto del sito.
   ------------------------------------------------------------------------- */

@media (max-width: 840px) {
  .pagina-legale .testo {
    padding-bottom: 72px;
    font-size: 17.5px;
  }

  .pagina-legale .testo h2 {
    font-size: 26px;
  }
}