/* --> Sanovo Greenpack website <<<-------*/

/* -------> Colors <<<--------------*/

:root {
  --dark-grey:#1B1E21;
  --grey:#2C3035;
  --light-grey: #EFECE4;
  --dark-green:#03312D;
  --green:#0D5845;
  --green-2:#337A35;
  --light-green:#C0EF31;
  --light-green-2:#EBFDE8;
  --light-green-3:#6EBF61;
  --light-yellow:#ECFBB3;
  --white:#FDFFFD;
  --black:#040B04;  
}

/* -------> Fonts <<<--------------*/


/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/space-grotesk-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/space-grotesk-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/space-grotesk-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------> Resets and overrides <<<------------*/
	
*{margin:0; padding:0;} 
body, p, div, h1, h2, h3, h4, h5, h6, ul, ol, li, pre, blockquote, address, cite{ margin:0; padding:0;}
*, *:after, *:before {margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;}
html body {width:100%; height:100%;  background:var(--light-grey);} 
html {overflow-x: hidden !important}
body {font-family: 'Space Grotesk', sans-serif; font-size:1.000em; color:var(--black); font-weight: 400;}
.clearfix {clear:both; height:0px; font-size:1px;}
:focus {outline:0;}
img, iframe {border:none; text-decoration:none;}
ol, ul {list-style:none;}
a {text-decoration:none;}
p {line-height: normal;font-weight: 400;font-size: 1em;}
h1, h2, h3, h4, h5 {font-size:1em; font-family: 'Space Grotesk', sans-serif; font-weight: 400;}
input, select, textarea {font-family: 'Space Grotesk', sans-serif;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display:block;}
input:invalid {box-shadow: none;}


/* --------> General <<<-------------*/

.center {width: 1190px; margin: 0 auto; }
.svgimage {height: 24px; width: 24px; display: inline-block; margin:auto 4px; vertical-align: middle;}
.wrapper {padding-top:95px;}

.whatsapp-button {background: url("../images/icon-whatsapp.svg") no-repeat; width:41px; height: 41px; display: block;  position:fixed; bottom:20px; right:20px; z-index:1500; text-indent: -9999px;}

.breadcrumbs {font-weight: 700; color:var(--green); padding-top: 30px;}

.breadcrumbs a {color:var(--green);}
.breadcrumbs a:hover, .breadcrumbs a:focus, .breadcrumbs a:active {color: var(--black);}

.miscelanea {background: url("../images/miscelanea.svg") no-repeat; width: 500px; height: 85px; display: block;}

/*Form*/

.button {background:var(--light-green); color:var(--dark-green); display: inline-flex; padding:0 30px; height: 64px; font-weight:700; font-size: 1.250em; align-items:center;  align-content: flex-start;  border-radius: 5px; border: none; cursor: pointer; justify-content:center;}
.button:hover {background-color: var(--light-yellow);}
.button:focus, .button:active  {color: var(--dark-green); background-color: var(--light-green);}

.link {color:var(--black); font-size: 1.125em; font-weight: 700; text-decoration: underline;}
.link:hover {color: var(--green);}
.link:focus, .link:active  {color: var(--green); }

label {display: block; color:var(--light-green-2); font-size: 1.250em; padding-bottom: 4px;}
input {border-radius: 5px; background: var(--white); color:var(--black); border:1px solid; border-color:var(--dark-green); font-size: 1.250em; padding: 20px 20px; width: 100%;}
input:focus { border-color:var(--light-green);}
textarea {border-radius: 5px; background: var(--white); color:var(--black); border:1px solid; border-color:var(--dark-green); font-size: 1.250em; padding: 20px 20px; width: 100%;}
textarea:focus { border-color:var(--light-green);}

input[type="checkbox"] {accent-color:var(--light-green);}

.form-check .form-check-input { width: 34px; height: 34px; border:1px solid; border-color:var(--dark-green); border-radius: 5px!important; display: inline-block; margin: 0 35px 0 25px; flex: none;}
.form-check .form-check-label {display: inline-block; color:var(--light-green-2)!important; font-size: 1.000em; }
.form-check {display: flex;  justify-content: flex-start; align-items: center;}


/*Interiores*/

.wrapper-int {background:var(--light-grey); }
.wrapper-int h1 {font-size: 3.000em; line-height: 1.100em; font-weight: 700; color:var(--green); margin:70px 0 25px;}
.wrapper-int .text p {font-size:1.250em; line-height: 1.500em;}
.wrapper-int .content {display: flex; justify-content:space-between; padding-bottom: 70px;}
.wrapper-int .text {width: 38%;}
.wrapper-int .image { margin: -50px 0 -110px 0;}


/* --------> header + Menu <<<-------------*/

header {position: fixed; width: 100%; background:var(--light-grey); padding-bottom: 10px; z-index: 100; }
header .center {padding:0 0; display: flex; justify-content:space-between; align-items:flex-start;}
header .logo {margin-top: 16px;}

.btn {display: block;}
#nav-menu {/*border-bottom: var(--border);*/}

.menu {position: relative; margin-top:20px;}
.menu ul {display: flex;  justify-content: space-between; column-gap: 2rem;}
.menu-bar li:first-child .dropdown {flex-direction: initial; min-width: 480px;}
.menu-bar .dropdown-link-title {font-weight: 600;}
.menu .nav-link {color: var(--dark-green); font-size: 1.125em;}
.menu .nav-link:hover, .menu .nav-link:active, .menu .nav-link:focus, .dropdown-link:hover, .dropdown-link:active, .dropdown-link:focus { color: var(--black); text-decoration: underline;}
.menu .nav-link.active {color: var(--black); text-decoration: underline;}
.dropdown-btn .svgimage {height: 16px; width: 16px;}
.dropdown-btn[aria-expanded="true"] .svgimage {-webkit-transform: scaleY(-1); transform: scaleY(-1);}

.dropdown {min-width: 250px; background-color: var(--light-green-2); position: absolute; top: 36px; z-index: 1; visibility: hidden; opacity: 0; transform: scale(0.97) translateX(-5px); transition: 0.1s ease-in-out; border-radius: 5px;}
.dropdown.active {visibility: visible; opacity: 1; transform: scale(1) translateX(5px);}
.dropdown ul {display: inline-flex; flex-direction: column; font-size: 1em; align-items:left!important; padding: 20px;}
.dropdown ul {width: 49%;}
.dropdown ul .dropdown-title {font-weight: 700; margin-bottom: 10px;}
.dropdown ul:nth-last-child(2) {border-left:1px solid var(--light-green-3);}
.dropdown .last-link {display: block; border-top:1px solid var(--light-green-3); padding: 20px; text-align: left; color: var(--dark-green);}
.dropdown .last-link:hover {color: var(--black); text-decoration: underline;}

.dropdown-btn {display: flex; justify-content: space-between; cursor: pointer; background: none; border: 0;  font-size: 0.944em; font-family: 'Space Grotesk';}
.dropdown-link {display: flex;  padding: 8px 0;  transition: 0.1s ease-in-out; color:var(--dark-green);}
.dropdown-link:hover {color:var(--dark-green); }

#hamburger {display: none; background: none; border: 0!important; padding:20px 0; font-weight:700; font-size: 1.000em; cursor: pointer; color:var(--black);}
#hamburger:hover, #hamburger:active, #hamburger:focus {color:var(--dark-green);}

.contacto {font-size: 1.125em;}

#myBtn {display: none; background: url(../images/up.svg) no-repeat; width:41px; height: 41px; position:fixed; bottom:75px; right:20px; z-index:2000; text-indent: -9999px; border-radius: 20px;}


/* --------> Footer <<<-------------*/

footer {background-color:var(--dark-grey); color:var(--light-grey);}
footer .copy {font-size: 0.813em; display: flex; justify-content: space-between; padding: 26px 0  16px;}
footer .copy a {color:var(--light-grey); text-decoration:underline;}
footer .copy a:hover, footer .copy a:active, footer .copy a:focus {color:var(--light-yellow)!important;}
footer .copy img {float: left; padding-right: 8px; margin-top: -10px;}

footer .info {display: flex; width: 100%; align-items: stretch; font-size: 1.125em; line-height: 1.788em;}
footer .info .content {width: 590px; float: right; padding-right: 70px; display: flex; justify-content:flex-start;}

footer .info .left {background-color:var(--dark-green); width: 50%; padding: 70px 0;}
footer .info .left img {filter: brightness(0) saturate(100%) invert(98%) sepia(71%) saturate(0) hue-rotate(297deg) brightness(108%) contrast(100%); width: 215px; height: auto;}
footer .info .left p {font-size: 0.713em;}
footer .info .left ul  {float: left; padding-left: 25px; margin-top: -5px;}
footer .info .left ul a {color:var(--light-green);}
footer .info .left ul a:hover, footer .info .left ul a:active, footer .info .left ul a:focus {text-decoration: underline;}

footer .info .right {background-color:var(--grey); width: 50%; padding: 60px 0;}
footer .info .right .content {float: left; padding-left: 30px;}
footer .info .right h5 {text-transform: uppercase; font-weight: 700; line-height: 1.588em; margin-bottom: 15px;}
footer .info .right .content div:first-child {padding-right:70px; }
footer .info .right .content div:last-child {padding-top: 72px;}


/* --------> Inicio <<<-------------*/

.hero a {display: flex; flex-direction: row-reverse; justify-content:space-between; padding-top: 50px;}
.hero a:focus .button  {color: var(--light-green); background-color: var(--dark-green);}

.hero h1 {font-size: 3.000em; line-height: 1.125em; color:var(--green); font-weight: 700; }
.hero p {font-size: 1.250em; line-height: 1.500em; color:var(--green); padding: 20px 0 40px; }
.hero .text {width: 40%; margin-top: 20px;}

.productos {background: var(--dark-green); padding: 80px 0; margin-top: 80px; width: 100%; height: auto;}
.productos .grid {display: grid; column-gap: 2%; row-gap: 2%; justify-items: stretch; align-items: stretch;
  grid-template-columns: 29% 29% 38%;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "item-1" "item-2" "item-3 item-4";
  height: 600px;
}
.productos .grid .item {background: var(--light-green); border-radius: 5px; }
.productos .item-1 { grid-area: 1 / 1 / 3 / 2; position: relative; overflow: hidden;}
.productos .item-2 { grid-area: 1 / 2 / 3 / 3; position: relative; overflow: hidden;}
.productos .item-3 { grid-area: 1 / 3 / 2 / 4; position: relative; overflow: hidden;}
.productos .item-4 { grid-area: 2 / 3 / 3 / 4; position: relative; overflow: hidden;}

.productos .item img {position: absolute; object-fit:cover; width: 100%; height: 295px; top:0; left:0; border-radius: 5px; z-index: 10;}
.productos .item-1 img, .productos .item-2 img { width: auto; height: 100%; left:-50%; }
.productos .item-1 h2, .item-2 h2 {font-size: 2.500em;}
.productos .item-3 h2, .item-4 h2 {font-size: 1.500em;}

.productos .item .text {position: relative; z-index: 20; padding: 35px 30px; width: 100%; display: block; height: 100%;}
.productos .item h2 {background: var(--light-green-2); color: var(--green);  display: inline-block; clear: both;  padding: 2px 8px;}
.productos .item p {font-size: 0.875em; color: var(--green); font-weight: 700; padding-bottom: 4px;}
.productos .item span {position: absolute; bottom:30px; left:35px; font-size: 1.125em; color: var(--green); font-weight: 700; text-decoration: underline;}
.productos .item a:hover span, .productos .item a:focus span, .productos .item a:active span {color: var(--black);}

.newsletter {background: rgb(8,71,51);background: linear-gradient(90deg, rgba(8,71,51,1) 0%, rgba(51,122,53,1) 100%); padding: 80px 0;}
.newsletter .center {display: flex; justify-content:space-between;}
.newsletter .center .text {width:50%;}
.newsletter .center form {width:40%; display: flex; flex-direction: column;}
.newsletter .center .text h3 {font-size: 1.500em; color:var(--light-green); font-weight: 700;}
.newsletter .center .text p {font-size: 1.250em; color:var(--light-green-2); margin-top: 20px;}
.newsletter .center form .button {justify-content:center; margin-top: 20px;} 


.newsletter form .text-error {color:#CF0013; background-color:#F4D3D6; font-size:1.100em; padding:15px; border-radius: 5px; display: flex; font-weight: 500;}
.newsletter form .text-error img {margin-right: 8px;}
.newsletter form .text-ok {color:var(--green-2); background-color:var(--light-green-2); font-size:1.100em; padding:15px; border-radius: 5px; display: flex; font-weight: 500;}
.newsletter form .text-ok img {margin-right: 8px;}


.novedades {background-color: var(--light-green-3); padding: 80px 0;}
.novedades .grid {display: grid; column-gap: 2%; justify-items: stretch; align-items: stretch; align-content: space-around;  
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr auto; 
  grid-template-areas:  "main-article main-article" "article-1 article-2"; 
}
.novedades .main-article {grid-area: main-article; grid-area: 1 / 1 / 2 / 3;}
.novedades .article-1 {grid-area: article-1; grid-area: 2 / 1 / 3 / 2;}
.novedades .article-2 {grid-area: article-2; grid-area: 2 / 2 / 3 / 3; }

.novedades .main-article {margin-bottom: 25px;}
.novedades .main-article a {display: flex; background-color: var(--green); color:var(--light-green-2); border-radius: 5px;}
.novedades .main-article img {height: auto;  width: 50%; }
.novedades article .text {padding: 40px 30px 70px 30px; position: relative; width: 50%;}
.novedades .main-article p {font-size: 0.875em; padding-bottom: 20px;}
.novedades .main-article h4 {font-size: 2.875em;}
.novedades .main-article span {font-size: 1.125em; text-decoration: underline; color:var(--light-green); position: absolute; bottom:40px; left:30px;}
.novedades .main-article a:hover span, .novedades .main-article a:focus span, .novedades .main-article a:active span {color:var(--light-yellow);}

.novedades .article a {padding: 40px 30px 70px 30px; background-color: var(--light-green-2); color:var(--dark-green); width: 100%; display:flex; flex-direction: column; position: relative; min-height:260px; border-radius: 5px;}
.novedades .article h4 {font-size: 1.500em; font-weight: 700;}
.novedades .article p {font-size: 1.125em; padding-top: 40px;}
.novedades .article span {font-size: 0.875em; position: absolute; bottom:40px; left:30px; color:var(--dark-green); text-decoration: underline; font-weight: 700;}
.novedades .article a:hover span, .novedades .article a:focus span, .novedades .article a:active span {color:var(--light-green-3);}


/* --------> Contacto <<<-------------*/

#contacto h1 {font-size: 3.000em; line-height: 1.100em; font-weight: 700; color:var(--green); margin-top:70px;}
#contacto .intro {width: 40%;}
#contacto .content {display: flex; justify-content:space-between;  flex-direction: row-reverse; align-items: flex-end; padding-bottom: 70px;}
#contacto .text {font-size: 1.250em; width: 44%; }
#contacto .text ul {display: flex; justify-content:space-between;}
#contacto .text ul li {width: 46%;}
#contacto .info h2 {font-weight: 700;}
#contacto a.rrhh {color:var(--light-green-2);text-decoration: underline;padding: 0 5px; }
#contacto a.rrhh2 {color:var(--dark-green);text-decoration: underline;padding: 0 5px; }
#contacto a.rrhh:hover , #contacto a.rrhh2:hover{color:var(--dark-green);text-decoration: underline;background:var(--light-green) ;}
#contacto p.ventas-mail {color:var(--dark-green);padding: 0 10px; }

#contacto .reclamos {background: var(--dark-green); width: 55%; color:var(--light-green-2); padding: 50px ;margin: -205px 0 0 0;}
#contacto .reclamos h2{font-size: 3.000em; line-height: 1.100em; font-weight: 700; color:var(--light-green); margin-top:10px;}
#contacto .reclamos h3{font-size: 1.250em; line-height: 1.100em; font-weight: 700; color:var(--light-green); margin-top:5px;}
#contacto .reclamos ul{padding-top:3%;}
#contacto .form {background: var(--dark-green); width: 55%; color:var(--light-green-2); padding: 70px 100px 50px ;margin: -205px 0 140px 0;}
#contacto .form p {font-size: 1.500em;}
#contacto .form form {margin-top: 30px;}
#contacto .form form label {color:var(--light-green);}
#contacto .form .button {margin-bottom: 20px;}

#contacto .form .error {color:#CF0013; border:2px solid #CF0013;}
#contacto .form .text-error {color:#CF0013; background-color:#F4D3D6; font-size:1.100em; padding:15px; border-radius: 5px; display: flex; font-weight: 500;}
#contacto .form .text-error img {margin-right: 8px;}
#contacto .form .text-ok {color:var(--green-2); background-color:var(--light-green-2); font-size:1.100em; padding:15px; border-radius: 5px; display: flex; font-weight: 500;}
#contacto .form .text-ok img {margin-right: 8px;}


#contacto .agentes {background: var(--green-2); padding-top:140px; padding-bottom: 70px; text-align: center;}
#contacto .agentes h3 {font-size: 3.000em; font-weight: 700; color:var(--white); text-align: center; line-height: 1.100em;}
#contacto .agentes p {font-size: 1.500em; color:var(--white);}

#contacto .agentes ul {color:var(--green); font-size: 0.833em; margin-top:25px;}
#contacto .agentes ul li {background: var(--light-green-2); text-align: left; margin-bottom: 1px; padding: 30px 30px 10px 30px; display: flex; justify-content:space-between;}
#contacto .agentes ul div { width: 30%;}
#contacto .agentes ul p {color:var(--green);padding-bottom: 20px;}


/* --------> Nosotros <<<-------------*/

#nosotros .vision {background: var(--dark-green);  padding-top:100px; padding-bottom: 70px;}
#nosotros .vision .center {display: flex; justify-content:space-between; flex-direction: row; }
#nosotros .vision .center div {background:var(--white); padding: 35px; width:28%; }
#nosotros .vision h2 {color:var(--light-green-3); font-size:2.250em; font-weight: 500; margin-bottom: 30px;}
#nosotros .vision p {font-size:1.250em; line-height:1.600em;}

#nosotros .plantas {background:var(--white); padding: 80px 0 70px;}
#nosotros .plantas .center {background:var(--light-green-3); position: relative;}

#nosotros .plantas .miscelanea {position: absolute; margin: -40px auto 0; left: 0; right: 0;  margin-left: auto;  margin-right: auto; }
#nosotros .plantas ul {display: flex; justify-content:space-between; padding: 80px 40px 55px;}
#nosotros .plantas li { width: 22%;}
#nosotros .plantas h3 {font-size: 1.625em; line-height: 1.200em; font-weight: 500; color:var(--dark-green);}
#nosotros .plantas li:first-child h3:first-child, #nosotros .plantas li:first-child h3:last-child {color:var(--white);}
#nosotros .plantas p {color:var(--white); line-height: 1.5em; margin-top:16px; }

#nosotros .trayectoria {background: var(--white); padding:0 0 70px 0;}
#nosotros .trayectoria h4 {color:var(--green); font-size: 3.000em; font-weight: 700; text-align: center; }
#nosotros .trayectoria h5 {color:var(--light-green-3); font-size: 2.250em; font-weight: 500; text-align: center;}
#nosotros .trayectoria img {padding: 40px 0;}
#nosotros .trayectoria .text {display: flex; justify-content:space-between; width: 100%;}
#nosotros .trayectoria .text p {width: 30%;}


/* --------> Productos <<<-------------*/


#productos {background: var(--light-grey);}
#productos .contenido  {background:var(--white); padding:100px 0 60px;}
#productos .contenido .info {background: var(--light-green-3); padding: 30px 40px; }
#productos .contenido .info p {font-size: 2.250em; color:var(--white); font-weight: 500; margin-bottom: 20px;}
#productos .contenido .info ul {display: flex; flex-wrap: wrap; justify-content:space-between; position: relative;}
#productos .contenido .info li {font-size: 1.250em; line-height: 2.000em; flex: 0 0 28%;}
#productos .contenido .info li:before {content: "•"; display: inline-block; margin-right:8px;}
#productos .contenido .info ul:before {content: ""; display: inline-block; position: absolute; border: 1px solid; border-color:var(--light-grey); height: 130px;
left: 31.5%;}
#productos .contenido .info ul:after {content: ""; display: inline-block; position: absolute; border: 1px solid; border-color:var(--light-grey); height: 130px;
right: 31.5%;}

#productos .listado { padding: 40px 0;}
#productos .listado h2 {color:var(--green); font-size: 3.000em; font-weight: 700; text-align: center; text-transform: uppercase; margin-bottom: 20px; }


#productos .productos {background: var(--dark-green); padding: 80px 0; margin-top: 80px; width: 100%; height: auto;}

.grid-estuches {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-template-rows: 374px 374px;
  gap: 2% 2%; 
  grid-template-areas: 
    "item-1 item-1 item-1 item-2 item-2 item-2"
    "item-3 item-3 item-4 item-4 item-5 item-5"; 
	margin-bottom: 60px;
}
.grid-estuches .item-2 { grid-area: item-2; position: relative; overflow: hidden;}
.grid-estuches .item-1 { grid-area: item-1; position: relative; overflow: hidden;}
.grid-estuches .item-3 { grid-area: item-3; position: relative; overflow: hidden;}
.grid-estuches .item-4 { grid-area: item-4; position: relative; overflow: hidden;}
.grid-estuches .item-5 { grid-area: item-5; position: relative; overflow: hidden;}

#productos .grid .item img {position: absolute; object-fit:cover; width: 100%; height: 374px; top:0; left:0; border-radius: 5px; z-index: 10;}

#productos .grid .item h3 {background: var(--light-green-2); color: var(--green);  display: inline-block; clear: both; font-size: 1.500em; padding: 2px 8px;}
#productos .grid .item .text {position: relative; z-index: 20; padding: 35px 30px; width: 100%; display: block; height: 100%;}
#productos .grid .item p {font-size: 0.875em; color: var(--green); font-weight: 700; padding-bottom: 4px;}
#productos .grid .item span {position: absolute; bottom:30px; left:35px; font-size: 1.125em; color: var(--green); font-weight: 700; text-decoration: underline;}
#productos .grid .item a:hover span, #productos .item a:focus span, #productos .item a:active span {color: var(--black);}
#productos .grid .item a:hover span, #productos .item a:focus span, #productos .item a:active span {color: var(--black);}

.grid-estuches .item-1 h3, .grid-estuches .item-2 h3 {background: var(--light-green)!important; }

.grid-maple {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 374px 374px; 
  gap: 2% 2%; 
  grid-template-areas: 
    "item-1 item-2 item-3"
    "item-4 item-5 item-6";
	
	margin-bottom: 80px;
}

.grid-maple .item-1 { grid-area: item-1; position: relative; overflow: hidden;}
.grid-maple .item-2 { grid-area: item-2; position: relative; overflow: hidden;}
.grid-maple .item-3 { grid-area: item-3; position: relative; overflow: hidden;}
.grid-maple .item-4 { grid-area: item-4; position: relative; overflow: hidden;}
.grid-maple .item-5 { grid-area: item-5; position: relative; overflow: hidden;}
.grid-maple .item-6 { grid-area: item-6; position: relative; overflow: hidden;}




#productos .link {color: var(--green); text-decoration: underline; font-size: 1.125em;  font-weight: 700; text-align: center; display: block; margin: 0 auto;}

.info2 {background: var(--light-green-3); border-radius: 5px; padding:60px 40px; display: flex; flex-wrap: wrap; flex-direction:row; align-content:space-between;}
.info2 p {color: var(--green); font-size: 1.250em!important; font-weight: 400!important; line-height:1.600em!important; padding: 10px 25px;}
.info2 p strong {font-weight: 700!important;}
.info2 a {font-size: 1.250em; font-weight: 400; color:var(--green); background:var(--light-green); display: block; padding: 8px; text-align: center; border-radius: 5px; width: 100%;}
.info2 a:hover {background-color: var(--light-yellow);}
.info2 a:focus, .grid-maple .item-7 a:active  {color: var(--light-green); background-color: var(--dark-green);}


#detalle-producto h1 {margin: 40px 0 25px; text-transform: uppercase!important;}
#detalle-producto .image {margin:0!important;}
#detalle-producto .text {width: 42%;}
#detalle-producto .text p {width: 80%;}
#detalle-producto table {border-collapse: collapse; margin-bottom: 40px;}

#detalle-producto table td {border-top:1px solid var(--light-green-3); font-size: 1.250em; color:var(--green); padding: 10px 0; vertical-align: top;}
#detalle-producto table td:first-child {padding-right: 20px;}
#detalle-producto .text .link {width: 50%; float: left;}
#detalle-producto .text .button {float: right;}

#detalle-producto .recomendaciones {background: var(--light-green-3); padding: 70px 0;} 
#detalle-producto .recomendaciones h2 {font-size: 3.000em; color:var(--dark-green);font-weight: 700; text-transform: uppercase;}
#detalle-producto .recomendaciones p {color:var(--dark-green); font-size: 1.250em; line-height:1.600em;}

#detalle-producto .recomendaciones ul {display: flex; justify-content:space-between; flex-wrap: wrap; margin-top: 50px;}
#detalle-producto .recomendaciones li {background: var(--light-grey); flex: 0 0 32%; margin-bottom: 2%; padding: 40px; position:relative;}
#detalle-producto .recomendaciones li h3 {font-weight: 700; font-size: 1.250em; color:var(--dark-green); margin-bottom: 20px;}
#detalle-producto .recomendaciones li p {color:var(--dark-green);}
#detalle-producto .recomendaciones li img {margin: 0 auto 35px; display: block;}
#detalle-producto .recomendaciones li a {font-size: 1.250em; font-weight: 400; color:var(--green); background:var(--light-green); display: block; padding: 8px; text-align: center; border-radius: 5px; width: 78%; position: absolute; bottom:40px;}
#detalle-producto .recomendaciones li a:hover {background-color: var(--light-yellow);}
#detalle-producto .recomendaciones li a:focus, #detalle-producto .recomendaciones li a:active  {color: var(--light-green); background-color: var(--dark-green);}


/* --------> Sostenibilidad <<<-------------*/

#sostenibilidad .compromisos {background: var(--light-green-3);  padding-top:90px; padding-bottom: 80px;}
#sostenibilidad .compromisos .center {color:var(--dark-green); }
#sostenibilidad .compromisos h2 {font-size: 3.000em; color:var(--dark-green);font-weight: 700; text-transform: uppercase; text-align: center; margin-bottom:50px;}
#sostenibilidad .compromisos ul {column-count: 2;  column-gap: 1rem;}
#sostenibilidad .compromisos li {font-size: 1.250em; line-height: 1.800em;  margin-bottom: 10px;}
#sostenibilidad .compromisos li:before {content: "•"; display: inline-block; margin-right:8px; margin-top: -4px;}
#sostenibilidad .compromisos .miscelanea {position: absolute; margin: 30px auto 0; left: 0; right: 0;  margin-left: auto;  margin-right: auto;}
	
#sostenibilidad .certificaciones {padding:100px 0 50px 0; background: var(--white); }
#sostenibilidad .certificaciones h3 {font-size: 3.000em; color:var(--green);font-weight: 700; text-transform: uppercase; text-align: center; margin-bottom:50px;}
#sostenibilidad .certificaciones ul {display: flex; justify-content:space-between; flex-wrap: wrap; }
#sostenibilidad .certificaciones li {background: var(--green); flex: 0 0 49%; margin-bottom: 2%; padding: 40px 40px 160px 40px; color:var(--white);  border-radius: 5px; font-size: 1.250em; line-height: 2.200em; position: relative; }
#sostenibilidad .certificaciones li h4 {color:var(--light-green); font-weight: 700; line-height: 1.650em;}
#sostenibilidad .certificaciones li p {line-height: 1.650em; margin-top: 20px;}
#sostenibilidad .certificaciones .button {font-size: 1.000em; width: calc(100% - 80px); margin-top: 40px; bottom:40px; position: absolute;}
#sostenibilidad .certificaciones li:last-child {background: none; padding: 0;}
#sostenibilidad .certificaciones li:last-child div {background: var(--green); padding: 40px 40px 160px 40px;  border-radius: 5px; position: relative;}
#sostenibilidad .certificaciones .frase {font-size: 1.625em; color: var(--green); padding: 40px; font-weight: 500; line-height: 1.300em;}

#sostenibilidad .agua {padding:0 0 70px 0; background: var(--white);}
#sostenibilidad .agua .center {background:var(--light-grey);} 

#sostenibilidad .agua .top {display: flex; flex-wrap: wrap; align-content:stretch;}
#sostenibilidad .agua .top div {width: 50%; color:var(--dark-green); }
#sostenibilidad .agua .top div:first-child {padding: 40px 45px; }
#sostenibilidad .agua .top h3 {font-size: 3.000em; text-transform: uppercase; font-weight: 700;}
#sostenibilidad .agua .top p {font-size: 1.250em; line-height: 1.800em;}
#sostenibilidad .agua .top div:last-child {overflow: hidden; }
#sostenibilidad .agua .top div img {width:auto; height: 100%; }

#sostenibilidad .agua .bottom {display: flex; flex-wrap: wrap; align-content:stretch; margin-top: -1px;}
#sostenibilidad .agua .bottom div {width: 50%; color:var(--dark-green); }
#sostenibilidad .agua .bottom div:first-child {background: var(--light-green-3); color:var(--white); padding: 40px; padding-bottom: 50px; width: 35%;}
#sostenibilidad .agua .bottom div:last-child {background: var(--green); color:var(--light-green-2); padding: 40px 50px; width: 65%;}
#sostenibilidad .agua .bottom h5 {font-size: 3.000em; font-weight: 700; color:var(--white);}
#sostenibilidad .agua .bottom p {font-size: 1.250em; line-height: 1.800em;}
#sostenibilidad .agua .bottom p strong {padding-bottom: 10px; display: inline-block;}



/* --------> Novedades <<<-------------*/

#novedades .info .button {width: 100%; margin-top: 80px; text-align: center;}

#novedades .articulos {background: var(--light-green-3);  padding-top:90px; padding-bottom: 80px;}
#novedades .articulos .center {color:var(--dark-green);}
#novedades .articulos h2 {font-size: 3.000em; color:var(--dark-green);font-weight: 700; text-transform: uppercase; text-align: center; margin-bottom:50px;}

#novedades .lista-articulos {display: flex; justify-content:space-between; flex-wrap: wrap;  row-gap: 40px;}
#novedades .lista-articulos article {flex: 0 0 31%; }
#novedades .lista-articulos article img { width: 100%; height: auto; border-radius: 5px; margin-bottom: 15px;}
#novedades .lista-articulos article h3 {color: var(--white); font-size: 1.250em; line-height: 1.800em; font-weight: 700; margin: 0 10px;}
#novedades .lista-articulos article p {color: var(--white); font-size: 1.250em; line-height: 1.800em; margin: 16px 10px;}
#novedades .lista-articulos article .link {text-decoration: underline!important; font-weight: 700; font-size: 1.110em;}
#novedades .lista-articulos article:hover .link, #novedades .lista-articulos article:active .link, #novedades .lista-articulos article:focus .link {color:var(--dark-green);}

#articulo header {background: var(--light-green-3);}
#articulo .article-body .intro {background: var(--light-green-3);}
#articulo .wrapper-int .text {width: 100%; padding-bottom: 80px;}
#articulo .breadcrumbs {color:var(--dark-green);}
#articulo .breadcrumbs a {color:var(--dark-green);}
#articulo .breadcrumbs a:hover,#articulo .breadcrumbs a:active, #articulo .breadcrumbs .copy a:focus  {color:var(--black);}
#articulo .wrapper-int .text h1 {font-size: 3.000em; font-weight: 700;  text-transform: uppercase; margin: 70px 0 5px; color:var(--dark-green);}
#articulo .wrapper-int .text p {color: var(--white);}

#articulo .wrapper-int .detalle {margin: 60px auto;}
#articulo .wrapper-int .detalle p {color:var(--dark-green); margin-bottom: 20px; font-size: 1.250em; line-height: 1.800em;}
#articulo .wrapper-int .detalle .left {float: left; width: 50%; padding-right: 20px;}
#articulo .wrapper-int .detalle .image-right { float: right;}
#articulo .wrapper-int hr {border-top: 1px solid var(--dark-green); margin: 10px auto 30px;}
#articulo .wrapper-int .quote {display: flex; justify-content:space-between; align-items: flex-start; margin: 30px 0;}
#articulo .wrapper-int .quote p {margin: -10px 0 0 30px; font-size: 1.500em; line-height: 1.300em; font-weight: 700; }
#articulo .wrapper-int .quote p mark {background: none!important; color:var(--dark-green);}
#articulo .wrapper-int .quote2 {display: flex; justify-content:flex-start; align-items: flex-start; margin: 50px 0;}
#articulo .wrapper-int .quote2 p mark {background: none!important; color:var(--dark-green);margin: -30px 0 0 30px; font-size: 1.500em; line-height: 1.500em; font-weight: 700; }
#articulo .wrapper-int .paginador {text-align: center; margin-top: 80px;}
#articulo .wrapper-int .paginador a:first-child {background: url("../images/arrow-left.svg") no-repeat; background-size: 20px 20px; background-position: center left; padding-left: 25px; padding-right: 80px;}
#articulo .wrapper-int .paginador a strong {text-decoration: underline; color:var(--dark-green); font-size: 0.95em;}
#articulo .wrapper-int .paginador a:last-child {background: url("../images/arrow-right.svg") no-repeat; background-size: 20px 20px; background-position: center right; padding-right: 25px; }
#articulo .wrapper-int .paginador a:hover strong,  #articulo .wrapper-int .paginador a:active strong, #articulo .wrapper-int .paginador a:focus strong {color:var(--black)!important;}

#articulo .wrapper-int .detalle table {background: var(--light-green-2);border:0;border-spacing: 0; text-align: center; margin:10px 0;}
#articulo .wrapper-int .detalle table td , #articulo .wrapper-int .detalle table th {background: var(--light-green-2);border-top:1px solid var(--light-green-3); padding: 10px 0; vertical-align: top;}
#articulo .wrapper-int .detalle table .header-table{background: var(--light-green-3);font-size: 1.150em; color:var(--green);border:0;padding: 5px;border-right:1px solid var(--light-green-2);}

#articulo .wrapper-int .detalle h2 {color:var(--light-green-3); font-size:1.250em; font-weight: 500; margin: 50px 0 30px 0; text-transform: uppercase;}
#articulo .wrapper-int .detalle ul{margin: 30px 0;}
#articulo .wrapper-int .detalle ul h3{font-size:1.250em; font-weight: 500;color:var(--green);}
#articulo .wrapper-int .detalle li{ margin: 5px 0;font-size: 1.250em; line-height: 2.000em; flex: 0 0 28%;}
#articulo .wrapper-int .detalle li:before {content: "•"; display: inline-block; margin-right:8px;}