: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 */
}

.trabajosDestacados .trabajo .item{min-height: 52vh;}

.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;*/
	min-height: 525px;
	height: auto;
	clear: both;
}
.horizontal {
	display: flex;
	height: auto;
	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 40px;
	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;
	position: relative;
	display: block;
}
.horizontal .card .verServicio {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.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: 45vh; height: 100%;
	width: 100%;
	background-size: cover;
	display: block;
	animation: rotaposicion 40s ease-in infinite;
}
#portfolioItem .owl-carousel .item {
	min-height: 45vh;
}
.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;
}
.pagina-servicio .scrollTop {
	z-index: 460;
}
.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: 9999;
}
@media (min-width: 992px) {
	.pagina-servicio .encabezado {
		z-index: 400;
	}
}
.pagina-servicio.menu-open .encabezado {
	z-index: 99999;
}
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.7) translateZ(0);
	transform-origin: 50% 50%;
	position: relative;
	float: right;
	left: 0px;
	margin-right: 2vw;
	width: 100%;
	max-width: 180px;
	background-size: cover;
	min-width: 180px;
	border-radius: 100%;
	height: 180px;
	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);
	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 {
	
	width: 100% !important;
	/*height: 220px !important;
	min-height: 220px !important;
	max-height: 220px !important;*/

	margin-top: unset !important;
	margin-bottom: 30px !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: 577px) {
#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
}
}

#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) {
#placaitems .placa {
	margin: 20px 0
}
.accesosDetalle .col-lg-4 {
	text-align: center !important;
	padding: 8px 0;
}
/*.ficha h1, .ficha .texto{text-align: center !important;}*/
.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
}
}
/* ===== Servicio (detalle) ===== */
#servicioItem {
	font-family: 'Roboto', sans-serif;
	padding: 60px 0 0px;
	display: block;
	clear: both;
	overflow: hidden;
	position: relative;
	background: #111;
}
#vantaBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: 1000px;
	z-index: 0;
	opacity: .4;
	mix-blend-mode: luminosity;
	pointer-events: none;
	display: none;
}
#vantaBg[data-page="diseno-grafico"], #vantaBg[data-page="estrategia"] {
	opacity: .2;
}
#vantaFade {
	position: absolute;
	top: 700px;
	left: 0;
	width: 100%;
	height: 300px;
	z-index: 0;
	pointer-events: none;
	display: none;
	background: linear-gradient(0deg, #111 0%, transparent 100%);
}
#servicioItem .container {
	position: relative;
	z-index: 450;
}
@media (min-width: 992px) {
	#vantaBg, #vantaFade {
		display: block;
	}
	#servicioItem .container {
		background: radial-gradient(at top left, #000000d1, #00000000);
		width: 80vw;
		max-width: 1800px;
		padding: 65px 80px 10px;
		border-radius: 50px;
		margin-bottom: 30px;
	}
}
#servicioItem .linea2 {
	z-index: 10;
}
#servicioItem .ficha {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#servicioItem h1 {
	font-size: calc(40px + 4vw) !important;
	font-weight: 100;
	color: white;
	letter-spacing: -.3px;
	font-family: "MuseoModerno", sans-serif;
	text-transform: unset !important;
	margin-left: -8px;
	text-shadow: rgb(15, 15, 15) 1px 1px, rgb(15, 15, 15) 2px 2px, rgb(15, 15, 15) 3px 3px, rgb(15, 15, 15) 4px 4px, rgb(15, 15, 15) 5px 5px, rgb(15, 15, 15) 6px 6px, rgb(15, 15, 15) 7px 7px, rgb(15, 15, 15) 8px 8px, rgb(15, 15, 15) 9px 9px, rgb(15, 15, 15) 10px 10px, rgb(15, 15, 15) 11px 11px, rgb(15, 15, 15) 12px 12px, rgb(15, 15, 15) 13px 13px, rgb(15, 15, 15) 14px 14px, rgba(15, 15, 15, .7) 15px 15px, rgba(15, 15, 15, .6) 16px 16px, rgba(15, 15, 15, .5) 17px 17px, rgba(15, 15, 15, .4) 18px 18px, rgba(15, 15, 15, .3) 19px 19px, rgba(15, 15, 15, .2) 20px 20px, rgba(15, 15, 15, .1) 21px 21px, rgba(15, 15, 15, .05) 22px 22px;
}
#servicioItem .volanta {
	text-transform: uppercase;
	color: #777;
	letter-spacing: 1px;
	font-size: calc(.4vw + 10px);
	margin-bottom: 30px;
}
#servicioItem .volanta:after {
	content: '';
	display: block;
	width: 30px;
	height: 2px;
	margin-top: 8px;
	background: #333;
	animation: lineaAnimada 50s infinite;
}
.breadcrumbServicio a {
	color: #777;
	transition: .3s linear color;
}
.breadcrumbServicio a:hover {
	color: #1bc18a;
}
.breadcrumbServicio .separador {
	margin: 0 8px;
	color: #444;
}
.breadcrumbServicio .actual {
	color: #1bc18a;
}
#servicioItem .ficha .texto {
	color: #ccc;
	text-align: justify;
	padding-top: 20px;
	margin-bottom: 30px;
	font-size: calc(.3vw + 15px);
	line-height: 1.6em;
}
.iconoServicio {
	text-align: center;
}
.iconoServicio img {
	max-width: 1050px;
	width: 170%;
	filter: drop-shadow(0 8px 30px #1bc18a40);
}

/* Fila Cómo trabajamos / Qué incluye */
.filaDetalle {
	display: block;
	width: 100%;
	padding: 10px 0 20px;
}
.filaDetalle + .filaDetalle {
	margin-top: 30px;
	padding-top: 50px;
	border-top: 1px solid #ffffff14;
}
.subtituloServicio {
	text-transform: uppercase;
	color: #1bc18a;
	letter-spacing: 1px;
	font-weight: 800;
	font-size: calc(.3vw + 13px);
	margin-bottom: 30px;
}
.comoTrabajamos {
	color: #999;
	width: 100%;
}
.comoTrabajamos .subtituloServicio {
	font-weight: 300;
	font-style: italic;
	font-size: calc(18px + 0.3vw);
	padding-bottom: 30px;
}
.pasosGrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 70px 30px;
}
.pasoItem {
	text-align: center;
	position: relative;
	background: linear-gradient(180deg, #1a1a1a, transparent);
	border-radius: 20px;
	padding: 20px;
	border: 1px solid #33333366;
	backdrop-filter: blur(4px);
}
.pasoItem .pasoIcono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	min-width: 56px;
	border-radius: 50%;
	color: #666767;
	font-size: 40px;
	transition: .3s linear all;
	margin: 0 auto 16px;
	position: relative;
	z-index: 1;
}
.pasoItem:hover .pasoIcono {
	color: #1bc18a;
}
/* En pantallas anchas la grilla es de 4 columnas. Con exactamente 5 pasos,
   3 columnas evitan que la última fila quede con un solo ítem suelto (3+2) */
@media (min-width: 992px) {
.pasosGrid:has(.pasoItem:nth-child(5)):not(:has(.pasoItem:nth-child(6))) {
	grid-template-columns: repeat(3, 1fr);
}
}
.pasoItem .pasoNum {
	display: block;
	color: #1bc18a;
	font-family: "MuseoModerno", sans-serif;
	font-weight: 100;
	font-size: calc(.5vw + 26px);
	margin: 14px 0 4px;
}
.pasoItem h4 {
	color: white;
	font-family: "MuseoModerno", sans-serif;
	text-transform: unset !important;
	font-weight: 700;
	font-size: calc(.2vw + 16px);
	margin: 0 0 .4em;
}
.pasoItem p {
	margin: 0;
	line-height: 1.5em;
	color: #999;
	font-size: calc(.1vw + 14px);
}

.contenidoServicio {
	color: #999;
	text-align: justify;
	width: 100%;
	margin-top: 50px;
}
.contenidoServicio h2,
.contenidoServicio h3 {
	text-transform: uppercase;
	color: #1bc18a;
	letter-spacing: 1px;
	font-weight: 800;
	font-size: calc(.3vw + 13px);
	margin-bottom: 30px;
}
.contenidoServicio p {
	margin-bottom: 1em;
	line-height: 1.6em;
}
.contenidoServicio ul,
.contenidoServicio ol {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin: 0 0 1.4em;
	padding-left: 0;
	list-style: none;
}
.contenidoServicio li {
	margin-bottom: 0;
	line-height: 1.5em;
	padding: 30px 24px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: linear-gradient(180deg, #1a1a1a, transparent);
	border: 1px solid #33333366;
	border-radius: 20px;
	transition: .3s ease all;
}
.contenidoServicio li:hover {
	border-color: #1bc18a54;
	transform: translateY(-4px);
}
.contenidoServicio li i {
	font-size: 54px;
	line-height: 1;
	color: #1bc18a;
	text-shadow: 0 0 12px #1bc18a54;
	margin-bottom: 16px;
	transition: .3s linear all;
}
.contenidoServicio li:hover i {
	text-shadow: 0 0 22px #1bc18a;
	transform: scale(1.1);
}
.contenidoServicio li strong {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.8em;
	color: white;
	font-family: "MuseoModerno", sans-serif;
	text-transform: unset !important;
	font-weight: 700;
	font-size: calc(.2vw + 15px);
	margin-bottom: 10px;
}
.contenidoServicio li span {
	display: block;
	color: #999;
	font-size: calc(.1vw + 13px);
}
.contenidoServicio strong {
	color: #1bc18a;
}
/* Separador con margen cuando "¿Qué incluye?" tiene 6 o más items */
.contenidoServicio:has(li:nth-child(6))::before {
	content: '';
	display: block;
	height: 1px;
	background: #222;
	margin: 0 40px 40px;
}

/* CTA contacto (columna central de la navegación inferior de servicio) */
.proximocliente .ctaServicio {
	text-align: center;
}

/* En tablet la grilla de pasos pasa a 3 columnas */
@media (max-width: 991px) and (min-width: 768px) {
.filaDetalle .pasosGrid {
	grid-template-columns: repeat(3, 1fr) !important;
}
.contenidoServicio ul,
.contenidoServicio ol {
	grid-template-columns: repeat(3, 1fr);
}
}

/* En mobile la grilla de pasos pasa a 2 columnas */
@media (max-width: 767px) {
.filaDetalle .pasosGrid {
	grid-template-columns: repeat(2, 1fr) !important;
}
.contenidoServicio ul,
.contenidoServicio ol {
	grid-template-columns: repeat(2, 1fr);
}
.contenidoServicio li {
	padding: 24px 12px;
}
.contenidoServicio li span {
	font-size: calc(.1vw + 12px);
	line-height: 1.2em;
}
}

@media (max-width: 767px) {
#servicioItem {
	padding: 120px 0 30px;
}
#servicioItem .ficha {
	text-align: center;
}
#servicioItem .volanta {
	text-align: left;
}
#servicioItem .ficha .col-lg-7 {
	order: 2;
}
.iconoServicio {
	order: 1;
	margin-top: 30px;
}
.iconoServicio img {
	width: 110%;
}
.filaDetalle {
	padding-top: 40px;
}
.contenidoServicio {
	text-align: left;
}
}

/* ===== Servicio (landing) - CTAs del hero ===== */
.heroCtas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 10px 0 30px;
}
.ctaPrimario,
.ctaSecundario {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #ccc;
	background-color: #111111c9;
	border: 2px solid #333;
	transition: .3s linear all;
}
.ctaPrimario {
	background: #1bc18a;
	color: black;
	font-weight: 900;
	border-color: #1bc18a;
}
.ctaSecundario:hover {
	border-color: #1bc18a54;
	color: #1bc18a;
	background-color: #0000006b;
	box-shadow: 0 0 18px #1bc18a54;
}
.ctaPrimario:hover {
	background: #16a376;
	border-color: #16a376;
	box-shadow: 0 0 18px #1bc18a54;
}


/* ===== Servicio (landing) - Proyectos destacados ===== */
.proyectosHeader {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 10px;
}
.proyectosHeader .subtituloServicio {
	margin-bottom: 0;
}
.verTodosProyectos {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #ccc;
	font-weight: 700;
	font-size: calc(.1vw + 13px);
	text-transform: uppercase;
	letter-spacing: .5px;
	transition: .3s linear color;
}
.verTodosProyectos i {
	color: #1bc18a;
	transition: .3s linear transform;
}
.verTodosProyectos:hover {
	color: #1bc18a;
}
.verTodosProyectos:hover i {
	transform: translateX(4px);
}
.proyectosGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 30px;
}
.proyectoCard {
	display: block;
	position: relative;
	background: linear-gradient(180deg, #1a1a1a, transparent);
	border: 3px solid #33333366;
	border-radius: 20px;
	overflow: hidden;
	padding: 0 0 30px;
	text-decoration: none;
	box-shadow: 0 0 30px #00000075;
	transition: .3s ease all;
}
.proyectoCard:hover {
	border: 3px solid #1bc18a54;
	box-shadow: 0 0 10px #00000075;
	transform: translateY(-4px);
}
.proyectoCard figure {
	width: 100%;
	height: 200px;
	margin: 0 0 20px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.proyectoCard h4 {
	margin: 0 20px .4em;
	color: white;
	font-family: "MuseoModerno", sans-serif;
	text-transform: unset !important;
	font-weight: 700;
	font-size: calc(.2vw + 16px);
}
.proyectoCard p {
	margin: 0 20px .8em;
	color: #999;
	line-height: 1.5em;
	font-size: calc(.1vw + 14px);
	padding-right: 50px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.proyectoArrow {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 20px;
	bottom: 20px;
	color: #1bc18a;
	font-size: 20px;
	transition: .3s linear all;
}
.proyectoCard:hover .proyectoArrow {
	opacity: 0;
	transform: translateX(60px);
}

/* ===== Servicio (landing) - Nuestro proceso (timeline horizontal) ===== */
.procesoTimeline {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px;
}
@media (min-width: 992px) {
.procesoTimeline:has(.procesoItem:nth-child(6)) {
	grid-template-columns: repeat(6, 1fr);
}
}
.procesoItem {
	position: relative;
	text-align: center;
	padding: 0 16px;
	transition: .3s ease all;
}
.procesoItem:hover {
	transform: translateY(-4px);
}
.procesoItem:hover .procesoIcono {
	text-shadow: 0 0 22px #1bc18a;
}
.procesoItem .procesoNum {
	display: block;
	color: #777;
	font-family: "MuseoModerno", sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 1px;
	margin-bottom: 12px;
}
.procesoItem .procesoIcono {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 60px;
	color: #1bc18a;
	text-shadow: 0 0 12px #1bc18a54;
	margin: 0 0 16px;
	transition: .3s linear all;
}
.procesoItem h4 {
	color: white;
	font-family: "MuseoModerno", sans-serif;
	text-transform: unset !important;
	font-weight: 700;
	font-size: calc(.2vw + 15px);
	margin: 0 0 .4em;
}
.procesoItem p {
	margin: 0;
	line-height: 1.5em;
	color: #999;
	font-size: calc(.1vw + 13px);
}

@media (max-width: 991px) {
.proyectosGrid {
	grid-template-columns: repeat(2, 1fr);
}
.procesoTimeline,
.procesoTimeline:has(.procesoItem:nth-child(6)) {
	grid-template-columns: 1fr;
	gap: 40px;
}
}

@media (max-width: 767px) {
.proyectosGrid {
	grid-template-columns: 1fr;
}
.heroCtas {
	justify-content: center;
}
}

#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 {
	display: flex;
	align-items: flex-end;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	padding: 100px 0 50px;
}
.proximocliente .verSiguiente .textoSiguiente {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}
.proximocliente .verSiguiente small {
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-align: right;
	position: relative;
	left: 4px;
	color: #666;
	transition: .3s linear all;
}
hr {
	border-top-color: #eeeeee1f;
}
/* Botones de navegación inferior (Volver/Ver todos, Contacto, Ver siguiente) */
.proximocliente a {
	display: inline-flex;
	align-items: center;
	gap: 18px;
}
.proximocliente a h3 {
	margin: 0;
	padding: 0;
	line-height: 1em;
	font-size: clamp(1.1rem, 0.4rem + 2vw, 1.6rem);
	font-weight: 800;
	letter-spacing: 1px;
	color: #ccc !important;
	transition: .3s linear all;
}
@media (min-width: 992px) {
.proximocliente .verSiguiente h3 {
	font-size: 24px;
	position: relative;
	top: -3px;
}
}
.proximocliente a i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1bc18a;
	border: 2px solid #888;
	border-radius: 50px;
	padding: 20px;
	transition: .3s linear all;
	font-size: 26px;
	flex-shrink: 0;
	transform: scale(1.0);
	transform-origin: 50% 50%;
}
#servicioItem .proximocliente .ctaServicio .icon-envelope:before {
	position: relative;
	top: -3px;
	left: 2px;
}
.proximocliente .verSiguiente:hover small {
	color: #1bc18a !important;
}
.proximocliente .verSiguiente:hover h3 {
	color: #fff !important;
}
.proximocliente .verSiguiente:hover .icon-arrow-right {
	color: white;
	border-color: white;
	transform: scale(1.1);
}
.proximocliente a:hover .icon-list,
.proximocliente a:hover .icon-envelope {
	color: white;
	border-color: white;
	transform: scale(.80);
}
.plantillaFooter:after {
	content: '';
	display: none
}
.proximocliente .volverPortfolio {
	font-size: clamp(.75rem, 0.275rem + 2vw, 1.1rem);
	font-weight: 800;
	color: #666;
	transition: .3s linear all;
}
.proximocliente .volverPortfolio:hover {
	color: white;
}

@media (max-width: 767px), (max-height: 576px) {

.trabajosDestacados .trabajo:nth-child(2) figcaption {
	margin-right: 7% !important;
	float: right;
	margin-left: 3% !important
}

#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,
.proximocliente .col-sm-4 {
	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
}
#servicioItem .proximocliente .volverPortfolio {
	margin-left: 0;
}
.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) and (min-width: 768px) {

.horizontal > div{margin-top: -110px}
	.horizontal .card{max-height: 70vh}
	.horizontal .card p {line-height:1.25em
}
	.horizontal .card figure{top: -3vw !important; max-width: 110px; left: calc(50% - 55px);}
	 #servicios .intro p {    font-size: calc(11px + .45vw); position: absolute;
    right: 0;
    max-width: 40vw;
    top: -26vh;}

	.horizontal .card h3{margin-top: 0}
.brackets-container {
	display: none !important;
}
}
/*  estaba altura*/
@media (max-width: 479px), (max-height: 576px) {
	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: 576px) {
#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 !important;
        left: -22px !important;
   
}
.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;
	display: flow-root;
}
.trabajo figcaption p, .trabajo figcaption h3 {
	text-align: center !important;
}
.trabajo figcaption {
	order: 2
}
.trabajo figure {
	order: 1
}
.trabajo figcaption, .trabajo figure {
	width: 75vw !important;
	margin-left: 5vw
}
.trabajo figure {
	min-height: 400px !important;
}
.trabajo figcaption {
	min-height: unset !important;
}
.trabajo figure .item {
	min-height: 400px !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) {

	.quehicimos{left: 0}
.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) {

.MasDetallesPortfolio .itemDetallePortfolio:nth-child(4){margin-top: unset;
}

.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: 576px) {
#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%);
}
}

/* Mismo arreglo de "Quienes somos" que en <480px, extendido hasta 767px */
@media (max-width: 767px) {
.tituloPrincipalSeccion3 h2, .tituloPrincipalSeccion3 h3 {
	color: #1bc18a;
}
.gradienteverde {
	display: none !important
}
#acerca video {
	position: relative;
	right: 0;
	z-index: 0;
	mix-blend-mode: multiply;
	top: -65px;
	padding: 35px;
	background: white;
	margin-bottom: -80px;
}
#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: 576px) {
	.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;
	max-height: 220px;
        min-height: 220px;        border: 6px solid #111111;
	margin: auto;
	border-radius: 100%;
	margin-bottom: 50px !important;
	border: 2px solid #6f6f6f; left: 20px; top: 40px;


}
	.MasDetallesPortfolio .itemDetallePortfolio:nth-child(2){margin-top: 15px !important}


.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;
}
}
#portfolioItem .owl-carousel .owl-stage-outer,
#portfolioItem figure, #portfolioItem .owl-carousel .item {
	height: 66vh;
	
}



@media (max-width: 767px), (max-height: 576px) {

.itemDetallePortfolio video{min-height: }

		.quehicimos{left: 0}
#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;
	min-height: 50vh;
	height: auto;
	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-width: 479px) {
.trabajo figure {
	min-height: 320px !important;
}
}

@media (max-height: 576px) {
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 {z-index: 1;
	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;
}



#servicioItem h1{
	animation: formarSombraSuave 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes formarSombraSuave {
  0% {
    text-shadow: rgb(15, 15, 15) 0px 0px 0px;
    transform: translate(0, 0);
  }
  100% {
    text-shadow: 
      /* Capas intermedias cada 0.5px para máxima suavidad */
      rgb(15, 15, 15) 0.5px 0.5px, rgb(15, 15, 15) 1px 1px,
      rgb(15, 15, 15) 1.5px 1.5px, rgb(15, 15, 15) 2px 2px,
      rgb(15, 15, 15) 2.5px 2.5px, rgb(15, 15, 15) 3px 3px,
      rgb(15, 15, 15) 3.5px 3.5px, rgb(15, 15, 15) 4px 4px,
      rgb(15, 15, 15) 4.5px 4.5px, rgb(15, 15, 15) 5px 5px,
      rgb(15, 15, 15) 5.5px 5.5px, rgb(15, 15, 15) 6px 6px,
      rgb(15, 15, 15) 6.5px 6.5px, rgb(15, 15, 15) 7px 7px,
      rgb(15, 15, 15) 7.5px 7.5px, rgb(15, 15, 15) 8px 8px,
      rgb(15, 15, 15) 8.5px 8.5px, rgb(15, 15, 15) 9px 9px,
      rgb(15, 15, 15) 9.5px 9.5px, rgb(15, 15, 15) 10px 10px,
      rgb(15, 15, 15) 10.5px 10.5px, rgb(15, 15, 15) 11px 11px,
      rgb(15, 15, 15) 11.5px 11.5px, rgb(15, 15, 15) 12px 12px,
      rgb(15, 15, 15) 12.5px 12.5px, rgb(15, 15, 15) 13px 13px,
      rgb(15, 15, 15) 13.5px 13.5px, rgb(15, 15, 15) 14px 14px,
      rgb(15, 15, 15) 14.5px 14.5px,
      /* Difuminado suave al final de la extrusión */
      rgba(15, 15, 15, .7) 15px 15px, rgba(15, 15, 15, .65) 15.5px 15.5px,
      rgba(15, 15, 15, .6) 16px 16px, rgba(15, 15, 15, .55) 16.5px 16.5px,
      rgba(15, 15, 15, .5) 17px 17px, rgba(15, 15, 15, .45) 17.5px 17.5px,
      rgba(15, 15, 15, .4) 18px 18px, rgba(15, 15, 15, .35) 18.5px 18.5px,
      rgba(15, 15, 15, .3) 19px 19px, rgba(15, 15, 15, .25) 19.5px 19.5px,
      rgba(15, 15, 15, .2) 20px 20px, rgba(15, 15, 15, .15) 20.5px 20.5px,
      rgba(15, 15, 15, .1) 21px 21px, rgba(15, 15, 15, .05) 21.5px 21.5px,
      rgba(15, 15, 15, .02) 22px 22px;

    transform: translate(-6px, -6px);
  }
}