/*==================================================
LARSGADIEL v2.0
BASE
==================================================*/

/*------------------------------
FUENTE
------------------------------*/

@font-face{
    font-family:"Pixel";
    src:url("../fonts/04B_03.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
}

/*------------------------------
RESET
------------------------------*/

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

html{
    scroll-behavior:smooth;
}

body{

    background:#070B1D;
    color:#ffffff;
    overflow-x:hidden;

    font-family:"Pixel", monospace;

}

body,
h1,h2,h3,h4,h5,h6,
p,a,
button,
nav,
li,
span{

    font-family:"Pixel", monospace;

}

/*------------------------------
IMÁGENES
------------------------------*/

img{

    display:block;
    max-width:100%;
    height:auto;

}

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

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:90px;

    display:flex;

    justify-content:space-between;
    align-items:center;

    padding:0 70px;

    background:rgba(5,6,13,.82);

    backdrop-filter:blur(12px);

    z-index:9999;

}

.logo img{

    width:170px;

}

/*------------------------------*/

nav{

    display:flex;

    align-items:center;

    gap:25px;

}

nav a{

    display:block;

}

nav img{

    height:44px;

    transition:
    transform .25s,
    filter .25s;

}

nav img:hover{

    transform:translateY(-3px) scale(1.05);

    filter:
    drop-shadow(0 0 14px #ff4db8);

}


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

/*==================================================
HERO v1.1
==================================================*/

.hero{

    position:relative;

    display:grid;

    grid-template-columns:42% 58%;

    align-items:center;

    min-height:100vh;

    max-width:1920px;

    margin:auto;

    padding:120px clamp(30px,5vw,90px) 40px;

    overflow:hidden;

    isolation:isolate;

background:

/* Estrellas pequeñas */

radial-gradient(circle at 3% 8%, rgba(255,255,255,.90) 1px, transparent 2px),
radial-gradient(circle at 8% 22%, rgba(255,255,255,.55) 1px, transparent 2px),
radial-gradient(circle at 15% 12%, rgba(255,255,255,.80) 1px, transparent 2px),
radial-gradient(circle at 24% 30%, rgba(255,255,255,.60) 1px, transparent 2px),
radial-gradient(circle at 35% 8%, rgba(255,255,255,.75) 1px, transparent 2px),
radial-gradient(circle at 48% 18%, rgba(255,255,255,.45) 1px, transparent 2px),
radial-gradient(circle at 58% 10%, rgba(255,255,255,.90) 1px, transparent 2px),
radial-gradient(circle at 70% 18%, rgba(255,255,255,.75) 1px, transparent 2px),
radial-gradient(circle at 82% 40%, rgba(255,255,255,.50) 1px, transparent 2px),
radial-gradient(circle at 92% 15%, rgba(255,255,255,.80) 1px, transparent 2px),
radial-gradient(circle at 18% 55%, rgba(255,255,255,.45) 1px, transparent 2px),
radial-gradient(circle at 32% 70%, rgba(255,255,255,.70) 1px, transparent 2px),
radial-gradient(circle at 50% 62%, rgba(255,255,255,.55) 1px, transparent 2px),
radial-gradient(circle at 66% 78%, rgba(255,255,255,.85) 1px, transparent 2px),
radial-gradient(circle at 85% 72%, rgba(255,255,255,.65) 1px, transparent 2px),
radial-gradient(circle at 96% 58%, rgba(255,255,255,.90) 1px, transparent 2px),

/* Algunas estrellas más grandes */

radial-gradient(circle at 12% 40%, rgba(255,255,255,.95) 2px, transparent 4px),
radial-gradient(circle at 42% 25%, rgba(255,255,255,.85) 2px, transparent 4px),
radial-gradient(circle at 77% 12%, rgba(255,255,255,.95) 2px, transparent 4px),
radial-gradient(circle at 72% 60%, rgba(255,255,255,.80) 2px, transparent 4px),
radial-gradient(circle at 28% 82%, rgba(255,255,255,.90) 2px, transparent 4px),

/* Halo rosa */
radial-gradient(circle at 15% 45%,
rgba(255,70,180,.35) 0%,
rgba(255,70,180,.18) 20%,
rgba(120,60,255,.10) 40%,
transparent 65%),

/* Halo azul */
radial-gradient(circle at 85% 25%,
rgba(70,170,255,.15) 0%,
transparent 45%),

/* Fondo */
linear-gradient(
180deg,
#2f2250 0%,
#161d37 40%,
#0b1024 70%,
#070b1d 100%
);

}

/* Glow grande */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 20% 40%,
    rgba(255,80,190,.12),
    transparent 40%),

    radial-gradient(circle at 80% 25%,
    rgba(120,160,255,.08),
    transparent 35%);

    pointer-events:none;

    z-index:-1;

}

/* Glow personaje */

.hero::after{

    content:"";

    position:absolute;

    right:4%;

    bottom:-180px;

    width:900px;

    height:900px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,60,180,.35),

    rgba(255,60,180,.15) 40%,

    transparent 75%);

    filter:blur(60px);

    z-index:-1;

}




/*--------------------------------*/

.hero-text{

    width:100%;

    margin-left:30px;
    max-width:620px;

    z-index:20;

}

/*--------------------------------*/

.hero-logo{

    width:clamp(360px,38vw,720px);

    display:block;

    margin-bottom:28px;

    filter:

    drop-shadow(0 0 25px rgba(255,255,255,.20));

}

/*--------------------------------*/

.hero h2{

    font-size:clamp(18px,1.6vw,28px);

    line-height:1.8;

    color:#ececec;

    margin-bottom:45px;

    text-shadow:0 0 10px rgba(255,255,255,.12);

}

/*--------------------------------*/

.hero-buttons{

    display:flex;

    gap:24px;

    flex-wrap:wrap;

}

.hero-buttons img{

    width:250px;

    height:auto;

    transition:.25s;

}

.hero-buttons img:hover{

    transform:translateY(-3px) scale(1.04);

    filter:

    drop-shadow(0 0 18px #ff52bc);

}

/*--------------------------------*/

.hero-image{

    justify-content:flex-end;

}

/*--------------------------------*/


.hero-image img{

    width:145%;

    max-width:1700px;

}

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

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

@keyframes heroGlow{

0%{

opacity:.55;

transform:translateY(-50%) scale(1);

}

50%{

opacity:1;

transform:translateY(-50%) scale(1.06);

}

100%{

opacity:.55;

transform:translateY(-50%) scale(1);

}

}



/*=============================
HISTORIA
=============================*/

#story{

    background:#0d1328;

    position:relative;

}

#story::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:linear-gradient(90deg,#ff3cac,#784ba0,#2b86c5);

}



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

#gallery{

 position:relative;

    overflow:hidden;

    background:#070b1d;

}

#gallery::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("../assets/background.png") center center/cover no-repeat;

    opacity:.58;

    filter:blur(2px);

    z-index:0;

}

#gallery>*{

    position:relative;

    z-index:1;

}


.gallery-wrapper{

    display:grid;

    grid-template-columns:90px 1fr 90px;

    align-items:center;

    gap:25px;

    margin-top:40px;

}

.gallery-arrow{

    width:70px;

    cursor:pointer;

    transition:.25s;

}

.gallery-arrow:hover{

    transform:scale(1.08);

    filter:drop-shadow(0 0 15px #ff4db8);

}

.gallery-viewer{

    width:100%;

}

.gallery-viewer img{

    width:100%;

    border-radius:18px;

    display:block;

}

.gallery-thumbs{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:30px;

    flex-wrap:wrap;

}

.thumb{

    width:120px;

    border-radius:10px;

    cursor:pointer;

    opacity:.55;

    transition:.25s;

}

.thumb.active{

    opacity:1;

    transform:scale(1.05);

    box-shadow:0 0 15px #ff4db8;

}




.grid img:hover{

    transform:scale(1.04);

    border-color:#ff4db8;

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

}



/*=============================
TRAILER
=============================*/

#trailer{

    background:#0d1328;

}

.video{

    max-width:900px;

    margin:50px auto;

    border-radius:18px;

    overflow:hidden;

    border:2px solid rgba(255,80,180,.4);

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

}

.video video{

    display:block;

    width:100%;

    height:auto;

    background:#000;

}



/*=============================
STEAM CTA
=============================*/

.cta{

    text-align:center;

    background:#070b1d;

}

.big{

    display:inline-block;

    margin-top:35px;

    transition:.25s;

}

.big:hover{

    transform:scale(1.05);

}



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

#lb{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    z-index:9999;

}

#lb img{

    max-width:90vw;

    max-height:90vh;

    border-radius:10px;

}

#lb button{

    background:none;

    border:none;

    color:white;

    font-size:55px;

    cursor:pointer;

    margin:20px;

}

#x{

    position:absolute;

    top:20px;

    right:35px;

    font-size:55px;

    cursor:pointer;

}



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

footer{

    background:#05060d;

    text-align:center;

    padding:40px;

    color:#999;

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

}

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

@media (max-width:1200px){

.hero{

grid-template-columns:46% 54%;

padding:120px 50px 30px;

}

.hero-logo{

width:clamp(420px,42vw,820px);

}

.hero-image img{

    width:155%;

    margin-right:-120px;

}

}



@media (max-width:992px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding:120px 35px 50px;

min-height:auto;

}

.hero-text{

max-width:100%;

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

margin-top:40px;

}

.hero-image img{

width:min(100%,700px);

}

.hero::before{

left:50%;

top:25%;

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

width:650px;

height:650px;

}

.hero::after{

right:50%;

bottom:-180px;

transform:translateX(50%);

width:650px;

height:650px;

}

header{

padding:15px 25px;

height:auto;

flex-direction:column;

gap:18px;

}

nav{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

nav img{

height:36px;

}

section{

padding:70px 35px;

}

section h2{

font-size:32px;

}

}



@media (max-width:768px){





.hero{

padding-top:110px;

}

.hero-logo{

width:90%;

max-width:460px;

margin:auto;

margin-bottom:30px;

}

.hero h2{

font-size:18px;

line-height:1.7;

}

.hero-buttons{

gap:15px;

}

.hero-buttons img{

height:50px;

}

.hero-image img{

width:100%;

max-width:560px;

}



.gallery-thumbs{

gap:8px;

}

.thumb{

width:90px;

}

.video{

margin:25px auto;

}

}



@media (max-width:480px){

.hero{

padding:95px 20px 30px;

}

.hero-logo{

max-width:340px;

}

.hero h2{

font-size:15px;

line-height:1.6;

}

.hero-buttons img{

height:42px;

}

.hero-image img{

max-width:420px;

}

section{

padding:60px 20px;

}

section h2{

    font-size:clamp(38px,3vw,60px);

    text-align:center;

    margin-bottom:45px;

    letter-spacing:4px;

    color:#ffffff;

    text-shadow:
        0 0 10px rgba(255,255,255,.15),
        0 0 20px rgba(255,70,180,.20);

}

.gallery-viewer img{

border-radius:10px;

}

.thumb{

width:70px;

}

.video{

border-radius:12px;

}

}



/*==================================================
HERO FX v1.1
==================================================*/

/* Halo superior */

.hero::before{

    animation:heroGlow 8s ease-in-out infinite;

}

/* Halo personaje */

.hero::after{

    animation:heroGlow2 10s ease-in-out infinite;

}

/* Viñeta */

.hero{

    box-shadow:

    inset 0 -180px 180px rgba(7,11,29,.65);

}

/* Estrellas */

.hero{

background-image:

radial-gradient(circle at 8% 15%,rgba(255,255,255,.75) 1px,transparent 2px),

radial-gradient(circle at 30% 18%,rgba(255,255,255,.45) 1px,transparent 2px),

radial-gradient(circle at 65% 10%,rgba(255,255,255,.55) 1px,transparent 2px),

radial-gradient(circle at 82% 25%,rgba(255,255,255,.45) 1px,transparent 2px),

radial-gradient(circle at 55% 45%,rgba(255,255,255,.35) 1px,transparent 2px),

radial-gradient(circle at 12% 62%,rgba(255,255,255,.55) 1px,transparent 2px),

radial-gradient(circle at 80% 75%,rgba(255,255,255,.40) 1px,transparent 2px),

radial-gradient(circle at 45% 82%,rgba(255,255,255,.35) 1px,transparent 2px),

radial-gradient(circle at 15% 50%,
rgba(255,70,180,.30) 0%,
rgba(255,70,180,.10) 20%,
transparent 55%),

radial-gradient(circle at top,
#39235f 0%,
#18213d 38%,
#070b1d 100%);

}

/* Logo */

.hero-logo{

transition:.35s;

    width:clamp(500px,45vw,900px) !important;

    max-width:none !important;

    height:auto;

    display:block;

}

.hero-logo:hover{

transform:scale(1.02);

filter:

drop-shadow(0 0 28px rgba(255,255,255,.25))

drop-shadow(0 0 35px rgba(255,70,180,.25));

}

/* Personaje */

.hero-image img{

transition:.35s;

}

.hero-image img:hover{

transform:scale(1.015);

}

/* Texto */

.hero h2{

text-shadow:

0 0 12px rgba(255,255,255,.12),

0 0 25px rgba(255,70,180,.08);

}

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

@keyframes heroGlow{

0%{

opacity:.45;

transform:scale(1);

}

50%{

opacity:.95;

transform:scale(1.08);

}

100%{

opacity:.45;

transform:scale(1);

}

}

@keyframes heroGlow2{

0%{

opacity:.55;

}

50%{

opacity:1;

}

100%{

opacity:.55;

}

}

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

.gallery-viewer{

    max-width:1100px;

    margin:50px auto 0;

}

.gallery-viewer img{

    width:100%;

    display:block;

    border-radius:18px;

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

}

.gallery-thumbs{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:25px;

    flex-wrap:wrap;

}

.thumb{

    width:120px;

    border-radius:10px;

    cursor:pointer;

    opacity:.55;

    transition:.25s;

}

.thumb:hover,

.thumb.active{

    opacity:1;

    transform:scale(1.06);

    box-shadow:0 0 15px rgba(255,70,170,.45);

}

.gallery-buttons{

    display:flex;

    justify-content:space-between;

    margin-top:25px;

    gap:20px;

}

.gallery-buttons button{

    flex:1;

    padding:14px;

    background:#1b2145;

    color:#fff;

    border:1px solid #ff4db8;

    border-radius:10px;

    cursor:pointer;

    transition:.25s;

}

.gallery-buttons button:hover{

    background:#ff4db8;

}


/*==================================================
TÍTULOS DE SECCIÓN
==================================================*/

#story h2,
#gallery h2,
#trailer h2{

    font-size:clamp(38px,3vw,60px);

    text-align:center;

    margin-bottom:45px;

    letter-spacing:4px;

    color:#fff;

    text-shadow:
        0 0 10px rgba(255,255,255,.15),
        0 0 20px rgba(255,70,180,.20);

}


#story p{

    max-width:950px;

    margin:0 auto;

    text-align:center;

    font-size:clamp(18px,1.3vw,24px);

    line-height:2;

    color:#f2f2f2;

}


/*==================================
HISTORIA NUEVA
==================================*/

.story-text{

    max-width:900px;

    margin:35px auto;

    text-align:center;

    font-size:clamp(20px,1.4vw,26px);

    line-height:2;

}

.story-image{

    display:block;

    width:min(100%,700px);

    margin:50px auto;

    border-radius:18px;

    border:none;

    box-shadow:none;

    transition:none;

}

.story-image:hover{

    transform:none;

    box-shadow:none;

}


/*==================================================
GAME DETAILS
==================================================*/

#game-info{

    max-width:1100px;

    margin:120px auto;

    padding:0 40px;

}

#game-info h2{

    text-align:center;

    font-size:clamp(42px,4vw,64px);

    margin-bottom:60px;

}

.info-table{

    max-width:900px;

    margin:0 auto;

    padding-left:100px;

}

.info-row{

    display:grid;

    grid-template-columns:280px 1fr;

    align-items:center;

    padding:18px 0;

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

}

.info-row span{

    font-size:22px;

    color:#8d93b8;

    letter-spacing:2px;

}

.info-row strong{

    font-size:26px;

    color:#ffffff;

}

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

.social-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    margin-top:35px;

}

.social-links img{

    width:40px;

    height:40px;

    transition:.25s;

}

.social-links img:hover{

    transform:translateY(-3px) scale(1.12);

    filter:drop-shadow(0 0 12px rgba(255,70,180,.7));

}


.hero-text h2{

    margin-left:100px;
	width:1400px;
	
	margin-top:18px;

    font-size:clamp(26px,2vw,36px);

    letter-spacing:3px;

    line-height:1.3;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f3f6ff 35%,
        #c8d8ff 70%,
        #9eb6ff 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    -webkit-text-stroke:0.2px #000;

    filter:drop-shadow(0 0 8px rgba(255,255,255,.20));

}


/*==================================================
MOBILE FIX v1.0
No modifica el escritorio
==================================================*/

@media (max-width:768px){

    body{

        overflow-x:hidden;

    }

    .hero{

        grid-template-columns:1fr;

        text-align:center;

        padding:85px 20px 20px;

        gap:10px;

    }

    .hero-text{

        margin:0 auto;

        max-width:100%;

    }

    .hero-logo{

    width:95% !important;

    max-width:500px !important;

    margin:20px auto 10px;
}

    .hero-text h2{

        width:auto;

        max-width:100%;

        margin:0 auto 25px;

        font-size:22px;

        letter-spacing:2px;



    }

    .hero-buttons{

        justify-content:center;

        gap:15px;

    }

    .hero-buttons img{

        width:160px;

        height:auto;

    }

    .hero-image{

        margin-top:-100px;

    }

    .hero-image img{

        width:1500%;

        max-width:1020px;

        margin:0 auto;

    }

    .gallery-wrapper{

        grid-template-columns:50px 1fr 50px;

        gap:10px;

    }

    .gallery-arrow{

        width:38px;

    }

    .thumb{

        width:70px;

    }

    .story-image{

        width:100%;

        max-width:100%;

    }

    .info-table{

        padding-left:0;

    }

    .info-row{

        grid-template-columns:1fr;

        text-align:center;

        gap:8px;

    }

    .info-row span{

        font-size:18px;

    }

    .info-row strong{

        font-size:22px;

    }

}


/*====================================
FORZAR HEADER M�VIL
====================================*/

@media screen and (max-width:768px){

    header .logo{
        display:none !important;
    }

    header{
        justify-content:center !important;
        padding:10px 15px !important;
    }

    header nav{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        gap:10px;
    }

}