html {
    scroll-behavior: smooth;
}

/* ---------- CONTENDOR SECCION ---------- */

.seccion-reglamento-AFC {
    width: 100%;
    height: auto;
    height: calc(100dvh - 45px - 136px);
    background-color: #f0f0f0;
    padding: .5rem 5%;

    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
    gap: 1rem;
}

/* ---------- CONTENDOR TITULO CAMPEONATO ---------- */

.contenedor-titulo-principal-reglamentos {
    width: 100%;
    /* margin-top: 1rem; */
    padding: 5px;
    background-color: rgb(201, 51, 51);
    border-radius: 20px;

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

.contenedor-titulo-principal-reglamentos h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    text-align: center;
    font-weight: 600;
    color: #F8F9FA;
}

/* ---------- CONTENDOR INDICE ---------- */

.contenedor-indice-reglamento {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    /* padding: 1rem 5% 2rem 5%; */

    display: flex;
    flex-direction: row;
    justify-content: center;
    /* align-items: flex-start; */
    gap: 1rem;

    overflow: hidden;
}

.contenedor-indice {
    width: 20%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
    overflow: scroll;
    gap: .5rem;
}

.contenedor-indice .contenedor-primeras-reglas-indice {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
}

.contenedor-indice .contenedor-primeras-reglas-indice .subtitulo-indice {
    font-family: 'Poppins', sans-serif;
    font-size: large;
    text-align: center;
    font-weight: 600;
    color: #131313;
    cursor: pointer;
}

.contenedor-primeras-reglas-indice .indice-reglamento {
    width: 100%;
    padding: .5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    text-decoration: none;
    color: #131313;
    border-radius: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contenedor-primeras-reglas-indice .indice-reglamento:hover {
    background-color: #135fab;
    color: #f0f0f0;
}

/* ----- CONTENEDOR REGLAMENTO ----- */

.contenedor-reglamento {
    width: 80%;
    height: 80vh;

    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
    overflow-y: auto;
    /* Permite el scroll interno */
    scroll-behavior: smooth;
    /* Hace que el movimiento sea suave */
    position: relative;

    gap: 1rem;
}

.contenedor-reglamento .contenedor-primeras-reglas {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
    gap: .5rem;
}

.contenedor-reglamento .contenedor-segundas-reglas {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
    gap: .5rem;
}


/* ----- CONTENEDOR TITULO INDICE ----- */
.contenedor-titulo-indice {
    width: 100%;
    position: sticky;
    top: 0;
    background-color: #f0f0f0;
    /* border-top: 2px solid #131313; */
    border-bottom: 2px solid #131313;
    cursor: pointer;

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

.contenedor-titulo-indice h2 {
    font-family: 'Poppins', sans-serif;
    font-size: larger;
    text-align: center;
    font-weight: 600;
    color: #135fab;
}

/* ----- CONTENEDOR TITULO REGLAMENTO ----- */
.contenedor-titulo-reglamento {
    width: 100%;
    background-color: #f0f0f0;
    /* border-top: 2px solid #131313; */
    border-bottom: 2px solid #131313;

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

.contenedor-titulo-reglamento h2 {
    font-family: 'Poppins', sans-serif;
    font-size: larger;
    text-align: center;
    font-weight: 600;
    color: #135fab;
}

/* ----- CONTENEDOR ITEMS REGLAS ----- */

.contenedor-items-reglas {
    width: 100%;
    height: auto;

    display: none;
    flex-direction: column;
}

/* ----- ITEMS REGLAMENTO ----- */

.item-reglamento {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    text-align: left;
    padding: .5rem;
    background-color: rgb(216, 216, 216);
    background-color: rgb(226, 226, 226);
    text-align: justify;
    border-radius: 1rem;
}

.contenedor-subitems {
    border-radius: 1rem;
    width: 100%;
    background-color: rgb(226, 226, 226);
}

/* ----- PENA CAPITULO Y PENA FINAL ----- */

.pena-capitulo {
    font-size: 1.5rem;
    color: #131313;
    font-weight: 600;
    display: flex;
    justify-content: center;
}

.pena-final {
    color: #131313;
    font-weight: 600;
    display: flex;
    justify-content: center;
}


@media screen and (max-width:768px) {

    .contenedor-indice {
        width: 40%;
    }

    .contenedor-reglamento {
        width: 60%;
    }

    .contenedor-titulo-principal-reglamentos h2 {
        font-size: larger;
    }

    /* .contenedor-indice .contenedor-primeras-reglas-indice .subtitulo-indice {
        font-size;        
    } */

    /* .contenedor-titulo-indice h2 {
        font-size: small;   
    } */

}