/* ==================================================
RESET
================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'DM Sans',sans-serif;

    color:#242234;
    background:#ffffff;

    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}



/* ==================================================
VARIABLES
================================================== */

:root{

    --music-deep:#173f82;
    --music-blue:#2867b2;
    --music-sky:#58afe3;
    --music-cyan:#67d5d0;
    --music-aqua:#80e1d3;
    --music-indigo:#5752b8;
    --music-bluepurple:#4f63c9;

    --kiru-magenta:#c51e78;
    --kiru-purple:#71328e;
    --kiru-deep:#29204a;

    --kiru-blue:#285ca8;
    --kiru-sky:#61b6e8;

    --kiru-yellow:#f4c542;

    --surface:#f7f5fa;
    --surface-blue:#f3f8fd;

    --muted:#726c7e;

    --border:
        rgba(41,32,74,.10);

    --music-gradient:
    linear-gradient(
        135deg,
        #173f82 0%,
        #2867b2 32%,
        #4f8fd0 62%,
        #61b6e8 100%
    );

    --kiru-gradient:
        linear-gradient(
            135deg,
            #c51e78,
            #71328e 55%,
            #29204a
        );

}



/* ==================================================
HEADER
================================================== */

.discipline-header{
    position:sticky;

    top:0;

    z-index:1000;

    background:
        rgba(255,255,255,.92);

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid var(--border);
}


.discipline-nav{
    width:100%;
    max-width:1280px;

    min-height:82px;

    margin:auto;
    padding:0 28px;

    display:flex;
    align-items:center;

    gap:28px;
}



.discipline-logo{
    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;
}


.discipline-logo img{
    width:56px;
    height:56px;

    object-fit:contain;
}


.discipline-logo div{
    display:flex;

    flex-direction:column;
}


.discipline-logo strong{
    font-family:
        'Manrope',
        sans-serif;

    letter-spacing:.08em;

    color:
        var(--kiru-deep);
}


.discipline-logo span{
    margin-top:3px;

    font-size:.76rem;

    color:
        var(--muted);
}



.discipline-menu{
    display:flex;
    align-items:center;

    gap:28px;

    margin-left:auto;
}


.discipline-menu a{
    position:relative;

    font-size:.92rem;

    font-weight:600;

    transition:.3s ease;
}


.discipline-menu a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-7px;

    width:0;

    height:2px;

    background:
        var(--kiru-blue);

    transition:.3s ease;
}


.discipline-menu a:hover{
    color:
        var(--kiru-blue);
}


.discipline-menu a:hover::after{
    width:100%;
}



.discipline-header-cta{
    display:flex;

    align-items:center;

    gap:9px;

    padding:
        13px 18px;

    border-radius:10px;

    color:white;

    font-weight:700;

    font-size:.9rem;

    background:
        var(--music-gradient);

    transition:.35s ease;

    box-shadow:
        0 10px 25px
        rgba(40,92,168,.18);
}


.discipline-header-cta:hover{
    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(40,92,168,.26);
}

/* ==================================================
BUSCADOR DE CURSOS
================================================== */

.discipline-search{
    position:relative;

    width:220px;

    margin-left:10px;
}


.discipline-search-box{
    height:46px;

    display:flex;
    align-items:center;

    gap:9px;

    padding:0 14px;

    border:
        1px solid rgba(40,103,178,.16);

    border-radius:12px;

    background:#f7fbff;

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


.discipline-search-box:focus-within{
    border-color:
        var(--music-blue);

    background:white;

    box-shadow:
        0 10px 28px
        rgba(40,103,178,.13);
}


.discipline-search-box i{
    color:
        var(--music-blue);

    font-size:.95rem;
}


.discipline-search-box input{
    width:100%;

    border:none;
    outline:none;

    background:transparent;

    color:
        var(--kiru-deep);

    font-size:.88rem;
}


.discipline-search-box input::placeholder{
    color:#8c91a0;
}


/* RESULTADOS */

.discipline-search-results{
    position:absolute;

    top:55px;
    right:0;

    width:260px;

    overflow:hidden;

    border-radius:13px;

    background:white;

    box-shadow:
        0 18px 45px
        rgba(23,63,130,.15);

    z-index:100;
}


.discipline-search-results:empty{
    display:none;
}


.music-search-result{
    display:flex;

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

    padding:13px 15px;

    border-bottom:
        1px solid rgba(40,103,178,.08);

    transition:
        .3s ease;
}


.music-search-result:last-child{
    border-bottom:none;
}


.music-search-result:hover{
    color:white;

    padding-left:20px;

    background:
        linear-gradient(
            135deg,
            var(--music-deep),
            var(--music-blue),
            var(--music-sky)
        );
}


.music-search-result strong{
    font-size:.86rem;
}


.music-search-result span{
    display:block;

    margin-top:2px;

    font-size:.7rem;

    opacity:.68;
}

/* ==================================================
HERO
================================================== */

.discipline-hero{
    position:relative;

    min-height:680px;

    padding:
        90px 7%;

    display:grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items:center;

    gap:70px;

    overflow:hidden;
}



.music-theme{
    background:

        radial-gradient(
            circle at 77% 16%,
            rgba(103,213,208,.20),
            transparent 24%
        ),

        radial-gradient(
            circle at 92% 70%,
            rgba(87,82,184,.12),
            transparent 28%
        ),

        radial-gradient(
            circle at 4% 82%,
            rgba(40,103,178,.13),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            #f9fcff,
            #f2f8ff 48%,
            #eefaff
        );
}



.discipline-back{
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:35px;

    color:
        var(--muted);

    font-size:.86rem;

    font-weight:600;

    transition:.3s ease;
}


.discipline-back:hover{
    color:
        var(--kiru-blue);

    transform:
        translateX(-4px);
}



.discipline-eyebrow{
    display:inline-block;

    margin-bottom:17px;

    color:
        var(--kiru-blue);

    font-size:.76rem;

    font-weight:800;

    letter-spacing:.18em;
}



.discipline-hero h1{
    max-width:720px;

    font-family:
        'Manrope',
        sans-serif;

    font-size:
        clamp(
            3.7rem,
            6vw,
            6.6rem
        );

    line-height:.94;

    letter-spacing:
        -.065em;

    color:
        var(--kiru-deep);
}


.discipline-hero h1 span{
    color:transparent;

    background:
        var(--music-gradient);

    background-clip:text;

    -webkit-background-clip:text;
}



.discipline-hero-content > p{
    max-width:620px;

    margin-top:28px;

    font-size:1.08rem;

    line-height:1.8;

    color:
        var(--muted);
}



.discipline-hero-actions{
    display:flex;

    flex-wrap:wrap;

    gap:13px;

    margin-top:32px;
}



.discipline-btn{
    min-height:52px;

    padding:
        0 22px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:10px;

    font-weight:700;

    transition:.35s ease;
}


.discipline-btn:hover{
    transform:
        translateY(-4px);
}



.discipline-btn.primary{
    color:white;

    background:
        var(--music-gradient);

    box-shadow:
        0 15px 35px
        rgba(40,92,168,.20);
}



.discipline-btn.secondary{
    color:
        var(--kiru-deep);

    border:
        1px solid var(--border);

    background:white;
}



.discipline-hero-details{
    margin-top:38px;

    display:flex;

    flex-wrap:wrap;

    gap:
        15px 25px;
}


.discipline-hero-details span{
    display:flex;

    align-items:center;

    gap:8px;

    color:
        var(--muted);

    font-size:.88rem;
}


.discipline-hero-details i{
    color:
        var(--kiru-blue);
}



/* ==================================================
HERO ARTE - MÚSICA / VINILO
================================================== */

.discipline-hero-art{
    position:relative;

    min-height:520px;

    display:flex;
    align-items:center;
    justify-content:center;
}


/* CONTENEDOR */

.music-hero-art{
    position:relative;

    min-height:520px;

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

    isolation:isolate;
}


/* VINILO */

.music-vinyl{
    position:relative;

    z-index:4;

    width:390px;
    height:390px;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle at center,
            #58c7cf 0 10%,
            #397dbf 11% 18%,
            #183f7e 19% 25%,
            #102c5e 26% 100%
        );

    box-shadow:
        0 35px 70px rgba(23,63,130,.27);

    transition:
        transform 1.2s cubic-bezier(.22,1,.36,1);
}


.music-vinyl:hover{
    transform:
        rotate(12deg)
        scale(1.02);
}


/* SURCOS */

.vinyl-groove{
    position:absolute;

    border-radius:50%;

    border:
        1px solid rgba(117,224,221,.18);

    pointer-events:none;
}


.groove-one{
    width:330px;
    height:330px;
}


.groove-two{
    width:275px;
    height:275px;
}


.groove-three{
    width:215px;
    height:215px;
}


/* CENTRO */

.vinyl-center{
    position:relative;

    z-index:3;

    width:125px;
    height:125px;

    display:flex;
    flex-direction:column;

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

    border-radius:50%;

    color:white;

    background:
        linear-gradient(
            145deg,
            #2867b2,
            #58afe3,
            #67d5d0
        );

    box-shadow:
        inset 0 0 30px rgba(255,255,255,.12);
}


.vinyl-center > i{
    font-size:2.4rem;
}


.vinyl-center span{
    margin-top:6px;

    display:flex;
    flex-direction:column;

    align-items:center;

    font-family:
        'Manrope',
        sans-serif;

    font-size:.8rem;
    font-weight:800;

    letter-spacing:.08em;
}


.vinyl-center strong{
    margin-top:2px;

    font-size:.52rem;

    letter-spacing:.2em;

    opacity:.72;
}


/* AGUJA */

.vinyl-arm{
    position:absolute;

    z-index:6;

    width:125px;
    height:22px;

    right:9%;
    top:25%;

    border-radius:30px;

    background:
        linear-gradient(
            90deg,
            #d6e9f6,
            #8fb7d3
        );

    transform:rotate(48deg);

    transform-origin:right center;

    box-shadow:
        0 7px 15px rgba(23,63,130,.12);
}


.vinyl-arm::before{
    content:"";

    position:absolute;

    right:-10px;
    top:-11px;

    width:42px;
    height:42px;

    border-radius:50%;

    background:#244f85;
}


.vinyl-arm span{
    position:absolute;

    left:-8px;
    top:4px;

    width:18px;
    height:15px;

    border-radius:4px;

    background:#67d5d0;
}


/* ONDAS EXTERIORES */

.music-wave{
    position:absolute;

    z-index:1;

    border-radius:50%;

    border:
        1px solid rgba(40,103,178,.14);
}


.music-wave-one{
    width:465px;
    height:465px;
}


.music-wave-two{
    width:535px;
    height:535px;

    border-color:
        rgba(103,213,208,.15);
}


.music-wave-three{
    width:605px;
    height:605px;

    border-color:
        rgba(87,82,184,.08);
}


/* TARJETAS FLOTANTES */

.music-floating{
    position:absolute;

    z-index:7;

    min-width:145px;

    padding:14px 17px;

    display:flex;
    align-items:center;

    gap:11px;

    border-radius:13px;

    background:
        rgba(255,255,255,.94);

    border:
        1px solid rgba(255,255,255,.7);

    box-shadow:
        0 15px 35px rgba(41,32,74,.10);

    color:
        var(--kiru-deep);

    font-size:.84rem;
    font-weight:700;

    transition:.35s ease;
}


.music-floating:hover{
    transform:translateY(-5px);
}


.music-floating i{
    width:38px;
    height:38px;

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

    border-radius:10px;

    color:
        var(--music-blue);

    background:
        rgba(40,103,178,.08);

    font-size:1.1rem;
}


.floating-one{
    left:3%;
    top:17%;
}


.floating-two{
    right:-2%;
    top:42%;
}


.floating-three{
    left:5%;
    bottom:14%;
}

/* ==================================================
INTRO
================================================== */

.discipline-intro{
    padding:
        120px 7%;

    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:100px;

    background:white;
}



.discipline-intro-title > span,
.courses-heading > span,
.method-heading > span{
    display:inline-block;

    margin-bottom:14px;

    font-size:.75rem;

    font-weight:800;

    letter-spacing:.18em;

    color:
        var(--kiru-blue);
}


.discipline-intro-title h2,
.courses-heading h2,
.method-heading h2{
    font-family:
        'Manrope',
        sans-serif;

    font-size:
        clamp(
            2.5rem,
            4.5vw,
            4.7rem
        );

    line-height:1;

    letter-spacing:
        -.05em;

    color:
        var(--kiru-deep);
}



.discipline-intro-content > p{
    max-width:650px;

    margin-bottom:18px;

    color:
        var(--muted);

    font-size:1rem;

    line-height:1.8;
}



.intro-stats{
    margin-top:40px;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:12px;
}


.intro-stats div{
    padding:
        22px 18px;

    border-radius:14px;

    background:
        var(--surface-blue);

    border:
        1px solid
        rgba(40,92,168,.08);
}


.intro-stats strong{
    display:block;

    font-family:
        'Manrope',
        sans-serif;

    font-size:1.8rem;

    color:
        var(--kiru-blue);
}


.intro-stats span{
    display:block;

    margin-top:4px;

    color:
        var(--muted);

    font-size:.8rem;
}



/* ==================================================
CURSOS
================================================== */

.courses-section{
    padding:
        120px 7%;

    background:
        var(--surface-blue);
}



.courses-heading{
    max-width:720px;

    margin-bottom:55px;
}


.courses-heading p{
    max-width:580px;

    margin-top:20px;

    color:
        var(--muted);

    line-height:1.7;
}



.courses-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}



.course-card{
    position:relative;

    min-height:355px;

    padding:
        30px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:18px;

    border:
        1px solid
        rgba(40,92,168,.09);

    background:white;

    transition:
        transform .65s
        cubic-bezier(.22,1,.36,1),

        box-shadow .65s
        cubic-bezier(.22,1,.36,1),

        background .65s ease;
}



.course-card:hover{
    transform:
        translateY(-8px);

    box-shadow:
        0 22px 50px
        rgba(40,92,168,.13);
}



.course-card::after{
    content:"";

    position:absolute;

    width:170px;
    height:170px;

    right:-85px;
    bottom:-85px;

    border-radius:50%;

    background:
        var(--kiru-blue);

    opacity:.035;
}



.course-card-number{
    position:absolute;

    top:16px;
    right:20px;

    font-family:
        'Manrope',
        sans-serif;

    font-size:4rem;

    font-weight:800;

    color:
        var(--kiru-blue);

    opacity:.08;
}



.course-card-icon{
    width:52px;
    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:13px;

    color:
        var(--kiru-blue);

    background:
        rgba(40,92,168,.09);

    font-size:1.4rem;
}



.course-category{
    font-size:.7rem;

    font-weight:800;

    letter-spacing:.16em;

    color:
        var(--kiru-blue);
}



.course-card h3{
    margin-top:9px;

    font-family:
        'Manrope',
        sans-serif;

    font-size:1.75rem;

    color:
        var(--kiru-deep);
}



.course-card p{
    margin-top:13px;

    max-width:340px;

    color:
        var(--muted);

    font-size:.92rem;

    line-height:1.65;
}



.course-card-footer{
    position:relative;

    z-index:2;

    margin-top:auto;

    padding-top:25px;
}



.course-more{
    display:flex;

    align-items:center;

    justify-content:
        space-between;

    padding-top:17px;

    border-top:
        1px solid var(--border);

    font-size:.88rem;

    font-weight:700;

    color:
        var(--kiru-deep);

    transition:.3s ease;
}



.course-more i{
    width:38px;
    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        var(--surface-blue);

    color:
        var(--kiru-blue);

    transition:.35s ease;
}



.course-card:hover
.course-more i{
    transform:
        translate(
            4px,
            -4px
        );

    color:white;

    background:
        var(--kiru-blue);
}

/* CONTENIDO BLANCO AL HACER HOVER */

.course-card:hover .course-card-number{
    color:white;
}

.course-card:hover .course-card-icon{
    color:white;
    background:rgba(255,255,255,.16);
}

.course-card:hover .course-category{
    color:rgba(255,255,255,.72);
}

.course-card:hover h3{
    color:white;
}

.course-card:hover p{
    color:rgba(255,255,255,.82);
}

.course-card:hover .course-more{
    color:white;
    border-color:rgba(255,255,255,.20);
}

.course-card:hover .course-more i{
    color:var(--music-deep);
    background:white;
}

/* ==================================================
METODOLOGÍA
================================================== */

.discipline-method{
    padding:
        120px 7%;

    background:white;
}



.method-heading{
    max-width:720px;

    margin-bottom:55px;
}



.method-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:16px;
}



.method-grid article{
    position:relative;

    min-height:280px;

    padding:28px;

    display:flex;

    flex-direction:column;

    border-radius:17px;

    border:
        1px solid
        var(--border);

    background:white;

    transition:
        transform .5s
        cubic-bezier(.22,1,.36,1),

        box-shadow .5s
        cubic-bezier(.22,1,.36,1);
}


.method-grid article:hover{
    transform:
        translateY(-7px);

    box-shadow:
        0 20px 45px
        rgba(41,32,74,.09);
}


.method-grid article > span{
    color:
        var(--kiru-blue);

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.12em;
}


.method-grid article > i{
    margin-top:40px;

    font-size:2rem;

    color:
        var(--kiru-blue);
}


.method-grid h3{
    margin-top:auto;

    font-family:
        'Manrope',
        sans-serif;

    font-size:1.3rem;

    color:
        var(--kiru-deep);
}


.method-grid p{
    margin-top:8px;

    color:
        var(--muted);

    font-size:.88rem;

    line-height:1.6;
}



/* ==================================================
CTA
================================================== */

.discipline-cta{
    position:relative;

    padding:95px 7%;

    display:flex;

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

    gap:60px;

    overflow:hidden;

    color:white;

    background:
        linear-gradient(
            120deg,
            #173f82 0%,
            #2867b2 40%,
            #4b98cf 70%,
            #62c8d2 100%
        );
}

.discipline-cta::before{
    content:"";

    position:absolute;

    width:330px;
    height:330px;

    right:-100px;
    top:-160px;

    border-radius:50%;

    border:
        1px solid
        rgba(255,255,255,.18);
}


.discipline-cta::after{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:23%;
    bottom:-110px;

    border-radius:50%;

    background:
        rgba(103,213,208,.18);
}

.discipline-cta > div,
.discipline-cta-button{
    position:relative;
    z-index:2;
}


.discipline-cta span{
    display:inline-block;

    margin-bottom:14px;

    color:
        #d8efff;

    font-size:.73rem;

    font-weight:800;

    letter-spacing:.18em;
}


.discipline-cta h2{
    font-family:
        'Manrope',
        sans-serif;

    font-size:
        clamp(
            2.5rem,
            4.5vw,
            4.5rem
        );

    line-height:.98;

    letter-spacing:
        -.05em;
}


.discipline-cta p{
    max-width:560px;

    margin-top:18px;

    color:
        rgba(255,255,255,.76);

    line-height:1.7;
}



.discipline-cta-button{
    min-width:210px;

    min-height:58px;

    padding:
        0 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    flex-shrink:0;

    border-radius:12px;

    color:
        var(--kiru-deep);

    background:white;

    font-weight:800;

    transition:.4s ease;

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.12);
}


.discipline-cta-button:hover{
    transform:
        translateY(-5px)
        scale(1.025);

    box-shadow:
        0 22px 45px
        rgba(23,63,130,.22);
}


.discipline-cta-button i{
    color:
        var(--music-blue);

    transition:.4s ease;
}


.discipline-cta-button:hover i{
    transform:
        rotate(12deg)
        scale(1.15);
}


/* ==================================================
FOOTER
================================================== */

.discipline-footer{
    padding:
        75px 7%
        25px;

    color:white;

    background:
        linear-gradient(
            145deg,
            #101d3f 0%,
            #172c59 48%,
            #1c396d 100%
        );
}


.discipline-footer-main{
    max-width:1280px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1.5fr .8fr .9fr 1.1fr;

    gap:70px;
}


.discipline-footer-brand > a{
    display:flex;

    align-items:center;

    gap:13px;
}


.discipline-footer-brand img{
    width:58px;
    height:58px;

    object-fit:contain;

    border-radius:50%;

    background:white;
}


.discipline-footer-brand > a > div{
    display:flex;
    flex-direction:column;
}


.discipline-footer-brand strong{
    font-family:
        'Manrope',
        sans-serif;

    font-size:1.05rem;

    letter-spacing:.08em;
}


.discipline-footer-brand span{
    margin-top:3px;

    color:
        rgba(255,255,255,.55);

    font-size:.76rem;
}


.discipline-footer-brand p{
    margin-top:18px;

    color:
        rgba(255,255,255,.65);
}


/* COLUMNAS */

.discipline-footer-column{
    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:11px;
}


.discipline-footer-column h3{
    margin-bottom:10px;

    font-family:
        'Manrope',
        sans-serif;

    font-size:.95rem;

    color:white;
}


.discipline-footer-column a{
    color:
        rgba(255,255,255,.62);

    font-size:.86rem;

    transition:.3s ease;
}


.discipline-footer-column a:hover{
    color:
        #77d8da;

    transform:
        translateX(4px);
}


/* REDES */

.discipline-footer-socials{
    margin-top:25px;

    display:flex;
    flex-direction:row;

    align-items:center;

    gap:9px;
}

.discipline-footer-socials a{
    flex-shrink:0;
    width:42px;
    height:42px;

    display:flex;

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

    border-radius:11px;

    border:
        1px solid
        rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.07);

    transition:.35s ease;
}


.discipline-footer-socials a:hover{
    transform:
        translateY(-4px);

    background:
        linear-gradient(
            135deg,
            #2867b2,
            #67d5d0
        );
}


/* PARTE INFERIOR */

.discipline-footer-bottom{
    max-width:1280px;

    margin:
        55px auto 0;

    padding-top:22px;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    border-top:
        1px solid
        rgba(255,255,255,.10);

    color:
        rgba(255,255,255,.45);

    font-size:.8rem;
}


.discipline-footer-bottom a{
    display:flex;

    align-items:center;

    gap:8px;

    color:white;

    transition:.3s ease;
}


.discipline-footer-bottom a:hover{
    color:
        #67d5d0;
}


/* ==================================================
RESPONSIVE
================================================== */

@media(max-width:1100px){

    .discipline-menu{
        display:none;
    }


    .courses-grid{
        grid-template-columns:
            repeat(2,1fr);
    }


    .method-grid{
        grid-template-columns:
            repeat(2,1fr);
    }


    .discipline-footer-main{
        grid-template-columns:
            1fr 1fr;
    }


    .discipline-footer-socials{
        grid-column:
            1 / -1;
    }

}



@media(max-width:900px){

    .discipline-hero{
        grid-template-columns:
            1fr;

        gap:30px;
    }


    .discipline-hero-art{
        min-height:470px;
    }


    .discipline-intro{
        grid-template-columns:
            1fr;

        gap:45px;
    }


    .discipline-cta{
        flex-direction:column;

        align-items:flex-start;
    }

}



@media(max-width:650px){

    .discipline-header-cta{
        display:none;
    }


    .discipline-nav{
        min-height:74px;

        padding:
            0 18px;
    }


    .discipline-hero{
        padding:
            70px 20px;
    }


    .discipline-hero h1{
        font-size:
            clamp(
                3rem,
                16vw,
                4.5rem
            );
    }


    .discipline-hero-art{
        min-height:390px;
    }


    .music-main-visual{
        width:290px;
        height:290px;
    }


    .orbit-one{
        width:340px;
        height:340px;
    }


    .orbit-two{
        width:380px;
        height:380px;
    }


    .music-floating{
        min-width:auto;

        padding:
            10px 12px;

        font-size:.72rem;
    }


    .floating-one{
        left:0;
    }


    .floating-two{
        right:0;
    }


    .discipline-intro,
    .courses-section,
    .discipline-method{
        padding:
            85px 20px;
    }


    .intro-stats{
        grid-template-columns:
            1fr;
    }


    .courses-grid{
        grid-template-columns:
            1fr;
    }


    .method-grid{
        grid-template-columns:
            1fr;
    }


    .discipline-cta{
        padding:
            70px 20px;
    }


    .discipline-cta-button{
        width:100%;
    }


    .discipline-footer{
        padding:
            55px 20px
            22px;
    }


    .discipline-footer-main{
        grid-template-columns:
            1fr;

        gap:35px;
    }


    .discipline-footer-links{
        grid-template-columns:
            1fr 1fr;
    }


    .discipline-footer-socials{
        grid-column:auto;
    }


    .discipline-footer-bottom{
        flex-direction:column;

        align-items:flex-start;
    }

}

/* ==================================================
DANZA / KIRU MOVEMENT
================================================== */

.dance-page{

    --dance-deep:#63215f;
    --dance-purple:#7b2f8e;
    --dance-magenta:#c51e78;
    --dance-pink:#ef6fa8;
    --dance-rose:#e85c91;
    --dance-bluepurple:#6552b8;
    --dance-sky:#8890e5;

}


/* HEADER */

.dance-page .discipline-menu a:hover{
    color:var(--dance-magenta);
}

.dance-page .discipline-menu a::after{
    background:
        linear-gradient(
            90deg,
            var(--dance-magenta),
            var(--dance-purple)
        );
}

.dance-page .discipline-search-box{
    border-color:
        rgba(197,30,120,.14);

    background:#fff8fc;
}

.dance-page .discipline-search-box:focus-within{
    border-color:
        var(--dance-magenta);

    box-shadow:
        0 10px 28px
        rgba(197,30,120,.12);
}

.dance-page .discipline-search-box i{
    color:var(--dance-magenta);
}



/* HERO */

.dance-theme{
    background:

        radial-gradient(
            circle at 81% 16%,
            rgba(239,111,168,.22),
            transparent 25%
        ),

        radial-gradient(
            circle at 92% 72%,
            rgba(101,82,184,.16),
            transparent 28%
        ),

        radial-gradient(
            circle at 6% 84%,
            rgba(197,30,120,.10),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            #fffafd,
            #fff5fb 46%,
            #f7f3ff
        );
}


.dance-page .discipline-eyebrow,
.dance-page .discipline-back:hover,
.dance-page .discipline-hero-details i{
    color:
        var(--dance-magenta);
}


.dance-page .discipline-hero h1 span{
    background:
        linear-gradient(
            135deg,
            #c51e78,
            #8d3d9f 55%,
            #6552b8
        );

    background-clip:text;
    -webkit-background-clip:text;
}


.dance-page .discipline-btn.primary{
    background:
        linear-gradient(
            135deg,
            #c51e78,
            #8d3d9f 55%,
            #6552b8
        );

    box-shadow:
        0 15px 35px
        rgba(197,30,120,.20);
}



/* ==================================================
ARTE HERO DANZA - MOVIMIENTO
================================================== */

.dance-hero-art{
    position:relative;

    min-height:520px;

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

    isolation:isolate;
}

/* ==================================================
HERO DANZA - BOLA DISCO
================================================== */

.dance-disco{
    position:relative;

    z-index:5;

    width:420px;
    height:470px;

    display:flex;
    align-items:center;
    justify-content:center;
}


/* ==================================================
BOLA
================================================== */

.disco-ball{
    position:relative;

    z-index:5;

    width:310px;
    height:310px;

    min-width: 310px;
    min-height: 310px;

    aspect-ratio: 1 / 1;

    flex-shrink: 0;

    overflow:hidden;
    border-radius:50%;

    background:
        radial-gradient(
            circle at 32% 25%,
            #ffd8f1 0%,
            #f19ac9 12%,
            #dd5caf 28%,
            #aa4bbb 50%,
            #7148b8 72%,
            #3f2b78 100%
        );

    box-shadow:
        inset 30px 25px 45px rgba(255,255,255,.16),
        inset -38px -30px 60px rgba(43,21,91,.34),
        0 30px 65px rgba(103,50,145,.28);

    transition:
        transform .9s cubic-bezier(.22,1,.36,1);
}


/* MOVIMIENTO */

.dance-disco:hover .disco-ball{
    transform:rotate(7deg);
}


/* ==================================================
CUADRÍCULA DE ESPEJOS
================================================== */

/* ==================================================
MOSAICOS DE LA BOLA DISCO
================================================== */

.disco-tiles{
    position:absolute;

    inset:0px;

    display:grid;

    grid-template-columns:
        repeat(12,1fr);

    grid-template-rows:
        repeat(12,1fr);

    overflow:hidden;

    border-radius:50%;

    transform:
        rotate(-7deg)
        scale(1.04);

    transition:
        transform 1s
        cubic-bezier(.22,1,.36,1);

    mask-image:
        radial-gradient(
            circle,
            black 0 67%,
            rgba(0,0,0,.88) 78%,
            transparent 100%
        );

    -webkit-mask-image:
        radial-gradient(
            circle,
            black 0 67%,
            rgba(0,0,0,.88) 78%,
            transparent 100%
        );
}


/* CUADRO BASE */

.disco-tiles span{
    position:relative;

    min-width:0;
    min-height:0;

    border:
        1px solid
        rgba(255,255,255,.34);

    background:
        linear-gradient(
            145deg,
            #9e4fbe,
            #7849b6
        );

    box-shadow:
        inset 2px 2px 3px
        rgba(255,255,255,.13);

    transition:
        filter .35s ease;
}


/* ==================================================
VARIACIONES DE COLOR
================================================== */

.disco-tiles span:nth-child(2n){
    background:
        linear-gradient(
            145deg,
            #c447a7,
            #8e45b7
        );
}


.disco-tiles span:nth-child(3n){
    background:
        linear-gradient(
            145deg,
            #ec65b2,
            #b5409e
        );
}


.disco-tiles span:nth-child(5n){
    background:
        linear-gradient(
            145deg,
            #6256ca,
            #7341ae
        );
}


.disco-tiles span:nth-child(7n){
    background:
        linear-gradient(
            145deg,
            #68c8df,
            #5488d3
        );
}


.disco-tiles span:nth-child(11n){
    background:
        linear-gradient(
            145deg,
            #ef9acb,
            #d05ab5
        );
}


.disco-tiles span:nth-child(13n){
    background:
        linear-gradient(
            145deg,
            #f6d7ee,
            #df93cd
        );
}


.disco-tiles span:nth-child(17n){
    background:
        linear-gradient(
            145deg,
            #493384,
            #7049bd
        );
}


/* ESPEJOS MUY BRILLANTES */

.disco-tiles span:nth-child(19n),
.disco-tiles span:nth-child(29n),
.disco-tiles span:nth-child(37n){
    z-index:2;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9dff3
        );

    box-shadow:
        0 0 14px
        rgba(255,255,255,.95);

    filter:
        brightness(1.2);
}


/* CIAN DESTACADO */

.disco-tiles span:nth-child(23n),
.disco-tiles span:nth-child(31n){
    background:
        linear-gradient(
            145deg,
            #7ce7df,
            #59a9db
        );
}


/* ==================================================
VOLUMEN ESFÉRICO
================================================== */

.disco-glow{
    position:absolute;

    z-index:4;

    inset:0;

    border-radius:50%;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 31% 28%,
            rgba(255,255,255,.52),
            transparent 22%
        ),

        radial-gradient(
            circle at 70% 68%,
            rgba(38,22,89,.30),
            transparent 42%
        ),

        radial-gradient(
            circle,
            transparent 46%,
            rgba(42,23,90,.28) 100%
        );

    mix-blend-mode:screen;
}


/* ==================================================
DESTELLOS GRANDES
================================================== */

.disco-flare{
    position:absolute;

    z-index:6;

    pointer-events:none;
}


.disco-flare::before,
.disco-flare::after{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    background:white;

    border-radius:100px;

    box-shadow:
        0 0 16px
        rgba(255,255,255,.95);
}


.disco-flare::before{
    width:4px;
    height:38px;
}


.disco-flare::after{
    width:38px;
    height:4px;
}


.disco-flare-one{
    top:78px;
    left:96px;
}


.disco-flare-two{
    top:145px;
    right:63px;

    transform:scale(.65);
}


.disco-flare-three{
    bottom:78px;
    left:135px;

    transform:scale(.45);
}


/* ==================================================
GIRO
================================================== */

.dance-disco:hover
.disco-tiles{
    transform: rotate(-7deg)
}


/* PEQUEÑO MOVIMIENTO DEL CONJUNTO */

.dance-disco:hover
.disco-flare-one{
    transform:
        rotate(10deg)
        scale(1.08);
}

/* ==================================================
CABLE
================================================== */

.disco-cable{
    position:absolute;

    z-index:3;

    top:-55px;

    width:4px;
    height:128px;

    border-radius:3px;

    background:
        linear-gradient(
            #42245f,
            #8a4da0
        );
}


.disco-cable::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-8px;

    width:40px;
    height:16px;

    transform:
        translateX(-50%);

    border-radius:
        9px 9px 4px 4px;

    background:
        linear-gradient(
            90deg,
            #62317f,
            #b25bb3,
            #62317f
        );

    box-shadow:
        0 5px 10px rgba(71,31,95,.18);
}


/* ==================================================
SOMBRA
================================================== */

.disco-shadow{
    position:absolute;

    z-index:1;

    bottom:30px;

    width:245px;
    height:38px;

    border-radius:50%;

    background:
        rgba(119,56,150,.14);

    filter:blur(14px);
}

/* TARJETAS FLOTANTES */

.dance-floating{
    position:absolute;

    z-index:7;

    min-width:140px;

    padding:14px 17px;

    display:flex;
    align-items:center;

    gap:11px;

    border-radius:14px;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 15px 35px rgba(99,33,95,.10);

    color:
        var(--kiru-deep);

    font-size:.84rem;

    font-weight:700;

    transition:
        transform .35s ease;
}


.dance-floating:hover{
    transform:
        translateY(-5px)
        rotate(-2deg);
}


.dance-floating i{
    width:38px;
    height:38px;

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

    border-radius:10px;

    color:
        var(--dance-magenta);

    background:
        rgba(197,30,120,.09);

    font-size:1.1rem;
}


.dance-floating-one{
    left:2%;
    top:16%;
}


.dance-floating-two{
    right:-1%;
    top:44%;
}


.dance-floating-three{
    left:5%;
    bottom:13%;
}

/* INTRO */

.dance-page
.discipline-intro-title > span,
.dance-page
.courses-heading > span,
.dance-page
.method-heading > span{
    color:
        var(--dance-magenta);
}


.dance-page .intro-stats div{
    background:
        #fff7fb;

    border-color:
        rgba(197,30,120,.08);
}


.dance-page .intro-stats strong{
    color:
        var(--dance-magenta);
}



/* CURSOS */

.dance-page .courses-section{
    background:
        linear-gradient(
            135deg,
            #fff8fc,
            #f8f5ff
        );
}


.dance-page .course-card{
    border-color:
        rgba(197,30,120,.08);
}


.dance-page .course-card-number,
.dance-page .course-category{
    color:
        var(--dance-magenta);
}


.dance-page .course-card-icon{
    color:
        var(--dance-magenta);

    background:
        rgba(197,30,120,.08);
}


.dance-page .course-more i{
    color:
        var(--dance-magenta);

    background:#fff4fa;
}



/* HOVERS DE CURSOS */

.dance-page
.course-card:nth-child(1):hover{
    background:
        linear-gradient(
            145deg,
            #9d307d,
            #d85f9e
        );
}


.dance-page
.course-card:nth-child(2):hover{
    background:
        linear-gradient(
            145deg,
            #c51e78,
            #8c3c9b
        );
}


.dance-page
.course-card:nth-child(3):hover{
    background:
        linear-gradient(
            145deg,
            #8452ae,
            #b96fae
        );
}


.dance-page
.course-card:nth-child(4):hover{
    background:
        linear-gradient(
            145deg,
            #d34c87,
            #e77c8f
        );
}


.dance-page
.course-card:nth-child(5):hover{
    background:
        linear-gradient(
            145deg,
            #6f4bb6,
            #cb4c9b
        );
}



/* METODOLOGÍA */

.dance-page
.method-grid article > span,
.dance-page
.method-grid article > i{
    color:
        var(--dance-magenta);
}



/* CTA */

.dance-cta{
    background:
        linear-gradient(
            120deg,
            #7c2878 0%,
            #b72f82 38%,
            #d75896 68%,
            #7860bf 100%
        );
}


.dance-cta::before{
    border-color:
        rgba(255,255,255,.18);
}


.dance-cta::after{
    background:
        rgba(239,111,168,.20);
}


.dance-page
.discipline-cta-button i{
    color:
        var(--dance-magenta);
}



/* FOOTER */

.dance-footer{
    background:
        linear-gradient(
            145deg,
            #24122c 0%,
            #40204e 47%,
            #632759 100%
        );
}


.dance-footer
.discipline-footer-column a:hover{
    color:
        #f190bd;
}


.dance-footer
.discipline-footer-socials a:hover{
    background:
        linear-gradient(
            135deg,
            #c51e78,
            #7458ba
        );
}


.dance-footer
.discipline-footer-bottom a:hover{
    color:#f190bd;
}



/* RESPONSIVE HERO DANZA */

@media(max-width:650px){

    .dance-main-visual{
        width:290px;
        height:290px;
    }


    .dance-orbit-one{
        width:340px;
        height:310px;
    }


    .dance-orbit-two{
        width:385px;
        height:355px;
    }

}

/* ==================================================
TEATRO / KIRU STAGE
================================================== */

.theater-page{

    --theater-deep:#641f27;
    --theater-wine:#812735;
    --theater-red:#b83b3f;
    --theater-coral:#df6550;
    --theater-orange:#e78a4f;
    --theater-gold:#e3ad63;
}


/* HEADER */

.theater-page .discipline-menu a:hover{
    color:var(--theater-red);
}

.theater-page .discipline-menu a::after{
    background:
        linear-gradient(
            90deg,
            var(--theater-red),
            var(--theater-orange)
        );
}

.theater-page .discipline-search-box{
    background:#fff9f7;

    border-color:
        rgba(184,59,63,.13);
}

.theater-page
.discipline-search-box:focus-within{
    border-color:
        var(--theater-red);

    box-shadow:
        0 10px 28px
        rgba(184,59,63,.12);
}

.theater-page .discipline-search-box i{
    color:var(--theater-red);
}


/* HERO */

.theater-theme{
    background:

        radial-gradient(
            circle at 82% 15%,
            rgba(227,173,99,.20),
            transparent 24%
        ),

        radial-gradient(
            circle at 92% 72%,
            rgba(184,59,63,.15),
            transparent 29%
        ),

        radial-gradient(
            circle at 5% 84%,
            rgba(223,101,80,.10),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            #fffaf7,
            #fff5f1 48%,
            #fff9f3
        );
}


.theater-page .discipline-eyebrow,
.theater-page .discipline-back:hover,
.theater-page .discipline-hero-details i{
    color:
        var(--theater-red);
}


.theater-page .discipline-hero h1 span{
    background:
        linear-gradient(
            135deg,
            #a62f38,
            #d85d4c 55%,
            #e39a55
        );

    background-clip:text;
    -webkit-background-clip:text;
}


.theater-page .discipline-btn.primary{
    background:
        linear-gradient(
            135deg,
            #922c35,
            #c54742 55%,
            #e18450
        );

    box-shadow:
        0 15px 35px
        rgba(146,44,53,.20);
}


/* ESCENARIO DEL HERO */

.theater-hero-art{
    position:relative;

    min-height:520px;

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

    overflow:hidden;
}


.theater-stage{
    position:relative;

    z-index:3;

    width:430px;
    height:400px;

    overflow:hidden;

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

    border-radius:
        48% 48% 22% 22% /
        30% 30% 12% 12%;

    background:
        linear-gradient(
            180deg,
            #341c24,
            #56202b 72%,
            #24131a
        );

    box-shadow:
        0 38px 70px
        rgba(87,30,37,.24);
}


/* TELONES */

.theater-curtain{
    position:absolute;

    top:0;

    width:47%;
    height:100%;

    z-index:2;

    background:
        repeating-linear-gradient(
            90deg,
            #741f2b 0px,
            #9d2e38 28px,
            #6c1b27 54px
        );

    transition:
        transform .6s ease;
}


.curtain-left{
    left:0;

    clip-path:
        polygon(
            0 0,
            100% 0,
            78% 100%,
            0 100%
        );
}


.curtain-right{
    right:0;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            22% 100%
        );
}


.theater-stage:hover
.curtain-left{
    transform:
        translateX(-18px);
}


.theater-stage:hover
.curtain-right{
    transform:
        translateX(18px);
}


/* CENTRO */

.theater-stage-center{
    position:relative;

    z-index:4;

    display:flex;
    flex-direction:column;

    align-items:center;

    color:white;
}


.theater-stage-center > i{
    font-size:6rem;

    color:
        #f2c37f;

    filter:
        drop-shadow(
            0 10px 18px
            rgba(0,0,0,.22)
        );
}


.theater-stage-center > span{
    margin-top:18px;

    display:flex;
    flex-direction:column;

    align-items:center;

    font-family:
        'Manrope',
        sans-serif;

    font-weight:800;

    font-size:1.2rem;

    letter-spacing:.09em;
}


.theater-stage-center strong{
    margin-top:3px;

    color:#f2c37f;

    font-size:.7rem;

    letter-spacing:.25em;
}


/* FOCOS */

.theater-light{
    position:absolute;

    top:-120px;

    width:190px;
    height:570px;

    opacity:.28;

    filter:blur(2px);

    background:
        linear-gradient(
            180deg,
            rgba(255,215,154,.80),
            rgba(255,215,154,.02)
        );

    clip-path:
        polygon(
            44% 0,
            56% 0,
            100% 100%,
            0 100%
        );
}


.theater-light-left{
    left:12%;

    transform:
        rotate(19deg);
}


.theater-light-right{
    right:12%;

    transform:
        rotate(-19deg);
}


/* TARJETAS FLOTANTES */

.theater-floating{
    position:absolute;

    z-index:6;

    min-width:145px;

    padding:14px 17px;

    display:flex;
    align-items:center;

    gap:11px;

    border-radius:14px;

    color:#392329;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 16px 36px
        rgba(100,31,39,.11);

    font-size:.84rem;

    font-weight:700;

    transition:.35s ease;
}


.theater-floating:hover{
    transform:
        translateY(-5px);
}


.theater-floating i{
    width:38px;
    height:38px;

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

    border-radius:10px;

    color:
        var(--theater-red);

    background:
        rgba(184,59,63,.09);

    font-size:1.1rem;
}


.theater-floating-one{
    left:0;
    top:17%;
}


.theater-floating-two{
    right:-1%;
    top:45%;
}


.theater-floating-three{
    left:4%;
    bottom:11%;
}


/* INTRO */

.theater-page
.discipline-intro-title > span,

.theater-page
.courses-heading > span,

.theater-page
.method-heading > span{
    color:
        var(--theater-red);
}


.theater-page .intro-stats div{
    background:#fff8f5;

    border-color:
        rgba(184,59,63,.08);
}


.theater-page .intro-stats strong{
    color:
        var(--theater-red);
}


/* ==================================================
CURSO PRINCIPAL
================================================== */

.theater-course-section{
    padding:105px 7%;

    background:
        linear-gradient(
            135deg,
            #fff8f5,
            #fffdf9
        );
}

.theater-courses-grid{
    max-width:1120px;
    margin:55px auto 0;

    display:flex;
    flex-direction:column;
    gap:22px;
}

.theater-courses-grid .theater-course-feature{
    margin:0;
}

.theater-course-feature{
    position:relative;

    max-width:1120px;

    margin:
        55px auto 0;

    padding:
        42px 45px;

    display:grid;

    grid-template-columns:
        auto auto 1fr auto;

    align-items:center;

    gap:30px;

    overflow:hidden;

    border:
        1px solid
        rgba(184,59,63,.10);

    border-radius:24px;

    background:white;

    box-shadow:
        0 25px 60px
        rgba(100,31,39,.07);

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


.theater-course-feature::before{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-130px;
    top:-130px;

    border-radius:50%;

    background:
        rgba(227,173,99,.11);
}


.theater-course-feature:hover{
    transform:
        translateY(-7px);

    box-shadow:
        0 32px 70px
        rgba(100,31,39,.12);
}


.theater-course-number{
    align-self:flex-start;

    color:
        rgba(184,59,63,.35);

    font-family:
        'Manrope',
        sans-serif;

    font-weight:800;
}


.theater-course-icon{
    width:85px;
    height:85px;

    display:flex;

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

    flex-shrink:0;

    border-radius:22px;

    color:white;

    background:
        linear-gradient(
            145deg,
            #9c3039,
            #d55749,
            #e28b50
        );

    font-size:2.4rem;
}


.theater-course-content{
    max-width:580px;
}


.theater-course-content > span{
    color:
        var(--theater-red);

    font-size:.7rem;

    font-weight:800;

    letter-spacing:.14em;
}


.theater-course-content h3{
    margin-top:7px;

    font-family:
        'Manrope',
        sans-serif;

    font-size:2rem;

    color:
        var(--kiru-deep);
}


.theater-course-content p{
    margin-top:10px;

    color:#69656c;

    line-height:1.7;
}


.theater-course-tags{
    margin-top:20px;

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}


.theater-course-tags span{
    padding:7px 11px;

    border-radius:50px;

    color:
        var(--theater-wine);

    background:
        #fff2ed;

    font-size:.72rem;

    font-weight:700;
}


.theater-course-link{
    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:9px;

    padding:
        13px 17px;

    border-radius:12px;

    color:white;

    background:
        linear-gradient(
            135deg,
            #a73239,
            #dd724e
        );

    font-size:.82rem;

    font-weight:700;

    white-space:nowrap;

    transition:.35s ease;
}


.theater-course-link:hover{
    transform:
        translateY(-4px);

    box-shadow:
        0 13px 28px
        rgba(166,50,57,.20);
}


/* ==================================================
ÁREAS TEATRALES
================================================== */

.theater-areas{
    padding:105px 7%;

    background:white;
}


.theater-areas-heading{
    max-width:650px;

    margin-bottom:55px;
}


.theater-areas-heading > span{
    color:
        var(--theater-red);

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.15em;
}


.theater-areas-heading h2{
    margin-top:10px;

    color:
        var(--kiru-deep);

    font-family:
        'Manrope',
        sans-serif;

    font-size:
        clamp(2rem,4vw,3.5rem);

    line-height:1.08;
}


.theater-areas-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:18px;
}


.theater-areas-grid article{
    position:relative;

    min-height:280px;

    padding:30px;

    overflow:hidden;

    border:
        1px solid
        rgba(184,59,63,.08);

    border-radius:18px;

    background:#fffaf8;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}


.theater-areas-grid article:hover{
    transform:
        translateY(-7px);

    color:white;

    background:
        linear-gradient(
            145deg,
            #8e2934,
            #bd433f,
            #df8051
        );
}


.theater-areas-grid article > span{
    color:
        rgba(184,59,63,.40);

    font-weight:800;
}


.theater-areas-grid article > i{
    margin-top:38px;

    display:block;

    color:
        var(--theater-red);

    font-size:2rem;
}


.theater-areas-grid h3{
    margin-top:20px;

    color:
        var(--kiru-deep);

    font-family:
        'Manrope',
        sans-serif;

    font-size:1.15rem;
}


.theater-areas-grid p{
    margin-top:10px;

    color:#747078;

    line-height:1.65;

    font-size:.86rem;
}


.theater-areas-grid article:hover > span,
.theater-areas-grid article:hover > i,
.theater-areas-grid article:hover h3,
.theater-areas-grid article:hover p{
    color:white;
}


/* METODOLOGÍA */

.theater-page
.method-grid article > span,

.theater-page
.method-grid article > i{
    color:
        var(--theater-red);
}


/* CTA */

.theater-cta{
    background:
        linear-gradient(
            120deg,
            #681f29 0%,
            #982f39 38%,
            #ca5045 68%,
            #df8a50 100%
        );
}


.theater-cta::after{
    background:
        rgba(239,184,100,.17);
}


.theater-page
.discipline-cta-button i{
    color:
        var(--theater-red);
}


/* FOOTER */

.theater-footer{
    background:
        linear-gradient(
            145deg,
            #241217 0%,
            #3d1920 48%,
            #64232b 100%
        );
}


.theater-footer
.discipline-footer-column a:hover{
    color:#efad75;
}


.theater-footer
.discipline-footer-socials a:hover{
    background:
        linear-gradient(
            135deg,
            #a5323b,
            #df8751
        );
}


.theater-footer
.discipline-footer-bottom a:hover{
    color:#efad75;
}


/* RESPONSIVE */

@media(max-width:950px){

    .theater-course-feature{
        grid-template-columns:
            auto 1fr;

        gap:25px;
    }


    .theater-course-content{
        grid-column:
            2;
    }


    .theater-course-link{
        grid-column:
            2;

        justify-self:start;
    }


    .theater-areas-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:650px){

    .theater-stage{
        width:310px;
        height:330px;
    }


    .theater-stage-center > i{
        font-size:4.5rem;
    }


    .theater-course-feature{
        display:flex;

        flex-direction:column;

        align-items:flex-start;

        padding:30px;
    }


    .theater-areas-grid{
        grid-template-columns:1fr;
    }

}

/* ==================================================
ARTES VISUALES / KIRU CANVAS
================================================== */

.canvas-page{

    --canvas-deep:#7a3b22;
    --canvas-brown:#9a5b2e;
    --canvas-orange:#f29b38;
    --canvas-gold:#f4c542;
    --canvas-coral:#ef765f;
    --canvas-cream:#fff8e8;
    --canvas-purple:#7350a8;

}


/* ==================================================
HEADER
================================================== */

.canvas-page .discipline-menu a:hover{
    color:var(--canvas-orange);
}


.canvas-page .discipline-menu a::after{
    background:
        linear-gradient(
            90deg,
            var(--canvas-orange),
            var(--canvas-gold)
        );
}


.canvas-page .discipline-search-box{
    background:#fffaf0;

    border-color:
        rgba(242,155,56,.16);
}


.canvas-page
.discipline-search-box:focus-within{
    border-color:
        var(--canvas-orange);

    box-shadow:
        0 10px 28px
        rgba(242,155,56,.15);
}


.canvas-page .discipline-search-box i{
    color:var(--canvas-orange);
}


/* ==================================================
HERO
================================================== */

.canvas-theme{

    background:

        radial-gradient(
            circle at 82% 17%,
            rgba(244,197,66,.25),
            transparent 25%
        ),

        radial-gradient(
            circle at 92% 72%,
            rgba(239,118,95,.16),
            transparent 29%
        ),

        radial-gradient(
            circle at 8% 83%,
            rgba(242,155,56,.11),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            #fffdf7,
            #fff8ec 48%,
            #fff5ee
        );
}


.canvas-page .discipline-eyebrow,
.canvas-page .discipline-back:hover,
.canvas-page .discipline-hero-details i{
    color:
        var(--canvas-orange);
}


.canvas-page .discipline-hero h1 span{
    color:transparent;

    background:
        linear-gradient(
            135deg,
            #ef8e32,
            #f4c542 45%,
            #ef765f 75%,
            #7350a8
        );

    background-clip:text;
    -webkit-background-clip:text;
}


.canvas-page .discipline-btn.primary{
    background:
        linear-gradient(
            135deg,
            #e9842f,
            #f4bd3f 55%,
            #ef765f
        );

    box-shadow:
        0 15px 35px
        rgba(239,145,50,.22);
}


/* ==================================================
ARTE HERO - CABALLETE
================================================== */

.canvas-hero-art{
    position:relative;

    min-height:520px;

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

    isolation:isolate;
}


/* ==================================================
ÓRBITAS
================================================== */

.canvas-orbit{
    position:absolute;

    z-index:1;

    border-radius:50%;

    border:
        1px solid rgba(242,155,56,.13);

    pointer-events:none;
}


.canvas-orbit-one{
    width:470px;
    height:470px;

    transform:rotate(-8deg);
}


.canvas-orbit-two{
    width:545px;
    height:505px;

    border-color:
        rgba(115,80,168,.10);

    transform:rotate(12deg);
}


/* ==================================================
BOLITAS DECORATIVAS
================================================== */

.canvas-dot{
    position:absolute;

    z-index:4;

    display:block;

    border-radius:50%;

    box-shadow:
        0 8px 18px rgba(122,59,34,.13);
}


.canvas-dot-one{
    width:17px;
    height:17px;

    top:12%;
    right:18%;

    background:#f4c542;
}


.canvas-dot-two{
    width:11px;
    height:11px;

    top:31%;
    right:5%;

    background:#ef765f;
}


.canvas-dot-three{
    width:14px;
    height:14px;

    left:10%;
    bottom:18%;

    background:#7350a8;
}


/* ==================================================
CABALLETE
================================================== */

.canvas-easel{
    position:relative;

    z-index:5;

    width:360px;
    height:430px;

    display:flex;
    align-items:flex-start;
    justify-content:center;

    transition:
        transform .7s cubic-bezier(.22,1,.36,1);

    filter:
        drop-shadow(
            0 28px 30px
            rgba(115,67,31,.18)
        );
}


.canvas-easel:hover{
    transform:
        translateY(-5px)
        rotate(1deg);
}


/* ==================================================
LIENZO
================================================== */

.canvas-board{
    position:relative;

    z-index:5;

    width:275px;
    height:300px;

    margin-top:30px;

    overflow:hidden;

    border-radius:10px;

    border:
        12px solid #c88744;

    background:
        linear-gradient(
            145deg,
            #fffef9,
            #fff9ec
        );

    box-shadow:
        inset 0 0 0 2px rgba(120,69,33,.08),
        0 20px 35px rgba(104,59,26,.15);

    transition:
        transform .6s cubic-bezier(.22,1,.36,1);
}


.canvas-easel:hover
.canvas-board{
    transform:
        rotate(-2deg)
        translateY(-3px);
}


/* TEXTURA SUAVE DEL LIENZO */

.canvas-board::before{
    content:"";

    position:absolute;

    inset:0;

    opacity:.18;

    background-image:
        linear-gradient(
            rgba(145,109,70,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(145,109,70,.08) 1px,
            transparent 1px
        );

    background-size:
        9px 9px;
}


/* ==================================================
MANCHAS DE PINTURA
================================================== */

.canvas-paint{
    position:absolute;

    border-radius:
        56% 44% 63% 37% /
        45% 55% 45% 55%;

    filter:
        saturate(1.05);
}


.paint-one{
    width:135px;
    height:95px;

    left:25px;
    top:42px;

    background:
        linear-gradient(
            135deg,
            #f4c542,
            #f29b38
        );

    transform:
        rotate(-14deg);
}


.paint-two{
    width:115px;
    height:85px;

    right:17px;
    top:91px;

    background:
        linear-gradient(
            135deg,
            #ef765f,
            #e85a73
        );

    transform:
        rotate(17deg);
}


.paint-three{
    width:140px;
    height:78px;

    left:60px;
    bottom:40px;

    background:
        linear-gradient(
            135deg,
            #7350a8,
            #9b6cc5
        );

    transform:
        rotate(-6deg);
}


/* ==================================================
BROCHAZO PRINCIPAL
================================================== */

.canvas-brushstroke{
    position:absolute;

    z-index:4;

    width:225px;
    height:34px;

    left:21px;
    top:137px;

    border-radius:
        50% 44% 55% 45% /
        45% 55% 45% 55%;

    background:
        linear-gradient(
            90deg,
            #f18732 0%,
            #f4c542 35%,
            #ef765f 68%,
            #7350a8 100%
        );

    transform:
        rotate(-11deg);

    box-shadow:
        0 6px 13px
        rgba(141,79,37,.14);
}


.canvas-brushstroke::before,
.canvas-brushstroke::after{
    content:"";

    position:absolute;

    right:-17px;

    width:34px;
    height:7px;

    border-radius:50%;

    background:#7350a8;
}


.canvas-brushstroke::before{
    top:5px;
}


.canvas-brushstroke::after{
    bottom:4px;

    width:25px;
}


/* ==================================================
PATAS DEL CABALLETE
================================================== */

.easel-leg{
    position:absolute;

    z-index:2;

    width:20px;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            #8f552e,
            #c27b3c,
            #8f552e
        );

    box-shadow:
        inset 3px 0 4px rgba(255,255,255,.12);
}


.easel-leg-left{
    height:235px;

    left:98px;
    bottom:5px;

    transform:
        rotate(11deg);
}


.easel-leg-right{
    height:235px;

    right:98px;
    bottom:5px;

    transform:
        rotate(-11deg);
}


.easel-leg-center{
    width:18px;
    height:275px;

    left:50%;
    bottom:-10px;

    transform:
        translateX(-50%);
}


/* SOPORTE DEL LIENZO */

.canvas-easel::after{
    content:"";

    position:absolute;

    z-index:7;

    left:50%;
    top:318px;

    width:310px;
    height:22px;

    transform:
        translateX(-50%);

    border-radius:7px;

    background:
        linear-gradient(
            90deg,
            #8f552e,
            #c47d3f,
            #8f552e
        );

    box-shadow:
        0 7px 13px
        rgba(102,56,27,.15);
}


/* ==================================================
TARJETAS FLOTANTES
================================================== */

.canvas-floating{
    position:absolute;

    z-index:8;

    min-width:145px;

    padding:14px 17px;

    display:flex;
    align-items:center;

    gap:11px;

    border-radius:14px;

    color:
        var(--kiru-deep);

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 15px 35px
        rgba(129,80,31,.10);

    font-size:.84rem;
    font-weight:700;

    transition:
        transform .35s ease;
}


.canvas-floating:hover{
    transform:
        translateY(-5px)
        rotate(-1deg);
}


.canvas-floating i{
    width:38px;
    height:38px;

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

    border-radius:10px;

    color:
        var(--canvas-orange);

    background:
        rgba(242,155,56,.10);

    font-size:1.1rem;
}


.canvas-floating-one{
    left:0;
    top:16%;
}


.canvas-floating-two{
    right:-1%;
    top:43%;
}


.canvas-floating-three{
    left:4%;
    bottom:11%;
}


/* ==================================================
INTRO
================================================== */

.canvas-page
.discipline-intro-title > span,

.canvas-page
.courses-heading > span,

.canvas-page
.method-heading > span{
    color:
        var(--canvas-orange);
}


.canvas-page .intro-stats div{
    background:#fffaf0;

    border-color:
        rgba(242,155,56,.09);
}


.canvas-page .intro-stats strong{
    color:
        var(--canvas-orange);
}


/* ==================================================
CURSOS
================================================== */

.canvas-page .courses-section{
    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fff7ee
        );
}


.canvas-page .course-card{
    border-color:
        rgba(242,155,56,.10);
}


.canvas-page .course-card-number,
.canvas-page .course-category{
    color:
        var(--canvas-orange);
}


.canvas-page .course-card-icon{
    color:
        var(--canvas-orange);

    background:
        rgba(242,155,56,.10);
}


.canvas-page .course-more i{
    color:
        var(--canvas-orange);

    background:#fff7e7;
}


/* HOVERS */

.canvas-page
.course-card:nth-child(1):hover{
    background:
        linear-gradient(
            145deg,
            #e78a2f,
            #f5bd42
        );
}


.canvas-page
.course-card:nth-child(2):hover{
    background:
        linear-gradient(
            145deg,
            #e96252,
            #f0a34a
        );
}


.canvas-page
.course-card:nth-child(3):hover{
    background:
        linear-gradient(
            145deg,
            #7950aa,
            #d17a57
        );
}


/* ==================================================
METODOLOGÍA
================================================== */

.canvas-page
.method-grid article > span,

.canvas-page
.method-grid article > i{
    color:
        var(--canvas-orange);
}


/* ==================================================
CTA
================================================== */

.canvas-cta{

    background:
        linear-gradient(
            120deg,
            #c86f27 0%,
            #e99832 35%,
            #f1bd43 65%,
            #e66d5d 100%
        );
}


.canvas-cta::after{
    background:
        rgba(255,225,134,.22);
}


.canvas-page
.discipline-cta-button i{
    color:
        var(--canvas-orange);
}


/* ==================================================
FOOTER
================================================== */

.canvas-footer{

    background:
        linear-gradient(
            145deg,
            #402211 0%,
            #713c20 46%,
            #9e582c 100%
        );
}


.canvas-footer
.discipline-footer-column a:hover{
    color:
        #ffd37c;
}


.canvas-footer
.discipline-footer-socials a:hover{
    background:
        linear-gradient(
            135deg,
            #e88b32,
            #f4c542,
            #ef765f
        );
}


.canvas-footer
.discipline-footer-bottom a:hover{
    color:#ffd37c;
}


/* ==================================================
RESPONSIVE ARTES
================================================== */

@media(max-width:650px){

    .canvas-easel{
        width:310px;
        height:390px;
    }


    .canvas-board{
        width:235px;
        height:265px;
    }


    .canvas-easel::after{
        width:265px;
        top:282px;
    }


    .canvas-orbit-one{
        width:350px;
        height:350px;
    }


    .canvas-orbit-two{
        width:390px;
        height:370px;
    }


    .canvas-floating{
        min-width:auto;

        padding:
            10px 12px;

        font-size:.72rem;
    }

}

/* =========================================================
   PÁGINAS DE CURSOS
   ========================================================= */

.course-page {
    background: #fff;
    color: #21183b;
}


/* =========================================================
   HEADER - CURSOS
   ========================================================= */

.course-page .discipline-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(40, 24, 70, 0.08);
}

.course-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 22px;

    background: linear-gradient(135deg, #b91f86, #42246f);
    color: #fff;

    border-radius: 14px;

    font-weight: 700;
    text-decoration: none;

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

.course-header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(82, 39, 125, .18);
}


/* =========================================================
   HERO
   ========================================================= */

.course-hero {
    position: relative;

    min-height: 690px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
    align-items: center;
    gap: 70px;

    padding: 80px max(7vw, 70px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(80, 190, 232, .16),
            transparent 27%
        ),
        radial-gradient(
            circle at 70% 80%,
            rgba(187, 31, 134, .12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf7ff 55%,
            #f7fbff 100%
        );
}

.course-hero::before {
    content: "";

    position: absolute;
    width: 420px;
    height: 420px;

    left: -220px;
    bottom: -230px;

    border-radius: 50%;

    background: rgba(247, 190, 35, .12);
}


/* CONTENIDO */

.course-hero-content {
    position: relative;
    z-index: 3;

    max-width: 720px;
}

.discipline-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 38px;

    color: #746b83;
    text-decoration: none;

    font-size: .92rem;
    font-weight: 600;

    transition: color .2s ease;
}

.discipline-back:hover {
    color: #b91f86;
}

.course-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: #b91f86;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.course-hero h1 {
    margin: 0;

    max-width: 720px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(3.4rem, 5vw, 5.9rem);
    line-height: .98;
    letter-spacing: -.065em;

    color: #251944;
}

.course-hero h1 span {
    display: block;

    margin-top: 7px;

    background: linear-gradient(
        90deg,
        #b91f86,
        #6f38a8,
        #338fc5
    );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.course-hero-content > p {
    max-width: 650px;

    margin: 30px 0 0;

    color: #70677c;

    font-size: 1.08rem;
    line-height: 1.8;
}


/* BOTONES */

.course-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}

.course-page .discipline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 54px;
    padding: 0 23px;

    border-radius: 13px;

    font-weight: 700;
    text-decoration: none;

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

.course-page .discipline-btn.primary {
    color: #fff;

    background: linear-gradient(
        135deg,
        #b91f86,
        #64329b
    );

    box-shadow: 0 14px 35px rgba(126, 48, 143, .18);
}

.course-page .discipline-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(126, 48, 143, .25);
}

.course-page .discipline-btn.secondary {
    color: #281d43;
    background: rgba(255, 255, 255, .8);

    border: 1px solid rgba(40, 29, 67, .12);
}

.course-page .discipline-btn.secondary:hover {
    transform: translateY(-3px);
    background: #fff;
}


/* DETALLES HERO */

.course-hero-details {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;

    margin-top: 38px;
}

.course-hero-details span {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #625a70;

    font-size: .91rem;
    font-weight: 600;
}

.course-hero-details i {
    color: #b91f86;
}


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

.course-hero-media {
    position: relative;
    z-index: 2;

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

    min-height: 520px;
}

.course-image-frame {
    position: relative;
    z-index: 2;

    width: min(100%, 540px);
    height: 530px;

    border-radius: 34px;
    overflow: hidden;

    background: #eee;

    box-shadow:
        0 35px 80px rgba(48, 25, 72, .17);

    transform: rotate(1.5deg);
}

.course-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .7s ease;
}

.course-image-frame:hover img {
    transform: scale(1.035);
}

.course-image-frame::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(24, 14, 43, .28),
            transparent 45%
        );
}


/* BADGE */

.course-image-badge {
    position: absolute;
    z-index: 4;

    left: 24px;
    bottom: 24px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 13px 18px;

    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 16px;

    background: rgba(255, 255, 255, .9);

    backdrop-filter: blur(14px);
}

.course-image-badge i {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 12px;

    color: #fff;
    background: linear-gradient(135deg, #b91f86, #64329b);
}

.course-image-badge div {
    display: flex;
    flex-direction: column;
}

.course-image-badge strong {
    color: #261b40;
}

.course-image-badge span {
    color: #82788d;
    font-size: .78rem;
}


/* FORMAS DECORATIVAS */

.course-media-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}

.course-media-shape-one {
    width: 260px;
    height: 260px;

    right: -30px;
    top: 15px;

    background: rgba(64, 181, 224, .2);
}

.course-media-shape-two {
    width: 210px;
    height: 210px;

    left: 10px;
    bottom: -10px;

    background: rgba(192, 38, 139, .15);
}


/* =========================================================
   PRESENTACIÓN / INFORMACIÓN
   ========================================================= */

.course-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 90px;

    padding: 120px max(7vw, 70px);

    background: #fff;
}

.course-overview-main {
    max-width: 760px;
}

.course-section-label,
.course-overview-main > span {
    display: block;

    margin-bottom: 16px;

    color: #b91f86;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.course-overview h2,
.course-section-heading h2,
.course-features h2,
.course-audience h2,
.course-cta h2 {
    margin: 0;

    font-family: "Manrope", sans-serif;
    color: #251944;

    letter-spacing: -.045em;
}

.course-overview h2 {
    font-size: clamp(2.8rem, 4vw, 4.5rem);
}

.course-overview-main p {
    margin: 24px 0 0;

    color: #70677c;

    font-size: 1.05rem;
    line-height: 1.85;
}


/* TARJETA INFORMACIÓN */

.course-info-card {
    align-self: start;

    padding: 30px;

    border: 1px solid rgba(55, 37, 78, .08);
    border-radius: 25px;

    background: #faf8fc;

    box-shadow: 0 18px 50px rgba(44, 26, 65, .07);
}

.course-info-card > span {
    display: block;

    margin-bottom: 20px;

    color: #91889a;

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.course-info-item {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 17px 0;

    border-bottom: 1px solid rgba(45, 30, 67, .08);
}

.course-info-item i {
    display: grid;
    place-items: center;

    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    border-radius: 12px;

    color: #a72888;
    background: #f4e7f2;

    font-size: 1.05rem;
}

.course-info-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.course-info-item small {
    color: #93899d;
}

.course-info-item strong {
    color: #2b2044;
}

.course-info-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 22px;
    padding: 15px 17px;

    border-radius: 12px;

    color: #fff;
    background: #281d43;

    font-weight: 700;
    text-decoration: none;

    transition: transform .2s ease,
                background .2s ease;
}

.course-info-card > a:hover {
    transform: translateY(-2px);
    background: #b91f86;
}


/* =========================================================
   QUÉ APRENDERÁS
   ========================================================= */

.course-learning .course-section-heading {
    margin-bottom: 32px;
}

.course-learning {
    padding-top: 90px;
    padding-bottom: 100px;

    background: #f8f5fb;
}

.course-section-heading {
    max-width: 720px;

    margin-bottom: 55px;
}

.course-section-heading > span,
.course-features-intro > span,
.course-audience-card > div:first-child > span,
.course-cta > div > span {
    display: block;

    margin-bottom: 15px;

    color: #b91f86;

    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.course-section-heading h2 {
    font-size: clamp(2.8rem, 4vw, 4.4rem);
}

.course-section-heading p {
    max-width: 620px;

    margin: 20px 0 0;

    color: #766d80;

    line-height: 1.75;
}

.course-learning-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.course-learning-grid article {
    position: relative;

    min-height: 310px;

    padding: 27px;

    border: 1px solid rgba(52, 35, 75, .07);
    border-radius: 22px;

    background: #fff;

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

.course-learning-grid article:hover {
    transform: translateY(-7px);

    box-shadow:
        0 25px 55px rgba(48, 29, 70, .09);
}

.course-learning-grid article > span {
    position: absolute;
    top: 23px;
    right: 23px;

    color: #c4bcc9;

    font-size: .75rem;
    font-weight: 800;
}

.course-learning-grid article > i {
    display: grid;
    place-items: center;

    width: 55px;
    height: 55px;

    margin-bottom: 48px;

    border-radius: 15px;

    color: #b91f86;
    background: #f6e9f3;

    font-size: 1.35rem;
}

.course-learning-grid h3 {
    margin: 0 0 12px;

    color: #2b2044;

    font-size: 1.2rem;
}

.course-learning-grid p {
    margin: 0;

    color: #7a7184;

    line-height: 1.65;
}


/* =========================================================
   EXPERIENCIA / CARACTERÍSTICAS
   ========================================================= */

.course-features {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;

    padding: 125px max(7vw, 70px);

    background: #251944;
}

.course-features-intro {
    max-width: 480px;
}

.course-features-intro > span {
    color: #ef7fc4;
}

.course-features h2 {
    color: #fff;

    font-size: clamp(2.8rem, 4vw, 4.5rem);
    line-height: 1.06;
}

.course-features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.course-features-list article {
    display: flex;
    gap: 18px;

    padding: 30px;

    border-left: 1px solid rgba(255, 255, 255, .11);
    border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.course-features-list article > i {
    flex: 0 0 45px;

    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    border-radius: 12px;

    color: #ff9dd7;
    background: rgba(255, 255, 255, .08);
}

.course-features-list h3 {
    margin: 0 0 8px;

    color: #fff;
}

.course-features-list p {
    margin: 0;

    color: rgba(255, 255, 255, .65);

    line-height: 1.65;
}


/* =========================================================
   PARA QUIÉN
   ========================================================= */

.course-audience {
    padding: 100px max(7vw, 70px);

    background: #fff;
}

.course-audience-card {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;

    padding: 65px 70px;

    border-radius: 32px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(64, 181, 224, .2),
            transparent 27%
        ),
        linear-gradient(
            120deg,
            #faf3f8,
            #f5f0fb
        );
}

.course-audience-card > div:first-child {
    position: relative;
    z-index: 2;

    max-width: 700px;
}

.course-audience h2 {
    font-size: clamp(2.5rem, 4vw, 4.2rem);
}

.course-audience p {
    max-width: 620px;

    margin: 20px 0 0;

    color: #716779;

    line-height: 1.8;
}

.course-audience-icon {
    flex: 0 0 170px;

    display: grid;
    place-items: center;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #c32b8e,
            #6e38a4,
            #3faed5
        );

    box-shadow:
        0 25px 60px rgba(102, 49, 144, .2);

    font-size: 4rem;

    transform: rotate(7deg);
}


/* =========================================================
   OTROS CURSOS
   ========================================================= */

.other-courses {
    padding: 120px max(7vw, 70px);

    background: #faf8fc;
}

.other-courses-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.other-course-card {
    min-width: 0;

    padding: 12px 12px 22px;

    border: 1px solid rgba(48, 30, 68, .07);
    border-radius: 20px;

    color: inherit;
    background: #fff;

    text-decoration: none;

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

.other-course-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 24px 50px rgba(46, 28, 66, .1);
}

.other-course-image {
    width: 100%;
    aspect-ratio: 1 / .78;

    margin-bottom: 20px;

    overflow: hidden;

    border-radius: 14px;

    background: #ece8ef;
}

.other-course-image img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    transition: transform .5s ease;
}

.other-course-card:hover img {
    transform: scale(1.06);
}

.other-course-card > span {
    display: block;

    padding: 0 8px;

    color: #b91f86;

    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.other-course-card h3 {
    margin: 7px 0 22px;
    padding: 0 8px;

    color: #291e43;

    font-size: 1.3rem;
}

.other-course-card > div:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 8px;

    color: #675d70;

    font-size: .85rem;
    font-weight: 700;
}

.other-course-card > div:last-child i {
    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    border-radius: 50%;

    color: #fff;
    background: #291e43;
}


/* =========================================================
   CTA FINAL
   ========================================================= */

.course-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;

    padding: 95px max(7vw, 70px);

    background:
        linear-gradient(
            120deg,
            #3a235e 0%,
            #74328c 48%,
            #c12086 100%
        );
}

.course-cta > div {
    max-width: 720px;
}

.course-cta > div > span {
    color: #ffd25d;
}

.course-cta h2 {
    color: #fff;

    font-size: clamp(2.7rem, 4vw, 4.6rem);
    line-height: 1.05;
}

.course-cta p {
    max-width: 580px;

    margin: 20px 0 0;

    color: rgba(255, 255, 255, .72);

    font-size: 1.02rem;
    line-height: 1.7;
}

.course-cta .discipline-cta-button {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 18px 25px;

    border-radius: 14px;

    color: #2b2044;
    background: #fff;

    font-weight: 800;
    text-decoration: none;

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

.course-cta .discipline-cta-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(23, 13, 39, .2);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

    .course-hero {
        grid-template-columns: 1fr 1fr;

        gap: 40px;

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

    .course-learning-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .other-courses-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 900px) {

    .course-hero {
        grid-template-columns: 1fr;

        padding: 60px 30px 80px;
    }

    .course-hero-media {
        min-height: auto;
    }

    .course-image-frame {
        width: 100%;
        max-width: 650px;
        height: 500px;
    }

    .course-overview {
        grid-template-columns: 1fr;

        gap: 50px;
        padding: 90px 30px;
    }

    .course-features {
        grid-template-columns: 1fr;

        gap: 50px;
        padding: 90px 30px;
    }

    .course-learning,
    .other-courses,
    .course-audience {
        padding-left: 30px;
        padding-right: 30px;
    }

    .course-audience-card {
        padding: 50px 40px;
    }

    .course-audience-icon {
        flex-basis: 120px;

        width: 120px;
        height: 120px;

        font-size: 3rem;
    }

    .course-cta {
        align-items: flex-start;
        flex-direction: column;

        padding: 75px 30px;
    }

}


@media (max-width: 650px) {

    .course-hero {
        padding-left: 20px;
        padding-right: 20px;
    }

    .course-hero h1 {
        font-size: 3.2rem;
    }

    .course-hero-actions {
        flex-direction: column;
    }

    .course-page .discipline-btn {
        width: 100%;
    }

    .course-hero-details {
        flex-direction: column;
        gap: 12px;
    }

    .course-image-frame {
        height: 420px;

        border-radius: 24px;

        transform: none;
    }

    .course-learning {
        padding: 80px 20px;
    }

    .course-learning-grid {
        grid-template-columns: 1fr;
    }

    .course-features {
        padding-left: 20px;
        padding-right: 20px;
    }

    .course-features-list {
        grid-template-columns: 1fr;
    }

    .course-overview {
        padding-left: 20px;
        padding-right: 20px;
    }

    .course-audience {
        padding: 70px 20px;
    }

    .course-audience-card {
        align-items: flex-start;
        flex-direction: column;

        padding: 40px 30px;
    }

    .other-courses {
        padding: 80px 20px;
    }

    .other-courses-grid {
        grid-template-columns: 1fr;
    }

    .course-cta {
        padding-left: 20px;
        padding-right: 20px;
    }

}

/* ==================================================
   IDENTIDAD DE COLOR - CURSOS DE MÚSICA
   ================================================== */

/* 01 · VIOLÍN */
.music-page .course-card:nth-child(1):hover {
    background: linear-gradient(
        145deg,
        #102f63 0%,
        #1e5d94 52%,
        #55c8c6 100%
    ) !important;
}

/* 02 · PIANO */
.music-page .course-card:nth-child(2):hover {
    background: linear-gradient(
        145deg,
        #173f82 0%,
        #347fc2 52%,
        #67d5d0 100%
    ) !important;
}

/* 03 · GUITARRA */
.music-page .course-card:nth-child(3):hover {
    background: linear-gradient(
        145deg,
        #225a91 0%,
        #3e85bc 55%,
        #e9aa4b 100%
    ) !important;
}

/* 04 · BATERÍA */
.music-page .course-card:nth-child(4):hover {
    background: linear-gradient(
        145deg,
        #102c5e 0%,
        #246d93 52%,
        #55cfc1 100%
    ) !important;
}

/* 05 · TÉCNICA VOCAL */
.music-page .course-card:nth-child(5):hover {
    background: linear-gradient(
        145deg,
        #293f87 0%,
        #5752b8 52%,
        #e77b78 100%
    ) !important;
}

/* 06 · INICIACIÓN MUSICAL */
.music-page .course-card:nth-child(6):hover {
    background: linear-gradient(
        145deg,
        #3283b8 0%,
        #61b6e8 52%,
        #7764c8 100%
    ) !important;
}

/* ==================================================
   IDENTIDAD INDIVIDUAL · PIANO
   Azul profundo + azul brillante + aguamarina
   ================================================== */

.piano-course-page {
    --piano-deep: #173f82;
    --piano-blue: #347fc2;
    --piano-aqua: #67d5d0;
    --piano-dark: #102b59;
    --piano-soft: #eef7fb;
    --piano-soft-aqua: #e8f8f6;
}


/* =========================
   HEADER
   ========================= */

.piano-course-page .discipline-menu a:hover,
.piano-course-page .discipline-back:hover {
    color: var(--piano-blue);
}

.piano-course-page .discipline-menu a::after {
    background: var(--piano-aqua);
}

.piano-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--piano-deep),
            var(--piano-blue) 58%,
            var(--piano-aqua)
        );

    box-shadow:
        0 12px 30px rgba(23, 63, 130, .18);
}


/* =========================
   HERO
   ========================= */

.piano-course-page .course-hero {
    background:
        radial-gradient(
            circle at 84% 23%,
            rgba(103, 213, 208, .20),
            transparent 29%
        ),
        radial-gradient(
            circle at 70% 82%,
            rgba(52, 127, 194, .14),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f9fd 55%,
            #edf9f8 100%
        );
}

.piano-course-page .course-hero::before {
    background:
        rgba(103, 213, 208, .13);
}

.piano-course-page .course-eyebrow {
    color: var(--piano-blue);
}

.piano-course-page .course-hero h1 {
    color: var(--piano-dark);
}

.piano-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--piano-deep),
            var(--piano-blue) 52%,
            var(--piano-aqua)
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* BOTÓN PRINCIPAL */

.piano-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--piano-deep),
            var(--piano-blue) 62%,
            var(--piano-aqua)
        );

    box-shadow:
        0 14px 35px rgba(23, 63, 130, .20);
}

.piano-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 18px 42px rgba(23, 63, 130, .28);
}


/* BOTÓN SECUNDARIO */

.piano-course-page .discipline-btn.secondary {
    color: var(--piano-deep);

    border:
        1px solid rgba(52, 127, 194, .18);

    background:
        rgba(255, 255, 255, .82);
}


/* DETALLES */

.piano-course-page .course-hero-details i {
    color: var(--piano-blue);
}


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

.piano-course-page .course-image-frame {
    box-shadow:
        0 35px 80px rgba(23, 63, 130, .18);
}

.piano-course-page .course-image-badge i {
    background:
        linear-gradient(
            135deg,
            var(--piano-deep),
            var(--piano-blue),
            var(--piano-aqua)
        );
}

.piano-course-page .course-media-shape-one {
    background:
        rgba(103, 213, 208, .25);
}

.piano-course-page .course-media-shape-two {
    background:
        rgba(52, 127, 194, .16);
}


/* =========================
   INFORMACIÓN DEL CURSO
   ========================= */

.piano-course-page .course-section-label,
.piano-course-page .course-overview-main > span {
    color: var(--piano-blue);
}

.piano-course-page .course-overview h2,
.piano-course-page .course-section-heading h2,
.piano-course-page .course-audience h2 {
    color: var(--piano-dark);
}

.piano-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #f7fbfe,
            var(--piano-soft-aqua)
        );

    border:
        1px solid rgba(52, 127, 194, .10);
}

.piano-course-page .course-info-item i {
    color: var(--piano-blue);
    background: #e3f1fb;
}

.piano-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--piano-deep),
            var(--piano-blue)
        );
}

.piano-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--piano-blue),
            var(--piano-aqua)
        );
}


/* =========================
   QUÉ APRENDERÁS
   ========================= */

.piano-course-page .course-learning {
    background:
        linear-gradient(
            180deg,
            #f4f9fd,
            #eef8f8
        );
}

.piano-course-page .course-section-heading > span {
    color: var(--piano-blue);
}

.piano-course-page .course-learning-grid article {
    border:
        1px solid rgba(52, 127, 194, .09);
}

.piano-course-page .course-learning-grid article > i {
    color: var(--piano-blue);

    background:
        linear-gradient(
            135deg,
            #e5f0fb,
            #e3f8f5
        );
}

.piano-course-page .course-learning-grid article:hover {
    box-shadow:
        0 25px 55px rgba(23, 63, 130, .11);
}


/* =========================
   EXPERIENCIA KIRU
   ========================= */

.piano-course-page .course-features {
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(103, 213, 208, .14),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #0d2852 0%,
            #173f82 55%,
            #245f91 100%
        );
}

.piano-course-page .course-features-intro > span {
    color: var(--piano-aqua);
}

.piano-course-page .course-features-list article > i {
    color: var(--piano-aqua);

    background:
        rgba(103, 213, 208, .10);
}


/* =========================
   PARA QUIÉN
   ========================= */

.piano-course-page
.course-audience-card > div:first-child > span {
    color: var(--piano-blue);
}

.piano-course-page .course-audience-card {
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(103, 213, 208, .25),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #f3f8fd,
            #eaf8f7
        );
}

.piano-course-page .course-audience-icon {
    background:
        linear-gradient(
            135deg,
            var(--piano-deep),
            var(--piano-blue) 55%,
            var(--piano-aqua)
        );

    box-shadow:
        0 25px 60px rgba(23, 63, 130, .22);
}


/* =========================
   OTROS CURSOS
   ========================= */

.piano-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #f8fbfe,
            #f0f8f8
        );
}

.piano-course-page .other-course-card > span {
    color: var(--piano-blue);
}

.piano-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--piano-deep),
            var(--piano-blue)
        );
}

.piano-course-page .other-course-card:hover {
    box-shadow:
        0 24px 50px rgba(23, 63, 130, .13);
}


/* =========================
   CTA FINAL
   ========================= */

.piano-course-page .course-cta {
    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(103, 213, 208, .22),
            transparent 27%
        ),
        linear-gradient(
            120deg,
            #102b59 0%,
            #173f82 42%,
            #347fc2 72%,
            #54c5c8 100%
        );
}

.piano-course-page .course-cta > div > span {
    color: #a8f1e8;
}

.piano-course-page
.course-cta .discipline-cta-button {
    color: var(--piano-deep);
}

.piano-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px rgba(7, 34, 70, .25);
}

/* =========================================================
   PIANO · ARTE EXPERIENCIA KIRU
   ========================================================= */

.piano-course-page .course-features-intro {
    position: relative;
    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* CONTENEDOR GRÁFICO */

.piano-feature-art {
    position: relative;

    width: 100%;
    height: 230px;

    margin-top: auto;

    opacity: .95;
}


/* =========================
   PENTAGRAMA
   ========================= */

.piano-staff {
    position: absolute;

    left: 0;
    bottom: 55px;

    width: 92%;
    height: 85px;

    transform: rotate(-6deg);
}

.piano-staff span {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(103, 213, 208, 0),
            rgba(103, 213, 208, .42),
            rgba(88, 175, 227, .22),
            rgba(103, 213, 208, 0)
        );
}

.piano-staff span:nth-child(1) {
    top: 0;
}

.piano-staff span:nth-child(2) {
    top: 20px;
}

.piano-staff span:nth-child(3) {
    top: 40px;
}

.piano-staff span:nth-child(4) {
    top: 60px;
}

.piano-staff span:nth-child(5) {
    top: 80px;
}


/* =========================
   NOTAS
   ========================= */

.piano-feature-art > i {
    position: absolute;

    z-index: 2;

    color: var(--piano-aqua);

    filter:
        drop-shadow(
            0 8px 18px
            rgba(103, 213, 208, .15)
        );
}

.piano-feature-art .note-one {
    left: 12%;
    bottom: 93px;

    font-size: 3.2rem;

    transform: rotate(-8deg);
}

.piano-feature-art .note-two {
    left: 47%;
    bottom: 55px;

    font-size: 2rem;

    opacity: .62;

    transform: rotate(8deg);
}

.piano-feature-art .note-three {
    right: 9%;
    bottom: 112px;

    font-size: 2.6rem;

    opacity: .78;

    transform: rotate(12deg);
}


/* =========================
   CÍRCULOS DECORATIVOS
   ========================= */

.piano-feature-circle {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(103, 213, 208, .15);

    pointer-events: none;
}

.piano-feature-circle.circle-one {
    width: 145px;
    height: 145px;

    left: -55px;
    bottom: -55px;
}

.piano-feature-circle.circle-two {
    width: 85px;
    height: 85px;

    right: 25px;
    top: 20px;

    border-color:
        rgba(88, 175, 227, .12);
}


/* PEQUEÑO BRILLO */

.piano-feature-art::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    left: 36%;
    bottom: 15px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(103, 213, 208, .12),
            transparent 68%
        );

    filter: blur(5px);

    pointer-events: none;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .piano-feature-art {
        height: 170px;
        margin-top: 35px;
    }

}

/* ==================================================
   IDENTIDAD INDIVIDUAL · VIOLÍN
   Azul noche + azul profundo + azul vivo
   + cyan hielo + dorado/violeta como acentos
   ================================================== */

.violin-course-page {
    --violin-night: #0b2345;
    --violin-deep: #174a82;
    --violin-blue: #2878b8;
    --violin-cyan: #62c6d9;
    --violin-ice: #eaf5fa;

    --violin-gold: #e7a84b;
    --violin-coral: #e76f68;
    --violin-lilac: #7d72c8;
}


/* ==================================================
   HEADER
   ================================================== */

.violin-course-page .discipline-menu a:hover,
.violin-course-page .discipline-back:hover {
    color: var(--violin-blue);
}

.violin-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--violin-blue),
            var(--violin-cyan)
        );
}

.violin-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--violin-night) 0%,
            var(--violin-deep) 45%,
            var(--violin-blue) 100%
        );

    box-shadow:
        0 12px 30px rgba(11, 35, 69, .20);
}

.violin-course-page .course-header-cta:hover {
    box-shadow:
        0 16px 35px rgba(11, 35, 69, .28);
}


/* ==================================================
   HERO
   ================================================== */

.violin-course-page .course-hero {
    background:

        radial-gradient(
            circle at 84% 18%,
            rgba(98, 198, 217, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 72% 78%,
            rgba(125, 114, 200, .13),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 85%,
            rgba(231, 168, 75, .10),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3f8fc 55%,
            #edf7f9 100%
        );
}


.violin-course-page .course-hero::before {
    background:
        rgba(231, 168, 75, .11);
}


.violin-course-page .course-eyebrow {
    color: var(--violin-blue);
}


.violin-course-page .course-hero h1 {
    color: var(--violin-night);
}


.violin-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--violin-night) 0%,
            var(--violin-deep) 32%,
            var(--violin-blue) 66%,
            var(--violin-cyan) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES HERO
   ================================================== */

.violin-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--violin-night),
            var(--violin-deep) 48%,
            var(--violin-blue) 78%,
            var(--violin-cyan)
        );

    box-shadow:
        0 15px 35px
        rgba(23, 74, 130, .22);
}


.violin-course-page
.discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px
        rgba(23, 74, 130, .31);
}


.violin-course-page .discipline-btn.secondary {
    color:
        var(--violin-night);

    border:
        1px solid
        rgba(40, 120, 184, .16);

    background:
        rgba(255, 255, 255, .86);
}


.violin-course-page
.discipline-btn.secondary:hover {
    border-color:
        rgba(98, 198, 217, .45);

    box-shadow:
        0 12px 25px
        rgba(23, 74, 130, .08);
}


/* ==================================================
   DETALLES HERO
   ================================================== */

.violin-course-page
.course-hero-details i {
    color: var(--violin-blue);
}


/* pequeños acentos alternos */

.violin-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--violin-lilac);
}

.violin-course-page
.course-hero-details span:nth-child(3) i {
    color: var(--violin-gold);
}


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

.violin-course-page
.course-image-frame {
    box-shadow:
        0 35px 80px
        rgba(11, 35, 69, .20);
}


.violin-course-page
.course-image-badge i {
    background:
        linear-gradient(
            135deg,
            var(--violin-night),
            var(--violin-blue),
            var(--violin-cyan)
        );
}


/* decoraciones */

.violin-course-page
.course-media-shape-one {
    background:
        rgba(98, 198, 217, .25);
}


.violin-course-page
.course-media-shape-two {
    background:
        rgba(125, 114, 200, .16);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.violin-course-page
.course-section-label,

.violin-course-page
.course-overview-main > span {
    color:
        var(--violin-blue);
}


.violin-course-page
.course-overview h2,

.violin-course-page
.course-section-heading h2,

.violin-course-page
.course-audience h2 {
    color:
        var(--violin-night);
}


/* tarjeta lateral */

.violin-course-page
.course-info-card {
    background:
        linear-gradient(
            145deg,
            #f8fbfd,
            #edf7f9
        );

    border:
        1px solid
        rgba(40, 120, 184, .10);

    box-shadow:
        0 18px 50px
        rgba(11, 35, 69, .07);
}


/* iconos información */

.violin-course-page
.course-info-item i {
    color:
        var(--violin-blue);

    background:
        #e6f2f8;
}


/* alternamos algunos colores */

.violin-course-page
.course-info-item:nth-child(3) i {
    color:
        var(--violin-lilac);

    background:
        rgba(125, 114, 200, .10);
}


.violin-course-page
.course-info-item:nth-child(4) i {
    color:
        #b17a27;

    background:
        rgba(231, 168, 75, .14);
}


/* whatsapp */

.violin-course-page
.course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--violin-night),
            var(--violin-deep),
            var(--violin-blue)
        );
}


.violin-course-page
.course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--violin-deep),
            var(--violin-blue),
            var(--violin-cyan)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.violin-course-page
.course-learning {
    background:
        linear-gradient(
            180deg,
            #f5f9fc,
            #edf6f8
        );
}


.violin-course-page
.course-section-heading > span {
    color:
        var(--violin-blue);
}


.violin-course-page
.course-learning-grid article {
    border:
        1px solid
        rgba(40, 120, 184, .08);
}


.violin-course-page
.course-learning-grid article:hover {
    box-shadow:
        0 25px 55px
        rgba(11, 35, 69, .11);
}


/* icono 01 */

.violin-course-page
.course-learning-grid article:nth-child(1) > i {
    color:
        var(--violin-blue);

    background:
        rgba(40, 120, 184, .10);
}


/* icono 02 */

.violin-course-page
.course-learning-grid article:nth-child(2) > i {
    color:
        var(--violin-cyan);

    background:
        rgba(98, 198, 217, .12);
}


/* icono 03 */

.violin-course-page
.course-learning-grid article:nth-child(3) > i {
    color:
        var(--violin-lilac);

    background:
        rgba(125, 114, 200, .11);
}


/* icono 04 */

.violin-course-page
.course-learning-grid article:nth-child(4) > i {
    color:
        #b17a27;

    background:
        rgba(231, 168, 75, .15);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.violin-course-page
.course-features {
    background:

        radial-gradient(
            circle at 92% 20%,
            rgba(98, 198, 217, .12),
            transparent 28%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(125, 114, 200, .08),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #071a35 0%,
            #0b2345 30%,
            #174a82 68%,
            #245f8f 100%
        );
}


.violin-course-page
.course-features-intro > span {
    color:
        var(--violin-cyan);
}


/* iconos derecha */

.violin-course-page
.course-features-list article:nth-child(1) > i {
    color:
        var(--violin-cyan);

    background:
        rgba(98, 198, 217, .10);
}


.violin-course-page
.course-features-list article:nth-child(2) > i {
    color:
        #f0b65b;

    background:
        rgba(231, 168, 75, .10);
}


.violin-course-page
.course-features-list article:nth-child(3) > i {
    color:
        #a89ee6;

    background:
        rgba(125, 114, 200, .12);
}


.violin-course-page
.course-features-list article:nth-child(4) > i {
    color:
        #79dce3;

    background:
        rgba(98, 198, 217, .10);
}


/* ==================================================
   ARTE IZQUIERDO · VIOLÍN
   ================================================== */

.violin-course-page
.course-features-intro {
    position:
        relative;

    align-self:
        stretch;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;
}


.violin-feature-art {
    position:
        relative;

    width:
        100%;

    height:
        230px;

    margin-top:
        auto;
}


/* pentagrama */

.violin-staff {
    position:
        absolute;

    left:
        0;

    bottom:
        52px;

    width:
        92%;

    height:
        90px;

    transform:
        rotate(-7deg);
}


.violin-staff span {
    position:
        absolute;

    left:
        0;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(98, 198, 217, 0),
            rgba(98, 198, 217, .38),
            rgba(231, 168, 75, .18),
            rgba(98, 198, 217, 0)
        );
}


.violin-staff span:nth-child(1) {
    top: 0;
}

.violin-staff span:nth-child(2) {
    top: 21px;
}

.violin-staff span:nth-child(3) {
    top: 42px;
}

.violin-staff span:nth-child(4) {
    top: 63px;
}

.violin-staff span:nth-child(5) {
    top: 84px;
}


/* notas */

.violin-feature-art > i {
    position:
        absolute;

    z-index:
        2;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(11, 35, 69, .18)
        );
}


.violin-feature-art .note-one {
    left:
        12%;

    bottom:
        92px;

    color:
        var(--violin-cyan);

    font-size:
        3.1rem;

    transform:
        rotate(-7deg);
}


.violin-feature-art .note-two {
    left:
        48%;

    bottom:
        52px;

    color:
        var(--violin-gold);

    font-size:
        2rem;

    opacity:
        .75;

    transform:
        rotate(8deg);
}


.violin-feature-art .note-three {
    right:
        10%;

    bottom:
        114px;

    color:
        #a89ee6;

    font-size:
        2.6rem;

    opacity:
        .85;

    transform:
        rotate(10deg);
}


/* círculos */

.violin-feature-circle {
    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;
}


.violin-feature-circle.circle-one {
    width:
        145px;

    height:
        145px;

    left:
        -55px;

    bottom:
        -55px;

    border:
        1px solid
        rgba(98, 198, 217, .15);
}


.violin-feature-circle.circle-two {
    width:
        88px;

    height:
        88px;

    right:
        24px;

    top:
        18px;

    border:
        1px solid
        rgba(231, 168, 75, .15);
}


/* glow */

.violin-feature-art::after {
    content:
        "";

    position:
        absolute;

    width:
        145px;

    height:
        145px;

    left:
        37%;

    bottom:
        5px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(98, 198, 217, .10),
            rgba(125, 114, 200, .05),
            transparent 68%
        );

    filter:
        blur(6px);

    pointer-events:
        none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.violin-course-page
.course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(98, 198, 217, .25),
            transparent 28%
        ),

        radial-gradient(
            circle at 73% 90%,
            rgba(231, 168, 75, .09),
            transparent 26%
        ),

        linear-gradient(
            120deg,
            #f4f8fc,
            #edf7f9
        );
}


.violin-course-page
.course-audience-card
> div:first-child > span {
    color:
        var(--violin-blue);
}


.violin-course-page
.course-audience-icon {
    background:
        linear-gradient(
            135deg,
            var(--violin-night),
            var(--violin-deep) 42%,
            var(--violin-blue) 72%,
            var(--violin-cyan)
        );

    box-shadow:
        0 25px 60px
        rgba(11, 35, 69, .23);
}


/* borde cálido sutil */

.violin-course-page
.course-audience-icon::after {
    content:
        "";

    position:
        absolute;

    inset:
        8px;

    border:
        1px solid
        rgba(231, 168, 75, .30);

    border-radius:
        50%;

    pointer-events:
        none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.violin-course-page
.other-courses {
    background:
        linear-gradient(
            180deg,
            #f8fbfd,
            #edf6f8
        );
}


.violin-course-page
.other-course-card > span {
    color:
        var(--violin-blue);
}


.violin-course-page
.other-course-card {
    border:
        1px solid
        rgba(40, 120, 184, .08);
}


.violin-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(11, 35, 69, .13);
}


/* flecha */

.violin-course-page
.other-course-card
> div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--violin-night),
            var(--violin-deep),
            var(--violin-blue)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.violin-course-page
.course-cta {
    background:

        radial-gradient(
            circle at 84% 32%,
            rgba(98, 198, 217, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 70% 90%,
            rgba(231, 168, 75, .10),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #071a35 0%,
            #0b2345 30%,
            #174a82 60%,
            #2878b8 82%,
            #4caabc 100%
        );
}


.violin-course-page
.course-cta > div > span {
    color:
        #9ee8ed;
}


.violin-course-page
.course-cta .discipline-cta-button {
    color:
        var(--violin-night);
}


.violin-course-page
.course-cta
.discipline-cta-button i {
    color:
        var(--violin-gold);
}


.violin-course-page
.course-cta
.discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(5, 25, 52, .30);
}


/* ==================================================
   FOOTER · PEQUEÑOS DETALLES VIOLÍN
   ================================================== */

.violin-course-page
.discipline-footer-column a:hover,

.violin-course-page
.discipline-footer-bottom a:hover {
    color:
        var(--violin-cyan);
}


.violin-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--violin-deep),
            var(--violin-blue),
            var(--violin-cyan)
        );
}


/* ==================================================
   RESPONSIVE ARTE VIOLÍN
   ================================================== */

@media (max-width: 900px) {

    .violin-feature-art {
        height:
            170px;

        margin-top:
            35px;
    }

}

/* ==================================================
   IDENTIDAD INDIVIDUAL · GUITARRA
   Índigo + azul profundo + azul vivo
   + ámbar/dorado + coral como acentos
   ================================================== */

.guitarra-course-page {
    --guitar-night: #172554;
    --guitar-deep: #22458a;
    --guitar-blue: #3b73c5;
    --guitar-electric: #4f8fe0;

    --guitar-amber: #e9a23b;
    --guitar-gold: #f2c66d;
    --guitar-coral: #e97862;

    --guitar-light: #eef4fc;
    --guitar-soft: #fff8eb;
}


/* ==================================================
   HEADER
   ================================================== */

.guitarra-course-page .discipline-menu a:hover,
.guitarra-course-page .discipline-back:hover {
    color: var(--guitar-blue);
}

.guitarra-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--guitar-blue),
            var(--guitar-amber)
        );
}

.guitarra-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--guitar-night) 0%,
            var(--guitar-deep) 48%,
            var(--guitar-blue) 100%
        );

    box-shadow:
        0 12px 30px rgba(23, 37, 84, .20);
}

.guitarra-course-page .course-header-cta:hover {
    box-shadow:
        0 16px 35px rgba(23, 37, 84, .28);
}


/* ==================================================
   HERO
   ================================================== */

.guitarra-course-page .course-hero {
    background:

        radial-gradient(
            circle at 84% 18%,
            rgba(79, 143, 224, .18),
            transparent 27%
        ),

        radial-gradient(
            circle at 72% 78%,
            rgba(233, 162, 59, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 9% 86%,
            rgba(233, 120, 98, .09),
            transparent 26%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f7fd 55%,
            #fff8ed 100%
        );
}

.guitarra-course-page .course-hero::before {
    background:
        rgba(233, 162, 59, .12);
}

.guitarra-course-page .course-eyebrow {
    color: var(--guitar-blue);
}

.guitarra-course-page .course-hero h1 {
    color: var(--guitar-night);
}

.guitarra-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--guitar-night) 0%,
            var(--guitar-deep) 34%,
            var(--guitar-blue) 67%,
            var(--guitar-amber) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* ==================================================
   BOTONES HERO
   ================================================== */

.guitarra-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--guitar-night),
            var(--guitar-deep) 48%,
            var(--guitar-blue) 78%,
            var(--guitar-amber)
        );

    box-shadow:
        0 15px 35px rgba(34, 69, 138, .22);
}

.guitarra-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px rgba(34, 69, 138, .31);
}

.guitarra-course-page .discipline-btn.secondary {
    color: var(--guitar-night);

    border:
        1px solid rgba(59, 115, 197, .16);

    background:
        rgba(255, 255, 255, .88);
}

.guitarra-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(233, 162, 59, .38);

    box-shadow:
        0 12px 25px rgba(34, 69, 138, .08);
}


/* ==================================================
   DETALLES HERO
   ================================================== */

.guitarra-course-page .course-hero-details i {
    color: var(--guitar-blue);
}

.guitarra-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--guitar-coral);
}

.guitarra-course-page
.course-hero-details span:nth-child(3) i {
    color: var(--guitar-amber);
}


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

.guitarra-course-page .course-image-frame {
    box-shadow:
        0 35px 80px rgba(23, 37, 84, .20);
}

.guitarra-course-page .course-image-badge i {
    background:
        linear-gradient(
            135deg,
            var(--guitar-night),
            var(--guitar-blue),
            var(--guitar-amber)
        );
}

.guitarra-course-page .course-media-shape-one {
    background:
        rgba(79, 143, 224, .22);
}

.guitarra-course-page .course-media-shape-two {
    background:
        rgba(233, 162, 59, .18);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.guitarra-course-page .course-section-label,
.guitarra-course-page .course-overview-main > span {
    color: var(--guitar-blue);
}

.guitarra-course-page .course-overview h2,
.guitarra-course-page .course-section-heading h2,
.guitarra-course-page .course-audience h2 {
    color: var(--guitar-night);
}


/* TARJETA LATERAL */

.guitarra-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #f8faff,
            #fff8ec
        );

    border:
        1px solid rgba(59, 115, 197, .09);

    box-shadow:
        0 18px 50px rgba(23, 37, 84, .07);
}

.guitarra-course-page .course-info-item i {
    color: var(--guitar-blue);
    background: #e8f0fb;
}

.guitarra-course-page
.course-info-item:nth-child(3) i {
    color: var(--guitar-coral);
    background: rgba(233, 120, 98, .11);
}

.guitarra-course-page
.course-info-item:nth-child(4) i {
    color: #b47417;
    background: rgba(233, 162, 59, .15);
}


/* WHATSAPP */

.guitarra-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--guitar-night),
            var(--guitar-deep),
            var(--guitar-blue)
        );
}

.guitarra-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--guitar-deep),
            var(--guitar-blue),
            var(--guitar-amber)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.guitarra-course-page .course-learning {
    background:
        linear-gradient(
            180deg,
            #f5f8fd,
            #fff8ed
        );
}

.guitarra-course-page .course-section-heading > span {
    color: var(--guitar-blue);
}

.guitarra-course-page .course-learning-grid article {
    border:
        1px solid rgba(59, 115, 197, .08);
}

.guitarra-course-page .course-learning-grid article:hover {
    box-shadow:
        0 25px 55px rgba(23, 37, 84, .11);
}


/* ICONOS POR TARJETA */

.guitarra-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--guitar-blue);
    background: rgba(59, 115, 197, .10);
}

.guitarra-course-page
.course-learning-grid article:nth-child(2) > i {
    color: #b47417;
    background: rgba(233, 162, 59, .15);
}

.guitarra-course-page
.course-learning-grid article:nth-child(3) > i {
    color: var(--guitar-coral);
    background: rgba(233, 120, 98, .11);
}

.guitarra-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--guitar-electric);
    background: rgba(79, 143, 224, .11);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.guitarra-course-page .course-features {
    background:

        radial-gradient(
            circle at 92% 20%,
            rgba(233, 162, 59, .13),
            transparent 28%
        ),

        radial-gradient(
            circle at 12% 90%,
            rgba(79, 143, 224, .09),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #111d43 0%,
            #172554 30%,
            #22458a 65%,
            #315f9e 100%
        );
}

.guitarra-course-page
.course-features-intro > span {
    color: var(--guitar-gold);
}


/* ICONOS DE LA DERECHA */

.guitarra-course-page
.course-features-list article:nth-child(1) > i {
    color: var(--guitar-gold);
    background: rgba(233, 162, 59, .11);
}

.guitarra-course-page
.course-features-list article:nth-child(2) > i {
    color: #8fb6f2;
    background: rgba(79, 143, 224, .11);
}

.guitarra-course-page
.course-features-list article:nth-child(3) > i {
    color: #ef9180;
    background: rgba(233, 120, 98, .10);
}

.guitarra-course-page
.course-features-list article:nth-child(4) > i {
    color: var(--guitar-gold);
    background: rgba(233, 162, 59, .10);
}


/* ==================================================
   ARTE IZQUIERDO · GUITARRA
   ================================================== */

.guitarra-course-page .course-features-intro {
    position: relative;
    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.guitarra-feature-art {
    position: relative;

    width: 100%;
    height: 230px;

    margin-top: auto;
}


/* CUERDAS DECORATIVAS */

.guitarra-strings {
    position: absolute;

    left: 0;
    bottom: 55px;

    width: 94%;
    height: 95px;

    transform: rotate(-7deg);
}

.guitarra-strings span {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(233, 162, 59, 0),
            rgba(233, 162, 59, .42),
            rgba(79, 143, 224, .22),
            rgba(233, 162, 59, 0)
        );
}

.guitarra-strings span:nth-child(1) {
    top: 0;
}

.guitarra-strings span:nth-child(2) {
    top: 18px;
}

.guitarra-strings span:nth-child(3) {
    top: 36px;
}

.guitarra-strings span:nth-child(4) {
    top: 54px;
}

.guitarra-strings span:nth-child(5) {
    top: 72px;
}

.guitarra-strings span:nth-child(6) {
    top: 90px;
}


/* NOTAS */

.guitarra-feature-art > i {
    position: absolute;
    z-index: 2;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(23, 37, 84, .18)
        );
}

.guitarra-feature-art .note-one {
    left: 12%;
    bottom: 97px;

    color: var(--guitar-gold);

    font-size: 3.1rem;

    transform: rotate(-8deg);
}

.guitarra-feature-art .note-two {
    left: 48%;
    bottom: 53px;

    color: var(--guitar-electric);

    font-size: 2rem;

    opacity: .72;

    transform: rotate(8deg);
}

.guitarra-feature-art .note-three {
    right: 10%;
    bottom: 114px;

    color: var(--guitar-coral);

    font-size: 2.55rem;

    opacity: .82;

    transform: rotate(11deg);
}


/* CÍRCULOS */

.guitarra-feature-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.guitarra-feature-circle.circle-one {
    width: 145px;
    height: 145px;

    left: -55px;
    bottom: -55px;

    border:
        1px solid
        rgba(233, 162, 59, .16);
}

.guitarra-feature-circle.circle-two {
    width: 88px;
    height: 88px;

    right: 24px;
    top: 18px;

    border:
        1px solid
        rgba(79, 143, 224, .14);
}


/* GLOW */

.guitarra-feature-art::after {
    content: "";

    position: absolute;

    width: 145px;
    height: 145px;

    left: 37%;
    bottom: 5px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(233, 162, 59, .11),
            rgba(79, 143, 224, .05),
            transparent 68%
        );

    filter: blur(6px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.guitarra-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(233, 162, 59, .22),
            transparent 28%
        ),

        radial-gradient(
            circle at 72% 92%,
            rgba(79, 143, 224, .10),
            transparent 26%
        ),

        linear-gradient(
            120deg,
            #f5f8fd,
            #fff7e9
        );
}

.guitarra-course-page
.course-audience-card > div:first-child > span {
    color: var(--guitar-blue);
}

.guitarra-course-page .course-audience-icon {
    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--guitar-night),
            var(--guitar-deep) 42%,
            var(--guitar-blue) 72%,
            var(--guitar-amber)
        );

    box-shadow:
        0 25px 60px rgba(23, 37, 84, .23);
}

.guitarra-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(242, 198, 109, .34);

    border-radius: 50%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.guitarra-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #f8faff,
            #fff8ed
        );
}

.guitarra-course-page
.other-course-card > span {
    color: var(--guitar-blue);
}

.guitarra-course-page
.other-course-card {
    border:
        1px solid
        rgba(59, 115, 197, .08);
}

.guitarra-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(23, 37, 84, .13);
}

.guitarra-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--guitar-night),
            var(--guitar-blue),
            var(--guitar-amber)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.guitarra-course-page .course-cta {
    background:

        radial-gradient(
            circle at 84% 32%,
            rgba(233, 162, 59, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 69% 90%,
            rgba(79, 143, 224, .10),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #111d43 0%,
            #172554 30%,
            #22458a 58%,
            #3b73c5 80%,
            #c78a2d 100%
        );
}

.guitarra-course-page
.course-cta > div > span {
    color: #f5d794;
}

.guitarra-course-page
.course-cta .discipline-cta-button {
    color: var(--guitar-night);
}

.guitarra-course-page
.course-cta .discipline-cta-button i {
    color: var(--guitar-amber);
}

.guitarra-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(14, 28, 65, .30);
}


/* ==================================================
   FOOTER
   ================================================== */

.guitarra-course-page
.discipline-footer-column a:hover,

.guitarra-course-page
.discipline-footer-bottom a:hover {
    color: var(--guitar-gold);
}

.guitarra-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--guitar-deep),
            var(--guitar-blue),
            var(--guitar-amber)
        );
}


/* ==================================================
   RESPONSIVE · ARTE GUITARRA
   ================================================== */

@media (max-width: 900px) {

    .guitarra-feature-art {
        height: 170px;
        margin-top: 35px;
    }

}

/* ==================================================
   IDENTIDAD INDIVIDUAL · BATERÍA
   Azul noche + petróleo + turquesa
   + cobre/naranja como acentos
   ================================================== */

.bateria-course-page {
    --drum-night: #0c1f38;
    --drum-deep: #124d6b;
    --drum-blue: #247aa0;
    --drum-turquoise: #4fc8c0;

    --drum-copper: #d77b45;
    --drum-orange: #ee9b57;

    --drum-light: #edf8f8;
    --drum-soft: #fff4ec;
}


/* ==================================================
   HEADER
   ================================================== */

.bateria-course-page .discipline-menu a:hover,
.bateria-course-page .discipline-back:hover {
    color: var(--drum-blue);
}

.bateria-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--drum-blue),
            var(--drum-turquoise)
        );
}

.bateria-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--drum-night),
            var(--drum-deep) 50%,
            var(--drum-blue)
        );

    box-shadow:
        0 12px 30px rgba(12, 31, 56, .22);
}

.bateria-course-page .course-header-cta:hover {
    box-shadow:
        0 16px 35px rgba(12, 31, 56, .30);
}


/* ==================================================
   HERO
   ================================================== */

.bateria-course-page .course-hero {
    background:

        radial-gradient(
            circle at 84% 18%,
            rgba(79, 200, 192, .18),
            transparent 27%
        ),

        radial-gradient(
            circle at 73% 78%,
            rgba(36, 122, 160, .16),
            transparent 30%
        ),

        radial-gradient(
            circle at 9% 86%,
            rgba(238, 155, 87, .11),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f2f8fa 55%,
            #eefafa 100%
        );
}

.bateria-course-page .course-hero::before {
    background:
        rgba(215, 123, 69, .10);
}

.bateria-course-page .course-eyebrow {
    color: var(--drum-blue);
}

.bateria-course-page .course-hero h1 {
    color: var(--drum-night);
}

.bateria-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--drum-night) 0%,
            var(--drum-deep) 34%,
            var(--drum-blue) 68%,
            var(--drum-turquoise) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES HERO
   ================================================== */

.bateria-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--drum-night),
            var(--drum-deep) 44%,
            var(--drum-blue) 74%,
            var(--drum-turquoise)
        );

    box-shadow:
        0 15px 35px rgba(18, 77, 107, .23);
}

.bateria-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px rgba(18, 77, 107, .32);
}

.bateria-course-page .discipline-btn.secondary {
    color: var(--drum-night);

    border:
        1px solid rgba(36, 122, 160, .17);

    background:
        rgba(255, 255, 255, .87);
}

.bateria-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(79, 200, 192, .42);

    box-shadow:
        0 12px 25px rgba(18, 77, 107, .08);
}


/* ==================================================
   DETALLES HERO
   ================================================== */

.bateria-course-page .course-hero-details i {
    color: var(--drum-blue);
}

.bateria-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--drum-turquoise);
}

.bateria-course-page
.course-hero-details span:nth-child(3) i {
    color: var(--drum-orange);
}


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

.bateria-course-page .course-image-frame {
    box-shadow:
        0 35px 80px rgba(12, 31, 56, .20);
}

.bateria-course-page .course-image-badge i {
    background:
        linear-gradient(
            135deg,
            var(--drum-night),
            var(--drum-blue),
            var(--drum-turquoise)
        );
}

.bateria-course-page .course-media-shape-one {
    background:
        rgba(79, 200, 192, .24);
}

.bateria-course-page .course-media-shape-two {
    background:
        rgba(215, 123, 69, .16);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.bateria-course-page .course-section-label,
.bateria-course-page .course-overview-main > span {
    color: var(--drum-blue);
}

.bateria-course-page .course-overview h2,
.bateria-course-page .course-section-heading h2,
.bateria-course-page .course-audience h2 {
    color: var(--drum-night);
}


/* TARJETA INFO */

.bateria-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #f7fbfc,
            #edf8f8
        );

    border:
        1px solid rgba(36, 122, 160, .10);

    box-shadow:
        0 18px 50px rgba(12, 31, 56, .07);
}

.bateria-course-page .course-info-item i {
    color: var(--drum-blue);
    background: #e5f1f5;
}

.bateria-course-page
.course-info-item:nth-child(2) i {
    color: var(--drum-turquoise);
    background: rgba(79, 200, 192, .11);
}

.bateria-course-page
.course-info-item:nth-child(3) i {
    color: var(--drum-copper);
    background: rgba(215, 123, 69, .12);
}

.bateria-course-page
.course-info-item:nth-child(4) i {
    color: var(--drum-orange);
    background: rgba(238, 155, 87, .13);
}


/* WHATSAPP */

.bateria-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--drum-night),
            var(--drum-deep),
            var(--drum-blue)
        );
}

.bateria-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--drum-deep),
            var(--drum-blue),
            var(--drum-turquoise)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.bateria-course-page .course-learning {
    background:
        linear-gradient(
            180deg,
            #f3f8fa,
            #edf8f7
        );
}

.bateria-course-page .course-section-heading > span {
    color: var(--drum-blue);
}

.bateria-course-page .course-learning-grid article {
    border:
        1px solid rgba(36, 122, 160, .08);
}

.bateria-course-page .course-learning-grid article:hover {
    box-shadow:
        0 25px 55px rgba(12, 31, 56, .11);
}


/* ICONOS POR TARJETA */

.bateria-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--drum-blue);
    background: rgba(36, 122, 160, .10);
}

.bateria-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--drum-turquoise);
    background: rgba(79, 200, 192, .12);
}

.bateria-course-page
.course-learning-grid article:nth-child(3) > i {
    color: var(--drum-copper);
    background: rgba(215, 123, 69, .12);
}

.bateria-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--drum-orange);
    background: rgba(238, 155, 87, .13);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.bateria-course-page .course-features {
    background:

        radial-gradient(
            circle at 92% 20%,
            rgba(79, 200, 192, .12),
            transparent 28%
        ),

        radial-gradient(
            circle at 11% 90%,
            rgba(215, 123, 69, .09),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #071523 0%,
            #0c1f38 30%,
            #124d6b 66%,
            #1d6883 100%
        );
}

.bateria-course-page
.course-features-intro > span {
    color: var(--drum-turquoise);
}


/* ICONOS DERECHA */

.bateria-course-page
.course-features-list article:nth-child(1) > i {
    color: var(--drum-turquoise);
    background: rgba(79, 200, 192, .10);
}

.bateria-course-page
.course-features-list article:nth-child(2) > i {
    color: var(--drum-orange);
    background: rgba(238, 155, 87, .10);
}

.bateria-course-page
.course-features-list article:nth-child(3) > i {
    color: #7fdae0;
    background: rgba(79, 200, 192, .10);
}

.bateria-course-page
.course-features-list article:nth-child(4) > i {
    color: #efad7e;
    background: rgba(215, 123, 69, .11);
}


/* ==================================================
   ARTE IZQUIERDO · BATERÍA
   ================================================== */

.bateria-course-page .course-features-intro {
    position: relative;
    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.bateria-feature-art {
    position: relative;

    width: 100%;
    height: 220px;

    margin-top: auto;
}


/* LÍNEAS RÍTMICAS */

.bateria-rhythm-lines {
    position: absolute;

    left: 0;
    bottom: 55px;

    width: 93%;
    height: 100px;

    transform: rotate(-5deg);
}

.bateria-rhythm-lines span {
    position: absolute;

    left: 0;

    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(79, 200, 192, 0),
            rgba(79, 200, 192, .42),
            rgba(238, 155, 87, .24),
            rgba(79, 200, 192, 0)
        );
}

.bateria-rhythm-lines span:nth-child(1) {
    top: 5px;
    width: 72%;
}

.bateria-rhythm-lines span:nth-child(2) {
    top: 26px;
    width: 94%;
}

.bateria-rhythm-lines span:nth-child(3) {
    top: 48px;
    width: 62%;
}

.bateria-rhythm-lines span:nth-child(4) {
    top: 70px;
    width: 86%;
}

.bateria-rhythm-lines span:nth-child(5) {
    top: 92px;
    width: 55%;
}


/* ICONOS / BEATS */

.bateria-feature-art > i {
    position: absolute;
    z-index: 2;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(12, 31, 56, .20)
        );
}

.bateria-feature-art .beat-one {
    left: 10%;
    bottom: 98px;

    color: var(--drum-turquoise);

    font-size: 3.4rem;

    transform: rotate(-5deg);
}

.bateria-feature-art .beat-two {
    left: 48%;
    bottom: 50px;

    color: var(--drum-orange);

    font-size: 2.3rem;

    opacity: .80;

    transform: rotate(9deg);
}

.bateria-feature-art .beat-three {
    right: 11%;
    bottom: 112px;

    color: var(--drum-copper);

    font-size: 2.7rem;

    opacity: .86;

    transform: rotate(10deg);
}


/* CÍRCULOS */

.bateria-feature-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.bateria-feature-circle.circle-one {
    width: 150px;
    height: 150px;

    left: -60px;
    bottom: -60px;

    border:
        1px solid
        rgba(79, 200, 192, .16);
}

.bateria-feature-circle.circle-two {
    width: 90px;
    height: 90px;

    right: 22px;
    top: 18px;

    border:
        1px solid
        rgba(238, 155, 87, .16);
}


/* GLOW */

.bateria-feature-art::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    left: 37%;
    bottom: 3px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(79, 200, 192, .10),
            rgba(215, 123, 69, .05),
            transparent 68%
        );

    filter: blur(6px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.bateria-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(79, 200, 192, .24),
            transparent 28%
        ),

        radial-gradient(
            circle at 72% 92%,
            rgba(238, 155, 87, .10),
            transparent 26%
        ),

        linear-gradient(
            120deg,
            #f4f9fa,
            #edf8f7
        );
}

.bateria-course-page
.course-audience-card > div:first-child > span {
    color: var(--drum-blue);
}

.bateria-course-page .course-audience-icon {
    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--drum-night),
            var(--drum-deep) 42%,
            var(--drum-blue) 72%,
            var(--drum-turquoise)
        );

    box-shadow:
        0 25px 60px rgba(12, 31, 56, .23);
}

.bateria-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(238, 155, 87, .34);

    border-radius: 50%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.bateria-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #f7fbfc,
            #edf8f7
        );
}

.bateria-course-page
.other-course-card > span {
    color: var(--drum-blue);
}

.bateria-course-page
.other-course-card {
    border:
        1px solid
        rgba(36, 122, 160, .08);
}

.bateria-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(12, 31, 56, .13);
}

.bateria-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--drum-night),
            var(--drum-blue),
            var(--drum-turquoise)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.bateria-course-page .course-cta {
    background:

        radial-gradient(
            circle at 84% 32%,
            rgba(79, 200, 192, .21),
            transparent 27%
        ),

        radial-gradient(
            circle at 69% 90%,
            rgba(238, 155, 87, .12),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #071523 0%,
            #0c1f38 28%,
            #124d6b 58%,
            #247aa0 80%,
            #3caea8 100%
        );
}

.bateria-course-page
.course-cta > div > span {
    color: #9ce6e1;
}

.bateria-course-page
.course-cta .discipline-cta-button {
    color: var(--drum-night);
}

.bateria-course-page
.course-cta .discipline-cta-button i {
    color: var(--drum-orange);
}

.bateria-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(5, 22, 37, .30);
}


/* ==================================================
   FOOTER
   ================================================== */

.bateria-course-page
.discipline-footer-column a:hover,

.bateria-course-page
.discipline-footer-bottom a:hover {
    color: var(--drum-turquoise);
}

.bateria-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--drum-deep),
            var(--drum-blue),
            var(--drum-turquoise)
        );
}


/* ==================================================
   RESPONSIVE · ARTE BATERÍA
   ================================================== */

@media (max-width: 900px) {

    .bateria-feature-art {
        height: 170px;
        margin-top: 35px;
    }

}

/* ==================================================
   FIX · ARTE EXPERIENCIA KIRU · GUITARRA
   ================================================== */

.guitarra-course-page .course-features-intro {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.guitarra-course-page .guitar-feature-art {
    position: relative;

    width: 100%;
    height: 250px;

    margin-top: auto;

    overflow: visible;
}


/* PENTAGRAMA */

.guitarra-course-page .guitar-staff {
    position: absolute;

    left: 0;
    bottom: 55px;

    width: 92%;
    height: 115px;

    transform: rotate(-6deg);
}

.guitarra-course-page .guitar-staff span {
    position: absolute;
    left: 0;

    width: 100%;
    height: 2px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        rgba(255, 193, 74, 0),
        rgba(255, 193, 74, .34) 20%,
        rgba(70, 179, 205, .40) 70%,
        rgba(70, 179, 205, 0)
    );
}

.guitarra-course-page .guitar-staff span:nth-child(1) {
    top: 0;
}

.guitarra-course-page .guitar-staff span:nth-child(2) {
    top: 25px;
}

.guitarra-course-page .guitar-staff span:nth-child(3) {
    top: 50px;
}

.guitarra-course-page .guitar-staff span:nth-child(4) {
    top: 75px;
}

.guitarra-course-page .guitar-staff span:nth-child(5) {
    top: 100px;
}


/* NOTAS */

.guitarra-course-page .guitar-feature-art > i {
    position: absolute;
    z-index: 3;

    display: block;

    filter: drop-shadow(
        0 10px 20px rgba(4, 22, 50, .22)
    );
}

.guitarra-course-page .guitar-feature-art .note-one {
    left: 10%;
    bottom: 120px;

    font-size: 3.8rem;

    color: #49c7c8;

    transform: rotate(-9deg);
}

.guitarra-course-page .guitar-feature-art .note-two {
    left: 48%;
    bottom: 50px;

    font-size: 3rem;

    color: #f2a542;

    transform: rotate(8deg);
}

.guitarra-course-page .guitar-feature-art .note-three {
    right: 9%;
    bottom: 145px;

    font-size: 3.3rem;

    color: #ffcb62;

    transform: rotate(12deg);
}


/* CÍRCULOS DECORATIVOS */

.guitarra-course-page .guitar-feature-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.guitarra-course-page .guitar-feature-circle.circle-one {
    width: 165px;
    height: 165px;

    left: -65px;
    bottom: -70px;

    border: 1px solid rgba(73, 199, 200, .18);
}

.guitarra-course-page .guitar-feature-circle.circle-two {
    width: 105px;
    height: 105px;

    right: 18px;
    top: 5px;

    border: 1px solid rgba(242, 165, 66, .20);
}


/* GLOW SUAVE */

.guitarra-course-page .guitar-feature-art::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: 32%;
    bottom: -30px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(73, 199, 200, .10),
        rgba(242, 165, 66, .06),
        transparent 70%
    );

    filter: blur(10px);

    pointer-events: none;
}

/* BATERÍA · ENCUADRE DE FOTO */

.bateria-course-page .course-image-frame img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    /* Solo ajustamos qué parte de la foto se prioriza */
    object-position: center center;
}

/* ==================================================
   IDENTIDAD INDIVIDUAL · TÉCNICA VOCAL
   Azul profundo + violeta + fucsia + rosa
   ================================================== */

.vocal-course-page {
    --vocal-night: #171a4a;
    --vocal-deep: #27388f;
    --vocal-blue: #496bd8;

    --vocal-purple: #7b4bc4;
    --vocal-violet: #9a58cf;
    --vocal-fuchsia: #d84ca2;
    --vocal-pink: #ee78bb;

    --vocal-light: #f5f2ff;
    --vocal-soft: #fff2fa;
}


/* ==================================================
   HEADER
   ================================================== */

.vocal-course-page .discipline-menu a:hover,
.vocal-course-page .discipline-back:hover {
    color: var(--vocal-purple);
}

.vocal-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--vocal-blue),
            var(--vocal-fuchsia)
        );
}

.vocal-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--vocal-night),
            var(--vocal-deep) 38%,
            var(--vocal-purple) 70%,
            var(--vocal-fuchsia)
        );

    box-shadow:
        0 12px 30px rgba(39, 56, 143, .22);
}

.vocal-course-page .course-header-cta:hover {
    box-shadow:
        0 16px 38px rgba(39, 56, 143, .30);
}


/* ==================================================
   HERO
   ================================================== */

.vocal-course-page .course-hero {
    background:

        radial-gradient(
            circle at 84% 18%,
            rgba(216, 76, 162, .18),
            transparent 27%
        ),

        radial-gradient(
            circle at 74% 80%,
            rgba(123, 75, 196, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 9% 86%,
            rgba(73, 107, 216, .10),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f5ff 54%,
            #fff2fa 100%
        );
}

.vocal-course-page .course-hero::before {
    background:
        rgba(238, 120, 187, .10);
}

.vocal-course-page .course-eyebrow {
    color: var(--vocal-fuchsia);
}

.vocal-course-page .course-hero h1 {
    color: var(--vocal-night);
}

.vocal-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--vocal-deep) 0%,
            var(--vocal-purple) 38%,
            var(--vocal-fuchsia) 72%,
            var(--vocal-pink) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* ==================================================
   BOTONES HERO
   ================================================== */

.vocal-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--vocal-night),
            var(--vocal-deep) 35%,
            var(--vocal-purple) 68%,
            var(--vocal-fuchsia)
        );

    box-shadow:
        0 15px 35px rgba(123, 75, 196, .22);
}

.vocal-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px rgba(123, 75, 196, .32);
}

.vocal-course-page .discipline-btn.secondary {
    color: var(--vocal-night);

    border:
        1px solid rgba(123, 75, 196, .17);

    background:
        rgba(255, 255, 255, .88);
}

.vocal-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(216, 76, 162, .40);

    box-shadow:
        0 12px 25px rgba(123, 75, 196, .08);
}


/* ==================================================
   DETALLES HERO
   ================================================== */

.vocal-course-page .course-hero-details i {
    color: var(--vocal-purple);
}

.vocal-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--vocal-fuchsia);
}

.vocal-course-page
.course-hero-details span:nth-child(3) i {
    color: var(--vocal-blue);
}


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

.vocal-course-page .course-image-frame {
    box-shadow:
        0 35px 80px rgba(39, 56, 143, .20);
}

.vocal-course-page .course-image-badge i {
    background:
        linear-gradient(
            135deg,
            var(--vocal-deep),
            var(--vocal-purple),
            var(--vocal-fuchsia)
        );
}

.vocal-course-page .course-media-shape-one {
    background:
        rgba(216, 76, 162, .22);
}

.vocal-course-page .course-media-shape-two {
    background:
        rgba(123, 75, 196, .16);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.vocal-course-page .course-section-label,
.vocal-course-page .course-overview-main > span {
    color: var(--vocal-fuchsia);
}

.vocal-course-page .course-overview h2,
.vocal-course-page .course-section-heading h2,
.vocal-course-page .course-audience h2 {
    color: var(--vocal-night);
}


/* TARJETA INFO */

.vocal-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #faf8ff,
            #fff2fa
        );

    border:
        1px solid rgba(123, 75, 196, .09);

    box-shadow:
        0 18px 50px rgba(39, 56, 143, .07);
}

.vocal-course-page .course-info-item i {
    color: var(--vocal-purple);
    background: rgba(123, 75, 196, .10);
}

.vocal-course-page
.course-info-item:nth-child(3) i {
    color: var(--vocal-fuchsia);
    background: rgba(216, 76, 162, .11);
}

.vocal-course-page
.course-info-item:nth-child(4) i {
    color: var(--vocal-blue);
    background: rgba(73, 107, 216, .11);
}


/* WHATSAPP */

.vocal-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--vocal-night),
            var(--vocal-deep),
            var(--vocal-purple)
        );
}

.vocal-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--vocal-purple),
            var(--vocal-fuchsia),
            var(--vocal-pink)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.vocal-course-page .course-learning {
    background:
        linear-gradient(
            180deg,
            #f8f7ff,
            #fff3fa
        );
}

.vocal-course-page .course-section-heading > span {
    color: var(--vocal-fuchsia);
}

.vocal-course-page .course-learning-grid article {
    border:
        1px solid rgba(123, 75, 196, .08);
}

.vocal-course-page .course-learning-grid article:hover {
    box-shadow:
        0 25px 55px rgba(39, 56, 143, .11);
}


/* ICONOS POR TARJETA */

.vocal-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--vocal-blue);
    background: rgba(73, 107, 216, .10);
}

.vocal-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--vocal-purple);
    background: rgba(123, 75, 196, .11);
}

.vocal-course-page
.course-learning-grid article:nth-child(3) > i {
    color: var(--vocal-fuchsia);
    background: rgba(216, 76, 162, .12);
}

.vocal-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--vocal-pink);
    background: rgba(238, 120, 187, .13);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.vocal-course-page .course-features {
    background:

        radial-gradient(
            circle at 92% 20%,
            rgba(216, 76, 162, .13),
            transparent 28%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(73, 107, 216, .10),
            transparent 27%
        ),

        linear-gradient(
            125deg,
            #0c1238 0%,
            #171a4a 28%,
            #3b2c78 56%,
            #7b317a 80%,
            #9d367f 100%
        );
}

.vocal-course-page
.course-features-intro > span {
    color: var(--vocal-pink);
}


/* ICONOS DERECHA */

.vocal-course-page
.course-features-list article:nth-child(1) > i {
    color: #94a7ff;
    background: rgba(73, 107, 216, .12);
}

.vocal-course-page
.course-features-list article:nth-child(2) > i {
    color: #f08aca;
    background: rgba(216, 76, 162, .11);
}

.vocal-course-page
.course-features-list article:nth-child(3) > i {
    color: #c99be8;
    background: rgba(123, 75, 196, .13);
}

.vocal-course-page
.course-features-list article:nth-child(4) > i {
    color: #ff9aca;
    background: rgba(238, 120, 187, .12);
}


/* ==================================================
   ARTE IZQUIERDO · TÉCNICA VOCAL
   ================================================== */

.vocal-course-page .course-features-intro {
    position: relative;
    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.vocal-feature-art {
    position: relative;

    width: 100%;
    height: 240px;

    margin-top: auto;
}


/* ONDA DE VOZ */

.vocal-wave {
    position: absolute;

    left: 0;
    bottom: 70px;

    width: 92%;
    height: 110px;

    display: flex;
    align-items: center;
    gap: 12px;

    transform: rotate(-5deg);
}

.vocal-wave span {
    width: 4px;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            var(--vocal-pink),
            var(--vocal-purple),
            var(--vocal-blue)
        );

    box-shadow:
        0 0 15px rgba(216, 76, 162, .14);
}

.vocal-wave span:nth-child(1) {
    height: 28px;
}

.vocal-wave span:nth-child(2) {
    height: 55px;
}

.vocal-wave span:nth-child(3) {
    height: 85px;
}

.vocal-wave span:nth-child(4) {
    height: 110px;
}

.vocal-wave span:nth-child(5) {
    height: 78px;
}

.vocal-wave span:nth-child(6) {
    height: 48px;
}

.vocal-wave span:nth-child(7) {
    height: 25px;
}


/* ICONOS DECORATIVOS */

.vocal-feature-art > i {
    position: absolute;
    z-index: 3;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(16, 15, 56, .22)
        );
}

.vocal-feature-art .vocal-icon-one {
    left: 10%;
    bottom: 95px;

    color: var(--vocal-pink);

    font-size: 3.5rem;

    transform: rotate(-8deg);
}

.vocal-feature-art .vocal-icon-two {
    left: 52%;
    bottom: 48px;

    color: #9ab0ff;

    font-size: 2.4rem;

    opacity: .82;

    transform: rotate(8deg);
}

.vocal-feature-art .vocal-icon-three {
    right: 9%;
    bottom: 126px;

    color: #ff8cc7;

    font-size: 2.8rem;

    opacity: .86;

    transform: rotate(10deg);
}


/* CÍRCULOS */

.vocal-feature-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.vocal-feature-circle.circle-one {
    width: 160px;
    height: 160px;

    left: -65px;
    bottom: -65px;

    border:
        1px solid rgba(238, 120, 187, .18);
}

.vocal-feature-circle.circle-two {
    width: 95px;
    height: 95px;

    right: 20px;
    top: 15px;

    border:
        1px solid rgba(123, 75, 196, .20);
}


/* GLOW */

.vocal-feature-art::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    left: 36%;
    bottom: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216, 76, 162, .11),
            rgba(73, 107, 216, .05),
            transparent 70%
        );

    filter: blur(7px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.vocal-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(216, 76, 162, .22),
            transparent 28%
        ),

        radial-gradient(
            circle at 72% 92%,
            rgba(123, 75, 196, .10),
            transparent 26%
        ),

        linear-gradient(
            120deg,
            #f7f5ff,
            #fff2fa
        );
}

.vocal-course-page
.course-audience-card > div:first-child > span {
    color: var(--vocal-fuchsia);
}

.vocal-course-page .course-audience-icon {
    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--vocal-night),
            var(--vocal-purple) 42%,
            var(--vocal-fuchsia) 72%,
            var(--vocal-pink)
        );

    box-shadow:
        0 25px 60px rgba(39, 56, 143, .23);
}

.vocal-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid rgba(255, 255, 255, .28);

    border-radius: 50%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.vocal-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #faf9ff,
            #fff4fa
        );
}

.vocal-course-page .other-course-card > span {
    color: var(--vocal-purple);
}

.vocal-course-page .other-course-card {
    border:
        1px solid rgba(123, 75, 196, .08);
}

.vocal-course-page .other-course-card:hover {
    box-shadow:
        0 24px 50px rgba(39, 56, 143, .13);
}

.vocal-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--vocal-deep),
            var(--vocal-purple),
            var(--vocal-fuchsia)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.vocal-course-page .course-cta {
    background:

        radial-gradient(
            circle at 84% 32%,
            rgba(238, 120, 187, .22),
            transparent 27%
        ),

        radial-gradient(
            circle at 69% 90%,
            rgba(73, 107, 216, .11),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #0c1238 0%,
            #171a4a 28%,
            #3d2b80 56%,
            #8a3e9d 78%,
            #d84ca2 100%
        );
}

.vocal-course-page
.course-cta > div > span {
    color: #ff9bd0;
}

.vocal-course-page
.course-cta .discipline-cta-button {
    color: var(--vocal-night);
}

.vocal-course-page
.course-cta .discipline-cta-button i {
    color: var(--vocal-fuchsia);
}

.vocal-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px rgba(19, 18, 65, .30);
}


/* ==================================================
   FOOTER
   ================================================== */

.vocal-course-page
.discipline-footer-column a:hover,

.vocal-course-page
.discipline-footer-bottom a:hover {
    color: var(--vocal-pink);
}

.vocal-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--vocal-deep),
            var(--vocal-purple),
            var(--vocal-fuchsia)
        );
}


/* ==================================================
   RESPONSIVE · ARTE VOCAL
   ================================================== */

@media (max-width: 900px) {

    .vocal-feature-art {
        height: 175px;
        margin-top: 35px;
    }

}

/* ==================================================
   IDENTIDAD INDIVIDUAL · INICIACIÓN MUSICAL
   Azul + menta + amarillo cálido + coral
   ================================================== */

.iniciacion-course-page {
    --init-night: #12375b;
    --init-deep: #175d78;
    --init-blue: #2f86ad;

    --init-mint: #52c9b5;
    --init-aqua: #79ddd0;

    --init-yellow: #f1bc55;
    --init-gold: #e5a83d;

    --init-coral: #ed806c;
    --init-light: #f2fbf9;
    --init-warm: #fff8e9;
}


/* ==================================================
   HEADER
   ================================================== */

.iniciacion-course-page .discipline-menu a:hover,
.iniciacion-course-page .discipline-back:hover {
    color: var(--init-mint);
}

.iniciacion-course-page .discipline-menu a::after {
    background: linear-gradient(
        90deg,
        var(--init-blue),
        var(--init-mint),
        var(--init-yellow)
    );
}

.iniciacion-course-page .course-header-cta {
    background: linear-gradient(
        135deg,
        var(--init-night),
        var(--init-deep) 42%,
        var(--init-blue) 72%,
        var(--init-mint)
    );

    box-shadow:
        0 12px 30px rgba(18, 55, 91, .22);
}

.iniciacion-course-page .course-header-cta:hover {
    box-shadow:
        0 16px 38px rgba(18, 55, 91, .30);
}


/* ==================================================
   HERO
   ================================================== */

.iniciacion-course-page .course-hero {
    background:

        radial-gradient(
            circle at 84% 18%,
            rgba(82, 201, 181, .19),
            transparent 27%
        ),

        radial-gradient(
            circle at 72% 82%,
            rgba(241, 188, 85, .13),
            transparent 29%
        ),

        radial-gradient(
            circle at 8% 87%,
            rgba(237, 128, 108, .09),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3fbfa 55%,
            #fff9ed 100%
        );
}

.iniciacion-course-page .course-hero::before {
    background:
        rgba(241, 188, 85, .10);
}

.iniciacion-course-page .course-eyebrow {
    color: var(--init-deep);
}

.iniciacion-course-page .course-hero h1 {
    color: var(--init-night);
}

.iniciacion-course-page .course-hero h1 span {
    background: linear-gradient(
        90deg,
        var(--init-deep) 0%,
        var(--init-blue) 30%,
        var(--init-mint) 62%,
        var(--init-gold) 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES HERO
   ================================================== */

.iniciacion-course-page .discipline-btn.primary {
    background: linear-gradient(
        135deg,
        var(--init-night),
        var(--init-deep) 38%,
        var(--init-blue) 68%,
        var(--init-mint)
    );

    box-shadow:
        0 15px 35px rgba(23, 93, 120, .22);
}

.iniciacion-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px rgba(23, 93, 120, .32);
}

.iniciacion-course-page .discipline-btn.secondary {
    color: var(--init-night);

    border:
        1px solid rgba(47, 134, 173, .17);

    background:
        rgba(255, 255, 255, .88);
}

.iniciacion-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(82, 201, 181, .45);

    box-shadow:
        0 12px 25px rgba(23, 93, 120, .08);
}


/* ==================================================
   DETALLES HERO
   ================================================== */

.iniciacion-course-page .course-hero-details i {
    color: var(--init-blue);
}

.iniciacion-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--init-yellow);
}

.iniciacion-course-page
.course-hero-details span:nth-child(3) i {
    color: var(--init-coral);
}


/* ==================================================
   IMAGEN HERO
   Mantiene exactamente la estructura de los demás
   ================================================== */

.iniciacion-course-page .course-image-frame {
    box-shadow:
        0 35px 80px rgba(18, 55, 91, .19);
}

.iniciacion-course-page .course-image-badge i {
    background: linear-gradient(
        135deg,
        var(--init-deep),
        var(--init-blue),
        var(--init-mint)
    );
}

.iniciacion-course-page .course-media-shape-one {
    background:
        rgba(82, 201, 181, .24);
}

.iniciacion-course-page .course-media-shape-two {
    background:
        rgba(241, 188, 85, .20);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.iniciacion-course-page .course-section-label,
.iniciacion-course-page .course-overview-main > span {
    color: var(--init-deep);
}

.iniciacion-course-page .course-overview h2,
.iniciacion-course-page .course-section-heading h2,
.iniciacion-course-page .course-audience h2 {
    color: var(--init-night);
}


/* ==================================================
   TARJETA INFORMACIÓN
   ================================================== */

.iniciacion-course-page .course-info-card {
    background: linear-gradient(
        145deg,
        #f8fcfb,
        #f1faf7
    );

    border:
        1px solid rgba(47, 134, 173, .09);

    box-shadow:
        0 18px 50px rgba(18, 55, 91, .07);
}

.iniciacion-course-page .course-info-item i {
    color: var(--init-blue);
    background: rgba(47, 134, 173, .10);
}

.iniciacion-course-page
.course-info-item:nth-child(3) i {
    color: var(--init-mint);
    background: rgba(82, 201, 181, .12);
}

.iniciacion-course-page
.course-info-item:nth-child(4) i {
    color: var(--init-yellow);
    background: rgba(241, 188, 85, .14);
}

.iniciacion-course-page
.course-info-item:nth-child(5) i {
    color: var(--init-coral);
    background: rgba(237, 128, 108, .12);
}


/* WHATSAPP */

.iniciacion-course-page .course-info-card > a {
    background: linear-gradient(
        135deg,
        var(--init-night),
        var(--init-deep),
        var(--init-blue)
    );
}

.iniciacion-course-page .course-info-card > a:hover {
    background: linear-gradient(
        135deg,
        var(--init-deep),
        var(--init-blue),
        var(--init-mint)
    );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.iniciacion-course-page .course-learning {
    background: linear-gradient(
        180deg,
        #f5fbfa,
        #fff9ed
    );
}

.iniciacion-course-page .course-section-heading > span {
    color: var(--init-deep);
}

.iniciacion-course-page .course-learning-grid article {
    border:
        1px solid rgba(47, 134, 173, .08);
}

.iniciacion-course-page .course-learning-grid article:hover {
    box-shadow:
        0 25px 55px rgba(18, 55, 91, .11);
}


/* COLORES INDIVIDUALES */

.iniciacion-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--init-blue);
    background: rgba(47, 134, 173, .11);
}

.iniciacion-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--init-mint);
    background: rgba(82, 201, 181, .13);
}

.iniciacion-course-page
.course-learning-grid article:nth-child(3) > i {
    color: var(--init-yellow);
    background: rgba(241, 188, 85, .15);
}

.iniciacion-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--init-coral);
    background: rgba(237, 128, 108, .13);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.iniciacion-course-page .course-features {
    background:

        radial-gradient(
            circle at 91% 19%,
            rgba(82, 201, 181, .15),
            transparent 28%
        ),

        radial-gradient(
            circle at 10% 91%,
            rgba(241, 188, 85, .10),
            transparent 27%
        ),

        radial-gradient(
            circle at 67% 80%,
            rgba(237, 128, 108, .07),
            transparent 25%
        ),

        linear-gradient(
            125deg,
            #0c2943 0%,
            #12375b 28%,
            #175d78 58%,
            #268e91 82%,
            #45b5a5 100%
        );
}

.iniciacion-course-page
.course-features-intro > span {
    color: #8be5d4;
}


/* ICONOS DERECHA */

.iniciacion-course-page
.course-features-list article:nth-child(1) > i {
    color: #7edfd0;
    background: rgba(82, 201, 181, .12);
}

.iniciacion-course-page
.course-features-list article:nth-child(2) > i {
    color: #f4ca71;
    background: rgba(241, 188, 85, .12);
}

.iniciacion-course-page
.course-features-list article:nth-child(3) > i {
    color: #80cde4;
    background: rgba(47, 134, 173, .13);
}

.iniciacion-course-page
.course-features-list article:nth-child(4) > i {
    color: #f19a88;
    background: rgba(237, 128, 108, .12);
}


/* ==================================================
   ARTE IZQUIERDO · INICIACIÓN MUSICAL
   ================================================== */

.iniciacion-course-page .course-features-intro {
    position: relative;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.iniciacion-feature-art {
    position: relative;

    width: 100%;
    height: 245px;

    margin-top: auto;
}


/* ==================================================
   ÓRBITAS
   ================================================== */

.iniciacion-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.iniciacion-orbit.orbit-one {
    width: 300px;
    height: 125px;

    left: 2%;
    bottom: 45px;

    border:
        2px solid
        rgba(82, 201, 181, .18);

    transform: rotate(-12deg);
}

.iniciacion-orbit.orbit-two {
    width: 245px;
    height: 95px;

    left: 20%;
    bottom: 72px;

    border:
        1px solid
        rgba(241, 188, 85, .19);

    transform: rotate(17deg);
}


/* ==================================================
   ICONOS DECORATIVOS
   ================================================== */

.iniciacion-feature-art > i {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(12, 41, 67, .22)
        );
}


/* NOTA MUSICAL */

.iniciacion-feature-art .iniciacion-icon-one {
    left: 11%;
    bottom: 108px;

    color: var(--init-mint);

    font-size: 3.5rem;

    transform: rotate(-10deg);
}


/* ESTRELLAS */

.iniciacion-feature-art .iniciacion-icon-two {
    left: 51%;
    bottom: 48px;

    color: #f4ca71;

    font-size: 2.8rem;

    opacity: .90;

    transform: rotate(9deg);
}


/* CORAZÓN */

.iniciacion-feature-art .iniciacion-icon-three {
    right: 10%;
    bottom: 128px;

    color: #ef917f;

    font-size: 3rem;

    opacity: .88;

    transform: rotate(10deg);
}


/* ==================================================
   PUNTOS FLOTANTES
   ================================================== */

.iniciacion-dot {
    position: absolute;

    z-index: 2;

    display: block;

    border-radius: 50%;
}

.iniciacion-dot.dot-one {
    width: 11px;
    height: 11px;

    left: 30%;
    bottom: 65px;

    background: var(--init-yellow);
}

.iniciacion-dot.dot-two {
    width: 7px;
    height: 7px;

    left: 43%;
    bottom: 145px;

    background: var(--init-mint);
}

.iniciacion-dot.dot-three {
    width: 13px;
    height: 13px;

    right: 25%;
    bottom: 80px;

    background: var(--init-coral);
}

.iniciacion-dot.dot-four {
    width: 8px;
    height: 8px;

    right: 6%;
    bottom: 55px;

    background: #80cde4;
}


/* GLOW CENTRAL */

.iniciacion-feature-art::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: 31%;
    bottom: -15px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(82, 201, 181, .12),
        rgba(241, 188, 85, .06),
        rgba(237, 128, 108, .03),
        transparent 70%
    );

    filter: blur(8px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.iniciacion-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(82, 201, 181, .22),
            transparent 28%
        ),

        radial-gradient(
            circle at 72% 92%,
            rgba(241, 188, 85, .13),
            transparent 26%
        ),

        radial-gradient(
            circle at 45% 100%,
            rgba(237, 128, 108, .07),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #f4fbfa,
            #fff9ed
        );
}

.iniciacion-course-page
.course-audience-card > div:first-child > span {
    color: var(--init-deep);
}

.iniciacion-course-page .course-audience-icon {
    position: relative;

    background: linear-gradient(
        135deg,
        var(--init-night),
        var(--init-blue) 40%,
        var(--init-mint) 70%,
        #77d6b7
    );

    box-shadow:
        0 25px 60px rgba(18, 55, 91, .22);
}

.iniciacion-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(241, 188, 85, .45);

    border-radius: 50%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.iniciacion-course-page .other-courses {
    background: linear-gradient(
        180deg,
        #f7fcfb,
        #fff9ee
    );
}

.iniciacion-course-page
.other-course-card > span {
    color: var(--init-deep);
}

.iniciacion-course-page
.other-course-card {
    border:
        1px solid
        rgba(47, 134, 173, .08);
}

.iniciacion-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(18, 55, 91, .12);
}

.iniciacion-course-page
.other-course-card > div:last-child i {
    background: linear-gradient(
        135deg,
        var(--init-deep),
        var(--init-blue),
        var(--init-mint)
    );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.iniciacion-course-page .course-cta {
    background:

        radial-gradient(
            circle at 84% 32%,
            rgba(82, 201, 181, .22),
            transparent 27%
        ),

        radial-gradient(
            circle at 68% 92%,
            rgba(241, 188, 85, .13),
            transparent 25%
        ),

        radial-gradient(
            circle at 96% 85%,
            rgba(237, 128, 108, .08),
            transparent 22%
        ),

        linear-gradient(
            120deg,
            #0c2943 0%,
            #12375b 27%,
            #175d78 52%,
            #268e91 76%,
            #52c9b5 100%
        );
}

.iniciacion-course-page
.course-cta > div > span {
    color: #9aeadb;
}

.iniciacion-course-page
.course-cta .discipline-cta-button {
    color: var(--init-night);
}

.iniciacion-course-page
.course-cta .discipline-cta-button i {
    color: var(--init-yellow);
}

.iniciacion-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(12, 41, 67, .30);
}


/* ==================================================
   FOOTER
   ================================================== */

.iniciacion-course-page
.discipline-footer-column a:hover,

.iniciacion-course-page
.discipline-footer-bottom a:hover {
    color: var(--init-mint);
}

.iniciacion-course-page
.discipline-footer-socials a:hover {
    background: linear-gradient(
        135deg,
        var(--init-deep),
        var(--init-blue),
        var(--init-mint)
    );
}


/* ==================================================
   RESPONSIVE · ARTE INICIACIÓN
   ================================================== */

@media (max-width: 900px) {

    .iniciacion-feature-art {
        height: 180px;
        margin-top: 35px;
    }

    .iniciacion-orbit.orbit-one {
        width: 260px;
    }

    .iniciacion-orbit.orbit-two {
        width: 210px;
    }

}

/* ==================================================
   IDENTIDAD INDIVIDUAL · BALLET
   Magenta + rosa empolvado + lila + vino + marfil
   ================================================== */

.ballet-course-page {
    --ballet-wine: #68214f;
    --ballet-deep: #8f2f70;
    --ballet-magenta: #b53b8c;
    --ballet-rose: #d966aa;

    --ballet-pink: #ed9ac6;
    --ballet-blush: #f5c5dc;

    --ballet-lilac: #a47bc2;
    --ballet-purple: #76549c;

    --ballet-ivory: #fff8f3;
    --ballet-light: #fff4fa;
}


/* ==================================================
   HEADER
   ================================================== */

.ballet-course-page .discipline-menu a:hover,
.ballet-course-page .discipline-back:hover {
    color: var(--ballet-magenta);
}

.ballet-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--ballet-deep),
            var(--ballet-magenta),
            var(--ballet-rose)
        );
}

.ballet-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--ballet-wine),
            var(--ballet-deep) 45%,
            var(--ballet-magenta) 75%,
            var(--ballet-rose)
        );

    box-shadow:
        0 12px 30px
        rgba(104, 33, 79, .20);
}

.ballet-course-page .course-header-cta:hover {
    box-shadow:
        0 17px 38px
        rgba(104, 33, 79, .30);
}


/* ==================================================
   HERO
   ================================================== */

.ballet-course-page .course-hero {
    background:

        radial-gradient(
            circle at 85% 17%,
            rgba(217, 102, 170, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 73% 81%,
            rgba(164, 123, 194, .13),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(245, 197, 220, .28),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff7fb 50%,
            #fbf3ff 100%
        );
}

.ballet-course-page .course-hero::before {
    background:
        rgba(245, 197, 220, .20);
}

.ballet-course-page .course-eyebrow {
    color: var(--ballet-magenta);
}

.ballet-course-page .course-hero h1 {
    color: #35213f;
}

.ballet-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--ballet-wine) 0%,
            var(--ballet-deep) 35%,
            var(--ballet-magenta) 68%,
            var(--ballet-lilac) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES HERO
   ================================================== */

.ballet-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--ballet-wine),
            var(--ballet-deep) 40%,
            var(--ballet-magenta) 72%,
            var(--ballet-rose)
        );

    box-shadow:
        0 15px 35px
        rgba(143, 47, 112, .23);
}

.ballet-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px
        rgba(143, 47, 112, .32);
}

.ballet-course-page .discipline-btn.secondary {
    color: #35213f;

    border:
        1px solid
        rgba(181, 59, 140, .16);

    background:
        rgba(255, 255, 255, .90);
}

.ballet-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(217, 102, 170, .42);

    box-shadow:
        0 12px 26px
        rgba(143, 47, 112, .08);
}


/* ==================================================
   DETALLES DEL HERO
   ================================================== */

.ballet-course-page .course-hero-details i {
    color: var(--ballet-magenta);
}

.ballet-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--ballet-lilac);
}

.ballet-course-page
.course-hero-details span:nth-child(3) i {
    color: var(--ballet-rose);
}


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

.ballet-course-page .course-image-frame {
    box-shadow:
        0 35px 80px
        rgba(104, 33, 79, .19);
}

.ballet-course-page .course-image-badge i {
    background:
        linear-gradient(
            135deg,
            var(--ballet-wine),
            var(--ballet-magenta),
            var(--ballet-pink)
        );
}

.ballet-course-page .course-media-shape-one {
    background:
        rgba(217, 102, 170, .25);
}

.ballet-course-page .course-media-shape-two {
    background:
        rgba(164, 123, 194, .18);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.ballet-course-page .course-section-label,
.ballet-course-page .course-overview-main > span {
    color: var(--ballet-magenta);
}

.ballet-course-page .course-overview h2,
.ballet-course-page .course-section-heading h2,
.ballet-course-page .course-audience h2 {
    color: #35213f;
}


/* TARJETA DE INFORMACIÓN */

.ballet-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #fffafd,
            #fff3f8
        );

    border:
        1px solid
        rgba(181, 59, 140, .09);

    box-shadow:
        0 18px 50px
        rgba(104, 33, 79, .07);
}

.ballet-course-page .course-info-item i {
    color: var(--ballet-magenta);

    background:
        rgba(181, 59, 140, .09);
}

.ballet-course-page
.course-info-item:nth-child(3) i {
    color: var(--ballet-lilac);

    background:
        rgba(164, 123, 194, .12);
}

.ballet-course-page
.course-info-item:nth-child(4) i {
    color: var(--ballet-rose);

    background:
        rgba(217, 102, 170, .12);
}

.ballet-course-page
.course-info-item:nth-child(5) i {
    color: var(--ballet-wine);

    background:
        rgba(104, 33, 79, .09);
}


/* WHATSAPP */

.ballet-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--ballet-wine),
            var(--ballet-deep),
            var(--ballet-magenta)
        );
}

.ballet-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--ballet-deep),
            var(--ballet-magenta),
            var(--ballet-rose)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.ballet-course-page .course-learning {
    background:
        linear-gradient(
            180deg,
            #fffafd,
            #faf4ff
        );
}

.ballet-course-page .course-section-heading > span {
    color: var(--ballet-magenta);
}

.ballet-course-page .course-learning-grid article {
    border:
        1px solid
        rgba(181, 59, 140, .08);
}

.ballet-course-page .course-learning-grid article:hover {
    box-shadow:
        0 25px 55px
        rgba(104, 33, 79, .11);
}


/* COLORES INDIVIDUALES DE LOS BLOQUES */

.ballet-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--ballet-deep);

    background:
        rgba(143, 47, 112, .10);
}

.ballet-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--ballet-magenta);

    background:
        rgba(181, 59, 140, .10);
}

.ballet-course-page
.course-learning-grid article:nth-child(3) > i {
    color: var(--ballet-lilac);

    background:
        rgba(164, 123, 194, .12);
}

.ballet-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--ballet-rose);

    background:
        rgba(217, 102, 170, .12);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.ballet-course-page .course-features {
    background:

        radial-gradient(
            circle at 92% 20%,
            rgba(217, 102, 170, .14),
            transparent 28%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(164, 123, 194, .10),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #31152d 0%,
            #542044 28%,
            #77275c 56%,
            #a63d7f 82%,
            #bf5c9a 100%
        );
}

.ballet-course-page
.course-features-intro > span {
    color: #f6acd1;
}


/* ICONOS DERECHA */

.ballet-course-page
.course-features-list article:nth-child(1) > i {
    color: #f5b2d2;

    background:
        rgba(217, 102, 170, .12);
}

.ballet-course-page
.course-features-list article:nth-child(2) > i {
    color: #c5a3de;

    background:
        rgba(164, 123, 194, .13);
}

.ballet-course-page
.course-features-list article:nth-child(3) > i {
    color: #f28cbc;

    background:
        rgba(217, 102, 170, .12);
}

.ballet-course-page
.course-features-list article:nth-child(4) > i {
    color: #ffd1e3;

    background:
        rgba(245, 197, 220, .12);
}


/* ==================================================
   ARTE IZQUIERDO · BALLET
   ================================================== */

.ballet-course-page .course-features-intro {
    position: relative;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.ballet-feature-art {
    position: relative;

    width: 100%;
    height: 245px;

    margin-top: auto;
}


/* ==================================================
   LÍNEAS DE MOVIMIENTO
   ================================================== */

.ballet-flow {
    position: absolute;

    border:
        2px solid
        rgba(245, 197, 220, .18);

    border-radius: 50%;

    pointer-events: none;
}

.ballet-flow.flow-one {
    width: 330px;
    height: 120px;

    left: -20px;
    bottom: 30px;

    transform:
        rotate(-12deg);
}

.ballet-flow.flow-two {
    width: 280px;
    height: 95px;

    left: 80px;
    bottom: 70px;

    border-color:
        rgba(164, 123, 194, .18);

    transform:
        rotate(11deg);
}


/* ==================================================
   ICONOS DECORATIVOS
   ================================================== */

.ballet-feature-art > i {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(49, 21, 45, .24)
        );
}

.ballet-feature-art .ballet-icon-one {
    left: 11%;
    bottom: 105px;

    color: #f29ac5;

    font-size: 3.6rem;

    transform:
        rotate(-9deg);
}

.ballet-feature-art .ballet-icon-two {
    left: 50%;
    bottom: 48px;

    color: #c6a0db;

    font-size: 2.6rem;

    transform:
        rotate(8deg);
}

.ballet-feature-art .ballet-icon-three {
    right: 10%;
    bottom: 128px;

    color: #ffd0e3;

    font-size: 2.8rem;

    opacity: .90;

    transform:
        rotate(10deg);
}


/* ==================================================
   CÍRCULOS
   ================================================== */

.ballet-feature-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.ballet-feature-circle.circle-one {
    width: 160px;
    height: 160px;

    left: -65px;
    bottom: -65px;

    border:
        1px solid
        rgba(217, 102, 170, .17);
}

.ballet-feature-circle.circle-two {
    width: 95px;
    height: 95px;

    right: 20px;
    top: 14px;

    border:
        1px solid
        rgba(164, 123, 194, .20);
}


/* GLOW */

.ballet-feature-art::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: 34%;
    bottom: -10px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(217, 102, 170, .12),
            rgba(164, 123, 194, .05),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.ballet-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(217, 102, 170, .22),
            transparent 28%
        ),

        radial-gradient(
            circle at 72% 92%,
            rgba(164, 123, 194, .12),
            transparent 26%
        ),

        linear-gradient(
            120deg,
            #fff8fc,
            #faf3ff
        );
}

.ballet-course-page
.course-audience-card > div:first-child > span {
    color: var(--ballet-magenta);
}

.ballet-course-page .course-audience-icon {
    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--ballet-wine),
            var(--ballet-deep) 38%,
            var(--ballet-magenta) 68%,
            var(--ballet-lilac)
        );

    box-shadow:
        0 25px 60px
        rgba(104, 33, 79, .22);
}

.ballet-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(255, 222, 236, .38);

    border-radius: 50%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.ballet-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #fffafd,
            #faf5ff
        );
}

.ballet-course-page
.other-course-card > span {
    color: var(--ballet-magenta);
}

.ballet-course-page
.other-course-card {
    border:
        1px solid
        rgba(181, 59, 140, .08);
}

.ballet-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(104, 33, 79, .13);
}

.ballet-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--ballet-wine),
            var(--ballet-magenta),
            var(--ballet-lilac)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.ballet-course-page .course-cta {
    background:

        radial-gradient(
            circle at 84% 32%,
            rgba(217, 102, 170, .22),
            transparent 27%
        ),

        radial-gradient(
            circle at 68% 92%,
            rgba(164, 123, 194, .11),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #31152d 0%,
            #542044 28%,
            #77275c 55%,
            #a83f80 78%,
            #d564a4 100%
        );
}

.ballet-course-page
.course-cta > div > span {
    color: #ffc3de;
}

.ballet-course-page
.course-cta .discipline-cta-button {
    color: var(--ballet-wine);
}

.ballet-course-page
.course-cta .discipline-cta-button i {
    color: var(--ballet-magenta);
}

.ballet-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(49, 21, 45, .30);
}


/* ==================================================
   FOOTER
   ================================================== */

.ballet-course-page
.discipline-footer-column a:hover,

.ballet-course-page
.discipline-footer-bottom a:hover {
    color: var(--ballet-pink);
}

.ballet-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--ballet-wine),
            var(--ballet-magenta),
            var(--ballet-lilac)
        );
}


/* ==================================================
   RESPONSIVE · BALLET
   ================================================== */

@media (max-width: 900px) {

    .ballet-feature-art {
        height: 180px;
        margin-top: 35px;
    }

    .ballet-flow.flow-one {
        width: 280px;
    }

    .ballet-flow.flow-two {
        width: 230px;
    }

}

/* ==================================================
   DANZA URBANA · IDENTIDAD DEL CURSO
   ================================================== */

.danza-urbana-course-page {
    --urban-night: #28132f;
    --urban-ink: #42183f;

    /* Color principal tomado de la tarjeta de Danza Urbana */
    --urban-deep: #8d3998;
    --urban-violet: #c1217b;
    --urban-electric: #d84ca2;

    --urban-blue: #7e4eb5;
    --urban-cyan: #35c5d8;

    --urban-lime: #b9e645;
    --urban-yellow: #f4d35e;
    --urban-orange: #ff8547;

    --urban-light: #fff1f8;
    --urban-soft: #fff8fc;
}


/* ==================================================
   HEADER
   ================================================== */

.danza-urbana-course-page .discipline-menu a:hover,
.danza-urbana-course-page .discipline-back:hover {
    color: var(--urban-violet);
}

.danza-urbana-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--urban-violet),
            var(--urban-blue),
            var(--urban-lime)
        );
}

.danza-urbana-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--urban-night),
            var(--urban-deep) 42%,
            var(--urban-violet) 72%,
            var(--urban-blue)
        );

    box-shadow:
        0 12px 30px
        rgba(141, 57, 152, .24);
}

.danza-urbana-course-page .course-header-cta:hover {
    box-shadow:
        0 17px 38px
        rgba(141, 57, 152, .34);
}


/* ==================================================
   HERO
   ================================================== */

.danza-urbana-course-page .course-hero {
    background:

        radial-gradient(
            circle at 86% 16%,
            rgba(216, 76, 162, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 73% 83%,
            rgba(53, 197, 216, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(185, 230, 69, .15),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff4fa 50%,
            #faf3ff 100%
        );
}

.danza-urbana-course-page .course-hero::before {
    background:
        rgba(216, 76, 162, .10);
}

.danza-urbana-course-page .course-eyebrow {
    color: var(--urban-violet);
}

.danza-urbana-course-page .course-hero h1 {
    color: var(--urban-night);
}

.danza-urbana-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--urban-deep) 0%,
            var(--urban-violet) 38%,
            var(--urban-blue) 70%,
            var(--urban-cyan) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES DEL HERO
   ================================================== */

.danza-urbana-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--urban-night),
            var(--urban-deep) 38%,
            var(--urban-violet) 70%,
            var(--urban-blue)
        );

    box-shadow:
        0 15px 35px
        rgba(141, 57, 152, .25);
}

.danza-urbana-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px
        rgba(141, 57, 152, .34);
}

.danza-urbana-course-page .discipline-btn.secondary {
    color: var(--urban-night);

    border:
        1px solid
        rgba(193, 33, 123, .16);

    background:
        rgba(255, 255, 255, .90);
}

.danza-urbana-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(126, 78, 181, .40);

    box-shadow:
        0 12px 26px
        rgba(141, 57, 152, .09);
}


/* ==================================================
   DETALLES E IMAGEN DEL HERO
   ================================================== */

.danza-urbana-course-page .course-hero-details i {
    color: var(--urban-violet);
}

.danza-urbana-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--urban-blue);
}

.danza-urbana-course-page
.course-hero-details span:nth-child(3) i {
    color: #8eb626;
}

.danza-urbana-course-page .course-image-frame {
    border:
        1px solid
        rgba(193, 33, 123, .12);

    box-shadow:
        0 35px 80px
        rgba(66, 24, 63, .22);
}

.danza-urbana-course-page .course-image-badge i {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--urban-deep),
            var(--urban-violet),
            var(--urban-blue)
        );
}

.danza-urbana-course-page .course-media-shape-one {
    background:
        rgba(216, 76, 162, .24);
}

.danza-urbana-course-page .course-media-shape-two {
    background:
        rgba(185, 230, 69, .25);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.danza-urbana-course-page .course-section-label,
.danza-urbana-course-page .course-overview-main > span {
    color: var(--urban-violet);
}

.danza-urbana-course-page .course-overview h2,
.danza-urbana-course-page .course-section-heading h2,
.danza-urbana-course-page .course-audience h2 {
    color: var(--urban-night);
}

.danza-urbana-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #fffafd,
            #fcf3fb
        );

    border:
        1px solid
        rgba(193, 33, 123, .09);

    box-shadow:
        0 18px 50px
        rgba(66, 24, 63, .08);
}

.danza-urbana-course-page .course-info-item i {
    color: var(--urban-violet);

    background:
        rgba(193, 33, 123, .10);
}

.danza-urbana-course-page
.course-info-item:nth-child(3) i {
    color: var(--urban-blue);

    background:
        rgba(126, 78, 181, .11);
}

.danza-urbana-course-page
.course-info-item:nth-child(4) i {
    color: #7eaa13;

    background:
        rgba(185, 230, 69, .20);
}

.danza-urbana-course-page
.course-info-item:nth-child(5) i {
    color: var(--urban-orange);

    background:
        rgba(255, 133, 71, .11);
}

.danza-urbana-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--urban-night),
            var(--urban-deep),
            var(--urban-violet),
            var(--urban-blue)
        );
}

.danza-urbana-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--urban-deep),
            var(--urban-violet),
            var(--urban-blue),
            var(--urban-cyan)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.danza-urbana-course-page .course-learning {
    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(185, 230, 69, .09),
            transparent 23%
        ),

        linear-gradient(
            180deg,
            #fffafd,
            #faf2fb
        );
}

.danza-urbana-course-page .course-section-heading > span {
    color: var(--urban-violet);
}

.danza-urbana-course-page .course-learning-grid article {
    border:
        1px solid
        rgba(193, 33, 123, .08);
}

.danza-urbana-course-page .course-learning-grid article:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px
        rgba(66, 24, 63, .12);
}

.danza-urbana-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--urban-violet);

    background:
        rgba(193, 33, 123, .11);
}

.danza-urbana-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--urban-blue);

    background:
        rgba(126, 78, 181, .11);
}

.danza-urbana-course-page
.course-learning-grid article:nth-child(3) > i {
    color: #789f19;

    background:
        rgba(185, 230, 69, .21);
}

.danza-urbana-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--urban-orange);

    background:
        rgba(255, 133, 71, .12);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.danza-urbana-course-page .course-features {
    background:

        radial-gradient(
            circle at 91% 18%,
            rgba(216, 76, 162, .22),
            transparent 29%
        ),

        radial-gradient(
            circle at 11% 89%,
            rgba(185, 230, 69, .09),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #211027 0%,
            #42183f 28%,
            #8d3998 56%,
            #ad2c89 78%,
            #7e4eb5 100%
        );
}

.danza-urbana-course-page
.course-features-intro > span {
    color: #d4f36c;
}

.danza-urbana-course-page
.course-features-list article:nth-child(1) > i {
    color: #f1a3ce;

    background:
        rgba(216, 76, 162, .15);
}

.danza-urbana-course-page
.course-features-list article:nth-child(2) > i {
    color: #8de2ee;

    background:
        rgba(53, 197, 216, .13);
}

.danza-urbana-course-page
.course-features-list article:nth-child(3) > i {
    color: #d5ef75;

    background:
        rgba(185, 230, 69, .12);
}

.danza-urbana-course-page
.course-features-list article:nth-child(4) > i {
    color: #ffc09f;

    background:
        rgba(255, 133, 71, .13);
}


/* ==================================================
   ARTE DECORATIVO · DANZA URBANA
   ================================================== */

.danza-urbana-course-page .course-features-intro {
    position: relative;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.urban-feature-art {
    position: relative;

    width: 100%;
    height: 245px;

    margin-top: auto;
}

.urban-beat {
    position: absolute;

    height: 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(185, 230, 69, .72),
            rgba(53, 197, 216, .52),
            transparent
        );

    box-shadow:
        0 0 18px
        rgba(185, 230, 69, .18);

    pointer-events: none;
}

.urban-beat.beat-one {
    width: 330px;

    left: -28px;
    bottom: 55px;

    transform: rotate(-13deg);
}

.urban-beat.beat-two {
    width: 280px;

    left: 66px;
    bottom: 104px;

    transform: rotate(9deg);
}

.urban-beat.beat-three {
    width: 190px;

    right: -15px;
    top: 60px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 133, 71, .55),
            rgba(216, 76, 162, .55),
            transparent
        );

    transform: rotate(-24deg);
}

.urban-feature-art > i {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 9px 20px
            rgba(40, 19, 47, .30)
        );
}

.urban-feature-art .urban-icon-one {
    left: 10%;
    bottom: 96px;

    color: #d5f06f;

    font-size: 3.6rem;

    transform: rotate(-10deg);
}

.urban-feature-art .urban-icon-two {
    left: 49%;
    bottom: 42px;

    color: #87dfec;

    font-size: 2.8rem;

    transform: rotate(9deg);
}

.urban-feature-art .urban-icon-three {
    right: 9%;
    bottom: 126px;

    color: #ffc09f;

    font-size: 2.7rem;

    transform: rotate(12deg);
}

.urban-feature-shape {
    position: absolute;

    pointer-events: none;
}

.urban-feature-shape.shape-one {
    width: 155px;
    height: 155px;

    left: -60px;
    bottom: -62px;

    border:
        1px solid
        rgba(185, 230, 69, .20);

    border-radius: 28px;

    transform: rotate(28deg);
}

.urban-feature-shape.shape-two {
    width: 92px;
    height: 92px;

    right: 18px;
    top: 15px;

    border:
        1px solid
        rgba(53, 197, 216, .23);

    border-radius: 50%;
}

.urban-feature-art::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: 32%;
    bottom: -20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216, 76, 162, .16),
            rgba(53, 197, 216, .06),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.danza-urbana-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(216, 76, 162, .20),
            transparent 28%
        ),

        radial-gradient(
            circle at 73% 94%,
            rgba(185, 230, 69, .12),
            transparent 27%
        ),

        linear-gradient(
            120deg,
            #fff8fc,
            #fcf3fb
        );
}

.danza-urbana-course-page
.course-audience-card > div:first-child > span {
    color: var(--urban-violet);
}

.danza-urbana-course-page .course-audience-icon {
    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--urban-night),
            var(--urban-deep) 38%,
            var(--urban-violet) 68%,
            var(--urban-blue)
        );

    box-shadow:
        0 25px 60px
        rgba(66, 24, 63, .25);
}

.danza-urbana-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(220, 246, 121, .38);

    border-radius: 50%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.danza-urbana-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #fffafd,
            #faf2fb
        );
}

.danza-urbana-course-page
.other-course-card > span {
    color: var(--urban-violet);
}

.danza-urbana-course-page
.other-course-card {
    border:
        1px solid
        rgba(193, 33, 123, .08);
}

.danza-urbana-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(66, 24, 63, .14);
}

.danza-urbana-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--urban-deep),
            var(--urban-violet),
            var(--urban-blue)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.danza-urbana-course-page .course-cta {
    background:

        radial-gradient(
            circle at 86% 31%,
            rgba(185, 230, 69, .15),
            transparent 27%
        ),

        radial-gradient(
            circle at 68% 92%,
            rgba(53, 197, 216, .12),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #211027 0%,
            #42183f 27%,
            #8d3998 52%,
            #c1217b 76%,
            #7e4eb5 100%
        );
}

.danza-urbana-course-page
.course-cta > div > span {
    color: #d5f06f;
}

.danza-urbana-course-page
.course-cta .discipline-cta-button {
    color: var(--urban-night);
}

.danza-urbana-course-page
.course-cta .discipline-cta-button i {
    color: var(--urban-violet);
}

.danza-urbana-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(40, 19, 47, .33);
}


/* ==================================================
   FOOTER
   ================================================== */

.danza-urbana-course-page
.discipline-footer-column a:hover,

.danza-urbana-course-page
.discipline-footer-bottom a:hover {
    color: #e978b9;
}

.danza-urbana-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--urban-deep),
            var(--urban-violet),
            var(--urban-blue)
        );
}


/* ==================================================
   RESPONSIVE · DANZA URBANA
   ================================================== */

@media (max-width: 900px) {

    .urban-feature-art {
        height: 180px;
        margin-top: 35px;
    }

    .urban-beat.beat-one {
        width: 275px;
    }

    .urban-beat.beat-two {
        width: 225px;
    }

    .urban-feature-art .urban-icon-one {
        font-size: 3rem;
    }

}

/* ==================================================
   DANZA CONTEMPORÁNEA · IDENTIDAD DEL CURSO
   ================================================== */

.danza-contemporanea-course-page {
    --contemporary-night: #261a35;
    --contemporary-ink: #3f2a4b;

    /* Color principal tomado de la tarjeta de Danza Contemporánea */
    --contemporary-deep: #634185;
    --contemporary-purple: #8452ae;
    --contemporary-lilac: #a46dc3;

    --contemporary-mauve: #b96fae;
    --contemporary-sage: #78b8a6;

    --contemporary-mint: #b7ddcf;
    --contemporary-gold: #e3bd63;
    --contemporary-coral: #df8a8a;

    --contemporary-light: #faf5fc;
    --contemporary-soft: #f6fbf8;
}


/* ==================================================
   HEADER
   ================================================== */

.danza-contemporanea-course-page .discipline-menu a:hover,
.danza-contemporanea-course-page .discipline-back:hover {
    color: var(--contemporary-purple);
}

.danza-contemporanea-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--contemporary-purple),
            var(--contemporary-mauve),
            var(--contemporary-mint)
        );
}

.danza-contemporanea-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--contemporary-night),
            var(--contemporary-deep) 42%,
            var(--contemporary-purple) 72%,
            var(--contemporary-mauve)
        );

    box-shadow:
        0 12px 30px
        rgba(99, 65, 133, .24);
}

.danza-contemporanea-course-page .course-header-cta:hover {
    box-shadow:
        0 17px 38px
        rgba(99, 65, 133, .34);
}


/* ==================================================
   HERO
   ================================================== */

.danza-contemporanea-course-page .course-hero {
    background:

        radial-gradient(
            circle at 86% 16%,
            rgba(164, 109, 195, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 73% 83%,
            rgba(120, 184, 166, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(183, 221, 207, .15),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf5fc 50%,
            #f6f1fa 100%
        );
}

.danza-contemporanea-course-page .course-hero::before {
    background:
        rgba(164, 109, 195, .10);
}

.danza-contemporanea-course-page .course-eyebrow {
    color: var(--contemporary-purple);
}

.danza-contemporanea-course-page .course-hero h1 {
    color: var(--contemporary-night);
}

.danza-contemporanea-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--contemporary-deep) 0%,
            var(--contemporary-purple) 38%,
            var(--contemporary-mauve) 70%,
            var(--contemporary-sage) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES DEL HERO
   ================================================== */

.danza-contemporanea-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--contemporary-night),
            var(--contemporary-deep) 38%,
            var(--contemporary-purple) 70%,
            var(--contemporary-mauve)
        );

    box-shadow:
        0 15px 35px
        rgba(99, 65, 133, .25);
}

.danza-contemporanea-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px
        rgba(99, 65, 133, .34);
}

.danza-contemporanea-course-page .discipline-btn.secondary {
    color: var(--contemporary-night);

    border:
        1px solid
        rgba(132, 82, 174, .16);

    background:
        rgba(255, 255, 255, .90);
}

.danza-contemporanea-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(185, 111, 174, .40);

    box-shadow:
        0 12px 26px
        rgba(99, 65, 133, .09);
}


/* ==================================================
   DETALLES E IMAGEN DEL HERO
   ================================================== */

.danza-contemporanea-course-page .course-hero-details i {
    color: var(--contemporary-purple);
}

.danza-contemporanea-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--contemporary-mauve);
}

.danza-contemporanea-course-page
.course-hero-details span:nth-child(3) i {
    color: #4f8d7b;
}

.danza-contemporanea-course-page .course-image-frame {
    border:
        1px solid
        rgba(132, 82, 174, .12);

    box-shadow:
        0 35px 80px
        rgba(63, 42, 75, .22);
}

.danza-contemporanea-course-page .course-image-badge i {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--contemporary-deep),
            var(--contemporary-purple),
            var(--contemporary-mauve)
        );
}

.danza-contemporanea-course-page .course-media-shape-one {
    background:
        rgba(164, 109, 195, .24);
}

.danza-contemporanea-course-page .course-media-shape-two {
    background:
        rgba(183, 221, 207, .25);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.danza-contemporanea-course-page .course-section-label,
.danza-contemporanea-course-page .course-overview-main > span {
    color: var(--contemporary-purple);
}

.danza-contemporanea-course-page .course-overview h2,
.danza-contemporanea-course-page .course-section-heading h2,
.danza-contemporanea-course-page .course-audience h2 {
    color: var(--contemporary-night);
}

.danza-contemporanea-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #fbf8fc,
            #f7f2fa
        );

    border:
        1px solid
        rgba(132, 82, 174, .09);

    box-shadow:
        0 18px 50px
        rgba(63, 42, 75, .08);
}

.danza-contemporanea-course-page .course-info-item i {
    color: var(--contemporary-purple);

    background:
        rgba(132, 82, 174, .10);
}

.danza-contemporanea-course-page
.course-info-item:nth-child(3) i {
    color: var(--contemporary-mauve);

    background:
        rgba(185, 111, 174, .11);
}

.danza-contemporanea-course-page
.course-info-item:nth-child(4) i {
    color: #4f8d7b;

    background:
        rgba(183, 221, 207, .20);
}

.danza-contemporanea-course-page
.course-info-item:nth-child(5) i {
    color: var(--contemporary-coral);

    background:
        rgba(223, 138, 138, .11);
}

.danza-contemporanea-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--contemporary-night),
            var(--contemporary-deep),
            var(--contemporary-purple),
            var(--contemporary-mauve)
        );
}

.danza-contemporanea-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--contemporary-deep),
            var(--contemporary-purple),
            var(--contemporary-mauve),
            var(--contemporary-sage)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.danza-contemporanea-course-page .course-learning {
    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(183, 221, 207, .09),
            transparent 23%
        ),

        linear-gradient(
            180deg,
            #fbf8fc,
            #f6f1f8
        );
}

.danza-contemporanea-course-page .course-section-heading > span {
    color: var(--contemporary-purple);
}

.danza-contemporanea-course-page .course-learning-grid article {
    border:
        1px solid
        rgba(132, 82, 174, .08);
}

.danza-contemporanea-course-page .course-learning-grid article:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px
        rgba(63, 42, 75, .12);
}

.danza-contemporanea-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--contemporary-purple);

    background:
        rgba(132, 82, 174, .11);
}

.danza-contemporanea-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--contemporary-mauve);

    background:
        rgba(185, 111, 174, .11);
}

.danza-contemporanea-course-page
.course-learning-grid article:nth-child(3) > i {
    color: #4f8d7b;

    background:
        rgba(183, 221, 207, .21);
}

.danza-contemporanea-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--contemporary-coral);

    background:
        rgba(223, 138, 138, .12);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.danza-contemporanea-course-page .course-features {
    background:

        radial-gradient(
            circle at 91% 18%,
            rgba(164, 109, 195, .22),
            transparent 29%
        ),

        radial-gradient(
            circle at 11% 89%,
            rgba(183, 221, 207, .09),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #23172f 0%,
            #3f2a4b 28%,
            #634185 56%,
            #9d5fae 78%,
            #b96fae 100%
        );
}

.danza-contemporanea-course-page
.course-features-intro > span {
    color: #f1d58a;
}

.danza-contemporanea-course-page
.course-features-list article:nth-child(1) > i {
    color: #d6aed8;

    background:
        rgba(164, 109, 195, .15);
}

.danza-contemporanea-course-page
.course-features-list article:nth-child(2) > i {
    color: #b7ddcf;

    background:
        rgba(120, 184, 166, .13);
}

.danza-contemporanea-course-page
.course-features-list article:nth-child(3) > i {
    color: #d7eadf;

    background:
        rgba(183, 221, 207, .12);
}

.danza-contemporanea-course-page
.course-features-list article:nth-child(4) > i {
    color: #f2b5b5;

    background:
        rgba(223, 138, 138, .13);
}


/* ==================================================
   ARTE DECORATIVO · DANZA CONTEMPORÁNEA
   ================================================== */

.danza-contemporanea-course-page .course-features-intro {
    position: relative;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.contemporary-feature-art {
    position: relative;

    width: 100%;
    height: 245px;

    margin-top: auto;
}

.contemporary-flow {
    position: absolute;

    border:
        2px solid
        rgba(183, 221, 207, .22);

    border-radius: 50%;

    background: transparent;

    pointer-events: none;
}

.contemporary-flow.flow-one {
    width: 330px;
    height: 120px;

    left: -25px;
    bottom: 30px;

    transform: rotate(-11deg);
}

.contemporary-flow.flow-two {
    width: 270px;
    height: 92px;

    left: 82px;
    bottom: 74px;

    border-color:
        rgba(185, 111, 174, .22);

    transform: rotate(12deg);
}

.contemporary-flow.flow-three {
    width: 190px;
    height: 68px;

    right: -25px;
    top: 62px;

    border-color:
        rgba(227, 189, 99, .20);

    transform: rotate(-18deg);
}

.contemporary-feature-art > i {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 9px 20px
            rgba(38, 26, 53, .30)
        );
}

.contemporary-feature-art .contemporary-icon-one {
    left: 10%;
    bottom: 96px;

    color: #b7ddcf;

    font-size: 3.6rem;

    transform: rotate(-10deg);
}

.contemporary-feature-art .contemporary-icon-two {
    left: 49%;
    bottom: 42px;

    color: #d6aed8;

    font-size: 2.8rem;

    transform: rotate(9deg);
}

.contemporary-feature-art .contemporary-icon-three {
    right: 9%;
    bottom: 126px;

    color: #f1d58a;

    font-size: 2.7rem;

    transform: rotate(12deg);
}

.contemporary-feature-shape {
    position: absolute;

    pointer-events: none;
}

.contemporary-feature-shape.shape-one {
    width: 155px;
    height: 155px;

    left: -60px;
    bottom: -62px;

    border:
        1px solid
        rgba(183, 221, 207, .20);

    border-radius: 50%;

    transform: rotate(28deg);
}

.contemporary-feature-shape.shape-two {
    width: 92px;
    height: 92px;

    right: 18px;
    top: 15px;

    border:
        1px solid
        rgba(120, 184, 166, .23);

    border-radius: 50%;
}

.contemporary-feature-art::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: 32%;
    bottom: -20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(164, 109, 195, .16),
            rgba(120, 184, 166, .06),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.danza-contemporanea-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(164, 109, 195, .20),
            transparent 28%
        ),

        radial-gradient(
            circle at 73% 94%,
            rgba(183, 221, 207, .12),
            transparent 27%
        ),

        linear-gradient(
            120deg,
            #f6fbf8,
            #f7f2fa
        );
}

.danza-contemporanea-course-page
.course-audience-card > div:first-child > span {
    color: var(--contemporary-purple);
}

.danza-contemporanea-course-page .course-audience-icon {
    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--contemporary-night),
            var(--contemporary-deep) 38%,
            var(--contemporary-purple) 68%,
            var(--contemporary-mauve)
        );

    box-shadow:
        0 25px 60px
        rgba(63, 42, 75, .25);
}

.danza-contemporanea-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(230, 211, 149, .38);

    border-radius: 50%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.danza-contemporanea-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #fbf8fc,
            #f6f1f8
        );
}

.danza-contemporanea-course-page
.other-course-card > span {
    color: var(--contemporary-purple);
}

.danza-contemporanea-course-page
.other-course-card {
    border:
        1px solid
        rgba(132, 82, 174, .08);
}

.danza-contemporanea-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(63, 42, 75, .14);
}

.danza-contemporanea-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--contemporary-deep),
            var(--contemporary-purple),
            var(--contemporary-mauve)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.danza-contemporanea-course-page .course-cta {
    background:

        radial-gradient(
            circle at 86% 31%,
            rgba(183, 221, 207, .15),
            transparent 27%
        ),

        radial-gradient(
            circle at 68% 92%,
            rgba(120, 184, 166, .12),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #23172f 0%,
            #3f2a4b 27%,
            #634185 52%,
            #8452ae 76%,
            #b96fae 100%
        );
}

.danza-contemporanea-course-page
.course-cta > div > span {
    color: #f1d58a;
}

.danza-contemporanea-course-page
.course-cta .discipline-cta-button {
    color: var(--contemporary-night);
}

.danza-contemporanea-course-page
.course-cta .discipline-cta-button i {
    color: var(--contemporary-purple);
}

.danza-contemporanea-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(38, 26, 53, .33);
}


/* ==================================================
   FOOTER
   ================================================== */

.danza-contemporanea-course-page
.discipline-footer-column a:hover,

.danza-contemporanea-course-page
.discipline-footer-bottom a:hover {
    color: #c98bc0;
}

.danza-contemporanea-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--contemporary-deep),
            var(--contemporary-purple),
            var(--contemporary-mauve)
        );
}


/* ==================================================
   RESPONSIVE · DANZA CONTEMPORÁNEA
   ================================================== */

@media (max-width: 900px) {

    .contemporary-feature-art {
        height: 180px;
        margin-top: 35px;
    }

    .contemporary-flow.flow-one {
        width: 275px;
        height: 100px;
    }

    .contemporary-flow.flow-two {
        width: 225px;
        height: 75px;
    }

    .contemporary-feature-art .contemporary-icon-one {
        font-size: 3rem;
    }

}

/* ==================================================
   DANZA LATINA · IDENTIDAD DEL CURSO
   ================================================== */

.danza-latina-course-page {
    --latin-night: #351825;
    --latin-ink: #5a203c;

    /* Color principal tomado de la tarjeta de Danza Latina */
    --latin-deep: #96305f;
    --latin-rose: #d34c87;
    --latin-coral: #e77c8f;

    --latin-peach: #f0a07e;
    --latin-teal: #3eaa9b;

    --latin-aqua: #91d7c9;
    --latin-gold: #f2bf58;
    --latin-warm-coral: #e96f6f;

    --latin-light: #fff4f7;
    --latin-soft: #fff8ed;
}


/* ==================================================
   HEADER
   ================================================== */

.danza-latina-course-page .discipline-menu a:hover,
.danza-latina-course-page .discipline-back:hover {
    color: var(--latin-rose);
}

.danza-latina-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--latin-rose),
            var(--latin-peach),
            var(--latin-aqua)
        );
}

.danza-latina-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--latin-night),
            var(--latin-deep) 42%,
            var(--latin-rose) 72%,
            var(--latin-peach)
        );

    box-shadow:
        0 12px 30px
        rgba(150, 48, 95, .24);
}

.danza-latina-course-page .course-header-cta:hover {
    box-shadow:
        0 17px 38px
        rgba(150, 48, 95, .34);
}


/* ==================================================
   HERO
   ================================================== */

.danza-latina-course-page .course-hero {
    background:

        radial-gradient(
            circle at 86% 16%,
            rgba(231, 124, 143, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 73% 83%,
            rgba(62, 170, 155, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(145, 215, 201, .15),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff4f7 50%,
            #fff3f5 100%
        );
}

.danza-latina-course-page .course-hero::before {
    background:
        rgba(231, 124, 143, .10);
}

.danza-latina-course-page .course-eyebrow {
    color: var(--latin-rose);
}

.danza-latina-course-page .course-hero h1 {
    color: var(--latin-night);
}

.danza-latina-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--latin-deep) 0%,
            var(--latin-rose) 38%,
            var(--latin-peach) 70%,
            var(--latin-teal) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES DEL HERO
   ================================================== */

.danza-latina-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--latin-night),
            var(--latin-deep) 38%,
            var(--latin-rose) 70%,
            var(--latin-peach)
        );

    box-shadow:
        0 15px 35px
        rgba(150, 48, 95, .25);
}

.danza-latina-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px
        rgba(150, 48, 95, .34);
}

.danza-latina-course-page .discipline-btn.secondary {
    color: var(--latin-night);

    border:
        1px solid
        rgba(211, 76, 135, .16);

    background:
        rgba(255, 255, 255, .90);
}

.danza-latina-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(240, 160, 126, .40);

    box-shadow:
        0 12px 26px
        rgba(150, 48, 95, .09);
}


/* ==================================================
   DETALLES E IMAGEN DEL HERO
   ================================================== */

.danza-latina-course-page .course-hero-details i {
    color: var(--latin-rose);
}

.danza-latina-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--latin-peach);
}

.danza-latina-course-page
.course-hero-details span:nth-child(3) i {
    color: #2f887d;
}

.danza-latina-course-page .course-image-frame {
    border:
        1px solid
        rgba(211, 76, 135, .12);

    box-shadow:
        0 35px 80px
        rgba(90, 32, 60, .22);
}

.danza-latina-course-page .course-image-badge i {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--latin-deep),
            var(--latin-rose),
            var(--latin-peach)
        );
}

.danza-latina-course-page .course-media-shape-one {
    background:
        rgba(231, 124, 143, .24);
}

.danza-latina-course-page .course-media-shape-two {
    background:
        rgba(145, 215, 201, .25);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.danza-latina-course-page .course-section-label,
.danza-latina-course-page .course-overview-main > span {
    color: var(--latin-rose);
}

.danza-latina-course-page .course-overview h2,
.danza-latina-course-page .course-section-heading h2,
.danza-latina-course-page .course-audience h2 {
    color: var(--latin-night);
}

.danza-latina-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #fff9fa,
            #fff3f5
        );

    border:
        1px solid
        rgba(211, 76, 135, .09);

    box-shadow:
        0 18px 50px
        rgba(90, 32, 60, .08);
}

.danza-latina-course-page .course-info-item i {
    color: var(--latin-rose);

    background:
        rgba(211, 76, 135, .10);
}

.danza-latina-course-page
.course-info-item:nth-child(3) i {
    color: var(--latin-peach);

    background:
        rgba(240, 160, 126, .11);
}

.danza-latina-course-page
.course-info-item:nth-child(4) i {
    color: #2f887d;

    background:
        rgba(145, 215, 201, .20);
}

.danza-latina-course-page
.course-info-item:nth-child(5) i {
    color: var(--latin-warm-coral);

    background:
        rgba(233, 111, 111, .11);
}

.danza-latina-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--latin-night),
            var(--latin-deep),
            var(--latin-rose),
            var(--latin-peach)
        );
}

.danza-latina-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--latin-deep),
            var(--latin-rose),
            var(--latin-peach),
            var(--latin-teal)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.danza-latina-course-page .course-learning {
    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(145, 215, 201, .09),
            transparent 23%
        ),

        linear-gradient(
            180deg,
            #fff9fa,
            #fff5f3
        );
}

.danza-latina-course-page .course-section-heading > span {
    color: var(--latin-rose);
}

.danza-latina-course-page .course-learning-grid article {
    border:
        1px solid
        rgba(211, 76, 135, .08);
}

.danza-latina-course-page .course-learning-grid article:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px
        rgba(90, 32, 60, .12);
}

.danza-latina-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--latin-rose);

    background:
        rgba(211, 76, 135, .11);
}

.danza-latina-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--latin-peach);

    background:
        rgba(240, 160, 126, .11);
}

.danza-latina-course-page
.course-learning-grid article:nth-child(3) > i {
    color: #2f887d;

    background:
        rgba(145, 215, 201, .21);
}

.danza-latina-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--latin-warm-coral);

    background:
        rgba(233, 111, 111, .12);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.danza-latina-course-page .course-features {
    background:

        radial-gradient(
            circle at 91% 18%,
            rgba(231, 124, 143, .22),
            transparent 29%
        ),

        radial-gradient(
            circle at 11% 89%,
            rgba(145, 215, 201, .09),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #2a1320 0%,
            #5a203c 28%,
            #96305f 56%,
            #e06a88 78%,
            #f0a07e 100%
        );
}

.danza-latina-course-page
.course-features-intro > span {
    color: #ffe09a;
}

.danza-latina-course-page
.course-features-list article:nth-child(1) > i {
    color: #f5b3c1;

    background:
        rgba(231, 124, 143, .15);
}

.danza-latina-course-page
.course-features-list article:nth-child(2) > i {
    color: #91d7c9;

    background:
        rgba(62, 170, 155, .13);
}

.danza-latina-course-page
.course-features-list article:nth-child(3) > i {
    color: #bfe8de;

    background:
        rgba(145, 215, 201, .12);
}

.danza-latina-course-page
.course-features-list article:nth-child(4) > i {
    color: #f5a6a6;

    background:
        rgba(233, 111, 111, .13);
}


/* ==================================================
   ARTE DECORATIVO · DANZA LATINA
   ================================================== */

.danza-latina-course-page .course-features-intro {
    position: relative;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.latin-feature-art {
    position: relative;

    width: 100%;
    height: 245px;

    margin-top: auto;
}

.latin-rhythm {
    position: absolute;

    border:
        2px solid
        rgba(145, 215, 201, .22);

    border-radius: 50%;

    background: transparent;

    pointer-events: none;
}

.latin-rhythm.rhythm-one {
    width: 330px;
    height: 120px;

    left: -25px;
    bottom: 30px;

    transform: rotate(-11deg);
}

.latin-rhythm.rhythm-two {
    width: 270px;
    height: 92px;

    left: 82px;
    bottom: 74px;

    border-color:
        rgba(240, 160, 126, .22);

    transform: rotate(12deg);
}

.latin-rhythm.rhythm-three {
    width: 190px;
    height: 68px;

    right: -25px;
    top: 62px;

    border-color:
        rgba(242, 191, 88, .20);

    transform: rotate(-18deg);
}

.latin-feature-art > i {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 9px 20px
            rgba(53, 24, 37, .30)
        );
}

.latin-feature-art .latin-icon-one {
    left: 10%;
    bottom: 96px;

    color: #91d7c9;

    font-size: 3.6rem;

    transform: rotate(-10deg);
}

.latin-feature-art .latin-icon-two {
    left: 49%;
    bottom: 42px;

    color: #f5b3c1;

    font-size: 2.8rem;

    transform: rotate(9deg);
}

.latin-feature-art .latin-icon-three {
    right: 9%;
    bottom: 126px;

    color: #ffe09a;

    font-size: 2.7rem;

    transform: rotate(12deg);
}

.latin-feature-shape {
    position: absolute;

    pointer-events: none;
}

.latin-feature-shape.shape-one {
    width: 155px;
    height: 155px;

    left: -60px;
    bottom: -62px;

    border:
        1px solid
        rgba(145, 215, 201, .20);

    border-radius: 50%;

    transform: rotate(28deg);
}

.latin-feature-shape.shape-two {
    width: 92px;
    height: 92px;

    right: 18px;
    top: 15px;

    border:
        1px solid
        rgba(62, 170, 155, .23);

    border-radius: 50%;
}

.latin-feature-art::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: 32%;
    bottom: -20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(231, 124, 143, .16),
            rgba(62, 170, 155, .06),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.danza-latina-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(231, 124, 143, .20),
            transparent 28%
        ),

        radial-gradient(
            circle at 73% 94%,
            rgba(145, 215, 201, .12),
            transparent 27%
        ),

        linear-gradient(
            120deg,
            #fff8ed,
            #fff3f5
        );
}

.danza-latina-course-page
.course-audience-card > div:first-child > span {
    color: var(--latin-rose);
}

.danza-latina-course-page .course-audience-icon {
    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--latin-night),
            var(--latin-deep) 38%,
            var(--latin-rose) 68%,
            var(--latin-peach)
        );

    box-shadow:
        0 25px 60px
        rgba(90, 32, 60, .25);
}

.danza-latina-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(255, 224, 154, .38);

    border-radius: 50%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.danza-latina-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #fff9fa,
            #fff5f3
        );
}

.danza-latina-course-page
.other-course-card > span {
    color: var(--latin-rose);
}

.danza-latina-course-page
.other-course-card {
    border:
        1px solid
        rgba(211, 76, 135, .08);
}

.danza-latina-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(90, 32, 60, .14);
}

.danza-latina-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--latin-deep),
            var(--latin-rose),
            var(--latin-peach)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.danza-latina-course-page .course-cta {
    background:

        radial-gradient(
            circle at 86% 31%,
            rgba(145, 215, 201, .15),
            transparent 27%
        ),

        radial-gradient(
            circle at 68% 92%,
            rgba(62, 170, 155, .12),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #2a1320 0%,
            #5a203c 27%,
            #96305f 52%,
            #d34c87 76%,
            #f0a07e 100%
        );
}

.danza-latina-course-page
.course-cta > div > span {
    color: #ffe09a;
}

.danza-latina-course-page
.course-cta .discipline-cta-button {
    color: var(--latin-night);
}

.danza-latina-course-page
.course-cta .discipline-cta-button i {
    color: var(--latin-rose);
}

.danza-latina-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(53, 24, 37, .33);
}


/* ==================================================
   FOOTER
   ================================================== */

.danza-latina-course-page
.discipline-footer-column a:hover,

.danza-latina-course-page
.discipline-footer-bottom a:hover {
    color: #f39aaa;
}

.danza-latina-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--latin-deep),
            var(--latin-rose),
            var(--latin-peach)
        );
}


/* ==================================================
   RESPONSIVE · DANZA LATINA
   ================================================== */

@media (max-width: 900px) {

    .latin-feature-art {
        height: 180px;
        margin-top: 35px;
    }

    .latin-rhythm.rhythm-one {
        width: 275px;
        height: 100px;
    }

    .latin-rhythm.rhythm-two {
        width: 225px;
        height: 75px;
    }

    .latin-feature-art .latin-icon-one {
        font-size: 3rem;
    }

}

/* ==================================================
   K-POP · IDENTIDAD DEL CURSO
   ================================================== */

.kpop-course-page {
    --kpop-night: #1e1738;
    --kpop-ink: #33245c;

    /* Color principal tomado de la tarjeta de K-Pop */
    --kpop-deep: #50358f;
    --kpop-violet: #6f4bb6;
    --kpop-fuchsia: #cb4c9b;

    --kpop-pink: #e96db2;
    --kpop-cyan: #48c8d8;

    --kpop-blue: #4f7de8;
    --kpop-neon: #d8eb62;
    --kpop-coral: #f17b91;

    --kpop-light: #f8f5ff;
    --kpop-soft: #fff5fb;
}


/* ==================================================
   HEADER
   ================================================== */

.kpop-course-page .discipline-menu a:hover,
.kpop-course-page .discipline-back:hover {
    color: var(--kpop-violet);
}

.kpop-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--kpop-violet),
            var(--kpop-pink),
            var(--kpop-blue)
        );
}

.kpop-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--kpop-night),
            var(--kpop-deep) 42%,
            var(--kpop-violet) 72%,
            var(--kpop-pink)
        );

    box-shadow:
        0 12px 30px
        rgba(80, 53, 143, .24);
}

.kpop-course-page .course-header-cta:hover {
    box-shadow:
        0 17px 38px
        rgba(80, 53, 143, .34);
}


/* ==================================================
   HERO
   ================================================== */

.kpop-course-page .course-hero {
    background:

        radial-gradient(
            circle at 86% 16%,
            rgba(203, 76, 155, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 73% 83%,
            rgba(72, 200, 216, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(79, 125, 232, .15),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f5ff 50%,
            #f5f2ff 100%
        );
}

.kpop-course-page .course-hero::before {
    background:
        rgba(203, 76, 155, .10);
}

.kpop-course-page .course-eyebrow {
    color: var(--kpop-violet);
}

.kpop-course-page .course-hero h1 {
    color: var(--kpop-night);
}

.kpop-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--kpop-deep) 0%,
            var(--kpop-violet) 38%,
            var(--kpop-pink) 70%,
            var(--kpop-cyan) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES DEL HERO
   ================================================== */

.kpop-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--kpop-night),
            var(--kpop-deep) 38%,
            var(--kpop-violet) 70%,
            var(--kpop-pink)
        );

    box-shadow:
        0 15px 35px
        rgba(80, 53, 143, .25);
}

.kpop-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px
        rgba(80, 53, 143, .34);
}

.kpop-course-page .discipline-btn.secondary {
    color: var(--kpop-night);

    border:
        1px solid
        rgba(111, 75, 182, .16);

    background:
        rgba(255, 255, 255, .90);
}

.kpop-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(233, 109, 178, .40);

    box-shadow:
        0 12px 26px
        rgba(80, 53, 143, .09);
}


/* ==================================================
   DETALLES E IMAGEN DEL HERO
   ================================================== */

.kpop-course-page .course-hero-details i {
    color: var(--kpop-violet);
}

.kpop-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--kpop-pink);
}

.kpop-course-page
.course-hero-details span:nth-child(3) i {
    color: #2ca8b7;
}

.kpop-course-page .course-image-frame {
    border:
        1px solid
        rgba(111, 75, 182, .12);

    box-shadow:
        0 35px 80px
        rgba(51, 36, 92, .22);
}

.kpop-course-page .course-image-badge i {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--kpop-deep),
            var(--kpop-violet),
            var(--kpop-pink)
        );
}

.kpop-course-page .course-media-shape-one {
    background:
        rgba(203, 76, 155, .24);
}

.kpop-course-page .course-media-shape-two {
    background:
        rgba(79, 125, 232, .25);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.kpop-course-page .course-section-label,
.kpop-course-page .course-overview-main > span {
    color: var(--kpop-violet);
}

.kpop-course-page .course-overview h2,
.kpop-course-page .course-section-heading h2,
.kpop-course-page .course-audience h2 {
    color: var(--kpop-night);
}

.kpop-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #fbf9ff,
            #f5f2ff
        );

    border:
        1px solid
        rgba(111, 75, 182, .09);

    box-shadow:
        0 18px 50px
        rgba(51, 36, 92, .08);
}

.kpop-course-page .course-info-item i {
    color: var(--kpop-violet);

    background:
        rgba(111, 75, 182, .10);
}

.kpop-course-page
.course-info-item:nth-child(3) i {
    color: var(--kpop-pink);

    background:
        rgba(233, 109, 178, .11);
}

.kpop-course-page
.course-info-item:nth-child(4) i {
    color: #2ca8b7;

    background:
        rgba(79, 125, 232, .20);
}

.kpop-course-page
.course-info-item:nth-child(5) i {
    color: var(--kpop-coral);

    background:
        rgba(241, 123, 145, .11);
}

.kpop-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--kpop-night),
            var(--kpop-deep),
            var(--kpop-violet),
            var(--kpop-pink)
        );
}

.kpop-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--kpop-deep),
            var(--kpop-violet),
            var(--kpop-pink),
            var(--kpop-cyan)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.kpop-course-page .course-learning {
    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(79, 125, 232, .09),
            transparent 23%
        ),

        linear-gradient(
            180deg,
            #fbf9ff,
            #fff5fb
        );
}

.kpop-course-page .course-section-heading > span {
    color: var(--kpop-violet);
}

.kpop-course-page .course-learning-grid article {
    border:
        1px solid
        rgba(111, 75, 182, .08);
}

.kpop-course-page .course-learning-grid article:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px
        rgba(51, 36, 92, .12);
}

.kpop-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--kpop-violet);

    background:
        rgba(111, 75, 182, .11);
}

.kpop-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--kpop-pink);

    background:
        rgba(233, 109, 178, .11);
}

.kpop-course-page
.course-learning-grid article:nth-child(3) > i {
    color: #2ca8b7;

    background:
        rgba(79, 125, 232, .21);
}

.kpop-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--kpop-coral);

    background:
        rgba(241, 123, 145, .12);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.kpop-course-page .course-features {
    background:

        radial-gradient(
            circle at 91% 18%,
            rgba(203, 76, 155, .22),
            transparent 29%
        ),

        radial-gradient(
            circle at 11% 89%,
            rgba(79, 125, 232, .09),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #171127 0%,
            #33245c 28%,
            #50358f 56%,
            #a449a4 78%,
            #e96db2 100%
        );
}

.kpop-course-page
.course-features-intro > span {
    color: #e8f49a;
}

.kpop-course-page
.course-features-list article:nth-child(1) > i {
    color: #ef9ed0;

    background:
        rgba(203, 76, 155, .15);
}

.kpop-course-page
.course-features-list article:nth-child(2) > i {
    color: #4f7de8;

    background:
        rgba(72, 200, 216, .13);
}

.kpop-course-page
.course-features-list article:nth-child(3) > i {
    color: #a9ebf2;

    background:
        rgba(79, 125, 232, .12);
}

.kpop-course-page
.course-features-list article:nth-child(4) > i {
    color: #f8a2b6;

    background:
        rgba(241, 123, 145, .13);
}


/* ==================================================
   ARTE DECORATIVO · K-POP
   ================================================== */

.kpop-course-page .course-features-intro {
    position: relative;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.kpop-feature-art {
    position: relative;

    width: 100%;
    height: 245px;

    margin-top: auto;
}

.kpop-beam {
    position: absolute;

    height: 5px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72, 200, 216, .70),
            rgba(79, 125, 232, .58),
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(72, 200, 216, .18);

    pointer-events: none;
}

.kpop-beam.beam-one {
    width: 330px;

    left: -20px;
    bottom: 52px;

    transform: rotate(-14deg);
}

.kpop-beam.beam-two {
    width: 270px;

    left: 78px;
    bottom: 105px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(233, 109, 178, .68),
            rgba(203, 76, 155, .58),
            transparent
        );

    transform: rotate(10deg);
}

.kpop-beam.beam-three {
    width: 190px;

    right: -18px;
    top: 58px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216, 235, 98, .62),
            rgba(233, 109, 178, .45),
            transparent
        );

    transform: rotate(-24deg);
}

.kpop-feature-art > i {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 9px 20px
            rgba(30, 23, 56, .30)
        );
}

.kpop-feature-art .kpop-icon-one {
    left: 10%;
    bottom: 96px;

    color: #e8f49a;

    font-size: 3.6rem;

    transform: rotate(-10deg);
}

.kpop-feature-art .kpop-icon-two {
    left: 49%;
    bottom: 42px;

    color: #8be4ed;

    font-size: 2.8rem;

    transform: rotate(9deg);
}

.kpop-feature-art .kpop-icon-three {
    right: 9%;
    bottom: 126px;

    color: #ef9ed0;

    font-size: 2.7rem;

    transform: rotate(12deg);
}

.kpop-feature-shape {
    position: absolute;

    pointer-events: none;
}

.kpop-feature-shape.shape-one {
    width: 155px;
    height: 155px;

    left: -60px;
    bottom: -62px;

    border:
        1px solid
        rgba(79, 125, 232, .20);

    border-radius: 28px;

    transform: rotate(28deg);
}

.kpop-feature-shape.shape-two {
    width: 92px;
    height: 92px;

    right: 18px;
    top: 15px;

    border:
        1px solid
        rgba(72, 200, 216, .23);

    border-radius: 50%;
}

.kpop-feature-art::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: 32%;
    bottom: -20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(203, 76, 155, .16),
            rgba(72, 200, 216, .06),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.kpop-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(203, 76, 155, .20),
            transparent 28%
        ),

        radial-gradient(
            circle at 73% 94%,
            rgba(79, 125, 232, .12),
            transparent 27%
        ),

        linear-gradient(
            120deg,
            #fff5fb,
            #f5f2ff
        );
}

.kpop-course-page
.course-audience-card > div:first-child > span {
    color: var(--kpop-violet);
}

.kpop-course-page .course-audience-icon {
    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--kpop-night),
            var(--kpop-deep) 38%,
            var(--kpop-violet) 68%,
            var(--kpop-pink)
        );

    box-shadow:
        0 25px 60px
        rgba(51, 36, 92, .25);
}

.kpop-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(232, 244, 154, .38);

    border-radius: 50%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.kpop-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #fbf9ff,
            #fff5fb
        );
}

.kpop-course-page
.other-course-card > span {
    color: var(--kpop-violet);
}

.kpop-course-page
.other-course-card {
    border:
        1px solid
        rgba(111, 75, 182, .08);
}

.kpop-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(51, 36, 92, .14);
}

.kpop-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--kpop-deep),
            var(--kpop-violet),
            var(--kpop-pink)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.kpop-course-page .course-cta {
    background:

        radial-gradient(
            circle at 86% 31%,
            rgba(79, 125, 232, .15),
            transparent 27%
        ),

        radial-gradient(
            circle at 68% 92%,
            rgba(72, 200, 216, .12),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #171127 0%,
            #33245c 27%,
            #50358f 52%,
            #6f4bb6 76%,
            #e96db2 100%
        );
}

.kpop-course-page
.course-cta > div > span {
    color: #e8f49a;
}

.kpop-course-page
.course-cta .discipline-cta-button {
    color: var(--kpop-night);
}

.kpop-course-page
.course-cta .discipline-cta-button i {
    color: var(--kpop-violet);
}

.kpop-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(30, 23, 56, .33);
}


/* ==================================================
   FOOTER
   ================================================== */

.kpop-course-page
.discipline-footer-column a:hover,

.kpop-course-page
.discipline-footer-bottom a:hover {
    color: #e88ac4;
}

.kpop-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--kpop-deep),
            var(--kpop-violet),
            var(--kpop-pink)
        );
}


/* ==================================================
   RESPONSIVE · K-POP
   ================================================== */

@media (max-width: 900px) {

    .kpop-feature-art {
        height: 180px;
        margin-top: 35px;
    }

    .kpop-beam.beam-one {
        width: 275px;
        height: 5px;
    }

    .kpop-beam.beam-two {
        width: 225px;
        height: 5px;
    }

    .kpop-feature-art .kpop-icon-one {
        font-size: 3rem;
    }

}

/* ==================================================
   TEATRO · IDENTIDAD DEL CURSO
   ================================================== */

.teatro-course-page {
    --theater-night: #2b1519;
    --theater-ink: #4a1d24;

    /* Color principal tomado de la tarjeta de Teatro */
    --theater-wine: #9c3039;
    --theater-red: #b83b3f;
    --theater-coral: #d55749;

    --theater-orange: #e28b50;
    --theater-teal: #3f9b95;

    --theater-gold: #e3ad63;
    --theater-aqua: #9ed4ca;
    --theater-plum: #7b446b;

    --theater-light: #fff5f1;
    --theater-soft: #fff8f5;
}


/* ==================================================
   HEADER
   ================================================== */

.teatro-course-page .discipline-menu a:hover,
.teatro-course-page .discipline-back:hover {
    color: var(--theater-red);
}

.teatro-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--theater-red),
            var(--theater-orange),
            var(--theater-gold)
        );
}

.teatro-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--theater-night),
            var(--theater-wine) 42%,
            var(--theater-red) 72%,
            var(--theater-orange)
        );

    box-shadow:
        0 12px 30px
        rgba(129, 39, 53, .24);
}

.teatro-course-page .course-header-cta:hover {
    box-shadow:
        0 17px 38px
        rgba(129, 39, 53, .34);
}


/* ==================================================
   HERO
   ================================================== */

.teatro-course-page .course-hero {
    background:

        radial-gradient(
            circle at 86% 16%,
            rgba(213, 87, 73, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 73% 83%,
            rgba(63, 155, 149, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(227, 173, 99, .15),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff5f1 50%,
            #fff5f1 100%
        );
}

.teatro-course-page .course-hero::before {
    background:
        rgba(213, 87, 73, .10);
}

.teatro-course-page .course-eyebrow {
    color: var(--theater-red);
}

.teatro-course-page .course-hero h1 {
    color: var(--theater-night);
}

.teatro-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--theater-wine) 0%,
            var(--theater-red) 38%,
            var(--theater-orange) 70%,
            var(--theater-teal) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES DEL HERO
   ================================================== */

.teatro-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--theater-night),
            var(--theater-wine) 38%,
            var(--theater-red) 70%,
            var(--theater-orange)
        );

    box-shadow:
        0 15px 35px
        rgba(129, 39, 53, .25);
}

.teatro-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px
        rgba(129, 39, 53, .34);
}

.teatro-course-page .discipline-btn.secondary {
    color: var(--theater-night);

    border:
        1px solid
        rgba(184, 59, 63, .16);

    background:
        rgba(255, 255, 255, .90);
}

.teatro-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(226, 139, 80, .40);

    box-shadow:
        0 12px 26px
        rgba(129, 39, 53, .09);
}


/* ==================================================
   DETALLES E IMAGEN DEL HERO
   ================================================== */

.teatro-course-page .course-hero-details i {
    color: var(--theater-red);
}

.teatro-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--theater-orange);
}

.teatro-course-page
.course-hero-details span:nth-child(3) i {
    color: #2f817b;
}

.teatro-course-page .course-image-frame {
    border:
        1px solid
        rgba(184, 59, 63, .12);

    box-shadow:
        0 35px 80px
        rgba(74, 29, 36, .22);
}

.teatro-course-page .course-image-badge i {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--theater-wine),
            var(--theater-red),
            var(--theater-orange)
        );
}

.teatro-course-page .course-media-shape-one {
    background:
        rgba(213, 87, 73, .24);
}

.teatro-course-page .course-media-shape-two {
    background:
        rgba(227, 173, 99, .25);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.teatro-course-page .course-section-label,
.teatro-course-page .course-overview-main > span {
    color: var(--theater-red);
}

.teatro-course-page .course-overview h2,
.teatro-course-page .course-section-heading h2,
.teatro-course-page .course-audience h2 {
    color: var(--theater-night);
}

.teatro-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #fffaf7,
            #fff5f1
        );

    border:
        1px solid
        rgba(184, 59, 63, .09);

    box-shadow:
        0 18px 50px
        rgba(74, 29, 36, .08);
}

.teatro-course-page .course-info-item i {
    color: var(--theater-red);

    background:
        rgba(184, 59, 63, .10);
}

.teatro-course-page
.course-info-item:nth-child(3) i {
    color: var(--theater-orange);

    background:
        rgba(226, 139, 80, .11);
}

.teatro-course-page
.course-info-item:nth-child(4) i {
    color: #2f817b;

    background:
        rgba(227, 173, 99, .20);
}

.teatro-course-page
.course-info-item:nth-child(5) i {
    color: var(--theater-plum);

    background:
        rgba(123, 68, 107, .11);
}

.teatro-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--theater-night),
            var(--theater-wine),
            var(--theater-red),
            var(--theater-orange)
        );
}

.teatro-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--theater-wine),
            var(--theater-red),
            var(--theater-orange),
            var(--theater-teal)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.teatro-course-page .course-learning {
    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(227, 173, 99, .09),
            transparent 23%
        ),

        linear-gradient(
            180deg,
            #fffaf7,
            #fff8f5
        );
}

.teatro-course-page .course-section-heading > span {
    color: var(--theater-red);
}

.teatro-course-page .course-learning-grid article {
    border:
        1px solid
        rgba(184, 59, 63, .08);
}

.teatro-course-page .course-learning-grid article:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px
        rgba(74, 29, 36, .12);
}

.teatro-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--theater-red);

    background:
        rgba(184, 59, 63, .11);
}

.teatro-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--theater-orange);

    background:
        rgba(226, 139, 80, .11);
}

.teatro-course-page
.course-learning-grid article:nth-child(3) > i {
    color: #2f817b;

    background:
        rgba(227, 173, 99, .21);
}

.teatro-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--theater-plum);

    background:
        rgba(123, 68, 107, .12);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.teatro-course-page .course-features {
    background:

        radial-gradient(
            circle at 91% 18%,
            rgba(213, 87, 73, .22),
            transparent 29%
        ),

        radial-gradient(
            circle at 11% 89%,
            rgba(227, 173, 99, .09),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #211012 0%,
            #4a1d24 28%,
            #9c3039 56%,
            #c64945 78%,
            #e28b50 100%
        );
}

.teatro-course-page
.course-features-intro > span {
    color: #f1cd8a;
}

.teatro-course-page
.course-features-list article:nth-child(1) > i {
    color: #f2a087;

    background:
        rgba(213, 87, 73, .15);
}

.teatro-course-page
.course-features-list article:nth-child(2) > i {
    color: #e3ad63;

    background:
        rgba(63, 155, 149, .13);
}

.teatro-course-page
.course-features-list article:nth-child(3) > i {
    color: #b8ddd6;

    background:
        rgba(227, 173, 99, .12);
}

.teatro-course-page
.course-features-list article:nth-child(4) > i {
    color: #d9a2ba;

    background:
        rgba(123, 68, 107, .13);
}


/* ==================================================
   ARTE DECORATIVO · TEATRO
   ================================================== */

.teatro-course-page .course-features-intro {
    position: relative;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.stage-feature-art {
    position: relative;

    width: 100%;
    height: 245px;

    margin-top: auto;
}

.stage-beam {
    position: absolute;

    height: 5px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(63, 155, 149, .70),
            rgba(227, 173, 99, .58),
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(63, 155, 149, .18);

    pointer-events: none;
}

.stage-beam.beam-one {
    width: 330px;

    left: -20px;
    bottom: 52px;

    transform: rotate(-14deg);
}

.stage-beam.beam-two {
    width: 270px;

    left: 78px;
    bottom: 105px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(226, 139, 80, .68),
            rgba(213, 87, 73, .58),
            transparent
        );

    transform: rotate(10deg);
}

.stage-beam.beam-three {
    width: 190px;

    right: -18px;
    top: 58px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(158, 212, 202, .62),
            rgba(226, 139, 80, .45),
            transparent
        );

    transform: rotate(-24deg);
}

.stage-feature-art > i {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 9px 20px
            rgba(43, 21, 25, .30)
        );
}

.stage-feature-art .stage-icon-one {
    left: 10%;
    bottom: 96px;

    color: #f1cd8a;

    font-size: 3.6rem;

    transform: rotate(-10deg);
}

.stage-feature-art .stage-icon-two {
    left: 49%;
    bottom: 42px;

    color: #afe0d7;

    font-size: 2.8rem;

    transform: rotate(9deg);
}

.stage-feature-art .stage-icon-three {
    right: 9%;
    bottom: 126px;

    color: #f2a087;

    font-size: 2.7rem;

    transform: rotate(12deg);
}

.stage-feature-shape {
    position: absolute;

    pointer-events: none;
}

.stage-feature-shape.shape-one {
    width: 155px;
    height: 155px;

    left: -60px;
    bottom: -62px;

    border:
        1px solid
        rgba(227, 173, 99, .20);

    border-radius: 28px;

    transform: rotate(28deg);
}

.stage-feature-shape.shape-two {
    width: 92px;
    height: 92px;

    right: 18px;
    top: 15px;

    border:
        1px solid
        rgba(63, 155, 149, .23);

    border-radius: 50%;
}

.stage-feature-art::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: 32%;
    bottom: -20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(213, 87, 73, .16),
            rgba(63, 155, 149, .06),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.teatro-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(213, 87, 73, .20),
            transparent 28%
        ),

        radial-gradient(
            circle at 73% 94%,
            rgba(227, 173, 99, .12),
            transparent 27%
        ),

        linear-gradient(
            120deg,
            #fff8f5,
            #fff5f1
        );
}

.teatro-course-page
.course-audience-card > div:first-child > span {
    color: var(--theater-red);
}

.teatro-course-page .course-audience-icon {
    position: relative;

    background:
        linear-gradient(
            135deg,
            var(--theater-night),
            var(--theater-wine) 38%,
            var(--theater-red) 68%,
            var(--theater-orange)
        );

    box-shadow:
        0 25px 60px
        rgba(74, 29, 36, .25);
}

.teatro-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(184, 221, 214, .38);

    border-radius: 50%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.teatro-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #fffaf7,
            #fff8f5
        );
}

.teatro-course-page .other-courses-grid {
    grid-template-columns:
        minmax(0, 360px);

    justify-content: center;
}

.teatro-course-page
.other-course-card > span {
    color: var(--theater-red);
}

.teatro-course-page
.other-course-card {
    border:
        1px solid
        rgba(184, 59, 63, .08);
}

.teatro-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(74, 29, 36, .14);
}

.teatro-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--theater-wine),
            var(--theater-red),
            var(--theater-orange)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.teatro-course-page .course-cta {
    background:

        radial-gradient(
            circle at 86% 31%,
            rgba(227, 173, 99, .15),
            transparent 27%
        ),

        radial-gradient(
            circle at 68% 92%,
            rgba(63, 155, 149, .12),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #211012 0%,
            #4a1d24 27%,
            #9c3039 52%,
            #b83b3f 76%,
            #e28b50 100%
        );
}

.teatro-course-page
.course-cta > div > span {
    color: #f1cd8a;
}

.teatro-course-page
.course-cta .discipline-cta-button {
    color: var(--theater-night);
}

.teatro-course-page
.course-cta .discipline-cta-button i {
    color: var(--theater-red);
}

.teatro-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(43, 21, 25, .33);
}


/* ==================================================
   FOOTER
   ================================================== */

.teatro-course-page
.discipline-footer-column a:hover,

.teatro-course-page
.discipline-footer-bottom a:hover {
    color: #e58a65;
}

.teatro-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--theater-wine),
            var(--theater-red),
            var(--theater-orange)
        );
}


/* ==================================================
   RESPONSIVE · TEATRO
   ================================================== */

@media (max-width: 900px) {

    .teatro-course-page .other-courses-grid {
        grid-template-columns: 1fr;

        width: min(100%, 380px);
        margin-inline: auto;
    }

    .stage-feature-art {
        height: 180px;
        margin-top: 35px;
    }

    .stage-beam.beam-one {
        width: 275px;
        height: 5px;
    }

    .stage-beam.beam-two {
        width: 225px;
        height: 5px;
    }

    .stage-feature-art .stage-icon-one {
        font-size: 3rem;
    }

}

/* ==================================================
   ARTES ESCÉNICAS · IDENTIDAD DEL CURSO
   ================================================== */

.scenic-course-page {
    --scenic-night: #30171b;

    /* Colores exactos tomados de la tarjeta de Artes escénicas */
    --scenic-wine: #9c3039;
    --scenic-red: #b83b3f;
    --scenic-coral: #d55749;

    --scenic-orange: #e28b50;
    --scenic-teal: #3f8f93;

    --scenic-gold: #e3ad63;
    --scenic-blue: #4c719b;
    --scenic-plum: #85619b;
}


/* ==================================================
   HEADER
   ================================================== */

.scenic-course-page .discipline-menu a:hover,
.scenic-course-page .discipline-back:hover {
    color: var(--scenic-coral);
}

.scenic-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--scenic-coral),
            var(--scenic-orange),
            var(--scenic-gold)
        );
}

.scenic-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--scenic-wine),
            var(--scenic-red) 38%,
            var(--scenic-coral) 70%,
            var(--scenic-orange)
        );

    box-shadow:
        0 12px 30px
        rgba(129, 39, 53, .24);
}

.scenic-course-page .course-header-cta:hover {
    box-shadow:
        0 17px 38px
        rgba(129, 39, 53, .34);
}


/* ==================================================
   HERO
   ================================================== */

.scenic-course-page .course-hero {
    background:

        radial-gradient(
            circle at 86% 16%,
            rgba(213, 87, 73, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 73% 83%,
            rgba(63, 155, 149, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(227, 173, 99, .15),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff5f1 50%,
            #fff5f1 100%
        );
}

.scenic-course-page .course-hero::before {
    background:
        rgba(213, 87, 73, .10);
}

.scenic-course-page .course-eyebrow {
    color: var(--scenic-coral);
}

.scenic-course-page .course-hero h1 {
    color: var(--scenic-night);
}

.scenic-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--scenic-wine) 0%,
            var(--scenic-coral) 40%,
            var(--scenic-orange) 72%,
            var(--scenic-teal) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES DEL HERO
   ================================================== */

.scenic-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--scenic-wine),
            var(--scenic-red) 36%,
            var(--scenic-coral) 68%,
            var(--scenic-orange)
        );

    box-shadow:
        0 15px 35px
        rgba(129, 39, 53, .25);
}

.scenic-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px
        rgba(129, 39, 53, .34);
}

.scenic-course-page .discipline-btn.secondary {
    color: var(--scenic-night);

    border:
        1px solid
        rgba(184, 59, 63, .16);

    background:
        rgba(255, 255, 255, .90);
}

.scenic-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(226, 139, 80, .40);

    box-shadow:
        0 12px 26px
        rgba(129, 39, 53, .09);
}


/* ==================================================
   DETALLES E IMAGEN DEL HERO
   ================================================== */

.scenic-course-page .course-hero-details i {
    color: var(--scenic-coral);
}

.scenic-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--scenic-orange);
}

.scenic-course-page
.course-hero-details span:nth-child(3) i {
    color: #2f817b;
}

.scenic-course-page .course-image-frame {
    border:
        1px solid
        rgba(184, 59, 63, .12);

    box-shadow:
        0 35px 80px
        rgba(74, 29, 36, .22);
}

.scenic-course-page .course-image-badge i {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--scenic-wine),
            var(--scenic-coral),
            var(--scenic-orange)
        );
}

.scenic-course-page .course-media-shape-one {
    background:
        rgba(213, 87, 73, .24);
}

.scenic-course-page .course-media-shape-two {
    background:
        rgba(227, 173, 99, .25);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.scenic-course-page .course-section-label,
.scenic-course-page .course-overview-main > span {
    color: var(--scenic-coral);
}

.scenic-course-page .course-overview h2,
.scenic-course-page .course-section-heading h2,
.scenic-course-page .course-audience h2 {
    color: var(--scenic-night);
}

.scenic-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #fffaf7,
            #fff5f1
        );

    border:
        1px solid
        rgba(184, 59, 63, .09);

    box-shadow:
        0 18px 50px
        rgba(74, 29, 36, .08);
}

.scenic-course-page .course-info-item i {
    color: var(--scenic-coral);

    background:
        rgba(184, 59, 63, .10);
}

.scenic-course-page
.course-info-item:nth-child(3) i {
    color: var(--scenic-orange);

    background:
        rgba(226, 139, 80, .11);
}

.scenic-course-page
.course-info-item:nth-child(4) i {
    color: #2f817b;

    background:
        rgba(227, 173, 99, .20);
}

.scenic-course-page
.course-info-item:nth-child(5) i {
    color: var(--scenic-plum);

    background:
        rgba(123, 68, 107, .11);
}

.scenic-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--scenic-wine),
            var(--scenic-red),
            var(--scenic-coral),
            var(--scenic-orange)
        );
}

.scenic-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--scenic-red),
            var(--scenic-coral),
            var(--scenic-orange),
            var(--scenic-teal)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.scenic-course-page .course-learning {
    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(227, 173, 99, .09),
            transparent 23%
        ),

        linear-gradient(
            180deg,
            #fffaf7,
            #fff8f5
        );
}

.scenic-course-page .course-section-heading > span {
    color: var(--scenic-coral);
}

.scenic-course-page .course-learning-grid article {
    border:
        1px solid
        rgba(184, 59, 63, .08);
}

.scenic-course-page .course-learning-grid article:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px
        rgba(74, 29, 36, .12);
}

.scenic-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--scenic-coral);

    background:
        rgba(184, 59, 63, .11);
}

.scenic-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--scenic-orange);

    background:
        rgba(226, 139, 80, .11);
}

.scenic-course-page
.course-learning-grid article:nth-child(3) > i {
    color: var(--scenic-blue);

    background:
        rgba(76, 113, 155, .11);
}

.scenic-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--scenic-plum);

    background:
        rgba(123, 68, 107, .12);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.scenic-course-page .course-features {
    background:

        radial-gradient(
            circle at 91% 18%,
            rgba(213, 87, 73, .22),
            transparent 29%
        ),

        radial-gradient(
            circle at 11% 89%,
            rgba(227, 173, 99, .09),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #281317 0%,
            #5b252d 24%,
            #9c3039 45%,
            #d55749 72%,
            #e28b50 100%
        );
}

.scenic-course-page
.course-features-intro > span {
    color: #f1cd8a;
}

.scenic-course-page
.course-features-list article:nth-child(1) > i {
    color: #f2a087;

    background:
        rgba(213, 87, 73, .15);
}

.scenic-course-page
.course-features-list article:nth-child(2) > i {
    color: #b9e2dd;

    background:
        rgba(63, 155, 149, .13);
}

.scenic-course-page
.course-features-list article:nth-child(3) > i {
    color: #c4d6ee;

    background:
        rgba(76, 113, 155, .14);
}

.scenic-course-page
.course-features-list article:nth-child(4) > i {
    color: #d9a2ba;

    background:
        rgba(123, 68, 107, .13);
}


/* ==================================================
   ARTE DECORATIVO · ARTES ESCÉNICAS
   ================================================== */

.scenic-course-page .course-features-intro {
    position: relative;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.scenic-feature-art {
    position: relative;

    width: 100%;
    height: 245px;

    margin-top: auto;
}

.scenic-ribbon {
    position: absolute;

    border: 2px solid
        rgba(227, 173, 99, .38);

    border-left-color: transparent;
    border-right-color: transparent;

    border-radius: 50%;

    pointer-events: none;
}

.scenic-ribbon.ribbon-one {
    width: 340px;
    height: 130px;

    left: -45px;
    bottom: 25px;

    transform: rotate(-12deg);
}

.scenic-ribbon.ribbon-two {
    width: 270px;
    height: 105px;

    left: 82px;
    bottom: 65px;

    border-color:
        rgba(213, 87, 73, .44);

    border-top-color: transparent;
    border-bottom-color: transparent;

    transform: rotate(17deg);
}

.scenic-ribbon.ribbon-three {
    width: 190px;
    height: 82px;

    right: -28px;
    top: 42px;

    border-color:
        rgba(167, 216, 209, .48);

    border-left-color: transparent;

    transform: rotate(-22deg);
}

.scenic-feature-art > i {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 9px 20px
            rgba(43, 21, 25, .30)
        );
}

.scenic-feature-art .scenic-icon-one {
    left: 12%;
    bottom: 90px;

    color: #f1cd8a;

    font-size: 3.6rem;

    transform: rotate(-10deg);
}

.scenic-feature-art .scenic-icon-two {
    left: 48%;
    bottom: 38px;

    color: #bdd4ee;

    font-size: 2.8rem;

    transform: rotate(9deg);
}

.scenic-feature-art .scenic-icon-three {
    right: 10%;
    bottom: 128px;

    color: #f2a087;

    font-size: 2.7rem;

    transform: rotate(12deg);
}

.scenic-feature-shape {
    position: absolute;

    pointer-events: none;
}

.scenic-feature-shape.shape-one {
    width: 155px;
    height: 155px;

    left: -60px;
    bottom: -62px;

    border:
        1px solid
        rgba(227, 173, 99, .20);

    border-radius: 50%;

    transform: rotate(28deg);
}

.scenic-feature-shape.shape-two {
    width: 92px;
    height: 92px;

    right: 18px;
    top: 15px;

    border:
        1px solid
        rgba(76, 113, 155, .27);

    border-radius: 24px;

    transform: rotate(18deg);
}

.scenic-feature-art::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: 32%;
    bottom: -20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(213, 87, 73, .16),
            rgba(76, 113, 155, .08),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.scenic-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(213, 87, 73, .20),
            transparent 28%
        ),

        radial-gradient(
            circle at 73% 94%,
            rgba(227, 173, 99, .12),
            transparent 27%
        ),

        linear-gradient(
            120deg,
            #fff8f5,
            #fff5f1
        );
}

.scenic-course-page
.course-audience-card > div:first-child > span {
    color: var(--scenic-coral);
}

.scenic-course-page .course-audience-icon {
    position: relative;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            var(--scenic-night),
            var(--scenic-wine) 38%,
            var(--scenic-coral) 68%,
            var(--scenic-orange)
        );

    box-shadow:
        0 25px 60px
        rgba(74, 29, 36, .25);
}

.scenic-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(184, 221, 214, .38);

    border-radius: 24px;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.scenic-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #fffaf7,
            #fff8f5
        );
}

.scenic-course-page .other-courses-grid {
    grid-template-columns:
        minmax(0, 360px);

    justify-content: center;
}

.scenic-course-page
.other-course-card > span {
    color: var(--scenic-coral);
}

.scenic-course-page
.other-course-card {
    border:
        1px solid
        rgba(184, 59, 63, .08);
}

.scenic-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(74, 29, 36, .14);
}

.scenic-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--scenic-wine),
            var(--scenic-coral),
            var(--scenic-orange)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.scenic-course-page .course-cta {
    background:

        radial-gradient(
            circle at 86% 31%,
            rgba(227, 173, 99, .15),
            transparent 27%
        ),

        radial-gradient(
            circle at 68% 92%,
            rgba(63, 155, 149, .12),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #281317 0%,
            #5b252d 24%,
            #9c3039 46%,
            #d55749 73%,
            #e28b50 100%
        );
}

.scenic-course-page
.course-cta > div > span {
    color: #f1cd8a;
}

.scenic-course-page
.course-cta .discipline-cta-button {
    color: var(--scenic-night);
}

.scenic-course-page
.course-cta .discipline-cta-button i {
    color: var(--scenic-coral);
}

.scenic-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(43, 21, 25, .33);
}


/* ==================================================
   FOOTER
   ================================================== */

.scenic-course-page
.discipline-footer-column a:hover,

.scenic-course-page
.discipline-footer-bottom a:hover {
    color: #e58a65;
}

.scenic-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--scenic-wine),
            var(--scenic-coral),
            var(--scenic-orange)
        );
}


/* ==================================================
   RESPONSIVE · ARTES ESCÉNICAS
   ================================================== */

@media (max-width: 900px) {

    .scenic-course-page .other-courses-grid {
        grid-template-columns: 1fr;

        width: min(100%, 380px);
        margin-inline: auto;
    }

    .scenic-feature-art {
        height: 180px;
        margin-top: 35px;
    }

    .scenic-ribbon.ribbon-one {
        width: 275px;
        height: 105px;
    }

    .scenic-ribbon.ribbon-two {
        width: 225px;
        height: 85px;
    }

    .scenic-feature-art .scenic-icon-one {
        font-size: 3rem;
    }

}

/* ==================================================
   DIBUJO · IDENTIDAD DEL CURSO
   ================================================== */

.drawing-course-page {
    --drawing-deep: #3e2a1d;

    /* Colores exactos tomados de la tarjeta de Dibujo */
    --drawing-brown: #7a3b22;
    --drawing-orange-deep: #c86f27;
    --drawing-orange: #e78a2f;

    --drawing-gold: #f5bd42;
    --drawing-teal: #3f8c98;

    --drawing-yellow: #f4c542;
    --drawing-blue: #437aa2;
    --drawing-purple: #7350a8;
}


/* ==================================================
   HEADER
   ================================================== */

.drawing-course-page .discipline-menu a:hover,
.drawing-course-page .discipline-back:hover {
    color: var(--drawing-orange);
}

.drawing-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--drawing-orange),
            var(--drawing-gold),
            var(--drawing-yellow)
        );
}

.drawing-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--drawing-brown),
            var(--drawing-orange-deep) 38%,
            var(--drawing-orange) 70%,
            var(--drawing-gold)
        );

    box-shadow:
        0 12px 30px
        rgba(200, 111, 39, .24);
}

.drawing-course-page .course-header-cta:hover {
    box-shadow:
        0 17px 38px
        rgba(200, 111, 39, .34);
}


/* ==================================================
   HERO
   ================================================== */

.drawing-course-page .course-hero {
    background:

        radial-gradient(
            circle at 86% 16%,
            rgba(231, 138, 47, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 73% 83%,
            rgba(63, 140, 152, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(245, 189, 66, .15),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff8e8 50%,
            #fff8e8 100%
        );
}

.drawing-course-page .course-hero::before {
    background:
        rgba(231, 138, 47, .10);
}

.drawing-course-page .course-eyebrow {
    color: var(--drawing-orange);
}

.drawing-course-page .course-hero h1 {
    color: var(--drawing-deep);
}

.drawing-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--drawing-brown) 0%,
            var(--drawing-orange) 40%,
            var(--drawing-gold) 72%,
            var(--drawing-teal) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES DEL HERO
   ================================================== */

.drawing-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--drawing-brown),
            var(--drawing-orange-deep) 36%,
            var(--drawing-orange) 68%,
            var(--drawing-gold)
        );

    box-shadow:
        0 15px 35px
        rgba(200, 111, 39, .25);
}

.drawing-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px
        rgba(200, 111, 39, .34);
}

.drawing-course-page .discipline-btn.secondary {
    color: var(--drawing-deep);

    border:
        1px solid
        rgba(200, 111, 39, .16);

    background:
        rgba(255, 255, 255, .90);
}

.drawing-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(245, 189, 66, .40);

    box-shadow:
        0 12px 26px
        rgba(200, 111, 39, .09);
}


/* ==================================================
   DETALLES E IMAGEN DEL HERO
   ================================================== */

.drawing-course-page .course-hero-details i {
    color: var(--drawing-orange);
}

.drawing-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--drawing-gold);
}

.drawing-course-page
.course-hero-details span:nth-child(3) i {
    color: #3f8c98;
}

.drawing-course-page .course-image-frame {
    border:
        1px solid
        rgba(200, 111, 39, .12);

    box-shadow:
        0 35px 80px
        rgba(122, 59, 34, .22);
}

.drawing-course-page .course-image-badge i {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--drawing-brown),
            var(--drawing-orange),
            var(--drawing-gold)
        );
}

.drawing-course-page .course-media-shape-one {
    background:
        rgba(231, 138, 47, .24);
}

.drawing-course-page .course-media-shape-two {
    background:
        rgba(245, 189, 66, .25);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.drawing-course-page .course-section-label,
.drawing-course-page .course-overview-main > span {
    color: var(--drawing-orange);
}

.drawing-course-page .course-overview h2,
.drawing-course-page .course-section-heading h2,
.drawing-course-page .course-audience h2 {
    color: var(--drawing-deep);
}

.drawing-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #fffdf7,
            #fff8e8
        );

    border:
        1px solid
        rgba(200, 111, 39, .09);

    box-shadow:
        0 18px 50px
        rgba(122, 59, 34, .08);
}

.drawing-course-page .course-info-item i {
    color: var(--drawing-orange);

    background:
        rgba(200, 111, 39, .10);
}

.drawing-course-page
.course-info-item:nth-child(3) i {
    color: var(--drawing-gold);

    background:
        rgba(245, 189, 66, .11);
}

.drawing-course-page
.course-info-item:nth-child(4) i {
    color: #3f8c98;

    background:
        rgba(245, 189, 66, .20);
}

.drawing-course-page
.course-info-item:nth-child(5) i {
    color: var(--drawing-purple);

    background:
        rgba(115, 80, 168, .11);
}

.drawing-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--drawing-brown),
            var(--drawing-orange-deep),
            var(--drawing-orange),
            var(--drawing-gold)
        );
}

.drawing-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--drawing-orange-deep),
            var(--drawing-orange),
            var(--drawing-gold),
            var(--drawing-teal)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.drawing-course-page .course-learning {
    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(245, 189, 66, .09),
            transparent 23%
        ),

        linear-gradient(
            180deg,
            #fffdf7,
            #fffaf0
        );
}

.drawing-course-page .course-section-heading > span {
    color: var(--drawing-orange);
}

.drawing-course-page .course-learning-grid article {
    border:
        1px solid
        rgba(200, 111, 39, .08);
}

.drawing-course-page .course-learning-grid article:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px
        rgba(122, 59, 34, .12);
}

.drawing-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--drawing-orange);

    background:
        rgba(200, 111, 39, .11);
}

.drawing-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--drawing-gold);

    background:
        rgba(245, 189, 66, .11);
}

.drawing-course-page
.course-learning-grid article:nth-child(3) > i {
    color: var(--drawing-blue);

    background:
        rgba(67, 122, 162, .11);
}

.drawing-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--drawing-purple);

    background:
        rgba(115, 80, 168, .12);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.drawing-course-page .course-features {
    background:

        radial-gradient(
            circle at 91% 18%,
            rgba(231, 138, 47, .22),
            transparent 29%
        ),

        radial-gradient(
            circle at 11% 89%,
            rgba(245, 189, 66, .09),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #2f2118 0%,
            #6e3b22 24%,
            #7a3b22 45%,
            #e78a2f 72%,
            #f5bd42 100%
        );
}

.drawing-course-page
.course-features-intro > span {
    color: #ffe09a;
}

.drawing-course-page
.course-features-list article:nth-child(1) > i {
    color: #ffd487;

    background:
        rgba(231, 138, 47, .15);
}

.drawing-course-page
.course-features-list article:nth-child(2) > i {
    color: #bfe4e8;

    background:
        rgba(63, 140, 152, .13);
}

.drawing-course-page
.course-features-list article:nth-child(3) > i {
    color: #bcd6ec;

    background:
        rgba(67, 122, 162, .14);
}

.drawing-course-page
.course-features-list article:nth-child(4) > i {
    color: #d4b5ed;

    background:
        rgba(115, 80, 168, .13);
}


/* ==================================================
   ARTE DECORATIVO · DIBUJO
   ================================================== */

.drawing-course-page .course-features-intro {
    position: relative;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.drawing-feature-art {
    position: relative;

    width: 100%;
    height: 245px;

    margin-top: auto;
}

.drawing-stroke {
    position: absolute;

    height: 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245, 189, 66, .72),
            rgba(231, 138, 47, .58),
            transparent
        );

    box-shadow:
        0 0 18px
        rgba(245, 189, 66, .14);

    pointer-events: none;
}

.drawing-stroke.stroke-one {
    width: 360px;

    left: -35px;
    bottom: 48px;

    transform: rotate(-14deg);
}

.drawing-stroke.stroke-two {
    width: 285px;

    left: 58px;
    bottom: 102px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(67, 122, 162, .66),
            rgba(63, 140, 152, .56),
            transparent
        );

    transform: rotate(11deg);
}

.drawing-stroke.stroke-three {
    width: 210px;

    right: -24px;
    top: 55px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(212, 181, 237, .60) 0 18px,
            transparent 18px 29px
        );

    transform: rotate(-21deg);
}

.drawing-feature-art > i {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 9px 20px
            rgba(62, 42, 29, .30)
        );
}

.drawing-feature-art .drawing-icon-one {
    left: 12%;
    bottom: 90px;

    color: #ffe09a;

    font-size: 3.6rem;

    transform: rotate(-10deg);
}

.drawing-feature-art .drawing-icon-two {
    left: 48%;
    bottom: 38px;

    color: #bcd6ec;

    font-size: 2.8rem;

    transform: rotate(9deg);
}

.drawing-feature-art .drawing-icon-three {
    right: 10%;
    bottom: 128px;

    color: #ffd487;

    font-size: 2.7rem;

    transform: rotate(12deg);
}

.drawing-feature-shape {
    position: absolute;

    pointer-events: none;
}

.drawing-feature-shape.shape-one {
    width: 155px;
    height: 155px;

    left: -60px;
    bottom: -62px;

    border:
        1px solid
        rgba(245, 189, 66, .20);

    border-radius: 26px;

    transform: rotate(28deg);
}

.drawing-feature-shape.shape-two {
    width: 92px;
    height: 92px;

    right: 18px;
    top: 15px;

    border:
        1px solid
        rgba(67, 122, 162, .27);

    border-radius: 50%;

    transform: rotate(18deg);
}

.drawing-feature-art::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 115px;

    right: 38px;
    bottom: 24px;

    border-radius: 22px;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, .13) 0 1px,
            transparent 1px 13px
        ),

        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .10) 0 1px,
            transparent 1px 13px
        );

    transform: rotate(8deg);

    pointer-events: none;
}

.drawing-feature-art::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: 32%;
    bottom: -20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(231, 138, 47, .16),
            rgba(67, 122, 162, .08),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.drawing-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(231, 138, 47, .20),
            transparent 28%
        ),

        radial-gradient(
            circle at 73% 94%,
            rgba(245, 189, 66, .12),
            transparent 27%
        ),

        linear-gradient(
            120deg,
            #fffaf0,
            #fff8e8
        );
}

.drawing-course-page
.course-audience-card > div:first-child > span {
    color: var(--drawing-orange);
}

.drawing-course-page .course-audience-icon {
    position: relative;

    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            var(--drawing-deep),
            var(--drawing-brown) 38%,
            var(--drawing-orange) 68%,
            var(--drawing-gold)
        );

    box-shadow:
        0 25px 60px
        rgba(122, 59, 34, .25);
}

.drawing-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(184, 221, 214, .38);

    border-radius: 24px;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.drawing-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #fffdf7,
            #fffaf0
        );
}

.drawing-course-page .other-courses-grid {
    grid-template-columns:
        repeat(2, minmax(0, 360px));

    justify-content: center;
}

.drawing-course-page
.other-course-card > span {
    color: var(--drawing-orange);
}

.drawing-course-page
.other-course-card {
    border:
        1px solid
        rgba(200, 111, 39, .08);
}

.drawing-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(122, 59, 34, .14);
}

.drawing-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--drawing-brown),
            var(--drawing-orange),
            var(--drawing-gold)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.drawing-course-page .course-cta {
    background:

        radial-gradient(
            circle at 86% 31%,
            rgba(245, 189, 66, .15),
            transparent 27%
        ),

        radial-gradient(
            circle at 68% 92%,
            rgba(63, 140, 152, .12),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #2f2118 0%,
            #6e3b22 24%,
            #7a3b22 46%,
            #e78a2f 73%,
            #f5bd42 100%
        );
}

.drawing-course-page
.course-cta > div > span {
    color: #ffe09a;
}

.drawing-course-page
.course-cta .discipline-cta-button {
    color: var(--drawing-deep);
}

.drawing-course-page
.course-cta .discipline-cta-button i {
    color: var(--drawing-orange);
}

.drawing-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(62, 42, 29, .33);
}


/* ==================================================
   FOOTER
   ================================================== */

.drawing-course-page
.discipline-footer-column a:hover,

.drawing-course-page
.discipline-footer-bottom a:hover {
    color: #f0ad3e;
}

.drawing-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--drawing-brown),
            var(--drawing-orange),
            var(--drawing-gold)
        );
}


/* ==================================================
   RESPONSIVE · DIBUJO
   ================================================== */

@media (max-width: 900px) {

    .drawing-course-page .other-courses-grid {
        grid-template-columns: 1fr;

        width: min(100%, 380px);
        margin-inline: auto;
    }

    .drawing-feature-art {
        height: 180px;
        margin-top: 35px;
    }

    .drawing-stroke.stroke-one {
        width: 275px;
        height: 4px;
    }

    .drawing-stroke.stroke-two {
        width: 225px;
        height: 4px;
    }

    .drawing-feature-art .drawing-icon-one {
        font-size: 3rem;
    }

}

/* ==================================================
   PINTURA · IDENTIDAD DEL CURSO
   ================================================== */

.painting-course-page {
    --painting-deep: #48201d;

    /* Colores exactos tomados de la tarjeta de Pintura */
    --painting-brown: #8f3c38;
    --painting-orange-deep: #c94d45;
    --painting-orange: #e96252;

    --painting-gold: #f0a34a;
    --painting-teal: #3f8c98;

    --painting-yellow: #f5bd42;
    --painting-blue: #437aa2;
    --painting-purple: #7350a8;
}


/* ==================================================
   HEADER
   ================================================== */

.painting-course-page .discipline-menu a:hover,
.painting-course-page .discipline-back:hover {
    color: var(--painting-orange);
}

.painting-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--painting-orange),
            var(--painting-gold),
            var(--painting-yellow)
        );
}

.painting-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--painting-brown),
            var(--painting-orange-deep) 38%,
            var(--painting-orange) 70%,
            var(--painting-gold)
        );

    box-shadow:
        0 12px 30px
        rgba(201, 77, 69, .24);
}

.painting-course-page .course-header-cta:hover {
    box-shadow:
        0 17px 38px
        rgba(201, 77, 69, .34);
}


/* ==================================================
   HERO
   ================================================== */

.painting-course-page .course-hero {
    background:

        radial-gradient(
            circle at 86% 16%,
            rgba(233, 98, 82, .20),
            transparent 27%
        ),

        radial-gradient(
            circle at 73% 83%,
            rgba(63, 140, 152, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(240, 163, 74, .15),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff5f1 50%,
            #fff5f1 100%
        );
}

.painting-course-page .course-hero::before {
    background:
        rgba(233, 98, 82, .10);
}

.painting-course-page .course-eyebrow {
    color: var(--painting-orange);
}

.painting-course-page .course-hero h1 {
    color: var(--painting-deep);
}

.painting-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--painting-brown) 0%,
            var(--painting-orange) 40%,
            var(--painting-gold) 72%,
            var(--painting-teal) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES DEL HERO
   ================================================== */

.painting-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--painting-brown),
            var(--painting-orange-deep) 36%,
            var(--painting-orange) 68%,
            var(--painting-gold)
        );

    box-shadow:
        0 15px 35px
        rgba(201, 77, 69, .25);
}

.painting-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px
        rgba(201, 77, 69, .34);
}

.painting-course-page .discipline-btn.secondary {
    color: var(--painting-deep);

    border:
        1px solid
        rgba(201, 77, 69, .16);

    background:
        rgba(255, 255, 255, .90);
}

.painting-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(240, 163, 74, .40);

    box-shadow:
        0 12px 26px
        rgba(201, 77, 69, .09);
}


/* ==================================================
   DETALLES E IMAGEN DEL HERO
   ================================================== */

.painting-course-page .course-hero-details i {
    color: var(--painting-orange);
}

.painting-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--painting-gold);
}

.painting-course-page
.course-hero-details span:nth-child(3) i {
    color: #3f8c98;
}

.painting-course-page .course-image-frame {
    border:
        1px solid
        rgba(201, 77, 69, .12);

    box-shadow:
        0 35px 80px
        rgba(143, 60, 56, .22);
}

.painting-course-page .course-image-badge i {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--painting-brown),
            var(--painting-orange),
            var(--painting-gold)
        );
}

.painting-course-page .course-media-shape-one {
    background:
        rgba(233, 98, 82, .24);
}

.painting-course-page .course-media-shape-two {
    background:
        rgba(240, 163, 74, .25);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.painting-course-page .course-section-label,
.painting-course-page .course-overview-main > span {
    color: var(--painting-orange);
}

.painting-course-page .course-overview h2,
.painting-course-page .course-section-heading h2,
.painting-course-page .course-audience h2 {
    color: var(--painting-deep);
}

.painting-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #fffdfb,
            #fff5f1
        );

    border:
        1px solid
        rgba(201, 77, 69, .09);

    box-shadow:
        0 18px 50px
        rgba(143, 60, 56, .08);
}

.painting-course-page .course-info-item i {
    color: var(--painting-orange);

    background:
        rgba(201, 77, 69, .10);
}

.painting-course-page
.course-info-item:nth-child(3) i {
    color: var(--painting-gold);

    background:
        rgba(240, 163, 74, .11);
}

.painting-course-page
.course-info-item:nth-child(4) i {
    color: #3f8c98;

    background:
        rgba(240, 163, 74, .20);
}

.painting-course-page
.course-info-item:nth-child(5) i {
    color: var(--painting-purple);

    background:
        rgba(115, 80, 168, .11);
}

.painting-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--painting-brown),
            var(--painting-orange-deep),
            var(--painting-orange),
            var(--painting-gold)
        );
}

.painting-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--painting-orange-deep),
            var(--painting-orange),
            var(--painting-gold),
            var(--painting-teal)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.painting-course-page .course-learning {
    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(240, 163, 74, .09),
            transparent 23%
        ),

        linear-gradient(
            180deg,
            #fffdfb,
            #fff8f5
        );
}

.painting-course-page .course-section-heading > span {
    color: var(--painting-orange);
}

.painting-course-page .course-learning-grid article {
    border:
        1px solid
        rgba(201, 77, 69, .08);
}

.painting-course-page .course-learning-grid article:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px
        rgba(143, 60, 56, .12);
}

.painting-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--painting-orange);

    background:
        rgba(201, 77, 69, .11);
}

.painting-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--painting-gold);

    background:
        rgba(240, 163, 74, .11);
}

.painting-course-page
.course-learning-grid article:nth-child(3) > i {
    color: var(--painting-blue);

    background:
        rgba(67, 122, 162, .11);
}

.painting-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--painting-purple);

    background:
        rgba(115, 80, 168, .12);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.painting-course-page .course-features {
    background:

        radial-gradient(
            circle at 91% 18%,
            rgba(233, 98, 82, .22),
            transparent 29%
        ),

        radial-gradient(
            circle at 11% 89%,
            rgba(240, 163, 74, .09),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #311719 0%,
            #692a2a 24%,
            #8f3c38 45%,
            #e96252 72%,
            #f0a34a 100%
        );
}

.painting-course-page
.course-features-intro > span {
    color: #ffd49b;
}

.painting-course-page
.course-features-list article:nth-child(1) > i {
    color: #ffc9a8;

    background:
        rgba(233, 98, 82, .15);
}

.painting-course-page
.course-features-list article:nth-child(2) > i {
    color: #bfe4e8;

    background:
        rgba(63, 140, 152, .13);
}

.painting-course-page
.course-features-list article:nth-child(3) > i {
    color: #bcd6ec;

    background:
        rgba(67, 122, 162, .14);
}

.painting-course-page
.course-features-list article:nth-child(4) > i {
    color: #d4b5ed;

    background:
        rgba(115, 80, 168, .13);
}


/* ==================================================
   ARTE DECORATIVO · PINTURA
   ================================================== */

.painting-course-page .course-features-intro {
    position: relative;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.painting-feature-art {
    position: relative;

    width: 100%;
    height: 245px;

    margin-top: auto;
}

.painting-swash {
    position: absolute;

    height: 24px;

    border-radius:
        64% 36% 58% 42% /
        45% 62% 38% 55%;

    background:
        linear-gradient(
            90deg,
            rgba(233, 98, 82, .12),
            rgba(233, 98, 82, .82),
            rgba(240, 163, 74, .76),
            rgba(240, 163, 74, .08)
        );

    filter:
        drop-shadow(
            0 8px 14px
            rgba(72, 32, 29, .14)
        );

    pointer-events: none;
}

.painting-swash.swash-one {
    width: 335px;
    height: 28px;

    left: -28px;
    bottom: 45px;

    transform: rotate(-14deg);
}

.painting-swash.swash-two {
    width: 265px;
    height: 20px;

    left: 76px;
    bottom: 104px;

    background:
        linear-gradient(
            90deg,
            rgba(67, 122, 162, .08),
            rgba(67, 122, 162, .68),
            rgba(63, 140, 152, .62),
            rgba(63, 140, 152, .06)
        );

    transform: rotate(11deg);
}

.painting-swash.swash-three {
    width: 190px;
    height: 16px;

    right: -24px;
    top: 55px;

    background:
        linear-gradient(
            90deg,
            rgba(212, 181, 237, .08),
            rgba(212, 181, 237, .72),
            rgba(233, 98, 82, .62),
            rgba(233, 98, 82, .06)
        );

    transform: rotate(-21deg);
}

.painting-feature-art > i {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 9px 20px
            rgba(72, 32, 29, .30)
        );
}

.painting-feature-art .painting-icon-one {
    left: 12%;
    bottom: 90px;

    color: #ffd49b;

    font-size: 3.6rem;

    transform: rotate(-10deg);
}

.painting-feature-art .painting-icon-two {
    left: 48%;
    bottom: 38px;

    color: #bcd6ec;

    font-size: 2.8rem;

    transform: rotate(9deg);
}

.painting-feature-art .painting-icon-three {
    right: 10%;
    bottom: 128px;

    color: #ffc9a8;

    font-size: 2.7rem;

    transform: rotate(12deg);
}

.painting-feature-shape {
    position: absolute;

    pointer-events: none;
}

.painting-feature-shape.shape-one {
    width: 155px;
    height: 155px;

    left: -60px;
    bottom: -62px;

    border:
        1px solid
        rgba(240, 163, 74, .20);

    border-radius:
        58% 42% 66% 34% /
        45% 60% 40% 55%;

    transform: rotate(28deg);
}

.painting-feature-shape.shape-two {
    width: 92px;
    height: 92px;

    right: 18px;
    top: 15px;

    border:
        1px solid
        rgba(67, 122, 162, .27);

    border-radius:
        42% 58% 38% 62% /
        55% 40% 60% 45%;

    transform: rotate(18deg);
}

.painting-feature-art::before {
    content: "";

    position: absolute;

    width: 165px;
    height: 125px;

    right: 38px;
    bottom: 24px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 22% 30%,
            rgba(255, 212, 155, .62) 0 9px,
            transparent 10px
        ),

        radial-gradient(
            circle at 55% 68%,
            rgba(191, 228, 232, .46) 0 13px,
            transparent 14px
        ),

        radial-gradient(
            circle at 79% 24%,
            rgba(212, 181, 237, .48) 0 7px,
            transparent 8px
        );

    transform: rotate(8deg);

    pointer-events: none;
}

.painting-feature-art::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    left: 32%;
    bottom: -20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(233, 98, 82, .16),
            rgba(67, 122, 162, .08),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.painting-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(233, 98, 82, .20),
            transparent 28%
        ),

        radial-gradient(
            circle at 73% 94%,
            rgba(240, 163, 74, .12),
            transparent 27%
        ),

        linear-gradient(
            120deg,
            #fff8f5,
            #fff5f1
        );
}

.painting-course-page
.course-audience-card > div:first-child > span {
    color: var(--painting-orange);
}

.painting-course-page .course-audience-icon {
    position: relative;

    border-radius:
        58% 42% 63% 37% /
        44% 61% 39% 56%;

    background:
        linear-gradient(
            135deg,
            var(--painting-deep),
            var(--painting-brown) 38%,
            var(--painting-orange) 68%,
            var(--painting-gold)
        );

    box-shadow:
        0 25px 60px
        rgba(143, 60, 56, .25);
}

.painting-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(184, 221, 214, .38);

    border-radius:
        54% 46% 60% 40% /
        48% 57% 43% 52%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.painting-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #fffdfb,
            #fff8f5
        );
}

.painting-course-page .other-courses-grid {
    grid-template-columns:
        repeat(2, minmax(0, 360px));

    justify-content: center;
}

.painting-course-page
.other-course-card > span {
    color: var(--painting-orange);
}

.painting-course-page
.other-course-card {
    border:
        1px solid
        rgba(201, 77, 69, .08);
}

.painting-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(143, 60, 56, .14);
}

.painting-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--painting-brown),
            var(--painting-orange),
            var(--painting-gold)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.painting-course-page .course-cta {
    background:

        radial-gradient(
            circle at 86% 31%,
            rgba(240, 163, 74, .15),
            transparent 27%
        ),

        radial-gradient(
            circle at 68% 92%,
            rgba(63, 140, 152, .12),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #311719 0%,
            #692a2a 24%,
            #8f3c38 46%,
            #e96252 73%,
            #f0a34a 100%
        );
}

.painting-course-page
.course-cta > div > span {
    color: #ffd49b;
}

.painting-course-page
.course-cta .discipline-cta-button {
    color: var(--painting-deep);
}

.painting-course-page
.course-cta .discipline-cta-button i {
    color: var(--painting-orange);
}

.painting-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(72, 32, 29, .33);
}


/* ==================================================
   FOOTER
   ================================================== */

.painting-course-page
.discipline-footer-column a:hover,

.painting-course-page
.discipline-footer-bottom a:hover {
    color: #ea7f58;
}

.painting-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--painting-brown),
            var(--painting-orange),
            var(--painting-gold)
        );
}


/* ==================================================
   RESPONSIVE · PINTURA
   ================================================== */

@media (max-width: 900px) {

    .painting-course-page .other-courses-grid {
        grid-template-columns: 1fr;

        width: min(100%, 380px);
        margin-inline: auto;
    }

    .painting-feature-art {
        height: 180px;
        margin-top: 35px;
    }

    .painting-swash.swash-one {
        width: 275px;
        height: 22px;
    }

    .painting-swash.swash-two {
        width: 225px;
        height: 17px;
    }

    .painting-feature-art .painting-icon-one {
        font-size: 3rem;
    }

}

/* ==================================================
   ARTES VISUALES · IDENTIDAD DEL CURSO
   ================================================== */

.visual-arts-course-page {
    --visual-deep: #34204f;

    --visual-purple: #7651a8;
    --visual-violet: #9a65c4;
    --visual-magenta: #c94f91;

    --visual-pink: #e56fa3;
    --visual-orange: #ed9561;
    --visual-gold: #e9b956;

    --visual-blue: #5687b4;
    --visual-teal: #58a09d;
}


/* ==================================================
   HEADER
   ================================================== */

.visual-arts-course-page .discipline-menu a:hover,
.visual-arts-course-page .discipline-back:hover {
    color: var(--visual-magenta);
}

.visual-arts-course-page .discipline-menu a::after {
    background:
        linear-gradient(
            90deg,
            var(--visual-purple),
            var(--visual-magenta),
            var(--visual-orange)
        );
}

.visual-arts-course-page .course-header-cta {
    background:
        linear-gradient(
            135deg,
            var(--visual-purple),
            var(--visual-violet) 35%,
            var(--visual-magenta) 68%,
            var(--visual-orange)
        );

    box-shadow:
        0 12px 30px
        rgba(154, 101, 196, .25);
}

.visual-arts-course-page .course-header-cta:hover {
    box-shadow:
        0 17px 38px
        rgba(154, 101, 196, .35);
}


/* ==================================================
   HERO
   ================================================== */

.visual-arts-course-page .course-hero {
    background:

        radial-gradient(
            circle at 86% 16%,
            rgba(201, 79, 145, .18),
            transparent 27%
        ),

        radial-gradient(
            circle at 73% 83%,
            rgba(86, 135, 180, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 88%,
            rgba(233, 185, 86, .15),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbf7ff 50%,
            #fff7f4 100%
        );
}

.visual-arts-course-page .course-hero::before {
    background:
        rgba(154, 101, 196, .10);
}

.visual-arts-course-page .course-eyebrow {
    color: var(--visual-magenta);
}

.visual-arts-course-page .course-hero h1 {
    color: var(--visual-deep);
}

.visual-arts-course-page .course-hero h1 span {
    background:
        linear-gradient(
            90deg,
            var(--visual-purple) 0%,
            var(--visual-magenta) 38%,
            var(--visual-orange) 70%,
            var(--visual-gold) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==================================================
   BOTONES DEL HERO
   ================================================== */

.visual-arts-course-page .discipline-btn.primary {
    background:
        linear-gradient(
            135deg,
            var(--visual-purple),
            var(--visual-violet) 35%,
            var(--visual-magenta) 68%,
            var(--visual-orange)
        );

    box-shadow:
        0 15px 35px
        rgba(154, 101, 196, .25);
}

.visual-arts-course-page .discipline-btn.primary:hover {
    box-shadow:
        0 20px 45px
        rgba(154, 101, 196, .35);
}

.visual-arts-course-page .discipline-btn.secondary {
    color: var(--visual-deep);

    border:
        1px solid
        rgba(154, 101, 196, .16);

    background:
        rgba(255, 255, 255, .90);
}

.visual-arts-course-page .discipline-btn.secondary:hover {
    border-color:
        rgba(201, 79, 145, .38);

    box-shadow:
        0 12px 26px
        rgba(118, 81, 168, .10);
}


/* ==================================================
   DETALLES E IMAGEN DEL HERO
   ================================================== */

.visual-arts-course-page .course-hero-details i {
    color: var(--visual-purple);
}

.visual-arts-course-page
.course-hero-details span:nth-child(2) i {
    color: var(--visual-magenta);
}

.visual-arts-course-page
.course-hero-details span:nth-child(3) i {
    color: var(--visual-orange);
}

.visual-arts-course-page .course-image-frame {
    border:
        1px solid
        rgba(154, 101, 196, .12);

    box-shadow:
        0 35px 80px
        rgba(52, 32, 79, .20);
}

.visual-arts-course-page .course-image-badge i {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--visual-purple),
            var(--visual-magenta),
            var(--visual-orange)
        );
}

.visual-arts-course-page .course-media-shape-one {
    background:
        rgba(201, 79, 145, .22);
}

.visual-arts-course-page .course-media-shape-two {
    background:
        rgba(233, 185, 86, .24);
}


/* ==================================================
   CONOCE EL CURSO
   ================================================== */

.visual-arts-course-page .course-section-label,
.visual-arts-course-page .course-overview-main > span {
    color: var(--visual-magenta);
}

.visual-arts-course-page .course-overview h2,
.visual-arts-course-page .course-section-heading h2,
.visual-arts-course-page .course-audience h2 {
    color: var(--visual-deep);
}

.visual-arts-course-page .course-info-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbf6ff
        );

    border:
        1px solid
        rgba(154, 101, 196, .09);

    box-shadow:
        0 18px 50px
        rgba(52, 32, 79, .08);
}

.visual-arts-course-page .course-info-item i {
    color: var(--visual-purple);

    background:
        rgba(118, 81, 168, .10);
}

.visual-arts-course-page
.course-info-item:nth-child(3) i {
    color: var(--visual-magenta);

    background:
        rgba(201, 79, 145, .10);
}

.visual-arts-course-page
.course-info-item:nth-child(4) i {
    color: var(--visual-orange);

    background:
        rgba(237, 149, 97, .12);
}

.visual-arts-course-page
.course-info-item:nth-child(5) i {
    color: var(--visual-teal);

    background:
        rgba(88, 160, 157, .11);
}

.visual-arts-course-page .course-info-card > a {
    background:
        linear-gradient(
            135deg,
            var(--visual-purple),
            var(--visual-violet),
            var(--visual-magenta),
            var(--visual-orange)
        );
}

.visual-arts-course-page .course-info-card > a:hover {
    background:
        linear-gradient(
            135deg,
            var(--visual-violet),
            var(--visual-magenta),
            var(--visual-orange),
            var(--visual-gold)
        );
}


/* ==================================================
   QUÉ APRENDERÁS
   ================================================== */

.visual-arts-course-page .course-learning {
    background:

        radial-gradient(
            circle at 8% 20%,
            rgba(233, 185, 86, .09),
            transparent 23%
        ),

        linear-gradient(
            180deg,
            #ffffff,
            #fbf7ff
        );
}

.visual-arts-course-page .course-section-heading > span {
    color: var(--visual-magenta);
}

.visual-arts-course-page .course-learning-grid article {
    border:
        1px solid
        rgba(154, 101, 196, .08);
}

.visual-arts-course-page .course-learning-grid article:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px
        rgba(52, 32, 79, .12);
}

.visual-arts-course-page
.course-learning-grid article:nth-child(1) > i {
    color: var(--visual-purple);

    background:
        rgba(118, 81, 168, .11);
}

.visual-arts-course-page
.course-learning-grid article:nth-child(2) > i {
    color: var(--visual-magenta);

    background:
        rgba(201, 79, 145, .11);
}

.visual-arts-course-page
.course-learning-grid article:nth-child(3) > i {
    color: var(--visual-blue);

    background:
        rgba(86, 135, 180, .11);
}

.visual-arts-course-page
.course-learning-grid article:nth-child(4) > i {
    color: var(--visual-orange);

    background:
        rgba(237, 149, 97, .12);
}


/* ==================================================
   EXPERIENCIA KIRU
   ================================================== */

.visual-arts-course-page .course-features {
    background:

        radial-gradient(
            circle at 91% 18%,
            rgba(229, 111, 163, .20),
            transparent 29%
        ),

        radial-gradient(
            circle at 11% 89%,
            rgba(233, 185, 86, .10),
            transparent 28%
        ),

        linear-gradient(
            125deg,
            #28193d 0%,
            #4d2d72 24%,
            #7651a8 45%,
            #c94f91 72%,
            #ed9561 100%
        );
}

.visual-arts-course-page
.course-features-intro > span {
    color: #ffd9a8;
}

.visual-arts-course-page
.course-features-list article:nth-child(1) > i {
    color: #e2c8ff;

    background:
        rgba(154, 101, 196, .16);
}

.visual-arts-course-page
.course-features-list article:nth-child(2) > i {
    color: #ffc4df;

    background:
        rgba(201, 79, 145, .14);
}

.visual-arts-course-page
.course-features-list article:nth-child(3) > i {
    color: #c7e4f4;

    background:
        rgba(86, 135, 180, .14);
}

.visual-arts-course-page
.course-features-list article:nth-child(4) > i {
    color: #ffe0ad;

    background:
        rgba(233, 185, 86, .14);
}


/* ==================================================
   ARTE DECORATIVO · ARTES VISUALES
   ================================================== */

.visual-arts-course-page .course-features-intro {
    position: relative;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.visual-feature-art {
    position: relative;

    width: 100%;
    height: 245px;

    margin-top: auto;
}

.visual-art-shape {
    position: absolute;

    pointer-events: none;
}

.visual-art-shape.visual-shape-one {
    width: 145px;
    height: 145px;

    left: -28px;
    bottom: 8px;

    border-radius:
        64% 36% 58% 42% /
        45% 62% 38% 55%;

    background:
        linear-gradient(
            135deg,
            rgba(154, 101, 196, .18),
            rgba(201, 79, 145, .72)
        );

    transform: rotate(-18deg);
}

.visual-art-shape.visual-shape-two {
    width: 110px;
    height: 110px;

    left: 42%;
    bottom: 42px;

    border-radius:
        40% 60% 66% 34% /
        60% 38% 62% 40%;

    background:
        linear-gradient(
            135deg,
            rgba(86, 135, 180, .68),
            rgba(88, 160, 157, .34)
        );

    transform: rotate(24deg);
}

.visual-art-shape.visual-shape-three {
    width: 92px;
    height: 92px;

    right: 12px;
    top: 38px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(233, 185, 86, .70),
            rgba(237, 149, 97, .42)
        );
}

.visual-feature-art > i {
    position: absolute;

    z-index: 3;

    filter:
        drop-shadow(
            0 9px 20px
            rgba(40, 25, 61, .28)
        );
}

.visual-feature-art .visual-icon-one {
    left: 12%;
    bottom: 95px;

    color: #ffd9a8;

    font-size: 3.5rem;

    transform: rotate(-10deg);
}

.visual-feature-art .visual-icon-two {
    left: 50%;
    bottom: 32px;

    color: #ffc4df;

    font-size: 2.8rem;

    transform: rotate(12deg);
}

.visual-feature-art .visual-icon-three {
    right: 10%;
    bottom: 112px;

    color: #c7e4f4;

    font-size: 2.8rem;

    transform: rotate(-8deg);
}

.visual-art-line {
    position: absolute;

    height: 3px;

    border-radius: 999px;

    pointer-events: none;
}

.visual-art-line.line-one {
    width: 260px;

    left: 25px;
    bottom: 45px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 196, 223, .80),
            rgba(255, 217, 168, .70),
            transparent
        );

    transform: rotate(-13deg);
}

.visual-art-line.line-two {
    width: 210px;

    right: 8px;
    top: 82px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(199, 228, 244, .75),
            rgba(226, 200, 255, .70),
            transparent
        );

    transform: rotate(16deg);
}

.visual-feature-art::before {
    content: "";

    position: absolute;

    width: 165px;
    height: 125px;

    right: 38px;
    bottom: 24px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 22% 30%,
            rgba(255, 217, 168, .60) 0 9px,
            transparent 10px
        ),

        radial-gradient(
            circle at 55% 68%,
            rgba(199, 228, 244, .48) 0 13px,
            transparent 14px
        ),

        radial-gradient(
            circle at 79% 24%,
            rgba(255, 196, 223, .50) 0 7px,
            transparent 8px
        );

    transform: rotate(8deg);

    pointer-events: none;
}


/* ==================================================
   PARA QUIÉN
   ================================================== */

.visual-arts-course-page .course-audience-card {
    background:

        radial-gradient(
            circle at 91% 22%,
            rgba(201, 79, 145, .18),
            transparent 28%
        ),

        radial-gradient(
            circle at 73% 94%,
            rgba(233, 185, 86, .12),
            transparent 27%
        ),

        linear-gradient(
            120deg,
            #fcf8ff,
            #fff8f6
        );
}

.visual-arts-course-page
.course-audience-card > div:first-child > span {
    color: var(--visual-magenta);
}

.visual-arts-course-page .course-audience-icon {
    position: relative;

    border-radius:
        58% 42% 63% 37% /
        44% 61% 39% 56%;

    background:
        linear-gradient(
            135deg,
            var(--visual-deep),
            var(--visual-purple) 38%,
            var(--visual-magenta) 68%,
            var(--visual-orange)
        );

    box-shadow:
        0 25px 60px
        rgba(52, 32, 79, .25);
}

.visual-arts-course-page
.course-audience-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px solid
        rgba(255, 217, 168, .38);

    border-radius:
        54% 46% 60% 40% /
        48% 57% 43% 52%;

    pointer-events: none;
}


/* ==================================================
   OTROS CURSOS
   ================================================== */

.visual-arts-course-page .other-courses {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbf7ff
        );
}

.visual-arts-course-page .other-courses-grid {
    grid-template-columns:
        repeat(2, minmax(0, 360px));

    justify-content: center;
}

.visual-arts-course-page
.other-course-card > span {
    color: var(--visual-magenta);
}

.visual-arts-course-page
.other-course-card {
    border:
        1px solid
        rgba(154, 101, 196, .08);
}

.visual-arts-course-page
.other-course-card:hover {
    box-shadow:
        0 24px 50px
        rgba(52, 32, 79, .14);
}

.visual-arts-course-page
.other-course-card > div:last-child i {
    background:
        linear-gradient(
            135deg,
            var(--visual-purple),
            var(--visual-magenta),
            var(--visual-orange)
        );
}


/* ==================================================
   CTA FINAL
   ================================================== */

.visual-arts-course-page .course-cta {
    background:

        radial-gradient(
            circle at 86% 31%,
            rgba(233, 185, 86, .16),
            transparent 27%
        ),

        radial-gradient(
            circle at 68% 92%,
            rgba(86, 135, 180, .13),
            transparent 25%
        ),

        linear-gradient(
            120deg,
            #28193d 0%,
            #4d2d72 24%,
            #7651a8 46%,
            #c94f91 73%,
            #ed9561 100%
        );
}

.visual-arts-course-page
.course-cta > div > span {
    color: #ffd9a8;
}

.visual-arts-course-page
.course-cta .discipline-cta-button {
    color: var(--visual-deep);
}

.visual-arts-course-page
.course-cta .discipline-cta-button i {
    color: var(--visual-magenta);
}

.visual-arts-course-page
.course-cta .discipline-cta-button:hover {
    box-shadow:
        0 18px 45px
        rgba(40, 25, 61, .33);
}


/* ==================================================
   FOOTER
   ================================================== */

.visual-arts-course-page
.discipline-footer-column a:hover,

.visual-arts-course-page
.discipline-footer-bottom a:hover {
    color: #dc72ad;
}

.visual-arts-course-page
.discipline-footer-socials a:hover {
    background:
        linear-gradient(
            135deg,
            var(--visual-purple),
            var(--visual-magenta),
            var(--visual-orange)
        );
}


/* ==================================================
   RESPONSIVE · ARTES VISUALES
   ================================================== */

@media (max-width: 900px) {

    .visual-arts-course-page .other-courses-grid {
        grid-template-columns: 1fr;

        width: min(100%, 380px);
        margin-inline: auto;
    }

    .visual-feature-art {
        height: 180px;
        margin-top: 35px;
    }

    .visual-art-shape.visual-shape-one {
        width: 115px;
        height: 115px;
    }

    .visual-art-shape.visual-shape-two {
        width: 90px;
        height: 90px;
    }

    .visual-feature-art .visual-icon-one {
        font-size: 3rem;
    }

    .visual-art-line.line-one {
        width: 220px;
    }

    .visual-art-line.line-two {
        width: 175px;
    }
}