/* Este archivo contendrá estilos específicos para todos los cantos (ej. A la Víctima Pascual) */
/* Puedes añadir sobrescrituras o estilos únicos aquí */

.cristo {
    /*z-index: 999;*/
    position: fixed;
    align-self: normal;
    opacity: 0.4; /* Adjust the opacity value (0.0 - 1.0) */
    z-index: 9999;

    @media (min-width: 344px){
        width: 30%;
        top: 6%;
        margin-left: -35px;
    }

    @media (min-width: 384px){
        width: 30%;
        top: 6%;
        margin-left: -35px;
    }
    @media (min-width: 768px){
        width: 16%;
        top: initial;
    }
    @media (min-width: 992px){
        width: 8em;
        top: initial;
        margin-left: -47px;
    }
}


/* Ejemplo: Si quieres un color de fondo diferente solo para este canto */
/* body { background-color: #f0f8ff; } */


/*1ra configuracion r1, r2 */

.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10, .r11, .r12 {position: relative;min-height: 0px;}

/*2da configuracion r1, r2 */
/* Las propiedades comunes que no dependen de media queries van aquí */
.r1::before, .r2::before, .r3::before, .r4::before, .r5::before, .r6::before, .r7::before, .r8::before, .r9::before, .r10::before, .r11::before, .r12::before
{
    content: " BIS A."; /* Movido aquí */
    position: absolute; /* Movido aquí */
    align-content: center; /* Movido aquí */
    border-left: 2px solid #3b333369; /* Movido aquí */
    color: #3b333369; /* Movido aquí */
    width: max-content; /* Movido aquí */
    font: icon;
    font-weight: bold;
}

/*3ra configuracion r1, r2 */
@media (min-width: 384px) {.r1::before, .r2::before, .r3::before, .r4::before, .r5::before, .r6::before, .r7::before, .r8::before, .r9::before, .r10::before, .r11::before, .r12::before 
    {font-size: large;height: 93px;margin-left: 375px;margin-top: -47px;}}
@media (min-width: 768px) {.r1::before, .r2::before, .r3::before, .r4::before, .r5::before, .r6::before, .r7::before, .r8::before, .r9::before, .r10::before, .r11::before, .r12::before 
    {font-size: x-large;height: 153px;margin-left: 380px;margin-top: -42px}}
@media (min-width: 992px) {.r1::before, .r2::before, .r3::before, .r4::before, .r5::before, .r6::before, .r7::before, .r8::before, .r9::before, .r10::before, .r11::before, .r12::before 
    {font-size: x-large;height: 125px;margin-left: 366px;margin-top: -42px;}}

 .b1-1, .b1-2, .b2, .b3, .b12-1, .b12-2, .b14, .b17, .b18, .b19, .b24, .sb194
 {position: relative;min-height: 0px;}

/* ESTRUCTURA DE BIS*/

.ast91, .ast92, .ast93, .ast94, .ast95, .ast96, .alabadlo, .alabadlo1, .alabadlo2, .ast, .ast1, .ast2, .ast3, .ast4, .ast5, .ast6, .ast7, .ast8, .astd
{position: relative;min-height: 0px;}

.ast91::before, .ast92::before, .ast93::before, .ast94::before, .ast95::before, .ast96::before, .a321::before, .a322::before, .a323::before, .a324::before, .ast::before, .ast1::before, .ast2::before, .ast3::before, .ast4::before, .ast5::before, .ast6::before, .ast7::before, .ast8::before, .astd::before
{
    content: "*";
    position: absolute;
    align-content: center;
    color: red;
    width: max-content; /* Movido aquí */
    font: icon;
    font-weight: bold;
    font-size: larger;
}

.astd::before{content: "**";}

.ast91::before {    @media (min-width: 384px) {height: 40px;margin-left: 95px;margin-top: -40px;}
                    @media (min-width: 768px) {height: 40px;margin-left: 180px;margin-top: -50px;}
                    @media (min-width: 992px) {height: 40px;margin-left: 135px;margin-top: -43px;}}

.ast92::before {    @media (min-width: 384px) {height: 40px;margin-left: 222px;margin-top: -40px;}
                    @media (min-width: 768px) {height: 40px;margin-left: 417px;margin-top: -50px;}
                    @media (min-width: 992px) {height: 40px;margin-left: 313px;margin-top: -43px;}}

.ast93::before {    @media (min-width: 384px) {height: 40px;margin-left: 165px;margin-top: -40px;}
                    @media (min-width: 768px) {height: 40px;margin-left: 305px;margin-top: -50px;}
                    @media (min-width: 992px) {height: 40px;margin-left: 231px;margin-top: -43px;}}

.ast94::before {    @media (min-width: 384px) {height: 40px;margin-left: 145px;margin-top: -40px;}
                    @media (min-width: 768px) {height: 40px;margin-left: 270px;margin-top: -50px;}
                    @media (min-width: 992px) {height: 40px;margin-left: 207px;margin-top: -43px;}}

.ast95::before {    @media (min-width: 384px) {height: 40px;margin-left: 183px;margin-top: -38px;}
                    @media (min-width: 768px) {height: 40px;margin-left: 347px;margin-top: -50px;}
                    @media (min-width: 992px) {height: 40px;margin-left: 260px;margin-top: -43px;}}

.ast96::before {    @media (min-width: 384px) {height: 40px;margin-left: 128px;margin-top: -38px;}
                    @media (min-width: 768px) {height: 40px;margin-left: 237px;margin-top: -50px;}
                    @media (min-width: 992px) {height: 40px;margin-left: 183px;margin-top: -43px;}}

    @media (min-width: 384px) {.ast::before, .ast1::before, .ast2::before, .ast3::before, .ast4::before, .ast5::before, .ast6::before, .ast7::before, .ast8::before{margin-top: 5px;margin-left: 164px;}}
    @media (min-width: 768px) {.ast::before, .ast1::before, .ast2::before, .ast3::before, .ast4::before, .ast5::before, .ast6::before, .ast7::before, .ast8::before{margin-top: 15px;margin-left: 305px;}}
    @media (min-width: 992px) {.ast::before, .ast1::before, .ast2::before, .ast3::before, .ast4::before, .ast5::before, .ast6::before, .ast7::before, .ast8::before{margin-top: 9px;margin-left: 226px;}}

.alabadlo::before, .alabadlo1::before, .alabadlo2::before {
    content: "¡ALABADLO!";
    font-family: 'Franklin Gothic Medium', Arial, sans-serif;
    position: absolute;
    align-content: center;
    color: black;
    width: max-content; /* Movido aquí */
    font: icon;
    font-weight: bold;
    font-size: larger;
}

    @media (min-width: 384px) {
        .alabadlo::before {font-size: 1em; height: 40px;margin-left: 230px;margin-top: -8px;}
        .alabadlo1::before {font-size: 1em; height: 40px;margin-left: 190px;margin-top: 0px;}
        .alabadlo2::before {font-size: 1em; height: 40px;margin-left: 246px;margin-top: -20px;}
            }

    @media (min-width: 768px) {
        .alabadlo::before {font-size: 1.5em;height: 40px;margin-left: 450px;margin-top: 0%;}
        .alabadlo1::before {font-size: 1.5em;height: 0px;margin-left: 410px;margin-top: 0%;}
        .alabadlo2::before {font-size: 1.5em;height: 40px;margin-left: 490px;margin-top: -2%;}
    }

    @media (min-width: 992px) {
        .alabadlo::before {height: 40px;margin-left: 65%;margin-top: 0%;}
        .alabadlo1::before {height: 40px;margin-left: 0%;margin-top: 0px;}
        .alabadlo2::before {height: 40px;margin-left: 344px;margin-top: -10px;}
        }


/* Las propiedades comunes que no dependen de media queries van aquí */
    .b1-1::before, .b1-2::before, .b2::before,
    .b3::before, .b12-1::before, .b12-2::before, .b14::before, .b17::before,
    .b18::before, .b19::before, .b19b::before, .b24::before, .b31::before
    {
        content: " BIS A."; /* Movido aquí */
        position: absolute; /* Movido aquí */
        align-content: center; /* Movido aquí */
        border-left: 2px solid #c6c5c59e; /* Movido aquí */
        color: #c6c5c59e; /* Movido aquí */
        width: max-content; /* Movido aquí */
        font: icon;
        font-weight: bold;
    }

.sb194::before {
    content: " S"; /* Movido aquí */
    position: absolute; /* Movido aquí */
    align-content: center; /* Movido aquí */
    border-left: 2px solid #c6c5c59e; /* Movido aquí */
    color: #c6c5c59e; /* Movido aquí */
    width: max-content; /* Movido aquí */
    font: icon;
    font-weight: bold;
}

/* Media queries para r1 y r2 */
@media (min-width: 384px) {
    .b1-1::before{height: 100px;margin-left: 85%;margin-top: 0%;}
    .b1-2::before{height: 60px;margin-left: 88%;margin-top: 0%;}
    .b2::before{height: 60px;margin-left: 88%;margin-top: 0%;}
    .b12-1::before {height: 55px;margin-left: 200px;margin-top: 0%;}
    .b12-2::before{height: 130px;margin-left: 230px;margin-top: -35px;}
    .b14::before{height: 55px;margin-left: 230px;margin-top: -35px;}
    .b17::before{height: 55px;margin-left: 230px;margin-top: -35px;}
    .b18::before{height: 129px;margin-left: 230px;margin-top: -35px;}
    .b19::before{height: 56px;margin-left: 163px;margin-top: -35px;}
    .b19b::before{height: 56px;margin-left: 277px;margin-top: -35px;}
    .b24::before{height: 131px;margin-left: 244px;margin-top: -35px;}
    .b31::before{height: 166px;margin-left: 244px;margin-top: -35px;}
}
@media (min-width: 768px) {
    .b1-1::before{height: 79px;margin-left: 85%;margin-top: 0%;}
    .b1-2::before{height: 60px;margin-left: 88%;margin-top: 0%;}
    .b2::before{height: 60px;margin-left: 88%;margin-top: 0%;}
    .b12-1::before{height: 90px;margin-left: 380px;margin-top: 0px;}
    .b12-2::before{height: 200px;margin-left: 410px;margin-top: -50px;}
    .b14::before{height: 90px;margin-left: 410px;margin-top: -50px;}
    .b17::before{height: 90px;margin-left: 410px;margin-top: -50px;}
    .b18::before{height: 201px;margin-left: 420px;margin-top: -50px;}
    .b19::before{height: 91px;margin-left: 300px;margin-top: -50px;}
    .b19b::before{height: 91px;margin-left: 500px;margin-top: -50px;}
    .b24::before{height: 202px;margin-left: 447px;margin-top: -50px;}
    .b31::before{height: 262px;margin-left: 447px;margin-top: -50px;}
}
@media (min-width: 992px) {
    .b1-1::before{height: 127px;margin-left: 76%;margin-top: 0%;}
    .b1-2::before{height: 80px;margin-left: 88%;margin-top: 0%;}
    .b2::before {font-size: 1.3rem;font-weight: bold;height: 73px;margin-left: 40%;margin-top: -5%;}
    .b12-1::before{height: 80px;margin-left: 285px;margin-top: 0%;}
    .b12-2::before{height: 170px;margin-left: 300px;margin-top: -45px;}
    .b14::before{height: 76px;margin-left: 300px;margin-top: -45px;}
    .b17::before{height: 76px;margin-left: 300px;margin-top: -45px;}
    .b18::before{height: 170px;margin-left: 315px;margin-top: -45px;}
    .b19::before{height: 72px;margin-left: 225px;margin-top: -42px;}
    .b19b::before{height: 72px;margin-left: 380px;margin-top: -42px;}
    .b24::before{height: 163px;margin-left: 343px;margin-top: -42px;}
    .b31::before{height: 208px;margin-left: 343px;margin-top: -42px;}
}



.b3::before {
        font-size: 1.3rem;
        font-weight: bold;
        height: 72px;
        margin-left: 76%;
        margin-top: 0%;
    }

.b3hym {
    top: -59px;
    left: 132px;
    width: fit-content;
}

.b3hm1.canto-content-wrapper.single-column-mode #canto-left-container {
    width: 768px;
    padding-left: 1%;
    padding-right: 1%;
    box-sizing: border-box;
}

.ptop0 {
    padding-top: 0px;
    height: 25px;
    margin-top: 0px;

    @media (min-width: 768px){
        padding-top: 5px;
        height: 21px;
        margin-top: 5px;
    }
    @media (min-width: 992px){
        height: 19px;
    }
}

.ptop1 {
    height: 0px;
    padding-top: 0px;
    margin-bottom: -8px;
    
    @media (min-width: 768px){
        margin-bottom: 17px;
    }

    @media (min-width: 992px){
        margin-bottom: -18px;
    }

}

.sdb {padding-bottom: 10px;}
.adb {padding-top: 30px;}      /* ↑ Arriba          ↓ */ 
.adb1 {  /* Esto es para el espacio entre lineas*/
    @media (min-width: 384px) {
        padding-top: 0px;
    }
    @media (min-width: 768px) {
        padding-top: 20px;    
    }
    @media (min-width: 992px) {
        padding-top: 0px;
    }          /* ↑ Arriba          ↓ */
}
.adb5 {padding-top: 5px;}      /* ↑ Arriba          ↓ */ 
.adb10 {padding-top: 10px;}      /* ↑ Arriba          ↓ */ 
.adb15 {padding-top: 15px;}      /* ↑ Arriba          ↓ */ 

.mheight0 {min-height: 0px;}
.mheight2 {min-height: 2px;}

.mleft {
    margin-left: 40px;
}


    @media (min-width: 384px) {
        .niño::before {
            margin-left: -30px;
            font-size: 60%;
            margin-top: 4px;
        }
    }
        @media (min-width: 768px) {
        .niño::before {
            margin-left: -78px;
            font-size: 1.4rem;
            margin-top: -3px;
        }
    }
    @media (min-width: 992px) {
        .niño::before {
            font-size: 1.23rem;
            margin-top: -4px;
            left: -71px;
        }
    }

    @media (min-width: 992px) {
        .hombres::before, .mujeres::before {
            font-size: 1.23rem;
            margin-top: 0%;
            margin-left: -100px;
        }
    }
    @media (min-width: 768px) {
        .hombres::before, .mujeres::before {
            font-size: 0.8rem;
            margin-left: -43px;
            margin-top: 20px;
        }
    }


.ndb {
    padding-right: 0%;
}

.letra[data-color] {
    color: var(--line-color, inherit);
}

.red {
    color: red inherit}

            .top1 {z-index: 999;}
            @media (min-width: 384px) {
                .sub {margin-top: -36px;} /* 384px */
            }
            @media (min-width: 768px) {
                .sub {margin-top: -57px;} /* 768px */
            }
            @media (min-width: 992px) {
                .sub {margin-top: -46px;} /* 992px */

            }