/* Pagine di contenuto (servizi SEO, GEO, AEO e "Chi sono"): stesse basi di diagnosi.css (font,
   colori, barra, piede, apertura con titolo grande), impaginazione a colonna di lettura.
   Nessuno stile inline: le pagine hanno una CSP rigida (public/_headers). */

.pagina-contenuto { position: relative; max-width: 1100px; margin: 0 auto; padding: 116px 22px 80px; }
@media (min-width: 861px) { .pagina-contenuto { padding: 150px 48px 110px; } }

.briciole { font-size: 13px; color: var(--tenue); margin-bottom: 26px; }
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.briciole li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.briciole a { text-decoration: none; }
.briciole a:hover { text-decoration: underline; }

.pagina-contenuto .apertura { max-width: 820px; }
.aggiornata { margin-top: 18px; font-size: 13px; color: var(--tenue); }

.corpo { max-width: 720px; margin-top: 64px; display: grid; gap: 56px; }
.corpo h2 { font-family: var(--titolo); font-weight: 800; font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.04em; line-height: 1.08; }
.corpo h3 { font-family: var(--titolo); font-weight: 700; font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.corpo p { font-size: 17px; line-height: 1.7; color: rgba(20, 16, 16, .78); }
.corpo p + p, .corpo h2 + p, .corpo h3 + p, .corpo h2 + ul, .corpo p + ul { margin-top: 14px; }
.corpo strong { color: var(--inchiostro); }

.elenco { list-style: none; display: grid; gap: 10px; }
.elenco li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.6; color: rgba(20, 16, 16, .78); }
.elenco li::before { content: "→"; position: absolute; left: 0; top: 0; font-weight: 700; background: var(--firma); -webkit-background-clip: text; background-clip: text; color: transparent; }

.livelli { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 760px) { .livelli { grid-template-columns: repeat(3, 1fr); } }
.livello { background: var(--carta); border-radius: var(--raggio-card); box-shadow: var(--ombra-card); padding: 22px 22px 24px; }
.livello h3 { margin-bottom: 8px; }
.livello p { font-size: 15.5px; }

.riquadro { background: var(--carta); border-radius: var(--raggio-card); box-shadow: var(--ombra-alta); padding: 28px; }
.riquadro h2 { font-size: clamp(24px, 2.8vw, 30px); }
.riquadro .azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pulsante { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: var(--pillola); font-weight: 600; text-decoration: none; }
.pulsante.pieno { background: var(--firma); color: #fff; }
.pulsante.vuoto { border: 1px solid var(--bordo-campo); }

.correlati { display: grid; gap: 12px; }
@media (min-width: 760px) { .correlati { grid-template-columns: repeat(2, 1fr); } }
.correlato { display: block; background: var(--carta); border-radius: var(--raggio-card); box-shadow: var(--ombra-card); padding: 20px 22px; text-decoration: none; transition: transform .3s var(--curva), box-shadow .3s var(--curva); }
.correlato:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }
.correlato span { display: block; font-size: 14px; color: var(--tenue); margin-top: 4px; }
.correlato strong { font-family: var(--titolo); font-size: 19px; letter-spacing: -.02em; }

.lavori { display: grid; gap: 12px; margin-top: 18px; }
.lavoro { background: var(--carta); border-radius: var(--raggio-card); box-shadow: var(--ombra-card); padding: 18px 22px; }
.lavoro header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lavoro h3 { font-size: 18px; }
.lavoro .periodo { font-size: 13px; color: var(--tenue); }
.lavoro .ruolo { font-size: 14px; font-weight: 600; margin-top: 2px; color: var(--inchiostro); }
.lavoro p { font-size: 15px; margin-top: 6px; }

/* Titolo grande: nelle pagine di contenuto le righe sono più lunghe che nella pagina diagnosi
   ("Farti trovare", "Vernuccio."): vanno a capo tra le parole invece di uscire dalla colonna. */
.pagina-contenuto .titolo-grande { font-size: clamp(36px, 12cqi, 88px); }
.pagina-contenuto .titolo-grande .riga-titolo { white-space: normal; }