@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

:root
{
	--verdeLS: #00833E;
	--verdeLS-RGBA: rgba(0, 131, 62, 0.75);
	--verdeLSclaro: #00B478;
	--verdeLSoscuro: #177449;
	--verdeLSbackdrop: #002c17;
	--gris: #a7a7a7;
	--grisClaro: #F4F4F4;
	--grisClaroOscuro: #CDCECD;
	--grisOscuro: #808080;
	--gris90: #424142;
	--redFalse: #BC0C23;
	--greenTrue: #00904A;
	--radius: 15px;
	--gap: 25px;
	--paddingSmall: 25px;
	--maxWidth: 1440px;
	--headerHeight: 90px;
}

@font-face
{
	font-family: "Gotham-Light";
	src: url("../fonts/Gotham-Light.otf") format("opentype");
}

@font-face
{
	font-family: "Gotham-Medium";
	src: url("../fonts/Gotham-Medium.otf") format("opentype");
}

@font-face
{
	font-family: "Gotham-Book";
	src: url("../fonts/Gotham-Book.otf") format("opentype");
}

@font-face
{
	font-family: "Gotham-BookItalic";
	src: url("../fonts/Gotham-BookItalic.otf") format("opentype");
}

@font-face
{
	font-family: "Gotham-Bold";
	src: url("../fonts/Gotham-Bold.otf") format("opentype");
}

@font-face
{
	font-family: "Gotham-Ultra";
	src: url("../fonts/Gotham-Ultra.otf") format("opentype");
}

@font-face
{
	font-family: "Futura";
	src: url("../fonts/FuturaStd-Book.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: "Insani-Burguer";
	src: url("../fonts/Insanibc.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

*
{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body
{
	font-family: "Gotham-Book";
	line-height: 1.5;
	color: #FFFFFF;
}

h1,
h2,
h3,
h4,
h5,
h6,
summary
{
	line-height: 1.1;
	font-family: "Gotham-Bold";
}

h1
{
	font-size: 30px;
}

h2
{
	font-size: 36px;
}

h3
{
	font-size: 32px;
}

h4
{
	font-size: 24px;
}

h5
{
	font-size: 20px;
}

h6
{
	font-size: 16px;
}

h1 span
{
	font-family: "Insani-Burguer";
	font-size: 52px;
	vertical-align: sub;
}

p
{
	margin: 25px auto;
	font-family: "Gotham-Book";
	font-weight: 900;
	font-size: 20px;
}

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

a
{
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

strong
{
	font-weight: bold;
	font-family: "Gotham-Bold";
}

hr
{
	margin: 75px;
	border: none;
	border-top: 1px solid #FFFFFF;
}

.wrapper
{
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
}

header
{
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30px;
	font-size: 14px;
	z-index: 100;
	top: 0;
	width: 100%;
	max-width: var(--maxWidth);
	margin: 0 auto;
}

.button
{
	border-radius: 20px;
	padding: 3px 25px;
	background-color: #FFFFFF;
	color: red;
	display: inline-block;
	font-size: 22px !important;
	text-align: center;
	font-family: "Gotham-Bold";
}

main .hero
{
	padding-bottom: calc(var(--gap) * 3);
}

main .hero h1
{
	font-family: "Futura";
}

main .hero>div>div:first-child img
{
	margin-right: 40px;
}

section>div
{
	margin: 0 auto;
	max-width: var(--maxWidth);
}

.video
{
	background-color: #D9D9D9;
}

.info
{
	padding-top: calc(var(--gap) * 2);
}

.info>div
{
	display: flex;
	gap: calc(var(--gap) * 3);
	width: 90vw;
	margin: 0 auto;
	align-items: stretch;
}

.info>div>div
{
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	width: 50%;
	align-items: center;
}

.info .ingredients
{
	display: flex;
	align-items: end;
	border: 1px solid #FFFFFF;
	padding: var(--gap);
	border-radius: var(--radius);
	margin: 0 auto;
	width: 100%;
}

.info .ingredients p
{
	margin: 0 auto;
	margin-top: 15px;
}

section.contact
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--gap) * 2);
	padding-bottom: calc(var(--gap) * 3);
}

ul.communication
{
	display: flex;
	gap: var(--gap);
	margin: 0 auto;
	text-align: center;
	width: 60%;
	justify-content: space-around;
}

ul.communication li
{
	display: flex;
	flex-direction: column;
}

ul.communication li img
{
	height: 60px;
}

ul.communication p
{
	margin: 0;
	font-size: 24px;
}

ul.social
{
	display: flex;
	justify-content: center;
	gap: var(--gap);
	font-size: 26px;
}

header ul.social
{
	font-size: 22px;
	gap: 15px;
}

section.contact ul.social
{
	font-size: 38px;
}

section.contact>p
{
	text-align: center;
	font-size: 16px;
	margin: 0;
	max-width: 60%;
}

.button_desktop
{
	display: inline-block;
	width: 100%;
}

.button_mobile
{
	display: none;
}

.products
{
	text-align: center;
	background-color: #1D1D1B;
	color: #FFFFFF;
	padding: var(--gap);
	position: relative;
}

.sustainability
{
	background-color: #135032;
	color: #FFFFFF;
	text-align: center;
	padding: var(--gap);
}

.sustainability>div
{
	max-width: var(--maxWidth);
}

.sustainability div.desktop
{
	background-image: url("../img/sustainability.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 75vh;
}

.sustainability div.mobile
{
	display: none;
}

.sustainability div.mobile .swiper-slide
{
	text-align: left;
}

.sustainability div.mobile p
{
	font-size: 14px;
	margin: 0;
}

.buy
{
	text-align: center;
	padding: var(--gap);
}

.products h1,
.sustainability h1,
.buy h1
{
	margin: 25px 0 50px 0;
}

.buy .shops
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(135px, 22vw, 220px), 220px));
	gap: var(--gap);
	width: 100%;
	max-width: var(--maxWidth);
	justify-content: center;
	justify-items: center;
	align-items: center;
	margin: 0 auto;
}

.buy .shops li
{
	background-color: #FFFFFF;
	display: flex;
	width: 220px;
	height: 145px;
	border-radius: var(--radius);
}

.buy .shops li a
{
	margin: 0;
	display: flex;
	width: 100%;
}

.buy .shops li a img
{
	max-width: 100%;
	margin: auto;
}

section.contact div.social
{
	display: flex;
	gap: var(--gap);
	align-items: center;
	font-size: 22px;
}

footer
{
	text-align: center;
	padding: var(--gap);
}

footer>div
{
	max-width: var(--maxWidth);
	text-align: center;
	margin: 0 auto;
}

footer p
{
	text-align: center;
	font-size: 16px;
	max-width: 60%;
}

footer p a
{
	text-decoration: underline;
}


::backdrop
{
	background-color: black;
	opacity: 0.5;
}

dialog
{
	border: none;
	background-color: #FFFFFF;
	border-radius: var(--radius);
	margin: auto;
	padding: 35px;
	width: 75%;
	max-width: 1000px;
	text-align: left;
	color: var(--gris90);
	overflow: hidden;
}

.close
{
	z-index: 10;
	position: absolute;
	right: 17px;
	top: 17px;
	width: 17px;
	height: 17px;
	font-size: 24px;
	display: flex;
	color: black
}

.close i
{
	margin: auto;
}

dialog *
{
	text-align: left !important;
}

dialog p
{
	margin: 15px 0;
	width: 100%;
	max-width: 100%;
}

.text_footer
{
	max-height: 500px;
	padding-right: 50px;
	overflow: hidden;
}

.text_footer>div
{
	max-height: 440px;
	overflow-y: auto;
}

/* ******************** */
/*        INDEX         */
/* ******************** */

#index
{
	background-color: #EBEBEB;
	color: var(--gris90);

	background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
}

#index hr
{
	border-top: 1px solid var(--gris90);
}

#index .hero
{
	color: #FFFFFF;
	aspect-ratio: 2;
	margin-bottom: -80px;
}

#index h1
{
	font-size: 42px;
}

/* ******************* */
/*        ZERO         */
/* ******************* */

#zero,
.swiper-slide a.zero
{
	background-color: #CC360D;
}

section.products.zero
{
	background-color: #FF4D00;
}

#zero .hero
{
	--hero-bg: linear-gradient(#CC360D, #FF4D00);
	background-image: var(--hero-bg);
}

#zero .info
{
	background-image: linear-gradient(#FF4D00, #CC360D);
}

#zero .button,
#zero .nutrition-box .highlight
{
	color: #FF4D00;
}

#zero .content_image
{
	background-image: url("../img/bottle_zero.png");
	filter: drop-shadow(-25px 0px 50px #711f04);
}

#zero .content_icons ul
{
	grid-template-columns: 1fr 1fr 1fr 1fr;
	/* grid-template-rows: 1fr 1fr; */
	/* width: 50%; */
}

/* ********************** */
/*        PROTEIN         */
/* ********************** */
#protein,
section.products.protein
{
	background-color: #1D1D1B;
}

.swiper-slide a.protein
{
	background-color: #000000;
}

#protein .hero
{
	--hero-bg: linear-gradient(#1D1D1B, #4c4b49);
	background-image: var(--hero-bg);
}

#protein .info
{
	background-image: linear-gradient(#605e5c, #1D1D1B);
}

#protein .button,
#protein .nutrition-box .highlight
{
	color: #1D1D1B;
}

#protein .content_image
{
	background-image: url("../img/bottle_protein.png");
	filter: drop-shadow(-25px 0px 50px #1D1D1B);
}

#protein .content_icons ul
{
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	/* width: 75%; */
}


/* ************************** */
/*        PREBIOTICOS         */
/* ************************** */
#prebioticos,
.swiper-slide a.prebioticos
{
	background-color: #4a2d70 !important;
}

section.products.prebioticos
{
	background-color: #8246ac !important;
}

#prebioticos .hero
{
	--hero-bg: linear-gradient(#4a2d70, #8246ac);
	background-image: var(--hero-bg);
}

#prebioticos .info
{
	background-image: linear-gradient(#8246ac, #4a2d70);
}

#prebioticos .button,
#prebioticos .nutrition-box .highlight
{
	color: #8347AD;
}

#prebioticos .content_image
{
	background-image: url("../img/bottle_prebioticos.png");
	filter: drop-shadow(-25px 0px 50px #221436);
}

#prebioticos .content_icons ul
{
	grid-template-columns: 1fr 1fr 1fr 1fr;
	/* grid-template-rows: 1fr 1fr; */
	/* width: 50%; */
}


/* ********************* */
/*        HIERRO         */
/* ********************* */
#hierro,
.swiper-slide a.hierro
{
	background-color: #57091C !important;
}

section.products.hierro
{
	background-color: #960048;
}

#hierro .hero
{
	--hero-bg: linear-gradient(#57091C, #960048);
	background-image: var(--hero-bg);
}

#hierro .info
{
	background-image: linear-gradient(#960048, #57091C);
}

#hierro .button,
#hierro .nutrition-box .highlight
{
	color: #960048;
}

#hierro .content_image
{
	background-image: url("../img/bottle_hierro.png");
	filter: drop-shadow(-25px 0px 50px #300510);
}

#hierro .content_icons ul
{
	grid-template-columns: 1fr 1fr 1fr;
	/* grid-template-rows: 1fr 1fr; */
	/* width: 50%; */
}

/* *********************** */
/*        COLAGENO         */
/* *********************** */
#colageno
{
	background-color: #f18d05 !important;
}

section.products.colageno
{
	background-color: #F5A800;
}

.swiper-slide a.colageno
{
	background-color: #BE8B11;
}

#colageno .hero
{
	--hero-bg: linear-gradient(#f18d05, #f1ae1c);
	background-image: var(--hero-bg);
}

#colageno .info
{
	background-image: linear-gradient(#f1ae1c, #f18d05);
}

#colageno .button,
#colageno .nutrition-box .highlight
{
	color: #F5A800;
}

#colageno .content_image
{
	background-image: url("../img/bottle_colageno.png");
	filter: drop-shadow(-25px 0px 50px #b76c03);
}

#colageno .content_icons ul
{
	grid-template-columns: 1fr 1fr 1fr;
	/* grid-template-rows: 1fr 1fr; */
	/* width: 50%; */
}

/* ************************ */
/*        CHOCOLATE         */
/* ************************ */
#chocolate,
section.products.chocolate
{
	background-color: #1D1D1B;
}

.swiper-slide a.chocolate
{
	background-color: #000000;
}

#chocolate .hero
{
	--hero-bg: linear-gradient(#1D1D1B, #4c4b49);
	background-image: var(--hero-bg);
}

#chocolate .info
{
	background-image: linear-gradient(#4c4b49, #1D1D1B);
}

#chocolate .button,
#chocolate .nutrition-box .highlight
{
	color: #1D1D1B;
}

#chocolate .content_image
{
	background-image: url("../img/bottle_choco_dual.png");
	filter: drop-shadow(-25px 0px 50px #060606);
}

#chocolate .content_icons ul
{
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

#chocolate .info>div>div
{
	gap: 0;
}

#chocolate .info>div>div .button
{
	margin-top: var(--gap);
}




.video-container
{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: black;
}

#yt-player
{
	width: auto;
	height: 100vh;
	aspect-ratio: 16 / 9;
}

.milk_glass
{
	width: 100%;
	flex: 1;
	background-image: url("../img/vaso_top.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 450px;
	max-height: 450px;
	min-height: 450px;
}

.milk_glass_chocolate
{
	background-image: url("../img/choco_top.png");
	background-position: bottom;
}

.zero_p
{
	padding-top: calc(var(--gap) * 3);
	text-align: center;
}

.zero_p h1
{
	font-family: "Futura";
	font-size: 36px;
}

.zero_p h1 span
{
	font-size: 42px;
	vertical-align: initial;
}

.zero_p div
{
	background-image: url("../img/zl.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 50vw;
	aspect-ratio: 1.5;
}