@media (max-width: 991px) {
    #secao-seguindo-mobile .seguindo-header {
        margin-left: 8px !important;
        margin-right: 0 !important;
        width: 95vw !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
}
@media (max-width: 991px) {
    #secao-seguindo,
    .seguindo-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
    }
}
.music-modal-content {
    border-radius: 14px;
}

.music-input {
    border-radius: 10px;
    padding: 10px;
}

















.up-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.6);

    display: none;

    align-items: center;
    justify-content: center;

    z-index: 9999999999;
}

.up-box {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    width: 300px;
    text-align: center;

    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.up-text {
    margin-bottom: 20px;
    font-size: 16px;
}

.up-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.up-confirm {
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}

.up-cancel {
    background: #ccc;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}























.top-icons{
  display:flex;
  align-items:center;
  gap:10px; /* espaço entre sino e engrenagem */
}



.user-link{
color:#8B8989;
font-weight:600;
text-decoration:none;
padding:3px 6px;
border-radius:8px;
background:rgba(139, 137, 137,0.15);
transition:all .2s ease;
}

.user-link:hover{
background:rgba(139, 137, 137,0.25);
color:#8B8989;
transform:translateY(-1px);
}




/* Modal mais organizado */
#modalEditarPerfil .modal-content {
    border-radius: 12px;
    padding: 10px;
}

/* Labels */
#modalEditarPerfil label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

/* Inputs e textarea */
#modalEditarPerfil .form-control {
    height: 42px;
    font-size: 14px;
    border-radius: 8px;
}

/* Textarea maior */
#modalEditarPerfil textarea.form-control {
    height: 80px;
    resize: none;
}

/* Espaçamento entre blocos */
#modalEditarPerfil .mb-3 {
    margin-bottom: 14px !important;
}

/* Botão */
#modalEditarPerfil .btn-primary {
    height: 45px;
    border-radius: 8px;
    font-weight: 600;
}












.patrocinador{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:30px; /* espaço embaixo */
}

.patrocinador-logo{
    height:3.0em;
    width:auto;

}

.patrocinador-titulo{
    font-size:15px;
    font-weight:700;
    letter-spacing:0.5px;
	color:rgba(0,0,0,0.5); /* cinza 50% */
    margin-top:15px; /* desce apenas o texto */
}



/* MOBILE */
.patrocinador-m{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
	margin-top:30px;
    margin-bottom:10px; /* espaço embaixo */
}

.patrocinador-logo-m{
    height:3.0em;
    width:auto;

}

.patrocinador-titulo-m{
    font-size:15px;
    font-weight:700;
    letter-spacing:0.5px;
	color:rgba(0,0,0,0.5); /* cinza 50% */
    margin-top:15px; /* desce apenas o texto */
}









/* fundo escuro */

.modal-redes{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

/* caixa do modal */

.modal-redes-box{
width:400px;
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.25);
animation:modalFade 0.3s ease;
}

/* header */

.modal-redes-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
border-bottom:1px solid #eee;
font-weight:600;
font-size:18px;
}

.modal-redes-header button{
background:none;
border:none;
font-size:20px;
cursor:pointer;
}

/* body */

.modal-redes-body{
padding:20px;
display:flex;
flex-direction:column;
gap:15px;
}

/* item rede */

.rede-item{
display:flex;
align-items:center;
gap:10px;
font-size:16px;
cursor:pointer;
}

.rede-item input{
transform:scale(1.2);
cursor:pointer;
}

/* ícones */

.rede-item i{
font-size:20px;
width:24px;
}

/* cores redes */

.fa-instagram{color:#e1306c;}
.fa-youtube{color:#ff0000;}
.fa-tiktok{color:#000;}
.fa-telegram{color:#2aabee;}

/* footer */

.modal-redes-footer{
margin-top:20px;
display:flex;
justify-content:flex-end;
padding-top:15px;
border-top:1px solid #eee;
}

/* botão salvar */

.btn-salvar-redes{
background:#28a745;
color:#fff;
border:none;
padding:12px 24px;
border-radius:8px;
cursor:pointer;
font-weight:600;
transition:0.2s;
font-size:15px;
}

.btn-salvar-redes:hover{
background:#218838;
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(40,167,69,0.3);
}

/* modal grande para redes */

.modal-redes-grande{
width:480px;
}

.modal-redes-scroll{
max-height:520px;
overflow-y:auto;
}

/* grupos de formulário para redes */

.rede-form-group{
border:1.5px solid #f0f0f0;
border-radius:10px;
padding:16px;
margin-bottom:14px;
background:#fafafa;
transition:0.2s;
}

.rede-form-group:hover{
border-color:#e0e0e0;
background:#f8f8f8;
}

.rede-form-header{
display:flex;
align-items:center;
gap:10px;
margin-bottom:12px;
font-weight:600;
font-size:15px;
}

.rede-form-header i{
font-size:20px;
}

.checkbox-container{
position:relative;
margin-left:auto;
cursor:pointer;
}

.checkbox-container input{
position:absolute;
opacity:0;
cursor:pointer;
}

.checkmark{
display:inline-block;
width:20px;
height:20px;
border:2px solid #ddd;
border-radius:4px;
background:#fff;
transition:0.2s;
}

.checkbox-container input:checked ~ .checkmark{
background:#28a745;
border-color:#28a745;
}

.checkmark::after{
content:'✓';
position:absolute;
color:#fff;
font-size:14px;
font-weight:bold;
display:none;
left:3px;
top:-1px;
}

.checkbox-container input:checked ~ .checkmark::after{
display:block;
}

/* campos de entrada */

.rede-input{
width:100%;
padding:10px 12px;
border:1.5px solid #ddd;
border-radius:6px;
font-size:14px;
margin-bottom:10px;
font-family:'Montserrat', sans-serif;
box-sizing:border-box;
transition:0.2s;
}

.rede-input:focus{
outline:none;
border-color:#28a745;
background:#fff;
box-shadow:0 0 0 3px rgba(40,167,69,0.1);
}

.rede-input-group{
display:flex;
align-items:center;
gap:8px;
}

.rede-input-group label{
font-size:13px;
font-weight:600;
color:#666;
white-space:nowrap;
}

.rede-input-followers{
width:100px;
padding:8px 10px;
border:1.5px solid #ddd;
border-radius:6px;
font-size:13px;
font-family:'Montserrat', sans-serif;
box-sizing:border-box;
transition:0.2s;
}

.rede-input-followers:focus{
outline:none;
border-color:#28a745;
box-shadow:0 0 0 3px rgba(40,167,69,0.1);
}

/* animação */

@keyframes modalFade{
from{
opacity:0;
transform:scale(0.9);
}
to{
opacity:1;
transform:scale(1);
}
}
























.color-picker-perfil{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.color-option{

width:45px;
height:45px;

border-radius:50%;

cursor:pointer;

position:relative;

transition:0.2s;

box-shadow:0 4px 8px rgba(0,0,0,0.15);

background-size:cover;
background-position:center;

}

.color-option:hover{
transform:scale(1.1);
}

/* selecionado */

.color-option.active{
outline:2px dotted #555;
outline-offset:6px;
}

/* check fora */

.color-option.active::after{

content:"\f00c";
font-family:"Font Awesome 6 Free";
font-weight:900;

position:absolute;

top:-8px;
right:-8px;

width:20px;
height:20px;

background:#0d6efd;
color:white;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:12px;
font-weight:bold;

box-shadow:0 3px 6px rgba(0,0,0,0.3);

}
















/* dropdown principal */

.gear-dropdown{
background:#fff;
border-radius:12px;
box-shadow:0 12px 30px rgba(0,0,0,0.15);
padding:8px 0;
min-width:230px;
}

/* remover bolinhas caso tenha li */

.gear-dropdown li{
list-style:none;
}

/* links */

.gear-dropdown a{
display:flex;
align-items:center;
gap:10px;
padding:10px 16px;
text-decoration:none;
color:#333;
font-size:14px;
transition:all .2s ease;
}

/* hover */

.gear-dropdown a:hover{
background:#f5f5f5;
padding-left:20px;
}

/* separador */

.gear-dropdown hr{
margin:8px 0;
border:none;
border-top:1px solid #eee;
}



.submenu{
max-height:0;
overflow:hidden;
padding-left:40px;
transition:max-height .25s ease;
}

.submenu.show{
max-height:200px;
}

.submenu a{
font-size:13px;
opacity:.85;
padding:6px 0;
}

.pref-arrow{
margin-left:auto;
transition:transform .25s ease;
}

.pref-arrow.rotate{
transform:rotate(180deg);
}











.interesses-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:10px;
}

.interesse-item{
display:flex;
align-items:center;
gap:10px;
padding:10px;
border:1px solid #ddd;
border-radius:10px;
cursor:pointer;
}

.interesse-item:hover{
background:#f5f5f5;
}











            .sec-title {
                font-size: 0.88rem;
                font-weight: 800;
                color: #7A7594;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin-bottom: 8px;
            }

            .about-txt {
                font-size: 0.95rem;
                line-height: 1.65;
                color: #4D4768;
                font-weight: 500;
                margin-bottom: 25px;
            }

            /* Tags / Interesses / Social */
            .tags-3 {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 12px;
                margin-bottom: 14px;
            }

            .tag-pill {
                background: rgba(255, 255, 255, 0.55);
                border: 1.5px solid rgba(255, 255, 255, 0.85);
                border-radius: 14px;
                padding: 10px 14px;
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 0.82rem;
                font-weight: 600;
                color: #4D4768;
                min-width: 0;
                transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            }

            .tag-pill i {
                font-size: 1.25rem;
            }

            .tag-pill b {
                font-weight: 800;
                color: #2E2652;
            }

            .tag-pill .sub {
                font-weight: 500;
                color: #908AAB;
                margin-left: auto;
                font-size: 0.8rem;
            }

            /* Efeito hover suave apenas para cards COM link - DESKTOP */
            @media (min-width: 992px) {
                .tag-pill-clickable {
                    cursor: pointer;
                }

                .tag-pill-clickable:hover {
                    transform: translateY(-6px) scale(1.02);
                    box-shadow: 0 12px 24px rgba(46, 38, 82, 0.12);
                    background: rgba(255, 255, 255, 0.75);
                    border-color: rgba(255, 255, 255, 0.95);
                }
            }

            /* ---- FOOTER ---- */
            .sponsor-bar {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 14px;
                padding: 22px 45px;
                border-top: 1.5px solid rgba(255, 255, 255, 0.45);
                color: #7A7594;
                font-weight: 600;
                font-size: 0.95rem;
            }

            .sponsor-brand {
                font-size: 1.8rem;
                font-weight: 800;
                color: #1D1F55;
                display: flex;
                align-items: center;
                gap: 8px;
                letter-spacing: -1px;
            }

            .sponsor-brand i {
                color: #0072B1;
                font-size: 2rem;
            }

            .sponsor-tagline {
                font-weight: 500;
                color: #908AAB;
                font-size: 0.88rem;
                margin-left: 4px;
            }
			
			.about-box {
				background: rgba(255, 255, 255, 0.55);
				border: 1.5px solid rgba(255, 255, 255, 0.9);
				border-radius: 22px;
				padding: 22px 25px;
				margin-bottom: 25px;
				box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
			}
			
        }














            .vote-label {
                font-size: 0.72rem;
                font-weight: 700;
                color: #8F8AA1;
                text-transform: uppercase;
                letter-spacing: 1px;
                margin-bottom: 10px;
                margin-top: 2px;
            }









            .btn-vote {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    background: linear-gradient(90deg, #6B5DF5, #8E82F8);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;

    box-shadow: 0 6px 18px rgba(107, 93, 245, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-vote:hover {
    transform: scale(1.05);
}

.btn-vote:active {
    transform: translateY(3px) scale(0.95);
    box-shadow: 0 3px 8px rgba(107, 93, 245, 0.3);
}

.btn-vote .spinner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.4);
    border-top: 3px solid #fff;
    border-radius: 50%;
    animation: spinDesktop 0.7s linear infinite;
    display: none;
}

@keyframes spinDesktop {
    to { transform: rotate(360deg); }
}

.btn-vote.loading .btn-text {
    opacity: 0;
}

.btn-vote.loading .spinner {
    display: block;
}


















            .vote-rank {
                font-size: 0.78rem;
                font-weight: 700;
                color: #A09BB5;
                letter-spacing: 0.5px;
				margin-top: 12px; /* desce o texto */
            }













        /* Cores de ícones */
        .ci-insta {
            color: #E1306C;
        }

        .ci-yt {
            color: #FF0000;
        }

        .ci-tele {
            color: #2AABEE;
        }

        .ci-tiktok {
            color: #010101;
        }

        .ci-tool {
            color: #5C67C5;
        }

        .ci-gear {
            color: #2A9DD8;
        }

        .ci-shield {
            color: #3A5080;
        }

        .ci-vid {
            color: #3A5080;
        }

        .ci-clap {
            color: #4A506E;
        }

        /* ================================================================
           DESKTOP (min-width: 992px)
           ================================================================ */
        @media (min-width: 992px) {
            .mobile-section {
                display: none !important;
            }

            /* Background da equipe atrás do card */
            .hero-bg {
                width: 100%;
                height: 440px;
                object-fit: cover;
                object-position: center 25%;
                position: absolute;
                top: 0;
                left: 0;
                mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
                -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
            }

            /* Glass card principal */
            .main-card {
                position: relative;
                z-index: 2;
                max-width: 1050px;
                margin: 100px auto 50px;
                background: rgba(255, 255, 255, 0.38);
                backdrop-filter: blur(24px);
                -webkit-backdrop-filter: blur(24px);
                border: 2px solid rgba(255, 255, 255, 0.6);
                border-radius: 35px;
                padding: 0;
                box-shadow: 0 20px 60px rgba(80, 60, 140, 0.06);
                overflow: visible;
            }

            /* Inner wrapper para padding sem afetar posicionamento absoluto */
            .card-inner {
                padding: 40px 45px 25px;
            }









            /* ---- VOLTAR ---- */
 .btn-back {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 8px;

    background: #6558F5;
    color: #fff;
    border-radius: 30px;
    padding: 10px 26px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;

    box-shadow: 0 6px 20px rgba(101, 88, 245, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;

    position: fixed;
    overflow: hidden;
}

.btn-back:hover {
    transform: translateX(-3px);
}

.btn-back:active {
    transform: translateY(3px) scale(0.96);
    box-shadow: 0 3px 8px rgba(101, 88, 245, 0.3);
}

/* SPINNER CENTRAL */
.btn-back .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,0.4);
    border-top: 3px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: spinBackDesktop 0.7s linear infinite;
    display: none;
}

@keyframes spinBackDesktop {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* QUANDO ESTIVER CARREGANDO */
.btn-back.loading .btn-text {
    visibility: hidden;
}

.btn-back.loading .spinner {
    display: block;
}










/* REDES SOCIAIS - CARDS CLIC�VEIS */

.tag-pill-clickable {
    transition: all 0.2s ease;
}

.tag-pill-clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(40, 167, 69, 0.25);
}

.m-social-card-clickable {
    transition: all 0.2s ease;
}

.m-social-card-clickable:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}




/* ================================================================
   .m-social-card-clickable {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
}

@media (min-width: 992px) {
    .m-social-card-clickable:hover {
        transform: translateY(-8px) scale(1.08);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
    }
}

@media (max-width: 991px) {
    .m-social-card-clickable:active {
        transform: scale(1.08);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }
}