/* ========================= */
/* LORE PAGE */
/* ========================= */

.lore-page{
    overflow-x:hidden;
}

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

.lore-hero{

    min-height:100vh;
    width:100%;

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    background:url('../assets/img/fondobase.png') center/cover no-repeat;

    padding:120px 40px;
}

/* overlay para legibilidad */

.lore-hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        to right,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.6) 35%,
        rgba(0,0,0,0.3) 60%,
        rgba(0,0,0,0) 80%
    );

    z-index:1;
}

/* ========================= */
/* CONTENT GRID */
/* ========================= */

.lore-content{

    position:relative;

    z-index:2;

    width:min(1300px,92vw);

    display:grid;

    grid-template-columns:520px 340px;

    gap:100px;

    align-items:center;
}

/* ========================= */
/* TEXT */
/* ========================= */

.lore-left h1{

    font-size:clamp(70px,5vw,120px);

    line-height:0.9;

    margin-bottom:28px;

    letter-spacing:2px;
}

.lore-left p{

    font-size:clamp(16px,1vw,18px);

    line-height:1.85;

    opacity:.9;

    max-width:480px;
}

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

.lore-center{

    display:flex;
    flex-direction:column;

    gap:22px;

    position:relative;
}

.lore-button{

    position:relative;

    display:inline-block;

    color:white;

    text-decoration:none;

    font-size:16px;

    letter-spacing:2.5px;

    font-weight:600;

    padding:8px 0;

    transition:
        transform .25s ease,
        color .25s ease;

    z-index:3;
}

/* líneas largas elegantes */

.lore-button::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    height:1px;

    width:100vw;

    background:rgba(255,255,255,0.25);

    z-index:1;

    transition:background .25s ease;
}

.lore-button:hover{

    transform:translateX(8px);

    color:#ff2a2a;
}

.lore-button:hover::after{

    background:#ff2a2a;
}

/* ========================= */
/* ZOMBIE */
/* ========================= */

.lore-zombie{

    position:absolute;

    right:0;
    bottom:0;

    height:clamp(520px,45vw,900px);

    transform:translateX(10%);

    pointer-events:none;

    z-index:10;
}

/* ========================= */
/* DESKTOP SCALE CONTROL */
/* (reduce zombie con zoom) */
/* ========================= */

@media (max-width:1600px){

.lore-zombie{
    height:clamp(480px,42vw,780px);
}

}

@media (max-width:1400px){

.lore-zombie{
    height:clamp(420px,38vw,650px);
}

}

@media (max-width:1200px){

.lore-zombie{
    height:clamp(360px,34vw,520px);
}

}

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

@media (max-width:1000px){

.lore-content{

    grid-template-columns:1fr;

    gap:60px;

    max-width:600px;
}

.lore-center{
    margin-top:10px;
}

.lore-zombie{

    height:clamp(300px,30vw,420px);

    transform:translateX(35%);

    opacity:.2;
}

}

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width:768px){

.lore-hero{

    padding:120px 30px 80px;
}

.lore-left h1{

    font-size:48px;
}

.lore-left p{

    font-size:15px;
}

.lore-content{

    width:100%;
}

.lore-button::after{

    width:100%;
}

.lore-zombie{

    display:none;
}

}