:root {
  interpolate-size: allow-keywords;
}

#sec01 {

    h4{
        margin-top:0;
    }

    .bullet-list{
        column-count: 2;
        column-gap: 60px;

        li{
            break-inside: avoid;
        }

        @media screen and (max-width: 768px) {
            column-count: 1;
        }
    }

}

#gestion-envases > div > article > div:nth-child(4) > p:nth-child(6) a,
#gestion-envases > div > article > div:nth-child(6) > p:nth-child(4) a,
#gestion-envases > div > article > div:nth-child(8) > p:nth-child(4) a,
#sec03 > div > article > div:nth-child(7) > p:nth-child(4) a {
    background: no-repeat center left 25px #88BA08;
    background-size: 27px auto;
    border-radius: 40px;
    box-shadow: 9px 12px 39px -13px rgba(0, 0, 0, 0.75);
    border: none;
    color: #FFF;
    cursor: pointer;
    display: block;
    font: normal 18px / 24px Avenir-Heavy;
    margin: 0 auto;
    padding: 15px 24px 15px 24px;
    text-decoration: none;
    text-transform: uppercase;
    width:fit-content;
}

#solicitud-punto-sigre-form{
    margin-bottom:0;
    position: relative;

    #solicitud-punto-sigre{
        position: absolute;
        top:-100px;
    }

}

#gestion-envases{
    background-color:#F8F8F8;

    .btn-join-sigre{
        background: no-repeat url(../../img/arrow_btn.png) right 20px center #88BA08;
        background-size:29px;
        border-radius: 100px;
        color:#FFF;
        font-size:14px;
        padding:9px 59px 9px 20px;
        text-decoration: none;
        text-transform: uppercase;
    }

    /*
    MARK: Título
    */
    .content-wrap:nth-child(1){


    }

    /*
    MARK: Acordeon
    */
    .content-wrap:nth-child(2){
        padding-bottom:0;
        padding-top:0;

        .content-main{
            border-bottom:1px solid #D9D9D9;
            display: flex;
            justify-content: end;
            margin-left: auto;
            width: 1280px;

            & > div:first-of-type{

                width: 100%;

                .text-wrap{
                    box-sizing: border-box;
                    margin-bottom: 50px;
                    margin-left:auto;
                    max-width: 300px;
                    padding-right:33px;
                    padding-top:45px;
                    width: 100%;
                }

                h2{
                    font-size:40px;
                    line-height:40px;
                }

                .image-wrap{
                    align-items: center;
                    border-top:1px solid #D9D9D9;
                    display: flex;
                    justify-content: center;
                    margin-top:120px;
                    padding-bottom: 30px;
                    padding-top: 32px;

                    position: sticky;
                    top: 432px;
                    left: 0;

                    div{
                        align-items: center;
                        aspect-ratio: 1 / 1;
                        border-color:#494a66;
                        border-radius: 100%;
                        border: dotted;
                        border-width: 2px;
                        display: none;
                        justify-content: center;

                        img{
                            display:none;
                        }
                    }

                    &[data-type="1"] > div,
                    &[data-type="2"] > div,
                    &[data-type="3"] > div{
                        display: flex;
                    }

                    &[data-type="1"] img:nth-child(1),
                    &[data-type="2"] img:nth-child(2),
                    &[data-type="3"] img:nth-child(3){
                        display: flex;
                    }
                }

                .video-wrap{
                    align-items: center;
                    border-top:1px solid #D9D9D9;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    margin-top:120px;
                    padding-right: 32px;

                    video{
                        display: block;
                        margin-left: auto;
                        max-width: 500px;
                        mix-blend-mode: darken;
                        width: 100%;
                    }
                }
            }

            & > div:last-of-type{
                border-left:1px solid #D9D9D9;
                border-right:1px solid #D9D9D9;
                flex-shrink: 0;
                max-width: 900px;
                padding-top:22px;
                width: 100%;

                details {
                    overflow: hidden;
                    width: 100%;

                    &::details-content{
                        block-size:0;
                        transition: block-size 0.5s, content-visibility 0.5s;
                        transition-behavior: allow-discrete;
                    }

                    &[open]::details-content{
                        block-size: auto;
                    }

                    &#envases-domesticos summary{
                        background-color:#76F28B;
                        background-image:url(../../img/envases-domesticos.svg);
                        border-color:#76F28B;
                    }

                    &#envases-comerciales summary{
                        background-color:#A9FCDB;
                        background-image:url(../../img/envases-comerciales.svg);
                        border-color:#A9FCDB;
                    }

                    &#envases-industriales summary{
                        background-color:#CCFCA9;
                        background-image:url(../../img/envases-industriales.svg);
                        border-color:#E6E6E6;
                    }

                    &#envases-industriales .content{
                       /* max-height: calc(100vh - 89px - 22px - (86px * 2))!important; */
                    }

                    &[open] summary{
                        background-color:transparent!important;
                        background-size:72px!important;
                        border-color:#D9D9D9!important;
                        padding-left:111px!important;
                    }

                    &[open]:nth-child(3) summary{
                        background-size: 48px!important;
                    }
                }

                summary::-webkit-details-marker {
                    display:none;
                }

                summary::marker{
                    display: none;
                }

                summary {
                    background:no-repeat left 19px center ;
                    background-size:24px;
                    border-bottom: 1px solid #D9D9D9;
                    border-top: 1px solid #D9D9D9;
                    box-sizing: border-box;
                    cursor: pointer;
                    font:bold 17px/19px Avenir-Light;
                    list-style: none;
                    padding:35px 63px 35px 63px;
                    text-transform: uppercase;
                    transition: 300ms;
                }

                /* Contenedor del contenido colapsable */
                .content {
                    box-sizing: border-box;
                    max-height: 800px;
                    /* max-height: calc(100vh - 89px - 184px - (86px * 3)); */
                    overflow: auto;
                    padding:50px;

                    h3{
                        font:50px/50px Avenir-Light;
                        text-transform: uppercase;

                        b{
                            display:block;
                            font-family: Avenir-Heavy;
                        }
                    }
                }
            }
        }
    }


    .image{
        text-align: center;

        img{
            max-width: 100%;
            height: auto;
        }
    }

    /*
    MARK: Formulario
    */
    .content-wrap:last-child{

        margin-top:32px;

        .content-main{
            display: block;
            margin-left: auto;
            width: 900px;

            .form-wrap{
                border:none;
                max-width: unset;

                form{
                    padding-left:0;
                    position: relative;

                    .anchor{
                        position: absolute;
                        top:-250px;
                    }
                }
            }
        }
    }

}

#gestion-envases > div > article > div.tabs > div[data-tab="1"] > div > p:nth-child(6) a,
#gestion-envases > div > article > div.tabs > div[data-tab="2"] > div > p:nth-child(4) a,
#gestion-envases > div > article > div.tabs > div[data-tab="3"] > div > p:nth-child(4) > a,
#sec03 > div > article > div:nth-child(7) > p:nth-child(4) > a{
    background-color:#88BA08;
    background-size: 27px auto;
    border-radius: 40px;
    box-shadow: 9px 12px 39px -13px rgba(0, 0, 0, 0.75);
    border: none;
    color: #FFF!important;
    cursor: pointer;
    display: block;
    font: normal 18px / 25px Avenir-Heavy;
    margin: 0 auto;
    padding: 15px 24px 15px 24px;
    text-decoration: none;
    text-transform: uppercase;
    width: fit-content;
}

#sec03 > div > article > div:nth-child(7) > p:nth-child(3){
    color:#88BA08;
    font-size:24px;
    font-style: italic;
    font-weight: bold;
    margin: 48px 0;
    text-align: center;
}

#hire-form{
    background-color:transparent;
    margin:0;
    padding:0
}

#companias-adheridas-wrap{
    background-color: #F8F8F8;
    margin-bottom: 25px;

    .content-main{
        margin-left: auto;

        form{
            border-bottom: 1px solid #DFDFDF;
            margin-top: 36px;
            padding-bottom: 24px;

            header{
                display: flex;
                justify-content: space-between;
            }

            .btn-search-all{
                background: transparent;
                border: none;
                border-bottom: 1px solid #062146;
                color: #062146;
                cursor: pointer;
                font: normal 18px / 19px Avenir-Medium;
                /* margin: 10px 42px 0 0; */
            }
        }

        #laboratories{

            & > div{
                position: relative;

                .nav{
                    background: no-repeat center center transparent;
                    background-size: 100%;
                    border: none;
                    border-radius: 100%;
                    cursor: pointer;
                    display: none;
                    height: 40px;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 40px;

                    &.no-show{
                        display: none !important;
                    }

                    &.next{
                        background-image: url(../../img/icons/arrow-right01@2x.png);
                        right: 0;
                    }

                    &.prev{
                        background-image: url(../../img/icons/arrow-left01@2x.png);
                        left: 0;
                    }
                }

                &.show-nav .nav{
                    display: block;
                }

                ul{
                    columns: 2;
                    list-style: none;
                    margin-top: 51px;
                    padding: 0 85px;

                    li{
                        margin-bottom: 27px;
                        text-transform: uppercase;

                        a{
                            color: #535472;
                            font: normal 16px / 22px Avenir-Light;
                            text-decoration: none;
                        }
                    }
                }
            }

        }
    }
}

#zona-reservada-wrap{

    .content-main{
        display: flex;
        gap:50px;
        margin-left: auto;

        & > div{
            width: 50%;
        }

        form{
            background-color: #F8F8F8;
            border: 1px solid #EFEFEF;
            border-radius: 7px;
            padding: 27px 22px;

            &.hide{
                display: none;
            }

            ul{
                display: flex;
                flex-direction: column;
                gap: 13px;
                list-style: none;
                margin: 0 0 29px 0;
                padding: 0;

                input:not([type="checkbox"]) {
                    background-color: #FFF;
                    border: 1px solid rgba(73, 74, 102, 0.19);
                    border-radius: 7px;
                    box-sizing: border-box;
                    color: #535472;
                    font: 16px / 22px Avenir-Medium;
                    padding: 17px 28px;
                    width: 100%;
                }

                label{
                    color: #535472;
                    display: inline-block;
                    font: 16px / 22px Avenir-Medium;

                    input{
                        margin:0;
                    }
                }

                .btn-toggle-form{
                    background: none;
                    border: none;
                    color: #6A6A89;
                    cursor: pointer;
                    float: right;
                    font: 15px / 20px Avenir-Medium;
                    padding: 0;
                    text-decoration: underline;
                }
            }

            button[type="submit"]{
                margin-bottom: 25px;

                span{
                    display: none;
                }

                &[data-status="0"] span,
                &[data-status="1"][type="submit"] span:nth-child(1),
                &[data-status="2"][type="submit"] span:nth-child(2),
                &[data-status="3"][type="submit"] span:nth-child(3),
                &[data-status="4"][type="submit"] span:nth-child(4),
                &[data-status="5"][type="submit"] span:nth-child(4){
                    display: block;
                }
            }
        }
    }

}