* {
    margin: 0;
    padding: 0;
}

html{
    scroll-behavior: smooth;
}

body {
    background-color: white;
    overflow-x: hidden;
}

.ordenar_nav{
    display: flex;
    justify-content: end;
    text-align: center;
    
}
.ordenar_nav ul li a{
    align-items: center;
    background-color: #1a2537;
    padding: 10px;
}

.w75{
    width: 75%;
}

ol{
    padding: 0;
}
picture{
    display: flex;
    flex-direction: column;
}

.visible{
    display: none;
}

.caracteristicas {
    width: 100%;
    display: grid;
    gap: 3em 2.5em;
    justify-items: center;
    align-items: center;
    grid-template-columns:
        repeat(auto-fit,
            minmax(400px, 1fr));
    grid-template-rows: auto;
    grid-auto-rows: 1fr;
    padding: 1.5em 0;

}

.box-caract {
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 5px;
    /*border: solid 1px black;*/
    transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative;
}

.box-caract:hover {
    outline: 2px solid #3498db;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}


.titulo_3 {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.body_3 {
    width: 100%;
    height: auto;
    font-weight: 200;
    font-size: 20px;
    padding: 5px;
    margin: 0;
}

.cont-icono {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
}

.icono {
    max-width: 100px;
}

.titulo_seccion {
    font-size: 40px;
    font-weight: bold;
    margin-top: 2em;
    border-top: black solid;
}

section {
    padding-top: 1em;
    margin-bottom: 0.5em;
}

p {
    width: 100%;
    height: auto;
    font-weight: 400;
    font-size: 20px;
    margin: 0;
}

.bold {
    font-weight: bold;
}

.titulo_0 {
    font-size: 50px;
    font-weight: bold;

}

hr {
    border: none;
    height: 7px;
    width: 100%;
    background-color: #1a2537;
}

.centrar {
    justify-content: center;
    align-items: center;
}

.derecha {
    justify-content: end;
    align-items: center;
}

/*ESTILOS BTN DESCARGA*/
.btndescarga {
    /* Establecer colores de fondo y texto */
    background-color: #2f4d75;
    /* Color de fondo */
    color: #ffffff;
    /* Color del texto */

    /* Añadir un borde */
    border: 1px solid #1a2537;
    /* Grosor y color del borde */
    border-radius: 5%;
    /* Radio de borde para esquinas redondeadas */

    /* Establecer tamaño y margen interno */
    padding: 10px 20px;
    /* Espaciado interno */
    font-size: 16px;
    /* Tamaño del texto */

    /* Agregar efecto de sombra */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra */

    /* Añadir transición suave al pasar el mouse */
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 1em;
    margin: 0 0.5em;
}

/* Estilo al pasar el mouse */
.btndescarga:hover {
    background-color: #2980b9;
    /* Cambiar color de fondo al pasar el mouse */
    color: #ffffff;
    /* Cambiar color del texto al pasar el mouse */
}

/*---------------------*/

#carouselExampleCaptions {
    width: 50%;
}

#presentacion {
    width: 50%;
}


.presentacion {
    background-color: #cddaea;
    border-radius: 5%;
    width: 70%;
    padding: 0.5em 2em;
    color: #1a2537;
    margin-top: 0.5em;
    box-shadow: 0 0 10px #1a2537;
}

.sec_principal {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.sec_principal.visible {
    opacity: 1;
}


.sec_principal {
    display: flex;
    padding: 1.7em;
}

.carrusel {
    width: 75%;
    display: flex;
    justify-content: center;
}

.area-descarga {
    display: flex;
    justify-content: center;
    padding: 2em;
    margin: 1em;
}

/*AREA VIDEOS*/
.visualizar_video {
    width: 100%;
    height: 40%;
    max-height: 600px;

}

.content_video {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video_file {
    width: 100%;
    height: 650px;
}

.miniaturas{
    width: 20%;
    display: grid;
    row-gap: 1em;
    max-height: 600px;
    margin: 0 10px;
    padding: 0;
    
}

.miniatura{
    width: auto;
    max-width: 300px;
    margin: 0;
    padding: 0;
}

.scrollear{
    overflow-y: scroll;
    width: auto;
}
.area-video{
    width: 100%;
    display: flex;
}

#lblreprod{
    width: auto;
    position: relative;
    top: 30px;
    color: white;
    background-color: #273953;
}

.vjs-control-bar{
    background-color: #2f4d75 !important;
}
/*----------------------*/

@media screen and (max-width: 768px) {
    .sec_principal {
        width: 100% !important;
        padding: 0;
        margin: 0;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .carrusel {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    #presentacion {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .presentacion {
        width: 90%;
    }

    .area-descarga {
        flex-direction: column !important;
    }

    .area-video{
        flex-direction: column;
    }
    .w75{
        width: 100%;
        display: flex;
        justify-content: center;
        height: 400px;
    }

    #sec_caract{
        width: 100% !important;
    }

    #sec_videos{
        width: 100% !important;
    }

    #src_video{
        width: 100%;
        height: auto;
    }

    .miniaturas{
        padding: 10px;
        max-height: 220px;
        display: flex;
    }

    #sec_precio{
        width: 100% !important;
    }

    #sec_descarga{
        width: 100% !important;
        flex-direction: column;
    }

    .division{
        flex-direction: column;
    }

    #sec_ayuda{
        width: 100% !important;
        flex-direction: column;
    }
    #btnDescarga2{
        margin: 10px;
        margin-top: 20px;
    }
}