@charset "UTF-8";
/* CSS Home */

.area-bg_primary {background-color: var(--color-2); border-radius: 15px;}
.box-servicos {text-transform: uppercase; color: var(--color-1); padding: 10px 30px; border: 1px solid var(--color-2); border-radius: 10px;}
.divider {height: 1px; background-color: var(--color-1);opacity: 1; margin: 0 auto; width: 80%;}

#banner {    height: 80vh;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -5px !important}
#banner .banner_content {position: absolute; left: 50%;transform: translateX(-50%);width: 100%;top: 5%; z-index: 2}
#banner h1{
    font-size: 70px;
    font-family: var(--font-1);
    font-weight: 100;line-height:1
}
#sobre,#protocolos{background-color:rgb(216 195 165 / 50%)}
#sobre * {color: #fff;}
#servicos .box{
    background: var(--color-2);
    color: var(--color-1);
    font-family: var(--font-1);
    text-transform: uppercase;
    font-size: 22px;
    border-radius: 10px 10px 0 0;
    padding: 8px;
}
#tecnologias_faciais h2,#tecnologias_capilares h2,#corpo-clinico h2{
    font-family: var(--font-1);
    font-weight: 900;
    border-left: 4px solid #d8ad6c;
    display: inline;
    line-height: 1;
    padding-left: 20px;
    font-size: 40px;
}
#tecnologias_faciais .box,#tecnologias_capilares .box{display:block}
#tecnologias_faciais .box p,#tecnologias_capilares .box p{
    display: inline-block;
    margin: 0;
    padding: 10px 40px;
    background: var(--color-1);
    font-size: 14px;
    letter-spacing: 2px;
    border-radius: 10px;
    font-weight: 400;
}
#tecnologias_capilares .box p{
	background: var(--color-2)!important;color:#fff
}
#tecnologias_faciais h3{
    text-align: center;
    width: 225px;
    font-weight: 900;
    margin: 25px auto 0px;
    font-size: 28px;
    line-height: 1;
}
#tecnologias_faciais .swiper p,#tecnologias_capilares .swiper p{text-align:left}

#cta-1 {        background: var(--color-2);
        border-radius: 65px 0;}

#corpo-clinico h3 {    color: var(--color-3);
    font-size: clamp(1rem, 2vw, 1.2rem);
    text-transform: none;
    font-family: var(--font-1);
    font-weight: 900;
    margin-top: 1rem;
    margin-bottom: 0;}

#clinica {
    background-image: url(https://flavia.wsilab.com.br/wp-content/uploads/2025/07/bg-clinica.webp);
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
}

#corpo-clinico h2{
    text-align: center;
    display: table;
    margin: 0 auto;
}
#diferenciais .box-cta{background-color: var(--color-1);padding: 2rem 1rem;border-radius: 15px;}
#diferenciais .box-cta h2 span{font-size: clamp(3.5rem, 7vw, 8rem);line-height: .7;}

#diferenciais .card-diferenciais{background-color: rgba(195, 167, 147, 20%);border: 1px solid var(--color-2); border-radius: 20px;padding: 2rem;}
#diferenciais .card-diferenciais h3{color: var(--color-3);border-bottom: 1px solid var(--color-3);padding-bottom: 10px;font-weight: bold;}
#diferenciais .box-icon .img-container{background-color: var(--color-2);padding: 1rem;border-radius: 15px;width: 18vw;height: 18vw;margin: 0 auto;}
#diferenciais .box-icon::after{content: '';height: 3rem;width: 1px;margin: 0 auto;display: block;background-color: var(--color-2);}
#diferenciais .box-icon img{object-fit: cover;width: 100%;height: 100%;}

@media (max-width: 735px) {
	#banner h1{
		font-size: 14vw;
	}
	
	.img-black {
		width: 100px !important;
	}
}

@media (max-width: 991.98px) {
    #diferenciais .area-diferenciais .col{margin-top: -1.4rem;}
	#banner{height:90vh}
	#banner .banner_content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    bottom: 5%;
    z-index: 2;
    padding: 0 3.33%;top:auto
}
	#banner h1,#banner p {
    text-align: left !important;
}
	#sobre .area-bg_primary{
    padding: 5.33%;
}
	#sobre h2,#cta-1 h2{
    font-size: 40px!important;
}
	#sobre .font-3,#cta-1 .font-3{
    font-size: 55px;
}
#tecnologias_faciais .box p, #tecnologias_capilares .box p {
    display: inline-block;
    margin: 0;
    padding: 20px;
    background: var(--color-1);
    font-size: 16px;
    letter-spacing: 2px;
    border-radius: 10px;
    font-weight: 400;
}
#protocolos .box-1,#protocolos .box-2,#protocolos .box-3,#protocolos .box-4{top:auto!important;bottom:-30px!important;right:0!important;left:auto!important}
	#protocolos .box-1{background: var(--color-2)!important}
	#protocolos .box-2{background: var(--color-1)!important}
	#protocolos .box-3{background: var(--color-2)!important}
	#protocolos .box-4{background: var(--color-1)!important}
	#protocolos .box-1 h3, #protocolos .box-3 h3,#protocolos .box-1 p, #protocolos .box-3 p{color:#fff!important}
	#protocolos .box-4 h3, #protocolos .box-2 h3,#protocolos .box-4 p, #protocolos .box-2 p{color: var(--color-3)!important}
	#cta-1{padding:0 5.33%}
	
	
	
}

@media (min-width: 992px) {
    .divider {width: 40%;}
    .area-bg_primary{margin: 0 6rem;padding: 3rem 1.5rem !important;}

    #banner .banner_content {top: 50%;transform: translateY(-50%);left: 17%; width: fit-content;}
	
	#sobre div img {margin-left: 7rem}
	#servicos .row{margin: 0 8rem}

    #diferenciais .area-diferenciais{margin-top: -2rem;}
    #diferenciais .box-cta{padding: 4rem 2rem;}
    #diferenciais .box-icon .img-container{width: 5vw;height: 5vw;}
    #diferenciais .card-diferenciais{height: 65%;}
	
#tecnologias_faciais .swiper p{padding:0 50px}
	
}