@font-face {
            font-family: 'Aglet Sans';
            src: url('fonts/aglet-sans-regular.woff2') format('woff2'),
                url('fonts/aglet-sans-regular.woff') format('woff');
            font-weight: 400;
            font-style: normal;
            }

            @font-face {
            font-family: 'Aglet Sans';
            src: url('fonts/aglet-sans-bold.woff2') format('woff2'),
                url('fonts/aglet-sans-bold.woff') format('woff');
            font-weight: 700;
            font-style: normal;
        }


        html, body {margin: 0;padding: 0;height: 100%;}
        
        p{margin: 0px;}

        .menu{position: absolute;top:5%;left:10%;font-family: 'Aglet Sans';}
        .menu a{color:#ffd30f; text-decoration: none; text-transform: uppercase;font-size: 11px;font-weight: 400;font-family: 'Aglet Sans';}
        .menu span{padding: 0 5px;}
        .menu a:hover{color: #d3192f;}

        .banner{width: 100%; max-width: 1920px;display: block;}

        .banner-mobile{display: none;}

        .subbanner{width: 100%; max-width: 1920px;display: block; margin-top: -20px;}

        .subbanner-mobile{display: none;}

        .vibe_tipo{background: url(images/img_03.jpg);
    margin-top: -20px;
    display: flex;
    padding: 3% 15% 10% 15%;
    background-repeat: no-repeat;}

        .qualsuavibe{width: 50%; display: grid;}

        .quetiporockeiro{width: 50%;}

        .copyright{color: #f4d11e; background: url('images/bg-copyright.png'); background-repeat: no-repeat; background-position: center; background-size: cover; height: 100px; margin-top: -20px; display: flex;  align-items: center; justify-content: space-around;font-family: 'Aglet Sans', sans-serif; font-weight: 700;}

        .footer-container {
        position: relative;
        width: 100%;
        max-width: 1920px;        
        }

        .footer-fundo {
        width: 100%;
        display: block;
        max-width: 1920px;        
        }

        .footer-fundo-mobile{display: none;}

        .conteudo-footer {
            position: absolute;
            top: 25%;
            justify-self: anchor-center; 
            justify-items: anchor-center;
            display: grid;                       
        }

        .btsubfooter{width: 100%; max-width: 300px;}

        .btsubfooter:hover{transform: scale(1.1);}

        .tiporockeiro-container {
        position: relative;
        width: 100%;       
        }

        .tiporockeiro-fundo {
        width: 100%;
        display: block;
        margin-left: -5px;
        }


        .montesuamixtape {
          position: relative;
          width: 100%; 
          margin-top: -8%;      
        }

        .montesuamixtape-fundo {
        width: 100%;
        display: block;
        max-width: 1920px;
        }

        .montesuamixtape-fundo-mobile{display: none;}

        .conteudo-montesuamixtape {
            position: absolute;
            left: 0px;
            top: 60px;
            color: white;            
            font-family: 'Aglet Sans';
            display: flex;
            align-self: anchor-center;
        }

        .descricaoMontesuamixtape{position: absolute;
        width: 20%;
        top: 60%;
        left: 15%;text-transform: uppercase; font-size: 14px;text-align: center;}

        
        .cultura {
          position: relative;
          width: 100%; 
          margin-top: -7%; 
          z-index: -1;     
        }

        .cultura-fundo {
        width: 100%;
        display: block;        
        }

        .cultura-fundo-mobile{display:none;}

        .conteudo-cultura {
            position: absolute;
            top: 320px; 
            left: 410px;
            right: 50px;
            color: white;
            text-align: center;
            font-family: 'Aglet Sans';
            width: 50%;
            justify-self: anchor-center;
        }

        footer{margin-top: -25%}

        /*TESTE CAROSSEL*/
        /* Setas visuais */
        .radio-setas {
        position: absolute;
        top: 40%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        transform: translateY(-50%);
        z-index: 2;
        pointer-events: none; /* deixa o container invisível para clique */
        }

        .radio-setas div {
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        font-size: 2rem;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        margin: 0 -20px;
        user-select: none;
        cursor: pointer;
        pointer-events: all; /* permite clique apenas nas setas */
        transition: background 0.3s;
        }

        .radio-setas div:hover {
        background-color: rgba(0, 0, 0, 0.8);
        }

        .radio-container {
        position: relative;
        width: 100%;
        max-width: 500px;        
        }

        .radio-fundo {
        width: 100%;
        display: block;
        max-width: 510px;
        margin-left: -5px;
        }

        .radio-fundo-mobile{display: none;}

        .conteudo-radio {
            position: absolute;
            top: 50px; 
            left: 50px;
            right: 50px;
            color: white;
            text-align: center;
            font-family: 'Aglet Sans';
        }

        .botao {
        position: absolute;
        width: 50px;
        height: 50px;
        background: none;
        border: none;
        cursor: pointer;
        }

        .anterior {
        left: 20px;
        bottom: 80px;
        }

        .proximo {
        right: 20px;
        bottom: 80px;
        }
        .titulo-img {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        display: block;
        }
        #textoPrincipal{
            font-family: 'Aglet Sans', sans-serif;
            font-weight: 700;
            color: #FFF;
            text-transform: uppercase;
            font-size: 15px;
            line-height: 20px;
        }
        #subtitulo{
        font-family: 'Aglet Sans', sans-serif;
        font-weight: 700;
        color: #ffd711;
        text-transform: uppercase;
        padding: 10px 0;
        margin: 0px;
        }

        #exemplos {
        font-family: 'Aglet Sans', sans-serif;
        font-weight: 400;
        color: #ffd711;
        text-transform: uppercase;
        font-size: 13px;
        padding-top: 10px;
        }


        /*TESTE CAROSSEL*/

        .carousel-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            pointer-events: none; /* evita conflito com outras camadas */
        }

        .arrow {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 2rem;
            padding: 0.5rem 1rem;
            cursor: pointer;
            pointer-events: all; /* reabilita clique */
            border-radius: 4px;
            user-select: none;
        }

        /* QUIZ */

        .conteudo-tiporockeiro {
            position: absolute;
            top: 315px;
            left: 50px;
            right: 50px;
            font-family: 'Aglet Sans', sans-serif;
            text-align: center;            
        }

.conteudo-tiporockeiro h2{padding-bottom: 10px;color: #080808;    max-width: 300px;
    text-align: center;
    margin: 0 auto;
    font-size: 18px;text-transform: uppercase;}

.resposta {
  color: #ffd811;
  margin: 10px auto;
  padding: 5px 20px;
  width: fit-content;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
  font-weight: 700;
  max-width: 300px;
  font-size: 13px;
  text-transform: uppercase;
   align-items: center;
justify-content: center;
gap: 10px;
display: flex;
}

.resposta img{max-width: 40px;}

.resposta:hover {
  transform: scale(1.05);  
}

.respostaA {background: url(images/bt-a.png); background-size: cover; background-position: left center;width: 100%;}
.respostaB {background: url(images/bt-b.png); background-size: cover; background-position: left center;width: 100%;}
.respostaC {background: url(images/bt-c.png); background-size: cover; background-position: left center;width: 100%;}
.respostaD {background: url(images/bt-d.png); background-size: cover; background-position: left center;width: 100%;}
.respostaE {background: url(images/bt-e.png); background-size: cover; background-position: left center;width: 100%;}


.botao-reiniciar {
  margin-top: 30px;
  color: #ffd30f;
  font-weight: bold;
  cursor: pointer;
}

.fade {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.fade.show {
  opacity: 1;
}
.botao-compartilhar {
  margin-top: 20px;
  background: #25D366;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.botao-compartilhar:hover {
  background: #1da851;
}

.carousel {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.carousel-slide {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.carousel-slide.ativo {
    display: block;
}

.carousel-title {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 30px;
}

.carousel-items {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.item {
    width: 220px;
    padding: 10px;
}

.poster {
    width: 100%;
    border-radius: 8px;
}

.item-title {
    margin-top: 10px;
    font-size: 20px;
    color: #0d0d0d;
    font-family: 'Aglet Sans';
    font-weight: 700;
    text-transform: uppercase;
    background: url('images/bg-title-cultura.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
    padding: 10px 10px;
}

.item-desc {
    font-size: 11px;
    color: #0d0d0d;
    background-color: #f4d21f;
    margin-top: 5px;
    font-family: 'Aglet Sans';
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 15px;
}

.carousel-bullets {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.bullet {
    width: 35px;
    height: 35px;
    background: url('images/star-bullet.png') no-repeat center center;
    background-size: contain;
    cursor: pointer;
    transition: opacity 0.3s;
}

.bullet.ativo {
    width: 40px;
    height: 40px;
    background: url('images/star-bullet-active.png') no-repeat center center;
    background-size: contain;
    cursor: pointer;
    transition: opacity 0.3s;
}

/* Animação opcional */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.titleMontesuamixtape{width: 40%;}

.imgMontesuamixtape{width: 100%; max-width: 600px;}

.imgMontesuamixtape-mobile{display: none;}

        @media (min-width: 1725px) {
        /* estilos para desktop */
        }
        
        @media (min-width: 768px) and (max-width: 1724px) {
        /* estilos para tablets ou notebooks menores */
            .conteudo-tiporockeiro{top: 245px;}

            .conteudo-cultura{top: 200px;}
        }

        @media (max-width: 767px) {
            .banner{display: none;}
            .banner-mobile{width: 100%; display: block;}
            .subbanner{display: none;}
            .subbanner-mobile{display: block;width: 100%;margin-top: -20px;}
            .vibe_tipo{display: block;padding: 10% 2% 17% 2%;background-repeat: repeat; background-position: top left;}
            .qualsuavibe {width: 100%;margin-bottom: 50px;}
            #subtitulo{font-size: 18px;}
            .radio-container{max-width: 800px;}
            #textoPrincipal{font-size: 13px;line-height: 17px;}
            #exemplos{font-size: 12px;}
            
            .anterior{bottom: 60px;}
            .proximo{bottom: 60px;}

            .quetiporockeiro {width: 100%;}

            .conteudo-tiporockeiro{top: 170px;}

            .conteudo-tiporockeiro h2{max-width: 180px;font-size: 11px;padding-bottom: 0px;}

            .resposta{padding: 4px 20px; font-size: 10px; max-width: 200px;}

            .resposta img{max-width: 30px;}

            .montesuamixtape{width: 100%;margin-top: -15%;}

            .montesuamixtape-fundo{display: none;}

            .montesuamixtape-fundo-mobile{display: block;width: 100%;}

            .imgMontesuamixtape{display: none;}

            .imgMontesuamixtape-mobile{width: 50%; max-width: 500px; display: block;}

            .conteudo-montesuamixtape{top: 25px; right: 0px;display: block;}

            .descricaoMontesuamixtape{ width: 50%; position: relative;padding: 15% 0 10% 0; left: 0%;}

            .imgMontesuamixtape{width: 50%;max-width: 100%;height: fit-content;}

            .cultura{width: 100%; margin-top: -17%;}

            .titleMontesuamixtape{width: 100%;display: flex; align-items: center;}

            .conteudo-cultura{width: 100%;top: 300px;}

            .cultura-fundo{display: none;}

            .cultura-fundo-mobile {width: 100%;display: block; }

            footer{margin-top: -80px;}

            .footer-fundo{display: none;}

            .footer-fundo-mobile{display: block;width: 100%;}

            .conteudo-footer{top: 5%;}

            .radio-setas div{margin: 0px;}

            .radio-fundo{display: none;}

            .radio-fundo-mobile{display: block;width: 100%;max-width: 510px;}

        }