/* =========================================================
   FLAUTEA · RESPIRACIÓN · ACABADO FINAL
   ========================================================= */


/* Texto principal */

.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-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:16.5px;
    line-height:1.58;
    color:#31484D;
}


/* Mejor contraste de 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"]
)
h2.system-extra-heading {

    color:#102F36;

    font-size:
        clamp(
            1.55rem,
            2.6vw,
            1.95rem
        );

    font-weight:900;

    letter-spacing:-.03em;
}


.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 {

    color:#176F6C;

    font-size:1.06rem;

    font-weight:900;
}


/* Número de sección algo más elegante */

.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::before {

    background:
        linear-gradient(
            135deg,
            #12363D,
            #1C555B
        );

    border-radius:8px;

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


/* Texto + imagen */

.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:#FFFFFF;

    border:
        1px solid
        #E3E9E7;

    border-radius:14px;

    padding:21px;

    gap:22px;
}


.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 {

    color:#12363D;

    font-size:1.22rem;

    font-weight:900;

    line-height:1.25;
}


.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 {

    color:#40575C;

    font-size:15.5px;

    line-height:1.56;
}


/* Imagen más limpia */

.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:300px;

    padding:6px;

    border-radius:10px;

    background:#FFFFFF;
}


/* CONSEJO */

.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 {

    background:#12363D;

    border-left:
        5px solid
        #21A6A1;

    border-radius:
        0
        12px
        12px
        0;

    padding:
        17px
        20px
        17px
        56px;

    font-size:15px;

    line-height:1.55;
}


/* FICHAS DE 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 {

    position:relative;

    padding:
        15px
        17px;

    border:
        1px solid
        #E1E8E6;

    border-left:
        4px solid
        #21A6A1;

    border-radius:
        0
        10px
        10px
        0;

    background:#FFFFFF;

    color:#374E53;

    font-size:15.5px;

    line-height:1.53;
}


/* Vídeo más integrado */

.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 {

    background:#FFFFFF;

    border:
        1px solid
        #E1E8E6;

    border-radius:14px;

    padding:19px;
}


.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 {

    font-size:1.22rem;

    color:#12363D;

    margin-bottom:11px;
}


/* Índice */

.flautea-study-index {

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #FAFBF9
        );

    border:
        1px solid
        #E1E8E6;

    box-shadow:none;
}


.flautea-study-index-icon {

    background:#12363D;

    color:#FFFFFF;
}


.flautea-study-index-link {

    background:#F5F7F5;

    color:#27494F;

    border:
        1px solid
        #E7ECEA;
}


.flautea-study-index-link span {

    color:#21A6A1;

    font-weight:900;
}


/* Menos hueco entre bloques */

.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.spacing-normal {

    margin-top:21px;
    margin-bottom:6px;
}


.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.spacing-small {

    margin-top:14px;
    margin-bottom:5px;
}


.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.spacing-normal {

    margin-bottom:14px;
}


.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.spacing-small {

    margin-bottom:9px;
}


/* CTA 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 {

    border-radius:9px;

    font-size:14px;

    font-weight:900;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.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:hover {

    transform:translateY(-1px);
}


/* 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"]
)
    .system-extra-text {

        font-size:15.5px;

        line-height:1.55;
    }


    .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 {

        padding:17px;

        gap: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-text-image img {

        max-height:235px;
    }

}