/* video-crop centrado */
#video-crop {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Cuando está fijado por JS */
#video-crop.is-fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

#video-crop.is-hidden {
    opacity: 0 !important;
    pointer-events: none;
}

#video-crop video {
    transform: scale(var(--video-crop-scale, 0.9));
}

/* Botella como contenedor relativo */
#botella {
    position: relative !important;
}

/* La imagen de la botella va encima del vídeo */
#botella picture,
#botella img {
    position: relative;
    z-index: 2;
}

/* El vídeo inyectado se posiciona detrás de la botella */
#video-botella {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;

    /*
     * === VARIABLES DE LA SILUETA (solo recorta el vídeo) ===
     *
     * HOMBRO — donde empieza a ensancharse
     * --hombro-top-x-izq / --hombro-top-x-der : ancho superior del hombro (X)
     * --hombro-top-y       : altura donde empieza el hombro (Y)
     * --hombro-ext-x-izq / --hombro-ext-x-der : ancho externo del hombro (X)
     * --hombro-ext-y       : altura externa del hombro (Y)
     *
     * CUERPO — parte ancha
     * --cuerpo-izq / --cuerpo-der : ancho del cuerpo (X)
     * --cuerpo-top                : donde empieza el cuerpo recto (Y)
     *
     * BASE
     * --base-top            : donde empieza la curva de la base (Y)
     * --base-izq / --base-der : esquinas inferiores (X)
     */

    --cuello-izq: 55%;
    --cuello-der: 47%;
    --cuello-y: 23%;

    --hombro-x-izq: 45%;
    --hombro-x-der: 57%;
    --hombro-y: 24%;

    --cuerpo-izq: 33%;
    --cuerpo-der: 68%;
    --cuerpo-top: 33%;

    --base-top: 95%;
    --base-izq: 44%;
    --base-der: 50%;

    clip-path: polygon(
        /* Cuello (punto de partida cerrado) */
        var(--cuello-izq) var(--cuello-y),
        var(--cuello-der) var(--cuello-y),
        /* Hombro derecho */
        var(--hombro-x-der) var(--hombro-y),
        /* Cuerpo derecho */
        var(--cuerpo-der) var(--cuerpo-top),
        var(--cuerpo-der) var(--base-top),
        /* Base */
        var(--base-der) 100%,
        var(--base-izq) 100%,
        /* Cuerpo izquierdo */
        var(--cuerpo-izq) var(--base-top),
        var(--cuerpo-izq) var(--cuerpo-top),
        /* Hombro izquierdo */
        var(--hombro-x-izq) var(--hombro-y)
    );
}