/* Prima Nota Viva · layout */
:root{--scuro:#1d1e21;--chiaro:#fff;--rosso:#dc3434;--rosso_scuro:#b82525;--cenere:#9a9ba0;--riga:rgba(255,255,255,.75);--testo:"Roboto",Arial,sans-serif;--titolo:"Anton",Impact,sans-serif;--pennello:"Kaushan Script",cursive}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5em}
body{margin:0;background:var(--scuro);color:var(--chiaro);font-family:var(--testo);font-size:16px;line-height:1.625;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}

.port{width:100%;max-width:1200px;margin:0 auto;padding:0 2.5em}
.pennello{font-family:var(--pennello);color:var(--rosso);font-weight:400;line-height:1.01;display:block}
.headline{font-family:var(--titolo);font-weight:400;line-height:1.01;letter-spacing:.005em;text-transform:none}
.tag{display:inline-block;background:var(--rosso);color:var(--chiaro);font-size:.8125em;line-height:1.35;padding:0 .45em;text-transform:none}
.btn{display:inline-flex;align-items:center;gap:.4em;background:var(--scuro);color:var(--chiaro);border:1px solid var(--scuro);padding:.75em 1.25em;font-size:.875em;font-weight:700;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background .2s ease,color .2s ease}
.btn:hover{background:var(--rosso);border-color:var(--rosso)}
.btn svg{width:.75em;height:.75em}
.btn--rosso{background:var(--rosso);border-color:var(--rosso)}
.btn--rosso:hover{background:var(--chiaro);color:var(--scuro);border-color:var(--chiaro)}
.btn--bordo{background:transparent;color:var(--scuro);border-color:var(--scuro);letter-spacing:.12em;text-transform:uppercase}
.btn--bordo:hover{background:var(--scuro);color:var(--chiaro)}
.btn[disabled]{opacity:.6;cursor:wait}

/* intestazione */
.sitehead{position:sticky;top:0;z-index:30;background:var(--scuro);border-bottom:1px solid rgba(255,255,255,.06)}
.sitehead_row{display:flex;align-items:center;justify-content:space-between;min-height:4.05em}
.sitehead_logo img{width:12.5em}
.sitehead_menu{display:flex;gap:2.5em}
.sitehead_menu a{text-decoration:none;text-transform:uppercase;font-size:.875em;font-weight:500;padding:.5em 0;border-bottom:2px solid transparent}
.sitehead_menu a:hover,.sitehead_menu a[aria-current]{border-bottom-color:var(--rosso)}
.sitehead_apri{display:none;width:2.75em;height:2.75em;background:none;border:0;padding:0;cursor:pointer}
.sitehead_apri span{display:block;width:1.6em;height:2px;background:var(--chiaro);margin:.35em auto}

/* bordo strappato */
.strappo{display:block;width:100%;height:5.5em;margin:-1px 0}
.strappo path{fill:currentColor}

/* sezione apertura */
.apertura{position:relative;height:calc(100vh - 4em);min-height:31em;max-height:52em;overflow:hidden;background:#000}
.apertura > img{width:94%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.apertura_testo{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1.5em;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
.apertura_testo .pennello{font-size:6.875em;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.apertura_testo h1{font-family:var(--titolo);font-weight:400;font-size:2.75em;line-height:1.05;max-width:18em;margin-top:.25em;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.apertura_testo .btn{margin-top:1.6em}

/* materiali */
.materiali{padding:0 0 3.5em;background:var(--scuro)}
.materiali .btn{margin:0 auto;display:table;border-color:#000;background:#16171a}
.materiali_lista{display:flex;justify-content:center;gap:1.1em;margin-top:1.5em;flex-wrap:wrap}
.materiali_lista li{width:7.8em}
.materiali_lista img{width:7.8em;height:7.8em;object-fit:cover}
.materiali_lista b{display:block;margin-top:.5em;font-size:1.0625em;line-height:1.35;font-weight:700}

/* banda rossa */
.banda{background:var(--rosso);color:var(--chiaro);position:relative;overflow:hidden}
.banda_row{display:flex;align-items:center;gap:2.5em;padding:2.5em 0}
.banda_titolo .pennello{color:var(--chiaro);font-size:4.6em}
.banda_titolo .headline{font-size:4.6em;text-transform:uppercase;color:var(--chiaro)}
.banda_azioni{display:flex;flex-direction:column;gap:1.1em}
.telbox{display:flex;align-items:stretch;text-decoration:none}
.telbox i{display:flex;align-items:center;justify-content:center;width:3em;border:1px solid var(--scuro)}
.telbox i svg{width:1.4em;height:1.4em}
.telbox span{background:var(--scuro);padding:.85em 1em;font-weight:700;font-size:.9375em}
.strappata{margin-left:auto;width:16em;transform:rotate(-8deg);clip-path:polygon(4% 10%,22% 0,40% 9%,62% 2%,96% 12%,88% 34%,100% 52%,90% 78%,97% 100%,70% 92%,42% 100%,18% 88%,0 96%,7% 66%,0 40%);filter:grayscale(1)}
.strappata img{width:100%;height:12em;object-fit:cover}

/* tre colonne */
.tre{background:var(--chiaro);color:var(--scuro);padding:0 0 4.5em}
.tre_row{display:flex;justify-content:center;gap:4%;margin-top:-1.4em}
.tre_col{width:17em;text-align:center}
.macchia{width:5.2em;height:4.8em;margin:0 auto;display:flex;align-items:center;justify-content:center;background:var(--rosso);clip-path:polygon(8% 14%,40% 0,70% 6%,100% 0,94% 38%,100% 70%,86% 100%,52% 92%,16% 100%,0 72%,6% 40%)}
.macchia svg{width:2.2em;height:2.2em;color:var(--scuro)}
.tre_col h2{font-family:var(--titolo);font-weight:400;font-size:1.5em;text-transform:uppercase;margin-top:.7em}
.tre_col p{margin-top:.55em;font-size:1em;line-height:1.625}

/* collage e lista */
.lista_sez{background:linear-gradient(180deg,var(--chiaro) 0,var(--chiaro) 52%,var(--scuro) 52%,var(--scuro) 100%);padding:3em 0 4em}
.lista_row{display:flex;gap:3.3%;align-items:flex-start}
.collage{position:relative;width:48%;min-height:36em}
.collage figure{position:absolute;overflow:hidden}
.collage figure img{width:100%;height:100%;object-fit:cover}
.collage .uno{left:0;top:0;width:76%;height:24em}
.collage .due{right:0;top:15em;width:58%;height:14em;border:.5em solid var(--chiaro)}
.collage .tre{left:0;top:26em;width:50%;height:10.5em}
.lista{width:48.7%;background:var(--chiaro);color:var(--scuro);padding:0 1.25em 1.25em}
.lista > p{font-family:var(--titolo);font-size:3.75em;line-height:1.05;color:var(--rosso);text-transform:uppercase}
.lista li a{display:inline-flex;align-items:center;gap:.25em;font-family:var(--titolo);font-size:3.9em;line-height:1.24;text-decoration:none}
.lista li a svg{width:.55em;height:.55em}
.lista li a:hover{color:var(--rosso)}
.lista small{display:block;font-family:var(--testo);font-size:.9375em;color:#4a4b50;margin:-.2em 0 .5em}

/* programma */
.programma{padding:2em 0 4em}
.programma_testa{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:4em}
.programma_testa .pennello{font-size:3.75em}
.programma_testa small{display:block;font-weight:700;font-size:1.0625em;margin-top:.2em}
.programma_testa .headline{font-size:5em;margin-top:.2em}
.schedule{border:1px solid var(--riga);margin-bottom:2em}
.schedule_testa{padding:1em 1em 1.1em}
.schedule_testa .headline{font-size:2em;margin-top:.35em}
.schedule_testa .headline small{font-family:var(--testo);font-size:.4375em;margin-left:.4em}
.schedule_riga{display:flex;justify-content:space-between;gap:1em;padding:.55em 1em;border-top:1px solid var(--riga);color:#c9cacd}
.schedule_riga b{font-weight:400;color:var(--chiaro);text-align:right;white-space:nowrap}
.schedule.isChiara .schedule_testa{background:var(--chiaro);color:var(--scuro)}
.schedule_riga.oraChiave{background:var(--chiaro);color:var(--scuro)}
.schedule_riga.oraChiave b{color:var(--scuro)}
.schedule_riga.oraChiave:before{content:"✓";color:var(--rosso);margin-right:.5em}
.due_col{display:flex;gap:1.75em}
.due_col > .schedule{flex:1 1 0}

/* modulo a righe */
.modulo_sez{background:var(--chiaro);color:var(--scuro);padding:1em 0 4em}
.modulo_sez .pennello{font-size:3.75em}
.modulo_sez .headline{font-size:3.6em;text-transform:uppercase}
.modulo_intro{max-width:none;margin-top:1em}
.righe_domanda{margin-top:2em;border:1px solid var(--scuro)}
.riga_domanda{display:flex;align-items:center;gap:1.5em;padding:.85em 1em;border-top:1px solid var(--scuro)}
.riga_domanda:first-child{border-top:0}
.riga_domanda > label,.riga_domanda > span{flex:0 0 42%;font-weight:500}
.riga_domanda .risposta{flex:1 1 auto}
.riga_domanda input[type=text],.riga_domanda input[type=email],.riga_domanda select{width:100%;padding:.55em .7em;border:1px solid #c5c6ca;border-radius:0;background:#fff;font-size:1em}
.riga_domanda input:focus,.riga_domanda select:focus{outline:2px solid var(--rosso);outline-offset:1px}
.riga_domanda.con_errore{background:#fff1f1}
.riga_domanda.con_errore input,.riga_domanda.con_errore select{border-color:var(--rosso_scuro)}
.riga_domanda .avviso_campo{display:block;color:var(--rosso_scuro);font-size:.875em;margin-top:.3em}
.riga_domanda .avviso_campo:empty{display:none}
.consenso_riga{display:flex;gap:.7em;margin-top:1.2em;font-size:.9375em;line-height:1.5}
.consenso_riga input{width:1.1em;height:1.1em;margin-top:.2em;flex:0 0 1.1em;accent-color:var(--rosso)}
.invia_riga{margin-top:1.5em}
.fuori_vista{position:absolute;left:-999em;top:auto;width:1px;height:1px;overflow:hidden}
dialog.esito_dialogo{max-width:30em;border:0;padding:2em;background:var(--scuro);color:var(--chiaro);box-shadow:0 1.2em 3em rgba(0,0,0,.4)}
dialog.esito_dialogo::backdrop{background:rgba(29,30,33,.7)}
dialog.esito_dialogo .pennello{font-size:2.4em}
dialog.esito_dialogo p{margin-top:.8em}
dialog.esito_dialogo .btn{margin-top:1.4em}

/* dove */
.dove{display:flex;background:var(--chiaro);color:var(--scuro)}
.dove_info{flex:0 0 50%;padding:4em 2.5em 4em 2.5em}
.dove_info dt{margin-top:1.4em}
.dove_info dt:first-child{margin-top:0}
.dove_info dd{font-family:var(--titolo);font-size:1.6em;line-height:1.25;margin-top:.35em}
.dove_info dd a{text-decoration:none}
.dove_foto{flex:1 1 50%}
.dove_foto img{width:100%;height:100%;min-height:26em;object-fit:cover}

/* non facciamo */
.non{padding:4em 0 1em}
.non .headline{font-size:2.6em;text-transform:uppercase}
.non ul{margin-top:1.2em;display:flex;flex-wrap:wrap;gap:.8em 2.2em}
.non li{position:relative;padding-left:1.4em;flex:1 1 20em}
.non li:before{content:"×";position:absolute;left:0;color:var(--rosso);font-weight:700}

/* interno */
.testa_pagina{padding:4em 0 2.5em}
.testa_pagina .pennello{font-size:3.4em}
.testa_pagina h1{font-family:var(--titolo);font-weight:400;font-size:4em;line-height:1.05;margin-top:.15em}
.testa_pagina p{margin-top:1em;font-size:1.0625em}
.corpo{background:var(--chiaro);color:var(--scuro);padding:3.5em 0}
.corpo h2{font-family:var(--titolo);font-weight:400;font-size:2.1em;line-height:1.1;margin-top:1.6em;text-transform:uppercase}
.corpo h2:first-child{margin-top:0}
.corpo p,.corpo ul,.corpo ol,.corpo table{margin-top:.9em}
.corpo ul li{padding-left:1.3em;position:relative;margin-top:.35em}
.corpo ul li:before{content:"";position:absolute;left:0;top:.7em;width:.55em;height:.55em;background:var(--rosso)}
.corpo ol{padding-left:1.3em;list-style:decimal}
.corpo ol li{margin-top:.35em}
.tabella_esempio{width:100%;border-collapse:collapse;font-size:.9375em}
.tabella_esempio th,.tabella_esempio td{border:1px solid var(--scuro);padding:.55em .7em;text-align:left;vertical-align:top}
.tabella_esempio th{background:var(--scuro);color:var(--chiaro);font-weight:500}
.tabella_esempio .doppia td{background:#ffe9e9}
.scorrevole{overflow-x:auto}
.legale{background:var(--chiaro);color:var(--scuro);padding:3em 0 4em}
.legale h2{font-family:var(--titolo);font-weight:400;font-size:1.6em;margin-top:1.6em;text-transform:uppercase}
.legale p,.legale ul{margin-top:.8em}
.legale li{padding-left:1.1em;position:relative;margin-top:.3em}
.legale li:before{content:"–";position:absolute;left:0;color:var(--rosso)}

/* piede */
.pied-zone{padding:6em 0 4em;font-size:1em}
.pied-zone_row{display:flex;gap:2.5em}
.pied-zone_row > div{flex:1 1 0}
.pied-zone_row > div:first-child{flex:2 1 0}
.pied-zone h2{font-size:.875em;font-weight:700;text-transform:uppercase;margin-bottom:1.6em}
.pied-zone li a,.pied-zone li button{color:#b9babe;text-decoration:none;background:none;border:0;padding:.15em 0;cursor:pointer;font-size:1em;text-align:left}
.pied-zone li a:hover,.pied-zone li button:hover{color:var(--chiaro)}
.pied-zone b{display:block;font-weight:700}
.pied-zone_logo img{width:11em}
.pied-zone_nota{margin-top:3em;color:#8d8e93;font-size:.8125em}

/* striscia cookie */
.striscia_cookie{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--rosso);color:var(--chiaro);padding:1em 2.5em;display:flex;align-items:center;gap:1.5em;flex-wrap:wrap}
.striscia_cookie[hidden]{display:none}
.striscia_cookie p{flex:1 1 30em;font-size:.9375em}
.striscia_cookie .btn{font-size:.8125em}

a:focus-visible,button:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}

@media (max-width:992px){
.sitehead_menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--scuro);flex-direction:column;gap:0;padding:.5em 2.5em 1.5em}
.sitehead.aperto .sitehead_menu{display:flex}
.sitehead_menu a{padding:.8em 0;border-bottom:1px solid rgba(255,255,255,.12)}
.sitehead_apri{display:block}
.banda_row{flex-wrap:wrap}
.strappata{margin:0 auto}
.lista_row{flex-direction:column}
.collage,.lista{width:100%}
.lista_sez{background:var(--chiaro)}
.lista li a{font-size:2.9em}
}
@media (max-width:768px){
body{font-size:15px}
.port{padding:0 1.25em}
.apertura_testo .pennello{font-size:4.2em}
.apertura_testo h1{font-size:1.9em}
.apertura > img{width:100%}
.banda_titolo .pennello,.banda_titolo .headline{font-size:3em}
.tre_row{flex-direction:column;align-items:center;gap:2.5em}
.collage{min-height:28em}
.collage .uno{height:17em}
.collage .due{top:11em;height:10em}
.collage .tre{top:19em;height:8em}
.programma_testa{flex-direction:column;align-items:flex-start;gap:1.2em}
.programma_testa .headline{font-size:3.6em}
.due_col{flex-direction:column;gap:0}
.riga_domanda{flex-direction:column;align-items:stretch;gap:.4em}
.riga_domanda > label,.riga_domanda > span{flex:none}
.dove{flex-direction:column}
.dove_info{padding:3em 1.25em}
.dove_foto img{min-height:18em}
.pied-zone_row{flex-direction:column;gap:2em}
.testa_pagina h1{font-size:2.6em}
.striscia_cookie{padding:1em 1.25em}
}
@media (max-width:480px){
.lista li a{font-size:2.2em}
.materiali_lista li{width:44%}
.materiali_lista img{width:100%;height:auto;aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.schedule_riga.oraChiave:before{display:none}
.schedule_riga.oraChiave span:before{content:"✓ ";color:var(--rosso)}
.banda .btn--bordo{color:var(--chiaro);border-color:var(--chiaro)}
.banda .btn--bordo:hover{background:var(--chiaro);color:var(--scuro)}
.banda .headline[style]{color:var(--chiaro)!important}
.apertura{height:calc(100dvh - 4em)}
.apertura_testo h1,.testa_pagina h1{font-size:clamp(1.9em,4vw,4em);text-wrap:balance}
.corpo p,.tre_col p{text-wrap:pretty}
@media (max-width:768px){.riga_domanda input[type=text],.riga_domanda input[type=email],.riga_domanda select{font-size:16px}}

/* dialogo con l'assistente */
.dialogo{background:var(--scuro);color:var(--chiaro);padding:4.5em 0}
.dialogo_row{display:flex;gap:6%;align-items:center}
.dialogo_testo{flex:0 0 40%}
.dialogo_testo .headline{font-size:3em;text-transform:uppercase;margin-top:.2em}
.dialogo_testo p:last-child{margin-top:1em;line-height:1.6}
.chat{flex:1;display:flex;flex-direction:column;gap:.9em}
.chat p{margin:0;padding:1em 1.2em;border-radius:14px;line-height:1.5;max-width:88%}
.chat_tu{align-self:flex-end;background:var(--rosso);color:var(--chiaro)}
.chat_ia{align-self:flex-start;background:#2c2d31;border:1px solid var(--riga)}
.chat .btn{align-self:flex-start}
.chat_nota{align-self:flex-start;background:var(--chiaro);color:var(--scuro);border-left:6px solid var(--rosso)}
/* il weekend a Marsala */
.marsala{position:relative;background:var(--scuro);color:var(--chiaro)}
.marsala img{width:100%;height:420px;object-fit:cover;opacity:.55}
.marsala_testo{position:absolute;left:0;right:0;bottom:2.4em}
.marsala_testo .headline{font-size:3.4em;text-transform:uppercase}
.marsala_testo p{max-width:640px;margin-top:.7em;line-height:1.55}
/* prima nota raccontata */
.racconto{margin:1em 0 0;padding-left:1.3em}
.racconto li{padding:.8em 0;border-bottom:1px solid #d6d6da}
.racconto b{display:block}
.racconto span{display:block;margin-top:.2em;color:#4a4b50}
.racconto .doppia{background:#fcecec;padding-left:.6em}
.figura{margin:1.6em 0 0}
.figura img{width:100%}
.figura figcaption{margin-top:.5em;font-size:.9em;color:#5d5e63}
@media (max-width:768px){.dialogo_row{display:block}.chat{margin-top:2em}.dialogo_testo .headline,.marsala_testo .headline{font-size:2.2em}.marsala img{height:560px}.marsala_testo{bottom:1.4em}}
.chat .btn--bordo{color:var(--chiaro);border-color:var(--chiaro)}
.chat .btn--bordo:hover{background:var(--chiaro);color:var(--scuro)}

.telefonata{background:var(--chiaro);color:var(--scuro);padding:4em 0;border-top:thin solid var(--riga)}
.telefonata_row{display:flex;gap:3em;align-items:flex-start}
.telefonata_ico{flex:0 0 6em;width:6em;height:6em;color:var(--rosso)}
.telefonata .headline{font-size:3em;text-transform:uppercase;margin-top:.2em}
.telefonata p{max-width:39em;line-height:1.6}
.telefonata .headline+p{margin-top:.8em}
.telefonata_domande{margin:1.4em 0 0;padding-left:1.4em;max-width:39em}
.telefonata_domande li{padding:.5em 0;border-bottom:thin solid #d6d6da}
@media (max-width:768px){.telefonata_row{display:block}.telefonata_ico{width:4em;height:4em;margin-bottom:1em}.telefonata .headline{font-size:2.2em}}