/* {
    outline: 3px solid black;
}*/
:root {
    --container-padding: 3em 2vmax;
    --container-padding-mobile: 2em 2vmax;
    --padding-top-bottom: 4em;
    --padding-left-right: 2vmax;
    --gutter: 3%;
}

.container.padding-top-bottom {
    padding: var(--padding-top-bottom) 0;
}

.no-padding-top-bottom {
    padding-top: 0;
    padding-bottom: 0;
}

.container.no-padding-top {
    padding: 0 var(--padding-left-right) var(--padding-top-bottom);
}

.padding-top {
    padding-top: 33px;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--container-padding);
}

.container-sequel {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2vmax;
}

.container.grid-header {
    padding-top: 0;
    padding-bottom: 2em;
}

.container.no-padding {
    padding: 0;
}

.no-padding {
    padding: 0 !important;
}

.wrapper-text {
    padding: 0 15%;
    box-sizing: border-box;
}

.inline li {
    display: inline-block;
}

.order-0 {
    order: 0;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

label, label + span, legend, fieldset {
    padding: 10px 12px 2px;
    display: block;
}

legend {
    padding-top: 2em;
}

.hour fieldset, .hour legend {
    margin: 0;
    padding: 5px 0 0;
}

/*************** Mobile Navigation **************/
#menu-mobile {
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}

/*** INPUT ***/
#menu-mobile input {
    width: auto;
    opacity: 0;
    position: absolute;
    z-index: -1;
}

/*** LABEL ***/
#menu-mobile label {
    width: 30px;
    cursor: pointer;
    display: block;
    padding-top: 1em;
    position: absolute;
    right: 3vmax;
    top: calc(2vmax + 10px);
}

/* Hamburger Icon */
#menu-icon,
#menu-icon:before,
#menu-icon:after {
    background: var(--light);
    height: 3px;
    transition: all 0.2s ease-in-out;
    width: 100%;
}

#menu-icon {
    /*max-width: 1em;*/
    height: 3px;
    position: relative;
}

#menu-mobile label #menu-icon {
    float: right;
}

#menu-icon:before,
#menu-icon:after {
    content: '';
    left: 0;
    position: absolute;
}

#menu-icon:before {
    top: -8px;
}

#menu-icon:after {
    bottom: -8px;
}

/* Close Icon */
#menu-mobile input[type=checkbox]:checked + label #menu-icon {
    background: transparent;
}

#menu-mobile input[type=checkbox]:checked + label #menu-icon:before {
    top: 0;
    transform: rotate(-45deg);
    background: var(--dark);
}

#menu-mobile input[type=checkbox]:checked + label #menu-icon:after {
    bottom: 0;
    transform: rotate(45deg);
    background: var(--dark);
}

#menu-mobile input[type=checkbox]:checked + label #menu-icon {
    background: transparent;
}

/*** MENU ***/
/* Overlay */
#menu-mobile input:checked ~ #overlay {
    background: var(--light);
    bottom: 0;
    left: 0;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 100vw;
    z-index: -1;
}

#menu-mobile input:checked ~ label[for=menu-mobile-toggle] {
    position: fixed;
}

/* List */
.menu-mobile-content {
    height: 70%;
    width: 100%;
    left: 0;
    top: 15%;
    display: none;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
}

#menu-mobile input:checked ~ .menu-mobile-content {
    display: flex;
    max-height: inherit;
    position: fixed;
    opacity: 1;
}

#menu-mobile ul > li {
    margin: 0.5em 0;
}

.menu-mobile-content a:link {
    color: var(--dark);
}

.menu-mobile-content a:hover {
    color: var(--dark);
}

.menu-mobile-content a:active {
    color: var(--dark);
}

.menu-mobile-content a:visited {
    color: var(--dark);
}

.product {
    padding-bottom: 4vmax;
}

.clients .grid-scroll-x {
    align-items: center;
}

.container.gridbigproduct {
    padding-top: 1em;
    padding-bottom: 0;
}

.extra-articles {
    display: grid;
    grid-auto-flow: column;

}
.not-order{
    grid-column: 1 / 3;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-2-space-between {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    grid-gap: 10px;
}

.align-grid-center {
    align-items: center;
}

.extra-articles article {
    text-align: center;
}

.nav-wrapper.desktop {
    padding: 10px 0 30px;
    display: grid;
    grid-template-columns: 107px auto 270px;
    grid-auto-flow: column;
    grid-gap: 20px;
}

.nav-wrapper.mobile {
    display: grid;
    padding: 2vmax 0 10px;
}

.menu-desktop-content {
    max-width: 600px;
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(7, auto);
    justify-content: space-between;
    align-items: center;
    justify-items: center;
}

.nav-wrapper.desktop > ul {
    height: 100%;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-items: center;
    grid-gap: 20px;
}

.ind-product {
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: auto;
    align-content: start;
    grid-gap: 5px;
}

.pname {
    padding: 0;
    margin: 0;
    grid-column: 1;
    grid-row: 2;
}

.price {
    padding: 0;
    margin: 0;
    grid-column: 1;
    grid-row: 3;
    font-weight: 700;
}

/*noinspection CssRedundantUnit*/
.pimage {
    /*noinspection CssRedundantUnit*/
    grid-column: 1;
    grid-row: 1;
}

.pdescription {
    padding: 0;
    grid-column: 1;
    grid-row: 4;
}

.grid-news {
    margin-bottom: 8%;
    display: grid;
    grid-gap: 1.25em;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.blog-item {
    height: 200px;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;
}

input {
    width: auto;
    display: block;
}

.formbutton {
    padding: 25px 0 0 0;
}

#nuestrocafe .more {
    text-align: center;
}

#nuestrocafe .grid-scroll-x {
    text-align: center;
}
.right-text{
    text-align: right;
}

.big-height{
    height: 100%;
}

.center-text {
    text-align: center;
}

.center-button {
    text-align: center;
}

.grid-conditions {
    grid-gap: 11px;
}

.grid-conditions article {
    padding-top: 33px;
}

#productoorganico li {
    display: inline-block;
}
.grid-methods{
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-rows: auto;
    justify-content: space-between;
    align-items: center;
}

.grid-4 h3 {
    font-size: 20px;
}

.grid-2-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
}

.grid-product-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
.grid-products-price{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    grid-column-gap: 5%;
}

.grid-product-view .product-description {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}


.grid-product-view form {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.grid-product-form {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 10px;
}

.grid-product-form fieldset > label {
    padding: 0;
    text-indent: 12px;
}

.grid-2-left-aligned {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: left;
    grid-gap: 20px;
}

.grid-product-view .product-buy {
    align-items: center;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    margin-top: 10px;
}

.grid-product-view .product-buy p {
    font-size: 3em;
}

.grid-product-view > p {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

.grid-image-first {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10px;
    justify-items: center;
}

.image-top-first-round {
    grid-row: 1;
}

#homepage .image-top-first-round img {
    border-radius: 111px;
}

#family h2 {
    margin-bottom: 20px;
}

.desktop-family .yomol p {
    padding: 0 35%;
}
.shorter-text-space p{
    padding: 0 20%;
}
.not-so-short-text p {
    padding: 0 12%;
}

.desktop-family .grid-conditions {
    margin-top: 22px;
}

.desktop-family .gridthree2 {
    margin-top: 44px;
}

#family .grid-scroll-x {
    align-items: center;
}
.faq {
    grid-area: faq;
}

.chat {
    grid-area: chat;
}

.chat h2 {
    background: url(../images/ayuda/sprites_ayuda_iconos.svg) 0 0 / 9% no-repeat;
}

.call {
    grid-area: call;
}

.call h2 {
    background: url(../images/ayuda/sprites_ayuda_iconos.svg) 0 59% / 9% no-repeat;
}

.help-mail {
    grid-area: mail;
}

.help-mail h2 {
    background: url(../images/ayuda/sprites_ayuda_iconos.svg) 0 116% / 9% no-repeat;
}
.help-mail form input {
    border: 2px solid rgba(64,41,10,.3);
}
.help-mail form textarea {
    border: 2px solid rgba(64,41,10,.3);
    border-radius: var(--card-border-radius);
}
.border-padding {
    padding: 5%;
    border: 2px solid rgba(64,41,10,.5);
    border-radius: var(--card-border-radius);
}

.login-wrapper {
    position: absolute;
    top: 35%;
    left: calc(50% - 150px);
    width: 300px;
}

.label-span {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
}

form textarea {
    border: 1px solid var(--light-80);
    border-radius: 15px;
}

.margin-bottom {
    margin-bottom: 20px;
}

.grid-two-thirds-responsive {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 20px;
}

.sidebar-nav-responsive {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 20px;
}

.sidebar-nav-responsive a:link {
    color: var(--dark);
}

.grid-two-column-auto-row-responsive {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
}

.card > * {
    padding: 10px;
    border: 1px solid var(--dark);
    border-radius: var(--card-border-radius);
}
.grid-cart-list{
    display: grid;
    grid-auto-rows: auto;
    grid-gap: 20px;
}


@media screen and (max-width: 639px) {

    .grid-two-thirds-responsive {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }

    .sidebar-nav-responsive {
        display: grid;
        grid-auto-flow: row;
        grid-gap: 10px;
    }

    .grid-two-column-auto-row-responsive {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(auto-fill, 1fr);
        grid-gap: 10px;
    }

    .gridbigproduct {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: auto;
    }

    .product-title {
        grid-column: 1;
        grid-row: 1;
    }

    .grid-scroll-x {
        grid-row: 2;
        grid-gap: calc(20px / .2);
    }

    .extra-articles {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }

    .map .extra-articles {
        padding-left: 55px;
    }

    .h2-link {
        grid-column: 2;
        grid-row: 1;
        justify-content: center;
        text-align: right;
    }

    .addbutton1 {
        grid-column: 1;
        grid-row: 3;
    }

    .addbutton2 {
        grid-column: 1;
        grid-row: 4;
    }

    .grid-scroll-x article {
        padding-left: 5px;
        box-sizing: border-box;
    }

    .gridthree1 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        grid-gap: 11px;
    }

    .gridthree2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: auto;
        grid-gap: 44px;
        align-items: start;
    }

    .grid-2 {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
}

@media screen and (min-width: 640px) {
    .grid-scroll-x {
        grid-gap: calc(20px / 1);
    }

    .gridthree1 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        grid-gap: 15px;
    }

    .gridthree2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        grid-gap: 15px;
        align-items: start;
    }

    .one {
        grid-column: 1;
        grid-row: 1;
    }

    .two {
        grid-column: 2 / 2;
        grid-row: 1;
    }

    .three {
        grid-column: 1;
        grid-row: 2;
    }

    .four {
        grid-column: 2;
        grid-row: 2;
    }
}

@media screen and (max-width: 767px) {
   .crazy-icon-padding{
       padding: 1% 0 7% 11%;
   }

    .margin-thingy{
        margin: 22px 0;
    }

    .container {
        padding: var(--container-padding-mobile);
    }

    .container-threequel{
        padding: var(--container-padding-mobile);
    }

    .container.footer {
        padding-bottom: calc(var(--padding-top-bottom) / 3);
    }

    .grid-six {
        padding: 0 11%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 5px;
    }

    .gridbigproduct {
        padding: 20px 0;
        display: grid;
        grid-gap: 20px 0;
        grid-template-columns: 20px 1fr 20px;
        align-content: start;
    }

    .gridbigproduct > * {
        grid-column: 2 / -2;
    }
    .premium_position{
        grid-row: 2;
    }

    .product-title{
        grid-row: 1;
    }
    .little-font{
        grid-row: 1;
    }
    .gridbigproduct > .grid-scroll-x {
        grid-column: 1 / -1;
    }

    .grid-scroll-x {
        overflow-y: hidden;
        display: grid;
        grid-gap: calc(4% / 2);
        grid-template-columns: 10px;
        grid-template-rows: auto;
        grid-auto-flow: column;
        grid-auto-columns: calc(50% - 4% * 2);
        align-items: start;

        overflow-x: scroll;
        scroll-snap-type: x proximity;
        padding-bottom: calc(.75 * 20px);
        margin-bottom: calc(-.25 * 20px);
    }

    .grid-scroll-x:before,
    .grid-scroll-x:after {
        content: '';
        width: 10px;
    }

    /*to here*/
    .addbutton1 {
        margin: 0 13%;
    }

    .addbutton2 {
        margin: 0 13% 8% 13%;
    }

    .grid-2-text-photo {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 22px;
    }

    .grid-history {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        grid-gap: 44px;
    }

    .clients h2 {
        max-width: 1100px;
        margin: 5% auto;
        padding-top: var(--padding-top-bottom) var(--padding-left-right) 0;
    }

    .llamada {
        display: grid;
        grid-template-columns: auto;
        grid-auto-rows: auto;
    }

    #history-title {
        grid-column: 1;
        grid-row: 2;
    }

    #first-art {
        grid-column: 1;
        grid-row: 3;
    }

    #second-art {
        grid-column: 2;
        grid-row: 1 / 4;
    }

    .grid-molido {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 11px;
    }

    .footer-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 5px;
    }

    .foot-info {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 5px;
    }

    #office1 {
        grid-column: 1;
        grid-row: 3;
    }

    #office2 {
        grid-column: 2;
        grid-row: 3;
    }

    .logo-footer {
        text-align: center;
        grid-column: 1 / 3;
        grid-row: 4;
    }

    .desktop-family {
        display: none;
    }

    #family h2 {
        font-size: 30px;
    }

    .grid-4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        grid-gap: 12px;
    }

    .grid-product-view {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(300px, auto) auto auto auto;
    }

    .grid-product-view .product-description {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .grid-product-view form {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    .grid-2-left-aligned {
        display: grid;
        grid-auto-flow: column;
        grid-row: 1 / 2;
    }

    .grid-product-view .product-buy {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }

    .grid-product-view > p {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }

    .grid-cart-item{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        grid-gap: 11px;
    }
    .grid-cart-item div, .grid-cart-item button{
        grid-column: 1 / 3;
    }
    .grid-cart-item p{
        grid-column: 1;
    }
    .grid-cart-item span{
        grid-column: 2;
    }
    .grid-auto-flow{
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(3, minmax(60px, 1fr));
    }
    .product-buy.grid-2-space-between{
        display: grid;
    grid-template-columns: auto;
    justify-content: space-between;
    }
    .add-cart-register-to-buy{
        
        display: grid;
        grid-template-columns: auto;
        grid-gap: 5px;
    }
}

@media screen and (min-width: 768px) {
    .logo-footer {
        text-align: center;
    }
    .crazy-icon-padding{
        padding: 0 0 0 11%;
    }
    .columna-dos-gratis{
        grid-column: 2;
    }

    .premium_position{
        min-height: 100px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    .grid-auto-flow{
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
}
.container-threequel{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20vmax;
}

    .gridbigproduct {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: auto;
        grid-gap: 22px;
    }

    .grid-six {
        padding: 0 11%;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }

    .product-title {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .grid-scroll-x {
        grid-column: 1 / 5;
        grid-row: 2;
    }

    .h2-link {
        grid-column: 3 / 5;
        grid-row: 1;
    }

    .addbutton1 {
        grid-column: 2;
        grid-row: 3;
    }

    .addbutton2 {
        grid-column: 3;
        grid-row: 3;
    }

    .grid-scroll-x {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: auto;
        grid-gap: 22px;
        align-items: start;
    }

    .clients .grid-scroll-x {
        grid-template-columns: repeat(2, 1fr);
    }

    .clients .grid-scroll-x img {
        max-width: 80%;
    }

    .extra-articles {
        grid-template-columns: repeat(2, 1fr);
    }

    .gridthree1 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        grid-gap: 22px;
    }

    .clients {
        max-width: 1100px;
        margin: 0 auto;
        padding: var(--container-padding);
    }

    .gridthree2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        grid-gap: 22px;
        align-items: start;
    }

    .gridthree2 article:last-child {
        grid-column: 3;
        grid-row: 1;
    }

    .llamada {
        display: grid;
        grid-template-columns: 50% auto;
        grid-auto-rows: auto;
        grid-gap: 22px;
    }

    /**/
    .grid-history {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        grid-gap: 44px;
    }

    #history-title {
        grid-column: 1;
        grid-row: 2;
    }

    #first-art {
        grid-column: 1;
        grid-row: 3;
    }

    #second-art {
        grid-column: 3;
        grid-row: 1 / 4;
    }
    #proceso .grid-2-text-photo{
        grid-gap: 33px;
    }
    .grid-2-text-photo {
        padding: var(--padding-top-bottom) 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr !important;
    }

    .grid-2-text-photo.no-padding {
        padding: 0;
    }

    .grid-2-text-photo-2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 22px;
    }

    .grid-2-text-photo-2.no-padding {
        padding: 0;
    }

    .grid-2-left-text {
        display: grid;
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        grid-template-columns: repeat(2, 1fr);
        order: 1;
    }

    #proceso .grid-2-left-text{
        grid-gap: 22px;
    }

    .grid-2-right-text {
        display: grid;
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-2-left-text > .wrapper-text {
        padding: 0 15% 0 10%;
        grid-column: 1 / 2;
    }

    .grid-2-right-text > .wrapper-text {
        padding: 0 10% 0 15%;
        grid-column: 2 / 3;
    }

    .grid-2-left-image {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .grid-2-right-image {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .pro-art1 {
        grid-column: 1;
        grid-row: 1;
    }

    .pro-img1 {
        grid-column: 2;
        grid-row: 1;
    }

    .pro-art2 {
        grid-column: 2;
        grid-row: 2;
    }

    .pro-img2 {
        grid-column: 1;
        grid-row: 2;
    }

    .grid-molido {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: auto;
        grid-row-gap: 47px;
        grid-column-gap: 20px;
    }

    .mol6 {
        grid-column: 2 / 6;
        grid-row: 2;
    }

    .grid-ayuda {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-column-gap: 5%;
        grid-template-areas: "faq faq grid-contactanos";
    }

    .grid-contactanos {
        height: 44%;
        grid-area: grid-contactanos;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-row-gap: 5%;
        grid-template-areas: "chat" "call" "mail";
    }

    .faq {
        grid-area: faq;
    }

    .chat {
        grid-area: chat;
    }

    .chat h2 {
        padding: 1% 0 1% 22%;
        background: url(../images/ayuda/sprites_ayuda_iconos.svg) 0 0 / 15% no-repeat;
    }

    .call {
        grid-area: call;
    }

    .call h2 {
        padding: 1% 0 1% 22%;
        background: url(../images/ayuda/sprites_ayuda_iconos.svg) 0 49% / 15% no-repeat;
    }

    .help-mail {
        grid-area: mail;
    }

    .help-mail h2 {
        padding: 1% 0 1% 22%;
        background: url(../images/ayuda/sprites_ayuda_iconos.svg) 0 99% / 15% no-repeat;
    }

    .footer-nav {
        display: grid;
        grid-auto-flow: column;
        justify-content: center;
        grid-gap: 8px;
    }

    .foot-info {
        padding-top: 3%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        grid-gap: 11px;
    }

    .grid-conditions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }

    .mobile-family {
        display: none;
    }

    .grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: auto;
        grid-gap: 11px;
    }
    .grid-cart-item{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 11px;
    }
    .grid-cart-item .i-be-four-too{
        grid-column: 4;
        grid-row: 2;
    }
    .crazy-margin{
        margin-left: 25%;
    }
    .grid-products-price{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 5%;
}
}

@media screen and (min-width: 918px) {
.chat h2 {
    padding: 1% 0 1% 11%;
    background: url(../images/ayuda/sprites_ayuda_iconos.svg) 0 0 / 9% no-repeat !important;
}

.call {
    grid-area: call;
}

.call h2 {
    padding: 1% 0 1% 11%;
    background: url(../images/ayuda/sprites_ayuda_iconos.svg) 0 49% / 9% no-repeat !important;
}

.help-mail {
    grid-area: mail;
}

.help-mail h2 {
    padding: 1% 0 1% 11%;
    background: url(../images/ayuda/sprites_ayuda_iconos.svg) 0 99% / 9% no-repeat !important;
}
#proceso .grid-2-text-photo-2{
    grid-gap: 33px;
}
.grid-2-text-photo-2 {
    padding: var(--padding-top-bottom) 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

.grid-2-text-photo-2.no-padding {
    padding: 0;
}
}

@media screen and (max-width: 1023px) {
    .nav-wrapper.desktop {
        display: none;
    }
    .grid-nav-1{
        display: grid;
    grid-template-columns: auto;
    }
}

@media screen and (min-width: 1024px) {
    .crazy-icon-padding{
        padding: 1% 0 1% 11%;
    }
    .nav-wrapper.mobile {
        display: none;
    }

    .grid-scroll-x {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: auto;
        grid-gap: 44px;
        align-items: start;
    }

    .gridthree1, .gridthree2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        grid-gap: 44px;
        align-items: start;
    }

    .one {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .two {
        grid-column: 3 / 5;
        grid-row: 1;
    }

    .three {
        grid-column: 3;
        grid-row: 2;
    }

    .four {
        grid-column: 4;
        grid-row: 2;
    }

    .mobile-family {
        display: none;
    }
  
}
.faq article p {
    margin-top: 10px;
}