/*
Theme Name: Privacy Doodles
Theme URI: https://privacydoodles.com
Author: Massimo Bacci
Description: Tema a blocchi di Privacy Doodles. Token in theme.json, sezioni come pattern. Nessun costruttore visuale, nessun framework CSS, nessuna richiesta a domini esterni.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: privacy-doodles
Tags: block-theme, full-site-editing
*/

/* I token stanno in theme.json. Qui solo ciò che i blocchi non sanno fare da soli. */

:root{
  --pd-filetto:#dfeeed;
  --pd-filetto-forte:#c3e0de;
  --pd-misura:62ch;
}

body{ -webkit-font-smoothing:antialiased; }

/* Misura di riga.
   NON si imposta con max-width sui paragrafi: dentro un contenitore
   "constrained" WordPress centra i figli più stretti, e il testo esce
   rientrato rispetto ai titoli. La misura la governa contentSize in
   theme.json (680px ≈ 68 caratteri a 17px). Qui restano solo gli elementi
   che devono poter sfondare quel limite. */
.pd-misura .wp-block-table,
.pd-misura .wp-block-image.alignwide{ max-width:none; }

/* Occhiello */
.pd-occhiello{
  font-family:var(--wp--preset--font-family--display);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro); margin:0 0 20px;
}

/* Collegamento discreto, la call to action di transizione */
.pd-link-quieto a, a.pd-link-quieto{
  font-weight:700; color:var(--wp--preset--color--teal-scuro); text-decoration:none;
  border-bottom:1px solid var(--pd-filetto-forte); padding-bottom:2px;
}
.pd-link-quieto a:hover, a.pd-link-quieto:hover{ border-bottom-color:var(--wp--preset--color--teal-scuro); }

/* Logo nella barra. L'immagine è servita al doppio della dimensione
   di resa, così resta nitida sugli schermi ad alta densità. */
.wp-block-site-logo img{ height:auto; }
.wp-block-site-logo a{ display:block; line-height:0; }

/* Filetti */
.pd-bordo-sotto{ border-bottom:1px solid var(--pd-filetto); }
.pd-bordo-sopra{ border-top:1px solid var(--pd-filetto); }

/* ============================================================
   TESTATA APPICCICATA
   ============================================================
   Lo sticky sta sul template-part esterno, non sul gruppo interno:
   è figlio diretto di .wp-site-blocks, quindi nessun antenato con
   overflow può disattivarlo. Il fondo deve essere pieno, perché
   sotto ci scorre il contenuto della pagina.
   z-index 100: sopra tutte le sezioni, ben sotto il modale del menu
   mobile (il core di WordPress lo mette a 100000). */
.wp-site-blocks > header.wp-block-template-part{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--wp--preset--color--bianco);
  /* Il filetto lo mette già .pd-bordo-sotto. Qui solo un'ombra molto
     bassa, che si nota quando il contenuto scorre sotto la barra e
     resta invisibile sopra il gradiente dell'hero. */
  box-shadow:0 6px 18px -14px rgba(37,68,79,.45);
}

/* Sui telefoni la barra deve stare su UNA riga sola: appiccicata,
   ogni pixel di testata è spazio di lettura tolto per sempre.
   Senza questi ritocchi logo + menu + pulsante vanno a capo e la
   testata occupa 154px, cioè il 19% di uno schermo da 812px.
   Gli !important servono perché il padding del gruppo arriva come
   stile in linea dal blocco: nessuna regola di foglio lo batte. */
@media (max-width:781px){
  .wp-site-blocks > header.wp-block-template-part > .wp-block-group{
    padding-top:10px !important; padding-bottom:10px !important;
  }
  header .wp-block-site-logo img{ width:130px; }
  header .wp-block-group.is-content-justification-space-between{
    flex-wrap:nowrap !important; gap:14px !important;
  }
  header .wp-block-group.is-content-justification-right{
    flex-wrap:nowrap !important; gap:12px !important;
  }
  header .wp-block-button__link{
    font-size:13px !important; padding:11px 14px !important;
    min-height:40px; display:flex; align-items:center; white-space:nowrap;
  }
  /* Area toccabile dell'hamburger: l'icona è 24px, la mano no. */
  header .wp-block-navigation__responsive-container-open{
    min-width:40px; min-height:40px; justify-content:center;
  }
}

/* ============================================================
   VOCI DEL MENÙ IN MAIUSCOLO
   Il maiuscolo senza spaziatura si legge peggio del minuscolo: le
   lettere hanno tutte la stessa altezza e la parola perde profilo.
   Con .07em di tracciatura torna leggibile, ed è la stessa lingua
   degli occhielli e delle intestazioni di tabella del sito.
   Il corpo scende a 13px perché in maiuscolo una parola occupa circa
   un quinto in più: a 15px sei voci più il pulsante non ci stavano.
   ============================================================ */
header .wp-block-navigation .wp-block-navigation-item__content{
  font-family:var(--wp--preset--font-family--display);
  font-size:13px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
}
/* Sei voci in maiuscolo sono piu' larghe di cinque in minuscolo: fra i
   1040 e i 900px la testata andava a capo e il pulsante finiva sotto il
   logo. Si stringe per gradi — prima le voci e il marchio, poi il
   pulsante, che nelle pagine e' comunque ripetuto in fondo. */
@media (max-width:1040px){
  header .wp-block-navigation{ --wp--style--block-gap:14px; }
  header .wp-block-navigation .wp-block-navigation-item__content{ font-size:12px; }
  header .wp-block-site-logo img{ width:160px; }
}
@media (max-width:900px){
  header .wp-block-buttons{ display:none; }
}
/* Nel menù a tendina del telefono lo spazio non manca: si torna larghi. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{ font-size:16px; letter-spacing:.06em; }

/* Gli ancoraggi interni non devono finire sotto la barra. */
html{ scroll-padding-top:104px; }
@media (max-width:781px){ html{ scroll-padding-top:80px; } }

/* Barra di amministrazione di WordPress: è fissa sopra tutto, la
   testata le si appoggia sotto invece di scivolarci dietro.
   Sotto i 600px il core la rende «absolute», quindi torna a top:0. */
@media (min-width:601px){
  .admin-bar .wp-site-blocks > header.wp-block-template-part{ top:46px; }
}
@media (min-width:783px){
  .admin-bar .wp-site-blocks > header.wp-block-template-part{ top:32px; }
}

/* Scheda prodotto: la riga «Finisce quando» resta incollata in basso */
.pd-scheda{ display:flex; flex-direction:column; height:100%; }
.pd-scheda .pd-traguardo{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--pd-filetto);
  font-size:15px; color:var(--wp--preset--color--inchiostro);
}
.pd-traguardo strong{
  display:block; font-family:var(--wp--preset--font-family--display);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro); margin-bottom:5px;
}

/* Accessibilità: il fuoco da tastiera si deve vedere */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--wp--preset--color--teal-scuro); outline-offset:3px; border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   HERO — due colonne su gradiente teal.
   Il testo sta sulla metà sinistra, dove il gradiente è bianco:
   così il contrasto è quello del nero su bianco e non dipende
   dal punto in cui si trova il gradiente.
   ============================================================ */
.pd-hero{
  --pd-hero-tinta:linear-gradient(100deg,
    #ffffff 0%, #ffffff 30%, #dcf2f1 44%, #a8dedc 60%, #61c1bf 82%, #4fb8b6 100%);
  /* la dissolvenza verso il bianco sta SOPRA la tinta: il bordo basso
     dell'hero non deve tagliare di netto sulla sezione che segue */
  background-image:
    linear-gradient(to bottom, rgb(255 255 255 / 0) 58%, #ffffff 100%),
    var(--pd-hero-tinta);
}
@media (max-width:781px){
  /* su mobile le colonne si impilano: il gradiente scende invece di attraversare */
  .pd-hero{
    background-image:linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #bfe8e6 68%, #61c1bf 88%, #ffffff 100%);
  }
}

/* La vetrina del prodotto nell'hero.
   Nessuna cornice e nessuna ombra: le cornici sono già disegnate
   dentro l'immagine, aggiungerne una seconda le raddoppierebbe. */
.pd-hero-vetrina{ margin:0; }
.pd-hero-vetrina img{ width:100%; height:auto; }
@media (max-width:781px){
  .pd-hero-vetrina{ margin-top:40px; max-width:480px; margin-inline:auto; }
}

/* ============================================================
   FASCIA INVERTITA — teal scuro, testo bianco
   ============================================================ */
/* Le scene con il filetto a sinistra sono state sostituite dalle
   tessere: quel segno resta ora solo alla voce diretta della guida,
   dove significa qualcosa. */

/* ============================================================
   PIÈ DI PAGINA — teal scuro. Dentro, solo bianco:
   il teal chiaro su questo fondo sta a 2,34x e non è leggibile.
   ============================================================ */
.pd-footer{ border-top:0; }
.pd-footer a{ color:#ffffff; text-decoration:none; }
.pd-footer a:hover{ text-decoration:underline; }
.pd-footer .wp-block-list{ color:#ffffff; }
.pd-footer p{ color:#ffffff; }
.pd-footer :where(a,button):focus-visible{ outline:2px solid #ffffff; outline-offset:3px; }

/* Le schede ora stanno su bianco: il filetto deve reggerle da solo */
.wp-block-group[style*="border-radius:12px"]{ background-clip:padding-box; }

/* ============================================================
   BOX A SFUMATURA TENUE
   Fondale che parte da un teal chiarissimo e si spegne nel bianco.
   Serve a dare corpo alle schede su una pagina tutta bianca, senza
   riportare la fascia celesta piena che appiattiva le sezioni.
   Contrasto dell'inchiostro sul punto più scuro (#e6f5f4): 8,9×.
   ============================================================ */
.pd-box{
  background-image:var(--pd-velatura);
  border:1px solid #d6ecea;
  border-radius:16px;
  padding:34px 28px;
  box-shadow:0 1px 2px rgb(12 125 122 / .04);
  display:flex;
  flex-direction:column;
  align-items:center;     /* centra i figli in orizzontale */
  text-align:center;
  block-size:100%;        /* pareggia le altezze dentro la griglia */
}
.pd-box > :first-child{ margin-top:0; }
.pd-box > :last-child{ margin-bottom:0; }
.pd-box .wp-block-image{ margin:0 auto 18px; }
.pd-box h3{ max-width:20ch; }
.pd-box p{ max-width:34ch; }

/* La griglia dei blocchi deve tirare i figli a tutta altezza,
   altrimenti block-size:100% non ha un riferimento su cui misurarsi. */
.wp-block-group.is-layout-grid > .pd-box{ align-self:stretch; }

/* ============================================================
   SEZIONI CENTRATE
   Il selettore figlio diretto (>) è voluto: centra solo l'apertura
   della sezione — occhiello, titolo, paragrafi di raccordo — e lascia
   in pace tutto ciò che sta dentro griglie, schede e colonne.
   Si applica alle fasce a piena larghezza, non a quelle a due colonne
   dove il titolo deve restare allineato al testo che lo segue.
   ============================================================ */
.pd-sezione-centrata > .wp-block-heading,
.pd-sezione-centrata > p{
  text-align:center;
  margin-inline:auto;
}

/* ============================================================
   PIÈ DI PAGINA — elenchi senza punti, registro maiuscoletto.
   Nota tipografica: né Montserrat né Nunito Sans hanno un vero
   maiuscoletto nel carattere, e font-variant-caps lo farebbe
   sintetizzare al browser — capitali rimpicciolite, con le aste
   che si assottigliano e il peso che crolla. Si ottiene meglio a
   mano: maiuscolo a corpo ridotto con la spaziatura aperta.
   ============================================================ */
.pd-footer .wp-block-list{
  list-style:none;
  padding-left:0;
  margin-left:0;
}
.pd-footer .wp-block-list li{
  font-size:12px;
  line-height:1.6;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:400;
}
/* niente opacità sui link: su questo teal il bianco all'86% sta a 4,21×,
   sotto la soglia. L'affordance la dà la sottolineatura al passaggio. */

/* Intestazioni di colonna: stesso corpo delle voci — WordPress impone
   i corpi dei preset con !important e non conviene combatterlo — quindi
   la gerarchia la fanno il peso e la spaziatura, non la dimensione. */
.pd-footer h4{
  letter-spacing:.16em;
  font-weight:700;
  opacity:1;
}

/* Il colophon resta in tondo: è una frase con dei collegamenti
   dentro, e in maiuscolo non si legge. */
.pd-footer .colophon,
.pd-footer > .wp-block-group > p:last-child{ text-transform:none; letter-spacing:0; }

/* ============================================================
   SEZIONE SU FONDO TEAL SCURO
   Le regole toccano SOLO i figli diretti della sezione e il blocco
   della porta aperta. Tutto ciò che sta dentro le schede bianche
   resta com'è: se schiarissi tutto, il testo delle schede
   sparirebbe sul proprio fondale chiaro.
   ============================================================ */
.pd-sezione-scura > .wp-block-heading{ color:#ffffff; }
.pd-sezione-scura > p{ color:#ffffff; }

.pd-sezione-scura .pd-porta{
  border-top:1px solid rgba(255,255,255,.25);
}
.pd-sezione-scura .pd-porta p{ color:#ffffff; }
.pd-sezione-scura .pd-porta strong{ color:#ffffff; }
.pd-sezione-scura .pd-porta .pd-link-quieto a{
  color:#ffffff;
  border-bottom-color:rgba(255,255,255,.5);
}
.pd-sezione-scura .pd-porta .pd-link-quieto a:hover{ border-bottom-color:#ffffff; }

/* Promemoria misurato, per non ricascarci:
   bianco su #0C7D7A — 100% = 4,96x (passa) · 92% = 4,48x · 90% = 4,35x · 86% = 4,21x.
   Su questo fondale il testo va a piena opacità. La gerarchia si fa
   con peso, corpo e spaziatura, non schiarendo.
   Se un giorno servisse modulare con l'opacità, il fondale va portato a
   #0A6B68 (6,33x) o piu' scuro: da li' l'85% passa ancora. */

/* ============================================================
   VELATURA DELLE SCHEDE
   Prevalentemente bianche, con il #61C1BF diluito che affiora
   nell'angolo alto a sinistra e si spegne entro il primo terzo.

   Perché in alto e non in basso: nella parte alta stanno
   l'illustrazione e il titolo a 21px in grassetto, che per le regole
   di contrasto conta come testo grande (soglia 3x). Il testo lungo e
   la riga «Finisce quando» stanno in basso, sul bianco pieno, dove
   la soglia è 4,5x. Misurato sul punto più carico (#D6EFEE, 25% di
   tinta): inchiostro 8,4x · titolo teal 4,2x.
   ============================================================ */
:root{
  --pd-velatura:linear-gradient(155deg, #d6efee 0%, #edf8f8 30%, #ffffff 58%);
}

.pd-scheda,
.pd-aiact{
  background-image:var(--pd-velatura);
  background-color:#ffffff;
}

/* Schede prodotto: illustrazione e titolo centrati, testo lungo a bandiera.
   Il corpo resta allineato a sinistra: centrare un paragrafo di sei righe
   toglie all'occhio il punto di ritorno e rallenta la lettura. */
.pd-scheda .wp-block-image{
  margin-left:auto;
  margin-right:auto;
  width:fit-content;
}
.pd-scheda h3{ text-align:center; }

/* Le fasce teal scuro attaccano di netto, per scelta: la dissolvenza
   provata qui sopra ammorbidiva troppo e toglieva lo stacco. Resta invece
   la dissolvenza in fondo all'hero, che è un caso diverso — lì il gradiente
   è già una sfumatura e il taglio netto lo interrompeva a metà. */

/* ============================================================
   IL PIANO IN TRE PASSI — scheda unica
   I tre passi e il patto stanno dentro un solo oggetto: separati da
   filetti invece che da spazio vuoto, smettono di essere quattro
   elementi che galleggiano. Stessa velatura delle schede dei servizi,
   così la fascia si lega al resto della pagina.
   ============================================================ */
.pd-piano{
  border:1px solid var(--pd-filetto-forte);
  border-radius:20px;
  overflow:hidden;
  background-image:var(--pd-velatura);
  background-color:#ffffff;
  text-align:left;              /* la sezione è centrata, la scheda no */
}
.pd-piano-corpo{ margin-bottom:0; }
.pd-piano .pd-passo{
  padding:34px 28px;
  border-left:1px solid var(--pd-filetto);
}
.pd-piano .pd-passo:first-child{ border-left:0; }
.pd-piano .pd-passo-disegno{ margin:0 0 18px; }
.pd-piano .pd-passo p{ margin-bottom:0; }

/* L'anello col numero, sulla stessa riga del titolo.
   Numero in inchiostro e anello in teal scuro: due colori diversi
   perché si distinguano senza doverne sbiadire uno — il teal chiaro
   qui non si può usare, su fondo chiaro sta a 2,12x. */
/* Il cerchio non e' piu' un border-radius ma un disegno: tracciato
   irregolare, raggio che varia, e la chiusura che non torna al punto di
   partenza — come una penna che gira una volta sola. Sta nello sfondo,
   quindi l'interno resta trasparente: prima era un disco bianco e su
   fondo azzurro si vedeva il buco. */
.pd-anello{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:30px; block-size:30px;
  background:transparent;
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7d7a' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M13.1 2.5C18 2.2 21.9 6.5 21.5 11.5c-.4 5-4.8 9-9.9 8.9-5-.1-9.2-3.9-9.3-8.7C2.2 6.6 6 2.8 10.6 2.6c.5 0 1-.1 1.6-.1'/%3E%3C/svg%3E");
  color:var(--wp--preset--color--inchiostro);
  font-size:14px; font-weight:700;
  line-height:1;
}
.pd-piano h3{
  display:flex; align-items:center; gap:11px;
}

@media (max-width:781px){
  .pd-piano .pd-passo{ border-left:0; border-top:1px solid var(--pd-filetto); }
  .pd-piano .pd-passo:first-child{ border-top:0; }
}

/* ---- Il patto, a piede della stessa scheda ---- */
.pd-patto{
  border-top:1px solid var(--pd-filetto-forte);
  background:rgb(255 255 255 / .55);
  padding:26px 30px;
}
.pd-patto-cap{
  font-family:var(--wp--preset--font-family--display);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro);
  margin:0 0 14px;
}
.pd-patto .wp-block-list{
  margin:0; padding:0; list-style:none;
}
.pd-patto li{
  position:relative;
  padding-left:30px;
  font-size:16px; line-height:1.5;
}
/* La spunta è disegnata a mano, dello stesso tratto dei doodle.
   Sta in un'immagine di sfondo e non nel markup: così l'elenco resta
   una lista normale, modificabile dall'editor senza rompersi. */
.pd-patto li::before{
  content:"";
  position:absolute; left:0; top:.28em;
  inline-size:19px; block-size:19px;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7d7a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.2c1.9 1.5 3.4 3 4.6 4.6C11 13.4 14.3 9.4 19.4 5.6'/%3E%3C/svg%3E");
}

/* ============================================================
   LA GUIDA — il sito presenta, poi la guida parla
   Due voci, due contenitori. Sopra parla il sito e dice
   «Avv. Massimo Bacci»: sta dentro una scheda, come i servizi e il
   piano. Sotto parla lui e dice «capisco»: sta fuori, senza recinto,
   perché il vuoto attorno è la pausa che segnala il cambio di voce.
   ============================================================ */
.pd-guida{
  border:1px solid var(--pd-filetto-forte);
  border-radius:20px;
  overflow:hidden;
  background-image:var(--pd-velatura);
  background-color:#ffffff;
}
.pd-guida-alto{ margin-bottom:0; }

/* La fotografia riempie la colonna fino ai bordi della scheda.
   Non con flex: il blocco immagine di WordPress non sempre si comporta
   da elemento flessibile, e l'altezza percentuale non si risolve. La
   colonna fa da riferimento e la figura ci si appoggia sopra. */
.pd-guida .pd-guida-colonna-foto{
  position:relative;
  min-block-size:340px;
  padding:0;
}
.pd-guida-foto{
  position:absolute; inset:0;
  margin:0;
}
.pd-guida-foto img{
  inline-size:100%; block-size:100%;
  object-fit:cover; display:block;
}
.pd-guida-dentro{ padding:34px 34px; }
.pd-guida-dentro > :first-child{ margin-top:0; }
.pd-guida-dentro > :last-child{ margin-bottom:0; }

.pd-guida-cred{
  font-family:var(--wp--preset--font-family--display);
  font-size:12.5px; font-weight:600; letter-spacing:.05em;
  color:var(--wp--preset--color--teal-scuro);
  margin:16px 0 0;
}

/* i sigilli IAPP: verdi e blu, fuori dalla palette e non ricolorabili
   perché sono marchi di certificazione. Stanno confinati qui, a 52px,
   dove il colore estraneo è un accento e non una macchia. */
.pd-guida-piede{
  border-top:1px solid var(--pd-filetto-forte);
  background:rgb(255 255 255 / .55);
  padding:16px 34px;
  gap:12px 22px;
}
.pd-guida-piede .pd-sigillo{ margin:0; }
.pd-guida-did{
  font-size:12.5px; line-height:1.45;
  color:var(--wp--preset--color--grigio-testo);
  margin:0; max-inline-size:38ch;
}

/* ---- la voce, fuori dalla scheda ---- */
.pd-voce{
  margin-top:34px;
  padding-left:24px;
  border-left:3px solid var(--wp--preset--color--teal);
  max-inline-size:64ch;
}
/* La virgoletta è disegnata a mano, nel tratto dei doodle, e sta
   nel foglio di stile: il paragrafo resta testo normale, modificabile
   dall'editor senza rompere niente. */
.pd-voce::before{
  content:"";
  display:block;
  inline-size:34px; block-size:26px;
  margin-bottom:12px;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26' fill='none' stroke='%2361c1bf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 23c-.6-6.4.6-11.4 3.6-15C9.5 4.4 12.4 2.7 15 3'/%3E%3Cpath d='M19 23c-.6-6.4.6-11.4 3.6-15C25.5 4.4 28.4 2.7 31 3'/%3E%3C/svg%3E");
}
.pd-voce-testo{
  font-size:19px; line-height:1.62;
  color:var(--wp--preset--color--inchiostro);
  margin:0;
}
/* Sopra è «l'Avv. Massimo Bacci», qui è Massimo: lo stesso cambio di
   distanza che fa il testo, detto in due parole. */
.pd-voce-firma{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:15px;
  color:var(--wp--preset--color--teal-scuro);
  margin:14px 0 0;
}

@media (max-width:781px){
  .pd-guida-foto img{ min-block-size:300px; }
  .pd-guida-dentro{ padding:28px 26px; }
  .pd-guida-piede{ padding:16px 26px; }
}

/* ============================================================
   COM'È QUANDO FUNZIONA — quattro tessere sulla fascia scura
   Le tessere sono PIÙ SCURE del fondo, non più chiare. Misurato:
   bianco su una tessera schiarita al 9% sta a 4,21x e non passa;
   scurendo del 12% si arriva a 6,07x. A occhio la differenza è
   minima, sul contrasto è tutta.
   L'ultima tessera si inverte — bianco pieno, testo scuro, 13,3x —
   perché non è una scena ma la conclusione: l'unico punto bianco
   della fascia, e l'occhio ci va da solo.
   ============================================================ */
.pd-successo{ position:relative; overflow:hidden; }

/* Il doodle non galleggia più in una colonna vuota: diventa una
   filigrana d'angolo che riempie lo spazio senza chiedere attenzione. */
.pd-filigrana{
  position:absolute;
  inset-inline-end:-40px; inset-block-end:-56px;
  inline-size:340px;
  margin:0; opacity:.09; pointer-events:none;
}
.pd-filigrana img{ inline-size:100%; block-size:auto; }

.pd-tessere{ position:relative; }   /* sopra la filigrana */

.pd-tessera{
  background:rgb(0 0 0 / .12);
  border:1px solid rgb(255 255 255 / .18);
  border-radius:16px;
  padding:24px 26px;
}
.pd-tessera p{
  color:#ffffff;
  font-size:17px; line-height:1.55;
  margin:0;
}
/* Le scene sono tre e stanno in fila; la conclusione non è una quarta
   scena, è la somma delle altre — quindi occupa tutta la riga sotto. */
.pd-tessera-chiave{
  background:#ffffff;
  border-color:#ffffff;
  grid-column:1 / -1;
}
.pd-tessera-chiave p{
  color:var(--wp--preset--color--inchiostro-forte);
  font-weight:700;
}

@media (max-width:781px){
  .pd-filigrana{ inline-size:220px; inset-block-end:-40px; inset-inline-end:-30px; }
  .pd-tessera{ padding:20px 22px; }
}

/* ============================================================
   DA COSÌ, A COSÌ — il confronto e la posta in gioco
   ============================================================ */
.pd-confronto{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:26px;
  align-items:center;
}
.pd-confronto-lato{ text-align:center; }
.pd-confronto-lato .wp-block-image{ margin:0 auto 14px; max-inline-size:300px; }
.pd-confronto-lato p{ margin:0 auto; max-inline-size:32ch; }
.pd-confronto-freccia{
  inline-size:42px;
  color:var(--wp--preset--color--teal);
}
.pd-confronto-freccia svg{ inline-size:100%; block-size:auto; }

.pd-confronto-filetto{
  border:0; border-top:1px solid var(--pd-filetto);
  margin-block:44px 40px;
  max-inline-size:none;
}

/* ---- le tre schede del rischio ----
   Filetto, bordo e fondo vengono dalla stessa famiglia di colore del
   triangolo ad acquerello: #C97B5A è la versione profonda del suo
   riempimento, gli altri due sono sue diluizioni. Il segno e la scheda
   devono sembrare la stessa cosa, non due elementi accostati.
   Nel codice colori delle illustrazioni la terracotta significa già
   «questo ti attacca o ti inganna»: qui non è una scelta grafica. */
.pd-rischio{
  border:1px solid #F5E7E1;
  border-left:4px solid #C97B5A;
  border-radius:14px;
  background:#FCF7F5;
  padding:24px 24px 24px 26px;
  text-align:left;
}
.pd-rischio-segno{ margin:0 0 14px; }
.pd-rischio h3{ margin-top:0; }
.pd-rischio p{ margin-bottom:0; }

@media (max-width:820px){
  .pd-confronto{ grid-template-columns:1fr; gap:18px; }
  .pd-confronto-freccia{ transform:rotate(90deg); margin-inline:auto; }
}

/* ============================================================
   CHI SONO — profilo fermo, storia che scorre
   Su questa pagina la faccia, le certificazioni e l'invito a
   prenotare servono dalla prima riga all'ultima, non solo nel
   primo schermo: la scheda del profilo resta ferma mentre il
   racconto scorre accanto.
   Perché lo sticky funzioni la colonna NON deve stirarsi a tutta
   altezza (allineamento in alto sul blocco colonne): se si stira,
   il suo riquadro coincide col contenitore e non le resta strada
   da percorrere.
   ============================================================ */
.pd-colonna-profilo{
  position:sticky;
  /* la testata appiccicata è alta 86px: la scheda le si ferma
     sotto, con venti pixel d'aria */
  top:106px;
}
.pd-profilo,
.pd-cv-scheda{
  border:1px solid var(--pd-filetto-forte);
  border-radius:20px;
  overflow:hidden;
  background-image:var(--pd-velatura);
  background-color:#ffffff;
}
.pd-profilo-foto{ margin:0; }
.pd-profilo-foto img{
  display:block;
  inline-size:100%; block-size:270px;
  object-fit:cover; object-position:50% 16%;
}
.pd-profilo-dentro{ padding:22px 24px 24px; }
.pd-profilo-nome{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:23px; line-height:1.2;
  color:var(--wp--preset--color--teal-scuro);
  margin:0 0 4px;
}
.pd-profilo-ruolo{
  font-family:var(--wp--preset--font-family--display);
  font-weight:600; font-size:12.5px; letter-spacing:.04em;
  color:var(--wp--preset--color--teal-scuro);
  margin:0;
}
/* stessa spunta disegnata a mano del patto, in formato ridotto */
.pd-profilo .wp-block-list{ list-style:none; margin:16px 0 0; padding:0; }
.pd-profilo li{
  position:relative; padding-left:26px; margin-bottom:9px;
  font-size:14px; line-height:1.45;
  color:var(--wp--preset--color--inchiostro);
}
.pd-profilo li:last-child{ margin-bottom:0; }
.pd-profilo li::before{
  content:"";
  position:absolute; left:0; top:.24em;
  inline-size:16px; block-size:16px;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7d7a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.2c1.9 1.5 3.4 3 4.6 4.6C11 13.4 14.3 9.4 19.4 5.6'/%3E%3C/svg%3E");
}
.pd-profilo .wp-block-buttons,
.pd-cv-scheda .wp-block-buttons{ margin-top:20px; }
.pd-profilo-piede{
  border-top:1px solid var(--pd-filetto-forte);
  background:rgb(255 255 255 / .55);
  padding:14px 24px;
  gap:14px;
}
.pd-profilo-piede .pd-sigillo{ margin:0; }

/* la colonna del racconto */
.pd-storia .wp-block-heading{ margin-top:38px; }
.pd-storia > :first-child{ margin-top:0; }
.pd-storia .pd-voce{ margin:38px 0; }

/* il riquadro sul nome, in chiusura */
.pd-doodle-nome{
  border:1px solid var(--pd-filetto-forte);
  border-radius:20px;
  overflow:hidden;
  background-image:var(--pd-velatura);
  background-color:#ffffff;
  padding:26px 28px;
  margin-top:38px;
}
/* Il disegno libero della libreria è un tratto lungo, quattro a uno:
   dentro una colonna da 120px diventava un filo illeggibile. Sta
   sopra al testo, come una riga scritta a mano. */
.pd-doodle-nome .pd-doodle-segno{ margin:0 0 18px; max-inline-size:300px; }
.pd-doodle-nome .pd-doodle-segno img{ display:block; inline-size:100%; block-size:auto; }
.pd-doodle-nome .pd-doodle-testo > :first-child{ margin-top:0; }
.pd-doodle-nome .pd-doodle-testo > :last-child{ margin-bottom:0; }

@media (max-width:781px){
  /* impilato: la scheda torna in cima e smette di seguire lo scorrimento */
  .pd-colonna-profilo{ position:static; }
  .pd-profilo-foto img{ block-size:240px; }
  .pd-storia .wp-block-heading{ margin-top:30px; }
}

/* ============================================================
   CURRICULUM — stesso impianto di Chi sono
   La scheda ferma a sinistra porta le cose corte (contatti,
   competenze, lingue), il curriculum scorre a destra. Qui la
   scheda NON eredita le spunte disegnate di .pd-profilo: dentro
   ci sono elenchi di natura diversa, e una spunta accanto a un
   numero di telefono non vuol dire niente.
   ============================================================ */
.pd-cv-blocco{
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--pd-filetto-forte);
}
.pd-cv-cap{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro);
  margin:0 0 12px;
}

/* Contatti: etichetta sopra, valore sotto.
   Affiancati non ci stanno: la colonna interna misura 274px, e con
   l'etichetta a 74px al valore ne restano 190. Email e indirizzo
   vanno a capo e l'etichetta resta sola in cima, con righe alte
   33, 45, 45, 33, 33. Impilati stanno tutti su una riga sola. */
.pd-cv-contatti{ list-style:none; margin:0; padding:0; }
.pd-cv-contatti li{
  font-size:13.5px; line-height:1.45;
  color:var(--wp--preset--color--inchiostro);
  overflow-wrap:break-word;
}
.pd-cv-contatti li + li{ margin-top:13px; }
.pd-cv-contatti strong{
  display:block;
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro);
  margin-bottom:1px;
}

/* competenze */
.pd-tessere{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pd-tessere li{
  font-family:var(--wp--preset--font-family--display);
  font-weight:600; font-size:12.5px;
  color:var(--wp--preset--color--teal-scuro);
  border:1px solid var(--pd-filetto-forte); border-radius:999px;
  padding:6px 13px; background:rgb(255 255 255 / .7);
}

/* le sezioni del curriculum, separate da un filetto */
.pd-cv-sezione{ padding:32px 0; border-top:1px solid var(--pd-filetto); }
.pd-cv-sezione:first-child{ border-top:0; padding-top:0; }

/* righe con l'anno a destra */
.pd-cv-righe{ list-style:none; margin:0; padding:0; }
.pd-cv-righe li{
  display:flex; align-items:baseline; gap:12px;
  padding:8px 0; border-bottom:1px dotted var(--pd-filetto-forte);
  font-size:15px;
}
.pd-cv-righe li:last-child{ border-bottom:0; }
.pd-cv-righe strong{
  margin-left:auto;
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:12.5px;
  color:var(--wp--preset--color--teal-scuro);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* una tappa: titolo, ente, nota */
.pd-griglia-2{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px 34px;
}
.pd-tappa-tipo{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro); margin:0 0 4px;
}
.pd-tappa-titolo{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:16px; line-height:1.3;
  color:var(--wp--preset--color--inchiostro-forte); margin:0 0 3px;
}
.pd-tappa-ente{ font-size:14px; color:var(--wp--preset--color--inchiostro); margin:0 0 2px; }
.pd-tappa-nota{ font-size:13px; color:var(--wp--preset--color--grigio-testo); margin:0; }

/* Pulsante secondario: stesso peso e stessa forma del primario, ma
   vuoto. Il giallo resta uno solo per schermata, così si capisce
   sempre qual è l'azione principale. */
.pd-bottone-quieto .wp-block-button__link{
  background-color:transparent;
  color:var(--wp--preset--color--teal-scuro);
  /* Il filetto è un'ombra interna, non un border: con border il pulsante
     secondario diventava alto 47px contro i 44 del primario, e affiancati
     si vedeva. */
  box-shadow:inset 0 0 0 1.5px var(--pd-filetto-forte);
}
.pd-bottone-quieto .wp-block-button__link:hover,
.pd-bottone-quieto .wp-block-button__link:focus-visible{
  box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--teal-scuro);
}

/* La scheda del curriculum è alta 1324px: più dello schermo. Appiccicata
   si incollerebbe subito in alto e la parte bassa — competenze e lingue —
   resterebbe fuori dalla finestra per sempre, irraggiungibile. Su questa
   pagina la colonna scorre insieme al resto. */
.pd-cv .pd-colonna-profilo{ position:static; }

/* ============================================================
   FORMAZIONE — la pagina a due colonne
   L'argomento scorre a sinistra, il listino resta appiccicato a
   destra. Stesso impianto di Chi sono, ma a specchio: nel markup
   il listino viene PRIMA, e sul desktop lo si sposta a destra con
   order. Serve perché sotto i 781px le colonne si impilano
   nell'ordine del markup, e il prezzo deve restare in cima —
   messo dopo, il lettore da telefono lo troverebbe in fondo a
   nove blocchi di testo.
   ============================================================ */
.pd-colonna-listino{
  position:sticky;
  /* la testata appiccicata è alta 86px, come su Chi sono */
  top:106px;
}
@media (min-width:782px){
  .pd-formazione .pd-colonna-listino{ order:2; }
}
@media (max-width:781px){
  .pd-colonna-listino{ position:static; }
}

/* ---- il listino ---- */
.pd-listino{
  border:1px solid var(--pd-filetto-forte);
  border-radius:16px;
  background-image:var(--pd-velatura);
  background-color:#ffffff;
  padding:26px 24px;
  box-shadow:var(--wp--preset--shadow--scheda);
}
.pd-listino .wp-block-heading{ font-size:18px; margin:0 0 4px; }
.pd-listino-sotto{
  font-size:14px; color:var(--wp--preset--color--grigio-testo); margin:0 0 18px;
}
.pd-listino-riga{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 0; border-top:1px solid var(--pd-filetto);
  font-size:15px; margin:0;
}
.pd-listino-riga:first-of-type{ border-top:0; }
.pd-listino-riga span{ flex:1 1 auto; }
.pd-listino-riga strong{
  font-family:var(--wp--preset--font-family--display);
  font-size:19px; color:var(--wp--preset--color--teal-scuro);
  font-variant-numeric:tabular-nums;
}
.pd-listino-iva{
  margin:14px 0 0; font-size:13px; color:#93a1a8;
}
.pd-listino .wp-block-buttons{ margin-top:18px; }
.pd-listino .wp-block-button{ width:100%; }
.pd-listino .wp-block-button__link{ display:block; text-align:center; }
.pd-listino .pd-link-quieto{ margin-top:12px; text-align:center; font-size:13px; }

/* L'esempio sta DOPO il pulsante e in corpo piccolo. Messo in alto e
   in cifra grande veniva letto come il prezzo del servizio, invece che
   come il conto di un'azienda da trentatré persone. */
.pd-listino-esempio{
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--pd-filetto);
  font-size:13.5px; line-height:1.55; color:var(--wp--preset--color--grigio-testo);
}
.pd-listino-esempio em{
  display:block; font-style:normal;
  font-family:var(--wp--preset--font-family--display);
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#93a1a8; margin-bottom:6px;
}

/* ---- la striscia di sintesi sotto l'apertura ---- */
.pd-sintesi{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px; background:var(--pd-filetto);
  border:1px solid var(--pd-filetto); border-radius:12px; overflow:hidden;
}
.pd-sintesi > .wp-block-group{ background:#ffffff; padding:18px 20px; }
.pd-sintesi-cap{
  font-family:var(--wp--preset--font-family--display);
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro); margin:0 0 6px;
}
.pd-sintesi p:last-child{ font-size:15px; line-height:1.45; margin:0; }

/* ---- i blocchi della colonna di sinistra ----
   Separati da un filetto invece che da una fascia colorata: dentro una
   colonna le fasce non si possono usare, sfondano la griglia. */
.pd-blocco{
  padding-block:40px; border-top:1px solid var(--pd-filetto);
}
.pd-blocco:first-child{ padding-top:0; border-top:0; }
.pd-blocco > .wp-block-heading:first-child{ margin-top:0; }

/* ---- fatti a filetto: tre o quattro voci brevi affiancate ---- */
.pd-fatti{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px 26px;
}
.pd-fatto{ border-left:3px solid var(--wp--preset--color--teal); padding-left:15px; }
.pd-fatto-nome{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:15px; color:var(--wp--preset--color--inchiostro-forte);
  margin:0 0 3px;
}
.pd-fatto p:last-child{
  font-size:15px; line-height:1.55; margin:0; color:var(--wp--preset--color--grigio-testo);
}

/* ---- affermazione in risalto ---- */
.pd-rilievo{
  border-left:3px solid var(--wp--preset--color--teal);
  padding-left:20px;
  font-size:19px; line-height:1.55;
  color:var(--wp--preset--color--inchiostro-forte);
  max-width:54ch;
}

/* ---- elenco con la spunta disegnata a mano ----
   Stesso tratto di .pd-patto, ma utilizzabile fuori da quella scheda. */
.pd-spunte{ margin:0; padding:0; list-style:none; }
.pd-spunte li{
  position:relative; padding-left:31px;
  font-size:16px; line-height:1.5;
}
.pd-spunte li::before{
  content:""; position:absolute; left:0; top:.24em;
  inline-size:19px; block-size:19px;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7d7a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.2c1.9 1.5 3.4 3 4.6 4.6C11 13.4 14.3 9.4 19.4 5.6'/%3E%3C/svg%3E");
}

/* ---- le schermate dell'app ---- */
.pd-schermata img{
  width:100%; height:auto;
  border:1px solid var(--pd-filetto); border-radius:12px;
  box-shadow:var(--wp--preset--shadow--scheda); background:#ffffff;
}
.pd-schermata figcaption{
  margin-top:12px; font-size:14px; line-height:1.5;
  color:var(--wp--preset--color--grigio-testo); max-width:64ch; text-align:left;
}
.pd-schermata figcaption strong{
  font-family:var(--wp--preset--font-family--display); font-size:13px;
  color:var(--wp--preset--color--inchiostro-forte);
}

/* ============================================================
   IL PREZZO
   ============================================================ */
.pd-fasce{
  border:1px solid var(--pd-filetto-forte); border-radius:16px;
  overflow:hidden; background:#ffffff;
}
.pd-fascia{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:20px 24px; border-top:1px solid var(--pd-filetto); margin:0;
}
.pd-fascia:first-child{ border-top:0; }
.pd-fascia span{ flex:1 1 200px; font-size:17px; }
.pd-fascia strong{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:30px; line-height:1;
  color:var(--wp--preset--color--teal-scuro); font-variant-numeric:tabular-nums;
}
.pd-fascia em{
  font-style:normal; font-size:14px; font-weight:600;
  color:var(--wp--preset--color--grigio-testo); margin-left:6px;
}

/* il conto svolto: l'unico punto della pagina in cui la cifra può essere
   grande, perché ha l'etichetta «esempio» attaccata sopra */
.pd-conto{
  border:1px solid var(--pd-filetto-forte); border-radius:16px;
  background-image:var(--pd-velatura); background-color:#ffffff;
  padding:26px 28px;
}
.pd-conto-cap{
  font-family:var(--wp--preset--font-family--display);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro); margin:0 0 14px;
}
.pd-conto-riga{
  display:flex; align-items:baseline; gap:12px;
  font-size:17px; margin:0 0 9px; font-variant-numeric:tabular-nums;
}
.pd-conto-riga span{ flex:1 1 auto; }
.pd-conto-riga strong{ color:var(--wp--preset--color--inchiostro-forte); }
.pd-conto-totale{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--pd-filetto-forte);
  margin:16px 0 0; padding-top:16px;
}
.pd-conto-totale span{
  flex:1 1 auto; font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:16px; color:var(--wp--preset--color--inchiostro-forte);
}
.pd-conto-totale strong{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:clamp(28px,4vw,38px); line-height:1;
  color:var(--wp--preset--color--teal-scuro); font-variant-numeric:tabular-nums;
}
.pd-conto-medio{ margin:10px 0 0; font-size:15px; color:var(--wp--preset--color--grigio-testo); }

/* La tabella scorre dentro il suo riquadro: la pagina non deve mai
   scorrere di lato. */
.pd-tabella-prezzi{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pd-tabella-prezzi table{
  border-collapse:collapse; width:100%; min-width:420px;
  font-variant-numeric:tabular-nums;
}
/* Il blocco tabella del core disegna un bordo su tutti e quattro i lati di
   ogni cella. Ha la stessa specificità di .pd-tabella-prezzi td, quindi vince
   chi viene caricato dopo — e il core viene dopo. Da qui il selettore più
   lungo (.pd-tabella-prezzi table td): serve a togliere i filetti verticali,
   che qui spezzano la lettura dei numeri in colonna. */
.pd-tabella-prezzi table th,
.pd-tabella-prezzi table td{
  border:0; border-bottom:1px solid var(--pd-filetto);
  padding:11px 14px; text-align:right; font-size:16px;
}
.pd-tabella-prezzi table th:first-child,
.pd-tabella-prezzi table td:first-child{ text-align:left; }
.pd-tabella-prezzi table thead th{
  font-family:var(--wp--preset--font-family--display);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro);
  border-bottom:1px solid var(--pd-filetto-forte);
}
.pd-tabella-prezzi tbody tr.pd-riga-marcata{ background:var(--wp--preset--color--azzurro-tenue); }
.pd-tabella-prezzi tbody tr.pd-riga-marcata td{
  font-weight:700; color:var(--wp--preset--color--inchiostro-forte);
}

.pd-regole{ display:grid; gap:18px; }
.pd-regola{
  border-left:3px solid var(--wp--preset--color--teal); padding-left:18px;
}
.pd-regola-nome{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:16px; color:var(--wp--preset--color--inchiostro-forte);
  margin:0 0 4px;
}
.pd-regola p:last-child{ font-size:16px; line-height:1.6; margin:0; max-width:66ch; }

/* ============================================================
   LA CLASSIFICA — disegno di una cosa ancora da costruire.
   Il tratteggio è la convenzione del sito per i segnaposto: qui
   dice «così potrebbe essere», non «così è».
   ============================================================ */
.pd-mock{
  border:2px dashed var(--pd-filetto-forte); border-radius:16px;
  padding:22px; background:#ffffff;
}
.pd-mock-cap{
  font-family:var(--wp--preset--font-family--display);
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro); margin:0 0 16px;
}
.pd-riquadro{
  border:1px solid var(--pd-filetto); border-radius:12px;
  background:var(--wp--preset--color--azzurro-tenue); padding:20px;
}
.pd-riquadro-cap{
  font-family:var(--wp--preset--font-family--display);
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--grigio-testo); margin:0 0 14px;
}
.pd-posizione{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:38px; line-height:1; margin:0;
  color:var(--wp--preset--color--teal-scuro); font-variant-numeric:tabular-nums;
}
.pd-posizione em{
  font-style:normal; font-family:var(--wp--preset--font-family--corpo);
  font-size:16px; font-weight:600; color:var(--wp--preset--color--grigio-testo);
}
/* La barra dice dove sta la persona nel gruppo senza dire di quanto:
   un numero accanto al segno tradirebbe il punteggio di chi le sta sopra. */
.pd-barra{
  position:relative; height:9px; border-radius:999px;
  background:var(--pd-filetto); margin:16px 0 0;
}
.pd-barra i{
  position:absolute; top:-4px; left:79%;
  inline-size:17px; block-size:17px; border-radius:50%;
  background:var(--wp--preset--color--giallo); border:2px solid #e0bd2b;
}
.pd-barra-legenda{
  display:flex; justify-content:space-between;
  margin:8px 0 0; font-size:12px; color:#93a1a8;
}
.pd-clas{ margin:0; padding:0; list-style:none; }
.pd-clas li{
  display:flex; align-items:center; gap:12px;
  padding:7px 9px; border-radius:6px;
  font-size:15px; font-variant-numeric:tabular-nums;
}
.pd-clas li b{
  flex:none; inline-size:22px;
  font-family:var(--wp--preset--font-family--display);
  font-size:13px; font-weight:700; color:var(--wp--preset--color--grigio-testo);
}
.pd-clas li span{ flex:1 1 auto; }
.pd-clas li em{ font-style:normal; font-weight:700; color:var(--wp--preset--color--inchiostro-forte); }
.pd-clas li.pd-clas-io{ background:var(--wp--preset--color--azzurro); }
.pd-clas li.pd-clas-io span,
.pd-clas li.pd-clas-io b{ color:var(--wp--preset--color--inchiostro-forte); font-weight:700; }

/* ============================================================
   WordPress dà a ogni figlio dopo il primo un margine superiore: è il
   blockGap del layout «flow», e su una colonna di testo è quello che
   vogliamo. Dentro queste tre griglie però il margine non c'entra — il
   passo lo dà gap — e produce due difetti: le colonne partono sfalsate
   (il primo riquadro in alto, gli altri più giù) e fra le regole del
   prezzo il passo raddoppia. Qui si azzera.
   ============================================================ */
.pd-sintesi > *,
.pd-fatti > *,
.pd-regole > *{ margin-block-start:0; }

/* ============================================================
   PIATTAFORMA — la pagina per domande
   Ogni sezione è una domanda che il cliente fa davvero, e sotto
   la risposta. La domanda è voce sua: sta fra virgolette, in un
   corpo più grande della risposta e con un filetto giallo, così
   si vede che a parlare sono due persone diverse. Il giallo qui
   non è la call to action: è il segno di chi chiede.
   ============================================================ */
.pd-domanda{
  font-family:var(--wp--preset--font-family--display);
  font-weight:700; font-size:clamp(24px,3.2vw,32px); line-height:1.18;
  letter-spacing:-.018em; color:var(--wp--preset--color--inchiostro-forte);
  text-wrap:balance; max-width:24ch;
  padding-left:22px; border-left:4px solid var(--wp--preset--color--giallo);
}

/* ---- i due modi di prendere la piattaforma ----
   NON si chiamano .pd-modo: quel nome sulla home e' gia' la fascia in fondo
   alla sezione scura, e riusarlo qui le metteva un fondo chiaro sotto il
   testo bianco — illeggibile. */
.pd-modi{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px;
}
.pd-modi > *{ margin-block-start:0; }
.pd-modo{
  border:1px solid var(--pd-filetto-forte); border-radius:16px;
  background-image:var(--pd-velatura); background-color:#ffffff;
  padding:26px 28px;
}
.pd-modo .wp-block-heading{ font-size:19px; margin:0 0 10px; }
.pd-modo p{ font-size:16px; line-height:1.6; }
.pd-modo .wp-block-buttons{ margin-top:18px; }
.pd-modo .pd-link-quieto{ margin-top:16px; }

/* Su questa pagina le schermate stanno nel binario largo ma non lo riempiono:
   a 1080px una schermata d'app diventa più grande del vero e il testo accanto
   sembra una didascalia. */
.pd-schermata{ max-width:860px; }

/* ============================================================
   SERVIZI — la roadmap illustrata
   Gli undici disegni del contratto: tratto a mano su una macchia
   di colore. Restano trasparenti, non su fondo bianco, così la
   macchia poggia sulla fascia — su azzurro tenue un rettangolo
   bianco si vedrebbe tutto.
   ============================================================ */
.pd-rm-passo{
  display:grid; grid-template-columns:132px minmax(0,1fr);
  gap:26px; align-items:start;
}
.pd-rm-passo .wp-block-image{ margin:0; }
.pd-rm-passo img{ width:100%; height:auto; }
.pd-rm-passo .wp-block-heading{
  display:flex; align-items:center; gap:13px; font-size:21px; margin:0 0 8px;
}
/* Il numero riusa l'anello del metodo in home, un filo piu' grande: qui e'
   il passo di un percorso, non una nota a margine. */
.pd-rm-passo .pd-anello{
  inline-size:38px; block-size:38px; font-size:16px;
}
.pd-rm-passo p{ font-size:16.5px; line-height:1.6; max-width:58ch; }
.pd-rm-lista{ display:grid; gap:44px; }
@media (max-width:620px){
  .pd-rm-passo{ grid-template-columns:88px minmax(0,1fr); gap:18px; }
}

/* Le tre cose che continuano non sono un ottavo passo: sono di natura
   diversa e il filetto sopra serve a dirlo. */
.pd-rm-continua{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:28px;
  border-top:1px solid var(--pd-filetto-forte); padding-top:34px;
}
.pd-rm-continua .wp-block-image{ margin:0 0 12px; }
.pd-rm-continua img{ width:88px; height:auto; }
.pd-rm-continua p{ font-size:15.5px; line-height:1.55; max-width:none; }

/* testata di un servizio in primo piano */
.pd-servizio-cap{
  font-family:var(--wp--preset--font-family--display);
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro); margin:0 0 12px;
}
.pd-a-chi{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px 36px;
}
.pd-a-chi .pd-fatto-nome{ margin-bottom:5px; }
.pd-a-chi p{ font-size:16px; line-height:1.6; margin:0; max-width:none; }

/* il satellite: attaccato al servizio che lo precede, più piccolo di lui */
.pd-satellite{
  border-left:3px solid var(--pd-filetto-forte); padding-left:24px;
}
.pd-satellite .wp-block-heading{ font-size:21px; }
.pd-satellite p{ font-size:16px; line-height:1.62; }

/* ---- la fascia rivolta alle società informatiche ----
   Cambia interlocutore, quindi cambia fondo. Sul teal scuro il testo va a
   piena opacità (bianco 100% = 4,96x) e il filetto dei blocchi passa al
   giallo: il teal chiaro su teal scuro non si vedrebbe. */
.pd-sezione-scura .pd-fatti .pd-fatto{
  border-left-color:var(--wp--preset--color--giallo);
}
.pd-sezione-scura .pd-fatto-nome,
.pd-sezione-scura .pd-fatti .pd-fatto p{ color:#ffffff; }
/* L'occhiello della fascia scura perdeva contro la regola che schiarisce
   i paragrafi (stessa specificità, ma quella viene dopo): qui si aggiunge
   il selettore dell'elemento per farlo vincere. Il teal è più chiaro di
   quello della palette — sul fondo notte sta a 7,9x e resta distinguibile
   dal giallo dei filetti. */
.pd-sezione-scura > .wp-block-group > p.pd-servizio-cap{ color:#8fd3d1; }

/* La fascia delle società informatiche non è teal scuro ma inchiostro forte:
   su quel fondo il bianco sta a 13,3x, il teal chiaro a 6,3x e il giallo a
   8,5x — tutti e tre passano larghi, e i due accenti restano distinguibili
   fra loro. Le regole qui sopra valgono per entrambi i fondi. */

/* Elenco a pallini pieni: si usa dove la spunta disegnata di .pd-spunte
   direbbe la cosa sbagliata — questi sono passi di un piano, non cose
   già fatte. */
.pd-puntini{ margin:0; padding:0; list-style:none; }
.pd-puntini li{ position:relative; padding-left:22px; line-height:1.55; }
.pd-puntini li::before{
  content:""; position:absolute; left:0; top:.62em;
  inline-size:9px; block-size:9px; border-radius:50%;
  background:var(--wp--preset--color--teal);
}

/* Le regole del tema per la sezione scura usano il selettore figlio, e a
   ragione: se schiarissero tutto, il testo dentro le schede bianche
   sparirebbe. Ma su Servizi il contenuto della fascia sta dentro un gruppo
   alignwide — quindi è nipote, non figlio, e restava teal su teal.
   Si estende di UN livello soltanto, non a discendenza libera. */
.pd-sezione-scura > .wp-block-group > .wp-block-heading,
.pd-sezione-scura > .wp-block-group > p{ color:#ffffff; }
.pd-sezione-scura > .wp-block-group > p strong{ color:#ffffff; }

/* ============================================================
   GRIGLIE MIE DENTRO IL LAYOUT «FLOW» DI WORDPRESS
   Quando un gruppo dichiara layout "default", il core gli mette
   `.is-layout-flow`, che dà un margine superiore a ogni figlio
   tranne il primo. Se la griglia la disegno io in CSS, quel
   margine non separa le righe: sposta in basso tutte le colonne
   meno la prima, e le voci affiancate risultano disallineate di
   ventiquattro pixel. Si azzera dove comanda la mia griglia —
   la distanza la fa `gap`.
   ============================================================ */
.pd-sintesi > *,
.pd-fatti > *,
.pd-a-chi > *,
.pd-regole > *,
.pd-rm-lista > *,
.pd-rm-continua > *{ margin-block-start:0; }

/* ============================================================
   LA FASCIA COL PATTERN NELLE APERTURE
   Il pattern ha una luminanza che va da 4 a 229 su 255: sotto al
   testo, crudo, è illeggibile per costruzione — in un punto
   sparisce il nero, in un altro il bianco. Qui non ci va sotto:
   entra da destra e sfuma nel nulla con una maschera, anche in
   alto e in basso, così è una forma e non un rettangolo incollato.
   Il testo resta sul bianco della pagina.

   È uno pseudo-elemento e non un blocco: le pagine non devono
   portarsi dietro un <div> vuoto solo per fare da sfondo. Serve
   solo la classe sul gruppo dell'apertura.
   ============================================================ */
.pd-hero-pattern{ position:relative; overflow:hidden; }
/* i figli vanno sopra: un ::before posizionato coprirebbe il
   contenuto in flusso normale */
.pd-hero-pattern > *{ position:relative; z-index:1; }

.pd-hero-pattern::before{ content:none; }
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .pd-hero-pattern::before{
    content:""; position:absolute; z-index:0;
    inset:0 0 0 44%;
    background-image:url("assets/img/pattern.webp");
    background-size:cover; background-position:center right;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.42) 30%, #000 72%),
      linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.42) 30%, #000 72%),
      linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  /* Sul telefono il testo occupa tutta la larghezza: la fascia non può
     restare a destra. Scende sotto, diventa orizzontale e sfuma verso
     l'alto, così non incontra mai una riga di testo. */
  @media (max-width:781px){
    .pd-hero-pattern{ padding-bottom:calc(var(--wp--preset--spacing--60) + 40px); }
    .pd-hero-pattern::before{
      inset:auto 0 0 0; block-size:150px;
      background-position:center;
      -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 100%);
      mask-image:linear-gradient(to top, #000 0%, transparent 100%);
    }
  }
}

/* Con la fascia a destra il testo dell'apertura non deve arrivarci sotto. */
.pd-hero-pattern h1{ max-width:16ch; }
.pd-hero-pattern .has-grande-font-size{ max-width:44ch; }
.pd-hero-pattern > .wp-block-group > p,
.pd-hero-pattern > p{ max-width:46ch; }
@media (max-width:781px){
  .pd-hero-pattern h1,
  .pd-hero-pattern .has-grande-font-size,
  .pd-hero-pattern > .wp-block-group > p,
  .pd-hero-pattern > p{ max-width:none; }
}

/* ============================================================
   IL MODULO DI CONTATTO
   Il tema non aveva stili per i campi. Etichette in maiuscoletto
   come gli occhielli, filetto della stessa famiglia delle schede,
   e un anello di fuoco visibile: un modulo si compila anche da
   tastiera, e chi lo fa deve sapere dov'è.
   ============================================================ */
.pd-modulo{ display:grid; gap:20px; }
.pd-modulo-due{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px; }
.pd-modulo-due > *{ margin-block-start:0; }
.pd-campo{ display:grid; gap:7px; }
.pd-campo > span{
  font-family:var(--wp--preset--font-family--display);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro);
}
.pd-campo input, .pd-campo select, .pd-campo textarea{
  /* il tema non ha un box-sizing globale: senza questa riga gli input
     restano content-box e imbottitura e bordo si sommano alla colonna —
     la riga con due input sfondava di 32px, quella col menù a tendina no,
     perché i select sono border-box di loro. */
  box-sizing:border-box;
  font-family:var(--wp--preset--font-family--corpo);
  font-size:16px; line-height:1.5; color:var(--wp--preset--color--inchiostro);
  background:#ffffff;
  border:1px solid var(--pd-filetto-forte); border-radius:10px;
  padding:13px 15px; inline-size:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pd-campo textarea{ min-block-size:120px; resize:vertical; }
.pd-campo select{
  appearance:none; cursor:pointer; padding-inline-end:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7882' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 5.5 6-5.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}
.pd-campo input:focus, .pd-campo select:focus, .pd-campo textarea:focus{
  outline:none; border-color:var(--wp--preset--color--teal-scuro);
  box-shadow:0 0 0 3px rgb(12 125 122 / .14);
}
.pd-campo input::placeholder, .pd-campo textarea::placeholder{ color:#93a1a8; }
.pd-modulo-nota{ font-size:13px; line-height:1.5; color:var(--wp--preset--color--grigio-testo); margin:0; }
.pd-modulo button{ justify-self:start; border:0; cursor:pointer; }
/* la trappola per i robot: nel modulo, ma fuori dallo schermo e fuori dal giro
   del tasto tabulatore */
.pd-esca{ position:absolute; left:-9999px; inline-size:1px; block-size:1px; overflow:hidden; }

.pd-esito{
  border-radius:12px; padding:18px 20px; margin:0 0 8px;
  font-size:16px; line-height:1.55;
}
.pd-esito--ok{ background:var(--wp--preset--color--azzurro); color:var(--wp--preset--color--inchiostro-forte); }
.pd-esito--no{ background:#fbeee9; color:#8a3b1c; }

/* ---- i recapiti ---- */
.pd-diretti{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:24px; }
.pd-diretti > *{ margin-block-start:0; }
.pd-diretto-cap{
  font-family:var(--wp--preset--font-family--display);
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro); margin:0 0 6px;
}
/* :not() è necessario: `.pd-diretto p` vale una classe più un elemento e
   batteva `.pd-diretto-cap`, che è una classe sola — le etichette
   prendevano il corpo dei valori. */
.pd-diretto p:not(.pd-diretto-cap){ font-size:16.5px; line-height:1.5; margin:0; }
.pd-diretto a{ text-decoration:none; }

/* ---- la scheda dello studio, appiccicata a destra ---- */
.pd-colonna-studio{ position:sticky; top:106px; }
@media (max-width:781px){ .pd-colonna-studio{ position:static; } }
.pd-scheda-studio{
  border:1px solid var(--pd-filetto-forte); border-radius:16px;
  background-image:var(--pd-velatura); background-color:#ffffff;
  padding:24px; box-shadow:var(--wp--preset--shadow--scheda);
}
.pd-scheda-studio .wp-block-image{ margin:0 0 18px; }
.pd-scheda-studio img{ inline-size:100%; block-size:auto; }
.pd-scheda-studio .pd-diretti{ grid-template-columns:1fr; gap:16px; }
.pd-scheda-studio hr{
  border:0; border-top:1px solid var(--pd-filetto); margin:20px 0;
}

/* ============================================================
   L'APERTURA CHE SI COMPONE
   Le righe salgono una dopo l'altra e la vetrina arriva per ultima,
   con mezzo grado di rotazione che si raddrizza: sembra posata sul
   tavolo, non caricata da un sito. Poi, a pagina ferma, la barra
   della gap analysis si riempie: è il solo dettaglio che si muove
   dentro l'illustrazione, e dice che quelle non sono figure ma
   schermate di una cosa che funziona.

   Niente JavaScript: l'apertura è già a schermo al caricamento,
   quindi bastano i ritardi. L'ordine delle righe sta su --r nel
   markup, non in un :nth-child, così regge se un domani si sposta
   o si aggiunge una riga.
   ============================================================ */
.pd-hero .pd-sale{
  opacity:0;
  animation:pd-sale .62s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(var(--r, 1) * .11s);
}
@keyframes pd-sale{
  from{ opacity:0; transform:translateY(14px) }
  to{ opacity:1; transform:none }
}

.pd-hero-vetrina{ position:relative; opacity:0; animation:pd-posa .9s cubic-bezier(.2,.7,.3,1) .3s forwards; }
@keyframes pd-posa{
  from{ opacity:0; transform:translateY(26px) rotate(-.6deg) scale(.985) }
  to{ opacity:1; transform:none }
}

/* Il coperchio sta sopra la barra verde e si ritira verso destra.
   Prima che l'animazione parta è fermo dov'è, quindi la barra si vede
   vuota: è quello che deve succedere. Le misure sono in percentuale del
   riquadro dell'immagine — se l'illustrazione cambia, vanno rimisurate. */
.pd-gap-copri{
  position:absolute; z-index:1; pointer-events:none;
  left:50.4%; top:30.6%; inline-size:32.6%; block-size:1.4%;
  background:#ffffff; transform-origin:right center;
  animation:pd-riempi 1.1s cubic-bezier(.4,.6,.2,1) 1.25s forwards;
}
@keyframes pd-riempi{ from{ transform:scaleX(1) } to{ transform:scaleX(0) } }

/* Chi ha chiesto meno movimento al sistema non ne riceve: le righe
   restano dove sono e il coperchio sparisce, altrimenti resterebbe lì
   a coprire la barra per sempre. */
@media (prefers-reduced-motion: reduce){
  .pd-hero .pd-sale, .pd-hero-vetrina{
    animation:none; opacity:1; transform:none;
  }
  .pd-gap-copri{ display:none; }
}

/* ============================================================
   IL BLOG — indice
   Le copertine sono illustrazioni a colori pieni, di una famiglia
   diversa dai doodle teal del resto del sito. Non si prova a
   farle assomigliare: si dà loro un raggio e si lascia che siano
   la nota di colore di una pagina altrimenti tutta testo.
   ============================================================ */
.pd-bl-testata img{ inline-size:100%; block-size:auto; border-radius:14px; }
.pd-bl-griglia .wp-block-post{ display:flex; flex-direction:column; }
.pd-bl-griglia .wp-block-post-featured-image{ margin:0 0 18px; }
.pd-bl-griglia .wp-block-post-featured-image img{ border-radius:12px; inline-size:100%; block-size:auto; }
.pd-bl-cat{
  font-family:var(--wp--preset--font-family--display);
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro); margin:0 0 8px;
}
.pd-bl-cat a{ text-decoration:none; }
.pd-bl-titolo{ font-size:21px; line-height:1.25; margin:0 0 10px; }
.pd-bl-titolo a{ color:inherit; text-decoration:none; }
.pd-bl-titolo a:hover{ color:var(--wp--preset--color--teal-scuro); }
.pd-bl-somm{
  font-size:16px; line-height:1.6; color:var(--wp--preset--color--grigio-testo);
  margin:0 0 14px;
}
.pd-bl-somm .wp-block-post-excerpt__more-text{ display:none; }
.pd-bl-data{ margin:auto 0 0; color:#93a1a8; }

/* ============================================================
   IL BLOG — l'articolo
   Due colonne: il pezzo a sinistra, l'indice dei capitoli
   appiccicato a destra. L'indice lo genera un mu-plugin dai titoli
   h2, quindi non va scritto a mano e non si disallinea dal testo.
   ============================================================ */
.pd-articolo .wp-block-post-featured-image{ margin:0 0 34px; }
.pd-articolo .wp-block-post-featured-image img{ border-radius:14px; inline-size:100%; block-size:auto; }

.pd-art-colonne{ display:grid; grid-template-columns:minmax(0,1fr) 268px; gap:60px; align-items:start; }
@media (max-width:980px){ .pd-art-colonne{ grid-template-columns:1fr; gap:34px; } }
.pd-art-colonne > *{ margin-block-start:0; }

.pd-art-indice{
  position:sticky; top:106px;
  border:1px solid var(--pd-filetto-forte); border-radius:16px;
  background-image:var(--pd-velatura); background-color:#ffffff;
  padding:22px 20px;
}
@media (max-width:980px){ .pd-art-indice{ position:static; } }
.pd-art-indice-cap{
  margin:0 0 12px; font-family:var(--wp--preset--font-family--display);
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--wp--preset--color--teal-scuro);
}
.pd-art-indice a{
  display:block; padding:8px 0; border-top:1px solid var(--pd-filetto);
  font-size:14.5px; line-height:1.35; color:var(--wp--preset--color--inchiostro);
  text-decoration:none;
}
.pd-art-indice a:first-of-type{ border-top:0; }
.pd-art-indice a:hover{ color:var(--wp--preset--color--teal-scuro); }

/* la riga dell'autore */
.pd-art-firma{
  display:flex; align-items:center; gap:14px;
  padding-block:16px; border-block:1px solid var(--pd-filetto); margin-bottom:0;
}
.pd-art-firma .wp-block-image, .pd-art-firma figure{ margin:0; flex:none; }
.pd-art-firma img{ inline-size:44px; block-size:44px; border-radius:50%; object-fit:cover; }
.pd-art-firma p{ margin:0; font-size:14.5px; line-height:1.4; }

/* Dentro un articolo i titoli di sezione vanno sul teal scuro, non
   sull'inchiostro delle pagine: in un testo lungo scandiscono la lettura,
   e il teal li stacca senza pesare come il quasi-nero. Il titolo
   dell'articolo resta inchiostro: è di un altro livello. */
.pd-art-testo h2, .pd-art-testo h3{ color:var(--wp--preset--color--teal-scuro); }
.pd-art-testo h2{ margin:44px 0 14px; }
.pd-art-testo h3{ margin:30px 0 10px; }
.pd-art-testo p, .pd-art-testo ul, .pd-art-testo ol{ margin-bottom:18px; }
.pd-art-testo li{ margin-bottom:8px; line-height:1.6; }
/* il sommario in apertura stava appoggiato al filetto della firma */
.pd-art-firma + .wp-block-post-content > p:first-child,
.pd-art-testo > p:first-child{ margin-top:26px; }