/* =========================================================
   KRAFEX — KITS
   PRÓXIMAMENTE — NEÓN VERDE
   ========================================================= */

:root {
    --kits-bg: #0A0A0B;
    --kits-green: #39FF14;
    --kits-green-soft: #00E676;
    --kits-white: #F5F1E8;
    --kits-gray: #2A2A2E;
}

/* =========================================================
   PÁGINA
   ========================================================= */

.kits-page {
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;

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

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(57, 255, 20, .07),
            transparent 45%
        ),
        #0A0A0B;

    color: var(--kits-white);
}

/* =========================================================
   LÍNEAS DECORATIVAS
   ========================================================= */

.kits-page::before,
.kits-page::after {
    content: "";
    position: absolute;

    width: 160%;
    height: 1px;

    left: -30%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(57, 255, 20, .15),
        var(--kits-green),
        rgba(57, 255, 20, .15),
        transparent
    );

    box-shadow:
        0 0 8px rgba(57, 255, 20, .4),
        0 0 20px rgba(57, 255, 20, .2);

    transform: rotate(-18deg);
}

.kits-page::before {
    top: 28%;
}

.kits-page::after {
    bottom: 28%;
}

/* =========================================================
   CONTENEDOR
   ========================================================= */

.kits-coming-soon {
    position: relative;
    z-index: 2;

    width: min(1100px, 90%);

    padding: 70px 50px;

    text-align: center;

    border: 1px solid rgba(57, 255, 20, .35);
    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(57, 255, 20, .035),
            rgba(10, 10, 11, .95)
        );

    box-shadow:
        0 0 25px rgba(57, 255, 20, .12),
        inset 0 0 30px rgba(57, 255, 20, .025);

    backdrop-filter: blur(8px);
}

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

.kits-label {
    margin: 0 0 18px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 7px;

    color: var(--kits-green);

    text-transform: uppercase;

    text-shadow:
        0 0 5px var(--kits-green),
        0 0 15px rgba(57, 255, 20, .8);
}

/* =========================================================
   TÍTULO DIAGONAL
   ========================================================= */

.kits-title {
    margin: 0;

    display: inline-block;

    font-size: clamp(55px, 11vw, 150px);
    font-weight: 1000;
    line-height: .85;

    letter-spacing: -5px;

    color: transparent;

    -webkit-text-stroke: 2px var(--kits-green);

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        var(--kits-green) 35%,
        #00b83d 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    text-shadow:
        0 0 5px var(--kits-green),
        0 0 15px var(--kits-green),
        0 0 35px rgba(57, 255, 20, .8),
        0 0 70px rgba(57, 255, 20, .35);

    transform: rotate(-7deg);

    animation: kitsNeon 2.5s ease-in-out infinite alternate;
}

/* =========================================================
   SUBTÍTULO
   ========================================================= */

.kits-subtitle {
    margin: 45px auto 0;

    max-width: 650px;

    color: #aaa;

    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 1px;
}

/* =========================================================
   TEXTO INFERIOR
   ========================================================= */

.kits-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 30px;
    padding: 10px 18px;

    border: 1px solid rgba(57, 255, 20, .4);
    border-radius: 999px;

    color: var(--kits-green);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    box-shadow:
        0 0 12px rgba(57, 255, 20, .15);
}

/* =========================================================
   PUNTO NEÓN
   ========================================================= */

.kits-status::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--kits-green);

    box-shadow:
        0 0 6px var(--kits-green),
        0 0 15px var(--kits-green);

    animation: kitsPulse 1.4s infinite;
}

/* =========================================================
   ANIMACIÓN NEÓN
   ========================================================= */

@keyframes kitsNeon {

    0% {
        text-shadow:
            0 0 5px var(--kits-green),
            0 0 15px var(--kits-green),
            0 0 30px rgba(57, 255, 20, .7);
    }

    100% {
        text-shadow:
            0 0 8px var(--kits-green),
            0 0 25px var(--kits-green),
            0 0 50px var(--kits-green),
            0 0 90px rgba(57, 255, 20, .5);
    }
}

@keyframes kitsPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(.65);
    }
}

/* =========================================================
   DESTELLOS
   ========================================================= */

.kits-spark {
    position: absolute;

    width: 3px;
    height: 3px;

    background: var(--kits-green);

    border-radius: 50%;

    box-shadow:
        0 0 7px var(--kits-green),
        0 0 15px var(--kits-green);

    z-index: 1;

    animation: kitsSpark 3s infinite ease-in-out;
}

.kits-spark:nth-child(1) {
    top: 18%;
    left: 15%;
}

.kits-spark:nth-child(2) {
    top: 72%;
    left: 20%;
    animation-delay: .8s;
}

.kits-spark:nth-child(3) {
    top: 25%;
    right: 18%;
    animation-delay: 1.3s;
}

.kits-spark:nth-child(4) {
    bottom: 18%;
    right: 25%;
    animation-delay: 2s;
}

@keyframes kitsSpark {

    0%,
    100% {
        opacity: .2;
        transform: scale(.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.8);
    }
}

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

@media (max-width: 700px) {

    .kits-page {
        padding: 30px 18px;
    }

    .kits-coming-soon {
        width: 100%;
        padding: 55px 20px;
        border-radius: 22px;
    }

    .kits-title {
        font-size: clamp(48px, 16vw, 90px);
        letter-spacing: -3px;
        transform: rotate(-5deg);
    }

    .kits-label {
        letter-spacing: 4px;
    }

    .kits-subtitle {
        margin-top: 35px;
        font-size: 13px;
    }

    .kits-page::before {
        top: 30%;
    }

    .kits-page::after {
        bottom: 30%;
    }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kits-title,
    .kits-status::before,
    .kits-spark {
        animation: none;
    }
}