:root{
    --body-background-bottom-color:#191919;
    --body-background-gradient: linear-gradient(to bottom,var(--body-background-top-color),var(--body-background-mid-color),var(--body-background-bottom-color));
    --body-background-mid-color:#0c0c0c;
    --body-background-top-color:#000000;
    --h2-text-color:#E0E0E0;
    --main-text-color:#EDEDED;
    --header-height:20vh;
}
body{
    background: var(--body-background-gradient);
    /* height:100vh; */
}
main{
    /* border:solid white 1px; */
    margin:22vh 0 0 0;
    padding:0 0 0 0;
    height:64dvh;
    width:100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}
main::-webkit-scrollbar {
    display: none;
}
section{
    /* border:solid red 1px; */
    align-content:end;
    height:100%;
    padding:0 0 0 0;
    display: flex;
    flex-direction: column; /* Alinea los hijos (h2, container) uno sobre otro */
        
    /* Centrado Vertical */
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* scroll-margin-top:var(--header-height); */ /* NUEVO */
    width:100%;
}
#welcome-section{
    width:96%;
}
.external-container{
    /* border:solid white 1px; */
    position:relative;
    /* margin: 0 auto 6vh auto; */
    margin:0 0 0 0;
    width:100%;
}
.fighters-box{
    /* border:solid white 1px; */
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    gap:2rem;
    height:45vh;
    justify-content:center;
    margin: 0 0 0 0;
    overflow-x:scroll;
    padding:0 0 0 0;
}
.fighters-box::-webkit-scrollbar {
    display: none;
}
.displacement-indicator {
    animation: pulse 2s infinite;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    display:block;
    height: /* 17rem */50%;
    min-width: .6rem;
    position:absolute;
    /* right:0; */
    left:96%;
    top:37.5%/* 50% */;
    transform: translate(-50%, -80%);
    z-index: 9997;
}
#welcome-external-container .displacement-indicator{
    top:25%;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(247, 159, 121, 0.7);
  }
  70% {
    transform: scale(1.3);
    box-shadow: 0 0 0 10px rgba(247, 159, 121, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(247, 159, 121, 0);
  }
}
h2{
    /* border:solid white 1px; */
    color:var(--h2-text-color);
    font-size: xx-large;
    width:98%;
    margin: 0 auto 2vh auto;
}
#h2-strikers{
    font-size: x-large;
}
header{
    /* border:solid white 1px; */
    background-color: var(--body-background-top-color);
    height:20vh;
    left:0;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:9999;
}
#logo-image{
    /* border:solid white 1px; */
    max-height:100%;
    object-fit:cover;
    width:auto;
}
#text-changer-button{
    background-color: black;
    border: solid 1px white;
    color: white;
    cursor: pointer;
    height:2rem;
    width:10rem;
    padding:.5rem;
    margin:0 0 .5rem 1rem;
    /* width:24%; */
}
#welcome-external-container{
    height:80%;        
    position:relative;
    /* border:solid green 1px; */
    padding:0 0 0 0;
    /* margin:0 0 8vh 0; */
    margin:0 0 0 0;
}
#welcome-external-container .displacement-indicator{
    left:100%;
}
#welcome-container{    
    /* overflow-y: scroll; */
    padding: 0 1rem 0 1rem;
    display:flex;
    flex-direction:column;
    overflow-x: scroll;
    height:94.5%;
}
#welcome-container::-webkit-scrollbar {
    display: none;
}
#welcome-container p{
    /* border:solid red 1px; */
    color:var(--main-text-color);
    column-count:2;
    column-gap:1.5rem;
    max-height:98%;
    min-height:98%;
}
#welcome-container p span{
    /* border:solid white 1px; */
    font-size:x-large;
}
#welcome-message{
    margin:0 0 0 0;
}
#welcome-explanation{
    max-height:64vh;
    margin:0 0 0 0;
}
#button-panel{
    /* border:solid white 1px; */
    align-items: center;  
    background-color: var(--body-background-top-color);
    bottom:0;
    display:flex;
    height:6vh;
    justify-content:space-evenly;
    left:.0rem;
    position:fixed;
    width:100%;
    z-index:9999;
}
#button-panel button{
    background-color: black;
    border: solid 1px white;
    color: white;
    cursor: pointer;
    height:70%;
    padding-left:0rem;
    padding: 0 0 0 0;
    width:24%;
    font-size:2vw;
}
/* CSS para CELULAR estándar */
@media only screen and (max-width:400px){
    .fighters-box{
        height:50vh;
    }
 }
/* CSS para CELULAR en vista HORIZONTAL */
@media screen and (max-height:480px){
    header{
        width:20vw;
        height:30vh;
        background-color:transparent;
    }
    #logo-image{
        /* border:solid white 1px; */
    }
    section{
        /* border:solid white 1px; */
        height:86vh;
        padding-bottom:3vh;
        padding-top:9vh;
    }
    #welcome-section{
        padding-top:0;
        padding-bottom:9vh;
    }
    #strikers-section{
        /* border:solid white 1px; */
        /* padding: 0 0 0 0; */
        position:relative;
    }
    #welcome-section{
        display:flex;
        flex-direction:row;
        align-items: flex-start;
    }
    #welcome-container{
        height:95vh;
        margin: 0 0 0 auto;
        width:73vw;        
    }
    #welcome-message{
        /* border:solid white 1px; */
        margin: 0 0 0 0;
    }
    h2{
        /* border:solid white 1px; */
        position:relative;
        top:30vh;
        margin: 0 0 0 0;
        width:18vw;
        text-align:center;

    }
    #h2-strikers{
        /* border:solid white 1px; */
        position:absolute;
        top:26vh;
        font-size:x-large;
    }
    #h2-grapplers{
        font-size:x-large;
    }
    .external-container{
        /* border:solid white 1px; */
        width:75vw;
        top:0%;
        margin: auto 0 0 auto;
    }
    #strikers-external-container{
        /* border:solid blue 1px; */
        margin:0 0 0 auto;
    }
    .fighters-box{
        /* border:solid white 1px; */
        height:75vh;
        margin:0 0 0 2rem;
    }
    #button-panel{
        flex-direction:column;
        height:40vh;
        left:1vw;
        bottom:3vh;
        width: 18vw;
    }
    #button-panel button{
        width:100%;
        height:24%;
    }
}
@media screen and (min-width:992px){
    header{
        /* border:solid white 1px; */
        background-color: transparent;
        max-width:30vh;
        margin: 0 0 0 4vh;
    }
    #logo-image{
        max-height:30vh;
    }
    main{
        /* border:solid white 1px; */
        margin:0 0 0 0;
        height:98vh;
        width: 100%;
    }
    section{
        /* border:solid white 1px; */
        height:98%;
        padding: 0 0 2vh 0;
    }
    #welcome-external-container{
        max-width: 85vw;
        margin:9rem 0 0 19vw;
    }
    #text-changer-button{
        margin:0 0 .5rem 0;
    }
    #welcome-container{
        /* border:solid white 1px; */
        width:100%;
        padding:0 0 0 0;
        margin:0 0 0 0;
    }
    #welcome-container p{
        font-size: x-large;
        /* border:solid red 1px; */
    }
    #welcome-container p span{
        font-size:2vw;
    }
    #welcome-message{
        /* border:solid blue 1px; */
        padding-bottom: 0rem;
        margin-bottom: 0rem;
    }
    h2{
        /* border:solid white 1px; */
        font-size: 6rem;
        margin:0 0 10vh 0;
        /* padding:0 0 0 20%; */
        padding:0 0 0 0;
/*      display:flex;
        align-items:flex-end; */
        line-height:4rem;
        width:75%;
    }
    #h2-strikers{
        font-size:4rem;
        line-height:2.7rem;
    }
    .external-container{
        margin: 4.5rem 0 0 auto;
        width:80%;
    }
    .fighters-box{
        /* border:solid white 1px; */
        gap:4rem;
        height:65vh;
        padding:0 0 0 0;
        /* align-items:stretch; */
    }
    .displacement-indicator {
        /* top:25%; */
    }
    #button-panel{
        /* border:solid white 1px; */
        flex-direction:column;
        height:40vh;
        left:1.5vw;
        bottom:3vh;
        width: 15vw;
    }
    #button-panel button{
        /* font-size:xx-large; */
        height:24%;
        width:100%;
    }
}