/* ============================================================
   UARTES — PRODUCT TABS UX
   ============================================================ */


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

body.single-product {

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

    --uartes-tabs-orange: #e66a08;

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

    --uartes-tabs-border: #e1e5e6;
    --uartes-tabs-border-soft: #edf0f1;

    --uartes-tabs-soft: #f5f7f7;
    --uartes-tabs-soft-teal: #eef6f5;

    --uartes-tabs-white: #ffffff;

    --uartes-tabs-radius: 16px;

}


/* ============================================================
   02. CONTENEDOR GENERAL
   ============================================================ */

body.single-product
.woocommerce-tabs.uartes-product-tabs {

    position: relative;

    width: 100%;

}


/* ============================================================
   03. FILA DE NAVEGACIÓN
   ============================================================ */

body.single-product
.woocommerce-tabs.uartes-product-tabs
> .row:first-child {

    margin-bottom: 0;

}


/* ============================================================
   04. NAVEGACIÓN DE TABS
   ============================================================ */

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tabs-nav {

    position: relative;

    display: flex !important;

    align-items: center;

    gap: 6px;

    width: fit-content;
    max-width: 100%;

    margin:
        0
        0
        38px !important;

    padding:
        5px !important;

    background:
        #ffffff !important;

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

    border-radius:
        13px;

    box-shadow: none !important;

    list-style:
        none !important;

    box-sizing:
        border-box;

}


/* ============================================================
   05. LIMPIAR SHOPKEEPER
   ============================================================ */

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tabs-nav::before,

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tabs-nav::after {

    content: none !important;

    display: none !important;

    border: 0 !important;

    background: none !important;

    box-shadow: none !important;

}


/* ============================================================
   06. ITEM
   ============================================================ */

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tab-item {

    position: relative;

    display: block;

    float: none !important;

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

    border: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

}


body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tab-item::before,

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tab-item::after {

    content: none !important;

    display: none !important;

}


/* ============================================================
   07. LINK
   ============================================================ */

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tab-link {

    position: relative;

    display: flex !important;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        0
        18px !important;

    border:
        0 !important;

    border-radius:
        9px;

    background:
        transparent !important;

    color:
        #8b9193 !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1.2;

    text-align: center;

    text-decoration:
        none !important;

    white-space:
        nowrap;

    box-sizing:
        border-box;

    transition:
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;

}


/* ============================================================
   08. HOVER
   ============================================================ */

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tab-link:hover {

    background:
        rgba(40, 123, 134, .055) !important;

    color:
        var(--uartes-tabs-primary-dark) !important;

}


/* ============================================================
   09. ACTIVO
   ============================================================ */

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tab-item.active
.uartes-product-tab-link {

    background:
        #ffffff !important;

    color:
        var(--uartes-tabs-primary) !important;

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, .07) !important;

}


/* ============================================================
   10. ÚNICA LÍNEA ACTIVA
   ============================================================ */

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tab-item.active
.uartes-product-tab-link::after {

    content: "";

    position: absolute;

    left: 17px;
    right: 17px;

    bottom: -6px;

    height: 2px;

    background:
        var(--uartes-tabs-primary);

    border-radius:
        999px;

}


body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tab-item:not(.active)
.uartes-product-tab-link::after,

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tab-link::before {

    content: none !important;

    display: none !important;

}


/* ============================================================
   11. PANELES
   ============================================================ */

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tab-panel {

    margin: 0 !important;

    padding:
        0
        0
        52px !important;

    background:
        transparent !important;

    border:
        0 !important;

}


/* ============================================================
   12. INTERIOR
   ============================================================ */

body.single-product
.woocommerce-tabs.uartes-product-tabs
.uartes-product-tab-inner {

    padding-top: 4px;

}


/* ============================================================
   13. DESCRIPCIÓN
   ============================================================ */

body.single-product
.uartes-description-panel
.uartes-editorial-content {

    max-width:
        860px;

}


body.single-product
.uartes-editorial-content
.uartes-editorial-heading {

    margin:
        0
        0
        20px;

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

    font-weight:
        800;

    line-height:
        1.2;

}


body.single-product
.uartes-editorial-content
h2.uartes-editorial-heading {

    font-size:
        clamp(
            28px,
            2.4vw,
            34px
        );

}


body.single-product
.uartes-editorial-content
h3.uartes-editorial-heading {

    margin-top:
        34px;

    font-size:
        22px;

}


body.single-product
.uartes-editorial-content
h4.uartes-editorial-heading {

    margin-top:
        28px;

    font-size:
        17px;

}


body.single-product
.uartes-editorial-content
.uartes-editorial-paragraph {

    margin:
        0
        0
        24px !important;

    color:
        #33393b;

    font-size:
        16px;

    line-height:
        1.75;

}


body.single-product
.uartes-editorial-content
.uartes-editorial-list {

    margin:
        0
        0
        28px;

    padding-left:
        24px;

}


body.single-product
.uartes-editorial-content
.uartes-editorial-list li {

    margin-bottom:
        8px;

    color:
        #33393b;

    font-size:
        15px;

    line-height:
        1.6;

}


/* ============================================================
   14. CONTENIDOS
   ============================================================ */

body.single-product
.uartes-contents-panel
.uartes-product-tab-inner {

    max-width:
        940px;

}


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

    display:
        none !important;

}


body.single-product
.uartes-sessions-wrapper {

    width:
        100%;

}


body.single-product
.uartes-contents-intro {

    max-width:
        820px;

    margin:
        0
        0
        30px;

    padding:
        18px
        20px;

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

    border-left:
        3px solid
        var(--uartes-tabs-primary);

    border-radius:
        0
        11px
        11px
        0;

    box-sizing:
        border-box;

}


body.single-product
.uartes-contents-intro p {

    margin:
        0
        0
        9px !important;

    color:
        #4b5355;

    font-size:
        14px;

    line-height:
        1.65;

}


body.single-product
.uartes-contents-intro p:last-child {

    margin-bottom:
        0 !important;

}


body.single-product
.uartes-sessions-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    width:
        100%;

}


/* ============================================================
   15. CARD SESIÓN
   ============================================================ */

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

    position:
        relative;

    width:
        100%;

    padding:
        23px
        25px
        24px;

    background:
        #ffffff;

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

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

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, .04);

    box-sizing:
        border-box;

}


body.single-product
.uartes-session-card::before {

    content: "";

    position:
        absolute;

    top:
        22px;

    bottom:
        22px;

    left:
        0;

    width:
        3px;

    background:
        var(--uartes-tabs-primary);

    border-radius:
        0
        999px
        999px
        0;

}


body.single-product
.uartes-session-card__header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        9px
        16px;

    margin-bottom:
        15px;

}


body.single-product
.uartes-session-card__number {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        0
        10px;

    background:
        var(--uartes-tabs-soft-teal);

    border-radius:
        999px;

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

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .045em;

}


body.single-product
.uartes-session-card__meta {

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

    font-size:
        12px;

    font-weight:
        600;

}


body.single-product
.uartes-session-card__title {

    margin:
        0
        0
        17px !important;

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

    font-size:
        19px;

    font-weight:
        800;

    line-height:
        1.35;

}


body.single-product
.uartes-session-card__field {

    display:
        grid;

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

    gap:
        10px;

    align-items:
        start;

    margin-top:
        12px;

}


body.single-product
.uartes-session-card__field-label {

    padding-top:
        2px;

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

    font-size:
        11px;

    font-weight:
        800;

}


body.single-product
.uartes-session-card__field-value {

    margin:
        0 !important;

    color:
        #4d5557;

    font-size:
        14px;

    line-height:
        1.6;

}


body.single-product
.uartes-session-card__details {

    margin-top:
        15px;

    padding-top:
        14px;

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

}


body.single-product
.uartes-session-card__details p {

    margin:
        0
        0
        9px !important;

    color:
        #596164;

    font-size:
        13px;

    line-height:
        1.6;

}


body.single-product
.uartes-session-card__list {

    margin:
        16px
        0
        0 !important;

    padding:
        15px
        0
        0 !important;

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

    list-style:
        none !important;

}


body.single-product
.uartes-session-card__list li {

    position:
        relative;

    margin:
        0
        0
        9px !important;

    padding-left:
        18px;

    color:
        #50585a;

    font-size:
        13px;

    line-height:
        1.55;

}


body.single-product
.uartes-session-card__list li::before {

    content: "";

    position:
        absolute;

    top:
        .65em;

    left:
        1px;

    width:
        5px;

    height:
        5px;

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

    border-radius:
        50%;

}


/* ============================================================
   16. DOCENTES
   ============================================================ */

body.single-product
.uartes-instructor-panel
.uartes-product-tab-inner {

    max-width:
        940px;

}


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

    display:
        none !important;

}


body.single-product
.uartes-instructors-grid {

    display:
        flex;

    flex-direction:
        column;

    gap:
        26px;

    width:
        100%;

}


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

    display:
        grid;

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

    gap:
        38px;

    align-items:
        start;

    width:
        100%;

    margin:
        0 !important;

    padding:
        28px;

    background:
        #ffffff;

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

    border-radius:
        18px;

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

    box-sizing:
        border-box;

}


body.single-product
.uartes-instructor-card__media {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    background:
        #eef0f1;

    border-radius:
        14px;

}


body.single-product
.uartes-instructor-card__media::before {

    content: "";

    display:
        block;

    padding-top:
        100%;

}


body.single-product
.uartes-instructor-card__image {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        100% !important;

    max-height:
        none !important;

    margin:
        0 !important;

    object-fit:
        cover;

    object-position:
        center;

    filter:
        grayscale(100%);

}


body.single-product
.uartes-instructor-card__content {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    min-width:
        0;

    padding-top:
        5px;

}


body.single-product
.uartes-instructor-card__name {

    margin:
        0
        0
        18px !important;

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

    font-size:
        clamp(
            26px,
            2.2vw,
            34px
        );

    font-weight:
        800;

    line-height:
        1.15;

}


body.single-product
.uartes-instructor-card__bio {

    width:
        100%;

    margin-bottom:
        24px;

}


body.single-product
.uartes-instructor-card__bio p {

    margin:
        0
        0
        16px !important;

    color:
        #454c4e;

    font-size:
        14px;

    line-height:
        1.7;

}


body.single-product
.uartes-instructor-card__link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        46px;

    padding:
        0
        18px;

    background:
        transparent;

    border:
        1px solid
        var(--uartes-tabs-primary);

    border-radius:
        9px;

    color:
        var(--uartes-tabs-primary) !important;

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none !important;

}


/* ============================================================
   17. TABLET
   ============================================================ */

@media (max-width: 1024px) {

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

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

        gap:
            28px;

        padding:
            24px;

    }

}


/* ============================================================
   18. MOBILE
   ============================================================ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       NAVEGACIÓN: 3 COLUMNAS, SIN SCROLL
       -------------------------------------------------------- */

    body.single-product
    .woocommerce-tabs.uartes-product-tabs
    > .row:first-child
    > .columns {

        width:
            100% !important;

        max-width:
            100% !important;

        padding-left:
            14px !important;

        padding-right:
            14px !important;

        overflow:
            visible !important;

    }


    body.single-product
    .woocommerce-tabs.uartes-product-tabs
    .uartes-product-tabs-nav {

        display:
            grid !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            3px;

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0
            0
            30px !important;

        padding:
            4px !important;

        overflow:
            visible !important;

        border-radius:
            12px;

    }


    body.single-product
    .woocommerce-tabs.uartes-product-tabs
    .uartes-product-tab-item {

        width:
            100%;

        min-width:
            0;

    }


    body.single-product
    .woocommerce-tabs.uartes-product-tabs
    .uartes-product-tab-link {

        width:
            100%;

        min-width:
            0;

        min-height:
            42px;

        padding:
            0
            5px !important;

        font-size:
            10px !important;

        line-height:
            1.15;

        white-space:
            normal;

        overflow-wrap:
            normal;

        word-break:
            normal;

    }


    body.single-product
    .woocommerce-tabs.uartes-product-tabs
    .uartes-product-tab-item.active
    .uartes-product-tab-link::after {

        left:
            16px;

        right:
            16px;

        bottom:
            -6px;

    }


    /* --------------------------------------------------------
       PANELES
       -------------------------------------------------------- */

    body.single-product
    .woocommerce-tabs.uartes-product-tabs
    .uartes-product-tab-panel {

        padding-bottom:
            38px !important;

    }


    /* --------------------------------------------------------
       DESCRIPCIÓN
       -------------------------------------------------------- */

    body.single-product
    .uartes-editorial-content
    .uartes-editorial-paragraph {

        font-size:
            15px;

        line-height:
            1.7;

    }


    /* --------------------------------------------------------
       SESIONES
       -------------------------------------------------------- */

    body.single-product
    .uartes-sessions-list {

        gap:
            14px;

    }


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

        padding:
            20px
            18px
            21px;

        border-radius:
            14px;

    }


    body.single-product
    .uartes-session-card__field {

        grid-template-columns:
            1fr;

        gap:
            3px;

    }


    /* --------------------------------------------------------
       DOCENTES
       -------------------------------------------------------- */

    body.single-product
    .uartes-instructors-grid {

        gap:
            20px;

    }


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

        grid-template-columns:
            1fr;

        gap:
            24px;

        padding:
            20px;

    }


    body.single-product
    .uartes-instructor-card__media {

        width:
            min(
                100%,
                320px
            );

        margin:
            0 auto;

    }


    body.single-product
    .uartes-instructor-card__name {

        font-size:
            26px;

    }


    body.single-product
    .uartes-instructor-card__link {

        width:
            100%;

        min-height:
            50px;

        box-sizing:
            border-box;

    }

}


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

@media (max-width: 420px) {

    body.single-product
    .woocommerce-tabs.uartes-product-tabs
    .uartes-product-tab-link {

        padding:
            0
            3px !important;

        font-size:
            9px !important;

    }


    body.single-product
    .uartes-instructor-card__name {

        font-size:
            24px;

    }

}