@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;700&family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

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

:root{
    --color-principal:#f68999;
    --colorFondo-claro: #F7DDE2;
    --Color-secciones:#F5F1ED;
    --color-bordes:#D9D9D9;
    --color-texto: #333333;
    --color-acento:#C6A769;

    --tipografia-titulos: 'Playfair Display', serif;
    --fuente-elegante: 'Cormorant', serif;
    --fuente-principal: 'Poppins', sans-serif;
    --fuente-secundaria: 'Montserrat', sans-serif;
    --fuente-lectura: 'Open Sans', sans-serif;
    --fuente-logo: 'Great vibes', cursive;


}


.navbar{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    height: 120px;
    background-color: var(--Color-secciones);

}


.logo{
    font-family: var(--fuente-logo);
    font-size: 32px;
    color: var(--color-principal);
}

.nav-links{
    display: flex;
    list-style: none;
    gap: 20px;
}
.nav-links a{
    color: var(--color-texto);
    text-decoration: none;
    font-family: var(--fuente-principal);
    transition: 0.3s;

}

.nav-links a.activ{
    color:var(--color-texto);
    border-bottom: 2px solid #f5b6b6;
    padding-bottom: 5px;
}

.nav-links a:hover{
    color: #f46565;
}

.menu-toggle{
    display: none;
    flex-direction: column;
    background-color:rgb(242, 188, 188);
    width: 40px; 
    height: 25px;  
    border: none;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
}

.bar {
    height: 1px;
    width: 15px;
    background-color:white;
    margin: 2px 0;
    display: block;


}

/***** MObile**************/

@media (max-width: 768px){
    .menu-toggle{
        display: flex;
    }

    .nav-links{
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top:100px;
        left: 0;
        text-align: center;
        padding: 1rem 0;
        background-color: var(--colorFondo-claro);
        border-radius: 0 0 12px 12px;

    }

    .logo{
        font-size: 26px;
    }
    .nav-links.active{
        display: flex;
    }
    
}

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

section{
    background-color: var(--colorFondo-claro);
}

.section-container-hero{
    display: flex;
    width: clamp(320px, 80%, 1200px);
    min-height:400px;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    background-color: var(--colorFondo-claro);
    padding: 0px 0px 0 10px;
    gap: 40px;
}

.hero-text{
    width: 60%;
    background-color: var(--colorFondo-claro);
    justify-content: center;
    align-content: center;
    padding: 40px;
    line-height: 1.8;
    gap: 25px;
    
}

.hero-img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 450px;
    border-radius: 10px;
    overflow: hidden ;
    background-color: var(--colorFondo-claro);

}

.hero-img img{
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    

}


.hero-text h1{
    font-family: var(--fuente-logo);
    font-size: 52px;
    font-weight: 500;
}

.hero-text p{
    font-size: 21px;
    font-family: var(--fuente-principal);
    color: var(--color-texto);
}

.button-hero{
    width: fit-content;
    padding: 14px 36px;
    background-color: var(--color-principal);
    border-radius: 12px;
    border: none;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    color: white;
    transition: 0.3s;

}
.button-hero:hover{
    background-color: #f64ecc;
    /* color: #f46565; */
}



@media (max-width: 768px){
    .section-container-hero{
        flex-direction: column-reverse;
        text-align: center;
        width: 95%;
        gap: 30px;

    }

    .hero-text, .hero-img{
        width: 100%;
    }

    .hero-img img{
        object-fit: cover;
        overflow: hidden;
        object-position: 15% center;
        padding-top: 5px;
        border-radius: 30px 30px 20px 20px;

    }

    .hero-text  h1{
        font-size: 42px;

    }
  

    
}

/******************Servicios*******/

.section-container-servicios{
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    background-color: var(--Color-secciones);
    padding-bottom: 50px;
}

.container-servicios{
    display: flex;
    justify-content: space-around;
    background-color: var(--Color-secciones);
    width: clamp(320px, 80%, 1200px);
    gap: 50px;
    align-items: center;
    padding: 0px 40px;
    width: clamp(320px, 80%, 1300px);
    
}

.card-servicio{
    display: flex;
    flex-direction: column;
    width: 270px;
    height: 330px;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: var(--colorFondo-claro);
    gap: 10px;
}

.card-servicio img{
    width: 200px;
    height: 200px;
    border-radius: 6px;
    overflow: hidden;
    object-fit: cover;
    
}

.section-container-servicios h2{
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-family: var(--tipografia-titulos);

}

.button-servicios{
    width: fit-content;
    padding: 14px 36px;
    background-color: var(--color-principal);
    border-radius: 12px;
    border: none;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    color: white;
    transition: 0.3s;
}

.lineas-decoracion{
    display: flex;
    align-items: center;
    width: 400px;
    text-align: center;
    height: 200px;
    justify-content: center;
    gap: 20px;
    /* background-color: #D9D9D9; */
}

.lineas-decoracion::before,
.lineas-decoracion::after{
    content: "";
    height: 1px;
    flex: 1;
    background-color: var(--colorFondo-claro);

}

@media (max-width: 768px){
    .container-servicios{
        flex-direction: column;
    }
}

/***************Testimonios******************/



.container-section-testimonios{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    gap: 30px;
}

.container-cards{
    display: flex;
    width: clamp(320px 80% 1200px);
    justify-content: center;
    align-content: center;
    gap: 40px;
    padding: 20px;

}

.cards{
    display: flex;
    gap: 20px;
    padding: 20px;
    width: clamp(300px 500px);
    height: 200px;
    background-color: var(--Color-secciones);
    border-radius: 12px;
    justify-content: center;
    align-content: center;
    text-align:start;

}

.cards-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: clamp(150px 300px);

}



.cards img{
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    border-radius: 6px;
}

.container-section-testimonios h2{
    font-size: 32px;
    font-family: var(--tipografia-titulos);
    letter-spacing: 2px;
}

.container-section-testimonios p{
    font-family: var(--color-texto);
    font-size: 21px;
    font-weight: 400;
}
.cards p{
    font-size: 16px;
}


@media (max-width: 768px){
    .container-cards{
        flex-direction: column;
    }
    .cards img{
        width: 200px;
        height: 150px;
        padding: 5px;
        border-radius: 8px;
    }

}


/****************Contacto****/

.section-contact{
    display: flex;
    justify-content:center;
    align-items: flex-start;
    gap: 80px;
    padding: 20px;
    background-color: var(--Color-secciones);
}

.card-contact{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    /* background-color: #f46565; */
}

.item-contacto{
    display: flex;
    gap: 10px;
}
.fa-solid {
    color: var(--color-principal);

}

.formulario{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    width: clamp(300px 450px)
    
    
}
.Formulario-nombre-telefono{
    display: flex;
    gap: 30px;
    
}

.form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 10px;

}

textarea, input{
    border-radius: 4px;
    border: 1px solid var(--color-texto);
}

.mensaje textarea{
    width: 430px;
    height: 100px;
}

.btn-form{
    width: fit-content;
    padding: 14px 36px;
    background-color: var(--color-principal);
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 12px;
    margin-top: 10px;
    margin-inline-start: 200px;
    cursor: pointer;
}

.section-contact h3{
    font-family: var(--tipografia-titulos);
    font-size: 26px;

}

@media (max-width: 768px){
    .section-contact{
        flex-direction: column-reverse;
        
       
    }

    .mensaje textarea{
        width: 280px;
    }

    .btn-form{
        width: 180px;
        margin-inline-start: 100px;
    }

    .formulario{
        width: 320px;
        margin-bottom: 0;


    }
.Formulario-nombre-telefono{
    flex-direction: column;
    

}

.card-contact{
    width: 320px;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    margin-bottom: 20px;
}
}