/* pionego — la vetrina. Generato da costruisci.py: non si edita a mano. */
@font-face{font-family:'Playfair';src:url('/font/playfair-latin.woff2')format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair';src:url('/font/playfair-latin-ext.woff2')format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken';src:url('/font/hanken-latin.woff2')format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken';src:url('/font/hanken-latin-ext.woff2')format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--blu:#64AFFF;--giallo:#FFC32D;--navy:#354270;--grigio:#6b7280;--chiaro:#e6e9f0;
--sfondo:#fff;--testo:#1b2238;--carta:#f6f8fc;
--f-titoli:'Playfair',Georgia,serif;--f-testo:'Hanken',system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sfondo);color:var(--testo);font-family:var(--f-testo);
font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:62rem;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--f-titoli);font-weight:600;line-height:1.14;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.2vw,3.1rem);margin:.2em 0 .45em}
h2{font-size:clamp(1.42rem,3.3vw,2rem);margin:0 0 .4em}
h3{font-size:1.1rem;margin:0 0 .25em}
p{margin:0 0 1em}
a{color:var(--navy);text-underline-offset:.18em}
a:hover{color:var(--blu)}
/* ♿ ACC-03: il focus si vede, e non lo copre nessuno */
:focus-visible{outline:3px solid var(--giallo);outline-offset:3px;border-radius:4px}
.salta{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
padding:.7rem 1rem;z-index:50;border-radius:0 0 8px 0}
.salta:focus{left:0}
/* 🔴 LA TESTATA RESTA. Su una pagina da 2.300 px una testata `static` esiste
   per i primi 68, e poi chi legge non ha piu' ne' il menu ne' l'azione. */
.testata{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.93);
border-bottom:1px solid var(--chiaro)}
@supports (backdrop-filter:blur(1px)){.testata{backdrop-filter:blur(12px) saturate(140%)}}
html{scroll-padding-top:5rem}
.riga{display:flex;align-items:center;gap:1.4rem;min-height:68px}
.marchio{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
color:var(--navy);font-family:var(--f-titoli);font-size:1.32rem;font-weight:600;
white-space:nowrap}
.marchio svg{width:22px;height:28px;color:var(--giallo);display:block}
.menu-largo{margin-left:auto}
.menu-largo ul{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0}
.testata nav a{color:var(--testo);text-decoration:none;font-size:.96rem;opacity:.82}
.testata nav a:hover{opacity:1;color:var(--navy)}
.testata nav a[aria-current="page"]{opacity:1;font-weight:600;
box-shadow:inset 0 -2px 0 var(--giallo)}
.azioni{display:flex;align-items:center;gap:.6rem}
.bottone-testata{display:inline-flex;align-items:center;min-height:40px;
padding:0 1.05rem;border-radius:999px;background:var(--navy);color:#fff;
text-decoration:none;font-size:.93rem;font-weight:600;white-space:nowrap}
.bottone-testata:hover{background:#2a3459;color:#fff}
/* il menu su telefono: `<details>`, zero JavaScript */
.menu-stretto{display:none;position:relative}
.menu-stretto summary{display:flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:12px;cursor:pointer;list-style:none;
border:1px solid var(--chiaro);background:#fff}
.menu-stretto summary::-webkit-details-marker{display:none}
.menu-stretto svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:2;
stroke-linecap:round}
.menu-stretto .croce,.menu-stretto[open] .tratti{display:none}
.menu-stretto[open] .croce{display:block}
.menu-stretto nav{position:absolute;right:0;top:calc(100% + .6rem);min-width:14rem;
background:#fff;border:1px solid var(--chiaro);border-radius:14px;padding:.4rem;
box-shadow:0 18px 44px rgba(27,34,56,.14)}
.menu-stretto nav ul{list-style:none;margin:0;padding:0}
/* ♿ il bersaglio di tocco e' 48 px, non 20: su 375 px le voci in riga
   misuravano 20 px di altezza e il menu andava a due righe. */
.menu-stretto nav a{display:flex;align-items:center;min-height:48px;padding:0 .9rem;
border-radius:10px;font-size:1rem;opacity:1}
.menu-stretto nav a:hover{background:var(--carta)}
.menu-stretto nav a[aria-current="page"]{box-shadow:none;background:var(--carta)}
.occhiello{text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:700;
color:var(--grigio);margin:0 0 .3em}
.occhiello.alto{margin-top:2.6rem}
main{padding-bottom:4rem}
main>h1{margin-top:2.2rem}
.guida{font-size:1.16rem;max-width:46ch;color:#39425e}
.aggiornata{color:var(--grigio);font-size:.9rem;margin-top:-.6em}
.sez{margin:3.2rem 0;max-width:62ch}
.sez.parla,.nastro{max-width:none}
.nastro{background:var(--carta);border:1px solid var(--chiaro);border-radius:14px;
padding:1.1rem 1.3rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;
flex-wrap:wrap;margin:2rem 0}
.nastro p{margin:0}
.nastro span{color:var(--grigio)}
.vai{display:inline-block;background:var(--giallo);color:var(--navy);text-decoration:none;
font-weight:700;padding:.68em 1.25em;border-radius:999px;white-space:nowrap}
.vai:hover{background:#ffcf52;color:var(--navy)}
.passi{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.passi li{display:grid;grid-template-columns:2.2rem 1fr;gap:1rem;align-items:start}
.passo-n{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--navy);color:#fff;
display:grid;place-items:center;font-weight:700;font-size:.95rem}
.passi p{margin:0}
.dopo{margin-top:1.4rem}
.fascia{margin:2.2rem 0;padding:0}
.fascia img{display:block;width:100%;height:auto;max-height:40vh;object-fit:cover;
border-radius:16px;background:var(--carta)}
.fascia figcaption{color:var(--grigio);font-size:.88rem;margin-top:.5em}
.carte-foto{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;
grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.carte-foto img{display:block;width:100%;height:190px;object-fit:cover;border-radius:14px;
background:var(--carta);margin-bottom:.8rem}
.carte-foto h3{margin-bottom:.2em}
.carte-foto p{margin:0;font-size:.97rem;color:#39425e}
.sez.larga{max-width:none}
.carte{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.carte li{background:var(--carta);border:1px solid var(--chiaro);border-radius:14px;
padding:1.15rem 1.2rem}
.carte p{margin:0;font-size:.97rem}
.punti{margin:0;padding-left:1.2rem;display:grid;gap:.5rem}
.domande{max-width:62ch}
.domanda{padding:1.2rem 0;border-bottom:1px solid var(--chiaro)}
.domanda h2{font-size:1.14rem;margin-bottom:.3em}
.domanda p{margin:0;color:#39425e}
.parla{background:var(--navy);color:#fff;border-radius:18px;padding:2.4rem 1.7rem;margin:3.6rem 0}
.parla .occhiello{color:var(--giallo)}
.parla p{color:rgba(255,255,255,.88)}
.fondo{border-top:1px solid var(--chiaro);background:var(--carta);
padding:3rem 0 1.6rem;margin-top:3rem;font-size:.94rem}
.fondo-griglia{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:2.4rem;
align-items:start}
.fondo-marca .marchio{font-size:1.2rem}
.fondo-claim{margin:.7em 0 .5em;color:var(--testo);max-width:22rem}
.fondo-editore{margin:0;color:var(--grigio)}
.fondo-titolo{font-family:var(--f-testo);font-size:.74rem;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;color:var(--grigio);margin:.25em 0 .7em}
.fondo-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.fondo-col a{display:inline-flex;align-items:center;min-height:34px;
color:var(--testo);text-decoration:none}
.fondo-col a:hover{color:var(--blu);text-decoration:underline}
.fondo-nota{color:var(--grigio);font-size:.88rem;line-height:1.5;
padding:.35rem 0 .5rem;max-width:20rem}
.fondo-coda{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;
margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--chiaro);
color:var(--grigio)}
.fondo-coda p{margin:0}
.fondo-legali{list-style:none;display:flex;flex-wrap:wrap;gap:1.1rem;
margin:0 0 0 auto;padding:0}
.fondo-legali a{color:var(--grigio);min-height:34px;display:inline-flex;align-items:center}
/* ♿ ACC-08: chi ha chiesto meno movimento non lo riceve */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;
scroll-behavior:auto!important}}
/* ♿ SOTTO I 900 PX IL PUNTATORE E' UN DITO, e qui si decide una volta sola:
   e' lo stesso confine in cui il menu diventa un pannello. Tenere i 44 px al solo
   640 lasciava i link del fondo a 34 su un TABLET, che e' touch quanto un telefono. */
@media (max-width:900px){.menu-largo{display:none}.menu-stretto{display:block}
.fondo-col a,.fondo-legali a{min-height:44px}
.fondo-griglia{grid-template-columns:1fr 1fr;gap:2rem}
.fondo-marca{grid-column:1/-1}}
@media (max-width:640px){.riga{min-height:60px;gap:.7rem}
.marchio{font-size:1.18rem}.menu-largo{display:none}
.azioni{margin-left:auto}
.bottone-testata{min-height:40px;padding:0 .85rem;font-size:.88rem}
.fondo{padding-top:2.4rem}
.fondo-griglia{grid-template-columns:1fr;gap:1.8rem}
.fondo-coda{margin-top:2rem}.fondo-legali{margin-left:0}
.parla{padding:1.8rem 1.2rem}}
/* ⚠️ sotto i 360 px il nome accanto al pittogramma non ci sta insieme al
   bottone: resta il pittogramma, che e' comunque un collegamento alla pagina
   iniziale con il suo `aria-label`. */
@media (max-width:359px){.testata .marchio span{display:none}}