/*Figura*/
.Figura-contenedor {
    position: relative;
    width: 100%; 
    height: 10vh; 
    z-index: 10;
}

.Rectas {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Líneas horizontales */
.Recta-izquierda, .Recta-derecha {
    position: relative;
    width: 35%; 
    height: 8%; 
    background-color: rgb(255, 136, 0);
    box-shadow: 0 0 15px 5px orange; 
    bottom: 170%;
}

.Recta-central{
    position: relative;
    width: 20%; 
    height: 8%; 
    background-color: rgb(255, 136, 0); 
    box-shadow: 0 0 15px 5px orange; 
    bottom: 40%;
}


.Diagonales {
    position: absolute;
    width: 100%;
    height: 100%;
}

.Diagonal-izquierda, .Diagonal-derecha {
    position: absolute;
    width: 9%;
    height: 8%; 
    background-color: rgb(255, 136, 0);
    box-shadow: 0 0 15px 5px orange;
    transform-origin: center;
}

/* Posición y rotación de las diagonales */
.Diagonal-izquierda {
    bottom: 152%;
    left: 33%;
    transform: rotate(50deg);
}

.Diagonal-derecha {
    bottom: 152%;
    right: 33%;
    transform: rotate(-52deg);
}

/*Responsive*/
@media (max-width: 2100px){
    .Diagonal-izquierda, .Diagonal-derecha{
        width: 10%;
    }
    .Recta-central{
        width: 18%;
    }
}

@media (max-width: 1900px){
    .Recta-izquierda, .Recta-derecha {
        bottom: 150%;
    }
    .Recta-central{
        bottom: 45%;
        width: 19%;
    }

    .Diagonal-izquierda, .Diagonal-derecha{
        width: 9.5%;
        bottom: 144%;
    }
}

@media (max-width: 1500px) {
    .Figura-contenedor {
        height: 9vh;
    }

    .Diagonal-izquierda {
        width: calc(10.5vw); /* Ajustado proporcionalmente */
        left: calc(32vw);
    }

    .Diagonal-derecha {
        width: calc(10.5vw);
    }

    .Recta-izquierda {
        width: calc(34vw);
    }

    .Recta-central {
        width: calc(18vw);
    }
}

@media (max-width: 1499px) {
    .Recta-derecha, .Recta-izquierda{
        bottom: 230%;
    }

    .Diagonal-izquierda, .Diagonal-derecha{
        bottom: 190%;
    }

    .Diagonal-derecha{
        right: 32%;
    }

    .Recta-central{
        width: 19%;
        left: 0.5%;
        bottom: 55%;
    }
}

@media (max-width: 1200px) {
    
    .Diagonal-derecha{
        right: 30%;
    }

    .Recta-central{
        width: 21%;
        left: 0%;
    }

    .Recta-derecha{
        width: 32%;
    }
}

@media (max-width: 1100px) {
    .Figura-contenedor{
        height: 7vh;
    }
    .Recta-derecha {
        width: 35%;
    }
    .Diagonal-derecha {
        right: 33%;
        width: 10%;
    }

    .Recta-central {
        width: 19%;
        left: 0%;
    }

}

@media (max-width: 1000px) {
    .Figura-contenedor{
        height: 7vh;
    }
    .Recta-central {
        width: 21%;
        left: 0%;
    }

    .Diagonal-derecha {
        right: 30%;
        width: 10%;
    }
    .Recta-derecha {
        width: 32%;
    }
}

@media (max-width: 800px) {
    .Diagonal-derecha {
        right: 26%;
        width: 13%;
    }
    .Recta-central {
        width: 22%;
    }
    .Recta-derecha{
        width: 29%;
    }
    .Recta-izquierda {
        width: calc(33vw);
    }

    .Diagonal-izquierda {
        width: calc(12.5vw);
        left: calc(31vw);
    }
}


@media (max-width: 700px) {
    .Recta-derecha {
        width: 26%;
    }
    .Diagonal-derecha {
        right: 23%;
        width: 15%;
    }
    .Recta-central{
        width: 30%;
       
    }
    .Recta-izquierda {
        width: calc(26vw);
       
    }
    .Diagonal-izquierda {
        width: calc(15.5vw);
        left: calc(23vw);
    }
}

@media (max-width: 600px) {
    .Figura-contenedor {
        height: 5vh;
    }

    .Recta-derecha, .Recta-izquierda {
        bottom: 290%;
    }

    .Recta-derecha {
        width: 21%;
    }

    .Diagonal-izquierda, .Diagonal-derecha {
        bottom: 220%;
    }

    .Recta-izquierda {
        width: calc(20vw);
    }

    .Diagonal-izquierda {
        width: calc(18.5vw);
        left: calc(16vw);
    }

    .Diagonal-derecha {
        right: 17%;
        width: 18%;
    }

    .Recta-central {
        width: 38%;
    }
    
}

@media (max-width: 500px) {
    .Recta-derecha, .Recta-izquierda {
        width: 15%;
    }
    .Diagonal-derecha {
        right: 10%;
        width: 21%;
    }
    .Diagonal-izquierda {
        width: calc(21.5vw);
        left: calc(11vw);
    }
    .Recta-central {
        width: 45%;
    }
}


@media (max-width: 450px) {
    .Recta-derecha, .Recta-izquierda{
        width: 10%;
    }
    .Recta-central {
        width: 50%;
    }
    .Diagonal-derecha {
        right: 5%;
        width: 24%;
    }
    .Diagonal-izquierda {
        width: calc(23.5vw);
        left: calc(6vw);
    }
}

@media (max-width: 350px) {
    .Recta-derecha, .Recta-izquierda {
        bottom: 300%;
    }
    .Recta-derecha, .Recta-izquierda {
        width: 4%;
    }
    .Recta-central {
        width: 60%;
    }
    .Diagonal-izquierda {
        width: calc(30.5vw);
        left: calc(-4vw);
    }
    .Diagonal-derecha {
        right: -2%;
        width: 29%;
    }
}

@media (max-width: 300px) {
    .Recta-central {
        width: 72%;
        left: 0%;
    }
    .Diagonal-derecha {
        right: -4%;
        width: 22%;
        bottom: 178%;
    }

    .Recta-derecha, .Recta-izquierda{
        width: 0%;
    }
    .Diagonal-izquierda {
        width: calc(33.5vw);
        left: calc(-14vw);
    }
}