@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Titan+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Titan+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&display=swap');

    max-html {
        width: 100%;
    }

    body {
        background-color: #FFFBF0;
        display: block;
        margin: 0 auto;
    }
    
    .navegador {
        padding: 0 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
        height: 80px;
        background-color: white;
        box-shadow: 0px 4px 4px #00000007;
        font-family: 'Poppins';
    }

    #logo {
        height: 60px;
        margin-bottom: 7px;
    }

    .navegador a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: #985C38;
        transition: 0.2s;
    }

    .navegador a svg {
        height: 25px;
    }

    #user_profile_link {
        margin-left: 10px;
    }

    .navegador a:hover {
        color: #F881A1;
        transition: 0.2s;
    }

    .grupo_1 {
        display: flex;
        justify-content: space-evenly;
        width: 800px;
    }

    .grupo_2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 140px;
    }

    #button_login {
        border-radius: 10px;
        background-color: #985C38;
        padding: 8px 18px;
        color: #ffffff;
    }


/* Bolinhas */
.dots {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 25px;
    z-index: 3;
    max-width: 51%;
    padding-bottom: 10px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #c9c9c9;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active {
    background-color: white;
    transform: scale(1.15);
}

/* Transições suaves */
#img-banner,
#text-banner1A,
#text-banner1B,
#text-banner2,
#bt-banner {
  transition: opacity 0.4s ease-in-out;
}

.text-b p {
    margin: 0;
}


    #rosa {
        max-width: 500px;
        min-height: 100px;
        background-color: #F881A1;
        margin: 0 0 0 250px;
        clip-path: ellipse( 50% 90% at 50% 0%);
    }

    .banner {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        padding: 20px;
    }

    #marrom {
        width: 560px;
        height: 450px;
        background-color: #985C38;
        clip-path: ellipse( 70% 80% at 30% 80% );
        position: absolute;
        z-index: 1;       
        bottom: 0;
        left: 0;
        transform: translateY(12%);
    }

    #img-banner {
        height: 360px;
        margin-left: 150px;
        margin-bottom: 50px;
        position: relative;
        z-index: 2; 
    }

    .text-b {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        position: relative;
        max-width: 620px;
    }

    #text-banner1 {
        color: #402515;
        font-family: Titan One;
        font-size: 52px;
        margin: 0;
    }

    #text-banner1A {
        color: #F881A1;
        font-family: Titan One;
        font-size: 52px;
        margin: 0;
    }

    #text-banner2 {
        color: #985C38;
        font-family: Poppins;
        font-size: 20px;
        margin-top: 30px;
    }

    #bt-banner {
        background-color: #F881A1;
        color: #7D1133;
        font-family: Poppins;
        font-size: 20px;
        font-weight: 600;
        border: 1px solid #F881A1;
        width: 209px;
        height: 60px;
        border-radius: 10px;
        margin-top: 50px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none !important;
    }

    #choco {
        width: 100%;
    }

    #topo-choco {
        width: 100%;
        margin: none;
        padding: 0%;
        display: block;
        position: relative;
        z-index: 2;
    }

    .anima-choco {
        background-color: #673A1F;
        min-height: 250px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .categorias {
        display: flex;
        max-width: 100%;
        flex-direction: row;
        justify-content: space-evenly;
        gap: 30px;
        align-items: center;
        margin-top: 40px;
        text-align: center;
        gap: 20px; /* espaço entre as divs */
        animation: appear 1ms ease-in-out;
        animation-timeline: view();
        animation-range: cover 0% cover 60%;
    }


    .img-categoria {
        min-width: 80px;
        min-height: 80px;
        position: absolute;
        z-index: 1; /* Fundo */
        background-repeat: no-repeat;
        object-fit: cover;
        overflow: hidden;
    }

    .catego1-0, .catego1-1, .catego1-2, .catego1-3, .catego1-4, .catego1-5 {
        width: 150px;
        height: 148px;
        background-color: #fffefe;
        margin-right: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: #FFF9E8 1px solid;
        border-radius: 27px;
    }

    .catego2-0, .catego2-1, .catego2-2, .catego2-3, .catego2-4, .catego2-5 {
        width: 150px;
        height: 148px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 27px;
        transition: 1s;
    }

    .catego2-0:hover {
        background-color: #F881A1;
        transition: 1s;
        cursor: pointer;
    }

    .catego2-1:hover {
        background-color: #D281F8;
        transition: 1s;
        cursor: pointer;
    }

    .catego2-2:hover {
        background-color: #5AC6E4;
        transition: 1s;
        cursor: pointer;
    }

    .catego2-3:hover {
        background-color: #49D493;
        transition: 1s;
        cursor: pointer;
    }

    .catego2-4:hover {
        background-color: #ABBE40;
        transition: 1s;
        cursor: pointer;
    }

    .catego2-5:hover {
        background-color: #F0B658;
        transition: 1s;
        cursor: pointer;
    }

    .catego3-0-text:hover, .catego3-1-text:hover, .catego3-2-text:hover, .catego3-3-text:hover, .catego3-4-text:hover, .catego3-5-text:hover {
        transition: 1s;
        cursor: pointer;
        color: #FFFFFF;
    }

    .catego3-0-text, .catego3-1-text, .catego3-2-text, .catego3-3-text, .catego3-4-text, .catego3-5-text {
        color: #ffffff00;
        width: 150px;
        height: 148px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Poppins;
        font-weight: bold;
        font-size: 24px;
        position: absolute;
        transition: 1s;
        z-index: 3; /* Em cima de tudo */
    }

    .cardapio {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
    }

    .cardapio2-linha {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        padding: 10px;
    }


        @keyframes appear {
            from {
                opacity: 0;
                translate: -100vw 0;
            }
            to {
                opacity: 1;
                translate: 0 0;
            }
        }

        #texto-ig {
            color: #F881A1;
            font-family: Titan One;
            font-size: 48px;
            text-align: center;
        }

        .icons-ig {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-direction: row;
            margin-bottom: 60px;
            cursor: pointer;
        }

        .ig2 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
            flex-direction: row;
        }

        .vitrine-ig {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }


    #vizu {
        background-color: #F881A1;
        position: relative; /* agora é o "pai" do #chocobege */
        height: 150px;
        z-index: 1;
        margin-top: 120px;
    }
    
    #chocobege {
        position: absolute;
        top: -50px; /* faz a cauda "invadir" o footer */
        left: 50%;
        min-width: 100%;
        transform: translateX(-50%);
        z-index: 2;     
    }

    .menu-usuario {
        display: flex;
        align-items: center;
        gap: 15px;
        background-color: #2c2c2c;
        padding: 8px 16px;
        border-radius: 12px;
    }

    .usuario-info {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #fff;
    }

    .nome-usuario {
        font-size: 16px;
        font-weight: 500;
        color: #fff;
    }

    .botao-sair {
        background-color: #ff4d4d;
        color: white;
        text-decoration: none;
        padding: 6px 12px;
        border-radius: 8px;
        font-weight: bold;
        transition: 0.3s;
    }

    .botao-sair:hover {
        background-color: #d63c3c;
    }


        
        #user_profile_link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: #985C38;
            transition: color 0.2s;
            font-weight: 500;
        }

        #user_profile_link svg {
            fill: currentColor;
            /* Faz o SVG usar a cor definida pelo pai (o link) */
            height: 25px;
            /* Ajuste o tamanho do ícone SVG */
            width: 25px;
            transition: fill 0.2s;
        }

        .nome-usuario-header {
            font-size: 16px;
            /* Tamanho da fonte para o nome */
            white-space: nowrap;
            /* Impede que o nome quebre a linha */
            overflow: hidden;
            text-overflow: ellipsis;
            /* Adiciona '...' se o nome for muito longo */
            max-width: 100px;
            /* Limite a largura para nomes muito longos */
        }

        #user_profile_link:hover {
            color: #F881A1;
            /* Cor rosa no hover */
        }

        #user_profile_link:hover svg {
            fill: #F881A1;
            /* Cor rosa no hover para o ícone */
        }

        /* Estilo para o link do carrinho (apenas para consistência) */
        .carrinho-link svg {
            fill: #985C38;
            /* Cor marrom para o carrinho */
            transition: fill 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 25px;
        }

        .carrinho-link:hover svg {
            fill: #F881A1;
            /* Cor rosa no hover */
            display: flex;
            align-items: center;
            justify-content: center;
            height: 25px;
        }

        .menu-usuario {
            display: none !important;
        }
        
        .botao-sair {
            display: none !important;
        }

        .footer {
            background-color: #F881A1; /* rosa da paleta */
            color: #fff;
            font-family: 'Poppins', sans-serif;
            padding: 40px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
            position: relative;
        }

        .footer1 {
            background-color: #F881A1; /* rosa da paleta */
            color: #fff;
            font-family: 'Poppins', sans-serif;
            padding: 40px 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 30px;
            position: relative;
        }

        #hr-footer {
            width: 90%;
            background-color: #FFFFFF;
            height: 2px;
        }
        
        #img-footer {
            width: 350px;
            margin-bottom: 20px;
        }

        .footer > div {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 1000px;
            gap: 50px;
            flex-wrap: wrap;
        }

        .footer div p:first-child {
            font-weight: 700;
            margin-bottom: 10px;
        }

        .footer div p {
            margin: 5px 0;
            font-weight: 400;
            font-size: 14px;
        }

        .footer > div:last-child {
            text-align: center;
            width: 100%;
        }

        @media (max-width: 768px) {
            .navegador {
                padding: 0 20px;
            }

            .grupo_1 {
                display: none;
            }

            .grupo_2 {
                width: auto;
            }

            #logo {
                height: 50px;
            }

            #rosa {
                margin: 0;
                width: 100%;
                clip-path: ellipse( 50% 90% at 50% 0%);
            }

            .banner {
                flex-direction: column;
                align-items: center;
            }

            #marrom {
                width: 100%;
                height: 300px;
                clip-path: ellipse( 70% 80% at 50% 80% );
                transform: translateY(0%);
            }

            #img-banner {
                margin-left: 0;
                margin-bottom: 20px;
            }

            .text-b {
                align-items: center;
                text-align: center;
            }

            #text-banner1, #text-banner1A {
                font-size: 48px;
            }

            #text-banner2 {
                font-size: 16px;
            }

            #bt-banner {
                width: 150px;
                height: 50px;
                font-size: 16px;
            }

            .anima-choco {
                padding: 20px;
            }

            .categorias {
                flex-wrap: wrap;
                gap: 10px;
            }

            .catego1-0, .catego1-1, .catego1-2, .catego1-3, .catego1-4, .catego1-5 {
                width: 120px;
                height: 120px;
                margin-right: 0;
            }

            .catego2-0, .catego2-1, .catego2-2, .catego2-3, .catego2-4, .catego2-5 {
                width: 120px;
                height: 120px;
            }

            .img-categoria {
                min-width: 60px;
                min-height: 60px;
            }

            .catego3-0-text, .catego3-1-text, .catego3-2-text, .catego3-3-text, .catego3-4-text, .catego3-5-text {
                font-size: 18px;
            }

            #texto-ig {
                font-size: 36px;
            }

            .icons-ig {
                margin-bottom: 30px;
            }

            .ig2 {
                flex-direction: column;
                gap: 10px;
            }

            .vitrine-ig {
                gap: 10px;
            }

            .tam-ig-img {
                width: 100%;
                max-width: 250px;
            }

            #vizu {
                height: 300px;
                margin-top: 80px;
            }
            
            .footer > div {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
        }