/* sito.css — generato da 22-sito-wp/_strumenti/costruisci_css.py dal mockup 18-per-leonardo.
NON modificare a mano: cambia il mockup o sito-extra.css e rilancia lo script. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(fonts/dm-sans.woff2) format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/literata.woff2) format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(fonts/literata-corsivo.woff2) format("woff2"); }
:root {
color-scheme: light;
--lfn-crema: #FFF4DE;
--lfn-crema-2: #F6E9CC;
--lfn-verde: #2C5A27;
--lfn-verde-scuro: #1F3F1C;
--lfn-ink: #1B2217;
--lfn-testo2: #4B5A46;
--lfn-su-verde: #F3E9D2;
--lfn-su-verde-2: #D5CDB6;
--lfn-linea: rgba(27, 34, 23, .14);
--lfn-linea-forte: rgba(27, 34, 23, .3);
--lfn-arancio: #FF5300;
--lfn-bianco: #FFFFFF;
--lfn-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--lfn-serif: "Literata", Georgia, "Times New Roman", serif;
--lfn-fs-meta: 1rem;
--lfn-fs-ui: 1.125rem;
--lfn-fs-leggi: 1.25rem;
--lfn-fs-h3: 1.375rem;
--lfn-fs-h2: 1.75rem;
--lfn-fs-h1: 2.25rem;
--lfn-fs-hero: 2.5rem;
--lfn-gut: 20px;
--lfn-max: 1200px;
}
/* basi di testata e piè: PRIMA del CSS del mockup, così le sue regole vincono a parità di peso */
.testata, .pie { font-family: var(--lfn-sans); font-size: var(--lfn-fs-ui); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.testata { color: var(--lfn-ink); }
.testata *, .testata *::before, .testata *::after, .pie *, .pie *::before, .pie *::after { box-sizing: border-box; }
.testata :is(h1, h2, h3, p, ul, ol, figure), .pie :is(h1, h2, h3, p, ul, ol, figure) { margin: 0; padding: 0; }
.testata :is(ul, ol), .pie :is(ul, ol) { list-style: none; }
.testata img, .pie img { max-width: 100%; height: auto; display: block; }
.testata a, .pie a, .lf-sito a, .testata a:is(:hover, :active, :focus), .pie a:is(:hover, :active, :focus), .lf-sito a:is(:hover, :active, :focus) { color: inherit; }
.testata :is(button, input), .pie :is(button, input) { font: inherit; letter-spacing: normal; text-transform: none; }
.testata :focus-visible { outline: 3px solid var(--lfn-verde); outline-offset: 3px; border-radius: 2px; }
.testata [hidden], .pie [hidden] { display: none !important; }
@media (min-width: 1024px) {
:root { --lfn-fs-leggi: 1.3125rem; --lfn-fs-h2: 2.125rem; --lfn-fs-h1: 3.25rem; --lfn-fs-hero: 4rem; --lfn-gut: 40px; }
}
.lf-sito *, .lf-sito *::before, .lf-sito *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.lf-sito { margin: 0; background: var(--lfn-crema); color: var(--lfn-ink); font-family: var(--lfn-sans); font-size: var(--lfn-fs-ui); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.lf-sito h1, .lf-sito h2, .lf-sito h3, .lf-sito p, .lf-sito ul, .lf-sito ol, .lf-sito dl, .lf-sito dd, .lf-sito figure { margin: 0; padding: 0; }
.lf-sito ul, .lf-sito ol { list-style: none; }
.lf-sito h1, .lf-sito h2, .lf-sito h3 { font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
.lf-sito img { max-width: 100%; height: auto; display: block; }
.lf-sito a { color: inherit; }
.lf-sito b, .lf-sito strong { font-weight: 800; }
.lf-sito button, .lf-sito input { font: inherit; }
.lf-sito :focus-visible { outline: 3px solid var(--lfn-verde); outline-offset: 3px; border-radius: 2px; }
.lf-sito [hidden] { display: none !important; }
.lf-sito .nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lf-sito .contenitore { max-width: var(--lfn-max); margin-inline: auto; padding-inline: var(--lfn-gut); }
.lf-sito .testo-lettura a, .lf-sito .link { color: var(--lfn-verde); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 700; }
.lf-sito .testo-lettura a:hover, .lf-sito .link:hover { color: var(--lfn-ink); }
.lf-sito .link { font-family: var(--lfn-sans); font-weight: 800; }
.lf-sito .occhiello { font-size: var(--lfn-fs-meta); font-weight: 800; color: var(--lfn-verde); letter-spacing: 0.01em; }
.lf-sito .sezione { padding-block: 56px; }
@media (min-width: 1024px) {
.lf-sito .sezione { padding-block: 88px; }
}
.lf-sito .sezione__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.lf-sito .sezione__testa h2 { font-size: var(--lfn-fs-h2); line-height: 1.15; }
.lf-sito .didascalia { font-family: var(--lfn-serif); font-style: italic; font-size: var(--lfn-fs-meta); line-height: 1.45; color: var(--lfn-testo2); margin-top: 10px; }
.lf-sito .foto { border-radius: 10px; width: 100%; object-fit: cover; }
.lf-sito .bottone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding-inline: 22px; border-radius: 999px; border: 0; font-weight: 800; text-decoration: none; cursor: pointer; }
.lf-sito .bottone svg { width: 20px; height: 20px; }
.lf-sito .bottone--verde { background: var(--lfn-verde); color: var(--lfn-crema); }
.lf-sito .bottone--verde:hover { background: var(--lfn-verde-scuro); }
.lf-sito .bottone--crema { background: var(--lfn-crema); color: var(--lfn-verde-scuro); }
.lf-sito .bottone--crema:hover { background: var(--lfn-bianco); }
.lf-sito .bottone--arancio { background: var(--lfn-arancio); color: var(--lfn-ink); }
.lf-sito .bottone--arancio:hover { background: #E64A00; }
.lf-sito .apertura { padding-block: 24px 56px; }
.lf-sito .apertura__griglia { display: grid; gap: 36px; }
@media (min-width: 1024px) {
.lf-sito .apertura { padding-block: 40px 88px; }
.lf-sito .apertura__griglia { grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
}
.lf-sito .presentazione { background: var(--lfn-verde); color: var(--lfn-su-verde); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 38%; align-items: end; }
.lf-sito .presentazione__testo { padding: 24px 0 24px 22px; align-self: start; }
.lf-sito .presentazione h1 { color: var(--lfn-crema); font-size: 1.75rem; line-height: 1.08; letter-spacing: -0.025em; }
.lf-sito .presentazione p { font-family: var(--lfn-serif); font-size: 1.0625rem; line-height: 1.5; margin-top: 12px; }
.lf-sito .presentazione .presentazione__prove { font-family: var(--lfn-sans); font-weight: 800; font-size: var(--lfn-fs-meta); color: var(--lfn-su-verde-2); }
.lf-sito .presentazione__link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 4px; color: var(--lfn-crema); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lf-sito .presentazione__foto { width: 100%; height: auto; align-self: end; margin-top: 24px; }
/* 09/11/2026 (Luca: «il titolo può andare sopra la foto, il resto non deve mai arrivarci»; «il contenuto deve essere equilibrato»):
sotto i 1024 px il testo resta nella colonna 1 con 16 px di stacco dalla foto. La foto non decide l'altezza del riquadro:
height 0 + min-height 100% la rende alta quanto il testo accanto, contain la tiene intera in basso a destra.
Sotto i 560 px il titolo prende tutta la larghezza in una riga a sé («agroforestazione,» non sta nella colonna) e la foto parte sotto.
Da 560 a 1023 px il titolo sta nella colonna 1 e la foto prende tutta l'altezza del riquadro. */
@media (max-width: 1023px) {
.lf-sito .presentazione { grid-template-rows: auto auto auto auto; }
.lf-sito .presentazione__testo { display: contents; }
.lf-sito .presentazione__testo > * { grid-column: 1; margin-left: 22px; margin-right: 16px; }
.lf-sito .presentazione h1 { grid-column: 1 / -1; grid-row: 1; margin: 24px 22px 0; }
.lf-sito .presentazione__link { justify-self: start; margin-bottom: 24px; }
.lf-sito .presentazione__foto { grid-column: 2; grid-row: 2 / -1; align-self: stretch; height: 0; min-height: 100%; object-fit: contain; object-position: right bottom; margin-top: 16px; }
}
@media (min-width: 560px) and (max-width: 1023px) {
.lf-sito .presentazione h1 { grid-column: 1; margin: 28px 16px 0 22px; }
.lf-sito .presentazione__foto { grid-row: 1 / -1; margin-top: 24px; }
}
@media (max-width: 359px) {
.lf-sito .presentazione { grid-template-columns: minmax(0, 1fr) 32%; }
.lf-sito .presentazione__testo > * { margin-right: 12px; }
}
@media (min-width: 560px) {
.lf-sito .presentazione h1 { font-size: 2.25rem; }
.lf-sito .presentazione p { font-size: 1.1875rem; }
}
@media (min-width: 1024px) {
.lf-sito .presentazione { grid-template-columns: 1fr; }
.lf-sito .presentazione__testo { padding: 36px 36px 0; }
.lf-sito .presentazione h1 { font-size: 2.875rem; }
.lf-sito .presentazione__foto { width: 62%; justify-self: end; margin-right: 24px; }
}
.lf-sito .evidenza__art { display: grid; gap: 10px; margin-top: 12px; text-decoration: none; }
.lf-sito .evidenza__art img { aspect-ratio: 16 / 10; border-radius: 12px; object-fit: cover; width: 100%; }
@media (min-width: 1024px) {
.lf-sito .evidenza__art img { aspect-ratio: 2 / 1; }
}
.lf-sito .evidenza__art h2 { font-size: var(--lfn-fs-h2); line-height: 1.12; margin-top: 8px; }
.lf-sito .evidenza__art p { font-family: var(--lfn-serif); font-size: var(--lfn-fs-leggi); line-height: 1.55; }
.lf-sito .evidenza__art span { color: var(--lfn-testo2); font-size: var(--lfn-fs-meta); }
.lf-sito .evidenza__art:hover h2 { color: var(--lfn-verde); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.lf-sito .evidenza__altri { display: grid; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--lfn-linea); }
@media (min-width: 760px) {
.lf-sito .evidenza__altri { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.lf-sito .mini { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; text-decoration: none; }
.lf-sito .mini img { aspect-ratio: 1 / 1; border-radius: 8px; object-fit: cover; width: 100%; }
.lf-sito .mini h3 { font-size: 1.125rem; line-height: 1.3; }
.lf-sito .mini span { display: block; margin-top: 4px; color: var(--lfn-testo2); font-size: var(--lfn-fs-meta); }
.lf-sito .mini:hover h3 { color: var(--lfn-verde); text-decoration: underline; text-underline-offset: 4px; }
.lf-sito .stagione { background: var(--lfn-verde); color: var(--lfn-su-verde); }
.lf-sito .stagione .occhiello { color: var(--lfn-su-verde-2); }
.lf-sito .stagione h2 { color: var(--lfn-crema); font-size: var(--lfn-fs-h1); line-height: 1.04; letter-spacing: -0.03em; margin-top: 6px; }
.lf-sito .stagione__intro { font-family: var(--lfn-serif); font-size: var(--lfn-fs-leggi); line-height: 1.55; margin-top: 12px; max-width: 32em; }
.lf-sito .stagione__griglia { display: grid; gap: 36px; }
@media (min-width: 1024px) {
.lf-sito .stagione__griglia { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
}
.lf-sito .lavori { margin-top: 28px; counter-reset: lavoro; border-top: 1px solid rgba(243, 233, 210, .28); }
.lf-sito .lavori li { counter-increment: lavoro; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding-block: 18px; border-bottom: 1px solid rgba(243, 233, 210, .28); }
.lf-sito .lavori li::before { content: counter(lavoro); font-weight: 800; font-size: var(--lfn-fs-h3); color: var(--lfn-crema); line-height: 1.2; }
.lf-sito .lavori b { display: block; color: var(--lfn-crema); font-size: 1.25rem; line-height: 1.3; }
.lf-sito .lavori a { display: inline-block; margin-top: 6px; color: var(--lfn-su-verde); font-weight: 400; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.lf-sito .lavori a:hover { color: var(--lfn-crema); }
.lf-sito .stagione .didascalia { color: var(--lfn-su-verde-2); }
.lf-sito .stagione .foto { aspect-ratio: 4 / 5; }
.lf-sito .porte { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
@media (min-width: 1024px) {
.lf-sito .porte { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}
.lf-sito .porta { text-decoration: none; display: grid; gap: 12px; align-content: start; }
.lf-sito .porta img { aspect-ratio: 1 / 1; border-radius: 10px; object-fit: cover; width: 100%; }
.lf-sito .porta h3 { font-size: 1.25rem; line-height: 1.2; }
.lf-sito .porta span { color: var(--lfn-testo2); font-size: var(--lfn-fs-meta); }
.lf-sito .porta:hover h3 { color: var(--lfn-verde); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.lf-sito .quaderno { background: var(--lfn-crema-2); }
.lf-sito .quaderno__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
@media (min-width: 1024px) {
.lf-sito .quaderno__griglia { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}
.lf-sito .pagina-q { text-decoration: none; display: grid; gap: 8px; align-content: start; }
.lf-sito .pagina-q img { aspect-ratio: 4 / 3; border-radius: 10px; object-fit: cover; width: 100%; }
.lf-sito .pagina-q time { font-weight: 800; color: var(--lfn-verde); font-size: var(--lfn-fs-meta); margin-top: 4px; }
.lf-sito .pagina-q h3 { font-size: 1.125rem; line-height: 1.25; }
.lf-sito .pagina-q p { font-family: var(--lfn-serif); font-size: 1.0625rem; line-height: 1.55; color: var(--lfn-ink); display: none; }
@media (min-width: 640px) {
.lf-sito .pagina-q h3 { font-size: 1.25rem; }
.lf-sito .pagina-q p { display: block; }
}
.lf-sito .pagina-q:hover h3 { color: var(--lfn-verde); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.lf-sito .righe { border-top: 1px solid var(--lfn-linea); }
.lf-sito .riga-art { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--lfn-linea); text-decoration: none; }
@media (min-width: 1024px) {
.lf-sito .riga-art { grid-template-columns: 160px 1fr; gap: 24px; }
}
.lf-sito .riga-art img { aspect-ratio: 4 / 3; border-radius: 8px; object-fit: cover; width: 100%; }
.lf-sito .riga-art h3 { font-size: 1.25rem; line-height: 1.25; }
@media (min-width: 1024px) {
.lf-sito .riga-art h3 { font-size: var(--lfn-fs-h3); }
}
.lf-sito .riga-art span { display: block; margin-top: 6px; color: var(--lfn-testo2); font-size: var(--lfn-fs-meta); }
.lf-sito .riga-art:hover h3 { color: var(--lfn-verde); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.lf-sito .due-colonne { display: grid; gap: 48px; }
@media (min-width: 1024px) {
.lf-sito .due-colonne { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
}
.lf-sito .strumento { background: var(--lfn-bianco); border-radius: 14px; overflow: hidden; display: grid; }
.lf-sito .strumento img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.lf-sito .strumento__testo { padding: 24px; }
.lf-sito .strumento h2 { font-size: 1.625rem; line-height: 1.15; }
.lf-sito .strumento p { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; margin-top: 10px; }
.lf-sito .strumento .bottone { margin-top: 20px; }
.lf-sito .promemoria { border-top: 2px solid var(--lfn-ink); border-bottom: 2px solid var(--lfn-ink); padding-block: 40px; display: grid; gap: 24px; }
@media (min-width: 1024px) {
.lf-sito .promemoria { grid-template-columns: 6fr 5fr; gap: 56px; align-items: center; }
}
.lf-sito .promemoria h2 { font-size: var(--lfn-fs-h2); line-height: 1.15; }
.lf-sito .promemoria p { font-family: var(--lfn-serif); font-size: var(--lfn-fs-leggi); line-height: 1.55; margin-top: 10px; }
.lf-sito .modulo { display: grid; gap: 12px; }
.lf-sito .modulo label { font-weight: 800; }
.lf-sito .modulo input { min-height: 56px; padding-inline: 16px; border: 2px solid var(--lfn-linea-forte); border-radius: 10px; background: var(--lfn-bianco); color: var(--lfn-ink); font-size: 1.125rem; }
.lf-sito .modulo input:focus-visible { outline-offset: 0; border-color: var(--lfn-verde); }
.lf-sito .modulo small { font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); }
.lf-sito .persona { display: grid; gap: 24px; }
@media (min-width: 1024px) {
.lf-sito .persona { grid-template-columns: 4fr 7fr; gap: 56px; align-items: center; }
}
.lf-sito .persona img { aspect-ratio: 4 / 5; border-radius: 12px; object-fit: cover; width: 100%; max-width: 420px; }
.lf-sito .persona h2 { font-size: var(--lfn-fs-h2); line-height: 1.15; }
.lf-sito .persona p { font-family: var(--lfn-serif); font-size: var(--lfn-fs-leggi); line-height: 1.6; margin-top: 14px; max-width: 32em; }
.lf-sito .persona .link { display: inline-block; margin-top: 18px; }
.lf-sito .art { padding-block: 28px 64px; }
.lf-sito .art__griglia { display: grid; }
@media (min-width: 1180px) {
.lf-sito .art__griglia { grid-template-columns: 300px minmax(0, 680px) minmax(0, 1fr); column-gap: 56px; }
.lf-sito .art__griglia > .laterale { grid-column: 1; grid-row: 1; }
.lf-sito .art__griglia > .art__corpo { grid-column: 2; grid-row: 1; }
}
.lf-sito .art__corpo { max-width: 680px; margin-inline: auto; width: 100%; }
.lf-sito .briciole { font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); display: flex; flex-wrap: wrap; gap: 6px; }
.lf-sito .briciole a { color: var(--lfn-testo2); text-underline-offset: 4px; }
.lf-sito .art h1 { font-size: var(--lfn-fs-h1); line-height: 1.08; letter-spacing: -0.025em; margin-top: 14px; }
.lf-sito .firma { display: flex; gap: 14px; align-items: center; margin-top: 22px; }
.lf-sito .firma img { width: 56px; height: 56px; border-radius: 50%; }
.lf-sito .firma b { display: block; }
.lf-sito .firma span { color: var(--lfn-testo2); font-size: var(--lfn-fs-meta); }
.lf-sito .prova { margin-top: 14px; font-family: var(--lfn-serif); font-style: italic; font-size: 1.0625rem; color: var(--lfn-testo2); }
.lf-sito .testo-lettura { font-family: var(--lfn-serif); font-size: var(--lfn-fs-leggi); line-height: 1.65; }
.lf-sito .testo-lettura p + p { margin-top: 1.1em; }
.lf-sito .lead { font-size: 1.375rem; line-height: 1.55; margin-top: 26px; }
@media (min-width: 1024px) {
.lf-sito .lead { font-size: 1.5rem; }
}
.lf-sito .scheda { margin-top: 28px; border-top: 2px solid var(--lfn-ink); }
.lf-sito .scheda div { display: grid; grid-template-columns: 1fr; gap: 2px; padding-block: 12px; border-bottom: 1px solid var(--lfn-linea); }
@media (min-width: 560px) {
.lf-sito .scheda div { grid-template-columns: 9.5rem 1fr; gap: 16px; }
}
.lf-sito .scheda dt { font-weight: 800; color: var(--lfn-verde); }
.lf-sito .scheda dd { font-size: var(--lfn-fs-ui); }
.lf-sito .scorciatoie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.lf-sito .bottone--contorno { border: 2px solid var(--lfn-verde); color: var(--lfn-verde); background: transparent; min-height: 48px; }
.lf-sito .bottone--contorno:hover { background: var(--lfn-verde); color: var(--lfn-crema); }
.lf-sito .video { margin-top: 32px; }
.lf-sito .video__cornice { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--lfn-ink); }
.lf-sito .video__cornice iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.lf-sito .video__nota { aspect-ratio: 16 / 9; border-radius: 10px; background: var(--lfn-verde); color: var(--lfn-su-verde); padding: 24px; display: grid; align-content: center; gap: 10px; font-size: var(--lfn-fs-ui); }
.lf-sito .video__nota b { color: var(--lfn-crema); font-size: var(--lfn-fs-h3); line-height: 1.25; }
.lf-sito .video__nota a { color: var(--lfn-crema); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
.lf-sito .video__cornice img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.lf-sito .video__play { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 8px; border-radius: 999px; background: var(--lfn-crema); color: var(--lfn-ink); font-weight: 800; }
.lf-sito .video__play i { width: 38px; height: 38px; border-radius: 50%; background: var(--lfn-verde); display: grid; place-items: center; }
.lf-sito .video__play svg { width: 16px; height: 16px; fill: var(--lfn-crema); margin-left: 2px; }
/* Short nel testo ([lf_short], 24/10/2026): verticale e stretto, la copertina 4:3 di YouTube tagliata al centro sul 9:16 */
.lf-sito .short { width: min(100%, 280px); margin: 28px 0; }
.lf-sito .short__cornice { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--lfn-ink); text-decoration: none; }
.lf-sito .short__cornice img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; margin: 0; border-radius: 0; }
.lf-sito .short iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 10px; background: var(--lfn-ink); }
.lf-sito .short__cornice .video__play { left: 12px; bottom: 12px; min-height: 48px; padding-right: 16px; font-family: var(--lfn-sans); font-size: var(--lfn-fs-ui); line-height: 1.2; white-space: nowrap; }
/* Anteprima del video e degli Short (27/10/2026, Luca): velo scuro solo sulla copertina e pulsante al centro.
Il velo sta sull'![]()
: al clic blog.js la sostituisce con l'iframe, quindi il player si vede senza velo. */
.lf-sito :is(.video__cornice, .short__cornice) img { filter: brightness(.55); }
.lf-sito :is(.video__cornice, .short__cornice) .video__play { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); white-space: nowrap; }
.lf-sito .capitoli { margin-top: 14px; border-top: 1px solid var(--lfn-linea); }
.lf-sito .capitoli a { display: grid; grid-template-columns: 4rem 1fr; gap: 8px; padding-block: 10px; border-bottom: 1px solid var(--lfn-linea); text-decoration: none; }
.lf-sito .capitoli time { font-weight: 800; color: var(--lfn-verde); font-variant-numeric: tabular-nums; }
.lf-sito .capitoli a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.lf-sito .art__corpo h2 { font-family: var(--lfn-sans); font-size: var(--lfn-fs-h2); line-height: 1.15; margin-top: 64px; margin-bottom: 16px; scroll-margin-top: 20px; }
.lf-sito .art__corpo h3 { font-family: var(--lfn-sans); font-size: var(--lfn-fs-h3); line-height: 1.25; margin-top: 32px; margin-bottom: 8px; }
.lf-sito .art__corpo figure { margin-top: 28px; margin-bottom: 28px; }
.lf-sito .visto { margin-top: 24px; border-top: 1px solid var(--lfn-linea); font-family: var(--lfn-sans); }
.lf-sito .visto li { padding-block: 16px; border-bottom: 1px solid var(--lfn-linea); display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
@media (min-width: 640px) {
.lf-sito .visto li { grid-template-columns: 128px 1fr; gap: 20px; }
}
.lf-sito .visto__img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.lf-sito .visto b { display: block; font-size: var(--lfn-fs-ui); }
.lf-sito .visto span { display: block; color: var(--lfn-testo2); font-size: var(--lfn-fs-meta); }
.lf-sito .visto p { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; margin-top: 4px; }
.lf-sito .coppia { display: grid; gap: 20px; margin-block: 28px; }
@media (min-width: 560px) {
.lf-sito .coppia { grid-template-columns: 1fr 1fr; }
}
.lf-sito .coppia figure { margin: 0 !important; }
.lf-sito .coppia img { aspect-ratio: 4 / 3; }
.lf-sito .passi { counter-reset: passo; margin-top: 12px; }
.lf-sito .passo { counter-increment: passo; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding-block: 22px; border-top: 1px solid var(--lfn-linea); }
.lf-sito .passo:last-child { border-bottom: 1px solid var(--lfn-linea); }
.lf-sito .passo::before { content: counter(passo); font-family: var(--lfn-sans); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--lfn-verde); }
.lf-sito .passo h3 { margin: 0 !important; font-size: var(--lfn-fs-h3) !important; }
.lf-sito .passo p { margin-top: 6px; }
.lf-sito .passo .link { font-size: var(--lfn-fs-meta); display: inline-flex; margin-top: 10px; }
.lf-sito .annotata { position: relative; }
.lf-sito .annotata .etichetta { position: absolute; left: 12px; top: 12px; max-width: 70%; background: var(--lfn-ink); color: var(--lfn-crema); font-family: var(--lfn-sans); font-weight: 800; font-size: var(--lfn-fs-meta); line-height: 1.3; padding: 8px 12px; border-radius: 8px; }
.lf-sito .errore { background: var(--lfn-crema-2); border-radius: 12px; padding: 22px; margin-block: 32px; }
.lf-sito .errore b { display: block; font-family: var(--lfn-sans); font-size: var(--lfn-fs-h3); line-height: 1.25; color: var(--lfn-verde-scuro); margin-bottom: 8px; }
.lf-sito .domanda + .domanda { margin-top: 28px; }
.lf-sito .domanda b { display: block; font-family: var(--lfn-sans); font-size: 1.25rem; line-height: 1.3; margin-bottom: 6px; }
.lf-sito .copertina-art { margin: 24px calc(var(--lfn-gut) * -1) 0; }
.lf-sito .copertina-art img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.lf-sito .copertina-art .didascalia { padding-inline: var(--lfn-gut); }
@media (min-width: 720px) {
.lf-sito .copertina-art { margin-inline: 0; }
.lf-sito .copertina-art img { border-radius: 12px; }
.lf-sito .copertina-art .didascalia { padding-inline: 0; }
}
.lf-sito .richiamo { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; background: var(--lfn-crema-2); border-radius: 12px; padding: 18px; margin-block: 28px; }
.lf-sito .richiamo img { width: 64px; height: auto; border-radius: 4px; }
.lf-sito .richiamo p { font-size: 1.125rem; line-height: 1.5; }
.lf-sito .richiamo .occhiello { font-size: var(--lfn-fs-meta); }
.lf-sito .richiamo .link { font-size: var(--lfn-fs-meta); display: inline-block; margin-top: 6px; }
.lf-sito .libro-cta { margin-top: 56px; background: var(--lfn-verde); color: var(--lfn-su-verde); border-radius: 16px; padding: 24px; display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 640px) {
.lf-sito .libro-cta { grid-template-columns: 170px 1fr; gap: 28px; padding: 32px; align-items: center; }
}
.lf-sito .libro-cta img { width: 128px; height: auto; }
@media (min-width: 640px) {
.lf-sito .libro-cta img { width: 100%; }
}
.lf-sito .libro-cta .occhiello { color: var(--lfn-su-verde-2); }
.lf-sito .art__corpo .libro-cta h2 { color: var(--lfn-crema); font-size: 1.625rem; margin: 4px 0 8px; }
.lf-sito .libro-cta p { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; }
.lf-sito .libro-cta__azione { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.lf-sito .libro-cta__azione span { font-weight: 800; font-size: var(--lfn-fs-h3); color: var(--lfn-crema); }
.lf-sito .autore { margin-top: 40px; display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; }
.lf-sito .autore img { width: 72px; height: 72px; border-radius: 50%; }
.lf-sito .autore b { font-size: 1.25rem; }
.lf-sito .autore p { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; margin-top: 4px; }
.lf-sito .autore .link { display: inline-block; margin-top: 8px; margin-right: 18px; font-size: var(--lfn-fs-meta); }
.lf-sito .indice, .lf-sito .laterale { display: none; }
@media (min-width: 1180px) {
.lf-sito .laterale { display: block; position: sticky; top: calc(var(--lfn-th, 0px) + 24px); align-self: start; }
.lf-sito .indice { display: block; }
.lf-sito .indice p { font-weight: 800; }
.lf-sito .indice ol { margin-top: 10px; border-top: 1px solid var(--lfn-linea); }
.lf-sito .indice a { display: block; padding-block: 9px; border-bottom: 1px solid var(--lfn-linea); text-decoration: none; font-size: var(--lfn-fs-meta); line-height: 1.35; color: var(--lfn-testo2); }
.lf-sito .indice a:hover { color: var(--lfn-verde); text-decoration: underline; text-underline-offset: 4px; }
}
.lf-sito .dopo { margin-top: 56px; }
.lf-sito .dopo h2 { margin-top: 0 !important; }
.lf-sito .attrezzi__nota { font-family: var(--lfn-sans); font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); margin-top: -4px; }
.lf-sito .attrezzi__lista { margin-top: 18px; border-top: 1px solid var(--lfn-linea); }
.lf-sito .attrezzo { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--lfn-linea); align-items: start; }
.lf-sito .attrezzo__icona { width: 72px; height: 72px; border-radius: 12px; background: var(--lfn-crema-2); display: grid; place-items: center; }
.lf-sito .attrezzo__icona svg { width: 36px; height: 36px; stroke: var(--lfn-verde); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lf-sito .attrezzo__uso { font-family: var(--lfn-sans); font-size: var(--lfn-fs-meta); font-weight: 800; color: var(--lfn-verde); }
.lf-sito .art__corpo .attrezzo h3 { margin: 2px 0 6px; font-size: 1.25rem; }
.lf-sito .attrezzo p { font-size: 1.125rem; line-height: 1.55; }
.lf-sito .attrezzo .bottone { margin-top: 12px; min-height: 48px; }
.lf-sito .attrezzo .bottone svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.lf-sito .esempio-mk { display: inline-block; margin-top: 10px; font-family: var(--lfn-sans); font-size: var(--lfn-fs-meta); background: #22262B; color: #EDECE8; border-radius: 6px; padding: 4px 10px; }
.lf-sito .visto + p { margin-top: 1.1em; }
.lf-sito .attrezzo .bottone { font-family: var(--lfn-sans); font-weight: 800; text-decoration: none; }
.lf-sito .attrezzo .bottone:hover { color: var(--lfn-crema); }
.lf-sito .scheda-link { display: grid; grid-template-columns: 84px minmax(0, 1fr) 40px; gap: 16px; align-items: center; margin-block: 28px; padding: 14px; background: var(--lfn-bianco); border: 1px solid var(--lfn-linea); border-radius: 16px; text-decoration: none; color: var(--lfn-ink); font-family: var(--lfn-sans); transition: border-color .15s ease-out; }
@media (min-width: 640px) {
.lf-sito .scheda-link { grid-template-columns: 128px minmax(0, 1fr) 48px; gap: 22px; padding: 16px 20px 16px 16px; }
}
.lf-sito .scheda-link img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
.lf-sito .scheda-link__testo { display: grid; gap: 4px; }
.lf-sito .scheda-link__occhiello { font-size: var(--lfn-fs-meta); font-weight: 800; color: var(--lfn-verde); }
.lf-sito .scheda-link__titolo { font-size: 1.1875rem; font-weight: 800; line-height: 1.25; }
@media (min-width: 640px) {
.lf-sito .scheda-link__titolo { font-size: var(--lfn-fs-h3); }
}
.lf-sito .scheda-link__desc { font-family: var(--lfn-serif); font-size: 1.0625rem; line-height: 1.5; color: var(--lfn-testo2); }
.lf-sito .scheda-link__freccia { width: 40px; height: 40px; border-radius: 50%; background: var(--lfn-verde); display: grid; place-items: center; }
@media (min-width: 640px) {
.lf-sito .scheda-link__freccia { width: 48px; height: 48px; }
}
.lf-sito .scheda-link__freccia svg { width: 20px; height: 20px; fill: none; stroke: var(--lfn-crema); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease-out; }
.lf-sito .scheda-link:hover { border-color: var(--lfn-verde); }
.lf-sito .scheda-link:hover .scheda-link__titolo { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.lf-sito .scheda-link:hover .scheda-link__freccia svg { transform: translateX(3px); }
.lf-sito .scheda-link--libro { background: var(--lfn-crema-2); border-color: transparent; }
.lf-sito .scheda-link--libro img { aspect-ratio: auto; object-fit: contain; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
.lf-sito .scheda-link, .lf-sito .scheda-link__freccia svg { transition: none; }
}
.lf-sito .libro-cta img { border-radius: 4px; outline: 1px solid rgba(243, 233, 210, .35); outline-offset: -1px; }
.lf-sito .indice a, .lf-sito .indice-mobile a, .lf-sito .indice-foglio a { position: relative; padding-left: 18px; }
.lf-sito .indice a.attivo, .lf-sito .indice-mobile a.attivo, .lf-sito .indice-foglio a.attivo { color: var(--lfn-verde); font-weight: 800; }
.lf-sito .indice a.attivo::before, .lf-sito .indice-mobile a.attivo::before, .lf-sito .indice-foglio a.attivo::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--lfn-verde); }
.lf-sito .indice-mobile { margin-top: 28px; }
.lf-sito .indice-mobile p { font-weight: 800; }
.lf-sito .indice-mobile ol { margin-top: 8px; border-top: 1px solid var(--lfn-linea); }
.lf-sito .indice-mobile a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--lfn-linea); text-decoration: none; color: var(--lfn-ink); }
@media (min-width: 1180px) {
.lf-sito .indice-mobile { display: none; }
}
.lf-sito .indice-float { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--lfn-verde-scuro); color: var(--lfn-crema); font-weight: 800; font-size: var(--lfn-fs-meta); cursor: pointer; }
.lf-sito .indice-float svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lf-sito .indice-float__ora { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-sito .indice-velo { position: fixed; inset: 0; z-index: 25; background: rgba(27, 34, 23, .45); }
.lf-sito .indice-foglio { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-height: 78vh; overflow: auto; background: var(--lfn-crema); border-radius: 18px 18px 0 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
.lf-sito .indice-foglio__testa { display: flex; align-items: center; justify-content: space-between; }
.lf-sito .indice-foglio__testa p { font-weight: 800; font-size: var(--lfn-fs-ui); }
.lf-sito .indice-foglio__chiudi { width: 48px; height: 48px; border: 0; background: none; color: var(--lfn-ink); display: grid; place-items: center; cursor: pointer; margin-right: -12px; }
.lf-sito .indice-foglio__chiudi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lf-sito .indice-foglio ol { border-top: 1px solid var(--lfn-linea); }
.lf-sito .indice-foglio a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--lfn-linea); text-decoration: none; color: var(--lfn-ink); font-size: var(--lfn-fs-ui); }
@media (min-width: 1180px) {
.lf-sito .indice-float, .lf-sito .indice-foglio, .lf-sito .indice-velo { display: none !important; }
}
.lf-sito .testo-lettura a.scheda-link { color: var(--lfn-ink); text-decoration: none; font-weight: 400; }
.lf-sito .testo-lettura a.scheda-link:hover { color: var(--lfn-ink); }
@media (max-width: 639px) {
.lf-sito .scheda-link img { align-self: start; }
}
.lf-sito .lettura { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 4px; z-index: 40; background: rgba(27, 34, 23, .08); pointer-events: none; }
.lf-sito .lettura__barra { display: block; height: 100%; background: var(--lfn-verde); transform: scaleX(0); transform-origin: left center; }
.lf-sito .laterale__libro { margin-top: 28px; padding: 18px; border-radius: 16px; background: var(--lfn-verde); color: var(--lfn-su-verde); display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px 16px; align-items: center; }
.lf-sito .laterale__libro img { width: 84px; height: auto; border-radius: 3px; }
.lf-sito .laterale__testo { display: grid; gap: 4px; }
.lf-sito .laterale__libro .occhiello { color: var(--lfn-su-verde-2); }
.lf-sito .laterale__titolo { font-weight: 800; font-size: var(--lfn-fs-ui); line-height: 1.2; color: var(--lfn-crema); }
.lf-sito .laterale__nota { font-size: var(--lfn-fs-meta); line-height: 1.35; color: var(--lfn-su-verde-2); }
.lf-sito .laterale__libro .bottone { grid-column: 1 / -1; width: 100%; min-height: 48px; }
.lf-sito .laterale__libro .bottone:focus-visible { outline-color: var(--lfn-crema); }
@media (min-width: 1180px) and (max-height: 700px) {
.lf-sito .laterale__libro img { display: none; }
.lf-sito .laterale__libro { grid-template-columns: 1fr; }
}
.lf-sito .briciole { align-items: center; }
.lf-sito .briciole a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.lf-sito a.link, .lf-sito .lavori a { padding-block: 10px; }
@media (min-width: 1180px) {
.lf-sito .indice a { padding-block: 11px; }
}
.lf-sito .pag { padding-block: 28px 72px; }
@media (min-width: 1024px) {
.lf-sito .pag { padding-block: 40px 104px; }
}
.lf-sito .pag-testa { max-width: 780px; }
.lf-sito .pag-testa h1 { font-size: var(--lfn-fs-h1); line-height: 1.06; letter-spacing: -0.025em; margin-top: 12px; }
.lf-sito .pag-testa h1 + p { font-family: var(--lfn-serif); font-size: var(--lfn-fs-leggi); line-height: 1.55; margin-top: 14px; }
.lf-sito .pag-testa--centro { margin-inline: auto; text-align: center; }
.lf-sito .pag-testa--centro .briciole { justify-content: center; }
.lf-sito .colonna { max-width: 760px; margin-inline: auto; }
.lf-sito .categorie { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 24px calc(var(--lfn-gut) * -1) 0; padding: 2px var(--lfn-gut) 6px; }
.lf-sito .categorie::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
.lf-sito .categorie { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.lf-sito .chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 16px; border: 2px solid var(--lfn-linea-forte); border-radius: 999px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: border-color .15s ease-out, color .15s ease-out; }
.lf-sito .chip:hover { border-color: var(--lfn-verde); color: var(--lfn-verde); }
.lf-sito .chip[aria-current="true"] { background: var(--lfn-verde); border-color: var(--lfn-verde); color: var(--lfn-crema); }
.lf-sito .fascia { margin-top: 56px; scroll-margin-top: 16px; }
@media (min-width: 1024px) {
.lf-sito .fascia { margin-top: 88px; }
}
.lf-sito .fascia .sezione__testa { margin-bottom: 8px; }
.lf-sito .fascia__riga { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.5; color: var(--lfn-testo2); margin-bottom: 24px; max-width: 40em; }
.lf-sito .hero-foto { position: relative; display: block; margin-top: 24px; border-radius: 16px; overflow: hidden; background: var(--lfn-verde-scuro); color: var(--lfn-crema); text-decoration: none; isolation: isolate; }
.lf-sito .hero-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1); position: relative; z-index: -2; }
@media (min-width: 760px) {
.lf-sito .hero-foto img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
.lf-sito .hero-foto img { aspect-ratio: 21 / 9; }
}
.lf-sito .hero-foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(17, 27, 15, .9) 0%, rgba(17, 27, 15, .55) 40%, rgba(17, 27, 15, 0) 72%); }
.lf-sito .hero-foto__testo { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; display: grid; gap: 10px; max-width: 860px; }
@media (min-width: 1024px) {
.lf-sito .hero-foto__testo { padding: 40px 44px; gap: 14px; }
}
.lf-sito .etichetta-cat { justify-self: start; background: var(--lfn-crema); color: var(--lfn-verde-scuro); font-weight: 800; font-size: var(--lfn-fs-meta); line-height: 1.2; padding: 6px 12px; border-radius: 999px; }
.lf-sito .hero-foto h1, .lf-sito .hero-foto h2 { font-size: 1.875rem; line-height: 1.08; letter-spacing: -0.02em; color: var(--lfn-crema); }
@media (min-width: 1024px) {
.lf-sito .hero-foto h1, .lf-sito .hero-foto h2 { font-size: var(--lfn-fs-h1); }
}
.lf-sito .hero-foto p { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.5; color: var(--lfn-su-verde); max-width: 36em; }
@media (min-width: 1024px) {
.lf-sito .hero-foto p { font-size: 1.3125rem; }
}
.lf-sito .hero-foto__meta { font-size: var(--lfn-fs-meta); font-weight: 800; color: var(--lfn-su-verde-2); }
.lf-sito a.hero-foto:hover img { transform: scale(1.03); }
.lf-sito .griglia-foto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) {
.lf-sito .griglia-foto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1024px) {
.lf-sito .griglia-foto { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
.lf-sito .card-foto { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--lfn-verde-scuro); color: var(--lfn-crema); text-decoration: none; isolation: isolate; }
.lf-sito .card-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.lf-sito .card-foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(17, 27, 15, .92) 0%, rgba(17, 27, 15, .5) 38%, rgba(17, 27, 15, 0) 64%); }
.lf-sito .card-foto__testo { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; display: grid; gap: 4px; }
@media (min-width: 760px) {
.lf-sito .card-foto__testo { padding: 18px; gap: 6px; }
}
.lf-sito .card-foto__cat { font-size: var(--lfn-fs-meta); font-weight: 800; color: var(--lfn-su-verde-2); }
.lf-sito .card-foto h3 { font-size: 1.25rem; line-height: 1.15; color: var(--lfn-crema); }
@media (min-width: 1024px) {
.lf-sito .card-foto h3 { font-size: 1.375rem; }
}
.lf-sito .card-foto p { font-size: var(--lfn-fs-meta); line-height: 1.35; color: var(--lfn-su-verde); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 760px) {
.lf-sito .card-foto p { -webkit-line-clamp: 3; }
}
.lf-sito .card-foto:hover img { transform: scale(1.05); }
.lf-sito .griglia-art { display: grid; gap: 32px; }
@media (min-width: 640px) {
.lf-sito .griglia-art { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
}
@media (min-width: 1024px) {
.lf-sito .griglia-art { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
}
.lf-sito .card-art { display: grid; gap: 8px; align-content: start; text-decoration: none; }
.lf-sito .card-art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; margin-bottom: 6px; }
.lf-sito .card-art__cat { font-size: var(--lfn-fs-meta); font-weight: 800; color: var(--lfn-verde); }
.lf-sito .card-art h3 { font-size: 1.25rem; line-height: 1.25; }
@media (min-width: 1024px) {
.lf-sito .card-art h3 { font-size: 1.375rem; }
}
.lf-sito .card-art p { font-family: var(--lfn-serif); font-size: 1.0625rem; line-height: 1.5; }
.lf-sito .card-art__meta { font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); }
.lf-sito .card-art:hover h3 { color: var(--lfn-verde); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (max-width: 639px) {
.lf-sito .scorri { grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--lfn-gut) * -1); padding-inline: var(--lfn-gut); scroll-padding-inline: var(--lfn-gut); }
.lf-sito .scorri::-webkit-scrollbar { display: none; }
.lf-sito .scorri > * { scroll-snap-align: start; }
.lf-sito .scorri.griglia-foto { grid-auto-columns: 46%; gap: 12px; }
}
.lf-sito .griglia-prodotti { display: grid; gap: 12px; }
@media (min-width: 640px) {
.lf-sito .griglia-prodotti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1024px) {
.lf-sito .griglia-prodotti { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
.lf-sito .prodotto { background: var(--lfn-bianco); border-radius: 14px; padding: 14px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px 14px; align-content: start; }
@media (min-width: 640px) {
.lf-sito .prodotto { grid-template-columns: 1fr; padding: 16px; grid-template-rows: auto 1fr auto; }
}
.lf-sito .prodotto__foto { aspect-ratio: 1 / 1; border-radius: 10px; background: var(--lfn-crema-2); overflow: hidden; display: grid; place-items: center; padding: 8px; text-align: center; color: var(--lfn-testo2); font-size: var(--lfn-fs-meta); line-height: 1.3; }
.lf-sito .prodotto__foto img { width: 100%; height: 100%; object-fit: cover; }
.lf-sito .prodotto__foto:has(img) { padding: 0; }
.lf-sito .prodotto h3 { font-size: 1.125rem; line-height: 1.3; }
.lf-sito .prodotto p { font-family: var(--lfn-serif); font-size: var(--lfn-fs-meta); line-height: 1.5; margin-top: 6px; }
.lf-sito .prodotto .bottone { grid-column: 1 / -1; min-height: 48px; width: 100%; }
.lf-sito .prodotto__nota { grid-column: 1 / -1; }
.lf-sito .avviso-affiliati { font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); margin-top: 16px; }
.lf-sito .diario__mese { font-size: var(--lfn-fs-h2); line-height: 1.15; padding-top: 48px; margin-bottom: 4px; scroll-margin-top: 16px; }
.lf-sito .voce { display: grid; gap: 12px; padding-block: 28px; border-top: 1px solid var(--lfn-linea); scroll-margin-top: 16px; }
@media (min-width: 1024px) {
.lf-sito .voce { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; padding-block: 40px; }
}
.lf-sito .voce__quando { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; align-content: start; }
@media (min-width: 1024px) {
.lf-sito .voce__quando { display: grid; gap: 4px; }
}
.lf-sito .voce__giorno { font-size: 1.375rem; font-weight: 800; line-height: 1.1; color: var(--lfn-verde); }
@media (min-width: 1024px) {
.lf-sito .voce__giorno { font-size: 1.75rem; }
}
.lf-sito .voce__luogo { font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); }
.lf-sito .voce h3 { font-size: var(--lfn-fs-h3); line-height: 1.25; }
@media (min-width: 1024px) {
.lf-sito .voce h3 { font-size: 1.625rem; }
}
.lf-sito .voce__testo { font-family: var(--lfn-serif); font-size: var(--lfn-fs-leggi); line-height: 1.6; margin-top: 10px; max-width: 36em; }
.lf-sito .voce__foto { display: grid; gap: 8px; margin-top: 18px; }
.lf-sito .voce__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.lf-sito .voce__foto--2, .lf-sito .voce__foto--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lf-sito .voce__foto--2 img, .lf-sito .voce__foto--3 img { aspect-ratio: 4 / 3; }
.lf-sito .voce__foto--3 img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
.lf-sito .voce__foto { max-width: 820px; }
}
.lf-sito .voce__azioni { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
.lf-sito .voce__azioni a { min-height: 44px; display: inline-flex; align-items: center; }
.lf-sito .giornata__data { font-size: var(--lfn-fs-hero); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--lfn-verde); margin-top: 18px; }
.lf-sito .giornata__dove { font-size: var(--lfn-fs-ui); color: var(--lfn-testo2); margin-top: 8px; }
.lf-sito .giornata h1 { font-size: var(--lfn-fs-h1); line-height: 1.08; letter-spacing: -0.025em; margin-top: 18px; }
.lf-sito .giornata .testo-lettura { margin-top: 28px; }
.lf-sito .giornata figure { margin-block: 28px; }
.lf-sito .giornata__nav { display: grid; gap: 4px; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--lfn-linea); }
@media (min-width: 640px) {
.lf-sito .giornata__nav { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.lf-sito .giornata__nav a { display: grid; gap: 2px; padding-block: 12px; text-decoration: none; }
.lf-sito .giornata__nav a:last-child { text-align: right; }
.lf-sito .giornata__nav span { font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); }
.lf-sito .giornata__nav b { font-size: 1.125rem; line-height: 1.3; }
.lf-sito .giornata__nav a:hover b { color: var(--lfn-verde); text-decoration: underline; text-underline-offset: 4px; }
.lf-sito .esigenze { margin-top: 28px; border-top: 2px solid var(--lfn-ink); }
.lf-sito .esigenze a { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 2px 16px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--lfn-linea); text-decoration: none; }
.lf-sito .esigenze span { grid-column: 1; color: var(--lfn-testo2); font-size: var(--lfn-fs-ui); line-height: 1.35; }
.lf-sito .esigenze b { grid-column: 1; font-size: 1.25rem; line-height: 1.25; color: var(--lfn-verde); }
.lf-sito .esigenze i { grid-column: 2; grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; background: var(--lfn-crema-2); display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--lfn-verde); }
.lf-sito .esigenze a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.lf-sito .voce-guida { padding-top: 64px; scroll-margin-top: 16px; }
.lf-sito .voce-guida__titolo { display: flex; gap: 14px; align-items: center; }
.lf-sito .voce-guida__n { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--lfn-verde); color: var(--lfn-crema); display: grid; place-items: center; font-weight: 800; font-size: 1.375rem; }
.lf-sito .voce-guida h2 { font-size: var(--lfn-fs-h2); line-height: 1.15; }
.lf-sito .voce-guida .foto { margin-top: 20px; aspect-ratio: 16 / 10; }
.lf-sito .voce-guida__serve { font-family: var(--lfn-serif); font-size: var(--lfn-fs-leggi); line-height: 1.55; margin-top: 18px; }
.lf-sito .voce-guida .testo-lettura { margin-top: 18px; }
.lf-sito .regole { margin-top: 20px; counter-reset: regola; }
.lf-sito .regole li { counter-increment: regola; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding-block: 18px; border-top: 1px solid var(--lfn-linea); }
.lf-sito .regole li::before { content: counter(regola); font-weight: 800; font-size: var(--lfn-fs-h3); color: var(--lfn-verde); line-height: 1.2; }
.lf-sito .regole b { display: block; font-size: 1.25rem; line-height: 1.3; }
.lf-sito .regole p { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; margin-top: 4px; }
.lf-sito .apertura-persona { display: grid; gap: 28px; margin-top: 20px; }
@media (min-width: 1024px) {
.lf-sito .apertura-persona { grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
}
.lf-sito .apertura-persona img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.lf-sito .apertura-persona h1 { font-size: var(--lfn-fs-hero); line-height: 1.02; letter-spacing: -0.03em; }
.lf-sito .apertura-persona p { font-family: var(--lfn-serif); font-size: 1.375rem; line-height: 1.5; margin-top: 18px; }
.lf-sito .numeri span { font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); }
.lf-sito .parole { margin-top: 20px; border-top: 2px solid var(--lfn-ink); }
.lf-sito .parole div { display: grid; gap: 4px; padding-block: 16px; border-bottom: 1px solid var(--lfn-linea); }
@media (min-width: 640px) {
.lf-sito .parole div { grid-template-columns: 12rem 1fr; gap: 20px; }
}
.lf-sito .parole dt { font-weight: 800; font-size: 1.25rem; color: var(--lfn-verde); }
.lf-sito .parole dd { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; }
.lf-sito .posti { display: grid; gap: 28px; margin-top: 24px; }
@media (min-width: 760px) {
.lf-sito .posti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lf-sito .posti img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.lf-sito .posti h3 { font-size: 1.25rem; margin-top: 12px; }
.lf-sito .posti p { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
.lf-sito .hero-foto img, .lf-sito .card-foto img, .lf-sito .chip { transition: none; }
.lf-sito a.hero-foto:hover img, .lf-sito .card-foto:hover img { transform: none; }
}
.lf-sito .libro-cta__titolo { color: var(--lfn-crema); font-size: 1.625rem; line-height: 1.15; margin: 4px 0 8px; }
.lf-sito .titolo-sez { font-size: var(--lfn-fs-h2); line-height: 1.15; margin-top: 64px; margin-bottom: 16px; scroll-margin-top: 16px; }
@media (min-width: 1024px) {
.lf-sito .colonna .griglia-prodotti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lf-sito .etichetta-cat--verde { background: var(--lfn-verde); color: var(--lfn-crema); }
.lf-sito .regole--punti li::before { content: "•"; }
.lf-sito .nota-mk { margin-top: 20px; }
.lf-sito .lead-blocco { margin-top: 28px; }
.lf-sito .lead-blocco p:first-child { font-size: 1.375rem; line-height: 1.55; }
@media (min-width: 1024px) {
.lf-sito .lead-blocco p:first-child { font-size: 1.5rem; }
}
.lf-sito .colonna figure { margin-block: 28px; }
.lf-sito .voce-guida .voce__azioni { gap: 8px 28px; }
.lf-sito .apertura-persona + .colonna { margin-top: 24px; }
.lf-sito .persona-hero { background: var(--lfn-verde); color: var(--lfn-su-verde); margin-top: 16px; }
@media (min-width: 900px) {
.lf-sito .persona-hero { margin-top: 88px; }
}
.lf-sito .persona-hero__griglia { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
.lf-sito .persona-hero__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; }
}
.lf-sito .persona-hero__testo { padding-block: 36px 8px; align-self: center; }
@media (min-width: 900px) {
.lf-sito .persona-hero__testo { padding-block: 56px; }
}
.lf-sito .persona-hero .occhiello { color: var(--lfn-su-verde-2); }
.lf-sito .persona-hero h1 { color: var(--lfn-crema); font-size: var(--lfn-fs-hero); line-height: 1; letter-spacing: -0.03em; margin-top: 8px; }
.lf-sito .persona-hero__intro { font-family: var(--lfn-serif); font-size: 1.25rem; line-height: 1.55; margin-top: 18px; max-width: 32em; }
@media (min-width: 1024px) {
.lf-sito .persona-hero__intro { font-size: 1.375rem; }
}
.lf-sito .persona-hero .bottone { margin-top: 28px; }
.lf-sito .persona-hero__foto { width: min(62%, 260px); height: auto; justify-self: center; margin-top: 16px; }
@media (min-width: 900px) {
.lf-sito .persona-hero__foto { width: 100%; max-width: 420px; justify-self: end; align-self: end; margin-top: -88px; margin-right: 12px; }
}
.lf-sito .numeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--lfn-ink); max-width: 560px; }
.lf-sito .numeri b { display: block; white-space: nowrap; font-size: 1.5rem; line-height: 1.1; color: var(--lfn-verde); }
@media (min-width: 1024px) {
.lf-sito .numeri b { font-size: 2rem; }
}
.lf-sito .persona-hero .numeri { border-top-color: rgba(243, 233, 210, .35); }
.lf-sito .persona-hero .numeri b { color: var(--lfn-crema); }
.lf-sito .persona-hero .numeri span { color: var(--lfn-su-verde-2); }
.lf-sito .citazione { margin-block: 40px; font-weight: 800; font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--lfn-verde); text-wrap: balance; }
@media (min-width: 1024px) {
.lf-sito .citazione { font-size: 2.125rem; }
}
.lf-sito .scrivimi { margin-top: 64px; background: var(--lfn-crema-2); border-radius: 16px; padding: 28px 24px; display: grid; gap: 12px; scroll-margin-top: 16px; }
@media (min-width: 640px) {
.lf-sito .scrivimi { padding: 40px; }
}
.lf-sito .scrivimi h2 { font-size: var(--lfn-fs-h2); line-height: 1.15; }
.lf-sito .scrivimi p { font-family: var(--lfn-serif); font-size: var(--lfn-fs-leggi); line-height: 1.55; }
.lf-sito .scrivimi__azioni { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 8px; }
.lf-sito .pag-briciole { padding-top: 28px; }
.lf-sito .sezione__testa + .fascia__riga { margin-top: -16px; }
.lf-sito .nontrovata .ricerca { margin: 28px 0 0; max-width: none; }
.lf-sito .nontrovata__t { font-size: var(--lfn-fs-h3); line-height: 1.25; margin-top: 48px; }
.lf-sito .nontrovata__link { margin-top: 12px; border-top: 1px solid var(--lfn-linea-forte); }
.lf-sito .nontrovata__link a { display: grid; gap: 2px; min-height: 44px; padding: 14px 4px; border-bottom: 1px solid var(--lfn-linea); text-decoration: none; }
.lf-sito .nontrovata__link b { font-size: var(--lfn-fs-ui); line-height: 1.3; color: var(--lfn-verde); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lf-sito .nontrovata__link span { font-size: var(--lfn-fs-meta); line-height: 1.4; color: var(--lfn-testo2); }
.lf-sito .nontrovata__link a:hover { background: var(--lfn-crema-2); }
.lf-sito .nontrovata__link a:hover b { color: var(--lfn-ink); }
@media (min-width: 760px) {
.lf-sito .nontrovata__link { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
.lf-sito .nontrovata__ebook { margin-top: 40px; font-size: var(--lfn-fs-meta); line-height: 1.5; color: var(--lfn-testo2); }
.lf-sito .nontrovata__ebook .link { display: inline-flex; align-items: center; min-height: 44px; }
:root { --lfn-th: 61px; --lfn-th-compatta: 57px; } /* compatta: barra 56px + filetto 1px, uguale a ogni larghezza */
@media (min-width: 600px) {
:root { --lfn-th: 65px; }
}
@media (min-width: 1000px) {
:root { --lfn-th: 73px; }
}
@media (prefers-reduced-motion: reduce) {
.testata { transition: none !important; }
}
html { scroll-padding-top: calc(var(--lfn-th) + 12px); }
.testata { position: sticky; top: 0; z-index: 35; height: var(--lfn-th); pointer-events: none; transition: transform .2s ease-out; }
.testata > * { pointer-events: auto; }
.testata.nascosta { transform: translateY(-101%); }
.testata:focus-within { transform: none; }
.testata__vivo { position: relative; background: var(--lfn-crema); border-bottom: 1px solid var(--lfn-linea); }
html.menu-aperto { overflow: hidden; }
.lf-sito .bottone--arancio.quieto { background: transparent; color: var(--lfn-crema); outline: 2px solid var(--lfn-crema); outline-offset: -2px; }
.pie__form button.quieto { background: transparent; color: var(--lfn-crema); border: 2px solid var(--lfn-crema); }
.testata .barra { display: flex; align-items: center; gap: 4px; min-height: 60px; padding-inline: 12px 10px; max-width: 1200px; margin-inline: auto; }
.testata .marchio { margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; font-size: 20px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; color: var(--lfn-verde); text-decoration: none; white-space: nowrap; }
.testata .btn-t { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px; background: none; border: 2px solid transparent; border-radius: 8px; font-size: 17px; font-weight: 800; color: var(--lfn-ink); cursor: pointer; white-space: nowrap; }
.testata .btn-t svg { width: 22px; height: 22px; flex: none; }
.testata .btn-menu { border-color: var(--lfn-ink); padding-inline: 10px 12px; }
.testata .btn-t:hover, .testata .btn-t[aria-expanded="true"] { background: var(--lfn-crema-2); }
.testata .btn-t:active { transform: translateY(1px); }
.testata .se-aperto, .testata .btn-menu[aria-expanded="true"] .se-chiuso { display: none; }
.testata .btn-menu[aria-expanded="true"] .se-aperto { display: inline; }
.testata .barra > *, .testata .bottoni > * { flex-shrink: 0; }
.testata .btn-conto { padding-inline: 0 !important; text-decoration: none; }
.testata .conto-parola { display: none; }
html.menu-aperto .btn-conto { display: none; }
@media (max-width: 599px) {
.testata .barra { gap: 2px; padding-inline: 10px 8px; }
.testata .btn-t { padding-inline: 8px; gap: 5px; }
}
@media (max-width: 429px) {
.testata .btn-menu svg { display: none; }
.testata .btn-menu { padding-inline: 12px; }
}
@media (max-width: 374px) {
.testata .barra { padding-inline: 8px 6px; }
.testata .marchio { font-size: 18px; }
.testata .btn-t { padding-inline: 6px; gap: 4px; }
.testata .btn-menu { padding-inline: 10px; }
}
.testata .voci-barra { display: none; }
.testata .voci-barra a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 8px; font-size: 18px; font-weight: 800; color: var(--lfn-ink); text-decoration: none; white-space: nowrap; }
.testata .voci-barra a:hover { background: var(--lfn-crema-2); }
.testata .voci-barra a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--lfn-verde); text-underline-offset: 8px; }
.testata .libro { display: none; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 2px solid var(--lfn-arancio); background: var(--lfn-arancio); color: var(--lfn-ink); font-size: 18px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.testata .libro:hover { text-decoration: underline; text-underline-offset: 4px; }
.testata.quieta .libro { background: none; border-color: var(--lfn-verde); color: var(--lfn-verde); }
.testata.compatta .barra { min-height: 56px; }
.testata.compatta .marchio { font-size: 19px; }
@media (min-width: 600px) {
.testata .barra { min-height: 64px; padding-inline: 24px; gap: 8px; }
.testata .marchio { font-size: 22px; }
.testata .btn-t { font-size: 18px; padding-inline: 12px; }
.testata .libro { display: inline-flex; }
}
@media (min-width: 1000px) {
.testata .barra { min-height: 72px; gap: 2px; }
.testata .marchio { margin-right: 4px; font-size: 20px; }
.testata .voci-barra { display: block; margin-right: auto; }
.testata .voci-barra ul { display: flex; }
.testata .voci-barra a { padding-inline: 6px; font-size: 17px; }
.testata .btn-cerca { padding-inline: 6px; }
.testata .libro { padding-inline: 12px; }
.testata .btn-menu { display: none; }
.testata .cerca-parola { display: none; }
.testata .btn-cerca, .testata .btn-conto { width: 44px; padding-inline: 0 !important; }
.testata .btn-cerca svg, .testata .btn-conto svg { width: 24px; height: 24px; }
}
@media (min-width: 1200px) {
.testata .barra { padding-inline: 40px; gap: 8px; max-width: 1520px; }
.testata .marchio { margin-right: 20px; font-size: 22px; }
.testata .voci-barra ul { gap: 2px; }
.testata .voci-barra a { padding-inline: 12px; font-size: 18px; }
.testata .libro { padding-inline: 16px; }
}
@media (min-width: 1340px) {
.testata .barra { padding-inline: 56px; gap: 14px; }
.testata .marchio { margin-right: 44px; }
.testata .voci-barra ul { gap: 10px; }
}
.testata .cerca-pannello { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 120px); overflow-y: auto; z-index: 1; padding: 16px 16px 24px; background: var(--lfn-crema); border-bottom: 1px solid var(--lfn-linea-forte); }
.testata .ricerca, .lf-sito .ricerca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; max-width: 760px; margin-inline: auto; }
.testata .ricerca__l, .lf-sito .ricerca__l { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.testata .ricerca__et, .lf-sito .ricerca__et { font-size: 16px; font-weight: 800; color: var(--lfn-testo2); }
.testata .ricerca input, .lf-sito .ricerca input { width: 100%; min-height: 52px; padding: 0 14px; background: #fff; border: 2px solid var(--lfn-ink); border-radius: 8px; font-size: 18px; }
.testata .ricerca__vai, .lf-sito .ricerca__vai { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 16px; background: var(--lfn-verde); color: var(--lfn-crema); border: 0; border-radius: 8px; font-size: 18px; font-weight: 800; cursor: pointer; }
.testata .ricerca__vai svg, .lf-sito .ricerca__vai svg { width: 20px; height: 20px; }
.testata .sug { grid-column: 1 / -1; display: grid; gap: 20px; margin-top: 12px; }
.testata .gruppo__t { font-size: 16px; font-weight: 800; color: var(--lfn-testo2); padding-bottom: 6px; border-bottom: 1px solid var(--lfn-linea-forte); }
.testata .sug ul a, .testata .libro-mini { display: block; padding: 12px 4px; font-size: 18px; line-height: 1.35; text-decoration: none; border-bottom: 1px solid var(--lfn-linea); }
.testata .libro-mini { display: flex; align-items: center; gap: 12px; padding-block: 8px; }
.testata .sug ul a:hover, .testata .libro-mini:hover { background: var(--lfn-crema-2); }
.testata .libro-mini img { width: 40px; height: 62px; border-radius: 2px; flex: none; }
.testata .libro-mini > span > span { display: block; font-size: 16px; color: var(--lfn-testo2); }
@media (min-width: 600px) {
.testata .cerca-pannello { padding-inline: 24px; }
.testata .sug { grid-template-columns: 3fr 2fr; gap: 32px; }
}
.testata .pannello { container: menu / size; position: fixed; left: 0; right: 0; bottom: 0; top: var(--lfn-pannello-top, 61px); z-index: 36; overflow-y: auto; overscroll-behavior: contain; background: var(--lfn-crema); border-top: 1px solid var(--lfn-linea); }
.testata .pannello__dentro { max-width: 640px; margin-inline: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.testata .pannello .ricerca__et { font-size: 16px; white-space: nowrap; }
.testata .pannello .ricerca input, .testata .pannello .ricerca__vai { min-height: 48px; }
.testata .voci-grandi a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 7px 4px; text-decoration: none; border-bottom: 1px solid var(--lfn-linea); }
.testata .voci-grandi a:hover { background: var(--lfn-crema-2); }
.testata .mv-voce { font-size: 22px; font-weight: 800; line-height: 1.2; }
.testata .mv-desc { font-size: 16px; line-height: 1.3; color: var(--lfn-testo2); }
.testata .voci-grandi a[aria-current] .mv-voce { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--lfn-verde); text-underline-offset: 6px; }
@container menu (max-height: 700px) {
.testata .mv-desc { display: none; }
}
.testata .voci-piccole { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 6px; }
.testata .voci-piccole a, .testata .social a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 800; color: var(--lfn-verde); text-underline-offset: 4px; }
.testata .ebook-box { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--lfn-crema-2); border-radius: 12px; }
.testata .ebook-box img { width: 44px; height: 69px; border-radius: 2px; flex: none; }
.testata .ebook-box__testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.testata .ebook-box__t { font-size: 18px; font-weight: 800; line-height: 1.2; }
.testata .ebook-box__m { font-size: 16px; color: var(--lfn-testo2); }
.testata .btn-verde { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--lfn-verde); color: var(--lfn-crema); border-radius: 8px; font-size: 18px; font-weight: 800; text-decoration: none; }
.testata .btn-verde:hover { background: var(--lfn-verde-scuro); }
.testata .social { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.testata .social__ico { justify-content: center; width: 44px; border: 2px solid var(--lfn-linea-forte); border-radius: 10px; }
.testata .social__ico svg { width: 24px; height: 24px; }
.testata .social__ico:hover { background: var(--lfn-crema-2); }
.testata .social__conto { margin-left: 8px; gap: 6px; }
.testata .social__conto svg { width: 20px; height: 20px; }
.testata .social a { color: var(--lfn-ink); }
.pie { background: var(--lfn-verde-scuro); color: var(--lfn-su-verde); }
.pie :focus-visible { outline-color: var(--lfn-crema); }
.pie__news { background: var(--lfn-verde); }
.pie__news-dentro { max-width: 1200px; margin-inline: auto; padding: 32px 20px; display: grid; gap: 18px; }
.pie__news h2 { font-size: 34px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: var(--lfn-crema); text-wrap: balance; }
.pie__news p { margin-top: 10px; font-family: var(--lfn-serif); font-size: 19px; line-height: 1.5; max-width: 30em; }
.pie__form label { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 800; color: var(--lfn-crema); }
.pie__form-riga { display: flex; flex-wrap: wrap; gap: 8px; }
.pie__form input { flex: 1 1 180px; min-width: 0; min-height: 52px; padding: 0 14px; background: var(--lfn-crema); color: var(--lfn-ink); border: 2px solid var(--lfn-crema); border-radius: 8px; font-size: 18px; }
.pie__form button { flex: none; min-height: 52px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--lfn-arancio); color: var(--lfn-ink); font-size: 18px; font-weight: 800; cursor: pointer; }
.pie__form button:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie__leo { max-width: 1200px; margin-inline: auto; padding: 32px 20px 0; display: grid; gap: 28px; }
.pie__logo { display: block; height: 30px; width: auto; }
.testata .marchio__logo { display: block; height: 17px; width: auto; }
@media (min-width: 430px) {
.testata .marchio__logo { height: 19px; }
}
@media (max-width: 374px) {
.testata .marchio__logo { height: 15px; }
.testata .cerca-parola { display: none; }
.testata .btn-cerca { width: 44px; padding-inline: 0 !important; }
}
@media (min-width: 600px) {
.testata .marchio__logo { height: 22px; }
}
@media (min-width: 1200px) {
.testata .marchio__logo { height: 26px; }
}
.pie__nome { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--lfn-crema); }
.pie__bio { margin-top: 8px; font-family: var(--lfn-serif); font-size: 18px; line-height: 1.5; max-width: 30em; }
.pie__canali { margin-top: 16px; display: flex; gap: 12px; }
.pie__canale { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--lfn-su-verde-2); border-radius: 10px; color: var(--lfn-crema); }
.pie__canale svg { width: 26px; height: 26px; }
.pie__canale:hover { background: var(--lfn-crema); color: var(--lfn-verde-scuro); border-color: var(--lfn-crema); }
.pie__mappa { display: grid; gap: 14px; }
.pie__col h2 { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--lfn-su-verde-2); }
.pie__col ul { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 0 18px; }
.pie__col a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; line-height: 1.3; color: var(--lfn-su-verde); text-decoration: none; }
.pie__col a:hover, .pie__col a:focus-visible { color: var(--lfn-crema); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pie__legale { max-width: 1200px; margin: 20px auto 0; padding: 14px 20px 24px; border-top: 1px solid rgba(243, 233, 210, .2); display: grid; gap: 2px; font-size: 16px; color: var(--lfn-su-verde-2); }
.pie__legale ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
.pie__legale a, .pie__legale button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 16px; color: var(--lfn-su-verde-2); text-decoration: none; }
.pie__legale a:hover, .pie__legale button:hover, .pie__legale a:focus-visible, .pie__legale button:focus-visible { color: var(--lfn-crema); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 639px) {
.pie__leo { gap: 28px; }
.pie__mappa { gap: 28px; }
.pie__col { padding-top: 18px; border-top: 1px solid rgba(243, 233, 210, .25); }
.pie__col ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 6px; }
.pie__col a { display: flex; padding-block: 5px; color: var(--lfn-crema); }
.pie__legale { display: flex; flex-direction: column; gap: 6px; }
.pie__legale ul { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-bottom: 8px; }
}
@media (min-width: 900px) {
.pie__news-dentro { grid-template-columns: 1fr 1fr; align-items: end; gap: 56px; padding: 56px 40px; }
.pie__news h2 { font-size: 44px; }
.pie__leo { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; padding: 48px 40px 16px; }
.pie__mappa { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pie__col ul { display: block; margin-top: 8px; }
.pie__col a { display: flex; width: fit-content; }
.pie__legale { padding-inline: 40px; grid-template-columns: auto 1fr; align-items: center; gap: 0 32px; }
.pie__legale p:last-child { grid-column: 1 / -1; }
}
/* ==========================================================================
Raccordi per WordPress (non nel mockup): basi di testata e piè, barra di amministrazione,
testata vecchia ancora attiva, elementi aggiunti (iscrizione, conteggio delle sezioni).
========================================================================== */
.lf-sito :is(button, input):not([type="checkbox"]) { letter-spacing: normal; text-transform: none; }
.lf-simboli { position: absolute; width: 0; height: 0; overflow: hidden; }
.lf-sito { display: block; }
/* barra di amministrazione (solo da loggati) */
.admin-bar .testata { top: 32px; }
.admin-bar .lf-sito .lettura { top: 32px; }
@media (max-width: 782px) { .admin-bar .testata, .admin-bar .lf-sito .lettura { top: 46px; } }
@media (max-width: 600px) { .admin-bar .testata, .admin-bar .lf-sito .lettura { top: 0; } }
/* fino allo scambio le pagine nuove stanno sotto la testata Elementor 620,
che sopra i 1024 px è trasparente e ha margin-bottom: -90px: si riservano i 90 px */
@media (min-width: 1025px) { body:not(.lf-sito-on) .lf-sito { padding-top: 90px; } }
/* colonna laterale dell'articolo: sotto il bordo vero della testata (lo misura blog.js) */
@media (min-width: 1180px) { .lf-sito .laterale { top: calc(var(--lf-header-h, 0px) + 24px); } }
.lf-sito h2[id], .lf-sito .fascia, .lf-sito .scrivimi { scroll-margin-top: calc(var(--lfn-th) + 16px); }
/* piè: iscrizione */
.pie .pie__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pie .pie__privacy { margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--lfn-su-verde); }
.pie .pie__privacy a { color: var(--lfn-crema); text-decoration: underline; text-underline-offset: 3px; }
.pie .pie__esito { margin-top: 10px; font-size: 17px; font-weight: 800; color: var(--lfn-crema); }
.pie .pie__news { position: relative; }
.pie .pie__legale p a { text-decoration: underline; text-underline-offset: 3px; min-height: 0; display: inline; }
.pie .pie__legale li > a[role="button"] { cursor: pointer; }
/* blog: numero di articoli accanto al nome della sezione */
.lf-sito .fascia__n { font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); }
.lf-sito .lf-avviso { background: #FFF1B8; color: #3A2E00; padding: 10px 14px; border-radius: 8px; font-size: 16px; }
/* home: "Dal blog" largo quanto il contenitore (fino al 04/10 era fermo a 860 px e a destra restava vuoto) */
/* piè: il logo resta alto 30px (".pie img" con height:auto lo allargava a tutta la colonna) */
.pie .pie__logo { height: 30px; width: auto; max-width: 100%; }
/* niente linea bianca sotto il piè: lo sfondo della pagina oltre il piè è il suo verde (pixel frazionari, rimbalzo dello scroll) */
html { background-color: #1F3F1C; }
/* piè, colonna di Leonardo: aria fra logo, testo e icone (".pie :is(p, ul)" azzerava i margini) */
.pie .pie__bio { margin-top: 14px; }
.pie .pie__canali { margin-top: 28px; }
/* icone: al passaggio fondo crema e icona verde (".pie a:hover { color: inherit }" la lasciava crema su crema) */
.pie a.pie__canale:is(:hover, :focus-visible) { background: #FFF4DE; color: #1F3F1C; border-color: #FFF4DE; }
/* ==========================================================================
Card degli articoli: mockup 22-sito-wp/mockup-card-blog, variante A (approvata da Luca il 03/10/2026).
Foto piena con categoria e titolo crema sopra, descrizione e minuti sotto la foto. Un solo .
1:1 nel blog (.griglia-card), 4:3 e al massimo due colonne in home e in fondo agli articoli (.griglia-card--basse).
========================================================================== */
.lf-sito .griglia-card {
display: grid; gap: 40px;
/* sfumatura dietro categoria e titolo: parte 72 px sopra la categoria e segue l'altezza del testo,
con tanti passaggi per non vedere bande (titolo crema in AA anche su foto chiare) */
--lfn-velo: linear-gradient(to bottom,
rgba(17, 27, 15, 0) 0px, rgba(17, 27, 15, .06) 12px, rgba(17, 27, 15, .16) 24px,
rgba(17, 27, 15, .30) 36px, rgba(17, 27, 15, .44) 48px, rgba(17, 27, 15, .56) 60px,
rgba(17, 27, 15, .66) 72px, rgba(17, 27, 15, .76) 90px, rgba(17, 27, 15, .84) 110px,
rgba(17, 27, 15, .88) 130px);
}
@media (min-width: 640px) { .lf-sito .griglia-card { gap: 44px 24px; } }
@media (min-width: 1024px) { .lf-sito .griglia-card { gap: 52px 28px; } }
/* aspect-ratio scritto per esteso: Seraphinite scarta aspect-ratio con var() */
.lf-sito .griglia-card--basse .card-blog__foto { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .lf-sito .griglia-card--basse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* home, "Dal blog" (.griglia-card--home, 5 articoli, 04/10 Luca): da 1024 px 3 colonne × 2 righe, la prima card alta
due righe con la foto che riempie l'altezza, le altre 2×2 accanto; 640-1023 px la prima su tutta la riga in 16:9,
le altre 2×2; telefono una colonna. "Da leggere dopo" e /blog/ non cambiano. */
@media (min-width: 640px) and (max-width: 1023px) {
.lf-sito .griglia-card--home > .card-blog:first-child { grid-column: 1 / -1; }
.lf-sito .griglia-card--home > .card-blog:first-child .card-blog__foto { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
.lf-sito .griglia-card--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lf-sito .griglia-card--home > .card-blog:first-child { grid-row: span 2; grid-template-rows: minmax(0, 1fr) auto auto; align-content: stretch; }
.lf-sito .griglia-card--home > .card-blog:first-child .card-blog__foto { aspect-ratio: auto; min-height: 320px; }
.lf-sito .griglia-card--home > .card-blog:first-child .card-blog__foto img { position: absolute; inset: 0; }
.lf-sito .griglia-card--home > .card-blog:first-child .card-blog__su { padding: 96px 24px 24px; gap: 14px; }
.lf-sito .griglia-card--home > .card-blog:first-child h3 { font-size: 1.875rem; line-height: 1.12; }
}
.lf-sito .card-blog {
display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "foto" "dek" "meta";
align-content: start; text-decoration: none; color: var(--lfn-ink); border-radius: 16px;
-webkit-tap-highlight-color: transparent;
}
.lf-sito .card-blog__foto {
grid-area: foto; position: relative; overflow: hidden; isolation: isolate;
aspect-ratio: 1 / 1; border-radius: 14px; background: var(--lfn-verde-scuro);
transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.lf-sito .card-blog__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.lf-sito .card-blog__su {
grid-area: foto; align-self: end; position: relative; z-index: 1; display: grid; align-content: end; justify-items: start; gap: 10px;
padding: 72px 18px 18px; background: var(--lfn-velo); border-radius: 0 0 14px 14px;
}
.lf-sito .card-blog__cat { background: var(--lfn-crema); color: var(--lfn-verde-scuro); font-size: .875rem; font-weight: 800; line-height: 1.2; letter-spacing: .01em; padding: 5px 11px; border-radius: 999px; }
.lf-sito .card-blog h3 { font-size: 1.375rem; line-height: 1.16; color: var(--lfn-crema); }
.lf-sito .card-blog__dek { grid-area: dek; margin-top: 14px; font-family: var(--lfn-serif); font-size: 1.0625rem; line-height: 1.55; }
.lf-sito .card-blog__meta { grid-area: meta; margin-top: 8px; font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); }
@media (min-width: 640px) {
.lf-sito .card-blog__su { padding-inline: 16px; padding-bottom: 16px; }
.lf-sito .card-blog h3 { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
.lf-sito .card-blog__su { padding-inline: 20px; padding-bottom: 20px; gap: 12px; }
.lf-sito .card-blog h3 { font-size: 1.375rem; }
}
/* stati: la foto si avvicina, il titolo si sottolinea; alla pressione la foto rientra appena */
.lf-sito .card-blog:hover .card-blog__foto img { transform: scale(1.04); }
.lf-sito .card-blog:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lf-sito .card-blog:active .card-blog__foto { transform: scale(.985); }
.lf-sito .card-blog:focus-visible { outline: 3px solid var(--lfn-verde); outline-offset: 6px; border-radius: 16px; }
/* telefono: le fasce del blog scorrono di lato; aria sopra e sotto per non tagliare il contorno del fuoco */
@media (max-width: 639px) {
.lf-sito .griglia-card.scorri { gap: 16px; padding-block: 10px; margin-block: -10px; }
.lf-sito .scorri .card-blog h3 { font-size: 1.25rem; }
.lf-sito .scorri .card-blog__su { padding-inline: 16px; padding-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.lf-sito .card-blog__foto, .lf-sito .card-blog__foto img { transition: none; }
.lf-sito .card-blog:hover .card-blog__foto img, .lf-sito .card-blog:active .card-blog__foto { transform: none; }
}
/* card dentro il corpo dell'articolo ("Da leggere dopo"): il titolo non prende il margine dei titoli dell'articolo */
.lf-sito .art__corpo .card-blog h3 { margin: 0; }
/* home, "Da dove parti?" (04/10 Luca): tutte le sezioni con articoli, al massimo due righe da quattro da 640 px.
Telefono: due colonne compatte, foto 4:3. "Tutto il blog" chiude la riga quando ne manca una. */
.lf-sito .porta .porta__tutti {
display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 10px;
background: var(--lfn-verde-scuro); color: var(--lfn-crema); font-size: 2.5rem; line-height: 1;
}
@media (max-width: 639px) {
.lf-sito .porte { gap: 20px 12px; }
.lf-sito .porta { gap: 8px; }
.lf-sito .porta img, .lf-sito .porta .porta__tutti { aspect-ratio: 4 / 3; }
.lf-sito .porta h3 { font-size: 1.0625rem; }
}
@media (min-width: 640px) and (max-width: 1023px) { .lf-sito .porte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; } }
.lf-sito .porta--tutti:hover .porta__tutti { background: var(--lfn-verde); }
@media (prefers-reduced-motion: no-preference) {
.lf-sito .porta .porta__tutti { transition: background-color .2s ease; }
}
/* ==========================================================================
Video degli articoli che si stacca in un riquadro (richiesta di Luca, 03/10/2026; logica in blog.js).
Quando il video suona e lo scorri fuori vista, .video__riquadro prende la classe .fuori e diventa fisso:
è sempre lo stesso elemento, quindi l'iframe non si ricarica. .video__posto tiene l'altezza: niente salti.
Telefono: in alto, largo quanto lo schermo meno i margini, sotto la testata quando c'è (la barra "Indice" resta libera).
Da 640 px: in basso a destra, 360 px, alto 84 px dal fondo: sopra la barra verde "Indice" (fino a 1179 px)
e sopra la linguetta "Le mie preferenze di consenso" di ConsentMagic (in basso a destra, dopo la scelta).
Niente ombra: un filetto chiaro. Pulsanti da 44 px.
========================================================================== */
.lf-sito .video__posto { aspect-ratio: 16 / 9; }
.lf-sito .video__riquadro.fuori {
position: fixed; z-index: 24; left: 16px; right: 16px; top: calc(8px + env(safe-area-inset-top, 0px));
border-radius: 12px; overflow: hidden; background: var(--lfn-verde-scuro);
outline: 1px solid rgba(243, 233, 210, .35); outline-offset: -1px;
transform: translateY(var(--lfn-th)); transition: transform .2s ease-out;
animation: lf-riquadro .24s cubic-bezier(.16, 1, .3, 1);
}
/* testata nascosta (scendendo): il riquadro sale in cima */
.lf-sito-on:has(.testata.nascosta) .lf-sito .video__riquadro.fuori { transform: none; }
.lf-sito .video__riquadro.fuori .video__cornice { border-radius: 0; }
.lf-sito .video__comandi { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 4px; color: var(--lfn-crema); }
.lf-sito .video__comandi[hidden] { display: none; }
.lf-sito .video__comandi button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px;
border: 0; border-radius: 8px; background: none; color: inherit; font-family: var(--lfn-sans); font-size: var(--lfn-fs-meta); font-weight: 800; cursor: pointer;
}
.lf-sito .video__comandi button:hover { background: rgba(243, 233, 210, .12); }
.lf-sito .video__comandi button:active { background: rgba(243, 233, 210, .2); }
.lf-sito .video__comandi button:focus-visible { outline: 3px solid var(--lfn-crema); outline-offset: -3px; }
.lf-sito .video__comandi svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lf-sito .video__chiudi { padding: 0; }
@media (min-width: 640px) {
.lf-sito .video__riquadro.fuori { left: auto; top: auto; right: 24px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 360px; transform: none; transition: none; }
}
@keyframes lf-riquadro { from { opacity: 0; scale: .96; } }
@media (prefers-reduced-motion: reduce) { .lf-sito .video__riquadro.fuori { animation: none; transition: none; } }
/* CTA dell'ebook a fine articolo, al telefono (Luca, 03/10/2026): copertina piccola accanto a occhiello e titolo,
descrizione e pulsante a tutta larghezza, prezzo sopra il pulsante. Da 640 px resta com'è. */
@media (max-width: 639px) {
.lf-sito .libro-cta { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: center; padding: 22px 20px; }
.lf-sito .libro-cta > img { width: 96px; grid-row: 1 / span 2; align-self: center; }
.lf-sito .libro-cta > div { display: contents; }
.lf-sito .libro-cta .occhiello { grid-column: 2; align-self: end; }
.lf-sito .libro-cta .libro-cta__titolo,
.lf-sito .art__corpo .libro-cta h2 { grid-column: 2; align-self: start; font-size: 1.375rem; margin: 2px 0 0; }
.lf-sito .libro-cta > div > p:not(.occhiello) { grid-column: 1 / -1; margin-top: 18px; }
.lf-sito .libro-cta__azione { grid-column: 1 / -1; display: grid; gap: 10px; margin-top: 18px; }
.lf-sito .libro-cta__azione span { order: -1; }
.lf-sito .libro-cta__azione .bottone { width: 100%; justify-content: center; }
}
/* ==========================================================================
Pagine di servizio (03/10/2026 notte, agente pagine-servizio-live): Il mio account, come scaricare,
documenti legali, guida gratis, pagine email, ricerca e archivi. Template in 25-servizio-wp/child/lf-servizio/.
La prima parte viene da 20-pagine-servizio/servizio.css (rigenerabile con 25-servizio-wp/estrai_css.py).
========================================================================== */
.lf-sito .campo { display: grid; gap: 6px; }
.lf-sito .campo + .campo, .lf-sito .campo + .campi-riga, .lf-sito .campi-riga + .campo, .lf-sito .campi-riga + .campi-riga { margin-top: 18px; }
.lf-sito .campo label, .lf-sito .campo__et { font-size: var(--lfn-fs-meta); font-weight: 800; line-height: 1.3; }
.lf-sito .campo__fac { font-weight: 400; color: var(--lfn-testo2); }
.lf-sito .campo input, .lf-sito .campo select { width: 100%; min-height: 54px; padding: 0 14px; background: var(--lfn-bianco); color: var(--lfn-ink); border: 2px solid var(--lfn-linea-forte); border-radius: 10px; font: inherit; font-size: 18px; }
.lf-sito .campo select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231B2217' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.lf-sito .campo input:focus-visible, .lf-sito .campo select:focus-visible { outline: 3px solid var(--lfn-verde); outline-offset: 1px; border-color: var(--lfn-verde); }
.lf-sito .campo__aiuto { font-size: var(--lfn-fs-meta); line-height: 1.45; color: var(--lfn-testo2); }
.lf-sito .campi-riga { display: grid; gap: 18px; }
.lf-sito .campi-riga > .campo { margin-top: 0; }
@media (min-width: 480px) {
.lf-sito .campi-riga { grid-template-columns: 2fr 3fr; }
.lf-sito .campi-riga--pari { grid-template-columns: 1fr 1fr; }
}
.lf-sito .link-piccolo { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--lfn-fs-meta); font-weight: 800; color: var(--lfn-verde); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lf-sito .link-piccolo:hover { color: var(--lfn-ink); }
.lf-sito .spunta { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; cursor: pointer; }
.lf-sito .spunta input { appearance: none; width: 28px; height: 28px; margin: 0; cursor: pointer; border: 2px solid var(--lfn-ink); border-radius: 6px; background: var(--lfn-bianco); display: grid; place-items: center; }
.lf-sito .spunta input::after { content: ""; width: 14px; height: 8px; margin-top: -4px; border-left: 3px solid var(--lfn-crema); border-bottom: 3px solid var(--lfn-crema); transform: rotate(-45deg) scale(0); transition: transform .12s ease-out; }
.lf-sito .spunta input:checked { background: var(--lfn-verde); border-color: var(--lfn-verde); }
.lf-sito .spunta input:checked::after { transform: rotate(-45deg) scale(1); }
.lf-sito .spunta input:focus-visible { outline: 3px solid var(--lfn-verde); outline-offset: 3px; }
.lf-sito .spunta__testo { font-size: 17px; line-height: 1.45; padding-top: 2px; }
.lf-sito .spunta__testo a { color: var(--lfn-verde); font-weight: 800; text-underline-offset: 4px; }
.lf-sito .bonus-file { grid-column: 1 / -1; border-top: 1px solid var(--lfn-linea); }
@media (min-width: 640px) {
.lf-sito .bonus-file { grid-column: 2; }
}
.lf-sito .bonus-file a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--lfn-linea); text-decoration: none; font-weight: 800; }
.lf-sito .bonus-file a span { font-weight: 400; color: var(--lfn-testo2); font-size: var(--lfn-fs-meta); white-space: nowrap; }
.lf-sito .bonus-file a:hover b { color: var(--lfn-verde); text-decoration: underline; text-underline-offset: 4px; }
.lf-sito .bottone--verde svg, .lf-sito .bottone--contorno svg, .lf-sito .bottone--crema svg { width: 20px; height: 20px; }
.lf-sito .conto { display: grid; gap: 24px; margin-top: 8px; }
@media (min-width: 1024px) {
.lf-sito .conto { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 24px; }
}
.lf-sito .conto__nav .categorie { margin-top: 0; }
@media (min-width: 1024px) {
.lf-sito .conto__nav { position: sticky; top: calc(var(--lfn-th) + 24px); }
.lf-sito .conto__nav .categorie { display: grid; gap: 0; border-top: 1px solid var(--lfn-linea); }
.lf-sito .conto__nav .chip { border: 0; border-bottom: 1px solid var(--lfn-linea); border-radius: 0; min-height: 52px; padding-inline: 4px; }
.lf-sito .conto__nav .chip[aria-current="true"] { background: none; color: var(--lfn-verde); }
.lf-sito .conto__nav .chip[aria-current="true"]::before { content: ""; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--lfn-verde); }
}
.lf-sito .conto__saluto { font-size: var(--lfn-fs-h1); line-height: 1.06; letter-spacing: -0.025em; }
.lf-sito .conto__sotto { font-family: var(--lfn-serif); font-size: var(--lfn-fs-leggi); line-height: 1.5; margin-top: 10px; color: var(--lfn-ink); }
.lf-sito .conto h2 { font-size: var(--lfn-fs-h2); line-height: 1.15; }
.lf-sito .conto__sezione + .conto__sezione { margin-top: 48px; }
.lf-sito .ebook-conto { margin-top: 24px; padding: 20px; border-radius: 18px; background: var(--lfn-bianco); display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px 20px; align-items: center; }
@media (min-width: 640px) {
.lf-sito .ebook-conto { grid-template-columns: 132px minmax(0, 1fr); padding: 28px; }
}
.lf-sito .ebook-conto img { width: 100%; height: auto; border-radius: 4px; outline: 1px solid var(--lfn-linea); outline-offset: -1px; }
.lf-sito .ebook-conto h3 { font-size: 1.375rem; line-height: 1.2; }
.lf-sito .ebook-conto p { margin-top: 4px; font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); line-height: 1.45; }
.lf-sito .ebook-conto .bottone { grid-column: 1 / -1; width: 100%; min-height: 58px; font-size: 1.1875rem; border-radius: 12px; }
@media (min-width: 640px) {
.lf-sito .ebook-conto .bottone { grid-column: 2; width: auto; justify-self: start; padding-inline: 28px; }
.lf-sito .ebook-conto .bonus-file { grid-column: 2; }
}
.lf-sito .ebook-conto .bottone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lf-sito .aggiorna { margin-top: 14px; font-family: var(--lfn-serif); font-size: 1.0625rem; line-height: 1.55; color: var(--lfn-testo2); }
.lf-sito .due-riquadri { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 760px) {
.lf-sito .due-riquadri { grid-template-columns: 1fr 1fr; }
}
.lf-sito .riquadro { padding: 22px; border-radius: 16px; background: var(--lfn-crema-2); display: grid; gap: 10px; align-content: start; }
.lf-sito .riquadro h3 { font-size: 1.25rem; line-height: 1.25; }
.lf-sito .riquadro p { font-family: var(--lfn-serif); font-size: 1.0625rem; line-height: 1.55; }
.lf-sito .riquadro .bottone { justify-self: start; min-height: 48px; margin-top: 4px; }
.lf-sito .riquadro--verde { background: var(--lfn-verde); color: var(--lfn-su-verde); }
.lf-sito .riquadro--verde h3 { color: var(--lfn-crema); }
.lf-sito .riquadro--verde :focus-visible { outline-color: var(--lfn-crema); }
.lf-sito .riquadro ul a { display: inline-flex; align-items: center; min-height: 44px; }
.lf-sito .ordini { margin-top: 16px; border-top: 2px solid var(--lfn-ink); }
.lf-sito .ordine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding-block: 16px; border-bottom: 1px solid var(--lfn-linea); }
.lf-sito .ordine b { font-size: 1.125rem; }
.lf-sito .ordine span { font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); line-height: 1.45; }
.lf-sito .ordine__tot { font-weight: 800; font-size: 1.125rem; text-align: right; }
.lf-sito .stato { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--lfn-crema-2); color: var(--lfn-verde-scuro) !important; font-weight: 800; }
.lf-sito .ordine .link-piccolo { grid-column: 1 / -1; justify-self: start; }
.lf-sito .modulo-conto { margin-top: 20px; max-width: 560px; }
.lf-sito .modulo-conto h3 { font-size: var(--lfn-fs-h3); margin-top: 40px; margin-bottom: 14px; }
.lf-sito .modulo-conto h3:first-child { margin-top: 0; }
.lf-sito .modulo-conto .bottone { margin-top: 22px; }
.lf-sito .esci { margin-top: 20px; }
.lf-sito .accesso { display: grid; gap: 32px; }
@media (min-width: 900px) {
.lf-sito .accesso { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
}
.lf-sito .accesso__box { padding: 22px; border-radius: 16px; background: var(--lfn-verde); color: var(--lfn-su-verde); }
.lf-sito .accesso__box h2 { color: var(--lfn-crema); font-size: var(--lfn-fs-h3); }
.lf-sito .accesso__box p { margin-top: 8px; font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; }
.lf-sito .accesso__box .campo label { color: var(--lfn-crema); }
.lf-sito .accesso__box .campo input { border-color: var(--lfn-crema); }
.lf-sito .accesso__box .bottone { margin-top: 14px; }
.lf-sito .accesso__box :focus-visible { outline-color: var(--lfn-crema); }
.lf-sito .guida-strade { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 760px) {
.lf-sito .guida-strade { grid-template-columns: 1fr 1fr; }
}
.lf-sito .strada { display: grid; gap: 6px; padding: 20px; border-radius: 16px; text-decoration: none; background: var(--lfn-bianco); border: 2px solid transparent; }
.lf-sito .strada:hover { border-color: var(--lfn-verde); }
.lf-sito .strada__et { font-size: var(--lfn-fs-meta); font-weight: 800; color: var(--lfn-verde); }
.lf-sito .strada b { font-size: 1.25rem; line-height: 1.25; }
.lf-sito .strada span:last-child { font-family: var(--lfn-serif); font-size: 1.0625rem; line-height: 1.5; color: var(--lfn-testo2); }
.lf-sito .strada--consigliata { background: var(--lfn-verde); color: var(--lfn-su-verde); }
.lf-sito .strada--consigliata .strada__et, .lf-sito .strada--consigliata span:last-child { color: var(--lfn-su-verde-2); }
.lf-sito .strada--consigliata b { color: var(--lfn-crema); }
.lf-sito .strada--consigliata:hover { border-color: var(--lfn-crema); }
.lf-sito .strada--consigliata:focus-visible { outline-color: var(--lfn-verde-scuro); }
.lf-sito .guida-passi .passo { align-items: start; }
.lf-sito .guida-passi .passo p { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; }
.lf-sito .passo__corpo { min-width: 0; }
.lf-sito .schermo { margin-top: 14px; max-width: 360px; padding: 14px; border: 2px solid var(--lfn-linea-forte); border-radius: 18px; background: var(--lfn-bianco); font-family: var(--lfn-sans); }
.lf-sito .schermo__barra { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--lfn-linea); font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); overflow-wrap: anywhere; }
.lf-sito .schermo__barra::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lfn-linea-forte); }
.lf-sito .schermo p { font-family: var(--lfn-sans) !important; font-size: var(--lfn-fs-meta) !important; line-height: 1.45 !important; }
.lf-sito .schermo__da { color: var(--lfn-testo2); }
.lf-sito .schermo__ogg { font-weight: 800; margin-top: 4px; }
.lf-sito .schermo__btn { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 12px; border-radius: 10px; background: var(--lfn-verde); color: var(--lfn-crema); font-weight: 800; font-size: var(--lfn-fs-meta); }
.lf-sito .schermo__btn--contorno { background: none; color: var(--lfn-verde); border: 2px solid var(--lfn-verde); }
.lf-sito .schermo__campo { min-height: 44px; margin-top: 8px; padding: 10px 12px; border: 2px solid var(--lfn-linea-forte); border-radius: 8px; font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); }
.lf-sito .schermo__evid { outline: 3px solid var(--lfn-verde); outline-offset: 3px; }
.lf-sito .schermo__riga { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--lfn-linea); font-size: var(--lfn-fs-meta); }
.lf-sito .schermo__riga b { color: var(--lfn-verde); }
.lf-sito .dispositivi { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 900px) {
.lf-sito .dispositivi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.lf-sito .dispositivo { padding: 20px; border-radius: 16px; background: var(--lfn-bianco); }
.lf-sito .dispositivo h3 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; line-height: 1.2; }
.lf-sito .dispositivo h3 svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--lfn-verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lf-sito .dispositivo ol { margin-top: 12px; counter-reset: d; display: grid; gap: 10px; }
.lf-sito .dispositivo li { counter-increment: d; display: grid; grid-template-columns: 28px 1fr; gap: 8px; font-family: var(--lfn-serif); font-size: 1.0625rem; line-height: 1.5; }
.lf-sito .dispositivo li::before { content: counter(d); font-family: var(--lfn-sans); font-weight: 800; color: var(--lfn-verde); }
.lf-sito .dispositivo__nota { margin-top: 12px; font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); line-height: 1.45; }
.lf-sito .domande { margin-top: 16px; border-top: 2px solid var(--lfn-ink); }
.lf-sito .domande details { border-bottom: 1px solid var(--lfn-linea); }
.lf-sito .domande summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 12px; align-items: center; min-height: 60px; padding-block: 12px; cursor: pointer; font-weight: 800; font-size: 1.1875rem; line-height: 1.3; }
.lf-sito .domande summary::-webkit-details-marker { display: none; }
.lf-sito .domande summary::after { content: "+"; width: 32px; height: 32px; border-radius: 50%; background: var(--lfn-crema-2); display: grid; place-items: center; font-size: 1.375rem; line-height: 1; color: var(--lfn-verde); transition: transform .15s ease-out; }
.lf-sito .domande details[open] summary::after { transform: rotate(45deg); }
.lf-sito .domande summary:hover { color: var(--lfn-verde); }
.lf-sito .domande__risposta { padding-bottom: 20px; font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.6; max-width: 40em; }
.lf-sito .domande__risposta p + p, .lf-sito .domande__risposta p + ul, .lf-sito .domande__risposta ul + p { margin-top: 10px; }
.lf-sito .domande__risposta ul { display: grid; gap: 6px; }
.lf-sito .domande__risposta li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; }
.lf-sito .domande__risposta li::before { content: "•"; color: var(--lfn-verde); font-weight: 800; }
.lf-sito .domande__risposta a { color: var(--lfn-verde); font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) {
.lf-sito .domande summary::after, .lf-sito .spunta input::after { transition: none; }
}
.lf-sito .doc .art__corpo h1 { font-size: var(--lfn-fs-h1); line-height: 1.08; letter-spacing: -0.025em; margin-top: 10px; }
.lf-sito .doc__meta { margin-top: 12px; font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); line-height: 1.5; }
.lf-sito .doc .categorie { margin-top: 18px; }
.lf-sito .in-breve { margin-top: 28px; padding: 22px; border-radius: 16px; background: var(--lfn-verde); color: var(--lfn-su-verde); }
@media (min-width: 640px) {
.lf-sito .in-breve { padding: 28px 32px; }
}
.lf-sito .art__corpo .in-breve h2 { margin: 0 0 4px; color: var(--lfn-crema); font-size: var(--lfn-fs-h3); }
.lf-sito .in-breve__sotto { font-size: var(--lfn-fs-meta); color: var(--lfn-su-verde-2); }
.lf-sito .in-breve ul { margin-top: 14px; display: grid; gap: 12px; }
.lf-sito .in-breve li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 1.125rem; line-height: 1.5; }
.lf-sito .in-breve li::before { content: ""; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--lfn-su-verde-2); }
.lf-sito .in-breve li b { color: var(--lfn-crema); }
.lf-sito .in-breve a { color: var(--lfn-crema); font-weight: 800; text-underline-offset: 4px; }
.lf-sito .in-breve__nota { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(243, 233, 210, .3); font-size: var(--lfn-fs-meta); line-height: 1.5; color: var(--lfn-su-verde-2); }
.lf-sito .in-breve .bottone { margin-top: 16px; }
.lf-sito .in-breve :focus-visible { outline-color: var(--lfn-crema); }
.lf-sito .doc-testo { margin-top: 8px; }
.lf-sito .doc-testo h2 { scroll-margin-top: calc(var(--lfn-th) + 16px); }
.lf-sito .art__corpo .doc-testo h3 { font-size: 1.25rem; margin-top: 28px; }
.lf-sito .doc-testo p + p { margin-top: .9em; }
.lf-sito .doc-testo .num { font-family: var(--lfn-sans); font-weight: 800; color: var(--lfn-verde); margin-right: 6px; }
.lf-sito .doc-testo ul { margin-block: .9em; display: grid; gap: 10px; }
.lf-sito .doc-testo ul li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.lf-sito .doc-testo ul li::before { content: "•"; color: var(--lfn-verde); font-weight: 800; }
.lf-sito .doc-testo b { font-weight: 700; }
.lf-sito .doc-testo p, .lf-sito .doc-testo li { overflow-wrap: break-word; }
.lf-sito .doc-fonte { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--lfn-linea); font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); }
.lf-sito .doc .indice ol { max-height: calc(100vh - var(--lfn-th) - 120px); overflow: auto; }
.lf-sito .torna-su { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: var(--lfn-fs-meta); font-weight: 800; color: var(--lfn-verde); text-underline-offset: 4px; }
.lf-sito .indice li.sotto a { padding-left: 34px; }
.lf-sito .indice li.sotto a.attivo::before { left: 18px; }
.lf-sito .indice-mobile li.sotto { display: none; }
.lf-sito .doc-testo h4 { font-family: var(--lfn-sans); font-size: 1.125rem; margin-top: 22px; }
.lf-sito .passi-browser { counter-reset: pb; display: grid; gap: 6px; margin-top: 8px; }
.lf-sito .passi-browser li { counter-increment: pb; display: grid; grid-template-columns: 28px 1fr; gap: 6px; }
.lf-sito .passi-browser li::before { content: counter(pb) "."; font-family: var(--lfn-sans); font-weight: 800; color: var(--lfn-verde); }
.lf-sito .bottone svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lf-sito .conto > *, .lf-sito .doc .art__griglia > * { min-width: 0; }
@media (min-width: 640px) {
.lf-sito .ebook-conto img { grid-row: 1 / span 3; align-self: start; }
.lf-sito .ebook-conto { align-items: start; }
}
.lf-sito .accesso__box form { margin-top: 16px; }
/* --- raccordi scritti a mano (non nel mockup): WooCommerce, Elementor, FunnelKit, ricerca e archivi --- */
.lf-sito.lf-servizio .pag { padding-top: 32px; }
.lf-sito .conto__contenuto { min-width: 0; }
@media (min-width: 1024px) { .lf-sito .conto__contenuto .ebook-conto { margin-top: 0; } }
.lf-sito .conto .nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lf-sito .conto__sezione > h2 + * { margin-top: 16px; }
.lf-sito .conto__ricorda { margin-top: 20px; }
.lf-sito .modulo-conto .campo__aiuto + .campo { margin-top: 12px; }
.lf-sito .modulo-conto h3 + .campo__aiuto { margin-top: -6px; }
.lf-sito .conto__dimenticata { margin-top: 8px; }
.lf-sito .conto__conferma { margin: 20px 0 0; max-width: 640px; }
.lf-sito .conto__conferma p { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; }
.lf-sito .conto__conferma p + p { margin-top: 12px; }
.lf-sito .accesso { margin-top: 24px; }
.lf-sito .accesso .modulo-conto { margin-top: 0; }
.lf-sito .accesso__box a:not(.bottone) { color: var(--lfn-crema); font-weight: 800; text-underline-offset: 4px; }
.lf-sito .accesso__box p + p { margin-top: 10px; }
.lf-sito .riquadro--vuoto { margin-top: 16px; background: var(--lfn-bianco); }
.lf-sito .riquadro--vuoto p + p { margin-top: 4px; }
.lf-sito .riquadro ul { display: grid; gap: 0; }
.lf-sito .ordine__azioni { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 24px; }
.lf-sito .ordini__pagine { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 12px; }
.lf-sito .stato--cancelled, .lf-sito .stato--refunded, .lf-sito .stato--failed { color: var(--lfn-testo2) !important; }
.lf-sito .ordine b { display: block; }
.lf-sito .ordine__meta { margin-top: 8px; font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); }
.lf-sito .conto__ordine h3 { font-size: var(--lfn-fs-h3); margin-top: 32px; }
.lf-sito .ordine__note { margin-top: 12px; display: grid; gap: 12px; }
.lf-sito .ordine__note li { padding: 14px 16px; border-radius: 12px; background: var(--lfn-bianco); font-size: 17px; line-height: 1.5; }
.lf-sito .ordine__nota-data { font-size: var(--lfn-fs-meta); color: var(--lfn-testo2); }
/* moduli dell'account: niente riquadro di WooCommerce intorno */
.lf-sito.lf-conto form:is(.login, .register, .lost_reset_password, .edit-account) { margin: 20px 0 0; padding: 0; border: 0; border-radius: 0; }
.lf-sito.lf-conto .accesso form.login { margin-top: 0; }
@media (min-width: 1024px) { .lf-sito .conto__nav .categorie { width: 100%; overflow: visible; } }
/* avvisi di WooCommerce: riquadri pieni, niente bordo colorato in alto, niente icone del tema */
.lf-sito :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
list-style: none; margin: 0 0 24px; padding: 14px 18px; border: 0; border-radius: 12px;
background: var(--lfn-crema-2); color: var(--lfn-ink); font-size: 17px; line-height: 1.5; max-width: 760px;
}
.lf-sito .woocommerce-error { background: #FFF0EE; color: #8C1D18; }
.lf-sito :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before { content: none; display: none; }
.lf-sito :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) li { margin: 0; padding: 0; }
.lf-sito :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) a { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.lf-sito :is(.woocommerce-message, .woocommerce-info) .button { float: none; display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 0 12px; padding: 0; background: none; border: 0; color: var(--lfn-verde); font-weight: 800; text-decoration: underline; }
/* password: l'occhio di WooCommerce dentro il campo, bersaglio da 44 px; forza della password leggibile */
.lf-sito .password-input { position: relative; display: block; width: 100%; }
.lf-sito .password-input input { padding-right: 56px; }
.lf-sito .show-password-input { position: absolute; top: 50%; right: 5px; width: 44px; height: 44px; margin: 0; padding: 0; transform: translateY(-50%); background-color: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.lf-sito .show-password-input:focus-visible { outline: 3px solid var(--lfn-verde); outline-offset: 0; }
.lf-sito .woocommerce-password-strength { margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: 16px; font-weight: 800; text-align: left; }
.lf-sito .woocommerce-password-hint { display: block; margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--lfn-testo2); }
/* moduli di WooCommerce non ridisegnati (indirizzo, metodi di pagamento): stessi campi grandi */
.lf-sito.lf-conto form .form-row { display: grid; gap: 6px; margin: 0 0 18px; padding: 0; float: none; width: 100%; }
.lf-sito.lf-conto form .form-row label { font-size: var(--lfn-fs-meta); font-weight: 800; line-height: 1.3; }
.lf-sito.lf-conto form .form-row :is(input.input-text, select, textarea) { width: 100%; min-height: 54px; padding: 0 14px; border: 2px solid var(--lfn-linea-forte); border-radius: 10px; background: var(--lfn-bianco); color: var(--lfn-ink); font: inherit; font-size: 18px; }
.lf-sito.lf-conto .select2-container .select2-selection--single { height: 54px; border: 2px solid var(--lfn-linea-forte); border-radius: 10px; background: var(--lfn-bianco); }
.lf-sito.lf-conto .select2-container .select2-selection--single .select2-selection__rendered { line-height: 50px; padding-left: 14px; font-size: 18px; color: var(--lfn-ink); }
.lf-sito.lf-conto .select2-container .select2-selection--single .select2-selection__arrow { height: 50px; right: 8px; }
.lf-sito.lf-conto .woocommerce-MyAccount-content :is(button.button, a.button, input.button):not(.bottone) {
display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 2px solid var(--lfn-verde); border-radius: 999px;
background: transparent; color: var(--lfn-verde); font-family: var(--lfn-sans); font-size: 17px; font-weight: 800; text-decoration: none; cursor: pointer;
}
.lf-sito.lf-conto .woocommerce-MyAccount-content :is(button.button, a.button, input.button):not(.bottone):hover { background: var(--lfn-verde); color: var(--lfn-crema); }
.lf-sito.lf-conto .woocommerce-Addresses, .lf-sito.lf-conto .woocommerce-Address { display: grid; gap: 16px; float: none; width: 100%; }
.lf-sito.lf-conto .woocommerce-Address-title h2, .lf-sito.lf-conto .woocommerce-address-fields h2, .lf-sito.lf-conto form > h2 { font-size: var(--lfn-fs-h3); }
.lf-sito.lf-conto address { font-style: normal; line-height: 1.55; }
.lf-sito.lf-conto .woocommerce-Address-title a.edit { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--lfn-verde); text-decoration: underline; text-underline-offset: 4px; }
/* dettaglio dell'ordine: tabelle di WooCommerce con filetti, testo grande */
.lf-sito.lf-conto :is(.woocommerce-order-downloads, .woocommerce-order-details, .woocommerce-customer-details) { margin-top: 36px; }
.lf-sito.lf-conto :is(.woocommerce-order-downloads__title, .woocommerce-order-details__title, .woocommerce-column__title) { font-size: var(--lfn-fs-h3); line-height: 1.2; margin-bottom: 12px; }
.lf-sito.lf-conto table.shop_table { width: 100%; border: 0; border-collapse: collapse; border-top: 2px solid var(--lfn-ink); font-size: 17px; line-height: 1.45; border-radius: 0; margin: 0; }
.lf-sito.lf-conto table.shop_table :is(th, td) { padding: 12px 12px 12px 0; border: 0; border-bottom: 1px solid var(--lfn-linea); background: none; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.lf-sito.lf-conto table.shop_table :is(th, td):last-child { padding-right: 0; }
.lf-sito.lf-conto table.shop_table tfoot th, .lf-sito.lf-conto table.shop_table thead th { font-weight: 800; }
.lf-sito.lf-conto table.shop_table a:not(.button) { color: var(--lfn-verde); font-weight: 800; text-underline-offset: 4px; }
.lf-sito.lf-conto table.shop_table .button { min-height: 44px; }
.lf-sito.lf-conto .woocommerce-customer-details address { padding: 16px 18px; border: 1px solid var(--lfn-linea-forte); border-radius: 12px; background: var(--lfn-bianco); }
.lf-sito.lf-conto .woocommerce-customer-details--email, .lf-sito.lf-conto .woocommerce-customer-details--phone { margin: 6px 0 0; padding: 0; }
.lf-sito.lf-conto .woocommerce-customer-details--email::before, .lf-sito.lf-conto .woocommerce-customer-details--phone::before { content: none; }
@media (max-width: 768px) {
.lf-sito.lf-conto table.shop_table_responsive tr { display: block; padding-block: 8px; border-bottom: 1px solid var(--lfn-linea); }
.lf-sito.lf-conto table.shop_table_responsive :is(th, td) { display: block; padding: 4px 0; border: 0; text-align: left !important; }
.lf-sito.lf-conto table.shop_table_responsive thead { display: none; }
.lf-sito.lf-conto table.shop_table_responsive td::before { content: attr(data-title) ": "; font-weight: 800; float: none; }
.lf-sito.lf-conto table.shop_table_responsive td.download-file::before, .lf-sito.lf-conto table.shop_table_responsive td:not([data-title])::before { content: none; }
}
/* documenti legali: i titoli scritti tutti in maiuscolo nel testo si leggono in tondo (il testo non cambia) */
.lf-sito :is(.doc-testo, .indice, .indice-mobile) .maiuscolo { text-transform: lowercase; }
.lf-sito :is(.indice, .indice-mobile) span.maiuscolo { display: inline-block; }
.lf-sito :is(.doc-testo, .indice, .indice-mobile) .maiuscolo::first-letter { text-transform: uppercase; }
.lf-sito .doc__cookie { margin-top: 16px; }
.lf-sito .doc__cookie .bottone { min-height: 48px; }
.lf-sito .doc-fonte a:not(.torna-su) { color: var(--lfn-verde); font-weight: 800; }
/* pagine piccole: guida gratis (modulo Elementor) e pagine email di FunnelKit */
.lf-sito .modulo-servizio { margin-top: 28px; padding: 22px; border-radius: 18px; background: var(--lfn-bianco); }
@media (min-width: 640px) { .lf-sito .modulo-servizio { padding: 32px; } }
.lf-sito .modulo-servizio > p { font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; }
.lf-sito .modulo-servizio > p + p { margin-top: 12px; }
.lf-sito .modulo-servizio a.link { color: var(--lfn-verde); font-weight: 800; }
.lf-sito .modulo-servizio__chi { font-weight: 800; margin-bottom: 16px; overflow-wrap: anywhere; }
.lf-pagina-guida .modulo-servizio :is(.elementor-widget-heading, .elementor-widget-text-editor) { display: none; }
.lf-sito .modulo-servizio :is(.e-con, .e-con-inner, .elementor-element) { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --margin-top: 0px; padding: 0 !important; margin: 0 !important; max-width: none !important; }
.lf-sito .modulo-servizio .e-con { --min-height: 0px; --background-color: transparent; min-height: 0 !important; background: none !important; }
.lf-sito .modulo-servizio .elementor-form-fields-wrapper { margin: 0 !important; display: grid !important; gap: 18px; }
.lf-sito .modulo-servizio .elementor-field-group { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; }
.lf-sito .modulo-servizio .elementor-field-label { font-family: var(--lfn-sans) !important; font-size: var(--lfn-fs-meta) !important; font-weight: 800 !important; color: var(--lfn-ink) !important; padding: 0 !important; }
.lf-sito .modulo-servizio .elementor-field-textual { min-height: 54px !important; padding: 0 14px !important; border: 2px solid var(--lfn-linea-forte) !important; border-radius: 10px !important; background: var(--lfn-bianco) !important; color: var(--lfn-ink) !important; font-family: var(--lfn-sans) !important; font-size: 18px !important; }
.lf-sito .modulo-servizio .elementor-field-textual:focus-visible { outline: 3px solid var(--lfn-verde); outline-offset: 1px; border-color: var(--lfn-verde) !important; }
.lf-sito .modulo-servizio .elementor-field-option { display: grid !important; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.lf-sito .modulo-servizio .elementor-field-option input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--lfn-verde); }
.lf-sito .modulo-servizio .elementor-field-option label, .lf-sito .modulo-servizio .elementor-field-subgroup label { font-family: var(--lfn-sans) !important; font-size: 17px !important; line-height: 1.45 !important; color: var(--lfn-ink) !important; }
.lf-sito .modulo-servizio .elementor-field-option label a { color: var(--lfn-verde); font-weight: 800; }
.lf-sito .modulo-servizio .elementor-button {
display: inline-flex !important; align-items: center; justify-content: center; width: 100%; min-height: 56px !important; padding: 0 24px !important;
border: 0 !important; border-radius: 999px !important; background: var(--lfn-arancio) !important; color: var(--lfn-ink) !important;
font-family: var(--lfn-sans) !important; font-size: 18px !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: normal !important;
}
.lf-sito .modulo-servizio .elementor-button:hover { background: #E64A00 !important; }
.lf-sito .modulo-servizio .elementor-message { font-size: 17px; margin-top: 12px; }
.lf-sito .modulo-servizio p, .lf-sito .modulo-servizio label { font-size: 17px; line-height: 1.5; }
.lf-sito .modulo-servizio :is(input[type="text"], input[type="email"], input[type="tel"], select):not(.elementor-field-textual) {
width: 100%; min-height: 54px; padding: 0 14px; border: 2px solid var(--lfn-linea-forte); border-radius: 10px; background: var(--lfn-bianco); color: var(--lfn-ink); font-family: var(--lfn-sans); font-size: 18px;
}
.lf-sito .modulo-servizio .bwfan-manage-profile-contact-details, .lf-sito .modulo-servizio .bwfan-profile-fields > .bwf-h2 { display: none !important; }
.lf-sito .modulo-servizio .bwfan-profile-fields { display: grid; gap: 18px; padding: 0 !important; border: 0 !important; background: none !important; }
.lf-sito .modulo-servizio .bwfan-profile-field { display: grid !important; gap: 6px; margin: 0 !important; }
.lf-sito .modulo-servizio .bwfan-profile-field label { font-family: var(--lfn-sans) !important; font-size: var(--lfn-fs-meta) !important; font-weight: 800 !important; color: var(--lfn-ink) !important; margin: 0 !important; }
.lf-sito .modulo-servizio .bwfan-manage-profile-wrapper { padding: 0 !important; margin: 0 !important; max-width: none !important; background: none !important; border: 0 !important; }
.lf-sito .modulo-servizio :is(#bwfan_unsubscribe, #bwfan_manage_profile_update, .bwfan-manage-profile-btn, button, input[type="submit"]):not(.elementor-button) {
display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; margin-top: 18px; border: 0; border-radius: 999px;
background: var(--lfn-verde); color: var(--lfn-crema); font-family: var(--lfn-sans); font-size: 17px; font-weight: 800; text-decoration: none; cursor: pointer;
}
.lf-sito .modulo-servizio input[type="checkbox"] { width: 24px !important; height: 24px !important; margin: 0 !important; flex: none; accent-color: var(--lfn-verde); }
.lf-sito .modulo-servizio .bwfan-unsubscribe-lists { padding: 20px !important; border: 1px solid var(--lfn-linea-forte) !important; border-radius: 14px !important; background: none !important; }
.lf-sito .modulo-servizio .bwf-h2 { font-family: var(--lfn-sans) !important; font-size: var(--lfn-fs-h3) !important; font-weight: 800 !important; color: var(--lfn-ink) !important; margin: 0 0 12px !important; }
.lf-sito .modulo-servizio .bwfan-unsubscribe-list-checkbox { display: flex !important; align-items: center; gap: 12px; min-height: 44px; }
.lf-sito .modulo-servizio .bwfan-unsubscribe-list-checkbox label { font-size: 17px !important; font-weight: 800; cursor: pointer; }
.lf-sito .modulo-servizio .bwfan-unsubscribe-list-description { margin: 4px 0 0 36px !important; font-size: 16px !important; color: var(--lfn-testo2) !important; }
/* ricerca e archivi di categoria */
.lf-sito .archivio__cerca { max-width: 640px; margin: 24px 0 40px; }
.lf-sito.lf-archivio .griglia-card { margin-top: 32px; }
/* descrizione della categoria su più paragrafi: tutti come il primo (serif di lettura) */
.lf-sito.lf-archivio .pag-testa h1 ~ p { font-family: var(--lfn-serif); font-size: var(--lfn-fs-leggi); line-height: 1.55; }
.lf-sito.lf-archivio .pag-testa p + p { margin-top: 14px; }
.lf-sito .archivio__cerca + .griglia-card { margin-top: 0; }
@media (min-width: 640px) { .lf-sito .archivio__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lf-sito .archivio__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lf-sito .archivio__pagine { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.lf-sito .archivio__pagine .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 16px; border: 2px solid var(--lfn-linea-forte); border-radius: 999px; font-weight: 800; text-decoration: none; }
.lf-sito .archivio__pagine .page-numbers.current { background: var(--lfn-verde); border-color: var(--lfn-verde); color: var(--lfn-crema); }
.lf-sito .archivio__pagine .page-numbers.dots { border: 0; }
.lf-sito .archivio__pagine a.page-numbers:hover { border-color: var(--lfn-verde); color: var(--lfn-verde); }
.lf-sito .archivio__vuoto { margin-top: 8px; display: grid; gap: 14px; justify-items: start; font-family: var(--lfn-serif); font-size: 1.125rem; }
.lf-sito .archivio__blog { margin-top: 44px; }
/* ===== Tabelle al telefono e respiro delle fasce del blog (agente mobile-tabelle, 04/10/2026) =====
Le classi lf-tab-schede / lf-tab-coppie e gli attributi data-label li mette il mu-plugin lf-tabelle.php.
Da 640 px in su le tabelle restano come prima (blog.css). */
@media (max-width: 639px) {
/* 2 colonne (dati in apertura e schede con intestazione): etichetta sopra, valore sotto, filetto tra le righe */
.lf-sito .wp-block-table:is(.is-style-lf-dati, .lf-tab-coppie) { overflow: visible; }
.lf-sito .wp-block-table:is(.is-style-lf-dati, .lf-tab-coppie) :is(table, thead, tbody, tr, th, td) { display: block; width: auto !important; }
.lf-sito .wp-block-table:is(.is-style-lf-dati, .lf-tab-coppie) table { border-top: 2px solid var(--lfn-ink); }
.lf-sito .wp-block-table:is(.is-style-lf-dati, .lf-tab-coppie) tr { padding-block: 12px; border: 0; border-bottom: 1px solid var(--lfn-linea); }
.lf-sito .wp-block-table:is(.is-style-lf-dati, .lf-tab-coppie) :is(th, td) { padding: 0; border: 0; text-align: left; }
.lf-sito .wp-block-table:is(.is-style-lf-dati, .lf-tab-coppie) td:first-child { padding: 0 0 2px; color: var(--lfn-verde); font-weight: 800; }
.lf-sito .wp-block-table.lf-tab-coppie thead :is(th, td) { font-size: 1rem; font-weight: 800; color: var(--lfn-testo2); }
.lf-sito .wp-block-table.lf-tab-coppie :is(th, td):empty { display: none; }
/* 3 colonne o più: una scheda per riga, prima cella come titolo, poi "intestazione: valore" */
.lf-sito .wp-block-table.lf-tab-schede { overflow: visible; }
.lf-sito .wp-block-table.lf-tab-schede :is(table, tbody, tr, td) { display: block; width: auto !important; }
.lf-sito .wp-block-table.lf-tab-schede table { border-top: 0; font-size: 1.0625rem; line-height: 1.45; }
.lf-sito .wp-block-table.lf-tab-schede thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lf-sito .wp-block-table.lf-tab-schede tr { margin-bottom: 12px; padding: 6px 16px; border: 1px solid var(--lfn-linea); border-radius: 12px; background: var(--lfn-bianco); }
.lf-sito .wp-block-table.lf-tab-schede td { padding: 7px 0; border: 0; border-top: 1px solid var(--lfn-linea); text-align: left; }
.lf-sito .wp-block-table.lf-tab-schede td:first-child { border-top: 0; font-size: 1.125rem; font-weight: 800; color: var(--lfn-verde-scuro); }
.lf-sito .wp-block-table.lf-tab-schede td:empty { display: none; }
.lf-sito .wp-block-table.lf-tab-schede td:not(:first-child)[data-label]::before { content: attr(data-label) ": "; font-weight: 800; color: var(--lfn-verde); }
}
/* fasce del blog, a ogni larghezza: il titolo non tocca la riga di presentazione (prima -8 px) e le card hanno aria sopra */
.lf-sito .fascia .sezione__testa { margin-bottom: 24px; }
.lf-sito .fascia .sezione__testa + .fascia__riga { margin-top: -16px; }
.lf-sito .fascia .fascia__riga { margin-bottom: 32px; }
/* ===== Moduli della guida "I 7 pilastri" senza Elementor (lf-moduli.php, agente ritocchi, 04/10/2026) =====
Riquadro (era il popup Elementor 1130) e modulo di /guida/ (1163). Campi .campo e casella .spunta delle pagine
di servizio, un solo arancione (il pulsante), niente ombre, niente bordi colorati su un lato. */
.lf-sito .lf-modulo__campi { display: grid; gap: 18px; }
.lf-sito .lf-modulo .campo + .campo { margin-top: 0; }
.lf-sito .lf-modulo .bottone { width: 100%; min-height: 56px; font-size: 1.125rem; }
.lf-sito .lf-modulo .bottone[disabled] { opacity: .6; cursor: progress; }
.lf-sito .lf-modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-sito .lf-modulo__errore { font-size: 17px; line-height: 1.45; font-weight: 800; color: #9B2C10; }
.lf-sito .lf-modulo__fatto { padding: 18px 20px; border-radius: 12px; background: var(--lfn-verde); color: var(--lfn-crema); font-size: 17px; line-height: 1.5; }
.lf-sito .lf-modulo__fatto:focus { outline: none; }
.lf-sito .lf-modulo__fatto strong { display: block; margin-bottom: 4px; font-size: 1.1875rem; }
.lf-sito .modulo-servizio .lf-modulo .spunta__testo { font-size: 17px; }
.lf-guida-ambito { display: contents; }
html.lf-guida-aperta { overflow: hidden; }
.lf-sito .lf-guida {
width: min(520px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto;
margin: auto; padding: 0; border: 0; border-radius: 18px; background: var(--lfn-crema); color: var(--lfn-ink);
}
.lf-sito .lf-guida::backdrop { background: rgba(17, 27, 15, .72); }
.lf-sito .lf-guida__dentro { position: relative; padding: 28px 20px 22px; }
@media (min-width: 640px) { .lf-sito .lf-guida__dentro { padding: 40px 36px 32px; } }
.lf-sito .lf-guida h2 { font-size: var(--lfn-fs-h2); line-height: 1.12; padding-right: 40px; }
.lf-sito .lf-guida__testo { margin-top: 12px; font-family: var(--lfn-serif); font-size: 1.125rem; line-height: 1.55; }
.lf-sito .lf-guida .lf-modulo { margin-top: 24px; }
.lf-sito .lf-guida__chiudi {
position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center;
padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--lfn-ink); cursor: pointer;
}
.lf-sito .lf-guida__chiudi:hover { background: var(--lfn-crema-2); }
.lf-sito .lf-guida__chiudi:focus-visible { outline: 3px solid var(--lfn-verde); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.lf-sito .lf-guida[open] { animation: lf-guida-entra .22s cubic-bezier(.16, 1, .3, 1); }
.lf-sito .lf-guida[open]::backdrop { animation: lf-guida-velo .22s ease-out; }
}
@keyframes lf-guida-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lf-guida-velo { from { opacity: 0; } to { opacity: 1; } }
/* === 04/10/2026 · "Hai un problema? Scrivici" nell'account (agente ultimi-ritocchi) ===
Bacheca/Il tuo ebook: il riquadro di aiuto ha una riga di testo sopra i link (lf-servizio/ebook-conto.php).
Ordini, dettaglio ordine, Dati e password: una riga in fondo al contenuto (lf-servizio/woocommerce/myaccount/my-account.php). */
.lf-sito .riquadro p + ul { margin-top: -2px; }
.lf-sito .conto__scrivici { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--lfn-linea); font-family: var(--lfn-serif); font-size: 1.0625rem; line-height: 1.55; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.lf-sito .conto__scrivici b { font-family: var(--lfn-sans); font-weight: 700; }
.lf-sito .conto__scrivici .link { display: inline-flex; align-items: center; min-height: 44px; }
/* Credito Salvia Studio nel piè (09/10/2026): logo crema e riga sotto, in basso a destra sopra la riga legale */
.pie__destra { display: flex; flex-direction: column; gap: 32px; }
.pie__salvia { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; width: fit-content; color: var(--lfn-su-verde-2); text-decoration: none; }
.pie__salvia img { display: block; height: 22px; width: auto; opacity: .85; }
.pie__salvia span { font-size: 14px; line-height: 1.3; }
.pie__salvia:hover img, .pie__salvia:focus-visible img { opacity: 1; }
.pie__salvia:hover span, .pie__salvia:focus-visible span { color: var(--lfn-crema); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
.pie__destra { justify-content: space-between; }
.pie__salvia { align-self: flex-end; align-items: flex-end; }
}
/* ---------- quello che uso io: una riga per prodotto, un solo link ciascuno ---------- */
.lf-prodotti { margin-block: 40px; }
.lf-prodotti__eyebrow { font-family: var(--lfn-sans); font-size: var(--lfn-fs-h2, 1.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; }
.lf-prodotti__list { list-style: none !important; padding: 0 !important; margin-top: 18px !important; border-top: 1px solid var(--lfn-linea); }
.lf-prodotti__item { display: grid; gap: 6px; padding-block: 20px; border-bottom: 1px solid var(--lfn-linea); margin: 0 !important; }
.lf-prodotti__nome { font-family: var(--lfn-sans); font-weight: 800; font-size: 1.25rem; }
.lf-prodotti__motivo { font-size: 1.125rem; line-height: 1.55; }
.lf-sito .lf-prose a.lf-prodotti__link { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding-inline: 22px; margin-top: 6px; border: 2px solid var(--lfn-verde); border-radius: 999px; color: var(--lfn-verde); font-family: var(--lfn-sans); font-weight: 800; text-decoration: none; }
.lf-sito .lf-prose a.lf-prodotti__link:hover { background: var(--lfn-verde); color: var(--lfn-crema); }
.lf-prodotti__disclosure { font-family: var(--lfn-sans); font-size: 1rem; color: var(--lfn-testo2); margin-top: 12px !important; }
.lf-prodotti__item--foto { grid-template-columns: 88px 1fr; column-gap: 16px; align-items: start; }
.lf-prodotti__item--foto > :not(.lf-prodotti__foto) { grid-column: 2; }
.lf-sito .lf-prodotti img.lf-prodotti__foto { grid-column: 1; grid-row: 1 / span 3; width: 88px; height: 88px; max-width: none; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin: 0; }
@media (min-width: 700px) {
.lf-prodotti__item--foto { grid-template-columns: 120px 1fr; column-gap: 22px; }
.lf-sito .lf-prodotti img.lf-prodotti__foto { width: 120px; height: 120px; }
}
/* ---------- pagina Attrezzatura: barra delle categorie fissa e card ---------- */
.lf-sito .attrezzi-nav { position: sticky; top: var(--lfn-th); z-index: 20; display: flex; gap: 8px; margin: 28px calc(var(--lfn-gut) * -1) 0; padding: 12px var(--lfn-gut); overflow-x: auto; scrollbar-width: none; background: var(--lfn-crema); border-bottom: 1px solid var(--lfn-linea); transition: top .2s ease-out; }
.lf-sito .attrezzi-nav::-webkit-scrollbar { display: none; }
.lf-sito-on:has(.testata.compatta) .lf-sito .attrezzi-nav { top: var(--lfn-th-compatta); }
.lf-sito-on:has(.testata.nascosta) .lf-sito .attrezzi-nav { top: 0; }
.lf-sito .attrezzi-nav a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 16px; border: 2px solid var(--lfn-verde); border-radius: 999px; color: var(--lfn-verde); font-family: var(--lfn-sans); font-weight: 800; font-size: 1rem; text-decoration: none; white-space: nowrap; }
.lf-sito .attrezzi-nav a span { font-weight: 500; }
.lf-sito .attrezzi-nav a:hover, .lf-sito .attrezzi-nav a[aria-current] { background: var(--lfn-verde); color: var(--lfn-crema); }
.lf-sito .attrezzi-nav a:focus-visible { outline: 3px solid var(--lfn-verde-scuro); outline-offset: 2px; }
.lf-sito .attrezzi-sez { scroll-margin-top: calc(var(--lfn-th) + 84px); padding-top: 36px; }
.lf-sito .attrezzi-sez .testo-lettura { max-width: 68ch; }
@media (min-width: 640px) {
.lf-prodotti--griglia .lf-prodotti__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; border-top: 0; }
.lf-prodotti--griglia .lf-prodotti__item, .lf-prodotti--griglia .lf-prodotti__item--foto { display: flex; flex-direction: column; gap: 8px; padding: 0 0 18px; border: 1px solid var(--lfn-linea); border-radius: 16px; background: var(--lfn-bianco); overflow: hidden; }
.lf-sito .lf-prodotti--griglia img.lf-prodotti__foto { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; margin: 0 0 8px; }
.lf-prodotti--griglia .lf-prodotti__nome, .lf-prodotti--griglia .lf-prodotti__motivo { padding-inline: 18px; }
.lf-prodotti--griglia .lf-prodotti__nome { font-size: 1.125rem; line-height: 1.3; }
.lf-prodotti--griglia .lf-prodotti__motivo { font-size: 1rem; line-height: 1.5; }
.lf-sito .lf-prodotti--griglia a.lf-prodotti__link { margin: auto 18px 0; align-self: stretch; justify-content: center; }
}
@media (min-width: 960px) { .lf-prodotti--griglia .lf-prodotti__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .lf-prodotti--griglia .lf-prodotti__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Guide (17/10/2026, mockup NQzgfjpujeuEBxcSS9auDd): etichetta sopra il titolo e capitoli come .voce-guida dentro il testo */
.lf-sito .etichetta-guida { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: var(--lfn-verde); color: var(--lfn-crema); font-family: var(--lfn-sans); font-weight: 800; font-size: var(--lfn-fs-meta); }
.lf-sito .voce-guida h3 { margin: 0; font-size: var(--lfn-fs-h3); line-height: 1.2; }
.lf-sito .voce-guida h3 a { color: inherit; font-weight: inherit; text-decoration: none; }
.lf-sito .voce-guida h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Etichette e dati dei blocchi guida in DM Sans (17/10/2026, Luca): dentro .lf-prose ereditavano il serif di lettura.
Restano in Literata solo i paragrafi da leggere (.voce-guida__serve, .regole p). */
.lf-sito .esigenze, .lf-sito .scheda, .lf-sito .regole b, .lf-sito .voce__azioni { font-family: var(--lfn-sans); }
/* «Da dove parti»: la situazione è l'etichetta (piccola, peso normale, grigia), il consiglio la risposta (grande, grassetto) */
.lf-sito .esigenze a { gap: 6px 16px; padding-block: 18px; }
.lf-sito .esigenze span { font-size: var(--lfn-fs-meta); font-weight: 500; line-height: 1.3; color: var(--lfn-testo2); }
.lf-sito .esigenze b { font-size: 1.3125rem; font-weight: 800; line-height: 1.25; color: var(--lfn-ink); }
.lf-sito .esigenze a:hover b { color: var(--lfn-verde); }
/* «Da dove parti»: al posto del numero, la freccia dei riquadri-link (è un link da cliccare) */
.lf-sito .esigenze i { background: var(--lfn-verde); }
.lf-sito .esigenze i svg { width: 20px; height: 20px; fill: none; stroke: var(--lfn-crema); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease-out; }
.lf-sito .esigenze a:hover i svg, .lf-sito .esigenze a:focus-visible i svg { transform: translateX(3px); }
.lf-sito .esigenze a:focus-visible { outline: 3px solid var(--lfn-verde); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lf-sito .esigenze i svg { transition: none; } }
/* =========================================================================
Scheda del bonus 1936 (1/11/2026): l'unico prodotto rimasto aperto (noindex), nel disegno delle pagine
di servizio. Template lf-servizio/prodotto.php; un solo arancione (il pulsante), testo scuro sopra.
========================================================================= */
.lf-sito .bonus-scheda { margin-top: 24px; padding: 20px; border-radius: 18px; background: var(--lfn-bianco); display: grid; gap: 20px; }
@media (min-width: 768px) {
.lf-sito .bonus-scheda { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; padding: 28px; align-items: center; }
}
.lf-sito .bonus-scheda__img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--lfn-crema-2); }
.lf-sito .bonus-scheda__testo { display: grid; gap: 14px; align-content: start; min-width: 0; }
.lf-sito .bonus-scheda h2 { font-size: var(--lfn-fs-h3); line-height: 1.2; }
.lf-sito .bonus-scheda__lista { display: grid; gap: 12px; }
.lf-sito .bonus-scheda__lista li { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--lfn-linea); }
.lf-sito .bonus-scheda__lista b { font-size: var(--lfn-fs-ui); }
.lf-sito .bonus-scheda__lista span { font-family: var(--lfn-serif); font-size: 1.0625rem; line-height: 1.5; color: var(--lfn-testo2); }
.lf-sito .bonus-scheda__prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 4px; font-family: var(--lfn-serif); font-weight: 700; font-size: 2rem; line-height: 1; }
.lf-sito .bonus-scheda__formato { font-family: var(--lfn-sans); font-size: var(--lfn-fs-meta); font-weight: 400; color: var(--lfn-testo2); }
.lf-sito .bonus-scheda .bottone { width: 100%; min-height: 58px; font-size: 1.1875rem; border-radius: 12px; }
@media (min-width: 768px) {
.lf-sito .bonus-scheda .bottone { width: auto; justify-self: start; padding-inline: 32px; }
}
.lf-sito .bonus-scheda__nota { font-size: var(--lfn-fs-meta); line-height: 1.45; color: var(--lfn-testo2); }
.lf-sito.lf-bonus .riquadro { margin-top: 16px; }