    <style>
        /* RESET E BASE */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: "Almendra Display", serif;
            font-weight: 800;
            color: #ffffff;
            background-color: #000000;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* CONTAINER PRINCIPAL */
        .container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
            padding: 20px;
            z-index: 10;
        }
        
        .container h1 {
            color: #ffb0df;
            font-size: clamp(1.5rem, 4vw, 2.5rem);
        }
        
        /* CONTAINER DO MENU */
        .container-menu-index {
            position: relative;
            width: 100%;
            height: 100vh;
            min-height: 800px;
        }
        
        /* BOTÕES - POSIÇÕES ORIGINAIS MANTIDAS */
        .botao-imagem {
            position: absolute;
            display: block;
            transition: transform 0.3s ease, filter 0.3s ease;
        }
        
        .botao-imagem img {
            width: clamp(120px, 20vw, 300px);
            height: clamp(120px, 20vw, 300px);
            object-fit: contain;
        }
        
        .botao-imagem:hover img {
            filter: drop-shadow(0 0 5px #fc90b7);
        }
        
        /* POSIÇÕES ORIGINAIS (convertidas para responsivas) */
        /* Música */
        .botao-imagem:nth-child(1) {
            top: 50%;
            left: 50%;
            transform: translate(-120%, -20%) rotate(-20deg);
            transform-origin: center;
        }
        
        /* Artes */
        .botao-imagem:nth-child(2) {
            top: calc(50% + 200px);
            left: calc(50% - 550px);
            transform-origin: center;
        }
        
        /* Galeria */
        .botao-imagem:nth-child(3) {
            top: calc(50% - 70px);
            left: calc(50% - 50px);
            transform: rotate(8deg);
            transform-origin: center;
        }
        
        /* Mensagens */
        .botao-imagem:nth-child(4) {
            top: calc(50% + 220px);
            left: calc(50% - 240px);
            transform: rotate(15deg);
            transform-origin: center;
        }
        
        /* Pensamentos */
        .botao-imagem:nth-child(5) {
            top: calc(50% + 240px);
            left: calc(50% + 110px);
            transform: rotate(-5deg);
            transform-origin: center;
        }
        
        /* RESPONSIVIDADE */
        @media (max-width: 1200px) {
            .container-menu-index {
                min-height: 700px;
            }
            
            .botao-imagem img {
                width: clamp(100px, 18vw, 250px);
                height: clamp(100px, 18vw, 250px);
            }
            
            /* Ajustar posições proporcionalmente */
            .botao-imagem:nth-child(2) {
                left: calc(50% - 450px);
            }
            
            .botao-imagem:nth-child(3) {
                left: calc(50% - 40px);
            }
            
            .botao-imagem:nth-child(4) {
                left: calc(50% - 190px);
            }
            
            .botao-imagem:nth-child(5) {
                left: calc(50% + 90px);
            }
        }
        
        @media (max-width: 992px) {
            .container-menu-index {
                min-height: 600px;
            }
            
            .botao-imagem img {
                width: clamp(90px, 16vw, 220px);
                height: clamp(90px, 16vw, 220px);
            }
            
            /* Ajustar ainda mais para telas menores */
            .botao-imagem:nth-child(1) {
                transform: translate(-110%, -20%) rotate(-20deg) scale(0.9);
            }
            
            .botao-imagem:nth-child(2) {
                left: calc(50% - 380px);
                top: calc(50% + 170px);
            }
            
            .botao-imagem:nth-child(3) {
                left: calc(50% - 35px);
                top: calc(50% - 60px);
            }
            
            .botao-imagem:nth-child(4) {
                left: calc(50% - 160px);
                top: calc(50% + 190px);
            }
            
            .botao-imagem:nth-child(5) {
                left: calc(50% + 75px);
                top: calc(50% + 200px);
            }
        }
        
        @media (max-width: 768px) {
            body {
                padding: 15px;
            }
            
            .container-menu-index {
                min-height: 500px;
            }
            
            .botao-imagem img {
                width: clamp(80px, 15vw, 180px);
                height: clamp(80px, 15vw, 180px);
            }
            
            /* Ajuste mais significativo para tablets */
            .botao-imagem:nth-child(1) {
                transform: translate(-100%, -20%) rotate(-20deg) scale(0.8);
            }
            
            .botao-imagem:nth-child(2) {
                left: calc(50% - 280px);
                top: calc(50% + 130px);
            }
            
            .botao-imagem:nth-child(3) {
                left: calc(50% - 25px);
                top: calc(50% - 45px);
            }
            
            .botao-imagem:nth-child(4) {
                left: calc(50% - 120px);
                top: calc(50% + 140px);
            }
            
            .botao-imagem:nth-child(5) {
                left: calc(50% + 55px);
                top: calc(50% + 150px);
            }
        }
        
        @media (max-width: 576px) {
            .container-menu-index {
                min-height: 400px;
                height: auto;
                padding-top: 80px;
            }
            
            .botao-imagem {
                position: relative !important;
                display: inline-block;
                margin: 5px;
                transform: none !important;
                top: auto !important;
                left: auto !important;
            }
            
            .botao-imagem img {
                width: 120px;
                height: 120px;
            }
            
            /* Layout em grid para mobile muito pequeno */
            .container-menu-index {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                gap: 15px;
            }
        }
        
        @media (max-width: 400px) {
            .botao-imagem img {
                width: 100px;
                height: 100px;
            }
            
            .container h1 {
                font-size: 1.5rem;
            }
        }
        
        /* Para telas muito altas */
        @media (min-height: 1000px) {
            .container-menu-index {
                min-height: 900px;
            }
            
            .botao-imagem img {
                width: clamp(150px, 22vw, 350px);
                height: clamp(150px, 22vw, 350px);
            }
        }
    </style>