/* Gimmicks decorativos de las seis etapas de Mi negocio.
   Permanecen fuera del flujo operativo y no interceptan acciones. */
html[data-panel-design="v7"] .business-page.business-page-gimmick {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1024px) minmax(280px, 1fr);
    grid-auto-flow: row;
    column-gap: clamp(24px, 3vw, 56px);
    align-items: start;
}

html[data-panel-design="v7"] .business-page.business-page-gimmick > :not(.business-gimmick) {
    min-width: 0;
    grid-column: 1;
}

html[data-panel-design="v7"] .business-gimmick {
    position: sticky;
    top: 112px;
    z-index: 0;
    width: min(100%, 500px);
    min-height: 360px;
    grid-column: 2;
    grid-row: 3 / span 8;
    align-self: start;
    justify-self: center;
    display: grid;
    place-items: center;
    pointer-events: none;
    user-select: none;
}

html[data-panel-design="v7"] .business-gimmick::before {
    position: absolute;
    inset: 10%;
    z-index: -1;
    border-radius: 50%;
    content: "";
    background: radial-gradient(circle at 48% 42%, rgba(255,255,255,.8), rgba(248,210,236,.4) 56%, rgba(235,190,226,0) 76%);
    filter: blur(4px);
}

html[data-panel-design="v7"] .business-gimmick::after {
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 8%;
    z-index: -1;
    height: 13%;
    border-radius: 50%;
    content: "";
    background: rgba(77, 24, 92, .22);
    filter: blur(22px);
    transform: scaleX(.86);
}

html[data-panel-design="v7"] .business-gimmick img {
    width: 100%;
    height: auto;
    max-height: 500px;
    display: block;
    object-fit: contain;
    filter:
        drop-shadow(0 12px 12px rgba(83, 27, 104, .12))
        drop-shadow(0 28px 28px rgba(83, 27, 104, .2));
}

@media (max-width: 1450px) {
    html[data-panel-design="v7"] .business-page.business-page-gimmick {
        max-width: 1180px;
        display: block;
    }

    html[data-panel-design="v7"] .business-gimmick {
        position: relative;
        top: auto;
        z-index: 0;
        width: 100%;
        min-height: clamp(176px, 20vw, 240px);
        margin: 18px 0 26px;
        display: grid;
        overflow: hidden;
        border: 1px solid rgba(190, 122, 211, .16);
        border-radius: 28px;
        background: linear-gradient(120deg, rgba(255,255,255,.62), rgba(250,231,247,.34));
    }

    html[data-panel-design="v7"] .business-gimmick::before {
        inset: -35% 20%;
    }

    html[data-panel-design="v7"] .business-gimmick::after {
        left: 34%;
        right: 34%;
        bottom: 7%;
        height: 14%;
    }

    html[data-panel-design="v7"] .business-gimmick img {
        width: auto;
        max-width: min(46vw, 250px);
        height: clamp(160px, 19vw, 225px);
        max-height: none;
    }
}

@media (max-width: 700px) {
    html[data-panel-design="v7"] .business-gimmick {
        min-height: 138px;
        margin: 14px 0 20px;
        border-radius: 22px;
    }

    html[data-panel-design="v7"] .business-gimmick img {
        max-width: 150px;
        height: 130px;
    }

    html[data-panel-design="v7"] .business-gimmick::after {
        left: 29%;
        right: 29%;
        bottom: 5%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-panel-design="v7"] .business-gimmick {
        scroll-behavior: auto;
    }
}

/* P2: <picture> no debe crear caja propia para que la ilustración conserve su layout.
   <source> se oculta porque, dentro de display:contents, genera una caja vacía en flex/grid
   (medido: desplazaba la ilustración hasta 28 px). */
.gimmick-picture { display: contents; }
.gimmick-picture > source { display: none; }