@import url("../base/global.css");


/* WRAPPER PRINCIPAL */
.wrapper-seguranca-digital {
    width: 100%;
    display: flex;
    position: relative;
}


/* CONTEÚDO ESQUERDO */
.conteudo-seguranca {
    width: 50%;
    padding: 18px 0 40px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    z-index: 2;
}


/* TÍTULO */
.conteudo-seguranca h1 {
    font-size: 4rem;
    line-height: 1.15;
    letter-spacing: 5px;
    font-weight: 500;
    color: #050505;
    margin-bottom: 15px;
    /* margin-top: 20px; */
}


/* Linha roxa abaixo do título */
.linha-titulo {
    display: block;
    width: 70px;
    height: 4px;
    background-color: #673de6;
    border-radius: 10px;
    margin-bottom: 80px;
}


/* TEXTO */
.conteudo-seguranca  p {
    max-width: 570px;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 400;
    color: #464646;
    margin-bottom: 48px;
}


/* BENEFÍCIOS */
.beneficios {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 18px;
}

.beneficio {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.beneficio:not(:last-child)::after {
    content: "";
    width: 4px;
    height: 50px;
    background-color: #d6c9ff;
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
}

.icone-beneficio {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #e7ddff;
}

.icone-beneficio img {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.beneficio span {
    font-size: .8rem;
    line-height: 1.25;
    font-weight: 600;
    color: #222;
    max-width: 500px;
}


/* BOTÃO */
.btn-iniciar {
    width: 500px;
    height: 100px;
    border: none;
    margin: 40px 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #6040CE, #6942d5);
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 20px;
    font-size: 1.7rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(76, 48, 160, 0.4);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-iniciar:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(76, 48, 160, 0.4);
}


/* Círculo do play */
.icone-play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #6942d5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding-left: 2px;
}


/* ILUSTRAÇÃO */
.ilustracao-seguranca {
    width: 45%;
    aspect-ratio: 4 / 5;
    position: relative;
    display: block;
    margin-left: auto; 
    background-image: url("../../assets/img/img-seguranca/imgseguranca(2).png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
}


/* Escudo */
.imagem-seguranca {
    width: 350px;
    height: auto;
    object-fit: contain;
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}


/* BALÕES */
.aviso {
    position: absolute;
    z-index: 5;
}

.aviso img {
    display: block;
    width: 100%;
    height: auto;
}


/* Balão dos dados */
.aviso-dados {
    width: 250px;
    top: 38%;
    left: -8%;
}


/* Balão das mensagens */
.aviso-mensagens {
    width: 250px;
    top: 10%;
    left: 42%;
}


/* Balão dos sites */
.aviso-sites {
    width: 250px;
    bottom: 10%;
    left: 42%;
}


/* RESPONSIVIDADE */

@media (max-width: 1000px) {

    .card-seguranca {
        min-height: 600px;
    }

    .conteudo-seguranca {
        width: 55%;

        padding-left: 35px;
    }

    .conteudo-seguranca h1 {
        font-size: 42px;
    }

    .conteudo-seguranca > p {
        font-size: 18px;
    }

    .ilustracao-seguranca {
        width: 45%;
    }

    .imagem-seguranca {
        width: 175px;
    }

    .aviso-dados {
        left: 0;
    }

    .aviso-mensagens,
    .aviso-sites {
        right: 3%;
    }
}


/* TABLET */

@media (max-width: 768px) {

    .header-seguranca {
        height: 90px;
    }

    .logo img {
        width: 80px;
    }

    .btn-fechar {
        font-size: 36px;

        right: 12px;
    }


    .card-seguranca {
        flex-direction: column;

        min-height: auto;

        padding-bottom: 40px;
    }


    .conteudo-seguranca {
        width: 100%;

        padding: 35px 30px 0;

        align-items: center;

        text-align: center;
    }


    .conteudo-seguranca h1 {
        font-size: 38px;

        letter-spacing: 4px;
    }


    .linha-titulo {
        margin-bottom: 35px;
    }


    .conteudo-seguranca > p {
        margin-bottom: 30px;
    }


    .beneficios {
        justify-content: center;

        flex-wrap: wrap;
    }


    .btn-iniciar {
        width: 100%;

        max-width: 355px;

        justify-content: center;
    }


    .ilustracao-seguranca {
        width: 100%;

        min-height: 400px;

        margin-top: 20px;

        background-size: 70%;
    }


    .imagem-seguranca {
        width: 180px;
    }
}


/* CELULAR*/

@media (max-width: 480px) {

    .pagina-seguranca {
        padding: 0 8px 8px;
    }


    .header-seguranca {
        height: 75px;
    }


    .logo {
        margin-left: 5px;
    }


    .logo img {
        width: 72px;
    }


    .btn-fechar {
        font-size: 32px;

        right: 5px;
        top: 5px;
    }


    .card-seguranca {
        border-radius: 14px;
    }


    .conteudo-seguranca {
        padding: 30px 20px 0;
    }


    .conteudo-seguranca h1 {
        font-size: 32px;

        letter-spacing: 3px;
    }


    .conteudo-seguranca > p {
        font-size: 16px;

        line-height: 1.3;
    }


    .beneficios {
        gap: 12px;
    }


    .beneficio span {
        font-size: 7px;
    }


    .icone-beneficio {
        width: 27px;
        height: 27px;
    }


    .icone-beneficio img {
        width: 19px;
        height: 19px;
    }


    .btn-iniciar {
        height: 55px;

        font-size: 14px;
    }


    .ilustracao-seguranca {
        min-height: 350px;

        background-size: 95%;
    }


    .imagem-seguranca {
        width: 150px;
    }


    .aviso-dados {
        width: 100px;

        left: 1%;
        top: 27%;
    }


    .aviso-mensagens {
        width: 100px;

        right: 1%;
        top: 5%;
    }


    .aviso-sites {
        width: 100px;

        right: 1%;
        bottom: 8%;
    }
}