:root {
 --sidebar-width: 100%;
 --toggler-size: 30px;
 --toggler-line-number: 3;
 --toggler-line-size: calc(var(--toggler-size) / (var(--toggler-line-number) + var(--toggler-line-number) - 1));
 --toggler-offset-top: 20px;
 --toggler-color: #000;
 --toggler-color-hover: #999;
}
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
::selection {
	text-shadow: none;
	background: #1bc18a;
	color: #222;
}
#servicios ::selection {
	text-shadow: none;
	background: #333;
	color: #1bc18a;
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #1bc18a #000000;
}

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
 width: 16px;
}
 *::-webkit-scrollbar-track {
 background: #000000;
}
 *::-webkit-scrollbar-thumb {
 background-color: #1bc18a;
 border-radius: 10px;
 border: 3px none #000000;
}
a:hover, a:focus {
	text-decoration: none
}
.trabajo figcaption h3 a {
	color: #fff !important;
	transition: .3s linear all
}
.trabajo figcaption h3 a:hover {
	color: #bbb !important
}

@media screen and (min-width: 20em) {
html {
 font-size: calc(0.8rem + 0.4 * (100vw - 20em) / 55);
}
}

@media screen and (min-width: 75em) {
html {
	font-size: 1.2rem;
}
}
.wrapper {
	min-width: 100vw;
	background: AliceBlue;
	display: flex;
}
.sidebar, .content {
	transition: all 0.25s ease-out;
}
.sidebar {
	width: var(--sidebar-width);
 transform: translateX(calc(var(--sidebar-width) * -1));
	background: linear-gradient(to bottom right, #000, #666);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	height: 100vh;
	opacity: 0.5;
	scroll-behavior: smooth;
	scrollbar-width: none;
	z-index: 1002;
}
.content {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.menu__link {
	color: #99999966;
	font-weight: 800;
	text-decoration: none;
	font-size: 9vmin;
	line-height: 16vmin;
	white-space: nowrap;
	transition: .4s linear all;
	transform: scale(0.95);
	transform-origin: 50% 50%;
	display: inline-block;
}
.menu__link:hover, .menu__link:focus {
	color: unset !important;
	text-decoration: none !important;
	transform: scale(1.0);
}
.menu__link::before {
	content: attr(data-text);
	position: absolute;
	z-index: 1;
	color: #1bc18a;
	pointer-events: none;
	transition: .5s linear all;
	-webkit-text-stroke-color: #1bc18a;
	width: 0;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	text-shadow: 0 0 2px #1bbe88;
}
.menu__link:hover::before {
	width: 100%;
}
.menu-toggler {
	border-radius: calc(var(--toggler-line-size) / 2);
	display: block;
	contain: content;
	position: absolute;
	top: 0;
	width: var(--toggler-size);
	height: var(--toggler-size);
	/*position: fixed;
  right: 20px;
  top: var(--toggler-offset-top);*/
  
	cursor: pointer;
	z-index: 55511;
}
.menutext {
	/* position: fixed;
    top: 25px;
    right: 60px;*/
	text-transform: uppercase;
	text-align: right;
	font-weight: 800;
	letter-spacing: 2px;
	text-shadow: none;
	transition: .3s linear all;
}
.menu-open .menutext {
	color: #999 !important;
	z-index: 4231
}
.menu-toggler__line {
	height: var(--toggler-line-size);
	background: #666;
	position: absolute;
	border-radius: calc(var(--toggler-line-size) / 2);
	left: 0;
	right: 0;
	transition: all 0.25s ease-out;
	height: 4px;
	max-width: 30px;
}
.menu-toggler__line:nth-child(1) {
 top: calc(var(--toggler-line-size) * 1 + (var(--toggler-line-size) * (1 - 2)));
}
.menu-toggler__line:nth-child(2) {
 top: calc(var(--toggler-line-size) * 2 + (var(--toggler-line-size) * (2 - 2)));
}
.menu-toggler__line:nth-child(3) {
 top: calc(var(--toggler-line-size) * 3 + (var(--toggler-line-size) * (3 - 2)));
}
.input-toggler {
	position: absolute;
	left: -100%;
}
.input-toggler:focus ~ .menu-toggler {
	outline: none;
}
.input-toggler:checked ~ .menu-toggler .menu-toggler__line:not(:first-child):not(:last-child) {
	opacity: 0;
}
.input-toggler:checked ~ .menu-toggler .menu-toggler__line:first-child, .input-toggler:checked ~ .menu-toggler .menu-toggler__line:last-child {
	background-color: var(--toggler-color-hover);
}
.input-toggler:checked ~ .menu-toggler .menu-toggler__line:first-child {
 transform: translateY(calc(var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(45deg);
}
.input-toggler:checked ~ .menu-toggler .menu-toggler__line:last-child {
 transform: translateY(calc(-1 * var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(-45deg);
}
.input-toggler:checked ~ .sidebar {
	transform: translateX(0);
	opacity: 0.98;
}
.sidebar:before {
	content: '';
	display: block;
	/*border: 4px solid #3b3b3b;*/
	position: absolute;
	width: calc(100vw - 8px);
	height: 100vh;
	background: linear-gradient(to bottom right, #000, #222);
	transform: scale(0);
	transition-duration: .3s;
	transition-delay: .1s;
	opacity: 0;
	border-radius: 100%;
}
.menu-open .sidebar:before {
	opacity: 1;
	transform: scale(1);
	border-radius: 00%;
}
.menu-open .sidebar {
	transition-delay: 0s
}
.wrapper {
	height: calc(100vh - 50px);
}
.sb-link {
	display: flex;
	height: 50px;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #bb5555;
	transition: background 0.3s;
}
.sb-link:hover, .sb-link:focus, .sb-link:active {
	background: #f7f7f7;
}
/*************************************/


.menu {
	width: 70%;
	left: 30%;
	top: 10%;
	position: absolute;
	height: 100vh;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Hide scrollbar in FF */
	display: inline-block; /*flex;*/
	flex-direction: column;
	align-items: flex-end;
	text-align: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	list-style-type: none;
}
.mobile .menu {
	padding: 5rem 0;
	height: auto;
}
.menu__item {
	flex: none;
	margin-right: 4rem;
	padding: 0 2rem 0 0;
	display: flex;
	display: block;
	position: relative;
}
.menu__item-inner {
	white-space: nowrap;
	position: relative;
	cursor: pointer;
	font-size: 7vw;
	padding: 0.5rem;
	display: block;
	color: var(--color-menu);
	transition: transform 0.2s;
}
.menu__item-inner:hover {
	font-style: italic;
	transform: translate3d(2rem, 0, 0);
	color: var(--color-menu-hover);
}
.menu__item-inner::before {
	content: '';
	top: 55%;
	width: 3.5rem;
	height: 1px;
	background: currentColor;
	position: absolute;
	right: calc(100% + 2rem);
	opacity: 0;
	pointer-events: none;
}
.menu__item .menu__link i {
	font-size: .8em;
	pointer-events: none;
	position: absolute;
	left: -2em;
	top: .5em;
	opacity: 0;
	transition: .2s linear all;
	z-index: 2;
}
.menu__item:hover .menu__link i {
	opacity: 1;
	left: -1.3em;
	color: #4adab354
}
.menu__item-inner:hover::before {
	opacity: 1;
}
/* Pseudo-element for making sure that hover area is active */
.menu__item-inner:hover::after {
	content: '';
	position: absolute;
	top: 0;
	left: -5.5rem;
	right: 0;
	height: 100%;
}
#redesSociales {
	position: absolute;
	left: 5%;
}
#redesSociales li {
	list-style: none;
}
#redesSociales li a {
	font-size: 30px;
	line-height: 2em;
	display: inline-block;
	position: relative;
}
#redesSociales li a:before {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	transform-origin: 0% 50%;
	background-color: #ffffff00;
	transition: .4s linear all;
	transform: scale(0, 1);
}
#redesSociales li a:hover:before {
	background-color: #ffffffff;
	transform: scale(1, 02)
}
.navbar-brand {
	float: left;
	height: 50px;
	top: 20px;
	left: 20px;
	font-size: 18px;
	line-height: 20px;
	z-index: 999999;
	position: fixed;
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
}
.navbar-brand:after {
	content: '';
	position: absolute;
	display: block;
	width: 70px;
	height: 70px;
	background: #43434373;
	filter: blur(20px);
	top: 31px;
	left: 48px;
	transform-style: preserve-3d;
	transform: translate3d(0px, 0px, -50px);
	z-index: -1;
}
#logo img {
	filter: invert(0);
	transition: 0.4s linear all;
	position: fixed;/* top: 30px;
    left: 5%;*/
}
#menuToggler:checked ~ #logo img {
	filter: invert(1);
}
.menu-toggler:hover .menu-toggler__line, .menu-toggler:focus .menu-toggler__line {
	background-color: #1bc18a
}
.input-toggler:checked ~ .menu-toggler:hover .menu-toggler__line:first-child, .input-toggler:checked ~ .menu-toggler:hover .menu-toggler__line:last-child {
	background-color: #1bc18a;
}
.input-toggler:checked ~ .menu-toggler:hover ~ .menutext {
	color: #1bc18a
}
.sidebar a {
	color: #999999;
	display: inline-block;
}
a:focus, a:active, a.active {
	color: #eeeeee;
}
a:hover {
	color: #fff
}
.menu-open {
	overflow-y: hidden !important;
	overflow: hidden !important;
}
canvas {
	position: absolute !important;
	top: 0;
	width: 100vw;
	height: 110vh;
	mix-blend-mode: lighten;
	left: 0;
	display: block;
	box-sizing: content-box;
	z-index: 4 !important;
	pointer-events: none;
}
.videoIntro {
	display: inline-block;
	position: relative;
	top: -50vh;
	/*  top: -55vh ; /* -212px translate(0px, 0px) ;*/
	z-index: 700;
	border-radius: 30rem;
	transform: scale(0.3, 0.3);
	clip-path: circle();
}
header {
	height: 100vh;
	background-image: none;
	background: radial-gradient(#222 0%, #101010 100%);
	color: white;
}
#introduccion {
	background: radial-gradient(#10835d00 -22%, #00000000 80%);
	box-shadow: inset 0 0 45px 10px black;
	min-height: 100vh
}
 @keyframes logoAnimado {
0% {
transform: rotate3d(0.2, 1, 0, 0deg);
}
5% {
transform: rotate3d(0.2, 1, 0, 180deg);
}
20% {
transform: rotate3d(0.2, 1, 0, 360deg);
}
}
 @keyframes spinDS {
 60% {
 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
 80% {
 transform: rotateX(0deg) rotateY(180deg) rotateZ(00deg);
}
 100% {
 transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
}
}
 @keyframes spinDS2 {
 00% {
 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
 50% {
 transform: rotateX(0deg) rotateY(180deg) rotateZ(00deg);
}
 100% {
 transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
}
}
.circle {
	border-radius: 5em;
	border: 0.35em dashed var(--circle);
	width: 8em;
	height: 8em;
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 50%;
}
.side {
	width: 0.4em;
	font-smooth: 2px;
	filter: blur(10px);
	height: 1em;
	background: var(--side);
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.side:nth-of-type(1) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(0deg) translateZ(2.95em);
}
.side:nth-of-type(2) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(18deg) translateZ(2.95em);
}
.side:nth-of-type(3) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(36deg) translateZ(2.95em);
}
.side:nth-of-type(4) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(54deg) translateZ(2.95em);
}
.side:nth-of-type(5) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(72deg) translateZ(2.95em);
}
.side:nth-of-type(6) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(90deg) translateZ(2.95em);
}
.side:nth-of-type(7) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(108deg) translateZ(2.95em);
}
.side:nth-of-type(8) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(126deg) translateZ(2.95em);
}
.side:nth-of-type(9) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(144deg) translateZ(2.95em);
}
.side:nth-of-type(10) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(162deg) translateZ(2.95em);
}
.side:nth-of-type(11) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(180deg) translateZ(2.95em);
}
.side:nth-of-type(12) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(198deg) translateZ(2.95em);
}
.side:nth-of-type(13) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(216deg) translateZ(2.95em);
}
.side:nth-of-type(14) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(234deg) translateZ(2.95em);
}
.side:nth-of-type(15) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(252deg) translateZ(2.95em);
}
.side:nth-of-type(16) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(270deg) translateZ(2.95em);
}
.side:nth-of-type(17) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(288deg) translateZ(2.95em);
}
.side:nth-of-type(18) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(306deg) translateZ(2.95em);
}
.side:nth-of-type(19) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(324deg) translateZ(2.95em);
}
.side:nth-of-type(20) {
	transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(342deg) translateZ(2.95em);
}
.yen {
	animation: spinDS 13s linear infinite;
}
.yen:hover {
	animation: spinDS 2s linear infinite;
}
.yen {
 --face: #fff;
 --sign: #222;
 --circle: #000;
 --side: #666666;
 --slide: #666666;
}
.coin {
	width: 100px;
	height: 100px;
	transform-style: preserve-3d;
}
.face {
	border-radius: 5em;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: var(--face);
}
.front {
	transform: translate3d(0, 0, 0.4em) rotateY(0);
}
.back {
	transform: rotateY(180deg) translate3d(0, 0, 0.4em);
}
.symbol {
	position: absolute;
	color: var(--sign);
	transform: translate(-50%, -50%);
}
header .intro-text {
	padding-top: 15vh;
}
.intro-text h3 {
	font-family: "MuseoModerno", serif;
	position: relative;
	z-index: 6;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: italic;
	font-size: calc(70% + 8px);
	color: #737373;
	text-transform: unset;
	text-shadow: 1px 2px 3px rgba(0, 0, 0, .3);
	text-align: center;
	line-height: 1.3em;
	margin-top: 30px;
}
.intro-text .texto1, .intro-text .texto2 {
	position: relative;
	z-index: 6;
	font-family: "MuseoModerno", serif;
	letter-spacing: 1px;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size: 2em;
	color: #7bb9a5;
	text-transform: unset;
	text-shadow: 1px 2px 3px rgba(0, 0, 0, .3);
	text-align: center;
	line-height: 1.3em;
	margin: auto;
	display: inline-block;
}
.intro-text .texto1 {
	left: calc(50% - 3em);
	position: absolute;
}
.intro-text .texto2 {
	position: relative;
	margin: 0 auto;
	/*  left: calc(50% - 5.5em);*/
	text-transform: unset;
	top: -7px;
}
/*
.intro-text h1:after {
    content: '';
    position: absolute;
    width: 50vw;
    height: 50vw;
    border-radius: 100%;
    background: radial-gradient(#171717 0%, transparent 67%);
    display: block;
    z-index: -1;
    top: -10vw;
    left: 15vw;
    outline: none;}*/


.intro-text h1 {
	position: relative;
	z-index: 6;
	font-family: "MuseoModerno", serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size: calc(3vw + 5em);
	color: white;
	text-transform: unset;
	text-shadow: 1px 1px 1px #333,  1px 2px 1px #333,  1px 3px 1px #333,  1px 4px 1px #333,  1px 5px 1px #333,  1px 6px 1px #333,  1px 7px 1px #33333399,  1px 8px 1px #33333366,  1px 9px 1px #33333333,  1px 10px 1px #33333300,  2px 4px 8px rgba(0, 0, 0, .3);
	text-align: center;
	line-height: 1em;
	letter-spacing: -0.31vw;
	margin: 10px 0 18px;
}
.menuDesplegable {
	position: fixed;
	padding: 0 20px 0;
	margin: 0 0;
	top: 4vh;
	right: 1vw;
	z-index: 7000
}
.menuDesplegable input {
	visibility: hidden;
}
.menuDesplegable .menutext {
	position: relative;
	left: -60px;
	top: 5px;
	color: #a9a9a9a6;
}
.menu-open .sidebar {
	transform: translateX(0px);
	z-index: 6999;
	opacity: .985
}
.footerFijo {
	position: absolute;
	bottom: 10%;
	left: 3%;
	z-index: 7;
	width: 94%;
	;
	height: 100px
}
.footerFijo .izquierda {
	position: absolute;
	left: 0;
	bottom: 0
}
.footerFijo .derecha {
	position: absolute;
	left: unset;
	right: 0;
	bottom: 0
}
.magnetic button, .footerFijo a {
	border: 2px solid #333;
	color: #ccc;
	background-color: #111111c9;
	padding: 10px 22px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 700;
	transition: .3s linear all;
	transform: scale(1.0);
	transform-origin: 50% 50%
}
.magnetic button:hover, .footerFijo a:hover {
	border: 2px solid #1bc18a54;
	color: #1bc18a;
	background-color: #0000006b;
	box-shadow: 0 0 18px #1bc18a54
}
.intro-text:after {
	content: '';
	display: block;
	width: 60vw;
	height: 60vw;
	background: radial-gradient(#1a1a1a 20%, #1b1b1b00 64%);
	position: absolute;
	top: -15vh;
	z-index: 5;
	left: 20vw;
	border-radius: 100%;
}



@media (min-width: 768px) and (max-width: 1199px) {
.videoIntro {
	top: -90px;
	transform: translate(0px, 0px) scale(0.4, 0.4);
}
}
.follower {
	width: 110px;
	height: 110px;
	z-index: 21414124121;
	background: #1bc18a;
	border-radius: 50%;
	position: fixed;
	transform: translate(-150%, -150%);
	pointer-events: none;
	opacity: 1;
	backdrop-filter: grayscale(1);

}


.activado:before {

	position: absolute;
	content: '';
	border-radius: 50%;
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	height: 90%;
	display: block;
	border: 2px dashed #1bc18a;
	transform-origin: 50% 50%;
	animation: gira 12s linear infinite;
		mix-blend-mode: difference;
		transition: .1s ease all;
}
.activado2 {
	mix-blend-mode: difference;
	top: -20px;
	left: -20px;
	/*filter: sepia(1) saturate(2.5) hue-rotate(252deg) invert(1);*/
}
.activado2:before {
	position: absolute;
	content: '';
	border-radius: 50%;
	width: 70%;
	margin-top: 15%;
	margin-left: 15%;
	height: 70%;
	display: block;
	transform-origin: 50% 50%;


}
 @keyframes gira {
 0% {
transform: rotate(0deg);
}
 100% {
transform: rotate(360deg);
}
}
 @keyframes click {
 0% {
transform: translateY(0px);
opacity: 0;
}
 35% {
transform: translateY(-25px) rotate(0deg);
opacity: 1;
}
 45% {
transform: translateY(-15px) rotate(5deg);
opacity: 1;
}
 65% {
transform: translateY(-35px) rotate(-5deg);
opacity: 1;
}
 100% {
transform: translateY(-40px);
opacity: 0;
}
}
/*
LOGOS CLIENTES
******************/



.marquee {
	padding: 1vw;
	white-space: nowrap;
	transition: 1s ease color, .4s linear background-color;
}
.marquee__inner {
	display: flex;
	gap: 40px;
}
.marquee__content {
	font-size: clamp(20px, 4.375vw, 50px);
	font-weight: 600;
}
.reel1 {
	color: #1bc18a;
}
.reel2 {
	color: #1bc18a;
}
.reel3 {
	color: #1bc18a;
}
.marquee:hover {
	background-color: #02020222;
	color: #ffffff
}
/* #1b3128 #1bc18a background-color: #02020222;
.reel1{background-color: #3a5349;color: #1b3128;}
.reel2{background-color: #1b2f27;color: #3a5349;}
.reel3{background-color: #11211b;color: #3a5349;}
*/

.clientes {
	position: relative;
}
.clientes:after {
	content: '';
	position: absolute;
	display: block;
	background: linear-gradient(90deg, transparent, #111111 70%);
	right: 0;
	top: -60px;
	width: 10%;
	height: calc(100px + 20vw);
	z-index: 43;
}
.clientes:before {
	content: '';
	position: absolute;
	display: block;
	background: linear-gradient(90deg, #111111, transparent 70%);
	left: 0;
	top: -60px;
	width: 20%;
	height: calc(100px + 20vw);
	z-index: 43;
}
.wrapperLogos {
	position: absolute;
	width: 150vw;
	height: 50px;
	left: -25vw;
	background: transparent;
	overflow: hidden;
}
.wrapperLogos .box {
	position: absolute;
	width: calc(20px + 3vw);
	height: 50px;
	white-space: nowrap;
	color: #999;
	font-size: calc(14px + 1vw);
	font-weight: 600;
	line-height: 50px;
	text-align: center;
}
.wrapperLogos .boxes {
	position: relative;
	background-color: red;
}
.trabajo {
	height: 50vh;
	margin-bottom: 20vh;
	clear: both;
	background: transparent;
	opacity: 0;
	scale: .9;
	transform: translateY(0px) translateX(0px);
}

@media (min-width: 1200px) {
.container {
	width: 82vw;
}
}

@media (min-width: 1600px) {
.container {
	width: 70vw;
	max-width: 1480px;
}
}
.trabajosDestacados {
	z-index: 7;
	position: relative;
}
.trabajo.left {
	transform: translateX(-100%);
	rotate: -12deg;  /* Se desplaza desde el borde izquierdo */
}
.trabajosDestacados .trabajo:nth-child(2) {
	transform: translateX(100%);
	rotate: -2deg;  /* Se desplaza desde el borde derecho */
}
.trabajo figure {
	position: relative;
	width: 60% !important;
	display: inline-block;
	min-height: 52vh; /*calc(320px + 20vh);*/
	background-size: cover;
	border-radius: 20px;
	border: 6px solid #0e4d38;
	box-shadow: 5px 8px 20px #00000070;
	vertical-align: top;
	transition: .4s ease all;
	margin-right: 3%;
	top: 0;
	left: 0px;
}
.trabajo figure:hover {
	box-shadow: 0 0 20px #1bc18a2e;
	border: 6px solid #1bc18a;
	;
	top: 9px;
	left: 12px;
}
.trabajo figcaption {
	transform: translateX(300%);
	width: 35%;
	opacity: 0;
	transition: .5s ease left;
	display: inline-block;
	vertical-align: top;
	opacity: 1;
	left: 0;
	position: relative;
	animation: aparece 1s linear;
	animation-iteration-count: 0;
}
 @keyframes aparece {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
.trabajosDestacados .trabajo:nth-child(2) {
	transform: translateX(100%);
	rotate: 5deg;
}
.trabajosDestacados .trabajo:nth-child(2) figure {
	margin-right: 0 !important;
	float: right;
	margin-left: 3% !important
}
.trabajosDestacados .trabajo:nth-child(2) figcaption {
	text-align: right !important;
}
.trabajo figcaption h3 {
	color: white;
	font-family: "MuseoModerno", sans-serif;
	font-size: calc(15px + 2.5vw);
	text-transform: unset;
}
.trabajo figcaption p {
	color: #1bc18a;
	font-size: calc(8px + .5vw);
	text-transform: uppercase;
	letter-spacing: 1.5px;
}
.trabajo figcaption .verCaso {
	border: 2px solid #333;
	color: #ccc;
	background-color: #111;
	padding: 16px 32px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 700;
	transition: .3s ease all;
	transform: scale(1.0);
	transform-origin: 50% 50%;
	display: inline-block;
	margin-top: 70px;
}
.verPortfolio {
	border: 2px solid #333;
	color: #ccc;
	background-color: #111;
	padding: 16px 32px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 700;
	transition: .3s ease all;
	transform: scale(1.2);
	transform-origin: 50% 50%;
	display: inline-block;
	margin-bottom: 120px;
}
.verPortfolio:hover {
	border: 2px solid #1bc18a54;
	color: #1bc18a;
	background-color: #000;
	padding: 20px 42px;
	box-shadow: 0 0 18px #1bc18a54;
}
html {
	user-select: none
}
.trabajo figcaption .verCaso:hover {
	border: 2px solid #1bc18a54;
	color: #1bc18a;
	background-color: #000;
	padding: 20px 42px;
	box-shadow: 0 0 18px #1bc18a54;
}
/* boton magnetico */


#magnet-button {
	display: inline-block;
}
.my-button {
	background-color: transparent;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	border: 2px solid #999;
	cursor: pointer;
}
.my-button:hover {
	color: #FFF;
	border: 2px solid white;
	background-color: #222;
	transition: 0.5s background-color;
}
#servicios {
	background-color: #1bc18a;
	color: #222
}
#acerca .introDS p, #servicios .intro p {
	font-size: calc( 12px + 1vw);
	color: #17513e;
	line-height: 1.5em;
	text-align: justify;
	font-weight: 600;
	opacity: 0;
	transition: .5s linear all;
	transform: translateY(100px);
}
#acerca .introDS p {
	font-size: calc( 10px + .5vw);
	max-width: 534px;
}
#portfolio {
	background-color: #111;
	color: white;
	clear: both;
	display: block;
	position: relative;
	padding-bottom: 70px;
	overflow: hidden;
}
.tarjeta {
	transform: translateX(-200px) translateY(-200px) scale(1.0) rotate(-25deg);
	opacity: 0;
	height: 25vw;
	width: 25vw;
	background-color: #111111;
	border-radius: 100%;
	position: absolute;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .5s ease all;
	top: 100px;
	z-index: 6;
}
.tarjeta img {
	position: absolute;
	opacity: 0;
	left: 42%;
	top: 10%;
	width: 100px;
	height: 100px;
	z-index: 8;
	transform-origin: 50% 50%;
	transition: .3s linear all;
	transform: scale(1.2);
}
.tarjeta:hover img {
	opacity: 1;
	transform: scale(1.0);
}
.tarjeta:hover {
	transform: scale(.65) translate3d(-20px, -20px, 0px) rotate(0deg) !important;
}
.tarjeta p {
	font-size: calc(10px + 1vw);
	text-align: center;
	padding: 50px 30px 0;
	color: #999; /*#1bc18a*/
	line-height: 1.5em;
	font-weight: 600;
	z-index: 6;
}
.tarjeta::before {
	content: "";
	position: absolute;
	height: 26vw;
	width: 26vw;
	background-image: conic-gradient(#555555 20deg, transparent 220deg);
	animation: rotar 3s linear infinite;
	transition: .2s linear all;
}
.tarjeta:hover p {
	color: #1bc18a;
}
.tarjeta:hover::before {
	background-image: conic-gradient(#1bc18a 20deg, transparent 220deg);
}
 @keyframes rotar {
 from {
 transform: rotate(0deg);
}
 to {
 transform: rotate(-360deg);
}
}
.tarjeta::after {
	content: "";
	position: absolute;
	height: 24vw;
	width: 24vw;
	background-color: #111;
	border-radius: 100%;
}
#portfolio .tituloPrincipalSeccion2 {
	margin-bottom: 200px
}
/**************************************************************/


#horizontal-scoll {
	padding: 0px 0 0px;
	clear: both;
}
.horizontal-scoll-wrapper {
	/* overflow: hidden;*/
	height: 525px;
	clear: both;
}
.horizontal {
	display: flex;
	height: 100%;
	margin: 0 15vw;
}
.horizontal > div {
	display: flex;
	flex-shrink: 0;
	padding: 0 5px;
}
.horizontal > div:first-child {
	padding: 0 5px 0 15px;
}
.horizontal > div:last-child {
	padding: 0 15px 0 5px;
}
.horizontal .card {
	align-items: stretch;
	width: 540px;
	padding: 145px 40px 0;
	margin: 0 0;
	background-color: transparent;
	background: linear-gradient(60deg, #71e8c1, #1bc18ae0); /*#1bc18a*/
	background-position-x: 0;
	border-radius: 38px;
	color: #333;
	user-select: none;
	transition: 1s ease background-position-x, 1s ease background-size, 1s ease filter, 1s ease margin, 1s ease box-shadow;
	background-size: 540px;
	box-shadow: 0 0px 0px 0px #0e7754c2;
}
.horizontal div:last-child .card a i {
	transform: rotate(180deg);
}
.horizontal .card a i {
	font-size: 60px;
	position: absolute;
	right: calc(50% - 30px);
	color: #33333399;
	transition: .3s ease all;
	bottom: 3%;
	font-weight: 500;
}

@media (min-width: 768px) {
.horizontal .card a i {
	display: none !important
}
}
.horizontal .card:hover a i {
	color: #1db985;
	right: 8%;
	font-weight: 900;
}
.horizontal .card:hover a:hover i {
	color: #222;
}
.horizontal .card h3 {
	font-size: calc( 1.2vw + 15px);
	font-family: "museomoderno", sans-serif;
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal;
	transition: 1s ease all;
	text-transform: unset;
	line-height: 1.3em;
	text-align: center;
}
.horizontal div .card h3:before {
	font-size: calc(5.5vw + 30px);
	position: absolute;
	right: 2vw;
	top: -9vw;
	/* color: #fdfdfd82;
    transition: .6s linear all;
    opacity: 0;
    z-index: -1;
    text-shadow: 4px 8px 30px #ffffff99;*/
	color: #fdfffe75;
	transition: .6s linear all;
	opacity: 0;
	z-index: 0;
	/*filter: blur(4px);*/
	text-shadow: 4px 8px 30px #ffffff80;
}
.horizontal div:nth-child(1) .card h3:before {
	content: '1';
}
.horizontal div:nth-child(2) .card h3:before {
	content: '2';
}
.horizontal div:nth-child(3) .card h3:before {
	content: '3';
}
.horizontal div:nth-child(4) .card h3:before {
	content: '4';
}
.horizontal div:nth-child(5) .card h3:before {
	content: '5';
}
.horizontal div:nth-child(6) .card h3:before {
	content: '6';
}
.horizontal div .card:hover h3:before {
	opacity: 1;
	top: -4.5vw;
	filter: blur(0px);
}
.horizontal .card p {
	font-size: calc( .51vw + 10px);
	text-align: justify;
	padding: 30px 18px 0 0;
	letter-spacing: -.5px;
}
.horizontal .card figure {
	opacity: 0;
	transition: 1s linear all;
	user-select: none;
	transition-delay: .5s;
	width: 10vw;
	max-width: 118px;
	position: absolute;
	left: 40%;
	top: -1vw;
	z-index: 1;
}
.horizontal .card:hover figure {
	display: block;
	visibility: visible;
	opacity: 1;
}
.horizontal .card:hover {
	background-position-x: 00;
	background-size: 1080px;
	margin: 0px 20px 0;
	box-shadow: 0 12px 78px 0px #0e7754c2;
	z-index: 5;
}
.horizontal:hover .card:not(:hover) {
/*filter: blur(5px);*/
}
/* CLAUDE esto a tu CSS 
#horizontal-scoll {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scroll-behavior: smooth;
}*/

#horizontal-scoll .horizontal > div {
	scroll-snap-align: center;
	scroll-snap-stop: always;
	flex-shrink: 0; /* Importante para que no se contraiga */
}
/* Si usas gap, asegúrate de que esté definido */
#horizontal-scoll .horizontal {
	display: flex;
	gap: 10px; /* Ajusta según tu diseño */
}
.horizontal .card:hover h3 {
	color: #222
}
.tituloPrincipalSeccion4 h2, .tituloPrincipalSeccion4 h3, .tituloPrincipalSeccion3 h2, .tituloPrincipalSeccion3 h3, .tituloPrincipalSeccion2 h2, .tituloPrincipalSeccion2 h3, .tituloPrincipalSeccion h2, .tituloPrincipalSeccion h3 {
	font-size: calc(40px + 5vw);
	margin: 0 0;
	line-height: .9em;
	font-family: "MuseoModerno", sans-serif;
	font-style: italic;
	font-weight: 700;
	transform: translateX(-500px);
	opacity: 0;
	text-transform: unset;
	letter-spacing: -0.1vw;
	background: linear-gradient(90deg, white 50%, #252525 0);
	background-size: 400% 100%;
	background-position-x: 0%;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	position: relative;
	display: inline-block;
}
.tituloPrincipalSeccion3 h2, .tituloPrincipalSeccion3 h3 {
	font-size: calc(24px + 4vw);
	line-height: 1.1em;
	margin-bottom: -15px
}
.tituloPrincipalSeccion4 h3 {
	font-size: calc(20px + 3vw);
	line-height: 1.2em;
	margin-bottom: -15px
}
.tituloPrincipalSeccion4 h2 {
	font-size: calc(23px + 2vw);
	line-height: 1.2em;
	font-weight: 300;
}
#contacto .tituloPrincipalSeccion4, #acerca .tituloPrincipalSeccion3, #servicios .tituloPrincipalSeccion2, #servicios .tituloPrincipalSeccion {
	transition: .5s linear all;
}
.tituloPrincipalSeccion h3 {
	transform: translateX(-800px);
}
section {
	clear: both;
	position: relative;
	display: block;
}
.tituloPrincipalSeccion4 h2, .tituloPrincipalSeccion3 h2, .tituloPrincipalSeccion2 h2 {
	transform: translateX(800px);
}
.tituloPrincipalSeccion4 h3, .tituloPrincipalSeccion3 h3, .tituloPrincipalSeccion2 h3 {
	transform: translateX(1200px);
}
.tituloPrincipalSeccion2, {
 text-align: right !important;
}
.tituloPrincipalSeccion2 h2, .tituloPrincipalSeccion2 h3 {
	font-size: calc(30px + 4vw);
	margin: 0 0;
	line-height: 1.2em;
	text-align: right;
	font-family: "MuseoModerno", sans-serif;
	font-style: italic;
	font-weight: 700;
	opacity: 0;
	text-transform: unset;
	letter-spacing: -0.1vw;
	background: linear-gradient(90deg, #1bc18a 50%, #252525 0);
	background-size: 400% 100%;
	background-position-x: 100%;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	position: relative;
	display: inline-block;
	;
}
.tituloPrincipalSeccion h2, .tituloPrincipalSeccion3 h2 {
	font-weight: 300;
}
.tituloPrincipalSeccion2 h3 {
	font-weight: 300;
	background-position-x: 0%;
	font-size: calc(25px + 3.7vw);
	line-height: .81em;
	letter-spacing: -4px;
}
.tarjeta {
	display: none;
	visibility: hidden;
	opacity: 0
}

/***************  placas **********************/

#placaitems {
	background: linear-gradient(to bottom, black, #292929);
	font-size: 14px;
	box-shadow: 0px 0px 130px inset black
}
#placaitems .placa h3 {
	font-family: "MuseoModerno", sans-serif;
	text-transform: uppercase;
	font-weight: 400;
	font-size: calc(25px + 3vw);
	color: #1bc18a;
}
#placaitems .placa h3:before {
	content: '+';
	margin-right: 5px;
	font-size: .6em;
	position: relative;
	top: -10px
}
#valoresContador .col-md-3:last-child h3:before {
	content: none
}
#placaitems .placa {
	border: 1px solid #ffffff21;
	transition: .3s linear all;
	border-radius: 50px;
	padding: 60px 0px;
	text-align: center;
	transform-origin: center;
	opacity: 1;
	transform: scale(1, 1);
	scale: 1;
	border-width: 1px;
	box-shadow: 0 0 0px 0PX INSET #1f393078, 0 0 0px #1bc18a25;
	background-color: #00000066;
}
#placaitems .placa:hover {
	box-shadow: 0 0 70px 0PX INSET #1f393078, 0 0 30px #1bc18a25;
	border: 1px solid #1bc18a4d;
}
#placaitems .placa p {
	color: #666;
	transition: .3s linear all;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1.2em
}
#placaitems .placa:hover p {
	color: #1bc18a
}
#placaitems .placa figure {
	opacity: 0;
	transition: .3s linear all;
	transition-delay: .4s;
	width: 150px;
	height: 150px;
	display: block;
	position: absolute;
	top: -40px;
	left: calc(50% - 75px);
}
#placaitems .placa figure img {
	width: 100%;
	height: auto;
	max-width: 120px;
}
#placaitems .placa:hover figure {
	opacity: 1;
	top: -50px;
}
#placaitems .placa figure:before {
	content: '';
	position: absolute;
	display: block;
	background: radial-gradient(#000000 0%, transparent 75%);
	left: 0;
	top: 0;
	width: 100%;
	height: 100px;
	z-index: -1;
}
/***************  redes  **********************/

#redes {
	background: linear-gradient(to bottom, black, #292929);
	font-size: 14px;
	box-shadow: 0px 0px 130px inset black;
	text-align: center;
}
#redes ul {
	position: relative;
	list-style: none;
}
#redes ul li a .accesored {
	color: #666;
	transition: .3s linear all;
	transform: translateY(00px);
	opacity: 1;
	transition-delay: .3s
}
#redes ul li a:hover .accesored {
	color: #222;
	transform: translateY(-50px);
	opacity: 0
}
#redes ul li {
	color: #999;
	font-size: calc(24px + 3vw);
	background-color: transparent;
	transition: .4s linear all;
	overflow: hidden;
	position: relative;
}
#redes ul li a .accesored i {
	opacity: .5;
	position: relative;
	font-size: .6em;
	top: -5px;
	transition: .3s linear all;
	transform: translateX(0px);
}
#redes ul li a:hover .accesored i {
	opacity: 0;
	transform: translateX(-10px);
	display: inline-block;
	position: relative;
}
#redes ul li a .reelred {
	color: #000;
	background-color: #1bc18a;
	opacity: 0;
	transition: .5s ease-in-out all;
	position: absolute;
	top: 2em;
	display: inline;
	width: 200%;
	left: 0;
	overflow: hidden;
	font-size: calc(25px + 3vw);
	line-height: 1em;
}
#redes ul li a:hover .reelred {
	top: 0;
	opacity: 1;
	transition-delay: 0s
}
#redes ul li a .reelred span {
	animation: marquee 3.5s linear infinite;
	transition-delay: 0s;
	transition: .1s linear all;
	position: relative;
	letter-spacing: 2px;
	display: inline-flex;
	transform: translateX(-33vw);
}
#redes ul li a .reelred span b {
	display: inline-block;
	position: relative;
	margin-right: 1vw;
	padding-right: 1vw;
	width: 32vw;
	text-align: center;
	overflow: hidden;
	font-size: 70%;
	white-space: nowrap;
	text-align: center;
}
.estrella {
	clip-path: polygon(50% 0, 79% 90%, 2% 35%, 98% 35%, 21% 90%);
	aspect-ratio: 1;
	background: white;
	width: calc(20px + 2vw);
	height: calc(20px + 2vw);
}
#redes ul li a .reelred span b i {
	padding-left: 1.5vw;
	margin-left: 0.80em;
	transform-origin: 50% 50%;
	animation: rotarlo 5s linear infinite;
	position: absolute;
	display: inline-block;
	float: right;
	top: .15em;
	right: .2vw;
}
 @keyframes marquee {
 from {
 transform: translateX(-33vw);
}
 to {
 transform: translateX(-66vw);
}
}
 @keyframes rotarlo {
 0% {
 transform: rotate(0deg) opacity: 0;
}
 100% {
 transform: rotate(-360deg)
}
}
/**** CONTACTO **************************************/
#contacto {
	background: radial-gradient(at bottom, #222, black);
	z-index: 2;
	font-size: 14px;
}


#contacto .contDescripcion {
	transform: translate(0px, 50px);
	position: absolute;
	margin-top: 60px;
	margin-bottom: 60px;
	margin-left: 60px;
	float: left;
	width: 25vw;
	text-align: left;
	color: #7f7f7f;
	text-transform: unset;
	opacity: 0;
	line-height: 2em;
	font-size: calc(4px + .66vw);
}
footer .paddingV {
	padding: 30px 0;
	background: linear-gradient(0deg, #08553b, #1bc18a);
	z-index: 3;/* box-shadow: 0 0 65px #1bc18a inset; */
}
#contacto .icon-bubbles {
	font-size: 90px;
	color: #1bc18a
}
.formulario .fila label {
	display: block;
	width: 100%;
	padding: 10px 0;
	text-align: left;
	position: relative;
	letter-spacing: .5px;
	left: 20px;
	top: 9px;
	transition: .3s linear all;
}
.formulario .fila input, .formulario .fila textarea {
	width: 100%;
	padding: 8px 10px;
	display: block;
	border-radius: 20px;
	transition: .3s linear all;
	background-color: #222;
	border: 2px solid white;
	box-shadow: 0 0 0px #1bc18a26;
	color: white;
}
.formulario .fila textarea {
	border-radius: 20px;
}
.formulario .fila textarea:focus-visible, .formulario .fila input:focus-visible, .formulario .fila:active textarea, .formulario .fila:active input, .formulario .fila:focus textarea, .formulario .fila:focus input, .formulario .fila:hover textarea, .formulario .fila:hover input {
color: #1bc18a;
border: 2px solid #1bc18a;
box-shadow: 0 0 20px #1bc18a26;
background-color: #000;
outline: none
}
 .formulario .fila textarea::placeholder, .formulario .fila input::placeholder {
color: #666;
padding-left: 10px
}
.formulario .fila:hover input::placeholder {
color: #999;
}
.formulario .fila:hover label {
	color: #1bc18a;
	left: 10px;
}
.formFondoAnimado video {
	height: 100vh;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.formulario button {
	width: 100%;
	padding: 8px;
	display: block;
	border-radius: 20px;
	transition: .3s linear all;
	background-color: #1bc18a;
	border: none;
	font-weight: bold;
	color: #333;
	width: 60%;
	margin: auto;
	position: relative;
	top: 10px;
}
.formulario button:hover {
	background-color: #ffffff;
	color: #333333;
}
.formulario .fila {
	display: block;
	position: relative;
	clear: both;
	margin: 0 0 15px;
	width: 100%;
	max-width: 400px;
}
.formulario {
	padding: 30px 50px;
	box-shadow: 0px 0px 15px 0px #1bc18a21;
	;
	background: radial-gradient(#333333d1, #000000cf);
	backdrop-filter: grayscale(1) blur(5px);
	margin: 10px;
	border-radius: 35px;
	border: 3px solid #37413d;
	outline: none;
	color: white;
	font-weight: 500;
	transition: .4s linear all;
	opacity: 0;
	top: 100px;
	position: relative;
	transform-origin: 50% 50%;
	transform: scale(1.0) rotate(-3deg);
}
.formulario:hover {
	border: 3px solid #1bc18a;
	transform: scale(1.1);
	box-shadow: 0px 0px 25px 0px #1bc18a00;
	background: #000000cc;
}
#acerca {
	clip-path: circle(0% at 70% 50%);
	width: 100vw;
	display: block;
	opacity: 1;
	transition: .3s linear all;
}
.formFondoAnimado {
	background: black;
	z-index: 1;
	width: 36vw;
	height: 100%;
	display: block;
	position: absolute;
	border-radius: 10px;
	border-top-right-radius: 10px;
	top: 5vh;
	/*background-image: url('img/portfolio/03.jpg');*/
	background-size: cover;
	clip-path: polygon(15% 75%, 75% 75%, 75% 15%, 15% 15%);
	opacity: 0;
	transition: .3s linear all;
	filter: blur(5px) grayscale(1) brightness(0.2);
}
.row-flex {
	display: flex;
	flex-wrap: wrap;
}
.row-flex > [class*="col-"] {
	display: flex;
	flex-direction: column;
}
.col-content {
}
body {
	overflow: hidden;
	position: static;
}
footer {
	overflow: hidden;
	padding: 0 0; /* 120px 0 60px;*/
	position: relative;
	display: block;
	z-index: 21;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #222;
	text-shadow: none;
	text-align: left;
}
footer .estrella {
	animation: rotarlo 5s linear infinite;
	width: 11px;
	height: 11px;
	position: absolute;
	display: inline-block;
	background: #222;
	transition: .3s linear all;
	transform-origin: 50% 50%;
	margin: 3px 0 0;
}
footer b {
	margin-left: 16px
}
footer .paddingV:hover .estrella {
	width: 15px;
	height: 15px;
	margin: 1px 0 0 -2px;
	background: #4effc5;
}
footer::after {
	content: '';
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 200px;
	z-index: -1;
	background: linear-gradient(0deg, transparent, #282828 180px);
}
.plantillaFooter {
	padding: 0px 0 0
}
.plantillaFooter::after {
	background: linear-gradient(0deg, transparent, #000 150px);
	height: 200px;
}
 @keyframes position {
 0% {
 background-position: calc(var(--p) * 1) calc(var(--p) * 0), calc(var(--p) * -1) calc(var(--p) * 1), calc(var(--p) * 1) calc(var(--p) * -1), calc(var(--p) * -1) calc(var(--p) * 0);
}
 25% {
 background-position: calc(var(--p) * 1) calc(var(--p) * 4), calc(var(--p) * -1) calc(var(--p) * 5), calc(var(--p) * 1) calc(var(--p) * 3), calc(var(--p) * -1) calc(var(--p) * 4);
}
 50% {
 background-position: calc(var(--p) * 3) calc(var(--p) * 8), calc(var(--p) * -3) calc(var(--p) * 9), calc(var(--p) * 2) calc(var(--p) * 7), calc(var(--p) * -2) calc(var(--p) * 8);
}
 75% {
 background-position: calc(var(--p) * 3) calc(var(--p) * 12), calc(var(--p) * -3) calc(var(--p) * 13), calc(var(--p) * 2) calc(var(--p) * 11), calc(var(--p) * -2) calc(var(--p) * 12);
}
 100% {
 background-position: calc(var(--p) * 5) calc(var(--p) * 16), calc(var(--p) * -5) calc(var(--p) * 17), calc(var(--p) * 5) calc(var(--p) * 15), calc(var(--p) * -5) calc(var(--p) * 16);
}
}

@media (prefers-reduced-motion) {
.formFondoAnimado {
	animation: none;
}
}
header:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 25vh;
	background: red;
	z-index: 6;
	background: linear-gradient(0deg, black, transparent);
}
/**************************************** slide word */
.rotate {
	overflow: hidden;
}
.cuadroRotativo {
	background: linear-gradient(180deg, #1bc18a, #00ffab3d);
	transform: scale(.65);
	display: inline-block;
	width: auto;
	padding: 0 30px;
	font-size: calc(2vw + 20px);
	height: 1.5em;
	overflow: hidden;
	margin-top: 0;
	position: relative;
	z-index: 10 !important;
	cursor: default;
	user-select: none;
	opacity: 0;
	border-radius: 50px;
	font-family: "MuseoModerno", serif;
	letter-spacing: 1px;
	font-optical-sizing: auto;
	font-weight: 500;
}
.rotate span {
	display: block;
	padding: 0 30px;
	animation: rotate_words 8s ease infinite;
	overflow: hidden;
	width: auto;
	font-weight: 800;
	text-shadow: none !important;
	color: #1b1b1b;
	margin: 0 0;
	max-height: 1.5em;
	line-height: 1.5em;
	letter-spacing: -1px;
}
 @keyframes rotate_words {
 0% {
 transform: translateY(0);
}
 5% {
 transform: translateY(0);
}
 15% {
 transform: translateY(-1.5em);
}
 30% {
 transform: translateY(-1.5em);
}
 40% {
 transform: translateY(-3em);
}
 55% {
 transform: translateY(-3em);
}
 65% {
 transform: translateY(-4.5em);
}
 85% {
 transform: translateY(-4.5em);
}
 95% {
 transform: translateY(-6em);
}
 100% {
 transform: translateY(-6em);
}
}
.caballo {
	animation: dash 2s linear infinite;
	animation-fill-mode: forwards;
	stroke-dasharray: 1000px;
	stroke-dashoffset: 1000px;
}
 @keyframes dash {
 0% {
 stroke-dashoffset: 0;
 stroke-dasharray: 0;
}
 50% {
 stroke-dashoffset: 1110px;
 stroke-dasharray: 1110px;
}
}
.contactoImg {
	float: right;
	opacity: 0;
}
.datosPie .boxDato figure {
	opacity: 0;
	transition: .3s linear all;
	transition-delay: .4s;
	width: 95px;
	height: 95px;
	display: block;
	position: absolute;
	top: -50px;
	left: 0%;
}
.datosPie .boxDato figure img {
	width: 100%;
	height: auto;
	max-width: 95px;
}
.datosPie .boxDato:hover figure {
	opacity: 1;
	top: -50px;
}
.datosPie .boxDato figure:before {
	content: '';
	position: absolute;
	display: block;
	background: radial-gradient(#000000 0%, transparent 75%);
	left: 0;
	top: 0;
	width: 100%;
	height: 100px;
	z-index: -1;
}
.datosPie .boxDato {
	opacity: 0;
	background: #11111178;
	border-radius: 20px;
	padding: 40px 0;
	margin-right: 15px;
	transition: .3s linear all !important;
	position: relative;
	display: block;
	transform: scale(1) rotate(0deg);
	transform-origin: 50% 50%;
	border: 2px solid transparent;
	box-shadow: 0 0 0px #00000066;
}
.datosPie .boxDato:hover {
	transform: scale(1.2) rotate(-7deg);
	background-color: #000;
	border: 2px solid #1bc18a;
	z-index: 2;
	box-shadow: 0 0 30px #000000cc;
}
.datosPie .boxDato .icon-arrow-right {
	animation: pica 1s linear infinite;
	display: inline-block;
	position: relative;
	font-weight: normal;
}
.datosPie .cboxDato:hover .icon-arrow-right {
	font-weight: bolder;
color;
#1bc18a
}
 @keyframes pica {
 0% {
left: -8px;
}
 30% {
left: 0px;
}
 100% {
left:-8px;
}
}
.datosPie span {
	color: #ccc;
	text-shadow: unset !important;
	transition: .3s linear all;
	transform: scale(1);
	transform-origin: 50% 50%
}
.datosPie .boxDato:hover label {
	transform: scale(1.3);
}
.datosPie h4 {
	text-transform: unset !important;
}
.datosPie h4 a {
	color: #1bc18a;
	transition: .3s linear all;
	border-bottom: 2px solid transparent;
}
.datosPie h4 a:hover {
	border-bottom: 2px solid #ccc;
	color: #ffffff
}
.ubicacionPie {
	color: #ccc;
	font-size: 1.2em;
	margin-top: 2em;
	padding-left: 23px;
}
.ubicacionPie i {
	color: #1bc18a;
	font-size: 1.5em
}
/* rotativas  */
.trabajo figure {
	overflow: hidden;
}
.owl-carousel .item {
	min-height: 54vh;
	width: 100%;
	background-size: cover;
	display: block;
	animation: rotaposicion 40s ease-in infinite;
}
#portfolioItem .owl-carousel .item {
	min-height: 66vh;
}
.owl-theme .owl-nav.disabled+.owl-dots {
	position: absolute;
	margin-top: unset;
	bottom: 15px;
	left: 20px;
}
.owl-carousel .owl-item, .owl-carousel .item {
	border: unset !important;
	margin: 0 !important;
}
.scrollTop {
	position: fixed;
	bottom: 10px;
	right: 10px;
	background: #177e5ca1;
	display: inline-block;
	width: 30px;
	height: 30px;
	z-index: 432;
	text-align: center;
	padding-top: 8px;
	border-radius: 100%;
	color: #000000c4;
	font-weight: bold;
	transition: .3s linear all;
	border: 2px solid transparent;
	pointer-events: none;
	opacity: 0;
}
.scrollTop.visible {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
}
.scrollTop:hover {
	background: #177e5ca1;
	color: #fff;
	border: 2px solid #fff;
}
section {
	scroll-margin-top: 100px;
	scroll-snap-align: start;/* Ajusta según la altura de tu menú */
}
/**************/
.plantilla .footerFijo {
	position: fixed !important;
	bottom: 3%
}
.encabezado {
	clear: both;
	background: linear-gradient(180deg, #111 10%, transparent);
	display: block;
	width: 100%;
	height: 15%;
	position: fixed;
	z-index: 1;
}
body {
	transition: .3s linear all;
	transform-origin: 0% 0%;
	background-size: contain;
	background-position: 0px 0px;
	background-repeat: space;
}
body, html {
	margin: 0;
	padding: 0;
	background-color: #111;
	color: white;
	overflow-x: hidden;
}
.portfolio-wrapper {
	width: 100%;
}
.portfolio-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	position: relative;
}
.portfolio-item {
	font-size: 2.5rem;
	line-height: .8em;
	padding: 30px 0 30px;
	text-align: left;
	transition: all .5s ease;
	position: relative;
	background: #1bc08900; /*radial-gradient(#1bc08900 50%, #1bc08900); */
	overflow: hidden;
}
.MasDetallesPortfolio {
	padding: 80px 80px 0
}
.itemDetalleAnimado {
	overflow: hidden;
	will-change: clip-path, opacity;
	;
}
.itemDetallePortfolio {
	min-height: 50vh;
	margin-bottom: 40px;
	border-radius: 50px;
	display: block;
	position: relative;
	background-size: cover;
	background-position: 50% 50%;
	object-fit: cover;
}
.itemDetallePortfolio video {
	border-radius: 50px;
	overflow: hidden;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	border: 12px solid #111111;
}
.MasDetallesPortfolio .itemDetallePortfolio:nth-child(1) {
	z-index: 2;
	box-shadow: 10px 20px 84px #000000;
}
.MasDetallesPortfolio .itemDetallePortfolio:nth-child(2) {
	height: 75vh;
	margin-top: -15vh;
	z-index: 1
}
.MasDetallesPortfolio .itemDetallePortfolio:nth-child(3) {
	z-index: 1
}
.MasDetallesPortfolio .itemDetallePortfolio:nth-child(4) {
	height: 55vh;
	margin-top: -10vh;
	z-index: 0
}
/*
.MasDetallesPortfolio .itemDetallePortfolio:nth-child(4){width: calc(58.33333% - 40px);  margin-left: 40px;}


@media(max-width: 1199px){

.MasDetallesPortfolio .itemDetallePortfolio:first-child,
.MasDetallesPortfolio .itemDetallePortfolio:nth-child(4){width: 100% !important; margin-right: unset !important; margin-left:  unset !important;}

}*/

.portfolio-item .col-sm-7 {
	top: -8px;
	left: 10px;
}
.portfolio-item:after {
	content: '';
	display: block;
	width: 100%;
	background: linear-gradient(90deg, transparent 15%, #ffffff33 58%, transparent 90%);
	height: 1px;
	bottom: 0px;
	position: absolute;
}
.portfolio-item::before {
	content: '';
	display: block;
	width: 80%;
	background: radial-gradient(#ffffff33 -30%, transparent 70%);
	height: 136px;
	bottom: -115px;
	position: absolute;
	left: 10%;
	border-radius: 100%;
	transition: .3s linear all;
}
.portfolio-item:hover {
	background: #1bc08917; /* radial-gradient(#1bc08900 0%, #1bc08917);*/
	backdrop-filter: blur(11px);
}
.portfolio-item:hover::before {
	bottom: -100px;
}
.quehicimos {
    font-weight: 900;
    font-size: 1.4em;
    margin-right: 8px;
    position: relative;
    top: -1px;
    display: block;
    color: white;
    left: -20px;
    max-width: 130px;
    clear: both;
    margin-bottom: 10px;
}
/* ESTILOS PARA LA TRANSICIÓN DE FONDO */
  



.portfolio-item a {
	text-shadow: 1px 2px 6px rgba(0, 0, 0, .8);
	color: #eee;
	transition: .3s linear all;
	font-family: "MuseoModerno", sans-serif;
	letter-spacing: 0;
	line-height: 1em
}
.portfolio-item:hover big {
	color: #ffffff;
	letter-spacing: .8px
}
.portfolio-item small {
	font-size: 14px;
	text-transform: uppercase;
	color: #1bc18a;
	letter-spacing: 1px;
}
.portfolio-item figure {
	opacity: 0;
	transition: .3s linear all;
	transition-delay: .15s;
	display: block;
	border: 2px solid #fff;
	box-shadow: inset 0 0 20px #000000, 0 0 30px #19b38073;
	transform: scale(0.9) translateZ(0);
	transform-origin: 50% 50%;
	position: relative;
	float: right;
	left: 0px;
	margin-right: 2vw;
	width: 100%;
	max-width: 140px;
	background-size: cover;
	min-width: 140px;
	border-radius: 100%;
	height: 140px;
	margin: 15px;
	background-position: 50% 20%;
	clear: both;
	image-rendering: auto; /*crisp-edges;*/
	backface-visibility: hidden;
	will-change: transform, opacity;
	-webkit-font-smoothing: antialiased;
	perspective: 1000px;
}
.portfolio-item:hover figure {
	opacity: 1;
	left: 0;
	transform: scale(1.3);
	z-index: 4;
}
.portfolio-item i {
	position: relative;
	color: white;
	left: -10px;
	transition: .3s linear all;
}
.portfolio-item:hover i {
	left: 120px;
	color: #1bc18a
}
.plantilla:before {
	content: '';
	display: block;
	width: 100vw;
	height: 100vh;
	background: #000000d1;
	mix-blend-mode: multiply;
	position: fixed;
	backdrop-filter: blur(5px);
}

@media (max-width: 767px), (max-height: 479px) {
	    .follower{display: none !important;}

#acerca {
	clip-path: circle(0% at 50% 20%);
}
.tituloPrincipalSeccion3 h2, .tituloPrincipalSeccion3 h3 {
	font-size: calc(24px + 6vw);
}
.MasDetallesPortfolio iframe {
	height: 220px !important;
	min-height: 220px !important;
	max-height: 220px !important;
	border-radius: 0px !important
}
#portfolioItem svg {
	display: none
}
.MasDetallesPortfolio .itemDetallePortfolio {
	height: 220px !important;
	width: 100% !important;
	min-height: 220px !important;
	max-height: 220px !important;
	margin-top: unset !important;
	margin-bottom: 20px !important;
	/*margin-right: 40px !important;*/
	clip-path: inset(0% round 8px);
	border-radius: 8px;
	padding-right: 0;
	padding-left: 0
}
.itemDetallePortfolio video {
	border-radius: 8px;
	overflow: hidden;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	border: 6px solid #111111;
}
.trabajosDestacados .trabajo:nth-child(2) figure {
	position: relative;
	left: -30px
}
.portfolio-item {
	padding: 50px 0;
	cursor: default;
}
.portfolio-item big {
	font-size: calc(3vw + 10px);
}
.menu {
	width: 85%;
	left: 15%;
	top: 20vh
}
#redesSociales {
	bottom: 15vh;
	text-align: center;
	margin: auto;
}
#redesSociales li {
	width: 40%;
	display: inline-block;
	padding: 10px 20px;
	margin: auto;
}
#redesSociales li a {
	font-size: 20px;
	line-height: 2em;
}
#horizontal-scoll {
	padding: 10vh 0 !important;
}
.horizontal .card {
	width: 90vw;
	height: 50vh;
	background-size: cover;
}
.portfolio-item {
	text-align: center
}
.portfolio-item figure {
	width: 100%;
	margin: auto;
	opacity: 1;
	border-radius: 100%;
	max-width: 100%;
	min-width: 120px !important;
	margin: auto;
	left: unset;
	transform-origin: 50% 50%
}
.portfolio-item:hover figure {
	left: 0;
	transform: scale(1);
}
.portfolio-item .col-sm-2 {
	display: none
}
}
 @keyframes rotarfondo {
 0% {
transform: rotate(0deg);
}
 100% {
transform: rotate(360deg);
}
}
 @keyframes rotaposicion {
 0% {
background-position: 0% 0%
}
 50% {
background-position: 100% 100%
}
 100% {
background-position: 0% 0%
}
}
/* item portfolio ***********************************************/

#portfolioItem {
	font-family: 'Roboto', sans-serif;
	padding: 120px 0 0px;
	display: block;
	clear: both; /*background:radial-gradient(circle at 50% 0%, #333, #000 75%)*/
}
#portfolioItem h1 {
	font-size: calc(10px + 4vw);
	color: white;
	letter-spacing: -.3px;
	font-weight: 700;
	font-family: "MuseoModerno", sans-serif;
	text-transform: unset !important;
	text-shadow: 1px 2px 6px rgba(0, 0, 0, .6);
}
#portfolioItem .volanta {
	text-transform: uppercase;
	color: #777;
	letter-spacing: 1px;
}
#portfolioItem .volanta:after {
	content: '';
	display: block;
	width: 30px;
	height: 2px;
	background: #333;
	animation: lineaAnimada 50s infinite;
}
 @keyframes lineaAnimada {
 0% {
width: 10%
}
 30% {
width: 50%
}
 50% {
width: 80%
}
 65% {
width: 100%
}
 85% {
width: 100%
}
 100% {
width: 0%
}
}
#portfolioItem .ficha {
	clear: both;
	display: inline;
}
#portfolioItem .ficha .col-lg-6 {
	vertical-align: bottom;
}
.accesosDetalle {
	width: 80vw !important;
	max-width: 1100px;
	margin: 100px auto;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 800;
}
.accesosDetalle b {
	color: #333
}
#portfolioItem figure {
	margin: 40px auto !important;
	position: relative;
	width: 80vw !important;
	max-width: 98%;
	display: block;
	min-height: calc(320px + 20vh);
	background-size: cover;
	border-radius: 20px;
	border: 4px solid #0e4d38;
	box-shadow: 5px 8px 20px #00000070;
	vertical-align: top;
	transition: .4s ease all;
	overflow: hidden;
	clear: both;
	top: 0;
	left: 0px;
}
#portfolioItem figure:hover {
	box-shadow: 0 0 20px #1bc18a2e;
	border: 4px solid #1bc18a;
	;
}

@media (max-width: 991px) and (max-height: 480px) {
#portfolioItem figure {
	min-height: calc(320px + 10vh);
	height: calc(320px + 10vh);
}
.owl-carousel .item {
	height: calc(320px + 10vh);
}
.intro-text h1 {
	font-size: 6em;
}
.intro-text h6 {
	font-size: 1.5em;
	left: calc(50% - 70px);
}
header .intro-text {
	padding-top: 12vh;
}
.intro-text h3 {
	display: none
}
.videoIntro {
	top: -190px;
}
#placaitems .placa {
	padding: 20px;
	margin: 10px;
}
#horizontal-scoll {
	top: 15px !important;
	padding: 0 0 !important;
}
#servicios {
	padding-left: 200px;
}
#acerca .introDS p, #servicios .intro p {
	max-width: 80vw
}
.horizontal .card {
	width: 50vw;
	height: 95vh
}
.horizontal div .card:hover h3:before {
	top: 3.5vw;
}
.horizontal .card figure {
	top: 1vh
}
.horizontal:hover .card:not(:hover) {
	filter: none !important
}
}

@media (max-width: 1199px) {
#placaitems .placa {
	margin: 20px 0
}
.accesosDetalle .col-lg-4 {
	text-align: center !important;
	padding: 8px 0;
}
/*.ficha h1, .ficha .texto{text-align: center !important;}*/
}
#portfolioItem .owl-dots {
	position: absolute;
	margin-top: unset;
	bottom: 15px;
	left: 20px;
	background: #00000070;
	border-radius: 20px;
	padding-bottom: 0px;
	height: 20px;
}
#portfolioItem .owl-nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
}
#portfolioItem .owl-nav button {
	position: absolute;
	transform-origin: 50% 50%;
	margin-top: 27%;
	border: 2px solid white;
	display: block;
	background: #000000;
	font-size: 28px;
	border-radius: 40%;
	padding-right: 0px !important;
	padding-left: 0px !important;
	transition: .3s linear all;
	opacity: .8;
	text-align: center;
	width: 50px;
	height: 50px;
	padding-top: 0 !important;
	line-height: 0px;
}
#portfolioItem .owl-nav button span {
	position: relative;
	transition: .3s linear all;
	left: 0;
	top: -2px;
}
#portfolioItem .owl-nav .owl-next:hover span {
	left: 4px
}
#portfolioItem .owl-nav .owl-prev:hover span {
	left: -4px
}
#portfolioItem .owl-nav .owl-next {
	right: 8px;
	float: right;
}
#portfolioItem .owl-nav .owl-prev {
	float: left;
	left: 8px;
}
#portfolioItem .owl-nav button:hover {
	background: #fff;
	color: #333;
	opacity: 1;
}
#portfolioItem .owl-nav button:active {
	background: #1bc18a;
	color: #fff;
	opacity: 1;
	border: 2px solid #fff;
	transform: scale(.75);
}
#portfolioItem .texto {
	position: relative;
	top: 5em;
	padding-bottom: 40px;
	text-align: justify;
}

@media (max-width: 1199px) {
.tarjeta p {
	font-size: calc(8px + 1vw);
	text-align: center;
	padding: 40px 30px 0;
}
.tarjeta:hover img {
	transform: scale(.5);
	top: -25px;
	left: 63px;
}
#portfolioItem .texto {
	position: relative;
	top: 0em;
	padding-bottom: 0;
	margin-bottom: 0
}
}
#portfolioDetalle {
	background: radial-gradient(circle at 50vw -41%, #222 4%, #000000b8 85%);
	text-align: justify;
	color: #999;
	padding: 30px 0 50px !important;
	backdrop-filter: blur(11px);
}
#portfolioDetalle h3 {
	font-size: calc(10px + 2vw);
	color: white;
	letter-spacing: -.3px;
	font-weight: 700;
	font-family: "MuseoModerno", sans-serif;
	text-transform: unset !important;
	text-shadow: 1px 2px 6px rgba(0, 0, 0, .6);
}
#portfolioDetalle figure {
	max-height: 400px;
	width: 100%;
	overflow: hidden;
	background-repeat: no-repeat;
	top: -70px;
	position: relative;
	display: block;
	background-size: cover;
	margin: 40px 0;
	background-size: cover;
	border-radius: 20px;
	border: 4px solid #0e4d38;
	box-shadow: 5px 8px 20px #00000070;
	vertical-align: top;
	transition: .4s ease all;
}
.proximocliente {
	text-align: center;
	padding: 40px 0 30px
}
.proximocliente .verSiguiente small {
	font-size: clamp(.75rem, 0.275rem + 2vw, 1.1rem);
	font-weight: 800;
	text-align: right;
	padding-bottom: 10px;
	color: #333;
	padding-right: 60px;
	transition: .3s linear all;
	position: relative;
	left: 0;
	top: 0
}
hr {
	border-top-color: #eeeeee1f;
}
.proximocliente a h3 {
	margin: 0 0;
	padding: 0 0;
	line-height: 1em;
	color: #666 !important;
	transition: .3s linear all;
	margin-right: 50px;
}
.proximocliente a i {
	color: #1bc18a;
	border: 2px solid #888;
	border-radius: 50px;
	padding: 20px;
	margin-left: 10px;
	transition: .3s linear all;
	position: absolute;
	top: 0;
	font-size: 26px;
	transform: scale(1.0);
	transform-origin: 50% 50%;
}
.proximocliente a .icon-arrow-right {
	right: -20px
}
.proximocliente .verSiguiente:hover small {
	color: #1bc18a !important;
	left: -2px;
	font-size: clamp(.75rem, 0.275rem + 2vw, 1.1rem);
}
.proximocliente .verSiguiente:hover h3 {
	color: #fff !important;
	margin-right: 55px;
}
.proximocliente .verSiguiente:hover .icon-arrow-right {
	color: white;
	border-color: white;
	right: -30px;
}
.proximocliente a:hover .icon-list {
	color: white;
	border-color: white;
	transform: scale(.80);
}
.plantillaFooter:after {
	content: '';
	display: none
}
.proximocliente .volverPortfolio {
	margin-left: 100px;
	position: relative;
	font-size: clamp(.75rem, 0.275rem + 2vw, 1.1rem);
	font-weight: 800;
	color: #666;
	top: 19px;
	transition: .3s linear all;
}
.proximocliente .volverPortfolio:hover {
	color: white;
}

@media (max-width: 767px), (max-height: 479px) {
#portfolioItem .ficha {
	padding-top: 80px;
	display: block;
}
svg.linea, svg.segundas {
	display: none;
}
svg.espiral {
	display: none;
}
#portfolioItem {
	padding: 90px 20px 20px;
}
#portfolioDetalle {
	padding: 0px 0 10px !important;
}
#portfolioItem figure, #portfolioItem .owl-carousel .item {
	height: 30vh;
	min-height: 240px;
}
.proximocliente a i {
	padding: 8px
}
.proximocliente .col-sm-6 {
	width: 100%;
	text-align: center !important;
	display: block;
	position: relative;
	clear: both;
	padding: 10px;
	max-width: 300px;
	margin: auto;
}
.proximocliente .volverPortfolio {
	top: 4px;
	margin-left: 75px
}
.verSiguiente {
	display: none !important
}
#portfolioItem .owl-nav button {
	transform: scale(.7);
	margin-top: calc(41% - 25px)
}
header .intro-text {
	padding-top: 15vh
}
.menuDesplegable {
	right: 5px;
	padding: 0 0
}
.intro-text h1 {
	font-size: calc(5vw + 3em)
}
.intro-text h3 {
	font-size: calc(1vw + 8px);
	padding-bottom: 5vh;
}
.intro-text .texto1, .intro-text .texto2 {
	font-size: calc(1.25vw + 1em);
}
.navbar-brand {
	top: 0;
	left: 0
}
.navbar-brand .coin, .navbar-brand .coin img {
	width: 80px !important;
	height: 80px !important;
}
.navbar-brand .side {
	display: none
}
.intro-text:after {
	content: '';
	display: block;
	width: 100vw;
	height: 100vw;
	position: absolute;
	top: 8vh;
	z-index: 5;
	left: -3.54vw;
	border-radius: 100%;
}
.videoIntro {
	top: -60px;
	border-radius: 30rem;
	transform: translate(0px, 0px) scale(0.9, 0.9);
	clip-path: circle();
}
#placaitems .placa {
	padding: 25px 0 !important;
	max-width: 48vw !important;
	margin-bottom: 30px;
}
#placaitems .placa figure {
	width: 75px;
	height: 75px;
}
#placaitems .placa:hover figure {
	top: -35px;
}
}

@media (max-height: 879px) {
.horizontal > div{margin-top: -110px}
	.horizontal .card{max-height: 480px}
	.horizontal .card figure{top: -3vw}
	.horizontal .card h3{margin-top: 0}
.brackets-container {
	display: none !important;
}
}

@media (max-width: 479px), (max-height: 479px) {
	body {
	
	position: relative;
}
.navbar-brand {
	height: 112px;
}
/*radial-gradient(#18ab7aad 0%, transparent 69%)}*/
.menuDesplegable .menutext {
	color: #ccc
}
.brackets-container {
	display: none;
	visibility: hidden;
}
svg.linea2 {
	display: none !important;
	visibility: hidden;
}
.portfolio-item .col-sm-2 {
	display: none!important
}
.portfolio-item .col-sm-3 {
	width: 40% !important
}
.portfolio-item .col-sm-7 {
	width: 50% !important
}
.portfolio-item small {
	line-height: 1em;
	font-size: 11px;
	position: relative;
	top: -15px;
	display: inline-block;
}
.sidebar:before {
	left: 0;
	width: 100vw;
}
.horizontal:hover .card:not(:hover),  .horizontal .card:hover {
	filter: none !important;
	transform: none !important;
	scale: 1 !important;
	margin: 0 !important;
	box-shadow: none !important;
}
}
#contacto {
	min-height: 85vh;
	height: auto;
}
 @keyframes slideIn {
 from {
 transform: translateX(400px);
 opacity: 0;
}
 to {
 transform: translateX(0);
 opacity: 1;
}
}
 @keyframes slideOut {
 from {
 transform: translateX(0);
 opacity: 1;
}
 to {
 transform: translateX(400px);
 opacity: 0;
}
}
#toast-msg.hide {
	animation: slideOut 0.3s ease-out;
}

/* Responsive */
@media (max-width: 767px), (max-height: 479px) {
#toast-msg {
	top: 10px;
	right: 10px;
	left: 10px;
	max-width: none;
}
header .intro-text {
	padding-top: 30vh;
	position: relative;
}
canvas {
	max-height: 100%;max-width: 100%;
	opacity: .5
}
.tituloPrincipalSeccion {
	margin-left: 40px
}
#servicios .intro p {
	padding: 0 30px/* contacto */
}
.formFondoAnimado {
	display: none !important
}
#contacto .container .col-lg-4 {
	display: none;
}
#contacto .container .col-lg-7 {
	width: 80vw;
	margin-left: 10vw;
}
.contactoImg {/*width: 24vw;
        position: absolute;
        left: -50px;
        top: 90px;
        opacity: .5;*/
	display: none;
}
#contacto .contDescripcion {
	width: 56vw;
	font-size: 15px;
	line-height: 25px;
	margin-top: 22px;
	margin-bottom: 83px;
}
.tituloPrincipalSeccion4 h2 {
	left: 15vw
}
.datosPie {
	position: relative;
	top: 200px;
}
.datosPie .boxDato {
	left: -15px;
	background-color: #000;
	border: 3px solid #1bc18a40;
	z-index: 2;
	box-shadow: 0 0 30px #000000cc;
	margin-bottom: 30px;
	padding: 20px;
	outline: none;
}
.datosPie .boxDato figure {
	opacity: .8;
	top: -40px;
}
.ubicacionPie {
	color: #ccc;
	font-size: 11px;
	margin-top: 0;
	padding-left: 5px;
	left: -60px;
	position: relative;
	line-height: 15px;
	display: inline-block;
	margin-right: -60px;
}
.ubicacionPie img {
	transform: scale(.75);
}
.botonContacto {
	display: none
}
footer {
	padding: 0 0 50px;
}
/* redes */
#redes h2 {
	margin-top: -10px;
	color: #666;
}
/* acerca */ 

#acerca .introDS p {
	font-size: calc(12px + .5vw);
	transform: translate(0px, 0px) !important;
	width: 82vw;
	margin-left: 5vw;
	margin-top: 5vw;
	color: #333;
	letter-spacing: -0.15px;
}
.marquee__content {
	color: #1bc18a82
}
.verPortfolio {
	font-size: 14px;
	padding: 12px 24px;
	margin-bottom: 60px
}
.trabajo.right {
	display: grid
}
/* portfolio home */
.trabajo {
	height: unset;
	border-bottom: 2px dashed #252525;
	padding-bottom: 30px;
	margin-bottom: 30px;
}
.trabajo figcaption p, .trabajo figcaption h3 {
	text-align: center !important;
}
.trabajo figcaption {
	order: 2
}
.trabajo figure {
	order: 1
}
.trabajo figcaption, .trabajo figure {
	width: 80vw !important;
	min-height: unset;
	margin-left: 5vw
}
.trabajo figure .item {
	min-height: 30vh !important
}
.trabajo figcaption .verCaso {
	float: none;
	text-align: center;
	display: block;
	width: 140px;
	white-space: nowrap;
	padding: 6px 12px;
	margin: 30px auto 0;
}
#contacto {
	min-height: 80vh;
	height: auto;
}
.tarjeta {
	display: none !important
}
.horizontal .card h3 {
	font-size: calc(1.2vw + 27px);
	text-align: left;
	margin-bottom: 0
}
.horizontal .card figure {
	right: 16px;
	left: unset;
	width: 24vw;
	opacity: 0;
	top: -4vh;
}
.horizontal div .card h3:before {
	opacity: 1!important;
	top: -10vh !important;
	filter: blur(0px)!important;
	font-size: 35vw !important;
}
.horizontal .card {
	max-width: 90vw;
	padding: 65px 5vw 0;
	scroll-snap-type: block;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.footerFijo .izquierda, .footerFijo .derecha {
	float: none !important;
	position: relative;
	width: calc(100vw - 30px)
}
.footerFijo .link2, .footerFijo button {
	width: 80vw !important;
        margin: 0 auto 10px;
        text-align: center;
        padding: 5px 12px;
	
}

.footerFijo a{display: block;
padding: 11px 0px;
        margin: 0 0;
        line-height: 1em;
      }

.footerFijo {
	bottom: 15%
}
#servicios{padding: 100px 0}
}
/*******************************  scroll hint servicios */

#scroll-hint {
	position: fixed;
	right: 0.5vw;
	top: 11vh;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	opacity: 0;
	pointer-events: none;
	z-index: 9;
}
.mouse {
	width: 28px;
	height: 46px;
	border: 2px solid #fff;
	border-radius: 20px;
	position: relative;
	margin-bottom: 8px;
}
.wheel {
	width: 4px;
	height: 8px;
	background: #fff;
	border-radius: 2px;
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	animation: scrollWheel 1.4s ease-in-out infinite;
}
 @keyframes scrollWheel {
 0% {
opacity: 1;
transform: translate(-50%, 0);
}
 50% {
opacity: 0.5;
transform: translate(-50%, 8px);
}
 100% {
opacity: 1;
transform: translate(-50%, 0);
}
}
#scroll-hint p {
	font-size: 13px;
	line-height: 15px;
	max-width: 80px;
	text-align: center;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.portfolio-item .row {
	display: flex;
	align-items: center;
	min-height: 100px; /* ajusta según necesites */
}
.portfolio-item .col-sm-2 {
	display: flex;
	align-items: center;
	justify-content: center;
}
.portfolio-item i {
	color: white;
	transition: .3s linear all;/* Elimina completamente position, top y left */
}
.degradeNegro {
	content: '';
	display: block;
	position: fixed;
	width: 100vw;
	top: 0;
	left: 0;
	height: 12vh;
	user-select: none;
	pointer-events: none !important;
	background: linear-gradient(to bottom, #000000ff, #00000000);
}
.degradeNegroFooter {
	content: '';
	display: block;
	z-index: 6;
	position: fixed;
	width: 100vw;
	bottom: 0;
	left: 0;
	height: 35vh;
	user-select: none;
	pointer-events: none;
	background: linear-gradient(to bottom, #00000000, #000000ff);
}
.botAcceder {
	color: #ccc !important;
    border: 2px solid #ffffff40;
    border-radius: 50px;
    padding: 9px 15px 7px 20px;
    transition: .3s linear all;
    background: #ffffff00;;
}
.botAcceder:hover {
	color: #1bc18a !important;
	 border: 2px solid #1bc18a
}
 @view-transition {
navigation: auto;
}
 @keyframes move-out {
 0% {
transform: translateX(0%);
opacity: 1;
filter: blur(0px);
}
50% {
transform: translateX(-100%);
opacity: 1;
}
100% {
transform: translateX(-100%);
opacity: 0;
filter: blur(10px);
}
}
 @keyframes move-out2 {
 0% {
transform: translateX(0%) translateY(0%);
opacity: 1;
}
 100% {
transform: translateX(-200%) translateY(0%);
opacity: 0;
}
}
 @keyframes move-in {
from {
transform: translateX(100%) translateY(0%);
opacity: 0;
filter: blur(10px);
}
to {
transform: translateX(0%) translateY(0%);
opacity: 1;
filter: blur(0px);
}
}
 @keyframes move-in2 {
0% {
opacity: 0;;
transform: translateY(-200%);
}
80% {
opacity: 0;;
transform: translateY(-200%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}



::view-transition-old(portfolioItem) {
animation: 0.5s linear both move-out;
}

::view-transition-new(portfolioItem) {
animation: 0.5s linear both move-in;
}
.navbar-brand {
	view-transition-name: loguito !important;
	;
}
#portfolioItem {
	view-transition-name: portfolioItem
}


::view-transition-old(loguito) {
 animation: .5s ease-in both move-out2;
}


::view-transition-new(loguito) {
 animation: 2s ease-in both move-in2;
}

@media (min-width: 768px) and (max-width: 1199px) {
.menu__link {
	font-size: 7vmin;
	line-height: 14vmin;
}
.menu {
	top: 20%;
}
#placaitems {
	padding: 10px 10px 150px;
}
.tituloPrincipalSeccion3 {
	margin-left: 125px
}
#servicios .intro p {
	padding: 0 50px;
}
.horizontal .card figure {
	opacity: 1;
	width: 14vw;
	left: calc(50% - 7vw);
	top: -40px
}
.horizontal .card h3 {
	font-size: calc(2.2vw + 15px);
}
.horizontal div .card:hover h3:before {
	opacity: 1;
	top: -6.5vw;
}
.owl-carousel .item, .trabajo figure {
	min-height: 520px
}
#acerca .introDS p {
	max-width: 60vw;
	font-size: calc(15px + .5vw);
}
#redes ul li a .accesored {
	padding: 10px
}
.formFondoAnimado {
	display: none !important;
}
#contacto .container .col-lg-4 {
	display: none;
}
#contacto .container .col-lg-7 {
	width: 80vw;
	margin-left: 10vw;
	top: -60px
}
.contactoImg {
	display: none;
}
#contacto .contDescripcion {
	width: 56vw;
	font-size: 15px;
	line-height: 25px;
	margin-top: 22px;
	margin-bottom: 83px;
}
.tituloPrincipalSeccion4 h2 {
	left: unset
}
.datosPie {
	position: relative;
	top: 180px;
}
.datosPie .boxDato {
	left: -15px;
	background-color: #000;
	border: 3px solid #1bc18a40;
	z-index: 2;
	box-shadow: 0 0 30px #000000cc;
	margin-bottom: 30px;
	padding: 20px;
	outline: none;
}
.datosPie .boxDato figure {
	opacity: .8;
	top: 0px;
}
.sidebar:before {
	height: 99vh
}
.ubicacionPie {
	color: #ccc;
	font-size: 11px;
	margin-top: 0;
	padding-left: 5px;
	left: -60px;
	position: relative;
	line-height: 15px;
	display: inline-block;
	margin-right: -60px;
}
.ubicacionPie img {
	transform: scale(.75);
}
.datosPie .boxDato {
	max-width: 70vw;
	left: 0
}
.botonContacto {
	display: none
}
footer {
	padding: 0 0 80px;
}
/* redes */
#redes h2 {
	margin-top: -10px;
	color: #666;
}
.magnetic button, .magnet-button a, .footerFijo a {
	min-width: 240px !important;
	text-align: center;
	display: inline-block;
}
}
/*******************************/

/* LINEA FONDO                 */

/*******************************/
.pin-spacer {
	z-index: 1 !important
}
#servicios .container {
	position: relative;
	z-index: 2
}
svg.linea {
	position: absolute;
	user-select: none;
	pointer-events: none;
	width: 110vw;
	top: -50vw;
	left: 0;
	height: 200vw;
	z-index: 0;
}
svg.linea path {
	fill: none;
	stroke: #00e79cba;
	stroke-width: 1rem;
	stroke-miterlimit: 10;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
svg.segundas {
	position: absolute;
	user-select: none;
	pointer-events: none;
	width: 110vw;
	top: -30vw;
	left: 0;
	height: 240vw;
	z-index: 0;
}
svg.segundas path {
	fill: none;
	stroke: #ffffffcc; /* O el color que prefieras */
	stroke-miterlimit: 10;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.footerFijo .link2 .icon-arrow-left {
	position: relative;
	top: 2px;
	left: -2px;
	margin-right: 10px;
	transition: .3s linear all
}
.footerFijo .link2:hover .icon-arrow-left {
	left: -5px;
}
.gradienteverde {
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	user-select: none;
	height: 750px;
	background: linear-gradient(90deg, #1bc18aff 40%, #1bc18a00 80%);
}
#acerca {
	background: white;
}
.videoAcerca {
	position: absolute;
	top: 0;
	right: -20vw;
	object-fit: contain;
	width: 100vw;
	transform: scale(1);
	height: 80%;
	z-index: 0;
	display: block;
	user-select: none;
	margin-top: 4vw;
}

@media (min-width: 768px) and (max-width: 1199px) {
.videoAcerca {
	object-fit: cover;
	right: 0vw;
}
.gradienteverde {
	background: linear-gradient(90deg, #1bc18aff 50%, #1bc18a00 118%);
}
}
svg.carpeta {
	width: 20vw;
	height: 28vw;
	position: absolute;
	left: 11vw;
	top: -12vw;
}
svg.carpeta path {
	fill: none;
	stroke: #222222;
	stroke-width: 1rem;
	stroke-miterlimit: 10;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
svg.linea2 {
	position: absolute;
	user-select: none;
	pointer-events: none;
	width: 220vw;
	top: -10vw;
	left: 0;
	height: 250vw;
	z-index: 0;
}
svg.linea2 path {
	fill: none;
	stroke-miterlimit: 10;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
svg.linea2 #lin3 {
	stroke: #3f3f3f29;
	stroke-width: 13rem;
}
svg.linea2 #lin2 {
	stroke: #06291d7d;
	stroke-width: 3rem;
}
svg.linea2 #lin1 {
	stroke: #222;
	stroke-width: 1rem;
}

@media (max-width: 479px), (max-height: 479px) {
#portfolio .tituloPrincipalSeccion2 {
	margin-left: 16vw;
	margin-bottom: 130px;
}
#introduccion {
	min-height: 80vh
}
svg.carpeta {
	width: 38vw;
	height: 30vw;
	position: absolute;
	left: 10vw;
	top: -12vw;
}
.tituloPrincipalSeccion3 {
	margin-left: 20px
}
#acerca video {
	/* display: none !important; */
	position: relative;
	right: 0;
	z-index: 0;
	mix-blend-mode: normal;
	top: -65px;
	padding: 35px;
	background: white;
	mix-blend-mode: multiply;
	margin-bottom: -80px;
}
.tituloPrincipalSeccion3 h2, .tituloPrincipalSeccion3 h3 {
	color: #1bc18a
}
.gradienteverde {
	display: none !important
}
#redes ul li {
	line-height: 2em;
}
#acerca {
	min-height: 500px !important;
	padding: 50px 0;
	background: linear-gradient(0deg, #1bc18aff, #ffffff 60%);
}
}
/********************/



.intro-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
}
/* El contenedor de los corchetes */
.brackets-container {
	max-width: 78vw;
	display: flex;
	transition: .3s linear all;
	justify-content: center;
	align-items: center;
	gap: 15px;
	opacity: 0;
	margin-top: 25px;
	position: relative;
	/* Evitamos que el padding deforme la pelota final */
	padding: 0;
	border-radius: 0%;
	margin-bottom: 9em;
	min-height: 80px;
}
.brackets-container:hover {
	gap: 2px !important;
}
.bracket-l, .bracket-r {
	font-size: 4rem;
	font-weight: 400;
	color: #333;
	z-index: 8;
	line-height: 1;
	display: inline-block;
	position: relative;
	top: 10px;
}
.frase-final {
	display: block;
	text-align: center;
	width: auto;
	min-width: 360px;
	; /* Ajusta esto al ancho que desees para las 2 líneas */
	margin: 0 auto;
	line-height: 1.3;
}
.videoLink {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}
.videoIntro {
	display: inline-block;
	position: absolute;
	top: 45vh !important;
	left: 0;
}
/* Ocultamos los elementos inicialmente para que GSAP los controle */
.texto-oculto {
	opacity: 0;
}
/* Estilo para que las letras individuales se puedan animar bien */
.split-char {
	display: inline-block;
}
.formulario:after {
	content: '';
	top: 2em;
	position: absolute;
	left: -3em;
	background-image: url(img/derecha.gif);
	background-size: cover;
	width: 90px;
	height: 90px;
	opacity: 1;
	display: block;
	transition: .3s linear all;
}
.formulario:before {
	content: '¡Dejanos un mensaje!';
	color: #999;
	position: absolute;
	top: 8.5em;
	font-size: 2.2em;
	letter-spacing: 2px;
	/* font-style: italic; */
	font-weight: 600;
	/* text-transform: uppercase; */
	transform: rotate(270deg);
	left: -6.5em;
	opacity: 1;
	transition: .3s linear all;
}
.formulario:hover:after, .formulario:hover:before {
	opacity: 0;
	left: -5em;
	letter-spacing: 0;
}
.animate-on-scroll {
	opacity: 0;
}
.g-recaptcha {
	margin-top: 20px;
	margin-left: 5px;
	max-width: 100%;
	overflow: hidden;
}
/* ═══════════════════════════════════════════════════════════════
   ESTILOS PARA NOTIFICACIÓN TOAST
   Agregar este código a tu archivo CSS principal
   ═══════════════════════════════════════════════════════════════ */

#toast-msg {
	position: absolute;
	top: 27vh;
	left: 10vw;
	background: #19b07e;
	color: #fff;
	padding: 44px 40px;
	border-radius: 14px;
	font-size: 20px;
	z-index: 9999;
	box-shadow: 5px 6px 20px rgb(0 0 0);
	border: 4px solid white;
	min-width: 320px;
	font-weight: 600;
	z-index: 9999;
	animation: slideIn 0.3s ease-out;
	max-width: 400px;
	word-wrap: break-word;
}
#toast-msg.error {
	background: #0a312b;
}
#toast-msg.success {
	background: #2ecc71;
}

@media (max-width: 479px), (max-height: 479px) {
	.quehicimos{left: 0}
.cuadroRotativo {
	font-size: calc(4vw + 20px);
}
.intro-text h1 {
	font-size: calc(5vw + 3em);
}
.bracket-l, .bracket-r {
	top: -5px
}
.videoIntro {
	top: 55vh !important;
	transform: scale(0.7, 0.7);
	clip-path: circle();
	width: 116vw;
	height: fit-content;
	margin-left: -8vw;
}
.menuDesplegable:before {
	z-index: 5;
	content: '';
	display: block;
	position: fixed;
	top: 0px;
	right: 0px;
	width: 100vw;
	height: 10vh;
	background: linear-gradient(180deg, #000000 -70%, #00000000);
}
.menu-toggler__line {
	background: #ccc !important
}
.menuDesplegable {
	right: 15px;
	top: 24px;
	max-width: 26px;
    
}
.accesosDetalle .col-lg-4 {
	text-align: center !important;
	padding: 14px 0;
}
.MasDetallesPortfolio {
	padding: 30px 40px 0;
}
.MasDetallesPortfolio .itemDetallePortfolio:nth-child(1) {
	z-index: 2;
	box-shadow: inset 0 0 30px black;
	max-width: 220px !important;
	margin: auto;
	border-radius: 100%;
	margin-bottom: 50px !important;
	border: 2px solid #6f6f6f;
}
.accesosDetalle {
	width: 80vw !important;
	margin: 50px auto 0;
}
#portfolioItem h1 {
	font-size: calc(25px + 4vw);
	margin-bottom: 60px;
}
.portfolio-item figure {
	width: 120px;
	height: 120px;
}
.portfolio-item .col-sm-7 {
	top: -8px;
	left: -10px;
	text-align: left;
}
}

@media (max-width: 767px), (max-height: 479px) {
#horizontal-scoll {
	padding: 10vh 0 !important;
}
.horizontal .card {
	width: 90vw;
	height: 50vh;
	background-size: cover;
}
#servicios .card {
	margin-left: 5vw !important;
	opacity: 1 !important;
	transform: none !important;
	scale: 1 !important;
	height: unset !important;
	padding-bottom: 7vw;
}
.horizontal div .card h3:before {
	display: none !important
}
.horizontal-scoll-wrapper {
	height: unset !important;
}
#horizontal-scoll {
	padding: 10vh 0 0 !important;
}
.horizontal > div{margin-top: unset !important;}
.horizontal .card {
	width: 90vw;
	height: 50vh;
	background-size: cover;
}
.horizontal {
	flex-direction: column !important;
	margin: 0 auto !important;
	gap: 20px !important;
}
.horizontal > div {
	width: 100% !important;
	padding: 0 !important;
	margin-bottom: 40px;
}
.horizontal .card {
	width: 90vw !important;
	margin: 0 auto !important;
}
#scroll-hint {
	display: none !important;
}
.videoIntro,  .videoLink,  #introduccion {
	display: none !important;
}
header {
	margin-bottom: 0 !important;
	overflow: hidden;
	height: auto;
	min-height: 100vh;
	padding-bottom: 50px;
	clear: both;
	position: relative;
}
header:after {
	margin-bottom: -50px !important
}
canvas {
	overflow: hidden;
}
#placaitems {
	padding-top: 60px !important;
	display: block;
	position: relative;
	clear: both;
	z-index: 2;
	margin-top: 0;
	overflow: hidden;
}
#placaitems .placa p {
	font-size: 13px;
	line-height: 1.2em;
}
#placaitems .placa {
	border-radius: 25px;
}
}

@media (max-height: 479px) {
svg {
	display: none
}
.footerFijo .link2, .footerFijo button {
	display: none;
}
header .intro-text {
	padding-top: 20vh
}
#redesSociales {
	display: none;
}
header {
	height: 100vh;
}
#servicios {
	padding-left: 5vw;
}
#servicios .card {
	margin-left: 5vw !important;
	max-width: 85vw;
}
.horizontal .card figure {
	left: unset;
	right: 10vw
}
.owl-carousel .item, .trabajo figure {
	min-height: unset !important;
}
#acerca {
	clip-path: unset !important;
}
}
/* ========================================
   SCROLL HORIZONTAL - ANTI-JANK
   ======================================== */
#servicios{padding: 200px 0}
.horizontal-scoll-wrapper{padding-bottom: 20px;}
/* Optimizar el contenedor del scroll horizontal */
#horizontal-scoll {
	position: relative;  transition: 0s linear all;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}
/* Suavizar todas las transiciones del pin */
.pin-spacer {
	will-change: auto;
	backface-visibility: hidden;
}