/* Il tipo di carattere del prototipo, servito dal dominio del sito. */
@font-face{font-family:'Roboto';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/font/roboto-latin-ext-italic.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:'Roboto';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/font/roboto-latin-italic.woff2) format('woff2');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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/font/roboto-latin-ext-normale.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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:'Roboto';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/font/roboto-latin-normale.woff2) format('woff2');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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

*{box-sizing:border-box}
body{margin:0;background:#fff;color:#1d1d1f;font-family:Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#0a5cff;text-decoration:none}
a:hover{text-decoration:underline}
input,select,textarea,button{font:inherit;font-family:Roboto,"Helvetica Neue",Arial,sans-serif;color:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0;text-wrap:pretty}
::placeholder{color:#86868b}

/* Le animazioni del prototipo. */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.5)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes drawer{from{transform:translateX(100%)}to{transform:none}}

/* L'entrata in scena delle sezioni mentre si scorre.
   Lo stato di partenza vive QUI e non nello stile in linea: senza JavaScript
   la regola non si applica e il testo si vede tutto, invece di restare
   invisibile per sempre. Quando la sezione entra nello schermo il sito le mette
   l'attributo data-dc-visto e la regola smette di valere: il resto lo fa la
   transizione, che è quella scritta dal prototipo. */
html.dc-pronto [data-reveal]:not([data-dc-visto]){opacity:0;transform:translateY(22px)}

/* Chi ha chiesto al sistema operativo meno animazioni le ottiene, e soprattutto
   vede subito tutto invece di aspettare che entri in scena. */
@media (prefers-reduced-motion:reduce){
  html.dc-pronto [data-reveal]{opacity:1 !important;transform:none !important}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* L'immagine dentro un riquadro del prototipo. Riempie il contenitore e basta:
   niente position:absolute, perché i riquadri non sono tutti posizionati e
   un'immagine assoluta scavalcherebbe il suo. */
.dc-slot{width:100%;height:100%;display:block;border:0}
.dc-slot-copre{object-fit:cover}
.dc-slot-dentro{object-fit:contain}
.dc-slot-vuota{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font-size:13px;line-height:1.35;color:#86868b;background:#f5f5f7}

/* Il contorno di chi naviga da tastiera: nel prototipo non c'era. */
:focus-visible{outline:2px solid #0a5cff;outline-offset:2px;border-radius:6px}

/* Il primo disegno scritto nell'HTML: se ne vede uno solo, quello giusto per la
   larghezza dello schermo. Appena il JavaScript prende in mano la pagina li
   sostituisce entrambi con quello vero, e questa regola non serve più. */
[data-dc-pre]{display:none}
@media (max-width:899px){[data-dc-pre="stretto"]{display:block}}
@media (min-width:900px){[data-dc-pre="largo"]{display:block}}

@media (hover:hover){.dchzzbxzx:hover{opacity:.8 !important;text-decoration:none !important}}
.dcfm3y4ku:focus{border-color:#0a5cff !important;box-shadow:0 0 0 3px rgba(10,92,255,.15) !important}
@media (hover:hover){.dch1dg9xtc:hover{background:#f5f5f7 !important}}
@media (hover:hover){.dchikprq4:hover{background:#0a5cff !important}}
.dcfkkmk5k:focus{border-color:#0a5cff !important}
@media (hover:hover){.dch10lax47:hover{color:#0a5cff !important}}
@media (hover:hover){.dchj484iw:hover{background:#ebebef !important}}
@media (hover:hover){.dch8ao3cw:hover{background:#0047d6 !important}}
@media (hover:hover){.dchwa76wk:hover{border-color:#1d1d1f !important}}
@media (hover:hover){.dch1owgwsp:hover{transform:translateY(-4px) !important}}
.dcaja5ujf:active{transform:scale(.97) !important}
@media (hover:hover){.dchkkmk5k:hover{border-color:#0a5cff !important}}
.dcaz0vare:active{transform:scale(.98) !important}
.dcfjf34dl:focus{border-color:#25d366 !important}
@media (hover:hover){.dchbkj1j6:hover{transform:scale(1.06) !important;text-decoration:none !important}}
@media (hover:hover){.dch1plf97i:hover{transform:scale(1.06) !important}}
@media (hover:hover){.dch955hnd:hover{color:#6aa3ff !important;text-decoration:none !important}}
@media (hover:hover){.dch63tq8a:hover{color:#fff !important;text-decoration:none !important}}