.homepage .header {
    background: rgba(0, 0, 0, 1);
}

.xmain h1 {
	font-family: 'Oswald', sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
.xmain h1::after {
    margin: 0 auto;
}
.xmain h1.special {
	font-size: calc(15px + (22 - 15) * (100vw - 300px) / (1000 - 300));
	font-weight: 600 !important;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, .5);
	text-align: center;
}

.clayer h2 {
	font-family: 'Oswald', sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	color: #000;
	font-size: calc(24px + (42 - 24) * (100vw - 300px) / (1000 - 300));
	line-height: 1.3em;
	margin: 24px 0;
	text-transform: uppercase;
}

.normallayer h2 {
    font-family: 'Oswald', sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color: #000;
	font-size: calc(24px + (42 - 24) * (100vw - 300px) / (1000 - 300));
    line-height: 1.3em;
    margin: 24px 0 18px;
    text-transform: uppercase;
}
h2.circle {
	font-size: calc(24px + (54 - 24) * (100vw - 300px) / (1000 - 300));
	font-weight: 600 !important;
	line-height: 1.2em;
	margin-bottom: .3em;
}

p.titDestacado {
	flex-basis: 100%;
	font-family: 'Oswald', sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size: calc(26px + (30 - 26) * (100vw - 300px) / (1000 - 300));
	letter-spacing: 0.4px;
	color: #000;
}
p.special {
	font-family: 'Oswald', sans-serif;
	font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
	font-size: calc(30px + (52 - 30) * (100vw - 300px) / (1000 - 300));
	/*font-size:32px;*/
    font-weight: 600 !important;
    color:#F5F5F5;
    line-height: 1.4em;
    text-align: center;
  }
p.grande1 {
	font-family: inherit;
    font-style: normal;
	font-size: calc(17px + (20 - 17) * (100vw - 300px) / (1000 - 300));
	line-height: 1.5em;
    color: #e5e5e5;
	margin-bottom: 1em;
  }
p.grande2 {
	font-family: inherit;
	font-style: normal;
	font-size: calc(16px + (18 - 16) * (100vw - 300px) / (1000 - 300));
	line-height: 1.4em;
    color: #6c6c6c !important;
	/*margin-bottom: 1em;*/
  }
  
.clayer .logo img { width: 60px; }

.circle-subtitle {
  margin-top: 30px;
  font-size:32px;
  font-weight:bold;
  text-align:center;
  color:#fff;
  }
  
.xmain {
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
  
  .maincont {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }
  
.inicio1,
.inicio2 {
	position: absolute;
	top: 28%;
	left: 50%;
	z-index: 100;
	transform: translate(-50%, -50%);
	width: 84%;
	}

.inicio2 {
	top: 82%;
	}
	
/* CURSOR */
.cont2element.aparece .contelement2, .cont2element2.aparece .contelement3 {
	cursor: url(/sites/default/files/landing/icons/next.svg), auto;
}
.elemento#myCircle.expanded .contelement {
	cursor: url(/sites/default/files/landing/icons/previous.svg), auto;
}
.elemento#myCircle2.expanded .contelement2 {
	cursor: url(/sites/default/files/landing/icons/previous.svg), auto;
} 
.clayer.aparece {
	cursor: url(/sites/default/files/landing/icons/follow.svg), auto;
}
  
  .elemento { 
	width: 80px;
	height: 80px;
	background: #000;
	margin: 30px auto;
	cursor: pointer;
	clip-path: circle(45%); 
	transition: clip-path 1.2s ease;
}  

.elemento:hover {  
	clip-path: circle(70%);  
}

.elemento#myCircle.expanded {
	clip-path: circle(1600%);
}

.contelement {
	position: fixed;
	background: #000;
	background-size: cover;
	-webkit-background-size: cover;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.oculta { display: none; }
.contenidos { display: none; }
.contenidos.aparece { display: block; }

/* CUBRE LINK */
.clayer {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display:none;
}
.clayer.aparece {
  display:flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}


/* REINICIO */
.envreinicio {
	position: absolute;
	z-index: 1000;
	top: 30px;
	left: 30px;
	display: none;
   }
.envreinicio.aparece {
	display: block;
   }
.reinicio {
	width: 30px;
	height: 30px;
	background: yellow;
	clip-path: circle(50% at 50% 50%);
}


/* MESH */
.gradient-bg {
	position: fixed;
	overflow: hidden;
	width: 100%;
	height: 100%;
	filter: blur(80px) contrast(1.5)  saturate(1.2);
	opacity: 0.9;
	}

.orbe {
	position: absolute;
	border-radius: 50%;
	mix-blend-mode: lighten;
	animation: movimiento 8s infinite alternate ease-in-out;
	}

.azul {
	width: 70vw;
	height: 60vw;
	background: radial-gradient(circle, rgba(0, 66, 255, 1) 0%, transparent 50%);
	top: -40%;
	left: 10%;
	}

.morado {
	width: 80vw;
	height: 30vw;
	background: radial-gradient(circle, rgba(125, 0, 223, 1) 0%, transparent 50%);
	bottom: 20%;
	right: 5%;
	animation-delay: -5s;
	}

.cian {
	width: 60vw;
	height: 40vw;
	background: radial-gradient(circle, #0083ff 0%, transparent 50%);
	top: 35%;
	left: 15%;
	animation-delay: -2s;
	animation-duration: 14s;
	}

@keyframes movimiento {
	0% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(10vw, 5vh) scale(1.4); }
	66% { transform: translate(-5vw, 15vh) scale(0.9); }
	100% { transform: translate(0, 0) scale(1); }
	}

/* FICHAS */
.contenidos {
	position: relative;
	width: 80%;
	padding-top: 60px;
	padding-bottom: 60px;
	text-align: center;
	}
.contenido {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 100vh; */
    gap: 20px;
    margin-top: 60px;
    margin-bottom: 60px;
	}

.ficha {
	width: 240px;
	/*height: 150px;*/
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
    overflow: hidden;
	padding: 12px 2px;
	color: #f5f5f5;
	}
	
.ficha:hover {
    transform: translateY(-10px) scale(1.02);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
                0 0 20px rgba(255, 255, 255, 0.05);
	}

.ficha::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent );
	transition: 0.6s;
    }

.ficha:hover::before {
    left: 100%;
	}
	
.ficha h3 {
	font-family: 'Oswald', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: calc(20px + (20 - 20) * (100vw - 300px) / (1000 - 300));
	letter-spacing: 1px;
	color: #f5f5f5;
    margin-bottom: 0;
}
.ficha h3:hover {
    color: #fff;
	}

.ficha1 h3::before {
    background-image: url(/sites/default/files/landing/icons/branding.png);
}
.ficha2 h3::before {
    background-image: url(/sites/default/files/landing/icons/graphic.png);
}
.ficha3 h3::before {
    background-image: url(/sites/default/files/landing/icons/dev.png);
}

.ficha h3::before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 4px;
    vertical-align: middle;
}

.ficha h3 a {
	color: #f5f5f5da;
	text-decoration: none;
}

.ficha h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.ficha:hover h3 a,
.ficha h3 a:hover {
	color: #fff;
}


/* NORMALLAYER */
.normallayer {
  position: relative;
  width: 100%;
  /*height: 100vh;*/
  padding-top: 100px;
  padding-bottom: 100px;
  color: #a1a1a1;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  display:none;
}
.normallayer.aparece {
  /*display:block;*/
  display: flex;
  flex-direction: column;
  justify-content: normal;
  align-items: center;
}

.normallayer .content {
  width: 70%;
  margin: 0 auto;
  scroll-snap-align: start;
}

 /* COL-DOS */
.normallayer .col-dos {
	display: flex;
	justify-content: center;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.normallayer .col-dos .fnd-img {
	position: relative;
	width: 100%;
	max-width: 32%;
	height: 102px;
	overflow: hidden;
	
	background-image: url("/sites/default/files/landing/img/elevacion2.png");
	background-size: 400px;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.fnd-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; 

  /* Sintaxis: inset X Y difuminado expansión color */
  box-shadow: inset 0 0 .2vw .2vw rgba(255, 255, 255, 1), inset 0 0 1.2vw 1.2vw rgba(255, 255, 255, 1);
  }
  
  
/* COL-TRES */
  .normallayer .col-tres {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	width: 100%;
	gap: 20px;
	margin: 2px 0 40px;
}
  .normallayer .col-tres .item {
	flex: 1; 
	background: #1e1e1e;
	color: #f5f5f5;
	width: 33%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	padding: 18px;
	cursor: pointer;
	transition: background 0.4s ease;
}
.normallayer .col-tres .item:hover {
    background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow:
	0 1px 1px hsl(0deg 0% 0% / 0.075),
	0 2px 2px hsl(0deg 0% 0% / 0.075),
	0 4px 4px hsl(0deg 0% 0% / 0.075),
	0 8px 8px hsl(0deg 0% 0% / 0.075),
	0 16px 16px hsl(0deg 0% 0% / 0.075);
}
.normallayer .col-tres .item h3 { color: #0CA8F1; margin-bottom: .5em; }
.normallayer .col-tres .item:hover h3 { color: #049ADF; }
.normallayer .col-tres .item p { line-height: 1.4em; margin: 0; }
.normallayer .col-tres .item:hover p { color: #6c6c6c; }

	
/* BOTON CTA */
.btn-cta {
  font-family: 'Oswald', sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: calc(20px + (20 - 20) * (100vw - 300px) / (1000 - 300));
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #fff;
  text-align: center;
  padding: 12px 20px;
  width: fit-content;
  margin: 35px auto;
  background: #008DD0;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.4s ease;
}
.btn-cta::after {
	content: "Hablemos de tu proyecto";
	position: absolute;
    margin-top: 20px;
    transform: translate(25%);
    display: block;
    color: #4a4a4a;
    font-weight: 400;
    font-size: .7em;
}
.btn-cta:hover {
  color: #008DD0;
  background: #fff;
	box-shadow:
	0 1px 1px hsl(0deg 0% 0% / 0.075),
	0 2px 2px hsl(0deg 0% 0% / 0.075),
	0 4px 4px hsl(0deg 0% 0% / 0.075),
	0 8px 8px hsl(0deg 0% 0% / 0.075),
	0 16px 16px hsl(0deg 0% 0% / 0.075);
}
.btn-cta:active {
  /*background: #fff;*/
}
.btn-cta:hover a {
  color: #008DD0;
}
.btn-cta a {
	text-decoration: none;
	color: #fff;
}

/* COLORIZADO */
.colorizado {
	color: #008DD0; /* Sobre fnd claro */
}
.colorizado2 {
	color: #00CCFF; /* Sobre fnd oscuro */
}

/* ANIMACIONES */
.inicio1 .special span.springy-a {
	animation: spr1a .4s ease-in-out .5s both !important;
	}
	
	@keyframes spr1a {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
	
.inicio1 .special span.springy-b {
	color: #00CCFF !important;
	animation: spr1b 1.2s ease-in-out .9s both;
	}
	
	@keyframes spr1b {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
	
.inicio1 .springy-c {
	animation: spr1c 1.2s ease-in-out 1s both;
	}
	
	@keyframes spr1c {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
	
	
/* SPRINGY1 */
span.springy1 {
	animation: spr0 .6s ease-in-out 2s both;
}

@keyframes spr0 {
	0% {
		font-size: 0px;
		color: rgba(255, 255, 255, 0);
	}
	30% {
		color: rgba(255, 255, 255, 1);
	}
	80% {
		color: rgba(255, 255, 255, 1);
	}
	100% {
		color: rgba(255, 255, 255, .6);
	}
    }
	
/* SPRINGY1 LINEA ANIMADA */
h1.special span.springy1::after {
    content: "";
    position: absolute;
    top: 120%;
    left: 20%;
    width: 60%;
    height: 3px;
    background: url(/sites/default/files/landing/icons/linea.svg) no-repeat center bottom / contain;
	transform-origin: center center;
	animation: spr3 .4s ease-in-out 2.4s both;
}
	
@keyframes spr3 {
	0% {
		transform: scaleX(0);
	}
	50% {
		transform: scaleX(1.6);
	}
	75% {
		transform: scaleX(0.3);
	}
	100% {
		transform: scaleX(1);
	}
    }
	
/* CREATIVAS */
span.creativas {
	animation: creativas 0.3s ease 1s both;
}

@keyframes creativas {
	0% {
		color: rgba(255, 255, 255, .5);
	}
	100% {
		color: rgba(255, 255, 255, 1);
	}
    }
	
/* LOGO ANIMADO */
.clayer .logo img {
    transform-origin: center center;
	animation: logo 0.4s ease 1.1s both;
}
	
@keyframes logo {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
    }
	
/* IMPULSAMOS */
p.impulsamos {
	/*color: rgba(255, 255, 255, .5);*/	
	animation: impulsamos 0.3s ease 1.3s both;
}

@keyframes impulsamos {
	0% {
		color: rgba(255, 255, 255, 0);
	}
	100% {
		/*rgba(255, 255, 255, .7);*/
	}
    }
	
/* SPRINGY2 */
span.springy2 {
	position: relative;
	display: inline-block;
	animation-name: spr2;
	animation-duration: .7s;
	animation-timing-function: ease;
	animation-delay: 1.8s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	}
	
	@keyframes spr2 {
      0% {
		color: rgba(255, 255, 255, 0);
      }
      100% {
		color: rgba(255, 255, 255, 1);
      }
    }
	
/* SPRINGY2 LINEA ANIMADA */
span.springy2::after {
    content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 6px;
	background: url('/sites/default/files/landing/icons/linea.svg') no-repeat center bottom / contain;
  
	transform-origin: left center;
	animation: spr4 1s ease 2s both;
}
	
@keyframes spr4 {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
    }
	
/* FICHAS ANIMACION */
.ficha1 {
	animation: ficha1 .3s ease-in-out 3.2s both;
}
.ficha2 {
	animation: ficha2 .3s ease-in-out 3.4s both;
}
.ficha3 {
	animation: ficha3 .3s ease-in-out 3.6s both;
}
	
@keyframes ficha1 {
	0% {
		opacity: 0;
		transform: translate(0, 100px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
    }
	
@keyframes ficha2 {
	0% {
		opacity: 0;
		transform: translate(0, 100px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
    }
	
@keyframes ficha3 {
	0% {
		opacity: 0;
		transform: translate(0, 100px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
    }
	
/* NORMALLAYER ANIMACION */
.normallayer span.imp1, .normallayer span.imp2, .normallayer span.imp3 {
	opacity:0;
	}
.normallayer .col-dos, .normallayer .col-tres, .normallayer .col-cta {
		opacity:0;
	}

.normallayer.activo span.imp1 {
	animation: imp1 .5s ease-in-out .1s both;
	}
	
	@keyframes imp1 {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
	
.normallayer.activo span.imp2 {
	animation: imp2 .5s ease-in-out .2s both;
	}
	
	@keyframes imp2 {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
	
.normallayer.activo span.imp3 {
	animation: imp3 .5s ease-in-out .7s both;
	}
	
	@keyframes imp3 {
      0% {
        opacity:0;
		font-size: 0;
      }
      100% {
        opacity:1;
      }
    }
	
/* NORMALLAYER COL-DOS */
	.normallayer.activo .col-dos {
		animation: coldos .5s ease-in-out 2s both;
	}
	
	@keyframes coldos {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
	
/* NORMALLAYER COL-TRES */
	.normallayer.activo .col-tres {
		animation: coltres .5s ease-in-out 2.5s both;
	}
	
	@keyframes coltres {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
	
/* NORMALLAYER COL-CTA */
	.normallayer.activo .col-cta {
		animation: colcta .5s ease-in-out 3.2s both;
	}
	
	@keyframes colcta {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }


/* QUERIES */
@media (max-width: 780px) {
	.clayer .logo img { width: 50px; }
	.contenidos { padding-top: 90px; }
	.contenido { flex-direction: column; }
	.ficha { width: 84vw; padding-top: 10px; }
	.ficha h3::before { margin-right: 10px; }
	.ficha:hover { transform: translateY(0px) scale(1.02); }
	.gradient-bg { filter: blur(50px) contrast(1.5)  saturate(2.0); }

.azul {
    width: 90vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(0, 66, 255, 1) 0%, transparent 75%);
    top: -10%;
    left: 10%;
	}
.morado {
    width: 80vw;
    height: 40vw;
    background: radial-gradient(circle, rgba(125, 0, 223, 1) 0%, transparent 75%);
    bottom: 20%;
    right: 5%;
    animation-delay: -5s;
	}
.cian {
	width: 80vw;
	height: 40vw;
	background: radial-gradient(circle, #0083ff 0%, transparent 55%);
	top: 35%;
	left: 15%;
	animation-delay: -2s;
	animation-duration: 14s;
	}
.normallayer {
	height: 100vh;
	/*overflow-y: auto;*/
	padding-top: 40px;
	padding-bottom: 80px;
	scroll-snap-type: none;
}
.normallayer .col-dos { flex-direction: column-reverse; }
.normallayer .col-dos.no-reverse { flex-direction: column; }
.fnd-img { max-width: 100% !important;
	height: 140px !important;
	background-size: 550px !important; }
.fnd-img::after {
	box-shadow: inset 0 0 .5vw .5vw rgba(255, 255, 255, 1), inset 0 0 3vw 3vw rgba(255, 255, 255, 1);
  }
.normallayer .col-tres { flex-direction: column; }
.normallayer .col-tres .item { width: 100%; }
.normallayer .btn-cta { opacity: 1 !important; }
}
	
@media (min-width: 680px) {
  h2 .linea-dos {
    display: block; /* Fuerza a una nueva línea */
  }
}


@media (max-width: 680px) {
	@keyframes imp3 {
      0% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
}

	
@media (max-width: 360px) {
h1.special {
    font-size: calc(14px + (22 - 14) * (100vw - 300px) / (1000 - 300));
}
.gradient-bg {
    filter: blur(30px) contrast(1.5)  saturate(2.2);
	}
.azul {
    width: 90vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(0, 66, 255, 1) 0%, transparent 75%);
    top: 10%;
    left: 10%;
	}
.morado {
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(125, 0, 223, 1) 0%, transparent 75%);
    bottom: 30%;
    right: 5%;
    animation-delay: -5s;
	}
.cian {
	width: 90vw;
	height: 80vw;
	background: radial-gradient(circle, #0083ff 0%, transparent 55%);
	top: 35%;
	left: 15%;
	animation-delay: -2s;
	animation-duration: 14s;
	}
.contenido {
    gap: 12px;
    margin-top: 30px;
}
.ficha { padding: 10px 20px; }
.ficha h3 { text-align: left; }
.normallayer .content { width: 76%; }
	}