/* ==========================================================================
   Landing Compra envases a granel
   ========================================================================== */
.section-banner-generico .banner-content {
    text-align: center;
}
.compra-granel-main {
    background-color: #f5f5f5;
}

.compra-granel {
    position: relative;
    z-index: 4;
    margin-top: -60px;
}

.compra-granel-card {
    background-color: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(3, 62, 132, 0.12);
    overflow: hidden;
}

/* Tabs */
.compra-granel-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid #D9D9D9;
}

.compra-granel-tab {
    display: flex;
    gap: 14px;
    width: 100%;
    padding: 10px;
    border: 0;
    background-color: #E9F5FF;
    color: #033E845C;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-family-title);
}

.compra-granel-tab.is-active {
    background-color: var(--color-white);
    color: var(--color-blue);
    cursor: default;
}

.compra-granel-tab__icon {
    display: none;
}

.compra-granel-tab.is-active .compra-granel-tab__icon {
    background-color: var(--color-blue);
}

.compra-granel-tab__icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.compra-granel-tab__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.compra-granel-tab__title {
    font-size: 16px;
    font-weight: 700;
}

.compra-granel-tab__subtitle {
    font-size: 11px;
    font-weight: 400;
}

.compra-granel-panels {
    padding: 28px 20px 32px;
}

.compra-granel-panel {
    display: none;
}

.compra-granel-panel.is-active {
    display: block;
}

/* Tab Online */
.compra-granel-online {
    display: grid;
    gap: 32px;
}

.compra-granel-shop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 15px;
    padding: 18px 20px;
    border-radius: 12px;
}

.compra-granel-shop__label {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-family-title);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    width: 100%;
}

.compra-granel-shop__logo {
    height: 64px;
    width: 209px;
    object-fit: contain;
}

.compra-granel-shop__btn {
    margin-left: auto;
    white-space: nowrap;
    border-radius: 30px;
}

.compra-granel-online__left-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-blue);
    margin: 20px 0;
}

.compra-granel-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.compra-granel-benefit {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 18px;
    border-radius: 12px;
}

.compra-granel-benefit img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.compra-granel-benefit p {
    color: var(--color-white);
    font-size: 15px;
    line-height: 1.4;
}

.compra-granel-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 10px;
}

.compra-granel-step img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    object-fit: contain;
}

.compra-granel-step__title, .compra-granel-step__bajada {
    color: var(--color-blue);
    font-size: 14px;
}
.compra-granel-step__title {
    margin: 0 0 8px;
    font-weight: 700;
}

.compra-granel-step .bajada-section {
    color: var(--color-blue);
}

/* Tab Presencial */
.compra-granel-presencial {
    display: grid;
    gap: 28px;
}

.compra-granel-presencial__info .section-title {
    margin-bottom: 28px;
    color: var(--color-blue);
}

.compra-granel-contact {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.compra-granel-contact__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.compra-granel-contact__item picture {
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--color-blue);
    overflow: hidden;
    padding: 5px;
    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.compra-granel-contact__item p {
    color: var(--color-blue);
    font-size: 15px;
    line-height: 1.45;
}

.compra-granel-contact__item a {
    color: var(--color-blue);
    text-decoration: underline;
}

.compra-granel-presencial__media {
    display: flex;
    flex-direction: column;
}

.compra-granel-presencial__media img {
    width: 100%;
    min-height: 180px;
    object-fit: cover;
    background-color: #e4ebf3;
}
.compra-granel-presencial__media img:first-child {
    border-radius: 12px 12px 0 0;
}
.compra-granel-presencial__media img:last-child {
    border-radius: 0 0 12px 12px;
}


@media (min-width: 576px) {
    .compra-granel-benefits {
        grid-template-columns: 1fr 1fr;
    }

    .compra-granel-steps {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }

    .compra-granel-tab__title {
        font-size: 20px;
    }

    .compra-granel-tab__subtitle {
        font-size: 14px;
    }
}

@media (min-width: 768px) {
    .compra-granel {
        margin-top: -70px;
    }

    .compra-granel-tab {
        padding: 20px;
        gap: 16px;
    }

    .compra-granel-panels {
        padding: 36px 32px 40px;
    }

    .compra-granel-shop {
        padding: 20px 24px;
    }

    .compra-granel-shop__logo {
        height: 75px;
        width: 255px;
    }

    .compra-granel-shop__label {
        font-size: 20px;
    }

    .compra-granel-contact__item p {
        font-size: 16px;
    }
}

@media (min-width: 992px) {
    .compra-granel-online {
        grid-template-columns: 1.15fr 0.85fr;
        gap: 40px;
        align-items: start;
    }

    .compra-granel-presencial {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: stretch;
    }

    .compra-granel-presencial__media {
        height: 100%;
    }

    .compra-granel-presencial__media img {
        flex: 1;
        min-height: 0;
    }

    .compra-granel-tab__icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 8px;
        background-color: #033E842B;
        padding: 8px;
        img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    .compra-granel-online__left-title {
        font-size: 22px;
    }
    .compra-granel-online__right, .compra-granel-steps{
        height: 100%;
    }
    .compra-granel-steps{
        gap: 30px 40px;
    }

    .compra-granel-step__title, .compra-granel-step__bajada {
        font-size: 16px;
    }
    .compra-granel-step img {
        width: 56px;
        height: 56px;
    }
}

@media (min-width: 1200px) {
    .compra-granel {
        margin-top: -80px;
    }

    .compra-granel-tab {
        padding: 15px 35px;
    }

    .compra-granel-tab__title {
        font-size: 22px;
    }

    .compra-granel-tab__subtitle {
        font-size: 15px;
    }

    .compra-granel-panels {
        padding: 40px 44px 48px;
    }
    .compra-granel-online__left-title {
        font-size: 25px;
    }
    .compra-granel-online__left .section-title2 {
        margin-top: 32px;
    }

    .compra-granel-benefit {
        padding: 24px 20px;
    }
    .compra-granel-contact__item{
        align-items: center;
    }
    .compra-granel-contact__item p {
        font-size: 18px;
    }
}