/*
 * Sito pubblico Opium.
 * Palette e famiglia di caratteri presi dal sito attuale: fondo quasi
 * nero, rosso acceso per gli accenti, Helvetica. Il markup è nuovo —
 * quello di Elementor non era portabile — l'identità è la stessa.
 */

:root {
    --nero:    #080808;
    --nero-2:  #111111;
    --nero-3:  #1a1010;
    --bordo:   #2c2c2c;
    --grigio:  #9a9a9a;
    /* Era #6d6d6d: sul nero dava 3,87:1 nel piede e 3,65:1 sulle etichette
       del modulo, sotto il minimo di 4,5:1 per il testo piccolo. Alzato
       quel tanto che basta a passare, restando secondario a --grigio. */
    --grigio-2:#8a8a8a;
    --rosso:   #ff3311;
    --rosso-2: #e02a0c;
    /* Il rosso dei riempimenti al passaggio del puntatore: scurisce invece
       di schiarire, cosi' il bianco sopra guadagna contrasto (5,75:1)
       proprio mentre si sta per premere. */
    --rosso-3: #c81f05;
    --bianco:  #ffffff;

    --testo: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --largo: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Le parti che non disegniamo noi arrivano coi colori del browser: su un
   fondo quasi nero la selezione azzurra e la barra di scorrimento chiara
   sono le due cose che tradiscono un tema non finito. */
html {
    color-scheme: dark;
    scrollbar-color: var(--bordo) var(--nero);
}

::selection { background: var(--rosso-2); color: var(--bianco); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nero); }
::-webkit-scrollbar-thumb { background: var(--bordo); }
::-webkit-scrollbar-thumb:hover { background: var(--grigio-2); }

body {
    background: var(--nero);
    color: var(--bianco);
    font-family: var(--testo);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

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

/* --- testata --- */

/* La testata resta in vista mentre si scorre. Sopra il video di apertura
   e' trasparente e non taglia l'immagine; appena la pagina si muove si
   posa su un fondo scuro sfocato, cosi' le voci restano leggibili su
   qualsiasi cosa passi sotto. Il cambio e' una transizione, non uno
   scatto: la classe la mette galleria.js. */
.testata {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    /* La lastra attraversa tutta la finestra: fermandosi a 1120px si
       vedrebbero i due tagli netti ai lati, e sembrerebbe un pannello
       appoggiato invece di una barra. Il contenuto resta incolonnato
       col resto del sito grazie al padding calcolato. */
    padding: 20px max(20px, calc(50vw - var(--largo) / 2 + 20px));
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color .35s ease, border-color .35s ease,
                padding .35s ease, backdrop-filter .35s ease;
}


/* Vetro: non un pannello opaco, ma una lastra che lascia intravedere
   cio' che le passa sotto. Tre cose insieme la fanno leggere come vetro
   invece che come plastica: la sfocatura con un filo di saturazione in
   piu' (il colore sotto resta vivo), un fondo appena inclinato invece
   che piatto, e il bordo chiaro in alto, che e' il riflesso dello
   spessore. Niente di piu': su un locale notturno deve sembrare vetro
   fume', non una finestra di sistema. */
.testata-posata {
    padding: 12px max(20px, calc(50vw - var(--largo) / 2 + 20px));
    background: linear-gradient(
        to bottom,
        rgba(26, 16, 16, .78),
        rgba(8, 8, 8, .86)
    );
    border-bottom-color: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 10px 30px rgba(0, 0, 0, .45);
}

/* Dove la sfocatura non c'e' (Firefox senza la funzione attiva) il fondo
   deve reggere da solo: si scurisce, altrimenti il testo finisce sopra
   il video senza niente dietro. */
@supports not (backdrop-filter: blur(1px)) {
    .testata-posata { background: rgba(8, 8, 8, .94); }
}

/* Il logo rimpicciolisce con la barra: e' il segnale che dice "stai
   scorrendo" senza spostare niente d'altro. */
.testata-logo img { transition: width .35s ease; }
.testata-posata .testata-logo img { width: 104px; }

@media (prefers-reduced-motion: reduce) {
    .testata, .testata-logo img { transition: none; }
}

.testata-logo img { width: 132px; height: auto; }

.testata-menu {
    display: flex;
    gap: 28px;
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.testata-menu a { color: var(--grigio); transition: color .2s; }
.testata-menu a:hover { color: var(--bianco); }

/* --- impaginazione --- */

.contenuto {
    max-width: var(--largo);
    margin: 0 auto;
    padding: 48px 20px 72px;
}

.pagina-titolo {
    margin: 0 0 32px;
    font-size: clamp(28px, 5vw, 44px);
    letter-spacing: .02em;
    line-height: 1.15;
}

.sezione { margin-bottom: 64px; }

.sezione-titolo {
    margin: 0 0 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rosso);
}

/* Era un testino sottolineato in fondo alla sezione e non si vedeva:
   ora e' un bottone centrato, grande quanto quelli del modulo. */
.sezione-altro {
    margin-top: 32px;
    text-align: center;
}

.sezione-altro a {
    display: inline-block;
    padding: 15px 38px;
    border: 1px solid var(--rosso);
    color: var(--rosso);
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: background-color .2s, color .2s;
}

.sezione-altro a:hover,
.sezione-altro a:focus-visible {
    background: var(--rosso-2);
    color: var(--bianco);
}

@media (max-width: 600px) {
    /* Sul telefono occupa la riga: e' il gesto successivo piu' probabile. */
    .sezione-altro a { display: block; padding: 16px 20px; }
}

.vuoto { color: var(--grigio); }

/* --- apertura della home --- */

.apertura {
    padding: 56px 0 72px;
    text-align: center;
    border-bottom: 1px solid var(--bordo);
    margin-bottom: 64px;
}

/* Il video occupa tutta la larghezza della finestra anche se il contenuto
   e' centrato a 1120px: si esce dal contenitore con i margini negativi. */
.apertura-video {
    position: relative;
    width: 100vw;
    margin: -48px 0 64px calc(50% - 50vw);
    padding: 0;
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: none;
    background: var(--nero-2);
}

.apertura-sfondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.apertura-testo {
    position: relative;
    padding: 96px 20px;
    /* Velo scuro dietro al testo: il video e' chiaro in alcuni fotogrammi. */
    background: radial-gradient(ellipse at center, rgba(8, 8, 8, .55) 0%, rgba(8, 8, 8, 0) 70%);
}

.apertura-video .apertura-titolo {
    font-size: clamp(48px, 11vw, 120px);
    letter-spacing: .12em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}

.apertura-video .apertura-claim {
    color: var(--bianco);
    font-size: clamp(12px, 1.6vw, 16px);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}

/* Il video NON si nasconde con prefers-reduced-motion: su iPhone quella
   preferenza si accende da sola col risparmio energetico, e l'apertura
   del sito spariva. Se il browser non lo avvia resta il poster, che e'
   lo stesso fotogramma. */

.apertura-titolo {
    margin: 0 0 12px;
    font-size: clamp(32px, 7vw, 64px);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.apertura-claim {
    margin: 0;
    color: var(--grigio);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 12px;
}

/* --- presentazione del locale (home) --- */

/* Ogni sezione e' una scheda: su fondo nero, senza un bordo e uno stacco
   di colore, i testi lunghi si leggono come un blocco unico. Su telefono
   la scheda va a una colonna e la foto sopra il testo. */
.presentazione {
    display: grid;
    gap: 0;
    margin-bottom: 32px;
    background: var(--nero-2);
    border: 1px solid var(--bordo);
    overflow: hidden;
}

.presentazione-con-foto { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 860px) {
    .presentazione-con-foto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    /* A sezioni alterne la foto passa a sinistra, cosi' la pagina non
       diventa una colonna sola di immagini incolonnate. */
    .presentazione-invertita .presentazione-testo { order: 2; }
}

.presentazione-testo {
    padding: 40px;
    align-self: center;
    min-width: 0;
}

@media (max-width: 600px) {
    .presentazione-testo { padding: 28px 20px; }
}

.presentazione-testo p {
    color: var(--grigio);
    font-size: 16px;
    margin: 0;
    max-width: 62ch;
}

/* Il marchio ONLY arriva a 900px di lato: senza un tetto riempie lo
   schermo del telefono e schiaccia il titolo che lo segue. */
.presentazione-marchio {
    width: auto;
    max-width: 180px;
    max-height: 72px;
    object-fit: contain;
    margin: 0 0 20px;
}

.presentazione-testo .sezione-titolo { margin-top: 0; }

.presentazione-punti {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

/* I punti sono etichette, non un elenco: il pallino di sistema li
   faceva sembrare una lista della spesa. */
.presentazione-punti li {
    border: 1px solid var(--rosso);
    color: var(--rosso);
    padding: 7px 14px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1;
}

.presentazione-foto {
    display: grid;
    gap: 2px;
    grid-auto-rows: 1fr;
    min-width: 0;
}

.presentazione-foto img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
}

@media (min-width: 860px) {
    .presentazione-foto img { min-height: 260px; }
}

/* --- griglia di schede --- */

.griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}

.scheda {
    display: block;
    background: var(--nero-2);
    border: 1px solid var(--bordo);
    transition: border-color .2s, transform .2s;
}

.scheda:hover { border-color: var(--rosso); transform: translateY(-2px); }

/* Le locandine arrivano nei formati che arrivano: quadrate da Instagram,
   verticali dalla stampa, orizzontali da un video. 'contain' le mostra
   intere invece di ritagliarle, perche' il taglio fa sparire proprio la
   parte che il grafico ci ha messo. Il rapporto fisso resta sul riquadro,
   non sull'immagine: senza, locandine di forme diverse renderebbero le
   schede alte diverse e la fila risulterebbe sfalsata. Il fondo scuro
   riempie lo spazio che avanza ai lati o sopra e sotto. */
.scheda-immagine {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    background: var(--nero-3);
    max-width: 100%;
}

.scheda-immagine-vuota { display: block; background: var(--nero-3); }

.scheda-testo { display: block; padding: 16px; }

.scheda-data {
    display: block;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rosso);
    margin-bottom: 6px;
}

.scheda-titolo { display: block; font-size: 17px; line-height: 1.3; }

/* L'assaggio della serata. Due righe e poi i puntini: il testo arriva gia'
   accorciato dal modello, ma la lunghezza in caratteri non dice quante righe
   occupera', e schede alte diverse sfalsano la griglia. */
.scheda-descrizione {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--grigio);
}

/* --- pagina di una serata --- */

.evento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
}

@media (min-width: 820px) {
    .evento { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; }
}

.evento-locandina { width: 100%; border: 1px solid var(--bordo); }

.evento-data {
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rosso);
}

/* Riga di contesto sulle serate storiche senza descrizione: deve
   leggersi come una nota, non competere col titolo. */
.evento-contesto {
    margin: 16px 0 0;
    max-width: 52ch;
    font-size: 14px;
    line-height: 1.7;
    color: var(--grigio, #a6a6a6);
}

.evento-titolo {
    margin: 0 0 28px;
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.15;
    letter-spacing: .02em;
}

.evento-dettagli {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 20px;
    margin: 0 0 28px;
    padding: 20px 0;
    border-top: 1px solid var(--bordo);
    border-bottom: 1px solid var(--bordo);
    font-size: 15px;
}

.evento-dettagli dt {
    color: var(--grigio-2);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding-top: 3px;
}

.evento-dettagli dd { margin: 0; }

.evento-descrizione { color: var(--grigio); margin-bottom: 32px; }

.evento-azioni { display: flex; flex-wrap: wrap; gap: 12px; }

.pulsante {
    display: inline-block;
    padding: 14px 28px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    border: 1px solid var(--rosso);
    transition: background .2s, color .2s;
}

/* Stesso motivo del .bottone: riempito, il rosso pieno non regge il bianco.
   Il bordo resta --rosso, cosi' il pulsante non perde l'accento di marca. */
.pulsante-primario { background: var(--rosso-2); color: var(--bianco); }
.pulsante-primario:hover { background: var(--rosso-3); border-color: var(--rosso-3); }

.pulsante-secondario { background: transparent; color: var(--rosso); }
.pulsante-secondario:hover { background: var(--rosso-2); color: var(--bianco); }

/* --- album --- */

.album-data {
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rosso);
}

.album-conto {
    margin: -16px 0 28px;
    color: var(--grigio-2);
    font-size: 13px;
}

/* La griglia riprende le misure del vecchio sistema fatto in casa:
   colonne da 300px, 20px di distacco, angoli a 15px. */
.album-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

@media (max-width: 600px) {
    .album-griglia { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

.album-foto {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
}

.album-foto img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--nero-2);
    border-radius: 15px;
    transition: transform .3s ease;
}

/* Lo scatto di ingrandimento sull'anteprima era la firma della gallery. */
.album-foto:hover img { transform: scale(1.05); }

/* --- lightbox: stesse misure e tempi del sistema precedente --- */

.lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .9);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}

.lightbox.show { opacity: 1; pointer-events: auto; }

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
    border-radius: 10px;
}

/* Lo zoom di entrata: la foto si posa invece di comparire di colpo. */
.lightbox-entra { animation: lightbox-zoom .35s ease; }

@keyframes lightbox-zoom {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.lightbox .prev,
.lightbox .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    padding: 15px;
    user-select: none;
    transition: color .2s;
}

.lightbox .prev { left: 20px; }
.lightbox .next { right: 20px; }

.lightbox .prev:hover,
.lightbox .next:hover,
.lightbox .prev:focus-visible,
.lightbox .next:focus-visible { color: #a6a6a6; }

@media (max-width: 600px) {
    .lightbox .prev, .lightbox .next { font-size: 34px; padding: 10px; }
    .lightbox .prev { left: 4px; }
    .lightbox .next { right: 4px; }
}

.lightbox-conto {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--grigio-2);
    font-size: 13px;
    letter-spacing: .08em;
}

/* Con la foto aperta la pagina sotto non deve scorrere. */
body.lightbox-aperta { overflow: hidden; }

/* Chi ha chiesto meno movimento vede la dissolvenza e basta. */
@media (prefers-reduced-motion: reduce) {
    .album-foto img { transition: none; }
    .album-foto:hover img { transform: none; }
    .lightbox-entra { animation: none; }
}

/* --- pagine di contenuto --- */

.contenuto-pagina { max-width: 720px; }
.pagina-testo { color: var(--grigio); font-size: 17px; }

/* --- piede --- */

.piede {
    max-width: var(--largo);
    margin: 0 auto;
    padding: 40px 20px 56px;
    border-top: 1px solid var(--bordo);
    text-align: center;
    color: var(--grigio-2);
    font-size: 13px;
}

.piede p { margin: 0 0 8px; }
.piede-societa { color: var(--grigio-2); font-size: 12px; }

.piede-nome {
    color: var(--bianco);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 12px;
}

.piede-recapiti a,
.piede-social a { color: var(--grigio); margin: 0 8px; }

.piede-recapiti a:hover,
.piede-social a:hover { color: var(--rosso); }

.piede-social { margin-top: 16px; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }


/* --- pulsante WhatsApp --- */

.whatsapp {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
    transition: transform .2s;
}

.whatsapp:hover { transform: scale(1.06); }
.whatsapp svg { width: 30px; height: 30px; fill: currentColor; }

/* Con la lightbox aperta il pulsante resterebbe sopra la foto. */
body.lightbox-aperta .whatsapp { display: none; }

/* --- preloader --- */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: var(--nero);
    transition: opacity .5s ease, visibility .5s ease;
}

.preloader-via { opacity: 0; visibility: hidden; }

.preloader-marchio img {
    width: 150px;
    height: auto;
    animation: preloader-respiro 1.6s ease-in-out infinite;
}

@keyframes preloader-respiro {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}

.preloader-barra {
    width: 160px;
    height: 2px;
    background: var(--bordo);
    overflow: hidden;
}

.preloader-barra span {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--rosso);
    animation: preloader-corsa 1.1s ease-in-out infinite;
}

@keyframes preloader-corsa {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* --- menu a panino --- */

.testata-panino {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--bordo);
    cursor: pointer;
    padding: 0;
}

.testata-panino span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--bianco);
    transition: transform .25s ease, opacity .25s ease;
}

.testata-panino[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.testata-panino[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.testata-panino[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
    .testata-panino { display: flex; }

    .testata-menu {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        order: 3;
        border-top: 1px solid var(--bordo);
        margin-top: 16px;
    }

    .testata-menu-aperto { display: flex; }

    .testata-menu a {
        padding: 16px 4px;
        border-bottom: 1px solid var(--bordo);
        letter-spacing: .18em;
    }

    .testata-menu a:last-child { border-bottom: none; }
}

/* --- crediti nel piede --- */

.piede-crediti {
    margin-top: 20px;
    color: var(--grigio-2);
    font-size: 12px;
}

.piede-crediti a { color: var(--grigio); border-bottom: 1px solid var(--bordo); }
.piede-crediti a:hover { color: var(--rosso); }

/* --- pagina contatti: modulo e mappa --- */

.contenuto-contatti { max-width: 760px; }

.scheda-contatti {
    margin-top: 40px;
    padding: 32px;
    background: var(--nero-2);
    border: 1px solid var(--bordo);
}

@media (max-width: 600px) {
    .scheda-contatti { padding: 24px 20px; }
}

.scheda-contatti .sezione-titolo { margin-top: 0; }

.modulo { margin: 0; }

.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; }

.campo label {
    color: var(--grigio-2);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.obbligatorio { color: var(--rosso); }

.campo input,
.campo textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--nero);
    border: 1px solid var(--bordo);
    color: var(--bianco);
    font: inherit;
    font-size: 15px;
    border-radius: 0;
}

.campo textarea { resize: vertical; min-height: 130px; }

/* Col mouse basta il bordo rosso: l'anello su un campo appena cliccato
   sarebbe rumore. Da tastiera invece serve, e va dopo per vincere. */
.campo input:focus,
.campo textarea:focus { outline: none; border-color: var(--rosso); }

/* Il solo cambio di bordo da 1px si vedeva appena, e i campi erano gli
   unici comandi del sito senza l'anello di focus che hanno tutti gli altri. */
.campo input:focus-visible,
.campo textarea:focus-visible {
    outline: 2px solid var(--rosso);
    outline-offset: 2px;
}

.campo-errore { color: var(--rosso); font-size: 13px; }

/* Il campo esca non deve vedersi ne' finire sotto al lettore di schermo,
   ma display:none lo farebbe saltare a certi robot: si porta fuori campo. */
.campo-esca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Riempito col rosso pieno, il bianco sopra dava 3,66:1, sotto il minimo.
   Il rosso scuro che era gia' in palette per l'hover porta il testo a
   4,66:1 senza cambiare l'accento: --rosso resta quello di bordi e testi,
   dove sul nero passa largamente. */
.bottone {
    display: inline-block;
    padding: 14px 32px;
    background: var(--rosso-2);
    color: var(--bianco);
    border: none;
    font: inherit;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s;
}

/* Era opacity .85, che su un riempimento gia' scuro abbassava il contrasto
   del testo proprio mentre il puntatore ci sta sopra: ora schiarisce. */
.bottone:hover { background: var(--rosso-3); }

.esito-ok,
.esito-errore {
    padding: 14px 16px;
    border: 1px solid var(--bordo);
    font-size: 15px;
}

.esito-ok { border-color: #2e7d4f; color: #7fd8a4; }
.esito-errore { border-color: var(--rosso); color: var(--rosso); }

/* Tre link grigi in fila sparivano sotto il modulo: chi vuole
   telefonare invece di scrivere deve trovarli al primo sguardo.
   Ogni recapito e' un riquadro con area cliccabile piena. */
.recapiti-diretti {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    list-style: none;
    margin: 32px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--bordo);
}

@media (min-width: 620px) {
    .recapiti-diretti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.recapiti-diretti a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    color: var(--bianco);
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.recapiti-diretti a:hover,
.recapiti-diretti a:focus-visible {
    border-color: var(--rosso);
    background: rgba(227, 30, 36, .07);
    transform: translateY(-2px);
}

.recapito-etichetta {
    color: var(--grigio-2);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 10px;
}

.recapito-valore {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
}

/* L'indirizzo email e' la voce piu' lunga: se resta a 16px si spezza
   a meta' parola. Scende di un punto e va a capo solo alla chiocciola
   o al punto, dove l'occhio si aspetta il taglio. */
.recapiti-diretti a[href^="mailto:"] .recapito-valore {
    font-size: 14px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.dove-indirizzo { color: var(--grigio); margin: 0 0 20px; }

/* La mappa tiene le proporzioni senza che il riquadro salti al caricamento. */
.mappa {
    position: relative;
    aspect-ratio: 16 / 10;
    max-width: 100%;
    border: 1px solid var(--bordo);
    background: var(--nero);
}

.mappa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* La mappa di Google e' chiarissima: smorzarla la fa stare nel nero. */
    filter: grayscale(.4) contrast(1.05) brightness(.9);
}

.dove-indicazioni { margin: 18px 0 0; font-size: 14px; }
.dove-indicazioni a { color: var(--rosso); }

/* --- contatti in fondo alla home --- */

/* In home le due schede stanno affiancate se c'e' spazio: una sotto
   l'altra farebbe scorrere troppo dopo la gallery. */
.sezione-contatti {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
    .sezione-contatti { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.sezione-contatti .scheda-contatti { margin-top: 0; }

/* --- informazioni chiave della pagina contatti --- */

.informazioni-chiave {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    background: var(--bordo);
    border: 1px solid var(--bordo);
}

.informazioni-chiave li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    background: var(--nero-2);
}

.informazioni-chiave span {
    color: var(--rosso);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.informazioni-chiave strong { color: var(--bianco); font-size: 15px; font-weight: 400; }

.piede-orari { color: var(--grigio-2); font-size: 13px; margin: 6px 0 0; }

/* --- comparsa delle schede allo scorrimento --- */

/* Le schede entrano salendo di poco, non da mezzo schermo: deve sembrare
   che la pagina si componga, non che le cose volino dentro. La classe
   arriva da galleria.js; senza JS non si mette niente e le schede sono
   visibili da subito, come sono sempre state. */
.entra {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.entra-dentro {
    opacity: 1;
    transform: none;
}

/* In una griglia le schede arrivano a scaletta: la fila non compare
   tutta insieme, e l'occhio la legge da sinistra a destra. */
.entra:nth-child(2) { transition-delay: .07s; }
.entra:nth-child(3) { transition-delay: .14s; }
.entra:nth-child(4) { transition-delay: .21s; }
.entra:nth-child(5) { transition-delay: .28s; }
.entra:nth-child(6) { transition-delay: .35s; }

/* Chi ha chiesto meno animazioni vede le schede e basta: l'ordine di
   lettura non dipende dal movimento. */
@media (prefers-reduced-motion: reduce) {
    .entra {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
}

/* --- Banner cookie --- */

/* Il markup sta in temi/opium/_banner-cookie.php (e, per la riapertura
   dal piede, in consenso.js). Sta a livello 1000: sopra il pulsante
   WhatsApp (900), che altrimenti spunterebbe da sotto, e sotto il
   preloader (2000), che deve coprire tutto finche' la pagina non e'
   pronta. Mobile-first: a tutta larghezza in basso; da 640px in su e'
   una scheda in basso a destra. Entra dal basso con un'animazione CSS e
   non con una classe messa da JavaScript: cosi' senza JavaScript il
   banner si vede lo stesso, e la stessa animazione riparte ogni volta
   che consenso.js lo toglie da hidden. */
.banner-cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    /* Sotto i 640px la scheda e' larga quanto lo schermo, fino a 560px:
       fra 560 e 640 il margine automatico la tiene al centro invece di
       lasciarla incollata a sinistra. */
    max-width: 560px;
    margin: 0 auto;
    padding: 22px 20px 20px;
    /* Un elemento fixed non scorre con la pagina: se il banner e' piu'
       alto dello schermo (telefono in orizzontale con Personalizza
       aperto: 493px di banner su 375px di altezza) titolo, testo e i tre
       bottoni finiscono sopra il bordo e non si raggiungono. Il banner
       si limita all'altezza visibile e scorre al suo interno; i 36px
       lasciano vedere che sotto c'e' la pagina. 100vh e' per i browser
       che non conoscono dvh; dvh e' l'altezza davvero visibile su
       mobile, con la barra del browser aperta, dove 100vh la ignora. */
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    /* Arrivati in fondo alla lista delle categorie lo scorrimento non
       deve passare alla pagina sotto. */
    overscroll-behavior: contain;
    background: var(--nero-2);
    color: var(--bianco);
    border-top: 1px solid var(--bordo);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .55);
    /* Il testo del banner e' piu' piccolo di quello della pagina, e resta
       sopra i 4,5:1 grazie a --grigio (7,4:1 sul nero-2). */
    font-size: 14px;
    line-height: 1.55;
    animation: banner-cookie-entra .45s cubic-bezier(.22, .61, .36, 1) both;
}

.banner-cookie[hidden] { display: none; }

@keyframes banner-cookie-entra {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: none;             opacity: 1; }
}

@media (min-width: 640px) {
    .banner-cookie {
        left: auto;
        right: 18px;
        bottom: 18px;
        width: 560px;
        max-width: calc(100% - 36px);
        margin: 0;
        padding: 26px 26px 24px;
        border: 1px solid var(--bordo);
    }
}

/* Con la foto ingrandita il banner resterebbe sopra la lightbox: si
   nasconde, come il pulsante WhatsApp, e torna alla chiusura. */
body.lightbox-aperta .banner-cookie { display: none; }

.banner-cookie-titolo {
    margin: 0 0 8px;
    color: var(--rosso);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.banner-cookie-testo {
    margin: 0 0 18px;
    color: var(--grigio);
}

.banner-cookie-testo a {
    color: var(--bianco);
    border-bottom: 1px solid var(--grigio-2);
    transition: color .2s, border-color .2s;
}

.banner-cookie-testo a:hover {
    color: var(--rosso);
    border-color: var(--rosso);
}

/* Tre bottoni identici: nessuno e' quello "consigliato", nessuno e'
   grigio per scoraggiare. Sotto i 480px stanno in colonna; sopra, in
   fila a colonne uguali. I 44px sono il bersaglio minimo per il dito. */
.banner-cookie-azioni {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 480px) {
    .banner-cookie-azioni { grid-template-columns: repeat(3, 1fr); }
}

.banner-cookie-bottone {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    background: transparent;
    color: var(--bianco);
    border: 1px solid var(--grigio-2);
    font: inherit;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.banner-cookie-bottone:hover,
.banner-cookie-bottone[aria-expanded="true"] {
    border-color: var(--rosso);
    background: var(--nero-3);
}

/* Il pannello delle categorie si apre sotto i tre bottoni e non al loro
   posto: chi ha premuto Personalizza puo' ancora accettare o rifiutare
   tutto senza tornare indietro. */
.banner-cookie-scelte {
    display: grid;
    gap: 4px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--bordo);
}

.banner-cookie-scelte[hidden] { display: none; }

.banner-cookie-categoria {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "nome interruttore"
        "nota interruttore";
    column-gap: 16px;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
}

.banner-cookie-nome {
    grid-area: nome;
    color: var(--bianco);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.banner-cookie-nota {
    grid-area: nota;
    color: var(--grigio-2);
    font-size: 12px;
    line-height: 1.45;
}

/* Interruttore disegnato sopra una casella nativa: resta una casella
   per la tastiera e i lettori di schermo (role="switch"), cambia solo
   la faccia. La casella dei necessari e' accesa e disabilitata, cosi'
   si vede che esiste e che non e' in discussione. */
.banner-cookie-categoria input {
    grid-area: interruttore;
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    margin: 0;
    border-radius: 12px;
    background: var(--bordo);
    border: none;
    position: relative;
    cursor: pointer;
    transition: background-color .2s;
}

.banner-cookie-categoria input::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bianco);
    transition: transform .2s cubic-bezier(.22, .61, .36, 1);
}

.banner-cookie-categoria input:checked { background: var(--rosso-2); }
.banner-cookie-categoria input:checked::before { transform: translateX(20px); }

.banner-cookie-categoria input:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.banner-cookie-categoria input:focus-visible {
    outline: 2px solid var(--rosso);
    outline-offset: 3px;
}

.banner-cookie-salva { margin-top: 12px; }

/* Il collegamento "Preferenze cookie" e le due pagine legali nel piede:
   stessa riga dei recapiti, stesso grigio. */
.piede-legale a { color: var(--grigio); margin: 0 8px; }
.piede-legale a:hover { color: var(--rosso); }

/* Chi ha chiesto meno movimento trova il banner gia' al suo posto; gli
   interruttori scattano invece di scivolare. */
@media (prefers-reduced-motion: reduce) {
    .banner-cookie { animation: none; }
    .banner-cookie-categoria input,
    .banner-cookie-categoria input::before { transition: none; }
}

/* --- condivisione --- */

/* Link normali e non widget dei social: cosi' in pagina non entra codice
   di terze parti, che traccerebbe chi legge prima ancora che decida di
   condividere. */
.condivisione {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 28px 0;
}

.condivisione-etichetta {
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--grigio);
}

.condivisione-canale {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--bordo);
    border-radius: 2px;
    font-size: 13px;
    color: var(--bianco);
    text-decoration: none;
    transition: border-color .2s, background .2s;
}

.condivisione-canale:hover,
.condivisione-canale:focus-visible {
    border-color: var(--rosso);
    background: var(--nero-3);
}

/* I due pulsanti di condivisione sono <button>, non link: il browser li
   disegnerebbe grigi e squadrati, fuori posto accanto agli altri. */
button.condivisione-canale {
    font: inherit;
    cursor: pointer;
}

.condivisione-copia.e-copiato {
    border-color: var(--rosso);
    color: var(--rosso);
}

/* --- carosello di apertura (feste private) --- */

/* Stessa cassa del video della home, ma le immagini stanno una sopra
   l'altra e si alternano in dissolvenza. Il fondo nero sotto evita il
   lampo bianco mentre la prima foto arriva. */
.apertura-carosello {
    position: relative;
    width: 100vw;
    margin: -48px 0 64px calc(50% - 50vw);
    padding: 0;
    min-height: 68vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: none;
    background: var(--nero-2);
}

.apertura-carosello .apertura-sfondo {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.apertura-carosello .apertura-sfondo.e-visibile { opacity: 1; }

/* Il testo va letto su foto chiare e scure: il velo e' piu' fitto di
   quello della home, dove il video e' scuro quasi ovunque. */
.apertura-carosello .apertura-testo {
    padding: 80px 20px;
    background: radial-gradient(ellipse at center, rgba(8, 8, 8, .78) 0%, rgba(8, 8, 8, 0) 72%);
}

.apertura-carosello .apertura-titolo {
    font-size: clamp(34px, 6.5vw, 72px);
    text-shadow: 0 2px 24px rgba(0, 0, 0, .75);
}

.apertura-carosello .apertura-claim {
    color: var(--bianco);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}

/* Chi ha chiesto meno movimento vede la prima foto ferma. */
@media (prefers-reduced-motion: reduce) {
    .apertura-carosello .apertura-sfondo { transition: none; }
}

/* Il bottone dentro una sezione di presentazione segue il testo, che e'
   allineato a sinistra, invece di stare al centro come quello che chiude
   "In programma" e "Gallery". */
.presentazione-altro {
    margin-top: 24px;
    text-align: left;
}

@media (max-width: 720px) {
    .presentazione-altro { text-align: center; }
}