/* -- 1) Variables y fuentes -- */
:root {
    --bg-1: #1b0f2e;
    --bg-2: #1a1230;
    --bg-3: #100a1d;
    --ink: #fff;
    --ink-70: rgba(255, 255, 255, .7);
    --ink-60: rgba(255, 255, 255, .6);
    --card: rgba(255, 255, 255, .06);
    --card-border: rgba(255, 255, 255, .14);
    --accent-1: #f0abfc;
    --accent-2: #a78bfa;
    --brand-1: #de0986;
    --brand-2: #b242cd;
    --shadow: 0 10px 30px rgba(124, 58, 237, .25);
    --radius-2xl: 22px;




    /*HALLOWEEN*/
    --lfx-bg-1: #1b0f2e;
    --lfx-bg-2: #1a1230;
    --lfx-bg-3: #100a1d;
    --lfx-ink: #fff;
    --lfx-ink-60: rgba(255, 255, 255, .6);
    --lfx-fuchsia: #de0986;
    --lfx-violet: #9e7ce4;
    --lfx-card: rgba(255, 255, 255, .06);
    --lfx-card-b: rgba(255, 255, 255, .14);
    --lfx-shadow: 0 12px 40px rgba(158, 124, 228, .25);



}

@font-face {
    font-family: 'adlery';
    src: url("/src/fuentes/adlery-blockletter/Adlery-Pro-Blockletter-trial.ttf");
}

@font-face {
    font-family: 'moresugar';
    src: url("/src/fuentes/more-sugar/MoreSugar-Regular.ttf");
}

@font-face {
    font-family: 'nowregular';
    src: url("/src/fuentes/now/Now-Regular.otf");
}

@font-face {
    font-family: 'nowthin';
    src: url("/src/fuentes/now/Now-Thin.otf");
}


/* ==== Reset básico / base ==== */
*,
*::before,
*::after {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
    color: var(--ink);
    background: linear-gradient(180deg, var(--bg-1), var(--bg-2), var(--bg-3));
    background-attachment: fixed;
}

img {
    max-width: 100%;
    display: block
}


/* General */
a {
    color: inherit;
    text-decoration: none
}

/* <- corrige el comentario roto */
a:hover {
    color: #b242cd;
    text-decoration: none
}


p {
    font-family: 'nowregular';
    color: #080224;
}

.adlery {
    font-family: 'adlery'
}

.moresugar {
    font-family: 'moresugar'
}

.nowregular {
    font-family: 'nowregular'
}

.nowthin {
    font-family: 'nowthin'
}

.fw-black {
    font-weight: 900
}


/* tamaños de fuente */
.font-size16 {
    font-size: 16px
}

.font-size18 {
    font-size: 18px
}

.font-size20 {
    font-size: 20px
}

.font-size40 {
    font-size: 40px
}


/* ==== Utilidades de color/tamaño ==== */
.text-blancom {
    color: #efe8ff;
}

.text-magenta {
    color: #de0986;
}

.text-negroazulado {
    color: #080224
}

.text-moradoclaro {
    color: #9e7ce4
}

.text-amarillolfx {
    color: #ffbd59;
}

.text-justify {
    text-align: justify;
}

.object-fit-cover {
    object-fit: cover;
}

.w-40px {
    width: 40px;
}

/* <- posiblemente se borre */
.w-50px {
    width: 50px;
}

.w-20 {
    width: 20%;
}

/* <- posiblemente se borre */



/* Fondos */
.bg-primary {
    background-color: #b242cd !important;
}

.bg-magenta {
    background-color: #de0986;
}

.bg-moradoclaro {
    background-color: #9e7ce4;
}

.bg-blancom {
    background-color: #eae4ff;
    ;
}

.bg-amarillolfx {
    background-color: #ffbd59
}


/* ==== Botones (respetando Bootstrap) ==== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.1rem;
    border-radius: 14px;
    border: 1px solid transparent;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer
}

.btn-primary {
    background: linear-gradient(90deg, #de0986, #9e7ce4);
    border: 0;
    box-shadow: var(--shadow);
}

.btn-secondary {
    background: linear-gradient(90deg, #080224, #9e7ce4);
    border: 0;
    box-shadow: var(--shadow);
}

.btn-ghost {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--card-border);
    color: #fff;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.btn-glow {
    position: relative;
    --glow-color: var(--accent-1);
    --glow-spread-color: var(--accent-2);
    --btn-color: var(--brand-2);
    color: var(--glow-color);
    background-color: var(--btn-color);
    border: 2px solid var(--glow-color);
    border-radius: var(--bs-btn-border-radius, .5rem);
    box-shadow:
        0 0 12px var(--glow-color),
        0 0 28px var(--glow-spread-color),
        inset 0 0 8px var(--glow-color);
    text-shadow: 0 0 6px var(--glow-color);
    transition: box-shadow .2s, color .2s, background-color .2s;
}

.btn-glow::after {
    content: "";
    position: absolute;
    inset: auto 0 -6px 0;
    height: 18px;
    background: var(--glow-spread-color);
    filter: blur(12px);
    opacity: .45;
    pointer-events: none;
}

.btn-glow:hover {
    color: var(--btn-color);
    background-color: var(--glow-color);
}

.btn-glow:active {
    box-shadow:
        0 0 10px var(--glow-color),
        0 0 24px var(--glow-spread-color),
        inset 0 0 8px var(--glow-color);
}


.menu-color {
    background-color: #080224;
}

.bg-testimonios {
    background-image: url(/src/fondos/Fondo\ 2.png);
    background-size: cover;
}

.bg-gifmer {
    background-image: url(/src/Servicios/Streaming/b.espaciogamer.gif);
    background-size: cover;
}

.bg-fondovalo {
    background-image: url(/src/Servicios/Streaming/Bannervalolove.png);
    background-size: cover;
}

.bg-oscuro-50 {
    background-color: #0000007e;
}

.bg-oscuro-40 {
    background-color: #0000006c;
}

.custom-margin {
    margin-top: -150px;
}


.oscurecer-imagen-10 {
    filter: brightness(10%);
}

.oscurecer-imagen-20 {
    filter: brightness(20%);
}

.oscurecer-imagen-30 {
    filter: brightness(30%);
}

.oscurecer-imagen-40 {
    filter: brightness(40%);
}

.oscurecer-imagen-50 {
    filter: brightness(50%);
}

.oscurecer-imagen-60 {
    filter: brightness(60%);
}

.oscurecer-imagen-70 {
    filter: brightness(70%);
}

.oscurecer-imagen-80 {
    filter: brightness(80%);
}

.oscurecer-imagen-90 {
    filter: brightness(90%);
}




/* ==== Chips / cards comunes ==== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(255, 255, 255, .7);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    padding: .45rem .7rem
}

.card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-2xl);
    padding: 22px
}

/* KPIs */
.card-kpi .t {
    font-weight: 800;
}

.card-kpi .muted {
    color: rgba(255, 255, 255, .65);
}

.muted {
    color: var(--ink-70)
}


#MenuContent,
#MenuContent * {
    transition: all 1s;

}


/* ==== NAV “glass” con blur ==== */
.glass-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(16, 10, 29, .35);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    /* iOS */
}

.glass-nav.is-scrolled {
    background: rgba(8, 2, 36, .65);
    border-color: rgba(255, 255, 255, .2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.navbar {
    background: transparent !important;
}





/* ==== HERO ==== */
.hero {
    /* alto flexible y seguro en móvil/tablet/desktop */
    min-height: clamp(560px, 80vh, 820px);
    padding-block: clamp(32px, 6vw, 80px);
    color: #fff;
    /* fondo + viñeta sutil */
    background:
        radial-gradient(900px 500px at 80% 25%, rgba(124, 58, 237, .22), transparent 80%),
        url('/src/Servicios/Streaming/Bannervalolove.png') center/cover no-repeat;
    ;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 2, 36, .55), rgba(8, 2, 36, .85));
}

.hero-title {
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    line-height: 1.1;
}






.gradient-text {
    /* texto con gradiente */
    background: linear-gradient(90deg, #de0986, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.blob-1,
.blob-2 {
    /* blobs decorativos */
    position: absolute;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}

.blob-1 {
    right: -80px;
    top: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #de0986, transparent);
}

.blob-2 {
    left: -80px;
    bottom: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #9e7ce4, transparent);
}

.tag {
    /* Estilo del tag inclinado (si aún no lo tienes) */
    position: absolute;
    left: -10px;
    bottom: -5px;
    transform: rotate(-3deg);
    background: #de0986;
    opacity: 80%;
    border: 1px solid rgba(167, 139, 250, .35);
    padding: .5rem .7rem;
    border-radius: 12px;
    font-size: 14px;
}






/* ==== Grids utilitarias (manteniendo Bootstrap) ==== */
.cards-3 {
    display: grid;
    gap: 16px;
    margin-top: 22px
}

@media (min-width: 900px) {
    .cards-3 {
        grid-template-columns: repeat(3, 1fr)
    }
}

.cols-3 {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(1, 1fr)
}

@media (min-width: 640px) {
    .cols-3 {
        grid-template-columns: repeat(3, 1fr)
    }
}

/* ==== Galeria  encima ==== */
.over-show-text {
    overflow: hidden;
}

.over-show-text img {
    transition: all 1s;
}

.over-show-text:hover img {
    filter: brightness(50%);
}

.over-show-text .content-show-text {
    top: 88% !important;
    transition: all 1s;
    text-align: center;
    color: #efe8ff;
}

.over-show-text:hover .content-show-text {
    top: 20px !important;
}



/* General */
a {
    color: var(--color-3);
    text-decoration: none;
}

.services .icon-box:hover {
    background: #9e7ce4;
    border-color: #b242cd;
}

a:hover {
    color: #b242cd;
    text-decoration: none;
    font-family: 'moresugar'
}



/*HALLOWEEN*/
#lfx-halloween {
    background: linear-gradient(180deg, var(--lfx-bg-1), var(--lfx-bg-2), var(--lfx-bg-3));
    color: var(--lfx-ink);
    border-top: 1px solid var(--lfx-card-b);
    border-bottom: 1px solid var(--lfx-card-b);
}

.lfx-title {
    font-weight: 900;
    letter-spacing: .2px;
}

.lfx-gradient-text {
    background: linear-gradient(90deg, #f0abfc, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lfx-chip {
    display: inline-flex;
    gap: .5rem;
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--lfx-card-b);
    border-radius: 999px;
    padding: .45rem .8rem;
}

/* Cards del contador */
.lfx-card {
    background: var(--lfx-card);
    border: 1px solid var(--lfx-card-b);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--lfx-shadow);
    backdrop-filter: saturate(150%) blur(4px);
}

.lfx-num {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
    font-size: clamp(2rem, 6vw, 3.5rem);
    background: radial-gradient(60% 60% at 50% 30%, #fff, #ddd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 22px rgba(158, 124, 228, .35);
}

.lfx-label {
    color: var(--lfx-ink-60);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .8rem;
    margin-top: .35rem;
}

.lfx-btn {
    background-image: linear-gradient(90deg, var(--lfx-fuchsia), var(--lfx-violet));
    border: 0;
    box-shadow: var(--lfx-shadow);
}

.lfx-blob {
    position: absolute;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
}

.lfx-blob-1 {
    right: -80px;
    top: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--lfx-fuchsia), transparent);
}

.lfx-blob-2 {
    left: -80px;
    bottom: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--lfx-violet), transparent);
}


/* ==== Partículas halloween ==== */
#lfxParticles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

.lfx-p {
    position: absolute;
    font-size: clamp(16px, 2.6vw, 28px);
    opacity: .85;
    animation: floatY linear forwards;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35))
}

@keyframes floatY {
    from {
        transform: translateY(10%);
        opacity: 0
    }

    10% {
        opacity: .85
    }

    to {
        transform: translateY(-110%);
        opacity: 0
    }
}




/*FANTASMA NEON*/

*{
    margin: 0;
}
.container-ghost {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10em;
    text-shadow: 0px 0px 100px;
    animation: neonEffect 3s infinite linear
}
@keyframes neonEffect {
    0%,
    100% {
        color:#de0986;
    }
    25% {
        color: #a78bfa;
    }
    50% {
        color: #b242cd;
    }
    75%{
        color: #FDF7FF;
    }

}


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

/*mobile first styles*/
.game-container {
    width: 100%;
    height: 100px;
    position: relative;
    overflow: hidden;
    background: #1b0f2e;
    margin-top: 20px;
}
.dino{
    width: 30px;
    height: 50px;
    background:#9e7ce4;
    position: absolute;
    bottom: 0;
    left: 20px;
    transition: transform 0.1s;
}
.dino::before {
    content:'';
    position: absolute;
    width: 20px;
    height: 10px;
    background: #9e7ce4;
    top: -10px;
    left: 5px;
}
.cactus {
    width: 15px;
    height: 30px;
    background: #2e8b57;
    position: absolute;
    bottom: 0;
    right: -15px;
}
.ground{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: #b242cd;
}
.game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fb0117;
    font-family: 'adlery';
    font-weight: bold;
    font-size: 18px;
    display: none;
}

/*class de animación*/
.move{
    animation: move 2s linear infinite;
}
.jump {
    animation: jump 0.5s linear;
}
@keyframes move {
    from { right: -15px;}
    to { right: 100%;}
}
@keyframes jump {
    0% { transform: translateY(0);}
    50% {transform: translateY(-50px);}
    100% {transform: translateY(0);}
}

/*Pantallas grandes*/
@media (min-width: 768px) {
    .game-container {
        height: 150px;
    }
    .dino {
        width: 40px;
        height: 70px;
    }
    .dino:before {
        width: 25px;
        height: 15px;
        top: -15px;
    }
    .cactus {
        width: 20px;
        height: 40px;
    }
}