:root {
	--wd-text-font: "Nunito Sans", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 16px;
	--wd-title-font: "Lora", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: rgb(255,255,255);
	--wd-entities-title-font: "Nunito Sans", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 800;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: var(--wd-text-font);
	--wd-widget-title-font: "Nunito Sans", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 700;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Nunito Sans", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(201,169,110);
	--wd-alternative-color: #fbbc34;
	--btn-default-font-family: "Nunito Sans", Arial, Helvetica, sans-serif;
	--btn-default-font-weight: 800;
	--btn-default-font-size: 14px;
	--btn-default-bgcolor: rgb(201,169,110);
	--btn-default-bgcolor-hover: rgba(201,169,110,0.9);
	--btn-default-padding: 12px 32px 12px 32px;
	--btn-accented-bgcolor: rgb(201,169,110);
	--btn-accented-bgcolor-hover: rgba(201,169,110,0.9);
	--btn-accented-padding: 12px 32px 12px 32px;
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(201,169,110);
	--wd-link-color-hover: rgba(201,169,110,0.9);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(27,27,27);
	background-image: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(254,255,255);
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 768.98px) {
	:root {
		--wd-text-font-size: 14px;
	--wd-widget-title-font-size: 14px;
	--btn-default-padding: 8px 20px 8px 20px;
	--btn-accented-padding: 8px 20px 8px 20px;
	}

}
:root{
--wd-container-w: 1250px;
--wd-form-brd-radius: 0px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 12px;
}

@media (min-width: 1250px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1250px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1250px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}


.wd-page-title {
background-color: rgb(13,13,13);
}

.scrollToTop{
	right: inherit !important;
	left: 20px !important;
}

.site-logo{
	opacity: 0.8 !important;
}

/*.twentytwenty-before-label,
.twentytwenty-after-label{
	opacity: 1 !important;
}*/

.whb-tiueim5f5uazw1f1dm8r.wd-header-nav .wd-nav{
	--nav-color: rgba(255, 255, 255, 0.6);
}

/* Centrado quirúrgico: SOLO si el contenedor del paso 1 está visible en el DOM */
.wpcf7-form .uacf7-step[step-id="1"]:not([style*="display: none"]):not([style*="display:none"]) .uacf7-buttons {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}


.woodmart-counter .counter-value::before {
    content: "+ "; /* Cambia aquí el prefijo que desees */
    display: inline-block;
}


#heroSection .title-subtitle,
#hihlights .title-subtitle,
#trichotestSection .title-subtitle,
#autodiagnosticoHome .title-subtitle,
#resultadosHome .title-subtitle,
#testimoniosHome .title-subtitle{
display: inline-block;
}

#heroSection .title-subtitle::before,
#hihlights .title-subtitle::before,
#autodiagnosticoHome .title-subtitle::before,
#resultadosHome .title-subtitle::before,
#testimoniosHome .title-subtitle::before,
#ctaSection .title-subtitle::before,
.descriptionSection .title-subtitle::before,
.titleSectionDetail .title-subtitle::before,
#appIntegral .title-subtitle::before{
	content: "";
  display: inline-block;
  width: 60px;                  /* O el ancho exacto que desees, ej. 200px */
  height: 20px;                 /* Ajusta a la altura real de tu diseño en Figma */
  background-image: url('https://www.grupointegralhair.com/wp-content/uploads/2026/07/gold-line-left.svg');
  background-repeat: no-repeat;
  background-size: 100%;     /* Escala el SVG sin deformarlo */
  background-position: left center; /* Alineación (puede ser 'center center') */
  margin-bottom: -10px; 
}

#ctaSection .title-subtitle::before{
	margin-bottom: -8px !important; 
}

#ctaSection .title-subtitle::after,
.titleSectionDetail .title-subtitle::after,
.titleSectionDetailRight .title-subtitle::after{
	content: "";
  display: inline-block;
  width: 60px;                  /* O el ancho exacto que desees, ej. 200px */
  height: 20px;                 /* Ajusta a la altura real de tu diseño en Figma */
  background-image: url('https://www.grupointegralhair.com/wp-content/uploads/2026/07/gold-line-left.svg');
  background-repeat: no-repeat;
  background-size: 100%;     /* Escala el SVG sin deformarlo */
  background-position: left center; /* Alineación (puede ser 'center center') */
  margin-bottom: -8px; 
	transform: scaleX(-1);
}

.titleSectionDetail .title-subtitle::after,
.titleSectionDetailRight .title-subtitle::after{
	margin-bottom: -10px !important; 
}

#trichotestSection .title-subtitle::before,
.headerTitleSection .title-subtitle::before{
	content: "";
  display: inline-block;
  width: 70px;                  /* O el ancho exacto que desees, ej. 200px */
  height: 20px;                 /* Ajusta a la altura real de tu diseño en Figma */
  background-image: url('https://www.grupointegralhair.com/wp-content/uploads/2026/07/white-line-left.svg');
  background-repeat: no-repeat;
  background-size: 100%;     /* Escala el SVG sin deformarlo */
  background-position: left center; /* Alineación (puede ser 'center center') */
  margin-bottom: -5px; 
	margin-right: 16px !important;
}


#trichotestSection .title-subtitle::after,
.headerTitleSection .title-subtitle::after{
	content: "";
  display: inline-block;
  width: 70px;                  /* O el ancho exacto que desees, ej. 200px */
  height: 20px;                 /* Ajusta a la altura real de tu diseño en Figma */
  background-image: url('https://www.grupointegralhair.com/wp-content/uploads/2026/07/white-line-right.svg');
  background-repeat: no-repeat;
  background-size: 100%;     /* Escala el SVG sin deformarlo */
  background-position: left center; /* Alineación (puede ser 'center center') */
  margin-bottom: -5px; 
	margin-left: 16px !important;
}

#trichotestSection .wd-el-video,
#trichotestVideoSection .wd-el-video,
#exosomasVideoSection .wd-el-video,
.videoSection .wd-el-video{
	margin: 0 auto !important; 
	text-align: center !important;
}

#trichotestSection .wd-el-video-overlay:after,
#trichotestVideoSection .wd-el-video-overlay:after,
#exosomasVideoSection .wd-el-video-overlay:after,
.videoSection .wd-el-video-overlay:after{
	background: transparent !important;
}


.bafg-twentytwenty-wrapper{
	border-radius: 16px !important;
	overflow: hidden;
	border: solid 2px #C9A96E !important;
}

.twentytwenty-before-label::before,
.twentytwenty-after-label::before{
	border-radius: 32px !important;
	overflow: hidden !important;
}

.twentytwenty-horizontal .twentytwenty-before-label:before,
.twentytwenty-horizontal .twentytwenty-after-label:before {
  top: 8px !important;
  margin-top: 0px !important;
	font-family: 'Nunito Sans'!important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
}


.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after{
	background: #C9A96E !important;
}


.counter-value{
	font-family: var(--wd-title-font) !important;
}

.counter-label{
	color: white !important;
}


[class*=box-icon-with-].box-with-text{
	--text-bg-size: 40px !important;
}

[class*=box-icon-with-].box-with-text .info-box-icon{
	font-size: 16px !important;
	line-height: 34px !important;
	font-family: var(--wd-title-font) !important;
	border: solid 2px #C9A96E;
}

.wd-info-box :is(.info-box-subtitle,.info-box-title,.info-box-inner):not(:first-child){
	margin:0 !important;
}

.wd-fontsize-m{
	font-size: 16px !important;
}

.wd-prefooter{
	padding: 0px !important;
}

.wd-content-layout{
	padding-bottom: 0px !important;
}

.steps-form {
	margin-bottom: 64px !important;
}

.steps-form .steps-row .steps-step .btn-circle{
	height: 48px !important;
	width: 48px !important;
	line-height: 48px !important;
	padding: 0px !important;
	font-size: 24px !important;
	font-family: 'Lora' !important;
}

.steps-form .steps-row .steps-step .btn-circle.uacf7-btn-active{
	color: #C9A96E !important;
	border: solid 1px #C9A96E !important;
	box-shadow: 0px 0px 7px 0px #C9A96E;
}

.steps-form .steps-row:before{
	top: 24px !important;
}

.wpcf7-form h5{
	font-size: 24px !important;
	line-height: 32px !important;
	color: #000000;
}

.wpcf7-form label{
	color: #444444;
	font-family: 'Nunito Sans' !important;
	font-size: 16px !important;
	line-height: 24px !important;
}

.wpcf7-form select{
	border: solid 1px #444444 !important;
	width: auto;
	min-width: 300px !important;
	border-radius: 32px !important;
}

.wpcf7-form input[type=number]{
	border: solid 1px #444444 !important;
	width: auto;
	border-radius: 32px !important;
}

.wpcf7-form input{
	border-radius: 32px !important;
	border: solid 1px #444444 !important;
}

.wpcf7-form textarea{
	border-radius: 16px !important;
	border: solid 1px #444444 !important;
}

.wpcf7-form input[type=submit]{
	border: none !important;
}

.paso4-fila1 .wpb_column.vc_col-sm-12{
	max-width: 98% !important;
	margin: 0 8px !important;
	margin-bottom: 24px !important;
}

.paso4-fila2 .wpb_column.vc_col-sm-3 {
    max-width: 24% !important;
    margin: 0px 6px !important;
	margin-bottom: 24px !important;
}

#selector-grado .wpcf7-list-item{
	width: 45%;
	margin-bottom: 8px;
}

.columna-imagen{
	text-align: center !important;
}

#comoFunciona .info-box-title u,
#appIntegral .info-box-title u{
	text-decoration: none !important;
	color: var(--wd-primary-color) !important;
}

#appIntegral h4{
	font-size: 22px !important;
	line-height: 28px !important;
}


.uacf7-prev{
	border: solid 1px #C9A96E !important;
	background-color: transparent !important;
	color: #C9A96E !important;
}

.linksCopyFooter a{
	margin:0px 8px;
}


.resultado-test .title span{
	color: #C9A96E !important;
}

.wd-el-video-control{
	border-radius: 32px !important;
	overflow: hidden;
	background-color: #C9A96E !important;
	max-width: 200px !important;
}

.wd-el-video-control,
.wd-el-video-link{
	max-height: 48px !important;
}


@media screen and (max-width: 500px) {
	#appIntegral h4{
		font-size: 18px !important;
		line-height: 24px !important;
	}

	
	footer,
	footer .wd-image,
	#contactoFooter .wd-text-block-wrapper,
	#contactoFooter .wd-list li{
		text-align: center !important;
		justify-content: center !important;
	}
	
	.noMobile{
		display: none !important;
	}
	
	.mobileCenterText{
		text-align: center;
	}
	
	.wd-copyrights .container{
		display: flex !important;
		flex-wrap: wrap-reverse !important;
		text-align: center;
	}
	
	.wd-copyrights .container .wd-col-end{
		width: 100% !important;
	}
	
	.linksCopyFooter{
		display: block;
	}
	
	.linksCopyFooter a{
		display: block;
		margin: 0 auto;
		margin-bottom: 16px !important;
		width: 100% !important;
		text-align: center !important;
	}
	
	.wd-tools-element>a{
		color: #C9A96E !important;
	}
	
	#heroSection{
		min-height: 650px !important;
		max-height: 650px !important;
	}

	#heroSection .title,
	#heroSection .title-subtitle,
	#heroSection .wd-button-wrapper{
		text-align: center !important;
		width: 100% !important;
	}
	
	#heroSection .wd-button-wrapper a{
		width: 210px !important;
	}
	
	#heroSection .title-subtitle::before{
		margin-bottom: -8px;
	}
	
	#heroSection .title-subtitle::after{
		content: "";
		display: inline-block;
		width: 60px;                  /* O el ancho exacto que desees, ej. 200px */
		height: 20px;                 /* Ajusta a la altura real de tu diseño en Figma */
		background-image: url('https://www.grupointegralhair.com/wp-content/uploads/2026/07/gold-line-left.svg');
		background-repeat: no-repeat;
		background-size: 100%;     /* Escala el SVG sin deformarlo */
		background-position: left center; /* Alineación (puede ser 'center center') */
		margin-bottom: -8px; 
		transform: scaleX(-1);
	}
	
	#trichotestSection .title-subtitle::before,
	#trichotestSection .title-subtitle::after{
		display: none !important;
	}
	
	#trichotestSection .title-subtitle{
		color: #ffffff !important;
		font-size: 16px !important;
		line-height: 20px !important;
	}
	
	/*#trichotestVideoSection,
	#trichotestVideoSection .wd-el-video,
	#exosomasVideoSection,
	#exosomasVideoSection .wd-el-video,
	.videoSection,
	.videoSection .wd-el-video{
		max-height: 375px !important;
	}*/
	
	#trichotestVideoSection .wd-el-video{
		margin: 0 auto !important; 
		text-align: center !important;
	}
	
	#comoFunciona .wd-info-box{
		display: block !important;
	}
	
	#comoFunciona .wd-info-box .box-icon-wrapper,
	#comoFunciona .wd-info-box .info-box-content{
		max-width: 100% !important;
		width: 100% !important;
		text-align: center !important;
	}
	
	#comoFunciona .wd-info-box .box-icon-wrapper{
		margin-bottom: 24px !important;
	}
	
	#comoFunciona .info-box-title{
		font-size: 20px !important;
		margin-bottom: 8px !important;
	}
	
	.headerTitleSection h1{
		font-size: 56px !important;
		line-height: 64px !important;
	}
	
	.headerTitleSection .title-subtitle{
		font-size: 18px !important;
		line-height: 24px !important;
	}
	
	.descriptionSection{
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
	
	.titleSectionDetail .title-subtitle{
		font-size: 18px !important;
		line-height: 24px !important;
	}
	
	#tratamientoFacialesNoQirurgicos h1{
		font-size: 50px !important;
		line-height: 56px !important;
	}
	
	#tratamientoFacialesNoQirurgicos .title-subtitle::before,
	#tratamientoFacialesNoQirurgicos .title-subtitle::after,
	#cosmiatriaHeader .title-subtitle::before,
	#cosmiatriaHeader .title-subtitle::after,
	#corporalesNoQuirurgicoHeader .title-subtitle::before,
	#corporalesNoQuirurgicoHeader .title-subtitle::after,
	#autodiagnosticoHeader .title-subtitle::before,
	#autodiagnosticoHeader .title-subtitle::after{
		width: 55px !important;
	}
	
	#corporalesNoQuirurgicoHeader .title-subtitle{
		font-size: 17px !important;
		line-height: 24px !important;
	}

	#autodiagnosticoHeader h1{
		font-size: 45px !important;
		line-height: 50px !important;
	}
	
	#autodiagnosticoHeader .title-subtitle,
	#diagnosticoFormSection .title-subtitle,
	#hihlights .title-subtitle{
		font-size: 14px !important;
		line-height: 18px !important;
	}
	
	#diagnosticoFormSection .title-subtitle::before,
	#diagnosticoFormSection .title-subtitle::after{
		width: 45px !important;
	}
	
	.selectContainer select{
		width: 100% !important;
		margin-bottom: 16px !important;
	}
	
	input[type=radio], input[type=checkbox]{
		width: 24px !important;
		height: 24px !important;
	}
	
	.radioMobile .wpcf7-list-item,
	.checkBoxMobile .wpcf7-list-item{
		width: 100% !important;
		margin-bottom: 16px !important;		
	}
	
	#selector-grado .wpcf7-list-item{
		margin-bottom: 16px !important;		
	}
	
	.paso4-fila2 .wpb_column.vc_col-sm-3{
		width: 100% !important;
	}
	

}