@import url('footer.css'); 
    @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap');

    :root{ --categorias: #303634; }

    *{
        color: black;
        margin: 0;
        padding: 0;
        font-family: "Barlow", sans-serif;
        font-size: 22px;
        text-decoration: none;
    }
    body{
        max-width: 100%;
        position: relative;
    }

    /* HEADER */

    header{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        padding: 0.8rem;
        border-bottom: solid 1px;
    
        .logo{ width: clamp(11rem, 2vw + 1rem, 12rem); }
    
        .articulos{
            position: relative;
            display: flex;
            gap: 1rem;
            p{ font-size: 0.7rem; padding: 0.6rem; position: relative; }
            .categoria::after, .categoria:hover::after{
                content: "";
                position: absolute;
                border: solid 0px;
                width: 0;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: all 0.25s linear;
            }
            .servicios::after, .categoria:hover::after{
                border: solid 1px;
                width: 100%;
            }
            .servicios, .categoria:hover{ font-weight: bold; }
            .fa-bars{ font-size: 1.3rem; }
        }
        .sidebar{
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            width: 180px;
            z-index: 999;
            background-color: rgba(255, 255, 255, 0.5);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
            display: none;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
    
            p{ width: 100%; }
            a{ width: 100%; }
        }
    }

    .seccion-servicios{
        padding: 1rem 0;

        .servicios_titulos{
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.2;
            padding: 1rem;
            
            h1{
                text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
                font-size: 2rem;
                background: linear-gradient(to right, lightblue, #B8E5C1, lightgreen); 
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-align: center;
                font-family: 'Rubik Doodle Shadow', system-ui;
            }
        }
    }
    .seccion__video .texto_videos{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .texto_videos_texto{ font-size: clamp(0.7rem, 2vw, 0.9rem); padding-bottom: 0.5rem; }

    /* Carrusel de videos */
    .container-slider__video, .container-slider{
        width: 90%;
        width: 900px;
        margin: auto;
        overflow: hidden;
        position: relative;
    }
    .slider__video, .slider{
        display: flex;
        gap: 1rem;
        width: 400%; 
        height: 500px;
        margin-left: -100%;
        padding-bottom: 1rem;
    }
    .slider__video{ width: 300%; }
    
    .slider__section__video, .slider__section{ width: 100%; padding-bottom: 1.5rem;  }
    .video, .slider__img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        box-shadow: 0 0 0 5px #fff, 0 10px 20px gray;
        border: solid 1px;
        border-radius: 20px;
    }
    .slider__p{
        margin-top: 1rem;
        font-size: 0.75rem;
        text-align: center;
    }
    .slider__btn__video, .slider__btn{
        position: absolute;
        width: 40px;
        height: 40px;
        text-align: center;
        cursor: pointer;
        top: 45.5%;
        transform: translateY(-50%);
        font-size: 1.4rem;
        font-weight: bold;
        font-family: monospace;
        background: #e0e5ec;
        border: none;
        border-radius: 50%;
        color: #4a5568;
        box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.6),
                    -4px -4px 8px rgba(255, 255, 255, 0.8);
        transition: all 0.3s ease;
    }
    .slider__btn__video:hover, .slider__btn:hover{ background-color: #fff; }
    .slider__btn--left__video, .slider__btn--left{ left: 20px; }
    .slider__btn--right__video, .slider__btn--right{ right: 20px; }


    @media (max-width: 400px){
        html, body{ overflow-x: hidden; }
        .Nav_compu{ display: none; }

        /* Carrusel de videos */
        .container-slider__video, .container-slider{ width: 320px; }
        .slider__video, .slider{ height: 270px; padding-bottom: 0.5rem }
        .slider__p{ font-size: 0.45rem; }
        .slider__btn__video, .slider__btn{
            width: 30px;
            height: 30px;
            font-size: 1.1rem;
        }
        .slider__btn--left__video, .slider__btn--left{ left: 7px; }
        .slider__btn--right__video, .slider__btn--right{ right: 5px; }
    }

    @media (min-width: 401px) and (max-width: 600px){ /* celulares */
        html, body{ overflow-x: hidden; }
        .Nav_compu{ display: none; }

        /* Carrusel de videos */
        .container-slider__video, .container-slider{ width: 370px; }
        .slider__video, .slider{ height: 300px; }
        .slider__p{ font-size: 0.5rem; }
        .slider__btn__video, .slider__btn{
            width: 30px;
            height: 30px;
            font-size: 1.1rem;
        }
        .slider__btn--left__video, .slider__btn--left{ left: 7px; }
        .slider__btn--right__video, .slider__btn--right{ right: 5px; }

    }
    @media (min-width: 601px) and (max-width: 800px){ /* tablets */
        html, body{ overflow-x: hidden; }
        .Nav_compu{ display: none; }

        /* Carrusel de videos */
        .container-slider__video, .container-slider{ width: 700px; }
        .slider__p{ font-size: 0.7rem; }
    }
    @media (min-width: 801px) and (max-width: 900px){
        body, html{ overflow-x: hidden; }
        .Nav_compu{ display: block; }
        .barra{ display: none; }
    }
    @media (min-width: 901px) and (max-width: 1200px) { /* Computadoras */
        body, html{ overflow-x: hidden; }
        .barra{ display: none; }

    }
    @media (min-width: 1201px) { /* Televisiones */
        body, html{ overflow-x: hidden; }
        .barra{ display: none; }
    }