/* Sovrascrittura blockquote UIkit */
blockquote {
	
    font-size: inherit;        /* Annulla il font-size di UIkit */
    padding-left: 1.5rem;      /* Spazio tra bordo e testo */

	border-left: 1px solid black; 
    box-shadow: 
        inset 2px 0 0 0 green, 
        inset 2px 0 0 0 purple, 
        inset 3px 0 0 0 lime;           

	
}


















/* TOGLIE il bottone overflow schermo a destra, il background l'home evidenziato, la freccia fantasma e uno spazio extra eccessivo fra gli elementi della breadcrumb */

.custom-breadcrumb-arrow-chevrons li:first-child,
.custom-breadcrumb-arrow-chevrons li:first-child a {
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
}

.custom-breadcrumb-arrow-chevrons li:first-child::before,
.custom-breadcrumb-arrow-chevrons li:first-child::after {
    display: none !important;
}
































/* STILE BREADCRUMB */



.custom-breadcrumb-arrow-chevrons {
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 1rem 0;
    font-weight: 600; /* Bold su tutto */
}

/* Nasconde completamente lo slash predefinito di UIkit */
.custom-breadcrumb-arrow-chevrons > li + li:before {
    content: "" !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Stile dei box (tranne il separatore icona) */
.custom-breadcrumb-arrow-chevrons > li:not(.chevron-separator) {
    background: #f0f0f0;
    padding: 0.6rem 1.3rem;
    position: relative;
    color: #333;
    border-radius: 4px 0 0 4px; /* Angoli arrotondati solo a sinistra */
}

/* Punta della freccia (solo sugli elementi non ultimi) */
.custom-breadcrumb-arrow-chevrons > li:not(.chevron-separator):not(:last-of-type):after {
    content: "";
    position: absolute;
    right: -0.7rem;
    top: 50%;
    transform: translateY(-50%);
    border-top: 1.1rem solid transparent;
    border-bottom: 1.1rem solid transparent;
    border-left: 0.7rem solid #f0f0f0;
    z-index: 2;
}

/* Hover sui link */
.custom-breadcrumb-arrow-chevrons a {
    color: #333;
    text-decoration: none;
}
.custom-breadcrumb-arrow-chevrons a:hover {
    color: #007bff;
}

/* Separatore icona: SPAZIO MOLTO RIDOTTO */
.custom-breadcrumb-arrow-chevrons .chevron-separator {
    margin: 0 0.1rem;      /* <<< QUI: spazio ridotto al minimo (da 0.4rem a 0.1rem) */
    color: #aaa;
    z-index: 3;
    padding: 0;            /* Nessun padding extra */
}

/* Pagina corrente: sfondo colorato e testo bianco */
.custom-breadcrumb-arrow-chevrons > li:not(.chevron-separator):last-of-type {
    background: #007bff;   /* Cambia questo colore se vuoi il tuo brand */
    color: #fff !important;
    border-radius: 4px;    /* Arrotondato completamente essendo l'ultimo */
}

.custom-breadcrumb-arrow-chevrons > li:not(.chevron-separator):last-of-type:after {
    border-left-color: #007bff;
}

.custom-breadcrumb-arrow-chevrons > li:not(.chevron-separator):last-of-type span,
.custom-breadcrumb-arrow-chevrons > li:not(.chevron-separator):last-of-type a {
    color: #fff !important;
}


.bastatiprego > li:not(.chevron-separator) {


}

.bastatiprego {
    display: inline-block !important;
    
    /* Reset completo UIkit breadcrumb */
    &::before,
    &::after {
        display: none !important;
        content: "" !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
    }
    
    /* Target tutti i li figli */
    & > li {
        position: relative !important;
        display: inline-block !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        
        &::before,
        &::after {
            display: none !important;
            content: none !important;
            width: 0 !important;
            height: 0 !important;
            border: none !important;
            font-size: 0 !important;
        }
        
        /* Contro UIkit nth-child divider */
        &:nth-child(n+2)::before {
            display: none !important;
        }
    }
}









/* STILI INTERNI A CK EDITOR */

/* Esempio 1: Testo evidenziato giallo */
.text-highlight {
    background-color: #fef3c7;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Esempio 2: Citazione pullquote */
.pullquote {
    font-size: 1.4em;
    font-style: italic;
    color: #1e87f0;
    border-left: 5px solid #1e87f0;
    padding-left: 20px;
    margin: 20px 0;
}

/* Esempio 3: Box importante */
.box-warning {
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 16px;
    border-radius: 8px;
    margin: 20px 0;
}


.box-blue {
    background-color: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e40af;
    padding: 16px;
    border-radius: 8px;
    margin: 20px 0;
}

.box-verde {
    background-color: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    padding: 16px;
    border-radius: 8px;
    margin: 20px 0;
}

.box-viola {
    background-color: #ede9fe;
    border: 1px solid #c4b5fd;
    color: #5b21b6;
    padding: 16px;
    border-radius: 8px;
    margin: 20px 0;
}











/* NOTE A PIE DI PAGINA CSS - VERSIONE COMPLETA CON BACKGROUND UNICO */
/* NOTE A PIE DI PAGINA CSS - BACKGROUND UNIFORME PER OGNI NOTA */
/* NOTE A PIE DI PAGINA CSS - VERSIONE DEFINITIVA */
/* NOTE A PIE DI PAGINA CSS - VERSIONE COMPLETA CON BACKGROUND UNICO */
/* NOTE A PIE DI PAGINA CSS - BACKGROUND UNIFORME PER OGNI NOTA */
/* NOTE A PIE DI PAGINA CSS - VERSIONE DEFINITIVA */
/* === NOTE A PIE DI PAGINA - VERSIONE DEFINITIVA === */
/* === NOTE A PIE DI PAGINA - VERSIONE CON CLASSE bgnote === */

/* 1. NUMERINO SUPERSCRIPT (nel testo) */
/* 1. NUMERINO SUPERSCRIPT (nel testo) - STILE UNICO SUL LINK */
a[href^="#sdfootnote"][name$="anc"] {
    font-size: 0.65em !important;        /* dimensione del numero */
    vertical-align: super !important;    /* posizione rialzata */
    line-height: 1.8em !important;       /* stessa altezza dell'oblò */
    margin-left: 6px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    display: inline-block !important;
    min-width: 1.8em !important;
    height: 1.8em !important;
    padding: 0 !important;
    text-align: center !important;
    background-color: #1e87f0 !important;
    color: #fff !important;
    border-radius: 50px !important;
    box-shadow: var(--uk-badge-box-shadow, none) !important;
    transition: all 0.2s ease !important;
}

a[href^="#sdfootnote"][name$="anc"]:hover {
    background-color: #0f6cbd !important;
    transform: translateY(-1px) !important;
}

/* Il sup dentro il link eredita tutto e non fa nulla di proprio */
a[href^="#sdfootnote"][name$="anc"] sup {
    all: inherit;                    /* eredita tutto dal link */
    display: inline !important;      /* ma resta inline */
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    vertical-align: baseline !important; /* allineato alla base del link */
    font-size: inherit !important;
	font-style: normal !important;  /* ← FORZA IL TONDO, NON CORSIVO */
    background: none !important;      /* niente sfondo proprio */
    color: inherit !important;
    min-width: 0 !important;
    height: auto !important;
    width: auto !important;
    border-radius: 0 !important;
}


















/* 2. OBLÒ NOTA IN FONDO PAGINA */
a[href^="#sdfootnote"][name$="sym"] {
    display: inline-block;
    float: left;
    min-width: 1.75em;
    height: 1.75em;
    line-height: 1.75em;
    text-align: center;
    background-color: #f8f9fa;
    color: #1e87f0;
    border: 2.5px solid #1e87f0;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.1em;
    margin-right: 14px;
    margin-top: 0.2em;
    text-decoration: none;
    transition: all 0.3s ease;
    clear: left;
}

a[href^="#sdfootnote"][name$="sym"]:hover {
    background-color: #1e87f0;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(30, 135, 240, 0.3);
}

/* 3. BACKGROUND PER LE NOTE (REGOLA PRINCIPALE con .bgnote) */
/* Applica lo sfondo SOLO quando il contenitore ha la classe .bgnote */
.bgnote p:has(a[name^="sdfootnote"][name$="sym"]) {
    margin: 1.2rem 0 1rem 0 !important;
    padding: 1rem 1.5rem 1.5rem 1.5rem !important;
    background: linear-gradient(135deg, rgba(255, 152, 184, 0.250) 0%, rgba(129, 236, 152, 0.250) 100%) !important;
    border-radius: 16px !important;
    overflow: auto !important;
    clear: both !important;
}

/* 4. FALLBACK PER BROWSER SENZA :has() */
.bgnote p:last-child,
.bgnote p:nth-last-child(2),
.bgnote p:nth-last-child(3) {
    margin: 1.2rem 0 1rem 0 !important;
    padding: 1rem 1.5rem 1.5rem 1.5rem !important;
    background: linear-gradient(135deg, rgba(255, 152, 184, 0.250) 0%, rgba(129, 236, 152, 0.250) 100%) !important;
    border-radius: 16px !important;
    overflow: auto !important;
    clear: both !important;
}

/* 5. CORREZIONE: rimuovi background se non ci sono note */
.bgnote p:not(:has(a[name^="sdfootnote"][name$="sym"])) {
    background: none !important;
    padding: 0 !important;
    margin: 0.5em 0 !important;
    border-radius: 0 !important;
}

/* Anche per il fallback */
.bgnote p:last-child:not(:has(a[name^="sdfootnote"])),
.bgnote p:nth-last-child(2):not(:has(a[name^="sdfootnote"])),
.bgnote p:nth-last-child(3):not(:has(a[name^="sdfootnote"])) {
    background: none !important;
    padding: 0 !important;
    margin: 0.5em 0 !important;
    border-radius: 0 !important;
}

/* 6. MIGLIORAMENTO PER BROWSER MODERNI */
@supports (display: flow-root) {
    .bgnote p:has(a[name^="sdfootnote"][name$="sym"]) {
        display: flow-root;
        overflow: visible !important;
    }
}

/* 7. COMPATIBILITÀ CON LE CLASSI ESISTENTI */
/* Se vuoi mantenere compatibilità con h2verdi.h3verdi, aggiungi: */
.h2verdi.h3verdi.bgnote p:has(a[name^="sdfootnote"][name$="sym"]),
.bgnote p:has(a[name^="sdfootnote"][name$="sym"]) {
    /* Stili identici, il selettore più specifico vince */
    margin: 1.2rem 0 1rem 0 !important;
    padding: 1rem 1.5rem 1.5rem 1.5rem !important;
    background: linear-gradient(135deg, rgba(255, 152, 184, 0.250) 0%, rgba(129, 236, 152, 0.250) 100%) !important;
    border-radius: 16px !important;
    overflow: auto !important;
    clear: both !important;
}

/* 8. VERSIONE ULTRASEMPLICE (backup) */
/* Se qualcosa non funziona, usa questa regola nucleare */
.bgnote-footnote-paragraph {
    margin: 1.2rem 0 1rem 0 !important;
    padding: 1rem 1.5rem 1.5rem 1.5rem !important;
    background: linear-gradient(135deg, rgba(255, 152, 184, 0.250) 0%, rgba(129, 236, 152, 0.250) 100%) !important;
    border-radius: 16px !important;
    overflow: auto !important;
    clear: both !important;
}



















/* TOC – VERSIONE DEFINITIVA 2025 */
/* TOC 2025 – versione perfetta, pulita e senza competizione */
.toc-nav { background: inherit; }

.toc-title {
	
    font-size: 1.5em;
    letter-spacing: 5px;
    opacity: 0.3;
	
}

/* Parte 1 – Numeri arabi a sinistra (allineati al margine), interlinea UIkit standard */
.toc-list {
    list-style: decimal;
    padding: 1.5rem 3rem 1rem;
    margin: 0;
    /* Rimossa line-height forzata → usa quella standard UIkit (~1.6) */
}

.toc-list li {
    margin: 0;
    padding-left: 1.5rem;          /* Spazio tra numero e testo */
    text-align: left;              /* Testo allineato a sinistra su PC */
    /* Rimossa line-height forzata */
}

.toc-list a {
    color: green;
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;                /* Permette hover su tutta la riga */
    margin-left: 0;                /* Non più margin-left forzato */
}

.toc-list a:hover {
    color: #ba55d3;
    font-size: 1.10em;
    font-weight: 700;
}

/* Stile dei numeri – non grassetto, grigio opaco */
.toc-list li::marker {
    color: #666;
    font-weight: normal;           /* ← Non più bold */
    font-size: 1em;                /* Dimensione normale */
    opacity: 0.7;
}

/* Parte 2 – Le 4 voci finali (invariata, interlinea UIkit standard) */
.toc-actions {
    list-style: none;
    padding: 0 3rem 3rem;
    margin: 2.5rem 0 0 0;
}

.toc-actions li {
    margin: 0.8rem 0;
    text-align: center;
}

.toc-actions a {

    font-weight: 700;
    font-size: 1.15em;
    letter-spacing: 1px;
	opacity: 0.3;
    text-decoration: none;
    transition: all 0.3s ease;
}

.toc-actions a:hover {

	
	opacity: 1;
	font-size:1.3em;
	letter-spacing: 3px;
    text-decoration: none;
    transition: all 0.3s ease;
	
	
	
}
	
	
	
	
.h2-toc {
	
	opacity: 0.3;
	font-size:1.5em;
	letter-spacing: 5px;
	
}
	
	
	
.mds-nm {

	margin: 1.5rem 0 0 0;
	padding: 3rem;

	display: inline-block; /* Testo resta opaco su sfondo 50% trasparente */

	background: linear-gradient(135deg, rgba(255, 152, 184, 0.250) 0%,   /* rosa 50% */ rgba(129, 236, 152, 0.250) 100% /* verde 50% */);
	border-radius: 20px;
			
}	
	




  /* CSS ICONA LINK ALLA TOC IN BASSO A DESTRA */

.uk-button.uk-position-fixed {
  opacity: 0.5;
  transition: opacity 0.3s;
}
.uk-button.uk-position-fixed:hover {
  opacity: 1;
}








































/* ───── BOTTONI CUSTOM COLORATI & HOVER FIGHI ───── */

/* Verde permacultura */
.uk-button-verde {
    background: #27ae60;
    color: white;
}
.uk-button-verde:hover {
    background: #219653;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(39,174,96,0.35);
}

/* Arancione caldo */
.uk-button-arancione {
    background: #e67e22;
    color: white;
}
.uk-button-arancione:hover {
    background: #d35400;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(230,126,34,0.4);
}

/* Blu oceano */
.uk-button-blu {
    background: #2980b9;
    color: white;
}
.uk-button-blu:hover {
    background: #2573a6;
    box-shadow: 0 10px 30px rgba(41,128,185,0.4);
}

/* Rosa/fucsia */
.uk-button-rosa {
    background: #e91e63;
    color: white;
}
.uk-button-rosa:hover {
    background: #db1a5a;
    transform: translateY(-2px) scale(1.03);
    transition: all 0.25s ease;
}

/* Gradiente moderno (il più bello del 2025) */
.uk-button-gradient-VIOLA {
    background: linear-gradient(135deg, #1e90ff 0%, #764ba2 100%);
    border: none;
	
    color: white !important; 	/* forza bianco sempre */
    font-weight: 300;                            /* bold di partenza */
    letter-spacing: 0.5px;
    transition: all 0.35s ease;                  /* transizione fluida */	
	
	
	
	
}
.uk-button-gradient-VIOLA:hover {
    background: linear-gradient(135deg, #1e90ff 0%, #ba55d3 100%);
	color: white !important;   	/* bianco anche in hover */
    font-weight: 600;                            /* bold più forte in hover */
    letter-spacing: 1.8px;                       /* spazio lettere più largo */
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(102,126,234,0.4);
	
	
	
	
	
	
}


/* Gradiente moderno (il più bello del 2025) */
.uk-button-gradient-VERDE {
    background: linear-gradient(135deg, #50C878 0%, #daa520 100%);
    border: none;
	
    color: white !important; 	/* forza bianco sempre */
    font-weight: 300;                            /* bold di partenza */
    letter-spacing: 0.5px;
    transition: all 0.35s ease;                  /* transizione fluida */		

	
	
}
.uk-button-gradient-VERDE:hover {
    background: linear-gradient(135deg, #50C878 0%, #ffd700 100%);	
	color: white !important;   	/* bianco anche in hover */
    font-weight: 600;                            /* bold più forte in hover */
    letter-spacing: 1.8px;                       /* spazio lettere più largo */
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(102,126,234,0.4);
		
	
	
	
	
	
	
	
}

























/* Effetto “riempimento” al passaggio del mouse (super trendy) */
.uk-button-fill {
    position: relative;
    background: transparent;
    color: #000;
    border: 2px solid #000;
    overflow: hidden;
    z-index: 1;
}
.uk-button-fill::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: #000;
    transition: all 0.4s;
    z-index: -1;
}
.uk-button-fill:hover::before {
    left: 0;
}
.uk-button-fill:hover {
    color: white;
}



/* Effetto “svuotamento” al hover – da nero pieno (testo bianco) a trasparente (testo nero) */
/* NON richiede <span> nell'HTML */
.uk-button-fill2 {
    position: relative;
    background: transparent;         /* Sfondo finale: trasparente */
    color: #000;                     /* Colore testo finale: nero */
    border: 2px solid #000;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease;
}

.uk-button-fill2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;                /* Overlay nero che inizialmente copre tutto */
    transition: all 0.4s ease;
    z-index: -1;
    transform: translateX(0);        /* Inizia in posizione normale */
}

/* Stato iniziale forzato: testo bianco (perché c'è l'overlay nero sopra) */
.uk-button-fill2 {
    color: #fff !important;
}

/* Al passaggio del mouse: overlay nero esce a sinistra */
.uk-button-fill2:hover::before {
    transform: translateX(-100%);
}

/* Al passaggio del mouse: testo diventa nero (visibile sul fondo trasparente) */
.uk-button-fill2:hover {
    color: #000 !important;
}












/* COPERTINE H */

.copertineH {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 50%;           /* ← 50% su mobile e tablet */
    max-width: 100%;
}

@media (min-width: 1024px) {
    .copertineH {
        width: 33%;       /* ← 33% su desktop e schermi grandi */
    }
}

























/* Colpisce SOLO gli H2 dentro il testo principale


 #eaeaea impercettibile #cbd5e1 interessante neutrale, #e2e8f0 #e5e7eb mah, #86efac30 verdina, #d4c4a8 calda
 
 #50C878 verde smeraldo, #ba55d3 medium orchid


 */

/* SOLO GLI H2 dentro .h2verdi – rispetta il text-align di CKEditor */


.h2verdi h2,
.h2verdi h2[style] {
  font-size: 1.10em !important;           /* ridimensiona */
  font-weight: 700 !important;            /* grassetto */
  line-height: 1.4 !important;
  margin: 2.2em 0 0.9em 0 !important;
  padding-bottom: 0.4em !important;
  border-bottom: 1px solid #cbd5e1 !important; 

}

.h2verdi h2 * {
  color: #ba55d3 !important;
}


/* ← AGGIUNGI QUESTO BLOCCO QUI SOTTO → */
.h2verdi h2,
.h2verdi h2 * {
  cursor: default !important;
  text-decoration: none !important;
  transition: none !important;
  pointer-events: none !important;     /* l’utente non può più cliccarci */
}


/* Opzionale: se vuoi essere ancora più chiaro */
.h2verdi h2:hover,
.h2verdi h2 * {
  pointer-events: none !important;      /* disabilita completamente il click */
}






















/* H3 */




.h3verdi h3,
.h3verdi h3[style] {
  font-size: 0.90em !important;           /* ridimensiona */
  font-weight: 700 !important;            /* grassetto */
  line-height: 1.4 !important;
  margin: 2.2em 0 0.9em 0 !important;
  padding-bottom: 0.4em !important;
  border-bottom: 1px solid #cbd5e1 !important; 

}

.h3verdi h3 * {
  color: #50C878 !important;
}


/* ← AGGIUNGI QUESTO BLOCCO QUI SOTTO → */
.h3verdi h3,
.h3verdi h3 * {
  cursor: default !important;
  text-decoration: none !important;
  transition: none !important;
  pointer-events: none !important;     /* l’utente non può più cliccarci */
}


/* Opzionale: se vuoi essere ancora più chiaro */
.h3verdi h3:hover,
.h3verdi h3 * {
  pointer-events: none !important;      /* disabilita completamente il click */
}








































/* Linea nera per uk-heading-line */

.uk-heading-line-dark span::before,
.uk-heading-line-dark span::after {
    border-top: 2px solid #1a1a1a;
}







/* TEXTURE 00 per body */

.alloro {
		
	background: url('/site/templates/styles/images/texture00.png') repeat; 
	background-size: 300px 300px; 
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	
}


.meta-description-summary {

	margin: 1.5rem 0 2rem 0;
	padding: 1rem;

	display: inline-block; /* Testo resta opaco su sfondo 50% trasparente */

	background: linear-gradient(135deg, rgba(255, 152, 184, 0.250) 0%,   /* rosa 50% */ rgba(129, 236, 152, 0.250) 100% /* verde 50% */);
	border-radius: 20px;
			
}







/* SFUMATURA ORIZZONTALE: AZZURRO → NERO → VIOLA → VERDE */



body.admin-bar .hero-banner {
    margin-top: 50px; /* altezza admin bar */
}


.hero-banner {
    width: 100%;
    margin: 0;
    padding: 40px 0 0 0;
    text-align: center;
    overflow: visible;           /* ← IMPORTANTE */
    background: linear-gradient(
        to right,
        #1e90ff 0%,
        #000000 33%,
        #4b0082 66%,
        #228b22 100%
    );
    background-size: 300% 100%;
    animation: gradientShift 12s ease infinite;
    position: relative;
    z-index: 1;                  /* ← BASSO */
	overflow: hidden; /* meglio di visible */
    line-height: 0; /* ELIMINA SPAZIO TESTO */
	
	
	
}



.hero-banner2 {
    width: 100%;
    margin: 0;
    padding: 24px 0px;
	line-height: 1.3;                 /* o 1.4 se vuoi più spazio */
    text-align: center;
	
    background: linear-gradient(
        to right,
        #1e90ff 0%,
        #000000 33%,
        #4b0082 66%,
        #228b22 100%
    );
    background-size: 300% 100%;
    animation: gradientShift 12s ease infinite;
    position: relative;
    z-index: 1;                  /* ← BASSO */

    /* Centratura verticale perfetta */
    display: flex;
    align-items: center;                 /* centra verticalmente */
    justify-content: center;             /* centra orizzontalmente (ridondante con text-align, ma sicuro) */
    
    /* Ripristina valori normali per il testo */



}




















/* Wrapper per controllo totale */
.hero-image-wrapper {
    display: block;
    width: 100%;
    padding: 40px 0; /* Spazio interno, controllato */
    margin: 0 auto;
    line-height: 0;
}



/* Immagine trasparente sopra la sfumatura */
.hero-image {
    width: 90%;
    max-width: 1200px;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 0;
    animation: fadeInUp 1.6s ease-out forwards;
	vertical-align: middle;
    backdrop-filter: blur(1px); /* Effetto vetro smerigliato leggero */
}

/* Animazione sfumatura fluida */
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Fade-in + entrata dall'alto */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Admin bar e menu SOPRA il banner */
#pw-edit-bar,
.uk-navbar-toggle,
.uk-navbar-container {
    z-index: 9999 !important;   /* ← SOPRA TUTTO */
    position: relative;
}


/* SFONDO GRADIENTE*/
/* === SFONDO SITO: TEXTURE + GRADIENTE + LEGGIBILITÀ === */
/* === SFONDO SITO: TEXTURE VISIBILE + GRADIENTE TENUE (NO ANIMAZIONI) === */
html, body, body#html-body {
    background: 
        /* 1. TEXTURE SOTTO */
        url('/site/templates/styles/images/texture00.png') repeat,
        
        /* 2. GRADIENTE SOPRA (TRASPARENTE) */
        linear-gradient(to bottom,
            rgba(255, 240, 251, 0.92) 0%,
            rgba(245, 232, 255, 0.88) 30%,
            rgba(232, 244, 255, 0.85) 60%,
            rgba(178, 223, 219, 0.82) 100%
        ),
        
        /* 3. PUNTINI (OPZIONALI, TENUI) */
        radial-gradient(circle, rgba(255,255,255,0.12) 10%, transparent 11%);
    
    background-size: 
        300px 300px,   /* texture */
        100% 100%,     /* gradiente */
        20px 20px;     /* puntini */
    
    background-blend-mode: 
        overlay,       /* texture + gradiente */
        normal,        /* gradiente + puntini */
        normal;
    
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
}






/* ELEMENTI MENU MODALE*/

/* === RAINBOW CARD: ANIMAZIONI HOVER + GLOW CROCE === */
#menu-pca .rainbow-card {
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    z-index: 1;
}

#menu-pca .rainbow-card:hover {
    transform: translateY(-12px) scale(1.06);
    z-index: 30;
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.5),
        0 12px 24px rgba(0, 0, 0, 0.4);
}

/* GLOW SOLO SULLA CROCE */
#menu-pca .rainbow-card:hover .cross-animate {
    transform: rotate(90deg) scale(1.3);
    filter: 
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
        drop-shadow(0 0 16px rgba(255, 255, 255, 0.6))
        drop-shadow(0 0 24px rgba(255, 255, 255, 0.4));
    animation: cross-glow 1.5s ease-in-out infinite alternate;
}

@keyframes cross-glow {
    from {
        filter: 
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
            drop-shadow(0 0 16px rgba(255, 255, 255, 0.6))
            drop-shadow(0 0 24px rgba(255, 255, 255, 0.4));
    }
    to {
        filter: 
            drop-shadow(0 0 12px rgba(255, 255, 255, 1))
            drop-shadow(0 0 24px rgba(255, 255, 255, 0.8))
            drop-shadow(0 0 36px rgba(255, 255, 255, 0.6));
    }
}





/* === FIX: ANIMAZIONI CARD NEL MENU MODALE === */
#menu-pca .uk-modal-body {
    overflow: visible !important;
    padding: 2rem 0 !important;
}

#menu-pca .uk-grid {
    overflow: visible !important;
}

#menu-pca .rainbow-card {
    overflow: visible !important;
    z-index: 1;
}

#menu-pca .rainbow-card:hover {
    z-index: 50 !important; /* sopra tutto */
    overflow: visible !important;
}

/* FIX ANIMAZIONI MENU MODALE */
#menu-pca .uk-modal-body,
#menu-pca .uk-grid,
#menu-pca .rainbow-card {
    overflow: visible !important;
}
#menu-pca .rainbow-card:hover {
    z-index: 50 !important;
}


/* === FIX ANIMAZIONI MENU PCA (UIKIT PURO) === */
#menu-pca .uk-modal-body {
    overflow: visible !important;
    contain: none !important;
}

#menu-pca .menu-pca-grid,
#menu-pca .menu-pca-grid > * {
    overflow: visible !important;
}

#menu-pca .rainbow-card {
    overflow: visible !important;
    z-index: 1;
    position: relative;
}

#menu-pca .rainbow-card:hover {
    transform: translateY(-12px) scale(1.06) !important;
    z-index: 50 !important;
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.5),
        0 12px 24px rgba(0, 0, 0, 0.4) !important;
}

#menu-pca .rainbow-card:hover .cross-animate {
    transform: rotate(90deg) scale(1.3);
    filter: 
        drop-shadow(0 0 8px rgba(255,255,255,0.8))
        drop-shadow(0 0 16px rgba(255,255,255,0.6))
        drop-shadow(0 0 24px rgba(255,255,255,0.4));
    animation: cross-glow 1.5s ease-in-out infinite alternate;
}

@keyframes cross-glow {
    from {
        filter: 
            drop-shadow(0 0 8px rgba(255,255,255,0.8))
            drop-shadow(0 0 16px rgba(255,255,255,0.6))
            drop-shadow(0 0 24px rgba(255,255,255,0.4));
    }
    to {
        filter: 
            drop-shadow(0 0 12px rgba(255,255,255,1))
            drop-shadow(0 0 24px rgba(255,255,255,0.8))
            drop-shadow(0 0 36px rgba(255,255,255,0.6));
    }
}



/* === MENU PORG – FOGLIE DI LUCE (AUTENTICO) === */
/* === MENU PORG – BOSCO SACRO (DEDICATO) === */
.porg-body { overflow: hidden !important; }
.porg-grid > * { overflow: visible !important; }

/* FOGLIE CADENTI */
@keyframes leaf-fall {
    0% { 
        transform: translateY(-100px) rotate(0deg); 
        opacity: 0; 
    }
    15% { opacity: 0.8; }
    85% { opacity: 0.4; }
    100% { 
        transform: translateY(110vh) rotate(380deg); 
        opacity: 0; 
    }
}
.porg-leaf { 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* PULSANTE CHIUSURA */
.porg-close:hover {
    background: #43a047 !important;
    transform: scale(1.15);
    box-shadow: 0 0 30px rgba(67,160,71,0.8) !important;
}

/* CARD */
.porg-card {
    position: relative;
    border-radius: 22px;
    min-height: 165px;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
}
.porg-card-inner {
    background: rgba(46,125,50,0.6);
    border: 3px ridge #2e7d32;
    border-radius: 22px;
    padding: 1.2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(1px);
}

/* LUCE DAI BORDI (DELICATA) */
.porg-glow {
    position: absolute;
    inset: -10px;
    border: 2px solid transparent;
    border-radius: 24px;
    background: linear-gradient(45deg, transparent, #66bb6a40, transparent) padding-box,
                linear-gradient(45deg, #2e7d32, #81c784, #2e7d32) border-box;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    filter: blur(1px);
}
.porg-card:hover .porg-glow {
    opacity: 1;
    animation: porg-pulse 2.5s ease-in-out infinite;
}
@keyframes porg-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(102,187,106,0.3); }
    50% { box-shadow: 0 0 24px rgba(102,187,106,0.6); }
}

/* HOVER CARD */
.porg-card:hover {
    transform: translateY(-14px) scale(1.05);
    z-index: 100;
}
.porg-card:hover .porg-title {
    text-shadow: 0 0 16px #c8e6c9, 1px 1px 3px #000;
    color: #fff;
}

/* TESTI */
.porg-icon {
    font-size: 2.9rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.porg-title {
    margin: 0 0 0.4rem 0 !important;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    transition: text-shadow 0.4s;
}
.porg-subtitle {
    margin: 0 !important;
    font-size: 0.83rem;
    color: #e8f5e9;
    line-height: 1.35;
    text-align: center;
}





/* LINK MOUSE HOVER*/


.hoverlink1:hover {

    color: #000 !important;
    font-weight: 500;
    text-decoration: none !important;	
    letter-spacing: 0.5px;
    font-size: 0.95rem;	
	
	display: inline-block; /* Testo resta opaco su sfondo 50% trasparente */
    padding: 6px 14px;
	margin: 0 4px;
	
    border-radius: 20px;
	background: linear-gradient(135deg, rgba(255, 152, 184) 0%,   /* rosa 50% */ rgba(129, 236, 152, 0.25) 100% /* verde 50% */);
	
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	
}



/* Forza il colore blu di default sui link dentro uk-article-meta, ma lascia libero l’hover */
/* 1. Colore blu a riposo – vince sul grigio di uk-article-meta */
.uk-article-meta .hoverlink1 {
    color: #1e87f0 !important;
}

/* 2. Hover – vince anche su regole esterne troppo forti */
.uk-article-meta .hoverlink1:hover {
    color: #000 !important;
    font-weight: 500 !important;
}


















/* CARD DELLA ROLLING PAGE */

/* SOLUZIONE DEFINITIVA - BATTE UIkit */

/* Questa regola BATTE lo stile inline */
/* STILE PER SPAN.CARD5 - HOVER FUNZIONANTE */
.ultimi-articoli .uk-card-body span.card5 {
    /* RESET MANUALE senza all:unset */
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    margin-top: 10px !important;
    
    /* Reset proprietà UIkit */
    background-color: #1e87f0 !important;
    background-image: linear-gradient(135deg, #1e87f0 0%, #0d6efd 100%) !important;
    color: white !important;
    border-radius: 8px !important;
    border: none !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
    
    /* Transizione */
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
}

.ultimi-articoli .uk-card-body span.card5:hover {
    background-color: #dc3545 !important;
    background-image: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    letter-spacing: 5px !important;
    font-weight: 700 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(220, 53, 69, 0.3) !important;
}



































	



/* GRAFICA ESTRATTI */



.rolling-cards a { color:inherit; text-decoration:none; display:block; }
.rolling-cards .card-scala { transition:all .35s ease; }
.rolling-cards a:hover .card-scala { 
  transform:translateY(-10px) scale(1.03); 
  box-shadow:0 25px 50px rgba(0,0,0,.18)!important; 
}
.rolling-cards .uk-transition-scale-up { transition:transform .35s ease; }
.rolling-cards a:hover .uk-transition-scale-up { transform:scale(1.08); }







    .estratti-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 2.4rem;
        margin-top: 3rem;
    }
    @media (max-width: 640px) {
        .estratti-grid { grid-template-columns: 1fr; gap: 2rem; }
    }
    .estratto-card {
        background:#fff; border-radius:18px; overflow:hidden;
        box-shadow:0 8px 25px rgba(0,0,0,.10);
        transition:all .38s cubic-bezier(.25,.8,.25,1);
        display:flex; flex-direction:column;
    }
    .estratto-card:hover {
        transform:translateY(-14px) scale(1.025);
        box-shadow:0 32px 60px rgba(0,0,0,.24); z-index:20;
    }
    .estratto-card figure { margin:0; padding:0; line-height:0; }
    .estratto-card figure img { display:block; border-radius:18px 18px 0 0; }
    .estratto-card > .uk-card-body {
        padding:1.4rem 1.9rem 1.9rem; flex-grow:1; display:flex; flex-direction:column;
    }
    .estratto-card .card-inner > p { flex-grow:1; margin:0 0 1.6rem; line-height:1.52; }
    main { padding-bottom:9rem !important; }































/* === FOOTER: TEXTURE + SFONDO NERO === */
.alloro-nero {
    background: 
        linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
        url('/site/templates/styles/images/texture00.png') repeat;
    background-blend-mode: overlay;
    background-size: 300px 300px; /* Dimensione texture */
    color: #fff !important;
    position: relative;
    z-index: 1;
}





/* Manipola colore testo e hover link */
.alloro-nero p,
.alloro-nero a,
.alloro-nero .uk-search-input,
.alloro-nero .uk-button-text {
    color: #e0e0e0 !important;
    
}



/* Input search chiaro */
.alloro-nero .uk-search-input {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

.alloro-nero .uk-search-input::placeholder {
    color: rgba(255,255,255,0.6) !important;
}





/* === stile metadescrizione sotto il titolo === */

.page-subtitle {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
    margin-bottom: 1.5rem !important;
}
@media (min-width: 960px) {
    .page-subtitle {
        font-size: 1.25rem;
    }
}



/* === LOHO IN HEADER CORE MENU' === */

.logo-circle {
  border-radiussssss: 50%;
  object-fit: cover;
  transition: transform 0.6s ease-in-out;
  display: block;
  margin: 0 auto;
  box-shadowwwwww: 0 4px 12px rgba(0,0,0,0.15);
}

.logo-link:hover .logo-circle {
  transform: rotate(360deg);
}













/* === BOTTONI HEADER MENU' CORE === */


/* Rimuove uppercase forzato di UIkit */
.btn-cerel,
.btn-pca,
.btn-porg,
.btn-bs,
.btn-voc,
.btn-scienz,
.btn-teologia,
.btn-sex,
.btn-atei,
.btn-pregh,
.btn-polis,
.btn-omosex,
.btn-libri {
  text-transform: none !important;
  letter-spacing: 0.8px;
  font-weight: 600;
  border: 3px ridge #1a1a1a !important;
  transition: all 0.4s ease;
}

.no-uppercase {
  text-transform: none !important;
}



/* C.E.R.E.L - Nero → Verde hover */
.btn-cerel {
  background: #2d2d2d !important;
  color: #fff !important;
  
  transition: all 0.3s ease;
}
.btn-cerel:hover {
  background: linear-gradient(135deg, #4caf50, #9c27b0)!important;
  color: #fff !important;
  transform: translateY(-2px);
  border: 4px solid white !important;
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
}






/* Rimuove uppercase forzato di UIkit */
.btn-c2 {
  text-transform: none !important;
  letter-spacing: 0.8px;
  font-weight: 600;
  border: 1px solid #fff !important;
 
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)) !important;
  color: #fff !important;
  border-radius: 10px !important;
  
   transition: all 0.4s ease;
}


.btn-c2:hover {
  background: linear-gradient(135deg, #4caf50, #9c27b0)!important;
  color: #fff !important;
  transform: translateY(-2px);
  border: 4px solid white !important;
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
}





























/* BOSCO SACRO */
.btn-bs {
  background: linear-gradient(135deg, #FF8C00, #000000, #4CAF50) !important;
  color: #fff !important;
  transition: all 0.3s ease;
}

.btn-bs:hover {
  background: #000 !important;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
  color: yellow !important;
}




/* BOTTONE IN FONDO AL FOOTER PCA*/

.btn-pca2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
    margin: 0;
    padding: 0 30px;
    background: linear-gradient(135deg, #4caf50, #9c27b0);
    background-size: 300% 300%;
    color: white;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    text-align: center;
    text-transform: none;
    letter-spacing: 1.5px;

    animation: gradientFlow 8s ease infinite;
    transition: background-position 0.8s;
}



.btn-pca2:hover {
    background: linear-gradient(135deg, #8e24aa, #2196f3 35%, #ffb300 65%, #ffffff);
    background-size: 300% 300%;
    animation-duration: 4s;             /* più veloce al passaggio del mouse */
}


/* Manipola colore testo e hover link */

.a-noblu {
    color: #000 !important; 
    text-decoration: none !important;   /* nessuna sottolineatura */
	transition: all 0.3s ease;
	
}

.a-noblu:hover,
.a-noblu:focus {
	color: #fff !important;        
    letter-spacing: 3px !important;       
    text-decoration: none !important;
}









/* Il piccolo "(it)" che salta al click (funziona anche su mobile) */
.bosco-btn .it {
    display: inline-block;
    font-size: 0.5em;
    margin-left: 12px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bosco-btn:active .it {
    transform: translateY(-28px) scale(2.4);
}

/* Animazione continua del gradient */
@keyframes gradientFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}











/* PERMACULTURA CATTOLICA - Gradiente viola-rosa → Verde hover */
.btn-pca {
  background: linear-gradient(135deg, #4caf50, #9c27b0) !important;
  color: #fff !important;
}
.btn-pca:hover {
  background: #4caf50 !important;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #00000070;
}











/* PERMACULTURA ORGANICA - Gradiente verde-giallo-verde scuro → Viola hover */
.btn-porg {
  background: linear-gradient(135deg, #4caf50 0%, #cddc39 50%, #2e7d32 100%) !important;
  color: #fff !important;
}
.btn-porg:hover {
  background: #000 !important;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
  color: yellow !important;

}


/* PREGH */
.btn-pregh {
  background: linear-gradient(135deg, #000000, #7B1FA2, #795548) !important;
  color: #fff !important;
  transition: all 0.3s ease;
}

.btn-pregh:hover {
  background: #000 !important;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
  color: yellow !important;
}



/* TEOLOGIA */
.btn-teologia {
  background: linear-gradient(135deg, #ffd700, #d32f2f, #8b4513) !important;
  color: #fff !important;
  transition: all 0.3s ease;
}

.btn-teologia:hover {
  background: #000 !important;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
  color: yellow !important;
}



/* VOCAZIONE */
.btn-voc {
  background: linear-gradient(135deg, #2196f3, #ffeb3b) !important;
  color: #fff !important;
  transition: all 0.3s ease;
}
.btn-voc:hover {
  background: #000 !important;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
  color: yellow !important;

}


/* SEX */
.btn-sex {
  background: linear-gradient(135deg, #9c27b0 0%, #e91e63 100%) !important;
  color: #fff !important;
  transition: all 0.3s ease;
}
.btn-sex:hover {
  background: #000 !important;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
  color: yellow !important;

}



/* OMOSEX */
.btn-omosex {
  background: linear-gradient(135deg, #8B4513, #D81B60) !important;
  color: #fff !important;
  transition: all 0.3s ease;
}
.btn-omosex:hover {
  background: #000 !important;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
  color: yellow !important;

}




/* SCIENZA */
.btn-scienz {
  background: linear-gradient(135deg, #00bcd4, #1976d2) !important;
  color: #fff !important;
  transition: all 0.3s ease;
}
.btn-scienz:hover {
  background: #000 !important;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
  color: yellow !important;

}




/* ATEI */
.btn-atei {
  background: linear-gradient(135deg, #ffffff, #212121) !important;
  color: #fff !important;
  transition: all 0.3s ease;
}
.btn-atei:hover {
  background: #000 !important;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
  color: yellow !important;
}




/* POLIS */
.btn-polis {
  background: linear-gradient(135deg, #d32f2f, #0288d1) !important;
  color: #fff !important;
  transition: all 0.3s ease;
}
.btn-polis:hover {
  background: #000 !important;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #00000070;
  letter-spacing: 3px;
  color: yellow !important;
}



/* BOTTONE LIBRI */
/* ---------- BOTTONE LIBRI ---------- */
.btn-libri {
  position: relative;
  background: linear-gradient(135deg, #d32f2f, #0288d1) !important;
  color: #fff !important;
  border: 4px ridge grey !important;
  border-radius: 15px;
  letter-spacing: 2px;
  text-transform: uppercase !important;
  font-weight: 700;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 0 #000, 0 12px 20px rgba(0,0,0,0.4);


  padding: 1rem 2rem !important;    /* più spazio interno */
  
  
  /* Animazione pulsante continua */
  animation: pulse 3s infinite ease-in-out;
}

/* Testo con rialzo al hover */
.btn-libri-text {
  display: block;
  transition: transform 0.35s ease;
}

/* Effetto INCASSATO al hover */
.btn-libri:hover {
	
	transform: translateY(6px);
	box-shadow: 0 2px 0 #000, 0 4px 10px rgba(0,0,0,0.3);
	border-radius: 3px;
	letter-spacing: 5px; 

}

/* Rialzo del testo al hover */
.btn-libri:hover .btn-libri-text {
  transform: translateY(-4px);
}

/* Cambio colore fluido al hover (nero → blu → bianco → azzurro) */
.btn-libri::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(45deg, #000000, #0d47a1, #ffffff, #40c4ff, #000000);
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.btn-libri:hover::before {
  opacity: 1;
  animation: colorFlow 6s linear infinite;
}

/* Animazione pulsante (sempre attiva) 
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

*/

/* Animazione sostitutiva più wow dice */
@keyframes pulse {
  0%, 100% { transform: scale(1)   translateY(0); }
  50%      { transform: scale(1.08) translateY(-4px); 
             box-shadow: 0 20px 30px rgba(0,0,0,0.5); }
}

/* Animazione cambio colore fluido */
@keyframes colorFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



/* === SOTTOLINEATURE === */

.underline1 {
	
  text-decoration: underline;
  text-decoration-color: #1976d2;
  
  
}


.underline-onda {
  position: relative;
  color: green;
  font-weight: 700;
}

.underline-onda::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0,5 Q25,0 50,5 T100,5' stroke='%231976d2' stroke-width='3' fill='none'/%3E%3C/svg%3E") repeat-x;
  background-size: 50px 6px;
  animation: onda 8s linear infinite;
}

@keyframes onda {
  0% { background-position: 0 0; }
  100% { background-position: 50px 0; }
}