/* Medyca — la pagina di un articolo del blog (il modello per i 16 articoli)
   Si carica DOPO stile.css e usa il suo linguaggio: variabili, raggi 8/24, pillole, filetti var(--filo), solo i
   colori del sistema, niente ombre. Qui stanno solo i pezzi che stile.css non ha: la colonna di lettura, la
   testata sobria su bianco, le figure e le infografiche, gli elenchi, i blocchi in fondo all'articolo.
   Dal 30.10.2026 (iterazione 5, decisa il 28-29.10): il mini invito in alto (3d) e la fine dell'articolo
   in un altro ordine (7-8): riquadro di prenotazione, presentazione di Medyca, scheda dell'autore con la foto grande,
   «Scopri di più», fonti; dopo, solo «Indietro / Avanti».

   Misure (ricerca su Refero: Flo, Medium, Substack — è lettura lunga e il cliente ha insistito sul carattere):
   colonna unica; telefono corpo 16px / 1,7, titolo 24, capitoli 20 con 48 sopra e 12 sotto; da 64em corpo 18px / 1,7
   in 640px (come il resto del sito), titolo 40, capitoli 26. Fra i capoversi una riga vuota (1,25em, come nel sistema). I prefissi art-
   evitano scontri quando i pezzi passano nel foglio comune. */

/* ---------- 1. Misure dell'articolo ---------- */
:root {
  --art-corpo: 1rem;        /* 16px */
  --art-attacco: 1.125rem;  /* 18px: il primo capoverso è un filo più grande del resto */
  --art-titolo: 1.5rem;     /* 24px */
  --art-h2: 1.25rem;        /* 20px */
  --art-h3: 1.0625rem;      /* 17px */
  --art-lh: 1.7;
}
/* Il corpo è quello del sistema: 16 / 17 / 18px, mai oltre (il cliente ha trovato il carattere «troppo grosso» soprattutto
   nel blog; il primo disegno dell'articolo arrivava a 19 da desktop). I capitoli restano poco più grandi del testo. */
@media (min-width: 52em) {
  :root { --art-corpo: 1.0625rem; --art-attacco: 1.1875rem; --art-titolo: 2rem; --art-h2: 1.5rem; --art-h3: 1.1875rem; }
}
@media (min-width: 64em) {
  :root { --art-corpo: 1.125rem; --art-attacco: 1.25rem; --art-titolo: 2.5rem; --art-h2: 1.625rem; --art-h3: 1.25rem; }
}

/* ---------- 2. La colonna ---------- */
/* una colonna sola, al centro: 40rem (640px) da tablet in su; su telefono è tutta la larghezza meno i margini */
.art-colonna { max-width: var(--colonna); margin-inline: auto; }

/* ---------- 3. Testata dell'articolo: su bianco, sobria ---------- */
/* nell'ordine: titolo; categoria, data, «Scritto da» e l'autore (qui con la sua foto piccola) */
.art-testata { padding-block: 2rem 0; }
.art-titolo { font-size: var(--art-titolo); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.art-titolo::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: 12px; border-radius: 2px; background: var(--rosso); }
@media (min-width: 64em) { .art-testata { padding-top: 3rem; } .art-titolo::before { width: 3rem; margin-bottom: 1rem; } }
.art-data { white-space: nowrap; }
/* l'etichetta (passo e tema, in testa sotto la firma): una pillola azzurra che si vede alta 32px e si tocca alta 48px */
.art-etichetta { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; }
.art-etichetta > span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--cielo); font-size: var(--piccolo); line-height: 1.2; font-weight: 700; }
.art-etichetta:hover > span { background: var(--navy); color: #fff; }
/* il fuoco da tastiera sta sulla pillola che si vede (32px), non sul riquadro di 48px che si tocca */
.art-etichetta:focus-visible { outline: 0; }
.art-etichetta:focus-visible > span { outline: 3px solid var(--navy); outline-offset: 3px; }
/* il passo ha il disegno della sua card grande: navy, il numero rosso in un cerchio bianco; il tema resta azzurro */
.art-etichetta--passo > span { gap: .5rem; padding-left: 3px; background: var(--navy); color: #fff; }
.art-passo-numero { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--rosso); font-size: .875rem; line-height: 1; font-weight: 800; }   /* 14px: niente testo più piccolo nel sito */
.art-etichetta--passo:hover > span { background: var(--navy-scuro); }

/* ---------- 3b. La firma in testa ---------- */
/* La firma: il viso (o i visi, con due autori) in un cerchio, «Scritto da» e il nome, che porta al profilo; sotto, più piccole,
   la data e la categoria. */
.art-firma { display: flex; align-items: center; gap: .875rem; margin-top: 1.25rem; }
.art-visi { display: flex; flex: none; }
.art-visi .art-viso + .art-viso { margin-left: -12px; }
/* le firme a più autori hanno i visi affiancati e, su telefono stretto (sotto i 480px circa), uno sopra l'altro: così i due nomi
   hanno più riga */
@media (max-width: 29.99em) { .art-visi { flex-direction: column; gap: 6px; } .art-visi .art-viso + .art-viso { margin-left: 0; } .art-visi:has(.art-viso + .art-viso) .art-viso { width: 44px; height: 44px; } }
/* il viso: la foto, più grande del cerchio e spostata sul viso (le tre misure dicono quanto e dove, per ogni persona) */
.art-viso { position: relative; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: var(--cielo); box-shadow: 0 0 0 2px var(--bianco), 0 0 0 3px var(--filo); }
.art-viso img { position: absolute; left: var(--vx, 0); top: var(--vy, 0); width: var(--vz, 100%); max-width: none; height: auto; }
.art-viso--lenzi { --vz: 230%; --vx: -81%; --vy: -72%; }
.art-viso--stella { --vz: 160%; --vx: -27%; --vy: -22%; }
.art-viso--sarzani { --vz: 180%; --vx: -37%; --vy: -26%; }
.art-firma-testo { min-width: 0; }
.art-firma-chi { font-size: 1rem; line-height: 1.4; font-weight: var(--peso-testo); }
.art-firma-chi a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.art-firma-quando { margin-top: .125rem; font-size: var(--piccolo); line-height: var(--piccolo-lh); font-weight: var(--peso-testo); }
/* sotto la firma il passo e il tema, come pillole */
.art-tags--testa { display: flex; flex-wrap: wrap; column-gap: .5rem; margin-top: .5rem; }

/* ---------- 3c. L'indice «In questo articolo»: le àncore ai capitoli ---------- */
/* L'indice dei capitoli. Su telefono e
   tablet è una riga di fisarmonica sotto la firma, chiusa: si apre, mostra i capitoli, e scelto un capitolo si richiude.
   Da 75em sta a sinistra del testo, aperto, e resta fermo mentre si legge; il capitolo che si sta leggendo ha la barretta
   rossa. Così a desktop la colonna di lettura non ha più mezzo schermo vuoto per lato. */
/* le àncore saltano, non scorrono: lo scorrimento morbido confonde chi legge (deciso il 14.10.2026) */
.art-corpo h2 { scroll-margin-top: 1.5rem; }
/* L'indice dei capitoli anche su telefono (deciso il 14.10.2026). Sotto i 75em l'indice parte chiuso sotto la firma e,
   superato il suo posto, resta fermo in cima (sticky) come una barra bianca da bordo a bordo, col capitolo che si sta
   leggendo al posto di «In questo articolo»; toccandola l'elenco scende sopra il testo, senza spostarlo, e scorrendo la
   pagina si richiude (lo fa lo script). Aperto prima, al suo posto, sta nella pagina e scorre con lei: uscito dallo schermo
   lo script lo richiude e ferma la barra. La classe
   .ferma la mette lo script dell'articolo, che scrive anche il capitolo corrente. */
.art-indice-corrente { display: none; min-width: 0; }
@media (max-width: 74.99em) {
  .articolo { overflow-x: clip; }   /* il fondo della barra arriva ai bordi dello schermo: oltre non si scorre */
  .art-corpo h2 { scroll-margin-top: 4.5rem; }
  .art-lettura > .art-indice { position: sticky; top: 0; z-index: 20; background: var(--bianco); }
  .art-lettura > .art-indice:not(.ferma):has(details[open]) { position: relative; }   /* aperto al suo posto scorre col testo */
  .art-indice.ferma::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--bianco); border-bottom: 1px solid var(--filo); }
  .art-indice.ferma details { border-color: transparent; }
  .art-indice.ferma summary > span:first-child, .art-indice-corrente { min-width: 0; }
  .art-indice.ferma.con-capitolo .art-indice-titolo { display: none; }
  .art-indice.ferma.con-capitolo .art-indice-corrente { display: block; }
  .art-indice-corrente small { display: block; font-size: var(--piccolo); line-height: 1.3; font-weight: var(--peso-testo); }
  .art-indice-corrente b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
  .art-indice.ferma ol {
    position: absolute; top: 100%; left: calc(50% - 50vw); right: calc(50% - 50vw); max-height: calc(100dvh - 6rem); overflow-y: auto;
    padding: .25rem max(var(--margine), calc(50vw - 20rem)) 1rem; background: var(--bianco); border-bottom: 1px solid var(--filo);
  }
  .art-indice li a[aria-current] { font-weight: 800; }
  .art-indice li a[aria-current]::before { content: ""; flex: none; width: 4px; height: 1.25em; margin-right: .625rem; border-radius: 2px; background: var(--rosso); }
}
.art-lettura > .art-indice { max-width: var(--colonna); margin: 1.75rem auto 0; }
.art-indice details { border-block: 1px solid var(--filo); }
.art-indice summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; list-style: none; cursor: pointer; font-size: 1rem; line-height: 1.4; font-weight: 700; }
.art-indice summary::-webkit-details-marker { display: none; }
.art-indice details[open] .piu::after { opacity: 0; }
.art-indice ol { padding-bottom: .75rem; }
.art-indice li a { display: flex; align-items: center; min-height: 48px; padding-block: .375rem; font-size: 1rem; line-height: 1.45; font-weight: 600; text-decoration: none; }
.art-indice li + li a { border-top: 1px solid var(--filo); }
@media (hover: hover) { .art-indice li a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; } }
@media (min-width: 75em) {
  .art-lettura { display: grid; grid-template-columns: 15rem minmax(0, 40rem); column-gap: 4rem; justify-content: center; align-items: start; }
  /* la colonna resta ferma mentre si legge. L'indice può essere lungo (fino a 13 capitoli, di due o tre righe): l'elenco scorre dentro
     il suo spazio (è <details> a scorrere, col titolo fermo in cima) e il mini invito resta fisso in fondo, sempre a vista (solo
     un utente su sette arriva in fondo). Il nav resta figlio diretto di .art-lettura: sotto i 75em lo sticky della barra dipende da questo. */
  .art-lettura > .art-indice { position: sticky; top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; max-width: none; max-height: calc(100vh - 4rem); margin: 2.5rem 0 0; }
  .art-lettura > .art-corpo { margin-inline: 0; }
  /* titolo e fine dell'articolo stanno in asse con la colonna del testo, non al centro della pagina */
  .art-testata .art-colonna, .art-fine .art-colonna { margin-inline: calc((100% - 59rem) / 2 + 19rem) 0; }
  /* il margine negativo e il padding uguale lasciano posto al contorno del fuoco da tastiera (che lo scorrimento taglierebbe) senza spostare niente */
  /* in fondo l'elenco sfuma: se è più lungo del suo spazio si capisce che continua, invece di sembrare tagliato a metà riga */
  .art-indice details { flex: 0 1 auto; min-height: 0; margin: 0 -.5rem -1.5rem; padding: 0 .5rem 1.5rem; overflow-y: auto; border: 0; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent); }
  .art-indice summary { position: sticky; top: 0; z-index: 1; min-height: 0; padding-bottom: .875rem; background: var(--bianco); font-size: var(--piccolo); cursor: default; pointer-events: none; }
  .art-indice summary .piu { display: none; }
  .art-indice ol { padding: 0; border-left: 2px solid var(--filo); }
  .art-indice li a { min-height: 0; margin-left: -2px; padding: .5rem 0 .5rem 1rem; border-left: 2px solid transparent; font-size: var(--piccolo); line-height: 1.45; }
  .art-indice li + li a { border-top: 0; }
  .art-indice li a[aria-current] { border-left-color: var(--rosso); font-weight: 700; }
}

/* ---------- 3d. Il mini invito in alto ---------- */
/* Solo un utente su sette arriva in fondo all'articolo (deciso il 28-29.10.2026; il modello è il riquadro «Could this be your hormones?» di Marion
   Gluck): un riquadro piccolo, su fondo azzurro, col bottone rosso, solo negli articoli che hanno un passo. Ne esistono due copie nel
   markup, una per posto, e il CSS ne mostra una sola per larghezza: sotto i 75em sta nel testo, compatto, alla fine dell'introduzione (in
   testa c'è già il banner rosso, deciso il 30.10.2026); da 75em sta nella colonna dell'indice, sotto l'elenco (vedi 3c), e resta a vista scorrendo. Negli
   articoli senza indice (.articolo--senza-indice) non c'è la colonna: la copia nel testo resta a ogni larghezza. */
.art-invito-alto { display: grid; gap: .375rem; margin-top: .75rem; padding: 1rem; border-radius: var(--raggio-grande); background: var(--cielo); }
.art-corpo > .art-invito-alto--testa { margin-top: 2rem; }
.art-invito-alto-titolo { font-size: 1rem; line-height: 1.35; font-weight: 700; }
.art-invito-alto-riga { font-size: var(--piccolo); line-height: var(--piccolo-lh); font-weight: var(--peso-testo); }
.art-invito-alto .bottone { display: flex; width: 100%; min-width: 0; min-height: 48px; margin-top: .5rem; padding: 10px 16px; font-size: 1rem; }
/* da tablet la copia in testa è una riga: le parole a sinistra, il bottone a destra (largo quanto la sua scritta) */
@media (min-width: 44em) {
  .art-invito-alto--testa { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; padding: 1rem 1.25rem 1rem 1.5rem; }
  .art-invito-alto--testa .art-invito-alto-titolo, .art-invito-alto--testa .art-invito-alto-riga { grid-column: 1; }
  .art-invito-alto--testa .bottone { grid-column: 2; grid-row: 1 / span 2; width: auto; margin-top: 0; }
}
.art-invito-alto--lato { display: none; }
@media (min-width: 75em) {
  .art-invito-alto--lato { display: grid; flex: none; margin-top: 0; }      /* nei 240px della colonna il bottone va su due righe («Prenota una» / «consulenza gratuita»), non su tre */
  .art-invito-alto--lato .bottone .et { text-wrap: wrap; }      /* «Book a free» / «consultation», non «Book a» / «free consultation» */
  .articolo:not(.articolo--senza-indice) .art-invito-alto--testa { display: none; }
}

/* ---------- 4. Il testo: corpo, attacco, capitoli, sottotitoli ---------- */
.art-corpo { margin-top: 2rem; font-size: var(--art-corpo); line-height: var(--art-lh); font-weight: var(--peso-testo); }
.art-corpo > * + * { margin-top: 1.25em; }
.art-attacco { font-size: var(--art-attacco); line-height: 1.6; }

/* capitolo: 48px sopra, 12 sotto, barretta rossa del sistema sopra il titolo */
.art-corpo h2 { margin-top: 3rem; font-size: var(--art-h2); line-height: 1.3; font-weight: 700; }
.art-corpo h2::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 12px; border-radius: 2px; background: var(--rosso); }
.art-corpo h2 + * { margin-top: .75rem; }
/* sottotitolo: più piccolo del capitolo, senza barretta */
.art-corpo h3 { margin-top: 2rem; font-size: var(--art-h3); line-height: 1.35; font-weight: 700; }
.art-corpo h3 + * { margin-top: .5rem; }
.art-corpo h2 strong, .art-corpo h3 strong { font-weight: 800; }

/* elenchi: pallino navy, voci vicine, il rientro è piccolo perché la colonna è stretta */
.art-corpo ul { display: grid; gap: .5em; padding-left: 1.25rem; }
.art-corpo li { position: relative; }
.art-corpo li::before { content: ""; position: absolute; left: -1.125rem; top: calc(.85em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
.art-corpo p + ul { margin-top: .75em; }

/* il filetto fra le parti (le «linee di separazione») */
.art-corpo hr { height: 0; margin: 3rem 0 0; border: 0; border-top: 1px solid var(--filo); }
/* il titolo di un capitolo ha già il suo trattino: una riga in più davanti a lui si vede solo in alcuni capitoli, senza motivo (QA, 02.11.2026) */
.art-corpo hr:has(+ h2) { display: none; }
.art-corpo hr + * { margin-top: 3rem; }

/* ---------- 5. Figure: foto con didascalia e infografiche ---------- */
/* le infografiche: larghe quanto la colonna, intere (mai ritagliate), angoli a 24px;
   il filetto serve perché il loro sfondo è quasi bianco */
.art-corpo .art-fig { margin-top: 2rem; }
.art-corpo .art-fig + * { margin-top: 2rem; }
.art-fig img { width: 100%; height: auto; border-radius: var(--raggio-grande); background: var(--cielo); }
.art-fig--info img { border: 1px solid var(--filo); }
/* A tutta colonna (640px) le infografiche verticali diventano più alte dello schermo (deciso il 31.10.2026). Fuori dal telefono massimo 480px,
   al centro della colonna; su telefono restano a tutta colonna */
@media (min-width: 37.5em) { .art-fig--info { max-width: 30rem; margin-inline: auto; } }
.art-fig--foto img { aspect-ratio: 3 / 2; object-fit: cover; }
.art-fig--alta img { aspect-ratio: 1 / 1; object-position: 52% 32%; }
.art-fig figcaption { margin-top: .75rem; font-size: var(--piccolo); line-height: var(--piccolo-lh); font-style: italic; font-weight: var(--peso-testo); }
@media (min-width: 52em) { .art-fig--alta img { aspect-ratio: 5 / 4; object-position: 52% 22%; } }
/* fra figura e titolo: sopra un capitolo 48px, sotto un capitolo 16 e sotto un sottotitolo 8 */
.art-corpo .art-fig + h2 { margin-top: 3rem; }
.art-corpo h2 + .art-fig { margin-top: 1rem; }
.art-corpo h3 + .art-fig { margin-top: .5rem; }

/* le domande frequenti: aperte, ognuna con il suo filetto sopra */
.art-corpo .art-domanda { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--filo); }

/* ---------- 6. Inviti e bottoni dentro il testo ---------- */
/* la riga in corsivo e il bottone sono un blocco solo (come .invito del sistema); il testo prende il corpo dell'articolo */
.art-corpo .invito { margin-top: 2.5rem; }
.art-corpo .invito-testo { margin-top: 0; font-size: var(--art-corpo); line-height: var(--art-lh); }
.art-corpo > .bottone { margin-top: 2.5rem; }

/* «Scopri di più:» e i tre articoli: righe con filetto, il titolo intero come link (non sono card) */
.art-corpo .art-scopri { margin-top: 3rem; font-weight: 700; }
.art-corpo .art-scopri + ul { display: block; margin-top: .5rem; padding: 0; border-top: 1px solid var(--filo); }
.art-correlati li { border-bottom: 1px solid var(--filo); }      /* l'ultima riga chiude la lista: sotto ci sono le fonti, non più una linea di separazione */
.art-corpo .art-correlati li::before { display: none; }
.art-correlati a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 14px 0; font-size: 1rem; line-height: 1.45; font-weight: 600; text-decoration: none; }
.art-correlati a:hover span { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
.art-correlati .icona { width: 22px; height: 22px; }

/* ---------- 7. La fine del testo: il riquadro di prenotazione e la presentazione di Medyca ---------- */
/* Deciso il 28-29.10.2026. In fondo, in quest'ordine: 1. il riquadro di prenotazione (l'ultimo paragrafo, la riga sul prossimo passo in
   grassetto, i due bottoni), che chiude il testo; poi, nello stesso blocco di lettura ma fuori dalla colonna dell'indice (.art-fine, 8):
   2. la presentazione di Medyca, senza bottone e senza riquadro; 3. la scheda dell'autore; 4. «Scopri di più» (6); 5. le fonti (9c);
   per ultimi «Indietro / Avanti». Il riquadro è su fondo azzurro con il raggio grande; il bottone principale è rosso, il secondario
   bianco col filo navy (quelli del sistema). Uno sopra l'altro a ogni larghezza e larghi quanto il riquadro: due bottoni da 22rem non
   stanno affiancati nei 576px del riquadro. Il riquadro è l'ultima cosa della colonna dell'indice: la barra dei capitoli su telefono e il
   mini invito sul fianco da computer finiscono lì, dove il testo è finito. */
.art-corpo > .art-prenota { margin-top: 2.5rem; }
.art-prenota { padding: var(--scheda); border-radius: var(--raggio-grande); background: var(--cielo); }
.art-prenota > * + * { margin-top: 1.25em; }
/* il titolo che apre l'ultimo paragrafo se ne va con lui (in tiroide è una domanda frequente, «Da dove partire»: niente filetto sopra) */
.art-corpo .art-prenota > h2, .art-corpo .art-prenota > h3, .art-corpo .art-prenota > h4 { margin-top: 0; padding-top: 0; border-top: 0; }
.art-corpo .art-prenota > h2 + *, .art-corpo .art-prenota > h3 + *, .art-corpo .art-prenota > h4 + * { margin-top: .75rem; }
.art-prenota > .art-prenota-passo { margin-top: 1.5rem; font-size: var(--art-attacco); line-height: 1.45; }
.art-prenota > .art-prenota-bottoni { display: grid; gap: .75rem; margin-top: 1.25rem; }
.art-prenota-bottoni .bottone { min-width: 0; padding-inline: 1rem; }   /* la scritta ha bisogno di spazio: «Discover the Bioidentical Hormone Pathway» resta su 2 righe a 360px */
/* la presentazione di Medyca sta sul bianco (due riquadri azzurri di fila no): dopo la scheda dell'autore, o, dove la scheda non c'è,
   staccata dal riquadro azzurro con un filetto */
.art-medyca .art-logo { width: auto; height: 32px; margin-bottom: 1.25rem; }
.art-medyca p + p { margin-top: 1em; }

/* ---------- 8. La scheda dell'autore e, dopo il testo, precedente e successivo ---------- */
/* Dopo il testo: la scheda dell'autore, la presentazione di Medyca, «Scopri di più», le fonti e «Indietro / Avanti». Stanno nella stessa
   colonna di lettura (la colonna porta anche la classe art-corpo: stessi capoversi, filetti, elenchi e fonti, senza ripetere le regole);
   la colonna dell'indice e la sua barra su telefono sono già finite. Il primo pezzo prende il suo stacco (3rem), come i pezzi seguenti. */
.art-fine { padding-bottom: var(--sezione); }
.art-fine .art-corpo { margin-top: 0; }
.art-fine .art-corpo > :first-child { margin-top: 3rem; }
.art-corpo > .art-vicini { margin-top: 3rem; }

/* commenti: gli articoli non ne hanno */

/* la firma in fondo: chi ha scritto l'articolo. La foto dell'autore è grande, perché la persona si veda bene (deciso il 28-29.10.2026).
   È una scheda navy, come l'apertura e il
   footer: ha la classe su-navy, quindi la croce in alto a destra e i bottoni sul navy vengono dal foglio comune. Dentro: la foto, grande e
   a ritratto (4:5, raggio grande, filo bianco), il nome e il bottone bianco che porta al profilo. Su telefono la foto sta in alto, larga il
   40% della colonna (non della scheda: 24px per lato sono già dentro), poi il nome e il bottone; da 37,5em è di 160px accanto al nome, col
   bottone sotto. Con due autori, due righe divise da un filetto chiaro. Tutte le schede hanno il loro testo breve (--testo; i profili degli autori sono allineati,
   deciso il 01.11.2026): la Dr.ssa Lenzi una descrizione uguale su tutti gli articoli; gli articoli che nel testo hanno le schede
   delle persone (foto, nome e testo) le mettono al posto di questa scheda, così le stesse facce non compaiono due volte. Chi non è una persona («Medyca») non ha la scheda. */
.art-corpo > hr:last-child { display: none; }
.art-corpo > .art-autori, .art-corpo > .art-autori + .art-medyca { margin-top: 3rem; }
.art-corpo .art-correlati + p { margin-top: 2rem; }      /* la nota che introduce le fonti (TOS, nomi dei farmaci) */
.art-autori { position: relative; overflow: hidden; padding: 1.5rem; border-radius: var(--raggio-grande); background: var(--navy); color: #fff; }
.art-autori > * { position: relative; z-index: 1; }
.art-autore-riga { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: 1rem; }
.art-autore-riga + .art-autore-riga { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filo-su-navy); }
.art-autore-foto { display: block; width: min(calc((100vw - 2 * var(--margine)) * .4), 10rem); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raggio-grande); background: var(--cielo); box-shadow: 0 0 0 3px #fff; }
.art-autore-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.art-autore-testo { min-width: 0; }
.art-autore-nome { font-size: 1.25rem; line-height: 1.3; font-weight: 700; text-wrap: balance; }
.art-autore-descrizione { margin-top: .75rem; font-size: 1rem; line-height: 1.6; }
.art-autore-descrizione p + p { margin-top: 1em; }
.art-autore-profilo { width: 100%; }   /* telefono: il bottone sotto, largo quanto la scheda */
.art-autore-profilo.bottone { min-height: 48px; padding: 10px 24px; font-size: 1rem; }
@media (min-width: 37.5em) {
  .art-autori { padding: 2rem; }
  /* da tablet la foto a sinistra (160px) e, accanto, il nome con il bottone sotto: il nome sta su una riga anche quando è lungo o gli autori sono due */
  .art-autore-riga { grid-template-columns: 10rem minmax(0, 1fr); align-items: center; column-gap: 1.5rem; row-gap: .875rem; }
  .art-autore-riga > .art-autore-foto { grid-row: 1 / span 2; width: 10rem; }
  .art-autore-riga > .art-autore-testo { align-self: end; }
  .art-autore-profilo { grid-column: 2; justify-self: start; align-self: start; width: auto; }
  .art-autore-nome { font-size: 1.375rem; }
  /* con il testo (le schede delle persone) niente colonna stretta accanto al ritratto: in cima la foto e il nome, sotto il testo largo quanto
     la scheda (60-70 battute per riga), poi il bottone */
  .art-autore-riga--testo > .art-autore-testo { display: contents; }
  .art-autore-riga--testo .art-autore-foto { grid-row: 1; }
  .art-autore-riga--testo .art-autore-nome { grid-row: 1; grid-column: 2; align-self: center; }
  .art-autore-riga--testo .art-autore-descrizione { grid-row: 2; grid-column: 1 / -1; margin-top: 0; }
  .art-autore-riga--testo .art-autore-profilo { grid-row: 3; grid-column: 1 / -1; }
}
@media (min-width: 44em) {
  /* appena la colonna è larga abbastanza il testo parte a destra della foto, col nome in cima, allineato al bordo alto della foto */
  .art-autore-riga--testo { align-items: start; }
  .art-autore-riga--testo .art-autore-foto { grid-row: 1 / span 2; }
  .art-autore-riga--testo > .art-autore-testo { display: block; grid-row: 1; grid-column: 2; align-self: start; }
  .art-autore-riga--testo .art-autore-descrizione { margin-top: .75rem; }
  .art-autore-riga--testo .art-autore-profilo { grid-row: 2; grid-column: 2; }
}

.art-vicini { display: grid; gap: 0; border-top: 1px solid var(--filo); }
.art-vicino { display: grid; gap: .375rem; align-content: start; padding-block: 1.25rem; border-bottom: 1px solid var(--filo); text-decoration: none; }
.art-vicino-et { display: inline-flex; align-items: center; gap: .5rem; min-height: 24px; font-size: var(--piccolo); line-height: 1.3; font-weight: 700; }
.art-vicino-et .icona { width: 20px; height: 20px; }
.art-vicino:not(.art-vicino--avanti) .art-vicino-et .icona { transform: scaleX(-1); }
.art-vicino-titolo { font-size: 1.0625rem; line-height: 1.45; font-weight: 700; }
.art-vicino:hover .art-vicino-titolo { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
@media (min-width: 52em) {
  .art-vicini { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; border-top: 0; }
  .art-vicino { border-top: 1px solid var(--filo); border-bottom: 0; }
  .art-vicino--avanti { text-align: right; }
  .art-vicino--avanti .art-vicino-et { justify-content: flex-end; }
}

/* ======================================================================================================================
   9. Quello che hanno gli articoli più strutturati
   Alcuni articoli hanno anche: tabelle, titoli di quarto livello, elenchi numerati, l'elenco
   delle fonti, le persone in fondo al testo, il riquadro su Medyca con la foto. Solo il linguaggio del sistema: variabili,
   raggi 8/24, filetti var(--filo), niente ombre, niente colori nuovi, testo mai sotto i 14px.
   ====================================================================================================================== */

/* il primo elemento del testo non ha il margine di un elemento in mezzo (c'è già lo spazio sotto la firma) */
.art-corpo > :first-child { margin-top: 0; }
/* due bottoni di fila: più vicini fra loro che al testo */
.art-corpo > .bottone + .bottone { margin-top: 1rem; }

/* ---------- 9a. Titoli di quarto livello, citazioni ---------- */
/* un h4 è una frase di apertura o di chiusura, non un capitolo: grande come l'attacco, in grassetto, senza barretta */
.art-corpo h4 { margin-top: 2rem; font-size: var(--art-attacco); line-height: 1.5; font-weight: 700; text-wrap: balance; }
.art-corpo h4 + * { margin-top: .75rem; }
.art-corpo h4 + h2 { margin-top: 2.5rem; }
.art-corpo h4 strong { font-weight: 800; }
/* una citazione: la barretta rossa a sinistra (le citazioni del sistema) */
.art-corpo blockquote { padding-left: 1.25rem; border-left: 4px solid var(--rosso); }

/* ---------- 9b. Elenchi numerati ---------- */
/* il numero di una voce è quello del passo di stile.css: rosso, in un cerchio (il rosso resta un accento, il testo è navy) */
.art-corpo ol { display: grid; gap: .875em; padding: 0; counter-reset: voce; }
.art-corpo p + ol { margin-top: .75em; }
.art-corpo ol > li { position: relative; min-height: 2rem; padding-left: 3rem; counter-increment: voce; }
.art-corpo ol > li::before {
  content: counter(voce); left: 0; top: calc((var(--art-corpo) * 1.7 - 2rem) / 2); display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1.5px solid var(--rosso); border-radius: 50%; background: var(--bianco); color: var(--rosso);
  font-size: 1rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- 9c. Le fonti ---------- */
/* per ultime (deciso il 29.10.2026): dopo «Scopri di più» e, negli articoli che le hanno, dopo la nota che le introduce */
.art-corpo .art-fonti-titolo { margin-top: 3rem; }
/* un solo aspetto: dove il titolo delle fonti è un h3 sembra un h2 come negli altri articoli */
.art-corpo h3.art-fonti-titolo { font-size: var(--art-h2); line-height: 1.3; font-weight: 700; }
.art-corpo h3.art-fonti-titolo::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 12px; border-radius: 2px; background: var(--rosso); }
.art-corpo h3.art-fonti-titolo + * { margin-top: .75rem; }
/* in piccolo (14px), ogni fonte è una riga con un filetto; se la lista è numerata, il numero è in grassetto a sinistra
   (come le fonti di /menopausa-in-italia); se non lo è, resta senza numero */
.art-corpo .art-fonti { display: block; padding: 0; counter-reset: fonte; border-top: 1px solid var(--filo); font-size: var(--piccolo); line-height: 1.55; }
.art-corpo .art-fonti > li { position: relative; padding: .875rem 0; border-bottom: 1px solid var(--filo); overflow-wrap: anywhere; }
.art-corpo .art-fonti > li::before { display: none; }
.art-corpo ol.art-fonti > li { padding-left: 2.5rem; counter-increment: fonte; }
.art-corpo ol.art-fonti > li::before {
  content: counter(fonte) "."; display: block; left: 0; top: .875rem; width: 2rem; height: auto; border: 0; border-radius: 0; background: none;
  color: inherit; font-size: inherit; line-height: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- 9d. Tabelle ---------- */
/* Su telefono ogni riga è una scheda, senza scatola: il nome della riga in grassetto e sotto le sue voci, ognuna con
   l'etichetta della colonna in piccolo; le righe sono divise da un filetto e non c'è scorrimento di lato (come le tabelle di
   /menopausa-in-italia). L'intestazione resta nel codice per chi legge con lo schermo. Da 44em la colonna ha tutta la sua
   larghezza: le tabelle brevi (art-tabella--vera) tornano tabelle vere, con l'intestazione in piccolo e un filo navy sotto;
   quelle con molto testo (art-tabella--schede) restano schede, con le voci una accanto all'altra. */
.art-tabella { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.art-tabella, .art-tabella tbody, .art-tabella tr, .art-tabella th, .art-tabella td { display: block; }
.art-tabella thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.art-tabella th, .art-tabella td { padding: 0; text-align: left; font-weight: var(--peso-testo); text-wrap: pretty; }
.art-tabella tbody { border-bottom: 1px solid var(--filo); }
.art-tabella tr { padding-block: 1.25rem; border-top: 1px solid var(--filo); }
.art-tabella tbody th { font-size: 1.0625rem; line-height: 1.35; font-weight: 700; }
.art-tabella td { margin-top: .875rem; overflow-wrap: anywhere; }
.art-tabella tr > :first-child { margin-top: 0; }
.art-tabella td::before { content: attr(data-label); display: block; margin-bottom: .125rem; font-size: var(--piccolo); line-height: 1.4; font-weight: 700; }
.art-corpo .art-tabella { margin-top: 2rem; }
.art-corpo .art-tabella + * { margin-top: 2rem; }
.art-corpo .art-tabella + .art-nota { margin-top: .75rem; }
.art-corpo .art-nota { font-size: var(--piccolo); line-height: var(--piccolo-lh); }
@media (min-width: 44em) {
  .art-tabella--schede tbody tr { display: grid; column-gap: 1.5rem; row-gap: 1rem; }
  .art-tabella--schede.art-tabella--d2 tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-tabella--schede.art-tabella--d3 tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .art-tabella--schede.art-tabella--d4 tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-tabella--schede tbody th { grid-column: 1 / -1; }
  .art-tabella--schede td { margin-top: 0; }
  .art-tabella--vera { display: table; }
  .art-tabella--vera thead { display: table-header-group; position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .art-tabella--vera tbody { display: table-row-group; border: 0; }
  .art-tabella--vera tr { display: table-row; padding: 0; border: 0; }
  .art-tabella--vera th, .art-tabella--vera td { display: table-cell; margin: 0; padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--filo); overflow-wrap: normal; }
  .art-tabella--vera td::before { content: none; }
  .art-tabella--vera thead th { padding: 0 1.25rem .75rem 0; font-size: var(--piccolo); line-height: 1.4; font-weight: 700; vertical-align: bottom; border-bottom: 1.5px solid var(--navy); }
  .art-tabella--vera tbody th { font-size: 1rem; line-height: 1.5; font-weight: 700; }
  .art-tabella--vera tr > :last-child { padding-right: 0; }
}

/* ---------- 9e. Figure: le foto che si vedono intere, il logo ---------- */
/* un ritratto già tondo, i flaconi e le macchine del laboratorio: tagliati a 3:2 perderebbero metà dell'oggetto */
.art-fig--intera img { max-width: 24rem; background: none; }
@media (min-width: 37.5em) { .art-fig--intera { max-width: 24rem; margin-inline: auto; } }
/* una foto in piedi col soggetto in basso (la Dr.ssa davanti alla Torre, in /blog/doctors-in-siena): il ritaglio parte più giù */
.art-fig--alta.art-fig--basso img { object-position: 50% 80%; }
/* il logo di Medyca con la sua didascalia (in /blog/doctors-in-siena): il file del brand kit */
.art-fig--logo img { width: auto; height: 2.5rem; border-radius: 0; background: none; }

/* ---------- 9g. Articoli con un solo vicino, articoli senza indice ---------- */
/* il primo articolo non ha «Indietro», l'ultimo non ha «Avanti»: «Avanti» resta a destra */
@media (min-width: 52em) { .art-vicino--avanti:only-child { grid-column: 2; } }
/* senza l'indice (meno di tre capitoli) il testo non ha la colonna a sinistra: titolo, testo e fine tornano al centro */
@media (min-width: 75em) {
  .articolo--senza-indice .art-lettura { display: block; }
  .articolo--senza-indice .art-lettura > .art-corpo,
  .articolo--senza-indice .art-testata .art-colonna,
  .articolo--senza-indice .art-fine .art-colonna { margin-inline: auto; }
}

/* ---------- 9h. Sigle che non si spezzano ---------- */
/* «GLP-1», «Covid-19»: a capo dopo il trattino resterebbe «GLP-» in fondo a una riga e «1» all'inizio della successiva */
.art-nobr { white-space: nowrap; }