/*
========================================================================================================================
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                                                                              */


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

	:root {
		
		/* COLORES BASE */

		--naranja: #ec5718;
		--oscuro: #092B28;
		--caqui: #716F63;
		--verde: #2A4744;

		--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: min(var(--27px), 4%);
	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;
}

#MAIN {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

a {
	text-shadow: none;
	text-decoration: none;
	background-color: transparent;
	font-family: 'neue-haas-grotesk', sans-serif;
	font-size: var(--20px);
}

p {
	display: block;
	font-size: var(--20px);
	font-family: 'neue-haas-grotesk', sans-serif;
	font-weight: normal;
	font-style: normal;
	white-space: normal;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: 'swear-display', serif;
	font-weight: normal;
}

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

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 {
	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) {

	#MAIN {
		gap: 0em;
	}

	h1 {
		font-size: var(--22px);
		line-height: var(--26px);
	}

	h2 {
		font-size: var(--36px);
		line-height: var(--38px);
	}

	h3 {
		font-size: var(--30px);
		line-height: var(--32px);
	}
	
	h4 {
		font-size: var(--24px);
		line-height: var(--26px);
	}

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

@media (min-width: 1921px) {
	body {
		padding-left: 15em;
		padding-right: 15em;
	}
}

:root {
	--nav-spacing: var(--16px);
}

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

section {
	border-radius: var(--50px);
	padding: min(var(--56px, 5%));
}

/* -------------- HERO ---------------------------------------------------------------------------------------------- */
.hero {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh;
}


.hero img {
	max-width: 400px;
}
.hero-content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: end;
	height: 90%;
	gap: 3em;
}

	.hero-text h3 {
		margin-bottom: 0;
	}
	.hero-text h1 {
		font-size: 4em;
		line-height: 1em;
	}

	@media ( max-width: 768px ) {

		section {
			padding: 1.5em;
		}

		.hero {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.hero img {
			max-width: 200px;
			padding-bottom: var(--15px);
		}

		.hero-text h3,
		.hero-text h1 {
				font-size: var(--34px);
				line-height: var(--36px);
		}

		.hero-text h3 {
			padding-bottom: var(--10px);
		}

		.hero-content {
			grid-template-columns: 1fr;
			align-items: start;
		}
		
		.btn-center {
			display: flex;
			justify-content: center;
		}

	}
	

/* -------------- FORMULARIO DE ABAJO ------------------------------------------------------------------------------- */

.form-container {
	display: grid;
	grid-template-columns: 2fr 1.5fr;
	gap: 10em;
}

	#contact-form {
		background-color: white;
		border-radius: var(--24px);
		padding: min(var(--30px, 4%));
	}
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		textarea,
		button[type="submit"] {
			font-family: 'neue-haas-grotesk', sans-serif;
			width: 100%;
			padding: var(--10px) var(--25px);
			border: 2px solid grey;
			border-radius: 2em;
		}

		input[type="text"]::placeholder,
		input[type="email"]::placeholder,
		input[type="tel"]::placeholder,
		textarea::placeholder {
			color: grey;
			opacity: 1;
		}

		button[type="submit"] {
			color: white;
			background-color: var(--naranja);
			border: none;
		}

		textarea {
			min-height: 130px;
			resize: none;
		}

		.form-group {
			padding-bottom: 15px;
		}

footer p {
	color: var(--oscuro);
	text-align: center;
}

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

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

.privacy, .privacy a {
	font-family: 'neue-haas-grotesk', sans-serif;
	color: var(--oscuro);
}

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 ) {
	.info-container h2 {
		text-align: center;
	}

	#contact-form {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0em;
		padding: 1em 0 1em 0;
	}
	.form-container {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1em;
	}
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	textarea,
	button[type="submit"] {
		font-family: 'neue-haas-grotesk', sans-serif;
		width: 100%;
		padding: var(--10px) var(--25px);
	}

	.form-group,
	.form-btn {
		width: 90%;
	}

	span.privacy,
	.privacy a {
		font-size: 14px;
	}

}


/* -------------- BOTÓN CITA ---------------------------------------------------------------------------------------- */

.btn-cita {
	color: var(--caqui);
	padding: var(--10px) var(--55px);
	border: 2px solid var(--caqui);
	border-radius: 50px;
}

/* -------------- FORMULARIO DEBAJO DEL HERO ------------------------------------------------------------------------ */
.form-below-hero {
	display: flex;
	flex-direction: column;
	margin-top: 2em;
}

#form-hero {
	display: flex;
	flex-direction: column;
}
	#form-hero .input-group {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1em;
		padding-bottom: 1em;
	}
		#form-hero .input-group input,
		#form-hero .message-group textarea {
			background-color: transparent;
			border: 2px solid white;
			color: white;
		}
		#form-hero .input-group input::placeholder,
		#form-hero .message-group textarea::placeholder {
			color: white;
		}

	#form-hero .message-group {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 1em;
	}

		#form-hero .message-group .checkbox-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 1em;
		}
		#form-hero .message-group .checkbox-group {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		#form-hero .btn-submit-hero {
			width: 50%;
			background-color: white !important;
			color: var(--naranja);
		}

.label-form-hero {
	display: block;
	margin-bottom: 0;
	font-size: var(--15px);
	font-family: 'neue-haas-grotesk', sans-serif;
	color: white;
}

	.label-form-hero a {
		color: white;
	}

	@media ( max-width: 768px ) {
		#form-hero .input-group {
			grid-template-columns: 1fr;
			gap: 1em;
		}

		#form-hero .message-group {
			display: grid;
			grid-template-columns: 1fr;
			gap: 1em;
		}

		#form-hero .btn-submit-hero {
			width: 95%;
			margin: 0 auto;
	}
	}

/* -------------- QUE DICEN NUESTROS PACIENTES ---------------------------------------------------------------------- */
.testimonials {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.5em;
	margin-bottom: 1em;
}
	.testimonials-content {
		max-width: 60%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2em;
	}
		.testimonials-content span {
			font-size: 2em;
		}

 @media ( max-width:768px ) {
	.testimonials-content {
		max-width: 90%;
		gap: .5em;
	}
 }

/* -------------- ANTES & DESPUÉS ----------------------------------------------------------------------------------- */
.before-after {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.5em;
	margin-bottom: 1em;
	padding-bottom: 8em;
}

#slide-box {
	display: flex;
	gap: 3em;
}
	#slide-box img {
		max-width: 700px;
		border-radius: 40px;
	}

.slider-dots {
	bottom: -1.5em !important;
}

.SLIDER .slider-dots>.slider-dot.active:after { 
	content: '\2B24' !important;
}
.SLIDER .slider-dots>.slider-dot:after { 
	content: '\2B58' !important;
}

@media (max-width: 1920px) {
	#slide-box img {
		max-width: 500px;
	}
}

@media ( max-width: 768px ) {
	#slide-box {
		flex-direction: column;
		gap: 1em;
	}

	.before-after {
		gap: 0;
		padding-bottom: 0em;
		margin-bottom: 2em;
	}

	.slider-dots {
		bottom: 1em !important;
	}
}

/* -------------- THANK YOU PAGE ------------------------------------------------------------------------------------ */

.wrapper-thankyou {
	height: 90vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

	.thankyou-page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2em;
		width: 100vw;
		height: 60vh;
		color: white;
		background-color: var(--verde);
	}
		.thankyou-page img {
			width: 35em;
			height: auto;
			padding-bottom: 1em;
		}
		.thankyou-page h1 {
			font-weight: bold;
			text-align: center;
		}

@media (max-width: 1279px) {

}

@media (max-width: 768px) {

	.thankyou-page {
		height: 120vh;
	}
}

@media (min-width: 1921px) {
	.hero {
		height: 70vh;
	}
}

@media (max-width: 768px) {

}

/* -------------- POLÍTICA DE PRIVACIDAD ---------------------------------------------------------------------------- */

.wrapper-privacy {
	display: flex;
	justify-content: center;
	align-items: center;
}

	.privacy-page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2em;
		width: 100%;
		color: white;
		background-color: #e2e2e2;
	}
		.privacy-page img {
			width: 35em;
			height: auto;
			padding-bottom: 1em;
		}
		.privacy-page h1 {
			font-weight: bold;
			text-align: center;
			color: var(--oscuro);
		}
		.privacy-page p {
			color: var(--oscuro);
		}

@media (max-width: 1279px) {

}

@media (max-width: 768px) {

	.privacy-page {
		height: 120vh;
	}
}


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

/* Clases para colores texto */
.c-white {
	color: white;
}
.c-caqui {
	color: var(--caqui);
}
.c-green {
	color: var(--verde);
}

/* Clases para colores background */
.bg-white {
	background-color: white;
}
.bg-caqui {
	background-color: var(--caqui);
}
.bg-green {
	background-color: var(--verde);
}
.bg-orange {
	background-color: var(--naranja);
}
.bg-grey {
	background-color: #e2e2e2;
}



.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;
	} 
}