/* ================================================================
                             COLORI
================================================================ */
:root {
    --azzurro: #379CA6; --azzurro-scuro: #287B97;
    --arancione: #FA9B32; --arancione-scuro: #F8523A;
    --nero: #2F2F2F;
}

/* ================================================================
                             FONTS
================================================================ */
@font-face { font-family: 'FontSudoku'; src: url('fonts/Sudoku.ttf') format('truetype'); }
@font-face { font-family: 'FontTitolo'; src: url('fonts/Heavitas.ttf') format('truetype'); }
@font-face { font-family: 'FontZenith'; src: url('fonts/Floralis_Couture.ttf') format('truetype'); }

/* ================================================================
                             LAYOUT
================================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*outline: 1px solid red !important;*/
}

html, body {
    overflow-x: hidden !important; /* Blocca categoricamente lo scorrimento laterale */
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #EEEEEEFF;
}

body {
    overflow: hidden;
    -ms-overflow-style: none;  /* IE e Edge */
    scrollbar-width: none;  /* Firefox */
}
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Applica il blocco anche al main per sicurezza */
main {
    overflow-x: hidden;
    width: 100%;
}

::-webkit-scrollbar {
    display: none;
}

header {
    width: 100%;
    padding: 4%; /* Puoi anche ridurre leggermente il padding se l'header ti sembra troppo alto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Rimosso overflow: none perché non serve più */
}


/* ================================================================
                           ANIMAZIONI
================================================================ */
@keyframes ondaArancio {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ================================================================
                           COMPONENTE LOGO
================================================================ */
.Logo_Container {
    position: relative;
    display: flex; /* Flexbox qui è fondamentale */
    flex-direction: column;
    align-items: center; /* Allinea entrambi i testi al centro del contenitore */
    width: min-content; /* Assicura che il contenitore si stringa attorno al testo */
}
h1 {
    font-size: clamp(4rem, 15vw, 20rem);
    font-family: 'FontSudoku';
    text-transform: uppercase;
    color: var(--nero);
    line-height: 0.8;
    margin: 0;
}

h4 {
    /* Rimosso position: absolute */
    position: relative; /* Ora è relativo per posizionarlo con precisione */
    align-self: flex-end; /* Allinea *solo* Zenith a destra *rispetto al container* */

    /* Regola queste due proprietà per la sovrapposizione e lo spostamento laterale */
    right: -10px; /* Sposta Zenith leggermente verso l'esterno rispetto alla fine della scritta Sudoku. Riduci se è troppo fuori. */

    /* Ripristina le tue impostazioni originali */
    font-size: clamp(2rem, 4vw, 6rem);
    font-family: 'FontZenith';
    color: #444; /* IL COLORE ORIGINALE */
    transform: rotate(-15deg);

    /* Altre impostazioni originali */
    font-weight: normal;
    text-transform: none;
    line-height: 1;
    pointer-events: none;
    margin-bottom: 0; /* Assicura che non ci sia margine sotto Zenith */
}

/* ================================================================
                             MENU

.Box_Menu {
    position: fixed; top: 50px; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; background-color: var(--nero);
    width: 320px; height: 70px; border-radius: 50px; padding: 2px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.Bot1, .Bot2, .Bot3 {
    flex: 1; height: 100%; display: flex; justify-content: center;
    align-items: center; cursor: pointer; color: white;
    transition: all 0.4s ease; border-radius: 50px;
    background-size: 200% 200%;
}

.Bot1:hover, .Bot2:hover, .Bot3:hover, .active {
    background: linear-gradient(270deg, var(--arancione), var(--arancione-scuro), var(--arancione));
    background-size: 200% 200%;
    animation: ondaArancio 3s ease infinite;
}
================================================================ */



/* ================================================================
                            TIPOGRAFIA
================================================================ */
.Base1 { margin: 5%; padding: 2%; height: auto; }

h2 {
    font-size: clamp(1.8rem, 5vw, 3rem); font-family: 'FontTitolo';
    text-transform: uppercase; color: var(--nero); margin-bottom: 0.8rem;
    line-height: 1.1; letter-spacing: -1px; display: inline-block;
    border-bottom: 2px solid var(--azzurro); padding-bottom: 5px;
}

p { font-size: clamp(1rem, 2.5vw, 1.2rem); line-height: 1.5; color: #444; margin-bottom: 1.5rem; }

ul { list-style: none; padding-left: 0; }

li {
    font-size: clamp(0.95rem, 2.2vw, 1.1rem); border-left: 5px solid var(--azzurro);
    padding-left: 15px; margin-bottom: 20px; color: #444;
}

.highlight {
    color: var(--azzurro) !important; font-weight: bold !important; display: inline;
}


.footer {
    width: 150px; /* Regola la larghezza come preferisci */
    height: auto;
    display: block;
    margin: 0 auto;
}