* {
    box-sizing: border-box;
}

:root {
    --navy: #0a2140;
    --text: #0c1b3b;
    --muted: #5a6883;
    --line: #d8deea;
    --bg: #ffffff;
    --bg-alt: #f5f7fb;
    --shadow: 0 10px 30px rgba(10, 33, 64, 0.08);
    --radius: 18px;
    --container: 1180px;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

#whatsapp {
    position: fixed; /* posição absoluta ao elemento pai, neste caso o BODY */
    /* Posiciona no meio, tanto em relação a esquerda como ao topo */
    right: 5%;
    top: 1%;
    background-color: darkgreen;
    width: 50px; /* Largura da DIV */
    height: 50px; /* Altura da DIV */
    padding: 10px;
    border-radius: 25px;
    /* A margem a esquerda deve ser menos a metade da largura */
    /* A margem ao topo deve ser menos a metade da altura */
    /* Fazendo isso, centralizará a DIV */
    margin-left: 0px;
    margin-top: 0px;
    color: #FFFFFF;
    text-align: center; /* Centraliza o texto */
    z-index: 9000; /* Faz com que fique sobre todos os elementos da página */
}


    #whatsapp a {
        color: #FFFFFF;
    }

        #whatsapp a:hover {
            color: #FFFFFF;
        }




img {
    max-width: 100%;
    display: block;
}

.container {
    width: min(100% - 32px, var(--container));
    margin: 0 auto;
}

.hero {
    padding: 48px 0 72px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    border-bottom: 1px solid var(--line);
}

.hero-brand {
    margin-bottom: 28px;
}

.logo {
    width: 420px;
    height: auto;
}



.eyebrow {
    margin: 0 0 8px 20px;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

h1 {
    margin: 0px 0px 0px 20px;
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.12;
    color: var(--navy);
    max-width: 1080px;
}

.hero-text {
    max-width: 1080px;
    font-size: 1.4rem;
    margin-top: 18px;
}

.section {
    padding: 72px 0;
}

.section-alt {
    background: var(--bg-alt);
}

h2 {
    margin: 0 0 28px;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.5;
    color: var(--navy);
}

h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--navy);
}

p {
    margin: 0 0 10px;
}

.grid {
    display: grid;
    gap: 20px;
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stack {
    display: grid;
    gap: 20px;
}

.card,
.feature,
.intro-block,
.contact-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
    widows:100%;
}

    .card p:last-child,
    .feature p:last-child,
    .intro-block p:last-child,
    .contact-card p:last-child {
        margin-bottom: 0;
    }

.contact-section {
    padding-bottom: 88px;
}

.contact-card {
    max-width: 1280px;
}

.faleconosco{
    float:left;
    padding:25px;
    margin-top:30px;
}


.logosecao {
    float: left;
    margin-right: 20px;
    margin-top: -50px;
    width: 200px;
    height: auto;
}

.logoplaylist {
    float: left;
    margin-right: 20px;
    margin-top: -60px;
    width: 280px;
    height: auto;
}



.textopadrao {
    font-size: 1.2rem;
}


.titulo {
    text-transform:uppercase;

}

/*Section Entregas*/
.entrega {
    margin: 3%;
    background-size: contain;
    width: 250px;
    height: 300px;
    background-position: top;
    background-repeat: no-repeat;
    float: left;
}

.entrega1 {
    background-image: url('../images/entrega1.png');
}

.entrega2 {
    background-image: url('../images/entrega2.png');
}

.entrega3 {
    background-image: url('../images/entrega3.png');
}

.entrega4 {
    background-image: url('../images/entrega4.png');
}

.entrega5 {
    background-image: url('../images/entrega5.png');
}

.entrega6 {
    background-image: url('../images/entrega6.png');
}

.entrega7 {
    background-image: url('../images/entrega7.png');
}

.entrega8 {
    background-image: url('../images/entrega8.png');
}

.entrega9 {
    background-image: url('../images/entrega9.png');
}

.textoentrega {
    max-width: 200px;
    margin-top: 125px;
    margin-left: 20px;
    text-align: center;
}


/*Section Benefícios*/
.iconebeneficio {
    float: left;
    margin-right: 30px;
    margin-top: -25px;
    width: 75px;
    height: auto;
}

.diviconebeneficio {
    padding-left: 90px;
}

.textobeneficio {
   padding-left: 90px;
}


/*Section Inovacoes*/
.inovacao {
    margin: 0%;
    background-size: contain;
    width: 320px;
    height: 400px;
    background-position: top;
    background-repeat: no-repeat;
    float: left;
}

.inovacao1 {
    background-image: url('../images/inovacao1.png');
}

.inovacao2 {
    background-image: url('../images/inovacao2.png');
}

.inovacao3 {
    background-image: url('../images/inovacao3.png');
}

.inovacao4 {
    background-image: url('../images/inovacao4.png');
}

.tituloinovacao {
    margin-top: 115px;
    margin-left: 55px;
    text-align: left;
}

.textoinovacao {
    max-width: 220px;
    margin-top: 5px;
    margin-left: 30px;
    text-align: left;
    font-size: 1.1rem;
}

/*Section Funcionaliddades*/
.funcionalidade {
    width: 300px;
    height: 300px;
    padding-right: 2%;
    box-shadow: var(--shadow);
    border: solid;
    border-left: none;
    border-width: 0.1rem;
    border-radius: var(--radius);
    margin-left:22px;
}

.funcionalidademonitoramento {
    background: #fff;
    border: solid;
    border-width: 0.1rem;
    border-radius: var(--radius);
    padding: 5px;
    box-shadow: var(--shadow);
}


.bordaconteudo {
    border-color: #da0d1e;
}

.bordaplaylist {
    border-color: #254061;
}

.bordamonitoramento {
    border-color:  #fed72d;
}


.bordaconfiguracoes {
    border-color: #01692e;
}



.textofuncionalidade {
    max-width: 260px;
    margin-top: 20px;
    margin-left: 15px;
    text-align: left;
    float: left;
    width: 95%;
}

.barrafuncionalidade {
    float: left;
    width: 10%;
    margin-left: -20px;
}

.barramonitoramento{
    float: left;
    width: 5%;
    margin-left: -20px;
}

.barralateral {
    height: 300px;
    float:right;
  
}

.barralateralmonitoramento {
    height: 225px;
    float: left;
}

/* Section Qualificacao*/

.qualificacao {
    margin: 3%;
    background-size: cover;
    width: 280px;
    height: 400px;
    background-position: top;
    background-repeat: no-repeat;
    float: left;
}

.textoqualificacao {
    margin-top: 12px;
    text-align: left;
    float: left;
    padding: 0px 0px 0px 12px;
}

.tituloqualificacao {
    margin-top: 105px;
    margin-left:10px;
    text-align: left;
    float: left;
    font-weight:600;
}


.qualificacao1 {
    background-image: url('../images/qualificacao1.png');
}
.qualificacao2 {
    background-image: url('../images/qualificacao2.png');
}
.qualificacao3 {
    background-image: url('../images/qualificacao3.png');
}
.qualificacao4 {
    background-image: url('../images/qualificacao4.png');
}
.qualificacao5 {
    background-image: url('../images/qualificacao5.png');
}
.qualificacao6 {
    background-image: url('../images/qualificacao6.png');
}

/*section certificacoes*/


.certificacao {
    margin: 3%;
    background-size: contain;
    width: 280px;
    height: 300px;
    background-position: top;
    background-repeat: no-repeat;
    float: left;
}

.textocertificacao {
    max-width:250px;
    float: left;
    text-align: left;
    margin-top: 22px;
    padding:15px 10px 5px 30px;
}

.titulocertificacao {
    margin-top: 30px;
    margin-left: 60px;
    text-align: left;
    float: left;
    font-size: 1.4rem;
    font-weight: 600;
    color:#fff;
}

.certificacao1 {
    background-image: url('../images/certificacao1.png');
}

.certificacao2 {
    background-image: url('../images/certificacao2.png');
}

.certificacao3 {
    background-image: url('../images/certificacao3.png');
}

.certificacao4 {
    background-image: url('../images/certificacao4.png');
}

.certificacao5 {
    background-image: url('../images/certificacao5.png');
}

.certificacao6 {
    background-image: url('../images/certificacao6.png');
}


/*section Destaques*/

.iconedestaque{
    float: left;
    margin-right: 50px;
    margin-top: 0px;
    width: 80px;
    height: auto;
}



    @media (max-width: 980px) {


        .grid-3, .grid-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .hero {
            padding: 36px 0 56px;
        }

        .logo {
            width: 180px;
        }

        .section {
            padding: 56px 0;
        }

        .logosecao {
            float: left;
            margin-right: 20px;
            margin-top: -50px;
            width: 160px;
            height: auto;
        }

        .logoplaylist {
            float: left;
            margin-right: 20px;
            margin-top: -50px;
            width: 240px;
            height: auto;
        }

    }

    @media (max-width: 640px) {

        .grid-3,
        .grid-2 {
            grid-template-columns: 1fr;
        }

        .container {
            width: min(100% - 20px, var(--container));
        }

        .card,
        .feature,
        .intro-block,
        .contact-card {
            padding: 18px;
            border-radius: 14px;
        }

        .hero-text {
            font-size: 1rem;
        }

        .logosecao {
            float: left;
            margin-right: 20px;
            margin-top: -50px;
            width: 135px;
            height: auto;
        }

        .logoplaylist {
            float: left;
            margin-right: 20px;
            margin-top: -45px;
            width: 180px;
            height: auto;
        }


    }

    @media (max-width: 480px) {


        
        .logosecao {
            float: left;
            margin-right: 10px;
            margin-top: -40px;
            width: 115px;
            height: auto;
        }

        .logoplaylist {
            float: left;
            margin-right: 20px;
            margin-top: -30px;
            width: 150px;
            height: auto;
        }

        h1 {
            margin: 0px 0px 0px 20px;
            font-size: clamp(1.6rem, 4vw, 3.2rem);
            line-height: 1.12;
            color: var(--navy);
            max-width: 1080px;
        }

        h2 {
            margin: 0 0 28px;
            font-size: clamp(1.4rem, 3vw, 2.4rem);
            line-height: 1.25;
            color: var(--navy);
        }

        .eyebrow {
            margin: 0 0 8px 20px;
            font-size: 0.7rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .hero-text {
            font-size: 0.9rem;
        }

        .textopadrao {
            font-size: 1.1rem;
        }

        .textoinovacao {
            max-width: 220px;
            margin-top: 5px;
            margin-left: 30px;
            text-align: left;
            font-size: 1.0rem;
        }

        .iconebeneficio {
            float: left;
            margin-right: 30px;
            margin-top: -10px;
            width: 55px;
            height: auto;
        }

        .titulobeneficio {
            padding-left: 90px;
        }

        .barramonitoramento {
            float: left;
            width: 5%;
            margin-left: -15px;
        }


        .barralateralmonitoramento {
            height: 390px;
            float: left;
        }
    }