:root {
	--claro: #FFA230;
	--medio: #FF681C;
	--oscuro: #FB3D00;
	--claroA: #FF8F02;
	--bkgd: #e1e1e1;
	--textoSobreClaro: #552309;
}


* {
	box-sizing: border-box;
	width: 100%;
}

html {
	height: 100%;
	background-color: var(--bkgd);
	scroll-behavior: smooth;
	font-family: Verdana, sans-serif;
	color: #050505;
}

/*XS: TELEFONOS____________________________________________________________________________________________________*/

	body {
		height: 100%;
		display: grid;
		box-sizing: border-box;
		width: 100%;
		margin: 0px;
		padding: 0px;
		grid-template-columns: 1fr;
		grid-auto-rows: max-content;
		/*To allow for easier transitions using SPA links to position*/
		scroll-behavior: smooth;
	}

	.section {
		background-color: #FFFFFF;
		width: 100%;
		padding: 5%;
	}

	.solidCard {
		background-color: #FFFFFF;
		width: 100%;
	}

	.glassCard {
		border-radius: 1rem;
		text-align: center;
		color: var(--claroA);
		overflow: hidden;
		/* glass style */
		background: rgba(255, 255, 255, .7);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	/*--------------HEADER--------------------------------------------------------*/

	#sHeader, #sNav {
		background-image: url('../imagenes/galpon_full_ivega.jpg');
		background-image: image-set(
			url('../imagenes/galpon_full_ivega.webp') type('image/webp'),
			url('../imagenes/galpon_full_ivega.jpg') type('image/jpeg')
		);
		height: 100%;
		/* Create the parallax scrolling effect */
	  	background-attachment: fixed;
	  	background-position: center;
	  	background-repeat: no-repeat;
	  	background-size: cover;
	}

	#sHeader {
		margin-bottom: 10%;
	}

	#sNav {
		display: none;
	}

	#sHeader #banner {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
		grid-gap: 0px 0px;
		overflow: hidden;
		border-radius: 1rem;
	}

	#banner p {
		width: 100%;
	}

	#banner > #c1 {
		display: none;
	}

	#banner > #c2 {
		background-color: var(--oscuro);
		grid-row: 1;
		grid-column: 1;
		z-index: 1;
		overflow-y: visible;
		display: flex;
		align-items: center;
	}

	#banner > #c2 > p {
		color: #FFFFFF;
		font-weight: bolder;
		font-size: 1rem;
		width: 180%;
		text-align: right;
		flex-shrink: 0;
	}

	#banner > #c3 {
		background-color: var(--medio);
		grid-row: 1;
		grid-column: 2;
		overflow-y: visible;
	}

	#banner > #c4 {
		background-color: var(--claro);
		grid-row: 1;
		grid-column: 3;
		z-index: 1;
		display: flex;
		align-items: center;
	}

	#banner > #c4 > img {
		width: 90%;
		margin: 5%;
			margin-top: 0px;
			margin-bottom: 0px;
	}

	#sHeader > h1 {
		color: var(--claro);
		font-weight: bolder;
		font-size: 2.5rem;
		text-align: center;
		margin-bottom: 40%;
		display: none;
	}

	#sHeader a img {
		width: 10%;
		margin-left: 45%;
		margin-right: 45%;
		display: none;
	}

	/*---------------------SECTIONS----------------------------------------*/

	#sValores {
		display: none;
	}

	#sIndustrial {
		background-image: linear-gradient(to right,#ffc452 0%,#666666 0%),url('../imagenes/sistemas-industriales.png');
		background-image: linear-gradient(to right,#ffc452 0%,#666666 0%),image-set(
			url('../imagenes/sistemas-industriales.webp') type('image/webp'),
			url('../imagenes/sistemas-industriales.png') type('image/png')
		);
		padding: 0px;
		background-blend-mode: multiply;
		background-size: cover;
		content-visibility: auto;
		contain-intrinsic-size: auto 500px;
	}

	#sIndustrial > .solidCard {
		width: 100%;
		padding: 5%;
		padding-top: 3%;
		background-color: transparent;
		margin-top: 5%;
		color: white;
		text-align: center;
	}

	#sIndustrial > .solidCard > h2 {
		color: var(--claro);
		text-align: center;
	}

	#sIndustrial > img {
		display:  none;
	}

	#sTraspatio {
		height: 100%;
	    background-image: linear-gradient(to right,#ffc452 0%,#666666 0%),url('../imagenes/produccion-familiar.png');
	    background-image: linear-gradient(to right,#ffc452 0%,#666666 0%),image-set(
			url('../imagenes/produccion-familiar.webp') type('image/webp'),
			url('../imagenes/produccion-familiar.png') type('image/png')
		);
	    background-blend-mode: multiply;
		background-size: cover;
		content-visibility: auto;
		contain-intrinsic-size: auto 500px;
	}

	#sTraspatio > .solidCard {
		float: right;
		width: 100%;
		padding: 5%;
		padding-top: 3%;
		color: white;
		background-color: transparent;
		text-align: center;
	}

	#sTraspatio > .solidCard > h2 {
		color: var(--claro);
		text-align: center;
	}

	#sTraspatio  > img {
		display: none;
	}

	.sEspacio {
		background-image: url('../imagenes/galpon_full_ivega.jpg');
		background-image: image-set(
			url('../imagenes/galpon_full_ivega.webp') type('image/webp'),
			url('../imagenes/galpon_full_ivega.jpg') type('image/jpeg')
		);
		color: #FFFFFF;
		padding: 30%;
		/* Create the parallax scrolling effect */
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		content-visibility: auto;
		contain-intrinsic-size: auto 300px;
	}

	.button, .clearButton {
		display: block;
		text-align: center;
		padding: 1rem;
		width: 60%;
		margin: 5%;
		margin-left: 20%;
		margin-top: 5rem;
		background-color: var(--medio);
		text-decoration: none;
		border-radius: 1rem;
		color: white;
		font-weight: bolder;
	}

	.button:hover, .clearButton:hover {
		background-color: var(--claroA);
		color: black;
	}

	#sFooter {
		margin-top: -10%;
	}

/*S: TABLETS O TELEFONOS GRANDES____________________________________________________________________________________________________*/
@media screen and (min-width: 500px) {

	/*--------------HEADER--------------------------------------------------------*/

	#sHeader, #sNav {
		background-image: url('../imagenes/galpon_full_ivega.jpg');
		background-image: image-set(
			url('../imagenes/galpon_full_ivega.webp') type('image/webp'),
			url('../imagenes/galpon_full_ivega.jpg') type('image/jpeg')
		);
		height: 100%;
		/* Create the parallax scrolling effect */
	  	background-attachment: fixed;
	  	background-position: center;
	  	background-repeat: no-repeat;
	  	background-size: cover;
	}

	#sHeader #banner {
		grid-template-columns: repeat(4, 1fr);
	}

	#banner p {
		width: 100%;
	}

	#banner > #c1 {
		display: inline-block;
		background-color: var(--oscuro);
		grid-row: 1;
		grid-column: 1;
		z-index: 1;
	}

	#banner > #c1 > img {
		height: 100%;
	}

	#banner > #c2 {
		background-color: var(--oscuro);
		grid-row: 1;
		grid-column: 2;
		z-index: 1;
	}

	#banner > #c2 > p {
		font-size: 1.2rem;
	}

	#banner > #c3 {
		background-color: var(--medio);
		grid-row: 1;
		grid-column: 3;
	}

	#banner > #c4 {
		background-color: var(--claro);
		grid-row: 1;
		grid-column: 4;
		z-index: 1;
	}

	#banner > #c4 > img {
		width: 80%;
	}

	#sHeader > h1 {
		color: var(--claro);
		font-weight: bolder;
		font-size: 2.5rem;
		text-align: center;
		margin-bottom: 40%;
		display: none;
	}

	#sHeader a img {
		width: 10%;
		margin-left: 45%;
		margin-right: 45%;
		display: none;
	}

	/*---------------------SECTIONS----------------------------------------*/

	#sNav {
		display: block;
		padding: 20%;
	}

	#sIndustrial {
		background-attachment: fixed;
	    background-position: center;
	    background-repeat: no-repeat;
	    background-size: contain;
	}

	#sIndustrial > .solidCard {
		float: left;
		width: 55%;
		padding: 5%;
		padding-top: 3%;
		margin-top: 5%;
	}

	#sIndustrial > .solidCard > h2 {
		color: var(--claro);
	}

	#sIndustrial > img {
		width: 35%;
	}

	#sTraspatio {
		height: 100%;
		/* Create the parallax scrolling effect */
	    background-attachment: fixed;
	    background-position: center;
	    background-repeat: no-repeat;
	    background-size: contain;
	    padding: 0px;
	    background-color: var(--claro);
	}

	#sTraspatio > .solidCard {
		width: 55%;
		margin-top: 5%;
	}

	.sEspacio {
		padding: 20%;
	}

	.button {
		background-color: var(--claro);
		color: black;
	}

	.button:hover, .clearButton:hover {
		background-color: var(--claroA);
		color: black;
	}

	.clearButton {
		background-color: var(--medio);
		color: white;
	}

}

/*M: TABLETS O NOTEBOOKS CON PANTALLAS HD___________________________________________________________________________________________*/
@media screen and (min-width: 1000px) {

	/*--------------HEADER--------------------------------------------------------*/

	#sNav {
		padding:  20%;
	}

	#sHeader > #banner {
		width: 100%;
		margin: 0px;
	}

	#banner > #c2 > p {
		font-size: 1.7rem;
	}

	#banner > #c4 > img {
		width: 70%;
	}

	/*---------------------SECTIONS----------------------------------------*/

	#sIndustrial {
		background-image: unset;
		background-color: white;
	}

	#sIndustrial > .solidCard{
		color: black;
	}

	#sIndustrial > .solidCard > h2 {
		color: var(--claro);
	}

	#sIndustrial > img {
		width: 35%;
		display: inline-block;
	}

	.sEspacio {
		padding: 5%;
		background-image: url('../imagenes/galpon_Entre_Rios.jpg');
		background-image: image-set(
			url('../imagenes/galpon_Entre_Rios.webp') type('image/webp'),
			url('../imagenes/galpon_Entre_Rios.jpg') type('image/jpeg')
		);
	}

	#sTraspatio {
		background-image: unset;
	    background-color: var(--claro);
	}

	#sTraspatio > .solidCard {
		margin-top: 2%;
		margin-right: 2%;
	}

	#sTraspatio > .solidCard > h2 {
		color: var(--oscuro);
	}

	#sTraspatio  > img {
		width: 35%;
		display: inline-block;
	}

	.button {
		width: 40%;
		margin-left: 30%;
	}

	.button:hover, .clearButton:hover {
		background-color: var(--claroA);
		color: white;
	}

	.clearButton {
		width: 40%;
		margin-left: 30%;
	}


	#sValores {
		display: block;
		text-align: center;
		color: var(--textoSobreClaro);
		background-color: var(--claro);
	}

	.valores {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 1rem;
	}

	.valor {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, auto);
		background-color: white;
		border-radius: 1rem;
		padding: 0.5rem;
	}

	.valor > img {
		border-radius: 50%;
		object-fit: cover;
		height: 10rem; /* Adjust the height as needed */
		width: 10rem;  /* Adjust the width as needed */
		margin: auto;
	}

	#sFooter {
		margin-top: -5%;
	}

}

/*L: NOTEBOOKS Y ORDENADORES CON PANTALLAS FHD_________________________________________________________________________________*/
@media screen and (min-width: 1500px) {
	
	/*--------------HEADER--------------------------------------------------------*/

	#sNav {
		padding:  15%;
	}

	#banner > #c2 > p {
		font-size: 2rem;
	}

	#banner > #c4 > img {
		width: 60%;
	}

	/*---------------------SECTIONS----------------------------------------*/


	#sIndustrial > .solidCard{
		width: 40%;
		margin-left: 20%;
		margin-top: 0%;
	}

	#sIndustrial > img {
		width: 20%;
	}

	.sEspacio {
		padding: 10%;
	}

	#sTraspatio {
		background-color: white;
	}

	#sTraspatio > .solidCard {
		margin-top: 0%;
		margin-right: 20%;
		width: 40%;
		color: black;
	}

	#sTraspatio > .solidCard > h2 {
		color: var(--claro);
	}

	#sTraspatio  > img {
		width: 20%;
		margin-left: 20%;
	}

	.button {
		width: 40%;
		margin-left: 30%;
	}

	.button:hover, .clearButton:hover {
		background-color: var(--claroA);
		color: white;
	}

	.clearButton {
		width: 40%;
		margin-left: 30%;
	}

	#sValores {
		padding: 3%;
		padding-left: 15%;
		padding-right: 15%;
		background-color: white;
	}

	#sValores > h1 {
		color: var(--claro);
	}

	.valores {
		grid-column-gap: 2rem;
	}

	.valor {
		background-color: var(--claroA);
	}


}

/*XL: NOTEBOOKS Y ORDENADORES HIGH DPI SCREENS_____________________________________________________________________*/
@media screen and (min-width: 2000px) {

	.sEspacio {
		padding: 6%;
	}

}