/******************************
*   Tipografias
******************************/
@import url('all.css');
@import url('typo.css');

:root {
    --negro: 0, 0, 0;
    --blanco: 255, 255, 255;

    --verde_d: 0, 138, 18;
    --verde_l: 2, 223, 31;

    --verde_xd: 0, 109, 1;
    --verde_m: 44, 192, 45;

    --gris_d: 94, 94, 94;
    --gris_l: 171, 171, 171;

    --amarillo: 249, 247, 1;
    --azul: 5, 101, 193;
}


::selection {
    color: rgb(var(--blanco), 1);
    background: rgb(var(--verde_xd), .5);
}
::-moz-selection {
    color: rgb(var(--blanco), 1);
    background: rgb(var(--verde_xd), .5);
}
::-webkit-selection {
    color: rgb(var(--blanco), 1);
    background: rgb(var(--verde_xd), .5);
}

/******************************
*   Reset
******************************/
*{
    border: 0px;
    margin: 0px;
    padding: 0px;
}
html {
    scroll-behavior: smooth;
    scroll-padding: 70px;
}
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: 'Proxima Nova';
    font-weight: normal;
    font-style: normal;
    line-height: 1.4;
    font-size: 16px;
    color: rgb(var(--gris_d), 1); 
}
figure {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
figure img { margin: 0 auto; }
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a, a:link, a:hover, a:visited {
    text-decoration: none;
    color: inherit;
    cursor: pointer;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
ul,
ol {
    margin: 0;
    padding: 0;
    padding-inline-start: 20px;
}
li + li { margin-top: 15px; }
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: 'Proxima Nova';
    font-weight: 700;
    font-style: normal;
}
input,
select,
textarea {
    display: block;
    width: 100%;
    padding: 12px 16px;
    color: rgb(var(--oscuro), 1);
    background: rgb(var(--blanco), 1);
    border-radius: 0px;
    -moz-appearance: none;
    -webkit-appearance: none;
}
textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: ;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}
input::placeholder,
textarea::placeholder { color: rgb(var(--name), 1); }
button { background: transparent; }
input:focus,
select:focus,
textarea:focus,
button:focus { outline: none; }

p { margin: 0; }
* + p,
* + ol,
* + ul { margin-top: 20px; }
ol + *,
ul + *,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 { margin-top: 40px; }

ul > li::marker,
ul > li > ul > li::marker { color: rgb(var(--name), 1); }

/******************************
*   Loader
******************************/

/******************************
*   General
******************************/
main {
    /* min-height: calc(100vh - 80px); */
    position: relative;
}
.m__center {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.full__h { min-height: calc(100vh - 60px); }
main section,
.sect__pag {
    padding: 60px 0;
    position: relative;
}

/* Head Section */
* + .h__sect,
.h__sect + * { margin-top: 60px; }
.h__sect { text-align: center; }
.sect__tit {
    font-size: 6vw;
    color: rgb(var(--verde_xd), 1);
    text-transform: uppercase;
}
.sect__tit span {
    display: block;
    font-weight: normal;
    color: rgb(var(--verde_m), 1);
}
.h__italic .sect__tit {
    font-family: 'Proxima Nova Alt';
    font-weight: 800;
    font-style: italic;
    font-size: 8vw;
}

/* CTA */
* + .c__cta { margin-top: 60px; }
.c__cta {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 20px;
}
button.cta {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.cta,
a.cta {
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    padding: 12px 20px;
    color: rgb(var(--blanco), 1);
    background: rgb(var(--verde_d), 1);
    border-radius: 8px;
    position: relative;
}
.cta > * { display: inline-block; }
.cta span + *,
.cta * + span { margin-left: 10px; }


/* Slider */ 
.cont__slide .dos__content {
    text-align: center;
    margin-top: 15px;
}
.cont__slide .dos__content .swiper-pagination-bullet-active { background: rgb(var(--verde_xd), 1); }

/* Head Page */

/* Pleca */
.pleca {
    background: linear-gradient(50deg,  rgb(var(--verde_xd), 1) 3%, rgb(var(--verde_m), 1) 100%);
    max-width: 100%;
    overflow: hidden;
    position: relative;
    padding: 30px 30px 25px 30px;
}
.pleca .pleca__s {
    -webkit-animation: move__text 40s linear infinite;
    animation: move__text 40s linear infinite;
    display: inline-block;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
}
.pleca .pleca__s p {
    color: #fff;
    display: inline-block;
    font-size: 32px;
    font-family: 'Proxima Nova Alt';
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    margin-top: 0;
    line-height: 1;
}
.pleca .pleca__s p + p { padding-left: 30px; }
.pleca .pleca__s p span { color: rgb(var(--amarillo), 1); }

@-webkit-keyframes move__text {
    0% {
        -webkit-transform: translate(0,0,0)
    }
    100% {
        -webkit-transform: translate(-50%,0,0)
    }
}

@keyframes move__text {
    0% {
        -webkit-transform: translate(0,0,0)
    }
    100% {
        -webkit-transform: translate(-50%,0,0)
    }
}

@keyframes move__text {
    0% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
    100% {
        -webkit-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0)
    }
}

/******************************
*   Home
******************************/
/* ------ Home: Inicio ------ */
.inicio { padding: 0; }

/* ------ Home: Usos ------ */
.usos {
    overflow: hidden;
    /* background: linear-gradient(to bottom,  rgba(62,182,26,0) 20%,rgba(62,182,26,1) 100%); */
}
.usos .swiper { overflow: visible; }
.usos .swiper .swiper-slide { height: auto; }


/******************************
*   Productos
******************************/
.cont__pod > * + *,
.cont__pod > a > * + * { margin-top: 20px; }
.cont__pod { text-align: center; }
.producto {
    max-width: 700px;
    padding: 10px 30px 30px 30px;
    position: relative;
}
.producto .bg {
    position: absolute;
    width: 100%;
    padding-top: 100%;
    background: red;
    bottom: 0;
    left: 0;
    border-radius: 16px;
    transform-origin: 50% 100%;
}
.img__prod {
    width: 55%;
    margin: 0 auto;
    position: relative;
}
.sombra {
    position: absolute;
    bottom: .5%;
    background: rgb(var(--negro), 1);
    width: 110%;
    height: 2%;
    border-radius: 50%;
    filter: blur(4px);
    opacity: .8;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.img__prod figure {
    position: relative;
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
    transform-origin: 100% 100%;
    -webkit-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.img__prod figure img {
    width: 100%;
    max-width: inherit;
}
.elem__prod {
    position: absolute;
    top: 6%;
    left: 0;
    width: 100%;
}
.elem__prod figure {
    -webkit-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.elem__prod figure img {
    width: 100%;
    max-width: inherit;
}
.el02 { z-index: 1; }
.cont__pod span {
    display: block;
    font-weight: 700;
    font-style: normal;
    font-size: 6vw;
    text-transform: uppercase;
}

/******************************
*   Producto detalle
******************************/
.txt__detail h3 {
    text-transform: uppercase;
    font-size: 24px;
}
.txt__detail p[data-presenta] { opacity: .8; }
.txt__detail p[style] {
    font-weight: 700;
    font-size: 26px;
}
.detail__col .cont__pod {
    width: 85%;
    margin: 0 auto;
}

/******************************
*   Usos
******************************/
#usos section:not([class]) {
    background: linear-gradient(to bottom,  rgba(62,182,26,0) 20%,rgba(62,182,26,1) 100%);
    padding-bottom: 80px;
}
.grid__usos {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
    gap: 20px;
}
.grid__usos .gird__item { width: calc(50% - 10px); }
.cont__uso { height: 100%; }
.cont__uso > div {
    background: rgb(var(--blanco), 1);
    -webkit-box-shadow: 0 5px 10px 0 rgb(var(--negro), .2);
    box-shadow: 0 5px 10px 0 rgb(var(--negro), .2);
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    height: 100%;
}
.uso { position: relative; }
.uso .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 65%;
    -webkit-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.fil__uso { position: relative; }
.fil__uso > div:nth-child(1) { padding: 20px 10px; }
.fil__uso > div:nth-child(2) { padding: 0px 5px 20px; }
.fil__uso > div span {
    display: block;
    line-height: 1.2;
    font-weight: 600;
}
.fil__uso figure { filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3)); }



/******************************
*   Uso detalle
******************************/
.txt__pasos {
    margin-bottom: 20px;
    padding-left: 80px;
}
.pasos__usos,
.txt__pasos {
    position: relative;
    max-width: 950px;
    margin-right: auto;
    margin-left: auto;
}
.uso__fil + .uso__fil { padding-top: 30px; }
.uso__fil {
    display: flex;
    gap: 40px;
    position: relative;
    padding-bottom: 30px;
}
.col__01 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.number__pas {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Proxima Nova Alt';
    font-weight: 800;
    font-style: italic;
    color: rgb(var(--blanco), 1);
    font-size: 20px;
    border-radius: 4px;
    z-index: 1;
}
.col__02 { width: 100%; }
.col__02 > div { opacity: 0; }
.col__02 > div:nth-child(1) figure {
    width: 100%;
    padding-top: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}
.col__02 > div:nth-child(1) figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cont__bar {
    position: absolute;
    top: 0;
    left: 18px;
    width: 4px;
    height: 100%;
    background: rgb(var(--negro), .1);
}
.cont__bar .bar {
    width: 100%;
    height: 0%;
    transform-origin: 0 0;
}

/******************************
*   Sostenibilidad
******************************/
.head__page {
    position: relative;
    overflow: hidden;
}
.como { position: absolute; }
.como figure,
.como figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.comp01 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
}
.comp01 figure {
    overflow: hidden;
    filter: blur(6px);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.comp01::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 60%;
    background: linear-gradient(to bottom,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    z-index: 1;
}
.comp02 {
    bottom: 0;
    width: 100%;
    height: 20%;
}
.comp02 figure img { object-position: top center; }
.info__head {
    position: relative;
    z-index: 1;
}
.head__page .sect__tit,
.head__page .sect__tit > * {
    color: rgb(var(--blanco), 1);
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
    will-change: filter;
}
.prod__efi {
    width: 60vh;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.prod__efi > div {
    margin: 0 -2%;
    filter: drop-shadow(0px 4px 10px rgb(var(--negro), .6));
    will-change: filter;
}
.prod__efi > div:nth-child(3) { z-index: 1; }
.prod__efi > div:nth-child(4) {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
}
.prod__efi figure { position: relative; }
.prod__efi figure::before {
    content: '';
    position: absolute;
    bottom: -.5%;
    background: rgb(var(--negro), 1);
    width: 110%;
    height: 2%;
    border-radius: 50%;
    filter: blur(3px);
    opacity: .9;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.prod__efi > * figure img {
    position: relative;
    z-index: 1;
}
.recicla figure {
    margin: 0 auto;
    max-width: 350px;
    width: 70%;
}
.recicla figure figcaption { display: none; }
.grod__prod {
    max-width: 400px;
    width: 95%;
    margin-right: auto;
    margin-left: auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 20px;
}
.grod__prod > div {
    width: calc(33.33% - 10px);
    border-radius: 16px;
    padding: 5px;
    background: rgb(var(--negro), .05);
}
.c__pso {
    position: relative;
    padding-top: 25px;
    color: rgb(var(--blanco), 1);
    display: flex;
    height: 100%;
}
.number {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: red;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-shadow: 0 5px 10px 0 rgb(var(--negro), .5);
    box-shadow: 0 5px 10px 0 rgb(var(--negro), .5);
}
.number span {
    font-size: 24px;
    font-weight: 700;
}
.txt__pas {
    width: 100%;
    padding: 40px 15px 20px;
    text-align: center;
    font-size: 14px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.swiper-wrapper .swiper-slide:nth-child(odd) .number { background: rgb(var(--verde_d), 1); }
.swiper-wrapper .swiper-slide:nth-child(even) .number { background: rgb(var(--azul), 1); }
.swiper-wrapper .swiper-slide:nth-child(odd) .txt__pas { background: radial-gradient(ellipse at center,  rgba(42,189,100,1) 0%,rgba(0,78,31,1) 100%); }
.swiper-wrapper .swiper-slide:nth-child(even) .txt__pas { background: radial-gradient(ellipse at center,  rgba(54,215,253,1) 0%,rgba(3,92,188,1) 100%); }
.slide__pasos .swiper-slide { height: auto; }
.banner + *,
* + .banner { margin-top: 60px; }
.map__puntos {
    position: relative;
    height: 55vh;
    max-height: 700px;
}
.map__puntos iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.banner__formula {
    position: relative;
    margin-top: 20px;
}
.banner__formula > * {
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    position: absolute;
}
.banner__formula > picture:nth-child(1) { position: relative; }
.text__baner {
    color: rgb(var(--blanco), 1);
    text-align: center;
    width: 65%;
    top: 45%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.1;
    text-shadow: 0px 0 5px rgba(0, 0, 0, 0.8);
    right: 0;
    left: initial;
    font-size: 3vw;
}
.text__baner span { font-size: 140%; }

/* .sect__tips { background: rgb(var(--negro), .05); } */
.cont__tips { text-align: center; }
.item__tip {
    padding: 20px;
    color: rgb(var(--verde_d), 1);
}
.tip__icon {
    margin-right: auto;
    margin-left: auto;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.tip__icon span {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg,  rgb(var(--verde_xd), 1) 3%, rgb(var(--verde_m), 1) 100%);
}
.tip__icon figure { width: 70%; }
.pleca__sos {
    margin-top: 20px;
    background: linear-gradient(50deg,  rgb(var(--verde_xd), 1) 3%, rgb(var(--verde_m), 1) 100%);
    max-width: 100%;
    overflow: hidden;
    position: relative;
    padding: 30px 30px 30px;
    text-align: center;
    color: rgb(var(--blanco), 1);
    font-family: 'Proxima Nova Alt';
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 7vw;
    line-height: 1;
}
.pleca__sos span {
    display: block;
    color: rgb(var(--amarillo), 1);
}
#sostenibilidad .container { overflow: hidden; }
#sostenibilidad .container .swiper { overflow: visible; }

/******************************
*   Mobile
******************************/
/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {

/* ------ Productos ------ */
.grid__prod .gird__item + .gird__item { margin-top: 30px; }
.gird__item .cont__pod {
    margin: 0 auto;
    width: 80%;
}


.slide__prod .img__prod figure {
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    transition-delay: .1s;
}
.slide__prod .sombra { width: 110%; }
.slide__prod .elem__prod figure {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.slide__prod .elem__prod:nth-child(1) figure { transition-delay: .31s; }
.slide__prod .elem__prod:nth-child(2) figure { transition-delay: .23s; }
.slide__prod .elem__prod:nth-child(3) figure { transition-delay: .26s; }
.slide__prod .elem__prod:nth-child(4) figure { transition-delay: .29s; }

.swiper-slide-active .img__prod figure {
    position: relative;
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
}
.swiper-slide-active .sombra { width: 100%; }
.swiper-slide-active .elem__prod figure {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}





/* ------ usos ------ */
.fil__uso > div span { font-size: 14px; }


}
@media (min-width : 480px) {
/* ------ Productos ------ */
.grid__prod {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
    gap: 30px;
}
.grid__prod .gird__item { width: calc(50% - 15px); }
.img__prod figure {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
}
.cont__pod span { font-size: 20px; }
.cont__pod a:hover .sombra { width: 100%; }
.cont__pod a:hover .img__prod figure {
    position: relative;
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
}
.cont__pod a:hover .el01 figure {
    -webkit-transform: translate(-6%, -6%);
    -moz-transform: translate(-6%, -6%);
    -ms-transform: translate(-6%, -6%);
    -o-transform: translate(-6%, -6%);
    transform: translate(-6%, -6%);
}
.cont__pod a:hover .el02 figure {
    -webkit-transform: translate(6%, 6%);
    -moz-transform: translate(6%, 6%);
    -ms-transform: translate(6%, 6%);
    -o-transform: translate(6%, 6%);
    transform: translate(6%, 6%);
}
.cont__pod a:hover .el03 figure {
    -webkit-transform: translate(-6%, 6%);
    -moz-transform: translate(-6%, 6%);
    -ms-transform: translate(-6%, 6%);
    -o-transform: translate(-6%, 6%);
    transform: translate(-6%, 6%);
}
.cont__pod a:hover .el04 figure {
    -webkit-transform: translate(6%, 6%);
    -moz-transform: translate(6%, 6%);
    -ms-transform: translate(6%, 6%);
    -o-transform: translate(6%, 6%);
    transform: translate(6%, 6%);
}   

/* ------ Usos ------ */
.cont__uso a:hover .uso .bg { padding-top: 70%; }


}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
@media (max-width : 679px) {
/* ------ Uso detalle ------ */
.col__02 > div + div { margin-top: 30px; }
.col__02 > div:nth-child(1) { width: 80%; }

}
@media (min-width : 680px) {
/* ------ Prodcuto detalle ------ */
#producto-detalle .cont__slide {
    max-width: 848px;
    margin-left: auto;
    margin-right: auto;
}

/* ------ Uso detalle ------ */
.col__02 {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 30px;
}
.col__02 > div:nth-child(1) { width: calc(45% - 15px); }
.col__02 > div:nth-child(2) { width: calc(55% - 15px); }
/* .col__02 > div:nth-child(1) figure { padding-top: 60%; } */
.col__02 > div:nth-child(2) { font-size: 18px; }

/* ------ Sostenibilidad ------ */
.cont__tips {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.item__tip { width: 33.33%; }

}
@media (min-width : 680px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
/* ------ Home: Productos ------ */
.productos .container { overflow: hidden; }
.productos .container .swiper { overflow: visible; }

/* ------ Home: Usos ------ */
.swiper .fil__uso > div span { font-size: 18px; }

/* ------ Prodcuto detalle ------ */
.detail__col + .detail__col { margin-top: 30px; }
.txt__detail h3,
.txt__detail p[data-presenta],
.txt__detail p[style] { text-align: center; }
.txt__detail p[data-presenta] strong { display: block; }

.mas__productos { overflow: hidden; }
.mas__productos .swiper { overflow: visible; }

/* ------ Sostenibilidad ------ */
.banner picture {
    margin: 0 -15px;
    display: block;
}
.map__puntos,
.banner__formula {
    margin-left: -15px;
    margin-right: -15px;
}

}
/* Medium Devices to Large Devices */
@media (min-width : 768px) {
/* main { min-height: calc(100vh - 90px); } */
.sect__tit { font-size: 32px; }
.h__italic .sect__tit { font-size: 34px; }

/* ------ Usos ------ */
.fil__uso > div:nth-child(2) { padding: 20px 5px 20px; }
.fil__uso > div span { font-size: 18px; }

/* ------ Prodcuto detalle ------ */
.fil__deatil {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 30px;
}
.detail__col { width: calc(50% - 15px); }

/* Pleca */
.pleca .pleca__s p { font-size: 42px; }

/* ------ Sostenibilidad ------ */
.text__baner { width: 40%; }
.pleca__sos { font-size: 52px; }

}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
/* ------ Home: Productos ------ */
.productos .container { width: 100%; }

/* ------ Home: Usos ------ */
.usos .container { width: 100%; }
.usos .fil__uso > div span { font-size: 14px; }

/* ------ Sostenibilidad ------ */
#sostenibilidad .container { width: 100%; }

}
@media (max-width : 991px) {

}
@media (min-width : 992px) {


/* ------ Productos ------ */
.grid__prod .gird__item { width: calc(25% - 22.5px); }

/* ------ Usos ------ */
.grid__usos { gap: 30px; }
.grid__usos .gird__item { width: calc(25% - 22.5px); }


}
/* Large Devices, Wide Screens */
@media (min-width : 768px) and (max-width : 1200px) {
/* ------ Sostenibilidad ------ */
.text__baner { font-size: 1.7vw; }

}
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (max-width : 1199px) {
}
@media (min-width : 1200px) {
/* ------ Sostenibilidad ------ */
.text__baner { font-size: 22px; }

}




header ul,
footer ul,
header ol,
footer ol {
    padding-inline-start: 0;
    list-style: none;
}
header li + li,
footer li + li { margin-top: 0; }

/******************************
*   Header
******************************/
.header {
    -webkit-box-shadow: 0 5px 10px 0 rgb(var(--negro), .2);
    box-shadow: 0 5px 10px 0 rgb(var(--negro), .2);
    padding: 10px 5px 10px 25px;
    background: linear-gradient(to right,  rgb(var(--verde_d),1) 0%, rgb(var(--verde_l),1) 100%);
    color: rgb(var(--blanco), 1);
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0px;
    z-index: 300;
}
.cont__menu {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
}
.logo {
    position: relative;
    width: 60px;
    z-index: 1;
}
.logo a { display: block; }
.logo a span {
    position: absolute;
    top: -1000px;
    left: -1000px;
    opacity: 0;
}
.logo figure::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4%;
    width: 100%;
    height: 100%;
    background: url('../img/espiral.png') center no-repeat;
    background-size: contain;
    z-index: -1;
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}
.menu__nav nav ul li a {
    display: block;
    font-size: 20px;
    font-weight: 600;
}
.menu__nav nav ul li a span {
    display: block;
    position: relative;
}
.menu__nav nav ul li a span::before,
.menu__nav nav ul li a span::after {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.cont__social { display: none; }
.btn__mob {
    width: 60px;
    height: 60px;
    cursor: pointer;
    position: relative;
}
.btn__mob > div {
    position: absolute;
    width: 60%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.btn__mob > div span {
    display: block;
    width: 100%;
    height: 2px;
    background: rgb(var(--blanco), 1);
    -webkit-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.btn__mob > div span + span { margin-top: 6px; }
.btn__mob.active { pointer-events: none; }
.btn__mob.active > div span {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    transform: translateX(-30px);
}
.btn__mob > div span:nth-child(2) { transition-delay: .1s; }
.btn__mob > div span:nth-child(3) { transition-delay: .2s; }
#close__menu {
    position: absolute;
    top: 8px;
    right: 0;
    -webkit-transform: scale(0) rotate(45deg);
    -moz-transform: scale(0) rotate(45deg);
    -ms-transform: scale(0) rotate(45deg);
    -o-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
    -webkit-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.active #close__menu {
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    transition-delay: .3s;
}
#close__menu > div span:nth-child(1) {
    -webkit-transform: translate(0px, 4px) rotate(45deg);
    -moz-transform: translate(0px, 4px) rotate(45deg);
    -ms-transform: translate(0px, 4px) rotate(45deg);
    -o-transform: translate(0px, 4px) rotate(45deg);
    transform: translate(0px, 4px) rotate(45deg);
}
#close__menu > div span:nth-child(2) {
    -webkit-transform: translate(0px, -4px) rotate(-45deg);
    -moz-transform: translate(0px, -4px) rotate(-45deg);
    -ms-transform: translate(0px, -4px) rotate(-45deg);
    -o-transform: translate(0px, -4px) rotate(-45deg);
    transform: translate(0px, -4px) rotate(-45deg);
}

/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
.menu {
    position: absolute;
    top: 0%;
    left: -100%;
    width: 500px;
    max-width: calc(100% - 70px);
    height: 100vh;
    height: 100dvh;
    padding-top: 80px;
    background: linear-gradient(135deg,  rgb(var(--verde_m), .9) 0%, rgb(var(--verde_xd), .9) 100%);
    -webkit-box-shadow: 0 5px 10px 0 rgb(var(--negro), .2);
    box-shadow: 0 5px 10px 0 rgb(var(--negro), .2);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.menu.active { left: 0; }
.menu__nav nav ul li a { padding: 15px 15px 15px 20px; }
.menu__nav nav ul li a:hover { background: rgb(var(--verde_d), .6); }
.menu__nav nav ul li a span {
    display: flex;
    justify-content: space-between;
}
.menu__nav nav ul li a span::after {
    content: '\f105';
    display: inline-block;
    font-weight: 400;
    font-family: "Font Awesome 6 Pro";
    font-size: 20px;
}
}
/* Medium Devices to Large Devices */
@media (min-width : 768px){
.header { padding: 0 25px 0 40px; }
.btn__mob { display: none; }

.logo { width: 70px; }

.menu__nav,
.menu__nav nav,
.menu__nav nav ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.menu__nav nav ul li { display: inline-block; }
.menu__nav nav ul li a {
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}
.menu__nav nav ul li a span { padding: 30px 15px; }
.menu__nav nav ul li a span::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: rgb(var(--blanco), 1);
    opacity: 0;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: 0 0;
}
.menu__nav nav ul li a:hover span::after {
    opacity: .5;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}
.cont__social {
    margin-top: 0;
    display: flex;
    align-items: center;
}
.cont__social ul li a {
    padding: 30px 15px;
    font-size: 22px !important;
}

}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
}
/* Large Devices, Wide Screens */
@media (max-width : 991px) {
}
/* Medium Devices to Large Devices */
@media (min-width : 992px){
}
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (max-width : 1199px) {
}
/* Medium Devices to Large Devices */
@media (min-width : 1200px){
}


/******************************
*   Footer
******************************/
.footer {
    background: rgb(var(--negro), .05);
    color: rgb(var(--gris_d), .7);
}
.foo__nav { padding: 40px 0; }
.foo__nav .logo {
    width: 80px;
    margin: 15px;
    margin: 0 auto;
}
.nav__links ul li + li { margin-top: 4px; }
.nav__links ul li a:hover { color: rgb(var(--verde_d), 1); }
.nav__links .social {
    display: flex;
    gap: 20px;
}
.nav__links .social li { margin: 0; }
.nav__links .social li a { font-size: 24px; }
.nav__links > li > span {
    text-transform: uppercase;
    color: rgb(var(--verde_xd), 1);
    font-weight: 800;
    font-size: 20px;
}
.nav__links > li > span + ul { margin-top: 10px; }
.foo__legal {
    padding: 30px 0px;
    text-transform: uppercase;
    font-size: 14px;
    color: rgb(var(--gris_l), 1);
}
.foo__legal p { padding-top: 6px; }
.foo__legal figure {
    width: 50px;
    min-width: 50px;
    padding: 0;
}

/* Extra Small Devices, Phones */ 
@media (max-width : 479px) {
}
@media (min-width : 480px) {
}

@media (max-width : 679px) {
.footer { text-align: center; }
.foo__legal figure { margin: 0 auto; }
.nav__links > li + li { margin-top: 30px; }
.nav__links .social { justify-content: center; }
.foo__legal figure { margin-bottom: 10px; }
}
@media (min-width : 680px) {
.nav__links {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 60px;
}
.foo__legal {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.foo__legal figure { margin-right: 20px; }

}
/* Small Devices, Tablets */
@media (min-width : 480px) and (max-width : 767px) {
}
/* Small Devices, Nav */
@media (max-width : 767px) {
.foo__nav > div + div { margin-top: 40px; }

}
/* Medium Devices to Large Devices */
@media (min-width : 768px){
.foo__nav .logo { width: 90px; }
.foo__nav {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 40px 100px;
    -webkit-flex-flow: row wrap;
    -ms-flex-wrap: row wrap;
    flex-flow: row wrap;
}
.nav__links { gap: 100px; }

}
/* Medium Devices, Desktops */
@media (min-width : 768px) and (max-width : 991px) {
.foo__nav { justify-content: center; }
}
/* Large Devices, Wide Screens */
@media (max-width : 991px) {
}
@media (min-width : 992px) {
}
@media (min-width : 992px) and (max-width : 1200px) {
}
@media (max-width : 1199px) {
}
@media (min-width : 1200px) {

}