/* ======================================
FONTES
====================================== */

@font-face {
    font-family: 'GothamBook';
    src: url('https://vocenadiatv2.diaestudio.com/fonts/Gotham-Book.otf') format('opentype');
}

@font-face {
    font-family: 'GothamMedium';
    src: url('https://vocenadiatv2.diaestudio.com/fonts/Gotham-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'GothamBold';
    src: url('https://vocenadiatv2.diaestudio.com/fonts/Gotham-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'GothamUltra';
    src: url('https://vocenadiatv2.diaestudio.com/fonts/Gotham-Ultra.otf') format('opentype');
}

/* ======================================
BASE
====================================== */

html,body{
    margin:0;
    padding:0;
}

*{
    box-sizing:border-box;
}

body{

    background:
    url('https://vocenadiatv2.diaestudio.com/img/bg.png')
    no-repeat top center,
    #00022e;

    background-size:cover;

    color:white;

    font-family:'GothamBook',Arial,sans-serif;

}


/* ======================================
CONTAINER
====================================== */

.votacao-container{

    width:min(94vw,760px);

    margin:auto;

    padding:30px 0 60px;

}


/* ======================================
TOPO
====================================== */

.topo-votacao{

    text-align:center;

    margin-bottom:64px;

}

.logo-votacao{

    width:min(100%,480px);

    display:block;

    margin:0 auto 30px;

}


/* TITULO */

.titulo-votacao{

    margin:0 0 26px;

    line-height:1;

}

.linha-titulo{

    display:block;

}

.linha-1{

    font-family:'GothamBold';

    font-size:32px;

    letter-spacing:-1px;

    margin-bottom:10px;

}

.titulo-votacao .linha-2{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:nowrap;
}


/* HIGHLIGHT */

.highlight-titulo{

    background:#4f8cff;

    padding:6px 12px;

    border-radius:6px;

    font-family:'GothamUltra';

    font-size:28px;

    color:#10143b;

}


/* SUFIXO */

.sufixo-titulo{

    font-family:'GothamBold';

    font-size:30px;

    letter-spacing:-1px;

}


/* SUBTITULO */

.subtitulo{

    max-width:480px;

    margin:auto;

    font-size:16px;

    line-height:1.4;

    text-align:center;

}


/* ======================================
PARTICIPANTES
====================================== */

.participantes{

    max-width:640px;

    margin:auto;

}

.participante{

    display:grid;

    grid-template-columns:110px 1fr;

    column-gap:22px;

    align-items:center;

    margin-bottom:32px;

}

.participante-foto{

    width:140px;

}


/* ======================================
NOTAS
====================================== */

.notas{

    display:grid;

    grid-template-columns:repeat(10,1fr);

    gap:10px;

    text-align:center;

}

.nota-item{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.nota-item span{

    font-family:'GothamMedium';

    font-size:20px;

    margin-bottom:8px;

}

.nota-item input{

    width:18px;

    height:18px;

    cursor:pointer;

    accent-color:#1a2a63;

}


/* ======================================
FORMULARIO
====================================== */

.dados-votante{

    width:min(100%,520px);

    margin:60px auto 0;

    background:#1a0054;

    border-radius:22px;

    padding:26px 28px 24px;

}

.campo{

    display:flex;

    flex-direction:column;

}

.campo label{

    font-family:'GothamMedium';

    font-size:16px;

    margin-bottom:10px;

}

.dados-votante input{

    width:100%;

    height:44px;

    padding:8px 14px;

    border:none;

    border-radius:10px;

    background:#d9d9d9;

    font-family:'GothamBook';

    font-size:15px;

    color:#1a1a1a;

}

.linha{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:8px;

}

.aviso{

    text-align:center;

    margin-top:20px;

    font-family:'GothamMedium';

    font-size:15px;

}


/* ======================================
BOTAO
====================================== */

.submit-area{

    text-align:center;

    margin-top:40px;

}

.btn-votar{

    width:170px;

    cursor:pointer;

}

.btn-votar:hover{

    opacity:.9;

}

.btn-votar:active{

    transform:scale(.98);

}


/* ======================================
ERROS
====================================== */

.form-erros{

    background:#ffe3e3;

    border:1px solid #ffb3b3;

    border-left:4px solid #d62828;

    border-radius:8px;

    padding:14px 18px;

    margin:20px auto;

    max-width:520px;

    color:#7a1c1c;

    font-size:14px;

}

.input-erro{

    border:2px solid #d62828 !important;

    background:#fff5f5;

}


/* ======================================
RESPONSIVO
====================================== */

@media(max-width:768px){

.logo-votacao{

    width:300px;

}

.linha-1{

    font-size:26px;

}

.highlight-titulo{

    font-size:22px;

}

.sufixo-titulo{

    font-size:24px;

}

.subtitulo{

    font-size:14px;

}

.participante{

    grid-template-columns:90px 1fr;

}

.participante-foto{

    width:80px;

}

.nota-item span{

    font-size:16px;

}

}

@media (max-width: 620px){
    .titulo-votacao .linha-2{
        display:block;
    }

    .titulo-votacao .highlight-titulo{
        display:inline-block;
        margin:0 auto 6px;
    }

    .titulo-votacao .sufixo-titulo{
        display:block;
    }
}

@media(max-width:520px){

    .linha{
        grid-template-columns:1fr;
    }

    .votacao-container{
        width:min(95vw, 480px);
        padding-top:20px;
        padding-bottom:44px;
    }

    .topo-votacao{
        margin-bottom:34px;
    }

    .logo-votacao{
        width:240px;
        margin:0 auto 18px;
    }

    .titulo-votacao{
        margin:0 0 18px;
    }

    .linha-1{
        font-size:18px;
        line-height:1.08;
        letter-spacing:-0.2px;
        margin-bottom:6px;
    }

    .titulo-votacao .linha-2{
        display:block;
    }

    .highlight-titulo{
        display:inline-block;
        font-size:17px;
        padding:4px 8px 4px;
        border-radius:4px;
        margin:0 auto 6px;
    }

    .sufixo-titulo{
        display:block;
        font-size:18px;
        line-height:1.05;
        letter-spacing:-0.2px;
    }

    .subtitulo{
        max-width:330px;
        font-size:12px;
        line-height:1.34;
    }

    .participante{
        grid-template-columns:78px 1fr;
        column-gap:10px;
        margin-bottom:22px;
    }

    .participante-foto{
        width:68px;
    }

    .notas{
        grid-template-columns:repeat(10, minmax(14px, 1fr));
        gap:4px;
    }

    .nota-item span{
        font-size:11px;
        margin-bottom:4px;
    }

    .nota-item input{
        width:15px;
        height:15px;
    }

    .dados-votante{
        margin-top:30px;
        padding:16px 14px 14px;
        border-radius:16px;
    }

    .campo label{
        margin-bottom:7px;
        font-size:12px;
    }

    .dados-votante input{
        height:40px;
        padding:8px 12px;
        font-size:14px;
    }

    .aviso{
        margin-top:12px;
        font-size:11px;
    }

    .submit-area{
        margin-top:26px;
    }

    .btn-votar{
        width:156px;
    }
}

/* FIX ERRO VAZIO */

.form-erros {
    display: none;
}

.form-erros.ativo {
    display: block;
}

.form-erros:empty {
    display: none;
}

.btn-votar:disabled {
    pointer-events: none;
}