/* =====================================================
   RESET E CONFIGURAÇÕES GERAIS
===================================================== */

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


:root {

    --primary: #102A43;
    --primary-light: #243B53;
    --secondary: #C8A951;
    --secondary-hover: #B8953F;

    --background: #F8FAFC;
    --white: #FFFFFF;

    --title: #102A43;
    --text: #52606D;

    --border: #E5E7EB;

    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

}


body {

    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--background);
    color: var(--text);
    line-height: 1.6;

}


img {

    max-width: 100%;
    display: block;

}


.container {

    width: 90%;
    max-width: 1200px;
    margin: 0 auto;

}


h1,
h2,
h3 {

    color: var(--title);
    line-height: 1.2;

}


h2 {

    font-size: 2.2rem;
    margin-bottom: 20px;
    text-align: center;

}


p {

    font-size: 1rem;

}


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


.btn-primary,
.btn-secondary {

    display: inline-block;
    padding: 14px 32px;

    border-radius: 30px;

    text-decoration: none;
    font-weight: 600;

    transition: .3s ease;

}


.btn-primary {

    background: var(--secondary);
    color: var(--white);

}


.btn-primary:hover {

    background: var(--secondary-hover);
    transform: translateY(-3px);

}



.btn-secondary {

    background: var(--primary);
    color: var(--white);

}


.btn-secondary:hover {

    background: var(--primary-light);

}



/* =====================================================
   GRID
===================================================== */


.grid-2 {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;

    align-items: center;

}



.grid-3 {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

}



/* =====================================================
   HERO
===================================================== */


.hero {

    min-height: 650px;

    display: flex;
    align-items: center;

    background:

    linear-gradient(
        rgba(16,42,67,.88),
        rgba(16,42,67,.88)
    ),

    url("../images/hero-contabilidade.jpg");

    background-size: cover;
    background-position: center;

}


.hero-content {

    max-width: 700px;

    color: var(--white);

}


.hero h1 {

    color: var(--white);

    font-size: 3.2rem;

    margin-bottom: 25px;

}



.hero p {

    color: #E2E8F0;

    font-size: 1.2rem;

    margin-bottom: 35px;

    max-width: 600px;

}



/* =====================================================
   BENEFÍCIOS
===================================================== */


.beneficios {

    padding: 80px 0;

    background: var(--white);

}



.beneficio {

    background: var(--white);

    padding: 35px 25px;

    text-align: center;

    border-radius: 18px;

    box-shadow: var(--shadow);

    border: 1px solid var(--border);

    transition: .3s ease;

}


.beneficio:hover {

    transform: translateY(-8px);

}



.icon-circle {

    width: 65px;
    height: 65px;

    margin: 0 auto 20px;

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


    border-radius:50%;

    background: rgba(200,169,81,.15);

    color: var(--secondary);

    font-size: 28px;

}



.beneficio h3 {

    margin-bottom:15px;

    font-size:1.25rem;

}


.beneficio p {

    color:var(--text);

}

/* =====================================================
   SOBRE
===================================================== */


.sobre {

    padding: 90px 0;

    background: var(--background);

}


.sobre-texto h2 {

    text-align: left;

    font-size: 2.3rem;

    margin-bottom: 25px;

}



.sobre-texto p {

    font-size: 1.1rem;

    margin-bottom: 25px;

    max-width: 520px;

}



.sobre-imagem {

    position: relative;

}



.sobre-imagem img {

    width: 100%;

    height: 420px;

    object-fit: cover;

    border-radius: 25px;

    box-shadow: var(--shadow);

}



/* detalhe decorativo */

.sobre-imagem::after {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    background: var(--secondary);

    opacity: .15;

    border-radius: 50%;

    right: -30px;

    bottom: -30px;

    z-index: -1;

}



/* =====================================================
   SERVIÇOS
===================================================== */


.servicos {

    padding: 90px 0;

    background: var(--white);

}



.servicos > .container > h2 {

    margin-bottom: 50px;

}



.servico {

    background: var(--background);

    padding: 35px 30px;

    border-radius: 20px;

    border: 1px solid var(--border);

    transition: .3s ease;

}



.servico:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow);

}



.servico .icon-circle {

    margin: 0 0 25px;

}



.servico h3 {

    font-size: 1.3rem;

    margin-bottom: 15px;

}



.servico p {

    color: var(--text);

}



/* =====================================================
   SEPARAÇÃO VISUAL DOS CARDS
===================================================== */


.servico,
.beneficio {

    backdrop-filter: blur(5px);

}

/* =====================================================
   DEPOIMENTOS
===================================================== */


.depoimentos {

    padding: 90px 0;

    background: var(--background);

}



.depoimentos h2 {

    margin-bottom: 15px;

}



.depoimentos-subtitulo {

    text-align: center;

    max-width: 650px;

    margin: 0 auto 50px;

    color: var(--text);

}



.depoimento {

    background: var(--white);

    padding: 35px 30px;

    border-radius: 20px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

    transition: .3s ease;

}



.depoimento:hover {

    transform: translateY(-6px);

}



.depoimento-estrelas {

    color: var(--secondary);

    font-size: 1.2rem;

    letter-spacing: 3px;

    margin-bottom: 20px;

}



.depoimento p {

    font-style: italic;

    margin-bottom: 20px;

    color: var(--text);

}



.depoimento strong {

    color: var(--primary);

    font-size: .95rem;

}



/* =====================================================
   CTA
===================================================== */


.cta {

    padding: 80px 20px;

    text-align: center;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color: var(--white);

}



.cta h2 {

    color: var(--white);

    max-width: 700px;

    margin: 0 auto 20px;

}



.cta p {

    max-width: 600px;

    margin: 0 auto 35px;

    color: #D9E2EC;

}



.cta .btn-secondary {

    background: var(--secondary);

}



.cta .btn-secondary:hover {

    background: var(--secondary-hover);

}



/* =====================================================
   AGENDAMENTO
===================================================== */


.agendamento-section {

    padding: 90px 0;

    background: var(--white);

}



.agendamento-header {

    text-align: center;

    margin-bottom: 50px;

}



.agendamento-header h2 {

    margin-bottom: 15px;

}



.agendamento-header p {

    max-width: 650px;

    margin: auto;

}



/* FORMULÁRIO */


.agendamento-form {

    max-width: 950px;

    margin: auto;

    background: var(--background);

    padding: 45px;

    border-radius: 25px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

}



.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

}



.form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.form-group label {

    font-size: .95rem;

    font-weight: 600;

    color: var(--primary);

}



.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 14px 16px;

    border-radius: 12px;

    border: 1px solid var(--border);

    background: var(--white);

    font-size: 1rem;

    color: var(--text);

    outline: none;

    transition: .3s ease;

}



.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: var(--secondary);

    box-shadow: 0 0 0 3px rgba(200,169,81,.15);

}



.form-group textarea {

    resize: none;

    margin-top: 25px;

}



/* CHECKBOX */


.checkbox-container {

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin:25px 0;

    font-size:.9rem;

}



.checkbox-container a {

    color: var(--secondary);

    text-decoration:none;

}



.checkbox-container a:hover {

    text-decoration:underline;

}



/* BOTÃO DO FORMULÁRIO */


.agendamento-form button {

    width:100%;

    padding:16px;

    border:none;

    border-radius:30px;

    background:var(--primary);

    color:var(--white);

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;

}



.agendamento-form button:hover {

    background:var(--secondary);

}

/* =====================================================
   FOOTER
===================================================== */


.footer {

    padding: 35px 0;

    background: var(--primary);

    color: var(--white);

    text-align: center;

}


.footer p {

    font-size: .95rem;

    color: #D9E2EC;

}



/* =====================================================
   ANIMAÇÕES SUAVES
===================================================== */


.hero-content,
.beneficio,
.servico,
.depoimento {

    animation: aparecer .8s ease;

}



@keyframes aparecer {

    from {

        opacity: 0;

        transform: translateY(20px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* =====================================================
   RESPONSIVIDADE TABLET
===================================================== */


@media (max-width: 900px) {


    .grid-3 {

        grid-template-columns: repeat(2, 1fr);

    }



    .grid-2 {

        grid-template-columns: 1fr;

        gap: 35px;

    }



    .hero {

        min-height: 550px;

    }



    .hero h1 {

        font-size: 2.5rem;

    }



    .sobre-texto h2 {

        text-align: center;

    }



    .sobre-texto p {

        text-align: center;

        margin-left:auto;

        margin-right:auto;

    }



}



/* =====================================================
   RESPONSIVIDADE MOBILE
===================================================== */


@media (max-width: 600px) {


    .container {

        width: 92%;

    }



    h2 {

        font-size: 1.8rem;

    }



    .grid-3 {

        grid-template-columns: 1fr;

    }



    .hero {

        min-height: 500px;

        text-align:center;

    }



    .hero h1 {

        font-size: 2rem;

    }



    .hero p {

        font-size:1rem;

    }



    .btn-primary,
    .btn-secondary {

        padding:12px 25px;

    }



    .beneficios,
    .sobre,
    .servicos,
    .depoimentos,
    .agendamento-section {

        padding:60px 0;

    }



    .sobre-imagem img {

        height:300px;

    }



    .agendamento-form {

        padding:25px 20px;

    }



    .form-grid {

        grid-template-columns:1fr;

    }



    .cta {

        padding:60px 20px;

    }


}