.yield-tabs-main {
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    padding: 0;
}

.yield-nav-wrapper #yield-nav-target, #yield-nav-target-cpt {
    display: flex;
    justify-content: space-between;
    gap: var(--padding-int);
    padding-left: var(--margin-section);
    padding-right: var(--margin-section);
    border-bottom: 1px solid var(--primary-03);
    margin-bottom: var(--margin-section);
}

#yield-nav-target-cpt { 
    overflow-x: auto;
}

/* 1. Le damos una altura mayor, este será el "espacio" o padding total */
#yield-nav-target-cpt::-webkit-scrollbar {
    height: 18px; /* Ajusta esto si quieres más o menos espacio */
}

/* 2. Fondo transparente */
#yield-nav-target-cpt::-webkit-scrollbar-track {
    background: transparent; 
}

/* 3. El truco del borde transparente */
#yield-nav-target-cpt::-webkit-scrollbar-thumb {
    background-color: var(--primary-07); 
    
    /* Añadimos bordes transparentes arriba y abajo para hacer el "padding" */
    border-top: 15px solid transparent;
    
    /* Esta propiedad es la clave: le dice al color que no pinte sobre los bordes */
    background-clip: padding-box; 
    
}

.yield-tab-trigger {
    padding: var(--padding-int);
    cursor: pointer;
    text-align: center;
    opacity: 0.6;
    border-bottom: 3px solid transparent;
}

.yield-tab-trigger.is-active {
    opacity: 1;
    border-bottom-color: var(--primary);
}

.tab-icon-box {
    width: 76px;
    height: 76px;
    background: var(--gris);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--padding-int);
}

.yield-tab-trigger.is-active .tab-icon-box {
    background: var(--primary);
}

.yield-tab-trigger.is-active img {
    filter: brightness(0) invert(1);
}

.yield-grid {
    display: flex;
    gap: var(--margin-section);
}

.yield-stats {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--margin-section);
    width: 100%;
    flex-wrap: wrap;
}

.yield-stats  .stat-item {
    flex: 1;
}

.stat-number{
    font-family: var(--font-body);
    font-size: var(--size-50);
    color: var(--text-color);
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.16px;
}

.stat-item .et_pb_text_inner{
    font-family: var(--font-body);
    font-size: var(--size-30);
    color: var(--text-color);
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.16px;
}

.yield-content-wrapper .yield-title-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--margin-section);
}

.yield-content-wrapper .yield-title-wrapper .yield-status-container {
    color: var(--primary);
    text-align: right;
    font-family: var(--font-body);
    font-size: var(--size-20);
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.334px;
    min-width: fit-content;
}

#yield-display-strategy p, #yield-display-strategy-cpt{
    font-family: var(--font-body);
    font-size: var(--size-35);
    color: var(--text-color);
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.16px;

}

.tab-title-text {
    font-family: var(--font-title);
    font-weight: 400;
    font-style: Regular;
    font-size: var(--size-20);
    letter-spacing: 0.42px;
    text-align: center;
    color: var(--primary);
    padding-left: var(--padding-small);
}


.yield-content-wrapper .strategy-icon {
   width: 51px;
   height: 51px;
   padding: var(--padding-small);
   background-color: var(--gris);
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
    margin-bottom: var(--padding-int);
}

.yield-status-container {
    display: flex;
    align-items: center;
    gap: var(--padding-small);
}

.status-badge {
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--blanco);
    font-family: var(--font-body);
    font-size: var(--size-16);
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.169px;
}

.status-fully-deployed {
    background-color: #4CAF50; /* Verde */
}

.status-under-deployment {
    background-color: #FBC02D; /* Amarillo */
}

.yield-content-wrapper .title-section::after {
    display: none;
}

.yield-tabs-main .yield-title-wrapper {
    margin-bottom: var(--margin-section);
}

.yield-tabs-main .title-sub {
    line-height: normal;
    font-weight: 400;
    font-size: var(--size-20);
    padding-bottom: var(--padding-int);
    font-family: var(--font-title);
}

.healthcare-activos-titulo {
    padding-top: var(--margin-section) !important;
    padding-bottom: 0 !important;
}


@media screen and (max-width: 980px) { 
    .yield-stats {
        display: flex;
        gap: var(--margin-section);
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .yield-stats .stat-item {
        width: calc(40% - var(--margin-section) / 2);
        flex: none;
        padding-bottom: var(--padding-small);
    }

    .yield-stats .stat-item{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .yield-stats .stat-item #yield-display-strategy {
        width: 100%;
        text-align: center;
    }

    .tab-icon-box {
        height: 50px;
        width: 50px;
    }

    .yield-tabs-main .title-sub {
        padding-bottom: var(--padding-small);
    }

    .tab-title-text {
        display: none;
    }

    .yield-tabs-main .title-section, #yield-display-strategy p, .stat-number, #yield-display-strategy-cpt{
        font-size: var(--size-30) !important;
    }

    .yield-title-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-bottom: calc(var(--margin-section) * 2);
        padding-bottom: var(--margin-section);
    }
}