:root{
    --azul-pilares: #3790CC;
    --naranja-pilares: #f4ad4e;
    --barra-color-primario: white;
    --barra-color-secundario: #494948;

    /* --barra-color-primario: var(--azul-pilares);
    --barra-color-secundario: #2C72A2; */
}

*{
    margin: 0 auto;
}

body{
    background-color: #FFF;
}

.logo{
    width: 40vw;
}

.contenido {
    flex: 1; /* El contenido ocupará el espacio entre las barras */
    display: flex;
    justify-content: center; /* Centramos horizontalmente */
    align-items: center; /* Centramos verticalmente */
    text-align: center;
}

/* Asegurar que el contenedor principal tenga al menos el alto de la pantalla */
.contenedor-principal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.display-1-custom {
    font-size: 5rem; /* Tamaño por defecto (grande) */
}

.display-6-custom {
    font-size: 2.5rem; /* Tamaño por defecto (grande) */
}

.barras-diagonales {
    width: 100%;
    height: 100px; /* Ajusta la altura según tus necesidades */
    background: repeating-linear-gradient(
        -45deg, /* Ángulo de las líneas */
        var(--naranja-pilares) 0, 
        var(--naranja-pilares) 50px, 
        var(--barra-color-secundario) 50px, 
        var(--barra-color-secundario) 100px
    );
}

/* Para pantallas medianas (md) */
@media (max-width: 991.98px) {
    .barras-diagonales {
        width: 100%;
        height: 80px; /* Ajusta la altura según tus necesidades */
        background: repeating-linear-gradient(
            -45deg, /* Ángulo de las líneas */
            var(--naranja-pilares) 0, 
            var(--naranja-pilares) 50px, 
            var(--barra-color-secundario) 50px, 
            var(--barra-color-secundario) 100px
        );
    }

    .logo{
        width: 60vw;
    }

    .display-1-custom {
        font-size: 3.5rem; /* Reducir el tamaño del texto */
    }

    .display-6-custom {
        font-size: 2rem;
    }
}

/* Para pantallas pequeñas (sm) */
@media (max-width: 767.98px) {
    .barras-diagonales {
        width: 100%;
        height: 80px; /* Ajusta la altura según tus necesidades */
        background: repeating-linear-gradient(
            -45deg, /* Ángulo de las líneas */
            var(--naranja-pilares) 0, 
            var(--naranja-pilares) 50px, 
            var(--barra-color-secundario) 50px, 
            var(--barra-color-secundario) 100px
        );
    }

    .logo{
        width: 50vw;
    }

    .display-1-custom {
        font-size: 3rem; /* Aún más pequeño para pantallas pequeñas */
    }

    .display-6-custom {
        font-size: 1.5rem;
    }
}

/* Para pantallas extra pequeñas (xs) */
@media (max-width: 575.98px) {
    .barras-diagonales {
        width: 100%;
        height: 50px; /* Ajusta la altura según tus necesidades */
        background: repeating-linear-gradient(
            -45deg, /* Ángulo de las líneas */
            var(--naranja-pilares) 0, 
            var(--naranja-pilares) 50px, 
            var(--barra-color-secundario) 50px, 
            var(--barra-color-secundario) 100px
        );
    }

    .logo{
        width: 50vw;
    }

    .display-1-custom {
        font-size: 2.5rem; /* Ajuste para pantallas muy pequeñas */
    }

    .display-6-custom {
        font-size: 1.5rem;
    }
}