/*
|--------------------------------------------------------------------------
| Flautea · Técnica · Respiración
|--------------------------------------------------------------------------
*/

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
) {
    padding-top:18px;
    padding-bottom:70px;
}


/* Lectura más cómoda */

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-text.width-normal {
    max-width:900px;
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-text {
    font-size:1.02rem;
    line-height:1.9;
}


/* Títulos */

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-heading-wrap {
    margin-top:15px;
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-heading {
    letter-spacing:-.025em;
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
h2.system-extra-heading {
    font-size:clamp(
        1.8rem,
        3vw,
        2.45rem
    );
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
h3.system-extra-heading {
    font-size:1.28rem;
}


/*
|--------------------------------------------------------------------------
| Bloques imagen + texto
|--------------------------------------------------------------------------
*/

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-text-image {
    gap:45px;
    padding:38px;
    border:1px solid rgba(18,54,61,.08);
    border-radius:26px;

    box-shadow:
        0 18px 50px
        rgba(18,54,61,.06);
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-text-image h2 {
    font-size:1.7rem;
    line-height:1.2;
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-text-image > div > div {
    font-size:1rem;
    line-height:1.85;
}


/*
 * Los esquemas anatómicos no deben recortarse.
 */

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-text-image img {
    width:100%;
    max-height:460px;

    object-fit:contain;

    padding:14px;

    background:#FFFFFF;

    border:1px solid
        rgba(18,54,61,.08);

    border-radius:20px;
}


/* Tarjeta marfil */

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-text-image.background-ivory {
    background:
        linear-gradient(
            135deg,
            #F4F1EB 0%,
            #FAF9F6 100%
        );
}


/*
|--------------------------------------------------------------------------
| Consejo destacado
|--------------------------------------------------------------------------
*/

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-text.background-petrol {
    position:relative;

    max-width:900px;

    padding:
        34px
        40px
        34px
        52px;

    border-radius:22px;

    font-size:1.05rem;

    box-shadow:
        0 20px 50px
        rgba(11,35,41,.14);
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-text.background-petrol::before {
    content:"♪";

    position:absolute;

    top:30px;
    left:20px;

    color:#21A6A1;

    font-size:1.4rem;
    font-weight:900;
}


/*
|--------------------------------------------------------------------------
| Ejercicios
|--------------------------------------------------------------------------
*/

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-text.background-ivory {
    padding:26px 30px;

    border:
        1px solid
        rgba(18,54,61,.07);

    border-radius:18px;

    box-shadow:
        0 10px 32px
        rgba(18,54,61,.04);
}


/*
|--------------------------------------------------------------------------
| Vídeo
|--------------------------------------------------------------------------
*/

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-video {
    padding:
        35px
        38px
        38px;

    background:#FFFFFF;

    border:
        1px solid
        rgba(18,54,61,.08);

    border-radius:26px;

    box-shadow:
        0 20px 55px
        rgba(18,54,61,.08);
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-video h2 {
    margin-bottom:20px;

    font-size:1.65rem;
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-video-frame {
    border-radius:18px;

    box-shadow:
        0 14px 35px
        rgba(11,35,41,.16);
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-video-description {
    margin-top:17px;

    font-size:.92rem;
    line-height:1.7;
}


/*
|--------------------------------------------------------------------------
| Separadores
|--------------------------------------------------------------------------
*/

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-separator.color-turquoise {
    box-shadow:
        0 0 0 4px
        rgba(33,166,161,.08);
}


/*
|--------------------------------------------------------------------------
| Botón final
|--------------------------------------------------------------------------
*/

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-button-wrap.align-center {
    margin-top:20px;
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-button.size-large {
    min-width:230px;

    padding:
        16px
        29px;

    box-shadow:
        0 12px 30px
        rgba(33,166,161,.22);
}

.system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
.system-extra-button.size-large:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 16px 35px
        rgba(33,166,161,.28);
}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media(max-width:800px) {

    .system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
) {
        padding-bottom:45px;
    }

    .system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
    .system-extra-text-image {
        gap:25px;
        padding:24px 20px;
        border-radius:20px;
    }

    .system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
    .system-extra-text-image img {
        max-height:360px;
        padding:10px;
    }

    .system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
    .system-extra-text.background-petrol {
        padding:
            28px
            23px
            28px
            46px;
    }

    .system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
    .system-extra-text.background-ivory {
        padding:22px 20px;
    }

    .system-extra-blocks:is(
    [data-system-page="technique.breathing"],
    [data-system-page="technique.sound"],
    [data-system-page="technique.embouchure"],
    [data-system-page="technique.articulation"],
    [data-system-page="technique.fingering"]
)
    .system-extra-video {
        padding:22px 18px 24px;
        border-radius:20px;
    }

}