/* =========================================================
NEXATA INSIGHT MEDIA STUDIO
ESTILO CATEGORÍAS
========================================================= */

/* =========================================================
VARIABLES
========================================================= */

:root {


--bg:
    #050b18;

--bg-secondary:
    #07152d;

--header:
    #031a3d;

--card:
    rgba(3, 18, 43, 0.82);

--card-border:
    rgba(255,255,255,0.08);

--white:
    #ffffff;

--text:
    #e8f1ff;

--muted:
    #9aaac2;

--blue:
    #00a3ff;

--cyan:
    #06b6d4;

--blue-soft:
    rgba(0,163,255,0.14);

--black:
    rgba(0,0,0,0.45);

--radius:
    18px;

--icon-size:
    34px;

--shadow:
    0 12px 35px rgba(0,0,0,0.45);


}

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

* {

  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

html {

scroll-behavior: smooth;

}

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

body {


min-height: 100vh;

font-family:
    Arial,
    Helvetica,
    sans-serif;

color:
    var(--text);

line-height:
    1.6;

margin:
    20px;

background:

    linear-gradient(
        rgba(3,8,20,0.84),
        rgba(3,8,20,0.92)
    ),

    url("FONDO.jpg")
    center center /
    cover
    fixed
    no-repeat;

}

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

.header-desktop {


width: 100%;

min-height: 62px;

background:

    linear-gradient(
        135deg,
        rgba(3,26,61,0.97),
        rgba(4,40,82,0.94)
    );

border:
    1px solid
    rgba(255,255,255,0.08);

display:
    flex;

align-items:
    center;

justify-content:
    space-between;

padding:
    10px 22px;

border-radius:
    50px;

box-shadow:
    0 8px 30px rgba(0,0,0,0.35);

backdrop-filter:
    blur(12px);

}

/* =========================================================
IZQUIERDA
========================================================= */

.left {

display:
    flex;

align-items:
    center;

gap:
    10px;

min-width:
    270px;


}

.logo {


width:
    34px;

height:
    34px;

object-fit:
    contain;


}

.title {


color:
    var(--white);

font-size:
    13px;

font-weight:
    700;

letter-spacing:
    1px;

white-space:
    nowrap;


}

/* =========================================================
BOTÓN INICIO
========================================================= */

.center-list ul {


list-style:
    none;

display:
    flex;

align-items:
    center;

justify-content:
    center;


}

.center-list li a {


display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

padding:
    8px 17px;

color:
    var(--white);

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

border:
    1px solid
    rgba(255,255,255,0.09);

border-radius:
    12px;

text-decoration:
    none;

font-size:
    14px;

font-weight:
    700;

transition:
    all .25s ease;


}

.center-list li a:hover {


background:
    var(--blue-soft);

border-color:
    rgba(0,163,255,0.45);

transform:
    translateY(-2px);

box-shadow:
    0 6px 20px rgba(0,163,255,0.16);

}

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

.center-icons {

display:
    flex;

align-items:
    center;

gap:
    10px;

}

.icon-btn {

width:
    var(--icon-size);

height:
    var(--icon-size);

display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

border:
    1px solid
    rgba(255,255,255,0.1);

border-radius:
    50%;

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

padding:
    7px;

cursor:
    pointer;

transition:
    transform .2s ease,
    box-shadow .2s ease;

}

.icon-btn:hover {

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

box-shadow:
    0 5px 18px rgba(0,163,255,0.25);

}

.icon-btn img {


width:
    100%;

height:
    100%;

object-fit:
    contain;


}

/* =========================================================
COPIADO
========================================================= */

.icon-btn.show {


position:
    relative;


}

.icon-btn.show::after {


content:
    "Copiado";

position:
    absolute;

top:
    -38px;

left:
    50%;

transform:
    translateX(-50%);

background:
    #020817;

color:
    white;

padding:
    5px 9px;

border-radius:
    7px;

font-size:
    11px;

white-space:
    nowrap;

border:
    1px solid
    rgba(255,255,255,0.1);


}

/* =========================================================
NIMS
========================================================= */

.header-desktop .right {


min-width:
    270px;

text-align:
    right;


}

.header-desktop .right .short {


color:
    rgba(255,255,255,0.75);

font-size:
    13px;

font-weight:
    700;

letter-spacing:
    2px;


}

/* =========================================================
FILTROS
========================================================= */

.filter-input {


position:
    absolute;

width:
    1px;

height:
    1px;

opacity:
    0;


}

.filter {


max-width:
    1050px;

margin:
    25px auto 22px;

padding:
    7px;

display:
    flex;

flex-wrap:
    wrap;

justify-content:
    center;

gap:
    8px;

background:
    rgba(3,18,43,0.5);

border:
    1px solid
    rgba(255,255,255,0.06);

border-radius:
    18px;

backdrop-filter:
    blur(10px);


}

.chip {


padding:
    8px 16px;

border-radius:
    999px;

color:
    rgba(255,255,255,0.72);

background:
    transparent;

border:
    1px solid
    transparent;

cursor:
    pointer;

font-size:
    12px;

font-weight:
    700;

letter-spacing:
    .5px;

transition:
    all .22s ease;

}

.chip:hover {


color:
    white;

background:
    rgba(0,163,255,0.08);


}

/* =========================================================
FILTRO ACTIVO
========================================================= */

#filter-all:checked ~ .filter label[for="filter-all"],
#filter-1:checked ~ .filter label[for="filter-1"],
#filter-2:checked ~ .filter label[for="filter-2"],
#filter-3:checked ~ .filter label[for="filter-3"],
#filter-4:checked ~ .filter label[for="filter-4"],
#filter-5:checked ~ .filter label[for="filter-5"],
#filter-6:checked ~ .filter label[for="filter-6"] {


color:
    white;

background:

    linear-gradient(
        90deg,
        rgba(0,163,255,0.25),
        rgba(6,182,212,0.12)
    );

border-color:
    rgba(0,163,255,0.35);

box-shadow:
    0 5px 18px rgba(0,163,255,0.12);


}

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

.gallery {

width:
    min(92%, 1100px);

margin:
    0 auto 50px;

display:
    grid;

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

gap:
    24px;


}

/* =========================================================
TARJETA
========================================================= */

.card {

position:
    relative;

overflow:
    hidden;

background:
    var(--card);

border:
    1px solid
    var(--card-border);

border-radius:
    var(--radius);

box-shadow:
    var(--shadow);

backdrop-filter:
    blur(12px);

transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;


}

.card:hover {


transform:
    translateY(-7px);

border-color:
    rgba(0,163,255,0.28);

box-shadow:
    0 20px 50px rgba(0,0,0,0.58),
    0 0 25px rgba(0,163,255,0.08);

}

/* =========================================================
IMAGEN
========================================================= */

.card-image {


position:
    relative;

overflow:
    hidden;


}

.card-image img {


width:
    100%;

height:
    185px;

object-fit:
    cover;

display:
    block;

transition:
    transform .4s ease;

}

.card:hover .card-image img {


transform:
    scale(1.04);


}

/* =========================================================
ETIQUETA
========================================================= */

.game-tag {


position:
    absolute;

top:
    12px;

left:
    12px;

padding:
    5px 10px;

background:
    rgba(0,10,25,0.82);

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

border-radius:
    999px;

color:
    white;

font-size:
    10px;

font-weight:
    700;

letter-spacing:
    1px;

backdrop-filter:
    blur(8px);


}

/* =========================================================
CONTENIDO
========================================================= */

.card-content {


padding:
    18px;


}

.card-top {


display:
    flex;

justify-content:
    space-between;

align-items:
    center;

margin-bottom:
    8px;


}

.category {


color:
    var(--blue);

font-size:
    10px;

font-weight:
    700;

letter-spacing:
    1px;


}

.status {

color:
    #5ee7f7;

font-size:
    9px;

font-weight:
    700;


}

.card-content h3 {


color:
    white;

font-size:
    22px;

margin-bottom:
    8px;

letter-spacing:
    .5px;


}

.card-content p {


color:
    var(--muted);

font-size:
    13px;

line-height:
    1.65;


}

/* =========================================================
BOTÓN JUGAR
========================================================= */

.play-button {


display:
    flex;

align-items:
    center;

justify-content:
    space-between;

margin-top:
    18px;

padding:
    11px 15px;

color:
    white;

background:

    linear-gradient(
        90deg,
        #006bb3,
        #008fd5
    );

border:
    1px solid
    rgba(255,255,255,0.1);

border-radius:
    11px;

text-decoration:
    none;

font-size:
    12px;

font-weight:
    700;

letter-spacing:
    1px;

transition:
    all .22s ease;


}

.play-button span {


font-size:
    18px;

transition:
    transform .22s ease;

}

.play-button:hover {

transform:
    translateY(-2px);

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


}

.play-button:hover span {


transform:
    translateX(5px);


}

/* =========================================================
FILTRADO
========================================================= */

#filter-1:checked ~ .gallery .card {

display:
    none;


}

#filter-1:checked ~ .gallery .card.cat-1 {


display:
    block;


}

#filter-2:checked ~ .gallery .card {


display:
    none;

}

#filter-2:checked ~ .gallery .card.cat-2 {


display:
    block;


}

#filter-3:checked ~ .gallery .card {


display:
    none;


}

#filter-3:checked ~ .gallery .card.cat-3 {


display:
    block;


}

#filter-4:checked ~ .gallery .card {


display:
    none;

}

#filter-4:checked ~ .gallery .card.cat-4 {


display:
    block;


}

#filter-5:checked ~ .gallery .card {


display:
    none;


}

#filter-5:checked ~ .gallery .card.cat-5 {


display:
    block;


}

#filter-6:checked ~ .gallery .card {

display:
    none;

}

#filter-6:checked ~ .gallery .card.cat-6 {

display:
    block;

}

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

footer {

max-width:
    1100px;

margin:
    40px auto 15px;

padding:
    17px;

text-align:
    center;

background:
    rgba(3,26,61,0.9);

border:
    1px solid
    rgba(255,255,255,0.07);

border-radius:
    30px;

box-shadow:
    0 8px 25px rgba(0,0,0,0.3);

color:
    rgba(255,255,255,0.65);

font-size:
    11px;

}

footer a {

color:
    rgba(255,255,255,0.82);

text-decoration:
    none;

}

footer a:hover {


color:
    var(--blue);


}

.separator {

margin:
    0 6px;

opacity:
    .35;

}

/* =========================================================
CRÉDITO
========================================================= */

.bg-credit {

position:
    fixed;

right:
    12px;

bottom:
    8px;

z-index:
    9999;

padding:
    5px 9px;

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

border:
    1px solid
    rgba(255,255,255,0.06);

border-radius:
    7px;

color:
    rgba(255,255,255,0.65);

font-size:
    10px;

font-style:
    italic;

backdrop-filter:
    blur(6px);

}

.bg-credit a {

color:
    rgba(255,255,255,0.8);

text-decoration:
    none;

}

/* =========================================================
HEADER MÓVIL
========================================================= */

.header-mobile {


display:
    none;


}

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

@media (max-width: 768px) {


body {

    margin:
        10px;

}


.header-desktop {

    display:
        none !important;

}


.header-mobile {

    display:
        block;

    width:
        100%;

    padding:
        16px;

    background:

        linear-gradient(
            135deg,
            rgba(3,26,61,0.98),
            rgba(4,40,82,0.95)
        );

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        22px;

    box-shadow:
        0 8px 30px rgba(0,0,0,0.4);

}


.mobile-row {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    text-align:
        center;

}


.hero-logo {

    width:
        52px;

    height:
        52px;

    object-fit:
        contain;

}


.center-mobile ul {

    list-style:
        none;

}


.center-mobile li a {

    display:
        inline-flex;

    padding:
        9px 18px;

    color:
        white;

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

    border:
        1px solid
        rgba(255,255,255,0.1);

    border-radius:
        11px;

    font-size:
        13px;

    font-weight:
        700;

    text-decoration:
        none;

}


.hero-icons {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

}


.hero-icons .icon-btn {

    width:
        42px;

    height:
        42px;

}


.filter {

    margin-top:
        18px;

    padding:
        8px;

    gap:
        6px;

}


.chip {

    padding:
        7px 11px;

    font-size:
        10px;

}


.gallery {

    width:
        96%;

    grid-template-columns:
        1fr;

    gap:
        18px;

}


.card-image img {

    height:
        190px;

}


.card-content {

    padding:
        16px;

}


.card-content h3 {

    font-size:
        20px;

}


.bg-credit {

    position:
        static;

    width:
        fit-content;

    max-width:
        100%;

    margin:
        15px auto 5px;

    text-align:
        center;

}


footer {

    margin-top:
        30px;

    border-radius:
        20px;

}

}