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

:root {
	--bs-body-font-family: "Montserrat", sans-serif;
	--bs-body-color: #363636;
	--bs-primary-rgb: 72, 192, 182;
	--bs-secondary-rgb: 148, 151, 155;
	--bs-info-rgb: 26, 103, 140;
	--bs-warning-rgb: 242, 2222, 81;
	--bs-success-rgb: 51, 174, 58;
	--bs-light-rgb: 250, 249, 244;
	--bs-border-color: #d0d0d0;
	--c1: #48c0b6;
	--c2: #1a678c;
	--c3: #94979b;
	--c4: #faf9f4;
	--c5: #f2de51;
	--c6: #1d9393;
}

html {
	margin: auto;
	max-width: 1920px;
}

::selection {
	background-color: var(--bs-body-color);
	color: #fff;
}

.aleo {
	font-family: "Aleo", serif;
}

strong {
	font-weight: 600;
}


/* ------ header ------ */
#header {
	backdrop-filter: blur(5px);
	transition: all 0.3s ease;
}

#header.scroll {
	/* background-color: rgba(31, 179, 167, .8); */
	background-color: rgba(72, 192, 182, 0.85);
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, .4);
}

#logo {
	fill: #fff;
	width: 170px;
}

#year50 {
	fill: #fff;
	width: 140px;
}

@media (max-width:1400px) {
	#logo {
		width: 140px;
	}
}

@media (max-width:768px) {
	#logo {
		width: 110px;
	}

	#year50 {
		width: 110px;
	}
}


/* ------ mainBanner ------ */
.mainVideo {
	height: calc(100svh - 180px);
}

.mainBtext {
	top: 50%;
	transform: translateY(-50%);
}

.prodOffset {
	margin-top: -10px;
}

.carousel-indicators [data-bs-target] {
	height: 5px;
}

#product1 .carousel-inner,
#product2 .carousel-inner,
#product3 .carousel-inner,
#product4 .carousel-inner {
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%);
}

#product1 .carousel-indicators [data-bs-target],
#product2 .carousel-indicators [data-bs-target],
#product3 .carousel-indicators [data-bs-target],
#product4 .carousel-indicators [data-bs-target] {
	background-color: #bdc0c2 !important;
	border-radius: 50%;
	height: 8px;
	opacity: .4;
	width: 8px;
}

#product1 .carousel-indicators [data-bs-target].active,
#product2 .carousel-indicators [data-bs-target].active,
#product3 .carousel-indicators [data-bs-target].active,
#product4 .carousel-indicators [data-bs-target].active {
	background-color: #bdc0c2 !important;
	opacity: 1;
}

@media (max-width:1400px) {
	.mainVideo {
		height: calc(100svh - 150px);
	}
}

@media (max-width:768px) {
	.prodOffset {
		margin-top: 10px;
	}
}

@media (max-width:576px) {
	.mainVideo {
		height: 60svh;
	}

	.mainBanner h1 {
		font-size: calc(1.1rem + .9vw);
	}

	.mainBtext {
		bottom: 0;
		top: initial;
		transform: none;
		z-index: 2;
	}

	.mainBanner::after {
		background: linear-gradient(to top, rgba(54, 54, 54, .75), transparent);
		bottom: 0;
		content: "";
		height: 62%;
		left: 0;
		pointer-events: none;
		position: absolute;
		width: 100%;
		z-index: 1;
	}

	#product1 .carousel-indicators,
	#product2 .carousel-indicators,
	#product3 .carousel-indicators,
	#product4 .carousel-indicators {
		bottom: -14px;
	}
}


/* ------ navBar ------ */
#navBarMain .nav-link {
	color: #fff;
	font-size: 1.1rem;
	font-weight: 600;
	padding: .6rem 1rem;
	position: relative;
	text-shadow: 0 0 10px rgba(0, 0, 0, .15);
}

#navBarMain .navbar-nav {
	--bs-nav-link-color: var(--bs-body-color);
}

#navBarMain .lang {
	box-shadow: 0 0 0 1px #fff;
	font-size: .9rem !important;
	padding: .25rem .5rem !important;
}

#navBarMain .lang:hover {
	background-color: #fff;
	color: var(--c1) !important;
}

#navBarMain .navbar-nav .nav-link:hover {
	color: rgba(255, 255, 255, .7);
}

#navBarMain .navbar-nav .nav-link.active,
#navBarMain .navbar-nav .nav-link.show {
	color: #fff;
}

#navBarMain .navbar-nav .nav-link::after {
	background-image: url(../img/menu.svg);
	content: "";
	height: 11px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	top: -3px;
	transition: all 0.6s ease;
	width: 22px;
	opacity: 0;
}

#navBarMain .navbar-nav .nav-link.active::after,
#navBarMain .navbar-nav .nav-link.show::after {
	opacity: 1;
}

.navbar {
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
	border: 1px solid rgba(255, 255, 255, .8);
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .5);
}

@media (max-width:1200px) {

	#navBarMain .navbar-nav .nav-link::after {
		display: none;
	}
}

@media (max-width:768px) {
	#navBarMain .nav-link {
		font-size: 1.07rem;
		padding: .35rem 0;
	}
}


/* ------ misc ------ */
#bgBack {
	bottom: -678px;
	height: 1425px;
	filter: grayscale(1) invert(1);
	mix-blend-mode: luminosity;
	opacity: .13;
	pointer-events: none;
	position: fixed;
	right: -433px;
	width: 1425px;
}

#bgBack img {
	height: 100%;
	transform-origin: center center;
	width: 100%;
}

#wrapSection {
	position: relative;
}

#section1,
#section2,
#section3,
#section4,
#section5,
#section6 {
	position: relative;
}

.lastP p:last-child {
	margin-bottom: 0;
}

.fs-5b {
	font-size: 1.18rem;
}

.mainPad {
	margin-left: 5rem;
	margin-right: 5rem;
}

.grecasOffset {
	bottom: 2.3rem;
}

.ar900x600 {
	aspect-ratio: 900 / 600;
}

.ar900x660 {
	aspect-ratio: 900 / 660;
}

@media (max-width:1400px) {
	.mainPad {
		margin-left: 2.5rem;
		margin-right: 2.5rem;
	}

	#bgBack {
		bottom: -416px;
		height: 900px;
		right: -230px;
		width: 900px;
	}

	.display-6 {
		font-size: 2.3rem;
	}

	.ar900x600 {
		aspect-ratio: 900 / 800;
	}

	.ar900x660 {
		aspect-ratio: 900 / 740;
	}
}

@media (max-width:992px) {
	.mainPad {
		margin-left: 1.5rem;
		margin-right: 1.5rem;
	}

	#wrapSection {
		position: initial
	}
}

@media (max-width:768px) {
	#bgBack {
		bottom: initial;
		height: 600px;
		right: -300px;
		top: -40px;
		width: 600px;
	}

	.grecasOffset {
		bottom: -.5rem;
	}

	.mainPad {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	.display-6 {
		font-size: 1.55rem;
		line-height: 1.1;
	}

	.fs-5b {
		font-size: 1.08rem;
	}
}

@media (max-width:576px) {
	#bgBack {
		height: 430px;
		opacity: .2;
		right: -228px;
		top: -60px;
		width: 430px;
	}

	.ar900x600 {
		aspect-ratio: 900 / 900;
	}

	.ar900x660 {
		aspect-ratio: 900 / 820;
	}
}


/* ------ decorations ------ */
#curve1 {
	height: 29px;
	top: -28px;
}

#curve1 svg {
	height: 29px;
	left: 0;
	position: absolute;
}

.grecas {
	background-image: url(../img/grecas.svg);
	height: 40px;
	left: -20px;
	width: calc(100% + 20px);
}

.decoration1,
.decoration4 {
	width: 90px;
}

.decoration2 {
	width: 170px;
}

.decoration3 {
	width: 100px;
}

@media (max-width:768px) {
	.grecas {
		height: 36px;
	}

	#curve1 {
		height: 12px;
		top: -11px;
	}

	#curve1 svg {
		height: 12px;
	}

	.decoration3 {
		width: 64px;
	}

	.decoration4 {
		width: 54px;
	}

	.decoration2 {
		width: 110px;
	}
}


/* ------ btn ------ */
.btn {
	font-size: .95rem;
	font-weight: 700;
	padding: .5rem 1.3rem;
}

.btn-primary {
	--bs-btn-bg: var(--c1);
	--bs-btn-border-color: var(--c1);
	--bs-btn-hover-bg: var(--c6);
	--bs-btn-hover-border-color: var(--c6);
	--bs-btn-active-bg: var(--c6);
	--bs-btn-active-border-color: var(--c6);
}

.btn-outline-primary {
	--bs-btn-color: var(--c1);
	--bs-btn-border-color: var(--c1);
	--bs-btn-hover-bg: var(--c1);
	--bs-btn-hover-border-color: var(--c1);
	--bs-btn-active-bg: var(--c1);
	--bs-btn-active-border-color: var(--c1);
	--bs-btn-disabled-color: var(--c1);
	--bs-btn-disabled-border-color: var(--c1);
}

.btn-outline-secondary {
	--bs-btn-color: var(--c3);
	--bs-btn-border-color: var(--c3);
	--bs-btn-hover-bg: var(--c3);
	--bs-btn-hover-border-color: var(--c3);
	--bs-btn-active-bg: var(--c3);
	--bs-btn-active-border-color: var(--c3);
	--bs-btn-disabled-color: var(--c3);
	--bs-btn-disabled-border-color: var(--c3);
}

.btn-outline-info {
	--bs-btn-color: var(--c2);
	--bs-btn-border-color: var(--c2);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--c2);
	--bs-btn-hover-border-color: var(--c2);
	--bs-btn-active-bg: var(--c2);
	--bs-btn-active-border-color: var(--c2);
	--bs-btn-disabled-color: var(--c2);
	--bs-btn-disabled-border-color: var(--c2);
}

.btn-info {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--c2);
	--bs-btn-border-color: var(--c2);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--c1);
	--bs-btn-hover-border-color: var(--c1);
	--bs-btn-active-bg: var(--c1);
	--bs-btn-active-border-color: var(--c1);
}

.btn-outline-light {
	--bs-btn-color: var(--c4);
	--bs-btn-border-color: var(--c4);
	--bs-btn-hover-bg: var(--c4);
	--bs-btn-hover-color: var(--c2);
	--bs-btn-hover-border-color: var(--c4);
	--bs-btn-active-bg: var(--c4);
	--bs-btn-active-border-color: var(--c4);
	--bs-btn-disabled-color: var(--c4);
	--bs-btn-disabled-border-color: var(--c4);
}

.btn-close:focus {
	box-shadow: 0 0 0 .22rem rgba(40, 40, 40, .12);
}

@media (max-width:768px) {
	.btn {
		font-size: .9rem;
		padding: .4rem .9rem;
	}
}


/* ------ links ------ */
.link-primary svg {
	fill: var(--c1);
	transition: all 0.3s ease;
}

.link-primary:hover svg {
	fill: var(--c2);
}


/* ------ letters ------ */
.modalText p:first-of-type::first-letter {
	color: var(--c2);
	font-family: "Aleo", serif;
	padding-right: 8px;

	/* Fallback para Firefox */
	font-size: 3em;
	float: left;
	line-height: 1;
	padding-top: 8px;
}

/* Chrome, Safari, Edge */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
	.modalText p:first-of-type::first-letter {
		-webkit-initial-letter: 2;
		initial-letter: 2;

		/* Reseteamos los estilos del fallback */
		font-size: inherit;
		float: none;
		line-height: inherit;
		padding-top: 0;
	}
}

.letter1 p:first-of-type::first-letter {
	color: var(--c2);
	font-family: "Aleo", serif;
	padding-right: 8px;

	/* Fallback para Firefox (que no soporta initial-letter aún) */
	font-size: 3em;
	float: left;
	line-height: 1;
	padding-top: 8px;
	/* Ajuste manual para el fallback */
}

/* Chrome, Safari, Edge */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
	.letter1 p:first-of-type::first-letter {
		-webkit-initial-letter: 2;
		initial-letter: 2;

		/* Reseteamos los estilos del fallback */
		font-size: inherit;
		float: none;
		line-height: inherit;
		padding-top: 0;
	}
}

.letter2 p:first-of-type::first-letter {
	color: var(--c4);
	font-family: "Aleo", serif;
	padding-right: 8px;

	/* Fallback para Firefox */
	font-size: 3em;
	float: left;
	line-height: 1;
	padding-top: 8px;
}

/* Chrome, Safari, Edge */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
	.letter2 p:first-of-type::first-letter {
		-webkit-initial-letter: 2;
		initial-letter: 2;

		/* Reseteamos los estilos del fallback */
		font-size: inherit;
		float: none;
		line-height: inherit;
		padding-top: 0;
	}
}


/* ------ mercado ------ */
.bgMercado {
	padding: 6rem 0;
}

.bgMercado .mBox {
	background-color: rgba(29, 147, 147, .6);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;

	-webkit-mask-image: linear-gradient(to right,
			rgba(0, 0, 0, .4),
			rgba(0, 0, 0, .9));
}

@media (max-width:1400px) {
	.bgMercado {
		padding: 4.5rem 0
	}
}

@media (max-width:768px) {
	.bgMercado {
		padding: 2.5rem 0
	}
}


/* ------ sales ------ */
.bgSales {
	padding: 6rem 0;
}

.bgSales .mBox {
	background-color: rgba(26, 104, 140, .95);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;

	-webkit-mask-image: linear-gradient(to left,
			rgba(0, 0, 0, .7),
			rgba(0, 0, 0, .9));
}

@media (max-width:1400px) {
	.bgSales {
		padding: 4.5rem 0
	}
}

@media (max-width:768px) {
	.bgSales {
		padding: 2.5rem 0
	}
}


/* ------ section 2 ------ */
#section2 {
	margin-bottom: 8rem;
}

@media (max-width:768px) {
	#section2 {
		margin-bottom: 4.5rem;
	}
}


/* ------ section 3 ------ */
#section3 {
	border-bottom: 8rem solid transparent;
}

@media (max-width:768px) {
	#section3 {
		border-bottom: 4rem solid transparent;
	}
}


/* ------ section 4 ------ */
#section4 {
	border-bottom: 8rem solid transparent;
}

@media (max-width:768px) {
	#section4 {
		border-bottom: 3.5rem solid transparent;
	}
}


/* ------ section 5 ------ */
#section5 {
	border-bottom: 8rem solid transparent;
}

#section5 .mBox {
	background-color: rgba(29, 147, 147, .6);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;

	-webkit-mask-image: linear-gradient(45deg,
			rgba(0, 0, 0, 1) 70%,
			rgba(0, 0, 0, .3));
}

@media (max-width:768px) {
	#section5 {
		border-bottom: 2.5rem solid transparent;
	}
}


/* ------ whatsapp float ------ */
.wa-float-container {
	bottom: 15px;
	right: 15px;
	z-index: 1050;
}

.wa-float-btn,
.wa-float-btn:hover,
.wa-float-btn:focus,
.wa-float-btn:active,
.wa-float-btn.show {
	background-color: #25d366 !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 20px rgba(30, 30, 30, .3) !important;
	height: 50px;
	width: 50px;
}

.wa-float-btn svg {
	margin-bottom: 2px;
}

.wa-float-btn:hover {
	background-color: #128c7e !important;
}

.wa-float-container .dropdown-menu {
	min-width: 260px;
	border-radius: .8rem;
}

.dropdown-item:focus,
.dropdown-item:hover {
	background-color: #25d366;
	color: #fff;
}

.dropdown-item:focus svg,
.dropdown-item:hover svg {
	fill: #fff;
}

.wa-float-container .dropdown-item:active {
	background-color: #25d366;
	color: var(--bs-dropdown-link-active-color);
}

.wa-float-container .dropdown-item:active svg {
	fill: #fff;
}

@media (max-width: 992px) {
	.wa-float-container {
		bottom: 10px;
		right: 10px;
	}
}


/* ------ btTop ------ */
.btTop {
	background-color: rgba(60, 60, 60, .3);
	backdrop-filter: blur(5px);
	border: 0;
	border-radius: 20px;
	bottom: 82px;
	display: none;
	height: 36px;
	outline: none;
	position: fixed;
	right: 23px;
	text-align: center;
	transition: all 0.3s ease;
	width: 36px;
	z-index: 1040;
}

.btTop:hover {
	background-color: rgba(26, 103, 140, .8);
	color: #fff;
}

@media (max-width:992px) {
	.btTop {
		bottom: 76px;
		right: 17px;
	}
}


/* ------ footer ------ */
footer {
	-webkit-mask-image: linear-gradient(160deg, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0.4)), linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .4));
}

@media (max-width:768px) {
	footer .h4 {
		font-size: 1.18rem;
	}

	footer .fs-5b {
		font-size: 1.05rem;
	}

	footer .d-table svg {
		height: 40px;
		width: 40px;
	}

	footer .d-table svg {
		height: 36px;
		width: 36px;
	}
}