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

body{
    background-color: #000;
    font-family: 'Poppins', sans-serif;
    color: white;
    overflow-x: hidden;
}

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

.hero-section{

    position: relative;

    min-height: 60vh;

    background:
    linear-gradient(
    to bottom,
    #000000,
    #050816);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 140px 0 80px;

}

/* OVERLAY */

.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,255,255,0.08), transparent);
}

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

.hero-logo{
    width: 350px;
    margin-bottom: 20px;
    filter: drop-shadow(0px 0px 20px cyan);
}

/* =========================
   TITULO
========================= */

.hero-title{

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

    font-size: 5rem;

    font-weight: 800;

    color: cyan;

    text-shadow:
    0 0 18px cyan;

    letter-spacing: 1px;

}

/* =========================
   DESCRIPCION
========================= */

.hero-description{
    font-size: 1.2rem;
    color: #d1d1d1;
    margin-top: 20px;
    margin-bottom: 35px;
}

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

.hero-buttons{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* BOTON CYAN */

.btn-cyan{
    background-color: cyan;
    color: black;
    padding: 12px 28px;
    font-weight: 600;
    border-radius: 50px;
    transition: 0.4s;
    border: none;
}

.btn-cyan:hover{
    background-color: #00f7ff;
    color: black;
    transform: translateY(-5px);
    box-shadow: 0 0 25px cyan;
}
/* BOTON OUTLINE */

.btn-outline-light{
    padding: 12px 28px;
    border-radius: 50px;
    transition: 0.4s;
}

.btn-outline-light:hover{
    transform: translateY(-5px);
}

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

.videos-section{
    padding: 100px 0;
    background-color: #050816;
}

/* TITULOS */

.section-title h2{

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

    font-size: 3rem;

    font-weight: 800;

    color: cyan;

    margin-bottom: 10px;

    text-shadow:
    0 0 15px cyan;

}

.section-title p{
    color: #cfcfcf;
    margin-bottom: 50px;
}

/* VIDEO CARD */

.video-card{
    background-color: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,255,255,0.15);
    border-radius: 20px;
    overflow: hidden;
    transition: 0.4s;
    height: 100%;
}

/* HOVER */

.video-card:hover{
    transform: translateY(-10px);
    box-shadow: 0px 0px 25px rgba(0,255,255,0.3);
}

/* IMAGEN */

.video-card img{
    width: 100%;
    height: 220px;
    object-fit: cover;
}
/* VIDEO CONTAINER */
#videos-container{

    position: relative;

    z-index: 10;

}
/* CONTENIDO */

.video-content{
    padding: 25px;
    text-align: center;
}

.video-content h3{
    margin-bottom: 20px;
    color: white;
}

/* =========================
   NAVBAR
========================= */

.custom-navbar{
    background-color: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,255,255,0.2);
    box-shadow: 0px 0px 15px rgba(0,255,255,0.08);
    z-index: 999;
}

/* LOGO NAVBAR */

.logo-text{
    font-family: 'Akronim', cursive;
    font-size: 2rem;
    color: cyan !important;
    text-shadow: 0px 0px 10px cyan;
    position: relative;
    z-index: 1000;
}
/* =========================
   NAVBAR LOGO
========================= */

.navbar-logo{

    height: 60px;

    width: auto;

    filter:
    drop-shadow(0 0 10px cyan);

}
/* LINKS */

.nav-link{
    color: #ffffff !important;
    margin-left: 15px;
    transition: 0.3s;
    font-weight: 500;
    text-shadow: 0px 0px 5px rgba(0,255,255,0.3);
}

.nav-link:hover{
    color: cyan !important;
    text-shadow: 0px 0px 10px cyan;
}

/* BOTON MOVIL */

.navbar-toggler{
    border: none;
    color: cyan;
    font-size: 2rem;
}

.navbar-toggler:focus{
    box-shadow: none;
}

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

.footer-section{
    background-color: #000;
    padding: 80px 0 30px;
    border-top: 1px solid rgba(0,255,255,0.1);
}

/* LOGO */

.footer-logo{
    font-family: 'Akronim', cursive;
    color: cyan;
    font-size: 3rem;
    text-shadow: 0px 0px 15px cyan;
}

/* TEXTO */

.footer-text{
    color: #cfcfcf;
    margin-top: 15px;
    line-height: 1.8;
}

/* TITULOS */

.footer-title{

    font-family: 'Akronim', cursive;

    font-size: 3rem;

    color: cyan;

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

    margin-bottom: 25px;

}

/* LINKS */

.footer-links{
    list-style: none;
    padding: 0;
}

.footer-links li{
    margin-bottom: 10px;
}

.footer-links a{
    text-decoration: none;
    color: white;
    transition: 0.3s;
}

.footer-links a:hover{
    color: cyan;
    padding-left: 5px;
}

/* REDES */

.social-icons{
    display: flex;
    gap: 15px;
}

.social-icons a{
    width: 50px;
    height: 50px;
    border: 1px solid rgba(0,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: cyan;
    font-size: 1.3rem;
    transition: 0.4s;
}

.social-icons a:hover{
    background-color: cyan;
    color: black;
    transform: translateY(-5px);
}

/* COPYRIGHT */

.footer-bottom{
    margin-top: 50px;
    text-align: center;
    color: #999;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 20px;
}

/* =========================
   PARTICLES FIX
========================= */

#particles-js{

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: -1;

    pointer-events: none;

}

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

.hero-section{

    position: relative;

    z-index: 2;

}

.videos-section{

    position: relative;

    z-index: 5;

    padding: 80px 0;

}

#videos-container{

    position: relative;

    z-index: 10;

}

.video-card{

    position: relative;

    z-index: 20;

}

.footer-section{

    position: relative;

    z-index: 5;

}

/* =========================
   BODY FIX
========================= */

body{

    overflow-x: hidden;

}
/* =========================
   GAMING SECTION
========================= */

.gaming-section{
    padding: 100px 0;
    background: linear-gradient(to bottom, #050816, #000);
}

/* CONTENIDO */

.gaming-content h3{
    font-size: 3rem;
    color: cyan;
    margin-bottom: 25px;
    text-shadow: 0px 0px 15px cyan;
}

.gaming-content p{
    color: #d1d1d1;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* IMAGEN */

.gaming-image img{
    width: 100%;
    border: 1px solid rgba(0,255,255,0.2);
    box-shadow: 0px 0px 25px rgba(0,255,255,0.15);
    transition: 0.4s;
}

/* HOVER */

.gaming-image img:hover{
    transform: scale(1.03);
}

/* =========================
   SOCIAL SECTION
========================= */

.social-section{
    padding: 100px 0;
    background-color: #02050f;
}

/* SOCIAL CARD */

.social-card{
    background-color: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,255,255,0.15);
    border-radius: 20px;
    padding: 40px 25px;
    text-align: center;
    transition: 0.4s;
    height: 100%;
}

/* HOVER */

.social-card:hover{
    transform: translateY(-10px);
    box-shadow: 0px 0px 25px rgba(0,255,255,0.2);
}

/* ICONOS */

.social-icon{
    font-size: 4rem;
    color: cyan;
    margin-bottom: 20px;
    text-shadow: 0px 0px 15px cyan;
}

/* TITULO */

.social-card h3{
    margin-bottom: 15px;
    color: white;
}

/* TEXTO */

.social-card p{
    color: #cfcfcf;
    margin-bottom: 25px;
}

/* =========================
   STATS SECTION
========================= */

.stats-section{
    padding: 100px 0;
    background: linear-gradient(to bottom, #02050f, #000);
}

/* CARD */

.stats-card{
    background-color: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,255,255,0.15);
    border-radius: 20px;
    padding: 40px 25px;
    text-align: center;
    transition: 0.4s;
    height: 100%;
}

/* HOVER */

.stats-card:hover{
    transform: translateY(-10px);
    box-shadow: 0px 0px 25px rgba(0,255,255,0.2);
}

/* ICONOS */

.stats-card i{
    font-size: 4rem;
    color: cyan;
    margin-bottom: 20px;
    text-shadow: 0px 0px 15px cyan;
}

/* NUMEROS */

.stats-card h3{
    font-size: 3rem;
    color: white;
    margin-bottom: 10px;
}

/* TEXTO */

.stats-card p{
    color: #cfcfcf;
    margin: 0;
}

/* =========================
   ABOUT PREVIEW
========================= */

.about-preview-section{

    padding: 100px 0;

    background:
    linear-gradient(to bottom,
    #02050f,
    #000);

}

/* IMAGEN */

.about-image img{

    max-width: 320px;

    filter:
    drop-shadow(0 0 25px cyan);

}

/* TEXTO */

.about-content h2{

    color: white;

    font-size: 3rem;

    margin-bottom: 25px;

}

.about-content p{

    color: #d0d0d0;

    font-size: 1.1rem;

    line-height: 1.8;

    margin-bottom: 20px;

}

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

.about-hero-section{

    padding: 180px 0 120px;

    background:
    linear-gradient(to bottom,
    #02050f,
    #000814);

}

/* FOTO */

.about-photo-large{

    max-width: 380px;

    border-radius: 25px;

    border:
    2px solid rgba(0,255,255,0.3);

    box-shadow:
    0 0 40px rgba(0,255,255,0.5);

}

/* TITULO */

.about-title{

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

    color: cyan;

    font-size: 4rem;

    font-weight: 800;

    margin-bottom: 25px;

    text-shadow:
    0 0 20px cyan;

}

/* TEXTO */

.about-description{

    color: #d0d0d0;

    font-size: 1.15rem;

    line-height: 1.9;

    margin-bottom: 20px;

}

/* =========================
   TIMELINE
========================= */

.timeline-section{

    padding: 120px 0;

    background:
    #000814;

}

/* CONTENEDOR */

.timeline{

    position: relative;

    margin-top: 80px;

}

/* LINEA */

.timeline::before{

    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    width: 4px;

    height: 100%;

    background: cyan;

    transform: translateX(-50%);

    box-shadow:
    0 0 20px cyan;

}

/* ITEM */

.timeline-item{

    position: relative;

    width: 45%;

    padding: 30px;

    margin-bottom: 50px;

    background:
    rgba(0,0,0,0.7);

    border:
    1px solid rgba(0,255,255,0.2);

    border-radius: 20px;

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

}

/* IZQUIERDA */

.timeline-item:nth-child(odd){

    left: 0;

}

/* DERECHA */

.timeline-item:nth-child(even){

    left: 55%;

}

/* AÑO */

.timeline-item h3{

    color: cyan;

    margin-bottom: 15px;

}

/* TEXO */

.timeline-item p{

    color: #d0d0d0;

    line-height: 1.7;

}

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

@media(max-width: 991px){

    .timeline::before{

        left: 20px;

    }

    .timeline-item{

        width: 100%;

        left: 0 !important;

        padding-left: 60px;

    }

    .about-title{

        font-size: 3rem;

    }

}

/* =========================
   FIX OVERFLOW MOBILE
========================= */

html,
body{

    overflow-x: hidden;

    width: 100%;

}

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

@media(max-width:768px){

    *{

        max-width:100%;

    }

    body{

        overflow-x:hidden;

    }

    .container,
    .container-fluid{

        padding-left:15px;

        padding-right:15px;

    }

    img{

        max-width:100%;

        height:auto;

    }

}

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

@media(max-width:768px){

    .cookie-box{

        width:90% !important;

        left:5% !important;

        bottom:20px !important;

        padding:20px !important;

        border-radius:20px !important;

    }

    .cookie-box h3{

        font-size:24px !important;

    }

    .cookie-box p{

        font-size:15px !important;

        line-height:1.7;

    }

}

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

@media(max-width:768px){

    .hero h1{

        font-size:55px !important;

        line-height:1.1;

    }

    .hero p{

        font-size:18px !important;

    }

}

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

@media(max-width:768px){

    .navbar-brand{

        font-size:28px !important;

    }

    .navbar{

        padding:15px 20px;

    }

}
/* =========================
   MOBILE CARDS
========================= */

@media(max-width:768px){

    .hero-title{

        font-size:48px !important;

        line-height:1.1;

    }

    .hero-description{

        font-size:18px;

        padding:0 10px;

    }

    .card{

        border-radius:20px !important;

    }

    .card-body{

        padding:20px;

    }

    .section-title h2{

        font-size:2.2rem !important;

    }

}
/* =========================
   FUTURE MESSAGE
========================= */

.future-message{

    margin-top: 100px;

}

.future-message h3{

    color: cyan;

    font-size: 3rem;

    margin-bottom: 25px;

    text-shadow:
    0 0 20px cyan;

}

.future-message p{

    color: #d0d0d0;

    font-size: 1.2rem;

    max-width: 800px;

    margin: auto;

    line-height: 1.9;

}

 /* =========================
   HITOS DEL CANAL
========================= */

.milestones-section .timeline-item{

    width: 42%;

    padding: 35px;

    margin-bottom: 70px;

    min-height: 230px;

}

/* IZQUIERDA */

.milestones-section .timeline-item:nth-child(odd){

    left: 0;

}

/* DERECHA */

.milestones-section .timeline-item:nth-child(even){

    left: 55%;

}

/* RESPONSIVE */

@media(max-width: 991px){

    .milestones-section .timeline-item{

        width: 100%;

    }

}

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

.gaming-hero{

    min-height: 500px;

    background: #020617;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding-top: 120px;

    border-bottom:
    1px solid #00f7ff55;

}

.gaming-hero-content h1{

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

    font-size: 4.5rem;

    font-weight: 800;

    color: #00f7ff;

    text-shadow:
    0 0 20px #00f7ff;

    margin-bottom: 20px;

}

.gaming-hero-content p{

    font-size: 1.2rem;

    color: #d1d5db;

}

/* =========================
   STATS
========================= */

.gaming-stats{

    padding: 80px 0;

    background: #020617;

}

.stats-card{

    background: #06111f;

    border:
    1px solid #00f7ff33;

    border-radius: 20px;

    padding: 40px 20px;

    transition: .3s;

}

.stats-card:hover{

    transform: translateY(-10px);

    box-shadow:
    0 0 25px #00f7ff55;

}

.stats-card i{

    font-size: 3rem;

    color: #00f7ff;

    margin-bottom: 20px;

}

.stats-card h3{

    color: white;

    font-size: 2rem;

    font-weight: 700;

}

.stats-card p{

    color: #cbd5e1;

}

/* =========================
   GAMES SECTION
========================= */

.games-section{

    padding: 100px 0;

    background: #020617;

}

.section-title h2{

    font-size: 3rem;

    color: #00f7ff;

    margin-bottom: 15px;

    text-shadow:
    0 0 15px #00f7ff;

}

.section-title p{

    color: #cbd5e1;

    margin-bottom: 50px;

}

.video-card{

    background: #06111f;

    border-radius: 20px;

    overflow: hidden;

    border:
    1px solid #00f7ff22;

    transition: .3s;

    height: 100%;

}

.video-card:hover{

    transform: translateY(-10px);

    box-shadow:
    0 0 25px #00f7ff55;

}

.video-card img{

    width: 100%;

    height: 260px;

    object-fit: cover;

}

.video-content{

    padding: 25px;

    text-align: center;

}

.video-content h3{

    color: white;

    font-size: 2rem;

    margin-bottom: 15px;

    font-weight: 700;

}

.video-content p{

    color: #d1d5db;

    margin-bottom: 20px;

}

/* =========================
   BOTON CYAN
========================= */

.btn-cyan{

    background: #00f7ff;

    color: black;

    border-radius: 50px;

    padding: 12px 30px;

    font-weight: 700;

    transition: .3s;

}

.btn-cyan:hover{

    background: white;

    transform: scale(1.05);

}

/* =========================
   FINAL SECTION
========================= */

.gaming-final-section{

    padding: 100px 0;

    background: #020617;

}

.gaming-final-section h2{

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

    color: #00f7ff;

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 20px;

    text-shadow:
    0 0 15px #00f7ff;

}

.gaming-final-section p{

    color: #d1d5db;

    font-size: 1.2rem;

}

/* =========================
   COOKIE BANNER
========================= */

.cookie-banner {

    position: fixed;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    width: 90%;

    max-width: 900px;

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

    border: 1px solid #00e5ff;

    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);

    border-radius: 20px;

    padding: 25px;

    z-index: 99999;

    backdrop-filter: blur(10px);

    animation: fadeCookie 0.6s ease;

}

.cookie-content h3 {

    color: #00e5ff;

    margin-bottom: 10px;

    font-size: 24px;

}

.cookie-content p {

    color: white;

    line-height: 1.7;

    margin-bottom: 20px;

}

.cookie-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}

.cookie-buttons button {

    background: #00e5ff;

    color: black;

    border: none;

    padding: 12px 25px;

    border-radius: 12px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;

}

.cookie-buttons button:hover {

    transform: scale(1.05);

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

}

.cookie-buttons a {

    color: #00e5ff;

    text-decoration: none;

    display: flex;

    align-items: center;

    font-weight: bold;

}

@keyframes fadeCookie {

    from {

        opacity: 0;

        transform: translateX(-50%) translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateX(-50%) translateY(0px);

    }

}
/* =========================
   FIX BOTONES HERO
========================= */

.hero-section{

    position: relative;
    z-index: 2;

}

.hero-section .container{

    position: relative;
    z-index: 5;

}

.overlay{

    pointer-events: none;

}

#particles-js{

    pointer-events: none;

}
/* =========================
   ADMIN VIDEOS
========================= */

.published-videos{

    margin-top: 80px;

}

.video-admin-card{

    width: 100%;

    max-width: 350px;

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

    border:
    1px solid rgba(0,255,255,0.15);

    border-radius:
    20px;

    padding:
    20px;

    transition:
    0.4s;

}

.video-admin-card:hover{

    transform:
    translateY(-5px);

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

}

.admin-thumb{

    width:
    100%;

    height:
    180px;

    object-fit:
    cover;

    border-radius:
    15px;

    margin-bottom:
    15px;

}

.video-admin-card h3{

    color:
    white;

    font-size:
    1.5rem;

    margin-bottom:
    15px;

}

.video-admin-card p{

    color:
    #cbd5e1;

    margin-bottom:
    20px;

}

.delete-btn{

    background:
    crimson;

    color:
    white;

    border:
    none;

    padding:
    12px 25px;

    border-radius:
    12px;

    font-weight:
    700;

    cursor:
    pointer;

    transition:
    0.3s;

}

.delete-btn:hover{

    transform:
    scale(1.05);

    box-shadow:
    0 0 15px crimson;

}

#videos-list{

    display: grid;

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

    gap: 30px;

    margin-top: 40px;

    width: 100%;

}

.published-videos{

    padding-left: 40px;

    padding-right: 40px;

}

/* =========================
   BLOG DATE
========================= */

.blog-date{

    color: #94a3b8;

    font-size: 14px;

    margin-bottom: 15px;

    display: block;

}