/* RESET */

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

html{
    scroll-behavior:smooth;
}

/* ==================================================
   BODY
================================================== */

body{

font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

background:var(--cinza);

color:var(--texto);

line-height:1.6;

overflow-x:hidden;

}


:root{

/* CORES */

--azul:#004AAD;

--azul-escuro:#0F1F3D;

--vermelho:#E41F2A;

--branco:#FFFFFF;

--cinza:#F5F7FA;

--texto:#333333;

--texto-claro:#6B7280;

--texto-footer:#D5DBE5;

--texto-secundario:#555555;

--texto-footer-secundario:#B9C4D3;

/* BORDER */

--radius-sm:10px;

--radius-md:15px;

--radius-lg:20px;

--radius-xl:30px;

/* SHADOW */

--shadow-sm:0 5px 15px rgba(0,0,0,.08);

--shadow-md:0 8px 25px rgba(0,0,0,.10);

--shadow-lg:0 15px 35px rgba(0,0,0,.15);

/* TRANSITION */

--transition:.3s;

}


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

.container{

    width:min(1280px,92%);

    margin-inline:auto;

}


/* ==================================================
   TITULOS
================================================== */

section{

    padding:90px 0;

}

section > h2{

text-align:center;

font-size:38px;

margin-bottom:50px;

color:var(--azul);

}


/* ==================================================
   BOTÕES
================================================== */

button{

cursor:pointer;

border:none;

background:none;

transition:var(--transition);

font:inherit;

}


button:hover{

    transform:translateY(-3px);

}


/* ==================================================
   LINKS
================================================== */

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}


/* ==================================================
   IMAGENS
================================================== */

img{

    max-width:100%;

    height:auto;

    display:block;

}


/* ==================================================
   FORMULÁRIOS
================================================== */

input,
textarea{

width:100%;

font:inherit;

padding:18px;

border:1px solid #ccc;

border-radius:12px;

}


textarea{

height:150px;

resize:none;

}


/* ==================================================
   UTILITÁRIOS
================================================== */

.text-center{

    text-align:center;

}

.hidden{

    display:none;

}

.flex{

    display:flex;

}

.grid{

    display:grid;

}

.mt-1{

margin-top:10px;

}

.mt-2{

margin-top:20px;

}

.mt-3{

margin-top:30px;

}

.mb-1{

margin-bottom:10px;

}

.mb-2{

margin-bottom:20px;

}

.mb-3{

margin-bottom:30px;

}


::selection{

background:var(--vermelho);

color:var(--branco);

}

:focus-visible{

outline:3px solid var(--vermelho);

outline-offset:3px;

}

/* ==========================================================
   WHATSAPP FLUTUANTE — APVE
========================================================== */

.whatsapp-flutuante {

    position: fixed;

    right: 24px;

    bottom: 24px;

    z-index: 9999;

}


/* ==========================================================
   BOTÃO
========================================================== */

.whatsapp-botao {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 58px;

    padding: 7px 8px 7px 20px;

    border-radius: 50px;

    background: #25D366;

    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 10px 30px rgba(0,0,0,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


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

.whatsapp-texto {

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

}


/* ==========================================================
   ÍCONE
========================================================== */

.whatsapp-icone {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 44px;

    border-radius: 50%;

    background: #ffffff;

    color: #25D366;

    font-size: 23px;

}


/* ==========================================================
   HOVER
========================================================== */

.whatsapp-botao:hover {

    background: #20bd5a;

    color: #ffffff;

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.25);

}


.whatsapp-botao:hover
.whatsapp-icone {

    transform: scale(1.05);

}


/* ==========================================================
   FOCO
========================================================== */

.whatsapp-botao:focus-visible {

    outline: 3px solid rgba(37,211,102,.45);

    outline-offset: 4px;

}


/* ==========================================================
   ANIMAÇÃO DISCRETA
========================================================== */

@keyframes whatsappEntrada {

    from {

        opacity: 0;

        transform:
            translateY(20px)
            scale(.9);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


.whatsapp-flutuante {

    animation:
        whatsappEntrada .45s ease both;

}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width: 600px) {

    .whatsapp-flutuante {

        right: 16px;

        bottom: 16px;

    }


    .whatsapp-botao {

        width: 56px;

        height: 56px;

        min-height: 56px;

        padding: 0;

        justify-content: center;

        border-radius: 50%;

    }


    .whatsapp-texto {

        display: none;

    }


    .whatsapp-icone {

        width: 56px;

        height: 56px;

        flex-basis: 56px;

        background: transparent;

        color: #ffffff;

        font-size: 28px;

    }

}