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

html {

    scroll-behavior: smooth;
}

:root {
    /* Colores */
    --dorado-suave: #d1b780;
    --dorado-intenso: #d1b172;
    --turquesa-clara: #72d0cb;
    --gris-profundo: #545454;
    --rosa-principal: #e9bbbc;
    --rosa-claro: #ebdfdf;

    /* Tipografía */
    --titulo-size: 3rem;
    --parrafo-size: 1.2rem;
    --linea-texto: 2rem;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;

}

/*.old-standard-tt-regular {
  font-family: "Old Standard TT", serif;
  font-weight: 400;
  font-style: normal;
}*/

.old-standard-tt-bold {
    font-family: "Old Standard TT", serif;
    font-weight: 700;
    font-style: normal;
}

.old-standard-tt-regular-italic {
    font-family: "Old Standard TT", serif;
    font-weight: 600;
    font-style: italic;
}


body {

    color: var(--gris-profundo);
    overflow-x: hidden;
    background-color: #eeece9;
    /*font-style: italic;*/
    font-family: "Old Standard TT", serif;
    font-weight: 400;
    font-style: normal;
    user-select: none;
}

.header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 12vh;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #eeece9;
    box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.267);
    user-select: none;

}

.menu-toggle {
    font-size: 2rem;
    cursor: pointer;
    display: none;
    /* oculto en desktop */
    color: rgb(3, 3, 3);
    text-align: center;
}

.logoHeader {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%;

}

.imgLogoContainer {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    text-shadow: 1px 10px 10px black;

}

.imgLogoContainer img {

    width: auto;
    height: 100%;
    object-fit: cover;


}

.navbar {

    width: 70%;
    height: 90%;
    display: flex;
    align-items: center;

}

.navbarList {

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

}

.navbarList a {

    display: flex;
    justify-content: center;

}

.navbarList a::after {

    content: "";
    width: 10%;
    height: 1%;
    bottom: -15%;
    position: absolute;

}

.listItem {

    display: flex;
    justify-content: center;
    list-style: none;
    position: relative;
    padding: 0.2rem 0.5rem;

}

.listItem::after {

    content: "";
    width: 0%;
    height: 6%;
    background-color: var(--dorado-intenso);
    position: absolute;
    bottom: -30%;
    transition: width 0.25s ease-in-out;
}

.listItem:hover::after {

    width: 120%;
}


/******************MAIN*****************/

.main {

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;

}

.bienvenidaContainer {

    width: 100%;
    height: 80vh;
    display: flex;
    align-items: center;
    background-image: url(img/fondoprincipal/fondo_principal.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    z-index: 0;
    box-shadow: inset 0 -15px 15px -10px #eeece9;

}

/*.bienvenidaContainer::after{

    content: "";
    width: 100%;
    height: 100%;
    background-color: #00000027;
    position: absolute;
}*/

.textoBienvenidaContainer {

    width: 50%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 2;

}

.tituloBienvenida {

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    position: relative;
    color: var(--dorado-intenso);
}

.tituloBienvenida::after {

    content: "";
    width: 120%;
    height: 2%;
    bottom: 0;
    position: absolute;
    background-color: var(--dorado-intenso);
}


.textoBienvenida {

    width: 90%;
    font-size: 2rem;
    text-align: center;
}

.subParrafo {

    width: 80%;
    padding: 1rem;
    font-size: 1.2rem;
    line-height: var(--linea-texto);
    background-color: #e6d4b2a4;
    text-align: center;
    border-radius: 1rem;
}

.botonPrincipal {

    width: 100%;
    display: flex;
    justify-content: center;

}

.botonPrincipal a {

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    padding: 1rem 1.5rem;
    color: white;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    background-color: var(--dorado-intenso);
    transition: transform 0.2s linear;
}

.botonPrincipal a:hover {

    transform: scale(1.05);

}


/*.botonPrincipal a::after{

    content: "";
    width: 110%;
    height: 110%;
    right: -120%;
    background-color: #d072a9;
    position: absolute;
    z-index: 0;
    transition: right 0.1s linear;
}*/

.botonPrincipal a:hover::after {

    right: -5%;
}

/************PERFIL PROFESIONAL************/
.perfilProfesionalContainer {

    width: 90%;
    height: 80vh;
    display: flex;
    align-items: center;
}

.perfilProfesionalContainerImg {

    width: 50%;
    height: 80%;
    display: grid;
    justify-content: center;
    grid-template-columns: 60% 30%;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: dense;
    gap: 0.5rem;

}

.MariaJose {

    grid-column: span 1;
    grid-row: span 3;
    border-radius: 2rem;
    overflow: hidden;

}

.perfilimg {

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1rem;

}

.perfilimg img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.perfilProfesionalContainerTexto {

    width: 50%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    background-image: url(img/fondoprincipal/logo_vertical_izquierdo.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: rgba(255, 255, 255, 0.6);
    background-blend-mode: lighten;
    border-radius: 1rem;
    border: 1px solid var(--dorado-intenso);

}

.perfilTitulo {

    display: flex;
    justify-content: center;
    font-size: var(--titulo-size);
    padding: 0.5rem 1rem;
    text-align: center;
    position: relative;
}

/*.perfilTitulo::after{

    content: "";
    width: 100%;
    height: 3%;
    bottom: 0;
    position: absolute;
    background-color: var(--turquesa-clara);
}*/


.perfilTexto,
.parrarfoCeleste {

    width: 70%;
    font-size: var(--parrafo-size);
    text-align: justify;
}

.contactoNumero {
    display: flex;
    justify-content: center;
    width: 100%;

}

.contactoNumero a {

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: 1rem;
    background-color: var(--dorado-intenso);
    border: 1px solid white;
    color: white;
    position: relative;
    outline: none;
    transition: color 0.2s linear;
}

.contactoNumero a:hover {

    background-color: var(--rosa-principal);
    color: rgb(20, 20, 20);

}

.contactoNumero a::after {

    content: "→ Ir";
    color: #545454;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    position: absolute;
    right: -40%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.contactoNumero a:hover::after {

    opacity: 1;
}

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

.serviciosContainer {

    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    position: relative;
    background-color: var(--rosa-claro);

}

.serviciosTitulo {

    display: flex;
    justify-content: center;
    font-size: var(--titulo-size);
    padding: 0.5rem 1rem;
    text-align: center;
    position: relative;
}

.serviciosTitulo::after {

    content: "";
    width: 100%;
    height: 3%;
    bottom: 0;
    position: absolute;
    background-color: var(--dorado-intenso);
}

.serviciosContainerImg {

    width: 80%;
    height: 70%;
    display: flex;
    /*display: grid;
    /*grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100%;*/
    align-items: center;
    gap: 3rem;
    
}

.serviciosItemImg {

    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.26);
    transition: transform 0.5s ease-in-out;
}

.serviciosItemImg img {

    width: 100%;
    height: 70%;
    object-fit: cover;
}

.serviciosItemImg:hover {

    transform: translateY(-1rem);
}

.detallesServicio {

    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--parrafo-size);
    gap: 1rem;

}

.detallesServicio a{

    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
    transition: color 0.2s linear,  background-color 0.3s linear;
}

.detallesServicio a:hover{

    color: white;
    background-color: var(--dorado-intenso);
}

/**********TRATAMIENTOS FACIALES***************/

.facialContainer {

    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;

}

.facialTitulo {

    display: flex;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: var(--titulo-size);
    position: relative;
}

.facialTitulo::after {

    content: "";
    width: 100%;
    height: 3%;
    bottom: 0;
    position: absolute;
    background-color: var(--dorado-intenso);
}

.facialTexto {

    width: 90%;
    height: 90%;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3. 1fr);
    gap: 1rem;
    padding: 1rem;
    font-size: var(--parrafo-size);

}

.facialItem {

    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1rem;

}

.facialImg {

    width: 20%;
    overflow: hidden;

}

.facialItem img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 100%;
    border: 3px solid var(--dorado-intenso);
    aspect-ratio: 1/1;
}

.detalles {

    width: 75%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid var(--dorado-intenso);
    overflow: hidden;

}

.detalles:hover .detallesTitulo {

    transform: scale(1.1);

}

.detallesTitulo {

    width: 100%;
    text-align: center;
    background-color: var(--rosa-principal);
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    transition: transform 0.3s ease;
}

.detalleTexto {

    height: 100%;
    display: flex;
    align-items: center;
    padding: 0.5rem;

}

/********TRATAMIENTOS CORPORALES*************/

.corporalesContainer {

    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--rosa-claro);

}

.tituloCorporales {

    display: flex;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: var(--titulo-size);
    position: relative;
}

.tituloCorporales::after {

    content: "";
    width: 100%;
    height: 3%;
    bottom: 0;
    position: absolute;
    background-color: var(--dorado-intenso);
}

.detallesCorporales {

    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.detallesCorporalesImg {

    width: 40%;
    height: 70%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 1rem;

}

.imgCorporalPrincipal {

    grid-column: span 1;
    grid-row: span 2;

}

.img {

    display: flex;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.26);
}

.img img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.detallesCorporalesTexto {

    width: 50%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding-left: 2rem;

}

.itemCorporal {

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    transition: color 0.2s linear, transform 0.2s linear;
}

.itemCorporal:hover {

    transform: translateX(5%);

}


.itemCorporal:hover .itemTituloCorporal {

    color: black;
}

.itemTituloCorporal {

    font-size: 1.5rem;
}

.itemTextoCorportal {

    font-size: 1.2rem;
    padding: 0.3rem 1rem;
    border-left: 0.2rem solid var(--rosa-principal);

}

.item2 {

    padding-left: 3rem;
}

.item3 {

    padding-left: 6rem;
}


/********EXPERIENCIAS PREMIUM*************/

.premiumContainer {

    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}


.tituloPremium {

    display: flex;
    justify-content: center;
    text-align: center;
    font-size: var(--titulo-size);
    padding: 0.5rem 1rem;
    position: relative;
}

.tituloPremium::after {

    content: "";
    width: 100%;
    height: 3%;
    bottom: 0;
    position: absolute;
    background-color: var(--dorado-intenso);
}


.detallesPrermiumContainer {

    width: 90%;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 1rem;

}

.premiumItem {

    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 1rem 0;
    border-radius: 1rem;
    transition: box-shadow 0.2s linear;

}

.premiumItem:hover {

    box-shadow: 0 0 0 0.1rem var(--dorado-intenso);

}

.premiumImg {

    width: 50%;
    position: relative;
}

.premiumImg::after {

    content: "VIP";
    width: 40%;
    height: 40%;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(img/fondoprincipal/estrella_promocion.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -10%;
    right: -10%;
}

.premiumImg img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 100%;

}

.detalleTituloPremium {

    width: 100%;
    text-align: center;
    border-radius: 1rem;
    padding: 0.2rem 0;
    font-size: 1.5rem;
    background-color: #d1b172;

}

.textoPremiumContainer {

    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.textoPremium {

    text-align: justify;
    font-size: var(--parrafo-size);
   
}

/*******ASESORAMIENTO*********/

.asesoramientoContainer {

    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-top: 2rem;
    background-color: var(--rosa-claro);

}

.asesoramientoTitulo {

    display: flex;
    justify-content: center;
    text-align: center;
    font-size: var(--titulo-size);
    padding: 1rem;
    position: relative;

}

.asesoramientoTitulo::after {

    content: "";
    width: 100%;
    height: 3%;
    bottom: 0;
    position: absolute;
    background-color: var(--dorado-intenso);
}

.asesoramientoItemContainer {

    width: 90%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;

}

.asesoramientoImg {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    overflow: hidden;

}

.asesoramientoImg img {

    width: 70%;
    height: 70%;
    object-fit: cover;
    box-shadow: 1rem -1rem rgb(245, 183, 183);
    border-radius: 1rem;

}

.asesoramientoTextoContainer {

    width: 50%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: var(--linea-texto);
    background-image: url(img/fondoprincipal/logo_vertical_izquierdo.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: rgba(255, 255, 255, 0.6);
    background-blend-mode: lighten;
    border-radius: 0.2rem;

}

.asesoramientoTexto {

    width: 80%;
    text-align: justify;
    font-size: var(--parrafo-size);

}

/*******DEPILACION*******/

.depilacionContainer {

    width: 90%;
    height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;

}

.tituloDepilacion {

    display: flex;
    justify-content: center;
    text-align: center;
    font-size: var(--titulo-size);
    padding: 1rem;
    position: relative;

}

.tituloDepilacion::after {

    content: "";
    width: 100%;
    height: 3%;
    bottom: 0;
    position: absolute;
    background-color: var(--dorado-intenso);
}

.depilacionDetalles {

    width: 80%;
    height: 70%;
    display: flex;
    justify-content: center;
    gap: 4rem;

}

.depilacionItem {

    width: 35%;
    display: flex;
    flex-direction: column;
    /*gap: 2rem;*/
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.26);
    border-radius: 2rem;
    transition: transform 0.2s linear;

}

.depilacionItem:hover {

    transform: translateY(-1rem);
}

.depilacionDetalleImg {

    width: 100%;
    height: 50%;
    border-radius: 1rem 1rem 0 0;
    overflow: hidden;


}

.depilacionDetalleImg img {

    width: 100%;
    height: 100%;
    object-fit: cover;
}

.depilacionDetalleTexto {

    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;


}

.tituloDetalleDepilacion {

    width: 100%;
    text-align: center;
    background-color: var(--rosa-principal);
    padding: 0.5rem;
    /*border-radius: 1rem;*/
}

.parrafoDetalleDepilacion {

    width: 80%;
    text-align: justify;
}

/*********CONTACTOS************/

.contactoContainer {

    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.ItemContactoContainer {

    width: 70%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background-color: var(--rosa-claro);

}

.tituloContacto {

    width: 100%;
    text-align: center;
    background-color: white;
    font-size: var(--titulo-size);
    padding: 1rem 0;
}

.iconosContactoContainter {

    width: 90%;
    height: 40%;
     display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;

}

.imgRedes{
    
     display: flex;
    align-items: center;
    justify-content: center;
}


.imgRedes a{

    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.imgRedes a img {

    width: 60%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    object-fit: contain;
}

.imgContainer {

    display: flex;
    width: 30%;
    height: 90%;


}

.imgContainer img {

    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*******WHATSAPP ABSOLUTE******/

.containerWhatsapp {

    width: clamp(4vw, 4vw, 500px);
    height: auto;
    position: fixed;
    right: 2%;
    bottom: 2%;
}

.containerWhatsapp a img {

    width: 100%;
    object-fit: contain;
}

/******FOOTERR******/

.footer {

    width: 100%;
    display: flex;
    background-color: var(--gris-profundo);

}

.resumenHorario> h3{

    letter-spacing: 0.2rem;
}

.footer > div {

    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0;
    color: white;
}

.resumenRedes {

    border-left: 0.2rem solid white;
    border-right: 0.2rem solid white;
}