/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}

/* Vars */
:root {
	--color-bg: #fff;
	--color-light: #EFEFEF;
	--color-blue: #3E80AA;
	--color-pink: #EF7A6B;
	--color-green: #38814B;
	--color-text: #53575A;
	--max-width: 84.375rem;
	--border-radius: 20px;
	interpolate-size: allow-keywords;
}

/* Utils */

@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}  

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transition: none !important;
	}
}  

:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
	color: inherit;
	font: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
}

.is-hidden {
	display: none;
	opacity: 0;
}

.is-invisible {
	visibility: hidden;
}

/* Styles */
body {
	font-family: Geist, sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--color-text);
	margin: 0;
	padding: 0;
	min-height: 100dvh;
}
h1, h2 {
	font-weight: 500;
	text-box: trim-end cap alphabetic;
}
h2 {
	font-size: clamp(1.75rem, 1.3929rem + 1.7857vw, 3rem);
	@media screen and (min-width: 60em) {
	color: var(--color-blue);
	}	
}
h3 {
	font-weight: 400 ;
}

header, main, footer, .grid {
	display: grid;
	grid-template-columns: [full-start] minmax(1.25rem, 1fr) [main-start] repeat(6,[col-start] minmax(0, 6rem) [col-end]) [main-end] minmax(1.25rem, 1fr) [full-end];
	gap: 0 1.25rem;
  @media screen and (min-width: 60em) {
  	grid-template-columns: [full-start] minmax(1.25rem, 1fr) [main-start] repeat(12,[col-start] minmax(0, 6rem) [col-end]) [main-end] minmax(1.25rem, 1fr) [full-end];
  	gap: 0 1rem; 
  }
}

header, main, footer, .grid {
	grid-column: full; 
}

header > *, main > *, footer > *, .grid > * {
  	grid-column: main;
}

.container,
.lo-full,
.header-group,
.footer-group {
	display: grid;
	grid-template-columns: subgrid;
}

.container { grid-column: main; }
.lo-full,
.header-group,
.footer-group { grid-column: full; }

main {
	position: relative;
}

@media screen and (max-width: 60em) {
	header {
		overflow: hidden;
		transition: max-height 0.2s ease 0.1s;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		width: 100%;
		z-index: 10;
		&.is-closed {
			display: none;
			max-height: 0;
		}
	}
}

.header-group {
	background: var(--color-green);
	color: #fff;
	text-transform: uppercase;
	font-size: 0.875rem;
	a {
		color: #fff;
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
	
	@media screen and (max-width: 30em) {
		.lang {
			flex: 25% 0 0;
			span {
				display: none;
			}
		}
		.links {
			flex: 70% 0 0;
		}
	}

	@media screen and (max-width: 60em) {
		.container {
			display: flex;
			justify-content: space-between;
			padding: 2rem 1.25rem;
		}
		
		ul {
			flex: 50%;
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 2rem;
			font-size: 0.688rem;
		}
		.lang {
			order: -1;
			li:nth-child(2) {
				display: none;
			}
		}
	}
	@media screen and (min-width: 60em) {
		.container {
			justify-content: end;
			display: flex;
			gap: 4rem;
			padding: 1.125rem 3rem 1.125rem 0;
		}

		.links {
			margin: 0;
			padding: 0;
			display: flex;
			list-style: none;
			gap: 4rem;
			flex: unset 0 0;
		}

		.lang {
			margin: 0;
			padding: 0;
			display: flex;
			list-style: none;
			gap: .5rem;
			color: rgba(255,255,255,.3);
			span {
				display: none;
			}
			a {
				color: rgba(255,255,255,.3);
			}
			.is-on a {
				color: #fff;
			}
		}
	}
}

.header-main {
	@media screen and (max-width: 30em) {
		.logo img {
			width: 3.75rem;
			height: auto;
		}
	}
	@media screen and (max-width: 60em) {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: full;
		background: var(--color-pink);
		color: #fff;
		.container {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			padding: 2rem 1.25rem;
			row-gap: 5rem;
		}
		a {
			color: #fff;
			text-decoration: none;
		}
		.logo-large {
			display: none;
		}
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			font-size: 0.813rem;
			li {
				margin-bottom: 2.375rem;
			}
			a {	
				display: block;
			}
		}
		.social {
			display: flex;
			gap: 1rem;
		}
	}
	@media screen and (min-width: 60em) {
		grid-column: main;
		position: fixed;
		width: 100%;
		top: 4.125rem;
		left: 50%;
		transform: translate(-50%);
		background: var(--color-bg);
		padding: 1.75rem 3rem 1.438rem 2.063rem;
		display: flex;
		
		z-index: 10;
		max-width: calc(var(--max-width) - 1.3rem);
		text-transform: uppercase;
		font-size: 0.875rem;
		box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
		.container {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
		}
		a {
			color: var(--color-text);
			text-decoration: none;
			transition: all 0.2s ease;
			&:hover {
				color: var(--color-green);
			}
		}
		.logo {
			width: 18rem;
			height: auto;
			display: inline-block;
			align-self: center;
			img {
				width: 100%;
				height: auto;
			}
		}
		.main-nav {
			ul {
				list-style: none;
				display: flex;
				margin: 0;
				padding: 0;
				gap: 1.875rem;
			}			
			li {
				position: relative;
			}
			li.is-on::after {
				content: '';
				width: 0.5rem;
				height: 0.5rem;
				background: var(--color-green);
				position: absolute;
				bottom: -.9rem;
				left: calc(50% - 0.25rem);
				pointer-events: none;
			}
		}
		.slogan, .social, .logo-small {
			display: none;
		}
	}
}

.mobile-logo {
	position: absolute;
	left: 0;
	width: 100%;
	top: 1.25rem;
	z-index: 4;	
	img {
		width: 100%;
		max-width: 10rem;
		height: auto;
		grid-column: main;
	}
	&.light img {
		filter: brightness(10);
	}
	@media screen and (min-width: 60em) {
		display: none;
	}
}

.mobile-nav-btns {
	position: fixed;
	bottom: 2rem;
	z-index: 20;
	left: 50%;
	transform: translate(-50%);
	display: flex;
	gap: 0.625rem;
	font-size: 0.875rem;
	img {
		background: var(--color-light);
		padding: 0.438rem 1.563rem;
	}
	button {
		text-transform: uppercase;
		color: #fff;
		background: var(--color-green);
		line-height: 2.875rem;
		outline: none;
		border: none;
		padding: 0 1.563rem;
		&:focus, &:focus-visible {
			outline: 2px solid var(--color-text);
		}
	}
	@media screen and (min-width: 60em) {
		display: none;
	}
}

footer {
	background: var(--color-pink);
	color: #fff;
	a {
		color: #fff;
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		font-size: 0.938rem;
	}
	li {
		margin-bottom: 1.125rem;
	}
}

.footer-main {
	.social {
			display: flex;
			gap: 1rem;
	}
	
	@media screen and (max-width: 60em) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: 
		"logo ." 
		". group"
		". brands"
		". contact";
		row-gap: 3.5rem;
		padding: 2rem 0;
		.logo {
			grid-area: logo;
		}
		.group {
			grid-area: group;
		}
		.brands {
			grid-area: brands;
		}
		.contact {
			grid-area: contact;
		}
	}
	@media screen and (max-width: 25em) {
		grid-template-columns: 1fr;
		grid-template-areas: 
		"logo" 
		"group"
		"brands"
		"contact";
	}
	@media screen and (min-width: 60em) {
		padding: 3.75rem 0;
		display: grid;
		grid-template-columns: subgrid;
		grid-template-rows: max-content max-content;
		row-gap: 2.75rem;

		h4 {
			font-weight: 400;
			text-transform: uppercase;
			font-size: 0.938rem;
			margin: 0 0 2.75rem;
		}

		.logo {
			grid-column: col-start 1 / col-end 2;
			grid-row: 1 / 2;
			width: 12.938rem;
			height: auto;
		}

		.group {
			grid-column: col-start 7 / col-end 8;
			grid-row: 2 / 3;
		}

		.brands {
			grid-column: col-start 9 / col-end 10;
			grid-row: 2 / 3;
		}

		.contact {
			grid-column: col-start 11 / col-end 12;
			grid-row: 2 / 3;
		}
		.social {
			margin-top: 5.25rem;
		}
	}
}

.footer-group {
	@media screen and (max-width: 60em) {
		display: block;
		font-size: 0.688rem;
		color: var(--color-text);
		background: var(--color-bg);
		text-transform: uppercase;
		text-align: center;
		padding: 2rem 1rem 6rem;
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		div {
			flex: 100% 0 0;
		}
		.group-1, .group-2 {
			flex: 48% 0 0;
		}
		.group-1 {
			text-align: right;
		}
		.group-2 {
			text-align: left;
		}
		a {
			color: var(--color-text);
			text-decoration: none;
			display: inline-block;
			padding: .5rem 0;
		}
	}
	@media screen and (min-width: 60em) {
		text-align: left;
		color: #fff;
		background: var(--color-blue);		
		display: grid;
		padding: 1rem 0 1.25rem;
		
		font-size: 0.875rem;
		.container {
			display: grid;
		}
		.copyright {
			grid-column: main / col-end 3;
		}
		.group-1 {
			grid-column: col-start 7 / col-end 8;
		}
		.group-2 {
			grid-column: col-start 9 / col-end 10;
		}
		.legal {
			grid-column: col-start 11 / col-end 12;
		}
	}
}

/* Home */

.home-hero {
	.glide {
		grid-column: full;
		grid-template-columns: subgrid;
	}
	.glide__slide {
		background: center no-repeat;
		background-size: cover;
		height: 60vh;
		display: grid;
		grid-column: full;
		grid-template-columns: [full-start] minmax(1.25rem, 1fr) [main-start] repeat(12,[col-start] minmax(0, 6rem) [col-end]) [main-end] minmax(1.25rem, 1fr) [full-end];
  		gap: 1rem;
	}
	
	.container {
		grid-column: main;
		grid-template-columns: subgrid;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		padding: 8.125rem 0 7.188rem;
		color: #fff;
	}
	h1 {
		font-size: clamp(2.125rem, 1.4821rem + 3.2143vw, 4.375rem);
		margin: 0 0 2.125rem;
	}
	p {
		margin: 0;
		font-size: 1.25rem;
		line-height: 1.2;
	}
	@media screen and (max-width: 60em) {
		.glide__slide {
			height: 75vh;
			grid-template-columns: [full-start] minmax(1.25rem, 1fr) [main-start] repeat(6,[col-start] minmax(0, 6rem) [col-end]) [main-end] minmax(1.25rem, 1fr) [full-end];
			gap: 0 1.25rem;
		}
		.container {
			justify-content: flex-start;
			padding: 7rem 0;
		}
		h1 {
			font-weight: 400;
		}
	}
}

.home-intro {
	font-size: clamp(1.125rem, 0.9107rem + 1.0714vw, 1.875rem);
	line-height: 1.13;
	display: grid;
	grid-template-columns: subgrid;
	padding: 5.625rem 0 5rem;
	.text {
		grid-column: col-start 1 / col-end 6;
	}
	@media screen and (min-width: 60em) {
		padding: 5.625rem 0 5rem;
		.text {
			grid-column: col-start 6 / col-end 12;
		}
	}
}

.hero-img {
	display: block;
	img {width: 100%; height: auto;vertical-align: middle;}
}

.home-ejes {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: full;
	background: var(--color-light);
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.num {
		font-weight: 200;
	}
	@media screen and (max-width: 60em) {
		padding: 4.5rem 0 1.5rem;
		.col-a, .col-b {
			grid-column: col-start 1 / col-end 6;
			display: grid;
			grid-template-columns: subgrid;
		}
		.col-a h2 {
			grid-column: col-start 1 / col-end 6;
		}
		.col-a p {
			grid-column: col-start 2 / col-end 6;
		}
		.col-b ul {
			display: grid;
			grid-template-columns: subgrid;
			grid-column: col-start 1 / col-end 6;
		}
		.col-b li {
			display: grid;
			grid-template-columns: subgrid;
			grid-column: col-start 1 / col-end 6;
			.num {
				grid-column: col-start 1 / col-end 1;
				font-size: 1.75rem;
				padding: 3.25rem 0;
			}
			div {
				grid-column: col-start 2 / col-end 6;
				border-bottom: 1px solid var(--color-green);
				padding: 3.25rem 0;
			}
			&:last-of-type div {
				border-bottom: none;
			}
			h3 {
				margin-top: 0;
			}
		}
	}
	@media screen and (min-width: 60em) {
		padding: 6.25rem 0;
		
		.col-a {
			grid-column: col-start 1 / col-end 5;
			align-self: center;
		}
		.col-b {
			grid-column: col-end 6 / col-end 12;
			border-left: 1px solid var(--color-green);
		}
		h2 {
			/*color: var(--color-blue);*/
			font-size: 3rem;
			margin: 0 0 7.5rem;
		}
		
		li {
			border-bottom: 1px solid var(--color-green);
			display: grid;
			grid-template-columns: repeat(6,[col-start] minmax(0, 6rem) [col-end]);
			gap: 1rem;
			padding: 3.125rem 0;
			&:first-of-type {
				padding-top: 0;
			}
			&:last-of-type {
				border: none;
				padding-bottom: 0;
			}
			div {
				grid-column: col-start 3 / col-end 5;
			}
		}
		.num {
			grid-column: col-start 2 / col-end 2;
			font-size: 3rem;
		}
		h3 {
			font-size: 1.875rem;
			margin-top: 0.375rem;
		}
		p {
			font-size: 1.125rem;
			margin-bottom: 0;
			line-height: 1.3;
		}	
	}
}

.home-brands {
	padding: 4.875rem 0 5.125rem;
	h2 {
		/*font-size: 3rem;*/
		margin: 0 0 4.75rem;
	}
	ul {
		display: flex;
		flex-direction: column;
		list-style: none;
		gap: 1rem;
		margin: 0;
		padding: 0;
	}
	li {
		display: flex;
		flex-direction: column;
		background: var(--color-text);
		border-bottom-right-radius: var(--border-radius);
		border-bottom-left-radius: var(--border-radius);
		overflow: hidden;
		background: no-repeat center;
		background-size: cover;
	}
	a {
		width: 100%;
		color: #fff;
		text-decoration: none;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		aspect-ratio: .8 / 1;
		& > img {
			display: none;
		}
	}
	.overlay {
		width: 100%;
		height: 12rem;
		display: flex;
		justify-content: center;
		align-items: center;
		.text {display: none}
	}
	.text p {
		text-wrap: pretty;
	}
	.bc {
		background-image: url(/img/bg/bg-bc.jpg);
		.overlay {
			background-color: #10364B;
		}
		img {
			width: 40%;
			height: auto;
		}
	}
	.ba {
		background-image: url(/img/bg/bg-ba.jpg);
		.overlay {
			background-color: #E9433B;
			img {
				filter: grayscale(100%) brightness(4);
				width: 60%;
				height: auto;
			}
		}
	}
	@media screen and (min-width: 60em) {
		padding: 7rem 0;
		h2 {
			/*font-size: 3rem;*/
			margin: 0 0 4.75rem;
		}
		ul {
			flex-direction: row;
		}
		li {
			flex: calc((100% - 1rem) / 2) 0 0;
			aspect-ratio: 1 / 1;
			border-radius: var(--border-radius);
			position: relative;
			background: no-repeat center bottom;
			padding: 0;
		}
		a {
			flex-direction: row;
			outline: 1px solid red;
			height: 100%;
			padding: 0;
			justify-content: center;
			align-items: center;
		}
		a img {
			display: block;
		}
		img {
			width: auto;
			max-width: 70%;
			height: auto;
		}
		.overlay {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			height: 100%;
			padding: 9.5rem 11.24% 3.125rem 11.24% ;
			flex-direction: column;
			justify-content: space-between;
			text-align: center;
			display: flex;
			visibility: hidden;
			opacity: 0;
			transition: opacity .2s linear 0s, visibility 0s linear 0s;
			img {
				align-self: center;
				justify-self: center;
			}
			.text {
				display: block;
			}
		}
		.bc img {
			width: auto;
		}
		li a:hover .overlay {
			opacity: 1;
			visibility: visible;
		}
	}
}

.home-news {
	background: var(--color-light);
	grid-template-columns: subgrid;
	padding: 7.625rem 0 5.375rem;
	.container {
		display: block;
	}
	.heading {
		display: flex;
		/*width: 100%;*/
		justify-content: space-between;
		align-items: baseline;
		h2 {
			margin: 0 0 1.563rem;
		}
	}
	.link {
		color: var(--color-text);
	}
}

.news-list {
	display: flex;
	flex-direction: column;
	gap: 5rem;
	a {
		display: block;
		color: var(--color-text);
		text-decoration: none;
	}
	img {
		width: 100%;
		height: auto;
	}

	@media screen and (min-width: 60em) {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4rem 1rem;
		justify-content: space-between;

		&.col-2 {
			.news-list-entry {
				flex: calc((100% - 1rem) / 2) 0 0;
			}
		}

		&.col-3 {
			.news-list-entry {
				flex: calc((100% - 2rem) / 3) 0 0;
			}
		}

		&.solid-card .news-list-entry {
			background: var(--color-bg);
			border-bottom-right-radius: var(--border-radius);
			border-bottom-left-radius: var(--border-radius);
			
			.text {
				margin: 1.875rem 8.18% 3.125rem;
			}
		}
	}
}