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

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



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

.gtxz-header{

    position:fixed; /* antes fixed */
    top:0;
    left:0;

    width:100%;
    height:90px;

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

    padding:0 60px;

    overflow:hidden;

    z-index:20000;

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

    backdrop-filter: blur(8px);

}

/* ========================= */
/* FONDO PRINCIPAL           */
/* ========================= */

.gtxz-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        115deg,
        #000000 0%,
        #000000 42%,
        #18000d 48%,
        #f30075 100%
    );

    z-index:-4;

}

/* ========================= */
/* TEXTURA GRAFFITI          */
/* ========================= */

.gtxz-header::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at 90% 20%,
        rgba(255,255,255,.06),
                    transparent 30%
    ),

    radial-gradient(
        circle at 75% 80%,
        rgba(255,255,255,.05),
                    transparent 25%
    ),

    repeating-linear-gradient(
        -35deg,
        transparent 0px,
        transparent 18px,
        rgba(255,255,255,.025) 19px,
                              rgba(255,255,255,.025) 20px
    );

    z-index:-3;

    opacity:.8;

}

/* ========================= */
/* CYBER LINES               */
/* ========================= */

.gtxz-header .cyber-lines{

    position:absolute;
    inset:0;

    pointer-events:none;

    z-index:-2;

}

.gtxz-header .cyber-lines::before{

    content:"";

    position:absolute;

    right:15%;
    top:20px;

    width:200px;
    height:1px;

    background:
    linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.8),
                    transparent
    );

}

.gtxz-header .cyber-lines::after{

    content:"";

    position:absolute;

    right:8%;
    bottom:25px;

    width:120px;
    height:1px;

    background:
    linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.8),
                    transparent
    );

}

/* ========================= */
/* MAGENTA GLOW              */
/* ========================= */

.gtxz-header .pink-glow{

    position:absolute;

    right:-150px;
    top:-120px;

    width:400px;
    height:300px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(243,0,117,.25),
                    transparent 70%
    );

    z-index:-1;

    pointer-events:none;

}

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

.logo{

    font-family:"Covered By Your Grace", cursive;

    font-size:2.5rem;

    color:#fff;

    letter-spacing:2px;

    line-height:1;

    user-select:none;

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

}

.logo span{

    color:#F30075;

    text-shadow:
    0 0 10px #F30075,
    0 0 20px #F30075,
    0 0 40px #F30075;

}

/* ========================= */
/* SOCIAL ICONS              */
/* ========================= */

.platforms{

    display:flex;
    align-items:center;
    gap:30px;

}

.platforms a{

    color:#fff;

    font-size:1.5rem;

    transition:.35s ease;

}

.platforms a:hover{

    color:#F30075;

    transform:translateY(-4px);

    text-shadow:
    0 0 10px #F30075,
    0 0 25px #F30075;

}

/* ========================= */
/* SEPARADORES               */
/* ========================= */

.platforms::before,
.platforms::after{

    content:"";

    width:1px;
    height:35px;

    background:
    linear-gradient(
        transparent,
        rgba(255,255,255,.5),
                    transparent
    );

}

.platforms::before{
    margin-right:10px;
}

.platforms::after{
    margin-left:10px;
}

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

.menu{

    display:flex;
    gap:35px;

}

.menu a{

    position:relative;

    text-decoration:none;

    font-family:"Covered By Your Grace", cursive;

    font-size:2rem;

    color:#000;

    transition:.35s ease;

}

.menu a::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-6px;

    width:0;
    height:2px;

    background:#fff;

    transform:translateX(-50%);

    transition:.35s ease;

}

.menu a:hover{

    color:#fff;

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

}

.menu a:hover::after{

    width:100%;

}

/* ========================= */
/* DETALLE GRAFFITI          */
/* ========================= */

.menu::before{

    content:"//";

    position:absolute;

    right:420px;

    color:rgba(255,255,255,.15);

    font-size:1.4rem;

    letter-spacing:4px;

}





/* ////////////////////////////////// RESPONSIVE ////////////////////////////// */

/* ========================= */
/* HAMBURGUESA               */
/* ========================= */

.menu-toggle{

    display:none;

    width:52px;
    height:52px;

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

    border:1px solid rgba(255,255,255,.15);

    border-radius:12px;

    backdrop-filter:blur(10px);

    cursor:pointer;

    position:fixed;

    top:19px;
    right:25px;

    z-index:999999;

    transition:.3s ease;

}

.menu-toggle:hover{

    border-color:#F30075;

    box-shadow:
    0 0 15px rgba(243,0,117,.4);

}

.menu-toggle span{

    display:block;

    width:30px;
    height:3px;

    margin:6px auto;

    background:#fff;

    transition:.4s ease;

}

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

.mobile-menu{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    background:
    linear-gradient(
        135deg,
        #000000,
        #080808,
        #14000c,
        #F30075
    );

    display:flex;
    flex-direction:column;

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

    gap:40px;

    z-index:15000;

    opacity:0;
    visibility:hidden;

    transform:translateY(-100%);

    transition:
    transform .5s ease,
    opacity .5s ease;

    overflow:hidden;
    /*PADDING AÑADIDO PARA MOVIL WP */
    padding-top:90px;

}

/* ========================= */
/* TEXTURA GAMING            */
/* ========================= */

.mobile-menu::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 25px,
        rgba(255,255,255,.02) 26px,
                              rgba(255,255,255,.02) 27px
    );

}

/* ========================= */
/* GLOW MAGENTA              */
/* ========================= */

.mobile-menu::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(243,0,117,.25),
                    transparent 70%
    );

    top:-150px;
    right:-100px;

}


/* ========================= */
/* GLITCH OVERLAY            */
/* ========================= */

.mobile-menu.active::before{

    animation:glitchScreen .35s ease;

}

@keyframes glitchScreen{

    0%{
        transform:translateX(-40px);
    }

    25%{
        transform:translateX(25px);
    }

    50%{
        transform:translateX(-15px);
    }

    75%{
        transform:translateX(8px);
    }

    100%{
        transform:none;
    }

}







/* ========================= */
/* ACTIVE                    */
/* ========================= */

.mobile-menu.active{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

}

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

.mobile-menu nav{

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:25px;

    position:relative;

    z-index:2;

}

.mobile-menu nav a{

    position:relative;

    font-family:"Covered By Your Grace", cursive;

    font-size:4rem;

    color:#fff;

    text-decoration:none;

    transform:translateY(40px);

    opacity:0;

    transition:.6s ease;

}


.mobile-menu nav a::before{

    content:"//";

    position:absolute;

    left:-35px;

    color:#F30075;

    opacity:0;

    transition:.3s;

}

.mobile-menu nav a:hover::before{

    opacity:1;

}


.mobile-menu.active nav a{

    opacity:1;

    transform:translateY(0);

}

/* Entrada escalonada */

.mobile-menu nav a:nth-child(1){
    transition-delay:.1s;
}

.mobile-menu nav a:nth-child(2){
    transition-delay:.2s;
}

.mobile-menu nav a:nth-child(3){
    transition-delay:.3s;
}

.mobile-menu nav a:nth-child(4){
    transition-delay:.4s;
}

.mobile-menu nav a:hover{

    color:#F30075;

    text-shadow:
    0 0 10px #F30075,
    0 0 25px #F30075,
    0 0 40px #F30075;

}

/* ========================= */
/* ICONOS                    */
/* ========================= */

.mobile-social{

    display:flex;

    gap:30px;

    position:relative;

    z-index:2;

}

.mobile-social a{

    color:#fff;

}

.mobile-social i{

    font-size:1.8rem;

    transition:.3s ease;

}

.mobile-social i:hover{

    color:#F30075;

    transform:translateY(-4px);

}

/* ========================= */
/* ICONO X                   */
/* ========================= */

.menu-toggle.active{

    background:rgba(243,0,117,.12);

    border-color:#F30075;

}

.menu-toggle.active span:nth-child(1){

    transform:
    translateY(9px)
    rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:
    translateY(-9px)
    rotate(-45deg);

}




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

.mobile-title{

    position:relative;

    z-index:2;

    font-family:"Covered By Your Grace", cursive;

    font-size:5rem;

    line-height:1;

    color:#fff;

    margin-bottom:20px;

    opacity:0;

    transform:translateY(-40px);

    transition:.6s ease;

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

}

.mobile-title span{

    color:#F30075;

    text-shadow:
    0 0 10px #F30075,
    0 0 25px #F30075,
    0 0 50px #F30075;

}

.mobile-menu.active .mobile-title{

    opacity:1;

    transform:translateY(0);

}

/* ========================= */
/* GLITCH TITLE              */
/* ========================= */

.mobile-menu.active .mobile-title{

    animation:
    titleReveal .6s ease,
    titleGlitch .35s ease;

}

@keyframes titleReveal{

    from{

        opacity:0;
        transform:translateY(-40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes titleGlitch{

    0%{
        transform:translateX(-6px);
    }

    25%{
        transform:translateX(5px);
    }

    50%{
        transform:translateX(-3px);
    }

    75%{
        transform:translateX(2px);
    }

    100%{
        transform:none;
    }

}


/* ========================= */
/* BREAKPOINT                */
/* ========================= */

@media (max-width:1100px){

    .menu{
        display:none;
    }

    .platforms{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .logo{
        font-size:2.4rem;
    }

}

@media (max-width:768px){

    .mobile-title{
        font-size:4rem;
    }

    .gtxz-header{
        padding:0 25px;
    }

    .logo{
        font-size:2rem;
    }

    .mobile-menu nav a{
        font-size:3.5rem;
    }

}

@media (max-width:480px){

    .logo{
        font-size:1.8rem;
    }

    .mobile-menu nav a{
        font-size:3rem;
    }

    .mobile-social{
        gap:20px;
    }

    .mobile-social i{
        font-size:1.5rem;
    }

    .mobile-title{
        font-size:3rem;
    }

}
/* ========================================== */
/* ✎ ADAPTARSE A WORDPRESS - MODIFICA         */
/* ========================================== */



/* Código para integrar a wp *//* Empuja el contenido justo después del header (sin espacios extra) */
.gtxz-header {
    position: fixed;
    top: 0;
    /* el resto de propiedades se mantienen */
}

/* Este es el truco: añade un padding-top al body con la altura exacta del header */
body {
    padding-top: 90px; /* o el valor real que mida tu header */
}

/* Si el body no funciona por el tema, usa el contenedor principal de Elementor */
.elementor {
    padding-top: 90px;
}

/* ========================================== */
/* 🛡️ BLINDAJE WORDPRESS: HAMBURGUESA         */
/* ========================================== */
/* Anula márgenes, paddings o transforms que el tema inyecte COMPATIBLIDAD CON WP*/
body .gtxz-header .menu-toggle,
.elementor .gtxz-header .menu-toggle {
    position: fixed !important;
    top: 19px !important;
    right: 25px !important;
    left: auto !important;
    margin: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}