/* ============================================================
   Landing del gimnasio (index.php, body.kx): negro + verde neón del
   logo, títulos condensados y movimiento. Sin JS todo queda visible.
   ============================================================ */
body.kx {
    --kx-neon: #01ff06;
    --kx-neon-rgb: 1, 255, 6;
    --kx-bg: #07080a;
    --kx-bg2: #0d0f12;
    --kx-line: rgba(255,255,255,.08);
    --kx-txt: #e9ecef;
    --kx-dim: #8b929c;
    --kx-display: 'Anton', 'Outfit', Impact, sans-serif;
    background: var(--kx-bg); color: var(--kx-txt);
    overflow-x: clip;
}
.kx ::selection { background: var(--kx-neon); color: #000; }
.kx .neon { color: var(--kx-neon); text-shadow: 0 0 28px rgba(var(--kx-neon-rgb), .45); }
.kx .outline { color: transparent; -webkit-text-stroke: 2px #fff; }
.kx-muted { color: var(--kx-dim); }

/* ---------- Navbar ---------- */
.kx .pg-navbar { background: rgba(7,8,10,.35); border-bottom: 1px solid transparent; }
.kx .pg-navbar.scrolled { background: rgba(7,8,10,.92); border-bottom-color: var(--kx-line); box-shadow: none; }
.kx .pg-navbar .navbar-brand { letter-spacing: .5px; }
.kx .pg-navbar .nav-link { position: relative; }
.kx .pg-navbar .nav-link::after {
    content: ''; position: absolute; left: .5rem; right: .5rem; bottom: .2rem; height: 2px;
    background: var(--kx-neon); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.kx .pg-navbar .nav-link:hover::after { transform: scaleX(1); }
.kx .pg-navbar .btn-pg { background: var(--kx-neon); color: #000; box-shadow: 0 0 22px rgba(var(--kx-neon-rgb), .35); border-radius: 999px; }
.kx .pg-navbar .btn-pg:hover { color: #000; box-shadow: 0 0 32px rgba(var(--kx-neon-rgb), .6); }

/* ---------- Botones ---------- */
.kx-btn {
    display: inline-flex; align-items: center; gap: .55rem; position: relative; overflow: hidden;
    padding: .95rem 1.7rem; border-radius: 999px; font-weight: 800; letter-spacing: .3px; text-decoration: none;
    background: var(--kx-neon); color: #000; border: 2px solid var(--kx-neon);
    box-shadow: 0 0 0 0 rgba(var(--kx-neon-rgb), .5), 0 10px 30px rgba(var(--kx-neon-rgb), .25);
    transition: transform .2s, box-shadow .25s, background .2s, color .2s;
}
.kx-btn:hover { color: #000; transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(var(--kx-neon-rgb), .15), 0 14px 40px rgba(var(--kx-neon-rgb), .4); }
.kx-btn i { transition: transform .2s; }
.kx-btn:hover i.bi-arrow-right { transform: translateX(4px); }
.kx-btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); box-shadow: none; }
.kx-btn.ghost:hover { border-color: var(--kx-neon); color: var(--kx-neon); box-shadow: 0 0 24px rgba(var(--kx-neon-rgb), .18); }
.kx-btn.dark { background: #000; color: var(--kx-neon); border-color: #000; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.kx-btn.dark:hover { color: #fff; }
.kx-btn:not(.ghost):not(.dark)::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg); animation: kxSweep 3.6s ease-in-out infinite;
}
@keyframes kxSweep { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* ---------- Hero ---------- */
.kx-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 7rem 0 6rem; margin-top: -72px; }
.kx-hero-bg {
    position: absolute; inset: -3%; z-index: 0;
    background: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1800&q=80') center/cover;
    filter: grayscale(1) contrast(1.15) brightness(.55);
    animation: kxBurns 24s ease-in-out infinite alternate;
}
.kx-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 78% 45%, rgba(var(--kx-neon-rgb), .16), transparent 55%),
        linear-gradient(90deg, rgba(7,8,10,.96) 0%, rgba(7,8,10,.80) 45%, rgba(7,8,10,.55) 100%),
        linear-gradient(to bottom, transparent 70%, var(--kx-bg) 100%);
}
@keyframes kxBurns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }
.kx-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
    background-image: linear-gradient(var(--kx-line) 1px, transparent 1px), linear-gradient(90deg, var(--kx-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 10%, transparent 70%);
            mask-image: radial-gradient(ellipse at 70% 50%, #000 10%, transparent 70%);
}
.kx-hero-word {
    position: absolute; left: 50%; bottom: -2vw; z-index: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
    font-family: var(--kx-display); font-size: 24vw; line-height: .8; letter-spacing: -.02em;
    color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07);
}
.kx-hero .container { z-index: 1; }

.kx-tag {
    display: inline-flex; align-items: center; gap: .6rem; padding: .45rem 1rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #fff;
    background: rgba(255,255,255,.05); border: 1px solid var(--kx-line); backdrop-filter: blur(6px);
}
.kx-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kx-neon); box-shadow: 0 0 12px var(--kx-neon); animation: kxPulse 1.8s infinite; }
@keyframes kxPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .45; } }

.kx-title {
    font-family: var(--kx-display); font-weight: 400; text-transform: uppercase; color: #fff;
    font-size: clamp(3.4rem, 8.4vw, 7.6rem); line-height: .92; letter-spacing: .5px; margin: 1.4rem 0 1.3rem;
}
.kx-lead { color: #c7ccd3; font-size: 1.18rem; font-weight: 300; max-width: 540px; margin-bottom: 2rem; }

.kx-stats { display: flex; flex-wrap: wrap; margin-top: 3rem; border-top: 1px solid var(--kx-line); padding-top: 1.6rem; gap: 2.4rem; }
.kx-stats .num { font-family: var(--kx-display); font-size: 2.6rem; line-height: 1; color: #fff; }
.kx-stats .num span { color: var(--kx-neon); }
.kx-stats .lbl { font-size: .72rem; color: var(--kx-dim); text-transform: uppercase; letter-spacing: 1.5px; margin-top: .35rem; max-width: 180px; }

/* Logo del hero: la K sin fondo, con brillo neón */
.kx-mark {
    position: relative; aspect-ratio: 1; max-width: 460px; margin-left: auto; display: grid; place-items: center;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out;
}
.kx-mark img {
    width: 62%; position: relative;
    filter: drop-shadow(0 0 22px rgba(var(--kx-neon-rgb), .55)) drop-shadow(0 0 60px rgba(var(--kx-neon-rgb), .25));
    animation: kxFloat 6s ease-in-out infinite;
}
.kx-mark .ring { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(var(--kx-neon-rgb), .28); }
.kx-mark .ring.r1 { animation: kxSpin 22s linear infinite; border-style: dashed; }
.kx-mark .ring.r2 { inset: 16%; border-color: rgba(255,255,255,.08); animation: kxSpin 30s linear infinite reverse; }
.kx-mark .ring.r1::before {
    content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
    background: var(--kx-neon); box-shadow: 0 0 16px var(--kx-neon);
}
@keyframes kxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes kxSpin { to { transform: rotate(360deg); } }

.kx-scroll { position: absolute; left: 50%; bottom: 28px; z-index: 2; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.35); border-radius: 14px; }
.kx-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--kx-neon); animation: kxDot 1.8s ease-in-out infinite; }
@keyframes kxDot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Entrada escalonada del hero */
.kx .h-in { opacity: 0; transform: translateY(26px); animation: kxIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.kx .h-in.d1 { animation-delay: .05s; } .kx .h-in.d2 { animation-delay: .18s; } .kx .h-in.d3 { animation-delay: .34s; }
.kx .h-in.d4 { animation-delay: .5s; }  .kx .h-in.d5 { animation-delay: .66s; }
@keyframes kxIn { to { opacity: 1; transform: none; } }
/* El logo usa su propio transform (inclinación con el mouse): solo aparece, sin moverse */
.kx .kx-mark.h-in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); animation-name: kxInFade; }
@keyframes kxInFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Cinta ---------- */
.kx-marquee { overflow: hidden; white-space: nowrap; background: var(--kx-neon); color: #000; padding: 1rem 0; position: relative; z-index: 3; }
.kx-marquee .track { display: inline-flex; align-items: center; animation: kxMarquee 80s linear infinite; }
.kx-marquee span { font-family: var(--kx-display); font-size: 1.9rem; line-height: 1; letter-spacing: 1px; text-transform: uppercase; padding: 0 1.4rem; }
.kx-marquee i { font-size: 1.1rem; }
@keyframes kxMarquee { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.kx-section { padding: 7rem 0; position: relative; }
.kx section[id], .kx header[id] { scroll-margin-top: 70px; }
.kx-section.alt { background: var(--kx-bg2); border-top: 1px solid var(--kx-line); border-bottom: 1px solid var(--kx-line); }
.kx-head { margin-bottom: 3rem; max-width: 760px; }
.kx-kicker { display: inline-block; color: var(--kx-neon); font-size: .78rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: .8rem; }
.kx-kicker::before { content: ''; display: inline-block; width: 28px; height: 2px; background: var(--kx-neon); vertical-align: middle; margin-right: .7rem; }
.kx-h2 { font-family: var(--kx-display); font-weight: 400; text-transform: uppercase; color: #fff; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: .95; letter-spacing: .5px; margin: 0; }

/* Tarjetas */
.kx-card {
    position: relative; overflow: hidden; height: 100%; padding: 1.9rem; border-radius: 20px;
    background: rgba(255,255,255,.03); border: 1px solid var(--kx-line);
    transition: border-color .3s, transform .3s, background .3s;
}
.kx-card::before, .kx-plan::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--kx-neon-rgb), .10), transparent 60%);
}
.kx-card:hover::before, .kx-plan:hover::before { opacity: 1; }
.kx-card:hover { border-color: rgba(var(--kx-neon-rgb), .45); transform: translateY(-6px); }
.kx-card > * { position: relative; }
.kx-card h5 { color: #fff; font-weight: 800; margin-bottom: .5rem; }
.kx-card p { color: var(--kx-dim); font-size: .92rem; margin: 0; }
.kx-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2.2rem; }
.kx-card-top i {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem;
    color: var(--kx-neon); background: rgba(var(--kx-neon-rgb), .08); border: 1px solid rgba(var(--kx-neon-rgb), .25);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s;
}
.kx-card:hover .kx-card-top i { transform: rotate(-8deg) scale(1.1); background: var(--kx-neon); color: #000; }
.kx-card-top .n { font-family: var(--kx-display); font-size: 2.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.22); }
.kx-class .kx-card-top i { color: var(--c, var(--kx-neon)); border-color: color-mix(in srgb, var(--c, #01ff06) 40%, transparent); background: color-mix(in srgb, var(--c, #01ff06) 12%, transparent); }
.kx-chip { display: inline-block; margin-top: .8rem; padding: .25rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--kx-neon); border: 1px solid rgba(var(--kx-neon-rgb), .3); }
.kx-coach { text-align: center; }
.kx-coach .avatar {
    width: 110px; height: 110px; margin: 0 auto 1rem; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
    font-family: var(--kx-display); font-size: 2.6rem; color: var(--kx-neon); background: #111; border: 2px solid rgba(var(--kx-neon-rgb), .5);
}

/* Galería: mosaico, en gris y a color al pasar */
.kx-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 12px; }
.kx-gallery a { position: relative; overflow: hidden; border-radius: 18px; display: block; border: 1px solid var(--kx-line); }
.kx-gallery a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.kx-gallery a:nth-child(4), .kx-gallery a:nth-child(5), .kx-gallery a:nth-child(6) { grid-column: span 2; }
.kx-gallery img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.8); transition: transform .6s ease, filter .5s; }
.kx-gallery a:hover img { transform: scale(1.07); filter: none; }
.kx-gallery a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(var(--kx-neon-rgb), 0); transition: box-shadow .3s; }
.kx-gallery a:hover::after { box-shadow: inset 0 0 0 2px rgba(var(--kx-neon-rgb), .7); }

/* Planes */
.kx-plan {
    position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; padding: 2rem;
    border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid var(--kx-line);
    transition: transform .3s, border-color .3s;
}
.kx-plan > * { position: relative; }
.kx-plan:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.2); }
.kx-plan .name { color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: .95rem; min-height: 2.6em; padding-right: 6.5rem; }
.kx-plan:not(.featured) .name { padding-right: 0; }
.kx-plan .price { font-family: var(--kx-display); font-size: 3.6rem; line-height: 1; color: #fff; margin-top: .6rem; }
.kx-plan .per { color: var(--kx-dim); font-size: .85rem; margin-bottom: 1.4rem; }
.kx-plan ul { list-style: none; padding: 0; margin: 0 0 1.4rem; color: #c7ccd3; font-size: .9rem; }
.kx-plan li { padding: .3rem 0; }
.kx-plan li i { color: var(--kx-neon); margin-right: .35rem; }
.kx-plan.featured { border: 2px solid transparent; background: linear-gradient(180deg, #0f1a11, #0b0d0f) padding-box, conic-gradient(from var(--ang, 0deg), var(--kx-neon), transparent 30%, transparent 70%, var(--kx-neon)) border-box; animation: kxBorder 4s linear infinite; box-shadow: 0 0 60px rgba(var(--kx-neon-rgb), .12); }
.kx-plan.featured .price { color: var(--kx-neon); text-shadow: 0 0 30px rgba(var(--kx-neon-rgb), .4); }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes kxBorder { to { --ang: 360deg; } }
.kx-badge { position: absolute; top: 1.2rem; right: 1.2rem; padding: .3rem .75rem; border-radius: 999px; background: var(--kx-neon); color: #000; font-size: .68rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.kx-promo .kx-badge { position: static; display: inline-block; }

/* Contacto */
.kx-map { border: 0; width: 100%; height: 100%; min-height: 360px; border-radius: 20px; filter: grayscale(1) invert(.92) contrast(.9) hue-rotate(180deg); }
.kx-contact ul { list-style: none; margin: 0; padding: 0; }
.kx-contact li { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 0; color: #c7ccd3; border-bottom: 1px solid var(--kx-line); }
.kx-contact li:last-child { border-bottom: 0; }
.kx-contact i { color: var(--kx-neon); font-size: 1.15rem; }

/* CTA final */
.kx-cta {
    position: relative; overflow: hidden; border-radius: 28px; padding: 4.5rem 3.5rem; color: #000;
    background: var(--kx-neon);
    background-image: radial-gradient(circle at 85% 30%, rgba(255,255,255,.45), transparent 40%), repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 2px, transparent 2px 14px);
    box-shadow: 0 30px 80px rgba(var(--kx-neon-rgb), .22);
}
.kx-cta h2 { font-family: var(--kx-display); font-weight: 400; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: .92; margin-bottom: 1rem; }
.kx-cta p { font-size: 1.1rem; font-weight: 500; max-width: 480px; margin-bottom: 2rem; }
.kx-cta-mark { position: absolute; right: -4%; top: 50%; width: 46%; max-width: 440px; transform: translateY(-50%) rotate(-8deg); opacity: .16; filter: brightness(0); }

/* Footer */
.kx footer.pg-footer { background: var(--kx-bg); margin-top: 6rem !important; }
.kx footer.pg-footer i { color: var(--kx-neon); }

/* Aparición al hacer scroll (solo si corre el JS: html.flow).
   Se usa `translate` (no `transform`) para no pisar los hover. */
html.flow .reveal { opacity: 0; translate: 0 34px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1), transform .3s, border-color .3s, background .3s; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s; }
html.flow .reveal.in { opacity: 1; translate: none; }

@media (max-width: 991px) {
    .kx-hero { min-height: 92vh; padding-top: 8rem; }
    .kx-section { padding: 4.5rem 0; }
    .kx-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
    .kx-gallery a:nth-child(5), .kx-gallery a:nth-child(6) { grid-column: auto; }
    .kx-cta { padding: 3rem 1.6rem; }
    .kx-cta-mark { width: 60%; right: -18%; opacity: .35; }
    .kx-stats { gap: 1.6rem; }
    .kx-marquee span { font-size: 1.4rem; }
}

/* Quien pide menos movimiento en su sistema, no lo ve */
@media (prefers-reduced-motion: reduce) {
    .kx *, .kx *::before, .kx *::after { animation: none !important; transition: none !important; }
    .kx .h-in, html.flow .reveal { opacity: 1 !important; transform: none !important; translate: none !important; }
}