/* ============================================================
   UARTES — PRODUCT ENROLLMENT SIDEBAR
   ============================================================ */


/* ============================================================
   01. VARIABLES
   ============================================================ */

body.single-product {

    --uartes-product-primary: #287b86;
    --uartes-product-primary-dark: #216872;

    --uartes-product-orange: #e66a08;
    --uartes-product-orange-dark: #c95800;

    --uartes-product-text: #202426;
    --uartes-product-muted: #70787a;

    --uartes-product-border: #e0e4e5;
    --uartes-product-border-soft: #e8ebec;

    --uartes-product-soft: #f5f7f7;

    --uartes-product-green-soft: #eaf6f2;
    --uartes-product-green: #268061;

    --uartes-product-warning-soft: #fff4e8;
    --uartes-product-warning: #d06a00;

    --uartes-product-danger-soft: #f8e8e8;
    --uartes-product-danger: #b24646;

    --uartes-product-radius: 17px;

}


/* ============================================================
   02. CONTENEDOR ORIGINAL DEL THEME
   ============================================================ */

body.single-product
.product_sidebar {

    position: relative;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    padding: 0 !important;

    margin-bottom: 30px;

}


body.single-product
.product_sidebar
.product_infos {

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    margin: 0 !important;
    padding: 0 !important;

}


/* ============================================================
   03. OCULTAR ORIGINALES
   ============================================================ */

body.single-product
.product_sidebar
.product_summary_top,

body.single-product
.product_sidebar
.product_summary_middle,

body.single-product
.uartes-original-attrs-hidden {

    display: none !important;

}


/* Marker JS */

body.single-product
.uartes-enrollment-desktop-marker {

    display: none !important;

}


/* ============================================================
   04. CARD
   ============================================================ */

body.single-product
.uartes-enrollment-card {

    position: relative;

    width: 100%;

    margin: 0;

    padding:
        30px
        28px;

    background:
        #ffffff;

    border:
        1px solid
        var(--uartes-product-border);

    border-radius:
        var(--uartes-product-radius);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .08);

    box-sizing:
        border-box;

}


/* ============================================================
   05. STATUS
   ============================================================ */

body.single-product
.uartes-enrollment-status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin:
        0
        0
        22px;

    padding:
        9px
        14px;

    border-radius:
        999px;

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;

    white-space:
        nowrap;

}


body.single-product
.uartes-enrollment-status__dot {

    width: 7px;
    height: 7px;

    background:
        currentColor;

    border-radius:
        50%;

}


body.single-product
.uartes-enrollment-status.is-open {

    background:
        var(--uartes-product-green-soft);

    color:
        var(--uartes-product-green);

}


body.single-product
.uartes-enrollment-status.is-warning {

    background:
        var(--uartes-product-warning-soft);

    color:
        var(--uartes-product-warning);

}


body.single-product
.uartes-enrollment-status.is-closed {

    background:
        var(--uartes-product-danger-soft);

    color:
        var(--uartes-product-danger);

}


/* ============================================================
   06. PRECIO
   ============================================================ */

body.single-product
.uartes-product-price {

    width: 100%;

    margin:
        0
        0
        16px;

}


/* ============================================================
   07. PRECIO REGULAR
   ============================================================ */

body.single-product
.uartes-product-price__regular {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 16px;

    width: 100%;

    margin-bottom:
        13px;

    padding-bottom:
        12px;

    border-bottom:
        1px solid
        var(--uartes-product-border-soft);

    color:
        var(--uartes-product-muted);

    font-size:
        13px;

    line-height:
        1.4;

}


body.single-product
.uartes-product-price__regular > span {

    flex:
        1 1 auto;

    min-width:
        0;

}


body.single-product
.uartes-product-price__regular del {

    display: inline-block !important;

    flex:
        0 0 auto;

    width:
        auto !important;

    min-width:
        max-content !important;

    color:
        #83898b !important;

    font-size:
        15px;

    white-space:
        nowrap !important;

}


body.single-product
.uartes-product-price__regular
del
.woocommerce-Price-amount,

body.single-product
.uartes-product-price__regular
del
.woocommerce-Price-amount
bdi,

body.single-product
.uartes-product-price__regular
del
.woocommerce-Price-currencySymbol {

    display: inline !important;

    width: auto !important;

    white-space:
        nowrap !important;

}


/* ============================================================
   08. PRECIO PRINCIPAL
   ============================================================ */

body.single-product
.uartes-product-price__sale > span,

body.single-product
.uartes-product-price__normal > span {

    display: block;

    margin-bottom:
        5px;

    color:
        var(--uartes-product-text);

    font-size:
        16px;

    font-weight:
        700;

}


body.single-product
.uartes-product-price__sale > strong {

    display: block;

    color:
        var(--uartes-product-orange);

    font-size:
        46px;

    font-weight:
        800;

    line-height:
        1;

}


body.single-product
.uartes-product-price__normal > strong {

    display: block;

    color:
        var(--uartes-product-text);

    font-size:
        42px;

    font-weight:
        800;

    line-height:
        1;

}


/* ============================================================
   09. AHORRO
   ============================================================ */

body.single-product
.uartes-product-saving {

    display: inline-flex;

    align-items: center;

    margin-top:
        12px;

    padding:
        7px
        12px;

    background:
        var(--uartes-product-green-soft);

    border-radius:
        999px;

    color:
        var(--uartes-product-green);

    font-size:
        11px;

    font-weight:
        700;

}


/* ============================================================
   10. DEADLINE
   ============================================================ */

body.single-product
.uartes-sale-deadline {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin:
        20px
        0
        16px;

    padding:
        14px;

    background:
        #eef6f5;

    border-radius:
        12px;

    color:
        var(--uartes-product-primary-dark);

    font-size:
        12px;

    line-height:
        1.45;

    box-sizing:
        border-box;

}


body.single-product
.uartes-sale-deadline strong {

    display: block;

    font-weight:
        800;

}


body.single-product
.uartes-sale-deadline__icon {

    display: flex;

    align-items: center;

    justify-content:
        center;

    flex:
        0 0
        30px;

}


body.single-product
.uartes-sale-deadline__icon svg {

    width: 24px;
    height: 24px;

}


/* ============================================================
   11. GRATUITO
   ============================================================ */

body.single-product
.uartes-product-free {

    margin-bottom:
        18px;

}


body.single-product
.uartes-product-free > span {

    display: block;

    margin-bottom:
        5px;

    color:
        var(--uartes-product-muted);

    font-size:
        13px;

}


body.single-product
.uartes-product-free > strong {

    display: block;

    color:
        var(--uartes-product-primary-dark);

    font-size:
        36px;

    font-weight:
        800;

}


body.single-product
.uartes-product-free > small {

    display: block;

    margin-top:
        7px;

    color:
        var(--uartes-product-muted);

    font-size:
        12px;

}


/* ============================================================
   12. NO DISPONIBLE
   ============================================================ */

body.single-product
.uartes-product-unavailable {

    margin-bottom:
        18px;

    padding:
        15px
        16px;

    background:
        #f5f6f6;

    border:
        1px solid
        #e3e6e7;

    border-radius:
        11px;

}


body.single-product
.uartes-product-unavailable strong {

    display: block;

    margin-bottom:
        5px;

    color:
        var(--uartes-product-text);

    font-size:
        16px;

    font-weight:
        800;

}


body.single-product
.uartes-product-unavailable span {

    color:
        var(--uartes-product-muted);

    font-size:
        12px;

    line-height:
        1.5;

}


/* ============================================================
   13. FORM
   ============================================================ */

body.single-product
.uartes-enrollment-button-slot
form.cart {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

}


body.single-product
.uartes-enrollment-button-slot
.quantity {

    display:
        none !important;

}


/* ============================================================
   14. CTA PRINCIPAL
   ============================================================ */

body.single-product
.uartes-enrollment-button-slot
.single_add_to_cart_button.uartes-enroll-cta {

    display:
        flex !important;

    align-items: center;

    justify-content:
        center;

    width:
        100% !important;

    min-height:
        58px;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        var(--uartes-product-orange) !important;

    border:
        1px solid
        var(--uartes-product-orange) !important;

    border-radius:
        12px !important;

    color:
        #ffffff !important;

    box-shadow:
        0 9px 22px
        rgba(230, 106, 8, .25);

    cursor:
        pointer;

}


body.single-product
.uartes-enrollment-button-slot
.single_add_to_cart_button.uartes-enroll-cta:hover {

    background:
        var(--uartes-product-orange-dark) !important;

}


body.single-product
.uartes-enrollment-button-slot
.single_add_to_cart_button
.btn {

    display:
        flex !important;

    align-items: center;

    justify-content:
        center;

    gap:
        12px;

    width:
        100%;

    color:
        #ffffff !important;

    font-size:
        16px;

    font-weight:
        800;

    text-transform:
        none !important;

}


body.single-product
.uartes-enrollment-button-slot
.single_add_to_cart_button
.btn svg {

    width: 18px;
    height: 18px;

}


/* ============================================================
   15. CTA CERRADO
   ============================================================ */

body.single-product
.uartes-enrollment-unavailable {

    display: flex;

    align-items: center;

    justify-content:
        center;

    min-height:
        52px;

    background:
        #eef0f1;

    border:
        1px solid
        #dfe3e4;

    border-radius:
        11px;

    color:
        #6d7476;

    font-size:
        14px;

    font-weight:
        700;

}


/* ============================================================
   16. DIVISOR
   ============================================================ */

body.single-product
.uartes-enrollment-divider {

    height:
        1px;

    margin:
        26px
        0
        22px;

    background:
        var(--uartes-product-border-soft);

}


/* ============================================================
   17. INFORMACIÓN CLAVE
   ============================================================ */

body.single-product
.uartes-key-info h2 {

    margin:
        0
        0
        18px;

    color:
        var(--uartes-product-text);

    font-size:
        20px;

    font-weight:
        800;

}


body.single-product
.uartes-key-info__list {

    display: flex;

    flex-direction:
        column;

    gap:
        15px;

}


body.single-product
.uartes-key-info__item {

    display: grid;

    grid-template-columns:
        24px
        112px
        minmax(0, 1fr);

    column-gap:
        10px;

    align-items:
        start;

    font-size:
        12px;

    line-height:
        1.5;

}


body.single-product
.uartes-key-info__icon {

    display: flex;

    justify-content:
        center;

}


body.single-product
.uartes-key-info__icon svg {

    width: 18px;
    height: 18px;

}


body.single-product
.uartes-key-info__label {

    color:
        var(--uartes-product-text);

    font-weight:
        700;

}


body.single-product
.uartes-key-info__value {

    color:
        #555d60;

}


/* ============================================================
   18. INSCRIPCIÓN HASTA
   ============================================================ */

body.single-product
.uartes-registration-end {

    display: flex;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        22px;

    padding-top:
        17px;

    border-top:
        1px solid
        var(--uartes-product-border-soft);

    color:
        var(--uartes-product-muted);

    font-size:
        12px;

}


body.single-product
.uartes-registration-end strong {

    color:
        var(--uartes-product-text);

    font-size:
        13px;

}


/* ============================================================
   19. SECUNDARIOS
   ============================================================ */

body.single-product
.uartes-product-secondary-info {

    display: flex;

    align-items:
        flex-start;

    gap:
        13px;

    margin-top:
        15px;

    padding:
        16px;

    background:
        var(--uartes-product-soft);

    border:
        1px solid
        #edf0f1;

    border-radius:
        12px;

}


body.single-product
.uartes-product-secondary-info__icon {

    flex:
        0 0
        30px;

    color:
        var(--uartes-product-primary);

}


body.single-product
.uartes-product-secondary-info__icon svg {

    width: 23px;
    height: 23px;

}


body.single-product
.uartes-product-secondary-info strong {

    display: block;

    margin-bottom:
        5px;

    color:
        var(--uartes-product-primary-dark);

    font-size:
        13px;

    font-weight:
        800;

}


body.single-product
.uartes-product-secondary-info p {

    margin:
        0 !important;

    color:
        #555d60;

    font-size:
        12px;

    line-height:
        1.55;

}


/* ============================================================
   20. CTA FINAL MOBILE — OCULTO EN DESKTOP
   ============================================================ */

body.single-product
.uartes-mobile-closing-cta {

    display:
        none;

}


/* ============================================================
   21. MOBILE
   ============================================================ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       SIDEBAR ORIGINAL YA NO RESERVA ESPACIO
       -------------------------------------------------------- */

    body.single-product
    .product_sidebar {

        margin:
            0 !important;

    }


    /* --------------------------------------------------------
       CARD MOVIDA AL FLUJO PRINCIPAL
       -------------------------------------------------------- */

    body.single-product
    .uartes-enrollment-card--mobile {

        width:
            calc(100% - 28px);

        max-width:
            760px;

        margin:
            28px
            auto
            34px !important;

        padding:
            26px
            20px;

        border-radius:
            16px;

        box-shadow:
            0 12px 34px
            rgba(0, 0, 0, .065);

    }


    body.single-product
    .uartes-product-price__sale > strong,

    body.single-product
    .uartes-product-price__normal > strong {

        font-size:
            38px;

    }


    body.single-product
    .uartes-key-info__item {

        grid-template-columns:
            28px
            minmax(0, 1fr);

        grid-template-areas:
            "icon label"
            "icon value";

        column-gap:
            12px;

        row-gap:
            3px;

        font-size:
            13px;

    }


    body.single-product
    .uartes-key-info__icon {

        grid-area:
            icon;

        padding-top:
            2px;

    }


    body.single-product
    .uartes-key-info__label {

        grid-area:
            label;

        font-size:
            13px;

    }


    body.single-product
    .uartes-key-info__value {

        grid-area:
            value;

        font-size:
            13px;

        line-height:
            1.5;

    }


    body.single-product
    .uartes-key-info h2 {

        font-size:
            21px;

    }


    /* --------------------------------------------------------
       CTA FINAL
       -------------------------------------------------------- */

    body.single-product
    .uartes-mobile-closing-cta {

        display:
            block;

        width:
            calc(100% - 28px);

        max-width:
            760px;

        margin:
            12px
            auto
            44px;

    }


    body.single-product
    .uartes-mobile-closing-cta__inner {

        padding:
            24px
            20px;

        background:
            #ffffff;

        border:
            1px solid
            var(--uartes-product-border);

        border-radius:
            16px;

        box-shadow:
            0 12px 32px
            rgba(0, 0, 0, .06);

    }


    body.single-product
    .uartes-mobile-closing-cta__eyebrow {

        display:
            block;

        margin-bottom:
            6px;

        color:
            var(--uartes-product-primary);

        font-size:
            11px;

        font-weight:
            800;

    }


    body.single-product
    .uartes-mobile-closing-cta h2 {

        margin:
            0
            0
            20px;

        color:
            var(--uartes-product-text);

        font-size:
            22px;

        font-weight:
            800;

        line-height:
            1.25;

    }


    body.single-product
    .uartes-mobile-closing-cta__price {

        margin-bottom:
            15px;

    }


    body.single-product
    .uartes-mobile-closing-cta__price > span {

        display:
            block;

        margin-bottom:
            3px;

        color:
            var(--uartes-product-muted);

        font-size:
            12px;

    }


    body.single-product
    .uartes-mobile-closing-cta__price > strong {

        display:
            block;

        color:
            var(--uartes-product-orange);

        font-size:
            34px;

        font-weight:
            800;

        line-height:
            1.05;

    }


    body.single-product
    .uartes-mobile-closing-cta__deadline {

        display:
            flex;

        align-items:
            center;

        gap:
            11px;

        margin-bottom:
            18px;

        padding:
            12px
            14px;

        background:
            #eef6f5;

        border-radius:
            11px;

        color:
            var(--uartes-product-primary-dark);

        font-size:
            12px;

    }


    body.single-product
    .uartes-mobile-closing-cta__deadline svg {

        flex:
            0 0
            22px;

        width:
            22px;

        height:
            22px;

    }


    body.single-product
    .uartes-mobile-closing-cta__deadline strong {

        display:
            block;

        font-weight:
            800;

    }


    body.single-product
    .uartes-mobile-closing-cta__button {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            12px;

        width:
            100%;

        min-height:
            56px;

        padding:
            0
            18px;

        background:
            var(--uartes-product-orange);

        border:
            0;

        border-radius:
            11px;

        color:
            #ffffff;

        font-size:
            15px;

        font-weight:
            800;

        cursor:
            pointer;

    }


    body.single-product
    .uartes-mobile-closing-cta__button svg {

        width:
            18px;

        height:
            18px;

    }


    body.single-product
    .uartes-mobile-closing-cta__closed {

        padding:
            15px;

        background:
            #f5f6f6;

        border-radius:
            11px;

    }


    body.single-product
    .uartes-mobile-closing-cta__closed strong {

        display:
            block;

        margin-bottom:
            5px;

        font-size:
            15px;

    }


    body.single-product
    .uartes-mobile-closing-cta__closed span {

        color:
            var(--uartes-product-muted);

        font-size:
            12px;

        line-height:
            1.5;

    }

}


/* ============================================================
   22. MOBILE PEQUEÑO
   ============================================================ */

@media (max-width: 480px) {

    body.single-product
    .uartes-enrollment-card--mobile {

        width:
            calc(100% - 24px);

        padding:
            22px
            18px;

    }


    body.single-product
    .uartes-mobile-closing-cta {

        width:
            calc(100% - 24px);

    }


    body.single-product
    .uartes-mobile-closing-cta__inner {

        padding:
            21px
            18px;

    }

}