/* Medyca — /salute-cardiometabolica (13.10.2026)
   I pezzi che in stile.css non ci sono, nello stesso linguaggio: variabili, raggi 8/24/40, pillole, filetti var(--filo),
   niente ombre tranne il bottone rosso e le foto dell'apertura, niente colori nuovi.
   Da portare nel foglio comune: l'apertura con i due ritratti, il bottone secondario sul navy, le quattro cause,
   l'elenco a punti, le card dei medici, le domande frequenti aperte. */

/* Il testo non è mai più largo di 40rem, nemmeno su tablet (in stile.css il limite della colonna parte da 64em). */
:is(.coppia-corpo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *), :is(.cause):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *), :is(.cause-chiusura):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *), :is(.faq-aperte):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *), :is(.faq-fine):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { max-width: var(--colonna); }
@media (min-width: 64em) { :is(.cause):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *), :is(.cause-chiusura):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *), :is(.faq-aperte):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *), :is(.faq-fine):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { max-width: none; } }

/* ---------- 1. Apertura: titolo, sottotitolo, due bottoni, la riga, i due ritratti col logo ---------- */
/* Navy da bordo a bordo, croce del logo al 6%, barretta rossa sopra il titolo: come l'apertura della home (B). */
:is(.cardio-apertura):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { position: relative; background: var(--navy); color: #fff; overflow: hidden; padding-block: 2.5rem 3rem; }
:is(.cardio-apertura):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background: url("/loghi/medyca-croce-filigrana-bianca.svg") no-repeat right -9rem top -3rem / 30rem auto;
}
:is(.cardio-apertura .contenitore):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { position: relative; z-index: 1; }
:is(.cardio-apertura .h1):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *)::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: 1.25rem; border-radius: 2px; background: var(--rosso); }
/* «cardiometabolica» è la parola più lunga del titolo (circa 9 volte il corpo): sotto i 390px il corpo scende perché stia intera */
:is(.cardio-apertura .h1-grande):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { font-size: min(var(--h1-grande), calc((100vw - 3rem) / 9.2)); overflow-wrap: break-word; }
:is(.cardio-apertura .attacco):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 1.5rem; }

/* i due bottoni: stessa larghezza, uno sotto l'altro; il secondario sul navy è «fantasma» (contorno bianco, niente fondo) */
:is(.cardio-bottoni):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { display: grid; gap: 1rem; margin-top: 2rem; }
:is(.cardio-bottoni .bottone):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { width: 100%; }
:is(.cardio-giu .freccia .icona):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { transform: rotate(90deg); }          /* «scopri come funziona» scende alla sezione: la freccia punta in giù */
:is(.su-navy .bottone--secondario):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .8); box-shadow: none; padding-block: 8px; }
:is(.su-navy .bottone--secondario:hover):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { background: #fff; color: var(--navy); }
:is(.su-navy .bottone--secondario:hover .freccia):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { background: rgba(34, 74, 136, .12); }
:is(.cardio-riga):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; font-size: var(--corpo); line-height: 1.5; font-weight: var(--peso-testo); }
:is(.cardio-riga .icona):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { width: 22px; height: 22px; }
:is(.cardio-riga em):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { text-wrap: balance; }

/* i due ritratti, non ritoccati, in UNA cornice bianca con gli angoli a 24px (come la foto della home) e un filo bianco fra l'uno
   e l'altro */
:is(.cardio-duo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 2.25rem; padding: 4px; border-radius: var(--raggio-grande); background: #fff; box-shadow: 0 20px 44px rgba(8, 20, 44, .3); }
:is(.cardio-ritratto):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { aspect-ratio: 5 / 9; overflow: hidden; background: var(--cielo); }
:is(.cardio-ritratto img):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { width: 100%; height: 100%; object-fit: cover; }
:is(.cardio-ritratto--stella):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { border-radius: 20px 8px 8px 20px; }
:is(.cardio-ritratto--sarzani):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { border-radius: 8px 20px 20px 8px; }
:is(.cardio-ritratto--stella img):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { object-position: 30% 50%; }
:is(.cardio-ritratto--sarzani img):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { object-position: 41% 50%; }

/* tablet: i ritratti diventano più larghi e meno alti (4:5), larghi quanto la colonna del testo */
@media (min-width: 37.5em) {
  :is(.cardio-apertura-testo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *), :is(.cardio-duo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { max-width: var(--colonna); }
  :is(.cardio-ritratto):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { aspect-ratio: 4 / 5; }
}
@media (min-width: 52em) { :is(.cardio-bottoni):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { width: fit-content; max-width: 100%; } }

/* desktop: testo a sinistra, i due ritratti a destra, appoggiati in basso e usciti dalla fascia di 3,5rem (come la foto della home) */
@media (min-width: 64em) {
  :is(.cardio-apertura):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { overflow: visible; padding-block: 4.5rem 0; }
  :is(.cardio-apertura):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *)::after { background-position: right -6rem top -8rem; background-size: 46rem auto; }
  :is(.cardio-apertura .h1):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *)::before { width: 3.5rem; height: 5px; margin-bottom: 1.75rem; }
  :is(.cardio-apertura-griglia):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 4rem; align-items: end; }
  :is(.cardio-apertura-testo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { max-width: none; padding-bottom: 5rem; }
  :is(.cardio-apertura .attacco):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { max-width: 36rem; }
  :is(.cardio-duo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { max-width: none; margin: 0 0 -3.5rem; gap: 6px; padding: 6px; border-radius: var(--raggio-box, 40px); box-shadow: 0 28px 60px rgba(8, 20, 44, .32); }
  :is(.cardio-ritratto):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { aspect-ratio: 5 / 9; }
  :is(.cardio-ritratto--stella):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { border-radius: 34px 12px 12px 34px; }
  :is(.cardio-ritratto--sarzani):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { border-radius: 12px 34px 34px 12px; }
  :is(.cardio-dopo-apertura):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { padding-top: calc(var(--sezione) + 2rem); }   /* lascia posto ai ritratti usciti dalla fascia */
}

/* ---------- 2. «Perché succede»: le quattro cause ---------- */
/* Il grassetto con cui comincia ogni capoverso sta su una riga sua, come un titoletto. */
:is(.cause):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 2rem; border-bottom: 1px solid var(--filo); }
:is(.cause > p):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { padding-block: 1.75rem; border-top: 1px solid var(--filo); }
:is(.cause .capo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { display: block; margin-bottom: .625rem; font-size: var(--h3); line-height: 1.35; }
:is(.cause-chiusura):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 2.5rem; }
:is(.cause-chiusura-testo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { max-width: var(--colonna); }
:is(.cause-chiusura-testo > * + *):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 1rem; }
:is(.cause-chiusura .bottone):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 2rem; }
@media (min-width: 64em) {
  :is(.cause):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; }
  :is(.cause > p):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { padding-block: 2rem 2.25rem; }
  :is(.cause-chiusura):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; align-items: center; margin-top: 3.5rem; }
  :is(.cause-chiusura .bottone):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 0; justify-self: start; }
}

/* ---------- 3. Elenco a punti (le quattro voci di «Che cosa guarda», i due passi di «Come proseguire») ---------- */
:is(.elenco):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { border-bottom: 1px solid var(--filo); }
:is(.elenco li):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { position: relative; padding: 1.25rem 0 1.25rem 1.75rem; border-top: 1px solid var(--filo); }
:is(.elenco li):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *)::before { content: ""; position: absolute; left: .25rem; top: calc(1.25rem + .6em); width: 8px; height: 8px; border-radius: 50%; background: var(--rosso); }
:is(.elenco + p):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 2rem; }
:is(.sigillo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { font-weight: 700; }

/* ---------- 4. «Chi la svolge»: i due medici sono oggetti ---------- */
:is(.medici):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { display: grid; gap: 1.5rem; }
:is(.medico):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { padding: var(--scheda); border-radius: var(--raggio-grande); background: var(--cielo); }
/* la «testa» di ogni medico: il ritratto in un cerchio, stretto sul viso, e accanto il nome (il link con cui comincia il testo);
   il resto del capoverso sta sotto, a tutta larghezza della card. */
:is(.medico-testo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.25rem 1rem; max-width: var(--colonna); }
:is(.medico-foto):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { grid-column: 1; grid-row: 1; width: 5rem; height: 5rem; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: var(--bianco); }
:is(.medico-foto img):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { display: block; max-width: none; height: auto; }
:is(.medico-foto--stella img):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { width: 160%; margin: -22% 0 0 -27%; }       /* l'immagine più grande del cerchio e spostata sul viso: i margini in % contano sulla larghezza */
:is(.medico-foto--sarzani img):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { width: 180%; margin: -26% 0 0 -37%; }
/* un medico senza ritaglio suo (o con un ritaglio che qui non c'è): la foto riempie il cerchio e il punto che resta in vista è `fuoco` del yaml (--fuoco, come nel profilo), 50% 20% se manca */
:is(.medico-foto:not(.medico-foto--stella, .medico-foto--sarzani) img):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { width: 100%; height: 100%; object-fit: cover; object-position: var(--fuoco, 50% 20%); }
:is(.medico-nome):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { grid-column: 2; grid-row: 1; font-size: var(--h3); line-height: 1.3; }
:is(.medico-bio):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { grid-column: 1 / -1; grid-row: 2; }
:is(.medico-bio):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *)::first-letter { text-transform: uppercase; }
@media (min-width: 52em) { :is(.medico-foto):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { width: 6rem; height: 6rem; border-width: 4px; } :is(.medico-testo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { column-gap: 1.25rem; } }
:is(.coppia-corpo > .medici-nota):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 2rem; }
/* da 75em le due card stanno affiancate sotto il titolo; sotto, il titolo è a sinistra e le card una sopra l'altra a destra, larghe quanto il testo */
@media (min-width: 75em) {
  :is(.coppia--medici):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { grid-template-columns: minmax(0, 1fr); }
  :is(.coppia--medici .coppia-titolo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { position: static; }
  :is(.coppia--medici .coppia-titolo + .coppia-corpo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 2rem; }
  :is(.coppia--medici .coppia-corpo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { max-width: none; }
  :is(.medici):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  :is(.coppia--medici .medici-nota):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { max-width: var(--colonna); }
}

/* ---------- 5. Due titoli nella stessa fascia: un filetto fra l'uno e l'altro ---------- */
:is(.coppia--dopo):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid var(--filo); }

/* ---------- 6. Domande frequenti, aperte: titolo, risposta, filetto ---------- */
:is(.faq-aperte):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 2rem; border-bottom: 1px solid var(--filo); }
:is(.faq-riga):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { padding-block: 1.75rem 2rem; border-top: 1px solid var(--filo); }
:is(.faq-risposta > * + *):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 1.25em; }
:is(.faq-fine):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 2.5rem; }
@media (min-width: 64em) {
  /* a desktop: la domanda a sinistra, la risposta a destra */
  :is(.faq-riga):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 4rem; align-items: start; padding-block: 2.25rem 2.5rem; }
  :is(.faq-riga .h3 + .faq-risposta):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { margin-top: 0; max-width: var(--colonna); }
  :is(.faq-fine):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 4rem; }
  :is(.faq-fine .bottone):where([data-sezione^="salute-cardiometabolica/"], [data-sezione^="salute-cardiometabolica/"] *) { grid-column: 2; justify-self: start; }
}