:root {
    --color__primary: 38 125 44;
    --color__primary_fg: 255 255 255;
    --color__complementary: 255 255 255;
    --color__accent: 255 198 53;
    --color__background: 255 255 255;
    --color__foreground: 33 43 31;
    --border-radius: 6px;
}

html {
    scroll-behavior: smooth;
    background-color: rgb(var(--color__primary));
    display: block;
    height: 100%;
    width: 100%;
}

body {
    background-color: rgb(var(--color__background));
    color: rgb(var(--color__foreground));
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
}

header:before {
    content: '';
    z-index: -1;
    display: block;
    position: absolute;
    inset: 0;
    bottom: -2rem;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(var(--color__primary) / 1), transparent);
}

header {
    background-image: linear-gradient(to bottom, rgba(var(--color__primary) / 1), transparent);
    text-align: left;
    display: block;
    padding: .5rem 1rem;
    height: 3rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    white-space: nowrap;
    input {
        display: none;
    }
    > a {
        display: inline-block;
        img {
            height: 3rem;
            width: auto;
        }
    }
    > label:before {
        content: '';
        display: block;
        inset: 0;
        position: absolute;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>');
        background-size: 2rem auto;
        background-position: 50%;
    }
    > label {
        height: 3rem;
        aspect-ratio: 1;
        display: inline-block;
        float: right;
        > div:before {
            content: '';
            display: block;
            position: absolute;
            inset: 0;
            background-image: url(../../agro-nha-chica-icon-white.svg);
            background-position: 50% 89%;
            background-repeat: no-repeat;
            background-size: auto 60%;
            opacity: .05;
        }
        > div {
            display: none;
            position: fixed;
            inset: 0;
            top: 4rem;
            padding: 1rem;
            height: 100vh;
            background-color: rgba(var(--color__primary) / 1);
            z-index: 10;
            box-shadow: inset 0 0 0 100vmax rgba(0 0 0 / .1);
            a {
                color: rgb(var(--color__background));
                display: block;
                text-align: center;
                padding: 1rem;
                margin-bottom: 1rem;
                font-size: 1.6rem;
                font-weight: 500;
                background: rgba(255 255 255 / .05);
                box-shadow: 1px 1px 2px rgba(0 0 0 / .05);
                border-radius: 4px;
            }
        }
    }
    > label:has(:checked):before {
        filter: invert(100%);
        opacity: .7;
    }
    > label:has(:checked) {
        background-color: rgba(var(--color__accent) / 1);
        border-radius: 4px;
        > div {
            display: block;
            a {
            }
        }
    }
}

@keyframes fadeCycle {
    0% { opacity: 0; }
    5% { opacity: 1; } 
    25% { opacity: 1; }
    35% { opacity: 0; }
    100% { opacity: 0; }
}

header:has(:checked) {
    background-color: rgba(var(--color__primary) / 1);
}

.button {
    background-color: rgb(var(--color__primary));
    width: auto;
    display: inline-block;
    text-align: center;
    padding: 12px 20px;
    border-radius: var(--border-radius);
    color: rgb(var(--color__primary_fg));
    font-weight: 700;
    box-shadow: inset 1px 1px 1px rgba(255 255 255 / .3), inset -1px -1px 1px rgba(0 0 0 / .15), 2px 2px 3px rgba(0 0 0 / .2);
    text-shadow: 1px 1px 0px rgba(255 255 255 / .3);
}

.button.hl {
    background-color: rgb(var(--color__accent));
    color: rgb(var(--color__foreground));
}

section.primary-bg {
    background-color: rgb(var(--color__primary));
    padding: 50px 0;
}

section {
    display: block;
    .wrapper {
        display: inline-block;
        width: calc(100% - 4rem);
        height: calc(100% - 4rem);
        text-align: left;
        padding: 2rem;
        text-align: center;
    }
    .benefits {
        display: block;
        text-align: center;
        margin-top: .5rem;
        li {
            display: inline-block;
            width: 100%;
            max-width: calc(50% - 1rem);
            margin-top: 0;
            padding-bottom: 1rem;
            font-size: .7rem;
            font-weight: 600;
            .benefit-image {
                border-radius: var(--border-radius);
                display: inline-block;
                width: calc(100% - 2rem);
                aspect-ratio: 1;
                overflow: hidden;
                margin-bottom: .5rem;
            }
        }
    }
    .expand.half-height {
        margin-bottom: -20%;
        height: auto;
        aspect-ratio: initial;
    }
    .expand,
    .slide {
        display: inline-block;
        width: calc(100% + 4rem);
        margin-left: -2rem;
        margin-top: -2rem;
        margin-bottom: -2rem;
        aspect-ratio: 1;
        position: sticky;
        top: 0;
        img {   
            opacity: 0;
            animation: fadeCycle 16s linear infinite;
        }

        img:nth-child(4) { animation-delay: 0s; }
        img:nth-child(3) { animation-delay: 4s; }
        img:nth-child(2) { animation-delay: 8s; }
        img:nth-child(1) { animation-delay: 12s; }
    }
    .text {
        border-radius: var(--border-radius);
        background: rgb(var(--color__background));
        padding: 1rem;
        margin: -1rem;
        max-width: 1000px;
        display: inline-block;
        text-align: left;
        strong {
            font-weight: 600;
            padding: .25rem 0;
            display: inline-block;
        }
    }
    img {
        object-fit: cover;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    h1 ,
    h2 ,
    h3 {
        font-weight: 600;
        font-size: 1.4rem;
        padding-bottom: .5rem;
        line-height: 1.5rem;
    }
    h3 {
        font-size: 1.2rem;
    }
    p {
        font-size: .9rem;
        line-height: 1rem;
    }
}

section:has(.slide) {
    .text {
        
    }
}

section.hero {
    height: 100svh;
    text-align: center;
    background-color: rgb(var(--color__primary));
    .wrapper {
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .info {
        text-align: left;
        display: inline-block;
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        color: rgb(var(--color__background));
        padding: 2rem;
        padding-top: 6rem;
        width: calc(100% - 4rem);
        background-image: linear-gradient(to bottom, transparent, rgba(31 31 28 / .9), rgba(31 31 28 / .95));
    }
}

section:has(.text):not(#cafe) {
    background: rgb(var(--color__background));
}

footer {
    text-align: center;
    position: relative;
    margin: 1rem;
    width: calc(100% - 2rem);
    display: block;
    color: rgb(var(--color__background));
    font-size: .75rem;
    border-bottom: 1rem solid transparent;
    > div {
        background: rgba(0 0 0 / .1);
        border-radius: var(--border-radius);
        padding: 2rem 0;
        div {
            font-size: 1rem;
            margin-bottom: 1rem;
            a {
                text-decoration: underline;
            }
        }
    }
}

@media (min-width: 1000px), (min-aspect-ratio: 1/1) {
    header {
        background: rgba(var(--color__primary) / 1);
        outline: 1px solid rgba(255 255 255 / .1);
        label {
            aspect-ratio: initial;
            > div {
                display: inline;
                height: initial;
                background: none;
                box-shadow: none;
                top: initial;
                inset: initial;
                position: relative;
                padding: initial;
                line-height: 1.8rem;
                a {
                    margin: initial;
                    font-size: 1rem;
                    padding: 10px 18px;
                    display: inline-block;
                    margin-left: 5px;
                    background: none;
                    box-shadow: none;
                    font-weight: 600;
                }
                a:hover {
                    background: rgb(var(--color__accent));
                    color: rgb(var(--color__foreground));
                }
            }
            > div:before {
                display: none;
            }
        }
        label:before {
            display: none;
            line-height: 3rem;
        }
    }
    section.hero {
        .info {
            background-image: linear-gradient(-125deg, transparent, rgba(31 31 28 / .9), rgba(31 31 28 / .95));
            position: absolute;
            top: 80%;
            height: auto;
            bottom: initial;
            padding: 4rem;
            padding-right: 13rem;
            max-width: 600px;
            left: 0;
            transform: translateY(-50%);
        }
    }
    section {
        .text {
            padding: 2rem;
        }
        .slide {
            aspect-ratio: 16 / 9;
            margin-bottom: -10rem;
            img {
                top: 0;
            }
        }
        .benefits {
            li {
                max-width: 200px;
                font-size:1rem;
            }
        }
    }
}
   .video-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 24px;
            margin: 24px;
            
        }
        video {
            width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            object-fit: cover;
            display: inline-block;
            width: calc(100% / 2rem);
            height: auto;
            aspect-ratio: 474 / 875;
            border-radius: .5rem; 
            filter: saturate(120%);
        }