@charset "UTF-8";
/* CSS Document */


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

/****************************************************************************
* ***************************************************************************
HEADER
* ***************************************************************************
****************************************************************************/

.index-header {
	width: 100%;
	max-height: 800px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.header-1 {background-image: url("../img/header/header-1.jpg");}
.header-2 {background-image: url("../img/header/header-2.jpg");}
.header-3 {background-image: url("../img/header/header-3.jpg");}
.header-4 {background-image: url("../img/header/header-4.jpg");}

.index-header-in {
	width: 100%;
	padding: 240px 32px 200px;
	text-align: center;
}

.index-header-in img {
	width: 480px;
}

.index-header-in .separador {
	height: 2px;
	border-radius: 2px;
	width: 32px;
	background-color: var(--naranja-100);
	margin-top: 40px;
	margin-bottom: 40px;
}

.index-header-in h2 {
	font-size: 20px;
	text-align: center;
	font-weight: 500;
	color: var(--naranja-100);
	margin-bottom: 8px;
}

.index-header-in p {
	font-size: 18px;
	text-align: center;
	font-weight: 400;
	color: var(--naranja-100);
}

/****************************************************************************
* ***************************************************************************
PRODUCTS
* ***************************************************************************
****************************************************************************/

.index-products {
	width: 100%;
}

.index-products-in {
	width: 100%;
	padding: 160px 32px 120px;
}

/***********
INTRO
************/

.index-products-in .intro {
	text-align: center;
	margin-bottom: 80px;
}

.index-products-in .intro h2 {
	font-size: 56px;
	text-align: center;
	font-weight: 500;
	margin-bottom: 32px;
}

.index-products-in .intro p {
	font-size: 24px;
	text-align: center;
	font-weight: 300;
	color: #444;
	line-height: 1.4;
}

/***********
FILOSOGIA
************/

.filosogia {
	padding: 0px 32px;
}

.filosogia-in {
	margin: -24px 0px 96px;
	padding: 56px;
	background-color: #F9F5F1;
	display: flex;
	gap: 48px;
	justify-content: space-between;
}

.filosogia-in .filosogia-each {
	text-align: center;
	width: calc(33.3% - 32px);
}

.filosogia-in .filosogia-each img {
	width: 56px;
	margin-bottom: 16px;
}

.filosogia-in .filosogia-each h4 {
	font-size: 22px;
	font-weight: 600;
	color: #444;
	line-height: 1.4;
	margin-bottom: 8px;
}

.filosogia-in .filosogia-each p {
	font-size: 18px;
	font-weight: 300;
	color: #444;
	line-height: 1.4;
}

/***********
MOSAICO
************/

.index-products-in .mosaico {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1220px !important;
}

.index-products-in .mosaico .each-box {
	width: calc(33.3% - 20px);
	border: 1px solid #e0e0e0;
	overflow: hidden;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
}

/** Title **/
.index-products-in .mosaico .each-box .img-box img {
	width: 100%;
}

/** Title **/
.index-products-in .mosaico .each-box .text-box .title {
	display: flex;
	gap: 16;
  justify-content: space-between;
  align-items: center;
	margin-left: 24px;
	margin-right: 24px;
	padding-top: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e0e0e0;
}

.index-products-in .mosaico .each-box .text-box .title h3 {
	font-size: 24px;
	font-weight: 500;
}

.index-products-in .mosaico .each-box .text-box .title p {
	font-size: 14px;
	font-weight: 400;
}

/** Receta **/

.index-products-in .mosaico .each-box .text-box .receta {
	margin-left: 24px;
	margin-right: 24px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.index-products-in .mosaico .each-box .text-box .receta p {
	font-size: 16px;
	font-weight: 300;
	color: #444;
	line-height: 1.4;
}

/** Boton **/

.index-products-in .mosaico .each-box .btn-box {
	margin-left: 24px;
	margin-right: 24px;
	margin-top: auto;
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 1px solid #e0e0e0;
}

/************
INFO MESSAGE TOP
*************/

.index-products-in .message-out {
	margin-top: -40px;
	margin-bottom: 56px;
}

.index-products-in .message-out h4 {
	text-align: center;
	font-size: 20px;
	margin-bottom: 24px;
}


/************
INFO MESSAGE
*************/


.index-products-in .message {
	padding: 32px 32px 40px;
	background-color: #D8E0FF;
}

.index-products-in .message img {
	display: block;
	margin-bottom: 16px;
}

.index-products-in .message p {
	text-align: center;
	font-size: 18px;
	color: #444;
	line-height: 1.4;
}

/************
INFO MESSAGE POP
*************/

.pop-content .message-out {
	max-width: 780px;
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 24px;
}

.pop-content .message-out h4 {
	text-align: center;
	font-size: 18px;
	margin-bottom: 16px;
}

.pop-content .message {
	padding: 24px 24px 32px;
	background-color: #D8E0FF;
}

.pop-content .message p {
	text-align: center;
	font-size: 16px;
	color: #444;
	line-height: 1.4;
}

/****************************************************************************
* ***************************************************************************
ABOUT
* ***************************************************************************
****************************************************************************/

.index-about {
	width: 100%;
	padding: 0px 0px 160px;
}

.index-about-in {
	width: 100%;
	padding: 0px 32px;
}

.index-about-in-in {
	width: 100%;
	padding: 80px 64px;
	background-color: #F9F5F1;
}

.index-about-in-in .logo-box {
	width: 160px;
	margin-bottom: 40px;
}

.index-about-in-in .logo-box img {
	width: 100%;
}

.index-about-in-in .content {
	display: flex;
	justify-content: space-between;
	gap: 64px;
}

.index-about-in-in .content .text {
	width: calc(50% - 32px);
}

.index-about-in-in .content .text p {
	font-size: 20px;
	color: #444444;
	font-weight: 300;
	margin-bottom: 16px;
}

.index-about-in-in .content .gari-pic {
	width: calc(50% - 32px);
}

.index-about-in-in .content .gari-pic img {
	width: 100%;
}

/*** Values ****/

.index-about-in-in .values {
	margin-top: 32px;
}

.index-about-in-in .value {
	background-color: #F8EDE2;
	padding: 24px;
	display: flex;
	gap: 16px;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 8px;
}

.index-about-in-in .value img {
	width: 32px;
}

.index-about-in-in .value h4 {
	font-size: 18px;
	margin-bottom: 8px;
	margin-top: 6px;
}

.index-about-in-in .value p {
	font-size: 16px;
	margin-bottom: 0px !important;
}

/************
CONTACT
*************/

.index-about .contact {
	padding-bottom: 32px;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 32px;
	display: flex;
	gap: 0px;
	align-items: center;
}

.index-about .contact p.info {
	margin-right: 16px;
}

.index-about .contact .contact-box {
	display: flex;
	gap: 8px;
	align-items: center;
}

.index-about .contact a.contact-box {
	padding: 4px 8px;
}

.index-about .contact a.contact-box:hover {
	background-color: #F8EDE2;
}

.index-about .contact .contact-box img {
	width: 24px;
}

.index-about .contact .contact-box p {
	color: #444444 !important;
	font-size: 14px;
}

.index-about .gari-pic img {
	border-radius: 8px;
	display: block;
}

/************
NEWSLETTER
*************/

.index-about-in-news {
	width: 100%;
	padding: 48px 64px;
	margin-top: 16px;
	background-color: #F9F5F1;
}

.index-about-in-news .newsletter {
	display: flex;
	gap: 16px;
	align-items: center;
}

/************
NEWSLETTER PROPIO
*************/

.index-about-in-news .newsletter form {
	display: flex;
}


.index-about-in-news .newsletter form input {
	height: 40px;
	border: 1px solid #e0e0e0;
	padding: 8px 12px;
	margin-right: 8px;
	font-size: 14px;
}

.index-about-in-news .newsletter form input.btn-form {
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 8px 24px;
    display: block;
    text-align: center;
    background-color: #FFD69C;
	color: #000000;
	font-weight: 500;
	border: none !important;
}

.index-about-in-news .newsletter form input.btn-form:hover {
	background-color: #D8AA6B;
	cursor: pointer;
}

.feedback {
	padding: 24px 32px;
	text-align: center;
	background-color: #54DF7B;
}

.feedback p {
	font-size: 18px;
}

.feedback .close {
	position: absolute;
	right: 16px;
	top: 16px;
}

.feedback .close:hover {
	cursor: pointer;
}


/****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************
POP-UP
****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************/

body.noscroll {
	overflow: hidden;
}

.pop-up {
	display: none;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.8);
	position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	z-index: 100;
}

.pop-up-in {
	width: 100%;
	max-width: 960px;
	max-height: calc(100vh - 64px);
	margin-left: auto;
	margin-right: auto;
	margin-top: 32px;
	background-color: #ffffff;
	padding: 24px;
	overflow-y: hidden;
}

/************
CLOSE ROW
*************/

.pop-up .close-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.pop-up .close-row img {
	opacity: 0.8;
}

.pop-up .close-row img:hover {
	opacity: 1;
	cursor: pointer;
}

/************
CONTENT
*************/

.pop-content {
	overflow-y: auto;
	height: auto;
	max-height: calc(100vh - 172px);
}

/************
INTRO
*************/

.pop-up .intro-text {
	max-width: 780px;
	margin-bottom: 32px;
}

.pop-up .intro-text h5 {
	text-align: center;
	font-size: 28px;
	margin-bottom: 16px;
}

.pop-up .intro-text p {
	text-align: center;
	font-size: 18px;
	color: #444;
	line-height: 1.4;
}

/************
STEPS
*************/

.pop-up .steps {
	max-width: 780px;
	display: flex;
	justify-content: center;
	gap: 24px;
}

.pop-up .steps .each-step {
	width: calc(33.33% - 16px);
	background-color: #F9F5F1;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.pop-up .steps .each-step span {
	display: block;
	width: 32px;
	height: 32px;
	padding-top: 4px;
	text-align: center;
	font-size: 20px;
	margin-bottom: 16px;
	background-color: #650A58;
	color: #ffffff;
	text-align: center;
}

.pop-up .steps .each-step h6 {
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 16px;
}

.pop-up .steps .each-step p {
	text-align: center;
	font-size: 16px;
	color: #444;
	line-height: 1.4;
}

/************
BTN
*************/

.pop-up .btn-out {
	max-width: 780px;
	text-align: center;
	margin-top: 48px;
	margin-bottom: 24px;
}

.pop-up .btn-out .btn-general {
	display: inline-block;
}

/************
FORM
*************/

.pop-up .form-out {
	margin-top: 32px;
	border-top: 1px solid #e0e0e0;
}

.pop-up iframe {
}


/****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************
MOBILE
****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************/

@media (max-width: 768px) {


/****************************************************************************
* ***************************************************************************
HEADER
* ***************************************************************************
****************************************************************************/

.index-header {
	max-height: 480px;
}

.index-header-in {
	width: 100%;
	padding: 120px 24px 96px;
}

.index-header-in img {
	width: 240px;
}

.index-header-in .separador {
	margin-top: 24px;
	margin-bottom: 24px;
}

/****************************************************************************
* ***************************************************************************
PRODUCTS
* ***************************************************************************
****************************************************************************/

.index-products-in {
	padding: 80px 24px 48px;
}

/***********
INTRO
************/

.index-products-in .intro {
	margin-bottom: 48px;
}

.index-products-in .intro h2 {
	font-size: 40px;
	margin-bottom: 32px;
}

.index-products-in .intro p {
	font-size: 20px;
}

/***********
FILOSOGIA
************/

.filosogia {
	padding: 0px 0px;
}

.filosogia-in {
	margin: -8px 0px 64px;
	padding: 24px;
	display: block;
}

.filosogia-in .filosogia-each {
	margin-top: 16px;
	margin-bottom: 56px;
	width: 100%;
}

.filosogia-in .filosogia-each img {
	width: 56px;
	margin-bottom: 16px;
}

.filosogia-in .filosogia-each h4 {
	font-size: 22px;
	font-weight: 600;
	color: #444;
	line-height: 1.4;
	margin-bottom: 8px;
}

.filosogia-in .filosogia-each p {
	font-size: 18px;
	font-weight: 300;
	color: #444;
	line-height: 1.4;
}

/***********
MOSAICO
************/

.index-products-in .mosaico {
	/*display: block;*/
	gap: 8px;
	padding-left: 0px;
	padding-right: 0px;
}

.index-products-in .mosaico .each-box {
	width: calc(50% - 4px);
	/*width: 100%;
	margin-bottom: 8px;*/
}

.index-products-in .mosaico .each-box {
	width: calc(50% - 4px);
	/*width: 100%;
	margin-bottom: 8px;*/
}

/** IMG **/
.index-products-in .mosaico .each-box .img-box {
	height: 120px;
	overflow: hidden;
}

/** Title **/
.index-products-in .mosaico .each-box .text-box .title {
	gap: 8;
  justify-content: space-between;
  align-items: center;
	margin-left: 12px;
	margin-right: 12px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.index-products-in .mosaico .each-box .text-box .title h3 {
	font-size: 16px;
}

.index-products-in .mosaico .each-box .text-box .title p {
	font-size: 11px;
}

/** Receta **/

.index-products-in .mosaico .each-box .text-box .receta {
	margin-left: 12px;
	margin-right: 12px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.index-products-in .mosaico .each-box .text-box .receta p {
	font-size: 16px;
}

/** Boton **/

.index-products-in .mosaico .each-box .btn-box {
	margin-left: 12px;
	margin-right: 12px;
	padding-top: 8px;
	padding-bottom: 8px;
}

/************
INFO MESSAGE TOP
*************/

.index-products-in .message-out {
	margin-top: 0px;
	padding-left: 0px !important;
	padding-right: 0px !important;
}


/************
INFO MESSAGE
*************/

.index-products-in .message {
	padding: 24px 16px 32px;
	margin-top: 24px;
}

/****************************************************************************
* ***************************************************************************
ABOUT
* ***************************************************************************
****************************************************************************/

.index-about {
	padding: 0px 0px 120px;
}

.index-about-in {
	width: 100%;
	padding: 0px 24px;
}

.index-about-in-in {
	padding: 40px 24px;
}

.index-about-in-in .logo-box {
	width: 120px;
	margin-bottom: 24px;
}

.index-about-in-in .content {
	display: block;
}

.index-about-in-in .content .text {
	width: 100%;
}

.index-about-in-in .content .text p {
	font-size: 18px;
	color: #444444;
	font-weight: 300;
	margin-bottom: 16px;
}

.index-about-in-in .content .gari-pic {
	width: 100%;
}


/*** Values ****/

.index-about-in-in .values {
	margin-top: 32px;
}

.index-about-in-in .value {
	padding: 16px;
	display: block;
	gap: 16px;
}

/*** Gari pic ****/

.index-about .gari-pic {
	margin-top: 24px;
	overflow: hidden;
}

.index-about .gari-pic img {
	border-radius: 8px;
	display: block;
}

/************
CONTACT
*************/

.index-about .contact {
	padding-bottom: 24px;
	margin-bottom: 24px;
	display: block;
}

.index-about .contact p.info {
	margin-right: 0px;
	margin-bottom: 16px;
}

.index-about .contact .contact-box {
	margin-top: 8px;
}

/************
NEWSLETTER
*************/

.index-about-in-news .newsletter {
	display: block;
}

.index-about-in-news .newsletter p {
	margin-bottom: 16px;
}




/****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************
POP-UP
****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************/

.pop-up {
	padding: 8px;
}

/************
INTRO
*************/

.pop-up .intro-text h5 {
	font-size: 20px;
	margin-bottom: 16px;
}

.pop-up .intro-text p {
	font-size: 16px;
}

/************
STEPS
*************/

.pop-up .steps {
	display: block;
}

.pop-up .steps .each-step {
	width: 100%;
	padding: 16px;
	margin-bottom: 8px;
}

/************
NEWSLETTER PROPIO
*************/

.index-about-in-news .newsletter form {
	display: block;
}


.index-about-in-news .newsletter form input {
	margin-bottom: 8px;
	width: 100%;
}


.feedback {
	padding: 16px 56px;
}

.feedback p {
	font-size: 16px;
}

.feedback .close {
	right: 12px;
	top: 16px;
}




}