@font-face {
    font-family: Favorit;
    src: url(fonts/esnein/FavoritStd-Light.woff2) format("woff2"),url(fonts/esnein/FavoritStd-Light.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ESNeinExtrabold;
    src: url(fonts/esnein/ESNein-Extrabold.woff2) format("woff2"),url(fonts/esnein/ESNein-Extrabold.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

/* apply a natural box layout model to all elements, but allowing components to change */
html .cyberster {
    box-sizing: border-box;
    font-size: 62.5%;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
html, body { overflow-x: hidden;}

/* Utilidades */
body .cyberster{
    font-size: 1rem;
    font-family: Favorit, sans-serif;
}

.img-100{width: 100%; height: auto;}

.fondo-negro{
    background-color: #000000;
    color: #ffffff;
}

/* Contenido */

.hero-section{
    height: 100vh;
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
    padding-top: 2rem;
}
.hero-section:after{
    content: "";
    display: block;
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: 0;
    background: linear-gradient(0deg, #000, #0000);
    pointer-events: none;
}
.cyberster-logo{display: flex; justify-content: center; margin-bottom: 1.5rem;}
.cyberster-logo img{height: 4rem;}

.hero-title{
    font-size: 6rem;
    font-family: ESNeinExtrabold;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
}

.hero-section-contenido {
    position: absolute;
    bottom: 5vw;
    left: 5vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
    font-family: Favorit;
    font-weight: 400;
    font-style: normal;
    width: 35rem;
    z-index: 2;
}

.hero-section-contenido h1{
    text-transform: uppercase;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.hero-section-contenido p{font-size: 1.2rem; text-transform: uppercase;}
.hero-section span{display: block; font-size: 1.2rem; text-transform: uppercase;}
.modulo .contenido-texto{width: 60%; margin: 0 auto; padding: 6rem 0;}
.modulo .contenido-texto h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 2.5rem;
    letter-spacing: 2px;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.modulo .contenido-texto p{text-align: center; text-transform: uppercase; font-size: 1.2rem;}

.contenido-carrusel{width: 80%; margin: 0 auto;}

.performance-section:before {
    content: "";
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    background: linear-gradient(180deg, #000, #0000);
    pointer-events: none;
    z-index: 1;
}

.performance-section:after {
    content: "";
    display: block;
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: 0;
    background: linear-gradient(0deg, #000, #0000);
    pointer-events: none;
    z-index: 1;
}

.performance-section {
    background-image: url(../img/common/ext-des-00.jpg);
    background-size: cover;
    position: relative;
    height: 100vh;
    color: #ffffff;
}

.performance-section-content{
    padding: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.performance-content{width: 30%; text-transform: uppercase; letter-spacing: 2px;}
.performance-datos{display: flex; justify-content: space-between;}
.stat-columna{display: flex; justify-content: space-between; width: 40rem;}
.valor-numero{font-size: 6rem; letter-spacing: 2px;}
.stats-textos{width: 15rem; text-align: center; text-transform: uppercase; font-size: 1rem; letter-spacing: 2px;}
.galeria .item{padding: 1.5rem;}
.galeria-content h1{text-align: center; text-transform: uppercase; font-size: 3rem; width: 60vw; margin: 0 auto; margin-bottom: 6rem;}
.modulo{padding: 9rem 0 6rem 0;}
.precision-content{padding: 6rem 0; width: 65%; margin: 0 auto;}
.precision-content h2{text-align: center; font-size: 3rem; text-transform: uppercase; margin-bottom: 1.5rem;}
.precision-content p{font-size: 1.2rem; text-align: center; text-transform: uppercase; letter-spacing: 2px;}

.nav-dots{list-style: none; padding: 0; display: flex; justify-content: center;}
.nav-dots li.slick-active button{background-color: #c72026;}
.nav-dots li{margin: 0 .5rem;}
.nav-dots li button {
    border: none;
    width: .75rem;
    height: .75rem;
    border-radius: 3rem;
    text-indent: -9999px;
    background-color: #efefef;
}

.precision-content blockquote{color: #c72026; text-transform: uppercase; font-size: 3rem; margin-bottom: 1.5rem; margin-top: 8rem; text-align: center;}
.contenido-carrusel{margin-bottom: 9rem;}
.version-detail{text-transform: uppercase;}
.version-title{display: block; font-size: 1.2rem; padding: 1.5rem;}
.listado-espec{font-size: 0.8rem; list-style: none; padding: 0; letter-spacing: 1px; padding: 1.5rem;}
.columna-detail{display: flex;}
.versiones{display: flex; justify-content: stretch;}
.versiones-content{width: 80%;margin: 0 auto;}
.sub-footer{width: 80%; margin: 0 auto; font-size: 0.8rem; color: #8b8b8b; text-align: justify;}
.footer-credits{
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    width: 80%; 
    margin: 0 auto;
    margin-bottom: 3rem; 
    padding: 1.5rem 0; 
    border-bottom: 1px solid #efefef;
    border-top: 1px solid #efefef;
    }
.logo-footer img{height: 4rem; margin-right: 1.5rem;}

@media (min-width: 320px){
    .hero-section-contenido {
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        padding: 2rem;
    }
    .hero-section{
        height: 80vh;
    }
    .modulo .contenido-texto{width: 85%; margin: 0 auto; padding: 6rem 0;} 
    .modulo .contenido-texto h1{font-size: 2rem;}
    .performance-content{width: 85%;}
    .performance-section-content{ padding: 2rem; }
    .precision-content p { font-size: 1rem; text-align: center; text-transform: uppercase; letter-spacing: 2px; }
    .precision-content h2{text-align: center; font-size: 2rem; text-transform: uppercase; margin-bottom: 1.5rem;}
    .performance-datos{display: block; padding-top: 6rem; z-index: 2;}
    .stat-columna{width: 90%;}
    .galeria-content h1{width: 85%; font-size: 2rem; text-transform: uppercase;}
    .performance-content h1{font-size: 1.4rem; margin-bottom: 1.5rem;}
    .performance-content p{font-size: 1rem;}
    .galeria-content{padding-top: 6rem;}
    .valor-numero{font-size: 2rem;}
    .valor-numero .span{font-size: 0.8rem;}
    .precision-content blockquote{font-size: 2rem; margin-top: 0;}
    .precision-content{width: 85%;}
    .modulo {padding: 1.5rem 0}
    .versiones{display: block;}
    .stats-textos { width: 10rem; text-align: center; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; }
} 
   


@media (min-width: 768px){
    .modulo .contenido-texto{width: 62%; margin: 0 auto; padding: 6rem 0;} 
    .modulo .contenido-texto h1{font-size: 4rem;}
    .performance-content{width: 50%;}
    .performance-section-content{padding: 6rem;}
    .performance-datos{display: flex; justify-content: space-between; padding: 0;}
    .galeria-content h1{width: 60vw; font-size: 3rem;}
    .stat-columna{width: 30rem}
    .valor-numero{font-size: 3rem;}
    .precision-content blockquote{font-size: 3rem;}
    .galeria-content{padding-top: 0rem;}
    .modulo {padding: 6rem 0 6rem 0;}
    .versiones{display: flex;}
    .hero-section{
        height: 80vh;
    }
}

@media (min-width: 960px){ 
    .hero-section-contenido {
        position: absolute;
        bottom: 5vw;
        left: 5vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        color: #ffffff;
        font-family: Favorit;
        font-weight: 400;
        font-style: normal;
        width:45rem;
    }
    .modulo .contenido-texto h1{font-size: 3rem;}
    .performance-content{width: 30%;}
    .stat-columna{width: 35rem}
    .valor-numero{font-size: 4rem;}
    
}

.logo-footer .menu.scrolled .navbar-brand svg {
    fill: #ffffff;
}

.listado-espec .item-espec{
    list-style: circle;
}

.listado-espec .item-espec::marker{
    color: #c72026;
}