/* ******************************************** */
/** HERO HOME
/* ******************************************** */

.c-hero {
    position: relative;
    background-color: var(--color-bgblue);
}

.c-hero--bg-light {
    background-color: var(--color-lightest);
}

.c-hero--bg-light .c-hero__title {
    color: #201f1d;
}

.c-hero__info {
    position: relative;
    z-index: 2;
    color: var(--color-lightest);
}

.c-hero__info--contact {
    color: #201f1d;
}

.c-hero__kicker {
    display: block;
    font-size: clamp(1.7rem, 1.5vw, 2.1rem);
    color: #ff7200;
    font-weight: 500;
    margin-bottom: 0.4em;
}

.c-hero__icon {
    color: #e6ddcf;
    font-size: 0.7em;
    transform: translate(0.3rem, -0.4em);
    display: inline-block;
}

.c-hero__pic-deco {
    --deco-width: 100%;
    --deco-space-x: 1;
    --deco-left-size: calc(100% - var(--deco-width) + var(--space-x)* var(--deco-space-x));

    max-width: var(--deco-width);
    left: var(--deco-left-size);

    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: url(/images/imagenes-almacen/pic-category-hero@2.png) no-repeat;
    background-position: bottom;
    background-size: contain;
}

.c-hero__pic-deco-02 {
    --deco-space-x: 2;
    background: url(/images/imagenes-almacen/icon-deco-hero-contact.svg) no-repeat;
    background-position: center;
}

.c-hero__pic-deco-03 {
    --deco-space-x: 2;

    background: url(/images/imagenes-almacen/icon-deco-hero-about.svg) no-repeat;
    background-position: center;
}

.c-hero__pic-deco-02,
.c-hero__pic-deco-03 {
    --deco-width: 28em;
    --deco-left-size: calc(100% - var(--deco-width) - var(--space-x)* var(--deco-space-x));

    display: none;
}

.c-hero__holder {
    display: inline-block;
    max-width: 30em;
}

.c-hero__title {
    display: inline;
    font-size: clamp(3.5rem, 3.4vw, 8.5rem);
    line-height: 1.1;
    border-bottom: 3px solid currentColor;
}

.c-hero__products {
    display: inline-block;
    font-size: 3rem;
    vertical-align: middle;
    margin-left: 4rem;
}

.c-hero__text {
    margin-top: 1.2em;
    font-size: 1.6rem;
    line-height: 1.4;
}

.c-hero__text>*:not(:first-child) {
    margin-top: 1.2em;
}

.c-hero__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.c-hero__img::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--bg-gradient);
    opacity: .95;
    z-index: 1;
}


/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    .c-hero__info {
        max-width: 70vw;
        padding-top: calc(var(--section-y-xl)*1.3);
        padding-bottom: calc(var(--section-y-xl)*1.3);
    }

    .c-hero__title {
        vertical-align: middle;
    }

    .c-hero__text {
        max-width: 500px;
    }

}


/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {
    
    .c-hero__info {
        max-width: 60vw;
    }

    .c-hero__pic-deco {
        --deco-width: 100%;
        --deco-space-x: 0;
    }

    .c-hero__pic-deco-02,
    .c-hero__pic-deco-03 {
        --deco-width: 28em;
        --deco-space-x: 3;
        --deco-left-size: calc(100% - var(--deco-width) - var(--space-x)* var(--deco-space-x));
        
        display: block;
    }
}


/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {

    .c-hero__pic-deco {
        --deco-width: 115em;
    }

    .c-hero__info {
        max-width: 50vw;
    }

    .c-hero__info--contact {
        max-width: 38vw;
    }

    .c-hero__info--contact .c-hero__title {
        font-size: clamp(3.5rem, 4.8vw, 8.5rem);
    }

    .c-hero__pic-deco-02 {
        --deco-width: 42em;
        --deco-space-x: 3;
    }

    .c-hero__pic-deco-03 {
        --deco-width: 32em;
    }
}


/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {

    .c-hero__info--contact {
        max-width: 34vw;
    }

    .c-hero__info--contact .c-hero__title {
        font-size: clamp(4.8rem, 6.4vw, 8.5rem);
    }

    .c-hero__text {
        margin-top: 1.8em;
    }

    .c-hero__pic-deco-02,
    .c-hero__pic-deco-03 {
        --deco-width: 44em;
        --deco-space-x: 4;
    }
}

/* ********************** de HD a FULL HD ********************** */

@media (min-width: 1600px) {
    
    .c-hero__pic-deco {
        --deco-space-x: -2;
    }

    .c-hero__pic-deco-02,
    .c-hero__pic-deco-03 {
        --deco-width: 44em;
        --deco-space-x: 4;
    }
}