/* --- VARIABILI DEL BRAND (Modifica questi colori!) --- */
:root {
    --brand-primary: #FF3366;    /* Un colore vivace (es. Rosa/Rosso acceso) */
    --brand-secondary: #4A00E0;  /* Un colore di contrasto (es. Viola profondo) */
    --bg-color: #F8F9FA;         /* Sfondo chiaro ma non bianco puro */
    --text-dark: #1A1A1D;        /* Testo scurissimo per alto contrasto */
    --text-light: #FFFFFF;
}

/* --- RESET & FONT --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-dark);
    overflow-x: hidden; /* Evita lo scroll orizzontale per gli elementi sovrapposti */
    scroll-behavior: smooth;
}

* {
    /* Impedisce alle parole lunghe di uscire dai bordi forzando l'andata a capo */
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box; /* Fondamentale per non avere elementi che sforano */
}

/* --- ANIMAZIONI --- */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- HERO SECTION CON VIDEO --- */
.hero-section {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 0 10%;
    overflow: hidden;
    background-color: var(--text-dark); /* Colore di sicurezza mentre carica il video */
}

/* Stile per il video in loop */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%); /* Centra il video perfettamente */
    object-fit: cover; /* Si adatta senza deformarsi */
    z-index: 0;
}

/* Overlay sfumato per rendere il testo leggibile */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Sfumatura che parte scurissima e diventa un po' più trasparente */
    background: linear-gradient(135deg, rgba(26,26,29,0.9) 0%, rgba(26,26,29,0.5) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Il testo deve stare sopra al video e all'overlay! */
    animation: fadeSlideUp 1s ease-out forwards;
}

.massive-title {
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -3px;
    margin-bottom: 20px;

    /* Le due righe magiche da aggiungere: */
    color: var(--text-light); /* Rende la parola ARIETE bianca */
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); /* Crea un'ombra scura per staccarla dal video */
}

.brand-text {
    color: #efc110;
    text-shadow: none; /* Spegne l'ombra per evitare l'effetto "sporco" */
}

/* Aggiorniamo il colore del sottotitolo per renderlo visibile sul video scuro */
.subtitle {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-light); /* Modificato in chiaro */
    max-width: 500px;
}

/* --- L'ELEMENTO GRAFICO SFUMATO IN BACKGROUND --- */
.decorative-shape {
    position: absolute;
    right: -25%; /* Spostata più verso l'esterno per accogliere la nuova dimensione */
    top: -10%;   /* Alzata leggermente per diffondere la luce dall'angolo in alto */
    width: 1000px;  /* Ingrandita nettamente (prima era 600px) */
    height: 1000px; /* Ingrandita nettamente (prima era 600px) */
    background: linear-gradient(45deg, var(--brand-primary), var(--brand-secondary));
    border-radius: 50%;

    opacity: 0.12;  /* Opacità leggermente ridotta (da 0.15) per renderla ancora più eterea */
    z-index: 1;     /* Rimane dietro al testo e sopra il video */

    /* Il segreto della delicatezza: portiamo il blur a 150px (prima era 50px) */
    filter: blur(150px);

    pointer-events: none; /* Sicurezza: impedisce alla bolla di intercettare i clic del mouse */
}

/* --- NUOVA SEZIONE EDIZIONI STORICHE --- */
.edizioni-section {
    padding: 100px 10%;
    position: relative;
    z-index: 5;
    background-color: var(--bg-color);
}

.section-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 70px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -2px;
}

.edizioni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    align-items: start;
}

/* --- STILE CARDS --- */
.card {
    background: var(--text-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

/* Animazione fluida all'hover */
.card:hover {
    transform: translateY(-15px) scale(1.02) rotate(-1deg) !important;
    box-shadow: 0 30px 60px rgba(255, 51, 102, 0.2);
    z-index: 10;
}

/* Effetto griglia sfalsata (ZIG-ZAG) attivo solo su schermi grandi */
@media (min-width: 800px) {
    .edizioni-grid { gap: 60px 40px; }
    .edizioni-grid .card:nth-child(odd) {
        transform: translateY(-50px);
    }
}

.card-img-placeholder {
    height: 400px;
    background-color: #333;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Sfumatura scura per dissolvere la foto verso il testo */
.card-img-placeholder::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

/* Il Badge per l'edizione attiva */
.card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--brand-primary);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(255, 51, 102, 0.4);
}

.card-info {
    padding: 35px 30px;
    text-align: center;
}

.card-info h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text-dark);
}

/* --- PULSANTI AGGIORNATI --- */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.btn-primary {
    background: var(--brand-primary);
    color: var(--text-light);
    box-shadow: 0 10px 20px rgba(255, 51, 102, 0.3);
}

.btn-primary:hover {
    background: var(--text-dark);
    transform: scale(1.05);
    box-shadow: 0 15px 25px rgba(26, 26, 29, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--text-dark);
    border: 2px solid var(--text-dark);
}

.btn-secondary:hover {
    background: var(--text-dark);
    color: var(--text-light);
}

/* --- FRECCIA DINAMICA "SCROLL DOWN" --- */

/* L'animazione "salto" elastico */
@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 0); /* Mantiene la centratura e sta ferma */
    }
    40% {
        transform: translate(-50%, -15px); /* Salta in alto */
    }
    60% {
        transform: translate(-50%, -7px); /* Salto più piccolo */
    }
}

.scroll-down-cta {
    position: absolute;
    bottom: 30px; /* Manteniamo la posizione */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-decoration: none;
    color: var(--text-light);
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.9); /* Ombra leggermente più profonda per compensare la dimensione */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Aggiunto transform alla transition per l'hover */

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Aumentato lo spazio tra testo e freccia per bilanciare le dimensioni */

    /* Manteniamo l'animazione base del salto */
    animation: bounceDown 2.5s infinite ease-in-out;
}

/* Un piccolo effetto "pulsante" all'hover per renderlo ancora più evidente */
.scroll-down-cta:hover {
    opacity: 1;
}

/* Stile per la scritta: resa più grande e spaziata (minimal "Bold") */
.scroll-text {
    font-size: 1.1rem; /* Aumentata (prima era 0.8rem) */
    text-transform: uppercase;
    letter-spacing: 4px; /* Aumentata la spaziatura (prima era 2px) per un look più premium */
    font-weight: 700; /* Leggermente più spesso */
}

/* Aggiustamento per la freccia: resa decisamente più grande */
.arrow {
    font-size: 4.5rem; /* Aumentata decisamente (prima era 3rem) */
    line-height: 0.3; /* Avvicinata ancora di più al testo per compattezza */
    font-weight: 400; /* Più sottile per bilanciare l'enorme dimensione */
}

/* --- STILE SPECIALE PER L'EDIZIONE SENZA LOGO (2026) --- */

/* Centra il testo all'interno dello spazio del placeholder */
.placeholder-text-mode {
    background-color: #111113; /* Sfondo scurissimo dedicato per far esplodere i colori del gradiente */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rimuove l'effetto sfumatura nera in basso solo per questa scheda, così il testo è pulito */
.placeholder-text-mode::after {
    display: none;
}

/* La scritta 2026 in stile Brand */
.massive-card-text {
    font-size: 5.5rem; /* Bella grossa e visibile */
    font-weight: 900;
    letter-spacing: -2px;

    /* Applica la sfumatura del brand */
    color: transparent;
    background-image: linear-gradient(45deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text;
    background-clip: text;

    /* Un pizzico di transizione se si passa sopra con il mouse */
    transition: transform 0.3s ease;
}

/* Un piccolo effetto di zoom sulla scritta quando si fa l'hover sulla card */
.card-2026:hover .massive-card-text {
    transform: scale(1.1);
}

/* --- SEZIONE REGOLAMENTO --- */
.regolamento-section {
    padding: 100px 10%;
    background-color: #FFFFFF; /* Sfondo bianco per staccare dallo storico */
    position: relative;
    z-index: 5;
}

.regolamento-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.regolamento-block {
    background: var(--bg-color); /* Sfondo grigio leggero per i blocchi */
    padding: 40px;
    border-radius: 24px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border-left: 4px solid transparent; /* Linea decorativa nascosta di base */
}

/* Effetto dinamico al passaggio del mouse */
.regolamento-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-left-color: var(--brand-primary); /* Fa apparire la linea colorata all'hover */
}

/* Numerazione gigante sfumata */
.regolamento-num {
    font-size: 2.8rem;
    font-weight: 900;
    display: block;
    margin-bottom: 15px;

    color: transparent;
    background-image: linear-gradient(45deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0.8;
}

.regolamento-block h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.regolamento-block p {
    font-size: 1rem;
    line-height: 1.6;
    color: #55555a; /* Colore del testo leggermente ammorbidito per la lettura leggibile */
}

/* --- BOTTONE PDF REGOLAMENTO --- */
.regolamento-actions {
    margin-top: 60px;
    text-align: center;
    width: 100%;
}

/* Facciamo in modo che il bottone del PDF sia un po' più massiccio */
.regolamento-actions .btn-primary {
    padding: 16px 40px;
    font-size: 1rem;
}

/* --- SEZIONE CATEGORIE --- */
.categorie-section {
    padding: 100px 10%;
    background-color: var(--text-dark); /* Sfondo scuro per staccare dal regolamento */
    position: relative;
    z-index: 5;
}

/* Forza il titolo della sezione a diventare bianco sul fondo scuro */
.categorie-section .section-title {
    color: var(--text-light);
    margin-bottom: 20px;
}

.section-subtitle {
    text-align: center;
    color: #A0A0A5;
    margin-bottom: 70px;
    font-size: 1.2rem;
}

.categorie-grid {
    display: grid;
    /* Adatta automaticamente il numero di colonne in base allo schermo */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Stile delle Card Effetto "Vetro Scuro" */
.categoria-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 40px 30px;
    border-radius: 24px;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.categoria-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--brand-primary);
}

.cat-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.categoria-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-light);
}

.categoria-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #B0B0B5; /* Un grigio chiaro perfetto per la lettura su sfondo scuro */
}

/* --- NAVBAR FISSA IN ALTO --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000; /* Valore altissimo per stare sempre sopra a TUTTO */

    /* Effetto Vetro Scuro e Sfocato */
    background: rgba(26, 26, 29, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    /* Animazione di entrata al caricamento della pagina */
    animation: fadeSlideDown 0.8s ease-out forwards;
}

/* Animazione per far scendere dolcemente il menu appena si apre il sito */
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

/* Stile per il Logo nel menu */
.nav-brand a {
    text-decoration: none;
    color: var(--text-light);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -1px;
}

.nav-brand span {
    /* Colore solido giallo/oro per la parola AWARDS */
    color: #efc110;
}

/* Contenitore dei link */
.nav-links {
    list-style: none;
    display: flex;
    gap: 40px; /* Spazio tra un link e l'altro */
}

/* Stile dei singoli link */
.nav-links li a {
    text-decoration: none;
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7; /* Leggermente trasparenti di base */
    transition: opacity 0.3s ease, color 0.3s ease;
}

/* Effetto al passaggio del mouse */
.nav-links li a:hover {
    opacity: 1;
    color: var(--brand-primary);
}

/* --- PAGINE STORICO EDIZIONI (es. 2021) --- */
.page-storico {
    background-color: var(--bg-color);
}

.storico-hero {
    padding: 150px 10% 50px;
    background-color: var(--text-dark);
    text-align: center;
}

/* Modifica la navbar per renderla visibile su sfondi chiari se necessario */
.solid-nav {
    background: rgba(26, 26, 29, 0.95);
}

/* --- SEZIONE CANDIDATURE --- */
.candidature-section {
    padding: 80px 10%;
    background-color: var(--bg-color);
}

.giurati-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.giurato-card {
    background: #FFFFFF;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.giurato-header {
    border-bottom: 2px solid #F0F0F0;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.giurato-header h3 {
    font-size: 1.4rem;
    color: var(--brand-secondary);
}

.nickname {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-primary);
    letter-spacing: 1px;
}

.film-list {
    list-style: none;
}

.film-list li {
    margin-bottom: 15px;
    font-size: 1.05rem;
    color: var(--text-dark);
}

.film-list li span {
    font-size: 0.85rem;
    color: #888;
}

/* --- SEZIONE VINCITORI --- */
.vincitori-section {
    padding: 80px 10%;
    background-color: var(--text-dark); /* Sfondo scuro per far risaltare l'oro */
    color: var(--text-light);
}

/* Banner Ariete D'Oro */
.ariete-doro-banner {
    background: linear-gradient(135deg, #FFD700, #FFA500); /* Effetto Oro */
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 50px;
    color: #1A1A1D;
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.3);
    transform: scale(1.02);
}

.ariete-doro-banner h4 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.winner-name {
    font-size: 3.5rem;
    font-weight: 900;
    text-transform: uppercase;
}

/* Griglia dei Premi */
.premi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.premio-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.premio-card .categoria {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.premio-card strong {
    font-size: 1.2rem;
    color: #FFF;
}

.premio-card span {
    color: #AAA;
    font-size: 0.9rem;
}

/* Evidenziazioni Speciali */
.highlight-premio {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.highlight-special {
    background: rgba(255, 51, 102, 0.1);
    border-color: var(--brand-primary);
}

/* --- LINK WIKIPEDIA (CANDIDATURE) --- */
.tema-bw .film-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #999;
    transition: all 0.3s ease;
}

.tema-bw .film-link:hover {
    color: #000000;
    border-bottom: 1px solid #000000;
}

/* --- TASTO WIKIPEDIA (VINCITORI) --- */
.tema-bw .btn-wiki {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 0px 5px;
    height: 18px;
    font-size: 0.65rem;
    font-weight: 900;
    font-family: monospace;
    text-decoration: none;
    color: #FFFFFF;
    background-color: transparent;
    border: 1px solid #555555;
    border-radius: 3px;
    vertical-align: middle;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.tema-bw .btn-wiki:hover {
    background-color: #FFFFFF;
    color: #000000;
    border-color: #FFFFFF;
}

/* =========================================
   TEMA SPECIALE: BIANCO E NERO (2021)
========================================= */

/* Sfondo bianco puro per la sezione candidature */
.tema-bw .candidature-section {
    background-color: #FFFFFF;
}

/* Titoli senza gradiente */
.tema-bw .brand-text,
.tema-bw .nav-brand span {
    background-image: none !important;
    color: #efc110 !important;
    -webkit-text-fill-color: #efc110 !important;
}

/* Colori Giurati (Scala di grigi e nero) */
.tema-bw .giurato-card {
    background: #F9F9F9;
    border: 1px solid #E0E0E0;
    box-shadow: none;
}

.tema-bw .giurato-header {
    border-bottom: 2px solid #DDDDDD;
}

.tema-bw .giurato-header h3 {
    color: #000000;
}

.tema-bw .nickname {
    color: #666666; /* Grigio scuro invece del rosa */
}

/* Sezione Vincitori (Nero profondo) */
.tema-bw .vincitori-section {
    background-color: #050505;
    color: #FFFFFF;
}

/* Banner Ariete d'oro: da Oro ad Argento Metallico / Platino */
.tema-bw .ariete-doro-banner {
    background: linear-gradient(135deg, #FFFFFF, #B0B0B0);
    color: #000000;
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.1);
}

.tema-bw .ariete-doro-banner h4 {
    color: #333333;
}

/* Schede Premi (Contrasto Scuro) */
.tema-bw .premio-card {
    background: #111111;
    border: 1px solid #333333;
}

.tema-bw .premio-card .categoria {
    color: #AAAAAA; /* Grigio medio chiaro al posto del rosa/viola */
}

.tema-bw .highlight-premio {
    background: #1A1A1A;
    border-color: #666666;
}

/* Premi speciali Merida/Nala: Bianco ad alto contrasto */
.tema-bw .highlight-special {
    background: #222222;
    border-color: #FFFFFF;
}

/* --- FOCUS NALA D'ORO (TEMA B/W) --- */
.tema-bw .nala-explanation-wrapper {
    background-color: #0A0A0A;
    border: 1px solid #333333;
    border-left: 4px solid #FFFFFF;
    border-radius: 8px;
    padding: 30px 40px;
    margin-bottom: 50px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.tema-bw .nala-content h3 {
    font-size: 1.4rem;
    color: #FFFFFF;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tema-bw .nala-content h3 span {
    color: #AAAAAA;
    font-weight: 400;
}

.tema-bw .nala-content p {
    color: #CCCCCC;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.tema-bw .nala-quote {
    background: #111111;
    padding: 20px 25px;
    border-radius: 6px;
    font-style: italic;
    color: #EEEEEE;
    font-size: 1.05rem;
    line-height: 1.7;
    position: relative;
}

.tema-bw .nala-quote::before {
    content: '"';
    font-size: 4rem;
    color: #333333;
    position: absolute;
    top: -10px;
    left: 10px;
    font-family: serif;
    opacity: 0.5;
}

.tema-bw .nala-quote cite {
    display: block;
    margin-top: 15px;
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 700;
    color: #888888;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- STILI SPECIFICI (NON B/W) PER I LINK WIKIPEDIA --- */
.film-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--brand-secondary);
    transition: all 0.3s ease;
}

.film-link:hover {
    color: var(--brand-primary);
    border-bottom: 1px solid var(--brand-primary);
}

.btn-wiki {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 0px 5px;
    height: 18px;
    font-size: 0.65rem;
    font-weight: 900;
    font-family: monospace;
    text-decoration: none;
    color: #FFFFFF;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    vertical-align: middle;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-wiki:hover {
    background-color: var(--brand-primary);
    color: #FFFFFF;
    border-color: var(--brand-primary);
}

/* --- BADGE SQUALIFICATO --- */
.badge-squalificato {
    display: inline-block;
    background-color: #E63946;
    color: white;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
    letter-spacing: 1px;
}

.card-squalificato {
    opacity: 0.7;
    border: 2px dashed #E63946 !important;
    background: #FFF5F5 !important;
}

/* --- SEZIONE VIDEO YOUTUBE (AGGIORNATA) --- */
.video-section {
    padding: 100px 10%;
    background-color: #FFFFFF;
}

.video-container {
    width: 100%;
    max-width: 960px; /* Larghezza massima ideale per PC */
    margin: 0 auto;
    aspect-ratio: 16 / 9; /* Il metodo moderno per non sballare mai le proporzioni */
    border-radius: 12px;
    overflow: hidden;
    display: flex; /* Aiuta a centrare l'iframe perfettamente */
    background-color: #000000;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Stile Retrò esclusivo per la cornice del video (2022) */
.tema-retro .video-container {
    border: 4px solid #864501;
    box-shadow: 12px 12px 0px #e4a44c; /* Ombra rigida vintage */
    border-radius: 16px;
    transform: translate(-6px, -6px); /* Piccolo offset per far risaltare l'ombra */
}

/* Adatta lo stile del Nala per il tema a colori */
.nala-explanation-wrapper {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--brand-primary);
    border-radius: 8px;
    padding: 30px 40px;
    margin-bottom: 50px;
}

.nala-content h3 {
    font-size: 1.4rem;
    color: #FFFFFF;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.nala-content h3 span { color: var(--brand-primary); }
.nala-content p { color: #CCCCCC; font-size: 0.95rem; margin-bottom: 20px; }
.nala-quote {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px 25px;
    border-radius: 6px;
    font-style: italic;
    color: #EEEEEE;
    line-height: 1.7;
}

/* =========================================
   TEMA SPECIALE: RETRÒ (2022)
========================================= */

/* Sfondo generale caldo (Pergamena chiara) */
.tema-retro.page-storico,
.tema-retro .candidature-section,
.tema-retro .video-section {
    background-color: #Fdfbf7;
}

/* Header e Navbar in marrone scuro */
.tema-retro .storico-hero {
    background-color: #864501;
    background-image: none;
    border-bottom: 4px solid #d17d16;
}

.tema-retro .solid-nav {
    background: rgba(134, 69, 1, 0.98); /* Marrone #864501 con leggera trasparenza */
    border-bottom: 1px solid #d17d16;
}

/* Colore oro solido */
.tema-retro .brand-text,
.tema-retro .nav-brand span {
    background-image: none;
    color: #efc110;
    -webkit-text-fill-color: #efc110;
}

/* Titoli delle sezioni scure (Candidature e Video) */
.tema-retro .section-title {
    color: #864501;
}

/* --- SEZIONE CANDIDATURE --- */
.tema-retro .giurato-card {
    background: #FFFFFF;
    border: 2px solid #e4a44c; /* Bordo oro senape */
    box-shadow: 4px 4px 0px #864501; /* Ombra netta stile retrò/fumetto */
    border-radius: 8px; /* Angoli meno smussati */
}

.tema-retro .giurato-header {
    border-bottom: 2px dashed #6c6c6c;
}

.tema-retro .giurato-header h3 {
    color: #864501;
}

.tema-retro .nickname {
    color: #d17d16;
}

.tema-retro .film-list li strong {
    color: #333333;
}

.tema-retro .film-list li span {
    color: #6c6c6c; /* Grigio fornito */
}

/* Link Wikipedia nelle candidature */
.tema-retro .film-link {
    border-bottom: 1px dotted #e4a44c;
}
.tema-retro .film-link:hover {
    color: #d17d16;
    border-bottom: 1px solid #d17d16;
}

/* --- SEZIONE VINCITORI (Sfondo Scuro) --- */
.tema-retro .vincitori-section {
    background-color: #2b1600; /* Variante extra-dark del marrone */
    border-top: 4px solid #e4a44c;
    border-bottom: 4px solid #e4a44c;
}

.tema-retro .vincitori-section .section-title {
    color: #e4a44c;
}

/* Banner Ariete d'Oro */
.tema-retro .ariete-doro-banner {
    background: linear-gradient(135deg, #e4a44c, #d17d16);
    border: 4px double #864501;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(134, 69, 1, 0.4);
}

.tema-retro .ariete-doro-banner h4 {
    color: #2b1600;
}

/* Schede Premi */
.tema-retro .premio-card {
    background: rgba(134, 69, 1, 0.2);
    border: 1px solid #864501;
}

.tema-retro .premio-card .categoria {
    color: #e4a44c;
}

.tema-retro .highlight-premio {
    background: rgba(209, 125, 22, 0.15); /* Arancio in trasparenza */
    border-color: #d17d16;
}

.tema-retro .highlight-special {
    background: rgba(228, 164, 76, 0.15); /* Oro in trasparenza */
    border-color: #e4a44c;
}

/* Box Spiegazione Nala */
.tema-retro .nala-explanation-wrapper {
    background-color: rgba(134, 69, 1, 0.1);
    border: 1px solid #864501;
    border-left: 4px solid #d17d16;
}

.tema-retro .nala-content h3 span {
    color: #e4a44c;
}

.tema-retro .nala-quote {
    background: rgba(0, 0, 0, 0.2);
    color: #e4a44c;
}

/* Tasti Wikipedia nei vincitori */
.tema-retro .btn-wiki {
    border-color: #6c6c6c;
    color: #6c6c6c;
}

.tema-retro .btn-wiki:hover {
    background-color: #e4a44c;
    color: #2b1600;
    border-color: #e4a44c;
}

/* =========================================
   TEMA SPECIALE: MIDNIGHT GLAMOUR (2023)
========================================= */

/* Sfondo Notturno profondo per l'intera pagina */
.tema-2023.page-storico,
.tema-2023 .candidature-section,
.tema-2023 .video-section {
    background-color: #0F172A;
}

/* Header in Blu Scuro e testo Champagne */
.tema-2023 .storico-hero {
    background-color: #0B1120;
    border-bottom: 2px solid #E1CCA0;
}

.tema-2023 .solid-nav {
    background: rgba(11, 17, 32, 0.95);
    border-bottom: 1px solid #E1CCA0;
}

.tema-2023 .brand-text,
.tema-2023 .nav-brand span {
    background-image: none;
    color: #efc110;
    -webkit-text-fill-color: #efc110;
}

/* Titoli delle sezioni */
.tema-2023 .section-title {
    color: #E1CCA0;
}

/* --- CANDIDATURE --- */
.tema-2023 .giurato-card {
    background: #1E293B;
    border: 1px solid #334155;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.tema-2023 .giurato-header h3 { color: #E1CCA0; }
.tema-2023 .nickname { color: #94A3B8; }
.tema-2023 .film-list li strong { color: #F8FAFC; }
.tema-2023 .film-list li span { color: #64748B; }

/* Stile per Eugergenio (Nuova Formazione) */
.tema-2023 .card-eugergenio {
    border: 2px solid #E1CCA0;
    background: #172033;
}
.tema-2023 .badge-new {
    display: inline-block;
    background-color: #E1CCA0;
    color: #0F172A;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Link Wikipedia */
.tema-2023 .film-link { border-bottom: 1px dotted #E1CCA0; color: #E1CCA0; }
.tema-2023 .film-link:hover { color: #FBBF24; border-bottom: 1px solid #FBBF24; }

/* --- VINCITORI E BOX LORE --- */
.tema-2023 .vincitori-section {
    background-color: #080D18;
}

.tema-2023 .ariete-doro-banner {
    background: linear-gradient(135deg, #E1CCA0, #B4965A);
    color: #0F172A;
    border: none;
    box-shadow: 0 15px 40px rgba(225, 204, 160, 0.2);
}

/* Griglia per affiancare Nala e Arturo */
.lore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.tema-2023 .nala-explanation-wrapper {
    background-color: #1E293B;
    border: 1px solid #334155;
    border-left: 4px solid #E1CCA0;
    margin-bottom: 0;
}

.tema-2023 .arturo-wrapper {
    border-left-color: #F43F5E; /* Rosso per l'Arturo */
}

.tema-2023 .nala-content h3 { color: #F8FAFC; }
.tema-2023 .nala-content p { color: #CBD5E1; }

/* Schede Premi */
.tema-2023 .premio-card {
    background: #1E293B;
    border: 1px solid #334155;
}

.tema-2023 .premio-card .categoria { color: #E1CCA0; }
.tema-2023 .highlight-premio { background: #233147; border-color: #E1CCA0; }
.tema-2023 .highlight-special { background: #2E2519; border-color: #FBBF24; }

/* Tasti Wikipedia */
.tema-2023 .btn-wiki {
    border-color: #64748B; color: #64748B;
}
.tema-2023 .btn-wiki:hover {
    background-color: #E1CCA0; color: #0F172A; border-color: #E1CCA0;
}

/* Stile Video */
.tema-2023 .video-container {
    border: 2px solid #334155;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

/* =========================================
   TEMA SPECIALE: VICE CITY / RETROWAVE (2024)
========================================= */

/* Sfondo Notte Viola/Blu */
.tema-vicecity.page-storico,
.tema-vicecity .candidature-section,
.tema-vicecity .video-section {
    background-color: #0d0628;
}

/* Header Navbar: Sfumature Neon */
.tema-vicecity .storico-hero {
    background: linear-gradient(180deg, #2b0244 0%, #0d0628 100%);
    border-bottom: 3px solid #ff00ff;
    box-shadow: 0 5px 15px rgba(255, 0, 255, 0.4);
}

.tema-vicecity .solid-nav {
    background: rgba(13, 6, 40, 0.95);
    border-bottom: 1px solid #00ffff;
}

/* Colore oro solido */
.tema-vicecity .brand-text,
.tema-vicecity .nav-brand span {
    background-image: none;
    color: #efc110;
    -webkit-text-fill-color: #efc110;
    text-shadow: none;
}

.tema-vicecity .section-title {
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

/* --- CANDIDATURE --- */
.tema-vicecity .giurato-card {
    background: #1a0a3a;
    border: 2px solid #ff00ff;
    box-shadow: inset 0 0 10px rgba(255,0,255,0.2), 0 0 10px rgba(255,0,255,0.4);
    border-radius: 10px;
}

.tema-vicecity .giurato-header h3 { color: #00ffff; }
.tema-vicecity .nickname { color: #ff8c00; }
.tema-vicecity .film-list li strong { color: #ffffff; }
.tema-vicecity .film-list li span { color: #aaaaaa; }

.tema-vicecity .film-link { border-bottom: 1px dotted #00ffff; color: #00ffff; }
.tema-vicecity .film-link:hover { color: #ff00ff; border-bottom: 1px solid #ff00ff; text-shadow: 0 0 5px #ff00ff; }

/* --- VINCITORI E BOX LORE --- */
.tema-vicecity .vincitori-section {
    background-color: #050114;
    border-top: 2px solid #00ffff;
    border-bottom: 2px solid #00ffff;
}

/* Banner Ariete d'Oro (Sunset gradient brillante) */
.tema-vicecity .ariete-doro-banner {
    background: linear-gradient(135deg, #ff00ff, #ff8c00, #ffff00);
    color: #050114;
    border: 2px solid #ffffff;
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.8);
    text-transform: uppercase;
}

.tema-vicecity .nala-explanation-wrapper {
    background-color: #1a0a3a;
    border: 1px solid #00ffff;
    border-left: 4px solid #ff00ff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.tema-vicecity .nala-content h3 { color: #00ffff; }
.tema-vicecity .nala-content p { color: #dddddd; }

/* Schede Premi */
.tema-vicecity .premio-card {
    background: #0d0628;
    border: 1px solid #ff00ff;
    box-shadow: 0 0 5px rgba(255, 0, 255, 0.3);
}

.tema-vicecity .premio-card .categoria { color: #00ffff; }
.tema-vicecity .highlight-premio { background: #1a0a3a; border-color: #00ffff; }
.tema-vicecity .highlight-special { background: #26052b; border-color: #ff8c00; }

.tema-vicecity .btn-wiki {
    border-color: #00ffff; color: #00ffff;
}
.tema-vicecity .btn-wiki:hover {
    background-color: #00ffff; color: #050114; border-color: #00ffff; box-shadow: 0 0 8px #00ffff;
}

/* Griglia per contenere i due video di YouTube affiancati */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.tema-vicecity .video-container {
    border: 2px solid #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    border-radius: 12px;
}

/* =========================================
   TEMA SPECIALE: OSCAR GOLD (2024)
========================================= */

/* Sfondo Grigio Antracite Elegante */
.tema-oscar.page-storico,
.tema-oscar .candidature-section,
.tema-oscar .video-section {
    background-color: #1a1a1a;
}

/* Header e Navbar in Grigio Scuro con dettagli Oro */
.tema-oscar .storico-hero {
    background: linear-gradient(180deg, #333333 0%, #1a1a1a 100%);
    border-bottom: 3px solid #daae04;
}

.tema-oscar .solid-nav {
    background: rgba(26, 26, 26, 0.95);
    border-bottom: 1px solid #daae04;
}

/* Colore oro solido */
.tema-oscar .brand-text,
.tema-oscar .nav-brand span {
    background-image: none;
    color: #efc110;
    -webkit-text-fill-color: #efc110;
    text-shadow: none;
}

.tema-oscar .section-title {
    color: #daae04;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- CANDIDATURE --- */
.tema-oscar .giurato-card {
    background: #262626;
    border: 1px solid #404040;
    border-top: 3px solid #daae04;
    border-radius: 8px;
}

.tema-oscar .giurato-header h3 { color: #daae04; }
.tema-oscar .nickname { color: #d1d1d1; }
.tema-oscar .film-list li strong { color: #ffffff; }
.tema-oscar .film-list li span { color: #888888; }

.tema-oscar .film-link { border-bottom: 1px dotted #daae04; color: #daae04; }
.tema-oscar .film-link:hover { color: #f5c518; border-bottom: 1px solid #f5c518; }

/* --- VINCITORI E BOX LORE --- */
.tema-oscar .vincitori-section {
    background-color: #121212;
    border-top: 2px solid #daae04;
}

/* Banner Ariete d'Oro (Oro Puro) */
.tema-oscar .ariete-doro-banner {
    background: linear-gradient(135deg, #daae04, #997d03);
    color: #121212;
    border: none;
    box-shadow: 0 0 20px rgba(218, 174, 4, 0.4);
    font-weight: 700;
}

.tema-oscar .nala-explanation-wrapper {
    background-color: #262626;
    border: 1px solid #daae04;
    border-left: 4px solid #daae04;
}

.tema-oscar .nala-content h3 { color: #daae04; }
.tema-oscar .nala-content p { color: #e0e0e0; }

/* Schede Premi */
.tema-oscar .premio-card {
    background: #262626;
    border: 1px solid #404040;
}

.tema-oscar .premio-card .categoria { color: #daae04; font-weight: 600; }
.tema-oscar .highlight-premio { background: #333333; border-color: #daae04; }
.tema-oscar .highlight-special { background: #3d3305; border-color: #daae04; }

.tema-oscar .btn-wiki {
    border-color: #daae04; color: #daae04;
}
.tema-oscar .btn-wiki:hover {
    background-color: #daae04; color: #121212; border-color: #daae04;
}

/* Stile Video (Cornice Dorata) */
.tema-oscar .video-container {
    border: 3px solid #daae04;
    box-shadow: 0 0 25px rgba(218, 174, 4, 0.3);
    border-radius: 8px;
}

/* =========================================
   TEMA SPECIALE: CYBER LIVE (2026)
========================================= */

/* Sfondo e Tema Scuro */
.tema-live26.page-storico,
.tema-live26 .candidature-section {
    background-color: #0a0e17;
}

.tema-live26 .storico-hero {
    background: linear-gradient(180deg, #101826 0%, #0a0e17 100%);
    border-bottom: 2px solid #00ff88;
}

.tema-live26 .solid-nav {
    background: rgba(10, 14, 23, 0.95);
    border-bottom: 1px solid #00ff88;
}

/* Colore oro solido */
.tema-live26 .brand-text,
.tema-live26 .nav-brand span {
    background-image: none;
    color: #efc110;
    -webkit-text-fill-color: #efc110;
}

.tema-live26 .section-title {
    color: #00ff88;
}

/* Indicatore LIVE lampeggiante (Effetto Pulsante) */
.live-indicator {
    display: inline-block;
    color: #ff3366;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 15px;
    animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {
    0% { opacity: 1; text-shadow: 0 0 10px #ff3366; }
    50% { opacity: 0.3; text-shadow: none; }
    100% { opacity: 1; text-shadow: 0 0 10px #ff3366; }
}

/* Schede Giurati (Stile Database) */
.tema-live26 .giurato-card {
    background: #111a29;
    border: 1px solid #00ff88;
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.1);
    border-top: 4px solid #00ff88;
}

.tema-live26 .giurato-header { border-bottom: 1px dashed #334455; }
.tema-live26 .giurato-header h3 { color: #00ff88; }
.tema-live26 .nickname { color: #00b8ff; }
.tema-live26 .film-list li strong { color: #e2e8f0; }
.tema-live26 .film-list li span { color: #64748b; }

.tema-live26 .film-link {
    border-bottom: 1px dotted #00ff88;
    color: #00ff88;
}
.tema-live26 .film-link:hover {
    color: #00b8ff;
    border-bottom: 1px solid #00b8ff;
}

/* Sezione Vincitori (Lavori in Corso) */
.tema-live26 .vincitori-section {
    background-color: #05080d;
    border-top: 2px dashed #334455;
}
.tema-live26 .work-in-progress-box {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background: #111a29;
    border: 1px dashed #00ff88;
    border-radius: 12px;
}

/* =========================================
   SEZIONE GIURIA (HOMEPAGE)
========================================= */
.giuria-section {
    padding: 40px 10%; /* <-- Spazio verticale dimezzato */
    background-color: #f9f9f9;
}

.giuria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

/* Stile della Card Animata */
.giuria-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #eaeaea;
}

.giuria-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* Immagine Giurato */
.giuria-img {
    width: 100%;
    height: 280px;
    background-size: cover;
    background-position: center top;
    background-color: #d1d5db; /* Colore di fallback se manca la foto */
    position: relative;
    transition: transform 0.6s ease;
}

.giuria-card:hover .giuria-img {
    transform: scale(1.05); /* Effetto zoom sull'immagine al passaggio del mouse */
}

/* Corpo della Biografia */
.giuria-content {
    padding: 30px;
    background: #ffffff;
    position: relative; /* Per coprire l'immagine in caso di zoom */
    z-index: 2;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.giuria-content h3 {
    margin: 0;
    font-size: 1.6rem;
    color: #1f2937;
    line-height: 1.2;
}

/* Etichette Ruoli */
.giuria-role {
    display: inline-block;
    background: var(--brand-primary, #2b6cb0);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 20px;
    margin: 15px 0 20px 0;
    align-self: flex-start;
}

.badge-new { background-color: #10b981; } /* Verde per i Mango */
.badge-paused { background-color: #ef4444; } /* Rosso per Dargenio */

/* Testo Scorrevole (Per mantenere l'altezza fissa) */
.giuria-bio {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.7;
    max-height: 200px; /* Altezza fissa del box testo */
    overflow-y: auto;  /* Appare lo scroll se la bio è troppo lunga */
    padding-right: 15px; /* Spazio per la scrollbar */
    margin-bottom: 10px;
}

.giuria-bio p {
    margin-bottom: 15px;
}

.giuria-bio p:last-child {
    margin-bottom: 0;
}

/* Personalizzazione Scrollbar della Bio */
.giuria-bio::-webkit-scrollbar {
    width: 6px;
}

.giuria-bio::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.giuria-bio::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

.giuria-bio::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* =========================================
   PULSANTE "CONTINUA A LEGGERE"
========================================= */
.bio-preview {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 10px;
}

.btn-leggi-tutto {
    background: transparent;
    border: none;
    color: #2b6cb0;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.btn-leggi-tutto:hover {
    color: #1a4a7a;
    text-decoration: underline;
}

/* =========================================
   PANNELLO MODAL (SOVRAIMPRESSIONE)
========================================= */
.modal-overlay {
    display: none; /* Nascosto di default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.modal-box {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 16px;
    max-width: 700px;
    width: 90%;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    animation: fadeInModal 0.3s ease-out;
}

/* Animazione di entrata dal basso */
@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #9ca3af;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover {
    color: #1f2937;
}

.modal-content-body p {
    margin-bottom: 15px;
}

/* =========================================
   OTTIMIZZAZIONE MOBILE (TELEFONO)
========================================= */
/* =========================================
   REGOLE GENERALI (Desktop & Mobile)
   ========================================= */

/* Nascondi la checkbox (fondamentale usare l'ID #nav-toggle) */
#nav-toggle {
    display: none;
}

/* Di base, nascondi elementi mobile e mostra il desktop */
.mobile-menu,
.hamburger,
.side-menu {
    display: none;
}

.desktop-menu {
    display: flex; /* O block, a seconda del tuo design */
}


/* ========================================================
   2. REGOLE MOBILE (Schermi fino a 768px)
   ======================================================== */
@media (max-width: 768px) {

    /* Nascondiamo il menu desktop */
    .desktop-menu,
    .old-nav-class {
        display: none !important;
    }

    /* FORZIAMO la comparsa del contenitore mobile */
    .mobile-menu {
        display: block !important;
    }

    /* Nascondi la checkbox invisibile */
    .nav-toggle {
        display: none !important;
    }

    /* Icona Hamburger (sempre visibile su mobile) */
    .hamburger {
        display: block;
        cursor: pointer;
        font-size: 2rem;
        color: #ffffff;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        padding: 15px;
        position: relative;
        z-index: 10; /* Sta sopra la pagina, ma sotto il menu quando si apre */
    }

    /* --- IL TUO MENU LATERALE CORRETTO --- */
    .side-menu {
        position: fixed;
        top: 0;
        right: -260px;             /* Nascono a destra fuori dallo schermo */
        width: 250px;
        height: 100vh !important;  /* Tutta l'altezza dello schermo */
        background-color: #111111 !important; /* Colore solido e scurissimo per contrasto */
        z-index: 99999 !important; /* Sopra a qualsiasi elemento del sito */
        transition: right 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
        padding-top: 10px;         /* Spazio interno iniziale */
        box-shadow: -5px 0 20px rgba(0,0,0,0.9);
    }

    /* --- LA LOGICA DI APERTURA (FONDAMENTALE) --- */
    /* Quando la checkbox è spuntata, sposta il menu a destra 0 */
    #nav-toggle:checked ~ .side-menu {
        right: 0 !important;
    }

    /* --- ELEMENTI INTERNI AL MENU --- */

    /* Il bottone di chiusura (X) */
    .close-btn {
        color: #ffffff;
        font-size: 2.5rem;
        cursor: pointer;
        text-align: right;
        padding: 10px 20px;
        display: block;
        line-height: 1;
    }

    /* I Link del menu */
    .side-menu a {
        color: white;
        padding: 15px 20px;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #222; /* Linea di separazione scura */
        font-size: 1.1rem;
    }

    /* Codice extra per la tua giuria (mantenuto intatto) */
    .giuria-section { padding: 20px 5% !important; }
    .giuria-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    h2.section-title { font-size: 1.8rem !important; }
    .giuria-content h3 { font-size: 1.3rem !important; }
    .modal-box { padding: 20px; width: 95%; max-height: 80vh; overflow-y: auto; }
}



/* Rimpiccioliamo il testo della CTA su mobile */
@media (max-width: 768px) {
    .scroll-down-cta .scroll-text {
        font-size: 0.85rem; /* Puoi regolare questo valore (es. 0.8rem per renderlo ancora più piccolo) */
    }
}

/* Rimpicciolisce il testo del blocco Ariete d'Oro su mobile */
@media (max-width: 768px) {
    .ariete-doro-banner h4 {
        font-size: 1rem;       /* Rende più piccolo il titolo superiore */
        margin-bottom: 5px;    /* Avvicina il titolo al nome */
    }

    .ariete-doro-banner .winner-name {
        font-size: 1.5rem;     /* Rende più piccolo il nome del vincitore */
    }
}

/* Il tuo stile base per desktop (mantieni quello che hai già) */
.subtitle {
    font-size: 1.5rem; /* Esempio di grandezza desktop */
    color: #ccc;       /* Esempio di colore */
}

/* --- REGOLE PER IL TELEFONO --- */
@media (max-width: 768px) {
    .subtitle {
        font-size: 1rem; /* Riduce la grandezza del font sui telefoni */
        margin-top: 10px; /* Opzionale: aggiusta lo spazio se necessario */
    }
}

/* =========================================
   TASTO AREA PRIVATA (EVIDENTE E ANIMATO)
========================================= */
.btn-area-privata {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #FF3366; /* Colore brand acceso di default */
    border: 2px solid #FFFFFF; /* Bordo bianco netto per staccare dal fondo */
    color: white;
    width: 60px; /* Più grande (era 50px) */
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem; /* Icona più grande */
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 5px 15px rgba(255, 51, 102, 0.5); /* Ombra colorata */
    transition: all 0.3s ease;

    /* Animazione che lo fa pulsare continuamente */
    animation: pulse-button 2s infinite;
}

/* L'animazione del battito */
@keyframes pulse-button {
    0% { transform: scale(1); box-shadow: 0 5px 15px rgba(255, 51, 102, 0.5); }
    50% { transform: scale(1.08); box-shadow: 0 10px 25px rgba(255, 51, 102, 0.8); }
    100% { transform: scale(1); box-shadow: 0 5px 15px rgba(255, 51, 102, 0.5); }
}

.btn-area-privata:hover {
    background: #4A00E0; /* Diventa viola al passaggio del mouse */
    border-color: #4A00E0;
    transform: scale(1.15) rotate(15deg);
    animation: none; /* Ferma il battito quando l'utente ci passa sopra */
}

/* Adattamento per i telefoni */
@media (max-width: 768px) {
    .btn-area-privata {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* =========================================
   COOKIE CONSENT BANNER
========================================= */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    padding: 20px 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    /* Effetto Glassmorphism scuro */
    background: rgba(26, 26, 29, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);

    /* Animazione entrata dal basso */
    animation: slideUpBanner 0.6s ease-out forwards;
}

@keyframes slideUpBanner {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Nasconde il banner quando l'utente ha accettato */
.cookie-banner.hidden {
    animation: slideDownBanner 0.4s ease-in forwards;
}

@keyframes slideDownBanner {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}

.cookie-banner p {
    color: #ccc;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.cookie-banner a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.cookie-banner a:hover {
    opacity: 0.8;
}

.cookie-banner-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.btn-cookie-accept {
    background: linear-gradient(45deg, var(--brand-primary), var(--brand-secondary));
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-cookie-accept:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(255, 51, 102, 0.4);
}

@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px 6%;
    }

    .cookie-banner p {
        font-size: 0.8rem;
    }
}

/* =========================================
   FOOTER
========================================= */
.site-footer {
    background-color: #111113;
    padding: 30px 10%;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer p {
    color: #666;
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.8;
}

.site-footer a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: var(--brand-primary);
}

.footer-separator {
    margin: 0 8px;
    color: #444;
}