@font-face {
	font-family: 'Tangerine';
	src: url('https://www.clinicaplanas.com/ka/apps/clinicaplanas_assets/fonts/TangerineRegular.woff2') format('woff2'),
			url('https://www.clinicaplanas.com/ka/apps/clinicaplanas_assets/fonts/TangerineRegular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

.treatment section {
	background-color:#f1f1f1;
	margin: calc( var(--space) * 2 ) 0 0 0;
	padding-bottom: calc( var(--space) * 2 );
}

#section-faqs {
background-color: #ffffff;
}

.treatment section.precio {
	background: var(--background2);
}
	.treatment section h2 {
		border: 0;
	}

.gallery-hide { display:none; }
.gallery-hide-reactions { display:none; }


@media screen and (min-width: 1024px) {
	.home-background-1 {
		background: linear-gradient(180deg, rgba(239,240,242,1) 0%, rgba(241,242,244,1) 100%);
		background-image: url('https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2023/01/img02-min.jpg?v=W9H');
		min-height: calc( var(--100px) * 7 );
		background-color: #f0f1f3;
		background-repeat: no-repeat;
		background-position: bottom left;
		background-size: 50%;
	}
}

#section4 { position: relative; overflow: hidden; }
#section4 > .bg-img {
	position: absolute;
	bottom: 0%;
	right: 0%;
	max-height: 90%;
	z-index: 0;
	mix-blend-mode: darken;
}
@media screen and (min-width: 769px) and (max-width:1200px) {
	#section4 > .bg-img {
		max-height: 50%;
	}
}
@media screen and (max-width: 768px) {
	#section4 > .bg-img {
		max-height: 21%;
		right: -10%;
	}
}

#section6 { position: relative; }
#section6 p { text-align: left; }
#section6 > .bg-img {
	position: absolute;
	bottom: 0%;
	right: 0%;
	object-position: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	mix-blend-mode: darken;
}
@media screen and (max-width: 768px) {
	#section6 > .bg-img {
		height: 100%;
		object-position: 80%;
		opacity: 0.6;
	}
}



/*
#section6 > .container {
	background-image: url(https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2022/12/ilustracion2-min.jpg?v=A6J);
	background-repeat: no-repeat;
	background-size: 40vh auto;
	background-position: bottom right;
}
@media screen and (max-width: 1024px) {
	#section6 > .container {
		background-size: 20vh auto;
	}
}
*/

.home-background-1 .row {
		grid-gap: 0;
}

.bordered {
		padding: var(--space) calc( var(--space) * 2 );
		border: var(--5px) solid var(--pink-100);
		overflow: hidden;
}		

.bordered h2 {
		font-size: var(--26px);
		line-height: var(--30px);
		color: #a2a4a1;
		font-weight: 500;
		text-transform: uppercase;
		position: relative;
		padding-top: calc( var(--space) + var(--5px) );
		padding-bottom: calc( var(--space) + var(--5px) );
		/* margin-bottom: calc( var(--space) / 2 ); */
		/* margin-top: calc( var(--space) * 1 ); */
}

@media (min-width: 768px) {
	.bordered h2 {
		font-size: var(--60px);
		line-height: var(--65px);
	}
}

#form-terms {
	line-height: 1.3;
}



section .container hr {
	margin: 15px auto 30px auto;
}

img[alt="ilustr01"] {
	max-width: 50vw;
	margin: 0 auto;
	display: block;
	width: 450px;
}


.VIDEO img {
	max-height: 85vw;
	object-fit: cover;
	object-position: center;
}






/* -------------- TIPOGRAFÍAS -------------- */
h1 {
	font-size: clamp(var(--20px), 2.5vw, var(--40px));
	color: #545554;
}

.treatment h2 {
	font-size: clamp(var(--16px), 2vw, var(--30px));
	line-height: 1.3;
	font-weight: 700;
	color: #545554;
	border: none;
}

h1::after, 
.treatment h2:not(h2#relacionados)::after {
	content: "";
	display: block;
	width: var(--40px); 
	height: var(--4px); 
	background-color: #e4e4e4;
	margin: var(--20px) auto 0 auto;
}


/* h3 */
.title-border-slim {
	font-size: var(--24px);
	line-height: 1.4;
}

/* h3 */
.title-border-left,
.title-border-left-2 {
	font-size: var(--30px);
	line-height: 1.3;
	font-weight: 700;
	color: #545554;
}
	.title-border-left::after,
	.title-border-slim::after {
		content: "";
		display: block;
		width: var(--40px); 
		height: var(--4px); 
		background-color: #e4e4e4;
		margin-top: var(--20px);
		margin-bottom: var(--25px);
	}			
	.title-border-left-2::after {
		content: "";
		display: block;
		width: var(--40px); 
		height: var(--4px); 
		background-color: #545554;
		margin-top: var(--20px);
		margin-bottom: var(--25px);
	}

article.treatment .container p {
	text-align: start;
	line-height: 1.4;
	letter-spacing: 0;
}

.big-span {
	font-size: var(--24px);
	font-weight: bold;
}

/* -------------- COMUNES -------------- */
.pb-6 {
	padding-bottom: var(--60px);
}

.mt-6 {
	margin-top: var(--60px);
}

@media (max-width:768px) {
		.pb-6 {
			padding-bottom: var(--30px);
		}
	
		.mt-6 {
			margin-top: var(--30px);
		}
	
		h1 {
			line-height: 1.3;
		}
	
		h3 {
			font-size: var(--16px);
			line-height: 1.2;
		}
	
		.treatment h2 {
			line-height: 1.3;
			padding-top: var(--space);
		}
	
		.big-span {
			font-size: var(--16px);
		}
	
		/* h3 */
		.title-border-slim {
			font-size: var(--16px);
		}
	
		.title-border-left,
		.title-border-left-2 {
			font-size: var(--16px);
			line-height: 1.3;
		}
	
		.title-border-left::after,
		.title-border-left-2::after,
		.title-border-slim::after {
			width: var(--20px); 
			height: var(--3px); 
			margin-top: var(--10px);
			margin-bottom: var(--18px);
		}
	
		h1::after, 
		.treatment h2:not(h2#relacionados)::after {
			width: var(--20px); 
			height: var(--3px);
			margin: var(--8px) auto 0 auto; 
		}
}

/* -------------- HERO -------------- */
#hero-section {
	height: 75dvh;
	background-color:#F7E5D5;
	font-family: 'Tangerine';
	color: #515151;
	font-size: 9rem;
	font-size: clamp(var(--40px), 8vw, 9rem);
	line-height: 8rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 768px) {
	#hero-section {
		height: 30dvh;
		font-size: var(--50px);
		line-height: 2.8rem;
	}

	#section1 {
		padding-bottom: 0;
	}
}

/* -------------- CALIDAD-VIDA y MEDICINA-APPS -------------- */
.calidad-vida,
.medicina-regenerativa-apps {
	position: relative;
	display: inline-block;
	width: 100%;
}

.calidad-vida picture,
.calidad-vida img,
.medicina-regenerativa-apps picture,
.medicina-regenerativa-apps img {
	display: block;
	width: 100%;
	height: auto;
}




.calidad-vida-texto p {
	font-size: clamp(var(--9px), 2vw, var(--22px));
	letter-spacing: 0.3rem;
	font-weight: 200;
	padding-left: 8rem;
	margin-top: 1rem;
	color: #808586;
}

.calidad-vida {
	background: url('https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2025/04/regenerativa-01.jpg');
	background-repeat: no-repeat;
	width: 100%;
	aspect-ratio: 2.22746;
	background-size: 100%;
	display: grid;
	grid-template-columns: 50% 50%;
}

.calidad-vida-texto {
	display: flex;
	flex-direction: column;
}

.calidad-vida-texto h2 {
	font-family: 'Tangerine';
	font-size: clamp(var(--22px), 5vw, var(--99px));
	font-weight: 500;
	margin: 0;
	line-height: 1.1;
}
	.calidad-vida-texto h2::after {
		display: none !important;
	}

	@media (max-width: 768px) {
		.calidad-vida {
			background: url('https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2025/04/regenerativa-01-xs.jpg');
			aspect-ratio: 1.3851;
			background-size: 100%;
			grid-template-columns: 45% 55%;
			padding-top: var(--15px);
			padding-right: var(--20px);
		}

		.calidad-vida-texto h2 {
			line-height: 1.1;
		}
		.calidad-vida-texto p {
			letter-spacing: 0.1rem;
			padding-left: 2.5rem;
			margin-top: -5px;
		}
	}

/* -------------- SECTION FILLED BODY -------------- */

.filled-body {
	background: url('https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2025/04/regenerativa-02.jpg');
	width: 100%;
	aspect-ratio: 1.4295;
	max-height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	display: grid;
	grid-template-columns: 50% 50%;
	padding-left: 11%;
	padding-right: 11%;
}
	.filled-body h2 {
		font-family: 'Tangerine';
		font-size: clamp(var(--5px), 4vw, var(--45px));
		line-height: 1.1;
		color: #515151;
		padding-top: 0;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.filled-body h2::after {
		display: none !important;
	}

.filled-body .fila {
	display: flex;
	align-self: flex-end;
}

.filled-body .left-part {
	display: grid;
	grid-template-rows: 10% 15% 12% 14% 1fr 1fr 1fr 1fr;
}

.filled-body .right-part {
	display: grid;
	grid-template-rows: 10% 15% 12% 21% 12% 1fr 1fr;
}

.filled-body .fila-derecha {
	display: flex;
	align-self: flex-end;
	justify-content: end;
	text-align: end;
}

.filled-body .grey-span-app {
	font-size: clamp(var(--8px), 2vw, var(--16px));
	color: #515151;
	font-weight: lighter;
	letter-spacing: .3rem;
	line-height: 1.3;
	padding-bottom: var(--10px);
}

.filled-body .white-span-app {
	font-family: 'Tangerine';
	font-size: clamp(var(--10px), 3vw, var(--30px));
	line-height: 1.3;
	color: white;
}

.filled-body .normal-span-app {
	font-size: clamp(var(--8px), 2vw, var(--20px));
	letter-spacing: .1rem;
	color: #515151;
	font-weight: bolder;
}

.bg-filled-body {
	background-color: #F2C9A9;
}

@media (max-width: 768px) {
	
	.bg-filled-body .container {
		padding-left: var(--10px);
		padding-right: var(--10px);
	}

	.filled-body {
		background: url('https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2025/04/cuerpo-relleno-regenerativa.jpg');
		aspect-ratio: 1.1022;
		background-size: cover;
		background-repeat: no-repeat;
		padding-left: 0;
		padding-right: 0;
	}

	.filled-body h2 {
		line-height: 1;
	}

	.filled-body .grey-span-app {
		padding-bottom: var(--1px);
		letter-spacing: .2rem;
	}

	.filled-body .normal-span-app {
		line-height: 1.2;
	}
}


/* -------------- SECCION 2 COLUMNAS -------------- */
#two-columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--60px);
	margin-top: var(--60px);
	margin-bottom: var(--60px);
}

	#two-columns p {
		text-align: justify;
		line-height: 1.3;
	}

	#two-columns ul {
		margin-left: 0;
		padding-left: 20px;
	}	
	#two-columns li {
		line-height: 1.6;
	}

	@media (max-width:768px) {
		#two-columns {
			grid-template-columns: 1fr;
			gap: var(--35px);
			margin-top: var(--30px);
			margin-bottom: var(--30px);
		}
			#two-columns h3 {
				padding-bottom: var(--10px);
			}
	
		.consulta-inicial#two-columns{
			display: flex;
			flex-direction: column-reverse;
		}
	}

/* -------------- MEDICINA-REGENERATIVA-APLICACIONES -------------- */
.medicina-regenerativa-apps-texto {
	position: absolute;
	top: 45%;
	left: 4%;
	transform: translateY(-50%);
	color: #3b3b3b;
}

.medicina-regenerativa-apps-texto h2 {
	font-family: 'Tangerine';
	font-size: clamp(var(--22px), 5vw, var(--80px));
	font-weight: 500;
	margin: 0;
	line-height: 1.1;
}
	.medicina-regenerativa-apps-texto h2::after {
		display: none !important;
	}

@media (max-width: 600px) {
	.medicina-regenerativa-apps-texto {
		top: 24%;
		left: 5%;
	}
}

@media (min-width: 601px) and (max-width: 767px) {
	.medicina-regenerativa-apps-texto h2 {
		top: 24%;
		left: 5%;
	}
}

@media (max-width: 768px) {
	.medicina-regenerativa-apps-texto h2 {
		line-height: 1.1;
	}

	.bg-claro {
		padding-top: var(--20px);
		padding-bottom: var(--20px);
	}
}

/* -------------- UNITY-TREATMENTS -------------- */
@media (max-width:768px) {
	.container-slim#unity-treatments {
		padding-left: var(--30px);
		padding-right: var(--30px);
	}
}


/* -------------- SECTION CIRCLES DOTS -------------- */
.bg-circles-dots {
	background-color: #EAEAEA;
}

.circle-dots {
	height: 80dvh;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10%;
	background: url('https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2025/04/regenerativa-04.jpg');
	/* aspect-ratio: 1.4174; */
	background-size: 115%;
	background-position: center;
	background-repeat: no-repeat;
	padding-left: 5%;
	padding-right: 5%;
}
	.circle-dots h3 {
		font-size: clamp(var(--16px), 2vw, var(--22px));
		line-height: 1.3;
	}
		.circle-dots h3::after {
			content: "";
			display: block;
			background-color: white;
			width: var(--30px);
			height: var(--4px);
			margin-top: var(--15px);
			margin-bottom: var(--15px);
		}

	.circle-dots .first-column {
		display: grid;
		grid-template-rows: 50% 50%;
		align-items: center;
	}
		.circle-dots .first-column .padding-first,
		.circle-dots .second-column .padding-first {
			padding-top: 20%;	
		}	
	.circle-dots .second-column {
		display: grid;
		grid-template-rows: 33% 33% 33%;
		align-items: center;
	}
	.circle-dots .third-column {
		display: grid;
		grid-template-rows: 50% 50%;
		align-items: center;
		/* padding-top: 100px; */
	}
		.circle-dots .third-column .padding-third {
			padding-top: 50%;
		}

	.circle-dots ul {
		padding-left: var(--24px);
	}
	.circle-dots ul li {
		line-height: 1.2;
	}
	.circle-dots p {
		padding-bottom: var(--20px);
	}

	@media (max-width: 768px) {
		.circle-dots {
			height: 150dvh;
			gap: 10px;
			grid-template-columns: repeat(2, 1fr);
			background: url('https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2025/04/regenerativa-04-xs.jpg');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			padding-left: 0;
			padding-right: 0;
		}
			.circle-dots p {
				line-height: 1.1 !important;
			}
			.circle-dots ul {
				padding-left: var(--18px);
			}
			.circle-dots .first-column {
				grid-template-rows: 25% 25% 25% 25%;
				align-items: end;
			}
				.circle-dots .first-column div:nth-child(2) {
					padding-bottom: 2rem;
				}
				.circle-dots .first-column div:nth-child(3) {
					margin-bottom: -2rem;
				}				
				.circle-dots .first-column div:nth-child(4) {
					margin-bottom: 2rem;
				}

			.circle-dots .second-column {
				padding-left: var(--30px);
				align-items: end;
			}
				.circle-dots .second-column div:nth-child(2) {
					padding-bottom: var(--50px);
				}
				.circle-dots .second-column div:nth-child(3) {
					padding-bottom: 12rem;
				}
	}

	@media (max-width: 395px) {
		.circle-dots {
			height: 180dvh;
		}
	}




/* -------------- TRATAMIENTOS DE NUESTRA UNIDAD -------------- */
#unity-treatments p {
	text-align: center;
	line-height: 1.3;
}

.bg-claro {
	background-color: #F7E5D5;
	padding-top: var(--20px);
	padding-bottom: var(--20px);
}



/* -------------- RESPONSIVE -------------- */

@media (min-width: 1920px) {
	#hero-section {
		height: 60dvh;
	}
}

.title-cita {
	font-size: var(--16px);
	font-weight: 500;
	text-transform: uppercase;
	position: relative;
	padding-top: calc( var(--space) + var(--5px) );
	padding-bottom: calc( var(--space) + var(--5px) );
	line-height: 1.3;
	font-weight: 700;
	color: #545554;
	border: none;
}

.title-cita::after {
	content: "";
	display: block;
	width: var(--40px); 
	height: var(--4px); 
	background-color: #e4e4e4;
	margin: var(--20px) auto 0 auto;
}	

@media (min-width: 768px) {
.title-cita {
	font-size: var(--26px);
	line-height: var(--35px);
}
}

@media (min-width: 1024px) {
		.circle-dots {
				font-size: var(--20px) !important;
		}
}