/* CONSTRUMIN: hover individual de beneficios V3 */

/* Mantener fijo el fondo de las cuatro tarjetas */
body.cm26-v2 .performance-wrapper .pr-wrap:hover {
    background-position: 0% 50% !important;
}

/* Preparar movimiento suave */
body.cm26-v2 .performance-wrapper .pr-wrap .ps-single-wrap {
    position: relative;
    z-index: 1;
    border-radius: 16px;
    transform: translateY(0);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background-position .45s ease !important;
}

body.cm26-v2 .performance-wrapper .ps-single-wrap > img,
body.cm26-v2 .performance-wrapper .ps-single-wrap > h4,
body.cm26-v2 .performance-wrapper .ps-single-wrap > p {
    transform: translateY(0);
    transition: transform .35s ease !important;
}

/* SOLO la tarjeta seleccionada */
body.cm26-v2 .performance-wrapper .pr-wrap
.ps-single-wrap:hover {
    z-index: 5;
    background: linear-gradient(
        115deg,
        #63451F 0%,
        #966622 38%,
        #C39342 72%,
        #E4BB72 100%
    ) !important;
    transform: translateY(-16px) !important;
    box-shadow: 0 16px 30px rgba(20, 22, 25, .15) !important;
    filter: none !important;
    border-radius: 16px !important;
}

/* Ícono y textos se elevan suavemente */
body.cm26-v2 .performance-wrapper .ps-single-wrap:hover > img,
body.cm26-v2 .performance-wrapper .ps-single-wrap:hover > h4,
body.cm26-v2 .performance-wrapper .ps-single-wrap:hover > p {
    transform: translateY(-7px) !important;
    filter: none !important;
    text-shadow: none !important;
}

body.cm26-v2 .performance-wrapper .ps-single-wrap:hover > h4,
body.cm26-v2 .performance-wrapper .ps-single-wrap:hover > p {
    color: #FFFFFF !important;
}

@media (prefers-reduced-motion: reduce) {
    body.cm26-v2 .performance-wrapper .ps-single-wrap,
    body.cm26-v2 .performance-wrapper .ps-single-wrap > * {
        transition: none !important;
    }
}

/* CM26_HOVER_V4: elevación y degradado progresivo */

body.cm26-v2 .performance-wrapper
.pr-wrap .ps-border .ps-single-wrap {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
    border-radius: 16px;
    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        box-shadow .5s ease !important;
}

/* El degradado aparece progresivamente */
body.cm26-v2 .performance-wrapper
.pr-wrap .ps-border .ps-single-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 16px;
    background: linear-gradient(
        115deg,
        rgba(133,87,31,.72) 0%,
        rgba(179,119,39,.88) 48%,
        rgba(230,183,92,.97) 100%
    );
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}

/* Mantener textos e iconos encima del degradado */
body.cm26-v2 .performance-wrapper
.pr-wrap .ps-border .ps-single-wrap > * {
    position: relative;
    z-index: 1;
    transition: transform .5s ease !important;
}

/* Elevar únicamente la tarjeta seleccionada */
body.cm26-v2 .performance-wrapper
.pr-wrap .ps-border:hover .ps-single-wrap {
    background: transparent !important;
    transform: translateY(-32px) !important;
    box-shadow: 0 16px 28px rgba(0,0,0,.12) !important;
}

/* Impedir que el estilo anterior tape la transición */
body.cm26-v2 .performance-wrapper
.pr-wrap .ps-border .ps-single-wrap:hover {
    background: transparent !important;
}

body.cm26-v2 .performance-wrapper
.pr-wrap .ps-border:hover .ps-single-wrap::before {
    opacity: 1;
}

/* El contenido también se eleva ligeramente */
body.cm26-v2 .performance-wrapper
.pr-wrap .ps-border:hover .ps-single-wrap > * {
    transform: translateY(-9px) !important;
}

/* Movimiento más discreto en celulares */
@media (max-width: 767px) {
    body.cm26-v2 .performance-wrapper
    .pr-wrap .ps-border:hover .ps-single-wrap {
        transform: translateY(-14px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.cm26-v2 .performance-wrapper
    .pr-wrap .ps-border .ps-single-wrap,
    body.cm26-v2 .performance-wrapper
    .pr-wrap .ps-border .ps-single-wrap::before,
    body.cm26-v2 .performance-wrapper
    .pr-wrap .ps-border .ps-single-wrap > * {
        transition: none !important;
    }
}