@font-face {
	font-family: "neue-haas-grotesk-display";
	src: url("https://use.typekit.net/af/2724c2/00000000000000007735bb48/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/2724c2/00000000000000007735bb48/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/2724c2/00000000000000007735bb48/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
}

@font-face {
	font-family: "neue-haas-grotesk-display";
	src: url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
	font-display: swap;
	font-style: normal;
	font-weight: 500;
	font-stretch: normal;
}

@font-face {
	font-family: "neue-haas-grotesk-display";
	src: url("https://use.typekit.net/af/c7a282/00000000000000007735bb62/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/c7a282/00000000000000007735bb62/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/c7a282/00000000000000007735bb62/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
	font-display: swap;
	font-style: normal;
	font-weight: 600;
	font-stretch: normal;
}

@font-face {
	font-family: "neue-haas-grotesk-display";
	src: url("https://use.typekit.net/af/216c2e/00000000000000007735bb6a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/216c2e/00000000000000007735bb6a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/216c2e/00000000000000007735bb6a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
	font-display: swap;
	font-style: normal;
	font-weight: 700;
	font-stretch: normal;
}

:root {
	--color-primary: #4C5F80;
	--color-secondary: #F9F9F9;
	--color-gray: #737373;
	--body-size: 14px;
	--color-text: #000000;
}

body {
	background: white;
	padding-top: 67px;
}

@media screen and (max-width: 534px) {
	body {
		padding-top: 62px;
	}
}

@media screen and (min-width: 37.5em) {
	:root {
		--body-size: 16px;
	}
}

/* Base */

*,
:after,
:before {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	line-height: 1.15;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}


body {
	font-weight: 400;
	text-align: center;
	font-size: var(--body-size);
	margin: 0;
	line-height: 1.1;
	color: #2b2424;
	position: relative;
	width: 100%;
}

body,
h1,
h2,
h3,
input {
	font-family: "Lato", sans-serif;
}

h1,
h2,
h3 {
	text-transform: none;
	margin: 0;
}

p {
	margin: 0;
	padding: 0;
}

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

a {
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
}

b,
strong {
	font-weight: inherit;
	font-weight: bolder;
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

dfn {
	font-style: italic;
}

mark {
	/*background-color: #ff0;
	    color: #000;*/
	background-color: initial;
	color: var(--color-primary);
	text-decoration: underline;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

audio,
video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

img {
	border-style: none;
}

svg:not(:root) {
	overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

[type="reset"],
[type="submit"],
button,
html [type="button"] {
	-webkit-appearance: button;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
	outline: 1px dotted ButtonText;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	display: inline-block;
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details,
menu {
	display: block;
}

summary {
	display: list-item;
}

canvas {
	display: inline-block;
}

[hidden],
template {
	display: none;
}

/* Menu */

.menu {
	background-color: var(--color-primary);
	padding: 16px 20px;
	position: fixed;
	width: 100%;
	z-index: 100;
	top: 0;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	grid-gap: 3.5rem;
}

.menu .container {
	height: 100%;
}

.menu__button,
.menu__button i,
.menu__logo {
	display: flex;
	align-items: center;
}

.menu__logo {
	height: 100%;
	justify-content: flex-start;
}

.menu__logo img {
	height: 35px;
	width: auto;
}

.menu__options {
	margin-left: auto;
	padding-left: 40px;
	color: white;
	display: flex;
	grid-gap: 30px;
	align-items: center;
}

.menu__options__item {
	cursor: pointer;
	font-weight: 300;
	position: relative;
	color: white;
	text-decoration: none;
}

.menu__options__item:after {
	content: "";
	display: block;
	width: 110%;
	height: 2px;
	background-color: white;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	bottom: -7px;
	transition: all 0.3s;
}

.menu__options__item:hover:after {
	transform: translate(-50%, -50%) scale(1);
}

.menu__options__item.active {
	font-weight: 800;
}


.menu__button {
	justify-content: flex-end;
	padding-left: 40px;
	display: none;
	margin-left: auto;
}

.menu__button i {
	font-size: 30px;
	color: white;
	justify-content: flex-end;
	cursor: pointer;
}

.menu__button i:before {
	position: relative;
	top: 5px;
}

.menu-mobile {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: var(--color-primary);
	transform: translateX(100%);
	transition: all 0.3s ease;
	z-index: 999;
}

.menu-mobile.active {
	transform: translateX(0%);
}

.menu-mobile__container {
	padding: 30px 10px;
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.menu-mobile-close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 20px;
	font-size: 24px;
	color: white;
	cursor: pointer;
}

.menu-mobile__container__brand {
	width: 100%;
	margin-bottom: 2rem;
	padding: 20px;
	/*margin: auto 0 1rem;*/
}

.menu-mobile__container__brand img {
	height: 30px;
	width: auto;
}

.menu-mobile__containter__options {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	grid-gap: 10px;
}

.menu-mobile__container__options__item {
	color: white;
	padding: 15px;
	font-size: 18px;
	cursor: pointer;
	text-decoration: none;
}

.menu-mobile__container__options__item.active {
	background: white;
	color: var(--color-primary);
	border-radius: 8px;
	font-weight: 800;
	padding-left: 30px;
	padding-right: 30px;
}

/* Hero */

.hero {
	width: 100%;
	height: 600px;
	display: flex;
	overflow: hidden;
}

.hero__container {
	flex: 1;
	position: relative;
	transition: flex 0.5s ease;
	overflow: hidden;
	cursor: pointer;
	/*clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);*/
}

.hero__container:last-child {
	/*clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);*/
}

.hero__container__bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*background-size: cover;*/
	background-position: center;
	z-index: 1;
	transition: all 0.3s ease-out;
}

.hero__container__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(76, 95, 128, 0.75);
	z-index: 2;
}

.hero__container__logo {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 24px;
	font-weight: bold;
	transition: transform 0.3s ease, font-size 0.3s ease;
}

.hero__container__logo img {
	width: 230px;
	height: auto;
}

.hero__container:hover {
	flex: 2;
}

.hero__container:hover .hero__container__logo {
	transform: translate(-50%, -50%) scale(1.2);
}

/*.hero__container:hover .hero__container__bg{
  	transform: scale(1.1);
  }*/

/* Responsive Carousel */
@media (max-width: 700px) {
	.hero {
		height: 600px;
		flex-direction: column;
		position: relative;
	}

	.hero__container {
		clip-path: none;
		flex: none;
		width: 100%;
		height: 100%;
		position: absolute;
		transition: opacity 0.5s ease;
		opacity: 0;
	}

	.hero__container.active {
		opacity: 1;
		z-index: 10;
	}

	.hero__carousel__buttons {
		position: absolute;
		/*bottom: 15px;*/
		bottom: 100px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 10px;
		z-index: 20;
	}

	.hero__carousel__button {
		width: 12px;
		height: 15px;
		border-radius: 50%;
		border: 2px solid white;
		background: transparent;
		cursor: pointer;
	}

	.hero__carousel__button.active {
		background: white;
	}
}

/* General */

.title {
	font-size: 39px;
	font-weight: 700;
	text-align: center;
	color: var(--color-primary);
	width: 100%;
}

.section.section-title {
	padding: 0 20px 2rem;
}

.section-title .container {
	justify-content: center;
}

.section-title .subtitle {
	color: var(--color-primary);
}

.subtitle {
	font-size: 28px;
	font-weight: 600;
	color: white;
}

.section {
	background-color: white;
	padding: 5.3rem 20px;
}

.section.column .container {
	flex-direction: column;
}

.section.gray {
	background-color: var(--color-secondary);
}

.section.blue {
	background-color: var(--color-primary);
}

.section.blue .title {
	color: white;
}

/* Description */

.description .container {
	grid-gap: 35px;
}

.description__logo {}

.description__logo img {
	height: auto;
	width: 255px;
}

.description__text {
	text-align: left;
	font-size: 20px;
	font-weight: 300;
	color: var(--color-primary);
	line-height: 1.25;
}

#nosotros {
	max-width: 1280px;
	margin: -70px auto 0;
	border-radius: 10px;
	z-index: 10;
	position: relative;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* History */

.history {
	flex-direction: column;
}

.history__carrousel {
	width: 100%;
	position: relative;
}

.history__carrousel__container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 0;
	/* o padding-left/right: 0 si había */
	box-sizing: border-box;
}

.history__carrousel__track {
	display: flex;
	transition: transform 0.5s ease;
	width: 95%;
	margin: 0 auto;
	gap: 20px;
	/* o el valor que uses */
}

.history__carrousel__track::after {
	content: '';
	flex: 0 0 auto;
	width: 0;
	/* ya no necesitas un “padding falso” aquí */
}

.history__carrousel__item {
	flex: 0 0 auto;
	padding: 10px;
	text-align: center;
	box-sizing: border-box;
	width: calc((100% - (20px * 2)) / 3);
}

.history__carrousel__item__diamond {
	width: 100%;
	max-width: 300px;
	height: 300px;
	margin: 0 auto 10px;
	background-color: #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}

.history__carrousel__item__diamond__gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: black;

	mix-blend-mode: color;
}

.picture-history {
	width: 140%;
	height: 140%;
	object-fit: cover;
}

.circle-history {
	position: absolute;
	z-index: 1;
	width: 130px;
	height: auto;
	top: 60px;
	left: 3%;
}

.history__carrousel__item h3 {
	margin-top: 2.5rem;
	/*text-align: left;*/
	font-size: 21px;
	font-weight: 900;
	color: var(--color-primary);
}

.history__carrousel__item p {
	margin-top: 0.5rem;
	/*text-align: left;*/
	font-size: 18px;
}

.history__carrousel__item h3,
.history__carrousel__item p {
	text-align: center;
}

.history__carrousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: white;
	border: 1.5px solid var(--color-primary);
	width: 35px;
	height: 35px;
	border-radius: 50%;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 10;
	color: var(--color-primary);
	transition: all 0.3s;
}

.history__carrousel__nav:hover {
	background-color: var(--color-primary);
	color: white;
}

.prev {
	left: 0px;
}

.next {
	right: 0px;
}

/* Mission */

.mission__elements {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2rem;
}

.mission__elements__item {

	perspective: 1000px;
	height: 120px;
	position: relative;
}

.card-face {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	transition: transform 0.8s;
	border-radius: 15px;
	/*box-shadow: 4px 4px 11px 0px rgba(0, 0, 0, 0.05);*/
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	grid-gap: 15px;
	text-align: left;
	background: #eeeff3;
}

.front {
	color: var(--color-primary);
	transform: rotateY(0deg);
	/* Estado inicial */
}

.back {
	color: var(--color-primary);
	transform: rotateY(180deg);
	/* Oculto y volteado por defecto */
	text-align: justify;
}

.mission__elements__item__icon {
	font-size: 70px;
}

.mission__elements__item__title {
	font-size: 20px;
	font-weight: 600;
}

.mission__elements__item__text {
	font-size: 15px;
	font-weight: normal;
	text-align: justify;
}

.mission__elements__item.flipped .front {
	transform: rotateY(180deg);
}

.mission__elements__item.flipped .back {
	transform: rotateY(360deg);
}

/* Efecto de volteo al pasar el cursor (solo para escritorio) */
@media (hover: hover) {
	.mission__elements__item:hover .front {
		transform: rotateY(180deg);
	}

	.mission__elements__item:hover .back {
		transform: rotateY(360deg);
	}
}

/* brands */

.brands {
	padding-top: 3rem;
	padding-bottom: 2rem;
}

.brands .container {
	flex-direction: column;
	grid-gap: 1rem;
	align-items: center;
}

.brands__carrousel__container {
	position: relative;
	width: 100%;
	max-width: 1100px;
	overflow: hidden;
}

.brands__carrousel__track {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 20px;
	transition: transform 0.6s ease-in-out;
	width: 100%;
}

.brands__carrousel__item.is-duplicate {
	display: none;
}

.brands__carrousel__item {
	text-decoration: none;
	opacity: 0.5;
	transition: all 0.3s;
	cursor: pointer;
	text-align: center;
	display: flex;
	align-items: center;
}

.brands__carrousel__item.active {
	opacity: 1;
}

.brands__carrousel__item:hover {
	opacity: 0.8;
}

.brands__carrousel__item img {
	width: 100%;
	height: auto;
}

.brands__carrousel__nav {
	display: none;
	/* Ocultar por defecto en desktop */
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 15px;
	cursor: pointer;
	z-index: 10;
	transition: all 0.3s;
}

.brands__carrousel__nav:hover {
	background-color: white;
	color: var(--color-primary);
}

.brands__carrousel__nav.icon-left {
	left: 0px;
}

.brands__carrousel__nav.icon-right {
	right: 0px;
}

/*

	.brands__elements{
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(4, 1fr);
		max-width:900px;
	}

	.brands__elements__item{
		text-decoration: none;
		opacity: 0.5;
		transition: all 0.3s;
		cursor: pointer;
	}

	.brands__elements__item.active{
		opacity: 1;
	}

	.brands__elements__item:hover{
		opacity: 0.8;
	}

	.brands__elements__item img{
		width: 100%;
		height: auto;
	}

	@media screen and (max-width: 700px){
		.brands__elements{
			grid-template-columns: repeat(2, 1fr);
			max-width: 400px;
			grid-gap: 10px;
		}
	}*/

/* philosophy */

.philosophy {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
}

.philosophy.container {
	grid-gap: 2rem;
}

.philosophy__description {
	margin: auto 0;
}

.philosophy__description__text {
	text-align: center;
	margin-top: 1.5rem;
	font-size: 16px;
	font-weight: 300;
}

.philosophy__social {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: .5rem;
}

.philosophy__social__description {
	margin-bottom: 0.5rem;
	color: var(--color-primary);
}

.philosophy__social__container {
	display: flex;
	grid-gap: 15px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}

.philosophy__social__container a {
	padding: 5px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-primary);
	color: white;
	border-radius: 10px;
	grid-gap: 6px;
	font-weight: normal;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.3s ease;
}

.philosophy__social__container a:hover {
	transform: scale(1.1);
}

.philosophy__video {
	position: relative;
	width: 70%;
	padding-bottom: 40%;
	/*width: 100%;
		padding-bottom: 56.25%;*/
	height: 0;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -180px;
	/*transform: scale(0.8);*/
}

.philosophy__video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Products */

.products {
	margin-top: 6rem;
	flex-direction: column;
}

.products__head {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	width: 100%;
	grid-gap: 0.5rem;
}

.products__head .title {
	font-size: 25px;
	color: #333;
	margin-right: auto;
	width: auto;
}

.products__head__button {
	text-decoration: none;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: var(--color-primary);
	color: white;
	padding: 10px 30px;
	border-radius: 10px;
	transition: all 0.3s ease;
}

.products__head__button:hover {
	transform: scale(1.1);
}

.products__head__button i {
	font-size: 0.9em;
}

.products__body {
	width: 100%;
}

/* Products Carousel */
.products__carousel {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.products__body__gallery {
	display: flex;
	gap: 20px;
	transition: transform 0.5s ease-in-out;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* overflow-x: auto; /* ¡Asegúrate de que esta línea NO esté presente o esté comentada! */
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* Oculta la barra de desplazamiento para navegadores Webkit (Chrome, Safari) */
.products__body__gallery::-webkit-scrollbar {
	display: none;
}

.products__body__gallery__item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 15px;
	text-decoration: none;
	width: calc((100% - 80px) / 5);
	flex-shrink: 0;
}

.products__body__gallery__item__rectangle {
	background-color: #eeeff3;
	border-radius: 10px;
	width: 100%;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.products__body__gallery__item__rectangle__button {
	position: absolute;
	color: white;
	background-color: var(--color-primary);
	padding: 10px;
	border-radius: 50%;
	font-size: 15px;
	width: 33px;
	height: 33px;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 20px;
	bottom: 20px;
	transition: all 0.3s ease;
}

.products__body__gallery__item__rectangle__img {
	width: 110%;
	height: auto;
	transition: transform 0.3s ease;
}

.products__body__gallery__item__description {
	color: black;
	font-size: 18px;
	font-weight: bold;
	opacity: .6;
}

.products__body__gallery__item:hover .products__body__gallery__item__rectangle__img {
	transform: scale(1.1);
}

.products__body__gallery__item:hover .products__body__gallery__item__description {
	opacity: 1;
}

.products__body__gallery__item:hover .products__body__gallery__item__rectangle__button {
	width: 150px;
	height: 150px;
	transform: translate(90px, 90px);
	font-size: 30px;
}

.products__body__gallery__item:hover .products__body__gallery__item__rectangle__button::before {
	transform: translate(-24px, -24px);
}

/* Dots navigation */
.products__carousel__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
	display: none;
	/* Oculto por defecto, se mostrará con JS si es necesario */
}

.products__carousel__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-gray);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.products__carousel__dot.active {
	background-color: var(--color-primary);
}

/* Store */

#stores {
	border-top: 2.5rem solid var(--color-secondary);
	padding: 4rem 20px;
}

.container.stores {
	display: flex;
	flex-direction: column;
}

#stores .title {
	font-size: 25px;
}

.store__body {
	display: grid;
	grid-template-columns: 1fr 1fr 2fr;
	grid-gap: 3rem;
	width: 100%;
}

.store__body__filter {
	background-color: #f3f5f7;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	border-radius: 8px;
	padding: 20px;
	gap: 20px;
	align-self: start;
}

.store__body__filter__row {
	display: flex;
	flex-direction: column;
	width: 100%;
	grid-gap: 5px;
}

.store__body__filter__row__select {
	width: 100%;
	font-size: inherit;
	padding: 8px 15px;
	border-radius: 8px;
	outline: none;
	border: none;
	font-family: inherit;
}

.store__body__fitler__row__label {
	width: 100%;
	text-align: left;
	color: var(--color-primary);
}

.store__body__filter__button {
	color: white;
	background-color: var(--color-primary);
	padding: 10px 20px;
	border-radius: 8px;
	margin-bottom: -2.4rem;
	transition: all .3s;
	cursor: pointer;
}

.store__body__filter__button:hover {
	transform: scale(1.1);
}

.store__body__map {
	grid-column: 2 span;
	width: 100%;
	height: 700px;
}

.store__body__map img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.store__body__list {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	align-self: start;
}

.store__body__list__item {
	width: 100%;
	background-color: #f3f5f7;
	padding: 10px 20px;
	border-radius: 8px;
	color: var(--color-primary);
	cursor: pointer;
}

.store__body__list__item.active {
	background-color: var(--color-primary);
	color: white;
}

.store__body__info__picture {
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: left;
	justify-content: flex-start;
	gap: 10px;
	height: 350px;
	border-radius: 15px;
	box-shadow: 1px 2px 6px 1px rgb(0 0 0 / 12%);
	margin-bottom: 1.5rem;
}

.store__body__info__picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.store__body__info {
	display: flex;
	flex-direction: column;
	text-align: left;
	gap: 5px;
	align-items: flex-start;
	justify-content: flex-start;
}

.store__body__info__tel,
.store__body__info__mail,
.store__body__info__clock {
	display: flex;
	gap: 5px;
	align-items: center;
}

.store__body__info__tel,
.store__body__info__mail {
	text-decoration: none;
	color: var(--color-primary);
}

.store__body__info__clock__circle {
	width: 18px;
	height: 18px;
	border-radius: 100%;
	border: 2px solid #e8e6e6;
}

.store__body__info__clock__circle.open {
	background-color: #52d174;
}

.store__body__info__clock__circle.close {
	background-color: #cc1f47;
}

.store__body__info__button {
	background-color: var(--color-primary);
	color: white;
	font-weight: bold;
	margin-top: 1.2rem;
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 8px;
	transition: all 0.3s;
	cursor: pointer;
	width: auto;
}

.store__body__info__button:hover {
	transform: scale(1.1);
}

.store-skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite linear;
	border-radius: 8px;
}

.store__body__list.store-skeleton__list {
	min-height: 100px;
	padding: 10px;
}

.store__body__list__item.store-skeleton__item {
	height: 40px;
	/*margin-bottom: 10px;*/
}

.store__body__info.store-skeleton__info {
	min-height: 250px;
	padding: 15px;
}

.store__body__info .store-skeleton__image {
	height: 290px;
	width: 100%;
	margin-bottom: 10px;
}

.store__body__info .store-skeleton__text {
	height: 20px;
	width: 80%;
	margin-bottom: 8px;
}

.store-skeleton__image,
.store-skeleton__text {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite linear;
	border-radius: 4px;
}

.stores__picture__image-container.store-skeleton__image-container .stores__picture__image {
	display: none;
}

.stores__picture__item.store-skeleton__text {
	/* Aquí puedes definir estilos para los elementos de texto con el esqueleto */
	height: 20px;
	width: 80%;
	margin-bottom: 8px;
	/* Aplica el background del esqueleto */
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite linear;
	border-radius: 4px;
}

.store-skeleton__image-container {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite linear;
	min-height: 250px;
	border-radius: 4px;
}

/* Animate */

.description__logo img.animate-on-scroll {
	transform: scale(1.2);
	opacity: 0;
	transition: all 1s;
}

.description__logo img.animate-on-scroll.animate {
	transform: scale(1);
	opacity: 1;
}

.description__text.animate-on-scroll {
	transform: translateX(-50px);
	transition: all 0.5s;
	transition-delay: 0.5s;
	opacity: 0;
}

.description__text.animate-on-scroll.animate {
	transform: translateX(0px);
	opacity: 1;
}

.title.animate-on-scroll {
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.8s;
}

.title.animate-on-scroll.animate {
	opacity: 1;
	transform: translateY(0);
}

/* Footer */

#footer {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

.footer__container {
	display: flex;
	width: 100%;
	flex-direction: column;
	grid-gap: 10px;
	/*grid-gap: 80px;
		padding-right: 20rem;*/
}

.footer__container__head {
	width: 100%;
	display: flex;
	justify-content: center;
}

.footer__container__head img {
	width: 250px;
	height: auto;
	margin-bottom: 1rem;
}

.footer__container__options {
	display: flex;
	flex-wrap: nowrap;
	grid-gap: 40px;
}

.footer__container__options__item {
	color: white;
	text-decoration: none;
	font-size: 15px;
}

.footer__container__options__item:before {
	margin-right: 10px;
}

.footer__container__line {
	width: 100%;
	height: 1.5px;
	background-color: var(--color-secondary);
	margin-top: 1rem;
	margin-bottom: 1rem;
	opacity: 0.5;
}


.footer__container__social {
	display: flex;
	grid-gap: 15px;
	justify-content: center;
	flex-wrap: wrap;
}

.footer__container__social__item {
	color: white;
	font-size: 20px;
	text-decoration: none;
}

.footer__container__social__item:before {
	margin-right: 6px;
}

.footer__container__credit {
	font-size: 14px;
	color: var(--color-secondary);
	opacity: 0.4;
	text-align: left;
}

/* Venta institucional */

.main {
	background-image: url("../img/institucional-bg-01.jpeg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 3rem;
}

.main .container {
	padding-left: 20px;
	padding-right: 20px;
}

.main-colorbg {
	background-color: rgba(76, 95, 128, 0.85);
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.solutions,
.contact {
	position: relative;
	z-index: 1;
}

.solutions__title {
	color: white;
	width: 60%;
	margin-left: auto;
	text-align: left;
	margin-bottom: 2rem;
	margin-top: 3.5rem;
}

.solutions__description {
	position: relative;
	background: white;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.solutions__description__image {
	width: auto;
	height: 320px;
	position: absolute;
	bottom: 0;
	right: 58%;
}

.solutions__description__image img {
	width: auto;
	height: 100%;
}

.solutions__description__image.animate-on-scroll {
	transform: translate(-70px, 0);
	opacity: 0;
	transition: all 1.5s;
}

.solutions__description__image.animate-on-scroll.animate {
	transform: translate(0, 0);
	opacity: 1;
}

.solutions__description__text {
	width: 60%;
	margin-left: auto;
	text-align: left;
	font-weight: 300;
	color: var(--color-primary);
	line-height: 1.3;
}

.contact {
	margin-top: 4rem;
	padding-left: 20px;
	padding-right: 20px;
}

.contact .container {
	justify-content: center;
	max-width: 900px;
	padding-left: 0;
	padding-right: 0;
}

.contact__form {
	width: 100%;
}

.contact__image {
	width: 40%;
	height: 620px;
	border-radius: 15px;
	overflow: hidden;
	margin-bottom: -7rem;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, .24);
}

.contact__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contact__image.animate-on-scroll {
	transform: translate(120px, 0);
	transition: 1.5s;
	opacity: 0;
}

.contact__image.animate-on-scroll.animate {
	transform: translate(0, 0);
	opacity: 1;
}

.contact__form__head {
	width: 100%;
	text-align: left;
	margin-bottom: 1.5rem;
}

.contact__form__head__text {
	color: white;
}

.contact__form__head__text.subtitle {
	font-size: 20px;
}

.contact__form__body {
	display: flex;
	grid-gap: 20px;
	flex-direction: column;
	align-items: flex-start;
}

.contact__form__body__row {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	grid-gap: 10px;
	width: 100%;
}

.contact__form__body .error {
	color: white;
	font-size: 14px;
	text-align: left;
}

.contact__form__body .error.active {
	background-color: rgb(233 51 51 / 44%);
	padding: 5px 10px;
}

.form-float .contact__form__body .error.active {
	background-color: rgb(233 51 51 / 100);
}

.contact__form__body__row--double {
	display: flex;
	width: 100%;
	grid-gap: 20px;
}

.contact__form__body__row__label {
	color: white;
}

.contact__form__body__row__input {
	width: 100%;
	position: relative;
}

.contact__form__body__row__input input,
.contact__form__body__row__input select,
.contact__form__body__row__input__file {
	width: 100%;
	font-size: inherit;
	font-size: inherit;
	padding: 15px 10px;
	border-radius: 5px;
	outline: none;
	border: none;
	font-family: inherit;
}

.contact__form__body__row__input__file option {
	font-family: inherit;
}

.contact__form__body__row__input__file {
	background-color: white;
	min-height: 49.30px;
	cursor: pointer;
}

.contact__form__body__row__input__file:after {
	content: attr(data-text);
	width: 100%;
	left: 0;
	z-index: 2;
	text-align: left;
	line-height: 1;
	display: flex;
	align-items: center;
}

.contact__form__body__row__input .contact__form__body__row__input__file__input {
	opacity: 0;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	cursor: pointer;
	padding: 0;
}

.contact__form__body__row__input__icon {
	height: 90%;
	width: 40px;
	background: var(--color-primary);
	position: absolute;
	right: 2px;
	top: 5%;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.contact__form__body__row__input__icon:before {
	color: white;
	font-size: 30px;
}

.contact__form__body__row__input__icon.icon-mail:before,
.contact__form__body__row__input__icon.icon-upload-cloud:before {
	font-size: 22px;
}

.contact__form__body__submit {
	width: auto;
	padding: 10px 40px;
	color: var(--color-primary);
	font-size: 18px;
	border-radius: 5px;
	background: white;
	outline: none;
	border: none;
	cursor: pointer;
	transition: all 0.3s;
}

.contact__form__body__submit:hover {
	transform: scale(1.1);
}

/*.project{
		margin-top: 4rem;
	}*/

.project .container {
	flex-direction: column;
}

.project .title {
	max-width: 800px;
	width: 100%;
}

.project__image {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, .24);
	max-width: 900px;
	height: 550px;
	width: 100%;
}

.project__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project__image.animate-on-scroll {
	opacity: 0;
	transform: translate(0, 100px);
	transition: all 1s;
}

.project__image.animate-on-scroll.animate {
	opacity: 1;
	transform: translate(0, 0);
}

.project__image__gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000000;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.57) 100%);
}

.counts {
	position: absolute;
	display: flex;
	color: white;
	grid-gap: 4rem;
	bottom: 2rem;
	z-index: 1;
}

.project__image__count__row {
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.project__image__count__row__min {
	font-size: 28px;
	font-weight: 700;
}

.project__image__count__row__max {
	font-size: 58px;
	font-weight: 700;
}

.project__image__count__row.animate-on-scroll {
	transform: scale(0.6);
	opacity: 0;
	transition: all 0.6s 0.9s;
}

.project__image__count__row.animate-on-scroll.animate {
	transform: scale(1);
	opacity: 1;
}

.project__image__count__row.text.animate-on-scroll {
	opacity: 0;
	transform: translateY(-10px);
	transition: all 0.5s 1.3s;
}

.project__image__count__row.text.animate-on-scroll.animate {
	opacity: 1;
	transform: translateY(0px);
}

.project__description {
	/*font-size: 18px;*/
	font-weight: 300;
	color: var(--color-primary);
	max-width: 900px;
}

.section.portfolio {
	padding-top: 0;
}

.section.portfolio .container {
	flex-direction: column;
}

.slider {
	background-color: #F3F5F7;
	padding: 2rem;
	border-radius: 20px;
	grid-gap: 1.4rem;
	position: relative;
}

.portfolio__slider {
	position: relative;
	width: 100%;
}

.portfolio__slider__item {
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.portfolio__slider__item.active {
	opacity: 1;
	visibility: visible;
	position: relative;
}

.portfolio__slider__content {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-bottom: 1rem;
}

.portfolio__slider__text {
	width: 40%;
	text-align: left;
}

.portfolio__slider__text h3 {
	font-size: 32px;
	color: var(--color-primary);
	margin: 0;
	font-weight: 900;
	line-height: 1.5;
}

/*.portfolio__slider__text h3 span {
	  color: #3f5377;
	}*/

.portfolio__slider__text h4 {
	font-size: 25px;
	color: #8E8E8E;
	margin-bottom: 1rem;
}

.portfolio__slider__text p {
	color: #555;
	max-width: 300px;
	line-height: 1.5;
}

.portfolio__slider__text__bottom{
	margin-top: 1.5rem;
}

.portfolio__slider__text__bottom a{
	text-decoration: none;
	color: var(--color-primary);
	font-weight: 700;
}

.portfolio__slider__text__bottom a:hover{
	text-decoration: underline;
}

.portfolio__slider__image {
	width: 60%;
	height: 400px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	border-radius: 20px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.portfolio__slider__image a{
	width: 100%;
	height: 100%;
}

.portfolio__slider__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* Progreso */
.slider-controls {
	text-align: center;
	margin-bottom: 10px;
}

.slider-pause {
	border: 2px solid var(--color-primary);
	border-radius: 50%;
	padding: 5px 10px;
	font-size: 18px;
	background: none;
	color: var(--color-primary);
	cursor: pointer;
	width: 34px;
	height: 34px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slider-progress {
	display: flex;
	gap: 1rem;
	margin-top: 20px;
	justify-content: center;
	width: 100%;
}

.slider-progress .bar {
	height: 3px;
	width: 100%;
	background-color: #ccc;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.slider-progress .bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	/* ✅ CORRIGE que la barra empiece desde el lado izquierdo */
	height: 100%;
	width: 100%;
	background-color: #3f5377;
	transform: scaleX(var(--progress, 0));
	transform-origin: left;
	transition: none;
	/* ❌ Elimina suavizado para que se congele en pausa */
}


/* Responsive */
@media (max-width: 768px) {
	.portfolio__slider__content {
		flex-direction: column;
		text-align: center;
	}

	.portfolio__slider__text,
	.portfolio__slider__image {
		width: 100%;
	}

	.portfolio__slider__text {
		text-align: center;
	}

	.portfolio__slider__text p {
		max-width: initial;
	}

	.portfolio__slider__image {
		height: 280px;
	}
}

/* Cliente */

.client {
	padding: 0 0 5.3rem;
	position: relative;
}

.client .container {
	flex-direction: column;
}

.client__wrapper {
	position: relative;
	overflow: hidden;
	padding: 0 40px;
	/* da espacio para las flechas sin tapar */
}

.client__body {
	display: flex;
	gap: 20px;
	transition: transform 0.4s ease-in-out;
	will-change: transform;
}

.client__body__item {
	flex: 0 0 auto;
	width: 16%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.client__body__item__image {
	max-width: 100%;
	height: auto;
	opacity: 0.8;
	filter: grayscale(100%);
	transition: transform 0.3s ease;
}

.client__body__item__image:hover {
	opacity: 1;
	transform: scale(1.05);
}

.client__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	font-size: 30px;
	cursor: pointer;
	z-index: 2;
	color: #444;
	opacity: 0.5;
	transition: opacity 0.3s;
}

.client__nav:hover {
	opacity: 1;
}

.client__nav--prev {
	left: 10px;
}

.client__nav--next {
	right: 10px;
}

@media (max-width: 800px) {
	.client__body__item {
		width: 33.33%;
	}
}

@media (max-width: 480px) {
	.client__body__item {
		width: 50%;
	}
}

/* Blog */

.head-blue {
	width: 100%;
	height: 390px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.head-blue.article {
	height: 340px;
}

.head-blue__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background-position: center 30%;
	background-size: cover;
}

.head-blue__image.article {
	background: initial;
}

.head-blue__image.blog {
	background-image: url(../img/blog-bg-01.jpeg);
	transform: scale(1.2);
}

.head-blue__gradient {
	background-color: var(--color-primary);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.7;
}

.head-blue .container {
	flex-direction: column;
	grid-gap: 1rem;
	max-width: 750px;
}

.head-blue.article .container {
	max-width: 800px;
}

.head-blue__title {
	position: relative;
	z-index: 1;
	color: white;
}

.head-blue__text {
	position: relative;
	z-index: 1;
	color: white;
}

.head-blue__text.category {
	background-color: white;
	color: var(--color-primary);
	padding: 10px 20px;
	font-weight: bold;
	border-radius: 10px;
}

.head-blue__text.animate-on-scroll {
	opacity: 0;
	transition: all 0.5s 0.4s;
}

.head-blue__text.animate-on-scroll.animate {
	opacity: 1;
}

.blog .container {
	flex-direction: column;
}

.blog__head {
	display: flex;
	width: 100%;
	grid-gap: 3rem;
	justify-content: center;
	align-items: flex-start;
}

.blog__head__filter {
	display: flex;
	grid-gap: 10px;
	align-items: center;
	margin-left: auto;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.blog__head__filter__select {
	color: var(--color-primary);
	border-color: var(--color-primary);
	padding: 5px 10px;
	border-radius: 5px;
	font-family: inherit;
	font-size: inherit;
}

.blog__head__categories {
	display: flex;
	align-items: flex-start;
	margin-right: auto;
	grid-gap: 18px;
	flex-wrap: wrap;
}

.blog__head__categories__item {
	color: var(--color-primary);
	padding: 8px 10px;
	cursor: pointer;
	position: relative;
}

.blog__head__categories__item::after {
	content: "";
	width: 100%;
	height: 1.5px;
	position: absolute;
	bottom: 0;
	background-color: var(--color-primary);
	display: block;
	transition: all 0.3s;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
}

.blog__head__categories__item:hover:after {
	transform: translate(-50%, -50%) scale(1);
}

.blog__head__categories__item.active {
	background-color: #F2F2F2;
	border-radius: 5px;
	padding-left: 15px;
	padding-right: 15px;
}

.blog__head__categories__item.active:hover:after {
	transform: translate(-50%, -50%) scale(0);
}

.blog__body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
}

.blog__body__item {
	width: 100%;
	height: 330px;
	overflow: hidden;
	background-color: #ddd;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	grid-gap: 20px;
	padding: 20px;
	align-items: center;
	justify-content: center;
	position: relative;
	text-decoration: none;
	cursor: pointer;
}

.blog__body__item.span {
	grid-column: 1 / span 2;
}

.blog__body__item__categorie {
	margin-bottom: auto;
	font-size: 14px;
	background-color: var(--color-primary);
	padding: 8px 15px;
	color: white;
	border-radius: 10px;
	margin-right: auto;
	z-index: 1;
}

.blog__body__item__title {
	width: 100%;
	text-align: left;
	font-size: 20px;
	font-weight: bold;
	color: white;
	z-index: 1;
}

.blog__body__item__image,
.blog__body__item__gradient {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;

}

.blog__body__item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: all 0.3s;
}

.blog__body__item:hover .blog__body__item__image img {
	transform: scale(1.1);
}

.blog__body__item__gradient {
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.57) 100%);
}

/* Article */

.article-text {
	padding-bottom: 3.2rem;
}

.head-blue__return {
	position: absolute;
	z-index: 1;
	top: 20px;
	left: 20px;
	color: white;
	text-decoration: none;
	display: flex;
	grid-gap: 10px;
	opacity: 0.5;
	transition: all 0.3s;
}

.head-blue__return:hover {
	opacity: 1;
}

.article-text .container {
	flex-direction: column;
	max-width: 940px;
	padding: 35px;
	margin-top: -10rem;
	border-radius: 20px;
	background-color: white;
	z-index: 1;
	position: relative;
	grid-gap: 1.5rem;
}

.article-text__paragraph {
	text-align: left;
}

.article-text__double-image {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 25px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.article-text__picture {
	width: 100%;
	display: flex;
	grid-gap: 10px;
	flex-direction: column;
}

.article-text__picture__description {
	font-size: 14px;
	opacity: 0.3;
}

.article-text__picture__image {
	width: 100%;
	height: 250px;
	border-radius: 14px;
	object-fit: cover;
}

.article-text__video {
	position: relative;
	width: 80%;
	padding-bottom: 46.25%;
	height: 0;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	/*transform: scale(0.8);*/
}

.article-text__video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.article__control {
	background: rgba(217, 217, 217, .2);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3rem 20px;
}

.article__control .container {
	max-width: 940px;
	display: flex;
	grid-gap: 20px;
	justify-content: space-between;
	width: 100%;
	flex-wrap: nowrap;
}

.article__control__item {
	display: flex;
	align-items: flex-start;
	grid-gap: 10px;
	color: var(--color-primary);
	font-size: 15px;
	text-decoration: none;
}

.article__control__item__title {
	max-width: 300px;
	text-align: right;
}

.article__control__item:hover .article__control__item__title,
.article__control__item:hover .article__control__item__text {
	text-decoration: underline;
}

/* Object */

.object .container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2.5rem 6rem;
	align-items: flex-start;
}

.object .title {
	grid-column: 3 span;
	color: var(--color-primary);
}

.object__item {
	display: flex;
	flex-direction: column;
	grid-gap: 20px;
	align-items: center;
}

.object__item-dual {
	grid-gap: 10px;
	display: flex;
	flex-direction: column;
}

.object__item__icon {
	width: 150px;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 105px;
	background-color: var(--color-primary);
	border-radius: 100%;
	color: white;
	flex-shrink: 0;
}

.object__item__text {
	font-size: 20px;
	font-weight: 900;
	color: var(--color-primary);
}

.object__item__description {
	line-height: 1.25;
	text-align: justify;
}

/* Full button */
.fullbutton {
	display: flex;
	justify-content: center;
	align-items: center;
}

.fullbutton--double {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.fullbutton__item {
	width: 100%;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	cursor: pointer;
}

.fullbutton__item:hover .fullbutton__item__img {
	transform: scale(1.2);
}

.fullbutton__item__img {
	display: block;
	object-fit: cover;
	transition: all 0.3s;
}

.fullbutton__item__title {
	position: relative;
	z-index: 1;
	font-size: 25px;
	color: white;
	font-weight: bold;
}

.fullbutton__item__color,
.fullbutton__item__img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.fullbutton__item__color {
	background-color: #404040;
	opacity: 0.7;
}

.fullbutton__item__color.blue {
	background-color: var(--color-primary);
}

.form-float {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 4rem;
	margin-top: 3rem;
	opacity: 0;
	transition: all 1s;
}

.form-float.animate {
	opacity: 1;
}

.form-float .container {
	background-color: #F3F5F7;
	padding: 35px;
	border-radius: 18px;
	width: 100%;
	position: relative;
}

.form-float-cross {
	position: absolute;
	top: 20px;
	right: 18px;
	color: var(--color-primary);
	opacity: 0.6;
	cursor: pointer;
	transition: all 0.3s;
}

.form-float-cross:hover {
	opacity: 1;
}

.form-float .container:before {
	content: "";
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 40px solid #F3F5F7;
	position: absolute;
	top: -30px;
	right: 8rem;
}

.form-float .contact__form {
	width: 100%;
}

.form-float .subtitle,
.form-float .contact__form__head__text {
	color: var(--color-primary);
}

.form-float .contact__form__body__row__label {
	color: #555555;
}

.form-float .contact__form__body__submit {
	background-color: var(--color-primary);
	color: white;
}

/* POP up */
.lightbox {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background: rgba(0, 0, 0, .8);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.lightbox.active {
	opacity: 1;
	visibility: visible;
}

.lightbox.hidden-pop {
	display: none;
}

.lightbox .loading {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
}

.spinner-loading {
	width: 5em;
	height: 5em;
	border: .6em solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: white;
	margin-right: 0.5em;
	vertical-align: middle;
	animation: spin 1s ease-in-out infinite;
	display: inline-block;
}

.loading__text {
	margin-top: 1rem;
	color: white;
	font-size: 22px;
}

.notify {
	display: flex;
	max-width: 600px;
	width: 85%;
	height: 80%;
	max-height: 500px;
	background-color: white;
	border-radius: 20px;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	gap: 20px;
	overflow: hidden;
	position: relative;
}

.notify__cross {
	color: var(--color-primary);
	top: 20px;
	right: 20px;
	position: absolute;
	cursor: pointer;
}

.notify__header__picture {
	width: auto;
	height: 200px;
}

.notify__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.notify__body__text {
	font-size: 14px;
	color: var(--color-gray);
}

.notify__body__title {
	font-size: 25px;
	color: var(--color-primary);
	font-weight: 800;
}

.notify__body__data {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 15px;
}

.notify__body__data__item {
	display: flex;
	align-items: center;
	grid-gap: 10px;
	font-size: 15px;
}

.notify__body__data__item.is-document {
	grid-column: span 2;
}

.notify__body__data__item__title {
	background: var(--color-primary);
	color: white;
	padding: 5px 10px;
	border-radius: 5px;
	width: 85px;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Footer Rinnai */

.footer__container__dual {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-gap: 30px;
	width: 100%;
}

/* group-bnr-area */

#group-bnr.bnr_item {
	max-width: 655px;
	background-color: #fff;
	border: solid 1px #c0c6cf;
	width: 100%;
}

#group-bnr.bnr_item a {
	border: solid 2px #fff;
	padding: 35px 40px;
	display: flex;
	align-items: center;
	transition: .5s;
	color: #3e3a39;
	text-decoration: none;
}

#group-bnr.bnr_item a:hover {
	border: solid 2px #c0c6cf;
	opacity: 1;
	text-decoration: none;
	color: #3e3a39;
}

#group-bnr.bnr_item .bnr_item_logo img {
	max-width: 100px;
	margin-right: 40px;
}

#group-bnr.bnr_item .bnr_item_text {
	font-size: 14px;
	font-family: "neue-haas-grotesk-display";
	margin: 0;
	text-align: left;
	line-height: 1.5;
}

@media (max-width: 767px) {
	#group-bnr.bnr_item {
		max-width: 100%;
	}

	.logo-rinnai>div {
		width: 100%;
	}

	#group-bnr.bnr_item a {
		padding: 40px 35px;
		display: block;
		align-items: center;
	}

	#group-bnr.bnr_item .bnr_item_logo {
		text-align: center;
	}

	#group-bnr.bnr_item .bnr_item_logo img {
		margin: 0 0 30px 0;
	}
}

@media screen and (max-width: 1025px) {
	.footer__container__dual {
		flex-direction: column;
		grid-gap: 25px;
	}
}


/**/

.brand-section__skeleton {
	padding: 2rem;
	width: 100%;
	display: block;
	/* Por defecto, se mostrará con JS */
}

.brand-section__skeleton .container {
	grid-gap: 2rem;
	flex-direction: column;
}

.brand-section__skeleton.hidden {
	display: none;
}

.brand-section__skeleton.gray {
	background-color: var(--color-secondary);
}

.brand-section__skeleton__title,
.brand-section__skeleton__paragraph__line,
.brand-section__skeleton__box {
	animation: skeleton-loading-brand 1.5s infinite;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
}

.brand-section__skeleton__title {
	border-radius: 4px;
	height: 2.4rem;
	max-width: 200px;
	width: 100%;
}

.brand-section__skeleton__paragraph {
	width: 100%;
	display: flex;
	grid-gap: 5px;
	flex-direction: column;
}

.brand-section__skeleton__paragraph__line {
	height: 1rem;
	border-radius: 4px;
}

.brand-section__skeleton__box {
	width: 100%;
	max-width: 840px;
	height: 420px;
	animation: skeleton-loading-brand 1.5s infinite;
	border-radius: 8px;
}

@keyframes skeleton-loading-brand {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* Ocultar el contenido real mientras el esqueleto se muestra */
.brand-content.hidden {
	display: none;
}

.off {
	display: none !important;
}

.hidden {
	opacity: 0;
}

.on {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.hidden-pop {
	display: none;
}

.off-pop {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* responsive */

@media screen and (max-width: 1980px) {

	.solutions__description__text,
	.solutions__title {
		width: 50%;
	}
}

@media screen and (max-width: 1500px) {

	.project__image {
		max-width: 800px;
		height: 450px;
	}

	.contact .container {
		max-width: 800px;
	}

	.brand-section__skeleton__box {
		max-width: 780px;
		height: 500px;
	}

	.section {
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}

	.menu__logo img {
		height: 30px;
	}

	.menu__options__item {
		font-size: 14px;
	}

	body {
		padding-top: 60px;
	}

	.hero {
		height: 450px;
	}

	.description__logo img {
		width: 200px;
	}

	.description__text {
		font-size: 16px;
	}

	.mission__elements__item__icon {
		font-size: 60px;
	}

	.mission__elements__item__title {
		font-size: 18px;
	}

	.mission__elements__item__text {
		font-size: 13px;
	}

	#nosotros {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
		max-width: 1000px;
	}

	.title {
		font-size: 24px;
	}

	.subtitle {
		font-size: 18px;
	}

	.container {
		grid-gap: 2rem;
	}

	.history__carrousel__item h3 {
		font-size: 17px;
	}

	.history__carrousel__item p {
		font-size: 14px;
	}

	.history__carrousel__item__diamond {
		height: 200px;
	}

	.products__head__button {
		font-size: 15px;
	}

	.products__body__gallery__item__rectangle {
		height: 230px;
	}

	.products__body__gallery__item__rectangle__img {
		width: 100%;
	}

	.products__head .title {
		font-size: 20px;
	}

	#stores {
		padding: 2.5rem 20px;
	}

	.footer__container__head img {
		width: 200px;
	}

	.container.footer__container {
		grid-gap: 10px;
	}

	.blog__body__item__title {
		font-size: 18px;
	}

	.object__item__text {
		font-size: 18px;
	}

	.object__item__description {
		font-size: 14px;
	}

	.portfolio__slider__text h3 {
		font-size: 25px;
	}

	.portfolio__slider__text h4 {
		font-size: 20px;
		margin-top: 1rem;
	}

	.solutions__description__image {
		height: 280px;
	}

	.portfolio__slider__text p {
		font-size: 15px;
	}

	.philosophy__video {
		width: 50%;
		padding-bottom: 30%;
	}

	.store__body__filter__row__label,
	.store__body__filter__row__select,
	.store__body__list__item,
	.products__body__gallery__item__description,
	.store__body__info,
	.contact__form__body__row__label,
	.contact__form__body__row__input {
		font-size: 15px;
	}

	.contact__form__body__row__input input,
	.contact__form__body__row__input select,
	.contact__form__body__row__input__file {
		padding: 12px 10px;
	}

	.contact__form__body__submit {
		font-size: 16px;
	}

	.store__body {
		grid-template-columns: 1.5fr 1fr 2fr;
	}

	.store__body__map {
		height: 550px;
	}

	.store__body__info__picture {
		height: 270px;
	}

	.fullbutton__item__title {
		font-size: 18px;
	}
}

@media screen and (max-width: 1280px) {
	#nosotros {
		width: 85%;
		padding-right: 3rem;
		padding-left: 3rem;
	}

	.form-float .container {
		width: 90%;
	}

	.store__body__info__picture {
		height: 280px;
	}
}

@media screen and (max-width: 1180px) {
	.history__carrousel__item__diamond {
		max-width: 250px;
		height: 340px;
	}
}

@media screen and (max-width: 1050px) {
	#nosotros .container {
		flex-direction: column;
		grid-gap: .5rem;
	}

	.description__text {
		font-size: 18px;
		text-align: center;
	}
}

@media screen and (max-width: 1020px) {

	.solutions__description__text,
	.solutions__title {
		width: 55%;
	}

	.object .container {
		grid-gap: 2.5rem 3rem;
	}

	.solutions__title {
		margin-top: 2.5rem;
	}

	.solutions__description__image {
		right: 62%;
	}

	.contact__form {
		width: 50%;
	}

	.contact__image {
		width: 50%;
		height: 580px;
	}
}

@media screen and (max-width: 1000px) {
	.philosophy__video {
		width: 80%;
		padding-bottom: 45%;
	}

	.brand-section__skeleton__box {
		max-width: 700px;
		height: 440px;
	}
}

@media screen and (max-width: 980px) {
	.history__carrousel__item__diamond {
		max-width: 270px;
		height: 280px;
	}

	.history__carrousel__item {
		width: calc((100% - (20px * 1)) / 2);
	}

	.store__body {
		grid-template-columns: 1fr;
		max-width: 650px;
	}

	.store__body__map {
		grid-column: initial;
		height: 500px;
	}

	.store__body__list {
		flex-direction: row;
		justify-content: center;
	}

	.store__body__list__item {
		width: auto;
		min-width: 200px;
	}

	.store__body__info {
		align-items: center;
		text-align: center;
	}

	.store__body__filter {
		flex-direction: row;
		text-align: left;
		flex-wrap: wrap;
		justify-content: center;
	}

	.store__body__filter__row {
		width: calc(calc(100% / 3) - 20px);
	}

	.store__body__filter__button {
		padding: 10px 25px;
	}

	.store__body__list__item.store-skeleton__item {
		width: calc(calc(100% / 2) - 20px);
	}

	.store__body__list {
		flex-wrap: wrap;
	}

	.container.stores {
		grid-gap: 2.5rem;
	}

	.history__carrousel__track {
		width: 90%;
	}
}

@media screen and (max-width: 940px) {
	.description__logo img {
		width: 200px;
	}

	.description__text {
		font-size: 19px;
		line-height: 1.2;
	}
}

@media screen and (max-width: 900px) {
	.products__body__gallery__item {
		width: calc((100% - 40px) / 3);
		/* 3 elementos, 2 espacios de 20px = 40px */
	}
}

@media screen and (max-width: 880px) {
	.brand-section__skeleton__box {
		max-width: 620px;
		height: 380px;
	}

	.notify__header__picture {
		width: 80%;
		height: 140px;
		object-fit: contain;
	}

	.notify__body__data__item {
		flex-direction: column;
		grid-gap: 5px;
	}

	.footer__container__options {
		grid-gap: 25px;
	}

	.solutions__description__text,
	.solutions__title {
		width: 45%;
	}

	.solutions__title {
		margin-top: 2rem;
	}

	.solutions__description__image {
		right: 53%;
		height: 350px;
	}

	.contact .container {
		flex-direction: column;
	}

	.contact__form {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}

	.contact__form__head {
		text-align: center;
	}

	.contact__form__body {
		align-items: center;
	}

	.contact__image {
		width: 100%;
		max-width: 700px;
		height: 400px;
	}

	.contact__image.animate-on-scroll {
		transform: translate(0, 50px);
	}

	.project__image {
		height: 450px;
	}

	.article-text__video {
		width: 100%;
		padding-bottom: 56.25%;
	}
}

@media screen and (max-width: 860px) {
	.object .container {
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 2rem;
		max-width: 580px;
	}

	.object .title {
		grid-column: initial;
	}

	.object .subtitle {
		grid-column: initial;
		margin-bottom: 0.8rem;
	}

	.object__item__icon {
		width: 100px;
		height: 100px;
		font-size: 85px;
	}
}

@media screen and (max-width: 840px) {
	.footer__container__options__item {
		font-size: 13px;
	}
}

@media screen and (max-width: 800px) {
	.menu__logo img {
		height: auto;
		width: 50%;
		min-width: 130px;
	}

	.menu__options {
		display: none;
	}

	.menu__button {
		display: flex;
	}

	.mission__elements {
		grid-template-columns: repeat(2, 1fr);
	}

	.card-face {
		padding: 10px;
	}

	.blog__head {
		flex-direction: column;
		grid-gap: 1.5rem;
		align-items: center;
	}

	.blog__head__categories {
		justify-content: center;
		margin: initial;
	}

	.blog__head__filter {
		margin: initial;
		justify-content: center;
	}

	.blog__body {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 780px) {
	.brand-section__skeleton__box {
		max-width: 600px;
		height: 350px;
	}

	.solutions__description__image {
		right: 50%;
	}
}

@media screen and (min-width: 769px) {
	.slider-controls {
		position: absolute;
		bottom: 2.7rem;
		left: 2rem;
	}
}

@media (max-width: 768px) {

	.toggle-button {
		background: none;
		border: none;
		color: var(--color-primary);
		font-weight: bold;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.toggle-button i {
		transition: transform 0.3s ease;
	}

	.toggle-button.active i {
		transform: rotate(180deg);
		/* flecha hacia arriba */
	}
}

@media screen and (max-width: 750px) {
	.footer__container__options {
		grid-gap: 10px;
	}

}

@media screen and (max-width: 700px) {

	.store__body__list__item {
		min-width: initial;
		padding: 10px;
	}

	.brand-section__skeleton__box {
		max-width: 500px;
		height: 300px;
	}

	.history__carrousel__item__diamond {
		max-width: 200px;
		height: 260px;
	}


	.circle-history {
		width: 90px;
		left: 7%;
	}

	.item-off {
		display: none;
	}

	.brands__carrousel__container {
		max-width: 100%;
	}

	.brands__carrousel__nav {
		display: flex;
	}

	.brands__carrousel__track {
		display: flex;
		grid-gap: 10px;
		padding-bottom: 20px;
	}

	.brands__carrousel__item.is-duplicate {
		display: flex;
	}

	.brands__carrousel__item {
		flex-shrink: 0;
		flex-grow: 0;
		width: calc((100% - 10px) / 2);
	}

	.brands__carrousel__track {
		width: 90%;
		margin: auto;
	}

	.article-text__double-image {
		grid-template-columns: repeat(1, 1fr);
		max-width: 85%;
	}

	.article-text .container {
		padding: 20px;
	}
}

@media screen and (max-width: 690px) {
	.footer__container__options {
		flex-direction: column;
	}

	.footer__container__options__item {
		font-size: 15px;
	}
}

@media screen and (max-width: 680px) {
	.solutions__title {
		width: 100%;
		text-align: center;
		margin-top: 0;
		margin-bottom: 13rem;
	}

	.solutions__description__image {
		position: relative;
		right: initial;
		margin-top: -240px;
		height: 370px;
		margin-bottom: 1.8rem;
		display: flex;
		justify-content: center;
	}

	.solutions__description__text {
		width: 100%;
		text-align: center;
	}

	.contact__image {
		height: 300px;
	}
}

@media screen and (max-width: 600px) {

	.products__body__gallery__item__rectangle__img {
		width: auto;
		max-height: 170px;
	}

	.products__body__gallery__item {
		width: calc((100% - 20px) / 2);
		/* 2 elementos, 1 espacio de 20px = 20px */
	}

	.products__body__gallery__item__rectangle {
		height: 180px;
	}

	.products__body__gallery__item__description {
		font-size: 15px;
	}

	.products__body__gallery__item__rectangle__button {
		width: 24px;
		height: 24px;
		bottom: 15px;
		right: 15px;
		font-size: 14px;
	}

	.products__body__gallery__item:hover .products__body__gallery__item__rectangle__button {
		width: 100px;
		height: 100px;
		transform: translate(55px, 55px);
		font-size: 20px;
	}

	.products__body__gallery__item:hover .products__body__gallery__item__rectangle__button::before {
		transform: translate(-14px, -14px);
	}

	.products__head {
		flex-direction: column;
	}

	.products__head .title {
		margin-left: auto;
	}

	.head-blue {
		height: 440px;
	}

	.head-blue.article {
		height: 385px;
	}

	.fullbutton {
		grid-template-columns: repeat(1, 1fr);
	}

	.fullbutton__item {
		height: 200px;
	}

	.fullbutton__item__title {
		font-size: 22px;
	}

	.description__text {
		font-size: 17px;
	}
}

@media screen and (max-width: 580px) {

	.description__logo img {
		width: 250px;
	}

	.container {
		flex-direction: column;
	}

	.menu .container {
		flex-direction: row;
	}

	.history__carrousel__item {
		width: 100%;
	}

	.history__carrousel__item__diamond {
		max-width: 280px;
	}

	.circle-history {
		width: 90px;
		left: 25%;
	}

	.title {
		font-size: 30px;
	}

	.mission__elements__item__icon {
		font-size: 50px;
	}

	.mission__elements__item__title {
		font-size: 16px;
	}

	.mission__elements__item__text {}

	.philosophy__video {
		width: 100%;
		padding-bottom: 56.25%;
	}

	.blog__body {
		grid-template-columns: repeat(1, 1fr);
	}

	.blog__body__item.span {
		grid-column: initial;
		height: 360px;
	}

	.blog__body__item {
		height: 260px;
	}

	.article__control .container {
		flex-direction: row;
	}
}

@media screen and (max-width: 560px) {
	.card-face {
		flex-direction: column;
		text-align: center;
	}

	.back {
		text-align: center;
	}

	.mission__elements__item {
		height: 200px;
	}

	.mission__elements__item__icon {
		font-size: 70px;
	}

	.mission__elements__item__text {
		text-align: center;
	}
}

@media screen and (max-width: 550px) {
	.brand-section__skeleton__box {
		height: 250px;
	}

	.footer__container__head img {
		width: 180px;
	}

	.footer__container__social {
		font-size: 14px;
		grid-gap: 10px;
	}

	.footer__container__credit {
		font-size: 12px;
	}
}

@media screen and (max-width: 480px) {
	.solutions__description__image {
		height: 30s0px;
	}

	.counts {
		grid-gap: 2rem;
	}

	.project__image__count__row__max {
		font-size: 25px;
	}

	.project__image__count__row {
		font-size: 16px;
	}
}

@media screen and (max-width: 440px) {
	.history__carrousel__item__diamond {
		max-width: 230px;
		height: 230px;
	}

	.article-text__double-image {
		max-width: 90%;
	}

	.article-text__picture__image {
		height: 200px;
	}
}

@media screen and (max-width: 390px) {
	.article-text__picture__image {
		height: 140px;
	}

	.article__control__item__title {
		max-width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

@media screen and (max-width: 345px) {
	.mission__elements__item {
		height: 235px;
	}

	.mission__elements__item__icon {
		font-size: 75px;
	}
}

@media screen and (max-height: 500px) {
	.notify__header__picture {
		height: 70px;
	}

	.notify {
		gap: 10px;
	}
}