@font-face {
	font-family: 'Saira Semi Condensed';
	src: url(../font/SairaSemiCondensed-Regular.ttf);
}

/* forms */
:root{
	--form-a: polygon(
    0 0, /* exterior arriba izquierda */
    100% 0, /* exterior arriba derecha*/
    100% 100%, /* exterior abajo derecha */
    20px 100%, /* exterior abajo izquierda trunco abajo*/
    0 calc(100% - 20px) /* exterior abajo izquierda trunco arriba */
     );

	--form-b-span-right: 256px;
	--form-b: polygon(
	20px 0,
	100% 0,
	100% 100%,
	40px 100%,
	20px calc(100% - 20px),
	20px var(--form-b-span-right),
	0 calc(var(--form-b-span-right) - 20px),
	0 64px,
	20px  44px,
	20px 0
	);

	--form-b-border: polygon(
		20px 0,
    100% 0,
    100% 100%,
    40px 100%,
		20px calc(100% - 20px),
		20px var(--form-b-span-right),
		0 calc(var(--form-b-span-right) - 20px),
		0 64px,
		20px 44px,
		20px 0,

		/* reinicio */
    21px 1px,
		21px 45px,
		1px 65px,
		1px calc(var(--form-b-span-right) - 21px),
		21px calc(var(--form-b-span-right) + 1px),
		21px calc(100% - 21px),
		41px calc(100% - 1px),
		calc(100% - 1px) calc(100% - 1px),
		calc(100% - 1px) 1px,
		21px 1px
	);

		--form-c: polygon(
    0 0, /* exterior arriba izquierda */
    100% 0, /* exterior arriba derecha*/
    100% 100%, /* exterior abajo derecha */
    20px 100%, /* exterior abajo izquierda trunco abajo*/
    20px calc(100% - 1px),
    calc(100% - 1px) calc(100% - 1px),
    calc(100% - 1px) 1px,
    1px 1px,
    1px calc(100% - 21px),
    21px calc(100% - 1px),
    20px 100%,
    0 calc(100% - 20px) /* exterior abajo izquierda trunco arriba */
     );

		 --form-d: polygon(
		0 20px, /* arriba trunco izquierda*/
		20px 0, /* arriba trunco derecha*/
		100% 0, /* arriba esquina dercha*/
		100% 100%, /* abajo esquina derecha */
		0 100%, /* abajo esquina izquierda */
		0 20px /* exterior abajo izquierda trunco arriba */
	);

	--form-e: polygon(
		0 0, /* arriba trunco izquierda*/
		calc(100% - 20px) 0, /* arriba trunco derecha*/
		100% 20px, /* arriba esquina dercha*/
		100% 100%, /* abajo esquina derecha */
		0 100%, /* abajo esquina izquierda */
		0 0 /* exterior abajo izquierda trunco arriba */
	);
	--form-f: polygon(
		0 20px, /* arriba trunco izquierda */
    20px 0, /* arriba trunco izquierda */
		100% 0, /* arriba esquina dercha */
		100% calc(100% - 20px), /* abajo trunco derecha */
		calc(100% - 20px) 100%, /* abajo trunco derecha */
		0 100%, /* exterior abajo izquierda trunco arriba */
    0 20px
	);

  --form-g: polygon(
		0 20px, /* arriba trunco izquierda */
    20px 0, /* arriba trunco izquierda */
		100% 0, /* arriba esquina dercha */
		100% calc(100% - 20px), /* abajo trunco derecha */
		calc(100% - 20px) 100%, /* abajo trunco derecha */
		0 100%, /* exterior abajo izquierda trunco arriba */
    0 20px,
    1px 20px, /* retorno */
    1px calc(100% - 1px),
    calc(100% - 21px) calc(100% - 1px),
    calc(100% - 1px) calc(100% - 21px),
    calc(100% - 1px) 1px,
    21px 1px,
    1px 21px
	);
}

/* colors */
:root{
	--dark-orange: orangered;
	--dark-orange-transparent: rgba(30, 0, 140, 0.7);
	--page-content-max-width: 1100px;
}

*{
	box-sizing: border-box;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body{
	padding: 0;
	margin: 0;
	background: #181723;
	color: #eee;	
	font-family: 'Saira Semi Condensed', sans-serif;
	line-height: 1.3;
	font-size: 17px;
	overflow: hidden;
}

svg{
	fill: var(--fill, white);
}

.void-form{
	position: relative;
}

.void-form::before,
.void-form::after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

span.nobreak{
	white-space: nowrap;
}

.disabled{
	opacity: 0.5;
	pointer-events: none;
}

/*
      :::::::::  :::::::::  ::::::::::
     :+:    :+: :+:    :+: :+:
    +:+    +:+ +:+    +:+ +:+
   +#++:++#+  +#++:++#:  +#++:++#
  +#+        +#+    +#+ +#+
 #+#        #+#    #+# #+#
###        ###    ### ##########
      :::        ::::::::      :::     :::::::::
     :+:       :+:    :+:   :+: :+:   :+:    :+:
    +:+       +:+    +:+  +:+   +:+  +:+    +:+
   +#+       +#+    +:+ +#++:++#++: +#+    +:+
  +#+       +#+    +#+ +#+     +#+ +#+    +#+
 #+#       #+#    #+# #+#     #+# #+#    #+#
########## ########  ###     ### #########
*/


body.no-animations .page,
body.no-animations .page *,
body.no-animations .page *::before,
body.no-animations .page *::after
{
	animation: none!important;
}

/* body.no-animations .page{
	opacity: 0;
} */

.section:not(.welcome) picture img[onload]{
	opacity: 0;
	transition: opacity 0.2s ease;
}

.section:not(.welcome) picture img[onload].loaded{
	opacity: 1;
}

.load-page{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #161a2f;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	z-index: 50;
}

.load-page .cont-progbar{
	position: relative;
	width: 60%;
	max-width: 200px;
	height: 10px;
	--asccent-color: cyan;
	border: 1px solid var(--asccent-color);
	padding: 2px;
	display: flex;
	margin: 10px 0 0 0;
}

.load-page .cont-progbar .progbar{
	width: 10%;
	background: var(--asccent-color);
	height: 100%;	
	transition: width 0.3s linear;
}

.load-page .dots{
	animation: blink 0.5s linear 0s infinite both !important;
}

.load-page.loaded{
	animation: fadeOut 0.5s ease 0.3s 1 both !important;
}

.load-page.loaded .progbar{
	width: 100%;
}

@keyframes blink{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}



/*
      :::::::::     :::      ::::::::  ::::::::::
     :+:    :+:  :+: :+:   :+:    :+: :+:
    +:+    +:+ +:+   +:+  +:+        +:+
   +#++:++#+ +#++:++#++: :#:        +#++:++#
  +#+       +#+     +#+ +#+   +#+# +#+
 #+#       #+#     #+# #+#    #+# #+#
###       ###     ###  ########  ##########
*/


.cont-page{
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	overflow: hidden;
	/* background: linear-gradient(to bottom, #4a4a4a, #030713); */
	background: linear-gradient(to bottom, #4a4a4a, #0a122b);
}

.page{
	display: flex;
	flex-flow: column;
	width: 100%;
	max-width: 2200px;
	height: 100%;
	max-height: 1200px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 14px 47px #000000ba;
	background: #111;
}

.cont-page-backgrounds{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.blue-background,
.person
{
	will-change: transform;
	width: 100%;
	height: 100%;	
	transition: background 0.2s ease;
	position: absolute;
	top: 0;
	left: 0;
	background-size: cover!important;
	background-position: center!important;
}

.blue-background{	
	filter: saturate(1.5);
	z-index: 0;
	/* transition: transform 0.1s ease; */
}

.person{
	z-index: 2;
	/* --shadow: rgba(0,0,0,0.3); */
	--shadow: rgb(16 192 255 / 99%);
	--initial-filter: saturate(1.2);	
}

.welcome-shine{
	/* will-change: width; */
	background: rgba(31, 102, 255, 0.771);
	/* animation: expandWelcomeShine 3s ease 0.5s 1 both; */
	border-radius: 50%;	
	aspect-ratio: 1 / 1;
	position: absolute;
	margin: 30% auto auto auto;
	z-index: 1;
}

@media only screen and (min-width: 350px){
	/* .blue-background{
		animation: zoomOut 1.2s ease 0s 1 both;
	} */

	/* .welcome-shine{
		animation: expandWelcomeShine 4s ease 2.3s 1 both;
	} */

	.person{
		filter: var(--initial-filter) drop-shadow(0 5px 10px var(--shadow));
	}
}

@media only screen and (min-width: 1024px){
	.blue-background{
		animation: zoomOut 4s ease 0s 1 both;
		transform: var(--zoomScroll);/* calc with JS */
	}

	.welcome-shine{
		animation: expandWelcomeShine 5s ease 2s 1 both;
	}

	.person{
		animation: zoomIn 3s ease 1 both, personShadow 2s ease 2.8s 1 both;
	}
}

@media only screen and (max-width: 1023px){
	.person{
		filter: var(--initial-filter) drop-shadow(0 5px 10px var(--shadow));
	}
}

@keyframes expandWelcomeShine{
	0%{
		width: 0;
		opacity: 1;		
	}

	50%{		
		/* opacity: 0; */
	}

	100%{
		width: 300%;
		opacity: 0;
	}
}

/* móvil baja resolución ---------------- */

@media only screen and (max-width: 600px) and (-webkit-max-device-pixel-ratio: 2),
       only screen and (max-width: 600px) and (max-resolution: 287dpi) {

  .blue-background{
		background: url('../img/bg/welcome/draebat-systems-welcome-bg-portrait-400x600.webp');
		animation-duration: 2s;
	}
	.person{
		background: url('../img/bg/welcome/draebat-systems-welcome-person-portrait-400x527.webp');
	}
}

/* móvil alta resolución ---------------- */

@media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2.01),
       only screen and (max-width: 600px) and (min-resolution: 288dpi) {

	.blue-background{
		background: url('../img/bg/welcome/draebat-systems-welcome-bg-portrait-800x1200.webp');
		animation-duration: 2s;
	}
	.person{
		background: url('../img/bg/welcome/draebat-systems-welcome-person-portrait-800x1053.webp');
	}

	.dev-msg{
		display: inline-block;
	}
}

/* móvil super resolución ---------------- */

@media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 3),
       only screen and (max-width: 600px) and (min-resolution: 288dpi) {

	.blue-background{
		background: url('../img/bg/welcome/draebat-systems-welcome-bg-portrait-1200x1800.webp');
		animation-duration: 2s;
	}
	.person{
		background: url('../img/bg/welcome/draebat-systems-welcome-person-portrait-1200x1580.webp');
	}

	.dev-msg{
		display: inline-block;
	}
}

/* Tablets general ---------------- */

@media only screen and (min-width: 601px){
	.blue-background{
		background: url('../img/bg/welcome/draebat-systems-welcome-bg-landscape-1152x768.webp');
	}

	.person{
		background: url('../img/bg/welcome/draebat-systems-welcome-person-landscape-1153x646.webp');
	}
}

/* Escritorio baja resolución ---------------- */

@media only screen and (min-width: 1024px){
	.blue-background{
		background: url('../img/bg/welcome/draebat-systems-welcome-bg-landscape-1536x1024.webp');
	}

	.person{
		background: url('../img/bg/welcome/draebat-systems-welcome-person-landscape-1536x861.webp');
	}
}

/* Escritorio alta resolución ---------------- */

@media only screen and (min-width: 1600px){
	.blue-background{
		background: url('../img/bg/welcome/draebat-systems-welcome-bg-landscape-2000x1333.webp');
	}

	.person{
		background: url('../img/bg/welcome/draebat-systems-welcome-person-landscape-2000x1121.webp');
	}
}

.page-content{
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 100%;
	height: 100%;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
}

/*
      :::    ::: ::::::::::     :::     :::::::::  :::::::::: :::::::::
     :+:    :+: :+:          :+: :+:   :+:    :+: :+:        :+:    :+:
    +:+    +:+ +:+         +:+   +:+  +:+    +:+ +:+        +:+    +:+
   +#++:++#++ +#++:++#   +#++:++#++: +#+    +:+ +#++:++#   +#++:++#:
  +#+    +#+ +#+        +#+     +#+ +#+    +#+ +#+        +#+    +#+
 #+#    #+# #+#        #+#     #+# #+#    #+# #+#        #+#    #+#
###    ### ########## ###     ### #########  ########## ###    ###
*/

header{
	height: 50px;
	flex-shrink: 0;
	width: 100%;
	position: sticky;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	z-index: 30;
	background: linear-gradient(to bottom, rgb(87 100 251 / 74%), transparent);
	backdrop-filter: blur(10px);
}

header .content{
	width: 100%;
	max-width: var(--page-content-max-width);
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}



header .cont-links{
	display: flex;
	align-items: center;
	/* max-width: 450px; */
	/* overflow-x: auto;
	overflow-y: hidden; */
	margin: 0 0 0 10px;
	position: relative;
	height: 100%;
	padding: 0 0 0 5px;
}

header .cont-links::-webkit-scrollbar{
	display: none;
}

header .link{
	padding: 6px;
	width: 83px;
	white-space: nowrap;
	color: white;
	text-decoration: none;
	border: 1px solid transparent;
	transition: border 0.1s, color 0.1s;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0 0 0 5px;
	flex-shrink: 0;
	text-shadow: 0 1px 3px rgb(0 0 0 / 87%);
	cursor: pointer;
	border-radius: 10px;
}

header .link:first-child{
	margin: 0;
}

@media (pointer:fine) {
	header .link:not(.focus):hover{
		border: 1px solid white;
	}
}

header .link.focus{
	border: 1px solid rgb(255, 198, 144);
	background: rgba(202, 117, 37, 0.68);
	box-shadow: 0 0 5px orange;
}

header .logo{
	width: 130px;
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}


.logo img{
	width: 100%;
}

.header-separator{
	height: 50%;
	border-left: 1px solid #a5a5a5;
	margin: 0 10px;
}

header .link.icon{	
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 30px;
	border: 1px solid #feaa00;
	padding: 0;
	margin: 0 0 0 5px;
}

header .link.icon svg{
	width: 22px;
	height: 22px;
}

header .link.icon span{
	margin: 0 0 0 5px;
}



@media only screen and (max-height: 500px){
	header{
		height: 34px;
	}

	header .link{
		padding: 3px;
		font-size: 14px;
	}	

}


.eslogan{
	font-style: italic;
	letter-spacing: 5px;
	font-size: 13px;
	position: relative;
	z-index: 0;
}




@media only screen and (max-width: 767px){
	header .cont-links,
	.header-responsive-blur
	{
		will-change: transform;
		position: absolute;
		top: 0;
		right: 0;		
		background: linear-gradient(to bottom, #292929, #3441c5ab);
		width: 80%;
		max-width: 266px;
		flex-flow: column;
		height: 100vh;
		padding: 60px 10px 10px 10px;
		align-items: flex-end;
		box-shadow: -7px -1px 10px rgba(0, 0, 0, 0.3);
		display: none;
		animation: toLeft 0.3s ease 0s 1 both;
	}
	
	.header-responsive-blur{
		backdrop-filter: blur(5px);
		z-index: 30;
		background: none!important
	}

	header .cont-links .btn-close{
	font-size: 30px;
	border-radius: 20px;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-family: monospace;
	background: #222;
	position: absolute;
	top: 10px;
	right: 10px;
	/* font-style: normal; */
	line-height: 1;
}

	header .cont-links{
		z-index: 31!important;
		backdrop-filter: blur(5px);
	}

	
	header .cont-links .link{
		width: 100% !important;
		justify-content: flex-end;
		padding: 6px 10px 6px 10px;
	}

	header .cont-links .link:not(:last-of-type){
		margin: 0 0 10px 0;
	}

	header .show-links-responsive-trigger{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		aspect-ratio: 1 / 1;
		cursor: pointer;
		--fill: yellow;
		transform: scale(1);
		transition: transform 0.2s ease;
	}

	header .show-links-responsive-trigger:active{
		transform: scale(0.9);
	}

	@media (pointer: fine){
		header .show-links-responsive-trigger:hover{
			background: rgba(0, 0, 0, 0.3);
		}
	}

	.header-separator{
		height: 0;
		width: 80%;
		margin: 20px 0;
	}
	

}

@media only screen and (min-width: 768px){
	header .cont-links .btn-close{
		display: none;
	}

	header .cont-links{
		display: flex!important;
	}

	header .show-links-responsive-trigger{
		display: none;
	}	

	header .link.icon{
		width: auto;
		padding: 0 10px;
	}

}

@media only screen and (min-width: 768px) and (max-width: 1024px){
	header .link.icon{
		padding: 0;
		width: 30px;
		height: 30px;
	}

	header .link.icon span{
		display: none;
	}
}


/*
      ::::::::  :::::::::: :::::::: ::::::::::: ::::::::::: ::::::::  ::::    :::
    :+:    :+: :+:       :+:    :+:    :+:         :+:    :+:    :+: :+:+:   :+:
   +:+        +:+       +:+           +:+         +:+    +:+    +:+ :+:+:+  +:+
  +#++:++#++ +#++:++#  +#+           +#+         +#+    +#+    +:+ +#+ +:+ +#+
        +#+ +#+       +#+           +#+         +#+    +#+    +#+ +#+  +#+#+#
#+#    #+# #+#       #+#    #+#    #+#         #+#    #+#    #+# #+#   #+#+#
########  ########## ########     ###     ########### ########  ###    ####
*/


.section{
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-shrink: 0;
	min-height: 100%;
	padding: clamp(60px, 5vh, 100px) 10px clamp(60px, 5vh, 100px) 10px;
	position: relative;
	z-index: 4;
}

.section:not(.welcome){
	justify-content: flex-start;
}



.section *{
	position: relative;
}


.separator{
	background: #888;
	height: 1px;
	width: calc(100% - 20px);
	max-width: var(--page-content-max-width);
	flex-shrink: 0;
}



/*
    :::       ::: :::::::::: :::        ::::::::   ::::::::    :::   :::   ::::::::::
   :+:       :+: :+:        :+:       :+:    :+: :+:    :+:  :+:+: :+:+:  :+:
  +:+       +:+ +:+        +:+       +:+        +:+    +:+ +:+ +:+:+ +:+ +:+
 +#+  +:+  +#+ +#++:++#   +#+       +#+        +#+    +:+ +#+  +:+  +#+ +#++:++#
+#+ +#+#+ +#+ +#+        +#+       +#+        +#+    +#+ +#+       +#+ +#+
#+#+# #+#+#  #+#        #+#       #+#    #+# #+#    #+# #+#       #+# #+#
###   ###   ########## ########## ########   ########  ###       ### ##########
*/

.section.welcome{
	margin: -50px 0 0 0;
	z-index: 3;
}

@media only screen and (max-height: 400px){
	header{
		position: relative;
	}
	.page-content{
		height: initial;
		min-height: initial;
		overflow: auto;
	}
	.section.welcome{
		margin: 0;
		min-height: 100%;
	}

}

/* @media only screen and (min-width: 601px) and (max-width: 1000px){ */
@media only screen and (max-width: 1199px){
	.section.welcome{
		justify-content: flex-end;
	}
}


.section.welcome .section-content{
	width: 100%;
	max-width: var(--page-content-max-width);
	display: flex;
	align-items: center;
	padding: 20vh 0 40px 0;
}

.section.welcome .content .info{
	width: 90%;
	max-width: 700px;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
}

.section.welcome .cont-title{
	position: relative;
	width: 100%;
}

.section.welcome .title-wrapper{
	font-size: 70px;
	margin: 5px 0 15px 0;
	font-style: italic;
	line-height: 1.1;
	font-weight: bold;
	position: relative;
}


.section.welcome .title-wrapper span.text{
	background: -webkit-linear-gradient(white, white, #fffff2, #fcbca7 68%, #947d78 79%, #fcbca7 );
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: white;
	padding: 0 11px 0 0;
	filter: drop-shadow( 0 -8px 5px  rgba(255, 255, 255, 0.5)) drop-shadow(0 3px 4px rgba(0,0,0,0.5));
	display: inline-block;
}

.section.welcome .title-wrapper.shine{
	position: absolute;
	top: -5px;
	left: 0;
	width: 100%;
	--mask-image: linear-gradient(-75deg, rgba(0,0,0,.0) 40%, #000 50%, rgba(0,0,0,.0) 60%);
	mask-image: var(--mask-image);
	-webkit-mask-image: var(--mask-image);
	--mask-size: 200%;
	mask-size: var(--mask-size);
  -webkit-mask-size: var(--mask-size);
  animation: shineText 2s linear 1s 1 both;
}

.section.welcome .title-wrapper.shine span.text{
	background: -webkit-linear-gradient(white, white);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section.welcome .caption{
	font-size: 30px;
	margin: 20px 0 0 0;
	text-shadow: 0 2px 7px rgb(0 0 0);
}

.section.welcome .content .info p{
	text-shadow: 0 2px 5px rgba(0,0,0,0.9);
}

.section.welcome .caption-extra
{
	padding: 8px 5px 8px 10px;
	display: block;
	max-width: 500px;
	width: auto;
	margin: 10px 0 0 -10px;
	border-left: 5px solid yellow;
	/* box-shadow: -15px 0 20px -15px rgba(255, 255, 0, 0.796); */
	position: relative;
	overflow: hidden;
}

.section.welcome .inset-light{
	position: absolute;
	width: 100px;
	top: 0;
	left: 0;
	height: 100%;
	background: radial-gradient(circle at -50% 50%, #f0ff00a6, #f0ff002e, transparent);
	display: inline;
	animation: fadeIn 0.8s ease 0.4s 1 both;
}

.section.welcome .caption-extra .text{
	position: relative;
	animation: fadeIn 0.4s ease 1s 1 both;
}

.section.welcome .caption-extra::before,
.section.welcome .caption-extra::after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	/* width: 100%; */
	height: 100%;
	animation: expandToRight 1.2s ease 0s 1 both;
}

.section.welcome .caption-extra::before{
	clip-path: var(--form-a);
	transform: rotateY(180deg);
	/* background: rgba(0, 0, 0, 0.598); */
	background: linear-gradient(to bottom, rgba(70, 70, 70, 0.598), rgba(0, 0, 0, 0.598));
	backdrop-filter: blur(5px);
}

.section.welcome .caption-extra::after{
	clip-path: var(--form-c);
	transform: rotateY(180deg);
	background: linear-gradient(to bottom, #ccc, #787878, rgb(57, 57, 57) 60%);
}

.section.welcome .focus-caption{
	font-weight: bold;
	display: block;
}

@media only screen and (max-width: 600px), (min-height: 550px){
	.section.welcome h2{
		margin: 10vh 0 15px 0;
		font-size: 50px;
	}

}


@media only screen and (max-width: 600px){

	.section.welcome .caption{
		font-size: 25px;
		margin: 20px 0 0 0;
	}

	.section.welcome .info{
		font-size: 16px;
	}

	.section.welcome .content .info{
		min-width: 70%;
	}

	.section.welcome .content .ilust{
		width: 30%;
	}

}


@media only screen and (min-width: 600px){

	.section.welcome .title-wrapper span.experiencia,
	.section.welcome .title-wrapper span.digital
	{
		width: auto;
	}

	.section.welcome .title-wrapper span.vive-la
	{
		width: 100%;
	}


}



@media only screen and (max-width: 600px){
	.section.welcome .title-wrapper{
		height: 47vw;
	}
	.section.welcome .title-wrapper span
	{
		width: 100vw;
		font-size: 16vw;
		position: absolute;
	}

	.section.welcome .title-wrapper span.vive-la{
		top: 0;
	}
	.section.welcome .title-wrapper span.experiencia{
		top: 16vw;
	}
	.section.welcome .title-wrapper span.digital{
		top: 34vw;
	}

}

@media only screen and (max-width: 600px) and (min-height: 550px){
	.section.welcome{
		justify-content: flex-end;
	}
	.section.welcome .content{
		padding: 0 0 20px 0;
		align-items: flex-end;
	}
}


.cont-triggers{
	margin: 10px 0 0 0;
	display: flex;
}

.btn-trigger{
	position: relative;
	padding: 10px 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}


/*
          :::     :::::::::   ::::::::  :::    ::: :::::::::::
       :+: :+:   :+:    :+: :+:    :+: :+:    :+:     :+:
     +:+   +:+  +:+    +:+ +:+    +:+ +:+    +:+     +:+
   +#++:++#++: +#++:++#+  +#+    +:+ +#+    +:+     +#+
  +#+     +#+ +#+    +#+ +#+    +#+ +#+    +#+     +#+
 #+#     #+# #+#    #+# #+#    #+# #+#    #+#     #+#
###     ### #########   ########   ########      ###
*/



/* .section.welcome{
	display: none;
} */

.section.about{
	justify-content: center;
	overflow-x: hidden;
}

.section.about .section-content{
	width: 100%;
	max-width: var(--page-content-max-width);
}

.about-grid{
	display: flex;
	flex-flow: column;
}

.about-grid .square{
	grid-template-areas: 'title ilust' 'text ilust';
	display: grid;
	grid-template-columns: 1fr 33%;
	/* gap: 0 20px; */
	gap: 0;
	align-items: center;
}


.about-grid .square:not(:last-of-type){
	margin: 0 0 30px 0;
}

.about-grid .title{
	font-style: italic;
	text-align: left;			
	padding: 0 0 0 10px;
	margin: 0 0 0 15px;
	position: relative;
	filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.5));
	z-index: 3;
}

.about-grid .title span{
	font-size: 30px;
	font-weight: bold;
	z-index: 2;
	background: -webkit-linear-gradient(white 50%,  #ccc 60%, white );
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
	padding: 0 50px 0 0;
}

.about-grid .text{
	grid-area: text;
	position: relative;
	border-radius: 20px;
	/* background: linear-gradient(45deg, rgba(0, 0, 0, .8), rgb(36 64 63 / 70%)); */
	background: linear-gradient(45deg, rgba(0, 0, 0, .8), rgb(49 83 178 / 70%));
	padding: 20px calc(49% + 40px) 20px 20px;
	margin: -20px -49% 0 0;
}



.about-grid .text .show-more-trigger{
	position: absolute;
	bottom: 5px;
	right: 36%;
	border-radius: 25px;	
	background: linear-gradient(179deg, #333, #0048ff);
	text-align: center;
	padding: 3px 10px;
	cursor: pointer;
	font-size: 16px;
	transition: background 0.1s ease;	
	z-index: 3;
}

.about-grid .text .show-more-trigger:hover{
	background: linear-gradient(179deg, #333, #192f68);	
}

.about-grid .cont-ilust{
	grid-area: ilust;
	display: flex;
	--border-radius: 20px;
	filter: drop-shadow(-1px 5px 7px rgba(0,0,0,0.7));
	transform: translateX(-20px);
	height: 100%;
}



.about-grid .cont-ilust .cont-img.shine-item .shine-fx-container
{
	z-index: 5;
	border-radius: var(--border-radius);
}


.about-grid .cont-ilust picture,
.about-grid .cont-ilust img
{
	border: 1px solid white;
	
	border-radius: var(--border-radius);
	width: 100%;
  height: 100%;
  object-fit: cover;       
  object-position: center;
  display: block;
	aspect-ratio: 1 / 0.6;
}

.section.about .square.about .cont-ilust img{
	filter: saturate(120%);
}

.section.about .square.social .cont-ilust img{
	filter: saturate(130%);
}

.section.about .square.projects .cont-ilust img{
	filter: saturate(150%);
}

@media only screen and (max-width: 767px){
	.about-grid .square{
		grid-template-areas: 'title' 'ilust' 'text';
		grid-template-columns: auto;
		gap: 20px 0;
	}

	.about-grid .title{
		text-align: center;
		font-style: normal;
		margin: 0;
	}

	.about-grid .title span{
		padding: 0 10px;
	}

	.about-grid .cont-ilust
	{
		justify-self: center;
		max-width: 350px;
		transform: translateX(0px);
	}

	.about-grid .text{
		background: rgba(0, 0, 0, 0.5);
		text-align: center;
		padding: 20px;
		margin: -20px 0 0 0;
	}
	
	.about-grid .text .show-more-trigger{
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
		font-size: 15px;
		right: 5px;
	}
}


/*
      :::::::::   ::::::::  ::::::::: :::::::::::
     :+:    :+: :+:    :+: :+:    :+:    :+:
    +:+    +:+ +:+    +:+ +:+    +:+    +:+
   +#++:++#+  +#+    +:+ +#++:++#:     +#+
  +#+        +#+    +#+ +#+    +#+    +#+
 #+#        #+#    #+# #+#    #+#    #+#
###         ########  ###    ###    ###
      :::::::::: ::::::::  :::        ::::::::::: ::::::::
     :+:       :+:    :+: :+:            :+:    :+:    :+:
    +:+       +:+    +:+ +:+            +:+    +:+    +:+
   :#::+::#  +#+    +:+ +#+            +#+    +#+    +:+
  +#+       +#+    +#+ +#+            +#+    +#+    +#+
 #+#       #+#    #+# #+#            #+#    #+#    #+#
###        ########  ########## ########### ########
*/




/* .section.welcome,
.section.about{
	display: none;
}

.blue-background,
.person{
	filter: blur(10px)!important;
} */

.section.portfolio{
	overflow: hidden;
}

.section.portfolio .section-content{
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 100%;
	min-height: 100%;
}

.section.portfolio h2{
	font-size: 32px;
	background: -webkit-linear-gradient(white 50%,  #ccc 60%, white );
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.5)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
	margin: 0;
}

.section.portfolio h3{
	margin: 0;
	font-style: italic;
}

.section.portfolio .instructions{
	width: 90%;
	max-width: 700px;
	text-align: center;
	background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0, 0.3), transparent);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	background: rgba(0, 0, 0, 0.4);
	border-radius: 15px;
	padding: 10px 10px;
	display: flex;
	flex-flow: column;
	align-items: center;
	margin: 0 0 20px 0;
	font-size: 15px;
}

.section.portfolio .instructions p{
	margin: 0;
}

.section.portfolio .instructions b{
	font-style: italic;
	color: cyan;
}



.service-details-trigger{
	border: 1px solid #777;
	background: rgba(0, 0, 0, 0.3);
	padding: 5px 12px;
	display: flex;
	align-items: center;
	cursor: pointer;
	margin: 10px 0 0 0;
	font-size: 13px;
	border-radius: 10px;
	line-height: 0;
}

.service-details-trigger:hover{
	border: 1px solid white;
	background: rgba(88, 88, 88, 0.3);
}

.service-details-trigger svg{
	margin: 0 5px 0 0;
	width: 19px;
	height: 19px;
}

.section.portfolio .cont-presentation-titles{
	max-width: 400px;
}

.section.portfolio .section-description{
	margin: 20px 0 30px 0;
}

/*
Yb        dP 888888 88""Yb
 Yb  db  dP  88__   88__dP
  YbdPYbdP   88""   88""Yb
   YP  YP    888888 88oodP
8888b.  888888 .dP"Y8 88  dP""b8 88b 88
 8I  Yb 88__   `Ybo." 88 dP   `" 88Yb88
 8I  dY 88""   o.`Y8b 88 Yb  "88 88 Y88
8888Y"  888888 8bodP' 88  YboodP 88  Y8
*/



.section.portfolio .cont-mockups-mode-triggers{
	display: flex;
}

.section.portfolio .cont-mockups-mode-triggers .mode-trigger{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 27px;
	font-size: 13px;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.5);
	border-bottom: 3px solid #555;
}

.section.portfolio .cont-mockups-mode-triggers .mode-trigger:hover{
	background: rgba(52, 52, 52, 0.5);
	border-bottom: 3px solid #696969;
}

.section.portfolio .cont-mockups-mode-triggers .mode-trigger.selected{
	background: rgb(130 130 130 / 66%);
	border-color: #ffffff;
}

.section.portfolio .cont-mockups-mode-triggers .mode-trigger svg{
	width: 14px;
	height: 14px;
	margin: 0 5px 0 0;
}

.section.portfolio .cont-software-design-gallery{
	display: flex;
	position: relative;
	width: 100%;
	margin: 20px 0 0 0;

	justify-content: center;
}

.section.portfolio .cont-mockups{
	display: flex;
	justify-content: center;
	z-index: 3;
	max-width: 100%;
}

.section.portfolio .cont-mockups .cont-laptop{
	position: relative;
	width: 100vh;
	max-width: 100%;
	animation: fadeIn 0.3s ease 0s 1 both;
}

.section.portfolio .cont-mockups .cont-laptop img{
	width: 100%;
	filter: drop-shadow(0 5px 10px rgba(0,0,0,0.6));
}

.section.portfolio .cont-mockups .cont-laptop .design-preview{
	width: 74%;
	aspect-ratio: 2 / 1.3;
	position: absolute;
	top: 6%;
	left: 13.5%;
	border-radius: 10px;
	background: var(--bg-laptop);
	background-size: 100% auto;
	background-position: top;
	background-repeat: no-repeat;
	animation: fadeIn 0.4s ease 0s 1 both;
}

.section.portfolio .cont-mockups .cont-smartphone{
	position: absolute;
	width: 20vh;
	max-width: 20%;
	right: 7%;
	bottom: 9%;
	animation: fadeIn 0.3s ease 0s 1 both;
}

.section.portfolio .cont-mockups .cont-smartphone img{
	width: 100%;
	filter: drop-shadow(0 5px 10px rgba(0,0,0,0.6));
}

.section.portfolio .cont-mockups .cont-smartphone .design-preview{
		width: 82%;
    aspect-ratio: 1 / 2.02;
    position: absolute;
    top: 10%;
    left: 9%;
		background: var(--bg-laptop);
    background-size: 100% auto;
		background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
		border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 13% 7%;
    border-bottom-left-radius: 13% 7%;
		animation: fadeIn 0.4s ease 0s 1 both;
}



.section.portfolio[data-mode='pc'] .cont-smartphone{
	display: none;
}

.section.portfolio[data-mode='mobile'] .cont-laptop{
	/* opacity: 0; */
	display: none;
}

.section.portfolio[data-mode='mobile'] .cont-mockups{
	max-width: 90%;
	--portfolio-arrows-pos: -5vw;
}

.section.portfolio[data-mode='mobile'] .cont-smartphone{
	max-height: 60vh;
	max-width: 100%;
	width: auto;
	position: relative;
	left: unset;
	right: unset;
	bottom: unset;
}

.section.portfolio[data-mode='mobile'] .cont-smartphone img{
	max-height: 100%;
	height: unset;
}


.design-gallery{
	position: absolute;
	width: calc(100% + 20px);
	top: 0;
	left: -10px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	z-index: 2;
	mask-image: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,1) 40px, rgba(0,0,0,1) calc(100% - 40px), rgba(0,0,0,0.3));

}

.design-gallery .item{
	aspect-ratio: 2 / 1;
	margin: 0 4vw;
	width: 70vh;
	flex-shrink: 0;
	max-width: 70%;
	overflow: hidden;
	--opacity-0: 0;
	--opacity-100: 0.5;
	opacity: var(--opacity-100);
	animation: fadeInRelative 0.4s ease 0s 1 both;
	border-radius: 20px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease;
}

.design-gallery .item img{
	width: 100%;
	display: block;
}


.section.portfolio .carousel-nav{
  --arrow-width: 60px;
  width: var(--arrow-width);
  height: var(--arrow-width);
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  top: calc(50% - (var(--arrow-width) / 2) );
  cursor: pointer;
  --base-grad: #aaa;
	transition: filter 0.2s ease;
	filter: drop-shadow(0 0px 10px rgba(0,0,0,0.8));
}

.section.portfolio .carousel-nav::after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  --light-grad: white;
  --border-width: 14px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(100% - var(--border-width)) 100%,
    calc(100% - var(--border-width)) var(--border-width),
    0 var(--border-width)
  );
  transition: transform 0.1s ease, background 0.1s ease;
}

.section.portfolio .carousel-nav:active::after{
  transform: scale(0.9);
}

@media (pointer: fine){
	.section.portfolio .carousel-nav:hover{
		--light-grad: #b7ffed;
		--base-grad: #2863ee;
		filter: drop-shadow(0px 0px 10px var(--shadow));
		--shadow: rgb(3, 246, 119);
	}
	
}


.section.portfolio .carousel-nav:active{
	--light-grad: #b7ffed;
  --base-grad: #52c3cd;
}

@media only screen and (max-width: 768px){

  .section.portfolio .carousel-nav{
    --arrow-width: 40px;
  }

  .section.portfolio .carousel-nav::after{
    --border-width: 10px;
  }
}

.section.portfolio .presentation-item.web-apps-design{
	--portfolio-arrows-pos: -5px;
}

.section.portfolio .carousel-nav.left{
  left: var(--portfolio-arrows-pos);
  transform: rotate(-135deg);
  
}

.section.portfolio .carousel-nav.left::after{
  background: linear-gradient(-45deg, var(--light-grad), var(--base-grad));
}

.section.portfolio .carousel-nav.right{
  right: var(--portfolio-arrows-pos);
  transform: rotate(45deg);  
}

.section.portfolio .carousel-nav.right::after{
  background: linear-gradient(135deg, var(--light-grad), var(--base-grad));
}


/*
8888b.  88""Yb    db    888888 88""Yb    db    888888
 8I  Yb 88__dP   dPYb   88__   88__dP   dPYb     88
 8I  dY 88"Yb   dP__Yb  88""   88""Yb  dP__Yb    88
8888Y"  88  Yb dP""""Yb 888888 88oodP dP""""Yb   88

	db    88""Yb 88""Yb .dP"Y8
  dPYb   88__dP 88__dP `Ybo."
 dP__Yb  88"""  88"""  o.`Y8b
dP""""Yb 88     88     8bodP'
*/

.presentation-item.draebat-apps{
	margin: 10px 0 0 0;
}

.draebat-app-banner{
	grid-template-areas: 'title ilust'
	'text ilust';
	grid-template-columns: 1fr 350px;
	width: 100%;
	max-width: 1050px;
	display: grid;
	padding: 6px 3vw 20px 6vw;
	position: relative;
	gap: 0 15px;
}

@media only screen and (max-width: 767px){
	.draebat-app-banner{
		grid-template-areas: 'title' 'ilust'
		'text';
		grid-template-columns: auto;
	}
}

.draebat-app-banner .banner-bg{
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	filter: drop-shadow( 0 10px 20px -5px rgba(0, 0, 0, 0.4));
	border-radius: 10px;
}

.draebat-app-banner.webmarks-pro .banner-bg::before{
	clip-path: var(--form-f);
  background: radial-gradient(circle at 50% -50%, #4d0c64, #050108);
}

.draebat-app-banner.webmarks-pro .banner-bg::after{
	background: #b335ff;
	clip-path: var(--form-g);
}

.draebat-app-banner.exprezz-link .banner-bg::before{
	background: radial-gradient(circle at 50% -50%, rgb(0, 58, 0), rgb(0, 22, 0));
	clip-path: var(--form-f);
}

.draebat-app-banner.exprezz-link .banner-bg::after{
	background: green;
	clip-path: var(--form-g);
}

.draebat-app-banner{
	margin: 0 0 6vh 0;
	animation: fadeIn 0.3s ease 0s 1 both;
}

.draebat-app-banner .title{
	grid-area: title;
	font-size: 35px;
	margin: -20px 0 0 0;
	font-weight: bold;
	text-shadow: 0 0 12px rgb(255 255 255 / 63%);
}

.draebat-app-banner .text{
	grid-area: text;
	font-size: 17px;
}

.draebat-app-banner .cont-ilust{
	grid-area: ilust;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1000px;
	transform-style: preserve-3d;
}

.draebat-app-banner .cont-ilust .cont-img{
	width: 100%;
	max-width: 360px;
	transform: rotateY(-27deg);
	transition: transform 0.5s ease;
}

.draebat-app-banner .shine-fx .shine-fx-container{
	z-index: 5;
}

.draebat-app-banner .cont-ilust img{
	width: 100%;
	transition:filter 0.3s ease;
}

.draebat-app-banner.webmarks-pro .cont-ilust img{
	filter: drop-shadow(6px 4px 10px rgba(140, 25, 255, 0.733)) drop-shadow(6px 4px 10px rgba(34, 25, 426, 0.733));
}

.draebat-app-banner.exprezz-link .cont-ilust img{
	filter: drop-shadow(6px 4px 10px rgba(0, 255, 0, 0.733)) drop-shadow(6px 4px 10px rgba(105, 14, 386, 0.733));
}

.draebat-app-banner .cont-triggers{
	margin: 0 0 20px 0;
	display: flex;
}

.draebat-app-banner .btn-trigger{
	padding: 5px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 10px 0 0;
	cursor: pointer;
	background: #222;
	border: 1px solid #555;
	border-radius: 10px;;
}

.draebat-app-banner .btn-trigger svg{
	width: 22px;
	height: 22px;
	margin: 0 5px 0 0;
}

.draebat-app-banner .btn-trigger:hover{
	background: #333;
	border-color: #ccc;
}

.draebat-app-banner .xzz-li{
	font-family: monospace;
	background: white;
	color: rgb(0, 60, 0);
	padding: 1px 2px;
	font-size: 12px;
	font-weight: bold;
}

.draebat-app-banner .url{
	font-family: monospace;
	font-size: 12px;
}

.draebat-app-banner ul li{
	font-size: 14px;
}


@media only screen and (max-width: 767px){
	.draebat-app-banner{
		grid-template-areas: 'title' 'ilust'
		'text';
		grid-template-columns: auto;
		gap: 6vw 0;
		padding: 20px 20px 30px 20px;
	}
	.draebat-app-banner .title{
		text-align: center;
	}

	.draebat-app-banner .cont-ilust .cont-img{
		transform: rotateX(18deg);
	}

	.draebat-app-banner.webmarks-pro .cont-ilust .cont-img img{
		filter: drop-shadow(0px 4px 10px rgba(140, 25, 255, 0.733)) drop-shadow(0px 4px 10px rgba(34, 25, 426, 0.733));
	}

	.draebat-app-banner .banner-bg{
		left: 0;
		width: 100%;
	}

	.draebat-app-banner .text{
		text-align: center;
	}

	.draebat-app-banner ul li{
		text-align: left;
	}

	.draebat-app-banner .cont-triggers{
		margin: 0 0 20px 0;
		justify-content: center;
	}
}

/*
.dP"Y8  dP"Yb  888888 888888 Yb        dP    db    88""Yb 888888
`Ybo." dP   Yb 88__     88    Yb  db  dP    dPYb   88__dP 88__
o.`Y8b Yb   dP 88""     88     YbdPYbdP    dP__Yb  88"Yb  88""
8bodP'  YbodP  88       88      YP  YP    dP""""Yb 88  Yb 888888
*/

.presentation-item.software-development{	
	flex-flow: column;
	max-width: var(--page-content-max-width);
}

.presentation-item.software-development .service-details-trigger{
	margin: 20px 0;
	z-index: 5;
}

.presentation-item.software-development .ilust-banner{
	height: 30vh;
	width: 100%;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #222;
	margin: 0 0 20px 0;
	overflow: hidden;
	border: 1px solid #555;
	position: relative;
	animation: fadeIn 0.3s ease 0s 1 both;
}


.presentation-item.software-development .ilust-banner picture,
.presentation-item.software-development .ilust-banner img
{
	width: 100%;
  height: 100%;
  object-fit: cover;       
  object-position: center;
  display: block;
}


.presentation-item.software-development .ilust-banner img{
	filter: saturate(1.2);
}

.presentation-item.software-development .ilust-banner .shine-fx-container{
	z-index: 2;
}

.presentation-item.software-development .summary{
	display: grid;
	width: 100%;
	gap: 20px;
	grid-template-columns: auto auto auto;
	animation: fadeIn 0.3s ease 0s 1 both;
}

.presentation-item.software-development .summary .service-visible-text{
	background:  rgba(0, 0, 0, 0.6);
	border-radius: 15px;
	padding: 20px;
}

.presentation-item.software-development .title{
	font-style: italic;
	width: 100%;
	text-align: left;
}

.presentation-item.software-development .title h3{
	display: inline-block;
	font-size: 20px;
	font-weight: bold;
	z-index: 2;
	background: -webkit-linear-gradient(white 50%,  #ccc 60%, white );
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
	padding: 0 10px 0 0;
}

.presentation-item.software-development .summary .service-visible-text p{
	text-align: justify;
	text-align-last: left;
	margin: 20px 0 0 0;
}

@media only screen and (max-width: 767px){
	.presentation-item.software-development .summary{
		grid-template-columns: auto;
	}

	.presentation-item.software-development .ilust-banner{
		height: 20vh;
	}

	.presentation-item.software-development .summary .service-visible-text{
		padding: 20px 10px;
	}

	.presentation-item.software-development .title{
		display: flex;
		justify-content: center;
	}
}

/*
 dP""b8 88 88""Yb 888888 88""Yb
dP   `" 88 88__dP 88__   88__dP
Yb      88 88""Yb 88""   88"Yb
 YboodP 88 88oodP 888888 88  Yb
.dP"Y8 888888  dP""b8 88   88 88""Yb 88 888888 Yb  dP
`Ybo." 88__   dP   `" 88   88 88__dP 88   88    YbdP
o.`Y8b 88""   Yb      Y8   8P 88"Yb  88   88     8P
8bodP' 888888  YboodP `YbodP' 88  Yb 88   88    dP
*/



.presentation-item.cibersecurity{		
	max-width: var(--page-content-max-width);
	flex-flow: row;
}

.presentation-item.cibersecurity .service-details-trigger{
	margin: 20px 0;
	z-index: 5;
	animation: fadeIn 0.3s ease 0s 1 both;
}


.presentation-item.cibersecurity .cont-3d-ilust{
	display: flex;
	justify-content: center;
	height: 100%;
	flex-shrink: 0;
	width: 42%;
	margin: 0 8% 0 0;
	align-items: center;
	z-index: 3;
}

.presentation-item.cibersecurity .cont-3d-ilust .ilust{
	min-width: 330px;
	position: relative;
	width: 100%;
	max-width: clamp(200px, 40vh, 330px);
}


.presentation-item.cibersecurity .cont-3d-ilust .ilust .base-img{
	position: relative;
	width: 100%;
	border: 1px solid white;
	border-radius: 15px;
	overflow: hidden;
}

.presentation-item.cibersecurity .cont-3d-ilust .ilust .base-img img{
	position: relative;
	/* width: 100%; */
	display: block;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	filter: saturate(1.5);
}



.presentation-item.cibersecurity .cont-3d-ilust .ilust .base-img .bubble-green{
	--initial-top: 25%;	
	--last-top: -40%;
	--initial-left: 0;
	--last-left: -100%;
	position: absolute;
	top: 15%;
	left: -15%;
	width: 0;
	aspect-ratio: 1 / 1;
	background: rgba(0, 255, 145, 0.508);
	border-radius: 50%;
	transition: transform 0.6s ease-out, opacity 0.6s ease-out;
	animation: expandBubbleGreen 3s ease-in 0s infinite both;
}

@keyframes expandBubbleGreen {
	0%{
		width: 0;
		top: var(--initial-top, 15%) ;
		left: var(--initial-left, -15%);
		opacity: 1;
	}	

	100%{
		width: 300%;
		top: var(--last-top);
		left: var(--last-left);
		opacity: 0;
	}
}

@keyframes shieldShadow{

	0%{
		--initial-filter: drop-shadow(-5px 2px 10px rgb(0, 255, 123, 0));
	}
	50%{
		--initial-filter: drop-shadow(-5px 2px 10px rgb(0, 255, 123, 1));
	}
	100%{
		--initial-filter: drop-shadow(-5px 2px 10px rgb(0, 255, 123, 0));
	}
}

@keyframes threatShadow{

	0%{
		--initial-filter: drop-shadow(2px 2px 5px rgb(0, 255, 123, 0));
	}
	50%{
		--initial-filter: drop-shadow(2px 2px 5px rgb(255, 0, 144));
	}
	100%{
		--initial-filter: drop-shadow(2px 2px 5px rgb(0, 255, 123, 0));
	}
}

.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco{
	width: 170px;
	position: absolute;
	--initial-filter: drop-shadow(0 5px 8px rgba(0,0,0,0.8));
	filter: var(--initial-filter);
	--initial-scale: 0.5;
	--final-scale: 1;
	animation: fadeIn 0.2s ease 0.1s 1 both, zoomIn 0.5s ease 0.1s 1 both;
}

.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco img{
	width: 100%;
	display: block;
}

.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco.shield{
	top: 15%;
	left: -15%;	
	width: 170px;	
	--initial-filter: drop-shadow(-5px 2px 10px rgb(0, 255, 123));
	/* animation: shieldShadow 3s ease 0s infinite both; */
}

.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco:not(.shield){
	/* animation: threatShadow 3s ease 0s infinite both; */
	--initial-filter: drop-shadow(2px 2px 5px rgb(255, 0, 144));	
}

.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco.email{
	top: 30%;
	right: -26%;
	width: 120px;
}


.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco.code{
	top: -5%;
	right: -15%;
	transform: rotate(-8deg);
	/* width: 123px; */
	width: 37%;
}

.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco.virus-green{
	bottom: -10%;
	left: 0%;
	transform: rotate(45deg);
	filter: var(--initial-filter);
	width: 120px;
}

.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco.bug{
	bottom: 5%;
	right: -18%;
	width: 120px;
}


.presentation-item.cibersecurity .ilust .shine-fx-container{
	z-index: 2;
}


.presentation-item.cibersecurity .summary{
	justify-items: center;
	display: grid;
	width: 50%;
	gap: 20px;
	grid-template-columns: auto;
	animation: fadeIn 0.3s ease 0s 1 both;
}

.presentation-item.cibersecurity .summary .service-visible-text{
	background:  rgba(0, 0, 0, 0.6);
	border-radius: 15px;
	padding: 20px;
}

.presentation-item.cibersecurity .title{
	font-style: italic;
	width: 100%;
	text-align: left;
}

.presentation-item.cibersecurity .title h3{
	display: inline-block;
	font-size: 20px;
	font-weight: bold;
	z-index: 2;
	background: -webkit-linear-gradient(white 50%,  #ccc 60%, white );
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
	padding: 0 10px 0 0;
}

.presentation-item.cibersecurity .summary .service-visible-text p{
	text-align: justify;
	text-align-last: left;
	margin: 20px 0 0 0;
}

@media only screen and (max-width: 767px){
	.presentation-item.cibersecurity{
		flex-flow: column;
	}

	.presentation-item.cibersecurity .cont-3d-ilust{
		width: 100%;
		height: auto;
		margin: 0 0 30px 0;
	}

	.presentation-item.cibersecurity .cont-3d-ilust .ilust{
		max-width: unset;
		width: 80%;
		min-width: unset;
	}

	.presentation-item.cibersecurity .cont-3d-ilust .ilust .base-img {
    position: relative;
    width: 100%;
    height: 30vh;
    display: flex;
    align-items: center;
    overflow: hidden;
	}

	.presentation-item.cibersecurity .cont-3d-ilust .ilust .base-img .bubble-green{
		--initial-top: 15%;		
		--last-top: -70%;
		--initial-left: -5%;
		--last-left: -100%;
	}

	.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco.shield{
		width: 27%;
		top: 5%;
		min-width: 110px;
	}

	.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco:not(.shield){
		width: 21%;
		min-width: 90px;
	}

	.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco.email{
		top: 30%;
		right: -19%;
	}


	.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco.code{
		right: -17%;
		top: -9%;
	}

	.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco.bug{
		bottom: -15%;
		right: -5%;
	}

	.presentation-item.cibersecurity .cont-3d-ilust .ilust .deco.virus-green{
		bottom: -15%;
		left: -5%;
	}

	
	.presentation-item.cibersecurity .summary{
		width: 100%;
		justify-items: center;
	}
	

	.presentation-item.cibersecurity .summary .service-visible-text{
		padding: 20px 10px;
	}

	.presentation-item.cibersecurity .title{
		display: flex;
		justify-content: center;
	}


}

.modal.show-more[data-details=cibersecurity] ol li:nth-of-type(1) b:nth-of-type(1){
	color: rgb(255, 184, 52);
}

.modal.show-more[data-details=cibersecurity] ol li:nth-of-type(2) b:nth-of-type(1){
	color: rgb(255, 255, 71);
}

.modal.show-more[data-details=cibersecurity] ol li:nth-of-type(3) b:nth-of-type(1){
	color: rgb(121, 255, 121);
}

.modal.show-more[data-details=cibersecurity] ol li:nth-of-type(4) b:nth-of-type(1){
	color: rgb(84, 255, 255);
}

.modal.show-more[data-details=cibersecurity] ol li:nth-of-type(5) b:nth-of-type(1){
	color: rgb(78, 143, 255);
}


/*
888888 8b    d8    db    88 88
88__   88b  d88   dPYb   88 88
88""   88YbdP88  dP__Yb  88 88  .o
888888 88 YY 88 dP""""Yb 88 88ood8
*/

.presentation-item.professional-email{
	max-width: var(--page-content-max-width);
}

.presentation-item.professional-email .cont-chat-email{	
	display: flex;
	flex-flow: column;
	width: 100%;
	position: relative;
	padding: 60px 0 20px 0;
	animation: fadeIn 0.3s ease 0s 1 both;
}

.presentation-item.professional-email .cont-chat-email .cont-ilust{
	width: 80%;
	margin: 0 0 0 10%;	
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	box-shadow: 0 3px 5px rgba(0,0,0,0.4);
	border: 1px solid #8b8b8b;
	border-radius: 20px;
	background: #333;
}

.presentation-item.professional-email .cont-chat-email .cont-ilust picture,
.presentation-item.professional-email .cont-chat-email .cont-ilust img
{
	    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
		border-radius: inherit;
}

.presentation-item.professional-email .cont-chat-email .cont-ilust img{
	filter: saturate(1.2);
}


.presentation-item.professional-email .cont-chat-email .chat-bubble{
	width: calc(50% - 20px);
	padding: 20px 20px 30px 20px;
	display: flex;
	flex-flow: column;
	background: radial-gradient(circle at 100% -100%, rgb(245 224 175), rgb(117 81 43 / 83%) 300px, rgb(66 66 66 / 68%));
	border: 1px solid #7a7a7a;
	box-shadow: 0 20px 10px -10px rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(5px);
	--radius: 30px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 3px 5px rgba(0, 0, 0, 0.398);
	--initial-y: 50px;
	animation: fadeIn 0.8s ease 0.2s 1 both, toUp 1s ease 0.2s 1 both;
	position: relative;
	transition: filter 0.3s ease;
}

.presentation-item.professional-email .cont-chat-email .chat-bubble:nth-child(2){
	animation-delay: 0.2s;
}

.presentation-item.professional-email .cont-chat-email .chat-bubble:nth-of-type(3){
	animation-delay: 0.4s;
}

.presentation-item.professional-email .cont-chat-email .chat-bubble:nth-of-type(4){
	animation-delay: 0.6s;
}

.presentation-item.professional-email .cont-chat-email .chat-bubble:nth-of-type(5){
	animation-delay: 0.8s;
}

.presentation-item.professional-email .cont-chat-email .chat-bubble:nth-of-type(even){
	align-self: flex-start;	
	border-radius: var(--radius) var(--radius) var(--radius) 0;
}

.presentation-item.professional-email .cont-chat-email .chat-bubble:nth-of-type(odd){
	align-self: flex-end;
	border-radius: var(--radius) var(--radius) 10px var(--radius);
}

.presentation-item.professional-email .cont-chat-email .chat-bubble:nth-of-type(even)::after {
	content: "";
	position: absolute;
	bottom: 5px;
	left: -21px;
	width: 22px;
	height: 21px;
	background: linear-gradient(50deg, #403931, #605a52);
	clip-path: polygon(0% 100%, 100% 100%, 100% 0%);	
}

.presentation-item.professional-email .cont-chat-email .chat-bubble:nth-of-type(odd)::after {
	content: "";
	position: absolute;
	bottom: 5px;
	right: -21px;
	width: 22px;
	height: 21px;
	background: linear-gradient(315deg, #654b30, #745a3c);
	clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
	transform: rotate(90deg);
}

.presentation-item.professional-email .cont-chat-email .chat-bubble:not(:first-of-type){
	margin: -40px 0 0 0;
}

.presentation-item.professional-email .cont-chat-email .chat-bubble .title{
	margin: 0 0 10px 0;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	color: beige;	
	display: flex;
	align-items: center;
}

.presentation-item.professional-email .cont-chat-email .chat-bubble .title img{
	width: 30px;
	height: 30px;
	margin: 0 5px 0 0;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.presentation-item.professional-email .cont-chat-email .chat-bubble p{
	margin: 0;
	font-size: 15px;
	color: white;
	text-align: justify;
	text-align-last: left;
	hyphens: auto;

}



.presentation-item.professional-email .chat-bubble.custom-fx-observed-active{
	filter: drop-shadow(0 0 10px rgb(255, 166, 0));
}

.presentation-item.professional-email .chat-bubble .deco{
	display: flex;
	position: absolute;
	bottom: 10px;
	right: 10px;
	align-items: center;
}

.presentation-item.professional-email .chat-bubble .deco .checkmarks {
  display: inline-flex;
  gap: 2px; /* separación entre palomitas */
  vertical-align: middle;
}

.presentation-item.professional-email .chat-bubble .deco .check {
  width: 18px;
  height: 18px;
  color: #34B7F1; /* azul WhatsApp */
}

.presentation-item.professional-email .chat-bubble .deco .check:nth-of-type(1) {
	margin: 0 -10px 0 0;
}

.presentation-item.professional-email .chat-bubble .deco .time{
	font-size: 12px;
	color: #ccc;
	margin: 0 5px 0 0;
}

@media only screen and (max-width: 767px){
	.presentation-item.professional-email .cont-chat-email{	
		padding: 20px 0;
	}

	.presentation-item.professional-email .cont-chat-email .cont-ilust{
		width: 90%;
		margin: 0 0 0 5%;	
	}
	
	.presentation-item.professional-email .cont-chat-email .chat-bubble{
		padding: 15px 15px 25px 15px;	
		margin: 0 0 10px 0 !important;
		width: 90%;
	}

	.presentation-item.professional-email .cont-chat-email .chat-bubble .title img{
		width: 20px;
		height: 20px;
	}	

	.presentation-item.professional-email .chat-bubble .deco .check {
		width: 14px;
		height: 14px;
	}
}

/*
8b    d8    db    88 88b 88
88b  d88   dPYb   88 88Yb88
88YbdP88  dP__Yb  88 88 Y88
88 YY 88 dP""""Yb 88 88  Y8
888888 888888 88b 88    db    88b 88  dP""b8 888888
  88   88__   88Yb88   dPYb   88Yb88 dP   `" 88__
  88   88""   88 Y88  dP__Yb  88 Y88 Yb      88""
  88   888888 88  Y8 dP""""Yb 88  Y8  YboodP 888888
*/

.presentation-item.maintenance-update .cont-grid{
	width: 100%;
	max-width: var(--page-content-max-width);	
	overflow: hidden;	
	display: grid;
	--gap-w: 30px;
	--cols: 2;
	gap: 20px var(--gap-w);
	grid-template-columns: repeat(var(--cols), calc((100% / var(--cols)) - (((var(--cols) - 1) * var(--gap-w)) / var(--cols) ) ) );	
	padding: 20px;
	animation: fadeIn 0.3s ease 0s 1 both;
}

.presentation-item.maintenance-update .item{
	display: grid;
	grid-template-areas: 'ilust title' 'ilust caption';
	grid-template-columns: clamp(100px, 50%, 200px) 1fr;
	gap: 0 20px;
	padding: 20px;
	border-radius:  20px;
	position: relative;
	align-content: center;
	box-shadow: 0 3px 5px rgba(0,0,0,0.5);
}

.presentation-item.maintenance-update .item::before,
.presentation-item.maintenance-update .item::after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	transition: opacity 0.2s ease, background 0.2s ease;
	background: radial-gradient(circle at 100% -100%, var(--grad-1), var(--grad-2) 80%);	
}

.presentation-item.maintenance-update .item::before{
	opacity: 0.8;
	--grad-1: rgb(69, 69, 208);
	--grad-2: #111;	
}

.presentation-item.maintenance-update .item::after{
	--grad-1: rgb(12 208 148);
	--grad-2: #272b57;
	opacity: 0;
}


.presentation-item.maintenance-update .item:hover::after{
	opacity: 1;
}

.presentation-item.maintenance-update .item .ilust{
	aspect-ratio: 1 / 1;
	grid-area: ilust;
	border-radius: inherit;
	background: #333;
	position: relative;
	z-index: 5;
	border: 2px solid #ccc;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}

.presentation-item.maintenance-update .item .ilust .shine-fx-container{
	z-index: 5;
}

.presentation-item.maintenance-update .item .ilust picture,
.presentation-item.maintenance-update .item .ilust img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

.presentation-item.maintenance-update .item .ilust img{
	filter: saturate(1.25);
}

.presentation-item.maintenance-update .item .title{
	grid-area: title;
	font-weight: bold;
	font-size: 20px;
	font-style: italic;
	position: relative;
	z-index: 5;
}

.presentation-item.maintenance-update .item .caption{
	grid-area: 'caption';
	position: relative;
	z-index: 5;
}

.presentation-item.maintenance-update .item .caption p{
	margin: 20px 0 0 0;
	text-align: justify;
	text-align-last: left;
	hyphens: auto;
}

@media only screen and (max-width: 1023px){
	.presentation-item.maintenance-update .item{
		grid-template-areas: 'title' 'ilust' 'caption';
		grid-template-columns: auto;
		grid-template-rows: auto auto auto;
		gap: 0;
	}	

	.presentation-item.maintenance-update .item .ilust{
		margin: 20px 0 0 0;
		aspect-ratio: 1 / 0.5;
	}
	
}

@media only screen and (max-width: 600px){

	.presentation-item.maintenance-update .cont-grid{
		grid-template-columns: auto;	
		gap: 20px 0;
	}

	.presentation-item.maintenance-update .item{
		justify-items: center;
		text-align: center;
		padding: 15px;
	}

	.presentation-item.maintenance-update .item .ilust{
		width: clamp(100px, 80%, 300px);
	}

	.presentation-item.maintenance-update .item .title{
		font-style: normal;
	}

	.presentation-item.maintenance-update .item .caption p{
		justify-items: center;
		text-align: center;
		text-align-last: center ;
		hyphens: none;
	}
	
}


/*
888888 88""Yb    db    88 88b 88 88 88b 88  dP""b8
  88   88__dP   dPYb   88 88Yb88 88 88Yb88 dP   `"
  88   88"Yb   dP__Yb  88 88 Y88 88 88 Y88 Yb  "88
  88   88  Yb dP""""Yb 88 88  Y8 88 88  Y8  YboodP
*/

.presentation-item.training{	
	flex-flow: column;
}

.presentation-item.training .instructions{
	margin: 0 0 clamp(10px,1vh, 30px) 0;
}

.presentation-item.training .training-wrapper{
	display: flex;
	width: calc(100% + 20px);
	mask-image: linear-gradient(to right,  rgba(0,0,0,0.8), rgba(0,0,0,1) 30px, rgba(0,0,0,1) calc(100% - 30px), rgba(0,0,0,0.8));
	padding: 0 20px;
	/* border: 1px solid lime; */
}

.presentation-item.training .cont-training-options{	
	width: 100%;
	display: flex;
	animation: fadeIn 0.3s ease 0s 1 both;
	transition: transform 0.2s ease;
	/* border: 2px solid magenta; */
	padding: 40px 0;

	--translateX: 0;
	--padding-h: 40px;
	--margin-r: 10px;
	
	
	--fix: calc(20px * var(--translateX));
	transform: translateX( calc( (var(--translateX) * var(--dyn-width) ) + var(--fix)  ) );
}

@media only screen and (max-width: 499px){
	.presentation-item.training .cont-training-options{
		--dyn-width: calc((80% / var(--cols)) - 20px);
		--cols: 1;
	}
}

@media only screen and (min-width: 500px){
	.presentation-item.training .cont-training-options{
		--dyn-width: calc((100% / var(--cols)) - 20px);
		--cols: 2;
	}
}

@media only screen and (min-width: 670px){
	.presentation-item.training .cont-training-options{
		--cols: 3;
	}
}

@media only screen and (min-width: 1024px){
	.presentation-item.training .cont-training-options{
		--cols: 4;
	}
}

@media only screen and (min-width: 1200px){
	.presentation-item.training .cont-training-options{
		--cols: 5;
	}
}

@media only screen and (min-width: 1500px){
	.presentation-item.training .cont-training-options{
		--cols: 6;
	}
}

@media only screen and (min-width: 1800px){
	.presentation-item.training .cont-training-options{
		--cols: 7;
	}
}

.presentation-item.training .cont-training-options .training-option{	
	width: var(--dyn-width);	
	display: grid;	
	padding: 20px;
	background: #111;
	grid-template-columns: auto;
	gap: 20px;
	border-radius: 20px;
	justify-items: center;
	overflow: hidden;
	position: relative;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
	flex-shrink: 0;
	margin: var(--margin-r);
	grid-template-areas: 'title' 'ilust' 'text' 'details';
	grid-template-rows: 50px auto auto auto;
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.presentation-item.training .cont-training-options .training-option .bg{
	position: absolute;
	top: -5%;
	left: -5%;
	width: 110%;
	height: 65%;
	background: var(--bg);
	background-size: cover;
	background-position: center;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1 ), rgba(0,0,0,0));
	opacity: 0.5;
	filter: blur(5px);
	--initial-opacity: 0;
	--final-opacity: 0.6;
}

.presentation-item.training .cont-training-options .training-option .ilust{
	width: 100%;
	border-radius: inherit;
	border: 2px solid #777777;
	aspect-ratio: 1 / 0.6;
	overflow: hidden;
	grid-area: ilust;
}

.presentation-item.training .cont-training-options .training-option .ilust .shine-fx-container{
	z-index: 5;
}

.presentation-item.training .cont-training-options .training-option .ilust picture,
.presentation-item.training .cont-training-options .training-option .ilust img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;	
}

.presentation-item.training .cont-training-options .training-option .title{
	text-align: center;
	font-weight: bold;
	font-size: 17px;
	grid-area: title;
	font-style: italic;
	text-shadow: 0 0 6px rgba(0, 0, 0, 1);
}

.presentation-item.training .cont-training-options .training-option .text{
	grid-area: text;
}

.presentation-item.training .cont-training-options .training-option .text p{
	/* text-align: justify; */
	text-align: center;
	hyphens: auto;
	margin: 0;
	font-size: 15px;
}

.presentation-item.training .cont-training-options .training-option .details{
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	grid-area: details;
}

.presentation-item.training .cont-training-options .training-option .details .duration{
	display: flex;
	align-items: center;
	padding: 2px 6px;
	background: #222;
	border-radius: 40px;
}

.presentation-item.training .cont-training-options .training-option .details svg{
	width: 16px;
	height: 16px;
	margin: 0 5px 0 0;
}

.presentation-item.training .cont-training-options .training-option .details .btn-trigger{
	background: linear-gradient(179deg, #333, #0048ff);
	text-align: center;
	padding: 3px 10px;
	cursor: pointer;
	border-radius: 20px;
}

.section.portfolio .presentation-item.training{
	--portfolio-arrows-pos: 20px;
}


.section.portfolio .presentation-item.training .carousel-nav.left{
  left: var(--portfolio-arrows-pos);
}

.section.portfolio .presentation-item.training .carousel-nav.right{
  right: var(--portfolio-arrows-pos);
}

.section.portfolio .presentation-item.training .carousel-nav{
	--arrow-width: 30px;
	filter: drop-shadow(0 0px 5px rgba(0,0,0,0.8));
}

.section.portfolio .presentation-item.training .carousel-nav::after{
	--border-width: 7px;
}

@media (pointer: fine){
	.presentation-item.training .cont-training-options .training-option:hover{
		transform: translateY(-10px);
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4), 0 10px 30px 5px rgb(255, 164, 18);
	}

	.section.portfolio .presentation-item.training .carousel-nav:hover{
		filter: drop-shadow(0px 0px 10px var(--shadow));
		--shadow: rgb(3, 246, 119);
	}

}

/*
      :::::::: ::::::::::: ::::::::  :::::::::  ::::::::::
    :+:    :+:    :+:    :+:    :+: :+:    :+: :+:
   +:+           +:+    +:+    +:+ +:+    +:+ +:+
  +#++:++#++    +#+    +#+    +:+ +#++:++#:  +#++:++#
        +#+    +#+    +#+    +#+ +#+    +#+ +#+
#+#    #+#    #+#    #+#    #+# #+#    #+# #+#
########     ###     ########  ###    ### ##########
*/


.cont-store-preview{
	width: 100%;
	max-width: var(--page-content-max-width);
	justify-content: center;
}

.store-grid{
	width: 100%;
	display: grid;
	gap: 30px;
	--gap-w: 30px;
	--cols: 4;
	grid-template-columns: repeat(var(--cols), calc((100% / var(--cols)) - (((var(--cols) - 1) * var(--gap-w)) / var(--cols) ) ) );	
	margin: 1vh 0 0 0;
	overflow-x: auto;
	padding: 30px 20px;
	mask-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0.5));
	animation: fadeIn 0.2s ease 0.1s 1 both;
}

@media only screen and (max-width: 399px){
	.store-grid{
		gap: 20px;
		--gap-w: 20px;
		grid-template-columns: repeat(4, calc(55vw - 10px));
	}
}

@media only screen and (min-width: 400px){
	.store-grid{
		gap: 20px;
		--gap-w: 20px;		
		grid-template-columns: repeat(4, calc(40vw - 30px));
	}
}

@media only screen and (min-width: 650px){
	.store-grid{
		gap: 30px;
		--gap-w: 30px;
		/* grid-template-columns: repeat(4, calc(30vw - 30px)); */
		/* grid-template-columns: repeat(4, clamp(120px, calc(30vw - 30px), 24vh)); */
		grid-template-columns: repeat(auto-fill, calc(30vw - 30px));
		justify-content: center;
		justify-items: center;
	}
}

@media only screen and (max-width: 1023px){
	.store-grid{
		width: calc(100% + 20px);
		margin-left: -10px;
	}
}

@media only screen and (min-width: 1024px){
	.store-grid{		
		grid-template-columns: repeat(var(--cols), calc((100% / var(--cols)) - (((var(--cols) - 1) * var(--gap-w)) / var(--cols) ) ) );
		justify-content: unset;
		justify-items: unset;
	}
}

.store-grid .item{		
	
	/* background: radial-gradient(circle at 100% 100%, #3765ff, #1c1c1c); */
	
	background: #222;
	background: url(../img/ilust/services/draebat-store-preview/productos/350px/draebat-systems-products-grid-bg.webp);
	background-size: cover!important;
	background-position: center!important;
	display: flex;
	border-radius: 15px;
	box-shadow: 0 9px 17px -3px rgb(0 0 0 / 63%);
	cursor: pointer;
	justify-content: center;
	aspect-ratio: 1 / 0.9;	
	max-height: 24vh;
	min-height: 120px;
}

@media only screen and (max-width: 600px) and (-webkit-max-device-pixel-ratio: 2),
only screen and (max-width: 600px) and (max-resolution: 287dpi) {
	.store-grid .item{
		background: url(../img/ilust/services/draebat-store-preview/productos/350px/draebat-systems-products-grid-bg.webp);
	}
}

@media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2.01),
only screen and (max-width: 600px) and (min-resolution: 288dpi),  only screen and (min-width: 1024px) {
	.store-grid .item{
		background: url(../img/ilust/services/draebat-store-preview/productos/650px/draebat-systems-products-grid-bg.webp);
	}

}


.store-grid .item::before{		
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	opacity: 0;
	/* background: radial-gradient(circle at 100% 100%, #e9e9e9,  rgb(94, 94, 94)); */
	background: radial-gradient(circle at 100% 100%, #d3ff00, rgb(62 62 62));
	transition: opacity 0.2s ease;
	mix-blend-mode: luminosity;
}

.store-grid .item:hover:before{
	opacity: 1;
}

.store-grid .item .ilust{
	height: 120px;
	width: 100%;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
}

.store-grid .item .ilust picture
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.store-grid .item .ilust picture img
{
	position: absolute;
	top: 25%;
	right: -20%;
	width: 100%;
	filter: drop-shadow(7px 22px 27px black);
}


.store-grid .item[data-item=Monitores] .ilust picture img,
.store-grid .item[data-item=Laptops] .ilust picture img
{	
	top: 12%;
	width: 110%;
}

.store-grid .item .text{
	position: absolute;
	top: 20px;
	left: 20px;
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
	background: -webkit-linear-gradient(white 50%,  #ccc 60%, white );
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding: 0 10px 0 0;

	filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.5));
}


/*
      :::::::::  :::::::::  ::::::::::: ::::::::  :::::::::: ::::::::
     :+:    :+: :+:    :+:     :+:    :+:    :+: :+:       :+:    :+:
    +:+    +:+ +:+    +:+     +:+    +:+        +:+       +:+
   +#++:++#+  +#++:++#:      +#+    +#+        +#++:++#  +#++:++#++
  +#+        +#+    +#+     +#+    +#+        +#+              +#+
 #+#        #+#    #+#     #+#    #+#    #+# #+#       #+#    #+#
###        ###    ### ########### ########  ########## ########
*/

/*
.section:not(.prices){
	display: none;
}

.blue-background{
	filter: blur(20px)!important;
} */


.section.prices .section-content{
	width: 100%;
	max-width: 1050px;
	display: flex;
	flex-flow: column;
	align-items: center;
}

.section.prices h2{
	font-size: 32px;
	background: -webkit-linear-gradient(white 50%,  #ccc 60%, white );
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); */
	margin: 0;
}

.section.prices .cont-tables{
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	background: rgba(0,0,0,0.4);
}

.section.prices table{
	width: 100%;
	border-collapse: collapse;
}

.section.prices table.presentation-item.focus{
	--display-type: table!important;
}

.section.prices table, th, td{
	border: 1px solid #666;
}

.section.prices thead{
	backdrop-filter: blur(5px);
	background: rgba(0, 0, 0, 0.5);
}

.section.prices th, td{
	padding: 7px 10px;
}

.section.prices th{
	font-weight: 100;
	min-width: 220px;
	width: 220px;
}

.section.prices table.apps th{
	min-width: 250px;
	width: 250px;
}

.section.prices table th:first-child{
	min-width: 150px;
	width: 150px;
}

.section.prices span{
	display: block;
}

.section.prices th .title,
.section.prices th .price
{
	font-weight: bold;
}

.section.prices th .desde

{
	font-size: 12px;
	font-style: italic;
	margin: 5px 0 0 0;
}

.section.prices th .mensual{
	margin: 0 0 5px 0;
	font-size: 12px;
}

.section.prices th .price{
	font-size: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.section.prices th .price span{
	display: inline-block;
	font-size: 14px;
	font-weight: 100;
}


.section.prices table:not(.email) tbody tr:not(:first-child) td:not(:first-child),
.section.prices table.email tbody td:not(:first-child)
{
	text-align: center;
}

.section.prices table:not(.email) tr:first-child td:not(:first-child){
	text-align: justify;
	text-align-last: left;
	font-size: 14px;
}


.section.prices td:first-child{
	backdrop-filter: blur(5px);
	background: rgba(0, 0, 0, 0.5);
	position: sticky;
	left: 0;
	z-index: 5;
}

@media only screen and (max-width: 450px){
	.section.prices table th:not(:first-child){
		min-width: calc(100vw - 160px);
		width: calc(100vw - 160px);
	}

	.section.prices td:first-child{
		font-size: 14px;
	}

	.section.prices table th:first-child{
		width: 120px;
		min-width: 120px;
	}
}

.section.prices td .check-true{
	border-width: 0 3px 3px 0;
	border-color: transparent #f8d982 #f8d982 transparent;
	border-style: solid;
	width: 8px;
	height: 15px;
	transform: rotate(45deg);
	display: inline-block;
}

.section td .check-false{
	font-size: 32px;
	display: inline-block;
	line-height: 0.5;
	color: orangered;
}

.section.prices .cont-presentation-titless:not(.focus),
.section.prices table:not(.focus)
{
	display: none;
}


.free-plan{
	width: 100%;
	padding: 20px 20px 10px 10px;
	/* background: rgba(0,0,0,0.4); */
	margin: 80px 0 0 0;
	/* border: 1px solid rgb(62, 62, 62); */
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.free-plan::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.free-plan::before{
	background: radial-gradient(circle at 50% 0% , rgba(0,0,0,0.2), rgba(0,0,0,0.8));
	clip-path: var(--form-f);
	transform: rotateY(180deg);
}

.free-plan .ilust{
	margin: 0 20px 0 0;
	width: 50%;
	max-width: 300px;
	flex-shrink: 0;
}

.free-plan .ilust img{
	width: 100%;
	margin: -50px 0 0 0;
}

.free-plan p span{
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 10px 0;
	display: inline-block;
}
.free-plan p{
	margin: 0
}

@media only screen and (max-width: 850px){
	.free-plan{
		flex-flow: column;
	}

	.free-plan p{
		max-width: 600px;
		text-align: center;
	}

	.free-plan p span{
		width: 100%;
		margin: 20px 0 10px 0;
	}

	.free-plan .ilust{
		width: 90%;
	}
}


@media only screen and (max-width: 950px){

}

@media only screen and (max-width: 650px){

	.free-plan {
		margin-top: 18%;
	}

}



/*
      :::::::::  :::::::::  :::::::::: ::::::::  :::::::::: ::::    :::
     :+:    :+: :+:    :+: :+:       :+:    :+: :+:        :+:+:   :+:
    +:+    +:+ +:+    +:+ +:+       +:+        +:+        :+:+:+  +:+
   +#++:++#+  +#++:++#:  +#++:++#  +#++:++#++ +#++:++#   +#+ +:+ +#+
  +#+        +#+    +#+ +#+              +#+ +#+        +#+  +#+#+#
 #+#        #+#    #+# #+#       #+#    #+# #+#        #+#   #+#+#
###        ###    ### ########## ########  ########## ###    ####
  ::::::::::: ::: ::::::::::: ::::::::::: ::::::::  ::::    :::
     :+:   :+: :+:   :+:         :+:    :+:    :+: :+:+:   :+:
    +:+  +:+   +:+  +:+         +:+    +:+    +:+ :+:+:+  +:+
   +#+ +#++:++#++: +#+         +#+    +#+    +:+ +#+ +:+ +#+
  +#+ +#+     +#+ +#+         +#+    +#+    +#+ +#+  +#+#+#
 #+# #+#     #+# #+#         #+#    #+#    #+# #+#   #+#+#
### ###     ### ###     ########### ########  ###    ####
*/

.cont-presentation{
	width: 100%;
	/* max-width: 1050px; */
	display: flex;
	flex-flow: column;
	align-items: center;
	min-height: 100%;
}

.presentation-nav{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px 0 4vh 0;
}

.presentation-nav .cont-presentation-titles{
	width: 100%;
	max-width: 200px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	border-radius: 10px;
	color: #ececec;	

	border: 1px solid rgb(144 217 255);
	background: rgb(37 62 145 / 68%);
	box-shadow: 0 0 5px #0098ff;

}

.presentation-nav .presentation-title{
	width: 100%;
	font-size: 17px;
	text-align: center;
	padding: 10px 0;
	flex-shrink: 0;
	display: none;
	justify-content: center;
	align-items: center;
	animation: fadeIn 0.3s ease 0s 1 both;
}

.presentation-nav .presentation-title.focus{
	display: flex;
}

.presentation-nav .nav{
	width: 18px;
	height: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	border-radius: 6px;
	cursor: pointer;
	margin: 0px 4px 0 4px;
	padding: 1px 0 0 1px;
	line-height: 1;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	background-image: linear-gradient(to bottom, #686868, #272727);
	--fill: #ffffff;
}

.presentation-nav .nav:hover{
	background-image: linear-gradient(to bottom, #939393, #424242);
}

.presentation-nav .nav:active{
	background-image: linear-gradient(to bottom, #ffc402, #a46d00);
	--fill: black;
}

.presentation-nav .nav svg{
	width: 16px;
	height: 16px;
}

.presentation-item{
	width: 100%;
	flex-flow: column;
	align-items: center;
	display: none;
	min-height: calc(100% - 115px);
	justify-content: center;
}

.presentation-item.focus{
	--display-type: flex;
	display: var(--display-type);
}

/*
      ::::::::  :::    :::  ::::::::  :::       :::
    :+:    :+: :+:    :+: :+:    :+: :+:       :+:
   +:+        +:+    +:+ +:+    +:+ +:+       +:+
  +#++:++#++ +#++:++#++ +#+    +:+ +#+  +:+  +#+
        +#+ +#+    +#+ +#+    +#+ +#+ +#+#+ +#+
#+#    #+# #+#    #+# #+#    #+#  #+#+# #+#+#
########  ###    ###  ########    ###   ###
        :::   :::    ::::::::  :::::::::  ::::::::::
      :+:+: :+:+:  :+:    :+: :+:    :+: :+:
    +:+ +:+:+ +:+ +:+    +:+ +:+    +:+ +:+
   +#+  +:+  +#+ +#+    +:+ +#++:++#:  +#++:++#
  +#+       +#+ +#+    +#+ +#+    +#+ +#+
 #+#       #+# #+#    #+# #+#    #+# #+#
###       ###  ########  ###    ### ##########
*/

.details-content{
	display: none;
}

.modal.show-more{
	--modal-padding: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: var(--modal-padding);
	justify-content: center;
	align-items: center;
	display: none;
	z-index: 40;
	background: rgba(0, 0, 0, 0.6);
	background: linear-gradient(to top, rgb(101, 0, 178), rgba(93, 0, 255, 0.155));
	animation: fadeIn 0.4s ease 0s 1 both;
}

.modal.show-more .content{
	border-radius: 30px;
	max-width: 800px;
	max-height: 90%;
	border: 1px solid #555;
	background: linear-gradient(to bottom, #555, #161a2f);
	display: flex;
	flex-flow: column;
	position: relative;
	animation: fadeIn 0.4s ease 0.1s 1 both, toUp 0.8s ease 0.1s 1 both;
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5);
}


.modal.show-more .btn-close{
	font-size: 30px;
	border-radius: 20px;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-family: monospace;
	font-style: normal;
	background: #222;
	position: absolute;
	top: 10px;
	right: 10px;
	animation: fadeIn 0.2s ease 1s 1 both;
	z-index: 41;
}

@media (pointer: fine){
	.modal.show-more .btn-close{
		top: 10px;
		right: 15px;
	}
}

.modal.show-more .ilust-banner{
	overflow: hidden;
	min-height: 200px;
	height: 25vh;
	max-height: 350px;
	border-radius: var(--border-radius);
	width: 100%;	
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	margin: 10px 0 10px 0;
	border: 1px solid #c0c0c0;
}

.modal.show-more .ilust-banner picture,
.modal.show-more .ilust-banner img
{
	width: 100%;
  height: 100%;
  object-fit: cover;       
  object-position: center;
  display: block;
}

.modal.show-more .ilust-banner .shine-fx-container {
	z-index: 41;
}

.modal.show-more .ilust-banner .grad{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 40;
}

.modal.show-more .ilust-banner .title{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 41;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.modal.show-more .title h2{
	color: white;
	text-align: center;
	position: relative;
	text-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 0 10px rgba(255, 255, 255, 0.83);
	z-index: 43;	
	font-size: 25px;
}

.modal.show-more .modal-content-wrapper{
	width: 100%;
	height: 100%;
	overflow-y: auto;
	padding: 20px;
	animation: fadeIn 0.6s ease 0.7s 1 both;
	--mask-size: 40px;
	mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 1) var(--mask-size), rgba(0, 0, 0, 1) calc(100% - var(--mask-size)), transparent);
	position: relative;
}


.modal.show-more .content .modal-content-wrapper::-webkit-scrollbar-track{
	border-radius: 5px;
	margin: 30px 0;
}

.modal.show-more .content .modal-content-wrapper::-webkit-scrollbar-thumb{
	border-radius: 5px;
	background: #444;
}

.modal.show-more .content .modal-content-wrapper::-webkit-scrollbar-thumb:hover {
	background: #555;
}

@media only screen and (max-width: 600px){
	.modal.show-more{
		--modal-padding: 10px;
	}

	.modal.show-more .content{
		animation-duration: 1s;
		border-radius: 20px;
	}
	.modal.show-more .modal-content-wrapper{
		animation-delay: 1s;
	}
	.modal.show-more .ilust-banner{
		border-radius: 20px;
	}
}


.modal.show-more .cont-details{
	width: 100%;
}

.modal.show-more .cont-details h3{
	color: white;
	position: sticky;
	top: 10px;
	backdrop-filter: blur(10px);
	padding: 5px;
	/* background: rgb(25 28 125 / 71%); */
	background: linear-gradient(to right, rgb(25 28 125 / 100%) 230px, transparent);
	border-radius: 9px;
	z-index: 46;
}

.modal.show-more h4{
	color: white;
	font-style: italic;
}

.modal.show-more .caption{
	display: block;
	font-size: 14px;
	opacity: 0.8;
	font-style: italic;
}

.modal.show-more ul,
.modal.show-more ol
{
	padding: 0 0 0 25px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.modal.show-more ul ul,
.modal.show-more ol ol
{
	padding: 0 0 0 15px;
}

.modal.show-more li{
	margin: 0 0 5px 0;
}


.modal.show-more p,
.modal.show-more li
{
	text-align: justify;
	text-align-last: left;
	hyphens: auto;
}


.modal.show-more .cont-ilust
{
	--border-radius: 20px;
	margin: 10px 0 10px 15px;
	float: right;
	width: 40%;
	max-width: 300px;	
}

.modal.show-more .cont-ilust .cont-img.shine-item .shine-fx-container
{
	z-index: 45;
	border-radius: var(--border-radius);
}

.modal.show-more .cont-ilust picture,
.modal.show-more .cont-ilust img
{
	display: block;
	background: #222;
	border-radius: var(--border-radius);
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border: 1px solid #999999;
	border-radius: var(--border-radius);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);	
	filter: saturate(1.3);
}

.modal.show-more sup{
	color: yellow;
}

.modal.show-more sup::before{
	content: "(";
}

.modal.show-more sup::after{
	content: ")";
}

.modal.show-more .special-caption{
	font-size: 14px;
	font-style: italic;
	text-align: right;
	margin: 10px 0;
	color: yellow;
}

@media only screen and (max-width: 600px){
	.modal.show-more .cont-ilust{
		display: flex;
		margin: 15px 0 0 0;
		justify-content: center;
		max-width: unset;
		float: none;
		width: 100%;		
		aspect-ratio: 1 / 0.6;
	}

	.modal.show-more .cont-ilust .cont-img
	{
		width: 90%;
	}
}






/*
      ::::::::  :::    :::     ::: :::::::::::
    :+:    :+: :+:    :+:   :+: :+:   :+:
   +:+        +:+    +:+  +:+   +:+  +:+
  +#+        +#++:++#++ +#++:++#++: +#+
 +#+        +#+    +#+ +#+     +#+ +#+
#+#    #+# #+#    #+# #+#     #+# #+#
########  ###    ### ###     ### ###
*/

/* .section:not(.contact-banner, .prices){
	display: none;
} */


.section.prices{
	margin-bottom: 60px;
}

:root{
	--terminal-color: white;
  --terminal-color-transparent: rgba(255, 255, 255, 0.349);
}


.section.contact{
	min-height: unset;
	margin: 50px 0 -56px 0;
}

.section.contact .section-content{
	width: 100%;
	max-width: var(--page-content-max-width);
	min-height: 200px;
	background: orange;
	/* background: url(https://img.freepik.com/free-photo/view-people-addicted-their-smartphone-looking-scrolling-through-screens_23-2151487302.jpg); */
	background: url(https://img.freepik.com/free-photo/colleagues-working-together-call-center-office_23-2149256083.jpg);
	background-position: 0% 50%!important;
	background-repeat: no-repeat!important;
	border-radius: 20px;
	justify-content: flex-start;
	align-items: center;
	padding: 20px;
	background-size: cover!important;
	min-height: 350px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 415px){
	.section.contact .section-content{
		background: url(https://img.freepik.com/free-photo/woman-with-headphones-working-call-center-office_23-2149256156.jpg);
		background-position: 41% 50%!important;
	}
}

.section.contact .section-content .caption{
	width: calc(100% - 150px);
	display: flex;
	flex-flow: column;
	justify-content: center;
	max-width: 537px;
	height: 100%;
}

@media only screen and (max-width: 1024px){
	.section.contact .section-content{
		padding: 20px 10px;
	}
	.section.contact .section-content .caption{
		width: calc(100% - 120px);
	}
}

.section.contact .section-content .caption p{
	display: inline-block;
	padding: 10px 7px;
	border-radius: 10px;
	color: white;
	margin: 0 0 10px 0;
	hyphens: auto;
}

.section.contact .section-content .caption .s1{
	font-size: clamp(35px, 4vw, 40px);
	color: rgb(238 255 0);
	margin: 0 0 20px 0;
	font-weight: bold;
	font-style: italic;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.897), 0 -2px 8px white;
	line-height: 1;
}

.section.contact .section-content .caption .s2{
	background: rgb(0 0 0 / 58%);
	backdrop-filter: blur(15px);
	text-shadow: 0 0px 9px rgba(0, 0, 0, 0.897);
}

@media only screen and (max-width: 350px){
	.section.contact .section-content .caption {
		width: calc(100% - 60px);
	}

	.section.contact .section-content .caption .s1{
		font-size: clamp(30px, 4vw, 40px);
	}
}

.section.contact .section-content .caption .no-break{
	white-space: nowrap;
}

.section.contact .section-content .caption .phone-number{
	font-weight: bold;
	font-family: monospace;
}

.section.contact{
	--social-icon-size: 30px;
	--social-icon-size-svg: 20px;
}


.cont-chat-trigger{
	width: 100%;
	flex-shrink: 0;
	position: sticky;
	height: 0;
	display: flex;
	justify-content: center;
	z-index: 15;
	bottom: 0;
}

.cont-chat-trigger .wrapper{
	width: 100%;
	max-width: var(--page-content-max-width);
	display: flex;
	justify-content: flex-end;
	position: relative;
}

.chat-trigger {
	position: absolute;
	right: 15px;
	bottom: 20px;
	text-decoration: none;
	animation: fadeIn 0.3s ease 0.5s 1 both;
	transform: scale(1);	
	transition: transform 0.2s ease;
}

.chat-trigger:active{
	transform: scale(0.9);
}

@media only screen and (max-width: 1023px){
	.chat-trigger:active{
		transform: scale(0.95);
		transition: transform 0.1s ease;
	}
}

.chat-trigger .bubble{
	/* position: absolute; */
	/* right: 15px;
	bottom: 20px; */
	position: relative;
	background: linear-gradient(to top, #ccc, white);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	/* box-shadow: 0px 8px 10px -3px rgba(0, 0, 0, 0.66); */
	filter: drop-shadow( 0px 8px 10px rgba(0, 0, 0, 0.66));
	cursor: pointer;
	padding: 5px 10px;
	transition: background 0.1s ease;
	color: black;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid #9a9a9a;
	line-height: 1;
	padding: 6px 10px 4px 10px;
	z-index: 8;
}


.chat-trigger .deco{
	/* content: ""; */
	border-style: solid;
	border-color: white transparent transparent transparent;
	border-width: 13px 6px 0px 6px;
	position: absolute;
	right: -5px;
	bottom: -2px;
	transform: rotate(-58deg);
	z-index: 7;
}

.chat-trigger svg{
	width: 20px;
	height: 20px;
	fill: black;
	transform: rotateY(180deg);
}


@media only screen and (min-width: 1024px){
	.chat-trigger{
		font-size: 22px;
	}

	.chat-trigger svg{
		width: 28px;
		height: 28px;
	}
}

.chat-trigger span{
	margin: 0 0 0 5px;
}

@media (pointer: fine){
	.chat-trigger{
		right: 35px;
		/* bottom: 20px; */
		bottom: 40px;
	}
}

.chat-trigger:hover .bubble{
	background: linear-gradient(to top, #f88c25, #fcf568);
	/* border-color: #ffaa00; */
	border-color: #ff8300;
}

.chat-trigger:hover .deco{
	border-color: #ff9743 transparent transparent transparent;
}

/* CHAT MODAL //////////////////////////////////////////// */

.modal-contact{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: linear-gradient(to top, #a28b01, #0c0d234d); */	
	background: linear-gradient(to top, #b16800, #8b821047);
	z-index: 40;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
	animation: fadeIn 0.4s ease 0s 1 both;
	--social-icon-size: 30px;
	--social-icon-size-svg: 20px;
}


.modal-wrapper{
	padding: 20px 10px;
	max-height: 100%;
	overflow-y: auto;
	width: 100%;
	display: flex;
	justify-content: center;
	animation: fadeIn 0.4s ease 0.1s 1 both, toUp 0.8s ease 0.1s 1 both;
}


.modal-contact .content{
	width: 100%;
	max-width: 450px;
	/* background: radial-gradient(circle at 50% -30%, rgb(105 98 79), rgb(36 30 15)); */
	background: linear-gradient(to bottom, #555, #222);
	--border-color: #7d7d7d;
	border: 1px solid var(--border-color);
	border-radius: 20px;
	padding: 0 0 20px 0;
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5);
	height: fit-content;
	overflow: hidden;
}

.modal-contact .instructions{
	font-size: 15px;
	text-align: center;
	padding: 0 20px;
	margin: 20px 0 10px 0;
}

.modal-contact .social{
	justify-content: center;
	padding: 10px;
	margin: 0 0 10px 0;
}



.modal-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px;
	margin: 0 0 10px 0;
	background: #222;
	font-style: italic;
}

.modal-title h3{
	margin: 0 0 0 0;
	font-size: 22px;
	background: -webkit-linear-gradient(white 50%,  #ccc 60%, white );
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.modal-contact .btn-close{
	font-size: 30px;
	border-radius: 20px;
	width: 30px;
	height: 30px;
	/* line-height: 1; */
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #ccc;
	cursor: pointer;
	font-family: monospace;
	font-style: normal;
}

.modal-contact .btn-close:hover{
	background: #444;
	border-color: orange;
	color: orange;
}

.modal-contact .content form{
	width: 100%;
	display: flex;
	flex-flow: column;
	padding: 0 20px;
}




.modal-contact .content form .cont-input{
	display: flex;
	flex-flow: column;
	--border: 1px solid var(--border-color, #ccc);
}

input,
textarea,
select,
form .select-plugin
{
	background: #222;
	--border-radius: 7px;
	border-radius: var(--border-radius);	
	border: var(--border);
	padding: 5px 7px;
	font-family: monospace;
	font-size: 14px;
	color: white;
	outline: none;
	cursor: pointer;
}

input:hover,
textarea:hover,
select:hover,
form .select-plugin:hover
{
	background: #333;
}

input:focus,
textarea:focus,
select:focus,
.select-plugin:focus
{
	background: #333;
	border-color: orange;
}

input,
textarea
{
	appearance: none;
}

textarea{
	resize: none;
}

form .select-plugin{
	position: relative;
}

form .select-plugin .selected-op{
	padding: 0 20px 0 0 ;
}

form .select-plugin .deco{
	position: absolute;
	top: 0;
	right: 0;
	background: linear-gradient(to bottom, #444, #111);
	border-radius: 0 var(--border-radius) var(--border-radius) 0;	
	height: 100%;
	width: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

form .select-plugin .deco::after{
	content: "";	
	border-style: solid;
	border-color: white transparent transparent transparent;
	border-width: 5px 3px 0 3px;
}


form .select-plugin:hover .deco{
	background: linear-gradient(to bottom, #666, #333);
}


form .select-plugin .dropdown,
.dropdown-responsive .dropdown
{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: fit-content;
	max-height: 200px;
	background: #444;
	border: 1px solid #aaa;
	border-radius: inherit;
	box-shadow: 0 5px 10px -3px rgba(0,0,0,0.8);
	overflow-y: auto;
	z-index: 45;	
}

.dropdown-responsive .dropdown{
	border-radius: 7px;
}

form .select-plugin .dropdown.active,
.dropdown-responsive .dropdown.active
{
	display: block;
}

form .select-plugin .dropdown .group-label,
.dropdown-responsive .dropdown .group-label
{
	display: block;
	padding: 5px 7px;
}

form .select-plugin .dropdown .group-label.hide,
.dropdown-responsive .dropdown .group-label.hide
{
	display: none;
}

form .select-plugin .dropdown .group-label.active,
.dropdown-responsive .dropdown .group-label.active
{
	display: block;
	position: sticky;
	top: 0;
	background: #222;
	z-index: 48;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.7);
	pointer-events: none;

}

/* form .select-plugin .dropdown .group-label.active::after,
.dropdown-responsive .dropdown .group-label.active::after */
form .select-plugin .dropdown .group-label::after,
.dropdown-responsive .dropdown .group-label::after
{
	content: " → ";	
}

form .select-plugin .dropdown .optgroup,
.dropdown-responsive .dropdown .optgroup
{
	display: none;
	width: 100%;
	animation: fadeIn 0.2s ease 0s 1 both;
}

form .select-plugin .dropdown.active,
.dropdown-responsive .dropdown.active
{
	display: block;
}

form .select-plugin .dropdown .group-label:not(.active):hover,
form .select-plugin .dropdown .option:hover,
.dropdown-responsive .dropdown .group-label:not(.active):hover,
.dropdown-responsive .dropdown .option:hover
{
	background: orange;
	color: black;
}


form .select-plugin .optgroup.active,
.dropdown-responsive .dropdown .optgroup.active
{
	display: block;
}

form .select-plugin .option,
.dropdown-responsive .dropdown .option
{
	padding: 5px 7px;
	display: block;
}

form .select-plugin .dropdown::-webkit-scrollbar-track,
.dropdown-responsive .dropdown::-webkit-scrollbar-track
{
	border-radius: 5px;
	margin: 10px 0;
}

form .select-plugin .dropdown::-webkit-scrollbar-thumb,
.dropdown-responsive .dropdown.dropdown::-webkit-scrollbar-thumb
{
	border-radius: 5px;
}

@media (pointer: coarse){	
	.dropdown-responsive{
		/* display: flex; */
		display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
		background: rgba(0, 0, 0, 0.5);
    z-index: 50;
		animation: fadeIn 0.2s ease 0s 1 both;
		padding: 10px;
	} 

	.dropdown-responsive.active{
		display: flex;
	}

	.dropdown-responsive .dropdown
	{
		position: relative;
		left: unset;
    top: unset;
    width: calc(100vw - 20px);    
		max-height: 100%;
		box-shadow: 0 10px 20px 7px rgb(0 0 0 / 79%);
		max-width: 400px;
		justify-self: anchor-center;
	}
}



.modal-contact .cont-input{
	margin: 10px 0;
}

.modal-contact form label{
	margin: 0 0 5px 0;
	font-weight: bold;
}

.modal-contact .cont-form-triggers{
	display: flex;
	justify-content: flex-end;
	margin: 20px 0 0 0;
}

.modal-contact .form-trigger{
	padding:  5px 7px;
	border: 1px solid #ccc;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.modal-contact .form-trigger.focus{
	border-color: orange;
}

.modal-contact .form-trigger:hover{
	background: #444;
}

.form-trigger.focus
{
  --load-icon-start-color: white!important;
}

@media only screen and (max-width: 500px), (max-height: 500px){
	.modal-contact .content form{
		padding: 0 10px;
		font-size: 14px;
	}

	input, textarea, select{
		font-size: 12px;
	}	

	.modal-contact .content form .cont-input {
    margin: 0 0 10px 0;
	}

	.modal-title{
		padding: 10px 20px;
	}
	.modal-title h3{
		font-size: 18px;
	}

	.modal-contact .cont-form-triggers{
		margin: 10px 0 0 0;
	}

}




/*
      :::::::::: ::::::::   :::::::: ::::::::::: :::::::::: :::::::::
     :+:       :+:    :+: :+:    :+:    :+:     :+:        :+:    :+:
    +:+       +:+    +:+ +:+    +:+    +:+     +:+        +:+    +:+
   :#::+::#  +#+    +:+ +#+    +:+    +#+     +#++:++#   +#++:++#:
  +#+       +#+    +#+ +#+    +#+    +#+     +#+        +#+    +#+
 #+#       #+#    #+# #+#    #+#    #+#     #+#        #+#    #+#
###        ########   ########     ###     ########## ###    ###
*/


footer{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 10px;
	background: #111;
	text-align: center;
	font-size: 14px;
	margin: 100px 0 0 0;
	--social-icon-size: 22px;
	--social-icon-size-svg: 14px;
}

footer .content{
	width: 100%;
	max-width: var(--page-content-max-width);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

footer .content .info{
	width: 33%;
	flex-shrink: 0;
	text-align: left;
	margin: 0 15px 0 0;
}

footer h4{
	font-size: 15px;
	margin: 0 0 0 0;
}

footer p{
	margin: 0;
}

footer .content p.legal{
	text-align: justify;
	text-align-last: left;
}

footer .content a{
	background: #222;
	color: rgb(25, 223, 223);
	padding: 0px 4px;
	border-radius: 4px;
	text-decoration: none;
}

footer .content a:hover{
	background: #333;
	color: cyan;
}

footer .biz{
	margin: 0 0 0 0;
	font-size: 12px;
}

.social{
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 4px 0 0 0;
}

.social .social-icon{
	width: var(--social-icon-size);
	height: var(--social-icon-size);
	background: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5px 5px 0 0;
	border-radius: 4px;
	--fill: white;
	transition: background 0.1s ease;
}

.social .social-icon:hover{
	background: white;
	--fill: black;
	
}

.social .social-icon svg{
	width: var(--social-icon-size-svg);
	height: var(--social-icon-size-svg);
	fill: var(--fill);
	transition: fill 0.1s ease;
}

@media only screen and (max-width: 650px){
	footer .content{
		flex-flow: column;
	}

	footer .content .info{
		width: 100%;
	}

	footer .legal{
		margin: 20px 0 0 0;
	}

	.social{
		margin: 10px 0 0 0;
	}

	.social .social-icon{
		width: 30px;
		height: 30px;
	}

	.social .social-icon svg{
		width: 20px;
		height: 20px;
	}
}


/*
      ::::::::  :::::::::: ::::    ::: :::::::::: :::::::::      :::     :::
    :+:    :+: :+:        :+:+:   :+: :+:        :+:    :+:   :+: :+:   :+:
   +:+        +:+        :+:+:+  +:+ +:+        +:+    +:+  +:+   +:+  +:+
  :#:        +#++:++#   +#+ +:+ +#+ +#++:++#   +#++:++#:  +#++:++#++: +#+
 +#+   +#+# +#+        +#+  +#+#+# +#+        +#+    +#+ +#+     +#+ +#+
#+#    #+# #+#        #+#   #+#+# #+#        #+#    #+# #+#     #+# #+#
########  ########## ###    #### ########## ###    ### ###     ### ##########
*/


.cont-load-icon{
  transform: rotateY(180deg);
}

.load-icon {
	--b:4px;  /* border width*/
	color: #313149;
	display: inline-block;
	width: 20px;
	aspect-ratio: 1;
	position: relative;
	z-index: 5;
	animation: rotate 1s linear 0s infinite both;
	display: block;
	/* margin: 0 5px 0 0; */
}

@keyframes rotate{
	0%{
		transform: rotate(360deg);
	}
}

:root{
  --load-icon-start-color: var(--main-blue);
}

.btn-trigger.focus
{
  --load-icon-start-color: white!important;
}

.load-icon:before {
	--c:conic-gradient(var(--load-icon-start-color), transparent);
	content:"";
	position:absolute;
	z-index:-1;
	inset: 0;
	background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
	padding: var(--b);
	border-radius: 50%;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
			mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
			mask-composite: exclude;
}

.preload-off .cont-load-icon{
	display: none;
}



@media (pointer:fine) {

  /* width */
  ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
		/* border-radius: 20px; */
    /* margin: 10px 0; */
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #ccc;
    border: 3px solid #f1f1f1;
		/* border-radius: 20px; */
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #aaa;
  }
}

@media (pointer:fine){

  /* Track */
  .dark-mode ::-webkit-scrollbar-track {
    background: #222;
  }

  /* Handle */
  .dark-mode ::-webkit-scrollbar-thumb {
    /* background: #2953c8; */
		background: rgb(142, 142, 43);
    border: 3px solid #222;
		border-radius: 7px;
  }

  /* Handle on hover */
  .dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #555;
		background: rgb(223, 223, 50);
  }
}


/*
      :::::::::: :::    :::
     :+:        :+:    :+:
    +:+         +:+  +:+
   :#::+::#     +#++:+
  +#+         +#+  +#+
 #+#        #+#    #+#
###        ###    ###
*/

.bubble-animation {
	position: fixed;
	width: 20px;
	height: 20px;
	background-color: rgba(255, 255, 255, 0.368);
	border-radius: 50%;
	transform: scale(0);
	opacity: 1;
	transition: transform 0.6s ease-out, opacity 0.6s ease-out;
	pointer-events: none; /* Prevents bubbles from being clickable */
	--scale: scale(3);
}

@media not (pointer: fine){
	.bubble-animation{
		--scale: scale(5);
	}
}

@keyframes expandToRight{
	0%{
		width: 0;
	}

	100%{
		width: 100%;
	}
}


@keyframes zoomOut{
	0%{
		transform: scale(1.3);
	}
	100%{
		transform: scale(1);
	}
}

@keyframes zoomIn{
	0%{
		transform: scale(var(--initial-scale, 1));
	}
	100%{
		transform: scale(var(--final-scale, 1.05));
	}
}

@keyframes personShadow {
	0%{
		filter: var(--initial-filter) drop-shadow(0 0px 0px var(--shadow));
	}
	100%{
		filter: var(--initial-filter) drop-shadow(0 5px 10px var(--shadow));
	}
}



@keyframes fadeOut{
	0%{opacity: 1; visibility: visible;}
	100%{opacity: 0; visibility: hidden;}
}

@keyframes fadeIn{
	0%{opacity: var(--initial-opacity, 0); visibility: hidden;}
	100%{opacity: var(--final-opacity, 1); visibility: visible;}
}

@keyframes fadeInRelative{
	0%{opacity: var(--opacity-0); visibility: hidden;}
	100%{opacity: var(--opacity-100); visibility: visible;}
}


@keyframes toUp{
	0%{
		pointer-events: none;
		transform: translateY(var(--initial-y, 100px));
	}

	99%{
		pointer-events: none;
	}
	100%{
		pointer-events: all;
		transform: translateY(0px);
	}
}

@keyframes toLeft{
	0%{
		pointer-events: none;
		transform: translateX(100%);
	}
	99%{
		pointer-events: none;
	}
	100%{
		pointer-events: all;
		transform: translateX(0px);
	}
}

.shine-fx{
	position: relative;
}

.shine-fx *{
	position: relative;
}

.shine-fx .shine-fx-container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
}

.shine-fx .shine-fx-container::before{
	content: "";
	will-change: transform;
	position: absolute;
	bottom: -100%;
	left: -100%;
	min-width: 100%;
	min-height: 100%;
	aspect-ratio: 1 / 1;
	background: linear-gradient(45deg, transparent  40%, #ffffffa7, transparent 60%);
	animation: shine 2.5s ease 0s 1 both;	
}

.modal-contact .content.shine-fx .shine-fx-container::before{
	animation-delay: 0.4s;
}

@keyframes shine{
	0%{
		left: -100%;
		bottom: -100%;
	}

	100%{
		left: 100%;
		bottom: 100%;
	}
}

@keyframes shineText {
  from {
    -webkit-mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
  }
}


@keyframes expandBubble{
	0%{
		width: 0;
		height: 0;
		border-radius: 50%;
		border: 1px solid transparent;

	}

	50%{
		width: var(--max-width-30);
		height: var(--max-height-30);

	}

	70%{
		width: var(--max-width-60);
		height: var(--max-height-60);
		border-radius: 20px;
		box-shadow: 0 5px 20px -5px rgb(0 0 0 / 0%);
	}

	100%{
		width: 100%;
		height: 100%;
		border-radius: 20px;
		box-shadow: 0 10px 15px -5px rgb(0 0 0 / 60%);
		border: 1px solid #555;
	}
}