@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

	--fon-t: "Inter", serif;
	--fon-h: "Inter", serif;

	--ratio: .35;

	--fon-w1: 200;
	--fon-w5: 400;
	--fon-w7: 500;
	--fon-w9: 700;

	--col-dar: #191918;
	--col-dar-op25: #19191844;
	--col-bg: #ffffff;
	--col-lig: #f6f5f4;
	--col-sep: #e7e7e7;
	--col-pri: #3f67dd;
	--col-pri-op75: #3f67ddBF;
	--col-pri-bg: #3f67dd;
	--col-acc: #3f67dd;
	--col-acc-bg: #3f67dd;
	--col-alt: #d8ff00;

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

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

}

.header {
	box-shadow: 0 .125rem .25rem -.125rem rgba(0,0,0,.2);
}
.branding {
	font-family: var(--fon-h);
}
.branding span {
	color: inherit;
	font-weight: normal;
}
.section.featured {
	text-align: left;
	background-position: 75% 50%;
	border-radius: 0 0 var(--sca-pad) var(--sca-pad);
}
.section.featured h1 {
	font-weight: normal;
	line-height: 1.1em;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(3rem);
	animation: fadeInUp 400ms ease forwards;
	animation-delay: 200ms;
}
.section.featured h1 strong {
	font-weight: var(--fon-w9);
}
.section.featured h1 span.br {
	display: block;
}
.section.featured p {
	max-width: 27em;
	opacity: 0;
	transform: translateY(3rem);
	animation: fadeInUp 400ms ease forwards;
	animation-delay: 300ms;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0rem);
  }
}
.section.featured .bt {
	border: none;
}
.section.featured .bt i {
	color: var(--col-alt);
}
.section.featured .bt:hover {
	background: var(--col-pri);
	color: var(--col-bg);
}
.section.featured .bt:hover i {
	color: inherit;
}
.highlight {
	display: inline-block;
	position: relative;
	z-index: 1;
}
.highlight:before {
	content: '';
	position: absolute;
	left: -.125em;
	bottom: .125em;
	right: -.125em;
	height: .375em;
	z-index: -1;
	background: var(--col-alt);
}
.featured .highlight:before {
	background: var(--col-pri);
}
#sobre-mi picture img {
	border-radius: calc(var(--sca-pad)*.5);
}
#sobre-mi .col5 {
	position: relative;
	z-index: 10;
}
@media (min-width:960px) {
	#sobre-mi {
		padding-top: calc(var(--sca-pad)* 2);
		padding-bottom: calc(var(--sca-pad)* 2);
	}
	#sobre-mi img {
		height: 60vh;
		object-fit: cover;
		object-position: 25% 50%;
	}
	#sobre-mi .col:first-child picture {
		margin-right: calc(var(--sca-pad)*-2);
	}
}
#trayectoria {
	background: var(--col-dar);
	position: relative;
}
#trayectoria .dec {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: var(--sca-pad);
	background: var(--col-bg);
	top: 0;
	border-radius: 0 0 var(--sca-pad) var(--sca-pad);
}
#trayectoria .dec + .dec {
	top: auto;
	bottom: 0;
	transform: rotate(180deg);
	transform-origin: 50% 50%;
}
#trayectoria .dec:after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%) rotate(180deg);
	top: 100%;
	margin-top: -1px;
	width: 5rem;
	height: 3rem;
	background-image: url("data:image/svg+xml,%3Csvg width='79' height='32' viewBox='0 0 79 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38.4854 1.42156C34.7799 18.7783 18.9105 31.7033 0.448242 31.7033H78.5153C60.053 31.7033 44.1919 18.7764 40.4781 1.42156C40.1856 0.0532153 38.7865 0.00966859 38.4854 1.42156Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
}
#trayectoria .col {
	margin-bottom: 2rem;
}
#trayectoria .card {
	background: var(--col-dar);
	color: var(--col-bg);
	position: relative;
	border-radius: var(--rad-m);
	border-color: #ffffff44;
}
#trayectoria .row {
	position: relative;
}
#trayectoria .row:before {
	content: '';
	position: absolute;
	left: 50%;
	top: -2.5rem;
	bottom: -4rem;
	border-left: solid 2px var(--col-bg);
	margin-left: -1px;
}
@media (min-width:960px) {
	#trayectoria {
		padding-bottom: calc(var(--sca-pad)* 6);
	}
	#trayectoria .row:before {
		bottom: -15rem;
	}
	#trayectoria .col .card:before {
		content: '';
		position: absolute;
		top: 50%;
		width: .75rem;
		height: .75rem;
		background: var(--col-pri);
		border-radius: 1rem;
		z-index: 1;
	}
	#trayectoria .col .card:after {
		content: '';
		position: absolute;
		top: 50%;
		width: 3.25rem;
		border-top: solid 2px var(--col-bg);
		margin-top: -1px;
	}
	#trayectoria .col:nth-child(odd) .card {
		text-align: right;
		margin-right: 2rem;
	}
	#trayectoria .col:nth-child(odd) .card:before {
		right: 0;
		transform: translate(50% , -50%);
	}
	#trayectoria .col:nth-child(odd) .card:after {
		left: 100%;
	}
	#trayectoria .col:nth-child(even) .card {
		transform: translateY(50%);
		margin-left: 2rem;
	}
	#trayectoria .col:nth-child(even) .card:before {
		left: 0;
		transform: translate(-50% , -50%);
	}
	#trayectoria .col:nth-child(even) .card:after {
		right: 100%;
	}
}
@media (max-width:959px) {
	#trayectoria .col .card:before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50% , -50%);
		width: .75rem;
		height: .75rem;
		background: var(--col-pri);
		border-radius: 1rem;
		z-index: 1;
	}
}
#trayectoria .card * {
	max-width: 100%;
}
#trayectoria .card h3 {
	color: var(--col-alt);
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: solid 1px #ffffff44;
}
#trayectoria .card h3 strong {
	color: var(--col-bg);
	font-weight: 400;
}
#servicios .accordion img,
#servicios .accordion h5 {
	display: inline;
	vertical-align: middle;
	margin-right: 1rem;
	height: 2.5rem;
}
#servicios .accordion div {
	margin-left: 3.875rem;
}
#linkedin {
	margin-left: var(--sca-pad);
	margin-right: var(--sca-pad);
	border-radius: var(--sca-pad);
}
#linkedin .bt {
	color: var(--col-bg);
	background: var(--col-dar);
}
#contacto h5 {
	color: var(--col-pri);
}
#contacto p a {
	color: inherit;
	text-decoration-color: var(--col-pri);
}
.field input, .field select, .field textarea {
	border-color: var(--col-pri-bg);
}
.footer {
	background: var(--col-dar);
	color: var(--col-bg);
	border-radius: var(--sca-pad) var(--sca-pad) 0 0;
}
.footer .azuite {
	color: inherit;
}
@media (min-width:960px) {
	.mobile {
		display: none;
	}
}
@media (max-width:960px) {
	.desktop {
		display: none;
	}
	.page {
        padding: 0 calc(var(--sca-pad)* 1.25);
    }
    .section.featured {
    	height: calc(100dvh - 10.5rem);
    }
    .featured .content {
    	top: calc(100dvh - 10.5rem);
    	transform: translateY(-100%);
    	margin-top: -7.5rem;
    	padding-bottom: 0;
    }
    .featured .page > a {
    	bottom: 1.5rem;
    }
    .section.featured h1 {
    	font-size: 2rem;
    	line-height: 1em;
    	text-wrap: balance;
    	max-width: 100%;
    	text-shadow: .125rem .125rem 1rem rgba(0,0,0,2);
    }
    .section.featured h1 + p {
    	font-size: .875rem;
    	text-shadow: .125rem .125rem 1rem rgba(0,0,0,2);
    }
    #sobre-mi img {
    	aspect-ratio: 1 / 1;
    	object-fit: cover;
    	object-position: 25% 50%;
    }
    #trayectoria {
    	padding-top: 7rem!important;
    	padding-bottom: 7rem!important;
    }
    #trayectoria .col {
    	margin-bottom: 0;
    }
    #trayectoria .col + .col {
    	margin-top: 1rem;
    }
    .accordion {
    	padding-left: 0;
    }
    .footer .br {
    	display: block;
    	font-size: 0;
    	margin: .25rem 0;
    }
}