:root {
    --sheet-bg: #ffffff;
    --sheet-radius: 20px;
    --sheet-shadow: 0 -8px 30px rgba(0,0,0,0.18);
    --handle-color: #d8d8dc;
    --text-main: #1a1a1e;
    --text-sub: #7a7a82;
    --accent: #0b6efd;
    /* posiciones en % de la altura del viewport (visibilidad de la card) */
    --pos-min: 15;
    --pos-mid: 23;
    --pos-full: 60;
}

.splide {
    max-width: 900px;
    margin: auto;
}

.gallery-page .media {
    width: 50%;
}

.media img,
.media iframe {
    width: 100%;
    aspect-ratio: 10 / 5;
    object-fit: cover;
}

.media iframe {
    border: 0;
}

.gallery-page .media {
    width: 50%;
    padding: 5px;
    float: left;
    aspect-ratio: 1 / 1;
}

.gallery-page.single .media {
    margin: 0 25%;
}

    .gallery-page.single .media.video {
        width: 100%;
        margin: 0;
        aspect-ratio: auto;
    }

#cont_prod {
    background: var(--sheet-bg);
    border-radius: var(--sheet-radius);
    box-shadow: var(--sheet-shadow);
    padding-top: 10px;
    /*transform: none !important;*/
}

@media (max-width: 800px) {

    #cont_prod {
        padding-top: 0px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        transform: translateY(calc(100% - var(--pos-mid) * 1vh));
        will-change: transform;
        touch-action: none;
        display: flex;
        flex-direction: column;
        width: 96%;
        pointer-events: auto;
        margin: 0 2%;
    }

    #sheet.animate {
        transition: transform 320ms cubic-bezier(.22,.9,.36,1);
    }

    #handle-area {
        padding: 10px 0 6px;
        display: flex;
        justify-content: center;
        cursor: grab;
        flex-shrink: 0;
    }

        #handle-area:active {
            cursor: grabbing;
        }

    .handle-bar {
        width: 40px;
        height: 5px;
        background: var(--handle-color);
        border-radius: 3px;
    }
}