.roboto-main {
    width: 100%;
    height: 80vh;

    display: grid; /*--grid--*/
    gap: 1em;
    grid-auto-flow: dense;
    grid-template-columns: repeat(6, 1fr);
}
/*---------------------------------------------------*/
.Roboto_titulo {
    overflow: hidden;
    border-bottom: 1px solid #1E1E1E;

    grid-column-start: span 2; /*--grid--*/
    grid-row-start: span 2;
}
.Roboto_titulo p {
    font-size: 9px;
    writing-mode: sideways-lr;
    font-family: "Roboto-Regular";
}
.Roboto_titulo h2 {
    font-size: 8vw;
    font-family: "Roboto_Condensed-Black";
    position: relative;
    animation: slideIn 2s ease-out forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%); /* empieza fuera de la pantalla a la izquierda */
        opacity: 0;
    }
    to {
        transform: translateX(0); /* vuelve a su posición normal */
        opacity: 1;
    }
}
/*------------------------------------------------------------*/
.Roboto_ABC {
    grid-column-start: span 3; /*--grid--*/
    grid-row-start: span 1;
    text-align: center;
}
.Roboto_ABC p {
    font-size: 1.6em;
    font-family: "Roboto-SemiBold";
}
/*------------------------------------------------------------*/
.Roboto_Caracteristicas {
    padding: 1em;
    border-radius: 2em;
    color: #F5F5F5;
    background-color: #1E1E1E;
    
    display: flex; /*--flex--*/
    justify-content: center;
    align-items: center;
}
.Roboto_Caracteristicas:hover {
    color: #1E1E1E;
    background: none;
}
/*---------------------------------------------------*/
.Roboto_Historia {
    font-family: "Roboto-Regular";
    padding-top: 1em;
    overflow: hidden;
    border-bottom: 1px solid #1E1E1E;

    grid-column-start: span 3; /*--grid--*/
    grid-row-start: span 2;
}
/*---------------------------------------------------*/
.Roboto_Historia1 {
    grid-column-start: span 3; /*--grid--*/
    grid-row-start: span 1;
}
/*---------------------------------------------------*/
.Roboto_Historia2 {
    overflow: hidden;

    grid-column-start: span 5; /*--grid--*/
    grid-row-start: span 2;
}
/*---------------------------------------------------*/
.Roboto_Variantes {
    grid-row-start: span 7;
}
.Roboto_Variantes details {
    font-size: 1em;
    text-align: center;
}
.Roboto_Variantes details h4 {
    font-size: 1.8em;
}
.Roboto_Variantes summary {
    padding: 1em;
}
.Roboto-Thin {
    font-family: "Roboto-Thin";
}
.Roboto-Light {
    font-family: "Roboto-Light";
}
.Roboto-ExtraLight {
    font-family: "Roboto-ExtraLight";
}
.Roboto-Regular {
    font-family: "Roboto-Regular";
}
.Roboto-Medium {
    font-family: "Roboto-Medium";
}
.Roboto-SemiBold {
    font-family: "Roboto-SemiBold";
}
.Roboto-Bold {
    font-family: "Roboto-Bold";
}
.Roboto-ExtraBold {
    font-family: "Roboto-ExtraBold";
}
.Roboto-Black {
    font-family: "Roboto-Black";
}
/*---------------------------------------------------*/
.Roboto_Implementación {
    padding: 1em;
    border-radius: 2em;
    color: #F5F5F5;
    background-color: #1E1E1E;

    grid-column-start: span 2;
    grid-row-start: span 2;
}
.fontface {
    color: rgb(188, 76, 247);
}
.blue {
    color: aqua;
}
.red {
    color: brown;
}
.selector {
    color: #CC7722;
}
.property {
    color: #CCCCCC;
}
.value {
    color: #3d8d3d;
}
/*---------------------------------------------------*/
@media (max-width: 768px) {
    .roboto-main {
        width: 100%;
        height: auto;
        background-color: #1E1E1E;
        grid-template-columns: 1fr 1fr;
    }
    .Roboto_titulo {
        grid-column-start: span 2;
    }
    .Roboto_titulo p {
        display: none;
        writing-mode: unset;
    }
    .Roboto_titulo h2 {
        color: #F5F5F5;
    }
    .Roboto_Historia {
        padding: 1em;
        border-radius: 2em;
        grid-column: span 2;
        background-color: #F5F5F5;
    }
    .Roboto_Caracteristicas {
        grid-column: span 2;
        color: #1E1E1E;
        background-color: #F5F5F5;
    }
    .Roboto_Variantes {
        border-radius: 2em;
        grid-column: span 2;
        background-color: #F5F5F5;
    }
    .Roboto_ABC {
        padding: 1em;
        grid-column: span 2;
        color: #F5F5F5;
    }
    .Roboto_ABC p {
        font-size: 0.9em;
        font-family: "Roboto-SemiBold";
    }
    .Roboto_Historia1 {
        padding: 1em;
        border-radius: 2em;
        grid-column-start: span 2;
        background-color: #F5F5F5;
    }
    .Roboto_Historia2 {
        padding: 1em;
        border-radius: 2em 2em 0em 0em;
        grid-column: span 2;
        color: #1E1E1E;
        background-color: #F5F5F5;
    }
    .Roboto_Implementación {
        background: none;
        grid-column: span 2;
    }
}