/* ======================================================
   RESET
====================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f4f4;
    color:#333;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* ======================================================
   HEADER
====================================================== */

header{
    width:100%;
    height:55px;
    background:#05013a;
    color:white;

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

    padding:0 20px;

    box-shadow:0 3px 10px rgba(0,0,0,.12);
}

header .btn{

    width:42px;
    height:42px;

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

    padding:0;
    margin:0;

    border:none;
    background:transparent;

    color:#fff;

    font-size:28px;
    line-height:42px;

    cursor:pointer;

}

/*
header .btn:hover{
    opacity:.75;
}
*/

/* ======================================================
   ÁREA CENTRAL
====================================================== */

main{
    flex:1;

    width:100%;
    max-width:700px;   /* largura máxima do main */

    margin:0 auto;     /* centraliza horizontalmente */

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;

    /*padding: 20px 0px 0px 0px;*/

    background-color: white;
    
}

.sobre{ 
    padding:40px 60px; /*padding:40px 36px;*/

} 

.sobre h2{ 
    font-size:22px; 
    margin-bottom:20px; 
}

/* LOGOMARCA*/
      
    body >main > h1{

        margin:20px 0px 0px 0px; /*margin:25px 0;*/

        padding:0;

        text-align:center;

    }

    body > main > h1 > figure{

        margin:0;

    }

    body > main > h1 > figure > img{

        width:100px;

        display:block;

        margin:0 auto 4px; /*margin:0 auto 8px;*/

    }

    h1 > figure > p{

        font-family:Arial, Helvetica, sans-serif; /*font-family:Georgia, serif;*/

        font-size: 15px;

        color:#3b3555;

    }

@media (max-width:480px){

    body > h1{

        margin:20px 0px 0px 0px;

    }

    body > main > h1 > figure > img{

        width:90px;

    }
}

/* ======================================================
TEXTO
====================================================== */

.sobre-texto{

font-family:Georgia, 'Times New Roman', Times, serif;

color:#3b3555;

font-size:18px;

line-height:1.7;

padding-bottom: 30px;

}

.sobre-texto p{

margin:0 0 20px 0;

}

.sobre-texto strong{

font-weight:bold;

color:#05013a;

}

/* ======================================================
ESTATÍSTICA
====================================================== */

.estatistica{

width:100%;

margin:30px auto 0 auto;

padding:22px 25px;

background:#efe6f6;

border-radius:20px;

text-align:center;

box-shadow:0 5px 15px rgba(0,0,0,.06);

}

.estatistica p{

margin:0;

font-family:Georgia, 'Times New Roman', Times, serif;

font-size:19px;

line-height:1.7;

color:#3b3555;

}

.estatistica strong{

color:#05013a;

font-weight:bold;

}

/* ======================================================
NÚMEROS
====================================================== */

.numero{

font-family:Arial, Helvetica, sans-serif;

font-size:21px;

font-weight:bold;

color:#05013a;

white-space:nowrap;

}

/* ======================================================
RODAPÉ DO CONTEÚDO
====================================================== */

.sobre-final{

margin-top:30px;

text-align:center;

font-family:Georgia, 'Times New Roman', Times, serif;

font-size:17px;

line-height:1.6;

color:#555;

padding-bottom: 60px;

}

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

@media (max-width:768px){

main{

    padding:0px 0 40px 0;

}


.sobre{

    padding:40px 45px;

}


.sobre h2{

    font-size:24px;

}


.sobre-texto{

    font-size:17px;

}


.estatistica p{

    font-size:18px;

}

}

@media (max-width:480px){

header{

    padding:0 15px;

    
}


main{

    padding:0px 0 35px 0;

}


.sobre{

    padding:40px 36px;

}


.sobre h2{

    font-size:22px;

    margin-bottom:20px;

}


.sobre-texto{

    font-size:16px;

    line-height:1.6;

}


.estatistica{

    padding:20px 16px;

    border-radius:15px;

}


.estatistica p{

    font-size:16px;

    line-height:1.6;

}


.numero{

    font-size:18px;

}


.sobre-final{

    font-size:15px;

    margin-top:25px;

}

}

/* ======================================================
   O QUE ENCONTRAR EM CADA CATEGORIA
====================================================== */

.categorias-info{
    width:100%;
    max-width:900px;
    margin:30px auto;
}


/* BOTÃO PRINCIPAL */

.categorias-info-titulo{
    width:100%;
    padding:16px 20px;

    border:1px solid #ddd;
    border-radius:8px;

    background:#fff;
    color:#333;

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

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

    cursor:pointer;
}


/* SETA PRINCIPAL */

.categorias-info-seta{
    transition:transform .2s ease;
}

.categorias-info-titulo.aberto
.categorias-info-seta{
    transform:rotate(180deg);
}


/* CONTEÚDO PRINCIPAL */

.categorias-info-conteudo{
    margin-top:10px;
}


/* CADA CATEGORIA */

.categoria-explicacao{
    margin-bottom:8px;
}


/* TÍTULO DA CATEGORIA */

.categoria-explicacao-titulo{
    width:100%;

    padding:13px 16px;

    border:1px solid #ddd;
    border-radius:7px;

    background:#f8f8f8;
    color:#333;

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

    text-align:left;

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

    cursor:pointer;
}


/* CONTEÚDO DA CATEGORIA */

.categoria-explicacao-conteudo{
    padding:15px 18px;

    border-left:1px solid #ddd;
    border-right:1px solid #ddd;
    border-bottom:1px solid #ddd;

    background:#fff;

    line-height:1.6;
}


/* PARÁGRAFOS */

.categoria-explicacao-conteudo p{
    margin-bottom:10px;
}


/* LISTAS */

.categoria-explicacao-conteudo ul{
    margin:0 0 15px 20px;
    padding:0;
}

.categoria-explicacao-conteudo li{
    margin-bottom:3px;
}


/* SETA */

.categoria-explicacao-titulo span{
    transition:transform .2s ease;
}

.categoria-explicacao-titulo.aberto span{
    transform:rotate(180deg);
}

/* ======================================================
   COMO FUNCIONA A ORDEM DA LISTA
====================================================== */

.ordem-lista-info{
    width:100%;
    max-width:900px;
    margin:15px auto 30px;
}


/* BOTÃO */

.ordem-lista-titulo{
    width:100%;

    padding:16px 20px;

    border:1px solid #ddd;
    border-radius:8px;

    background:#fff;
    color:#333;

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

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

    cursor:pointer;
}


/* SETA */

.ordem-lista-seta{
    transition:transform .2s ease;
}

.ordem-lista-titulo.aberto
.ordem-lista-seta{
    transform:rotate(180deg);
}


/* CONTEÚDO */

.ordem-lista-conteudo{
    margin-top:8px;

    padding:18px 20px;

    border:1px solid #ddd;
    border-radius:8px;

    background:#fff;

    color:#333;

    font-size:15px;
    line-height:1.6;
}


/* PARÁGRAFOS */

.ordem-lista-conteudo p{
    margin:0 0 12px;
}

.ordem-lista-conteudo p:last-child{
    margin-bottom:0;
}

/* ======================================================
   COMO É CALCULADA A NOTA
====================================================== */

.nota-avaliacao-info{
    width:100%;
    max-width:900px;
    margin:15px auto 30px;
}


/* BOTÃO */

.nota-avaliacao-titulo{
    width:100%;

    padding:16px 20px;

    border:1px solid #ddd;
    border-radius:8px;

    background:#fff;
    color:#333;

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

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

    cursor:pointer;
}


/* SETA */

.nota-avaliacao-seta{
    transition:transform .2s ease;
}

.nota-avaliacao-titulo.aberto
.nota-avaliacao-seta{
    transform:rotate(180deg);
}


/* CONTEÚDO */

.nota-avaliacao-conteudo{
    margin-top:8px;

    padding:18px 20px;

    border:1px solid #ddd;
    border-radius:8px;

    background:#fff;

    color:#333;

    font-size:15px;
    line-height:1.6;
}


/* PARÁGRAFOS */

.nota-avaliacao-conteudo p{
    margin:0 0 12px;
}

.nota-avaliacao-conteudo p:last-child{
    margin-bottom:0;
}

/* ======================================================
   ESCALA DE AVALIAÇÃO
====================================================== */

.escala-avaliacao-info{
    width:100%;
    max-width:900px;
    margin:15px auto 30px;
}


/* BOTÃO */

.escala-avaliacao-titulo{
    width:100%;

    padding:16px 20px;

    border:1px solid #ddd;
    border-radius:8px;

    background:#fff;
    color:#333;

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

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

    cursor:pointer;
}


/* SETA */

.escala-avaliacao-seta{
    transition:transform .2s ease;
}

.escala-avaliacao-titulo.aberto
.escala-avaliacao-seta{
    transform:rotate(180deg);
}


/* CONTEÚDO */

.escala-avaliacao-conteudo{
    margin-top:8px;

    padding:18px 20px;

    border:1px solid #ddd;
    border-radius:8px;

    background:#fff;

    color:#333;

    font-size:15px;
    line-height:1.6;
}


/* TEXTO */

.escala-avaliacao-conteudo p{
    margin:0 0 15px;
}


/* CADA ITEM */

.escala-item{
    display:flex;
    align-items:center;

    gap:12px;

    margin:7px 0;
}


/* ESTRELAS */

.escala-item .estrelas{
    min-width:90px;

    letter-spacing:2px;

    font-size:18px;
}