/* =====================================================
   RESET E VARIÁVEIS
===================================================== */

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


:root {

    --primary: #0EA5A8;
    --primary-dark: #087F82;
    --secondary: #38BDF8;

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

    --title: #164E63;
    --text: #475569;

    --border: #E2E8F0;

    --shadow: 0 10px 30px rgba(15, 23, 42, .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;

    text-align: center;

    margin-bottom: 20px;

}



p {

    font-size: 1rem;

}



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


.btn-primary {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 32px;

    border-radius: 30px;

    background: var(--primary);

    color: var(--white);

    text-decoration: none;

    font-weight: 600;

    transition: .3s ease;

}



.btn-primary:hover {

    background: var(--primary-dark);

    transform: translateY(-3px);

}



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


.hero {

    position: relative;

    height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

}



.hero img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background:

    linear-gradient(
        90deg,
        rgba(8,127,130,.85),
        rgba(14,165,168,.45)
    );

}



.hero-content {

    position: relative;

    z-index: 2;

    max-width: 650px;

    color: var(--white);

}



.hero h1 {

    color: var(--white);

    font-size: 3.2rem;

    margin-bottom: 25px;

}



.hero p {

    color: #F0FDFA;

    font-size: 1.2rem;

    margin-bottom: 35px;

}



/* =====================================================
   SOBRE NÓS
===================================================== */


.sobre-nos {

    padding: 90px 0;

    background: var(--white);

}



.sobre-nos-inner {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}



.sobre-nos-texto h2 {

    text-align: left;

    margin-bottom: 25px;

}



.sobre-nos-texto p {

    margin-bottom: 18px;

}



.sobre-nos-img img {

    width: 100%;

    height: 420px;

    object-fit: cover;

    border-radius: 25px;

    box-shadow: var(--shadow);

}



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


.servicos {

    padding: 90px 0;

    background: var(--background);

}



.section-header {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 50px;

}



.section-header p {

    color: var(--text);

}



.grid-3 {

    display: grid;

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

    gap: 30px;

}



.servico-card {

    background: var(--white);

    padding: 35px 30px;

    border-radius: 20px;

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

    text-align: center;

    transition: .3s ease;

}



.servico-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow);

}



.servico-icon {

    width: 70px;

    height: 70px;

    margin: 0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background: rgba(14,165,168,.12);

    color: var(--primary);

    font-size: 30px;

}



.servico-card h3 {

    margin-bottom: 15px;

    font-size: 1.3rem;

}

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


.depoimentos {

    padding: 90px 0;

    background: var(--white);

}



.depoimento-card {

    background: var(--background);

    padding: 35px 30px;

    border-radius: 20px;

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

    transition: .3s ease;

}



.depoimento-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow);

}



.stars {

    color: #F59E0B;

    font-size: 1.2rem;

    letter-spacing: 3px;

    margin-bottom: 20px;

}



.depoimento-card p {

    font-style: italic;

    margin-bottom: 25px;

}



.depoimento-card strong {

    display:block;

    color:var(--title);

    font-size:1rem;

}



.depoimento-card span {

    font-size:.9rem;

    color:var(--text);

}



/* =====================================================
   AGENDAMENTO / ORÇAMENTO
===================================================== */


.agendamento-section {

    padding: 90px 0;

    background: var(--background);

}



.agendamento-header {

    text-align:center;

    margin-bottom:50px;

}



.agendamento-header p {

    max-width:650px;

    margin:0 auto;

}



.agendamento-form {

    max-width:950px;

    margin:0 auto;

    background:var(--white);

    padding:45px;

    border-radius:25px;

    box-shadow:var(--shadow);

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

}



.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-weight:600;

    color:var(--title);

    font-size:.95rem;

}



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


    padding:14px 16px;

    border-radius:12px;

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

    background:#fff;

    color:var(--text);

    font-size:1rem;

    outline:none;

    transition:.3s ease;


}



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

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(14,165,168,.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(--primary);

    text-decoration:none;

}



.checkbox-container a:hover {

    text-decoration:underline;

}



/* BOTÃO FORMULÁRIO */


.agendamento-form button {

    width:100%;

    padding:16px;

    border:none;

    border-radius:30px;

    background:var(--primary);

    color:white;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;

}



.agendamento-form button:hover {

    background:var(--primary-dark);

}



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


.footer {

    padding:60px 0 35px;

    background:#083344;

    color:white;

}



.footer-container {

    display:grid;

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

    gap:40px;

}



.footer-column h3 {

    color:white;

    margin-bottom:20px;

}



.footer-column p {

    color:#CBD5E1;

}



.footer-column ul {

    list-style:none;

}



.footer-column li {

    margin-bottom:10px;

}



.footer-column a {

    color:#CBD5E1;

    text-decoration:none;

    transition:.3s;

}



.footer-column a:hover {

    color:white;

}



.social-links {

    display:flex;

    gap:15px;

}



.social-links a {

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.1);

    font-size:18px;

}



.social-links a:hover {

    background:var(--primary);

}



/* =====================================================
   WHATSAPP FLUTUANTE
===================================================== */


.whatsapp-float {

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#25D366;

    color:white;

    font-size:30px;

    text-decoration:none;

    box-shadow:0 10px 25px rgba(0,0,0,.2);

    z-index:100;

    transition:.3s ease;

}



.whatsapp-float:hover {

    transform:scale(1.1);

}

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


@media (max-width: 900px) {


    .grid-3 {

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

    }



    .sobre-nos-inner {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    .sobre-nos-texto h2 {

        text-align:center;

    }



    .sobre-nos-texto p {

        text-align:center;

    }



    .hero {

        height:550px;

    }



    .hero h1 {

        font-size:2.5rem;

    }



    .footer-container {

        grid-template-columns:1fr 1fr;

    }



}




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


@media (max-width:600px) {


    .container {

        width:92%;

    }



    h2 {

        font-size:1.8rem;

    }



    .hero {

        height:500px;

        text-align:center;

    }



    .hero-content {

        margin:auto;

    }



    .hero h1 {

        font-size:2rem;

    }



    .hero p {

        font-size:1rem;

    }



    .btn-primary {

        padding:12px 24px;

    }



    .grid-3 {

        grid-template-columns:1fr;

    }



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

        padding:60px 0;

    }



    .sobre-nos-img img {

        height:300px;

    }



    .servico-card {

        padding:30px 20px;

    }



    .agendamento-form {

        padding:25px 20px;

    }



    .form-grid {

        grid-template-columns:1fr;

    }



    .footer {

        text-align:center;

    }



    .footer-container {

        grid-template-columns:1fr;

        gap:30px;

    }



    .social-links {

        justify-content:center;

    }



    .whatsapp-float {

        width:55px;

        height:55px;

        right:18px;

        bottom:18px;

        font-size:26px;

    }


}



/* =====================================================
   MELHORIAS DE ACABAMENTO
===================================================== */


::selection {

    background:var(--primary);

    color:white;

}



html {

    scroll-behavior:smooth;

}



a {

    transition:.3s ease;

}