/* Ilustraciones decorativas de encabezado para áreas operativas. */
html[data-panel-design="v7"] .page-title-gimmick {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
}

html[data-panel-design="v7"] .page-title-gimmick-copy {
    min-width: 0;
}

html[data-panel-design="v7"] .page-title-gimmick-image,
html[data-panel-design="v7"] .subscription-gimmick-image {
    width: clamp(112px, 10vw, 168px);
    height: clamp(112px, 10vw, 168px);
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter:
        drop-shadow(0 10px 11px rgba(83, 27, 104, .12))
        drop-shadow(0 24px 25px rgba(83, 27, 104, .2));
}

html[data-panel-design="v7"] .assistant-center-page.assistant-center-page-gimmick {
    max-width: none;
    grid-template-columns: minmax(0, 1024px) minmax(280px, 1fr);
    column-gap: clamp(24px, 3vw, 56px);
    align-items: start;
}

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

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

html[data-panel-design="v7"] .assistant-page-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"] .assistant-page-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"] .assistant-page-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));
}

/* Leads y Atención humana reutilizan literalmente la composición de Mi negocio.
   Solo comienzan una fila antes porque no incluyen el navegador de seis pasos. */
html[data-panel-design="v7"] .business-gimmick.operational-business-gimmick {
    grid-row: 2 / span 8;
}

html[data-panel-design="v7"] .gimmick-subscription-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-height: 178px;
    padding: 12px 26px;
    border: 1px solid rgba(190, 122, 211, .16);
    border-radius: 26px;
    background: linear-gradient(120deg, rgba(255,255,255,.88), rgba(250,231,247,.46));
}

html[data-panel-design="v7"] .subscription-gimmick-image {
    width: clamp(136px, 16vw, 210px);
    height: clamp(136px, 16vw, 210px);
}

@media (max-width: 900px) {
    html[data-panel-design="v7"] .main > header:has(.page-title-gimmick) {
        display: block;
    }

    html[data-panel-design="v7"] .main > header:has(.page-title-gimmick) .header-actions {
        margin-top: 14px;
    }

    html[data-panel-design="v7"] .page-title-gimmick {
        width: 100%;
        justify-content: space-between;
    }
}

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

    html[data-panel-design="v7"] .assistant-page-gimmick {
        position: relative;
        top: auto;
        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"] .assistant-page-gimmick img {
        width: auto;
        max-width: min(46vw, 250px);
        height: clamp(160px, 19vw, 225px);
        max-height: none;
    }

}

@media (max-width: 620px) {
    html[data-panel-design="v7"] .page-title-gimmick-image {
        width: 92px;
        height: 92px;
    }

    html[data-panel-design="v7"] .gimmick-subscription-hero {
        min-height: 142px;
        padding: 14px 16px;
        border-radius: 20px;
    }

    html[data-panel-design="v7"] .subscription-gimmick-image {
        width: 104px;
        height: 104px;
    }

    html[data-panel-design="v7"] .assistant-page-gimmick {
        min-height: 138px;
        margin: 14px 0 20px;
        border-radius: 22px;
    }

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

}

@media (max-width: 420px) {
    html[data-panel-design="v7"] .page-title-gimmick-image {
        width: 76px;
        height: 76px;
    }

    html[data-panel-design="v7"] .subscription-gimmick-image {
        width: 86px;
        height: 86px;
    }
}

/* 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; }