body {
    font-family: Arial, sans-serif;

    line-height: 1.6;
    margin: 0;

    display: flex;
    flex-direction: column;
    min-height: 100vh;

    text-align: center;

    position: relative;
}

/* Sfondo fisso e coerente su TUTTI i telefoni (iOS compreso).
   Non usiamo background-attachment:fixed sul body perché su Safari/iOS
   non è affidabile: questo pseudo-elemento copre sempre l'intero
   viewport indipendentemente dallo scroll o dall'altezza della pagina. */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../immagini/castello.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}
#map-placeholder button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
}

#map-placeholder button:hover {
    background-color: #0056b3;
}



main{
    flex:1;
}
html, body {
    height: 100%;
}
.responsive-map {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 */
    width: 60%;          /* dimensione mappa */
    margin: 0 auto;      /* centra orizzontalmente */
}
.contenitore7 {
    max-width: 800px;
    margin: 40px auto;
    padding: 15px;
    text-align: center;
}
.box-contatti {  transition: transform 0.3s ease, box-shadow 0.3s ease;  background-color: #e6f2ff;    padding: 20px;    border-radius: 10px;    margin: 0 auto 20px auto; /* centra */    width: 60%;               /* dimensione */    text-align: center;       /* centra il testo dentro */}

.contenitore76{
    max-width: 1000px;
    margin: 40px auto;
    padding: 15px;
    text-align: center;
}

.responsive-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.sezione-flex {
   display: flex; 
    align-items: center;  /* Centra l'immagine verticalmente rispetto al testo */
    justify-content: flex-start; /* Tiene tutto verso sinistra */
    gap: 20px;            /* Spazio tra il div del testo e l'immagine */
    margin: 20px;
    padding: 40px; 
      
}
@media (max-width: 768px) {
    .sezione-flex {
        flex-direction: column;
        text-align: left;
        
    }
}
.sezione-flex-a {
   

/* --- EFFETTO ALONE (GLOW) --- */
   /* 1. SFONDO SEMI-TRASPARENTE: Senza questo l'alone non ha un "corpo" */
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(5px); /* Effetto vetro sfocato molto bello sul castello */
    border-radius: 50px;

    /* 2. L'ALONE (BOX-SHADOW): Ne mettiamo due per farlo brillare di più */
    /* Ombra 1: alone interno bianco | Ombra 2: alone esterno verde/oro */
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.5), 
        0 0 60px 20px rgba(184, 209, 181, 0.6); 

    /* 3. PRIORITÀ: Lo portiamo in primo piano */
    position: relative;
    z-index: 5;








margin: 50px auto;
    width: 45%; 




    display: flex;
    flex-direction: column; /* Mette gli elementi uno sotto l'altro */
    align-items: center;    /* Centra orizzontalmente testo e immagine */
    justify-content: center;/* Centra verticalmente (se il contenitore ha un'altezza) */
    text-align: center;     /* Centra le righe di testo */
    gap: 30px;              /* Spazio tra il titolo e l'immagine */
    padding: 60px 20px;     /* Respiro interno sopra/sotto e ai lati */
}
@media (max-width: 768px) {
    .sezione-flex-a {
        flex-direction: column;
        text-align: center;
        
    }
}
/* Il contenitore */
.dropdown {
    position: relative !important;
    display: inline-block !important;
    width: clamp(10px, 15vw, 200px);
}
footer {
 background-image: linear-gradient( 109.5deg,  rgb(24, 87, 86) 10.5%, rgba(39,220,96,1) 68.5% )!important;
    color: white;
    padding: 20px;
    text-align: center;
    
    
    margin-top: auto;
}

nav {z-index: 99999;
    border: none;

    box-shadow:
        0 0 0 1px rgba(20, 1, 1, 0.2),
        0 0 20px rgba(20, 1, 1, 0.1);

    display: flex;
    justify-content: flex-end;
    gap: 15px;

   
background-image: linear-gradient( 135deg, #b1f3cf 10%, #3bc728 100%);

}
/* Se usi la classe specifica */
.fotter-local-links {
    text-decoration: none;
    color: white;
}
/* Il contenitore che comanda la posizione */
.wrapper-box {
    display: flex;
    flex-wrap: wrap;        /* Permette di andare a capo */
    gap: 20px;              /* Spazio tra i box */
    padding-left: 80px;     /* Margine sinistro richiesto */
    margin-bottom: 40px;
}


.Giuseppe {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    background-color: #b4f1c6;
    padding: 20px;
    border-radius: 10px;
    width: 35%;             /* Su PC ne stanno circa 3 per riga */
    min-width: 280px;       /* Evita che diventino troppo piccoli */
    text-align: center;
    margin-left:30px ;
    padding: 5%;
}

.wrapper-box {
    display: flex;
    flex-wrap: wrap;      /* Permette di andare a riga nuova se non c'è spazio */
    gap: 20px;            /* Spazio tra i box */
    justify-content: flex-start; 
}
/* HOVER */
.Giuseppe:hover {
    background-color: #cce5ff;
    transform: translateY(-5px);
}

/* TITOLO */
.Giuseppe h4 {
    background: linear-gradient(to right, #C9CF17 40%, #CFCF1F 0%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    font-family: "Arial Black", "Comic Sans MS", cursive;
    font-size: clamp(1rem, 2.5vw, 2rem);
    font-weight: bold;
}

/* CONTENITORE */
.wrapper-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* MOBILE */
@media (max-width: 768px) {

    .wrapper-box {
        flex-direction: column;
        align-items: stretch; /* fondamentale */
        gap: 15px;
        padding: 0;
    }

    .Giuseppe {
        box-sizing: border-box; /* padding e bordo inclusi nella larghezza, niente overflow */
        width: 100%;            /* larghezza piena del contenitore, non della viewport */
        min-width: 0;           /* annulla il min-width:280px che forzava overflow su schermi stretti */
        margin-left: 0;
        margin-right: 0;
        border-radius: 0; /* opzionale: stile pieno */
    }
}

  
h4 a {
    text-decoration: none;
    position: relative;
    display: inline-block; /* fondamentale */

    background: linear-gradient(to right, #C9CF17 40%, #CFCF1F 0%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    font-family: "Comic Sans MS", "Helvetica", "sans-serif",cursive;
    font-size: clamp(1rem, 3.5vw, 2.5rem);
    font-weight: bold;
    letter-spacing: 1px;
}




h5 {



    filter: drop-shadow(0 0 8px rgb(255, 255, 255)) 
            drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
    /* 1. Font e Stile */
    font-family:  "Comic Sans MS", cursive;
    font-size: clamp(2rem, 5.5vw, 5.5rem);
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    display: table; /* Usiamo table per centrarlo meglio con margin auto */
    margin: 20px auto;
    position: relative;

    /* 2. Sfondo (Messo PRIMA del clip) */
    background: rgb(212, 95, 72);
    background: linear-gradient(90deg, rgba(212, 95, 72, 1) 0%, rgba(247, 74, 74, 1) 50%, rgba(240, 213, 96, 1) 100%);

    /* 3. Il Clip (Deve stare DOPO il background) */
    -webkit-background-clip: text;
    background-clip: text;

    /* 4. Trasparenza (Deve stare DOPO il clip) */
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* LINEA */
h4 a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px; /* più vicino al testo */
    width: 100%;
    height: 2px;

    background: linear-gradient(to right, #C9CF17, #CFCF1F);

    transform: scaleX(0); /* invece di width */
    transform-origin: left;
    transition: transform 0.3s ease;
}

/* HOVER */
h4 a:hover::after {
    transform: scaleX(1);
}

   h3{
    background: #FF0000;
background: linear-gradient(to right, #FF0000 2%, #f3b89b 83%, #FF0000 2%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
      font-family: "Comic Sans MS", "Helvetica", "sans-serif",cursive;
    /* Ho unito le due rinfuse: ora è fluido ma parte da una base più grande */
    font-size: clamp(1.5rem, 4vw, 3.2rem); 
    font-weight: bold;
    letter-spacing: 1px;
    
    margin: 10px 0; 
}

/* Se vuoi colpire tutti i link dentro i div del footer */
footer div a {
    text-decoration: none;
    color: white;
}

/* OPZIONALE: aggiungi questo per evitare che tornino blu dopo il click */
footer div a:visited {
    color: white;
}

/* Il sottomenu */
.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, rgb(63, 121, 54), rgba(29, 253, 122, 1), rgb(34, 107, 21));
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;

    /* Nascondi di default */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Mostra al passaggio del mouse */



/* Colore dei link interni */
.dropdown-content a {
    color: white !important;
    padding: 10px 15px !important;
    display: block !important;
     text-align: center !important;
    text-decoration: none !important;
    
}
header {
 
 background-image: linear-gradient( 109.5deg,  rgb(89, 197, 195) 10.5%, rgba(39,220,96,1) 68.5% );

 
    margin-bottom: 30px;
    position: relative;
   
}

/* Applica lo stesso stile a entrambi */
h1, h2 {
    font-family: "Comic Sans MS", "Helvetica", "sans-serif", cursive;
    font-weight: 800;
    letter-spacing: -1px;
    
    /* 1. Definizione Gradiente (Corretto lo spazio e i colori) */
    background: linear-gradient(175deg, #8bd1aa, #195b34, #1b705f) !important;
    
    /* 2. Clip e Trasparenza per mostrare il gradiente nel testo */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    /* Ombra per profondità */
   filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));

}

/* Gestisci solo le dimensioni separatamente */
h1 { 
    font-size: clamp(1.1rem, 5vw, 4.5rem) !important; 
    text-transform: uppercase; 
}

h2 { 
    font-size: clamp(1.1rem, 4vw, 3.2rem); 
}

/* Rende l'immagine centrata e responsiva */
.immagine { position: absolute;
    
    right: 20px;       /* Posiziona a destra */
    top:30%;
    transform: translateY(-50%); /* Centra verticalmente nell'header */
    

    width: 10%;
    border: none !important;
    border-radius: 10%;
    box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.6);
    
   
    /* RIMOZIONE BORDI E OMBRE */
    border: none;           /* Toglie eventuali bordi impostati */
    
}
    
    

/* Applica queste regole al body e html */
.testo-contenitore-siamo-a{
    max-width: 55%;           /* Leggermente più della metà */
    flex-shrink: 1;           /* Permette al div di adattarsi */
    word-wrap: break-word; 
      line-height: 1.4; 
    margin-left: 20px;     /* Distanza dal bordo sinistro */
        /* Spinge lo spazio a destra */
    margin-top: 30px;
    margin-bottom: 30px;
    
background-image: linear-gradient(120deg, #119840 0%, #204d63 100%);                       
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    text-align: justify;
          /* Testo a sinistra per leggibilità, o 'center' se preferisci */
    max-width: 50%;        /* Importante: deve essere meno del 100% per stare a sinistra */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);             /* Evita che il testo tocchi i bordi */
}



.testo-contenitore-siamo {
    background-image: linear-gradient(120deg, #40e37c 0%, #61eabf 100%); 
    max-width: 55%;           /* Leggermente più della metà */
    flex-shrink: 1;           /* Permette al div di adattarsi */
    word-wrap: break-word; 
      line-height: 1.4; 
    margin-left: 20px;     /* Distanza dal bordo sinistro */
    margin-right: auto;    /* Spinge lo spazio a destra */
    margin-top: 30px;
    margin-bottom: 30px;
    
    
                       
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    text-align: justify;
          /* Testo a sinistra per leggibilità, o 'center' se preferisci */
    max-width: 50%;        /* Importante: deve essere meno del 100% per stare a sinistra */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);             /* Evita che il testo tocchi i bordi */
}
.testo-contenitore-siamo p{
 text-align: justify !important;
}

.immagine2{
    
    position: absolute;
    left: 20px;       /* Posiziona a destra */
           /* Questa va a sinistra */
    top: 30%;
    transform: translateY(-50%); /* Centra verticalmente nell'header */
    
    width: 13%;
    border: none !important;
    border-radius: 14%;
    box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.6);
    
}
.immagine4{
     
      width: clamp(200px, 20vw, 400px);   /* Imposta la grandezza che preferisci */
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    
}
.immagine3 {
    display: block;      /* Necessario per usare margin: auto */
    margin: 0 auto;      /* Centra orizzontalmente */
    width: 60%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.immagine2027{
    display: block;
    flex: 1 1 0;              /* le due immagini dividono lo spazio in parti uguali */
    min-width: 0;             /* permette di restringersi senza sovrapporsi */
    width: 100%;
    max-width: 100%;
    height: auto;             /* mantiene le proporzioni originali */
    aspect-ratio: 1448 / 2048;
    object-fit: contain;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.immagine6{
    display: block;      /* Necessario per usare margin: auto */
    margin: 0 auto;      /* Centra orizzontalmente */
    width: clamp(400px, 90%, 800px);
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.immagine7{
    display: block;      /* Necessario per usare margin: auto */
    margin: 0 auto;      /* Centra orizzontalmente */
    width: clamp(400px, 90%, 500px);
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.donazione{
    width: clamp(300px, 90%, 500px);
}
.immagine5,.donazione {
  
  height: auto;
  display: block; /* Necessario per far funzionare margin: auto */
  margin: 0 auto; /* Centra orizzontalmente */
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.immagine5{
    width: clamp(250px, 30vw, 500px);
}
p{
    text-align: center;
}
.bottone {
    display: inline-block;    /* Li affianca */
    margin: 10px;             /* Spazio tra i bottoni */
     /* Colore sfondo (puoi cambiarlo) */
     /* Bordo per vederli bene */
    border-radius: 5px;       /* Angoli arrotondati */
    width :30%;         /* Li rende larghi uguali */
    text-align: center;
    width: clamp(200px, 15vw, 200px); 
}

/* Rimuove il blu e la sottolineatura dai link */
.bottone a {
    display: block;           /* Tutto il rettangolo diventa cliccabile */
    padding: 10px 20px;       /* Spazio interno */
    text-decoration: none;    /* TOGLIE LA SOTTOLINEATURA */
    color: #140101;              /* COLORE NERO (invece del blu) */
    font-weight: bold;        /* Testo in grassetto */
    font-size: clamp(13px, 1.2vw, 20px);
}
.bottone:hover {
    background: #c1ffb8;
background: linear-gradient(90deg, rgb(63, 121, 54) 0%, rgba(29, 253, 122, 1) 50%, rgb(34, 107, 21) 100%);
    transform: scale(1.05);    /* Il bottone si ingrandisce leggermente */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}





/*--- STILE DESKTOP (Sempre attivo) --- */ .nav-container { position: relative; display: flex; justify-content: flex-end;  background: #c1ffb8;
background: linear-gradient(90deg, rgb(63, 121, 54) 0%, rgba(29, 253, 122, 1) 50%, rgb(34, 107, 21) 100%); padding: 10px; } .menu-links { display: flex; /*Su PC i bottoni sono affiancati */ gap: 15px; } #menu-toggle { display: none; /* Nasconde la checkbox */ } .hamburger { display: none; /* Nasconde l'icona menu su PC */ } /* --- STILE MOBILE (Si attiva sotto i 768px) --- */ @media (max-width: 768px) { .hamburger { display: block; /* Mostra "Menu" */ background: #1ba536; color: white; padding: 15px 10px; border-radius: 5px; cursor: pointer; position: static; } .menu-links {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    width: 200px;
    z-index: 1000;
}/* Appare  /* IL TRUCCO: Quando la checkbox è cliccata, mostra .menu-links */ #menu-toggle:checked ~ .menu-links { display: flex; } .bottone { margin: 0; padding: 0; text-align: center; } } .bottone a, .dropdown-toggle { display: block; padding: 10px 20px; font-weight: bold; font-size: clamp(15px, 1.2vw, 25px); text-align: center !important; text-decoration: none; color: #140101; background: none; border: none; cursor: pointer; } .dropdown > a { display: block; } @media (min-width: 768px) { } /* Mobile: click */  .dropdown { position: relative; } @media (max-width: 768px) { .dropdown-content { position: static; } } .io{ text-align: center !important; }







 
















/* Dropdown base (chiuso) */
.dropdown-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);

    transition: 
        max-height 0.4s ease,
        opacity 0.3s ease,
        transform 0.3s ease;

    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    /* 🔥 STESSO IDENTICO GRADIENTE DEL NAV */
    background: linear-gradient(90deg, rgb(63, 121, 54), rgba(29, 253, 122, 1), rgb(34, 107, 21));

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;
}

/* Dropdown aperto (click mobile) */
.dropdown-content.show {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
}

/* Desktop (hover) */
@media (min-width: 769px) {
    .dropdown:hover .dropdown-content {
        max-height: 300px;
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile fix */
@media (max-width: 768px) {
    .dropdown-content {
        position: static;
        width: 100%;
    }
}






.menu-links {
    display: flex;
    gap: 15px;
}

/* MOBILE */

@media (max-width: 768px) {
   

    .bottone a {
        text-align: right;
        display: block;
    }
}
@media (max-width: 768px) {
    .menu-links {
        display: none;
        flex-direction: column;
        gap: 0; /* 🔥 FIX: rimuove lo spazio enorme tra le voci */

        position: absolute;
        top: 100%;
        right: 0;

        width: 200px;

        background: linear-gradient(90deg, rgb(63, 121, 54), rgba(29, 253, 122, 1), rgb(34, 107, 21));
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        z-index: 1000;
    }

    #menu-toggle:checked ~ .menu-links {
        display: flex;
    }

    .bottone {
        margin: 0; /* 🔥 FIX: nessun margine extra tra le voci */
        padding: 0;
    }

    .bottone a {
        text-align: center;
        display: block;
        padding: 10px 15px;
    }

    .dropdown-toggle {
        width: 100%;
        padding: 10px 15px;
        text-align: center;
    }
}





















/*Libri*/

/* CONTENITORE PRINCIPALE */
/* CONTENITORE PRINCIPALE */
/* LAYOUT */











/* ANIMAZIONE */
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================
   ANIMAZIONE SCROLL MODERNA
   ========================= */

/* Stato iniziale (nascosto) */
.fade-in,
.Giuseppe,
.card-evento,
.box-contatti,
h1, h2, h3 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Stato visibile */
.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}








.search-box {
    margin: 30px auto;
    text-align: center;
}

.search-box input {
    width: min(400px, 80%);
    padding: 12px 15px;
    border-radius: 10px;
    border: 2px solid #3bc728;
    outline: none;
    font-size: 16px;
    transition: 0.3s;
}

.search-box input:focus {
    box-shadow: 0 0 10px rgba(59, 199, 40, 0.5);
    border-color: #1ba536;
}



/*Libri*/
/* =======================
   SEZIONE LIBRI MIGLIORATA
======================= */

.wrapper-box-libri {
    display: flex;
    gap: 60px;
    max-width: 1200px;
    margin: 60px auto;
    padding: 20px;
    align-items: flex-start;
}

/* TESTO */
.testo-libro {
    flex: 1;
    background: rgba(255,255,255,0.85);
    padding: 25px;
    border-radius: 15px;
    text-align: justify;
    line-height: 1.7;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* COLONNA IMMAGINI */
.colonna-libri {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* IMMAGINI BASE */
.colonna-libri img {
    width: 100%;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    transition: transform 0.3s ease;
}

.colonna-libri img:hover {
    transform: scale(1.02);
}

/* DIMENSIONI PERSONALIZZATE */
/* IMMAGINI LIBRI */

.img1 {
    font-size: clamp(1.8rem, 4.5vw, 3.5rem);
    object-fit: cover;
}

.img2 {
    height: 650px;   /* 🔥 più alta */
    width: 100%;
    object-fit: cover;
}

.img3 {
    height: 350px;   /* 🔥 solo un po’ più grande della prima */
    width: 95%;
    object-fit: cover;
    margin-left: auto;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .wrapper-box-libri {
        flex-direction: column;
        gap: 30px;
    }

    .img3 {
        margin-left: 0;
        width: 100%;
    }
}







.modificatore-immagini{
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 640px;         /* immagini piu' piccole su PC */
    margin: 0 auto 20px;
    box-sizing: border-box;   /* il padding non allarga piu' il box oltre la card */
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    display: flex;
    align-items: flex-start;  /* niente stretch: le immagini non si deformano */
    justify-content: center;
    gap: 20px;
}

@media (max-width: 768px) {
    .modificatore-immagini {
        padding: 10px;
        gap: 10px;
    }
}

/* CONTENITORE */
.contenitore-eventi {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

/* CARD */
.card-evento {
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    width: 860px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
    
   
}

.card-evento:hover {
    transform: translateY(-6px);
}

/* TITOLO */
.card-evento h3 {
    margin-bottom: 12px;
}

/* DATA */
.info-data {
    font-weight: bold;
    color: #b03a2e;
    margin-bottom: 15px;
}

/* TESTO */
.testo-evento {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
}

/* PULSANTE */
.pulsante a {
    display: inline-block;
    padding: 10px 22px;
    background-color: #b03a2e;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s;
}

.pulsante a:hover {
    background-color: #e74c3c;
}





















@media (max-width: 768px) {

    /* Paragrafi più leggibili */
    p {
        font-size: 18px;
        line-height: 1.8;
    }

    /* Card evento non sfora */
    .card-evento {
        width: 90%;
        box-sizing: border-box;
    }

    /* Immagini grandi non sforano */
    .immagine6,
    .immagine7 {
        min-width: unset;
        width: 90%;
    }

    /* Padding sinistro che aggiungeva larghezza */
    .wrapper-box {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Box contatti prende più spazio */
    .box-contatti {
        width: 90%;
    }
}



/* Container per centrare o dare spazio all'audio */
audio {
  width: 100%;
  max-width: 400px;
  height: 45px;
  border-radius: 30px;
  background-color: #f1f3f4; /* Colore di sfondo leggero */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  outline: none;
}

/* Nota: Questi selettori funzionano principalmente su browser basati su Webkit (Chrome, Edge, Safari) */
audio::-webkit-media-controls-enclosure {
  background-color: #ffffff;
  border-radius: 30px;
}

audio::-webkit-media-controls-panel {
  background-color: #ff9800; /* Colore "Cotoletta" (Arancione) */
}

audio::-webkit-media-controls-play-button {
  background-color: #fff;
  border-radius: 50%;
}
audio::-webkit-media-controls-play-button:hover {
  background-color: #ff5722; /* Arancione più scuro al passaggio del mouse */
}





/* Box contatti*/

/* Stile base (PC e Tablet) */
.box-home {
  background: #ffffff;
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  width: 400px; /* Larghezza fissa per schermi grandi */
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
}

/* --- OTTIMIZZAZIONE PER TELEFONO --- */
@media (max-width: 480px) {
  .box-home {
    width: 85%;       /* Il box occupa quasi tutta la larghezza */
    padding: 25px;    /* Riduciamo lo spazio interno per guadagnare posto */
    border-radius: 18px; /* Arrotondamento leggermente più piccolo */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Ombra più leggera */
  }
  
  
}
.ooo{ font-size: clamp(20px, 3vw, 25px); line-height: 1.6;
    text-align: justify;
}
/* =====================
   BANNER COOKIE
===================== */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(109.5deg, rgb(24, 87, 86) 10.5%, rgba(39,220,96,1) 68.5%);
    color: white;
    padding: 15px 20px;
    z-index: 99999;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.3);
    box-sizing: border-box;
}
#cookie-banner p { margin: 0 0 10px 0; font-size: 14px; line-height: 1.5; color: white; text-align: left; }
#cookie-banner a { color: #b1f3cf; text-decoration: underline; }
.cookie-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
#btn-accetta { background-color: white; color: #1b5e20; border: none; padding: 10px 22px; border-radius: 6px; font-weight: bold; font-size: 14px; cursor: pointer; transition: background 0.3s; }
#btn-accetta:hover { background-color: #b1f3cf; }
#btn-rifiuta { background-color: transparent; color: white; border: 2px solid white; padding: 10px 22px; border-radius: 6px; font-weight: bold; font-size: 14px; cursor: pointer; transition: background 0.3s; }
#btn-rifiuta:hover { background-color: rgba(255,255,255,0.15); }
@media (max-width: 768px) {
    #cookie-banner p { font-size: 13px; }
    .cookie-buttons { flex-direction: column; }
    #btn-accetta, #btn-rifiuta { width: 100%; text-align: center; }
}

/* === GALLERIA A GRIGLIA PER LE PAGINE ANNO === */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 20px;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.gallery .immagine5 {
  width: 100%;
  height: 360px;
  object-fit: cover;
  margin: 0;
}
@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .gallery .immagine5 {
    height: 260px;
  }
}



@media (max-width: 600px) {
    .modificatore-immagini {
        flex-direction: column;
        align-items: center;
    }
    .immagine2027 {
        flex: none;
        width: 100%;
        max-width: 320px;
    }
}