/*
========================================================================================================================
RESET CSS
========================================================================================================================
Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)                                                                   */

*,::after,::before{box-sizing:border-box}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section,menu{display:block}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}hr{box-sizing:content-box;height:0;overflow:visible}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}code,kbd,pre,samp{font-family:Consolas,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}



/*
========================================================================================================================
GRID
========================================================================================================================
Grid nativo basado en la terminologí­a Bootstrap                                                                       */

.row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 0 var(--12px);
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
	position: relative;
	width: 100%;
	min-height: 1px;
	grid-column: span 12;
}

.col-1  { grid-column: span 1  }
.col-2  { grid-column: span 2  }
.col-3  { grid-column: span 3  }
.col-4  { grid-column: span 4  }
.col-5  { grid-column: span 5  }
.col-6  { grid-column: span 6  }
.col-7  { grid-column: span 7  }
.col-8  { grid-column: span 8  }
.col-9  { grid-column: span 9  }
.col-10 { grid-column: span 10 }
.col-11 { grid-column: span 11 }
.col-12 { grid-column: span 12 }

@media (min-width: 768px) {
	.col-sm-1  { grid-column: span 1  }
	.col-sm-2  { grid-column: span 2  }
	.col-sm-3  { grid-column: span 3  }
	.col-sm-4  { grid-column: span 4  }
	.col-sm-5  { grid-column: span 5  }
	.col-sm-6  { grid-column: span 6 }
	.col-sm-7  { grid-column: span 7  }
	.col-sm-8  { grid-column: span 8  }
	.col-sm-9  { grid-column: span 9  }
	.col-sm-10 { grid-column: span 10 }
	.col-sm-11 { grid-column: span 11 }
	.col-sm-12 { grid-column: span 12 }
}
@media (min-width: 1024px) {
	.col-md-1  { grid-column: span 1  }
	.col-md-2  { grid-column: span 2  }
	.col-md-3  { grid-column: span 3  }
	.col-md-4  { grid-column: span 4  }
	.col-md-5  { grid-column: span 5  }
	.col-md-6  { grid-column: span 6  }
	.col-md-7  { grid-column: span 7  }
	.col-md-8  { grid-column: span 8  }
	.col-md-9  { grid-column: span 9  }
	.col-md-10 { grid-column: span 10 }
	.col-md-11 { grid-column: span 11 }
	.col-md-12 { grid-column: span 12 }
}
@media (min-width: 1280px) {
	.col-lg-1  { grid-column: span 1  }
	.col-lg-2  { grid-column: span 2  }
	.col-lg-3  { grid-column: span 3  }
	.col-lg-4  { grid-column: span 4  }
	.col-lg-5  { grid-column: span 5  }
	.col-lg-6  { grid-column: span 6  }
	.col-lg-7  { grid-column: span 7  }
	.col-lg-8  { grid-column: span 8  }
	.col-lg-9  { grid-column: span 9  }
	.col-lg-10 { grid-column: span 10 }
	.col-lg-11 { grid-column: span 11 }
	.col-lg-12 { grid-column: span 12 }
}
@media (min-width: 1920px) {
	.col-xl-1  { grid-column: span 1  }
	.col-xl-2  { grid-column: span 2  }
	.col-xl-3  { grid-column: span 3  }
	.col-xl-4  { grid-column: span 4  }
	.col-xl-5  { grid-column: span 5  }
	.col-xl-6  { grid-column: span 6  }
	.col-xl-7  { grid-column: span 7  }
	.col-xl-8  { grid-column: span 8  }
	.col-xl-9  { grid-column: span 9  }
	.col-xl-10 { grid-column: span 10 }
	.col-xl-11 { grid-column: span 11 }
	.col-xl-12 { grid-column: span 12 }
}



/*
========================================================================================================================
VARIABLES
========================================================================================================================
Definimos las variables globales del proyecto                                                                         */

	/* VARIABLES > REM
	======================================================================================================================
	Son las medidas en pí­xeles con su correspondiente valor en rem                                                      */

	:root {
		
		/* Valores del 1 al 100 */
		--1px:.0625rem;--2px:.125rem;--3px:.1875rem;--4px:.250rem;--5px:.3125rem;--6px:.375rem;--7px:.4375rem;--8px:.5rem;--9px:.5625rem;--10px:.625rem;--11px:.6875rem;--12px:.750rem;--13px:.8125rem;--14px:.875rem;--15px:.9375rem;--16px:1rem;--17px:1.0625rem;--18px:1.125rem;--19px:1.1875rem;--20px:1.250rem;--21px:1.3125rem;--22px:1.375rem;--23px:1.4375rem;--24px:1.500rem;--25px:1.5625rem;--26px:1.625rem;--27px:1.6875rem;--28px:1.750rem;--29px:1.8125rem;--30px:1.875rem;--31px:1.9375rem;--32px:2rem;--33px:2.0625rem;--34px:2.125rem;--35px:2.1875rem;--36px:2.250rem;--37px:2.3125rem;--38px:2.375rem;--39px:2.4375rem;--40px:2.500rem;--41px:2.5625rem;--42px:2.625rem;--43px:2.6875rem;--44px:2.750rem;--45px:2.8125rem;--46px:2.875rem;--47px:2.9375rem;--48px:3rem;--49px:3.0625rem;--50px:3.125rem;--51px:3.1875rem;--52px:3.250rem;--53px:3.3125rem;--54px:3.375rem;--55px:3.4375rem;--56px:3.500rem;--57px:3.5625rem;--58px:3.625rem;--59px:3.6875rem;--60px:3.750rem;--61px:3.8125rem;--62px:3.875rem;--63px:3.9375rem;--64px:4rem;--65px:4.0625rem;--66px:4.125rem;--67px:4.1875rem;--68px:4.250rem;--69px:4.3125rem;--70px:4.375rem;--71px:4.4375rem;--72px:4.500rem;--73px:4.5625rem;--74px:4.625rem;--75px:4.6875rem;--76px:4.750rem;--77px:4.8125rem;--78px:4.875rem;--79px:4.9375rem;--80px:5rem;--81px:5.0625rem;--82px:5.125rem;--83px:5.1875rem;--84px:5.250rem;--85px:5.3125rem;--86px:5.375rem;--87px:5.4375rem;--88px:5.500rem;--89px:5.5625rem;--90px:5.625rem;--91px:5.6875rem;--92px:5.750rem;--93px:5.8125rem;--94px:5.875rem;--95px:5.9375rem;--96px:6rem;--97px:6.0625rem;--98px:6.125rem;--99px:6.1875rem;--100px:6.250rem;

	}


	/* VARIABLES > TIPOGRAFÍA
	======================================================================================================================
	Definición de las fuentes tipográficas                                                                              */

@font-face {
	font-family: 'Minerva';
	font-style: normal;
	font-weight: 400; 
	src: url('/ka/apps/timoneda/assets/fonts/MinervaModern-Regular.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Minerva';
	font-style: normal;
	font-weight: 600;
	src: url('/ka/apps/timoneda/assets/fonts/MinervaModern-Bold.woff2') format('woff2');
	font-display: swap;
}



:root {
	--font-general: "Minerva";
}

	/* VARIABLES > COLORES BASE
	======================================================================================================================
	Definición de la paleta de colores base para el proyecto                                                            */

	:root {
		
		/* COLORES BASE */

		--color-25 : #FCFAFF;
		--color-50 : #F9F5FF;
		--color-100: #F4EBFF;
		--color-200: #E9D7FE;
		--color-300: #D6BBFB;
		--color-400: #B692F6;
		--color-500: #9E77ED;
		--color-600: #7F56D9;
		--color-700: #6941C6;
		--color-800: #53389E;
		--color-900: #42307D;
		--color-950: #2C1C5F;
		
		--color-gray-25 : #FCFCFD;
		--color-gray-50 : #F9FAFB;
		--color-gray-100: #F2F4F7;
		--color-gray-200: #EAECF0;
		--color-gray-300: #D0D5DD;
		--color-gray-400: #98A2B3;
		--color-gray-500: #667085;
		--color-gray-600: #475467;
		--color-gray-700: #344054;
		--color-gray-800: #1D2939;
		--color-gray-900: #101828;
		--color-gray-950: #0C111D;

		--color-green-25 : #F6FEF9;
		--color-green-50 : #ECFDF3;
		--color-green-100: #DCFAE6;
		--color-green-200: #ABEFC6;
		--color-green-300: #75E0A7;
		--color-green-400: #47CD89;
		--color-green-500: #17B26A;
		--color-green-600: #079455;
		--color-green-700: #067647;
		--color-green-800: #085D3A;
		--color-green-900: #074D31;
		--color-green-950: #053321;
		
		--color-amber-25 : #FFFCF5;
		--color-amber-50 : #FFFAEB;
		--color-amber-100: #FEF0C7;
		--color-amber-200: #FEDF89;
		--color-amber-300: #FEC84B;
		--color-amber-400: #FDB022;
		--color-amber-500: #F79009;
		--color-amber-600: #DC6803;
		--color-amber-700: #B54708;
		--color-amber-800: #93370D;
		--color-amber-900: #7A2E0E;
		--color-amber-950: #4E1D09;
		
		--color-red-25 : #FFFBFA;
		--color-red-50 : #FEF3F2;
		--color-red-100: #FEE4E2;
		--color-red-200: #FECDCA;
		--color-red-300: #FDA29B;
		--color-red-400: #F97066;
		--color-red-500: #F04438;
		--color-red-600: #D92D20;
		--color-red-700: #B42318;
		--color-red-800: #912018;
		--color-red-900: #7A271A;
		--color-red-950: #55160C;

				--primary-25 : var(--color-25);
				--primary-50 : var(--color-50);
				--primary-100: var(--color-100);
				--primary-200: var(--color-200);
				--primary-300: var(--color-300);
				--primary-400: var(--color-400);
				--primary-500: var(--color-500);
				--primary-600: var(--color-600);
				--primary-700: var(--color-700);
				--primary-800: var(--color-800);
				--primary-900: var(--color-900);
				--primary-950: var(--color-950);
				
				--success-25 : var(--color-green-25 );
				--success-50 : var(--color-green-50 );
				--success-100: var(--color-green-100);
				--success-200: var(--color-green-200);
				--success-300: var(--color-green-300);
				--success-400: var(--color-green-400);
				--success-500: var(--color-green-500);
				--success-600: var(--color-green-600);
				--success-700: var(--color-green-700);
				--success-800: var(--color-green-800);
				--success-900: var(--color-green-900);
				--success-950: var(--color-green-950);
				
				--warning-25 : var(--color-amber-25 );
				--warning-50 : var(--color-amber-50 );
				--warning-100: var(--color-amber-100);
				--warning-200: var(--color-amber-200);
				--warning-300: var(--color-amber-300);
				--warning-400: var(--color-amber-400);
				--warning-500: var(--color-amber-500);
				--warning-600: var(--color-amber-600);
				--warning-700: var(--color-amber-700);
				--warning-800: var(--color-amber-800);
				--warning-900: var(--color-amber-900);
				--warning-950: var(--color-amber-950);
				
				--error-25 : var(--color-red-25);
				--error-50 : var(--color-red-50);
				--error-100: var(--color-red-100);
				--error-200: var(--color-red-200);
				--error-300: var(--color-red-300);
				--error-400: var(--color-red-400);
				--error-500: var(--color-red-500);
				--error-600: var(--color-red-600);
				--error-700: var(--color-red-700);
				--error-800: var(--color-red-800);
				--error-900: var(--color-red-900);
				--error-950: var(--color-red-950);



		/* COLORES SECUNDARIOS */

		--color-blue-25 : #F5F8FF;
		--color-blue-50 : #EFF4FF;
		--color-blue-100: #D1E0FF;
		--color-blue-200: #B2CCFF;
		--color-blue-300: #84ADFF;
		--color-blue-400: #528BFF;
		--color-blue-500: #2970FF;
		--color-blue-600: #155EEF;
		--color-blue-700: #004EEB;
		--color-blue-800: #0040C1;
		--color-blue-900: #00359E;
		--color-blue-950: #002266;

	}


	:root [data-status="error"],
	.error
	{
		--color-25 : var(--error-25);
		--color-50 : var(--error-50);
		--color-100: var(--error-100);
		--color-200: var(--error-200);
		--color-300: var(--error-300);
		--color-400: var(--error-400);
		--color-500: var(--error-500);
		--color-600: var(--error-600);
		--color-700: var(--error-700);
		--color-800: var(--error-800);
		--color-900: var(--error-900);
		--color-950: var(--error-950);
	}
	
	:root [data-status="warning"],
	.warning
	{
		--color-25 : var(--warning-25 );
		--color-50 : var(--warning-50 );
		--color-100: var(--warning-100);
		--color-200: var(--warning-200);
		--color-300: var(--warning-300);
		--color-400: var(--warning-400);
		--color-500: var(--warning-500);
		--color-600: var(--warning-600);
		--color-700: var(--warning-700);
		--color-800: var(--warning-800);
		--color-900: var(--warning-900);
		--color-950: var(--warning-950);
	}

	:root [data-status="success"],
	.success
	{
		--color-25 : var(--success-25 );
		--color-50 : var(--success-50 );
		--color-100: var(--success-100);
		--color-200: var(--success-200);
		--color-300: var(--success-300);
		--color-400: var(--success-400);
		--color-500: var(--success-500);
		--color-600: var(--success-600);
		--color-700: var(--success-700);
		--color-800: var(--success-800);
		--color-900: var(--success-900);
		--color-950: var(--success-950);
	}



	/* VARIABLES > SOMBRAS
	======================================================================================================================
	Definición de las diferentes tipos de sombra para los objetos                                                       */

	:root {

		--shadow-xs: 0 var(--1px) var(--2px) 0 rgba(16, 24, 40, 0.05);
		--shadow-sm: 0 var(--1px) var(--3px) 0 rgba(16, 24, 40, 0.10), 0 var(--1px) var(--2px) 0 rgba(16, 24, 40, 0.06);
		--shadow-md: 
			0 var(--4px) var(--8px) calc( var(--2px) * -1 ) rgba(16, 24, 40, 0.10),
			0 var(--2px) var(--4px) calc( var(--2px) * -1 ) rgba(16, 24, 40, 0.06)
		;
		--shadow-lg:
			0 var(--12px) var(--16px) calc( var(--4px) * -1 ) rgba(16, 24, 40, 0.08),
			0 var(--4px) var(--6px) calc( var(--2px) * -1 ) rgba(16, 24, 40, 0.03)
		;
		--shadow-xl:
			0 var(--20px) var(--24px) calc( var(--4px) * -1 ) rgba(16, 24, 40, 0.08),
			0 var(--8px) var(--8px) calc( var(--4px) * -1) rgba(16, 24, 40, 0.03)
		;
		--shadow-2xl: 0 var(--24px) var(--48px) calc( var(--12px) * -1 ) rgba(16, 24, 40, 0.18);
		--shadow-3xl: 0 var(--32px) var(--64px) calc( var(--12px) * -1 ) rgba(16, 24, 40, 0.14);

	}



/*
========================================================================================================================
BASE
========================================================================================================================
Definimos los elementos HTML comunes y los elementos estructurales de la página                                       */

html {
	font-size: 100%; /* Capturamos el valor predeterminado del navegador, que generalmente es de 16 píxeles */
	scroll-padding-top: 12vh;
  scroll-behavior: smooth;
}

body {
	padding: 0;
	margin:0;
	/* overflow-x: hidden; */
	font-family: var(--font-general);
  font-size: 1rem;
	font-weight: 400;
	font-weight: normal;
	line-height: 1.5;
	letter-spacing: normal;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-webkit-font-feature-settings: 'kern' 1;
	-moz-font-feature-settings: 'kern' 1;
  text-align: left;
  background-color: #fff;
	color: #535353;
}

a {
	text-shadow: none;
	text-decoration: none;
	background-color: transparent;
}
a:focus,
a:hover,
a:active {
	outline: 0;
	text-decoration: none;
	transition:
		color .1s linear 0s,
		background-color .1s linear 0s,
		opacity .2s linear 0s
	;
	color: var(--color-700);
}

p {
	display: block;
	font-size: var(--20px);
	font-family: var(--font-general);
	font-weight: normal;
	font-style: normal;
	white-space: normal;
	color: black;
}

hr {
	border: 0;
	border-bottom: var(--4px) solid var(--color-gray-500);
	margin-top: var(--25px);
	margin-bottom: var(--25px);
}

input {
	font-family: var(--font-general);
}

h1 {
	font-size: var(--40px);
	line-height: var(--40px);
	margin-bottom: 0;
	font-family: var(--font-general);
	color: black;
}


h2 {
	font-size: var(--60px);
	line-height: var(--72px);
	letter-spacing: -2%;
}

h3 {
	font-size: var(--48px);
	line-height: var(--60px);
	letter-spacing: -2%;
}

h4 {
	font-size: var(--36px);
	line-height: var(--44px);
	letter-spacing: -2%;
}

h5 {
	font-size: var(--30px);
	line-height: var(--38px);
}

h6 {
	font-size: var(--24px);
	line-height: var(--32px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
	margin-top: 0;
}


.text-xl {
	font-size: var(--20px);
	line-height: var(--30px);
}
.text-lg {
	font-size: var(--18px);
	line-height: var(--28px);
}
.text-md {
	font-size: var(--16px);
	line-height: var(--24px);
}
.text-sm {
	font-size: var(--14px);
	line-height: var(--20px);
}
.text-xs {
	font-size: var(--12px);
	line-height: var(--18px);
}


.medium {
	font-weight: 500;
}
.semibold {
	font-weight: 600;
}
.bold {
	font-weight: 700;
}
							

::-moz-selection {
	background: rgba(0,0,0,.1);
}
::selection {
	background: rgba(0,0,0,.1);
}

::-webkit-input-placeholder {
	opacity: .5;
	text-transform: none;
}
::-moz-placeholder {
	opacity: .5;
	text-transform: none;
}
:-ms-input-placeholder {
	opacity: .5;
	text-transform: none;
}
:-moz-placeholder {
	opacity: .5;
	text-transform: none;
}

::-webkit-scrollbar {
	height: var(--6px);
	width: var(--6px);
}

::-webkit-scrollbar-track {
	background: rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,.6);
}

@media (max-width: 48rem ) { /* 768px */
	::-webkit-scrollbar {
		height: var(--4px);
		width: var(--4px);
	}
}



.container-fluid {
	padding-left: var(--32px);
	padding-right: var(--32px);
}

@media (max-width: 64rem) { /* 1024px  */
	.container-fluid {
		padding-left: var(--16px);
		padding-right: var(--16px);
	}
}

@media (max-width: 768px) {
	h1 {
		font-size: var(--22px);
		line-height: var(--26px);
	}
	
	h4 {
		font-size: var(--24px);
		line-height: var(--26px);
	}

	p {
		font-size: var(--16px);
	}
}



:root {

	--nav-spacing: var(--16px);


}

/*
========================================================================================================================
TEMPLATE (COMUNES)
========================================================================================================================
Definimos las plantillas que vamos a utilizar en el desktop                                                           */


header {
  grid-template-areas: '. logo-header phone-column';
  width: 100%;
  height: 12vh;
	position: fixed;
  background-image: url('/ka/apps/timoneda/assets/img/common/textura-header.png');
  background-size: contain;
  background-color: #ccb298;
  color: #ffff;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
	overflow: hidden;
	z-index: 100; 
}

  header .logo-header {
    display: flex;
    justify-content: center;
    align-items: center;
		padding-left: var(--40px);
		padding-right: var(--40px);
    height: 100%;
    background-color: #F3F1EB;
  }
    header .logo-header img {
      width: 225px;
      height: auto;
    }

  header .phone-column {
    display: flex;
    justify-content: end;
		gap: 10px;
    padding-right: var(--20px);
  }
		header .phone-column img {
			width: var(--45px);
			height: var(--45px);
			cursor: pointer;
			transition: transform 0.3s ease;
		}

			header .phone-column img:hover {
					transform: scale(0.8);
			}

button {
	background-color: #1E1E1E;
	color: #F3F1EB;
	border: none;
	padding: var(--9px) var(--21px);
	border-radius: var(--30px);
	font-size: var(--20px);
	cursor: pointer;
	box-shadow: 2.77px 3.69px 3.69px 0px rgba(0, 0, 0, 0.12);
	transition: transform 0.3s ease; 
}

	button:hover {
		transform: scale(0.9); 
		color: #7fc7aa; 
	}


	button > img {
		margin-left: var(--10px);
	}

	

.separator {
	background-image: url('/ka/apps/timoneda/assets/img/common/bg-texturas.jpg');
	height: var(--50px);
}

footer {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-items: center;
	padding-top: var(--40px);
	padding-bottom: var(--60px);
	background-color: #3A3A3A;
	font-family: 'Roboto', sans-serif;
}

	footer p {
		font-weight: 600;
		margin-bottom: 10px;
		margin-top: 0;
	}

	footer p, footer ul {
		color: #ffff;
	}
	footer ul {
		list-style: none;
		padding: 0;
		margin: 0;
		font-weight: 400;
		font-size: var(--15px);
	}
	footer ul li {
		margin-right: 10px;
	}
	footer .footer-info a {
		color: #ffff;
	}
	footer .footer-info a:hover {
		color: #cfcece;
	}

	footer .footer-info {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--20px);
	}

		footer .footer-info p.ver-maps {
			font-size: var(--15px);
			margin-top: var(--3px);
		}
			footer .footer-info p.ver-maps a {
				padding-left: var(--10px);
				font-weight: 400;
				font-size: var(--16px);
			}

.legals {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-items: center;
	background-color: #ccb298;
}
	.legals p {
		font-size: var(--16px);
		font-weight: 600;
		color: #695138;
	}
	.legals a {
		color: #695138;
		padding-left: var(--5px);
		padding-right: var(--5px);
	}

.floating-button {
	position: fixed;
	bottom: 20px; 
	right: 20px; 
	z-index: 1000; 
}

.thankyou-page {
	padding-top: 100px;
	height: 70vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.marron-invisalign {
	background-color: #E1D5C2 !important;
}

@media (max-width: 1279px) {

}

@media (max-width: 768px) {
  header {
    grid-template-areas: 'logo-header phone-column';
    grid-template-columns: 1.5fr 1fr;
    height: 60px;
    overflow: hidden;
  }

  header > div:first-child {
    display: none;
  }

  header .logo-header {
    width: 100%;
    height: 100%;
  }

  header .logo-header img {
    width: 183px;
    height: 46.66px;
  }

  header .phone-column img {
    width: 35px;
    height: 35px;
  }

  button {
    font-size: var(--18px);
  }

	.separator {
		display: none;
	}

	footer {
		grid-template-columns: 1fr;
		justify-items: start;
		padding: var(--25px) var(--30px);
	}
		footer #logo-footer {
			width: 250px;
			padding-bottom: var(--15px);
		}

		footer .footer-info {
			grid-template-columns: 1fr;
			gap: var(--10px);
		}

	.legals {
		grid-template-columns: 1fr;
		justify-items: center;
		padding: var(--10px) var(--5px);
		text-align: center;
	}

	.legals p {
		font-size: var(--12px);
	}

	#consult-btn {
		width: 220px;
		font-size: var(--16px);
		display: flex;
		justify-content: space-around;
	}
		#consult-btn img {
			width: 25px;
			height: 25px;
			margin-left: 0;
		}

	.thankyou-page {
		padding-top: 50px;
		padding-right: 25px;
		padding-left: 25px;
		height: 50vh;
	}
}

@media (min-width: 1921px) {
	header {
		height: 8vh;
	}
}

/* -------------- SECTION: MONTSE TIMONEDA -------------------------------------------------------------------------- */

.montse-timoneda {
	display: grid;
	grid-template-areas: '. texto-timoneda';
	grid-template-columns: repeat(2, 1fr);
	justify-items: center;
	align-items: center;
	background-image: url('/ka/apps/timoneda/assets/img/common/montse-timoneda-bg.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: auto;
}

	.montse-timoneda .timoneda-text {
		grid-template-areas: texto-timoneda;
		padding-top: 150px;
		padding-bottom: 150px;
		max-width: 450px;
	}
		.montse-timoneda .timoneda-text h4 {
			font-weight: 400;
			margin-bottom: 0;
			color: black;
		}

#img-mobile-timoneda {
	display: none;
}

.cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	background-color: white;
	padding: var(--50px) var(--30px) 0px var(--30px);
}
	.cta h2 {
		font-size: var(--50px);
		line-height: var(--50px);
		text-align: center;
		margin-bottom: 0px;
		color: black;
	}

	.cta .btn-cta {
		width: 100%;
		text-align: center;
	}

@media (max-width: 768px) {
	#img-mobile-timoneda {
		display: block;
		width: 100%;
		height: auto;
	}
	.montse-timoneda {
		background-image: none;
		grid-template-columns: 1fr;
		grid-template-areas: 'texto-timoneda';
	}
		.montse-timoneda .timoneda-text {
			padding: var(--30px);
			max-width: 100%;
		}

	.cta {
		padding: 0px var(--30px) 0px var(--30px);
	}
		.cta h2 {
			font-size: var(--35px);
			line-height: var(--38px);
		}
}

@media (min-width: 1921px) {
	.montse-timoneda {
		background-position: top -90px center;
		height: 900px;
	}
}

/* -------------- SECTION: FORMULARIO CONTACTO ---------------------------------------------------------------------- */
.contact-form {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	padding: var(--50px) 0;
}

.form-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background-color: #3A3A3A;
	align-items: center;
	padding-left: var(--20px);
}

.form-content {
	display: flex;
	align-items: center;
	align-self: center;
}

form {
	width: 100%;
	height: 100%;
	padding: var(--20px);
}
.form-group {
	margin-bottom: 20px;
}
.form-group input,
.form-group textarea {
	width: 100%;
	padding: var(--15px) var(--25px);
	font-size: var(--16px);
	border: 1px solid transparent;
	background-color: #F3F1EB;
	border-radius: var(--12px);
	box-sizing: border-box;
}
.form-row {
	display: flex;
	gap: var(--10px);
}
.form-row .form-group {
	flex: 1;
}
.form-row .form-group:nth-child(1) {
	flex: 2;
}
textarea {
	resize: vertical;
	min-height: 100px;
	resize: none;
}
.form-btn {
	display: flex;
	justify-content: end;
}
button[type="submit"] {
	background-color: #9E8266;
	padding: var(--10px) var(--40px);
	border-radius: var(--12px);
}

	button[type="submit"]:hover {
		color: #fff;
	}

input::placeholder,
textarea::placeholder {
	color: #727272;
	font-weight: bolder;
}

label.legals-form {
	display: flex;
	align-items: center;
	gap: var(--10px);
}

input#legals-form {
	width: var(--30px);
	height: var(--20px);
}

.privacy, .privacy a {
	color: #fff;
}

input.has-error {
  border: 2px solid rgb(194, 139, 150) !important;  
}
span.error {
  color: rgb(194, 139, 150);
  font-size: 13px;
  display: block;
	font-weight: 600;
}

label {
	display: none;
}

.legals-form {
	margin: 0 auto;
}

@media (max-width: 768px) {
	.contact-form {
		padding: var(--30px);
	}

	.form-container {
		grid-template-columns: 1fr;
		padding-left: 0;
	}

	.form-row {
		flex-direction: column;
		gap: 0;
	}
}


/*
========================================================================================================================
CARILLAS
========================================================================================================================
Estilos definidos para la landing page de carillas                                                                    */


/* -------------- SECTION 1: HERO COMPARTE ALGUNAS CON GERO IMPLANTES ----------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: #F3F1EB;
}
  .hero > div:nth-child(1), 
	.hero-implantes > div:nth-child(1) {
    padding: 160px var(--80px);
    display: flex;  
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--10px);
  }

  .hero > div:nth-child(1) p, 
	.hero-implantes > div:nth-child(1) p {
    font-size: var(--24px);
    line-height: var(--25px);
  }

.hero .button-container, 
.hero-implantes .button-container {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
  gap: var(--10px);
}

  .hero > div:nth-child(2) {
    background-image: url('/ka/apps/timoneda/assets/img/carillas/mujer-carillas.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }


@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    height: auto;
  }

    .hero > div:nth-child(1), 
		.hero-implantes > div:nth-child(1) {
      padding: var(--30px);
			padding-top: var(--80px);
    }
      .hero > div:nth-child(1) p, 
			.hero-implantes > div:nth-child(1) p {
        font-size: var(--18px);
        line-height: var(--21px);
      }

    .hero > div:nth-child(2) {
      background-image: url('/ka/apps/timoneda/assets/img/carillas/mujer-carillas-mobile.png');
      height: 431px;
    }
}

@media (min-width: 1921px) {
	.hero, 
	.hero-implantes {
		height: 900px;
	}
}

/* -------------- SECTION: TRANSFORMA TU SONRISA -------------------------------------------------------------------- */

.smile-transform {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #e9e0d1;
	padding: var(--30px);
	gap: var(--50px);
}

	.smile-transform h2 {
		color: black;
		margin-bottom: 0;
		text-align: center;
		font-size: var(--45px);
		line-height: var(--45px);
	}

	.smile-transform .smile-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
	}

	.smile-transform .smile-content {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: var(--30px);
		text-align: center;
	}
		.smile-transform .smile-content h4 {
			margin-bottom: 0;
			color: black;
			font-weight: bold;
			font-size: var(--30px);
			line-height: var(--30px);
		}
		.smile-transform .smile-content p {
			color: black;
		}


@media (max-width: 768px) {
	.smile-transform .smile-photos {
		grid-template-columns: 1fr 1fr;
		gap: 0px;
	}

	.smile-transform h2 {
		font-size: var(--35px);
		line-height: var(--35px);
	}

	.smile-transform .smile-content {
		grid-template-columns: 1fr;
		gap: var(--20px);
		text-align: center;
	}

		.smile-transform .smile-content p {
			font-size: var(--20px);
			line-height: var(--20px);
			font-weight: 500;
		}
}

@media (min-width: 1921px) {

	.smile-transform .smile-content {
		max-width: 80%;
	}

}


/* -------------- SECTION: TESTIMONIO MAR --------------------------------------------------------------------------- */

.testimony {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: url('/ka/apps/timoneda/assets/img/common/bg-1.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: var(--30px);
	gap: var(--30px);
}
	.testimony h2 {
		color: black;
		margin-bottom: var(--20px);
		font-size: var(--45px);
		line-height: var(--45px);
		text-align: center;
	}

	.testimony .testimony-content {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--50px);
	}

		.testimony .testimony-content img {
			border: 10px solid black;
		}

		.testimony .testimony-content > div {
			display: grid;
			grid-template-rows: 1fr 0.5fr;
			align-items: center;
			justify-items: center;
			gap: var(--20px);
			max-width: 600px;
		}

		.testimony .testimony-content p {
			color: black;
			font-size: var(--30px);
			line-height: var(--32px);
			text-align: center;
		}
		
@media (max-width: 768px) {
	.testimony .testimony-content {
		grid-template-columns: 1fr;
		gap: var(--30px);
	}

		.testimony .testimony-content p {
			font-size: var(--25px);
			line-height: var(--27px);
		}

		.testimony .testimony-content > div {
			grid-template-rows: 1.5fr 1fr;
			gap: var(--5px);
		}

	.testimony h2 {
		font-size: var(--35px);
		line-height: var(--35px);
		margin-bottom: var(--10px);
	}
}

/* -------------- SECTION: PROCESO DE TRATAMIENTO ------------------------------------------------------------------- */
.treatment-process {
	background-color: #525252;
}

	.treatment-process .header-treatment {
		padding: var(--50px) var(--30px);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-image: url('/ka/apps/timoneda/assets/img/common/textura-menu.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
		.treatment-process .header-treatment h2 {
			color: white;
			margin-bottom: 0;
		}

	.treatment-process .steps-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--10px);
		padding: var(--50px) 0px;
	}
		.treatment-process .steps {
			display: grid;
			grid-template-rows: repeat(7, 1fr);
			gap: var(--10px);
			padding-left: 30%;
		}
			.treatment-process .steps > div {
				display: grid;
				grid-template-columns: auto 1fr;
				gap: var(--30px);
				align-items: center;
			}

			.treatment-process .steps p {
				color: white;
				margin: 0;
			}
			.treatment-process .steps span {
				padding: var(--5px) var(--28px);
				border-radius: var(--25px);
				font-size: var(--22px);
			}

			.treatment-process .steps > div:nth-child(odd) > span {
				background-color: #9E8266;
				color: white;
			}
			.treatment-process .steps > div:nth-child(even) > span {
				background-color: #D0B093;
				color: #1E1E1E;
			}
		

@media (max-width: 768px) {

	.treatment-process .header-treatment {
		padding: var(--30px);
		margin-top: -10px;
		margin-bottom: -10px;
		background-size: contain;
		background-position: center top;
	}

	.treatment-process .header-treatment h2 {
		display: none;
	}

	.treatment-process .steps-container {
		grid-template-columns: 1fr;
		gap: var(--10px);
		padding-top: 0px;
		padding-bottom: var(--10px);
	}

		.treatment-process .steps-container > *:nth-child(1) {
			grid-row: 2;
		}

		.treatment-process .steps-container > *:nth-child(2) {
				grid-row: 1;
		}

		.treatment-process .steps {
			gap: var(--3px);
			padding: var(--10px) var(--30px);
		}
			.treatment-process .steps > div {
				gap: var(--15px);
			}

			.treatment-process .steps span {
				font-size: var(--16px);
			}
}

@media (min-width: 1921px) {
	.treatment-process .header-treatment {
		padding: 80px var(--30px);
		background-size: cover;
		background-position: center bottom;
	}
}


/* -------------- DIV: DURACIÓN TRATAMIENTO ------------------------------------------------------------------------- */

.treatment-duration {
	display: flex;
	justify-content: center;
	align-content: center;
	padding: var(--30px);
	background-color: #282828;
}
	.treatment-duration p {
		color: white;
		margin: 0;
	}


/*
========================================================================================================================
IMPLANTES
========================================================================================================================
Estilos definidos para la landing page de implantes                                                                   */

/* -------------- SECTION 1: HERO ----------------------------------------------------------------------------------- */

.hero-implantes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: #cbb298;
}

.hero-implantes > div:nth-child(2) {
	background-image: url('/ka/apps/timoneda/assets/img/implantes/pareja-hero-implantes.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media (max-width: 768px) {

	.hero-implantes {
    grid-template-columns: 1fr;
    height: auto;
  }

	.hero-implantes > div:nth-child(2) {
		background-image: url('/ka/apps/timoneda/assets/img/implantes/pareja-hero-implantes-mobile.png');
		height: 431px;
	}
}

/* -------------- SECTION: PROCESO DE TRATAMIENTO COMPARTE ALGUNAS CON INVISALIGN ----------------------------------- */

.implants-treatment-process {
	position: relative;
	background-color: #525252;
	background-image: url('/ka/apps/timoneda/assets/img/implantes/bg-proceso-tratamiento.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

.implants-treatment-process::before,
.invisalign-treatment-process::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6); 
	z-index: -1; 
}

	.implants-treatment-process .header-treatment,
	.invisalign-treatment-process .header-treatment {
		padding: var(--50px) var(--30px);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
		.implants-treatment-process .header-treatment h2,
		.invisalign-treatment-process .header-treatment h2 {
			color: white;
			margin-bottom: 0;
		}

	.implants-treatment-process .steps-container,
	.invisalign-treatment-process .steps-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--10px);
		padding: var(--10px) 0px var(--40px) 0px;
	}
		.implants-treatment-process .steps,
		.invisalign-treatment-process .steps {
			display: grid;
			grid-template-rows: repeat(7, 1fr);
			gap: var(--20px);
		}
			.implants-treatment-process .steps > div,
			.invisalign-treatment-process .steps > div {
				display: grid;
				grid-template-columns: auto 1fr;
				gap: var(--30px);
				align-items: center;
			}

			.implants-treatment-process .steps p,
			.invisalign-treatment-process .steps p {
				color: white;
				margin: 0;
			}
			.implants-treatment-process .steps span,
			.invisalign-treatment-process .steps span {
				padding: var(--5px) var(--28px);
				border-radius: var(--25px);
				font-size: var(--22px);
			}

			.implants-treatment-process .steps > div:nth-child(odd) > span,
			.invisalign-treatment-process .steps > div:nth-child(odd) > span {
				background-color: #2D2A2A;
				color: white;
			}
			.implants-treatment-process .steps > div:nth-child(even) > span,
			.invisalign-treatment-process .steps > div:nth-child(even) > span {
				background-color: #D0B093;
				color: #1E1E1E;
			}
		

@media (max-width: 768px) {

	.implants-treatment-process,
	.invisalign-treatment-process {
		background-image: none !important;
		background-color: #525252;
	}

	.implants-treatment-process .header-treatment,
	.invisalign-treatment-process .header-treatment {
		padding: var(--30px);
		margin-top: -10px;
		margin-bottom: -5px;
	}

	.implants-treatment-process .header-treatment,
	.invisalign-treatment-process .header-treatment {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-image: url('/ka/apps/timoneda/assets/img/common/textura-menu.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center top;
	}

	.implants-treatment-process .header-treatment h2,
	.invisalign-treatment-process .header-treatment h2 {
		display: none;
	}

	.implants-treatment-process .steps-container,
	.invisalign-treatment-process .steps-container {
		grid-template-columns: 1fr;
		gap: var(--10px);
		padding-top: 0px;
		padding-bottom: var(--10px);
	}

		.implants-treatment-process .steps-container > *:nth-child(1),
		.invisalign-treatment-process .steps-container > *:nth-child(1) {
			grid-row: 1;
			background-image: url('/ka/apps/timoneda/assets/img/implantes/daniel-tratamiento-implantes.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			height: 400px;
		}

		.implants-treatment-process .steps-container > *:nth-child(2),
		.invisalign-treatment-process .steps-container > *:nth-child(2) {
				grid-row: 2;
		}

		.implants-treatment-process .steps,
		.invisalign-treatment-process .steps {
			gap: var(--3px);
			padding: var(--10px) var(--30px);
		}
			.implants-treatment-process .steps > div,
			.invisalign-treatment-process .steps > div {
				gap: var(--15px);
			}

			.implants-treatment-process .steps span,
			.invisalign-treatment-process .steps span {
				font-size: var(--16px);
			}

	.implants-treatment-process::before,
	.invisalign-treatment-process::before {
		display: none;
	}

	.implants-treatment-process .steps > div:nth-child(odd) > span,
	.invisalign-treatment-process .steps > div:nth-child(odd) > span {
		background-color: #9E8266;
		color: white;
	}
}

@media (min-width: 1921px) {
	.implants-treatment-process .header-treatment,
	.invisalign-treatment-process .header-treatment {
		padding: 80px var(--30px);
		background-size: cover;
		background-position: center bottom;
	}
}

/*
========================================================================================================================
INVISALIGN
========================================================================================================================
Estilos definidos para la landing page de invisalign                                                                  */

/* -------------- SECTION 1: HERO ----------------------------------------------------------------------------------- */

.marron-invisalign > div:nth-child(2) {
	background-image: url('/ka/apps/timoneda/assets/img/invisalign/mujer-invisalign.jpg');
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

@media (max-width: 768px) {

	.marron-invisalign > div:nth-child(2) {
		background-image: url('/ka/apps/timoneda/assets/img/invisalign/mujer-invisalign-mobile.png');
		background-position: center center;
		height: 431px;
	}
}

/* -------------- SECTION 2: FORMA CÓMODA --------------------------------------------------------------------------- */

.smile-transform .smile-content-invisalign {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--30px);
	text-align: center;
}
	.smile-transform .smile-content-invisalign h4 {
		margin-bottom: 0;
		color: black;
		font-weight: bold;
		font-size: var(--30px);
		line-height: var(--30px);
	}
	.smile-transform .smile-content-invisalign p {
		color: black;
	}


@media (max-width: 768px) {

.smile-transform .smile-content-invisalign {
	grid-template-columns: 1fr;
	gap: var(--20px);
	text-align: center;
}

	.smile-transform .smile-content-invisalign p {
		font-size: var(--20px);
		line-height: var(--20px);
		font-weight: 500;
	}
}

@media (min-width: 1921px) {

.smile-transform .smile-content-invisalign {
	max-width: 80%;
}

}

/* -------------- SECTION 2: TESTIMONIOS ---------------------------------------------------------------------------- */

.testimony .testimony-content-invisalign {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--50px);
	padding-top: var(--50px);
	padding-bottom: var(--50px);
}

	.testimony .testimony-content-invisalign p {
		color: black;
		font-size: var(--20px);
		line-height: var(--22px);
		text-align: center;
	}

.tarjeta {
	background: #F3F1EB;
	padding: 40px;
	border-radius: 60px;
	max-width: 600px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
	text-align: center;
}
.tarjeta img {
		width: 150px;
		height: 150px;
		margin-top: -110px;
}
.tarjeta b {
		font-weight: bold;
}
.tarjeta .nombre {
		margin-top: 10px;
		font-weight: normal;
}
	
@media (max-width: 768px) {
.testimony .testimony-content-invisalign {
	grid-template-columns: 1fr;
	gap: var(--80px);
}

	.testimony .testimony-content-invisalign p {
		font-size: var(--15px);
		line-height: var(--17px);
	}

.tarjeta img {
	width: 100px;
	height: 100px;
	margin-top: -110px;
}
}

/* -------------- SECTION: PROCESO DE TRATAMIENTO ------------------------------------------------------------------- */

.invisalign-treatment-process {
	position: relative;
	background-color: #525252;
	background-image: url('/ka/apps/timoneda/assets/img/invisalign/bg-proceso-tratamiento-invisalign.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}	
 .invisalign-treatment-process .steps-container	> div:nth-child(1) {
	display: flex;
	align-items: end;
	justify-self: end;
	padding-right: var(--30px);
	padding-bottom: var(--15px);
 }
  .invisalign-treatment-process .steps-container	> div:nth-child(1) img {
		width: 370px;
		height: 259px;
	}

.invisalign-treatment-process .steps p strong {
	font-size: 22px;
}

@media (max-width: 768px) {

	.invisalign-treatment-process .steps-container > *:nth-child(1) {
		grid-row: 1;
		background-image: url('/ka/apps/timoneda/assets/img/invisalign/bg-proceso-tratamiento-invisalign-mobile.jpeg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		height: 400px;
	}

	.invisalign-treatment-process .steps-container	> div:nth-child(1) {
		justify-self: normal;
	}

	.invisalign-treatment-process .steps-container	> div:nth-child(1) img {
		display: none;
	}

	.invisalign-treatment-process .steps p strong {
		font-size: 18px;
	}

	.invisalign-treatment-process .steps {
		gap: var(--20px);
	}
}

@media (min-width: 1921px) {

}


/*
========================================================================================================================
HELPERS
========================================================================================================================
Clases de ayuda que se utilizan de forma frecuente en todos los proyectos                                             */

.noselect {
	-webkit-touch-callout: none;
		-webkit-user-select: none;
		 -khtml-user-select: none;
			 -moz-user-select: none;
				-ms-user-select: none;
						user-select: none;
}

.noscroll {
	position: fixed;
	overflow: hidden !important;
	width: 100%;
	height: 100%;
}

.nowrap {
	white-space: nowrap;
}
.wrap {
	white-space: normal;
}
.break-word {
	word-break: break-word;
}
.lowercase {
	text-transform: lowercase;
}
.uppercase {
	text-transform: uppercase;
}


.text-center {
	text-align: center !important;
}
.text-left {
	text-align: left !important;
}
.text-right {
	text-align: right !important;
}
.text-justify {
	text-align: justify !important;
}
.text-uppercase {
	text-transform: uppercase;
}
.text-bold {
	font-weight: 700 !important;
}


.img-fluid,
.img-responsive {
	max-width: 100%;
}


.pull-right {
	float: right;
}
.pull-left {
	float: left;
}
.clear {
	clear: both;
}


.hidden {
	display: none !important;
}

@media (min-width: 768px) {
	.hidden-xs-up {
		display: none !important;
	} 
}

@media (min-width: 1025px) {
	.hidden-sm-up {
		display: none !important;
	} 
}

@media (min-width: 1920px) {
	.hidden-md-up {
		display: none !important;
	} 
}


@media (max-width: 767px) {
	.hidden-xs-down {
		display: none !important;
	} 
}

@media (max-width: 1024px) {
	.hidden-sm-down {
		display: none !important;
	} 
}

@media (max-width: 1919px) {
	.hidden-md-down {
		display: none !important;
	} 
}