/*====================================================
ARTIFICIAL OFFICIAL WEBSITE
Industrial Rock Theme
====================================================*/

/*=========================
GOOGLE FONTS
=========================*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Roboto:wght@300;400;500&display=swap');

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

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

html{
    scroll-behavior:smooth;
}

body{

    background:#050505;
    color:#d7d7d7;

    font-family:'Roboto',sans-serif;

    overflow-x:hidden;

    line-height:1.8;

}

/*=========================
VARIABLES
=========================*/

:root{

--red:#990000;
--red2:#c20000;

--black:#050505;

--black2:#101010;

--black3:#191919;

--gray:#bcbcbc;

--white:#ffffff;

--shadow:0 0 35px rgba(0,0,0,.55);

}

/*=========================
SCROLLBAR
=========================*/

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#770000;

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#aa0000;

}

/*=========================
CONTAINER
=========================*/

.container{

width:92%;

max-width:1200px;

margin:auto;

}

/*=========================
MENU
=========================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

transition:.4s;

background:rgba(0,0,0,.45);

backdrop-filter:blur(8px);

}

header.scrolled{

background:#050505;

box-shadow:0 5px 25px rgba(0,0,0,.6);

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 60px;

}

.logo{

font-family:'Oswald',sans-serif;

font-size:34px;

font-weight:700;

letter-spacing:8px;

color:white;

}

nav ul{

display:flex;

list-style:none;

gap:35px;

}

nav a{

text-decoration:none;

color:#ddd;

font-size:15px;

font-weight:500;

transition:.3s;

letter-spacing:1px;

text-transform:uppercase;

}

nav a:hover{

color:white;

}

/*=========================
HERO
=========================*/

#hero{

height:100vh;

background:

linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.90)),

url("../img/hero.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.overlay{

max-width:900px;

padding:30px;

animation:fadeUp 1.3s;

}

.overlay h1{

font-family:'Oswald';

font-size:110px;

letter-spacing:12px;

font-weight:700;

text-transform:uppercase;

color:white;

margin-bottom:20px;

}

.overlay h2{

font-size:24px;

font-weight:300;

letter-spacing:5px;

margin-bottom:25px;

color:#e2e2e2;

text-transform:uppercase;

}

.overlay p{

font-size:20px;

color:#bfbfbf;

margin-bottom:45px;

}

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

.btn{

display:inline-block;

padding:18px 55px;

background:linear-gradient(90deg,#730000,#b00000);

color:white;

text-decoration:none;

font-size:17px;

font-weight:bold;

border-radius:50px;

transition:.35s;

letter-spacing:2px;

text-transform:uppercase;

box-shadow:0 0 20px rgba(160,0,0,.4);

}

.btn:hover{

transform:translateY(-4px);

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

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

}

/*=========================
SECCIONES
=========================*/

section{

padding:120px 0;

}

section h2{

font-family:'Oswald';

font-size:52px;

text-align:center;

letter-spacing:4px;

margin-bottom:60px;

color:white;

position:relative;

}

section h2::after{

content:"";

width:120px;

height:4px;

background:var(--red);

display:block;

margin:20px auto;

}

/*=========================
BIO
=========================*/

#bio{

background:#0b0b0b;

}

#bio p{

font-size:19px;

color:#cfcfcf;

text-align:justify;

margin-bottom:30px;

}

#bio strong{

color:white;

}

#bio ul{

margin-left:30px;

margin-top:20px;

margin-bottom:30px;

}

#bio li{

margin-bottom:12px;

font-size:18px;

}

/*=========================
ANIMACION
=========================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:1000px){

nav{

padding:20px;

flex-direction:column;

gap:20px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:20px;

}

.overlay h1{

font-size:70px;

letter-spacing:6px;

}

.overlay h2{

font-size:18px;

}

section h2{

font-size:40px;

}

}

@media(max-width:700px){

.overlay h1{

font-size:48px;

}

.overlay p{

font-size:17px;

}

.btn{

padding:16px 36px;

font-size:15px;

}

#bio p{

font-size:17px;

}

}
/*====================================================
PARTE 2B
RELEASES • VIDEOS • GALERÍA
====================================================*/

/*=========================
ÚLTIMOS LANZAMIENTOS
=========================*/

#releases{

    background:#050505;

}

.cards{

    display:grid;

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

    gap:35px;

}

.release{

    background:#111;

    border:1px solid #222;

    border-radius:12px;

    overflow:hidden;

    transition:.4s;

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

    position:relative;

}

.release:hover{

    transform:translateY(-10px);

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

    border-color:#8b0000;

}

.release img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.5s;

}

.release:hover img{

    transform:scale(1.08);

}

.release h3{

    font-family:'Oswald',sans-serif;

    font-size:32px;

    color:#fff;

    letter-spacing:2px;

    padding:25px 25px 10px;

}

.release p{

    color:#bdbdbd;

    padding:0 25px 25px;

    font-size:17px;

}

.release a{

    display:block;

    margin:0 25px 30px;

    text-align:center;

    text-decoration:none;

    padding:15px;

    border-radius:40px;

    background:linear-gradient(90deg,#640000,#b00000);

    color:#fff;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:bold;

    transition:.35s;

}

.release a:hover{

    background:linear-gradient(90deg,#b00000,#ff2020);

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

}
/*=========================
Conciertos
=========================*/
#conciertos{

  padding-top:20px;

    padding-bottom:120px;

}
    background:#050505;

}

.cards{

    display:grid;

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

    gap:35px;

}

.conciertos{

    background:#111;

    border:1px solid #222;

    border-radius:12px;

    overflow:hidden;

    transition:.4s;

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

    position:relative;

}

.conciertos:hover{

    transform:translateY(-10px);

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

    border-color:#8b0000;

}

.conciertos img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.5s;

}

.conciertos:hover img{

    transform:scale(1.08);

}

.conciertos h3{

    font-family:'Oswald',sans-serif;

    font-size:32px;

    color:#fff;

    letter-spacing:2px;

    padding:25px 25px 10px;

}

.conciertos p{

    color:#bdbdbd;

    padding:0 25px 25px;

    font-size:17px;

}

.conciertos a{

    display:block;

    margin:0 25px 30px;

    text-align:center;

    text-decoration:none;

    padding:15px;

    border-radius:40px;

    background:linear-gradient(90deg,#640000,#b00000);

    color:#fff;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:bold;

    transition:.35s;

}

.conciertos a:hover{

    background:linear-gradient(90deg,#b00000,#ff2020);

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

}

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

#videos{

    background:#0d0d0d;

}

.video-grid{

    display:grid;

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

    gap:35px;

}

.video-grid iframe{

    width:100%;

    aspect-ratio:16 / 9;

    border:none;

    border-radius:12px;

    background:#000;

    transition:.35s;

    box-shadow:0 0 30px rgba(0,0,0,.55);

}

.video-grid iframe:hover{

    transform:scale(1.02);

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

}

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

#gallery{

    background:#050505;

}

.gallery{

    display:grid;

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

    gap:18px;

}

.gallery img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:10px;

    cursor:pointer;

    transition:.45s;

    border:2px solid #151515;

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

}

.gallery img:hover{

    transform:scale(1.05);

    border-color:#990000;

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

}

/*=========================
LIGHTBOX
=========================*/

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:90%;

    max-height:88vh;

    border-radius:10px;

    border:3px solid #666;

    box-shadow:0 0 50px rgba(0,0,0,.9);

}

.lightbox span{

    position:absolute;

    top:25px;

    right:40px;

    color:white;

    font-size:48px;

    cursor:pointer;

    transition:.3s;

}

.lightbox span:hover{

    color:#ff3030;

}

/*=========================
ANIMACIÓN TARJETAS
=========================*/

.release{

    animation:fadeCards .8s ease;

}

.gallery img{

    animation:fadeCards .8s ease;

}

.video-grid iframe{

    animation:fadeCards .8s ease;

}

@keyframes fadeCards{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:900px){

.video-grid{

grid-template-columns:1fr;

}

}

@media(max-width:650px){

.cards{

grid-template-columns:1fr;

}

.gallery{

grid-template-columns:1fr;

}

.release img{

height:300px;

}

.gallery img{

height:240px;

}

.release h3{

font-size:28px;

}

}
/*====================================================
PARTE 2C
PRESS KIT • REDES • FOOTER • EFECTOS
====================================================*/

/*=========================
PRESS KIT
=========================*/

#presskit{

    background:
    linear-gradient(rgba(5,5,5,.90),rgba(15,15,15,.95)),
    url("../img/presskit-bg.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    text-align:center;

}

#presskit p{

    max-width:850px;

    margin:auto;

    color:#d2d2d2;

    font-size:20px;

    line-height:1.9;

    margin-bottom:45px;

}

.download{

    display:inline-block;

    padding:20px 60px;

    border-radius:50px;

    text-decoration:none;

    color:white;

    font-weight:bold;

    font-size:18px;

    letter-spacing:3px;

    text-transform:uppercase;

    background:linear-gradient(90deg,#770000,#cc0000);

    transition:.35s;

    box-shadow:0 0 25px rgba(180,0,0,.35);

}

.download:hover{

    transform:translateY(-5px);

    background:linear-gradient(90deg,#aa0000,#ff2020);

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

}

/*=========================
REDES SOCIALES
=========================*/

#contact{

    background:#090909;

    text-align:center;

}

.social{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.social a{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:18px;

    min-height:180px;

    text-decoration:none;

    color:#ddd;

    background:#111;

    border:1px solid #222;

    border-radius:12px;

    transition:.35s;

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

}

.social a:hover{

    transform:translateY(-8px);

    border-color:#990000;

    color:#fff;

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

}

.social i{

    font-size:54px;

    transition:.35s;

}

.social a:hover i{

    transform:scale(1.15);

    color:#ff4040;

}

.social span{

    font-size:18px;

    letter-spacing:2px;

    text-transform:uppercase;

}

/*=========================
BOTÓN VOLVER
=========================*/

#back{

    background:#050505;

    padding:90px 20px;

    text-align:center;

}

#back a{

    display:inline-block;

    padding:18px 50px;

    border:2px solid #880000;

    border-radius:50px;

    color:white;

    text-decoration:none;

    font-size:17px;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.35s;

}

#back a:hover{

    background:#990000;

    border-color:#990000;

    transform:translateY(-4px);

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

}

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

footer{

    background:#020202;

    border-top:1px solid #222;

    text-align:center;

    padding:60px 20px;

}

footer h3{

    font-family:'Oswald',sans-serif;

    color:white;

    font-size:36px;

    letter-spacing:6px;

    margin-bottom:15px;

}

footer p{

    color:#8e8e8e;

    font-size:15px;

    letter-spacing:2px;

    margin:8px 0;

}

footer .copyright{

    margin-top:30px;

    color:#666;

    font-size:13px;

}

/*=========================
SEPARADOR DECORATIVO
=========================*/

.section-divider{

    width:120px;

    height:4px;

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

    margin:0 auto 60px;

    border-radius:50px;

}

/*=========================
ANIMACIONES
=========================*/

.fade{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}

.zoom{

    opacity:0;

    transform:scale(.92);

    transition:.8s;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}

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

::selection{

    background:#990000;

    color:white;

}

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

img{

    max-width:100%;

    display:block;

}

/*=========================
LINKS
=========================*/

a{

    transition:.3s;

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:900px){

    .social{

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

    }

}

@media(max-width:650px){

    .social{

        grid-template-columns:1fr;

    }

    .download{

        width:100%;

        padding:18px;

    }

    #back a{

        width:100%;

        padding:18px;

    }

    footer h3{

        font-size:28px;

    }

    .social a{

        min-height:150px;

    }

}

@media(max-width:480px){

    #presskit p{

        font-size:17px;

    }

    .social i{

        font-size:42px;

    }

    .social span{

        font-size:16px;

    }

    footer{

        padding:45px 15px;

    }

}
/* =========================
   GALERIA
========================= */


.gallery-grid{

    display:grid;

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

    gap:25px;

    margin-top:30px;

}



.gallery-item{

    overflow:hidden;

    border-radius:10px;

    cursor:pointer;

}



.gallery-item img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:0.4s;

}



.gallery-item:hover img{

    transform:scale(1.08);

}



.gallery-caption{

    padding:12px;

    text-align:center;

    font-size:14px;

}