@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

:root {
	--page-w: 75.5rem;

	--fon-t: "Fira Code", monospace;
	--fon-h: "Fira Code", monospace;

	--sca-t: .875rem;
	--sca-h: 1rem;
	--sca-lh: 1.3em;
	--sca-mar: 1rem;
	--sca-pad: 2rem;

	--ratio: .3125;

	--fon-w1: 300;
	--fon-w5: 300;
	--fon-w7: 500;
	--fon-w9: 700;

	--col-dar: #e5e7eb;
	--col-dar-op25: #e5e7eb44;
	--col-bg: #0f172a;
	--col-lig: #1e2a3b;
	--col-sep: #64748b;

	--col-pri: #478beb /*#d8b4fe*/;
    --col-pri-op75: #478beb66;
    --col-pri-bg: #335d99 /*#d8b4fe*/;
    --col-acc: #478beb;
    --col-acc-bg: #335d99;

    --col-1: #FBE44E;
    --col-2: #2ED185;
    --col-3: #8D74F8;

	--col-red: #F03D3E;
	--col-gre: #007B40;

	--col-grad-v: linear-gradient(180deg, var(--col-dar) 0%, var(--col-pri) 100%);

	--rad-s: .25rem;
	--rad-m: .5rem;
	--rad-l: .5rem;
	--rad-bt: .5rem;

	--sha-s: none;
	--sha-m: none;
	--sha-l: none;
	--sha-i: inset 0 .125rem .25rem 0 var(--col-dar-op25);

	--ani-f: all 500ms cubic-bezier(.7,0,.3,1);
}

.main h2 + p, .main p.emph {
	font-size: 1.125rem;
	color: #98a4b5;
}
.main h3 {
	font-weight: 300;
}
.main h6 {
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 300;
	letter-spacing: .5em;
	position: relative;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	color: var(--col-sep);
}
.main h6:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50% , 50%);
	width: .5rem;
	height: .5rem;
	background-color: var(--col-2);
	box-shadow: -1.5rem 0 0 0 var(--col-1), 1.5rem 0 0 0 var(--col-3);
}
.main .col h6:after {
	left: 0;
	transform: translate(1.5rem , 50%);
}
.bt {
	font-size: 1rem;
	font-weight: 600;
}

.barra-container {
  background-color: #0f172a;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  inset: 0;
  z-index: 10;
}

.barra {
  flex:1;
  background-size: 200% 200%;
  animation: moveGradient ease infinite;
  position: relative;
}

/* Gradientes aleatorios */
.barra-25 {
  width: 25vh;
  animation-duration: 20s;
  background-image: linear-gradient(90deg, #FBE44E, #8D74F8, #0f172a, #2ED185);
}
.barra-50 {
  width: 50vh;
  animation-duration: 35s;
  background-image: linear-gradient(90deg, #2ED185, #0f172a, #FBE44E, #8D74F8);
}
.barra-75 {
  width: 75vh;
  animation-duration: 30s;
  background-image: linear-gradient(90deg, #8D74F8, #2ED185, #FBE44E, #0f172a);
}
.barra-100 {
  width: 100vh;
  animation-duration: 25s;
  background-image: linear-gradient(90deg, #0f172a, #FBE44E, #8D74F8, #2ED185);
}

/* Animación del gradiente */
@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

picture,
.section.bg {
	position: relative;
}
picture::after,
.section.bg::after,
.barra::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #0f172a 1px, transparent 0);
  background-size: 3px 3px;
  pointer-events: none;
  z-index: 15;
  mix-blend-mode: multiply;
}

.branding svg {
	height: 3rem;
}
.header ul a,
.header ul a.bt {
	font-size: .875rem;
	margin-top: .25rem;
	line-height: 2.5rem;
}

.header {
	padding: 1.5rem 0;
	background: #0f172aaa;
	backdrop-filter: blur(1rem);
}
.section.featured {
	padding: 0;
	margin-top: 0;
	height: 100vh;
	position: relative;
}
.section.featured .page {
	position: relative;
	z-index: 20;
}
.section.featured .content {
	padding: 0;
	margin: 0;
	text-align: left;
	max-width: 75vh;
}
.section.featured h1,
.section.featured p {
	max-width: 100%;
	margin-left: 0;
	text-wrap: balance;
}
.section.featured h1 {
	font-weight: 300;
}
.section.featured h1 span {
	background: var(--col-1);
	color: #000;
	display: inline-block;
	line-height: 1em;
}
.section.featured h1 span:nth-child(2) {
	background: var(--col-2);
}
.section.featured h1 span:nth-child(3) {
	background: var(--col-3);
}
.featured h1 + p {
	font-size: 1.25rem;
}
.featured .bt {
	margin-top: 2.5rem!important;
}

#empresas {
	margin-top: calc(var(--sca-pad) * -2);
	padding: 3rem 0;
	white-space: nowrap;
	text-align: center;
	overflow: hidden;
}
@media(min-width: 960px) {
	#empresas {
		height: 25vh;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
#empresas img {
	max-width: 10000%;
	height: 4rem;
	display: inline;
}

@media (min-width: 960px) {
	#que-es-fieldata {
		padding-bottom: 0;
		margin-bottom: calc(var(--sca-pad) * 3);
		padding-top: 0;
		margin-top: calc(var(--sca-pad) * 3);
		position: relative;
	}
	#que-es-fieldata picture {
		position: absolute;
		left: calc(50vw + .625rem);
		top: 1rem;
		right: 1rem;
		bottom: 0rem;
		z-index: 1;
	}
	#que-es-fieldata picture img {
		display: block;
		width: 75%;
		margin-left: 25%;
		height: 100%;
		object-fit: cover;
		object-position: center right;
	}
	#que-es-fieldata picture img:nth-child(2) {
		width: 50%;
		height: auto;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		z-index: 30;
	}
	#que-es-fieldata picture img:nth-child(3) {
		z-index: 40;
	}
}

#servicios {
	background-image: url(../images/texture-bg.jpg?1);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
#servicios h5 {
	margin-right: -1rem;
}
#servicios svg {
	height: 8rem;
	display: block;
	width: auto;
	margin-bottom: .5rem;
	fill: var(--col-sep);
	text-indent: -.25rem;
}
#servicios p + svg {
	margin-top: 3rem;
}

.composicion {
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 1px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
  	grid-template-rows: repeat(3, 1fr);
	gap: 1px;
	box-sizing: border-box;
}
.composicion-cuadrados {
  background-image: linear-gradient(90deg, #fdf7bb, #fbe44e);
}

.composicion .figura {
  position: relative;
  background-size: 200% 200%;
  animation: moveGradient 10s ease infinite;
  overflow: hidden;
}

@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.composicion-cuadrados .figura:nth-child(1) { background-image: linear-gradient(90deg, #fdf7bb, #fbe44e); }
.composicion-cuadrados .figura:nth-child(2) { background-image: linear-gradient(90deg, #fbe44e, #d9c93e); }
.composicion-cuadrados .figura:nth-child(3) { background-image: linear-gradient(90deg, #d9c93e, #b8ad31); }
.composicion-cuadrados .figura:nth-child(4) { background-image: linear-gradient(90deg, #b8ad31, #fdf7bb); }
.composicion-cuadrados .figura:nth-child(5) { background-image: linear-gradient(90deg, #fbe44e, #fdf7bb); }
.composicion-cuadrados .figura:nth-child(6) { background-image: linear-gradient(90deg, #d9c93e, #fbe44e); }
.composicion-cuadrados .figura:nth-child(7) { background-image: linear-gradient(90deg, #b8ad31, #d9c93e); }
.composicion-cuadrados .figura:nth-child(8) { background-image: linear-gradient(90deg, #fdf7bb, #b8ad31); }
.composicion-cuadrados .figura:nth-child(9) { background-image: linear-gradient(90deg, #fbe44e, #d9c93e); }

.composicion-circulos {
  background-image: linear-gradient(90deg, #a9f2d2, #2ed185);
}

.composicion-circulos .figura {
  border-radius: 50%;
}

.composicion-circulos .figura:nth-child(1) { background-image: linear-gradient(90deg, #a9f2d2, #2ed185); }
.composicion-circulos .figura:nth-child(2) { background-image: linear-gradient(90deg, #2ed185, #25a76a); }
.composicion-circulos .figura:nth-child(3) { background-image: linear-gradient(90deg, #25a76a, #1e7f52); }
.composicion-circulos .figura:nth-child(4) { background-image: linear-gradient(90deg, #1e7f52, #2ed185); }
.composicion-circulos .figura:nth-child(5) { background-image: linear-gradient(90deg, #2ed185, #a9f2d2); }
.composicion-circulos .figura:nth-child(6) { background-image: linear-gradient(90deg, #25a76a, #2ed185); }
.composicion-circulos .figura:nth-child(7) { background-image: linear-gradient(90deg, #1e7f52, #25a76a); }
.composicion-circulos .figura:nth-child(8) { background-image: linear-gradient(90deg, #a9f2d2, #1e7f52); }
.composicion-circulos .figura:nth-child(9) { background-image: linear-gradient(90deg, #2ed185, #25a76a); }


.composicion-triangulos {
  background-image: linear-gradient(90deg, #d1c6fd, #8d74f8);
}

.composicion-triangulos .figura {
  position: relative;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.composicion-triangulos .figura:nth-child(1) { background-image: linear-gradient(90deg, #d1c6fd, #8d74f8); }
.composicion-triangulos .figura:nth-child(2) { background-image: linear-gradient(90deg, #8d74f8, #6c59d2); }
.composicion-triangulos .figura:nth-child(3) { background-image: linear-gradient(90deg, #6c59d2, #503faa); }
.composicion-triangulos .figura:nth-child(4) { background-image: linear-gradient(90deg, #503faa, #8d74f8); }
.composicion-triangulos .figura:nth-child(5) { background-image: linear-gradient(90deg, #8d74f8, #d1c6fd); }
.composicion-triangulos .figura:nth-child(6) { background-image: linear-gradient(90deg, #6c59d2, #8d74f8); }
.composicion-triangulos .figura:nth-child(7) { background-image: linear-gradient(90deg, #503faa, #6c59d2); }
.composicion-triangulos .figura:nth-child(8) { background-image: linear-gradient(90deg, #d1c6fd, #503faa); }
.composicion-triangulos .figura:nth-child(9) { background-image: linear-gradient(90deg, #8d74f8, #6c59d2); }


#numeros {
	background-color: var(--col-2);
}
#numeros .barra {
	width: 100%;
	animation-duration: 20s;
 	background-image: linear-gradient(90deg, #FBE44E, #8D74F8, #2ED185);
}
#numeros .page {
	position: relative;
	z-index: 10;
}
#numeros h2 {
	font-size: 5rem;
	font-weight: bold;
	line-height: 1em;
	margin-bottom: 0;
}
#numeros h2 + p {
	font-size: 1.25rem;
	margin: 0;
	color: inherit;
}

#quienes-somos .col2 {
	text-align: center;
}
#quienes-somos .col2 picture {
	width: 7.5rem;
	max-width: 75%;
	margin: 0 auto 1rem;
	position: relative;
	z-index: 1;
	padding: .5rem;
}
#quienes-somos .col2 picture:before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 100rem;
	background-image: linear-gradient(90deg, #FBE44E, #2ED185, #8D74F8);
	z-index: -1;
}
#quienes-somos .col2 picture:after {
	display: none;
}
#quienes-somos .col2 picture img {
	display: block;
	border-radius: 100rem;
	box-shadow: 0 0 0 .25rem var(--col-lig);
}
#quienes-somos .col2 h4 {
	font-size: 1.125rem;
	font-weight: 500;
	margin-bottom: 1.5rem;
}
#quienes-somos .col2 .bt-text {
	text-decoration: none;
	border-bottom: solid 1px var(--col-acc);
}

.card picture {
	margin: calc(var(--sca-pad)*-1) calc(var(--sca-pad) * -1.0625) var(--sca-pad);
}

#contacto h5 {
	color: var(--col-sep);
}
#contacto .social a {
	background: var(--col-sep);
}

.footer {
	border: none;
	background-color: #000;
}

@media (max-width: 960px) {
	.page {
		padding: 0 2rem;
	}
	.section.featured .content {
		top: 7.5rem;
		transform: none;
	}
	.barra-container {
		justify-content: end;
	}
	.featured .barra {
		flex:none;
		height: 25vw;
	}
	.barra-25 {
	  width: 25vw;
	}
	.barra-50 {
	  width: 50vw;
	}
	.barra-75 {
	  width: 75vw;
	}
	.barra-100 {
	  width: 100vw;
	}
	.section.featured h1 {
		font-size: 7.5vw;
		margin-right: -1rem;
	}
	.section.featured p {
		font-size: 1rem;
	}
	.section.featured .bt {
		font-size: .875rem;
	}
	.main .col > picture,
	.main .card {
		margin-left: -.75rem;
		margin-right: -.75rem;
	}
}