/* =======================================
   NISMO LEGACY
   Hoja de estilos principal
======================================= */


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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* =======================================
   ESTILOS GENERALES
======================================= */

html{

    scroll-behavior: smooth;

}

body{

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

    background: #0b0b0b;

    color: #ffffff;

    line-height: 1.7;

}



/* =======================================
   ENLACES
======================================= */

a{

    text-decoration: none;

    color: white;

    transition: 0.35s;

}



/* =======================================
   IMÁGENES
======================================= */

img{

    max-width: 100%;

    display: block;

}



/* =======================================
   LISTAS
======================================= */

ul{

    list-style: none;

}



/* =======================================
   CONTENEDOR GENERAL
======================================= */

main{

    width: 90%;

    max-width: 1400px;

    margin: auto;

}



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

h1{

    font-size: 3rem;

    margin-bottom: 20px;

}

h2{

    font-size: 2.3rem;

    margin-bottom: 20px;

}

h3{

    font-size: 1.3rem;

    margin-bottom: 15px;

}

p{

    font-size: 1rem;

    color: #d8d8d8;

}



/* =======================================
   TÍTULOS DE SECCIONES
======================================= */

.titulo-seccion{

    text-align: center;

    margin: 90px 0 50px;

}

.titulo-seccion h2{

    color: white;

    letter-spacing: 2px;

    text-transform: uppercase;

}



/* Línea decorativa */

.linea{

    width: 130px;

    height: 4px;

    margin: 15px auto 30px;

    border-radius: 30px;

    background: linear-gradient(90deg,#ff0000,#ffffff,#ff0000);

    box-shadow:
    0 0 12px red,
    0 0 25px red;

}



/* =======================================
   ANIMACIÓN GENERAL
======================================= */

section{

    animation: aparecer 0.8s ease;

}

@keyframes aparecer{

    from{

        opacity:0;

        transform: translateY(40px);

    }

    to{

        opacity:1;

        transform: translateY(0);

    }

}



/* =======================================
   BARRA DE DESPLAZAMIENTO
======================================= */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#ff0000;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ff4040;

}



/* =======================================
   SELECCIÓN DE TEXTO
======================================= */

::selection{

    background:#ff0000;

    color:white;

}
/* =======================================
   HEADER
======================================= */

header{

    position: sticky;

    top: 0;

    z-index: 1000;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 7%;

    background: rgba(10,10,10,0.95);

    backdrop-filter: blur(12px);

    border-bottom: 2px solid rgba(255,0,0,0.35);

    box-shadow: 0 0 25px rgba(255,0,0,0.15);

}



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

.logo img{

    width: 170px;

    transition: 0.4s;

    cursor: pointer;

}

.logo img:hover{

    transform: scale(1.08);

    filter: drop-shadow(0 0 12px red);

}



/* =======================================
   MENÚ
======================================= */

nav ul{

    display: flex;

    align-items: center;

    gap: 15px;

}

nav ul li{

    list-style: none;

}



/* =======================================
   BOTONES DEL MENÚ
======================================= */

nav ul li a{

    display: inline-block;

    padding: 12px 22px;

    border-radius: 35px;

    border: 2px solid transparent;

    color: white;

    font-weight: bold;

    letter-spacing: 1px;

    transition: all .35s ease;

}



/* Hover */

nav ul li a:hover{

    color: white;

    border-color: #ff0000;

    background: rgba(255,0,0,0.08);

    transform: scale(1.08);

    box-shadow:
    0 0 12px red,
    0 0 22px red,
    0 0 40px rgba(255,0,0,.7);

}



/* Página activa */

nav ul li a.activo{

    color: white;

    border: 2px solid red;

    background: rgba(255,0,0,0.12);

    box-shadow:
    0 0 10px red,
    0 0 25px red;

}



/* =======================================
   BANNER GENERAL
======================================= */

.banner,
.banner-gtr,
.banner-370z,
.banner-z,
.banner-sentra{

    position: relative;

    width: 100%;

    height: 88vh;

    overflow: hidden;

}



/* Imagen */

.banner img,
.banner-gtr img,
.banner-370z img,
.banner-z img,
.banner-sentra img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: brightness(45%);

}



/* Texto */

.banner-texto{

    position: absolute;

    top: 50%;

    left: 8%;

    transform: translateY(-50%);

    max-width: 650px;

}

.banner-texto h1{

    font-size: 4rem;

    text-shadow:
    0 0 12px red,
    0 0 25px red;

}

.banner-texto h2{

    color: #ffffff;

    margin-bottom: 25px;

}

.banner-texto p{

    font-size: 1.15rem;

    color: #ececec;

    text-align: justify;

}



/* =======================================
   EFECTO DE ENTRADA
======================================= */

.banner-texto{

    animation: aparecerBanner 1.2s ease;

}

@keyframes aparecerBanner{

    from{

        opacity:0;

        transform:translate(-60px,-50%);

    }

    to{

        opacity:1;

        transform:translate(0,-50%);

    }

}
/* =======================================
   DATOS PRINCIPALES
======================================= */

.datos-principales{

    display: grid;

    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));

    gap: 25px;

    margin: 70px 0;

}



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

.tarjeta-dato,
.tarjeta-especificacion,
.tarjeta-tecnologia,
.tarjeta-curiosidad{

    background: rgba(30,30,30,.88);

    border: 2px solid rgba(255,255,255,.08);

    border-radius: 22px;

    padding: 30px;

    transition: .45s;

    text-align: center;

    backdrop-filter: blur(6px);

    overflow: hidden;

}



/* Hover */

.tarjeta-dato:hover,
.tarjeta-especificacion:hover,
.tarjeta-tecnologia:hover,
.tarjeta-curiosidad:hover{

    transform: translateY(-12px) scale(1.02);

    border-color: red;

    box-shadow:
    0 0 15px red,
    0 0 35px rgba(255,0,0,.65);

}



/* =======================================
   TEXTO TARJETAS
======================================= */

.tarjeta-dato h3,
.tarjeta-especificacion h3,
.tarjeta-tecnologia h3,
.tarjeta-curiosidad h3{

    color:white;

    margin-bottom:15px;

}

.tarjeta-dato p,
.tarjeta-especificacion p,
.tarjeta-tecnologia p,
.tarjeta-curiosidad p{

    color:#d7d7d7;

}



/* =======================================
   CONTENEDORES
======================================= */

.contenedor-historia,
.contenedor-diseno,
.contenedor-interior{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

    margin:70px 0;

    flex-wrap:wrap;

}



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

.texto-historia,
.texto-diseno,
.texto-interior{

    flex:1;

    min-width:320px;

}

.texto-historia p,
.texto-diseno p,
.texto-interior p{

    margin-bottom:20px;

    text-align:justify;

}



/* =======================================
   IMÁGENES GRANDES
======================================= */

.imagen-historia,
.imagen-diseno,
.imagen-interior{

    flex:1;

    min-width:320px;

}



/* =======================================
   IMÁGENES
======================================= */

.imagen-historia img,
.imagen-diseno img,
.imagen-interior img{

    width:100%;

    border-radius:20px;

    transition:.45s;

    border:2px solid rgba(255,255,255,.12);

    box-shadow:0 0 15px rgba(255,0,0,.18);

}



/* Hover imágenes */

.imagen-historia img:hover,
.imagen-diseno img:hover,
.imagen-interior img:hover{

    transform:scale(1.04);

    border-color:red;

    box-shadow:
    0 0 18px red,
    0 0 40px rgba(255,0,0,.75);

}



/* =======================================
   ESPECIFICACIONES
======================================= */

.contenedor-especificaciones{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

    margin-top:50px;

}



/* =======================================
   TECNOLOGÍA
======================================= */

.contenedor-tecnologia{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:45px;

}



/* =======================================
   CURIOSIDADES
======================================= */

.contenedor-curiosidades{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

    margin-top:45px;

}
/* =======================================
   GALERÍA
======================================= */

.contenedor-galeria-auto{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

    margin-top:45px;

}

.contenedor-galeria-auto img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:18px;

    cursor:pointer;

    transition:.45s;

    border:2px solid rgba(255,255,255,.10);

    box-shadow:0 0 12px rgba(255,0,0,.20);

}

.contenedor-galeria-auto img:hover{

    transform:scale(1.06);

    border-color:red;

    box-shadow:
    0 0 18px red,
    0 0 40px rgba(255,0,0,.75);

    filter:brightness(110%);

}



/* =======================================
   AUDIO
======================================= */

.audio{

    text-align:center;

    margin-top:90px;

}

.audio audio{

    width:80%;

    max-width:700px;

    margin-top:25px;

}



/* =======================================
   VIDEO
======================================= */

.video{

    text-align:center;

    margin-top:90px;

}

.video video{

    width:100%;

    max-width:900px;

    border-radius:20px;

    border:2px solid rgba(255,255,255,.12);

    margin-top:30px;

    box-shadow:
    0 0 18px rgba(255,0,0,.25);

    transition:.4s;

}

.video video:hover{

    border-color:red;

    box-shadow:
    0 0 18px red,
    0 0 45px rgba(255,0,0,.80);

}



/* =======================================
   DESCRIPCIÓN MULTIMEDIA
======================================= */

.descripcion-multimedia{

    max-width:800px;

    margin:auto;

    text-align:center;

}



/* =======================================
   FRASE FINAL
======================================= */

.frase-final-auto{

    text-align:center;

    margin:110px 0 70px;

    padding:50px;

    border-radius:25px;

    background:rgba(25,25,25,.90);

    border:2px solid rgba(255,255,255,.08);

    box-shadow:0 0 18px rgba(255,0,0,.18);

}

.frase-final-auto h2{

    color:white;

    font-style:italic;

    text-shadow:
    0 0 12px red;

}

.frase-final-auto p{

    margin-top:18px;

    letter-spacing:3px;

    text-transform:uppercase;

}



/* =======================================
   BOTONES
======================================= */

.botones-finales{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:80px;

}

.boton-principal,
.boton-secundario{

    padding:16px 35px;

    border-radius:40px;

    border:2px solid red;

    color:white;

    font-weight:bold;

    transition:.40s;

    background:rgba(255,0,0,.08);

}

.boton-principal:hover,
.boton-secundario:hover{

    transform:scale(1.10);

    box-shadow:
    0 0 15px red,
    0 0 30px red,
    0 0 55px rgba(255,0,0,.80);

}



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

.footer-logo{

    width:180px;

    margin-bottom:20px;

}
/* =======================================
   FOOTER
======================================= */

footer{

    margin-top:120px;

    background:linear-gradient(to bottom,#151515,#080808);

    border-top:2px solid rgba(255,0,0,.30);

    padding-top:60px;

}



/* =======================================
   CONTENEDOR FOOTER
======================================= */

.footer-contenedor{

    width:90%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:40px;

}



/* =======================================
   COLUMNAS
======================================= */

.footer-columna h3{

    color:white;

    margin-bottom:25px;

    text-transform:uppercase;

    letter-spacing:2px;

}

.footer-columna p{

    color:#cfcfcf;

    text-align:justify;

    line-height:1.8;

}



/* =======================================
   LISTAS
======================================= */

.footer-columna ul{

    padding:0;

}

.footer-columna li{

    margin-bottom:15px;

}



/* =======================================
   ENLACES
======================================= */

.footer-columna a{

    color:#d9d9d9;

    transition:.35s;

}

.footer-columna a:hover{

    color:white;

    padding-left:8px;

    text-shadow:
    0 0 10px red,
    0 0 20px red;

}



/* =======================================
   LÍNEA DECORATIVA
======================================= */

.linea-footer{

    width:260px;

    height:4px;

    margin:0 auto 25px;

    border-radius:30px;

    background:linear-gradient(90deg,
    transparent,
    red,
    white,
    red,
    transparent);

    box-shadow:
    0 0 12px red,
    0 0 28px red;

}



/* =======================================
   PIE FINAL
======================================= */

.footer-final{

    text-align:center;

    margin-top:60px;

    padding:35px 20px;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer-final p{

    color:#bdbdbd;

    letter-spacing:2px;

}



/* =======================================
   EFECTOS FOOTER
======================================= */

.footer-columna{

    transition:.35s;

}

.footer-columna:hover{

    transform:translateY(-5px);

}



/* =======================================
   ESPACIADO GENERAL
======================================= */

section{

    padding-top:20px;

    padding-bottom:20px;

}



/* =======================================
   SOMBRAS SUAVES
======================================= */

.tarjeta-dato,
.tarjeta-especificacion,
.tarjeta-tecnologia,
.tarjeta-curiosidad,
.frase-final-auto{

    box-shadow:
    0 8px 20px rgba(0,0,0,.35);

}



/* =======================================
   EFECTO SUAVE EN TODA LA WEB
======================================= */

*{

    transition:
    color .3s,
    background .3s,
    border .3s,
    transform .3s,
    box-shadow .3s;

}
/* =======================================
   DISEÑO RESPONSIVO
======================================= */


/* =======================================
   TABLET
======================================= */

@media (max-width: 992px){
    .contenedor-modelos{
        grid-template-columns: repeat(2,1fr);
    }

    header{

        flex-direction: column;

        gap: 20px;

        padding: 20px;

    }

    nav ul{

        flex-wrap: wrap;

        justify-content: center;

    }
    .contenedor-modelos{
        grid-template-columns: 2,1fr;
    }
    
    .modelos{
        width: 100%;
        display: block;
        grid-template-columns: repeat(2,1fr);
        justify-items: center;
        gap: 40px;
        clear: both;
    }
    .auto-circulo{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .auto-circulo img{
        width: 220px;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 50%;
    }

    .banner,
    .banner-gtr,
    .banner-370z,
    .banner-z,
    .banner-sentra{

        height: 65vh;

    }

    .banner-texto{

        left: 5%;

        max-width: 90%;

    }

    .banner-texto h1{

        font-size: 3rem;

    }

    .banner-texto h2{

        font-size: 2rem;

    }

    .contenedor-historia,
    .contenedor-diseno,
    .contenedor-interior{

        flex-direction: column;

        text-align: center;

    }

    .texto-historia,
    .texto-diseno,
    .texto-interior{

        min-width: 100%;

    }

    .texto-historia p,
    .texto-diseno p,
    .texto-interior p{

        text-align: center;

    }

    .imagen-historia,
    .imagen-diseno,
    .imagen-interior{

        width: 100%;

    }

    .footer-contenedor{

        grid-template-columns: repeat(2,1fr);

    }
    .modelos{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

    justify-items:center;

}

.auto-circulo{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.auto-circulo img{

    width:220px;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:50%;

}

}



/* =======================================
   CELULAR
======================================= */

@media (max-width: 768px){

    body{

        overflow-x: hidden;

    }

    header{
        flex-direction:column;

        padding:12px 10px;

        gap:10px;

    }


    .logo img{

        width:120px;

    }


    nav ul{

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

        gap:8px;

    }


    nav ul li a{

        width:auto;

        padding:8px 14px;

        font-size:.85rem;

    }


        
        


    

   

    .banner,
    .banner-gtr,
    .banner-370z,
    .banner-z,
    .banner-sentra{

        height: 60vh;

    }

    .banner-texto{

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

        width: 90%;

        text-align: center;

    }

    .banner-texto h1{

        font-size: 2.2rem;

    }

    .banner-texto h2{

        font-size: 1.3rem;

    }

    .banner-texto p{

        font-size: .95rem;

        text-align: center;

    }

    h2{

        font-size: 1.8rem;

    }

    .datos-principales{

        grid-template-columns: 1fr;

    }

    .contenedor-especificaciones{

        grid-template-columns: 1fr;

    }

    .contenedor-tecnologia{

        grid-template-columns: 1fr;

    }

    .contenedor-curiosidades{

        grid-template-columns: 1fr;

    }

    .contenedor-galeria-auto{

        grid-template-columns: 1fr;

    }

    .contenedor-galeria-auto img{

        height: auto;

    }

    .audio audio{

        width: 100%;

    }

    .video video{

        width: 100%;

    }

    .botones-finales{

        flex-direction: column;

        align-items: center;

    }

    .boton-principal,
    .boton-secundario{

        width: 90%;

        text-align: center;

    }

    .footer-contenedor{

        grid-template-columns: 1fr;

        text-align: center;

    }

    .footer-columna p{

        text-align: center;

    }

}



/* =======================================
   CELULARES PEQUEÑOS
======================================= */

@media (max-width: 480px){

    .banner-texto h1{

        font-size: 1.8rem;

    }

    .banner-texto h2{

        font-size: 1.1rem;

    }

    .banner-texto p{

        font-size: .9rem;

    }

    h2{

        font-size: 1.5rem;

    }

    .tarjeta-dato,
    .tarjeta-especificacion,
    .tarjeta-tecnologia,
    .tarjeta-curiosidad{

        padding: 20px;

    }

    .frase-final-auto{

        padding: 30px 20px;

    }

}
/* =======================================
   COLORES PERSONALIZADOS POR VEHÍCULO
======================================= */


/* GT-R NISMO 🔴 */

.pagina-gtr .linea,
.pagina-gtr .activo{

    background:#ff0000;

    border-color:#ff0000;

    box-shadow:
    0 0 15px #ff0000,
    0 0 35px #ff0000;

}



/* 370Z NISMO 🟠 */

.pagina-370z .linea,
.pagina-370z .activo{

    background:#ff6600;

    border-color:#ff6600;

    box-shadow:
    0 0 15px #ff6600,
    0 0 35px #ff6600;

}


.pagina-370z .tarjeta-dato:hover,
.pagina-370z .tarjeta-especificacion:hover,
.pagina-370z .tarjeta-tecnologia:hover,
.pagina-370z .tarjeta-curiosidad:hover{

    border-color:#ff6600;

    box-shadow:
    0 0 15px #ff6600,
    0 0 40px #ff6600;

}



/* Z NISMO 🔵 */

.pagina-z .linea,
.pagina-z .activo{

    background:#008cff;

    border-color:#008cff;

    box-shadow:
    0 0 15px #008cff,
    0 0 35px #008cff;

}


.pagina-z .tarjeta-dato:hover,
.pagina-z .tarjeta-especificacion:hover,
.pagina-z .tarjeta-tecnologia:hover,
.pagina-z .tarjeta-curiosidad:hover{

    border-color:#008cff;

    box-shadow:
    0 0 15px #008cff,
    0 0 40px #008cff;

}



/* Sentra NISMO 🟢 */

.pagina-sentra .linea,
.pagina-sentra .activo{

    background:#00ff66;

    border-color:#00ff66;

    box-shadow:
    0 0 15px #00ff66,
    0 0 35px #00ff66;

}


.pagina-sentra .tarjeta-dato:hover,
.pagina-sentra .tarjeta-especificacion:hover,
.pagina-sentra .tarjeta-tecnologia:hover,
.pagina-sentra .tarjeta-curiosidad:hover{

    border-color:#00ff66;

    box-shadow:
    0 0 15px #00ff66,
    0 0 40px #00ff66;

}
.banner-texto .boton-principal{
    display: inline-block;
    margin-top: 35px;
}
/* =======================================
   CÍRCULOS DE MODELOS INDEX
======================================= */

.contenedor-modelos{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;
    justify-items: center;

    margin-top: 50px;

}


.auto-circulo{

    text-align:center;

    cursor:pointer;

}


.auto-circulo img{

    width:230px;

    height:230px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #ff0000;

    box-shadow:
    0 0 15px red,
    0 0 35px rgba(255,0,0,.6);

    transition:.45s;

}


.auto-circulo:hover img{

    transform:scale(1.12);

    box-shadow:
    0 0 25px red,
    0 0 60px red,
    0 0 90px rgba(255,0,0,.8);

}


.auto-circulo h3{

    margin-top:25px;

    color:white;

    text-shadow:
    0 0 10px red;

}
/* GT-R */

.auto-circulo:nth-child(1) img{

    border-color:#ff0000;

}


/* 370Z */

.auto-circulo:nth-child(2) img{

    border-color:#ff6600;

    box-shadow:
    0 0 15px #ff6600;

}


/* Z */

.auto-circulo:nth-child(3) img{

    border-color:#008cff;

    box-shadow:
    0 0 15px #008cff;

}


/* Sentra */

.auto-circulo:nth-child(4) img{

    border-color:#00ff66;

    box-shadow:
    0 0 15px #00ff66;

}
@media(max-width:768px){

    .modelos{

        grid-template-columns:1fr;

    }


    .auto-circulo img{

        width:220px;

        height:220px;

    }

}
/* =======================================
   MODELOS EN CELULAR
======================================= */

/* =======================================
   MODELOS EN CELULAR
======================================= */

@media (max-width:768px){

    .contenedor-modelos{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:50px;

    }

    .modelo{

        width:100%;

        max-width:320px;

        text-align:center;

    }

    .auto-circulo img{

        width:230px;

        height:230px;

        aspect-ratio:1/1;

        object-fit:cover;

        border-radius:50%;

    }

}

.modelo{

    text-align:center;

    width:100%;

    max-width:260px;

}

.auto-circulo{

    display:flex;

    justify-content:center;

    align-items:center;

}

.auto-circulo img{

    width:220px;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:50%;

}
.contenedor-galeria{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:20px;

    margin-top:40px;

}

.contenedor-galeria img{

    width:100%;

    height:230px;

    object-fit:cover;

    border-radius:18px;

}