.header-img{
    background-image: url("../img/magia/cabecera_magia.webp");
    height: 100vh !important; 
    margin-top: 0 !important;
}

body{
    background:#f5f2eb;
    padding-top: 0;
}

.media-box{
    width:100%;
    aspect-ratio:4/3;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.25);
    background:#000;
    position: relative;
}

.media-box img,
.media-box video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.postcard{
    filter:grayscale(100%);
}

.wand{
    width:100%;
    max-width:100%;
    cursor:pointer;
}

.wand.animate{
    animation:magicWand .9s ease;
}

@keyframes magicWand{
    0%{ transform:rotate(0deg); }
    25%{ transform:rotate(-18deg); }
    50%{ transform:rotate(25deg); }
    75%{ transform:rotate(-12deg); }
    100%{ transform:rotate(0deg); }
}

.video-box,
.photo-box{
    opacity:0;
    visibility:hidden;
    transform:scale(.95);
    transition: opacity .5s ease, transform .5s ease, visibility .5s;
}

.video-box.show,
.photo-box.show{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}

/* Segunda varita y texto */
.second-wand,
.second-wand-text {
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

.second-wand.show,
.second-wand-text.show {
    opacity: 1;
    pointer-events: auto;
}

        .magic-row{
            margin-bottom:55px;
        }

        .magic-row:last-child{
            margin-bottom:0;
        }

        .magic-container {
            padding: 25px 18px;
            margin-bottom: 30px;
        }

        @media (min-width: 992px) {
            .media-box {
                max-width: 380px;
                margin: 0 auto;
            }
            .wand {
                width: 55px;
            }
            .magic-container {
                padding: 18px 12px;
            }
            .magic-row {
                margin-bottom: 45px;
            }
            .wand-btn p {
                font-size: 0.75rem !important;
                margin-top: 4px !important;
            }
        }

        @media (max-width: 991px) {
            .wand{
                width: 68px;
            }
            .magic-row .col-lg-3,
            .magic-row .col-lg-1 {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        @media (max-width: 768px) {
            .magic-container {
                padding: 28px 20px;
            }
            .magic-row {
                gap: 1.8rem !important;
                margin-bottom: 50px;
            }
        }

        .photo-box.show img,
        .video-box.show video {
            filter: none;
        }