/* =========================================================
   TAB DINÁMICO V2
   ========================================================= */

   .tab-dinamico-v2 {
    /* width: 100%; */

    margin:
        28px auto
        45px;
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.tab-dinamico-v2__navegacion {
    display: flex;

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

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 24px;
}


/* =========================================================
   BOTÓN / TAB
   ========================================================= */

.tab-dinamico-v2__tab {
    padding:
        10px
        18px;

    border:
        1px solid
        rgba(140, 71, 153, 0.32);

    border-radius: 25px;

    background: #ffffff;
    color: #73377f;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.tab-dinamico-v2__tab:hover {
    transform:
        translateY(-2px);

    border-color:
        #8c4799;

    box-shadow:
        0 5px 14px
        rgba(76, 37, 83, 0.10);
}


.tab-dinamico-v2__tab.is-active {
    background:
        #8c4799;

    border-color:
        #8c4799;

    color:
        #ffffff;

    box-shadow:
        0 6px 16px
        rgba(76, 37, 83, 0.18);
}


.tab-dinamico-v2__tab:focus {
    outline: none;
}


.tab-dinamico-v2__tab:focus-visible {
    box-shadow:
        0 0 0 3px
        rgba(140, 71, 153, 0.28);
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.tab-dinamico-v2__contenidos {
    width: 100%;
}


/* =========================================================
   PANEL
   ========================================================= */

.tab-dinamico-v2__panel {
    position: relative;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;

    padding: 42px 32px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fdfafd 100%
        );

    border:
        1px solid
        rgba(140, 71, 153, 0.18);

    border-radius: 18px;

    box-shadow:
        0 10px 28px
        rgba(76, 37, 83, 0.08);
}


/* Línea superior degradada */

.tab-dinamico-v2__panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 3px;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d4a0dc,
            #a34aa9,
            #8e2d97,
            #a34aa9,
            #d4a0dc,
            transparent
        );
}


.tab-dinamico-v2__panel[hidden] {
    display: none !important;
}


/* =========================================================
   IMAGEN
   ========================================================= */

.tab-dinamico-v2__imagen {
    width: 100%;

    text-align: center;
}


.tab-dinamico-v2__imagen img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    margin: 0 auto;

    border-radius: 10px;
}


/*
 * También controla imágenes que vienen
 * directamente dentro del HTML de la BD.
 */

.tab-dinamico-v2__imagen image {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    margin: 0 auto;
}


/* =========================================================
   DOCUMENTO PDF
   ========================================================= */

.tab-dinamico-v2__documento {
    display: flex;

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

    gap: 42px;

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

    margin: 0 auto;

    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;
}

/* =========================================================
   PORTADA DEL DOCUMENTO
   ========================================================= */

   .tab-dinamico-v2__portada {
    position: relative;

    display: block;

    flex: 0 0 auto;

    width: 330px;

    overflow: hidden;

    border-radius: 12px;

    background: #ffffff;

    text-decoration: none !important;

    box-shadow:
        0 12px 30px
        rgba(45, 19, 50, 0.16);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.tab-dinamico-v2__portada img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 470px;

    object-fit: contain;

    margin: 0 auto;

    transition:
        transform 0.35s ease;
}


/* Línea violeta sobre la portada */

.tab-dinamico-v2__portada::before {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;
    right: 10%;

    height: 3px;

    z-index: 2;

    pointer-events: none;
}


/* Hover */

.tab-dinamico-v2__portada:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 16px 36px
        rgba(45, 19, 50, 0.20);
}


.tab-dinamico-v2__portada:hover img {
    transform:
        scale(1.02);
}


/* Focus teclado */

.tab-dinamico-v2__portada:focus {
    outline: none;
}


.tab-dinamico-v2__portada:focus-visible {
    box-shadow:
        0 0 0 4px
        rgba(140, 71, 153, 0.30),
        0 16px 36px
        rgba(45, 19, 50, 0.20);
}


/* =========================================================
   ICONO PDF
   ========================================================= */

.tab-dinamico-v2__documento-icono {
    display: flex;

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

    flex: 0 0 72px;

    width: 72px;
    height: 88px;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #8c4799,
            #713478
        );

    color:
        #ffffff;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: 1px;

    box-shadow:
        0 8px 18px
        rgba(76, 37, 83, 0.18);
}


/* =========================================================
   INFORMACIÓN DEL DOCUMENTO
   ========================================================= */

.tab-dinamico-v2__documento-contenido {
    flex: 0 1 330px;

    width: 300px;
    max-width: 100%;

    text-align: left;
}


.tab-dinamico-v2__documento-titulo {
    margin:
        0 0
        20px;

    color:
        #6f347b;

    font-size:
        26px;

    font-weight:
        600;

    line-height:
        1.35;
}


.tab-dinamico-v2__documento-texto {
    margin:
        0 0
        20px;

    color:
        #666666;

    font-size:
        15px;

    line-height:
        1.6;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.tab-dinamico-v2__boton {
    display: inline-block;

    padding:
        10px
        22px;

    border:
        2px solid
        #8c4799;

    border-radius:
        25px;

    background:
        #8c4799;

    color:
        #ffffff !important;

    font-weight:
        600;

    text-decoration:
        none !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.tab-dinamico-v2__boton:hover,
.tab-dinamico-v2__boton:focus {
    background:
        #ffffff;

    color:
        #8c4799 !important;

    transform:
        translateY(-2px);

    outline:
        none;
}


/* =========================================================
   ENLACE ADICIONAL
   ========================================================= */

.tab-dinamico-v2__enlace {
    margin-top:
        22px;

    text-align:
        center;
}

/* =========================================================
   TIPO DE DOCUMENTO
   ========================================================= */

   .tab-dinamico-v2__documento-tipo {
    display: inline-block;

    margin-bottom: 12px;

    padding: 4px 10px;

    border-radius: 20px;

    background:
        #f5eaf7;

    color:
        #8c4799;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.1px;
}

/* =========================================================
   TEXTO / HTML
   ========================================================= */

.tab-dinamico-v2__texto {
    color:
        #555555;

    font-size:
        15px;

    line-height:
        1.7;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .tab-dinamico-v2__panel {
        padding: 30px 24px;
    }


    .tab-dinamico-v2__documento {
        max-width: 720px;

        gap: 32px;
    }


    .tab-dinamico-v2__portada {
        width: 300px;
    }


    .tab-dinamico-v2__portada img {
        max-height: 430px;
    }


    .tab-dinamico-v2__documento-contenido {
        flex-basis: 280px;

        width: 280px;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 767px) {

    .tab-dinamico-v2 {
        margin:
            20px auto
            35px;
    }


    .tab-dinamico-v2__navegacion {
        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            8px;
    }


    .tab-dinamico-v2__tab {
        width:
            100%;
    }


    .tab-dinamico-v2__panel {
        max-width: 100%;

        padding: 28px 18px;
    
        border-radius: 14px;
    }


    .tab-dinamico-v2__documento {
        flex-direction: column;

        gap: 24px;

        width: 100%;

        margin: 0 auto;

        padding: 0;

        text-align: center;
    }


    .tab-dinamico-v2__documento-contenido {
        flex: none;

        width: 100%;
        max-width: 360px;

        margin: 0 auto;

        text-align: center;
    }



    .tab-dinamico-v2__boton {
        width: 100%;

        text-align: center;
    }

    .tab-dinamico-v2__portada {
        width: 100%;
        max-width: 260px;

        margin: 0 auto;
    }
    
    
    .tab-dinamico-v2__portada img {
        max-height: 370px;
    }
    
    
}



/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .tab-dinamico-v2__tab,
    .tab-dinamico-v2__boton,
    .tab-dinamico-v2__portada,
    .tab-dinamico-v2__portada img {
        transition: none;
    }

}