/*==================================================
   PROYECTO:
   NEED FOR SPEED MOST WANTED (2005)

   CSS PRINCIPAL
   Uso exclusivo de Flexbox
==================================================*/


/*==================================================
   RESET GENERAL
==================================================*/

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


/*==================================================
   CUERPO DE LA PÁGINA
==================================================*/

body {

    background-color: #0F0F0F;

    background-image:
        linear-gradient(rgba(0, 0, 0, .85),
            rgba(0, 0, 0, .95)),
        url("../img/fondo.jpg");

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    color: #F2F2F2;

    font-family: Arial, Helvetica, sans-serif;

    line-height: 1.6;

}

/*==================================================
   CONTENEDOR PRINCIPAL
==================================================*/

.contenedor {

    width: 90%;

    margin: 2rem auto;

    display: flex;

    flex-direction: column;

    gap: 2rem;

}


/*==================================================
   CABECERA PRINCIPAL
==================================================*/

.cabecera {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    background-color: #1A1A1A;

    padding: 1.5rem;

    border-left: .4rem solid #FF6A00;

    border-radius: 1rem;

}


/*=====================================
LOGO
=====================================*/

.logo {

    display: flex;

    justify-content: center;

    align-items: center;

}


.logo img {

    width: 16rem;

    height: auto;

}


.logo h1 {

    color: #FF6A00;

    font-size: 2.2rem;

    text-transform: uppercase;

}


.logo h2 {

    color: #FFFFFF;

    font-size: 1.5rem;

}


.logo h3 {

    color: #B5B5B5;

    font-size: 1rem;

}



/*==================================================
   MENU DE NAVEGACIÓN
==================================================*/


.menu {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;

}



.menu a {

    text-decoration: none;

    color: #F2F2F2;

    background-color: #252525;

    padding: .8rem 1.5rem;

    border-radius: .5rem;

    border: .08rem solid #555555;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: .1rem;

}



.menu a:hover {

    background-color: #FF6A00;

    color: #FFFFFF;

}


/*==================================================
   PÁGINA ACTUAL
==================================================*/


.activo {

    background-color: #FF6A00 !important;

    color: #FFFFFF;

}

/*==================================================
   BANNER PRINCIPAL
==================================================*/


.banner {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.banner img {

    width: 100%;

    height: auto;

    border-radius: 1rem;

    border: .15rem solid #333333;

}



/*==================================================
   BLOQUES DE INFORMACIÓN
==================================================*/


.caja {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    background-color: #1A1A1A;

    padding: 2rem;

    border-radius: 1rem;

    border-left: .4rem solid #FF6A00;

}



/*==================================================
   TÍTULOS
==================================================*/


.caja h1 {

    color: #FF6A00;

    font-size: 2.5rem;

    text-transform: uppercase;

}



.caja h2 {

    color: #FF6A00;

    font-size: 2rem;

    text-transform: uppercase;

}



.caja h3 {

    color: #FFFFFF;

    font-size: 1.3rem;

}



/*==================================================
   TEXTOS
==================================================*/


.caja p {

    color: #F2F2F2;

    text-align: justify;

    font-size: 1rem;

    letter-spacing: .05rem;

}



/*==================================================
   TARJETAS FLEXBOX
==================================================*/


.tarjetas {

    width: 100%;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    gap: 2rem;

    flex-wrap: wrap;

}



/*==================================================
   TARJETA INDIVIDUAL
==================================================*/


.tarjeta {

    flex: 1;

    min-width: 18rem;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    background-color: #252525;

    padding: 1.5rem;

    border-radius: 1rem;

    border: .08rem solid #444444;

}



.tarjeta:hover {

    background-color: #303030;

}



.tarjeta img {

    width: 100%;

    height: auto;

    border-radius: .8rem;

}



/*==================================================
   GALERÍA DE IMÁGENES
==================================================*/


.galeria {

    display: flex;

    flex-direction: row;

    justify-content: center;

    flex-wrap: wrap;

    gap: 1.5rem;

}



.galeria img {

    width: 30%;

    border-radius: .8rem;

    border: .1rem solid #555555;

}



/*==================================================
   TABLAS
==================================================*/


.tabla {

    width: 100%;

    overflow: hidden;

}



table {

    width: 100%;

    border-collapse: collapse;

}



th {

    background-color: #FF6A00;

    color: #FFFFFF;

    padding: 1rem;

    text-align: center;

}



td {

    background-color: #252525;

    color: #FFFFFF;

    padding: 1rem;

    text-align: center;

    border: .08rem solid #444444;

}



tr:hover td {

    background-color: #303030;

}



/*==================================================
   VIDEOS
==================================================*/


.video {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.video video {

    width: 80%;

    border-radius: 1rem;

    border: .15rem solid #333333;

}



/*==================================================
   PIE DE PÁGINA
==================================================*/


.pie {

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 1rem;

    background-color: #1A1A1A;

    padding: 2rem;

    border-radius: 1rem;

    text-align: center;

}



.pie h3 {

    color: #FF6A00;

    font-size: 1.5rem;

}



.pie p {

    color: #B5B5B5;

}

.caja h2 {

    border-bottom: .15rem solid #FF6A00;

    padding-bottom: .5rem;

}