:root{

    --primary:#49A3A1;
    --primary-light:#6CB8B6;

    --white:#FFFFFF;

    --text:#555555;

    --light:#F8F8F8;

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

    --radius:18px;

}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;
    padding:0;

    font-family:
        "Segoe UI",
        sans-serif;

    color:var(--text);

    background:#fff;

}

/*************************
NAVBAR
*************************/

nav{

    background:white;

    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:999;

    box-shadow:var(--shadow);

}

.nav-wrapper{

    width:95%;
    max-width:1200px;

    margin:auto;

}

.brand-logo{

    color:var(--primary)!important;

    font-weight:600!important;

}

nav ul a{

    color:#666!important;

    font-weight:500;

}

/*************************
HERO
*************************/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:70px;

    background:white;

}

.hero-container{

    width:95%;
    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:50px;

    align-items:center;

}

.hero h1{

    font-size:4rem;

    margin:0;

    color:var(--primary);

}

.hero h2{

    font-size:2rem;

    margin-top:15px;

    color:#666;

    font-weight:300;

}

.hero p{

    font-size:1.2rem;

    line-height:1.8;

}

.hero-image{

    text-align:center;

}

.hero-image img{

    width:100%;

    max-width:550px;

    border-radius:25px;

    box-shadow:var(--shadow);

}

/*************************
BOTONES
*************************/

.btn-main{

    background:var(--primary);

    color:white;

    border:none;

    border-radius:50px;

    padding:15px 35px;

    font-size:1rem;

    cursor:pointer;

    transition:.3s;

    margin-right:10px;

}

.btn-main:hover{

    transform:translateY(-2px);

}

.btn-outline{

    background:white;

    color:var(--primary);

    border:2px solid var(--primary);

    border-radius:50px;

    padding:15px 35px;

    cursor:pointer;

}

/*************************
SECCIONES
*************************/

.section{

    padding:90px 0;

}

.section-title{

    text-align:center;

    font-size:3rem;

    margin-bottom:50px;

    color:var(--primary);

}

.container{

    width:95%;

    max-width:1200px;

    margin:auto;

}

/*************************
SERVICIOS
*************************/

.cards{

    display:grid;

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

    gap:25px;

}

.card-service{

    background:white;

    border-radius:var(--radius);

    padding:30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;

}

.card-service:hover{

    transform:translateY(-5px);

}

.card-service i{

    font-size:3rem;

    color:var(--primary);

}

.card-service h3{

    color:var(--primary);

}

/*************************
TCC
*************************/

.tcc{

    background:var(--primary);

    color:white;

}

.tcc .section-title{

    color:white;

}

.tcc p{

    max-width:900px;

    margin:auto;

    text-align:center;

    font-size:1.3rem;

    line-height:1.8;

}

/*************************
PROCESO
*************************/

.steps{

    display:grid;

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

    gap:30px;

}

.step{

    text-align:center;

}

.step-number{

    width:70px;
    height:70px;

    background:var(--primary);

    color:white;

    border-radius:50%;

    display:flex;

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

    margin:auto;

    font-size:2rem;

    font-weight:bold;

}

/*************************
CONTACTO
*************************/

.contact{

    background:var(--primary);

    color:white;

}

.contact .section-title{

    color:white;

}

.contact-box{

    text-align:center;

    font-size:1.2rem;

    line-height:2.5;

}

/*************************
WHATSAPP
*************************/

.whatsapp{

    position:fixed;

    right:25px;
    bottom:25px;

    width:65px;
    height:65px;

    background:#25D366;

    color:white;

    border-radius:50%;

    display:flex;

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

    font-size:2rem;

    z-index:9999;

    box-shadow:var(--shadow);

}

/*************************
ANIMACIONES
*************************/

.fade-up{

    opacity:0;

    transform:translateY(50px);

    transition:.7s;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/*************************
RESPONSIVE
*************************/

@media(max-width:992px){

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .cards{

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

    }

    .steps{

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

    }

}

@media(max-width:600px){

    .cards{

        grid-template-columns:1fr;

    }

    .steps{

        grid-template-columns:1fr;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .section-title{

        font-size:2rem;

    }

}


.credential-card{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#F5FBFB;

    color:var(--primary);

    padding:12px 20px;

    border-radius:50px;

    margin-top:15px;

    font-weight:600;

    border:1px solid rgba(73,163,161,.15);

}


.especialidades{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:25px 0;

}

.especialidades span{

    background:#49A3A1;

    color:white;

    padding:10px 18px;

    border-radius:50px;

    font-size:.9rem;

}