:root {
--sf-inchiostro: #1E2A3A;
--sf-petrolio: #0B7A75;
--sf-sole: #F7B733;
--sf-corallo: #EF6F53;
--sf-carta: #FFF9EE;
--sf-bianco: #FFFFFF;
--sf-testo: var(--sf-inchiostro);
--sf-fondo: var(--sf-carta);
--sf-principale: var(--sf-petrolio);
--sf-accento: var(--sf-sole);
--sf-accento-2: var(--sf-corallo);
--sf-font-titoli: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
--sf-font-testi: "Andika", "Verdana", system-ui, sans-serif;
--sf-peso-titoli: 600;
}
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("/font/fredoka-600.woff2") format("woff2"); }
@font-face { font-family: "Andika"; font-style: normal; font-weight: 400; font-display: swap; src: url("/font/andika-400.woff2") format("woff2"); }
@font-face { font-family: "Andika"; font-style: normal; font-weight: 700; font-display: swap; src: url("/font/andika-700.woff2") format("woff2"); }
:root {
--ink: var(--sf-inchiostro, #1E2A3A); --pri: var(--sf-petrolio, #0B7A75); --sole: var(--sf-sole, #F7B733);
--cor: var(--sf-corallo, #EF6F53); --carta: var(--sf-carta, #FFF9EE); --bianco: #fff;
--sole-chiaro: #FDEFC9; --cor-chiaro: #FCE4DD; --pri-chiaro: #DDEFEC; --riga: #E6DCC6; --grigio: #55606E;
--tit: var(--sf-font-titoli, "Fredoka", "Trebuchet MS", system-ui, sans-serif);
--txt: var(--sf-font-testi, "Andika", Verdana, system-ui, sans-serif);
--bordo: 2px solid var(--ink); --raggio: 14px; --ombra: 4px 4px 0 var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--carta); color: var(--ink); font: 400 1.0625rem/1.65 var(--txt); overflow-wrap: break-word; }
h1, h2, h3, .riquadro-titolo, .porta-nome, summary { font-family: var(--tit); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 5.4vw, 2.75rem); margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.4rem, 3.6vw, 1.85rem); margin: 2em 0 .6em; }
h3 { font-size: 1.2rem; margin: 1.6em 0 .4em; }
p, ul, ol { margin: 0 0 1em; }
a { color: var(--pri); text-decoration-thickness: .09em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .16em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--sole); border-radius: 4px; }
img, svg { max-width: 100%; height: auto; }
.largo { width: min(72rem, 100% - 2rem); margin-inline: auto; }
.largo-testo { width: min(44rem, 100% - 2rem); margin-inline: auto; }
.salta { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 20; }
.salta:focus { left: 0; }
.barra-anteprima { margin: 0; padding: .35rem 1rem; background: var(--cor); color: var(--ink); font-weight: 700; font-size: .9rem; text-align: center; }
.testata { background: var(--bianco); border-bottom: var(--bordo); }
.testata-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: .7rem; }
.logo { display: inline-flex; padding: .3rem 0; }
.logo img { display: block; width: 11.5rem; height: auto; }
.apri-menu { font: 600 1rem var(--tit); background: var(--bianco); color: var(--ink); border: var(--bordo); border-radius: 999px; min-height: 2.75rem; padding: .45rem 1.1rem; cursor: pointer; }
.apri-menu[aria-expanded="true"] { background: var(--ink); color: #fff; }
.nav { display: none; flex-basis: 100%; }
.nav.aperto { display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul > li { border-top: 1px solid var(--riga); }
.nav a, .nav summary { display: block; padding: .7rem .2rem; color: var(--ink); text-decoration: none; font: 600 1.05rem var(--tit); cursor: pointer; }
.nav a:hover, .nav summary:hover { color: var(--pri); }
.nav a[aria-current="page"] { color: var(--pri); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .3em; }
.nav details ul a { font: 400 1rem var(--txt); padding: .5rem 1rem; }
.nav summary::after { content: "▾"; margin-left: .35em; font-size: .85em; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary { list-style: none; }
@media (min-width: 62em) {
.apri-menu { display: none; }
.nav { display: block; flex-basis: auto; }
.nav > ul { display: flex; align-items: center; gap: .2rem 1.1rem; }
.nav > ul > li { border: 0; position: relative; }
.nav a, .nav summary { padding: .45rem .2rem; font-size: 1rem; }
.nav details > ul { position: absolute; top: calc(100% + .45rem); left: -1rem; z-index: 10; min-width: 17rem; background: var(--bianco); border: var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: .5rem 0; }
}
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem .5rem; margin: 1rem 0 0; padding: 0; font-size: .9rem; color: var(--grigio); }
.briciole li + li::before { content: "›"; margin-right: .5rem; }
.briciole a { color: var(--grigio); }
@media (max-width: 40em) { .briciole li[aria-current] { display: none; } }
.chip { display: inline-block; font: 700 .8rem/1.3 var(--txt); padding: .22rem .65rem; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--bianco); color: var(--ink); text-decoration: none; margin: 0 .35rem .35rem 0; }
a.chip:hover { box-shadow: 2px 2px 0 var(--ink); }
.chip-b { background: var(--pri); border-color: var(--pri); color: #fff; }
.chip-c { background: var(--sole); }
.chip-g { background: var(--bianco); }
.chip-bozza { background: var(--cor); border-style: dashed; }
.chip-arrivo { background: var(--sole-chiaro); border-style: dashed; }
.chip-grande { font-size: .98rem; padding: .45rem .95rem; }
.nuvola { margin: 0; }
.bottone { display: inline-block; font: 600 1rem/1.2 var(--tit); padding: .7rem 1.2rem; border: var(--bordo); border-radius: 999px; background: var(--pri); color: #fff; text-decoration: none; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.bottone:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.bottone:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.bottone-chiaro { background: var(--bianco); color: var(--ink); }
.bottone-sole { background: var(--sole); color: var(--ink); }
.bottone-grande { font-size: 1.1rem; padding: .85rem 1.5rem; }
.eroe { padding: 1.5rem 0 .5rem; }
.eroe-foglio { position: relative; background: var(--bianco) repeating-linear-gradient(transparent 0 2.05rem, var(--riga) 2.05rem 2.12rem); border: var(--bordo); border-radius: 20px; box-shadow: 6px 6px 0 var(--ink); padding: clamp(1.4rem, 5vw, 3.2rem) clamp(1.2rem, 5vw, 3.5rem) clamp(1.6rem, 5vw, 3rem) clamp(2.4rem, 8vw, 6rem); }
.eroe-foglio::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(1.2rem, 4vw, 3.2rem); width: 3px; background: var(--cor); }
.eroe h1 { font-size: clamp(2rem, 7vw, 3.6rem); max-width: 17ch; margin-bottom: .35em; }
.eroe h1::after { content: ""; display: block; width: 4.5rem; height: .55rem; margin-top: .9rem; background: var(--sole); border-radius: 99px; }
.eroe-sotto { font-size: clamp(1.05rem, 2.4vw, 1.25rem); max-width: 40rem; }
.eroe-azioni { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin: 1.6rem 0 0; }
.blocco { margin-top: clamp(2.2rem, 6vw, 4rem); }
.blocco > h2:first-child, .blocco > div > h2:first-child { margin-top: 0; }
.porte { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.porta { position: relative; display: block; height: 100%; padding: 1.1rem 3.2rem 1.1rem 1.2rem; background: var(--bianco); border: var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.porta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pri); }
.porta-nome { display: block; font-size: 1.25rem; color: var(--pri); }
.porta-testo { display: block; font-size: .98rem; margin-top: .2rem; }
.porta-n { position: absolute; top: .9rem; right: .9rem; min-width: 1.9rem; height: 1.9rem; display: grid; place-items: center; font: 700 .85rem var(--txt); background: var(--sole); border: 1.5px solid var(--ink); border-radius: 99px; }
.due-colonne { display: grid; gap: 2.2rem; }
@media (min-width: 52em) { .due-colonne { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.fascia { margin-top: clamp(2.2rem, 6vw, 4rem); padding: clamp(2rem, 5vw, 3.2rem) 0; background: var(--pri); color: #fff; border-block: var(--bordo); }
.fascia .blocco { margin-top: 0; }
.fascia .scheda { color: var(--ink); }
.promessa-dati { font-weight: 700; margin: 1.2rem 0; padding-left: 1rem; border-left: 5px solid var(--sole); }
.chiusura { margin-bottom: 3rem; max-width: 44rem; }
.griglia { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.griglia + p { margin-top: 1.5rem; }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.scheda { position: relative; background: var(--bianco); border: var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 1.1rem 1.2rem 1rem; transition: transform .12s, box-shadow .12s; }
.scheda:has(a):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pri); }
.scheda h2, .scheda h3 { font-size: 1.18rem; margin: .1rem 0 .45rem; }
.scheda h2 a, .scheda h3 a { color: var(--ink); text-decoration: none; }
.scheda h2 a::after, .scheda h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio); }
.scheda p { font-size: .96rem; line-height: 1.5; margin-bottom: .6rem; }
.scheda-eti { margin: 0 0 .2rem; min-height: 0; }
.scheda-eti:empty { display: none; }
.scheda-eti a { position: relative; z-index: 1; }
.scheda-meta { color: var(--grigio); font-size: .85rem !important; margin: 0 !important; }
.scheda[hidden] { display: none; }
.ingresso { padding-bottom: 3rem; }
.ingresso-testa { margin: 1.4rem 0 1.6rem; max-width: 46rem; }
.ingresso-intro { font-size: 1.1rem; }
.gruppo-schede { margin-top: 2.2rem; }
.gruppo-schede > h2 { margin: 0 0 .8rem; padding-bottom: .3rem; border-bottom: 3px solid var(--sole); display: inline-block; }
.gruppo-schede > h2 a { color: var(--ink); text-decoration: none; }
.gruppo-schede > h2 a:hover { color: var(--pri); }
.filtri { display: grid; gap: .6rem; margin: 0 0 1.4rem; padding: .9rem 1rem; background: var(--bianco); border: 1.5px dashed var(--ink); border-radius: var(--raggio); }
.filtro-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.filtro-eti { font-weight: 700; font-size: .9rem; margin-right: .3rem; }
.filtro { font: 700 .88rem var(--txt); min-height: 2.75rem; padding: .35rem .95rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bianco); color: var(--ink); cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--ink); color: #fff; }
.vuoto, .nessuno { padding: 1.2rem; border: 1.5px dashed var(--ink); border-radius: var(--raggio); background: var(--bianco); }
.rimandi { margin: 1rem 0; }
.articolo { padding-bottom: 2rem; }
.articolo-testa { margin: 1.2rem 0 1.4rem; }
.etichette { margin: 0 0 .5rem; }
.meta { color: var(--grigio); font-size: .92rem; margin: 0; }
.avviso-bozza { margin: 1rem 0 0; padding: .6rem .9rem; background: var(--cor-chiaro); border: 1.5px dashed var(--ink); border-radius: 10px; font-size: .95rem; }
.in-breve { position: relative; margin: 0 0 1.6rem; padding: 1.5rem 1.2rem 1.1rem; background: var(--sole-chiaro); border: var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); font-size: 1.1rem; }
.in-breve > :last-child { margin-bottom: 0; }
.in-breve-eti { position: absolute; top: -.8rem; left: 1rem; margin: 0; padding: .1rem .7rem; background: var(--ink); color: #fff; border-radius: 99px; font: 600 .85rem var(--tit); }
.indice { margin: 1.6rem 0; background: var(--bianco); border: 1.5px solid var(--ink); border-radius: var(--raggio); }
.indice summary { padding: .8rem 1rem; cursor: pointer; font-size: 1.05rem; }
.indice ol { margin: 0; padding: 0 1rem 1rem 2.4rem; }
.indice li { margin: .3rem 0; }
.testo h2 { padding-top: .3rem; }
.testo h2::before { content: ""; display: block; width: 2.6rem; height: .4rem; margin-bottom: .7rem; background: var(--sole); border-radius: 99px; }
.testo li { margin-bottom: .4rem; }
.testo li::marker { color: var(--pri); font-weight: 700; }
.foto { margin: 1.6rem 0; }
.foto img, .foto svg { display: block; width: 100%; border: var(--bordo); border-radius: var(--raggio); }
.foto figcaption { font-size: .9rem; color: var(--grigio); margin-top: .5rem; }
.caso { padding: .7rem 1rem; background: var(--cor-chiaro); border-left: 5px solid var(--cor); border-radius: 0 10px 10px 0; font-size: .97rem; }
blockquote { margin: 1.4rem 0; padding: .9rem 1.1rem .9rem 2.6rem; background: var(--bianco) repeating-linear-gradient(transparent 0 1.72rem, var(--riga) 1.72rem 1.78rem); border: 1.5px solid var(--ink); border-radius: 10px; position: relative; line-height: 1.75rem; }
blockquote::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.6rem; width: 2px; background: var(--cor); }
blockquote p { margin: 0; }
.tabella { overflow-x: auto; margin: 1.4rem 0; border: var(--bordo); border-radius: var(--raggio); background: var(--bianco); }
table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: .95rem; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: .65rem .8rem; border-bottom: 1px solid var(--riga); }
th { background: var(--pri-chiaro); font-weight: 700; border-bottom: var(--bordo); }
tr:last-child td { border-bottom: 0; }
.domande { margin-top: 2.4rem; }
.domande h3 { margin-top: 1.4rem; padding: .6rem .9rem; background: var(--pri-chiaro); border-radius: 10px; font-size: 1.1rem; }
.fonti { margin-top: 2.4rem; padding: .2rem 1.2rem 1rem; background: var(--bianco); border: 1.5px solid var(--ink); border-radius: var(--raggio); font-size: .95rem; }
.fonti h2 { font-size: 1.25rem; margin-top: 1rem; }
.nota-fissa { margin: 1.6rem 0 0; font-size: .9rem; color: var(--grigio); }
.leggi-anche { margin: 1rem auto 3rem; }
.pagina-testo { padding: 1.4rem 0 3rem; }
.segnaposto { background: repeating-linear-gradient(135deg, var(--cor-chiaro) 0 12px, #fff 12px 24px); border: 1.5px dashed var(--ink); border-radius: 10px; padding: .7rem 1rem; }
mark.segnaposto { padding: .1rem .4rem; }
.riquadro { margin: 2rem 0; padding: 1.3rem 1.3rem 1.2rem; border: var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); background: var(--bianco); }
.riquadro-titolo { font-size: 1.35rem; margin: 0 0 .4rem; }
.riquadro-email { background: var(--pri); color: #fff; }
.riquadro-email a { color: #fff; }
.riquadro-email.compatto { padding: 1.1rem; }
.riquadro-email.compatto .riquadro-titolo { font-size: 1.15rem; }
.riquadro-largo { padding: clamp(1.3rem, 4vw, 2.4rem); }
.senza-titolo .riquadro-titolo { position: absolute; left: -999em; }
.riquadro-strumento { background: var(--sole-chiaro); }
.riquadro-strumento p:last-child { margin: 0; }
.modulo label { display: block; font-weight: 700; margin-bottom: .3rem; }
.modulo-riga { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.modulo input[type="email"], .cerca input[type="search"] { flex: 1 1 14rem; min-width: 0; font: 400 1.05rem var(--txt); padding: .7rem .9rem; border: var(--bordo); border-radius: 12px; background: #fff; color: var(--ink); }
.consenso { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; font-size: .92rem; line-height: 1.45; }
.consenso input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; accent-color: var(--sole); }
.modulo-nota { font-size: .88rem; margin: .5rem 0 0; opacity: .95; }
.nota-anteprima { font-style: italic; }
.modulo-esito { margin: .8rem 0 0; padding: .6rem .8rem; background: var(--sole); color: var(--ink); border-radius: 10px; font-weight: 700; }
.cerca label { display: block; font-weight: 700; margin-bottom: .3rem; }
.risultati { margin-top: 1.5rem; display: grid; gap: 1rem; }
.piede { margin-top: 2rem; background: var(--ink); color: #fff; padding: 2.4rem 0; font-size: .95rem; }
.piede a { color: #fff; }
.piede-griglia { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin: .35rem 0; }
.piede-titolo { font: 600 1.05rem var(--tit); margin: 0 0 .5rem; color: var(--sole); }
.piede img { width: 11.5rem; margin-bottom: .8rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
.testata, .piede, .riquadro, .leggi-anche, .briciole, .barra-anteprima, .filtri, .indice { display: none !important; }
body { background: #fff; font-size: 11pt; }
.in-breve, .scheda, .foto img { box-shadow: none; }
a { color: inherit; text-decoration: none; }
}
.scheda-risorsa { padding-top: 0; overflow: hidden; }
.scheda-img { display: block; width: calc(100% + 2.4rem); max-width: none; margin: 0 -1.2rem .9rem; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-bottom: var(--bordo); background: #fff; }
.anteprima-scheda img { background: #fff; }
.riquadro-scarica { background: var(--sole-chiaro); }
.scarica-file { list-style: none; padding: 0; margin: .8rem 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.scheda .scarica-file .bottone { font-size: .9rem; padding: .5rem .9rem; position: relative; z-index: 1; }
.cf-turnstile { margin: .4rem 0 .6rem; min-height: 65px; }
.esito-errore { background: var(--cor-chiaro); border: 1.5px solid var(--cor); }
.link-bottone { background: none; border: 0; padding: 0; font: inherit; color: var(--pri); text-decoration: underline; cursor: pointer; }
.materiali-chi { padding: .8rem 1rem; background: #fff; border: 1.5px solid var(--ink); border-radius: 12px; }
.riquadro-schede { background: var(--pri-chiaro); }
.schede-collegate { display: grid; gap: .8rem; }
.scheda-collegata { display: grid; grid-template-columns: 5.5rem 1fr; gap: .9rem; align-items: center; padding: .6rem; background: #fff; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); text-decoration: none; }
.scheda-collegata:hover { box-shadow: 3px 3px 0 var(--pri); }
.scheda-collegata img { width: 5.5rem; height: auto; border: 1px solid var(--riga); border-radius: 6px; }
.scheda-collegata strong { color: var(--pri); }