p {
    text-align: justify;
}

/* Background do Botão da página que está aberta */
#inicio {
    background-color: var(--CorPrincipalClara);
}

/* Fazer a parte azul do meio do início */

.Wrapper {
    background-color: var(--CorPrincipal);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    height: 100%;
    padding: 0;
}

.hero {
    color: var(--CorBranco);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.section-2 {
    background-color: var(--CorCinzaClaro);
}

h1 {
    width: 100%;
}

#Comecar {
    width: 100%;
    height: 65.01px;
}

#verDenuncias {
    width: 100%;
    height: 65.01px;
}

.centralizar {
    display: flex;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

.btn {
    font-size: 1.2rem;
}

.btn-primary {
    height: 4rem;
    width: 100%;
}

#Comecar {
    color: var(--CorPrincipal);
}

#verDenuncias {
    border: 2px solid white;
    background-color: var(--CorPrincipalClara);
}

#verDenuncias:hover {
    background-color: var(--CorBranco);
}

/* 1a Seção */
/* -------- */

/* Definições gerais da 1a seção */

.resumo-plataforma {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    min-width: 100%;
}

.resumo__ponto {
    width: 100%;
    max-width: calc(50% - 1rem);
}

.ponto__icone {
    width: fit-content;
    border-radius: 100%;
    margin: 1rem auto;
    width: 4rem;
    height: 4rem;
}

.ponto__icone img {
    width: 3rem;
}

.resumo__ponto {
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Definições específicas de cada ponto */

/* Ponto 1 */
.ponto-1__icone {
    background-color: var(--BordaAzulClara);
}

/* Para transformar uma cor HEX em filter do CSS acesse esse site: */
/* https://angel-rs.github.io/css-color-filter-generator/ */
.ponto-1__icone img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(30%) saturate(5772%) hue-rotate(218deg) brightness(97%) contrast(94%);
}

.resumo__ponto-1 {
    background-color: var(--FundoAzulClaro);
    color: var(--DetalheAzul);
}

.resumo__ponto-1 p {
    color: var(--DetalheAzul);
}

/* Ponto 2 */
.ponto-2__icone {
    background-color: var(--BordaVerdeClara);
}

.ponto-2__icone img {
    filter: brightness(0) saturate(100%) invert(22%) sepia(8%) saturate(6370%) hue-rotate(103deg) brightness(98%) contrast(90%);
}

.resumo__ponto-2 {
    background-color: var(--FundoVerdeClara);
    color: var(--DetalheVerde);
}

.resumo__ponto-2 p {
    color: var(--DetalheVerde);
}

/* Ponto 3 */
.ponto-3__icone {
    background-color: var(--BordaLaranja);
}

.ponto-3__icone img {
    filter: brightness(0) saturate(100%) invert(86%) sepia(32%) saturate(315%) hue-rotate(323deg) brightness(105%) contrast(104%);
}

.resumo__ponto-3 {
    background-color: var(--FundoLaranja);
    color: var(--DetalheLaranja);
}

.resumo__ponto-3 p {
    color: var(--DetalheLaranja);
}

/* Ponto 4 */
.ponto-4__icone {
    background-color: var(--BordaRoxo);
}

.ponto-4__icone img {
    filter: brightness(0) saturate(100%) invert(80%) sepia(13%) saturate(433%) hue-rotate(207deg) brightness(117%) contrast(103%);
}

.resumo__ponto-4 {
    background-color: var(--FundoRoxo);
    color: var(--DetalheCinza);
}

.resumo__ponto-4 p {
    color: var(--DetalheCinza);
}

/* List items */
li {
    color: var(--CorCinzaEscura);
}

/* Mobile */
@media (max-width: 900px) {
    .centralizar {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        font-size: 1rem;
    }

    .resumo-plataforma {
        flex-direction: column;
    }

    .resumo__ponto {
        max-width: 100%;
    }
}