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

:root {

	--fon-t: "Work Sans", sans-serif;
	--fon-h: "Work Sans", sans-serif;

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

	--col-pri: #00518E;
	--col-pri-op75: #00518EBF;
	--col-pri-bg: #15223C;

	--col-acc: #BEF7AB;
	--col-acc-bg: #BEF7AB;

	
}

.main .section.bg:first-child {
    margin-top: calc(var(--sca-pad)* -2);
    padding-top: calc(var(--sca-pad)* 4);
    padding-bottom: calc(var(--sca-pad)* 4);
}
.main .section.bg-l {
	background: #E5F1F8;
}
.bt {
	font-weight: 500;
	text-transform: uppercase;
	color: var(--col-pri-bg);
}
.bt:hover {
	color: var(--col-pri-bg);
}
.header {
	background: no-repeat;
	box-shadow: none;
	color: #fff;
}
.header:after { 
	content: '';
	width: 100%;
	max-width: var(--page-w);
	border-bottom: solid 1px #ffffff66;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}
body:after {
	content: '';
	background: #15223Ccc;
	backdrop-filter: blur(.5rem);
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	height: 4.5rem;
	z-index: 88;
}
.featured {
	position: relative;
	z-index: 99;
}
.section.featured {
    margin-top: 0;
    text-align: left;
    height: 100vh;
}
.section.featured .slider {
	margin: 0;
}
.section.featured .slide:nth-child(2) {
	background-image: url(../images/ecologia.jpg);
}
@media (orientation: landscape) {
	.section.featured .slide:nth-child(1) {
		background-image: url(../images/planta-3.jpg);
		background-position: 100% 50%;
		background-size: auto 100%;
		animation: paneo 30s infinite;
	}
	@keyframes paneo {
		0% {background-position: 100% 50%;}
		50% {background-position: 0% 50%;}
		100% {background-position: 100% 50%;}
	}
	.section.featured .slide:nth-child(2) {
		animation: zoom 30s infinite;
	}
	@keyframes zoom {
		0% {background-size: 100% auto;}
		50% {background-size: 130% auto;}
		100% {background-size: 100% auto;}
	}
}
@media (orientation: portrait) {
	.section.featured .slide:nth-child(1) {
		background-image: url(../images/planta-1.jpg);
		animation: zoom 30s infinite;
	}
	.section.featured .slide:nth-child(2) {
		animation: zoom 30s infinite;
	}
	@keyframes zoom {
		0% {background-size: auto 100%;}
		50% {background-size: auto 130%;}
		100% {background-size: auto 100%;}
	}
}
.featured .content {
	margin: 0;
	padding: 0;
}
.featured .content * {
	text-wrap: balance;
}
.featured .content h1 {
	font-weight: 300;
	font-size: 5rem;
	line-height: .9em;
	max-width: 10em;
	margin-bottom: 2.5rem;
}
.featured .content h1 strong {
	text-decoration: underline;
	text-decoration-color: var(--col-acc);
}
.featured .content h1 strong {
	font-weight: 500;
}
.featured .content h1 + p {
	font-size: 1.375rem;
	max-width: 27em;
}
.featured .slider-prev, 
.featured .slider-next {
	box-shadow: none;
	top: auto;
	bottom: 2rem;
}
.featured .slider-prev {
	left: auto;
	right: 6rem;
}
.featured .slider-next {
	right: 3rem;
}

.main .section h5 {
	font-size: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 2rem;
	letter-spacing: .02em;
	color: #7DBADF;
}
.main .section.bg h5 {
	color: var(--col-acc);
}
.main .section h2 {
	font-weight: 300;
	line-height: 1.1em;
	position: relative;
	padding-bottom: 1.75rem;
	margin-bottom: 1.75rem;
	color: var(--col-pri);
}
.main .section.bg h2 {
	color: #fff;
}
.main .section h2:after {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	height: .25rem;
	transform: translateY(-50%);
	width: 6rem;
	background: #7DBADF;
	transform: skew(-45deg);
}
.main .section.bg h2:after {
	background: var(--col-acc);
}
.main .section h2 strong {
	font-weight: 500;
}
.main .section .page > h2:after,
.main .section.alig-c h2:after {
	left: 50%;
	transform: translate(-50% , -50%) skew(-45deg);
}

#empresa,
#instalaciones {
	background: #284684;
	background-image: url("data:image/svg+xml,%3Csvg width='41' height='10' viewBox='0 0 41 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 10H27V0L0 10Z' fill='%2315233E' fill-opacity='0.33'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 10H41V0L14 10Z' fill='%2315233E' fill-opacity='0.66'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27 5.18519L14 10H27V5.18519Z' fill='%2315233E'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 200% auto;
}
#empresa picture {
	padding-bottom: 4rem;
}
#empresa picture img + img {
	transform: none;
	top: auto;
	bottom: 0;
	width: 50%;
}

#valores {
	background: #7DBADF url(../images/valores-bg.jpg);
	background-attachment: fixed;
	background-size: cover;
}
#valores .col div {
	position: relative;
	padding-left: 27.5%;
}
#valores .col div img {
	position: absolute;
	left: 0;
	width: 20%;
}
#valores h3 {
	color: var(--col-acc);
	margin-bottom: .25em;
}

#productos,
#contacto {
	background-image: url("data:image/svg+xml,%3Csvg width='41' height='10' viewBox='0 0 41 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 10H27V0L0 10Z' fill='%23BFE0F4' fill-opacity='0.33'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 10H41V0L14 10Z' fill='%23BFE0F4' fill-opacity='0.66'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27 5.18555L14 10.0004H27V5.18555Z' fill='%23BFE0F4'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: auto 75%;
}
#productos .col4 .card {
	background: #BFE0F466;
	border-color: #BFE0F4;
}
#productos .col4 .card picture {
	margin: -2rem -2.25rem 2rem;
}
#productos .col4 .card picture img {
	border-radius: .5rem;
}
#productos .col4 .card .bt {
	background: #fff;
	display: inline-block;
}
#productos .col7 .card + p {
	margin: 1.5rem 0 2rem;
}
#productos .col7 * + .card  {
	margin-top: 4rem;
}
#productos .accordion {
    border-color: #fff;
}
#productos .accordion > a:after {
	width: 2rem;
	line-height: 1.875rem;
	height: 2rem;
	text-align: center;
	background: #fff;
	border-radius: 2rem;
	text-indent: 0;
}
#productos .accordion h5 {
	margin-bottom: 0;
	color: var(--col-pri);
}

#instalaciones .accordion {
	border-color: #3b568d;
}
#instalaciones .accordion strong,
#instalaciones .accordion a:after {
	color: var(--col-acc);
}
#instalaciones .slider {
	margin: 0;
	border-radius: 1rem;
}
#instalaciones .slider-wrapper {
	aspect-ratio: 108 / 72;
}
#instalaciones .slider img {
	display: block;
	border-radius: 1rem;
}
#instalaciones .slider-prev,
#instalaciones .slider-next {
	width: 1.5rem;
	height: 1.5rem;
	background-size: 2rem auto;
	box-shadow: none;
	top: auto;
	bottom: -3.25rem;
}
#instalaciones .slider-prev {
	left: 0;
}
#instalaciones .slider-next {
	right: 0;
}
#instalaciones .slider-nav {
	margin: 0;
	height: 0;
	transform: translateY(1.5rem);
}
#instalaciones .slider-nav a {
	background: #ffffff33;
	border-color: transparent;
}
#instalaciones .slider-nav a.activeSlide {
	background: var(--col-acc);
	border-color: transparent;
}
#instalaciones .col10 .card {
	margin-top: 3rem;
	color: #fff;
	border-color: transparent;
	background: #284684;
	box-shadow: 0 0 4rem -2rem #15233e;
	padding: 4rem 4.5rem;
}
#instalaciones .col10 .card img {
	display: block;
	height: 2.5rem;
	margin-bottom: 3rem;
}

#rendering img {
	display: block;
	height: 6rem;
}

.map {
	background: #E5F1F8;
}
.map iframe {
	aspect-ratio: 3 / 1;
	filter: grayscale(100%);
	mix-blend-mode: multiply;
	display: block;
}

.form .field input,
.form .field textarea {
	border: none;
	background: #fff;
}
.form button.bt {
	background: var(--col-pri);
	color: #fff;
}

.footer {
	color: #fff;
	background: var(--col-pri-bg);
}

@media (max-width:960px) {
	.header {
		padding: 1.5rem 0;
		background: var(--col-pri);
	}
	.header nav {
		background: var(--col-pri-bg);
		border-color: transparent;
	}
	.header:after {
		display: none;
	}
	.section.featured {
		padding: 0;
		height: 90vh;
	}
	.featured .slider-prev,
	.featured .slider-next {
		display: block;
		right: auto;
		left: 2.5rem;
	}
	.featured .slider-next {
		left: 5rem;
	}
	.featured .content {
		transform: none;
		top: 10rem;
	}
	.featured .content h1 {
		font-size: 3.25rem;
	}
	.featured .content h1 + p {
		font-size: 1.125rem;
	}
	#empresa, 
	#instalaciones {
		background-size: 400% auto;
	}
	#empresa picture {
		margin-left: -2.5rem;
		margin-right: -2.5rem;
	}
	#productos .col4 .card picture {
	    margin: -1rem -1.25rem 2rem;
	}
	#rendering img {
		height: 5rem;
	}
	#instalaciones .slider-wrapper {
		margin-left: -2.5rem;
		margin-right: -2.5rem;
	}
	#instalaciones .col10 .card {
		padding: 2rem 2.5rem;
		margin: 2rem -2.5rem 0;
		background: none;
		box-shadow: none;
	}
	#instalaciones .col10 .card img {
		height: 2rem;
	}
	#instalaciones .slider-prev,
	#instalaciones .slider-next {
		display: block;
		margin: 0 2.5rem;
	}
	.accordion {
		margin-left: calc(var(--sca-mar)* -1.5);
		margin-right: calc(var(--sca-mar)* -1.5);
	}
}