/* FLAUTEA RESPIRACION ESTUDIO V3 */


/* =========================================================
   BASE GENERAL
   ========================================================= */

.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"]
) {
    background:#FBFAF7;
    padding:10px 0 55px;
}

.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"]
)
.container {
    max-width:980px;
}


/* =========================================================
   TEXTO DE ESTUDIO
   ========================================================= */

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

    max-width:820px;

    margin:
        4px
        auto
        18px;

    font-family:
        Arial,
        sans-serif;

    font-size:16px;

    line-height:1.58;

    color:#334B50;
}


/*
 * Los bloques guardan los párrafos mediante saltos de línea.
 * Reducimos la separación visual entre ellos.
 */

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

    display:block;

    content:"";

    margin-top:5px;
}


/* =========================================================
   TÍTULOS H2
   ========================================================= */

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

    max-width:820px;

    margin:
        28px
        auto
        9px;
}


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

    position:relative;

    padding-left:18px;

    margin:0;

    font-family:
        'Nunito',
        Arial,
        sans-serif;

    font-size:
        clamp(
            25px,
            3vw,
            32px
        );

    line-height:1.15;

    font-weight:900;

    letter-spacing:-.025em;

    color:#102F36;
}


/*
 * Línea vertical elegante en vez de icono grande
 */

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

    content:"";

    position:absolute;

    left:0;
    top:3px;

    width:5px;
    height:calc(100% - 5px);

    min-height:27px;

    border-radius:999px;

    background:#21A6A1;
}


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

    display:none;
}


/* =========================================================
   SUBTÍTULOS / 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"]
)
h3.system-extra-heading {

    position:relative;

    padding-left:32px;

    margin:0;

    font-size:18px;

    font-weight:900;

    line-height:1.3;

    color:#12363D;
}


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

    content:"✓";

    position:absolute;

    left:0;
    top:0;

    width:22px;
    height:22px;

    display:flex;

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

    border-radius:7px;

    background:#E3F5F3;

    color:#168A85;

    font-size:12px;

    font-weight:900;
}


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

    max-width:880px;

    margin:
        20px
        auto
        26px;

    padding:24px;

    gap:28px;

    border:
        1px solid
        #E1E7E5;

    border-radius:16px;

    background:#FFFFFF;

    box-shadow:
        0 8px 24px
        rgba(18,54,61,.045);
}


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

    display:none;
}


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

    margin:
        0
        0
        8px;

    font-family:
        'Nunito',
        Arial,
        sans-serif;

    font-size:20px;

    line-height:1.25;

    font-weight:900;

    color:#12363D;
}


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

    line-height:1.57;

    color:#435B60;
}


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

    object-fit:contain;

    padding:8px;

    border:0;

    border-radius:12px;

    background:#FFFFFF;
}


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

    position:relative;

    max-width:820px;

    margin:
        18px
        auto
        24px;

    padding:
        19px
        22px
        19px
        58px;

    border-radius:14px;

    background:#12363D;

    color:#FFFFFF;

    font-size:15px;

    line-height:1.55;

    box-shadow:none;
}


.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:"i";

    position:absolute;

    left:19px;
    top:18px;

    width:25px;
    height:25px;

    display:flex;

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

    border-radius:50%;

    background:#21A6A1;

    color:white;

    font-family:Georgia,serif;

    font-size:15px;

    font-weight:bold;
}


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

    max-width:820px;

    margin:
        4px
        auto
        18px;

    padding:
        16px
        18px;

    border:
        1px solid
        #E0E7E5;

    border-left:
        3px solid
        #21A6A1;

    border-radius:
        0
        10px
        10px
        0;

    background:#FFFFFF;

    box-shadow:none;

    font-size:15px;

    line-height:1.55;
}


/* =========================================================
   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-wrap {

    max-width:820px;

    padding-top:20px;
    padding-bottom: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-separator.color-turquoise {

    height:2px;

    width:80px;

    background:#21A6A1;

    box-shadow:none;
}


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

    background:#DDE4E2;
}


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

    max-width:880px;

    margin:
        24px
        auto
        28px;

    padding:22px;

    border:
        1px solid
        #E0E7E5;

    border-radius:16px;

    background:#FFFFFF;

    box-shadow:
        0 8px 24px
        rgba(18,54,61,.045);
}


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

    content:"▶  VÍDEO";

    display:inline-block;

    margin-bottom:10px;

    padding:
        4px
        9px;

    border-radius:6px;

    background:#E3F5F3;

    color:#147A76;

    font-size:10px;

    font-weight:900;

    letter-spacing:.08em;
}


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

    font-family:
        'Nunito',
        Arial,
        sans-serif;

    font-size:21px;

    font-weight:900;

    color:#12363D;
}


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

    box-shadow:none;
}


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

    font-size:14px;

    line-height:1.5;

    color:#66777A;
}


/* =========================================================
   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-wrap {

    max-width:820px;

    margin:
        12px
        auto
        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 {

    padding:
        13px
        23px;

    border-radius:10px;

    font-size:14px;

    font-weight:900;

    box-shadow:none;
}


/* =========================================================
   ESPACIADO
   ========================================================= */

.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:17px;
    margin-bottom:7px;
}


.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:26px;
    margin-bottom:8px;
}


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

    margin-top:34px;
    margin-bottom: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.spacing-small {

    margin-top:3px;
    margin-bottom:11px;
}


.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-top:4px;
    margin-bottom:18px;
}


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

    margin-top:15px;
    margin-bottom:25px;
}


/* =========================================================
   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:40px;
    }


    .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"]
)
    .container {

        padding-left:18px;
        padding-right:18px;
    }


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


    .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;
    }


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

        gap:16px;

        border-radius:13px;
    }


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


    .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:
            17px
            17px
            17px
            52px;
    }


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

}