/* TABS SUPERIORES */
.inv-tabs-nav {
    display: flex;
    justify-content: center;
    gap: var(--margin-section);
    margin-bottom: var(--margin-section);
    border-bottom: 1px solid var(--primary-03);
    padding: 0 var(--margin-section);
}


.inv-tab-btn {
    background: none; border: none; cursor: pointer;
    padding: var(--padding-int) var(--padding-int);
    color: var(--gris-tabs);
    text-align: center;
    font-family: var(--font-title);
    font-size: var(--size-18);
    letter-spacing: -0.357px;
    position: relative;
}

.inv-tab-btn.is-active {
    color: var(--primary); /* O el color de énfasis de tu :root */
}

.inv-tab-btn.is-active::after {
    content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--primary);
}

/* CONTENEDOR DE IMÁGENES QUE SE ABREN */
.inv-panels-wrapper {
    display: flex;
    gap: calc(var(--padding-small) / 2);
    height: 680px;
    width: 100%;
}

.inv-panel {
    flex: 1;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    transition: flex 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.inv-panel.is-active {
    flex: 10; /* Aquí es donde "se abre" la imagen */
    border-radius: 0;
}

.inv-panel.is-active .inv-panel-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        270deg,
        rgba(0, 0, 0, 0.40) 4.97%,
        rgba(0, 0, 0, 0.00) 50.41%,
        rgba(0, 0, 0, 0.00) 95.84%
    );
    pointer-events: none;
}

.inv-panel-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* LA TARJETA BLANCA INTERIOR */
.inv-panel-card {
    opacity: 0;
    position: absolute;
    top:  50%;
    left: var(--margin-section);
    background: var(--blanco);
    padding: var(--margin-section);
    border-radius: var(--radius);
    height: 0;
    width: 0;
    
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
}

.inv-panel.is-active .inv-panel-card  {
    
    max-width: calc(100% - var(--margin-section) * 2);
    width: 600px;
    height: auto;
    opacity: 1;
    transition-delay: .7s;
    /*transition: opacity 0.2s ease;*/
}

/* TUS ESTILOS DE TEXTO ESPECÍFICOS */
.inv-title {
    color: var(--primary);
    font-family: var(--font-title);
    font-size: var(--size-24);
    font-weight: 400;
    line-height: 34.306px;
    margin-bottom: 15px;
}

.inv-text {
    color: var(--gris-oscuro);
    font-family: var(--font-body);
    font-size: var(--size-18);
    font-weight: 400;
    letter-spacing: -0.357px;
}

/* media queries */
@media (max-width: 980px) { 
    #investmentmodel .et_pb_text_inner, #investmentmodel .et_pb_text_inner p  {
        text-align: center;
    }

    .inv-tabs-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-bottom: none;
        gap: var(--padding-small);
    }

    .inv-tab-btn.is-active, .inv-tab-btn  {
        color: var(--primary);
    }

     .inv-tab-btn.is-active {
        background: var(--gris-acordeon);
     }

    .inv-tab-btn.is-active::after {
        display: none;
    }

    .inv-tab-btn {
        width: 100%;
        border-radius: var(--radius);
        border:1px solid var(--primary);
        font-size: var(--size-13);
        padding: var(--padding-small);
    }

    .inv-panel {
        display: none;
    }

    .inv-text {
        font-size: var(--size-13);
    }
    
    .inv-panel.is-active {
        display: block;
        flex:1;
        width: 100%;
    }

    .inv-panel.is-active .inv-panel-card {
        width: calc(100% - var(--padding-int) * 2);
        max-width: calc(100% - var(--padding-int) * 2);
        left: var(--padding-int);
        padding: var(--padding-int) var(--margin-section);
    }

    .inv-panels-wrapper {
        height: 500px;
    }
}