/* Il tipo di carattere del prototipo, servito dal dominio del sito. */
@font-face{font-family:'Archivo Narrow';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/font/archivo-narrow-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:'Archivo Narrow';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/font/archivo-narrow-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}

body{margin:0;background:#F7F4EF;font-family:'Archivo Narrow',sans-serif;color:#111111;-webkit-font-smoothing:antialiased}
a{color:#111111;text-decoration:none}
a:hover{color:#6E6A63}

/* Le animazioni del prototipo. */
@keyframes nxUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes nxDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes nxIn{from{opacity:0}to{opacity:1}}
@keyframes nxSlideR{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes nxSlideUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes nxZoom{from{transform:scale(1.08)}to{transform:none}}
@keyframes nxPulse{0%,100%{box-shadow:0 0 0 0 rgba(17,17,17,.35)}70%{box-shadow:0 0 0 10px rgba(17,17,17,0)}}
@keyframes nxFade{0%{opacity:0;transform:translateY(4px)}12%{opacity:1;transform:none}88%{opacity:1}100%{opacity:0}}
.nx-scroll::-webkit-scrollbar{display: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 si vede tutto, e col JavaScript il disegno non può
   cancellarla per sbaglio riallineando gli attributi. Quando la sezione entra
   nello schermo prende l'attributo data-nx-visto e la regola smette di valere. */
html.dc-pronto [data-nx-k]{transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
html.dc-pronto [data-nx-k]:not([data-nx-visto]){opacity:0;transform:translateY(14px)}
html.dc-pronto [data-nx-i="0"]:not([data-nx-visto]){transform:translateY(22px)}
html.dc-pronto [data-nx-i="1"]{transition-delay:55ms}
html.dc-pronto [data-nx-i="2"]{transition-delay:110ms}
html.dc-pronto [data-nx-i="3"]{transition-delay:165ms}
html.dc-pronto [data-nx-i="4"]{transition-delay:220ms}
html.dc-pronto [data-nx-i="5"]{transition-delay:275ms}
html.dc-pronto [data-nx-i="6"]{transition-delay:330ms}
html.dc-pronto [data-nx-i="7"]{transition-delay:385ms}
html.dc-pronto [data-nx-i="8"]{transition-delay:440ms}
html.dc-pronto [data-nx-i="9"]{transition-delay:495ms}
html.dc-pronto [data-nx-i="10"]{transition-delay:550ms}
html.dc-pronto [data-nx-i="11"]{transition-delay:605ms}
html.dc-pronto [data-nx-i="12"]{transition-delay:660ms}

/* 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-nx-k]{opacity:1 !important;transform:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* L'immagine dentro un riquadro del prototipo. */
.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:12px;color:#6E6A63;background:#EFEBE4}

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

/* 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:999px){[data-dc-pre="mobile"]{display:block}}
@media (min-width:1000px){[data-dc-pre="desktop"]{display:block}}

.dcacm7gbc:active{transform:scale(.96) !important}
.dcaja5ujf:active{transform:scale(.97) !important}
@media (hover:hover){.dch3pq1z:hover{background:#111111 !important;color:#FFFFFF !important}}
@media (hover:hover){.dch1q4gt2o:hover{color:#111111 !important}}
@media (hover:hover){.dchnby8ys:hover{background:#2A2A2A !important;color:#FFFFFF !important}}
@media (hover:hover){.dch11j7iy0:hover{transform:scale(1.04) !important}}
@media (hover:hover){.dch6frkzn:hover{border-color:#111111 !important}}
@media (hover:hover){.dch1eobb4p:hover{border-bottom-color:#111111 !important}}
@media (hover:hover){.dchnx0ch8:hover{background:#E8DFD0 !important;border-color:#E8DFD0 !important;color:#111111 !important}}
@media (hover:hover){.dchlkltwr:hover{background:#FFFFFF !important;color:#111111 !important}}
@media (hover:hover){.dch1owgwsp:hover{transform:translateY(-4px) !important}}
@media (hover:hover){.dchm8ceo7:hover{background:#F7F4EF !important}}
@media (hover:hover){.dchcvx9ey:hover{background:#2A2A2A !important}}