/* Medyca — /menopausa-in-italia (13.10.2026)
   Pagina di soli dati, lettura lunga: tre tabelle, elenchi di cifre, 41 fonti, nessuna immagine. Si legge come un articolo:
   testo a 40rem, corpo del sistema (16px su telefono, 18px da 64em) con interlinea 1,7, titoli contenuti, una riga vuota fra i
   capoversi. Stesso linguaggio di stile.css: variabili, raggi 8/24/40, filetti var(--filo), nessuna ombra, nessun colore nuovo.
   Qui ci sono solo i pezzi che stile.css non ha: l'apertura bassa, il riassunto, gli elenchi a righe, come stanno nel testo il
   listino dei sintomi e le tre tabelle, le fonti numerate. Il listino e le tabelle in sé sono pezzi comuni e stanno in stile.css. */

/* ---------- 1. Apertura bassa ---------- */
/* Oggi in cima c'è solo il titolo: la fascia navy è bassa e non si riempie. Barretta rossa sopra il titolo, come in home. */
:is(.dati-apertura):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { padding-block: 2.5rem 2.75rem; }
:is(.dati-apertura .h1):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *)::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: 1.25rem; border-radius: 2px; background: var(--rosso); }
@media (min-width: 64em) {
  :is(.dati-apertura):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { padding-block: 4rem 4.5rem; }
  :is(.dati-apertura .h1):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *)::before { width: 3.5rem; height: 5px; margin-bottom: 1.75rem; border-radius: 3px; }
}

/* ---------- 2. Il corpo dell'articolo ---------- */
/* Lettura lunga: interlinea 1,7 a ogni larghezza (il sistema scende a 1,65 da 64em: qui si resta a 1,7) */
:is(.dati-sezione):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { --corpo-lh: 1.7; line-height: var(--corpo-lh); }
/* ogni sezione sta a una distanza sola dalla precedente, nella stessa fascia */
:is(.dati-sezione + .dati-sezione):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: var(--sezione); }

/* il riassunto in cima: il testo di apertura e la data a sinistra, i cinque numeri a destra (da 64em) */
:is(.dati-inizio .attacco):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { max-width: var(--colonna); }
:is(.dati-data):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 1rem; }
:is(.dati-chiave):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 3rem; max-width: var(--colonna); }
:is(.dati-chiave .h2 + .elenco):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 1.25rem; }
@media (min-width: 64em) {
  :is(.dati-inizio):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5rem; align-items: start; }
  :is(.dati-chiave):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 0; }
}

/* titolo a sinistra e testo a destra (stile.css, .coppia); la colonna di destra è anche il «contenitore» che decide
   se una tabella sta come tabella o diventa schede, quindi qui non ha il tetto dei 40rem: ce l'hanno i capoversi */
:is(.dati-corpo):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { container: dati / inline-size; }
@media (min-width: 64em) { :is(.dati-corpo):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { max-width: none; } }
:is(.dati-corpo > p):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *),
:is(.dati-corpo > .elenco):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *),
:is(.dati-corpo > .listino):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *),
:is(.dati-corpo > .h3):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { max-width: var(--colonna); }
:is(.dati-corpo > .bottone):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 2rem; }
/* dopo un elenco il capoverso che segue sta più staccato: non deve sembrare un'altra voce */
:is(.dati-corpo > .elenco + *):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *), :is(.dati-corpo > .listino + *):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 2rem; }
/* titoletti: spazio sopra, un filetto, poi il testo (come nella parte lunga di /menopausa) */
:is(.dati-corpo > .h3):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--filo); }
:is(.dati-corpo > .h3 + *):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 1rem; }
/* dopo una tabella il filetto c'è già (l'ultima riga): il titoletto non ne mette un altro */
:is(.dati-corpo > .tabella + .h3):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { padding-top: 0; border-top: 0; }

/* ---------- 3. Elenchi a righe ---------- */
/* Non ci sono pallini: ogni voce è una riga, separata dalla successiva da un filetto, e comincia con il suo numero in
   grassetto. Intero a tutta colonna, i capoversi dentro le voci non si toccano. */
:is(.elenco > li):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { padding-block: 1rem; text-wrap: pretty; }
:is(.elenco > li + li):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { border-top: 1px solid var(--filo); }
:is(.elenco > li:first-child):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { padding-top: 0; }
:is(.elenco > li:last-child):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { padding-bottom: 0; }

/* il listino dei sintomi (comuni/Listino) è un pezzo comune: il suo stile è in stile.css. Qui resta solo come sta nel testo della pagina. */

/* ---------- 4. Tabelle: come stanno nel testo (le tabelle sono un pezzo comune, comuni/Tabella: il loro stile è in stile.css) ---------- */
:is(.dati-corpo > .tabella):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 2rem; }
:is(.dati-corpo > .tabella + *):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 2rem; }
:is(.dati-corpo > .tabella + .h3):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 3rem; }

/* ---------- 5. Le fonti ---------- */
/* in fondo, a tutta larghezza (a due colonne da 52em), in piccolo (14px), numerate; ogni fonte è una riga con un filetto */
:is(.dati-fonti > .piccolo):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { margin-top: 1rem; }
:is(.fonti):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { counter-reset: fonte; margin-top: 1.5rem; border-top: 1px solid var(--filo); font-size: var(--piccolo); line-height: 1.55; }
:is(.fonti > li):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { position: relative; counter-increment: fonte; padding: .875rem 0 .875rem 2.5rem; border-bottom: 1px solid var(--filo); overflow-wrap: anywhere; }
:is(.fonti > li):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *)::before { content: counter(fonte) "."; position: absolute; left: 0; top: .875rem; width: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 52em) {
  /* a griglia, non a colonne di testo: in Safari, con le colonne, il Tab da tastiera faceva scorrere la pagina nel verso sbagliato */
  :is(.fonti):where([data-sezione^="menopausa-in-italia/"], [data-sezione^="menopausa-in-italia/"] *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}