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

/*Estilos Principales*/
html,body{
    font-family: 'Seg0e UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.7em;}

    a{color:#333;text-decoration: none;}
    h1,h2,h3{padding-bottom: 10px 0;}
   
/*utilidades*/
.container{margin: auto; max-width: 1100px;overflow:auto; padding: 0 20px;}

/*paddin*/

.py-1{padding:10px 0;}
.py-2{padding:20px 0;}
.py-3{padding:30px 0;}

.btn{
    display: inline-block;font-size: 18px; color:#fff; background: #333;
    padding: 13px 20px;
}

/* Barra de navegación */
#navbar{
    background: #000;
    color:#fff;
}

#navbar a{color:#fff;}

/* Contenedor interno: logo a la izquierda, menú a la derecha */
#navbar .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;          /* ocupa todo el ancho, sin centrarse */
    max-width: 100%;
    padding: 0 8px;     /* casi pegado a la esquina izquierda */
}

/* Logo completamente a la izquierda */
#navbar h1{
    margin: 0;
    padding: 15px 0;
}

/* Navegación principal (limpia, sin duplicados) */
#navbar ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}

#navbar ul li a{
    display: block;
    padding: 10px 18px;
    border: 1px solid #fff;      /* borde blanco acorde a la paleta */
    border-radius: 20px;         /* bordes redondeados para verse más pulido */
}

#navbar ul li a:hover,
#navbar ul li a.current{
    background: #1ddd95;
    color: #000;
}

/*showcase*/
#showcase {
    background: url(../img/bg-1.jpg) no-repeat center center;
    background-size: cover;   /* Hace que la imagen cubra todo el área */
    height: 400px;            /* Ajusta la altura del área visible del fondo */
}

#showcase .showcase-content{
    color: white;
    text-align: center;
    padding-top: 170px;       /* Baja el texto dentro del fondo */
}

#showcase .showcase-content h1{
    font-size: 60px;
    line-height: 1.2em;
}

#showcase .showcase-content p{
    padding-bottom: 20px;
    line-height: 1.7em;
}

#home-info{
    height: 400px;
}

/* Columna izquierda: imagen de fondo */
#home-info .info-img{
    float: left;
    width: 50%;
    height: 100%;
    background: url(../img/imagen1.jpg) no-repeat center center;
    background-size: cover;
}

/* Columna derecha: texto de la historia */
#home-info .info-content{
    float: right;
    width: 50%;
    padding: 40px;
}

/* Sección exfoliación: misma estructura, otra imagen */
#exfoliacion-info{
    height: 400px;
}

#exfoliacion-info .exfo-img{
    float: right;
    width: 50%;
    height: 100%;
    background: url(../img/masaje1.jpg) no-repeat center center;
    background-size: cover;
}

#exfoliacion-info .exfo-content{
    float: left;
    width: 50%;
    padding: 40px;
}

/* Sección rejuvenecimiento: imagen a la izquierda, texto a la derecha */
#rejuvenecimiento-info{
    height: 400px;
}

#rejuvenecimiento-info .reju-img{
    float: left;
    width: 50%;
    height: 100%;
    background: url(../img/foto2.jpg) no-repeat center center;
    background-size: cover;
}

#rejuvenecimiento-info .reju-content{
    float: right;
    width: 50%;
    padding: 40px;
}

/* Navegación principal */
#navbar ul{
    list-style: none;
    margin: 0;
    padding: 0;
    float: right;          /* Mueve el menú a la esquina superior derecha */
}

#navbar ul li{
    display: inline-block;
    margin-left: 15px;      /* Separación entre opciones */
}