a {

    color: #fff500;

}

a:hover{

    color: #fff500;

}



/*----------PER CERCHIO----------*/



:root {



    --primary-color: #291770; /* Usato il blu del tuo primo CSS */



    --hover-color: #3d25a0;   /* Una tonalità leggermente più chiara per l'hover */



    --accent-color: #fff500;  /* Il giallo del tuo primo CSS */



}







/* Nota: Ho rimosso 'body' per non sovrascrivere quello del tuo sito principale. 



   Assicurati che il contenitore del cerchio sia dentro un wrapper o body con altezza definita. */







.main-wrapper {



    display: flex;



    align-items: center;



    justify-content: center;



    width: 95vw;



    max-width: 1400px;



    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);



    margin: 0 auto;



}







.main-wrapper.active {



    justify-content: flex-start;



    padding-left: 5vw;



}







.donut-container {



    width: 500px;



    height: 500px;



    flex-shrink: 0;



    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);



    padding: 30px; 



    box-sizing: border-box;



}







.main-wrapper.active .donut-container {



    width: 380px;



    height: 380px;



}







svg {



    overflow: visible;



    width: 100%;



    height: 100%;



}







.segment {



    fill: none;



    stroke: var(--primary-color);



    stroke-width: 50;



    stroke-dasharray: 54 417.24; 



    transition: all 0.3s ease;



    cursor: pointer;



}







.segment:hover {



    stroke: var(--hover-color);



    stroke-width: 58;



    /* Effetto opzionale: illumina il bordo col giallo del tuo sito */



    filter: drop-shadow(0 0 5px var(--accent-color));



}







text {



    fill: white;



    font-size: 14px;



    font-weight: bold;



    pointer-events: none;



    text-anchor: middle;



    dominant-baseline: middle;



    user-select: none;



}







.cerchio-panel {



    width: 650px;              /* dimensione fissa */



    max-width: 100%;



    opacity: 0;



    height: 450px;



    background: white;



    border-radius: 25px;



    box-shadow: 0 20px 50px rgba(0,0,0,0.15);



    



    transform: translateX(50px) scale(0.95); /* invece di width 0 */



    transition: opacity 0.5s ease, transform 0.5s ease;







    overflow: hidden;



    margin-left: 0;



    display: flex;



    opacity: 0;



    pointer-events: none;



    flex-direction: column;



    pointer-events: none;



}







.cerchio-panel {



    position: relative !important;



    top: auto !important;



    left: auto !important;



}







.cerchio-panel .close-btn {



    position: static;          /* niente absolute */



    width: auto;



    height: auto;



    border-radius: 10px;







    padding: 12px 20px;



    font-size: 16px;







    display: inline-block;



}







.main-wrapper.active .cerchio-panel {



    opacity: 1;



    transform: translateX(0) scale(1);



    margin-left: 100px;



    padding: 40px;



    pointer-events: auto;



    display: flex;



}







.content-text h2 { 



    color: var(--primary-color); 



    margin-top: 0; 



    font-size: 32px; 



    border-bottom: 2px solid #eee;



    padding-bottom: 15px;



}







.content-text p { 



    line-height: 1.8; 



    color: #555; 



    font-size: 19px; 



}







.close-btn {



    margin-top: auto;



    padding: 15px 30px;



    background: var(--primary-color);



    color: white;



    border: none;



    border-radius: 10px;



    cursor: pointer;



    font-weight: bold;



    align-self: flex-start;



    transition: none;



}







.close-btn:hover {



    background: var(--hover-color);



    box-shadow: 0 0 10px var(--accent-color); /* Richiamo al giallo del sito */



}







.cerchio-panel .close-btn:hover {



    transform: none;



}







.close-btn {



    white-space: nowrap;



    flex-shrink: 0;



}







.placeholder-text {



    max-width: 500px;



    margin-left: 60px;







    opacity: 1;



    transition: opacity 0.4s ease, transform 0.4s ease;







    transform: translateX(0);



}







/* Quando apri il pannello → sparisce */



.main-wrapper.active .placeholder-text {



    opacity: 0;



    transform: translateX(30px);



    pointer-events: none;



    position: absolute;



}







@media (max-width: 768px) {







    .main-wrapper {



        flex-direction: column;



        align-items: center;



        gap: 20px;



    }







    .main-wrapper {



        justify-content: center;



        gap: 0;



    }







    .main-wrapper.active {



        gap: 60px; /* spazio tra cerchio e pannello */



    }







    /* CERCHIO PIÙ PICCOLO */



    .donut-container {



        width: 280px;



        height: 280px;



        padding: 10px;



    }







    .main-wrapper.active .donut-container {



        width: 240px;



        height: 240px;



    }







    /* PANNELLO SOTTO (NON A LATO) */



    .cerchio-panel {



        width: 100%;



        height: auto;



        min-height: auto;







        margin-left: 0;



        transform: translateY(20px) scale(0.98);



    }







    .main-wrapper.active .cerchio-panel {



        margin-left: 0;



        padding: 20px;



        transform: translateY(0) scale(1);



    }







    /* TESTI PIÙ PICCOLI */



    .content-text h2 {



        font-size: 22px;



    }







    .content-text p {



        font-size: 16px;



    }







    /* BOTTONE FULL WIDTH */



    .cerchio-panel .close-btn {



        width: 100%;



        text-align: center;



    }







    .placeholder-text {



        margin-left: 0;



        text-align: center;



        padding: 0 15px;



    }



}