.custom-header {
    width: 100%;
    font-family: 'Segoe UI', sans-serif;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
}

.left {
    display: flex;
    align-items: center;
    padding: 10px 40px;
}

.logo {
    height: 60px;
}

.titulo-header {
    font-size: 24px;
    font-weight: 600;
    color: #338c33;
    margin-left: 10px;
}

.right .nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.right-box {
    background-color: #338c33;
    padding: 25px 200px;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    display: flex;
    align-items: center;
}


.nav-link {
    color: white;
    background-color: #338c33;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 500;
}

.nav-link:hover {
    border-radius: 5px;
    background-color: #fff;
    color: #338c33;
}

.btn-seguir {
    color: #fff;
    border: 4px solid #fff;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    background-color: #338c33;
}

.btn-seguir:hover {
    background-color: #fff;
    color: #338c33;
}

/* Curva verde */
.curved-banner {
    background-color: #338c33;
    background-image: url("/static/IMG/fondo.png");
    background-size: cover;
    color: white;
    text-align: center;
    padding: 40px 20px;
    border-bottom-left-radius: 60% 20%;
    border-bottom-right-radius: 60% 20%;
}

.mensaje-banner {
    font-size: 20px;
    font-weight: bold;
}

/* Hamburguesa escondida en escritorio */
.hamburger {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: #338c33;
    padding: 10px;
}

/* Tablets y móviles */
@media (max-width: 992px) {
    .hamburger {
        display: block;
        z-index: 1001; 
    }

    .right-box {
        display: none;  
        flex-direction: column;
        align-items: flex-start;
        background-color: #338c33;
        width: 100%;
        padding: 15px;
        position: fixed;   /* ahora queda fijo */
        top: 60px;               
        right: 0;
        left: 0;
        z-index: 9999; 
        border-top-left-radius: 0px; 
        margin-top: 40px;      
    }

    .right-box.active {
        display: flex;
    }

    .nav {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .nav-link,
    .btn-seguir {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px;
    }
}

/* Móviles */
@media (max-width: 576px) {
    .top-bar {
        align-items: flex-start;
    }

    .left {
        padding: 10px 20px;
    }

    .titulo-header {
        display: none;
    }

    .right .nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        margin-top: 10px;
    }

    .right-box {
        flex-direction: column;
        padding: 15px 20px;

    }

    .nav-link,
    .btn-seguir {
        display: block;
        width: 100%;
        text-align: center;
    }

    .mensaje-banner {
        font-size: 16px;
    }
}