@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

: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: 250px;
  	height: auto;
  }

  .hero__container:hover {
    flex: 2;
  }

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

  /*.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: 900px; 
	    overflow: hidden;
	}

	.brands__carrousel__track {
	    display: grid;
	    grid-template-columns: repeat(4, 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: 2rem;
	}

	.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: 80%;
		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;
	}

/* 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__image {
	  width: 60%;
	  height: 350px;
	  overflow: hidden;
	  display: flex;
	  justify-content: center;
	  border-radius: 20px;
	  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	}

	.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);
	    }
	}



/**/

	.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;
}

.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;
		}

		.footer__container__line{
			width: 100%;
		}
	}

	@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__line{
			width: 90%;
		}

		.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;
		}
	}